/* ═══════════════════════════════════════════════════════════════════════
   ÖFFENTLICH · SEITEN AUS PHASE 7
   News, Kalender, Partner, Mitglieder, Squads, Startseite, Kontakt, Shop.

   Diese Blöcke standen bis zum Rework in `style.css`. Sie waren nicht falsch,
   aber sie kamen aus einer Zeit ohne Skala: `padding: 0.85rem`,
   `color: var(--text-muted)`, `border-radius: 12px` — jeder Wert für sich
   plausibel, zusammen kein Raster.

   Beim Umzug sind sie auf die Tokens gezogen worden: Abstände auf die
   4-px-Reihe, Farben auf die Neutralskala, Radien und Schatten auf die
   Stufen. Das verschiebt vieles um zwei, vier Pixel — und genau diese zwei,
   vier Pixel sind der Unterschied zwischen „gewachsen" und „gesetzt".
   ═════════════════════════════════════════════════════════════════════ */

@layer oe-seiten {

/* ═══ News  (REWORK-DOKU/03, Abschnitt 2) ═══════════════════════════════ */
.pn-news, .pn-beitrag, .pn-passt-dazu { max-width: 1100px; margin: 0 auto; padding: 0 var(--s-5); }
.pn-news { padding-top: var(--s-8); padding-bottom: var(--s-7); }
.pn-news .kopf { margin-bottom: var(--s-6); }
.pn-news .kopf h1 { margin: 0 0 .4rem; font-size: clamp(2rem, 5vw, 3rem); }
.pn-news .kopf p { margin: 0; color: var(--text-leise); }

.pn-news .filter { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.pn-news .chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.pn-news .chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid var(--linie);
  color: var(--text-leise); text-decoration: none; font-size: .82rem; font-weight: 600;
}
.pn-news .chip span { font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }
.pn-news .chip:hover { color: var(--text); border-color: var(--chip, var(--marke)); }
.pn-news .chip.aktiv { background: var(--chip, var(--marke)); border-color: var(--chip, var(--marke)); color: #fff; }
/* Null Treffer heisst ausgegraut, nicht versteckt — eine Auswahl, aus der
   Eintraege verschwinden, wirkt kaputt. */
.pn-news .chip.leer { opacity: .38; pointer-events: none; }

.pn-news .felder { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.pn-news .felder label { display: grid; gap: .25rem; font-size: .72rem; text-transform: uppercase;
                         letter-spacing: .08em; color: var(--text-leise); }
.pn-news .felder .suche { flex: 1 1 240px; }
.pn-news .felder input, .pn-news .felder select, .pn-news .felder button {
  padding: .5rem .7rem; border-radius: 8px; font: inherit; font-size: .9rem;
  border: 1px solid var(--linie-stark);
  background: var(--bg-soft, rgba(255,255,255,.04)); color: var(--text);
}
.pn-news .felder button { cursor: pointer; background: var(--marke); border-color: var(--marke); color: #fff; font-weight: 600; }

.pn-news .aktive-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--s-5); }
.pn-news .weg {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .22rem .6rem; border-radius: 999px;
  background: var(--surface, rgba(255,255,255,.05));
  color: var(--text-leise); text-decoration: none; font-size: .78rem;
}
.pn-news .weg:hover { color: var(--text); }
.pn-news .weg.alle { background: none; text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.pn-news .karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-5); }
.pn-news .karte { background: var(--flaeche); border-radius: 14px; overflow: hidden; }
.pn-news .karte a { color: inherit; text-decoration: none; display: block; height: 100%; }
.pn-news .karte .bild { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #000; }
.pn-news .karte .text { padding: var(--s-4) var(--s-4) var(--s-5); display: grid; gap: .5rem; }
.pn-news .karte h2 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.pn-news .karte p { margin: 0; color: var(--text-leise); font-size: .88rem; }
.pn-news .karte .meta { font-size: .78rem; }
.pn-news .karte.angeheftet { outline: 1px solid var(--marke); }
.pn-news .kat, .pn-beitrag .kat, .pn-passt-dazu .kat {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  background: var(--chip, var(--marke)); color: #fff;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  text-decoration: none; justify-self: start;
}
.pn-news .blaettern { display: flex; gap: var(--s-5); align-items: center; justify-content: center;
                      margin-top: 2.4rem; color: var(--text-leise); font-size: .88rem; }
.pn-news .blaettern a { color: var(--marke-text); }
.pn-news .leer { color: var(--text-leise); }

/* ── Beitragsseite ─────────────────────────────────────────────────────── */
.pn-beitrag { padding-top: var(--s-8); max-width: 760px; }
.pn-beitrag .kopf { display: grid; gap: .6rem; margin-bottom: var(--s-6); }
.pn-beitrag h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.12; }
.pn-beitrag .meta { margin: 0; color: var(--text-leise); font-size: .84rem; }
.pn-beitrag .anriss { margin: .4rem 0 0; font-size: 1.06rem; color: var(--text-leise); }
.pn-beitrag .titelbild { width: 100%; border-radius: 14px; margin-bottom: var(--s-6); }
/* Lesetext bei rund 65 Zeichen — laenger wird er anstrengend. */
.pn-beitrag .inhalt { font-size: 1.04rem; line-height: 1.72; }
.pn-beitrag .inhalt > * { margin: 0 0 var(--s-5); }
.pn-beitrag .inhalt h2 { margin: 2.2rem 0 .8rem; font-size: 1.35rem; }
.pn-beitrag .inhalt figure { margin: var(--s-6) 0; }
.pn-beitrag .inhalt figure img { width: 100%; border-radius: 12px; }
.pn-beitrag .inhalt figcaption { margin-top: .5rem; color: var(--text-leise); font-size: .82rem; }
.pn-beitrag .inhalt blockquote {
  margin: var(--s-6) 0; padding-left: var(--s-5); border-left: 3px solid var(--marke);
  font-size: 1.12rem; font-style: italic;
}
.pn-beitrag .inhalt blockquote cite { display: block; margin-top: .5rem; font-size: .85rem;
                                      font-style: normal; color: var(--text-leise); }
.pn-beitrag .inhalt ul { padding-left: var(--s-5); }
.pn-beitrag .inhalt li { margin-bottom: .4rem; }
.pn-beitrag .inhalt hr { border: 0; border-top: 1px solid var(--line, rgba(255,255,255,.1)); margin: 2.4rem 0; }
.pn-video { display: grid; gap: .5rem; place-items: center; aspect-ratio: 16/9;
            background: #000; border-radius: 12px; }
.pn-video button { padding: .6rem var(--s-5); border-radius: 8px; border: 0; cursor: pointer;
                   background: var(--marke); color: #fff; font: inherit; font-weight: 600; }
.pn-video small { color: rgba(255,255,255,.55); font-size: .74rem; }
.pn-video iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }
.pn-beitrag .bezuege, .pn-beitrag .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--s-6) 0 0; }
.pn-beitrag .bezuege a, .pn-beitrag .tags a {
  padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; text-decoration: none;
  background: var(--surface, rgba(255,255,255,.05)); color: var(--text-leise);
}
.pn-beitrag .teilen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
                      margin: 2.4rem 0 0; padding-top: var(--s-5);
                      border-top: 1px solid var(--line, rgba(255,255,255,.1)); font-size: .85rem; }
.pn-beitrag .teilen span { color: var(--text-leise); }
.pn-beitrag .teilen a, .pn-beitrag .teilen button {
  padding: .35rem .8rem; border-radius: 8px; font: inherit; font-size: .84rem; cursor: pointer;
  border: 1px solid var(--linie-stark);
  background: transparent; color: var(--text); text-decoration: none;
}
.pn-beitrag .discord { margin: var(--s-5) 0 0; color: var(--text-leise); font-size: .9rem; }
.pn-passt-dazu { padding-top: var(--s-7); padding-bottom: var(--s-7); max-width: 1100px; }
.pn-passt-dazu h2 { font-size: 1.2rem; margin: 0 0 var(--s-4); }
.pn-passt-dazu .karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.pn-passt-dazu .karte { display: grid; gap: .45rem; padding: var(--s-4);
                        background: var(--flaeche); border-radius: 12px;
                        color: inherit; text-decoration: none; }
.pn-passt-dazu .karte time { color: var(--text-leise); font-size: .78rem; }

/* ═══ Kalender  (REWORK-DOKU/03, Abschnitt 1.4) ═════════════════════════
   Zwei Darstellungen, eine Datenquelle: oben das Monatsraster („wann ist
   etwas"), darunter die Agenda („was genau"). Unter 720 px faellt das Raster
   weg — 42 Kaestchen auf einem Handydisplay sind keine Uebersicht, sondern
   ein Suchbild. Die Agenda bleibt und traegt dann die ganze Seite.
   ═══════════════════════════════════════════════════════════════════════ */
.pn-kalender { max-width: 1100px; margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-7); }
.pn-kalender .kopf { margin-bottom: var(--s-6); }
.pn-kalender .kopf h1 { margin: 0 0 .4rem; font-size: clamp(2rem, 5vw, 3rem); }
.pn-kalender .kopf p { margin: 0; color: var(--text-leise); }
.pn-kalender .abo { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; }

.pn-kalender .arten { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--s-5); }
.pn-kalender .chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid var(--linie);
  color: var(--text-leise); text-decoration: none; font-size: .82rem; font-weight: 600;
}
.pn-kalender .chip:hover { color: var(--text); border-color: var(--chip, var(--marke)); }
.pn-kalender .chip.aktiv { background: var(--chip, var(--marke)); border-color: var(--chip, var(--marke)); color: #fff; }
.pn-kalender .chip .pn-ic { width: 1em; height: 1em; }

/* Monatswechsel. Der Titel steht in der Mitte, die Pfeile aussen — die
   Reihenfolge im Quelltext ist zurueck, Titel, vor, damit sie auch mit der
   Tastatur so laeuft, wie sie aussieht. */
.pn-kalender .steuerung { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.pn-kalender .steuerung h2 { margin: 0; font-size: 1.35rem; }
.pn-kalender .blaettern {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 999px;
  border: 1px solid var(--linie-stark);
  color: var(--text-leise); text-decoration: none; font-size: 1.1rem;
}
.pn-kalender .blaettern:hover { color: var(--text); border-color: var(--marke); }
.pn-kalender .heute-zurueck { margin-left: auto; font-size: .82rem; color: var(--text-leise); }

.pn-kalender .raster { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: var(--s-7); }
.pn-kalender .raster th {
  padding: .4rem .3rem; font-size: .7rem; font-weight: 600; text-align: left;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-leise);
}
.pn-kalender .raster th abbr { text-decoration: none; }
.pn-kalender .raster td {
  height: 6.4rem; vertical-align: top; padding: .3rem;
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
/* Nachbarmonate bleiben stehen, statt leer zu sein: Ein Raster mit Loechern
   an den Raendern liest sich, als fehlten dort Daten. */
.pn-kalender .raster td.fremd { background: transparent; opacity: .38; }
.pn-kalender .raster td.heute { outline: 2px solid var(--marke); outline-offset: -2px; }
.pn-kalender .raster .nr { display: block; font-size: .78rem; color: var(--text-leise);
                           font-variant-numeric: tabular-nums; margin-bottom: .2rem; }
.pn-kalender .raster td.heute .nr { color: var(--marke-text); font-weight: 700; }

/* Ein Termin im Raster: farbige Kante links, Zeit, Titel — mehr passt nicht
   in ein Kaestchen, und mehr braucht es auch nicht, um zu entscheiden, ob man
   hinsieht. Der volle Text steht im title und in der Agenda. */
.pn-kalender .marke {
  display: block; margin-bottom: .18rem; padding: .12rem .3rem .12rem .4rem;
  border-left: 3px solid var(--art, var(--marke)); border-radius: 3px;
  background: color-mix(in srgb, var(--art, var(--marke)) 14%, transparent);
  color: var(--text); text-decoration: none; font-size: .7rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-kalender .marke:hover { background: color-mix(in srgb, var(--art, var(--marke)) 28%, transparent); }
.pn-kalender .marke .zeit { color: var(--text-leise); font-variant-numeric: tabular-nums; margin-right: .25rem; }
.pn-kalender .raster .mehr { font-size: .66rem; color: var(--text-leise); padding-left: .4rem; }

.pn-kalender .agenda h2 { margin: 0 0 var(--s-4); font-size: 1.25rem; }
.pn-kalender .liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pn-kalender .liste li {
  display: flex; gap: var(--s-4); align-items: flex-start; padding: .8rem var(--s-4);
  background: var(--flaeche); border-radius: 12px;
}
.pn-kalender .liste .datum {
  flex: 0 0 3rem; text-align: center; line-height: 1.1;
  padding-top: .1rem; color: var(--text-leise);
}
.pn-kalender .liste .datum .t { display: block; font-size: 1.5rem; font-weight: 700;
                                color: var(--text); font-variant-numeric: tabular-nums; }
.pn-kalender .liste .datum .m { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.pn-kalender .liste .inhalt { display: grid; gap: .18rem; min-width: 0; }
.pn-kalender .liste .oben { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pn-kalender .liste .art {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--art, var(--marke));
  background: color-mix(in srgb, var(--art, var(--marke)) 14%, transparent);
}
.pn-kalender .liste .art .pn-ic { width: .9em; height: .9em; }
.pn-kalender .liste time { font-size: .78rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.pn-kalender .liste .titel { font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none; }
.pn-kalender .liste a.titel:hover { color: var(--marke-text); }
.pn-kalender .liste .was, .pn-kalender .liste .ort { font-size: .82rem; color: var(--text-leise); }
.pn-kalender .liste .ort { display: inline-flex; align-items: center; gap: .3rem; }
.pn-kalender .leer { color: var(--text-leise); }
.pn-kalender .fuss { margin-top: var(--s-7); font-size: .8rem; color: var(--text-leise); }

@media (max-width: 720px) {
  .pn-kalender { padding-top: var(--s-8); }
  .pn-kalender .raster { display: none; }
  .pn-kalender .steuerung { margin-bottom: var(--s-5); }
}


/* ═══ Partnerseite und Bewerbung  (REWORK-DOKU/03, Abschnitte 5 und 3.3) ══ */
.pn-partner, .pn-bewerbung, .pn-status { max-width: 820px; margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-7); }

.pn-partner .kopf { display: flex; gap: var(--s-6); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--s-6); }
.pn-partner .kopf .logo {
  flex: 0 0 140px; padding: var(--s-4); background: var(--flaeche);
  border-radius: var(--r-m); box-shadow: var(--heben-1);
  display: grid; place-items: center;
}
.pn-partner .kopf .logo img { max-width: 100%; height: auto; }
.pn-partner .kopf .wer { flex: 1 1 320px; }
.pn-partner .stufe {
  display: inline-block; margin-bottom: .4rem; padding: .15rem .6rem; border-radius: 999px;
  background: var(--marke-weich); color: var(--marke-text);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.pn-partner .kopf h1 { margin: 0 0 .5rem; font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
.pn-partner .satz { margin: 0 0 .7rem; color: var(--text-leise); }
.pn-partner .meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: 0; font-size: .85rem; color: var(--text-leise); }
.pn-partner .meta .web { display: inline-flex; align-items: center; gap: .35rem; }

.pn-partner .text { margin-bottom: var(--s-7); }
.pn-partner .text p { margin: 0 0 var(--s-4); }
.pn-partner .text h2 { margin: var(--s-6) 0 .8rem; font-size: 1.4rem; }
.pn-partner .text img { border-radius: var(--r-m); }

/* Das Angebot: geschlossen sieht anders aus als offen — sonst wirkt der
   Hinweis „nur für Mitglieder" wie ein Fehler statt wie eine Tür. */
.pn-partner .angebot {
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-7);
  background: var(--marke-weich); border-left: 4px solid var(--marke);
  border-radius: var(--r-s);
}
.pn-partner .angebot.zu { background: var(--flaeche-2); border-left-color: var(--linie-stark); }
.pn-partner .angebot h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.pn-partner .angebot p { margin: 0 0 .7rem; }
.pn-partner .angebot .code { font-family: var(--font-mono, ui-monospace, monospace); }
.pn-partner .angebot .code strong {
  padding: .15rem .5rem; border-radius: var(--r-s);
  background: var(--flaeche); border: 1px dashed var(--linie-stark); letter-spacing: .08em;
}

.pn-partner .aktionen, .pn-partner .kontakt { margin-bottom: var(--s-6); }
.pn-partner .aktionen h2, .pn-partner .kontakt h2 { margin: 0 0 .7rem; font-size: 1.15rem; }
.pn-partner .aktionen ul, .pn-partner .kontakt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pn-partner .aktionen time { margin-left: .5rem; font-size: .8rem; color: var(--text-leise); }
.pn-partner .kontakt .links { display: flex; flex-wrap: wrap; gap: .8rem; }
.pn-partner .werben { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--linie);
                      color: var(--text-leise); font-size: .9rem; }

/* ── Auf der Übersicht ────────────────────────────────────────────────
   Die Stufe steht jetzt in der Randspalte des Bandes, nicht als eigene
   Zwischenüberschrift — sie ist eine Ortsangabe wie „Liga" oder „News".

   ⚠ Die Karte ist ein Raster mit fester Logozeile: Partnerlogos kommen in
     jedem Seitenverhältnis, und ohne feste Höhe steht die eine Karte 40 px
     tiefer als die daneben. */
.partner-karten { display: grid; gap: var(--s-4);
                  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.partner-karten.gross { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.partner-karte {
  display: grid; align-content: start; gap: var(--s-4); padding: var(--s-5);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  text-decoration: none; color: inherit;
  transition: border-color var(--dauer-normal) var(--kurve), transform var(--dauer-normal) var(--kurve);
}
.partner-karte:hover { border-color: var(--marke-linie); transform: translateY(-2px); }
/* ⚠ Die Logoplatte ist DUNKEL, und zwar mit Grund: Alle vier
   Partnerlogos liegen als weisse Fassung in der Datenbank — sie wurden für
   den dunklen Abschnitt gemacht, in dem sie früher standen. Auf weissem
   Karton waren sie unsichtbar. Liefert ein Partner später ein dunkles
   Logo, ist diese Platte die eine Stelle, an der das entschieden wird. */
.partner-karte .logo { display: grid; place-items: center; height: 5.5rem;
                       padding: var(--s-4); background: var(--dunkel);
                       border-radius: var(--r-s); }
.partner-karten.gross .partner-karte .logo { height: 7rem; }
.partner-karte .logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-karte .text { display: grid; gap: var(--s-2); }
.partner-karte strong { font-family: var(--font-display); font-size: var(--t-h3);
                        text-transform: uppercase; line-height: var(--zeile-eng); }
.partner-karte .text span { color: var(--text-leise); font-size: var(--t-klein);
                            line-height: var(--zeile-mit); }
.partner-karte .oe-weiter { color: var(--marke-text); }
/* Auf einem `papier`-Band bleibt die Karte weiss — sonst verschwindet sie. */
.oe-band.papier .partner-karte { background: var(--flaeche); }

/* ── Bewerbungsformular ─────────────────────────────────────────────────
   Fehler stehen AM Feld, nicht gesammelt oben: Wer sie oben liest, muss sie
   sich beim Ausfüllen merken. */
.pn-bewerbung .kopf { margin-bottom: var(--s-6); }
.pn-bewerbung .kopf h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 5vw, 2.8rem); }
.pn-bewerbung .kopf p { margin: 0 0 var(--s-4); color: var(--text-leise); }
.pn-bewerbung .fehler-oben { padding: .8rem var(--s-4); border-radius: var(--r-s);
                             background: rgba(228, 23, 59, .1); color: var(--marke-text); }
.pn-bewerbung .formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pn-bewerbung .feld { display: grid; gap: .3rem; }
.pn-bewerbung .feld.voll, .pn-bewerbung .formular > button { grid-column: 1 / -1; }
.pn-bewerbung .feld > span { font-size: .74rem; font-weight: 600; text-transform: uppercase;
                             letter-spacing: .08em; color: var(--text-leise); }
.pn-bewerbung .feld small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pn-bewerbung input[type=text], .pn-bewerbung input[type=email],
.pn-bewerbung select, .pn-bewerbung textarea {
  width: 100%; padding: .6rem .75rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--linie-stark); border-radius: var(--r-s);
  background: var(--flaeche); color: var(--text);
}
.pn-bewerbung textarea { resize: vertical; }
.pn-bewerbung .feld.falsch input, .pn-bewerbung .feld.falsch textarea { border-color: var(--marke); }
.pn-bewerbung .feld em { font-style: normal; font-size: .8rem; color: var(--marke-text); }
.pn-bewerbung .haken { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
.pn-bewerbung .haken span { font-size: .88rem; color: var(--text-leise); text-transform: none;
                            letter-spacing: 0; font-weight: 400; }
.pn-bewerbung .haken em { grid-column: 1 / -1; }
/* Der Honigtopf muss für Bots erreichbar aussehen und für Menschen weg sein —
   `display:none` überspringen manche Bots gezielt. */
.pn-bewerbung .honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pn-bewerbung .ok { padding: var(--s-4); border-radius: var(--r-s); background: var(--flaeche); }

/* ── Liga-Anmeldung: der Ablauf über dem Formular ────────────────────
   Vier Schritte, bevor jemand tippt. Der dritte kostet Geld, und das soll
   man wissen, bevor man Daten eingibt — nicht danach (Kap. 15.4c). */
.pn-ablauf { margin-bottom: var(--s-7); }
.pn-ablauf h2 { margin: 0 0 var(--s-4); font-size: 1.25rem; }
.pn-ablauf ol { margin: 0 0 var(--s-4); padding: 0; list-style: none; display: grid; gap: var(--s-3);
                counter-reset: schritt; }
.pn-ablauf li { counter-increment: schritt; position: relative; padding-left: 2.6rem;
                font-size: .95rem; color: var(--text-leise); line-height: 1.55; }
.pn-ablauf li::before {
  content: counter(schritt); position: absolute; left: 0; top: -.1rem;
  width: 1.8rem; height: 1.8rem; border-radius: var(--r-full);
  background: var(--flaeche); color: var(--text); display: grid; place-items: center;
  font-family: var(--font-display); font-size: .95rem;
}
.pn-ablauf li strong { color: var(--text); }
.pn-ablauf .hinweis { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4);
                      border-radius: var(--r-s); background: var(--flaeche);
                      font-size: .88rem; color: var(--text-leise); }

/* Wenn gerade keine Anmeldung offen ist — eine Aussage, keine leere Seite. */
.pn-lage { padding: var(--s-6) var(--s-5); border-radius: var(--r-m);
           background: var(--flaeche); text-align: center; }
.pn-lage h2 { margin: 0 0 var(--s-3); font-size: 1.25rem; }
.pn-lage p { margin: 0 0 var(--s-4); color: var(--text-leise); }
.pn-lage p:last-child { margin-bottom: 0; }

/* ── Statusseite einer Bewerbung ─────────────────────────────────────── */
.pn-status h1 { margin: 0 0 .3rem; font-size: clamp(1.8rem, 4.5vw, 2.4rem); }
.pn-status .wann { margin: 0 0 var(--s-6); color: var(--text-leise); font-size: .85rem; }
.pn-status .schritte { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; }
.pn-status .schritte li { flex: 1; position: relative; text-align: center; font-size: .8rem;
                          color: var(--text-leise); padding-top: 1.9rem; }
/* Die Linie zwischen den Punkten: ein Pseudo-Element je Schritt ausser dem
   ersten — so bleibt sie an den Punkten hängen, auch wenn die Spalten
   unterschiedlich breit werden. */
.pn-status .schritte li::before {
  content: ''; position: absolute; top: .55rem; right: 50%; left: -50%; height: 2px;
  background: var(--linie-stark);
}
.pn-status .schritte li:first-child::before { display: none; }
.pn-status .schritte .punkt {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: var(--bg); border: 2px solid var(--linie-stark);
}
.pn-status .schritte li.fertig .punkt { background: var(--marke); border-color: var(--marke); }
.pn-status .schritte li.fertig::before { background: var(--marke); }
.pn-status .schritte li.dran .punkt { border-color: var(--marke); box-shadow: 0 0 0 4px var(--marke-weich); }
.pn-status .schritte li.dran { color: var(--text); font-weight: 600; }
.pn-status .stand { padding: .9rem var(--s-4); border-radius: var(--r-s); background: var(--flaeche); }
.pn-status .stand.abgelehnt { background: var(--flaeche-2); }
.pn-status .antwort, .pn-status .deins { margin-top: var(--s-6); }
.pn-status h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
.pn-status dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem var(--s-5); margin: 0; }
.pn-status dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); }
.pn-status dd { margin: 0; }
.pn-status .fuss { margin-top: var(--s-7); font-size: .85rem; color: var(--text-leise); }

@media (max-width: 620px) {
  .pn-bewerbung .formular { grid-template-columns: 1fr; }
  .pn-status dl { grid-template-columns: 1fr; }
  .pn-status dt { margin-top: .5rem; }
}

/* ═══ Mitgliederseite  (REWORK-DOKU/03, Abschnitt 3.2) ══════════════════
   Vorstand und Staff gross, die Wall kompakt — der Unterschied ist inhaltlich:
   Deren Funktion steht fest auf der Seite, die Wall ist freiwillig.
   ═══════════════════════════════════════════════════════════════════════ */
.pn-mitglieder { max-width: 1100px; margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-7); }
.pn-mitglieder .kopf { margin-bottom: var(--s-6); }
.pn-mitglieder .kopf h1 { margin: 0 0 .4rem; font-size: clamp(2rem, 5vw, 3rem); }
.pn-mitglieder .kopf p { margin: 0; color: var(--text-leise); }
.pn-mitglieder .gruppe { margin-bottom: var(--s-7); }
.pn-mitglieder .gruppe h2 { margin: 0 0 var(--s-4); font-size: 1.3rem; }

.pn-mitglieder .karten { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem;
                         grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pn-mitglieder .karten.gross { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pn-mitglieder .karte {
  display: flex; gap: .9rem; align-items: center; padding: .8rem;
  background: var(--flaeche); border-radius: var(--r-m); box-shadow: var(--heben-1);
}
.pn-mitglieder .karte.gross { padding: var(--s-4); }
.pn-mitglieder .bild { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 999px; object-fit: cover; }
.pn-mitglieder .karte.gross .bild { flex-basis: 64px; width: 64px; height: 64px; }
/* Kein Foto ist der Normalfall — Foto ist opt-in. Der Platzhalter darf
   deshalb nicht nach fehlendem Bild aussehen. */
.pn-mitglieder .platzhalter {
  display: grid; place-items: center; background: var(--marke-weich); color: var(--marke-text);
  font-family: var(--font-display); font-size: 1.3rem;
}
.pn-mitglieder .wer { display: grid; gap: .1rem; min-width: 0; }
.pn-mitglieder .wer strong { font-size: 1rem; }
.pn-mitglieder .funktion { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                           letter-spacing: .08em; color: var(--marke-text); }
.pn-mitglieder .klarname, .pn-mitglieder .disziplin, .pn-mitglieder .seit {
  font-size: .8rem; color: var(--text-leise);
}
.pn-mitglieder .socials { display: flex; gap: .6rem; font-size: .78rem; margin-top: .2rem; }

.pn-mitglieder .filter { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin-bottom: var(--s-5); }
.pn-mitglieder .filter label { display: grid; gap: .25rem; font-size: .72rem; text-transform: uppercase;
                               letter-spacing: .08em; color: var(--text-leise); }
.pn-mitglieder .filter .suche { flex: 1 1 220px; }
.pn-mitglieder .filter input, .pn-mitglieder .filter select, .pn-mitglieder .filter button {
  padding: .5rem .7rem; font: inherit; font-size: .9rem; color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: var(--r-s); background: var(--flaeche);
}
.pn-mitglieder .filter button { cursor: pointer; background: var(--marke); border-color: var(--marke);
                                color: #fff; font-weight: 600; }
.pn-mitglieder .filter .zurueck { font-size: .82rem; color: var(--text-leise); }
.pn-mitglieder .leer { color: var(--text-leise); max-width: 60ch; }

/* ── Die vier Abschnitte der Mitgliedsbewerbung ─────────────────────────
   Kein Assistent: vier <fieldset> in einem Formular. Der Fortschritt ist
   sichtbar, weil man die Abschnitte sieht — und ohne JavaScript funktioniert
   es genauso. */
.pn-bewerbung fieldset { grid-column: 1 / -1; border: 0; padding: 0; margin: 0 0 var(--s-5);
                         display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pn-bewerbung legend {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem;
  padding: 0; margin-bottom: .3rem; font-size: 1.05rem; font-weight: 700;
}
.pn-bewerbung legend .nr {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: var(--marke); color: #fff; font-size: .82rem;
}
.pn-bewerbung .wahl { display: grid; gap: .5rem; }
.pn-bewerbung .wahl label { display: flex; gap: .6rem; align-items: flex-start;
                            padding: .6rem .8rem; border: 1px solid var(--linie);
                            border-radius: var(--r-s); background: var(--flaeche); cursor: pointer; }
.pn-bewerbung .wahl label:hover { border-color: var(--marke); }
.pn-bewerbung .wahl label span { font-size: .92rem; color: var(--text); text-transform: none;
                                 letter-spacing: 0; font-weight: 400; }
.pn-bewerbung .wahl small { display: block; color: var(--text-leise); font-size: .8rem; }
.pn-bewerbung .hinweis { grid-column: 1 / -1; margin: 0; color: var(--text-leise); font-size: .9rem; }
.pn-bewerbung .hinweis.klein { font-size: .82rem; margin-top: var(--s-4); }

@media (max-width: 620px) {
  .pn-bewerbung fieldset { grid-template-columns: 1fr; }
}

/* ═══ Squad-Seiten  (REWORK-DOKU/03, Abschnitt 4) ═══════════════════════ */

/* Übersicht: eine Karte je Squad statt aller Roster untereinander. */
/* Auf `/teams` steht das Zahlenband zwischen Kopf und Kacheln. */
.pn-teams .oe-zahlenband { margin-bottom: var(--s-7); }

.squad-karten { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.squad-karte {
  display: grid; gap: .8rem; padding: var(--s-5); text-decoration: none; color: inherit;
  background: var(--flaeche); border-radius: var(--r-m); box-shadow: var(--heben-1);
  transition: transform .18s var(--kurve), box-shadow .18s var(--kurve);
}
.squad-karte:hover { transform: translateY(-3px); box-shadow: var(--heben-2); }
.squad-karte .kopf { display: flex; gap: .8rem; align-items: center; }
.squad-karte .logo { width: 44px; height: 44px; object-fit: contain; }
.squad-karte .kopf strong { display: block; font-size: 1.15rem; }
.squad-karte .kopf small { display: block; color: var(--text-leise); font-size: .78rem; }
.squad-karte .roster { display: flex; flex-wrap: wrap; gap: .35rem; }
.squad-karte .wer { padding: .12rem .5rem; border-radius: 999px; background: var(--flaeche-2);
                    font-size: .76rem; color: var(--text-leise); }
.squad-karte .wer.mehr { background: none; }
.squad-karte .stand { display: grid; gap: .15rem; font-size: .82rem; color: var(--text-leise); }
.squad-karte .naechstes { color: var(--marke-text); font-weight: 600; }
.squad-karte .mehr-link { font-size: .82rem; font-weight: 600; color: var(--marke-text); }

.leer-kachel { max-width: 640px; margin: 0 auto; padding: var(--s-6); text-align: center;
               background: var(--flaeche); border-radius: var(--r-m); box-shadow: var(--heben-1); }
.leer-kachel h2 { font-family: var(--font-display); text-transform: uppercase; margin: 0 0 .8rem; }
.leer-kachel p { color: var(--text-leise); margin: 0 0 var(--s-5); }

.spiel-erfolge, .spiel-news { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.spiel-erfolge li { display: flex; gap: var(--s-4); align-items: baseline; padding: .7rem .9rem;
                    background: var(--flaeche); border-radius: var(--r-s); }
.spiel-erfolge .platz { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
                        color: var(--marke-text); font-weight: 700; font-size: .85rem; }
.spiel-erfolge .was { flex: 1 1 auto; }
.spiel-erfolge .was small, .spiel-erfolge .wer small { display: block; color: var(--text-leise); font-size: .78rem; }
.spiel-erfolge .wer { flex: 0 0 auto; text-align: right; font-size: .85rem; color: var(--text-leise); }

/* ── Die Squad-Seite selbst ─────────────────────────────────────────── */
.pn-squad { max-width: 1100px; margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-7); }
.pn-squad .kopf { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-5); }
.pn-squad .kopf .logo { width: 90px; height: 90px; object-fit: contain; }
.pn-squad .spiel { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .12em; color: var(--marke-text); }
.pn-squad .kopf h1 { margin: .2rem 0; font-size: clamp(2rem, 5vw, 3rem); }
.pn-squad .slogan { margin: 0; color: var(--text-leise); }

/* Das Hinweisband auf die Ligaseite. Es verlinkt, es gleicht nicht ab —
   deshalb steht da „Tabelle und Spielplan", nicht „mehr zum Team".
   ⚠ Seit dem 30.10.2026 tragen auch die beiden Spielerseiten dasselbe Band
   (Verein → Liga und zurück). Eine zweite Fassung der vier Zeilen waere eine
   zu viel. */
:is(.pn-squad, .cf-spieler, .pn-spielerseite) .band {
  padding: .8rem var(--s-4); margin-bottom: var(--s-6); border-radius: var(--r-s);
  background: var(--marke-weich); border-left: 4px solid var(--marke);
}

.pn-squad .gruppe { margin-bottom: var(--s-7); }
.pn-squad .gruppe h2 { margin: 0 0 var(--s-5); font-size: 1.4rem; }
.pn-squad .gruppe .kicker { margin: 0; color: var(--marke-text); font-size: .72rem; font-weight: 700;
                            letter-spacing: .12em; text-transform: uppercase; }
.pn-squad .leer { color: var(--text-leise); }

/* Ligen: je Liga ein Block, mehrere gleichzeitig sind der Normalfall. */
.pn-squad .liga { margin-bottom: var(--s-4); background: var(--flaeche); border-radius: var(--r-m);
                  box-shadow: var(--heben-1); overflow: hidden; }
.pn-squad .liga > summary { display: flex; gap: .9rem; align-items: center; padding: var(--s-4) var(--s-5);
                            cursor: pointer; list-style: none; }
.pn-squad .liga > summary::-webkit-details-marker { display: none; }
.pn-squad .liga-logo { width: 32px; height: 32px; object-fit: contain; }
.pn-squad .liga .name { flex: 1 1 auto; font-weight: 600; }
.pn-squad .liga .name small { display: block; font-weight: 400; font-size: .78rem; color: var(--text-leise); }
.pn-squad .liga .anzahl { font-size: .8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.pn-squad .zurliga { margin: 0 var(--s-5) var(--s-4); }
.pn-squad .liga .leer { margin: 0 var(--s-5) var(--s-5); }

.pn-squad .matches { list-style: none; margin: 0; padding: 0 var(--s-5) var(--s-5); display: grid; gap: .4rem; }
.pn-squad .matches li {
  display: grid; grid-template-columns: 6.5rem 1fr auto auto; gap: var(--s-4); align-items: center;
  padding: .6rem .8rem; border-radius: var(--r-s); background: var(--flaeche-2);
  border-left: 3px solid var(--linie-stark);
}
/* Sieg und Niederlage tragen Farbe UND Position — Farbe allein ist keine
   Aussage, wenn jemand sie nicht unterscheiden kann. Das Ergebnis steht
   deshalb immer als Zahl dabei. */
.pn-squad .matches li.sieg       { border-left-color: #047857; }
.pn-squad .matches li.niederlage { border-left-color: var(--marke); }
.pn-squad .matches li.remis      { border-left-color: #b45309; }
.pn-squad .matches .wann { font-size: .82rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.pn-squad .matches .wann small { display: block; font-size: .72rem; }
.pn-squad .matches .gegen { display: flex; gap: .5rem; align-items: center; min-width: 0; font-weight: 600; }
.pn-squad .matches .gegen img { width: 22px; height: 22px; object-fit: contain; }
.pn-squad .matches .gegen small { font-weight: 400; color: var(--text-leise); font-size: .76rem; }
.pn-squad .matches .ergebnis { font-family: var(--font-display); font-size: 1.15rem;
                               font-variant-numeric: tabular-nums; }
.pn-squad .matches .dazu { display: flex; gap: .6rem; font-size: .78rem; }

/* Erfolge als Zeitstrahl: ein Verlauf erzaehlt, wo ein Squad herkommt. */
.pn-squad .zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 var(--s-5); position: relative; }
.pn-squad .zeitstrahl::before { content: ''; position: absolute; left: .32rem; top: .5rem; bottom: .5rem;
                                width: 2px; background: var(--linie-stark); }
.pn-squad .zeitstrahl li { position: relative; padding: 0 0 1.3rem var(--s-5); }
.pn-squad .zeitstrahl .punkt { position: absolute; left: -1.4rem; top: .35rem;
  width: .8rem; height: .8rem; border-radius: 999px; background: var(--marke);
  box-shadow: 0 0 0 3px var(--bg); }
.pn-squad .zeitstrahl .jahr { display: block; font-size: .76rem; color: var(--text-leise);
                              font-variant-numeric: tabular-nums; }
.pn-squad .zeitstrahl .was { display: grid; gap: .1rem; }
.pn-squad .zeitstrahl .platz { display: inline-flex; align-items: center; gap: .3rem;
                               color: var(--marke-text); font-weight: 700; font-size: .82rem; }
.pn-squad .zeitstrahl .wo, .pn-squad .zeitstrahl .preis { font-size: .85rem; color: var(--text-leise); }

.pn-squad .ueber p { max-width: 65ch; }
.pn-squad .ueber dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem var(--s-5); margin: var(--s-4) 0 0; }
.pn-squad .ueber dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); }
.pn-squad .ueber dd { margin: 0; }
.pn-squad .news { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pn-squad .news time { margin-left: .5rem; font-size: .8rem; color: var(--text-leise); }
.pn-squad .werben { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--linie);
                    color: var(--text-leise); font-size: .9rem; }

/* Der Platzhalter, wenn eine Spielerkarte kein Bild hat. Stand vorher als
   Inline-Style in game.php. */
.player-card .ohne-bild { position: absolute; inset: 0; display: grid; place-items: center; background: var(--dark-2); }
.player-card .ohne-bild span { font-family: var(--font-display); font-size: 3rem; color: rgba(255,255,255,.14); }
.player-card .captain { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem;
                        text-transform: uppercase; letter-spacing: .08em; color: var(--marke-text); }

@media (max-width: 620px) {
  .pn-squad .matches li { grid-template-columns: 1fr auto; gap: .3rem .8rem; }
  .pn-squad .matches .wann { grid-column: 1 / -1; }
  .pn-squad .matches .dazu { grid-column: 1 / -1; }
}

/* Zahlen auf der Disziplin-Kachel (Kap. 03.4.1): Vorher sah jede Kachel gleich
   aus — man erfuhr erst nach dem Klick, ob dort etwas los ist. */
.squad-zahlen { position: absolute; left: 1rem; bottom: 3.2rem; z-index: 2;
                display: flex; gap: .5rem; flex-wrap: wrap; }
.squad-zahlen span { padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
                     background: rgba(10, 10, 12, .62); color: #fff; backdrop-filter: blur(3px); }

/* ═══ Startseite  (REWORK-DOKU/03, Abschnitt 1 — neu komponiert 07.09.2026) ═

   Die Seite beginnt nicht mehr mit dem Vereinsnamen, sondern mit dem, was
   gerade läuft. Der Kopf trägt deshalb zwei Dinge nebeneinander: links die
   Aussage, die immer gilt, rechts die Tafel, die sich stündlich ändert.
   ═════════════════════════════════════════════════════════════════════════ */

.start-kopf {
  position: relative; display: grid; align-items: center;
  min-height: min(78vh, 720px); padding: var(--s-9) 0 var(--s-8);
  overflow: hidden; background: var(--dunkel);
}
.start-kopf .grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Der Verlauf sichert den Kontrast unabhängig vom Bild — wer das Bild
   tauscht, muss den Text nicht prüfen. Von links, weil dort der Text steht. */
.start-kopf .verlauf {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.72) 42%, rgba(10,10,12,.35) 100%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.15) 40%, rgba(10,10,12,.75) 100%);
}
.start-kopf .innen {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 22rem);
  gap: var(--s-8); align-items: center;
  width: 100%; max-width: var(--seitenbreite); margin-inline: auto; padding-inline: var(--s-5);
}
.start-kopf .aussage { display: grid; gap: var(--s-4); justify-items: start; color: var(--text-invers); }
.start-kopf .oe-kicker { color: var(--marke-hell); }
.start-kopf h1 {
  font-size: var(--t-riesig); line-height: .88; letter-spacing: -.01em; color: var(--n-00);
}
.start-kopf .satz { max-width: 46ch; color: var(--text-invers-leise);
                    font-size: var(--t-gross); line-height: var(--zeile-mit); }
.start-kopf .oe-knopf.rand { border-color: var(--linie-licht); color: var(--n-00); }
.start-kopf .oe-knopf.rand:hover { border-color: var(--n-00); }

/* ── Die Tafel ───────────────────────────────────────────────────────
   Vier Zustände, und keiner davon ist leer: läuft · als Nächstes ·
   nächster Termin · nur der Weg zur Liga. Eine Tafel, die manchmal
   verschwindet, lässt den Kopf bei jedem zweiten Besuch anders aussehen. */
.start-kopf .tafel {
  display: grid; gap: var(--s-4); padding: var(--s-5);
  /* ⚠ Vorher ein WEISSER Schleier (rgba(255,255,255,.07)) — eine Idee aus
     der hellen Seite. Auf dunklem Grund hebt er den Untergrund an und
     drueckt den Textkontrast auf 4,1:1. Ein dunkler Schleier tut das
     Gegenteil: Er senkt den Untergrund und macht die Tafel vom Bild
     unabhaengig, egal welches Foto dahinter liegt. */
  background: rgba(17, 15, 23, .62); border: 1px solid var(--linie-licht);
  border-radius: var(--r-m); backdrop-filter: blur(10px); color: var(--n-00);
}
.start-kopf .tafel .etikett {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--n-30);
}
.start-kopf .paarung {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-3); align-items: center; text-decoration: none; color: inherit;
}
.start-kopf .paarung .seite { display: grid; gap: var(--s-2); justify-items: center;
                              text-align: center; min-width: 0; font-weight: 600;
                              font-size: var(--t-klein); }
.start-kopf .paarung .seite span { overflow-wrap: anywhere; }
.start-kopf .paarung .vs { font-family: var(--font-display); font-size: var(--t-h3);
                           color: var(--n-40); }
.start-kopf .paarung:hover .seite { color: var(--marke-hell); }
.start-kopf .tafel .titel { font-family: var(--font-display); font-size: var(--t-h3);
                            text-transform: uppercase; line-height: var(--zeile-eng); }
.start-kopf .tafel .wann { color: var(--text-invers-leise); font-size: var(--t-klein);
                           font-variant-numeric: tabular-nums; }
.start-kopf .tafel .rest { display: block; color: var(--marke-hell); font-family: var(--font-mono);
                           font-size: var(--t-mikro); letter-spacing: .06em; }
.start-kopf .tafel .oe-weiter { color: var(--n-00); }

@media (max-width: 980px) {
  .start-kopf { min-height: 0; padding: var(--s-8) 0 var(--s-7); }
  .start-kopf .innen { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .start-kopf .tafel { max-width: 26rem; }
}

/* ── Zwei Felder nebeneinander ────────────────────────────────────────
   „Als Nächstes" und „Zuletzt gespielt" gehören zusammengelesen; unter
   840 px stehen sie untereinander, weil zwei Matchzeilen nebeneinander auf
   einem Handy zu je vier Zeichen werden. */
.start-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
              gap: var(--s-7); }
.feldkopf { margin-bottom: var(--s-3); font-family: var(--font-mono); font-size: var(--t-mikro);
            font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
            color: var(--text-still); }
.start-zwei .mehr { margin-top: var(--s-3); }

/* Matchzeilen: Zeit links in Mono, Paarung rechts. Das `vs` ist leiser als
   die Namen — es ist Bindewort, nicht Inhalt. */
.start-matches > a { grid-template-columns: 7.5rem minmax(0, 1fr); }
.start-matches em { font-style: normal; color: var(--text-still); font-weight: 400; }
.start-termine > a { grid-template-columns: 11rem minmax(0, 1fr) auto; }
/* Die Terminart als farbiger Punkt — Farbe UND Wort, nie Farbe allein. */
.start-termine .nach { display: inline-flex; align-items: center; gap: var(--s-2); }
.start-termine .nach::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-full);
                               background: var(--art, var(--text-still)); }

@media (max-width: 560px) {
  .start-matches > a, .start-termine > a { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .start-termine .nach { justify-self: start; }
}

/* ── Bento ──────────────────────────────────────────────────────────────
   6 Spalten Desktop, 4 Tablet, 2 Mobil. Kacheln belegen FLÄCHEN, kein
   festes „big/small" mehr — dadurch geht das Raster auf, statt Lücken zu
   lassen, wenn eine Kachel dazukommt. */
.bento-raster { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4);
                grid-auto-rows: 150px; grid-auto-flow: dense; }
.bento-raster .kachel { grid-column: span 2; grid-row: span 1; }
.bento-raster .flaeche-2-1 { grid-column: span 4; grid-row: span 1; }
.bento-raster .flaeche-1-2 { grid-column: span 2; grid-row: span 2; }
.bento-raster .flaeche-2-2 { grid-column: span 4; grid-row: span 2; }

.kachel {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  padding: var(--s-5); border-radius: var(--r-m); color: #fff; text-decoration: none;
  background: var(--dunkel-2); box-shadow: var(--heben-1);
  transition: transform var(--dauer-normal) var(--kurve), box-shadow var(--dauer-normal) var(--kurve);
}
a.kachel:hover { transform: translateY(-3px); box-shadow: var(--heben-2); }
.kachel .grund { position: absolute; inset: 0; background-size: cover; background-position: center;
                 transition: transform .35s var(--kurve); }
a.kachel:hover .grund { transform: scale(1.04); }
/* Die Deckung ist je Kachel einstellbar: Ein helles Foto braucht mehr, ein
   dunkles fast keine. Fest verdrahtet wäre die eine Hälfte unlesbar und die
   andere zugekleistert. */
.kachel .schleier { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0) 20%, rgba(10,10,12,calc(var(--staerke, .55) + .25)) 100%); }
.kachel .text { position: relative; display: grid; gap: var(--s-1); }
.kachel .titel { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.05;
                 text-transform: uppercase; }
.flaeche-2-2 .titel, .flaeche-1-2 .titel { font-size: var(--t-h2); }
.kachel .sub { font-size: var(--t-klein); color: rgba(255,255,255,.82); }
.kachel .countdown { font-family: var(--font-mono); font-size: var(--t-gross);
                     font-variant-numeric: tabular-nums; }
.kachel .oe-knopf { justify-self: start; margin-top: var(--s-2); }

/* ── News: einer gross, zwei klein ──────────────────────────────────────
   Die Gewichtung IST die Aussage — drei gleich grosse Karten sagen nichts
   darüber, was gerade wichtig ist. */
.news-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.news-raster .beitrag.gross { grid-row: span 2; }
.news-raster .beitrag a { display: grid; gap: var(--s-3); text-decoration: none; color: inherit;
                          background: var(--flaeche); border: 1px solid var(--linie);
                          border-radius: var(--r-m); overflow: hidden; height: 100%;
                          transition: border-color var(--dauer-normal) var(--kurve); }
.news-raster .beitrag a:hover { border-color: var(--marke-linie); }
.news-raster .beitrag img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.news-raster .beitrag.gross img { aspect-ratio: 16/10; }
.news-raster .beitrag .text { display: grid; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4);
                              align-content: start; }
.news-raster .kat { justify-self: start; padding: 1px var(--s-3); border-radius: var(--r-full);
                    background: var(--chip, var(--marke)); color: #fff;
                    font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 700;
                    text-transform: uppercase; letter-spacing: .06em; }
.news-raster .titel { font-size: var(--t-gross); font-weight: 600; line-height: var(--zeile-mit); }
.news-raster .beitrag.gross .titel { font-family: var(--font-display); font-size: var(--t-h2);
                                     text-transform: uppercase; line-height: var(--zeile-eng); }
.news-raster .anriss { color: var(--text-leise); font-size: var(--t-klein);
                       line-height: var(--zeile-mit); }
.news-raster time { font-size: var(--t-mikro); color: var(--text-still);
                    font-variant-numeric: tabular-nums; }
/* ⚠ Ein einzelner Beitrag. Im Zweispalter stand er als halbe Spalte da und
   sah aus wie ein Fehler — mit einer leeren Hälfte daneben und der halben
   Höhe, die `grid-row: span 2` ihm zugedacht hatte. Ist er der einzige,
   nimmt er die ganze Breite und legt sich quer: Bild links, Text rechts. */
.news-raster .beitrag:only-child { grid-column: 1 / -1; grid-row: auto; }
.news-raster .beitrag:only-child a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                                     align-items: center; gap: 0; }
.news-raster .beitrag:only-child img { height: 100%; aspect-ratio: 16/10; }
.news-raster .beitrag:only-child .text { padding: var(--s-6); gap: var(--s-3); }

@media (max-width: 700px) {
  .news-raster .beitrag:only-child a { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .news-raster .beitrag:only-child .text { padding: 0 var(--s-4) var(--s-4); }
}

/* ── Content: gespiegelte Karten, keine Embeds ─────────────────────────── */
.content-raster { display: grid; gap: var(--s-4);
                  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.content-karte { position: relative; display: grid; gap: var(--s-2); padding-bottom: var(--s-3);
                 background: var(--flaeche); border: 1px solid var(--linie);
                 border-radius: var(--r-m); overflow: hidden;
                 text-decoration: none; color: inherit;
                 transition: border-color var(--dauer-normal) var(--kurve); }
.content-karte:hover { border-color: var(--marke-linie); }
.content-karte img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.content-karte .plattform { position: absolute; top: var(--s-3); left: var(--s-3);
  padding: 1px var(--s-2); border-radius: var(--r-full); background: rgba(10,10,12,.68); color: #fff;
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.content-karte .text { padding: 0 var(--s-4); font-size: var(--t-klein); color: var(--text-leise);
                       line-height: var(--zeile-mit); }
.content-karte time { padding: 0 var(--s-4); font-size: var(--t-mikro); color: var(--text-still); }

/* ── Die LAN-Karte ────────────────────────────────────────────────────
   Gedeckelt: Über 900 px werden aus den Punkten Flecken, und Europa
   braucht keine 1400 px, um erkennbar zu sein. */
.pn-start .map-wrap { max-width: 900px; }

/* Die Kanäle als Reihe neben dem Bandkopf. */
.start-kanaele { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.start-kanaele a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--linie-stark); border-radius: var(--r-full);
  color: var(--text); text-decoration: none;
  transition: background var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve),
              color var(--dauer-schnell) var(--kurve);
}
.start-kanaele a:hover { background: var(--marke); border-color: var(--marke); color: #fff; }
.start-kanaele svg { width: 18px; height: 18px; }

/* ── Partnerleiste, ganz am Ende ───────────────────────────────────── */
.partner-leiste { display: flex; flex-wrap: wrap; gap: var(--s-7); align-items: center; }
.partner-leiste .partner-logo img { max-height: 46px; width: auto;
  filter: grayscale(1) brightness(1.8); opacity: .75;
  transition: filter var(--dauer-normal) var(--kurve), opacity var(--dauer-normal) var(--kurve); }
.partner-leiste .partner-logo:hover img { filter: none; opacity: 1; }

@media (max-width: 900px) {
  .bento-raster { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .bento-raster { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .bento-raster .flaeche-2-1, .bento-raster .flaeche-2-2 { grid-column: span 2; }
  .news-raster { grid-template-columns: 1fr; }
  .news-raster .beitrag.gross { grid-row: auto; }
}

/* ── Cookie-Banner ───────────────────────────────────────────────────
   Er ist dunkel; der Umrissknopf braucht dort eine helle Kante, sonst ist
   „Nur notwendige" ein unsichtbarer Rahmen auf schwarzem Grund. */
.consent-banner .oe-knopf.rand { border-color: var(--linie-licht); color: var(--n-00); }
.consent-banner .oe-knopf.rand:hover { border-color: var(--n-00); color: var(--n-00); }

/* ── Abstimmung  `/vote/<token>` ──────────────────────────────────────
   Zwei Werte standen als `style=""` im Markup: die Pflichtmarkierung und
   die Ergebniszahl. Farbe ist ein Token, keine Inline-Angabe. */
.pn-inhalt .pflicht, .vote .pflicht { color: var(--marke-text); }
.vote-zahl { font-family: var(--font-display); font-size: var(--t-h3); color: var(--marke-text); }

/* ── Casterprofil ────────────────────────────────────────────────────── */
.caster-profil .caster-klarname { color: var(--text-leise); }
.caster-profil .caster-bio { max-width: var(--lesebreite); line-height: var(--zeile-weit); }
.caster-profil .caster-fakten { display: flex; flex-wrap: wrap; gap: var(--s-4);
                                padding: var(--s-4) 0; border-block: 1px solid var(--linie);
                                font-size: var(--t-klein); color: var(--text-leise); }
.caster-profil .caster-fakten a { color: var(--marke-text); }
.caster-profil .caster-liste { display: grid; gap: var(--s-2); }

/* ── Rechtstexte  `/impressum` `/datenschutz` `/agb` ─────────────────
   Reine Lesestrecken. Sie brauchen genau zwei Dinge: eine Lesebreite und
   eine ruhige Hierarchie. Vorher standen Überschriftgrössen und Farben als
   `style=""` im Markup. */
.pn-recht .legal { max-width: var(--lesebreite); }
.pn-recht .legal h2 { margin: var(--s-7) 0 var(--s-3); font-size: var(--t-h3); }
.pn-recht .legal h3 { margin: var(--s-5) 0 var(--s-2);
                      font-family: var(--font-body); font-weight: 700; font-size: var(--t-gross);
                      text-transform: none; letter-spacing: 0; }
.pn-recht .legal p, .pn-recht .legal li { margin-bottom: var(--s-3);
                                          color: var(--text-leise); line-height: var(--zeile-weit); }
.pn-recht .legal ul, .pn-recht .legal ol { margin-bottom: var(--s-4); padding-left: var(--s-5); }
.pn-recht .legal a { color: var(--marke-text); }
/* ⚠ Rechtstexte enthalten lange, unzerlegbare Zeichenketten: Adressen von
   Auftragsverarbeitern, Paragraphenketten, E-Mail-Adressen. Sie sprengen
   auf einem 390-px-Schirm die Spalte, ohne dass ein Kasten zu breit wäre —
   die Messung nach Elementbreiten findet nichts, die Seite scrollt
   trotzdem quer. Deshalb hier ausdrücklich Umbruch an jeder Stelle. */
.pn-recht .legal { overflow-wrap: anywhere; }

/* ── Community: Discord, Markt, Abstimmung ───────────────────────────── */
.gemeinschaft .gem-karte {
  display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6);
  border: 1px solid var(--linie); border-radius: var(--r-l);
  background: var(--flaeche); color: inherit; text-decoration: none;
  transition: border-color var(--dauer-normal) var(--kurve), transform var(--dauer-normal) var(--kurve);
}
.gemeinschaft .gem-karte:hover { border-color: var(--marke-linie); transform: translateY(-2px); }
.gemeinschaft .gem-karte.dunkel { background: var(--dunkel); border-color: transparent; }
.gemeinschaft .gem-karte.papier { background: var(--papier); }
.gemeinschaft .gem-karte h3 { font-family: var(--font-display); font-size: var(--t-h2);
                              text-transform: uppercase; line-height: var(--zeile-eng); }
.gemeinschaft .gem-karte p { color: var(--text-leise); font-size: var(--t-klein);
                             line-height: var(--zeile-mit); }
.gemeinschaft .gem-karte .oe-weiter { margin-top: auto; color: var(--marke-text); }
.gemeinschaft .gem-karte.dunkel h3 { color: var(--n-00); }
.gemeinschaft .gem-karte.dunkel p { color: var(--text-invers-leise); }
.gemeinschaft .gem-karte.dunkel .oe-weiter { color: var(--marke-hell); }

/* ── Termine mit Mini-Monat ──────────────────────────────────────────
   ⚠ Der Monat steht NEBEN der Liste, nicht darüber: Er beantwortet „wann
     ist etwas los", die Liste „was genau". Untereinander liest man
     zweimal dasselbe. Unter 900 px fällt er weg — 42 Kästchen auf
     Handybreite sind unlesbar. */
.termine-zwei { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--s-7); }
.mini-monat { align-self: start; padding: var(--s-5); border-radius: var(--r-m); background: var(--papier); }
.oe-band.papier .mini-monat { background: var(--flaeche); }
.mini-monat .kopf { margin-bottom: var(--s-4); font-family: var(--font-mono);
                    font-size: var(--t-mikro); font-weight: 700; letter-spacing: .12em;
                    text-transform: uppercase; }
.mini-monat .raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
                      text-align: center; font-variant-numeric: tabular-nums; }
.mini-monat .raster > span { position: relative; padding: 5px 0;
                             font-family: var(--font-mono); font-size: var(--t-klein); }
.mini-monat .wt { font-size: var(--t-mikro); color: var(--text-still); }
.mini-monat .heute { border-radius: var(--r-s); background: var(--marke); color: #fff; font-weight: 700; }
.mini-monat i { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
                width: 4px; height: 4px; border-radius: var(--r-full); background: var(--art); }
.mini-monat .heute i { background: #fff; }

@media (max-width: 900px) {
  .termine-zwei { grid-template-columns: minmax(0, 1fr); }
  .mini-monat { display: none; }
}

/* Der Bildkopf ohne Bild — heller Kopf, gleiche Masse. */
.oe-hero.ohne-bild { background: var(--papier); color: var(--text); min-height: 0;
                     padding: var(--s-8) 0 var(--s-7); }
.oe-hero.ohne-bild h1 { color: var(--text); }
.oe-hero.ohne-bild p { color: var(--text-leise); }
.oe-hero.ohne-bild .oe-kicker { color: var(--marke-text); }
.oe-hero.ohne-bild .oe-knopf.rand { border-color: var(--linie-stark); color: var(--text); }

/* Die Bühne ohne Tafel: die Aussage nimmt dann die ganze Breite. */
.start-kopf.ohne-tafel .innen { grid-template-columns: minmax(0, 1fr); }

/* Laufende Matches im Liga-Abschnitt der Startseite. */
.liga-live { display: grid; gap: var(--s-3); }
.liga-live .liga-liste { display: grid; gap: var(--s-2); }

/* ═══ Caster, 404 und Shop  ══════════════════════════════════════════════ */

/* ⚠ Die Casterkarten waren für einen dunklen Grund gebaut
   (`rgba(255,255,255,.04)` als Fläche). Auf der hellen Seite waren sie
   ein weisses Rechteck auf Weiss. */
.caster-grid { display: grid; gap: var(--s-4);
               grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.caster-karte {
  display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m);
  color: inherit; text-decoration: none;
  transition: border-color var(--dauer-normal) var(--kurve), transform var(--dauer-normal) var(--kurve);
}
.caster-karte:hover { border-color: var(--marke-linie); transform: translateY(-2px); }
.caster-karte .name { font-family: var(--font-display); font-size: var(--t-h3);
                      text-transform: uppercase; line-height: var(--zeile-eng); }
.caster-karte .bio { color: var(--text-leise); font-size: var(--t-klein);
                     line-height: var(--zeile-mit); }
.caster-karte .fuss { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2);
                      font-family: var(--font-mono); font-size: var(--t-mikro);
                      letter-spacing: .06em; text-transform: uppercase; color: var(--text-still); }

/* Die 404 trägt ihre Zahl als Bild — es ist das Einzige, was sie zu sagen
   hat, bevor die drei Wege kommen. */
.pn-404 .zahl { font-family: var(--font-display); font-size: var(--t-riesig);
                line-height: .8; color: var(--marke-text); margin: 0; }
.pn-404 .oe-band { min-height: 60vh; align-content: center; display: grid; }



/* ═══ Kontakt und Shop  (REWORK-DOKU/03, Abschnitte 7 und 8) ════════════ */
.pn-kontakt .formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                        gap: var(--s-4); max-width: 46rem; }
.pn-kontakt .formular > button { grid-column: 1 / -1; justify-self: start; }
.pn-kontakt .feld { display: grid; gap: .3rem; }
.pn-kontakt .feld.voll { grid-column: 1 / -1; }
.pn-kontakt .feld > span { font-size: .74rem; font-weight: 600; text-transform: uppercase;
                           letter-spacing: .08em; color: var(--text-leise); }
.pn-kontakt .feld small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pn-kontakt input[type=text], .pn-kontakt input[type=email],
.pn-kontakt select, .pn-kontakt textarea {
  width: 100%; padding: .6rem .75rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--linie-stark); border-radius: var(--r-s);
  background: var(--flaeche); color: var(--text);
}
.pn-kontakt textarea { resize: vertical; }
.pn-kontakt .feld.falsch input, .pn-kontakt .feld.falsch textarea { border-color: var(--marke); }
.pn-kontakt .feld em { font-style: normal; font-size: .8rem; color: var(--marke-text); }
.pn-kontakt .haken { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
.pn-kontakt .haken span { font-size: .88rem; color: var(--text-leise); text-transform: none;
                          letter-spacing: 0; font-weight: 400; }
.pn-kontakt .haken em { grid-column: 1 / -1; }
.pn-kontakt .honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pn-kontakt .ok { padding: var(--s-4) var(--s-5); border-radius: var(--r-s);
                  background: var(--flaeche); border-left: 4px solid #047857; }
.pn-kontakt .fehler-oben { padding: .8rem var(--s-4); border-radius: var(--r-s);
                           background: rgba(228,23,59,.1); color: var(--marke-text); }
.pn-kontakt .daneben { display: grid; gap: var(--s-6); margin-top: var(--s-7); padding-top: var(--s-6);
                       border-top: 1px solid var(--linie);
                       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pn-kontakt .daneben h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.pn-kontakt .daneben p, .pn-kontakt .daneben li { color: var(--text-leise); font-size: .92rem; }
.pn-kontakt .daneben ul { margin: 0 0 .6rem; padding-left: var(--s-4); }
.pn-kontakt .daneben .klein { font-size: .82rem; }

/* Die Zwischenseite zum Partner-Shop: bewusst schlicht — sie ist ein Hinweis,
   keine Landingpage. */
.pn-shop { display: grid; place-items: center; min-height: 70vh; padding: 7rem var(--s-5) var(--s-7); }
.pn-shop .kasten { max-width: 560px; text-align: center; padding: var(--s-7) var(--s-6);
                   background: var(--flaeche); border-radius: var(--r-l); box-shadow: var(--heben-2); }
.pn-shop h1 { margin: 0 0 .8rem; font-size: clamp(1.8rem, 4.5vw, 2.4rem); }
.pn-shop p { color: var(--text-leise); }
.pn-shop .knoepfe { display: flex; justify-content: center; margin: var(--s-6) 0 var(--s-4); }
.pn-shop .oe-knopf .pn-ic { margin-left: .3em; }
.pn-shop .hinweis { font-size: .84rem; }
.pn-shop code { padding: .1rem .35rem; border-radius: 4px; background: var(--flaeche-2); font-size: .9em; }
.pn-shop .mehr { margin-top: var(--s-5); }
.pn-shop .mehr.klein { font-size: .84rem; }

@media (max-width: 620px) { .pn-kontakt .formular { grid-template-columns: 1fr; } }


/* ═══ VEREIN  `/verein` ════════════════════════════════════════════════ */

.verein-werte .oe-karte h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }

/* ── Beitragsstufen ──────────────────────────────────────────────────
   Drei gleich hohe Spalten, damit der Knopf überall auf derselben Linie
   sitzt: `align-content: start` plus `margin-top: auto` am Knopf. Vorher
   rutschte er bei der Stufe mit dem längeren Satz eine Zeile tiefer —
   und genau das liest sich wie ein anderer Knopf.

   ⚠ Die hervorgehobene Stufe bekommt Kante UND Band, nicht nur Farbe.
     Ein roter Rahmen allein ist für jemanden, der Rot nicht sieht, gar
     kein Hinweis. */
.verein-stufen { display: grid; gap: var(--s-5);
                 grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* ⚠ Flex, nicht Grid. Mit `display: grid; align-content: start` packt der
   Kasten seine Zeilen oben zusammen — es bleibt kein freier Raum übrig,
   den `margin-top: auto` am Knopf verteilen könnte. Der Knopf der
   längsten Stufe stand daraufhin 19 px tiefer als die beiden anderen.
   In einer Spalte aus Flex funktioniert der automatische Aussenabstand. */
.verein-stufen .stufe {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6) var(--s-5); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r-l);
}
.verein-stufen .stufe.beliebt { border-color: var(--marke); box-shadow: var(--heben-2); }
.verein-stufen .band {
  position: absolute; top: 0; left: var(--s-5); transform: translateY(-50%);
  padding: 3px var(--s-3); border-radius: var(--r-full);
  background: var(--marke); color: #fff;
  font-family: var(--font-mono); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.verein-stufen h3 { font-size: var(--t-h2); }
.verein-stufen .satz { color: var(--text-leise); font-size: var(--t-klein);
                       line-height: var(--zeile-mit); min-height: 3.4em; }
.verein-stufen .preis { display: flex; align-items: baseline; gap: var(--s-2);
                        padding-bottom: var(--s-3); border-bottom: 1px solid var(--linie); }
.verein-stufen .preis .zahl { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.verein-stufen .preis .einheit { color: var(--text-still); font-size: var(--t-klein); }
.verein-stufen ul { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none;
                    font-size: var(--t-klein); }
.verein-stufen li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2);
                    align-items: start; }
.verein-stufen li .pn-ic { width: 1.05em; height: 1.05em; margin-top: .18em; color: var(--marke-text); }
.verein-stufen .oe-knopf { margin-top: auto; justify-content: center; }

.verein-hinweis { margin-top: var(--s-5); text-align: center;
                  color: var(--text-leise); font-size: var(--t-klein); }
.verein-hinweis a { color: var(--marke-text); }

/* Die Gründungsgalerie stammt aus dem Bestand und bringt ihren eigenen
   Aussenabstand mit — im neuen Abschnitt sitzt sie sonst zu tief. */
.verein-seite .founders { margin-top: var(--s-6); }

/* ── Alle Spieler der Pain-Squads  `/teams/spieler`  (Kap. 06.3) ────────
   Nach Disziplin und Squad gruppiert, weil genau so jemand sucht. */
.pn-spielerliste { max-width: var(--seitenbreite-eng); margin-inline: auto;
                   padding: var(--s-6) var(--s-5) var(--abschnitt); }
.pn-spielerliste .gruppe { margin-bottom: var(--s-7); }
.pn-spielerliste .gruppe h2 { margin: 0 0 var(--s-4); font-size: 1.4rem; }
.pn-spielerliste .gruppe h3 {
  margin: var(--s-5) 0 var(--s-3); font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise);
}
.pn-spielerliste .namen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2);
                          grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pn-spielerliste .namen a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-m);
  background: var(--flaeche); color: inherit; text-decoration: none;
}
.pn-spielerliste .namen a:hover { background: var(--flaeche-2); }
.pn-spielerliste .namen img,
.pn-spielerliste .namen .ohne-bild {
  width: 44px; height: 44px; border-radius: var(--r-full); object-fit: cover; flex: none;
}
.pn-spielerliste .namen .ohne-bild { display: grid; place-items: center;
                                     background: var(--flaeche-3); color: var(--text-still);
                                     font-family: var(--font-display); }
.pn-spielerliste .namen .wer { display: grid; min-width: 0; }
.pn-spielerliste .namen small { color: var(--text-still); font-size: var(--t-winzig);
                                letter-spacing: .08em; text-transform: uppercase; }
.pn-spielerliste .leer { color: var(--text-leise); }

}