/* Plugin archiv-eintrag — Frontend-Stile (Bedienfeld, Timeline, Karten, Lichtkasten, Dialoge) — 1:1 aus Prototyp v6.12.
   Versionshistorie
   v2.5 — 2026-09-17 14:40 — Großansicht Foto: Bildfläche max. Fensterhöhe − 15rem; Skalierung große Monitore zurück auf 100vw/90, max. 20px (v1.6 zu groß).
   v2.4 — 2026-09-17 04:10 — Suchfeld: Löschen-✕ groß (40 px Tippfläche, runder Hintergrund); Umbruch-Regel ohne :has() in :has() (ungültig → Feld klappte nach Enter zu).
   v2.3 — 2026-09-17 03:50 — Handy: Zeile bricht nur bei offenem Suchfeld um (vorher rutschte ☰ auf schmalen Handys in die nächste Zeile).
   v2.2 — 2026-09-17 03:30 — Handy: Suchzeile nur nach Tipp auf die Lupe (bzw. solange ein Suchbegriff drinsteht), sonst wieder nur Lupe.
   v2.1 — 2026-09-17 03:05 — Handy (≤800 px): Suche als sichtbares Eingabefeld in eigener Zeile unter den Knöpfen (vorher nur Lupe), Schrift 16 px (iPhone zoomt sonst).
   v2.0 — 2026-09-17 02:45 — Überblendung wieder 0,35 s; „Nach oben“ rot mit blauem Rand.
   v1.9 — 2026-09-17 02:10 — Überblendung per View Transition statt Deckkraft-Animation (die startete bei 35 % → dunkel); Knopf „Nach oben“.
   v1.8 — 2026-09-17 01:10 — Einblenden der kompakten Zeile halb so schnell (0,7 s).
   v1.7 — 2026-09-17 00:05 — Überblendung ruckelte: Höhen-/Schrift-Übergänge verschoben bei jedem Bild die ganze Timeline (Layout je Frame) → raus;
                             stattdessen nur Deckkraft/Verschiebung (Grafikkarte), kleiner Startversatz.
   v1.6 — 2026-09-16 23:50 — T13: Skalierung ab 1440 px ×1,1 (1rem bis 22px bei 1920 px); kompakte Leiste größer (Höhe 2,75rem, Logo 2,75rem);
                             Übergang normal ↔ kompakt überblendet (Höhen/Schrift gleiten, Logo + ☰ blenden ein).
   v1.5 — 2026-09-16 23:15 — Maße in rem: ab 1440 px Fensterbreite wächst alles ab dem Bedienfeld mit (höchstens +25 %, erreicht bei 1800 px);
                             Karte kurz rot umrandet nach Sprung (▲▼, Link aus dem Upload-Pult).
                             Zwischenbreite 801–960 px: Suchfeld schrumpft bis aufs Symbol (Zeile lief bis 107 px über den Rand, auch im Prototyp).
   v1.4 — 2026-09-16 22:36 — Mosaik mit 4 Bildern: großes Bild links, 3 kleine rechts übereinander (vorher leere Zelle unten rechts).
   v1.3 — 2026-09-17 01:40 — Timeline-Abschnitte je Epoche (Marke im Fluss, Abstände wie Prototyp: Strang 52, Epoche 96, Karten 72).
   v1.2 — 2026-09-17 00:50 — Scroll-Leistung: Linien-Teil-SVGs (.bahnen-teil), Leiste ohne backdrop-filter (97 % deckend, Blur unsichtbar).
   v1.1 — 2026-09-16 23:20 — Handy-Block (≤800 px) wieder in seine Media-Query.
   v1.0 — 2026-09-16 22:45 — Angelegt (Bauplan Frontend v2.1, T4–T6). Tokens liefert das Theme swf3 (style.css). */
/* v6.4 Menü im kompakten Bedienfeld (ersetzt den Mini-Kopf aus v6.3) */
.bf-menue{display:none;position:absolute;right:1rem;top:calc(100% + 0.375rem);min-width:14.375rem;margin:0;padding:0.375rem 0;list-style:none;background:var(--panel);
  border:0.0625rem solid rgba(184,177,164,.25);border-radius:0.875rem;box-shadow:0 1.125rem 2.5rem -1.25rem #000;z-index:5;}
.bf-menue.offen{display:block;}
.bf-menue a{display:block;padding:0.6875rem 1.125rem;color:var(--alu);text-decoration:none;font-family:var(--kond);font-size:0.9375rem;letter-spacing:.12em;text-transform:uppercase;}
.bf-menue a:hover,.bf-menue a[aria-current="page"]{color:var(--light);}
.redaktion .kl-menue .nur-redaktion,.redaktion .bf-menue .nur-redaktion{display:block;}
.nur-redaktion a{color:#6FB3E6!important;}
.versionen-liste{margin:0 0 0.875rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:0.625rem;color:var(--alu);font-size:0.9375rem;}
.versionen-liste b{display:block;font-family:var(--kond);font-weight:600;letter-spacing:.08em;color:var(--light);}
.ansicht .werkzeug .schieben{display:none;}
/* ============ D1 Bedienfeld mit Filterleiste ============ */
.bedienfeld{position:sticky;top:0;z-index:30;transition:top .25s ease;background:linear-gradient(180deg,rgba(29,26,22,.97),rgba(24,21,17,.97));
  border-top:0.0625rem solid rgba(184,177,164,.18);border-bottom:0.0625rem solid rgba(184,177,164,.18);padding:0.75rem 1.5rem;}
.bedienfeld::after{content:"";position:absolute;left:0;right:0;bottom:-0.0625rem;height:0.125rem;background:linear-gradient(90deg,var(--blau),var(--rot));opacity:.85;}
.bf-innen{max-width:70rem;margin:0 auto;display:flex;flex-direction:column;gap:0.625rem;}
.regler{display:flex;flex-wrap:wrap;gap:0.625rem;align-items:center;}
.feld{position:relative;flex:0 1 13.125rem;min-width:8.75rem;}
.feld input{width:100%;padding:0.375rem 0.75rem 0.375rem 2rem;font-size:0.875rem!important;background:#0E0C0A;color:var(--light);border:0.0625rem solid rgba(184,177,164,.26);
  border-radius:var(--r);font-family:var(--kond);font-size:1rem;}
.feld::before{content:"⌕";position:absolute;left:0.6875rem;top:50%;transform:translateY(-52%);color:var(--alu-dim);font-size:1.0625rem;pointer-events:none;}
/* v6.2: Sortierung ist die wichtigste Wahl → große Tastengruppe vorn */
.sortierung{display:inline-flex;flex-wrap:wrap;gap:0.25rem;padding:0.25rem;background:#0E0C0A;border:0.0625rem solid rgba(184,177,164,.26);border-radius:62.4375rem;}
.sortierung button{font-family:var(--kond);font-weight:600;font-size:1.1875rem;letter-spacing:.06em;text-transform:uppercase;padding:0.5625rem 1.25rem;
  background:transparent;color:var(--alu);border:0;border-radius:62.4375rem;cursor:pointer;white-space:nowrap;}
.sortierung button:hover{color:var(--light);}
.sortierung button[aria-pressed="true"]{background:var(--rot);color:#fff;}
.zaehler{font-family:var(--kond);font-size:0.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--alu-dim);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;}
.filterzeile{display:flex;flex-wrap:wrap;gap:0.625rem 1.375rem;align-items:center;}
.arten{display:inline-flex;border:0.0625rem solid rgba(184,177,164,.28);border-radius:var(--r);overflow:hidden;}
.filterzeile .arten{margin-left:auto;}
.arten button{font-family:var(--kond);font-weight:600;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;padding:0.3125rem 0.625rem;
  background:transparent;color:var(--alu);border:0;border-right:0.0625rem solid rgba(184,177,164,.2);cursor:pointer;white-space:nowrap;}
.arten button:last-child{border-right:0;}
.arten button:hover{color:var(--light);}
.arten button[aria-pressed="true"]{background:var(--blau);color:#fff;}
.arten .n,.taste .n{opacity:.6;margin-left:0.3125rem;font-variant-numeric:tabular-nums;}
.reiter-gruppe{display:flex;gap:0.125rem;}
.reiter{font-family:var(--kond);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;
  border-bottom:0.125rem solid transparent;color:var(--alu);padding:0.375rem 0.625rem;cursor:pointer;display:inline-flex;align-items:center;gap:0.375rem;}
.reiter:hover{color:var(--light);}
.reiter[aria-expanded="true"]{color:var(--light);border-bottom-color:var(--rot);}
.reiter .pfeil{font-size:0.625rem;transition:transform .2s ease;}
.reiter[aria-expanded="true"] .pfeil{transform:rotate(180deg);}
.reiter .zahl{background:var(--rot);color:#fff;border-radius:0.125rem;padding:0.0625rem 0.375rem;font-size:0.6875rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.panel{border-top:0.0625rem solid rgba(184,177,164,.14);padding-top:0.625rem;display:flex;flex-direction:column;gap:0.5rem;max-height:36vh;overflow:auto;}
.panel .hinweis{margin:0;font-family:var(--kond);font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--alu-dim);}
.tasten{display:flex;flex-wrap:wrap;gap:0.375rem;}
.taste{font-family:var(--kond);font-size:0.8125rem;letter-spacing:.08em;text-transform:uppercase;padding:0.25rem 0.625rem;border-radius:var(--r);
  cursor:pointer;background:transparent;color:var(--alu);border:0.0625rem solid rgba(184,177,164,.28);}
.taste:hover{border-color:var(--blau);color:var(--light);}
.taste[aria-pressed="true"]{background:var(--blau);border-color:var(--blau);color:#fff;font-weight:600;}
.taste-mehr{border-style:dashed;}
.aktiv{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center;}
.chip-aktiv{font-family:var(--kond);font-size:0.8125rem;letter-spacing:.06em;padding:0.1875rem 0.375rem 0.1875rem 0.625rem;border-radius:var(--r);cursor:pointer;
  background:rgba(0,101,173,.32);border:0.0625rem solid var(--blau);color:var(--light);display:inline-flex;align-items:center;gap:0.375rem;}
.chip-aktiv small{color:var(--alu);text-transform:uppercase;letter-spacing:.12em;font-size:0.625rem;}
.chip-aktiv .x{opacity:.7;}
.chip-aktiv:hover{border-color:var(--rot);}
.alle-weg{font-family:var(--kond);font-size:0.8125rem;letter-spacing:.1em;text-transform:uppercase;background:none;cursor:pointer;
  color:var(--rot);border:0.0625rem solid rgba(227,6,19,.55);border-radius:var(--r);padding:0.1875rem 0.625rem;}

/* ============ TIMELINE (v5) ============ */
main{position:relative;z-index:2;max-width:70rem;margin:0 auto;padding:0 1.5rem 7.5rem;}
/* v6.1: Karten frei gepackt (JS „anordnen“), Winkel-Linien als SVG hinter den Karten, Knoten + Läufer darüber */
.strang{position:relative;margin-top:3.25rem;}
.bahnen,.punkte{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;}
.bahnen{z-index:1;} .punkte{z-index:3;}
.bahnen-teil{position:absolute;left:0;overflow:visible;pointer-events:none;z-index:1;}
.bahnen-teil .grund{fill:none;stroke:rgba(227,6,19,.28);stroke-width:var(--rail);stroke-linecap:round;}
.bahnen-teil .lauf{fill:none;stroke:var(--rot);stroke-width:var(--rail);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.45,0,.2,1);}
.bahnen-teil .lauf.an{stroke-dashoffset:0;} .bahnen-teil .lauf.fertig{transition:none;}
.bahnen .grund{fill:none;stroke:rgba(227,6,19,.28);stroke-width:var(--rail);stroke-linecap:round;}
.bahnen .lauf{fill:none;stroke:var(--rot);stroke-width:var(--rail);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.2s cubic-bezier(.45,0,.2,1);}
.bahnen .lauf.an{stroke-dashoffset:0;} .bahnen .lauf.fertig{transition:none;}
.punkte .punkt{fill:var(--ink);stroke:rgba(184,177,164,.5);stroke-width:2;transition:fill .25s ease,stroke .25s ease;}
.punkte .punkt.an{fill:var(--rot);stroke:var(--rot);}
.punkte .laeufer{fill:var(--rot);filter:drop-shadow(0 0 0.4375rem var(--rot));transition:opacity .2s ease;}
.platz{position:absolute;z-index:2;}
.marke-ep{position:absolute;left:0;right:0;text-align:center;z-index:2;}
.marke-ep .name{display:inline-block;background:var(--ink);padding:0.875rem 2rem;border:0.0625rem solid rgba(184,177,164,.35);
  border-left:0.1875rem solid var(--blau);border-right:0.1875rem solid var(--rot);border-radius:var(--r);font-family:var(--kond);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.75rem,4.6vw,3.25rem);letter-spacing:.02em;color:var(--light);line-height:1;}
.marke-ep .unter{display:block;margin-top:0.75rem;font-family:var(--kond);font-size:1rem;letter-spacing:.24em;text-transform:uppercase;color:var(--alu-dim);font-variant-numeric:tabular-nums;}

/* ============ KARTE (v5 + D2 + D4) ============ */
.karte{position:relative;width:100%;background:var(--karte);border:0.0625rem solid rgba(184,177,164,.14);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.karte:hover{transform:translateY(-0.25rem);border-color:rgba(227,6,19,.65);box-shadow:0 1.125rem 2.5rem -1.75rem #000;}
.karte-flaeche{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;text-align:left;}
.buehne{position:relative;overflow:hidden;}
.flaeche{position:relative;overflow:hidden;background:#0B0A08;}
.flaeche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.flaeche::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 0.125rem,transparent 0.125rem 0.25rem);opacity:.32;}
.flaeche.foto::after{opacity:.1;}
.einzel{aspect-ratio:4/3;}
.mosaik{display:grid;gap:0.125rem;aspect-ratio:4/3;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;}
.mosaik .flaeche:first-child{grid-row:span 2;}
.mosaik[data-n="2"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr;}
.mosaik[data-n="2"] .flaeche:first-child{grid-row:auto;}
.mosaik[data-n="4"]{grid-template-rows:1fr 1fr 1fr;}
.mosaik[data-n="4"] .flaeche:first-child{grid-row:span 3;}
.vorschau{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0B0A08;}
.vorschau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.03);}
.vorschau::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,14,.15),rgba(18,16,14,.55));}
.art{position:absolute;left:0.5rem;top:0.5rem;z-index:4;font-family:var(--kond);font-size:0.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:0.125rem 0.4375rem;border-radius:0.125rem;background:rgba(18,16,14,.85);color:var(--light);}
.stapel{position:absolute;right:0.5rem;top:0.5rem;z-index:4;font-family:var(--kond);font-size:0.9375rem;font-weight:600;letter-spacing:.06em;
  padding:0.1875rem 0.6875rem;border-radius:62.4375rem;background:rgba(18,16,14,.8);color:var(--light);border:0.0625rem solid rgba(240,236,228,.22);transition:top .18s ease;}
.signet{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;}
.signet span{width:3.5rem;height:2.5rem;border-radius:0.5625rem;background:rgba(227,6,19,.92);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.0625rem;padding-left:0.1875rem;box-shadow:0 0.375rem 1.25rem -0.5rem #000;transition:transform .18s ease;}
.karte:hover .signet span{transform:scale(1.1);}
.welle{position:absolute;inset:auto 0 0 0;height:52%;display:flex;align-items:flex-end;gap:0.125rem;padding:0 0.75rem 0.75rem;z-index:3;}
.welle i{flex:1;background:rgba(18,16,14,.58);border-radius:0.0625rem;}
/* v6.2 Audio-Karten: runder Knopf (nicht der rote YouTube-Knopf), Kopfhörer + Dauer, direkt auf der Karte abspielbar; 3 Vorschläge */
.audio{position:relative;aspect-ratio:2/1;background:linear-gradient(160deg,#221E19,#15120F);overflow:hidden;}
.audio-dauer{position:absolute;left:0.625rem;top:0.625rem;z-index:5;display:inline-flex;align-items:center;gap:0.375rem;font-family:var(--kond);font-size:0.875rem;font-weight:600;
  letter-spacing:.06em;color:var(--light);background:rgba(11,10,8,.72);padding:0.1875rem 0.5625rem 0.1875rem 0.4375rem;border-radius:62.4375rem;font-variant-numeric:tabular-nums;}
.audio-dauer svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.hoer-knopf{position:absolute;z-index:6;width:3.625rem;height:3.625rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--blau);color:#fff;box-shadow:0 0 0 0.375rem rgba(0,101,173,.28),0 0.625rem 1.625rem -0.625rem #000;transition:transform .15s ease;}
.hoer-knopf:hover{transform:scale(1.08);}
.hoer-knopf svg{width:1.5rem;height:1.5rem;fill:currentColor;}
.hoer-spur{position:absolute;left:0;right:0;bottom:0;height:0.25rem;z-index:6;background:rgba(240,236,228,.12);}
.hoer-spur i{display:block;height:100%;width:0;background:var(--rot);}
/* Radio-Skala (v6.3 gewählt): Zeiger zeigt den Stand */
.stil-skala .hoer-knopf{right:1.125rem;top:50%;transform:translateY(-50%);}
.stil-skala .hoer-knopf:hover{transform:translateY(-50%) scale(1.08);}
.stil-skala .gitter{position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.55) 0.0875rem,transparent 0.1rem);background-size:0.5625rem 0.5625rem;opacity:.9;}
.stil-skala .band{position:absolute;left:1rem;right:6rem;top:50%;height:3.625rem;transform:translateY(-35%);background:#E9E2D4;border-radius:0.25rem;overflow:hidden;
  box-shadow:inset 0 0 0 0.125rem rgba(0,0,0,.25);}
.stil-skala .band::before{content:"";position:absolute;left:0;right:0;top:0;height:1.375rem;background-image:repeating-linear-gradient(90deg,#3A342C 0 0.0625rem,transparent 0.0625rem 0.5rem);}
.stil-skala .band b{position:absolute;bottom:0.375rem;font-family:var(--kond);font-size:0.75rem;font-weight:600;color:#3A342C;transform:translateX(-50%);}
.stil-skala .band .zeiger{position:absolute;top:0;bottom:0;width:0.1875rem;background:var(--rot);transition:left .1s linear;}
.beschriftung{padding:0.75rem 0.8125rem 0.6875rem;display:flex;flex-direction:column;gap:0.5rem;flex:1;}
.beschriftung .bu{margin:0;font-size:0.9375rem;line-height:1.4;}
.yt-titel{font-family:var(--kond);font-size:0.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--light);}
.marken{display:flex;flex-wrap:wrap;gap:0.25rem;}
.marke-chip:hover{border-color:var(--blau)!important;color:var(--light)!important;}
.marke-chip{background:none;cursor:pointer;font-family:var(--kond);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--alu-dim);
  border:0.0625rem solid rgba(184,177,164,.2);padding:0.0625rem 0.375rem;border-radius:0.125rem;}
/* D2 v6.2: ♥ · Kommentar · Teilen wie bei Instagram über der BU, größer, dicke Linien – inaktiv blau, aktiv rot */
.resonanz{display:flex;align-items:center;gap:1.125rem;margin:-0.125rem 0 0;font-family:var(--kond);font-size:1rem;font-weight:600;letter-spacing:.04em;color:var(--alu);}
.herz,.teilen,.spr{display:inline-flex;align-items:center;gap:0.375rem;background:none;border:0;cursor:pointer;color:inherit;font:inherit;padding:0;height:2.25rem;}
.herz svg,.spr svg,.teilen svg{display:block;width:1.625rem;height:1.625rem;flex:none;color:var(--blau);transition:transform .15s ease,color .15s ease;}
.herz:hover svg,.spr:hover svg,.teilen:hover svg{transform:scale(1.12);}
.herz svg path,.spr svg path,.teilen svg :is(path,circle){fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;}
.herz[data-an="1"] svg{color:var(--rot);}
.herz[data-an="1"] svg path{fill:currentColor;}
.teilen{margin-left:auto;}
.lk-zeile .spr{cursor:default;}
/* D4 Redaktions-Knöpfe */
.werkzeug{position:absolute;right:0.5rem;top:0.5rem;z-index:6;display:none;gap:0.25rem;}
.redaktion .werkzeug{display:flex;opacity:0;transition:opacity .15s ease;}
.redaktion .karte:hover .werkzeug,.redaktion .karte:focus-within .werkzeug{opacity:1;}
.redaktion .stapel{top:3rem;}
.werkzeug button{width:2.125rem;height:2.125rem;border-radius:var(--r);background:rgba(18,16,14,.9);border:0.0625rem solid rgba(184,177,164,.4);
  color:var(--light);cursor:pointer;font-size:0.9375rem;line-height:1;display:flex;align-items:center;justify-content:center;}
.werkzeug button:hover{border-color:var(--light);}
.werkzeug .weg:hover{border-color:var(--rot);background:rgba(227,6,19,.25);}
@media (hover:none){.redaktion .werkzeug{opacity:1;}}
.raster{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14.875rem,1fr));padding-top:2.75rem;align-items:start;}
.raster .karte{opacity:0;transform:translateY(1.125rem);transition:opacity .5s ease,transform .5s ease;}
.raster .karte.sicht{opacity:1;transform:translateY(0);}
.leer{padding:4.375rem 0;color:var(--alu-dim);font-size:1.0625rem;max-width:44ch;}
.leer button{margin-top:0.875rem;font-family:var(--kond);font-size:0.875rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  background:var(--rot);color:#fff;border:0;padding:0.4375rem 0.875rem;border-radius:var(--r);}

/* ============ D3 Lichtkasten ============ */
.lichtkasten{position:fixed;inset:0;z-index:60;display:none;background:rgba(6,5,4,.97);padding:1.25rem;overflow-y:auto;}
.lichtkasten[data-offen="1"]{display:block;}
.lk-innen{max-width:62.5rem;margin:0 auto;padding-bottom:3.75rem;}
.lk-kopf{display:flex;align-items:flex-start;gap:1rem;padding:0.375rem 0 1rem;}
.lk-kopf .zeile{font-family:var(--kond);font-size:0.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rot);}
.lk-kopf h2{font-family:var(--kond);font-weight:600;font-size:clamp(1.375rem,3.4vw,2.125rem);line-height:1.1;margin:0.25rem 0 0;text-wrap:balance;}
.lk-zu{margin-left:auto;background:none;border:0.0625rem solid rgba(184,177,164,.4);color:var(--light);width:2.375rem;height:2.375rem;
  border-radius:var(--r);font-size:1.25rem;cursor:pointer;flex:none;}
.lk-zu:hover{border-color:var(--rot);color:var(--rot);}
.lk-werkzeug{display:none;gap:0.375rem;flex-wrap:wrap;margin:0 0 0.875rem;}
.redaktion .lk-werkzeug{display:flex;}
.lk-werkzeug button{font-family:var(--kond);font-size:0.8125rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  background:transparent;color:var(--light);border:0.0625rem solid rgba(184,177,164,.4);border-radius:var(--r);padding:0.375rem 0.75rem;}
.lk-werkzeug button:hover{border-color:var(--light);}
.lk-werkzeug .weg{color:var(--rot);border-color:rgba(227,6,19,.55);}
.lk-buehne{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:0.0625rem solid rgba(184,177,164,.2);background:#0B0A08;}
.lk-buehne.foto{aspect-ratio:16/10;max-height:calc(100dvh - 15rem);min-height:18rem;}   /* v2.5 nie höher als das Fenster */
.lk-buehne .flaeche{position:absolute;inset:0;background:transparent;}
.lk-buehne .flaeche img{object-fit:contain;}
.lk-buehne .vorschau{position:absolute;inset:0;aspect-ratio:auto;}
.zweiklick{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.875rem;
  background:none;border:0;cursor:pointer;color:var(--light);padding:1.25rem;}
.zweiklick .knopf{width:4.625rem;height:3.25rem;border-radius:0.75rem;background:rgba(227,6,19,.94);display:flex;align-items:center;justify-content:center;
  font-size:1.375rem;padding-left:0.25rem;box-shadow:0 0.625rem 1.875rem -0.625rem #000;transition:transform .18s ease;}
.zweiklick:hover .knopf{transform:scale(1.08);}
.zweiklick .txt{font-family:var(--kond);font-size:0.8125rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;max-width:34ch;line-height:1.5;
  background:rgba(11,10,8,.78);padding:0.4375rem 0.75rem;border-radius:var(--r);}
.lk-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:rgba(18,16,14,.82);color:var(--light);
  border:0.0625rem solid rgba(184,177,164,.35);width:2.75rem;height:3.75rem;cursor:pointer;font-size:1.375rem;border-radius:var(--r);}
.lk-nav[data-richtung="zurueck"]{left:0.625rem;} .lk-nav[data-richtung="vor"]{right:0.625rem;}
.lk-nav:hover{border-color:var(--rot);color:var(--rot);}
.lk-zaehler{position:absolute;bottom:0.625rem;right:0.75rem;z-index:5;font-family:var(--kond);font-size:0.8125rem;letter-spacing:.16em;
  background:rgba(18,16,14,.85);padding:0.1875rem 0.5625rem;border-radius:0.125rem;font-variant-numeric:tabular-nums;}
.bild-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 1.125rem;padding:0.625rem 0.125rem 0;min-height:1.875rem;}
.bild-info .bu-bild{font-size:0.9375rem;font-style:italic;color:var(--light);}
.bild-info .klein{font-family:var(--kond);font-size:0.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--alu);}
.bild-info .klein b{font-weight:600;color:var(--alu-dim);margin-right:0.25rem;}
.lk-fuss{padding:1rem 0.125rem 0;}
.lk-fuss .text{margin:0 0 0.875rem;max-width:62ch;font-size:1.0625rem;}
.quelle{display:inline-block;margin:0 0 0.875rem;font-family:var(--kond);font-size:0.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--alu-dim);}
.quelle a{color:var(--rot);}
.lk-tags{display:flex;flex-direction:column;gap:0.375rem;margin:0 0 0.875rem;}
.lk-tags .gruppe{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center;}
.lk-tags .gruppe > span{font-family:var(--kond);font-size:0.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--alu-dim);min-width:4.5rem;}
.tag-knopf{font-family:var(--kond);font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--alu);
  background:none;border:0.0625rem solid rgba(184,177,164,.28);padding:0.125rem 0.5rem;border-radius:0.125rem;}
.tag-knopf:hover{border-color:var(--blau);color:var(--light);}
.lk-zeile{display:flex;flex-wrap:wrap;gap:1.125rem;align-items:center;padding:0.625rem 0;border-top:0.0625rem solid rgba(184,177,164,.16);
  border-bottom:0.0625rem solid rgba(184,177,164,.16);font-family:var(--kond);font-size:0.875rem;letter-spacing:.08em;color:var(--alu);}
.lk-zeile .teilen{margin-left:0;width:auto;height:auto;border-radius:var(--r);padding:0.25rem 0.5rem 0.25rem 0.25rem;text-transform:uppercase;letter-spacing:.12em;}
.player{display:flex;align-items:center;gap:0.875rem;padding:0.875rem 1rem;margin-top:0.875rem;background:var(--karte);border:0.0625rem solid rgba(184,177,164,.2);border-radius:var(--r);}
.player button{width:2.75rem;height:2.75rem;flex:none;border-radius:50%;cursor:pointer;background:var(--rot);color:#fff;border:0;font-size:1.0625rem;padding-left:0.1875rem;}
.player .spur{flex:1;height:1.125rem;display:flex;align-items:center;cursor:pointer;}
.player .spur span{display:block;width:100%;height:0.3125rem;background:rgba(184,177,164,.2);border-radius:0.1875rem;overflow:hidden;}
.player .spur i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blau),var(--rot));}
.player .zeit{font-family:var(--kond);font-size:0.875rem;letter-spacing:.1em;color:var(--alu-dim);font-variant-numeric:tabular-nums;white-space:nowrap;}
.komm{margin-top:1.375rem;}
.komm h3{font-family:var(--kond);font-size:0.875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--alu-dim);margin:0 0 0.75rem;font-weight:600;}
.komm-eintrag{padding:0.6875rem 0;border-bottom:0.0625rem solid rgba(184,177,164,.12);}
.komm-eintrag .wer{font-family:var(--kond);font-size:0.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rot);}
.komm-eintrag .wann{font-family:var(--kond);font-size:0.75rem;letter-spacing:.1em;color:var(--alu-dim);margin-left:0.5rem;}
.komm-eintrag p{margin:0.1875rem 0 0;font-size:1rem;max-width:62ch;}
.komm-form{margin-top:1.125rem;display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;max-width:35rem;}
.komm-form .ganz{grid-column:1/-1;}
.komm-form label{display:flex;flex-direction:column;gap:0.25rem;font-family:var(--kond);font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--alu);}
.komm-form label small{letter-spacing:.06em;text-transform:none;color:var(--alu-dim);font-size:0.75rem;}
.komm-form input,.komm-form textarea{background:#0E0C0A;color:var(--light);border:0.0625rem solid rgba(184,177,164,.26);border-radius:var(--r);
  padding:0.5625rem 0.6875rem;font-family:var(--serif);font-size:0.9375rem;text-transform:none;letter-spacing:0;}
.komm-form [aria-invalid="true"]{border-color:var(--rot);}
.komm-form .fehler{color:#F08A8F;font-family:var(--kond);font-size:0.8125rem;letter-spacing:.06em;margin:0;min-height:0;}
.komm-form .hin{font-family:var(--kond);font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--alu-dim);margin:0;}
.komm-form .hin a{color:var(--alu);}
.komm-form button{justify-self:start;font-family:var(--kond);font-size:0.875rem;letter-spacing:.14em;text-transform:uppercase;background:var(--rot);
  color:#fff;border:0;padding:0.5625rem 1.125rem;border-radius:var(--r);cursor:pointer;}
.danke{margin-top:1.125rem;padding:0.875rem 1rem;border:0.0625rem solid rgba(184,177,164,.25);border-left:0.1875rem solid var(--blau);border-radius:var(--r);max-width:35rem;}

/* ============ Dialog + Meldung ============ */
.meldung{position:fixed;left:50%;bottom:1.375rem;transform:translate(-50%,1.25rem);z-index:95;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;background:var(--light);color:var(--ink);border-radius:var(--r);padding:0.625rem 0.875rem;
  font-family:var(--kond);font-size:0.9375rem;letter-spacing:.04em;display:flex;gap:0.875rem;align-items:center;max-width:calc(100% - 2rem);box-shadow:0 0.75rem 1.875rem -0.75rem #000;}
.meldung.an{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.meldung button{background:none;border:0;color:var(--rot);font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;}

/* ============ v6.1: keine eckigen Knöpfe ============ */
.tag-knopf,.lk-zeile .teilen,.komm-form button,.dialog-knoepfe button{border-radius:var(--knopf);}
.werkzeug button,.lk-zu,.lk-nav{border-radius:50%;}
.lk-nav{width:3rem;height:3rem;}
.feld input{padding-left:2.25rem;} .feld::before{left:0.875rem;}
.leer button,.lk-werkzeug button,.komm-form button,.dialog-knoepfe button{padding-left:1.125rem;padding-right:1.125rem;}
@media (max-width:800px){
  .bedienfeld{padding:0.625rem 1rem;}
  .filterzeile{gap:0.5rem;}
  .arten{width:100%;}
  .arten button{flex:1;padding:0.5rem 0.25rem;}
  .reiter-gruppe{width:100%;justify-content:space-between;}
  .reiter{padding:0.375rem 0.25rem;}
  main{padding:0 1rem 5rem;}
  .raster{grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr));gap:0.75rem;}
  .lichtkasten{padding:0.75rem;}
  .lk-nav{width:2.5rem;height:2.5rem;}
  .komm-form{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .strang .beschriftung{padding:0.5625rem 0.625rem 0.5rem;gap:0.375rem;}
  .strang .beschriftung .bu{font-size:0.875rem;line-height:1.35;}
  .strang .resonanz{gap:0.625rem;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;}
  .raster .karte{opacity:1;transform:none;}
}
.bedienfeld{padding:0.625rem 1.5rem;}
.bf-innen{gap:0.5rem;max-width:78rem;}
.regler{flex-wrap:nowrap;gap:0.75rem;position:relative;}
.bf-logo,.bf-burger{display:none;}
.kompakt .bf-logo{display:block;flex:none;} .bf-logo img{display:block;height:2.75rem;width:auto;}   /* v1.6 war 2.125rem */
.kompakt .bf-burger{display:block;}
.bf-burger{flex:none;width:2.625rem;height:2.375rem;border-radius:62.4375rem;background:none;border:0.0625rem solid rgba(184,177,164,.35);color:var(--light);font-size:1.0625rem;cursor:pointer;}
.sortierung{flex:none;flex-wrap:nowrap;}
.sortierung .kurz{display:none;}
.kompakt .sortierung button{font-size:1.0625rem;padding:0.375rem 0.875rem;}   /* v1.6 war 0.9375rem */
.filter-knopf{flex:none;display:inline-flex;align-items:center;gap:0.4375rem;font-family:var(--kond);font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;
  padding:0.5rem 1rem;background:none;color:var(--light);border:0.0625rem solid rgba(184,177,164,.35);border-radius:62.4375rem;cursor:pointer;}
.filter-knopf:hover,.filter-knopf[aria-expanded="true"]{border-color:var(--blau);}
.filter-knopf .zahl{background:var(--rot);color:#fff;border-radius:62.4375rem;padding:0 0.4375rem;font-size:0.75rem;}
.filter-knopf .pfeil{font-size:0.6875rem;transition:transform .2s ease;}
.filter-knopf[aria-expanded="true"] .pfeil{transform:rotate(180deg);}
.feld{flex:0 1 12.5rem;}
.filter-box{border-top:0.0625rem solid rgba(184,177,164,.14);padding-top:0.5rem;display:flex;flex-direction:column;gap:0.5rem;}
.filter-box .panel{border-top:0;padding-top:0;}
/* Ansichten „Am meisten gelikt“ und „Neue Einträge zuerst“ */
.ansicht{padding-top:3rem;}
.ansicht-titel{margin:0 0 1.875rem;font-family:var(--kond);font-weight:700;text-transform:uppercase;font-size:clamp(1.875rem,4.4vw,3.5rem);line-height:1;letter-spacing:.01em;}
.ansicht-titel small{display:block;margin-top:0.5rem;font-size:0.9375rem;font-weight:500;letter-spacing:.2em;color:var(--alu-dim);}
.hp-podest{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:3.5rem 2.5rem;align-items:start;padding-top:2.125rem;}
.hp-platz{position:relative;}
.hp-1{grid-row:span 2;}
.hp-nr{position:absolute;z-index:7;left:-2.75rem;top:-1.875rem;font-family:var(--kond);font-weight:700;line-height:1;font-size:6rem;color:var(--ink);
  -webkit-text-stroke:0.125rem var(--rot);text-shadow:0 0.375rem 1.5rem rgba(0,0,0,.6);pointer-events:none;}
.hp-1 .hp-nr{font-size:9.375rem;left:-4rem;top:-3.125rem;color:var(--rot);-webkit-text-stroke:0;}
.hp-liste{list-style:none;margin:3.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:0.625rem;}
.hp-liste .karte{display:grid;grid-template-columns:4rem 7rem minmax(0,1fr) auto;gap:1.125rem;align-items:center;padding:0.625rem 1.125rem 0.625rem 0.625rem;}
.hp-liste .karte:hover{transform:translateX(0.25rem);}
.hp-liste .nr{font-family:var(--kond);font-weight:700;font-size:2.5rem;text-align:center;color:var(--alu);font-variant-numeric:tabular-nums;}
.mini{position:relative;width:7rem;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:#0B0A08;}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mini .audio-dauer{left:0.375rem;top:auto;bottom:0.375rem;font-size:0.75rem;padding:0.0625rem 0.4375rem 0.0625rem 0.3125rem;}
.hp-liste .text b{display:block;font-family:var(--kond);font-weight:600;font-size:1.1875rem;letter-spacing:.02em;line-height:1.2;}
.hp-liste .text span{display:block;color:var(--alu-dim);font-size:0.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hp-liste .likes{display:inline-flex;align-items:center;gap:0.375rem;font-family:var(--kond);font-weight:600;font-size:1.125rem;color:var(--alu);}
.hp-liste .likes svg{width:1.375rem;height:1.375rem;} .hp-liste .likes path{fill:var(--rot);}
.neu-tag{display:grid;grid-template-columns:10.625rem minmax(0,1fr);gap:1.75rem;align-items:start;padding:1.875rem 0;border-top:0.0625rem dashed rgba(184,177,164,.22);}
.stempel{padding-top:0.625rem;}
.stempel span{display:inline-block;font-family:var(--kond);font-weight:700;font-size:1.625rem;letter-spacing:.04em;text-transform:uppercase;color:var(--rot);
  border:0.1875rem solid var(--rot);border-radius:0.5rem;padding:0.1875rem 0.75rem;transform:rotate(-6deg);white-space:nowrap;}
.stempel small{display:block;margin-top:0.875rem;font-family:var(--kond);font-size:0.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--alu-dim);}
.neu-band{display:flex;gap:1.125rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0.25rem 0.125rem 0.875rem;scrollbar-color:rgba(184,177,164,.3) transparent;}
.neu-platz{flex:0 0 17.5rem;scroll-snap-align:start;}
.neu-tag:first-of-type .neu-platz .karte{box-shadow:0 0 0 0.125rem var(--rot);}
@media (max-width:800px){
  .bedienfeld{padding:0.5rem 0.75rem;}
  .regler{gap:0.5rem;}
  .sortierung{padding:0.1875rem;gap:0.125rem;}
  .sortierung button,.kompakt .sortierung button{font-size:0.875rem;padding:0.375rem 0.6875rem;}
  .sortierung .lang{display:none;} .sortierung .kurz{display:inline;}
  .filter-knopf{font-size:0.875rem;padding:0.375rem 0.75rem;}
  .zaehler{display:none;}
  .feld{flex:1 1 2.375rem;min-width:2.375rem;}
  .feld input{padding-right:0!important;}
  .feld:not(:focus-within) input{color:transparent;cursor:pointer;} .feld:not(:focus-within) input::placeholder{color:transparent;}
  .kompakt .bf-logo img{height:1.75rem;}
  .hp-podest{grid-template-columns:1fr;gap:4rem;padding-top:2.5rem;}
  .hp-1{grid-row:auto;}
  .hp-nr{font-size:4rem;left:-0.25rem;top:-3.125rem;} .hp-1 .hp-nr{font-size:5.5rem;left:-0.25rem;top:-4.375rem;}
  .hp-liste .karte{grid-template-columns:2.5rem 5.25rem minmax(0,1fr);gap:0.75rem;}
  .hp-liste .likes{display:none;} .hp-liste .nr{font-size:1.75rem;} .mini{width:5.25rem;}
  .neu-tag{grid-template-columns:1fr;gap:0.75rem;}
  .stempel{display:flex;align-items:center;gap:1rem;padding:0;} .stempel small{margin:0;}
  .neu-platz{flex-basis:78vw;}
}
@media (max-width:420px){ .bf-logo{display:none!important;} }
@media (max-width:800px){   /* v6.4: Zeile passt auch mit ☰ in 360–400 px */
  .regler > .d-marke{display:none!important;}
  .regler{gap:0.375rem;}
  .sortierung button,.kompakt .sortierung button{padding:0.375rem 0.5625rem;letter-spacing:.03em;}
  .filter-knopf{padding:0.375rem 0.625rem;gap:0.25rem;}
  .feld{flex:1 1 2.125rem;min-width:2.125rem;}
  .bf-burger{width:2.25rem;height:2.125rem;font-size:0.9375rem;}
}
/* ============ v6.5 ============ */
.nur-besucher .login-link{display:flex;align-items:center;gap:0.5rem;}
.login-link svg{display:block;width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;}
.redaktion .kl-menue .nur-besucher,.redaktion .bf-menue .nur-besucher{display:none;}
.erster-komm{margin:0;padding:0.5rem 0.6875rem;border-radius:0.625rem;background:rgba(184,177,164,.08);color:var(--alu);font-size:0.875rem;line-height:1.4;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.erster-komm b{font-family:var(--kond);font-weight:600;font-size:0.9375rem;letter-spacing:.04em;color:var(--light);margin-right:0.375rem;}
.erster-komm:hover{background:rgba(184,177,164,.14);}
.neu-band{display:grid;grid-template-columns:repeat(auto-fill,minmax(16.25rem,1fr));gap:1.125rem;align-items:start;overflow:visible;padding:0.25rem 0 0;scroll-snap-type:none;}
.neu-platz{flex:none;}
.neu-liste{margin:0;}
.neu-liste .karte{grid-template-columns:7rem minmax(0,1fr) auto;}
.lk-zeile{border:0;padding:0.5rem 0.125rem 0;font-size:1rem;font-weight:600;letter-spacing:.04em;color:var(--alu);}
.lk-zeile .spr{cursor:pointer;}
.lk-zeile .teilen{margin-left:auto;padding:0;width:auto;height:2.25rem;border-radius:0;}
.lk-schritt{position:fixed;top:50%;transform:translateY(-50%);z-index:62;width:3.5rem;height:3.5rem;border-radius:50%;cursor:pointer;
  background:rgba(18,16,14,.85);color:var(--light);border:0.0625rem solid rgba(184,177,164,.4);font-size:1.875rem;line-height:1;padding-bottom:0.25rem;}
.lk-schritt[data-schritt="-1"]{left:1rem;} .lk-schritt[data-schritt="1"]{right:1rem;}
.lk-schritt:hover{border-color:var(--light);background:rgba(18,16,14,.95);}
@media (max-width:1120px){ .lk-innen{padding-left:3.5rem;padding-right:3.5rem;} }
@media (max-width:800px){
  .neu-liste .karte{grid-template-columns:5.25rem minmax(0,1fr);}
  .lk-innen{padding-left:0;padding-right:0;}
  .lk-schritt{top:auto;bottom:1rem;transform:none;width:3rem;height:3rem;}
}
/* ============ v6.9: Epochen im Timeline-Knopf, gleich hohe Bedienelemente, Filter im Menü ============ */
.sortierung{height:3rem;align-items:center;}
.sortierung button{display:inline-flex;align-items:center;height:2.375rem;padding:0 1.25rem;line-height:1;}
.tl-knopf{display:inline-flex;align-items:center;gap:0.375rem;border-radius:62.4375rem;padding-right:0.3125rem;}
.tl-knopf:has(> [aria-pressed="true"]){background:var(--rot);}
.tl-knopf > button[aria-pressed="true"]{background:none;}
.eps{display:inline-flex;gap:0.3125rem;}
.sortierung .eps button{height:1.75rem;padding:0 0.6875rem;font-size:1rem;letter-spacing:.04em;color:var(--light);background:var(--ink);border:0.125rem solid var(--blau);}
.sortierung .eps button:hover{background:rgba(0,101,173,.35);}
.eps button[aria-pressed="true"],.sortierung .eps button[aria-pressed="true"]{background:var(--blau);color:#fff;}
.ep-zeile{display:none;}
.filter-knopf{height:3rem;padding:0 1.375rem;font-size:1.1875rem;letter-spacing:.06em;line-height:1;}
.feld{flex:0 1 17.5rem;}
.feld input{height:3rem;border-radius:62.4375rem;padding:0 1rem 0 2.75rem;font-size:1.1875rem!important;border-color:rgba(184,177,164,.35);}
.feld::before{left:1.125rem;font-size:1.375rem;}
.bf-burger{width:3rem;height:3rem;}
.kompakt .sortierung{height:2.75rem;}   /* v1.6 kompakte Leiste größer (war 2.5 / 1.875 / 1.375 / 0.8125 / 0.9375) */
.kompakt .sortierung button{height:2.125rem;}
.kompakt .sortierung .eps button{height:1.5625rem;font-size:0.9375rem;padding:0 0.5625rem;}
.kompakt .filter-knopf,.kompakt .feld input{height:2.75rem;font-size:1.0625rem!important;}
.kompakt .filter-knopf{padding:0 1.125rem;} .kompakt .feld{flex-basis:15rem;}
.kompakt .bf-burger{width:2.75rem;height:2.75rem;}
/* v1.6 Überblendung normal ↔ kompakt */
/* v1.9 Überblendung alt ↔ neu (archiv.js startViewTransition); nur die Leiste, Rest der Seite bleibt live. Bilder oben bündig, nicht gestaucht. */
:root{view-transition-name:none;}
.bedienfeld{view-transition-name:bedienfeld;}
::view-transition-group(bedienfeld){animation-duration:.35s;}
::view-transition-old(bedienfeld),::view-transition-new(bedienfeld){height:auto;width:100%;object-fit:none;object-position:top;animation-duration:.35s;}
/* v1.9 Nach oben: unten rechts, erst nach 1,5 Bildschirmhöhen */
.nach-oben{position:fixed;right:max(1.25rem,env(safe-area-inset-right));bottom:max(1.25rem,env(safe-area-inset-bottom));z-index:40;width:3.25rem;height:3.25rem;border-radius:50%;cursor:pointer;
  background:var(--rot);color:#fff;border:0.1875rem solid var(--blau);box-shadow:0 0.75rem 1.875rem -0.75rem #000;display:grid;place-items:center;}
.nach-oben svg{width:1.25rem;height:1.25rem;fill:currentColor;}
.nach-oben:hover{background:#FF1A26;box-shadow:0 0 1.25rem rgba(227,6,19,.7);}
@media (max-width:800px){ .nach-oben{width:2.75rem;height:2.75rem;right:0.875rem;bottom:0.875rem;} }
.bf-menue .menue-filter a{display:flex;align-items:center;gap:0.625rem;color:var(--light);font-weight:600;font-size:1.0625rem;}
.bf-menue .menue-trenn{height:0.0625rem;margin:0.375rem 0;background:rgba(184,177,164,.18);}
@media (max-width:1280px){ .kompakt .sortierung .lang{display:none;} .kompakt .sortierung .kurz{display:inline;} }
@media (max-width:1320px){ .sortierung .lang{display:none;} .sortierung .kurz{display:inline;} .zaehler{display:none;} }
@media (max-width:380px){
  .bedienfeld{padding-left:0.5rem;padding-right:0.5rem;} .regler{gap:0.1875rem;} .filter-knopf .pfeil{display:none;}
  .sortierung button,.kompakt .sortierung button{padding:0 0.4375rem;}
  .feld,.kompakt .feld{min-width:2.25rem;} .bf-burger,.kompakt .bf-burger{width:2.25rem;}
}
@media (max-width:800px){
  .tl-knopf .eps{display:none;}
  .tl-knopf{padding-right:0;}
  .sortierung{height:2.5rem;}
  .sortierung button,.kompakt .sortierung button{height:2rem;padding:0 0.5625rem;}
  .filter-knopf,.kompakt .filter-knopf,.feld input,.kompakt .feld input{height:2.5rem;font-size:0.875rem!important;}
  .filter-knopf,.kompakt .filter-knopf{padding:0 0.625rem;}
  .feld,.kompakt .feld{flex:1 1 2.5rem;min-width:2.5rem;}
  .feld input{padding:0 0 0 2.5rem;} .feld::before{left:50%;transform:translate(-50%,-52%);font-size:1.1875rem;}
  .feld:focus-within::before{left:0.875rem;transform:translateY(-52%);}
  .bf-burger,.kompakt .bf-burger{width:2.5rem;height:2.5rem;}
  .ep-zeile{display:flex;gap:0.375rem;}
  .ep-zeile button{flex:1 1 0;height:2.125rem;border-radius:62.4375rem;cursor:pointer;font-family:var(--kond);font-weight:600;font-size:0.9375rem;letter-spacing:.04em;text-transform:uppercase;
    color:var(--light);background:var(--ink);border:0.125rem solid var(--blau);}
  .kompakt .ep-zeile button{height:1.875rem;font-size:0.875rem;}
}

/* Ergänzungen fürs echte Frontend (v1.0) */
.komm-leer{color:var(--alu-dim);margin:0;}
.mehr-zeile{margin:1.75rem 0 0;text-align:center;}
.mehr-zeile .taste{font-size:0.9375rem;padding:0.5rem 1.125rem;}
.lk-buehne .flaeche.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.lk-buehne .vorschau img{object-fit:cover;}

/* v1.3 Timeline-Abschnitte je Epoche (Abstände wie Prototyp v6.12) */
.timeline{position:relative;margin-top:3.25rem;}
.timeline > .bahnen{position:absolute;width:0;height:0;}
html:has(.timeline){overflow-anchor:none;}
.abschnitt + .abschnitt{margin-top:6rem;}
.abschnitt .marke-ep{position:relative;left:auto;right:auto;}
.abschnitt .strang{margin-top:4.5rem;}

/* v1.5 Große Bildschirme: 1rem = 16px bis 1440 px Fensterbreite, dann mitwachsend bis 20px (Inhalt max. 1400 px breit) */
html{font-size:clamp(16px,calc(100vw / 90),20px);}   /* v2.5 zurück auf v1.5 (×1,1 aus v1.6 war zu groß) */
.karte.markiert{box-shadow:0 0 0 .1875rem var(--rot),0 1.125rem 2.5rem -1.25rem #000;}
/* v1.5 Zwischenbreite: Suchfeld darf bis aufs Symbol schrumpfen (wie am Handy) */
@media (min-width:801px) and (max-width:960px){
  .feld,.kompakt .feld{flex:1 1 3rem;min-width:3rem;}
  .feld input,.kompakt .feld input{padding:0 0 0 3rem;}
  .feld::before{left:50%;transform:translate(-50%,-52%);}
  .feld:focus-within::before{left:1.125rem;transform:translateY(-52%);}
  .feld:not(:focus-within) input{color:transparent;cursor:pointer;} .feld:not(:focus-within) input::placeholder{color:transparent;}
}
/* v2.4 Löschen-✕ im Suchfeld: groß genug zum Tippen */
.feld input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:2.5rem;height:2.5rem;margin-right:-0.75rem;cursor:pointer;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3 3 13' stroke='%23F0ECE4' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/0.875rem no-repeat;}
.feld input::-webkit-search-cancel-button:hover{background-color:rgba(184,177,164,.18);}
/* v2.2 Handy: Lupe tippen → Suchfeld klappt als eigene, volle Zeile auf; bleibt offen, solange ein Suchbegriff drinsteht (am Dateiende, damit es die älteren ≤800-Regeln überschreibt) */
@media (max-width:800px){
  .regler:has(.feld:focus-within),.regler:has(#suche:not(:placeholder-shown)){flex-wrap:wrap;row-gap:0.5rem;}   /* v2.3 nur bei offenem Feld umbrechen (v2.4: kein :has in :has) */
  .feld input,.kompakt .feld input{font-size:16px!important;}   /* unter 16 px zoomt das iPhone beim Antippen */
  .feld:is(:focus-within,:has(input:not(:placeholder-shown))){order:10;flex:1 1 100%;min-width:0;}
  .feld:is(:focus-within,:has(input:not(:placeholder-shown))) input{padding:0 1rem 0 2.5rem;color:var(--light);cursor:text;}
  .feld:is(:focus-within,:has(input:not(:placeholder-shown))) input::placeholder{color:var(--alu-dim);}
  .feld:is(:focus-within,:has(input:not(:placeholder-shown)))::before{left:0.875rem;transform:translateY(-52%);}
}