/* ============================================================
   AKTUELLES — die Spur auf der Startseite und die eigene Seite
   dazu. Werte ausschließlich aus tokens.css.

   Eine Karte, immer dieselbe: 300 × 376, zwei Gründe (Weiß,
   Tanne), eine Titelgröße, eine Kopfzeile, eine Fußzeile, ein
   Zeichen (»). Verschieden ist nur der Körper dazwischen.
   Drei Linien laufen durch alle Karten: 156 (Bild/Datum),
   176 (Dachzeile), Boden (Fußzeile).
   ============================================================ */

/* Unten fast nichts: Das nächste Kapitel bringt seinen eigenen Abstand
   mit (--luft, 84 px). Zusammen mit meinen 44 standen 139 px Weiß
   zwischen der letzten Karte und „01 Einstieg" — zu viel für eine Leiste,
   die keine eigene Sektion sein will (Andreas, 23.08.2026). Die 18 px in
   der Spur bleiben: Dort liegt der Schatten der angehobenen Karte, und
   overflow-x schneidet ihn sonst ab. */
/* Die Schnellleiste springt mit /#aktuelles hierher. Der Kopf klebt mit
   76 px oben — ohne Versatz läge „Aktuelles" darunter (23.08.2026). */
.ak{padding:34px 0 0;background:var(--weiss);scroll-margin-top:96px}
/* Enger als der Hausrhythmus, auf Wunsch von Andreas (23.08.2026): Über der
   Lücke steht eine harte, dunkle Kartenkante statt auslaufender Text — die
   84 px, die zwischen zwei Kapiteln richtig sind, wirken hier zu weit. Die
   Spur zieht das nächste Kapitel deshalb ein Stück zu sich heran.
   `:has(+ .kapitel)` sorgt dafür, dass das NUR passiert, wenn wirklich ein
   Kapitel folgt — steht die Spur einmal woanders oder ganz unten, bleibt
   der normale Abstand. Browser ohne :has() bekommen ebenfalls den
   normalen. */
.ak:has(+ .kapitel){margin-bottom:-52px}
.ak-kopf{display:flex;align-items:baseline;gap:16px;padding:0 var(--inset);margin-bottom:20px}
.ak-titel{font-family:var(--anzeige);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(22px,3.4vw,34px);line-height:1;color:var(--tinte);margin:0}
.ak-zahl{font-family:var(--lauf);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;margin:0}
.ak-nichts{padding:0 var(--inset);color:var(--muted);margin:0}

.ak-steuer{margin-left:auto;display:flex;gap:8px}
.ak-pfeil{width:38px;height:38px;border:1px solid var(--linie-karte);background:var(--weiss);
  color:var(--tinte);font-family:var(--anzeige);font-weight:700;font-size:13px;line-height:1;
  cursor:pointer;border-radius:var(--r-pill);
  transition:background var(--t-schnell) var(--ease),border-color var(--t-schnell) var(--ease)}
.ak-pfeil:hover{background:var(--mint);border-color:var(--tanne)}
@media (max-width:760px){ .ak-steuer{display:none} }

/* Die Spur: links am Satzspiegel, rechts läuft sie aus dem Bild. */
.ak-spur{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--inset) 18px;scroll-padding-left:var(--inset);scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--linie-karte) transparent}
.ak-spur::-webkit-scrollbar{height:5px}
.ak-spur::-webkit-scrollbar-thumb{background:var(--linie-karte)}
@media (prefers-reduced-motion:reduce){ .ak-spur{scroll-behavior:auto} }

.ak-k{scroll-snap-align:start;flex:none;width:300px;height:376px;position:relative;
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  border-radius:var(--r-flaeche);
  transition:transform var(--t-mittel) var(--ease),box-shadow var(--t-mittel) var(--ease)}
a.ak-k:hover{transform:translateY(-4px);box-shadow:var(--schatten-karte)}
a.ak-k:focus-visible{outline:2px solid var(--gruen);outline-offset:3px}
@media (max-width:520px){ .ak-k{width:262px} }

.ak-dach{font-family:var(--lauf);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;display:block}
.ak-k h3{font-family:var(--anzeige);font-weight:700;font-size:20px;line-height:1.18;
  letter-spacing:-.01em;margin:9px 0 0;text-wrap:balance}
.ak-k p{margin:8px 0 0;font-size:14px;line-height:1.5}
.ak-fuss{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;
  gap:12px;align-items:baseline;font-family:var(--lauf);font-weight:600;font-size:13px}
.ak-pf{font-family:var(--anzeige);font-weight:700}
.ak-satz{padding:20px;display:flex;flex-direction:column;height:100%}

/* Grund A — Weiß */
.ak-hell{background:var(--weiss);border:1px solid var(--linie-karte)}
.ak-hell .ak-dach{color:var(--gruen)}
.ak-hell h3{color:var(--tinte)}
.ak-hell p{color:var(--sekundaer)}
.ak-hell .ak-fuss{color:var(--gruen)}

/* Grund B — Tanne */
.ak-dunkel{background:var(--tanne);color:var(--weiss)}
.ak-dunkel .ak-dach{color:var(--lime)}
.ak-dunkel h3{color:var(--weiss)}
.ak-dunkel p{color:rgba(255,255,255,.72)}
.ak-dunkel .ak-fuss{color:rgba(255,255,255,.66)}
.ak-dunkel .ak-fuss .ak-pf{color:var(--lime)}

/* Grund 3 — die Hervorhebung (Steuerwerk-Haken, 02.09.2026, Andreas:
   „diese Kachel muss hervorgehoben werden"). Lime mit Tinte: dieselbe
   Größe, derselbe Aufbau, dieselben Linienhöhen — nur der Grund knallt.
   Eine je Spur; zwei nebeneinander heben nichts mehr hervor. */
.ak-lime{background:var(--lime);color:var(--pine)}
.ak-lime .ak-dach{color:var(--pine)}
.ak-lime h3{color:var(--tinte)}
.ak-lime p{color:rgba(7,48,31,.78)}
.ak-lime .ak-fuss{color:rgba(7,48,31,.75)}
.ak-lime .ak-fuss .ak-pf{color:var(--pine)}
.ak-lime .ak-tag{color:var(--pine)}
.ak-lime .ak-monat{color:rgba(7,48,31,.66);border-bottom-color:rgba(7,48,31,.3)}
.ak-lime .ak-stempel{background:rgba(7,48,31,.16);color:var(--pine);
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* Körper 1 — das Datum. Die Linie darunter liegt auf 156 px, also genau
   dort, wo bei den Bildkarten das Bild endet. */
.ak-tag{font-family:var(--anzeige);font-weight:700;letter-spacing:-.04em;line-height:.86;
  font-size:46px;color:var(--lime);margin-top:4px;display:block}
.ak-monat{font-family:var(--lauf);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:7px;display:block;
  padding-bottom:64px;border-bottom:1px solid var(--hairline-dunkel);margin-bottom:20px}
/* Genau eine Zeile: Eine zweite schöbe die Linie aus der Flucht, in der
   alle Karten stehen (156 px). Die Klemme sitzt auf dem Innen-Element —
   auf .ak-monat selbst malt line-clamp den weggeklemmten Rest sichtbar in
   die 64-px-Padding-Zone (WebKit, gesehen 02.09.2026). */
.ak-monat-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}

/* Der Störer — der Aufruf in der freien Fläche (02.09.2026). Bei der
   Terminkarte sitzt er in der Zone, die die große Ziffer offenlässt:
   .ak-monat trägt sie als padding-bottom, deshalb wird der Innenabstand
   um genau das gekürzt, was die Pille samt Luft einnimmt (16 + 27 + 21
   = 64) — die Linie bleibt in ihrer Flucht auf 156 px. Bei allen anderen
   Karten schiebt ihn margin-top:auto ans untere Ende; die Fußzeile gibt
   dafür ihr eigenes auto ab, sonst teilten sich beide den Rest. */
.ak-badge{align-self:flex-start;display:inline-block;padding:8px 13px;border-radius:var(--r-pill);
  font-family:var(--anzeige);font-weight:700;font-size:11px;line-height:1;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  background:var(--tanne);color:var(--weiss)}
.ak-monat-badge{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:21px}
.ak-monat-badge .ak-badge{margin-top:16px}
.ak-satz>.ak-badge{margin-top:auto}
.ak-satz>.ak-badge+.ak-fuss{margin-top:14px}
.ak-dunkel .ak-badge{background:var(--lime);color:var(--pine)}
.ak-lime .ak-badge{background:var(--pine);color:var(--lime)}

/* Körper 2 — das Bild oben */
.ak-bildfeld{height:155px;overflow:hidden;flex:none;background:var(--mint)}
.ak-bildfeld img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-lang) var(--ease)}
a.ak-k:hover .ak-bildfeld img{transform:scale(1.045)}

/* Körper 3 — das ganze Bild (Bericht, Film) */
.ak-voll{background:var(--pine)}
.ak-voll > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-lang) var(--ease)}
a.ak-voll:hover > img{transform:scale(1.05)}
/* Der Schleier muss den Text tragen, nicht nur das Bild abdunkeln: Bei
   einem dreizeiligen Titel mit Vorspann reicht die Karte weit ins Helle
   hinauf, und weisse Schrift auf sonnigem Gruen ist dort nicht mehr
   lesbar. Oben bleibt das Bild frei, ab 38 % traegt der Verlauf. */
.ak-schleier{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,48,31,.08) 0%,rgba(7,48,31,.55) 34%,rgba(7,48,31,.95) 70%)}
/* Die Dachzeile sitzt auch hier auf 176 px — derselben Linie wie bei den
   Karten mit Bildstreifen und bei den Terminkarten. Vorher fing der
   Textblock unten an und wanderte mit seiner Länge nach oben: Zwei
   Bildkarten nebeneinander hatten ihre grüne Zeile auf zwei verschiedenen
   Höhen (Andreas, 23.08.2026). Statt von unten zu wachsen, steht der Satz
   jetzt fest und wird geklemmt. */
.ak-voll .ak-satz{position:relative;margin-top:0;height:100%;padding-top:176px}
.ak-voll .ak-dach{color:var(--lime)}
.ak-voll h3{color:var(--weiss);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ak-voll p{color:rgba(255,255,255,.76);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ak-voll .ak-fuss{color:rgba(255,255,255,.7);padding-top:14px}
.ak-voll .ak-fuss .ak-pf{color:var(--lime)}

/* Der Abspielring: dieselbe Haarlinie wie überall, kein farbiger Knopf. */
.ak-ring{position:absolute;left:50%;top:24%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);
  display:grid;place-items:center;color:var(--weiss);font-size:14px;padding-left:3px;
  transition:transform var(--t-mittel) var(--ease),background var(--t-mittel) var(--ease)}
a.ak-voll:hover .ak-ring{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.14)}

/* Der einzige Sonderfall: eine Lime-Kante über dem Hinweis, der sonst
   nichts hat, woran das Auge hängenbleibt. */
.ak-kante{height:3px;background:var(--lime);flex:none}

/* ── Die eigene Seite /aktuelles ─────────────────────────────────────────
   Sie hat keine Bühne, also muss der Kopf selbst unter der Kopfleiste
   durchkommen — dieselben Werte wie auf den Rechtsseiten (recht.css). */
.aks-oben{padding-top:150px}
@media (min-width:901px){ .aks-oben{padding-top:196px} }
/* Luft vor dem Fuß. Die Seite hat keine Bühne und keinen Abschlussblock —
   ohne diesen Rand klebte „« Alle Meldungen" direkt auf der dunklen Fläche
   des Fußbereichs (23.08.2026). Dieselbe Größenordnung wie auf den
   Rechtsseiten (recht.css). */
.aks-unten{padding-bottom:clamp(64px,8vw,110px)}
.aks-lead{padding-inline:var(--inset);margin:12px 0 26px;max-width:68ch;font-size:18px;
  line-height:1.6;color:var(--sekundaer)}
.aks-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;padding-inline:var(--inset)}
.aks-raster .ak-k{width:auto}
.aks-leer{padding-inline:var(--inset);color:var(--muted)}

/* padding-inline statt padding: Die Kurzform würde das padding-top
   von .aks-oben zurücksetzen — und der Kopf läge unter der Kopfleiste. */
/* 74 Zeichen wie auf den Rechtsseiten: Darüber verliert das Auge beim
   Zeilenwechsel die Spur. Links ausgerichtet, nicht mittig — Asymmetrie ist
   auf dieser Website der Normalfall. */
.aks-bericht{padding-inline:var(--inset);max-width:calc(74ch + 2 * var(--inset));margin:0}
.aks-bericht .aks-meta{font-family:var(--lauf);font-weight:600;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gruen)}
.aks-bericht h1{font-family:var(--anzeige);font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em;font-size:clamp(30px,5.2vw,54px);line-height:.96;color:var(--tinte);
  margin:14px 0 0;text-wrap:balance}
.aks-bericht .aks-vorspann{font-size:19px;line-height:1.55;color:var(--sekundaer);margin:16px 0 0}
.aks-bild{margin:34px 0 0;overflow:hidden}
.aks-bild img{width:100%;height:auto;display:block}
.aks-text{margin:30px 0 0;font-size:17px;line-height:1.7;color:var(--text)}
.aks-text p{margin:0 0 1.1em}
.aks-text h2{font-family:var(--anzeige);font-weight:700;font-size:23px;color:var(--tinte);
  margin:1.6em 0 .5em;letter-spacing:-.01em}
.aks-text a{color:var(--gruen)}
.aks-zurueck{margin:40px 0 0;font-family:var(--lauf);font-weight:600;font-size:14px}
.aks-zurueck a{color:var(--gruen);text-decoration:none}
.aks-zurueck a:hover{text-decoration:underline}

/* ============================================================
   Das Blatt — ein Bericht über der Seite
   ============================================================

   Bauart wie der Ergebnisbogen der Turniere: natives <dialog>, der Grund
   dahinter unscharf. Nur die Farben sind andere — die Meldung ist ein
   Lesetext auf Papier, nicht eine Tafel auf Dunkel, und sie soll genauso
   aussehen wie auf ihrer eigenen Seite.

   Angelegt wird das Blatt von seite.js, erst wenn wirklich eine Kachel
   angetippt wird; im Markup steht es nirgends. */
.ak-blatt{border:0;padding:0;background:transparent;color:var(--text);
  width:min(760px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);margin:auto}
.ak-blatt::backdrop{background:rgba(7,32,21,.5);
  backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
.ak-blatt[open]{animation:akBlattAuf .32s var(--ease) both}
.ak-blatt[open]::backdrop{animation:akBlattGrund .32s var(--ease) both}
@keyframes akBlattAuf{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes akBlattGrund{from{opacity:0}to{opacity:1}}

.ak-blatt-huelle{position:relative;background:var(--weiss,#fff);border-radius:var(--r-karte,14px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);max-height:calc(100vh - 24px);
  overflow:hidden;display:flex;flex-direction:column}
.ak-blatt-inhalt{overflow:auto;overscroll-behavior:contain;padding:38px 0 44px}
.ak-blatt-inhalt:focus{outline:none}
.ak-blatt-inhalt:focus-visible{outline:2px solid var(--gruen,#1F8446);outline-offset:-2px}
/* Auf der eigenen Seite schiebt .aks-oben den Bericht unter die Kopfleiste.
   Im Blatt gibt es keine — dort zählt der Rand der Hülle. */
.ak-blatt .aks-bericht{padding-top:0;max-width:none}
.ak-blatt .aks-bericht h2{font-family:var(--anzeige);font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em;font-size:clamp(26px,3.6vw,40px);line-height:1;color:var(--tinte);
  margin:14px 0 0;text-wrap:balance}
.ak-blatt .aks-bild{margin-top:28px}

/* Der Schließen-Knopf schwimmt über dem Text — er darf nie wegscrollen. */
.ak-blatt-zu{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(11,65,43,.18);color:var(--tinte);
  transition:background .2s,color .2s,border-color .2s}
.ak-blatt-zu:hover,.ak-blatt-zu:focus-visible{background:var(--gruen);border-color:var(--gruen);color:#fff}
.ak-blatt-laedt{padding:60px var(--inset);text-align:center;color:var(--muted)}

/* Solange das Blatt offen ist, scrollt die Seite dahinter nicht mit. */
html.ak-blatt-offen{overflow:hidden}

/* Die Kachel ist jetzt ein Knopf in Linkform — der Zeiger sagt das auch. */
.ak-k[data-ak-blatt]{cursor:pointer}

@media (max-width:640px){
  /* Auf dem Telefon kommt das Blatt von UNTEN und ist nur so hoch wie sein
     Text — höchstens 92 % des Schirms. Der Streifen unscharfer Seite, der
     oben stehen bleibt, ist der ganze Witz: Er sagt, dass die Startseite
     noch da ist und man gleich wieder dort steht. Als Vollbild sah es aus
     wie ein Seitenwechsel, und genau den wollten wir loswerden. */
  .ak-blatt{width:100vw;max-height:92vh;margin:auto 0 0}
  .ak-blatt-huelle{border-radius:var(--r-karte,14px) var(--r-karte,14px) 0 0;max-height:92vh}
  .ak-blatt-inhalt{padding:26px 0 calc(34px + env(safe-area-inset-bottom))}
  .ak-blatt-zu{top:12px;right:12px;width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .ak-blatt[open],.ak-blatt[open]::backdrop{animation:none}
}

/* Der Veröffentlichungsstempel — oben rechts auf jeder Karte (25.08.2026).
   Absolut gesetzt, damit er die Flucht der Karten nicht anfasst: Dachzeile
   und Trennlinie stehen bei allen Sorten auf derselben Höhe. Er liegt auch
   über Bildern, deshalb trägt er seinen eigenen dunklen Grund; auf der
   Tannenkarte genügt eine helle Andeutung. */
.ak-stempel{position:absolute;top:12px;right:12px;z-index:3;
  font-family:var(--lauf);font-weight:600;font-size:10.5px;letter-spacing:.08em;
  padding:5px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(7,48,31,.62);color:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ak-dunkel .ak-stempel{background:rgba(255,255,255,.13);color:rgba(255,255,255,.78);
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* Dachzeile und Stempel auf einer Höhe: Der Text macht Platz, statt darunter
   zu verschwinden — der Stempel liegt absolut über der Karte. */
.ak-eng-oben .ak-dach{padding-right:86px}