/* =====================================================================
   Imagichron – Webseite (Design „E“: Mischung aus Nachtlicht und Zeitstrahl, Farben Bernstein wie das Icon)
   Hell ist voreingestellt, dunkel über den Knopf ☀/☾ (data-modus am <html>).
   Lädt nichts von fremden Servern: nur Systemschriften, keine Bibliotheken.
   ===================================================================== */

/* ---------- 1) Farben und Werte ---------- */
:root{
  --breite:1160px;
  --schrift:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --titel:Impact,"Arial Narrow Bold","Franklin Gothic Medium","Haettenschweiler",sans-serif;
  --mono:Consolas,"Cascadia Mono","SF Mono",Menlo,monospace;
  --radius:6px;

  /* hell (Voreinstellung) */
  --grund:#f4efe6; --flaeche:#fffdf9; --flaeche-2:#ece4d6; --text:#141210; --leise:#4a4540; --linie:rgba(20,18,16,.14);
  --akzent:#b4380a; --akzent-2:#92400e; --akzent-text:#ffffff;
  --verlauf:linear-gradient(100deg,#b4380a 0%,#d24a0c 50%,#b45309 100%);
  --schatten:0 0 0 1px var(--linie), 0 20px 50px rgba(60,40,20,.12);
  --raster:rgba(20,18,16,.045);
  --leuchten:radial-gradient(700px 420px at 75% 22%, rgba(245,130,30,.22), transparent 70%), radial-gradient(560px 380px at 92% 50%, rgba(245,158,11,.22), transparent 70%), radial-gradient(520px 320px at 10% 8%, rgba(180,56,10,.08), transparent 70%);
  --vorzeile-linie:rgba(20,18,16,.8);
  --knopf-schatten:0 8px 24px rgba(180,56,10,.25);
  --zweit-grund:rgba(255,255,255,.6); --zweit-rand:rgba(20,18,16,.25);
  --geraet-schatten:0 0 0 1px var(--linie), 0 0 70px rgba(232,89,12,.18), 0 24px 60px rgba(60,40,20,.28);
  --jahr-farbe:rgba(20,18,16,.22);
  --kachel-grund:linear-gradient(180deg,#fffdf9,#faf5ec);
  --kachel-glanz:rgba(232,89,12,.12);
  --k1-grund:radial-gradient(500px 260px at 85% 110%, rgba(232,89,12,.16), transparent 70%), #fffdf9;
  --schritt-linie:rgba(20,18,16,.2);
  --liste-grund:#fffdf9;
  --dl-glanz:rgba(232,89,12,.14);
  color-scheme:light;
}
[data-modus="dunkel"]{
  --grund:#0a0c12; --flaeche:#12151f; --flaeche-2:#1a1e2c; --text:#eceef5; --leise:#a3a9bc; --linie:rgba(255,255,255,.11);
  --akzent:#ff8a3d; --akzent-2:#fbbf24; --akzent-text:#14080a;
  --verlauf:linear-gradient(100deg,#e8590c 0%,#ff8a3d 45%,#fbbf24 100%);
  --schatten:0 0 0 1px var(--linie), 0 30px 80px rgba(0,0,0,.5);
  --raster:rgba(255,255,255,.035);
  --leuchten:radial-gradient(700px 420px at 75% 22%, rgba(232,89,12,.30), transparent 70%), radial-gradient(560px 380px at 92% 50%, rgba(245,158,11,.26), transparent 70%), radial-gradient(520px 320px at 10% 8%, rgba(245,158,11,.10), transparent 70%);
  --vorzeile-linie:rgba(255,255,255,.7);
  --knopf-schatten:0 8px 30px rgba(232,89,12,.35);
  --zweit-grund:rgba(255,255,255,.04); --zweit-rand:rgba(255,255,255,.25);
  --geraet-schatten:0 0 0 1px var(--linie), 0 0 90px rgba(232,89,12,.22), 0 30px 80px rgba(0,0,0,.6);
  --jahr-farbe:rgba(236,238,245,.28);
  --kachel-grund:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  --kachel-glanz:rgba(232,89,12,.18);
  --k1-grund:radial-gradient(500px 260px at 85% 110%, rgba(232,89,12,.25), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --schritt-linie:rgba(255,255,255,.18);
  --liste-grund:rgba(255,255,255,.03);
  --dl-glanz:rgba(232,89,12,.22);
  color-scheme:dark;
}

/* ---------- 2) Grundlagen ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--grund); color:var(--text); font:17px/1.6 var(--schrift); -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .3s, color .3s;
  background-image:linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px); background-size:64px 64px; background-position:center top; }
a{ color:inherit; }
svg{ display:block; }
.breite{ max-width:var(--breite); margin:0 auto; padding:0 24px; position:relative; }
h1,h2,h3{ margin:0; line-height:1.08; }
h1,h2{ font-family:var(--titel); font-weight:400; text-transform:uppercase; letter-spacing:.005em; }
h1{ font-size:clamp(3.4rem,10.5vw,9.6rem); line-height:.88; }
h2{ font-size:clamp(2.2rem,4vw,3.3rem); line-height:.98; }
h3{ font-family:var(--titel); font-weight:400; font-size:1.6rem; text-transform:uppercase; letter-spacing:.01em; }
p{ margin:0; }
.leise{ color:var(--leise); }
.hervor{ background:var(--verlauf); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vorzeile{ font-size:.82rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--text); border-top:2px solid var(--vorzeile-linie); padding-top:10px; display:flex; gap:10px; align-items:center; }
.vorzeile::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--akzent); box-shadow:0 0 12px var(--akzent); flex:none; }
.abschnitt{ padding:110px 0; position:relative; }
.abschnitt.eng{ padding-top:20px; }
.abschnitt-kopf{ max-width:720px; margin-bottom:52px; display:grid; gap:14px; }
.abschnitt-kopf p:last-child{ color:var(--leise); font-size:1.1rem; }
.skip{ position:absolute; left:-9999px; } .skip:focus{ left:16px; top:16px; z-index:99; background:var(--flaeche); padding:8px 12px; }
:focus-visible{ outline:3px solid var(--akzent); outline-offset:3px; }
main{ position:relative; }
main > *{ position:relative; z-index:1; }
.leuchten{ position:absolute; inset:-120px 0 auto 0; height:1000px; pointer-events:none; z-index:0; background:var(--leuchten); }

/* ---------- 3) Knöpfe ---------- */
.knopf{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:var(--radius); background:var(--verlauf); color:var(--akzent-text); font-weight:650; text-decoration:none; border:2px solid transparent; box-shadow:var(--knopf-schatten); transition:transform .15s, box-shadow .15s; cursor:pointer; font-size:.92rem; text-transform:uppercase; letter-spacing:.06em; }
.knopf:hover{ transform:translateY(-2px); }
.knopf.zweit{ background:var(--zweit-grund); color:var(--text); border-color:var(--zweit-rand); box-shadow:none; }
.knopf.klein{ padding:9px 16px; font-size:.85rem; }
.knopf svg{ width:18px; height:18px; }
.knopf[aria-disabled="true"]{ cursor:default; }
.knopf[aria-disabled="true"]:hover{ transform:none; }
.modus-knopf{ display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:999px; border:1px solid var(--linie); background:transparent; color:var(--text); cursor:pointer; transition:background .15s; }
.modus-knopf:hover{ background:color-mix(in srgb, var(--text) 8%, transparent); }
.modus-knopf svg{ width:20px; height:20px; }
[data-modus="hell"] .modus-knopf .sonne,:root:not([data-modus]) .modus-knopf .sonne,[data-modus="dunkel"] .modus-knopf .mond{ display:none; }

/* ---------- 4) Kopf ---------- */
.kopf{ position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); background:color-mix(in srgb, var(--grund) 78%, transparent); border-bottom:1px solid var(--linie); }
.kopf .breite{ display:flex; align-items:center; gap:20px; height:68px; }
/* Schriftzug des Logos: Josefin Sans (SIL Open Font License, schriften/OFL-josefin-sans.txt), lokal – nichts von fremden Servern */
@font-face{ font-family:"Josefin Sans"; src:url("schriften/josefin-sans-latin-700-normal.woff2") format("woff2"); font-weight:700; font-display:swap; }
.logo{ display:flex; align-items:center; gap:10px; font-family:"Josefin Sans", system-ui, sans-serif; font-weight:700; font-size:1.3rem; text-decoration:none; letter-spacing:.01em; }
.logo-zeichen{ width:34px; height:34px; flex:none; background:url("bilder/favicon.svg") center/contain no-repeat; }   /* Icon aus ../imagiter/marke („Porträt mit Zeitstrahl“) */
.kopf nav{ display:flex; gap:24px; margin-left:auto; font-size:.95rem; }
.kopf nav a{ text-decoration:none; color:var(--leise); } .kopf nav a:hover{ color:var(--text); }

/* ---------- 5) Einstieg ---------- */
.held{ display:grid; gap:50px; padding-top:60px; padding-bottom:70px; } /* nur oben/unten, der Seitenrand kommt von .breite */
.held-text{ display:grid; grid-template-columns:1.3fr 1fr; column-gap:48px; row-gap:24px; align-items:start; }
.held-text h1,.held-text .vorzeile{ grid-column:1/-1; }
.unter{ font-size:1.25rem; color:var(--leise); max-width:34em; }
.knoepfe{ display:flex; flex-wrap:wrap; gap:12px; }
.merkmale{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.92rem; color:var(--leise); padding:0; margin:18px 0 0; list-style:none; }
.merkmale li::before{ content:"✓ "; color:var(--akzent-2); font-weight:700; }

/* echtes Bildschirmfoto im Filmstreifen */
.geraet{ position:relative; overflow:hidden; border:1px solid var(--linie); border-radius:var(--radius); padding:26px 0; background:#07080d; box-shadow:var(--geraet-schatten); margin:0; }
.geraet::before,.geraet::after{ content:""; position:absolute; left:0; right:0; height:12px; background:repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.8) 10px 24px, transparent 24px 34px); opacity:.85; z-index:1; }
.geraet::before{ top:7px; } .geraet::after{ bottom:7px; }
.geraet img{ display:block; width:100%; height:auto; }

/* Laufband mit Jahreszahlen */
.jahrband{ border-block:1px solid var(--linie); overflow:hidden; padding:14px 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.jahrband-spur{ display:flex; gap:36px; width:max-content; animation:laufen 45s linear infinite; font:400 3.4rem/1 var(--titel); color:var(--jahr-farbe); }
.jahrband-spur span:nth-child(5n){ color:transparent; background:var(--verlauf); -webkit-background-clip:text; background-clip:text; }
@keyframes laufen{ to{ transform:translateX(-50%); } }

/* ---------- 6a) So sieht es aus (Galerie) ---------- */
.galerie{ display:grid; grid-template-columns:2fr 2fr 1.1fr; gap:18px; align-items:start; }
.galerie figure{ margin:0; display:grid; gap:10px; align-content:start; }
.galerie .g-jahr{ grid-column:1 / 3; } .galerie .g-handy{ grid-column:3; grid-row:1 / 3; }
.bild-link{ display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--linie); box-shadow:var(--schatten); background:var(--flaeche); transition:transform .2s; cursor:zoom-in; }
.bild-link:hover{ transform:translateY(-3px); }
.bild-link img{ display:block; width:100%; height:auto; }
.galerie figcaption{ font-size:.95rem; color:var(--leise); }
.galerie figcaption b{ color:var(--text); }
.galerie-hinweis{ margin-top:22px; font-size:.88rem; color:var(--leise); }
.lupe{ border:0; padding:0; background:transparent; max-width:min(1500px,96vw); max-height:96vh; overflow:visible; }
.lupe::backdrop{ background:rgba(8,9,14,.84); backdrop-filter:blur(4px); }
.lupe img{ display:block; max-width:100%; max-height:86vh; width:auto; height:auto; margin:0 auto; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lupe p{ color:#eceef5; text-align:center; margin-top:10px; font-size:.95rem; }
.lupe-zu{ position:fixed; top:16px; right:16px; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.45); color:#fff; font-size:1.4rem; cursor:pointer; }

/* ---------- 6) Funktionen (Bento-Raster) ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.kachel{ background:var(--kachel-grund); border:1px solid var(--linie); border-radius:var(--radius); padding:28px; display:grid; gap:12px; align-content:start; position:relative; overflow:hidden; min-height:250px; transition:border-color .2s; }
.kachel:hover{ border-color:color-mix(in srgb, var(--akzent) 50%, transparent); }
.kachel::after{ content:""; position:absolute; inset:auto -40% -60% auto; width:300px; height:300px; background:radial-gradient(circle, var(--kachel-glanz), transparent 65%); pointer-events:none; }
.kachel p{ color:var(--leise); font-size:.98rem; }
.symbol{ width:42px; height:42px; border-radius:var(--radius); display:grid; place-items:center; background:color-mix(in srgb, var(--akzent) 14%, transparent); color:var(--akzent); }
.symbol svg{ width:22px; height:22px; }
.gruende{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.gruende .kachel{ min-height:0; }
.k1{ grid-column:span 4; background:var(--k1-grund); } .k2{ grid-column:span 2; } .k3,.k4,.k5{ grid-column:span 2; }
.k6{ grid-column:span 6; min-height:0; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; }
.mini-zs{ display:flex; align-items:flex-end; gap:6px; height:90px; margin-top:auto; }
.mini-zs i{ flex:1; border-radius:6px 6px 2px 2px; background:color-mix(in srgb, var(--akzent) 22%, var(--flaeche-2)); }
.mini-zs i:nth-child(odd){ background:color-mix(in srgb, var(--akzent-2) 26%, var(--flaeche-2)); }
.mini-zs i.an{ background:var(--akzent); }
.sprechblasen{ display:grid; gap:8px; margin-top:6px; }
.blase{ padding:8px 12px; border-radius:14px; font-size:.88rem; max-width:88%; background:var(--flaeche-2); }
.blase.er{ justify-self:end; background:color-mix(in srgb, var(--akzent-2) 18%, var(--flaeche)); }
.blase b{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--akzent); margin-right:6px; }
.passwort{ display:flex; gap:6px; margin-top:6px; }
.passwort span{ width:34px; height:40px; display:grid; place-items:center; border-radius:8px; font:700 1.1rem var(--mono); background:var(--flaeche-2); border:1px solid var(--linie); }
.passwort span:first-child{ background:var(--akzent); color:var(--akzent-text); border-color:transparent; }

/* ---------- 7) So geht's (Zeitstrahl) ---------- */
.schritte{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:schritt; }
.schritt{ display:grid; gap:12px; padding-top:22px; border-top:3px solid var(--schritt-linie); position:relative; }
.schritt::before{ counter-increment:schritt; content:counter(schritt,decimal-leading-zero); font:400 2.6rem/1 var(--titel); color:var(--text); }
.schritt::after{ content:""; position:absolute; top:-12px; left:0; width:20px; height:20px; border-radius:50%; background:var(--verlauf); box-shadow:0 0 16px rgba(232,89,12,.7); }
.schritt p{ color:var(--leise); }

/* ---------- 8) Datenschutz ---------- */
.schutz{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; }
.schutz .abschnitt-kopf{ margin:0; }
.schutz-liste{ display:grid; gap:14px; list-style:none; padding:0; margin:0; }
.schutz-liste li{ display:grid; grid-template-columns:40px 1fr; gap:14px; padding:18px; border-radius:var(--radius); background:var(--liste-grund); border:1px solid var(--linie); }
.schutz-liste li svg{ width:24px; height:24px; color:var(--akzent-2); margin-top:2px; }
.schutz-liste b{ display:block; }
.schutz-liste span{ color:var(--leise); font-size:.95rem; }

/* ---------- 9) Download ---------- */
.download-karte{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; padding:44px; border-radius:calc(var(--radius) + 6px); background:radial-gradient(500px 260px at 90% 0%, var(--dl-glanz), transparent 70%), var(--flaeche); border:1px solid var(--linie); box-shadow:var(--schatten); position:relative; overflow:hidden; }
.dl-links{ display:grid; gap:16px; align-content:start; }
.dl-daten{ display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:.95rem; margin:0; align-content:start; }
.dl-daten dt{ color:var(--leise); } .dl-daten dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.dl-daten dd.mono{ font:13px var(--mono); }
.abzeichen{ display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--akzent-2) 16%, transparent); color:var(--akzent-2); justify-self:start; }

/* ---------- 10) Fragen ---------- */
.fragen{ display:grid; gap:12px; max-width:820px; }
.fragen details{ border:1px solid var(--linie); border-radius:var(--radius); background:var(--liste-grund); padding:4px 22px; }
.fragen summary{ cursor:pointer; padding:16px 0; font-weight:650; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.fragen summary::-webkit-details-marker{ display:none; }
.fragen summary::after{ content:"+"; color:var(--akzent); font-size:1.4rem; line-height:1; }
.fragen details[open] summary::after{ content:"–"; }
.fragen details p{ padding:0 0 18px; color:var(--leise); }

/* ---------- 11) Fuß ---------- */
.fuss{ border-top:1px solid var(--linie); padding:40px 0 60px; font-size:.92rem; color:var(--leise); position:relative; z-index:1; }
.fuss .breite{ display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; }
.fuss nav{ display:flex; gap:20px; margin-left:auto; }

/* ---------- 12) Rechtliche Seiten (Impressum, Datenschutz) ---------- */
.rechtstext{ max-width:760px; padding:70px 0 90px; }
.rechtstext h1{ font-size:clamp(2.6rem,6vw,4.4rem); margin-bottom:34px; }
.rechtstext h2{ font-size:1.7rem; margin:40px 0 12px; }
.rechtstext p,.rechtstext ul,.rechtstext address{ margin:0 0 14px; color:var(--leise); font-style:normal; }
.rechtstext address,.rechtstext strong{ color:var(--text); }
.rechtstext ul{ padding-left:22px; }
.rechtstabelle{ width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.95rem; }
.rechtstabelle th,.rechtstabelle td{ text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid color-mix(in srgb, var(--leise) 25%, transparent); }
.rechtstabelle th{ color:var(--text); }
.rechtstabelle td{ color:var(--leise); }
.rechtstext code{ font-size:.9em; }
.dl-bedingungen{ font-size:.9rem; margin-top:10px; }
.rechtstext ol{ margin:0 0 14px; padding-left:22px; color:var(--leise); }
.beta-schritte li{ margin-bottom:8px; }
kbd{ font:600 .85em var(--mono); padding:1px 6px; border:1px solid var(--linie); border-bottom-width:2px; border-radius:4px; background:var(--flaeche); color:var(--text); }
.befehl{ font:14px/1.5 var(--mono); background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--radius); padding:12px 14px; overflow-x:auto; color:var(--text); margin:0 0 14px; }
.warnung-bild{ background:#0b5cad; color:#fff; border-radius:var(--radius); padding:22px 24px; margin:0 0 18px; max-width:520px; font-size:.92rem; box-shadow:var(--schatten); }
.rechtstext .warnung-bild p{ color:#fff; margin:0 0 10px; }
.warnung-bild .wb-titel{ font-size:1.25rem; font-weight:600; }
.warnung-bild .wb-link{ text-decoration:underline; font-weight:600; outline:3px solid #ffd54a; outline-offset:3px; display:inline-block; }
.warnung-bild .wb-knopf{ display:inline-block; float:right; border:1px solid #fff; padding:4px 16px; margin:0; }
.fragebogen{ display:grid; gap:14px; margin:0 0 20px; }
.fragebogen fieldset{ border:1px solid var(--linie); border-radius:var(--radius); background:var(--liste-grund); padding:14px 18px 16px; margin:0; display:grid; gap:10px; }
.fragebogen legend{ font-weight:650; padding:0 6px; color:var(--text); }
.fragebogen label{ display:grid; gap:4px; color:var(--leise); font-size:.95rem; }
.fragebogen input[type=text],.fragebogen select,.fragebogen textarea{ font:inherit; font-size:.98rem; color:var(--text); background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius); padding:8px 10px; width:100%; }
.fragebogen textarea{ resize:vertical; }
.fragebogen .wahl{ display:grid; gap:6px; }
.fragebogen .wahl.reihe{ grid-template-columns:repeat(5,auto); justify-content:start; gap:6px 18px; }
.fragebogen .wahl label{ display:flex; gap:8px; align-items:center; color:var(--text); }
.fragebogen-meldung:empty{ display:none; }
.platzhalter{ background:color-mix(in srgb, var(--akzent) 18%, transparent); color:var(--text); padding:0 4px; border-radius:4px; }

/* ---------- 13) Einblenden beim Scrollen (nur mit JavaScript) ---------- */
.js .zeigen{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.js .zeigen.sichtbar{ opacity:1; transform:none; }

/* ---------- 14) Kleine Bildschirme, weniger Bewegung ---------- */
@media (max-width:900px){
  .held-text,.schutz,.download-karte{ grid-template-columns:1fr; }
  .kopf nav{ display:none; }
  .modus-knopf{ margin-left:auto; }
  .gruende{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:1fr; } .bento > *{ grid-column:auto; }
  .k6{ grid-template-columns:1fr; }
  .schritte{ grid-template-columns:1fr; gap:40px; }
  .abschnitt{ padding:80px 0; }
  .download-karte{ padding:28px; }
  .jahrband-spur{ font-size:2.4rem; }
  .galerie{ grid-template-columns:1fr 1fr; }
  .galerie .g-jahr{ grid-column:1 / -1; } .galerie .g-handy{ grid-column:2; grid-row:2 / 4; }
}
@media (max-width:520px){
  .galerie{ grid-template-columns:1fr; }
  .galerie .g-handy{ grid-column:auto; grid-row:auto; max-width:280px; justify-self:center; }
  .kopf .knopf{ display:none; }
}
/* Überschrift mit wechselnden Wörtern (app.js): Vorleseprogramme lesen nur „Eure Geschichte.“ */
.vorlesen{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wechsel{ display:inline-block; transition:opacity .45s ease, transform .45s ease; }
.wechsel.weg{ opacity:0; transform:translateY(.18em); }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .zeigen{ opacity:1; transform:none; }
}