/*
Theme Name:   Iron Scorps
Theme URI:    https://www.ironscorps.at/
Description:  Eigenständiges Theme für den ASKÖ BBC McDonald's Iron Scorps Steyr. Durchgehend dunkle Gestaltung in den Vereinsfarben. Ohne externe Bibliotheken, self-hosted Fonts, DSGVO-konform. Custom Post Types für Spieler, Trainer und Vorstand; Spieltermine serverseitig aus dem Google Kalender.
Author:       Semir Mićivoda
Version:      3.7.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ironscorps
*/

/* ==========================================================================
   0. Tokens — offizielle Vereinsfarben, dunkle Gestaltung
   Aus der Vereinspalette: #ff5a00 #ffc72c #363630 #fe6700 #fe7d00 #ff9300
   #ffaa00 #ffd700 #ffe455 #fff2aa #fe5000 #ffffff
   ========================================================================== */
:root{
  color-scheme: dark;

  /* Flächen — von tief nach angehoben */
  --flaeche:#000000;        /* Kopfbereich, Navigation, Fußbereich */
  --grund:#0a0a0a;          /* Seitenhintergrund */
  --karte:#141414;          /* Karten, Kästen, Eingabefelder */
  --karte-hoch:#1c1c1c;     /* Karten auf Karten, Bildplatzhalter */
  --linie:rgba(255,255,255,.14);
  --linie-stark:rgba(255,255,255,.24);

  /* Schrift */
  --text:#e8e4dc;           /* Fließtext */
  --text-hell:#ffffff;      /* Überschriften */
  --text-dim:#a8a49c;       /* Nebentext, Datumsangaben */

  /* Warme Akzente — auf dunklem Grund in voller Sättigung nutzbar */
  --gold:#ffc72c;
  --gold-hell:#ffe455;
  --gold-blass:#fff2aa;
  --amber:#ff9300;
  --ember:#ff5a00;
  --ember-tief:#fe5000;

  /* Schrift auf goldenen Flächen — Schaltflächen, Fähnchen */
  --auf-gold:#0a0a0a;

  --font-display:'Big Shoulders','Arial Narrow',sans-serif;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'Space Mono','Courier New',monospace;

  /* Zierverlauf für Kanten und Linien */
  --grad:linear-gradient(100deg,var(--gold) 0%,var(--ember) 100%);
  /* Schaltflächenverlauf — endet bei Amber, damit die dunkle Schrift
     durchgehend gut lesbar bleibt */
  --grad-btn:linear-gradient(100deg,var(--gold) 0%,var(--amber) 100%);
  --wrap:1180px;

  /* Rückwärtskompatible Namen. Ältere Regeln greifen weiter, ohne dass
     jede einzelne Zeile angefasst werden muss. */
  --ink:var(--text-hell);
  --ink-soft:var(--text);
  --ink-line:var(--linie);
  --ink-deep:var(--flaeche);
  --flaeche-hoch:var(--karte);
  --chalk-warm:var(--karte);
  --chalk-shade:#101010;
  --chalk-dim:var(--text-dim);
  --chalk-line:var(--linie);
  --ember-text:var(--ember);
}

/* ==========================================================================
   1. Reset & Basis
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  color-scheme:dark;            /* die Seite ist durchgehend dunkel gestaltet;
                                 diese Angabe verhindert, dass mobile Browser
                                 zusätzlich eigene Umfärbungen vornehmen */
}
body{
  margin:0;
  background:var(--grund);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ember-text);text-decoration:none}
figure{margin:0}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.05;
  color:var(--ink);
  margin:0 0 .5em;
}
h1{font-size:clamp(34px,5vw,48px)}
h2{font-size:clamp(28px,4vw,38px)}
h3{font-size:24px}
h4{font-size:20px}
p{margin:0 0 1.1em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ember-text);
  margin-bottom:6px;
}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:12px;top:12px;z-index:99;background:var(--gold);color:var(--auf-gold);
  padding:10px 16px;font-weight:800;
}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Buttons */
.btn,
.wpcf7-submit,
input[type=submit],
button.btn{
  display:inline-block;
  background:var(--grad-btn);
  color:var(--auf-gold);
  border:0;
  font-family:var(--font-body);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px 24px;
  cursor:pointer;
  transition:filter .15s ease,transform .15s ease;
}
.btn:hover,
.wpcf7-submit:hover,
input[type=submit]:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{
  background:none;
  border:1px solid var(--chalk-line);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--ember-text);color:var(--ember-text);transform:none;filter:none}

/* ==========================================================================
   2. Kopfbereich
   ========================================================================== */
.topbar{background:var(--flaeche);border-bottom:1px solid var(--ink-line);padding:9px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.topbar a{color:var(--text-hell);font-size:12px;letter-spacing:.06em}
.topbar a:hover{color:var(--gold)}
.topbar-meta{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:lowercase;color:rgba(255,255,255,.68);
  transition:color .15s ease;
}
.topbar-meta:hover{color:var(--gold)}
.topbar-menu{list-style:none;margin:0;padding:0;display:flex;gap:18px}

.site-head{
  background:var(--flaeche);
  text-align:center;
  padding:38px 0 32px;
  border-bottom:3px solid transparent;
  border-image:var(--grad) 1;
}
/* Logogrößen — einstellbar unter Customizer → Website-Informationen.
   Die ersten drei begrenzen die Höhe, was für quadratische und hochformatige
   Logos passt. „Banner" begrenzt stattdessen die Breite — nötig für breite
   Logos mit Schriftzug, die sonst durch die Höhenbegrenzung winzig wirken. */
.site-head .custom-logo{margin:0 auto;width:auto;height:auto}
.site-head.logo-kompakt .custom-logo{max-height:90px;max-width:100%}
.site-head.logo-mittel  .custom-logo{max-height:140px;max-width:100%}
.site-head.logo-gross   .custom-logo{max-height:210px;max-width:100%}
.site-head.logo-banner  .custom-logo{
  max-height:none;
  width:100%;
  max-width:min(100%, 900px);
}
/* Über einem Kopfbild bleibt das Logo in jedem Fall zurückhaltend, damit es
   das Bild nicht überdeckt. */
.site-head.bild-fuellen .custom-logo{max-height:96px;max-width:min(100%,520px);width:auto}

/* --------------------------------------------------------------
   Kopfbild über die volle Seitenbreite

   Das Bild läuft randlos über die gesamte Seitenbreite.
   Zwei Darstellungsarten stehen zur Wahl, einstellbar im Customizer:
   vollständig anzeigen (nichts wird abgeschnitten) oder Ausschnitt füllen
   (fester Streifen, Bild wird beschnitten).
   -------------------------------------------------------------- */
.site-head.hat-bild{
  position:relative;
  padding:0;
  overflow:hidden;
}
.head-bild{position:relative;line-height:0}
/* Das gesamte Kopfbild ist ein Link zur Startseite. */
.head-bild-link{display:block;line-height:0}
.head-bild-link:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* --- Darstellung „Vollständig anzeigen" ---
   Das Bild wird auf die Seitenbreite herunterskaliert und behält sein
   Seitenverhältnis. Die Höhe des Streifens richtet sich danach — es wird
   nichts abgeschnitten. Die Obergrenze fängt sehr hochformatige Bilder ab;
   greift sie, wird das Bild weiter verkleinert und mittig gesetzt. Der
   entstehende Rand fällt nicht auf, weil die Fläche ohnehin schwarz ist. */
.site-head.bild-ganz .head-bild img{
  width:100%;
  height:auto;
  max-height:78vh;
  display:block;
  object-fit:contain;
  margin:0 auto;
}

/* --- Darstellung „Ausschnitt füllen" ---
   Fester Streifen, das Bild füllt ihn randlos und wird dafür beschnitten. */
.site-head.bild-fuellen .head-bild-link{height:100%}
.site-head.bild-fuellen .head-bild img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center var(--ausschnitt,center);
}

/* Höhenstufen — Mindestwert fürs Handy, Idealwert wächst mit der
   Breite, Höchstwert begrenzt große Bildschirme. */
.site-head.hoehe-kompakt .head-bild{height:clamp(140px,22vw,260px)}
.site-head.hoehe-mittel  .head-bild{height:clamp(190px,32vw,420px)}
.site-head.hoehe-gross   .head-bild{height:clamp(240px,46vw,580px)}

/* Logo und Vereinsname liegen über dem Bild. Der Verlauf darunter
   sorgt dafür, dass die Schrift auch auf hellen Bildstellen lesbar
   bleibt — ohne das Bild flächig abzudunkeln. */
.site-head.bild-fuellen .head-inhalt{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:60px 0 26px;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,0) 100%
  );
}
.site-head.bild-fuellen .site-title{
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.site-head.bild-ganz .head-inhalt{padding:22px 0 26px}
.site-head.bild-fuellen .custom-logo{
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));
}

/* Auf schmalen Bildschirmen steht der Schriftzug unter dem Bild
   statt darauf — sonst wird es bei kleiner Bildhöhe zu gedrängt. */
@media (max-width:600px){
  .site-head.bild-fuellen{overflow:visible}
  .site-head.bild-fuellen .head-inhalt{
    position:static;
    padding:22px 0 24px;
    background:var(--flaeche);
  }
  .site-head.bild-fuellen .site-title{text-shadow:none}
}
.site-title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(34px,6vw,58px);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--text-hell);margin:0;
}
.site-title a{color:inherit}
.site-title .accent{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.site-desc{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:14px 0 0;
}

/* Navigation */
.site-nav{background:var(--flaeche);border-top:1px solid var(--ink-line);position:relative}
.site-nav .wrap{display:flex;align-items:center;justify-content:center}
.nav-toggle{
  display:none;background:none;border:1px solid var(--linie);color:var(--text-hell);
  font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 16px;margin:10px 0;cursor:pointer;
}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.site-nav li{position:relative}
.site-nav a{
  display:block;padding:18px 18px;color:var(--text-hell);
  font-weight:800;font-size:15px;letter-spacing:.07em;text-transform:uppercase;
  position:relative;
}
/* Goldener Balken unter der aktuellen Seite — macht die Navigation
   deutlich greifbarer als eine reine Farbänderung. */
.site-nav a::after{
  content:"";position:absolute;left:18px;right:18px;bottom:10px;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.site-nav a:hover::after,
.site-nav .current-menu-item>a::after,
.site-nav .current_page_item>a::after,
.site-nav .current-menu-parent>a::after{transform:scaleX(1)}
.site-nav a:hover,
.site-nav .current-menu-item>a,
.site-nav .current_page_item>a,
.site-nav .current-menu-parent>a{color:var(--gold)}
.site-nav .sub-menu{
  display:none;position:absolute;left:0;top:100%;min-width:225px;
  background:var(--flaeche-hoch);border:1px solid var(--ink-line);z-index:20;
  flex-direction:column;
}
.site-nav li:hover>.sub-menu,
.site-nav li:focus-within>.sub-menu{display:flex}
.site-nav .sub-menu a{padding:12px 16px;font-size:12px}

/* ==========================================================================
   3. Spiele-Band — je Mannschaft EINE Karte mit bis zu drei Terminen
   ========================================================================== */
.spiele-band{
  background:var(--flaeche);
  border-bottom:1px solid var(--ink-line);
  padding:26px 0 30px;
  color:var(--text-hell);
}
.spiele-band .band-head{margin-bottom:16px;text-align:center}
.spiele-band .band-head h2{color:var(--text-hell);font-size:26px;margin:0}

.band-karten{
  display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;
  scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
  scroll-snap-type:x proximity;

  /* Passen alle Karten nebeneinander, stehen sie mittig. Sind es mehr, als
     Platz haben, beginnen sie links — sonst wäre die erste Karte beim Laden
     bereits halb aus dem Bild geschoben und man müsste nach links zurück
     wischen, um sie zu sehen. */
  justify-content:center;
  justify-content:safe center;
}
/* Rückfallebene: Browser ohne Unterstützung für „safe" würden bei zu vielen
   Karten die erste links abschneiden. Der automatische Außenabstand erzeugt
   dieselbe Mittigkeit, ohne dass etwas unerreichbar wird. */
@supports not (justify-content: safe center){
  .band-karten{justify-content:flex-start}
  .band-karten > *:first-child{margin-left:auto}
  .band-karten > *:last-child{margin-right:auto}
}
.band-karten::-webkit-scrollbar{height:6px}
.band-karten::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

.spiel-karte{
  flex:0 0 300px;scroll-snap-align:start;
  background:var(--karte);
  border:1px solid var(--ink-line);
  border-top:3px solid transparent;
  border-image:var(--grad) 1;
  padding:0 0 4px;
}
.spiel-karte .karte-team{
  font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1.1;
  text-transform:uppercase;letter-spacing:.03em;
  color:var(--gold);
  margin:0;padding:15px 18px 12px;
  border-bottom:1px solid var(--ink-line);
}
.spiel-karte ul{list-style:none;margin:0;padding:0}
.spiel-karte li{
  padding:13px 18px;
  border-bottom:1px solid var(--ink-line);
}
.spiel-karte li:last-child{border-bottom:0}
.spiel-datum{
  display:block;
  font-family:var(--font-mono);font-weight:700;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber);margin:0 0 4px;
}
.spiel-titel{
  display:block;
  font-family:var(--font-body);font-weight:800;font-size:15px;line-height:1.3;
  color:var(--text-hell);margin:0 0 3px;
}
.spiel-ort{
  display:block;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:rgba(255,255,255,.68);margin:0;
}

/* ==========================================================================
   4. Inhaltsbereich
   ========================================================================== */
.site-main{padding:52px 0}
.section-head{margin-bottom:26px}
.section-head h1,.section-head h2{margin:0}

/* News-Karten */
.news-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.news-card{
  background:var(--chalk-warm);border:1px solid var(--chalk-line);
  display:flex;flex-direction:column;
}
.news-card .thumb{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--karte-hoch)}
.news-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.news-card:hover .thumb img{transform:scale(1.03)}
.news-card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.news-cats{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ember-text);margin-bottom:9px;
}
.news-cats a{color:inherit}
.news-card h2,.news-card h3{font-size:23px;margin:0 0 9px}
.news-card h2 a,.news-card h3 a{color:var(--ink)}
.news-card h2 a:hover,.news-card h3 a:hover{color:var(--ember-text)}
.news-meta{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--chalk-dim);margin-bottom:11px;
}
.news-excerpt{font-size:14.5px;line-height:1.6;color:var(--chalk-dim);margin:0 0 18px}
.news-card .btn{align-self:flex-start;margin-top:auto}

/* Werkzeugleiste: Suche + Pagination */
.toolbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;margin-top:34px;
}
.searchform{display:flex;border:1px solid var(--chalk-line);background:var(--chalk-warm)}
.searchform input[type=search],
.searchform input[type=text]{
  border:0;background:transparent;padding:11px 14px;font-family:var(--font-body);
  font-size:14px;width:230px;color:var(--ink);
}
.searchform input:focus{outline:none}
.searchform button{
  border:0;background:var(--grad-btn);color:var(--auf-gold);font-weight:800;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:0 18px;cursor:pointer;
}
.pagination{display:flex;gap:6px;flex-wrap:wrap;font-family:var(--font-mono);font-size:13px}
.pagination .page-numbers{
  border:1px solid var(--chalk-line);padding:8px 13px;color:var(--ink-soft);
}
.pagination .page-numbers:hover{border-color:var(--ember-text);color:var(--ember-text)}
.pagination .current{background:var(--grad-btn);border-color:transparent;color:var(--auf-gold);font-weight:700}

/* ==========================================================================
   5. Einzelbeitrag & Seiten
   ========================================================================== */
.entry-head{max-width:820px;margin:0 auto 30px;text-align:center}
.entry-head .news-cats{margin-bottom:12px}
.entry-head h1{margin:0 0 12px}
.entry-media{max-width:1000px;margin:0 auto 34px}
/* Hochformatige Beitragsbilder würden in voller Breite den ganzen Bildschirm
   füllen. Die Höhenbegrenzung hält sie handlich; Querformat bleibt unberührt,
   weil es diese Höhe ohnehin nicht erreicht. */
.entry-media-begrenzt img{
  max-height:70vh;width:auto;max-width:100%;margin:0 auto;
}
.entry-content{max-width:760px;margin:0 auto;font-size:16.5px}
.entry-content h2{margin-top:1.6em;font-size:30px}
.entry-content h3{margin-top:1.4em}
.entry-content a{border-bottom:1px solid rgba(204,69,0,.4)}
.entry-content a:hover{border-bottom-color:var(--ember-text)}
.entry-content ul,.entry-content ol{margin:0 0 1.2em;padding-left:1.3em}
.entry-content li{margin-bottom:.4em}
.entry-content blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid transparent;
  border-image:linear-gradient(180deg,var(--gold),var(--ember)) 1;
  font-size:19px;line-height:1.5;color:var(--ink);
}
.entry-content img{margin:1.4em 0}
.entry-content figcaption{
  font-family:var(--font-mono);font-size:11.5px;color:var(--chalk-dim);
  text-align:center;margin-top:8px;
}
.entry-foot{
  max-width:760px;margin:40px auto 0;padding-top:22px;
  border-top:1px solid var(--chalk-line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
}
.entry-foot a{color:var(--ember-text)}

/* Weiter-/Zurück-Navigation */
.post-nav{
  max-width:760px;margin:34px auto 0;display:flex;justify-content:space-between;gap:20px;
  font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
}

/* --------------------------------------------------------------
   Beitragsseite mit Seitenspalte

   Der Textbereich behält seine Breite von rund 760 px — Fließtext wird ab
   etwa 75 Zeichen je Zeile schwerer lesbar. Die Spalte nutzt den Raum
   daneben, der bisher leer blieb. Ab Tablet-Breite abwärts rutscht sie unter
   den Beitrag; nebeneinander wären beide Spalten zu schmal.
   -------------------------------------------------------------- */
.beitrag-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:52px;
  align-items:start;
}
.beitrag-haupt{min-width:0}

/* Innerhalb der Spalte sind Kopf, Bild und Text nicht mehr auf der Seite
   zentriert, sondern in ihrer Spalte. */
.beitrag-split .entry-head,
.beitrag-split .entry-content,
.beitrag-split .entry-foot,
.beitrag-split .post-nav{margin-left:0;margin-right:0}
.beitrag-split .entry-media{max-width:100%}

.beitrag-spalte{position:sticky;top:22px}
.spalte-block{margin-bottom:36px}
.spalte-block:last-child{margin-bottom:0}
.spalte-titel{
  font-size:22px;margin:0 0 14px;
  padding-bottom:8px;
  border-bottom:2px solid transparent;
  border-image:var(--grad) 1;
}

/* Termine in der Spalte: bewusst schlicht.

   Neben Fließtext lenken Rahmen, Flächen und Farbverläufe vom Lesen ab. Hier
   trägt deshalb nur die Trennlinie die Gliederung, und der Termintitel ist
   das einzige kräftige Element. Die Kategorie ordnet zu, ohne sich in den
   Vordergrund zu drängen. */
.spalte-termine{list-style:none;margin:0;padding:0}
.spalte-termine li{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 0;
  border-bottom:1px solid var(--linie);
}
.spalte-termine li:last-child{border-bottom:0}
.spalte-kategorie{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);
}
.spalte-termin-titel{
  font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1.35;
  color:var(--text-hell);
}
.spalte-termin-meta{
  font-family:var(--font-mono);font-size:11.5px;line-height:1.5;
  color:var(--text-dim);
}
.spalte-termin-meta .trenner{opacity:.5;margin:0 2px}

/* Zuletzt erschienene Beiträge */
.spalte-beitraege{list-style:none;margin:0;padding:0}
.spalte-beitraege li{border-bottom:1px solid var(--linie)}
.spalte-beitraege li:last-child{border-bottom:0}
.spalte-beitraege a{
  display:flex;gap:12px;align-items:center;
  padding:12px 0;color:var(--text);
}
.spalte-bild{flex:0 0 64px}
.spalte-bild img{width:64px;height:64px;object-fit:cover;display:block}
.spalte-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.spalte-beitrag-titel{
  font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1.35;
  color:var(--text-hell);
}
.spalte-beitraege a:hover .spalte-beitrag-titel{color:var(--gold)}
.spalte-datum{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-dim);
}

@media (max-width:900px){
  .beitrag-split{grid-template-columns:1fr;gap:44px}
  .beitrag-spalte{position:static}
  .beitrag-split .entry-head,
  .beitrag-split .entry-content,
  .beitrag-split .entry-foot,
  .beitrag-split .post-nav{margin-left:auto;margin-right:auto}
}

/* ==========================================================================
   6. Personen — Spieler, Trainer, Vorstand
   ========================================================================== */
.kader{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:26px 0 0}
.spieler-karte{
  background:var(--karte);border:1px solid var(--linie);
  text-align:center;padding-bottom:18px;overflow:hidden;
}
.spieler-karte .foto{aspect-ratio:3/4;background:linear-gradient(160deg,#232323 0%,#0d0d0d 72%);margin-bottom:14px}
.spieler-karte .foto img{width:100%;height:100%;object-fit:cover}
.spieler-nummer{
  font-family:var(--font-mono);font-size:26px;font-weight:700;line-height:1;
  color:var(--gold);margin:0 0 4px;
}
.spieler-karte h3{font-size:23px;color:var(--text-hell);margin:0 10px 6px}
.spieler-position{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);margin:0;
}
/* Fähnchen für Zusatzfunktionen wie „Spielertrainer" oder „Kapitän" */
.spieler-karte .foto{position:relative}
.spieler-zusatz{
  position:absolute;left:0;bottom:0;
  background:var(--grad-btn);color:var(--auf-gold);
  font-family:var(--font-body);font-weight:800;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;
}
.spieler-extra{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.58);margin:6px 0 0;
}

.trainer-liste{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0 0}
.trainer-box{
  background:var(--chalk-warm);border:1px solid var(--chalk-line);
  border-left:4px solid transparent;
  border-image:linear-gradient(180deg,var(--gold),var(--ember)) 1;
  padding:22px;display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:start;
}
.trainer-box .foto{aspect-ratio:3/4;background:linear-gradient(160deg,#2e2e2e,#0d0d0d)}
.trainer-box .foto img{width:100%;height:100%;object-fit:cover}
.trainer-rolle{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-text);margin:0 0 6px;
}
.trainer-box h3{margin:0 0 10px;font-size:25px}
.trainer-kontakt{font-size:14px;line-height:1.8;margin:0}
.trainer-kontakt a{font-weight:600}

.vorstand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:26px 0 0}
.vorstand-karte{
  background:var(--chalk-warm);border:1px solid var(--chalk-line);
  padding-bottom:18px;text-align:center;
}
.vorstand-karte .foto{aspect-ratio:3/4;background:linear-gradient(160deg,#2e2e2e,#0d0d0d);margin-bottom:14px}
.vorstand-karte .foto img{width:100%;height:100%;object-fit:cover}
.vorstand-funktion{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-text);margin:0 0 5px;
}
.vorstand-karte h3{font-size:21px;margin:0 12px 6px}
.vorstand-kontakt{font-family:var(--font-mono);font-size:11.5px;margin:0 12px;color:var(--chalk-dim)}

/* Trainingstafel */
.training-tafel{
  background:var(--karte);color:var(--text-hell);padding:24px 26px;margin:26px 0 0;
  border-top:3px solid transparent;border-image:var(--grad) 1;
}
.training-tafel h3{color:var(--gold);margin:0 0 12px;font-size:25px}
.training-tafel ul{list-style:none;margin:0;padding:0}
.training-tafel li{
  font-family:var(--font-mono);font-size:13.5px;padding:10px 0;
  border-bottom:1px solid var(--ink-line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.training-tafel li:last-child{border-bottom:0}
.training-tafel .ort{color:var(--gold)}

/* Mannschaftsfoto — steht zwischen Trainerteam und Kader */
.mannschaftsfoto{
  margin:46px 0 0;
  border-top:3px solid transparent;
  border-image:var(--grad) 1;
}
.mannschaftsfoto img{width:100%;height:auto;display:block}
.mannschaftsfoto figcaption{
  font-family:var(--font-mono);font-size:11.5px;line-height:1.6;
  color:var(--chalk-dim);padding:10px 2px 0;
}

/* Optionale Schaltfläche unter den Trainingszeiten */
/* Optionale Schaltfläche unter den Trainingszeiten — mittig gesetzt,
   damit sie als eigenständiger Aufruf wirkt und nicht wie ein Anhängsel
   des Blocks darüber. */
.team-aktion{margin:28px 0 0;text-align:center}
.team-aktion .btn{padding:14px 34px;font-size:13.5px}

/* Team-Seiten-Raster.
   Zwei Spalten, wenn Trainingszeiten UND Spiele vorliegen;
   sonst nimmt der vorhandene Block die volle Breite ein. */
.team-split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:26px}
.team-einzeln{margin-top:26px}
.team-einzeln .training-tafel{margin-top:0}
.team-block{margin-top:46px}
.team-block:first-of-type{margin-top:34px}

/* ==========================================================================
   7. Formulare (Contact Form 7 & Suche)
   ========================================================================== */
.formular-karte{
  background:var(--chalk-warm);border:1px solid var(--chalk-line);
  padding:28px;max-width:620px;
}
input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=date],input[type=number],input[type=search],select,textarea{
  width:100%;padding:11px 14px;border:1px solid var(--chalk-line);
  background:var(--karte-hoch);font-family:var(--font-body);font-size:15px;color:var(--text);
}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:var(--gold);outline:2px solid rgba(242,180,65,.35);outline-offset:0;
}
label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chalk-dim);margin:0 0 6px}
.wpcf7-form p{margin-bottom:16px}
.wpcf7 .wpcf7-not-valid-tip{
  font-family:var(--font-mono);font-size:11.5px;color:var(--ember-text);margin-top:5px;
}
.wpcf7 form .wpcf7-response-output{
  border:1px solid var(--chalk-line);border-left:4px solid var(--ember);
  margin:18px 0 0;padding:14px 16px;font-size:14px;
}
.wpcf7 form.sent .wpcf7-response-output{border-left-color:var(--gold)}

/* ==========================================================================
   8. Sponsoren & Fußbereich
   ========================================================================== */
.sponsoren{background:var(--chalk-shade);padding:36px 0;border-top:1px solid var(--chalk-line)}
.sponsoren .eyebrow{text-align:center}

/* Eigenes Band aus Bild-Widgets */
.sponsoren-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:40px;margin-top:18px;
}

/* Karussell aus einem Plugin.
   Das Markup und die Maße kommen vollständig vom Plugin. Hier wird bewusst
   nur die Breite eingefangen — jeder weitere Eingriff bringt die Berechnung
   der Schlittenbreite durcheinander, was zu überbreiten oder leeren
   Kästen führt. */
.sponsoren-karussell{margin-top:18px;max-width:100%;overflow:hidden}

/* Weiße Kachel für die Logos. Sponsorenlogos sind meist dunkel auf weißem
   Grund und wären auf schwarzer Fläche unsichtbar; helle Logos brauchen sie
   dagegen nicht und verschwinden darauf. Deshalb im Customizer abschaltbar. */
.sponsoren.mit-kacheln .sponsoren-band img{
  background:#ffffff;
  padding:10px 14px;
}
.sponsoren.mit-kacheln .sponsoren-karussell img{
  background:#ffffff;
}
.sponsoren-band img{width:auto}

/* Größenstufen — einstellbar im Customizer. */
.sponsoren.logos-klein  .sponsoren-band img,
.sponsoren.logos-klein  .lauf-haelfte img{max-height:52px}
.sponsoren.logos-mittel .sponsoren-band img,
.sponsoren.logos-mittel .lauf-haelfte img{max-height:72px}
.sponsoren.logos-gross  .sponsoren-band img,
.sponsoren.logos-gross  .lauf-haelfte img{max-height:96px}
.sponsoren.logos-xl     .sponsoren-band img,
.sponsoren.logos-xl     .lauf-haelfte img{max-height:124px}

/* Verlinkte Logos: keine Unterstreichung, kein Rahmen. Beim Überfahren
   werden sie leicht angehoben — dezent genug, um die Logos nicht zu
   verfälschen, aber deutlich genug als Hinweis auf den Verweis. */
.sponsoren a{
  display:inline-block;line-height:0;border:0;text-decoration:none;
  transition:transform .18s ease;
}
.sponsoren a:hover{transform:translateY(-3px)}
.sponsoren a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* --------------------------------------------------------------
   Laufband — durchlaufende Logos, ohne Plugin und ohne Skript.

   Der Inhalt steht zweimal hintereinander. Die Spur wandert genau um
   ihre halbe Breite nach links; in dem Moment steht die zweite Hälfte
   dort, wo die erste begonnen hat, und der Sprung an den Anfang bleibt
   unsichtbar.
   -------------------------------------------------------------- */
.sponsoren-laufband{
  margin-top:16px;
  overflow:hidden;
  /* Weiche Ränder links und rechts, damit die Logos nicht hart
     abgeschnitten erscheinen. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.lauf-spur{
  display:flex;
  width:max-content;
  /* Vorgabewert als Rückfallebene. Ist JavaScript verfügbar, wird die Dauer
     aus der gemessenen Breite und der eingestellten Geschwindigkeit
     errechnet und hier überschrieben. */
  animation:scorps-lauf 40s linear infinite;
}
.sponsoren-laufband:hover .lauf-spur,
.sponsoren-laufband:focus-within .lauf-spur{animation-play-state:paused}

.lauf-haelfte{
  display:flex;align-items:center;flex:0 0 auto;
  gap:56px;padding-right:56px;
}
.lauf-haelfte img{width:auto}
.sponsoren.mit-kacheln .lauf-haelfte img{background:#ffffff;padding:10px 14px}

/* Verschoben wird um genau eine Listenlänge. Wie groß dieser Anteil an der
   Gesamtspur ist, hängt davon ab, wie oft die Liste angelegt wurde — bei zwei
   Kopien die Hälfte, bei vier ein Viertel. Den Wert setzt das Skript; der
   Vorgabewert gilt, solange es nicht gelaufen ist. */
.lauf-spur{--lauf-weg:-50%}

@keyframes scorps-lauf{
  from{transform:translateX(0)}
  to{transform:translateX(var(--lauf-weg,-50%))}
}

/* Wer Bewegung auf Systemebene abbestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion:reduce){
  .lauf-spur{animation:none}
  .sponsoren-laufband{overflow-x:auto}
}

.site-foot{
  background:var(--flaeche);color:var(--text);
  border-top:3px solid transparent;border-image:var(--grad) 1;
  padding:44px 0 20px;
}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:32px}
.site-foot h4{color:var(--gold);margin:0 0 12px}
.site-foot p,.site-foot li{font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.82);margin:0}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot a{color:rgba(255,255,255,.82)}
.site-foot a:hover{color:var(--gold)}
.foot-bottom{
  border-top:1px solid var(--ink-line);padding-top:18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:rgba(255,255,255,.62);
}
.foot-bottom a{color:rgba(255,255,255,.62)}

/* ==========================================================================
   8b. Goldene Überschriften auf dunklen Karten
   ========================================================================== */
.spiel-karte .karte-team,
.training-tafel h3,
.site-foot h4,
.ashe-widget .widget-title{
  color:var(--gold);
}
.site-nav a,.site-nav .sub-menu a,#hauptmenu a{color:var(--text-hell)}
.site-nav a:hover,.site-nav .current-menu-item>a,
.site-nav .current_page_item>a,.site-nav .current-menu-parent>a{color:var(--gold)}

/* ==========================================================================
   9. Diverses
   ========================================================================== */
.hinweis{
  background:var(--chalk-warm);border:1px solid var(--chalk-line);
  border-left:4px solid transparent;border-image:linear-gradient(180deg,var(--gold),var(--ember)) 1;
  padding:20px 22px;margin:26px 0;
}
.leer{
  font-family:var(--font-mono);font-size:14px;color:var(--chalk-dim);
  padding:24px 0;
}
::selection{background:var(--gold);color:var(--auf-gold)}

/* Complianz-Banner an die Palette angleichen */
.cmplz-cookiebanner{
  font-family:var(--font-body)!important;
  border:1px solid var(--chalk-line)!important;
}
.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title{
  font-family:var(--font-display)!important;text-transform:uppercase;letter-spacing:.03em;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept{
  background:var(--grad-btn)!important;color:var(--auf-gold)!important;border:0!important;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences{
  background:none!important;color:var(--text-hell)!important;
  border:1px solid var(--chalk-line)!important;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

/* WordPress-Standardklassen */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* ==========================================================================
   10. Responsiv
   ========================================================================== */
@media (max-width:1000px){
  .news-grid{grid-template-columns:1fr 1fr}
  .kader,.vorstand-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .nav-toggle{display:block;margin-left:auto;margin-right:auto}
  .site-nav .wrap{justify-content:center}
  .site-nav a::after{display:none}
  .site-nav ul.menu{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:30;
    flex-direction:column;background:var(--flaeche);border-top:1px solid var(--ink-line);
  }
  .site-nav ul.menu.open{display:flex}
  .site-nav ul.menu>li{width:100%;border-bottom:1px solid var(--ink-line)}
  .site-nav .sub-menu{position:static;border:0;border-top:1px solid var(--ink-line);display:flex}
  .site-nav .sub-menu a{padding-left:32px}
  .team-split{grid-template-columns:1fr}
  .trainer-liste{grid-template-columns:1fr}
  .kader,.vorstand-grid{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .news-grid{grid-template-columns:1fr}
  .kader,.vorstand-grid{grid-template-columns:1fr}
  .trainer-box{grid-template-columns:1fr}
  .searchform input[type=search]{width:100%}
  .searchform{width:100%}
  .toolbar{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}