/* ==========================================================================
   Cinematic Prime Music — Sebastian Werrmeyer
   1:1-Nachbau des bestehenden Auftritts, ohne WordPress, Elementor und
   LiteSpeed. Gestaltung unverändert, nur die Bauweise ist neu.

   Alle Werte stammen gemessen aus dem alten Auftritt: Palette aus den
   Astra-Variablen (--ast-global-color-0 bis -8), Schriften aus dem
   Elementor-Kit (Old Standard TT kursiv für Überschriften, Poppins für
   Fließtext).

   Der wichtigste Unterschied unter der Haube: Inhaltsbilder sind echte
   <img>-Elemente statt CSS-Hintergruende. Hintergrundbilder verschwinden in
   Kontrastdarstellungen und bei Lesehilfen, Inhaltsbilder bleiben.
   ========================================================================== */

/* --- Schriften -----------------------------------------------------------
   Die WOFF2-Dateien sind Byte fuer Byte dieselben, die der bestehende
   Auftritt ausliefert (geholt aus wp-content/uploads/elementor/google-fonts,
   per Pruefsumme gegengeprueft). Damit rendern Ueberschriften und Labels
   exakt gleich.

   Lato fehlt hier bewusst: der bestehende Auftritt deklariert zwar
   font-family:'Lato',sans-serif fuer den Fliesstext, liefert aber keine
   einzige Lato-Datei aus. Besucher sehen daher die Ersatzschrift ihres
   Systems, auf Windows Arial. Wer hier echtes Lato einbaut, weicht vom
   heutigen Erscheinungsbild ab statt es zu treffen.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Old Standard TT';src:url('../fonts/oldstandardtt-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Old Standard TT';src:url('../fonts/oldstandardtt-400italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Old Standard TT';src:url('../fonts/oldstandardtt-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --- Tokens -------------------------------------------------------------- */
:root{
  --petrol:#236373;         /* ast-global-color-0 und -1, Akzent und Knöpfe */
  --petrol-tief:#003B4A;    /* dunklere Variante aus derselben CI */
  --tinte:#121212;          /* ast-global-color-2, Überschriften */
  --grau:#7A7A7A;           /* ast-global-color-3, Fließtext */
  --papier:#F7F7F7;         /* ast-global-color-4 und -6, heller Grund */
  --weiss:#FFFFFF;          /* ast-global-color-5 */
  --hellblau:#D5E7EC;       /* ast-global-color-8 */

  /* Drei Rollen, genau wie im bestehenden Auftritt gemessen:
     Lato traegt den Fliesstext und das Menue, Poppins nur Knoepfe und
     kleine gesperrte Labels, Old Standard TT kursiv alle Ueberschriften. */
  --serif:'Old Standard TT', Georgia, 'Times New Roman', serif;
  --lesen:'Lato', sans-serif;   /* genau wie im Original, bewusst ohne @font-face */
  --label:'Poppins', sans-serif;

  --rand:clamp(1.25rem, 5vw, 5rem);
  --breit:87.5rem;        /* 1400px, gemessener Wert des Originals */
  --schmal:48rem;
  --mittelbreit:72rem;   /* Zeilenbreite der Einleitung */
  --schatten:0 40px 120px -24px rgba(0,0,0,.08);
  --takt:cubic-bezier(.22,.61,.36,1);
}

/* --- Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--weiss);
  color:var(--grau);
  font-family:var(--lesen);
  font-size:1rem;          /* 16px, Astra-Grundwert */
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
/* Groessen und Versalien stammen aus dem bestehenden Auftritt:
   h1 104px/1em, h2 44px/1.3em, beide uppercase, h3 24px/1.1em bei 600. */
h1,h2,h3,h4,h5{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--tinte);margin:0;text-transform:uppercase}
h1{font-size:clamp(2.6rem,1.1rem + 6.2vw,6.5rem);line-height:1}
h2{font-size:clamp(1.75rem,1.2rem + 2.3vw,2.75rem);line-height:1.3}
h3{font-size:1.5rem;line-height:1.1;font-weight:600}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* Sprungmarke für die Tastatur, sichtbar erst beim Fokus */
.sprung{position:absolute;left:-9999px;top:0;z-index:999;background:var(--petrol);color:#fff;padding:.8rem 1.2rem}
.sprung:focus{left:0}
:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}

/* --- Bausteine ----------------------------------------------------------- */
.bahn{padding:clamp(4rem,8vw,7.5rem) var(--rand)}
.bahn--papier{background:var(--papier)}
.bahn--petrol{background:var(--petrol);color:var(--hellblau)}
.bahn--petrol h2{color:var(--weiss)}
.innen{max-width:var(--breit);margin-inline:auto}
.innen--schmal{max-width:var(--schmal)}
.innen--mittel{max-width:var(--mittelbreit)}
.mitte{text-align:center}

/* Augenbraue: kleine gesperrte Vorzeile ueber der Überschrift */
.augenbraue{
  font-family:var(--label);font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--petrol);margin:0 0 1rem;line-height:1.6;
}
.bahn--petrol .augenbraue{color:var(--hellblau)}

/* Einleitungsband: abweichend von allen anderen Überschriften laeuft diese
   auf Poppins 700 kursiv in gemischter Schreibweise, 40px bei 1.4em.
   So steht es im bestehenden Auftritt, deshalb eine eigene Klasse. */
.einleitung{
  font-family:var(--lesen);font-style:italic;font-weight:700;
  font-size:2.5rem;line-height:1.4;          /* 40px wie gemessen */
  text-transform:none;color:var(--tinte);margin:0;padding-inline:80px;
}
@media (max-width:62rem){.einleitung{font-size:2rem;padding-inline:0}}   /* 32px */
@media (max-width:40rem){.einleitung{font-size:1.375rem}}                /* 22px */

/* Trenner mit Notensymbol, zwei duenne Linien und das Zeichen in der Mitte */
.trenner{display:flex;align-items:center;gap:1rem;justify-content:center;margin:2.2rem auto 0;max-width:11rem;color:var(--petrol)}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:currentColor;opacity:.45}
.trenner svg{width:1.1rem;height:1.1rem;fill:currentColor;flex:none}

/* Kurzer Strich unter einer linksbündigen Überschrift */
.strich{width:66px;height:2px;background:var(--petrol);border:0;margin:1.6rem 0 0}
.mitte .strich{margin-inline:auto}

/* --- Knöpfe ------------------------------------------------------------- */
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--label);font-size:.8125rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;
  padding:1.15rem 2.3rem;border-radius:999px;border:2px solid var(--petrol);
  background:var(--petrol);color:var(--weiss);
  cursor:pointer;transition:background .3s var(--takt),color .3s var(--takt),border-color .3s var(--takt);
}
.knopf:hover,.knopf:focus-visible{background:var(--petrol-tief);border-color:var(--petrol-tief)}
.knopf--rand{background:transparent;color:var(--weiss);border-color:var(--weiss)}
.knopf--rand:hover,.knopf--rand:focus-visible{background:var(--weiss);color:var(--tinte);border-color:var(--weiss)}
.knopf--hell{background:var(--weiss);color:var(--tinte);border-color:var(--weiss)}
.knopf--hell:hover,.knopf--hell:focus-visible{background:transparent;color:var(--weiss);border-color:var(--weiss)}

/* Textlink mit Pfeil, ersetzt das "mehr erfahren" des alten Auftritts */
.weiter{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--label);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--petrol);
}
.weiter::after{content:"";width:1.4rem;height:1px;background:currentColor;transition:width .3s var(--takt)}
.weiter:hover::after,.weiter:focus-visible::after{width:2.2rem}

/* --- Kopfbereich --------------------------------------------------------- */
/* Ueber der Buehne liegt die Kopfzeile durchsichtig auf dem Bild, erst beim
   Scrollen bekommt sie Grund. Der Inhalt laeuft in derselben 1400er-Spur wie
   der Rest, deshalb sitzt die Telefon-Pille am Spurrand, nicht am Fensterrand. */
.kopf{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:2rem;
  max-width:var(--breit);margin-inline:auto;
  padding:1.1rem var(--rand);
  background:transparent;
  transition:background .3s var(--takt);
}
/* Die Huelle liegt fest ueber dem Inhalt, damit die Buehne bis ganz nach oben
   laeuft. Seiten ohne Buehne halten mit .inhalt--abstand Platz frei. */
.kopf-huelle{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s var(--takt)}
.inhalt--abstand{padding-top:5.5rem}
.kopf-huelle.fest{background:var(--petrol-tief)}

.kopf__menue{display:flex;gap:clamp(1rem,2.4vw,2.6rem);list-style:none;margin:0;padding:0}
.kopf__menue a{
  color:var(--weiss);font-size:.95rem;font-weight:400;
  padding:.4rem 0;border-bottom:1px solid transparent;transition:border-color .25s var(--takt);
}
.kopf__menue a:hover,.kopf__menue a:focus-visible,.kopf__menue a[aria-current="page"]{border-bottom-color:var(--weiss)}
.kopf__tel{
  position:absolute;right:var(--rand);
  padding:1rem 2.4rem;border:1.5px solid var(--weiss);border-radius:999px;
  color:var(--weiss);font-size:.95rem;letter-spacing:.02em;white-space:nowrap;
  transition:background .3s var(--takt),color .3s var(--takt);
}
.kopf__tel:hover,.kopf__tel:focus-visible{background:var(--weiss);color:var(--tinte)}
.kopf__schalter{display:none}

@media (max-width:62rem){
  .kopf{justify-content:space-between}
  .kopf__tel{position:static}
  .kopf__schalter{
    display:inline-flex;flex-direction:column;gap:5px;
    background:none;border:0;padding:.6rem;cursor:pointer;
  }
  .kopf__schalter span{display:block;width:26px;height:2px;background:var(--weiss)}
  .kopf__menue{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--petrol-tief);padding:1rem var(--rand) 1.6rem;
  }
  .kopf__menue[hidden]{display:none}
  .kopf__menue a{display:block;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
}

/* --- Bühne -------------------------------------------------------------- */
.buehne{position:relative;min-height:min(92vh,56rem);display:grid;align-items:center;isolation:isolate;overflow:hidden}
.buehne__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.buehne::after{content:"";position:absolute;inset:0;background:rgba(10,20,24,.58);z-index:-1}
.buehne__inhalt{
  text-align:left;max-width:var(--breit);width:100%;
  padding:7rem var(--rand) 9rem;margin-inline:auto;
}
.buehne h1{color:var(--weiss);max-width:13ch}
.buehne__unter{color:rgba(255,255,255,.88);font-size:clamp(.95rem,.92rem + .2vw,1.05rem);margin:1.6rem 0 2.6rem;max-width:34rem}
.buehne__knoepfe{display:flex;gap:1rem;justify-content:flex-start;flex-wrap:wrap}
.buehne__runter{
  position:absolute;bottom:2.2rem;left:max(var(--rand),calc(50% - var(--breit)/2 + var(--rand)));
  color:rgba(255,255,255,.8);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;flex-direction:column;align-items:center;gap:.6rem;
}
.buehne__runter{flex-direction:row;gap:.5rem}
.buehne__runter svg{width:.8rem;height:.8rem;fill:currentColor;flex:none}

/* --- Seitenkopf der Unterseiten ------------------------------------------
   Dunkles Band mit Bild, der Seitentitel zentriert darauf. Ersetzt die
   grosse Buehne, die nur die Startseite hat. */
.seitenkopf{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;
  min-height:clamp(16rem,26vw,22rem);padding:7rem var(--rand) 4rem;text-align:center}
.seitenkopf__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.seitenkopf::after{content:"";position:absolute;inset:0;background:rgba(10,20,24,.58);z-index:-1}
.seitenkopf h1{color:var(--weiss);font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem)}
.seitenkopf .strich{margin-inline:auto;background:var(--weiss);opacity:.8}

/* --- Zahlenreihe ---------------------------------------------------------
   Im bestehenden Auftritt sind das animierte Zaehler, die ohne das
   Elementor-Skript bei 0 stehen bleiben. Hier stehen die Zielwerte fest. */
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(18,18,18,.14);margin-top:clamp(2.5rem,5vw,4rem)}
@media (max-width:52rem){.zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zahl{padding:2rem 1rem;text-align:center}
.zahl + .zahl{border-left:1px solid rgba(18,18,18,.14)}
@media (max-width:52rem){.zahl:nth-child(odd){border-left:0}}
.zahl b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);color:var(--tinte);line-height:1}
.zahl span{display:block;margin-top:.6rem;font-family:var(--label);font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--grau)}

/* --- Band mit Bildhintergrund (Noten, Programme, Abschluss) -------------- */
.bild-bahn{position:relative;isolation:isolate;overflow:hidden}
.bild-bahn__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bild-bahn--blass::after{content:"";position:absolute;inset:0;background:rgba(247,247,247,.88);z-index:-1}
.bild-bahn--dunkel::after{content:"";position:absolute;inset:0;background:rgba(10,20,24,.62);z-index:-1}
.bild-bahn--dunkel,.bild-bahn--dunkel h2{color:var(--weiss)}
.bild-bahn--dunkel .augenbraue{color:var(--hellblau)}

/* --- Kopfzeile eines Abschnitts: Titel links, Knopf rechts --------------- */
.bahn-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)}
.bahn-kopf h2{max-width:22ch}

/* --- Karten für die vier Niveaus ---------------------------------------- */
/* minmax(0,1fr) statt 1fr: die Mindestbreite von 1fr ist auto, deshalb
   sprengt ein langes Wort wie STUDIENVORBEREITUNG sonst seine Spalte und
   macht damit auch das Foto darueber hoeher als in den Nachbarspalten. */
.karten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;align-items:stretch}
.karten--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:72rem){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:40rem){.karten{grid-template-columns:1fr}}
.karte{background:var(--weiss);box-shadow:var(--schatten);display:flex;flex-direction:column}
.karte__bild{position:relative;aspect-ratio:3/2;overflow:hidden}
/* Das Foto laeuft unten in Weiss aus, wie im bestehenden Auftritt. */
.karte__bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(rgba(255,255,255,0),var(--weiss));pointer-events:none}
.karte__bild img{width:100%;height:100%;object-fit:cover}
.karte__nummer{
  position:absolute;top:1.1rem;left:1.3rem;
  color:var(--weiss);font-size:.72rem;letter-spacing:.22em;font-weight:600;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.karte__text{padding:24px;display:flex;flex-direction:column;gap:1rem;flex:1}
/* 20px statt der allgemeinen 24px: so steht es im Original beim laengsten
   Titel, und nur damit passt STUDIENVORBEREITUNG in eine Zeile. */
.karte__text h3{font-size:1.25rem;margin-bottom:.2rem;hyphens:auto}
.karte__text p{font-size:.92rem;line-height:1.85;flex:1}

/* --- Zwei Spalten: Bild und Text ----------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:60rem){.duo{grid-template-columns:1fr}}
.duo__bild img{width:100%;height:auto}   /* kein Beschnitt, sonst fehlt der Kopf */
.duo__text h2{margin-bottom:1.6rem}

/* --- Hervorgehobenes Zitat ----------------------------------------------- */
.zitat{
  margin:2.2rem 0 0;padding-left:1.4rem;border-left:3px solid var(--petrol);
  font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  line-height:1.5;color:var(--tinte);
}

/* --- Raster für die sechs Stilrichtungen -------------------------------- */
.stile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3vw,2.8rem)}
@media (max-width:66rem){.stile{grid-template-columns:repeat(2,1fr)}}
@media (max-width:42rem){.stile{grid-template-columns:1fr}}
.stil h3{margin-bottom:.7rem}
.stil p{font-size:.92rem;line-height:1.85}
.bild-bahn--dunkel .stil h3{color:var(--weiss)}
.bild-bahn--dunkel .stil p{color:rgba(255,255,255,.82)}

/* --- Programmblöcke ------------------------------------------------------
   Bild und Text im Wechsel, dazu eine Merkmalsliste mit Haken. */
.programm{padding-block:clamp(2.5rem,5vw,4rem)}
.programm + .programm{border-top:1px solid rgba(18,18,18,.1)}
.programm__stufe{font-family:var(--label);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--petrol);margin:.6rem 0 1.2rem}
.programm__bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.merkmale{list-style:none;margin:1.4rem 0 1.8rem;padding:0;display:grid;gap:.7rem}
.merkmale li{position:relative;padding-left:1.8rem;font-size:.94rem;line-height:1.7}
.merkmale li::before{
  content:"";position:absolute;left:0;top:.52em;width:.72rem;height:.38rem;
  border-left:2px solid var(--petrol);border-bottom:2px solid var(--petrol);
  transform:rotate(-45deg);
}

/* --- Videos: laden erst auf Klick, dadurch kein Cookie-Banner ------------ */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
@media (max-width:52rem){.videos{grid-template-columns:1fr}}
.video{position:relative;aspect-ratio:16/9;border:0;padding:0;margin:0;width:100%;cursor:pointer;background:#000;overflow:hidden;display:block}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--takt),opacity .3s var(--takt)}
.video:hover img,.video:focus-visible img{transform:scale(1.03);opacity:.85}
.video__knopf{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.video__knopf span{
  width:4.6rem;height:3.2rem;border-radius:.8rem;background:rgba(0,0,0,.66);
  display:grid;place-items:center;
}
.video__knopf span::after{content:"";border-style:solid;border-width:.6rem 0 .6rem 1rem;border-color:transparent transparent transparent #fff}
.video__hinweis{
  position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  color:rgba(255,255,255,.92);font-size:.76rem;letter-spacing:.04em;
  padding:2.2rem .9rem .8rem;text-align:center;line-height:1.5;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- Kleinigkeiten, die nur an einer Stelle vorkommen ------------------- */
.videos{margin-top:clamp(2.5rem,5vw,4rem)}
.abschluss__text{margin:1.4rem 0 2.4rem}

/* --- Stimmen ------------------------------------------------------------- */
.stimmen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}
@media (max-width:56rem){.stimmen{grid-template-columns:1fr}}
.stimme{background:var(--weiss);box-shadow:var(--schatten);padding:1.8rem;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.stimme img{width:5.2rem;height:5.2rem;border-radius:50%;object-fit:cover}
.stimme__sterne{display:flex;gap:.22rem;margin:0 0 .7rem;line-height:0}
.stimme__sterne svg{width:.95rem;height:.95rem;fill:#E8A317;flex:none}
.stimme blockquote{margin:0 0 .9rem;font-size:.94rem;line-height:1.85}
.stimme__wer{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--tinte)}

/* --- Formular -----------------------------------------------------------
   Gegenstelle ist derselbe Dienst, den der Neubau schon benutzt:
   POST /api/inbox, Felder name, email, telefon, thema, nachricht,
   einwilligung, dazu webseite als Koederfeld und ts/jsok gegen Bots. */
.formular{display:grid;gap:1.1rem;max-width:40rem}
.formular__paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
@media (max-width:40rem){.formular__paar{grid-template-columns:1fr}}
.feld{display:grid;gap:.45rem}
.feld > span{font-family:var(--label);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--tinte)}
.feld input,.feld textarea{
  font-family:var(--lesen);font-size:1rem;color:var(--tinte);
  padding:.85rem 1rem;border:1px solid rgba(18,18,18,.2);border-radius:4px;
  background:var(--weiss);width:100%;
}
.feld textarea{min-height:9rem;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
.formular__einwilligung{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.6}
.formular__einwilligung input{margin-top:.35rem;flex:none;width:1.05rem;height:1.05rem}
/* Köderfeld. display:none statt Verschieben nach links: ein nur verschobenes
   Feld füllt Chrome beim automatischen Ausfüllen mit aus, und dann hält der
   Dienst einen echten Besucher für einen Bot. */
.koeder{display:none}
.formular__meldung{font-size:.92rem;line-height:1.6;margin:0}
.formular__meldung[data-art=gut]{color:#0a7a2f}
.formular__meldung[data-art=fehler]{color:#b00020}

/* Kontaktangaben neben dem Formular */
.kontaktliste{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.9rem}
.kontaktliste a{border-bottom:1px solid transparent;transition:border-color .25s var(--takt)}
.kontaktliste a:hover,.kontaktliste a:focus-visible{border-bottom-color:var(--petrol)}

/* --- Fußbereich --------------------------------------------------------- */
.fuss{background:var(--weiss);padding:clamp(3.5rem,6vw,5.5rem) var(--rand) 2rem;color:var(--grau)}
.fuss__spalten{max-width:var(--breit);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
@media (max-width:60rem){.fuss__spalten{grid-template-columns:1fr;gap:2rem}}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.fuss li{font-size:.9rem}
.fuss__liste li{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte)}
.fuss a:hover,.fuss a:focus-visible{color:var(--petrol)}
.fuss__unten{
  max-width:var(--breit);margin:clamp(2.5rem,5vw,4rem) auto 0;padding-top:1.6rem;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  font-size:.85rem;
}
.fuss__rechte{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}

/* --- Rechtstexte ---------------------------------------------------------
   Der Text steht auf einer weißen Karte über hellem Grund, sonst wirkt eine
   reine Textseite unfertig. Dazu oben Sprungmarken zwischen den beiden
   Teilen, damit man nicht durch das ganze Impressum scrollen muss. */
.recht{max-width:var(--schmal);margin-inline:auto;background:var(--weiss);
  padding:clamp(2rem,5vw,4rem);box-shadow:var(--schatten)}
.recht > h1:first-child{margin-top:0}
.rechtnav{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;
  margin-bottom:clamp(2rem,4vw,3rem)}
.rechtnav a{
  font-family:var(--label);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--petrol);
  padding:.7rem 1.4rem;border:1px solid rgba(35,99,115,.35);border-radius:999px;
  transition:background .25s var(--takt),color .25s var(--takt);
}
.rechtnav a:hover,.rechtnav a:focus-visible{background:var(--petrol);color:var(--weiss)}
.recht__teil{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);margin:0 0 2rem}
.recht__teil + * {margin-top:0}
.recht h2,.recht h3{scroll-margin-top:7rem}
.recht h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin:2.6rem 0 .9rem}
.recht h4{margin:1.8rem 0 .6rem}
.recht h1{scroll-margin-top:7rem}
.recht h1{font-size:clamp(2rem,1.5rem + 1.8vw,2.8rem);margin-bottom:2rem}
.recht p,.recht li{font-size:.95rem}
.recht ul{padding-left:1.2rem;display:grid;gap:.4rem;margin:0 0 1.1em}

/* --- Einblenden beim Scrollen, respektiert die Systemvorgabe ------------- */
.auf{opacity:0;transform:translateY(18px);transition:opacity .7s var(--takt),transform .7s var(--takt)}
.auf.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.auf{opacity:1;transform:none;transition:none}}

/* --- Kontrastdarstellung -------------------------------------------------
   Windows-Kontrastdesign und erzwungene Farben: Bilder bleiben sichtbar,
   weil sie <img> sind, aber Verläufe und halbtransparente Flächen fallen
   weg. Hier die Mindestabsicherung, damit Text lesbar bleibt. */
@media (forced-colors:active){
  .buehne::after,.bild-bahn--dunkel::after,.bild-bahn--blass::after{background:Canvas;opacity:.88}
  .knopf{border:2px solid ButtonText}
  .video__knopf span{background:ButtonFace;border:1px solid ButtonText}
}