/* CoinBegleiter — PRODUKT-HERO (#243, 29.09.2026, Denis: Entwurf „C + Portfolio-Karte + Eyebrow", ohne Adressleiste am Fenster, Verlauf gruen). Ersetzt den Foto-Hero (Stuhl, seit 04.08.) samt svh/lvh/+80px-Apparat und hero-karten.css (beide bleiben als Referenz im Repo, nicht mehr verlinkt). EIGENE DATEI nach dem hero-karten.css-Muster: keine neuen Tailwind-Klassen, kein Rebuild. Farben = Marken-Token (paper #faf9f5, ink #16130f, Gold #987a4e/#c7a46a, Linie #e6e2d9, Hausgruen #1a7f5a). Breakpoints: < 768 px mobil (Tailwind md:), zweispaltig ab 1024 px. #246 (29.09.2026 nachmittags, Denis: Tab-Wechsel am iPhone „ein bisschen unruhig … zu viele Infos"; Entwurf als Bild abgenommen „Hero nehmen wir"): STANDBILD statt App-Fenster mit 12-s-Wechsel (Audit -> Steuer -> Portfolio) und schwebender Karte. Eine ruhige Buehne .cb-hs: grosse Karte + zwei kleine Karten. ILLUSTRATIV (aria-hidden), Demo-Werte. Desktop ueberlappen die kleinen Karten die grosse leicht, mobil gestapelt ohne Ueberlappung und mit weniger Text. Vorher-Stand (Fenster, Slides, Reiter-Keyframes, schwebende Karte, mobiler Portfolio-Reiter): bak_archiv/hero-produkt.css.bak_2026-09-29_hero_standbild. 02.10.2026 (Denis: „ob der Graph ueberhaupt sein soll, weil wir eigentlich ein Steuertool sind … Portfolio-Tracker eher nebensaechlich"; Entwurf A „Audit gross" gewaehlt): die grosse Karte ist jetzt das AUDIT (Kapitel-Liste wie in der App, 2 Themen zu klaeren), klein davor Steuerreport und Portfolio. Portfolio-Karte gross mit Zeitraum-Umschalter, Verlauf, Allokations-Balken und Zaehler sowie die kleine Audit-Karte (Zahl, Balken, Offen-Zeile) sind raus. Vorher-Stand: bak_archiv/hero-produkt.css.bak_2026-10-02_vor_audit_hero (Entwurf: entwurf_hero_steuer_ENTWURF.html, untracked). */ .cb-hp { position: relative; background: #faf9f5; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 32px; padding: 120px 32px 72px; } .cb-hp-text { text-align: center; max-width: 640px; } .cb-hp-eyebrow { font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .15em; color: #826741; margin: 0; } .cb-hp-h1 { margin: 16px 0 0; font-size: clamp(36px, 5.2vw, 62px); line-height: 1.06; letter-spacing: -0.02em; color: #16130f; } .cb-hp-sub { margin: 16px auto 0; max-width: 34em; font-family: "Rhymes Display", Georgia, serif; font-size: 21px; line-height: 1.4; color: #5a544a; } .cb-hp-cta { margin-top: 28px; } .cb-hp-knopf { display: inline-flex; align-items: center; justify-content: center; height: 48px; min-width: 280px; padding: 0 32px; background: #16130f; color: #faf9f5; border-radius: 8px; font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .15em; text-decoration: none; transition: background-color .15s ease; } .cb-hp-knopf:hover { background: rgba(22, 19, 15, .9); } /* ---------- #246 Standbild-Buehne ---------- */ .cb-hs { position: relative; width: 100%; max-width: 600px; } .cb-hs-karte { background: #ffffff; border: 1px solid #e6e2d9; border-radius: 12px; box-shadow: 0 24px 60px -28px rgba(22, 19, 15, .32); /* Pruefer-Befund 29.09.: KEIN opacity:0 im Grundzustand — fill-mode both haelt die Karte waehrend der Verzoegerung unsichtbar; sind Animationen abgeschaltet (Erweiterung, Vorschau-Werkzeug), bleibt sie sichtbar statt leer. */ /* 01.10.2026 abends (Denis: verzoegertes Einblenden „gefaellt mir nicht mehr"): Karten stehen sofort da, kein Einzel-Einblenden. */ } .cb-hs-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; white-space: nowrap; } .cb-hs-kopf svg { width: 14px; height: 14px; stroke: #756f64; flex: none; } /* 02.10.2026: grosse AUDIT-Karte. Pille „2 ZU KLAEREN" im Amber der App-Etiketten („Zu klären", #6b4e12 auf hellem Amber), Balken gruen = ohne Befund, Amber = zu klaeren; Liste = Kapitel der App mit ihrem Ok-Text bzw. dem offenen Thema. #403 (28.10.2026, 9. Fassung): KEIN Amber mehr — Pille von Anfang an gruen („ALLES GEKLAERT", #15694b auf #e9f4ef = 5,9:1, dieselben Toene wie der Endzustand von #340 und die Karte der Anmeldeseite #402), Balken eine einzige gruene Flaeche (vorher 71 % gruen + 29 % Amber), Liste = erkannte Transaktionsarten + zwei Audit-Kapitel (Markup in index.html). Vorher: bak_archiv/hero-produkt.css.bak_2026-10-28_vor_hero_gruen. */ .cb-hs-pruef { padding: 22px 24px 20px; } .cb-hs-pille { margin-left: auto; font-size: 9.5px; letter-spacing: .1em; color: #15694b; background: #e9f4ef; border: 1px solid #c9e3d6; border-radius: 999px; padding: 3px 9px; } .cb-hs-fort { display: flex; gap: 2px; height: 6px; margin-top: 14px; border-radius: 3px; overflow: hidden; } .cb-hs-fort i { display: block; height: 100%; } .cb-hs-fort .ok { width: 100%; background: #1a7f5a; } /* #403: vorher 71 % + .of 29 % Amber (#d9a441) */ .cb-hs-liste { list-style: none; margin: 14px 0 0; padding: 0; } .cb-hs-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0ece3; font-family: "Beausite Classic", system-ui, sans-serif; font-size: 13px; color: #16130f; } .cb-hs-liste li em { margin-left: auto; font-style: normal; color: #756f64; font-size: 12.5px; text-align: right; } /* #403 28.10. 10:5x (Denis: „der grüne haken etwas dicker und auffälliger"): 14 -> 16 px, Strich 2,2 (Attribut im Markup) -> 3 per CSS (die CSS-Eigenschaft schlaegt das Praesentationsattribut); Zeilenhoehe unveraendert (Text 13 px ist hoeher), Pruefband-Zeiten gelten weiter. */ .cb-hs-ok { width: 16px; height: 16px; flex: none; stroke: #1a7f5a; stroke-width: 3; } /* #403: Amber-Text (li.of em #6b4e12) und Amber-Punkt (.pkt 7 px #d9a441) entfallen — es gibt keine offenen Themen mehr. */ /* Desktop: Platz unter der Liste, damit die ueberlappenden kleinen Karten nichts verdecken */ @media (min-width: 768px) { .cb-hs-pruef { padding-bottom: 52px; } } .cb-hs-reihe { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: -30px 22px 0; } .cb-hs-reihe .cb-hs-karte { padding: 16px 18px 15px; box-shadow: 0 24px 50px -22px rgba(22, 19, 15, .38); } /* #403 Nachtrag 2 (28.10.2026 10:56, Denis: „portfolio einfach eine schöne grüne kurve ohne zahl … steuerreport bereit"): keine Demo- Betraege mehr in den kleinen Karten. Entfallen: .cb-hs-zeile (§ 23 / § 22 Nr. 3 mit Betraegen in Rhymes 19 px, Trennlinie), .cb-hs-wert (Portfolio-Wert 22 px), .cb-hs-plus (24-h-Veraenderung, Pruefer-Befund 29.09. „24 H"). Neu: .cb-hs-bereit (Haken-Zeile „Bereit zum Download", Haken 6,6 s = direkt nach dem Pruefband, ueber --cb-durchgang), .cb-hs-umfang (Gesetzesstellen ohne Zahlen, nur Desktop), Portfolio-Karte als Flex-Spalte, die Kurve fuellt die Resthoehe (preserveAspectRatio none) mit zarter Flaeche darunter (SVG-Verlauf im Markup). Bak: bak_archiv/hero-produkt.css.bak_2026-10-28_vor_nachtrag2. */ /* 11:0x (Denis: „bereit zum download etwas dicker, die paragraphen weg"): Zeile in Rhymes Display SemiBold 17 px (der einzige kraeftige Schnitt der Marke; Beausite gibt es nur als Clear ~400, fett waere Faux-Bold) — dieselbe Stimme wie vorher die Betraege (Rhymes 19 px). .cb-hs-umfang (Gesetzesstellen, nur Desktop) wieder entfallen. */ .cb-hs-bereit { --cb-durchgang: 6.6s; display: flex; align-items: center; gap: 8px; margin-top: 10px; font-family: "Rhymes Display", Georgia, serif; font-weight: 400; font-size: 17px; line-height: 1.2; color: #16130f; } .cb-hs-pdf { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .12em; color: #756f64; border: 1px solid #e6e2d9; border-radius: 6px; padding: 3px 7px; } .cb-hs-pf { display: flex; flex-direction: column; } .cb-hs-linie { display: block; width: 100%; flex: 1; min-height: 56px; margin-top: 10px; } /* ---------- Zweispaltig ab 1024 px ---------- */ /* 06.10.2026 (Denis: „Hero auf Desktop etwas größer … so viel Platz"; mobil „perfekt" -> mobil unberuehrt): (1) MITWACHSEN: ab 1536 px waechst die ganze Hero-Komposition in Stufen mit (Faktor --hz: Rahmenbreite, Abstaende, Text und Buehne per zoom, damit auch die Kartenschrift mitwaechst). Vorher fest 1104 x 482 px auf jedem Bildschirm (1920: 58 % Breite / 45 % Hoehe). Die Navigation der Startseite waechst im selben Rahmen mit (gemeinsame linke Kante Logo/Ueberschrift); diese Datei laedt nur die Startseite. (2) HOEHE: nicht mehr volle Bildschirmhoehe (vorher min-height: 100svh), sondern min(88svh, 800 px x Faktor) -> der Anfang der naechsten Sektion schaut unten herein. Bak: bak_archiv/hero-produkt.css.bak_2026-10-06_vor_hero_gross */ :root { --hz: 1; } @media (min-width: 1536px) { :root { --hz: 1.08; } } @media (min-width: 1800px) { :root { --hz: 1.18; } } @media (min-width: 2200px) { :root { --hz: 1.3; } } @media (min-width: 2400px) { :root { --hz: 1.4; } } @media (min-width: 1024px) { .cb-hp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); justify-items: stretch; align-items: center; gap: calc(56px * var(--hz)); min-height: min(88svh, calc(800px * var(--hz))); /* vorher 100svh */ padding: calc(112px * var(--hz)) max(24px, calc(50vw - 552px * var(--hz))) calc(64px * var(--hz)); /* vorher 112 / 552 / 64 */ } .cb-hp-text { text-align: left; max-width: none; zoom: var(--hz); } .cb-hs { zoom: var(--hz); } .cb-hp-h1 { font-size: clamp(40px, 4vw, 58px); } .cb-hp-sub { margin-left: 0; } } /* Navigation: Inhalt 1104 px x Faktor + 2 x 24 px Innenabstand (px-6) -> Logo und Ueberschrift auf einer Kante */ @media (min-width: 1536px) { nav.max-w-6xl { max-width: calc(1104px * var(--hz) + 48px); } } /* ---------- Mobil ---------- */ /* 03.10.2026 (Denis am iPhone 17 Pro, Screenshot: Text + 3 Kacheln liefen unter die schwebende Safari-Adressleiste von iOS 26): alles etwas kleiner, damit der ganze Hero ueber der Leiste endet. Vorher-Werte stehen in den Kommentaren am Zeilenende; Bak bak_archiv/hero-produkt.css.bak_2026-10-03_mobil_kleiner. */ @media (max-width: 767px) { .cb-hp { gap: 20px; padding: 84px 20px 40px; } /* 29.09.: unten 120 -> 44 px, keine haengende Karte mehr; 03.10.: gap 26, oben 96, unten 44 */ .cb-hp-h1 { font-size: 8.8vw; margin-top: 12px; } /* 03.10.: 9.6vw, 14px */ .cb-hp-sub { font-size: 16.5px; margin-top: 10px; } /* 03.10.: 18px, 14px */ .cb-hp-nur-desktop { display: none; } .cb-hp-cta { margin-top: 18px; } /* 03.10.: 22px */ .cb-hp-knopf { width: 100%; max-width: 350px; min-width: 0; height: 48px; } /* 03.10.: 48 -> 44 px (Safari-Leiste iOS 26); #403 28.10. (Denis: „kostenlos starten knopf etwas dicker in der höhe, aber nicht viel") 44 -> 48 px = Desktop-Wert, Hero mobil +4 px */ /* #246: Buehne gestapelt, ohne Ueberlappung, weniger Text (02.10.: Audit ohne Transfers-Zeile, Steuerreport nur § 23) */ .cb-hs { max-width: 350px; } .cb-hs-pruef { padding: 14px 16px 12px; } /* 03.10.: 16px 16px 14px */ .cb-hs-kopf { font-size: 9.5px; letter-spacing: .14em; } /* 375-px-Pruefung 29.09.: „STEUERREPORT 2025“ lief in der halben Karte 6 px ueber -> enger, im Notfall Umbruch */ .cb-hs-reihe .cb-hs-kopf { letter-spacing: .1em; white-space: normal; } .cb-hs-fort { margin-top: 12px; } /* 03.10.: 14px (Grundregel) */ .cb-hs-liste { margin-top: 10px; } /* 03.10.: 14px (Grundregel) */ .cb-hs-liste li { font-size: 12px; padding: 5px 0; } /* 03.10.: 12.5px, 7px */ .cb-hs-liste li em { font-size: 11px; } /* 03.10.: 11.5px */ /* #403 Nachtrag 2: die nur-desktop-Zeile der Steuerreport-Karte (.cb-hs-zeile § 22, dann kurz .cb-hs-umfang) ist seit 11:0x ganz weg */ /* #403 28.10. 10:5x NEBENBEFUND (seit dem Pruefband 05.10. auch LIVE, Transfers-Zeile): die nur-desktop-Zeile der Audit-Liste zeichnete am Desktop KEINEN Haken, obwohl die Animation im DOM „finished" und stroke-dashoffset 0 war (gemessen 1440 px im Pane und per CDP, Pixelprobe weiss). Ursache per Ausschluss (6 Experimente, CSS vor dem Laden eingeschleust): einzig das `display:none` dieser Zeile im Mobil-Block; Band, clip-path, Einblenden und Durchgangszeit sind unbeteiligt. Chrome malt den Endzustand der Strich-Animation nicht, wenn die Zeile zwischenzeitlich display:none war (Viewport-Wechsel beim Laden/Emulieren, Fensterwechsel ueber 768 px). Deshalb mobil nicht mehr display:none, sondern Hoehe 0 + unsichtbar (Layout mobil identisch: Liste 145 px, Zeile 0 px; Desktop alle sechs Haken). Vorher: display:none fuer beide Selektoren. */ .cb-hs-liste li.nur-desktop { height: 0; padding: 0; border: 0; overflow: hidden; visibility: hidden; } .cb-hs-reihe { margin: 8px 0 0; gap: 8px; } /* 03.10.: 10px, 10px */ .cb-hs-reihe .cb-hs-karte { padding: 11px 12px 10px; } /* 03.10.: 13px 13px 12px */ .cb-hs-pdf { margin-top: 8px; } /* 03.10.: 12px */ /* #403 Nachtrag 2: die Mobil-Regeln fuer .cb-hs-zeile/.cb-hs-wert/.cb-hs-plus (03.10.: Spalte 11 px, Betrag 18 px, Wert 18 px) entfallen */ .cb-hs-bereit { margin-top: 8px; gap: 6px; font-size: 15.5px; } /* 11:0x: Rhymes 15,5 px (vorher Beausite 12 px) */ .cb-hs-linie { min-height: 40px; margin-top: 6px; } /* 03.10.: 26px fest, 6px */ } /* 02.10.2026 (320-px-Pruefung beim Portfoliowert-Abgleich): auf sehr schmalen Geraeten (iPhone SE 1. Generation, 320 px) ragte die Pille „2 ZU KLAEREN" 2 px ueber den Kartenrand und machte die Seite seitlich scrollbar. Nur unter 360 px: Kopf und Pille enger gesperrt — 375 px und breiter bleiben unveraendert. */ /* #403 (28.10.2026): mit dem festen Text „ALLES GEKLAERT" (13 Zeichen; seit #340 ohnehin die Breite der Pille) ragte die Pille bei 320 px noch 2,27 px ueber den Kartenrand (gemessen live und lokal, CDP) -> Pille einen Hauch enger: Innenabstand 7 -> 5 px, Sperrung .04 -> .03em (nur unter 360 px; 375 px: 17 px Luft, unveraendert). */ @media (max-width: 359px) { .cb-hs-pruef .cb-hs-kopf { letter-spacing: .06em; gap: 6px; } .cb-hs-pille { letter-spacing: .03em; padding: 3px 5px; } } /* ---------- #246 Nachschlag (29.09.2026, Denis-Wahl V1 „Abstufung"): Uebergang Hero -> Sektion „CoinBegleiter zeigt Ihnen zuerst …" am Desktop. Vorher stand der Satz nach ~170-280 px leerem Papier auf DEMSELBEN Ton ohne Linie („so richtig alleingelassen"). Jetzt steht die Sektion auf Creme (bg-cream, mit Linie oben/unten; zuerst Sand #ede7dc, verworfen), Einstiegszeile „DAS PRINZIP" in Gold-Mono mit Haarlinien. Erster Entwurfston #f3f1ec war am Bildschirm kaum sichtbar. Der Desktop-Verlauf am Hero-Ende (Papier -> Sand ab 55 %) ist seit 29.09. nachmittags RAUS (Denis: „bei mobil ist dieser Verlauf gar nicht? dann auch bei Desktop ohne, so finde ich es am besten") — Desktop und mobil haben jetzt dieselbe Kante. Diese Datei ist nur in index.html verlinkt. ---------- */ /* 29.09. spaeter (Denis: „zu cremig und neu — einen der bereits genutzten Hintergruende"): KEIN eigener Sandton mehr; die Sektion nutzt jetzt bg-cream + border-y border-line wie Einblick/FAQ (Tailwind-Klassen im Markup), hier bleibt nur die Einstiegszeile. */ .cb-prinzip-eb { font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .25em; color: #826741; margin: 0 0 22px; } .cb-prinzip-eb::before, .cb-prinzip-eb::after { content: ""; display: inline-block; width: 36px; height: 1px; background: #c7a46a; vertical-align: middle; margin: 0 14px; opacity: .7; } /* ---------- BEWEGUNG (Verlauf der Fassungen; Denis' Linie: ruhig, kein gestaffeltes Einblenden, nichts wechselt) ---------- 01.10.2026 (Denis: „kannst du das hero bild animieren?"): Verlauf zeichnet sich, Wert zaehlt mit, Balken wachsen, danach leises Pulsieren/Schweben. 2. Fassung 01.10. abends („verzoegertes Einblenden gefaellt mir nicht mehr … Graph etwas langsamer … Zahl viel langsamer"): kein Einzel-Einblenden, Verlauf 3,6 s, Zaehler 6 s. 3./4. Fassung 01.10. abends („das gesamte Hero leicht verzoegert einblenden", „Einblendung noch etwas laenger, Zeitraum 1 Sekunde"): Text und Buehne blenden ZUSAMMEN als eine Einheit ein, 1 s. 5. Fassung 02.10. frueh („die Zahl veraendert sich, obwohl der Graph schon gezeichnet ist" + „Einblendung und Uebergang noch etwas mehr verlangsamen"): Einblenden 1,6 s ab 0,2 s mit Sinus-Kurve (ease-out brachte den Grossteil der Deckkraft schon in den ersten 0,3 s); Verlauf und Zaehler gleich lang (5 s ab 1,4 s, gleiche Kurve). Baks: bak_archiv/hero-produkt.css.bak_2026-10-01_{animation,ruhiger,hero_ein,ein1s}, .bak_2026-10-02_synchron. 6. Fassung 02.10. (Audit-Buehne): EINE ruhige Bewegung nach dem Einblenden — der Audit-Balken fuellt sich von links (5 s ab 1,4 s, dieselbe Sinus-Kurve und clip-path wie zuvor der Verlauf; Gruen und Amber in EINEM Zug, kein Nacheinander). Ab 7,1 s pulsieren die beiden Amber-Punkte der offenen Themen leise und GLEICHZEITIG (2,8 s Takt); ab 768 px schweben die zwei kleinen Karten minimal (±4 px, 7 s, versetzt). Kein Zaehler mehr (Zaehler-Skript in index.html entfernt). Grundzustand bleibt sichtbar (fill-mode both nur waehrend der Animation, Pruefer-Befund 29.09.); prefers-reduced-motion = alles aus. */ .cb-hp-text, .cb-hs { animation: cb-hp-ein 1.6s cubic-bezier(.37, 0, .63, 1) .2s both; } @keyframes cb-hp-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .cb-hs-pruef .cb-hs-fort { animation: cb-hs-zeichnen 5s cubic-bezier(.37, 0, .63, 1) 1.4s both; } @keyframes cb-hs-zeichnen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* #340 (15.10.2026): das endlose Pulsieren der Amber-Punkte (ab 7,1 s, 2,8 s Takt) ist entfallen — die Punkte gehen jetzt einmal in Haken ueber (8. Fassung unten). Vorher: bak_archiv/hero-produkt.css.bak_2026-10-15_vor_340. */ @media (min-width: 768px) { /* #340: Start nach dem Gruen-Uebergang (endet 9,0 s), damit nie zwei Bewegungen gleichzeitig laufen; vorher 7,6 / 9,2 s. #403: der Gruen-Uebergang ist entfallen, die letzte Bewegung ist das Pruefband (endet 6,4 s) -> Start wieder 7,6 / 9,2 s. */ .cb-hs-reihe .cb-hs-steuer { animation: cb-hs-schweben 7s ease-in-out 7.6s infinite; } .cb-hs-reihe .cb-hs-pf { animation: cb-hs-schweben 7s ease-in-out 9.2s infinite; } } @keyframes cb-hs-schweben { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } } /* 7. Fassung 05.10.2026 (Denis: „im Video laeuft eine leichte Animation ueber die Liste parallel zu dem Balken oben, koennen wir das bei der Landing Page auch so haben?"): PRUEFBAND wie im Erklaervideo (szAudit). Ein zarter gruener Streifen mit Linie laeuft GENAU im Takt des Balkens (5 s ab 1,4 s, dieselbe Kurve, also EINE Bewegung) von oben nach unten ueber die Liste und blendet am Ende aus. Erreicht seine Vorderkante eine Zeilenmitte, zeichnet sich dort der Haken (0,35 s) bzw. erscheint der Amber-Punkt (0,3 s). Anders als im Video: die TEXTE bleiben die ganze Zeit sichtbar (keine abgedunkelten Zeilen) und die Pille wechselt nicht von „prueft …" auf „2 zu klaeren" (Denis' Linie 01./02.10.: nichts baut sich auf, nichts springt um). Durchgangszeiten = Kurve invertiert auf die Zeilenmitte (cubic-bezier(.37,0,.63,1), y = Mitte/Listenhoehe): Desktop 6 Zeilen, mobil 5 (Transfers ausgeblendet). Ohne Animation (reduced motion, Vorschau-Werkzeuge) stehen Haken und Punkte wie bisher da und das Band bleibt unsichtbar (Grundzustand opacity 0, fill-mode both nur waehrend der Animation). Bak: bak_archiv/hero-produkt.css.bak_2026-10-05_pruefband. */ /* clip-path: Band nur innerhalb der Liste sichtbar (sonst toente es am Anfang den Balken-Bereich darueber ein, Kontrollbild 2,4 s); seitlich 20 px Luft fuer das ueberstehende Band und die Puls-Ringe der Amber-Punkte. */ .cb-hs-liste { position: relative; clip-path: inset(0 -20px); } .cb-hs-liste::before { content: ""; position: absolute; left: -8px; right: -8px; top: 0; bottom: 0; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, rgba(26, 127, 90, 0) calc(100% - 44px), rgba(26, 127, 90, .10) calc(100% - 12px), rgba(26, 127, 90, .03) 100%); border-bottom: 1.5px solid rgba(26, 127, 90, .5); animation: cb-hs-band 5s cubic-bezier(.37, 0, .63, 1) 1.4s both, cb-hs-band-sicht 5.3s linear 1.4s both; } @keyframes cb-hs-band { from { transform: translateY(-100%); } to { transform: none; } } @keyframes cb-hs-band-sicht { 0% { opacity: 0; } 5%, 94% { opacity: 1; } 100% { opacity: 0; } } .cb-hs-ok path { stroke-dasharray: 20; animation: cb-hs-haken .35s ease-out var(--cb-durchgang, 0s) both; } @keyframes cb-hs-haken { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } } /* #403: Amber-Punkt-Animation (cb-hs-punkt, 0,3 s Aufpoppen) entfallen — jede Zeile zeichnet nur noch ihren Haken. */ .cb-hs-liste li:nth-child(1) { --cb-durchgang: 2.34s; } .cb-hs-liste li:nth-child(2) { --cb-durchgang: 3.07s; } .cb-hs-liste li:nth-child(3) { --cb-durchgang: 3.64s; } .cb-hs-liste li:nth-child(4) { --cb-durchgang: 4.16s; } .cb-hs-liste li:nth-child(5) { --cb-durchgang: 4.73s; } .cb-hs-liste li:nth-child(6) { --cb-durchgang: 5.46s; } @media (max-width: 767px) { /* #403: Zeile 5 (Plausibilitaet) ist mobil ausgeblendet -> 5 Zeilen; vorher Zeile 4 (Transfers), gleiche Zeiten */ .cb-hs-liste li:nth-child(1) { --cb-durchgang: 2.43s; } .cb-hs-liste li:nth-child(2) { --cb-durchgang: 3.25s; } .cb-hs-liste li:nth-child(3) { --cb-durchgang: 3.90s; } .cb-hs-liste li:nth-child(4) { --cb-durchgang: 4.55s; } .cb-hs-liste li:nth-child(6) { --cb-durchgang: 5.37s; } } /* 8. Fassung 15.10.2026 (#340, Denis: „alles grün? klingt doch positiver und schreckt nicht ab?" → „was ist, wenn es von zu pruefen zu gruen uebergeht? … dass man etwas Positives sieht"): Nach dem Pruefband (endet 6,4 s) bleiben die zwei offenen Themen kurz zum Lesen stehen, dann geht die Karte EINMAL in Gruen ueber, danach Ruhe: 8,0–8,5 s Amber-Punkte und Amber-Texte blenden aus 8,5–9,0 s Haken zeichnen sich, Nachher-Texte blenden ein („alles zugeordnet", „Kostenbasis nachgetragen") 8,0–9,0 s Amber-Teil des Balkens und Pille werden gruen, Pille „2 ZU KLAEREN" -> „ALLES GEKLAERT" (zuerst „BEREIT FUER DEN REPORT": ragte am iPhone 18 px, am iPhone SE 33 px aus der Karte, Seite seitlich scrollbar) Bewusste Ausnahme von Denis' Linie 01./02.10. („nichts springt um"), auf seinen Vorschlag; Vorher/Nachher liegen je Stelle uebereinander (Grid-Zelle), Breite = laengerer Text -> kein Layout-Springen. GRUNDZUSTAND = ENDZUSTAND: die Animationen halten per fill-mode both den Amber-Zustand nur bis zum Uebergang; sind sie aus (reduced motion, Vorschau-Werkzeuge), steht gruen da. Pillen-Gruen #15694b auf #e9f4ef = 5,9:1. 9. Fassung 28.10.2026 (#403, Denis: „dass alles grün ist und bleibt, also dass gar nicht 2 Fehler auftreten … dann wird es einzeln grün wie bisher"): der Amber-nach-Gruen-Uebergang der 8. Fassung ist KOMPLETT entfallen (Pille-/Balken-Umfaerbung ab 8 s, Punkt-Ausblenden, spaete Haken, Vorher-/Nachher-Texte, Keyframes cb-hs-pille-gruen/-balken-gruen/-weg/-her). Die Karte ist von Anfang an gruen; die EINE Bewegung ist wieder das Pruefband mit den Haken je Zeile (7. Fassung, endet 6,4 s), danach Ruhe. Damit gilt Denis' Linie 01./02.10. („nichts springt um") wieder ohne Ausnahme. Bak: bak_archiv/hero-produkt.css.bak_2026-10-28_vor_hero_gruen. */ /* ---------- FEINSCHLIFF 05.10.2026 (Denis: „1 bis 6 und alle Texte bitte" nach der Optik-Sichtung; gilt nur fuer die Startseite, diese Datei ist nur in index.html verlinkt). Bak: bak_archiv/hero-produkt.css.bak_2026-10-05_feinschliff. Dazu in DIESER Datei oben: Gold der Etiketten .cb-hp-eyebrow/.cb-prinzip-eb #987a4e -> #826741 (3,6-3,8:1 -> 4,7-5,0:1) und das Grau der Hero-Buehne #8a8477 -> #756f64 (3,7:1 -> 5,0:1 auf Weiss; Kopf, Werte, § 23, PDF-Chip, 24 H). ---------- */ /* (1) Ueberschriften ausgewogen umbrechen: kein Einzelwort mehr allein in der letzten Zeile (gemessen 05.10.: Desktop 5, mobil 2 Faelle, Hoehe unveraendert). Browser ohne text-wrap:balance brechen wie bisher um. */ h1, h2, h3 { text-wrap: balance; } /* (3) Kleine Gold-Etiketten in Geist Mono einen Hauch dunkler: seit 05.10.2026 nachmittags fuer ALLE Seiten zentral in src/input.css -> styles.css (Denis: einheitlich); die Regel stand hier zuerst nur fuer die Startseite. */ /* (5) Preis-Listen: bricht ein Punkt um, beginnt die zweite Zeile unter dem TEXT statt unter dem Haken bzw. dem Kreuz. */ [data-anim="haken"] > li { display: flex; align-items: flex-start; gap: .4em; } [data-anim="haken"] > li > span { flex: none; } /* 05.10.2026 (Korrektur zu #278): auf DUNKLEM Grund bleibt das kleine Mono-Gold beim bisherigen #987a4e (4,61:1 auf Tinte); das dunklere #826741 aus input.css ergab dort nur 3,50:1 („DIE ANTWORT" im Antwort-Block, einzige Stelle auf allen 13 Seiten). */ .bg-ink .font-mono.text-accent { color: #987a4e; } /* ---------- Weniger Bewegung: alles sofort sichtbar ---------- */ @media (prefers-reduced-motion: reduce) { .cb-hp-text, .cb-hs, .cb-hs-pruef .cb-hs-fort, .cb-hs-reihe .cb-hs-steuer, .cb-hs-reihe .cb-hs-pf { opacity: 1; animation: none; } /* #340: Puls-Ring entfallen */ .cb-hs-liste::before, .cb-hs-ok path { animation: none; } /* 05.10.: Band unsichtbar, Haken stehen; #403: keine Punkte mehr */ /* #403: die #340-Ausnahmen (Pille/Balken/Punkte/spaete Haken/Vorher-Nachher) sind mit dem Uebergang entfallen — die Karte ist ohne Animation genauso gruen wie mit. */ }