/* =========================================================================
   TV Germania 1890 e.V. Großsachsen – Übergangsseite
   Statisch, ohne externe Verbindungen, ohne Cookies.
   ========================================================================= */

:root{
  --blau:#1E5CB3;
  --blau-tief:#0B2A5B;
  --blau-nacht:#061834;
  --blau-hell:#EAF0FA;
  --gelb:#FFF200;
  --text:#101A2B;
  --leise:#5B6B84;
  --linie:#D7DEEA;
  --papier:#F2F5FA;
  --weiss:#fff;
  --radius:14px;
  --radius-gross:24px;
  --luft:clamp(1.25rem,4vw,2rem);
  --breite:1120px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--weiss);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-underline-offset:.18em}
a:hover{color:var(--blau-tief)}

:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
.dunkel :focus-visible{outline-color:var(--gelb)}

h1,h2,h3{
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2rem,1.4rem + 2.8vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.95rem)}
h3{font-size:1.08rem;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.inhalt{width:min(100% - 2*var(--luft),var(--breite));margin-inline:auto}
.inhalt--schmal{width:min(100% - 2*var(--luft),760px)}
.abschnitt{padding-block:clamp(2.75rem,6vw,4.5rem)}
.abschnitt--eng{padding-block:clamp(2rem,4vw,3rem)}
.abschnitt--papier{background:var(--papier)}

.eyebrow{
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blau);
  margin:0 0 .9rem;
  display:flex;
  align-items:center;
  gap:.65rem;
}
.eyebrow::before{content:"";width:1.7rem;height:2px;background:currentColor;flex:none}
.dunkel .eyebrow{color:var(--gelb)}

.lead{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);color:var(--leise)}
.dunkel .lead{color:#C7D6EE}

.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--gelb);color:var(--text);
  padding:.8rem 1.2rem;font-weight:600;
}
.skip:focus{left:1rem;top:1rem}

/* ------------------------------------------------------------- Kopfzeile */
.kopfzeile{border-bottom:1px solid var(--linie)}
.kopfzeile__inhalt{display:flex;align-items:center;gap:.9rem;padding-block:.85rem}
.marke{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit}
.marke img{width:46px}
.marke__name{
  font-weight:800;font-size:1.05rem;letter-spacing:-.02em;
  color:var(--blau-tief);display:block;line-height:1.15;
}
.marke__zusatz{
  font-family:var(--mono);font-size:.67rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise);
}

/* ------------------------------------------------------------------ Held */
.held{
  position:relative;
  background:var(--blau-tief);
  background-image:
    radial-gradient(120% 90% at 12% 0%,rgba(45,116,208,.55) 0%,transparent 62%),
    linear-gradient(160deg,#164C99 0%,#0B2A5B 55%,#071B3C 100%);
  color:#fff;
  overflow:hidden;
}
.held::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5;
}
.held__inhalt{position:relative;z-index:1;padding-block:clamp(2.75rem,6vw,4.75rem) 0}
.held__text{max-width:44ch}
.held h1{color:#fff;margin-bottom:.75rem}
.held h1 em{font-style:normal;color:var(--gelb)}
.held__jahr{
  font-family:var(--mono);font-weight:600;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gelb);
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
}
.held__jahr::before{content:"";width:2rem;height:2px;background:currentColor}
.held__knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* ----------------------------------------------------------- Piktogramme */
.picto{
  display:block;width:100%;aspect-ratio:1/1;
  background-color:var(--picto-farbe,var(--blau));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .25s ease;
}
@supports not (mask-image:url(a.png)){.picto{background-color:transparent!important}}

.picto--boule{-webkit-mask-image:url(../img/picto/boule.png);mask-image:url(../img/picto/boule.png)}
.picto--handball{-webkit-mask-image:url(../img/picto/handball.png);mask-image:url(../img/picto/handball.png)}
.picto--taekwondo{-webkit-mask-image:url(../img/picto/taekwondo.png);mask-image:url(../img/picto/taekwondo.png)}
.picto--tanzen{-webkit-mask-image:url(../img/picto/tanzen.png);mask-image:url(../img/picto/tanzen.png)}
.picto--tennis{-webkit-mask-image:url(../img/picto/tennis.png);mask-image:url(../img/picto/tennis.png)}
.picto--tischtennis{-webkit-mask-image:url(../img/picto/tischtennis.png);mask-image:url(../img/picto/tischtennis.png)}
.picto--turnen{-webkit-mask-image:url(../img/picto/turnen.png);mask-image:url(../img/picto/turnen.png)}

/* Sportwand im Held */
.wand{
  margin-top:clamp(2.25rem,5vw,3.5rem);
  padding-bottom:clamp(2.25rem,5vw,3.25rem);
  display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;
  list-style:none;padding-left:0;
}
@media (min-width:560px){.wand{grid-template-columns:repeat(4,1fr)}}
@media (min-width:960px){.wand{grid-template-columns:repeat(7,1fr);gap:.75rem}}

.wand li{display:flex}
.wand__feld{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1rem .5rem .9rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  color:#DCE7F7;
  transform:rotate(var(--kipp,0deg));
}
.wand__feld .picto{width:100%;max-width:92px;--picto-farbe:#fff;opacity:.92}
.wand__feld span{
  font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
}
.wand li:nth-child(1) .wand__feld{--kipp:-2.2deg}
.wand li:nth-child(2) .wand__feld{--kipp:1.6deg}
.wand li:nth-child(3) .wand__feld{--kipp:-1.1deg}
.wand li:nth-child(4) .wand__feld{--kipp:2.1deg}
.wand li:nth-child(5) .wand__feld{--kipp:-1.8deg}
.wand li:nth-child(6) .wand__feld{--kipp:1.2deg}
.wand li:nth-child(7) .wand__feld{--kipp:-2.4deg}

a.wand__feld{text-decoration:none;transition:background-color .25s ease,transform .25s ease,border-color .25s ease}
a.wand__feld:hover,a.wand__feld:focus-visible{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  transform:rotate(0deg) translateY(-4px);
  color:var(--gelb);
}
a.wand__feld:hover .picto,a.wand__feld:focus-visible .picto{--picto-farbe:var(--gelb);opacity:1}

/* ---------------------------------------------------------------- Knöpfe */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:1rem;line-height:1;
  padding:.95rem 1.5rem;border-radius:999px;
  border:2px solid transparent;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--gelb{background:var(--gelb);color:var(--blau-nacht)}
.btn--gelb:hover{background:#FFF75E;color:var(--blau-nacht)}
.btn--blau{background:var(--blau);color:#fff}
.btn--blau:hover{background:var(--blau-tief);color:#fff}
.btn--linie{border-color:currentColor;color:var(--blau)}
.btn--linie:hover{background:var(--blau);color:#fff;border-color:var(--blau)}
.dunkel .btn--linie{color:#fff}
.dunkel .btn--linie:hover{background:#fff;color:var(--blau-tief);border-color:#fff}
.btn--klein{padding:.65rem 1.1rem;font-size:.92rem}
.extern{opacity:.7}

/* ----------------------------------------------------------- Kontaktkarte */
.zwei{display:grid;gap:clamp(1.75rem,4vw,3rem)}
@media (min-width:860px){.zwei{grid-template-columns:1.05fr .95fr;align-items:start}}

.karte{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  padding:1.6rem 1.75rem;
}
.karte--blau{background:var(--blau-hell);border-color:#C6D6EE}

.daten{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.daten li{
  display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:.2rem .9rem;align-items:baseline;
  padding-bottom:.8rem;border-bottom:1px solid var(--linie);
}
.daten li:last-child{border-bottom:0;padding-bottom:0}
.daten dt,.daten .schild{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--leise);
}
.daten strong{font-weight:600}
@media (max-width:540px){.daten li{grid-template-columns:1fr;gap:.1rem}}

.gross{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.gross a{text-decoration:none}
.gross a:hover{text-decoration:underline}

/* -------------------------------------------------------------- Schnelllinks */
.schnell{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.schnell a{
  display:flex;flex-direction:column;gap:.25rem;
  background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--radius);padding:1.05rem 1.25rem;
  text-decoration:none;color:inherit;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.schnell a:hover{
  border-color:var(--blau);transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(11,42,91,.09);
}
.schnell strong{font-size:1.02rem;display:flex;align-items:center;gap:.4rem}
.schnell span{font-size:.9rem;color:var(--leise)}

/* -------------------------------------------------------------- Abteilungen */
.abteilungen{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.abteilungen li{
  display:flex;align-items:center;gap:1rem;
  background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--radius);padding:.95rem 1.15rem;
}
.abteilungen .picto{width:52px;height:52px;flex:none;--picto-farbe:var(--blau)}
.abteilungen__text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.abteilungen strong{font-size:1.02rem;line-height:1.25}
.abteilungen small{font-size:.85rem;color:var(--leise);line-height:1.45;overflow-wrap:anywhere}
.abteilungen a{text-decoration:none}
.abteilungen a:hover{text-decoration:underline}

/* Kontaktkarte im Held */
.held__karte{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-gross);
  padding:1.5rem 1.65rem;
}
.held__karte h2{
  font-family:var(--mono);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gelb);margin:0 0 1rem;
}
.held__karte .nummer{
  font-size:clamp(1.5rem,1.2rem + 1.2vw,1.9rem);font-weight:800;
  letter-spacing:-.02em;margin:0 0 1.1rem;
}
.held__karte .nummer a{color:#fff;text-decoration:none}
.held__karte .nummer a:hover{color:var(--gelb)}
.held__karte ul{list-style:none;margin:0;padding:0}
.held__karte li{
  display:grid;grid-template-columns:minmax(0,5.5rem) minmax(0,1fr);
  gap:.15rem .9rem;align-items:baseline;
  padding:.65rem 0;border-top:1px solid rgba(255,255,255,.14);
}
.held__karte .schild{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;color:#9FB6D9;
}
.held__karte a{color:#DCE7F7;overflow-wrap:anywhere}
.held__karte a:hover{color:var(--gelb)}
.held__karte strong{color:#fff;font-weight:600}
@media (max-width:560px){.held__karte li{grid-template-columns:1fr}}

.held__oben{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
@media (min-width:900px){.held__oben{grid-template-columns:1.15fr .85fr}}

/* ---------------------------------------------------------------- Fußzeile */
.fusszeile{background:var(--blau-nacht);color:#A8BDDD;padding-block:2.5rem 1.75rem}
.fusszeile__raster{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fusszeile h2{
  font-family:var(--mono);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gelb);margin:0 0 .9rem;
}
.fusszeile ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fusszeile a{color:#D5E2F5;text-decoration:none;font-size:.95rem}
.fusszeile a:hover{color:var(--gelb);text-decoration:underline}
.fusszeile address{font-style:normal;font-size:.95rem;line-height:1.8}
.fusszeile__schluss{
  margin-top:2.25rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font-family:var(--mono);font-size:.76rem;color:#8AA4CB;
}
.fusszeile__schluss ul{display:flex;flex-wrap:wrap;gap:1.2rem}

/* --------------------------------------------------------------- Textseite */
.textseite{padding-block:clamp(2.25rem,5vw,3.5rem)}
.textseite h1{font-size:clamp(1.75rem,1.4rem + 1.6vw,2.5rem);margin-bottom:1.25rem}
.textseite h2{margin-top:2.25rem}
.textseite h3{margin-top:1.5rem;color:var(--blau-tief)}
.textseite ul{padding-left:1.25rem;margin:0 0 1.05em}
.textseite li{margin-bottom:.4rem}

.brotkrume{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;
  padding-block:.9rem;color:var(--leise);border-bottom:1px solid var(--linie);
}
.brotkrume ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.brotkrume li::after{content:"/";margin-left:.4rem;opacity:.5}
.brotkrume li:last-child::after{content:""}
.brotkrume a{color:inherit;text-decoration:none}
.brotkrume a:hover{color:var(--blau);text-decoration:underline}

.kasten{
  background:var(--papier);border:1px solid var(--linie);
  border-left:4px solid var(--blau);border-radius:0 var(--radius) var(--radius) 0;
  padding:1.2rem 1.4rem;margin:1.5rem 0;
}
.kasten h3{margin-top:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .wand__feld{transform:none}
}

@media print{
  .held{background:none;color:#000}
  .held h1,.held h1 em{color:#000}
  .fusszeile{background:none;color:#000}
  .wand,.held__knoepfe{display:none}
}