/* „Es war einmal …“ – die Archivseite (ARCHIV-01, Generator tools/build_es_war_einmal.py).
   Betreiber 17.10.2026: kein Braun – DJ-Farben (Schwarz/Anthrazit, Marken-Rot, Creme).
   Alle Farben kommen aus der Gestaltung (--ewe-*, gesetzt im <style> der Seite).
   Ohne JavaScript bleibt „Das Archiv in Worten“ als vollständige Fassung. */
.ewe-seite{background:var(--ewe-himmel,#07070b)}
/* ARCHIV-07: Kopf deckend statt durchsichtig (Betreiber: „transparent sieht doof aus“) */
.ewe-seite .head{background:rgba(10,10,11,.97);border-bottom-color:rgba(233,227,215,.14)}
.ewe{--ewe-leise:color-mix(in srgb,var(--ewe-text) 62%,var(--ewe-himmel));--ewe-linie:color-mix(in srgb,var(--ewe-text) 16%,transparent);
  --ewe-hand:"Segoe Print","Bradley Hand","Comic Neue","Chalkboard SE","Marker Felt",cursive;color:var(--ewe-text)}
.ewe-kopf{max-width:60rem}
@media (max-width:760px){.ewe{padding-top:calc(var(--ewe-kopf,124px) + 22px)}}
.ewe-kicker{font-family:var(--tafel);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ewe-leise);margin:0 0 8px}
.ewe-kopf h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7vw,5.4rem);line-height:.92;margin:0;text-transform:uppercase;text-wrap:balance}
.ewe-kopf h1 span{color:var(--ewe-akzent)}
.ewe-einleitung{margin:14px 0 0;max-width:56ch;color:var(--ewe-leise);font-style:italic}
.ewe-leer{margin:28px 0;padding:18px;border:1px dashed var(--ewe-linie);font-family:var(--tafel);font-size:14px;color:var(--ewe-leise)}
.ewe-zurueck{margin:40px 0 0}

/* Ansichtswahl */
.ewe-wahl{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 0}
.ewe-wahl button{background:none;border:1px solid var(--ewe-linie);color:var(--ewe-leise);font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px;padding:8px 14px;min-height:44px;cursor:pointer}
.ewe-wahl button[aria-pressed="true"]{border-color:var(--ewe-text);color:var(--ewe-text);box-shadow:inset 0 -3px 0 var(--ewe-akzent)}
.ewe-wahl button:focus-visible,.ewe button:focus-visible,.ewe a:focus-visible{outline:3px solid var(--ewe-text);outline-offset:2px}
.ewe-buehne{margin:18px calc(var(--rand,20px) * -1) 0;position:relative}
.ewe-steuer{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px var(--rand,20px);border-top:1px solid var(--ewe-linie);border-bottom:1px solid var(--ewe-linie)}
.ewe-knopf{background:var(--ewe-akzent);border:0;color:#f2ede2;font-family:var(--display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:14px;padding:0 16px;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;-webkit-appearance:none;appearance:none;border-radius:0}
.ewe-sym{width:18px;height:18px;flex:none;display:block}
/* Kiste: Zurück · Platte ziehen · Weiter – eine Zeile, auch am Handy */
.ewe-steuer--drei{display:grid;grid-template-columns:1fr 1.4fr 1fr;flex-wrap:nowrap}
.ewe-steuer--drei .ewe-knopf{padding:0 10px;min-width:0}
@media (max-width:420px){.ewe-steuer--drei{gap:6px}.ewe-steuer--drei .ewe-knopf{font-size:12px;letter-spacing:.06em;padding:0 6px;gap:4px}.ewe-steuer--drei .ewe-sym{width:15px;height:15px}}
.ewe-knopf.leise{background:none;border:1px solid var(--ewe-linie);color:var(--ewe-text)}
.ewe-steuer input[type=range]{flex:1;min-width:150px;accent-color:var(--ewe-akzent);min-height:44px}
.ewe-hinweis{font-family:var(--tafel);font-size:11px;color:var(--ewe-leise);letter-spacing:.06em}
.ewe-jahr{font-family:var(--display);font-weight:700;font-size:28px;min-width:4.2ch;text-align:right}
/* Rahmen ist ein <span> in Knöpfen: ohne Block hätte ein Stück ohne Bild keine Fläche. */
.ewe-rahmen{display:block}
.ewe-spiel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(10,9,9,.7);border:2px solid #f2ede2;color:#f2ede2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ewe-spiel .ewe-sym{width:22px;height:22px;margin-left:3px}
.ewe-cover-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:14px;text-align:center;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--f) 40%,transparent),#141118 72%);color:#f2ede2}
.ewe-cover-text b{font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,54px);line-height:1;color:var(--f)}
.ewe-cover-text i{font-size:14px;line-height:1.35}

/* ── Plattenkiste ── */
.ewe-kiste-huelle{position:relative;height:min(74vh,620px);min-height:470px;overflow:hidden;perspective:1100px;perspective-origin:50% 10%;
  touch-action:pan-y;user-select:none;
  background:radial-gradient(ellipse 55% 60% at 50% 0%,color-mix(in srgb,var(--ewe-text) 11%,transparent) 0%,transparent 70%),
  linear-gradient(180deg,var(--ewe-himmel) 0%,var(--ewe-himmel) 55%,color-mix(in srgb,var(--ewe-holz) 70%,var(--ewe-himmel)) 100%)}
.ewe-kiste-huelle::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ewe-akzent);opacity:.8}
.ewe-kiste{position:absolute;left:50%;bottom:64px;width:min(340px,70vw);height:min(340px,70vw);transform:translateX(-50%);transform-style:preserve-3d}
.ewe-huelle{position:absolute;inset:0;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s;background:none;border:0;padding:0;cursor:pointer;transform-style:preserve-3d}
.ewe-huelle>*{transition:opacity .35s}
/* Weg = durchgeblättert oder weit hinten. In 3D-Ebenen wirkt opacity am Elternteil nicht
   auf die Kinder (Chrome) – deshalb die Teile ausblenden und danach ganz verstecken. */
.ewe-huelle.weg{visibility:hidden;pointer-events:none;transition:transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s linear .4s}
.ewe-huelle.weg>*{opacity:0}
.ewe-huelle .ewe-cover{position:absolute;inset:0;overflow:hidden;background:#1d1a1f;box-shadow:0 -2px 0 rgba(255,255,255,.08) inset,0 20px 40px rgba(0,0,0,.6)}
.ewe-huelle .ewe-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ewe-huelle .ewe-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 40%,transparent 70%,rgba(0,0,0,.35));pointer-events:none}
.ewe-huelle .ewe-scheibe{position:absolute;top:4%;right:4%;width:92%;height:92%;border-radius:50%;
  background:radial-gradient(circle,var(--f) 0 16%,#0c0c0c 16.5% 18%,#161616 18.5%),repeating-radial-gradient(circle,#111 0 2px,#1b1b1b 2px 3px);
  transform:translateZ(-2px);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ewe-huelle .ewe-scheibe{opacity:0}
.ewe-huelle.gezogen .ewe-scheibe{opacity:1;transform:translateZ(-2px) translateY(-48%) rotate(90deg)}
.ewe-huelle.gezogen .ewe-cover{transform:translateY(6%)}
.ewe-huelle .ewe-cover{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ewe-huelle .ewe-aufkleber{position:absolute;left:10px;top:10px;font-family:var(--tafel);font-size:11px;background:#f2ede2;color:#0a0909;padding:2px 6px}
.ewe-huelle.trenner{cursor:default}
.ewe-huelle.trenner .ewe-cover{background:var(--ewe-holz);border-top:1px solid color-mix(in srgb,var(--ewe-text) 14%,transparent);display:flex;align-items:flex-start;justify-content:center}
.ewe-huelle.trenner b{font-family:var(--display);font-size:22px;background:var(--ewe-akzent);color:#f2ede2;padding:4px 18px 6px;letter-spacing:.06em}
.ewe-kiste-front{position:absolute;left:50%;bottom:0;width:min(440px,90vw);height:96px;transform:translateX(-50%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ewe-holz) 85%,#fff 6%),var(--ewe-holz) 40%,color-mix(in srgb,var(--ewe-holz) 70%,#000));
  border-top:3px solid var(--ewe-akzent);box-shadow:0 -14px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;align-items:flex-start;justify-content:center;padding-top:24px;font-family:var(--display);letter-spacing:.3em;color:color-mix(in srgb,var(--ewe-text) 55%,transparent);font-size:14px;text-transform:uppercase}
.ewe-blatt{position:absolute;top:50%;z-index:5;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ewe-text) 35%,transparent);background:rgba(10,9,9,.72);color:var(--ewe-text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;-webkit-appearance:none;appearance:none}
.ewe-blatt .ewe-sym{width:26px;height:26px}
.ewe-blatt:hover{border-color:var(--ewe-text);background:var(--ewe-akzent)}
.ewe-blatt:disabled{opacity:.25;cursor:default;background:rgba(10,9,9,.72)}
.ewe-blatt.links{left:max(12px,calc(50% - min(340px,70vw)/2 - 80px))}
.ewe-blatt.rechts{right:max(12px,calc(50% - min(340px,70vw)/2 - 80px))}
.ewe-kiste-hilfe{position:absolute;left:0;right:0;bottom:16px;margin:0;padding:0 16px;z-index:4;text-align:center;font-family:var(--tafel);font-size:12px;
  letter-spacing:.08em;color:color-mix(in srgb,var(--ewe-text) 70%,transparent);pointer-events:none}
.ewe-kiste-hilfe b{color:var(--ewe-text);font-weight:600}
.ewe-zaehler{display:block;margin-top:6px;font-family:var(--tafel);font-size:12px;color:var(--ewe-text)}
.ewe-kiste-info{position:absolute;right:var(--rand,20px);top:20px;max-width:min(300px,60vw);text-align:right}
.ewe-kiste-info b{font-family:var(--display);font-size:24px;line-height:1.05;text-transform:uppercase;display:block}
.ewe-kiste-info span{font-family:var(--tafel);font-size:12px;color:var(--ewe-leise)}
@media (max-width:640px){.ewe-kiste-info{left:var(--rand,20px);right:var(--rand,20px);max-width:none;text-align:left}}

/* ── Filmstreifen ── */
.ewe-film{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px var(--rand,20px) 14px;scrollbar-color:var(--ewe-akzent) transparent}
.ewe-film-teil{flex:none;scroll-snap-align:center;position:relative;background:var(--ewe-holz);padding:30px 10px;
  background-image:radial-gradient(ellipse 5px 7px at 50% 50%,var(--ewe-himmel) 98%,transparent),radial-gradient(ellipse 5px 7px at 50% 50%,var(--ewe-himmel) 98%,transparent);
  background-size:22px 14px,22px 14px;background-position:0 8px,0 calc(100% - 8px);background-repeat:repeat-x}
.ewe-film-teil.trenner{width:110px;display:flex;align-items:center;justify-content:center}
.ewe-film-teil.trenner b{font-family:var(--display);font-size:34px;color:var(--ewe-akzent);writing-mode:vertical-rl;transform:rotate(180deg)}
.ewe-film .ewe-bild{display:block;width:220px;background:none;border:0;padding:0;cursor:pointer;position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ewe-film .ewe-bild:hover{transform:translateY(-6px) scale(1.04)}
.ewe-film .ewe-rahmen{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1d1a1f}
.ewe-film .ewe-rahmen img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.2) contrast(1.05)}
.ewe-film .ewe-kante>span:first-child::before{content:"";display:inline-block;width:0;height:0;border-left:5px solid currentColor;border-block:4px solid transparent;margin-right:5px}
.ewe-film .ewe-kante{display:flex;justify-content:space-between;font-family:var(--tafel);font-size:10px;color:color-mix(in srgb,var(--ewe-akzent) 70%,#fff);letter-spacing:.12em;margin-top:6px}
.ewe-film .ewe-unter{margin:8px 2px 0;font-size:14px;line-height:1.3;width:220px}
.ewe-film .ewe-unter small{display:block;font-family:var(--tafel);font-size:11px;color:var(--ewe-leise)}

/* ── Poesiealbum ── */
.ewe-album-huelle{padding:30px var(--rand,20px) 30px;background:radial-gradient(ellipse at 30% 15%,color-mix(in srgb,var(--ewe-akzent) 22%,transparent) 0%,transparent 60%),var(--ewe-himmel)}
.ewe-album{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;perspective:1800px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
@media (max-width:760px){.ewe-album{grid-template-columns:1fr}.ewe-album .links{display:none}}
.ewe-seite-blatt{position:relative;min-height:520px;padding:34px 28px 44px;color:var(--ewe-tinte);
  background:repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in srgb,var(--ewe-tinte) 14%,transparent) 31px 32px),var(--ewe-papier)}
.ewe-seite-blatt.links{border-radius:6px 0 0 6px;box-shadow:inset -30px 0 40px -20px rgba(0,0,0,.35);transform-origin:100% 50%}
.ewe-seite-blatt.rechts{border-radius:0 6px 6px 0;box-shadow:inset 30px 0 40px -20px rgba(0,0,0,.35);transform-origin:0 50%}
.ewe-seite-blatt.kippt-r{animation:ewe-kippR .45s ease-in forwards}.ewe-seite-blatt.kommt-l{animation:ewe-kommtL .45s ease-out}
.ewe-seite-blatt.kippt-l{animation:ewe-kippL .45s ease-in forwards}.ewe-seite-blatt.kommt-r{animation:ewe-kommtR .45s ease-out}
@keyframes ewe-kippR{to{transform:rotateY(-90deg)}}@keyframes ewe-kommtL{from{transform:rotateY(90deg)}}
@keyframes ewe-kippL{to{transform:rotateY(90deg)}}@keyframes ewe-kommtR{from{transform:rotateY(-90deg)}}
.ewe-blatt-kopf{font-family:var(--ewe-hand);font-size:28px;line-height:1;margin:0 0 16px}
.ewe-seitenzahl{position:absolute;bottom:12px;font-family:var(--ewe-hand);font-size:18px;opacity:.7}
.links .ewe-seitenzahl{left:24px}.rechts .ewe-seitenzahl{right:24px}
.ewe-klebe{position:relative;margin:0 0 24px}
.ewe-polaroid{display:block;width:min(230px,72%);background:#fbf8f1;padding:10px 10px 40px;box-shadow:0 10px 22px rgba(0,0,0,.45);position:relative;border:0;cursor:pointer;transition:transform .3s}
.ewe-polaroid:hover{transform:rotate(0) scale(1.03)!important}
.ewe-polaroid .ewe-rahmen{position:relative;aspect-ratio:1/1;overflow:hidden;background:#222}
.ewe-polaroid img{width:100%;height:100%;object-fit:cover;display:block}
.ewe-polaroid .ewe-unterschrift{position:absolute;left:8px;right:8px;bottom:8px;font-family:var(--ewe-hand);font-size:17px;line-height:1.05;color:var(--ewe-tinte);text-align:center}
.ewe-band{position:absolute;width:86px;height:24px;background:color-mix(in srgb,var(--ewe-akzent) 55%,transparent);top:-10px;left:50%;margin-left:-43px;transform:rotate(-4deg);z-index:1}
.ewe-band.b1{background:rgba(233,227,215,.55)}.ewe-band.b2{background:rgba(10,9,9,.4)}
.ewe-ticket{display:inline-grid;grid-template-columns:auto 1fr;border:0;cursor:pointer;background:var(--ewe-akzent);color:#f2ede2;padding:0;box-shadow:0 8px 18px rgba(0,0,0,.4);font-family:var(--tafel);text-align:left;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.ewe-ticket span{padding:10px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ewe-ticket span:first-child{border-right:2px dashed rgba(242,237,226,.45);writing-mode:vertical-rl;transform:rotate(180deg);font-weight:600}
.ewe-ticket b{display:block;font-family:var(--display);font-size:20px;letter-spacing:.04em}
.ewe-schrift{font-family:var(--ewe-hand);font-size:21px;line-height:1.2;margin:8px 0 0;max-width:34ch}
.ewe-datum{font-family:var(--ewe-hand);font-size:17px;color:var(--ewe-akzent);display:block;width:max-content;max-width:100%;transform:rotate(-3deg);margin-top:6px}
.ewe-stern{position:absolute;right:6%;top:4px;width:44px;height:44px;background:var(--f);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transform:rotate(12deg);opacity:.85}
.ewe-mehr{background:none;border:1px solid color-mix(in srgb,var(--ewe-tinte) 35%,transparent);color:var(--ewe-tinte);min-height:36px;padding:0 12px;margin-top:6px;cursor:pointer;font-size:13px}
.ewe-blaettern{display:flex;justify-content:center;gap:12px;margin-top:18px}
.ewe-blaettern .ewe-knopf.leise{color:var(--ewe-papier);border-color:rgba(241,231,207,.3)}
.ewe[data-bewegung="lebendig"] .ewe-polaroid{animation:ewe-schweben 7s ease-in-out infinite}
@keyframes ewe-schweben{50%{translate:0 -4px}}

/* ── Zeitreise ── */
.ewe-tunnel{position:relative;height:min(74vh,640px);min-height:440px;overflow:hidden;perspective:900px;perspective-origin:50% 42%;touch-action:pan-x;
  background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--ewe-dunkel) 25%,var(--ewe-himmel)) 0%,var(--ewe-himmel) 70%)}
.ewe-boden{position:absolute;left:-50%;right:-50%;bottom:-10%;height:120%;transform-origin:50% 100%;transform:rotateX(84deg);
  background-image:linear-gradient(color-mix(in srgb,var(--ewe-akzent) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ewe-akzent) 35%,transparent) 1px,transparent 1px);background-size:80px 80px;
  -webkit-mask:linear-gradient(to top,#000 10%,transparent 85%);mask:linear-gradient(to top,#000 10%,transparent 85%)}
.ewe-welt{position:absolute;inset:0;transform-style:preserve-3d}
.ewe-tk{position:absolute;left:50%;top:44%;width:230px;margin:-150px 0 0 -115px;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.ewe-tk .ewe-karte{background:#141118;border:1px solid var(--ewe-linie);padding:8px 8px 10px;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px color-mix(in srgb,var(--f) 35%,transparent)}
.ewe-tk .ewe-rahmen{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1d1a1f}
.ewe-tk img{width:100%;height:100%;object-fit:cover;display:block}
.ewe-tk .ewe-zeile{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-family:var(--tafel);font-size:11px;color:var(--ewe-leise)}
.ewe-tk .ewe-zeile b{font-family:var(--display);font-weight:500;font-size:15px;color:var(--ewe-text)}
.ewe-jahrtafel{position:absolute;left:var(--rand,20px);top:18px;font-family:var(--display);font-weight:700;font-size:clamp(48px,9vw,110px);line-height:1;color:color-mix(in srgb,var(--ewe-text) 10%,transparent);pointer-events:none}

/* ── Lightbox ── */
.ewe-lb{position:fixed;inset:0;z-index:60;display:none;background:rgba(4,3,6,.92);padding:clamp(10px,3vw,30px);color:var(--ewe-text)}
.ewe-lb.offen{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:8px}
@media (max-width:640px){.ewe-lb.offen{grid-template-columns:1fr;overflow:auto}.ewe-lb .ewe-pfeil{display:none}}
.ewe-lb-inhalt{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:22px;max-width:1100px;margin:0 auto;width:100%;align-items:center;animation:ewe-auf .4s cubic-bezier(.2,.8,.2,1)}
@media (max-width:860px){.ewe-lb-inhalt{grid-template-columns:1fr}}
@keyframes ewe-auf{from{opacity:0;transform:scale(.94) translateY(16px)}}
.ewe-lb-medium{background:#000;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.ewe-lb-medium img,.ewe-lb-medium video{display:block;width:100%;max-height:74vh;object-fit:contain;background:#000}
.ewe-lb-medium .ewe-cover-text{position:relative;aspect-ratio:4/3}
.ewe-lb-meta{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.ewe-lb-meta span{font-family:var(--tafel);font-size:11px;padding:3px 8px;border:1px solid var(--ewe-linie);color:var(--ewe-leise)}
.ewe-lb h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.02;margin:0 0 10px;text-transform:uppercase}
.ewe-lb-text{margin:0;font-size:18px;font-style:italic;line-height:1.6}
.ewe-lb-bruecke{margin-top:16px;padding-top:12px;border-top:1px solid var(--ewe-linie);font-size:15px}
.ewe-lb-bruecke a{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ewe-text);border-bottom:2px solid var(--ewe-akzent)}
.ewe-lb-zaehl{font-family:var(--tafel);font-size:11px;color:var(--ewe-leise);margin-top:14px}
.ewe-pfeil,.ewe-zu{background:rgba(10,9,9,.6);border:1px solid var(--ewe-linie);color:var(--ewe-text);width:52px;height:52px;font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;-webkit-appearance:none;appearance:none;border-radius:0}
.ewe-pfeil .ewe-sym{width:26px;height:26px}
.ewe-zu{position:absolute;top:12px;right:12px}

/* ── Das Archiv in Worten ── */
.ewe-worte{margin:44px 0 0;max-width:62rem}
.ewe-worte h2{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.ewe-dekade{font-family:var(--tafel);font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--ewe-leise);margin:22px 0 8px;text-transform:uppercase}
.ewe-liste{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ewe-eintrag{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding-left:14px;border-left:2px solid var(--ewe-linie)}
.ewe-eintrag img{width:80px;height:100px;object-fit:cover}
.ewe-eintrag h4{font-family:var(--display);font-weight:500;letter-spacing:.02em;margin:0;font-size:19px}
.ewe-eintrag p{margin:2px 0 0;font-size:16px}
.ewe-eintrag .ewe-zeit{font-family:var(--tafel);font-size:12px;color:var(--ewe-leise)}
.ewe-fam-rock{border-left-color:var(--ewe-rock)}.ewe-fam-dunkel{border-left-color:var(--ewe-dunkel)}.ewe-fam-jahrzehnte{border-left-color:var(--ewe-jahrzehnte)}
.ewe-fam-saison{border-left-color:var(--ewe-saison)}.ewe-fam-ohne{border-left-color:var(--ewe-ohne)}
.ewe-clip-link{display:inline-block;margin-top:4px;color:var(--ewe-text)}
.ewe-js .ewe-worte details{margin-top:8px}

.ewe[data-bewegung="aus"] *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.ewe *,.ewe-lb *{transition:none!important;animation:none!important}}

/* ── ARCHIV-05: Bildwirkung je Stück – nur Filter und Ebenen, die Datei bleibt unverändert ── */
.ewe-lb-medium{position:relative}
.ewe-eintrag>span[class^="ewe-w-"]{position:relative;display:inline-block}
[class*="ewe-w-"] img,[class*="ewe-w-"] video{transition:filter .3s}
.ewe-w-sw img,.ewe-w-sw video{filter:grayscale(1) contrast(1.18) brightness(.95)}
.ewe-w-sepia img,.ewe-w-sepia video{filter:sepia(.9) saturate(1.15) contrast(1.05) brightness(.9)}
.ewe-w-alt img,.ewe-w-alt video{filter:sepia(.45) saturate(.6) contrast(.86) brightness(1.06) blur(.3px)}
.ewe-w-vhs img,.ewe-w-vhs video{filter:saturate(1.35) contrast(1.1) blur(.4px)}
.ewe-patina{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.ewe-patina::before{content:"";position:absolute;inset:-20%;opacity:.18;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ewe-patina::after{content:"";position:absolute;inset:0}
.ewe-w-sw .ewe-patina::after,.ewe-w-sepia .ewe-patina::after{background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 50%,rgba(20,12,6,.6) 100%)}
.ewe-w-alt .ewe-patina::before{opacity:.3}
.ewe-w-alt .ewe-patina::after{background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 45%,rgba(20,12,6,.7) 100%),
  linear-gradient(100deg,rgba(255,140,60,.25) 0%,transparent 22%,transparent 85%,rgba(255,200,120,.15) 100%)}
.ewe-w-vhs .ewe-patina::after{background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.ewe-osd{position:absolute;right:8px;top:8px;font-family:var(--tafel);font-weight:600;font-size:12px;letter-spacing:.06em;color:#f2ede2;
  text-shadow:2px 0 rgba(255,0,60,.6),-2px 0 rgba(0,200,255,.5)}
.ewe[data-bewegung="lebendig"] .ewe-patina::before{animation:ewe-korn .4s steps(3) infinite}
@keyframes ewe-korn{33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
@media (prefers-reduced-motion:reduce){.ewe-patina::before{animation:none}}

/* ── ARCHIV-06: Showreel – eine Erinnerung pro Bildschirm, natives Scrollen mit Einrasten ── */
/* ARCHIV-07: eigene Rolle unter dem Kopf – jeder Wisch rastet genau eine Sektion weiter */
html.ewe-reel-an{scroll-snap-type:y proximity}
html.ewe-reel-an body{overflow-x:clip}
.ewe-reel{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:calc(100vh - var(--ewe-kopf,64px));height:calc(100svh - var(--ewe-kopf,64px));
  scroll-snap-align:start;scroll-margin-top:var(--ewe-kopf,64px)}
.ewe-reel-rolle{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ewe-reel-rolle::-webkit-scrollbar{display:none}
.ewe-rb{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;display:flex;align-items:flex-end;background:var(--ewe-himmel)}
.ewe-rb-grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ewe-rb-foto .ewe-rb-grund{transform:scale(1.06);transition:transform 9s linear,filter .3s}
.ewe-rb-foto.aktiv .ewe-rb-grund{transform:scale(1.18) translateY(-2%)}
.ewe-rb-foto,.ewe-rb-clip{cursor:zoom-in}
.ewe-rb-verlauf{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,7,11,.45) 0%,rgba(7,7,11,0) 28%,rgba(7,7,11,.15) 55%,rgba(7,7,11,.92) 100%)}
.ewe-rb .ewe-patina{z-index:1}
.ewe-rb-text{position:relative;z-index:2;width:100%;max-width:640px;padding:0 70px 96px var(--rand,20px)}
@media (min-width:900px){.ewe-rb-text{margin-left:max(0px,calc((100vw - var(--seitenbreite,1240px)) / 2))}}
.ewe-rb-meta{font-family:var(--tafel);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ewe-leise);margin:0 0 10px}
.ewe-rb-meta i{font-style:normal;color:var(--f)}
.ewe-rb-text h3{font-family:var(--display);font-weight:700;font-size:clamp(34px,9vw,68px);line-height:.95;text-transform:uppercase;margin:0 0 10px;text-wrap:balance;color:var(--ewe-text)}
.ewe-rb-text p:not(.ewe-rb-meta){margin:0;font-size:17px;line-height:1.5;font-style:italic;max-width:34ch;color:var(--ewe-text)}
.ewe-rb-text>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.ewe-rb.aktiv .ewe-rb-text>*{opacity:1;transform:none}
.ewe-rb.aktiv .ewe-rb-text>*:nth-child(2){transition-delay:.12s}.ewe-rb.aktiv .ewe-rb-text>*:nth-child(3){transition-delay:.24s}
.ewe-rb-clipmarke{position:absolute;z-index:3;left:var(--rand,20px);top:16px;display:flex;align-items:center;gap:6px;font-family:var(--tafel);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ewe-text)}
.ewe-rb-clipmarke i{width:8px;height:8px;border-radius:50%;background:var(--ewe-akzent)}
.ewe-rb.aktiv .ewe-rb-clipmarke i{animation:ewe-rec 1.2s steps(2) infinite}
@keyframes ewe-rec{50%{opacity:.2}}
.ewe-rb .ewe-osd{top:14px;right:52px;font-size:14px}
/* Titelkarte: Stück ohne Bild */
.ewe-rb-karte{align-items:center;justify-content:center;background:radial-gradient(ellipse 80% 50% at 50% 45%,color-mix(in srgb,var(--f) 14%,transparent) 0%,transparent 70%),var(--ewe-himmel)}
.ewe-rb-karteninhalt{position:relative;text-align:center;padding:0 24px;max-width:760px}
.ewe-rb-art{font-family:var(--tafel);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--f);margin:0 0 18px}
.ewe-rb-karte h3{font-family:var(--display);font-weight:700;font-size:clamp(44px,13vw,120px);line-height:.88;text-transform:uppercase;margin:0;color:var(--ewe-text)}
.ewe-rb-karte h3 .w{display:inline-block;opacity:0;transform:translateY(40%);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 90ms)}
.ewe-rb-karte.aktiv h3 .w{opacity:1;transform:none}
.ewe-rb-linie{width:0;height:2px;background:var(--f);margin:22px auto 16px;transition:width .9s cubic-bezier(.2,.8,.2,1) .4s}
.ewe-rb-karte.aktiv .ewe-rb-linie{width:72px}
.ewe-rb-wo{font-family:var(--tafel);font-size:13px;letter-spacing:.08em;color:var(--ewe-text);margin:0;opacity:0;transition:opacity .6s .6s}
.ewe-rb-wo em{display:block;margin-top:6px;color:var(--ewe-leise);font-style:normal}
.ewe-rb-karte.aktiv .ewe-rb-wo{opacity:1}
.ewe-rb-satz{margin:22px auto 0;max-width:30ch;font-style:italic;font-size:17px;line-height:1.5;color:var(--ewe-text);opacity:0;transition:opacity .7s .8s}
.ewe-rb-karte.aktiv .ewe-rb-satz{opacity:1}
.ewe-rb-ort.aktiv h3{animation:ewe-neon 1.6s steps(1) .2s 1 both}
@keyframes ewe-neon{0%{opacity:.2}12%{opacity:1;text-shadow:0 0 18px var(--f)}18%{opacity:.35}26%{opacity:1}100%{opacity:1;text-shadow:0 0 22px color-mix(in srgb,var(--f) 70%,transparent)}}
/* Jahrzehnt */
.ewe-rb-dekade{align-items:center;justify-content:center;background:var(--ewe-holz)}
.ewe-rb-riesig{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--display);font-weight:700;
  font-size:clamp(220px,62vw,560px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ewe-text) 12%,transparent);pointer-events:none}
.ewe-rb-mitte{position:relative;text-align:center;padding:0 24px}
.ewe-rb-mitte small{display:block;font-family:var(--tafel);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ewe-leise);margin-bottom:10px}
.ewe-rb-dekade h2,.ewe-rb-schluss h2{font-family:var(--display);font-weight:700;font-size:clamp(60px,18vw,150px);line-height:.9;margin:0;text-transform:uppercase;color:var(--ewe-text)}
.ewe-rb-schluss h2{font-size:clamp(44px,13vw,100px);margin-bottom:16px}
.ewe-rb-schluss h2 span{color:var(--ewe-akzent)}
.ewe-rb-unter{margin:12px 0 0;font-style:italic;font-size:18px;color:var(--ewe-text)}
.ewe-rb-anzahl{margin:14px 0 0;font-family:var(--tafel);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ewe-leise)}
.ewe-rb-mitte>*{opacity:0;transform:scale(.96);transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.ewe-rb.aktiv .ewe-rb-mitte>*{opacity:1;transform:none}
.ewe-rb-los{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:0;color:var(--ewe-text);font-family:var(--tafel);font-size:11px;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;min-height:44px}
.ewe-rb-los .ewe-sym{width:28px;height:28px;animation:ewe-wipp 1.8s ease-in-out infinite}
@keyframes ewe-wipp{50%{transform:translateY(8px)}}
/* Schluss */
.ewe-rb-schluss{align-items:center;justify-content:center}
.ewe-rb-schluss p{color:var(--ewe-leise);margin:0 0 22px}
.ewe-rb-wege{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ewe-rb-wege a{text-decoration:none}
.ewe-rb-nochmal{margin-top:26px;background:none;border:0;color:var(--ewe-leise);font-family:var(--tafel);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center;min-height:44px;cursor:pointer}
/* Leiste, Zeit, Fortschritt liegen über der Rolle (nicht fest am Bildschirm); am Schluss ausgeblendet */
.ewe-rb-leiste,.ewe-rb-unten,.ewe-rb-balken{position:absolute;z-index:20;transition:opacity .35s}
.ewe-rb-unten{pointer-events:none}
.ewe-reel-rand .ewe-rb-leiste,.ewe-reel-rand .ewe-rb-unten{opacity:0;pointer-events:none}
.ewe-rb-leiste{right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;height:min(52vh,360px);padding:6px 0}
.ewe-rb-leiste::before{content:"";position:absolute;right:13px;top:0;bottom:0;width:1px;background:var(--ewe-linie)}
.ewe-rb-leiste button{position:relative;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 0;min-height:40px;
  font-family:var(--tafel);font-size:10px;letter-spacing:.1em;color:var(--ewe-leise)}
.ewe-rb-leiste button::after{content:"";width:9px;height:9px;border-radius:50%;border:1px solid var(--ewe-leise);background:var(--ewe-himmel);margin-right:9px}
.ewe-rb-leiste button.an{color:var(--ewe-text)}
.ewe-rb-leiste button.an::after{background:var(--ewe-akzent);border-color:var(--ewe-akzent);box-shadow:0 0 10px var(--ewe-akzent)}
.ewe-rb-lauf{position:absolute;right:11px;width:5px;height:5px;border-radius:50%;background:var(--ewe-text);transition:top .5s cubic-bezier(.2,.8,.2,1)}
.ewe-rb-unten{left:0;right:0;bottom:0;padding:0 16px 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ewe-rb-jahr{font-family:var(--display);font-weight:700;font-size:44px;line-height:.9;color:var(--ewe-text);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.ewe-rb-jahr.lang{font-size:26px}
.ewe-rb-jahr small{display:block;font-family:var(--tafel);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ewe-leise);margin-bottom:4px}
.ewe-rb-zaehl{font-family:var(--tafel);font-size:11px;color:var(--ewe-leise);letter-spacing:.1em}
.ewe-rb-balken{left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--ewe-text) 10%,transparent)}
.ewe-rb-balken i{display:block;height:100%;width:0;background:var(--ewe-akzent);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.ewe[data-bewegung="aus"] .ewe-rb *,.ewe[data-bewegung="aus"] .ewe-rb{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  html.ewe-reel-an{scroll-snap-type:none}
  .ewe-reel-rolle{scroll-behavior:auto}
  .ewe-rb *{transition:none!important;animation:none!important}
  .ewe-rb-text>*,.ewe-rb-karte h3 .w,.ewe-rb-wo,.ewe-rb-satz,.ewe-rb-mitte>*{opacity:1;transform:none}
  .ewe-rb-karte .ewe-rb-linie{width:72px}
  .ewe-rb-foto .ewe-rb-grund{transform:none}
}