/* ════════════════════════════════════════════════════════════════ PRODUKTSEITE V2 · Seitendefinition eingefroren 2026-09-06 Die Bauteil-Schicht für die neuen Produktseiten-Texte („Website- Ableitung V2"). Setzt auf der bestehenden Kette auf und ändert nichts an ihr — Ladereihenfolge: style.css · aisq3 · aisq4 · aisq5 · aisq6 · aisq-motion · aisq-aufklapper · produktseite-v2 ← diese Datei, immer zuletzt Was hier NICHT drinsteht: die Aufklapper selbst. Die liegen in css/aisq-aufklapper.css, weil sie auch außerhalb der Produktseiten gelten. Diese Datei enthält nur, was die Sektionen der V2-Ableitung zusätzlich brauchen. ──────────────────────────────────────────────────────────────── WARUM SO VIELE DOPPELTE KLASSEN UND LANGE SELEKTOREN Die bestehende Kette ist über sechs Dateien gewachsen und setzt viele Werte mit Spezifität (0,2,1) bis (0,3,1) — eine einfache Klasse kommt dagegen nicht durch. Jede Stelle, an der hier ein längerer Selektor steht, hat einen konkreten Gegner. Der ist jeweils im Kommentar genannt. Selektoren NICHT kürzen, ohne das im Browser gegenzuprüfen. ════════════════════════════════════════════════════════════════ */ /* ══ 1 · HERO ═════════════════════════════════════════════════════ Die Eckdaten stehen direkt unter dem Produktnamen, nicht mehr neben dem Button. Gegner: .aisq4 .aq-hero__meta (55 % Deckkraft) und .aisq6--j (11,2px) — deshalb die doppelte Klasse am . */ .aisq4.aisq6--j .aq-hero__meta{ font-size:var(--fz-micro); letter-spacing:.14em; font-weight:600; color:var(--yellow); } /* Der Produktname steht auf EINER Zeile — er ist ein Name, kein Satz. Bei der bisherigen Laufweite (-.01em) passt er in der 600px-Hero-Spalte um wenige Pixel nicht: „Beyond Prompting." bricht in beiden Engines auf zwei Zeilen, „Führungs-Mindset." nur in WebKit (dort 603px gegen 600px, Bruch am Bindestrich). Bei 1440px gemessen, alle vier Produkte × beide Engines: ab -.018em sind alle einzeilig und identisch; kleinere Breiten und AI Kickstart ändern sich dabei nicht. Gegner: .aq h1.aq-product (aisq3:358). */ .aq h1.aq-product{letter-spacing:-.018em;} /* ══ 2 · ERGEBNISSE · Haken-Liste ═════════════════════════════════ Gelb auf Papier trägt nicht (#EFF746 auf #FBFAF9 ≈ 1,1:1). Auf der Startseite steht derselbe Haken auf blauem Grund — hier umgekehrt: Haken in Blau, darunter ein gelber Strich als Marke. */ .aq-out-list--check{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:13px;} .aq-out-list--check li{ display:flex; gap:14px; align-items:flex-start; padding-left:0; font-weight:600; color:var(--ink); } .aq-out-list--check li::before{display:none;} .aq-out-list--check .aq-hk{ flex:0 0 1.7em; color:var(--blue); position:relative; font-size:1.513em; line-height:1; margin-top:.05em; } .aq-out-list--check .aq-hk::after{ content:""; position:absolute; left:.04em; right:.30em; bottom:-.02em; height:.17em; background:var(--yellow); z-index:-1; } /* Gegner: .aisq6--j .aq-out-list li (0,2,1) hält die Liste sonst auf 15px/1.4 — sie ist aber Hauptinhalt und gehört in den Fließtext-Rhythmus. */ .aisq6 .aq-out-list.aq-out-list--check li{font-size:var(--fz-body); line-height:1.6;} /* Blaues Zitat. Gegner: .aisq6 .aq-split__body p (0,2,1, graphite) — .aisq5 .aq-out-quote setzt korrekt weiß auf blau, kommt aber im .aq-split__body nicht durch. */ .aisq6 .aq-split__body p.aq-out-quote{ color:#fff; font-size:clamp(1.19rem, 1.9vw, 1.47rem); line-height:1.42; } /* ══ 3 · SCHRITT-FOLGE (Ablauf, Unterlagen) ═══════════════════════ Grammatik der Fakten-Tabelle, nur mit Fließtext: Mono-Label links, Inhalt rechts, Haarlinie dazwischen. Kein Kasten im Kasten. */ .aq-ablauf{display:grid; gap:0; margin:0;} .aq-ablauf > div{ display:grid; grid-template-columns:150px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid rgba(26,26,26,.14); } .aq-ablauf > div:last-child{border-bottom:0; padding-bottom:2px;} .aq-ablauf dt{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); padding-top:4px; } .aq-ablauf dd{margin:0; line-height:1.5; max-width:62ch; font-size:var(--fz-body-s);} .aq-ablauf dd strong{display:block; margin-bottom:2px;} /* Fakten-Tabelle im getönten Aufklapper — Trennlinien etwas kräftiger */ .aq-details--sektion .aq-facts > div{border-bottom-color:rgba(26,26,26,.16);} .aq-details--sektion .aq-facts > div:last-child{border-bottom:0;} /* ══ 4 · QUELLENANGABEN ═══════════════════════════════════════════ Laufen im Fließtext mit, statt einen eigenen Absatz zu bilden — sie hängen an dem Absatz, den sie belegen. nowrap hält die Basisangabe („n=550 Erwerbstätige") zusammen. Unterhalb von 640px muss nowrap wieder weg: Dort ist die Spalte schmaler als die Quellenzeile, und die unumbrechbare Zeile schiebt die ganze Sektion über den Bildschirmrand (gemessen 626px Dokumentbreite bei 360px Viewport). Umgebrochen steht sie dort in zwei Zeilen — unschön, aber lesbar; die Seite scrollt dafür nicht mehr seitwärts. */ .aq-quelle{ font-family:var(--font-mono); font-size:var(--fz-eyebrow); font-weight:400; letter-spacing:.1em; color:var(--silver); line-height:1.6; white-space:nowrap; } /* ══ 5 · ARGUMENT-KASTEN (Entscheider · Klartext) ═════════════════ */ .aq-ent{display:grid; gap:18px; margin:0;} /* Entscheider: Plus-Zeichen wie auf der Startseite (.sta-eq__op), aber kräftiger und auf blauem Grund — im Kasten trägt Gelb auf Grau nicht. Darunter ein gelber Punkt, dieselbe Paarung wie bei den Haken. */ .aq-entscheider .aq-ent{gap:15px;} .aq-entscheider .aq-ent > div{ display:flex; gap:14px; align-items:flex-start; padding-left:0; border-left:0; } .aq-entscheider .aq-ent > div > p{ margin:0; font-size:var(--fz-body); line-height:1.5; color:var(--graphite); } .aq-entscheider .aq-ent > div > p > strong{color:var(--ink);} .aq-ent .aq-op{ position:relative; flex:0 0 26px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--font-mono); font-size:1.15rem; line-height:1; -webkit-text-stroke:1.1px currentColor; margin-top:1px; } .aq-ent .aq-op::after{ content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; background:var(--yellow); } /* Klartext nutzt dieselbe .aq-ent-Klasse, behält aber die gelbe Kante — dort sind es Zusagen, keine belegten Argumente. */ .aq-risiko .aq-ent > div{ padding-left:18px; border-left:2px solid var(--yellow); font-size:var(--fz-body); line-height:1.6; color:var(--graphite); } .aq-risiko .aq-ent > div > strong{color:var(--ink);} /* Die Kopfzeile jedes Arguments steht auf einer eigenen Zeile — sonst laeuft „Kein Tool-Training, kein Zertifikat." in den Fliesstext und die vier Zusagen sind beim Ueberfliegen nicht mehr auseinanderzuhalten. */ .aq-ent strong{display:block; margin-bottom:2px;} /* ══ 6 · PASSUNGS-KASTEN ══════════════════════════════════════════ Beide Listen in EINER Box, im Stil der „Eher nichts für Dich"-Box, aber leiser. Gegner: .aisq4--b .aq-wen-col (0,2,0) setzt padding:28px und harten Schatten, .aisq4--b .aq-wen-col .aq-h3 (0,3,0) setzt Flecha in 22px — beides braucht die doppelte Klasse. */ .aq-wen-col.aq-passung{ max-width:62ch; padding:22px; border-width:1px; border-color:rgba(26,26,26,.18); box-shadow:none; background:var(--aq-acc-grau); } .aq-wen-col.aq-passung .aq-h3{ font-family:var(--font-mono); font-size:var(--fz-micro); font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); margin:0 0 9px; line-height:1.6; } .aq-wen-col.aq-passung ul{margin:0; padding:0; list-style:none; display:grid; gap:5px;} .aq-wen-col.aq-passung li{ font-size:var(--fz-body); line-height:1.4; color:var(--graphite); display:flex; gap:12px; padding-left:0; } /* position:static MUSS gesetzt werden: .aq-wen-col--no li::before (aisq3:129) positioniert ein „✕" absolut auf left:0 — ohne Rücknahme sitzt der Punkt auf dem ersten Buchstaben statt davor. */ .aq-wen-col.aq-passung li::before{ content:""; position:static; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--blue); align-self:flex-start; margin-top:.55em; } .aq-wen-col.aq-passung ul + .aq-h3{margin-top:15px;} /* Steckt der Kasten IM Aufklapper, entfallen Rahmen und Grund — der Körper ist schon abgesetzt, sonst Kasten im Kasten. */ .aq-details__body .aq-wen-col.aq-passung{ border:0; background:transparent; padding:0; max-width:none; } /* ══ 7 · LISTEN IN AUFKLAPPER-KÖRPERN ═════════════════════════════ Der Bestand legt ein blaues Quadrat an und schaltet es auf display:none. Statt eines Glyphs („·" ist winzig und sitzt je nach Schnitt anders) eine gezeichnete Scheibe — als FLEX-Element, nicht absolut positioniert: die

sind display:flex und haben eigene Polsterung oben, absolut stünde der Punkt darüber statt daneben. */ .aq-details__body .aq-out-list{ list-style:none; margin:6px 0 14px; padding:0; display:grid; gap:5px; } .aq-details__body .aq-out-list li{ padding-left:0; gap:12px; align-items:baseline; } .aq-details__body .aq-out-list li::before{ content:""; position:static; display:block; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--blue); align-self:flex-start; margin-top:.58em; } .aq-details__body .aq-out-list + p{margin-top:16px;} /* Dasselbe nach einer Schritt-Folge — sonst klebt der Nachsatz an der letzten Tabellenzeile. */ .aq-details__body .aq-ablauf + p{margin-top:16px;} /* Untergeordnete Beschriftung im Aufklapper — dieselbe Kategorie wie im Kasten darüber, aber klar eine Ebene tiefer. */ .aq-sublabel{ font-family:var(--font-mono); font-size:var(--fz-micro); font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); margin:0 0 10px; } .aq-details__body .aq-out-list + .aq-sublabel{margin-top:22px;} /* ══ 8 · ABSTÄNDE ═════════════════════════════════════════════════ Die Kästen kamen mit fünf verschiedenen Polsterungen (18/20, 28, 22, 30/34, 0/16). Eigene Kästen laufen auf 22px, dem Maß des Aufklapper- Körpers. Preis-Box (30/34) und FAQ-Karte (0/16) sind geteilte Live-Bauteile und bleiben unangetastet. Senkrecht: 30px wenn Fließtext davorsteht (in aisq-aufklapper), 10px zwischen gleichrangigen Klappen, 24px vor einem Kasten. */ .aq-wen-col.aq-ent{padding:22px;} p + .aq-wen-col, ul + .aq-wen-col, dl + .aq-wen-col{margin-top:24px;} /* ══ 9 · SCHRIFT-RHYTHMUS ═════════════════════════════════════════ 17px kam mit sechs verschiedenen Zeilenabständen vor, 15px mit vier. Jetzt drei Rhythmen mit je einer Aufgabe, für beide Größen gleich: 1.30 Bedienelemente (einzeilig) 1.50 Tabellenzeilen 1.60 Fließtext */ .aisq6 .aq-split__body p, .aq-ent > div, .aq-wege p{line-height:1.6;} .aq-details__body p, .aq-details__body li, .aisq6 .aq-details__body .aq-out-list li{line-height:1.6;} .aq-facts dd, .aq-ablauf dd{line-height:1.5;} .aq-faq .aq-details.aq-details--faq > summary, .aq-details.aq-details--sektion > summary{line-height:1.3;} .aq-wege p, .aq-weg p{line-height:1.6;} /* Preis 40 % kleiner als der Token --fz-title (45,6 → 27,4px) */ .aisq6--j .aq-preis-amount{font-size:calc(var(--fz-title) * .6);} @media (max-width:760px){ .aq-ablauf > div{grid-template-columns:1fr; gap:3px;} } @media (max-width:640px){ .aq-quelle{white-space:normal;} }