/* ================================================================
   Hausschrift Archivo — liegt in schriften/ auf unserem eigenen
   Server. Bewusst NICHT ueber Google Fonts: dabei ginge die
   IP-Adresse jedes Besuchers an Google (DSGVO).
   Variable Schrift, Achsen wdth 62-125 und wght 100-900.
   Quelle: Fontsource (Archivo, SIL Open Font License 1.1)
   ================================================================ */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url("schriften/archivo-latin.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:'Archivo';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url("schriften/archivo-latin-ext.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--schwatt:#0E0E0E;--witt:#FFFFFF;--linie:#F2F1EE;--asch:#9A9A96;--nebel:#5E5E58;--kreide:#C9C9C3;--max:1200px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Archivo','Inter Variable','Inter',system-ui,sans-serif;color:var(--schwatt);
     background:var(--witt);line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:inherit;font-variation-settings:'wdth' 125;font-weight:900;
         text-transform:uppercase;line-height:1.06;letter-spacing:.004em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 30px}

/* Muster 01 — die vier Streifen aus dem Wappen */
.streifen{height:9px;background:var(--schwatt);position:relative;overflow:hidden}
.streifen i{position:absolute;top:0;bottom:0;width:13px;background:var(--witt)}
.streifen i:nth-child(1){left:30px}.streifen i:nth-child(2){left:56px}
.streifen i:nth-child(3){left:82px}.streifen i:nth-child(4){left:108px}

/* Muster 02 — die Kalklinie, weisse Kreide nur auf dunklem Grund */
.kalk{height:15px;width:230px;background:url("bilder/kalklinie.png") left center/100% 100% no-repeat}
.rule{height:3px;width:230px;background:var(--schwatt)}

/* Kopf */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
       backdrop-filter:saturate(180%) blur(10px)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:22px;
      max-width:var(--max);margin:0 auto;padding:15px 30px}
.marke{display:flex;align-items:center;gap:13px}
.marke img{height:44px;width:auto;filter:invert(1)}
.marke b{display:block;font-variation-settings:'wdth' 118;font-weight:900;font-size:16.5px;
         text-transform:uppercase;line-height:1.12;letter-spacing:.015em}
.marke span{display:block;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--nebel);margin-top:2px}
nav ul{list-style:none;display:flex;gap:20px}
nav a{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
      white-space:nowrap;padding:8px 0;border-bottom:2px solid transparent;transition:.15s}
nav a:hover,nav a[aria-current]{border-bottom-color:var(--schwatt)}
.burger{display:none;background:none;border:1px solid var(--kreide);font-size:19px;padding:7px 12px;cursor:pointer}

/* Kopfbereich */
.hero{background:var(--schwatt);color:var(--witt);position:relative;overflow:hidden;padding:96px 0 104px}
.hero .wappenschatten{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
      height:138%;width:auto;opacity:.055;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:11.5px;font-weight:700;
         letter-spacing:.2em;text-transform:uppercase;color:var(--asch);margin-bottom:26px}
.eyebrow::after{content:'';height:1px;flex:1;max-width:150px;background:#33332E}
.hero h1{font-size:clamp(42px,7.4vw,86px);max-width:11ch}
.hero .lede{margin-top:26px;font-size:19px;color:var(--kreide);max-width:33em}
.knoepfe{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 30px;font-size:12.5px;font-weight:700;
     text-transform:uppercase;letter-spacing:.07em;border:2px solid transparent;transition:.16s}
.btn-hell{background:var(--witt);color:var(--schwatt)}
.btn-hell:hover{background:var(--kreide)}
.btn-rand{border-color:#4A4A44;color:var(--witt)}
.btn-rand:hover{border-color:var(--witt);background:rgba(255,255,255,.07)}
.btn-dunkel{background:var(--schwatt);color:var(--witt)}
.btn-dunkel:hover{background:var(--nebel)}

/* Bildband mit ueberlappender Zahlenkarte */
.bildband{position:relative;background:var(--schwatt)}
.bildband>img{width:100%;aspect-ratio:2.17/1;object-fit:cover}
.bildunter{max-width:var(--max);margin:14px auto 0;padding:0 30px;text-align:right;
           font-size:12px;letter-spacing:.03em;color:var(--nebel)}
.zahlen{position:relative;z-index:3;margin-top:-96px}
.zahlen-innen{background:var(--witt);border-top:9px solid var(--schwatt);
              display:grid;grid-template-columns:repeat(4,1fr);
              box-shadow:0 24px 60px rgba(0,0,0,.22)}
.zahl{padding:32px 28px;border-left:1px solid var(--kreide)}
.zahl:first-child{border-left:0}
.zahl b{display:block;font-variation-settings:'wdth' 118;font-weight:900;
        font-size:clamp(30px,3.6vw,44px);line-height:1}
.zahl span{display:block;margin-top:9px;font-size:11.5px;font-weight:700;
           letter-spacing:.13em;text-transform:uppercase;color:var(--nebel)}

/* Abschnitte */
section{padding:96px 0}
.hell{background:var(--linie)}
.dunkel{background:var(--schwatt);color:var(--witt)}
.marker{display:flex;align-items:baseline;gap:14px;font-size:11.5px;font-weight:700;
        letter-spacing:.19em;text-transform:uppercase;color:var(--nebel);margin-bottom:18px}
.marker i{font-style:normal;font-variation-settings:'wdth' 118;font-weight:900;font-size:13px;color:var(--schwatt)}
.dunkel .marker{color:var(--asch)} .dunkel .marker i{color:var(--witt)}
h2{font-size:clamp(30px,4.4vw,50px)}
.lead{font-size:18.5px;color:var(--nebel);max-width:34em;margin-top:20px}
.dunkel .lead{color:var(--kreide)}

/* Herkunft: zweispaltig, Anekdoten als Zeilen */
.herkunft{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:22px;align-items:start}
.anek{border-top:2px solid var(--schwatt)}
.anek-row{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--kreide)}
.anek em{font-style:normal;font-variation-settings:'wdth' 118;font-weight:900;font-size:12px;color:var(--asch);padding-top:3px}
.anek b{display:block;font-size:15.5px;font-variation-settings:'wdth' 112;font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.anek p{font-size:15px;color:var(--nebel);margin-top:5px}

/* Muster 03 — Ost und West */
.doerfer{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;margin-top:64px;border-top:2px solid var(--schwatt)}
.doerfer .naht{background:var(--kreide)}
.dorf{padding:34px 0}
.dorf:last-child{padding-left:46px}
.dorf .platt{font-variation-settings:'wdth' 125;font-weight:900;text-transform:uppercase;
             font-size:clamp(28px,4.2vw,50px);line-height:1}
.dorf .amt{display:block;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.16em;
           text-transform:uppercase;color:var(--nebel)}
.dorf .ew{margin-top:16px;font-size:15px;color:var(--nebel)}
.dorf .ew strong{font-variation-settings:'wdth' 118;font-weight:900;font-size:19px;color:var(--schwatt)}
/* Angaben zu den Sportplaetzen (Seite Am Platz) */
.platzliste{margin-top:22px;border-top:1px solid var(--kreide);max-width:32em}
.platzliste>div{display:grid;grid-template-columns:8.2em 1fr;gap:16px;padding:12px 0;
                border-bottom:1px solid var(--kreide);font-size:14.8px;color:var(--nebel)}
.platzliste b{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
              color:var(--schwatt);padding-top:3px}
.platzliste a{border-bottom:1px solid var(--asch)}
@media(max-width:640px){.platzliste>div{grid-template-columns:1fr;gap:3px}}
.schluss{margin-top:40px;font-size:17px;max-width:46em}
.quelle{margin-top:18px;font-size:12.5px;color:var(--nebel)}
.quelle a{border-bottom:1px solid var(--asch)}

/* Highlight-Reihe wie bei Instagram */
.highlights{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:52px}
.hl{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--witt)}
.hl-ring{display:block;width:100%;max-width:168px;aspect-ratio:1;border-radius:50%;padding:4px;
         border:1px solid #3A3A34;transition:.2s}
.hl-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.hl:hover .hl-ring{border-color:var(--witt);transform:translateY(-5px)}
.hl b{margin-top:18px;font-variation-settings:'wdth' 115;font-weight:900;
      text-transform:uppercase;font-size:14px;letter-spacing:.03em}
.hl-t{margin-top:8px;font-size:12.5px;color:var(--asch);max-width:19em;line-height:1.5}

/* Trainingszeiten */
.zeiten{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}
table{width:100%;border-collapse:collapse;font-size:16px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--schwatt);
   font-weight:700;padding:0 20px 13px 0;border-bottom:3px solid var(--schwatt);white-space:nowrap}
td{padding:16px 20px 16px 0;border-bottom:1px solid var(--kreide);white-space:nowrap}
td:first-child{font-variation-settings:'wdth' 112;font-weight:900;text-transform:uppercase;font-size:15px}
.zeiten-hinweis{margin-top:26px;font-size:16px;color:var(--nebel)}
.aktuell{margin-top:34px;border:2px solid var(--schwatt);padding:26px 28px;display:flex;
         align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.aktuell b{display:block;font-variation-settings:'wdth' 115;font-weight:900;text-transform:uppercase;font-size:16px}
.aktuell p{font-size:14.5px;color:var(--nebel);margin-top:5px}

/* Schlussband */
.band{background:var(--schwatt);color:var(--witt)}
/* Der Kalkwagen — Ehrenamt und Kalklinie in einem Bild */
.band-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:stretch}
.band-bild{width:100%;height:100%;object-fit:cover;min-height:470px}
.band-text{padding:96px 62px 100px 72px;display:flex;flex-direction:column;
           justify-content:center;align-items:flex-start}
.band h2{max-width:13ch}
.band p{color:var(--kreide);margin-top:22px;max-width:30em;font-size:17.5px}
.band .kalk{margin:32px 0 34px}

/* Fuss */
footer{background:var(--schwatt);color:var(--kreide);padding:70px 0 30px}
.fussgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid #262622}
.fussgrid h4{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--asch);
             font-weight:700;margin-bottom:17px}
.fussgrid ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.fussgrid a{font-size:14.5px;color:var(--witt)}
.fussgrid a:hover{color:var(--asch)}
.fussmarke img{height:58px;width:auto;margin-bottom:18px}
.fussmarke b{font-variation-settings:'wdth' 118;font-weight:900;text-transform:uppercase;font-size:17px;color:var(--witt);display:block}
.fussmarke span{display:block;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--asch);margin-top:4px}
.fussmarke p{font-size:13.5px;color:var(--asch);max-width:24em;margin-top:14px}
.fussunten{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:24px;font-size:12.5px;color:var(--asch)}

@media(max-width:900px){.band-grid{grid-template-columns:1fr}
  .band-bild{aspect-ratio:16/11;min-height:0} .band-text{padding:64px 40px 74px}}
@media(max-width:1020px){
  nav{display:none} .burger{display:block}
  .herkunft{grid-template-columns:1fr;gap:44px}
  .highlights{grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:30px}
  .fussgrid{grid-template-columns:1fr 1fr}
  .zahlen{margin-top:-56px} .zahlen-innen{grid-template-columns:1fr 1fr}
  .zahl:nth-child(3){border-left:0}
  .zahl:nth-child(n+3){border-top:1px solid var(--kreide)}
}
@media(max-width:640px){
  section{padding:66px 0}
  .bildband>img{aspect-ratio:5/4;object-position:52% center}
  .zahlen{margin-top:-40px}
  .doerfer{grid-template-columns:1fr} .doerfer .naht{height:1px}
  .dorf:last-child{padding-left:0;border-top:1px solid var(--kreide)}
  .aktuell{flex-direction:column;align-items:flex-start}
  .band-text{padding:56px 30px 66px}
}

/* ================= Unterseiten ================= */
/* Kompakter Seitenkopf statt des grossen Startseiten-Kopfbereichs */
.seitenkopf{background:var(--schwatt);color:var(--witt);position:relative;overflow:hidden;
            padding:78px 0 84px}
.seitenkopf .wappenschatten{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
            height:150%;width:auto;opacity:.055;pointer-events:none}
.seitenkopf .wrap{position:relative;z-index:2}
.seitenkopf h1{font-size:clamp(38px,6.2vw,68px);max-width:12ch}
.seitenkopf .lede{margin-top:24px;font-size:18.5px;color:var(--kreide);max-width:34em}

/* Fliesstext in den Dorf- und Farbspalten */
.dorf-text{font-size:15.5px;color:var(--nebel);margin-top:16px;max-width:34em}
.dunkel .dorf-text{color:var(--kreide)}

/* Zeitstrahl — Grundform hell, Abweichungen fuer dunkle Abschnitte darunter */
.zeitstrahl{margin-top:48px;border-top:2px solid var(--schwatt)}
.zeitstrahl>div{display:grid;grid-template-columns:150px 1fr;gap:26px;
                padding:24px 0;border-bottom:1px solid var(--kreide)}
.zeitstrahl em{font-style:normal;font-variation-settings:'wdth' 118;font-weight:900;
               font-size:17px;color:var(--schwatt);letter-spacing:.02em}
.zeitstrahl b{display:block;font-size:16.5px;font-variation-settings:'wdth' 112;font-weight:900;
              text-transform:uppercase;letter-spacing:.02em;color:var(--schwatt)}
.zeitstrahl p{font-size:15px;color:var(--nebel);margin-top:6px;max-width:44em}
.dunkel .zeitstrahl{border-top-color:#33332E}
.dunkel .zeitstrahl>div{border-bottom-color:#262622}
.dunkel .zeitstrahl em,.dunkel .zeitstrahl b{color:var(--witt)}
.dunkel .zeitstrahl p{color:var(--kreide)}

/* Merkmale — Kacheln mit Oberlinie */
.merkmale{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px}
.merkmale.zwei{grid-template-columns:repeat(2,1fr);gap:34px}
.merkmal{border-top:3px solid var(--schwatt);padding-top:22px}
.merkmal b{display:block;font-variation-settings:'wdth' 112;font-weight:900;
           text-transform:uppercase;font-size:15.5px;letter-spacing:.02em}
.merkmal p{font-size:14.8px;color:var(--nebel);margin-top:10px}
.dunkel .merkmal{border-top-color:var(--witt)}
.dunkel .merkmal p{color:var(--kreide)}

/* Schritte — nummerierte Karten */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.schritt{border:2px solid var(--schwatt);padding:28px 26px 28px;display:flex;flex-direction:column}
.schritt em{font-style:normal;font-variation-settings:'wdth' 125;font-weight:900;
            font-size:38px;line-height:1;display:block}
.schritt b{display:block;margin-top:16px;font-size:17px;font-variation-settings:'wdth' 112;
           font-weight:900;text-transform:uppercase;letter-spacing:.02em}
.schritt p{font-size:14.8px;color:var(--nebel);margin-top:11px}
/* Der Fussbereich einer Karte (Trennlinie + Kleingedrucktes) wird nach unten
   gedrueckt. Weil alle Karten einer Reihe gleich hoch sind, liegen Linie und
   Text dadurch bei allen Karten auf DERSELBEN Hoehe — unabhaengig davon, wie
   lang der Text darueber ist.
   ACHTUNG: Hier stand frueher eine zweite Regel mit margin-top:20px, die das
   margin-top:auto wieder aufgehoben hat. Nicht wieder einbauen. */
.schritt .klein{display:block;font-size:13px;color:var(--nebel);margin-top:auto;
                padding-top:18px;border-top:1px solid var(--kreide);margin-bottom:0}

/* Sponsorenwand */
.partner{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;
         border-top:2px solid var(--schwatt);border-left:1px solid var(--kreide)}
.partner>*{display:flex;align-items:center;justify-content:center;text-align:center;
           min-height:128px;padding:26px 20px;border-right:1px solid var(--kreide);
           border-bottom:1px solid var(--kreide);font-variation-settings:'wdth' 108;
           font-weight:900;text-transform:uppercase;font-size:15px;letter-spacing:.02em;line-height:1.3}
.partner a:hover{background:var(--linie)}
@media(max-width:760px){.partner{grid-template-columns:repeat(2,1fr)}
                        .partner>*{min-height:104px;font-size:13.5px;padding:20px 14px}}

/* Weiterlesen-Link in einer Merkmalkachel */
.mehr{display:inline-block;margin-top:2px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
      text-transform:uppercase;border-bottom:2px solid var(--schwatt);padding-bottom:2px}

/* Hinweiskasten */
.hinweis-kasten{margin-top:34px;border:2px solid var(--schwatt);padding:24px 28px;font-size:16.5px}
.hinweis-kasten b{display:block;font-variation-settings:'wdth' 112;font-weight:900;
                  text-transform:uppercase;font-size:14px;letter-spacing:.05em;margin-bottom:8px}

@media(max-width:1020px){
  .merkmale{grid-template-columns:repeat(2,1fr)}
  .schritte{grid-template-columns:1fr}
}
@media(max-width:640px){
  .merkmale,.merkmale.zwei{grid-template-columns:1fr;gap:26px}
}

@media(max-width:1020px){
  .zeitstrahl>div{grid-template-columns:110px 1fr;gap:18px}
}
@media(max-width:640px){
  .zeitstrahl>div{grid-template-columns:1fr;gap:6px}
  .seitenkopf{padding:58px 0 62px}
}

/* Zwei-Klick-Kasten fuer eingebettete Inhalte von fremden Servern */
.zweiklick{margin-top:44px;border:2px solid var(--schwatt);background:var(--witt)}
.zweiklick-platz{padding:40px 36px;max-width:44em}
.zweiklick-platz b{display:block;font-variation-settings:'wdth' 112;font-weight:900;
                   text-transform:uppercase;font-size:16px;letter-spacing:.03em}
.zweiklick-platz p{font-size:15px;color:var(--nebel);margin:12px 0 24px}
.zweiklick-platz .klein{display:block;margin-top:16px;font-size:13px;color:var(--nebel)}
.zweiklick-platz .klein a{border-bottom:1px solid var(--asch)}
@media(max-width:640px){.zweiklick-platz{padding:30px 24px}}
/* Nach dem Klick: Innenabstand, damit das Widget nicht am Rahmen klebt */
.zweiklick.geladen{padding:26px 22px}
.zweiklick.geladen iframe{display:block;width:100%!important;border:0}
@media(max-width:640px){.zweiklick.geladen{padding:18px 12px}}


/* ================================================================
   Ergaenzungen fuer Vorstand & Kontakt, Impressum, Datenschutz
   (20.08.2026)
   ================================================================ */

/* Vorstandsliste — Team-Kacheln mit Rundportrait, echo der fuenf Rubrik-Kreise */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;margin-top:48px}
.team-karte{display:flex;flex-direction:column;align-items:center;text-align:center}
.team-foto{display:block;width:100%;max-width:168px;aspect-ratio:1;border-radius:50%;
           padding:4px;border:1px solid var(--kreide);transition:.2s}
.team-foto img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.team-karte:hover .team-foto{border-color:var(--schwatt)}
.team-amt{margin-top:19px;font-size:11px;font-weight:700;letter-spacing:.13em;
          text-transform:uppercase;color:var(--nebel)}
.team-name{display:block;margin-top:5px;font-variation-settings:'wdth' 112;font-weight:900;
           text-transform:uppercase;font-size:15.5px;letter-spacing:.02em;line-height:1.22}
.team-zu{margin-top:9px;font-size:13.3px;color:var(--nebel);line-height:1.5;max-width:19em}
@media(max-width:1020px){.team{grid-template-columns:repeat(3,1fr);row-gap:40px}}
@media(max-width:560px){.team{grid-template-columns:repeat(2,1fr);gap:26px 18px}}

/* Adressblock auf dunklem Grund */
.dunkel .platzliste>div{color:var(--kreide);border-bottom-color:#33332E}
.dunkel .platzliste{border-top-color:#33332E}
.dunkel .platzliste b{color:var(--witt)}
.dunkel .platzliste a{border-bottom-color:var(--nebel)}

/* Mailadresse in einer Schritt-Karte */
.schritt .klein a{border-bottom:1px solid var(--asch)}
.schritt .post{margin-top:auto}

/* Rechtstexte — Impressum und Datenschutz */
.rechtstext{max-width:46em;margin-top:44px}
.rechtstext h2{font-size:19px;letter-spacing:.03em;margin:46px 0 14px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{font-size:16.5px;margin-bottom:13px}
.rechtstext ul{margin:0 0 15px 19px;font-size:16.5px}
.rechtstext li{margin-bottom:6px}
.rechtstext a{border-bottom:1px solid var(--asch)}
.rechtstext .anschrift{margin:16px 0 20px;padding-left:20px;border-left:3px solid var(--schwatt);
                       font-size:16.5px;line-height:1.7}
.rechtstext .stand{margin-top:52px;padding-top:20px;border-top:1px solid var(--kreide);
                   font-size:13px;color:var(--nebel)}

/* ================================================================
   Fotobausteine fuer die Unterseiten (26.08.2026)
   ================================================================ */

/* Breites Foto quer ueber die Seite, mit Bildunterschrift.
   Wie .bildband auf der Startseite, aber ohne die ueberlappende
   Zahlenkarte — deshalb ein eigener Baustein. */
.fotoband{position:relative;background:var(--schwatt)}
.fotoband>img{width:100%;aspect-ratio:2.17/1;object-fit:cover}
.fotoband figcaption{max-width:var(--max);margin:13px auto 0;padding:0 30px;text-align:right;
                     font-size:12px;letter-spacing:.03em;color:var(--nebel)}
@media(max-width:640px){.fotoband>img{aspect-ratio:1.6/1}}

/* Foto in einer Spalte des .herkunft-Rasters */
.fotoblock{margin:0}
.fotoblock img{width:100%;object-fit:cover;border-top:9px solid var(--schwatt)}
.fotoblock figcaption{margin-top:11px;font-size:12.5px;color:var(--nebel)}
.dunkel .fotoblock figcaption{color:var(--asch)}
.fotoblock.hoch img{aspect-ratio:3/4}
.fotoblock.quer img{aspect-ratio:3/2}

/* Zwei Fotos nebeneinander */
.fotopaar{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.fotopaar figure{margin:0}
.fotopaar img{width:100%;aspect-ratio:3/2;object-fit:cover;border-top:9px solid var(--schwatt)}
.fotopaar figcaption{margin-top:11px;font-size:12.5px;color:var(--nebel)}
@media(max-width:760px){.fotopaar{grid-template-columns:1fr;gap:30px}}

/* Quadratisches Foto (Mannschaftsbild) */
.fotoblock.quadrat img{aspect-ratio:1/1}

/* Foto neben einem Textkasten */
.bild-neben{display:grid;grid-template-columns:.62fr 1fr;gap:48px;margin-top:46px;align-items:start}
@media(max-width:860px){.bild-neben{grid-template-columns:1fr;gap:32px}
                        .bild-neben .fotoblock{max-width:380px}}

/* ================================================================
   Korrekturen 26.08.2026 — waagerechtes Scrollen verhindern
   ================================================================ */

/* Bildunterschrift im Fotoband steht auf schwarzem Grund und braucht
   deshalb eine helle Farbe. */
.fotoband figcaption{color:var(--asch)}

/* Raster-Spalten duerfen unter ihre Mindestbreite schrumpfen. Ohne das
   schob die Ueberschrift im Schlussband die Seite 11 px zu breit. */
.band-text{min-width:0}
/* KEIN overflow-wrap:break-word hier! Das trennte "vorbeizuschauen"
   mitten im Wort und ohne Trennstrich. Stattdessen: mehr Platz fuer die
   Ueberschrift, und im Text steht an der richtigen Stelle ein weiches
   Trennzeichen (­), damit sauber mit Bindestrich getrennt wird. */
.band h2{max-width:none}

/* Trainingszeiten-Tabelle: Auf schmalen Bildschirmen darf die erste
   Spalte umbrechen, sonst passt die Tabelle nicht aufs Handy.
   Die Uhrzeit bleibt zusammen. */
@media(max-width:900px){
  .zeiten table{font-size:15px}
  .zeiten th,.zeiten td{padding-right:14px}
  .zeiten>div{min-width:0}
}

/* Auf dem Handy wird aus jeder Tabellenzeile eine eigene Karte. Fuenf
   Spalten passen sonst nicht nebeneinander, und Uhrzeiten wuerden mitten
   im Zeitraum umbrechen. Die Beschriftung kommt aus data-label im HTML. */
@media(max-width:640px){
  .zeiten table,.zeiten thead,.zeiten tbody,.zeiten tr,.zeiten th,.zeiten td{display:block}
  .zeiten thead{position:absolute;width:1px;height:1px;overflow:hidden;
                clip-path:inset(50%);white-space:nowrap}
  .zeiten tbody tr{border:2px solid var(--schwatt);background:var(--witt);
                   padding:20px 22px 16px;margin-bottom:14px}
  .zeiten td{border:0;padding:6px 0;font-size:15.5px;
             display:grid;grid-template-columns:6.6em 1fr;gap:14px;align-items:baseline}
  .zeiten td::before{content:attr(data-label);font-size:10px;font-weight:700;
                     letter-spacing:.13em;text-transform:uppercase;color:var(--nebel)}
  .zeiten td:first-child{display:block;padding:0 0 12px;margin-bottom:10px;
                         border-bottom:1px solid var(--kreide);
                         font-variation-settings:'wdth' 112;font-weight:900;
                         text-transform:uppercase;font-size:19px;line-height:1.15}
  .zeiten td:first-child::before{content:none}
  .zeiten td[data-label="Uhrzeit"]{white-space:nowrap}
}

/* Sponsorenwand: lange Firmennamen auf sehr schmalen Geraeten
   untereinander statt nebeneinander. */
.partner>*{min-width:0;overflow-wrap:break-word}
@media(max-width:430px){.partner{grid-template-columns:1fr}}

/* Variante: Textkasten mittig neben einem hohen Foto — sonst steht der
   kurze Kasten oben und darunter klafft eine Lücke. */
.bild-neben.mittig{align-items:center}


/* Begriffe, die nie getrennt werden sollen (Vereinsnamen, E-Mail). */
.zusammen{white-space:nowrap}

/* Sehr schmale Geraete: Namen in der Vorstandsgalerie etwas kleiner,
   damit "Westkaemper" nicht ueber die Kachel hinausragt. */
@media(max-width:400px){.team-name{font-size:14px}}

/* ================================================================
   Korrekturen 26.08.2026 (dritter Durchgang)
   ================================================================ */

/* Zweispaltiger Textabschnitt (.herkunft): Beide Spalten sind Fliesstext
   und stehen unmittelbar nebeneinander — sie muessen darum gleich gross
   sein. Vorher war links .lead mit 18,5 px und rechts .dorf-text mit
   15,5 px; das sah nach Fehler aus, nicht nach Abstufung. */
.herkunft .dorf-text{font-size:18.5px;margin-top:18px}


/* ================================================================
   Korrekturen 26.08.2026 (zweiter Durchgang) — Umbrueche und Ueberlauf
   ================================================================ */

/* Die Trainingszeiten stehen jetzt in fuenf Spalten. Ab hier bekommt die
   Tabelle die volle Breite, sonst passt sie zwischen 900 und 1180 px nicht. */
@media(max-width:1180px){
  .zeiten{grid-template-columns:1fr;gap:44px}
}

/* Rasterspalten duerfen schrumpfen. Ohne das dehnt ein einzelnes langes
   Wort (z. B. "SCHIEDSRICHTER") die ganze Seite auf. */
.herkunft>*,.zeiten>*,.doerfer>*,.merkmale>*,.schritte>*,.team>*{min-width:0}

/* Sehr schmale Geraete (unter ca. 360 px) */
@media(max-width:380px){
  .wrap{padding:0 20px}
  .zahl{padding:24px 16px}
  .team{grid-template-columns:1fr}
  .team-foto{max-width:200px}
  .dorf .platt{font-size:26px}
  .zeitstrahl>div{grid-template-columns:1fr;gap:6px}
  .anek-row{grid-template-columns:26px 1fr;gap:12px}
}