/* ===== site.css ===== */
/* Aus den abgenommenen Prototypen extrahiert, Zeichen für Zeichen.
   NICHT von Hand ändern: die Prototypen sind die Quelle der Wahrheit.
   Erzeugt von tools/prototyp-auslesen.php am 31.08.2026. */

/* ══════════════════════════════════════════════════════════════
   HOME4MOTION Kids — Stylesheet
   Unverändert aus dem freigegebenen Prototyp übernommen.
   Einzige Abweichung: die Hero-Fotos sind entkoppelt und kommen
   über die CSS-Variable --banner-image aus der Datenbank.
   ══════════════════════════════════════════════════════════════ */


:root{
  --gold-main:#EBC35F;--gold-light:#FBF4D8;--gold-mid:#F9E9B4;--gold-dark:#C49A28;--gold-deeptext:#7A5800;
  --green-main:#5C8A3C;--green-light:#EAF3DE;--green-mid:#C8E0B0;--green-dark:#3A5A22;--green-deepest:#2A3A1A;--green-text:#1E3A10;
  --peach-main:#F8DCC4;--peach-light:#FDF5EF;--peach-dark:#C47A3A;
  --cream-bg:#F9F6F0;--cream-border:#EDE7DC;
  --text-primary:#2C2C2C;--text-mid:#555;--text-muted:#888;--white:#FFF;
  --radius-btn:24px;--max:1320px;--header-h:66px;
  /* Hub-Seite: Kids-Basispalette Gruen/Gold (neutral) */
  --cat-main:#5C8A3C;--cat-dark:#3A5A22;--cat-light:#EAF3DE;--cat-mid:#C8E0B0;--cat-deeptext:#1E3A10;
  /* Therapie-Farben (Wayfinding-Legende dieser Seite) */
  --t-physio:#91ABDA;
--t-physio-d:#4A6FA5;--t-physio-l:#E6EBF2;
  /* Rückfallfarbe für eine Therapie, die keiner bekannten Fachrichtung
     zugeordnet werden kann — sonst stünde die Marke ohne Farbe da. */
  --t-cat:var(--cat-main);--t-cat-d:var(--cat-dark);--t-cat-l:var(--cat-light);
  --t-ergo:#597C57;--t-ergo-d:#3E5A3C;--t-ergo-l:#E2EDE8;
  --t-logo:#F3A69C;--t-logo-d:#B05A4E;--t-logo-l:#FCE2E3;
  --t-neuro:#958FB7;--t-neuro-d:#665E8A;--t-neuro-l:#EAE5F0;
  --t-intensiv:#C47A3A;--t-intensiv-d:#9A5623;--t-intensiv-l:#FDF5EF;
  --t-apart:#6587B7;--t-apart-d:#3F5E8C;--t-apart-l:#E7EDF6;
  --t-preise:#C49A28;--t-preise-d:#7A5800;--t-preise-l:#FBF4D8;
  --t-ablauf:#5C8A3C;--t-ablauf-d:#3A5A22;--t-ablauf-l:#EAF3DE;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Source Sans 3',sans-serif;background:var(--cream-bg);color:var(--text-primary);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Playfair Display',serif;color:var(--green-deepest);line-height:1.2;margin:0}
h1{font-weight:700;font-size:clamp(30px,4.5vw,46px)}
h2{font-weight:600;font-size:clamp(26px,3.4vw,34px)}
h3{font-weight:600;font-size:20px}
a{color:inherit;text-decoration:none}
/* height:auto ist hier entscheidend: die Attribute width/height am <img>
   stehen gegen Layoutverschiebungen (CLS) im Markup, wirken im Browser
   aber als Praesentationshinweis auf die CSS-Eigenschaft height. Ohne
   height:auto zieht ein Bild, dem das Stylesheet nur eine Breite gibt,
   die Hoehe aus dem Attribut — und wird verzerrt. */
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px;position:relative}
/* Die kleine Zeile über einer Abschnittsüberschrift. 8 Pixel waren zu wenig:
   bei gesperrter Schrift in Grossbuchstaben klebte sie an der Überschrift.
   Gilt für alle Abschnitte auf allen Seiten. */
.label{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cat-dark);margin-bottom:14px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-btn);font-family:'Source Sans 3',sans-serif;font-weight:700;cursor:pointer;min-height:54px;padding:14px 28px;font-size:15px;border:none;transition:all .25s ease}
.btn-gold{background:var(--gold-main);color:var(--green-deepest)}
.btn-gold:hover{background:var(--gold-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 8px 20px rgba(196,154,40,.35)}
.btn-green{background:var(--green-main);color:var(--white)}
.btn-green:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(58,90,34,.35)}
.btn-outline-light{background:transparent;border:2px solid rgba(255,255,255,.35);color:var(--white)}
.btn-outline-light:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.btn-ghost{background:var(--white);border:1px solid var(--cream-border);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--green-main);color:var(--green-main);transform:translateY(-2px);box-shadow:0 6px 16px rgba(92,138,60,.12)}
.btn-cta-lg{min-width:280px;padding:16px 48px;font-size:16px;min-height:58px}

/* ===== HEADER ===== */
.site-header{position:sticky;top:0;z-index:200;background:linear-gradient(120deg,#F5D876 0%,var(--gold-main) 55%,#F0CC5E 100%);box-shadow:0 2px 18px rgba(122,88,0,.16);height:var(--header-h)}
/* **Die Kopfzeile darf breiter sein als der Inhalt darunter.**
   Sie war auf dieselben 1320 Pixel begrenzt wie die Textspalten. Auf einem
   grossen Bildschirm klebten die Menuepunkte deshalb aneinander, waehrend links
   und rechts vom Band Platz frei blieb — es sah eng aus, obwohl der Bildschirm
   weit ist.

   Fuer eine Zeile mit kurzen Namen gilt die Lesbarkeitsgrenze nicht, die den
   Fliesstext begrenzt: hier springt das Auge von Wort zu Wort, nicht von
   Zeilenende zu Zeilenanfang. */
.header-inner{max-width:var(--max);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center}
.nav-logo{display:flex;align-items:center;gap:6px;text-decoration:none;flex-shrink:0;margin-right:10px}
.nav-logo img{height:32px;width:auto}

/* Desktop nav */
/* **Der uebrige Platz wird verteilt, nicht angehaeuft.**
   Vorher standen die Eintraege links gedraengt und der Rest sammelte sich als
   Luecke vor dem Sprachschalter. `space-between` gibt jedem Zwischenraum
   denselben Anteil — auf breiten Bildschirmen atmet die Zeile, auf schmalen
   ruecken die Eintraege wieder zusammen. Der Mindestabstand bleibt erhalten,
   damit sich zwei Namen nie beruehren. */
/* Links buendig statt ueber die ganze Breite verteilt.
   `space-between` liess jeden Zwischenraum gleich gross werden — auf breiten
   Bildschirmen wirkte die Zeile dadurch auseinandergezogen, mit auffaellig
   grossen Luecken zwischen den Punkten. Jetzt stehen die Eintraege dicht
   beieinander; wie der Rest der Zeile mit der Sprachwahl umgeht, steht in
   der Notiz direkt darunter. Die gewonnene Dichte erlaubt eine etwas
   groessere Schrift, siehe .nav-link unten. */
/* Nicht mehr wachsend: bei `flex:1` zog `.nav-main` die gesamte Restbreite an
   sich, blieb aber inhaltlich links buendig (siehe oben) — dazwischen, vor
   der Sprachwahl, blieb ein leerer Streifen stehen. Jetzt nimmt das Menue nur
   so viel Platz wie sein Inhalt braucht; `.nav-right` ruecht mit festem
   Abstand direkt an, statt mit `margin-left:auto` an den rechten Rand
   gezogen zu werden. Der ungenutzte Rest landet aussen rechts vom Knopf,
   wo er als Rand wirkt statt als Luecke mitten in der Zeile. */
.nav-main{display:none;align-items:center;flex:0 1 auto;
  justify-content:flex-start;column-gap:1px;padding-right:8px}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:3px;padding:7px 8px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--green-deepest);text-decoration:none;cursor:pointer;white-space:nowrap;border:none;background:none;font-family:inherit;transition:color .15s,background .15s}
.nav-link:hover,.nav-item:hover>.nav-link{background:rgba(42,58,26,.08)}
.nav-link .ico{font-size:13.5px}
.nav-arrow{font-size:8px;opacity:.45;transition:transform .2s;flex-shrink:0}
.nav-item:hover>.nav-link .nav-arrow{transform:rotate(180deg)}

/* Dropdown */
.dropdown{position:absolute;top:calc(100% + 8px);left:0;background:var(--white);border-radius:14px;box-shadow:0 12px 40px rgba(42,58,26,.16),0 2px 8px rgba(42,58,26,.08);border:1px solid var(--cream-border);opacity:0;pointer-events:none;transform:translateY(-5px);transition:opacity .18s,transform .18s;min-width:250px;overflow:hidden;z-index:300}
.nav-item:hover>.dropdown{opacity:1;pointer-events:all;transform:translateY(0)}
.dd-section{padding:6px}
.dd-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;text-decoration:none;transition:background .12s}
.dd-link:hover{background:var(--green-light)}
.dd-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dd-name{font-size:13.5px;font-weight:500;color:var(--green-deepest);display:block;line-height:1.25}
.dropdown.wide{min-width:440px}

/* ═══════════════════════════════════════════════════════════════
   Ausklappmenü: Brücke über den Abstand
   Zwischen Menüpunkt und Klappfeld liegen 8 Pixel. Führt man die Maus
   nach unten, verliert sie dort kurz das Ziel und das Feld schließt sich.
   Ein unsichtbarer Streifen über dem Klappfeld überbrückt den Abstand.
   ═══════════════════════════════════════════════════════════════ */
/* Die Brücke gehört an den MENÜPUNKT, nicht an das Klappfeld.
   Das Klappfeld hat im geschlossenen Zustand pointer-events:none —
   eine Brücke darin verschwindet also genau dann, wenn sie gebraucht wird.
   Dieses Pseudo-Element ist Teil von .nav-item und hält :hover aufrecht,
   während die Maus die 8 Pixel Abstand überquert. */
.nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.dropdown:hover{opacity:1;pointer-events:all;transform:translateY(0)}
/* Mit der Tastatur erreichbar */
.nav-item:focus-within>.dropdown{opacity:1;pointer-events:all;transform:translateY(0)}

.dd-grid.dd-diag{grid-template-columns:1fr}

.dd-grid{display:grid;grid-template-columns:1fr 1fr;padding:6px}

/* Right nav */
.nav-right{display:none;align-items:center;gap:4px;margin-left:20px;flex-shrink:0}
.nav-divider{width:1px;height:22px;background:rgba(42,58,26,.15);margin:0 6px;flex-shrink:0}
.nav-right-link{padding:7px 8px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--green-deepest);white-space:nowrap;transition:background .15s;opacity:.7}
.nav-right-link:hover{background:rgba(42,58,26,.08);opacity:1}
.btn-header{background:var(--green-deepest);color:var(--gold-main);padding:9px 18px;border-radius:var(--radius-btn);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .2s;border:none;cursor:pointer}
.btn-header:hover{background:var(--green-dark);box-shadow:0 4px 12px rgba(42,58,26,.25)}

/* Hamburger */
/* Der Burger ist die Vorgabe, nicht die Ausnahme: er ist immer da und wird nur
   dort ausgeblendet, wo die volle Leiste passt (siehe die Regeln je Sprache
   weiter unten). Vorher war es umgekehrt — zwischen 960 Pixeln und der Grenze
   für die Leiste war **keine Navigation sichtbar**, weder Leiste noch Burger. */
.hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border-radius:8px;margin-left:auto;background:rgba(42,58,26,.08);border:1px solid rgba(42,58,26,.12);z-index:210}
.ham-bar{width:20px;height:2px;background:var(--green-deepest);border-radius:2px;transition:all .25s}
.hamburger.open .ham-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open .ham-bar:nth-child(2){opacity:0}
.hamburger.open .ham-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Die Menüleiste am Schreibtisch braucht mehr Platz als 960px.
   Gemessen bei 1024px Bildschirmbreite: der rechte Block mit Sprachwahl und
   Terminschaltfläche endete bei 1263px, die Seite bekam eine waagrechte
   Rollleiste. Zwischen 960 und 1200 zeigte die Seite also eine Leiste, die
   nicht hineinpasst — dort ist das Hamburger-Menü die richtige Wahl.
   Die Umschaltbreite steht bei 1280px: bei 1200px endete der rechte Block
   noch bei 1263px, erst ab 1280 passt alles nachweislich hinein. */
/* Die volle Menüleiste erst ab 1440 Pixel.
   Bei 1280 passte sie auf Deutsch knapp; auf Englisch sind die Beschriftungen
   länger („Speech and language therapy", „Information session") und die Zeile
   wurde breiter als das Fenster — die ganze Seite liess sich dann waagrecht
   schieben. Unterhalb der Grenze übernimmt das Menü hinter dem Burger, das
   dieselben Punkte enthält. */
/* Die volle Menüleiste erst, wenn sie wirklich passt.
   Gemessen: die deutsche Zeile braucht 1399 Pixel, die englische 1597 — die
   Beschriftungen sind länger („Speech and language therapy", „Information
   session"). Bei der alten Grenze von 1280 wurde die Zeile breiter als das
   Fenster und die ganze Seite liess sich waagrecht schieben.

   Die Grenze hängt deshalb an der Sprache: `html[lang]` trägt sie. Unterhalb
   übernimmt das Menü hinter dem Burger, das dieselben Punkte enthält. */
/* `lang` steht als „de-AT", nicht als „de" — daher der Präfix-Vergleich mit
   `^=`. Mein erster Entwurf verglich auf Gleichheit; damit traf keine der beiden
   Regeln, und bei 1450 Pixel erschien weder die Leiste noch der Burger. */
@media(min-width:1420px){
  html[lang^="de"] .nav-main, html[lang^="de"] .nav-right{display:flex}
  html[lang^="de"] .hamburger{display:none}
}
/* Gemessen: die englische Leiste passt ab 1760 Pixeln. Das ist breit — die
   Beschriftungen sind lang („Speech and language therapy"). Kürzere englische
   Menütitel wären die bessere Lösung; bis dahin übernimmt unterhalb dieser
   Grenze der Burger, der dieselben Punkte enthält. */
@media(min-width:1760px){
  html[lang^="en"] .nav-main, html[lang^="en"] .nav-right{display:flex}
  html[lang^="en"] .hamburger{display:none}
}

/* Mobile slide-in menu */
.mobile-menu{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:var(--green-deepest);z-index:190;overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.mobile-menu.open{transform:translateX(0)}
.mob-cta-strip{background:var(--gold-main);padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.mob-cta-strip a{color:var(--green-deepest);font-weight:700;font-size:.92rem;text-decoration:none}
.mob-cta-strip span{color:rgba(42,58,26,.6);font-size:.8rem}
.mob-inner{padding:8px 8px 40px}
.mob-group{border-bottom:1px solid rgba(255,255,255,.08)}
.mob-group-trigger{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;color:rgba(255,255,255,.9);font-size:.95rem;font-weight:600;user-select:none}
.mob-group-trigger:hover{background:rgba(255,255,255,.04)}

/* Die ganze Zeile klappt die Unterpunkte auf. Ein Link auf der Zeile hatte den
   Nachteil, dass jede Berührung sofort die Bereichsseite öffnete — die
   Unterpunkte bekam man nie zu sehen. Die Bereichsseite steht deshalb als
   erster Eintrag im Untermenü.
   role="button" und tabindex im Markup, damit die Zeile auch mit der Tastatur
   und von einem Screenreader als Schaltfläche behandelt wird. */
.mob-group-trigger{min-height:48px}
.mob-group-trigger:focus-visible{outline:2px solid var(--gold-main); outline-offset:-3px}

/* „Übersicht: …" — der Weg zur Bereichsseite. Etwas abgesetzt von den
   eigentlichen Unterpunkten, damit man sieht, dass es eine Ebene höher liegt. */
.mob-sub-uebersicht{font-weight:700}
.mob-sub-uebersicht + .mob-sub-link{margin-top:2px}

.mob-inner > .mob-cta-strip{margin-top:18px; border-radius:14px}
.m-arrow{font-size:11px;color:rgba(255,255,255,.4);transition:transform .22s;flex-shrink:0}
.mob-group-trigger.open .m-arrow{transform:rotate(180deg)}
.mob-submenu{display:none;padding:2px 0 10px}
.mob-submenu.open{display:block}
.mob-sub-link{display:flex;align-items:center;gap:10px;padding:9px 16px 9px 32px;text-decoration:none;color:rgba(255,255,255,.65);font-size:.9rem;transition:background .12s,color .12s}
.mob-sub-link:hover{background:rgba(255,255,255,.05);color:var(--white)}
.mob-sub-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.mob-direct-link{display:flex;align-items:center;gap:10px;padding:14px 16px;text-decoration:none;color:rgba(255,255,255,.85);font-size:.95rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08)}
.mob-direct-link:hover{background:rgba(255,255,255,.04)}
.mob-footer{padding:16px;display:flex;flex-wrap:wrap;gap:8px}
.mob-footer a{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:6px 14px;font-size:.8rem;color:rgba(255,255,255,.55);text-decoration:none}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;padding:44px 0 44px;background:linear-gradient(135deg,var(--green-dark) 0%,#2A3A1A 68%)}
/* Foto nur, wenn der Banner-Block eines liefert */
/* Abdunkelung rechts zurueckgenommen: links muss der Text lesbar
   bleiben, rechts soll das Foto durchkommen. */
.hero.has-image{background-image:linear-gradient(100deg,rgba(26,38,14,.66) 0%,rgba(28,41,15,.60) 62%,rgba(30,44,16,.22) 84%,rgba(30,44,16,.08) 100%),var(--banner-image);background-size:cover;background-position:center right}
.hero-inner{max-width:1200px;width:100%;position:relative;z-index:1}
.hero-badge{display:inline-block;background:rgba(42,58,26,.55);color:#DCEBC8;font-size:14px;font-weight:600;padding:7px 18px;border-radius:var(--radius-btn);margin-bottom:16px;border:1px solid rgba(92,138,60,.5)}
.hero h1{color:var(--white);max-width:980px;text-shadow:0 2px 14px rgba(12,20,6,.55)}
.hero-lede{color:var(--white);font-size:15px;margin-top:12px;line-height:1.6;max-width:760px;text-shadow:0 1px 10px rgba(12,20,6,.6)}
.hero-actions{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap}
.deco{position:absolute;pointer-events:none;z-index:0;opacity:.4}

/* BREADCRUMB */
.crumb-bar{background:var(--white);border-bottom:1px solid var(--cream-border)}
.crumb{display:flex;align-items:center;gap:1px;flex-wrap:wrap;padding:9px 0;font-size:13px}
.crumb a{display:inline-flex;align-items:center;gap:6px;color:var(--text-mid);font-weight:500;padding:5px 11px;border-radius:16px;transition:all .18s;white-space:nowrap}
.crumb a:hover{background:var(--cat-light);color:var(--cat-deeptext)}
.crumb-sep{color:var(--text-muted);opacity:.45;font-size:13px;padding:0 2px;flex-shrink:0;user-select:none}
.crumb-current{display:inline-flex;align-items:center;gap:6px;background:var(--cat-light);color:var(--cat-deeptext);font-weight:700;padding:5px 13px;border-radius:16px;border:1px solid var(--cat-mid);white-space:nowrap}

/* SECTIONS */
.section{padding:48px 0}
.section-white{background:var(--white)}
.section-cream{background:var(--cream-bg)}
.section-catbg{background:var(--cat-light)}
.section-head{margin-bottom:32px}
/* 18px statt 8px: der Einleitungstext klebte an der Überschrift. Derselbe
   Wert wie in der allgemeinen Regel am Ende der Datei — hier nötig, weil
   diese Regel mit ihrer Klasse spezifischer ist und sonst gewinnt. */
.section-head p{color:var(--text-mid);margin-top:18px}

/* ANSATZ */
.ansatz-grid{display:grid;grid-template-columns:.45fr 1.55fr;gap:40px;align-items:start}
.ansatz-photo-wrap{position:relative;max-width:230px}
.ansatz-photo-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:48% 52% 45% 55%/50% 42% 58% 50%;border:4px solid rgba(200,224,176,.4)}
.ansatz-photo-wrap::before{content:'';position:absolute;width:70px;height:70px;border-radius:50%;background:var(--cat-main);bottom:-12px;right:-8px;z-index:-1;opacity:.55}
.ansatz-photo-wrap::after{content:'';position:absolute;width:40px;height:40px;border-radius:50%;background:var(--gold-mid);top:-8px;left:-8px;z-index:-1;opacity:.7}
/* Abstand zwischen Überschrift und Text im Abschnitt „Unser Ansatz".
   Die Überschrift ist Playfair mit enger Zeilenhöhe, der Text darunter
   Fließsatz — ohne eigenen Abstand kleben beide aneinander. Der Wert steht
   hier und nicht am Element, damit Angebots- und Therapieseiten gleich
   aussehen: beide benutzen .ansatz-text. */
.ansatz-grid h2{margin-bottom:0}
.ansatz-text{margin-top:18px;line-height:1.7}
.ansatz-text p{margin:0 0 .85em}
.ansatz-text p:last-child{margin-bottom:0}
.ansatz-text ul,.ansatz-text ol{margin:0 0 .85em;padding-left:1.4em}
.ansatz-text li{margin-bottom:.3em}

.ansatz-quote{border-left:4px solid var(--cat-main);padding:14px 0 14px 18px;margin-top:20px;font-family:'Playfair Display',serif;font-style:italic;font-size:18px;color:var(--green-deepest);line-height:1.5}
.checklist{list-style:none;margin-top:18px}
.checklist li{display:flex;gap:8px;align-items:flex-start;padding:3px 0;color:var(--text-mid);font-size:14px}
.checklist li b{color:var(--green-deepest);font-weight:600}
.checklist li::before{content:'●';color:var(--cat-main);font-size:8px;margin-top:9px;flex-shrink:0}

/* CARDS (icon cards) */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:24px 22px;transition:all .3s;position:relative;overflow:hidden}
.card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--cat-main);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(42,58,26,.1);border-color:var(--cat-light)}
.card:hover::after{transform:scaleX(1)}
.card-icon{font-size:26px;margin-bottom:12px;display:block}
.card h3{font-family:'Source Sans 3',sans-serif;font-size:17px;font-weight:700;color:var(--green-deepest)}
.card p{color:var(--text-mid);font-size:14px;margin-top:6px;line-height:1.55}

/* SUBTHERAPY PHOTO CARDS */
.subtherapy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.subtherapy-card{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column}
.has-pet{position:relative;overflow:visible!important}
.pet{position:absolute;pointer-events:none;z-index:3}
.subtherapy-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(42,58,26,.12);border-color:var(--cat-main)}
.subtherapy-photo{aspect-ratio:4/3;overflow:hidden}
.subtherapy-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.subtherapy-card:hover .subtherapy-photo img{transform:scale(1.06)}
.subtherapy-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.subtherapy-body h3{font-size:19px;margin-bottom:8px}
.subtherapy-body p{color:var(--text-mid);font-size:14px;line-height:1.55;margin-bottom:14px;flex:1}
.subtherapy-link{font-size:14px;font-weight:700;color:var(--cat-dark);display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
.subtherapy-card:hover .subtherapy-link{gap:9px}

/* CTA */
.cta-band{padding:48px 0;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:var(--white);margin-bottom:6px;position:relative;z-index:1}
.cta-band p{color:rgba(255,255,255,.7);font-size:17px;margin-bottom:24px;position:relative;z-index:1}
.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cta-sub{font-size:14px;margin-top:14px;color:rgba(255,255,255,.4);position:relative;z-index:1}

/* WARUM / FEATURES */
.warum-intro-grid{display:grid;grid-template-columns:.45fr 1.55fr;gap:40px;align-items:start;margin-bottom:32px}
.warum-photo-wrap{position:relative;max-width:230px}
.warum-photo-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:45% 55% 50% 50%/55% 45% 55% 45%;border:4px solid rgba(235,195,95,.35)}
.stat-box{position:absolute;bottom:-14px;right:-14px;background:var(--green-deepest);color:var(--white);border-radius:14px;padding:10px 16px;text-align:center;box-shadow:0 10px 24px rgba(42,58,26,.3);min-width:88px}
.stat-box b{display:block;font-family:'Playfair Display',serif;font-size:24px;color:var(--gold-main);line-height:1.1}
.stat-box span{font-size:10px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.05em}
.warum-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start;margin-bottom:36px}
.warum-grid h3{font-size:18px;margin-top:18px;margin-bottom:6px;color:var(--cat-deeptext)}
.warum-grid p{color:var(--text-mid);font-size:14px}
.warum-showcase{background:linear-gradient(135deg,var(--cat-light) 0%,var(--white) 55%);border:2px solid var(--cat-main);border-radius:22px;padding:44px;box-shadow:0 16px 44px rgba(58,90,34,.18);position:relative;overflow:visible}
.warum-badge{position:absolute;top:-15px;left:36px;background:var(--cat-main);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;box-shadow:0 4px 10px rgba(58,90,34,.35)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-item{text-align:center;background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:24px 18px;transition:all .3s}
.feature-item:hover{transform:translateY(-5px);box-shadow:0 10px 24px rgba(42,58,26,.08)}
.feature-icon{width:52px;height:52px;border-radius:50%;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 14px}
.feature-item h3{font-size:15.5px;margin-bottom:6px}
.feature-item p{color:var(--text-mid);font-size:14px;line-height:1.6}

/* INTENSIVTHERAPIE TEASER */
.intensiv-band{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 55%);border:2px solid var(--gold-main);border-radius:22px;padding:40px;overflow:visible;position:relative;box-shadow:0 16px 44px rgba(196,154,40,.18)}
.intensiv-badge{position:absolute;top:-15px;left:36px;background:var(--gold-main);color:var(--green-deepest);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;box-shadow:0 4px 10px rgba(196,154,40,.35)}
.intensiv-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 12px 28px rgba(42,58,26,.15)}
.intensiv-photo img{width:100%;height:100%;object-fit:cover}
.intensiv-band h2{margin-bottom:12px}
.intensiv-band p{color:var(--text-mid);margin-bottom:18px}

/* DIAGNOSEN */
.diag-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.diag-card{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:22px 18px;text-align:center;transition:all .3s}
.diag-card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(42,58,26,.1);border-color:var(--cat-main)}
.diag-icon{font-size:30px;margin-bottom:10px}
.diag-card h3{font-size:15px;margin-bottom:4px;line-height:1.3}
.diag-card p{color:var(--text-muted);font-size:12.5px;line-height:1.5}

/* PRICE CARDS */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price-card{background:var(--white);border:2px solid var(--cream-border);border-radius:18px;padding:30px 26px;transition:all .3s;display:flex;flex-direction:column;position:relative}
.price-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(42,58,26,.1)}
.price-card.featured{border-color:var(--gold-main)}
.price-card.featured::before{content:'Beliebt';position:absolute;top:-13px;left:26px;background:var(--gold-main);color:var(--green-deepest);font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;letter-spacing:.05em;text-transform:uppercase}
.price-card h3{font-size:19px;margin-bottom:6px}
.price-value{font-family:'Playfair Display',serif;font-size:28px;color:var(--cat-dark);font-weight:700;margin-bottom:16px}
.price-value span{font-size:14px;color:var(--text-muted);font-weight:400;font-family:'Source Sans 3',sans-serif}
.price-features{list-style:none;flex:1;margin-bottom:22px}
.price-features li{display:flex;gap:8px;padding:6px 0;font-size:14px;color:var(--text-mid);align-items:flex-start;line-height:1.5}

/* TESTIMONIALS */
.testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.testimonial-card{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:26px 24px}
.testimonial-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.testimonial-photo{width:48px;height:48px;border-radius:50%;object-fit:cover}
.testimonial-name{font-weight:700;font-size:15px;color:var(--green-deepest)}
.testimonial-stars{color:var(--gold-dark);font-size:13px}
.testimonial-text{color:var(--text-mid);font-size:14px;line-height:1.55}


/* FOOTER — #3A5A22 */
.footer{background:var(--green-dark);color:rgba(255,255,255,.65);padding:28px 0 0}
.footer-grid{display:flex;flex-wrap:wrap;gap:28px;padding-bottom:20px}
/* Die erste Spalte traegt Logo, Kontakt, zwei Adressen und die sozialen
   Netzwerke — mit 250px brachen Telefon und E-Mail auf zwei Zeilen um.
   340px reichen fuer beide auf einer Zeile. */
.footer-brand{flex:0 0 340px;max-width:100%}
.footer-links{flex:1;min-width:280px;column-count:3;column-gap:24px}
/* `padding-bottom` statt `margin-bottom`: in einem Spaltensatz wird der
   Aussenabstand der vorigen Gruppe an den KOPF der nächsten Spalte
   mitgenommen — „recoveriX" stand dadurch tiefer als „Physiotherapie" und
   „Ergotherapie" daneben. Ein Innenabstand wandert nicht mit.
   Gemeldet von Alex am 29.09.2026. */
.footer-group{break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:0;padding-bottom:14px}
.footer-group > h5:first-child{margin-top:0}
.footer h5{color:var(--white);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
/* Die Überschrift ist ein Verweis auf die Fachrichtung — sie muss die
   Auszeichnung der Überschrift behalten, nicht die der Listenverweise. */
.footer h5 a{color:var(--white);font-size:inherit;font-weight:inherit;letter-spacing:inherit;
  text-transform:inherit;padding:0;display:inline;text-decoration:none}
.footer h5 a:hover{color:var(--gold-main);text-decoration:underline}
/* Diese Regel gilt nur für die Verweislisten in den Spalten — deshalb
   .footer-group a und nicht .footer a.

   Vorher stand hier .footer a mit einer Kette aus :not(), um die Kästen
   auszunehmen. Das hat funktioniert, aber die Spezifität auf 0,4,1 getrieben
   und damit .footer-bottom a{display:inline} überstimmt: Impressum und
   Datenschutz standen plötzlich auf eigenen Zeilen. Eine engere Regel ist
   hier richtig, nicht eine mit mehr Ausnahmen. */
.footer-group a{font-size:12.5px;color:rgba(255,255,255,.52);display:block;padding:2px 0;line-height:1.45;
  text-decoration:none;transition:color .15s}
.footer-group a:hover{color:var(--gold-main)}
.footer a:hover{color:var(--gold-main)}
.footer-brand-name{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:var(--white);margin-bottom:3px;display:flex;align-items:center;gap:8px}
.footer-brand-name span{color:var(--gold-main)}
.footer-brand-name img{height:34px;width:auto}
/* Kontakt in einer Zeile — mit nowrap, damit die E-Mail nicht abrutscht.
   Reicht der Platz auf schmalen Geraeten wirklich nicht, bricht die Zeile
   weiter unten im Mobilteil bewusst um. */
.footer-kontakt{display:flex;align-items:center;gap:9px;font-size:11.5px;margin:8px 0;white-space:nowrap}
.footer-kontakt a{display:inline;padding:0}
.footer-kontakt .trenner{opacity:.3}

/* Zwei gleich breite Adresskaesten. Vorher waren sie inline-block mit
   width:auto und damit unterschiedlich gross — das liess Graz und Wien
   ungleich wichtig erscheinen. */
.footer-locs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0;
  width:100%}
/* Gleiche Höhe, auch wenn eine Anschrift kürzer ist: der Kasten füllt seine
   Zelle aus. Sonst standen Graz und Wien unterschiedlich hoch, und das Band
   darunter fluchtete mit keinem von beiden. */
.footer .footer-loc{height:100%}
/* Mehr Luft im Kasten: mit 7px/10px klebte die Anschrift am Rahmen. */
.footer .footer-loc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:13px 15px;font-size:11px;line-height:1.5;
  text-align:left;text-decoration:none;color:rgba(255,255,255,.6);transition:all .18s}
.footer-loc:hover{background:rgba(255,255,255,.09);border-color:var(--gold-main);color:rgba(255,255,255,.8)}
.footer-loc strong{color:var(--gold-main);font-size:9px;letter-spacing:.04em;
  text-transform:uppercase;display:block;margin-bottom:2px}

/* Sozialsymbole: von 28px auf 34px und deutlich weniger rund (8px statt
   Kreis) — als Quadrat mit Radius sind sie auf dem dunklen Grund besser
   auszumachen. */
/* Sozialsymbole, zweiter Versuch.
   Gold gefüllt mit dunklem Zeichen war auf dem dunkelgrünen Grund vier
   goldene Klötze — auffällig, aber die Zeichen selbst kaum zu erkennen.
   Jetzt umgekehrt: heller Rahmen, weisses Zeichen, gefüllt erst beim
   Überfahren. Das Zeichen trägt den Kontrast, nicht die Fläche. */
.footer-social{display:flex;gap:9px;margin-top:14px}
.footer-social a{width:38px;height:38px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;padding:0;transition:all .18s}
.footer-social a svg{width:19px;height:19px}
.footer-social a:hover{background:var(--gold-main);border-color:var(--gold-main);
  color:var(--green-deepest);transform:translateY(-2px)}

/* Mini-Banner auf die Erwachsenen-Website */
/* Steht jetzt in der ersten Spalte unter den Adressen. Innenabstand wie
   bei den Adresskästen, damit die drei Kästen eine Reihe bilden. */
.footer .footer-erwachsene{display:flex;align-items:center;gap:12px;margin:10px 0 0;
  padding:13px 15px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
  text-decoration:none;transition:all .18s}
.footer-erwachsene:hover{background:rgba(255,255,255,.09);border-color:var(--gold-main)}
.footer-erwachsene .fe-sym{font-size:20px;flex-shrink:0}
.footer-erwachsene .fe-text{flex:1;min-width:0}
.footer-erwachsene .fe-text b{display:block;color:var(--white);font-size:13px;font-weight:600}
.footer-erwachsene .fe-text small{display:block;color:rgba(255,255,255,.5);font-size:11.5px;
  line-height:1.45;margin-top:2px}
.footer-erwachsene .fe-pfeil{color:var(--gold-main);font-size:17px;flex-shrink:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:10px 0;display:flex;justify-content:space-between;font-size:11px;flex-wrap:wrap;gap:4px}
/* Copyright links, Rechtstexte rechts — beides in einer Zeile.
   Die Verweise müssen inline bleiben, sonst bricht jeder auf eine eigene
   Zeile um. */
.footer-bottom{align-items:center}
.footer-bottom > span{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-bottom a{color:rgba(255,255,255,.4);display:inline;padding:0;font-size:11px;
  text-decoration:underline;transition:color .15s}
.footer-bottom a:hover{color:var(--gold-main)}

/* RESPONSIVE */
@media(max-width:960px){
  .nav-main,.nav-right{display:none!important}
  .hamburger{display:flex!important}
  .hero{padding:56px 0 44px}
  .ansatz-grid,.warum-intro-grid{grid-template-columns:1fr}
  .card-grid,.subtherapy-grid{grid-template-columns:repeat(2,1fr)}
  .warum-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .intensiv-band{grid-template-columns:1fr}
  .diag-grid{grid-template-columns:repeat(3,1fr)}
  .price-grid{grid-template-columns:1fr}
  .testimonial-grid,  .footer-grid{flex-direction:column}
  .footer-brand{flex:0 0 auto;width:100%}
  .footer-links{column-count:2;width:100%}
}
@media(max-width:560px){.card-grid,.subtherapy-grid,.diag-grid,.feature-grid{grid-template-columns:1fr}.wrap{padding:0 20px}.cta-buttons{flex-direction:column;align-items:center}.btn-cta-lg{min-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== INTENSIV-PAGE COMPONENTS ===== */
.note-box{background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 60%);border:2px solid var(--gold-main);border-radius:18px;padding:28px 30px;margin-top:26px;position:relative;box-shadow:0 12px 32px rgba(196,154,40,.14);overflow:visible}
.note-badge{position:absolute;top:-14px;left:28px;background:var(--gold-main);color:var(--green-deepest);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 15px;border-radius:20px}
.note-box h3{font-size:20px;margin-bottom:6px}
.note-box p{color:var(--text-mid);font-size:14px}
.apart-band{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;background:linear-gradient(135deg,var(--cat-light) 0%,var(--white) 55%);border:2px solid var(--cat-main);border-radius:22px;padding:40px;position:relative;overflow:visible;box-shadow:0 16px 44px rgba(196,122,58,.18)}
.apart-badge{position:absolute;top:-15px;right:36px;background:var(--cat-main);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;box-shadow:0 4px 10px rgba(196,122,58,.35)}
.apart-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 12px 28px rgba(42,58,26,.15)}
.apart-photo img{width:100%;height:100%;object-fit:cover}
.apart-band p{color:var(--text-mid);font-size:14px;margin-bottom:14px}
@media(max-width:960px){.apart-band{grid-template-columns:1fr}}

/* ===== HUB PAGE COMPONENTS ===== */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.stat-cell{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:20px 18px;text-align:center;transition:all .3s}
.stat-cell:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(42,58,26,.08);border-color:var(--cat-main)}
.stat-cell b{display:block;font-family:'Playfair Display',serif;font-size:30px;color:var(--cat-dark);line-height:1.1}
.stat-cell span{font-size:12.5px;color:var(--text-mid);display:block;margin-top:4px;line-height:1.4}
.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.trust-chip{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--cream-border);border-radius:20px;padding:7px 14px;font-size:13px;color:var(--text-mid);font-weight:600}

/* filter toolbar */
.filter-bar{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:26px;padding:20px 22px;background:var(--white);border:1px solid var(--cream-border);border-radius:16px}
.filter-group{display:flex;flex-direction:column;gap:8px}
.filter-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--cream-bg);border:1.5px solid var(--cream-border);border-radius:20px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--text-mid);cursor:pointer;font-family:inherit;transition:all .2s;min-height:40px}
.chip:hover{border-color:var(--cat-main);color:var(--cat-dark)}
.chip.active{background:var(--green-deepest);border-color:var(--green-deepest);color:var(--gold-main)}
.filter-count{font-size:13px;color:var(--text-muted)}

/* therapy hub cards */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hub-card{background:var(--white);border:1px solid var(--cream-border);border-top:5px solid var(--tc,var(--cat-main));border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;transition:all .3s;position:relative}
.hub-card.is-hidden{display:none}
.hub-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(42,58,26,.12);border-color:var(--tc,var(--cat-main))}
.hub-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.hub-icon{width:52px;height:52px;border-radius:14px;background:var(--tcl,var(--cat-light));display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0}
.loc-badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:var(--tcl,var(--cat-light));color:var(--tcd,var(--cat-dark));white-space:nowrap;flex-shrink:0}
.hub-card h3{font-size:20px;margin-bottom:6px}
.hub-card>p{color:var(--text-mid);font-size:14px;line-height:1.6;margin-bottom:14px}
.hub-meta{font-size:12px;color:var(--text-muted);margin-bottom:10px;display:flex;flex-wrap:wrap;gap:4px 12px}
.hub-meta b{color:var(--green-deepest);font-weight:600}
.prod-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;flex:1;align-content:flex-start}
.prod-chip{font-size:12px;background:var(--cream-bg);border:1px solid var(--cream-border);border-radius:14px;padding:4px 10px;color:var(--text-mid);transition:all .18s}
.prod-chip:hover{background:var(--tcl,var(--cat-light));border-color:var(--tc,var(--cat-main));color:var(--tcd,var(--cat-dark))}
.hub-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:var(--radius-btn);font-weight:700;font-size:14px;background:var(--tcl,var(--cat-light));color:var(--tcd,var(--cat-dark));border:1.5px solid var(--tc,var(--cat-main));transition:all .22s}
.hub-card:hover .hub-cta{background:var(--tc,var(--cat-main));color:var(--white)}
.no-result{display:none;text-align:center;padding:36px 20px;color:var(--text-mid);font-size:14px;background:var(--white);border:1px dashed var(--cream-border);border-radius:16px}
.no-result.show{display:block}

/* comparison table */
.cmp-wrap{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:13.5px}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--cream-border);vertical-align:top}
table.cmp thead th{background:var(--cat-light);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cat-deeptext);white-space:nowrap}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp tbody tr{transition:background .18s}
table.cmp tbody tr:hover{background:var(--cream-bg)}
table.cmp td:first-child{font-weight:700;color:var(--green-deepest);white-space:nowrap}
.cmp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
table.cmp td{color:var(--text-mid)}

/* combine showcase */
.combine-box{background:linear-gradient(135deg,var(--cat-light) 0%,var(--white) 55%);border:2px solid var(--cat-main);border-radius:22px;padding:40px;box-shadow:0 16px 44px rgba(58,90,34,.16);position:relative;overflow:visible}
.combine-badge{position:absolute;top:-15px;left:36px;background:var(--cat-main);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;box-shadow:0 4px 10px rgba(58,90,34,.3)}
.combine-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.flow-step{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:18px 16px;position:relative}
.flow-num{width:32px;height:32px;border-radius:50%;background:var(--cat-main);color:var(--white);font-family:'Playfair Display',serif;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.flow-step h4{font-size:14.5px;font-weight:700;color:var(--green-deepest);margin-bottom:4px;font-family:'Source Sans 3',sans-serif}
.flow-step p{font-size:13px;color:var(--text-mid);line-height:1.55}

@media(max-width:960px){
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .combine-flow{grid-template-columns:repeat(2,1fr)}
  .filter-bar{flex-direction:column;align-items:stretch}
}
@media(max-width:560px){.hub-grid{grid-template-columns:1fr}.stat-strip{grid-template-columns:1fr 1fr}.combine-flow{grid-template-columns:1fr}}

/* ===== ANGEBOT-HUB ===== */
.nav-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.nav-card{background:var(--white);border:1px solid var(--cream-border);border-top:5px solid var(--tc);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;transition:all .3s}
.nav-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(42,58,26,.12);border-color:var(--tc)}
.nav-card-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.nav-card-ic{width:54px;height:54px;border-radius:14px;background:var(--tcl);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.nav-card h3{font-size:21px;margin:0}
.nav-card>p{color:var(--text-mid);font-size:14px;line-height:1.6;flex:1;margin-bottom:18px}
.nav-card-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:var(--radius-btn);font-weight:700;font-size:14.5px;background:var(--tcl);color:var(--tcd);border:1.5px solid var(--tc);transition:all .22s}
.nav-card:hover .nav-card-link{background:var(--tc);color:var(--white)}

/* informational tiles (these three have no target page) */
.info-band{margin-top:30px;padding-top:26px;border-top:1px solid var(--cream-border)}
.info-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-tile{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:20px 18px;transition:all .28s}
.info-tile:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(42,58,26,.09);border-color:var(--cat-main)}
.info-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--cat-dark);margin-top:10px;transition:gap .2s}
.info-tile:hover .info-link{gap:10px}
.info-tile .ic{width:44px;height:44px;border-radius:12px;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:20px}
.info-tile b{display:block;font-size:15.5px;color:var(--green-deepest);margin-bottom:4px;font-family:'Playfair Display',serif;font-weight:600}
.info-tile span{font-size:13.5px;color:var(--text-mid);line-height:1.6;display:block}

@media(max-width:960px){.nav-cards{grid-template-columns:1fr}.info-tiles{grid-template-columns:1fr}}


/* ===== STATS ===== */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.stat-cell{background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.18);border-radius:14px;padding:16px 18px}
.stat-cell b{display:block;font-family:'Playfair Display',serif;font-size:28px;color:var(--gold-main);line-height:1.05}
.stat-cell span{font-size:12.5px;color:rgba(255,255,255,.72);display:block;margin-top:3px;line-height:1.4}

/* ===== LOCATION CARDS ===== */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.loc-card{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;overflow:hidden;transition:all .3s;position:relative}
.loc-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(42,58,26,.12);border-color:var(--cat-main)}
.loc-photo{aspect-ratio:16/10;overflow:hidden}
.loc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.loc-card:hover .loc-photo img{transform:scale(1.05)}
.loc-body{padding:24px 24px 26px}
.loc-body h3{font-size:21px;margin-bottom:8px}
.loc-body p{color:var(--text-mid);font-size:14px;line-height:1.6}






/* location cards */
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.location-card{position:relative;background:var(--white);border:1px solid var(--cream-border);
               border-top:5px solid var(--cat-main);border-radius:20px;padding:28px 26px;transition:all .3s;
               display:flex;flex-direction:column}
.location-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px -10px var(--cat-main);border-color:var(--cat-main)}
.loc-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.loc-pin{width:52px;height:52px;border-radius:15px;background:var(--cat-light);display:flex;align-items:center;
         justify-content:center;font-size:24px;flex-shrink:0}
.location-card h3{font-size:21px;margin:0;line-height:1.25}
.loc-city{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cat-dark);margin-top:3px}
.location-row{display:grid;grid-template-columns:26px 84px 1fr;gap:10px;align-items:baseline;padding:10px 0;
              border-bottom:1px solid var(--cream-border);font-size:14px;color:var(--text-mid)}
.location-row:last-of-type{border-bottom:none}
.location-row i{font-style:normal;font-size:15px;line-height:1.4}
.location-row b{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.location-row a{color:var(--cat-dark);font-weight:700}
.loc-hint{margin-top:14px;background:var(--gold-light);border:1px solid var(--gold-main);border-radius:12px;
          padding:11px 14px;font-size:13px;color:var(--gold-deeptext);display:flex;gap:8px;align-items:flex-start}
.location-card .btn{margin-top:16px;width:100%}

/* ===== HOME ===== */
.hero-inner{max-width:var(--max)}
/* Kennzahlen-Band: schmaler Streifen, sitzt UNTER dem Foto und überdeckt es nicht.
   Bewusst zurückhaltend, damit der Termin-Button im Hero die Hauptrolle behält. */
.stats-band{background:var(--cream-bg);padding:0 0 26px}
.stats-card{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--cream-border);
  border:1px solid var(--cream-border);border-radius:14px;overflow:hidden;
  margin-top:-20px;position:relative;z-index:5;box-shadow:0 8px 22px -12px rgba(42,58,26,.18)}
.stat{background:var(--white);padding:14px 16px;text-align:center}
.stat b{display:block;font-family:'Playfair Display',serif;font-size:23px;line-height:1.1;
  color:var(--gold-deeptext);letter-spacing:-.3px}
.stat span{display:block;margin-top:3px;font-size:11.5px;color:var(--text-muted);line-height:1.4}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:16px}
.trust-row span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-mid)}
.trust-row i{font-style:normal;font-size:13px;line-height:1}

@media(max-width:900px){
  .stats-card{grid-template-columns:repeat(2,1fr);margin-top:-16px}
  .stat b{font-size:21px}
  .trust-row{gap:8px 18px}
}
@media(max-width:520px){
  .stats-card{grid-template-columns:1fr;margin-top:-12px;border-radius:12px}
  .stat{padding:11px 16px;display:flex;align-items:baseline;gap:10px;text-align:left}
  .stat b{font-size:19px;flex-shrink:0;min-width:78px}
  .stat span{margin-top:0}

  /*
   * Die drei Zusagen auf ZWEI Zeilen, mittig.
   *
   * Vorher standen sie untereinander und linksbündig — drei Zeilen für drei
   * kurze Sätze, und unter dem mittigen Kennzahlenband sah der linke Rand aus
   * wie ein Versehen. Jetzt: die erste Angabe („Ersttermin kostenlos …") nimmt
   * die ganze Breite, die beiden kurzen teilen sich die zweite Zeile.
   * Gewünscht von Alex am 29.09.2026.
   */
  .trust-row{display:flex; flex-wrap:wrap; flex-direction:row;
    justify-content:center; align-items:center; gap:6px 14px; text-align:center}
  .trust-row span{font-size:11.5px; justify-content:center}
  .trust-row span:first-child{flex:0 0 100%}
}

/* diagnosis cards */
.dg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.dg{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;overflow:hidden;
    display:flex;flex-direction:column;transition:all .3s;position:relative}
.dg:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(42,58,26,.13);border-color:var(--cat-main)}
.dg-fig{aspect-ratio:1/1;background:linear-gradient(135deg,var(--cat-light),var(--gold-light));
        display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.dg-fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dg:hover .dg-fig img{transform:scale(1.06)}
.dg-body{padding:14px 16px 16px;display:flex;align-items:center;gap:8px;justify-content:space-between}
.dg-body b{font-size:14px;color:var(--green-deepest);line-height:1.3;font-weight:700}
.dg-arrow{color:var(--cat-dark);font-weight:700;flex-shrink:0;transition:transform .2s}
.dg:hover .dg-arrow{transform:translateX(3px)}

/* therapy cards */
.th-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.th{background:var(--white);border:1px solid var(--cream-border);border-top:5px solid var(--tc);border-radius:16px;
    padding:22px 20px;display:flex;flex-direction:column;transition:all .3s;position:relative}
.th:hover{transform:translateY(-7px);box-shadow:0 18px 40px -8px var(--tc);border-color:var(--tc)}
.th-ic{width:48px;height:48px;border-radius:13px;background:var(--tcl);display:flex;align-items:center;
       justify-content:center;font-size:22px;margin-bottom:12px}
.th h3{font-size:17.5px;margin-bottom:8px}
.th p{color:var(--text-mid);font-size:13.5px;line-height:1.55;flex:1;margin-bottom:14px}
.th-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--cream-border)}
.th-loc{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tcd);
        background:var(--tcl);padding:4px 10px;border-radius:20px}
.th-arrow{width:32px;height:32px;border-radius:50%;background:var(--tcl);color:var(--tcd);display:flex;
          align-items:center;justify-content:center;font-weight:700;transition:all .22s}
.th:hover .th-arrow{background:var(--tc);color:var(--white)}

/* 4 steps as a connected chain (same pattern as the Zeitstrahl) */
/* Spaltenzahl kommt aus --schritte (blocks/block-schrittfolge.php), Standard 4.
   Früher stand sie als Inline-Stil am Element und gewann damit gegen die
   @media-Regeln weiter unten — der Block blieb auf dem Handy vierspaltig. */
.st4{position:relative;display:grid;
     grid-template-columns:repeat(var(--schritte,4),minmax(0,1fr));margin-top:10px}
/* Das Emoji 👣 zeigt von sich aus nach oben. Der Weg auf dieser Seite
   läuft waagrecht — gedreht laufen die Spuren mit ihm nach vorn. */
.st4-feet{position:absolute;top:14px;font-size:15px;opacity:.45;z-index:0;pointer-events:none;
          transform:rotate(90deg);transform-origin:center}
.st4-feet:nth-of-type(1){left:25%;top:10px;transform:translateX(-50%) rotate(82deg)}
.st4-feet:nth-of-type(2){left:50%;top:18px;transform:translateX(-50%) rotate(98deg)}
.st4-feet:nth-of-type(3){left:75%;top:10px;transform:translateX(-50%) rotate(82deg)}
@media(max-width:900px){.st4-feet{display:none}}
.st4::before{content:'';position:absolute;left:12.5%;right:12.5%;top:32px;height:5px;border-radius:3px;
             background:linear-gradient(90deg,var(--cat-mid),var(--cat-main) 55%,var(--gold-main));z-index:0}
.st4-cell{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 9px}
.st4-num{width:64px;height:64px;border-radius:50%;background:var(--white);border:4px solid var(--cat-main);
         color:var(--cat-dark);font-family:'Playfair Display',serif;font-weight:700;font-size:22px;display:flex;
         align-items:center;justify-content:center;box-shadow:0 5px 16px rgba(42,58,26,.14);transition:all .28s;flex-shrink:0}
.st4-cell:last-child .st4-num{border-color:var(--gold-main);background:var(--gold-light);color:var(--gold-deeptext);
                              box-shadow:0 0 0 9px rgba(235,195,95,.2)}
.st4-cell:hover .st4-num{transform:scale(1.07)}
.st4-card{margin-top:18px;background:var(--white);border:1px solid var(--cream-border);border-radius:16px;
          padding:20px 18px;text-align:center;transition:all .3s;position:relative;width:100%}
.st4-cell:hover .st4-card{transform:translateY(-4px);box-shadow:0 14px 32px rgba(42,58,26,.1);border-color:var(--cat-main)}
.st4-card::before{content:'';position:absolute;top:-18px;left:50%;width:2px;height:18px;background:var(--cat-mid);transform:translateX(-50%)}
.st4-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
         color:var(--cat-deeptext);background:var(--cat-light);padding:4px 10px;border-radius:20px;margin-bottom:8px}
.st4-card h3{font-size:16.5px;margin-bottom:8px;line-height:1.3}
.st4-card p{color:var(--text-mid);font-size:13.5px;line-height:1.6}

/* team teaser */
.tt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tt{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;padding:24px;
    display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;transition:all .3s;position:relative}
.tt:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(42,58,26,.11);border-color:var(--cat-main)}
.tt img{width:96px;aspect-ratio:3/4;object-fit:cover;border-radius:14px;border:2.5px solid var(--cat-mid)}
.tt h3{font-size:16.5px;margin-bottom:3px}
.tt .role{font-size:12px;color:var(--text-muted);margin-bottom:9px}
.tt blockquote{font-family:'Playfair Display',serif;font-style:italic;font-size:14px;color:var(--green-deepest);line-height:1.5}

/* adult bridge — HOME4MOTION brand colours: #EC7E41 orange, #51596E dark blue */
.adult{--a-orange:#EC7E41;--a-blue:#51596E;--a-blue-l:#EEF0F4;
       display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;
       background:linear-gradient(135deg,var(--a-blue-l) 0%,var(--white) 58%);
       border:2px solid var(--a-blue);border-radius:22px;padding:36px;position:relative;overflow:visible;
       box-shadow:0 16px 40px -16px var(--a-blue)}
.adult-badge{position:absolute;top:-14px;left:32px;background:var(--a-blue);color:var(--white);
             font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 16px;
             border-radius:20px;box-shadow:0 4px 12px -2px var(--a-blue)}
.adult h2{font-size:25px;margin-bottom:10px;color:var(--a-blue)}
.adult p{color:var(--text-mid);font-size:14px;line-height:1.6;margin-bottom:10px}
.adult .sub{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--a-orange);margin:16px 0 6px}
.adult .btn{background:var(--a-orange);border-color:var(--a-orange);color:var(--white)}
.adult .btn:hover{background:var(--a-blue);border-color:var(--a-blue);color:var(--white)}
.adult-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 12px 28px rgba(81,89,110,.22)}
.adult-photo img{width:100%;height:100%;object-fit:cover}

@media(max-width:1024px){
  .dg-grid,.th-grid{grid-template-columns:repeat(3,1fr)}
  .tt-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  /* Direkt grid-template-columns, nicht über --schritte: die Zahl steht als
     Eigenschaft im style-Attribut des Elements, und ein Inline-Wert gewinnt
     auch bei Eigenschaften gegen jede @media-Regel. Der Basiswert von .st4
     liest die Eigenschaft; hier wird die Eigenschaft übergangen. */
  .st4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .st4::before{display:none}
  .adult{grid-template-columns:1fr}
}
@media(max-width:640px){
  .dg-grid,.th-grid{grid-template-columns:1fr}
  .st4{grid-template-columns:minmax(0,1fr)}
  .st4{row-gap:22px}
  .tt{grid-template-columns:1fr}
  .tt img{width:120px}
}


/* ===== BREITE BILDSCHIRME: Hero-Foto bekommt mehr Höhe =====
   Ohne min-height bestimmt nur der Text die Höhe – auf 1600px+ wird das Foto
   dadurch extrem beschnitten. Der Inhalt bleibt vertikal zentriert. */
@media(min-width:1280px){
  /* Kurze Rechnung, weil die Höhe hier keine Geschmacksfrage ist:
     Die Fotos haben das Verhältnis 3:2 (etwa 2000x1333). background-size:cover
     skaliert auf die Breite — auf 1600px wird das Bild 1600x1067 gross. Von
     diesen 1067 Pixeln zeigte eine 420px hohe Leiste nur 39 %: ein waagrechter
     Streifen aus der Bildmitte.

     Mehr vom Foto zeigen und gleichzeitig die Breite fuellen geht nur ueber
     eine hoehere Leiste. „contain" wuerde das ganze Foto zeigen, liesse aber
     links und rechts breite Luecken; 100%x100% wuerde es verzerren und
     Gesichter breitquetschen. Deshalb hoeher, nicht anders skaliert. */
  .hero{min-height:560px;display:flex;align-items:center;padding-top:48px;padding-bottom:44px}
  .hero > .wrap{width:100%}
}
@media(min-width:1600px){
  .hero{min-height:620px}
  .hero h1{font-size:50px}
}
@media(min-width:1900px){
  .hero{min-height:470px}
}

/* ============================================================
   MOBILE HARDENING  ·  Mobile ist der Haupt-Traffic
   Wird zuletzt eingebunden und gewinnt daher bei gleicher Spezifitaet.
   ============================================================ */
@media(max-width:1024px){
  .wrap{padding:0 24px}
}
@media(max-width:900px){
  .wrap{padding:0 18px}

  /* jedes zweispaltige Layout wird einspaltig */
  .ansatz-grid,.warum-intro-grid,.warum-grid,.explain-grid,.loc-grid,.location-grid,
  .end-grid,.form-layout,.map-grid,.intensiv-band,.apart-band,.story-box,.wel-grid,
  .dx-grid,.nav-cards,.combine-box .warum-intro-grid{grid-template-columns:1fr!important}

  /* Fotos werden nicht zum Streifen */
  .ansatz-photo-wrap,.warum-photo-wrap,.wel-photo{max-width:260px;margin-left:auto;margin-right:auto}

  /* drei- und mehrspaltige Raster auf zwei Spalten */
  .diag-grid,.subtherapy-grid,.feature-grid,.why-grid,.fin-grid,.prod-grid,.pr-grid,
  .path-grid,.combine-flow,.early-cols,.chal-grid,.gal,.info-tiles,.disc-strip,
  .stat-strip,.trust-strip,.hub-grid,.toffer-grid,.ap-grid,.price-grid,
  .fgrid,.why-cell-grid{grid-template-columns:repeat(2,1fr)!important}
  .combo-strip{grid-template-columns:1fr!important}

  /* dekorative Blaetter/Punkte kollidieren in schmalen Spalten mit Text */
  .deco{display:none}
}
@media(max-width:900px){
  .hero{background-image:linear-gradient(rgba(28,41,15,.62),rgba(28,41,15,.62)),none}
}
@media(max-width:640px){
  .wrap{padding:0 16px}

  /* konsequent einspaltig */
  .diag-grid,.subtherapy-grid,.feature-grid,.why-grid,.fin-grid,.prod-grid,.pr-grid,
  .path-grid,.combine-flow,.early-cols,.chal-grid,.gal,.info-tiles,.disc-strip,
  .hub-grid,.toffer-grid,.ap-grid,.price-grid,.fgrid,.cmp-2{grid-template-columns:1fr!important}
  .stat-strip,.trust-strip{grid-template-columns:1fr 1fr!important}

  /* breite Kacheln geben ihre Sonderbreite auf */
  .gal-item.wide,.pr-card.wide{grid-column:span 1!important}
  .gal-item.wide .gal-fig{aspect-ratio:4/3}

  /* Buttons voll breit – leichter zu treffen */
  .hero-actions,.cta-buttons,.end-btns{flex-direction:column;align-items:stretch}
  .hero-actions .btn,.cta-buttons .btn,.end-btns .btn,.form-actions .btn{width:100%}
  .form-actions{flex-direction:column;align-items:stretch}

  /* Typo und Abstaende zuruecknehmen */
  h1{font-size:clamp(26px,7.4vw,34px)}
  h2{font-size:clamp(21px,5.6vw,27px)}
  h3{font-size:17px}
  .hero{padding:48px 0 40px}
  .hero-lede{font-size:14.5px}
  .section{padding:40px 0}
  .section-head{margin-bottom:22px}
  .section-head p{margin-top:14px}
  .checklist{margin-top:14px}

  /* Chip-Reihen scrollen statt auf vier Zeilen umzubrechen */
  .chip-row,.gal-tools,.ov-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .chip-row::-webkit-scrollbar,.gal-tools::-webkit-scrollbar,.ov-row::-webkit-scrollbar::-webkit-scrollbar{display:none}

  /* zweite Sticky-Leiste wuerde zusammen mit dem Header den halben Screen fressen */
  .tools{position:static!important;box-shadow:none}

  /* Tier-Illustrationen an Kartenecken kleiner halten */
  .pet{transform:scale(.82);transform-origin:top right}
  .pet[style*="left"]{transform-origin:top left}

  /* Karten-Innenabstaende */
  .jrn-card,.rd-card,.gal-body,.loc-body,.form-box,.end-card,.combine-box,
  .early-box,.warum-showcase,.intensiv-band,.apart-band,.story-box{padding-left:18px;padding-right:18px}
  .form-box,.combine-box,.early-box,.warum-showcase,.intensiv-band,.apart-band,.story-box{padding-top:26px;padding-bottom:26px}
}
@media(max-width:400px){
  .wrap{padding:0 13px}
  .stat-strip,.trust-strip{grid-template-columns:1fr!important}
  /* Auf sehr schmalen Bildschirmen kein Platz für die Tiere auf den Karten.
     Der Kater im Cookie-Hinweis ist ausgenommen: er sitzt in der freien Ecke
     über dem Hinweis und ist dort der eigentliche Inhalt des Bildes. */
  .pet:not(.kk){display:none}
  .footer-links{grid-template-columns:minmax(0,1fr)}
}

/* Tabellen scrollen immer, statt das Layout zu sprengen */
.tbl-wrap,.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* nichts darf die Seite seitlich verschieben */
img,svg,video,iframe{max-width:100%}

/* --- Mobile Feinschliff --- */
@media(max-width:640px){
  /* min-width darf einen 100%-Button nicht ueber den Rand schieben */
  .btn,.btn-cta-lg{min-width:0}
  /* Lightbox: lange Geraetetexte muessen scrollen koennen */
  .lb-inner{max-height:94vh}
  .lb-cap{overflow-y:auto;max-height:34vh;-webkit-overflow-scrolling:touch}
  .lb-stage img{max-height:46vh}
  .lb-cap h3{font-size:19px}
  .lb-nav{width:40px;height:40px}
  /* zweite Sticky-Leiste kompakter halten */
  .tabbar{padding:9px 16px}
  .tab{padding:8px 13px;font-size:12.5px}
  /* Formularfelder: 16px verhindert Auto-Zoom in iOS Safari */
  .field input,.field select,.field textarea,.search-input{font-size:16px}
  /* Fotoleiste */
  .rail-item{height:230px}
  .rail-foot{flex-wrap:wrap;gap:10px}
  .rail-bar{max-width:none;order:3;flex-basis:100%}
}

/* ===== TERMIN MODAL (popup) ===== */
.tm-overlay{position:fixed;inset:0;z-index:500;background:rgba(20,28,10,.62);backdrop-filter:blur(3px);
            display:none;align-items:center;justify-content:center;padding:20px}
.tm-overlay.open{display:flex}
.tm-box{position:relative;background:var(--white);border-radius:22px;max-width:480px;width:100%;
        max-height:92vh;overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.32);animation:tmIn .25s ease}
@keyframes tmIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.tm-head{background:var(--green-deepest);color:var(--white);padding:24px 26px 20px;border-radius:22px 22px 0 0;position:relative}
.tm-head h3{font-family:'Playfair Display',serif;font-size:21px;color:var(--white);margin:0 0 6px}
.tm-head p{font-size:13px;color:rgba(255,255,255,.75);margin:0}
.tm-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:none;
          background:rgba(255,255,255,.14);color:var(--white);font-size:16px;cursor:pointer;
          display:flex;align-items:center;justify-content:center;transition:all .2s}
.tm-close:hover{background:rgba(255,255,255,.28)}
.tm-body{padding:24px 26px 26px}
.tm-field{margin-bottom:14px}
.tm-field label{display:block;font-size:12.5px;font-weight:700;color:var(--green-deepest);margin-bottom:6px}
.tm-field input,.tm-field textarea{width:100%;border:1.5px solid var(--cream-border);border-radius:12px;
       padding:12px 14px;font-family:inherit;font-size:15px;color:var(--text-primary);background:var(--cream-bg);
       transition:all .2s}
.tm-field input:focus,.tm-field textarea:focus{outline:none;border-color:var(--cat-main);background:var(--white);
       box-shadow:0 0 0 3px rgba(92,138,60,.14)}
.tm-field textarea{resize:vertical;min-height:72px}
.tm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tm-consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--text-muted);margin:16px 0 18px;line-height:1.5}
.tm-consent input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--cat-main)}
.tm-consent a{color:var(--cat-dark);font-weight:700}
.tm-submit{width:100%;min-height:52px;border:none;border-radius:var(--radius-btn);background:var(--gold-main);
           color:var(--green-deepest);font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
           transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.tm-submit:hover{background:var(--gold-dark);color:var(--white)}
.tm-trust{text-align:center;font-size:11.5px;color:var(--text-muted);margin-top:12px}
.tm-error{font-size:12px;color:#B0392E;margin-top:-8px;margin-bottom:12px;display:none}
.tm-error.show{display:block}

.tm-req{color:#B0392E;font-weight:700}
.tm-select-wrap{position:relative}
.tm-field select{width:100%;border:1.5px solid var(--cream-border);border-radius:12px;padding:12px 40px 12px 14px;
       font-family:inherit;font-size:15px;color:var(--text-primary);background:var(--cream-bg);
       appearance:none;-webkit-appearance:none;cursor:pointer;transition:all .2s}
.tm-field select:focus{outline:none;border-color:var(--cat-main);background:var(--white);
       box-shadow:0 0 0 3px rgba(92,138,60,.14)}
.tm-field select:invalid{color:var(--text-muted)}
.tm-select-arrow{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:18px;height:18px;
       color:var(--cat-dark);pointer-events:none}
.tm-select-arrow svg{width:100%;height:100%;display:block}
.tm-err{display:none;font-size:11.5px;color:#B0392E;margin-top:5px;line-height:1.4}
.tm-err.show{display:block}
.tm-field.invalid input,.tm-field.invalid textarea,.tm-field.invalid select{border-color:#B0392E;background:#FDF3F2}
.tm-note{font-size:11.5px;color:var(--text-muted);line-height:1.5;margin:2px 0 16px}
.tm-check svg{width:100%;height:100%}
.tm-check .tms-ring{fill:none;stroke:var(--gold-main);stroke-width:4;stroke-linecap:round;opacity:.5;
       stroke-dasharray:250;stroke-dashoffset:250;animation:tmsRing .9s ease-out forwards}
.tm-check .tms-tick{fill:none;stroke:var(--gold-main);stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round;
       stroke-dasharray:60;stroke-dashoffset:60;animation:tmsTick .45s .6s cubic-bezier(.6,0,.3,1) forwards}
@keyframes tmsRing{to{stroke-dashoffset:0}}
@keyframes tmsTick{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .tm-check .tms-ring,.tm-check .tms-tick{animation:none;stroke-dashoffset:0}
}

/* success state */
.tm-success{display:none;text-align:center;padding:36px 26px 30px}
.tm-success.show{display:block}
.tm-success .tm-check{width:66px;height:66px;border-radius:50%;background:var(--gold-light);border:3px solid var(--gold-main);
       display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}
.tm-success h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--green-deepest);margin-bottom:8px}
.tm-success p{font-size:14px;color:var(--text-mid);line-height:1.6;margin-bottom:20px}
.tm-success .btn{width:100%;margin-bottom:10px}
.tm-form.hide,.tm-head.hide{display:none}

@media(max-width:480px){
  .tm-row2{grid-template-columns:1fr}
  .tm-box{border-radius:18px}
  .tm-head{border-radius:18px 18px 0 0}
}



/* hero-breite — Der Hero-Bereich hält dieselbe Breite wie der übrige Inhalt.
   Zusätzlich bekommt der Fließtext eine lesbare Zeilenlänge; über die volle
   Breite von 1200px wären es rund 200 Zeichen pro Zeile. */
.hero-inner{max-width:1200px;margin:0 auto}
.hero .wrap{max-width:var(--max)}
.hero h1{max-width:980px}
.hero-lede{max-width:760px}


/* karten-innenabstand — Der Text lag ohne Luft an der Kartenkante. */
.icon-card{padding:24px 22px}
.icon-card h3{margin:12px 0 8px}
.icon-card p{margin:0}
.card-icon{margin-bottom:4px}

/* ═══════════════════════════════════════════════════════════════
   Sprachumschaltung in der Kopfleiste
   ═══════════════════════════════════════════════════════════════ */
.sprach-wahl{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
  color:rgba(42,58,26,.45);margin-right:4px}
.sprach-wahl a{color:rgba(42,58,26,.55);text-decoration:none;padding:4px 6px;border-radius:6px}
.sprach-wahl a:hover{background:rgba(42,58,26,.08);color:var(--green-deepest)}
.sprach-wahl a.aktiv{color:var(--green-deepest);background:rgba(255,255,255,.55)}

/* ═══════════════════════════════════════════════════════════════
   Karten der Behandlungsschwerpunkte: Innenabstand und Bildzuschnitt
   Die Bilder wurden vorher verzerrt, weil kein Seitenverhältnis
   vorgegeben war.
   ═══════════════════════════════════════════════════════════════ */
.subtherapy-card{overflow:hidden}
.subtherapy-card .sub-photo{aspect-ratio:4/3;overflow:hidden;background:var(--cream-bg)}
.subtherapy-card .sub-photo img{width:100%;height:100%;object-fit:cover;display:block}
.subtherapy-card .sub-body{padding:20px 22px 22px}
.subtherapy-card .sub-body h3{margin:0 0 8px}
.subtherapy-card .sub-body p{margin:0 0 12px}

.device-card{overflow:hidden}
.device-card .device-card-photo{aspect-ratio:4/3;overflow:hidden;background:var(--cream-bg)}
.device-card .device-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.device-card .device-card-body{padding:18px 20px 20px}

.card{padding:24px 22px}
.card h3{margin:10px 0 8px}
.card p{margin:0}

/* ============================================================================
   FUSSZEILE AUF SCHMALEN GERÄTEN
   ============================================================================
   Die Fusszeile hatte bisher keine einzige Regel für kleine Schirme. Mit der
   festen Breite der ersten Spalte (340px) und dem zweispaltigen Adressraster
   wäre sie auf dem Telefon aus dem Rahmen gelaufen. */

@media (max-width: 900px) {
    /* Erste Spalte über die ganze Breite, Verweise zweispaltig */
    .footer-brand { flex: 1 1 100%; }
    /* Echtes Raster statt column-count: bei column-count wandert eine Gruppe
       mitten im Fluss in die nächste Spalte, sodass Überschrift und Verweise
       auseinandergerissen werden. Im Raster ist jede Gruppe eine Zelle. */
    .footer-links { column-count: initial; display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; }
    .footer-group { break-inside: avoid; }
    .footer-erwachsene { margin-top: 12px; }
}

@media (max-width: 560px) {
    .footer { padding-top: 22px; }
    /* Unter 400px eine Spalte — zwei Spalten ergäben knapp 170px je Spalte, dort
       brechen Wörter wie „Neuroorthopädische Beratungstermine" unschön um.
       Zwischen 400 und 560 bleiben zwei Spalten: das halbiert die Länge der
       Fußzeile (gemessen 1100 statt 1512 Pixel). */
    .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-group { margin-bottom: 18px; }

    /* Kontakt darf hier umbrechen — nowrap würde die Zeile aus dem
       Bildschirm schieben. Deshalb untereinander statt nebeneinander. */
    .footer-kontakt { flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; }
    .footer-kontakt .trenner { display: none; }

    /*
     * Adressen NEBENEINANDER, zwei gleiche Spalten.
     *
     * Vorher untereinander, mit der Begründung, auf 360px blieben je Kasten
     * kaum 150px und die Strasse breche mitten im Wort. Zwei Kästen kosten
     * untereinander aber doppelt so viel Höhe, und der Fuss ist ohnehin lang.
     * Gewünscht von Alex am 29.09.2026.
     *
     * Damit nichts mitten im Wort bricht: kleinere Schrift, engeres Polster,
     * `hyphens:auto` für „Altmannsdorfer Strasse". `minmax(0,1fr)` hält beide
     * Spalten gleich breit, auch wenn ein Text länger ist.
     */
    .footer-locs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .footer .footer-loc { padding: 7px 9px; font-size: 10px; line-height: 1.35;
      hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
    .footer-loc strong { font-size: 8.5px; margin-bottom: 1px; }

    /* Symbole etwas grösser: auf dem Telefon wird mit dem Finger getroffen,
       34px sind dafür knapp. */
    .footer-social a { width: 44px; height: 44px; border-radius: 10px; }
    .footer-social a svg { width: 21px; height: 21px; }

    .footer-erwachsene { flex-wrap: wrap; padding: 12px 14px; }
    .footer-erwachsene .fe-pfeil { display: none; }

    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Sehr schmale Geräte (iPhone SE und Ähnliches) */
@media (max-width: 380px) {
    .footer-kontakt { font-size: 11px; }
    .footer-brand-name span { font-size: 16px !important; }
}

/* ============================================================================
   COOKIE-HINWEIS
   ============================================================================
   Freundlich, aber ehrlich. Ein Tier lugt über den Rand — dasselbe Muster wie
   auf den Karten der Website.

   „Alle akzeptieren" ist die auffällige Hauptschaltfläche, „Nur das
   Notwendige" steht gleich daneben und ist mit einem Klick erreichbar. Genau
   das verlangt die DSGVO: Ablehnen darf nicht schwerer sein als Zustimmen.
   Auffälliger gestalten ist erlaubt, versteckt wäre es nicht. */

.cookie-hinweis{
  position:fixed;bottom:20px;left:20px;right:20px;max-width:520px;
  background:var(--white);
  border:1px solid var(--cream-border);
  border-radius:22px;
  box-shadow:0 22px 60px rgba(42,58,26,.26), 0 2px 8px rgba(42,58,26,.08);
  z-index:200;
  overflow:visible;
  animation:chAuf .42s cubic-bezier(.2,.9,.3,1.1)
}
@keyframes chAuf{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.cookie-hinweis.zu{display:none}
.cookie-hinweis.ch-weg{opacity:0;transform:translateY(16px);transition:all .26s ease}

/* Das Tier sitzt auf der oberen Kante */
.ch-tier{position:absolute;top:0;right:0;width:100%;height:0}
.ch-tier .pet{position:absolute}

/* Innenabstand und Überschrift des Hinweises. Standen im Bereich, der beim
   Umbau der Keks-Bewegung versehentlich mitentfernt wurde; die Fassungen in der
   @media-Regel weiter unten blieben stehen, weshalb eine Suche nach dem
   Klassennamen fündig wurde und den Verlust verdeckt hat. */
.ch-innen{padding:24px 26px 20px}

.ch-titel{
  font-family:'Playfair Display',serif;font-size:22px;line-height:1.2;
  margin:0 0 10px;color:var(--green-deepest);padding-right:70px
}

.ch-text{margin:0 0 16px;color:var(--text-mid);line-height:1.6;font-size:14px}

/* ---- Auswahl im Detail ---- */
.ch-wahl{margin:0 0 16px}
.ch-wahl > summary{
  cursor:pointer;font-size:13px;font-weight:700;color:var(--cat-dark);
  list-style:none;padding:7px 0;display:inline-flex;align-items:center;gap:6px
}
.ch-wahl > summary::-webkit-details-marker{display:none}
.ch-wahl > summary::before{content:'▸';font-size:11px;transition:transform .2s}
.ch-wahl[open] > summary::before{transform:rotate(90deg)}
.ch-wahl > summary:hover{color:var(--green-deepest)}

.ch-zeile{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 13px;margin-bottom:7px;
  background:var(--cat-light);border:1px solid var(--cream-border);border-radius:12px;
  cursor:pointer;transition:border-color .16s
}
.ch-zeile:hover{border-color:var(--cat-mid)}
.ch-zeile input{width:18px;height:18px;margin-top:1px;accent-color:var(--cat-main);flex-shrink:0;cursor:pointer}
.ch-zeile input:disabled{cursor:default;opacity:.6}
.ch-zeile b{display:block;font-size:13.5px;color:var(--green-deepest)}
.ch-zeile b em{
  font-style:normal;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--cat-dark);background:var(--white);border:1px solid var(--cat-mid);
  border-radius:20px;padding:2px 7px;margin-left:7px;vertical-align:1px
}
.ch-zeile small{display:block;font-size:12px;color:var(--text-muted);line-height:1.5;margin-top:3px}

/* ---- Schaltflächen ---- */
.ch-knoepfe{display:flex;gap:9px;flex-wrap:wrap}
.ch-btn{
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;
  padding:12px 20px;border-radius:12px;cursor:pointer;border:1.5px solid transparent;
  transition:all .18s
}
/* Die Hauptschaltfläche: gold, mit Gewicht */
.ch-btn-ja{
  flex:1 1 auto;background:var(--gold-main);color:var(--green-deepest);
  border-color:var(--gold-main);box-shadow:0 5px 16px rgba(235,195,95,.4)
}
.ch-btn-ja:hover{background:var(--gold-dark);border-color:var(--gold-dark);transform:translateY(-1px)}
/* Ablehnen: ruhig, aber klar sichtbar und gleich daneben */
.ch-btn-nein{background:var(--white);color:var(--text-mid);border-color:var(--cream-border)}
.ch-btn-nein:hover{border-color:var(--text-muted);color:var(--green-deepest)}
.ch-speichern{display:none}
.ch-wahl[open] ~ .ch-knoepfe .ch-speichern{display:inline-flex}

.ch-fuss{margin:14px 0 0;font-size:12px;color:var(--text-muted);display:flex;gap:8px;flex-wrap:wrap}
.ch-fuss a{color:var(--text-muted);text-decoration:underline}
.ch-fuss a:hover{color:var(--cat-dark)}

/* Schaltfläche in der Fusszeile, sieht aus wie die Verweise daneben */
.fuss-cookie{background:none;border:0;padding:0;font-family:inherit;font-size:11px;
  color:rgba(255,255,255,.4);text-decoration:underline;cursor:pointer;transition:color .15s}
.fuss-cookie:hover{color:var(--gold-main)}

/* ── Die Katze frisst einen Keks ─────────────────────────────────────────────
   Tier, Keks und Krümel stecken in einem SVG (lib/keks.php), deshalb genügen
   hier Bewegungen in dessen eigenem Koordinatensystem — nichts muss von außen
   ausgerichtet werden.

   Ablauf, ein Durchgang von rund 8 Sekunden:
     0,4 – 1,3 s   Pfote hebt den Keks zum Maul
     1,4 – 6,8 s   drei Bisse: Maul auf, Keks kleiner, Augen kurz zu
     ab 1,9 s      Krümel fallen, jeweils direkt nach einem Biss
     ab 7,0 s      Keks ist weg, Maul zu, alles ruht

   Eine Schleife wäre neben einem Text, den man lesen soll, störend.

   Nur transform und opacity: beides rechnet der Browser auf der Grafikkarte,
   ein Wechsel von cy oder r würde das SVG bei jedem Bild neu vermessen.
   Bei SVG muss transform-origin ausdrücklich gesetzt werden — der Standard ist
   die linke obere Ecke der ganzen Zeichenfläche, nicht die Mitte des Elements. */

/* Der Keks wandert von der Pfote hoch ans Maul */
.kk-keks{
  transform-origin:28px 47.5px;
  animation:kk-anheben 1.1s .4s cubic-bezier(.3,.7,.4,1) both;
}
@keyframes kk-anheben{
  from{opacity:0; transform:translate(6px,7px) rotate(-18deg) scale(.85)}
  60% {opacity:1}
  to  {opacity:1; transform:translate(0,0) rotate(0) scale(1)}
}

/* Abgebissen wird von oben: Drehpunkt am unteren Rand des Kekses, damit das
   Kleinerwerden von der Maulseite her hereinfrisst. */
.kk-keks-koerper{
  /* Drehpunkt am OBEREN Rand des Kekses, dort wo das Maul ist. Beim
     Kleinerwerden bleibt diese Kante am Maul stehen und der Keks zieht sich
     nach unten weg — das liest sich als Abbeissen. Mit dem Drehpunkt unten
     rutschte er stattdessen vom Maul fort und wurde nur kleiner. */
  transform-origin:28px 41.7px;
  animation:kk-bisse 5.4s 1.4s ease-in-out both;
}
@keyframes kk-bisse{
  0%,7%    {transform:scale(1)}
  11%      {transform:scale(.9) translateY(-.8px)}      /* erster Biss */
  15%,40%  {transform:scale(.76)}
  44%      {transform:scale(.66) translateY(-.8px)}     /* zweiter Biss */
  48%,73%  {transform:scale(.5)}
  77%      {transform:scale(.4) translateY(-.8px)}      /* dritter Biss */
  81%,96%  {transform:scale(.26); opacity:1}
  100%     {transform:scale(.05); opacity:0}          /* aufgegessen */
}

/* Das Maul: die dunkle Öffnung klappt nach unten auf. Drehpunkt oben, sonst
   ginge sie in der Mitte auseinander. */
.kk-maul-offen{
  transform-origin:28px 35px;
  transform:scaleY(0);
  animation:kk-maul-auf 5.4s 1.4s ease-in-out both;
}
@keyframes kk-maul-auf{
  0%,6%          {transform:scaleY(0)}
  9%,13%         {transform:scaleY(1)}       /* erster Biss */
  17%,41%        {transform:scaleY(.12)}     /* kauen, Maul fast zu */
  42%,46%        {transform:scaleY(1)}       /* zweiter Biss */
  50%,74%        {transform:scaleY(.12)}
  75%,79%        {transform:scaleY(1)}       /* dritter Biss */
  83%,100%       {transform:scaleY(0)}
}

/* Die geschlossenen Maulschwünge verschwinden, solange das Maul offen ist —
   sonst lägen beide Zustände übereinander. */
.kk-maul-zu{
  animation:kk-maul-zu 5.4s 1.4s ease-in-out both;
}
@keyframes kk-maul-zu{
  0%,6%    {opacity:1}
  9%,17%   {opacity:0}
  20%,41%  {opacity:.6}
  42%,50%  {opacity:0}
  53%,74%  {opacity:.6}
  75%,83%  {opacity:0}
  87%,100% {opacity:1}
}

/* Die Augen gehen beim Zubeissen kurz zu. Die Lider sind Striche in Fellfarbe
   und fahren von oben herab. */
.kk-lider{
  transform-origin:28px 26px;
  transform:scaleY(0);
  animation:kk-blinzeln 5.4s 1.4s ease-in-out both;
}
@keyframes kk-blinzeln{
  0%,7%    {transform:scaleY(0)}
  10%,14%  {transform:scaleY(1)}
  18%,42%  {transform:scaleY(0)}
  44%,47%  {transform:scaleY(1)}
  51%,75%  {transform:scaleY(0)}
  77%,80%  {transform:scaleY(1)}
  84%,100% {transform:scaleY(0)}
}

/* Die haltende Pfote wippt mit jedem Biss ein wenig nach */
.kk-pfote{
  transform-origin:35px 47px;
  animation:kk-pfote 5.4s 1.4s ease-in-out both;
}
@keyframes kk-pfote{
  0%,7%          {transform:translate(0,0)}
  11%,44%,77%    {transform:translate(-1px,-1.5px)}
  16%,49%,82%    {transform:translate(0,0)}
  100%           {transform:translate(0,0)}
}

/* Die ganze Katze wippt beim Kauen — klein gehalten, sonst wirkt es zappelig */
.kk{
  transform-origin:50% 88%;
  animation:kk-kauen 5.4s 1.4s ease-in-out both;
}
@keyframes kk-kauen{
  0%,7%                      {transform:translateY(0) rotate(0)}
  12%,20%,45%,53%,78%,86%    {transform:translateY(.6px) rotate(-1.6deg)}
  16%,49%,82%                {transform:translateY(0) rotate(1.2deg)}
  92%,100%                   {transform:translateY(0) rotate(0)}
}

/* Krümel. Neun Stück, jeder mit eigener Bahn — sie fallen versetzt und
   unterschiedlich weit, sonst sähe es nach einem Rieseln aus einem Punkt aus.
   Drei Wellen, jeweils direkt nach einem Biss. */
.kk-kruemel circle{
  opacity:0;
  /* Ohne diese zwei Zeilen dreht rotate() jeden Krümel um den Ursprung der
     Zeichenfläche (0,0) und schleudert ihn quer aus dem Bild. Bei SVG ist der
     Standard für transform-origin nicht die Mitte des Elements. fill-box macht
     die eigene Fläche des Kreises zum Bezug, center dessen Mitte. */
  transform-box:fill-box;
  transform-origin:center;
  animation-duration:1.6s;
  animation-timing-function:cubic-bezier(.3,.05,.7,1);  /* fällt beschleunigt */
  animation-fill-mode:both;
}
.kk-kruemel .kr1{animation-name:kk-fall-links;  animation-delay:1.9s}
.kk-kruemel .kr2{animation-name:kk-fall-rechts; animation-delay:2.0s}
.kk-kruemel .kr3{animation-name:kk-fall-mitte;  animation-delay:2.15s}
.kk-kruemel .kr4{animation-name:kk-fall-links;  animation-delay:4.2s}
.kk-kruemel .kr5{animation-name:kk-fall-rechts; animation-delay:4.3s}
.kk-kruemel .kr6{animation-name:kk-fall-mitte;  animation-delay:4.45s}
.kk-kruemel .kr7{animation-name:kk-fall-rechts; animation-delay:5.9s}
.kk-kruemel .kr8{animation-name:kk-fall-links;  animation-delay:6.0s}
.kk-kruemel .kr9{animation-name:kk-fall-mitte;  animation-delay:6.15s}

@keyframes kk-fall-links{
  0%  {opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
  10% {opacity:1; transform:translate(-1px,2px) rotate(30deg) scale(1)}
  100%{opacity:0; transform:translate(-9px,28px) rotate(220deg) scale(1)}
}
@keyframes kk-fall-rechts{
  0%  {opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
  10% {opacity:1; transform:translate(1px,2px) rotate(-25deg) scale(1)}
  100%{opacity:0; transform:translate(10px,26px) rotate(-240deg) scale(1)}
}
@keyframes kk-fall-mitte{
  0%  {opacity:0; transform:translate(0,0) rotate(0) scale(.6)}
  10% {opacity:1; transform:translate(0,3px) rotate(15deg) scale(1)}
  100%{opacity:0; transform:translate(2px,30px) rotate(180deg) scale(1)}
}

@media(max-width:560px){
  .cookie-hinweis{bottom:0;left:0;right:0;max-width:none;
    border-radius:22px 22px 0 0}
  .ch-innen{padding:22px 18px 18px}
  .ch-titel{font-size:19px;padding-right:56px}
  .ch-tier .pet{width:60px!important;top:-36px!important;right:16px!important}
  /* Die fressende Katze ist wegen der fallenden Krümel höher als die anderen
     Tiere (viewBox 60x74 statt 60x54) — deshalb eine eigene Zeile, sonst
     schrumpft die Regel oben sie auf 60px und die Krümel werden winzig. */
  .ch-tier .kk{width:66px!important;top:-40px!important;right:14px!important}
  .ch-btn{flex:1 1 100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .cookie-hinweis{animation:none}

  /* Wer Bewegung abbestellt hat, sieht die Katze mit einem ganzen Keks in der
     Pfote — geschlossenes Maul, offene Augen, keine Krümel. Ein stimmiges Bild,
     kein halber Zustand. Der Hinweis bleibt vollständig bedienbar. */
  .kk,
  .kk-keks,
  .kk-keks-koerper,
  .kk-pfote,
  .kk-maul-zu{animation:none; opacity:1; transform:none}
  .kk-maul-offen{animation:none; transform:scaleY(0)}   /* Maul zu */
  .kk-lider{animation:none; transform:scaleY(0)}        /* Augen offen */
  .kk-kruemel{display:none}
  .ch-tier .pet{animation:none}
}

/* ============================================================================
   SCHALTFLÄCHE „NACH OBEN"
   ============================================================================
   Ein Vogel, der beim Überfahren den Kopf hebt und mit dem Flügel schlägt.
   Beim Klick hüpft er nach oben und die Seite folgt ihm.

   Alles über transform und opacity — beide laufen auf der Grafikkarte und
   lösen kein Neuberechnen des Layouts aus. Ein Wechsel von width oder top
   würde bei jedem Bild die ganze Seite neu vermessen. */

.nach-oben{
  position:fixed;bottom:22px;right:22px;z-index:150;
  width:60px;height:60px;padding:7px;
  background:var(--white);
  border:1.5px solid var(--cream-border);
  border-radius:50%;
  box-shadow:0 6px 20px rgba(42,58,26,.18);
  cursor:pointer;
  opacity:0;transform:translateY(14px) scale(.9);
  transition:opacity .3s, transform .3s, box-shadow .2s, border-color .2s
}
.nach-oben.da{opacity:1;transform:none}
.nach-oben:hover{box-shadow:0 10px 28px rgba(42,58,26,.26);border-color:var(--cat-main)}
.nach-oben:focus-visible{outline:3px solid var(--cat-main);outline-offset:3px}
.nach-oben svg{width:100%;height:100%;overflow:visible;display:block}

/* ---- Kopf hebt sich ---- */
.no-kopf{transform-origin:44px 30px;transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.nach-oben:hover .no-kopf{transform:rotate(-24deg) translateY(-2px)}

/* ---- Flügel schlägt ---- */
.no-fluegel{transform-origin:24px 34px}
.nach-oben:hover .no-fluegel{animation:noFluegel .5s ease-in-out infinite}
@keyframes noFluegel{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(-26deg) translateY(-2px)}
}

/* ---- Pfeil steigt auf ---- */
.no-pfeil{transition:opacity .25s, transform .35s ease-out}
.nach-oben:hover .no-pfeil{opacity:.9;animation:noPfeil 1.1s ease-out infinite}
@keyframes noPfeil{
  0%{opacity:0;transform:translateY(6px)}
  35%{opacity:.9}
  100%{opacity:0;transform:translateY(-9px)}
}

/* ---- Sprung beim Klick ---- */
.nach-oben.huepft .no-vogel{animation:noSprung .6s cubic-bezier(.3,1.5,.5,1)}
.nach-oben.huepft .no-schatten{animation:noSchatten .6s ease-out}
@keyframes noSprung{
  0%{transform:translateY(0)}
  30%{transform:translateY(-13px) scale(1.05)}
  60%{transform:translateY(-4px)}
  100%{transform:translateY(0)}
}
@keyframes noSchatten{
  0%,100%{transform:scale(1);opacity:.14}
  35%{transform:scale(.66);opacity:.06}
}

/* Auf dem Telefon etwas kleiner und nicht im Weg der Daumenzone.
   Zugleich mindestens 44 Pixel, damit sie mit dem Finger zu treffen ist. */
@media(max-width:560px){
  .nach-oben{width:50px;height:50px;padding:5px;bottom:16px;right:14px}
}

/* Solange der Cookie-Hinweis unten steht, weicht die Schaltfläche aus —
   sonst liegt sie darüber. */
.cookie-hinweis:not(.zu) ~ .nach-oben,
.cookie-hinweis:not([hidden]) ~ .nach-oben{bottom:auto;top:auto;display:none}

@media(prefers-reduced-motion:reduce){
  .nach-oben,.no-kopf,.no-pfeil{transition:none}
  .nach-oben:hover .no-fluegel,.nach-oben:hover .no-pfeil,
  .nach-oben.huepft .no-vogel,.nach-oben.huepft .no-schatten{animation:none}
  .nach-oben:hover .no-kopf{transform:rotate(-24deg)}
}

/* ============================================================================
   HANDY: KORREKTUREN AUS DEM ERSTEN TEST AM GERÄT
   ============================================================================
   Gesammelt am Ende der Datei, damit sie gegen die früheren Regeln gewinnen,
   ohne dass an zwanzig Stellen etwas geändert werden muss. Alles unter 640px. */

@media(max-width:640px){

  /* ---- Cookie-Hinweis: der Kater darf über den Rand hinausragen ----
     Vorher stand am Hinweis `overflow-y:auto; overflow-x:visible`. Nach der
     CSS-Spezifikation wird `visible` zu `auto`, sobald die andere Achse nicht
     `visible` ist — der Kater über der Oberkante wurde also abgeschnitten.
     Das Rollen übernimmt jetzt der innere Kasten, der Hinweis selbst behält
     seinen sichtbaren Überlauf. */
  .cookie-hinweis{overflow:visible; max-height:none}
  .ch-innen{max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch}

  /* ---- Diagnosekarten: Bild neben den Text, nicht darüber ----
     Bei einer Spalte und `aspect-ratio:1/1` wurde das Bild 362x362 Pixel groß
     und man musste je Karte einmal scrollen. Als Zeile mit kleinem Bild passen
     fünf Karten auf einen Blick. */
  /* Diagnosekarten als Zeile: kleines Bild links, Name rechts, Pfeil am Ende.
     Bei einer Spalte und `aspect-ratio:1/1` war das Bild 362x362 Pixel groß und
     man musste je Karte einmal scrollen.

     Wichtig sind die Abstände: die Karte hat `overflow:hidden`, das Bild lag
     deshalb an der Kante und der Name klebte direkt daneben. Jetzt trägt die
     Karte selbst einen Innenabstand, das Bild bekommt eigene Ecken, und der
     Name hat links wie rechts Luft. */
  .dg{
    display:grid;
    grid-template-columns:84px 1fr;
    align-items:center;
    gap:14px;
    padding:12px 14px;
    border-radius:18px;
  }
  .dg-fig{
    width:84px;
    aspect-ratio:1/1;
    border-radius:14px;
    /* Ohne diese Zeile behält das Bild die eckigen Ecken der Karte */
    overflow:hidden;
  }
  .dg-body{
    padding:0;
    gap:12px;
    justify-content:space-between;
    /* min-width:0 erlaubt dem Namen, innerhalb der Rasterzelle umzubrechen.
       Ohne das drückt ein langer Name wie „Infantile Zerebralparese (ICP)" die
       Zelle auf und die Karte läuft aus dem Bildschirm. */
    min-width:0;
  }
  .dg-body b{font-size:15px; line-height:1.35}
  .dg-arrow{font-size:17px}
  /* Berührung statt Zeiger: der Hebe-Effekt beim Überfahren wirkt auf dem
     Telefon wie ein Wackeln, weil :hover dort nach dem Antippen hängen bleibt. */
  .dg:hover{transform:none; box-shadow:none; border-color:var(--cream-border)}
  .dg:active{transform:scale(.985)}
  .dg-grid{gap:12px}

  /* ---- Team-Karten der Startseite: kein leerer Streifen rechts ----
     Das Bild ist 120px breit, der Textbereich lag darunter über die ganze
     Breite — rechts neben dem Bild blieb Platz ungenutzt. Als Zeile sitzt der
     Text neben dem Bild. */
  .tt{grid-template-columns:112px 1fr; align-items:start; gap:16px; text-align:left}
  .tt img{width:112px}
  .tt blockquote{margin-top:8px}

  /* ---- Schrittfolge: eine Spalte ----
     Die Spaltenzahl kommt als Eigenschaft --schritte vom Block. Ein Inline-Wert
     gewinnt auch bei Eigenschaften gegen @media, deshalb wird hier
     grid-template-columns direkt gesetzt statt die Eigenschaft zu ändern. */
  .st4{grid-template-columns:minmax(0,1fr)}

  /* Die Teamübersicht wird in assets/css/unser-team.css angepasst — diese
     Datei wird nach site.css geladen, eine Regel hier hätte keine Wirkung. */
}

/* ---- Cookie-Hinweis und mobiles Menü überlagern sich ----
   Beide liegen fest über der Seite (Hinweis z-index 200, Menü 190). Bei offenem
   Menü deckte der Hinweis dessen untere Hälfte ab — der Terminstreifen am Ende
   der Liste war nicht erreichbar. Solange das Menü offen ist, tritt der Hinweis
   zurück; er ist danach unverändert da, es wird nichts zugestimmt oder
   abgelehnt.
   Die Regel gilt für alle Breiten: am Schreibtisch gibt es das mobile Menü
   nicht, dort greift sie nie. */
body:has(.mobile-menu.open) .cookie-hinweis{
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

/* Rückfall für Browser ohne :has() — dort setzt app.js die Klasse am body.
   Ohne diesen Zweig bliebe das Verhalten in älteren Fassungen von Firefox
   und Safari wie vorher. */
body.menue-offen .cookie-hinweis{opacity:0; pointer-events:none}

/* ---- Tiere auf Karten: nicht über den Bildschirmrand hinaus ----
   Zwischen 401 und 640 Pixel sind die Tiere sichtbar (unter 401 werden sie
   ausgeblendet, siehe weiter oben). Ihre Lage kommt aus den Prototypen, wo sie
   für breite Bildschirme gesetzt wurde: `right:-14px` oder `left:-26px` lässt
   ein Tier bewusst über die Kartenkante ragen. Auf einem 420 Pixel breiten
   Bildschirm ragt es damit über die Seitenkante und erzeugt eine waagrechte
   Rollleiste.

   Die Tiere werden deshalb in diesem Bereich kleiner und die Überhänge
   zurückgenommen — die überschriebenen Werte stehen als Inline-Stil am Element,
   deshalb ist hier !important nötig. Der Kater im Cookie-Hinweis ist
   ausgenommen, er hat seine eigene Lage. */
@media(min-width:401px) and (max-width:640px){
  .pet:not(.kk){
    width:46px!important;
    max-width:46px!important;
  }
  /* Überhänge nach aussen aufheben: negative Werte werden zu 0, positive
     bleiben. Ein Tier darf innerhalb der Karte sitzen, aber nicht daneben. */
  .pet:not(.kk){right:6px!important; left:auto!important}
}

/* ---- Waagrechte Rollleiste am Handy: die letzten zwei Stellen ----

   1. Filterknöpfe und Vergleichstabelle auf /alle-therapien

   Für beide war `overflow-x:auto` vorgesehen — es hat nur nichts bewirkt. Der
   Grund ist eine Eigenheit von Flexbox: ein Flex-Element bekommt als kleinste
   Breite `min-width:auto`, also die Breite seines Inhalts. Ein Rollbereich
   darin weigert sich damit, kleiner zu werden als sein Inhalt, und schiebt
   stattdessen das Elternelement auf. Sichtbar war das als Seite mit 516 Pixel
   Inhaltsbreite auf einem 390 Pixel breiten Schirm.

   `min-width:0` hebt das auf. Es muss an jedem Flex-Element auf dem Weg
   stehen, nicht nur am Rollbereich selbst — sonst gibt eine Ebene weiter oben
   nicht nach.

   2. Tiere auf Karten zwischen 401 und 640 Pixel

   Ihre Lage kommt aus den Prototypen als Inline-Stil und ist für breite
   Schirme gedacht: `right:-14px` oder `left:-26px` lässt ein Tier bewusst über
   die Kartenkante ragen. Auf einem schmalen Schirm ragt es damit über den
   Bildschirmrand. Ein vorheriger Versuch mit `right:6px!important` griff nicht,
   weil einige Tiere über `left` positioniert sind — bei denen wirkt `right`
   nicht, solange `left` gesetzt ist. Deshalb wird hier beides zurückgesetzt und
   das Tier über `inset-inline-end` innerhalb der Karte gehalten. */

@media(max-width:900px){
  /* `.filter-bar` wird hier zur Spalte, behält aber `flex-wrap:wrap` aus der
     Grundregel. Bei einer umbrechenden Spalte streckt der Browser die Elemente
     nicht auf die Containerbreite — sie behalten ihre Inhaltsbreite, und die
     Knopfreihe (480px) schob die Seite auf. `width:100%` gibt eine feste
     Quergröße; erst dadurch greift `overflow-x:auto` an der Knopfreihe. */
  .filter-bar{min-width:0; flex-wrap:nowrap}
  .filter-group{min-width:0; width:100%}
  .chip-row,
  .gal-tools,
  .ov-row,
  .trust-row{min-width:0; max-width:100%}
  .cmp-wrap,
  .tbl-wrap{min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
}

/* Gespiegelte Tiere: Bezugspunkt der Spiegelung festlegen.

   Die Tiere mit `transform:scaleX(-1)` standen am Handy über dem rechten
   Bildschirmrand — und zwar um genau eine Tierbreite, gleichbleibend bei jeder
   Bildschirmbreite. Die berechneten Werte (`right:8px`, Breite 46px) waren
   dabei völlig richtig; das Tier lag laut Zahlen innerhalb der Karte.

   Die Ursache ist derselbe Stolperstein wie bei den Krümeln im Cookie-Hinweis:
   bei SVG ist der Bezugspunkt einer Transformation nicht die Mitte des
   Elements. Die Spiegelung klappt das Tier deshalb um eine Kante statt an Ort
   und Stelle, und sein sichtbarer Kasten wanders um seine eigene Breite nach
   aussen. `transform-box:fill-box` macht die eigene Fläche zum Bezug,
   `transform-origin:center` deren Mitte — dann bleibt das Tier stehen, wo die
   Zahlen es hinsetzen.

   Gilt für alle Breiten, nicht nur fürs Handy: am Schreibtisch war der Überhang
   nur nicht störend, weil daneben genug Platz war. */
.pet{
  transform-box:fill-box;
  transform-origin:center;
}

@media(min-width:401px) and (max-width:640px){
  .pet:not(.kk){
    width:46px!important;
    max-width:46px!important;
    left:auto!important;
    right:8px!important;
  }
}

/* ---- Geschlossene Aufklappmenüs schieben die Seite auf ----
   Die Menüs am Schreibtisch liegen absolut positioniert unter ihrem Menüpunkt
   und sind im Ruhezustand nur durchsichtig (`opacity:0`), nicht entfernt — für
   das Einblenden beim Überfahren. Sie zählen damit weiter zur Breite der Seite.
   Beim rechten Menüpunkt reicht ein 440px breites Menü über den Rand: bei
   1024px Bildschirmbreite wurde die Seite 1263px breit und bekam eine
   waagrechte Rollleiste, ohne dass etwas sichtbar überstand.

   Unter 1200px werden geschlossene Menüs deshalb ganz aus dem Fluss genommen.
   Das Einblenden über opacity entfällt in diesem Bereich — dafür rollt die
   Seite nicht mehr seitwärts. Ab 1200px ist genug Platz und die Überblendung
   bleibt. */
@media(max-width:1279px){
  .nav-item > .dropdown{display:none}
  .nav-item:hover > .dropdown,
  .nav-item:focus-within > .dropdown{display:block}
}

/* ---- Standortkarten auf sehr schmalen Geräten (320px, etwa iPhone SE) ----
   Die Karte hat `min-width:auto` und wurde damit so breit wie ihr Inhalt
   (319px bei 294px verfügbarer Breite). */
@media(max-width:400px){
  .location-grid{grid-template-columns:minmax(0,1fr)}
  .location-card{min-width:0}
  .location-card *{min-width:0}
}

/* Hamburger überall dort, wo die Menüleiste ausgeblendet ist */
@media(max-width:1279px){
  .hamburger{display:flex!important}
  /* Die Regel für geschlossene Aufklappmenüs ist damit unnötig — die ganze
     Leiste ist in diesem Bereich ausgeblendet. Sie bleibt als Absicherung
     stehen, falls die Umschaltbreite wieder verschoben wird. */
}

/* ---- Sehr schmale Geräte (320px, etwa iPhone SE erster Generation) ----
   Mehrere Karten haben `min-width:auto` und werden damit so breit wie ihr
   Inhalt, statt sich in den verfügbaren Platz zu fügen. Bei 320px Breite ragen
   sie über den Rand. Betroffen sind die Wertekarten auf „Über uns", die
   Standortkarten auf „Kontakt" und die Ablaufkarten auf „Therapieablauf".

   `min-width:0` an Karte und Inhalt erlaubt das Schrumpfen; `nowrap` an den
   kleinen Auszeichnungen wird aufgehoben, weil eine nicht umbrechende Zeile
   die Karte von innen aufdrückt. */
@media(max-width:360px){
  .val-cell, .loc-card, .rd-card,
  .val-cell > *, .loc-card > *, .rd-card > *,
  .loc-head, .rd-head, .val-cell h3, .val-cell p{min-width:0}
  .loc-kind, .rd-kind{white-space:normal}
  /* Zweispaltige Raster auf sehr schmalen Geräten einspaltig */
  .val-grid, .loc-grid, .rd-grid{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================================
   ABSTAND ZWISCHEN ÜBERSCHRIFT UND FOLGENDEM TEXT
   ============================================================================
   Gemessen lagen die Abstände zwischen 0 und 12 Pixel — je Abschnitt anders,
   weil sie an zwanzig Stellen einzeln gesetzt waren (teils als margin-bottom
   an der Überschrift, teils als margin-top am Absatz, an einer Stelle gar
   nicht). Der Text klebte an der Überschrift.

   Eine Regel für alle: der Nachbar einer h2 bekommt 18 Pixel Abstand nach
   oben, die Überschrift selbst keinen nach unten. Beides zusammen zu setzen
   führte vorher dazu, dass sich die Werte an einigen Stellen addierten und an
   anderen wegfielen.

   `:where()` hält die Spezifität bei null, damit ein Abschnitt, der aus
   gestalterischen Gründen einen anderen Abstand braucht, ihn ohne !important
   überschreiben kann. */
:where(h2) + :where(p, ul, ol, div, .ansatz-text, .lede, .section-lede){
  margin-top:18px;
}
:where(h2){margin-bottom:0}

/* Label über der Überschrift: etwas Luft nach unten, aber weniger als der
   Textabstand — es gehört zur Überschrift und nicht zum Absatz. */
:where(.label) + :where(h2){margin-top:8px}

/* h3 innerhalb von Karten: dort ist weniger Platz, deshalb ein kleinerer Wert */
:where(h3) + :where(p, ul, ol){margin-top:10px}

/* Auf schmalen Schirmen etwas weniger, sonst wird der Abschnitt sehr lang */
@media(max-width:640px){
  :where(h2) + :where(p, ul, ol, div, .ansatz-text, .lede, .section-lede){
    margin-top:14px;
  }
  :where(h3) + :where(p, ul, ol){margin-top:8px}
}

/* Zwei Abschnitte hatten den engen Abstand über eigene Regeln beziehungsweise
   ein style-Attribut. Die Inline-Angaben sind aus den Vorlagen entfernt (ein
   Inline-Wert gewinnt gegen jede Regel hier), diese beiden bleiben: */
/* .panel-head wird in preise.css geregelt (wird spaeter geladen) */
.ch-innen h2 + .ch-text{margin-top:16px}
@media(max-width:640px){

  .ch-innen h2 + .ch-text{margin-top:12px}
}

/* Überschriften in Karten: dort ist weniger Platz als in einem Abschnitt,
   deshalb 12 statt 18 Pixel — aber nicht die gemessenen 0 bis 6 Pixel, bei
   denen der Text an der Überschrift klebt. Die Klassen sind einzeln benannt,
   weil die Kartenregeln in den Seiten-Stylesheets liegen und spezifischer sind
   als eine allgemeine Regel. */
.pc-body h3 + p,
.price-card h3 + p,
.price-card h3 + ul,
.tm-head h3 + p,
.card h3 + p,
.rd-card h3 + p,
.loc-card h3 + p,
.val-cell h3 + p,
.device-card-body h3 + p{margin-top:12px}

/* ============================================================================
   BAUSTEINE, DIE AUF JEDER SEITE EINSETZBAR SIND
   ============================================================================
   Diese vier Bausteine kann die Redaktion überall hinzufügen. Ihre Regeln
   gehören deshalb in site.css und nicht in ein Seiten-Stylesheet — dort wären
   sie nur auf einer Seite wirksam. Genau dieser Fehler ist im Projekt schon
   dreimal aufgetreten. */

/* Hinweis-Kasten. .early-box gab es nur in alle-diagnosen.css; hier eine
   eigenständige Regel unter eigenem Namen. */
.hinweis-kasten{
  display:flex; gap:18px; align-items:flex-start;
  background:linear-gradient(135deg, var(--cream-bg) 0%, var(--white) 60%);
  border:1px solid var(--cream-border); border-radius:18px;
  padding:24px 26px;
}
.hinweis-kasten h3{margin:0; font-size:18px; color:var(--green-deepest)}
.hinweis-kasten p{color:var(--text-mid); font-size:15px; margin-top:10px}
.hinweis-symbol{font-size:30px; line-height:1; flex:0 0 auto}

/* Breites Bild mit Text darüber */
.bild-band{position:relative; min-height:320px; display:flex; align-items:center;
           overflow:hidden}
.bild-band-foto{position:absolute; inset:0; width:100%; height:100%;
                object-fit:cover}
.bild-band-schleier{position:absolute; inset:0}
.bild-band-text{position:relative; z-index:1; padding:48px 0}
.bild-band-text h2{color:var(--white); margin:0}
.bild-band-text p{color:rgba(255,255,255,.82); font-size:17px; margin-top:14px;
                  max-width:660px}

/* Grüne Fläche für den Text-Abschnitt */
.section-green{background:var(--green-deepest)}
.section-green h2, .section-green .label{color:var(--white)}
.section-green p, .section-green li{color:rgba(255,255,255,.8)}

@media(max-width:640px){
  .hinweis-kasten{flex-direction:column; gap:12px; padding:20px 18px}
  .bild-band{min-height:240px}
  .bild-band-text{padding:32px 0}
  .bild-band-text p{font-size:15px}
}

/* ============================================================================
   KARTEN-RASTER (Baustein „Karten mit Text")
   ============================================================================
   Diese Regeln standen als .val-* nur in ueber-uns.css. Der Baustein ist auf
   jeder Seite einsetzbar, deshalb gehören sie nach site.css — genau dieser
   Fehler ist im Projekt schon mehrfach aufgetreten.

   Die alten Namen bleiben in ueber-uns.css stehen, damit dort nichts
   umbricht; hier die Fassung unter eigenem Namen. */
.karten-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* Vier Spalten und KEINE Regel für schmale Fenster: auf dem Telefon standen
   die Karten weiter zu viert, liefen über den Rand und der Rahmen wurde vom
   Bildschirm abgeschnitten. Gemeldet von Alex am 29.09.2026
   („Kostenerstattung & Finanzierung").

   `minmax(0,1fr)` statt `1fr`: ohne die Null gilt für jede Zelle
   `min-width:auto`, und ein langes Wort schiebt die Spalte wieder über den
   Rand — derselbe Fehler, nur später sichtbar. */
@media(max-width:1000px){.karten-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.karten-raster{grid-template-columns:minmax(0,1fr);gap:14px}}
.karten-zelle{min-width:0;overflow-wrap:anywhere}
.karten-zelle{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:24px 22px;transition:all .3s}
.karten-zelle:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(42,58,26,.09);border-color:var(--cat-main)}
.karten-symbol{width:48px;height:48px;border-radius:13px;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:13px}
.karten-zelle h3{font-size:16.5px;margin-bottom:6px;line-height:1.3}
.karten-zelle p{color:var(--text-mid);font-size:13.5px;line-height:1.6}

@media(max-width:900px){ .karten-raster{grid-template-columns:repeat(2,1fr)} }
@media(max-width:400px){
  .karten-raster{grid-template-columns:minmax(0,1fr)}
  .karten-zelle, .karten-zelle > *, .karten-zelle h3, .karten-zelle p{min-width:0}
}
/* Am Handy kein Hebe-Effekt: :hover bleibt dort nach dem Antippen hängen */
@media(hover:none){ .karten-zelle:hover{transform:none; box-shadow:none} }

/* ============================================================================
   Bausteine aus „Über uns": Team-Karten, Gründerkarten, Zeitstrahl
   ============================================================================
   Diese Regeln standen nur in ueber-uns.css. Die drei Bausteine sind auf jeder
   Seite einsetzbar, deshalb gehören sie hierher — sonst wären sie ausserhalb
   von „Über uns" ohne Gestaltung. Derselbe Fehler ist im Projekt mehrfach
   aufgetreten.

   In ueber-uns.css bleiben sie stehen; doppelte gleiche Regeln richten keinen
   Schaden an, und ein Entfernen dort wäre ein zweiter Eingriff ohne Gewinn. */
.team-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px;margin-top:24px}
.team-chip{background:var(--white);border:1px solid var(--cream-border);border-radius:14px;padding:14px 12px 16px;
           text-align:center;transition:all .3s;position:relative}
.team-chip:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(42,58,26,.11);border-color:var(--cat-main)}
.team-chip img{width:96px;max-width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;
  display:block;margin:0 auto;transition:transform .45s}
.team-chip:hover img{transform:scale(1.04)}
.team-chip b{display:block;font-family:'Playfair Display',serif;font-size:14px;color:var(--green-deepest);margin-top:11px;line-height:1.3}
.team-chip span{font-size:11.5px;color:var(--text-muted);display:block;margin-top:2px;line-height:1.4}
.team-chip .tc-more{display:block;font-size:11.5px;font-weight:700;color:var(--cat-mid);margin-top:8px;transition:color .2s}
.team-chip:hover .tc-more{color:var(--cat-dark)}
.fnd-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fnd-card{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;padding:26px;display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:start;transition:all .3s;position:relative}
.fnd-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(42,58,26,.11);border-color:var(--cat-main)}
.fnd-photo{width:110px;aspect-ratio:3/4;object-fit:cover;border-radius:46% 54% 48% 52%/52% 44% 56% 48%;border:3px solid var(--cat-mid)}
.fnd-role{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cat-dark);margin-bottom:4px}
.fnd-card h3{font-size:19px;margin-bottom:8px}
.fnd-card p{color:var(--text-mid);font-size:13.5px;line-height:1.6}
.tl-list{display:flex;flex-direction:column;gap:14px}
.tl-row{display:grid;grid-template-columns:86px 1fr;gap:20px;align-items:start;position:relative;
        scroll-margin-top:calc(var(--header-h) + 26px)}
.tl-mark{display:flex;flex-direction:column;align-items:center;position:relative}
.tl-num{width:62px;height:62px;border-radius:50%;background:var(--white);border:4px solid var(--cat-main);
        display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;
        font-size:15px;color:var(--cat-dark);flex-shrink:0;z-index:2;transition:all .28s;box-shadow:0 4px 14px rgba(42,58,26,.12)}
.tl-card{background:var(--white);border:1px solid var(--cream-border);border-left:5px solid var(--ac,var(--cat-main));
         border-radius:16px;padding:20px 24px;transition:all .3s}
.tl-card h3{font-size:18px;margin-bottom:7px;line-height:1.32}
.tl-card p{color:var(--text-mid);font-size:14px;line-height:1.6}

/* ============================================================================
   BILDFORM DES BAUSTEINS „TEXT MIT FOTO"
   ============================================================================
   Der Baustein zeigt das Bild normalerweise in einem umrandeten Band
   (`intensiv-band`). Auf „Über uns" hatte der Abschnitt „Wer wir sind" eine
   andere Form: ein Foto in organischer Rundung mit einem farbigen Kreis
   dahinter. Über das Feld „bildform" ist beides möglich.

   Die Regeln standen als .wer-photo nur in ueber-uns.css — der Baustein ist auf
   jeder Seite einsetzbar, deshalb hier. */
.tf-rund{
  display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center;
}
.tf-rund-bild{position:relative; max-width:230px}
.tf-rund-bild img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:48% 52% 45% 55%/50% 42% 58% 50%;
  border:4px solid var(--cat-mid);
}
/* Der Kreis dahinter. z-index:-1 setzt ihn hinter das Bild; das wirkt nur,
   wenn der Elternkasten position:relative hat — deshalb .tf-rund-bild. */
.tf-rund-bild::before{
  content:''; position:absolute; width:70px; height:70px; border-radius:50%;
  background:var(--gold-mid); bottom:-12px; right:-8px; z-index:-1; opacity:.75;
}
@media(max-width:760px){
  .tf-rund{grid-template-columns:1fr; gap:22px}
  .tf-rund-bild{max-width:180px}
}

/* ============================================================================
   Baustein „Karten mit Foto und Schlagwörtern"
   ============================================================================
   Die Regeln standen nur in apartments.css. Der Baustein ist auf jeder Seite
   einsetzbar, deshalb hier — sonst wäre er ausserhalb der Apartment-Seite ohne
   Gestaltung. */
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ap-card{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:all .3s;position:relative}
.ap-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(42,58,26,.13);border-color:var(--cat-main)}
.ap-photo{aspect-ratio:4/3;overflow:hidden}
.ap-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.ap-card:hover .ap-photo img{transform:scale(1.06)}
.ap-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.ap-tagline{font-size:12.5px;font-style:italic;color:var(--cat-dark);margin-bottom:12px}
.ap-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ap-tag{font-size:11.5px;background:var(--cat-light);border:1px solid var(--cat-mid);border-radius:14px;padding:4px 10px;color:var(--cat-deeptext);font-weight:600}
.ap-link{font-size:13.5px;font-weight:700;color:var(--cat-dark);display:inline-flex;align-items:center;gap:5px;transition:gap .2s}
.ap-card:hover .ap-link{gap:10px}

/* ============================================================================
   Baustein „Kasten mit Schaltfläche"
   ============================================================================
   Die Regeln standen als .jobs-box nur in unser-team.css. Der Baustein ist auf
   jeder Seite einsetzbar, deshalb hier. */
.jobs-box{background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 58%);border:2px solid var(--gold-main);
          border-radius:22px;padding:34px 36px;position:relative;overflow:visible;box-shadow:0 16px 40px rgba(196,154,40,.15)}
.jobs-box h3{font-size:23px;margin-bottom:9px}
.jobs-box p{color:var(--text-mid);font-size:14px;line-height:1.6;margin-bottom:18px;max-width:760px}

/* Name und Funktion unter dem runden Foto (Baustein „Text mit Foto").
   Entspricht .wel-name aus therapieablauf.css — der Baustein ist überall
   einsetzbar, deshalb hier. */
.tf-rund-name{margin-top:14px; text-align:center; max-width:230px}
.tf-rund-name b{display:block; font-size:14.5px; color:var(--green-deepest)}
.tf-rund-name span{font-size:12.5px; color:var(--text-muted)}

/* Hervorgehobener Satz im Baustein „Text mit Foto".
   Entspricht .wel-quote aus therapieablauf.css — der Baustein ist überall
   einsetzbar, deshalb hier. */
.tf-zitat{border-left:4px solid var(--gold-main);padding:14px 0 14px 18px;margin-top:18px;font-family:'Playfair Display',serif;font-style:italic;font-size:18px;color:var(--green-deepest);line-height:1.5}

/* ============================================================================
   Schrittfolge bei sehr schmalen Bildschirmen
   ============================================================================
   Bei 320 Pixeln war die Seite 5 Pixel breiter als das Fenster. Kein Element
   überschritt den Rand — die Ursache lag im Raster: `grid-template-columns:
   var(--railw) 1fr` schrumpft die zweite Spalte nicht unter die Mindestbreite
   ihres Inhalts. Ein langes Wort oder eine Zahl drückt die Spalte auf und das
   Raster wird breiter als sein Kasten.

   `minmax(0, 1fr)` erlaubt das Schrumpfen; `min-width:0` an den Kindern
   verhindert dasselbe eine Ebene tiefer. Derselbe Fall wie zuvor bei den
   Filterknöpfen und den Standortkarten. */
@media(max-width:520px){
  .road .rd-step{grid-template-columns:var(--railw) minmax(0, 1fr)}
  .road .rd-card, .road .rd-card > *{min-width:0}
  .road .rd-card{overflow-wrap:anywhere}
}

/* ============================================================================
   Untermenü am rechten Rand
   ============================================================================
   Die Untermenüs sind links am Menüpunkt ausgerichtet und 440 Pixel breit. Bei
   den letzten Punkten der Leiste ragten sie über den rechten Fensterrand hinaus —
   auf der englischen Fassung deutlicher, weil die Beschriftungen länger sind und
   die Punkte weiter rechts stehen.

   `right:0` beim letzten Menüpunkt richtet sein Untermenü nach rechts aus; die
   Breitenbegrenzung fängt schmale Fenster ab. */
.dropdown{max-width:min(440px, calc(100vw - 32px))}
.dropdown.wide{min-width:min(440px, calc(100vw - 32px))}

/* Ein Untermenü, das über den rechten Rand hinausreicht, wird nach rechts
   ausgerichtet. Über die Anzahl der Nachbarn zu zählen genügt nicht: in der
   Kopfzeile stehen zehn Punkte, und der überstehende war der sechste — nicht
   einer der letzten zwei. Deshalb entscheidet JavaScript, gemessen an der
   tatsächlichen Breite (siehe assets/js/app.js). */
.dropdown.nach-links{left:auto; right:0}

/* Kein waagrechtes Scrollen durch ein Untermenü.
   Das JavaScript oben richtet ein überstehendes Untermenü nach rechts aus. Bis es
   läuft — und bei Fensterbreiten, bei denen das Menü trotzdem ein paar Pixel
   übersteht — verhindert diese Regel, dass die ganze Seite waagrecht scrollbar
   wird. `clip` und nicht `hidden`: `hidden` macht aus dem Element einen
   Scroll-Behälter und bricht `position:sticky` in der Kopfzeile. */
body{overflow-x:clip}

/* ============================================================================
   Bild gross anzeigen
   ============================================================================
   Die Bildleisten trugen eine Lupe, aber kein Klick öffnete etwas. Diese Regeln
   gehören zu assets/js/bild-lupe.js. */
.ist-lupe{cursor:zoom-in}
.ist-lupe:focus-visible{outline:3px solid var(--gold-main); outline-offset:2px}
body.lupe-aktiv{overflow:hidden}
.lupe-overlay{position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(20,26,14,.88)}
.lupe-overlay.offen{display:flex}
.lupe-box{position:relative; max-width:min(1100px, 94vw); text-align:center}
.lupe-bild{max-width:100%; max-height:76vh; border-radius:12px; background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lupe-text{color:#fff; margin:14px auto 0; max-width:70ch; font-size:14.5px; line-height:1.5}
.lupe-zaehler{color:rgba(255,255,255,.7); margin:6px 0 0; font-size:13px}
.lupe-zu{position:absolute; top:-14px; right:-14px; width:40px; height:40px;
  border:none; border-radius:50%; background:#fff; color:var(--text-dark);
  font-size:24px; line-height:1; cursor:pointer}
.lupe-nav{position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border:none; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--text-dark);
  font-size:26px; line-height:1; cursor:pointer}
.lupe-vor{left:-58px}
.lupe-nach{right:-58px}
@media(max-width:900px){
  .lupe-vor{left:6px}
  .lupe-nach{right:6px}
  .lupe-zu{top:6px; right:6px}
}

/* Verweis von der Gerätekarte auf die ausführliche Beschreibung. */
.device-mehr{display:inline-block; margin-top:10px; font-size:13.5px; font-weight:700;
  color:var(--cat-dark); text-decoration:none; border-bottom:1px solid currentColor}
.device-mehr:hover{opacity:.75}
/* Damit die Sprungmarke nicht unter der Kopfzeile landet. */
.gal-item[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* Hinweis-Kasten mit Foto: links Text, rechts Bild. Ohne Foto bleibt der Kasten
   mittig wie bisher. */
.jobs-box.hat-foto{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:34px; align-items:center; text-align:left}
.jobs-box.hat-foto .jobs-text{max-width:56ch}
.jobs-box.hat-foto .jobs-foto img{width:100%; height:auto; border-radius:16px; display:block}
@media(max-width:820px){
  .jobs-box.hat-foto{grid-template-columns:1fr; text-align:center}
  .jobs-box.hat-foto .jobs-text{max-width:none}
  .jobs-box.hat-foto .jobs-foto{order:-1}
}

/* Trennlinie zwischen Fragen.
   `--cream-border` (#EDE7DC) liegt zu dicht an der Cremefläche (#E2EADC): auf
   „Apartments" und „Preise" stand die FAQ auf Creme und die Linie war unsichtbar.
   Ein durchscheinendes Dunkelgrün wirkt auf jedem Untergrund — weiss, creme,
   grün — und bleibt so zurückhaltend wie gedacht.

   Steht hier und nicht in den elf Seiten-Stylesheets, in denen die Regel
   ursprünglich stand: eine Linie soll überall gleich aussehen. */
.faq-item{border-bottom:1px solid rgba(42, 58, 26, .14)}

/* Sprachschalter: ein zusammenhaengendes Feld statt zweier loser Eintraege mit
   Schraegstrich. Die laufende Sprache steht als heller Knopf darin — so ist auf
   einen Blick klar, wo man ist und wohin man wechseln kann. */
.sprach-schalter{display:inline-flex;align-items:center;gap:2px;padding:3px;
  background:rgba(42,58,26,.07);border:1px solid rgba(42,58,26,.10);
  border-radius:999px}
.sprach-schalter a{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;padding:4px 9px;font-size:12px;font-weight:700;letter-spacing:.03em;
  color:rgba(42,58,26,.62);text-decoration:none;border-radius:999px;
  transition:background .15s,color .15s}
.sprach-schalter a:hover{color:var(--green-deepest);background:rgba(255,255,255,.55)}
.sprach-schalter a.aktiv{color:var(--green-deepest);background:#fff;
  box-shadow:0 1px 3px rgba(42,58,26,.14)}
.sprach-schalter a.aktiv:hover{background:#fff}

/* Der Blog-Eintrag wird hervorgehoben.
   **Zwei Anlaeufe waren falsch:** ein goldener Punkt verschwand auf dem gelben
   Band — zwei helle Warmtoene nebeneinander loesen sich ineinander auf. Ein
   gruener Punkt war sichtbar, stiess aber an den Nachbarn „Kontakt".

   Eine leichte Plakette braucht keinen Platz daneben und ist auf jedem
   Untergrund des Kopfbands zu erkennen. */
.nav-link-blog{
  background:rgba(42,58,26,.09);
  border:1px solid rgba(42,58,26,.14);
  border-radius:999px;
  padding-left:12px;padding-right:12px;
}
.nav-link-blog:hover{background:rgba(42,58,26,.16);border-color:rgba(42,58,26,.28)}

/* Auf breiten Bildschirmen etwas mehr Raum, aber nicht ueber die ganze Breite:
   1660 und 1800 waren zu viel — die Kopfzeile lief dann quer ueber den ganzen
   Bildschirm und stand nicht mehr im Verhaeltnis zum Inhalt darunter. 1300
   reicht, damit sich die Eintraege loesen, ohne dass das Band ausufert. */
/* **1300 reichen mit den Sinnbildern nicht.**
   Gemessen bei 1440: Logo 113 + Menue 1045 + rechte Seite 225 + Abstand = 1397.
   Alles Weitere waere von den Namen selbst abgezwackt worden — jeder Pixel dort
   haengt an einem Wort oder einem Sinnbild, waehrend im Band nur Luft fehlt.

   Deshalb 1400 statt 1300. Das ist knapp ueber der gewuenschten Grenze, aber
   weit entfernt von „ueber die ganze Breite": bei einem Bildschirm von 1920
   bleiben links und rechts je 260 Pixel Rand. */
@media (min-width: 1400px) {
  .header-inner { max-width: 1400px; }
}

/* ── Mittlere Bildschirme: der Terminknopf wurde abgeschnitten ────────────────
   Gemessen bei 1440 Pixeln: Logo 113 + Menue 1130 + rechte Seite 256 = 1499 bei
   1300 verfuegbaren. Der Ueberschuss ging zulasten des Knopfes ganz rechts —
   er lief aus dem Band heraus, waehrend links neben dem Logo noch Platz war.

   Zwei Massnahmen, beide dort, wo am wenigsten verloren geht:

   **Die Sinnbilder vor den Therapienamen entfallen.** Sechs Bilder mal achtzehn
   Pixel sind gut hundert — und der Name allein sagt dasselbe. Auf grossen
   Bildschirmen bleiben sie.

   **Engere Abstaende.** Bei zehn Eintraegen bringen drei Pixel je Seite noch
   einmal sechzig.

   Ein Knopf, der auf halber Strecke abgeschnitten ist, wiegt schwerer als ein
   fehlendes Sinnbild: er ist der Weg zum Termin. */
/* Die Kopfzeile ist auf 1300 Pixel begrenzt — auch auf einem Bildschirm von
   1920. Der Platz im Band haengt also nicht von der Bildschirmbreite ab, und die
   folgenden Regeln gelten ueberall.

   **Die Sinnbilder bleiben.** Sie gehoeren zum Auftritt und waren der falsche
   Sparposten; die noetigen Pixel kommen aus lauter Kleinigkeiten, die niemand
   vermisst: etwas kleinere Sinnbilder, engere Abstaende, ein schmalerer Pfeil,
   kein Trennstrich. */
.nav-link .ico { font-size: 12px; }
.nav-link { padding: 7px 5px; font-size: 13px; gap: 2px; }
.nav-arrow { font-size: 7px; margin-left: 1px; }
.nav-logo { margin-right: 8px; }
.nav-link-blog { padding-left: 9px; padding-right: 9px; }
/* Der Trennstrich vor der rechten Seite entfaellt — bei diesem Platz zaehlt
   jeder Pixel mehr als eine Linie. */
.nav-divider { display: none; }

/* Damit das Menue ueberhaupt schrumpfen darf: ohne `min-width:0` weigert sich
   ein Flex-Element, unter seine Inhaltsbreite zu gehen — es waechst dann nach
   rechts aus dem Band heraus, statt enger zu werden.

   **Aber Schrumpfen allein genuegt nicht.** Beim ersten Versuch passte der Knopf
   zwar, dafuer schob sich „Kontakt" ueber den Sprachschalter: das Menue wurde
   schmaler als sein Inhalt und lief in den Nachbarn. Ein Mindestabstand nach
   rechts haelt beide auseinander, und `overflow:hidden` verhindert, dass ein
   Eintrag darueber hinausragt. */
/* **`overflow:hidden` war der falsche Weg.** Es verhinderte zwar das Herausragen,
   aber die Eintraege wurden dann einfach abgeschnitten — auf breiten
   Bildschirmen ueberlappte „Kontakt" plötzlich den Sprachschalter, obwohl dort
   reichlich Platz ist. Ein Element, das zu wenig Raum bekommt, soll enger
   werden, nicht abgeschnitten.

   Deshalb nur: das Menue darf schrumpfen (`min-width:0`), die rechte Seite
   nicht (`flex-shrink:0`), und dazwischen bleibt ein fester Abstand. */
.nav-main {
  min-width: 0;
  margin-right: 14px;
}
.nav-right { flex-shrink: 0; }

/* Die letzten fehlenden Pixel kommen aus der rechten Seite, nicht aus dem Menue.
   **Gemessen:** Sprachschalter 81, Knopf 154, zusammen mit dem Zwischenraum 239.
   Der Knopf traegt links und rechts je 18 Pixel Polster; 13 genuegen ihm ebenso,
   und der Schalter kommt mit etwas engeren Feldern aus. Zusammen rund achtzig —
   genau das, was noch fehlte.

   Warum nicht am Menue: dort haengt an jedem Pixel ein Wort oder ein Sinnbild,
   hier nur Luft. */
.nav-right { gap: 8px; }
.btn-header { padding-left: 13px; padding-right: 13px; }
.sprach-schalter a { min-width: 28px; padding-left: 7px; padding-right: 7px; }

/* ===== erwachsene.css ===== */
/* Aus den abgenommenen Prototypen extrahiert, Zeichen für Zeichen.
   NICHT von Hand ändern: die Prototypen sind die Quelle der Wahrheit.
   Erzeugt von tools/prototyp-auslesen.php am 31.08.2026. */

/* ══════════════════════════════════════════════════════════════
   HOME4MOTION Erwachsene — Themenschicht über site.css
   Nur Farben. Aufbau, Abstände und Verhalten bleiben unverändert
   aus dem Kids-Projekt übernommen.

   Grundlage: adult_farbsystem.pdf (Brand Kit v1.0)
     #EC7E41  Orange     — primärer CTA-Akzent
     #51596E  Dunkelblau — Haupt-Dunkelton, Überschriften
   ══════════════════════════════════════════════════════════════ */

:root{
  /* --gold-* trug im Kids-Projekt die Akzentfarbe (Gelb).
     Hier ist das das Orange der Erwachsenenmarke. Die Variablennamen
     bleiben, damit site.css unverändert bleiben kann; bei der PHP-Umsetzung
     werden sie in --akzent-* umbenannt. */
  --gold-main:#EC7E41; --gold-light:#FDF1E9; --gold-mid:#F8D9C3;
  --gold-dark:#D2652A; --gold-deeptext:#8A3F10;

  /* --green-* trug den Dunkelton. Hier das Dunkelblau. */
  --green-main:#5F6880;  --green-light:#EEF0F4; --green-mid:#C9CEDA;
  --green-dark:#414A5E;  --green-deepest:#51596E; --green-text:#3A4053;

  /* Flächen: kühles Neutral statt warmem Creme */
  /*
   * Der Rand war zu hell.
   *
   * Im Kids-Projekt steht #E8DFC9 auf cremefarbenem Grund — deutlich dunkler
   * als die Fläche. Beim Umsetzen auf das kühle Neutral ist dieser Abstand
   * verlorengegangen: #E5E8EF gegen die Fläche #EEF0F4 ergibt ein
   * Kontrastverhältnis von 1.08:1, also praktisch nichts. Auf der
   * Diagnoseseite verschwanden die Karten dadurch im Hintergrund — gemeldet
   * von Alex am 17.09.2026.
   *
   * #D3D9E4 stellt den Abstand her: 1.42:1 auf Weiss, 1.33:1 auf der hellen
   * Fläche, 1.24:1 auf der getönten — überall mindestens so viel wie im
   * Kids-Projekt, ohne dass der Rand als Strich auffällt.
   *
   * Die Variable steht an 283 Stellen; deshalb hier und nicht je Karte.
   */
  --cream-bg:#F7F8FA; --cream-border:#D3D9E4;

  /* Neutrale Seitenfarbe (Startseite, Hub-Seiten) */
  --cat-main:#51596E; --cat-dark:#3A4053; --cat-light:#EEF0F4;
  --cat-mid:#C9CEDA;  --cat-deeptext:#2E3342;

  /* Fachbereichsfarben aus dem Farbsystem */
  --t-physio:#91ABDA; --t-physio-d:#4A6FA5; --t-physio-l:#E6EBF2;
  --t-ergo:#597C57;   --t-ergo-d:#3E5A3C;   --t-ergo-l:#E2EDE8;
  --t-logo:#F3A69C;   --t-logo-d:#B05A4E;   --t-logo-l:#FCE2E3;
  --t-neuro:#958FB7;  --t-neuro-d:#665E8A;  --t-neuro-l:#CEBFD8;
  --t-recoverix:#6587B7; --t-recoverix-d:#3F5E8C; --t-recoverix-l:#BDD4E9;
  --t-intensiv:#B06A10;  --t-intensiv-d:#412402;  --t-intensiv-l:#F0D6AE;
  --t-studien:#AB6D75;   --t-studien-d:#7E4750;   --t-studien-l:#E0C0C8;
  --t-apart:#CAD2EB;  --t-apart-d:#7C8399;  --t-apart-l:#E5E4F1;
}

/* ── Kopfzeile: dunkelblaues Band, Orange nur für den Terminknopf ────── */
.site-header{background:linear-gradient(120deg,#5A6278 0%,#51596E 55%,#474F63 100%);
  box-shadow:0 2px 18px rgba(58,64,83,.24)}
.nav-link,.nav-right-link{color:#fff}
.nav-link:hover,.nav-item:hover>.nav-link{background:rgba(255,255,255,.13)}
.nav-divider,.nav-sep{background:rgba(255,255,255,.22)!important}
.btn-header{background:var(--gold-main);color:#fff}
.btn-header:hover{background:var(--gold-dark);box-shadow:0 4px 12px rgba(210,101,42,.4)}
.hamburger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
.ham-bar{background:#fff}
.sprach-schalter{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.sprach-schalter a{color:rgba(255,255,255,.75)}
.sprach-schalter a:hover{color:#fff;background:rgba(255,255,255,.18)}
.sprach-schalter a.aktiv{color:var(--green-deepest);background:#fff}

/* ── Hinweisband über der Kopfzeile (neu für die Erwachsenenseite) ───── */
.hinweis-band{background:var(--gold-main);color:#fff}
.hinweis-band .wrap{display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;padding:9px 40px;font-size:13.5px;font-weight:600}
.hinweis-band a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hinweis-band a:hover{opacity:.85}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,#5A6278 0%,#3A4053 68%)}
.hero.has-image{background-image:linear-gradient(100deg,rgba(40,45,60,.72) 0%,rgba(45,50,66,.64) 62%,rgba(50,56,72,.24) 84%,rgba(50,56,72,.08) 100%),var(--banner-image)}
.hero-badge{background:rgba(35,40,54,.5);color:#DDE3EF;border-color:rgba(145,171,218,.45)}
.hero h1,.hero-lede{text-shadow:0 2px 14px rgba(20,24,34,.5)}

/* ── Knöpfe: Orange trägt weisse Schrift ─────────────────────────────── */
.btn-gold{background:var(--gold-main);color:#fff}
.btn-gold:hover{background:var(--gold-dark);color:#fff;box-shadow:0 8px 20px rgba(210,101,42,.35)}
.btn-ghost:hover{border-color:var(--gold-main);color:var(--gold-dark);
  box-shadow:0 6px 16px rgba(236,126,65,.14)}

/* ── Dunkle Bänder ──────────────────────────────────────────────────── */
.cta-band{background:#3A4053!important}
/* Die Fusszeile ist eine Stufe dunkler als das CTA-Band. Beide hatten
   #3A4053: steht das Band am Seitenende, lief es ohne Kante in die
   Fusszeile ueber und wirkte wie ein Block. */
.footer{background:#2B303D;border-top:1px solid rgba(255,255,255,.09)}
.mobile-menu{background:#2B303D}
.mob-cta-strip{background:var(--gold-main)}
.mob-cta-strip a{color:#fff}

/* ── Kennzahlen: Zahlen in Orange statt Gold ─────────────────────────── */
.stat b,.stat-cell b{color:var(--gold-dark)}

/* ── Brücke zur Kinderseite: gelber Kids-Akzent, nicht grün ──────────── */
.adult.kids-bridge{--a-orange:#EBC35F;--a-blue:#C49A28;--a-blue-l:#FBF4D8}
.adult.kids-bridge h2{color:#7A5800}
.adult.kids-bridge .adult-badge{background:#EBC35F;color:#4A3600;
  box-shadow:0 4px 12px -2px rgba(196,154,40,.55)}
.adult.kids-bridge .sub{color:#B07E10}
.adult.kids-bridge .btn{background:#EBC35F;border-color:#EBC35F;color:#4A3600}
.adult.kids-bridge .btn:hover{background:#C49A28;border-color:#C49A28;color:#fff}

/* ── Geplant, noch ohne Ziel: „Mein Bereich" ─────────────────────────── */
/* Steht als Text, damit der Platz in Kopf- und Fusszeile schon belegt ist.
   Sobald die Anmeldung existiert, wird aus dem <span> ein <a>. */
.nav-geplant{padding:7px 8px;border-radius:8px;font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.5);white-space:nowrap;cursor:default;
  border:1px dashed rgba(255,255,255,.28)}
.footer-geplant{display:block;font-size:12.5px;color:rgba(255,255,255,.3);
  padding:2px 0;line-height:1.45;cursor:default}

/* ── Sechs Therapiekarten: drei Spalten statt fünf ───────────────────── */
/* Die Kids-Seite hat fünf Fachbereiche und damit eine gefüllte Reihe.
   Hier sind es sechs Karten — in einem Fünfer-Raster stünde die sechste
   allein in der zweiten Reihe. */
.th-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.th-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.th-grid{grid-template-columns:1fr}}

/* ── Fehlende Regeln aus dem Kids-Stylesheet nachgetragen ────────────── */
/* `.mehr-link` und `.bild-folgt` stehen im Markup der Bausteine, haben in
   assets/css/site.css aber keine Regel. Sichtbare Folge im Kids-Projekt:
   der Weiterlesen-Verweis erscheint als schwarzer Text ohne Auszeichnung.
   Hier ergänzt — bitte auch dort nachziehen. */
.mehr-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;
  color:var(--cat-dark);border-bottom:2px solid var(--gold-main);padding-bottom:2px;
  transition:gap .18s,color .18s}
.mehr-link:hover{gap:11px;color:var(--gold-dark)}
.bild-folgt{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;width:100%;height:100%;color:var(--cat-dark);opacity:.42;font-size:11.5px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.bild-folgt svg{width:30px;height:30px}

/* `.tt-initialen` (Rückfall, wenn kein Foto vorliegt) hat in site.css
   ebenfalls keine Regel — die Spalte des Rasters bleibt dann leer. */
.tt-initialen{width:96px;aspect-ratio:3/4;border-radius:14px;border:2.5px solid var(--cat-mid);
  background:var(--cat-light);display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:34px;font-weight:700;color:var(--cat-dark)}

/* ── Menüleiste: die Erwachsenenseite hat zehn Einträge statt acht ────── */
/* Der Kids-Grenzwert (1420px) reicht hier nicht: „Neuroorthopädie",
   „Physiotherapie" und „Informationstermin" zusammen brauchen mehr Platz.
   Gemessen werden muss noch — 1500px ist ein erster Wert. */
@media(min-width:1420px) and (max-width:1499px){
  html[lang^="de"] .nav-main, html[lang^="de"] .nav-right{display:none}
  html[lang^="de"] .hamburger{display:flex}
}
@media(min-width:1500px){
  html[lang^="de"] .nav-main, html[lang^="de"] .nav-right{display:flex}
  html[lang^="de"] .hamburger{display:none}
}

/* ── Textbreite der Überschriftenblöcke ──────────────────────────────── */
/* `.wrap` ist 1320 breit, der Hero begrenzt seinen Inhalt aber auf 1200.
   Ohne dieselbe Grenze laufen Überschrift und Vorspann eines Abschnitts
   40 Pixel weiter nach rechts als die Überschrift im Hero darüber — die
   Fluchtlinie bricht mitten auf der Seite. */
.section-head{max-width:1200px}

/* ── Krümel direkt über dem Kennzahlenband ───────────────────────────── */
/* `.stats-card` zieht sich mit margin-top:-20px unter den Hero. Steht
   dazwischen die Krümelleiste, schiebt sich die Karte über deren Text.
   Sitzt das Band hinter der Leiste, entfällt der Zug nach oben. */
.crumb-bar + .stats-band{padding-top:24px}
.crumb-bar + .stats-band .stats-card{margin-top:0}
@media(max-width:900px){
  .crumb-bar + .stats-band .stats-card{margin-top:0}
}
@media(max-width:640px){
  .crumb-bar + .stats-band .stats-card{margin-top:0}
}

/* ── Marke in der Kopfzeile ──────────────────────────────────────────── */
/* Das Logo ist gruen-orange und steht auf dem dunkelblauen Band. Es hat
   Schrift unter dem Zeichen, deshalb etwas hoeher als ein reines Zeichen. */
.nav-logo img{height:42px;width:auto}
@media(max-width:1100px){.nav-logo img{height:36px}}
@media(max-width:600px){.nav-logo img{height:32px}}

/* ── Hinweisband oben ────────────────────────────────────────────────── */
/* Oranger Text auf dunklem Grund. Steht hier und nicht in den
   Seitendateien, damit es auf jeder Seite gleich ist. */
.hinweis-band{background:#3A4053;color:var(--gold-main)}
.hinweis-band a{color:var(--gold-main)}
.hinweis-band a:hover{color:#FFFFFF}

/* ── Standortkarte ───────────────────────────────────────────────────── */
/* Die Beschriftungsspalte war 84 Pixel breit — lange Beschriftungen wie
   „Telefonzeiten Büro" oder „Therapiezeiten" liefen dadurch in den Wert
   hinein. Breiter und mit mehr Abstand zwischen den Spalten. */
.location-row{grid-template-columns:26px 128px 1fr;gap:8px 16px;
  align-items:start}
.location-row b{line-height:1.35}
@media(max-width:600px){
  .location-row{grid-template-columns:26px 1fr;row-gap:2px}
  .location-row b{grid-column:2}
  .location-row span{grid-column:2}
}


/* ── Porträt im Baustein „Text mit Foto“ (Bildform „rund“) ───────────────
   site.css bringt aus dem Kids-Projekt eine organische, unregelmässige
   Rundung mit (`border-radius:48% 52% 45% 55%/…`) und einen goldenen Kreis
   dahinter. Auf der Erwachsenensite gilt: Rechtecke mit weichen Ecken, keine
   organischen Formen, kein Kids-Schmuck. */
.tf-rund-bild img{
  border-radius:18px;
  border-color:var(--cat-mid);
}
.tf-rund-bild::before{content:none}

/* Dieselbe organische Rundung steckt an sechs weiteren Stellen im aus dem
   Kids-Projekt übernommenen CSS. Alle auf Rechteck mit weichen Ecken. */
.ansatz-photo-wrap img,
.warum-photo-wrap img,
.wel-photo img,
.wer-photo img,
.per-photo img,
.fnd-photo{
  border-radius:18px;
}

/* ── Menüleiste ab 1200 Pixeln, nicht erst ab 1500 ───────────────────────
   Die bisherigen Grenzen (Deutsch 1500, Englisch 1760) stammen aus einer
   Messung mit voller Schriftgrösse: darunter passte die Leiste wirklich
   nicht. Auf einem gewöhnlichen Notebook — 1440 oder 1512 Pixel — blieb
   damit nur der Burger, und das ist kein Menü für den Schreibtisch.
   Gemeldet von Alex am 18.09.2026.

   Statt der Grenze wird der Platzbedarf verändert: zwischen 1200 und 1700
   rücken die Punkte enger zusammen, die Schrift geht um einen Punkt zurück
   und der Knopf wird schmaler. Das sind rund 180 Pixel — genug für beide
   Sprachen. Oberhalb bleibt alles wie im Prototyp.
   ────────────────────────────────────────────────────────────────────── */
@media(min-width:1200px){
  html[lang^="de"] .nav-main, html[lang^="de"] .nav-right,
  html[lang^="en"] .nav-main, html[lang^="en"] .nav-right{display:flex}
  html[lang^="de"] .hamburger, html[lang^="en"] .hamburger{display:none}
}
@media(max-width:1199px){
  html[lang^="de"] .nav-main, html[lang^="de"] .nav-right,
  html[lang^="en"] .nav-main, html[lang^="en"] .nav-right{display:none}
  html[lang^="de"] .hamburger, html[lang^="en"] .hamburger{display:flex}
}

/* Der enge Gang: nur zwischen 1200 und 1700. */
@media(min-width:1200px) and (max-width:1700px){
  .nav-link{padding:7px 6px;font-size:13.5px;gap:2px}
  .nav-link .ico{font-size:12.5px}
  .nav-main{column-gap:0;margin-right:10px;padding-right:4px}
  .nav-right{gap:5px;margin-left:12px}
  .nav-right-link{padding:7px 6px;font-size:12px}
  .nav-divider{margin:0 4px}
  .btn-header{padding:8px 12px;font-size:12.5px}
  .sprach-schalter a{min-width:26px;padding-left:6px;padding-right:6px}
  .nav-logo img{height:38px}
}

/* Englisch braucht am meisten Platz — „Speech and language therapy“ und
   „Information appointment“. Bis 1500 deshalb noch eine Spur enger, statt
   die ganze Leiste hinter dem Burger verschwinden zu lassen. */
@media(min-width:1200px) and (max-width:1499px){
  html[lang^="en"] .nav-link{padding:7px 5px;font-size:13px}
  html[lang^="en"] .btn-header{padding:8px 10px;font-size:12px}
  html[lang^="en"] .nav-right-link{padding:6px 5px;font-size:11.5px}
}

/* ── Burgermenü: aktueller Punkt und Sprache ─────────────────────────────
   Die Auszeichnung setzt assets/js/app.js beim Laden; hier steht nur, wie
   sie aussieht. Orange ist die Farbe der Marke auf dem dunklen Band —
   dieselbe wie im Hinweisband darüber. */
.mob-aktiv{color:var(--gold-main) !important;font-weight:700}
.mob-sub-link.mob-aktiv{background:rgba(255,255,255,.06);border-radius:8px}
.mob-group-trigger.mob-gruppe-aktiv{color:var(--gold-main)}

/* Sprache neben dem Burgerknopf. Der Schalter der Kopfzeile steckt in
   `.nav-right` und ist eingeklappt mit weg; dieser hier erscheint genau
   dann, wenn der Burger da ist, und verschwindet, sobald die Leiste steht. */
.sprach-burger{display:none;align-items:center;gap:2px;margin-left:auto;
  padding:3px;border-radius:10px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2)}
.sprach-burger a{display:block;min-width:30px;text-align:center;
  padding:6px 8px;border-radius:7px;text-decoration:none;
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.8)}
.sprach-burger a:hover{background:rgba(255,255,255,.12);color:#FFFFFF}
.sprach-burger a.aktiv{background:var(--gold-main);color:#2B303D}

/* Der Burger behält seinen Platz rechts; der Schalter steht davor. */
.sprach-burger + .hamburger{margin-left:10px}

@media(max-width:1199px){
  .sprach-burger{display:flex}
}
@media(min-width:1200px){
  .sprach-burger{display:none}
}

/* ===== bausteine.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   Stylesheet der Bausteine — ERZEUGT von tools/bausteine-css.php.

   Ein Baustein lässt sich überall hinsetzen, seine Gestaltung muss deshalb
   auf jeder Seite geladen sein. Die Regeln hier stehen ursprünglich in den
   Stylesheets einzelner Prototypseiten und wären dort nur auf genau jener
   Seite wirksam.

   Nicht von Hand ändern: Änderungen gehören in den Prototyp, danach
     php tools/prototyp-auslesen.php --quelle=…
     php tools/bausteine-css.php --schreiben
   ══════════════════════════════════════════════════════════════════════════ */

/* ── aus alle-diagnosen.css ────────────────────────────────────────── */
/* Seitenregeln aus dem abgenommenen Prototyp alle-diagnosen.html,
   unveraendert uebernommen. */
.search-panel{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:20px 22px;margin-bottom:24px}
.search-hint{font-size:12.5px;color:var(--text-muted);margin-top:10px}
.search-hint button{background:none;border:none;color:var(--cat-dark);font-weight:700;font-family:inherit;font-size:12.5px;cursor:pointer;padding:0 2px;text-decoration:underline}
.dx-card{background:var(--white);border:1px solid var(--cream-border);border-left:5px solid var(--cat-main);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;transition:all .3s}
.dx-card.is-hidden{display:none}
.dx-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(42,58,26,.12);border-color:var(--cat-main)}
.dx-top{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.dx-icon{width:52px;height:52px;border-radius:14px;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0}
.dx-card h3{font-size:20px;margin:0}
.dx-card>p{color:var(--text-mid);font-size:13.5px;line-height:1.6;margin-bottom:14px}
.dx-sub-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.dx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.dx-ther{display:flex;flex-wrap:wrap;gap:7px;padding-top:14px;border-top:1px solid var(--cream-border);margin-bottom:14px}
.ther-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:14px;background:var(--pl);color:var(--pd)}
.ther-pill i{width:7px;height:7px;border-radius:50%;background:var(--pc);display:inline-block;font-style:normal}
.dx-link{font-size:14px;font-weight:700;color:var(--cat-dark);display:inline-flex;align-items:center;gap:5px;transition:gap .2s;margin-top:auto}
.dx-card:hover .dx-link{gap:10px}
.early-badge{position:absolute;top:-15px;left:36px;background:var(--cat-main);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:20px;box-shadow:0 4px 10px rgba(58,90,34,.3)}
.intro-text{color:var(--text-mid);font-size:14.5px;line-height:1.7;
  margin-top:8px;max-width:1200px}
.qa{background:var(--white);border:1.5px solid var(--cat-mid);
  border-radius:14px;margin-bottom:10px;transition:all .25s;overflow:hidden}
.qa[open]{border-color:var(--cat-main);
  box-shadow:0 8px 22px -8px rgba(58,64,83,.35)}
.qa summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:14px;padding:16px 20px;min-height:56px;font-weight:600;font-size:15px;
  color:var(--green-deepest);line-height:1.45;transition:background .18s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:var(--cat-light)}
.qa summary:focus-visible{outline:3px solid var(--cat-main);outline-offset:-3px}
.qa-mark{width:28px;height:28px;border-radius:50%;background:var(--cat-light);
  color:var(--cat-dark);display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;margin-left:auto;transition:all .25s}
.qa[open] .qa-mark{transform:rotate(180deg);background:var(--cat-main);
  color:#fff}
/* ── Suchfeld ────────────────────────────────────────────────────────── */
/* Form wie im abgenommenen Prototyp: helle Pille im weissen Kasten, feine
   Linie, Lupe links, Kreuz erst wenn etwas getippt ist. Zwei Aenderungen:
   groesser (44 Pixel waren zu klein zum Treffen) und ueber die ganze
   Breite des Kastens — die Huelle war im Prototyp ein Flexkind mit
   min-width und blieb deshalb schmal. */
.search-panel{padding:22px 24px}
/* position:relative ist Pflicht — Lupe und Kreuz liegen absolut in dieser
   Huelle. Beim Herausschneiden der Prototypregeln fiel die Zeile auf der
   Diagnosenseite weg, dadurch sassen beide Zeichen in der Bildschirmecke. */
.search-wrap{position:relative;display:block;width:100%;min-width:0;
  flex:none}
.search-ic{position:absolute;top:50%;transform:translateY(-50%);
  pointer-events:none}
.search-clear{position:absolute;top:50%;transform:translateY(-50%);
  border-radius:50%;cursor:pointer;line-height:1;display:none}
.search-clear:hover{background:var(--cat-main);color:#fff}
.search-clear.show{display:flex;align-items:center;justify-content:center}
@media(max-width:600px){
  .search-panel{padding:18px 16px}
  .search-clear{width:34px;height:34px}
}

/* ── aus alle-produkte.css ─────────────────────────────────────────── */
.disc-cell{background:var(--white);border:1px solid var(--cream-border);border-top:4px solid var(--dc);border-radius:14px;padding:18px 16px;text-align:left;cursor:pointer;font-family:inherit;transition:all .28s}
.disc-cell:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(42,58,26,.1);border-color:var(--dc)}
.disc-cell .ic{width:40px;height:40px;border-radius:11px;background:var(--dcl);display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:10px}
.disc-cell b{display:block;font-size:14.5px;color:var(--green-deepest);font-weight:700;margin-bottom:2px}
.disc-cell span{font-size:12.5px;color:var(--text-muted)}
.search-wrap{position:relative;min-width:260px;flex:1}
.prod-card{background:var(--white);border:1px solid var(--cream-border);border-left:5px solid var(--tc,var(--cat-main));border-radius:16px;padding:22px 22px;display:flex;flex-direction:column;transition:all .3s;position:relative}
.prod-card.is-hidden{display:none}
.prod-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(42,58,26,.12);border-color:var(--tc,var(--cat-main))}
.prod-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.prod-icon{width:44px;height:44px;border-radius:12px;background:var(--tcl,var(--cat-light));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.disc-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tcd,var(--cat-dark));background:var(--tcl,var(--cat-light));padding:3px 9px;border-radius:14px;display:inline-block}
.prod-card h3{font-size:17.5px;margin:2px 0 8px;font-family:'Playfair Display',serif}
.prod-card>p{color:var(--text-mid);font-size:13.5px;line-height:1.6;flex:1;margin-bottom:14px}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--cream-border)}
.prod-loc{font-size:12px;color:var(--text-muted);font-weight:600}
.prod-link{font-size:13.5px;font-weight:700;color:var(--tcd,var(--cat-dark));display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
.prod-card:hover .prod-link{gap:9px}
.path-card{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:24px 22px;transition:all .3s}
.path-card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(42,58,26,.1);border-color:var(--cat-main)}
.path-num{width:38px;height:38px;border-radius:11px;background:var(--cat-light);color:var(--cat-deeptext);font-family:'Playfair Display',serif;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.path-card h3{font-size:17px;margin-bottom:6px}
.path-card p{color:var(--text-mid);font-size:13.5px;line-height:1.6;margin-bottom:12px}
.path-card a.plink{font-size:13.5px;font-weight:700;color:var(--cat-dark)}

/* ── aus alle-therapien.css ────────────────────────────────────────── */
/* Fließtexte auf 1200 begrenzt, wie überall. */
.intro-text{color:var(--text-mid);font-size:14.5px;line-height:1.7;
  margin-top:8px;max-width:1200px}
.dx-link::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--cat-main);transition:width .22s}
.dx-link span{width:30px;height:30px;flex-shrink:0;border-radius:50%;
  background:var(--cat-light);border:1px solid var(--cat-mid);
  color:var(--cat-dark);font-size:14px;font-weight:700;
  font-family:'Source Sans 3',sans-serif;display:flex;align-items:center;
  justify-content:center;transition:all .22s}
.dx-link:hover{background:var(--cat-light);border-color:var(--cat-main);
  transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(58,64,83,.4)}
.dx-link:hover::before{width:8px}
.dx-link:hover span{background:var(--cat-main);border-color:var(--cat-main);
  color:#fff;transform:translateX(2px)}
}

.kids-hinweis{margin-top:24px;color:var(--text-mid);font-size:14px}

/* ── aus apartments.css ────────────────────────────────────────────── */
.why-cell{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:24px 22px;transition:all .3s}
.why-cell:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(42,58,26,.09);border-color:var(--cat-main)}
.why-ic{width:48px;height:48px;border-radius:13px;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:13px}
.why-cell h3{font-size:16.5px;margin-bottom:5px}
.why-cell p{color:var(--text-mid);font-size:13.5px;line-height:1.6}
.ap-text{color:var(--text-mid);font-size:14.5px;line-height:1.7;
  margin-top:10px;max-width:1200px}

/* ── aus diagnose-detail.css ───────────────────────────────────────── */
.chip .n{font-size:11.5px;opacity:.7;font-weight:700}
/* placeholder shown until a photo URL is supplied */
.gal-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--cat-deeptext)}
.gal-ph .ini{font-family:'Playfair Display',serif;font-size:44px;font-weight:700;opacity:.35;line-height:1}
.gal-ph .tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
.gal-kind{position:absolute;top:12px;left:12px;background:rgba(42,58,26,.82);color:var(--gold-main);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:20px;backdrop-filter:blur(4px)}
.gal-zoom{position:absolute;bottom:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:15px;opacity:0;transform:scale(.85);transition:all .25s}
.gal-item:hover .gal-zoom{opacity:1;transform:scale(1)}
.gal-kicker{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--cat-dark);margin-bottom:5px}
/* ===== LIGHTBOX ===== */
.lb{position:fixed;inset:0;z-index:400;background:rgba(26,36,16,.94);display:none;align-items:center;justify-content:center;padding:28px}
.lb.open{display:flex}
.lb-ph .ini{font-family:'Playfair Display',serif;font-size:72px;opacity:.4;line-height:1}
.lb-bar{display:flex;align-items:center;gap:12px;margin-top:12px}
.lb-count{font-size:13px;color:rgba(255,255,255,.6);margin-left:auto}
.lb-btn{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:var(--white);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.lb-btn:hover{background:var(--gold-main);border-color:var(--gold-main);color:var(--green-deepest)}
.lb-close{position:absolute;top:18px;right:20px;z-index:2}
.lb-nav.prev{left:14px}
.lb-nav.next{right:14px}
.explain-card .tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cat-dark);margin-bottom:8px}
@media(max-width:700px){
  }

/* Galerie: eine waagrechte Reihe auf dunklem Grund, wie auf der
   bestehenden Seite. Klick öffnet den Lichtkasten. */
.gal-band{background:#4A5168;padding:28px 0}
}
/* Die Knöpfe liegen über der Reihe, halb auf dem ersten und letzten
   Bild — so wie auf der Kids-Seite. */
.gal-huelle{position:relative}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;background:var(--white);
  border:1px solid var(--cream-border);color:#3A4053;font-size:20px;
  line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.3);transition:all .2s}
.gal-nav.prev{left:-14px}
.gal-nav.next{right:-14px}
.gal-nav:hover:not(:disabled){background:var(--gold-main);color:#fff;
  border-color:var(--gold-main)}
.gal-nav:disabled{opacity:.3;cursor:default}
@media(max-width:600px){
  .gal-nav{display:none}
  }

.gal-reihe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 10px}
}
.gal-reihe::-webkit-scrollbar{display:none}
.gal-reihe:focus-visible{outline:2px solid var(--gold-main);outline-offset:6px;
  border-radius:12px}
.gal-band .gal-item{flex:0 0 var(--w,260px);height:200px;scroll-snap-align:start;
  position:relative;padding:0;border:1px solid rgba(255,255,255,.16);
  border-radius:12px;overflow:hidden;cursor:zoom-in;background:none;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.gal-band .gal-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s}
.gal-band .gal-item:hover{transform:translateY(-4px);
  border-color:var(--gold-main);box-shadow:0 16px 34px rgba(0,0,0,.35)}
.gal-band .gal-item:hover img{transform:scale(1.05)}
.gal-band .gal-zoom{position:absolute;bottom:10px;right:10px;width:32px;
  height:32px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  color:#3A4053;opacity:0;transform:scale(.85);transition:all .22s}
.gal-band .gal-item:hover .gal-zoom{opacity:1;transform:scale(1)}
@media(max-width:600px){
  .gal-band .gal-item{height:160px;flex-basis:min(var(--w,260px),70vw)}
}

/* ── aus faq.css ───────────────────────────────────────────────────── */
/* Seitenregeln aus assets/css/faq.css des Kids-Projekts, unveraendert
   uebernommen (.tools, .faq-cat, .cat-head, .qa, .end-card). */
/* ===== FAQ PAGE ===== */
.tools{position:sticky;top:var(--header-h);z-index:60;background:var(--cream-bg);border-bottom:1px solid var(--cream-border);box-shadow:0 4px 14px rgba(42,58,26,.05)}
.hit-count{font-size:13px;color:var(--text-muted);margin-top:10px}
/* categories */
.faq-cat{margin-bottom:34px}
.faq-cat.is-hidden{display:none}
.cat-ic{width:52px;height:52px;border-radius:14px;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.cat-kicker{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px}
.cat-count{margin-left:auto;font-size:12px;font-weight:700;color:var(--cat-deeptext);background:var(--cat-light);padding:5px 12px;border-radius:20px;white-space:nowrap}
.qa.is-hidden{display:none}
.no-hit{display:none;text-align:center;padding:40px 24px;background:var(--white);border:1px dashed var(--cream-border);border-radius:16px;color:var(--text-mid);font-size:14px}
.no-hit.show{display:block}
.end-note{font-size:12.5px;color:var(--text-muted);margin-top:14px}
@media(max-width:600px){
  }

.hit-count{font-size:13px;color:var(--text-muted);margin-bottom:22px}
}

/* ── aus graz.css ──────────────────────────────────────────────────── */
@media(max-width:900px){
  }

/* ── Fotoleiste (aus assets/css/therapiegeraete.css) ────────── */
.rail-wrap{position:relative;margin-top:24px}
}
/* **Die Leiste bleibt im Satzspiegel.**
   Hier stand ein negativer rechter Rand, der die Leiste über den Rand des
   Inhalts hinausschob — gedacht als Hinweis darauf, dass sich hier etwas
   schieben lässt. Der Betrag hing an der Fensterbreite:
   `(100vw - 1320px) / 2 - 40px`, auf einem Bildschirm von 1770 Pixeln also
   185 Pixel. Beide Fotoleisten der Seite ragten damit sichtbar aus der Spalte,
   in der alles andere steht.

   Der Hinweis wird nicht gebraucht: darunter stehen bereits ein Fortschritts-
   balken, die Zählung „1 / 24" und zwei Pfeilknöpfe. Ein angeschnittenes Foto
   ist ein schwächeres Signal als ein Knopf, kostet aber die Fluchtlinie. */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
      scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 8px}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:3px solid var(--cat-main);outline-offset:6px;border-radius:14px}
.rail-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:100%;color:var(--cat-deeptext)}
.rail-ph .em{font-size:30px;opacity:.4}
.rail-ph .t{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.5}
.rail-num{position:absolute;top:12px;left:12px;background:rgba(42,58,26,.8);color:var(--gold-main);font-size:11px;font-weight:700;
          padding:4px 10px;border-radius:20px;letter-spacing:.04em}
.rail-zoom{position:absolute;bottom:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.94);
           display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transform:scale(.85);transition:all .25s}
.rail-item:hover .rail-zoom{opacity:1;transform:scale(1)}
.rail.dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.rail.dragging .rail-item{pointer-events:none}
.rail-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cat-main),var(--gold-main));border-radius:3px;transition:width .15s linear}
.rail-count{font-size:12.5px;color:var(--text-muted);font-weight:600;white-space:nowrap}
.rail-btns{display:flex;gap:8px;margin-left:auto}
.rail-nav{width:44px;height:44px;border-radius:50%;background:var(--white);border:1.5px solid var(--cream-border);
          color:var(--cat-dark);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.rail-nav:hover:not(:disabled){background:var(--cat-main);border-color:var(--cat-main);color:var(--white)}
.rail-nav:disabled{opacity:.35;cursor:default}
@media(max-width:900px){
  /* Auf dem Telefon darf die letzte Karte über die Kante hinausragen —
     dort ist der Wisch die Bedienung, und die angeschnittene Karte sagt,
     dass es weitergeht. */
  .rail{margin-right:-24px; padding-right:24px}
}
/* Die Karte von Google. Über die ganze Breite des Blocks, aber flach:
   sie zeigt, wo das Zentrum liegt: den Weg plant niemand hier, sondern
   in der Google-App. Hoch war sie höher als alle sechs Karten zusammen,
   als kleines Quadrat links sah sie wie ein abgeschnittenes Stück aus.
   `loading=lazy` und ein festes Verhältnis, damit der Inhalt darunter
   beim Laden nicht springt. */
.st-karte{margin-top:22px;width:100%;height:220px;border-radius:14px;
  overflow:hidden;border:1px solid var(--cream-border);
  background:var(--cat-light)}
.st-karte iframe{width:100%;height:100%;border:0;display:block}
.st-karte-hinweis{margin-top:8px;font-size:12px;color:var(--text-muted)}
/* ── Apartments: Foto als Fläche, Text darauf ────────────────── */
/* Dieselbe Form wie auf der Intensivseite — der Block sagt dasselbe
   und soll deshalb überall gleich aussehen. */
.ap-band{position:relative;border-radius:22px;overflow:hidden;min-height:360px;
  display:flex;align-items:flex-end;background:#3A4053;
  box-shadow:0 18px 44px -20px rgba(58,64,83,.5)}
.ap-bild{position:absolute;inset:0}
.ap-bild img{width:100%;height:100%;object-fit:cover}
.ap-bild::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(35,40,54,.93) 0%,rgba(42,48,64,.86) 42%,
             rgba(45,51,67,.55) 70%,rgba(45,51,67,.26) 100%)}
.ap-marke{display:inline-block;background:var(--gold-main);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 15px;border-radius:20px;margin-bottom:16px}
.ap-text h2{font-size:26px;line-height:1.24;color:#fff;margin-bottom:12px}
.ap-text p{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.65}
/* Zwei Spalten als Liste. Als Pillen brachen die fünf Angaben auf einer
   breiten Seite ungleich um — drei in der ersten Zeile, zwei in der
   zweiten, mit einer Lücke rechts. */
.ap-liste{list-style:none;margin:20px 0 24px;display:grid;
  grid-template-columns:1fr 1fr;gap:8px 26px}
.ap-liste li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;
  color:rgba(255,255,255,.9);line-height:1.5}
.ap-liste i{font-style:normal;font-size:15px;line-height:1.4;width:22px;
  flex-shrink:0;text-align:center}
@media(max-width:700px){
  .ap-liste{grid-template-columns:1fr}
  }
.ap-text .btn{background:var(--gold-main);color:#fff;border:none}
}
.ap-text .btn:hover{background:var(--gold-dark);color:#fff;
  box-shadow:0 8px 22px rgba(210,101,42,.4)}
@media(max-width:900px){
  .ap-band{min-height:0}
  /* Oben durchsichtiger: bei .7 war vom Foto nichts mehr zu erkennen und die
     Fläche über dem Text wirkte leer. */
  .ap-bild::after{background:linear-gradient(180deg,rgba(35,40,54,.25) 0%,
                  rgba(42,48,64,.82) 42%,#3A4053 100%)}
  /* 200px Polster oben liessen auf dem Telefon eine grosse dunkle Fläche
     stehen — das Foto darunter ist vom Verlauf fast verdeckt, also sah es
     aus wie ein Fehler. 120px zeigen genug vom Raum, ohne Leere.
     Gemeldet von Alex am 29.09.2026. */
  .ap-text{padding:120px 22px 28px;max-width:none}
}
.st-karte{height:240px}
/* Die Fotoleiste bleibt wischbar; die Knöpfe darunter werden auf dem
     Telefon nicht gebraucht, der Fortschrittsbalken zeigt die Lage. */
  .rail-btns{display:none}

/* ── aus intensivtherapie.css ──────────────────────────────────────── */
/* ── Zitat mit Quelle ────────────────────────────────────────── */
/* .tf-zitat kommt aus site.css. Die Quelle stand dort im Zitat selbst;
   hier eine eigene Zeile, damit der Name nicht mitkursiv wird. */
.zitat-quelle{margin-top:8px;padding-left:22px;font-size:12.5px;
  font-weight:600;color:var(--text-muted)}
}

/* ── Fließtextspalte ─────────────────────────────────────────── */
/* Begrenzte Zeilenlänge: der SEO-Abschnitt und der Teamtext laufen
   sonst über die volle Breite von 1320 Pixeln und werden unlesbar. */
.it-text{max-width:1200px;color:var(--text-mid);font-size:14.5px;
  line-height:1.75}
.it-text p{max-width:1200px}
/* ── Fokus-Programme ─────────────────────────────────────────── */
.fp-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
/* Farben hier wörtlich, nicht über Variablen: an dieser Stelle sind
   mehrfach andere Werte angekommen als gesetzt waren, und die Ursache
   liess sich nicht finden. Ein fester Wert kann nichts überschreiben. */
.fp-karte{background:#FBF3E7;border:1px solid #E0C79E;border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 30px -14px rgba(65,36,2,.28);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.fp-karte:hover{transform:translateY(-6px);border-color:#B06A10;
  box-shadow:0 24px 48px -18px rgba(65,36,2,.42)}
.fp-bild{position:relative;aspect-ratio:16/7;overflow:hidden;background:#F0D6AE}
.fp-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fp-karte:hover .fp-bild img{transform:scale(1.04)}
.fp-marke{position:absolute;left:16px;bottom:14px;background:#412402;
  color:#F0D6AE;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:6px 14px;border-radius:20px}
.fp-inhalt{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.fp-inhalt h3{font-size:19px;line-height:1.3;color:#412402;margin-bottom:10px}
.fp-text{font-size:13.5px;color:#5A4634;line-height:1.6;margin-bottom:16px}
/* Kennzahlen des Programms: Dauer, Frequenz, Einheiten, Länge. */
.fp-daten{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.fp-daten span{background:#FFFFFF;border:1px solid #D9A96A;color:#7E4B0B;
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px;
  white-space:nowrap}
.fp-punkte{list-style:none;margin-bottom:16px}
.fp-punkte li{position:relative;padding:4px 0 4px 22px;font-size:13.5px;
  color:#5A4634;line-height:1.55}
.fp-punkte li::before{content:'➝';position:absolute;left:0;top:4px;
  color:#B06A10;font-weight:700}
.fp-fuerwen{background:#FDF8F0;border-left:3px solid #B06A10;
  padding:12px 14px;font-size:12.5px;color:#5A4634;line-height:1.55;
  margin-bottom:18px}
.fp-fuerwen b{color:#412402;font-weight:700}
/* Der Knopf sitzt unten, über die ganze Kartenbreite, in Dunkelbraun. */
.fp-inhalt .btn{margin-top:auto;width:100%;background:#A05F1E;color:#FFFFFF;
  border:none}
.fp-inhalt .btn:hover{background:#7E4B0B;color:#FFFFFF;
  box-shadow:0 8px 20px rgba(65,36,2,.35)}
@media(max-width:900px){
  .fp-liste{grid-template-columns:1fr}
}
/* Schmaler Streifen links: er nimmt die Bereichsfarbe auf, ohne dass ein
   einseitiger Rahmen die runden Ecken bricht. */
.dx-link::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:#B06A10;transition:width .22s}
/* ── Apartments: kurzer Hinweis, kein zweiter Katalog ────────────────── */
/* Direkt darüber steht der Baustein „Erfahrungsberichte": helles Feld,
   Foto links, Text rechts. Derselbe Aufbau zweimal hintereinander liest
   sich wie eine Wiederholung. Der Baustein bleibt wie er ist — dieser
   Block wird anders: das Foto ist die Fläche, der Text liegt darauf. */
.ap-band{position:relative;border-radius:22px;overflow:hidden;
  min-height:360px;display:flex;align-items:flex-end;
  background:#412402;box-shadow:0 18px 44px -20px rgba(65,36,2,.5)}
/* Der Verlauf beginnt links satt und läuft nach rechts aus: der Text
   bleibt lesbar, das Foto bleibt sichtbar. */
.ap-bild::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(50,28,3,.93) 0%,rgba(58,33,4,.86) 42%,
             rgba(65,36,2,.55) 70%,rgba(65,36,2,.28) 100%)}
/* Die fünf Angaben der Wix-Seite, wortgleich — als Reihe statt als Liste.
   Sie werden zusammen gelesen, nicht eine nach der anderen. */
.ap-fakten{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.ap-fakten span{display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.12);border:1px solid rgba(240,214,174,.4);
  border-radius:20px;padding:7px 14px;font-size:12.5px;font-weight:600;
  color:#F6E7D0}
.ap-fakten i{font-style:normal;font-size:14px;line-height:1}
.ap-text .btn{background:#F0D6AE;color:#412402;border:none}

/* ── aus kontakt.css ───────────────────────────────────────────────── */
.qa-list{display:flex;flex-direction:column;gap:9px}
.map-card{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;overflow:hidden}
.map-card iframe{width:100%;height:280px;border:0;display:block;filter:saturate(.9)}
.map-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;flex-wrap:wrap}
.map-cap b{font-size:14.5px;color:var(--green-deepest)}
.map-cap span{font-size:12.5px;color:var(--text-muted);display:block}
.map-cap a{font-size:13px;font-weight:700;color:var(--cat-dark);white-space:nowrap}

/* ── aus praxisraeume.css ──────────────────────────────────────────── */
/* ===== STANDORT-FOTOLEISTE (Snap-Scroll) ===== */
.rail-wrap{position:relative;margin-top:24px}
/* Der Überstand nach rechts ist RAUS.
   Er sollte zeigen, dass die Leiste scrollbar ist, hing aber an der
   Fensterbreite: bei 1770 Pixeln 185, bei 2560 schon 580 — die Leiste stand
   dann weit über die 1200 Pixel der Spalte hinaus und riss die Fluchtlinie
   auf. Dasselbe war im Kids-Projekt schon einmal entfernt worden und über
   diese Datei zurückgekommen, weil bausteine.css sie mitnimmt.
   Auf dem Telefon bleibt der Überstand (weiter unten) — dort ist der Wisch
   die Bedienung. Am Rechner sagen Fortschrittsbalken, Zählung und die zwei
   Pfeilknöpfe dasselbe. */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
      scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 8px}
@media(max-width:900px){
  .rail{margin-right:-20px}
}
.lb{padding:12px}
/* Der Prototyp zeigt Platzhalter, hier stehen echte Fotos: die
   Regeln für `.rail-ph` und `.gal-ph` greifen nicht, dafür brauchen
   die Bilder ihre eigenen. */
.rail-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s}
/* `.loc-block` steht im Prototyp im Markup, hat dort aber keine einzige
   Regel — dieselbe Klasse ohne Gestaltung wie `.mehr-link` im
   Kids-Projekt. Hier bekommt sie Abstand zwischen den beiden Standorten. */
.loc-block + .loc-block{margin-top:44px}
.rail-wrap{max-width:1200px}
.rail{margin-right:0}
.gal-hint{font-size:13px;color:var(--text-muted);margin-top:10px}

/* ── aus preise.css ────────────────────────────────────────────────── */
/*
 * DIE KARTE SELBST fehlte hier: `.pr-card`, `.pr-grid` und der hervorgehobene
 * Zustand standen nur in preise.css, also nur auf /angebot/preise. Überall
 * sonst — Startseite, Angebotsseite, Therapieseiten — bekam der Baustein nur
 * die Innereien (Name, Preis, Liste) und stand ohne Rahmen, ohne farbige
 * Oberkante, ohne Polster da. Genau der Unterschied, den Alex am 30.09.2026
 * mit dem Kids-Auftritt verglichen hat.
 *
 * Deshalb hier dieselben Regeln. In preise.css bleiben sie stehen: die Seite
 * hat weiter unten eigene Abweichungen (Reihe statt Raster), die darauf
 * aufbauen.
 */
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pr-card{background:var(--white);border:1px solid var(--cream-border);
  border-top:5px solid var(--tc);border-radius:16px;padding:24px 22px;
  display:flex;flex-direction:column;transition:all .3s;position:relative}
.pr-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(42,58,26,.11);
  border-color:var(--tc)}
.pr-card.featured{border-color:var(--gold-main);
  box-shadow:0 10px 28px rgba(196,154,40,.16)}
@media(max-width:900px){.pr-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pr-grid{grid-template-columns:1fr}}

.tab .n{font-size:11.5px;opacity:.75;font-weight:700}
.pr-badge{position:absolute;top:-12px;left:20px;background:var(--gold-main);color:var(--green-deepest);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.pr-name{font-family:'Source Sans 3',sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--text-mid);margin-bottom:4px}
/* Preis so gross wie im Kids-Auftritt, Einheit klein daneben statt darunter.
   30.09.2026 */
.pr-price{font-family:'Playfair Display',serif;font-size:38px;font-weight:700;
  color:var(--tcd);line-height:1.05;margin-bottom:16px;display:flex;
  align-items:baseline;gap:8px;flex-wrap:wrap}
.pr-unit{font-family:'Source Sans 3',sans-serif;font-size:13px;font-weight:600;
  color:var(--text-muted)}
@media(max-width:600px){.pr-price{font-size:32px}}
.pr-list{list-style:none;flex:1;margin-bottom:18px}
.pr-list li{display:flex;gap:8px;padding:5px 0;font-size:13.5px;color:var(--text-mid);line-height:1.5;align-items:flex-start}
.pr-list li strong{color:var(--green-deepest)}
.pr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:var(--radius-btn);font-weight:700;font-size:14px;background:var(--tcl);color:var(--tcd);border:1.5px solid var(--tc);transition:all .22s}
.pr-card:hover .pr-btn{background:var(--tc);color:var(--white)}
.pr-more{font-size:12.5px;color:var(--text-muted);margin-top:10px;text-align:center}
.pr-more a{color:var(--tcd);font-weight:700}
table.pt td.nm{font-weight:600;color:var(--green-deepest)}
tr.grp td{background:var(--cream-bg);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:9px 18px}
tr.grp .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;vertical-align:middle}
.tbl-note{font-size:12.5px;color:var(--text-muted);margin-top:14px}
/* ── Merkmale auf den Preiskarten ────────────────────────────────────── */
/* `.pr-list li` ist im Prototyp ein Flexkasten mit Abstand, aber ohne
   Merkzeichen — die Zeilen begannen mit einer Lücke. Im Prototyp standen
   die Zeichen als Emoji im Text jeder Zeile; in den Daten stehen sie
   nicht, sie gehören auch nicht dorthin. Deshalb ein Punkt aus dem CSS,
   in der Farbe der Fachrichtung. Gleiche Bauweise wie bei den
   Preiskarten auf den Therapieseiten. */
.pr-list li::before{content:'●';color:var(--tc,var(--cat-main));font-size:8px;
  line-height:1;margin-top:7px;flex-shrink:0}

/* ── aus produkt-detail.css ────────────────────────────────────────── */
.gal-band{background:#4A5168;padding:30px 0}
.gal-huelle{position:relative}
/* Auf weissem Grund braucht die Karte einen deutlicheren Rahmen, sonst
   verschwindet sie. */
.qa{background:var(--white);border:1.5px solid var(--cat-mid);
  border-radius:14px;margin-bottom:10px;transition:all .25s;overflow:hidden}

/* ── aus studien.css ───────────────────────────────────────────────── */
/* ── Karten ──────────────────────────────────────────────────── */
.ev-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ev-karte{background:var(--white);border:1px solid var(--cream-border);
  border-left:5px solid var(--cat-main);border-radius:16px;padding:24px 26px;
  display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.ev-karte:hover{transform:translateY(-4px);
  box-shadow:0 16px 36px -12px var(--cat-main);border-color:var(--cat-mid)}
/* Einseitiger Rahmen und runde Ecken beissen sich nicht, solange die
   Radien klein bleiben — 16px auf 5px Rand liest sich noch als Karte. */
.ev-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:10px}
.ev-karte h3{font-size:17.5px;line-height:1.25;color:var(--cat-deeptext)}
.ev-titel{font-size:13.5px;font-weight:600;color:var(--text-primary);
  line-height:1.5;margin-bottom:8px}
.ev-quelle{font-size:12.5px;color:var(--text-muted);line-height:1.55;
  margin-bottom:16px}
.ev-deutung{background:var(--gg-light);border-left:3px solid var(--gg-main);
  border-radius:0 12px 12px 0;padding:16px 18px;margin-bottom:18px}
.ev-deutung b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gg-dark);margin-bottom:8px}
.ev-deutung p{font-size:13.5px;color:#3E5B55;line-height:1.6}
.ev-autor{margin-top:10px;font-size:12px;color:var(--text-muted)}
.ev-autor a{font-weight:700;color:var(--gg-dark);
  border-bottom:1px solid var(--gg-mid)}
.ev-autor a:hover{color:var(--gold-dark);border-color:var(--gold-main)}
/* Der Verweis sitzt unten, auch wenn die Karten unterschiedlich
   hoch werden — sonst wandert er je Karte auf eine andere Höhe. */
.ev-link{margin-top:auto;align-self:flex-start;display:inline-flex;
  align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--cat-dark);
  border-bottom:2px solid var(--gold-main);padding-bottom:2px;
  transition:gap .18s,color .18s}
.ev-link:hover{gap:11px;color:var(--gold-dark)}
@media(max-width:900px){
  .ev-liste{grid-template-columns:1fr}
}
.ev-kopf{flex-direction:column;gap:8px}
/* ── Anzahl je Gruppe ────────────────────────────────────────── */
.ev-anzahl{font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--text-muted);margin-top:10px!important}
.ev-anzahl .ev-gruppe-zahl{color:var(--cat-dark);font-weight:700}
/* ── Verknüpfungen ───────────────────────────────────────────── */
/* Diese Verweise sind der eigentliche Nutzen der Seite: von der Arbeit
   zur Therapie, zum Produkt, zur Diagnose. Sie stehen unter der Deutung,
   nicht im Kopf — im Kopf würden sie mit dem Titel um Aufmerksamkeit
   streiten. */
.ev-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
/* ── Zustand: nichts gefunden ────────────────────────────────── */
.ev-karte[hidden]{display:none}
.ev-leer{font-size:14px;color:var(--text-muted);font-style:italic;
  padding:8px 0}

/* ── aus team-alle.css ─────────────────────────────────────────────── */
/* Aufbau und Klassen aus assets/css/unser-team.css des Kids-Projekts,
   unveraendert uebernommen (.grp, .grp-badge, .grp-link, .ppl, .pc,
   .chip-row, .jobs-box). Die Farben kommen aus der Themenschicht der
   Erwachsenensite; die Fachbereichsfarben stehen unten als --t-*. */
/* ===== TEAM-HUB ===== */
.info-row{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.chip .d{width:9px;height:9px;border-radius:50%;background:var(--tc);flex-shrink:0}
.chip.active .d{background:var(--white)}
/* discipline panel — tinted, badge overlaps the edge, no divider line */
.grp{position:relative;margin-bottom:20px;padding:30px 22px 22px;border:2px solid var(--tc);border-radius:22px;
     background:linear-gradient(135deg,var(--tcl) 0%,var(--white) 58%);box-shadow:0 16px 40px -16px var(--tc)}
.grp.is-hidden{display:none}
.grp-badge{position:absolute;top:-14px;left:24px;display:inline-flex;align-items:center;gap:8px;background:var(--tc);
           color:var(--white);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
           padding:7px 16px;border-radius:20px;box-shadow:0 4px 12px -2px var(--tc)}
.grp-badge a{color:var(--white)}
.sr-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.grp-badge .e{font-size:14px}
.grp-link{position:absolute;top:-11px;right:22px;background:var(--white);border:1.5px solid var(--tc);
          color:var(--tcd);font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:20px;
          display:inline-flex;align-items:center;gap:5px;transition:all .22s}
.grp-link:hover{background:var(--tc);color:var(--white);gap:9px}
.pc-role{font-size:11.5px;color:var(--text-muted);line-height:1.4}
@media(max-width:900px){
  .grp{padding:34px 18px 22px}
  .grp-badge{left:18px}
  .grp-link{position:static;margin:0 0 16px;align-self:flex-start}
}
.grp{padding:28px 14px 18px}

/* ── aus team-detail.css ───────────────────────────────────────────── */
.side-pill .dot{width:10px;height:10px;border-radius:50%;background:var(--cat-main);flex-shrink:0}

/* ── aus therapieablauf.css ────────────────────────────────────────── */
/* Seitenregeln aus dem abgenommenen Prototyp therapieablauf.html,
   unveraendert uebernommen (.wel-grid, .ov-row, .road, .rd-card,
   .rd-goal, .tip-box, .fin-grid, .faq-item). */
.wel-grid{display:grid;grid-template-columns:.42fr 1.58fr;gap:40px;align-items:start}
.ov-chip{display:inline-flex;align-items:center;gap:9px;background:var(--white);border:1.5px solid var(--cream-border);border-radius:22px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--text-mid);min-height:44px;transition:all .22s}
.ov-chip:hover{border-color:var(--cat-main);color:var(--cat-dark);transform:translateY(-2px)}
.ov-chip i{width:24px;height:24px;border-radius:50%;background:var(--cat-light);color:var(--cat-deeptext);font-style:normal;font-family:'Playfair Display',serif;font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.road-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;overflow:visible}
.road-base{stroke:var(--cat-mid);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 15;vector-effect:non-scaling-stroke}
.road-prog{stroke:url(#trailGrad);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke-dashoffset .16s linear}
.road-head{fill:var(--gold-main);stroke:var(--white);stroke-width:3;transition:opacity .3s}
.rd-feet{position:absolute;z-index:2;opacity:.5;pointer-events:none;line-height:1;transform:translate(-50%,-50%)}
.rd-card,.rd-node{pointer-events:auto}
.rd-node{position:absolute;left:50%;transform:translateX(-50%);top:22px;z-index:4}
.rd-num{border-radius:50%;background:var(--white);border:3px solid var(--cream-border);color:var(--text-muted);
        font-family:'Playfair Display',serif;font-weight:700;display:flex;align-items:center;justify-content:center;
        box-shadow:0 4px 14px rgba(42,58,26,.1);transition:all .35s}
.rd-step.reached .rd-num{background:var(--cat-main);border-color:var(--cat-main);color:var(--white);box-shadow:0 6px 20px rgba(92,138,60,.35)}
.rd-thumb{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2.5px solid var(--cat-mid)}
.rd-badge{display:inline-block;background:var(--cat-light);color:var(--cat-deeptext);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:6px}
.rd-sub{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:9px 0 5px}
.rd-list{list-style:none}
.rd-list li{display:flex;gap:8px;padding:3px 0;font-size:13px;color:var(--text-mid);line-height:1.5}
.rd-list li::before{content:'→';color:var(--cat-main);font-weight:700;flex-shrink:0}
.rd-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:42px;padding:9px 18px;border-radius:var(--radius-btn);background:var(--cat-light);border:1.5px solid var(--cat-main);color:var(--cat-dark);font-weight:700;font-size:13.5px;transition:all .22s}
.rd-btn:hover{background:var(--cat-main);color:var(--white)}
/* goal — biggest, closest */
.rd-goal{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;margin-top:14px}
.goal-ring{width:104px;height:104px;border-radius:50%;background:var(--white);border:4px dashed var(--cream-border);display:flex;align-items:center;justify-content:center;font-size:42px;transition:all .5s}
.rd-goal.reached .goal-ring{border-style:solid;border-color:var(--gold-main);background:var(--gold-light);transform:scale(1.07);box-shadow:0 0 0 14px rgba(235,195,95,.18)}
.goal-cap{margin-top:12px;text-align:center;max-width:560px}
.goal-cap b{display:block;font-family:'Playfair Display',serif;font-size:21px;color:var(--text-muted);margin-bottom:4px;transition:color .4s}
.rd-goal.reached .goal-cap b{color:var(--cat-dark)}
.goal-cap span{font-size:13.5px;color:var(--text-mid)}
@media(max-width:900px){
  .road-svg{display:none}
  /* node centred inside the rail column */
  .rd-node{position:static;transform:none;grid-column:1;grid-row:1;display:flex;justify-content:center;padding-top:14px}
  .rd-num{width:var(--railw)!important;height:var(--railw)!important;font-size:17px!important;border-width:3px}
  .rd-feet{left:var(--rail)!important;top:auto!important;bottom:-14px;transform:translateX(-50%)}
  /* goal sits on the same rail and terminates the line */
  .rd-goal{display:grid;grid-template-columns:var(--railw) 1fr;gap:16px;align-items:center;margin-top:14px}
  .goal-ring{width:var(--railw);height:var(--railw);font-size:20px;border-width:3px;justify-self:center;
             background:var(--white);position:relative;z-index:2}
  .rd-goal.reached .goal-ring{transform:none;box-shadow:0 0 0 8px rgba(235,195,95,.2)}
  .goal-cap{margin-top:0;text-align:left;max-width:none}
  .goal-cap b{font-size:18px}
}
}

/* tip box */
.tip-box{background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 60%);border:2px solid var(--gold-main);border-radius:16px;padding:18px 22px;margin-top:26px;font-size:14px;color:var(--gold-deeptext)}
.rd-thumb.bild-folgt{width:72px;height:72px;border-radius:14px;flex-shrink:0}
.rd-step .rd-badge{background:var(--acl,var(--cat-light));
  color:var(--acd,var(--cat-deeptext));
  border:1px solid var(--ac,var(--cat-main))}
.rd-step .rd-num{border-color:var(--ac,var(--cat-main));
  color:var(--acd,var(--cat-dark));background:var(--white)}
.rd-step .rd-thumb.bild-folgt{border-color:var(--ac,var(--cat-mid));
  background:var(--acl,var(--cat-light));color:var(--acd,var(--cat-dark))}
.rd-step .rd-sub{color:var(--acd,var(--text-muted))}
.rd-step .rd-btn{background:var(--ac,var(--cat-main));color:#fff;
  border-color:var(--ac,var(--cat-main))}
.rd-step .rd-btn:hover{background:var(--acd,var(--cat-dark));
  border-color:var(--acd,var(--cat-dark));color:#fff}
/* Die Karte hat oben eine Linie — der Platzhalter darf nicht mitwachsen,
   sonst überlappt er bei langen Texten die Beschriftung. */
.rd-thumb{align-self:flex-start}
/* ── Feste Grössen statt wachsender ──────────────────────────────────────
   Entscheidung Alex, 31.08.2026: Knoten und Fussspuren wachsen nicht mehr
   von Station zu Station. Vorbild ist das Kids-Projekt, wo die Grösse im
   Stylesheet steht (`.rd-num` 48 px) und nicht als Stil am Element — damit
   steht keine Gestaltung im Markup und eine ergänzte Station sieht aus wie
   die erste.

   Die Regel MUSS hier stehen, nicht in nachtraege.css: das Seiten-Stylesheet
   wird zuletzt geladen und schlägt alles davor. */
.rd-num{width:48px;height:48px;font-size:19px;flex:0 0 auto}
/* Vorschaubild kleiner: 56 px, dieselbe Kantenlänge wie das spätere Foto
   (`.rd-thumb`) — vorher war der Platzhalter mit 72 px grösser als das Bild,
   das ihn ersetzt, und beim Einsetzen sprang die Karte.
   Form bleibt das Rechteck mit weichen Ecken (Regel der Erwachsenensite:
   keine runden Bildformen). */
.rd-thumb.bild-folgt{width:56px;height:56px;border-radius:12px}

/* ── aus ueber-uns.css ─────────────────────────────────────────────── */
/* mission / vision panels */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mv-card{background:var(--white);border:1px solid var(--cream-border);border-top:5px solid var(--tc,var(--cat-main));border-radius:18px;padding:30px 28px;position:relative;transition:all .3s}
.mv-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(42,58,26,.1)}
.mv-ic{width:52px;height:52px;border-radius:14px;background:var(--tcl,var(--cat-light));display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.mv-card h3{font-size:20px;margin-bottom:10px}
.mv-card p{color:var(--text-mid);font-size:14px;line-height:1.65;margin-bottom:9px}
/* founders quote */
.quote-band{background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 60%);border:2px solid var(--gold-main);border-radius:22px;padding:34px 36px;margin-top:26px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;box-shadow:0 14px 36px rgba(196,154,40,.14);position:relative;overflow:visible}
.qb-faces{display:flex;flex-shrink:0}
.qb-faces img{width:66px;height:66px;border-radius:50%;object-fit:cover;border:3px solid var(--white);box-shadow:0 3px 10px rgba(42,58,26,.14)}
.qb-faces img + img{margin-left:-20px}
.qb-text{flex:1;min-width:240px}
.qb-text blockquote{font-family:'Playfair Display',serif;font-style:italic;font-size:19px;color:var(--green-deepest);line-height:1.5;margin-bottom:8px}
.qb-text cite{font-size:13px;color:var(--text-muted);font-style:normal;font-weight:700}
/* stats */
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.st-cell{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:24px 20px;text-align:center;transition:all .3s}
.st-cell:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(42,58,26,.09);border-color:var(--cat-main)}
.st-cell b{display:block;font-family:'Playfair Display',serif;font-size:34px;color:var(--cat-dark);line-height:1.05}
.st-cell span{font-size:13px;color:var(--text-mid);display:block;margin-top:6px;line-height:1.45}
@media(max-width:900px){
  .mv-grid,.fnd-grid,.loc2-grid{grid-template-columns:1fr}
  .st-grid,.val-grid{grid-template-columns:repeat(2,1fr)}
}
/* Fließtexte der Abschnitte */
.uu-text{color:var(--text-mid);font-size:14.5px;line-height:1.75;
  max-width:1200px;margin-top:8px}
.uu-text p + p{margin-top:12px}
/* Fotos: Rechteck mit weichen Ecken. Die organische Rundung des
   Prototyps („Blob") ist Kids-Handschrift und kommt auf der
   Erwachsenensite nicht vor. Die Regeln des Prototyps setzen die Rundung
   teils am Rahmen, teils am Bild — deshalb beides überschreiben. */
.wer-photo, .wer-photo img,
.fnd-photo, .fnd-card img,
.qb-faces img, .team-chip, .team-chip img{border-radius:16px}
.wer-photo::before, .fnd-photo::before, .qb-faces img{border:none}
/* Die Portraets im Zitatband bleiben rund — dort sind es kleine
   Sprechermarken, kein Bildmotiv. */
.qb-faces img{border-radius:50%}
/* Der Versatz gilt nur nebeneinander; untereinander würde er die Fotos
     nach links ziehen. */
  .qb-faces img + img{margin-left:0}
/* Kennzahlen zu zweit statt zu viert. */
  .st-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
/* ── Teamkarten: immer eine Leiste ───────────────────────────────────────
   Erst sollte die Leiste nur unter 900 Pixeln greifen. Bei einem schmalen,
   aber nicht ganz so schmalen Fenster blieb es beim Raster — die Karten
   wurden gequetscht und die Pfeile fehlten, weil sie zur Leiste gehören.
   Jetzt ist es überall eine Leiste, wie bei den Fotogalerien: Pfeile,
   Zählung, Wischen und Ziehen sind immer da, und die Karten behalten ihre
   Breite, statt sich zu verformen. */
.team-row.rail{display:flex; grid-template-columns:none; gap:14px;
               overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
               scrollbar-width:none; -ms-overflow-style:none; padding:4px 0 8px}
.team-row.rail::-webkit-scrollbar{display:none}
.team-row.rail:focus-visible{outline:3px solid var(--cat-main); outline-offset:6px; border-radius:14px}
.team-row.rail .team-chip{flex:0 0 176px; scroll-snap-align:start}
.team-wrap .rail-foot{display:flex; align-items:center; gap:12px; margin-top:14px}
.team-wrap .rail-bar{flex:1; height:6px; background:var(--cream-border);
                     border-radius:3px; overflow:hidden}
@media(max-width:600px){
  /* Auf dem Telefon zwei Karten je Bildschirm statt einer festen Breite. */
  .team-row.rail .team-chip{flex:0 0 46%; max-width:190px}
}



/* ──────────────────────────────────────────────────────────────────────────
   TELEFON: DAS FOTO IM ERSTEN ABSCHNITT

   Die Regel dafür steht auch in nachtraege.css — dort verliert sie aber,
   weil die Seitenstylesheets ZULETZT geladen werden und hier
   `.wer-photo img{height:auto}` steht. Deshalb dieselbe Regel noch einmal an
   der Stelle, an der sie gewinnt. Gemeldet von Alex am 29.09.2026:
   die Bilder blieben trotz der Änderung gross.

   Nur der Abschnitt NACH dem Titelbereich; in Karten bleibt das Bild wie es
   ist.
   ────────────────────────────────────────────────────────────────────────── */

@media(max-width:760px){
  /* Die Fotos der Text-mit-Foto-Abschnitte: 16:9, höchstens 260px — dasselbe
     Mass wie auf den Angebots-, Therapie- und Diagnoseseiten.

     OHNE Stellungsselektor: `main > .hero + section` traf nichts, weil
     zwischen Titelbereich und erstem Abschnitt die Brotkrumenleiste als
     `<div>` steht. Diese Bildkästen kommen nur in solchen Abschnitten vor,
     nicht in Karten — deshalb ist die einfache Regel hier richtig.
     Gemeldet von Alex am 29.09.2026. */
  .intensiv-photo, .wer-photo, .ansatz-photo-wrap, .adult-photo{
    aspect-ratio:16/9; max-height:260px; max-width:100%; overflow:hidden;
  }
  .intensiv-photo img, .wer-photo img, .ansatz-photo-wrap img, .adult-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   TEXT-MIT-FOTO: BILD ÜBER DIE VOLLE BREITE, SOBALD DER ABSCHNITT EINSPALTIG IST

   `.intensiv-band` wird unter 960px einspaltig. Das Foto blieb dabei schmal —
   es behielt die Breite seiner früheren Spalte und stand als kleiner Kasten
   über dem Text. Gemeldet von Alex am 29.09.2026 mit Bildschirmfoto.

   Die Grenze ist 960 und nicht 760: massgeblich ist, wann der Abschnitt
   umbricht, nicht ob das Gerät ein Telefon ist.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .intensiv-band .intensiv-photo,
  .ansatz-grid .ansatz-photo-wrap,
  .wer-grid .wer-photo{
    width:100%; max-width:100%; margin-left:0; margin-right:0;
    aspect-ratio:16/9; max-height:300px; overflow:hidden;
  }
  .intensiv-band .intensiv-photo img,
  .ansatz-grid .ansatz-photo-wrap img,
  .wer-grid .wer-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   KIDS-KARTE: FOTO NACH OBEN

   Im Markup steht der Text zuerst, das Foto danach — einspaltig landet es
   deshalb unter den Knöpfen. Mit `order` rutscht es nach oben, ohne die
   Reihenfolge im Markup zu ändern; für Screenreader bleibt der Text zuerst.
   Dasselbe Vorgehen wie bei der Erfolgsgeschichte.
   Gewünscht von Alex am 29.09.2026.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .adult{display:flex; flex-direction:column; gap:20px}
  .adult-photo{order:-1; width:100%; aspect-ratio:16/9; max-height:240px}
  .adult-photo img{width:100%; height:100%; object-fit:cover}
}


/* ===== nachtraege.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   Nachträge zum Prototyp-Stylesheet.
   
   WARUM ES DIESE DATEI GIBT

   Die Dateien site.css und erwachsene.css und alle Seiten-Stylesheets werden
   von tools/prototyp-auslesen.php und tools/seiten-auslesen.php aus den
   Prototypen ERZEUGT. Was dort hineingeschrieben wird, ist beim nächsten
   Auslesen weg. Genau das ist einmal passiert: die Regel für .price-reihe
   stand in therapie-detail.css, ein erneutes Auslesen hat sie überschrieben,
   und die Preiskarten standen daraufhin untereinander statt nebeneinander.

   Diese Datei wird NICHT erzeugt. Hier stehen nur Klassen, die im Markup
   vorkommen, aber in keinem Prototyp eine Regel haben — weil sie erst bei der
   Umstellung auf PHP entstanden sind: für Fälle, die der Prototyp nicht
   kannte (Datensatz ohne Foto, wechselnde Anzahl von Karten).

   Die Regeln sind von den Vorbildern im Prototyp abgeleitet, nicht erfunden.
   Will der Kunde eigene Gestaltung dafür, ist das eine Entscheidung.

   Wird in inc/kopf.php nach den erzeugten Stylesheets geladen, damit sie
   ergänzen und nicht überschrieben werden.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Preiskarten als umbrechende, zentrierte Reihe ─────────────────────────
   Nachtrag 5 der Übergabe. Der Prototyp zeigt .price-grid mit festem Raster;
   die Anzahl der Karten wechselt aber je Fachrichtung (3, 3, 2, 2, 1). Bei
   einer einzigen Karte zog das Raster sie auf ein Drittel der Breite und
   liess zwei Lücken. Als Reihe bricht sie um und bleibt mittig.

   Abgeleitet von .price-grid: dieselben Abstände, dieselbe Kartenbreite. */
.price-reihe{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
/*
 * `flex:0 1 320px` liess die Karten IMMER 320 breit bleiben, auch wenn daneben
 * Platz frei war — drei Karten standen als schmale Gruppe in der Mitte, mit
 * leeren Rändern links und rechts. Gemeldet von Alex am 30.09.2026 im
 * Vergleich mit dem Kids-Auftritt.
 *
 * `flex:1 1 300px` lässt sie den vorhandenen Platz aufteilen. `max-width:440`
 * bleibt, damit eine EINZELNE Karte (bei Fachrichtungen mit nur einem Preis)
 * nicht über die ganze Breite läuft — genau dafür war die Reihe gedacht.
 */
.price-reihe > .price-card{flex:1 1 300px;max-width:440px}

/* Die Leistungsliste kommt als HTML aus der Datenbank und bringt ihre eigenen
   ✓-Zeichen mit. Deshalb ohne zusätzliche Aufzählungspunkte, aber mit
   denselben Abständen wie die <li> im Prototyp. */
.price-features p{margin:0 0 4px;font-size:13px;color:var(--text-mid);line-height:1.5}
.price-features ul{list-style:none;padding:0;margin:0}

/* ── Platzhalter für ein fehlendes Foto ────────────────────────────────────
   .bild-folgt steht dort, wo ein Datensatz kein Bild hat — den Fall kannte
   der Prototyp nicht, dort war immer eines da.

   Volle Breite und Höhe statt position:absolute mit inset:0. Die Klasse steht
   in mehreren Eltern (.dg-fig, .sub-photo, .device-card-photo, .story-foto),
   von denen nur einer position:relative trägt; absolut positioniert wäre der
   Platzhalter in den übrigen Fällen zum nächsten positionierten Vorfahren
   gewandert. Dieselbe Lehre wie im Kids-Projekt. */
.bild-folgt{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:180px;
  background:var(--cream-border);color:var(--text-muted);
  font-size:13px;text-align:center}

/* ── Initiale statt Porträt ────────────────────────────────────────────────
   .tt-initialen zeigt den ersten Buchstaben, wenn kein Foto vorliegt.
   Abgeleitet von .team-ini im Prototyp. */
.tt-initialen{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:120px;
  font-family:'Playfair Display',serif;font-size:44px;font-weight:700;
  color:var(--white);background:var(--cat-main)}

/* ── Klassen, die im Prototyp ohne Regel geblieben sind ────────────────────
   tools/css-klassen-pruefen.php hat sie gefunden. Jede Regel ist von einem
   Vorbild im Prototyp abgeleitet, das daneben steht — nicht erfunden. Will
   der Kunde etwas anderes, ist das eine Entscheidung. */

/* Verweis in der Angebotskachel der Therapieseite („Mehr erfahren →“).
   Abgeleitet von .mehr-link, das an derselben Stelle dieselbe Aufgabe hat. */
.sub-link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:13px;font-weight:600;color:var(--cat-dark);transition:gap .18s,color .18s}
.subtherapy-card:hover .sub-link{gap:11px;color:var(--gold-dark)}

/* Textspalte neben den Porträts auf der Angebotsseite. .team-section ist bei
   schmalen Fenstern eine Spalte und ab 900px zweispaltig; .team-text ist die
   zweite Spalte und braucht nur die Ausrichtung. */
.team-text{display:flex;flex-direction:column;justify-content:center}

/* Frage im Ausklappblock. Vorbild ist .qa-a direkt darunter: dieselben
   Innenabstände, aber als Frage kräftiger und in der Überschriftenfarbe. */
.qa-q{font-weight:700;color:var(--green-deepest);font-size:15px;line-height:1.5}

/* Suchvorschläge über dem Diagnosefeld. Vorbild ist .dx-chip aus derselben
   Seite — gleiche Form, aber anklickbar, deshalb Zeiger und Hervorhebung. */
.dx-suggest{font-size:12px;background:var(--cream-bg);border:1px solid var(--cream-border);
  border-radius:14px;padding:4px 10px;color:var(--text-mid);cursor:pointer;
  transition:background .15s,color .15s}
.dx-suggest:hover{background:var(--cat-light);color:var(--cat-deeptext)}

/* Textspalte im Apartment-Hinweis der Dankeseite. */
.thanks-apart-text{display:flex;flex-direction:column;justify-content:center;gap:8px}
/* Der Knopf darin so breit wie seine Beschriftung. Eine senkrechte Flexbox
   zieht jedes Kind auf die volle Breite (align-items: stretch) — der Knopf
   „Apartments ansehen" lief dadurch über die ganze Textspalte. 02.10.2026 */
.thanks-apart-text .btn{align-self:flex-start}

/* ── Titelbereich ohne Bild: nicht höher als die anderen ─────────────────────
   site.css gibt dem Hero ab 1280px 560px, ab 1600px 620px Mindesthöhe — damit
   ein FOTO auf breiten Bildschirmen nicht zum schmalen Streifen beschnitten
   wird (Begründung dort). Seiten mit eigener Stildatei setzen 420/450/470px.
   Alle übrigen erbten die grossen Werte auch ohne Bild: Impressum,
   Datenschutz, Barrierefreiheit, Studien, Danke … standen mit leerer
   Farbfläche höher da als Kontakt oder Über uns mit Foto (Alex, 02.10.2026).
   Ohne Bild gibt es nichts zu beschneiden — also die Werte der übrigen
   Seiten. Steht hier und nicht in site.css, weil site.css erzeugt wird. */
@media(min-width:1280px){ .hero:not(.has-image){min-height:420px} }
@media(min-width:1600px){ .hero:not(.has-image){min-height:450px} }
@media(min-width:1900px){ .hero:not(.has-image){min-height:470px} }

/* ── Titelbild: kleine Fassung auf dem Handy ────────────────────────────────
   Die Vorlagen setzen --hero-gross und --hero-klein (lib/leistung.php,
   hero_stil()); hier wird daraus --banner-image, das alle Hero-Regeln samt
   ihrer Verläufe schon benutzen. Bis 900px die kleine Fassung — dort zeigt
   der Hero das Bild hinter dunklem Verlauf, 1000px reichen, und auf
   langsamem 4G war das grosse Foto der grösste Posten der Seite. Setzt eine
   Vorlage --banner-image selbst im style-Attribut, gewinnt das wie bisher. */
.hero.has-image{--banner-image:var(--hero-gross)}
@media(max-width:900px){ .hero.has-image{--banner-image:var(--hero-klein,var(--hero-gross))} }

/* ── Rechtstexte als Baustein ──────────────────────────────────────────────
   `.legal-body` umschliesst den ganzen Text von Impressum, Datenschutz,
   Cookie-Hinweis und Barrierefreiheit. Im Kids-Projekt gab es die Klasse
   schon; die Erwachsenensite kannte sie nicht — dort hiess der Behälter
   `.rt-block` und stand je Kapitel einmal.

   Die Regeln sind von `.rt-block` abgeleitet, nicht erfunden: gleiche
   Schriftgrösse, gleiche Zeilenhöhe, gleiche Farben. Neu ist nur der Abstand
   ÜBER den Überschriften — vorher kam er aus der Wiederholung des Behälters,
   jetzt stehen alle Kapitel in einem. */
.legal-body{max-width:820px}
.legal-body p{color:var(--text-mid);font-size:14.5px;line-height:1.8}
.legal-body p + p{margin-top:12px}
.legal-body strong{color:var(--green-deepest)}
.legal-body h2{font-family:'Playfair Display',serif;font-size:22px;
  color:var(--green-deepest);margin:34px 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:17px;color:var(--green-deepest);margin:22px 0 8px}
.legal-body ul,.legal-body ol{margin:10px 0 10px 22px}
.legal-body li{color:var(--text-mid);font-size:14.5px;line-height:1.8}
.legal-body a{color:var(--cat-dark);border-bottom:1px solid var(--cream-border)}
.legal-body a:hover{color:var(--gold-dark);border-color:var(--gold-main)}

/* Die Tabelle im Cookie-Hinweis. */
.legal-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.legal-body th,.legal-body td{text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--cream-border);color:var(--text-mid)}
.legal-body th{color:var(--green-deepest);font-weight:700}

/* Quellenhinweis am Fuss des Rechtstextes. */
.legal-quelle{margin-top:26px;font-size:12.5px;color:var(--text-muted)}

/* ── Logo in der Fusszeile ─────────────────────────────────────────────────
   Der Prototyp setzt dort einen Schriftzug; abgesprochen ist das Logo, wie in
   der Kopfzeile und wie im Kids-Projekt. Höhe an der Schriftzeile ausgerichtet,
   die vorher dort stand (18px Playfair, also rund 26px Zeilenhöhe) — etwas
   grösser, weil ein Bild sonst verloren wirkt. */
.footer-logo{height:38px;width:auto;display:block}

/* ─────────────────────────────────────────────────────────────────────────
   Preispillen in der Tabelle „Transparente Preisübersicht“

   `.pz` stammt aus produkt-detail.css: dort steht die Pille einzeln im Text
   und darf gross sein. In der Preistabelle stehen sechzehn davon
   untereinander — dort wirkten sie riesig und drängten die Spalten
   auseinander. Gemeldet von Alex.

   Deshalb nur INNERHALB der Tabelle kleiner. Die Pille auf der
   Angebotsseite bleibt unverändert.
   ───────────────────────────────────────────────────────────────────────── */
table.pt td .pz,
table.pt .pz {
  border-radius: 14px;
  padding: 3px 10px;
  gap: 5px;
}
table.pt .pz b    { font-size: 14px; }
table.pt .pz span { font-size: 11.5px; }

/* Verweise in den Standortkacheln: Rufnummer, Website, E-Mail.
   Sie sollen als anklickbar zu erkennen sein — vorher sahen sie wie
   gewöhnlicher Text aus. */
.karten-zelle a[href^="tel:"],
.karten-zelle a[href^="mailto:"],
.karten-zelle a[href^="http"] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────
   Hinweisband über der Kopfzeile

   Das Band steht auf JEDER Seite (inc/kopf.php gibt es aus den Einstellungen
   aus), seine Regeln standen aber nur in alle-diagnosen.css. Auf allen anderen
   Seiten war es dadurch ohne Gestaltung: kein Hintergrund, keine Ausrichtung,
   kein Innenabstand — der Text lief in die Kopfzeile.

   Werte aus dem Prototyp (01-startseite.html), unverändert. Die Farbe kommt
   aus erwachsene.css: oranger Text auf dunklem Grund, nicht umgekehrt.
   ───────────────────────────────────────────────────────────────────────── */
.hinweis-band { background: #3A4053; color: var(--gold-main); }
.hinweis-band .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 40px;
  font-size: 13.5px;
  font-weight: 600;
}
/* Auf schmalem Fenster war das Band drei Zeilen hoch und schob die Seite
   nach unten. Es soll höchstens zwei Zeilen tragen, und der Verweis gehört in
   dieselbe Zeile wie der Text — nicht darunter.

   `display:inline` beim Text sorgt dafür, dass der Verweis direkt hinter dem
   letzten Wort steht und mit ihm umbricht.

   Eine feste Höhe für zwei Zeilen hatte ich zuerst gesetzt — sie schnitt die
   zweite Zeile in der Mitte ab. Die Höhe richtet sich jetzt nach dem Inhalt;
   zwei Zeilen ergeben sich aus Schriftgrösse und Zeilenlänge von selbst. */
@media(max-width:900px){
  .hinweis-band .wrap{
    display: block;
    padding: 7px 18px;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: center;
  }
  .hinweis-band .wrap > span{ display: inline; }
  .hinweis-band .wrap > a{ margin-left: 8px; white-space: nowrap; }
}
.hinweis-band a {
  color: var(--gold-main);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.hinweis-band a:hover { color: #FFFFFF; }

/* ─────────────────────────────────────────────────────────────────────────
   Gründerkarten auf „Unser Team“

   Zwei Karten über die volle Breite, Foto links, Beschriftung rechts daneben —
   so wie im Prototyp. Die Karten sind KLEINER als die übrigen: hervorgehoben
   sind sie schon durch Rahmen und Anordnung.

   Warum hier und nicht in team-alle.css: bausteine.css wird NACH dem
   Seiten-Stylesheet geladen und übernahm nur einen Teil der Regeln — die
   Zeilenanordnung fehlte, und die Karten standen wie alle anderen. Da
   nachtraege.css noch später kommt, gilt hier das Gewünschte.
   ───────────────────────────────────────────────────────────────────────── */
.ppl.founders {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.ppl.founders .pc.wide {
  flex-direction: row;
  /* `stretch` statt `center`: mit `center` ist der Textblock nur so hoch wie
     sein Inhalt, und `margin-top:auto` am Verweis hat nichts, wogegen es
     drücken könnte — der Verweis sprang von Karte zu Karte.
     Gemeldet von Alex am 29.09.2026. */
  align-items: stretch;
  padding: 18px;
  gap: 18px;
}
.ppl.founders .pc.wide .pc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ppl.founders .pc.wide .pc-more { margin-top: auto; padding-top: 12px; }
/* Das Foto behält seine Höhe und wird nicht mitgestreckt. */
.ppl.founders .pc.wide .pc-photo { align-self: flex-start; }
.ppl.founders .pc.wide .pc-photo {
  width: 110px;
  flex-shrink: 0;
  border-radius: 14px;
  aspect-ratio: 4 / 5;
}
.ppl.founders .pc.wide .pc-body {
  padding: 0;
  text-align: left;
}
.ppl.founders .pc.wide .pc-body h3 { font-size: 18px; }
.ppl.founders .pc.wide .pc-more    { margin-top: 12px; }

/* Schmale Fenster: Foto über die Breite, Beschriftung darunter — aber ZWEI
   Karten nebeneinander. Einspaltig füllte eine Karte auf dem Telefon fast den
   Bildschirm; gemeldet von Alex am 29.09.2026. */
@media (max-width: 900px) {
  .ppl.founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppl.founders .pc.wide { flex-direction: column; align-items: stretch; padding: 0; }
  .ppl.founders .pc.wide .pc-photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; }
  .ppl.founders .pc.wide .pc-body { padding: 12px; text-align: center; }
  .ppl.founders .pc.wide .pc-body h3 { font-size: 15px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Hervorgehobener Menüpunkt

   Haken „hervorgehoben“ am Menüeintrag — abgesprochen für die
   Intensivtherapie.

   ZWEI Fehlversuche vorher, beide unsichtbar:
   1. Ein eigener Punkt davor — daneben stand schon `.dd-dot`, zwei Punkte
      sahen nach einem Fehler aus.
   2. Farbe auf dem <a> — die Beschriftung liegt in `.dd-name` und trägt dort
      ihre eigene Farbe (`--green-deepest`), die geerbte griff nie. Und alle
      Punkte sind ohnehin schon golden, ein Umfärben war nicht zu sehen.

   Deshalb hier: die BESCHRIFTUNG einfärben und fett setzen, plus eine
   leichte Fläche — das ist sichtbar, ohne ein zweites Zeichen.
   ───────────────────────────────────────────────────────────────────────── */
.dd-link[data-hervor] .dd-name,
.mobile-menu a[data-hervor] {
  color: var(--gold-dark, #B8891B) !important;
  font-weight: 700 !important;
}
.dd-link[data-hervor] {
  background: var(--gold-light, #FBF3DF);
}
.dd-link[data-hervor]:hover {
  background: var(--gold-main);
}
.dd-link[data-hervor]:hover .dd-name {
  color: #FFFFFF !important;
}

/* ── „Evidenz dazu“ auf den Detailseiten ─────────────────────────────────
   Kleine Karten: nur Überschrift und Jahr, die ganze Karte verweist auf
   /ueber-uns/studien. Drei in der Reihe statt zwei — es sind Hinweise, keine
   Zusammenfassungen. */
.ev-liste-klein{grid-template-columns:repeat(3,1fr);gap:16px}
.ev-karte-klein{padding:16px 18px;gap:10px;text-decoration:none}
.ev-karte-klein h3{font-size:15.5px}
.ev-karte-klein .ev-stufe{margin-top:auto}
.ev-karte-klein .ev-jahr{font-size:15.5px}
@media(max-width:900px){.ev-liste-klein{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ev-liste-klein{grid-template-columns:1fr}}

/* Der Verweis „Alle Studien ansehen" klebte an den Karten: das <p> hatte
   keinen eigenen Abstand, und `.mehr-link` bringt keinen mit. Gemeldet von
   Alex am 29.09.2026. 26px entsprechen dem Abstand, den die Karten
   untereinander haben (16px) plus der Unterlinie des Verweises. */
.ev-alle{margin-top:26px}

/* `.ev-badge` stand nur in studien.css — auf den Detailseiten war das
   Kennzeichen dadurch unformatierter Text. */
.ev-badge{display:inline-flex;align-items:center;font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px;white-space:nowrap}
.ev-rct{background:var(--cat-light);color:var(--cat-deeptext)}
.ev-review{background:var(--gold-light);color:var(--gold-deeptext)}
.ev-meta{background:#EAECF1;color:#3A4053}
.ev-studie{background:var(--flaeche,#F2F3F6);color:var(--text-mid)}


/* Aus dem Kids-Projekt übernommen (assets/css/site.css). Die Bildleisten
   tragen eine Lupe; ohne diese Regeln und assets/js/bild-lupe.js öffnet ein
   Klick nichts. */
/* ============================================================================
   Bild gross anzeigen
   ============================================================================
   Die Bildleisten trugen eine Lupe, aber kein Klick öffnete etwas. Diese Regeln
   gehören zu assets/js/bild-lupe.js. */
.ist-lupe{cursor:zoom-in}
.ist-lupe:focus-visible{outline:3px solid var(--gold-main); outline-offset:2px}
body.lupe-aktiv{overflow:hidden}
.lupe-overlay{position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(20,26,14,.88)}
.lupe-overlay.offen{display:flex}
.lupe-box{position:relative; max-width:min(1100px, 94vw); text-align:center}
.lupe-bild{max-width:100%; max-height:76vh; border-radius:12px; background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lupe-text{color:#fff; margin:14px auto 0; max-width:70ch; font-size:14.5px; line-height:1.5}
.lupe-zaehler{color:rgba(255,255,255,.7); margin:6px 0 0; font-size:13px}
.lupe-zu{position:absolute; top:-14px; right:-14px; width:40px; height:40px;
  border:none; border-radius:50%; background:#fff; color:var(--text-dark);
  font-size:24px; line-height:1; cursor:pointer}
.lupe-nav{position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border:none; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--text-dark);
  font-size:26px; line-height:1; cursor:pointer}
.lupe-vor{left:-58px}
.lupe-nach{right:-58px}
@media(max-width:900px){
  .lupe-vor{left:6px}
  .lupe-nach{right:6px}
  .lupe-zu{top:6px; right:6px}
}


/* ── Zitat auf der Personenkarte ─────────────────────────────────────────
   Das Zitat ist jetzt ein eigenes Kind von `.tt` und läuft über beide
   Spalten — also unter dem Foto statt in der schmalen Spalte daneben. Bei
   kurzen Zitaten ändert sich nichts Sichtbares, lange werden lesbar. */
/* Im RASTER (drei Karten) steht das Zitat neben dem Foto, in derselben Spalte
   wie Name und Rolle — die Karte ist dort breit genug. In der LEISTE, wo die
   Karte nur 240 px hat, läuft es über beide Spalten unter das Foto; sonst
   bricht ein langes Zitat mit zwei Wörtern je Zeile um. */
.tt-grid.rail .tt > blockquote{grid-column:1 / -1; margin-top:12px}
.tt-grid:not(.rail) .tt{grid-template-columns:110px 1fr}
.tt-grid:not(.rail) .tt img{width:110px}
.tt-grid:not(.rail) .tt blockquote{margin-top:10px}


/* ── Schaltfläche „nach oben" ────────────────────────────────────────────
   Sie wird vom Skript erzeugt und sitzt fest unten rechts. Auf schmalen
   Fenstern etwas kleiner und weiter vom Rand, damit sie nicht auf den
   Schaltflächen der Seite liegt. Unsichtbar bleibt sie klickfrei
   (`pointer-events`), sonst fängt sie Klicks ab, die der Seite gelten. */
.nach-oben{position:fixed;right:22px;bottom:22px;z-index:60;
           width:46px;height:46px;border-radius:50%;
           border:1px solid var(--cream-border);background:var(--white);
           color:var(--green-deepest);font-size:20px;line-height:1;cursor:pointer;
           box-shadow:0 8px 24px rgba(0,0,0,.14);
           opacity:0;transform:translateY(8px);pointer-events:none;
           transition:opacity .18s ease, transform .18s ease}
.nach-oben.sichtbar{opacity:1;transform:none;pointer-events:auto}
.nach-oben:hover{background:var(--cat-main);color:var(--white);border-color:var(--cat-main)}
.nach-oben:focus-visible{outline:2px solid var(--cat-main);outline-offset:3px}
@media(max-width:700px){.nach-oben{right:14px;bottom:80px;width:42px;height:42px;font-size:18px}}
@media(prefers-reduced-motion:reduce){.nach-oben{transition:none}}


/* ── Plakette „Headquarter“ / „Standort“ in der Standortkarte ────────────
   Gemeldet von Alex am 15.09.2026: die Plakette lag auf der Zeile mit Ort
   und Postleitzahl.

   URSACHE: kontakt.css stellt sie mit `margin-left:auto` an den rechten Rand
   einer Flexzeile — im Markup steht sie aber INNERHALB des inneren <div>
   neben Überschrift und Ortszeile, nicht als direktes Kind von `.loc-top`.
   Dort ist `margin-left:auto` wirkungslos, und die Plakette setzt sich
   unmittelbar unter die Ortszeile.

   ENTSCHIEDEN: obere rechte Ecke der Karte. `.location-card` trägt bereits
   `position:relative` (site.css), die Plakette wird also daran ausgerichtet.

   Auf schmalen Fenstern bleibt sie im Fluss: in der Ecke wäre sie dort über
   der Überschrift, und die Karte ist zu schmal für beides nebeneinander.

   ZWEI KLASSEN im Selektor, nicht eine: kontakt.css wird NACH nachtraege.css
   geladen (die Seitenstylesheets stehen im Kopf zuletzt) und setzt dort
   `.loc-kind{margin-left:auto}`. Bei gleicher Spezifität gewönne die spätere
   Regel. `.location-card .loc-kind` liegt darüber und gilt unabhängig von der
   Reihenfolge. */
.location-card .loc-kind{position:absolute;top:18px;right:18px;margin:0;z-index:1}

/* Platz für die Plakette, damit eine lange Überschrift nicht darunter läuft.
   Nur in Karten, die eine haben — sonst würde jede andere Standortkarte
   unnötig eingerückt. */
.loc-top:has(.loc-kind){padding-right:120px}

@media(max-width:600px){
  .location-card .loc-kind{position:static;display:inline-block;margin-top:6px}
  .loc-top:has(.loc-kind){padding-right:0}
}


/* ── Hinweis-Kasten ohne Foto ────────────────────────────────────────────
   Gemeldet von Alex am 17.09.2026: „Werden Sie Teil unseres Teams" wirkt
   sehr leer — zwei Zeilen links in einem breiten Rahmen.

   Mit Foto ist der Kasten zweispaltig (`.hat-foto`, site.css). Ohne Foto
   bleibt der Text linksbündig über die ganze Breite stehen; auf 1400 Pixeln
   sind das zwei kurze Zeilen und rechts davon nichts.

   Der Baustein war von Anfang an für die Mitte gedacht — das steht so in
   blocks/block-hinweis-kasten.php. Die Regel dafür fehlte nur. */
.jobs-box:not(.hat-foto){text-align:center}
.jobs-box:not(.hat-foto) .jobs-text{max-width:620px;margin:0 auto}
.jobs-box:not(.hat-foto) p{margin-left:auto;margin-right:auto}


/* ──────────────────────────────────────────────────────────────────────────
   EINGABEFELDER AUF DEM TELEFON

   Safari auf iOS zoomt in die Seite, sobald ein Feld mit weniger als 16px
   Schrift angetippt wird — die Seite bleibt danach vergrössert. Betroffen
   waren alle Formularfelder (14–15px), das Suchfeld der Angebote, die Suche
   der FAQ und die Felder des Blogs.

   WARUM `!important` UND WARUM HIER: die Seitenstylesheets werden NACH dieser
   Datei geladen, und ihre Regeln sind enger (`.blog-page .search-box input`).
   Ohne `!important` gewinnen sie. Die Alternative wäre, in fünfzehn Dateien
   je eine Zeile zu ändern — und die nächste neue Datei fiele wieder heraus.
   Die Regel gilt nur bis 768px; am Schreibtisch bleibt die Abstimmung, wie
   sie ist. Gemeldet von Alex am 29.09.2026.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
  input[type="number"], input[type="date"], input[type="password"], input:not([type]),
  textarea, select { font-size:16px !important }
}


/* ──────────────────────────────────────────────────────────────────────────
   TELEFON: TITELBEREICH

   Hier steht nur noch, was den Hero betrifft. Die Fotos des ersten Abschnitts
   werden in den SEITEN-Stylesheets begrenzt (produkt-detail.css,
   therapie-detail.css, diagnose-detail.css) — aus zwei Gründen:

   1. Seitendateien werden zuletzt geladen und gewinnen; eine Regel von hier
      wurde von `.pd-bild{max-width:360px}` überstimmt.
   2. `main > .hero + section` traf ohnehin nichts: zwischen Hero und erstem
      Abschnitt steht die Brotkrumenleiste als `<div>`.

   Beides am 29.09.2026 an Alex' Gerät aufgefallen, nachdem zwei Anläufe
   scheinbar nichts geändert hatten.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .hero{padding:34px 0 30px}
  .hero.has-image{background-position:center 30%}
  .hero h1{font-size:30px;line-height:1.18}
  .hero-lede{font-size:14.5px}
  .hero-badge{margin-bottom:12px}
}

/* ──────────────────────────────────────────────────────────────────────────
   TEAM

   Die Regeln dafür stehen in assets/css/team-alle.css, nicht hier: die
   Seitenstylesheets werden ZULETZT geladen, und dort stand
   `@media(max-width:440px){.tm-grid{grid-template-columns:1fr}}`. Eine
   Vorgabe von hier wäre davon überstimmt worden — genau das ist beim ersten
   Versuch passiert, und für Alex hat sich nichts geändert (29.09.2026).

   Merke: eine Regel für einen Seitenbaustein gehört in die Datei dieser
   Seite, nicht in die gemeinsame. Sonst gewinnt die falsche.
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   NICHTS DARF ÜBER DEN RAND HINAUS

   Ein einzelnes zu breites Element — eine Tabelle, ein langes Wort, ein
   Raster mit fester Spaltenbreite — macht die ganze Seite seitlich
   verschiebbar. Das fällt am Schreibtisch nie auf.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  /* `clip`, NICHT `hidden`: `hidden` macht aus dem Element einen
     Scroll-Behälter, und damit hört die Kopfzeile auf zu kleben — genau das
     ist am 29.09.2026 passiert, das Menü scrollte auf dem Telefon weg.
     In site.css steht dieselbe Regel mit derselben Begründung; hier hatte ich
     sie mit `hidden` wiederholt und damit kaputtgemacht. */
  html{overflow-x:clip}
  /* Rasterzellen dürfen schrumpfen. Ohne das gilt `min-width:auto`, und der
     Inhalt bestimmt die Breite. */
  [class*="-grid"] > *, .hub-grid > *, .pr-grid > *{min-width:0}
  img, video, iframe, table{max-width:100%}
  pre, code{overflow-x:auto}
}

/* ──────────────────────────────────────────────────────────────────────────
   DIE DREI ZUSAGEN UNTER DEM KENNZAHLENBAND

   `.trust-row` stand in elf Seitendateien in derselben Liste wie die
   Filterleisten: `flex-wrap:nowrap; overflow-x:auto`. Für Filterchips ist das
   richtig — man schiebt sie seitlich. Für drei Sätze ist es falsch: sie
   liefen aus dem Bild statt umzubrechen. Aus den Listen entfernt und hier
   festgehalten, damit die nächste Seitendatei es nicht wieder erbt.
   Gemeldet von Alex am 29. und 30.09.2026.
   ────────────────────────────────────────────────────────────────────────── */
.trust-row{flex-wrap:wrap; overflow-x:visible}
@media(max-width:760px){
  .trust-row{justify-content:center; text-align:center; gap:6px 14px}
  .trust-row span:first-child{flex:0 0 100%}
}

/* Plakette und goldener Rahmen für die hervorgehobene Preiskarte der
   Therapieseiten. Form wie beim Baustein `preiskarten` (.pr-badge), damit
   beide Stellen gleich aussehen. 30.09.2026 */
.price-card.featured{border-color:var(--gold-main);
  box-shadow:0 10px 28px rgba(196,154,40,.18)}
.price-badge{position:absolute;top:-12px;left:22px;background:var(--gold-main);
  color:var(--green-deepest);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 12px;border-radius:20px}

/* ──────────────────────────────────────────────────────────────────────────
   DER KNOPF DER PREISKARTE: NUR BEIM HERVORGEHOBENEN TARIF GEFÜLLT

   Wie im Kids-Auftritt: alle Karten tragen den Knopf als Umriss, nur die
   Karte mit der Plakette „Beliebt" hat ihn gefüllt. So führt die Farbe das
   Auge auf einen Tarif, statt dreimal dasselbe zu rufen.
   Gewünscht von Alex am 30.09.2026.

   `.btn-gold` ist die gefüllte Fassung aus site.css; hier wird sie für die
   nicht hervorgehobenen Karten zurückgenommen — mit derselben Höhe und
   Schrift, damit die Reihe ruhig bleibt.
   ────────────────────────────────────────────────────────────────────────── */
.price-card .btn-gold{
  background:transparent; color:var(--cat-dark);
  border:1.5px solid var(--cat-main); box-shadow:none;
}
.price-card .btn-gold:hover{
  background:var(--cat-main); color:var(--white); border-color:var(--cat-main);
}
.price-card.featured .btn-gold{
  background:var(--gold-main); color:var(--green-deepest);
  border-color:var(--gold-main);
}
.price-card.featured .btn-gold:hover{
  background:var(--gold-dark); border-color:var(--gold-dark); color:var(--white);
}


/* Antwort im Ausklappblock — auf JEDER Seite.
   Bis 05.10.2026 stand .qa-a nur in den Stilen einzelner Seiten (faq.css,
   alle-diagnosen.css, diagnose-detail.css …). Auf Seiten ohne eigene
   Stildatei, etwa Wien mit dem Baustein „Häufige Fragen“, klebte die Antwort
   ohne Innenabstand am Rahmen. Dieselben Werte wie dort. */
.qa-a{padding:0 20px 18px;color:var(--text-mid);font-size:14px;line-height:1.7}
.qa-a > :first-child{margin-top:0}
.qa-a > :last-child{margin-bottom:0}
.faq-liste{max-width:1200px}