@charset "utf-8";
/* Kantriss Boulderhalle — assets/css/styles.css
   Eine einzige, handgeschriebene Datei. Kein Praeprozessor, kein Bundler,
   keine Minifizierung: die Quelle ist das, was ausgeliefert wird.
   Dreizehn Abschnitte in fixer Reihenfolge, technical.md Abschnitt 4. */

/* === 01 tokens ============================================================ */
:root {
    /* Palette — jede Farbe des Projekts steht hier und nirgends sonst. */
    --grund: #141618;
    --flaeche: #1D2023;
    --linie: #2A2E32;
    --akzent: #C0472B;
    --akzent-hell: #E4744F;
    --magnesia: #EDEBE6;
    --magnesia-gedaempft: #A9AEB0;
    --stahl: #4A6572;

    /* Schriftfamilien — geladen ueber den Partial fonts, nie selbst gehostet. */
    --familie-display: "Bricolage Grotesque", "Barlow", system-ui, sans-serif;
    --familie-text: "Barlow", system-ui, sans-serif;
    --familie-zahl: "Overpass Mono", ui-monospace, monospace;

    /* Typografische Skala. */
    --fs-mini: 0.75rem;
    --fs-klein: 0.875rem;
    --fs-text: 1rem;
    --fs-gross: 1.125rem;
    --fs-vorspann: 1.25rem;
    --fs-h3: 1.375rem;
    --fs-h2: 1.75rem;
    --fs-h1: 2.5rem;
    --fs-hero: 3.25rem;
    --fs-marke: 1.5rem;

    --lh-titel: 1.2;
    --lh-kompakt: 1.4;
    --lh-text: 1.65;

    --ls-eng: -0.015em;
    --ls-normal: 0;
    --ls-weit: 0.09em;

    --gewicht-text: 400;
    --gewicht-medium: 500;
    --gewicht-halbfett: 600;
    --gewicht-fett: 700;
    --gewicht-display: 800;

    /* Abstaende. */
    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 0.75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;
    --abstand-7: 3rem;
    --abstand-8: 4.5rem;

    /* Radien — flach, das Designbild kennt keine runden Kacheln. */
    --radius-0: 0;
    --radius-1: 2px;

    /* Rahmenbreiten. */
    --strich-1: 1px;
    --strich-2: 2px;
    --strich-3: 3px;

    /* Timing. */
    --dauer-schnell: 120ms;
    --dauer-mittel: 220ms;
    --kurve: cubic-bezier(0.2, 0, 0.2, 1);

    /* Raster. */
    --breite-inhalt: 72rem;
    --breite-text: 64ch;
}

/* === 02 base =============================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background-color: var(--grund);
    color: var(--magnesia);
    font-family: var(--familie-text);
    font-size: var(--fs-text);
    font-weight: var(--gewicht-text);
    line-height: var(--lh-text);
    letter-spacing: var(--ls-normal);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Lange unteilbare Woerter (deutsche Komposita, E-Mail-Adressen, URLs,
       USt-IdNr.) sollen umbrechen statt Ueberlauf zu erzeugen. Vererbt an
       alle Nachfahren, deckt Ueberschriften, Absaetze und Tabellenzellen ab. */
    overflow-wrap: break-word;
}

img,
picture,
iframe,
svg {
    max-width: 100%;
}

img {
    height: auto;
    display: block;
    background-color: var(--flaeche);
}

hr {
    border: 0;
    border-top: var(--strich-1) solid var(--linie);
    margin: var(--abstand-6) 0;
}

:target {
    scroll-margin-top: var(--abstand-8);
}

::selection {
    background-color: var(--akzent);
    color: var(--magnesia);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === 03 typography ========================================================= */
h1,
h2,
h3,
h4 {
    margin: 0 0 var(--abstand-4);
    font-family: var(--familie-display);
    line-height: var(--lh-titel);
    letter-spacing: var(--ls-eng);
    color: var(--magnesia);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: var(--gewicht-display);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--gewicht-fett);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--gewicht-fett);
}

h4 {
    font-size: var(--fs-gross);
    font-weight: var(--gewicht-halbfett);
}

p {
    margin: 0 0 var(--abstand-4);
    max-width: var(--breite-text);
}

strong {
    font-weight: var(--gewicht-halbfett);
    color: var(--magnesia);
}

small {
    font-size: var(--fs-klein);
}

a {
    color: var(--akzent-hell);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: var(--strich-1);
    transition: color var(--dauer-schnell) var(--kurve);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: var(--strich-3) solid var(--akzent-hell);
    outline-offset: var(--strich-2);
}

ul,
ol {
    margin: 0 0 var(--abstand-4);
    padding-left: var(--abstand-5);
    max-width: var(--breite-text);
}

li {
    margin-bottom: var(--abstand-2);
}

blockquote {
    margin: 0;
    padding-left: var(--abstand-4);
    border-left: var(--strich-3) solid var(--akzent);
    font-size: var(--fs-gross);
}

figure {
    margin: 0 0 var(--abstand-5);
}

figcaption {
    color: var(--magnesia-gedaempft);
    font-size: var(--fs-klein);
    line-height: var(--lh-kompakt);
    margin-top: var(--abstand-2);
}

/* Mono ist fuer Zahlen, Preise, Uhrzeiten und Tabellenwerte reserviert. */
.zahl,
code,
time,
td.zahl,
.tabelle td {
    font-family: var(--familie-zahl);
    font-size: var(--fs-klein);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-normal);
}

.vorspann {
    font-size: var(--fs-vorspann);
    line-height: var(--lh-kompakt);
    color: var(--magnesia);
}

.dachzeile {
    display: block;
    font-family: var(--familie-zahl);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-weit);
    text-transform: uppercase;
    color: var(--akzent-hell);
    margin-bottom: var(--abstand-2);
}

/* === 04 layout ============================================================== */
.behaelter {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding-left: var(--abstand-4);
    padding-right: var(--abstand-4);
}

main {
    display: block;
}

.abschnitt {
    padding-top: var(--abstand-7);
    padding-bottom: var(--abstand-7);
    border-top: var(--strich-1) solid var(--linie);
}

.abschnitt--ohne-linie {
    border-top: 0;
}

.raster {
    display: grid;
    gap: var(--abstand-5);
    grid-template-columns: 1fr;
}

/* Ohne min-width:0 verhindert die automatische Mindestgroesse von
   Grid-Kindern (min-width:auto), dass eine Spalte unter die intrinsische
   Breite ihres Inhalts schrumpft — ein Bild mit width/height-Attributen
   sprengt dann die Spur und damit die ganze Seite in die Breite. */
.raster > * {
    min-width: 0;
}

.raster--zwei,
.raster--drei,
.raster--vier {
    grid-template-columns: 1fr;
}

.gespann {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
    align-items: center;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--abstand-5);
    text-align: left;
}

.tabelle caption {
    text-align: left;
}

.tabelle th,
.tabelle td {
    padding: var(--abstand-3);
    border-bottom: var(--strich-1) solid var(--linie);
    vertical-align: top;
}

.tabelle thead th {
    font-family: var(--familie-zahl);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-weit);
    text-transform: uppercase;
    color: var(--magnesia-gedaempft);
    font-weight: var(--gewicht-halbfett);
}

.tabelle tbody th {
    font-weight: var(--gewicht-halbfett);
    color: var(--magnesia);
}

.tabelle-huelle {
    overflow-x: auto;
    margin-bottom: var(--abstand-5);
}

.gmap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: var(--strich-1) solid var(--linie);
    background-color: var(--flaeche);
}

.gmap iframe {
    display: block;
    width: 100%;
    height: 100%;
}

@media (min-width: 600px) {
    .behaelter {
        padding-left: var(--abstand-5);
        padding-right: var(--abstand-5);
    }

    .abschnitt {
        padding-top: var(--abstand-8);
        padding-bottom: var(--abstand-8);
    }

    .raster--zwei {
        grid-template-columns: repeat(2, 1fr);
    }

    .raster--drei,
    .raster--vier {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 961px) {
    .raster--drei {
        grid-template-columns: repeat(3, 1fr);
    }

    .raster--vier {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* === 05 header ============================================================== */
.skip-link {
    position: absolute;
    left: var(--abstand-2);
    top: var(--abstand-2);
    z-index: 30;
    transform: translateY(-200%);
    background-color: var(--akzent);
    color: var(--magnesia);
    padding: var(--abstand-2) var(--abstand-4);
    text-decoration: none;
    font-weight: var(--gewicht-halbfett);
    transition: transform var(--dauer-schnell) var(--kurve);
}

.skip-link:focus {
    transform: translateY(0);
}

.kopf {
    position: relative;
    z-index: 20;
    background-color: var(--grund);
    border-bottom: var(--strich-1) solid var(--linie);
}

.kopf__innen {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: var(--abstand-3) var(--abstand-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-3);
}

.wortmarke {
    display: inline-flex;
    align-items: baseline;
    gap: var(--abstand-2);
    font-family: var(--familie-display);
    font-size: var(--fs-marke);
    font-weight: var(--gewicht-display);
    line-height: var(--lh-titel);
    letter-spacing: var(--ls-eng);
    color: var(--magnesia);
    text-decoration: none;
    text-transform: uppercase;
}

.wortmarke__text::first-letter {
    color: var(--akzent);
}

.wortmarke__glyph {
    color: var(--akzent);
    font-size: var(--fs-klein);
}

.kopf__schalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Quadratisches Tastfeld: 48x48px erreicht die empfohlene Mindestgroesse
       fuer Touch-Ziele, statt der vorherigen 48x32px. */
    width: var(--abstand-7);
    height: var(--abstand-7);
    padding: 0;
    background-color: transparent;
    border: var(--strich-1) solid var(--linie);
    border-radius: var(--radius-0);
    color: var(--magnesia);
    cursor: pointer;
}

.kopf__schalter-balken,
.kopf__schalter-balken::before,
.kopf__schalter-balken::after {
    display: block;
    width: 1.25rem;
    height: var(--strich-2);
    background-color: var(--magnesia);
    transition: transform var(--dauer-mittel) var(--kurve);
}

.kopf__schalter-balken::before,
.kopf__schalter-balken::after {
    content: "";
    position: relative;
}

.kopf__schalter-balken::before {
    top: calc(var(--abstand-2) * -1);
}

.kopf__schalter-balken::after {
    top: calc(var(--abstand-2) - var(--strich-2));
}

.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken {
    background-color: transparent;
}

.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::before {
    transform: translateY(var(--abstand-2)) rotate(45deg);
}

.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::after {
    transform: translateY(calc(var(--abstand-2) * -1 + var(--strich-2))) rotate(-45deg);
}

/* Mobil liegt die Navigation als Overlay unter der Kopfzeile: sie ueberdeckt
   den Inhalt, statt ihn nach unten zu schieben (kein Reflow beim Oeffnen). */
.navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 25;
    background-color: var(--flaeche);
    border-bottom: var(--strich-1) solid var(--linie);
    padding: var(--abstand-3) var(--abstand-4) var(--abstand-4);
}

.navigation.ist-offen {
    display: block;
}

.navigation__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-1);
}

.navigation__liste a {
    display: block;
    padding: var(--abstand-3) 0;
    color: var(--magnesia);
    text-decoration: none;
    font-size: var(--fs-klein);
    font-weight: var(--gewicht-medium);
    letter-spacing: var(--ls-weit);
    text-transform: uppercase;
    border-bottom: var(--strich-1) solid var(--linie);
}

.navigation__liste a[aria-current="page"] {
    color: var(--akzent-hell);
}

.navigation__cta {
    color: var(--akzent-hell);
}

@media (min-width: 961px) {
    .kopf__schalter {
        display: none;
    }

    .navigation {
        display: block;
        position: static;
        z-index: auto;
        background-color: transparent;
        border-bottom: 0;
        padding: 0;
    }

    .navigation__liste {
        flex-direction: row;
        gap: var(--abstand-5);
        align-items: center;
    }

    .navigation__liste a {
        padding: var(--abstand-2) 0;
        border-bottom: var(--strich-2) solid transparent;
    }
}

@media (hover: hover) {
    .navigation__liste a:hover {
        color: var(--akzent-hell);
    }

    .wortmarke:hover .wortmarke__text {
        color: var(--akzent-hell);
    }
}

/* === 06 footer ============================================================== */
.fuss {
    background-color: var(--flaeche);
    border-top: var(--strich-3) solid var(--akzent);
    padding: var(--abstand-7) var(--abstand-4) var(--abstand-5);
    margin-top: var(--abstand-8);
}

.fuss__innen {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    display: grid;
    gap: var(--abstand-6);
    grid-template-columns: 1fr;
}

.fuss__marke {
    font-family: var(--familie-display);
    font-size: var(--fs-marke);
    font-weight: var(--gewicht-display);
    letter-spacing: var(--ls-eng);
    text-transform: uppercase;
    color: var(--magnesia);
    margin-bottom: var(--abstand-3);
}

.fuss__titel {
    font-family: var(--familie-zahl);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-weit);
    text-transform: uppercase;
    color: var(--magnesia-gedaempft);
    font-weight: var(--gewicht-halbfett);
    margin-bottom: var(--abstand-3);
}

.fuss__zeile {
    margin-bottom: var(--abstand-2);
    font-size: var(--fs-klein);
    line-height: var(--lh-kompakt);
    color: var(--magnesia-gedaempft);
}

.fuss__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fuss__liste li {
    margin-bottom: var(--abstand-2);
    font-size: var(--fs-klein);
    line-height: var(--lh-kompakt);
}

.fuss__schluss {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin: var(--abstand-6) auto 0;
    padding-top: var(--abstand-4);
    border-top: var(--strich-1) solid var(--linie);
    font-size: var(--fs-mini);
    line-height: var(--lh-kompakt);
    color: var(--magnesia-gedaempft);
}

@media (min-width: 600px) {
    .fuss__innen {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 961px) {
    .fuss__innen {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* === 07 hero ================================================================ */
.hero {
    padding-top: var(--abstand-7);
    padding-bottom: var(--abstand-7);
    background-color: var(--grund);
    border-bottom: var(--strich-1) solid var(--linie);
}

.hero__innen {
    width: 100%;
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding-left: var(--abstand-4);
    padding-right: var(--abstand-4);
    display: grid;
    gap: var(--abstand-6);
    grid-template-columns: 1fr;
    align-items: center;
}

.hero__titel {
    font-size: var(--fs-h1);
    font-weight: var(--gewicht-display);
    margin-bottom: var(--abstand-4);
}

.hero__text {
    font-size: var(--fs-vorspann);
    line-height: var(--lh-kompakt);
    color: var(--magnesia-gedaempft);
}

.hero__bild {
    width: 100%;
    border: var(--strich-1) solid var(--linie);
}

.hero__marker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-4);
    padding: 0;
    margin: var(--abstand-5) 0 0;
    list-style: none;
    max-width: none;
}

.hero__marker li {
    font-family: var(--familie-zahl);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-weit);
    text-transform: uppercase;
    color: var(--magnesia-gedaempft);
    border-left: var(--strich-2) solid var(--akzent);
    padding-left: var(--abstand-2);
    margin-bottom: 0;
}

@media (min-width: 961px) {
    .hero {
        padding-top: var(--abstand-8);
        padding-bottom: var(--abstand-8);
    }

    .hero__innen {
        grid-template-columns: 3fr 2fr;
        padding-left: var(--abstand-5);
        padding-right: var(--abstand-5);
    }

    /* Hero ohne Bild: eine Spalte statt der Text-Bild-Aufteilung. */
    .hero__innen--voll {
        grid-template-columns: 1fr;
        max-width: 40rem;
    }

    .hero__titel {
        font-size: var(--fs-hero);
    }
}

/* === 08 cards ================================================================ */
.karte {
    background-color: var(--flaeche);
    border: var(--strich-1) solid var(--linie);
    border-top: var(--strich-3) solid var(--akzent);
    padding: var(--abstand-5);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-3);
}

.karte__titel {
    font-size: var(--fs-h3);
    margin-bottom: 0;
}

.karte__text {
    color: var(--magnesia-gedaempft);
    margin-bottom: 0;
}

.karte__wert {
    font-family: var(--familie-zahl);
    font-size: var(--fs-h3);
    color: var(--akzent-hell);
    font-weight: var(--gewicht-halbfett);
}

.karte__fuss {
    margin-top: auto;
    padding-top: var(--abstand-3);
    border-top: var(--strich-1) solid var(--linie);
    font-size: var(--fs-klein);
}

/* Ganzflaechig klickbare Karte: das gesamte Element ist der Link, nicht ein
   kleines "mehr" darin. */
.karte--link {
    text-decoration: none;
    color: inherit;
}

.karte--link .karte__titel {
    color: var(--magnesia);
}

.karte__bild {
    width: 100%;
    border-bottom: var(--strich-1) solid var(--linie);
}

.person {
    background-color: var(--flaeche);
    border: var(--strich-1) solid var(--linie);
    padding: var(--abstand-5);
}

.person__rolle {
    font-family: var(--familie-zahl);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-weit);
    text-transform: uppercase;
    color: var(--akzent-hell);
    margin-bottom: var(--abstand-2);
}

.person__qualifikation {
    font-size: var(--fs-klein);
    line-height: var(--lh-kompakt);
    color: var(--magnesia-gedaempft);
}

.stimme {
    background-color: var(--flaeche);
    border-left: var(--strich-3) solid var(--akzent);
    padding: var(--abstand-5);
}

.stimme__text {
    font-size: var(--fs-gross);
    line-height: var(--lh-kompakt);
}

.stimme__name {
    font-family: var(--familie-zahl);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-weit);
    text-transform: uppercase;
    color: var(--magnesia-gedaempft);
    margin-bottom: 0;
}

/* Steckbrief-Panels: Kurz- und Preisuebersichten sowie Oeffnungszeiten,
   die als Partial auf mehreren Seiten wiederverwendet werden. */
.uebersicht,
.oeffnung {
    background-color: var(--flaeche);
    border: var(--strich-1) solid var(--linie);
    border-top: var(--strich-3) solid var(--akzent);
    padding: var(--abstand-5);
}

.uebersicht__hinweis,
.oeffnung__hinweis {
    color: var(--magnesia-gedaempft);
    font-size: var(--fs-klein);
}

.oeffnung__hinweis:last-child {
    margin-bottom: 0;
}

.uebersicht__mehr {
    margin: var(--abstand-4) 0 0;
}

/* Auszug: zitierter Ausschnitt eines anderen Dokuments (Hallenordnung),
   daher derselbe linksseitige Akzentstrich wie beim blockquote-Element. */
.auszug {
    background-color: var(--flaeche);
    border-left: var(--strich-3) solid var(--akzent);
    padding: var(--abstand-5);
}

.auszug__vorspann {
    color: var(--magnesia-gedaempft);
}

.auszug__mehr {
    margin: var(--abstand-4) 0 0;
}

@media (hover: hover) {
    .karte--link:hover {
        border-color: var(--akzent);
    }

    .karte--link:hover .karte__titel {
        color: var(--akzent-hell);
    }
}

/* === 09 buttons ============================================================== */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Lange E-Mail-Adressen sind ein einziges unteilbares Wort. In einem
       inline-flex-Container richtet sich die Breite nach max-content, wo
       `break-word` nicht greift — `anywhere` senkt auch die min-content-
       Breite, sodass der Knopf im schmalen Viewport umbricht statt
       ueber den Rand zu laufen (Regel F6). */
    max-width: 100%;
    overflow-wrap: anywhere;
    gap: var(--abstand-2);
    padding: var(--abstand-3) var(--abstand-5);
    border: var(--strich-2) solid var(--akzent);
    border-radius: var(--radius-1);
    background-color: transparent;
    color: var(--magnesia);
    font-family: var(--familie-text);
    font-size: var(--fs-klein);
    font-weight: var(--gewicht-halbfett);
    letter-spacing: var(--ls-weit);
    line-height: var(--lh-kompakt);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dauer-schnell) var(--kurve),
                color var(--dauer-schnell) var(--kurve),
                border-color var(--dauer-schnell) var(--kurve);
}

.knopf--voll {
    background-color: var(--akzent);
    color: var(--magnesia);
}

.knopf--linie {
    border-color: var(--stahl);
    color: var(--magnesia);
}

.knopf--still {
    border-color: transparent;
    color: var(--akzent-hell);
    padding-left: 0;
    padding-right: 0;
}

.knopf[disabled],
.knopf[aria-disabled="true"] {
    border-color: var(--linie);
    color: var(--magnesia-gedaempft);
    cursor: not-allowed;
}

@media (hover: hover) {
    .knopf:hover {
        background-color: var(--akzent);
        border-color: var(--akzent);
        color: var(--magnesia);
    }

    .knopf--still:hover {
        background-color: transparent;
        color: var(--magnesia);
    }

    .knopf[disabled]:hover,
    .knopf[aria-disabled="true"]:hover {
        background-color: transparent;
        border-color: var(--linie);
        color: var(--magnesia-gedaempft);
    }
}

/* === 10 tabs-filters ========================================================= */
.reiter {
    margin-bottom: var(--abstand-5);
}

.reiter__leiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    border-bottom: var(--strich-1) solid var(--linie);
    padding-bottom: var(--abstand-2);
}

.reiter__knopf {
    appearance: none;
    background-color: transparent;
    border: var(--strich-1) solid var(--linie);
    border-radius: var(--radius-1);
    color: var(--magnesia-gedaempft);
    padding: var(--abstand-2) var(--abstand-4);
    font-family: var(--familie-zahl);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-weit);
    line-height: var(--lh-kompakt);
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--dauer-schnell) var(--kurve),
                border-color var(--dauer-schnell) var(--kurve);
}

.reiter__knopf[aria-selected="true"] {
    color: var(--magnesia);
    border-color: var(--akzent);
}

.reiter__tafel {
    padding-top: var(--abstand-5);
}

.reiter__tafel[hidden] {
    display: none;
}

.filter__legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--abstand-4);
    max-width: none;
}

.filter__legende li {
    font-family: var(--familie-zahl);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-weit);
    text-transform: uppercase;
    color: var(--magnesia-gedaempft);
    margin-bottom: 0;
}

@media (hover: hover) {
    .reiter__knopf:hover {
        color: var(--magnesia);
        border-color: var(--stahl);
    }
}

/* === 11 forms ================================================================ */
.formular-block {
    background-color: var(--flaeche);
    border: var(--strich-1) solid var(--linie);
    padding: var(--abstand-5);
}

.formular {
    display: grid;
    gap: var(--abstand-4);
    max-width: var(--breite-text);
}

.formular__feld {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}

.formular__label {
    font-size: var(--fs-klein);
    font-weight: var(--gewicht-halbfett);
    line-height: var(--lh-kompakt);
    color: var(--magnesia);
}

.formular__pflicht {
    color: var(--akzent-hell);
}

.formular__eingabe {
    width: 100%;
    padding: var(--abstand-3);
    background-color: var(--grund);
    border: var(--strich-1) solid var(--stahl);
    border-radius: var(--radius-1);
    color: var(--magnesia);
    font-family: var(--familie-text);
    font-size: var(--fs-text);
    line-height: var(--lh-kompakt);
    transition: border-color var(--dauer-schnell) var(--kurve);
}

.formular__eingabe--gross {
    resize: vertical;
}

/* Einziger erlaubter Einsatz von box-shadow im ganzen Projekt: der sichtbare
   Fokusindikator eines Formularfeldes. */
.formular__eingabe:focus-visible {
    outline: var(--strich-2) solid var(--akzent-hell);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--strich-3) var(--linie);
    border-color: var(--akzent-hell);
}

.formular__eingabe[aria-invalid="true"] {
    border-color: var(--akzent);
}

.formular__fehler {
    margin: 0;
    font-size: var(--fs-klein);
    line-height: var(--lh-kompakt);
    color: var(--akzent-hell);
}

.formular__fehler[hidden] {
    display: none;
}

.formular__feld--zustimmung {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--abstand-3);
    align-items: start;
}

.formular__haken {
    width: var(--abstand-5);
    height: var(--abstand-5);
    margin: 0;
    accent-color: var(--akzent);
}

.formular__label--haken {
    font-weight: var(--gewicht-text);
    line-height: var(--lh-kompakt);
}

.formular__feld--zustimmung .formular__fehler {
    grid-column: 1 / -1;
}

/* Honigtopf: fuer Menschen und Screenreader entfernt, fuer Bots sichtbar. */
.formular__falle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.formular__status {
    margin: 0;
    font-size: var(--fs-klein);
    line-height: var(--lh-kompakt);
    color: var(--magnesia-gedaempft);
    min-height: var(--abstand-5);
}

.formular__status[data-zustand="fehler"] {
    color: var(--akzent-hell);
}

.form__recaptcha-disclosure {
    margin: 0;
    font-size: var(--fs-mini);
    line-height: var(--lh-kompakt);
    color: var(--magnesia-gedaempft);
}

.grecaptcha-badge { visibility: hidden !important; }

/* === 12 modals ================================================================ */
.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-4);
}

.modal__schleier {
    position: absolute;
    inset: 0;
    background-color: var(--grund);
    opacity: 0.92;
}

.modal__kasten {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--breite-text);
    max-height: 85vh;
    overflow-y: auto;
    background-color: var(--flaeche);
    border: var(--strich-1) solid var(--linie);
    border-top: var(--strich-3) solid var(--akzent);
    padding: var(--abstand-6);
}

.modal__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--abstand-4);
    margin-bottom: var(--abstand-4);
}

.modal__titel {
    margin-bottom: 0;
}

.modal__schliessen {
    appearance: none;
    background-color: transparent;
    border: var(--strich-1) solid var(--linie);
    border-radius: var(--radius-1);
    color: var(--magnesia);
    font-family: var(--familie-zahl);
    font-size: var(--fs-gross);
    line-height: var(--lh-kompakt);
    padding: var(--abstand-1) var(--abstand-3);
    cursor: pointer;
    transition: border-color var(--dauer-schnell) var(--kurve);
}

body.ist-fixiert {
    overflow: hidden;
}

@media (hover: hover) {
    .modal__schliessen:hover {
        border-color: var(--akzent);
    }
}

/* === 13 utilities ============================================================= */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.gedaempft {
    color: var(--magnesia-gedaempft);
}

.akzent {
    color: var(--akzent-hell);
}

.zentriert {
    text-align: center;
}

.eng {
    max-width: var(--breite-text);
}

.ohne-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: none;
}

.abstand-oben-4 {
    margin-top: var(--abstand-4);
}

.abstand-oben-6 {
    margin-top: var(--abstand-6);
}

.abstand-unten-6 {
    margin-bottom: var(--abstand-6);
}

/* Die Farbskala der Boulder wird in Worten benannt, nicht als farbiges
   Kaestchen gerendert: die Token-Palette kennt keine sechs Skalenfarben,
   und ein erfundener Farbwert waere ein Verstoss gegen Regel D3. */
.skala-stufe {
    font-family: var(--familie-zahl);
    font-size: var(--fs-mini);
    letter-spacing: var(--ls-weit);
    text-transform: uppercase;
    color: var(--magnesia-gedaempft);
    border-left: var(--strich-3) solid var(--akzent);
    padding-left: var(--abstand-2);
}