:root{ --ink:#0d0d0d; --gelb:#F5C842; --line:rgba(255,255,255,.09); }
html{ -webkit-font-smoothing:auto; text-rendering:optimizeLegibility; }
body{ font-family:'Manrope',sans-serif; font-weight:500; letter-spacing:.004em; background:var(--ink); color:#ededed; overflow-x:hidden; }
/* Regel 15: Laufweite haengt an der Groesse. Enge Spationierung gehoert an grosse
   Ueberschriften, kleine Displaytexte werden davon unleserlich. */
.font-display{ font-family:'Space Grotesk',sans-serif; letter-spacing:-.012em; }
.font-display[class*="text-3xl"],.font-display[class*="text-4xl"],
.font-display[class*="text-5xl"],.font-display[class*="text-6xl"],
.font-display[class*="text-["]{ letter-spacing:-.035em; }
.font-mono{ font-family:'JetBrains Mono',monospace; }

/* Serifen-Akzent: einzelne Wörter brechen den reinen Tech-Look */
.akz{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; letter-spacing:0; }

/* Statusleiste über der Navigation */
.statusleiste{ background:#121212; border-bottom:1px solid var(--line); }
.ticker{ position:relative; height:15px; overflow:hidden; }
.ticker span{ position:absolute; inset:0; opacity:0; transform:translateY(9px); transition:opacity .6s, transform .6s cubic-bezier(.16,1,.3,1); white-space:nowrap; }
.ticker span.an{ opacity:1; transform:none; }

/* Grosse 42 als Wasserzeichen */
.wasserzeichen{ position:absolute; font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.06em; line-height:.8; color:rgba(255,255,255,.028); pointer-events:none; user-select:none; }

.label{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.24em; color:rgba(255,255,255,.55); }
.label-g{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.26em; color:var(--gelb); }

/* Glas-Panel, der Baustein der ganzen Seite */
.glas{ background:rgba(255,255,255,.028); border:1px solid var(--line); backdrop-filter:blur(10px); }
/* Regel 1: Zeigerfeedback gehoert in den Bereich 150 bis 250 ms, 450 ms wirken traege */
.glas-hover{ transition:background .2s, border-color .2s, transform .2s cubic-bezier(.16,1,.3,1); }
.glas-hover:hover{ background:rgba(255,255,255,.055); border-color:rgba(245,200,66,.42); transform:translateY(-2px); }

/* Technische Eckklammern */
.klammer{ position:relative; }
.klammer::before,.klammer::after{ content:''; position:absolute; width:10px; height:10px; }
.klammer::before{ top:-1px; left:-1px; border-top:1px solid var(--gelb); border-left:1px solid var(--gelb); }
.klammer::after{ bottom:-1px; right:-1px; border-bottom:1px solid var(--gelb); border-right:1px solid var(--gelb); }

/* Raster und Glühen */
.raster{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 72%); mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 72%); }
/* Regel 11: ein 120px-Weichzeichner ueber die halbe Seite wird sonst bei jedem
   Bildlauf neu gerechnet. Eigene Ebene, damit er einmal gezeichnet und dann nur
   noch verschoben wird. */
.gluehen{ position:absolute; border-radius:9999px; filter:blur(120px); pointer-events:none;
  transform:translateZ(0); contain:paint; }

/* Filmkorn */
body::after{ content:""; position:fixed; inset:-100%; width:300%; height:300%; z-index:9998; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:korn 8s steps(10) infinite; }
@keyframes korn{ 0%,100%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)} 40%{transform:translate(4%,-6%)} 60%{transform:translate(-4%,-4%)} 80%{transform:translate(6%,6%)} }

.btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.7rem; font-weight:600; font-size:.88rem; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s, color .2s, background .2s; border:1px solid transparent; }
.btn-gelb{ background:var(--gelb); color:#0b0b0b; box-shadow:0 0 0 0 rgba(245,200,66,.5); }
.btn-gelb:hover{ box-shadow:0 0 34px 0 rgba(245,200,66,.42); transform:translateY(-1px); }
.btn-linie{ border-color:rgba(255,255,255,.22); color:#fff; }
.btn-linie:hover{ border-color:var(--gelb); color:var(--gelb); }
/* Regel 1: Feedback kommt beim Druecken, nicht erst beim Loslassen */
.btn:active{ transform:scale(.97); transition-duration:100ms; }

.dot{ width:7px; height:7px; border-radius:99px; background:var(--gelb); box-shadow:0 0 12px 1px rgba(245,200,66,.8); animation:puls 2.6s infinite; }
@keyframes puls{ 0%,100%{opacity:1} 50%{opacity:.35} }

[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
[data-reveal].in{ opacity:1; transform:none; }

.nav-link{ position:relative; font-size:.86rem; font-weight:500; color:rgba(255,255,255,.72); padding:.3rem 0; transition:color .3s; }
.nav-link:hover,.nav-link[aria-current="page"]{ color:#fff; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gelb); transition:width .3s cubic-bezier(.16,1,.3,1); }
.nav-link:hover::after,.nav-link[aria-current="page"]::after{ width:100%; }

.bild-dunkel{ filter:grayscale(.35) contrast(1.05) brightness(.82); transition:filter .7s; }
.gruppe:hover .bild-dunkel{ filter:grayscale(0) contrast(1) brightness(.95); }

.marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.slide{ animation:slide 46s linear infinite; }
.marquee:hover .slide{ animation-play-state:paused; }

/* Formularfelder im dunklen Stil */
.feld{ width:100%; padding:.85rem 1rem; background:rgba(255,255,255,.035); border:1px solid var(--line); color:#eee; font-size:.92rem; font-family:'Manrope',sans-serif; transition:border-color .25s, background .25s; }
.feld:focus{ outline:none; border-color:var(--gelb); background:rgba(255,255,255,.055); }
.feld::placeholder{ color:rgba(255,255,255,.28); }
.feld option{ background:#111; color:#eee; }

/* Bild-Platzhalter */
.ph{ position:relative; background:rgba(255,255,255,.02); border:1px dashed rgba(255,255,255,.16); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.75rem; gap:.5rem; }
.ph iconify-icon{ color:rgba(255,255,255,.25); }
.ph p{ font-size:.78rem; color:rgba(255,255,255,.55); max-width:28ch; line-height:1.55; }

/* Hinweiskasten für die Redaktion */
.hinweis{ border-left:2px solid var(--gelb); background:rgba(255,255,255,.025); padding:1.5rem 1.75rem; }

.anker{ scroll-margin-top:135px; }

/* Regel 12: unter schwebender Navigation gehoert eine weiche Scroll-Kante,
   keine harte Trennlinie. Der Inhalt soll darunter verschwinden, nicht abschneiden. */
header{ position:relative; }
header::after{ content:''; position:absolute; left:0; right:0; top:100%; height:20px;
  background:linear-gradient(to bottom, rgba(13,13,13,.6), rgba(13,13,13,0));
  pointer-events:none; }

/* Bildschirmfotos: klein zeigen, per Klick gross */
.lupe{ display:block; position:relative; width:100%; cursor:zoom-in; line-height:0; border:0; padding:0; background:none; }
.lupe img{ transition:opacity .35s, filter .35s; }
.lupe:hover img{ opacity:.82; }
.lupe-hinweis{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96);
  opacity:0; transition:opacity .3s, transform .3s cubic-bezier(.16,1,.3,1); pointer-events:none;
  display:flex; align-items:center; gap:.5rem; white-space:nowrap;
  background:rgba(13,13,13,.9); border:1px solid var(--gelb); color:var(--gelb);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  padding:.65rem 1.1rem; }
.lupe:hover .lupe-hinweis,.lupe:focus-visible .lupe-hinweis{ opacity:1; transform:translate(-50%,-50%) scale(1); }
/* Regel 12: Glasflaechen materialisieren sich, statt hart aufzupoppen */
#lupe-fenster{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); display:flex;
  align-items:center; justify-content:center; padding:1.5rem; cursor:zoom-out;
  opacity:0; visibility:hidden; backdrop-filter:blur(0px);
  transition:opacity .2s ease-out, visibility .2s, backdrop-filter .2s ease-out; }
#lupe-fenster.an{ opacity:1; visibility:visible; backdrop-filter:blur(6px); }
#lupe-fenster figure{ transform:scale(.97); transition:transform .2s cubic-bezier(.16,1,.3,1); }
#lupe-fenster.an figure{ transform:scale(1); }
#lupe-fenster figure{ margin:0; max-width:100%; }
#lupe-fenster img{ display:block; max-width:100%; max-height:84vh; border:1px solid var(--line); }
#lupe-fenster figcaption{ margin-top:.9rem; font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); text-align:center; }
#lupe-zu{ position:fixed; top:1.25rem; right:1.5rem; width:44px; height:44px; border:1px solid var(--line);
  background:rgba(13,13,13,.9); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
#lupe-zu:hover{ border-color:var(--gelb); color:var(--gelb); }

/* Vorher-Nachher-Schieber */
.schieber{ position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:#101010;
  touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none; }
.schieber img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.s-oben{ position:absolute; inset:0; overflow:hidden; will-change:width; }
.s-oben img{ width:var(--breite); max-width:none; }
.s-griff{ position:absolute; top:0; bottom:0; width:2px; background:var(--gelb); margin-left:-1px;
  pointer-events:none; box-shadow:0 0 20px rgba(245,200,66,.55); }
.s-knopf{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:99px;
  background:var(--gelb); color:#0d0d0d; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 26px rgba(0,0,0,.55); transition:transform 120ms ease-out; }
.schieber:active .s-knopf{ transform:translate(-50%,-50%) scale(.94); }
.s-marke{ position:absolute; bottom:14px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; padding:.4rem .8rem; background:rgba(13,13,13,.82); border:1px solid var(--line);
  color:rgba(255,255,255,.78); pointer-events:none; }
.s-links{ left:14px; } .s-rechts{ right:14px; }
.schieber:focus-visible{ outline:2px solid var(--gelb); outline-offset:3px; }

/* Zeitreise */
.jahr-spalte{ position:sticky; top:150px; }
.jahr-zahl{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.04em; line-height:.9; }
.eintrag{ position:relative; padding-left:1.9rem; }
.eintrag::before{ content:''; position:absolute; left:0; top:.55rem; width:7px; height:7px; border-radius:99px;
  background:rgba(255,255,255,.3); }
.eintrag.gelb::before{ background:var(--gelb); box-shadow:0 0 12px 1px rgba(245,200,66,.7); }
.eintrag.warn::before{ background:#e0603a; box-shadow:0 0 12px 1px rgba(224,96,58,.55); }
.zeitlinie{ position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line); }

/* Zeitreise: Branchenfilter */
.zweig{ display:inline-flex; align-items:center; font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; padding:.28rem .55rem; margin-left:.6rem;
  border:1px solid rgba(245,200,66,.35); color:var(--gelb); vertical-align:middle; white-space:nowrap; }
.filter-taste{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; padding:.6rem 1rem; border:1px solid var(--line); color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.02); cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
.filter-taste:hover{ border-color:rgba(245,200,66,.5); color:#fff; }
.filter-taste[aria-pressed="true"]{ background:var(--gelb); border-color:var(--gelb); color:#0d0d0d; }
.filter-taste:active{ transform:scale(.97); }
.eintrag[hidden]{ display:none; }

/* Regel 14: Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie auch
   hier nicht. Dauerschleifen und der bildschirmfuellende Filmkorn-Effekt stehen still. */
@media (prefers-reduced-motion: reduce){
  body::after{ animation:none; }
  .dot{ animation:none; }
  .slide{ animation:none; }
  .ticker span{ transition-duration:.01ms; }
  [data-reveal]{ transition-duration:.01ms; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* Regel 14: Wer Transparenz reduziert hat, bekommt deckende Flaechen statt Milchglas. */
@media (prefers-reduced-transparency: reduce){
  .glas{ background:#161616; backdrop-filter:none; }
  #lupe-fenster{ background:#0d0d0d; backdrop-filter:none; }
  #lupe-fenster.an{ backdrop-filter:none; }
  .statusleiste{ background:#121212; }
}

/* Regel 14: Wer mehr Kontrast angefordert hat, bekommt klare Konturen statt zarter Linien. */
@media (prefers-contrast: more){
  :root{ --line:rgba(255,255,255,.34); }
  body{ color:#fff; }
  .glas{ background:#161616; border-color:rgba(255,255,255,.34); }
  .btn-linie{ border-color:#fff; }
  .label{ color:rgba(255,255,255,.8); }
}

/* ── Zwiebel ─────────────────────────────────────────── */
/* ── Ringgrafik ────────────────────────────── */
.rg{ cursor:pointer; }
.zwiebel-still .rg{ cursor:default; pointer-events:none; }
.band{ fill:none; stroke:rgba(255,255,255,.045); stroke-width:60; pointer-events:stroke;
  transition:stroke .25s ease; }
.kante{ fill:none; stroke:rgba(255,255,255,.13); stroke-width:1;
  transition:stroke .25s ease; pointer-events:none; }
.rlabel{ font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; fill:rgba(255,255,255,.42); pointer-events:none;
  transition:fill .25s ease; }
.rg:hover .band{ stroke:rgba(255,255,255,.075); }
.rg:hover .kante{ stroke:rgba(255,255,255,.24); }
.rg.aktiv .band{ stroke:rgba(245,200,66,.055); }
.rg.aktiv .kante{ stroke:rgba(245,200,66,.75); }
.rg.aktiv .rlabel{ fill:var(--gelb); }
.rg.aktiv{ filter:drop-shadow(0 0 7px rgba(245,200,66,.16)); }

.tick{ stroke:rgba(255,255,255,.13); stroke-width:1; }
.tick.lang{ stroke:rgba(255,255,255,.22); }

.kernscheibe{ fill:var(--gelb); }
.kern{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; fill:#0d0d0d;
  text-anchor:middle; pointer-events:none; letter-spacing:.01em; }

.tuer .bahn{ fill:none; stroke:rgba(224,96,58,.55); stroke-width:1.4;
  stroke-dasharray:5 4; }
.tuer .treffer{ fill:rgba(224,96,58,.9); }
.tuer text{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; fill:rgba(255,255,255,.45); }

#zwiebel.luecke .rg[data-ring="3"] .kante,
#zwiebel.luecke .rg[data-ring="4"] .kante{ stroke:rgba(224,96,58,.6); stroke-dasharray:9 7; }
#zwiebel.luecke .rg[data-ring="3"] .rlabel,
#zwiebel.luecke .rg[data-ring="4"] .rlabel{ fill:rgba(224,96,58,.85); }

.ringtaste{ display:flex; align-items:center; gap:1rem; text-align:left; width:100%;
  padding:.9rem 1.1rem; border:1px solid var(--line); background:rgba(255,255,255,.02);
  cursor:pointer; transition:border-color .2s, background .2s; }
.ringtaste:hover{ border-color:rgba(245,200,66,.4); }
.ringtaste[aria-pressed="true"]{ border-color:var(--gelb); background:rgba(245,200,66,.07); }
.ringtaste:active{ transform:scale(.995); }
.rt-nr{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gelb); }
.rt-text{ display:flex; flex-direction:column; gap:.2rem; }
.rt-titel{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.02rem; }
.rt-unter{ font-size:.82rem; color:rgba(255,255,255,.6); }

.punkt{ padding:.9rem 0; border-top:1px solid var(--line); }
.punkt h4{ font-weight:600; font-size:.94rem; margin-bottom:.35rem; }
.punkt p{ font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.68); }
.punkt.gelb h4{ color:var(--gelb); }
.fach{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  border:1px solid var(--line); padding:.15rem .4rem; margin-left:.35rem; color:rgba(255,255,255,.5); }

::selection{ background:var(--gelb); color:#0b0b0b; }