/* ============================================================
   VT WIMPASSING — Homepage
   ============================================================
   Diese Datei bestimmt das Aussehen der Seite (Layout, Abstaende).
   Die Farben und Schriften selbst stehen in vtw-tokens.css —
   das ist das gemeinsame Design des Vereins, das auch das
   Turnierprogramm verwendet. Wenn eine Farbe geaendert werden
   soll, dann dort, nicht hier.

   Aufbau dieser Datei:
     1. Grundlagen        5. Der Verein / Karten
     2. Bausteine         6. Fotos und Vorstand
     3. Kopfzeile         7. Termine, Turnier, Rueckblick
     4. Hero              8. Kontakt, Sponsoren, Fusszeile
                          9. Handy-Anpassungen
   ============================================================ */


/* ============================================================
   1. GRUNDLAGEN
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gold-deep); }

h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; margin: 0; }

/* Ueberschriften kleiner machen, wenn der Bildschirm schmal ist.
   clamp() heisst: mindestens, gerne, hoechstens. */
.h1 { font-size: clamp(38px, 11vw, 72px); }
.h2 { font-size: clamp(26px, 6vw, 40px); }

/* Sprunglink fuer Tastatur- und Screenreader-Nutzung */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--gold); color: #1A1206;
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--r-md) 0;
  font-weight: 700; z-index: 200;
}
.skip-link:focus { left: 0; top: 0; }

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

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }


/* ============================================================
   2. BAUSTEINE (werden ueberall wiederverwendet)
   ============================================================ */

.breite { max-width: 1140px; margin: 0 auto; padding: 0 var(--sp-5); }

.abschnitt { padding: var(--sp-8) 0; }
.abschnitt-hell   { background: var(--mist); }
.abschnitt-dunkel { background: var(--black); color: var(--fg-on-dark); }
.abschnitt-dunkel .h2 { color: var(--gold); }
.abschnitt-dunkel .eyebrow { color: var(--gold); }

/* Goldener Strich unter jeder Ueberschrift — das Erkennungszeichen
   des Vereinsdesigns, so wie im Turnierprogramm. */
.abschnitt .h2 {
  padding-bottom: var(--sp-3);
  border-bottom: 3px solid var(--gold);
  display: inline-block;
  margin-bottom: var(--sp-5);
}

.einleitung {
  max-width: 62ch;
  font-size: var(--text-md);
  color: var(--gray-700);
  margin: 0 0 var(--sp-6);
}
.einleitung-hell { color: var(--fg-on-dark-muted); }

/* ---- Knoepfe ----
   Die Schriftfarbe wird hier BEWUSST direkt gesetzt (und nicht ueber
   eine verschachtelte Variable) plus -webkit-text-fill-color.
   Grund: In Safari am iPhone wird die Schrift sonst unsichtbar. */
.knopf {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(0); }

.knopf-gold {
  background: #F6B319;
  color: #1A1206;
  -webkit-text-fill-color: #1A1206;
  box-shadow: var(--shadow-gold);
}
.knopf-gold:hover { background: #FFC42E; }

.knopf-hell {
  background: transparent;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  border-color: rgba(255,255,255,0.55);
}
.knopf-hell:hover { background: rgba(255,255,255,0.12); }

.knopf-klein { padding: 10px 20px; font-size: var(--text-sm); }
.knopf-breit { width: 100%; text-align: center; border: none; }


/* ============================================================
   3. KOPFZEILE
   ============================================================ */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--black);
  box-shadow: var(--shadow-md);
}
.kopf-innen {
  max-width: 1140px; margin: 0 auto;
  padding: 10px var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
}

.marke { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.marke img { width: 46px; height: auto; }
.marke-text {
  font-family: var(--font-display);
  font-weight: 800; font-size: 19px;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--gold); line-height: 1.1;
}
.marke-text small {
  display: block;
  font-family: var(--font-body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--fg-on-dark-muted);
  text-transform: uppercase;
}

.menue { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.menue a {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-on-dark);
  text-decoration: none;
  padding: 10px 12px; border-radius: var(--r-sm);
}
.menue a:hover { color: var(--gold); background: rgba(255,255,255,0.06); }
.menue .menue-cta {
  background: #F6B319;
  color: #1A1206;
  -webkit-text-fill-color: #1A1206;
  font-weight: 800;
  border-radius: var(--r-pill);
  padding: 10px 20px; margin-left: var(--sp-2);
}
.menue .menue-cta:hover { background: #FFC42E; color: #1A1206; }

/* Der Menue-Knopf ist nur am Handy sichtbar (siehe Abschnitt 9) */
.menue-knopf {
  display: none;
  margin-left: auto;
  width: 46px; height: 40px;
  background: transparent; border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--r-sm); cursor: pointer;
  position: relative;
}
.menue-strich,
.menue-strich::before,
.menue-strich::after {
  position: absolute; left: 50%; width: 20px; height: 2px;
  background: var(--gold); transform: translateX(-50%);
  transition: transform .2s ease, opacity .2s ease;
}
.menue-strich { top: 50%; margin-top: -1px; }
.menue-strich::before { content: ""; top: -7px; }
.menue-strich::after  { content: ""; top:  7px; }
.menue-knopf[aria-expanded="true"] .menue-strich { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-strich::before { transform: translateX(-50%) translateY(7px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-strich::after  { transform: translateX(-50%) translateY(-7px) rotate(-45deg); }


/* ============================================================
   4. HERO
   ============================================================ */

.hero { position: relative; background: var(--black); }
.hero-bild { position: absolute; inset: 0; overflow: hidden; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }

.hero-inhalt {
  position: relative;
  max-width: 1140px; margin: 0 auto;
  padding: var(--sp-9) var(--sp-5);
  color: var(--fg-on-dark);
}
.hero-inhalt .h1 { color: var(--white); margin: var(--sp-2) 0 var(--sp-4); }
.hero-inhalt .eyebrow { color: var(--gold); }
.hero-zeile {
  font-size: var(--text-lg);
  color: var(--fg-on-dark);
  max-width: 34ch; margin: 0 0 var(--sp-6);
}
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


/* ============================================================
   5. DER VEREIN / KARTEN
   ============================================================ */

.karten-zwei {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
}
.karte {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 5px solid var(--gold);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.karte-symbol { font-size: 30px; display: block; margin-bottom: var(--sp-2); }
.karte h3 { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.karte p { margin: 0 0 var(--sp-3); }
.karte-detail {
  background: var(--gold-wash);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  margin-bottom: 0 !important;
}

/* ---- Werbekasten (Trainingsangebot) ---- */
.werbekasten {
  margin-top: var(--sp-6);
  background: var(--charcoal);
  color: var(--fg-on-dark);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  position: relative;
}
.werbe-label {
  position: absolute; top: 10px; right: 14px;
  margin: 0;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-on-dark-muted);
}
.werbekasten h3 { color: var(--gold); font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.werbekasten p { margin: 0 0 var(--sp-3); max-width: 68ch; }
.werbe-detail { font-size: var(--text-sm); color: var(--fg-on-dark-muted); }


/* ============================================================
   6. FOTOS UND VORSTAND
   ============================================================ */

.galerie {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.galerie figure { margin: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.vorstand-liste {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
}
.person { text-align: center; }
.person img,
.person-platzhalter {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.person-platzhalter {
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-200); color: var(--gray-400);
  font-family: var(--font-display); font-size: 46px; font-weight: 900;
}
.person h3 { font-size: var(--text-base); margin-bottom: 2px; }
.person-rolle {
  margin: 0; font-size: var(--text-sm);
  color: var(--gold-deep); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.person-offen h3 { color: var(--gray-400); }


/* ============================================================
   7. TERMINE, TURNIER, RUECKBLICK
   ============================================================ */

.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.termin {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--charcoal);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.termin-tag {
  flex: 0 0 auto;
  width: 62px; text-align: center;
  background: var(--gold); color: #1A1206;
  border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 900; font-size: 26px;
  line-height: 1; padding: 10px 0;
}
.termin-tag small {
  display: block; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; margin-top: 3px;
}
.termin-text { font-size: var(--text-base); }
.termin-text strong {
  display: block;
  font-family: var(--font-display); font-size: var(--text-md);
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 3px;
}
.termine-leer {
  background: var(--charcoal); border-radius: var(--r-md);
  padding: var(--sp-5); color: var(--fg-on-dark-muted);
}

.turnier-raster { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); align-items: start; }
.turnier-text p { margin: 0 0 var(--sp-4); max-width: 60ch; }
.turnier-hinweis { font-size: var(--text-sm); color: var(--gray-500); margin-top: var(--sp-4) !important; }

.turnier-ergebnis {
  background: var(--black); color: var(--fg-on-dark);
  border-radius: var(--r-lg); padding: var(--sp-5);
  border-top: 6px solid var(--gold);
}
.turnier-ergebnis h3 { color: var(--gold); font-size: var(--text-lg); margin-bottom: var(--sp-4); }
.podest { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); }
.podest li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  text-transform: uppercase;
}
.platz {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 900; font-size: var(--text-base);
}
.platz-1 { background: var(--gold);    color: #1A1206; }
.platz-2 { background: var(--gray-300); color: #1A1206; }
.platz-3 { background: #C8873C;         color: #1A1206; }
.ergebnis-fuss { margin: 0; font-size: var(--text-sm); color: var(--fg-on-dark-muted); }

.rueckblick-liste { display: grid; gap: var(--sp-5); }
.rueckblick-eintrag {
  background: var(--white);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Nur das Foto direkt im Eintrag — NICHT das Flyerbild, das steckt
   in einem a-Element und braucht sein eigenes Hochformat. */
.rueckblick-eintrag > img { width: 100%; height: 100%; object-fit: cover; }
.rueckblick-datum {
  margin: 0 0 4px; font-size: var(--text-sm); font-weight: 600;
  color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.1em;
}
.rueckblick-eintrag h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.rueckblick-eintrag p { margin: 0; }


/* ============================================================
   8. KONTAKT, SPONSOREN, FUSSZEILE
   ============================================================ */

.kontakt-raster { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-6); align-items: start; }

.formular { display: grid; gap: var(--sp-4); }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 600; font-size: var(--text-sm); }
.feld input, .feld textarea {
  font-family: var(--font-body); font-size: var(--text-base);
  padding: 12px 14px;
  border: 1px solid var(--gray-400);
  border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
  width: 100%;
}
.feld input:focus, .feld textarea:focus { border-color: var(--gold); box-shadow: var(--ring-gold); outline: none; }
.feld-meldung { margin: 0; font-size: var(--text-sm); color: #FFB4A8; }
.feld-fehler input, .feld-fehler textarea { border-color: var(--akzent-rot); }

.haken { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--text-sm); }
.haken input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--gold); }
.haken a { color: var(--gold); }

.formular-hinweis { margin: 0; font-size: var(--text-sm); color: var(--fg-on-dark-muted); }
.formular-meldung {
  margin: 0; padding: var(--sp-4);
  background: var(--charcoal); border-left: 4px solid var(--gold);
  border-radius: var(--r-sm); font-size: var(--text-sm);
}

.kontakt-daten h3 { color: var(--gold); font-size: var(--text-lg); margin-bottom: var(--sp-4); }
.kontakt-social-titel { margin-top: var(--sp-6); }
.kontakt-zeile { display: flex; gap: var(--sp-3); margin: 0 0 var(--sp-4); align-items: flex-start; }
.kontakt-symbol { flex: 0 0 auto; }
.kontakt-daten a { color: var(--gold); }

.social { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.social-knopf {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
  padding: 10px 20px; border-radius: var(--r-pill);
  border: 2px solid var(--gold);
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}
.social-knopf:hover { background: var(--gold); color: #1A1206; -webkit-text-fill-color: #1A1206; }

.sponsoren { background: var(--ink); padding: var(--sp-6) 0; border-top: 3px solid var(--gold); }
/* flex-start statt center: so stehen die beiden Beschriftungen
   ("Gesponsert von" / "Website und Turnierprogramm von") auf
   gleicher Hoehe, obwohl der linke Block ein Logo hat. */
.sponsoren-innen { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: flex-start; justify-content: center; }
.sponsor-block { text-align: center; }
.sponsor-label {
  margin: 0 0 var(--sp-2);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-on-dark-muted);
}
/* Beide Logos exakt gleich hoch, damit die zwei Bloecke gleich
   gross wirken. Der Kasten darunter hat eine feste Mindesthoehe,
   sonst haengen die Namen auf verschiedenen Hoehen. */
.sponsor-block { text-align: center; min-width: 210px; }
.sponsor-logo-feld {
  height: 76px;
  display: flex; align-items: center; justify-content: center;
}
.sponsor-block img { height: 76px; width: auto; margin: 0 auto; }
/* robschman.at in seiner eigenen Markenfarbe.
   #4ADE80 ist das --green-500 aus dem robschman Design System
   (robschman programming/desing/robschman Design System/tokens/brand.css)
   — nicht geraten, sondern die dort festgelegte Akzentfarbe. */
/* (.sponsor-name wurde ersetzt: robschman.at hat jetzt ein Logo
   und wird wie der andere Sponsor mit .sponsor-adresse gesetzt.) */

.fuss { background: var(--black); color: var(--fg-on-dark-muted); padding: var(--sp-6) 0; font-size: var(--text-sm); }
.fuss-innen { display: grid; gap: var(--sp-4); text-align: center; justify-items: center; }
.fuss-verein { margin: 0; color: var(--fg-on-dark); }
.fuss-verein strong { font-family: var(--font-display); text-transform: uppercase; color: var(--gold); }
.fuss-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.fuss-links a { color: var(--fg-on-dark); text-decoration: none; }
.fuss-links a:hover { color: var(--gold); text-decoration: underline; }
.fuss-credit { margin: 0; }
.fuss-credit a { color: var(--gold); }


/* ============================================================
   9. HANDY-ANPASSUNGEN
   ============================================================
   Ab hier gilt: je schmaler der Bildschirm, desto einspaltiger.
   Robert prueft die Seite am iPhone — diese Regeln sind wichtig. */

@media (max-width: 900px) {

  /* Menue klappt hinter den Knopf */
  .menue-knopf { display: block; }
  .menue {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    background: var(--black);
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--charcoal);
    box-shadow: var(--shadow-lg);
  }
  .menue.offen { display: flex; }
  .menue a { padding: 14px 8px; font-size: var(--text-base); }
  .menue .menue-cta { margin: var(--sp-3) 0 0; text-align: center; }

  .karten-zwei,
  .turnier-raster,
  .kontakt-raster { grid-template-columns: 1fr; }

  .galerie { grid-template-columns: repeat(2, 1fr); }
  .vorstand-liste { grid-template-columns: repeat(2, 1fr); }

  .rueckblick-eintrag { grid-template-columns: 1fr; }
  .rueckblick-eintrag > div { padding: 0 var(--sp-5) var(--sp-5); }
}

@media (max-width: 560px) {

  .abschnitt { padding: var(--sp-7) 0; }
  .hero-inhalt { padding: var(--sp-8) var(--sp-5); }

  .marke-text { font-size: 16px; }
  .marke img { width: 40px; }

  .galerie { grid-template-columns: 1fr; }
  .vorstand-liste { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

  /* Knoepfe untereinander und volle Breite — mit dem Daumen besser zu treffen */
  .hero-knoepfe { flex-direction: column; align-items: stretch; }
  .hero-knoepfe .knopf { text-align: center; }

  .termin { flex-direction: row; gap: var(--sp-3); }
  .termin-tag { width: 54px; font-size: 22px; }

  .sponsoren-innen { gap: var(--sp-5); flex-direction: column; }
}

/* Wer in den Systemeinstellungen weniger Bewegung eingestellt hat,
   bekommt keine Animationen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf:hover { transform: none; }
  * { transition: none !important; }
}


/* ============================================================
   10. RECHTSSEITEN (Impressum und Datenschutz)
   ============================================================ */

.rechts-seite { padding: var(--sp-8) 0 var(--sp-9); }
.rechts-seite .breite { max-width: 820px; }
.rechts-seite h1 { font-size: clamp(28px, 7vw, 44px); margin-bottom: var(--sp-5); }
.rechts-seite h2 {
  font-size: var(--text-lg);
  margin: var(--sp-7) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 3px solid var(--gold);
}
.rechts-seite h3 { font-size: var(--text-base); margin: var(--sp-5) 0 var(--sp-2); }
.rechts-seite p, .rechts-seite li { max-width: 70ch; }
.rechts-seite ul { padding-left: var(--sp-5); }
.rechts-seite li { margin-bottom: var(--sp-2); }

/* Gelber Kasten fuer alles, was noch fehlt.
   Solange davon noch einer sichtbar ist, darf die Seite nicht online. */
.fehlt {
  display: inline-block;
  background: #FDF1D8;
  border: 1px solid #E0A82E;
  border-radius: var(--r-sm);
  padding: 2px 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  color: #7A5200;
}
.warnkasten {
  background: #FDF1D8;
  border: 1px solid #E0A82E;
  border-left: 5px solid #E0A82E;
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
}
.warnkasten p { margin: 0 0 var(--sp-2); }
.warnkasten p:last-child { margin-bottom: 0; }
.warnkasten strong { color: #7A5200; }

/* Der Abschnitt mit Name und Anschrift ganz am Ende der Seite */
.anschrift {
  background: var(--mist);
  border-radius: var(--r-md);
  border-left: 5px solid var(--gold);
  padding: var(--sp-5);
  margin-top: var(--sp-6);
}
.anschrift h2 { margin-top: 0; }

.zurueck {
  display: inline-block;
  margin-bottom: var(--sp-5);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold-deep); text-decoration: none;
}
.zurueck:hover { text-decoration: underline; }


/* ============================================================
   11. NACHTRAEGE (19.08.2026)
   ============================================================ */

/* Haelt Wortgruppen zusammen: die Zeile bricht dann nur an der
   Stelle um, wo wirklich ein Beistrich steht — nie mittendrin. */
.zusammen { white-space: nowrap; display: inline-block; }

/* Die Hero-Zeile darf breit genug sein, dass beide Haelften
   nebeneinander Platz haben; am Handy rutscht die zweite von
   selbst unter die erste. */
.hero-zeile { max-width: 52ch; }

/* Anbieter-Zeile im Werbekasten */
/* Anbieter-Zeile im Werbekasten: Markenname in Weiss, die
   Kettlebell gleich daneben — beides zusammen ein Link auf
   schrittfuerschrittfit.at. Schriftfarbe direkt gesetzt plus
   -webkit-text-fill-color wegen Safari am iPhone. */
.werbe-anbieter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: #A7A49C;
  -webkit-text-fill-color: #A7A49C;
}
.werbe-anbieter strong {
  font-weight: 800;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.werbe-anbieter img {
  height: 38px; width: auto; flex: 0 0 auto;
  transition: transform .15s ease;
}
.werbe-anbieter:hover strong { color: #F6B319; -webkit-text-fill-color: #F6B319; }
.werbe-anbieter:hover img { transform: scale(1.08); }

/* Aufklappbare Liste mit allen Platzierungen */
.alle-plaetze { margin: 0 0 var(--sp-4); }
.alle-plaetze summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  padding: var(--sp-2) 0;
}
.alle-plaetze summary:hover { color: var(--gold); }
.platzliste {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--fg-on-dark);
}
.platzliste li { margin-bottom: 5px; }
.platzliste li::marker { color: var(--gold-deep); font-weight: 700; }

/* Sponsorlogo mit Adresse darunter */
.sponsor-link { text-decoration: none; display: block; }
/* Weiss, damit es zur weissen Kettlebell darueber passt. */
.sponsor-adresse {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.sponsor-link:hover .sponsor-adresse { color: #E4E4E1; -webkit-text-fill-color: #E4E4E1; }

/* ============================================================
   12. TURNIERBAUM  —  wie die Publikums-Anzeige am Beamer
   ============================================================
   Aufbau und Farben sind aus public/css/display.css uebernommen
   (dort .d-bracket / .d-tree / .d-bm), nur die Groessen sind fuer
   den Bildschirm verkleinert: am Beamer ist ein Kaestchen 400 px
   breit, hier 240 px.

   Die goldenen Klammern zwischen den Runden entstehen allein per
   CSS ueber ::after (der Buegel vom oberen zum unteren Spiel) und
   ::before (der kurze Anschlussstrich). Im HTML steht dafuer nichts. */

.baum-block {
  margin-top: var(--sp-7);
  background: var(--black);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  overflow-x: auto;
}
.baum-titel {
  color: var(--gold);
  font-size: var(--text-lg);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-2);
  border-bottom: 3px solid var(--gold);
  display: inline-block;
}

.d-bracket {
  --box: 240px; --boxbig: 300px; --gap: 70px;
  display: flex; flex-direction: column; align-items: flex-start;
  width: calc(var(--box) + var(--boxbig) * 2 + var(--gap) * 2);
  color: var(--fg-on-dark);
}

/* Siegerfeld ueber dem Baum */
.d-winner {
  align-self: stretch;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  background: var(--gold); color: #1A1206;
  -webkit-text-fill-color: #1A1206;
  border-radius: var(--r-md);
  padding: 8px 22px; margin-bottom: var(--sp-5);
}
.d-winner .wl {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em; font-size: 13px;
}
.d-winner .wn {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; font-size: 26px; line-height: 1;
}

.d-tree { display: flex; align-items: stretch; align-self: stretch; min-height: 0; }
.d-tree-round {
  display: flex; flex-direction: column; flex: 0 0 auto;
  width: calc(var(--box) + var(--gap)); padding-right: var(--gap);
}
.d-tree-round:last-child { padding-right: 0; width: var(--boxbig); }
.d-tree-match { flex: 1; display: flex; align-items: center; position: relative; padding: 5px 0; }
.d-tree-match > .d-bm { width: 100%; }

/* Der Buegel: laeuft von der Mitte des oberen Spiels zur Mitte des unteren */
.d-tree-round:not(:last-child) .d-tree-match:nth-child(odd)::after {
  content: ''; position: absolute; left: 100%; top: 50%;
  width: calc(var(--gap) / 2); height: 100%;
  border: 3px solid var(--gold); border-left: 0;
  border-radius: 0 14px 14px 0; box-sizing: border-box;
}
/* Der kurze Anschlussstrich in das Kaestchen der naechsten Runde */
.d-tree-round:not(:first-child) .d-tree-match::before {
  content: ''; position: absolute; top: 50%; left: calc(var(--gap) / -2);
  width: calc(var(--gap) / 2); height: 3px;
  background: var(--gold); border-radius: 2px;
}

/* Ein Spiel-Kaestchen */
.d-bm {
  background: var(--charcoal);
  border: 2px solid var(--gold);
  border-radius: 10px; overflow: hidden;
  font-size: 14px;
}
.d-bm-h {
  background: var(--gold); color: #1A1206;
  -webkit-text-fill-color: #1A1206;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
  padding: 4px 10px; display: flex; align-items: baseline; gap: 8px;
}
.d-bm-h .hl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-bm-h .ht { flex: 0 0 auto; color: #7A0D0D; -webkit-text-fill-color: #7A0D0D; font-family: var(--font-mono); font-weight: 900; }

.d-bm .r { display: flex; justify-content: space-between; gap: 10px; padding: 4px 10px; }
.d-bm .r .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.d-bm .r.w { color: var(--gold-bright); font-weight: 800; }
.d-bm .sc { font-family: var(--font-mono); font-weight: 800; flex: 0 0 auto; }

/* Best of 3: die Saetze als Spalten neben den Namen */
.d-bm.bo .r {
  display: grid;
  grid-template-columns: 1fr repeat(var(--sets, 3), 30px) 40px;
  align-items: center; gap: 0 6px;
}
.d-bm.bo .r .nm { overflow-wrap: normal; word-break: keep-all; }
.d-bm.bo .r .st { text-align: center; font-family: var(--font-mono); font-weight: 700; color: var(--fg-on-dark-muted); }
.d-bm.bo .r .st.w { color: var(--gold-bright); font-weight: 800; }
.d-bm.bo .r .sc { text-align: center; border-left: 1px solid var(--slate); padding-left: 6px; }
.d-bm.bo .r.hd {
  padding-top: 5px; padding-bottom: 1px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-on-dark-muted);
}
.d-bm.bo .r.hd .st, .d-bm.bo .r.hd .sc { font-weight: 800; color: #c2c7cf; border-left-color: transparent; }

/* Platzierungsspiele darunter */
.d-brk-sub {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 800;
  color: var(--gold); font-size: 15px; letter-spacing: .08em;
  margin: var(--sp-6) 0 var(--sp-4);
}
.d-plc-grid { display: grid; grid-template-columns: repeat(3, var(--box)); gap: 12px; align-self: flex-start; }
/* Das Best-of-3-Kaestchen braucht mehr Breite, sonst rutscht der
   Teamname neben den Satz-Spalten in die zweite Zeile. Am Beamer
   ist es aus demselben Grund breiter (--boxbig statt --box). */
.d-plc-grid .d-bm.bo { grid-column: span 2; }

/* ---- Am Handy: Runden untereinander, ohne Klammern ----
   Ein Baum mit Buegeln braucht Breite. Auf einem schmalen
   Bildschirm werden die Runden deshalb gestapelt und die
   Verbindungslinien ausgeblendet — sonst zeigen sie ins Leere. */
@media (max-width: 900px) {
  .baum-block { padding: var(--sp-5) var(--sp-4); }
  .d-bracket { --box: 100%; --boxbig: 100%; --gap: 0px; width: 100%; }
  .d-tree { flex-direction: column; gap: var(--sp-4); }
  .d-tree-round { width: 100%; padding-right: 0; gap: var(--sp-3); }
  .d-tree-round:last-child { width: 100%; }
  .d-tree-match::before,
  .d-tree-match::after { display: none !important; }
  /* align-self zuruecksetzen, sonst sind die Platzierungs-Kaestchen
     schmaler als die Kaestchen des Baums darueber. Und die
     Doppelspalte des Best-of-3-Kaestchens gilt hier nicht mehr,
     weil es nur noch eine Spalte gibt. */
  .d-plc-grid { grid-template-columns: 1fr; align-self: stretch; }
  .d-plc-grid .d-bm.bo { grid-column: span 1; }
  .d-bracket { align-items: stretch; }
  .d-winner { flex-direction: column; gap: 4px; text-align: center; }
  .d-winner .wn { font-size: 22px; }
}

/* ============================================================
   13. VORSTAND MIT INITIALEN
   ============================================================
   Solange es kein Foto gibt, stehen die Initialen in einem
   goldgerahmten Feld. Wer ein Foto liefert, bekommt an dieser
   Stelle ein <img> — beide sind gleich gross, das Raster
   verrutscht dadurch nicht. */

.person-initialen {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--black);
  border: 2px solid var(--gold);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5vw, 40px);
  letter-spacing: 0.02em;
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
  box-shadow: var(--shadow-sm);
}

/* Acht Personen sehen in vier Spalten am ruhigsten aus. */
.vorstand-liste { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .vorstand-liste { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .vorstand-liste { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   14. WERBEKASTEN — ausgebaute Fassung
   ============================================================
   Deutlicher hervorgehoben als vorher: goldene Kante links,
   Ueberschrift in Gold, die drei Schwerpunkte als Liste mit
   goldenen Schlagworten. Bleibt trotzdem als Werbung markiert. */

.werbekasten {
  border-left: 5px solid var(--gold);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
}
.werbekasten h3 {
  color: var(--gold);
  font-size: var(--text-xl);
  margin-bottom: var(--sp-4);
}
.werbe-lead {
  font-size: var(--text-md);
  max-width: 68ch;
  margin: 0 0 var(--sp-5) !important;
}
.werbe-lead strong { color: var(--white); }

.werbe-liste {
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.werbe-liste li {
  background: rgba(246, 179, 25, 0.07);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--fg-on-dark-muted);
  line-height: 1.5;
}
.werbe-liste strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800; font-size: var(--text-base);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
  margin-bottom: 5px;
}

.werbe-fuss {
  display: flex; align-items: center; gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--slate);
}
.werbe-fuss p {
  margin: 0 !important;
  font-size: var(--text-sm);
  color: var(--fg-on-dark-muted);
  max-width: 46ch;
}
.werbe-fuss strong { color: var(--fg-on-dark); }

@media (max-width: 900px) {
  .werbekasten { padding: var(--sp-5) var(--sp-4); }
  .werbe-liste { grid-template-columns: 1fr; gap: var(--sp-3); }
  .werbe-fuss { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .werbe-fuss .knopf { text-align: center; }
}

/* Knopf mit goldenem Rahmen — fuer dunkle Kaesten.
   (War beim Umbau des Turnierbaum-Abschnitts verloren gegangen und
   ist deshalb hier neu angelegt, direkt beim Werbekasten, der ihn
   als einziger verwendet.)
   Schriftfarbe direkt gesetzt plus -webkit-text-fill-color, sonst
   ist der Text in Safari am iPhone unsichtbar. */
.knopf-rand {
  background: transparent;
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
  border-color: #F6B319;
}
.knopf-rand:hover {
  background: #F6B319;
  color: #1A1206;
  -webkit-text-fill-color: #1A1206;
}

/* robschman.at in seiner Markenfarbe (--green-500 aus dem robschman
   Design System), schrittfuerschrittfit.at bleibt weiss passend zur
   weissen Kettlebell. (Ging beim Umbau des Turnierbaum-Abschnitts
   verloren und ist hier neu angelegt.) */
.sponsor-adresse-gruen {
  color: #4ADE80 !important;
  -webkit-text-fill-color: #4ADE80 !important;
}
.sponsor-link:hover .sponsor-adresse-gruen {
  color: #22C55E !important;
  -webkit-text-fill-color: #22C55E !important;
}

/* .werbekasten-inhalt ist bewusst nur ein Behaelter ohne eigene
   Gestaltung — er buendelt den Textteil des Werbekastens. */

/* Kleiner Platzhalter-Hinweis innerhalb eines dunklen Kastens —
   deutlich sichtbar, aber ohne den Textfluss zu sprengen. */
.fehlt-klein {
  display: inline-block;
  background: rgba(224, 168, 46, 0.16);
  border: 1px solid rgba(224, 168, 46, 0.5);
  border-radius: var(--r-xs);
  padding: 1px 8px;
  font-size: 12px;
  color: #E0A82E;
  -webkit-text-fill-color: #E0A82E;
}

/* ============================================================
   15. NACHTRAEGE (19.08.2026, Abend)
   ============================================================ */

/* ---- Keine einzelnen Woerter am Zeilenende ----
   text-wrap: pretty sorgt dafuer, dass in der letzten Zeile eines
   Absatzes nie ein Wort allein steht — der Browser zieht dann lieber
   ein Wort mehr mit hinunter. Aeltere Browser ignorieren es einfach.
   balance verteilt Ueberschriften gleichmaessig auf ihre Zeilen. */
p, li, figcaption, .einleitung, .werbe-lead, .karte p, .rueckblick-eintrag p {
  text-wrap: pretty;
}
h1, h2, h3, .h1, .h2, .baum-titel, .werbekasten h3, .d-winner .wn {
  text-wrap: balance;
}

/* ---- robschman-Links in der Markenfarbe ----
   (Diese Regeln waren beim Umbau des Turnierbaum-Abschnitts verloren
   gegangen — deshalb stand robschman.at im Turnier-Abschnitt wieder
   in Gold statt in Gruen.)
   Auf hellem Grund das dunklere #15803D, sonst waere der kleine Text
   zu blass; auf dunklem Grund das helle #4ADE80. */
.turnier-hinweis a {
  color: #15803D;
  -webkit-text-fill-color: #15803D;
  font-weight: 600;
}
.turnier-hinweis a:hover { color: #16A34A; -webkit-text-fill-color: #16A34A; }

.fuss-credit a {
  color: #4ADE80;
  -webkit-text-fill-color: #4ADE80;
}
.fuss-credit a:hover { color: #22C55E; -webkit-text-fill-color: #22C55E; }

/* ---- Facebook und Instagram: Logo ueber dem Knopf ---- */
.social { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.social-block {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-decoration: none;
}
.social-logo {
  width: 34px; height: 34px;
  color: #FFFFFF;
  transition: transform .15s ease, color .15s ease;
}
.social-block:hover .social-logo { color: #F6B319; transform: translateY(-2px); }
.social-block .social-knopf { display: inline-block; }
.social-block:hover .social-knopf {
  background: #F6B319;
  color: #1A1206;
  -webkit-text-fill-color: #1A1206;
}

/* "Fuer Vereinsmitglieder kostenlos" — das staerkste Argument im
   Werbekasten, deshalb als goldenes Schildchen abgesetzt. */
.werbe-gratis {
  display: inline-block;
  background: var(--gold);
  color: #1A1206;
  -webkit-text-fill-color: #1A1206;
  border-radius: var(--r-pill);
  padding: 3px 14px;
  margin-left: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Vorstand kompakter (19.08.2026) ----
   Die Initialen-Felder fuellten vorher die ganze Spaltenbreite und
   wirkten dadurch zu wuchtig. Jetzt ein ruhiger Kreis in fester
   Groesse ueber dem Namen. Fotos bekommen denselben Kreis, damit
   beides nebeneinander gleich aussieht. */
.person-initialen,
.person img {
  width: 84px; height: 84px;
  aspect-ratio: auto;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  font-size: 26px;
}
.person img { object-fit: cover; border: 2px solid var(--gold); }
.person h3 { font-size: var(--text-sm); }
.person-rolle { font-size: 12px; }

/* Bei acht Personen wirken vier Spalten am ruhigsten; am Handy zwei. */
@media (max-width: 560px) {
  .person-initialen, .person img { width: 68px; height: 68px; font-size: 21px; }
}

/* ---- Sommer- und Winter-Karte dunkel (19.08.2026) ----
   Die beiden Karten waren als einzige Flaechen weiss und fielen
   dadurch aus dem Bild. Jetzt dunkel wie der Werbekasten darunter
   und wie die Kaestchen im Turnierbaum — die goldene Linkskante
   bleibt als Erkennungszeichen. */
.karte {
  background: var(--charcoal);
  border: 1px solid var(--slate);
  border-left: 5px solid var(--gold);
  color: var(--fg-on-dark);
  box-shadow: var(--shadow-md);
}
.karte h3 {
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}
.karte p { color: var(--fg-on-dark); }

/* Die Zeile mit Zeit und Ort: dezent abgesetzt statt hellgold */
.karte-detail {
  background: rgba(246, 179, 25, 0.09);
  color: var(--fg-on-dark-muted);
}
.karte-detail strong {
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}

/* ---- Jahres-Marken im Rueckblick (19.08.2026) ----
   Bei sechs Eintraegen wird eine durchlaufende Liste unuebersichtlich.
   Die Jahreszahl trennt die Bloecke, ohne wie eine weitere Ueberschrift
   zu wirken. */
.jahr-marke {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-lg);
  color: var(--gold-deep);
  letter-spacing: 0.14em;
  margin: var(--sp-6) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--gray-300);
}
.jahr-marke:first-of-type { margin-top: 0; }

/* (Das Anmelde-Kaestchen im Turnier-Abschnitt wurde am 19.08.2026
   auf Wunsch entfernt — die Regel dazu ist deshalb weg.) */

/* ============================================================
   16. WERBEKASTEN GELB (19.08.2026)
   ============================================================
   Der Kasten sah bisher aus wie die zwei Karten darueber — alles
   dunkel, kein Unterschied. Jetzt goldene Flaeche mit dunkler
   Schrift: hebt sich klar ab und ist auch ohne das Woertchen
   "Werbung" sofort als etwas anderes erkennbar.
   Alle Farben hier direkt gesetzt (nicht ueber Variablen), damit
   nichts aus dem dunklen Entwurf durchschlaegt. */

.werbekasten {
  background: #F6B319;
  border: none;
  border-left: 6px solid #0D0D0D;
  color: #1A1206;
  -webkit-text-fill-color: #1A1206;
  box-shadow: var(--shadow-lg);
}
.werbekasten h3,
.werbekasten p,
.werbekasten li {
  color: #1A1206;
  -webkit-text-fill-color: #1A1206;
}
.werbe-label { color: #5E4407; -webkit-text-fill-color: #5E4407; }   /* 4.94:1 auf Gold */

.werbe-anbieter { color: #5E4407; -webkit-text-fill-color: #5E4407; }   /* 4.94:1 auf Gold */
.werbe-anbieter strong { color: #0D0D0D; -webkit-text-fill-color: #0D0D0D; }
.werbe-anbieter:hover strong { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }

.werbe-lead strong { color: #0D0D0D; -webkit-text-fill-color: #0D0D0D; }

/* Die drei Schwerpunkte: leicht dunklere Felder auf dem Gold */
.werbe-liste li {
  background: rgba(13, 13, 13, 0.09);
  color: #3A2E10;
  -webkit-text-fill-color: #3A2E10;
}
.werbe-liste strong { color: #0D0D0D; -webkit-text-fill-color: #0D0D0D; }

.werbe-detail { color: #3A2E10; -webkit-text-fill-color: #3A2E10; }
.werbe-detail strong { color: #0D0D0D; -webkit-text-fill-color: #0D0D0D; }

/* "Kostenlos" jetzt umgekehrt: dunkles Schild auf Gold */
.werbe-gratis {
  background: #0D0D0D;
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}

.werbe-fuss { border-top-color: rgba(13, 13, 13, 0.22); }
.werbe-fuss p { color: #3A2E10; -webkit-text-fill-color: #3A2E10; }
.werbe-fuss strong { color: #0D0D0D; -webkit-text-fill-color: #0D0D0D; }

/* Knopf: dunkle Flaeche, damit er auf dem Gold sichtbar bleibt */
.werbekasten .knopf-rand {
  background: #0D0D0D;
  border-color: #0D0D0D;
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}
.werbekasten .knopf-rand:hover {
  background: #232323;
  border-color: #232323;
  color: #FFC42E;
  -webkit-text-fill-color: #FFC42E;
}

/* ============================================================
   17. RUECKBLICK MIT FLYER (19.08.2026)
   ============================================================
   Drei Spalten: links das Foto, in der Mitte der Text, rechts der
   Flyer im Hochformat. Der Flyer ist anklickbar und oeffnet sich
   in voller Groesse. Eintraege ohne Flyer haben nur zwei Spalten —
   das regelt :has() bzw. der Ausweichfall darunter. */

.rueckblick-eintrag {
  display: grid;
  grid-template-columns: 240px 1fr 160px;
  gap: 0;
  align-items: stretch;
  /* Feste Mindesthoehe: sonst richtet sich die Zeile nach dem laengsten
     Text und das Foto wird unnatuerlich hoch gezogen. */
  min-height: 190px;
}
/* Eintrag ohne Flyer: die dritte Spalte entfaellt */
.rueckblick-eintrag:not(:has(.rueckblick-flyer)) {
  grid-template-columns: 240px 1fr;
}

.rueckblick-eintrag > img {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.rueckblick-text { padding: var(--sp-5); }

.rueckblick-flyer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: var(--sp-4);
  background: var(--mist);
  border-left: 1px solid var(--gray-200);
  text-decoration: none;
  transition: background .15s ease;
}
.rueckblick-flyer img {
  width: 100%; height: auto;
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.rueckblick-flyer span {
  font-family: var(--font-display);
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gold-deep);
}
.rueckblick-flyer:hover { background: var(--gold-wash); }
.rueckblick-flyer:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
  .rueckblick-eintrag,
  .rueckblick-eintrag:not(:has(.rueckblick-flyer)) { grid-template-columns: 1fr; }
  .rueckblick-eintrag > img { aspect-ratio: 4 / 3; }
  .rueckblick-text { padding: var(--sp-4) var(--sp-5); }
  .rueckblick-flyer {
    border-left: none; border-top: 1px solid var(--gray-200);
    flex-direction: row; gap: var(--sp-4);
  }
  .rueckblick-flyer img { width: 90px; }
}

/* ---- Termine: Datum links, Flyer rechts ---- */
.termin { align-items: stretch; }
.termin-text { flex: 1; align-self: center; }
.termin-flyer {
  flex: 0 0 auto;
  align-self: center;
  display: block;
  width: 74px;
  border-radius: var(--r-xs);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.termin-flyer img { width: 100%; height: auto; display: block; }
.termin-flyer:hover { transform: scale(1.06); }

@media (max-width: 560px) {
  .termin-flyer { width: 56px; }
}

/* Der Textteil bekommt rundum Luft — die alte Regel gab ihm rechts
   keine, dadurch klebte die Schrift am Flyer. */
.rueckblick-text {
  padding: var(--sp-5);
  align-self: center;
}
.rueckblick-eintrag > img { display: block; }

/* ============================================================
   18. WERBEKASTEN — Kopf dunkel, Flaeche gold (19.08.2026)
   ============================================================
   Robert wollte den Markennamen, die Ueberschrift und die
   Kettlebell in Weiss. Weiss auf Gold ist aber nicht lesbar
   (Kontrast 1,9). Deshalb steht das alles jetzt in einem
   dunklen Kopfbalken — dort ist Weiss klar lesbar und hebt sich
   zugleich vom goldenen Rest ab.
   Die drei Schwerpunkt-Kaestchen sind wieder dunkel. */

.werbekasten { padding: 0; overflow: hidden; }

.werbe-kopf {
  background: #0D0D0D;
  padding: var(--sp-5) var(--sp-6) var(--sp-5);
}
.werbe-kopf .werbe-anbieter {
  margin-bottom: var(--sp-3);
  color: #A7A49C;
  -webkit-text-fill-color: #A7A49C;
}
.werbe-kopf .werbe-anbieter strong {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.werbe-kopf .werbe-anbieter:hover strong {
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}
.werbe-kopf h3 {
  margin: 0;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  font-size: var(--text-xl);
}

.werbekasten-inhalt { padding: var(--sp-6); }
.werbe-label { top: 14px; right: 18px; }

/* Die drei Schwerpunkte wieder dunkel, mit hellem Text */
.werbe-liste li {
  background: #0D0D0D;
  color: #C8C8C6;
  -webkit-text-fill-color: #C8C8C6;
  border-radius: var(--r-sm);
}
.werbe-liste strong {
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}

/* Das Werbung-Label sitzt jetzt auf dem dunklen Kopfbalken und muss
   deshalb hell sein — dunkelbraun war dort praktisch unsichtbar. */
.werbekasten .werbe-label {
  color: #8A867D;
  -webkit-text-fill-color: #8A867D;
}


/* ============================================================
   19. WERBEKASTEN — weisse Flaeche mit goldener Umrandung (19.08.2026)
   ============================================================
   Das viele Gold hat zu stark aufgetragen. Jetzt:
   - Kopfbalken bleibt schwarz (der hat gepasst)
   - der schwarze Rand links faellt weg
   - stattdessen eine goldene Umrandung um den ganzen Kasten
   - die grosse Flaeche darunter wird weiss, das Gold nur noch
     als Rahmen und in den dunklen Kaestchen
   Alle Farben wieder direkt gesetzt, damit nichts aus den
   Abschnitten 16 und 18 durchschlaegt. */

.werbekasten {
  background: #FFFFFF;
  border: 3px solid #F6B319;          /* ersetzt den schwarzen Rand links */
  color: #1F1B14;
  -webkit-text-fill-color: #1F1B14;
}
.werbekasten h3,
.werbekasten p,
.werbekasten li {
  color: #1F1B14;
  -webkit-text-fill-color: #1F1B14;
}

/* Der Kopfbalken bleibt schwarz mit weisser Schrift — unveraendert.
   Die Ueberschrift-Regel oben faerbt sonst auch ihn ein. */
.werbe-kopf h3,
.werbe-kopf p {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.werbe-kopf .werbe-anbieter {
  color: #A7A49C;
  -webkit-text-fill-color: #A7A49C;
}
.werbe-kopf .werbe-anbieter strong {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}

/* Fliesstext auf Weiss */
.werbe-lead strong { color: #0D0D0D; -webkit-text-fill-color: #0D0D0D; }
.werbe-detail { color: #4A4034; -webkit-text-fill-color: #4A4034; }
.werbe-detail strong { color: #0D0D0D; -webkit-text-fill-color: #0D0D0D; }

.werbe-fuss { border-top-color: rgba(13, 13, 13, 0.14); }
.werbe-fuss p { color: #4A4034; -webkit-text-fill-color: #4A4034; }
.werbe-fuss strong { color: #0D0D0D; -webkit-text-fill-color: #0D0D0D; }

/* Am Handy etwas weniger Innenabstand, sonst wird der Kasten sehr lang */
@media (max-width: 900px) {
  .werbe-kopf { padding: var(--sp-5) var(--sp-4); }
  .werbekasten-inhalt { padding: var(--sp-5) var(--sp-4); }
}

/* Wichtig: Die Regel oben (.werbekasten li) faerbt sonst auch den Text
   in den drei dunklen Kaestchen dunkel — dort war er unlesbar.
   Deshalb hier wieder hell setzen. */
.werbe-liste li {
  color: #C8C8C6;
  -webkit-text-fill-color: #C8C8C6;
}
.werbe-liste strong {
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}


/* ============================================================
   20. FRUEHSCHOPPEN — eigener Abschnitt (19.08.2026)
   ============================================================
   Der Fruehschoppen ist genauso ein jaehrlicher Fixpunkt wie das
   Turnier und bekommt deshalb einen gleich grossen eigenen
   Abschnitt: links der Text mit den Eckdaten, rechts der grosse
   Flyer zum Anklicken. */

.schoppen-raster {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--sp-7);
  align-items: start;
  margin-top: var(--sp-6);
}
.schoppen-text p {
  margin: 0 0 var(--sp-4);
  max-width: 58ch;
}

/* Eckdaten als kleine Liste — dieselbe Sprache wie die
   Wann/Wo-Kaesten in den Sommer- und Winter-Karten. */
.schoppen-fakten {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(246, 179, 25, 0.10);
  border-left: 4px solid #F6B319;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--text-sm);
  max-width: 58ch;
}
/* Flex: so rutscht eine umbrechende zweite Zeile nicht unter das
   Schlagwort, sondern bleibt sauber in der rechten Spalte. */
.schoppen-fakten li {
  display: flex; gap: var(--sp-3); align-items: baseline;
  margin: 0 0 6px; line-height: 1.5;
}
.schoppen-fakten li:last-child { margin-bottom: 0; }
.schoppen-fakten span {
  flex: 0 0 auto;
  min-width: 82px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}

/* Der grosse Flyer */
.flyer-gross {
  display: block;
  text-decoration: none;
  background: #141414;
  border: 3px solid #F6B319;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform .15s ease;
}
.flyer-gross img {
  display: block;
  width: 100%;
  height: auto;
}
.flyer-gross span {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}
.flyer-gross:hover { transform: translateY(-2px); }

@media (max-width: 900px) {
  .schoppen-raster { grid-template-columns: 1fr; gap: var(--sp-6); }
  .flyer-gross { max-width: 420px; margin: 0 auto; }
}


/* ============================================================
   21. NACHBESSERUNGEN VOM HANDY (19.08.2026)
   ============================================================ */

/* --- Werbe-Ueberschrift: zwei Zeilen, kein Gedankenstrich ---
   Am Handy stand "Fit für die Halle — unser Vereinstraining"
   quer ueber drei Zeilen. Jetzt steht der Titel in einer Zeile
   und die Erklaerung darunter. */
.werbe-kopf h3 .werbe-unterzeile {
  display: block;
  margin-top: 4px;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #F6B319;
  -webkit-text-fill-color: #F6B319;
}

/* --- Sponsoren am Handy nebeneinander ---
   Vorher standen die beiden Sponsoren untereinander und der
   Abschnitt wurde sehr lang. Jetzt stehen sie nebeneinander,
   dafuer etwas kleiner. */
@media (max-width: 900px) {
  .sponsoren-innen {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--sp-5);
  }
  .sponsor-block {
    min-width: 0;
    flex: 1 1 0;
    max-width: 220px;
  }
  .sponsor-block img { height: 58px; }
  /* Feste Hoehe fuer die Beschriftung: "Gesponsert von" ist einzeilig,
     "Website und Turnierprogramm von" zweizeilig — ohne das stuenden die
     beiden Logos auf verschiedenen Hoehen. */
  .sponsor-label {
    font-size: 10px; letter-spacing: 0.12em;
    line-height: 1.35;
    min-height: 2.7em;
    display: flex; align-items: flex-end; justify-content: center;
  }
  .sponsor-adresse { font-size: var(--text-xs); word-break: break-word; }
}


/* ============================================================
   22. REPARATUR RUECKBLICK AM IPHONE (19.08.2026)
   ============================================================
   Robert hat am Handy gesehen, dass das Foto ueber den Text
   laeuft und man den Text kaum lesen kann.

   Ursache: Das Bild hatte "height: 100%". Am Rechner (Chrome)
   rechnet der Browser das zu "so hoch wie das Seitenverhaeltnis
   vorgibt" — Safari am iPhone rechnet die Prozenthoehe dagegen
   gegen den ganzen Kasten und zieht das Bild ueber den Text.

   Deshalb: am Handy feste Hoehe aus dem Seitenverhaeltnis
   (height: auto), keine Mindesthoehe, und der Textteil bekommt
   zur Sicherheit einen eigenen weissen Hintergrund. */

@media (max-width: 900px) {
  .rueckblick-eintrag {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .rueckblick-eintrag > img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  /* Eigener Hintergrund: selbst wenn ein Bild wieder einmal aus
     der Reihe tanzt, bleibt der Text lesbar. */
  .rueckblick-text {
    position: relative;
    z-index: 1;
    background: var(--white);
  }
}

/* --- "Schritt für Schritt fit" bleibt ein Block ---
   Der Markenname darf nie mitten im Wort umbrechen. */
.marke-block { white-space: nowrap; }

/* --- Platzierungsspiele zum Aufklappen ---
   Am Handy war der Turnierbaum sehr lang. Die Platzierungsspiele
   sind jetzt zugeklappt und oeffnen sich per Fingertipp. Am
   Rechner sind sie von Anfang an offen (siehe script.js). */
.platz-klapp { margin: 0; }
.platz-klapp > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  -webkit-tap-highlight-color: transparent;
}
.platz-klapp > summary::-webkit-details-marker { display: none; }
.platz-klapp > summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid #F6B319;
  border-bottom: 2px solid #F6B319;
  transform: rotate(45deg);
  transition: transform .15s ease;
  margin-bottom: 3px;
}
.platz-klapp[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.platz-klapp > summary:hover { opacity: .85; }


/* ============================================================
   23. HANDY-FEINSCHLIFF (19.08.2026)
   ============================================================ */

@media (max-width: 900px) {

  /* --- "Angeboten von" und der Markenname auf zwei Zeilen ---
     Vorher brach die Zeile mitten im Namen um
     ("... SCHRITT FÜR / SCHRITT FIT"). Jetzt steht "Angeboten von"
     in der ersten Zeile und der Name geschlossen darunter. */
  .werbe-kopf .werbe-anbieter { align-items: flex-start; }
  .werbe-kopf .werbe-anbieter strong {
    display: block;
    white-space: nowrap;
  }

  /* --- Kettlebell etwas tiefer ---
     Sie klebte oben am Wort "Werbung". */
  .werbe-kopf .werbe-anbieter img { margin-top: var(--sp-4); }

  /* --- Facebook und Instagram mittig ---
     Standen ganz links und wirkten dadurch verrutscht. */
  .kontakt-social-titel { text-align: center; }
  .social { justify-content: center; }
}

/* --- Turnierbaum am Handy von hinten nach vorne ---
   Gestapelt stand zuerst viermal Viertelfinale, dann Halbfinale,
   dann Finale. Am Handy liest man aber lieber das Wichtigste
   zuerst: column-reverse dreht die Reihenfolge um, sodass oben
   das Finale steht, darunter die zwei Halbfinale und ganz unten
   die vier Viertelfinale. Die Reihenfolge INNERHALB einer Runde
   bleibt dabei unveraendert. */
@media (max-width: 900px) {
  .d-tree { flex-direction: column-reverse; }
}


/* ============================================================
   24. RUECKBLICK: KEIN UEBERLAUF MEHR (19.08.2026)
   ============================================================
   Beim Eintrag "Jahreshauptversammlung & Weihnachtsfeier" ragte am
   Handy das Foto rechts aus der Karte heraus und wurde abgeschnitten.

   Ursache: Das lange Wort "Jahreshauptversammlung" passt nicht in
   die schmale Handy-Spalte. Eine Rasterspalte mit "1fr" waechst in
   so einem Fall ueber den Kasten hinaus — und alles darin, auch das
   Foto, wird mitgezogen.

   Zwei Massnahmen:
   1. minmax(0, 1fr) — die Spalte darf nicht mehr breiter werden
      als der Kasten.
   2. Lange Woerter duerfen umbrechen bzw. werden getrennt
      (die Seite ist auf Deutsch gestellt, daher trennt der Browser
      an den richtigen Stellen). */

.rueckblick-eintrag > div,
.rueckblick-text { min-width: 0; }
/* hyphens: auto trennt an den richtigen Stellen; im HTML stehen
   beim Wort "Jahreshauptversammlung" zusaetzlich weiche Trennstellen
   (&shy;), damit jeder Browser sauber mit Bindestrich trennt statt
   mitten im Wort abzubrechen. */
.rueckblick-text h3 { hyphens: auto; }

@media (max-width: 900px) {
  .rueckblick-eintrag,
  .rueckblick-eintrag:not(:has(.rueckblick-flyer)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Web Werkstube als dritter Block — Lila wie die Marke.
   (Ergänzt am 30.08.2026: vorher standen Website und Turnierprogramm
   gemeinsam unter robschman.at, seit der Übernahme durch die Web
   Werkstube sind es drei getrennte Nennungen.) */
.sponsor-adresse-lila { color: #A78BFA; }

/* Drei Blöcke statt zwei: etwas schmaler, damit sie am Laptop
   nebeneinander bleiben und nicht in zwei Reihen kippen. */
.sponsoren-innen { gap: var(--sp-6); }
.sponsor-block { min-width: 176px; }

/* Weiter oben steht eine Regel, die die Sponsoren auch unter 900 px
   nebeneinander zwingt (flex-wrap: nowrap). Das ging mit ZWEI Blöcken
   auf — mit dreien laufen sie am Handy aus dem Bild. Deshalb unterhalb
   von 620 px wieder untereinander. */
@media (max-width: 900px) {
  .sponsoren-innen { gap: var(--sp-5); }
}
@media (max-width: 620px) {
  .sponsoren-innen {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: var(--sp-5) !important;
  }
  .sponsor-block { min-width: 0; width: 100%; }
}


/* ---- Web Werkstube: Markenfarbe und kleinere Sponsorenschrift ----
   „schrittfuerschrittfit.at" brach am Handy mitten im Wort um. Die
   Sponsorennamen sind deshalb eine Spur kleiner und brechen nur noch
   an sinnvollen Stellen. */
.sponsor-adresse {
  font-size: 12.5px;
  letter-spacing: -0.005em;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
}
@media (max-width: 620px) {
  .sponsor-adresse { font-size: 13px; }
}

/* Die Web Werkstube tritt überall in ihrem Lila auf. */
.sponsor-adresse-lila,
.ww-marke {
  color: #A78BFA !important;
  -webkit-text-fill-color: #A78BFA !important;
}
.ww-marke:hover, .ww-marke:focus-visible {
  color: #B9A3FC !important;
  -webkit-text-fill-color: #B9A3FC !important;
}