/* CoinBegleiter — AKZENTE (#379, 20.10.2026, Denis: Landing „vom Aufbau her gut, aber etwas steril … Trenner, Rahmen, Elemente";
   „generell meine ich es auch" = Zielseite /kryptogewinne-versteuern/ UND die Website allgemein).
   EIGENE DATEI nach dem hero-produkt.css-Muster: keine neuen Tailwind-Klassen, kein Rebuild, kein Buster auf allen Seiten;
   eingebunden nur dort, wo die Klassen benutzt werden (Link mit eigenem ?v=).
   Leitlinien: Markenmotiv Bogen + goldener Schlussstein (Memory bildmarke-schlussstein), Farben = Marken-Token
   (paper #faf9f5, cream #f3f1ec, card #fff, ink #16130f, muted #8a8477, faint #b8b0a0, line #e6e2d9, Gold #987a4e / #c7a46a,
   Hausgruen #1a7f5a, Amber #d9a441 wie die App-Etiketten). Alles STATISCH (Memory website-bewegung-ruhig: kein Einblenden,
   keine Dauerbewegung; nur leise Hover-Schatten). Schriften: Rhymes/Beausite/Geist haben je EINEN Schnitt -> nie font-weight
   bold (Faux-Bold-Falle). Mobil < 768 px gestapelt, ohne Querscrollen. */

/* ---------- 1. Nahtpunkt: Schlussstein-Medaillon auf der Grenze zweier Abschnitte ---------- */
.cb-naht { position: relative; height: 0; z-index: 5; pointer-events: none; }
.cb-naht span {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: #faf9f5; border: 1px solid #e6e2d9;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px -12px rgba(22, 19, 15, .35);
}
.cb-naht svg { width: 13px; height: 15px; display: block; }

/* ---------- 2. Label mit Goldstrich (Eyebrow ueber den Abschnittstiteln) ---------- */
.cb-eyebrow { display: flex; align-items: center; gap: 12px; }
.cb-eyebrow::before { content: ""; width: 24px; height: 1px; background: #987a4e; flex: none; }
.cb-eyebrow.mitte { justify-content: center; }
.cb-eyebrow.mitte::after { content: ""; width: 24px; height: 1px; background: #987a4e; flex: none; }

/* ---------- 3. Karte mit Goldkante (oben), leiser Hover ---------- */
.cb-karte-akzent { position: relative; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.cb-karte-akzent::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, #987a4e 0%, #c7a46a 55%, rgba(199, 164, 106, 0) 100%);
}
.cb-karte-akzent:hover { box-shadow: 0 22px 48px -30px rgba(22, 19, 15, .35); border-color: #d9d2c3; }
.cb-nummer {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #e3d6bf; background: #fbf7ef; color: #987a4e;
  font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .04em;
}

/* ---------- 4. Verbindungslinie zwischen Schritt-Karten (nur Desktop, liegt hinter den Karten) ---------- */
.cb-schritte { position: relative; }
@media (min-width: 768px) {
  .cb-schritte::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 54px; z-index: 0;
    border-top: 1px dashed rgba(152, 122, 78, .55);
  }
  .cb-schritte > * { position: relative; z-index: 1; }
}

/* ---------- 5. Bogen-Motiv als blasser Hintergrund eines Abschnitts ---------- */
.cb-bogen { position: relative; overflow: hidden; isolation: isolate; }
.cb-bogen::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(520px, 78vw); aspect-ratio: 1 / 1; right: -120px; bottom: -250px; opacity: .09;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2316130f' stroke-width='1.1'%3E%3Cpath d='M20 200V100a80 80 0 0 1 160 0v100'/%3E%3Cpath d='M52 200V100a48 48 0 0 1 96 0v100'/%3E%3Cpath d='M20 100h32M148 100h32' stroke-dasharray='2 4'/%3E%3C/g%3E%3Cpath d='M87 15h26l-7 39h-12z' fill='%23987a4e' fill-opacity='.55'/%3E%3C/svg%3E");
}
.cb-bogen.links::before { right: auto; left: -130px; bottom: auto; top: -120px; }
@media (max-width: 767px) { .cb-bogen::before { right: -90px; bottom: -170px; opacity: .07; } .cb-bogen.links::before { left: -110px; top: -90px; } }

/* ---------- 6. Hinweis-Box mit Goldrand links ---------- */
.cb-hinweis {
  border: 1px solid #e6e2d9; border-left: 3px solid #987a4e; border-radius: 4px 14px 14px 4px;
  background: #ffffff; padding: 20px 22px;
}
.cb-hinweis-kopf {
  display: flex; align-items: center; gap: 8px;
  font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .18em; color: #987a4e; text-transform: uppercase;
}
.cb-hinweis-kopf svg { width: 15px; height: 15px; stroke: #987a4e; flex: none; }

/* ---------- Grafik-Karten (Zielseite, illustrativ) — Kartenstil wie die Hero-Karten der Startseite ---------- */
.cb-grafik {
  background: #ffffff; border: 1px solid #e6e2d9; border-radius: 14px;
  box-shadow: 0 24px 60px -30px rgba(22, 19, 15, .32); padding: 22px 24px 20px;
}
.cb-grafik-kopf {
  display: flex; align-items: center; gap: 8px;
  font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .16em; color: #756f64; text-transform: uppercase;
}
.cb-grafik-kopf svg { width: 14px; height: 14px; stroke: #756f64; flex: none; }
.cb-pille {
  display: inline-block; font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .1em;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; text-transform: uppercase;
}
.cb-pille.amber { color: #6b4e12; background: #fbf3df; border: 1px solid #efdcae; }
.cb-pille.gruen { color: #1a5c43; background: #e6f1ea; border: 1px solid #c7e0d0; }
.cb-pille.gold  { color: #7a5f37; background: #fbf7ef; border: 1px solid #e3d6bf; }
.cb-grafik-kopf .cb-pille { margin-left: auto; }

/* 7. Haltefrist-Zeitstrahl */
.cb-zeit-achse { position: relative; margin: 30px 4px 0; }
.cb-zeit-balken { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.cb-zeit-balken .frist { width: 66.667%; background: #d9a441; }
.cb-zeit-balken .frei  { flex: 1; background: #1a7f5a; }
.cb-zeit-stein { position: absolute; left: 66.667%; top: -19px; transform: translateX(-50%); width: 15px; height: 17px; }
.cb-zeit-punkt {
  position: absolute; top: 4px; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%);
  background: #ffffff; border: 2px solid #16130f;
}
.cb-zeit-punkt.kauf { left: 0; transform: translate(0, -50%); }
.cb-zeit-marken {
  position: relative; height: 34px; margin-top: 10px;
  font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .06em; color: #756f64;
}
.cb-zeit-marken span { position: absolute; top: 0; white-space: nowrap; line-height: 1.35; }
.cb-zeit-marken .l { left: 0; }
.cb-zeit-marken .m { left: 66.667%; transform: translateX(-50%); text-align: center; color: #7a5f37; }
.cb-zeit-marken .r { right: 0; text-align: right; }
.cb-zeit-zeilen { margin-top: 14px; }
.cb-zeit-zeile {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0ece3;
  font-family: "Beausite Classic", system-ui, sans-serif; font-size: 13px; color: #16130f;
}
.cb-zeit-zeile .pkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cb-zeit-zeile .pkt.amber { background: #d9a441; }
.cb-zeit-zeile .pkt.gruen { background: #1a7f5a; }
.cb-zeit-zeile em { margin-left: auto; font-style: normal; color: #756f64; font-size: 12.5px; text-align: right; }
@media (max-width: 767px) { .cb-grafik { padding: 18px 16px 16px; } .cb-zeit-zeile { font-size: 12.5px; } .cb-zeit-zeile em { font-size: 12px; } }

/* 8. Freigrenze: zwei fast gleich lange Balken, ganz anderes Ergebnis */
.cb-grenze { position: relative; margin-top: 22px; }
.cb-grenze-zeile { display: grid; grid-template-columns: 92px minmax(0, 1fr) 132px; align-items: center; gap: 14px; padding: 10px 0; }
.cb-grenze-zeile + .cb-grenze-zeile { border-top: 1px solid #f0ece3; }
.cb-grenze-wert { font-family: "Rhymes Display", Georgia, serif; font-size: 20px; color: #16130f; white-space: nowrap; }
.cb-grenze-spur { position: relative; height: 10px; border-radius: 5px; background: #f3f1ec; }
.cb-grenze-spur i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; width: 82.4%; background: #c7a46a; }  /* „knapp darunter", leicht ueberzeichnet, damit die Luecke sichtbar ist */
.cb-grenze-spur.drueber i { width: 83.333%; background: #d9a441; }
.cb-grenze-linie { position: absolute; left: 83.333%; top: -8px; bottom: -8px; width: 0; border-left: 1.5px dashed #16130f; }
.cb-grenze-ergebnis { font-family: "Beausite Classic", system-ui, sans-serif; font-size: 13px; color: #756f64; text-align: right; line-height: 1.35; }
.cb-grenze-ergebnis b { display: block; font-family: "Rhymes Display", Georgia, serif; font-weight: 400; font-size: 18px; color: #16130f; }
@media (max-width: 767px) {
  .cb-grenze-zeile { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .cb-grenze-spur { grid-column: 1 / -1; order: 3; }
  .cb-grenze-wert { font-size: 18px; }
}

/* 9. FIFO-Verlauf (senkrechte Zeitleiste) + zwei Ergebnis-Kacheln */
.cb-verlauf { position: relative; margin: 6px 0 0; padding: 0; list-style: none; }
.cb-verlauf::before { content: ""; position: absolute; left: 112px; top: 20px; bottom: 26px; width: 0; border-left: 1px dashed #c9bfae; }
.cb-verlauf li { position: relative; display: grid; grid-template-columns: 96px 32px minmax(0, 1fr); align-items: start; padding: 12px 0; }
.cb-verlauf .datum { font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; color: #756f64; padding-top: 4px; }
.cb-verlauf .knoten { position: relative; width: 13px; height: 13px; margin: 5px auto 0; border-radius: 50%; background: #ffffff; border: 2px solid #16130f; z-index: 1; }
.cb-verlauf .knoten.verkauf { background: #16130f; }
.cb-verlauf .knoten.fifo { border-color: #987a4e; background: #c7a46a; }
.cb-verlauf .text { font-family: "Beausite Classic", system-ui, sans-serif; font-size: 14px; color: #16130f; line-height: 1.5; }
.cb-verlauf .text small { display: block; margin-top: 2px; font-size: 12.5px; color: #8a8477; }
.cb-verlauf .text .cb-pille { margin-left: 8px; vertical-align: 1px; }
@media (max-width: 767px) {
  .cb-verlauf::before { left: 16px; }
  .cb-verlauf li { grid-template-columns: 32px minmax(0, 1fr); }
  .cb-verlauf .datum { grid-column: 2; grid-row: 1; padding-top: 0; }
  .cb-verlauf .knoten { grid-column: 1; grid-row: 1 / span 2; }
  .cb-verlauf .text { grid-column: 2; grid-row: 2; }
  .cb-verlauf .text .cb-pille { margin: 6px 0 0; display: table; }
}
.cb-ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 767px) { .cb-ergebnis { grid-template-columns: minmax(0, 1fr); } }
.cb-ergebnis > div { position: relative; overflow: hidden; border: 1px solid #e6e2d9; border-radius: 12px; background: #faf9f5; padding: 18px 18px 16px; }
.cb-ergebnis > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.cb-ergebnis > .amber::before { background: #d9a441; }
.cb-ergebnis > .gruen::before { background: #1a7f5a; }
.cb-ergebnis .gross { display: block; margin-top: 10px; font-family: "Rhymes Display", Georgia, serif; font-size: 26px; line-height: 1.15; color: #16130f; }
.cb-ergebnis p { margin-top: 6px; font-family: "Beausite Classic", system-ui, sans-serif; font-size: 13px; color: #8a8477; line-height: 1.5; }

/* ======================================================================================================================
   #379 Teil 2 (20.10.2026 abends, Denis: „sieht alles richtig gut aus … nur der Anfang der Landing Page muss jetzt auch noch eine
   entsprechende Überarbeitung bekommen"): Hero bis Dashboard der Startseite. GRENZE (Memory website-bewegung-ruhig + hero-produkt.css
   03.10.): mobil darf der Hero KEINE Hoehe gewinnen (Text + 3 Kacheln enden ueber der schwebenden Safari-Leiste) -> mobil nur
   hoehenneutrale Zusaetze (Striche, Goldkante); Bogen und Vertrauenszeile erst ab 768 bzw. 1024 px. Die Hero-Einblendung (1,6 s als
   Einheit) und die eine Audit-Bewegung bleiben unberuehrt; alle Zusaetze sind statisch und blenden mit ihrer Karte/ihrem Text ein.
   ====================================================================================================================== */

/* 10. Hero-Label mit Goldstrichen (mobil mittig zwei kurze, Desktop links einer) */
/* Messung 375 px: Text 297 px in 335 px Box -> mit Strichen 12 + 8 px braucht es 337 px; ab 390 px Viewport (Box 350) passt es ohne
   Umbruch (iPhone 393/402/440), darunter keine Striche (sonst 2 Zeilen = Hero hoeher). */
.cb-hp-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cb-hp-eyebrow::before, .cb-hp-eyebrow::after { content: ""; width: 12px; height: 1px; background: #c7a46a; flex: none; }
@media (max-width: 389px) { .cb-hp-eyebrow::before, .cb-hp-eyebrow::after { display: none; } }
@media (min-width: 768px) { .cb-hp-eyebrow { gap: 12px; } .cb-hp-eyebrow::before, .cb-hp-eyebrow::after { width: 24px; } }
@media (min-width: 1024px) { .cb-hp-eyebrow { justify-content: flex-start; } .cb-hp-eyebrow::after { display: none; } }

/* 11. Goldkante an den Hero-Karten (Hintergrund-Verlauf statt Pseudo-Element: folgt dem Radius, kostet keine Hoehe) */
.cb-hs-karte {
  background: linear-gradient(90deg, #987a4e 0%, #c7a46a 55%, rgba(199, 164, 106, 0) 100%) top left / 100% 2px no-repeat, #ffffff;
}

/* 12. Bogen-KRONE ueber der Kartenbuehne (seit 22.10.2026 ab 1024 px Breite und 790 px Hoehe; Erklaerung unten).
   [Bis 22.10.: ganzer Bogen ab 768 px, Box 90 px ueber und 30 px unter der Buehne, unten buendig (contain + bottom). Messung 20.10.
   18:2x: bei 1024 px ragte die Box 17 px ueber den rechten Rand -> overflow-x: clip am Hero bleibt (schneidet waagerecht ab).] */
/* 22.10.2026 (Denis: „dieser Bogen im Hero sieht so fehlplaziert aus hinter den Kacheln", Variante C aus dem Vergleichsbild
   bak_archiv/bogen_hero_2026-10-22/): vorher lagen die Bogenbeine fast genau auf den Kanten der Audit-Karte, liefen neben den kleinen
   Karten weiter, innere Stummel schauten unten heraus, der Schlussstein wurde von der Karte halb abgeschnitten. JETZT nur noch die
   KRONE: Bogen 106 % der Buehnenbreite, mittig, quadratisch (aspect-ratio); die Unterkante des Schlusssteins (SVG-Einheit 44 =
   22 % der Hoehe) sitzt 14 px ueber der Karte (top -14px + translateY(-22 %), Prozent = eigene Hoehe -> skaliert mit jeder Breite);
   alles unterhalb der Karten-Oberkante blendet eine Maske aus (27 % -> 34 % der Hoehe), Beine und Kaempferlinie sind nie sichtbar.
   GROESSE nach dem Platz UEBER der Karte (Messung 768–2560 px): der Schlussstein (17 % der Hoehe) muss unter die Navigation
   (56 px) passen. Kartenoberkante = Hero-Polster 112 px·hz + halber Rest von min(88svh, 800 px·hz) − 658 px·hz (Polster 176 +
   Buehne 482, gemessen 1280×800 → 135, 1440×900 → 179, 1920×1080 → 217); Kronenhoehe H = (Platz − 8 px Luft − 14 px·hz) / 0,17,
   gedeckelt bei 106 % der Buehne. Innerhalb der gezoomten Buehne loesen px UND svh ungezoomt auf und werden dann mit hz
   vergroessert (gemessen 2560×1440: 50svh = 720 CSS-px → 1008 Bildschirm-px) → die Bildschirmformel wird durch hz geteilt.
   Unter 1024 px (Text ueber den Karten, 32 px Luft) und unter 790 px Fensterhoehe (Krone < ~300 px) entfaellt die Krone.
   Vorher-Stand: bak_archiv/bogen_hero_2026-10-22/akzente.css. Die alte Breiten-Korrektur 768–1279 px (left -6 %/right -2 %) entfaellt. */
.cb-hp { overflow-x: clip; }
@media (min-width: 1024px) and (min-height: 790px) {
  .cb-hs { isolation: isolate; }
  .cb-hs::before {
    --cb-krone-platz: calc(112px * var(--hz) - 56px + max(0px, (min(88svh, 800px * var(--hz)) - 658px * var(--hz)) / 2));
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; width: min(106%, calc((var(--cb-krone-platz) - 8px - 14px * var(--hz)) / 0.17 / var(--hz)));
    aspect-ratio: 1 / 1; top: -14px; transform: translate(-50%, -22%); opacity: .11;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 27%, transparent 34%);
            mask-image: linear-gradient(to bottom, #000 0, #000 27%, transparent 34%);
    background: no-repeat center top / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2316130f' stroke-width='.9'%3E%3Cpath d='M14 200V100a86 86 0 0 1 172 0v100'/%3E%3Cpath d='M44 200V100a56 56 0 0 1 112 0v100'/%3E%3Cpath d='M14 100h30M156 100h30' stroke-dasharray='2 4'/%3E%3C/g%3E%3Cpath d='M89 10h22l-6 34h-10z' fill='%23987a4e' fill-opacity='.7'/%3E%3C/svg%3E");
  }
}
/* Unter ~55 % der Buehnenbreite wirkt die Krone wie ein Hoecker (gemessen 1536×800: 43 %) → dann lieber keine. Ab 1024 px reicht die
   Mindesthoehe 790 oben; mit dem groesseren Zoom ab 1536/1800/2200 px braucht die Krone mehr Hoehe (Formel oben nach H ≥ 0,55·Breite
   aufgeloest: 834 / 897 / 973 px; ab 2400 px genuegt 790). */
@media (min-width: 1536px) and (max-width: 1799px) and (max-height: 834px),
       (min-width: 1800px) and (max-width: 2199px) and (max-height: 897px),
       (min-width: 2200px) and (max-width: 2399px) and (max-height: 973px) {
  .cb-hs::before { content: none; }
}

/* 13. Vertrauenszeile unter dem Hero-Knopf (nur ab 1024 px; mobil steht die Hoehe nicht zur Verfuegung) */
.cb-hp-vertrauen { display: none; }
@media (min-width: 1024px) {
  .cb-hp-vertrauen {
    display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 26px 0 0; padding: 0; list-style: none;
    font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; color: #756f64; text-transform: uppercase;
  }
  .cb-hp-vertrauen li { display: inline-flex; align-items: center; white-space: nowrap; }
  /* 22.10.2026 (Denis: Schlussstein-Zeichen vor jedem Punkt „zu viel"): nur ein Mittelpunkt ZWISCHEN den Punkten. Er haengt am
     folgenden li, faellt also mit dem ausgeblendeten dritten Punkt (< 1280 px) automatisch mit weg. */
  .cb-hp-vertrauen li + li::before { content: "·"; color: #987a4e; margin-right: 20px; font-size: 1.4em; line-height: 1; }
  .cb-hp-vertrauen li.breit { display: none; }   /* dritter Punkt erst ab 1280 px, sonst Umbruch 2 + 1 */
}
@media (min-width: 1280px) {
  .cb-hp-vertrauen { font-size: 10px; letter-spacing: .1em; gap: 10px 16px; }
  .cb-hp-vertrauen li + li::before { margin-right: 16px; }   /* Abstand Punkt-Text = Abstand Text-Punkt (gap) */
  .cb-hp-vertrauen li.breit { display: inline-flex; }
}

/* 14. Schlussstein-Trenner zwischen den „Fuenf Fragen" (liegt mittig in der 3,2-rem-Luecke, kostet keine Hoehe) */
.cb-fragen > div { position: relative; }
.cb-fragen > div + div::before {
  content: ""; position: absolute; left: 50%; top: -2.05rem; width: 9px; height: 11px; transform: translateX(-50%); opacity: .85;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='38 15 24 30'%3E%3Cpath d='M39 17 L61 17 L54 43 L46 43 Z' fill='%23c7a46a'/%3E%3C/svg%3E");
}

/* 15. Bogen hell auf dunklem Grund (Block „Die Antwort"): nur Linien in Papierfarbe, ohne Schlussstein-Flaeche; Bogen-Oberkante
       knapp unter der Blockkante, Beine laufen unten aus dem Block (overflow hidden). Breite so, dass die innere Oeffnung breiter
       ist als die Wortmarke (Desktop ~345 px, mobil ~200 px). */
.cb-bogen.hell::before {
  --bw: min(900px, 150vw);
  width: var(--bw); left: 50%; right: auto; top: calc(22px - var(--bw) * .1); bottom: auto; transform: translateX(-50%); opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23faf9f5' stroke-width='.7'%3E%3Cpath d='M20 200V100a80 80 0 0 1 160 0v100'/%3E%3Cpath d='M52 200V100a48 48 0 0 1 96 0v100'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 767px) { .cb-bogen.hell::before { right: auto; bottom: auto; opacity: .08; } }

/* ======================================================================================================================
   #379 Teil 3 (20.10.2026 abends, Denis: Dashboard „in Form von einem Laptop … auf einem Tisch … heranzoomen"; Wahl „Weg 1" =
   gezeichneter Laptop statt Foto/Mockup): Abschnitt „Ihr Dashboard" der Startseite. Linien wie das Bogen-Motiv (1,5 px Tinte),
   Kamera = kleiner goldener Schlussstein, Tischkante als Haarlinie mit weichem Schatten. Heranzoomen = die BESTEHENDE Lightbox
   (Klick aufs Bild, darin Klick = 1:1); Scroll-Zoom bewusst nicht (Denis 14.07. entfernt, Linie „ruhig"). Statisch.
   ====================================================================================================================== */
/* Breite: Messung 1366 px ergab mit 1000 px Rahmen nur 834 px Bild (vorher ~1088) -> volle Containerbreite, schmalere Raender */
/* Messung 1024 px: Tischkante (-9 %) ragte 47 px ueber den Rand -> Abschnitt schneidet waagerecht ab (kein Scroll-Container). */
.cb-laptop-buehne { overflow-x: clip; }
.cb-laptop { position: relative; width: 100%; max-width: 1104px; margin: 0 auto; padding: 0 4.5%; isolation: isolate; }
.cb-laptop-deckel {
  position: relative; background: #ffffff; border: 1.5px solid #2a251f; border-radius: 20px 20px 7px 7px;
  padding: 22px 16px 16px; box-shadow: 0 34px 70px -48px rgba(22, 19, 15, .55);
}
.cb-laptop-kamera {
  position: absolute; top: 8px; left: 50%; width: 8px; height: 10px; transform: translateX(-50%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='38 15 24 30'%3E%3Cpath d='M39 17 L61 17 L54 43 L46 43 Z' fill='%23987a4e'/%3E%3C/svg%3E");
}
.cb-laptop-schirm { position: relative; border: 1px solid #e6e2d9; border-radius: 5px; overflow: hidden; background: #faf9f5; }
.cb-laptop-schirm img { display: block; width: 100%; height: auto; }
.cb-laptop-lupe {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-radius: 999px; background: rgba(22, 19, 15, .78); color: #faf9f5; pointer-events: none;
  font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .4);
}
.cb-laptop-lupe svg { width: 13px; height: 13px; flex: none; }
/* Unterteil: breiter als der Deckel, flach, mit Griffmulde; sitzt auf der Tischkante */
.cb-laptop-basis {
  position: relative; height: 15px; margin: -1px -5% 0;
  background: linear-gradient(#ffffff, #efebe3); border: 1.5px solid #2a251f; border-radius: 2px 2px 16px 16px / 2px 2px 12px 12px;
}
.cb-laptop-basis i {
  position: absolute; left: 50%; top: -1.5px; width: 13%; height: 6px; transform: translateX(-50%);
  border: 1.5px solid #2a251f; border-top: 0; border-radius: 0 0 9px 9px; background: #f5f2ec;
}
.cb-laptop-tisch {
  position: absolute; z-index: -1; left: -9%; right: -9%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(207, 198, 181, 0), #cfc6b5 16%, #cfc6b5 84%, rgba(207, 198, 181, 0));
}
.cb-laptop-tisch::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: -10px; height: 26px;
  background: radial-gradient(ellipse at center, rgba(22, 19, 15, .16), rgba(22, 19, 15, 0) 68%);
}
@media (max-width: 767px) {
  .cb-laptop { padding: 0 4%; }
  .cb-laptop-deckel { border-radius: 12px 12px 5px 5px; padding: 13px 8px 8px; border-width: 1.2px; }
  .cb-laptop-kamera { top: 3px; width: 6px; height: 8px; }
  .cb-laptop-schirm { border-radius: 3px; }
  .cb-laptop-basis { height: 9px; margin: -1px -4% 0; border-width: 1.2px; border-radius: 1px 1px 10px 10px / 1px 1px 7px 7px; }
  .cb-laptop-basis i { height: 4px; border-width: 1.2px; }
  .cb-laptop-tisch { left: -20px; right: -20px; }   /* nie breiter als der Seitenrand (px-6 = 24 px) -> kein Querscrollen */
  .cb-laptop-lupe { right: 8px; bottom: 8px; padding: 5px 9px; font-size: 9.5px; }
}

/* ======================================================================================================================
   #404 (28.10.2026, Denis: „das Dashboard im Laptop animieren … CSV-Datei, Drag & Drop in ein Feld, die Daten werden importiert, dann
   steht das Dashboard da mit Preisen und Steuer, Veranlagung, und dann kann man einfach Report drücken … in Endlosschleife, damit man
   direkt weiß, was man zu erwarten hat"; Entwurf „bau es ein in die Startseite"): ABLAUF IM LAPTOP als reines CSS, 12 s je Durchlauf.
     0,0–0,5 s  Import-Szene steht: DATEI-ABLAGE wie im Tool (Titel, Etikett „ERKENNT DIE BOERSE", Feld „Datei hier ablegen oder
                waehlen", Formatzeile „CSV · XLSX · alle angebundenen Boersen"; Denis 13:5x: kein fester Boersenname vorab, „eingrenzend")
     0,5–2,0 s  Datei „export_2025.csv" fliegt mit dem Zeiger ins Feld, Feld wird dunkler gerandet mit Gold-Hauch
     2,0–3,6 s  im Feld „✓ Erkannt: <Boerse>" (je Durchlauf eine andere, Skript in index.html), Balken „wird gelesen …" -> „importiert"
     3,9–5,4 s  drei Pruefzeilen (Duplikate, Transfers, Salden) bekommen nacheinander ihren Haken, Pille „ALLES GEKLAERT"
     5,6–6,6 s  Import-Szene blendet in zwei Stufen aus (erst Karte, dann Flaeche), darunter das echte Bild assets/Dashboard.webp
     6,8–7,9 s  Zeiger faehrt auf „Steuerbericht erstellen" (im Bild gemessen: x 59,97–71,68 %, y 57,18–60,36 %), Klick mit Goldring
     8,2–9,1 s  Report-Blatt gleitet heraus (Beispielwerte wie im Bild), steht bis 11,0 s
    11,0–12,0 s Ende gestuft: Blatt aus, Flaeche ein, Karte ein -> Schleife
   Masse in cqw (Prozent der Schirmbreite; der Schirm ist Container), damit alles exakt mit dem Bild skaliert. Startet erst, wenn der
   Schirm zu 35 % sichtbar ist, pausiert ausserhalb (Skript am Ende von index.html setzt .cb-ab-an / .cb-ab-laeuft). Ohne JS oder bei
   „weniger Bewegung" bleibt alles wie vorher (Standbild). Die Ebenen lassen Klicks durch -> Lightbox wie bisher. Lupe nur in der
   Dashboard-Phase (verdeckte mobil sonst Karte und Blatt). Entwurf + Bildstreifen + GIF: crypto-tracker/bak_archiv/laptop_ablauf_2026-10-28/.
   Bak dieser Datei: bak_archiv/laptop_ablauf_404/akzente.css.bak_2026-10-28_vor_404
   ====================================================================================================================== */
.cb-laptop-schirm { container-type: inline-size; }
.cb-laptop-lupe { z-index: 6; }
.cb-ab-an .cb-laptop-lupe { animation: cb-ab-lupe 12s linear infinite both; animation-play-state: paused !important; }
.cb-ab-laeuft .cb-laptop-lupe { animation-play-state: running !important; }
@keyframes cb-ab-lupe { 0%, 50% { opacity: 0; } 55%, 94.2% { opacity: 1; } 98.3%, 100% { opacity: 0; } }
.cb-ab { display: none; }
.cb-ab-an .cb-ab {
  display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  /* Masse Desktop (Schirmbreite = 100cqw, Schirmhoehe = 56,32cqw wie das Bild 3068 x 1728) */
  --k-top: 12cqw; --k-w: 52cqw; --k-py: 2.2cqw; --k-px: 2.6cqw; --k-rad: 1.2cqw;
  --q-fs: 1.75cqw; --q-badge: 2.6cqw; --q-em: .7cqw;   /* q-badge = Hoehe der Kopfzeile (Titel + Etikett) */
  --z-gap: 1.6cqw; --z-h: 12cqw; --z-rad: .8cqw; --z-fs: 1.5cqw; --z-sm: .72cqw; --z-ico: 3cqw;
  --l-fs: 1.4cqw; --l-st: .85cqw; --l-bar: .6cqw;
  --p-fs: 1.3cqw; --p-row: 2.9cqw; --p-ok: 1.4cqw; --p-mt: 1.4cqw;
  --pille-fs: .85cqw; --kopf-an: block;
  --f-fs: 1.25cqw; --f-s: 1; --ziel-x: 50cqw; --ziel-y: 24.4cqw; --zg: 2.2cqw;   /* Ziel = Feldmitte: 12 + 2,2 + 2,6 + 1,6 + 6 */
  --b-left: 60cqw; --b-top: 12.5cqw; --b-s: 1;
}
.cb-ab-an .cb-ab, .cb-ab-an .cb-ab * { animation-play-state: paused !important; }
.cb-ab-laeuft .cb-ab, .cb-ab-laeuft .cb-ab * { animation-play-state: running !important; }
.cb-ab * { box-sizing: border-box; }
.cb-ab svg { display: block; }

/* Import-Szene; Uebergaenge gestuft (Bildstreifen: zwei dichte Oberflaechen halbdurchsichtig uebereinander wirkten unruhig) */
.cb-ab-imp { position: absolute; inset: 0; z-index: 3; background: #f3f1ec; animation: cb-ab-imp 12s linear infinite both; }
@keyframes cb-ab-imp { 0%, 50% { opacity: 1; } 55%, 94.2% { opacity: 0; } 98.3%, 100% { opacity: 1; } }
.cb-ab-kopf, .cb-ab-karte { animation: cb-ab-inhalt 12s linear infinite both; }
@keyframes cb-ab-inhalt { 0%, 46.7% { opacity: 1; } 51.7%, 96.7% { opacity: 0; } 99.6%, 100% { opacity: 1; } }
.cb-ab-kopf { display: var(--kopf-an); position: absolute; left: 4cqw; top: 3.2cqw; }
.cb-ab-eb { display: block; font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: .95cqw; letter-spacing: .22em; color: #826741; }
.cb-ab-titel { display: block; margin-top: .5cqw; font-family: "Rhymes Display", Georgia, serif; font-size: 2.5cqw; line-height: 1.1; color: #16130f; }
.cb-ab-karte {
  position: absolute; left: 50%; top: var(--k-top); width: var(--k-w); transform: translateX(-50%);
  padding: var(--k-py) var(--k-px); background: #fff; border: 1px solid #e6e2d9; border-radius: var(--k-rad);
  box-shadow: 0 2cqw 5cqw -2.6cqw rgba(22, 19, 15, .30);
}
/* Kopf wie die DATEI-ABLAGE im Tool (pages/1_Imports.py, Block impdrop_zentral; Denis 28.10. 13:5x: „so wie es bei uns wirklich im
   Tool bei Import aussieht … die Dateiablage, die erkennt die Börse … jetzt steht da schon Binance, das klingt so eingrenzend"):
   Titel „Datei-Ablage" in Rhymes, Etikett „ERKENNT DIE BÖRSE" (Mono, Gold-Braun #7d6540, feiner Rand) wie im Tool. */
.cb-ab-quelle { position: relative; display: flex; align-items: center; gap: 1cqw; height: var(--q-badge); }
.cb-ab-abtitel { font-family: "Rhymes Display", Georgia, serif; font-size: var(--q-fs); line-height: 1; color: #16130f; letter-spacing: -.01em; }
.cb-ab-etikett { font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: var(--q-em); letter-spacing: .14em; color: #7d6540;
  border: 1px solid #e6e2d9; border-radius: .45cqw; padding: .25em .6em; white-space: nowrap; }
.cb-ab-rechts { margin-left: auto; display: grid; justify-items: end; align-items: center; }
.cb-ab-pille { font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: var(--pille-fs); letter-spacing: .1em; white-space: nowrap;
  color: #15694b; background: #e9f4ef; border: 1px solid #c9e3d6; border-radius: 999px; padding: .3em .8em;
  animation: cb-ab-pille 12s linear infinite both; }
@keyframes cb-ab-pille { 0%, 43% { opacity: 0; transform: scale(.9); } 45.5%, 91% { opacity: 1; transform: none; } 92.5%, 100% { opacity: 0; transform: scale(.9); } }
/* Ablagefeld wie im Tool: Rand 1,5 px gestrichelt Gold #987a4e, Flaeche #faf9f5, Tinten-Kreis mit ↑, „Datei hier ablegen oder waehlen"
   in Rhymes. Beim Darueberziehen: Rand #7d6540, Flaeche mit Gold-Hauch. Nach dem Ablegen steht im Feld die Statuszeile
   „✓ Erkannt: <Boerse>" (wie #288 im Tool), darunter Balken und „wird gelesen …" -> „importiert". */
.cb-ab-zone { position: relative; margin-top: var(--z-gap); height: var(--z-h); border: .15cqw dashed #987a4e; border-radius: var(--z-rad);
  background: #faf9f5; display: grid; place-items: center; animation: cb-ab-zone 12s linear infinite both; }
.cb-ab-zone > * { grid-area: 1 / 1; }
@keyframes cb-ab-zone {
  0%, 11.5% { border-color: #987a4e; background-color: #faf9f5; }
  14%, 18.5% { border-color: #7d6540; background-color: #f6eedd; }
  21%, 100% { border-color: #987a4e; background-color: #faf9f5; }
}
.cb-ab-leer { display: flex; flex-direction: column; align-items: center; text-align: center; animation: cb-ab-leer 12s linear infinite both; }
@keyframes cb-ab-leer { 0%, 17.5% { opacity: 1; } 19.5%, 91% { opacity: 0; } 92.5%, 100% { opacity: 1; } }
.cb-ab-pfeil { width: var(--z-ico); height: var(--z-ico); border-radius: 50%; background: #16130f; color: #faf9f5; display: grid; place-items: center;
  font-family: "Beausite Classic", system-ui, sans-serif; font-size: calc(var(--z-ico) * .48); line-height: 1; }
.cb-ab-leer b { margin-top: .8cqw; font-weight: 400; font-family: "Rhymes Display", Georgia, serif; font-size: var(--z-fs); color: #16130f; letter-spacing: -.01em; }
.cb-ab-lauf { width: 100%; padding: 0 var(--k-px); display: flex; flex-direction: column; align-items: center; animation: cb-ab-lauf 12s linear infinite both; }
@keyframes cb-ab-lauf { 0%, 19% { opacity: 0; } 21%, 91% { opacity: 1; } 92.5%, 100% { opacity: 0; } }
.cb-ab-datei { display: inline-flex; align-items: center; gap: .55em; font-family: "Beausite Classic", system-ui, sans-serif; font-size: var(--l-fs); color: #16130f; }
.cb-ab-datei svg { width: 1.15em; height: 1.15em; stroke: #1a7f5a; stroke-width: 3; flex: none; }
.cb-ab-datei .cb-ab-ok path { animation: cb-ab-hk-erkannt 12s linear infinite both; }
@keyframes cb-ab-hk-erkannt { 0%, 19.5% { stroke-dashoffset: 20; } 22%, 91% { stroke-dashoffset: 0; } 92.5%, 100% { stroke-dashoffset: 20; } }
.cb-ab-status { margin-top: .9cqw; display: grid; justify-items: center; font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: var(--l-st); letter-spacing: .1em; }
.cb-ab-status > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.cb-ab-liest { color: #826741; animation: cb-ab-liest 12s linear infinite both; }
@keyframes cb-ab-liest { 0%, 29.5% { opacity: 1; } 31%, 91% { opacity: 0; } 92.5%, 100% { opacity: 1; } }
.cb-ab-fertig { color: #15694b; animation: cb-ab-fertig 12s linear infinite both; }
@keyframes cb-ab-fertig { 0%, 29.5% { opacity: 0; } 31%, 91% { opacity: 1; } 92.5%, 100% { opacity: 0; } }
.cb-ab-fertig svg { width: 1.35em; height: 1.35em; stroke: #1a7f5a; stroke-width: 3; }
.cb-ab-balken { width: 62%; margin-top: 1cqw; height: var(--l-bar); border-radius: 99px; background: #ede7dc; overflow: hidden; }
.cb-ab-balken i { display: block; height: 100%; border-radius: 99px; transform-origin: 0 50%; animation: cb-ab-balken 12s linear infinite both; }
@keyframes cb-ab-balken {
  0%, 20% { transform: scaleX(0); background-color: #c7a46a; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  30% { transform: scaleX(1); background-color: #c7a46a; }
  31.5%, 91% { transform: scaleX(1); background-color: #1a7f5a; }
  92.5%, 100% { transform: scaleX(0); background-color: #c7a46a; }
}
.cb-ab-ok path { stroke-dasharray: 20; }   /* Haken zeichnen sich wie im Hero */
.cb-ab-fertig path { animation: cb-ab-hk-fertig 12s linear infinite both; }
@keyframes cb-ab-hk-fertig { 0%, 30% { stroke-dashoffset: 20; } 33%, 91% { stroke-dashoffset: 0; } 92.5%, 100% { stroke-dashoffset: 20; } }
/* Unter dem Feld: erst die Formatzeile wie im Tool („CSV · XLSX · alle angebundenen Boersen"), nach dem Import an derselben Stelle
   die drei Pruefzeilen (Zeilen stehen gemeinsam da, Haken und Werte kommen nacheinander) */
.cb-ab-unten { position: relative; margin-top: var(--p-mt); height: calc(var(--p-row) * 3); }
.cb-ab-meta { position: absolute; left: 0; right: 0; top: .6cqw; text-align: center; font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: var(--z-sm); letter-spacing: .08em; color: #6f695e; animation: cb-ab-meta 12s linear infinite both; }
@keyframes cb-ab-meta { 0%, 17.5% { opacity: 1; } 19.5%, 91% { opacity: 0; } 92.5%, 100% { opacity: 1; } }
.cb-ab-pruef { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.cb-ab-pruef li { display: flex; align-items: center; gap: 1cqw; height: var(--p-row); border-top: 1px solid #f0ece3;
  font-family: "Beausite Classic", system-ui, sans-serif; font-size: var(--p-fs); color: #16130f;
  animation: cb-ab-zeile 12s linear infinite both; }
.cb-ab-pruef li em { margin-left: auto; font-style: normal; color: #756f64; animation: cb-ab-wert 12s linear infinite both; }
.cb-ab-pruef svg { width: var(--p-ok); height: var(--p-ok); stroke: #1a7f5a; stroke-width: 3; flex: none; }
.cb-ab-pruef path { animation: cb-ab-hk-zeile 12s linear infinite both; }
/* Zeile 1 prueft bei 3,9 s (32,5 %); Zeile 2 und 3 per animation-delay 0,4 / 0,8 s. Zuruecksetzen bei 84–85,5 % (Zeile 3 global 10,9 s),
   also solange die Import-Szene unsichtbar ist (6,6–11,3 s). */
@keyframes cb-ab-zeile { 0%, 30% { opacity: 0; } 32%, 91% { opacity: 1; } 92.5%, 100% { opacity: 0; } }   /* alle drei gemeinsam, ohne Verzug */
@keyframes cb-ab-wert { 0%, 32.5% { opacity: 0; } 35%, 84% { opacity: 1; } 85.5%, 100% { opacity: 0; } }
@keyframes cb-ab-hk-zeile { 0%, 32.5% { stroke-dashoffset: 20; } 35.5%, 84% { stroke-dashoffset: 0; } 85.5%, 100% { stroke-dashoffset: 20; } }
.cb-ab-pruef li:nth-child(2) em, .cb-ab-pruef li:nth-child(2) path { animation-delay: .4s; }
.cb-ab-pruef li:nth-child(3) em, .cb-ab-pruef li:nth-child(3) path { animation-delay: .8s; }

/* fliegende Datei mit Zeiger */
.cb-ab-flug { position: absolute; left: 0; top: 0; z-index: 4; animation: cb-ab-flug 12s linear infinite both; }
@keyframes cb-ab-flug {
  0%, 4.2% { opacity: 0; transform: translate(84cqw, 52cqw); }
  6.7% { opacity: 1; transform: translate(79cqw, 47cqw); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  11.7% { transform: translate(66cqw, calc(var(--ziel-y) - 5cqw)); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  16.7% { opacity: 1; transform: translate(var(--ziel-x), var(--ziel-y)); }
  19.2%, 100% { opacity: 0; transform: translate(var(--ziel-x), var(--ziel-y)); }
}
.cb-ab-fall { animation: cb-ab-fall 12s linear infinite both; }
@keyframes cb-ab-fall { 0%, 16.7% { transform: scale(1); } 19.2%, 100% { transform: scale(.55); } }
.cb-ab-chip { position: relative; display: inline-flex; align-items: center; gap: .9cqw; white-space: nowrap;
  transform: translate(-50%, -50%) scale(var(--f-s)); padding: .9cqw 1.4cqw .9cqw 1cqw; background: #fff; border: 1px solid #e6e2d9;
  border-radius: .8cqw; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(22, 19, 15, .38);
  font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: var(--f-fs); color: #16130f; }
.cb-ab-dok { position: relative; width: 2.4em; height: 3em; border: .14em solid #16130f; border-radius: .25em; flex: none;
  display: grid; place-items: end center; padding-bottom: .35em; font-size: .62em; letter-spacing: .04em; color: #15694b; background: #f6f3ec; }
.cb-ab-dok::before { content: ""; position: absolute; right: -.14em; top: -.14em; width: .8em; height: .8em; background: #fff;
  border-left: .14em solid #16130f; border-bottom: .14em solid #16130f; border-radius: 0 0 0 .2em; }
.cb-ab-chip .cb-ab-zg { position: absolute; right: -1.2cqw; bottom: -1.9cqw; }
.cb-ab-zg { width: var(--zg); height: calc(var(--zg) * 1.31); filter: drop-shadow(0 .25cqw .4cqw rgba(0, 0, 0, .25)); }

/* Klick auf „Steuerbericht erstellen" (im Bild) */
.cb-ab-druck { position: absolute; z-index: 1; left: 59.97cqw; top: 32.2cqw; width: 11.71cqw; height: 1.79cqw; border-radius: .3cqw;
  background: rgba(255, 255, 255, .16); animation: cb-ab-druck 12s linear infinite both; }
@keyframes cb-ab-druck {
  0%, 65.5% { opacity: 0; box-shadow: 0 0 0 0 rgba(199, 164, 106, .5); }
  66.2% { opacity: 1; box-shadow: 0 0 0 .45cqw rgba(199, 164, 106, .5); }
  71%, 100% { opacity: 0; box-shadow: 0 0 0 1.6cqw rgba(199, 164, 106, 0); }
}
.cb-ab-zeiger { position: absolute; left: 0; top: 0; z-index: 5; transform-origin: 0 0; animation: cb-ab-zeiger 12s linear infinite both; }
@keyframes cb-ab-zeiger {
  0%, 55% { opacity: 0; transform: translate(47cqw, 46cqw); }
  57.5% { opacity: 1; transform: translate(47cqw, 46cqw); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  65% { transform: translate(65.8cqw, 33.1cqw); }
  65.8% { transform: translate(65.8cqw, 33.1cqw) scale(.8); }
  67% { opacity: 1; transform: translate(65.8cqw, 33.1cqw) scale(1); }
  71% { opacity: 1; transform: translate(66.6cqw, 34.4cqw); }
  74%, 100% { opacity: 0; transform: translate(66.6cqw, 34.4cqw); }
}

/* Report-Blatt */
.cb-ab-pdf { position: absolute; z-index: 2; left: var(--b-left); top: var(--b-top); animation: cb-ab-pdf 12s linear infinite both; }
@keyframes cb-ab-pdf {
  0%, 68.5% { opacity: 0; transform: translateY(16cqw) rotate(4deg); }
  69.5% { opacity: 1; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  76% { opacity: 1; transform: translateY(0) rotate(-1.8deg); }
  91.7% { opacity: 1; transform: translateY(0) rotate(-1.8deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  95% { opacity: 0; transform: translateY(2cqw) rotate(-1.8deg); }
  95.1%, 100% { opacity: 0; transform: translateY(16cqw) rotate(4deg); }
}
.cb-ab-blatt { width: 28cqw; transform-origin: 0 0; transform: scale(var(--b-s)); padding: 2cqw 2.2cqw 1.8cqw; background: #fff;
  border: 1px solid #e6e2d9; border-radius: .6cqw; box-shadow: 0 1.8cqw 4.4cqw -1.6cqw rgba(22, 19, 15, .38); }
.cb-ab-bk { display: flex; align-items: center; justify-content: space-between; }
.cb-ab-bk img { height: 1.05cqw; width: auto; }
.cb-ab-bk span, .cb-ab-bsub, .cb-ab-kach small, .cb-ab-tkopf, .cb-ab-bfuss { font-family: "Geist Mono", "IBM Plex Mono", monospace; letter-spacing: .14em; color: #756f64; }
.cb-ab-bk span { font-size: .7cqw; }
.cb-ab-btitel { margin-top: 1.7cqw; font-family: "Rhymes Display", Georgia, serif; font-size: 2.15cqw; line-height: 1.1; color: #16130f; }
.cb-ab-bsub { margin-top: .45cqw; font-size: .66cqw; }
.cb-ab-kachs { display: flex; gap: .9cqw; margin-top: 1.5cqw; }
.cb-ab-kach { flex: 1; background: #f6f3ec; border-radius: .55cqw; padding: .9cqw 1cqw; }
.cb-ab-kach small { display: block; font-size: .62cqw; }
.cb-ab-kach b { display: block; margin-top: .5cqw; font-weight: 400; font-family: "Rhymes Display", Georgia, serif; font-size: 1.45cqw; color: #16130f; white-space: nowrap; }
.cb-ab-tkopf { display: flex; justify-content: space-between; margin-top: 1.5cqw; padding-bottom: .5cqw; border-bottom: 1px solid #e6e2d9; font-size: .56cqw; }
.cb-ab-tz { display: flex; align-items: center; gap: .8cqw; height: 1.45cqw; border-bottom: 1px solid #f0ece3; }
.cb-ab-tz i { display: block; height: .42cqw; border-radius: 99px; background: #e8e2d6; }
.cb-ab-tz i:first-child { width: 5.4cqw; } .cb-ab-tz i:nth-child(2) { width: 3.2cqw; margin-left: auto; } .cb-ab-tz i:nth-child(3) { width: 3.2cqw; }
.cb-ab-tz i:nth-child(4) { width: 2.6cqw; background: #d6eadf; }
.cb-ab-tz:nth-child(3n) i:first-child { width: 4.4cqw; } .cb-ab-tz:nth-child(2n) i:nth-child(4) { background: #f2dcd5; }
.cb-ab-bfuss { margin-top: 1.3cqw; font-size: .6cqw; }

/* Mobil: eigene Masse, Seitentitel und Pruefliste aus, alles groesser (Schrift im Feld 10,6 px statt 5 px) */
@media (max-width: 767px) {
  .cb-ab-an .cb-ab {
    --k-top: 7cqw; --k-w: 84cqw; --k-py: 3.4cqw; --k-px: 4cqw; --k-rad: 2.2cqw;
    --q-fs: 3.8cqw; --q-badge: 5.6cqw; --q-em: 1.9cqw;
    --z-gap: 2.4cqw; --z-h: 22cqw; --z-rad: 1.6cqw; --z-fs: 3.5cqw; --z-sm: 2.3cqw; --z-ico: 6cqw;
    --l-fs: 3.3cqw; --l-st: 2.2cqw; --l-bar: 1.3cqw;
    --pille-fs: 2.2cqw; --kopf-an: none;
    --f-fs: 3cqw; --ziel-y: 29.4cqw; --zg: 4.6cqw;   /* Ziel = 7 + 3,4 + 5,6 + 2,4 + 11 */
    --b-left: 52cqw; --b-top: 2.5cqw; --b-s: 1.4;
  }
  /* Formatzeile und Pruefliste mobil aus, aber NICHT per display:none (Lehre #403: Chrome malt Strich-Haken nach einem display-Wechsel nicht) */
  .cb-ab-unten { height: 0; margin: 0; overflow: hidden; visibility: hidden; }
  .cb-ab-zone { border-width: .4cqw; }
  .cb-ab-etikett { border-radius: 1cqw; }
  .cb-ab-leer b { margin-top: 1.4cqw; }
  .cb-ab-balken { margin-top: 2cqw; }
  .cb-ab-status { margin-top: 1.6cqw; }
}