/* skiclub-bayrischzell.de, Stil der oeffentlichen Seite (Skiclub Bayrischzell e. V., gegr. 1922)
   Farben aus dem bisherigen Auftritt: Dunkelblau (#32395e) und Logo-Blau (#3774b8), dazu das Orange
   des alten Knopfs "Anmeldung Training" als Signalfarbe. Ueberschriften Barlow Condensed (wie
   Startnummern und Pistenschilder), Text Source Sans 3. Schriften selbst gehostet (OFL),
   keine Verbindung zu Google. Inhaltsbreite voll genutzt, lange Texte in Karten und Spalten. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/barlow-condensed-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/barlow-condensed-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-sans-3-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-sans-3-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-sans-3-latin-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-sans-3-latin-ext-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --nacht: #1f2650;           /* Kopf, Fuss, Ueberschriften */
  --marine: #32395e;          /* Dunkelblau der alten Seite */
  --logo: #3774b8;            /* Logo-Blau, Flaechen */
  --blau: #2b63a6;            /* Links, 6:1 auf Weiss */
  --blau-dunkel: #1d4a80;
  --orange: #ec8a0c;          /* Signal, wie der alte Knopf "Anmeldung Training" */
  --orange-dunkel: #a85f00;   /* Orange als Schrift auf Weiss */
  --schnee: #f4f7fb;
  --eis: #e6eef8;
  --linie: #d5dfec;
  --text: #1d2440;
  --grau: #56607e;            /* 6:1 */
  --rot: #c62828;
  --breite: 1840px;
  --rand: clamp(20px, 3.4vw, 64px);
  --radius: 14px;
  --schatten: 0 10px 30px rgba(31, 38, 80, .12);
  --kopf: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --schrift: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body { margin: 0; font: 400 18px/1.62 var(--schrift); color: var(--text); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { color: var(--blau-dunkel); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--kopf); font-weight: 700; color: var(--nacht); line-height: 1.04; margin: 1.4em 0 .5em; }
h1 { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.6rem); text-transform: uppercase; letter-spacing: .01em; margin-top: 0; }
h1 span { color: var(--logo); }
h2 { font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem); }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.12rem; font-weight: 700; color: var(--nacht); margin: 1.3em 0 .4em; }
p { margin: 0 0 1em; }
strong { font-weight: 650; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--nacht); color: #fff; padding: 8px 14px; z-index: 60; border-radius: 6px; }
.sprung:focus { left: 8px; }
.baustelle { margin: 0; background: var(--orange); color: var(--nacht); text-align: center; font-size: .9rem; font-weight: 700; padding: 6px 16px; }
.baustelle a { color: var(--nacht); }

/* ---------- Kopf und Menue ---------- */
.kopf { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid var(--linie); }
.kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: linear-gradient(90deg, var(--nacht) 0 33%, var(--logo) 33% 66%, var(--orange) 66%); opacity: .9; }
.kopf__innen { max-width: var(--breite); margin: 0 auto; padding: 10px var(--rand); display: flex; align-items: center; gap: 24px; }
.marke { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--nacht); margin-right: auto; }
.marke__logo { width: 64px; height: auto; }
.marke__text { display: flex; flex-direction: column; line-height: 1; }
.marke__gross { font-family: var(--kopf); font-weight: 700; font-size: 1.85rem; text-transform: uppercase; letter-spacing: .02em; }
.marke__klein { font-family: var(--kopf); font-weight: 600; font-size: 1.02rem; color: var(--logo); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.navi__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; }
.navi__punkt { position: relative; }
.navi__punkt > a { display: block; padding: 10px 14px; font-family: var(--kopf); font-weight: 600; font-size: 1.22rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; color: var(--nacht); text-decoration: none; border-radius: 8px; }
.navi__punkt > a:hover, .navi__punkt.ist-aktiv > a { color: var(--blau); background: var(--eis); }
.navi__punkt.ist-hervor { margin-left: 12px; }
.navi__punkt.ist-hervor > a { background: var(--orange); color: var(--nacht); border-radius: 999px; padding: 10px 22px; }
.navi__punkt.ist-hervor > a:hover { background: #ffa22e; color: var(--nacht); }
.navi__auf { display: none; }
.navi__unter { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; border: 1px solid var(--linie); border-radius: 12px; box-shadow: var(--schatten); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.navi__punkt:hover > .navi__unter, .navi__punkt:focus-within > .navi__unter { opacity: 1; visibility: visible; transform: none; }
.navi__unter a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--nacht); text-decoration: none; font-weight: 600; }
.navi__unter a:hover { background: var(--schnee); color: var(--blau); }
.menueknopf { display: none; }

@media (max-width: 1180px) {
  .menueknopf { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linie); background: #fff; border-radius: 8px; padding: 9px 12px; font: 700 1rem var(--schrift); color: var(--nacht); cursor: pointer; }
  .menueknopf__striche, .menueknopf__striche::before, .menueknopf__striche::after { display: block; width: 18px; height: 2px; background: var(--nacht); position: relative; content: ""; }
  .menueknopf__striche::before { position: absolute; top: -6px; }
  .menueknopf__striche::after { position: absolute; top: 6px; }
  .navi { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--linie); box-shadow: var(--schatten); max-height: calc(100vh - 80px); overflow-y: auto; }
  .kopf.ist-offen .navi { display: block; }
  .navi__liste { flex-direction: column; align-items: stretch; padding: 8px 16px 18px; }
  .navi__punkt { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--linie); }
  .navi__punkt > a { flex: 1; padding: 14px 8px; font-size: 1.35rem; }
  .navi__punkt.ist-hervor { margin: 14px 0 0; border: 0; }
  .navi__punkt.ist-hervor > a { text-align: center; }
  .navi__auf { display: block; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; position: relative; }
  .navi__auf::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--nacht); border-bottom: 2px solid var(--nacht); transform: translate(-50%, -70%) rotate(45deg); transition: transform .15s; }
  .navi__auf[aria-expanded="true"]::before { transform: translate(-50%, -30%) rotate(-135deg); }
  .navi__unter { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; width: 100%; padding: 0 0 10px 12px; display: none; }
  .navi__punkt.ist-auf > .navi__unter { display: block; }
}
@media (max-width: 560px) {
  .marke__logo { width: 50px; }
  .marke__gross { font-size: 1.45rem; }
  .marke__klein { font-size: .9rem; }
}

/* ---------- Grundgeruest ---------- */
.haupt { min-height: min(50vh, 520px); }
.blatt { max-width: var(--breite); margin: 0 auto; padding: 52px var(--rand) 72px; }
.seitenkopf { margin-bottom: 32px; }
.seitenkopf__ueber, .band__ueber { font-family: var(--kopf); font-weight: 600; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-dunkel); margin: 0 0 6px; }
.seitenkopf__satz { font-size: 1.2rem; color: var(--grau); margin: 0; }
.abschnitt { margin: 44px 0 18px; text-transform: uppercase; letter-spacing: .02em; }
.abschnitt__satz { color: var(--grau); margin-top: -8px; }
.pfad { font-size: .95rem; color: var(--grau); margin-bottom: .6em; }
.pfad a { color: var(--grau); }
.datum { color: var(--grau); margin: 0; }
.leer { color: var(--grau); }
.hinweis { background: #fff6e8; border-left: 4px solid var(--orange); padding: 12px 16px; border-radius: 8px; }

.text > :first-child { margin-top: 0; }
.text img { border-radius: 8px; margin: 1em 0; max-height: 80vh; width: auto; }
.text figure { margin: 1.2em 0; }
.text figure img { margin: 0; }
.text figcaption { font-size: .88rem; color: var(--grau); margin-top: 6px; }
.text ul, .text ol { padding-left: 1.3em; margin: 0 0 1em; }
.text li { margin-bottom: .35em; }
.text li::marker { color: var(--logo); }
.text h2 { font-size: 1.75rem; }
.text h3 { font-size: 1.35rem; }
.text blockquote { margin: 1.4em 0; padding: .4em 0 .4em 1.1em; border-left: 4px solid var(--logo); color: var(--nacht); }
.text hr { border: 0; border-top: 1px solid var(--linie); margin: 2em 0; }
.text table { width: 100%; border-collapse: collapse; margin: .6em 0 1.4em; }
@media (max-width: 760px) { .text table { display: block; overflow-x: auto; } }
.text th, .text td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.text td:last-child { text-align: right; font-weight: 650; color: var(--nacht); white-space: nowrap; }
.text th { font-weight: 700; color: var(--nacht); background: var(--schnee); }
.text a[href$=".pdf"], .text a[href$=".doc"] { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 10px; background: var(--schnee); border: 1px solid var(--linie); text-decoration: none; font-weight: 650; color: var(--nacht); }
.text a[href$=".pdf"]:hover, .text a[href$=".doc"]:hover { border-color: var(--logo); background: var(--eis); }
.text a[href$=".pdf"]::before, .text a[href$=".doc"]::before { content: "PDF"; font: 700 .72rem/1 var(--schrift); background: var(--rot); color: #fff; padding: 5px 6px; border-radius: 4px; letter-spacing: .04em; }
.text a[href$=".doc"]::before { content: "DOC"; background: var(--logo); }
.text--spalten { columns: 3 30em; column-gap: 56px; }
.text--spalten h2, .text--spalten h3 { break-after: avoid; }
.text--spalten p, .text--spalten li { break-inside: avoid-column; }

.knopf { display: inline-block; padding: 13px 26px; border-radius: 999px; font-family: var(--kopf); font-weight: 700; text-decoration: none; border: 2px solid transparent; font-size: 1.22rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: background .15s, transform .15s; }
.knopf:hover { transform: translateY(-1px); }
.knopf--voll { background: var(--blau); color: #fff; }
.knopf--voll:hover { background: var(--blau-dunkel); color: #fff; }
.knopf--orange { background: var(--orange); color: var(--nacht); }
.knopf--orange:hover { background: #ffa22e; color: var(--nacht); }
.knopf--hell { background: #fff; color: var(--nacht); }
.knopf--hell:hover { background: var(--eis); color: var(--nacht); }
.knopf--rand { border-color: rgba(255, 255, 255, .85); color: #fff; }
.knopf--rand:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.knopf--linie { border-color: var(--blau); color: var(--blau); background: #fff; }
.knopf--linie:hover { background: var(--eis); }
.knopf--klein { padding: 8px 16px; font-size: 1rem; }
.weiter { font-family: var(--kopf); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.weiter::after { content: " →"; }

.kasten { background: var(--schnee); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px 26px; }
.kasten h2 { font-size: 1.6rem; margin: 0 0 .5em; }
.kasten p:last-child, .kasten ol:last-child { margin-bottom: 0; }
.kasten--leise { background: #fff; border-style: dashed; }
.kasten__klein { font-size: .92rem; color: var(--grau); }
.kasten--termin { display: flex; gap: 18px; align-items: center; margin: 0 0 28px; background: var(--eis); border-color: #c8d8ee; }
.kasten--termin div { display: flex; flex-direction: column; gap: 2px; }
.kasten--termin strong { font-size: 1.15rem; color: var(--nacht); }

/* ---------- Startseite: Kopfbild ---------- */
.held { position: relative; overflow: hidden; background: var(--nacht); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.held__hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.held::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(20, 26, 60, .82) 0%, rgba(20, 26, 60, .55) 42%, rgba(20, 26, 60, .12) 75%),
  linear-gradient(0deg, rgba(20, 26, 60, .55), transparent 40%); }
.held__innen { position: relative; z-index: 1; max-width: var(--breite); margin: 0 auto; padding: clamp(64px, 9vw, 130px) var(--rand) clamp(120px, 13vw, 190px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: min(78vh, 760px); }
.held__ueber { font-family: var(--kopf); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 1.15rem; margin: 0 0 12px; color: #ffd08f; }
.held h1 { color: #fff; font-size: clamp(3rem, 1.4rem + 6vw, 7.4rem); line-height: .9; margin: 0 0 24px; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.held h1 span { display: block; color: #fff; }
.held__satz { font-size: clamp(1.15rem, 1rem + .45vw, 1.45rem); max-width: 34em; margin-bottom: 30px; }
.held__satz p { margin: 0; }
.held__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.held__zeichen { justify-self: end; width: min(100%, 400px); opacity: .92; filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .3)); }
@media (max-width: 900px) {
  .held { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
  .held__innen { grid-template-columns: 1fr; padding: 48px 20px 96px; min-height: 0; }
  .held::after { background: linear-gradient(180deg, rgba(20, 26, 60, .78), rgba(20, 26, 60, .5)); }
  .held__zeichen { display: none; }
}

/* ---------- Baender der Startseite ---------- */
.band { max-width: var(--breite); margin: 0 auto; padding: 56px var(--rand); }
.band__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.band__titel { margin: 0; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
@media (max-width: 900px) { .band { padding: 40px 20px; } }
.band--termine { padding-top: 24px; }

/* Termin als Startnummer: Monat im Band oben, grosse Zahl, Wochentag. Zwei "Sicherheitsnadeln". */
.bib { position: relative; flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; background: #fff; border: 2px solid var(--nacht); border-radius: 10px; overflow: hidden; line-height: 1; box-shadow: 0 4px 0 var(--nacht); }
.bib::before, .bib::after { content: ""; position: absolute; top: 34px; width: 7px; height: 7px; border-radius: 50%; background: var(--linie); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25); }
.bib::before { left: 7px; }
.bib::after { right: 7px; }
.bib__kopf { width: 100%; text-align: center; background: var(--nacht); color: #fff; font-family: var(--kopf); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 1.05rem; padding: 5px 0 4px; }
.bib__zahl { font-family: var(--kopf); font-weight: 700; font-size: 3.4rem; color: var(--nacht); padding: 6px 0 0; letter-spacing: -.01em; }
.bib__tag { font-family: var(--kopf); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--orange-dunkel); padding: 2px 0 10px; }
.bib__frei { font-family: var(--kopf); font-weight: 700; font-size: 1.15rem; text-align: center; color: var(--nacht); padding: 16px 6px 18px; line-height: 1.1; }
.startnummern { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.startnummer { display: flex; gap: 20px; align-items: flex-start; padding: 22px; border-radius: var(--radius); background: var(--schnee); border: 1px solid var(--linie); }
.startnummer__was h3 { margin: 4px 0 6px; font-size: 1.65rem; }
.startnummer__was h3 a { color: inherit; text-decoration: none; }
.startnummer__was p { color: var(--grau); margin: 0; }
.startnummer.ist-abgesagt h3 { text-decoration: line-through; color: var(--grau); }
@media (max-width: 1100px) { .startnummern { grid-template-columns: 1fr; } }

.vereinsjahr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 32px; align-items: stretch; }
.vereinsjahr__hinweis { background: var(--nacht); color: #dfe5f6; border-radius: var(--radius); padding: 28px; }
.vereinsjahr__gross { font-family: var(--kopf); font-weight: 700; font-size: 2rem; line-height: 1.05; color: #fff; text-transform: uppercase; }
.vereinsjahr__titel { margin: 0 0 12px; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; }
.vereinsjahr__liste ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: monat; }
.vereinsjahr__liste li { position: relative; padding: 18px 20px 18px 22px; background: var(--schnee); border: 1px solid var(--linie); border-left: 5px solid var(--logo); border-radius: 10px; color: var(--text); }
.vereinsjahr__liste li:nth-child(3n+2) { border-left-color: var(--orange); }
.vereinsjahr__liste li:nth-child(3n) { border-left-color: var(--nacht); }
.vereinsjahr__liste strong { display: block; font-family: var(--kopf); font-weight: 700; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nacht); line-height: 1.1; margin-bottom: 2px; }
.vereinsjahr--seite { margin-bottom: 36px; }
.vereinsjahr--nur-hinweis { grid-template-columns: 1fr; }
.vereinsjahr--nur-hinweis .vereinsjahr__hinweis { padding: 34px 36px; }
.vereinsjahr--nur-hinweis .vereinsjahr__gross { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); }
@media (max-width: 1100px) { .vereinsjahr { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .vereinsjahr__titel { margin: 0 0 12px; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; }
.vereinsjahr__liste ol { grid-template-columns: 1fr; } }

.ansagen-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; padding: 14px 18px; border-radius: 12px; background: #fff6e8; border: 1px solid #f6d6a8; }
.ansagen-leiste__titel { font-family: var(--kopf); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange-dunkel); margin-right: 6px; }
.ansagen-leiste a { text-decoration: none; font-weight: 650; color: var(--nacht); }
.ansagen-leiste a span { margin-right: 8px; }
.ansage__gruppe, .ansagen-leiste a span { display: inline-block; background: var(--nacht); color: #fff; font-family: var(--kopf); font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }

/* Sparten */
.sparten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sparte a { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 250px; padding: 26px 26px 28px; border-radius: var(--radius); text-decoration: none; color: #fff; background: var(--nacht); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.sparte a::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 170px; height: 150px; background: rgba(255, 255, 255, .07); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sparte a:hover { transform: translateY(-3px); box-shadow: var(--schatten); color: #fff; }
.sparte--2 a { background: var(--logo); }
.sparte--3 a { background: var(--orange); color: var(--nacht); }
.sparte--3 a:hover { color: var(--nacht); }
.sparte--4 a { background: var(--marine); }
.sparte__nr { font-family: var(--kopf); font-weight: 700; font-size: 1.1rem; letter-spacing: .14em; opacity: .75; }
.sparte strong { font-family: var(--kopf); font-weight: 700; font-size: 2.1rem; line-height: 1; text-transform: uppercase; }
.sparte__vor { font-size: 1rem; opacity: .92; margin-top: auto; }
@media (max-width: 1100px) { .sparten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sparten { grid-template-columns: 1fr; } .sparte a { min-height: 0; } }

/* Chronik-Band */
.chronikband { background: var(--nacht); color: #dfe5f6; margin: 24px 0; position: relative; overflow: hidden; }
.chronikband::before { content: ""; position: absolute; inset: 0; background: url(logo-weiss.png) no-repeat right -80px center / 520px auto; opacity: .05; }
.chronikband__innen { position: relative; max-width: var(--breite); margin: 0 auto; padding: 72px var(--rand); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: center; }
.chronikband__ueber { font-family: var(--kopf); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #ffd08f; margin: 0 0 8px; }
.chronikband h2 { color: #fff; font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.4rem); text-transform: uppercase; margin: 0 0 16px; }
.chronikband p { font-size: 1.12rem; }
.meilensteine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.meilensteine li { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: var(--radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: 1.05rem; }
.meilensteine__jahr { font-family: var(--kopf); font-weight: 700; font-size: 3.4rem; line-height: .95; color: var(--orange); }
@media (max-width: 1000px) { .chronikband__innen { grid-template-columns: 1fr; gap: 32px; padding: 52px 20px; } }
@media (max-width: 560px) { .meilensteine { grid-template-columns: 1fr; } }

/* Zwei Kacheln */
.band--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.kachel { display: flex; flex-direction: column; gap: 8px; padding: 32px 34px; border-radius: var(--radius); text-decoration: none; color: var(--nacht); min-height: 220px; transition: transform .15s, box-shadow .15s; }
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten); color: var(--nacht); }
.kachel strong { font-family: var(--kopf); font-weight: 700; font-size: clamp(1.9rem, 1.5rem + 1vw, 2.6rem); line-height: 1.02; text-transform: uppercase; }
.kachel__ueber { font-family: var(--kopf); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.kachel > span:last-child { margin-top: auto; font-size: 1.08rem; }
.kachel--ergebnisse { background: var(--eis); border: 1px solid #c8d8ee; }
.kachel--ergebnisse .kachel__ueber { color: var(--blau); }
.kachel--mitglied { background: var(--orange); }
@media (max-width: 860px) { .band--zwei { grid-template-columns: 1fr; } }

/* Fotostreifen */
.fotostreifen { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; border-radius: var(--radius); overflow: hidden; text-decoration: none; }
.fotostreifen img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .3s; }
.fotostreifen:hover img { transform: scale(1.03); }
.fotostreifen__titel { position: absolute; left: 16px; bottom: 16px; background: #fff; color: var(--nacht); font-family: var(--kopf); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; box-shadow: var(--schatten); }
.fotostreifen__titel span { color: var(--orange-dunkel); }
@media (max-width: 760px) { .fotostreifen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Karten (Nachrichten) ---------- */
.karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.karten--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .karten--vier { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .karten--vier, .karten--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .karten--vier, .karten--drei { grid-template-columns: 1fr; } }
.karte a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--linie); background: #fff; transition: box-shadow .15s, transform .15s; }
.karte a:hover { box-shadow: var(--schatten); transform: translateY(-2px); }
.karte__bild { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--eis); }
.karte__bild--leer { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--nacht), var(--logo)); }
.karte__bild--leer img { width: 110px; height: auto; opacity: .9; }
.karte__text { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.karte__oben { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.karte__oben time { font-size: .9rem; color: var(--grau); }
.karte__text strong { font-family: var(--kopf); font-weight: 700; color: var(--nacht); font-size: 1.6rem; line-height: 1.05; }
.karte__vor { font-size: .98rem; color: var(--grau); }

.marke-thema { font-family: var(--kopf); font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 2px 10px; border-radius: 999px; background: var(--eis); color: var(--blau-dunkel); }
.marke-thema--rundschreiben { background: var(--nacht); color: #fff; }
.marke-thema--rennen { background: #fff0db; color: #7a4500; }
.marke-thema--feste { background: #fbe8f0; color: #84235b; }
.marke-thema--bilder { background: #e2f3ec; color: #0f5e4e; }
.marke-status { font-size: .78rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.marke-status--ab { background: var(--rot); color: #fff; }

/* ---------- Aktuelles: Filter ---------- */
.filter { display: grid; grid-template-columns: 2fr 1fr auto; gap: 14px; align-items: end; background: var(--schnee); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; }
.filter__feld { display: flex; flex-direction: column; gap: 6px; }
.filter__name { font-weight: 700; font-size: .92rem; color: var(--nacht); }
.filter input, .filter select { font: inherit; padding: 11px 12px; border: 1px solid #b8c6da; border-radius: 8px; background: #fff; width: 100%; }
@media (max-width: 760px) { .filter { grid-template-columns: 1fr; } }
.themen { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.themen a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie); text-decoration: none; color: var(--nacht); font-weight: 650; font-size: .95rem; background: #fff; }
.themen a span { color: var(--grau); font-weight: 400; font-size: .88rem; }
.themen a:hover { border-color: var(--blau); }
.themen a[aria-current="page"] { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.themen a[aria-current="page"] span { color: #c9d2ee; }
.treffer { color: var(--grau); margin: 10px 0 22px; }
.seitenzahl { display: flex; justify-content: center; gap: 24px; align-items: center; margin-top: 36px; font-weight: 700; }

/* ---------- Einzelne Nachricht ---------- */
.beitrag { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.beitrag--ohne-bild { grid-template-columns: 1fr; }
.beitrag--ohne-bild .text { columns: 2 34em; column-gap: 64px; }
.beitrag--ohne-bild .text h2 { break-after: avoid; margin-top: .4em; }
.beitrag--ohne-bild .text p, .beitrag--ohne-bild .text li { break-inside: avoid-column; }
.titelbild { margin: 0; position: sticky; top: 120px; }
.titelbild img { border-radius: var(--radius); width: 100%; }
@media (max-width: 900px) { .beitrag { grid-template-columns: 1fr; gap: 24px; } .titelbild { position: static; } }
.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linie); }
.blaettern a { text-decoration: none; font-weight: 700; line-height: 1.35; }
.blaettern span { display: block; font-size: .88rem; color: var(--grau); font-weight: 400; }
.blaettern__aelter { grid-column: 2; text-align: right; }

/* ---------- Termine ---------- */
.tliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 12px; }
.tzeile { display: flex; gap: 18px; align-items: center; padding: 12px; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
.tzeile__was { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.tzeile__was strong { font-family: var(--kopf); font-weight: 700; color: var(--nacht); font-size: 1.45rem; line-height: 1.1; }
.tzeile__was span { color: var(--grau); font-size: .97rem; }
.tzeile__mehr { font-size: .95rem; font-weight: 700; }
.tzeile__datum { flex: none; width: 76px; text-align: center; background: #fff; color: var(--nacht); border: 2px solid var(--nacht); border-top-width: 10px; border-radius: 8px; padding: 6px 4px; line-height: 1; }
.tzeile__zahl { display: block; font-family: var(--kopf); font-weight: 700; font-size: 2.3rem; }
.tzeile__tag { display: block; font-family: var(--kopf); font-size: .95rem; font-weight: 600; text-transform: uppercase; color: var(--orange-dunkel); letter-spacing: .08em; }
.tzeile__frei { font-family: var(--kopf); font-size: 1.05rem; font-weight: 700; }
.tzeile.ist-abgesagt .tzeile__datum { border-color: #9aa7ad; }
.tzeile.ist-abgesagt strong { text-decoration: line-through; color: var(--grau); }
.termin__marke { font-size: .78rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.termin__marke--ab { background: var(--rot); color: #fff; }
.termin__marke--offen { background: #fff0db; color: #7a4500; }
.tkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.tkopf h1 span { display: block; font-size: .5em; color: var(--logo); letter-spacing: .04em; }
.tkopf__satz { color: var(--grau); margin: 0; font-size: 1.15rem; }
.tkopf__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.jahre { display: flex; flex-wrap: wrap; gap: 6px; }
.jahre a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linie); text-decoration: none; font-weight: 700; font-size: .95rem; }
.jahre a[aria-current="page"] { background: var(--nacht); color: #fff; border-color: var(--nacht); }
.tnaechster { display: flex; gap: 32px; align-items: center; padding: 30px; border-radius: var(--radius); background: var(--nacht); color: #fff; margin-bottom: 32px; }
.tnaechster__datum { flex: none; text-align: center; background: #fff; color: var(--nacht); border-radius: 10px; border-top: 14px solid var(--orange); padding: 12px 22px; min-width: 140px; line-height: 1; }
.tnaechster__tag { display: block; font-family: var(--kopf); font-size: 1.05rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.tnaechster__zahl { display: block; font-family: var(--kopf); font-weight: 700; font-size: 4.4rem; }
.tnaechster__monat { display: block; font-family: var(--kopf); font-weight: 600; font-size: 1.2rem; text-transform: uppercase; }
.tnaechster__ueber { margin: 0 0 4px; font-family: var(--kopf); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 1.05rem; color: #ffd08f; }
.tnaechster h2 { color: #fff; margin: 0 0 6px; }
.tnaechster__meta { margin: 0 0 12px; }
@media (max-width: 640px) { .tnaechster { flex-direction: column; align-items: flex-start; padding: 22px; } }
.tabschnitt__titel { margin-top: 0; }
.tmonat { font-family: var(--kopf); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .1em; color: var(--grau); margin: 26px 0 12px; }
.tvorbei { margin-top: 28px; border-top: 1px solid var(--linie); padding-top: 18px; }
.tvorbei summary { cursor: pointer; font-family: var(--kopf); font-weight: 700; color: var(--nacht); font-size: 1.5rem; text-transform: uppercase; }
.tvorbei summary span { color: var(--grau); font-weight: 500; }
.tvorbei .tzeile { background: var(--schnee); }
.tleer { color: var(--grau); }

/* ---------- Training ---------- */
.sprungleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sprungleiste a { padding: 8px 16px; border-radius: 999px; background: var(--schnee); border: 1px solid var(--linie); text-decoration: none; font-family: var(--kopf); font-weight: 600; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nacht); }
.sprungleiste a:hover { border-color: var(--logo); color: var(--blau); }
.jetzt { margin-bottom: 40px; }
.jetzt .abschnitt { margin-top: 0; }
.ansagen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.ansage-voll { border: 1px solid var(--linie); border-top: 6px solid var(--orange); border-radius: var(--radius); padding: 22px 24px; background: #fff; }
.ansage-voll__kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--grau); font-size: .95rem; margin: 0 0 8px; }
.ansage-voll h3 { margin: 0 0 10px; }
.spartenkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 22px; align-items: start; }
.spartenkarten__vorn { grid-column: 1 / -1; font-size: 1.12rem; background: var(--schnee); border-radius: var(--radius); padding: 22px 26px; border-left: 6px solid var(--logo); }
.spartenkarte { border-radius: var(--radius); border: 1px solid var(--linie); background: #fff; padding: 26px 28px 22px; position: relative; overflow: hidden; }
.spartenkarte::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 8px; background: var(--nacht); }
.spartenkarte--2::before { background: var(--logo); }
.spartenkarte--3::before { background: var(--orange); }
.spartenkarte--4::before { background: var(--marine); }
.spartenkarte h2 { margin: 6px 0 14px; text-transform: uppercase; font-size: 2.1rem; display: flex; align-items: baseline; gap: 12px; }
.spartenkarte__nr { font-size: 1.1rem; color: var(--grau); letter-spacing: .12em; }
.frueher { margin-top: 48px; }
.frueher__saisons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 900px) { .frueher__saisons { grid-template-columns: 1fr; } }
.saison { border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
.saison summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--nacht); display: flex; justify-content: space-between; gap: 12px; }
.saison summary span { color: var(--grau); font-weight: 400; }
.saison[open] summary { border-bottom: 1px solid var(--linie); }
.saison__liste { list-style: none; margin: 0; padding: 8px 18px 14px; max-height: 420px; overflow-y: auto; }
.saison__liste li { display: grid; grid-template-columns: 92px 130px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--linie); font-size: .95rem; }
.saison__liste time, .saison__gruppe { color: var(--grau); }
.saison__liste a { text-decoration: none; }
@media (max-width: 520px) { .saison__liste li { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Ergebnisse ---------- */
.ergebnisse { display: grid; gap: 22px; }
.ergebnis-saison { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; padding: 26px 28px; border-radius: var(--radius); background: var(--schnee); border: 1px solid var(--linie); }
.ergebnis-saison.ist-neu { background: var(--nacht); border-color: var(--nacht); }
.ergebnis-saison h2 { margin: 0; font-size: 3rem; line-height: .95; }
.ergebnis-saison h2 span { display: block; font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-dunkel); }
.ergebnis-saison.ist-neu h2 { color: #fff; }
.ergebnis-saison.ist-neu h2 span { color: #ffd08f; }
.ergebnis-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.ergebnis-liste a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--linie); text-decoration: none; color: var(--nacht); transition: transform .15s, box-shadow .15s; }
.ergebnis-liste a:hover { transform: translateY(-2px); box-shadow: var(--schatten); color: var(--nacht); }
.ergebnis-liste strong { font-family: var(--kopf); font-weight: 700; font-size: 1.5rem; line-height: 1.05; }
.ergebnis-liste__sparte { align-self: flex-start; font-family: var(--kopf); font-weight: 600; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 10px; border-radius: 999px; background: var(--eis); color: var(--blau-dunkel); }
.ergebnis-liste__sparte--nordisch { background: #e2f3ec; color: #0f5e4e; }
.ergebnis-liste__sparte--kombination { background: #fff0db; color: #7a4500; }
.ergebnis-liste__datei { margin-top: auto; font-size: .9rem; color: var(--grau); }
.ergebnis-liste__datei::before { content: "↓ "; color: var(--rot); font-weight: 700; }
@media (max-width: 760px) { .ergebnis-saison { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Chronik ---------- */
.blatt--chronik h1 span { display: block; font-size: .5em; letter-spacing: .04em; }
.dekaden { position: sticky; top: 96px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--linie); margin-bottom: 28px; }
.dekaden a { padding: 6px 14px; border-radius: 999px; background: var(--schnee); border: 1px solid var(--linie); text-decoration: none; font-family: var(--kopf); font-weight: 700; font-size: 1.15rem; color: var(--nacht); }
.dekaden a:hover { background: var(--nacht); color: #fff; border-color: var(--nacht); }
.dekade { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; padding: 32px 0; border-top: 1px solid var(--linie); }
.dekade__titel { margin: 0; position: sticky; top: 170px; align-self: start; font-size: 2.6rem; line-height: .95; color: var(--logo); }
.jahresliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.jahr { padding: 20px 22px; border-radius: var(--radius); background: var(--schnee); border: 1px solid var(--linie); }
.jahr__zahl { display: block; font-family: var(--kopf); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--orange-dunkel); margin-bottom: 8px; }
.jahr__text p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .dekade { grid-template-columns: 1fr; gap: 14px; } .dekade__titel { position: static; } .dekaden { top: 72px; } }

/* ---------- Seiten mit Karten (Mitglied werden, Kontakt, Links) ---------- */
.seitenraster--mit-kasten { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
.seitenraster--mit-kasten .kasten--kontakt { position: sticky; top: 120px; }
@media (max-width: 960px) { .seitenraster--mit-kasten { grid-template-columns: 1fr; } }
.teile { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: start; }
.teile__vorn { grid-column: 1 / -1; font-size: 1.15rem; }
.teil { padding: 24px 26px; border-radius: var(--radius); background: var(--schnee); border: 1px solid var(--linie); border-top: 6px solid var(--logo); }
.teil:nth-of-type(3n+2) { border-top-color: var(--orange); }
.teil:nth-of-type(3n) { border-top-color: var(--nacht); }
.teil h2 { margin: 0 0 12px; font-size: 1.8rem; text-transform: uppercase; }
.seite-links .teil ul { list-style: none; padding: 0; }
.seite-links .teil li { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.seite-links .teil a { font-weight: 650; text-decoration: none; }
.seite-links .teil a::after { content: " ↗"; color: var(--grau); }

/* ---------- Bilder und Videos ---------- */
.alben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.alben--klein { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.album a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--nacht); color: #fff; text-decoration: none; }
.album img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.album a:hover img { transform: scale(1.05); }
.album__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(20, 26, 60, .85)); display: flex; flex-direction: column; }
.album__text strong { font-family: var(--kopf); font-size: 1.7rem; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.album__text span { font-size: .92rem; opacity: .92; }
.galerie, .text ul.galerie { list-style: none; padding: 0; margin: 1.2em 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.galerie--gross { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.galerie li { margin: 0; }
.galerie a { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; background: var(--eis); }
.galerie img { width: 100%; height: 100%; max-height: none; object-fit: cover; margin: 0; border-radius: 0; transition: transform .25s; }
.galerie a:hover img { transform: scale(1.04); }
.gross { position: fixed; inset: 0; z-index: 100; background: rgba(14, 18, 40, .94); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gross img { max-height: 90vh; max-width: 100%; border-radius: 6px; }
.gross button { position: absolute; top: 14px; right: 14px; border: 0; background: #fff; color: var(--nacht); border-radius: 999px; padding: 8px 14px; font: 700 1rem var(--schrift); cursor: pointer; }
.gross__weiter, .gross__zurueck { top: 50% !important; transform: translateY(-50%); font-size: 1.4rem !important; }
.gross__zurueck { left: 14px; right: auto !important; }
.videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.video__knopf { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--radius); overflow: hidden; background: var(--nacht); cursor: pointer; }
.video__knopf img { width: 100%; height: 100%; object-fit: cover; }
.video__start { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--orange); }
.video__start::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--nacht); }
.video__rahmen { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.video__titel { margin: 8px 0 0; font-weight: 650; color: var(--nacht); }

/* ---------- Fuss ---------- */
.fuss { position: relative; background: var(--nacht); color: #cfd6ee; margin-top: 90px; font-size: 1rem; }
.fuss__grat { position: absolute; left: 0; right: 0; top: -89px; width: 100%; height: 90px; }
.fuss__grat path { fill: var(--nacht); }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__innen { max-width: var(--breite); margin: 0 auto; padding: 40px var(--rand) 36px; display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; gap: 56px; }
.fuss p { margin: 0 0 .45em; }
.fuss__marke { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.fuss__marke img { width: 84px; }
.fuss__marke span { display: flex; flex-direction: column; font-family: var(--kopf); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; color: #fff; line-height: 1; }
.fuss__marke small { font-size: 1rem; font-weight: 600; color: #ffd08f; letter-spacing: .1em; margin-top: 4px; }
.fuss__navi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
.fuss__titel { font-family: var(--kopf); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-bottom: .7em !important; padding-bottom: .3em; border-bottom: 3px solid var(--orange); display: inline-block; }
.fuss__spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss__spalte li { margin: 0 0 .5em; }
.fuss__spalte a { color: #cfd6ee; }
.fuss__spalte a:hover { color: #fff; }
.fuss__leiste { max-width: var(--breite); margin: 0 auto; padding: 18px var(--rand) 28px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .93rem; }
.fuss__leiste span { margin-right: auto; }
@media (max-width: 860px) { .fuss__innen { grid-template-columns: 1fr; gap: 32px; } .fuss__navi { grid-template-columns: repeat(2, 1fr); } .fuss { margin-top: 60px; } .fuss__grat { height: 50px; top: -49px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Handy: lange Woerter in Ueberschriften trennen statt abschneiden, Galerie zweispaltig */
h1, h2, h3, .album__text strong, .karte__text strong { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 560px) {
  h1 { font-size: clamp(2rem, 1.2rem + 4.4vw, 2.6rem); }
  .held h1 { font-size: clamp(2.6rem, 1.4rem + 7vw, 3.4rem); }
  .held__ueber { font-size: .95rem; letter-spacing: .12em; }
  .galerie, .galerie--gross { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .fuss__marke span { font-size: 1.4rem; }
}