/* Lokal ausgelieferte Schriften — erzeugt von tools/schriften.mjs.
   NICHT von Hand bearbeiten. Zeichensätze: latin, latin-ext.
   Grund für die lokale Auslieferung: keine Übermittlung von Besucher-IP-Adressen
   an Dritte, weniger Verbindungsaufbauten, keine fremde Verfügbarkeit. */

@font-face {
  font-family: 'Alex Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/alex-brush-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alex Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/alex-brush-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/montserrat-400-kursiv-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/montserrat-400-kursiv-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/schriften/montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/schriften/montserrat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/schriften/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/schriften/montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/schriften/montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/schriften/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/schriften/montserrat-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/schriften/montserrat-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/assets/schriften/oswald-200-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/assets/schriften/oswald-200-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/schriften/oswald-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/schriften/oswald-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/oswald-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/oswald-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/schriften/oswald-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/schriften/oswald-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/schriften/oswald-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/schriften/oswald-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/schriften/oswald-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/schriften/oswald-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root{
    --copper:#B25118; --copper-deep:#8F3F10; --copper-bright:#D4692A; --copper-soft:#F7E9DF;
    /* ⚠️ KUPFER AUF GETOENTEM GRUND ERREICHT DEN KONTRAST NICHT.
       Nachgerechnet am 23.09.2026 (WCAG 2.1, AA braucht 4.5:1 fuer normalen Text):
         --copper #B25118 auf --copper-soft #F7E9DF   4.33:1  zu wenig
         --copper #B25118 auf --paper-2   #F3EEE7     4.46:1  zu wenig
         --copper-deep #8F3F10 auf --copper-soft      6.12:1  reicht
       Betroffen waren die kleinen Rubrikzeilen in den Kaesten — also genau der
       Text, der ohnehin klein und gesperrt ist. Auf hellem Grund (--paper)
       reicht --copper mit 4.82:1; dort bleibt es. */
    --copper-auf-ton:#8F3F10;
    --ink:#2B2B2B; --ink-deep:#1C1512;
    --paper:#FAF7F3; --paper-2:#F3EEE7; --paper-3:#EAE2D8;
    --white:#FFFFFF;
    --muted:#6E665E; --line:rgba(43,32,24,.12);
    --display:'Oswald',sans-serif; --body:'Montserrat',sans-serif; --script:'Alex Brush',cursive;
    --ease:cubic-bezier(.25,.46,.45,.94); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);

    /* ── Raum ──────────────────────────────────────────────────────────────
       Eine Leiter statt 30 Einzelwerte. Jede Stufe ist deutlich von der
       naechsten unterscheidbar; dadurch entsteht Rhythmus statt Rauschen. */
    --r-1:4px;   --r-2:8px;   --r-3:12px;  --r-4:16px;  --r-5:24px;
    --r-6:32px;  --r-7:48px;  --r-8:64px;  --r-9:96px;  --r-10:128px;

    /* Vertikale Grundabstaende, fluid zwischen Mobil und Desktop. */
    --raum-sektion:clamp(72px,10vw,140px);   /* zwischen zwei Sektionen      */
    --raum-block:clamp(32px,4.5vw,56px);     /* zwischen Bloecken im Abschnitt */
    --raum-kopf:clamp(36px,5vw,64px);        /* Abschnittskopf zum Inhalt    */

    /* ── Schrift ───────────────────────────────────────────────────────────
       Acht Stufen statt 25 Groessen. Die Zeilenhoehen sind je Band gesetzt:
       eng bei Display, luftig im Fliesstext. */
    --t-mikro:11px;    /* Rubriken, Etiketten                */
    --t-klein:12.5px;  /* Meta, Fussnoten                    */
    --t-basis:14px;    /* Sekundaertext in Karten            */
    --t-lesen:15px;    /* Fliesstext                         */
    --t-gross:17px;    /* Lead-Absaetze                      */
    --zeile-eng:1.15;  --zeile-normal:1.5;  --zeile-weit:1.75;

    /* ── EINE HAND, EIN LICHT ─────────────────────────────────────────
       Am 28.09.2026 nachgezaehlt: NEUN verschiedene Karten-Radien
       (12/14/16/18/20/22/24/26/28px) und 27 Schattenrezepte, von denen 25
       genau EINMAL vorkamen — sechs davon unterschieden sich um 2px Streuung
       und zwei Prozent Deckkraft. Ein Radius ist das Werkzeug, mit dem die
       Form geschnitten wurde; neun Radien lesen sich wie neun Werkzeuge. Ein
       Schatten ist eine Lichtquelle; 27 Rezepte heissen 27 Lampen im selben
       Raum. Der Blick bemerkt das sofort und nennt es «zusammengesucht».
       999px (Pille) und 50% (Kreis) bleiben, die sind Absicht. */
    --r-klein:12px; --r-mittel:18px; --r-gross:24px;
    /* Drei Hoehen, ein Licht von oben. Jede traegt einen engen Auflageschatten
       (die Kante am Papier) und einen weiten Raumschatten (der Abstand). */
    --hoehe-1:0 1px 2px rgba(43,32,24,.05), 0 12px 28px -18px rgba(43,32,24,.28);
    --hoehe-2:0 2px 4px rgba(43,32,24,.06), 0 22px 46px -20px rgba(43,32,24,.32);
    --hoehe-3:0 3px 8px rgba(43,32,24,.08), 0 38px 72px -24px rgba(43,32,24,.38);
    /* Der Kupferglanz unter den Knoepfen — eine Farbe, drei Staerken. */
    --glanz-1:0 8px 20px rgba(178,81,24,.28);
    --glanz-2:0 12px 30px rgba(178,81,24,.38);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  /* overflow-x:clip auch auf html — auf body allein wirkt es nicht: Der
     schraeg laufende Ticker ragt rund 15 px hinaus, und die Seite liess
     sich dadurch seitlich verschieben. «clip» statt «hidden», damit
     position:sticky in der Kopfzeile weiter funktioniert. */
  html{scroll-behavior:smooth;overflow-x:clip;}
  body{font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip;}
  /* height:auto ist PFLICHT, sobald die Bilder width/height-Attribute tragen:
     HTML bildet diese Attribute als Praesentationshinweis auf die CSS-Hoehe ab.
     Ohne diese Regel rendert ein Bild in seiner Pixelhoehe (z. B. 1069px) und
     ueberfaehrt jedes aspect-ratio — die Standortkarten waren dadurch
     unterschiedlich hoch und wirkten verzogen. */
  img{max-width:100%;height:auto;display:block;}
  /* <picture> soll im Layout unsichtbar bleiben, damit alle bestehenden
     Bildregeln unveraendert auf das <img> darin greifen. */
  picture{display:contents;}
  a{color:inherit;text-decoration:none;}
  button{font-family:var(--body);}
  ::selection{background:var(--copper);color:#fff;}

  /* ── Tastaturbedienung ──────────────────────────────────────────────────
     Sichtbarer Fokus auf ALLEN bedienbaren Elementen. Ohne diese Regeln ist
     die Terminanfrage per Tastatur nicht bedienbar: Standort- und
     Behandlungskarten, Tage und Zeitfenster sind gestylte Buttons ohne
     eigenen Rahmen, der Browser-Standardfokus verschwindet darauf.
     :focus-visible statt :focus — Mausklicks erzeugen keinen Rahmen. */
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
  select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
    outline:3px solid var(--copper);outline-offset:3px;border-radius:4px;}
  /* Auf dunklem Grund (Fusszeile, Kopfbereiche) braucht der Rahmen Helligkeit.
     Die Buchung stand hier bis zum 07.10.2026 mit drin — sie ist jetzt hell
     und bekommt deshalb den normalen Ring. */
  footer a:focus-visible,.hero a:focus-visible,.phero a:focus-visible,
  header:not(.scrolled) nav.main a:focus-visible,
  /* ⚠ DIESE VIER FEHLTEN. Der Kupferring liegt ueber dem Kopffoto auf
     dunklem bis mittelgrauem Grund — am 30.09.2026 gemessen: 1,01 bis
     1,02:1, auf der 404-Seite (ohne Foto) am schlimmsten. Betroffen sind
     die ERSTEN Stationen der Tabulatorreihe: Sprungmarke, Logo, Menueknopf
     und der Termin-Knopf. Wer die Seite mit der Tastatur bedient, sieht
     also gerade am Anfang nicht, wo er steht. */
  header:not(.scrolled) .skip:focus-visible,
  header:not(.scrolled) a.brand:focus-visible,
  header:not(.scrolled) .burger:focus-visible,
  header:not(.scrolled) .nav-cta:focus-visible,
  .skip:focus-visible{
    outline-color:#FFD9C2;outline-offset:3px;}
  .scard:focus-visible,.day:focus-visible,.slot:focus-visible,.drop:focus-visible{
    outline-offset:2px;border-radius:var(--r-klein);}
  .slot:focus-visible{border-radius:999px;}

  /* Sprungmarke zum Inhalt — erste Station der Tabulator-Reihenfolge. */
  .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--copper);color:#fff;
    padding:14px 22px;border-radius:0 0 12px 0;font-size:14px;font-weight:700;letter-spacing:.04em;}
  .skip:focus{left:0;}

  /* ── Grain ── */
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}

  .wrap{max-width:1360px;margin-inline:auto;padding-inline:clamp(20px,4vw,56px);}

  /* ── Typo ── */
  .eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--copper-auf-ton);display:flex;align-items:center;gap:14px;}
  /* Der Fragen-Block traegt jetzt eine echte Ueberschrift. Ein h2 bringt
     eigene Aussenabstaende mit — die nehmen wir ihm wieder ab. */
  h2.eyebrow{margin:0;}
  .eyebrow::before{content:"";width:34px;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out) .2s;}
  .in .eyebrow::before,.eyebrow.in::before{transform:scaleX(1);}
  .display{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:-.005em;line-height:.98;}
  /* ⚠ .display SAGT WIE GESETZT WIRD, ABER NICHT WIE GROSS — und genau daran
     sind vier Seiten gescheitert. Die Groesse hing allein an den Kaesten
     (.sec-head h2, .intro-grid h2, .location h2, .contact h2). Ein h2.display
     ausserhalb dieser Kaesten fiel auf die Browser-Vorgabe von 24px zurueck:
     «Was andere ueber uns sagen» auf der Startseite und «So finden Sie uns»
     auf allen drei Standortseiten standen bei 24px neben Geschwistern bei
     68 und 76px. Am 28.09.2026 im Browser nachgemessen.
     Diese Regel ist die Grundgroesse. Sie steht BEWUSST hier oben: die
     Kasten-Regeln weiter unten haben dieselbe Spezifitaet und gewinnen durch
     ihre spaetere Stellung — die Ausnahmen bleiben also Ausnahmen. */
  h2.display{font-size:clamp(38px,5.6vw,76px);}
  .script{font-family:var(--script);font-weight:400;text-transform:none;color:var(--copper);letter-spacing:0;}
  .lead{font-size:clamp(16px,1.4vw,19px);line-height:1.75;color:var(--muted);}

  /* ── Reveals ── */
  .rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);}
  .rv.in{opacity:1;transform:none;}
  .rv-d1{transition-delay:.08s;}.rv-d2{transition-delay:.16s;}.rv-d3{transition-delay:.26s;}.rv-d4{transition-delay:.38s;}
  .rv-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease-out);}
  .rv-clip.in{clip-path:inset(0 0 -8% 0);}
  .rv-img{clip-path:inset(12% 8% 12% 8% round 24px);transform:scale(1.06);transition:clip-path 1.2s var(--ease-out),transform 1.2s var(--ease-out);}
  .rv-img.in{clip-path:inset(0 0 0 0 round 24px);transform:none;}
  /* Wort-Maske für Hero */
  .wline{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
  .wline>span{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--ease-out);}
  .hero.in .wline>span{transform:none;}
  .wline:nth-child(1)>span{transition-delay:.15s;}
  .wline:nth-child(2)>span{transition-delay:.28s;}
  .wline:nth-child(3)>span{transition-delay:.41s;}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .rv,.rv-clip,.rv-img{opacity:1;transform:none;clip-path:none;transition:none;}
    .wline>span{transform:none;transition:none;}
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  }
  /* ?static=1 → alles sofort sichtbar (Screenshots/Print) */
  html.static{scroll-behavior:auto;}
  html.static .rv,html.static .rv-clip,html.static .rv-img{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;}
  html.static .wline>span{transform:none !important;transition:none !important;}
  html.static .menu-liste li,html.static .menu-foot{opacity:1 !important;transform:none !important;transition:none !important;}
  html.static .hero .bg img{animation:none !important;transform:none !important;}

  /* ── Scroll-Progress ── */
  .progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--copper),var(--copper-bright));}

  /* ── Header ── */
  header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .5s var(--ease);}
  /* Verlauf hinter dem Kopfbereich, solange er transparent ueber dem Foto liegt.
     Weisser 13-px-Text direkt auf einem Bild erreicht je nach Motiv nur rund
     3:1 — zu wenig. Der Verlauf sichert den Kontrast unabhaengig vom Bild und
     verschwindet, sobald der Kopf seinen eigenen Hintergrund bekommt. */
  header::before{content:"";position:absolute;inset:0 0 auto;height:180px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(18,11,6,.72) 0%,rgba(18,11,6,.45) 45%,transparent 100%);
    transition:opacity .4s var(--ease);}
  header.scrolled::before{opacity:0;}
  header .wrap{position:relative;z-index:1;}
  /* Zusaetzlich ein weicher Schatten — traegt auch dort, wo der Verlauf duenn wird. */
  header:not(.scrolled) nav.main a,
  header:not(.scrolled) .brand .word,
  header:not(.scrolled) .brand .loc{text-shadow:0 1px 3px rgba(18,11,6,.6);}
  body.menu-open header::before{opacity:0;}
  header.scrolled{background:rgba(250,247,243,.94);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line);}
  header.hidden{transform:translateY(-100%);}
  /* Solange das Mobilmenue offen ist, darf die Seite dahinter nicht mitscrollen. */
  html.menu-lock,html.menu-lock body{overflow:hidden;}
  .nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:16px;}
  .brand{display:flex;align-items:center;gap:12px;flex:none;}
  .brand .mark{width:44px;height:44px;flex:none;transition:transform .5s var(--ease-spring);}
  .brand:hover .mark{transform:rotate(10deg) scale(1.06);}
  .brand .word{font-weight:800;font-size:21px;letter-spacing:.01em;color:#fff;transition:color .4s;}
  .brand .word .v{font-family:var(--script);font-weight:400;font-size:30px;color:var(--copper-bright);margin-left:1px;}
  .brand .loc{display:block;font-size:9.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:-3px;transition:color .4s;}
  header.scrolled .brand .word,body.menu-open .brand .word{color:#6B3A1D;}
  header.scrolled .brand .loc,body.menu-open .brand .loc{color:var(--muted);}
  header.scrolled .brand .word .v{color:var(--copper);}
  nav.main{display:flex;}
  .menu-inner{display:flex;align-items:center;}
  .menu-liste{display:flex;gap:clamp(18px,2.4vw,34px);list-style:none;margin:0;padding:0;}
  /* Nur im Mobilmenue sichtbar. */
  /* Was NUR im aufgeklappten Mobilmenue erscheint. ⚠️ Diese Liste muss den
     Klassennamen im HTML folgen: Sie nannte frueher «.menu-kicker», eine Klasse,
     die es nach dem Umbau nicht mehr gab — der Menuekopf stand dadurch sichtbar
     auf JEDER Desktop-Seite neben dem Logo. Ein Regelwerk, das ins Leere zeigt,
     meldet sich nicht; es tut einfach nichts. */
  .menu-kopf,.menu-foot,.menu-liste .no,.menu-liste .go{display:none;}
  nav.main a{font-size:13px;font-weight:600;letter-spacing:.04em;position:relative;padding:6px 0;color:#fff;transition:color .4s;}
  header.scrolled nav.main a{color:var(--ink);}
  nav.main a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--copper-bright);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);}
  nav.main a:hover::after{transform:scaleX(1);transform-origin:left;}
  nav.main a.here::after{transform:scaleX(1);transform-origin:left;}
  .nav-cta{display:inline-flex;align-items:center;gap:10px;background:var(--copper);color:#fff;font-size:13px;font-weight:700;letter-spacing:.05em;padding:13px 24px;border-radius:999px;transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);box-shadow:var(--glanz-1);white-space:nowrap;}
  .nav-cta:hover{background:var(--copper-deep);transform:translateY(-2px);box-shadow:var(--glanz-2);}
  /* ⚠ flex:none IST HIER PFLICHT. Als .brand im 1080er-Block auf flex:0 1 auto
     umgestellt wurde, schrumpfte der Knopf mit: bei 320px auf 32px Breite, bei
     375px auf 39px. Das liegt unter den 44px Fingerziel (WCAG 2.5.5) — eine
     Nebenwirkung der eigenen Korrektur, am 23.09.2026 live nachgemessen. */
  .burger{flex:none;display:none;background:none;border:none;cursor:pointer;width:46px;height:46px;position:relative;z-index:110;border-radius:50%;transition:background .3s;}
  .burger:hover{background:rgba(178,81,24,.1);}
  .burger span{display:block;width:24px;height:2px;background:#fff;margin:6px auto;transition:.4s var(--ease);}
  header.scrolled .burger span,body.menu-open .burger span{background:var(--ink);}
  @media (max-width:1080px){
    /* visibility:hidden nimmt die Links aus der Tabulator-Reihenfolge. Ohne das
       tabbt man auf dem Handy durch sieben unsichtbare Menuepunkte, bevor man
       den Inhalt erreicht. Verzoegert geschaltet, damit die Animation laeuft. */
    /* ── Mobiles Menue ──
       Dunkles Panel in --ink-deep, derselben Farbe wie Fusszeile, Buchungs-
       bereich und Kontaktkarte. Vorher lag hier eine weisse Flaeche mit
       schwarzer Liste — technisch richtig, aber ohne Haltung. Dunkel liest es
       sich als bewusst geoeffnetes Panel, und das Kupfer traegt endlich.

       100dvh statt inset:0, weil die ein- und ausfahrende Browserleiste auf
       dem Handy sonst den unteren Rand abschneidet. overflow-y ist Pflicht:
       Bei sieben Punkten plus Knopf und drei Nummern passt es auf einem
       640-px-Geraet nicht mehr aufs Bild, und vorher waren die unteren Punkte
       dann schlicht nicht erreichbar. overscroll-behavior verhindert, dass das
       Scrollen auf die Seite darunter durchschlaegt. */
    nav.main{position:fixed;inset:0;height:100dvh;display:block;
      background:var(--ink-deep);color:#fff;
      transform:translateY(-102%);visibility:hidden;
      transition:transform .55s var(--ease-out),visibility 0s linear .55s;z-index:105;
      overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
    body.menu-open nav.main{transform:none;visibility:visible;transition:transform .55s var(--ease-out),visibility 0s;}
    /* Warmer Schimmer unten, dieselbe Handschrift wie im Hero. */
    nav.main::after{content:"";position:fixed;left:0;right:0;bottom:0;height:52vh;pointer-events:none;
      background:radial-gradient(120% 100% at 12% 100%,rgba(178,81,24,.22),transparent 68%);z-index:-1;}

    /* ⚠️ Der Textschatten stammt aus der Kopfzeile ueber dem Foto. Im offenen
       Menue macht er jedes Wort unscharf — hier ausdruecklich abgeschaltet. */
    body.menu-open header:not(.scrolled) nav.main a,
    body.menu-open header:not(.scrolled) nav.main .menu-cta,
    body.menu-open header:not(.scrolled) nav.main span{text-shadow:none;}
    body.menu-open .burger span{background:#fff;}

    /* ⚠ DUNKLE SCHRIFT AUF DUNKLEM GRUND — der Fehler, den die Praxis
       gemeldet hat. «header.scrolled nav.main a{color:var(--ink)}» faerbt die
       Menuepunkte dunkel. Am Schreibtisch ist das richtig: dort sitzt die
       Navigation auf der hellen Leiste. Auf dem Telefon ist nav.main aber das
       DUNKLE Vollbildmenue — und sobald man vor dem Oeffnen gescrollt hatte,
       standen die Eintraege in rgb(43,43,43) auf rgb(28,21,18).
       Am 29.09.2026 gemessen: Kontrast 1,27:1. Betroffen waren alle sieben
       Menuepunkte, der Termin-Knopf und die Telefonzeilen.
       Die Regel daneben behandelte bisher nur den Textschatten und nur den
       Fall :not(.scrolled) — der gescrollte Fall fehlte ganz.
       Gleiche Spezifitaet wie die dunkle Regel; sie gewinnt, weil dieser
       Block spaeter steht. */
    body.menu-open nav.main a,
    body.menu-open nav.main .menu-foot a{color:rgba(255,255,255,.9);}
    body.menu-open nav.main .menu-cta{color:#fff;}
    body.menu-open nav.main .menu-foot .ort{color:rgba(255,255,255,.5);}
    body.menu-open nav.main .menu-foot .nr{color:var(--copper-bright);}

    .menu-inner{display:flex;flex-direction:column;min-height:100%;align-items:stretch;
      padding:16px clamp(24px,7vw,64px) calc(22px + env(safe-area-inset-bottom,0px));}

    .menu-kopf{display:flex;align-items:center;gap:11px;min-height:50px;margin-bottom:22px;}
    .menu-mark{width:34px;height:34px;border-radius:50%;background:var(--copper);flex:none;
      display:grid;place-items:center;font-family:var(--body);font-weight:800;font-size:12.5px;
      letter-spacing:.04em;color:#fff;}
    .menu-wort{font-family:var(--body);font-weight:800;font-size:17px;letter-spacing:.01em;color:#fff;line-height:1.05;}
    .menu-wort i{font-family:var(--script);font-style:normal;font-weight:400;font-size:23px;
      color:var(--copper-bright);margin-left:1px;}
    .menu-wort small{display:block;font-size:9px;font-weight:700;letter-spacing:.3em;
      text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:1px;}

    .menu-liste{display:block;}
    .menu-liste li{border-top:1px solid rgba(255,255,255,.09);opacity:0;transform:translateY(14px);
      transition:opacity .42s var(--ease-out),transform .42s var(--ease-out);}
    .menu-liste li:last-child{border-bottom:1px solid rgba(255,255,255,.09);}
    nav.main .menu-liste a{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:12px;
      padding:clamp(9px,1.6vh,14px) 0;font-family:var(--display);
      font-size:clamp(22px,5.4vw,32px);text-transform:uppercase;font-weight:400;
      letter-spacing:.005em;color:rgba(255,255,255,.9);opacity:1;transform:none;
      transition:color .25s var(--ease);}
    nav.main a{color:rgba(255,255,255,.9);}
    nav.main a::after{display:none;}
    .menu-liste .no{display:block;font-family:var(--body);font-size:10px;font-weight:700;
      letter-spacing:.14em;color:rgba(255,255,255,.3);transition:color .25s var(--ease);}
    .menu-liste .go{display:block;font-size:19px;color:var(--copper-bright);
      opacity:0;transform:translateX(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease);}
    nav.main .menu-liste a:hover,nav.main .menu-liste a:focus-visible{color:#fff;}
    nav.main .menu-liste a:hover .no,nav.main .menu-liste a:focus-visible .no{color:var(--copper-bright);}
    nav.main .menu-liste a.here{color:var(--copper-bright);}
    nav.main .menu-liste a.here .no{color:var(--copper-bright);}
    nav.main .menu-liste a:hover .go,nav.main .menu-liste a:focus-visible .go,
    nav.main .menu-liste a.here .go{opacity:1;transform:none;}

    .menu-foot{display:block;margin-top:auto;padding-top:26px;opacity:0;transform:translateY(14px);
      transition:opacity .42s var(--ease-out),transform .42s var(--ease-out);}
    /* ⚠️ Hoehere Spezifitaet noetig: «nav.main a» ist (0,1,2) und schlug die
       flacheren Regeln — Telefonzeilen und Knopf erschienen deshalb in
       Versalien der Displayschrift statt in der Grundschrift. */
    nav.main .menu-cta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
      width:100%;justify-content:center;font-family:var(--body);
      font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:none;
      padding:16px 24px;color:#fff;}
    nav.main .menu-tel{margin-top:22px;display:flex;flex-direction:column;}
    nav.main .menu-tel .k{font-family:var(--body);font-size:9.5px;font-weight:700;letter-spacing:.26em;
      text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:6px;}
    nav.main .menu-tel a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
      padding:10px 0;font-family:var(--body);font-size:13px;font-weight:400;text-transform:none;
      letter-spacing:0;color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.07);}
    nav.main .menu-tel a:last-child{border-bottom:none;}
    nav.main .menu-tel a:hover{color:#fff;}
    nav.main .menu-tel .ort{font-size:12px;color:rgba(255,255,255,.5);}
    nav.main .menu-tel .nr{font-family:var(--body);font-weight:700;font-size:14.5px;
      color:var(--copper-bright);letter-spacing:.01em;white-space:nowrap;text-transform:none;}

    body.menu-open .menu-liste li,body.menu-open .menu-foot{opacity:1;transform:none;}
    body.menu-open .menu-liste li:nth-child(1){transition-delay:.08s;}
    body.menu-open .menu-liste li:nth-child(2){transition-delay:.12s;}
    body.menu-open .menu-liste li:nth-child(3){transition-delay:.16s;}
    body.menu-open .menu-liste li:nth-child(4){transition-delay:.20s;}
    body.menu-open .menu-liste li:nth-child(5){transition-delay:.24s;}
    body.menu-open .menu-liste li:nth-child(6){transition-delay:.28s;}
    body.menu-open .menu-liste li:nth-child(7){transition-delay:.32s;}
    body.menu-open .menu-foot{transition-delay:.38s;}
    body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
    body.menu-open .burger span:nth-child(2){opacity:0;}
    body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
    /* ⚠ DER MENUEKNOPF WAR AUF EINEM 360er-TELEFON NICHT MEHR ERREICHBAR.
       Die Zeile unter dem Logo traegt auf Unterseiten den Seitennamen.
       «Schwangerschaft & Rueckbildung» ist dort 332px breit; zusammen mit
       Rand und Abstand schob sie den Knopf auf 368..392 — aus dem Bild
       heraus. .brand trug flex:none und konnte nicht nachgeben.
       Am 23.09.2026 im Browser nachgemessen. */
    .brand{flex:0 1 auto;min-width:0;}
    .brand > span{min-width:0;overflow:hidden;}
    /* ⚠ «PHYSIOTHERAPIE & MASSAG…» — der Untertitel brauchte bei 375px genau
       218px und hatte 217. Ein Pixel. Seit .burger{flex:none} gibt der Knopf
       nichts mehr her, also muss die Zeile selbst schmaler werden: enger
       gesetzt und mit dem Bild mitwachsend. Die Auslassungspunkte bleiben als
       Netz fuer lange Seitennamen. Am 23.09.2026 nachgemessen. */
    .brand .loc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      font-size:clamp(7.8px,2.35vw,9.5px);letter-spacing:.16em;}
    .burger{display:block;}
    .nav-cta{display:none;}
  }

  /* ── Buttons ── */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:700;letter-spacing:.05em;padding:17px 32px;border-radius:999px;transition:all .35s var(--ease);cursor:pointer;border:none;}
  /* ⚠️ DER PFEIL STAND IN KEINER UNSERER SCHRIFTEN.
     U+2192 liegt in keiner der 26 unicode-range-Angaben von schriften.css —
     er wurde also in der Systemschrift des Besuchers gezeichnet, 478-mal im
     gebauten HTML. Je nach Geraet sieht er anders aus als der Text daneben,
     auf manchen fehlt er ganz.
     Jetzt ist er ein Winkel aus zwei Raendern, wie schon bei .faq summary.
     Die Zeichen bleiben im Quelltext stehen: Ohne CSS steht dort weiterhin ein
     Pfeil, und Vorlesewerkzeuge ueberspringen ihn ohnehin — die Beschriftung
     des Knopfes sagt bereits, wohin es geht. */
  /* ⚠️ NICHT font-size:0 ZUM VERSTECKEN. Damit wird auch jedes em zu null,
     und der Winkel war 0x0 gross — unsichtbar. Das Zeichen wird stattdessen aus
     dem Kasten geschoben und abgeschnitten; die Schriftgroesse bleibt geerbt,
     also stimmen die em-Masse. */
  .arr{display:inline-block;position:relative;width:.7em;height:.7em;vertical-align:-.04em;
    overflow:hidden;text-indent:-9em;}
  .arr::before{content:"";position:absolute;right:.12em;top:50%;width:.42em;height:.42em;
    border-top:.13em solid currentColor;border-right:.13em solid currentColor;
    transform:translateY(-50%) rotate(45deg);}
  .btn .arr{transition:transform .35s var(--ease);}
  .btn:hover .arr{transform:translateX(5px);}
  .btn-copper{background:var(--copper);color:#fff;box-shadow:var(--glanz-2);}
  .btn-copper:hover{background:var(--copper-bright);transform:translateY(-2px);box-shadow:var(--glanz-2);}
  .btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent;}
  .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}
  .btn-dark{background:var(--ink-deep);color:#fff;}
  .btn-dark:hover{background:#000;transform:translateY(-2px);}
  .btn[disabled]{opacity:.45;pointer-events:none;}

  /* ── Hero ── */
  /* ── Team nach Standort ───────────────────────────────────────────────── */
  .team-ort + .team-ort{margin-top:clamp(48px,5.5vw,76px);}
  .team-ort-kopf{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
    padding-bottom:14px;margin-bottom:26px;border-bottom:1px solid var(--line);}
  .team-ort-kopf h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
    font-size:clamp(22px,2.6vw,30px);letter-spacing:.01em;color:var(--ink);margin:0;}
  .team-ort-kopf .adr{font-size:13px;color:var(--muted);}
  .team-ort-kopf .go{margin-left:auto;font-size:12.5px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--copper);white-space:nowrap;}
  .team-ort-kopf .go .arr{display:inline-block;transition:transform .25s var(--ease);}
  .team-ort-kopf .go:hover .arr{transform:translateX(4px);}
  @media (max-width:560px){
    .team-ort-kopf .go{margin-left:0;width:100%;}
  }

  /* ── Leistungen kompakt ────────────────────────────────────────────────
     Ein Raster aus Kacheln, das in einem Blick beantwortet, ob die gesuchte
     Behandlung dabei ist. Die Trennlinien entstehen aus einem 1px-Spalt auf
     getoentem Grund — so bleibt es eine zusammenhaengende Flaeche statt acht
     schwebender Kaesten, und es gibt keine doppelten Linien zwischen den
     Kacheln. */
  .lst-kurz{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
    /* Gleich hohe Zeilen: «Schwangerschaft & Rueckbildung» bricht zweizeilig um
       und machte seine Zeile sonst 20px hoeher als die erste — nebeneinander
       sieht das nach Versehen aus, nicht nach Raster. */
    grid-auto-rows:1fr;
    gap:1px;background:var(--line);border:1px solid var(--line);
    border-radius:var(--r-gross);overflow:hidden;}
  .lst-kurz .lk{background:var(--paper);padding:22px 24px 26px;display:block;
    transition:background .25s var(--ease);}
  .lst-kurz .lk:hover{background:var(--copper-soft);}
  /* ⚠️ --copper-auf-ton, NICHT --copper. Beim Darueberfahren liegt diese Zeile
     auf --copper-soft, und dort erreicht --copper nur 4.33:1 — die Begruendung
     steht oben bei den Farbmarken. Der dunklere Ton gilt hier durchgehend,
     damit die Zahl nicht beim Darueberfahren unter die Schwelle faellt. */
  .lst-kurz .nr{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;
    color:var(--copper-auf-ton);margin-bottom:12px;}
  .lst-kurz .tt{display:flex;align-items:baseline;gap:8px;font-family:var(--display);
    font-weight:600;text-transform:uppercase;font-size:17px;line-height:1.18;color:var(--ink);}
  .lst-kurz .tt .arr{margin-left:auto;color:var(--copper-auf-ton);flex:none;
    transform:translateX(-4px);opacity:0;transition:transform .25s var(--ease),opacity .25s var(--ease);}
  .lst-kurz .lk:hover .tt .arr,.lst-kurz .lk:focus-visible .tt .arr{transform:none;opacity:1;}
  /* Zwei Zeilen, damit alle Kacheln gleich hoch bleiben. Gekuerzt wird nur die
     Anzeige — im Quelltext steht der ganze Satz, auch fuer Suchmaschinen. */
  /* Die Auszeichnung einer besonders gefragten Behandlung. Kupfer auf
     getoentem Grund braucht --copper-auf-ton; beim Darueberfahren liegt die
     Kachel auf --copper-soft, wo --copper nur 4.33:1 erreicht. */
  .lst-kurz .lk-tag{display:inline-block;margin-top:9px;padding:3px 9px;border-radius:999px;
    background:var(--copper-soft);color:var(--copper-auf-ton);
    font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
  .lst-kurz .ks{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--muted);}
  .lst-kurz .lk:focus-visible{outline:3px solid var(--copper);outline-offset:-3px;}
  @media (max-width:560px){
    .lst-kurz{grid-template-columns:1fr;}
    .lst-kurz .lk{padding:18px 20px 20px;}
    .lst-kurz .ks{-webkit-line-clamp:3;}
  }

  .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
  .hero .bg{position:absolute;inset:0;}
  .hero .bg img{width:100%;height:112%;object-fit:cover;object-position:center 28%;transform:scale(1.12);animation:kenburns 16s var(--ease-out) forwards;will-change:transform;}
  @keyframes kenburns{to{transform:scale(1.01) translateY(-1.5%);}}
  /* ⚠️ DIE DECKSCHICHT WAR DORT AM DUENNSTEN, WO JETZT TEXT STEHT.
     Bis zum 02.10.2026 begann der Text erst weiter unten — die Stufe bei 72%
     Hoehe mit nur 16% Abdunklung lag ueber ihm im Leeren. Mit der laengeren
     Schlagzeile und der Augenlinie darueber reicht der Textblock nun genau in
     diese Stufe hinein, und auf dem hellen Fensterbereich des Fotos verschwand
     die Augenlinie fast vollstaendig. Gemessen: der Textbereich liegt bei rund
     69% Hoehe, also in der schwaechsten Zone.
     Die Stufen bei 44% und 72% sind deshalb angehoben. Der Verlauf bleibt ein
     Verlauf — eine durchgehende Abdunklung waere einfacher, nimmt dem Foto aber
     die Tiefe. */
  .hero .bg::after{content:"";position:absolute;inset:0;background:
    radial-gradient(90% 70% at 18% 88%,rgba(178,81,24,.34),transparent 60%),
    linear-gradient(to top,rgba(20,12,7,.9) 0%,rgba(20,12,7,.58) 44%,rgba(20,12,7,.38) 72%,rgba(20,12,7,.46) 100%);}
  .hero .inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(96px,11vh,130px);padding-top:150px;}
  .hero .badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.09);backdrop-filter:blur(8px);border-radius:999px;padding:9px 18px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:28px;}
  .hero .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--copper-bright);box-shadow:0 0 0 0 rgba(212,105,42,.7);animation:pulse 2.2s infinite;}
  @keyframes pulse{70%{box-shadow:0 0 0 9px rgba(212,105,42,0);}100%{box-shadow:0 0 0 0 rgba(212,105,42,0);}}
  /* ⚠ Dieselben Sicherungen wie bei .phero h1. Dort wurden Buchstaben
     abgeschnitten, weil html/body overflow-x:clip tragen — es gibt also kein
     Scrollen, das den Fehler sichtbar machen wuerde. Bis zum 02.10.2026 passte
     die Startseite nur, weil «BEWEGUNG» zufaellig kurz war — die Schlagzeile
     heisst jetzt «Physiotherapie in Wohlen und Sissach» und traegt dafuer die
     Klasse .lang mit eigener Groesse. Wer sie wieder aendert, prueft die
     laengste Zeile bei 390px Geraetebreite nach. */
  .hero h1{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(48px,9.2vw,132px);line-height:.96;letter-spacing:-.01em;hyphens:auto;overflow-wrap:break-word;}
  .hero h1 .thin{font-weight:200;}
  /* Die lange Schlagzeile braucht eine eigene Groesse. «Physiotherapie» sind
     vierzehn Grossbuchstaben — bei der Grundgroesse (min 48px) waeren das auf
     einem 390px-Geraet rund 400px Satzbreite, also breiter als das Geraet.
     Die Zeile risse dann mitten im Wort um. */
  .hero h1.lang{font-size:clamp(34px,6.6vw,96px);}
  /* Die Augenlinie steht hier auf dunklem Grund — der normale Kupferton waere
     dort zu dunkel, wie schon im Seitenkopf (.phero). */
  /* Die Augenlinie steht WEISS, nicht kupfern. Sie ist 11px klein und
     gesperrt — bei dieser Groesse hat Farbe auf einem Foto keine Reserve. Der
     Kupferton bleibt auf dem Strich davor, die Marke geht also nicht verloren. */
  .hero .eyebrow{color:#fff;margin-bottom:14px;}
  .hero .eyebrow::before{background:var(--copper-bright);}
  .hero h1 .script{font-size:1.02em;color:var(--copper-bright);display:inline-block;transform:translateY(.07em);padding-right:.15em;}
  .hero .sub{max-width:560px;margin-top:26px;font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:rgba(255,255,255,.85);}
  /* ⚠️ .cta-row war NUR innerhalb von .hero und .phero als Flex definiert.
     Auf der Leistungsseite und der 404-Seite steht sie ohne diesen Kontext —
     dort wirkte weder Flex noch Abstand, und die zwei Knoepfe klebten beim
     Umbruch auf dem Handy aufeinander. Eine Regel, die an einen Ort gebunden
     ist, den ihre Klasse nicht nennt, faellt genau dort aus, wo niemand sie
     sucht. Die Grundregel steht jetzt hier; die Umgebungen aendern nur noch
     Abstand und Ausrichtung. */
  .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
  .hero .cta-row{gap:16px;margin-top:36px;}
  /* rotierender Stempel */
  .stamp{position:absolute;right:clamp(24px,6vw,110px);top:clamp(120px,17vh,190px);z-index:2;width:clamp(110px,12vw,160px);height:clamp(110px,12vw,160px);}
  .stamp svg{width:100%;height:100%;animation:spin 16s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .stamp .core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--script);font-size:clamp(30px,3.4vw,44px);color:#fff;}
  .phero .stamp{top:clamp(112px,15vh,168px);right:clamp(24px,6vw,110px);width:clamp(104px,11vw,150px);height:clamp(104px,11vw,150px);}
  @media (max-width:860px){.stamp{display:none;}}
  .hero .scroll-hint{position:absolute;right:clamp(20px,4vw,56px);bottom:44px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);writing-mode:vertical-rl;}
  .hero .scroll-hint::after{content:"";width:1px;height:56px;background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);animation:drip 2s var(--ease) infinite;}
  @keyframes drip{0%{transform:scaleY(0);transform-origin:top;}55%{transform:scaleY(1);transform-origin:top;}56%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}
  @media (max-width:720px){.hero .scroll-hint{display:none;}}

  /* ── Ticker ── */
  .phero + .ticker{margin-top:-14px;}
  .ticker{background:var(--copper);color:#fff;overflow:hidden;padding:16px 0;position:relative;z-index:3;transform:rotate(-1deg) scale(1.02);margin-top:-14px;box-shadow:var(--glanz-2);}
  .ticker .track{display:flex;width:max-content;animation:marquee 34s linear infinite;}
  .ticker:hover .track{animation-play-state:paused;}
  @keyframes marquee{to{transform:translateX(-50%);}}
  .ticker span{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.22em;text-transform:uppercase;padding:0 26px;white-space:nowrap;display:inline-flex;align-items:center;gap:26px;}
  .ticker span::after{content:"✦";font-size:11px;opacity:.6;}

  section{position:relative;}
  .sec-pad{padding-block:var(--raum-sektion);}
  /* Folgen zwei Sektionen mit gleichem Grund aufeinander, wuerde der Abstand
     doppelt zaehlen — dann reicht die Haelfte. */
  .sec-pad + .sec-pad{padding-top:calc(var(--raum-sektion) * .55);}
  .services + .services,.prices + .prices{padding-top:var(--raum-sektion);}
  .sec-head{display:grid;grid-template-columns:1fr auto;gap:var(--r-6);align-items:end;margin-bottom:var(--raum-kopf);}
  .sec-head h2{font-size:clamp(38px,5.6vw,76px);}
  /* Die Rubrik-Ueberschrift auf /ratgeber ist ein Link — das war ihr nicht
     anzusehen. Farbe beim Ueberfahren allein reicht nicht: auf dem Telefon
     gibt es kein Ueberfahren. Der Winkel sagt es ohne Worte, und er ist
     dasselbe Bauteil wie auf jedem Knopf der Seite. */
  .sec-head h2 a{transition:color .3s var(--ease);}
  .sec-head h2 a:hover{color:var(--copper);}
  .sec-head h2 .arr{font-size:.55em;color:var(--copper);margin-left:.1em;}
  .sec-head .side{font-size:13px;color:var(--muted);max-width:300px;line-height:1.7;padding-bottom:8px;}
  @media (max-width:720px){.sec-head{grid-template-columns:1fr;align-items:start;}}

  /* ── Intro ── */
  .intro-grid{display:grid;grid-template-columns:5fr 4fr;gap:clamp(40px,6vw,100px);align-items:center;}
  @media (max-width:960px){.intro-grid{grid-template-columns:1fr;}}
  .intro-grid h2{font-size:clamp(40px,5vw,68px);margin:22px 0 26px;}
  .intro-grid h2 .script{font-size:1.15em;}
  .intro-copy p+p{margin-top:18px;}
  .intro-figure{position:relative;padding-bottom:56px;}
  .intro-figure .ph{border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--hoehe-3);position:relative;z-index:2;}
  .intro-figure .ph img{aspect-ratio:4/4.4;object-fit:cover;width:100%;transition:transform 1.2s var(--ease-out);}
  /* ⚠️ DAS EIGENE SEITENVERHAELTNIS DES GRUPPENBILDES, SONST WIRD GESCHNITTEN.
     Die Aufnahme ist 1334x2000 (hoch). Jedes andere Verhaeltnis mit
     object-fit:cover schneidet oben und unten weg — und dort stehen Koepfe.
     object-position:top ist die zweite Sicherung: Sollte die Flaeche doch einmal
     flacher werden, faellt zuerst der Boden weg und nicht ein Gesicht. */
  .intro-figure .ph-team img{aspect-ratio:1334/2000;object-position:top center;}
  .intro-figure:hover .ph img{transform:scale(1.045);}
  .intro-figure .ph2{position:absolute;right:-8%;bottom:0;width:52%;border-radius:var(--r-mittel);overflow:hidden;z-index:3;border:6px solid var(--paper);box-shadow:var(--hoehe-2);}
  .intro-figure .ph2 img{aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--ease-out);}
  .intro-figure .ph2:hover img{transform:scale(1.06);}
  .intro-figure .ring{position:absolute;left:-40px;top:-40px;width:130px;height:130px;border:2px dashed rgba(178,81,24,.4);border-radius:50%;animation:spin 22s linear infinite;z-index:1;}
  .intro-figure .chip{position:absolute;left:-26px;bottom:100px;background:var(--ink-deep);color:#fff;border-radius:var(--r-mittel);padding:20px 24px;box-shadow:var(--hoehe-3);max-width:230px;z-index:4;}
  .intro-figure .chip .n{font-family:var(--display);font-size:34px;font-weight:600;color:var(--copper-bright);line-height:1;}
  .intro-figure .chip .t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:7px;color:rgba(255,255,255,.75);line-height:1.55;}
  @media (max-width:960px){
    .intro-figure{padding-bottom:0;}
    /* ⚠ DIE KARTE LAG AUF DEN GESICHTERN. Bis 960px wanderte sie nach links
       OBEN — genau dorthin, wo die hintere Reihe des Teamfotos steht. Bei
       375px waren zwei Gesichter vollstaendig verdeckt; sie hat eine feste
       Groesse, das Bild schrumpft mit dem Fenster, also wird es nach unten
       immer schlimmer. Das ist genau die Stelle, wegen der reklamiert wurde.
       Sie steht jetzt UNTER den Bildern, wie .ph2 es dort schon macht. */
    .intro-figure .chip{position:static;left:auto;top:auto;bottom:auto;max-width:none;
      margin-top:16px;padding:18px 22px;display:flex;align-items:baseline;gap:16px;}
    .intro-figure .chip .t{margin-top:0;}
    .intro-figure .chip .n{font-size:28px;}
    /* Teambild: auf Mobile volle Breite ohne Beschnitt statt kleinem Overlay */
    .intro-figure .ph2{position:static;width:100%;margin-top:16px;border:none;border-radius:var(--r-mittel);box-shadow:var(--hoehe-2);}
    .intro-figure .ph2 img{aspect-ratio:auto;}
    .intro-figure .ring{left:auto;right:-20px;}
  }
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line);margin-top:clamp(60px,8vw,110px);}
  .stat{background:var(--paper);padding:34px 26px;transition:background .4s var(--ease);}
  .stat:hover{background:var(--paper-2);}
  .stat .n{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.4vw,58px);color:var(--copper);line-height:1;font-variant-numeric:tabular-nums;}
  .stat .n sup{font-size:.45em;top:-.9em;}
  .stat .t{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;line-height:1.6;}
  @media (max-width:720px){.stat-row{grid-template-columns:1fr;}}

  /* ── Leistungen: Hover-Liste ──────────────────────────────────────────
     Leitgedanke seit 28.09.2026: Die Vorschau ist kein Bild, das erscheint,
     sondern ein Gegenstand, der mitwandert. Drei Aenderungen tragen das —
     und nur zusammen:
       1. LAGE UEBER translate, NICHT MEHR UEBER top. Die Karte wurde bisher
          per top an die neue Zeile gesetzt; top steht in keiner Transition,
          also sprang sie hart. Jetzt schiebt sie eine Feder in template.mjs,
          und translate laeuft im Compositor statt im Layout.
       2. BILDWECHSEL OHNE BLENDE. Bisher blendeten beide Bilder gleichzeitig,
          in der Mitte standen beide bei rund 50 Prozent — man sah durch die
          Karte hindurch. Jetzt bleibt das gehende Bild deckend liegen, bis
          das kommende darueber steht.
       3. DIE ZEILE ANTWORTET IN 220ms STATT 400ms — und ohne Layout. Das alte
          padding-left liess bei jedem Einzelbild die ganze Liste neu rechnen.
     ⚠ Die beiden Kurven stehen bewusst HIER und nicht in :root: der vom
       Kunden bestaetigte Kern bleibt unveraendert. */
  .services{background:var(--paper-2);
    /* Cubic-Out. Kommt an, ohne zu federn — fuer alles, was ein Ziel hat.
       NICHT --ease-out (.16,1,.3,1): das legt 80 Prozent des Weges in die
       ersten 20 Prozent der Zeit und liest sich auf langen Wegen als Sprung
       mit Nachlauf. */
    --svc-gleiten:cubic-bezier(.22,.61,.36,1);
    /* Zieht sofort los — fuer das, was direkt am Zeiger haengt. */
    --svc-antwort:cubic-bezier(.33,0,.1,1);
    /* ⚠ GEMESSEN AM 28.09.2026 BEI 1440px, nicht geschaetzt.
       Die Knopfspalte ist 208px breit und haengt am RECHTEN Rand der Liste —
       also ist die Gasse eine Konstante, keine vw-Groesse: 208 + 20 = 228.
       Damit endet die Karte bei JEDER Breite 20px vor dem Knopf. Vorher
       lag sie 28px darin (Kartenrand 1164, Knopf ab 1136).
       Die Breite ist der Rest des freien Bandes: der laengste Titel
       («Schwangerschaft & Rueckbildung») endet bei 746, der Knopf beginnt
       bei 1040 — 274px dazwischen. Ab 1360px aendert sich daran nichts mehr,
       weil .wrap dort deckelt.
       ⚠ 274px mal 2 Punktdichte = 548px. Die 960er-Variante deckt das; mit
       der alten 480er waere die Karte weich. */
    --svc-breite:clamp(236px,19vw,274px);
    --svc-gasse:228px;}
  .svc-list{border-top:1px solid var(--line);position:relative;}
  .svc-row{display:grid;grid-template-columns:70px 1fr auto;grid-template-areas:"no title act" "no desc act";gap:6px clamp(14px,3vw,40px);align-items:center;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line);position:relative;cursor:pointer;}
  /* Die Kupferkante gibt der Bewegung einen Ursprung: die Zeile oeffnet sich
     aus ihrer Mitte heraus, statt nur nach rechts zu rutschen. */
  .svc-row::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;
    background:var(--copper);transform:scaleY(0);transform-origin:center;
    transition:transform .32s var(--svc-gleiten);}
  /* Verschoben wird der TEXT, nicht die Zeile — der Knopf rechts bleibt
     stehen, so wie es das alte padding-left auch getan hat. */
  .svc-row>:not(.act){translate:0;transition:translate .22s var(--svc-antwort),color .24s var(--svc-antwort);}
  /* Der Fokuszustand gilt ueberall, auch ohne Maus. */
  .svc-row:focus-within>:not(.act){translate:14px;}
  .svc-row:focus-within::before{transform:scaleY(1);}
  .svc-row:focus-within h3{color:var(--copper-auf-ton);}
  /* ⚠ :hover eingeklammert. Ohne (hover:hover) bleibt der Zustand auf einem
     angetippten Tablet haengen, bis man woanders hintippt. */
  @media (hover:hover){
    .svc-row:hover>:not(.act){translate:14px;}
    .svc-row:hover::before{transform:scaleY(1);}
    .svc-row:hover h3{color:var(--copper-auf-ton);}
  }
  /* ⚠ --copper-auf-ton statt --copper: die Liste steht auf --paper-2, und
     dort erreicht #B25118 nur 4.46:1 (Messung vom 23.09.2026 oben in :root).
     #8F3F10 erreicht 6.31:1 — nachgerechnet am 28.09.2026. Gilt fuer die
     Ziffer genauso wie fuer die Ueberschrift im Hover. */
  .svc-row .no{grid-area:no;align-self:start;padding-top:8px;font-family:var(--display);font-weight:300;font-size:15px;letter-spacing:.14em;color:var(--copper-auf-ton);}
  .svc-row h3{grid-area:title;justify-self:start;font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(22px,3.4vw,42px);letter-spacing:.005em;line-height:1.05;}
  /* Die Zeile zeigt cursor:pointer — also muss sie auch klickbar sein. Bisher
     war sie es nicht: nur Titel und Knopf reagierten. Der Ueberzug haengt am
     Titel-Link, der Knopf rechts liegt darueber. */
  .svc-row h3 a::after{content:"";position:absolute;inset:0;z-index:1;}
  /* Auszeichnung einer besonders nachgefragten Behandlung. Eigene Schrift und
     Groesse, damit sie nicht als Teil der Ueberschrift gelesen wird. */
  .svc-row h3 .tag{display:inline-block;vertical-align:middle;margin-left:clamp(8px,1.2vw,14px);transform:translateY(-.18em);font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:#fff;background:var(--copper);border-radius:999px;padding:6px 11px;white-space:nowrap;position:relative;z-index:2;}
  .svc-row .desc{grid-area:desc;font-size:13.5px;line-height:1.65;color:var(--muted);max-width:640px;}
  /* transition:all ersetzt: es hat auch alles mitanimiert, was spaeter
     dazukommt, und machte den Knopf traege. Jetzt nur, was sich aendert. */
  .svc-row .act{grid-area:act;align-self:center;position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:12px 20px;background:transparent;cursor:pointer;white-space:nowrap;translate:0;transition:background-color .24s var(--svc-antwort),border-color .24s var(--svc-antwort),color .24s var(--svc-antwort),translate .24s var(--svc-antwort);}
  .svc-row .act:hover{background:var(--copper);border-color:var(--copper);color:#fff;translate:0 -2px;}
  /* ── Die Vorschaukarte ──
     Kein top mehr, kein transform: translate und rotate gehoeren der Feder in
     template.mjs, opacity und scale bleiben bei CSS. Beide Seiten fassen
     getrennte Eigenschaften an — sonst wuerde jede Schreiboperation der Feder
     eine neue Transition starten, und die Bewegung wuerde matschig. */
  .svc-preview{position:absolute;top:0;right:var(--svc-gasse);width:var(--svc-breite);aspect-ratio:4/3;
    border-radius:var(--r-mittel);overflow:hidden;pointer-events:none;z-index:5;
    /* Fester Grund: die Karte ist ein Gegenstand, kein Fenster. */
    background:var(--paper-3);
    opacity:0;scale:.965;translate:0 0;rotate:0deg;
    /* Zwei Schatten statt einem. Ein einzelner grosser Weichzeichner liest
       sich als Effekt; ein enger Auflageschatten plus ein weiter Raumschatten
       liest sich als Gegenstand, der auf dem Papier liegt. Die Haarlinie nach
       innen trennt das Foto sauber vom Schatten. */
    /* Dieselbe Idee traegt jetzt die ganze Seite: --hoehe-3 ist genau dieser
       Aufbau (enge Auflage + weiter Raum), nur aus der gemeinsamen Leiter.
       Die Haarlinie nach innen bleibt — die ist eigen fuer das Foto. */
    box-shadow:var(--hoehe-3), inset 0 0 0 1px rgba(250,247,243,.22);
    transition:opacity .2s var(--ease),scale .48s var(--svc-gleiten);
    will-change:translate,rotate;}
  /* ⚠ scale .965 statt der alten .85 mit 3 Grad Drehung. Der alte Auftritt
     war ein Effekt, der etwas ANKUENDIGT; .965 liest sich, als waere die
     Karte schon da gewesen und trete nur ins Licht. Das ist der groesste
     einzelne Unterschied im empfundenen Wert — und die Drehung muss ohnehin
     weg, weil die Neigung jetzt aus der Bewegung kommt. */
  .svc-preview.on{opacity:1;scale:1;transition:opacity .28s var(--svc-gleiten),scale .52s var(--svc-gleiten);}
  /* Bildwechsel ohne durchsichtigen Moment: das gehende Bild wartet .34s —
     dann hat das kommende rund 90 Prozent Deckung — und faellt erst danach
     weg, unsichtbar unter dem neuen. Sein scale springt nach .54s zurueck,
     also erst, wenn es sicher niemand mehr sieht. */
  .svc-preview img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:1;
    opacity:0;scale:1.06;transition:opacity .2s var(--ease) .34s,scale 0s linear .54s;}
  /* Das kommende Bild: Deckung in .38s, aber das Setzen laeuft 1.1s weiter.
     Dieser Nachlauf ist der Unterschied zwischen einem Austausch und einer
     Aufnahme, die abgelegt wird. */
  .svc-preview img.on{opacity:1;scale:1;z-index:2;
    transition:opacity .38s var(--svc-gleiten),scale 1.1s var(--svc-gleiten);}
  @media (max-width:1080px){.svc-preview{display:none;}}
  /* ⚠ translate/rotate/scale als EIGENE Eigenschaften gibt es erst ab
     Safari 14.1 (April 2021), Chrome 104, Firefox 72. Wer aelter ist, wuerde
     die Karte oben in der Liste PARKEN sehen, weil die Feder ins Leere
     schreibt. Dann lieber gar keine Karte: sie ist reine Zugabe, alles
     Inhaltliche steht in der Zeile. */
  @supports not (translate:0px){.svc-preview{display:none;}}
  @media (max-width:680px){
    .svc-row{grid-template-columns:44px 1fr;grid-template-areas:"no title" "no desc" "no act";}
    .svc-row .act{justify-self:start;margin-top:12px;}
    .svc-row::before{top:8%;bottom:8%;}
  }
  /* Die globale Regel weiter oben macht alle Dauern zu .01ms. Das reicht
     nicht: ein Sprung um 14px bleibt ein Sprung. Hier steht deshalb, was
     ganz entfallen soll. Die Feder in template.mjs haelt sich selbst an
     reduced und schreibt dann nur noch die Endlage. */
  @media (prefers-reduced-motion:reduce){
    .svc-row>:not(.act),.svc-row:hover>:not(.act),.svc-row:focus-within>:not(.act){translate:0;}
    .svc-preview{scale:1;rotate:0deg;will-change:auto;}
    .svc-preview img,.svc-preview img.on{scale:1;}
  }
  /* Schmale Screens: Headlines nie überlaufen lassen */
  @media (max-width:520px){
    .intro-grid h2,.sec-head h2,.location h2,.contact h2,h2.display{font-size:clamp(28px,8.4vw,38px);}
    .hero h1{font-size:clamp(40px,12vw,64px);}
  }
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(36px,5vw,60px);}
  .chips .c{font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:10px 18px;transition:all .3s var(--ease);cursor:default;}
  .chips .c:hover{border-color:var(--copper);color:var(--copper);transform:translateY(-2px);}

  /* ── Quote ── */
  .quote-break{position:relative;min-height:76vh;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;text-align:center;}
  .quote-break .bg{position:absolute;inset:-6% 0;}
  .quote-break .bg img{width:100%;height:100%;object-fit:cover;will-change:transform;}
  .quote-break .bg::after{content:"";position:absolute;inset:0;background:rgba(24,14,8,.64);}
  .quote-break blockquote{position:relative;z-index:2;max-width:1000px;padding-inline:24px;}
  .quote-break .q{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,4.6vw,58px);line-height:1.18;}
  .quote-break .q em{font-family:var(--script);font-style:normal;text-transform:none;color:var(--copper-bright);font-size:1.35em;line-height:.8;}
  .quote-break cite{display:block;margin-top:28px;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.65);}

  /* ── Team ── */
  .team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px);max-width:900px;}
  @media (max-width:680px){.team-grid{grid-template-columns:1fr;}}
  .person{position:relative;border-radius:var(--r-gross);overflow:hidden;background:var(--paper-3);}
  .person img{aspect-ratio:3/3.4;object-fit:cover;object-position:top;width:100%;transition:transform 1s var(--ease-out),filter 1s var(--ease-out);}
  .person:hover img{transform:scale(1.06);}
  .person .cap{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(250,247,243,.94);backdrop-filter:blur(10px);border-radius:var(--r-mittel);padding:18px 20px;transform:translateY(8px);transition:transform .45s var(--ease);}
  .person:hover .cap{transform:none;}
  .person .cap .nm{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:20px;}
  .person .cap .rl{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-auf-ton);margin-top:3px;}
  .person .cap .ml{font-size:12.5px;color:var(--muted);margin-top:6px;}
  .team-note{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;background:var(--copper-soft);border:1px solid rgba(178,81,24,.2);border-radius:var(--r-mittel);padding:28px 32px;max-width:900px;}
  .team-note .ic{width:52px;height:52px;border-radius:50%;background:var(--copper);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--script);font-size:30px;flex:none;padding-top:2px;}
  .team-note p{font-size:14.5px;line-height:1.7;color:#6E3A16;}
  @media (max-width:560px){.team-note{grid-template-columns:1fr;}}

  /* ── Preise ── */
  .prices{background:var(--paper-2);overflow:hidden;}
  .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;perspective:1200px;}
  /* Vier statt drei Karten: fliessend umbrechen statt starr dreispaltig.
     Als Klasse, damit die Mobil-Regel darunter greifen kann. */
  .price-grid.fliessend{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
  @media (max-width:1000px){.price-grid,.price-grid.fliessend{grid-template-columns:1fr;max-width:560px;}}
  .price{background:var(--white);border-radius:var(--r-gross);padding:40px 36px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease);transform-style:preserve-3d;will-change:transform;}
  .price:hover{box-shadow:var(--hoehe-2);}
  .price.hi{background:var(--ink-deep);color:#fff;}
  .price.hi::before{content:"";position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(212,105,42,.35),transparent 65%);}
  .price .k{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--copper);}
  .price.hi .k{color:var(--copper-bright);}
  .price h3{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:24px;margin-top:6px;}
  .price .amt{font-family:var(--display);font-weight:600;font-size:clamp(40px,4vw,54px);line-height:1;margin:18px 0 4px;}
  .price .amt .cur{font-size:.38em;font-weight:400;letter-spacing:.1em;vertical-align:.62em;margin-right:6px;color:var(--muted);}
  .price.hi .amt .cur{color:rgba(255,255,255,.6);}
  .price .per{font-size:12.5px;color:var(--muted);letter-spacing:.06em;}
  .price.hi .per{color:rgba(255,255,255,.65);}
  .price ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px;}
  .price li{font-size:13.5px;line-height:1.55;padding-left:24px;position:relative;color:var(--muted);}
  .price.hi li{color:rgba(255,255,255,.78);}
  .price li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg);}
  .price.hi li::before{border-color:var(--copper-bright);}
  .price-foot{font-size:12.5px;color:var(--muted);margin-top:26px;max-width:760px;line-height:1.7;}

  /* ── Buchung ── */
  /* ── Terminanfrage: HELL, seit dem 07.10.2026 ──────────────────────────
     Vorher stand der ganze Abschnitt auf --ink-deep. Das sah gut aus und war
     an einer Stelle schlicht schlecht lesbar: Die Feldbeschriftungen und die
     Einwilligungszeile tragen --muted, und --muted auf dunklem Grund kommt auf
     2.81:1 — unter jeder Lesbarkeitsschwelle. Das stand als offener Befund in
     der Kontrastliste und ist mit dem hellen Grund erledigt, nicht umlackiert.

     ⚠️ --copper-auf-ton, NICHT --copper, fuer die Augenlinie: Der Abschnitt
     liegt auf --paper-2, und dort erreicht --copper nur 4.33 bis 4.46:1. Die
     Rechnung steht oben bei den Farbmarken. */
  .booking{background:var(--paper-2);color:var(--ink);overflow:hidden;}
  .booking::before{content:"";position:absolute;left:-15%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(178,81,24,.10),transparent 65%);pointer-events:none;}
  .booking .eyebrow{color:var(--copper-auf-ton);}
  .booking .eyebrow::before{background:var(--copper-auf-ton);}
  .booking .sec-head h2{color:var(--ink);}
  .booking .sec-head .side{color:var(--muted);}
  /* Kein backdrop-filter mehr. Er brachte auf hellem Grund nichts und kapert
     als Vorfahr jedes position:fixed darin — eine Falle, die dieses Projekt
     schon einmal gekostet hat. */
  .bk{background:var(--white);border:1px solid var(--line);border-radius:var(--r-gross);
    box-shadow:var(--hoehe-2);padding:clamp(20px,2.8vw,34px);position:relative;}
  /* ── Bewertungen ──
     Karten, die auf die Google-Profile fuehren. Bewusst ohne Sterne und ohne
     Zitate — warum, steht in content/bewertungen.mjs. */
  .bewertungen .bew-lead{max-width:62ch;color:var(--muted);font-size:15.5px;line-height:1.75;margin:14px 0 0;}
  .bew-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
    margin-top:clamp(26px,4vw,38px);}
  .bew-karte{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--line);
    border-radius:var(--r-mittel);background:var(--paper);transition:border-color .25s,transform .25s var(--ease-out),box-shadow .25s;}
  .bew-karte:hover{border-color:var(--copper);transform:translateY(-2px);box-shadow:var(--hoehe-1);}
  .bew-g{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
    background:var(--copper-soft);color:var(--copper);font-family:var(--display);font-weight:700;font-size:19px;}
  .bew-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .bew-nm{font-weight:600;font-size:15px;color:var(--ink);}
  .bew-sub{font-size:12.5px;color:var(--muted);}
  .bew-karte .arr{margin-left:auto;color:var(--copper);}
  .bew-bitte{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
    margin-top:clamp(24px,3vw,34px);padding:24px 26px;border-radius:var(--r-mittel);background:var(--copper-soft);
    border:1px solid rgba(178,81,24,.2);}
  .bew-bitte-k{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
    font-size:16px;font-weight:600;color:var(--ink);}
  .bew-bitte p{font-size:13.5px;color:#6E3A16;margin:6px 0 0;max-width:52ch;line-height:1.6;}
  @media (max-width:640px){ .bew-bitte{flex-direction:column;align-items:flex-start;} }

  /* ── Terminanfrage als EIN Formular (seit 23.09.2026) ──
     Die Klickstrecke mit Zeitfenstern ist weg; was blieb, ist ein Formular.
     Es benutzt dieselben Bausteine wie das Kontaktformular (.fgrid/.consent),
     damit beide Formulare sich gleich anfuehlen. */
  /* Kompakter als vorher: Der Weg vom ersten Feld zum Knopf wurde um rund
     ein Sechstel kuerzer, ohne dass die Felder kleiner anzufassen sind —
     die Hoehe der Eingabefelder bleibt ueber 44px. */
  .bk-einfach{padding:clamp(16px,2.2vw,26px);}
  .bk-einfach .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
  .bk-einfach .fgrid .full{grid-column:1/-1;}
  @media (max-width:620px){ .bk-einfach .fgrid{grid-template-columns:1fr;} }
  .bk-einfach label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
  .bk-einfach input[type=text],.bk-einfach input[type=tel],.bk-einfach input[type=email],
  .bk-einfach input[type=date],.bk-einfach select,.bk-einfach textarea{
    width:100%;padding:11px 13px;border-radius:var(--r-klein);border:1.5px solid var(--line);
    background:var(--paper);font:inherit;font-size:15px;color:var(--ink);
    transition:border-color .2s,background .2s;}
  .bk-einfach input:focus,.bk-einfach select:focus,.bk-einfach textarea:focus{border-color:var(--copper);background:var(--white);}
  .bk-einfach textarea{resize:vertical;min-height:70px;}
  /* Was freiwillig ist, steht dran — sonst raet man beim Ausfuellen. */
  .freiwillig{text-transform:none;letter-spacing:0;font-weight:400;font-size:11px;
    color:var(--muted);opacity:.85;}
  /* Der Hinweis gehoert zur Behandlung und steht seit dem 07.10.2026 in einer
     halben Spalte — deshalb --copper-auf-ton: er liegt auf der weissen Karte,
     wird aber auch im getoenten Abschnitt verwendet. */
  .feld-hinweis{font-size:12.5px;line-height:1.5;color:var(--copper-auf-ton);margin:7px 0 0;}
  /* ⚠ DER EINWILLIGUNGSSATZ STAND IN GESPERRTEN GROSSBUCHSTABEN BEI 11px.
     Ursache war .bk-einfach label weiter oben: die Regel trifft JEDES Label im
     Formular, und die Einwilligung ist ebenfalls eines. Ein Rechtstext, der
     ausdrueckliche Zustimmung einholt, muss lesbar sein — gesperrte Versalien
     ueber zwei Zeilen liest niemand. Am 28.09.2026 im Browser nachgemessen:
     uppercase, 11px, 700, Sperrung 2.1px.
     Gilt fuer BEIDE Einwilligungen: die zur Anfrage und die zum Upload der
     Verordnung (letztere ist eine Gesundheitsdaten-Einwilligung). */
  .bk-einfach .consent,
  .bk-einfach .consent span{text-transform:none;letter-spacing:normal;
    font-size:13.5px;font-weight:400;line-height:1.6;color:var(--muted);}
  .bk-einfach .consent{margin-top:22px;}

  /* Das Kaestchen war das einzige rohe Bedienelement in einem sonst
     durchgestalteten Formular. Eigene Marke, groesseres Ziel. */
  .bk-einfach .consent input[type=checkbox]{appearance:none;-webkit-appearance:none;
    width:24px;height:24px;flex:none;margin:0;border:1.5px solid var(--line-strong,rgba(43,32,24,.28));
    border-radius:7px;background:var(--paper);cursor:pointer;position:relative;
    transition:border-color .2s,background .2s;}
  .bk-einfach .consent input[type=checkbox]:hover{border-color:var(--copper);}
  .bk-einfach .consent input[type=checkbox]:checked{background:var(--copper);border-color:var(--copper);}
  /* Das Haekchen aus zwei Raendern gezeichnet — dieselbe Technik wie .arr,
     damit kein Zeichen aus einer fremden Schrift geholt wird. */
  .bk-einfach .consent input[type=checkbox]::after{content:"";position:absolute;
    left:8px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;
    transform:rotate(45deg) scale(0);transition:transform .18s var(--ease-out);}
  .bk-einfach .consent input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1);}
  /* ⚠️ DIESER SATZ IST DER KERN DER AENDERUNG, NICHT SCHMUCK.
     Er sagt ausdruecklich, dass nichts gebucht wird. Wer ihn entfernt, stellt
     den alten Zustand wieder her: eine Oberflaeche, die eine Bestaetigung
     verspricht, die es nicht gibt. */
  .bk-klarstellung{font-size:12.5px;line-height:1.65;color:var(--muted);
    margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);}
  .bk-klarstellung a{color:var(--copper);font-weight:600;}
  .bk-steps{display:flex;gap:10px;align-items:center;margin-bottom:clamp(28px,4vw,40px);flex-wrap:wrap;list-style:none;}
  /* Fuer Bildschirmleser da, optisch nicht vorhanden — anders als .hp bleibt
     der Inhalt vorlesbar, er nimmt nur keinen Platz ein. */
  .nur-fuer-hilfsmittel{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
  .bk-step{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);transition:color .3s;}
  .bk-step .b{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:13px;transition:all .35s var(--ease);}
  .bk-step.on{color:#fff;}
  .bk-pane:focus{outline:none;}
  .bk-step.on .b{background:var(--copper);border-color:var(--copper);box-shadow:0 0 0 5px rgba(178,81,24,.25);}
  .bk-step.done .b{background:rgba(178,81,24,.35);border-color:transparent;}
  .bk-step+.bk-step::before{content:"";width:clamp(16px,3vw,44px);height:1px;background:rgba(255,255,255,.2);margin-right:10px;}
  .bk-pane{display:none;animation:paneIn .55s var(--ease-out);}
  .bk-pane.on{display:block;}
  @keyframes paneIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
  .bk-title{font-family:var(--display);text-transform:uppercase;font-weight:500;font-size:clamp(20px,2.4vw,28px);margin-bottom:20px;}
  .bk-title .script{font-size:1.2em;color:var(--copper-bright);}
  /* Service-Wahl */
  .sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  @media (max-width:1080px){.sgrid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.sgrid{grid-template-columns:1fr;}}
  .scard{position:relative;border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-mittel);padding:20px 18px;cursor:pointer;transition:all .35s var(--ease);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:8px;min-height:128px;}
  .scard:hover{border-color:rgba(212,105,42,.7);transform:translateY(-3px);background:rgba(178,81,24,.08);}
  .scard.sel{border-color:var(--copper-bright);background:rgba(178,81,24,.16);box-shadow:var(--glanz-2);}
  .scard .ic{font-family:var(--display);font-weight:300;font-size:13px;letter-spacing:.14em;color:var(--copper-bright);}
  .scard .nm{font-family:var(--display);text-transform:uppercase;font-weight:500;font-size:16.5px;line-height:1.2;}
  .scard .meta{font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:.04em;margin-top:auto;line-height:1.5;}
  .scard .tick{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--copper-bright);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4);transition:all .35s var(--ease-spring);}
  .scard.sel .tick{opacity:1;transform:none;}
  .scard .tick::before{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(0,-1px);}
  /* Datum & Zeit */
  .dt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);}
  @media (max-width:860px){.dt-grid{grid-template-columns:1fr;}}
  .dt-label{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px;}
  .days{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;}
  .day{border:1.5px solid rgba(255,255,255,.16);border-radius:var(--r-klein);padding:12px 8px;text-align:center;cursor:pointer;transition:all .3s var(--ease);background:rgba(255,255,255,.03);}
  .day:hover{border-color:rgba(212,105,42,.7);transform:translateY(-2px);}
  .day.sel{border-color:var(--copper-bright);background:rgba(178,81,24,.18);}
  .day .dw{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);}
  .day .dn{font-family:var(--display);font-size:22px;font-weight:500;margin-top:2px;}
  .day .dm{font-size:10.5px;color:rgba(255,255,255,.5);}
  .slots{display:flex;flex-wrap:wrap;gap:10px;}
  .slot{border:1.5px solid rgba(255,255,255,.16);border-radius:999px;padding:11px 18px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s var(--ease);background:rgba(255,255,255,.03);font-variant-numeric:tabular-nums;}
  .slot:hover{border-color:rgba(212,105,42,.7);transform:translateY(-2px);}
  .slot.sel{border-color:var(--copper-bright);background:var(--copper);}
  .slot-group{margin-bottom:18px;}
  /* Formular */
  .bk .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .bk .fgrid .full{grid-column:1/-1;}
  @media (max-width:560px){.bk .fgrid{grid-template-columns:1fr;}}
  .bk .field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
  .bk .field input,.bk .field textarea{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-klein);padding:12px 14px;outline:none;transition:border-color .3s,background .3s;}
  .bk .field input:focus,.bk .field textarea:focus{border-color:var(--copper);background:var(--white);}
  .bk .field textarea{min-height:96px;resize:vertical;}
  .bk-summary{background:rgba(178,81,24,.12);border:1px solid rgba(212,105,42,.35);border-radius:var(--r-mittel);padding:20px 22px;margin-bottom:22px;display:flex;flex-direction:column;gap:8px;}
  .bk-summary .r{display:flex;gap:14px;font-size:13.5px;}
  .bk-summary .r .k{width:90px;flex:none;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:2px;}
  .bk-summary .r .v{color:#fff;font-weight:600;}
  .bk-nav{display:flex;justify-content:space-between;gap:14px;margin-top:clamp(24px,3vw,36px);flex-wrap:wrap;}
  .bk-back{background:none;border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.75);}
  .bk-back:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06);}
  .bk-note{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.6;}
  /* Kompakter Buchungs-Hinweis auf der Startseite. */
  .bk-zentriert{text-align:center;padding-block:clamp(40px,6vw,72px);}
  .bk-lead{color:var(--muted);max-width:560px;margin:0 auto 22px;line-height:1.7;font-size:14.5px;}

  /* Success */
  .bk-success{text-align:center;padding:clamp(20px,4vw,40px) 0;}
  .bk-success .ok{width:86px;height:86px;border-radius:50%;background:var(--copper);margin:0 auto 26px;position:relative;animation:popIn .6s var(--ease-spring);}
  @keyframes popIn{from{transform:scale(.3);opacity:0;}to{transform:none;opacity:1;}}
  .bk-success .ok::before{content:"";position:absolute;left:29px;top:38px;width:26px;height:14px;border-left:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(-45deg);animation:tickDraw .5s var(--ease-out) .3s backwards;}
  @keyframes tickDraw{from{width:0;height:0;opacity:0;}to{width:26px;height:14px;opacity:1;}}
  .bk-success h3{font-family:var(--display);text-transform:uppercase;font-weight:500;font-size:clamp(24px,3vw,34px);}
  .bk-success p{color:var(--muted);max-width:520px;margin:14px auto 0;line-height:1.7;font-size:14.5px;}

  /* ── Standort ── */
  .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;}
  @media (max-width:960px){.loc-grid{grid-template-columns:1fr;}}
  .location h2{font-size:clamp(38px,5vw,66px);margin:22px 0 24px;}
  .location p{color:var(--muted);line-height:1.75;font-size:15.5px;}
  .loc-facts{margin-top:34px;border-top:1px solid var(--line);}
  .loc-facts .f{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px;transition:padding-left .3s var(--ease);}
  .loc-facts .f:hover{padding-left:8px;}
  .loc-facts .f .k{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);padding-top:3px;}
  .loc-facts .f .v{line-height:1.6;font-weight:500;}
  .loc-facts .f .v .soon{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);border:1px solid rgba(178,81,24,.4);border-radius:999px;padding:3px 10px;}
  @media (max-width:520px){.loc-facts .f{grid-template-columns:1fr;gap:4px;}}
  .loc-figure{position:relative;border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--hoehe-3);}
  .loc-figure img{aspect-ratio:4/4.6;object-fit:cover;width:100%;transition:transform 1.4s var(--ease-out);}
  .loc-figure:hover img{transform:scale(1.05);}
  .loc-figure .tag{position:absolute;top:22px;left:22px;background:var(--copper);color:#fff;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:10px 18px;border-radius:999px;box-shadow:var(--glanz-2);}

  /* ── Kontakt ── */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center;}
  @media (max-width:960px){.contact-grid{grid-template-columns:1fr;}}
  .contact h2{font-size:clamp(40px,5vw,68px);margin:22px 0 24px;}
  /* ⚠ Diese Regel steht NACH der Handy-Medienregel weiter oben und hat
     dieselbe Spezifitaet — sie gewinnt also durch ihre Stellung und liess
     «Wir sind fuer Sie da» auf dem Telefon bei 40px stehen, waehrend alle
     Geschwister bei 32px standen. Am 28.09.2026 bei 375px nachgemessen.
     Deshalb hier, direkt danach, noch einmal ausdruecklich. */
  @media (max-width:520px){.contact h2{font-size:clamp(28px,8.4vw,38px);}}
  .c-links{margin-top:30px;display:flex;flex-direction:column;}
  .c-links a{display:flex;align-items:baseline;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease);}
  .c-links a:hover{padding-left:10px;}
  .c-links a:hover .val{color:var(--copper);}
  /* Die Spalte traegt Standortnamen wie "Hauptstrasse", nicht nur "Telefon" —
     84px reichten dafuer nicht und der Text lief in die Nummer hinein. */
  .c-links .lbl{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);width:152px;flex:none;line-height:1.5;}
  @media (max-width:560px){
    .c-links a{flex-direction:column;align-items:flex-start;gap:4px;}
    .c-links .lbl{width:auto;}
  }
  .c-links .val{font-family:var(--display);font-size:clamp(19px,2vw,26px);font-weight:500;transition:color .3s var(--ease);}
  .contact-card{background:var(--ink-deep);color:#fff;border-radius:var(--r-gross);padding:clamp(30px,4vw,52px);position:relative;overflow:hidden;}
  .contact-card::before{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(212,105,42,.4),transparent 65%);}
  .contact-card .script{font-size:clamp(40px,5vw,60px);color:var(--copper-bright);display:block;line-height:1;}
  .contact-card h3{font-family:var(--display);text-transform:uppercase;font-weight:500;font-size:clamp(24px,2.6vw,34px);margin:6px 0 16px;}
  .contact-card p{color:rgba(255,255,255,.72);line-height:1.7;font-size:14.5px;max-width:380px;}
  .contact-card .btn{margin-top:28px;}

  /* ── Footer ── */
  footer{background:var(--ink-deep);color:rgba(255,255,255,.65);padding:64px 0 36px;border-top:1px solid rgba(255,255,255,.08);}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:52px;}
  @media (max-width:820px){.foot-grid{grid-template-columns:1fr;gap:32px;}}
  footer .brand .word{color:#fff;}
  footer .brand .word .v{color:var(--copper-bright);}
  footer .brand .loc{color:rgba(255,255,255,.5);}
  footer p{font-size:13px;line-height:1.75;margin-top:16px;max-width:340px;}
  /* Als h2 ausgezeichnet (Abschnitte des Footer-Bereichs), optisch unveraendert:
     als h4 erzeugten sie auf jeder Seite einen Spruung in der Gliederung. */
  footer .foot-titel{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-family:var(--body);}
  /* ⚠️ TIPPZIELE, GEMESSEN AM 09.10.2026. Die Fusszeilen-Links waren 17px
     hoch — in einer Liste, die man mit dem Daumen trifft, ist das zu wenig.
     Fuer Zeigerziele gelten 24x24 CSS-Pixel als Untergrenze (WCAG 2.5.8);
     ausgenommen sind nur Links MITTEN IM FLIESSTEXT, und das sind diese
     nicht. Die Hoehe kommt jetzt aus dem Innenabstand, nicht aus der
     Schriftgroesse — der Abstand zwischen den Eintraegen bleibt dadurch
     gleich, die treffbare Flaeche waechst. */
  footer ul{list-style:none;display:flex;flex-direction:column;gap:3px;font-size:13.5px;}
  footer ul a{display:inline-block;padding:4px 0;min-height:24px;transition:color .3s,padding-left .3s;}
  footer ul a:hover{color:var(--copper-bright);padding-left:6px;}
  .foot-base{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.66);}
  .foot-base a{display:inline-block;padding:4px 0;min-height:24px;}
  .foot-base a:hover{color:var(--copper-bright);}

  /* ── Sprachwahl in der Fusszeile ──────────────────────────────────────────
     Steht bewusst klein und unten: Wer Deutsch liest, soll sie nicht als
     Entscheidung vorgesetzt bekommen. Wer sie sucht, findet sie dort, wo
     Sprachwahlen ueblicherweise stehen. */
  .uebersetzer{position:relative;}
  .uebersetzer details{position:relative;}
  .uebersetzer summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
    padding:6px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
    color:rgba(255,255,255,.72);font-size:12px;transition:border-color .25s var(--ease),color .25s var(--ease);}
  .uebersetzer summary::-webkit-details-marker{display:none;}
  .uebersetzer summary:hover{border-color:rgba(255,255,255,.45);color:#fff;}
  .uebersetzer summary:focus-visible{outline:3px solid var(--copper-bright);outline-offset:2px;}
  .uebersetzer .globus svg{width:15px;height:15px;display:block;}
  /* Das Feld oeffnet NACH OBEN — in der Fusszeile ist unterhalb nichts mehr,
     ein nach unten klappendes Feld laege ausserhalb der Seite. */
  .uebersetzer .ue-feld{position:absolute;bottom:calc(100% + 10px);left:0;z-index:40;
    width:min(320px,calc(100vw - 48px));background:var(--paper);color:var(--ink);
    border:1px solid var(--line);border-radius:var(--r-mittel);
    box-shadow:var(--hoehe-3);padding:16px 16px 14px;}
  .uebersetzer .ue-hinweis{font-size:12px;line-height:1.55;color:var(--muted);margin:0 0 12px;}
  .uebersetzer .ue-hinweis b{color:var(--ink);}
  .uebersetzer .ue-wahl{display:flex;width:100%;align-items:baseline;gap:8px;
    background:none;border:0;border-radius:var(--r-klein);padding:9px 10px;
    font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;
    transition:background .2s var(--ease);}
  .uebersetzer .ue-wahl:hover{background:var(--copper-soft);}
  .uebersetzer .ue-wahl:focus-visible{outline:3px solid var(--copper);outline-offset:-3px;}
  .uebersetzer .ue-wahl .h{margin-left:auto;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--copper-auf-ton);}
  .uebersetzer .ue-fuss{font-size:11.5px;line-height:1.5;color:var(--muted);
    margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);}
  /* Googles eigenes Auswahlfeld bleibt verborgen — bedient wird ueber die
     Knoepfe oben, und die Leiste, die das Widget sonst oben einhaengt, wuerde
     das Seitengeruest verschieben. */
  /* ⚠️ NICHT display:none — ein ausgeblendetes Widget liefert kein
     funktionierendes Auswahlfeld, und genau ueber dieses Feld laeuft die
     Uebersetzung. Es wird deshalb aus dem Sichtfeld geschoben statt aus dem
     Satz genommen. */
  #gt-element{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
  body{top:0 !important;}
  .skiptranslate iframe{display:none !important;}
  @media (max-width:560px){
    .uebersetzer .ue-feld{left:auto;right:0;}
  }

  /* ══════════════════════ ERWEITERUNGEN GESAMTAUFTRITT ══════════════════════
     Additive Komponenten für Standorte, Team, Jobs, Ratgeber, Upload und
     Zahlungen. Keine Neudefinition der bestätigten Basis oben.            */

  /* ── Seiten-Hero (Unterseiten, kompakter als der Startseiten-Hero) ── */
  .phero{position:relative;min-height:clamp(560px,84svh,880px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
  .phero .bg{position:absolute;inset:0;}
  .phero .bg img{width:100%;height:106%;object-fit:cover;object-position:center 32%;transform:scale(1.06);animation:kenburns-ruhig 20s var(--ease-out) forwards;will-change:transform;}
  @keyframes kenburns-ruhig{to{transform:scale(1) translateY(-1%);}}
  html.static .phero .bg img{animation:none !important;transform:none !important;}
  @media (prefers-reduced-motion:reduce){.phero .bg img{animation:none;transform:none;}}
  .phero .bg::after{content:"";position:absolute;inset:0;background:
    radial-gradient(85% 70% at 14% 90%,rgba(178,81,24,.32),transparent 62%),
    linear-gradient(to top,rgba(20,12,7,.9) 0%,rgba(20,12,7,.46) 48%,rgba(20,12,7,.3) 100%);}
  .phero .inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(72px,10vh,120px);padding-top:clamp(150px,19vh,210px);}
  .phero .eyebrow{color:var(--copper-bright);}
  .phero .eyebrow::before{background:var(--copper-bright);}
  .phero .eyebrow{margin-top:18px;}
  /* ⚠️ DIE UNTERGRENZE WAR 42px — UND SCHNITT BUCHSTABEN AB.
     Auf einem 375er-Telefon ist die Textspalte 335px breit. «GRUNDVERSICHERUNG»
     braucht bei 42px genau 373px: 38px zu viel. Weil html und body
     overflow-x:clip tragen, gab es kein Scrollen — die Buchstaben waren
     schlicht weg. Am 23.09.2026 im Browser nachgemessen.
     34px ist die Untergrenze, bei der das laengste vorkommende Wort passt; die
     Silbentrennung faengt ab, was kuenftig laenger wird (das Dokument traegt
     lang=de, sonst trennt der Browser nicht). break-word ist die letzte
     Sicherung fuer Woerter ohne Trennstelle — lieber ein harter Umbruch als ein
     fehlender Buchstabe. */
  .phero h1{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(34px,7.8vw,110px);line-height:.98;letter-spacing:-.01em;margin-top:20px;
    hyphens:auto;overflow-wrap:break-word;}
  .phero h1 .script{font-size:1.1em;color:var(--copper-bright);}
  .phero .sub{max-width:660px;margin-top:24px;font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:rgba(255,255,255,.92);text-shadow:0 1px 4px rgba(20,12,7,.5);}
  .phero .cta-row{margin-top:30px;}

  /* ── Brotkrumen ── */
  /* Brotkrumen stehen auf Fotos — .6 Deckkraft war auf hellen Bildstellen
     kaum lesbar. Hoehere Deckkraft plus weicher Schatten traegt ueber jedem
     Motiv, ohne die Zurueckhaltung des Elements aufzugeben. */
  .crumbs{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);display:flex;flex-wrap:wrap;gap:8px;align-items:center;text-shadow:0 1px 3px rgba(20,12,7,.55);}
  .crumbs a{display:inline-block;padding:5px 0;min-height:24px;}
  .crumbs a:hover{color:#fff;}
  .crumbs .sep{opacity:.45;}

  /* ── Standort-Karten (Übersicht + Startseite) ── */
  .loc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);}
  @media (max-width:1000px){.loc-cards{grid-template-columns:1fr;max-width:620px;}}
  .loc-card{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--hoehe-1);transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
  .loc-card:hover{transform:translateY(-6px);box-shadow:var(--hoehe-3);}
  .loc-card .pic{position:relative;overflow:hidden;}
  .loc-card .pic img{aspect-ratio:4/2.7;object-fit:cover;width:100%;transition:transform 1.1s var(--ease-out);}
  .loc-card:hover .pic img{transform:scale(1.06);}
  .loc-card .badge{position:absolute;top:16px;left:16px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:999px;background:var(--copper);color:#fff;box-shadow:var(--glanz-1);}
  .loc-card .badge.soon{background:var(--ink-deep);}
  .loc-card .body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1;}
  .loc-card h3{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(20px,2.2vw,26px);line-height:1.1;}
  .loc-card .adr{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.6;}
  .loc-card .tel{font-family:var(--display);font-size:18px;font-weight:500;margin-top:14px;color:var(--copper);}
  /* Die Chips sind SCHWERPUNKTE, nicht das Angebot des Standorts. Ohne diese
     Ueberschrift las man sie als vollstaendige Liste und wunderte sich, warum
     die Standortseite darunter mehr auffuehrt. */
  .bildhinweis{margin-top:12px;font-size:12px;color:var(--leise,var(--muted));font-style:italic;}
  .loc-card .fokus-k{margin-top:18px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leise,var(--muted));}
  .loc-card .fokus{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
  .loc-card .fokus span{font-size:11px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--muted);}
  .loc-card .go{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
  .loc-card:hover .go{color:var(--copper);}
  .loc-card .go .arr{transition:transform .35s var(--ease);}
  .loc-card:hover .go .arr{transform:translateX(5px);}

  /* ── Team-Karten mit Monogramm-Fallback ── */
  .people{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,26px);}
  @media (max-width:1080px){.people{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:820px){.people{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.people{grid-template-columns:1fr;}}
  .pcard{background:var(--white);border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--hoehe-1);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
  .pcard:hover{transform:translateY(-5px);box-shadow:var(--hoehe-2);}
  .pcard .pic{position:relative;background:var(--paper-3);}
  .pcard .pic img{aspect-ratio:3/3.4;object-fit:cover;object-position:top;width:100%;transition:transform 1s var(--ease-out);}
  /* Zweitaufnahme: liegt deckungsgleich darueber und blendet ein. */
  .pcard .pic.hat-hover{position:relative;}
  .pcard .pic .zweit{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);}
  .pcard .pic .zweit img{height:100%;}
  .pcard:hover .pic .zweit,.pcard:focus-within .pic .zweit{opacity:1;}
  /* Ohne Zeigegeraet gibt es kein Darueberfahren — dort bleibt es beim ersten Bild. */
  @media (hover:none){.pcard .pic .zweit{display:none;}}
  .pcard:hover .pic img{transform:scale(1.05);}
  .pcard .mono{aspect-ratio:3/3.4;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--copper-soft),var(--paper-3));}
  .pcard .mono span{font-family:var(--display);font-weight:300;font-size:clamp(44px,5vw,64px);letter-spacing:.06em;margin-right:-.06em;color:var(--copper);}
  .pcard .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1;}
  .pcard .nm{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:17px;line-height:1.15;}
  .pcard .rl{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-auf-ton);}
  /* Standortzeile ist eine Zuordnung, keine Funktion — deshalb zurueckhaltender. */
  .pcard .rl.loc{color:var(--muted);font-weight:500;}
  .pcard .ml{font-size:12.5px;color:var(--muted);word-break:break-word;}
  .pcard .ml:hover{color:var(--copper);}
  .pcard dl{margin-top:8px;font-size:12px;line-height:1.6;color:var(--muted);}
  .pcard dt{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-top:8px;}

  /* ── Leistungs-Detailkarten ── */
  .svc-detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;padding-block:clamp(48px,6vw,86px);border-bottom:1px solid var(--line);}
  .svc-detail:last-of-type{border-bottom:none;}
  @media (max-width:900px){.svc-detail{grid-template-columns:1fr;gap:28px;}}
  .svc-detail:nth-of-type(even) .fig{order:-1;}
  @media (max-width:900px){.svc-detail:nth-of-type(even) .fig{order:0;}}
  .svc-detail .fig{border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--hoehe-2);}
  .svc-detail .fig img{aspect-ratio:4/3.1;object-fit:cover;width:100%;transition:transform 1.2s var(--ease-out);}
  .svc-detail .fig:hover img{transform:scale(1.05);}
  .svc-detail h2{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(28px,3.6vw,46px);line-height:1.04;margin:16px 0 18px;}
  .svc-detail p+p{margin-top:14px;}
  .svc-detail .lead{font-size:15px;}
  .svc-detail .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
  .svc-detail .tags span{font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 15px;color:var(--muted);}
  .note{background:var(--copper-soft);border:1px solid rgba(178,81,24,.2);border-radius:var(--r-mittel);padding:20px 24px;font-size:13.5px;line-height:1.7;color:#6E3A16;margin-top:22px;}
  .note b{color:#5A2F11;}

  /* ── Fakten-/Info-Raster (Standortseite) ── */
  .fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-mittel);overflow:hidden;}
  @media (max-width:820px){.fact-grid{grid-template-columns:1fr;}}
  .fact{background:var(--paper);padding:26px 24px;}
  .fact .k{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}
  .fact .v{font-family:var(--display);font-size:20px;font-weight:500;margin-top:10px;line-height:1.25;}
  .fact .v a:hover{color:var(--copper);}
  .fact .x{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.6;}

  /* ── Ratgeber ── */
  .art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,30px);}
  @media (max-width:1000px){.art-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:680px){.art-grid{grid-template-columns:1fr;}}
  .art{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--hoehe-1);transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
  .art:hover{transform:translateY(-6px);box-shadow:var(--hoehe-2);}
  .art .pic{overflow:hidden;}
  .art .pic img{aspect-ratio:4/2.5;object-fit:cover;width:100%;transition:transform 1.1s var(--ease-out);}
  .art:hover .pic img{transform:scale(1.06);}
  .art .body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1;}
  .art .kat{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);}
  .art h3{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:20px;line-height:1.15;margin:10px 0 12px;}
  .art p{font-size:13.5px;line-height:1.65;color:var(--muted);}
  .art .foot{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
  .art:hover .foot .go{color:var(--copper);}

  /* Artikel-Fliesstext */
  .prose{max-width:760px;}
  .prose h2{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(24px,3vw,36px);line-height:1.08;margin:clamp(40px,5vw,64px) 0 18px;}
  .prose p{font-size:16px;line-height:1.8;color:#4A4038;}
  .prose p+p{margin-top:16px;}
  .prose ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:11px;}
  /* ⚠️ DIESE REGEL TRIFFT AUCH DIE NUMMERNLISTEN — UND DAS MUSS SIE DUERFEN.
     In .prose stehen zwei ol: Inhaltsverzeichnis und Quellen. Beide haben eine
     eigene ::before-Regel mit einer Ziffer, aber mit DERSELBEN Spezifitaet —
     sie ueberschreiben nur, was sie selbst nennen. transform, width, height und
     border von hier schlugen durch: Die Ziffern standen um 45 Grad gedreht in
     einem Kasten mit zwei Raendern. So gemeldet am 23.09.2026: «die simbole
     sind komisch». Behoben wird das DORT, durch ausdrueckliches Zuruecksetzen.

     ⚠️ NICHT DURCH VERSCHAERFEN DIESES SELEKTORS. Der erste Versuch schrieb
     hier «.prose ul li» — das hebt die Spezifitaet von (0,1,1) auf (0,1,2) und
     schlaegt damit die Bausteinregeln «.keypoints li», «.toc li» und
     «.quellen li», die alle nur (0,1,1) haben. Folge: Die Kernpunkte-Box verlor
     ihre kupferbraune Schrift und ihren Einzug, Inhaltsverzeichnis und Quellen
     ihre Schriftgroesse. Eine Korrektur, die drei Bausteine still umfaerbt, ist
     keine. Die Spezifitaet hier bleibt, wie sie ist. */
  .prose li{font-size:15px;line-height:1.65;color:#4A4038;padding-left:26px;position:relative;}
  .prose li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:7px;border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg);}
  .keypoints{background:var(--copper-soft);border:1px solid rgba(178,81,24,.2);border-radius:var(--r-mittel);padding:26px 30px;margin-bottom:clamp(30px,4vw,44px);}
  .keypoints .k{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--copper-auf-ton);margin-bottom:14px;}
  .keypoints ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
  .keypoints li{font-size:14.5px;line-height:1.65;color:#6E3A16;padding-left:24px;position:relative;}
  .keypoints li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg);}
  .art-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:clamp(28px,4vw,42px);}

  /* ── FAQ (Akkordeon, ohne JS) ── */
  .faq{max-width:760px;margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line);}
  .faq details{border-bottom:1px solid var(--line);}
  .faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-family:var(--display);text-transform:uppercase;font-weight:500;font-size:clamp(16px,1.9vw,21px);line-height:1.25;transition:color .3s var(--ease);}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary:hover{color:var(--copper);}
  .faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);}
  .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
  .faq .a{padding:0 0 22px;font-size:14.5px;line-height:1.75;color:var(--muted);max-width:640px;}

  /* ── Redaktionelle Bausteine des Ratgebers ─────────────────────────────── */

  /* Kontextbezogene Verweise in den Ratgeber. */
  .verweise{border-left:3px solid var(--copper);background:var(--paper-2);border-radius:0 16px 16px 0;
    padding:22px 26px;margin:clamp(26px,3.5vw,38px) 0;}
  /* ⚠️ --copper-auf-ton, nicht --copper: Der Kasten liegt auf --paper-2, und
     dort erreicht --copper nur 4.46:1 — am 09.10.2026 am laufenden System
     nachgemessen, Soll sind 4.5. Dieselbe Rechnung steht oben bei den
     Farbmarken; sie gilt fuer jeden kleinen Text auf getoentem Grund. */
  .verweise .k{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--copper-auf-ton);margin-bottom:14px;}
  .verweise ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
  .verweise a{display:flex;flex-direction:column;gap:3px;transition:transform .3s var(--ease);}
  .verweise a:hover{transform:translateX(4px);}
  .verweise .t{font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(178,81,24,.35);}
  .verweise a:hover .t{color:var(--copper);}
  .verweise .m{font-size:11.5px;color:var(--muted);letter-spacing:.04em;}

  /* Inhaltsverzeichnis — erscheint erst ab vier Abschnitten. */
  .toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-mittel);padding:24px 28px;margin:clamp(28px,4vw,40px) 0;}
  .toc .k{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--copper-auf-ton);margin-bottom:14px;}
  .toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:9px;}
  .toc li{counter-increment:toc;font-size:14.5px;line-height:1.5;padding-left:30px;position:relative;}
  /* ⚠️ DIE ZURUECKSETZUNGEN SIND KEIN SCHMUCK — OHNE SIE STEHT DIE ZIFFER QUER.
     Das Inhaltsverzeichnis liegt in div.prose, und .prose li::before zeichnet
     dort ein Haekchen als gedrehtes Kaestchen: leerer Inhalt, 12x7px, zwei
     Raender, transform:rotate(-45deg). Diese Regel hier steht zwar spaeter im
     Blatt, hat aber DIESELBE Spezifitaet — sie ueberschreibt deshalb nur, was
     sie selbst nennt. Alles Uebrige schlaegt durch: Die Nummer wurde um 45 Grad
     gedreht in einem 12x7-Kasten mit zwei Raendern gerendert und sah aus wie ein
     verunglücktes Schriftzeichen. Genau so hat es der Betreiber am 23.09.2026
     gemeldet: «die simbole sind komisch».
     Wer hier etwas ergaenzt: Eine Regel, die eine allgemeinere ueberschreiben
     soll, muss JEDE Eigenschaft zuruecksetzen, die jene setzt. */
  .toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:1px;
    font-family:var(--display);font-size:12px;font-weight:500;color:var(--copper-auf-ton);letter-spacing:.08em;
    /* Zuruecksetzen bleibt stehen, auch wenn .prose jetzt auf ul eingeschraenkt ist:
       Es kostet nichts und faengt die naechste allgemeinere Regel ab. */
    transform:none;width:auto;height:auto;border:0;background:none;}
  .toc a{color:var(--ink);}
  .toc a:hover{color:var(--copper);text-decoration:underline;}

  /* Ankersprünge dürfen nicht unter dem festen Kopf landen. */
  .prose h2{scroll-margin-top:110px;}

  /* Pflichthinweis unter jedem Gesundheitsbeitrag. */
  /* ⚠️ DIE KLEINEN KAESTEN SIND SCHMALER ALS DER FLIESSTEXT — MIT ABSICHT.
     Sie stehen im selben 760px-Rahmen, haben aber eine kleinere Schrift, und
     damit passen mehr Zeichen in die Zeile. Gemessen am 23.09.2026: Fliesstext
     75 Zeichen, Hinweiskasten 92, Quellenliste 86. Ab etwa 80 Zeichen findet
     das Auge den Zeilenanfang nicht mehr zuverlaessig.
     Die Grenze steht in ch — das rechnet der Browser aus der jeweiligen
     Schrift und bleibt richtig, wenn sich die Groesse aendert. */
  .medizin-hinweis{max-width:72ch;margin-top:clamp(36px,5vw,52px);padding:18px 22px;border-left:3px solid var(--copper);
    background:var(--paper-2);font-size:13px;line-height:1.7;color:var(--muted);border-radius:0 12px 12px 0;}

  /* Quellenverzeichnis. */
  .quellen{margin-top:clamp(36px,5vw,52px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line);}
  .quellen h2{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(18px,2.2vw,24px);margin:0 0 20px;}
  .quellen ol{list-style:none;counter-reset:q;display:flex;flex-direction:column;gap:16px;}
  .quellen li{counter-increment:q;padding-left:34px;position:relative;font-size:14px;line-height:1.6;max-width:72ch;}
  .quellen li::before{content:"[" counter(q) "]";position:absolute;left:0;top:0;font-family:var(--display);font-size:12.5px;color:var(--copper);font-variant-numeric:tabular-nums;
    /* Wie beim Inhaltsverzeichnis: Die Quellennummern standen quer im Kasten. */
    transform:none;width:auto;height:auto;border:0;background:none;}
  .quellen .typ{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--copper);border:1px solid rgba(178,81,24,.35);border-radius:999px;padding:3px 9px;margin-right:9px;vertical-align:2px;}
  .quellen a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
  .quellen a:hover{color:var(--copper);}
  .quellen .meta{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;}
  .quellen .hinweis{margin-top:22px;font-size:12px;color:var(--muted);font-style:italic;}

  /* Wer den Beitrag verantwortet. */
  .autorbox{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;max-width:760px;
    margin-top:clamp(36px,5vw,52px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-mittel);padding:26px 30px;}
  .autorbox .mono{width:60px;height:60px;border-radius:50%;background:linear-gradient(150deg,var(--copper-soft),var(--paper-3));
    display:flex;align-items:center;justify-content:center;flex:none;}
  .autorbox .mono span{font-family:var(--display);font-size:21px;font-weight:500;color:var(--copper);letter-spacing:.06em;}
  .autorbox .nm{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:17px;}
  .autorbox .rl{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);margin-top:3px;}
  .autorbox p{font-size:13.5px;line-height:1.7;color:var(--muted);margin-top:12px;}
  .autorbox .stempel-zeile{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:11.5px;color:var(--muted);}
  .autorbox .stempel-zeile .geprueft{color:var(--copper);font-weight:600;}
  @media (max-width:560px){.autorbox{grid-template-columns:1fr;}}

  /* ── Jobs ── */
  .job{background:var(--white);border-radius:var(--r-gross);padding:clamp(28px,3.4vw,44px);box-shadow:var(--hoehe-1);}
  .job+.job{margin-top:clamp(20px,2.6vw,30px);}
  .job .top{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start;}
  .job h3{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(22px,2.8vw,32px);line-height:1.08;}
  .job .st{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;background:var(--copper);color:#fff;border-radius:999px;padding:8px 15px;white-space:nowrap;}
  .job .facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
  .job .facts span{font-size:11.5px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--muted);}
  .job .lead{margin-top:18px;font-size:15px;}
  .job-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,38px);margin-top:clamp(24px,3vw,34px);}
  /* Zweispaltige Variante fuer die Leistungs-Detailseiten. Als Klasse, nicht
     als Inline-Style: ein Inline-Style haette hoehere Spezifitaet als die
     Mobil-Regel unten und wuerde das Raster auf schmalen Schirmen stehen
     lassen — genau so entstand ein horizontaler Ueberlauf. */
  .job-cols.zwei{grid-template-columns:repeat(2,1fr);}
  @media (max-width:860px){.job-cols,.job-cols.zwei{grid-template-columns:1fr;}}
  .job-cols h4{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);margin-bottom:14px;}
  .job-cols ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
  .job-cols li{font-size:13.5px;line-height:1.6;color:var(--muted);padding-left:22px;position:relative;}
  .job-cols li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg);}
  .job .apply{margin-top:clamp(24px,3vw,32px);}

  /* ── Formulare auf hellem Grund (Bewerbung, Kontakt) ── */
  .lightform{background:var(--white);border-radius:var(--r-gross);padding:clamp(26px,3.4vw,44px);box-shadow:var(--hoehe-1);}
  .lightform .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .lightform .fgrid .full{grid-column:1/-1;}
  @media (max-width:620px){.lightform .fgrid{grid-template-columns:1fr;}}
  .lightform label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
  .lightform input,.lightform textarea,.lightform select{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-klein);padding:14px 16px;outline:none;transition:border-color .3s,background .3s;}
  /* ⚠ «.lightform input{outline:none}» hat dasselbe Gewicht wie die
     Fokusregel ganz oben und steht spaeter — sie gewinnt also. Bei Text-
     und Auswahlfeldern faengt die Regel darunter den Verlust mit einem
     kupfernen Rand auf (gemessen 5,14:1). Die ANKREUZFELDER haben keinen
     eigenen Rand: dort blieb nur ein Wechsel der Flaeche von #FAF7F3 auf
     #FFFFFF uebrig — 1,07:1, praktisch keine Fokusanzeige. Und es ist ein
     Pflichtfeld auf /kontakt und /jobs. */
  /* Dasselbe in der Buchung: «.bk .field input{outline:none}» schlug die globale
     Fokusregel und nahm der Gesundheitsdaten-Einwilligung den Rahmen. */
  .bk .field input:focus-visible,.bk .field textarea:focus-visible,.bk .field select:focus-visible{outline:3px solid var(--copper);outline-offset:3px;}
  .lightform input[type=checkbox]:focus-visible{
    outline:3px solid var(--copper);outline-offset:3px;}
  .lightform input:focus,.lightform textarea:focus,.lightform select:focus{border-color:var(--copper);background:var(--white);}
  .lightform textarea{min-height:120px;resize:vertical;}
  /* Honeypot. NICHT an einen Formular-Wrapper binden: Im Buchungswidget (.bk)
     griff die Regel nicht, das Feld «Website» stand dort sichtbar zwischen
     Upload und Einwilligung. Wer es ausfuellte, sah «Anfrage unterwegs!» —
     und die Anfrage wurde still verworfen. */
  /* Koederfeld gegen Maschinen.
     ⚠️ Es lag bis zum 16.09.2026 nur ausserhalb des Bildes und hiess «Website».
     Browser und Passwortverwaltungen fuellen so ein Feld bereitwillig aus —
     autocomplete=off wird dabei oft ignoriert. Wem das passierte, dessen
     Anfrage wurde still verworfen, WAEHREND ihm «Ihre Anfrage ist eingegangen»
     angezeigt wurde. display:none nehmen die automatischen Ausfueller nicht an,
     und der Fokus kommt dort auch nicht hin. */
  .hp{display:none !important;}

  /* ── Einwilligung / Consent ── */
  .consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin-top:20px;font-size:12.5px;line-height:1.65;color:var(--muted);}
  .consent input[type=checkbox]{width:20px;height:20px;accent-color:var(--copper);margin-top:1px;cursor:pointer;}
  .consent a{text-decoration:underline;}
  .consent a:hover{color:var(--copper);}
  .bk .consent{color:var(--muted);}
  .bk .consent a{color:var(--copper-auf-ton);text-decoration:underline;}

  /* ── Verordnungs-Upload (Dropzone) ── */
  .drop{border:1.5px dashed var(--line-stark,#B9AEA2);border-radius:var(--r-mittel);padding:24px 20px;text-align:center;cursor:pointer;transition:all .35s var(--ease);background:var(--paper);}
  .drop:hover,.drop.over{border-color:var(--copper-bright);background:rgba(178,81,24,.1);}
  .drop .ic{width:44px;height:44px;border-radius:50%;background:rgba(178,81,24,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-family:var(--display);font-size:20px;color:var(--copper-auf-ton);}
  .drop .t{font-size:13.5px;font-weight:600;color:var(--ink);}
  .drop .h{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.6;}
  .drop input[type=file]{position:absolute;left:-9999px;}
  /* Solange die Einwilligung fehlt, wird nichts uebertragen — und das ist sichtbar. */
  .drop.gesperrt{opacity:.5;cursor:not-allowed;border-style:dashed;}
  .drop.gesperrt:hover{border-color:var(--line-stark,#B9AEA2);background:var(--paper);}
  .consent-upload{margin:0 0 14px;}
  .drop-file{display:flex;align-items:center;gap:12px;justify-content:space-between;background:rgba(178,81,24,.16);border:1px solid rgba(212,105,42,.4);border-radius:var(--r-klein);padding:13px 16px;margin-top:12px;font-size:13px;}
  .drop-file .nm{color:var(--ink);font-weight:600;word-break:break-all;}
  .drop-file .rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:0 4px;}
  .drop-file .rm:hover{color:var(--copper-auf-ton);}
  /* ⚠ DIESER BAUSTEIN IST FUER DEN DUNKLEN VERORDNUNGS-UPLOAD GEBAUT.
     Auf /jobs steht derselbe Baustein im HELLEN Formular: das halbdurch-
     sichtige Kupfer mischt sich dort zu rgb(243,227,218), die weisse Schrift
     bleibt weiss. Am 30.09.2026 gemessen: 1,25:1 — die Bestaetigung nach dem
     Hochladen einer Bewerbung war unlesbar, und der Entfernen-Knopf war der
     EINZIGE Weg, ein versehentlich hochgeladenes Dossier wieder loszuwerden.
     Auf hellem Grund also dunkle Schrift. */
  .lightform .drop-file{background:rgba(178,81,24,.10);border-color:rgba(178,81,24,.30);}
  .lightform .drop-file .nm{color:var(--ink);}
  .lightform .drop-file .rm{color:var(--muted);}
  .lightform .drop-file .rm:hover{color:var(--copper);}
  .drop-err{color:#9B2C12;font-size:12.5px;margin-top:10px;line-height:1.6;}
  .privacy-badge{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:8px 15px;margin-bottom:16px;}
  .privacy-badge .lock{width:7px;height:7px;border-radius:50%;background:#6FCF97;}

  /* ── Karten fuer die private Terminanfrage ──
     Hiessen frueher .pay/.pay-grid, als hier eine Online-Zahlung stand. Der Name
     ist mitgewandert, damit der Zahlungsbezug nicht in der Gestaltung weiterlebt. */
  /* Auswahlzeilen der privaten Leistungen. Die ganze Zeile ist klickbar —
     auf dem Handy ein weit groesseres Ziel als ein Knopf am Kartenende. */
  .awahl-liste{max-width:840px;border-top:1px solid var(--line);}
  .awahl{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
    gap:clamp(12px,2vw,26px);padding:clamp(16px,2.2vw,22px) clamp(4px,1vw,10px);
    border-bottom:1px solid var(--line);background:var(--white);
    transition:background .3s var(--ease),padding-left .3s var(--ease);}
  .awahl:hover{background:var(--paper-2);padding-left:clamp(10px,1.6vw,20px);}
  .awahl .dauer{font-family:var(--display);text-transform:uppercase;font-weight:600;
    font-size:clamp(16px,1.7vw,20px);white-space:nowrap;}
  .awahl .art{font-size:12.5px;color:var(--muted);}
  .awahl .preis{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,24px);
    color:var(--copper);white-space:nowrap;font-variant-numeric:tabular-nums;}
  .awahl .go{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--line);
    border-radius:999px;padding:11px 18px;white-space:nowrap;transition:all .3s var(--ease);}
  .awahl:hover .go{background:var(--copper);border-color:var(--copper);color:#fff;}
  .awahl:hover .go .arr{transform:translateX(4px);}
  .awahl .go .arr{transition:transform .3s var(--ease);}
  @media (max-width:720px){
    .awahl{grid-template-columns:1fr auto;gap:4px 14px;padding:18px 2px;}
    .awahl .dauer{grid-column:1;}
    .awahl .preis{grid-column:2;grid-row:1;}
    .awahl .art{grid-column:1/-1;grid-row:2;}
    .awahl .go{grid-column:1/-1;grid-row:3;justify-content:center;margin-top:12px;}
  }

  /* ── Statusmeldungen ── */
  .formmsg{margin-top:18px;font-size:13.5px;line-height:1.65;border-radius:var(--r-klein);padding:14px 16px;display:none;}
  .formmsg.on{display:block;}
  .formmsg.err{background:rgba(200,40,20,.1);border:1px solid rgba(200,40,20,.3);color:#9B2C12;}
  .formmsg.ok{background:rgba(60,150,90,.1);border:1px solid rgba(60,150,90,.3);color:#26663F;}
  /* Der Ausweg per E-Mail wird angeboten, nicht unterstellt. */
  .formmsg .als-mail{background:none;border:none;padding:0;font:inherit;color:inherit;
    text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
  .formmsg .als-mail:hover{opacity:.75;}

  /* Einspaltige Kartenlisten mittig setzen — sonst kleben sie auf Tablet
     linksbuendig im breiten Wrap. Additiv, die Basisregeln bleiben unberuehrt. */
  @media (max-width:1000px){
    .loc-cards{margin-inline:auto;}
    .price-grid{margin-inline:auto;}
  }

  /* ── Abstandshilfen ───────────────────────────────────────────────────
     Ersetzen die frueheren Einzelfall-Margins im Markup (margin-top:22px,
     26px, 34px …). Vier Stufen genuegen fuer alles. */
  .mt-1{margin-top:var(--r-4);}
  .mt-2{margin-top:var(--r-5);}
  .mt-3{margin-top:var(--r-6);}
  .mt-4{margin-top:var(--raum-block);}
  .breite-text{max-width:820px;}
  .breite-schmal{max-width:760px;}

  /* ── Aktive Navigation ── */
  nav.main a.here::after{transform:scaleX(1);transform-origin:left;}

  /* ── Rechtstexte ── */
  .legal{max-width:820px;}
  .legal h2{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(20px,2.4vw,28px);margin:clamp(34px,4vw,48px) 0 14px;}
  .legal h3{font-family:var(--display);text-transform:uppercase;font-weight:500;font-size:17px;margin:26px 0 10px;}
  .legal p,.legal li{font-size:14.5px;line-height:1.8;color:#4A4038;}
  .legal p+p{margin-top:12px;}
  .legal ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:9px;}
  .legal li{padding-left:24px;position:relative;}
  .legal li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:6px;border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg);}
  .legal a{text-decoration:underline;}
  .legal a:hover{color:var(--copper);}

  /* ── 404 ── */
  .nf{min-height:70svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:120px;}
  .nf .big{font-family:var(--display);font-weight:200;font-size:clamp(90px,18vw,200px);line-height:1;color:var(--copper);}
  .nf h1{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(24px,3.4vw,40px);margin:10px 0 16px;}
  .nf p{color:var(--muted);max-width:460px;line-height:1.7;}
  .nf .btn{margin-top:30px;}

  .grafik{margin:clamp(28px,4vw,44px) 0;}
  .grafik figcaption{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6;}
  .grafik figcaption .q{display:block;font-size:11px;letter-spacing:.06em;opacity:.85;margin-top:3px;}

  /* ⚠️ DIE LISTEN DER GRAFIKEN GEHOEREN NICHT ZUM FLIESSTEXT.
     Die Grafiken stehen in div.prose, und .prose li setzt dort einen Einzug und
     zeichnet ueber .prose li::before ein Haekchen als gedrehtes Kaestchen. Ohne
     diese Zeilen hinge an jedem Schritt und jeder Merkwortzeile ein Haken, und
     der Einzug von 26px wuerde die Gitter verschieben.
     Dieselbe Falle hat am 23.09.2026 schon die Nummern im Inhaltsverzeichnis
     verdreht — siehe design.mjs. Zurueckgesetzt wird hier, weil GRAFIK_CSS
     nach der Haupt-CSS ausgeliefert wird. */
  .grafik li{padding-left:0;font-size:inherit;line-height:inherit;color:inherit;}
  .grafik li::before{content:none;display:none;}

  /* ── Fuenf Schritte ──
     Nebeneinander, solange Platz ist; darunter gestapelt. Die Karten wachsen
     mit ihrem Text, statt ihn herauslaufen zu lassen. */
  .gr-schritte{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0;padding:0;}
  .gr-schritte li{position:relative;display:flex;flex-direction:column;gap:3px;
    /* ⚠ Flaechen kommen aus der Leiter in :root, nicht aus eigenen Werten.
       Das ausgelieferte Stylesheet ist SCHRIFTEN_CSS + CSS + GRAFIK_CSS — wer
       nur design.mjs prueft, sieht diese Datei nicht und haelt die Leiter
       faelschlich fuer vollstaendig. Genau das ist am 28.09.2026 passiert.
       Das 8px-Plaettchen und die 2px-Strichkappe bleiben: das sind
       Bedienelement-Groessen, keine Flaechen. */
    background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-klein);
    padding:26px 14px 16px;}
  .gr-schritte li.letzte{background:var(--copper-soft);border-color:var(--copper);}
  .gr-nr{position:absolute;top:-15px;left:12px;width:30px;height:30px;border-radius:50%;
    background:var(--copper);color:#fff;display:grid;place-items:center;
    font-family:var(--display);font-size:14px;font-weight:600;}
  .gr-schritte .gr-t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;}
  .gr-schritte .gr-d{font-size:12px;color:var(--muted);line-height:1.45;}
  /* Der Pfeil zwischen zwei Karten — als Winkel aus zwei Raendern, nicht als
     Schriftzeichen. Ein Pfeilzeichen fehlt in unseren Schriften und wuerde in
     einer fremden gezeichnet. */
  .gr-schritte li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;
    width:8px;height:8px;border-top:2px solid var(--copper);border-right:2px solid var(--copper);
    transform:translateY(-50%) rotate(45deg);}
  @media (max-width:760px){
    .gr-schritte{grid-template-columns:1fr;gap:20px;}
    .gr-schritte li{padding:14px 16px 14px 52px;}
    .gr-nr{top:50%;left:12px;transform:translateY(-50%);}
    /* Gestapelt zeigt der Winkel nach unten. */
    .gr-schritte li:not(:last-child)::after{right:auto;left:26px;top:auto;bottom:-15px;
      transform:rotate(135deg);}
  }

  /* ── Merkwort in zwei Spalten ── */
  .gr-zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);}
  .gr-zwei > .gr-spalte + .gr-spalte{border-left:1.5px solid var(--line);padding-left:clamp(20px,3vw,34px);}
  @media (max-width:640px){
    .gr-zwei{grid-template-columns:1fr;}
    .gr-zwei > .gr-spalte + .gr-spalte{border-left:0;padding-left:0;
      border-top:1.5px solid var(--line);padding-top:24px;}
  }
  .gr-kopf{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.06em;
    color:var(--copper);margin:0;}
  .gr-spalte.dunkel .gr-kopf{color:var(--ink-deep);}
  .gr-unter{font-size:12px;color:var(--muted);margin:2px 0 16px;}
  .gr-spalte ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;}
  .gr-spalte li{display:grid;grid-template-columns:30px 1fr;grid-template-areas:"b t" "b d";
    column-gap:12px;align-items:start;}
  .gr-buchstabe{grid-area:b;width:28px;height:28px;border-radius:8px;background:var(--copper);
    color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:14px;font-weight:600;}
  .gr-spalte.dunkel .gr-buchstabe{background:var(--ink-deep);}
  .gr-spalte .gr-t{grid-area:t;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;}
  .gr-spalte .gr-d{grid-area:d;font-size:12px;color:var(--muted);line-height:1.45;}

  /* ── Ja/Nein-Liste ── */
  .gr-deckung{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;}
  .gr-deckung li{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-radius:var(--r-klein);}
  .gr-deckung li.ja{background:var(--copper-soft);}
  .gr-deckung li.nein{background:var(--paper-2);}
  .gr-deckung .gr-t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5;}
  .gr-deckung li.nein .gr-t{font-weight:500;color:var(--muted);}
  .gr-zeichen{flex:none;width:16px;height:16px;margin-top:2px;position:relative;}
  .gr-deckung li.ja .gr-zeichen::before{content:"";position:absolute;left:1px;top:3px;
    width:12px;height:6px;border-left:2.4px solid var(--copper);border-bottom:2.4px solid var(--copper);
    transform:rotate(-45deg);}
  .gr-deckung li.nein .gr-zeichen::before,
  .gr-deckung li.nein .gr-zeichen::after{content:"";position:absolute;left:0;top:7px;
    width:15px;height:2.2px;background:var(--muted);border-radius:2px;}
  .gr-deckung li.nein .gr-zeichen::before{transform:rotate(45deg);}
  .gr-deckung li.nein .gr-zeichen::after{transform:rotate(-45deg);}