/* =====================================================================
   Changelog-Seite: Übersicht /changelog und Artikel
   /changelog/<bereich>/<slug>. Umsetzung des freigegebenen Entwurfs
   „Mischung B + C“ mit Versionstafel und Tag-Stil „Startplatz“
   (docs/superpowers/specs/2026-09-19-changelog-seite-entwurf/).

   Alle Klassen tragen das Präfix cl-. Etiketten (.cl-tag, .cl-version,
   .cl-neu, .cl-zaehler) und der Inhalt (.cl-inhalt) werden auch in der
   Admin-Liste und im Editor benutzt und kommen deshalb ohne den
   Seiten-Reset (.cl-seite) aus.
   ===================================================================== */

@font-face { font-family: 'Druk Cond Super'; src: url('/fonts/Druk Cond Web Super Italic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Helvetica Neue'; src: url('/fonts/HelveticaNeueMedium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Helvetica Neue'; src: url('/fonts/HelveticaNeueBold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --cl-flaeche: #111111;
  --cl-linie: rgba(255, 255, 255, 0.08);
  --cl-linie-2: rgba(255, 255, 255, 0.14);
  --cl-linie-amber: rgba(255, 181, 51, 0.18);
  --cl-text-2: #cccccc;
  --cl-text-3: #9a9a9a;
  --cl-text-4: #858585;
  --cl-amber: #ffb533;
  --cl-amber-dunkel: #e6a02e;

  /* Bereiche */
  --cl-lm: #ffb533;
  --cl-tel: #4cc9f0;

  /* Abschnitte im Inhalt */
  --cl-neu: #57f287;
  --cl-verbessert: #ffb533;
  --cl-behoben: #8b9aff;
  --cl-entfernt: #ed4245;

  --cl-display: 'Druk Cond Super', 'Titillium Web', sans-serif;
  --cl-ui: 'Titillium Web', sans-serif;
  --cl-body: 'Poppins', sans-serif;
  --cl-nav: 'Helvetica Neue', 'Poppins', sans-serif;
}

.cl-bereich-lm { --farbe: var(--cl-lm); }
.cl-bereich-tel { --farbe: var(--cl-tel); }

[data-abschnitt="neu"], .cl-farbe-neu { --c: var(--cl-neu); }
[data-abschnitt="verbessert"], .cl-farbe-verbessert { --c: var(--cl-verbessert); }
[data-abschnitt="behoben"], .cl-farbe-behoben { --c: var(--cl-behoben); }
[data-abschnitt="entfernt"], .cl-farbe-entfernt { --c: var(--cl-entfernt); }

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

/* ============================ Seite ============================ */
/* Wie landing.css: schwarzer Grund mit Rastermuster. Die Resets stehen in
   :where(), damit Kopf- und Fußzeile (header.css, footer.css) ihre eigenen
   Regeln behalten. */

:where(.cl-seite) *,
:where(.cl-seite) *::before,
:where(.cl-seite) *::after { margin: 0; padding: 0; box-sizing: border-box; }

body.cl-seite {
  margin: 0;
  font-family: var(--cl-body);
  background: #111111;
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-text-size-adjust: 100%;
}
body.cl-seite::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #000 url('/assets/1070077_7063.svg?v=4') repeat;
}
:where(body.cl-seite) > * { position: relative; z-index: 1; }
:where(.cl-seite) a { color: inherit; text-decoration: none; }
/* Kein allgemeines img { max-width: 100% }: In schrumpfenden Flex-Knöpfen
   (Login in der Kopfzeile) fiele das Bild sonst auf 0 Breite. */
:where(.cl-seite) button,
:where(.cl-seite) input,
:where(.cl-seite) select { font: inherit; color: inherit; }
:where(.cl-seite) button { background: none; border: 0; cursor: pointer; }
.cl-seite :focus-visible { outline: 2px solid var(--cl-amber); outline-offset: 2px; }
html:has(body.cl-seite) { scroll-behavior: smooth; }

.cl-rahmen { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 60px); }

/* ===================== Etiketten „Startplatz“ =====================
   Die aufgemalten Startplatz-Markierungen: dicker Strich vorn, dünne Linien
   nach hinten, hinten offen. Kursiv wie die Navigation. Keine Rundungen. */

.cl-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 18px 3px 11px;
  font-family: var(--cl-ui);
  font-weight: 700;
  font-style: italic;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--farbe) 22%, rgba(0, 0, 0, 0.6)), rgba(0, 0, 0, 0.35) 78%, transparent);
  border: solid transparent;
  border-width: 1px 0;
  border-image: linear-gradient(90deg, var(--farbe) 0%, color-mix(in srgb, var(--farbe) 55%, transparent) 55%, transparent 100%) 1;
  box-shadow: inset 3px 0 0 var(--farbe);
}

.cl-version {
  display: inline-block;
  padding: 3px 14px 3px 9px;
  font-family: var(--cl-ui);
  font-style: italic;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 85%);
  border: solid transparent;
  border-width: 1px 0;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.18) 60%, transparent) 1;
  box-shadow: inset 2px 0 0 #fff;
}

.cl-neu {
  display: inline-block;
  padding: 3px 15px 3px 8px;
  font-family: var(--cl-ui);
  font-weight: 900;
  font-style: italic;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: #111;
  background: var(--cl-amber);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.cl-datum { color: var(--cl-text-3); font-size: 13px; white-space: nowrap; }

.cl-zaehler { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13px; color: var(--cl-text-3); }
.cl-zaehler > span { white-space: nowrap; }
.cl-zaehler > span::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  background: var(--c);
  transform: skewX(-14deg);
}
.cl-zaehler b { color: #fff; font-weight: 600; }

/* ========================= Knöpfe, Eingaben ========================= */

.cl-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--cl-linie-2);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--cl-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.cl-knopf:hover { border-color: rgba(255, 181, 51, 0.5); background: rgba(255, 181, 51, 0.08); }
.cl-knopf svg { width: 16px; height: 16px; flex-shrink: 0; }

.cl-lesen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--cl-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cl-amber);
  white-space: nowrap;
}
.cl-lesen svg { width: 16px; height: 16px; transition: transform 0.2s; }

/* Umschalter Alle / League Manager / Telemetry */
.cl-segmente {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cl-linie-2);
}
.cl-segmente button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 14px;
  font-family: var(--cl-ui);
  font-weight: 700;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-text-2);
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.cl-segmente button:hover { color: #fff; }
.cl-segmente button img { height: 18px; width: auto; }
.cl-segmente button small { font-size: 11.5px; color: var(--cl-text-4); margin-left: 2px; font-weight: 700; }
.cl-segmente button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 181, 51, 0.24), rgba(255, 181, 51, 0.04));
  box-shadow: inset 3px 0 0 var(--cl-amber), inset 0 1px 0 rgba(255, 181, 51, 0.5), inset 0 -1px 0 rgba(255, 181, 51, 0.5);
}
.cl-segmente button[aria-pressed="true"] small { color: var(--cl-amber); }

.cl-auswahl {
  min-height: 42px;
  padding: 6px 34px 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--cl-linie-2);
  background: rgba(0, 0, 0, 0.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb533' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
  appearance: none;
  -webkit-appearance: none;
  font-size: 13.5px;
  color: var(--cl-text-2);
  cursor: pointer;
}
.cl-auswahl option { background: #111; color: #fff; }

.cl-eingabe {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px 10px 38px;
  border-radius: 8px;
  border: 1px solid var(--cl-linie-2);
  background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 12px center / 16px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  font-size: 14px;
  color: #fff;
}
.cl-eingabe::placeholder { color: var(--cl-text-4); }
.cl-eingabe:focus { outline: none; border-color: rgba(255, 181, 51, 0.6); }

/* =========================== Kopf =========================== */

.cl-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; padding-top: 30px; }
.cl-h1 {
  font-family: var(--cl-display);
  font-style: italic;
  font-weight: 900;
  font-size: 5.2rem;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.cl-h1 span { color: var(--cl-amber); }
.cl-untertitel { color: var(--cl-text-3); font-size: 15px; margin-top: 8px; }

.cl-discord {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 470px;
  padding: 12px 14px 12px 16px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(88, 101, 242, 0.06));
  border: 1px solid rgba(88, 101, 242, 0.45);
  border-radius: 12px;
}
.cl-discord > svg { width: 34px; height: 26px; color: #8b9aff; flex-shrink: 0; }
.cl-discord p { font-size: 13px; line-height: 1.45; color: #d4d8ff; }
.cl-discord p b { display: block; color: #fff; font-size: 14px; }
.cl-discord-knopf {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 8px;
  background: #5865F2;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s;
}
.cl-discord-knopf:hover { background: #4752C4; }

/* ======================== Versionstafel ========================
   Das neueste Update je Bereich, League Manager links, Telemetry rechts.
   Beide Felder sind immer gleich hoch (Grid streckt die Zeile). */

.cl-oben { margin-top: 24px; }
.cl-tafel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cl-tafel-feld {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 26px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--farbe) 11%, #121212), #0a0a0a 65%);
  border: 1px solid var(--cl-linie-2);
  box-shadow: inset 0 3px 0 var(--farbe);
  transition: border-color 0.2s, transform 0.2s;
}
a.cl-tafel-feld:hover { border-color: color-mix(in srgb, var(--farbe) 55%, transparent); transform: translateY(-1px); }
a.cl-tafel-feld:hover .cl-lesen svg { transform: translateX(3px); }
.cl-tafel-kunst {
  position: absolute;
  z-index: -1;
  right: -40px;
  top: 50%;
  height: 125%;
  width: auto;
  max-width: none;
  transform: translateY(-50%) rotate(-10deg);
  opacity: 0.09;
  filter: invert(1);
  pointer-events: none;
}
.cl-tafel-kunst.mark { filter: grayscale(1) brightness(2); opacity: 0.07; right: -30px; }
.cl-tafel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cl-tafel-wort { height: 22px; width: auto; }
.cl-tafel-etikett { font-family: var(--cl-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cl-text-3); }
.cl-tafel-version {
  margin-top: 6px;
  font-family: var(--cl-display);
  font-style: italic;
  font-weight: 900;
  font-size: 86px;
  line-height: 0.88;
  letter-spacing: 0.01em;
  color: var(--farbe);
  overflow-wrap: anywhere;
}
.cl-tafel-version.cl-lang { font-size: 56px; }
.cl-tafel-version small { font-size: 0.42em; color: var(--cl-text-3); margin-right: 4px; }
.cl-tafel-titel { font-family: var(--cl-ui); font-weight: 900; font-size: 22px; line-height: 1.2; }
.cl-tafel-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 13px; color: var(--cl-text-3); }
.cl-tafel-fuss { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cl-tafel-leer { color: var(--cl-text-3); font-size: 14px; line-height: 1.6; margin-top: auto; }
.cl-tafel-feld.cl-ohne .cl-tafel-version { color: color-mix(in srgb, var(--farbe) 35%, transparent); }

/* ========================= Filterleiste =========================
   Haftet oben. Liegt direkt unter body - in einem Abschnitt würde sie nur
   innerhalb dieses Abschnitts haften. */

.cl-steuerung {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-top: 30px;
  background: rgba(6, 6, 6, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--cl-linie);
  border-bottom: 1px solid var(--cl-linie-amber);
}
.cl-steuerung-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.cl-steuerung .cl-segmente { flex: 0 0 auto; }
.cl-steuerung .cl-auswahl { flex: 0 0 auto; }
.cl-steuerung .cl-eingabe { flex: 1 1 220px; width: auto; min-width: 160px; }

/* ========================== Zeitleiste ========================== */

.cl-rumpf { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 48px; margin-top: 28px; align-items: start; }

.cl-feed { position: relative; min-width: 0; }
.cl-feed::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 60px;
  left: 127px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 181, 51, 0.55), rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.06));
}
.cl-feed.cl-feed-leer::before { display: none; }

.cl-monat { display: grid; grid-template-columns: 110px 36px 1fr; align-items: center; margin: 8px 0 18px; }
.cl-monat::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 8px;
  height: 8px;
  background: #444;
  transform: rotate(45deg);
  position: relative;
  z-index: 1;
}
.cl-monat h2 {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--cl-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cl-text-3);
}

.cl-eintrag { display: grid; grid-template-columns: 110px 36px minmax(0, 1fr); margin-bottom: 26px; scroll-margin-top: 90px; }
.cl-wann { text-align: right; padding-top: 16px; }
.cl-wann-tag { display: block; font-family: var(--cl-ui); font-weight: 900; font-size: 34px; line-height: 1; }
.cl-wann-monat { display: block; margin-top: 4px; font-family: var(--cl-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cl-text-3); }
.cl-wann-jahr { display: block; margin-top: 2px; font-size: 11px; color: var(--cl-text-4); }
.cl-knoten {
  justify-self: center;
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: 22px;
  border-radius: 50%;
  background: var(--farbe);
  box-shadow: 0 0 0 4px #000, 0 0 0 5px color-mix(in srgb, var(--farbe) 45%, transparent), 0 0 18px color-mix(in srgb, var(--farbe) 50%, transparent);
}

.cl-karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
  padding: 18px;
  border-radius: 12px;
  background: var(--cl-flaeche);
  border: 1px solid var(--cl-linie-2);
  transition: border-color 0.2s, transform 0.2s;
}
.cl-karte:hover { border-color: color-mix(in srgb, var(--farbe) 55%, transparent); transform: translateY(-1px); }
.cl-karte:hover .cl-lesen svg { transform: translateX(3px); }
.cl-karte-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cl-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cl-karte-kopf .cl-datum-handy { display: none; }
.cl-karte h3 { margin-top: 4px; font-family: var(--cl-ui); font-weight: 900; font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.cl-karte p {
  color: var(--cl-text-2);
  font-size: 14.5px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cl-karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.cl-karte-bild { align-self: start; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; border: 1px solid var(--cl-linie); }
.cl-karte-bild .cl-cover { width: 100%; height: 100%; }
.cl-karte-bild .cl-cover-bild { object-position: 70% 30%; }

.cl-feed-hinweis { padding: 30px 0 30px 146px; color: var(--cl-text-3); }
.cl-laden { display: flex; justify-content: center; margin: 6px 0 0 146px; }

/* Seitenschiene „Springen zu“ */
.cl-schiene { position: sticky; top: 86px; display: grid; gap: 14px; }
.cl-sprungbox { padding: 14px 0 10px; border-radius: 10px; background: var(--cl-flaeche); border: 1px solid var(--cl-linie-2); }
.cl-sprungbox h2 { padding: 0 16px 8px; font-family: var(--cl-nav); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cl-amber); }
.cl-sprungliste { max-height: calc(100vh - 260px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.cl-sprungjahr { padding: 10px 16px 4px; font-family: var(--cl-nav); font-weight: 700; font-size: 13px; color: var(--cl-text-3); }
.cl-sprung {
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 12.5px;
  color: var(--cl-text-2);
}
.cl-sprung:hover { background: rgba(255, 181, 51, 0.06); color: #fff; }
.cl-sprung i { width: 8px; height: 8px; border-radius: 50%; background: var(--farbe); }
.cl-sprung b { font-family: var(--cl-ui); font-weight: 700; font-size: 12.5px; color: #fff; }
.cl-sprung span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ======================== Titelbild / Grafik ======================== */

.cl-cover { position: relative; overflow: hidden; }
.cl-cover-bild { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Erzeugtes Banner: Grund und Schein wie im PNG (public/js/changelog/banner.js),
   darin das Display als SVG. */
.cl-banner {
  display: grid;
  place-items: center;
  background:
    radial-gradient(90% 115% at 30% 0%, color-mix(in srgb, var(--farbe) 34%, transparent), color-mix(in srgb, var(--farbe) 8%, transparent) 42%, transparent 72%),
    repeating-linear-gradient(-32deg, rgba(255, 255, 255, 0.035) 0 1.2px, transparent 1.2px 14px),
    linear-gradient(135deg, #1d1d1d, #090909 62%, #050505);
}
.cl-banner > svg { width: 100%; height: 94%; }
/* In den Kacheln liegen Bereichs-Etikett und Neu-Marke oben auf dem Bild:
   das Display rückt nach unten, damit die LED-Reihe frei bleibt. */
.cl-kachel-bild .cl-banner > svg { height: 78%; align-self: end; }

/* ============================ Artikel ============================ */

.cl-vorschau-hinweis {
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #ffd58a;
  background: rgba(255, 181, 51, 0.14);
  border-top: 1px solid rgba(255, 181, 51, 0.35);
  border-bottom: 1px solid rgba(255, 181, 51, 0.35);
}
.cl-vorschau-hinweis[hidden] { display: none; }

.cl-artikel-kopf { position: relative; display: flex; align-items: flex-end; min-height: 470px; isolation: isolate; border-bottom: 1px solid var(--cl-linie-2); }
.cl-artikel-kopf:empty { min-height: 0; border: 0; }
.cl-artikel-kopf > .cl-cover { position: absolute; inset: 0; z-index: -2; }
.cl-artikel-kopf .cl-cover-bild { object-position: center 30%; }
.cl-artikel-kopf:not(:empty)::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6) 45%, #000 96%); }
/* Banner im Kopf: Display rechts am Inhaltsrand, links Platz für den Text */
.cl-artikel-kopf.cl-kopf-banner::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.5) 44%, rgba(0, 0, 0, 0) 66%), linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, 0.55));
}
.cl-artikel-kopf > .cl-banner { justify-items: end; padding: 0 clamp(16px, 4vw, 60px); }
.cl-artikel-kopf > .cl-banner > svg {
  width: min(48%, 620px);
  height: 78%;
  margin-right: max(calc((100% - 1320px) / 2), 0px);
}
/* Titel und Kurztext dürfen nicht unter das Display laufen */
.cl-artikel-kopf.cl-kopf-banner .cl-artikel-h1,
.cl-artikel-kopf.cl-kopf-banner .cl-artikel-teaser { max-width: min(620px, 48%); }
.cl-artikel-kopf .cl-rahmen { width: 100%; padding-bottom: 34px; }
.cl-zurueck { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 14px; color: var(--cl-text-2); }
.cl-zurueck svg { width: 16px; height: 16px; }
.cl-zurueck:hover { color: var(--cl-amber); }
.cl-artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cl-artikel-h1 {
  max-width: 1000px;
  margin-top: 14px;
  font-family: var(--cl-display);
  font-style: italic;
  font-weight: 900;
  font-size: 4.4rem;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}
.cl-artikel-teaser { max-width: 760px; margin-top: 14px; font-size: 18px; line-height: 1.6; color: #ddd; }

.cl-abschnittsleiste { display: none; }

.cl-artikel { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 56px; justify-content: center; margin-top: 44px; align-items: start; }
.cl-seitenbox { position: sticky; top: 24px; display: grid; gap: 14px; }
.cl-seitenbox:empty { display: none; }
.cl-box { padding: 16px 18px; border-radius: 12px; background: var(--cl-flaeche); border: 1px solid var(--cl-linie-2); }
.cl-box h2 { margin-bottom: 10px; font-family: var(--cl-nav); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cl-amber); }
.cl-toc a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--cl-text-2); border-top: 1px solid var(--cl-linie); }
.cl-toc a:first-of-type { border-top: 0; }
.cl-toc a:hover { color: #fff; }
.cl-toc i { width: 3px; height: 18px; background: var(--c); transform: skewX(-14deg); }
.cl-toc b { margin-left: auto; font-family: var(--cl-ui); color: #fff; }
.cl-daten { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13.5px; }
.cl-daten dt { color: var(--cl-text-4); }
.cl-daten dd { color: #fff; text-align: right; }
.cl-box .cl-knopf { width: 100%; margin-top: 14px; }

.cl-weiter { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 50px; }
.cl-weiter:empty { display: none; }
.cl-weiter > a,
.cl-weiter > div { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 12px; background: var(--cl-flaeche); border: 1px solid var(--cl-linie-2); transition: border-color 0.2s; }
.cl-weiter > a:hover { border-color: rgba(255, 181, 51, 0.5); }
.cl-weiter .cl-cover { width: 120px; flex-shrink: 0; aspect-ratio: 16 / 10; border-radius: 8px; }
.cl-weiter small { display: block; font-family: var(--cl-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cl-amber); }
.cl-weiter b { display: block; margin-top: 4px; font-size: 15px; line-height: 1.35; }
.cl-weiter span { font-size: 12.5px; color: var(--cl-text-4); }
.cl-weiter .cl-rechts { flex-direction: row-reverse; text-align: right; }
.cl-weiter .cl-leer { opacity: 0.45; }

.cl-abschnitt-titel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 16px;
  font-family: var(--cl-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cl-abschnitt-titel:empty { display: none; }
.cl-abschnitt-titel::after { content: ''; flex: 1; align-self: center; height: 2px; background: linear-gradient(90deg, rgba(255, 181, 51, 0.6), transparent); }

/* Kacheln „Mehr aus …“ */
.cl-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cl-kachel { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: var(--cl-flaeche); border: 1px solid var(--cl-linie-2); transition: border-color 0.2s, transform 0.2s; }
.cl-kachel:hover { border-color: color-mix(in srgb, var(--farbe) 55%, transparent); transform: translateY(-2px); }
.cl-kachel-bild { position: relative; }
.cl-kachel-bild .cl-cover { aspect-ratio: 16 / 9; }
.cl-kachel-bild .cl-cover-bild { object-position: center 30%; }
.cl-kachel-bild .cl-tag { position: absolute; left: 12px; top: 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cl-kachel-bild .cl-neu { position: absolute; right: 12px; top: 12px; }
.cl-kachel-rumpf { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.cl-kachel-meta { display: flex; align-items: center; gap: 10px; }
.cl-kachel h3 { font-family: var(--cl-ui); font-weight: 900; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.cl-kachel p { color: var(--cl-text-3); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-kachel .cl-zaehler { margin-top: auto; padding-top: 6px; font-size: 12.5px; }

.cl-fehlerseite { max-width: 640px; margin: 80px auto; padding: 0 16px; text-align: center; }
.cl-fehlerseite p { color: var(--cl-text-2); font-size: 16px; margin-bottom: 20px; }

/* ====================== Inhalt eines Eintrags ======================
   Das gesäuberte HTML aus dem Editor. Ohne Seiten-Reset lauffähig
   (auch im Editor benutzt). */

.cl-inhalt { font-size: 15.5px; line-height: 1.75; color: var(--cl-text-2); overflow-wrap: break-word; }
.cl-inhalt > * { margin-top: 0; margin-bottom: 0; }
.cl-inhalt > * + * { margin-top: 16px; }
.cl-inhalt p strong, .cl-inhalt li strong { color: #fff; font-weight: 600; }
.cl-inhalt a { color: var(--cl-amber); font-weight: 600; text-decoration: none; }
.cl-inhalt a:hover { text-decoration: underline; }
.cl-inhalt em { color: #e6e6e6; }
.cl-inhalt ul, .cl-inhalt ol { padding-left: 22px; }
.cl-inhalt li + li { margin-top: 8px; }
.cl-inhalt li::marker { color: var(--cl-amber); }
.cl-inhalt code { padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, Consolas, monospace; font-size: 0.88em; color: #fff; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--cl-linie); }
.cl-inhalt blockquote { padding: 4px 0 4px 16px; border-left: 3px solid var(--cl-linie-2); color: #e0e0e0; font-style: italic; }
.cl-inhalt > h2 { margin-top: 34px; font-family: var(--cl-ui); font-weight: 900; font-size: 24px; line-height: 1.2; color: #fff; }
.cl-inhalt hr { height: 1px; margin: 30px 0; border: 0; background: linear-gradient(90deg, transparent, var(--cl-linie-2), transparent); }

/* Abschnitt: Neu / Verbessert / Behoben / Entfernt */
.cl-inhalt > h3.cl-abschnitt {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
  scroll-margin-top: 90px;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.5;
}
.cl-inhalt > h3.cl-abschnitt:first-child { margin-top: 0; }
.cl-inhalt > h3.cl-abschnitt + ul { margin-top: 14px; }
.cl-inhalt > h3.cl-abschnitt::after {
  content: '';
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent) 0 16px, transparent 16px 26px);
  -webkit-mask: linear-gradient(90deg, #000 30%, transparent);
  mask: linear-gradient(90deg, #000 30%, transparent);
}
.cl-abschnitt-label {
  padding: 5px 26px 5px 14px;
  font-family: var(--cl-ui);
  font-weight: 900;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, transparent), transparent 92%);
  border: solid transparent;
  border-width: 1px 0;
  border-image: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, transparent) 70%, transparent) 1;
  box-shadow: inset 4px 0 0 var(--c);
}
.cl-abschnitt-zahl { font-family: var(--cl-display); font-style: italic; font-weight: 900; font-size: 22px; line-height: 1; color: var(--c); }

/* Hinweis-Box */
.cl-inhalt aside.cl-hinweis {
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 181, 51, 0.06);
  border: 1px solid rgba(255, 181, 51, 0.2);
  border-left: 3px solid var(--cl-amber);
  font-size: 14.5px;
  line-height: 1.65;
}
.cl-inhalt aside.cl-hinweis strong { color: var(--cl-amber); }

/* Bilder: normal = höchstens 560 px breit und mittig, breit = ganze Spalte */
.cl-inhalt figure { margin-top: 26px; margin-bottom: 26px; }
.cl-inhalt figure img,
.cl-inhalt figure video { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--cl-linie-2); }
.cl-inhalt figure.cl-bild img { margin: 0 auto; }
.cl-inhalt figure.cl-bild[data-breite="normal"] img { max-width: min(100%, 560px); }
.cl-inhalt figure.cl-bild[data-breite="breit"] img { width: 100%; }
.cl-inhalt figure.cl-video video { width: 100%; background: #000; }
.cl-inhalt figcaption { margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--cl-text-4); text-align: center; }

/* YouTube: Platzhalter, erst der Klick lädt das Video (Zwei-Klick) */
.cl-yt {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--cl-linie-2);
  background:
    radial-gradient(90% 90% at 80% 10%, rgba(255, 181, 51, 0.16), transparent 60%),
    linear-gradient(160deg, #1a1a1a, #050505 75%);
}
.cl-yt-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  font-family: var(--cl-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}
.cl-yt-play {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 181, 51, 0.96);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s;
}
.cl-yt-play svg { width: 26px; height: 26px; margin-left: 4px; fill: #111; }
.cl-yt-knopf:hover .cl-yt-play { transform: scale(1.06); }
.cl-yt-unten { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; font-size: 12.5px; line-height: 1.4; color: var(--cl-text-3); background: rgba(0, 0, 0, 0.6); }
.cl-yt-unten a { color: var(--cl-text-2); text-decoration: underline; white-space: nowrap; }
.cl-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================ Breiten ============================ */

@media (max-width: 1100px) {
  .cl-rumpf { grid-template-columns: minmax(0, 1fr); }
  .cl-schiene { display: none; }
}

@media (max-width: 900px) {
  .cl-karte { grid-template-columns: minmax(0, 1fr) 180px; }

  /* Artikel: Seitenspalte weicht der haftenden Leiste */
  .cl-artikel { display: block; margin-top: 22px; }
  .cl-seitenbox { display: none; }
  .cl-abschnittsleiste {
    display: flex;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 10px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(8, 8, 8, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--cl-linie);
    border-bottom: 1px solid var(--cl-linie-amber);
  }
  .cl-abschnittsleiste:empty { display: none; }
  .cl-abschnittsleiste::-webkit-scrollbar { display: none; }
  .cl-abschnittsleiste a,
  .cl-abschnittsleiste button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid var(--cl-linie-2);
    font-size: 13px;
    white-space: nowrap;
    color: var(--cl-text-2);
  }
  .cl-abschnittsleiste a i { width: 3px; height: 14px; background: var(--c); transform: skewX(-14deg); }
  .cl-abschnittsleiste a b { font-family: var(--cl-ui); color: #fff; }
  .cl-abschnittsleiste .cl-teilen { margin-left: auto; }
  .cl-abschnittsleiste .cl-teilen svg { width: 15px; height: 15px; }
}

@media (max-width: 768px) {
  /* Kopf */
  .cl-kopf { display: block; padding-top: 20px; }
  .cl-h1 { font-size: 3.6rem; }
  .cl-untertitel { font-size: 14px; }
  .cl-discord { max-width: none; margin-top: 14px; padding: 10px 12px; gap: 10px; }
  .cl-discord > svg { width: 26px; height: 20px; }
  .cl-discord p { font-size: 12.5px; }
  .cl-discord p b { font-size: 13px; }
  .cl-discord-knopf { padding: 8px 12px; font-size: 12px; }

  /* Versionstafel: zwei gleich hohe Felder nebeneinander, nur das Nötigste */
  .cl-oben { margin-top: 18px; }
  .cl-tafel { gap: 10px; }
  .cl-tafel-feld { padding: 14px 12px 12px; gap: 6px; border-radius: 10px; }
  .cl-tafel-wort { height: 13px; }
  .cl-tafel-etikett,
  .cl-tafel-feld .cl-zaehler,
  .cl-tafel-meta .cl-datum-lang { display: none; }
  .cl-tafel-version { font-size: 46px; margin-top: 4px; }
  .cl-tafel-version.cl-lang { font-size: 32px; }
  .cl-tafel-titel { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cl-tafel-meta { font-size: 12px; }
  .cl-tafel-leer { font-size: 12.5px; }
  .cl-tafel-fuss { padding-top: 2px; }
  .cl-tafel-fuss .cl-lesen { font-size: 12px; }
  .cl-tafel-kunst { height: 100%; right: -50px; }

  /* Filterleiste: Bereiche über die ganze Breite, darunter Jahr und Suche */
  .cl-steuerung { margin-top: 22px; }
  .cl-steuerung-innen { gap: 8px; }
  .cl-steuerung .cl-segmente { flex: 1 1 100%; grid-auto-columns: auto; grid-template-columns: auto 1fr 1fr; }
  .cl-segmente button { gap: 5px; padding: 6px; font-size: 12px; letter-spacing: 0.04em; }
  .cl-segmente button img { height: 16px; }
  .cl-segmente button small { display: none; }
  .cl-steuerung .cl-eingabe { flex-basis: 0; min-width: 0; }

  /* Zeitleiste: Linie links, Datum wandert in die Karte */
  .cl-rumpf { display: block; margin-top: 16px; }
  .cl-feed::before { left: 11px; top: 4px; }
  .cl-monat { grid-template-columns: 24px 1fr; margin: 4px 0 12px; }
  .cl-monat::before { grid-column: 1; }
  .cl-monat h2 { grid-column: 2; padding-left: 8px; font-size: 1.3rem; }
  .cl-eintrag { grid-template-columns: 24px minmax(0, 1fr); margin-bottom: 16px; }
  .cl-wann { display: none; }
  .cl-knoten { grid-column: 1; width: 12px; height: 12px; margin-top: 20px; }
  .cl-karte { display: flex; flex-direction: column; gap: 0; margin-left: 8px; padding: 0; overflow: hidden; border-radius: 10px; }
  .cl-karte-bild { order: -1; align-self: stretch; aspect-ratio: 16 / 9; border-radius: 0; border: 0; border-bottom: 1px solid var(--cl-linie); }
  .cl-karte-text { padding: 12px 14px 14px; }
  .cl-karte-kopf .cl-datum-handy { display: inline; }
  .cl-karte h3 { font-size: 20px; }
  .cl-karte p { font-size: 14px; -webkit-line-clamp: 2; }
  .cl-feed-hinweis { padding-left: 32px; }
  .cl-laden { margin-left: 32px; }

  /* Artikel */
  .cl-artikel-kopf { display: block; min-height: 0; border-bottom: 0; }
  .cl-artikel-kopf > .cl-cover { position: relative; inset: auto; z-index: auto; aspect-ratio: 16 / 9; }
  .cl-artikel-kopf:not(:empty)::after { display: none; }
  .cl-artikel-kopf > .cl-banner { justify-items: center; padding: 0; }
  .cl-artikel-kopf > .cl-banner > svg { width: 100%; height: 94%; margin-right: 0; }
  .cl-artikel-kopf.cl-kopf-banner .cl-artikel-h1,
  .cl-artikel-kopf.cl-kopf-banner .cl-artikel-teaser { max-width: none; }
  .cl-artikel-kopf .cl-rahmen { padding-top: 16px; padding-bottom: 18px; }
  .cl-zurueck { margin-bottom: 12px; font-size: 13px; }
  .cl-artikel-h1 { margin-top: 12px; font-size: 2.5rem; text-shadow: none; }
  .cl-artikel-teaser { font-size: 15.5px; }
  .cl-inhalt { font-size: 15px; }
  .cl-weiter { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .cl-weiter .cl-cover { width: 92px; }
  .cl-weiter .cl-rechts { flex-direction: row; text-align: left; }
  .cl-abschnitt-titel { margin: 22px 0 12px; font-size: 1.6rem; }
  .cl-raster { grid-template-columns: 1fr; gap: 14px; }
  .cl-kachel h3 { font-size: 19px; }
  .cl-yt-play { width: 58px; height: 58px; }
  .cl-yt-knopf { font-size: 13px; gap: 8px; }
  .cl-yt-unten { padding: 8px 10px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.cl-seite) { scroll-behavior: auto; }
  .cl-tafel-feld, .cl-karte, .cl-kachel, .cl-lesen svg, .cl-yt-play { transition: none; }
  a.cl-tafel-feld:hover, .cl-karte:hover, .cl-kachel:hover { transform: none; }
}