/* ==========================================================================
   EISKANTE | Magazin für Eishockey und das Leben rund um die Halle
   Bildwelt: Eisfläche bei Flutlicht. Petrol-Nacht, Frostweiß, rote Mittellinie.
   Klassenpräfix: kuf- (Kufe, Bande, Blaulinie, Anspiel, Drittel, Kabine)
   Keine externe Anfrage: keine Web-Font, kein CDN, kein Skript.
   ========================================================================== */

:root {
  --nacht:        #0c1d26;
  --tief:         #071319;
  --bande:        #12303d;
  --bande-hell:   #194153;
  --kante:        #27596b;
  --kante-fein:   #1b3f4e;
  --frost:        #e9f2f5;
  --frost-still:  #9fbcc7;
  --frost-matt:   #7897a4;
  --signal:       #f2545b;
  --signal-tief:  #c93a45;
  --puck:         #f0c24b;
  --gletscher:    #6fd3d8;

  --schrift-titel: "Haettenschweiler", Impact, "Franklin Gothic Heavy", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --schrift-text:  Charter, "Bitstream Charter", "Sitka Text", Constantia, "Noto Serif", Georgia, serif;
  --schrift-marke: "Bahnschrift", "DIN Alternate", "PT Sans Narrow", "Arial Narrow", "Liberation Sans Narrow", Tahoma, sans-serif;

  --breit: 78rem;
  --eng:   44rem;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--nacht);
  background-image:
    radial-gradient(1200px 520px at 78% -180px, rgba(111, 211, 216, .10) 0%, rgba(111, 211, 216, 0) 62%),
    radial-gradient(900px 460px at 4% 8%, rgba(242, 84, 91, .07) 0%, rgba(242, 84, 91, 0) 60%);
  background-attachment: fixed;
  color: var(--frost);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, .94rem + .3vw, 1.1rem);
  line-height: 1.74;
  -webkit-text-size-adjust: 100%;
  /* Deutsche Komposita sind lang: ohne Trennung sprengt « Trainingsbeteiligung »
     eine schmale Spalte auf dem Telefon. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Rasterkinder dürfen schrumpfen, sonst erzwingt der längste Inhalt die Spaltenbreite. */
.kuf-raster > *, .kuf-lauf > *, .kuf-gespann > *, .kuf-notiz > *, .kuf-sockel__raster > * { min-width: 0; }

img { max-width: 100%; display: block; }

a { color: var(--gletscher); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: #a6e8eb; }
a:focus-visible { outline: 2px solid var(--puck); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.06;
  margin: 0;
  color: #f6fbfc;
}

.kuf-flaeche { width: min(100% - 2.4rem, var(--breit)); margin-inline: auto; }
.kuf-flaeche--eng { width: min(100% - 2.4rem, var(--eng)); margin-inline: auto; }

.kuf-versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.kuf-sprung {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--puck); color: var(--tief); padding: .7rem 1.2rem;
  font-family: var(--schrift-marke); text-decoration: none;
}
.kuf-sprung:focus { left: .8rem; top: .8rem; }

/* ---------- Bande (Kopfzeile) ------------------------------------------- */

.kuf-bande {
  background: linear-gradient(180deg, var(--tief) 0%, rgba(7, 19, 25, .82) 100%);
  border-bottom: 1px solid var(--kante-fein);
  box-shadow: 0 1px 0 rgba(111, 211, 216, .16);
  position: relative;
  z-index: 5;
}
.kuf-bande::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--signal) 0 22%, var(--bande-hell) 22% 50%, var(--gletscher) 50% 72%, var(--bande-hell) 72% 100%);
  opacity: .85;
}

.kuf-bande__reihe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 2rem; padding: .85rem 0 .75rem;
}

.kuf-signet { display: flex; align-items: center; gap: .78rem; text-decoration: none; color: inherit; }
.kuf-signet__zeichen { flex: 0 0 auto; }
.kuf-signet__name {
  display: block; font-family: var(--schrift-titel); font-size: 1.72rem;
  letter-spacing: .07em; color: #f4fafb; line-height: 1;
}
.kuf-signet__zusatz {
  display: block; font-family: var(--schrift-marke); font-size: .68rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--frost-matt); margin-top: .3rem;
}

.kuf-blaulinie { display: flex; flex-wrap: wrap; gap: .1rem .15rem; font-family: var(--schrift-marke); }
.kuf-blaulinie__punkt {
  color: var(--frost-still); text-decoration: none; font-size: .88rem;
  letter-spacing: .09em; text-transform: uppercase; padding: .42rem .68rem;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.kuf-blaulinie__punkt:hover { color: #fff; border-bottom-color: var(--signal); background: rgba(25, 65, 83, .5); }
.kuf-blaulinie__punkt[aria-current] { color: var(--puck); border-bottom-color: var(--puck); }

/* ---------- Anspiel (Bühne, volle Breite) -------------------------------- */

.kuf-anspiel { position: relative; overflow: hidden; isolation: isolate; }
.kuf-anspiel__eis {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
/* Der Schleier ist eine HARTE Farbe, nie var(--x): eine helle Variable wäscht das Foto grau. */
.kuf-anspiel__schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(7, 19, 25, .94) 0%, rgba(9, 29, 38, .86) 46%, rgba(12, 45, 58, .62) 100%),
    linear-gradient(0deg, rgba(7, 19, 25, .92) 0%, rgba(7, 19, 25, 0) 55%);
}
.kuf-anspiel__kern {
  position: relative; z-index: 2;
  padding: clamp(1.3rem, 2.6vw, 2rem) 0 clamp(1rem, 1.8vw, 1.4rem);
  max-width: 46rem;
}
.kuf-anspiel__marke {
  font-family: var(--schrift-marke); font-size: .76rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--puck); margin: 0 0 .65rem;
}
.kuf-anspiel h1 { font-size: clamp(2rem, 4vw, 3.05rem); margin: 0 0 .7rem; }
.kuf-anspiel__vorspann {
  font-size: clamp(1.02rem, .96rem + .38vw, 1.2rem); color: #dbeaef;
  margin: 0 0 .9rem; max-width: 47rem;
}
.kuf-anspiel__zahlen { display: flex; flex-wrap: wrap; gap: .9rem 2.4rem; margin: 0 0 1.05rem; padding: 0; list-style: none; }
.kuf-anspiel__zahl { display: flex; flex-direction: column; gap: .1rem; }
.kuf-anspiel__wert { font-family: var(--schrift-titel); font-size: 1.85rem; color: var(--gletscher); line-height: 1; }
.kuf-anspiel__wort { font-family: var(--schrift-marke); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--frost-matt); }

.kuf-zugang {
  display: inline-block; font-family: var(--schrift-marke); font-size: .9rem;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: .58rem 1.3rem; border-radius: 3px; margin: 0 .55rem .35rem 0;
  color: var(--frost); border: 1px solid var(--kante);
}
.kuf-zugang:hover { background: rgba(39, 89, 107, .42); color: #fff; }
.kuf-zugang--voll {
  background: var(--signal); border-color: var(--signal-tief); color: #14060a; font-weight: 700;
}
.kuf-zugang--voll:hover { background: #ff6a70; color: #14060a; }

/* ---------- Drittel (Abschnitt) ------------------------------------------ */

.kuf-drittel { padding: clamp(1.3rem, 2.4vw, 2.1rem) 0; }
.kuf-drittel--tief { background: rgba(7, 19, 25, .55); border-block: 1px solid var(--kante-fein); }

.kuf-drittel__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .4rem 1.6rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--kante-fein); padding-bottom: .6rem;
}
.kuf-drittel__titel { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.kuf-drittel__notiz { margin: 0; color: var(--frost-still); font-size: .95rem; max-width: 44rem; }

/* ---------- Kabinen (Rubrikenkacheln) ------------------------------------ */

.kuf-raster {
  display: grid; gap: 1.05rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.kuf-kabine {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bande) 0%, #0f2733 100%);
  border: 1px solid var(--kante-fein); border-radius: var(--radius); overflow: hidden;
}
.kuf-kabine:hover { border-color: var(--kante); }
.kuf-kabine__rahmen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tief); }
.kuf-kabine__bild { width: 100%; height: 100%; object-fit: cover; }
.kuf-kabine__glasur {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(12, 29, 38, .88) 0%, rgba(12, 29, 38, 0) 62%);
}
.kuf-kabine__kern { padding: .95rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.kuf-kabine__titel { font-size: 1.42rem; letter-spacing: .01em; }
.kuf-kabine__titel a { color: #f6fbfc; text-decoration: none; }
.kuf-kabine__titel a:hover { color: var(--gletscher); }
.kuf-kabine__text { margin: 0; font-size: .95rem; color: var(--frost-still); }
.kuf-kabine__weiter {
  margin-top: auto; font-family: var(--schrift-marke); font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--puck);
}
.kuf-kabine__weiter:hover { color: #ffd777; }

/* ---------- Lauf (datierter Strom) --------------------------------------- */

.kuf-lauf { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }

.kuf-schritt {
  display: flex; flex-direction: column;
  background: rgba(18, 48, 61, .58); border: 1px solid var(--kante-fein);
  border-radius: var(--radius); overflow: hidden;
}
.kuf-schritt:hover { border-color: var(--kante); background: rgba(25, 65, 83, .55); }
.kuf-schritt__rahmen { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tief); }
.kuf-schritt__bild { width: 100%; height: 100%; object-fit: cover; }
.kuf-schritt__kern { padding: .85rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.kuf-schritt__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.kuf-schritt__titel { font-size: 1.22rem; }
.kuf-schritt__titel a { color: #f2f9fb; text-decoration: none; }
.kuf-schritt__titel a:hover { color: var(--gletscher); text-decoration: underline; }
.kuf-schritt__anriss { margin: 0; font-size: .93rem; color: var(--frost-still); }

.kuf-schritt--fuehrung { grid-column: 1 / -1; }
@media (min-width: 62rem) {
  .kuf-schritt--fuehrung { display: grid; grid-template-columns: 1.35fr 1fr; align-items: stretch; }
  .kuf-schritt--fuehrung .kuf-schritt__rahmen { aspect-ratio: auto; height: 100%; min-height: 19rem; }
  .kuf-schritt--fuehrung .kuf-schritt__kern { padding: 1.6rem 1.7rem; justify-content: center; gap: .7rem; }
  .kuf-schritt--fuehrung .kuf-schritt__titel { font-size: 2rem; }
  .kuf-schritt--fuehrung .kuf-schritt__anriss { font-size: 1.02rem; }
}

.kuf-takt {
  font-family: var(--schrift-marke); font-size: .78rem; letter-spacing: .13em;
  color: var(--frost-matt); white-space: nowrap;
}
.kuf-marke {
  font-family: var(--schrift-marke); font-size: .7rem; letter-spacing: .17em;
  text-transform: uppercase; text-decoration: none; color: var(--puck);
  border: 1px solid rgba(240, 194, 75, .42); border-radius: 2px; padding: .12rem .45rem;
}
.kuf-marke:hover { background: rgba(240, 194, 75, .14); color: #ffd777; }

/* ---------- Notizen (schmale Spalte) ------------------------------------- */

.kuf-gespann { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .kuf-gespann { grid-template-columns: 2.1fr 1fr; gap: 2.2rem; } }

.kuf-notizen { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.kuf-notiz {
  display: grid; grid-template-columns: 5.4rem 1fr; gap: .8rem; align-items: start;
  border-bottom: 1px dashed var(--kante-fein); padding-bottom: .85rem;
}
.kuf-notiz:last-child { border-bottom: 0; }
.kuf-notiz__rahmen { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--tief); }
.kuf-notiz__bild { width: 100%; height: 100%; object-fit: cover; }
.kuf-notiz__titel { font-family: var(--schrift-titel); font-size: 1.06rem; line-height: 1.14; margin: 0 0 .22rem; }
.kuf-notiz__titel a { color: #eef7f9; text-decoration: none; }
.kuf-notiz__titel a:hover { color: var(--gletscher); }
.kuf-notiz p { margin: .2rem 0 0; font-size: .88rem; color: var(--frost-matt); }

/* ---------- Spur (Brotkrumen) -------------------------------------------- */

.kuf-spur { padding: .9rem 0 .1rem; font-family: var(--schrift-marke); font-size: .8rem; letter-spacing: .08em; }
.kuf-spur ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.kuf-spur li { color: var(--frost-matt); }
.kuf-spur li + li::before { content: "›"; margin-right: .4rem; color: var(--kante); }
.kuf-spur a { color: var(--frost-still); text-decoration: none; }
.kuf-spur a:hover { color: var(--gletscher); text-decoration: underline; }

/* ---------- Schild (Seitenkopf) ------------------------------------------ */

.kuf-schild { padding: 1.1rem 0 1.5rem; max-width: 52rem; margin-inline: auto; }
.kuf-schild__ueber {
  font-family: var(--schrift-marke); font-size: .76rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--signal); margin: 0 0 .7rem;
}
.kuf-schild h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); margin: 0 0 .8rem; }
.kuf-schild__vorspann { font-size: clamp(1rem, .96rem + .34vw, 1.16rem); color: #d6e7ec; margin: 0 0 .9rem; }
.kuf-schild__zeichen { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }

/* ---------- Lesebahn (Textspalte) ---------------------------------------- */

.kuf-lesebahn { max-width: var(--eng); margin-inline: auto; padding-bottom: 1rem; }
.kuf-lesebahn p { margin: 0 0 1.2rem; }
.kuf-lesebahn h2 {
  font-size: clamp(1.42rem, 2.4vw, 1.85rem); margin: 2.3rem 0 .85rem;
  padding-top: .8rem; border-top: 1px solid var(--kante-fein);
}
.kuf-lesebahn h3 { font-size: 1.24rem; margin: 1.7rem 0 .6rem; color: var(--gletscher); }
.kuf-lesebahn ul, .kuf-lesebahn ol { margin: 0 0 1.3rem; padding-left: 1.25rem; }
.kuf-lesebahn li { margin-bottom: .5rem; }
.kuf-lesebahn strong { color: #fff; }

.kuf-initial::first-letter {
  font-family: var(--schrift-titel); float: left; font-size: 3.6rem; line-height: .82;
  padding: .1rem .5rem .1rem 0; color: var(--signal);
}

.kuf-merkbrett {
  background: rgba(18, 48, 61, .7); border: 1px solid var(--kante);
  border-left: 4px solid var(--puck); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem; margin: 1.7rem 0 1.9rem;
}
.kuf-merkbrett__titel {
  font-family: var(--schrift-marke); font-size: .8rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--puck); margin: 0 0 .6rem;
}
.kuf-merkbrett ul { margin: 0; padding-left: 1.1rem; }
.kuf-merkbrett li { font-size: .96rem; }

.kuf-tafel-lauf { overflow-x: auto; margin: 1.5rem 0 1.9rem; border: 1px solid var(--kante-fein); border-radius: var(--radius); }
.kuf-tafel { width: 100%; border-collapse: collapse; font-family: var(--schrift-marke); font-size: .92rem; }
.kuf-tafel caption {
  text-align: left; padding: .8rem 1rem; color: var(--frost-matt);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--kante-fein);
}
.kuf-tafel th, .kuf-tafel td { padding: .62rem 1rem; text-align: left; border-bottom: 1px solid rgba(27, 63, 78, .6); }
.kuf-tafel thead th { color: var(--gletscher); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; }
.kuf-tafel tbody th { color: #eaf4f7; font-weight: 700; }
.kuf-tafel tbody tr:last-child th, .kuf-tafel tbody tr:last-child td { border-bottom: 0; }

/* ---------- Bilder im Text ------------------------------------------------ */

.kuf-vollbild { margin: 1.5rem 0 1.9rem; }
.kuf-vollbild img {
  width: 100%; aspect-ratio: 21 / 9; height: auto; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--kante-fein);
}
.kuf-lesebahn .kuf-vollbild img { aspect-ratio: 16 / 9; }
.kuf-vollbild figcaption, .kuf-doppel figcaption {
  margin-top: .55rem; font-size: .86rem; color: var(--frost-matt); font-style: italic;
}
.kuf-doppel { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.7rem 0 1.9rem; }
@media (min-width: 44rem) { .kuf-doppel { grid-template-columns: 1fr 1fr; } }
.kuf-doppel figure { margin: 0; }
.kuf-doppel img { width: 100%; border-radius: 10px; border: 1px solid var(--kante-fein); }

/* ---------- Wechsel (Verweise am Fuß) ------------------------------------ */

.kuf-wechsel {
  background: rgba(18, 48, 61, .5); border: 1px solid var(--kante-fein);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; margin: 2.2rem 0 .5rem;
}
.kuf-wechsel__titel { font-size: 1.3rem; margin: 0 0 .7rem; }
.kuf-wechsel p { margin: 0 0 .8rem; font-size: .98rem; }
.kuf-wechsel p:last-child { margin-bottom: 0; }

/* ---------- Sockel (Fußzeile) -------------------------------------------- */

.kuf-sockel {
  background: var(--tief); border-top: 3px solid var(--bande-hell);
  margin-top: 3rem; padding: 2.4rem 0 1.4rem; color: var(--frost-still); font-size: .93rem;
}
.kuf-sockel__raster { display: grid; gap: 1.7rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.kuf-sockel h2 {
  font-family: var(--schrift-marke); font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--puck); margin: 0 0 .7rem;
}
.kuf-sockel ul { list-style: none; margin: 0; padding: 0; }
.kuf-sockel li { margin-bottom: .38rem; }
.kuf-sockel a { color: var(--frost-still); text-decoration: none; }
.kuf-sockel a:hover { color: var(--gletscher); text-decoration: underline; }
.kuf-sockel p { margin: 0 0 .7rem; }
.kuf-sockel__fuss {
  margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--kante-fein);
  font-family: var(--schrift-marke); font-size: .78rem; letter-spacing: .1em; color: var(--frost-matt);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
}

/* ---------- Fehlerseite ---------------------------------------------------- */

.kuf-eisloch { padding: clamp(3rem, 8vw, 6rem) 0; text-align: center; }
.kuf-eisloch h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); margin-bottom: .9rem; }
.kuf-eisloch p { max-width: 38rem; margin: 0 auto 1.3rem; color: var(--frost-still); }

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