/* ==========================================================================
   PHYSIOTHERAPIE TSCHIEDEL · Gestaltungssystem, Fassung 4 "Kino"
   Eine Schrift (Figtree) in zwei Stärken: 400 / 700
   Fünf Schriftgrößen, feste Rangfolge (Werte bei 1440 px Breite):
     Display  62 px  H1 Start und jeder Bereichstitel (H2): Ohne Rezept, Wo tut es weh, Team, Karriere, Termin
     Titel    41 px  H3 Blocktitel in einem Bereich: So einfach geht es, Gut zu wissen, Tafel, Bewerben, Telefonnummer
     Zwischen 30 px  H4 Einträge: Stationen, Namen, Fakten, Fragen-Listen
     Groß     21 px  Einleitungssätze
     Text     19 px  Fließtext
   Jede Stufe ist rund das 1,4- bis 1,5-Fache der nächsten. Nie zwei Ebenen in derselben Größe.
   Dazu nur fürs Kleingedruckte (Copyright, Impressum, Datenschutz im Fuß): 15 px.
   Und nur für den Hinweis "KI-generiert" auf jedem KI-Bild: 11 px (Klasse .ki).
   Farben: Hauptfarbe Seegrün (mit Nacht-Ton), Akzent Mint, Papier, Tinte
   Eine Eckenform: 24 px. Raster: 8 px.
   Kopfzeilen: große Display-Überschrift links, ein kurzer Satz rechts.
   ========================================================================== */

@font-face{font-family:"Figtree";src:url("../fonts/figtree-var.woff2") format("woff2");
  font-weight:300 900;font-style:normal;font-display:swap}

:root{
  /* Farben */
  --tief:#0a2e28;        /* Hauptfarbe: Seegrün */
  --nacht:#041a17;       /* Hauptfarbe, dunkelster Ton (Bühne) */
  --mint:#78e2c2;        /* Akzent */
  --papier:#f1f5f3;      /* neutral hell */
  --tinte:#0b1916;       /* neutral dunkel */
  --getoent:#e4efea;     /* Papier mit einem Hauch Mint */

  /* Schrift */
  --schrift:"Figtree", "Segoe UI", system-ui, sans-serif;
  --t-display:clamp(2.5rem, 1rem + 3.2vw, 4.5rem);
  --t-titel:clamp(1.75rem, 1.15rem + 1.6vw, 2.875rem);
  --t-zwischen:clamp(1.375rem, 1.05rem + .9vw, 2rem);
  --t-gross:clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);
  --t-text:1.1875rem;
  --t-klein:.9375rem;    /* nur Kleingedrucktes: letzte Zeile im Fuß */
  --t-hinweis:.6875rem;  /* nur der Hinweis "KI-generiert" auf Bildern */

  /* Raster */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem; --s8:8rem;
  --rand:clamp(1.25rem, 4vw, 6rem);
  --breite:96rem;
  --lese:46rem;
  --sektion:clamp(5rem, 10vw, 9rem);

  /* Form und Bewegung */
  --r:24px;
  --knopf-h:3.5rem;
  --nav-h:5rem;
  --feder:cubic-bezier(.16,1,.3,1);
  --schatten:0 1px 2px rgba(4,26,23,.05), 0 12px 32px -20px rgba(4,26,23,.18);
}

/* ---------- Kontext: hell / getönt / dunkel ---------- */
[data-ton]{--flaeche:var(--papier);--fg:var(--tinte);--fg-2:rgba(11,25,22,.74);--fg-3:rgba(11,25,22,.56);
  --akzent-text:var(--tief);--knopf-bg:var(--tief);--knopf-fg:var(--papier);--rahmen:rgba(11,25,22,.14);
  --karte:#fff;background:var(--flaeche);color:var(--fg)}
[data-ton="getoent"]{--flaeche:var(--getoent)}
[data-ton="tief"],[data-ton="nacht"]{--flaeche:var(--tief);--fg:var(--papier);--fg-2:rgba(241,245,243,.80);
  --fg-3:rgba(241,245,243,.60);--akzent-text:var(--mint);--knopf-bg:var(--mint);--knopf-fg:var(--nacht);
  --rahmen:rgba(241,245,243,.24);--karte:rgba(241,245,243,.06)}
[data-ton="nacht"]{--flaeche:var(--nacht)}

/* ---------- Basis ---------- */
@media (min-width:1680px){
  html{font-size:clamp(100%, calc(100% + (100vw - 1680px) * .006), 130%)}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem);
  width:100%;max-width:100%}
body{margin:0;width:100%;max-width:100%;overflow-x:clip;font-family:var(--schrift);font-size:var(--t-text);font-weight:400;
  line-height:1.6;color:var(--tinte);background:var(--nacht);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
[hidden]{display:none !important}
p{max-width:var(--lese)}
ul,ol{list-style:none}
img,svg,video,iframe,canvas{max-width:100%}
img{display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
strong,b{font-weight:700}
::selection{background:var(--mint);color:var(--nacht)}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:6px}
[data-ton]:not([data-ton="tief"]):not([data-ton="nacht"]) :focus-visible{outline-color:var(--tief)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Lockfeld gegen Spam: für Menschen unsichtbar, Programme füllen es aus */
.falle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none}
.sprung{position:fixed;left:var(--s2);top:var(--s2);z-index:100;padding:var(--s2) var(--s3);background:var(--mint);color:var(--nacht);
  border-radius:var(--r);font-weight:700;transform:translateY(-200%)}
.sprung:focus{transform:none}

/* ---------- Schriftstufen ---------- */
.t-display{font-size:var(--t-display);font-weight:700;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.t-titel{font-size:var(--t-titel);font-weight:700;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.t-zwischen{font-size:var(--t-zwischen);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.t-gross{font-size:var(--t-gross);line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.akzent{color:var(--akzent-text);font-style:normal}
.label{font-size:var(--t-text);font-weight:700;color:var(--akzent-text)}

/* ---------- Raster ---------- */
.wrap{width:min(100% - 2 * var(--rand), var(--breite));margin-inline:auto}
.sektion{position:relative;padding-block:var(--sektion)}

/* ---------- Knöpfe: genau zwei Stile ---------- */
.knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:var(--knopf-h);
  padding:0 1.75rem;border-radius:var(--r);border:2px solid transparent;font-weight:700;font-size:var(--t-text);line-height:1.2;
  cursor:pointer;white-space:nowrap;transition:transform .5s var(--feder),background-color .3s ease,border-color .3s ease,color .3s ease}
.btn svg{width:1.25rem;height:1.25rem;flex:none;transition:transform .5s var(--feder)}
.btn:hover svg.pfeil{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn--haupt{background:var(--knopf-bg);color:var(--knopf-fg)}
.btn--haupt:hover{background:color-mix(in srgb, var(--knopf-bg) 86%, var(--fg))}
.btn--zweit{background:transparent;border-color:var(--rahmen);color:var(--fg)}
.btn--zweit:hover{border-color:var(--fg)}

.ico{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   NAVIGATION: über dem Startbild durchsichtig, danach hell; beim Runterscrollen weg, beim Hochscrollen da
   ========================================================================== */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);color:var(--papier);
  transition:background-color .4s ease,color .4s ease,box-shadow .4s ease,transform .6s var(--feder)}
.nav.ist-weg{transform:translateY(-105%)}
.nav__innen{height:100%;width:100%;padding-inline:var(--rand);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.nav.ist-gescrollt{background:rgba(4,26,23,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.nav.ist-hell{background:rgba(241,245,243,.88);color:var(--tinte);box-shadow:0 1px 0 rgba(11,25,22,.06);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.marke{display:flex;align-items:center;flex-shrink:0;--logo-schrift:var(--papier);--logo-figur:var(--papier);--logo-keil:var(--mint)}
.nav.ist-hell .marke{--logo-schrift:#005c63;--logo-figur:var(--tinte);--logo-keil:#a1d2bd}
.marke__logo{display:block;height:2.75rem;aspect-ratio:4.772;flex:none;overflow:visible}
.zl-mask{padding-bottom:.1em;margin-bottom:-.1em}
.nav__links{display:flex;align-items:center;gap:clamp(.75rem, 1.6vw, 2rem)}
.nav__links a{position:relative;font-weight:700;padding:.5rem 0;opacity:.86;transition:opacity .25s ease;white-space:nowrap}
.nav__links a:hover,.nav__links a.ist-aktiv{opacity:1}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--feder)}
.nav.ist-hell .nav__links a::after{background:var(--tief)}
.nav__links a.ist-aktiv::after,.nav__links a:hover::after{transform:scaleX(1)}
.nav__zahl{display:inline-grid;place-items:center;min-width:1.375rem;height:1.375rem;margin-left:.375rem;padding:0 .375rem;border-radius:var(--r);
  background:var(--mint);color:var(--nacht);font-size:.875rem;font-weight:700;vertical-align:.1em}
.nav.ist-hell .nav__zahl{background:var(--tief);color:var(--mint)}
.nav__aktion{display:flex;align-items:center;gap:var(--s2)}
.nav__tel{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;white-space:nowrap}
.nav .btn{min-height:3rem;padding:0 1.25rem}
.nav .btn--haupt{background:var(--mint);color:var(--nacht)}
.nav.ist-hell .btn--haupt{background:var(--tief);color:var(--papier)}
/* Menü-Knopf: Pille mit Wort, zwei Striche werden zum X ("Menü" wird "Schließen") */
.nav__menue{display:none;align-items:center;gap:.625rem;height:3rem;padding:0 1.125rem 0 1rem;border:0;border-radius:var(--r);
  background:rgba(241,245,243,.14);color:inherit;font:inherit;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s ease}
.nav.ist-hell .nav__menue{background:rgba(10,46,40,.08)}
.nav__striche{position:relative;width:1.125rem;height:.75rem;flex:none}
.nav__striche::before,.nav__striche::after{content:"";position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .5s var(--feder),top .5s var(--feder)}
.nav__striche::before{top:0}
.nav__striche::after{top:calc(100% - 2px)}
.nav.menue-offen .nav__striche::before{top:calc(50% - 1px);transform:rotate(45deg)}
.nav.menue-offen .nav__striche::after{top:calc(50% - 1px);transform:rotate(-45deg)}
.nav__wort::before{content:"Menü"}
.nav.menue-offen .nav__wort::before{content:"Schließen"}
/* Bei offenem Menü ist die Leiste immer dunkel und durchgehend, auch wenn darunter ein heller Bereich liegt */
.nav.menue-offen{background:transparent;color:var(--papier);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav.menue-offen .marke{--logo-schrift:var(--papier);--logo-figur:var(--papier);--logo-keil:var(--mint)}
.nav.menue-offen .nav__menue{background:rgba(241,245,243,.14)}

/* Menü: große Links gleiten nacheinander herein, unten im Daumenbereich Öffnungszeit und die zwei Wege zu uns */
.menue{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--nav-h) + var(--s4)) var(--rand) calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--nacht);color:var(--papier);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.menue.ist-offen{opacity:1;visibility:visible;transition:opacity .45s ease,visibility .45s}
.menue__links{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.menue__links a{display:inline-flex;align-items:center;padding:.125rem 0;font-size:var(--t-display);font-weight:700;line-height:1.12;
  letter-spacing:-.035em;opacity:0;transform:translateY(1rem);transition:opacity .2s ease,transform .2s ease,color .25s ease}
.menue.ist-offen .menue__links a{opacity:1;transform:none;
  transition:opacity .5s ease calc(var(--i) * 45ms + 80ms),transform .8s var(--feder) calc(var(--i) * 45ms + 80ms),color .25s ease}
.menue__links a:hover,.menue__links a.ist-aktiv{color:var(--mint)}
.menue__links .nav__zahl{margin-left:.75rem;min-width:1.75rem;height:1.75rem;font-size:1rem;letter-spacing:0;vertical-align:0}
.menue__fuss{margin-top:auto;padding-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3);width:100%;max-width:30rem;
  opacity:0;transform:translateY(1rem);transition:opacity .2s ease,transform .2s ease}
.menue.ist-offen .menue__fuss{opacity:1;transform:none;transition:opacity .5s ease .4s,transform .8s var(--feder) .4s}
.menue__knoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1)}
.menue__knoepfe .btn{padding:0 1rem}

/* ==========================================================================
   START: ein großes Behandlungsbild empfängt
   ========================================================================== */
.start{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:var(--nav-h);--fuss-oben:clamp(2rem, 6vh, 4rem);--fuss-unten:clamp(1.5rem, 4vh, 2.5rem)}
.start__bild{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--nacht)}
.start__bild picture{display:block;width:100%;height:100%}
.start__bild img{width:100%;height:100%;object-fit:cover;object-position:66% 38%}
/* Schleier: links ruhig und dunkel für die Überschrift, rechts bleibt die Behandlung hell */
.start__schleier{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,26,23,.94) 0%, rgba(4,26,23,.86) 26%, rgba(4,26,23,.55) 44%, rgba(4,26,23,0) 62%),
    linear-gradient(0deg, rgba(4,26,23,.88) 0%, rgba(4,26,23,.4) 18%, rgba(4,26,23,0) 38%),
    linear-gradient(180deg, rgba(4,26,23,.6) 0%, rgba(4,26,23,0) 20%)}
/* Starttext bündig mit dem Logo in der Navigation (volle Breite, gleicher Rand) */
.start .wrap{width:auto;margin-inline:0;padding-inline:var(--rand)}
.start__inhalt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.start__titel{font-size:var(--t-display);font-weight:700;line-height:1.02;letter-spacing:-.035em;max-width:9.4em;text-wrap:balance}
.start__zeile{display:block}
.start__titel .akzent{display:block;text-wrap:balance}
.start__lead{max-width:30rem;color:rgba(241,245,243,.86)}
.start__fuss{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s2) var(--s4);
  padding-block:var(--fuss-oben) var(--fuss-unten)}
.status{display:flex;flex-direction:column;gap:.125rem}
.status__zeile{display:flex;align-items:center;gap:.625rem;font-weight:700}
.status__punkt{width:.625rem;height:.625rem;border-radius:50%;background:#9aa7a3;flex:none}
.status.ist-offen .status__punkt{background:var(--mint)}
.status__mehr{color:var(--fg-2);padding-left:1.25rem}
.pille{display:inline-block;font-weight:700;color:var(--papier);transition:color .3s ease}
.pille:hover{color:var(--mint)}
.pille__ende{white-space:nowrap}
.pille svg{width:1.125rem;height:1.125rem;vertical-align:-.2em;transition:transform .5s var(--feder)}
.pille:hover svg{transform:translateX(4px)}

/* ==========================================================================
   Kopfzeilen der Bereiche: Display links, kurzer Satz rechts
   ========================================================================== */
.ohne__kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4) clamp(2rem, 6vw, 6rem);align-items:end}
.ohne__kopf .t-display{max-width:8.5em}
.ohne__kopf .t-gross{max-width:30rem}

/* ==========================================================================
   OHNE REZEPT
   ========================================================================== */
/* Das Nahbild öffnet sich beim Scrollen auf volle Breite */
.fenster{position:relative;margin-top:var(--s7);height:clamp(22rem, 84vh, 56rem)}
.fenster__rahmen{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 var(--rand) 0 var(--rand) round var(--r));will-change:clip-path}
.fenster__rahmen img{width:100%;height:100%;object-fit:cover;object-position:56% 46%}

/* So geht es: Stationen laufen seitwärts */
.zug{position:relative;margin-top:var(--sektion);padding-block:var(--s4);overflow:hidden}
.zug__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s2) var(--s4)}
.zug.ist-gefuehrt{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.zug__navi{display:flex;align-items:center;gap:var(--s2)}
.zug__tipp{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--fg-3)}
.nur-klein{display:none}
.zug__tipp svg{width:1.25rem;height:1.25rem}
.zug__fenster{margin-top:var(--s5)}
.zug__bahn{display:flex;align-items:stretch;gap:clamp(2.5rem, 6vw, 7rem);width:max-content;
  padding-inline:max(var(--rand), calc((100% - var(--breite)) / 2))}
.station{display:grid;grid-template-columns:auto minmax(0,20rem);align-items:end;gap:clamp(1.5rem, 3vw, 3rem)}
.station__bild{height:clamp(18rem, calc(100vh - 17rem), 42rem);height:clamp(18rem, calc(100svh - 17rem), 42rem);aspect-ratio:4/5;
  border-radius:var(--r);overflow:hidden;background:var(--getoent)}
.station__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* Hinweis "KI-generiert": klein, unten rechts im Bild (Start und Karriere oben rechts, weil unten Text steht) */
.station__bild,.person__bild,.gutschein__bild{position:relative}
.ki{position:absolute;right:.75rem;bottom:.75rem;z-index:2;padding:.3125rem .5625rem;border-radius:var(--r);
  font-size:var(--t-hinweis);font-weight:700;line-height:1;letter-spacing:.02em;white-space:nowrap;pointer-events:none;
  color:rgba(241,245,243,.92);background:rgba(4,26,23,.48);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ki--oben{top:calc(var(--nav-h) + .75rem);bottom:auto;right:var(--rand)}
.ki--fenster{right:calc(var(--rand) + .75rem)}
.station__text{display:flex;flex-direction:column;gap:var(--s2);padding-bottom:var(--s2)}
.station--ende{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s3);
  width:clamp(22rem, 30vw, 30rem);padding:clamp(1.75rem, 3vw, 3rem);border-radius:var(--r)}
.kurz-liste{display:flex;flex-direction:column;gap:.375rem}
.kurz-liste li{font-size:var(--t-zwischen);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.station__preis{color:var(--fg-2)}
.zug__leiste{width:6rem;height:6px;border-radius:6px;background:var(--rahmen);overflow:hidden}
.zug__leiste span{display:block;height:100%;border-radius:6px;background:var(--tief);transform-origin:left center;transform:scaleX(.08)}

/* Fragen: Titel links, Antworten rechts */
.fragen{margin-top:var(--sektion);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s4) clamp(2rem, 6vw, 6rem);align-items:start}
.fragen__liste{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.frage{border-radius:var(--r);background:var(--karte);box-shadow:inset 0 0 0 1px var(--rahmen);transition:box-shadow .3s ease}
.frage[open]{box-shadow:inset 0 0 0 2px var(--akzent-text)}
.frage summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:1.25rem var(--s3);
  font-weight:700;cursor:pointer}
.frage summary::-webkit-details-marker{display:none}
.frage summary .plus{position:relative;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--knopf-bg);flex:none}
.frage summary .plus::before,.frage summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:.75rem;height:2px;
  background:var(--knopf-fg);border-radius:2px;transform:translate(-50%,-50%);transition:transform .4s var(--feder)}
.frage summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.frage[open] summary .plus::after{transform:translate(-50%,-50%) rotate(0)}
.frage p{padding:0 var(--s3) 1.5rem;color:var(--fg-2)}

/* ==========================================================================
   LEISTUNGEN: Körperkarte
   ========================================================================== */
.karte-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5) clamp(2rem, 6vw, 6rem);align-items:start}
.karte-links{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.koerper{position:relative;width:min(100%, 18rem);margin-inline:auto;aspect-ratio:960 / 2260}
/* Körper als Bild: Hintergrund = Getönt, die Ränder laufen weich aus, damit kein Kasten entsteht */
.koerper img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 95%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 3%, #000 95%, transparent 100%);
  mask-composite:intersect}
.punkt-btn{position:absolute;transform:translate(-50%,-50%);width:3rem;height:3rem;border-radius:50%;border:0;background:transparent;
  cursor:pointer;display:grid;place-items:center;padding:0}
.punkt-btn::before{content:"";position:absolute;inset:.5rem;border-radius:50%;background:rgba(10,46,40,.14);transition:transform .5s var(--feder),background .3s}
.punkt-btn::after{content:"";width:1rem;height:1rem;border-radius:50%;background:var(--tief);box-shadow:0 0 0 4px #fff;position:relative;transition:transform .5s var(--feder)}
.punkt-btn:hover::before{transform:scale(1.35)}
.punkt-btn[aria-pressed="true"]::before{background:rgba(120,226,194,.6);transform:scale(1.25)}
.punkt-btn[aria-pressed="true"]::after{transform:scale(1.15)}
.punkt-btn .sr{pointer-events:none}

.karte-rechts{display:flex;flex-direction:column;gap:var(--s3);min-width:0;padding-top:clamp(0rem, 1vw, 1rem)}
.themen{display:flex;flex-wrap:wrap;gap:var(--s1)}
.thema{min-height:3rem;padding:0 1.25rem;border-radius:var(--r);border:2px solid var(--rahmen);background:transparent;font-weight:700;cursor:pointer;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.thema:hover{border-color:var(--tief)}
.thema[aria-pressed="true"]{background:var(--tief);border-color:var(--tief);color:var(--papier)}
.tafel{position:relative;margin-top:var(--s2);padding:clamp(1.75rem, 3.5vw, 3rem);border-radius:var(--r);background:#fff;box-shadow:var(--schatten);
  display:flex;flex-direction:column;gap:var(--s3);min-height:22rem}
.tafel__kopf{display:flex;flex-direction:column;gap:var(--s2)}
.tafel__kopf p{color:var(--fg-2)}
.tafel__liste{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 14rem), 1fr));gap:var(--s1)}
.tafel__liste li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.25rem;padding:.5rem .5rem .5rem 1.125rem;
  border-radius:var(--r);background:var(--getoent);font-weight:700;line-height:1.3}
.tafel__liste li.ohne-rezept::after{content:"";flex:none;width:.75rem;height:.75rem;margin-right:.625rem;border-radius:50%;background:var(--mint)}
.tafel__fuss{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2)}
.tafel [data-wechsel]{transition:opacity .35s ease,transform .5s var(--feder)}
.tafel.wechselt [data-wechsel]{opacity:0;transform:translateY(8px)}
.etikett{display:inline-flex;align-items:center;gap:.625rem;font-weight:700;color:var(--fg)}
.etikett::before,.alle li.ohne-rezept::after{content:"";flex:none;width:.75rem;height:.75rem;border-radius:50%;background:var(--mint)}

/* Aufklapper (alle Behandlungen, Qualifikationen) */
.quali summary{display:inline-flex;align-items:center;gap:.75rem;min-height:3rem;padding:0 1.25rem;border-radius:var(--r);
  box-shadow:inset 0 0 0 2px var(--rahmen);font-weight:700;cursor:pointer;list-style:none;transition:box-shadow .3s ease}
.quali summary:hover{box-shadow:inset 0 0 0 2px var(--fg)}
.quali summary::-webkit-details-marker{display:none}
.quali summary svg{transition:transform .4s var(--feder)}
.quali[open] summary svg{transform:rotate(180deg)}
.quali ul{margin-top:var(--s3);display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr));gap:.5rem var(--s3)}
.quali li{position:relative;padding-left:1.5rem;color:var(--fg-2)}
.quali li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border-radius:50%;background:var(--akzent-text)}
.alle li{display:flex;align-items:center;gap:.625rem;padding-left:0;font-weight:700;color:var(--fg)}
.alle li::before{display:none}

/* ==========================================================================
   TEAM: drei dezente Karten auf einer Höhe. Alle Bilder auf demselben hellen Grund.
   ========================================================================== */
.team__kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4) clamp(2rem, 6vw, 6rem);align-items:end}
.team__kopf .t-display{max-width:11em}
.team__kopf .t-gross{max-width:28rem}
.team-reihe{margin-top:var(--s6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem, 2.5vw, 2rem);align-items:stretch}
.person{display:flex;flex-direction:column;min-width:0;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--schatten);
  transition:transform .6s var(--feder),box-shadow .6s var(--feder)}
.person__bild{aspect-ratio:4/5;overflow:hidden;background:var(--getoent)}
.person__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform 1.2s var(--feder)}
.person__text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:var(--s3) var(--s3) var(--s4)}
.person__rolle{color:var(--akzent-text);font-weight:700}
.person__text > p:not(.person__rolle){color:var(--fg-2)}
.person__text .quali{margin-top:auto;padding-top:var(--s1)}
/* Der freie Platz: gleiche Karte, führt zur Stelle */
.person--platz:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(4,26,23,.06), 0 24px 48px -24px rgba(4,26,23,.28)}
.person--platz:hover .person__bild img{transform:scale(1.03)}
.platz__link{margin-top:auto;padding-top:var(--s1);display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--fg)}
.platz__link svg{width:1.25rem;height:1.25rem;transition:transform .5s var(--feder)}
.person--platz:hover .platz__link svg{transform:translateX(4px)}

/* ==========================================================================
   KARRIERE: ein Kino-Moment wie der Start. Bild, Satz, vier Fakten, ein Knopf.
   ========================================================================== */
/* Höher als ein Bildschirm, wie die anderen Bereiche: das Bild hat Luft, der Text endet mit dem gleichen Abstand wie überall */
.karriere-buehne{background:var(--papier)}
.karriere{position:relative;isolation:isolate;overflow:hidden;min-height:118vh;min-height:118svh;display:flex;flex-direction:column;
  justify-content:center}
.karriere__bild{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--nacht)}
.karriere__bild img{width:100%;height:100%;object-fit:cover;object-position:34% 40%}
.karriere__schleier{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,26,23,.94) 0%, rgba(4,26,23,.84) 26%, rgba(4,26,23,.42) 46%, rgba(4,26,23,0) 64%),
    linear-gradient(0deg, rgba(4,26,23,.85) 0%, rgba(4,26,23,0) 34%),
    linear-gradient(180deg, rgba(4,26,23,.45) 0%, rgba(4,26,23,0) 18%)}
.karriere__inhalt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);
  padding:var(--sektion) var(--rand)}
.karriere__titel{font-size:var(--t-display);font-weight:700;line-height:1.02;letter-spacing:-.035em;max-width:8.6em;text-wrap:balance}
.karriere__titel .akzent{display:block}
.stelle{display:grid;grid-template-columns:repeat(2,minmax(0,15.5rem));gap:var(--s3) var(--s5)}
.stelle > div{display:flex;flex-direction:column;gap:.125rem}
.stelle dt{font-size:var(--t-zwischen);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--mint)}
.stelle dd{margin:0;color:var(--fg-2)}

/* Bewerbung im Fenster */
.bewerben{width:min(100% - 2 * var(--rand), 64rem);max-height:min(92vh, 52rem);max-height:min(92svh, 52rem);padding:0;border:0;
  border-radius:var(--r);overflow:auto;overscroll-behavior:contain;box-shadow:0 40px 120px -40px rgba(0,0,0,.6)}
.bewerben::backdrop{background:rgba(4,26,23,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.dialog-offen{overflow:hidden}
.bewerben__innen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem, 4vw, 3.5rem);
  padding:clamp(1.5rem, 4vw, 3.5rem)}
.bewerben__intro{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.bewerben__bild{position:relative;border-radius:calc(var(--r) - 4px);overflow:hidden;aspect-ratio:3/2}
.bewerben__bild img{width:100%;height:100%;object-fit:cover}
.kurz-haken{display:flex;flex-direction:column;gap:.625rem}
.kurz-haken li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;color:var(--fg-2);text-wrap:pretty}
.kurz-haken svg{width:1.25rem;height:1.25rem;margin-top:.2rem;color:var(--mint);stroke-width:2.5}
.bewerben__form{min-width:0;padding:clamp(1.25rem, 3vw, 2rem);border-radius:calc(var(--r) - 4px);background:rgba(4,26,23,.42)}
.bewerben__zu{position:absolute;top:var(--s2);right:var(--s2);z-index:2;width:3rem;height:3rem;border-radius:50%;
  border:0;background:var(--papier);color:var(--tinte);cursor:pointer;display:grid;place-items:center;transition:transform .5s var(--feder)}
.bewerben__zu:hover{transform:rotate(90deg)}
.bewerben__zu span{position:relative;width:1.125rem;height:2px}
.bewerben__zu span::before,.bewerben__zu span::after{content:"";position:absolute;inset:0;background:currentColor;border-radius:2px;transform:rotate(45deg)}
.bewerben__zu span::after{transform:rotate(-45deg)}

/* ---------- Formulare ---------- */
.formular{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.fortschritt{display:flex;flex-direction:column;gap:.75rem}
.fortschritt__text{display:flex;justify-content:space-between;font-weight:700;color:var(--fg-2)}
.fortschritt__balken{height:.5rem;border-radius:var(--r);background:var(--rahmen);overflow:hidden}
.fortschritt__balken span{display:block;height:100%;width:33.34%;border-radius:var(--r);background:var(--mint);transition:width .6s var(--feder)}
.feld{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.feld > label,.feld legend{font-weight:700}
.feld legend{padding:0;margin-bottom:.5rem}
fieldset.feld{border:0;margin:0;padding:0;min-width:0}
.eingabe{width:100%;min-height:3.5rem;padding:.875rem 1.125rem;border-radius:var(--r);border:2px solid var(--rahmen);background:var(--karte);
  color:var(--fg);transition:border-color .25s ease,box-shadow .25s ease}
.eingabe::placeholder{color:var(--fg-3)}
.eingabe:hover{border-color:var(--fg-3)}
.eingabe:focus{outline:none;border-color:var(--akzent-text);box-shadow:0 0 0 4px color-mix(in srgb, var(--akzent-text) 22%, transparent)}
.eingabe.ist-fehler{border-color:#c4553f}
.wahl{display:flex;flex-wrap:wrap;gap:var(--s1)}
.wahl label{position:relative;cursor:pointer}
.wahl input{position:absolute;opacity:0;pointer-events:none}
.wahl span{display:inline-flex;align-items:center;min-height:3rem;padding:0 1.25rem;border-radius:var(--r);border:2px solid var(--rahmen);
  font-weight:700;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.wahl label:hover span{border-color:var(--fg-3)}
.wahl input:checked + span{background:var(--akzent-text);border-color:var(--akzent-text);color:var(--flaeche)}
[data-ton="tief"] .wahl input:checked + span,[data-ton="nacht"] .wahl input:checked + span{color:var(--nacht)}
.wahl input:focus-visible + span{outline:3px solid var(--mint);outline-offset:3px}
.wahl--gross{flex-direction:column}
.wahl--gross label,.wahl--gross span{width:100%}
.wahl--gross span{min-height:3.5rem}
.zwei-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.einwilligung{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;color:var(--fg-2)}
.einwilligung input{width:1.5rem;height:1.5rem;margin:.15rem 0 0;accent-color:var(--tief)}
[data-ton="tief"] .einwilligung input{accent-color:var(--mint)}
.formular__fuss{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between}
.fehlermeldung{color:#c4553f;font-weight:700;min-height:1.6em}
[data-ton="tief"] .fehlermeldung{color:#ffb3a3}
.schritt-form[hidden]{display:none}
.erfolg{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.erfolg__haken{width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--nacht)}
.erfolg__haken svg{width:2rem;height:2rem;stroke-width:2.5}
.erfolg p{color:var(--fg-2)}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.kontakt__kopf,.gutschein__kopf,.recht-kopf__titel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4) clamp(2rem, 6vw, 6rem);align-items:end}
.kontakt__kopf .t-gross,.gutschein__kopf .t-gross,.recht-kopf__titel .t-gross{max-width:30rem}

/* ==========================================================================
   GUTSCHEIN: die echte Karte im Foto, drei Zeilen, ein Knopf (nur vorhandene Bausteine)
   ========================================================================== */
.gutschein__kopf .t-display{max-width:9em}
.gutschein__bild{margin-top:var(--s6);border-radius:var(--r);overflow:hidden;background:var(--getoent)}
.gutschein__bild img{display:block;width:100%;height:auto;aspect-ratio:2/1;max-height:min(80vh, 48rem);object-fit:cover}
.gutschein__fuss{margin-top:var(--s5);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4) clamp(2rem, 6vw, 6rem);align-items:end}
.kontakt-raster{margin-top:var(--s6);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5) clamp(2rem, 6vw, 6rem);align-items:stretch}
.kontakt-info{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.anruf{display:flex;flex-direction:column;gap:.25rem}
.anruf a{font-size:var(--t-titel);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--tief);
  background:linear-gradient(currentColor,currentColor) left bottom / 0 2px no-repeat;transition:background-size .5s var(--feder);width:fit-content}
.anruf a:hover{background-size:100% 2px}
.anruf span{color:var(--fg-2)}
.zeiten{width:100%;border-collapse:collapse}
.zeiten caption{text-align:left;font-weight:700;margin-bottom:var(--s1)}
.zeiten th,.zeiten td{text-align:left;padding:.625rem .75rem;font-weight:400;vertical-align:top}
.zeiten th{font-weight:700;width:10rem;white-space:nowrap}
.zeiten tr:nth-child(odd) th,.zeiten tr:nth-child(odd) td{background:rgba(255,255,255,.55)}
.zeiten tr th{border-radius:var(--r) 0 0 var(--r)}
.zeiten tr td{border-radius:0 var(--r) var(--r) 0}
.zeiten tr.ist-heute th,.zeiten tr.ist-heute td{background:var(--tief);color:var(--papier)}
.zeiten tr.ist-heute th::after{content:" (heute)";font-weight:400}
.adresse{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;border-radius:var(--r);background:#fff;box-shadow:var(--schatten);overflow:hidden}
.adresse > div{padding:var(--s3)}
.adresse address{font-style:normal;line-height:1.5}
.adresse img{width:100%;height:100%;min-height:13rem;object-fit:cover;object-position:50% 50%}
.adresse a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--tief);margin-top:.5rem}
.kontakt-form{display:flex;flex-direction:column;padding:clamp(1.75rem, 4vw, 3rem);border-radius:var(--r);background:#fff;box-shadow:var(--schatten)}
.kontakt-form .formular{flex:1}
.kontakt-form .formular__fuss{margin-top:auto}
.kontakt-info .adresse{margin-top:auto}

/* ==========================================================================
   FUSS + Handy-Leiste
   ========================================================================== */
.fuss{padding-block:var(--s6) var(--s4);--logo-schrift:var(--papier);--logo-figur:var(--papier);--logo-keil:var(--mint)}
.fuss__oben{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,4.2fr) minmax(0,3.8fr);gap:var(--s5) var(--s4);align-items:start}
.fuss__marke{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
.fuss__logo svg{display:block;height:3.25rem;aspect-ratio:4.772;overflow:visible}
.fuss__marke p{color:var(--fg-2);max-width:20rem}
.fuss__spalte{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.fuss h2{font-size:var(--t-text);font-weight:700;color:var(--mint)}
.fuss address{font-style:normal;color:var(--fg-2)}
.fuss__link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;transition:color .25s ease}
.fuss__zeiten{display:flex;flex-direction:column;gap:.5rem}
.fuss__zeiten div{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:var(--s1)}
.fuss__zeiten dt{font-weight:700}
.fuss__zeiten dd{color:var(--fg-2)}
.fuss ul{display:flex;flex-direction:column;gap:.5rem}
.fuss ul a,.fuss__unten a{transition:color .25s ease}
/* Größere Tippfläche für die Textlinks im Fuß, ohne dass sich die Abstände ändern */
.fuss ul a,.fuss__unten a{display:inline-block;padding-block:.375rem;margin-block:-.375rem}
.fuss ul a:hover,.fuss__link:hover,.fuss__unten a:hover{color:var(--mint)}
.fuss__unten{margin-top:var(--s5);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);color:var(--fg-3);font-size:var(--t-klein)}
.fuss__unten nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.fuss__hoch{display:inline-flex;align-items:center;gap:.5rem}
.fuss__hoch svg{width:.875rem;height:.875rem;transform:rotate(-90deg)}

.leiste{display:none}

/* ==========================================================================
   BEWEGUNG: Grundzustände nur mit JS (Klasse .js-anim auf <html>)
   ========================================================================== */
.js-anim [data-auf]{opacity:0;transform:translateY(24px)}
.zeile-maske{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}

/* ==========================================================================
   UNTERSEITEN: Impressum, Datenschutz, Antwortseite des Formulars
   Nur vorhandene Bausteine: dunkler Kopf wie Start und Fuß (Kopfzeile: Display links, ein Satz rechts),
   eine weiße Hauptkarte ragt in den Kopf, dann Gruppen wie "Gut zu wissen" (Titel links, Karten rechts),
   am Ende der Fuß der Startseite. Keine Linien, keine Nummern.
   ========================================================================== */
/* Keine feste Anruf-Leiste auf den Unterseiten; Kopf und Fuß sind dunkel, deshalb auch beim Überziehen dunkel */
body.unterseite{padding-bottom:0;background:var(--nacht);--ueber:clamp(3rem, 6vw, 5rem)}
.recht-kopf{padding-bottom:calc(var(--s6) + var(--ueber))}
.recht-kopf__leiste{min-height:var(--nav-h);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s4)}
.recht-kopf__logo{display:block;height:2.75rem;width:auto}
.zurueck{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;transition:color .25s ease}
.zurueck svg{width:1.125rem;height:1.125rem;transform:rotate(180deg);transition:transform .5s var(--feder)}
.zurueck:hover{color:var(--mint)}
.zurueck:hover svg{transform:rotate(180deg) translateX(4px)}
.recht-kopf__titel{margin-top:var(--s7)}
.recht-kopf__knopf{margin-top:var(--s5)}
/* Antwortseite des Formulars: nur der Kopf, ohne Karte darunter */
.recht-kopf--voll{min-height:100vh;min-height:100svh;padding-bottom:var(--sektion)}

/* Inhalt auf getöntem Grund; flow-root, damit die Hauptkarte nach oben in den Kopf ragen kann */
.recht{display:flow-root;padding-bottom:var(--sektion)}
.recht-haupt{position:relative;margin-top:calc(-1 * var(--ueber));border-radius:var(--r);background:#fff;box-shadow:var(--schatten);overflow:hidden}
.recht-haupt__text{display:flex;flex-direction:column;gap:var(--s5);padding:clamp(1.75rem, 4vw, 3rem)}
.recht-haupt__text section > * + *{margin-top:var(--s1)}
.recht-haupt__text p{color:var(--fg-2)}
.recht-haupt__text .t-zwischen{color:var(--fg);max-width:22em}
/* Impressum: Angaben links, das echte Foto vom Praxiseingang rechts (wie die Adresskarte im Kontakt) */
.recht-haupt--bild{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
.recht-haupt--bild img{width:100%;height:100%;min-height:20rem;object-fit:cover;object-position:46% 50%}
.recht-wege{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.recht-wege a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--tief);
  background:linear-gradient(currentColor,currentColor) left bottom / 0 2px no-repeat;transition:background-size .5s var(--feder)}
.recht-wege a:hover{background-size:100% 2px}
.recht-wege .ico{width:1.25rem;height:1.25rem}
/* Datenschutz: das Wichtigste in vier großen Zeilen (Größe "Zwischen" wie "Lohnt sich, wenn") */
.recht-vorab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);margin-top:var(--s3)}
.recht-vorab li{display:flex;flex-direction:column;gap:.375rem;min-width:0}
.recht-vorab b{display:flex;align-items:center;gap:.75rem;font-size:var(--t-zwischen);line-height:1.25;letter-spacing:-.01em;color:var(--fg)}
.recht-vorab b::before{content:"";flex:none;width:.75rem;height:.75rem;border-radius:50%;background:var(--mint)}
.recht-vorab span{padding-left:1.5rem;color:var(--fg-2);max-width:30rem}

/* Gruppen: Titel links, Karten rechts (Raster wie "Gut zu wissen") */
.recht-gruppe{margin-top:var(--s7);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s4) clamp(2rem, 6vw, 6rem);align-items:start}
.recht-gruppe > h2{max-width:8em}
.recht-liste{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.recht-karte{padding:clamp(1.5rem, 3vw, 2.5rem);border-radius:var(--r);background:#fff;box-shadow:var(--schatten)}
.recht-karte > * + *{margin-top:var(--s2)}
.recht-karte h3,.recht-haupt__text .t-zwischen{text-wrap:balance}
.recht-karte p,.recht-karte li{color:var(--fg-2)}
.recht-karte b{color:var(--fg)}
.recht-karte a{color:var(--akzent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;overflow-wrap:anywhere}
.recht-karte a:hover{text-decoration-thickness:2px}
.recht-karte ul{display:flex;flex-direction:column;gap:.375rem}
.recht-karte li{position:relative;padding-left:1.375rem}
.recht-karte li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--mint)}
.recht-stand{margin-top:var(--s2);padding-inline:clamp(1.5rem, 3vw, 2.5rem);color:var(--fg-3)}
.fuss__logo img{display:block;height:3.25rem;width:auto}

/* ==========================================================================
   ANPASSUNGEN: Breite
   ========================================================================== */
@media (min-width:1024px){
  .karriere__titel{font-size:min(var(--t-display), 10vh)}
  /* Start dreizeilig: erste Zeile am Stück, "Jetzt auch / ohne Rezept." darunter */
  .start__titel{font-size:min(var(--t-display), 10vh);max-width:none}
  .start__bild img{object-position:22% 38%}
  .start__zeile{white-space:nowrap}
  .start__titel .akzent{max-width:6.4em}
  /* Startblock nah an der Navigation: Reihenfolge ::before, Block, ::after, Statuszeile.
     Der freie Platz wird 2 zu 3 verteilt (über dem Titel weniger als unter den Knöpfen),
     über dem Titel mindestens 32 px. Beide Abstände schrumpfen bis 0, deshalb wird der
     Bereich nie höher als der Bildschirm. Ohne Statuszeile (unter 600 px Höhe) gilt dasselbe. */
  .start{justify-content:flex-start}
  .start::before{content:"";flex:2 1 var(--s4)}
  .start::after{content:"";flex:3 1 0;order:1}
  .start__fuss{order:2}
  /* Unterseiten: der Gruppentitel bleibt beim Lesen der Karten stehen */
  .recht-gruppe > h2{position:sticky;top:var(--s5)}
}
/* Navigation mit sechs Punkten: Nummer als Text erst ab 1440 px (darunter nur das Symbol),
   zwischen 1024 und 1199 px das Menü-Symbol wie auf dem Tablet. Gemessen: so läuft nichts über. */
@media (max-width:1439px){
  .nav__tel span{display:none}
}
@media (min-width:1024px) and (max-width:1199px){
  .nav__links{display:none}
  .nav__menue{display:inline-flex}
}
@media (max-width:1023px){
  :root{--nav-h:4.5rem}
  .nav__links,.nav__tel,.nav__aktion .btn{display:none}
  .nav__menue{display:inline-flex}
  /* Start: Bild oben, Text darunter auf Nacht */
  .start{min-height:0;justify-content:flex-start;padding-top:0}
  .start__bild{position:relative;inset:auto;height:clamp(20rem, 54svh, 34rem)}
  .start__bild img{object-position:62% 35%}
  .start__schleier{inset:0 0 auto 0;height:clamp(20rem, 54svh, 34rem);
    background:linear-gradient(0deg, var(--nacht) 0%, rgba(4,26,23,.6) 16%, rgba(4,26,23,0) 42%), linear-gradient(180deg, rgba(4,26,23,.65) 0%, rgba(4,26,23,0) 26%)}
  .start__inhalt{margin-top:calc(-1 * var(--s5));position:relative}
  .start__fuss{padding-block:var(--s5) var(--s6)}
  .ohne__kopf,.team__kopf,.fragen,.karte-raster,.kontakt-raster,.bewerben__innen,.kontakt__kopf,.gutschein__kopf,.gutschein__fuss,
  .recht-kopf__titel,.recht-gruppe,.recht-haupt--bild{grid-template-columns:minmax(0,1fr)}
  .recht-haupt--bild img{order:-1;height:clamp(12rem, 42vw, 22rem);min-height:0}
  .recht-gruppe > h2{max-width:none}
  .team-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Karriere: Bild oben, Text darunter, wie der Start */
  .karriere{min-height:0;justify-content:flex-start}
  .karriere__bild{position:relative;inset:auto;height:clamp(18rem, 48svh, 30rem)}
  .karriere__bild img{object-position:62% 35%}
  .karriere__schleier{inset:0 0 auto 0;height:clamp(18rem, 48svh, 30rem);
    background:linear-gradient(0deg, var(--nacht) 0%, rgba(4,26,23,.55) 18%, rgba(4,26,23,0) 45%)}
  .karriere__inhalt{margin-top:calc(-1 * var(--s5));position:relative;padding:0 var(--rand) var(--sektion)}
  /* Hinweis in die Bildecke wie bei allen anderen Bildern (oben, weil unten der Text ins Bild läuft) */
  .karriere .ki--oben{top:.75rem;right:.75rem}
  .bewerben__bild{display:none}
  .koerper{width:min(62%, 15rem)}
  .fuss__oben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__marke{grid-column:1 / -1}
  /* So geht es: zum Wischen */
  .zug{padding-block:0}
  .nur-gross{display:none}
  .nur-klein{display:inline}
  .zug__fenster{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .zug__fenster::-webkit-scrollbar{display:none}
  .zug__bahn{gap:var(--s3)}
  .station{grid-template-columns:minmax(0,1fr);width:min(78vw, 26rem);scroll-snap-align:center;align-items:start;align-content:start}
  .station__bild{height:auto;width:100%}
  .station__text{padding-bottom:0}
  /* Endkarte: etwas breiter, Knopf über die volle Kartenbreite (vorher ragte er über den Rand) */
  .station--ende{width:min(86vw, 26rem);padding:var(--s3)}
  .station--ende .btn{align-self:stretch;padding-inline:1rem;white-space:normal;text-align:center}
  /* So geht es gehalten (Handy und Tablet mit genug Höhe): die Bahn folgt dem Scrollen statt dem Wischen,
     das Stationsbild ist nur so hoch, dass Kopf, Bild und Text zusammen in den Bildschirm passen */
  .zug.ist-gefuehrt .zug__fenster{overflow:hidden;scroll-snap-type:none;margin-top:var(--s3)}
  .zug.ist-gefuehrt .nur-gross{display:inline}
  .zug.ist-gefuehrt .nur-klein{display:none}
  .zug.ist-gefuehrt .station__bild{aspect-ratio:auto;height:min(calc(min(78vw, 26rem) * 1.25), calc(100svh - 26rem))}
}
@media (max-width:767px){
  .start__bild img{object-position:50% 30%}
  .gutschein__bild img{aspect-ratio:1/1;max-height:none}
  .team-reihe{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
}
@media (max-width:640px){
  :root{--r:20px}
  .start__inhalt .knoepfe .btn{flex:1 1 100%}
  /* Karriere ist der zweite Kino-Moment: Knöpfe über die volle Breite wie im Start */
  .karriere__inhalt .knoepfe{align-self:stretch}
  .karriere__inhalt .knoepfe .btn{flex:1 1 100%}
  .zwei-felder{grid-template-columns:minmax(0,1fr)}
  .fenster{height:clamp(18rem, 60vh, 30rem)}
  .adresse{grid-template-columns:minmax(0,1fr)}
  .adresse img{order:-1;height:12rem;min-height:0}
  .fuss__oben{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .fuss__unten{margin-top:var(--s4)}
  .marke__logo{height:2.125rem}
  .recht-kopf__logo{height:2.125rem}
  .recht-kopf__titel{margin-top:var(--s5)}
  .recht-vorab{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .recht-gruppe{margin-top:var(--s6)}
  .stelle{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .stelle dt{white-space:nowrap}
  .bewerben{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
  .bewerben__zu{position:fixed}
  .bewerben__innen{padding-top:calc(var(--s3) + 3.5rem)}
  .bewerben__form{padding:0;background:none}
  .leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1);
    padding:.75rem var(--rand) calc(.75rem + env(safe-area-inset-bottom));background:rgba(241,245,243,.9);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -1px 0 rgba(11,25,22,.08);
    transform:translateY(110%);transition:transform .5s var(--feder)}
  .leiste.ist-da{transform:none}
  .zug.ist-gefuehrt{padding-bottom:5.5rem}   /* Platz für die feste Leiste unten */
  .leiste .btn{padding:0 1rem}
  body{padding-bottom:5.5rem}
}

/* So geht es ohne Seitwärtslauf (Bewegung aus, oder Bildschirm zu niedrig): ruhiges Raster.
   Das Skript setzt .ist-gefuehrt, sobald die Bahn beim Scrollen seitwärts läuft. */
@media (min-width:1024px){
  .zug:not(.ist-gefuehrt) .zug__navi{display:none}
  .zug:not(.ist-gefuehrt) .zug__bahn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4);
    width:min(100% - 2 * var(--rand), var(--breite));margin-inline:auto;padding-inline:0}
  .zug:not(.ist-gefuehrt) .station{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:center}
  .zug:not(.ist-gefuehrt) .station__bild{height:auto;width:100%}
  .zug:not(.ist-gefuehrt) .station--ende{width:auto}
}

/* ==========================================================================
   ANPASSUNGEN: Höhe (Windows-Skalierung 125 bis 175 %, Browser-Zoom)
   ========================================================================== */
@media (min-width:1024px) and (max-height:900px){
  :root{--sektion:clamp(4.5rem, 9vw, 8rem)}
  .fenster{height:clamp(20rem, 78vh, 46rem)}
}
@media (min-width:1024px) and (max-height:720px){
  :root{--nav-h:4.5rem;--t-display:clamp(2.25rem, 1rem + 2.8vw, 3.75rem);--sektion:clamp(4rem, 8vw, 6.5rem)}
  .start__inhalt{gap:var(--s3)}
  .start__lead{max-width:38rem}
  .start{--fuss-oben:var(--s3);--fuss-unten:var(--s2)}
  .karriere__inhalt{gap:var(--s3)}
}
@media (min-width:1024px) and (max-height:599px){
  :root{--t-display:clamp(2rem, .9rem + 2.6vw, 3.25rem)}
  .start__fuss{display:none}
  .karriere .label{display:none}
  .karriere__inhalt{padding-bottom:var(--s4)}
  .start__lead{max-width:36rem}
}

/* ==========================================================================
   Weniger Bewegung
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}