/* =========================================================================
   style.css — Website Romy Nießner v2
   DIESE DATEI IST DIE QUELLE DER WAHRHEIT fuer alles, was ausgeliefert wird
   (seit 06.09.2026). Token-/Komponenten-Aenderungen hier machen und in
   ../../design-system/DESIGN_SYSTEM.md beschreiben. Die M3-Beispielseiten
   (design-system/referenz_*.html) sind Archiv.
   KORREKTUR 16.09.2026: hier stand, styleguide.html trage "noch eine eigene,
   gedriftete CSS-Kopie". Das stimmt seit dem 06.09.2026 nicht mehr — der Styleguide
   laedt diese Datei und site.css per <link> direkt. Inline geblieben ist nur
   Doku-Kulisse; welche Regeln davon Produktions-Selektoren ueberschreiben (und damit
   als einzige noch driften koennen), steht vollstaendig im Kopf von styleguide.html.
   Pflege-Regel in design-system/README.md.
   Schriften self-hosted (../fonts/), keine externen Dienste.
   ========================================================================= */

/* ---- Schriften (self-hosted, @fontsource latin woff2) ---- */
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/spectral-500.woff2?v=df844520') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/spectral-500-italic.woff2?v=76f4f015') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/spectral-600.woff2?v=041903c5') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/spectral-700.woff2?v=44234f06') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/karla-400.woff2?v=6320bb65') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/karla-600.woff2?v=cde81dfa') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/karla-700.woff2?v=b5eeea7f') format('woff2'); }

/* ---- Tokens + Komponenten ---- */
:root {
    /* -- Material-3-Tokens, aus Farbwelt A generiert (04.09.2026),
          Flächen am 07.09.2026 auf zwei saubere Palettenfamilien gezogen
          ("V3b", siehe design-system/DESIGN_SYSTEM.md):
            Neutral         H 316,2 / C 4,95  (Hue+Chroma von Grund selbst)
                            -> --background und alle --surface-container-*
            Neutral-Variant H 298,0 / C 7,83  (Akzent-1-Hue, mittlere Chroma)
                            -> --surface-variant, --outline, --outline-variant
          ACHTUNG, bewusste M3-Abweichung: ERHEBUNG HEISST BEI UNS HELLER.
          Die zwei Grundflaechen sind die dunkelsten Toene des Systems - die
          Wechselflaeche mit Ton 86, der Grund mit Ton 90. Alles, was darauf liegt
          und sich abheben soll, wird HELLER: Teaser/Footer 92, Karten 94,
          Reserve 96. In M3-Light ist es umgekehrt, weil surface dort mit Ton 98
          fast weiss ist und erhabene Container nur dunkler werden koennen; mit
          unseren dunklen Grundflaechen geht das nicht. Genau so heben sich Karten
          auf jedem Abschnitt ab statt zu verschwinden (Georg/Romy 07.09.2026) -
          nicht "reparieren". -- */
    --background: #E8E0E6;         /* Grund, Neutral-90 */
    --surface-variant: #DBD5E0;    /* Fläche (Wechsel-Abschnitte), NV-86 */
    --on-background: #332E3A;      /* Text */
    --on-surface-variant: #615B67; /* Text schwach */
    --primary: #5B5470;            /* Akzent 1 */
    --on-primary: #FFFFFF;
    --primary-container: #EDE4FF;
    --on-primary-container: #3E3852;
    --secondary: #B98CA0;          /* Akzent 2 */
    --on-secondary: #332E3A;       /* dunkel, nicht weiss (Kontrast-Regel) */
    /* Badge-Flaeche des Verfuegbarkeits-Hinweises. Der automatisch generierte
       Wert war #FFE0EC (Chroma 13,6) und damit der mit Abstand gesaettigteste
       Fleck einer Seite, deren Flaechen alle bei Chroma ~5 liegen — er las sich
       suesslich statt wie das gedeckte Altrosa von Akzent 2 (dE 21 zwischen den
       beiden). Jetzt derselbe Hue mit Chroma 9, Ton 92 (Georg 07.09.2026).
       Akzent 2 SELBST als Badge-Flaeche wurde geprueft und verworfen: mit dunklem
       Text nur 4,60:1 (kein Puffer ueber AA), mit weissem Text 2,87:1 (verboten),
       und das Badge haette den Buchen-Button daneben ueberstrahlt. */
    --secondary-container: #F8E3EA;
    --on-secondary-container: #533142;
    /* Akzent 3 "Flieder" (Georg 27.09.2026): Romys eigene Handschrift und Stimme -
       Unterschrift im Hero und Linie am Zitat. Rein dekorativ, nie fuer Text oder
       Flaechen mit Text (3,3:1 auf Grund). Hergeleitet aus #A48FAE (Hue zwischen den
       Akzenten, naeher an Akzent 1), zwei Helligkeitsstufen dunkler. Alternative
       F1 #9880A3 liegt in 21_Assets/03_Unterschrift bereit.
       Seit 30.09.2026 (Gigi, nach Variante A1): Wert = Akzent 1 #5B5470 - Flieder war
       auch in der dunkleren Stufe D3 zu hell. Die Rolle "Romys Stimme" und das Token
       bleiben, damit die Stellen weiter getrennt steuerbar sind; Flieder #8C7198 liegt
       als Asset in 21_Assets/03_Unterschrift.
       Seit 01.10.2026 (Gigi, Variante Z6) traegt das Token auch Text: Zitat und
       Quellenangabe. Das geht nur, solange der Wert dunkel genug ist (heute 5,0:1 auf
       Flaeche, 5,5:1 auf Grund) - wer ihn wieder aufhellt, muss die Zitatfarbe trennen. */
    --tertiary: #5B5470;
    --outline: #79757F;            /* NV-50 */
    --outline-variant: #CFCAD4;    /* NV-82 */
    /* Die drei Erhebungsstufen ueber den Grundflaechen, von schwach nach stark.
       Reihenfolge und Namen stimmen ueberein (Georgs Hinweis 07.09.2026) — vorher
       war -low heller als -container und damit gegen den eigenen Namen die
       staerkere Stufe.
       Die Schritte sind gleichmaessig zwei Tonwerte: Grund 90 -> 92 -> 94 -> 96.
       Vorher lag die Kartenstufe auf 96 und die Reserve auf 98; die Karten wirkten
       dadurch fast weiss, besonders auf der dunkleren Wechselflaeche (Georgs
       Eindruck 07.09.2026). Der Abstand Karte-zu-Wechselflaeche faellt damit von
       dE 6,6 auf 5,4, Karte-zu-Grund von 3,6 auf 2,5 — die Karte liest sich
       ueberall noch klar als Karte, nur nicht mehr als weisses Blatt. */
    --surface-container-low: #EEE6EC;   /* Erhebung 1: Footer — Neutral-92 */
    --surface-container: #F4EBF2;       /* Erhebung 2: Karten, Kacheln, Felder, Teaser — Neutral-94 */
    --surface-container-high: #FAF1F7;  /* Erhebung 3: Reserve — Neutral-96 */
    --shadow: 220 20% 20%;

    --font-head: "Spectral", Georgia, serif;
    --font-body: "Karla", -apple-system, sans-serif;

    /* Shape (Etappe 1, vorlaeufig fuer dieses Beispiel) */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* Elevation (Etappe 1, 04.09.2026) */
    --elevation-1: 0 1px 2px hsl(var(--shadow) / 0.10), 0 1px 3px hsl(var(--shadow) / 0.08);
    --elevation-2: 0 2px 6px hsl(var(--shadow) / 0.12), 0 4px 16px hsl(var(--shadow) / 0.14);

    /* Schatten fuer Fotos (27.09.2026, Georg: Variante E2 "Hauch"). Vorher trugen alle Fotos
       --elevation-2 - dieselbe Stufe, die Kacheln erst beim Ueberfahren bekommen -, die
       Galerie dagegen gar keinen. Jetzt ein sehr weicher Schatten fuer ALLE Fotos und die
       Galerie-Karten gleich. */
    --elevation-foto: 0 1px 2px hsl(var(--shadow) / 0.06), 0 6px 18px hsl(var(--shadow) / 0.08);

    /* Motion (Etappe 1, 04.09.2026) */
    --motion-short: 150ms;
    --motion-medium: 250ms;
    --motion-easing: cubic-bezier(0.2, 0, 0, 1);

    /* Abstands-Skala (27.09.2026, Review C1/D4e). Alle margin-, padding- und
       gap-Werte stehen auf dieser Skala (4-px-Raster, oben groeber). Name = Pixelwert,
       damit man beim Lesen nicht umrechnen muss. Bewusst NICHT auf der Skala: Werte
       unter 4 px (Haarlinien, optische Korrekturen) und negative Ausgleichsraender. */
    --space-4: 4px;  --space-8: 8px;  --space-12: 12px; --space-16: 16px;
    --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px;
    --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px;
    --space-72: 72px; --space-96: 96px;

    /* Galerie-Kartenfuss (30.09.2026, Gigi, Galerie-Runde 3 Variante 01): helle Toene von
       Altrosa (Waerme) nach Lavendel (Handlung), rein dekorativ, tragen keinen Text.
       Ersetzen die Lavendel-Farbfelder der Variante K6 (deren Tokens sind entfernt). */
    --card-fuss-1: #D6B3C3;
    --card-fuss-2: #D0B6CB;
    --card-fuss-3: #CAB9D3;
    --card-fuss-4: #C4BCDA;
    --card-fuss-5: #BEBFE1;
    /* Farbreihe als Verlauf (01.10.2026, Aufraeumrunde): voll fuer den Fuss der Einzelkaesten
       (.fuss-verlauf), hell als Flaeche der Verfuegbarkeits-Pille (.badge-verlauf): B9 war zwei
       Drittel zum Hellen gemischt, seit 01.10.2026 (Gigi: "eine Spur heller") fuenf Sechstel. */
    --card-fuss-hell-1: #EBD3DE;
    --card-fuss-hell-3: #E1D4E6;
    --card-fuss-hell-5: #D8D7EE;
    --fuss-verlauf: linear-gradient(to right, var(--card-fuss-1), var(--card-fuss-3), var(--card-fuss-5));
    --fuss-verlauf-hell: linear-gradient(90deg, var(--card-fuss-hell-1), var(--card-fuss-hell-3), var(--card-fuss-hell-5));

    /* Lesebreite (26.09.2026). Lesetext, Ueberschriften und Kaesten enden hier,
       Medien und Kartengitter nutzen die volle Inhaltsbreite von 1024 px. Zwei
       Kanten statt der sieben, die sich bis dahin angesammelt hatten.
       750 px sind in Karla 18 px rund 86 Zeichen je Zeile. */
    --measure: 750px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--background); color: var(--on-background);
    font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  }
  .inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-48); }
  h1, h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.005em; margin: 0; }

  header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-24) var(--space-48); background: var(--background);
    position: sticky; top: 0; z-index: 10;
    border-bottom: 1px solid var(--outline-variant);
  }
  .logo { font-family: var(--font-head); font-weight: 600; font-size: 1.1875rem; color: var(--primary); }
  nav { display: flex; align-items: center; gap: var(--space-32); }
  /* Kopfzeile als Label-Zeile (26.09.2026): Links in Akzent 1, gleiche Groesse
     und Staerke wie der Knopf - der hebt sich nur noch ueber seine gefuellte
     Flaeche ab. padding-top spiegelt das padding-bottom des Unterstrichs,
     sonst sitzt der Linktext 2,5 px hoeher als der Knopftext (align-items
     zentriert den Kasten, nicht den Text). Die mobilen Werte stehen in
     site.css und ueberschreiben Groesse, Staerke und Polsterung wieder. */
  nav a:not(.btn-primary) {
    font-size: 0.9375rem; font-weight: 700; color: var(--primary); text-decoration: none;
    border-bottom: 2px solid transparent; padding-top: 3px; padding-bottom: 3px;
    transition: color var(--motion-short) var(--motion-easing), border-color var(--motion-short) var(--motion-easing);
  }
  nav a:not(.btn-primary):hover { color: var(--primary); border-bottom-color: var(--primary); }
  nav a { font-size: 0.9375rem; text-decoration: none; }
  nav a.active { font-weight: 700; color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 3px; }
  .btn-primary {
    /* Polsterung 9/11 statt 12/12 (26.09.2026): optisch richtiger - Text in einer
       Pille wirkt bei exakt gleicher Polsterung zu tief - und bringt den Knopftext
       auf dieselbe Grundlinie wie die Navigationslinks. */
    display: inline-flex; align-items: center; gap: var(--space-8); padding: 9px var(--space-20) 11px;
    background: var(--primary); color: var(--on-primary); border-radius: var(--radius-pill);
    font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    box-shadow: var(--elevation-1);
    transition: background-color var(--motion-short) var(--motion-easing),
                box-shadow var(--motion-short) var(--motion-easing);
  }
  .btn-primary:hover { box-shadow: var(--elevation-2); }  /* Farbe: --primary-hover weiter unten */
  .btn-secondary {
    display: inline-flex; align-items: center; gap: var(--space-8); padding: 9px var(--space-20) 11px;
    background: transparent; border: 1.5px solid var(--primary); color: var(--primary);
    border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 700;
    font-size: 0.9375rem; text-decoration: none; cursor: pointer;
    transition: background-color var(--motion-short) var(--motion-easing),
                color var(--motion-short) var(--motion-easing);
  }
  .btn-secondary:hover { background: var(--primary); color: var(--on-primary); }

  section { padding: var(--space-72) var(--space-48); }
  .alt { background: var(--surface-variant); }

  .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-56); align-items: start; }
  .hero-kicker {
    font-family: var(--font-body); font-size: 0.8125rem; color: var(--on-surface-variant);
    margin: var(--space-24) 0 0; line-height: 1.6;
  }
  h1.hero-h1 { font-size: 3rem; line-height: 1.18; max-width: 620px; }
  .hero-sub { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.65; max-width: 540px; margin: var(--space-20) 0 0; color: var(--on-background); }
  .imgfull { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--elevation-foto); }
  .imgfull img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Die Teaser-Box sitzt auf der KARTENSTUFE, nicht auf Erhebung 1: sie ist der
     wichtigste Baustein der Startseite, hob sich mit Erhebung 1 aber nur um dE 1,5
     vom Grund ab und war damit kaum als Box erkennbar — waehrend das Badge darin
     das lauteste Element der Seite war. Jetzt traegt die Box die Hervorhebung
     ueber Helligkeit, das Badge nur noch den Farbakzent (Georg 07.09.2026). */
  .teaser {
    margin-top: var(--space-32); padding: var(--space-20) var(--space-24); border-radius: var(--radius-md);
    background: var(--surface-container); display: flex; flex-direction: column; gap: var(--space-12);
  }
  .badge {
    display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16) var(--space-8) var(--space-12);
    border-radius: var(--radius-pill); background: var(--secondary-container); color: var(--on-secondary-container);
    font-size: 0.8125rem; font-weight: 700; width: fit-content;
  }
  /* GLOBALE REGEL (Georg 06.09.2026): Wo ein kleines Label und ein groesserer Wert in
     EINER Zeile stehen, wird an der GRUNDLINIE ausgerichtet, nicht an der Box-Mitte.
     Box-Mitte ist geometrisch korrekt, sieht aber falsch aus, weil Versalien-Labels
     keine Unterlaengen haben und dadurch zu hoch sitzen. `align-items: center` bleibt
     richtig fuer Elemente unterschiedlicher HOEHE (Buttons, Icons, Kacheln) — deshalb
     steht der Button ausserhalb von .label-value.
     Verwendung: <div class="label-value"><span class="…-label">…</span><span class="…-slot">…</span></div> */
  .label-value { display: flex; align-items: baseline; gap: var(--space-16); flex-wrap: wrap; }

  .teaser-row { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; }
  .teaser-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-surface-variant); font-weight: 700;
  }
  .teaser-slot { font-size: 1.125rem; font-weight: 700; color: var(--on-background); }
  /* Satz in der Verfuegbarkeits-Kachel (08.09.2026, ersetzt Label+Termin).
     flex-basis 22ch, damit der Knopf danebenbleibt, solange Platz ist. */
  .teaser-satz { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--on-background);
                 flex: 1 1 22ch; min-width: 0; }

  /* blockquote.quote stand hier bis 27.09.2026 ein zweites Mal (Review D4g/C2), mit
     anderer Zeilenhoehe. Die eine Definition steht jetzt unter "Zitat". */

  /* Type-Scale: Headline Medium (Seitentitel Unterseiten) + Headline Small (grosse
     Abschnittsueberschrift) — Rollen aus design-system/DESIGN_SYSTEM.md, hier als Klasse
     materialisiert (05.09.2026, Unterseiten-Umsetzung). */
  h1.page-h1 { font-size: 2.25rem; line-height: 1.25; max-width: var(--measure); }
  h2.section-h-lg { font-family: var(--font-head); font-weight: 700; font-size: 1.75rem; line-height: 1.31; margin: 0 0 var(--space-16); max-width: var(--measure); }
  h2.section-h { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.36; margin: 0 0 var(--space-16); max-width: var(--measure); }
  h3.sub-h { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.5; margin: 0 0 var(--space-8); }
  /* EINE Fliesstextgroesse (26.09.2026). Die frueher danebenstehende Klasse
     `.lead` mit 1.125rem ist ersatzlos entfallen: sie trug auf 4 von 26
     Abschnitten und folgte keiner erratbaren Regel. 16 px ist seither
     Feingedrucktes - plus die zwei bewussten Ausnahmen (Kartentext,
     Rechtstexte), siehe DESIGN_SYSTEM.md. */
  p.body-text { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.61; max-width: var(--measure); margin: 0 0 var(--space-16); }
  p.body-text:last-child { margin-bottom: 0; }

  .two-col { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--space-56); align-items: start; }

  .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-24); }
  /* Vier Karten (vorbereitet 01.10.2026 fuer die Kachel "Walk & Talk", Gigi): vier
     nebeneinander, ab 1060 px 2x2, ab 600 px einspaltig. */
  .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-24); }
  @media (max-width: 1060px) { .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 600px)  { .grid4 { grid-template-columns: 1fr; } }
  .card {
    background: var(--surface-container); border-radius: var(--radius-md);
    padding: var(--space-24); box-shadow: var(--elevation-1);
    transition: box-shadow var(--motion-medium) var(--motion-easing),
                transform var(--motion-medium) var(--motion-easing);
  }
  /* Hover-Anheben NUR fuer klickbare Karten (a.card, site.css). Hier stand es fuer jede
     .card - dadurch hob sich auch die Honorar-Liste, die gar kein Link ist (Georg 27.09.2026). */
  .icon-sq {
    width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--primary-container);
    display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-16);
  }
  .card-title { font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.5; margin-bottom: var(--space-8); }
  .card-link { font-size: 0.9375rem; color: var(--primary); font-weight: 700; }

  .strong-line { font-size: 1.25rem; font-weight: 700; margin-top: var(--space-16); }
  .fine-print { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.57; color: var(--on-surface-variant); margin-top: var(--space-16); }

  .location-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-20); }

  footer {
    background: var(--surface-container-low); padding: var(--space-32) var(--space-48);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-12);
    font-size: 0.8125rem; color: var(--on-surface-variant);
  }
  .crisis-note {
    flex-basis: 100%; font-size: 0.6875rem; line-height: 1.6; color: var(--on-surface-variant);
    border-bottom: 1px solid var(--outline-variant); padding-bottom: var(--space-16); margin-bottom: var(--space-4);
  }
  .footer-role { font-size: 0.75rem; color: var(--on-surface-variant); }
  .footer-links { display: flex; gap: var(--space-16); }
  .footer-links a { color: var(--on-surface-variant); text-decoration: none; }

/* Etappe 2 (05.09.2026): Button-Zustände + Zustands-Tokens */
/* --focus-ring geaendert 13.09.2026 (Review-Befund C1): der alte Ring war Akzent 1 bei
   45 % Deckkraft und erreichte gegen KEINE der Flaechen die von WCAG 1.4.11 geforderten
   3:1 (gemessen 1,87-1,99 gegen die Umgebung). Jetzt ein volldeckender, abgesetzter
   Ring in Textfarbe: 9,17-11,31:1. Der Token traegt deshalb eine outline-Kurzschrift,
   nicht mehr einen box-shadow-Wert — beim Anfassen einer :focus-visible-Regel bitte
   outline + outline-offset verwenden, nicht box-shadow. */
:root{--primary-hover:#4F4961;--primary-pressed:#423C51;--focus-ring:2px solid var(--on-background);--focus-ring-offset:3px}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{background:var(--primary-pressed);box-shadow:var(--elevation-1)}
.btn-secondary:active{background:var(--primary-pressed);border-color:var(--primary-pressed);color:var(--on-primary)}
.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.btn-primary[disabled],.btn-secondary[disabled],.btn-primary.is-disabled,.btn-secondary.is-disabled{opacity:.38;pointer-events:none;box-shadow:none}


/* =========================================================================
   Etappe 2 (05.09.2026) — Seiten-Bausteine + restliche Tokens.
   1:1 aus design-system/styleguide.html (Teil C/D) uebernommen, damit die
   Unterseiten dieselben Komponenten benutzen wie der Styleguide.
   Aenderungen hier NUR im Gleichschritt mit design-system/DESIGN_SYSTEM.md
   (die beiden HTML-Artefakte dort werden seit 06.09.2026 nicht mehr nachgezogen).
   ========================================================================= */
:root{
  --state-hover:rgba(91,84,112,0.08); --state-pressed:rgba(91,84,112,0.14);
  --radius-xs:4px;
  /* Formularfeld-Flaeche ist dieselbe Stufe wie eine Karte. Stand hier bis
     07.09.2026 als eingetippte Kopie #F6F2F5 und waere beim Umstellen der
     Palette liegengeblieben - deshalb jetzt der Token selbst. */
  --field-surface: var(--surface-container);
  --error:#B3261E; --on-error:#FFFFFF; --error-container:#F9DEDC; --on-error-container:#410E0B;
  --elevation-3:0 10px 28px hsl(var(--shadow)/0.20), 0 3px 10px hsl(var(--shadow)/0.14);
}

/* ---- Buttons auf einem echten <button> ------------------------------------
   Die drei Button-Klassen sind fuer <a> entstanden. Auf einem <button> bringt
   der Browser eigene Vorgaben mit, die sonst durchschlagen: `border: 2px outset`
   (sieht wie ein heller Rahmen aus), `font-family: Arial` statt Karla und
   `cursor: default`. Genau das war beim Knopf "Freie Termine anzeigen" zu sehen
   (Georg 08.09.2026). Gilt auch fuer <input type=submit> und fuer alles, was im
   geplanten Kontaktformular noch kommt.
   Achtung Spezifitaet: .btn-secondary braucht seinen Rahmen zurueck, denn
   `button.btn-secondary` (0,1,1) gewinnt gegen `.btn-secondary` (0,1,0). ---- */
button.btn-primary, button.btn-secondary, button.btn-text,
input.btn-primary, input.btn-secondary {
  -webkit-appearance: none; appearance: none;
  text-align: center; font: inherit; font-family: var(--font-body);
  font-weight: 700; font-size: 0.9375rem; cursor: pointer;
}
button.btn-primary, button.btn-text, input.btn-primary { border: 0; }
button.btn-secondary, input.btn-secondary { border: 1.5px solid var(--primary); }

/* ---- Text-Button (dritte Button-Stufe) ----
   Polsterung 9/11 statt 10/10 (26.09.2026, Georg): .btn-primary und .btn-secondary
   sitzen seit Durchgang 1 optisch 1 px hoeher (9/11). Stand ein .btn-text daneben
   in einer .cta-row (align-items:center), lag sein Text dadurch 1 px tiefer als der
   des Nachbarknopfs - sichtbar unten auf "Angebot & Ablauf" (Kontakt aufnehmen /
   Termin buchen). Gleiche Asymmetrie = gleiche Textlage, egal welche Stufe
   daneben steht. Wer eine Knopf-Polsterung aendert, aendert alle drei. */
.btn-text{display:inline-flex;align-items:center;gap:var(--space-8);padding:9px var(--space-16) 11px;background:transparent;color:var(--primary);border:none;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:700;font-size:0.9375rem;letter-spacing:.01em;text-decoration:none;transition:background-color var(--motion-short) var(--motion-easing)}
.btn-text:hover{background:var(--state-hover)}
.btn-text:active{background:var(--state-pressed)}
.btn-text:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}

/* ---- Formulare (aktuell ungenutzt, aber Teil des Systems) ---- */
.field{display:flex;flex-direction:column;gap:var(--space-8);max-width:420px}
.field-label{font-family:var(--font-body);font-weight:700;font-size:0.9375rem;color:var(--on-background)}
.field-label .req{color:var(--error)}
.input,.textarea,.select{font-family:var(--font-body);font-size:1.125rem;line-height:1.4;color:var(--on-background);background:var(--field-surface);border:1.5px solid var(--outline);border-radius:var(--radius-sm);padding:11px 14px;width:100%;box-sizing:border-box;transition:border-color var(--motion-short) var(--motion-easing),box-shadow var(--motion-short) var(--motion-easing)}
.textarea{min-height:92px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--on-surface-variant)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--on-surface-variant)}
.input:focus,.textarea:focus,.select:focus{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);border-color:var(--primary);border-width:2px;padding:10px 13px}
.field-help{font-size:0.9375rem;line-height:1.5;color:var(--on-surface-variant)}
.field-error{font-size:0.9375rem;line-height:1.5;color:var(--error);font-weight:600}

/* ---- Zitat ---- */
/* Zitat seit 27.09.2026 (Georg, Review D1: Variante Z3 mit der Linie aus Z2; Linie am selben
   Tag von Altrosa auf Flieder --tertiary, Variante Q1 - passend zur Unterschrift; seit
   30.09.2026 traegt --tertiary den Wert von Akzent 1): kleiner
   als bisher und nie groesser als die H2 - Desktop 24 px (= H2), Handy 20 px. Schrift,
   Quellenangabe und Linie seit 01.10.2026 in --tertiary (Gigi, Variante Z6; vorher Schrift
   und Quelle in Text schwach). Die Hervorhebung tragen Kursiv und Linie, nicht die Groesse. */
.quote{border-left:3px solid var(--tertiary);padding:2px 0 2px var(--space-24);margin:0;max-width:var(--measure)}
.quote,.quote p{font-family:var(--font-head);font-weight:500;font-style:italic;font-size:1.5rem;line-height:1.4;color:var(--tertiary)}
@media (max-width:860px){.quote,.quote p{font-size:1.25rem}}
.quote p{margin:0}
.quote cite{display:block;font-family:var(--font-body);font-style:normal;font-weight:700;font-size:0.9375rem;color:var(--tertiary);margin-top:var(--space-16)}
.quote.small p{font-size:1.375rem}
/* Ein Zitat braucht Luft nach unten - sonst klebt der Folgetext daran (05.09.2026) */
.quote + p, .quote + .quote, .quote + div { margin-top: var(--space-32) }

/* ---- Hinweis / Callout ---- */
.callout{background:var(--surface-container-low);border-radius:var(--radius-md);padding:18px var(--space-20);max-width:var(--measure)}
.callout.accent{border-left:4px solid var(--primary)}
.callout-title{font-family:var(--font-body);font-weight:700;font-size:0.9375rem;letter-spacing:.04em;text-transform:uppercase;color:var(--on-surface-variant);margin:0 0 var(--space-8)}
.callout p{font-size:1.125rem;line-height:1.6;color:var(--on-background);margin:0}
.callout.small p{font-size:0.9375rem;color:var(--on-surface-variant)}

/* ---- FAQ-Accordion ---- */
.faq{max-width:var(--measure);border-top:1px solid var(--outline-variant)}
.faq details{border-bottom:1px solid var(--outline-variant)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);padding:var(--space-16) 0;font-family:var(--font-body);font-weight:700;font-size:1.125rem;color:var(--on-background)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(45deg);transition:transform var(--motion-medium) var(--motion-easing);flex:none;margin:0 var(--space-4) var(--space-4) 0}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}
/* Die eigene 56ch-Grenze ist am 26.09.2026 entfallen - die FAQ-Antwort sitzt
   ohnehin in .faq und damit auf der Lesebreite. */
.faq-a{padding:0 0 18px;font-size:1.125rem;line-height:1.6;color:var(--on-surface-variant)}

/* ---- Ablauf-Schritte ---- */
/* Kein eigener max-width mehr (26.09.2026): Kartengitter gehoeren zur breiten
   Kante und nutzen die vollen 1024 px der Inhaltsspalte. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-16)}
.step{background:var(--surface-container);border-radius:var(--radius-md);padding:22px var(--space-24);box-shadow:var(--elevation-1)}
.step-kicker{font-family:var(--font-body);font-size:0.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
.step h3{font-family:var(--font-body);font-weight:700;font-size:1rem;margin:var(--space-8) 0 var(--space-8);color:var(--on-background)}
.step p{font-size:1rem;line-height:1.6;color:var(--on-surface-variant);margin:0}
/* Eckdaten als Zeile am unteren Rand (Variante V1, Gigi 01.10.2026; loest die Altrosa-
   Fussleiste S3 ab). Den Farbfuss liefert .fuss-reihe am .steps-Container. Geparkte
   Alternative V5 "Ziffer im Farbkreis": DESIGN_SYSTEM.md und Styleguide. */
.step{display:flex;flex-direction:column;overflow:hidden;padding-bottom:18px}
.step > p:last-of-type{padding-bottom:16px}
.step-meta{margin-top:auto;padding-top:var(--space-12);border-top:1px solid var(--outline-variant);color:var(--on-surface-variant);font-size:.8125rem;font-weight:700;line-height:1.4}

/* ---- Bild + Galerie ---- */
/* Abstand um Bilder (26.09.2026). Vorher stand hier margin:0, wodurch der
   Folgeabsatz ohne einen einzigen Pixel Luft am Bild klebte. */
.figure{margin:var(--space-20) 0 var(--space-24)}
.figure img{width:100%;display:block;border-radius:var(--radius-md);box-shadow:var(--elevation-foto)}
.figure figcaption{font-size:0.9375rem;line-height:1.5;color:var(--on-surface-variant);margin-top:var(--space-12)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-16);margin-bottom:var(--space-24)}
.gallery figure{margin:0}
/* Quadratisch statt beschnittenem Querformat; --pos setzt je Bild den sichtbaren
   Ausschnitt (z.B. style="--pos:50% 25%" zeigt weiter oben liegende Bildteile). */
.gallery img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;
  object-position:var(--pos,50% 50%);display:block;border-radius:var(--radius-md)}
.gallery figcaption{font-size:0.9375rem;line-height:1.5;color:var(--on-surface-variant);margin-top:var(--space-12)}
/* Karten mit Farbfuss (Gigi 30.09.2026, Galerie-Runde 3 Variante 01; loest die Farbkarten
   der Variante K6 ab): helle Karte wie alle Karten der Seite, Bild quadratisch oben, Satz
   dunkel darunter, die Farbe nur als 8-px-Fuss - den liefert .fuss-reihe am Container.
   Die Bilder liefert galerielook.py (Look L3) fertig quadratisch. */
.gallery.fuss-cards figure{background:var(--surface-container);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--elevation-1);display:flex;flex-direction:column}
.gallery.fuss-cards img{aspect-ratio:1/1;border-radius:0;object-fit:cover}
.gallery.fuss-cards figcaption{flex:1;margin:0;padding:14px;font-size:1rem;line-height:1.45;color:var(--on-background);font-weight:600;hyphens:auto}
@media (max-width:600px){.gallery.fuss-cards figcaption{font-size:.8125rem;padding:10px}}
/* Farbfuss fuer Reihen gleichartiger Karten (Gigi 01.10.2026): jedes direkte Kind von
   .fuss-reihe bekommt unten 8 px in der Farbreihe Altrosa nach Lavendel; die Reihe spannt
   immer von -1 bis -5: zwei Karten -1/-5, drei -1/-3/-5, vier -1/-2/-4/-5, fuenf -1..-5. Regel: nur fuer Reihen, nicht fuer Einzelkaesten.
   Im Einsatz: Angebots-Kacheln (Startseite), Ablauf-Schritte (Angebot & Ablauf), Galerie
   (Tanztherapie), Parkplatz-Kaertchen (Kontakt) - seit der Aufraeumrunde 01.10.2026 die
   EINE Technik fuer alle Reihen. */
.fuss-reihe > *{border-bottom:8px solid var(--fuss-c,var(--card-fuss-1))}
/* Mehr als fuenf Karten: Stufen wiederholen sich in Fuenferschritten. */
.fuss-reihe > :nth-child(5n+2){--fuss-c:var(--card-fuss-2)}
.fuss-reihe > :nth-child(5n+3){--fuss-c:var(--card-fuss-3)}
.fuss-reihe > :nth-child(5n+4){--fuss-c:var(--card-fuss-4)}
.fuss-reihe > :nth-child(5n+5){--fuss-c:var(--card-fuss-5)}
/* Zwei bis fuenf Karten: die Reihe spannt immer von -1 bis -5 (Anzahl per :nth-last-child). */
.fuss-reihe > :nth-child(2):nth-last-child(1){--fuss-c:var(--card-fuss-5)}
.fuss-reihe > :nth-child(2):nth-last-child(2){--fuss-c:var(--card-fuss-3)}
.fuss-reihe > :nth-child(3):nth-last-child(1){--fuss-c:var(--card-fuss-5)}
.fuss-reihe > :nth-child(2):nth-last-child(3){--fuss-c:var(--card-fuss-2)}
.fuss-reihe > :nth-child(3):nth-last-child(2){--fuss-c:var(--card-fuss-4)}
.fuss-reihe > :nth-child(4):nth-last-child(1){--fuss-c:var(--card-fuss-5)}
.fuss-reihe > :nth-child(2):nth-last-child(4){--fuss-c:var(--card-fuss-2)}
.fuss-reihe > :nth-child(3):nth-last-child(3){--fuss-c:var(--card-fuss-3)}
.fuss-reihe > :nth-child(4):nth-last-child(2){--fuss-c:var(--card-fuss-4)}
.fuss-reihe > :nth-child(5):nth-last-child(1){--fuss-c:var(--card-fuss-5)}
.ph{background:linear-gradient(135deg,var(--surface-container-high),var(--surface-variant));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--on-surface-variant);font-size:0.8125rem;line-height:1.5;padding:var(--space-12);border-radius:var(--radius-md)}

/* ---- Info-Kacheln + Sprechzeiten ---- */
.infotiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-16);max-width:var(--measure)}
.infotile{background:var(--surface-container);border-radius:var(--radius-md);padding:var(--space-20);box-shadow:var(--elevation-1)}
.infotile .il{font-size:0.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:var(--space-8)}
.infotile a{font-size:1.25rem;font-weight:700;color:var(--primary);text-decoration:none}
.infotile a:hover{text-decoration:underline}
.hours{max-width:440px}
.hours .hrow{display:flex;justify-content:space-between;gap:var(--space-16);padding:10px 0;border-bottom:1px solid var(--outline-variant);font-size:1.125rem}
.hours .hrow span:last-child{color:var(--on-surface-variant)}

/* ---- Farbfuss als Verlauf an Einzelkaesten (Gigi 01.10.2026, Variante V1; bis zur
   Aufraeumrunde am selben Tag in site.css) ----
   Einzelkaesten tragen die ganze Farbreihe als 8-px-Verlauf am unteren Rand ("die Reihe
   in einem Kasten"); Reihen tragen Stufen (.fuss-reihe). Nur background-image, die
   Flaechenfarbe bleibt aus den Grundregeln. Die Element-Kombinationen heben die
   Spezifitaet ueber die background-Kurzwerte von .map-info (inkl. Fehlerzustand) und
   .contact-card in site.css. Im Einsatz: Kontakt-Karte, Infokasten in der Karte,
   Buchungsmaske, Preisliste. Innenabstand unten jeweils +8 px. */
.fuss-verlauf, .card.fuss-verlauf, .contact-card.fuss-verlauf, .map-info.fuss-verlauf, .map-wrap.has-error + .map-info.fuss-verlauf {
  background-image: var(--fuss-verlauf);
  background-repeat: no-repeat; background-position: bottom; background-size: 100% 8px;
}
.contact-card.fuss-verlauf { padding-bottom: 36px; }
.map-info.fuss-verlauf { padding-bottom: 24px; }
.card.fuss-verlauf { padding-bottom: 32px; }
@media (max-width: 860px) {
  .contact-card.fuss-verlauf { padding-bottom: 30px; }
  .map-info.fuss-verlauf { padding-bottom: 26px; }
}

/* ---- Pille im hellen Verlauf (Gigi 01.10.2026, Variante B9) ----
   Verfuegbarkeits-Pille der Startseite. Referenz B0 (bis 01.10.2026 live): die Grundregel
   .badge, --secondary-container mit --on-secondary-container - zurueck genuegt es, die
   Klasse badge-verlauf im Template (index.html.j2) zu entfernen. */
.badge.badge-verlauf { background: var(--fuss-verlauf-hell); color: var(--on-background); }
.badge.badge-verlauf svg { color: var(--secondary); }