/* KRONOS Physio: gemeinsame Stile aller Seiten (Startseite und Unterseiten) */
:root {
  --vh: 1vh; /* auf Touch-Geraeten einmal in Pixel festgeschrieben (Adressleiste) */
  /* Abstände: eine Skala für die ganze Seite. Alle hängen an der Fensterbreite, nicht an der
     Höhe, damit ein niedriges Fenster die Abschnitte nicht zusammenschiebt. */
  --rand: clamp(20px, 4vw, 72px);                /* Seitenrand */
  --raum-abschnitt: clamp(80px, 9.5vw, 168px);   /* Luft über und unter jedem Abschnitt */
  --raum-kopf: clamp(40px, 5vw, 88px);           /* Abschnittskopf bis Inhalt */
  --raum-spalte: clamp(48px, 6.5vw, 112px);      /* zwischen zwei Spalten */
  --raum-titel: clamp(20px, 2vw, 28px);          /* Überschrift bis Text */
  --raum-knopf: clamp(26px, 2.6vw, 36px);        /* Text bis Knopf */
  --karriere-ueberstand: clamp(32px, 3.6vw, 56px); /* so weit ragt das Karriere-Foto aus dem Goldband */
  --kopf-hoehe: 80px;
  --kopf-gross: 148px;
  --logo-gross: 116px;
  --logo-klein: 48px; /* Querfassung in der Sticky-Leiste */
  --linie: rgba(248, 245, 241, .16);
}
html { scroll-behavior: auto; }
body {
  background: var(--tief);
  color: var(--hell);
  font-family: 'Urbanist', system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.rahmen { width: 100%; margin-inline: auto; padding-inline: var(--rand); }
main, #fuss { overflow-x: clip; }

/* Schriftrollen: eine Familie (Urbanist, geometrisch wie die Schrift des Logos und nah an der Clother des Flyers). Titel in
   gesperrten Versalien, Nav und Knöpfe ebenso, nur kleiner. */
.display {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.05;
}
/* Zeilenmasken der Überschriften (SplitText): etwas Luft nach oben, damit Umlautpunkte nicht abgeschnitten werden */
.zl-mask { padding-top: .14em; margin-top: -.14em; }
.versal { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }

/* Buttons: eckig, ein Pixel, keine Pfeile */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding-inline: 22px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  border: 1px solid var(--hell); color: var(--hell); background: transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.knopf:hover { background: var(--hell); color: var(--tief); }
.knopf-voll { background: var(--gold); border-color: var(--gold); color: var(--tief); }
.knopf-voll:hover { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--tief); }
.knopf:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Header */
/* Ruhezustand: liegt oben im Hero, großes Logo. Beim Scrollen schiebt sich eine
   dunkle Sticky-Leiste mit kleinerem Logo von oben ein (bleibt dann sichtbar). */
#kopf {
  /* Im Hero liegt der Kopf auf dem oben abgedunkelten Foto: Schrift und Logo-Schrift hell */
  --kopf-farbe: var(--hell); --kopf-grund: var(--tief); --kopf-hover: var(--gold-hell); --logo-schrift: #F1E9E2;
  position: absolute; inset-inline: 0; top: 0; z-index: 50;
  height: var(--kopf-gross);
  background: transparent;
}
#kopf::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--linie); opacity: 0;
  pointer-events: none; /* liegt über dem Leistungen-Menü, darf die Maus nicht abfangen */
}
#kopf.ist-fest {
  --kopf-farbe: var(--hell); --kopf-grund: var(--tief); --kopf-hover: var(--gold-hell); --logo-schrift: #DCCBC0;
  position: fixed; height: var(--kopf-hoehe); background: var(--tief);
  animation: kopf-einschieben .45s cubic-bezier(.22,.61,.36,1) both;
}
#kopf.ist-fest::after { opacity: 1; }
@keyframes kopf-einschieben { from { transform: translateY(-100%); } to { transform: translateY(0); } }
#kopf .rahmen { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#kopf .logo { display: block; line-height: 0; }
#logo-svg { height: var(--logo-gross); width: auto; display: block; overflow: visible; }
#kopf.ist-fest #logo-svg { height: var(--logo-klein); }
/* Querfassung für die Sticky-Leiste: das Bildzeichen rückt von oben vor die Schrift und
   wird so hoch wie der Schriftblock. Der passende Bildausschnitt (viewBox) kommt per JS. */
#kopf.ist-fest .kp-lage {
  transform: translate(-292.84px, 121.11px) scale(1.2239);
  /* Wird die Leiste fest, tritt das Bildzeichen von oben vor die Schrift. Nur in diese Richtung:
     zurück im Hero steht das Logo sofort wieder gestapelt. */
  transition: transform .65s cubic-bezier(.2,.8,.2,1) .12s;
}
/* Logo auf dunklem Grund: nur die Schrift wird hell, das goldene Bildzeichen bleibt */
.kp-schrift path { fill: var(--logo-schrift); }
.kp-schrift .kp-linie { fill: none; stroke: var(--logo-schrift); }
#hauptnav { display: flex; gap: clamp(20px, 2.6vw, 40px); }
#hauptnav a { display: inline-flex; align-items: center; color: var(--kopf-farbe); transition: color .2s ease; }
/* Offene Stellen: eine kleine Unterzeile in Gold unter dem Wort Karriere. Sie hängt unter der
   Zeile, damit Karriere auf derselben Grundlinie bleibt wie die anderen Ziele. */
#hauptnav a { position: relative; }
.nav-zusatz {
  position: absolute; left: 0; top: calc(100% + 4px); white-space: nowrap;
  font-size: 12px; font-weight: 500; letter-spacing: .03em; line-height: 1; text-transform: none;
  color: var(--gold-hell);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
/* Nur in der Sticky-Leiste sichtbar, im Hero bleibt die Navigation ruhig */
#kopf.ist-fest .nav-zusatz { opacity: 1; visibility: visible; transition: opacity .3s ease .15s, visibility 0s; }
#hauptnav a:hover { color: var(--kopf-hover); }
#kopf .knopf { border-color: var(--kopf-farbe); color: var(--kopf-farbe); }
#kopf .knopf:hover { background: var(--kopf-farbe); color: var(--kopf-grund); }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.knopf-termin-lang { display: inline-flex; }
.knopf-termin-kurz { display: none; }

/* Menü-Knopf: zwei Striche, wird zum X */
#menue-knopf {
  display: none; width: 46px; height: 46px; position: relative;
  border: 1px solid var(--kopf-farbe); background: transparent; cursor: pointer;
}
#menue-knopf span {
  position: absolute; left: 12px; right: 12px; height: 1px; background: var(--kopf-farbe);
  transition: transform .3s ease, top .3s ease;
}
/* Striche an der Mitte ausgerichtet, damit sie bei jeder Knopfhöhe sauber sitzen */
#menue-knopf span:nth-child(1) { top: calc(50% - 4px); }
#menue-knopf span:nth-child(2) { top: calc(50% + 3px); }
body.menue-offen #menue-knopf span:nth-child(1),
body.menue-offen #menue-knopf span:nth-child(2) { top: calc(50% - .5px); }
body.menue-offen #menue-knopf span:nth-child(1) { transform: rotate(45deg); }
body.menue-offen #menue-knopf span:nth-child(2) { transform: rotate(-45deg); }

/* Mobiles Menü: direktes body-Kind, kein Containing-Block-Problem. Oben die fünf Ziele in der
   Schrift der Überschriften, unten schließt eine Goldfläche mit Rufnummer und Zeiten ab.
   Beim Öffnen richten sich die Zeilen auf wie die Überschriften der Seite, die Goldfläche
   steigt von unten herauf. Beim Schließen blendet alles nur aus. */
#menue {
  position: fixed; inset: 0; z-index: 40; background: var(--tief);
  padding-top: var(--kopf-hoehe);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
body.menue-offen #menue { opacity: 1; visibility: visible; transition: opacity .3s ease; }
body.menue-offen { overflow: hidden; }
#menue nav { display: flex; flex-direction: column; gap: clamp(10px, calc(var(--vh) * 1.8), 18px); padding: clamp(28px, calc(var(--vh) * 6), 64px) var(--rand) clamp(28px, calc(var(--vh) * 5), 48px); }
#menue nav a {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px;
  overflow: hidden; padding-top: .14em; margin-top: -.14em;
  font-size: clamp(30px, 8.6vw, 46px); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.08;
}
#menue nav a > span { display: block; transform: translateY(118%); transition: transform 0s linear .3s; }
body.menue-offen #menue nav a > span { transform: none; transition: transform .75s cubic-bezier(.2, .8, .2, 1); }
body.menue-offen #menue nav a:nth-child(1) > span { transition-delay: .06s; }
body.menue-offen #menue nav a:nth-child(2) > span { transition-delay: .12s; }
body.menue-offen #menue nav a:nth-child(3) > span { transition-delay: .18s; }
body.menue-offen #menue nav a:nth-child(4) > span { transition-delay: .24s; }
body.menue-offen #menue nav a:nth-child(5) > span { transition-delay: .30s; }
body.menue-offen #menue nav a:nth-child(6) > span { transition-delay: .36s; }
@media (hover: hover) { #menue nav a:hover { color: var(--gold-hell); } }
#menue nav a > .menue-stellen {
  flex: 0 0 100%; margin-top: 6px; padding-bottom: 2px;
  font-size: 16px; font-weight: 500; letter-spacing: .03em; line-height: 1.2; text-transform: none; color: var(--gold-hell);
}
/* Weg zum Aktivclub und Instagram: eine Zeile unten im dunklen Teil, direkt über der Goldfläche */
.menue-club {
  margin: auto var(--rand) 0; padding-block: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  color: var(--gold-hell);
  opacity: 0; transition: opacity 0s linear .3s;
}
.menue-club .versal { padding-block: 12px; }
body.menue-offen .menue-club { opacity: 1; transition: opacity .5s ease .45s; }
.menue-kontakt {
  font-style: normal; padding: clamp(24px, calc(var(--vh) * 4), 36px) var(--rand) calc(clamp(24px, calc(var(--vh) * 4), 36px) + env(safe-area-inset-bottom));
  background: linear-gradient(110deg, #D49A63, #F2BE85); color: var(--tief);
  clip-path: inset(100% 0 0 0); transition: clip-path 0s linear .3s;
}
body.menue-offen .menue-kontakt { clip-path: inset(0 0 0 0); transition: clip-path .8s cubic-bezier(.2, .8, .2, 1) .22s; }
.menue-kontakt .telefon { display: inline-block; font-size: clamp(1.7rem, 7.4vw, 2.4rem); font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.menue-kontakt p { margin-top: 10px; font-size: 17px; line-height: 1.5; }
.menue-kontakt p + p { font-weight: 400; }
#menue a:focus-visible { outline-color: var(--gold-hell); }
#menue .menue-kontakt a:focus-visible { outline-color: var(--tief); }
@media (prefers-reduced-motion: reduce) {
  #menue nav a > span, body.menue-offen #menue nav a > span { transform: none; transition: none; }
  .menue-kontakt, body.menue-offen .menue-kontakt { clip-path: none; transition: none; }
  .menue-club, body.menue-offen .menue-club { opacity: 1; transition: none; }
}

@media (max-width: 1023px) {
  :root { --kopf-hoehe: 68px; --kopf-gross: 108px; --logo-gross: 84px; --logo-klein: clamp(34px, 9.6vw, 42px); }
  #hauptnav { display: none; }
  #menue-knopf { display: block; width: 44px; height: 44px; } /* so hoch wie der Knopf „Termin“ daneben */
  .knopf-termin-lang { display: none; }
  .knopf-termin-kurz { display: inline-flex; }
  .knopf { height: 44px; padding-inline: 16px; }
}
@media (min-width: 1024px) { #menue { display: none; } }
/* Sechs Ziele plus Knopf: zwischen 1024 und 1199 px reicht die Leiste nur mit dem kurzen Knopf */
#hauptnav a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) {
  #hauptnav { gap: 20px; }
  .knopf-termin-lang { display: none; }
  .knopf-termin-kurz { display: inline-flex; }
}

/* Hero: Foto vollflächig, die Aussage steht direkt auf dem Bild unten links. Ein dunkler Verlauf
   kommt von oben (für Logo und Navigation) und von unten (für den Text), die Mitte bleibt hell. */
#hero { position: relative; height: calc(var(--vh) * 100); min-height: 600px; overflow: hidden; background: #D9D2CA; color: var(--hell); }
/* Das Foto steht in einem eigenen Rahmen, der über der Leiste endet. Der Bildausschnitt richtet
   sich nach der Form dieses Rahmens (Container-Abfrage), nicht nach der des Fensters. */
.hero-buehne { position: absolute; inset: 0 0 var(--leiste-hoehe) 0; overflow: hidden; container: hero / size; }
#hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
#hero .schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,31,37,.76) 0%, rgba(26,31,37,.5) 14%, rgba(26,31,37,0) 31%, rgba(26,31,37,0) 42%, rgba(26,31,37,.52) 62%, rgba(26,31,37,.84) 100%); }
/* --hero-luft: Abstand des Textblocks zur Unterkante, die Infobox rechts nutzt denselben Wert */
#hero { --hero-luft: clamp(28px, calc(var(--vh) * 4.5), 56px); }
#hero .rahmen { position: absolute; inset-inline: 0; bottom: var(--leiste-hoehe); padding-bottom: var(--hero-luft); }
/* Leiste am unteren Hero-Rand (wie im Club-Entwurf): drei Fakten zur Praxis auf dem Schiefer der
   Marke, dazwischen gekürzte Striche. Das Foto endet über der Leiste, damit Text und Gesichter
   gemeinsam nach oben rücken und sich nicht in die Quere kommen. */
:root { --leiste-hoehe: 96px; }
#hero-leiste {
  position: absolute; left: 0; bottom: 0; width: 100%; height: var(--leiste-hoehe);
  background: var(--schiefer);
  display: grid; grid-template-columns: repeat(3, 1fr);
  list-style: none; margin: 0; padding: 0;
}
#hero-leiste li {
  position: relative;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding-inline: 16px;
  font-size: clamp(15px, 1.3vw, 19px); font-weight: 400; text-transform: uppercase; letter-spacing: .12em;
}
#hero-leiste li + li::before {
  content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px;
  background: rgba(248, 245, 241, .5);
}
/* Der dritte Punkt führt zum Aktivclub: in Gold, damit er als Weg erkennbar ist. Die ganze
   Zelle ist anklickbar. */
#hero-leiste a { color: var(--gold-hell); transition: color .2s ease; }
#hero-leiste a::after { content: ""; position: absolute; inset: 0; }
#hero-leiste a:hover { color: var(--hell); }
#hero-leiste a:focus-visible { outline-color: var(--gold-hell); outline-offset: 6px; }
/* Niedrige Fenster (übliche Laptops): Leiste und Textblock rücken zusammen, damit die
   Überschrift unter dem Gesicht der Patientin bleibt */
@media (min-width: 900px) and (max-height: 820px) {
  :root { --leiste-hoehe: 76px; }
  #hero { --hero-luft: 24px; }
  #hero h1 { font-size: min(4.3vw, calc(var(--vh) * 7.4)); }
  #hero .hero-sub { margin-top: 12px; }
  #hero .hero-knoepfe { margin-top: 22px; }
}
#hero h1 { font-size: clamp(2rem, 4.3vw, 4.5rem); }
#hero h1 .zeile { display: block; overflow: hidden; }
#hero h1 .zeile > span { display: block; }
/* Der Dreiklang kommt Wort für Wort */
#hero h1 .dreiklang > span { display: inline-block; margin-right: .32em; }
#hero h1 .dreiklang { margin-top: clamp(10px, 1.1vw, 16px); font-size: .5em; font-weight: 400; letter-spacing: .1em; line-height: 1.3; }
#hero .hero-sub { margin-top: 18px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.5; color: var(--hell); }
#hero .hero-knoepfe { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Infobox: wer hier behandelt wird. Goldfläche auf dem Foto, als Ganzes ein Link zu „Ihr erster
   Termin“. Desktop unten rechts auf Höhe der Knöpfe, schmal mittig rechts über dem Textblock. */
.hero-info {
  position: absolute; z-index: 2; right: var(--rand); bottom: calc(var(--leiste-hoehe) + var(--hero-luft));
  width: 290px; padding: 20px 22px 18px;
  background: linear-gradient(110deg, #D49A63, #F2BE85); color: var(--tief);
  transition: background .25s ease;
}
.hero-info:hover { background: var(--hell); }
.hero-info:focus-visible { outline-color: var(--hell); outline-offset: 4px; }
.hero-info .versal { display: block; font-size: 12px; }
.hero-info strong { display: block; margin-top: 8px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.hero-info .weiter { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.hero-info .weiter svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .25s ease; }
.hero-info:hover .weiter svg { transform: translateX(4px); }
.hero-info .info-kurz { display: none; }
/* Schmal: kompakte Lasche bündig am rechten Rand, auf der Wand zwischen dem Kopf der
   Therapeutin und dem Knie. Nur die Kurzfassung, die Details stehen im Abschnitt. */
@media (max-width: 899px) {
  .hero-info {
    top: max(calc(var(--kopf-gross) + 24px), 20%); bottom: auto; right: 0;
    width: auto; max-width: 172px; padding: 12px 14px 12px 16px;
  }
  .hero-info .versal, .hero-info strong, .hero-info .weiter { display: none; }
  .hero-info .info-kurz { display: flex; align-items: flex-end; gap: 10px; font-size: 15px; font-weight: 700; line-height: 1.3; }
  .hero-info .info-kurz svg { width: 16px; height: 16px; flex: 0 0 auto; margin-bottom: 2px; }
  .hero-info:focus-visible { outline-color: var(--tief); outline-offset: -5px; }
}
/* Das Foto ist 16:9. In breiten Fenstern wird oben und unten beschnitten: der Ausschnitt sitzt
   hoch, damit der Kopf der Therapeutin unter der Navigation bleibt. In schmaleren Fenstern wird
   seitlich beschnitten: Therapeutin und Patient bleiben gemeinsam im Bild. */
@container hero (max-aspect-ratio: 3/2) { #hero-bild { object-position: 60% 50%; } }
@media (max-width: 899px) {
  #hero-bild { object-position: 52% 50%; }
  #hero .schleier { background: linear-gradient(180deg, rgba(26,31,37,.76) 0%, rgba(26,31,37,.5) 13%, rgba(26,31,37,0) 27%, rgba(26,31,37,0) 36%, rgba(26,31,37,.86) 78%); }
  /* Schmal entfällt die Leiste, das Foto füllt den ganzen Hero. Der Weg zum Aktivclub steht
     dort im Menü. */
  :root { --leiste-hoehe: 0px; }
  #hero-leiste { display: none; }
  #hero { min-height: 640px; --hero-luft: 48px; }
  #hero h1 .dreiklang { font-size: 15px; }
}
/* Handy: das Foto ist höher als sein Rahmen und steht unten an. So rückt das Gesicht der
   Therapeutin nach oben und bleibt über dem Textblock, auch auf niedrigen Bildschirmen. */
@media (max-width: 560px) {
  #hero-bild { inset: auto 0 0 0; height: 118%; object-position: 47% 50%; }
  #hero { --hero-luft: 40px; }
}
@media (max-width: 560px) and (max-height: 720px) { #hero-bild { height: 140%; } }

/* Sektionen: Kopf aus Titel (links) und Einleitung (rechts) */
.abschnitt { padding-block: var(--raum-abschnitt); }
/* Sprungziele: der Abschnitt beginnt unter der festen Leiste, nicht dahinter. Bei Karriere
   bleibt zusätzlich das Foto ganz im Bild, das oben aus dem Band herausragt. */
main > section { scroll-margin-top: var(--kopf-hoehe); }
main > section:focus { outline: none; }
@media (min-width: 900px) { #karriere { scroll-margin-top: calc(var(--kopf-hoehe) + var(--karriere-ueberstand) + 20px); } }
.abschnitt-kopf {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-spalte); align-items: end;
  margin-bottom: var(--raum-kopf);
}
.abschnitt-kopf h2 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); }
.abschnitt-kopf p { font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.55; max-width: 46ch; color: var(--t2); }
@media (max-width: 899px) { .abschnitt-kopf { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 479px) { .abschnitt-kopf h2 { font-size: 1.6rem; } }

/* Buehne: vollbreites Video mit heller Karte darauf */
.buehne { position: relative; height: clamp(560px, calc(var(--vh) * 80), 840px); overflow: hidden; background: #1B2127; }
.buehne video, .buehne img.buehne-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.buehne .schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,31,37,.15) 0%, rgba(26,31,37,0) 40%, rgba(26,31,37,.55) 100%); }
.karte {
  position: absolute; left: var(--rand); bottom: max(var(--rand), 32px);
  width: min(460px, calc(100% - 2 * var(--rand)));
  background: var(--hell); color: var(--tief);
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 34px);
}
.karte h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.25; margin-bottom: 18px; }
.karte .preis { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.karte .preis .ab { font-size: 15px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.karte .preis strong { font-size: clamp(2.5rem, 4vw, 3.6rem); font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.karte .karten-text { margin: 22px 0 26px; font-size: 16px; line-height: 1.55; }
.knopf-tief { background: var(--tief); border-color: var(--tief); color: var(--hell); }
.knopf-tief:hover { background: var(--gold); border-color: var(--gold); color: var(--tief); }
.karte small { display: block; margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--s3); background-color: var(--hell); }

/* Bildkarten (Third-Space-Muster, eckig): Bild, Titel unten links, Plus-Knopf unten rechts,
   Klick oeffnet den Text ueber dem Bild */
.abschnitt-kopf .kopf-text p + p { margin-top: 14px; }
.abschnitt-kopf .kopf-text .knopf { margin-top: var(--raum-knopf); }
.karten-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bildkarte {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1B2127; cursor: pointer;
  color: var(--hell); /* Text auf dem Bild bleibt hell, auch in hellen Sektionen */
  -webkit-tap-highlight-color: transparent;
}
.bildkarte img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease, filter .5s ease;
}
@media (hover: hover) { .bildkarte:hover img { transform: scale(1.04); filter: brightness(.7); } }
.bildkarte.ist-offen img { transform: scale(1.04); filter: brightness(.3) blur(2px); }
.bildkarte-schleier { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,31,37,.86) 0%, rgba(26,31,37,0) 55%); }
.bildkarte-inhalt {
  position: absolute; inset: 0; z-index: 2; padding: clamp(20px, 2vw, 28px) clamp(18px, 1.8vw, 24px);
  display: flex; flex-direction: column;
}
/* Platzhalter über dem Titel: geschlossen schiebt er Titel und Kurzzeile nach unten, beim
   Öffnen schrumpft er, der Titel gleitet nach oben und der Zusatztext rückt darunter nach. */
.bildkarte-inhalt::before { content: ""; flex: 1 0 0; transition: flex-grow .55s cubic-bezier(.65, 0, .35, 1) .15s; }
.bildkarte.ist-offen .bildkarte-inhalt::before { flex-grow: 0; transition-delay: 0s; }
.bildkarte-text {
  max-height: 0; opacity: 0; transform: translateY(14px); overflow: hidden; pointer-events: none;
  transition: max-height .55s cubic-bezier(.65, 0, .35, 1) .15s, opacity .25s ease, transform .25s ease;
}
.bildkarte.ist-offen .bildkarte-text {
  max-height: 420px; opacity: 1; transform: none; pointer-events: auto;
  transition: max-height .55s cubic-bezier(.65, 0, .35, 1), opacity .45s ease .35s, transform .45s ease .35s;
}
.bildkarte-text .leitsatz { padding-top: 20px; }
.bildkarte-text .leitsatz { font-size: 17px; font-weight: 600; line-height: 1.35; }
.bildkarte-text .fliess { margin-top: 10px; font-size: 15px; font-weight: 400; line-height: 1.5; }
.bildkarte-text .knopf { margin-top: 18px; height: 40px; padding-inline: 16px; }
/* Rechts bleibt Platz für den Plus-Knopf, der fest in der Ecke unten rechts sitzt */
.bildkarte-fuss { padding-right: 54px; }
.bildkarte-fuss h3 { font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; line-height: 1.25; letter-spacing: .01em; }
.bildkarte-fuss .umfang { margin-top: 6px; max-width: 30ch; font-size: 15px; font-weight: 400; line-height: 1.4; }
.plus-knopf {
  position: absolute; right: clamp(18px, 1.8vw, 24px); bottom: clamp(20px, 2vw, 28px); width: 40px; height: 40px;
  border: 1px solid var(--hell); background: transparent; cursor: pointer;
  transition: background-color .3s ease;
}
.plus-knopf::before, .plus-knopf::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--hell);
  transform: translate(-50%, -50%);
}
.plus-knopf::before { width: 14px; height: 1px; }
.plus-knopf::after { width: 1px; height: 14px; }
/* Nur die Striche drehen sich zum X, der Rahmen bleibt eckig */
.plus-knopf::before, .plus-knopf::after { transition: transform .45s ease; }
.bildkarte.ist-offen .plus-knopf::before, .bildkarte.ist-offen .plus-knopf::after { transform: translate(-50%, -50%) rotate(45deg); }
@media (max-width: 1199px) {
  .karten-reihe {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scroll-padding-inline: var(--rand); scrollbar-width: none;
  }
  .karten-reihe::-webkit-scrollbar { display: none; }
  .bildkarte { flex: 0 0 min(86%, 360px); aspect-ratio: 3 / 4; scroll-snap-align: start; }
  .bildkarte-text .leitsatz { font-size: 16px; }
  .bildkarte-text .fliess { font-size: 14px; }
}
/* Kleine Handys: etwas höhere Karten, damit der geöffnete Text vollständig über dem Knopf Platz hat */
@media (max-width: 419px) { .bildkarte { aspect-ratio: 3 / 5; } }

/* Ansatz: die Bühne schließt die helle Sektion bündig ab */
#praxis { padding-bottom: 0; }

/* Warum: drei Gegensatzpaare auf den Farbflächen der Marke (Off-White, Taupe, Gold), als Treppe
   nach oben gesetzt. Das Gewählte steht fett, das Verworfene leicht darunter. */
.statt-treppe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: start; }
.statt {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: clamp(300px, 25vw, 380px); padding: clamp(26px, 2.8vw, 44px); color: var(--tief);
}
.statt:nth-child(1) { margin-top: clamp(40px, 6vw, 96px); background: var(--hell); }
.statt:nth-child(2) { margin-top: clamp(20px, 3vw, 48px); background: #A38A7E; color: #1A1F25; } /* #242A31 käme nur auf 4,48:1 */
.statt:nth-child(3) { background: linear-gradient(110deg, #D49A63, #F2BE85); }
.statt h3 { font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.12; text-transform: uppercase; letter-spacing: .06em; }
.statt h3 span { display: block; }
.statt h3 .ja { font-weight: 700; }
.statt h3 .nein { font-weight: 400; }
.statt p { max-width: 34ch; font-size: 17px; line-height: 1.55; }
@media (max-width: 899px) {
  .statt-treppe { grid-template-columns: 1fr; }
  .statt { min-height: 0; gap: 28px; }
  .statt:nth-child(n) { margin-top: 0; }
}

/* Praxis: links der Text, rechts das Teamfoto. Der Leitsatz sitzt als dunkles Schild auf dem Foto. */
.team-raster { display: grid; grid-template-columns: 5fr 6fr; gap: var(--raum-spalte); align-items: center; }
.team-raster h2 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); }
.team-raster .team-text p { margin-top: var(--raum-titel); max-width: 46ch; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.55; color: var(--s2); }
.team-bild { position: relative; margin: 0; }
.team-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #D9D2CA; }
.team-bild figcaption {
  position: absolute; left: calc(-1 * clamp(24px, 4vw, 64px)); bottom: clamp(20px, 3vw, 40px); max-width: 17em;
  padding: clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 32px);
  background: var(--tief); color: var(--hell);
  font-size: clamp(17px, 1.6vw, 24px); font-weight: 400; line-height: 1.3;
}
/* Die vier Werte: zwei nebeneinander, jeder mit einem eckigen Punkt in Gold. Der Punkt richtet
   sich beim Auftritt von seiner Grundlinie her auf (--m), ohne Skript steht er einfach da. */
.werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(20px, 2.4vw, 36px); margin-top: clamp(28px, 2.8vw, 40px); max-width: 34em; }
.werte li { position: relative; padding-left: 26px; font-size: clamp(17px, 1.25vw, 19px); font-weight: 600; line-height: 1.3; color: var(--tief); }
.werte li::before {
  content: ""; position: absolute; left: 0; top: .36em; width: 11px; height: 11px;
  background: linear-gradient(110deg, #D49A63, #F2BE85);
  transform: scaleY(var(--m, 1)); transform-origin: 50% 100%;
}
@media (max-width: 899px) {
  .team-raster { grid-template-columns: 1fr; }
  .team-bild figcaption { position: static; max-width: none; }
}
@media (max-width: 479px) {
  .team-raster h2 { font-size: 1.6rem; }
  .werte { grid-template-columns: 1fr; gap: 12px; }
}

/* Band vor dem Kontakt: die Startlinie als breites Bild, die Einladung steht unten links */
/* Räume der Praxis: eine Reihe Bildkarten, der aktive Raum steht groß mit Titel und Text,
   die anderen schmal daneben. Wechsel per Klick, Pfeil oder Wischen; die Breite gleitet. */
.raum-reihe { display: flex; gap: 16px; height: clamp(420px, calc(var(--vh) * 70), 660px); margin-top: var(--raum-kopf); }
.raum { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: #1B2127; transition: flex-grow .7s cubic-bezier(.65, 0, .35, 1); }
.raum.ist-aktiv { flex-grow: 3.4; }
.raum img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.raum::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: background-color .5s ease;
  background: linear-gradient(180deg, rgba(26,31,37,0) 45%, rgba(26,31,37,.82) 100%); background-color: rgba(26,31,37,.38); }
.raum.ist-aktiv::after { background-color: rgba(26,31,37,0); }
.raum-text {
  position: absolute; z-index: 1; left: clamp(20px, 2.4vw, 36px); right: clamp(20px, 2.4vw, 36px); bottom: clamp(20px, 2.4vw, 36px);
  max-width: 42ch; color: var(--hell); opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease;
}
.raum.ist-aktiv .raum-text { opacity: 1; transform: none; transition: opacity .5s ease .35s, transform .5s ease .35s; }
.raum-text h3 { font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 600; line-height: 1.15; }
.raum-text p { margin-top: 10px; font-size: clamp(16px, 1.2vw, 18px); font-weight: 400; line-height: 1.5; color: var(--t2); }
.raum-knopf { position: absolute; inset: 0; z-index: 2; background: none; border: 0; cursor: pointer; }
.raum.ist-aktiv .raum-knopf { cursor: default; }
.raum-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.raum-pfeile { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.raum-pfeile button {
  width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer;
  background: none; color: var(--hell); border: 1px solid rgba(248,245,241,.4);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.raum-pfeile button:hover { background: var(--hell); color: var(--tief); border-color: var(--hell); }
.raum-pfeile svg { width: 18px; height: 18px; }
@media (max-width: 899px) {
  .raum-reihe { gap: 8px; height: clamp(440px, calc(var(--vh) * 66), 560px); }
  .raum.ist-aktiv { flex-grow: 9; }
}
@media (prefers-reduced-motion: reduce) { .raum, .raum-text, .raum::after { transition: none !important; } }

/* Helle Sektionen: Off-White mit dunklem Text, Knoepfe invertiert */
.hell { background: var(--hell); color: var(--tief); }
.hell .abschnitt-kopf p { color: var(--s2); background-color: var(--hell); }
.hell .knopf { border-color: var(--tief); color: var(--tief); background-color: var(--hell); }
.hell .knopf:hover { background: var(--tief); color: var(--hell); }
.hell .bildkarte .knopf { border-color: var(--hell); color: var(--hell); background-color: transparent; }
.hell .bildkarte .knopf:hover { background: var(--hell); color: var(--tief); }
.hell .knopf-tief { background: var(--tief); color: var(--hell); }
.hell .knopf-tief:hover { background: var(--gold); border-color: var(--gold); color: var(--tief); }
.hell a:focus-visible, .hell button:focus-visible, .hell input:focus-visible, .hell select:focus-visible, .hell textarea:focus-visible { outline-color: var(--gold-text); }

/* ---------------------------------------------------------------------------------------
   Unterseiten */

/* Aktuelle Seite in der Navigation: in Gold, wie beim Überfahren */
#hauptnav a[aria-current="page"] { color: var(--kopf-hover); }
#menue nav a[aria-current="page"] { color: var(--gold-hell); }

/* Seitenkopf: wie der Hero der Startseite, nur niedriger. Foto vollflächig, dunkler Verlauf von
   oben (Logo, Navigation) und von unten (Text), die Mitte bleibt hell. Brotkrumen, Titel und
   eine Zeile Einleitung stehen unten links direkt auf dem Bild. */
.seitenkopf { position: relative; height: calc(var(--vh) * 64); min-height: 480px; max-height: 760px; overflow: hidden; background: #1B2127; color: var(--hell); }
.seitenkopf-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Der Verlauf von unten setzt früh und kräftig ein: Brotkrumen und Titel müssen auch vor hellen
   Fenstern lesbar bleiben (Kontakt: Behandlungsraum mit Gegenlicht) */
.seitenkopf .schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,31,37,.76) 0%, rgba(26,31,37,.45) 18%, rgba(26,31,37,0) 32%, rgba(26,31,37,.5) 50%, rgba(26,31,37,.9) 100%); }
/* Vor glatter Wand zeichnet die Lücke des Verlaufs bei 32 % einen hellen Querstreifen,
   hier deshalb ein Verlauf ohne Lücke (Beckenboden: Foto vor grauer Betonwand) */
@media (min-width: 900px) {
  .seitenkopf.glatte-wand .schleier { background: linear-gradient(180deg, rgba(26,31,37,.76) 0%, rgba(26,31,37,.46) 18%, rgba(26,31,37,.24) 34%, rgba(26,31,37,.4) 52%, rgba(26,31,37,.9) 100%); }
}
.seitenkopf .rahmen { position: absolute; inset-inline: 0; bottom: 0; padding-bottom: clamp(32px, 4vw, 64px); }
.brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--t2); }
.brotkrumen a { color: var(--gold-hell); transition: color .2s ease; }
.brotkrumen a:hover { color: var(--hell); }
.seitenkopf h1 { margin-top: 18px; font-size: clamp(2rem, 4.3vw, 4.5rem); }
.seitenkopf h1 .zeile { display: block; overflow: hidden; }
.seitenkopf h1 .zeile > span { display: block; }
.seitenkopf-sub { margin-top: 16px; max-width: 52ch; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.5; }
@media (max-width: 899px) {
  .seitenkopf { height: calc(var(--vh) * 60); min-height: 440px; }
  /* Schmal ist der Textblock im Verhältnis höher: der Verlauf beginnt deshalb weiter oben */
  .seitenkopf .schleier { background: linear-gradient(180deg, rgba(26,31,37,.76) 0%, rgba(26,31,37,.45) 13%, rgba(26,31,37,.3) 22%, rgba(26,31,37,.62) 38%, rgba(26,31,37,.92) 100%); }
}

/* Termin-Block am Ende jeder Unterseite: Goldband, links die Einladung, rechts Zeiten und die
   Wege zum Termin. Die Rufnummer steht im Knopf selbst. */
.termin-block .abschnitt-kopf { margin-bottom: 0; align-items: center; }
.termin-block .zeiten { font-weight: 600; }
.termin-block .karriere-knoepfe { margin-top: var(--raum-knopf); }
.termin-block .kopf-text .knopf { margin-top: 0; }
@media (max-width: 479px) { .termin-block .karriere-knoepfe .knopf { width: 100%; } }

/* ---------------------------------------------------------------------------------------
   Karriere */

/* Die offene Stelle als Anzeigetafel: dunkel, Gold-Punkt pulsiert wie auf der Startseite.
   Links Titel und Eckdaten, rechts der Weg zur Bewerbung. */
.stelle {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 4vw, 72px); align-items: center;
  padding: clamp(28px, 3.6vw, 56px) clamp(24px, 3.6vw, 56px);
  background: var(--tief); color: var(--hell);
}
.stelle h3 { margin-top: 14px; font-size: clamp(1.7rem, 3.4vw, 3.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.05; }
.stelle .stelle-fakten { margin-top: 12px; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.5; color: var(--t2); }
.stelle .knopf-voll { background: var(--gold); border-color: var(--gold); color: var(--tief); }
.stelle .knopf-voll:hover { background: var(--gold-hell); border-color: var(--gold-hell); }
.hell .stelle a:focus-visible { outline-color: var(--gold-hell); }
@media (max-width: 699px) { .stelle { grid-template-columns: 1fr; } .stelle .knopf { width: 100%; } }

/* Was Sie erwartet: lückenloses Kachelraster in den Flächen der Marke. Oben die Kernaussage
   in Gold über zwei Spalten, rechts ein Raumfoto über zwei Zeilen. */
.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(240px, auto); gap: 10px; }
.vorteil { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(24px, 2.6vw, 40px); }
.vorteil h3 { font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.12; }
.vorteil p { max-width: 40ch; font-size: 17px; font-weight: 400; line-height: 1.55; }
.vorteil.gross { grid-column: span 2; background: linear-gradient(110deg, #D49A63, #F2BE85); color: var(--tief); }
.vorteil.gross h3 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); line-height: 1.05; }
.vorteil.gross p { font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; max-width: 46ch; }
.vorteil.v-hell { background: var(--hell); color: var(--tief); }
.vorteil.v-hell p { color: var(--s2); }
.vorteil.v-taupe { background: #A38A7E; color: #1A1F25; } /* #242A31 käme nur auf 4,48:1 */
.vorteil.v-schiefer { background: var(--schiefer); color: var(--hell); }
.vorteil.v-schiefer p { color: var(--t2); }
.vorteil-bild { position: relative; grid-row: span 2; margin: 0; overflow: hidden; background: #1B2127; }
.vorteil-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (max-width: 1023px) {
  .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vorteile > :last-child { grid-column: span 2; } /* schließt die letzte Reihe ohne Lücke */
}
@media (max-width: 599px) {
  .vorteile { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .vorteil.gross, .vorteile > :last-child { grid-column: auto; }
  .vorteil-bild { grid-row: auto; aspect-ratio: 4 / 3; }
}

/* Haltung: das Wort der Gründer groß auf dem Goldband */
.haltung { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--raum-spalte); align-items: start; }
.haltung h2 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); }
.haltung blockquote { margin: 0; }
.haltung blockquote p { font-size: clamp(19px, 1.8vw, 26px); font-weight: 500; line-height: 1.45; }
.haltung blockquote p + p { margin-top: 18px; font-weight: 700; }
.haltung blockquote footer { margin-top: 22px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
@media (max-width: 899px) { .haltung { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 479px) { .haltung h2 { font-size: 1.6rem; } }

/* Bewerbung: links Einladung und der Weg per E-Mail, rechts das Formular */
.bewerbung-mail { display: inline-block; margin-top: 18px; font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 700; letter-spacing: .01em; color: var(--gold-hell); word-break: break-word; }
.formular fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.formular legend, .formular .frage { padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.formular .frage-hinweis { font-weight: 400; color: var(--s3); }
/* Auswahl zum Antippen: Stelle (eine) und Wichtiges (mehrere). Gewählt wird die Fläche dunkel,
   davor erscheint der eckige Gold-Punkt der Marke. */
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.formular .wahl label { position: relative; display: block; cursor: pointer; font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.formular .wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; }
.wahl span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 16px;
  border: 1px solid rgba(36,42,49,.55); background: var(--feld); color: var(--tief);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wahl span::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; background: rgba(36,42,49,.25); transition: background-color .2s ease; }
.wahl label:hover span { border-color: var(--tief); }
.wahl input:checked + span { background: var(--tief); border-color: var(--tief); color: var(--hell); }
.wahl input:checked + span::before { background: var(--gold-hell); }
.wahl input:focus-visible + span { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.wahl-gross label { flex: 1 1 140px; }
.wahl-gross span { width: 100%; justify-content: center; font-weight: 600; }
.formular input[type="file"] { height: auto; padding: 10px 12px; font-size: 15px; background-color: var(--feld); }
.formular input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 9px 14px; border: 0; cursor: pointer;
  background: var(--tief); color: var(--hell);
  font: inherit; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
}
.formular .klein { min-height: 96px; }

/* Ihr erster Termin: links die vier Wege der Abrechnung als Kacheln, rechts was mitzubringen ist
   (dunkle Karte) und die Zuzahlung (Goldkarte). */
/* Beide Spalten schließen unten bündig ab: die Kacheln dehnen sich auf die Höhe der Karten */
.termin-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 3vw, 48px); align-items: stretch; }
.termin-raster > div:first-child { display: flex; flex-direction: column; }
.termin-raster .versal { margin-bottom: 16px; color: var(--s3); }
.kassen { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.termin-karten { align-content: start; }
.kasse { padding: clamp(24px, 2.4vw, 36px); background: #EEE7E0; } /* Sand: Off-White mit einem Hauch Taupe */
.kasse h3 { position: relative; padding-left: 26px; font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; line-height: 1.25; color: var(--tief); }
.kasse h3::before {
  content: ""; position: absolute; left: 0; top: .34em; width: 11px; height: 11px;
  background: linear-gradient(110deg, #D49A63, #F2BE85);
  transform: scaleY(var(--m, 1)); transform-origin: 50% 100%;
}
.kasse p { margin-top: 12px; font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--s2); }
.termin-karten { display: grid; gap: 10px; }
.mitbringen { padding: clamp(24px, 2.6vw, 36px); background: var(--tief); color: var(--hell); }
.mitbringen h3, .zuzahlung h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.2; }
.mitbringen ul { display: grid; gap: 12px; margin-top: 20px; }
.mitbringen li { position: relative; padding-left: 24px; font-size: 17px; font-weight: 500; line-height: 1.4; }
.mitbringen li::before { content: ""; position: absolute; left: 0; top: .4em; width: 9px; height: 9px; background: var(--gold-hell); }
.mitbringen .frist { margin-top: 22px; font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--t2); }
.mitbringen .frist strong { font-weight: 600; color: var(--hell); }
.zuzahlung { padding: clamp(24px, 2.6vw, 36px); background: linear-gradient(110deg, #D49A63, #F2BE85); color: var(--tief); }
.zuzahlung .betrag { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; }
.zuzahlung .betrag strong { font-size: clamp(2.5rem, 4vw, 3.6rem); font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.zuzahlung .betrag span { font-size: 17px; font-weight: 600; line-height: 1.35; }
.zuzahlung p:not(.betrag) { margin-top: 16px; font-size: 16px; font-weight: 500; line-height: 1.55; }
@media (max-width: 899px) { .termin-raster { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .kassen { grid-template-columns: 1fr; grid-auto-rows: auto; } }

/* Kontakt: links Einladung und Kontaktwege, rechts das Formular */
.kontakt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-spalte); align-items: start; }
.kontakt-raster h2 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); margin-bottom: var(--raum-titel); }
@media (max-width: 479px) { .kontakt-raster h2 { font-size: 1.6rem; } }
.kontakt-raster .einladung { max-width: 44ch; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.55; color: var(--s2); background-color: var(--hell); }
/* Kontakt: die Ansprechpartnerin als dunkle Karte, die Rufnummer groß */
.kontakt-karte { max-width: 520px; margin-top: var(--raum-knopf); padding: clamp(24px, 2.6vw, 36px); background: var(--tief); color: var(--hell); }
.kontakt-karte .name { font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.2; }
.kontakt-karte .rolle { margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--t3); }
.kontakt-karte .telefon { display: inline-block; margin-top: 22px; font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: .02em; line-height: 1.1; color: var(--gold-hell); }
.kontakt-karte .zeiten { margin-top: 10px; font-size: 17px; line-height: 1.5; }
.kontakt-karte .wege { margin-top: 18px; font-size: 17px; font-weight: 400; line-height: 1.65; }
.kontakt-karte a { transition: color .2s ease; }
.kontakt-karte a:hover { color: var(--hell); }
.kontakt-karte .wege a:hover { color: var(--gold-hell); }
.hell .kontakt-karte a:focus-visible { outline-color: var(--gold-hell); }
/* Weg zum Formular: Goldknopf in der dunklen Karte (überstimmt die hellen Knöpfe der Sektion) */
.kontakt-karte .zum-formular { margin-top: 24px; }
.kontakt-karte .knopf-voll { background: var(--gold); border-color: var(--gold); color: var(--tief); }
.kontakt-karte .knopf-voll:hover { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--tief); }
.kontakt-hinweis { margin-top: 20px; font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--s2); }
.kontakt-hinweis a { color: var(--gold-text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.kontakt-hinweis a:hover { color: var(--tief); }

/* Startseite: rechts statt des Formulars der Eingang am Chronos-Platz 1, so hoch wie die linke
   Spalte. Die Adresse sitzt als dunkles Schild auf dem Foto (wie der Leitsatz am Teamfoto). */
.kontakt-bild { position: relative; margin: 0; align-self: stretch; min-height: 480px; background: #D9D2CA; }
.kontakt-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 62%; }
.kontakt-bild figcaption {
  position: absolute; left: 0; bottom: clamp(20px, 3vw, 40px); max-width: 17em;
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 30px);
  background: var(--tief); color: var(--hell);
  font-size: clamp(17px, 1.4vw, 20px); font-weight: 400; line-height: 1.35;
}
.kontakt-bild figcaption strong { display: block; margin-bottom: 2px; font-weight: 700; }
@media (max-width: 899px) { .kontakt-bild { min-height: 0; aspect-ratio: 4 / 5; max-height: calc(var(--vh) * 75); } }

.formular h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.25; }
.formular .hinweis { margin-top: 6px; font-size: 15px; font-weight: 400; color: var(--s2); background-color: var(--hell); }
.formular .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 26px; }
.formular .feld { display: flex; flex-direction: column; gap: 6px; }
.formular .feld.breit { grid-column: 1 / -1; }
.formular label { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.formular input, .formular select, .formular textarea {
  width: 100%; background-color: var(--feld); color: var(--tief);
  border: 1px solid rgba(36,42,49,.55); border-radius: 0; padding: 0 14px; height: 48px;
  font: inherit; font-size: 16px; transition: border-color .2s ease;
}
.formular textarea { height: auto; min-height: 132px; padding: 12px 14px; resize: vertical; }
.formular select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, #242A31 50%), linear-gradient(135deg, #242A31 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; }
.formular input:focus, .formular select:focus, .formular textarea:focus { border-color: var(--tief); outline: none; }
.formular .zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; font-weight: 400; line-height: 1.5; margin-top: 4px; text-transform: none; letter-spacing: 0; }
.formular .zustimmung input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--tief); }
.formular .zustimmung a { text-decoration: underline; text-underline-offset: 3px; }
.formular .senden { margin-top: 22px; }
.formular .danke { display: none; margin-top: 22px; font-size: 16px; padding: 16px 18px; border: 1px solid var(--tief); }
.formular.ist-gesendet .danke { display: block; }
/* Fehler: Meldung unter dem Feld bzw. oberhalb des Knopfs; der Text trägt die Aussage, die Farbe unterstützt */
.formular .feld-fehler { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--fehler); }
.formular [aria-invalid="true"]:not([type="checkbox"]) { border-color: var(--fehler); }
.formular .formular-fehler { margin-top: 22px; font-size: 16px; line-height: 1.5; padding: 16px 18px; border: 1px solid var(--fehler); color: var(--tief); }
.formular .formular-fehler a { display: inline-block; margin-left: 4px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .kontakt-raster { grid-template-columns: 1fr; gap: 48px; }
  .formular .felder { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
}

/* ---------------------------------------------------------------------------------------
   Über uns */

/* Geschichte: links der Text, rechts ein Behandlungsraum hochkant mit dunklem Schild */
@media (min-width: 900px) { .geschichte { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.geschichte-bild img { aspect-ratio: 4 / 5; object-position: 50% 40%; }
.team-raster .team-text p + p { margin-top: 16px; }

/* Werte: dasselbe Kachelraster wie auf der Karriereseite, aber fünf Kacheln ohne Foto. Zweispaltig
   geht es ohne die breite letzte Kachel auf (Gold oben, darunter zwei Reihen zu zwei). */
@media (max-width: 1023px) { .werte-raster > :last-child { grid-column: auto; } }

/* Team: gleich große Karten, niemand steht vorn. Solange Fotos fehlen, trägt die Portraitfläche
   das Bildzeichen der Marke. Schmal liegen Portrait und Text nebeneinander. */
.team-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 3.6vw, 56px) clamp(16px, 1.8vw, 28px); }
.portrait {
  aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #EEE7E0; /* Sand wie die Kacheln auf „Ihr erster Termin“ */
}
.portrait svg { width: 28%; aspect-ratio: 1; }
.portrait span { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--s3); }
.team-karte-text { padding-top: 22px; }
.team-karte h3 { font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; line-height: 1.25; }
.team-karte .rolle { margin-top: 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); }
.team-karte .schwerpunkte { margin-top: 12px; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--s2); }
.team-karte .satz { margin-top: 12px; font-size: 17px; font-weight: 500; line-height: 1.5; }
.team-stelle { margin-top: clamp(56px, 6vw, 96px); }
@media (max-width: 899px) { .team-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .team-karten { grid-template-columns: 1fr; gap: 28px; }
  .team-karte { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
  .portrait { gap: 10px; }
  .portrait svg { width: 38%; }
  .portrait span { font-size: 11px; letter-spacing: .1em; }
  .team-karte-text { padding-top: 0; }
}

/* Knopfgruppe im Abschnittskopf: der Abstand kommt von der Gruppe, nicht von jedem Knopf */
.kopf-text .karriere-knoepfe .knopf { margin-top: 0; }

/* ---------------------------------------------------------------------------------------
   Leistungen */

/* Links die Übersicht, sie bleibt beim Scrollen stehen und markiert mit dem Gold-Punkt die
   Leistung im Bild. Rechts die Leistungen als Karten untereinander. Die Übersicht
   (.seiten-index) nutzt auch die Datenschutzerklärung. */
.leistungen-raster { display: grid; grid-template-columns: minmax(190px, 3fr) minmax(0, 9fr); gap: var(--raum-spalte); align-items: start; }
.seiten-index { position: sticky; top: calc(var(--kopf-hoehe) + 36px); display: flex; flex-direction: column; }
.seiten-index .versal { margin-bottom: 12px; color: var(--s3); }
.seiten-index a { position: relative; padding: 9px 0 9px 24px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--s3); transition: color .2s ease; }
.seiten-index a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px; margin-top: -6px;
  background: linear-gradient(110deg, #D49A63, #F2BE85);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .35s ease;
}
.seiten-index a:hover, .seiten-index a.ist-aktiv { color: var(--tief); }
.seiten-index a.ist-aktiv::before { transform: scaleY(1); }
.leistungen { display: grid; gap: 10px; }
.leistung { display: grid; grid-template-columns: minmax(0, 1fr); background: #EEE7E0; scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.leistung.mit-bild { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.leistung-text { padding: clamp(28px, 3.2vw, 52px); }
.leistung-marke { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); }
.leistung h3 { margin-top: 12px; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.08; }
.leistung .leitsatz { margin-top: 14px; font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; line-height: 1.35; }
.leistung-text > p:not([class]) { margin-top: 14px; max-width: 62ch; font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--s2); }
.leistung .hilft { margin-top: 26px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--s3); }
.punkte { display: grid; gap: 10px; margin-top: 12px; }
.punkte li { position: relative; padding-left: 24px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.punkte li::before {
  content: ""; position: absolute; left: 0; top: .38em; width: 10px; height: 10px;
  background: linear-gradient(110deg, #D49A63, #F2BE85);
  transform: scaleY(var(--m, 1)); transform-origin: 50% 100%;
}
.leistung .knopf { margin-top: var(--raum-knopf); }
.leistung-bild { position: relative; min-height: 340px; margin: 0; overflow: hidden; background: #1B2127; }
.leistung-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Ab November: dunkle Karten, damit der spätere Start auf einen Blick erkennbar ist */
.leistung.bald { background: var(--schiefer); color: var(--hell); }
.leistung.bald .leistung-marke { color: var(--gold-hell); }
.leistung.bald .leistung-text > p:not([class]) { color: var(--t2); }
.leistung.bald .hilft { color: var(--t3); }
@media (max-width: 1023px) {
  .leistungen-raster { grid-template-columns: 1fr; gap: 28px; }
  /* Schmal wird die Übersicht zu Sprungflächen über den Karten */
  .seiten-index { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .seiten-index .versal { width: 100%; margin-bottom: 4px; }
  .seiten-index a { padding: 10px 14px; font-size: 16px; color: var(--tief); background: var(--feld); border: 1px solid rgba(36,42,49,.3); }
  .seiten-index a::before { display: none; }
  .seiten-index a:hover { border-color: var(--tief); }
}
@media (max-width: 699px) {
  .leistung.mit-bild { grid-template-columns: 1fr; }
  .leistung-bild { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
}

/* Ablauf: vier Schritte nebeneinander, die Zahl in Gold trägt die Reihenfolge */
.schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 3vw, 48px); }
.schritt { overflow: hidden; }
.schritt-zahl {
  display: block; font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 700; line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(110deg, #D49A63, #F2BE85); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.schritt h3 { margin-top: 20px; font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; line-height: 1.25; }
.schritt p { margin-top: 10px; max-width: 32ch; font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--t2); }
@media (max-width: 1023px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .schritte { grid-template-columns: 1fr; } }

/* Hinweis im Termin-Block: Link auf dunklem Text über Gold, unterstrichen erkennbar */
.unterstrichen { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ---------------------------------------------------------------------------------------
   Praxis */

/* Drei Kennzahlen in den Flächen der Marke */
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kennzahl { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: clamp(220px, 20vw, 300px); padding: clamp(24px, 2.6vw, 40px); }
.kennzahl-wert { font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.kennzahl p:last-child { max-width: 34ch; font-size: 17px; font-weight: 400; line-height: 1.55; }
.k-gold { background: linear-gradient(110deg, #D49A63, #F2BE85); color: var(--tief); }
.k-gold p:last-child { font-weight: 500; }
.k-sand { background: #EEE7E0; color: var(--tief); }
.k-sand p:last-child { color: var(--s2); }
.k-schiefer { background: var(--schiefer); color: var(--hell); }
.k-schiefer p:last-child { color: var(--t2); }
@media (max-width: 899px) { .kennzahlen { grid-template-columns: 1fr; } .kennzahl { min-height: 0; gap: 20px; } }

/* Galerie der Trainingsfläche: lückenloses Mosaik, der Überblick breit, die Kraftstation hoch.
   Jedes Foto trägt ein kleines dunkles Schild mit dem, was dort trainiert wird. */
.flaeche-galerie {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 19vw, 330px); gap: 10px;
  grid-template-areas: "a a b c" "d e b f";
}
.flaeche-galerie figure { position: relative; margin: 0; overflow: hidden; background: #1B2127; }
.flaeche-galerie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flaeche-galerie figcaption {
  position: absolute; left: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 20px); padding: 8px 12px;
  background: var(--tief); color: var(--hell); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
}
.fg-a { grid-area: a; } .fg-b { grid-area: b; } .fg-c { grid-area: c; } .fg-d { grid-area: d; } .fg-e { grid-area: e; } .fg-f { grid-area: f; }
@media (max-width: 899px) {
  .flaeche-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 36vw, 300px); grid-template-areas: "a a" "b c" "b d" "e f"; }
}

/* Ankommen: links der Text, rechts zwei Raumfotos hochkant nebeneinander */
.ankommen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--raum-spalte); align-items: center; }
.ankommen-raster h2 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); }
.ankommen-raster .team-text p { margin-top: var(--raum-titel); max-width: 46ch; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.55; color: var(--s2); }
.ankommen-raster .team-text p + p { margin-top: 16px; }
.bild-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bild-paar figure { margin: 0; background: #D9D2CA; }
.bild-paar img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.rundgang { margin-top: clamp(56px, 6vw, 96px); }
@media (max-width: 899px) { .ankommen-raster { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .ankommen-raster h2 { font-size: 1.6rem; } }

/* Footer: dunkel, vier Spalten, darunter Rechtliches */
#fuss { background: var(--tief); color: var(--hell); padding: clamp(64px, 7vw, 120px) 0 32px; border-top: 1px solid var(--linie); }
#fuss .fuss-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
#fuss .fuss-marke svg { height: 112px; width: auto; display: block; overflow: visible; }
#fuss .fuss-marke p { margin-top: 20px; max-width: 34ch; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--t2); }
#fuss .sozial { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
/* Instagram-Symbol: 24 px Zeichen, 44 px Trefferfläche */
.instagram { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px; color: inherit; }
.instagram svg, #fuss .fuss-marke .instagram svg { width: 24px; height: 24px; }
#fuss .sozial a { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
#fuss h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; margin-bottom: 14px; }
#fuss ul { list-style: none; margin: 0; padding: 0; }
#fuss li { padding: 5px 0; font-size: 16px; font-weight: 400; }
#fuss a { transition: color .2s ease; }
#fuss a:hover { color: var(--gold-hell); }
#fuss address { font-style: normal; font-size: 16px; font-weight: 400; line-height: 1.6; }
#fuss .fuss-unten { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 80px); padding-top: 22px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--t3); }
#fuss .fuss-unten nav { display: flex; gap: 22px; }
#fuss .fuss-unten span a { white-space: nowrap; }
@media (max-width: 899px) { #fuss .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { #fuss .fuss-raster { grid-template-columns: 1fr; gap: 32px; } }

/* Fester Termin-Knopf unten rechts, eckig wie alles andere */
#fragen { position: fixed; right: var(--rand); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 45; }
#fragen[hidden] { display: none; }
#fragen-knopf {
  display: flex; align-items: center; height: 56px; padding: 0 22px;
  background: var(--tief); color: var(--hell); border: 1px solid var(--hell); cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
#fragen-knopf:hover { background: var(--hell); color: var(--tief); }
#fragen-knopf span { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
#fragen-karte {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: min(320px, calc(100vw - 2 * var(--rand)));
  background: var(--tief); color: var(--hell); border: 1px solid var(--hell); padding: 22px 22px 20px;
}
#fragen-karte[hidden] { display: none; }
#fragen-karte .name { font-size: 20px; font-weight: 600; line-height: 1.2; }
#fragen-karte .rolle { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--t3); margin-top: 4px; }
#fragen-karte p { margin-top: 14px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--t2); }
#fragen-karte .wege { display: grid; gap: 8px; margin-top: 18px; }
#fragen-karte .wege .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#fragen-karte .knopf { height: 42px; padding-inline: 14px; width: 100%; }
#fragen-karte .fragen-termin { margin-top: 14px; font-size: 15px; }
#fragen-karte .fragen-termin a { color: var(--gold-hell); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
#fragen-karte .fragen-termin a:hover { color: var(--hell); }
#fragen-knopf .kurz { display: none; }
@media (max-width: 767px) {
  #fragen-knopf .lang { display: none; }
  #fragen-knopf .kurz { display: inline; }
  #fragen-knopf { height: 48px; padding: 0 18px; }
}

/* Karriere: der Gold-Verlauf des Bildzeichens als Flaeche, darauf ausschliesslich dunkler Text */
.gold-band { background: linear-gradient(110deg, #D49A63, #F2BE85); color: var(--tief); }
.gold-band .abschnitt-kopf p { color: var(--tief); }
/* Karriere: links das Teamfoto, es reicht bis an den Fensterrand und ragt oben aus dem Goldband
   heraus. Quer über seine Unterkante läuft die Anzeigetafel mit den offenen Stellen. Der Text
   rechts ist länger als das Foto hoch: Foto und Tafel bleiben deshalb beim Lesen stehen und
   schließen am Ende bündig mit den Knöpfen ab. */
.karriere-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--raum-spalte); align-items: start; }
.karriere-raster h2 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); }
.karriere-bild {
  position: sticky; top: calc(var(--kopf-hoehe) + 24px);
  margin: calc(-1 * (var(--raum-abschnitt) + var(--karriere-ueberstand))) 0 clamp(40px, 4vw, 60px) calc(-1 * var(--rand));
}
.karriere-bild img { width: 100%; aspect-ratio: 10 / 9; max-height: calc(var(--vh) * 78); object-fit: cover; object-position: 42% 40%; display: block; background: #BFA58F; }
@media (min-width: 900px) and (max-width: 1199px) {
  .karriere-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .karriere-bild img { aspect-ratio: 1 / 1; object-position: 46% 40%; }
}
.tafel {
  position: absolute; left: 0; right: calc(-1 * clamp(24px, 3.4vw, 56px)); bottom: calc(-1 * clamp(40px, 4vw, 60px));
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2.4vw, 36px) clamp(18px, 1.8vw, 26px) var(--rand);
  background: var(--tief); color: var(--hell);
}
.tafel-kopf { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-hell); }
.tafel-kopf::before { content: ""; flex: 0 0 auto; width: 11px; height: 11px; background: var(--gold-hell); animation: tafel-puls 1.8s ease-in-out infinite; }
@keyframes tafel-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tafel-kopf::before { animation: none; } }
/* Alle Stellen liegen in derselben Zelle übereinander: die Tafel ist so hoch wie die längste und
   springt beim Wechsel nicht. Ohne Skript bleibt die erste stehen. */
.tafel-rollen { display: grid; margin-top: 10px; overflow: hidden; }
.tafel-rolle { grid-area: 1 / 1; align-self: start; }
.tafel-rolle:not(:first-child) { visibility: hidden; }
.tafel-rolle strong { display: block; font-size: clamp(1.25rem, 2.1vw, 2rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.12; }
.tafel-rolle span { display: block; margin-top: 8px; font-size: clamp(16px, 1.2vw, 18px); font-weight: 400; color: var(--t2); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.karriere-text { align-self: center; }
.karriere-text h2 { margin-bottom: var(--raum-titel); }
.karriere-text p { max-width: 50ch; font-size: 17px; line-height: 1.55; }
.karriere-text p + p { margin-top: 16px; }
.karriere-text .gross { max-width: 46ch; margin-bottom: 26px; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; }
.karriere-text strong { font-weight: 700; }
.karriere-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--raum-knopf); }
@media (max-width: 899px) {
  #karriere { padding-top: 0; }
  .karriere-raster { grid-template-columns: 1fr; gap: 0; }
  .karriere-bild { position: relative; top: auto; margin: 0 calc(-1 * var(--rand)); }
  .karriere-bild img { aspect-ratio: 3 / 2; max-height: none; }
  .tafel { position: relative; right: auto; bottom: auto; margin: -36px var(--rand) 0 0; padding-right: 20px; }
  .karriere-text { margin-top: 44px; }
}
@media (max-width: 479px) {
  .karriere-raster h2 { font-size: 1.6rem; }
  .karriere-bild img { aspect-ratio: 5 / 4; object-position: 46% 40%; }
  .karriere-knoepfe .knopf { width: 100%; }
}
.gold-band .knopf { border-color: var(--tief); color: var(--tief); }
.gold-band .knopf:hover { background: var(--tief); border-color: var(--tief); color: var(--hell); }
.gold-band .knopf-tief { background: var(--tief); border-color: var(--tief); color: var(--hell); }
.gold-band .knopf-tief:hover { background: var(--hell); border-color: var(--hell); color: var(--tief); }
.gold-band a:focus-visible { outline-color: var(--tief); }

/* ---------------------------------------------------------------------------------------
   Rechtliches: Impressum und Datenschutz */

/* Seitenkopf ohne Foto: dieselbe Ordnung (Brotkrumen, Titel, Einleitung), nur auf Tief und so
   hoch wie sein Inhalt. Wer das Impressum sucht, soll nicht erst an einem Bild vorbeiscrollen. */
.seitenkopf.schlicht { height: auto; min-height: 0; max-height: none; background: var(--tief); }
.seitenkopf.schlicht .rahmen { position: relative; padding-top: calc(var(--kopf-gross) + clamp(52px, 5vw, 88px)); padding-bottom: clamp(40px, 5vw, 80px); }
.seitenkopf.schlicht .seitenkopf-sub { color: var(--t2); }
/* Luft über der Titelzeile, damit die Umlautpunkte (DATENSCHUTZERKLÄRUNG) nicht an der Maske hängen */
.seitenkopf.schlicht h1 .zeile { padding-top: .14em; }

/* Gemeinsame Textregeln: Lesebreite, ruhiger Fließtext, Verweise unterstrichen in Gold-Text */
.recht-text p, .recht-text li, .recht-text dd { font-size: 17px; font-weight: 400; line-height: 1.65; color: var(--s2); }
.recht-text strong { font-weight: 700; color: var(--tief); }
.recht-text a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; transition: color .2s ease; }
.recht-text a:hover { color: var(--tief); }
.recht-text address { font-style: normal; }

/* Impressum: je Abschnitt links die Überschrift, rechts die Angaben. Keine Trennlinien, die
   Abschnitte trennt der Abstand. */
.recht-teile { display: grid; gap: clamp(56px, 6vw, 104px); }
.recht-teil { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px var(--raum-spalte); align-items: start; }
.recht-teil > h2 { max-width: 22ch; font-size: clamp(1.35rem, 1.9vw, 1.75rem); font-weight: 700; line-height: 1.25; color: var(--tief); }
.angaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(32px, 4vw, 64px); }
.angabe.breit { grid-column: 1 / -1; }
.angabe dt { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--tief); }
.angabe dd { margin-top: 6px; }
.recht-teil > .recht-text > p { max-width: 64ch; }
@media (max-width: 899px) {
  .recht-teil { grid-template-columns: 1fr; }
  .recht-teil > h2 { max-width: none; }
}
@media (max-width: 599px) { .angaben { grid-template-columns: 1fr; } }

/* Datenschutz: links die Übersicht, rechts der Text in Lesebreite. Die Gliederung des Anwalts
   bleibt erhalten: A und B als h2, römische Ziffern als h3, arabische als h4. */
.recht-raster { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); gap: var(--raum-spalte); align-items: start; }
.recht-raster .recht-text { max-width: 72ch; }
.recht-text .vorwort { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--tief); }
.recht-block { scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.recht-block + .recht-block { margin-top: 36px; }
.vorwort + .recht-block, .recht-block + .recht-block.haupt { margin-top: clamp(48px, 5vw, 80px); }
.recht-text h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.2; color: var(--tief); }
.recht-text h3 { font-size: clamp(1.2rem, 1.55vw, 1.4rem); font-weight: 700; line-height: 1.3; color: var(--tief); }
.recht-text h4 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--tief); }
.recht-text h2 + *, .recht-text h3 + *, .recht-text h4 + * { margin-top: 12px; }
.recht-text * + h3 { margin-top: 36px; }
.recht-text * + h4 { margin-top: 28px; }
.recht-text p + p, .recht-text p + ul, .recht-text ul + p, .recht-text p + address, .recht-text address + p { margin-top: 14px; }
/* Aufzählungen mit den eckigen Gold-Punkten der Seite, ohne Trennlinien */
.recht-text ul { display: grid; gap: 6px; }
.recht-text ul li { position: relative; padding-left: 22px; }
.recht-text ul li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  background: linear-gradient(110deg, #D49A63, #F2BE85);
}
@media (max-width: 1023px) {
  .recht-raster { grid-template-columns: 1fr; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  #hero h1 .zeile > span { transform: none !important; }
  #kopf.ist-fest { animation: none; }
  * { transition-duration: 0s !important; }
}

/* ---------------------------------------------------------------------------------------
   Beckenbodentraining (EMP Chair Pro One) */

/* Kennzahl mit Zähler: die Ziffern behalten beim Hochzählen ihre Breite */
.zaehler { font-variant-numeric: tabular-nums; }

/* Film: der Herstellerfilm im 16:9-Rahmen. Er trägt eigene Texteinblendungen in der Bildmitte,
   deshalb liegt nichts darauf außer dem eckigen Knopf unten rechts. */
.film { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #1B2127; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-knopf {
  position: absolute; right: clamp(12px, 1.6vw, 24px); bottom: clamp(12px, 1.6vw, 24px);
  display: grid; place-items: center; width: 52px; height: 52px;
  background: var(--tief); color: var(--hell); border: 1px solid var(--tief);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.film-knopf:hover { background: var(--gold); border-color: var(--gold); color: var(--tief); }
.film-knopf svg { width: 20px; height: 20px; }
.film-knopf .zeichen-pause, .film-knopf.laeuft .zeichen-start { display: none; }
.film-knopf.laeuft .zeichen-pause { display: block; }

/* Prinzip: links die Sitzfläche mit den Impulsringen, rechts die Erklärung */
.prinzip-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--raum-spalte); align-items: center; }
.prinzip-bild { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #1B2127; }
.prinzip-bild img, .prinzip-bild .impulse { position: absolute; inset: 0; width: 100%; height: 100%; }
.prinzip-bild img { object-fit: cover; }
.impuls { fill: none; stroke: var(--gold-hell); stroke-width: 4; opacity: 0; }
.prinzip-text h2 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); }
.prinzip-text > p { margin-top: var(--raum-titel); max-width: 52ch; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.55; color: var(--s2); }
.prinzip-text .punkte { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .impuls:nth-child(1) { opacity: .9; } }
@media (max-width: 899px) { .prinzip-raster { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .prinzip-text h2 { font-size: 1.6rem; } }

/* Unser Blick: dieselbe dunkle Tafel wie die offene Stelle, mit kleinerem Titel */
.stelle.blick { margin-top: var(--raum-abschnitt); }
.stelle.blick h3 { margin-top: 0; font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.stelle.blick .stelle-fakten { max-width: 62ch; }

/* Kachelraster auf dunklem Grund: die Schiefer-Kachel braucht eine Kante zum Tief */
.abschnitt:not(.hell) .vorteil.v-schiefer { box-shadow: inset 0 0 0 1px var(--linie); }

/* Ablauf auf hellem Grund: drei Fotos hochkant, darunter die vier Schritte */
.bild-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--raum-kopf); }
.bild-reihe figure { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #D9D2CA; }
.bild-reihe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bild-reihe figcaption {
  position: absolute; left: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 20px); padding: 8px 12px;
  background: var(--tief); color: var(--hell); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
}
.hell .schritt p { color: var(--s2); }
@media (max-width: 599px) {
  .bild-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bild-reihe figure:last-child { grid-column: span 2; aspect-ratio: 4 / 3; }
}

/* Fragen: links Titel und Hinweis (bleibt stehen), rechts die Fragen als Flächen ohne Trennlinien.
   Plus und Minus sind eckig wie der Plus-Knopf der Bildkarten. */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--raum-spalte); align-items: start; }
.fragen-kopf { position: sticky; top: calc(var(--kopf-hoehe) + 36px); }
.fragen-kopf h2 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); }
.fragen-kopf p { margin-top: var(--raum-titel); max-width: 40ch; font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.55; color: var(--t2); }
.fragen-kopf .geraet-hinweis { margin-top: 28px; font-size: 15px; color: var(--t3); }
.fragen-liste { display: grid; gap: 10px; }
.fragen-liste details { background: var(--schiefer); }
.fragen-liste summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: 24px 76px 24px clamp(20px, 2.4vw, 32px);
  font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.35;
  transition: color .2s ease;
}
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary:hover { color: var(--gold-hell); }
.fragen-liste summary::before, .fragen-liste summary::after {
  content: ""; position: absolute; right: clamp(20px, 2.4vw, 32px); top: 50%; width: 18px; height: 2px; margin-top: -1px;
  background: var(--gold-hell); transition: transform .3s ease;
}
.fragen-liste summary::after { transform: rotate(90deg); }
.fragen-liste details[open] summary::after { transform: rotate(0deg); }
.fragen-liste details p { padding: 0 clamp(20px, 2.4vw, 32px) 26px; max-width: 62ch; font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--t2); }
@media (max-width: 899px) {
  .fragen-raster { grid-template-columns: 1fr; gap: 32px; }
  .fragen-kopf { position: static; }
}
@media (max-width: 479px) { .fragen-kopf h2 { font-size: 1.6rem; } }

/* Kopfbild Beckenbodentraining: breit der Stuhl allein, rechts angeschlagen und so weit unten,
   dass er von den Armlehnen bis zum Fuß im Bild steht. Schmal die Frau im Stuhl, mittig. */
.seitenkopf-bild.kopf-emp { object-position: 100% 72%; }
@media (max-width: 899px) { .seitenkopf-bild.kopf-emp { object-position: 50% 40%; } }

/* ---------------------------------------------------------------------------------------
   Navigation: Untermenü Leistungen */

/* „Leistungen“ bleibt der Weg zur Übersicht, der kleine Winkel daneben klappt das Menü auf
   (Klick, Tippen, Tastatur). Mit der Maus öffnet es sich schon beim Überfahren. */
.nav-gruppe { position: relative; display: flex; align-items: center; gap: 6px; }
.nav-auf {
  display: grid; place-items: center; width: 22px; height: 22px; margin-right: -6px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--kopf-farbe);
  transition: color .2s ease;
}
.nav-auf svg { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s ease; }
.nav-gruppe:hover .nav-auf, .nav-auf:hover { color: var(--kopf-hover); }
.nav-gruppe.ist-offen .nav-auf svg { transform: rotate(180deg); }
@media (hover: hover) { .nav-gruppe:hover .nav-auf svg { transform: rotate(180deg); } }

/* Das Panel hängt unter dem Wort. Der obere Innenabstand überbrückt die Lücke bis zur Kante
   der Leiste, damit die Maus auf dem Weg nach unten nicht ins Leere fällt. */
.nav-dropdown {
  position: absolute; left: -32px; top: 100%; z-index: 5;
  padding-top: 28px;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear .32s;
}
#kopf.ist-fest .nav-dropdown { padding-top: calc(var(--kopf-hoehe) / 2 - 8px); }
.nav-gruppe.ist-offen .nav-dropdown { visibility: visible; pointer-events: auto; transition: visibility 0s; }
@media (hover: hover) {
  /* Sofort ansprechbar, sonst ist die Maus schon unter dem Wort, bevor das Panel sie fängt.
     Die kleine Verzögerung trägt nur das sichtbare Aufklappen. */
  .nav-gruppe:hover .nav-dropdown { visibility: visible; pointer-events: auto; transition: visibility 0s; }
}

/* Dunkle Tafel wie die Sticky-Leiste, eckig, eine feine Kante. Sie öffnet sich von oben nach
   unten, die Einträge richten sich dabei nacheinander auf. */
.nav-dropdown-innen {
  display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 28px;
  width: 640px; padding: 28px 28px 28px 32px;
  background: var(--tief); border: 1px solid var(--linie);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .28s cubic-bezier(.4, 0, .2, 1);
}
.nav-gruppe.ist-offen .nav-dropdown-innen { clip-path: inset(0); transition: clip-path .5s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .nav-gruppe:hover .nav-dropdown-innen { clip-path: inset(0); transition: clip-path .5s cubic-bezier(.2, .8, .2, 1) .08s; }
}

/* Liste: wie die Übersicht auf der Leistungsseite, das eckige Gold-Quadrat richtet sich beim
   Überfahren auf. Die Schrift ist ruhig gesetzt, nicht in Versalien wie die Leiste. */
.nav-spalte { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.nav-liste { display: grid; gap: 2px; }
#hauptnav .nav-liste a {
  position: relative; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 0 7px 22px;
  font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; white-space: normal;
  color: var(--hell);
}
#hauptnav .nav-liste a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: linear-gradient(110deg, #D49A63, #F2BE85);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .3s ease;
}
#hauptnav .nav-liste a:hover, #hauptnav .nav-liste a:focus-visible { color: var(--gold-hell); }
#hauptnav .nav-liste a:hover::before, #hauptnav .nav-liste a:focus-visible::before { transform: scaleY(1); }
.nav-bald { font-size: 13px; font-weight: 500; color: var(--t3); }
#hauptnav .nav-alle {
  display: inline-flex; align-self: flex-start; align-items: center; height: 42px; padding-inline: 18px;
  border: 1px solid var(--linie); color: var(--hell);
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
#hauptnav .nav-alle:hover { background: var(--hell); border-color: var(--hell); color: var(--tief); }

/* Die neue Seite als Bildkarte: Foto oben, darunter auf Schiefer Marke, Titel und eine Zeile */
#hauptnav .nav-karte {
  display: flex; flex-direction: column; align-self: stretch;
  background: var(--schiefer); color: var(--hell); white-space: normal; text-transform: none; letter-spacing: 0;
}
.nav-karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.nav-karte { overflow: hidden; }
.nav-karte-text { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.nav-karte-marke { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-hell); }
.nav-karte strong { font-size: 19px; font-weight: 700; line-height: 1.2; transition: color .2s ease; }
.nav-karte-text > span:last-child { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--t2); }
#hauptnav .nav-karte:hover strong, #hauptnav .nav-karte[aria-current="page"] strong { color: var(--gold-hell); }
.nav-karte:hover img { transform: scale(1.04); }
#hauptnav .nav-dropdown a:focus-visible { outline-color: var(--gold-hell); outline-offset: 2px; }

/* Einträge richten sich nacheinander auf, sobald das Panel offen ist */
.nav-liste li, .nav-alle, .nav-karte-text { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform 0s linear .3s; }
.nav-gruppe.ist-offen :is(.nav-liste li, .nav-alle, .nav-karte-text) { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .nav-gruppe:hover :is(.nav-liste li, .nav-alle, .nav-karte-text) { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
}
.nav-liste li:nth-child(2) { transition-delay: .03s; } .nav-liste li:nth-child(3) { transition-delay: .06s; }
.nav-liste li:nth-child(4) { transition-delay: .09s; } .nav-liste li:nth-child(5) { transition-delay: .12s; }
.nav-liste li:nth-child(6) { transition-delay: .15s; } .nav-liste li:nth-child(7) { transition-delay: .18s; }
.nav-gruppe :is(.nav-alle, .nav-karte-text) { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-innen { clip-path: none !important; transition: none !important; }
  .nav-liste li, .nav-alle, .nav-karte-text { opacity: 1; transform: none; }
  .nav-dropdown { transition: none; }
}

/* Mobiles Menü: die neue Seite als kleiner Unterpunkt direkt unter Leistungen */
#menue nav a.menue-unter {
  position: relative; margin-top: -4px; padding-left: 24px;
  font-size: clamp(18px, 5vw, 22px); font-weight: 600; text-transform: none; letter-spacing: .01em; line-height: 1.3;
  color: var(--t2);
}
#menue nav a.menue-unter::before {
  content: ""; position: absolute; left: 0; top: calc(50% + .07em); width: 10px; height: 10px; margin-top: -5px;
  background: linear-gradient(110deg, #D49A63, #F2BE85);
}
#menue nav a.menue-unter[aria-current="page"] { color: var(--gold-hell); }
body.menue-offen #menue nav a:nth-child(7) > span { transition-delay: .42s; }