/* ============================================================
   FC Hertha Rheidt 1916 — Athletic Essentials

   Mobile first: Die Grundregeln gelten fürs Handy, Media Queries
   greifen ausschließlich nach oben. Farbwerte und Typo-Skala sind
   dieselben wie im Trainingsplan (webseite/assets/stil.css),
   damit beides erkennbar zusammengehört.
   ============================================================ */
:root{
  --club-blue:#14417E;
  --club-blue-lift:#2E6BB8;
  --club-black:#0B0F14;

  --bg:#EEF1F5;
  --surface:#F8FAFC;
  --surface-2:#E3E8EF;
  --text:#0B0F14;
  --text-2:#3D4A5C;
  --text-3:#6B7A8D;
  --line:#C9D2DE;
  --accent:#14417E;

  /* Zyklusschwerpunkte — dieselbe Rampe wie im Trainingsplan:
     Petrol (eigenes Tor) → Amber → Zinnober (gegnerisches Tor). */
  --def:#12796A;
  --trans:#A2670F;
  --off:#A6301C;
  --event:#6B7A8D;

  --font-display:"Arial Narrow","Helvetica Neue Condensed","Liberation Sans Narrow","Nimbus Sans Narrow",system-ui,sans-serif;
  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --step--1:clamp(.72rem,.69rem + .14vw,.79rem);
  --step-0:clamp(.94rem,.9rem + .18vw,1.02rem);
  --step-1:clamp(1.1rem,1.02rem + .35vw,1.3rem);
  --step-2:clamp(1.4rem,1.22rem + .8vw,1.9rem);
  --step-3:clamp(1.9rem,1.5rem + 1.9vw,3.1rem);

  --gutter:clamp(1rem,4vw,2.5rem);
  --maxw:72rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#070A0F; --surface:#0E141D; --surface-2:#16202C;
    --text:#E8EDF4; --text-2:#A6B4C6; --text-3:#7A8899;
    --line:#1E2A3A; --accent:#6FA3E0;
    --def:#3FBCA4; --trans:#DFA845; --off:#E4715A; --event:#7A8899;
  }
}
:root[data-theme="light"]{
  --bg:#EEF1F5; --surface:#F8FAFC; --surface-2:#E3E8EF;
  --text:#0B0F14; --text-2:#3D4A5C; --text-3:#6B7A8D;
  --line:#C9D2DE; --accent:#14417E;
  --def:#12796A; --trans:#A2670F; --off:#A6301C; --event:#6B7A8D;
}
:root[data-theme="dark"]{
  --bg:#070A0F; --surface:#0E141D; --surface-2:#16202C;
  --text:#E8EDF4; --text-2:#A6B4C6; --text-3:#7A8899;
  --line:#1E2A3A; --accent:#6FA3E0;
  --def:#3FBCA4; --trans:#DFA845; --off:#E4715A; --event:#7A8899;
}

/* ============================================================ BASE */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh;
}
h1,h2{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;text-wrap:balance;margin:0;line-height:1.05;
}
h1{font-size:var(--step-3)}
h2{font-size:var(--step-1)}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
main.wrap{flex:1;padding-block:clamp(1.5rem,6vw,3rem)}

.eyebrow{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent);margin-bottom:.4rem;
}
.lead{color:var(--text-2);max-width:60ch}

/* ============================================================ KOPF
   Einthemig wie im Trainingsplan: Ein Wappen wechselt nicht die
   Farbe, nur weil das Handy im Dunkelmodus steht. */
.kopf{background:var(--club-black);border-bottom:3px solid var(--club-blue-lift)}
.kopf-in{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-block:.85rem;
  padding-top:max(.85rem,env(safe-area-inset-top));
}
.kopf-marke{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:var(--step-1);line-height:1.1;
}
.kopf-marke::before{content:"";width:.75rem;height:1.4rem;background:var(--club-blue-lift);flex:none}
.kopf-marke-text{display:flex;flex-direction:column}
.kopf-marke small{
  font-family:var(--font-mono);font-size:.6rem;font-weight:400;
  letter-spacing:.14em;color:#8FB4E4;text-transform:uppercase;
}
.thema{
  margin-left:auto;background:none;border:1px solid #2C3D57;color:#8FB4E4;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;padding:.5rem .7rem;min-height:2.75rem;
}
.thema:hover{color:#fff;border-color:var(--club-blue-lift)}

/* Auf dem Handy eine eigene Zeile unter der Marke, auf breiten
   Schirmen rechts daneben. Bei vielen Punkten scrollt sie seitlich,
   statt den Kopf in die Höhe zu treiben. */
.kopf-nav{
  flex-basis:100%;order:3;
  display:flex;gap:.2rem;align-items:center;
  margin-top:.5rem;padding-top:.5rem;border-top:1px solid #1B2A3E;
  overflow-x:auto;scrollbar-width:none;
}
.kopf-nav::-webkit-scrollbar{display:none}
.kopf-nav a{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;color:#8FB4E4;text-decoration:none;white-space:nowrap;
  padding:.55rem .7rem;border-bottom:2px solid transparent;
}
.kopf-nav a:hover{color:#fff}
.kopf-nav a[aria-current]{color:#fff;border-bottom-color:var(--club-blue-lift)}
@media (min-width:48rem){
  .kopf-nav{
    flex-basis:auto;order:0;margin:0 0 0 auto;padding-top:0;border-top:0;
  }
  .thema{margin-left:1rem;order:1}
}

/* ============================================================ EINSTIEG */
.einstieg{margin-bottom:clamp(1.5rem,5vw,2.5rem)}
.einstieg .lead{margin-top:.75rem}

/* ============================================================ BEREICHE
   Die Kacheln der Startseite. Eine Spalte, ab 52rem zwei — bei
   derzeit einem Bereich bleibt sie bewusst schmal, damit die Kachel
   nicht über die halbe Seite läuft. */
.bereiche{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:clamp(1rem,3vw,1.5rem);
  max-width:56rem;
}
@media (min-width:52rem){ .bereiche{grid-template-columns:repeat(2,1fr)} }

.bereich{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--line);
  color:inherit;text-decoration:none;
  transition:border-color .15s,transform .15s;
}
.bereich:hover,.bereich:focus-visible{border-color:var(--accent)}
.bereich:active{transform:scale(.995)}

.bereich-bild{display:block;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.bereich-bild img{width:100%;height:100%;object-fit:cover}

.bereich-text{display:flex;flex-direction:column;gap:.4rem;padding:1.1rem 1.2rem 1.3rem}
.bereich-zahl{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);
}
.bereich-titel{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;font-size:var(--step-2);line-height:1.1;
}
.bereich-kurz{color:var(--text-2);line-height:1.5}
.bereich-mehr{
  margin-top:.5rem;font-family:var(--font-mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.12em;color:var(--accent);
}
.bereich-mehr::after{content:" →"}

/* ============================================================ GITTER
   Eine Spalte ist der Normalfall. Mehr gibt es erst, wenn Platz da ist. */
.gitter{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:clamp(1rem,3vw,1.5rem);
}
@media (min-width:40rem){ .gitter{grid-template-columns:repeat(2,1fr)} }
@media (min-width:64rem){ .gitter{grid-template-columns:repeat(3,1fr)} }

.kachel-link{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--line);
  color:inherit;text-decoration:none;
  transition:border-color .15s,transform .15s;
}
.kachel-link:hover,.kachel-link:focus-visible{border-color:var(--accent)}
.kachel-link:active{transform:scale(.995)}

.kachel-bild{
  position:relative;display:block;aspect-ratio:16/9;
  background:var(--surface-2);overflow:hidden;
}
.kachel-bild img{width:100%;height:100%;object-fit:cover}
.kachel-play{
  position:absolute;inset:auto auto .6rem .6rem;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:rgb(11 15 20 / .72);
  display:grid;place-items:center;
}
.kachel-play::after{
  content:"";width:0;height:0;margin-left:.2rem;
  border-left:.7rem solid #fff;
  border-block:.45rem solid transparent;
}

.kachel-text{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem 1.1rem}
.kachel-titel{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;font-size:var(--step-1);line-height:1.15;
}
.kachel-kurz{
  color:var(--text-2);font-size:var(--step--1);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ============================================================ DETAIL */
.detail{max-width:52rem}
.detail h1{margin-block:.6rem 1rem}

.zurueck{
  display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.12em;text-decoration:none;
}
.zurueck::before{content:"←"}
.zurueck:hover{text-decoration:underline}

.spieler{background:#000;border:1px solid var(--line)}
.spieler video{width:100%;height:auto;aspect-ratio:16/9;display:block;background:#000}

.datei{
  margin-top:.6rem;color:var(--text-3);
  font-family:var(--font-mono);font-size:var(--step--1);
  letter-spacing:.06em;
}
.datei a{color:var(--text-3)}

.detail .lead{margin-top:1.4rem;font-size:var(--step-1);line-height:1.5}

.ablauf{margin-top:2rem;border-top:1px solid var(--line);padding-top:1.4rem}
.ablauf h2{color:var(--accent);margin-bottom:.9rem}
.ablauf p + p{margin-top:1rem}
.ablauf p{color:var(--text-2);max-width:65ch}

/* ============================================================ BLÄTTERN */
.navigation{
  margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;gap:.75rem;
}
@media (min-width:34rem){ .navigation{grid-template-columns:1fr 1fr} }

.blaettern{
  display:flex;flex-direction:column;gap:.2rem;min-height:2.75rem;
  padding:.8rem 1rem;background:var(--surface);border:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.blaettern:hover{border-color:var(--accent)}
.blaettern-leer{display:none}
@media (min-width:34rem){ .blaettern-leer{display:block;visibility:hidden} }
.blaettern-vor{text-align:right}
.blaettern-hinweis{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-3);
}
.blaettern-titel{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2;
}

/* ============================================================ FUSS */
.fuss{
  border-top:1px solid var(--line);background:var(--surface);
  padding-block:1.5rem;
  padding-bottom:max(1.5rem,env(safe-area-inset-bottom));
  color:var(--text-3);font-size:var(--step--1);
}

/* ============================================================ HTMX */
/* Beim Nachladen kurz abblenden — nur so viel, dass man merkt,
   dass etwas passiert. */
#inhalt.htmx-swapping{opacity:.4;transition:opacity .08s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================ SYMBOLE
   Bereiche ohne Vorschaubild bekommen eine gezeichnete Fläche. */
.bereich-symbol{
  display:block;width:100%;height:100%;
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/14.2857% 100%,
    var(--surface-2);
  position:relative;
}
.bereich-symbol.ist-kalender::after{
  content:"";position:absolute;inset:0 0 auto;height:22%;
  background:var(--club-blue);
}

/* ============================================================ KALENDER */

/* Farbträger jedes Eintrags. Die Farbe steht nie allein — daneben
   steht immer die Art als Text. */
.ist-defensive{--ton:var(--def)}
.ist-uebergang{--ton:var(--trans)}
.ist-offensive{--ton:var(--off)}
.ist-spiel{--ton:var(--accent)}
.ist-event,.ist-geburtstag{--ton:var(--event)}

/* ---------------------------------------- Als Nächstes */
.naechster{
  display:grid;gap:.15rem;
  border:1px solid var(--line);border-left:.35rem solid var(--ton,var(--accent));
  background:var(--surface);padding:1rem 1.1rem;margin-bottom:1.5rem;
}
.naechster-hinweis{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.14em;color:var(--ton,var(--accent));
}
.naechster-wann{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-3)}
.naechster-titel{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;font-size:var(--step-1);line-height:1.15;
}
.naechster-art{color:var(--text-2);font-size:var(--step--1)}

/* ---------------------------------------- Monatsleiste */
.monat-leiste{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding-block:.75rem;border-block:1px solid var(--line);margin-bottom:1.25rem;
}
.monat-name{font-size:var(--step-1);text-align:center;flex:1}
.monat-blaettern{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;text-decoration:none;
  display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:.6rem;
}
.monat-blaettern.ist-aus{color:var(--text-3);opacity:.45}
.monat-blaettern[rel="prev"]::before{content:"← "}
.monat-blaettern[rel="next"]::after{content:" →"}

/* ---------------------------------------- Agenda (Handy) */
.agenda{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.agenda-tag{display:grid;grid-template-columns:3rem 1fr;gap:.75rem;align-items:start}
.agenda-datum{
  display:grid;justify-items:center;padding-top:.35rem;
  border-top:2px solid var(--line);
}
.agenda-tag.ist-heute .agenda-datum{border-top-color:var(--accent)}
.agenda-zahl{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  font-size:var(--step-2);line-height:1;
}
.agenda-tag.ist-heute .agenda-zahl{color:var(--accent)}
.agenda-wochentag{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-3);
}
.agenda-eintraege{display:grid;gap:.5rem}

.eintrag{
  display:grid;gap:.15rem;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);
  border-left:.35rem solid var(--ton,var(--line));
  padding:.7rem .85rem;min-height:2.75rem;
  transition:border-color .15s;
}
a.eintrag:hover,a.eintrag:focus-visible{border-color:var(--ton,var(--accent))}
.eintrag.ohne-details{opacity:.9}
.eintrag-kopf{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.eintrag-art{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--ton,var(--text-3));
}
.eintrag-zeit{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-3)}
.eintrag-titel{font-weight:600;line-height:1.3}
.eintrag-ort{font-size:var(--step--1);color:var(--text-3)}

.leer{color:var(--text-3);padding-block:2rem;text-align:center}

/* ---------------------------------------- Monatsgitter (ab Tablet) */
.monat{display:none}
@media (min-width:48rem){
  .agenda{display:none}
  .monat{display:block}
}
.monat-kopf{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-3);padding-bottom:.4rem;
}
.monat-kopf span{padding-inline:.4rem}
.monat-gitter{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.zelle{background:var(--surface);min-height:7rem;padding:.4rem;display:grid;gap:.25rem;align-content:start}
.zelle.ist-fremd{background:var(--bg)}
.zelle-tag{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-3)}
.zelle.ist-heute{outline:2px solid var(--accent);outline-offset:-2px}
.zelle.ist-heute .zelle-tag{color:var(--accent);font-weight:700}

.punkt{
  display:block;text-decoration:none;color:inherit;
  border-left:.25rem solid var(--ton,var(--line));
  background:var(--surface-2);padding:.25rem .4rem;
  font-size:var(--step--1);line-height:1.25;
}
a.punkt:hover,a.punkt:focus-visible{background:var(--ton);color:#fff}
.punkt-text{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------------------------------- Legende */
.legende{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:1.5rem;
  padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);
}
.legende-punkt{display:inline-flex;align-items:center;gap:.4rem}
.legende-punkt::before{content:"";width:.75rem;height:.75rem;background:var(--ton);flex:none}

/* ============================================================ DRAWER
   Auf dem Handy ein Blatt von unten, ab Tablet von rechts. */
.drawer{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end}
.drawer[hidden]{display:none}
.drawer-schatten{position:absolute;inset:0;background:rgb(7 10 15 / .55)}
.drawer-blatt{
  position:relative;width:100%;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg);border-top:3px solid var(--club-blue-lift);
  padding:1.25rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  animation:blatt-hoch .18s ease-out;
}
@keyframes blatt-hoch{from{transform:translateY(6%)}to{transform:none}}
@media (min-width:48rem){
  .drawer{align-items:stretch;justify-content:flex-end}
  .drawer-blatt{
    width:min(34rem,100%);max-height:none;height:100%;
    border-top:0;border-left:3px solid var(--club-blue-lift);
    animation:blatt-rein .18s ease-out;
  }
  @keyframes blatt-rein{from{transform:translateX(4%)}to{transform:none}}
}
body.hat-drawer{overflow:hidden}

.drawer-knopf{
  float:right;margin-left:1rem;
  background:none;border:1px solid var(--line);color:var(--text-2);cursor:pointer;
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;padding:.5rem .8rem;min-height:2.75rem;
}
.drawer-knopf:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================ TERMIN */
.termin-art{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.14em;color:var(--ton,var(--accent));
}
.termin-titel{margin-block:.3rem .35rem;font-size:var(--step-2)}
.termin-wann{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-3)}
.termin-seite{max-width:48rem}

.felder{margin:1.4rem 0 0;display:grid;gap:.1rem}
/* Auf schmalen Schirmen steht die Bezeichnung über dem Wert — zwei
   Spalten würden den Wert auf drei Wörter pro Zeile quetschen. */
.feld{display:grid;gap:.1rem;padding-block:.5rem;border-top:1px solid var(--line)}
@media (min-width:26rem){
  .feld{grid-template-columns:9rem 1fr;gap:.75rem}
}
.feld dt{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-3);
}
.feld dd{margin:0;color:var(--text-2)}

.drawer-inhalt h3,.termin-seite h3{
  font-family:var(--font-display);font-stretch:condensed;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;font-size:var(--step-1);
  margin:1.8rem 0 .7rem;color:var(--accent);
}
.fliess{color:var(--text-2)}

.bloecke{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.bloecke li{
  display:grid;grid-template-columns:4.5rem 1fr;gap:.2rem .75rem;
  padding-block:.55rem;border-top:1px solid var(--line);
}
.block-zeit{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-3);grid-row:span 2}
.block-name{
  font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent);
}
.block-inhalt{color:var(--text-2);font-size:var(--step--1);line-height:1.45}

.ansagen{margin:0;padding-left:1.2rem;display:grid;gap:.6rem;color:var(--text-2)}
.ansagen li{padding-left:.2rem}