/*
Theme Name: DJ FALTER
Theme URI: https://djfalter.com
Author: Homepagius Maximus (für Jan Folgmann)
Description: Dunkles Design der djfalter.com-Seite. Startseite mit Anflugtafel,
Fresh Cuts mit Kometen und Mustern, Artikelseiten mit Zahlenblöcken.
Kategoriefarben: release #ED3E86, technik #4FC3F7, software #B388FF, szene #7CD992.
Grundfarben: bg #0A0A0A, Tafel #060606, Blatt #1B1B1E, Rahmen #24242A,
Pink #ED3E86, Schrift #F4F2EC. Skripte: Fallblatt, Glühpunkte, Kometen,
Sprachumschalter — alles eigenes JS/CSS, kein Fremdverkehr, kein Google.
Version: 1.0
Requires at least: 6.0
License: private
Text Domain: djfalter-theme
*/

/* ==== Farben und Grundlage (aus startseite_vorlage.html) ==== */
:root{
  --bg:#0A0A0A; --bg2:#060606; --blatt:#1B1B1E; --blatt-tot:#131315;
  --rahmen:#24242A; --trenn:#1C1C20; --fein:#161618; --naht:#070707;
  --pink:#ED3E86; --hell:#F4F2EC; --grau:#8C8A84; --grau2:#5A5955; --tot:#3F3F3C;
  --safe-bg:#1B3310; --safe-tx:#B8DD8A;
  --plan-bg:#3A2606; --plan-tx:#F6C87A;
  --ann-bg:#3A1414;  --ann-tx:#EDA0A0;
  --bw:13px; --bh:19px;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--hell);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* ---------- Menue ---------- */
nav{display:flex;justify-content:center;align-items:stretch;gap:16px;
  padding:6px 0;border-bottom:1px solid var(--fein)}
nav a{font-family:var(--mono);text-decoration:none;white-space:nowrap;
  display:flex;flex-direction:column;justify-content:center;gap:4px}
nav a.start{color:var(--grau2);font-size:15px;letter-spacing:3px;
  justify-content:center}
nav a.start.aktiv{color:var(--pink)}
/* PARK-FRESH-CUTS-2026-09-16 nav a.news{color:var(--pink);font-size:11px;letter-spacing:2px;line-height:1.1} */
.nav-sub{color:var(--pink);letter-spacing:2px;font-size:11px}
.nav-strich{width:1px;background:var(--pink);flex:0 0 auto;align-self:stretch}
nav a.charts{color:var(--pink);font-size:11px;letter-spacing:2px;line-height:1.1}
nav a.ueber{color:var(--pink);font-size:11px;letter-spacing:2px;line-height:1.1}

/* ---------- Charts ---------- */
.chartliste{display:grid;width:100%}
.chartzeile{display:grid;grid-template-columns:max-content 1fr max-content;
  column-gap:10px;row-gap:2px;align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--fein)}
.chartzeile:last-child{border-bottom:none}
.platz{grid-column:1;grid-row:1;width:14px;min-width:14px;text-align:right;
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--hell);
  line-height:1.3}
.ku{grid-column:2/-1;grid-row:1;font-family:var(--mono);font-size:11px;
  letter-spacing:normal;color:var(--hell);line-height:1.3}
.ti{grid-column:2;grid-row:2;font-family:var(--mono);font-size:11px;
  letter-spacing:normal;color:var(--grau);line-height:1.3}
.se{grid-column:3;grid-row:2;font-family:var(--mono);font-size:10px;
  letter-spacing:1.5px;color:var(--grau2);line-height:1.3;white-space:nowrap}
@media (min-width:650px){
  .chartliste{grid-template-columns:max-content max-content 1fr max-content;
    column-gap:10px}
  .chartzeile{display:contents}
  .platz,.ku,.ti,.se{grid-column:auto;grid-row:auto;padding:8px 0;
    border-bottom:1px solid var(--fein)}
  .ku{white-space:nowrap}
  .ti{white-space:nowrap}
}
.charts-leer{text-align:center;color:var(--grau);font-family:var(--mono);
  font-size:11px;letter-spacing:2px;padding:24px 0}
/* Technik-Meldung aus djfalter_render(), wenn die Schnipsel-Seite fehlt
   oder nicht private ist. Gilt für Tafel, Mixcloud, Fresh-Cuts-Liste,
   Laufband und Charts — eine Klasse, alle Aufrufe. Optisch getrennt vom
   Leer-Satz .charts-leer (Besucher-Zustand, kein Rahmen). */
.djfalter-fehlt{
  max-width:760px;margin:18px auto;padding:12px 18px;
  text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:0;color:var(--grau2);line-height:1.45;
  border:1px solid var(--rahmen);background:var(--bg2)
}
main.djfalter-charts{max-width:760px;margin:0 auto;padding:0 18px;position:relative;z-index:1}

/* ---------- Kopf, mittig ---------- */
header{text-align:center;padding:6px 0 14px;position:relative;overflow:hidden}
h1{font-size:25px;font-weight:500;letter-spacing:6px;margin:0;position:relative;z-index:1}
.claim{color:var(--pink);font-family:var(--mono);font-size:8px;
  letter-spacing:5px;margin:6px 0 0}


/* Gluehpunkte, kriechen wie eine Raupe um den Schriftzug */
.glow-rahmen{position:relative;display:inline-block;padding:11px 28px}
.glow{position:absolute;border-radius:50%;background:var(--pink);
  animation:umlauf 11s ease-in-out infinite, puls .9375s ease-in-out infinite}
.g1{width:4px;height:4px;animation-delay:0s,0s}
.g2{width:4px;height:4px;animation-delay:-.44s,-.234s}
.g3{width:4px;height:4px;animation-delay:-.88s,-.469s}
.g4{width:4px;height:4px;animation-delay:-1.32s,-.703s}
.g5{width:4px;height:4px;animation-delay:-1.76s,-.938s}

/* Zweite Bahn, 7px weiter aussen, gleiche Zeitversaetze, Gegenrichtung */
.bahn-aussen{position:absolute;top:-7px;left:-7px;right:-7px;bottom:-7px;pointer-events:none}
.glow.rev{animation-direction:reverse,normal}
.r1{width:4px;height:4px;animation-delay:0s,0s}
.r2{width:4px;height:4px;animation-delay:-.44s,-.234s}
.r3{width:4px;height:4px;animation-delay:-.88s,-.469s}
.r4{width:4px;height:4px;animation-delay:-1.32s,-.703s}
.r5{width:4px;height:4px;animation-delay:-1.76s,-.938s}

@keyframes umlauf{
  0%   {top:0; left:0}
  25%  {top:0; left:calc(100% - 5px)}
  50%  {top:calc(100% - 5px); left:calc(100% - 5px)}
  75%  {top:calc(100% - 5px); left:0}
  100% {top:0; left:0}
}
@keyframes puls{
  0%,100%{transform:scale(1);
    box-shadow:0 0 5px 1px rgba(237,62,134,.55), 0 0 11px 3px rgba(237,62,134,.18)}
  50%    {transform:scale(1.75);
    box-shadow:0 0 10px 3px rgba(237,62,134,.9), 0 0 22px 8px rgba(237,62,134,.35)}
}


/* Name als Fallblattanzeige */
:root{--nw:29px; --nh:50px; --nschub:-12px}
.name{display:flex;gap:4px;justify-content:center;position:relative;z-index:1}
.nb{position:relative;width:var(--nw);height:var(--nh);border-radius:2px;
  background:#1F1F23;overflow:hidden;flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.6)}
.nb.leer{background:transparent}
.nb::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);
  height:1px;background:#050505;z-index:2}
.nb .nh2{position:absolute;left:0;right:0;height:50%;overflow:hidden}
.nb .nh2.o{top:0}
.nb .nh2.u{bottom:0}
.nb .nh2 span{position:absolute;left:0;right:0;height:var(--nh);
  line-height:var(--nh);text-align:center;font-family:var(--mono);
  font-size:27px;font-weight:700;color:#FFFFFF;letter-spacing:0}
.nb .nh2.o span{top:var(--nschub)}
.nb .nh2.u span{top:calc(var(--nschub) - var(--nh) / 2)}

/* Pegelband hinter dem Kopf */
.pegelband{position:absolute;left:0;right:0;bottom:0;height:52px;
  display:flex;align-items:flex-end;justify-content:center;gap:6px;
  pointer-events:none;opacity:.16;z-index:0}
.pegelband i{width:9px;background:var(--pink);border-radius:1px;
  animation:band 1.875s ease-in-out infinite}
@keyframes band{0%,100%{height:6px}50%{height:56px}}

/* Takt 128 BPM: ein Schlag = 469 ms */
.balken::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;
  opacity:0;animation:takt .9375s ease-out infinite}
@keyframes takt{0%{opacity:.22}22%{opacity:0}100%{opacity:0}}

/* Glitch auf dem Namen, alle 8 s deutlich sichtbar */
.glitch{animation:glitch 8s linear infinite}

/* Glitch-Puls am NÄCHSTE-STREAMS-Etikett (Jan, 15.09., Variante A):
   alle 11 s drei kurze Blitze (60/90/60 ms), Start +5 s nach Seitenrender.
   Periode 11 s (teilerfremd zum 8-s-Schriftzug-Glitch, gemeinsamer Nullpunkt
   alle 88 s; kleinster Abstand der Feuerpunkte 2,1 s, gerechnet). Farben/
   Schrift unverändert — nur translate 2px + Deckkraft aus dem Bestand. */
.einblenden.marke > span:first-child{animation:markenglitzen 11s linear 5s infinite}
@keyframes markenglitzen{
  0%,1.7%,100%{transform:none;opacity:1}
  0.6%{transform:translate(-2px,0);opacity:.55}
  1.1%{transform:translate(2px,0);opacity:1}
  1.4%{transform:translate(-1px,0);opacity:.75}
}
@media (prefers-reduced-motion:reduce){
  .einblenden.marke > span:first-child{animation:none}
}
@keyframes glitch{
  0%,92%,100%{transform:none;opacity:1}
  92.5%{transform:translate(-6px,2px) skewX(-9deg);opacity:.55}
  93.2%{transform:translate(7px,-3px) skewX(8deg);opacity:1}
  93.9%{transform:translate(-4px,1px) skewX(-5deg);opacity:.7}
  94.6%{transform:translate(3px,0) skewX(4deg);opacity:1}
  95.3%{transform:none}
}

/* Kurzes Aufblitzen, wenn ein Zeichen feststellt */
.nb.fest{animation:festblitz .38s ease-out}
@keyframes festblitz{
  0%  {background:var(--pink); box-shadow:0 0 14px 4px rgba(237,62,134,.75)}
  100%{background:#1F1F23; box-shadow:0 1px 3px rgba(0,0,0,.6)}
}

/* Punkte erscheinen nacheinander */
.glow{opacity:0}
.glow.an{opacity:1;transition:opacity .5s ease-out}


/* ---------- Abschnittsmarke, mittig mit Haarlinien ---------- */
.marke{display:flex;align-items:center;gap:14px;margin:28px 0 12px}
.marke::before,.marke::after{content:"";flex:1;height:1px;background:var(--trenn)}
.marke span,.marke-link{color:var(--pink);font-family:var(--mono);font-size:9px;
  letter-spacing:3px;white-space:nowrap;text-decoration:none}

/* ---------- Tafel ---------- */
.tafel{background:var(--bg2);border:1px solid var(--rahmen);border-radius:4px;
  padding:6px 13px}
.zeile{padding:8px 0;border-bottom:1px solid var(--fein);
  display:flex;flex-direction:column;gap:9px;align-items:center}
.zeile:last-child{border-bottom:none}
.spalten{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.dz{display:flex;gap:10px}
.reihe{display:flex;gap:2px}
.blatt{position:relative;width:var(--bw);height:var(--bh);border-radius:1px;
  background:var(--blatt);overflow:hidden;flex:0 0 auto}
.blatt.tot{background:var(--blatt-tot)}
.blatt::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);
  height:1px;background:var(--naht);z-index:2}
.blatt .h{position:absolute;left:0;right:0;height:50%;overflow:hidden}
.blatt .h.o{top:0}.blatt .h.u{bottom:0}
.blatt .h span{position:absolute;left:0;right:0;height:var(--bh);
  line-height:var(--bh);text-align:center;font-family:var(--mono);
  font-size:11px;color:var(--hell)}
.blatt.tot .h span{color:var(--tot)}
.blatt .h.o span{top:0}
.blatt .h.u span{top:calc(var(--bh) / -2)}
.statusfeld{min-width:86px;text-align:center;border-radius:1px;padding:3px 9px;
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px}
.statusfeld.safe{background:var(--safe-bg);color:var(--safe-tx)}
.statusfeld.planung{background:var(--plan-bg);color:var(--plan-tx)}
.statusfeld.annulliert{background:var(--ann-bg);color:var(--ann-tx)}
.statusfeld.laeuft{background:var(--pink);color:var(--bg);font-weight:600}
/* Status-Sprachwechsel (Datei 24, 19.09.): Kastenbreite aus BEIDEN Wörtern —
   .wort-en steht im Kasten, unsichtbar (visibility, NICHT display:none,
   sonst misst es nicht mit). Keine feste Breite erfunden. Klap-Optik
   übernommen aus 07-Design/fallblatt/anflugtafel.html Z.60 (klappeStatus). */
.statusfeld .wort-en{visibility:hidden;display:block}
.statusfeld.klappt{transform:scaleY(.05);transition:transform .1s linear}
.pegel{display:inline-flex;gap:2px;align-items:flex-end;height:9px;
  margin-right:7px;vertical-align:-1px}
.pegel i{width:2px;background:var(--bg);border-radius:1px;
  animation:pegel .85s ease-in-out infinite}
.pegel i:nth-child(2){animation-delay:-.28s}
.pegel i:nth-child(3){animation-delay:-.56s}
@keyframes pegel{0%,100%{height:3px}50%{height:9px}}

/* ---------- Sets ---------- */
.sets{display:flex;flex-direction:column;gap:8px}
.set{display:flex;gap:13px;align-items:center;background:var(--bg2);
  border:1px solid var(--rahmen);border-radius:4px;padding:10px 12px;
  text-decoration:none;transition:border-color .25s}
.set:hover{border-color:var(--pink)}
.play{width:34px;height:34px;border:1px solid var(--pink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--pink);font-size:11px;line-height:1}
.set-txt{min-width:0;flex:1}
.set-titel{color:var(--hell);font-size:14px;font-weight:500;line-height:1.35}
.set-meta{color:var(--grau2);font-family:var(--mono);font-size:10px;
  letter-spacing:.5px;margin-top:7px}
/* ---------- Symbole ---------- */
.symbole{display:flex;justify-content:center;gap:24px;padding:16px 0 20px}
.symbole a{color:var(--grau2);font-family:var(--mono);font-size:10px;
  letter-spacing:2px;text-decoration:none}
.symbole a.tw{color:var(--tot)}

/* PARK-FRESH-CUTS-2026-09-16 Anfang Newsbereich (nicht gelöscht)
.balken{height:3px;background:var(--pink);position:relative;overflow:hidden}
.balken::after{content:"";position:absolute;top:0;bottom:0;left:0;width:110px;
  background:rgba(255,255,255,.55);filter:blur(7px);
  animation:schimmer 12s linear infinite}
@keyframes schimmer{
  0%  {transform:translateX(-130px)}
  100%{transform:translateX(calc(100vw + 130px))}
}
.news{background:var(--bg2);padding:26px 0 26px;text-align:center}
.news-kenn{color:var(--pink);font-family:var(--mono);font-size:9px;
  letter-spacing:3px;margin-bottom:12px}
.news-ueber{font-size:22px;font-weight:500;letter-spacing:4px;margin:0 0 14px}
.news-unter{color:var(--grau2);font-family:var(--mono);font-size:9px;
  letter-spacing:3px;margin:0 0 16px}
.news-satz{color:var(--grau);font-size:12px;line-height:1.6;margin:0 auto 26px;
  max-width:30em}
.band{position:relative;background:var(--pink);overflow:hidden;border-radius:3px}
.inner{display:flex;width:max-content;animation:lauf 26s linear infinite}
.half{display:flex;align-items:center;gap:40px;padding:11px 40px 11px 0;flex:0 0 auto}
.bi{color:var(--bg);font-family:var(--mono);font-size:11px;white-space:nowrap;
  flex:0 0 auto;text-decoration:none}
.bmarke{background:var(--bg);color:var(--pink);font-family:var(--mono);
  font-size:11px;letter-spacing:2px;padding:5px 10px;border-radius:2px;
  white-space:nowrap;flex:0 0 auto}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.band:hover .inner{animation-play-state:paused}
.news-knopf{display:inline-block;margin-top:24px;border:1px solid var(--pink);
  color:var(--pink);font-family:var(--mono);font-size:11px;letter-spacing:2px;
  padding:11px 20px;border-radius:2px;text-decoration:none}
PARK-FRESH-CUTS-2026-09-16 Ende Newsbereich */

/* ---------- Fuss ---------- */
footer{text-align:center;padding:32px 0 40px}
footer a{color:var(--tot);font-family:var(--mono);font-size:10px;
  letter-spacing:1.5px;text-decoration:none;margin:0 9px}

@media (min-width:400px){
  .zeile{flex-direction:row;justify-content:space-between}
  .spalten{justify-content:flex-start}
}
@media (min-width:900px){
  :root{--bw:16px;--bh:24px}
  .blatt .h span{font-size:14px}
  :root{--nw:46px; --nh:78px; --nschub:-24px}
  .nb .nh2 span{font-size:42px}
  .name{gap:6px}
  /* PARK-FRESH-CUTS-2026-09-16 .news-ueber{font-size:28px} */
  .spalten{gap:22px}
  .sets{flex-direction:row}
  .set{flex:1}
}
.einblenden{opacity:0;transform:translateY(14px)}
.einblenden.da{opacity:1;transform:none;
  transition:opacity .7s ease-out, transform .7s ease-out}

@media (prefers-reduced-motion:reduce){
  /* PARK-FRESH-CUTS-2026-09-16 .inner{animation:none} */
  /* PARK-FRESH-CUTS-2026-09-16 .balken::after{animation:none;opacity:0} */
  .pegel i{animation:none;height:6px}
  .einblenden{opacity:1;transform:none}
  .pegelband i{animation:none;height:22px}
  .balken::before{animation:none;opacity:0}
  .glitch{animation:none}
  .glow{animation:none;opacity:0}
}

/* ==== Fresh Cuts ergänzend (aus freshcuts_vorlage.html) ==== */
:root{
  --bg:#0A0A0A; --bg2:#060606; --rahmen:#24242A; --trenn:#1C1C20; --fein:#161618;
  --pink:#ED3E86; --hell:#F4F2EC; --grau:#8C8A84; --grau2:#5A5955; --tot:#3F3F3C;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--hell);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.grund{position:fixed;top:0;left:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;display:block}
.wrap{max-width:760px;margin:0 auto;padding:0 18px;position:relative;z-index:1}
nav{position:relative;z-index:1;display:flex;justify-content:center;align-items:stretch;
  gap:16px;padding:6px 0;border-bottom:1px solid var(--fein);background:var(--bg)}
nav a{font-family:var(--mono);text-decoration:none;white-space:nowrap;
  display:flex;flex-direction:column;justify-content:center;gap:4px}
nav a.start{color:var(--grau2);font-size:15px;letter-spacing:3px}
/* PARK-FRESH-CUTS-2026-09-16 nav a.news{color:var(--pink);font-size:11px;letter-spacing:2px;line-height:1.1} */
.nav-sub{color:var(--pink);letter-spacing:2px;font-size:11px}
.nav-strich{width:1px;background:var(--pink);align-self:stretch}

header{text-align:center;padding:30px 0 22px}
.kenn{color:var(--pink);font-family:var(--mono);font-size:9px;letter-spacing:3px}
h1{font-size:29px;font-weight:500;letter-spacing:4px;margin:12px 0 0}
.unter{color:var(--grau2);font-family:var(--mono);font-size:9px;letter-spacing:3px;margin-top:11px}
.satz{color:var(--grau);font-size:13px;line-height:1.6;margin:16px auto 0;max-width:30em}

.leiste{display:flex;justify-content:center;gap:6px;padding:20px 0 4px}
.leiste button{font-family:var(--mono);font-size:10px;letter-spacing:2px;
  background:transparent;color:var(--grau2);border:1px solid var(--rahmen);
  border-radius:2px;padding:6px 13px}
.leiste button.an{color:var(--pink);border-color:var(--pink)}

.liste{padding:12px 0 0}
.e{position:relative;display:flex;gap:13px;align-items:center;padding:16px 0;
  border-bottom:1px solid #232327;text-decoration:none;
  transition:padding-left .2s ease}
.e:hover{padding-left:5px}
.e.nach{display:none}
.komet{position:absolute;left:0;bottom:-1px;height:2px;width:158px;opacity:0;
  animation:wandern 27s linear infinite}
.liste > .e:nth-child(6n+1) .komet{animation-delay:0s}
.liste > .e:nth-child(6n+2) .komet{animation-delay:-4.5s}
.liste > .e:nth-child(6n+3) .komet{animation-delay:-9.0s}
.liste > .e:nth-child(6n+4) .komet{animation-delay:-13.5s}
.liste > .e:nth-child(6n+5) .komet{animation-delay:-18.0s}
.liste > .e:nth-child(6n+6) .komet{animation-delay:-22.5s}

/* ---------- Laufband-Zusatz (Jan, 14.09.) ----------
   48 Blätter stehen im HTML; je Break wird GENAU EINE Zahl sichtbar
   (Rest display:none), sichtbare Blätter teilen sich die volle Zeilenbreite
   (flex:1 1 auto) -> rechte Kante bündig an der Tafel-Innenkante bei jeder
   Breite, ohne Restpixel, ohne Zahlensätze je Fensterbreite.
   Blattbreite je Break (gemessen): <430px 13,5-19,9 · 430-649 12,2-19,9 ·
   650-899 12,9-19,1 · >=900 15,6-19,8 px. */
.bandblock .spalten{width:100%}
.bandblock .reihe{width:100%}
.bandblock .blatt{flex:1 1 auto; min-width:0}
.bandblock .blatt:nth-child(n+18){display:none}
@media (min-width:430px) and (max-width:649px){
  .bandblock .blatt:nth-child(-n+27){display:grid}
  .bandblock .blatt:nth-child(n+28){display:none}
}
@media (min-width:650px) and (max-width:899px){
  .bandblock .blatt:nth-child(-n+40){display:grid}
  .bandblock .blatt:nth-child(n+41){display:none}
}
@media (min-width:900px){
  .bandblock .blatt:nth-child(-n+48){display:grid}
}
.schweif{position:absolute;right:3px;top:0;height:2px;width:152px;border-radius:1px;
  background:linear-gradient(90deg,transparent,currentColor);opacity:.9}
.kopf{position:absolute;right:0;top:-2px;width:6px;height:6px;border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 0 3px 1px #FFFFFF,
             0 0 8px 2px currentColor,
             0 0 20px 6px currentColor;
  animation:funke .13s steps(2,end) infinite}
@keyframes funke{
  0%  {opacity:1;   transform:scale(1)}
  50% {opacity:.72; transform:scale(.86)}
  100%{opacity:1;   transform:scale(1)}
}
.e:hover .komet,.e:focus .komet,.e:active .komet{animation:durchlauf 2.2s linear 1}
@keyframes durchlauf{
  0%{transform:translateX(-190px);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateX(110vw);opacity:0}
}
@keyframes wandern{
  0%  {transform:translateX(-190px);opacity:0}
  4%  {opacity:.95}
  94% {opacity:.95}
  100%{transform:translateX(110vw);opacity:0}
}
.nr{font-family:var(--mono);font-size:12px;flex:0 0 auto;padding-top:2px;align-self:flex-start}
.txt{flex:1;min-width:0;display:block}
.ti{display:block;color:var(--hell);font-size:16px;line-height:1.35;font-weight:500}
.ti.en{display:none}
.meta{display:block;color:var(--grau2);font-family:var(--mono);font-size:9px;
  letter-spacing:1.5px;margin-top:8px}
.kt{letter-spacing:2px}
.pf{font-family:var(--mono);font-size:15px;flex:0 0 auto;opacity:.5}
.e:hover .pf{opacity:1}
body.en .ti.de{display:none}
body.en .ti.en{display:block}

.mehr{text-align:center;padding:26px 0 8px}
.mehr button{font-family:var(--mono);font-size:11px;letter-spacing:2px;
  background:transparent;color:var(--pink);border:1px solid var(--pink);
  border-radius:2px;padding:11px 22px}
.ende{text-align:center;color:var(--tot);font-family:var(--mono);font-size:10px;
  letter-spacing:2px;padding:26px 0 8px;display:none}
footer{position:relative;z-index:1;text-align:center;padding:30px 0 40px}
footer a{color:var(--tot);font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  text-decoration:none;margin:0 9px}

@media (min-width:900px){
  h1{font-size:38px}
  .ti{font-size:18px}
  .e{padding:19px 0}
}
@media (prefers-reduced-motion:reduce){
  .e{transition:none}
  .komet{animation:none;opacity:0}
  .kopf{animation:none}
  .drift{display:none}
}

/* Artikel ergänzend (aus artikel_vorlage.html) ==== */
:root{
  --bg:#0A0A0A; --bg2:#060606; --rahmen:#24242A; --trenn:#1C1C20; --fein:#161618;
  --pink:#ED3E86; --hell:#F4F2EC; --grau:#8C8A84; --grau2:#5A5955; --tot:#3F3F3C;
  --kat:#4FC3F7;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--hell);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:0 18px}

/* Fortschritt beim Scrollen */
.fortschritt{position:fixed;top:0;left:0;height:2px;width:0;background:var(--kat);
  z-index:9;transition:width .1s linear}

nav{display:flex;justify-content:center;align-items:stretch;gap:16px;padding:6px 0;
  border-bottom:1px solid var(--fein)}
nav a{font-family:var(--mono);text-decoration:none;white-space:nowrap;
  display:flex;flex-direction:column;justify-content:center;gap:4px}
nav a.start{color:var(--grau2);font-size:15px;letter-spacing:3px}
/* PARK-FRESH-CUTS-2026-09-16 nav a.news{color:var(--pink);font-size:11px;letter-spacing:2px;line-height:1.1} */
.nav-sub{color:var(--pink);letter-spacing:2px;font-size:11px}
.nav-strich{width:1px;background:var(--pink);align-self:stretch}

/* Kopf des Artikels */
header{padding:26px 0 0}
.kat{display:inline-block;color:var(--bg);background:var(--kat);font-family:var(--mono);
  font-size:10px;letter-spacing:2px;padding:4px 9px;border-radius:2px}
.datum{color:var(--grau2);font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  margin-left:10px}
h1{font-size:31px;line-height:1.15;font-weight:600;letter-spacing:-.4px;margin:16px 0 0}
h2.en{font-size:15px;line-height:1.3;font-weight:400;color:var(--grau);margin:10px 0 0}

/* Muster */
.mustertopf{margin:22px 0 26px;height:118px;overflow:hidden;
  border-top:1px solid var(--fein);border-bottom:1px solid var(--fein);
  display:flex;align-items:flex-end}
.muster{width:100%;height:100%;display:block}
.muster rect{transform-origin:bottom;animation:aufbau .9s cubic-bezier(.2,.8,.3,1) both}

/* Zahlen */
.zahlen{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px}
.zahl{flex:1;min-width:96px;border:1px solid var(--rahmen);border-radius:3px;
  padding:13px 12px;background:var(--bg2)}
.zw{display:block;font-size:23px;font-weight:600;letter-spacing:-.5px;color:var(--kat)}
.zl{display:block;color:var(--grau2);font-family:var(--mono);font-size:9px;
  letter-spacing:2px;margin-top:7px}

article p{font-size:16px;line-height:1.72;color:#DCDAD3;margin:0 0 20px}
article p:first-of-type{font-size:17.5px;color:var(--hell)}

.sprache{display:flex;align-items:center;gap:12px;margin:34px 0 22px}
.sprache::before,.sprache::after{content:"";flex:1;height:1px;background:var(--trenn)}
.sprache span{color:var(--kat);font-family:var(--mono);font-size:9px;letter-spacing:3px}

.fuss{margin-top:36px;padding:18px 0 0;border-top:1px solid var(--trenn)}
.fuss p{color:var(--grau2);font-family:var(--mono);font-size:10px;line-height:1.8;
  margin:0 0 8px;letter-spacing:.3px}
.fuss a{color:var(--grau);text-decoration:none;border-bottom:1px solid var(--rahmen)}

footer{text-align:center;padding:30px 0 40px}
footer a{color:var(--tot);font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  text-decoration:none;margin:0 9px}

@keyframes aufbau{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media (min-width:900px){
  h1{font-size:44px}
  h2.en{font-size:17px}
  .zw{font-size:28px}
  .mustertopf{height:150px}
}
@media (prefers-reduced-motion:reduce){
  .muster rect{animation:none}
  .fortschritt{transition:none}
}

/* ==== Ueber mich ergaenzend (Datei 23, 18.09.) ====
   Gemessen vor dem Bau (CDP mobile=True 360/393/412, Messordner
   07-Design/ueber-mich-messung/): kein Ueberlauf, Menue 3 Eintraege
   + 2 Striche in einer Zeile. Farben/Schriften nur aus dem Bestand. */
main.djfalter-ueber{max-width:760px;margin:0 auto;padding:0 18px;position:relative;z-index:1}
.sprachwahl{display:flex;justify-content:center;gap:6px;padding:20px 0 4px}
.sprachwahl button{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  background:transparent;color:var(--grau2);border:1px solid var(--pink);
  border-radius:2px;padding:6px 13px}
.sprachwahl button.aktiv{background:var(--pink);color:var(--bg)}
.ueber-text{max-width:30em;margin:12px auto 0;color:var(--grau)}
.ueber-text p{font-size:16px;line-height:1.72;margin:0 0 18px}