/* ==========================================================================
   Eissporthalle Troisdorf (ICEDOME) – Stylesheet

   Inhalt
     1. Schriften
     2. Farben und Maße (Variablen)
     3. Grundlagen
     4. Hilfsklassen
     5. Knöpfe
     6. Kopfzeile und Navigation
     7. Bühne (Einstieg der Startseite) und Laufzeiten-Tafel
     8. Seitenkopf der Unterseiten
     9. Abschnitte, Fließtext, Raster
    10. Kacheln (Schnellzugriff)
    11. Tafeln (Öffnungszeiten, Preise) und Aufklapplisten
    12. Bilderband und Großansicht
    13. Speisekarte, Rundgang, Ansprechpartner, Partner
    14. News
    15. Formulare
    16. Karte (Zwei-Klick-Einbindung)
    17. Seitenfuß
    18. Deko und Animation
    19. Weniger Bewegung, Druck

   Schreibweise: Klassennamen sind deutsch und beschreiben den Inhalt
   (.tafel, .kachel, .bildtext). Gestaltet wird zuerst für das Handy,
   größere Bildschirme kommen über @media (min-width: …) dazu.

   Leitidee: die Linien einer Eisfläche. Rot ist die Mittellinie (und die
   Farbe des Logos), Blau sind die Drittellinien. Überschriften und Knöpfe
   sind geneigt wie der Schriftzug im Logo.
   ========================================================================== */


/* 1. Schriften ============================================================ */
/* Alle Schriften liegen auf dem eigenen Server (kein Abruf bei Google). */

@font-face {
    font-family: "Barlow";
    src: url("/fonts/barlow-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow";
    src: url("/fonts/barlow-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("/fonts/barlow-condensed-700-kursiv.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* 2. Farben und Maße ====================================================== */

:root {
    /* Farben: Eis, Nachtblau der Bande, Rot des Logos, Blau der Drittellinie */
    --eis: #f2f6f9;
    --eis-dunkel: #dfeaf2;
    --weiss: #ffffff;
    --nacht: #0d2240;
    --nacht-hell: #17335c;
    --tinte: #142033;
    --tinte-hell: #4d5d74;
    --rot: #c4161c;
    --rot-dunkel: #9c0f14;
    --rot-hell: #ff6a64;
    --blau: #1b5aa6;
    --linie: #c7d6e3;
    --fehler: #a3131a;
    --erfolg: #17693f;

    /* Schriften */
    --schrift-titel: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --schrift-text: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Maße */
    --breite: 74rem;
    --rand: clamp(1.1rem, 4vw, 2.5rem);
    --abstand-abschnitt: clamp(3rem, 7vw, 5.5rem);
    --rundung: 0.5rem;
    --schatten: 0 1px 2px rgba(13, 34, 64, 0.06), 0 12px 28px -14px rgba(13, 34, 64, 0.28);
    --kopf-hoehe: 4.25rem;
    --neigung: -11deg;
}


/* 3. Grundlagen =========================================================== */

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

html {
    scroll-behavior: smooth;
    /* Sprungziele (#anker) nicht unter der festen Kopfzeile verstecken */
    scroll-padding-top: calc(var(--kopf-hoehe) + 1.5rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--tinte);
    background: var(--eis);
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-style: italic;
    line-height: 1.05;
    margin: 0 0 0.5em;
    color: var(--nacht);
    text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 7vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); }

/* Zwischenüberschriften stehen aufrecht, damit sie sich von den Titeln abheben */
h3,
h4 {
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
}

h3 { font-size: 1.45rem; }
h4 { font-size: 1.2rem; }

p,
ul,
ol,
dl,
address {
    margin: 0 0 1em;
}

address {
    font-style: normal;
}

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

a {
    color: var(--blau);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--rot-dunkel);
}

/* Sichtbarer Rahmen für alle, die mit der Tastatur unterwegs sind */
:focus-visible {
    outline: 3px solid var(--blau);
    outline-offset: 3px;
    border-radius: 2px;
}

hr {
    border: 0;
    border-top: 2px solid var(--linie);
    margin: 1.75rem 0;
}

strong {
    font-weight: 600;
}


/* 4. Hilfsklassen ========================================================= */

/* Inhalt auf die Seitenbreite begrenzen und mittig setzen */
.breite {
    width: 100%;
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding-inline: var(--rand);
}

/* Schmaler für Fließtext: angenehme Zeilenlänge */
.breite-text {
    max-width: calc(46rem + 2 * var(--rand));
}

.breite-schmal {
    max-width: calc(36rem + 2 * var(--rand));
}

.mittig {
    text-align: center;
}

/* Nur für Vorleseprogramme sichtbar */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* „Zum Inhalt springen“: erscheint erst beim Ansteuern mit der Tab-Taste */
.sprunglink {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--nacht);
    color: var(--weiss);
    border-radius: var(--rundung);
}

.sprunglink:focus {
    top: 1rem;
    color: var(--weiss);
}

/* Symbole aus bilder/icons.svg */
.symbol {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
}


/* 5. Knöpfe =============================================================== */
/* Die geneigte Fläche liegt in ::before; so bleibt der Text gerade und der
   Tastatur-Rahmen rechteckig. */

.knopf {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.6rem 1.6rem;
    border: 0;
    background: none;
    font-family: var(--schrift-titel);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--weiss);
    text-decoration: none;
    cursor: pointer;
}

.knopf::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rot);
    border: 2px solid var(--rot);
    transform: skewX(var(--neigung));
    transition: background-color 0.15s, border-color 0.15s;
}

.knopf:hover {
    color: var(--weiss);
}

.knopf:hover::before {
    background: var(--rot-dunkel);
    border-color: var(--rot-dunkel);
}

.knopf[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* Heller Knopf für dunkle Flächen */
.knopf-hell,
.knopf-hell:hover {
    color: var(--nacht);
}

.knopf-hell::before {
    background: var(--weiss);
    border-color: var(--weiss);
}

.knopf-hell:hover::before {
    background: var(--eis-dunkel);
    border-color: var(--eis-dunkel);
}

/* Nur Rahmen: für Nebenwege wie „Alle News“ */
.knopf-rand,
.knopf-rand:hover {
    color: var(--nacht);
}

.knopf-rand::before {
    background: transparent;
    border-color: var(--nacht);
}

.knopf-rand:hover::before {
    background: var(--eis-dunkel);
    border-color: var(--nacht);
}

.knopf-klein {
    min-height: 2.5rem;
    padding: 0.4rem 1.1rem;
    font-size: 1.1rem;
}

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
}


/* 6. Kopfzeile und Navigation ============================================= */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--weiss);
    /* Die rote Mittellinie der Eisfläche */
    border-bottom: 3px solid var(--rot);
}

.kopf-innen {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(var(--breite) + 2 * var(--rand));
    min-height: var(--kopf-hoehe);
    margin-inline: auto;
    padding-inline: var(--rand);
}

/* Logo: Flocke + Schriftzug */
.marke {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-right: auto;
    color: var(--nacht);
    text-decoration: none;
}

.marke img {
    width: 2.75rem;
    height: 2.75rem;
}

.marke-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.marke-name {
    font-family: var(--schrift-titel);
    font-size: 1.9rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.01em;
}

.marke-dome {
    color: var(--rot);
}

.marke-unten {
    font-family: var(--schrift-titel);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--tinte-hell);
}

/* Anrufen */
.kopf-telefon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-weight: 600;
    color: var(--nacht);
    text-decoration: none;
}

.kopf-telefon span {
    display: none;
}

/* Menü-Knopf (nur kleine Bildschirme) */
.menue-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nacht);
    cursor: pointer;
}

.menue-knopf-striche,
.menue-knopf-striche::before,
.menue-knopf-striche::after {
    display: block;
    width: 1.6rem;
    height: 3px;
    background: currentColor;
    transition: transform 0.2s, background-color 0.2s;
}

.menue-knopf-striche {
    position: relative;
}

.menue-knopf-striche::before,
.menue-knopf-striche::after {
    content: "";
    position: absolute;
    left: 0;
}

.menue-knopf-striche::before { top: -0.5rem; }
.menue-knopf-striche::after { top: 0.5rem; }

/* Geöffnet: aus den drei Strichen wird ein Kreuz */
.menue-knopf[aria-expanded="true"] .menue-knopf-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::before { transform: translateY(0.5rem) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::after { transform: translateY(-0.5rem) rotate(-45deg); }

/* Menü auf kleinen Bildschirmen: klappt unter der Kopfzeile auf.
   Ohne JavaScript (kein .js am <html>) ist es einfach immer sichtbar. */
.hauptmenue ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hauptmenue a:not(.knopf) {
    display: block;
    padding: 0.7rem 0;
    font-family: var(--schrift-titel);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--nacht);
    text-decoration: none;
}

.hauptmenue a:not(.knopf):hover,
.hauptmenue a[aria-current="page"]:not(.knopf) {
    color: var(--rot);
}

.hauptmenue .untermenue {
    padding-left: 1rem;
    border-left: 3px solid var(--eis-dunkel);
}

.hauptmenue .untermenue a:not(.knopf) {
    padding: 0.45rem 0;
    font-size: 1.15rem;
}

.hauptmenue .knopf {
    margin: 0.75rem 0 0.25rem;
}

@media (max-width: 67.99rem) {
    .kopf-innen {
        flex-wrap: wrap;
    }

    .hauptmenue {
        flex-basis: 100%;
        max-height: calc(100vh - var(--kopf-hoehe));
        max-height: calc(100dvh - var(--kopf-hoehe));
        overflow-y: auto;
        padding-bottom: 1rem;
        border-top: 1px solid var(--linie);
    }

    .js .hauptmenue:not(.offen) {
        display: none;
    }

    html:not(.js) .menue-knopf {
        display: none;
    }
}

/* Große Bildschirme: Menü in einer Zeile, Untermenü klappt beim Überfahren auf */
@media (min-width: 68rem) {
    .menue-knopf {
        display: none;
    }

    .kopf-telefon {
        order: 3;
        margin-left: 0.5rem;
    }

    .kopf-telefon span {
        display: inline;
    }

    .hauptmenue > ul {
        display: flex;
        align-items: center;
        gap: 1.4rem;
    }

    .hauptmenue > ul > li {
        position: relative;
    }

    .hauptmenue a:not(.knopf) {
        padding: 0.4rem 0;
        font-size: 1.25rem;
    }

    .hauptmenue .knopf {
        margin: 0 0 0 0.4rem;
    }

    .hauptmenue .untermenue {
        position: absolute;
        top: 100%;
        left: -1rem;
        min-width: 13rem;
        padding: 0.5rem 1rem;
        border: 0;
        border-top: 3px solid var(--blau);
        background: var(--weiss);
        box-shadow: var(--schatten);
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.15s, visibility 0.15s;
    }

    .hat-untermenue:hover .untermenue,
    .hat-untermenue:focus-within .untermenue {
        visibility: visible;
        opacity: 1;
    }
}


/* 7. Bühne und Laufzeiten-Tafel =========================================== */

.buehne {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.5rem, 7vw, 5rem);
    background: var(--nacht);
    color: var(--weiss);
}

/* Foto der Halle, vom Nachtblau überlagert, damit der Text lesbar bleibt.
   Handy: Das Bild ist höher als sein sichtbarer Bereich und nach oben
   geschoben (top: -13rem). So fällt das Hallendach weg und direkt unter der
   Kopfzeile ist die Eisfläche zu sehen. Das Bild reicht bis hinter die
   Überschrift (21rem), darunter steht die Tafel auf einfarbigem Nachtblau. */
.buehne-bild {
    position: absolute;
    top: -13rem;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 34rem;
    object-fit: cover;
    opacity: 0.48;
}

/* Blauer Schleier. Handy: von oben nach unten dichter, läuft am unteren
   Bildrand (21rem) ins Nachtblau aus. */
.buehne::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(13, 34, 64, 0.45) 0, rgba(13, 34, 64, 0.65) 13rem, var(--nacht) 21rem);
}

.buehne-innen {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.buehne h1 {
    max-width: 12em;
    color: var(--weiss);
}

.buehne-text > p:not(.knopfreihe) {
    max-width: 30rem;
    font-size: 1.2rem;
}

/* Die Tafel: weiße Karte wie die Anzeigetafel am Eingang */
.laufzeiten {
    padding: 1.4rem 1.25rem 1.1rem;
    background: var(--weiss);
    color: var(--tinte);
    border-top: 5px solid var(--rot);
    box-shadow: var(--schatten);
}

.laufzeiten h2 {
    margin-bottom: 0.15em;
    font-size: 1.9rem;
}

.laufzeiten-hinweis {
    margin-bottom: 0.9rem;
    font-size: 0.95rem;
    color: var(--tinte-hell);
}

.laufzeiten-liste {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
}

.laufzeiten-liste li {
    display: grid;
    grid-template-columns: 6.6rem 1fr;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-top: 1px solid var(--linie);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.laufzeiten-tag {
    font-family: var(--schrift-titel);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--nacht);
}

/* Heutiger Wochentag (Klasse setzt js/heute.js) */
.laufzeiten-liste .ist-heute {
    background: var(--eis-dunkel);
    box-shadow: inset 4px 0 0 var(--rot);
}

.heute-marke {
    display: block;
    width: fit-content;
    margin-top: 0.15rem;
    padding: 0.05rem 0.45rem;
    font-family: var(--schrift-text);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--weiss);
    background: var(--rot);
}

.laufzeiten-mehr {
    margin: 0;
    font-weight: 600;
}

@media (min-width: 56rem) {
    .buehne-innen {
        grid-template-columns: 1fr minmax(21rem, 25rem);
        gap: 3rem;
    }

    /* Große Bildschirme: Das Foto füllt die ganze Bühne, der Schleier ist
       links (hinter dem Text) dichter als rechts. */
    .buehne-bild {
        top: 0;
        height: 100%;
    }

    .buehne::after {
        background: linear-gradient(100deg, rgba(13, 34, 64, 0.85) 0%, rgba(13, 34, 64, 0.65) 55%, rgba(13, 34, 64, 0.32) 100%);
    }
}


/* 8. Seitenkopf der Unterseiten =========================================== */

.seitenkopf {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(9rem, 24vw, 16rem);
    padding-block: 1.5rem;
    background: var(--nacht);
    /* Die blaue Drittellinie */
    border-bottom: 4px solid var(--blau);
}

.seitenkopf-bild {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seitenkopf::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(13, 34, 64, 0.9) 0%, rgba(13, 34, 64, 0.35) 70%);
}

.seitenkopf h1 {
    margin: 0;
    color: var(--weiss);
}


/* 9. Abschnitte, Fließtext, Raster ======================================== */

.abschnitt {
    padding-block: calc(var(--abstand-abschnitt) / 2);
}

/* Erster und letzter Abschnitt einer Seite bekommen mehr Luft */
main > .abschnitt:first-child,
.seitenkopf + .abschnitt,
.schnellzugriff + .abschnitt {
    padding-top: var(--abstand-abschnitt);
}

main > .abschnitt:last-child {
    padding-bottom: var(--abstand-abschnitt);
}

.abschnitt-getoent {
    padding-block: var(--abstand-abschnitt);
    background: var(--eis-dunkel);
}

.abschnitt-schmal {
    padding-block: 1rem;
}

/* Fließtext: Abstände zwischen Überschriften, Absätzen und Listen */
.fliesstext > :last-child {
    margin-bottom: 0;
}

.fliesstext h2:not(:first-child),
.fliesstext h3:not(:first-child) {
    margin-top: 1.4em;
}

.fliesstext ul,
.fliesstext ol {
    padding-left: 1.2rem;
}

.fliesstext li {
    margin-bottom: 0.4em;
    padding-left: 0.2rem;
}

.fliesstext ul > li::marker {
    color: var(--rot);
}

.fliesstext.mittig ul {
    display: inline-block;
    text-align: left;
}

/* Erster Satz einer Seite */
.vorspann {
    font-family: var(--schrift-titel);
    font-size: clamp(1.45rem, 3.2vw, 1.9rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--nacht);
}

/* Zeile direkt unter einer Überschrift */
.untertitel {
    margin-top: -0.35em;
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--rot-dunkel);
}

.klein {
    font-size: 0.9rem;
    color: var(--tinte-hell);
}

/* „Weiterlesen“: langer Einleitungstext klappt auf */
.mehr-lesen summary {
    width: fit-content;
    margin-bottom: 1em;
    font-weight: 600;
    color: var(--blau);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.mehr-lesen[open] summary {
    display: none;
}

/* Bild neben Text */
.bildtext {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

.bildtext-bild,
.spalten-bild,
.beitrag-bild {
    width: 100%;
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
}

@media (min-width: 56rem) {
    .bildtext {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 5vw, 4rem);
    }

    .bildtext-bild-rechts .bildtext-bild {
        order: 2;
    }
}

/* Zwei gleich breite Spalten */
.spalten {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 48rem) {
    .spalten {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 5vw, 4rem);
    }
}

/* Drei Spalten (Anfahrt, Kursdaten): ab mittlerer Breite nebeneinander */
@media (min-width: 60rem) {
    .spalten-drei {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

.spalten-drei h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.1rem);
}

address.untertitel {
    margin-top: 0;
}

/* Impressum und Datenschutz: ruhiger, kleinere Überschriften */
.rechtstext h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
.rechtstext h3 { font-size: 1.3rem; }


/* 10. Kacheln ============================================================= */

.schnellzugriff {
    padding-block: 1.25rem;
    background: var(--weiss);
    border-bottom: 4px solid var(--blau);
}

.kacheln {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 6.5rem;
    padding: 1rem 0.5rem;
    overflow: hidden;
    font-family: var(--schrift-titel);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    color: var(--nacht);
    text-decoration: none;
    background: var(--eis);
    border-bottom: 3px solid var(--linie);
    transition: border-color 0.15s, background-color 0.15s;
}

.kachel:hover {
    color: var(--rot-dunkel);
    background: var(--eis-dunkel);
    border-color: var(--rot);
}

.kachel .symbol {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--rot);
}

/* Kachel mit Foto: Schrift liegt weiß auf dem abgedunkelten Bild */
.kachel-bild {
    min-height: 9rem;
    color: var(--weiss);
    background: var(--nacht);
    border-color: var(--rot);
}

.kachel-bild:hover {
    color: var(--weiss);
    background: var(--nacht);
}

.kachel-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    transition: opacity 0.2s;
}

.kachel-bild:hover img {
    opacity: 0.4;
}

.kachel-bild span {
    position: relative;
    font-size: 1.6rem;
    text-shadow: 0 1px 8px rgba(13, 34, 64, 0.8);
}

/* Fünf Kacheln der Startseite: die letzte füllt auf dem Handy die Zeile */
.kacheln-fuenf > :last-child {
    grid-column: 1 / -1;
}

@media (min-width: 40rem) {
    .kacheln {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Standard: zwei Symbol-Kacheln oben, drei Foto-Kacheln darunter */
    .kacheln > .kachel { grid-column: span 3; }
    .kacheln > .kachel-bild { grid-column: span 2; }

    .kacheln-fuenf {
        grid-template-columns: repeat(5, 1fr);
    }

    .kacheln-fuenf > .kachel,
    .kacheln-fuenf > :last-child {
        grid-column: auto;
    }
}


/* 11. Tafeln und Aufklapplisten =========================================== */
/* Eine Tafel-Zeile: links der Tag bzw. die Preisgruppe, rechts die Einträge. */

.tafel {
    margin-top: 1.5rem;
    background: var(--weiss);
    border-top: 5px solid var(--rot);
    box-shadow: var(--schatten);
}

.tafel-zeile {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--linie);
}

.tafel-zeile:last-child {
    border-bottom: 0;
}

.tafel-tag {
    margin: 0 0 0.35rem;
    font-size: 1.4rem;
}

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

.tafel li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.1rem 1rem;
    padding: 0.2rem 0;
    font-variant-numeric: tabular-nums;
}

.tafel-zeit {
    font-weight: 600;
    white-space: nowrap;
}

.tafel-art {
    color: var(--tinte-hell);
}

/* Zeiten, die nicht zum öffentlichen Lauf gehören (z. B. Eishockey) */
.tafel-neben,
.tafel-neben .tafel-zeit {
    font-weight: 400;
    font-style: italic;
    color: var(--tinte-hell);
}

.tafel-preise .tafel-art {
    color: var(--tinte);
}

.tafel-preis {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
    color: var(--nacht);
}

.tafel .ist-heute {
    background: var(--eis);
    box-shadow: inset 5px 0 0 var(--rot);
}

.tafel .heute-marke {
    display: inline-block;
    margin: 0 0 0 0.6rem;
    vertical-align: middle;
    font-style: normal;
}

@media (min-width: 40rem) {
    .tafel-zeile {
        display: grid;
        grid-template-columns: 11rem 1fr;
        gap: 1rem;
        align-items: start;
        padding: 1rem 1.5rem;
    }

    .tafel-tag {
        margin: 0;
    }

    .tafel:not(.tafel-preise) li {
        display: grid;
        grid-template-columns: 10.5rem 1fr;
    }
}

/* Aufklappliste (FAQ, Hobbyteams, Sonderöffnungszeiten) */
.klappliste {
    margin-top: 1.5rem;
}

.klappliste details {
    margin-bottom: 0.6rem;
    background: var(--weiss);
    border-left: 4px solid var(--blau);
}

.klappliste summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--nacht);
    cursor: pointer;
    list-style: none;
}

.klappliste summary::-webkit-details-marker {
    display: none;
}

/* Plus-Zeichen, das sich beim Öffnen zum Kreuz dreht */
.klappliste summary::after {
    content: "+";
    flex: none;
    font-family: var(--schrift-text);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    color: var(--rot);
    transition: transform 0.2s;
}

.klappliste details[open] > summary::after {
    transform: rotate(45deg);
}

.klappliste details[open] {
    border-left-color: var(--rot);
}

.klappliste details > .fliesstext {
    padding: 0 1.1rem 1.1rem;
}

.klappliste .tafel {
    margin-top: 1rem;
    border-top-width: 3px;
    box-shadow: none;
    border-inline: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
}


/* 12. Bilderband und Großansicht ========================================== */
/* Das Band lässt sich seitlich wischen; ganz ohne JavaScript. */

.galerie-band {
    padding-block: 1.5rem;
    background: var(--nacht);
}

.galerie {
    display: flex;
    gap: 0.75rem;
    padding-inline: var(--rand);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--rot) transparent;
}

.galerie a {
    flex: none;
    scroll-snap-align: start;
}

.galerie img {
    width: auto;
    height: clamp(9rem, 22vw, 14rem);
    max-width: none;
    border-radius: 2px;
}

.grossansicht {
    max-width: min(96vw, 80rem);
    max-height: 94vh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.grossansicht::backdrop {
    background: rgba(13, 34, 64, 0.88);
}

.grossansicht img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    border-radius: 2px;
}

.grossansicht-schliessen {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--weiss);
    color: var(--nacht);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}


/* 13. Speisekarte, Rundgang, Ansprechpartner, Partner ===================== */

.speisekarte,
.rundgang {
    position: relative;
    isolation: isolate;
    background: var(--nacht);
    color: var(--weiss);
}

.speisekarte {
    padding-block: var(--abstand-abschnitt);
}

.speisekarte-bild,
.rundgang-bild {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}

.speisekarte h2,
.rundgang h2 {
    color: var(--weiss);
}

.speisekarte h2 {
    text-align: center;
}

.speisen {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}

.speisen li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 1.1rem;
}

.speisen sup {
    font-size: 0.7em;
    opacity: 0.8;
}

.speisen .preis {
    font-weight: 600;
    white-space: nowrap;
}

.speisekarte .klein {
    color: rgba(255, 255, 255, 0.8);
}

/* Virtueller Rundgang */
.rundgang {
    padding-block: clamp(2.5rem, 6vw, 4rem);
    border-block: 4px solid var(--blau);
}

.rundgang-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.rundgang h2 {
    margin-bottom: 0.2em;
}

.rundgang p {
    margin: 0;
    font-size: 1.15rem;
}

/* Ansprechpartner */
.personen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 15rem));
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.person {
    margin: 0;
    background: var(--weiss);
    border-bottom: 4px solid var(--rot);
    box-shadow: var(--schatten);
}

.person img {
    width: 100%;
}

.person figcaption {
    padding: 0.8rem 1rem 1rem;
}

.person-funktion,
.person-name {
    display: block;
}

.person-funktion {
    font-size: 0.95rem;
    color: var(--tinte-hell);
}

.person-name {
    font-family: var(--schrift-titel);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--nacht);
}

/* Partner-Logos */
.partner {
    padding-block: 2rem;
    background: var(--weiss);
}

.partner-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.5rem;
}

.partner-logos img {
    width: clamp(6.5rem, 14vw, 9rem);
}

.knopfreihe-mittig {
    justify-content: center;
}


/* 14. News ================================================================ */

.news-karten {
    display: grid;
    gap: 1.5rem;
    margin-block: 1.5rem;
}

.news-karte {
    display: flex;
    flex-direction: column;
    color: var(--tinte);
    text-decoration: none;
    background: var(--weiss);
    border-bottom: 4px solid var(--linie);
    box-shadow: var(--schatten);
    transition: border-color 0.15s;
}

.news-karte:hover {
    color: var(--tinte);
    border-color: var(--rot);
}

.news-karte img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.news-karte-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.1rem 1.2rem;
}

.news-karte-datum,
.beitrag-datum {
    font-size: 0.95rem;
    color: var(--tinte-hell);
}

.news-karte-titel {
    font-family: var(--schrift-titel);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--nacht);
}

.news-karte:hover .news-karte-titel {
    color: var(--rot-dunkel);
}

@media (min-width: 40rem) {
    .news-karten {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 60rem) {
    .news-karten {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Einzelner Beitrag */
.beitrag-datum {
    margin-bottom: 0.3rem;
}

.beitrag-bild {
    margin-bottom: 1.75rem;
}

article .knopf-rand {
    margin-top: 1.5rem;
}


/* 15. Formulare =========================================================== */

.formular-karte {
    margin-top: 1.75rem;
    padding: clamp(1.1rem, 4vw, 2rem);
    text-align: left;
    background: var(--weiss);
    border-top: 5px solid var(--blau);
    box-shadow: var(--schatten);
}

.felder {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 40rem) {
    .felder {
        grid-template-columns: 1fr 1fr;
    }

    .feld-breit {
        grid-column: 1 / -1;
    }
}

.feld label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
}

.feld input:not([type="checkbox"]),
.feld select,
.feld textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--tinte);
    background: var(--eis);
    border: 2px solid var(--linie);
    border-radius: 2px;
}

.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
    outline-offset: 0;
    border-color: var(--blau);
    background: var(--weiss);
}

.feld textarea {
    resize: vertical;
}

/* Zustimmung zum Datenschutz: Kästchen links, Text rechts */
.feld-haken {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.feld-haken input {
    width: 1.4rem;
    height: 1.4rem;
    margin: 0.15rem 0 0;
    accent-color: var(--rot);
}

.feld-haken label {
    margin: 0;
    font-weight: 400;
    font-size: 0.95rem;
}

/* Falle für Spam-Programme: aus dem sichtbaren Bereich geschoben */
.feld-falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.meldung {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    font-weight: 600;
    border-left: 5px solid;
}

.meldung-fehler {
    color: var(--fehler);
    background: #fdecec;
}

.meldung-erfolg {
    color: var(--erfolg);
    background: #e6f4ec;
}

/* Das Attribut hidden muss auch gegen display-Angaben gewinnen */
[hidden] {
    display: none !important;
}


/* 16. Karte =============================================================== */

.einbettung {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 20rem;
    margin-top: 1.5rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--eis-dunkel);
    border: 2px solid var(--linie);
}

.einbettung.geladen {
    padding: 0;
    border: 0;
}

.einbettung iframe {
    width: 100%;
    height: 26rem;
    border: 0;
}

.einbettung-hinweis {
    max-width: 32rem;
    margin: 1rem 0 0;
    font-size: 0.95rem;
}


/* 17. Seitenfuß =========================================================== */

.fuss {
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.86);
    background: var(--nacht);
    border-top: 4px solid var(--rot);
}

.fuss a {
    color: var(--weiss);
}

.fuss a:hover {
    color: var(--rot-hell);
}

.fuss-innen {
    position: relative;
    display: grid;
    gap: 1.75rem;
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding: 3rem var(--rand) 2rem;
}

.fuss-logo {
    width: 6rem;
    height: 6rem;
}

.fuss h2 {
    margin-bottom: 0.4em;
    font-size: 1.5rem;
    font-weight: 600;
    font-style: normal;
    color: var(--weiss);
}

.fuss-sozial {
    display: flex;
    gap: 0.5rem;
}

.fuss-sozial a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

.fuss-sozial a:hover {
    border-color: var(--rot-hell);
}

.fuss-unten {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    /* Unten Platz für die Leiste des Vorschau-Popups */
    padding: 1.25rem var(--rand) 4.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.95rem;
}

.fuss-unten p {
    margin: 0;
}

.fuss-unten nav {
    display: flex;
    gap: 1.5rem;
}

@media (min-width: 48rem) {
    .fuss-innen {
        grid-template-columns: auto repeat(3, 1fr);
        gap: 3rem;
    }
}

/* Fehlerseite 404 */
.fehlerseite {
    padding-block: calc(var(--abstand-abschnitt) * 1.2);
}

.fehlerseite img {
    width: 6rem;
    margin: 0 auto 1.5rem;
}


/* 18. Deko und Animation ================================================== */

/* Der Anspielkreis der Eisfläche, groß und blass im Seitenfuß */
.fuss::before {
    content: "";
    position: absolute;
    right: -6rem;
    top: -3rem;
    width: 22rem;
    height: 22rem;
    border: 3px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 0.6rem, transparent 0.65rem);
    pointer-events: none;
}

/* Schlittschuhspur in der Bühne: zieht sich beim Laden einmal über das Eis.
   Das ist die einzige selbstständige Bewegung auf der Website. */
.buehne-spur {
    position: absolute;
    inset: auto 0 0 0;
    z-index: -1;
    width: 100%;
    height: 70%;
    max-width: none;
}

.buehne-spur path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.32);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: spur-ziehen 2.4s cubic-bezier(0.3, 0.6, 0.2, 1) 0.3s forwards;
}

@keyframes spur-ziehen {
    to { stroke-dashoffset: 0; }
}


/* 19. Weniger Bewegung, Druck ============================================= */

/* Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, sieht die
   Spur sofort fertig und keine Übergänge. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .buehne-spur path {
        stroke-dashoffset: 0;
    }
}

@media print {
    .kopf,
    .fuss,
    .galerie-band,
    .rundgang,
    .schnellzugriff,
    .formular-karte,
    .einbettung {
        display: none;
    }

    body {
        background: #fff;
    }

    /* Aufklapptexte gehören mit aufs Papier */
    details > * {
        display: block;
    }
}