/* ===========================================================================
   Aquakadabra — Gestaltungssystem
   Grundlage: docs/design.md, Abschnitte 1 bis 4

   Handgeschrieben und ohne Build-Schritt ausgeliefert. Das ist eine bewusste
   Abweichung vom Taskschnitt, der `vite.config.js` vorsah: D-25 schließt Node
   zur Laufzeit aus, und die Zielumgebung ist STRATO Hosting Plus (D-24). Ein
   Build-Schritt müsste also auf einer anderen Maschine laufen und sein Ergebnis
   mit ausgeliefert werden — für eine Datei Stylesheet und ein paar Zeilen
   JavaScript ist das eine Werkzeugkette, die niemand pflegt. Die
   Cache-Erneuerung löst ein Zeitstempel im Dateinamen-Anhang.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Schriften — lokal, nicht von Google (D-84)

   Verbindlich, damit der Einwilligungsbanner ausgeschaltet bleiben darf: Würden
   die Schriften von fonts.googleapis.com geladen, ginge bei jedem Seitenaufruf
   die IP-Adresse des Besuchers an einen Dritten, und das löst eine
   Einwilligungspflicht aus.

   **Eine Schrift für alles.** Der Entwurf sah Fraunces für Überschriften und
   Figtree für den Text vor. Fraunces ist als Display-Serif mit hohem
   Strichkontrast schnell verspielt — ihre Achse `WONK`, die genau die
   geschwungenen Endungen steuert, stand bereits auf 0, weiter zurücknehmen
   ließ sie sich nicht.

   Mit Inter als Ersatz hätten zwei sehr ähnliche Grotesk-Schriften
   nebeneinandergestanden: Das ist die unglücklichste Konstellation — zwei
   Schriften, die weder zusammengehören noch sich unterscheiden. Deshalb trägt
   Inter jetzt beides. Der Unterschied zwischen Überschrift und Text kommt über
   Größe und Gewicht, und dafür hat sie neun Gewichte.

   60 KB für die ganze Website, als **ein** Variable Font.

   Die Achse `opsz` bleibt ausdrücklich **variabel**: Sie passt den Schnitt an
   die Größe an — enger und feiner bei 80 px, weiter und offener bei 16 px.
   Genau das braucht eine Schrift, die Überschrift und Fließtext zugleich
   trägt. Ausgelöst wird sie durch `font-optical-sizing: auto` weiter unten.
   `font-display: swap` zeigt sofort die Ersatzschrift und tauscht dann —
   niemand sieht auf leeren Text.
--------------------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   Farben und Maße
--------------------------------------------------------------------------- */
:root {
    /* Flächen */
    --grund: #F5F2EC;
    --grund-abgesetzt: #EAE4DA;
    --flaeche: #FFFFFF;
    --bildflaeche: #0B3A4F;
    --chip-grund: #E3EEF0;

    /* Text */
    --tief: #0E2433;
    --sekundaer: #4A5A64;

    /*
       Zwei Petroltöne, und das hat einen Grund.

       `#0F7C86` aus dem Entwurf erreicht auf dem Grund `#F5F2EC` nur 4,42:1.
       Für Text sind 4,5:1 gefordert — es fehlt knapp. Als *Fläche* ist die
       Farbe einwandfrei: Weiß darauf erreicht 4,94:1.

       Deshalb bleibt `#0F7C86` die Flächenfarbe für Schaltflächen, und für
       Text auf hellem Grund gibt es `--akzent-text` mit 5,07:1. Der
       Unterschied ist mit bloßem Auge kaum zu sehen und macht Links lesbar.

       docs/design.md warnt an dieser Stelle vor dem falschen Paar: Dort steht,
       `#4A5A64` auf `#F5F2EC` erreiche „knapp 4,5:1". Nachgerechnet sind es
       6,40:1 — unbedenklich. Das Problem liegt beim Akzent.
    */
    --akzent: #0F7C86;
    --akzent-text: #0D727B;
    --akzent-dunkel: #0B5F67;

    /*
       Zweiter Akzent aus Entwurf A: ein helles Türkis für Schaltflächen auf
       dunklem Grund. Es trägt **dunklen** Text (9,46:1) — weißer Text darauf
       erreicht nur 1,69:1 und ist unbrauchbar. Wer hier später Weiß einsetzt,
       macht die Schaltfläche unlesbar.
    */
    --signal: #15E0C0;
    --signal-hell: #3DEFD2;
    --signal-text: #04262B;

    /* Tiefe für den Hero — dunkler als --tief, damit ein Verlauf Luft hat. */
    --tiefe: #0B2333;
    --tiefe-text: #EAF3F4;
    --tiefe-sekundaer: #C6DDE2;

    /*
       „Freie Plätze". `#0B7F63` aus dem Entwurf erreicht auf dem Grund nur
       4,44:1 — knapp zu wenig für Text. Eine Spur dunkler genügt.
    */
    --frei: #0A7D62;

    --linie: #DDD6CB;
    --warnung: #8A3B1F;
    --warnung-grund: #FBF1ED;

    /* Footer */
    --footer-grund: #0E2433;
    --footer-text: #D5E2E8;
    --footer-linie: #28445A;

    /* Platzhalter — dürfen nicht live gehen (design.md, Abschnitt 8) */
    --platzhalter-rand: #B08A3E;
    --platzhalter-grund: #FBF6EA;
    --platzhalter-text: #6B4E12;

    /* Maße */
    --seitenbreite: 1440px;
    --seitenpadding: 80px;
    --kopfhoehe: 84px;

    /* Größer als im Entwurf (24/14/12): Entwurf A nimmt der Seite damit die
       Strenge. Die Pille ist jetzt vollrund statt 26 px. */
    --radius-gross: 28px;
    --radius-karte: 20px;
    --radius-klein: 16px;
    --radius-pille: 999px;

    /*
       Schatten statt Rändern. Der 1-px-Rahmen aus dem Entwurf ist das, was am
       stärksten nach 2015 aussieht; ein weicher Schatten trägt dieselbe
       Trennung, ohne eine Linie zu ziehen.
    */
    --schatten-karte: 0 2px 10px rgb(11 35 51 / .05);
    --schatten-hoch: 0 18px 44px rgb(11 35 51 / .16), 0 2px 6px rgb(11 35 51 / .06);

    --schrift-ueberschrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------------------
   Grundlagen
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--tief);
    font-family: var(--schrift-text);
    font-size: 17px;
    line-height: 1.6;
    /* Schaltet die Achse `opsz` ein: Der Browser wählt den Schnitt passend
       zur Schriftgröße. Ohne diese Zeile bleibt sie ungenutzt und alles
       erscheint im Schnitt für 14 px. */
    font-optical-sizing: auto;
    /* Keine waagerechte Scrollleiste, auch wenn ein Element zu breit gerät. */
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
    font-family: var(--schrift-ueberschrift);
    /*
       700 statt 500: Eine Grotesk braucht mehr Gewicht als eine Serif, um als
       Überschrift zu tragen. Bei einer Serif übernehmen die Serifen einen Teil
       dieser Arbeit — hier gibt es keine.
    */
    font-weight: 700;
    line-height: 1.08;
    margin: 0 0 16px;
}

/*
   Negativer Buchstabenabstand, und zwar größer werdend mit der Schriftgröße:
   Inter ist für Fließtextgrößen gezeichnet und läuft in 80 px zu weit. Ohne
   diese Werte sieht eine große Überschrift auseinandergezogen aus.
*/
h1 { font-size: clamp(38px, 6vw, 80px); letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.028em; }
h3 { font-size: clamp(21px, 2.4vw, 30px); letter-spacing: -0.02em; }

p { margin: 0 0 18px; }

a { color: var(--akzent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--akzent-dunkel); }

/*
   Sichtbarer Fokus, überall. Wer mit der Tastatur bedient, muss sehen, wo er
   ist — und `:focus-visible` zeigt den Rahmen nur dann, nicht bei jedem Klick.
*/
:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Nur für Screenreader: sichtbar, sobald er den Fokus bekommt. */
.nur-vorlesen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.nur-vorlesen:focus {
    position: fixed;
    top: 12px; left: 12px;
    width: auto; height: auto;
    padding: 12px 18px;
    margin: 0;
    clip-path: none;
    background: var(--flaeche);
    border: 2px solid var(--akzent);
    border-radius: var(--radius-klein);
    z-index: 100;
}

/* ---------------------------------------------------------------------------
   Raster
--------------------------------------------------------------------------- */
.huelle {
    width: 100%;
    max-width: var(--seitenbreite);
    margin: 0 auto;
    padding-inline: var(--seitenpadding);
}

@media (max-width: 900px) {
    :root { --seitenpadding: 24px; }
}

@media (max-width: 480px) {
    :root { --seitenpadding: 18px; }
    body { font-size: 16px; }
}

/*
   Abstand zwischen den Blöcken, auf Wunsch der Projektleitung auf ein Drittel
   gesetzt (D-109): aus clamp(40px, 7vw, 88px) wird clamp(13px, 2.3vw, 29px).

   Die Form bleibt: Der Abstand wächst weiterhin mit der Fensterbreite, nur
   eben in einem Drittel der Schrittweite. Ein fester Wert sähe auf dem
   Telefon zu luftig und auf einem breiten Schirm zu eng aus.
*/
.abschnitt { padding-block: clamp(13px, 2.3vw, 29px); }
.abschnitt--abgesetzt { background: var(--grund-abgesetzt); }

/* ---------------------------------------------------------------------------
   Kopfbereich
--------------------------------------------------------------------------- */
.kopf {
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 50;
}

.kopf__inhalt {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--kopfhoehe);
}

/*
   Die Marke ist ein Bild, kein Schriftzug: Das Logo trägt Taucherfigur,
   Sternenfeld und zwei Farben — das lässt sich mit Schrift nicht nachbauen.

   Die Höhe steht im Stylesheet und nicht nur im `height`-Attribut, damit sie
   sich auf schmalen Geräten verkleinern lässt. `width: auto` hält dabei das
   Seitenverhältnis.
*/
.kopf__marke {
    display: inline-flex;
    align-items: center;
    flex: none;
    /* Der Link soll nicht höher sein als sein Inhalt — sonst sitzt der
       Fokusrahmen weiter außen als erwartet. */
    line-height: 0;
}

.kopf__marke img {
    height: 56px;
    width: auto;
}

@media (max-width: 560px) {
    .kopf__marke img { height: 42px; }
}

.navigation { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }

.navigation__punkt {
    display: inline-flex;
    align-items: center;
    /* 44 px Mindesthöhe — die Mindestgröße für Touch-Ziele. */
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-klein);
    color: var(--tief);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

.navigation__punkt:hover { background: var(--flaeche); color: var(--akzent-text); }

.navigation__punkt[aria-current="page"] {
    color: var(--akzent-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--akzent);
    border-radius: 0;
}

/* Telefon-Pille oben rechts, dunkel (design.md, Abschnitt 3). */
.telefon-pille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-pille);
    background: var(--tief);
    color: var(--flaeche);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    flex: none;
}

.telefon-pille:hover { background: var(--akzent-dunkel); color: var(--flaeche); }
.telefon-pille svg { flex: none; }

/* Umschalter für das Handy-Menü — unsichtbar am Schreibtisch. */
.menue-schalter {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    margin-left: auto;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--tief);
    cursor: pointer;
}

@media (max-width: 1080px) {
    .menue-schalter { display: inline-flex; }

    .navigation {
        display: none;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        flex-direction: column;
        gap: 0;
        padding: 12px var(--seitenpadding) 20px;
        background: var(--grund);
        border-bottom: 1px solid var(--linie);
    }

    .navigation[data-offen="ja"] { display: flex; }

    .navigation__punkt {
        min-height: 52px;
        border-radius: 0;
        border-bottom: 1px solid var(--linie);
        font-size: 18px;
    }

    .kopf__inhalt { position: relative; }
    .telefon-pille--kopf { display: none; }
    .navigation .telefon-pille { margin-top: 14px; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Bausteine
--------------------------------------------------------------------------- */
.karte {
    background: var(--flaeche);
    /* Kein Rand mehr — siehe --schatten-karte. */
    border-radius: var(--radius-karte);
    padding: 24px;
    box-shadow: var(--schatten-karte);
}

/* Karten, die aus dem Hero herausragen und deshalb mehr Tiefe brauchen. */
.karte--hoch { box-shadow: var(--schatten-hoch); }

.chip {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--radius-pille);
    background: var(--chip-grund);
    color: var(--bildflaeche);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--radius-pille);
    background: var(--akzent);
    color: var(--flaeche);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.knopf:hover { background: var(--akzent-dunkel); color: var(--flaeche); }
.knopf--gross { min-height: 56px; padding: 0 32px; font-size: 18px; }

/*
   Der Hauptknopf im Hero: helles Türkis mit dunklem Text. Auf dem dunklen
   Bild ist das die einzige Farbe, die nicht untergeht.
*/
.knopf--signal { background: var(--signal); color: var(--signal-text); font-weight: 700; }
.knopf--signal:hover { background: var(--signal-hell); color: var(--signal-text); }

/* Zweitknopf auf dunklem Grund: nur eine Kontur. */
.knopf--kontur {
    background: transparent;
    color: var(--tiefe-text);
    border: 1.5px solid rgb(255 255 255 / .35);
}
.knopf--kontur:hover { background: rgb(255 255 255 / .12); color: #FFFFFF; }

.knopf--still {
    background: transparent;
    color: var(--tief);
    border: 1px solid var(--tief);
}

.knopf--still:hover { background: var(--tief); color: var(--flaeche); }

/* Kennzahlkachel: Label klein, Wert groß in der Überschriftenschrift. */
.kachel { background: var(--flaeche); border-radius: var(--radius-karte);
          padding: 24px 26px; box-shadow: var(--schatten-karte); }
.kachel--hoch { box-shadow: var(--schatten-hoch); }
.kachel__label { margin: 0 0 6px; font-size: 14px; color: var(--sekundaer); }
.kachel__wert { margin: 0; font-family: var(--schrift-ueberschrift); font-size: 40px;
                font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.kachel__zusatz { margin: 4px 0 0; font-size: 15px; color: var(--sekundaer); }

/* Steckbriefzeile: Label links, Wert rechts, Linie darunter. */
.steckbrief { margin: 0; }
.steckbrief__zeile { display: flex; gap: 16px; justify-content: space-between;
                     padding: 14px 0; border-bottom: 1px solid var(--linie); }
.steckbrief__zeile:last-child { border-bottom: 0; }
.steckbrief dt { color: var(--sekundaer); font-size: 15px; flex: none; }
.steckbrief dd { margin: 0; text-align: right; font-weight: 500; }

/* Platzhalter — ockerfarben, damit sie nicht versehentlich live gehen. */
.platzhalter {
    border: 2px dashed var(--platzhalter-rand);
    background: var(--platzhalter-grund);
    color: var(--platzhalter-text);
    border-radius: var(--radius-klein);
    padding: 16px 20px;
    font-size: 15px;
}

.platzhalter::before { content: "Platzhalter — "; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Hero (Entwurf A)

   Ein bildschirmfüllendes Foto trägt den Seitenkopf, der Verlauf liegt darüber
   und macht die Schrift lesbar. Der Kopfbereich sitzt mit darin — deshalb
   braucht er zwei Zustände, siehe `.kopf--auf-bild`.

   Die Höhe ist bewusst nicht 100vh: Auf dem Telefon rechnet das die
   Adressleiste mit und springt beim Scrollen, und ein Hero, der genau den
   Bildschirm füllt, sieht aus wie das Ende der Seite.
--------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    color: var(--tiefe-text);
    background: var(--tiefe);
    display: flex;
    flex-direction: column;
    min-height: min(86vh, 780px);
}

/* Für Unterseiten: derselbe Aufbau, nur flacher. */
.hero--flach { min-height: min(52vh, 460px); }

/*
   Das Bild als <img> und nicht als CSS-Hintergrund: So wählt der Browser über
   `srcset` selbst die passende Größe, und das Bild bekommt einen
   Alternativtext. Ein Hintergrundbild kann beides nicht.
*/
.hero__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/*
   Zwei Verläufe übereinander: von links, damit die Schrift trägt — von oben
   und unten, damit Navigation und herausragende Kacheln nicht auf einer harten
   Kante sitzen.

   Bewusst zurückhaltend: Ein Verlauf, der das Bild zudeckt, macht das Foto zur
   Dekoration eines Farbfelds.
*/
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg, rgb(7 26 38 / .72) 0%, rgb(7 26 38 / .42) 38%,
                        rgb(7 26 38 / .10) 66%, transparent 88%),
        linear-gradient(to bottom, rgb(7 26 38 / .62) 0%, rgb(7 26 38 / .18) 16%,
                        transparent 34%, transparent 64%, rgb(7 26 38 / .38) 100%);
    pointer-events: none;
}

/*
   `:not(.hero__bild)` ist hier notwendig, nicht kosmetisch: Ohne die Ausnahme
   überschreibt diese Regel das `position: absolute` des Bildes — gleiche
   Spezifität, spätere Regel gewinnt. Das Bild fällt dann in den Fluss und wird
   als Flex-Element auf einen Streifen gestaucht.
*/
.hero > :not(.hero__bild) { position: relative; z-index: 2; }

.hero__inhalt {
    margin-top: auto;
    padding-block: clamp(40px, 7vw, 96px) clamp(90px, 12vw, 150px);
}

.hero__inhalt h1 {
    color: #FFFFFF;
    margin: 20px 0 18px;
    /* Ein weicher Schatten statt eines stärkeren Verlaufs: So bleibt das Bild
       sichtbar und die Schrift trotzdem lesbar, auch über einer hellen Stelle. */
    text-shadow: 0 2px 24px rgb(7 26 38 / .5);
}

.hero__inhalt p {
    max-width: 54ch;
    font-size: clamp(17px, 2vw, 21px);
    color: var(--tiefe-sekundaer);
    text-shadow: 0 1px 12px rgb(7 26 38 / .6);
}

.hero .chip { background: rgb(255 255 255 / .16); color: #BFF3EC; }

.hero__knoepfe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/*
   Kacheln, die in den Hero hineinragen. Das verzahnt Bild und Inhalt, statt
   sie mit einer Kante zu trennen.
*/
.kachelreihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 18px;
}

.kachelreihe--ueberlappend {
    margin-top: clamp(-104px, -8vw, -60px);
    position: relative;
    z-index: 3;
}

/* ---------------------------------------------------------------------------
   Kopfbereich über dem Hero

   Derselbe Kopfbereich, zwei Zustände: auf hellem Grund (Unterseiten) und über
   dem Bild (Startseite). Der zweite Zustand hat keinen eigenen Hintergrund,
   keine Linie und helle Schrift.
--------------------------------------------------------------------------- */
.kopf--auf-bild {
    background: transparent;
    border-bottom: 0;
}

/*
   Der Kopf muss im Hero über dessen Inhalt liegen — sonst ist das
   aufgeklappte Handy-Menü sichtbar, aber nicht bedienbar.

   Warum: `.hero > :not(.hero__bild)` gibt allen direkten Kindern des Hero
   `position: relative; z-index: 2`. Das trifft den Kopf **und**
   `.hero__inhalt`. Bei gleichem Stapelwert entscheidet die
   Dokumentreihenfolge, und `.hero__inhalt` steht später. Das Menü klappt per
   `top: 100%` genau in dessen Bereich auf und wird dort verdeckt.

   Geprüft am 28.09.2026 bei 390 px Breite: Ohne diese Zeile sind fünf von
   sechs Menüeinträgen von `.hero__inhalt`, `h1` oder `p` verdeckt — gemessen
   mit `document.elementFromPoint()` auf der Mitte jedes Eintrags.

   Ein `position: static` an `.kopf--auf-bild` half **nicht**, obwohl es
   plausibel aussieht: `.hero > :not(.hero__bild)` hat die höhere Spezifität
   (0,2,0 gegen 0,1,0) und setzt `relative` durch. Die Zeile stand hier und
   war wirkungslos.

   Derselbe Wert wie beim normalen Kopf — dort trägt ihn `.kopf` selbst.
*/
.hero > .kopf { z-index: 50; }

.kopf--auf-bild .navigation__punkt {
    color: #FFFFFF;
    font-weight: 600;
    text-shadow: 0 1px 10px rgb(7 26 38 / .75), 0 0 2px rgb(7 26 38 / .5);
}

.kopf--auf-bild .navigation__punkt:hover {
    background: rgb(255 255 255 / .12);
    color: #FFFFFF;
}

.kopf--auf-bild .navigation__punkt[aria-current="page"] {
    color: var(--signal);
    box-shadow: inset 0 -2px 0 var(--signal);
}

/* Die Telefon-Pille wird im Hero zur Signalfarbe — sie ist die wichtigste
   Handlung auf der Seite und soll aus dem Bild herausstechen. */
.kopf--auf-bild .telefon-pille {
    background: var(--signal);
    color: var(--signal-text);
    font-weight: 700;
}
.kopf--auf-bild .telefon-pille:hover { background: var(--signal-hell); color: var(--signal-text); }

/* Das Logo ist für helle Flächen gezeichnet und ginge auf dem Foto unter. */
.kopf--auf-bild .kopf__marke {
    background: rgb(245 242 236 / .95);
    padding: 8px 14px;
    border-radius: var(--radius-klein);
    box-shadow: 0 2px 14px rgb(7 26 38 / .25);
}

.kopf--auf-bild .menue-schalter {
    background: rgb(245 242 236 / .95);
    border-color: transparent;
}

/* ---------------------------------------------------------------------------
   Terminzeile
--------------------------------------------------------------------------- */
.termin {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--flaeche);
    border-radius: var(--radius-karte);
    padding: 20px 24px;
    margin-bottom: 12px;
    box-shadow: var(--schatten-karte);
}

.termin__datum {
    font-family: var(--schrift-ueberschrift);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    min-width: 150px;
}

.termin__ort { color: var(--sekundaer); }

/* Platzname als Link zur Tauchplatzseite (D-144): Farbe der Zeile, erst beim
   Überfahren als Link zu erkennen — die Zeile soll ruhig bleiben, der Knopf
   rechts ist die Hauptaktion. Unterstrichen, damit er auch ohne Hover als
   Link lesbar ist (Kontrast allein reicht dafür nicht). */
.termin__ortlink {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--linie);
    text-underline-offset: 3px;
}
.termin__ortlink:hover { color: var(--akzent-text); text-decoration-color: currentColor; }
.termin__frei { color: var(--frei); font-weight: 700; margin-left: auto; }
.termin__voll { color: var(--warnung); font-weight: 700; margin-left: auto; }

/* ---------------------------------------------------------------------------
   Fußzeile

   OHNE Newsletter-Feld (D-83). Die Farben `--footer-eingabe` aus dem Entwurf
   sind deshalb nicht übernommen — sie hätten keinen Gegenstand mehr.
--------------------------------------------------------------------------- */
/*
   Die Fußzeile sitzt am Seitenende, auch wenn der Inhalt kürzer ist als der
   Bildschirm.

   Ohne das schien unter der dunklen Fußzeile der beige Untergrund des Körpers
   durch — auf kurzen Seiten wie „Link nicht mehr gültig" ein Streifen, der wie
   ein Fehler aussieht. `min-height` allein genügt nicht: Der Körper muss die
   übrige Höhe auch verteilen, und das tut der Inhaltsbereich mit `flex: 1`.

   `100dvh` vor `100vh`: Auf dem Telefon rechnet `vh` die ein- und
   ausfahrende Browserleiste nicht mit, `dvh` schon. Die Zeile davor ist der
   Rückfall für ältere Browser.
*/
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body > main { flex: 1 0 auto; }

.fuss {
    background: var(--footer-grund);
    color: var(--footer-text);
    padding-block: 56px 32px;
    margin-top: 80px;
    flex: none;
}

/*
   Das PADI-Zeichen in der Fußzeile.

   Ein **Bild von der eigenen Platte**, kein eingebundenes Abzeichen von PADI:
   D-84 gilt weiter. Der Verweis führt erst beim Klick zu padi.com.

   Eigener Hintergrund und eigene Rundung, weil das Zeichen ein geschlossenes
   Rechteck in einem anderen Blau ist — ohne Fassung klebte es als Fremdkörper
   auf dem Navy der Fußzeile.
*/
.fuss__padi { display: inline-block; margin-top: 18px; border-radius: 10px; line-height: 0; }
.fuss__padi img { display: block; width: 104px; height: auto; border-radius: 10px; }
.fuss__padi:focus-visible { outline: 2px solid var(--flaeche); outline-offset: 3px; }

.fuss a { color: var(--footer-text); }
.fuss a:hover { color: var(--flaeche); }

.fuss__spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px 40px;
}

.fuss__titel {
    margin: 0 0 14px;
    font-family: var(--schrift-ueberschrift);
    font-size: 19px;
    font-weight: 600;
    color: var(--flaeche);
}

.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: 4px; }

.fuss__liste a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    text-decoration: none;
}

.fuss__liste a:hover { text-decoration: underline; }

.fuss__schluss {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--footer-linie);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 15px;
}

/* ---------------------------------------------------------------------------
   Cookie-Banner — vorbereitet, abgeschaltet (D-84)

   Die Gestaltung steht bereit, damit das Einschalten später kein Umbau ist.
   Ob er erscheint, entscheidet die Konfiguration, nicht dieses Stylesheet.
--------------------------------------------------------------------------- */
.einwilligung {
    position: fixed;
    inset: auto 16px 16px;
    max-width: 640px;
    margin-inline: auto;
    padding: 24px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
    box-shadow: 0 8px 32px rgb(14 36 51 / 0.16);
    z-index: 90;
}

.einwilligung__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }


/* ===========================================================================
   I-14 — Tauchplätze und Termine

   Nur Ergänzungen. Keine der vorhandenen Regeln ist geändert: Was hier steht,
   sind neue Klassen, die es vor I-14 nicht gab. Wer den Block entfernt,
   bekommt unformatierte Seiten — aber kein verändertes Bestandslayout.
=========================================================================== */

/* --- Seitenkopf ohne Hero -------------------------------------------------
   Unterseiten bekommen keinen Hero: Ein bildschirmfüllendes Foto vor jeder
   Liste kostet den Leser bei jedem Aufruf einen Bildschirm Scrollen, und die
   Tauchplatzseite hat ihr eigenes Titelbild weiter unten.
--------------------------------------------------------------------------- */
.seitenkopf { padding-block: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 36px); }
.seitenkopf h1 { margin: 14px 0 0; }
.seitenkopf .chip + .chip { margin-left: 8px; }


.vorspann {
    margin: 16px 0 0;
    max-width: 62ch;
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--sekundaer);
    line-height: 1.6;
}

.abschnitt__titel { margin: 0 0 26px; }

/* Ein zweiter Chip, der nicht um Aufmerksamkeit mit dem ersten streitet —
   für den Status eines Platzes neben der Region. */
.chip--still { background: var(--grund-abgesetzt); color: var(--tief); }

/* --- Brotkrumenpfad ------------------------------------------------------- */
.brotkrumen {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding-block: 22px 0;
    font-size: 14px;
    color: var(--sekundaer);
}
.brotkrumen a { color: var(--sekundaer); text-decoration: none; }
.brotkrumen a:hover { color: var(--akzent-text); text-decoration: underline; }
.brotkrumen [aria-current="page"] { color: var(--tief); font-weight: 600; }

/* Im Hero: heller Text, und ein Schatten wie bei Titel und Vorspann, damit
   der Pfad auch über einer hellen Stelle des Fotos lesbar bleibt. */
.brotkrumen--auf-bild { padding-block: 0 0; color: var(--tiefe-sekundaer);
                        text-shadow: 0 1px 10px rgb(7 26 38 / .7); }
.brotkrumen--auf-bild a { color: var(--tiefe-sekundaer); }
.brotkrumen--auf-bild a:hover { color: #FFFFFF; }
.brotkrumen--auf-bild [aria-current="page"] { color: #FFFFFF; }

/* --- Kurs- und Leistungskacheln (D-105) ------------------------------------
   Eigenes Gitter statt `.platzgitter`: Diese Kacheln tragen kein Bild, also
   auch kein festes Seitenverhältnis. Sie werden so hoch wie ihr Text und
   richten sich über `align-items: stretch` des Gitters aneinander aus.
--------------------------------------------------------------------------- */
.kursgitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.kurskarte {
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-karte);
    padding: 24px 26px;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

a.kurskarte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); color: inherit; }
a.kurskarte:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

/* Ohne eigene Seite: keine Erhebung, kein Schweben — die Kachel ist kein Link. */
.kurskarte--ohne-seite { box-shadow: none; border: 1px solid var(--linie); }

.kurskarte__titel {
    margin: 0 0 8px;
    font-family: var(--schrift-ueberschrift);
    font-size: 21px;
    line-height: 1.25;
}

.kurskarte__text { margin: 0 0 16px; color: var(--sekundaer); font-size: 16px; }

/* `margin-top:auto` schiebt die Zeile nach unten, damit sie bei
   unterschiedlich langen Texten auf einer Linie steht. */
.kurskarte__mehr { margin-top: auto; font-weight: 600; color: var(--akzent); }

/*
   Mehrere Wege aus einer Kachel heraus (D-131).

   `margin-top: auto` schiebt sie wie `.kurskarte__mehr` ans untere Ende, damit
   die Kacheln einer Reihe trotz unterschiedlich langer Texte auf gleicher Höhe
   enden.

   Untereinander und nicht nebeneinander: Zwei Wege nebeneinander lesen sich
   wie eine Wahl zwischen gleichrangigen Dingen. Hier ist der erste der
   eigentliche, der zweite die Abkürzung für alle, die schon wissen, worum es
   geht.
*/
.kurskarte__wege { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

.kurskarte__wege a {
    font-weight: 600;
    color: var(--akzent);
    text-decoration: none;
}

.kurskarte__wege a:hover { text-decoration: underline; }

/*
   Das Foto oben in der Kachel (D-139) — dasselbe Kopfbild wie auf der Seite,
   zu der die Kachel führt.

   Die negativen Ränder heben den Innenabstand der Karte (`padding: 24px 26px`)
   auf, damit das Bild bündig mit der Kante liegt; ändert sich der Abstand
   dort, folgen die Werte hier. `aspect-ratio` statt fester Höhe: So bleibt
   das Verhältnis auf jeder Spaltenbreite 3 : 2, und `cover` schneidet mit dem
   Ausschnitt aus dem Backend (`object-position` am Element). Kacheln ohne Bild
   enthalten das Element nicht und rendern wie vor D-139.

   `max-width: none` ist notwendig: Die Grundregel `img { max-width: 100% }`
   (oben) kappte die Breite sonst auf den Inhaltsbereich — das Bild rückte mit
   dem negativen Rand nach links und ließ rechts 52 px Karte frei.
*/
.kurskarte__bild {
    display: block;
    width: calc(100% + 52px);
    max-width: none;
    margin: -24px -26px 18px;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-karte) var(--radius-karte) 0 0;
}

/* --- Preistabelle (Verleih) ------------------------------------------------
   Der Rahmen rollt waagerecht, statt das Layout zu sprengen: Vier Spalten
   passen auf einem Telefon nicht nebeneinander, und eine Tabelle
   umzubrechen macht Preise unlesbar.

   `-webkit-overflow-scrolling` sorgt auf iOS für den gewohnten Schwung,
   `tabindex="0"` am Rahmen wäre nötig, damit auch die Tastatur rollen kann —
   das steht in der Vorlage.
--------------------------------------------------------------------------- */
.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.preistabelle {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 16px;
}

.preistabelle caption { text-align: left; }

.preistabelle th, .preistabelle td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

.preistabelle thead th {
    font-family: var(--schrift-ueberschrift);
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    border-bottom-width: 2px;
}

.preistabelle thead th:first-child { text-align: left; }

/* Die Position steht links, die Preise rechtsbündig — so stehen Einer,
   Zehner und Hunderter untereinander und lassen sich vergleichen. */
.preistabelle tbody th {
    text-align: left;
    font-weight: 500;
    padding-right: 24px;
}

.preistabelle tbody td {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.preistabelle tbody tr:last-child th,
.preistabelle tbody tr:last-child td { border-bottom: 0; }

/* Der Zusatz erklärt die Position, ohne sie zu überschreiben. */
.preistabelle__zusatz {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--sekundaer);
    white-space: normal;
}

/* Die beiden Pakete — im Original rot hervorgehoben. Hier über Gewicht und
   Fläche statt über Farbe: Rot auf beigem Grund erreicht den Kontrastwert
   nicht, und eine Hervorhebung allein durch Farbe sieht nicht jeder. */
.preistabelle__bund { background: var(--grund); }
.preistabelle__bund th, .preistabelle__bund td { font-weight: 700; }

/* --- Tauchplatzkarten ----------------------------------------------------- */
.platzgitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}

.platzkarte {
    display: block;
    background: var(--flaeche);
    border-radius: var(--radius-karte);
    overflow: hidden;
    box-shadow: var(--schatten-karte);
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.platzkarte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); color: inherit; }
/* Der Fokusring gehört auf die ganze Karte, nicht auf den Text darin: Die
   ganze Karte ist der Link. */
.platzkarte:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.platzkarte__bild { position: relative; aspect-ratio: 4 / 3; background: var(--grund-abgesetzt); }
.platzkarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.platzkarte__leer { width: 100%; height: 100%; }

.platzkarte__status {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 13px;
    border-radius: var(--radius-pille);
    background: var(--flaeche);
    color: var(--tief);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--schatten-karte);
}

.platzkarte__text { padding: 20px 22px 24px; }
.platzkarte__region { margin: 0 0 4px; font-size: 13px; color: var(--sekundaer);
                      text-transform: uppercase; letter-spacing: .06em; }
.platzkarte__name { margin: 0 0 8px; font-size: 23px; letter-spacing: -0.02em; }
.platzkarte__teaser { margin: 0; color: var(--sekundaer); font-size: 15px; line-height: 1.55; }

/* --- Kachel mit Fließtext statt Zahl -------------------------------------- */
.kachel--text { display: flex; flex-direction: column; justify-content: center; }
.kachel__flies { margin: 0; font-size: 16px; line-height: 1.5; }

/* --- Zweispalter: Beschreibung und Steckbrief ----------------------------- */
.zweispalter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.zweispalter__breit { min-width: 0; }

/* Der Steckbrief läuft beim Scrollen mit: Er ist die Angabe, gegen die man
   die Beschreibung liest. `--kopfhoehe` hält ihn unter dem Kopfbereich. */
.zweispalter__schmal { position: sticky; top: calc(var(--kopfhoehe) + 20px); }

@media (max-width: 900px) {
    .zweispalter { grid-template-columns: minmax(0, 1fr); }
    .zweispalter__schmal { position: static; }
}

.karte__titel { margin: 0 0 6px; font-size: 21px; }
.karte__fussnote { margin: 16px 0 0; font-size: 14px; color: var(--sekundaer); line-height: 1.5; }

.merkmal { color: var(--sekundaer); }
.merkmal strong { color: var(--tief); }
.flies { max-width: 68ch; line-height: 1.7; }

/*
   Was Markdown im Fließtext erzeugt (D-102).

   Ohne diese Regeln griffen die Vorgaben des Browsers: Überschriften mit
   eigenen Abständen, Listen mit fremder Einrückung. Beides fiele aus dem
   übrigen Satz heraus.

   Die Überschriften beginnen bei H3 — H1 trägt der Platzname im Kopfbild,
   H2 die Abschnitte der Seite.
*/
.flies > :first-child { margin-top: 0; }
.flies > :last-child { margin-bottom: 0; }
.flies p { margin: 0 0 1em; }
.flies h3, .flies h4, .flies h5, .flies h6 {
    font-family: var(--schrift-ueberschrift);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 1.8em 0 0.5em;
}
.flies h3 { font-size: 21px; }
.flies h4 { font-size: 18px; }
.flies h5, .flies h6 { font-size: 16px; }
.flies ul, .flies ol { margin: 0 0 1em; padding-left: 1.3em; }
.flies li + li { margin-top: 0.3em; }
.flies strong { font-weight: 600; }
.flies a { color: var(--akzent); }
.flies blockquote {
    margin: 0 0 1em; padding: 2px 0 2px 16px;
    border-left: 3px solid var(--linie); color: var(--sekundaer);
}
.flies code {
    font-size: 0.92em; padding: 1px 5px; border-radius: 5px;
    background: var(--grund); border: 1px solid var(--linie);
}
.flies hr { border: 0; border-top: 1px solid var(--linie); margin: 1.8em 0; }

/*
   `Str::markdown()` nutzt den GitHub-Wandler: Tabellen, Durchstreichen und
   automatische Verweise sind mit freigeschaltet. Ohne Regeln dafür risse eine
   Tabelle die schmale Textspalte auf — deshalb rollt sie waagerecht, statt
   das Layout zu sprengen.
*/
.flies del { color: var(--sekundaer); }
.flies table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 15px; }
.flies th, .flies td { padding: 8px 10px; border-bottom: 1px solid var(--linie); text-align: left; }
.flies th { font-weight: 600; }
.flies table { display: block; overflow-x: auto; }

/* --- Galerie --------------------------------------------------------------- */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 28px;
}
.galerie__bild { margin: 0; border-radius: var(--radius-klein); overflow: hidden; aspect-ratio: 4 / 3; }
.galerie__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Terminzeile: die Teile, die mit I-14 dazugekommen sind ---------------- */
.termin__mitte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.termin__zeit { font-size: 15px; color: var(--sekundaer); }

.termin__status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-left: auto;
    text-align: right;
}
/* Der Hinweis „Anfrage als Selbstfahrer weiterhin möglich" (D-37). Er steht
   klein unter dem Status, aber er steht da — ohne ihn liest sich
   „Mitfahrplätze belegt" wie eine Absage. */
.termin__hinweis { font-size: 14px; color: var(--sekundaer); max-width: 30ch; }

@media (max-width: 640px) {
    .termin__status { align-items: flex-start; text-align: left; margin-left: 0; }
    .termin__hinweis { max-width: none; }
    .termin__datum { min-width: 0; }
}


/* ===========================================================================
   I-15 — Öffentliche Formulare

   Nur Ergänzungen; keine vorhandene Regel ist geändert. Die Formularelemente
   des Backends bleiben unberührt — sie stehen in dessen eigenem <style>-Block
   und heißen dort `.feld`. Hier `.feld-o` („öffentlich"), damit sich die beiden
   nicht in die Quere kommen, falls je beide Stylesheets auf einer Seite landen.
=========================================================================== */

.feld-o { margin-bottom: 20px; }
.feld-o label,
.feld-o__label { display: block; margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.feld-o__hinweis { margin: 6px 0 0; font-size: 14px; color: var(--sekundaer); line-height: 1.5; }

.feld-o input[type="text"], .feld-o input[type="email"], .feld-o input[type="tel"],
.feld-o input[type="number"], .feld-o textarea, .feld-o select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    font: inherit;
    color: inherit;
}
.feld-o textarea { resize: vertical; min-height: 110px; }
.feld-o :focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; }

/* Zwei Felder nebeneinander, auf schmalen Geräten untereinander. */
.feldpaar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }

/*
   Das Sternchen trägt seine Bedeutung nicht selbst — deshalb steht es nie
   allein: Im Formular ist jedes Pflichtfeld zusätzlich mit `required`
   ausgezeichnet, worauf der Screenreader anspringt.
*/
.pflicht { color: var(--warnung); font-weight: 700; }

/* Auswahl mit Text daneben — Kästchen und Beschriftung als eine Fläche, damit
   auch der Text anklickbar ist. */
.wahl {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}
.wahl input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.wahl:has(input:disabled) { color: var(--sekundaer); cursor: not-allowed; }
.wahl__zusatz { color: var(--warnung); font-weight: 600; }

.meldung-gut, .meldung-fehler {
    padding: 14px 18px;
    border-radius: var(--radius-klein);
    margin-bottom: 24px;
    line-height: 1.55;
}
.meldung-gut { background: #EAF3EE; border-left: 3px solid var(--frei); color: var(--frei); }
.meldung-fehler { background: var(--warnung-grund); border-left: 3px solid var(--warnung);
                  color: var(--warnung); }
.meldung-gut p, .meldung-fehler p { margin: 0 0 6px; }
.meldung-fehler ul { margin: 0; padding-left: 20px; }

.knopfzeile-oeffentlich { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Nummerierter Ablauf auf der Bestätigungsseite. */
.ablauf { margin: 0; padding-left: 22px; line-height: 1.7; }
.ablauf li + li { margin-top: 8px; }


/* --- I-19: Besitzliste in der Selbstpflege ---------------------------------
   Mehrspaltig, damit elf Positionen nicht elf Bildschirmzeilen kosten.
--------------------------------------------------------------------------- */
.besitzliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 2px 20px;
}

/* ---------------------------------------------------------------------------
   Bewegung zurücknehmen, wenn das System es verlangt
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Druck
--------------------------------------------------------------------------- */
@media print {
    .kopf, .fuss, .einwilligung, .knopf { display: none; }
    body { background: #FFF; font-size: 12pt; }
}

/* ---------------------------------------------------------------------------
   AGB Tauchkurse (D-134, D-137, I-27)

   Gliederung nach §§ und Absätzen. Die Absatznummer „(1)“ steht im Text,
   weil die AGB untereinander darauf verweisen („§ 7 Abs. 2“); sie hängt
   als Spalte links heraus, damit der Text bündig bleibt.

   Bildschirm: Überschrift und Druckknopf in einer Zeile, auf dem Handy
   untereinander.

   Druck: Alles, was nur auf den Bildschirm gehört, fällt weg — der Hero
   samt Bild und Brotkrumen, Schatten, Hintergründe. Die Überschrift der
   Karte übernimmt die Rolle des Titels, deshalb bleibt oben keine leere
   Fläche. Der Hero sitzt außerhalb von `.agb`; erreicht wird er über
   `body:has(.agb)`, damit die Regel nur auf dieser Seite greift und jede
   andere Seite unverändert druckt.
--------------------------------------------------------------------------- */
.agb__kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 18px;
}
.agb__kopfzeile .abschnitt__titel { margin: 0; }
.agb__anbieter { margin: 0 0 28px; line-height: 1.6; }

.agb__paragraf + .agb__paragraf { margin-top: 1.8em; }
.agb .agb__paragraf h3 { margin: 0 0 0.6em; scroll-margin-top: 24px; }

.agb .agb__absatz {
    position: relative;
    padding-left: 2.4em;
    margin: 0 0 0.7em;
}
.agb__nr {
    position: absolute;
    left: 0;
    font-variant-numeric: tabular-nums;
}
.agb .agb__aufzaehlung { margin: -0.2em 0 0.9em 2.4em; }
.agb .tabellenrahmen { margin: 0.2em 0 1em 2.4em; }
.agb__tabelle { min-width: 0; }
.agb__tabelle tbody td { white-space: normal; text-align: left; }
.agb__tabelle thead th:last-child { text-align: left; }

.agb__stand { margin-top: 2em; font-size: 0.92em; }
.nur-druck { display: none; }

/* `.knopf` setzt `display: inline-flex` und hebt damit das `hidden`-Attribut
   auf. Ohne diese Regel stünde der Druckknopf auch ohne JavaScript da. */
.agb [data-drucken][hidden] { display: none; }

@media (max-width: 560px) {
    .agb .agb__absatz { padding-left: 2em; }
    .agb .agb__aufzaehlung, .agb .tabellenrahmen { margin-left: 0; }
}

@media print {
    body:has(.agb) .hero { display: none; }
    .agb.abschnitt { padding: 0; }
    .agb.huelle { max-width: none; padding: 0; }
    .agb__karte {
        box-shadow: none;
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
    }
    .agb, .agb a { color: #000; }
    .agb__text { max-width: none; line-height: 1.4; font-size: 10.5pt; }
    .agb .agb__paragraf h3 { font-size: 12pt; break-after: avoid; page-break-after: avoid; }
    .agb .agb__absatz, .agb li, .agb tr { break-inside: avoid; page-break-inside: avoid; }
    .agb .tabellenrahmen { overflow: visible; }
    .agb__kopfzeile { margin-bottom: 8pt; }
    .agb .abschnitt__titel { font-size: 15pt; }
    .agb__anbieter { margin-bottom: 14pt; }
    .agb .nur-druck {
        display: block;
        margin-top: 6pt;
        font-size: 9.5pt;
    }
}

/* ---------------------------------------------------------------------------
   Ausklapper

   `<details>`/`<summary>` — der Browser kann das von sich aus: aufklappen,
   Tastaturbedienung, Ansage an den Screenreader. Ein nachgebauter Ausklapper
   aus `<div>` und JavaScript müsste all das von Hand nachrüsten und wäre ohne
   JavaScript gar nicht zu öffnen.

   Der Inhalt steht im Quelltext, auch wenn er zugeklappt ist — Suchmaschinen
   finden die darin liegenden Verweise und folgen ihnen.
--------------------------------------------------------------------------- */
.ausklapper {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius-karte);
}

.ausklapper__knopf {
    /*
       `display` wird BEWUSST NICHT verändert — kein `flex`, kein `grid`.

       Ein `<summary>` ist von Haus aus `display: list-item`. Wird das
       überschrieben, brechen einzelne Safari-Fassungen das Aufklappen: Der
       Knopf sieht dann richtig aus, tut aber nichts mehr. Geprüft habe ich am
       28.09.2026 nur gegen Chromium — deshalb hier der Weg, der nichts
       voraussetzt, statt eines, der in einem ungetesteten Browser scheitern
       könnte.

       Das Layout kommt stattdessen über den Innenabstand und einen
       `inline-block`-Winkel.
    */
    /*
       Hängender Einzug: Der linke Innenabstand hält 49 px frei (24 Rand +
       9 Winkel + 16 Abstand), und `text-indent` zieht die ERSTE Zeile um genau
       diese 25 px zurück — dort steht der Winkel. Bricht die Überschrift um,
       beginnt die zweite Zeile bündig unter der ersten statt unter dem Winkel.
    */
    padding: 20px 24px 20px 49px;
    text-indent: -25px;

    cursor: pointer;

    /*
       Auf Handybreite kleiner, damit „Alle Kurse auf einen Blick" in eine
       Zeile passt: bei 390 px Gerätebreite ergibt 4.2vw rund 16 px, gedeckelt
       auf 21 px am Schreibtisch.
    */
    font-size: clamp(17px, 4.2vw, 21px);
    font-weight: 600;
    color: var(--tief);

    /*
       Den vorgegebenen Marker abschalten — in beiden Bauweisen, die es dafür
       gibt. `list-style` greift in Firefox und neueren Chromium-Fassungen,
       `::-webkit-details-marker` in Safari und älteren.
    */
    list-style: none;
}
.ausklapper__knopf::-webkit-details-marker { display: none; }

/* Der eigene Winkel: nach rechts, wenn zu — nach unten, wenn offen. */
.ausklapper__knopf::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 9px; height: 9px;
    margin-right: 16px;
    margin-bottom: 3px;
    text-indent: 0;
    border-right: 2px solid var(--akzent);
    border-bottom: 2px solid var(--akzent);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.ausklapper[open] .ausklapper__knopf::before { transform: rotate(45deg); }

/* Wer Bewegung abgestellt hat, bekommt den Winkel ohne Drehanimation. */
@media (prefers-reduced-motion: reduce) {
    .ausklapper__knopf::before { transition: none; }
}

.ausklapper__knopf:hover { color: var(--akzent-text); }

.ausklapper__inhalt {
    padding: 0 24px 24px;
    border-top: 1px solid var(--linie);
    margin-top: 0;
}

/* Die erste Überschrift im aufgeklappten Bereich braucht oben wieder Luft. */
.ausklapper__inhalt > :first-child { margin-top: 20px; }

/* FAQ auf der Startseite (D-142): ein Ausklapper je Frage, untereinander. */
.faq {
    display: grid;
    gap: 12px;
}

/* ---------------------------------------------------------------------------
   Ausbildungsweg

   Eine Stufenleiter: links eine durchgehende Linie mit nummerierten Marken,
   rechts die Kurse der jeweiligen Stufe.

   **Senkrecht auf jeder Breite.** Eine waagerechte Anordnung — wie sie
   Ausbildungsübersichten oft haben — zwingt auf dem Telefon zum seitlichen
   Schieben oder schrumpft die Schrift unter das Lesbare. Die Reihenfolge ist
   hier ohnehin die Botschaft, und senkrecht liest man sie in der Richtung, in
   der man scrollt.

   **Kein Bild.** Eine Grafik wäre auf dem Telefon unlesbar, ließe sich nicht
   vergrößern ohne zu verpixeln, trüge keine Verweise und müsste bei jedem
   neuen Kurs neu gezeichnet werden.
--------------------------------------------------------------------------- */
.weg { margin: 0; }

.weg__stufe {
    position: relative;
    padding-left: 60px;
    padding-bottom: 36px;
}

/*
   Die Linie von einer Marke zur nächsten. Sie sitzt in der Mitte der Marke
   (36 px breit, also 18 px) minus der halben Linienbreite.
*/
.weg__stufe::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--linie);
}
.weg__stufe:last-child { padding-bottom: 0; }
.weg__stufe:last-child::before { display: none; }

.weg__marke {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--akzent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* Die Profistufe hebt sich ab — dort beginnt die Ausbildung zum Beruf. */
.weg__stufe--profi .weg__marke { background: var(--signal); color: var(--signal-text); }

.weg__titel {
    margin: 4px 0 4px;
    font-size: 21px;
    line-height: 1.3;
}

.weg__hinweis {
    margin: 0 0 14px;
    color: var(--sekundaer);
    font-size: 16px;
}

.weg__karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.wegkarte {
    display: block;
    padding: 14px 16px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    text-decoration: none;
    color: inherit;
}

.wegkarte:hover { border-color: var(--akzent); }
.wegkarte:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.wegkarte__name {
    display: block;
    font-weight: 600;
    color: var(--akzent-text);
    margin-bottom: 4px;
}

.wegkarte__zusatz {
    display: block;
    color: var(--sekundaer);
    font-size: 15px;
    line-height: 1.4;
}

/*
   Eine Station ohne eigene Seite — etwa ein Kurs, der nur auf Anfrage
   stattfindet. Sieht aus wie die anderen, ist aber kein Verweis.
*/
.wegkarte--ohne-ziel { background: transparent; }
.wegkarte--ohne-ziel .wegkarte__name { color: var(--tief); }

@media (max-width: 600px) {
    .weg__stufe { padding-left: 50px; }
    .weg__titel { font-size: 19px; }
}

/* ---------------------------------------------------------------------------
   Überblicksband über dem Ausbildungsweg

   Auf dem Telefon ist der Weg rund 1900 px hoch — man scrollt lange und sieht
   nie, wie viele Stufen noch kommen. Das Band nennt alle fünf auf einen Blick
   und springt direkt zu jeder.

   Es umbricht von selbst: am Schreibtisch eine Zeile, auf dem Telefon zwei bis
   drei. Deshalb KEINE Pfeile zwischen den Gliedern — bei einem Umbruch zeigte
   der letzte Pfeil einer Zeile ins Leere. Die Reihenfolge tragen die Nummern.
--------------------------------------------------------------------------- */
.wegband {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.wegband__glied {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px 9px 9px;
    background: var(--grund-abgesetzt);
    border-radius: 999px;
    text-decoration: none;
    color: var(--tief);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.wegband__glied:hover { background: var(--akzent); color: #FFFFFF; }
.wegband__glied:hover .wegband__nr { background: #FFFFFF; color: var(--akzent); }
.wegband__glied:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

.wegband__nr {
    flex: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--akzent);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.wegband__glied--profi .wegband__nr { background: var(--signal); color: var(--signal-text); }

/*
   Der Kopfbereich klebt oben und ist `--kopfhoehe` hoch. Ohne diesen Abstand
   landet eine angesprungene Stufe DAHINTER und der Besucher sieht die
   Überschrift nicht, zu der er springen wollte.
*/
.weg__stufe { scroll-margin-top: calc(var(--kopfhoehe) + 20px); }

@media (max-width: 600px) {
    /*
       Schmalerer Streifen für die Linie: Bei 390 px Gerätebreite zählt jedes
       Pixel, das dem Text zugutekommt.
    */
    .weg__stufe { padding-left: 46px; }
    .weg__stufe::before { left: 15px; }
    .weg__marke { width: 32px; height: 32px; font-size: 15px; }
    .wegband { gap: 6px; }
    .wegband__glied { font-size: 14px; padding: 7px 13px 7px 7px; }
}

/* --- Gütezeichen im Hero (D-124) -------------------------------------------
   Tritt an die Stelle des Textchips. Nur die Startseite benutzt es: Dort ist
   die Auszeichnung eine Aussage über die Basis, auf Unterseiten wäre sie
   Wiederholung.

   `display: block` statt des Vorgabewerts für Bilder: Ein inline-Bild sitzt
   auf der Grundlinie und lässt darunter einen Rest Leerraum stehen, der den
   Abstand zur Überschrift unberechenbar macht.

   **Kein eigener `margin-bottom`.** Der Abstand zur Überschrift kommt aus
   deren `margin-top` — genau wie beim Chip, den das Zeichen ersetzt. Zwei
   Abstände an derselben Stelle addieren sich sonst.
--------------------------------------------------------------------------- */
.hero__zeichen {
    display: block;
    height: 187px;
    width: auto;
    border-radius: var(--radius-klein);
    /* Das Zeichen bringt seinen eigenen dunklen Grund mit. Über einer hellen
       Stelle des Fotos verlöre es sonst seine Kante. */
    box-shadow: 0 2px 16px rgb(7 26 38 / .45);
}

@media (max-width: 600px) {
    .hero__zeichen { height: 140px; }
}

/* --- Bild im Fließtext einer Karte (D-129) ---------------------------------
   Erstes seiner Art: Bisher trugen nur der Hero und die Tauchplatzseiten
   Bilder, beide mit eigenem Aufbau.

   `width: 100%` mit `height: auto` statt fester Maße — die Karte bestimmt die
   Breite, das Seitenverhältnis bleibt.

   **Kein `aspect-ratio` hier.** Den Platz hält der Browser schon aus `width`
   und `height` am Bild frei; ein fester Wert im Stylesheet würde beim
   nächsten Bild mit anderem Format falsch. Darum gehören die Maße ans
   Element und nicht hierher.

   `display: block`: Ein inline-Bild sitzt auf der Grundlinie und lässt
   darunter einen Rest Leerraum stehen.
--------------------------------------------------------------------------- */
.inhaltsbild {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-karte);
    margin-bottom: 22px;
}

.inhaltsbild__gruppe { margin: 0 0 22px; }

.inhaltsbild__gruppe .inhaltsbild { margin-bottom: 10px; }

.inhaltsbild__text {
    margin: 0;
    font-size: 14px;
    color: var(--tiefe-sekundaer, #4A5A64);
}

/* --- Text und Bild nebeneinander (D-129) -----------------------------------
   Auf breiten Schirmen steht das Bild rechts neben dem Text, auf schmalen
   über ihm.

   **Das Bild steht im Quelltext zuerst.** Auf dem Telefon soll es oben
   stehen: Bei einer Begrüßung gehört das Gesicht vor das Wort, und wer erst
   drei Absätze lesen muss, hat es nicht mehr nötig. Auf dem Desktop setzt das
   Raster es in die zweite Spalte derselben Zeile — die Quelltextreihenfolge
   bleibt also, was sie für Vorlesesoftware und Tastatur sein soll, und die
   Anzeige ändert sich trotzdem.

   `align-items: start` hält das Bild oben bündig mit dem Text. Ohne das
   zentriert das Raster beide in ihrer Zeile, und bei vier Absätzen Text
   schwebt das Bild in der Mitte.

   Die Spaltenbreite ist nach oben begrenzt: Ein Portraitformat neben einer
   Textspalte darf nicht breiter werden als der Text schmal ist.
--------------------------------------------------------------------------- */
.textbild { display: grid; gap: 20px; }

@media (min-width: 820px) {
    .textbild {
        grid-template-columns: 1fr minmax(260px, 340px);
        gap: 28px;
        align-items: start;
    }

    .textbild__bild { grid-column: 2; grid-row: 1; }
    .textbild__text { grid-column: 1; grid-row: 1; }

    /* Im Nebeneinander trägt der Abstand des Rasters, nicht der des Bildes. */
    .textbild .inhaltsbild { margin-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   Teamkarten (D-135) — Abschnitt „Unser Team“ auf „Über uns“

   Gebaut wie die `.platzkarte`, mit zwei Unterschieden:
   - **Kein Link**, also keine Anhebung beim Überfahren. Eine Karte, die sich
     bewegt, verspricht ein Ziel.
   - **Hochformat 4 : 5** statt 4 : 3 — es sind Porträts.

   Gitter mit festen Spaltenzahlen statt `auto-fill`: eine Spalte auf dem
   Telefon, zwei ab Tablet, drei am Schreibtisch. Mit `auto-fill` stünde eine
   einzelne Leitungskarte je nach Breite allein in einem halbleeren Raster.
--------------------------------------------------------------------------- */
.teamgruppe__titel {
    margin: 30px 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sekundaer);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.abschnitt__titel + .teamgruppe__titel { margin-top: 6px; }

.teamgitter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
@media (min-width: 640px) {
    .teamgitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .teamgitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.teamkarte {
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    border-radius: var(--radius-karte);
    overflow: hidden;
    box-shadow: var(--schatten-karte);
}

.teamkarte__bild { aspect-ratio: 4 / 5; background: var(--grund-abgesetzt); }
/* `object-position` kommt je Foto als Inline-Stil aus dem Backend (Ausschnitt). */
.teamkarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.teamkarte__text { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.teamkarte__name { margin: 0 0 4px; font-size: 21px; letter-spacing: -0.02em; }
.teamkarte__stufe { margin: 0 0 2px; font-size: 13px; color: var(--sekundaer);
                    text-transform: uppercase; letter-spacing: .06em; }
.teamkarte__funktion { margin: 0 0 10px; font-weight: 600; color: var(--tief); }
.teamkarte__kurz { margin: 0; color: var(--sekundaer); font-size: 15px; line-height: 1.55; }

.teamkarte__daten { margin: 14px 0 0; font-size: 14px; line-height: 1.45; }
.teamkarte__daten > div { display: flex; gap: 8px; margin-top: 4px; }
.teamkarte__daten dt { flex: none; color: var(--sekundaer); }
.teamkarte__daten dt::after { content: ":"; }
.teamkarte__daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Der Ausklapper unten auf der Karte. `margin-top: auto` schiebt ihn an den
   Kartenboden, damit die Knöpfe nebeneinanderstehender Karten auf einer
   Linie liegen. */
.teamkarte__mehr {
    margin-top: auto;
    padding-top: 14px;
}
.teamkarte__mehrknopf {
    /* `display` BEWUSST NICHT ändern — dieselbe Safari-Vorsicht wie bei
       `.ausklapper__knopf`: Ein überschriebenes `display` am `<summary>`
       bricht dort in einzelnen Fassungen das Aufklappen. */
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--akzent-text);
}
.teamkarte__mehrknopf::-webkit-details-marker { display: none; }
.teamkarte__mehrknopf::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 7px; height: 7px;
    margin: 0 10px 3px 2px;
    border-right: 2px solid var(--akzent);
    border-bottom: 2px solid var(--akzent);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.teamkarte__mehr[open] .teamkarte__mehrknopf::before { transform: rotate(45deg); }
.teamkarte__mehrknopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
    .teamkarte__mehrknopf::before { transition: none; }
}

.teamkarte__lang { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.teamkarte__lang > :first-child { margin-top: 0; }
.teamkarte__lang > :last-child { margin-bottom: 0; }