/* ==========================================================================
   components.css — Bausteine der Website
   Physiotherapie Hör, Weiherhammer

   Setzt den Klassen-Kontrakt aus SPEC-01 um:
     §4.3  Buttons & Links
     §4.4  Karten
     §4.9  Fließtext & Listen
     §4.11 Formulare
     §4.12 Spezialkomponenten (ohne Hero und Punktnavigation — Startseite)

   Tokens, Keyframes, Reset, Grundtypografie und Hilfsklassen stehen in
   base.css und werden hier ausschließlich benutzt, nie neu definiert.
   Ladereihenfolge: base.css → layout.css → components.css
   Kein !important. Keine festen Breiten. Touch-Ziele mindestens 44×44 px.
   ========================================================================== */


/* ==========================================================================
   0. GEMEINSAME GRUNDLAGEN DIESER DATEI
   ========================================================================== */

/* Die Icons aus icon() tragen fill="none" stroke="currentColor" als Attribut.
   Attribute unterliegen jeder CSS-Regel — die globale Regel svg{fill:currentColor}
   aus base.css würde sie deshalb flächig füllen. Diese Regel stellt die
   gezeichnete Linienoptik wieder her, ohne dekorative Flächen-SVGs zu stören. */
svg[stroke='currentColor']{
  fill:none;
}

/* Bauteil-eigene Drehung für den Absende-Spinner.
   Die Keyframes aus SPEC-01 §3 kennen keine Endlosdrehung; dieser Name ist
   bewusst bauteilgebunden und kollidiert nicht mit den verbindlichen Namen. */
@keyframes btnSpin{
  to{transform:rotate(360deg);}
}


/* ==========================================================================
   1. BUTTONS & LINKS (SPEC-01 §4.3)
   ========================================================================== */

/* ---- 1.1 Grundknopf ------------------------------------------------------
   inline-flex, damit Icon und Beschriftung sauber auf einer Mittellinie
   sitzen. min-height 48px erfüllt die Touch-Ziel-Vorgabe mit Reserve. */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:48px;
  padding:.95rem 1.7rem;
  border:1.5px solid transparent;
  border-radius:var(--r-pill);
  background-color:transparent;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:1.25;
  letter-spacing:.005em;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft),
    color var(--t-base) var(--ease-soft);
}

/* Lange Beschriftungen dürfen umbrechen, statt das Raster zu sprengen. */
@media (max-width:420px){
  .btn{
    white-space:normal;
    max-width:100%;
  }
}

.btn:active{
  transform:translateY(0) scale(.985);
}

.btn:disabled,
.btn[aria-disabled='true']{
  opacity:.5;
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
}

/* ---- 1.2 Primär: die Terrakotta-Fläche, weißer Text ---- */
.btn--primary{
  background-color:var(--clay-600);
  border-color:var(--clay-600);
  color:#fff;
  box-shadow:var(--sh-sm);
}

.btn--primary:hover,
.btn--primary:focus-visible{
  background-color:var(--clay-700);
  border-color:var(--clay-700);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:var(--sh-glow);
}

/* ---- 1.3 Geist: Rahmen statt Fläche ---- */
.btn--ghost{
  background-color:transparent;
  border-color:var(--line);
  color:var(--ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible{
  background-color:var(--clay-50);
  border-color:var(--clay-400);
  color:var(--clay-800);
  transform:translateY(-2px);
  box-shadow:var(--sh-sm);
}

/* ---- 1.4 Salbei: der ruhige Gegenpol ---- */
.btn--stone{
  background-color:var(--stone-700);
  border-color:var(--stone-700);
  color:#fff;
  box-shadow:var(--sh-sm);
}

.btn--stone:hover,
.btn--stone:focus-visible{
  background-color:var(--stone-800);
  border-color:var(--stone-800);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:var(--sh-md);
}

/* ---- 1.5 Hell: für den Einsatz auf Terrakotta- und Salbeiflächen ---- */
.btn--light{
  background-color:var(--paper);
  border-color:var(--paper);
  color:var(--clay-800);
  box-shadow:var(--sh-sm);
}

.btn--light:hover,
.btn--light:focus-visible{
  background-color:var(--clay-50);
  border-color:var(--clay-50);
  color:var(--clay-900);
  transform:translateY(-2px);
  box-shadow:var(--sh-md);
}

/* Auf farbigen Flächen braucht der Fokusring hellen Kontrast. */
.section--clay .btn--light:focus-visible,
.section--stone .btn--light:focus-visible,
.ctaBand .btn--light:focus-visible,
.quoteBand .btn--light:focus-visible{
  outline-color:var(--paper);
}

/* ---- 1.6 Größen ---- */
.btn--lg{
  min-height:56px;
  padding:1.15rem 2.2rem;
  font-size:var(--fs-base);
  gap:.7rem;
}

.btn--sm{
  min-height:44px;
  padding:.6rem 1.15rem;
  font-size:var(--fs-xs);
  gap:.45rem;
}

/* ---- 1.7 Reiner Icon-Knopf: quadratisch, volles Touch-Ziel ---- */
.btn--icon{
  width:48px;
  min-width:48px;
  padding:0;
  gap:0;
}

.btn--icon.btn--lg{
  width:56px;
  min-width:56px;
}

.btn--icon.btn--sm{
  width:44px;
  min-width:44px;
}

/* ---- 1.8 Icon im Knopf ---- */
.btn__icon{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:1.15em;
  height:1.15em;
  transition:transform var(--t-base) var(--ease-out);
}

.btn__icon > svg,
.btn > svg{
  width:100%;
  height:100%;
}

.btn > svg{
  flex:0 0 auto;
  width:1.15em;
  height:1.15em;
  transition:transform var(--t-base) var(--ease-out);
}

/* Nachgestellte Icons sind Pfeile: sie wandern nach rechts.
   Vorangestellte Icons treten nur einen Hauch nach außen. */
.btn:hover .btn__icon:last-child,
.btn:focus-visible .btn__icon:last-child,
.btn:hover > svg:last-child,
.btn:focus-visible > svg:last-child{
  transform:translateX(3px);
}

.btn:hover .btn__icon:first-child,
.btn:focus-visible .btn__icon:first-child,
.btn:hover > svg:first-child,
.btn:focus-visible > svg:first-child{
  transform:translateX(-2px);
}

/* Im reinen Icon-Knopf gibt es keine Richtung — dort wächst das Icon leicht. */
.btn--icon:hover .btn__icon,
.btn--icon:focus-visible .btn__icon,
.btn--icon:hover > svg,
.btn--icon:focus-visible > svg{
  transform:scale(1.08);
}

/* ---- 1.9 Herzschlag-Link: die Signatur der Seite ------------------------
   Die Unterstreichung läuft von links ein, gleichzeitig schlägt der Link
   einmal wie ein Puls. Tastaturfokus wird exakt wie Hover behandelt. */
.linkHeart{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:44px;
  padding-block:.6rem;
  color:var(--brand-ink);
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  font-weight:600;
  text-decoration:none;
  transition:color var(--t-base) var(--ease-soft);
}

.linkHeart::after{
  content:'';
  position:absolute;
  inset-inline:0;
  bottom:.42rem;
  height:1.5px;
  border-radius:var(--r-pill);
  background-color:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .42s var(--ease-out);
}

.linkHeart:hover,
.linkHeart:focus-visible{
  color:var(--clay-700);
  animation:heartbeat 1.1s var(--ease-soft);
}

.linkHeart:hover::after,
.linkHeart:focus-visible::after{
  transform:scaleX(1);
}

.linkHeart > svg{
  flex:0 0 auto;
  width:1.1em;
  height:1.1em;
}

/* Auf dunklen Flächen erbt der Link die helle Textfarbe. */
.section--stone .linkHeart,
.section--clay .linkHeart,
.quoteBand .linkHeart,
.ctaBand .linkHeart{
  color:var(--sand);
}

.section--stone .linkHeart:hover,
.section--stone .linkHeart:focus-visible,
.section--clay .linkHeart:hover,
.section--clay .linkHeart:focus-visible,
.quoteBand .linkHeart:hover,
.quoteBand .linkHeart:focus-visible,
.ctaBand .linkHeart:hover,
.ctaBand .linkHeart:focus-visible{
  color:#fff;
}

/* ---- 1.10 Pfeil-Link ---- */
.linkArrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  color:var(--brand-ink);
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  font-weight:600;
  text-decoration:none;
  transition:color var(--t-base) var(--ease-soft),gap var(--t-base) var(--ease-out);
}

.linkArrow > svg,
.linkArrow .btn__icon{
  flex:0 0 auto;
  width:1.15em;
  height:1.15em;
  transition:transform var(--t-base) var(--ease-out);
}

.linkArrow:hover,
.linkArrow:focus-visible{
  color:var(--clay-700);
}

.linkArrow:hover > svg,
.linkArrow:focus-visible > svg,
.linkArrow:hover .btn__icon,
.linkArrow:focus-visible .btn__icon{
  transform:translateX(4px);
}

/* ---- 1.11 Schmuckloser Link: nur Farbwechsel ---- */
.linkPlain{
  color:inherit;
  text-decoration:none;
  transition:color var(--t-base) var(--ease-soft);
}

.linkPlain:hover,
.linkPlain:focus-visible{
  color:var(--clay-700);
  text-decoration:none;
}


/* ==========================================================================
   2. KARTEN (SPEC-01 §4.4)
   ========================================================================== */

/* ---- 2.1 Grundkarte ------------------------------------------------------
   --cardPad hält den Innenabstand als Variable vor, damit ein Bild als
   erstes Kind bis an die Kartenkante laufen kann. */
.card{
  --cardPad:clamp(1.5rem,3vw,2.25rem);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--s3);
  padding:var(--cardPad);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background-color:var(--paper);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-soft),
    background-color var(--t-base) var(--ease-soft);
}

/* Anheben nur dort, wo es wirklich einen Zeiger gibt. */
@media (hover:hover){
  .card:hover{
    transform:translateY(-4px);
    box-shadow:var(--sh-lg);
    border-color:var(--line);
  }
}

/* Tastaturbedienung bekommt dieselbe Aufmerksamkeit wie die Maus. */
.card:focus-within{
  box-shadow:var(--sh-lg);
  border-color:var(--line);
}

.card > :last-child{
  margin-bottom:0;
}

/* ---- 2.2 Varianten ---- */
.card--flat{
  box-shadow:none;
  border-color:var(--line);
  background-color:transparent;
}

@media (hover:hover){
  .card--flat:hover{
    box-shadow:var(--sh-sm);
    background-color:var(--paper);
  }
}

.card--sand{
  background-color:var(--sand-2);
  border-color:var(--line-soft);
  box-shadow:none;
}

@media (hover:hover){
  .card--sand:hover{
    box-shadow:var(--sh-md);
    background-color:var(--sand-2);
  }
}

/* Salbeifläche: heller Text, Kontrast nach §1 gesichert. */
/* Heller Gegenpart zur Ziegelrot-Karte. Bewusst KEINE dunkle Flaeche:
   die Praxisgestaltung lebt von Weiss mit rotem Akzent, ein Raster aus
   halb schwarzen Karten waere ein Fremdkoerper. */
.card--stone{
  background-color:var(--sand-2);
  background-image:radial-gradient(120% 90% at 12% 0%,var(--paper),transparent 64%);
  border-color:var(--line-soft);
  color:var(--ink);
}

/* Terrakottafläche: ausschließlich weißer Text. */
.card--clay{
  background-color:var(--clay-700);
  background-image:radial-gradient(120% 90% at 12% 0%,var(--clay-600),transparent 62%);
  border-color:transparent;
  color:#fff;
}

.card--clay .card__title{
  color:#fff;
}

.card--stone .card__text,
.card--stone .card__meta{
  color:var(--ink-mute);
}

/* ---- Helle Variante: Textfarben, Links und Deko passend zum hellen Grund.
   .card--clay bleibt davon unberuehrt — dort steht weisser Text auf Ziegelrot. ---- */
.card--stone .card__title{
  color:var(--ink);
}

.card--stone:hover .card__title,
.card--stone:focus-within .card__title{
  color:var(--clay-800);
}

.card--stone a:not(.btn){
  color:var(--brand-ink);
  text-decoration-color:var(--clay-300);
}

.card--stone a:not(.btn):hover,
.card--stone a:not(.btn):focus-visible{
  color:var(--clay-800);
  text-decoration-color:var(--clay-600);
}

.card--stone:focus-within{
  border-color:var(--clay-300);
}

.card--stone :focus-visible{
  outline-color:var(--focus);
}

.card--stone .prose strong{
  color:var(--ink);
}

.card--stone .listCheck li > svg{
  color:var(--clay-600);
}

.card--stone .listDot li::before{
  background-color:var(--clay-400);
}

.card--stone .badge{
  background-color:var(--clay-50);
  border-color:var(--clay-200);
  color:var(--clay-800);
}

.card--stone .badge > svg{
  color:var(--clay-700);
}

.statCard.card--stone .statCard__num{
  color:var(--clay-700);
}

.serviceCard.card--stone:hover .serviceCard__no{
  color:var(--clay-300);
}

.card--clay .card__text,
.card--clay .card__meta{
  color:var(--clay-100);
}

.card--clay a:not(.btn){
  color:#fff;
  text-decoration-color:rgba(255,255,255,.45);
}

.card--clay a:not(.btn):hover,
.card--clay a:not(.btn):focus-visible{
  color:#fff;
  text-decoration-color:#fff;
}

.card--clay:focus-within{
  border-color:transparent;
}

.card--clay :focus-visible{
  outline-color:var(--paper);
}

/* Organische Karte: der Rand wandert langsam zwischen den drei Blobformen. */
.card--blob{
  border-radius:var(--blob-a);
  animation:blobMorph 18s linear infinite alternate;
}

/* ---- 2.3 Bildfläche ------------------------------------------------------
   --ar setzt das Seitenverhältnis (Vorgabe 4/3). Steht das Bild als erstes
   Kind, läuft es randlos bis an die Kartenkante. */
.card__media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-md);
  aspect-ratio:var(--ar,4 / 3);
  background-color:var(--sand-3);
}

.card > .card__media:first-child{
  margin:calc(-1 * var(--cardPad)) calc(-1 * var(--cardPad)) var(--s2);
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}

.card--blob > .card__media:first-child{
  border-radius:0;
}

.card__media img,
.card__media picture,
.card__media video{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}

@media (hover:hover){
  .card:hover .card__media img,
  .card:hover .card__media picture img{
    transform:scale(1.05);
  }
}

.card:focus-within .card__media img{
  transform:scale(1.05);
}

/* Sanfter Schleier am unteren Bildrand — hält Text darüber lesbar. */
.card__media::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  pointer-events:none;
  background-image:linear-gradient(to top,rgba(61,23,16,.16),transparent);
  opacity:0;
  transition:opacity var(--t-base) var(--ease-soft);
}

@media (hover:hover){
  .card:hover .card__media::after{
    opacity:1;
  }
}

/* ---- 2.4 Icon-Kreis ---- */
.card__icon{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background-color:var(--clay-50);
  color:var(--clay-700);
  transition:
    background-color var(--t-base) var(--ease-soft),
    color var(--t-base) var(--ease-soft),
    transform var(--t-base) var(--ease-back);
}

.card__icon > svg{
  width:26px;
  height:26px;
}

@media (hover:hover){
  .card:hover .card__icon{
    background-color:var(--clay-100);
    transform:scale(1.06) rotate(-3deg);
  }
}

.card:focus-within .card__icon{
  background-color:var(--clay-100);
}

/* Auf Farbflächen hellt der Kreis auf, statt zu verschwinden. */
.card--stone .card__icon{
  background-color:var(--clay-50);
  color:var(--clay-700);
}
.card--stone:hover .card__icon{
  background-color:var(--clay-100);
}

.card--clay .card__icon{
  background-color:rgba(255,255,255,.16);
  color:#fff;
}

@media (hover:hover){
  .card--clay:hover .card__icon{
    background-color:rgba(255,255,255,.24);
  }
}

/* ---- 2.5 Textbausteine der Karte ---- */
.card__title{
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
  text-wrap:balance;
  margin:0;
}

.card__title a{
  color:inherit;
  text-decoration:none;
  transition:color var(--t-base) var(--ease-soft);
}

@media (hover:hover){
  .card:hover .card__title{
    color:var(--clay-800);
  }
}

.card:focus-within .card__title{
  color:var(--clay-800);
}

.card--clay:hover .card__title,
.card--clay:focus-within .card__title{
  color:#fff;
}

.card__text{
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
  max-width:52ch;
  margin:0;
}

/* Meta-Zeilen bleiben in --ink-soft: --ink-mute ist laut §1 erst ab 16px
   zulässig, die Meta-Zeile ist kleiner. */
.card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem .75rem;
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}

.card__meta > svg{
  width:1.05em;
  height:1.05em;
  color:var(--clay-600);
}

.card__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3);
  margin-top:auto;
  padding-top:var(--s2);
}

/* ---- 2.6 Ganze Karte klickbar -------------------------------------------
   Die Karte enthält genau einen echten Link; dessen ::after legt sich als
   unsichtbare Fläche über die gesamte Karte. */
.card--link{
  position:relative;
}

.card--link a::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
}

@supports selector(:has(*)){
  /* Der Fokusring gehört um die ganze Karte, nicht nur um den Linktext. */
  .card--link:has(a:focus-visible){
    outline:2.5px solid var(--focus);
    outline-offset:3px;
  }

  .card--link a:focus-visible{
    outline:none;
  }
}

@media (hover:hover){
  .card--link{
    cursor:pointer;
  }
}

/* ---- 2.7 Leistungskarte ---- */
.serviceCard{
  padding-inline-end:clamp(3.25rem,7vw,4.5rem);
}

.serviceCard__no{
  position:absolute;
  top:clamp(1rem,2.2vw,1.5rem);
  inset-inline-end:clamp(1.15rem,2.5vw,1.75rem);
  z-index:1;
  font-family:var(--font-display);
  font-size:clamp(2.1rem,4.5vw,3rem);
  font-weight:600;
  line-height:1;
  letter-spacing:var(--ls-tight);
  color:var(--clay-200);
  pointer-events:none;
  user-select:none;
  transition:color var(--t-base) var(--ease-soft),transform var(--t-base) var(--ease-out);
}

@media (hover:hover){
  .serviceCard:hover .serviceCard__no{
    color:var(--clay-300);
    transform:translateY(-2px);
  }
}

.serviceCard.card--stone .serviceCard__no{
  color:var(--clay-200);
}

.serviceCard.card--clay:hover .serviceCard__no{
  color:rgba(255,255,255,.4);
}

.serviceCard.card--clay .serviceCard__no{
  color:rgba(255,255,255,.28);
}

.serviceCard .card__foot{
  padding-top:var(--s3);
}

/* ---- 2.8 Preiskarte ---- */
.priceCard{
  gap:var(--s2);
}

.priceCard .card__meta{
  text-transform:none;
  letter-spacing:0;
  font-size:var(--fs-sm);
}

/* Der Preis steht als <strong> in der Karte. */
.priceCard strong{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:1.1;
  color:var(--clay-700);
  font-variant-numeric:lining-nums tabular-nums;
}

.priceCard--feature{
  border:2px solid var(--clay-500);
  box-shadow:var(--sh-md);
  background-color:var(--clay-50);
}

/* Das Abzeichen sitzt oben auf dem Rand und darf nicht beschnitten werden. */
.priceCard--feature{
  overflow:visible;
}

@supports selector(:has(*)){
  .priceCard--feature:has(> .badge:first-child){
    padding-top:calc(var(--cardPad) + .85rem);
  }
}

.priceCard--feature > .badge:first-child{
  position:absolute;
  top:-.9rem;
  inset-inline-start:50%;
  transform:translateX(-50%);
  background-color:var(--clay-600);
  border-color:var(--clay-600);
  color:#fff;
  box-shadow:var(--sh-sm);
  white-space:nowrap;
}

.priceCard--feature > .badge:first-child > svg{
  color:#fff;
}

/* ---- 2.9 Zahlenkarte ---- */
.statCard{
  align-items:center;
  gap:var(--s2);
  text-align:center;
}

.statCard__num{
  display:block;
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  font-weight:600;
  line-height:1;
  letter-spacing:var(--ls-tight);
  color:var(--clay-700);
  font-variant-numeric:lining-nums tabular-nums;
}

.statCard .card__text,
.statCard .card__title{
  max-width:26ch;
  text-align:center;
}

.statCard .card__title{
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
}

.statCard.card--clay .statCard__num{
  color:#fff;
}


/* ==========================================================================
   3. FLIESSTEXT & LISTEN (SPEC-01 §4.9)
   Die Grundtypografie steht in base.css; hier kommt nur dazu, was der
   Fließtextcontainer zusätzlich braucht.
   ========================================================================== */

/* ---- 3.1 Fließtextcontainer ---- */
.prose{
  max-width:68ch;
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

.prose > :first-child{
  margin-top:0;
}

.prose > :last-child{
  margin-bottom:0;
}

.prose p{
  margin-bottom:var(--s4);
  max-width:66ch;
}

/* Doppelter Abstand bei aufeinanderfolgenden Absätzen ist unnötig. */
.prose p + p{
  margin-top:0;
}

.prose strong{
  color:var(--ink);
  font-weight:600;
}

/* ---- 3.2 Links im Fließtext: Herzschlag als globale Regel ---- */
.prose a{
  color:var(--brand-ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--clay-300);
  text-underline-offset:.18em;
  transition:
    color var(--t-base) var(--ease-soft),
    text-decoration-color var(--t-base) var(--ease-soft);
}

.prose a:hover,
.prose a:focus-visible{
  color:var(--clay-700);
  text-decoration-color:var(--clay-600);
  animation:heartbeat 1.1s var(--ease-soft);
}

/* ---- 3.3 Zwischenüberschriften ---- */
.prose h2{
  margin-top:var(--s7);
  margin-bottom:var(--s3);
  font-size:var(--fs-h3);
  color:var(--ink);
}

.prose h3{
  margin-top:var(--s6);
  margin-bottom:var(--s3);
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:600;
  color:var(--ink);
}

.prose h4{
  margin-top:var(--s5);
  margin-bottom:var(--s2);
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  font-weight:600;
  color:var(--ink);
}

/* ---- 3.4 Listen im Fließtext ---- */
.prose ul,
.prose ol{
  margin-bottom:var(--s4);
  max-width:66ch;
}

.prose li{
  color:var(--ink-soft);
}

/* ---- 3.5 Zitat, Trenner, Bilder, Definitionslisten ---- */
.prose blockquote{
  margin-block:var(--s5);
}

.prose figure{
  margin-block:var(--s5);
}

.prose figcaption{
  margin-top:var(--s2);
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}

.prose img{
  border-radius:var(--r-md);
}

.prose dl{
  margin-bottom:var(--s4);
}

.prose dd{
  margin-inline-start:0;
  color:var(--ink-soft);
}

.prose table{
  margin-bottom:var(--s5);
  font-size:var(--fs-sm);
}

.prose th,
.prose td{
  padding:.7rem .9rem;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}

/* Auf Farbflächen erbt der Fließtext die helle Schrift. */
.section--stone .prose,
.section--clay .prose,
.card--stone .prose,
.card--clay .prose{
  color:inherit;
}

.section--stone .prose strong,
.section--clay .prose strong,
.card--clay .prose strong{
  color:#fff;
}

/* ---- 3.6 Häkchenliste -----------------------------------------------------
   Steht im Markup ein icon('check'), wird es benutzt; fehlt es, zeichnet
   die Regel das Häkchen selbst als Maske (Farbe bleibt dadurch steuerbar). */
.listCheck{
  list-style:none;
  margin:0;
  padding:0;
  max-width:66ch;
  display:grid;
  gap:var(--s3);
}

.listCheck li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  margin:0;
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

.listCheck li > svg{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-top:.26em;
  color:var(--stone-600);
}

.listCheck li:not(:has(> svg))::before{
  content:'';
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-top:.26em;
  background-color:var(--stone-600);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.8 9.4 17.6 19.4 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.8 9.4 17.6 19.4 6.8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Rückfall für Browser ohne :has() — dort steht der Punkt statt des Häkchens. */
@supports not selector(:has(*)){
  .listCheck li::before{
    content:'';
    flex:0 0 auto;
    width:8px;
    height:8px;
    margin-top:.62em;
    border-radius:50%;
    background-color:var(--stone-600);
  }
}

.card--stone .listCheck li,
.card--clay .listCheck li,
.section--stone .listCheck li,
.section--clay .listCheck li{
  color:inherit;
}

.section--stone .listCheck li > svg{
  color:var(--stone-200);
}

.card--clay .listCheck li > svg,
.section--clay .listCheck li > svg{
  color:var(--clay-200);
}

/* ---- 3.7 Punktliste ---- */
.listDot{
  list-style:none;
  margin:0;
  padding:0;
  max-width:66ch;
  display:grid;
  gap:var(--s2);
}

.listDot li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  margin:0;
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

.listDot li::before{
  content:'';
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin-top:.66em;
  border-radius:50%;
  background-color:var(--clay-500);
}

.section--stone .listDot li::before{
  background-color:var(--stone-300);
}

.card--clay .listDot li::before,
.section--clay .listDot li::before{
  background-color:var(--clay-200);
}

/* ---- 3.8 Chips ---- */
.tagRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s2);
  list-style:none;
  margin:0;
  padding:0;
  max-width:none;
}

.tagRow > li{
  margin:0;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .85rem;
  border:1px solid var(--line-soft);
  border-radius:var(--r-pill);
  background-color:var(--sand-2);
  font-size:var(--fs-xs);
  font-weight:500;
  line-height:1.3;
  color:var(--ink-soft);
  text-decoration:none;
}

.tag > svg{
  flex:0 0 auto;
  width:1.05em;
  height:1.05em;
  color:var(--clay-600);
}

.tag--clay{
  background-color:var(--clay-50);
  border-color:var(--clay-200);
  color:var(--clay-800);
}

.tag--clay > svg{
  color:var(--clay-700);
}

.tag--stone{
  background-color:var(--stone-50);
  border-color:var(--stone-200);
  color:var(--stone-800);
}

.tag--stone > svg{
  color:var(--stone-700);
}

/* Anklickbare Chips (z. B. das Inhaltsverzeichnis der Rechtstexte)
   brauchen das volle Touch-Ziel. */
a.tag,
.tag a{
  min-height:44px;
  padding-block:.6rem;
  transition:
    background-color var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft),
    color var(--t-base) var(--ease-soft),
    transform var(--t-base) var(--ease-out);
}

a.tag:hover,
a.tag:focus-visible{
  background-color:var(--clay-50);
  border-color:var(--clay-300);
  color:var(--clay-800);
  transform:translateY(-1px);
}

/* ---- 3.9 Hinweisblöcke ---- */
.note{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-inline-start:3px solid var(--honey);
  border-radius:var(--r-sm);
  background-color:var(--sand-2);
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
  max-width:72ch;
}

.note > svg{
  flex:0 0 auto;
  width:22px;
  height:22px;
  margin-top:.1em;
  color:var(--honey);
}

.note p{
  max-width:none;
  font-size:inherit;
}

.note p + p{
  margin-top:var(--s3);
}

.note strong{
  color:var(--ink);
}

.note--warn{
  border-inline-start-color:var(--warn);
  background-color:var(--warn-bg);
}

.note--warn > svg{
  color:var(--warn);
}

.note--info{
  border-inline-start-color:var(--stone-500);
  background-color:var(--stone-50);
}

.note--info > svg{
  color:var(--stone-600);
}


/* ==========================================================================
   4. FORMULARE (SPEC-01 §4.11)
   ========================================================================== */

/* ---- 4.1 Gerüst ---- */
.form{
  display:grid;
  gap:var(--s4);
  max-width:none;
}

.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4);
}

@media (max-width:639.98px){
  .form__row{
    grid-template-columns:1fr;
  }
}

/* ---- 4.2 Feld ---- */
.field{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.field__label{
  display:block;
  margin-bottom:.4rem;
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  line-height:1.4;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* Pflichtfelder werden im Label mit einem Stern markiert (Markup: <abbr>). */
.field__label abbr{
  text-decoration:none;
  color:var(--clay-600);
  cursor:default;
}

.field__input,
.field__textarea,
.field__select{
  width:100%;
  min-height:48px;
  padding:.95rem 1.1rem;
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-snug);
  appearance:none;
  -webkit-appearance:none;
  transition:
    border-color var(--t-base) var(--ease-soft),
    box-shadow var(--t-base) var(--ease-soft),
    background-color var(--t-base) var(--ease-soft);
}

.field__textarea{
  min-height:9.5rem;
  line-height:var(--lh-normal);
  resize:vertical;
}

/* Eigener Pfeil für das Auswahlfeld — kein Systemdreieck, keine Fremddatei. */
.field__select{
  padding-inline-end:2.9rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23943D28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.05rem center;
  background-size:18px 18px;
  cursor:pointer;
}

.field__input::placeholder,
.field__textarea::placeholder{
  color:var(--ink-mute);
  opacity:1;
}

.field__input:hover,
.field__textarea:hover,
.field__select:hover{
  border-color:var(--clay-300);
}

.field__input:focus-visible,
.field__textarea:focus-visible,
.field__select:focus-visible{
  outline:none;
  border-color:var(--clay-500);
  box-shadow:0 0 0 4px var(--clay-100);
}

/* Ältere Browser ohne :focus-visible an Formularfeldern nicht leer ausgehen lassen. */
.field__input:focus,
.field__textarea:focus,
.field__select:focus{
  border-color:var(--clay-500);
}

.field__input:disabled,
.field__textarea:disabled,
.field__select:disabled{
  background-color:var(--sand-2);
  color:var(--ink-soft);
  cursor:not-allowed;
}

/* Fehlerzustand: Rahmen, Fläche und Vorlesesignal (aria-invalid) im Gleichklang. */
.field--error .field__input,
.field--error .field__textarea,
.field--error .field__select,
.field__input[aria-invalid='true'],
.field__textarea[aria-invalid='true'],
.field__select[aria-invalid='true']{
  border-color:var(--err);
  background-color:var(--err-bg);
}

.field--error .field__input:focus-visible,
.field--error .field__textarea:focus-visible,
.field--error .field__select:focus-visible{
  box-shadow:0 0 0 4px rgba(168,56,42,.16);
}

/* Hinweis in --fs-xs: dort ist --ink-mute laut §1 nicht zulässig (erst ab 16px). */
.field__hint{
  margin-top:.4rem;
  font-size:var(--fs-xs);
  line-height:1.45;
  color:var(--ink-soft);
}

.field__error{
  display:flex;
  align-items:flex-start;
  gap:.4rem;
  margin-top:.4rem;
  font-size:var(--fs-xs);
  font-weight:500;
  line-height:1.45;
  color:var(--err);
}

.field__error:empty{
  display:none;
}

.field__error > svg{
  flex:0 0 auto;
  width:1.05em;
  height:1.05em;
  margin-top:.12em;
}

/* Zeichenzähler: unten rechts unter dem Textfeld, tabellarische Ziffern. */
.field__counter{
  align-self:flex-end;
  margin-top:.35rem;
  font-size:var(--fs-2xs);
  font-weight:500;
  letter-spacing:var(--ls-wide);
  color:var(--ink-soft);
  font-variant-numeric:lining-nums tabular-nums;
}

/* ---- 4.3 Auswahl als Chip-Schalter --------------------------------------
   Der Eingabeknopf bleibt im Dokument (fokussierbar), nur unsichtbar. */
.choiceRow{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
}

.choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:44px;
  padding:.6rem 1.15rem;
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  background-color:var(--paper);
  font-size:var(--fs-sm);
  font-weight:500;
  line-height:1.3;
  color:var(--ink-soft);
  cursor:pointer;
  user-select:none;
  transition:
    background-color var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft),
    color var(--t-base) var(--ease-soft),
    transform var(--t-base) var(--ease-out);
}

.choice input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

/* Der Punkt links im Chip füllt sich beim Auswählen. */
.choice::before{
  content:'';
  flex:0 0 auto;
  width:15px;
  height:15px;
  border:1.5px solid var(--line);
  border-radius:50%;
  background-color:transparent;
  transition:
    border-color var(--t-base) var(--ease-soft),
    box-shadow var(--t-base) var(--ease-soft);
}

.choice:hover{
  border-color:var(--clay-300);
  background-color:var(--clay-50);
}

.choice:has(:checked){
  background-color:var(--clay-50);
  border-color:var(--clay-500);
  color:var(--clay-800);
}

.choice:has(:checked)::before{
  border-color:var(--clay-600);
  box-shadow:inset 0 0 0 3.5px var(--clay-600);
}

.choice:has(:focus-visible){
  outline:2.5px solid var(--focus);
  outline-offset:3px;
}

.choice:has(:disabled){
  opacity:.5;
  cursor:not-allowed;
}

/* Rückfall ohne :has() — der Chip bleibt bedienbar, nur ohne Füllung. */
@supports not selector(:has(*)){
  .choice input{
    opacity:0;
  }

  .choice input:checked{
    outline:none;
  }
}

/* ---- 4.4 Einwilligung ---- */
.consent{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  min-height:44px;
  padding-block:.35rem;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
  cursor:pointer;
  max-width:70ch;
}

.consent input{
  flex:0 0 auto;
  width:1.35rem;
  height:1.35rem;
  margin-top:.2rem;
  accent-color:var(--clay-600);
  cursor:pointer;
}

.consent a{
  color:var(--brand-ink);
  text-decoration-color:var(--clay-300);
}

.consent a:hover,
.consent a:focus-visible{
  text-decoration-color:var(--clay-600);
}

.field--error .consent,
.consent[aria-invalid='true']{
  color:var(--err);
}

/* ---- 4.5 Honigtopf --------------------------------------------------------
   Bewusst nicht display:none — automatisierte Ausfüller erkennen das. */
.honeypot{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* ---- 4.6 Ausfüllfortschritt ---- */
.formProgress{
  position:relative;
  width:100%;
  height:5px;
  border-radius:var(--r-pill);
  background-color:var(--line-soft);
  overflow:hidden;
}

.formProgress__fill{
  display:block;
  width:var(--fill,0%);
  height:100%;
  border-radius:inherit;
  background-image:linear-gradient(90deg,var(--clay-400),var(--clay-600));
  transition:width .4s var(--ease-out);
}

/* ---- 4.7 Rückmeldung nach dem Absenden ---- */
.formStatus{
  padding:var(--s4) var(--s5);
  border-inline-start:3px solid var(--line);
  border-radius:var(--r-sm);
  background-color:var(--sand-2);
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
  scroll-margin-top:calc(clamp(68px,8vw,88px) + var(--s5));
}

.formStatus:empty{
  display:none;
}

.formStatus--ok{
  border-inline-start-color:var(--ok);
  background-color:var(--ok-bg);
  color:var(--stone-900);
}

.formStatus--err{
  border-inline-start-color:var(--err);
  background-color:var(--err-bg);
  color:var(--clay-900);
}

.formStatus strong{
  color:inherit;
}

/* ---- 4.8 Absendeknopf mit Spinner ---------------------------------------
   Im Ladezustand verschwindet die Beschriftung, der Ring dreht sich an
   ihrer Stelle; die Breite des Knopfes bleibt erhalten. */
.btn--submit{
  justify-self:start;
  min-width:min(100%,14rem);
}

.btn--submit.is-busy{
  color:transparent;
  pointer-events:none;
  transform:none;
}

.btn--submit.is-busy > *{
  opacity:0;
}

.btn--submit.is-busy::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:1.25em;
  height:1.25em;
  margin:-.625em 0 0 -.625em;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:btnSpin .7s linear infinite;
}

/* Auf hellen Knopfvarianten braucht der Spinner dunkle Farbe. */
.btn--ghost.is-busy::after,
.btn--light.is-busy::after{
  border-color:var(--clay-200);
  border-top-color:var(--clay-700);
}

/* Fieldset-Gruppen im Formular ohne Rahmen, aber mit klarer Beschriftung. */
.form fieldset{
  display:grid;
  gap:var(--s3);
}

.form legend{
  margin-bottom:.4rem;
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
}


/* ==========================================================================
   5. SPEZIALKOMPONENTEN (SPEC-01 §4.12)
   Hero, Hero-Karten, Scrollhinweis und Punktnavigation gehören zur
   Startseite und stehen in assets/css/pages/home.css.
   ========================================================================== */

/* ---- 5.1 Ablauf in vier Schritten ---------------------------------------
   Der geschwungene Pfad zeichnet sich beim Scrollen: main.js setzt --dash
   auf die gemessene Pfadlänge und vergibt die Klasse is-drawn. */
.stepper{
  position:relative;
  display:grid;
  gap:clamp(1.75rem,4vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}

.stepper__track{
  position:absolute;
  inset-inline:6%;
  top:2.6rem;
  z-index:0;
  width:88%;
  height:5rem;
  display:none;
  pointer-events:none;
  overflow:visible;
}

/* Der Pfad verbindet die Schritte erst, wenn sie nebeneinander stehen. */
@media (min-width:900px){
  .stepper__track{
    display:block;
  }
}

.stepper__track path{
  fill:none;
  stroke:var(--clay-300);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:var(--dash,1000);
  stroke-dashoffset:var(--dash,1000);
}

.stepper__track.is-drawn path,
.stepper__track path.is-drawn{
  stroke-dashoffset:0;
  animation:drawLine 1.6s var(--ease-out) forwards;
}

.stepper__step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:var(--s2);
}

.stepper__num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5vw,3.4rem);
  font-weight:600;
  line-height:1;
  letter-spacing:var(--ls-tight);
  color:var(--clay-300);
  font-variant-numeric:lining-nums;
}

.stepper__step h3{
  font-size:var(--fs-h4);
  margin:0;
}

.stepper__step p{
  margin:0;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
  max-width:34ch;
}

/* ---- 5.2 Werdegang als Zeitstrahl ---------------------------------------
   --tlRail ist der Einzug, --tlAxis die Mitte der Achse; der Punkt wird
   daraus berechnet, damit beides auf jeder Breite deckungsgleich bleibt. */
.timeline{
  --tlRail:clamp(2rem,5vw,3rem);
  --tlAxis:7px;
  --tlDot:12px;
  position:relative;
  display:grid;
  gap:clamp(1.75rem,4vw,2.75rem);
  margin:0;
  padding:0;
  padding-inline-start:var(--tlRail);
  list-style:none;
  max-width:none;
}

.timeline__line{
  position:absolute;
  inset-block:.5rem;
  inset-inline-start:calc(var(--tlAxis) - .75px);
  width:1.5px;
  border-radius:var(--r-pill);
  background-color:var(--line);
  pointer-events:none;
}

/* main.js setzt --fill (0–100 %) nach Scrollfortschritt. */
.timeline__line::after{
  content:'';
  position:absolute;
  inset-inline:0;
  top:0;
  height:var(--fill,0%);
  border-radius:inherit;
  background-image:linear-gradient(180deg,var(--clay-400),var(--clay-600));
  transition:height .25s linear;
}

.timeline__item{
  position:relative;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.timeline__dot{
  position:absolute;
  top:.45em;
  inset-inline-start:calc(var(--tlAxis) - var(--tlRail) - var(--tlDot) / 2);
  width:var(--tlDot);
  height:var(--tlDot);
  border:2px solid var(--clay-400);
  border-radius:50%;
  background-color:var(--paper);
  transition:
    background-color var(--t-base) var(--ease-soft),
    border-color var(--t-base) var(--ease-soft);
}

.timeline__item.is-in .timeline__dot{
  background-color:var(--clay-600);
  border-color:var(--clay-600);
  animation:scaleIn .5s var(--ease-back);
}

.timeline__year{
  display:block;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:600;
  line-height:1.2;
  color:var(--clay-700);
  font-variant-numeric:lining-nums;
}

.timeline__item h3,
.timeline__item h4{
  margin:0;
  font-size:var(--fs-h4);
}

.timeline__item p{
  margin:0;
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}

/* ---- 5.3 Zitatband ---- */
/* Zitatband. Hell gehalten, damit die Seite dem weissen Auftritt der Praxis
   treu bleibt; die Wirkung kommt aus Typografie und dem roten Anfuehrungszeichen. */
.quoteBand{
  position:relative;
  overflow:hidden;
  background-color:var(--sand-3);
  background-image:radial-gradient(90% 120% at 82% 8%,var(--clay-50),transparent 62%);
  color:var(--ink);
}

.quoteBand blockquote{
  position:relative;
  z-index:1;
  margin:0;
  padding:0;
  border:0;
  max-width:30ch;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.6rem,1rem + 2.4vw,2.7rem);
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
  text-wrap:balance;
}

.quoteBand blockquote p{
  max-width:none;
  margin:0;
  color:inherit;
  font-size:inherit;
  line-height:inherit;
}

..quoteBand cite{
  display:block;
  margin-top:var(--s5);
  font-family:var(--font-sans);
  font-style:normal;
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
}
/* Das große Anführungszeichen ist reines Dekor (aria-hidden im Markup). */
.quoteBand__mark{
  position:absolute;
  z-index:0;
  top:-.22em;
  inset-inline-start:-.07em;
  font-family:var(--font-display);
  font-size:clamp(11rem,26vw,22rem);
  font-weight:600;
  line-height:.8;
  color:var(--clay-200);
  opacity:.45;
  pointer-events:none;
  user-select:none;
}

/* ---- 5.4 Abschlussband ---- */
.ctaBand{
  position:relative;
  overflow:hidden;
  background-color:var(--clay-700);
  background-image:
    radial-gradient(80% 120% at 14% 0%,var(--clay-600),transparent 58%),
    radial-gradient(60% 100% at 92% 100%,var(--clay-800),transparent 62%);
  color:#fff;
  isolation:isolate;
}

.ctaBand > .wrap{
  position:relative;
  z-index:1;
}

/* Steht das Band am Seitenende, dunkelt es nach unten ab und laeuft so weich
   in die Welle des Fussbereichs (layout.css) statt hart an ihr zu enden. */
main > .ctaBand:last-child::before,
main > :last-child > .ctaBand:last-child::before{
  content:'';
  position:absolute;
  inset:auto 0 0;
  z-index:-1;
  height:min(70%,24rem);
  background-image:linear-gradient(180deg,rgba(54,15,7,0),rgba(54,15,7,.55));
  pointer-events:none;
}

.ctaBand h2,
.ctaBand h3{
  color:#fff;
  margin:0;
}

.ctaBand em.accent{
  color:var(--clay-200);
}

.ctaBand p{
  color:var(--clay-100);
  max-width:56ch;
}

.ctaBand .lead{
  color:var(--clay-100);
}

.ctaBand .eyebrow{
  color:var(--clay-200);
}

.ctaBand .eyebrow::before{
  background-color:var(--clay-300);
}

.ctaBand .cluster{
  gap:var(--s4);
}

.ctaBand a:not(.btn){
  color:#fff;
  text-decoration-color:rgba(255,255,255,.5);
}

.ctaBand a:not(.btn):hover,
.ctaBand a:not(.btn):focus-visible{
  color:#fff;
  text-decoration-color:#fff;
}

.ctaBand :focus-visible{
  outline-color:var(--paper);
}

/* ---- 5.5 Fragen und Antworten -------------------------------------------
   Die Höhe wird über grid-template-rows 0fr → 1fr animiert.
   .faq__a enthält genau ein Kindelement als Hülle für den Text. */
.faq{
  display:grid;
  gap:var(--s3);
  margin:0;
  padding:0;
  max-width:none;
  list-style:none;
}

.faq__item{
  margin:0;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background-color:var(--paper);
  box-shadow:var(--sh-xs);
  overflow:hidden;
  transition:
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-soft);
}

.faq__item.is-open{
  border-color:var(--line);
  box-shadow:var(--sh-md);
}

.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  width:100%;
  min-height:56px;
  padding:clamp(1rem,2.2vw,1.35rem) clamp(1.15rem,2.5vw,1.6rem);
  border:0;
  background-color:transparent;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  font-weight:600;
  line-height:var(--lh-snug);
  color:var(--ink);
  text-align:start;
  cursor:pointer;
  transition:color var(--t-base) var(--ease-soft),background-color var(--t-base) var(--ease-soft);
}

.faq__q:hover,
.faq__q:focus-visible{
  color:var(--clay-800);
  background-color:var(--clay-50);
}

.faq__q > svg{
  flex:0 0 auto;
  width:22px;
  height:22px;
  color:var(--clay-600);
  transition:transform var(--t-base) var(--ease-out);
}

.faq__q[aria-expanded='true'] > svg,
.faq__item.is-open .faq__q > svg{
  transform:rotate(180deg);
}

.faq__a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease-out);
}

/* Das Kind trägt den Innenabstand und wird im geschlossenen Zustand
   sauber auf Höhe 0 beschnitten. */
.faq__a > *{
  min-height:0;
  overflow:hidden;
  padding-inline:clamp(1.15rem,2.5vw,1.6rem);
  padding-bottom:clamp(1.15rem,2.5vw,1.5rem);
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
  transition:padding-bottom .45s var(--ease-out);
}

/* Der Mindestbeitrag der Rasterzeile enthält den Innenabstand des Kindes:
   Bei 0fr bliebe die Zeile so hoch wie padding-bottom und ließe die erste
   Textzeile durchscheinen. Solange die Antwort zu ist, fällt er darum weg —
   weich überblendet, damit nichts springt. Ohne Skript bleibt er stehen. */
html.js .faq__item:not(.is-open) .faq__a > *{
  padding-bottom:0;
}

.faq__item.is-open .faq__a,
.faq__q[aria-expanded='true'] + .faq__a{
  grid-template-rows:1fr;
}

/* Ohne JavaScript oder bei gesetztem hidden-Attribut bleibt der Reset gültig. */
.faq__a[hidden]{
  display:none;
}

/* ---- 5.7 Qualifikations-Abzeichen ---- */
.badgeRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s2);
  margin:0;
  padding:0;
  list-style:none;
  max-width:none;
}

.badgeRow > li{
  margin:0;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .9rem;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background-color:var(--sand-2);
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  text-decoration:none;
}

.badge > svg{
  flex:0 0 auto;
  width:1.1em;
  height:1.1em;
  color:var(--clay-600);
}

.section--stone .badge,
.section--clay .badge,
.card--clay .badge{
  background-color:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
  color:#fff;
}

.section--stone .badge > svg,
.section--clay .badge > svg,
.card--clay .badge > svg{
  color:#fff;
}

/* ---- 5.8 Lageskizze ------------------------------------------------------
   Eigene SVG-Zeichnung, keine Fremdkarte, kein Kachel-Dienst. */
.mapSketch{
  position:relative;
  display:block;
  margin:0;
  padding:clamp(1rem,3vw,2rem);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background-color:var(--sand-2);
  box-shadow:var(--sh-xs);
  overflow:hidden;
}

.mapSketch svg{
  display:block;
  width:100%;
  height:auto;
}

.mapSketch text{
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  fill:var(--ink-soft);
}

.mapSketch figcaption{
  margin-top:var(--s3);
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--ink-soft);
}

.mapSketch .badge{
  background-color:var(--paper);
}