-Block direkt hinter dem Hero steht, ohne HTML-Umbau nach oben ziehen — sie enthaelt Preis UND Kaufknopf (das , aus dem /kf-verkauf.js den echten Link macht). Reihenfolge: Kopfzeile · Hero · Preisbox · alles andere. */ /* ── Die Kopfzeile deckend machen ───────────────────────────────────────── Sie steht auf rgba(255,255,255,.97) plus blur(16px) — auf allen Seiten gleich gemessen. Beim Scrollen scheinen Ueberschriften als Schemen hindurch (Bildschirmfoto energizer.html bei Scrollstand 1.400: „Von wem" mitten in der Kopfzeile). Der Weichzeichner mildert es, weg ist es nicht, und auf einer Verkaufsseite liest sich das als Darstellungsfehler. Deckend ist der Weichzeichner ohnehin wirkungslos — er faellt mit weg. Breitbild bleibt unveraendert. */ nav, .s-top { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } /* 26.09.2026, NACHMITTAG — VIER FESTE LEISTEN AUF EINMAL IM BILD. Gemessen auf reflexionsboegen.html bei 320x568, Scrollstand 1.500: Digistore-Band 0–45 (45 px) klebende Kopfzeile 45–109 (64 px) Kauf-Leiste 451–514 (63 px) Digistore-Badge 514–568 (54 px) 226 von 568 px belegt — 40 % des Bildschirms sind Rahmen, 342 px bleiben zum Lesen. Bei 375x812 sind es 224 von 812 (28 %). Das arbeitet gegen „EIN Hinweis je Bildschirm" und gegen „uebersichtlicher, schneller". Von den vieren ist die Kopfzeile die einzige, die beim LESEN nichts tut: das Band und das Badge gehoeren zur Haendlerdarstellung (unberuehrt), und die Kauf-Leiste traegt Preis, Knopf und Vertrauenszeile. Also faehrt die Kopfzeile beim Abwaertsscrollen ein und beim ersten Wisch nach oben sofort wieder heraus — dasselbe Verhalten wie die Kauf-Leiste und wie in jedem mobilen Store. Gibt 64 px zurueck, 40 % -> 29 %. Ohne Skript passiert nichts: die Klasse setzt /kf-mobil.js. Das aufgeklappte Burger-Menue haelt die Kopfzeile fest (Regel unten) — sonst faehrt sie unter dem geoeffneten Menue weg. */ nav, .s-top { transition: transform .22s ease; will-change: transform; } body.kf-kopf-weg nav, body.kf-kopf-weg .s-top { transform: translateY(calc(-100% - var(--kf-band, 0px))); } body.kf-menue-auf nav, body.kf-menue-auf .s-top { transform: none; } body { display: flex; flex-direction: column; } /* min-width:0 ist bei einem Flex-Kasten Pflicht: Ohne das darf ein Kind ueber seine Mindest-Inhaltsbreite hinaus wachsen und wird breiter als der Bildschirm — genau das passierte hier (gemessen 406 statt 375 px). */ body > * { order: 5; min-width: 0; } /* `section.block` traegt `margin: 0 auto`. In einem Flex-Kasten verhindern automatische Seitenraender das Strecken — der Abschnitt bekommt dann seine INHALTSBREITE statt der Bildschirmbreite. Gemessen auf kurs-klassenfuehrung.html: „Blick ins Material" wurde dadurch 406 px breit (31 px waagerechtes Scrollen), der Video-Abschnitt daneben schrumpfte auf 239 px. Beides derselbe Fehler, in beide Richtungen. */ body > section, body > div, body > footer, body > header { margin-left: 0; margin-right: 0; width: 100%; } /* Das Digistore-Badge haengt ZWEI Platzhalter direkt in den : einen als ERSTES Kind (oben, 45 px) und einen als LETZTES (unten, 54 px, mit dem Pflicht-Footer). Ohne diese beiden Zeilen landeten sie in der order-5-Gruppe — der obere stand dann mitten auf der Seite (gemessen: y=944, ein leerer 45-px-Block zwischen Kauf-Karte und Text). Sie behalten ihre Plaetze. */ body > [class*="ds24b-top"] { order: -1; } body > [class*="ds24b-bottom"] { order: 9; } /* Derselbe obere Platzhalter traegt margin-bottom:69px (gemessen, kommt aus Digistores Skript). Zusammen mit seinen 45 px Hoehe begann die Seite erst bei 114 px — 14 % des Handy-Bildschirms leer, bevor irgendetwas steht. Die 45 px Hoehe BLEIBEN (sie halten den Inhalt unter dem fixierten Badge frei, das ist ihr Zweck); nur die zusaetzlichen 69 px fallen auf dem Handy weg. Am Badge selbst wird nichts geaendert — es bleibt sichtbar wie von Digistore verlangt. */ body > [class*="ds24b-top"] { margin-bottom: 0 !important; } /* ── VERSCHOBEN (D): Die Seite sprang beim Laden um 45 px nach unten ─────── Das Digistore-Band kommt aus einer Kette fremder Skripte (badge-salespage.js -> loader.js -> digistore-banner-light.js) und haengt sich als

mit position:relative und 45 px Hoehe als ERSTES Kind in den — also in den normalen Fluss. Niemand hat den Platz vorher reserviert. Gemessen auf energizer.html bei 375x812, Band ein- und ausgeblendet: h1 294 -> 249, Titelbild 121 -> 76, Fakten 357 -> 312, Preis 464 -> 419, Kaufknopf 553 -> 508. Alles wandert um exakt 45 px, und zwar erst, wenn das fremde Skript durchgelaufen ist. Auf einer schnellen Leitung sieht man es kaum, auf einer langsamen ruckt der ganze erste Bildschirm sichtbar nach unten — das erklaert Marcos „manchmal ist es merkwuerdig verschoben" besser als alles andere. Jetzt wird der Platz vom ersten Bild an reserviert (padding-top am body), und das eingefuegte Band holt sich per negativem Aussenabstand GENAU diesen reservierten Platz — es kommt also in eine Luecke, die schon frei ist, und nichts verschiebt sich. Netto bleibt die Hoehe dieselbe wie vorher. Bleibt das Band ganz aus (Skript geblockt), setzt /kf-mobil.js --kf-reserve auf 0 und der Platz faellt weg. Der fixierte Teil des Bandes (.ds24b-container, position:fixed im ds24b-top) bleibt unberuehrt — am Badge selbst wird nichts geaendert, es bleibt sichtbar wie von Digistore verlangt. Das Merkmal data-ds24band am traegt jede Seite, die das Band wirklich einbindet (14 der 16 Shop-Seiten; shop.html und kurs-schueler-ki.html haben kein Band). Ohne diese Bedingung stuenden dort 45 px leer, bis /kf-mobil.js sie wieder einsammelt — also genau der Sprung, den dieser Block verhindern soll, nur in die andere Richtung. Statisch im HTML und nicht per Skript entschieden, damit es schon beim ersten Bild stimmt. */ body[data-ds24band] { padding-top: var(--kf-reserve, 45px); } /* 26.09.2026, NACHMITTAG — UND UNTEN GENAUSO, auf den Seiten OHNE Kaufleiste. Die Produktseiten bekommen ihre untere Reserve von ueberBadge() in /kf-verkauf.js (Badge + Leiste + Luft). Seiten ohne Leiste — angebote.html — bekamen gar keine: gemessen padding-bottom „0px", und die letzte Produktkarte endete bei 765 hinter dem Badge (758–812), ohne dass man weiterscrollen konnte. Der Ersatzwert 54px ist die gemessene Badge-Hoehe; /kf-mobil.js berichtigt ihn, sobald das Badge wirklich da ist. */ body[data-ds24band]:not(.kf-hat-kaufleiste) { padding-bottom: calc(var(--kf-reserve-unten, 54px) + 8px); } body[data-ds24band] > [class*="ds24b-top"] { margin-top: calc(-1 * var(--kf-reserve, 45px)); } body > nav, body > .s-top, body > .mobile-menu { order: 0; } body > .k-hero { order: 1; } body > .k-hero + section { order: 2; } /* Hero: Bild oben, darunter Rubrik, Titel, ein Satz, drei Fakten, Preiszeile. Das Bild kommt per order nach vorn — im HTML steht es hinter dem Text. */ .k-hero { display: flex; flex-direction: column; gap: .55rem; padding: .75rem 5vw .9rem; max-width: none; } /* Drei Seiten-Varianten fuer denselben Platz: .hero-cover (elf Seiten), .k-hero-img (kurs-klassenfuehrung) und .mock-cover (kurs-schueler-ki, als CSS gezeichnet). Alle drei nach oben. */ .k-hero > .hero-cover, .k-hero > .k-hero-img, .k-hero > .mock-cover { order: -1; } /* Das Cover ist das Produktbild — es muss ueber die Falz, also klein. Ohne feste Hoehe wurde es bei 375 px 338 px hoch (gemessen) und schob Preis und Kaufknopf allein damit unter den Rand. */ .k-hero .hero-cover img, .k-hero .k-hero-img img { width: auto; max-width: 100%; height: 132px; object-fit: contain; margin: 0 auto; } .k-hero > .k-hero-img { border-radius: 12px; } /* .mock-cover ist keine Bilddatei, sondern ein per CSS gezeichneter Kasten (kurs-schueler-ki.html). Seine Seitenregel gibt ihm aspect-ratio 16/10 und overflow:hidden. Auf 260 px Breite ergibt das 163 px Hoehe, der Inhalt braucht aber 263 px — gemessen am 26.09. bei 375 UND 320 px wurden 100 px mitten in der Zeile abgeschnitten („Aufgaben · Bewertung · Gespraeche — das System"). Auf dem Handy waechst der Kasten deshalb mit seinem Text. */ .k-hero > .mock-cover { max-width: 260px; margin: 0 auto; aspect-ratio: auto; height: auto; padding: 1.1rem 1.2rem; } /* 26.09.2026 — WARUM EINE EIGENE KLASSE UND KEIN :not(.hero-cover). Hier stand `.k-hero > div:not(.hero-cover)`. Die Textspalte ist ein

, .k-hero-img und .mock-cover sind aber AUCH

— sie wurden damit als Textspalte behandelt. Folge, gemessen auf kurs-schueler-ki.html bei 375x812: Die Cover-Attrappe bekam display:flex und schrumpfte von 330x206 auf 260x163, und die Regel „letztes Kind ausblenden" (unten, fuer die Hero-Preiszeile) traf ihr letztes Kind .mc-foot — „7 Module · 21 Lektionen · inkl. komplettem Praxispaket" stand auf display:none. Die Textspalte traegt jetzt class="k-hero-text" (in allen 13 Seiten mit .k-hero gesetzt). Die naechste Cover-Variante bricht das nicht wieder. */ .k-hero > div.k-hero-text { display: flex; flex-direction: column; gap: .45rem; min-width: 0; } .k-eyebrow { margin-bottom: 0; align-self: flex-start; } .k-hero h1 { font-size: 1.55rem; line-height: 1.12; margin-bottom: 0; } .k-untertitel { font-size: .95rem; line-height: 1.35; margin-bottom: 0; } /* ── Die Faktenzeile: EIN Fakt je Zeile ─────────────────────────────────── Vorher eine umbrechende Flex-Reihe. Weil die Fakten unterschiedlich lang sind, sah sie auf jeder Seite anders aus — gemessen am 26.09., Hoehe der Reihe bei 375 px: ruhiger-schulstart/kurs/neustart 34 px (2 Zeilen, der dritte Fakt hing allein darunter), reflexionsboegen/energizer/ vertretungsmappe 52 px, fachraum 67 px; bei 320 px bis 82 px. Dasselbe Bauteil, drei verschiedene Hoehen — und die Kauf-Karte darunter begann je Seite 30 bis 48 px hoeher oder tiefer. Als Spalte ist die Reihe auf jeder Seite und bei jeder Breite gleich hoch, und kein Fakt haengt allein. */ .k-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .18rem; font-size: .78rem; margin-bottom: 0; } /* /kf-mobil.js haengt den langen Hero-Absatz unter die Preisbox. Er bleibt vollstaendig lesbar — nur eben hinter Preis und Kaufknopf statt davor. */ .k-sub { font-size: .92rem; line-height: 1.6; margin: .9rem 0 0; max-width: none; } /* Preiszeile im Hero: Preis links, „Was drinsteckt" rechts, EINE Zeile. order:-1 dreht die HTML-Reihenfolge (erst Knopf, dann Preis) um — der Preis gehoert im Store nach links. */ .k-hero > div.k-hero-text > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .1rem; } .k-hero > div.k-hero-text > div:last-child > .k-hero-preis { order: -1; margin-left: 0; flex: 0 1 auto; } .k-hero > div.k-hero-text > div:last-child > .k-hero-cta { flex: 0 0 auto; padding: .6rem 1.1rem; font-size: .9rem; } /* … und sie faellt ganz weg, sobald die Kauf-Karte direkt darunter steht. Gemessen bei 375x812 standen ueber der Falz zwei Preise (Hero 418 px, Kauf-Karte 565 px) und zwei Knoepfe, von denen der obere keiner ist: „Was drinsteckt →" ist ein Sprunganker auf #blick. Bei 320 px hatte der echte Kaufknopf dadurch nur noch 9 px Luft bis zum unteren Digistore-Band. Ohne die Zeile: EIN Preis, EIN Knopf, 104 px Reserve — genug fuer zwei zusaetzliche Titelzeilen. Die Klasse setzt /kf-mobil.js und nur dann, wenn die Kauf-Karte wirklich gefunden wurde. Kein Skript, keine Klasse, kein verschwundener Preis. */ body.kf-kaufkarte-oben .k-hero > div.k-hero-text > div:last-child { display: none; } /* ── 5) Die kompakte Preisbox wird zur Kauf-Karte ───────────────────────── */ body > .k-hero + section.block { padding: 0 5vw 1rem; max-width: none; } .preisbox.kompakt { padding: .95rem 1.05rem; gap: .55rem; text-align: left; justify-content: flex-start; flex-direction: column; align-items: stretch; } .preisbox.kompakt .pb-titel { font-size: .9rem; line-height: 1.3; } /* ── Der Produkttitel stand ueber der Falz ZWEIMAL ───────────────────────── Gemessen bei 375x812 auf reflexionsboegen: h1 „Fuenf Minuten Nachdenken." (294–322) und keine 90 px darunter .pb-titel „Fuenf Minuten Nachdenken – 23 Reflexionsboegen" (440–477). Auf energizer, fachraum, laute-phase und rueckmelde-mappe ist er sogar wortgleich, auf den uebrigen enthaelt er die h1. Gemessene Hoehe bei 320 px: 19 px (5 Seiten), 37 px (7 Seiten), 56 px (kurs-klassenfuehrung) — auf der teuersten Seite also 56 px Wiederholung an der teuersten Stelle. Das ist Marcos „extrem viel Text" und verstoesst gegen „EIN Hinweis je Bildschirm". Weg damit — aber NUR, wenn die Kauf-Karte wirklich direkt unter dem Hero steht (Klasse von /kf-mobil.js) und nur bei der ERSTEN Karte: die Abschluss-Karte weiter unten steht allein und braucht ihren Titel. Faellt das Skript aus, kommt die Klasse nicht und alles bleibt sichtbar. ⛔ .pb-einmalig bleibt: dort haengt „Preis inkl. MwSt." dran (PAngV). */ body.kf-kaufkarte-oben > .k-hero + section.block .preisbox.kompakt .pb-titel { display: none; } .preisbox.kompakt .pb-preis { font-size: 1.55rem; } .preisbox.kompakt .pb-einmalig { font-size: .76rem; line-height: 1.45; } /* ⛔ HIER STAND: body[data-kaufleiste="715624"] … .pb-preis span{display:none} Grund war die Dublette auf kurs-klassenfuehrung.html: hinter dem Preis stand „einmalig · kein Abo" und in .pb-einmalig unmittelbar darunter noch einmal „einmalig · kein Abo · 24/7 abrufbar · Preis inkl. MwSt." (gemessen 375x812, 502–530 und 530–565). Seit dem 26.09. (zweite Runde) traegt .pb-einmalig auf JEDER Seite die harten Produktfakten statt der Zahlungsworte — die Dublette gibt es also nicht mehr. Bliebe die Regel stehen, waere „einmalig · kein Abo" auf dem Handy auf der 99-€-Seite NIRGENDS mehr zu lesen, und „Ist das ein Abo?" ist genau die Frage, die dort den Kauf verhindert. */ /* Nur kurs-klassenfuehrung.html: In der Kauf-Karte steht zusaetzlich die vollstaendige Inhaltsliste (gemessen 230 px). Marcos eigener Kommentar im HTML sagt, sie ist „deckungsgleich mit ‚Das ist alles enthalten' weiter unten" — dort steht sie unveraendert und aufklappbar. Auf dem Handy waere sie die zweite Aufzaehlung auf demselben Bildschirm und schoebe den Kaufknopf von 656 auf 957 px, also unter den Rand. */ .preisbox.kompakt .pb-inhalt { display: none; } .preisbox.kompakt .pb-btn, .preisbox.kompakt .pb-btn.soon { display: block; width: 100%; text-align: center; padding: .85rem 1rem; } /* Die Vertrauenszeile steht im Fluss der Spalte direkt unter dem Knopf — der Abstand kommt aus dem gap der Karte, nicht aus einem eigenen Rand. */ .preisbox.kompakt .pb-vertrauen { margin-top: 0; font-size: .74rem; line-height: 1.45; text-align: center; } /* ── 5b) Die Fakten stehen EINMAL ───────────────────────────────────────── Gemessen bei 375x812 nach dem Einbau der Vertrauenszeile: .k-facts sagte „37 Seiten · PDF + Word / 23 Boegen · ohne Logo · schwarz-weiss / Klasse 4–10 · drei Stufen" (357–408) und 60 px darunter sagte die Kauf-Karte „37 Seiten · PDF + Word · Klasse 4–10 · beliebig oft kopierbar · Preis inkl. MwSt." (467–502) — fuenf Zeilen Kleingedrucktes am Stueck, und „37 Seiten · PDF + Word · Klasse 4–10" woertlich zweimal. Ueber 360 px fuehrt die Drei-Zeilen-Liste im Hero (Marcos „drei Zeilen, nicht drei Absaetze"), die Wiederholung in der Karte tritt zurueck. Die Zeile ist dafuer in ZWEI Teile geschnitten: Umfang · Format · Klassenstufe (tritt zurueck) „beliebig oft kopierbar · Preis inkl. MwSt." bzw. „24/7 abrufbar · …" (bleibt immer) ⛔ „Preis inkl. MwSt." darf nicht verschwinden (PAngV) — es haengt deshalb im bleibenden Teil. „Beliebig oft kopierbar" bleibt aus demselben Grund stehen wie die Vertrauenszeile: das ist der Einwand, der den Kauf verhindert („kann ich das fuer meine Klasse kopieren?"), und er gehoert an den Knopf, nicht nur in die Haeufigen Fragen. Unter 360 px ist .k-facts weg (Abschnitt 5a), dort erscheint .pb-fakten wieder: die Fakten stehen bei JEDER Breite genau einmal ueber der Falz. */ @media (min-width: 361px) { .preisbox.kompakt .pb-fakten { display: none; } } /* ── 5a) Kleine Geraete: die Dublette ueber der Falz faellt weg ──────────── Bei 375x812 passt alles (gemessen: Kaufknopf endet bei 600–630, Falz 758). Bei 320x568 ist das nutzbare Fenster nur 45–514 px, weil oben das Digistore-Band 45 px und unten das Badge 54 px nimmt — 469 px statt 758. Dort lag der Kaufknopf 105 bis 153 px UNTER der Falz. Gespart wird ausschliesslich Doppeltes. Wortvergleich am 26.09.: .k-facts „37 Seiten · PDF + Word / 23 Boegen · ohne Logo · schwarz- weiss / Klasse 4–10 · drei Stufen" (51–82 px) .pb-einmalig „37 Seiten · 23 Boegen in drei Stufen · ohne Logo · PDF + Word · beliebig oft kopierbar · Preis inkl. MwSt." Dieselben Angaben, 100 px untereinander. .pb-einmalig MUSS bleiben: es ist die einzige Stelle in der Kauf-Karte mit „Preis inkl. MwSt." (PAngV). Also tritt .k-facts zurueck — die drei harten Fakten stehen weiter ueber der Falz, nur eben in der Zeile direkt ueber dem Kaufknopf statt zweimal. Ueber 360 px bleibt alles, wie es ist. ── BERICHTIGT am 26.09. (zweiter Durchgang) ────────────────────────────── Zwei Dinge stimmten an dem Block oben nicht: 1. DER UNTERTITEL DARF NICHT WEG. Er stand hier mit der Begruendung, er wiederhole .pb-titel. Der Satz ist aber der EINE Satz, der sagt, worum es geht (Ziel 1) — und .pb-titel ist jetzt selbst ausgeblendet, weil er die h1 wiederholt (siehe Abschnitt 5). Gemessen bei 320x568 sagte ueber der Falz danach kein Satz mehr, worum es geht; auf sechs Seiten steht er auch sonst nirgends. Er kommt zurueck, .pb-titel geht dafuer. 2. DIE FAKTEN FEHLTEN AUF ZWEI SEITEN ERSATZLOS. Die Begruendung „.pb-einmalig sagt dasselbe" galt fuer 10 der 13 Seiten. Auf ruhiger-schulstart (715265) und kurs-klassenfuehrung (715624) enthielt .pb-einmalig NUR Zahlungsworte („einmalig · kein Abo · beliebig oft kopierbar · Preis inkl. MwSt." bzw. „… 24/7 abrufbar …") und keinen einzigen Produktfakt. Bei 320 px stand dort also kein einziger harter Fakt ueber der Falz — auf der 99-€-Seite. ERLEDIGT IN DER DRITTEN RUNDE (26.09.): .pb-einmalig sagt jetzt auf ALLEN 13 Seiten dasselbe Muster — Umfang · Format · Klassenstufe · kopierbar · Preis inkl. MwSt. (Marcos Punkt „Was du bekommst als Liste, nicht als Absatz"). Die zwei Sonderregeln fuer 715265/715624 sind deshalb weg; .k-facts tritt unter 360 px wieder ueberall gleich zurueck. kurs-schueler-ki traegt die Fakten zusaetzlich in .mc-foot. Den Platz dafuer holen Cover (100 -> 84 px) und Untertitel-Schrift. Gemessen bei 320x568, Unterkante des Kaufknopfs vorher -> nachher (Falz 514, kurs-schueler-ki 568): reflexionsboegen 504->471 · energizer 461->446 · ruhiger-schulstart 477->500 · kurs-klassenfuehrung 480->485 · vertretungsmappe 479->446 · neustart 479->464 · fachraum 476->461 · laute-phase 460->445 · erster-satz 496->463 · eltern-saetze 496->463 · endlich-ruhe-paket 477->463 · rueckmelde-mappe 477->463 · kurs-schueler-ki 557->558. Kleinste Reserve danach: 10 px (kurs-schueler-ki), 14 px (ruhiger-schulstart), sonst 29 bis 69 px. */ /* ── NACHGERECHNET am 26.09. (dritter Durchgang: Vertrauenszeile) ────────── Die Vertrauenszeile unter dem Knopf braucht bei 320 px zwei Zeilen und kostet mit dem Abstand 39–40 px. Gemessen war sie damit auf zwei Seiten angeschnitten (ruhiger-schulstart −2 px, kurs-schueler-ki −44 px). Der Kaufknopf selbst stand ueberall ueber der Falz — nur die Zusagen, um derentwillen der Umbau gemacht wurde, lagen darunter. Geholt wird der Platz da, wo er am wenigsten kostet: Cover 84 -> 70 px, Ueberschrift eine Spur kleiner, Karte enger. Kein Text faellt weg. */ @media (max-width: 360px) { .k-hero { gap: .32rem; padding: .5rem 5vw .6rem; } .k-hero .hero-cover img, .k-hero .k-hero-img img { height: 70px; } .k-hero .k-facts { display: none; } .k-hero .k-untertitel { font-size: .85rem; line-height: 1.3; } .k-hero h1 { font-size: 1.32rem; } /* Die Cover-Attrappe von kurs-schueler-ki.html waechst seit heute mit ihrem Text (sie wurde vorher um 100 px beschnitten). Bei 320 px stand der Kaufknopf dadurch knapp unter der Falz. Gekuerzt wird ueber Schrift und Innenabstand, NICHT ueber die Breite: schmaler gemacht bricht der Text auf mehr Zeilen um und der Kasten wird hoeher — gemessen wurde es mit max-width 230px um 13 px SCHLECHTER statt besser. */ .k-hero > .mock-cover { padding: .55rem .7rem; font-size: .78rem; } /* Der Titel in der Attrappe haengt an einem eigenen clamp() (1,6–2,1rem) und wurde von der Schriftgroesse darueber nicht erfasst — bei 320 px blieb der Kasten deshalb 199 px hoch, und die Vertrauenszeile rutschte 30 px unter die Falz. Mit der kleineren Titelzeile passt die ganze Karte wieder. */ .k-hero > .mock-cover .mc-title { font-size: 1.15rem; } .k-hero > .mock-cover .mc-sub { font-size: .8rem; line-height: 1.4; margin-top: .4rem; } body > .k-hero + section.block { padding: 0 5vw .7rem; } .preisbox.kompakt { padding: .75rem .85rem; gap: .38rem; } .preisbox.kompakt .pb-preis { font-size: 1.4rem; } .preisbox.kompakt .pb-vertrauen { font-size: .72rem; line-height: 1.4; } .preisbox.kompakt .pb-btn, .preisbox.kompakt .pb-btn.soon { padding: .75rem 1rem; } } /* ── 6) Gefaltete Abschnitte (siehe /kf-mobil.js) ───────────────────────── */ section.block, section.block.wide { padding: 1.1rem 5vw; max-width: none; } .kf-falt { border-top: 1px solid var(--border, #e5e7eb); } section.block > .kf-falt:first-child { border-top: 0; } .kf-falt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: .55rem 0; } .kf-falt > summary::-webkit-details-marker { display: none; } /* h3 steht hier neben h2, weil /kf-mobil.js seit dem 26.09. auch einen Kasten faltet, dessen oberste Ueberschrift eine

ist (Stimmen zur App auf angebote.html — sie liegen IN
, deren
die App-Karte ist). Auf den 16 uebrigen Faltungen traegt jeder Kasten eine
, dort aendert die Ergaenzung nichts. / .kf-falt > summary > h2, .kf-falt > summary > h3 { font-size: 1.08rem; line-height: 1.3; margin: 0; flex: 1; min-width: 0; } .kf-falt > summary::after { content: '+'; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-light, #eef1ff); color: var(--blue, #1E5BBD); font-size: 1.15rem; font-weight: 400; line-height: 24px; text-align: center; } .kf-falt[open] > summary::after { content: '\2013'; } .kf-falt[open] > :not(summary) { margin-top: .2rem; } .kf-falt > .lead:first-of-type { margin-top: .4rem; } /* ── 7) „Blick ins Material" als Wisch-Reihe (wie im App-Store) ────────── Drei A4-Seiten untereinander waren rund 830 px hoch. Nebeneinander zum Wischen sind es 300 — und man sieht sofort, dass es mehrere sind. Die Vorschau-Regel (hoechstens 3 Blaetter je Produkt) bleibt unberuehrt: hier wird nichts hinzugefuegt, nur anders gelegt. / .bm-grid { display: flex !important; gap: .7rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .4rem; / KEIN negativer Aussenabstand zum Rand hin: Zusammen mit body{display:flex} liess er den Abschnitt auf 406 statt 375 px wachsen (gemessen auf kurs-klassenfuehrung.html, 31 px waagerechtes Scrollen). Die Reihe bleibt im Textspiegel — dass sie wischbar ist, zeigt das angeschnittene dritte Blatt ohnehin. / } .bm-grid .bm-blatt { flex: 0 0 62%; scroll-snap-align: start; } / Gruppen mit nur EINEM Blatt: Die 62-%-Spalte liess daneben 128 px leeren Rand stehen (gemessen 26.09. bei 375 px: Reihe 338 breit, Blatt 209) — und dort ist nichts zum Wischen. Das sah aus wie ein abgeschnittenes Bild. Ein einzelnes Blatt nimmt deshalb die volle Reihenbreite. Betrifft die Seiten mit mehreren .bm-teil-Gruppen: rueckmelde-mappe (4 Einzelgruppen), endlich-ruhe-paket (4), eltern-saetze (1), laute-phase (2). Seiten mit einer einzigen Dreier-Reihe aendern sich dadurch nicht. / .bm-grid > .bm-blatt:only-child { flex: 0 0 100%; } .bm-blatt:hover { transform: none; } .bm-sub { margin-left: 0; } / ── 8) Kaufbox am Seitenende ───────────────────────────────────────────── / .preisbox { padding: 1.3rem 1.1rem; border-radius: 16px; } .preisbox .pb-preis { font-size: 2.1rem; } .preisbox ul { max-width: none; } .preisbox .pb-zahlung, .preisbox .pb-widerruf { font-size: .74rem; line-height: 1.5; } .preisbox .pb-btn { width: 100%; text-align: center; } / ── 8a) Produktbaender auf angebote.html und shop.html ────────────────── Marco hatte angebote.html am 17.09. schon auf Uebersichtskarten umgestellt („HANDY = UEBERSICHT"): kleines Bild links, Rubrik + Titel, darunter Preis und EIN Knopf. shop.html hat diese Regeln nie bekommen — gemessen am 26.09. bei 375 px: ein Band auf angebote 150 px hoch, dasselbe Band auf shop 600 px. Neun Baender = 5.400 px allein dafuer. Dieselbe Loesung, jetzt an EINER Stelle fuer beide Seiten. `article.pb` statt `.pb`, weil .pb-preis/.pb-btn auch in der Preisbox der Produktseiten vorkommen — die duerfen davon nichts abbekommen. / / ── Die Cover-Kachel ist 88 px, nicht 62 ──────────────────────────────── Gemessen am 26.09. bei 375 px: ALLE 14 Karten auf angebote.html und alle 9 auf shop.html hatten ein 62x62 px grosses Cover — kleiner als der Kaufknopf daneben (168–185 px breit) und 16 % der Schirmbreite. In einem mobilen Laden ist das Bild der Einstieg; bei 62 px ist von einem Cover-Mockup nichts zu erkennen, Marcos Shop-Regel „ECHTE Cover-Mockups" laeuft ins Leere. Mit 88 px bleiben bei 375 px noch 199 px Textspalte, bei 320 px 144 px — gemessen genug fuer die zweizeiligen Titel. Kosten: 26 px je Karte. Die Kachel ist bewusst quadratisch und `object-fit: contain`, damit kein Cover beschnitten wird. / article.pb, article.pb.gross { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; gap: .5rem .8rem; padding: .9rem .95rem .8rem; text-align: left; margin-bottom: .6rem; border-radius: 14px; } / ── Gleich grosse Kacheln, egal welches Seitenverhaeltnis das Cover hat ── Vorher stand hier `height: auto`. Dadurch bestimmte das Bildformat die Zeilenhoehe: gemessen am 26.09. bei 375 px auf angebote.html lagen in EINER Liste 35 px (Kurs-Mockup 16:9), 62 px (quadratische Hefte), 88 px und 93 px (hochkante Buch- und Gratis-Cover) untereinander. Die Baender waren dadurch 145 bis 183 px hoch, und weil der Textblock daneben mittig sass, begann die Rubrikzeile mal auf Bildhoehe, mal 19 px tiefer. Genau das liest sich als „merkwuerdig verschoben": nichts fluchtet. Jetzt eine feste 62x62-Kachel. `object-fit: contain` haelt das ganze Cover im Bild — es wird NICHT beschnitten, Marcos Regel „echte Cover-Mockups" bleibt gewahrt; der weisse Grund steht schon in der Basisregel `.pb img { background:#fff }` jeder der beiden Seiten. / / `#gratis article.pb img` steht mit in der Liste, weil angebote.html fuer die Gratis-Baender eine eigene Regel MIT ID fuehrt (`#gratis .pb img`, Zeilen 205 und 500). Eine ID schlaegt jede Klassenregel: ohne diesen Zusatz blieben gemessen genau die vier Gratis-Cover bei 62 px, waehrend die zehn anderen 88 px hatten — in EINER Liste zwei Bildgroessen. shop.html hat keinen #gratis-Bereich, dort aendert der Zusatz nichts. / article.pb img, article.pb.gross img, #gratis article.pb img { width: 88px; max-width: 88px; height: 88px; object-fit: contain; margin: 0; grid-column: 1; grid-row: 1; align-self: start; border-radius: 7px; } / Textblock oben statt mittig: So beginnt die Rubrikzeile auf JEDER Karte auf derselben Hoehe wie die Bildkante — die Liste bekommt eine Fluchtlinie. / article.pb > div:not(.pb-cta) { grid-column: 2; grid-row: 1; min-width: 0; align-self: start; } / Absatz, Haekchenliste und Gratis-Zeile stehen auf der Produktseite — erst die Uebersicht, die Tiefe auf Klick. / article.pb p, article.pb .pb-punkte, article.pb .pb-gratis, / .pb.gross .pb-punkte hat drei Klassen und wuerde die Zeile darueber sonst ueberstimmen — das grosse Band blieb dadurch 417 statt 160 px (gemessen). / article.pb.gross .pb-punkte { display: none; } / ── Zwei Ausnahmen von dem Ausblenden ──────────────────────────────────── 1) Eine Gratis-Zeile MIT Link ist der einzige Weg zu ihrem Ziel. Gemessen auf angebote.html: Die Adresse start.klassenflow.com/claude kommt auf der ganzen Seite genau einmal vor, naemlich in `
Handbuch: …
` — und die stand auf display:none. Auf dem Handy war das Handbuch von der Seite aus gar nicht erreichbar, auch nicht per Aufklappen. Zeilen ohne Link bleiben weg. / article.pb .pb-gratis:has(a) { display: block; } / 2) Das Buendel-Band ist das EINZIGE ohne eigene Produktseite: sein Knopf fuehrt direkt zur Kasse, es gibt kein „Ansehen & kaufen". Auf dem Handy stand dort nur Rubrik, Titel, 29 € und „Buendel kaufen" (gemessen bei 320 px: Band 158 px) — man konnte 29 € bezahlen, ohne sehen zu koennen, was drin ist. Sein Absatz nennt alle drei Hefte, sagt wofuer jedes ist und traegt die einzigen Links darauf; der bleibt deshalb sichtbar. Die .pb-punkte bleiben wie bei jedem anderen Band weg — dort steht unter anderem „Einzeln zusammen 39 €", also ein Preisvergleich. Der ist heute Desktop-only, und ihn auf dem Handy neu einzublenden waere eine Entscheidung ueber Marcos Regel „keine Streichpreise", keine Layout-Frage. Bleibt also, wie es ist. / article.pb.ist-buendel p { display: block; } / 3) Dieselbe Lage beim Band „Claude fuer Lehrkraefte" auf angebote.html: auch das hat keine eigene Produktseite (Knoepfe: Video und Handbuch). Gemessen am 26.09. bei 375x812 waren „14 Module", „Praxishandbuch & 46 Vorlagen gratis dazu" und „Die Grundlage fuer den Fachraum" vom Handy aus nirgends erreichbar — auch nicht per Aufklappen. Das Band traegt dafuer class="ohne-seite"; die drei Gratis-PDF-Baender bekommen sie NICHT, ihre Beschreibung steht auf der verlinkten Startseite. Zurueck kommt die HAEKCHENLISTE, nicht der Absatz: sie traegt genau die drei harten Fakten und kostet gemessen 142 px, der Absatz haette dieselbe Aussage in zehn bis zwoelf Zeilen und 250 px gebracht. In der Liste dieses Bandes steht — anders als beim Buendel — kein Preisvergleich, es faellt also nichts unter „keine Streichpreise". / article.pb.ohne-seite .pb-punkte { display: block; } article.pb .pb-eyebrow { font-size: .6rem; letter-spacing: .08em; margin-bottom: .15rem; line-height: 1.35; } article.pb h3, article.pb.gross h3 { font-size: 1rem; line-height: 1.25; margin: 0; } article.pb .pb-cta, article.pb.gross .pb-cta { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: .7rem; text-align: left; min-width: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: .6rem; / wrap, damit die Gratis-Zeile (siehe unten) auf eine EIGENE Zeile darf und nicht neben Preis und Knopf um die Breite kaempft. / flex-wrap: wrap; } / Die sichtbar gehaltene Gratis-Zeile liegt IM .pb-cta-Kasten. Als Flex-Geschwister nahm sie dem Knopf die Breite weg: gemessen sprang dessen linke Kante auf den beiden betroffenen Baendern auf 81 bzw. 49 px, waehrend alle anderen bei 170 px standen. Mit voller Zeilenbreite und order:9 steht sie unter Preis und Knopf — die Fluchtlinie bleibt. / article.pb .pb-cta .pb-gratis:has(a) { flex: 1 0 100%; order: 9; margin-top: .4rem; } / `flex: 1 1 0` und nicht `1 1 auto`: Ein Flex-Kasten entscheidet den Zeilenumbruch an der BASISGROESSE der Kinder, nicht an der geschrumpften. Mit `auto` war die Basis die Inhaltsbreite des Preisblocks — auf zwei von vierzehn Baendern (App-Band „99 € einmalig · inkl. MwSt." und Video-Band „Kostenlos auf YouTube …") war die groesser als der Platz neben dem Knopf, also rutschte der Knopf auf eine zweite Zeile und seine linke Kante sprang von 170 auf 38 px — genau die Unruhe, die dieser Block beseitigen soll. Mit Basis 0 loest der Preis nie einen Umbruch aus und nimmt trotzdem den ganzen Rest der Zeile ein. / article.pb .pb-preis, article.pb.gross .pb-preis { font-size: 1.15rem; line-height: 1.05; flex: 1 1 0; min-width: 0; } / „inkl. MwSt." bleibt sichtbar (PAngV) — nur kleiner. / article.pb .pb-preis small { font-size: .62rem; margin-top: .12rem; } / ── Eine Fluchtlinie fuer alle Band-Knoepfe ────────────────────────────── Vorher `width:auto`: die Knoepfe waren rechtsbuendig und unterschiedlich breit, also wanderte ihre LINKE Kante von Band zu Band. Gemessen am 26.09. auf angebote.html bei 375 px: l = 88,8 · 140,4 · 169,7 · 195,1 · 210,5 — 121,7 px Spanne ueber vierzehn Baender, bei 320 px dieselbe Unruhe. In einer Liste untereinander liest sich das als „es fluchtet nichts". Jetzt: Preis flexibel (nimmt den Rest), Knopf mit FESTER Breite. Damit hat die linke Knopfkante auf jedem Band denselben Wert. Die 168 px sind gemessen, nicht gewaehlt: Die .pb-cta-Zeile ist bei 375 px 299,8 px breit, der breiteste Preisblock belegt 120,8 px, bei .7rem Abstand bleiben genau 167,8 px. Die laengste Beschriftung („Ansehen & kaufen →") braucht 167,9 px und passt damit einzeilig. / article.pb .pb-btn, article.pb.gross .pb-btn { flex: 0 0 168px; width: auto; padding: .62rem .5rem; font-size: .84rem; justify-content: center; text-align: center; } / Unter 360 px ist die Zeile nur 251 px breit und der breiteste Preisblock 97,6 px — es bleiben 142 px. Schrift und Innenabstand entsprechend, damit „Ansehen & kaufen →" auch dort einzeilig bleibt. Und die Cover-Kachel geht auf 68 px zurueck: Bei 320 px ist der Bildschirm 30 % kuerzer, da zaehlen die 20 px je Karte (bei 14 Karten auf angebote.html 280 px) mehr als die letzten Prozent Cover-Groesse. Ueber 360 px bleiben es 88 px. / @media (max-width: 360px) { article.pb .pb-btn, article.pb.gross .pb-btn { flex-basis: 142px; font-size: .76rem; padding: .62rem .35rem; } article.pb, article.pb.gross { grid-template-columns: 62px minmax(0, 1fr); } article.pb img, article.pb.gross img, #gratis article.pb img { width: 62px; max-width: 62px; height: 62px; } } / Das Buendel-Band zeigt als einziges Absatz und Liste (siehe oben). Enger gesetzt, damit daraus keine halbe Bildschirmhoehe wird. / article.pb.ist-buendel p { font-size: .84rem; line-height: 1.45; margin: .35rem 0 0; } article.pb.ist-buendel .pb-punkte { font-size: .8rem; line-height: 1.4; margin: .4rem 0 0; gap: .1rem .8rem; } / ── 8c0) angebote.html auf kleinen Geraeten: Ware vor Moebel ───────────── Gemessen am 26.09. bei 320x568 (nutzbar 45–514: oben 45 px Digistore-Band, unten 54 px Badge). VORHER stand ueber der Falz: h1 133–210 .trust-row 223–304 (vier Konditionen-Zeilen, 81 px) .sprung 318–392 (drei zweizeilige Kacheln, 74 px) .app-hero ab 392 — Bild 444–500, Satz 463–537 (abgeschnitten), .ah-preis 559–622 (45 px UNTER der Falz) .ah-btn 631–678 (117 px darunter) Ein Drittel des nutzbaren Fensters ging fuer Moebel drauf, und das erste Kaufbare war ohne Scrollen nicht zu sehen. NACHHER, gemessen: h1 127–173 · .sprung 189–244 · Bild 282–325 · Satz 297–347 (vollstaendig, nichts abgeschnitten) · .ah-preis 369–432 · .ah-btn 442–488 — 26 px Reserve bis zur Falz. Die Konditionenzeile steht unverkuerzt bei 609–690, also direkt unter der App-Karte (verschoben von /kf-mobil.js). Die Rubriken werden dabei zur EINEN Wisch-Zeile statt dreier Kacheln — das kennt man aus jedem mobilen Store, und alle drei bleiben erreichbar. Der Satz der App-Karte wird NICHT gekuerzt: die 20 px, die das Cover abgibt (84 -> 64 px), gehen an die Textspalte, dort passt er in drei Zeilen statt vier. Ueber 360 px bleibt alles, wie es war. / / Die drei harten Fakten der App-Karte standen auf dem Handy auf display:none („Tiefe auf Klick", wie .pb-punkte). Auf angebote.html gibt es aber keine Produktseite fuer die App-Karte, auf die man klicken koennte — „A/B-Wochen, Doppelstunden & Ferien schon eingebaut", „Auf Handy, iPad & Laptop" und „Datenbank in Frankfurt am Main" waren damit vom Handy aus nicht zu lesen, und ueber der Falz stand kein einziger Fakt (Ziel 1). Sie kommen ab 361 px zurueck, in einer eigenen Rasterzeile zwischen Satz und Preiszeile. Gemessen mit ihnen: 375x812 Fakten 404–489, Preis 510–574, Knopf 583–630 bei Falz 758 — 128 px Reserve; 430x932 Reserve 294 px. Bei 320 px bleiben sie aus: dort hat der Kaufknopf nur 26 px Reserve, und „14 Tage gratis testen · kein Abo" steht dort weiter an der Preiszeile. Die Zeilennummern der drei Bloecke darunter ruecken entsprechend nach. Obergrenze 700 px, weil angebote.html sein Karten-Raster genau dort endet — darueber steht die Karte wieder im Desktop-Aufbau, in dem grid-row nichts zu suchen hat. / @media (min-width: 361px) and (max-width: 700px) { .app-hero-card .ah-checks { display: flex; grid-column: 2; grid-row: 4; margin: .45rem 0 0; gap: .2rem; padding: 0; } .app-hero-card .ah-checks li { font-size: .75rem; font-weight: 500; color: #dbe6ff; gap: .35rem; line-height: 1.3; } .app-hero-card .ah-checks svg { width: 11px; height: 11px; color: #9ad9ae; } .app-hero-card .ah-cta-row { grid-row: 5; } .app-hero-card .ah-social { grid-row: 6; } .app-hero-card .ah-detail { grid-row: 7; } } @media (max-width: 360px) { .shop-hero { padding: 1.1rem 5vw .6rem; } .shop-hero h1 { font-size: 1.25rem; margin-bottom: .4rem; } / 26.09.2026 — DER LINKE UEBERHANG WAR UNERREICHBAR. Die Grundregel in angebote.html setzt justify-content:center. Dieser Block machte daraus eine Wisch-Zeile, hob „center" aber nicht auf: die 432 px Inhalt wurden in 360 px Fenster ZENTRIERT und liefen auf beiden Seiten heraus. Gemessen bei 360x740: erste Kachel left -54, dritte bis 414; ein Wisch nach links endet bei scrollLeft 0 und die erste Kachel bleibt bei -54 — „…enfuehrung & Ruhe" war nicht lesbar zu bekommen. flex-start legt den Ueberhang ganz nach rechts, wo der Wisch ihn holt. / .sprung { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scroll-padding-left: 5vw; gap: .4rem; padding: 0 5vw .7rem; scrollbar-width: none; } .sprung::-webkit-scrollbar { display: none; } .sprung a { flex: 0 0 auto; flex-direction: row; align-items: center; padding: .45rem .7rem; font-size: .72rem; border-radius: 50px; white-space: nowrap; } .app-hero-card { grid-template-columns: 64px minmax(0, 1fr); padding: 1rem .95rem; } .app-hero-card img { width: 64px; } .app-hero-card .ah-sub { font-size: .77rem; line-height: 1.35; margin-top: .25rem; } } / ── 8c) shop.html: der Kopf des Mitgliederbereichs ────────────────────── Gemessen am 26.09. bei 375x812, VOR diesem Block: Die Seite hatte 704 px Vorspann, bevor das erste Produkt begann — Kopfzeile 60, Hero 340 (davon ein 132 px hoher, MITTIG gesetzter Absatz ueber sechs Zeilen), der App-Zugangs-Kasten 175, dazu die Abschnitts-Ueberschrift. Preis und Kaufknopf der ersten Karte lagen dadurch bei 812 bzw. 817 px, also exakt auf und unter der Falz (shop.html traegt kein Digistore-Band, die Falz ist hier die volle Bildschirmhoehe). Hier wird KEIN Wort entfernt. Der Kopf wird linksbuendig gesetzt — mittig gesetzter Fliesstext ueber sechs Zeilen ist auf dem Handy die Textwand, die Marco gemeldet hat — und die Abstaende werden auf Handy-Mass gebracht. Ein Store beginnt mit Ware, nicht mit Vorwort. / .s-hero { text-align: left; padding: 1.3rem 6vw .9rem; max-width: none; } .s-hero h1 { font-size: 1.55rem; line-height: 1.15; margin-bottom: .45rem; } .s-hero p { font-size: .93rem; line-height: 1.55; } .s-trust { justify-content: flex-start; margin-top: .75rem; gap: .3rem .9rem; font-size: .76rem; font-weight: 500; color: var(--gray, #6b7280); } / 26.09.2026, NACHMITTAG — HIER STAND nowrap, UND DAS SCHOB schulen.html 27 PX ZUR SEITE. Gemeint war: „Rechnung mit MwSt. per E-Mail" soll nicht mitten im Wort brechen. Auf shop.html geht das auf, dort sind die drei Eintraege kurz (der laengste misst rund 200 px). schulen.html benutzt dieselbe Klasse, hat aber viel laengere Eintraege — „✓ Voller Funktionsumfang — keine abgespeckte Schulversion" ist mit nowrap 357 px breit und beginnt bei x=45. Macht 402 px in einem 375-px-Fenster: waagerechtes Scrollen auf der Seite mit den hoechsten Bestellwerten. Die Nebenwirkung war unsichtbar, weil sie erst auftrat, als schulen.html heute diese Datei ueberhaupt zum ersten Mal geladen hat — und sie sah aus wie ein Fehler des Digistore-Badges: der fixierte Kasten spannt sich mit left:0;right:0 ueber das LAYOUT-Fenster und war deshalb ebenfalls 402 px breit (innerWidth 402 gegen documentElement.clientWidth 375). Am Badge liegt es nicht, es braucht deshalb auch keine eigene Regel. Umbrechen lassen kostet auf shop.html nichts (die Eintraege passen dort in eine Zeile) und bricht bei Bedarf am Leerzeichen, nicht im Wort. / .s-trust span { white-space: normal; } / Abschnittskopf: gestapelt statt nebeneinander. Bei 375 px stand „Material & Kurse" zweizeilig neben seiner einzeiligen Unterzeile (gemessen h2 635-685, Unterzeile 642-674) — zwei Bloecke auf verschiedenen Grundlinien, die aussehen, als sei etwas verrutscht. Untereinander ist es eine Ueberschrift mit Unterzeile und braucht sogar 3 px weniger. / .s-sec { padding: 1.1rem 6vw 1.6rem; } .s-sec-head { flex-direction: column; align-items: flex-start; gap: .1rem; margin-bottom: .8rem; } / Der Kasten „Dein App-Zugang laeuft weiter" wird auf Handy-Mass gebracht; Wortlaut unveraendert. Auf dem Handy steht er ausserdem HINTER dem Sortiment (verschoben von /kf-mobil.js, Begruendung dort): er ist eine Entwarnung fuer Bestandskunden, kein Angebot, und nahm mit 157 px genau den Platz weg, an dem das erste Produkt haette stehen muessen. / .s-zugang { padding: .85rem 1rem; font-size: .86rem; line-height: 1.55; margin: 1.2rem 0; } / Kleine Geraete: der Vorspann wird enger, damit die erste Karte ganz ueber die Falz passt. Gemessen bei 320x568, VORHER (mit dem Zugangs-Kasten oben): Bild 600–662, Preis 707–760, Knopf 711–755 — alles unter der Falz 568. Nach dem Verschieben des Kastens stand der Knopf bei 535–579, also noch 11 px zu tief. Mit diesem Block: Bild 363–425, Preis 470–522, Knopf 474–518 — 50 px Reserve. Kein Wort faellt weg, nur Schriftgrad und Abstaende geben nach. / @media (max-width: 360px) { .s-hero { padding: 1rem 5vw .7rem; } .s-hero h1 { font-size: 1.35rem; margin-bottom: .35rem; } .s-hero p { font-size: .85rem; line-height: 1.45; } .s-trust { font-size: .72rem; } .s-sec-head { margin-bottom: .5rem; } } .s-schule { padding: 0 6vw; margin: 1.2rem 0 1.6rem; } .s-schule-box { padding: 1.1rem 1.15rem; gap: .9rem; border-radius: 14px; } .s-schule-box a { width: 100%; text-align: center; } / ── 8d) Abschnitte, von denen nur die Aufklapp-Zeile uebrig ist ────────── Bleibt von einem ganzen Abschnitt nur noch die zugeklappte Zeile stehen, wirken seine Abschnitts-Innenabstaende wie Loecher: gemessen am 26.09. bei 375 px stand „Deine Downloads" in einem 88 px hohen Abschnitt fuer eine 44-px-Zeile, „Kostenlos fuer dich" genauso, und auf angebote.html der Autoren-Kasten in 136 px, „Haeufige Fragen" in 124 px. Zwischen zwei Aufklapp-Zeilen lagen dadurch 44 px Luft — die Liste zerfiel. Ohne die Abstaende lesen sich die Zeilen als das, was sie sind: eine Liste mit Haarlinie dazwischen, wie das „Mehr"-Verzeichnis in einem Store. :has() ist absichtlich gewaehlt — die Regel gilt genau dann, wenn /kf-mobil.js wirklich gefaltet hat. Kennt ein Browser :has() nicht, faellt nur diese eine Regel weg und der Abschnitt steht so luftig da wie bisher. Bewusst NUR .s-sec (shop.html) und .trust-sec (angebote.html): .faq und section.block tragen dieselbe Faltung auch auf den 14 Produktseiten, und die sind hier nicht Gegenstand. / section.s-sec:has(> .kf-falt), section.trust-sec:has(> .kf-falt) { padding-top: .15rem; padding-bottom: .15rem; } / ── Der Zwischen-Aufruf faellt weg, wo die Kaufleiste ihn schon traegt ──── .mid-cta wiederholt Titel, Preis und Knopf ein zweites Mal — gemessen 161–199 px je Produktseite. Sie sitzt dabei MITTEN zwischen zwei zugeklappten Aufklapp-Zeilen und bricht die Reihe auf, und ihr Knopf „Zum Angebot →" springt nach UNTEN zur dritten Kopie (#kaufen), obwohl die echte Kauf-Karte oben steht. Sobald /kf-verkauf.js die feste Kaufleiste gebaut hat (Klasse kf-hat-kaufleiste am body), stehen Titel, Preis und Kaufknopf ohnehin dauerhaft am unteren Rand — Marcos „EIN Hinweis je Bildschirm". Auf Seiten OHNE Leiste bleibt die Karte stehen: dort ist sie der einzige Aufruf in der Seitenmitte. / body.kf-hat-kaufleiste .mid-cta { display: none; } / Zwischen-Aufruf: EIN Hinweis je Bildschirm — die Karte bleibt, aber flach. / .mid-cta { padding: .95rem 1rem; gap: .65rem; border-radius: 12px; } .mid-cta .mc-txt { font-size: .92rem; line-height: 1.35; } .mid-cta .mc-txt small { font-size: .78rem; } .mid-cta a { width: 100%; text-align: center; } / Autoren-Kasten und Raster enger / .leiter { padding: 1.1rem 1rem; gap: .9rem; } .lern-grid, .inkl-grid { gap: .6rem; } .lern-card { padding: .9rem 1rem; } .inkl { padding: .7rem .85rem; } .faq { padding: 1.4rem 5vw 1.8rem; } .faq h2 { text-align: left; } / ── 8b) buch.html hat ein eigenes Geruest (kein .k-hero) ──────────────── Gemessen am 26.09. bei 375 px: Das Buchcover ist 280 px breit und damit rund 420 px hoch — die Ueberschrift begann erst bei 630 px, Preis und Knopf standen bei 1.042 bzw. 1.201. Dasselbe Prinzip wie bei den Produktseiten: Cover klein nach oben, dann Titel, ein Satz, die drei Fakten (Autor, Preis, Sprache stehen schon da), dann der Kaufknopf. Der lange Absatz rutscht dahinter — er bleibt vollstaendig lesbar. ⚠ 26.09.2026, ABEND — WARUM HIER UEBERALL `body.kf-buch` DAVORSTEHT. Die Klassennamen dieses Blocks (.hero, .hero-tag, .cta-section, .cta-buttons) sind KEINE Shop-Namen, sondern die der alten Startseiten- Vorlage. Von allen Seiten, die /kf-mobil.css laden, benutzt sie nur buch.html — bis heute Abend. Seit index.html dieselbe Datei laedt, traegt die Startseite dieselben Namen: `.hero` ist dort der Kopf mit Titel, Kaufknopf und Beleg, und `.hero h1` enthaelt ein
, das die Regel unten ausgeblendet haette („Digitale Unterrichtsplanung,die endlich funktioniert." — gemessen). Marcos Bedingung fuer den Startseiten-Umbau war: der Kopf bleibt, wie er ist. Also gilt dieser Block weiter genau fuer die Seite, fuer die er gemessen wurde, und fuer keine andere. Die Klasse steht am von buch.html. Kommt sie dort je weg, faellt buch.html auf seinen Stand vor dem 26.09. zurueck — nichts wird kaputt, nur wieder lang. / body.kf-buch .hero { padding: .8rem 5vw 1.2rem !important; gap: .9rem !important; } body.kf-buch .hero > div:first-child { display: flex; flex-direction: column; gap: .5rem; min-width: 0; } body.kf-buch .hero .hero-tag, body.kf-buch .hero h1, body.kf-buch .hero .hero-sub-title, body.kf-buch .hero .hero-meta { margin: 0; } body.kf-buch .hero h1 { font-size: 1.7rem; line-height: 1.08; } / Die Ueberschrift ist
Haltung
statt
Regeln
. Die
auszublenden bringt sie auf eine Zeile — aber zwischen den drei Textknoten steht kein Leerzeichen, sie stossen direkt aneinander. Gemessen am 26.09. bei 320, 375 und 430 px las die Ueberschrift „HaltungstattRegeln", und zwar als Erstes ueber der Falz. Die beiden geschuetzten Leerzeichen setzen den Zwischenraum, den die
vorher gemacht haben. / body.kf-buch .hero h1 br { display: none; } body.kf-buch .hero h1 em::before, body.kf-buch .hero h1 em::after { content: "\00a0"; } body.kf-buch .hero .hero-sub-title { font-size: .98rem; line-height: 1.35; } body.kf-buch .hero .hero-desc { order: 9; font-size: .92rem; line-height: 1.6; margin: .6rem 0 0; } / Als umbrechende Flex-Reihe sah die Faktenzeile je Breite anders aus: gemessen bei 375 px brach sie 3+1 um — „68 Seiten / Umfang" hing allein in der zweiten Reihe —, bei 320 px dagegen sauber 2+2 (97 px). Dasselbe Bauteil, zwei Bilder; genau die Art „merkwuerdig verschoben", die .k-facts weiter oben schon einmal gekostet hat. / body.kf-buch .hero .hero-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; } / Ab 361 px als 2x2-Raster — dort bricht die Flex-Reihe 3+1 um, das Raster ist gleich hoch (gemessen 99 px bei 375) und laesst keine Kachel allein. UNTER 361 px bleibt die Flex-Reihe: dort raeumt sie sich von selbst zu 2+2 auf, waehrend das Raster die Spalten auf 137 px zwingt, die laengste Kachel dadurch eine Zeile mehr braucht und der Kasten auf 119 px waechst — gemessen schob das bei 320x568 den Kaufknopf von 442–493 auf 464–515 und damit 18 px unter die Falz (497). / @media (min-width: 361px) { body.kf-buch .hero .hero-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .9rem; } } / margin-left:0 gehoert dazu: .btn-freebie traegt in buch.html margin-left:1rem fuer die Breitbild-Zeile. Zusammen mit width:100% stand der zweite Knopf 16 px weiter rechts als der erste — gemessen bei 375 px l=18,8 gegen l=34,8, bei 320 px beruehrte er mit r=320 die Bildschirmkante genau. Zwei gleich breite Knoepfe untereinander mit einer Stufe dazwischen: das war das am schnellsten sichtbare „merkwuerdig verschoben". / body.kf-buch .hero .btn-amazon, body.kf-buch .hero .btn-freebie { width: 100%; justify-content: center; text-align: center; margin-left: 0; } / Nur die Hoehe vorgeben, die Breite rechnet der Browser aus dem Seitenverhaeltnis. Buchcover.jpg ist 900x1350 (2:3); mit der festen Breite aus buch.html wurde es auf 180x150 gequetscht (object-fit:fill), also um Faktor 1,8 verzerrt — das erste Element der Seite. Die feste Breite ist in buch.html geloescht, hier steht bewusst nur noch die Hoehe. / body.kf-buch .hero .book-cover { width: auto; height: 150px; margin: 0 auto; } / Das Abzeichen sass mit 52x52 bei top/right -10px zu 42x42 px auf dem Cover und deckte das „g" von „Haltung" auf dem Titelbild zu (gemessen bei 320, 375 und 430 px identisch). Kleiner und weiter nach aussen: es beruehrt die Cover-Flaeche nur noch an der Ecke. / body.kf-buch .hero .book-badge { width: 44px; height: 44px; top: -14px; right: -14px; font-size: .55rem; } body.kf-buch .cta-section { padding: 1.4rem 5vw 1.8rem; } body.kf-buch .cta-buttons { flex-direction: column; gap: .6rem; } body.kf-buch .cta-buttons > { width: 100%; justify-content: center; text-align: center; } /* ── 8b2) buch.html auf kleinen Geraeten ────────────────────────────────── Bei 320x568 sind nur 45–497 px nutzbar (oben 45 px Digistore-Band, unten 71 px Badge — buch.html hat das hoechste). Gemessen endete der Kaufknopf dort bei 608 px, also 111 px unter der Falz. Die vier Kacheln der hero-meta-Zeile (Autor · Preis · Sprache · Umfang) brauchten allein 99 px, weil sie bei 320 px auf drei Reihen umbrechen, das Cover weitere 150 px. Gekuerzt wird nichts: Cover kleiner, Schrift und Abstaende enger. Der lange Absatz steht ohnehin per order:9 hinter dem Kaufknopf. / @media (max-width: 360px) { body.kf-buch .hero { padding: .4rem 5vw .8rem !important; gap: .5rem !important; } body.kf-buch .hero > div:first-child { gap: .35rem; } body.kf-buch .hero .book-cover { height: 78px; } / Die Rubrik-Pille „Das Buch als PDF — sofort zum Download" lief bei 320 px ueber DREI Zeilen und war damit 55 px hoch — mehr als die Ueberschrift darunter (23 px). Auf eine Zeile gebracht (23 px) steigt die Reserve des Kaufknopfs bis zur Falz von 4 auf 36 px; der Wortlaut bleibt. / body.kf-buch .hero .hero-tag { font-size: .64rem; padding: .3rem .6rem; line-height: 1.3; letter-spacing: .04em; } body.kf-buch .hero .book-badge { width: 30px; height: 30px; top: -9px; right: -9px; font-size: .4rem; } body.kf-buch .hero h1 { font-size: 1.35rem; } body.kf-buch .hero .hero-sub-title { font-size: .9rem; } body.kf-buch .hero .hero-meta { gap: .12rem .7rem; font-size: .82rem; } body.kf-buch .hero .btn-amazon, body.kf-buch .hero .btn-freebie { padding-top: .75rem; padding-bottom: .75rem; } } / ── 8c) index.html — die Startseite ────────────────────────────────────── Marco am 26.09.: „ich brauche keinen bericht, du sollst es verbessern dass die seite verkauft." GEMESSEN VORHER (375x812, 26.09.): 13.114 px = 16,2 Bildschirme, die laengste Seite des Auftritts — und die mit dem meisten Verkehr. Die Laenge lag nicht am Kopf, sondern an den Abschnitten darunter: Was Lehrkraefte sagen 2.552 px Die App, das Material und der Kurs 2.442 px Die Fragen, die jetzt kommen 1.921 px KI im Unterricht (YouTube) 1.348 px Drei Ebenen, die zusammenhaengen 1.318 px Mehr zu KI, Klassenfuehrung … 1.023 px Von Lehrer zu Lehrer 539 px Dazu 3,5rem Innenabstand oben UND unten an jedem der zehn Abschnitte — allein 1.120 px Rahmen. GEMESSEN NACHHER (26.09.2026, ABEND — LETZTER DURCHGANG, Stand dieser Datei, am laufenden Testserver 127.0.0.1:8099 mit erzwungen geladenen Bildern und hartem Neuladen je Breite): 375x812 4.778 px = 5,88 Bildschirme (Ziel: hoechstens 7) 430x932 4.613 px = 4,95 Bildschirme 320x568 5.252 px = 9,25 Bildschirme. Bei 568 px Fensterhoehe sind 7 Bildschirme rechnerisch nicht zu halten: allein der Kopf ist dort 885 px = 1,56 Bildschirme, und am Kopf wird nichts geaendert. Der Auftrag misst ausdruecklich bei 375x812. 14 Klappen (document.querySelectorAll('details.kf-falt').length), keine Klappe in der Klappe (`details details` = 0). Querscrollen bei 320/375/430: 0 (scrollWidth == Viewport, kein Element ueber den rechten Rand). Tippflaeche unter 44 px: keine — weder mit geschlossenen noch mit ALLEN offenen Klappen. Schreibtisch 1280x900: 8.473 px, 0 Klappen — Pixel fuer Pixel wie vor dem Umbau, gegen eine Kopie von vorher nachgemessen (alle acht Zitatkarten auf identischen Koordinaten, jede Sektion identisch). ⛔ Wer hier etwas aendert, misst diese Zeilen neu. Sie sind der Sollwert, gegen den nachgeprueft wird — eine Zahl aus einem Bericht ist keiner. Heute standen hier schon zweimal Zahlen, die sich nicht reproduzieren liessen (4.644 px und 5.361 px). So misst man nach: py -m http.server 8099 --bind 127.0.0.1 Browser auf 375x812, hart neu laden, document.documentElement.scrollHeight lesen. DER KOPF BLEIBT, WIE ER IST. Titel, der Satz darunter, „Jetzt kostenlos testen", „So funktioniert's — in 5 Min.", „Über 1.000 Anmeldungen" und die Nutzenzeilen stehen unveraendert und weiter ohne Scrollen im Bild. Deshalb steht in diesem Block KEINE Regel fuer .hero — und deshalb tragen die .hero-Regeln des Buch-Blocks darueber seit heute `body.kf-buch`. WAS HIER STEHT, sind nur Masse: Innenabstaende der gefalteten Abschnitte, die kompaktere Sortiments-Karte und die Handy-Fassung der Stimmen-Klappe. ⛔ Kein Preis, kein Produktmerkmal, keine Zahl. Die stehen im HTML der Seite bzw. in KF_PRODUKTE in /kf-verkauf.js. / / Ein zugeklappter Abschnitt braucht keinen Abschnitts-Rahmen mehr: sonst kostet jede Aufklappzeile 3,5rem oben plus 3,5rem unten = 112 px, bei fuenf Klappen 560 px fuer fuenf Zeilen Text. `!important` ist noetig, weil index.html unter 600 px `section { padding: 3.5rem 5vw !important }` setzt; als Longhand notiert, damit der seitliche Wert (5vw) unveraendert bleibt. Gleiche Idee wie `section.s-sec:has(> .kf-falt)` weiter oben fuer den Shop. / body.kf-start section:has(> .kf-falt) { padding-top: .2rem !important; padding-bottom: .2rem !important; } / Die drei Abschnitte, die OFFEN bleiben (Fragen, Sortiment, Stimmen), und der Abschluss: enger, aber als Abschnitte erkennbar. / body.kf-start .kf-faq-section, body.kf-start .freebies-section, body.kf-start .trust-section, body.kf-start .seo-section, body.kf-start .cta-section { padding-top: 2rem !important; padding-bottom: 2.2rem !important; } body.kf-start .section-title { font-size: 1.5rem; margin-bottom: .5rem; } / … aber nicht, wenn die Ueberschrift zur Aufklappzeile geworden ist: dort gelten die 1,08rem aus Abschnitt 6, damit die Zeilen der Startseite genauso aussehen wie die im Shop. Die Regel darueber hat zwei Klassen und haette `.kf-falt > summary > h2` (eine Klasse) sonst geschlagen — gemessen wurden „Drei Ebenen, die zusammenhängen" und „KI im Unterricht …" dadurch zweizeilig und 89 statt 44 px hoch. / body.kf-start .kf-falt > summary > .section-title { font-size: 1.08rem; margin-bottom: 0; } body.kf-start .section-label { margin-bottom: .4rem; } body.kf-start .section-sub { font-size: .94rem; line-height: 1.6; } / „Von Lehrer zu Lehrer" steht auf dunklem Grund (.ueber-section). In der Aufklappzeile ist die
nicht mehr in .marco-info, verliert damit deren weisse Schriftfarbe und waere schwarz auf #1a1a2e — also unsichtbar. / body.kf-start .ueber-section .kf-falt > summary > h2 { color: #fff; } body.kf-start .ueber-section .kf-falt { border-top-color: rgba(255,255,255,.16); } body.kf-start .ueber-section .kf-falt > summary::after { background: rgba(255,255,255,.14); color: #fff; } / ── Die Fragen: eine Frage pro Zeile ──────────────────────────────────── `data-falt` steht auf jeder .kf-faq (nicht auf dem Abschnitt), also wird aus jeder Karte eine eigene Klappe. Als Karten mit Rand, Radius und 1,3rem Innenabstand waeren das sieben Kaesten mit 42 px Luft je Stueck; als Liste mit einer Trennlinie liest es sich wie eine FAQ und ist halb so hoch. Die Tippflaeche bleibt bei 44 px (Abschnitt 11). / body.kf-start .kf-faq-grid { gap: 0; margin-top: 1rem; } body.kf-start .kf-faq { padding: 0 .2rem; border-radius: 0; border-width: 0 0 1px 0; background: transparent; } body.kf-start .kf-faq .kf-falt { border-top: 0; } body.kf-start .kf-faq .kf-falt[open] > p { padding-bottom: .9rem; } body.kf-start .kf-faq p { font-size: .88rem; line-height: 1.65; } / „Was KlassenFLOW nicht ist" ist ebenfalls eine Klappe, behaelt aber seinen eigenen Kasten — es ist eine Abgrenzung, keine Frage. / body.kf-start .kf-grenze { margin-top: 1.1rem; padding: 0 1rem; } body.kf-start .kf-grenze .kf-falt[open] > p { padding-bottom: 1rem; } / ── Der Wegweiser ins Sortiment bleibt offen ──────────────────────────── Das ist der Abschnitt, der verkauft: App, Kurs, Paket, Buch mit Preis und Knopf. Er wird NICHT gefaltet, nur enger gesetzt. Kein Wort gekuerzt. / / 26.09.2026, ABEND: Das Preisschild der App-Karte. index.html haelt es mit `display:none` vom Schreibtisch fern, hier ist es an. Die Zahl kommt aus den data-preis-Spannen (Stichtag 01.10.), nicht aus festem Text — der Schalter am Ende von index.html setzt sie. Etwas kleiner als die drei Schilder darunter, weil hier drei Woerter mehr drinstehen: gemessen passt die Zeile damit auch bei 320 px in EINE Zeile. / body.kf-start .kf-app-preis { display: inline-block; font-size: .78rem; margin-bottom: .55rem; white-space: nowrap; } body.kf-start .freebie-primary { padding: 1.1rem 1.2rem; gap: .9rem; margin-top: 1.1rem; } body.kf-start .freebie-primary h3 { font-size: 1.05rem; margin-bottom: .35rem; } body.kf-start .freebie-primary p { font-size: .88rem; line-height: 1.55; } body.kf-start .freebie-primary .btn-primary { justify-content: center; width: 100%; padding: .8rem 1rem; } body.kf-start .kf-prod-grid { gap: .6rem; margin-top: .9rem; } body.kf-start .kf-prod { padding: .95rem 1.1rem; border-radius: 12px; } body.kf-start .kf-prod-preis { margin-bottom: .45rem; } body.kf-start .kf-prod h4 { font-size: .98rem; margin-bottom: .3rem; } body.kf-start .kf-prod p { font-size: .86rem; line-height: 1.55; } body.kf-start .kf-prod a { margin-top: .5rem; } / ── Cover und Produktart: die Karte bekommt ein Gesicht ───────────────── 26.09.2026, NACHMITTAG. Gemessen hatte .freebies-section auf dem Handy NULL Bilder — die drei bezahlten Karten waren reiner Text, und keine Zeile sagte, WAS das Produkt ist. Dass 99 € ein Videokurs und 9 € ein Buch ist, stand nur im Fliesstext. shop.html zeigt an derselben Stelle 10 Cover, angebote.html 16: die Seite mit dem meisten Verkehr sah aermer aus als jede Unterseite, auf die sie verlinkt. Cover und Produktart stehen im HTML und sind dort per `display: none` fuer den Schreibtisch aus (Bedingung 5: „Dies ist ein Handy-Umbau"). Hier werden sie eingeschaltet und die Karte wird vom Stapel zu zwei Spalten: Cover links, Text rechts. Das Cover steht neben dem KOPF der Karte (Produktart, Preis, Titel) und laeuft ueber genau diese drei Zeilen — gemessen sind die drei zusammen etwa so hoch wie das Bild. Beschreibung und Knopf stehen darunter ueber die ganze Breite: in einer schmalen zweiten Spalte brach der Text sonst in deutlich mehr Zeilen, und die Karte wurde dadurch hoeher statt kuerzer. 🪤 `span 3` statt `1 / -1`: negative Zeilennummern greifen nur auf EXPLIZITE Zeilen, und hier entstehen alle Zeilen implizit — `-1` faellt auf Linie 1 zurueck, das Cover spannt dann nichts und drueckt den Kartenkopf unter sich. Die 3 sind Produktart, Preis und Titel; kommt dort eine Zeile dazu, muss die Zahl mitwachsen. / body.kf-start .kf-prod { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: .85rem; align-items: start; } body.kf-start .kf-prod-cover { display: block; grid-column: 1; grid-row: 1 / span 3; align-self: start; / Quadrat + `contain`: die drei Cover haben drei Seitenverhaeltnisse (Kurs 16:9, Schulstart 1:1, Buch 2:3). `cover` wuerde den Kurs auf 58 % seiner Breite beschneiden und damit halbe Produkte zeigen — `contain` schneidet nichts ab und verzerrt nichts. Das Quadrat ist die uebliche Form fuer ein Produkt-Vorschaubild; der Schulstart fuellt es genau, Buch und Kurs stehen mittig darin. / width: 78px; aspect-ratio: 1 / 1; object-fit: contain; background: var(--light, #f8f9fb); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; } body.kf-start .kf-prod-art, body.kf-start .kf-prod-preis, body.kf-start .kf-prod h4 { grid-column: 2; } body.kf-start .kf-prod p, body.kf-start .kf-prod a { grid-column: 1 / span 2; } body.kf-start .kf-prod-art { display: block; font-size: .71rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gray, #6b7280); margin-bottom: .25rem; } / Im Raster wuerde die Preis-Pille sonst die ganze Spalte breit werden. / body.kf-start .kf-prod-preis, body.kf-start .kf-prod a { justify-self: start; } body.kf-start .kf-alle-link { margin-top: .9rem; } / Die vier Gratis-Karten liegen in einer Klappe (.kf-gratis, siehe HTML). Die Aufklappzeile ist die fruehere Zeile „Und das hier kostet nichts". / body.kf-start .kf-gratis { margin-top: .9rem; } body.kf-start .kf-gratis .kf-falt > summary > h3.kf-gratis-titel { margin: 0; font-size: 1.05rem; } body.kf-start .kf-gratis .freebie-cards { gap: .6rem; margin-top: .6rem; } body.kf-start .freebie-card { padding: 1rem 1.1rem; } / ── Die Stimmen: die zwei mit Zustimmung offen, sechs in der Klappe ────── 🔑 Sascha Lüscher und Carolin sind die EINZIGEN Rueckmeldungen mit dokumentierter Zustimmung zur Veroeffentlichung mit Namen. Sie bleiben offen — hier wird nur der Innenabstand enger, kein Wort angetastet. 🪤 Der Transparenzhinweis (§ 5b Abs. 3 UWG) steht im HTML HINTER dem Raster und klappt deshalb nicht mit zu. Er bleibt bei den Zitaten. / body.kf-start .trust-grid { gap: .9rem; margin-top: 1.1rem; } body.kf-start .trust-item { padding: .9rem 0 .9rem 1rem; } body.kf-start .trust-item blockquote { font-size: .9rem; line-height: 1.6; margin-bottom: .5rem; } / Am Desktop ist .trust-mehr per `display: contents` gar nicht da (Regel in index.html). Auf dem Handy wird sie zum Kasten, den /kf-mobil.js faltet, und ihre Ueberschrift zur Aufklappzeile. / / ── Erst der Satz, dann die Ausfuehrung ───────────────────────────────── 26.09.2026, ABEND. Gemessen bei 375x812: der zweite Wisch landete vollstaendig in Sascha Lueschers Karte — 352 px Kursivtext (578 Zeichen) am Stueck, bevor irgendetwas zu kaufen ist. Carolins Satz („Es ist mega und hilft mir bei meiner Planung sehr.") ist 46 px hoch und in einer Sekunde gelesen. Auf dem Handy steht er deshalb zuerst und die ausfuehrliche Stimme darunter: erst der Haken, dann der Beweis. BEIDE bleiben offen — sie sind die zwei Rueckmeldungen mit dokumentierter Zustimmung. Kein Wort, kein Name, keine Hervorhebung aendert sich, nur die Reihenfolge, und nur unter 760 px. Der Transparenzhinweis steht hinter dem Raster und bleibt davon unberuehrt. 🪤 `order` hat den Grundwert 0 — .trust-mehr braucht darum eine eigene Zahl, sonst stuende die Klappe mit den sechs Stimmen ganz oben. / body.kf-start .trust-grid > :nth-child(1) { order: 2; } /* Sascha Lüscher / body.kf-start .trust-grid > :nth-child(2) { order: 1; } /* Carolin / body.kf-start .trust-mehr { display: block; grid-column: 1 / -1; order: 3; } / 🪤 26.09.2026, ABEND — DIE AUFKLAPPZEILE WAR 1x1 PX. Hier stand nur `display: block`. Versteckt hatte die Zeile in index.html aber `position:absolute; width:1px; height:1px; clip-path:inset(50%)` — `display` war nie beteiligt, also blieb sie auch hier 1x1 px. GEMESSEN bei 375x812: Kasten 1x1, auf dem Schirm ein nackter „+"-Knopf ohne ein einziges Wort. Alle uebrigen zwoelf Aufklappzeilen der Seite messen 265–299 px Text — nur diese eine nicht. index.html versteckt die Zeile jetzt mit `display: none`; hier wird sie eingeschaltet. Der Text „Sechs weitere Stimmen (Namen gekuerzt)" steht schon im HTML, es kommt kein Wort dazu. Nachmessen: document.querySelector('.trust-mehr-titel') .getBoundingClientRect().width muss > 250 sein. / body.kf-start .trust-mehr-titel { display: block; font-size: 1rem; font-weight: 800; color: var(--dark, #111827); line-height: 1.35; margin: 0; } body.kf-start .trust-mehr .kf-falt > .trust-item { margin-top: .9rem; } / ── Der Pflichtsatz bleibt, wo er ist — er nimmt nur weniger Platz ────── 26.09.2026, ABEND. GEMESSEN: der Transparenzhinweis (§ 5b Abs. 3 UWG) war auf dem Handy 160 px hoch — hoeher als Carolins ganzes Zitat samt Namen (103 px) und ein Fuenftel eines Bildschirms. Er stand als letztes Bild vor der Ueberschrift „Die App, das Material und der Kurs": grauer Fliesstext, zentriert ueber sieben Zeilen, direkt vor dem Sortiment. ⛔ KEIN WORT GESTRICHEN — der Wortlaut ist rechtlich gesetzt, und der Satz bleibt ausserhalb jeder Klappe direkt unter den Zitaten stehen (Auftrag: er darf nicht mit zuklappen). Es geben nur die Masse nach. Linksbuendig statt zentriert spart bei diesem Fliesstext gemessen zwei Zeilen, weil der Flattersatz die Zeilen besser fuellt. Ueber 760 px greift nichts davon, dort steht die Inline-Formatierung aus index.html unveraendert. 🪤 `!important` ist bei JEDER Zeile Pflicht, nicht nur bei margin-top: index.html traegt die Formatierung dieses Absatzes als style="…"- Attribut direkt am
(font-size, line-height, text-align, opacity). Ein Attribut schlaegt jede Regel aus einer Datei. Ohne das Schlagwort blieb der Absatz gemessen bei unveraenderten 160 px. / body.kf-start .trust-hinweis { margin-top: 1rem !important; font-size: .72rem !important; line-height: 1.5 !important; text-align: left !important; } / ── Der Knopf unter den Zitaten ───────────────────────────────────────── 26.09.2026, ABEND. GEMESSEN bei 375x812: zwischen dem Kopfknopf (endet y 457) und dem naechsten Knopf (y 2.314) lagen 1.858 px = 2,29 Bildschirme ohne jede Handlungsmoeglichkeit — und genau darin steht das staerkste Zitat der Seite. Diese Wiederholung des Kopfknopfs halbiert die knopflose Strecke. Sie steht hinter dem Transparenzhinweis, damit der Pflichtsatz bei den Zitaten bleibt. Am Schreibtisch ist sie aus (index.html, `display:none`) — dort ist der naechste Knopf ohnehin nur kurz darunter. / body.kf-start .kf-mitte-cta { display: block; margin-top: 1.4rem; } body.kf-start .kf-mitte-cta .btn-primary { display: flex; width: 100%; justify-content: center; align-items: center; min-height: 48px; padding: .8rem 1rem; } / ── Die drei Artikel-Links liegen in einer Klappe ─────────────────────── 26.09.2026, ABEND: `data-falt` steht wieder am
in index.html — beide Link-Listen der Seite (Videos und Artikel) werden gleich behandelt, die Begruendung steht ausfuehrlich in index.html ueber dem Abschnitt. Diese Masse gelten weiter: sie greifen jetzt INNERHALB der Klappe, wenn jemand sie aufklappt. Kein Wort gekuerzt, keine Karte entfernt — die Karte ist als Ganzes ein , die Tippflaeche also ohnehin ueber 44 px. / body.kf-start .seo-grid { gap: .6rem; margin-top: .9rem; } body.kf-start .seo-card { padding: .95rem 1.1rem; gap: .3rem; border-radius: 12px; } body.kf-start .seo-card h3 { font-size: .98rem; line-height: 1.3; } body.kf-start .seo-card p { font-size: .85rem; line-height: 1.55; } / ── Der Abschluss und die Leisten ─────────────────────────────────────── Die Leiste unter dem Kopf („Einmal zahlen statt Abo …") ist die Vertrauenszeile der Startseite und bleibt stehen, nur enger. / body.kf-start .free-bar { padding: .9rem 5vw; gap: .5rem 2rem; } body.kf-start .cta-section h2 { font-size: 1.5rem; margin-bottom: .6rem; } body.kf-start .cta-section > p { font-size: .94rem; margin-bottom: 1.2rem; } body.kf-start .cta-note { margin-top: .8rem; } body.kf-start .cta-guide { margin-top: .7rem; } / Der Gratis-Ausgang „KI-Guide kostenlos holen" haengt auf dem Handy nicht mehr unter dem Kaufknopf, sondern beim uebrigen Gratis-Material in der Klappe „Und das hier kostet nichts" (/kf-mobil.js, Abschnitt 3d). Dort ist der Grund weiss statt blau — die Farben aus index.html (Weisstoene fuer den blauen Abschluss) waeren unlesbar. / body.kf-start .kf-gratis .cta-guide { margin-top: .9rem; color: var(--gray, #6b7280); } body.kf-start .kf-gratis .cta-guide a { color: var(--blue-bright, #5170FF); } / 26.09.2026, ABEND: Steht in der Klappe schon ein Link auf dasselbe Ziel (die vierte Gratis-Karte fuehrt mit „KI-Guide holen →" auf dieselbe Adresse), haengt /kf-mobil.js die Zeile NICHT um — sonst stuenden zwei Zeilen mit demselben Link untereinander. Sie bleibt dann an ihrem Platz im Abschlussblock und ist auf dem Handy nur ausgeblendet: das Angebot steht genau einmal, und unter dem Kaufknopf steht kein zweiter Weg hinaus. Ueber 760 px greift diese Regel nicht, dort ist die Zeile unveraendert da. / body.kf-start .cta-guide.kf-dublette { display: none; } / ── Was nach dem Abschluss kommt, ist eine eigene Gruppe ──────────────── 26.09.2026, ABEND: Auf dem Handy steht der Abschlussblock jetzt direkt hinter den Fragen (/kf-mobil.js, Abschnitt 3c). Danach folgen die Gruendergeschichte und der Videoabschnitt als zwei zugeklappte Zeilen. Ohne Abstand lesen sie sich wie zwei weitere Fragen; mit dem Abstand sind sie sichtbar das, was sie sind — der Teil nach der Entscheidung. / body.kf-start .cta-section + .ueber-section, body.kf-start .ueber-section + .yt-section { margin-top: .6rem; } / Die Fusszeile traegt alle internen Links (SEO) und die Pflichtlinks Impressum/Datenschutz. Sie bleibt vollstaendig; nur die Abstaende geben nach, nachdem Abschnitt 11 jeden Link auf 44 px Tippflaeche gebracht hat. / body.kf-start footer { padding: 1.4rem 5vw 1.6rem; gap: .8rem; } body.kf-start .footer-links { gap: 0 1.2rem; } / ── Der Beleg muss auch auf dem kleinsten Handy ueber der Falz stehen ──── 26.09.2026, NACHMITTAG. Bedingung 2 des Auftrags: Titel, Satz, Knopf und Beleg bleiben ohne Scrollen sichtbar. Bei 375x812 und 430x932 stimmt das. Bei 320x568 nicht: gemessen lag „Über 1.000 Anmeldungen" bei y 563–593, die Falz ist 568 — 5 von 30 px sichtbar. Ursache ist messbar: die Tippflaeche des zweiten Knopfs („So funktioniert's — in 5 Min.") ist durch Abschnitt 11 von 25 auf 44 px gewachsen. Die 44 px sind richtig und bleiben; der Platz dafuer wird hier oberhalb der Falz wieder hereingeholt. ⛔ NUR MASSE. Am Kopf wird kein Wort geaendert — das ist ausdruecklich ausgenommen („DER KOPF IST GUT und bleibt inhaltlich, wie er ist"). Deshalb steht in Abschnitt 8c auch sonst keine .hero-Regel, und deshalb gilt dieser Block nur bis 360 px: ab 361 px war nichts zu reparieren. 🪤 `!important` ist Pflicht: index.html setzt unter 600 px selbst `.hero { padding-top: 2.25rem !important }` (36 px). Ohne das Schlagwort blieb die Regel hier wirkungslos — gemessen stand der Beleg danach immer noch bei 552–584, also 16 px unter der Falz. Gemessen bei 320x568, Unterkante von .hero-social: 36 px Polster = 594 (26 px drunter), 20 px = 568,41 (noch 0,41 px drunter — die Falz ist 568), 12 px = 560. Die 12 sind gewaehlt, damit auch die gemessene Streuung von rund 16 px durch das Nachladen der Schrift den Beleg nicht wieder unter die Kante schiebt. / @media (max-width: 360px) { body.kf-start .hero { padding-top: 12px !important; } body.kf-start .hero-social { margin-top: 6px; } } / ── 9) Jedes Raster darf schrumpfen ───────────────────────────────────── minmax(210px,1fr) & Co. koennen auf 320 px breiter werden als der Bildschirm. Auf schmalen Flaechen deshalb eine Spalte. / .lern-grid, .inkl-grid, .dl-grid, .s-grid, .kurs-grid, .kurs-hero-liste, .trust-row { grid-template-columns: minmax(0, 1fr) !important; } .bm-grid--drei { max-width: none; } } / ── 10) Kein horizontales Scrollen, auf keiner Breite ────────────────────── Gemessen am 26.09. bei 320/375/430 px: buch.html liess seine Fusszeilen-Links (ul.footer-links, display:flex OHNE flex-wrap) bis x=768 aus dem Bildschirm laufen — sichtbar wurde das nur nicht, weil body overflow-x:hidden sie abschneidet. Abgeschnitten ist nicht in Ordnung, nur unsichtbar kaputt. Die Regel gilt sicherheitshalber ueberall, nicht nur dort. / .footer-links, .nav-links, .k-facts, .l-links, .s-trust, .pb-punkte, .trust-row { flex-wrap: wrap; } / Kinder von Rastern und Flex-Kaesten duerfen unter ihre Inhaltsbreite — sonst sprengt ein langes Wort oder ein breites Bild die Spalte. / .k-hero > , section.block > , .s-card > , .pb > , .kurs-card > { min-width: 0; } /* ── 11) Tippflaechen ─────────────────────────────────────────────────────── Marcos Regel: mindestens 44 px. Gemessen waren u. a. Burger-Knopf 24, Logo 23, Fusszeilen-Links 16–18, Aufklapp-Zeilen 23–41. Die Bedingung ist eine ODER-Liste: (hover:none) and (pointer:coarse) = es IST ein Touch-Geraet. Das ist die Geraeteklasse, und sie wird wie in Marcos Merkzettel NUR so bestimmt. (max-width:760px) = schmale Flaeche. Das ist keine Geraeteaussage, sondern dieselbe Layout-Schwelle wie oben: wo der Store einspaltig wird, haben Knoepfe Platz genug fuer 44 px. So ist das Ergebnis auch am schmalen Desktop-Fenster messbar — und nicht davon abhaengig, ob ein Pruefwerkzeug Touch meldet. / @media (max-width: 760px), (hover: none) and (pointer: coarse) { nav .nav-logo, .s-logo, .s-back, .footer-logo, .mobile-menu a, .nav-links a, .sprung a, footer .footer-links a, .leiter .l-links a, .l-links a, .s-frei a, .pb-gratis a, .kurs-btn, .s-btn, .pb-btn, .k-hero-cta, .mid-cta a, .dl, .s-kauf, .kurs-kauf, .pb-kauf, .schul-btn, .kurs-hero-btn, .app-btn, .ah-btn, a[href^="mailto:"] { min-height: 44px; display: inline-flex; align-items: center; } .kurs-btn, .s-btn, .pb-btn, .k-hero-cta, .mid-cta a, .s-kauf, .kurs-kauf, .pb-kauf, .schul-btn, .kurs-hero-btn { justify-content: center; } .s-foot-bar .fl, .s-foot-links a, .trust-social a, .aq-note a { min-height: 44px; display: inline-flex; align-items: center; } / 26.09.2026, NACHMITTAG — zugang.html WAR BEIM UMBAU NICHT DABEI. Die Seite traegt data-kauf="715300", verkauft also die App, und ist live. Sie hat eigene Klassennamen (.z-logo, .z-foot), die in keiner der Listen darueber vorkamen — gemessen bei 375x812: Logo-Link 23,2 px und vier Fusszeilen-Links 15,2 px, waehrend auf allen umgebauten Seiten dieselben Elemente 44 px hoch sind. / .z-logo, .z-foot a { min-height: 44px; display: inline-flex; align-items: center; } / 26.09.2026, ABEND — DIE STARTSEITE WAR BEIM UMBAU NICHT DABEI. index.html hat eigene Klassennamen, die in keiner der Listen darueber vorkamen. Gemessen bei 430x932 nach dem Umbau: „Zum Kurs →", „Zum Paket →" und „Zum Buch →" je 17,0 px — das sind die drei Wege ins bezahlte Sortiment —, die vier Gratis-Links 18,0 px, „Mehr über Marco →" 38,2 px, die drei Fusszeilen-Links Website/Instagram/YouTube 16,0 px und der zweite Knopf im Kopf („So funktioniert's — in 5 Min.") 25,0 px. Alle unter Marcos 44 px. Am Text, am Ziel und an der Lage aendert sich dabei nichts — nur die Trefferflaeche waechst. / body.kf-start .hero-ctas .btn-secondary, body.kf-start .kf-prod a, body.kf-start .freebie-card a, body.kf-start .marco-link, body.kf-start .footer-social a, body.kf-start .yt-cta a, body.kf-start .freebie-primary .btn-primary { min-height: 44px; display: inline-flex; align-items: center; } footer .footer-links a, .leiter .l-links a, .l-links a, .s-foot-links a, .trust-social a { padding: .3rem 0; } / Links MITTEN im Fliesstext duerfen keine Zeilenhoehe bekommen, sonst reisst der Absatz auseinander. Sie bekommen stattdessen senkrechte Innenabstaende: Die Trefferflaeche waechst auf 44 px, der Zeilenfall bleibt, wie er ist (die Links haben keinen Hintergrund, es ist also auch nichts zu sehen). / / 26.09.2026, NACHMITTAG: dd dazu. Das Merkblatt auf schulen.html setzt seine Angaben in
/
; der Link „Datenschutzerklärung" dort war mit gemessenen 17,6 px die letzte eigene Tippflaeche unter 44 px im Laden. / p a, li a, dd a, .lead a, .s-facts a, .ah-detail a, .schul-tx a, .s-frei a, .pb-gratis a, .m-body a, .faq details a, figcaption a, .s-hinweis a { padding-block: 1.1rem; / kleinste gemessene Zeile 14 px + 2x17,6 px = 49 px / } / ── … ABER NICHT, WENN MEHRERE LINKS IN EINEM ABSATZ STEHEN ────────────── Die Regel darueber macht die Trefferflaeche 44 px hoch, waehrend der Zeilenabstand des Absatzes bei 19,5 px bleibt. Stehen zwei Links in aufeinanderfolgenden Zeilen, ueberlappen sich ihre Kaesten — und der zuletzt gezeichnete gewinnt den Tipp. Gemessen am 26.09. bei 375x812 im Buendel-Band von angebote.html und shop.html („Der Bogen fuer die Stoerung … : A + B + C."): Linkhoehen 71/71/51 px, Ueberlappung 51 px bzw. 31 px. Treffertest mit elementFromPoint: ein Tipp im unteren Fuenftel von „Fuenf Minuten Nachdenken" oeffnete die VERTRETUNGSMAPPE, ein Tipp im oberen Fuenftel von „Sechs Wochen Neustart" oeffnete „Fuenf Minuten Nachdenken". Drei von drei Links fuehrten aufs falsche Produkt. Auf beiden Uebersichtsseiten gleich. Probiert und verworfen (alle gemessen): line-height 2,4 und 3,35 auf dem Absatz. Sie helfen nicht, weil die ersten beiden Links selbst ueber zwei Zeilen laufen — ihr Kasten reicht dann trotzdem in den naechsten Link. Was traegt: Links in solchen Absaetzen werden zu eigenen 44-px-Zeilen. Gemessen danach 44/44/44 px und 19–20 px Abstand dazwischen, jeder Tipp trifft sein eigenes Produkt. Das Band waechst dabei von 300 auf 432 px — und liest sich als das, was es ist: die drei Hefte des Buendels untereinander, mit dem „+" dazwischen. Kein Wort geaendert. `:has(a ~ a)` trifft genau die Absaetze mit mehr als einem Link; ein einzelner Link im Fliesstext behaelt seinen unsichtbaren Kasten. / p:has(a ~ a) a, li:has(a ~ a) a { display: block; width: fit-content; max-width: 100%; padding-block: 0; min-height: 44px; line-height: 44px; } / ⚠ HIER ABSICHTLICH KEINE REGEL FUER DAS DIGISTORE-BAND. Die vier Pflicht-Links im unteren Band (Impressum · AGB · Datenschutz · Kontakt) sind Digistores eigenes Markup und mit gemessenen 11,2 px Hoehe die einzigen Tippflaechen der Shop-Seiten, die Marcos 44-px-Regel reissen. Am 26.09. probiert und VERWORFEN: `[class="ds24b-badge"] a{padding-block: .35rem}` plus `span{line-height:1.8}` brachte die Links auf 29 px — machte aber das feste Band von 54 auf 96 px hoch. Gemessen sank die nutzbare Bildschirmhoehe damit auf jeder der 13 Seiten von 758 auf 716 px, also 42 px dauerhaft weg, und der Kaufknopf verlor genau die Luft, die dieser Umbau ihm verschafft hat. Das ist der schlechtere Tausch. 44 px sind in einem 54 px hohen Band mit ZWEI Link-Zeilen nicht zu erreichen, ohne das Band zu verdoppeln. Der saubere Weg ist Digistores Fusszeilen-Variante (footer-layout) statt des klebenden Badges — das ist eine Entscheidung fuer Marco, keine CSS-Frage. Bis dahin bleibt das Badge unberuehrt, wie von Digistore verlangt. / .hamburger { width: 44px; height: 44px; align-items: center; justify-content: center; } summary, .modul summary, .faq summary, .kf-falt > summary { min-height: 44px; } .modul, .faq details { padding: .5rem 1.1rem; } } /* ── 12) Die Vertrauenszeile am Kaufknopf ─────────────────────────────────── Marco am 26.09.: „Vertrauenszeile direkt am Knopf — einmal zahlen, kein Abo, sofort per Mail, Rechnung mit MwSt., 14 Tage Widerrufsrecht. Das steht heute ganz oben auf angebote.html, aber nicht dort, wo entschieden wird." Die fuenf Zusagen stehen jetzt als Einheit um den Knopf der Kauf-Karte: .pb-preis „15 € einmalig · kein Abo" (eine Zeile darueber) [Kaufknopf] .pb-vertrauen „Sofort per E-Mail · Rechnung mit MwSt. · 14 Tage Widerrufsrecht" (direkt darunter) Kein Wort ist neu: der Wortlaut kommt aus .pb-zahlung und .pb-widerruf der Kaufbox unter #kaufen, wo die vollstaendigen Saetze unveraendert stehen bleiben — das ist der Text, den Digistore geprueft hat. flex:1 0 100% ist noetig, weil .preisbox.kompakt am Desktop eine umbrechende Flex-Reihe ist (Textspalte | Knopf): ohne das stellte sich die Zeile als drittes Kind NEBEN den Knopf. Auf dem Handy ist die Karte eine Spalte, dort traegt die Regel nichts bei — die Handy-Masse stehen in Abschnitt 5. / .pb-vertrauen { font-size: .82rem; line-height: 1.5; color: var(--gray, #6b7280); } .preisbox.kompakt .pb-vertrauen { flex: 1 0 100%; margin-top: .5rem; } / Dasselbe im Buendel-Band von angebote.html und shop.html: dort ist der Grund derselbe (der Knopf fuehrt direkt zur Kasse), nur der Untergrund ist das dunkelblaue Band — die graue Schrift waere darauf nicht zu lesen. / .pb .pb-vertrauen { margin-top: .5rem; font-size: .72rem; line-height: 1.4; color: #b9caf5; } / ── 13) Ein Weg pro Seite ────────────────────────────────────────────────── Marco am 26.09.: „Heute stehen auf manchen Seiten zwei konkurrierende Knoepfe („Was drinsteckt" und „Kaufen"). Einer fuehrt, einer folgt." Auf dem Handy ist das seit dem ersten Durchgang geloest: sobald die Kauf-Karte unter dem Hero steht, blendet Abschnitt 4 die ganze Hero-Zeile (Preis + „Was drinsteckt →") aus — dort bleibt EIN Preis und EIN Knopf. Am Desktop standen beide weiter nebeneinander, und zwar in genau derselben Farbe: .k-hero-cta und .pb-btn sind beide voll ausgefuellt blau. Zwei gleich laute Knoepfe auf einem Bild, von denen nur einer zur Kasse fuehrt. „Was drinsteckt →" ist ein Sprunganker auf #blick — er FOLGT. Also bekommt er die Form eines zweiten Wegs: Umrandung statt Flaeche, gleiche Groesse, gleiche Trefferflaeche. Der Kaufknopf bleibt der einzige gefuellte. Unter 760 px greift die Regel bewusst nicht: dort ist die Zeile ohnehin weg. */ @media (min-width: 761px) { .k-hero-cta { background: transparent; color: var(--blue, #1e5bbd); box-shadow: inset 0 0 0 2px currentColor; } .k-hero-cta:hover { background: var(--blue-light, #eef3fc); color: var(--blue-hover, #17489a); } }