/* aesthetik/style.css — Seiten-spezifische Layouts für /aesthetik/.
 * Brand-Tokens via ../css/brand-tokens.css.
 * Wiederverwendbare Patterns via ../css/brand-patterns.css.
 */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--cream-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Mobile Token-Overrides v2 — Mobile-First-Pass, weiter reduziert */
@media (max-width: 768px) {
  :root {
    --fs-h1: 1.5rem;            /* v2: 1.75rem → 1.5rem */
    --fs-h2: 1.25rem;           /* v2: 1.4rem → 1.25rem */
    --fs-h3: 1rem;              /* v2: 1.1rem → 1rem */
    --fs-body-large: 16px;
    --space-section: 1.25rem;   /* v2: 2rem → 1.25rem */
    --space-block: 1rem;        /* v2: 1.5rem → 1rem */
    --space-element: 0.625rem;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-h1: 1.25rem;
    --fs-h2: 1.15rem;
    --space-section: 1rem;
    --space-block: 0.75rem;
  }
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* HEADER + NAV: ausgelagert in css/header.css (P-09 / AS37, 20.05.2026) —
 * EINE gemeinsame Quelle für den Header-Stil, auf allen 10 Seiten eingebunden.
 * Das frühere AS32-Duplikat (aesthetik/style.css + css/style.css) ist damit
 * aufgelöst. */

/* =========================================================
 *  HERO (Mobile-First-v2 — Hero + Trust-Bar passen in einen Mobile-Viewport)
 * ========================================================= */
.hero { padding: var(--space-section) 0 0; }

/* Hero-Buttons kompakter — scoped, brand-patterns bleibt für andere Sektionen */
.hero .btn-primary-pill,
.hero .btn-secondary-pill { padding: 0.625rem 1.25rem; font-size: 0.95rem; }

.hero-grid {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;  /* v2: Text 40% / Bild 60% */
  gap: 2rem;
  align-items: center;
}

.hero h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  color: var(--anthracite);
  letter-spacing: var(--ls-headline);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;  /* moderne Browser: 2-Zeilen-Balance für saubere Wraps */
}

.hero-subtitle {
  color: var(--gold-primary);
  font-size: 1.125rem;
  letter-spacing: var(--ls-subtitle);
  margin: 0 0 0.75rem;
  font-weight: var(--fw-medium);
}

.hero-description {
  color: var(--text-section);
  font-size: var(--fs-body-large);
  line-height: var(--lh-text);
  margin: 0 0 1.25rem;
  max-width: 540px;
}

.hero-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Hub-Hero-Bild (AS25, 19.05.2026): responsives <picture> mit
 * Desktop/Tablet/Mobile-Varianten. Ersetzt frueheren .hero-image-placeholder. */
.hub-hero-image {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(31, 46, 61, 0.06);
}

.hub-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Trust-Bar als Hero-Footer (v2) — innerhalb .hero section */
.hero-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: var(--space-block);
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-accent);
}

.hero-trust-bar .trust-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-section);
  font-weight: var(--fw-medium);
  font-size: 14px;
  white-space: nowrap;
}

.hero-trust-bar .trust-item .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-primary);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: bold;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .hero { padding: var(--space-section) 0 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 1rem; }
  .hub-hero-image { order: -1; border-radius: var(--radius-card-mobile); }

  /* Mobile: CTAs vertikal gestackt — primärer Button prominent, Anrufen als Sekundär */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .hero-cta-secondary {
    align-self: center;
    border: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .hero-cta-secondary:hover { background: transparent; transform: none; }

  /* Trust-Bar als 2x2-Grid auf Mobile */
  .hero-trust-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem 0.75rem;
    margin-top: 0.875rem;
    padding-top: 0.625rem;
  }
  .hero-trust-bar .trust-item { font-size: 12px; white-space: normal; }
  .hero-trust-bar .trust-item .check { width: 14px; height: 14px; }
}

@media (max-width: 480px) {
  .hero-subtitle { font-size: 1rem; }
  .hero-description { font-size: 15px; }
}

/* =========================================================
 *  PHILOSOPHY
 * ========================================================= */
.philosophy {
  background: var(--white);
  padding: var(--space-section) 0;
  text-align: center;
}

.philosophy-text {
  max-width: 520px;
  margin: 0 auto;
  color: var(--text-section);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* =========================================================
 *  TREATMENTS (Bento-Container, Grid in brand-patterns.css)
 * ========================================================= */
.treatments {
  padding: var(--space-section) 0;
  background: var(--cream-bg);
}

.treatments-footnote {
  margin: 1rem auto 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
  max-width: 680px;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .bento-grid-small { gap: 0.75rem; }
}

/* =========================================================
 *  PROCESS — 4 Schritte mit Pfeil
 * ========================================================= */
.process {
  background: var(--white);
  padding: var(--space-section) 0;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.process-steps li {
  position: relative;
  background: var(--cream-bg);
  border-radius: var(--radius-card);
  padding: 1rem;
  border: 1px solid var(--border-gold-subtle);
}

.process-steps li + li::before {
  content: "→";
  position: absolute;
  left: calc(-0.875rem / 2 - 0.4rem);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-primary);
  font-size: 1.25rem;
  font-weight: 300;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-primary);
  color: var(--white);
  font-weight: var(--fw-semibold);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.process-steps h3 {
  font-size: var(--fs-h3);
  color: var(--anthracite);
  font-weight: var(--fw-medium);
  margin: 0 0 0.375rem;
  letter-spacing: 0.3px;
}

.process-steps p {
  margin: 0;
  font-size: 13px;
  color: var(--text-section);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
  .process-steps li { padding: 0.75rem; }
  .process-steps li + li::before { display: none; }
}

@media (max-width: 480px) {
  .process-steps p { font-size: 12px; }
}

/* =========================================================
 *  DOCTOR-INTRO
 * ========================================================= */
.doctor-intro {
  background: var(--cream-accent);
  padding: var(--space-section) 0;
}

.doctor-grid {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: 2rem;
  align-items: center;
}

.doctor-image-placeholder {
  background: var(--cream-bg);
  border-radius: var(--radius-card);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px dashed var(--border-gold-subtle);
}

.doctor-text { max-width: 480px; }
.doctor-text h2 { margin-bottom: 0.4rem; }

.doctor-title {
  color: var(--gold-primary);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-subtitle);
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.doctor-text p {
  color: var(--text-section);
  line-height: var(--lh-body);
  margin: 0 0 0.75rem;
  font-size: var(--fs-body);
}

@media (max-width: 900px) {
  .doctor-grid { grid-template-columns: 1fr; gap: 1rem; }
  .doctor-image-placeholder { min-height: 180px; order: -1; }
}

/* =========================================================
 *  FAQ — native details/summary
 * ========================================================= */
.faq {
  background: var(--white);
  padding: var(--space-section) 0;
}

.faq-list {
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border-gold-subtle);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 0.625rem 1.75rem 0.625rem 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  color: var(--anthracite);
  position: relative;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-primary);
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.2s ease;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--gold-primary);
  outline: none;
}

.faq-item p {
  padding: 0 0 0.875rem;
  margin: 0;
  color: var(--text-section);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 768px) {
  .faq-item summary { font-size: 15px; padding: 0.625rem 1.5rem 0.625rem 0; }
  .faq-item p { font-size: 14px; }
}

/* =========================================================
 *  TERMIN-CTA — 2 Cards (Online + Telefon)
 * ========================================================= */
.termin-cta {
  background: var(--cream-bg);
  padding: var(--space-section) 0;
}

.termin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
  max-width: 720px;
  margin: 0 auto;
}

.termin-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--white);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-gold-subtle);
  box-shadow: var(--shadow-card);
  padding: 1rem;
  min-height: 120px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.termin-card:hover,
.termin-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.termin-card--primary {
  background: var(--button-primary);
  color: var(--white);
  border-color: var(--gold-primary);
}

.termin-card--primary h3,
.termin-card--primary p { color: var(--white); }

.termin-card--primary .card-link { color: var(--white); }

.termin-icon {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.termin-card h3 {
  color: var(--anthracite);
  margin: 0 0 0.375rem;
  font-size: 1.15rem;
  font-weight: var(--fw-medium);
}

.termin-card p {
  color: var(--text-section);
  margin: 0 0 0.75rem;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .termin-cta { padding: var(--space-section) 0 5rem; }  /* extra padding für sticky-CTA */
  .termin-grid { grid-template-columns: 1fr; }
  .termin-card { min-height: 100px; padding: 0.875rem; }
}

/* =========================================================
 *  FOOTER (Tokens-basiert, 1:1-Markup aus index.html)
 * ========================================================= */
.footer {
  background: var(--footer-bg);
  color: var(--white);
  padding: 2rem 0 1.25rem;
}

.footer .footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.footer h4 {
  color: var(--gold-light);
  font-weight: var(--fw-semibold);
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.footer p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.footer a {
  color: var(--gold-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover,
.footer a:focus-visible { color: var(--white); }

.footer .social-qr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer .qr-code-footer {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background: var(--white);
  padding: 4px;
  object-fit: contain;
}

.footer .social-qr p {
  letter-spacing: 2px;
  font-size: 0.85rem;
}

.footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
  text-align: center;
}

.footer .footer-bottom p {
  font-size: 0.85rem;
  margin: 0;
}

.footer .footer-bottom a {
  margin: 0 0.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer .cookie-settings-link { cursor: pointer; }

@media (max-width: 900px) {
  .footer .footer-content { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .footer .footer-content { grid-template-columns: 1fr; }
  .footer .footer-bottom p { line-height: 1.8; }
}

/* Sticky-Mobile-Bar — entfernt P-07 (18.05.2026, Anti-Werbe-Optik) */

/* =========================================================
 *  HUB-CLOSING — dezenter Abschluss-Text-Link
 *  P-07 (18.05.2026): ersetzt grosse End-CTA-Bloecke auf Hub,
 *  AS23 Neupatienten und AS24 Pre-Treatment durch Premium-Standard
 *  "Header always-on + Footer + max. 1x Inline-CTA".
 * ========================================================= */
.hub-closing {
  max-width: 720px;
  margin: 4rem auto 5rem;
  padding: 0 var(--container-padding);
  text-align: center;
}

.hub-closing-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-section);
  font-weight: 400;
  margin: 0;
}

.hub-closing-link {
  color: var(--gold-primary);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 220ms ease;
  white-space: nowrap;
}

.hub-closing-link:hover,
.hub-closing-link:focus-visible {
  color: var(--gold-hover);
}

@media (max-width: 480px) {
  .hub-closing { margin: 3rem auto 4rem; }
  .hub-closing-text { font-size: 16px; }
  .hub-closing-link { white-space: normal; }
}

/* =========================================================
 *  HUB-PHILOSOPHY & HUB-PRE-TREATMENT-HINT
 *  Zentrale Boxen "Beratung in der Praxis Dr. Golshahi" und
 *  "Hinweise vor der Behandlung" — Frau-Dr.-Review P-03 (18.05.2026):
 *  erscheinen einmal auf dem Hub, nicht mehr auf jeder Sub-Page.
 * ========================================================= */
.hub-philosophy {
  padding: var(--space-block) 0;
  background: var(--cream-bg);
}
.hub-philosophy .container { max-width: 760px; text-align: center; }
.hub-philosophy h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  color: var(--gold-primary);
  letter-spacing: var(--ls-headline);
  margin: 0 0 0.75rem;
}
.hub-philosophy p {
  color: var(--text-section);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  margin: 0;
}

.hub-pre-treatment-hint {
  padding: var(--space-element) 0 var(--space-block);
  background: var(--white);
}
.hub-pre-treatment-hint__box {
  max-width: 760px;
  margin: 0 auto;
  border: 2px solid var(--gold-primary);
  background: linear-gradient(180deg, var(--cream-bg) 0%, var(--cream-accent) 100%);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.hub-pre-treatment-hint__box h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: var(--fw-medium);
  color: var(--anthracite);
  letter-spacing: 0.3px;
}
.hub-pre-treatment-hint__box p {
  margin: 0;
  color: var(--text-section);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.hub-pre-treatment-hint__box .btn-secondary-pill {
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .hub-pre-treatment-hint__box { padding: 1rem; }
}