/* ==========================================================================
   LOGBUCH — Blog-Layer von medienautomatisierung.com
   Gleiche Sprache wie AUTOMAT–1: warmes Fast-Schwarz, EINE Creme (gedämpft
   nur über Deckkraft), Akzent sparsam, Gewichte 400/500, Mikro-Labels 14/500.
   ========================================================================== */
:root {
  --bg: #140D07;
  --surface: #1B120A;
  --cream: #F5EADB;
  --accent: #E56910;
  --sans: "Figtree", system-ui, sans-serif;
  --serif: "Literata", Georgia, serif;
  --mono: "DM Mono", Consolas, monospace;
  --pad: clamp(20px, 4vw, 64px);

  /* Bewegung (Design-System 2026-07-26, Teil 0.2) — Dauer und Kurve sind
     farbunabhängig. Die bestehende Kurve in .card bleibt, wie sie ist. */
  --ea: cubic-bezier(.22,.7,.24,1);      /* Eintritt und Hover */
  --ea-fest: cubic-bezier(.2,.9,.3,1);   /* kurze, präzise Mikro-Bewegung */
  --ea-ab: cubic-bezier(.4,0,.9,.35);    /* nur beim Verlassen */
  --t1: 140ms;   /* Mikro: Farbe, Rahmen, Punkt */
  --t2: 240ms;   /* Element: Karte, Zeile, Icon-Teil */
  --t3: 420ms;   /* Übergang: Strichzeichnung */
  --t4: 640ms;   /* Szene: Eintritt eines Blocks */
  --stag: 60ms;  /* Staffelung je Schritt, höchstens 6 */
  --an-v: 0ms;   /* Vorlauf, wird pro Element gesetzt */
  /* Zustandsfarbe für das bewegte Icon-Teil. Das LOGBUCH zeigt keine Ampel,
     darum zeigt --zst hier auf den Akzent. */
  --zst: var(--accent);
}
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body {
  background: var(--bg); color: var(--cream);
  font-family: var(--sans); font-weight: 400;
  font-size: 19px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Mikro-Label wie auf der Hauptseite: Figtree 14/500 — Mono nur für Messwerte */
.micro {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(245,234,219,.55);
}
.mono { font-family: var(--mono); font-weight: 400; }
.micro a { border-bottom: 1px dotted rgba(245,234,219,.35); padding-bottom: 1px; }
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid rgba(245,234,219,.4); padding-bottom: 7px;
  transition: border-color .3s, color .3s;
}
.cta:hover { border-color: var(--accent); color: var(--accent); }
.cta .arr { transition: transform .3s; }
.cta:hover .arr { transform: translateX(5px); }

/* --- Nav / Footer ---------------------------------------------------------- */
.bnav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  background: linear-gradient(180deg, rgba(20,13,7,.94), rgba(20,13,7,.78));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.bnav-brand {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.bnav-brand span { color: var(--accent); }
.bnav ul { display: flex; gap: clamp(14px, 3vw, 34px); list-style: none; }
.bnav ul a {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(245,234,219,.75);
  padding: 8px 0;
}
.bnav ul a:hover { color: var(--cream); }
.bnav ul a[aria-current] { color: var(--accent); }
.bnav-act { display: flex; align-items: center; gap: 10px; flex: none; }

/* Menü-Knopf — erscheint erst, wenn die Zeile nicht mehr trägt.
   Vorher lagen vier von fünf Punkten hinter dem Bildrand (overflow-x:clip). */
.bnav-burger {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(245,234,219,.24); border-radius: 2px;
  color: var(--cream); cursor: pointer; padding: 0; transition: border-color .25s;
}
.bnav-burger:hover { border-color: var(--accent); }
.bnav-burger i { display: block; position: relative; width: 18px; height: 11px; }
.bnav-burger i::before, .bnav-burger i::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px;
  background: currentColor; transition: transform .3s, width .3s;
}
.bnav-burger i::before { top: 0; }
.bnav-burger i::after { bottom: 0; width: 12px; }
.bnav-burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.bnav-burger[aria-expanded="true"] i::after { width: 18px; transform: translateY(-5px) rotate(-45deg); }
.bfoot {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  padding: 36px var(--pad) 44px; border-top: 1px solid rgba(245,234,219,.12);
  margin-top: clamp(60px, 9vh, 110px);
}
/* Impressum, Datenschutz und RSS sind auf jeder Logbuch-Seite der einzige Weg
   dorthin — und waren 19 px hoch. Dieselbe Vorschrift wie am Fuss des Beitrags:
   44 px. Das Klickfeld liegt als unsichtbare Fläche über dem Wort, statt als
   Innenabstand: sonst rutscht die gepunktete Linie mit nach unten und die Zeile
   wird höher. In der Breite bleibt RSS bei 32 px — mehr geht nur auf Kosten des
   Nachbarn (der Trennpunkt dazwischen ist 14 px schmal), und 32 × 44 liegt über
   dem Mindestmass. */
.bfoot .micro a { position: relative; }
.bfoot .micro a::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* --- Index ------------------------------------------------------------------ */
.bindex { max-width: 1180px; margin-inline: auto; padding: 0 var(--pad); }
.bhero { padding: clamp(48px, 9vh, 110px) 0 clamp(36px, 6vh, 70px); max-width: 760px; }
.bhero h1 {
  font-weight: 500; font-size: clamp(38px, 5.6vw, 72px);
  letter-spacing: -.02em; line-height: 1.05; margin: 18px 0 22px;
}
.lede { font-size: clamp(19px, 1.6vw, 22px); color: rgba(245,234,219,.78); max-width: 640px; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); padding-bottom: 30px; }
.card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid rgba(245,234,219,.09); border-radius: 10px; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
.card:hover { transform: translateY(-5px); border-color: rgba(245,234,219,.28); }
.card.gross { grid-column: 1 / -1; }
/* --- Beitrags-Cover: Foto + Marken-Grafik (27.07.) ---------------------------
   Zwei Ebenen im Verhältnis 680:220. Das Foto bringt Licht und Tiefe, der
   Schleier hält die Datumszeile lesbar, die Strichgrafik unterscheidet die
   Beiträge — ohne sie sähen alle Briefings gleich aus. Ken Burns läuft nur mit
   JavaScript, nur im Sichtfeld, und steht bei reduzierter Bewegung still. */
.cov { position: relative; display: block; aspect-ratio: 680/220; overflow: hidden; background: #1B120A; }
.card.gross .cov { aspect-ratio: 680/180; }
.cov-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); }
.cov-schleier { position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(20,13,7,.88) 0%, rgba(20,13,7,.6) 46%, rgba(20,13,7,.4) 100%); }
.cov-gfx { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
html.js .cov-bild { animation: covDrift 34s ease-in-out infinite alternate; animation-play-state: paused; }
html.js .cov-an .cov-bild { animation-play-state: running; }
@keyframes covDrift {
  from { transform: scale(1.06) translate3d(1.2%, .7%, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -.7%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .cov-bild { animation: none; transform: scale(1.06); }
}
/* Rückfall für Cover, die noch als reines SVG im Markup stehen */
.ccover > svg, .acover > svg { width: 100%; height: auto; aspect-ratio: 680/220; }

/* Register-Kopf zweispaltig (27.07.): Text links, Kino-Panel rechts.
   Unter 900px fällt das Panel weg statt zu schrumpfen — auf dem Telefon
   zählen die Begriffe, nicht das Motiv. */
.bhero-kino { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(28px,4.5vw,56px); align-items: center; }
.bhero-kino .lede { max-width: 46ch; }
.bhero-buehne { margin: 0; border-radius: 12px; aspect-ratio: 4/3;
  border: 1px solid rgba(245,234,219,.12); }
.bhero-buehne .cov-schleier {
  background: linear-gradient(115deg, rgba(20,13,7,.72) 0%, rgba(20,13,7,.3) 55%, rgba(20,13,7,.55) 100%); }
@media (max-width: 900px) {
  .bhero-kino { grid-template-columns: 1fr; }
  .bhero-buehne { display: none; }
}
.cbody { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 26px; }
.cbody h2 { font-weight: 500; font-size: clamp(21px, 2vw, 28px); letter-spacing: -.015em; line-height: 1.2; }
.card.gross .cbody h2 { font-size: clamp(26px, 2.8vw, 40px); }
.cteaser { color: rgba(245,234,219,.7); font-size: 16.5px; }
.cbody .cta { margin-top: 6px; align-self: flex-start; }

/* --- Artikel ---------------------------------------------------------------- */
.artikel { max-width: 760px; margin-inline: auto; padding: 0 var(--pad); }
.acover { margin-top: clamp(24px, 4vh, 48px); border-radius: 10px; overflow: hidden; border: 1px solid rgba(245,234,219,.1); }
.artikel article { padding: clamp(28px, 5vh, 52px) 0 0; }
.akat { margin-bottom: 16px; }
.artikel h1 {
  font-weight: 500; font-size: clamp(32px, 4.6vw, 56px);
  letter-spacing: -.02em; line-height: 1.08; margin-bottom: 18px;
}
.artikel .lede { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 24px); margin-bottom: 22px; }
.trust {
  font-size: 15px; color: rgba(245,234,219,.62);
  border-left: 2px solid var(--accent); padding: 10px 0 10px 16px; margin-bottom: 34px;
}
.prosa > * + * { margin-top: 1.15em; }
.prosa h2 { font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.015em; margin-top: 1.8em; }
.prosa h3 { font-weight: 500; font-size: clamp(20px, 1.9vw, 24px); margin-top: 1.5em; }
.prosa a { color: var(--accent); border-bottom: 1px solid rgba(229,105,16,.35); }
.prosa a:hover { border-color: var(--accent); }
.prosa blockquote {
  font-family: var(--serif); font-style: italic; font-size: 1.12em;
  border-left: 2px solid rgba(245,234,219,.3); padding-left: 18px; color: rgba(245,234,219,.85);
}
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: .45em; }
.prosa li::marker { color: var(--accent); }
.prosa code {
  font-family: var(--mono); font-size: .85em;
  background: rgba(245,234,219,.08); padding: 2px 7px; border-radius: 4px;
}
.prosa pre { background: #0E0906; border: 1px solid rgba(245,234,219,.1); border-radius: 8px; padding: 16px 18px; overflow-x: auto; }
.prosa pre code { background: none; padding: 0; font-size: 14px; line-height: 1.55; }
.prosa hr { border: 0; border-top: 1px solid rgba(245,234,219,.14); margin: 2em 0; }
.prosa strong { font-weight: 500; color: var(--cream); }
.quellen { margin-top: clamp(36px, 6vh, 60px); border-top: 1px solid rgba(245,234,219,.14); padding-top: 22px; }
.quellen ul { list-style: none; margin-top: 14px; }
.quellen li { padding: 7px 0; font-size: 16px; }
.quellen a { color: var(--cream); border-bottom: 1px solid rgba(245,234,219,.3); }
.quellen a:hover { color: var(--accent); border-color: var(--accent); }
.qhost { font-family: var(--mono); font-size: 12px; color: rgba(245,234,219,.6); margin-left: 8px; }
.anav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: clamp(40px, 7vh, 70px); }
/* Die drei Verweise am Fuss sind Bedienelemente, keine Links im Fliesstext — also
   44 px hoch. Die Linie sitzt am inneren Feld, sonst rutscht sie an den Rand des
   Klickfelds und stünde 15 px unter dem Wort. */
.anav .cta { min-height: 44px; padding-bottom: 0; border-bottom: 0; }
.anav .cta > span {
  border-bottom: 1px solid rgba(245,234,219,.4); padding-bottom: 7px;
  transition: border-color .3s;
}
.anav .cta:hover > span { border-color: var(--accent); }

/* --- Responsive / Motion ---------------------------------------------------- */
@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .bnav-burger { display: inline-flex; }
  .bnav-brand { font-size: 12px; letter-spacing: .14em; }
  /* Aus der Zeile wird ein Blatt unter der Kopfzeile */
  /* absolute (nicht fixed) — top:100% bezieht sich so auf die sticky Kopfzeile */
  .bnav ul {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid rgba(245,234,219,.12);
    border-bottom: 1px solid rgba(245,234,219,.12);
    padding: 4px var(--pad) 18px;
    transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .32s, opacity .24s, visibility .32s;
  }
  .bnav ul[data-open="1"] { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .bnav ul li { border-bottom: 1px solid rgba(245,234,219,.10); }
  .bnav ul li:last-child { border-bottom: 0; }
  .bnav ul a { display: flex; align-items: center; min-height: 52px; font-size: 13px; padding: 4px 0; }
  .bnav ul a[aria-current]::before {
    content: ""; width: 5px; height: 5px; background: var(--accent);
    margin-right: 10px; flex: none;
  }
  body.mnav-offen { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

/* --- Register der Erklärstücke ---------------------------------------------
   Aus der alphabetischen Textliste ist ein Kachelfeld geworden: jede Kachel trägt
   Anfangsbuchstabe, Kategorie, Begriff, Anriss und Datum. Gefiltert wird im
   Browser (Suchfeld + Anfangsbuchstabe), ohne Server und ohne fremde Ressource.
   Ohne JavaScript bleibt die Werkzeugleiste weg und alle Begriffe stehen da. */
.register .bhero { max-width: 720px; }

.bg-werk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin: clamp(18px, 3vh, 30px) 0 clamp(24px, 4vh, 38px);
  padding-bottom: clamp(20px, 3vh, 28px);
  border-bottom: 1px solid rgba(245,234,219,.12);
}
/* Pflicht: eine Klasse mit display schlägt sonst das [hidden] des Browsers. */
.bg-werk[hidden] { display: none; }
.bg-such {
  display: flex; align-items: center; flex: 1 1 260px; min-width: 0;
  background: var(--surface); border: 1px solid rgba(245,234,219,.14);
  border-radius: 8px; transition: border-color var(--t1) var(--ea);
}
.bg-such:focus-within { border-color: var(--accent); }
.bg-lupe { display: flex; padding-left: 14px; color: rgba(245,234,219,.55); flex: none; }
.bg-feld {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 14px;
  background: none; border: 0; color: var(--cream);
  font-family: var(--sans); font-size: 16px;
}
.bg-feld::placeholder { color: rgba(245,234,219,.42); }
.bg-briefe { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-b {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  background: none; border: 1px solid rgba(245,234,219,.14); border-radius: 8px;
  color: rgba(245,234,219,.7); cursor: pointer;
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .08em;
  transition: color var(--t1) var(--ea), border-color var(--t1) var(--ea),
              background var(--t1) var(--ea), transform 90ms var(--ea-fest);
}
.bg-b:hover { color: var(--cream); border-color: rgba(245,234,219,.32); }
.bg-b:active { transform: scale(.98); }
.bg-b[aria-pressed="true"] {
  color: var(--cream); border-color: var(--accent); background: rgba(229,105,16,.14);
}
.bg-gitter {
  list-style: none; display: grid; gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.bg-zelle { display: flex; scroll-margin-top: 90px; }
.bg-zelle[hidden] { display: none; }
/* Sobald gefiltert wird, ist der Eintritt vorbei. Ohne das würde jede wieder
   eingeblendete Zelle (display:none → flex) ihre Animation neu starten: beim
   Tippen blinkt die halbe Fläche. Und eine Zelle, die noch nie im Bild war,
   stünde mit Deckkraft 0 da, obwohl sie zum Suchwort passt. Höhere Gewichtung
   als html.js .auf, deshalb ohne !important. */
html.js .bg-gitter[data-f] .auf { opacity: 1; }
html.js .bg-gitter[data-f] .auf.an { animation: none; }
.bg-karte {
  display: flex; flex-direction: column; gap: 10px; flex: 1;
  min-height: 218px; padding: 18px 22px 20px;
  background: var(--surface); border: 1px solid rgba(245,234,219,.09); border-radius: 10px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
.bg-karte:hover { transform: translateY(-4px); border-color: rgba(245,234,219,.28); }
.bg-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bg-ini {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border: 1px solid rgba(245,234,219,.14); border-radius: 6px;
  font-size: 13px; letter-spacing: .08em; color: rgba(245,234,219,.5);
}
.bg-kat { font-size: 12px; }
.bg-t { font-size: clamp(21px, 1.9vw, 26px); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.bg-x { flex: 1; font-size: 16px; color: rgba(245,234,219,.72); }
.bg-f {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(245,234,219,.09);
}
.bg-f .micro { font-size: 12px; color: rgba(245,234,219,.5); }
.bg-arr {
  color: rgba(245,234,219,.5);
  transition: transform var(--t2) var(--ea), color var(--t1) var(--ea);
}
.bg-karte:hover .bg-arr { transform: translateX(4px); color: var(--accent); }
.bg-nix { margin-top: 26px; color: rgba(245,234,219,.75); }
.bg-nix[hidden] { display: none; }
.bg-zurueck {
  display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px;
  padding: 0 14px; background: none; border: 1px solid rgba(245,234,219,.2);
  border-radius: 8px; color: var(--cream); cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  transition: border-color var(--t1) var(--ea), color var(--t1) var(--ea);
}
.bg-zurueck:hover { border-color: var(--accent); color: var(--accent); }
.bg-fuss { margin-top: clamp(26px, 4vh, 40px); }
.begriff-zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  padding: 12px 0 16px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(245,234,219,.12);
}
.begriff-zeile strong { font-weight: 500; font-size: 19px; }
.begriff-zeile .reg-link {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(245,234,219,.6);
  transition: color .25s;
}
.begriff-zeile .reg-link > span {
  border-bottom: 1px solid rgba(245,234,219,.3); padding-bottom: 3px;
  transition: border-color .25s;
}
.begriff-zeile .reg-link:hover { color: var(--accent); }
.begriff-zeile .reg-link:hover > span { border-color: var(--accent); }
@media (max-width: 700px) {
  .begriff-zeile .reg-link { margin-left: 0; }
  .bg-werk { gap: 12px; }
  .bg-such { flex: 1 1 100%; }
}

/* --- Icon-System (Design-System, Teil A.4) ---------------------------------- */
.ik { width: 24px; height: 24px; display: block; flex: none; color: inherit; overflow: visible; }
.ik-32 { width: 32px; height: 32px; }
.ik-40 { width: 40px; height: 40px; stroke-width: 1.4; }
.ik-b > * { stroke-dasharray: 100; stroke-dashoffset: 0; }
.ik-m { transform-box: fill-box; transform-origin: 50% 50%; }
.ik-m.ik-akz { fill: var(--accent); stroke: var(--accent); }
.ik-m.ik-zst { fill: var(--zst); stroke: var(--zst); }
/* Knoten als Umriss: die Fläche bleibt offen, der Strich trägt den Akzent.
   Nötig, weil eine CSS-Regel das fill-Attribut im SVG schlägt. */
.ik-m.ik-umriss { fill: none; }
/* Zeile aus Icon und Beschriftung — das Icon ergänzt den Text, es ersetzt ihn nicht. */
.kat-z { display: flex; align-items: center; gap: 10px; }

/* Eintritt nur mit JavaScript; ohne JS ist das Icon fertig gezeichnet.
   Startzustände stehen unter :not(.an), damit danach der Hover greift. */
html.js .ik-an:not(.an) .ik-b > * { stroke-dashoffset: 100; }
html.js .ik-an:not(.an) .ik-m { opacity: 0; }
html.js .ik-an:not(.an) .ik-m.mv-links { transform: translateX(-3px); }
html.js .ik-an:not(.an) .ik-m.mv-rechts { transform: translateX(3px); }
html.js .ik-an:not(.an) .ik-m.mv-hoch { transform: translateY(-3px); }
html.js .ik-an:not(.an) .ik-m.mv-eck { transform: translate(-2px,-2px); }
html.js .ik-an:not(.an) .ik-m.mv-klein { transform: scale(.4); }
html.js .ik-an .ik-b > * { transition: stroke-dashoffset var(--t3) var(--ea) var(--an-v); }
html.js .ik-an .ik-b > *:nth-child(2) { transition-delay: calc(var(--an-v) + 70ms); }
html.js .ik-an .ik-b > *:nth-child(3) { transition-delay: calc(var(--an-v) + 140ms); }
html.js .ik-an .ik-b > *:nth-child(4) { transition-delay: calc(var(--an-v) + 210ms); }
html.js .ik-an .ik-b > *:nth-child(5) { transition-delay: calc(var(--an-v) + 280ms); }
html.js .ik-an .ik-m {
  transition: opacity var(--t2) var(--ea) calc(var(--an-v) + 260ms),
              transform var(--t2) var(--ea-fest) calc(var(--an-v) + 260ms);
}
/* Hover: der bewegte Teil rückt 2 px vor, sonst nichts */
.card:hover .ik-m, .bg-karte:hover .ik-m {
  transform: translateX(2px); transition: transform var(--t2) var(--ea-fest);
}

/* --- Eintritt und Cover-Bewegung -------------------------------------------- */
/* .auf als Animation, nicht als Transition: Karten haben eine eigene
   Hover-Transition, die eine zweite transition-Deklaration überschreiben würde.
   fill-mode backwards, damit nach dem Eintritt der Hover wieder greift. */
@keyframes bgAuf { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.js .auf { opacity: 0; }
html.js .auf.an {
  opacity: 1;
  animation: bgAuf var(--t4) var(--ea) calc(var(--an-v) + var(--i,0) * var(--stag)) backwards;
}
/* Cover: das Motiv wächst beim Eintritt in seine Endlage. Eine Aussage,
   höchstens opacity plus eine Transformation. */
html.js .cov-g {
  opacity: .45; transform-box: fill-box;
  transition: opacity var(--t4) var(--ea) calc(var(--i,0) * var(--stag) + 90ms),
              transform var(--t4) var(--ea) calc(var(--i,0) * var(--stag) + 90ms);
}
html.js [data-motiv="wave"] .cov-g { transform: scaleY(.68); transform-origin: 50% 100%; }
html.js [data-motiv="orbit"] .cov-g { transform: scale(.96); }
html.js [data-motiv="grid"] .cov-g { transform: translateY(9px); }
html.js .card.an .cov-g, html.js .acover.an .cov-g { opacity: 1; transform: none; }
/* Der Akzent im Cover ist das eine Teil, das auf Hover reagiert. */
.cov-akz { fill: var(--accent); opacity: 1; transition: transform var(--t2) var(--ea-fest); }
.card:hover .cov-akz, .card:focus-visible .cov-akz { transform: translateY(-6px); }

/* --- Figur «Der Takt» (Teil E, Variante Band) ------------------------------- */
.taktband { max-width: 1180px; margin: clamp(60px, 9vh, 110px) auto 0; padding: 0 var(--pad); }
.taktband + .bfoot { margin-top: 26px; }
.takt { position: relative; display: flex; align-items: center; height: 24px; overflow: hidden; }
.takt-hand { width: 48px; height: 24px; flex: none; color: rgba(245,234,219,.5); }
.takt-raster {
  flex: 1; height: 6px; min-width: 0; color: rgba(245,234,219,.18);
  background: repeating-linear-gradient(90deg, currentColor 0 1.6px, transparent 1.6px 8px);
}
/* Raster beginnt bei 48, Schritt 8, siebter Strich also bei 48 + 6 × 8 = 96 */
.takt-akz {
  position: absolute; left: 96px; top: 4.5px; width: 1.6px; height: 15px;
  background: var(--accent); border-radius: 1px;
}
html.js .takt .takt-hand path { stroke-dasharray: 100; stroke-dashoffset: 100; }
html.js .takt.an .takt-hand path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t3) var(--ea); }
html.js .takt .takt-raster { transform: scaleX(0); transform-origin: 0 50%; }
html.js .takt.an .takt-raster { transform: none; transition: transform var(--t4) var(--ea) 200ms; }
html.js .takt .takt-akz { opacity: 0; }
html.js .takt.an .takt-akz { opacity: 1; transition: opacity var(--t2) var(--ea) 620ms; }

/* --- Erklärstück: Gliederung und Abschnitte --------------------------------- */
.ek-gl {
  margin: 0 0 clamp(28px, 4.5vh, 44px); padding: 16px 18px 18px;
  background: var(--surface); border: 1px solid rgba(245,234,219,.12); border-radius: 10px;
}
.ek-gl > .micro { margin-bottom: 8px; }
.ek-gl ol { list-style: none; display: grid; gap: 2px; }
.ek-gl a {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 2px 6px; border-radius: 6px; color: rgba(245,234,219,.8);
  transition: color var(--t1) var(--ea), background var(--t1) var(--ea);
}
.ek-gl a:hover { color: var(--cream); background: rgba(245,234,219,.05); }
.ek-gn { flex: none; width: 22px; font-size: 12px; color: rgba(245,234,219,.45); }
.ek-gt { font-size: 16.5px; }
/* Der Prüfteil ist der Abschnitt, den Marketingtexte weglassen — er wird markiert. */
.ek-gp a { color: var(--cream); }
.ek-gp .ek-gn { color: var(--accent); }
.ek-gp .ek-gt { border-bottom: 1px solid rgba(229,105,16,.45); padding-bottom: 1px; }
@media (min-width: 720px) { .ek-gl ol { grid-template-columns: 1fr 1fr; gap: 2px 20px; } }

.ek-ab { scroll-margin-top: 90px; }
.ek-ab > * + * { margin-top: 1.15em; }
.prosa .ek-ab > h2 { margin-top: 0; }
.prosa > .ek-ab + .ek-ab { margin-top: clamp(30px, 5vh, 52px); }
.ek-satz { border-left: 2px solid rgba(245,234,219,.24); padding-left: 18px; }
.ek-satz > .ek-lb { margin-bottom: 8px; }
/* Der Prüfteil ist der Abschnitt, der die Erklärstücke von Marketingtexten
   unterscheidet: eigene Fläche, Akzent an der Kante. Der Text wird nie
   ausgeblendet; beim Eintritt läuft nur der Akzentstrich von oben ein. */
.ek-pruef {
  position: relative; background: var(--surface);
  border: 1px solid rgba(245,234,219,.12); border-left: 2px solid rgba(229,105,16,.3);
  border-radius: 10px; padding: clamp(20px, 3.4vw, 30px);
}
.ek-pruef::before {
  content: ""; position: absolute; left: -2px; top: -1px; bottom: -1px; width: 2px;
  background: var(--accent); border-radius: 1px; transform-origin: 50% 0;
}
html.js .ek-pruef::before { transform: scaleY(0); }
html.js .ek-pruef.an::before { transform: none; transition: transform var(--t3) var(--ea); }
.prosa .ek-pruef > h2 { display: flex; align-items: flex-start; gap: 12px; }
.ek-pruef .ik { margin-top: 4px; color: var(--cream); }

/* --- Ruhe bei prefers-reduced-motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js .auf { opacity: 1; }
  html.js .auf.an { animation: none; }
  html.js .cov-g { opacity: 1; transform: none; }
  html.js .ik-an:not(.an) .ik-b > * { stroke-dashoffset: 0; }
  html.js .ik-an:not(.an) .ik-m { opacity: 1; transform: none; }
  .card:hover .ik-m, .bg-karte:hover .ik-m { transform: none; }
  .card:hover .cov-akz, .card:focus-visible .cov-akz { transform: none; }
  html.js .takt .takt-hand path { stroke-dashoffset: 0; }
  html.js .takt .takt-raster { transform: none; }
  html.js .takt .takt-akz { opacity: 1; }
  html.js .ek-pruef::before { transform: none; }
}

/* Markenhinweis im Fuss (27.07.). Die Briefings nennen Produkte beim Namen —
   nominative Nutzung, gleiche Fassung wie auf der Startseite. */
.bfoot .foot-marken { max-width: 76ch; margin-top: 6px; font-size: 12px; line-height: 1.55;
  color: rgba(245,234,219,.45); text-transform: none; letter-spacing: 0; }

/* Pflicht-Hinweis (01.09.): privater, nicht-kommerzieller Charakter — auf jeder
   Seite gut sichtbar, kein Kleingedrucktes. Volle Breite im Flex-Fuss. */
.bfoot .foot-erklaerung {
  flex-basis: 100%;
  max-width: 78ch;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(229,105,16,.55);
  border-left: 4px solid #E56910;
  border-radius: 10px;
  background: rgba(229,105,16,.08);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245,234,219,.92);
}
.bfoot .foot-erklaerung strong { color: #E56910; font-weight: 600; }