/* ======================================================================
   STYLEGUIDE — Aphesis / coaching4revelation
   Design-Tokens zuerst (Farben, Schrift, Abstände), danach Komponenten.
   Texte werden NICHT hier verändert — dafür ans Ende der Datei zum
   CONTENT-Objekt im Script-Block gehen. Dieses CSS bestimmt nur das
   Aussehen.
   ====================================================================== */
:root{
  /* Farben */
  --bg: #F6F0E6;
  --bg-alt: #EEE3D2;
  --paper: #FFFDF8;
  --ink: #2B2117;
  --ink-soft: #5B4E40;
  --terracotta: #B85C3E;
  --terracotta-dark: #8F4530;
  --gold: #A9822F;
  --sage: #6E7A5C;
  --night: #241A12;
  --night-ink: #EFE3D0;
  --line: rgba(43,33,23,0.14);
  /* Themenfarben — je Angebot eine feste Farbe, gemeinsam verwendet vom
     "Klar strukturiert"-Flussdiagramm und den Preis-Karten (siehe
     topicClassFor() in js/main.js / partnerschaft.js). Drei der vier
     Farben sind bestehende Marken-Akzente (die auf der /partnerschaft-
     Seite unten bereits getauscht werden — --topic-* folgt dem
     automatisch mit); der Violett-Ton ist die einzige neue Farbe.
     Zieldefinition und Coaching-Serie wurden auf Wunsch getauscht:
     Zieldefinition ist jetzt violett, Coaching-Serie der vorherige
     Braun-/Goldton (--gold). */
  --topic-erstgespraech: var(--sage);
  --topic-einzelsession: var(--terracotta);
  --topic-zieldefinition: #5C4A78;
  --topic-serie: var(--gold);
  /* Pastellige Hintergrundtöne derselben vier Themenfarben (für die
     Kachel-/Karten-Fläche selbst, nicht nur den Rahmen) — bewusst als
     eigene, feste Werte statt z.B. per color-mix(), damit die Abstufung
     von Hand fein justiert werden kann. */
  --topic-erstgespraech-bg: #E2E3D9;
  --topic-einzelsession-bg: #F1DDD3;
  --topic-zieldefinition-bg: #DED9DE;
  --topic-serie-bg: #EEE4D0;
  /* Layout */
  --radius: 2px;
  --maxw: 1180px;
  /* Schriftarten — im Admin-Panel unter "Allgemein" → "Schriftarten" wählbar;
     main.js setzt diese beiden Variablen zur Laufzeit aus content.json. */
  --font-heading: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;
}

/* "Partnerschaft" landing page (/partnerschaft): same brand family and same
   logo colours as the main site, but a genuinely dark canvas — using only
   hex values already in the palette (the darker end of it: --ink, --night
   and --ink-soft, previously only used for text and the footer). No new
   colour is introduced anywhere.

   Accent reweighting: gold takes over terracotta's role as the dominant
   accent (buttons, the hero's accent word, the nav underline, badges…),
   terracotta drops into gold's old, quieter label role, and terracotta-dark
   is left as-is — it already reads well on dark (proven by the footer using
   it there) and still works as a "darker shade" pairing for hover states.

   Dark canvas: --bg/--bg-alt/--paper reuse --ink/--night/--ink-soft's exact
   hex (not the variables themselves, to avoid a circular definition — see
   below), swapped one rung darker→lighter than usual: --bg is the mid-dark
   ink tone (not as black as the footer's --night, which is reserved for the
   alternating section band), and --paper — card backgrounds — gets the
   lightest of the three dark tones so cards still visibly "lift" off the
   page. --ink/--ink-soft (text roles) flip to light tones so text stays
   readable on all of the above; --line becomes a light-based border to
   match. Everything else (.about-me's own photo section, the footer) was
   already styled dark by design and needs no change. */
body.partnerschaft-page{
  --terracotta: #A9822F;
  --gold: #B85C3E;
  --sage: #B85C3E;

  --bg: #2B2117;       /* was --ink's value */
  --bg-alt: #241A12;   /* was --night's value */
  --paper: #5B4E40;    /* was --ink-soft's value */
  --ink: #EFE3D0;       /* was --night-ink's value */
  --ink-soft: rgba(239,227,208,0.72);
  --line: rgba(239,227,208,0.16);
  /* Themenfarben explizit statt vererbt: --sage und --gold werden oben
     beide auf denselben Farbwert (#B85C3E) umgelegt, wodurch "Erstgespräch"
     (--sage) und "Zieldefinition" (--gold) sonst dieselbe Farbe hätten.
     Deshalb hier alle vier fest und unterscheidbar für den dunklen
     Hintergrund neu gesetzt, statt sie von --sage/--terracotta/--gold zu
     erben. */
  --topic-erstgespraech: #8FA37A;
  --topic-einzelsession: #D98A66;
  --topic-zieldefinition: #B79ADB;
  --topic-serie: #D4B15C;
  /* Pastellige Hintergrundtöne — auf dem dunklen Hintergrund heisst
     "pastellig" nicht hell, sondern nur leicht zur Themenfarbe hin
     verschoben (ausgehend von --paper, #5B4E40), sonst würden helle
     Pastelltöne wie auf der hellen Seite hier viel zu grell wirken. */
  --topic-erstgespraech-bg: #655F4C;
  --topic-einzelsession-bg: #745A48;
  --topic-zieldefinition-bg: #6D5D5F;
  --topic-serie-bg: #736246;
}
/* hardcoded (non-variable) light colours that would otherwise stay light on
   the new dark canvas: the sticky header bar, the hero's no-photo-yet
   fallback tint, and the featured/best price-card highlight background */
body.partnerschaft-page header{ background:rgba(43,33,23,0.88); }
body.partnerschaft-page .hero-art{ background:#5B4E40; }
body.partnerschaft-page .price-card.featured .price-face,
body.partnerschaft-page .price-card.best .price-face{ background:#5B4E40; }
/* terracotta-dark (deliberately left dark, see above) is too close in
   luminance to the new --paper card colour to stay readable as TEXT sitting
   directly on a card — these are the spots that do that; swap them to the
   now-gold --terracotta, which has much better contrast there. Borders and
   backgrounds using terracotta-dark elsewhere are unaffected (an outline
   doesn't need the same contrast a run of text does). */
body.partnerschaft-page .philosophy-card-title,
body.partnerschaft-page .philosophy-card a,
body.partnerschaft-page .price-card.best .per-session{
  color: var(--terracotta);
}
body.partnerschaft-page .philosophy-card a:hover{ color: var(--gold); }
body.partnerschaft-page .price-card.active .price-face{
  box-shadow: inset 0 0 0 1px var(--terracotta);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

h1,h2,h3,.serif{
  font-family:var(--font-heading);
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 22px;} }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body);
  font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--terracotta-dark); font-weight:600;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--terracotta); display:inline-block;}

/* ---------- Header / Navigation ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,240,230,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:var(--maxw); margin:0 auto;}
.logo{font-family:var(--font-heading); font-size:22px; font-weight:600; letter-spacing:0.04em; display:flex; align-items:center;}
.logo img{height:56px; width:auto; display:block;}
.nav-links{display:flex; gap:34px; align-items:center; font-size:14.5px;}
.nav-links a{position:relative; padding:4px 0; color:var(--ink-soft); transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--terracotta); transition:right .25s ease;
}
.nav-links a:hover::after{right:0;}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{right:0;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  background:var(--terracotta); color:#fff !important; font-size:14px; font-weight:500;
  border-radius:var(--radius); border:1px solid var(--terracotta);
  transition:background .2s, transform .2s, box-shadow .2s; white-space:nowrap;
}
.btn:hover{background:var(--terracotta-dark); border-color:var(--terracotta-dark); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--ink) !important; border:1px solid var(--line);}
.btn-outline:hover{border-color:var(--terracotta); color:var(--terracotta-dark) !important; background:transparent;}
.burger{display:none; background:none; border:0; cursor:pointer; padding:6px;}
.burger span{display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0;}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:78%; max-width:320px;
    background:var(--paper); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:0 40px; transform:translateX(100%); transition:transform .35s ease;
    box-shadow:-8px 0 30px rgba(0,0,0,0.08);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:19px; font-family:var(--font-heading);}
  .burger{display:block;}
}

/* ---------- Hero ---------- */
.hero{position:relative; padding:96px 0 100px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:center;}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr; gap:48px;} .hero{padding:56px 0 72px;} }
.hero-eyebrow{margin-bottom:22px;}
.hero h1{font-size:clamp(38px, 5.4vw, 66px); line-height:1.06; font-weight:500;}
/* Bewusst fest auf Fraunces statt var(--font-heading): das Bibelzitat unter
   "Über mich" hat eine eigene Admin-Panel-Schrifteinstellung (Fraunces),
   unabhängig vom global gewählten Überschriften-Font — hier fest verdrahtet,
   damit "deinen Weg gehen." optisch genau dazu passt, auch wenn der globale
   Heading-Font (aktuell Work Sans) mal geändert wird. */
.hero h1 .accent{color:var(--terracotta); font-family:'Fraunces', serif; font-style:italic; font-weight:400;}
/* .verse-font trägt überall sonst, wo "deinen Weg gehen" vorkommt (Coaching-
   Kicker, Footer-Tagline), bewusst dieselbe Schrift wie der Hero-Akzent oben
   (fest 'Fraunces', nicht die themenweite --font-heading-Variable) — der
   Hero-Akzent ist die Referenz, an die sich der Rest anpasst. */
.verse-font{font-family:'Fraunces', serif; font-style:italic; font-weight:400;}
.hero .lead{margin-top:26px; font-size:18px; color:var(--ink-soft); max-width:50ch; line-height:1.7;}
.hero-actions{margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.hero-note{margin-top:22px; font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.hero-note .dot{width:6px; height:6px; border-radius:50%; background:var(--sage); display:inline-block; flex-shrink:0;}

.hero-art{position:relative; aspect-ratio:4/5; border-radius:2px; overflow:hidden; background:#DFCBA9;}
.hero-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%;}
.hero-art .tint{position:absolute; inset:0; background:linear-gradient(195deg, rgba(184,92,62,0.16) 0%, rgba(43,33,23,0.02) 45%, rgba(43,33,23,0.28) 100%);}
.hero-art .sunburst{position:absolute; width:280%; height:280%; background:radial-gradient(circle at 30% 20%, rgba(255,247,230,0.35) 0%, rgba(255,247,230,0) 45%);}

.cord{width:100%; display:block; margin:0 auto;}
.cord path{
  fill:none; stroke:var(--terracotta-dark); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1);
}
.cord.in path{stroke-dashoffset:0;}

/* ---------- Section shells ---------- */
section{padding:92px 0;}
@media (max-width:640px){ section{padding:64px 0;} }
.section-alt{background:var(--bg-alt);}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:calc(clamp(28px,3.4vw,40px) * var(--text-scale,1)); margin-top:16px; line-height:1.18;}
.section-head .prose{margin-top:16px; color:var(--ink-soft); font-size:calc(16.5px * var(--text-scale,1)); max-width:56ch;}
/* Einzelnes Wort in einer Überschrift, farblich wie der Fliesstext darunter
   abgesetzt (z.B. "werdende" unter "Für wen") — bewusst kursiv statt fett,
   damit es sich unterordnet statt zu betonen. */
.heading-soft{
  color:var(--ink-soft); font-family:'Fraunces', serif; font-style:italic; font-weight:400; opacity:0.5;
  display:inline-block; transform:skewX(-22deg);
}
/* "Für wen": intro text runs the full section width, like the topic chips below it */
#themen .section-head{max-width:none; margin-bottom:22px;}
#themen .section-head .prose{max-width:none;}

#themen, #fundament, #coaching, #buchung, #blog, #howItWorks{scroll-margin-top:88px;}
/* per-section text alignment toggle, set from the admin panel (Reihenfolge & Layout).
   applied to a [data-block] wrapper by main.js — text-align inherits down
   to whatever heading/paragraph sits inside, and the two known "boxed"
   children get re-centered as a block, since text-align alone doesn't
   move a fixed/max-width box, only the text inside it */
[data-block].align-center{text-align:center;}
[data-block].align-center .section-head{margin-left:auto; margin-right:auto;}
[data-block].align-center .coaching-philosophy{margin-left:auto; margin-right:auto;}
[data-block].align-center .eyebrow{justify-content:center;}
/* per-section text-size toggle, same admin tab as alignment above — sets a
   scale factor that the heading/intro font-size rules below multiply into
   their own size (see .section-head h2 etc.), so headings keep their
   responsive clamp() and only get proportionally bigger/smaller */
[data-block]{--text-scale:1;}
[data-block].text-sm{--text-scale:0.85;}
[data-block].text-lg{--text-scale:1.15;}
a:focus-visible, button:focus-visible{outline:2px solid var(--terracotta-dark); outline-offset:3px; border-radius:1px;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-group .reveal:nth-child(2){transition-delay:.08s;}
.reveal-group .reveal:nth-child(3){transition-delay:.16s;}
.reveal-group .reveal:nth-child(4){transition-delay:.24s;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none;} }

/* ---------- Über mich / Zitat ---------- */
.about-me{background:var(--night); color:var(--night-ink); padding:110px 0; position:relative; overflow:hidden;}
.about-me .bg-photo{position:absolute; inset:0; background-size:cover; background-position:center 68%; opacity:0.4;}
.about-me .bg-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,26,18,0.88) 0%, rgba(36,26,18,0.78) 55%, var(--night) 100%);}
.about-me .wrap{max-width:820px; text-align:center; position:relative; z-index:1;}
.about-me .eyebrow{color:#D8A968; justify-content:center;}
.about-me .eyebrow::before{background:#D8A968;}
.about-portrait-wrap{margin-top:22px; display:flex; justify-content:center;}
.about-portrait{
  width:148px; height:148px; border-radius:50%; object-fit:cover;
  border:3px solid #D8A968; box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.about-heading{
  font-size:clamp(28px,3.6vw,40px); color:#F8EFDD; margin-top:14px;
}
.about-intro{
  margin-top:18px; color:#DCCDB4; font-size:16.5px; line-height:1.75;
  max-width:60ch; margin-left:auto; margin-right:auto;
}
.about-me .mark{
  font-family:var(--font-heading); font-size:120px; line-height:1; font-weight:400;
  color:rgba(216,169,104,0.16); margin:36px 0 -18px;
  pointer-events:none; user-select:none;
}
.about-me blockquote{
  font-family:var(--font-heading); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.4vw,36px); line-height:1.45; margin:0; color:#F8EFDD;
}
.about-me cite{
  display:block; margin-top:14px; font-style:normal; font-family:var(--font-body);
  font-size:13.5px; letter-spacing:0.1em; text-transform:uppercase; color:#C7A876;
}
.about-me .sub{margin-top:38px; color:#CBBBA0; font-size:16px; line-height:1.75; max-width:60ch; margin-left:auto; margin-right:auto;}
.coaching-philosophy{margin-top:22px; margin-bottom:52px;}
.coaching-philosophy .kicker{
  font-family:var(--font-heading); font-weight:500; letter-spacing:-0.01em;
  font-size:calc(clamp(28px,3.4vw,40px) * var(--text-scale,1)); color:var(--ink); line-height:1.18;
}
.philosophy-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px;}
@media (max-width:820px){ .philosophy-grid{grid-template-columns:1fr;} }
.philosophy-card{background:var(--paper); border:1px solid var(--line); padding:22px 24px;}
.philosophy-card-title{
  font-family:var(--font-body); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--terracotta-dark); font-weight:600; margin-bottom:12px;
}
.philosophy-card p{color:var(--ink-soft); font-size:15px; line-height:1.7; margin:0; max-width:none;}
.philosophy-card strong{color:var(--ink); font-weight:600;}
.philosophy-card a{color:var(--terracotta-dark); text-decoration:underline; text-underline-offset:2px;}
.philosophy-card a:hover{color:var(--terracotta);}

/* ---------- Stimmen / Testimonials ----------
   Ganze Sektion bleibt display:none, solange testimonials.items leer ist
   (siehe renderTestimonials() in main.js) — kein Markup hier greift also
   ohne mindestens ein echtes Zitat. Kartenraster + grosses, transluzentes
   Anführungszeichen bewusst denselben Bausteinen entlehnt wie
   .philosophy-card und das "Über mich"-Zitat (.mark). */
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px;}
@media (max-width:820px){ .testimonial-grid{grid-template-columns:1fr;} }
.testimonial-card{background:var(--paper); border:1px solid var(--line); padding:30px 26px; position:relative; overflow:hidden;}
/* Platzhalter-Wasserzeichen: die drei aktuellen Stimmen sind erfundene
   Beispiele nur zur Vorschau des Layouts (siehe testimonials.items in
   content.json) — dieses Overlay macht das auf jeder Karte unübersehbar,
   solange keine echten Stimmen eingetragen sind. Rein dekorativ/CSS, kein
   eigenes Feld nötig; einfach diesen Block entfernen, sobald echte
   Testimonials drin sind. */
.testimonial-card::after{
  content:"PLATZHALTER"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(-22deg);
  font-family:var(--font-body); font-weight:700; font-size:26px; letter-spacing:0.1em;
  color:var(--ink); opacity:0.12; white-space:nowrap; pointer-events:none; user-select:none;
}
.testimonial-mark{
  font-family:var(--font-heading); font-size:52px; line-height:1; font-weight:400;
  color:rgba(216,169,104,0.35); margin-bottom:2px; pointer-events:none; user-select:none;
}
.testimonial-card blockquote{
  margin:0; font-family:var(--font-heading); font-style:italic; font-weight:400;
  font-size:16.5px; line-height:1.6; color:var(--ink);
}
.testimonial-name{margin-top:18px; font-size:13px; font-weight:600; color:var(--terracotta-dark); letter-spacing:0.02em;}
.testimonial-name span{font-weight:400; color:var(--ink-soft);}

/* runs the full section width instead of wrapping at .section-head's 640px */
#coaching .section-head{max-width:none;}
/* thin rule + extra air to visually separate "Klar strukturiert" (heading +
   process graphic) from the Arbeitsweise-cards above it */
#coaching [data-block="heading"]{border-top:1px solid var(--line); padding-top:48px;}
/* "Klar strukturiert" is a bare heading with no eyebrow/intro before it —
   the sitewide 52px (calibrated for a full eyebrow+heading+intro block)
   reads as too much air under a heading alone, so it gets a smaller gap
   to the concept-grid below it specifically */
#coaching [data-block="heading"] .section-head{margin-bottom:28px;}

/* ---------- Themen-Chips ----------
   Gitter mit fest gleicher Breite UND Höhe für jede Kachel (statt vorher
   einer Flex-Wolke mit textbreiten Kacheln) — Text wird per flex/column
   vertikal zentriert, unabhängig davon ob er ein- oder mehrzeilig
   umbricht. Der "kein Beitrag"-Hinweis (siehe renderTopics() in main.js)
   darf die feste Höhe im geöffneten Zustand trotzdem überschreiten. */
.topics{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:8px;}
@media (max-width:900px){ .topics{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:480px){ .topics{grid-template-columns:1fr;} }
.topic-chip{
  position:relative; height:72px; background:var(--paper); border:1px solid var(--line);
  font-size:13.5px; color:var(--ink-soft); transition:border-color .2s, color .2s, transform .2s;
  cursor:pointer; font-family:inherit; text-align:center; overflow:hidden;
}
.topic-chip:hover, .topic-chip:focus-visible{border-color:var(--terracotta); color:var(--ink); transform:translateY(-2px);}
/* Label und "kein Beitrag"-Hinweis liegen deckungsgleich übereinander
   (beide position:absolute; inset:0) und blenden per Opacity um — wirkt wie
   eine Kachel-Rückseite, aber ohne 3D-Drehung/Flip-Animation. Dadurch bleibt
   die Kachel immer exakt gleich hoch, egal ob offen oder nicht. */
.topic-chip-label, .topic-chip-empty-note{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:10px 16px; transition:opacity .2s ease;
}
.topic-chip-label{opacity:1;}
.topic-chip-empty-note{
  opacity:0; pointer-events:none;
  font-size:12px; font-style:italic; line-height:1.35; color:var(--ink-soft);
}
.topic-chip.open .topic-chip-label{opacity:0;}
.topic-chip.open .topic-chip-empty-note{opacity:1; pointer-events:auto;}
.topic-chip.open{border-color:var(--terracotta); color:var(--ink); transform:none;}
.topic-note{margin-top:52px; font-size:14.5px; color:var(--ink-soft); font-style:italic;}
.themen-cta-wrap{margin-top:16px;}

/* ---------- Blog-Karten ----------
   Kleines Bild oben (oder farbiger Platzhalter ohne Bild) + Text unten,
   alle Karten im eingeklappten Zustand gleich hoch: das Bild hat ein
   festes Seitenverhältnis und nur die halbe Breite/Höhe eines vollen
   Banners (sitzt als erstes Kind in .blog-post-body, erbt so dessen
   Padding statt eigener Ränder), der Fliesstext wird per
   -webkit-line-clamp auf ein paar Zeilen geklemmt ("Anfang des Textes"),
   und die Fusszeile (Thema-Tag + "Weiterlesen") sitzt per margin-top:auto
   immer ganz unten in der Karte. Erst ein Klick auf "Weiterlesen" hebt
   die Klemmung für genau diese Karte auf (.expanded) — die anderen
   Karten der Reihe bleiben unverändert (siehe align-items:start bei
   .blog-page-posts, sonst würde CSS Grid sie sonst auf die Höhe der
   grössten strecken). */
.blog-post{
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); overflow:hidden;
}
.blog-post-image{
  width:100%; aspect-ratio:16/10; background-size:cover; background-position:center;
  flex-shrink:0; margin-bottom:14px;
}
.blog-post-image-empty{
  background-image:linear-gradient(135deg, var(--topic-einzelsession-bg) 0%, var(--topic-zieldefinition-bg) 55%, var(--topic-erstgespraech-bg) 100%);
}
.blog-post-body{display:flex; flex-direction:column; flex:1; padding:20px;}
.blog-post-date{font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--terracotta-dark); font-weight:600;}
.blog-post h3{
  font-size:17px; margin-top:8px; line-height:1.3;
  /* Fest auf 2 Zeilen geklemmt UND mit min-height auf genau diesen Platz
     reserviert (line-clamp allein spart nur bei ZU LANGEN Titeln Platz,
     kürzere Titel würden trotzdem weniger Höhe brauchen) — damit alle
     Karten im eingeklappten Zustand gleich hoch bleiben, egal wie lang der
     Titel ist. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; min-height:2.6em;
}
.blog-post-text{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3;
  overflow:hidden;
}
.blog-post.expanded .blog-post-text{
  display:block; -webkit-line-clamp:unset; line-clamp:unset; overflow:visible;
}
.blog-post-text p{color:var(--ink-soft); font-size:14px; line-height:1.6; margin:10px 0 0;}
.blog-post-text p:first-child{margin-top:10px;}
.blog-post-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:14px;
}
.blog-post-topic{
  font-size:11px; letter-spacing:0.04em; color:var(--sage);
  border:1px solid var(--line); padding:3px 8px; flex-shrink:0;
}
.blog-read-more{
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--terracotta-dark);
  border-bottom:1px solid var(--terracotta); white-space:nowrap;
}
.blog-read-more:hover{color:var(--terracotta);}
.blog-empty{text-align:center; margin-top:36px; padding:40px 24px; border:1px dashed var(--line);}
.blog-empty p{color:var(--ink-soft); margin:0 0 18px;}
.blog-back-to-topics{text-align:center; margin-top:48px;}

/* ---------- Blog-Seite (/blog) ---------- */
.blog-back-to-topics-top{
  display:inline-flex; align-items:center; gap:6px; margin-top:-6px; margin-bottom:18px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft); text-decoration:none;
}
.blog-back-to-topics-top::before{content:'‹'; font-size:16px; line-height:1;}
.blog-back-to-topics-top:hover{color:var(--terracotta);}
.blog-filter-bar{display:flex; gap:20px; flex-wrap:wrap; margin:32px 0 40px; align-items:flex-end;}
.blog-filter-field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.blog-filter-field select{
  padding:10px 14px; border:1px solid var(--line); background:var(--paper);
  font-family:var(--font-body); font-size:14px; color:var(--ink); min-width:200px;
}
.blog-page-posts{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start;}
@media (max-width:960px){ .blog-page-posts{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .blog-page-posts{grid-template-columns:1fr;} .blog-filter-bar{gap:16px;} }
.blog-page-posts .blog-post{scroll-margin-top:100px;}

/* ---------- Coaching-Konzept: Prozess-Ablauf ("Klar strukturiert") ----------
   Ein kleines Flussdiagramm, das von links nach rechts läuft: Erstgespräch
   → Coaching-Vereinbarung (die gemeinsame Vorstufe, als CSS-Grid-Item über
   beide Zeilen zentriert) → Gabelung in zwei Zeilen — die kurze für ein
   konkretes Thema (Einzelsession) und die längere für ein vielschichtiges
   Thema (Coaching-Serie → Zieldefinition → Einzelsession). Jede Kachel
   zeigt vorne nur das Nötigste und dreht sich per Hover/Klick/Tap um für die
   Details — exakt derselbe 3D-Flip wie bei den Preis-Karten weiter unten
   (siehe dort für die Mechanik). Absichtlich sehr kompakt gehalten (kleine
   Masse, kurze Texte), damit das GANZE Diagramm ohne horizontales Scrollen
   auf eine Bildschirmbreite passt — das war mit den grösseren, offenen
   Boxen einer früheren Version nicht der Fall. Positionen werden inline
   (grid-column/-row) direkt beim Rendern gesetzt (siehe
   renderCoachingProcess() in js/main.js), nicht über CSS-Selektoren, weil
   jede Kachel eine eigene, feste Position im Diagramm hat.
   .process-flow-scroll bleibt trotzdem als Sicherheitsnetz für sehr schmale
   Bildschirme (Handy quer/hoch) erhalten. */
.process-block{margin:0 auto;}
.process-intro{font-size:16px; line-height:1.7; color:var(--ink-soft); max-width:68ch;}
.process-link{color:var(--terracotta-dark); text-decoration:underline; text-underline-offset:2px; white-space:nowrap;}
.process-link:hover{color:var(--terracotta);}

.process-flow-scroll{overflow-x:auto; margin-top:16px; padding-bottom:4px;}
.process-flow{
  display:grid; grid-auto-columns:auto; grid-template-rows:auto auto;
  column-gap:16px; row-gap:20px; align-items:center; width:max-content;
  margin:0 auto; padding:4px;
}
.process-arrow{color:var(--ink-soft); font-size:26px; font-weight:600; justify-self:center; align-self:center;}

/* Grösser als zuvor: seit die Coaching-Serie-Kachel Zieldefinition und
   Einzelsession als eigene "Seiten" auf sich selbst zeigt (statt als
   eigene Kacheln, siehe renderCoachingProcess()/interactions() in
   main.js), hat das Diagramm nur noch 3 eckige Kacheln + den Kreis statt
   5 eckige — der freigewordene Platz geht in die Grösse der drei
   verbliebenen. */
.process-tile{perspective:1200px; cursor:pointer; width:250px; height:200px;}
.process-tile-inner{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.15,.2,1);
}
.process-tile:hover .process-tile-inner,
.process-tile.flipped .process-tile-inner{transform:rotateY(180deg);}
/* Coaching-Serie: die reine CSS-Hover-Vorschau (die bei den übrigen
   Kacheln beim Wegfahren automatisch wieder zurückdreht) wird hier
   deaktiviert — das Umdrehen beim Hovern übernimmt stattdessen JS (siehe
   mouseenter-Handler in interactions()), das die .flipped-Klasse wie bei
   einem Klick dauerhaft SETZT statt sie nur per :hover vorzutäuschen.
   Dadurch bleibt die Details-Rückseite auch nach dem Wegfahren stehen,
   statt wieder zur Vorderseite zurückzudrehen. */
.process-tile[data-branchb]:hover:not(.flipped) .process-tile-inner{transform:none;}
.process-tile .process-face{
  position:absolute; inset:0; overflow:hidden auto; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--paper); border:none; border-radius:var(--radius);
  padding:24px 26px; display:flex; flex-direction:column; justify-content:center; text-align:center;
  /* "schwebend": dauerhafter Schatten statt Rahmen, damit die Kacheln über
     dem Hintergrund zu schweben scheinen (kein border mehr — die farbigen
     border-top-Akzente der Themenfarben weiter unten bleiben davon
     unberührt, die setzen nur die obere Kante).
     BEWUSST kein transform hier (z.B. translateY fürs Anheben beim Hover) —
     .process-tile-back braucht zwingend transform:rotateY(180deg), um nach
     dem 180°-Dreh der Karte (.process-tile-inner) wieder richtig herum zu
     erscheinen. Eine hier gesetzte transform-Regel mit höherer Spezifität
     überschreibt das komplett statt sich zu addieren — die Rückseite bleibt
     dann unsichtbar (backface-visibility:hidden greift, weil sie effektiv
     "von hinten" zur Kamera zeigt). Nur box-shadow animieren, nie transform. */
  box-shadow:0 10px 24px rgba(43,33,23,0.10), 0 2px 6px rgba(43,33,23,0.05);
  transition:box-shadow .25s;
}
.process-tile:hover .process-face, .process-tile.flipped .process-face{
  box-shadow:0 18px 36px rgba(43,33,23,0.15), 0 5px 12px rgba(43,33,23,0.08);
}
.process-tile-back{transform:rotateY(180deg);}

/* Themenfarben: jede eckige Kachel bekommt anhand ihres Themas (Erst-
   gespräch, Einzelsession, Zieldefinition, Coaching-Serie) einen farbigen
   Rahmen oben — dieselben vier Farben wie unten bei den Preiskarten (siehe
   --topic-* in :root, gesetzt via topicClassFor() in main.js/
   partnerschaft.js). Sitzt auf der einzelnen FLÄCHE (nicht der ganzen
   Kachel), damit die Coaching-Serie-Kachel Vorder- und Rückseite beim
   Durchklicken ihrer vier Seiten unabhängig voneinander einfärben kann
   (die übrigen Kacheln haben auf beiden Flächen einfach dieselbe Klasse).
   Die runde Coaching-Vereinbarung (process-tile-doc) bekommt bewusst keine
   Themenfarbe — sie ist kein Termin-Thema, sondern nur ein Dokument. */
.process-face.topic-erstgespraech{border-top:4px solid var(--topic-erstgespraech); background:var(--topic-erstgespraech-bg);}
.process-face.topic-einzelsession{border-top:4px solid var(--topic-einzelsession); background:var(--topic-einzelsession-bg);}
.process-face.topic-zieldefinition{border-top:4px solid var(--topic-zieldefinition); background:var(--topic-zieldefinition-bg);}
.process-face.topic-serie{border-top:4px solid var(--topic-serie); background:var(--topic-serie-bg);}
.process-tile:hover .process-face.topic-erstgespraech, .process-tile.flipped .process-face.topic-erstgespraech{border-color:var(--topic-erstgespraech);}
.process-tile:hover .process-face.topic-einzelsession, .process-tile.flipped .process-face.topic-einzelsession{border-color:var(--topic-einzelsession);}
.process-tile:hover .process-face.topic-zieldefinition, .process-tile.flipped .process-face.topic-zieldefinition{border-color:var(--topic-zieldefinition);}
.process-tile:hover .process-face.topic-serie, .process-tile.flipped .process-face.topic-serie{border-color:var(--topic-serie);}
.process-face.topic-erstgespraech .process-tile-eyebrow{color:var(--topic-erstgespraech);}
.process-face.topic-einzelsession .process-tile-eyebrow{color:var(--topic-einzelsession);}
.process-face.topic-zieldefinition .process-tile-eyebrow{color:var(--topic-zieldefinition);}
.process-face.topic-serie .process-tile-eyebrow{color:var(--topic-serie);}

/* Coaching-Vereinbarung ist ein Dokument, kein Termin — rund statt eckig
   (wie ein Siegel/Stempel auf einer Vereinbarung). Bewusst UNVERÄNDERT
   bei ihrer bisherigen Grösse belassen (anders als die drei eckigen
   Kacheln oben), damit sie weiterhin klar als eigene, kleinere Kategorie
   auffällt. */
.process-tile-doc{width:150px; height:150px;}
.process-tile-doc .process-face{border-radius:50%; padding:22px;}
.process-tile-doc .process-tile-title{font-size:14px;}
.process-tile-doc .process-tile-hint{font-size:10px;}
.process-tile-doc .process-tile-caption{font-size:13px; line-height:1.35; text-align:center;}

.process-tile-eyebrow{font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.process-tile-title{margin-top:6px; font-family:var(--font-heading); font-size:20px; line-height:1.25; color:var(--ink);}
.process-tile-meta{margin-top:5px; font-size:14px; color:var(--sage); font-weight:600; letter-spacing:0.05em; text-transform:uppercase;}
/* Bei der Erstgespräch-Kachel steht die Meta-Zeile ("15 Min. · virtuell")
   jetzt wie bei den eckigen Themen-Kacheln VOR dem Titel (statt danach) —
   dort keinen zusätzlichen Abstand nach oben, analog zu .process-tile-eyebrow. */
.process-tile-meta:first-child{margin-top:0;}
.process-tile-hint{margin-top:12px; font-size:12.5px; color:var(--ink-soft); opacity:0.7;}
.process-tile-substeps{margin-top:10px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; text-align:left;}
.process-tile-caption{font-size:13.5px; color:var(--ink-soft); line-height:1.5; text-align:left;}
/* "Weiter"-Hinweis der Coaching-Serie-Kachel: bewusst unten rechts statt
   zentriert wie .process-tile-hint, um sich sichtbar von der normalen
   "Details ›"-Vorderseite abzuheben — signalisiert "hier geht's weiter",
   nicht "hier gibt's mehr zu lesen". */
.process-tile-next{
  position:absolute; right:14px; bottom:12px; font-size:12.5px; font-weight:600;
  color:var(--terracotta-dark); opacity:0.85;
}
@media (prefers-reduced-motion: reduce){ .process-tile-inner{transition:none;} }

/* ---------- Preise & Buchung (zusammengelegt) ----------
   Jede Karte ist zugleich Preis-Info UND Buchungs-Auswahl: "Jetzt buchen"
   wählt unten den passenden Koalendar-Termin (siehe tier.bookLabel in
   js/main.js) — die Karte bekommt dafür .active. Mehrere Karten können
   denselben Termin buchen (Coaching-Serie startet mit der Zieldefinition),
   dann sind beide gleichzeitig .active. */
.price-grid-3{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; align-items:stretch;}
@media (max-width:960px){ .price-grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .price-grid-3{grid-template-columns:1fr;} }
/* Jede Karte + ihr "Jetzt buchen"-Button (siehe .price-buy-btn weiter
   unten) stecken zusammen in einem Wrapper, der jetzt das eigentliche
   Grid-Item ist — der Button lebt bewusst ausserhalb der Flip-Karte,
   damit er immer sichtbar bleibt (nicht mit wegdreht) und nicht mehr
   e.stopPropagation() braucht, um den Karten-Flip zu verhindern. */
.price-card-wrap{display:flex; flex-direction:column; gap:12px;}
/* Gleiche Farbe/Optik wie der Haupt-CTA (siehe .btn), aber als volle
   Buttonbreite unter der Karte statt inline-schmal wie im Hero. */
.price-buy-btn{display:flex; width:100%; justify-content:center;}

/* flip cards: front shows badge + tag + amount + amountSmall + per-session
   note + Buchen-Button; CLICK/TAP (not hover — a hover-flip made the
   Buchen-Button on the front unreachable with a mouse, since the card
   rotated away before the pointer arrived) pins the description on the
   back. Clicking the button itself stops that click from bubbling into the
   flip (see js/main.js), so the button stays clickable regardless. */
.price-card{height:190px; perspective:1200px; cursor:pointer;}
.price-card-inner{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.15,.2,1);
}
.price-card.flipped .price-card-inner{transform:rotateY(180deg);}
.price-face{
  position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--paper); border:1px solid var(--line); border-left:2px solid var(--line);
  padding:22px 24px; transition:border-color .25s, box-shadow .25s;
}
.price-card:hover .price-face, .price-card.flipped .price-face{
  box-shadow:0 4px 16px rgba(43,33,23,0.06);
}
/* Themenfarben — dieselbe Zuordnung wie oben beim Flussdiagramm (siehe
   dortigen Kommentar und topicClassFor() in main.js/partnerschaft.js), damit
   z.B. "Zieldefinition" oben im Diagramm und hier bei den Preisen dieselbe
   Farbe trägt. Steht bewusst VOR .featured/.best/.active, damit diese
   Zustände die Themenfarbe bei Bedarf weiterhin überschreiben können. */
.price-card.topic-erstgespraech .price-face{border-left-color:var(--topic-erstgespraech); background:var(--topic-erstgespraech-bg);}
.price-card.topic-einzelsession .price-face{border-left-color:var(--topic-einzelsession); background:var(--topic-einzelsession-bg);}
.price-card.topic-zieldefinition .price-face{border-left-color:var(--topic-zieldefinition); background:var(--topic-zieldefinition-bg);}
.price-card.topic-serie .price-face{border-left-color:var(--topic-serie); background:var(--topic-serie-bg);}
.price-card.topic-erstgespraech .tag{color:var(--topic-erstgespraech);}
.price-card.topic-einzelsession .tag{color:var(--topic-einzelsession);}
.price-card.topic-zieldefinition .tag{color:var(--topic-zieldefinition);}
.price-card.topic-serie .tag{color:var(--topic-serie);}
/* .active markiert die gerade für die Buchung ausgewählte Karte — bewusst
   OHNE eigene Optik: die Karte soll genauso aussehen wie die anderen
   (nur der farbige linke Rand je Themenfarbe bleibt), kein zusätzlicher
   Rahmen-Ring. */
.price-front{display:flex; flex-direction:column; justify-content:flex-start; height:100%;}
.price-back{display:flex; flex-direction:column; justify-content:center; height:100%; transform:rotateY(180deg); overflow:auto;}
.price-card .tag{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage); font-weight:600;}
.price-card .amount{font-family:var(--font-heading); font-size:24px; margin-top:9px; color:var(--ink);}
.price-card .amount-extra{margin-top:3px; font-family:var(--font-body); font-size:12px; color:var(--ink-soft); min-height:1.6em;}
.price-card p{margin:0; color:var(--ink-soft); font-size:13px; line-height:1.55;}
.price-card .per-session{display:block; margin-top:8px; font-size:11.5px; color:var(--sage); font-weight:600;}
.price-card-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px;}
.price-card-hint{font-size:12px; color:var(--sage); font-weight:600; letter-spacing:0.02em;}
.price-card.featured .price-face{border-left-color:var(--terracotta); background:#FBF6EC;}
.price-card.featured .badge{position:absolute; top:-11px; right:20px; background:var(--terracotta); color:#fff; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; font-weight:600;}
.price-card.best .price-face{border-left-color:var(--gold); background:#FBF6EC;}
.price-card.best .badge{position:absolute; top:-11px; right:20px; background:var(--gold); color:#fff; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; font-weight:600;}
.price-card.best .per-session{color:var(--terracotta-dark);}
@media (prefers-reduced-motion: reduce){ .price-card-inner{transition:none;} }
.price-note-bar{margin-top:10px; display:flex; flex-wrap:wrap; gap:28px; padding:22px 28px; background:var(--bg-alt);}
.price-note-bar div{display:flex; align-items:baseline; gap:8px; font-size:14px; color:var(--ink-soft);}
.price-note-bar div::before{content:'—'; color:var(--terracotta);}

.booking{background:var(--bg-alt);}
.booking-frame{background:var(--bg-alt); height:800px; max-width:900px; margin:0 auto; overflow:hidden;}
.booking-frame iframe{width:100% !important; height:100% !important; border:0 !important;}
@media (max-width:600px){ .booking-frame{height:860px;} }
.how-it-works{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:900px; margin:40px auto 20px; padding:32px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
@media (max-width:760px){ .how-it-works{grid-template-columns:1fr; gap:26px;} }
.how-num{font-family:var(--font-heading); font-style:italic; font-size:26px; color:var(--terracotta);}
.how-title{margin-top:10px; font-family:var(--font-heading); font-size:17px;}
.how-desc{margin-top:8px; font-size:14px; color:var(--ink-soft); line-height:1.6;}
.booking-fallback{padding:70px 40px; text-align:center;}
.booking-fallback p{color:var(--ink-soft); font-size:15px; margin-bottom:22px;}

/* ---------- Impressum ---------- */
.legal-section .placeholder-note{
  margin-top:14px; font-size:13px; font-style:italic; color:var(--gold);
  display:inline-block; padding:6px 12px; background:rgba(169,130,47,0.1); border:1px dashed rgba(169,130,47,0.4);
}
.legal-section .legal-stand{margin-top:10px; font-size:13px; color:var(--ink-soft);}
.legal-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px 48px; margin-bottom:44px;}
@media (max-width:640px){ .legal-grid{grid-template-columns:1fr; gap:26px;} }
.legal-block h4{font-family:var(--font-body); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--terracotta-dark); font-weight:600; margin-bottom:10px;}
.legal-block p{font-size:15px; color:var(--ink-soft); line-height:1.75; margin:0;}
.legal-text{border-top:1px solid var(--line); padding-top:32px; max-width:70ch;}
.legal-text h4{font-family:var(--font-heading); font-size:17px; font-weight:500; margin:0 0 8px;}
.legal-text h4:not(:first-child){margin-top:24px;}
.legal-text p{font-size:14.5px; color:var(--ink-soft); line-height:1.75; margin:0;}

/* ---------- Fragebogen & Coaching-Vereinbarung (/fragebogen) ----------
   Eigene, schlichte Formular-Optik — bislang gab es auf der Website noch
   keine echten Eingabefelder ausserhalb des Admin-Panels. */
.intake-form{max-width:640px; margin-top:8px;}
.intake-subheading{
  font-family:var(--font-heading); font-size:22px; font-weight:500;
  margin:44px 0 18px; padding-top:28px; border-top:1px solid var(--line);
}
.intake-form > .intake-subheading:first-of-type{border-top:none; padding-top:0;}
.intake-field{margin-bottom:22px;}
/* Zwei kurze Felder nebeneinander (z.B. Name/E-Mail, Strasse/PLZ+Ort) statt
   je einer eigenen Zeile — nur für kurze Einzeiler gedacht, nicht für
   Textareas. Unter 640px wieder gestapelt (siehe Breakpoint-Konvention
   anderswo in dieser Datei). */
.intake-field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 20px;}
.intake-field-row .intake-field{margin-bottom:22px;}
@media (max-width:640px){ .intake-field-row{grid-template-columns:1fr;} }
.intake-field label{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.intake-field input[type="text"], .intake-field input[type="email"], .intake-field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); font-family:inherit; font-size:15px; border-radius:2px;
}
.intake-field textarea{resize:vertical; line-height:1.6;}
.intake-field input:focus, .intake-field textarea:focus{outline:2px solid var(--terracotta); outline-offset:1px;}
.intake-agreement-text{
  padding:22px 24px; background:var(--paper); border:1px solid var(--line);
  max-height:340px; overflow-y:auto; font-size:14.5px; color:var(--ink-soft); line-height:1.75;
}
.intake-checkbox{
  display:flex; align-items:flex-start; gap:10px; margin:26px 0; font-size:14px;
  color:var(--ink-soft); cursor:pointer; line-height:1.5;
}
.intake-checkbox input{margin-top:3px; width:16px; height:16px; flex-shrink:0;}
.intake-error{color:var(--terracotta-dark); font-size:14px; margin-bottom:18px;}
.intake-success p{font-family:var(--font-heading); font-size:24px; font-weight:500; color:var(--ink);}

/* ---------- Footer ---------- */
footer{background:var(--night); color:var(--night-ink); padding:70px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; padding-bottom:44px; border-bottom:1px solid rgba(239,227,208,0.14);}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr; gap:36px;} }
.footer-logo img{height:52px; width:auto; display:block;}
.footer-col p, .footer-col a{color:#CBBBA0; font-size:14.5px; line-height:1.9;}
.footer-col h4{font-family:var(--font-body); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:#D8A968; margin-bottom:16px; font-weight:600;}
.footer-col a{display:block; transition:color .2s;}
.footer-col a:hover{color:#F8EFDD;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:26px; font-size:12.5px; color:#8B7C63;}
.disclaimer{margin-top:0; font-size:12.5px; color:#8B7C63; max-width:640px; line-height:1.8;}

::selection{background:var(--terracotta); color:#fff;}