als eigenständige Kinder ohne Textwrapper vorkommen (Vertrag §4). Feste 40-px-Spalte auch ohne Symbol (Preise 03 „Vertrag"): Zeilen bleiben untereinander ausgerichtet */ .fd-carousel--steps .fd-tcard--step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-3); row-gap: 0; align-items: start; } .fd-carousel--steps .fd-tcard--step > .fd-tcard__media { grid-column: 1; grid-row: 1 / span 2; align-self: start; } /* Symbol auf Höhe des Titels (Koordinator M3) */ .fd-carousel--steps .fd-tcard--step > .fd-step__n { grid-column: 1; grid-row: 1 / span 2; align-self: start; justify-self: center; } .fd-carousel--steps .fd-tcard--step > b { grid-column: 2; } .fd-carousel--steps .fd-tcard--step > p { grid-column: 2; } /* Personenkarten: Zeile bleibt Flex (Vorgabe der Karte, Name+Rolle stecken schon in .fd-tcard__body), nur die Innenabstände von Karte und Knopf auf Zeilenmaß bringen (Klick-Symbol bleibt rechts wie heute) */ .fd-carousel:has(.fd-carousel__track .fd-tcard__body) .fd-tcard--tap { padding: var(--space-3) 0; } /* Zeilenluft, Rolle stößt nicht an die Trennlinie (Koordinator M3) */ .fd-carousel:has(.fd-carousel__track .fd-tcard__body) .fd-tcard__btn { padding: 0; gap: var(--space-3); } } /* ══ 7c Fix P6 (28.09., Tablet 600 bis 860, M3-1 bis M3-2) ═══════════════════ Karussell-Peek: die Spur füllte bisher immer die ganze Spalte, ihre Padding-Formel (50% minus halbe Handy-Breite) rechnete also gegen die Spaltenbreite, nicht gegen die Handy-Breite (Zirkular-Hinweis Abschnitt 5). Bei 320 bis 402 ist die Spalte kaum breiter als das Handy, der Anschnitt fiel nicht auf. Ab 600 wird die Spalte deutlich breiter als das auf 280 px gedeckelte Handy, die Padding-Formel lässt das nächste Handy an der Inhaltskante hereinlugen (R-D). Jetzt bekommt der Wrapper selbst die Handy-Breite als Höchstmaß und zentriert sich auf der Spaltenachse (M1): die Padding-Formel der Spur löst sich dabei auf 0 auf, die Spur zeigt nur noch das eine Handy, das nächste liegt vollständig hinter der Wrapper-Kante, kein Anschnitt mehr. Nur unter 861, die Handy-Reihe ab 861 (Abschnitt 13) bleibt unberührt. Größeres Handy auf Tablet geprüft (Auftrag: 300 bis 320 statt 280 px, keine klebende H2-Platte vor 861, S66 gilt erst dort, Höhe wäre also unkritisch): ohne eigenen 600er-Breakpoint nicht sauber lösbar, R-B erlaubt nur 861/1048/1240 (Lint H-04), und der Deckel in --fd-phone-w (Zeile 30) wirkt durchgehend von 320 bis 860. Ihn pauschal auf 320 anzuheben würde auch 375 und 402 vergrößern (307 statt 280 px) und damit die abgenommene Handy-Größe dort verschieben (E84/E90, S71). Bleibt bei 280 px, keine Einzellösung für eine einzelne Breite ohne Beleg-Breakpoint. */ @media (max-width: 860.98px) { .fd-ch__medien > .fd-carousel:has(.fd-phones) { max-width: var(--fd-phone-w); margin-inline: auto; } } /* Lesemaß (M3-2): das 34-em-Cap aus R-A galt bisher nur ab 861. Bei 320 bis 402 unterschreitet die Spalte das Maß ohnehin, ab 600 nicht mehr, Fließtext in „wide"-Kapiteln lief fast über die volle Spaltenbreite. Gilt nur für Absätze (.fd-body), nicht für Kacheln, Handys oder Formulare, dieselbe Klasse wie ab 861. */ @media (max-width: 860.98px) { .fd-ch .fd-body { max-width: var(--fd-measure); } } /* ══ 7b Kapitel-Muster (Jan, 24.09.) ═════════════════════════════════════════ Jedes Kapitel ist gleich gebaut: Kopf (Seite, Tracker, H2), dann .fd-ch__body mit .fd-ch__text (Textbausteine) und .fd-ch__medien (Medien: Bild = figure.fd-crop[data-format], Widget, Karten). data-muster am Kapitel wählt die Anordnung, die Seite wählt nur Texte und Bilder. text nur Text 0 Medien text-medium Text links, Medium rechts (ab 1048) 1 Medium medium-text Medium links, Text rechts (ab 1048) 1 Medium text-medium-unten kurzer Text, Medium darunter 1 Medium text-breit Text, Medium über die ganze Breite 1 Medium text-2medien Text, zwei Medien nebeneinander darunter 2 Medien text-2medien-seite Text links, zwei Medien rechts (ab 1048) 2 Medien text-galerie Text, drei oder vier Medien als Reihe 3 bis 4 Medien text-karten Text, Karten-Reihe (Schritte, Nachweise) 1 Karussell Mobil gilt für alle: Text zuerst, Medien darunter (Lesereihenfolge = DOM-Reihenfolge). Optional data-flaeche="sand" legt den Körper in eine Sand-Insel, data-split="stack" stapelt ein Zweispalten-Muster auch ab 1048 (A2). */ .fd-ch__body { display: block; } .fd-ch__text > :first-child { margin-top: 0; } .fd-ch__text > * + * { margin-top: var(--fd-space-content); } .fd-ch__text > .fd-body + .fd-body { margin-top: var(--space-4); } .fd-ch__text > .fd-h3 { margin-bottom: 0; } .fd-ch__text > .fd-h3 + * { margin-top: var(--space-2); } .fd-ch__text > .fd-subnote, .fd-ch__text > .fd-demodata { margin-top: var(--space-3); } .fd-ch__medien { display: grid; gap: var(--space-5); justify-items: center; margin-top: var(--fd-space-content); } /* M1 (E92, 27.09.): Medien mittig auf der Achse der Inhaltsspalte */ .fd-ch__body > .fd-ch__medien:first-child { margin-top: 0; } .fd-ch__medien > * { margin: 0; min-width: 0; } .fd-ch__medien > .fd-crop { width: 100%; } .fd-ch[data-muster="text-2medien"] .fd-ch__medien, .fd-ch[data-muster="text-2medien-seite"] .fd-ch__medien, .fd-ch[data-muster="text-galerie"] .fd-ch__medien { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } /* E69 (27.09.): der Faden ist die Grenze. Mobil beginnt alles an der Inhaltskante --fd-inset, Karussells schneiden dort ab, nicht am Bildschirmrand */ .fd-ch[data-muster="text-breit"] .fd-ch__medien { margin-left: 0; margin-right: 0; position: relative; z-index: 4; } .fd-ch[data-muster="text-karten"] .fd-ch__medien { display: block; justify-items: stretch; margin-left: 0; margin-right: 0; } /* M2 (E92, 27.09.), abgelöst durch den Karussell-Standard in Abschnitt 7 (Fix P2, 28.09.): die dort geltende Regel (.fd-carousel .fd-tcard, .fd-carousel__track) deckt jedes Karussell in jedem Kapitel gleich ab, keine eigene Regel hier nötig. */ .fd-ch[data-flaeche="sand"] .fd-ch__body { padding: var(--space-8) var(--space-5); background: var(--surface-fill); border-radius: var(--radius-xl); } /* Fix P6 (28.09., M3-4, Kontakt-Formular auf Tablet): „Fläche folgt dem Inhalt" galt bisher nur ab 861 (Abschnitt 13). Unter 861 blieb die Sand-Insel immer spaltenbreit, das Formular (.ck-form-wrap, Lesemaß 34em) stand darin mittig mit viel Luft auf beiden Seiten, wirkte gestreckt. Dieselbe Regel jetzt auch unter 861: die Fläche schrumpft auf die Formularbreite, .fd-ch__body ist ein normaler Block ohne Auto-Margin, sitzt darum bündig an der Textkante, kein neues Muster. Bei 320 bis 402 ohne sichtbaren Unterschied, dort füllt der Inhalt die Spalte ohnehin aus. */ @media (max-width: 860.98px) { .fd-ch[data-flaeche="sand"]:is([data-muster="text"], [data-muster="text-medium-unten"]) .fd-ch__body { width: fit-content; max-width: 100%; } } /* Nachsatz unter der Sand-Insel (Runde 4, E85): optional, einmal, direkt nach .fd-ch__body, nur mit data-flaeche="sand" (Vertrag §3, Lint V-04g). (0,2,0) schlägt .fd-ch > * + * (S1) */ .fd-ch__body + .fd-ch__nach { margin-top: var(--fd-space-content); } .fd-ch__nach > .fd-h3 { margin: 0; } /* ── Komposition (Runde 4, E88/E92, 27.09., Agent G, G_loesung.md) ── Grundsatz: jedes Kapitel hat eine Achse. Medien stehen mittig auf der Achse der Inhaltsspalte oder bündig an ihrer Außenkante, nie frei in einer halben Spalte. Nebeneinander haben Text und Medium eine gemeinsame Oberkante. Gliederung im Text (optional): .fd-ch__lead (Lesetext) und .fd-ch__begleit (Begleiter des Mediums: Personen, Kacheln, Link-Karten), in dieser Reihenfolge. Mobil: Lead, Begleiter, Medium. Muster medium-mitte (K1): ab 1240 Handy mittig, Lead links, Begleiter rechts. */ .fd-ch__lead > * + * { margin-top: var(--fd-space-content); } .fd-ch__lead > .fd-body + .fd-body { margin-top: var(--space-4); } .fd-ch__lead > .fd-subnote { margin-top: var(--space-3); } .fd-ch__begleit > * { margin-top: 0; } .fd-ch__begleit > * + * { margin-top: var(--space-3); } .fd-ch__begleit > .fd-personas { margin: 0; } .fd-ch__begleit > .fd-wege { margin: 0; } .fd-ch__begleit > .fd-h3 + * { margin-top: var(--space-2); } /* Fix P5 (28.09., Mobil-Audit 260928, Produkt 02 Miriam): mobil steht Miriams Personen-Tag (.fd-who) weit vom Handy weg, das ihren Chat zeigt (Text, Tag, Kacheln „Ein guter Coach…", dann erst das Handy). Das DOM bleibt (Lint V-04c/V-04h fixieren Text vor Medien und Lead vor Begleiter), nur die visuelle Reihenfolge wandert per order: Lead-Absatz, dann .fd-who direkt über dem Handy (gleicher order-Wert wie .fd-ch__medien, Gleichstand löst der DOM zugunsten von .fd-who, S1), danach .fd-ch__begleit. Ab 861 zurück auf die normale Mitte-Komposition (Reset im 861-Block), betrifft nur medium-mitte-Kapitel mit .fd-who (heute: Produkt 02) */ .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__body { display: flex; flex-direction: column; } .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__text, .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__lead { display: contents; } .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-who, .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__medien { order: 2; } .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__begleit { order: 3; } /* ── 7d Problem-Box und Personen mit Problem (E104, 29.09., Startseite 01) ── .fd-problem: Sand-Fläche mit dem Problemsatz in Clash, der Befund (.fd-problem__mark) als Orange-Marker, der einmal einläuft, sobald die Box eingeblendet wird (hängt am vorhandenen Reveal, kein eigener Takt, E83). Daneben der Knopf .fd-info zum Quellen-Sheet. .fd-personas--problem: Personen als Karten auf allen Breiten, je Karte Standardangebot durchgestrichen (.fd-strike) und Notiz (.fd-note). Anordnung data-kopf="breit" an einem text-medium-Kapitel mit Handy: ab 1048 Lead über beide Spalten, darunter Begleiter links, Handy rechts. */ .fd-problem { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-5); background: var(--surface-fill); border-radius: var(--radius-lg); } .fd-problem__satz { margin: 0; font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-lg-size); font-weight: 600; line-height: var(--type-title-lg-lh); color: var(--text-primary); text-wrap: balance; } .fd-problem__mark { padding: 0 .18em; border-radius: var(--radius-sm); color: var(--text-selected); background-color: transparent; background-image: linear-gradient(var(--state-selected), var(--state-selected)); background-repeat: no-repeat; background-size: 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .fd-problem > .fd-info { margin: 0; } /* Agent C 29.09. (E110): Kapitel in zwei Bereiche. Oben „Das Problem“ auf Sand (.fd-problem mit Label .fd-problem__label über dem Satz, in .fd-problem__text), darunter „Die Lösung“ auf Weiß: Label .fd-loesung__label und Einstieg .fd-loesung__einstieg als erste Zeilen von .fd-ch__begleit, danach der Text und die Personenkarten wie bisher. Die Lösungs-Komposition (Begleiter links, Handy rechts, data-kopf="breit") bleibt unverändert. Label und Einstieg sind Bausteine für jedes Kapitel mit Problem und Lösung (Vorbild für die Handy-Kapitel, E111). */ .fd-problem__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .fd-problem__label, .fd-loesung__label { margin: 0; font-size: var(--type-label-lg-size); font-weight: 600; line-height: var(--type-label-lg-lh); color: var(--text-secondary); } .fd-loesung__label { margin-bottom: var(--space-2); } .fd-loesung__einstieg { margin: 0; font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-md-size); font-weight: 600; line-height: var(--type-title-md-lh); color: var(--text-primary); text-wrap: balance; } .fd-ch__begleit > .fd-loesung__label + .fd-loesung__einstieg { margin-top: 0; } .fd-ch__begleit > .fd-loesung__einstieg + .fd-body { margin-top: var(--space-4); } .fd-js .fd-problem__mark { color: var(--text-primary); background-size: 0% 100%; transition: background-size 900ms var(--ease-out) 450ms, color 300ms var(--ease-out) 900ms; } .fd-js .is-visible .fd-problem__mark { color: var(--text-selected); background-size: 100% 100%; } @media (prefers-reduced-motion: reduce) { .fd-js .fd-problem__mark { transition: none; color: var(--text-selected); background-size: 100% 100%; } } .fd-personas--problem { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; background: transparent; border-radius: 0; } .fd-personas--problem .fd-persona { position: relative; justify-content: flex-start; align-items: flex-start; gap: var(--space-3); min-height: 0; padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); text-align: left; color: var(--text-secondary); } .fd-personas--problem .fd-persona:focus { background: var(--surface-card); color: var(--text-secondary); box-shadow: var(--shadow-sm); } .fd-personas--problem .fd-persona:hover { background: var(--surface-card); border-color: var(--brand-primary); color: var(--text-secondary); box-shadow: var(--shadow-md); } .fd-personas--problem .fd-persona:active { background: var(--surface-fill-soft); border-color: var(--brand-active); } .fd-personas--problem .fd-persona[aria-pressed="true"] { background: var(--surface-card); border-color: var(--brand-primary); color: var(--text-secondary); box-shadow: var(--shadow-md); } .fd-personas--problem .fd-persona__av { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--surface-fill); color: var(--text-primary); } /* E124: Espresso */ .fd-personas--problem .fd-persona__av svg { width: 20px; height: 20px; } .fd-personas--problem .fd-persona[aria-pressed="true"] .fd-persona__av { background: var(--surface-fill); color: var(--text-primary); } /* E114 (29.09., Agent A): auch gewählt Sand und Espresso, die Auswahl zeigt der Rand */ .fd-personas--problem .fd-persona[data-track="mental"][aria-pressed="true"] .fd-persona__av { background: var(--surface-fill); color: var(--text-primary); } .fd-personas--problem .fd-persona__txt { align-items: flex-start; gap: 2px; } .fd-personas--problem .fd-persona__txt b { font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-sm-size); line-height: 1.2; color: var(--text-primary); } .fd-personas--problem .fd-persona__txt small { font-size: var(--type-label-sm-size); font-weight: 500; opacity: 1; color: var(--text-secondary); } .fd-persona__problem { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); } .fd-persona__problem .fd-strike { font-size: var(--type-label-md-size); font-weight: 500; color: var(--text-secondary); } .fd-persona__problem .fd-note { font-size: var(--type-title-sm-size); } .fd-ch__begleit > .fd-body + .fd-personas { margin-top: var(--space-5); } @media (min-width: 861px) { .fd-problem { padding: var(--space-8); } .fd-personas--problem .fd-persona { gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4); } .fd-personas--problem .fd-persona__av { width: 56px; height: 56px; } .fd-personas--problem .fd-persona__av svg { width: 28px; height: 28px; } .fd-personas--problem .fd-persona__txt b { font-size: var(--type-title-md-size); } .fd-personas--problem .fd-persona__txt small { font-size: var(--type-body-sm-size); } .fd-persona__problem .fd-note { font-size: var(--type-title-md-size); } } @media (min-width: 1048px) { .fd-problem { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-8); } /* Knopf rechts unten auf Höhe des Befunds, keine leere Hälfte (E88) */ /* Agent C 29.09. (E110): Problemsatz bleibt title-lg (vorher display-md = fast so groß wie der Kapiteltitel), der Titel führt die Hierarchie */ .fd-problem > .fd-info { flex: 0 0 auto; } .fd-problem__mark { display: table; margin-top: var(--space-1); white-space: nowrap; } /* eigene Zeile: erst die Lage, dann der Befund */ } /* Anordnung „Kopf breit“ ab 1048 steht im 1048-Block nach den text-medium-Regeln */ /* ══ 8 Espresso-Band (Modul, höchstens eines, zwischen zwei Kapiteln) ══════════ */ .fd-band { position: relative; padding: var(--space-8) 0; background: var(--surface-inverse); } .fd-band__head { margin: 0 var(--fd-gutter) var(--space-3) var(--fd-inset); font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-body-md-size); font-weight: 600; line-height: var(--type-title-md-lh); color: var(--text-inverse); } /* Chips beginnen an der Inhaltskante und werden dort abgeschnitten, sie kreuzen die Linie nie (R-D, E69) */ /* Band-Chips mobil (Fix P2, K5, 28.09.): keine Reihe mehr, die über den Rand läuft und die letzte Karte halb abschneidet. Chips stehen bündig auf der Inhaltsspalte (wie Hero, Text, Karussell-Karte) untereinander, kompakt (kleiner als die 76-px-Karte ab 861). Kein Wischen mehr nötig, K9 (kein horizontales Wischen als einzige Navigation) greift hier gar nicht erst. */ .fd-band__scroll { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin: 0 var(--fd-gutter) 0 var(--fd-inset); padding: 0; overflow: visible; scroll-snap-type: none; } .fd-band__scroll::-webkit-scrollbar { display: none; } .fd-certchip { display: inline-flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 44px; padding: 0 var(--space-4) 0 var(--space-2); border: 0; border-radius: var(--radius-pill); background: var(--surface-card); font-family: var(--font-sans); font-size: var(--type-label-md-size); font-weight: 700; color: var(--text-primary); white-space: nowrap; cursor: pointer; scroll-snap-align: start; transition: background var(--duration-fast) var(--ease-out); } .fd-certchip:focus { background: var(--surface-card); color: var(--text-primary); box-shadow: none; } .fd-certchip:hover { background: var(--surface-fill); color: var(--text-primary); box-shadow: none; } .fd-certchip:hover .fd-certchip__tap { color: var(--text-link); } .fd-certchip:active { background: var(--surface-marker); color: var(--text-primary); } .fd-certchip img { width: 28px; height: 28px; object-fit: contain; } /* Klick-Hinweis (E55, E83 und E91, Runde 4): Lucide mouse-pointer-click nur am ersten Chip (Seiten-HTML). Tippt von selbst alle 5 s, vom Laden an, ohne Sichtkontakt, ohne Hover, ohne Grenze: reine CSS-Schleife, kein Takt im JS (H-10). Getippt wird in den ersten 680 ms (13,6 %, 2 × --duration-slow), erster Tipp 0,8 s nach dem Laden, kurz Orange über stroke (Ruhewert currentColor, so wirkt die Hover-Farbe weiter). Nur mit JS (.fd-js), ohne JS öffnen die Chips kein Sheet. Ruhe nach dem ersten Öffnen oder Fokus im Band bis zum Neuladen (.is-ruhig aus faden-shared.js, E91 E-1, WCAG 2.2.2). Weniger Bewegung: Abschnitt 14 */ .fd-certchip__tap { display: inline-flex; flex: 0 0 auto; margin-left: auto; color: var(--text-secondary); } .fd-certchip__tap svg { width: 20px; height: 20px; overflow: visible; } .fd-certchip__tap .fd-tap__ray, .fd-tcard__tap .fd-tap__ray { transform-box: view-box; transform-origin: 9px 9px; } .fd-certchip__tap .fd-tap__cur, .fd-tcard__tap .fd-tap__cur { transform-box: view-box; transform-origin: 14px 14px; } .fd-js .fd-certchip__tap .fd-tap__cur { animation: fdTapTaktCur 5s var(--ease-out) .8s infinite both; } .fd-js .fd-certchip__tap .fd-tap__ray { animation: fdTapTaktRay 5s var(--ease-out) .8s infinite both; } .fd-band.is-ruhig .fd-certchip__tap .fd-tap__cur, .fd-band.is-ruhig .fd-certchip__tap .fd-tap__ray { animation: none; } @keyframes fdTapTaktCur { 0%, 13.6%, 100% { transform: none; stroke: currentColor; } 5.4% { transform: translate(-1px, -1px) scale(.86); stroke: var(--brand-primary); } } @keyframes fdTapTaktRay { 0%, 4.8% { opacity: 0; transform: scale(.5); stroke: currentColor; } 5.4% { stroke: var(--brand-primary); } 10.2% { opacity: 1; transform: scale(1.15); } 13.6%, 100% { opacity: 1; transform: none; stroke: currentColor; } } /* Personenkarten (.fd-tcard--tap) tippen weiter beim Überfahren */ .fd-tcard--tap:hover .fd-tap__cur { animation: fdTapCur2 calc(var(--duration-slow) * 2) var(--ease-out) both; } .fd-tcard--tap:hover .fd-tap__ray { animation: fdTapRay2 calc(var(--duration-slow) * 2) var(--ease-out) both; } @keyframes fdTapCur2 { 0%, 100% { transform: none; } 40% { transform: translate(-1px, -1px) scale(.86); } } @keyframes fdTapRay2 { 0%, 35% { opacity: 0; transform: scale(.5); } 75% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } } /* ══ 9 Abschluss (K4) ════════════════════════════════════════════════════════ */ /* Sand-Bühne mit Verlaufskreis aus dem Hero als Klammer (G4 M1, 26.09.) */ /* Abschluss-Kreis mobil (K8, Mobil-Audit 28.09.): groß, ganzzahlig, Ecke rechts unten der Sand-Bühne angeschnitten, wie ab 1048 (E86, E91), statt der alten kleinen 56-px-Scheibe über dem Titel. padding-bottom reserviert den Platz unter Titel und Knopf, damit der Kreis keinen Inhalt deckt (M9 prüft die Überlappung, mindestens 48 px, hier über Zeilenumbruch statt Seitenabstand gelöst). Gilt nur unter 861 (H-04 erlaubt kein eigenes max-width): die alte Scheibe wird für 861 bis 1047 im nächsten Block unten wiederhergestellt, ab 1048 unverändert */ .fd-final { position: relative; isolation: isolate; overflow: hidden; margin: var(--space-10) var(--fd-gutter) var(--space-12); padding: var(--space-10) var(--space-5) calc(var(--fd-final-kreis) - var(--fd-final-aus) + var(--space-4)); background: var(--surface-fill); border-radius: var(--radius-xl); text-align: center; --fd-final-kreis: 200px; --fd-final-aus: var(--space-16); } .fd-final::before { content: ''; position: absolute; right: calc(var(--fd-final-aus) * -1); bottom: calc(var(--fd-final-aus) * -1); width: var(--fd-final-kreis); height: var(--fd-final-kreis); margin: 0; border-radius: var(--radius-pill); background: var(--brand-gradient); } .fd-final .fd-faces img { border-color: var(--surface-fill); } .fd-final > .fd-h2 { font-size: var(--type-title-lg-size); margin-bottom: var(--space-5); } .fd-final__row { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .fd-final__row > .fd-btn { width: 100%; } .fd-final__team { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .fd-final__team p { margin: 0; font-size: var(--type-label-lg-size); line-height: var(--type-body-sm-lh); color: var(--text-primary); } .fd-final__team a { color: var(--text-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .fd-final__team a:hover, .fd-final__team a:active { color: var(--text-link-hover); } .fd-faces { display: flex; flex: 0 0 auto; } .fd-faces img { width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover; border: 2px solid var(--surface-page); box-shadow: 0 0 0 1px var(--border-default); } .fd-faces img + img { margin-left: -8px; } /* ══ 10 Häufige Fragen (Modul, nach dem Abschluss, E4) ══════════════════════════ Gleiche Kanten wie der Abschluss, damit der Übergang ohne Sprung läuft. */ .fd-faqsec { padding: 0 var(--fd-gutter) var(--space-10); } .fd-faqsec > .fd-h2 { font-size: var(--type-title-lg-size); margin-bottom: var(--fd-space-heading); } .fd-faq { display: flex; flex-direction: column; margin: var(--space-6) 0 0; border-top: 1px solid var(--surface-fill); } .fd-faq details, details.fd-auf { border-bottom: 1px solid var(--surface-fill); } .fd-faq summary, .fd-auf > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: var(--space-3) 0; list-style: none; font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-sm-size); font-weight: 600; line-height: var(--type-title-sm-lh); color: var(--text-primary); cursor: pointer; text-wrap: pretty; } .fd-faq summary::-webkit-details-marker, .fd-auf > summary::-webkit-details-marker { display: none; } .fd-faq summary:hover, .fd-faq details[open] summary, .fd-auf > summary:hover, .fd-auf[open] > summary { color: var(--text-link); } .fd-faq summary:active, .fd-auf > summary:active { color: var(--brand-active); } .fd-faq summary svg, .fd-auf > summary svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--text-secondary); transition: transform var(--duration-base) var(--ease-out); } .fd-faq summary:hover svg, .fd-faq details[open] summary svg, .fd-auf > summary:hover svg, .fd-auf[open] > summary svg { color: var(--text-link); } .fd-faq__a a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; } .fd-faq__a a:hover, .fd-faq__a a:active { color: var(--text-link-hover); } .fd-faq details[open] summary svg, .fd-auf[open] > summary svg { transform: rotate(180deg); } .fd-faq__a { padding: 0 0 var(--space-5); } .fd-faq__a p { margin: 0 0 var(--space-3); font-size: var(--type-label-lg-size); line-height: var(--type-body-lg-lh); color: var(--text-primary); text-wrap: pretty; } .fd-faq__a p:last-child { margin-bottom: 0; } /* ── Agent E 29.09. (E118) FAQ-Abschnitt als eigener Bereich ── Eine lange Linie über die Seite setzt „Häufige Fragen“ vom Abschluss ab, eine Regel in der Hülle für jede Seite mit .fd-faqsec. Gutter bis Gutter (ab 861 Rand bis Rand der Seitenspalte), dunkler als alle anderen Linien (Sand 400 statt Sand 200/100) und waagerecht: der Faden (senkrecht, 2 px, endet vor dem Abschluss) und die Kapitel-Linien (Sand 100) sehen anders aus, die Linie liegt hinter dem Abschluss-Block und läuft nirgends über den Faden (E69). Ab 861 in Abschnitt 13 (Desktop) */ .fd-faqsec { position: relative; padding-top: var(--space-10); } .fd-faqsec::before { content: ''; position: absolute; top: 0; left: var(--fd-gutter); right: var(--fd-gutter); height: 1px; background: var(--border-strong); } /* ── Agent E 29.09. (E117) Baustein Unterlagen: kurze Reihe Chips statt erklärender Karten ── Vier Chips (Angebot, AVV, Nutzungsbedingungen, Datenschutzerklärung) führen zu /kontakt/#unterlagen. Ein Chip ist ein kleiner Link mit Rand wie der Geist-Knopf (Zustände Orange und Espresso nach E78 wie .fd-btn--ghost), Symbol Lucide file-text links. Bewusst kein .fd-btn: der Lint (V-14) zählt jedes .fd-btn als CTA. Steht in .fd-ch__text unter dem Satz (Preise 03, Produkt 05), dieselbe Reihe überall */ .fd-docs { display: flex; flex-wrap: wrap; gap: var(--space-2); } .fd-docs__chip, .fd-docs__chip:visited, .fd-docs__chip:focus { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border: 1.5px solid var(--border-default); border-radius: var(--radius-pill); background: transparent; font-family: var(--font-sans); font-size: var(--type-label-md-size); font-weight: 700; line-height: 1.2; color: var(--text-primary); text-decoration: none; box-shadow: none; transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); } .fd-docs__chip:hover { background: var(--surface-fill-soft); border-color: var(--brand-primary); color: var(--text-link); } .fd-docs__chip:active { background: var(--surface-marker); border-color: var(--brand-active); color: var(--brand-active); } .fd-docs__chip svg { width: 18px; height: 18px; flex: 0 0 auto; } .fd-ch__text > .fd-docs { margin-top: var(--space-5); } /* ══ 10b FAQ-Navigator (Modul, nur FAQ-Seite, an Stelle der Trust-Leiste, E87, E89, 27.09.2026) ══════════ Suche und zehn Kacheln über den FAQ-Kapiteln. Ohne JS Inhaltsverzeichnis, mit JS Tabs (faden-shared.js, Modul FAQ-Navigator). Mobil 2 Spalten ohne Bild und Nummer, ab 861 5 × 2 mit Bild 3:2 und Nummer auf dem Bild. Zustände nach E78 (Klickflächen). Konzept und Maße: 01_Regeln/_audit/feedback-260927b/H_loesung.md. */ .fd-faqnav { padding: 0 var(--fd-gutter) var(--fd-trust-space-after); } /* Suche: nur mit JS sichtbar (hidden im HTML, die Hülle nimmt es weg) */ .fd-faqnav__suche { margin: 0 0 var(--space-5); } .fd-faqnav__label { display: block; margin: 0 0 var(--space-2); font-size: var(--type-label-lg-size); font-weight: 600; line-height: var(--type-label-lg-lh); color: var(--text-primary); } .fd-faqnav__feld { position: relative; } .fd-faqnav__feld > svg { position: absolute; left: var(--space-3); top: 14px; width: 20px; height: 20px; color: var(--text-secondary); pointer-events: none; } .fd-faqnav__input, .fd-faqnav__input:focus { display: block; width: 100%; height: 48px; margin: 0; padding: 0 var(--space-12) 0 var(--space-10); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); box-shadow: none; -webkit-appearance: none; appearance: none; } /* W-01 (28.09., Taste-Audit): Kadence bringt einen eigenen Suchfeld-Stil mit, der den Innenabstand links auf 8px zurücksetzt und die Lupe (12 bis 32px) über den Platzhaltertext legt. Höhere Spezifität plus !important sichert den Abstand ab (wie W18/S68). */ .fd-faqnav__feld .fd-faqnav__input, .fd-faqnav__feld .fd-faqnav__input:focus { padding-left: var(--space-10) !important; } .fd-faqnav__input:hover { border-color: var(--brand-primary); } .fd-faqnav__input::placeholder { color: var(--text-secondary); opacity: 1; } .fd-faqnav__input::-webkit-search-cancel-button, .fd-faqnav__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } /* Leeren: randloses Symbol (Kette E78), 44 px im 48-px-Feld */ .fd-faqnav__leeren, .fd-faqnav__leeren:focus { position: absolute; right: 2px; top: 2px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); box-shadow: none; cursor: pointer; } .fd-faqnav__leeren:hover { background: var(--surface-fill-soft); color: var(--text-link); box-shadow: none; } .fd-faqnav__leeren:active { background: var(--surface-marker); color: var(--brand-active); box-shadow: none; } .fd-faqnav__leeren svg { width: 20px; height: 20px; } /* Trefferzahl (role=status, bleibt im DOM, damit Screenreader die Änderung hören) */ .fd-faqnav__status { margin: var(--space-3) 0 0; font-size: var(--type-label-md-size); font-weight: 600; line-height: var(--type-label-md-lh); color: var(--text-secondary); } .fd-faqnav__status:empty { margin: 0; } .fd-faqnav__suche > .fd-link { margin-top: var(--space-2); } /* Trefferliste: Gruppe, Frage, Auszug aus der Antwort mit Markierung (Sand 200 = „markieren“ im DS) */ .fd-faqnav__treffer { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; } .fd-faqhit, .fd-faqhit:visited, .fd-faqhit:focus { display: flex; flex-direction: column; gap: var(--space-1); min-height: 44px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-primary); text-decoration: none; box-shadow: none; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .fd-faqhit:hover { background: var(--surface-fill-soft); border-color: var(--brand-primary); color: var(--text-primary); } .fd-faqhit:hover .fd-faqhit__frage { color: var(--text-link); } .fd-faqhit:active { background: var(--surface-marker); border-color: var(--brand-active); color: var(--text-primary); } .fd-faqhit:active .fd-faqhit__frage { color: var(--brand-active); } .fd-faqhit__gruppe { font-size: var(--type-label-sm-size); font-weight: 700; line-height: var(--type-label-sm-lh); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } .fd-faqhit__frage { font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-sm-size); font-weight: 600; line-height: var(--type-title-sm-lh); text-wrap: pretty; } .fd-faqhit__auszug { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--text-secondary); } .fd-faqhit mark { background: var(--surface-marker); color: var(--text-primary); } /* Kacheln: mobil 2 Spalten, nur der Name, 48 px hoch (M5). Wörter brechen nur am Leerzeichen und am weichen Trennstrich (Privatpersonen) */ .fd-faqnav__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .fd-faqnav__kacheln > li { display: flex; min-width: 0; } .fd-faqtile, .fd-faqtile:visited, .fd-faqtile:focus { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 48px; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-primary); text-decoration: none; box-shadow: none; overflow: hidden; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .fd-faqtile::after { content: ''; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; pointer-events: none; } .fd-faqtile__bild { display: none; } .fd-faqtile__zeile { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-2) var(--space-3); } .fd-faqtile__num { display: none; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border: 1.5px solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-page); font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-label-sm-size); font-weight: 700; color: var(--text-primary); transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } /* E124: Ziffer Espresso */ .fd-faqtile__name { min-width: 0; font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-label-lg-size); font-weight: 600; line-height: var(--type-title-sm-lh); overflow-wrap: normal; hyphens: manual; text-wrap: balance; } .fd-faqtile:hover { background: var(--surface-fill-soft); border-color: var(--brand-primary); color: var(--text-link); } .fd-faqtile:active { background: var(--surface-marker); border-color: var(--brand-active); color: var(--brand-active); } /* Ausgewählt (aria-selected setzt die Hülle): Tint O100, Schrift O700, Rand O500 doppelt, Nummer gefüllt. Hover ändert daran nichts */ .fd-faqtile[aria-selected="true"], .fd-faqtile[aria-selected="true"]:focus, .fd-faqtile[aria-selected="true"]:hover, .fd-faqtile[aria-selected="true"]:active { background: var(--state-selected); border-color: var(--brand-primary); color: var(--text-selected); } .fd-faqtile[aria-selected="true"]::after { border-color: var(--brand-primary); } .fd-faqtile[aria-selected="true"] .fd-faqtile__num { background: var(--surface-page); border-color: var(--brand-primary); color: var(--text-primary); } /* E124: gewählt zeigt der Rand, keine Orange-Fläche */ /* Ohne Bildfläche (E89 O5 B, Runbook G5d): data-kachelbild="aus" an der Kachel, die leere .fd-faqtile__bild bleibt für das spätere Bild stehen */ .fd-faqtile[data-kachelbild="aus"] > .fd-faqtile__bild { display: none; } /* ══ 11 Rahmen · Fußzeile (K12) ═══════════════════════════════════════════════ */ .fd-footer { padding: var(--space-8) var(--fd-gutter) calc(96px + env(safe-area-inset-bottom, 0px)); background: var(--surface-inverse); text-align: center; font-family: var(--font-sans); } .fd-footer p { margin: 0; font-size: var(--type-label-sm-size); line-height: var(--type-body-sm-lh); } .fd-footer__claim { color: var(--text-on-dark); } .fd-footer__copy { color: var(--website-text-muted-on-deep); } .fd-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); margin: var(--space-2) 0; } .fd-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--type-label-md-size); color: var(--website-text-muted-on-deep); text-decoration: underline; text-underline-offset: 3px; } .fd-footer__nav a:hover, .fd-footer__nav a:active { color: var(--text-on-dark); } /* ══ 12 Rahmen · Anhang: klebender CTA, Nach-oben, Bottom Sheet ═════════════════ Geschlossene Zustände über visibility, damit sie nicht per Tab erreichbar sind (T-06). */ /* E167 (08.10.2026, Moritz-Feedback): weicher Verlauf ohne harte Kante. Vorher 12 px oben und deckend bis 46 % mit linearem Auslauf, das ergab über Text eine sichtbare Kante. Jetzt 48 px Auslauf oben, deckend bis 56 % (Knopf und Rand unten liegen ganz auf Weiß), dann in drei Stufen weich aus (Deckkraft per color-mix aus dem Token, keine Rohfarbe) */ .fd-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 66; display: flex; justify-content: center; padding: var(--space-12) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--surface-page) 56%, color-mix(in srgb, var(--surface-page) 80%, transparent) 70%, color-mix(in srgb, var(--surface-page) 40%, transparent) 86%, transparent); pointer-events: none; transform: translateY(130%); visibility: hidden; transition: transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base); } .fd-cta.is-on { transform: none; visibility: visible; transition: transform var(--duration-base) var(--ease-out); } .fd-cta .fd-btn { width: 100%; max-width: 484px; pointer-events: auto; } /* E167: nur der Knopf fängt Klicks, der höhere Verlauf darüber nicht */ .fd-top { position: fixed; right: var(--space-4); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 67; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-page); color: var(--text-secondary); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-base); } .fd-top svg { width: 20px; height: 20px; } .fd-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out); } .fd-top:focus { background: var(--surface-page); border-color: var(--border-strong); color: var(--text-secondary); box-shadow: none; } .fd-top.is-idle { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-inverse); } .fd-top:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--text-on-brand); } .fd-top:active { background: var(--brand-active); border-color: var(--brand-active); color: var(--text-on-brand); } .fd-sheet { position: fixed; inset: 0; z-index: 90; display: none; } .fd-sheet.is-open { display: block; } .fd-sheet__scrim { position: absolute; inset: 0; background: var(--surface-overlay); opacity: 0; transition: opacity var(--duration-base) var(--ease-out); } .fd-sheet.is-in .fd-sheet__scrim { opacity: 1; } .fd-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-width: 520px; max-height: 86vh; margin: 0 auto; background: var(--surface-card); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); transform: translateY(100%); transition: transform var(--duration-slow) var(--ease-out); } .fd-sheet.is-in .fd-sheet__panel { transform: none; } .fd-sheet__grip { width: 40px; height: 4px; margin: var(--space-3) auto 0; border-radius: var(--radius-pill); background: var(--surface-marker); } .fd-sheet__close { position: absolute; right: var(--space-3); top: var(--space-3); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); cursor: pointer; } .fd-sheet__close:focus { background: transparent; color: var(--text-secondary); box-shadow: none; } .fd-sheet__close:hover { background: var(--surface-fill-soft); color: var(--text-link); } .fd-sheet__close:active { background: var(--surface-marker); color: var(--brand-active); } .fd-sheet__close svg { width: 20px; height: 20px; } .fd-sheet__body { padding: var(--space-5) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; font-family: var(--font-sans); } .fd-sheet__body h3 { margin: 0 0 var(--space-3); padding-right: var(--space-10); font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-md-size); font-weight: 600; line-height: var(--type-title-md-lh); color: var(--text-primary); overflow-wrap: break-word; } .fd-sheet__body p { margin: 0 0 var(--space-3); font-size: var(--type-label-lg-size); line-height: var(--type-body-md-lh); color: var(--text-primary); overflow-wrap: break-word; } .fd-sheet__body a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; } .fd-sheet__body a:hover, .fd-sheet__body a:active { color: var(--text-link-hover); } .fd-sheet__seal { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-1) 0 var(--space-5); padding: var(--space-4); background: var(--surface-fill); border-radius: var(--radius-lg); } .fd-sheet__seal img { flex: 0 0 auto; width: 84px; height: 84px; object-fit: contain; } .fd-sheet__seal p { margin: 0; font-size: var(--type-label-md-size); line-height: var(--type-body-sm-lh); } .fd-sheet__seal b { display: block; margin-bottom: var(--space-1); font-size: var(--type-label-sm-size); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } .fd-sheet__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.2; margin-bottom: var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-fill-soft); } .fd-sheet__img[hidden] { display: none; } .fd-sheet__img:has(img) { border: 0; background: none; overflow: hidden; } /* Bild je Übung (data-bild, S6a) */ .fd-sheet__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .fd-sheet__chart { display: block; width: 100%; height: auto; margin: 0 0 var(--space-4); border-radius: var(--radius-lg); } .fd-sheet__list { margin: 0 0 var(--space-4); padding-left: var(--space-5); font-size: var(--type-label-lg-size); line-height: var(--type-body-md-lh); color: var(--text-primary); } .fd-sheet__list li + li { margin-top: var(--space-1); } .fd-sheet__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .fd-sheet__body .fd-btn { width: 100%; } /* ── Agent D 29.09. (E115) Zertifikats-Sheets (dsgvo, iso, zpp aus rahmen/anhang.html) ────────────────── Alles auf der Mittelachse des Sheets: Logo 160 hoch, Titel, Meta, Erklärung, Kasten „Bei uns heißt das“ (K2), „Weitere Ressourcen“ als Link-Karten (Muster .fd-tcard--link, E95: Pfeil und neuer Tab stehen im HTML). Schrift eine Stufe größer als in den anderen Sheets: Titel title-lg, Zwischentitel title-md, Text body-lg. Sheet-Rahmen, Öffnen und Schließen bleiben unberührt (Agent A, E116). */ .fd-cert { display: flex; flex-direction: column; align-items: center; text-align: center; } .fd-cert__logo { display: block; width: auto; max-width: 100%; height: 160px; margin: var(--space-2) auto var(--space-6); object-fit: contain; } .fd-sheet__body .fd-cert h3 { margin: 0 0 var(--space-3); padding-right: 0; font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-lh); } .fd-sheet__body .fd-cert h4 { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-md-size); font-weight: var(--type-title-md-weight); line-height: var(--type-title-md-lh); color: var(--text-primary); overflow-wrap: break-word; } .fd-sheet__body .fd-cert p { margin: 0 0 var(--space-4); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); } .fd-sheet__body .fd-cert p.fd-cert__meta { margin: 0; font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); font-weight: 600; color: var(--text-secondary); } .fd-cert__fakt { width: 100%; padding: var(--space-5) var(--space-5) var(--space-1); background: var(--surface-fill); border-radius: var(--radius-lg); } .fd-cert__res { display: grid; gap: var(--space-3); width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; } .fd-cert__res .fd-tcard { flex: none; padding: var(--space-3) var(--space-4); gap: var(--space-3); } .fd-cert__res .fd-tcard__media { width: 44px; height: 44px; } .fd-cert__res .fd-tcard__meta { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); font-weight: 500; } .fd-sheet__body .fd-tcard--link a, .fd-sheet__body .fd-tcard--link a:focus { color: var(--text-primary); text-decoration: none; } /* :focus beim Normalzustand (H-12, S68), die Sheet-Linkregel (unterstrichen) gilt nicht für Karten */ .fd-sheet__body .fd-tcard--link a:hover, .fd-sheet__body .fd-tcard--link a:active { text-decoration: none; } .fd-sheet__body .fd-tcard--link:hover a { color: var(--text-link); } .fd-sheet__body .fd-tcard--link:active a { color: var(--brand-active); } /* ══ 13 Desktop ab 861px ═════════════════════════════════════════════════════ Grammatik B: Seite max 1240, Faden-Spalte 148 bis 168, Spaltenabstand 40, Seitenrand 24. Rhythmus nur über --fdd-* (R-B). */ /* ═══ Textseite (Rechtstexte, S5, Vertrag §2a): .fd-page[data-seite="text"] = Hero mit H1 und Stand-Zeile, dann .fd-doc. Kein Faden, kein CTA, kein Abschluss. Inhalt ist Fließtext mit h2, h3, p, ul, ol, table, a. ═══ */ .fd-page[data-seite="text"] .fd-hero { padding-bottom: var(--space-8); } .fd-page[data-seite="text"] .fd-hero .fd-h1 { font-size: clamp(var(--type-title-lg-size), 8vw, var(--type-display-md-size)); hyphens: auto; overflow-wrap: anywhere; } /* lange Rechtstext-Titel (S43) */ .fd-doc li > a[href^="#"]:only-child { display: inline-flex; align-items: center; min-height: 44px; } /* Inhaltsverzeichnis: Trefferfläche 44 px (S43) */ .fd-doc li:has(> a[href^="#"]:only-child) + li { margin-top: 0; } .fd-doc { padding: 0 var(--fd-gutter) var(--space-16); } .fd-doc > * { max-width: var(--fd-measure); } /* G1 26.09.: ein Lesemaß wie die Kapitel (vorher 40em) */ .fd-doc > table { max-width: 100%; } .fd-doc h2 { margin: var(--space-10) 0 var(--space-3); font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-lg-size); font-weight: var(--type-title-lg-weight); line-height: var(--type-title-lg-lh); color: var(--text-primary); text-wrap: pretty; hyphens: auto; } .fd-doc h3 { margin: var(--space-6) 0 var(--space-2); font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-md-size); font-weight: var(--type-title-md-weight); line-height: var(--type-title-md-lh); color: var(--text-primary); hyphens: auto; } .fd-doc h4 { margin: var(--space-4) 0 var(--space-2); font-size: var(--type-body-md-size); font-weight: 600; line-height: var(--type-body-md-lh); color: var(--text-primary); } .fd-doc ol[type="a"] { list-style-type: lower-alpha; } .fd-doc > :first-child { margin-top: 0; } .fd-doc p, .fd-doc li { font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: var(--text-primary); overflow-wrap: anywhere; } .fd-doc p { margin: 0 0 var(--space-4); } .fd-doc ul, .fd-doc ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); } .fd-doc li + li { margin-top: var(--space-2); } .fd-doc a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; } .fd-doc a:hover, .fd-doc a:active { color: var(--text-link-hover); } .fd-doc strong, .fd-doc b { font-weight: 600; } .fd-doc table { display: block; overflow-x: auto; width: 100%; margin: 0 0 var(--space-6); border-collapse: collapse; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); } .fd-doc th, .fd-doc td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; } .fd-doc th { font-weight: 600; } .fd-doc__stand { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--text-secondary); } /* W-14 (29.09., Taste-Audit): ab 1240 steht das vorhandene Inhaltsverzeichnis zusätzlich als mitscrollende Spalte rechts, kein neues Bauteil, nur eine zweite Position derselben Liste (.fd-doc__toc = dasselbe ol wie oben im Text). Unter 1240 bleibt es unverändert am Textanfang stehen. */ .fd-doc__toc a.is-aktiv { color: var(--text-primary); font-weight: 600; } @media (min-width: 861px) { .admin-bar .fd-bar { top: 32px; } /* WP-Admin-Leiste ab Desktop 32 px (Port K-P6, nur eingeloggt; zwischen 783 und 860 px weicht sie um 14 px ab) */ :root { --fd-bar-h: 68px; --fdd-hero-top: 88px; --fdd-hero-lead: 20px; --fdd-hero-cta: 36px; --fdd-hero-after: 112px; /* E68: Knöpfe → Trust oder Kapitel-Linie, zwei Knopfhöhen */ --fd-hero-kreis: clamp(200px, 20vw, 320px); --fdd-ch-top: 88px; --fdd-ch-bottom: 88px; --fdd-heading: 40px; --fdd-content: 32px; --fdd-media: 40px; --fdd-block: 20px; --fd-col: clamp(148px, calc(148px + (100vw - 1048px) * 0.1042), 168px); --fd-gap: 40px; --fd-content-x: calc(var(--fd-edge) + var(--fd-col) + var(--fd-gap)); --fd-stick-top: calc(var(--fd-bar-h) + var(--space-10)); /* eine Linie für alles, was im Kapitel klebt (G1) */ } .admin-bar { --fd-stick-top: calc(var(--fd-bar-h) + 32px + var(--space-10)); } [id] { scroll-margin-top: 96px; } /* Kopf: flächige Leiste, Innenkanten auf Seitenbreite */ .fd-bar { gap: var(--space-8); padding: var(--space-3) var(--fd-edge); } .fd-burger, .fd-menu, .fd-scrim, html:not(.fd-js) .fd-menu { display: none; } .fd-logo { --fd-logo-mark: 32px; } .fd-logo__mark svg { width: 100%; height: 100%; } .fd-logo__word { font-size: var(--type-title-md-size); } .fd-nav { display: block; margin-right: auto; } .fd-nav ul { display: flex; align-items: center; gap: var(--space-1); } .fd-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font-size: var(--type-label-lg-size); font-weight: 600; color: var(--text-primary); text-decoration: none; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .fd-nav a:not([aria-current]):hover { background: var(--surface-fill-soft); color: var(--text-link); } .fd-nav a:not([aria-current]):active { background: var(--surface-marker); color: var(--brand-active); } .fd-nav .current-menu-item > a, .fd-nav a[aria-current="page"] { background: var(--state-selected); color: var(--text-selected); } .fd-btn--bar { min-height: var(--fd-btn-h-bar); padding: 0 var(--space-6); font-size: var(--type-label-lg-size); } .fd-bar__right { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } /* Kopf-Paar „Kontakt“ + „Lizenz kaufen“ gleich breit (Burger ist hier aus, also nur zwei Spalten); mobil reicht der Platz dafür nicht */ .fd-cta { display: none; } .fd-top { right: var(--space-6); bottom: var(--space-6); } /* Hero auf der Inhalts-Achse wie die Kapitel (G1, Jan 26.09.). Einspaltig bis 1047, Kreis rechts erst ab 1048 */ .fd-hero { display: block; padding: var(--fdd-hero-top) var(--fd-edge) var(--fdd-hero-after) var(--fd-content-x); } .fd-hero .fd-h1 { max-width: 16em; font-size: var(--type-display-xl-size); margin-bottom: var(--fdd-hero-lead); } .fd-hero .fd-lead { max-width: 30em; font-size: var(--type-title-md-size); } .fd-hero__ctas { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--fdd-hero-cta); } .fd-hero__ctas .fd-btn { width: auto; } /* E53: zwei Knöpfe zusammen so breit wie der Lead (max-width des Leads 30em in title-md) */ .fd-hero[data-cta="2"] .fd-hero__ctas { max-width: var(--fd-paar-max); } .fd-hero[data-cta="2"] .fd-hero__ctas .fd-btn { flex: 1 1 0; min-width: max-content; } /* gleich breit, bricht um, bevor ein Text überläuft */ /* Trust: statische Reihe auf der Inhalts-Achse, drei Karten ab 1048 in einer Reihe (G1) */ .fd-trust { padding: 0 var(--fd-edge) var(--fdd-ch-bottom) var(--fd-content-x); } /* E68: Trust → Kapitel-Linie 88 */ .fd-trust .fd-carousel__track { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Faden: Linie ist die Spaltenfuge. Die Seitenspalte steht absolut über die Kapitelhöhe, Nummer und Name kleben darin (kein grid-row span, S7). Stapelordnung Rail 2 < Inhalt < Kapitelkopf 5 < Seitenspalte 6 (R-D, Runde 4 P1). */ .fd-rail { left: calc(var(--fd-edge) + var(--fd-col)); } /* Kapitel als Block mit Innenabstand statt Grid: ein Grid-Kind klebt nur in seiner eigenen Zeile, so kann die H2 kleben (G1, S58) */ .fd-ch { display: block; padding: var(--fdd-ch-top) var(--fd-edge) var(--fdd-ch-bottom) var(--fd-content-x); } .fd-ch::before { left: var(--fd-content-x); right: var(--fd-edge); } .fd-ch__side { grid-column: auto; position: absolute; z-index: 6; left: var(--fd-edge); top: var(--fdd-ch-top); bottom: var(--fdd-ch-bottom); width: var(--fd-col); display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--space-4); pointer-events: none; } .fd-ch__name, .fd-ch__num { position: sticky; top: var(--fd-stick-top); } .fd-ch__name { order: 1; display: flex; align-items: center; min-height: 40px; min-width: 0; font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-label-sm-size); font-weight: 500; line-height: 1.25; color: var(--text-secondary); text-align: right; hyphens: auto; overflow-wrap: anywhere; } /* lange Label trennen (S37) */ .fd-ch.is-active .fd-ch__name { color: var(--text-primary); } .fd-ch__num { order: 2; left: auto; flex: 0 0 auto; width: 40px; height: 40px; margin-right: -20px; font-size: var(--type-body-sm-size); box-shadow: 0 0 0 5px var(--surface-page); } .fd-tracker { display: none; } /* Kapiteltitel klebt wie Nummer und Name (Jan 26.09.). Platte in Seitenfarbe über die Spalte, Zeilenlänge bleibt 22em. Stapel: Rail 2 < Inhalt < text-breit 4 < Kapitelkopf 5 < Seitenspalte 6 < CTA 66 < Kopf 70 < Sheet 90 (R-D) Platte = ganze Klebezone (Runde 4, P1): von der Faden-Linie (2 px) bis über den Seitenrand, von der Kopfleiste bis zur H2-Unterkante. Vorher endete sie an der Textkante, Schatten und Ringe der Medien liefen in der Fuge (38 px) und im Seitenrand durch (bild01, S76). z-index -1 im Stapelkontext der H2: über ihrem Hintergrund, unter dem Titeltext. right -100vw schneidet html/body overflow-x: clip ab. Messung M13 */ .fd-ch > .fd-h2 { position: sticky; top: var(--fd-stick-top); z-index: 5; max-width: none; padding-right: max(0px, calc(100% - 22em)); background: var(--surface-page); font-size: clamp(var(--type-display-md-size), 2.4vw, var(--type-display-lg-size)); } .fd-ch > .fd-h2::before { content: ''; position: absolute; z-index: -1; top: calc(var(--space-10) * -1); bottom: 0; left: calc(2px - var(--fd-gap)); right: -100vw; background: var(--surface-page); pointer-events: none; } .fd-ch > .fd-h2::after { content: ''; position: absolute; left: calc(2px - var(--fd-gap)); right: -100vw; top: 100%; height: var(--space-4); background: linear-gradient(var(--surface-page), transparent); pointer-events: none; } .fd-ch .fd-body { max-width: var(--fd-measure); } /* R-B Rhythmus: erst Baustein-Margen neutralisieren (gleiche Spezifität, später), dann eine Regel je Beziehung (S1) */ .fd-ch > * { margin-top: 0; margin-bottom: 0; } .fd-ch > .fd-h2 { margin-bottom: 0; } /* mobile H2-Marge hat höhere Spezifität (S1, S27) */ .fd-ch > .fd-h2 + .fd-ch__body { margin-top: var(--fdd-heading); } .fd-ch__text > * + * { margin-top: var(--fdd-content); } .fd-ch__text > .fd-body + .fd-body { margin-top: var(--space-4); } .fd-ch__text > .fd-h3 + * { margin-top: var(--space-2); } .fd-ch__text > .fd-subnote, .fd-ch__text > .fd-demodata { margin-top: var(--space-3); } .fd-ch__text { max-width: var(--fd-measure); } .fd-ch__text:has(> .fd-faq) { max-width: none; } /* FAQ-Seite: Akkordeon über die Inhaltsbreite, Absätze behalten ihr Lesemaß (E71) */ .fd-ch__medien { margin-top: var(--fdd-media); gap: var(--fdd-block) var(--fd-gap); } /* Muster mit Medien unter dem Text: Lesegröße (R-C: 560 quer, 430 hoch, Chat 390) */ .fd-ch__medien > .fd-crop { max-width: 560px; } .fd-ch__medien > .fd-crop[data-format="hoch"] { max-width: 430px; } .fd-ch[data-muster="text-2medien"] .fd-ch__medien, .fd-ch[data-muster="text-2medien-seite"] .fd-ch__medien { max-width: calc(2 * 430px + var(--fd-gap)); gap: var(--fd-gap); } .fd-ch[data-muster="text-2medien"] .fd-ch__medien > .fd-crop, .fd-ch[data-muster="text-2medien-seite"] .fd-ch__medien > .fd-crop, .fd-ch[data-muster="text-galerie"] .fd-ch__medien > .fd-crop { max-width: none; } .fd-ch[data-muster="text-galerie"] .fd-ch__medien { gap: var(--space-5); } .fd-ch[data-muster="text-breit"] .fd-ch__medien { margin-left: 0; margin-right: 0; } .fd-ch[data-muster="text-breit"] .fd-ch__medien > .fd-crop { max-width: none; border-radius: var(--radius-lg); } .fd-ch[data-muster="text-karten"] .fd-ch__medien { margin-left: 0; margin-right: 0; } .fd-ch[data-muster="text-karten"] .fd-ch__text + .fd-ch__medien { margin-top: var(--fdd-media); } .fd-ch[data-flaeche="sand"] .fd-ch__body { padding: var(--space-10) 36px; } /* „Fläche folgt dem Inhalt" (G1) steht jetzt ungated in Abschnitt 7c (Fix P6), gilt ab 320 wie ab 861 gleich. */ /* Handy-Baustein ab 861 (E75 bis E77, E84/E90): Breite 394px * k, zoom k bringt das 360 x 758 große Innenleben auf den Bildschirm (S65, S71). Maßstab nur über --fd-phone-k (feste Breite W: k = W / 394, z. B. 380 px = .9645; Höhe = 784 * k). Einzelhandy k .86 = 339 x 674, passt ab 840 px Fensterhöhe unter die klebende H2 (S66), darunter k .72 (eigener Block nach 1240). Drei Handys in einer Reihe k .5 / .64 / .76 (861 / 1048 / 1240), passt in die Inhaltsbreite 625 / 812 / 984 */ .fd-phone { --fd-phone-k: .86; width: calc(394px * var(--fd-phone-k)); max-width: none; } .fd-phone__ui { width: 360px; height: 758px; zoom: var(--fd-phone-k); } /* ab 861 bleibt Motivation die feste 3er-Reihe, kein Karussell mehr (JS hängt sich ab 861 ohne data-car-desktop selbst aus). .fd-carousel__track.fd-phones statt .fd-phones, damit diese Regel die generische Karussell-Spur-Regel sicher schlägt (Fix P1, K3) */ .fd-carousel__track.fd-phones { grid-template-columns: repeat(3, auto); justify-content: start; align-items: start; gap: var(--space-4); padding-left: 0; padding-right: 0; } .fd-phones > .fd-phone { --fd-phone-k: .5; scroll-snap-align: none; } /* 3 x 197 + 2 x 16 = 623 von 625 px bei 861 */ /* Handy-Paar als Bühne (Produkt 03, E90/E92): nebeneinander mittig unter dem Text. k .64 = 2 x 252 + 32 = 536 passt in die Sand-Insel bei 861 (553 px), ab 1048 k .72 (284 x 564, Innenschrift etwa 10 px statt 7 px beim Paar neben dem Text). Fix P5 (28.09.): descendant statt Direktkind (Handys stecken mobil im Karussell-Baustein), die 2-Spalten-Regel wandert auf die Spur selbst und schlägt hier die generische 3er-Reihe der Motivation (höhere Spezifität, S1) */ .fd-ch[data-muster="text-2medien"] .fd-ch__medien .fd-phone { --fd-phone-k: .64; } .fd-ch[data-muster="text-2medien"] .fd-carousel__track.fd-phones { grid-template-columns: repeat(2, auto); justify-content: center; align-items: start; gap: var(--space-8); padding-left: 0; padding-right: 0; } /* Komposition (E92): Bühne, zwei Bilder mittig auf der Achse der Inhaltsspalte; Lead und Begleiter im Desktop-Rhythmus */ .fd-ch[data-muster="text-2medien"] .fd-ch__medien { margin-left: auto; margin-right: auto; } .fd-ch__lead > * + * { margin-top: var(--fdd-content); } .fd-ch__lead > .fd-body + .fd-body { margin-top: var(--space-4); } .fd-ch__lead > .fd-subnote { margin-top: var(--space-3); } .fd-ch__begleit > .fd-wege { max-width: var(--fd-measure); } .fd-chat__input { padding: var(--space-2) var(--space-4); font-size: var(--type-label-md-size); } /* mobil kleiner, weil der Bildschirm im Rahmen schmaler ist (E90) */ .fd-app__tabs { padding: 0 var(--space-3); } .fd-app__tabs > span { font-size: var(--type-label-md-size); } /* Fix P1 (K1, 28.09.): Schriftbumps von mobil zurück, Desktop bleibt unverändert (k .86 reicht ohne Bump) */ .fd-bub { font-size: var(--type-label-md-size); } .fd-tile__name, .fd-app__titel { font-size: var(--type-label-sm-size); } .fd-lock__push:first-of-type { margin-top: var(--space-8); } /* Bausteine auf Desktop */ .fd-strikes--notes { padding: 28px var(--space-8); } .fd-strikes__head { font-size: var(--type-title-md-size); padding-bottom: var(--space-5); } .fd-strikerow { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) 28px; } .fd-strikerow .fd-strike { flex: 0 1 auto; min-width: 0; font-size: var(--type-title-sm-size); } .fd-strikerow .fd-note { flex: 0 1 auto; min-width: 0; font-size: var(--type-title-lg-size); } .fd-punch--big { max-width: 22em; font-size: var(--type-display-lg-size); } .fd-info { font-size: var(--type-body-md-size); } .fd-personas { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--fd-measure); padding: 0; background: transparent; border-radius: 0; } .fd-persona { position: relative; justify-content: flex-start; gap: var(--space-4); min-height: 84px; padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); text-align: left; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .fd-persona:focus { background: var(--surface-card); border-color: var(--border-default); color: var(--text-secondary); box-shadow: var(--shadow-sm); } .fd-persona:hover { background: var(--surface-card); border-color: var(--brand-primary); color: var(--text-secondary); box-shadow: var(--shadow-md); transform: translateY(-1px); } .fd-persona:active { background: var(--surface-fill-soft); border-color: var(--brand-active); box-shadow: var(--shadow-sm); transform: none; } .fd-persona__av { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--surface-fill); color: var(--text-primary); } /* E124 */ .fd-persona__av svg { width: 28px; height: 28px; } .fd-persona__txt { align-items: flex-start; gap: var(--space-1); } .fd-persona__txt b { font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-md-size); line-height: 1.2; color: var(--text-primary); } .fd-persona__txt small { font-size: var(--type-body-sm-size); font-weight: 500; opacity: 1; color: var(--text-secondary); } .fd-persona[aria-pressed="true"] { background: var(--surface-card); border-color: var(--brand-primary); color: var(--text-secondary); box-shadow: var(--shadow-md); } .fd-persona[aria-pressed="true"] .fd-persona__av { background: var(--surface-fill); color: var(--text-primary); } /* E114 */ .fd-persona[data-track="mental"][aria-pressed="true"] .fd-persona__av { background: var(--surface-fill); color: var(--text-primary); } /* E124 */ /* Karussells werden statische Reihen (Jan, 05.09.) */ .fd-carousel__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: var(--space-4); padding: 0; overflow: visible; scroll-snap-type: none; } .fd-carousel__track > [aria-hidden="true"] { display: none; } .fd-story .fd-carousel:not([data-car-desktop]) > .fd-carousel__track { padding: 0; } /* M2 nur mobil (gleiche Spezifität wie dort, S1) */ .fd-carousel__nav { display: none; } .fd-tcard { flex: none; } .fd-tcard--slim { padding: var(--space-4) var(--space-5); } .fd-tcard__media { width: 48px; height: 48px; } .fd-tcard__media img { width: 40px; height: 40px; } .fd-tcard__media--photo img { width: 100%; height: 100%; } /* Foto füllt den Kreis auch ab 861 (S38) */ .fd-carousel--steps .fd-carousel__track { grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); } /* Vier Kacheln: 2 × 2 bis 1239, eine Reihe ab 1240 (G2), :has zählt die Karten */ .fd-carousel__track:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Kacheln in der Textspalte: untereinander, Symbol links (G2 Weg B) */ .fd-ch__text > .fd-carousel { margin-left: 0; margin-right: 0; } .fd-ch__text > .fd-carousel .fd-carousel__track:not(#fd-x), .fd-ch__begleit > .fd-carousel .fd-carousel__track:not(#fd-x) { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .fd-ch__text .fd-tcard--step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); align-items: start; } .fd-ch__text .fd-tcard--step > .fd-tcard__media { grid-row: span 2; } /* Zeilen-Karte (W-08, E93, 29.09., Preise 03): statt drei gleicher Karten EINE breite Karte, die Einträge sind Zeilen mit Trennlinie (wie die kompakte Liste mobil, 7a). Bleibt eine Kachel nach E63 (Symbol, Titel ohne Punkt, ein Satz je Zeile). Die Karte ist die Spur selbst, der Innenabstand liegt an den Zeilen (die Spur-Regel .fd-story … { padding: 0 } bleibt so gültig). Symbol, Titel und Satz gestapelt bis 1047, ab 1048 in einer Zeile (Abschnitt 13). Mobil unverändert: --steps macht die kompakte Liste */ .fd-carousel--zeilen > .fd-carousel__track { display: flex; flex-direction: column; gap: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .fd-carousel--zeilen .fd-tcard--step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); align-items: start; padding: var(--space-4) var(--space-6); background: transparent; border: 0; border-bottom: 1px solid var(--border-default); border-radius: 0; box-shadow: none; } .fd-carousel--zeilen .fd-tcard--step:last-child { border-bottom: 0; } .fd-carousel--zeilen .fd-tcard--step > .fd-tcard__media { grid-row: span 2; } .fd-ch__body + .fd-ch__nach { margin-top: var(--fdd-content); } /* Nachsatz unter der Sand-Insel, R-B 32 (M4) */ .fd-wege { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); } /* Trust-Karussell ab 861 (E72, 27.09.): wischen und blättern wie mobil, Karten bündig auf der Inhalts-Achse. 2 Karten ganz sichtbar bis 1239, 3 ab 1240, die nächste lugt an. Der Spurrand von 8 px (Platz für den Kartenschatten) wird oben und seitlich mit negativem Rand ausgeglichen, damit Knöpfe → Karten bei 112 px bleibt (E68). Letzte Karte rastet am Ende ein (S13) */ .fd-carousel[data-car-desktop] > .fd-carousel__track { display: flex; gap: var(--space-4); margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; padding: var(--space-2) var(--space-2) var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-2); } .fd-carousel[data-car-desktop] .fd-tcard { flex: 0 0 calc((100% - var(--space-4) - var(--space-12)) / 2); scroll-snap-align: start; } .fd-carousel[data-car-desktop] .fd-tcard:last-child { scroll-snap-align: end; } .fd-carousel[data-car-desktop] > .fd-carousel__nav { display: flex; justify-content: center; } /* Agent C 29.09. (E109): Steuerung mittig auf der Achse des Karussells, vorher flex-start (S81) */ /* Band über die ganze Breite, Inhalt rechts vom Faden (R-D) */ .fd-band { padding: var(--space-12) var(--fd-edge) 52px var(--fd-content-x); } .fd-band__head { margin: 0 0 var(--space-5); font-size: var(--type-title-md-size); } .fd-band__scroll { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-left: 0; padding: 0; overflow: visible; } .fd-certchip { justify-content: flex-start; gap: var(--space-4); width: 100%; min-height: 76px; padding: 0 var(--space-6) 0 var(--space-4); border-radius: var(--radius-xl); font-size: var(--type-body-md-size); white-space: normal; text-align: left; } .fd-certchip img { width: 44px; height: 44px; } /* Abschluss und FAQ: linksbündig in der Inhaltsspalte */ .fd-final { margin: var(--space-20) var(--fd-edge) var(--space-16) var(--fd-content-x); padding: var(--space-16) var(--space-12); text-align: left; } /* 861 bis 1047: alte kleine Scheibe bleibt unverändert (K8 gilt nur unter 861), ab 1048 unten der große Eck-Kreis (E86/E91) */ .fd-final::before { position: static; display: block; right: auto; bottom: auto; width: 56px; height: 56px; aspect-ratio: 1; margin: 0 0 var(--space-6); } .fd-final > .fd-h2 { font-size: var(--type-display-lg-size); } .fd-final__row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-10); margin-top: 28px; } .fd-final__row > .fd-btn { width: auto; } .fd-final__team { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); } .fd-final__team .fd-faces + p { margin-right: var(--space-2); } .fd-faqsec { padding: 0 var(--fd-edge) 88px var(--fd-content-x); } .fd-faqsec > .fd-h2 { max-width: 22em; font-size: var(--type-display-lg-size); } /* Agent E 29.09. (E118): Linie über die Seitenspalte (Rand bis Rand), Abstand zur Überschrift wie der Kapitel-Abstand */ .fd-faqsec { padding-top: var(--space-16); } .fd-faqsec::before { left: var(--fd-edge); right: var(--fd-edge); } /* FAQ-Navigator ab 861 (E87): auf der Inhalts-Achse wie Trust, Knöpfe → Suche 112 (Hero), Kacheln → Kapitel-Linie 88 (E68). 5 × 2 mit Bild 3:2 (ChatGPT-Querformat 1536 × 1024), Nummer als Kreis auf dem Bild wie am Faden, Name darunter */ .fd-faqnav { padding: 0 var(--fd-edge) var(--fdd-ch-bottom) var(--fd-content-x); } .fd-faqnav__suche { max-width: var(--fd-measure); margin-bottom: var(--space-8); } .fd-faqnav__kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fd-faqtile__name { font-size: var(--type-label-md-size); } /* M1 29.09.: „Datenschutz“ lief bei 861 um 2 px über, ab 1048 wieder label-lg */ .fd-faqtile__bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-fill); } .fd-faqtile__bild img { display: block; width: 100%; height: 100%; object-fit: cover; } .fd-faqtile__num { display: flex; position: absolute; z-index: 1; top: var(--space-2); left: var(--space-2); } .fd-faqtile[data-kachelbild="aus"] .fd-faqtile__num, .fd-faqtile:not(:has(> .fd-faqtile__bild)) .fd-faqtile__num { position: static; } /* ohne Bild steht die Nummer vor dem Namen */ .fd-faqtile__zeile { align-items: flex-start; padding: var(--space-3) var(--space-2); } .fd-faqtile[data-kachelbild="aus"] .fd-faqtile__zeile, .fd-faqtile:not(:has(> .fd-faqtile__bild)) .fd-faqtile__zeile { flex-direction: column; } /* Nummer über dem Namen, der Name behält die ganze Kachelbreite */ /* Textseite ab 861: auf der Inhalts-Achse wie die Faden-Seiten (G1), Hero ohne zweite Spalte */ .fd-page[data-seite="text"] .fd-hero { display: block; padding-bottom: var(--space-10); } .fd-doc { padding: 0 var(--fd-edge) var(--space-24) var(--fd-content-x); } .fd-footer { padding: var(--space-10) var(--fd-edge) 44px; } /* Fix P5 (28.09.): ab 861 zurück auf die normale Mitte-Komposition, Miriams Tag bleibt Teil des Lead-Texts. Muss hier im 861-Block stehen (nicht im 1048-Block), damit die K2-Block- und K1-Mitte-Regeln dort .fd-ch__body/.fd-ch__text bei gleicher Spezifität als spätere Regel wieder selbst übernehmen (S1) */ .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__body { display: block; } .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__text, .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__lead { display: block; } .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-who, .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__medien, .fd-ch[data-muster="medium-mitte"]:has(.fd-who) .fd-ch__begleit { order: revert; } } /* Mittlere Desktopbreite (861 bis 1047): alle Zweispalten-Muster stapeln wie mobil, die Galerie läuft in zwei Spalten (Jan, 05.09.: wenig Platz, dann übereinander). */ /* Ab 1048: Zweispalten-Muster nebeneinander. Spuren minmax(0, …), damit bei 1048 nichts überläuft (T-15). Kurze Texte: A1 zentriert (Standard), A2 gestapelt per data-split="stack" am Kapitel. */ @media (min-width: 1048px) { /* Abschluss (E86, E91 E-3, ändert den Kreis-Teil von E70): Verlaufskreis groß und ganzzahlig, Ecke rechts unten angeschnitten, Mittelpunkt in der Bühne, nie an zwei gegenüberliegenden Seiten gekappt (sonst Tonne, bild06). 280 ab 1048, 360 ab 1240. Lage ohne transform (M9) */ .fd-final { --fd-final-kreis: 280px; --fd-final-aus: 64px; display: flex; flex-direction: column; justify-content: center; min-height: calc(200px + 2 * var(--space-16)); } .fd-final::before { position: absolute; right: calc(var(--fd-final-aus) * -1); bottom: calc(var(--fd-final-aus) * -1); width: var(--fd-final-kreis); height: var(--fd-final-kreis); margin: 0; } .fd-final > .fd-h2, .fd-final__row { max-width: calc(100% - var(--fd-final-kreis) + var(--fd-final-aus) - var(--space-12)); } .fd-final > .fd-h2 { margin-bottom: 0; } /* im Flex-Container fallen die Ränder nicht zusammen, H2 → Zeile bleibt 28 */ .fd-page[data-seite="text"] .fd-hero { display: block; } /* Verlaufskreis .fd-heroph (E60, E68) am 08.10.2026 durch das Seitenbild .fd-herobild ersetzt (E162, E164), Regeln siehe Abschnitt 20 */ .fd-ch[data-muster="text-medium"] .fd-ch__body, .fd-ch[data-muster="text-2medien-seite"] .fd-ch__body { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); column-gap: var(--fd-gap); align-items: center; } .fd-ch[data-muster="medium-text"] .fd-ch__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); column-gap: var(--fd-gap); align-items: center; } .fd-ch[data-muster="medium-text"] .fd-ch__medien { order: -1; } .fd-ch[data-muster="text-medium"] .fd-ch__medien, .fd-ch[data-muster="medium-text"] .fd-ch__medien, .fd-ch[data-muster="text-2medien-seite"] .fd-ch__medien { margin-top: 0; justify-items: center; } .fd-ch[data-muster="text-medium"] .fd-ch__text, .fd-ch[data-muster="medium-text"] .fd-ch__text, .fd-ch[data-muster="text-2medien-seite"] .fd-ch__text { max-width: none; } .fd-ch[data-muster="text-medium"] .fd-ch__medien > .fd-crop, .fd-ch[data-muster="medium-text"] .fd-ch__medien > .fd-crop { max-width: 560px; } .fd-ch[data-muster="text-medium"] .fd-ch__medien > .fd-crop[data-format="hoch"], .fd-ch[data-muster="medium-text"] .fd-ch__medien > .fd-crop[data-format="hoch"] { max-width: 430px; } .fd-ch[data-muster="text-2medien-seite"] .fd-ch__medien { max-width: none; gap: var(--space-5); } .fd-ch[data-split="stack"] .fd-ch__body { display: block; } .fd-ch[data-split="stack"] .fd-ch__medien { margin-top: var(--fdd-media); justify-items: center; } /* gestapelt = Medium auf der Achse (E92) */ /* K2 Block (E92): text-medium / medium-text / medium-mitte mit Handy. Handyspalte so breit wie das Handy, Text nimmt den Rest, Handy an der Außenkante, gemeinsame Oberkante direkt unter der H2 (keine Lücke unter der klebenden H2, S73). Ohne Begleiter steht kurzer Text mittig zur Handyhöhe. Die :has(.fd-phone)-Kette ist in 1048 und 1240 gleich lang, sonst gewinnt die falsche Stufe (S1) */ .fd-ch:is([data-muster="text-medium"], [data-muster="medium-mitte"]) .fd-ch__body:has(.fd-phone) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-16); align-items: stretch; } .fd-ch[data-muster="medium-text"] .fd-ch__body:has(.fd-phone) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-16); align-items: stretch; } .fd-ch:is([data-muster="text-medium"], [data-muster="medium-text"], [data-muster="medium-mitte"]) .fd-ch__body:has(.fd-phone) > .fd-ch__medien { align-self: start; margin-top: 0; } .fd-ch:is([data-muster="text-medium"], [data-muster="medium-mitte"]) .fd-ch__body:has(.fd-phone) > .fd-ch__medien { justify-items: end; } .fd-ch[data-muster="medium-text"] .fd-ch__body:has(.fd-phone) > .fd-ch__medien { justify-items: start; } .fd-ch:is([data-muster="text-medium"], [data-muster="medium-text"], [data-muster="medium-mitte"]) .fd-ch__body:has(.fd-phone) > .fd-ch__text { display: flex; flex-direction: column; justify-content: center; max-width: none; } .fd-ch:is([data-muster="text-medium"], [data-muster="medium-text"], [data-muster="medium-mitte"]) .fd-ch__body:has(.fd-phone) > .fd-ch__text:has(> .fd-ch__begleit, > .fd-carousel) { justify-content: flex-start; } .fd-ch__begleit > .fd-personas { max-width: var(--fd-measure); } /* 7d Kopf breit (E104): steht nach den text-medium-Regeln, weil gleiche Spezifität, spätere Regel gewinnt (S1) */ .fd-ch[data-kopf="breit"] .fd-ch__body:has(.fd-phone) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: var(--fd-space-content); column-gap: var(--space-16); align-items: start; } .fd-ch[data-kopf="breit"] .fd-ch__body:has(.fd-phone) > .fd-ch__text { display: contents; } .fd-ch[data-kopf="breit"] .fd-ch__lead { grid-column: 1 / -1; grid-row: 1; } .fd-ch[data-kopf="breit"] .fd-ch__begleit { grid-column: 1; grid-row: 2; margin-top: 0; } .fd-ch[data-kopf="breit"] .fd-ch__begleit > .fd-personas { max-width: none; } .fd-ch[data-kopf="breit"] .fd-ch__body:has(.fd-phone) > .fd-ch__medien { grid-column: 2; grid-row: 2; align-self: start; justify-items: end; margin-top: 0; } /* K5 Kopf-Split (E92): text-karten mit Begleiter, Lead links im Lesemaß, Begleiter rechts, beide unten bündig, Karten darunter */ .fd-ch[data-muster="text-karten"] .fd-ch__text:has(> .fd-ch__begleit) { display: grid; grid-template-columns: minmax(0, var(--fd-measure)) minmax(0, 1fr); column-gap: var(--space-16); align-items: end; max-width: none; } .fd-ch[data-muster="text-karten"] .fd-ch__text > .fd-ch__begleit { margin-top: 0; } .fd-ch[data-muster="text-karten"] .fd-ch__begleit > .fd-wege { grid-template-columns: minmax(0, 1fr); max-width: none; } /* Zeilen-Karte (W-08): Symbol, Titel und Satz in einer Zeile, Titelspalte 16em, damit die drei Sätze eine gemeinsame Kante haben */ .fd-carousel--zeilen .fd-tcard--step { grid-template-columns: auto minmax(0, 16em) minmax(0, 1fr); align-items: center; } .fd-carousel--zeilen .fd-tcard--step > .fd-tcard__media { grid-row: auto; } /* Handy-Paar als Bühne ab 1048 (Produkt 03), Fix P5 (28.09.): descendant statt Direktkind */ .fd-ch[data-muster="text-2medien"] .fd-ch__medien .fd-phone { --fd-phone-k: .72; } .fd-ch[data-muster="text-galerie"] .fd-ch__medien { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .fd-faqnav__kacheln { gap: var(--space-4); } /* FAQ-Navigator (E87) */ .fd-faqtile__name { font-size: var(--type-label-lg-size); } .fd-faqtile__zeile { padding: var(--space-3); } .fd-phones { gap: var(--space-6); } .fd-phones > .fd-phone { --fd-phone-k: .64; } /* 3 x 252 + 2 x 24 = 805 von 812 px bei 1048 */ } @media (min-width: 1240px) { /* W-14 (29.09.): Textseiten mit Inhaltsverzeichnis bekommen ab hier eine zweite Spalte, die Liste rutscht dorthin und bleibt beim Scrollen stehen (position: sticky im vollen grid-row-Bereich). Der Hinweis „Inhalt“ bleibt am Textanfang unnötig, weil die Spalte selbst als Verzeichnis erkennbar ist (aria-label trägt es für Screenreader weiter). */ .fd-page[data-seite="text"] .fd-doc:has(.fd-doc__toc) { display: grid; grid-template-columns: minmax(0, var(--fd-measure)) minmax(200px, 260px); column-gap: var(--space-10); align-items: start; } .fd-page[data-seite="text"] .fd-doc:has(.fd-doc__toc) > * { grid-column: 1; } .fd-page[data-seite="text"] .fd-doc > p:has(+ .fd-doc__toc) { display: none; } .fd-doc__toc { grid-column: 2; grid-row: 1 / -1; align-self: start; position: sticky; top: calc(var(--fd-bar-h) + var(--space-6)); max-height: calc(100vh - var(--fd-bar-h) - var(--space-10)); overflow-y: auto; max-width: none; margin: 0; padding-left: 0; list-style: none; } .fd-doc__toc li { margin-top: 0; } .fd-doc__toc a { display: block; padding: var(--space-2) 0; color: var(--text-secondary); font-size: var(--type-label-md-size); text-decoration: none; } .fd-doc__toc a:hover { color: var(--text-link); text-decoration: underline; } .fd-final { --fd-final-kreis: 360px; --fd-final-aus: 80px; } /* Abschluss-Kreis wie vor E70 (26vw bis 360), ganzzahlig (E86) */ .fd-carousel__track:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fd-carousel[data-car-desktop] .fd-tcard { flex-basis: calc((100% - 2 * var(--space-4) - var(--space-12)) / 3); } /* E72: drei Karten sichtbar */ .fd-faqtile__zeile { padding: var(--space-3) var(--space-4); } /* FAQ-Navigator (E87): Kachel 184 bis 194 px, Name 17 px */ .fd-faqtile__name { font-size: var(--type-title-sm-size); } .fd-phones { gap: var(--space-8); } .fd-phones > .fd-phone { --fd-phone-k: .76; } /* 3 x 299 + 2 x 32 = 962 von 984 px bei 1240 */ /* K1 Mitte (medium-mitte, E92): Handy mittig in der Inhaltsspalte, Lead links, Begleiter rechts. W-03 (E93, 29.09., ändert „mittig zur Handyhöhe“): alle drei Spalten mit gemeinsamer Oberkante direkt unter der klebenden H2 (align-items: start), sonst rutscht der kurze Lead 250 bis 290 px unter die H2 und links bleibt ein Loch (E88, S77). Bei 1240 bleiben je (984 - 339 - 96) / 2 = 274 px. Nur Kacheln (Preise 02): 1 und 2 links, 3 und 4 rechts, oben bündig mit dem Handy, Zeile 2 nimmt den Rest der Handyhöhe (auto 1fr). display: contents am ul, deshalb trägt das ul role="list" (Safari) */ .fd-ch[data-muster="medium-mitte"] .fd-ch__body:has(.fd-phone) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--space-12); align-items: start; } .fd-ch[data-muster="medium-mitte"] .fd-ch__body:has(.fd-phone) > .fd-ch__text { display: contents; } .fd-ch[data-muster="medium-mitte"] .fd-ch__lead { grid-column: 1; grid-row: 1; } .fd-ch[data-muster="medium-mitte"] .fd-ch__body:has(.fd-phone) > .fd-ch__medien { grid-column: 2; grid-row: 1; justify-items: center; } .fd-ch[data-muster="medium-mitte"] .fd-ch__begleit { grid-column: 3; grid-row: 1; margin-top: 0; } .fd-ch[data-muster="medium-mitte"] .fd-ch__body:has(> .fd-ch__text > .fd-carousel) { grid-template-rows: auto 1fr; row-gap: var(--space-4); } .fd-ch[data-muster="medium-mitte"] .fd-ch__text > .fd-carousel, .fd-ch[data-muster="medium-mitte"] .fd-ch__text > .fd-carousel > .fd-carousel__track { display: contents; } .fd-ch[data-muster="medium-mitte"] .fd-ch__text > .fd-carousel > .fd-carousel__track > li:nth-child(1) { grid-column: 1; grid-row: 1; align-self: start; } /* nur Kacheln direkt im Text, nie die im Begleiter (Produkt 02) */ .fd-ch[data-muster="medium-mitte"] .fd-ch__text > .fd-carousel > .fd-carousel__track > li:nth-child(2) { grid-column: 1; grid-row: 2; align-self: start; } .fd-ch[data-muster="medium-mitte"] .fd-ch__text > .fd-carousel > .fd-carousel__track > li:nth-child(3) { grid-column: 3; grid-row: 1; align-self: start; } .fd-ch[data-muster="medium-mitte"] .fd-ch__text > .fd-carousel > .fd-carousel__track > li:nth-child(4) { grid-column: 3; grid-row: 2; align-self: start; } .fd-ch[data-muster="medium-mitte"] .fd-ch__body:has(> .fd-ch__text > .fd-carousel) > .fd-ch__medien { grid-row: 1 / 3; align-self: start; } } /* Handy-Baustein bei niedrigen Fenstern (E84/E90, S66): unter 840 px Höhe passt das Einzelhandy mit k .86 (674 px) nicht mehr unter die klebende H2, dann k .72 = 284 x 564. Drei Handys (.fd-phones) bleiben unberührt */ @media (min-width: 861px) and (max-height: 839px) { .fd-phone { --fd-phone-k: .72; } } /* ── Agent B1 29.09. (E111, E113) Handy-Standard ───────────────────────────────────────────────────────────────── Standard für jedes Kapitel mit genau einem Handy (Ausnahmen: Start Motivation mit drei Handys, Produkt 03 mit zwei): Muster text-medium mit .fd-phone in .fd-ch__medien, so wie Start 01. Links Text und Kacheln (Text wird in Kacheln geteilt, nicht als Absatz gesetzt), rechts das Handy an der Außenkante, gemeinsame Oberkante direkt unter der H2. Optional data-kopf="breit": der Satz unter dem Titel (.fd-ch__lead) steht als Untertitel über beide Spalten, darunter Begleiter (.fd-ch__begleit, Kacheln) links und Handy rechts (E112, E113 Produkt 02). Die Spalten selbst liefern K2 Block und 7d weiter oben, hier steht nur das Gewicht: die Kachelspalte hat die Höhe des Handys, die Kacheln teilen sie gleichmäßig auf (grid-auto-rows: 1fr, Inhalt mittig in der Kachel), sonst bliebe links unter drei kurzen Kacheln ein Loch neben dem bildschirmhohen Handy. Nur ab 1048: darunter stapelt alles wie mobil (Text, Kacheln, Handy mittig auf der Spaltenachse, S80). Personenkarten (Start 01) sind keine .fd-tcard und bleiben unberührt. Selektorketten in 1048 und 1240 gleich lang halten (S78), deshalb nur ein Block. */ @media (min-width: 861px) { /* Gestapelt (861 bis 1047) stehen Kacheln und Handy auf derselben Achse: das Lesemaß (34em) gilt für Absätze, nicht für Kacheln, sonst sitzt das Handy 33 px rechts der Kacheln */ .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) > .fd-ch__text:has(> .fd-carousel, > .fd-ch__begleit > .fd-carousel) { max-width: none; } } @media (min-width: 1048px) { .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) > .fd-ch__text:has(> .fd-carousel), .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) > .fd-ch__text > .fd-ch__begleit:has(> .fd-carousel) { display: flex; flex-direction: column; } .fd-ch[data-muster="text-medium"][data-kopf="breit"] .fd-ch__body:has(.fd-phone) > .fd-ch__text > .fd-ch__begleit:has(> .fd-carousel) { align-self: stretch; } .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) > .fd-ch__text > .fd-carousel, .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) > .fd-ch__text > .fd-ch__begleit > .fd-carousel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) > .fd-ch__text > .fd-carousel > .fd-carousel__track, .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) > .fd-ch__text > .fd-ch__begleit > .fd-carousel > .fd-carousel__track { flex: 1 1 auto; grid-auto-rows: 1fr; } .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) .fd-carousel--steps .fd-tcard--step { align-content: center; } } /* Kachel in der Höhe des Handys ist ab 1240 größer gesetzt wie die Personenkarte in Start 01 (Symbol 64, Titel title-md, Satz body-lg), sonst wirken drei kurze Zeilen in 200 px hohen Kacheln leer (Stilbild §2). Bei 1048 hat die Spalte nur 394 px, dort bleibt die Kachel im Standardmaß (sonst dreizeilige Sätze und eine Spalte höher als das Handy) */ @media (min-width: 1240px) { .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) .fd-carousel--steps .fd-tcard--step { column-gap: var(--space-6); padding: var(--space-5) var(--space-8); } .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) .fd-carousel--steps .fd-tcard--step > .fd-tcard__media { width: 64px; height: 64px; } .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) .fd-carousel--steps .fd-tcard--step > .fd-tcard__media > svg { width: 32px; height: 32px; } .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) .fd-carousel--steps .fd-tcard--step > b { font-size: var(--type-title-md-size); line-height: var(--type-title-md-lh); } .fd-ch[data-muster="text-medium"] .fd-ch__body:has(.fd-phone) .fd-carousel--steps .fd-tcard--step > p { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); } } /* ── Agent C 29.09. (E109) Erster Bildschirm ab 861 · ABGELÖST am 08.10.2026 durch E162 (Regeln direkt unter diesem Kommentar) ── Historie, die alte Fassung: ───────────────────────────────────────────────────────────── Hero plus das, was direkt folgt (Trust-Leiste, FAQ-Navigator), füllt bei 1440 x 900 und 1920 x 1080 genau den Bildschirm unter der Kopfleiste, die Kapitel erscheinen erst beim Scrollen. EINE Regel für alle Seiten mit Hero, Bezug ist das Geschwister danach (:has): - Hero + Trust (E127, Nachfass 29.09., ersetzt die Fassung „Trust füllt den Bildschirm mit“): Start bekommt genau denselben Hero wie die anderen Seiten (gleiche Innenfläche, Text und Kreis an derselben Stelle), die Trust-Leiste steht darunter und ragt nur mit --fdd-trust-peek (64 px, etwa die obere Hälfte der Karten) in den ersten Bildschirm, damit man sieht, dass es weitergeht. Dafür wird der Hero um den Anschnitt niedriger und sein unterer Innenabstand um denselben Betrag kleiner: die Innenfläche und damit die Mitte von Text und Kreis bleiben gleich. - Hero + FAQ-Navigator: der Navigator ist etwa 480 bis 570 px hoch, der Hero bleibt bei natürlicher Höhe und wächst nur in sehr hohen Fenstern. - Hero ohne Nachfolger im ersten Bild (Produkt, Preise, Team, Kontakt): der Hero füllt den ganzen ersten Bildschirm. Obergrenze 1024 px (sehr hohe Fenster zeigen den Anfang der Kapitel), Untergrenze ist die Inhaltshöhe des Heros (min-height hebt nur an). Text im Hero mittig in der Höhe, Knöpfe mit größerem Abstand zum Lead (--fdd-hero-cta), Kreis größer und an der Höhe des Bildschirms begrenzt. Textseiten (Rechtstexte) bleiben ausgenommen: dort steht das Dokument sofort im Bild. Mobil unverändert. ── */ /* ── 08.10.2026 (E162, ändert E109, E60, E68): Erster Bildschirm neu, Moritz-Feedback ── Der Hero füllt den Bildschirm nicht mehr. Er ist so hoch wie sein Inhalt plus 64 px oben und unten, damit auf dem Desktop (1440 x 900, 1920 x 1080) der Anfang von Kapitel 01 (oder der FAQ-Navigator) im ersten Bildschirm sichtbar ist und man sieht, dass es weitergeht. Ab 1048 zwei gleich breite Spalten (symmetrisch): links Titel, ein Satz, Knöpfe; rechts das Seitenbild (.fd-herobild) mittig in seiner Spalte, beide mittig zueinander. 861 bis 1047 wie mobil: Seitenbild klein über dem Titel (E164). Keine Sprungleiste. Textseiten unverändert. ── */ @media (min-width: 861px) { :root { --fdd-hero-cta: var(--space-10); --fd-herobild-kreis: 160px; --fd-herobild-h: 248px; --fd-herobild-figur: 260px; } /* Lead → Knöpfe 40 (vorher bis 96) */ .fd-page:not([data-seite="text"]) > .fd-hero { padding-top: var(--space-16); padding-bottom: var(--space-16); } } @media (min-width: 1048px) { /* E173: BOB ganz und hochkant in der rechten Spalte, 360 bis 480 hoch. Kapitel 01 bleibt bei 1440 x 900 und 1920 x 1080 im ersten Bildschirm (M8b) */ :root { --fd-herobild-h: clamp(264px, 26vw, 332px); --fd-herobild-kreis: var(--fd-herobild-h); --fd-herobild-figur: clamp(360px, 32vw, 480px); --fd-herobild-pos: 50% 100%; } .fd-page:not([data-seite="text"]) > .fd-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-16); align-items: center; } .fd-page:not([data-seite="text"]) > .fd-hero .fd-herobild { order: 0; justify-content: center; margin: 0; } .fd-page:not([data-seite="text"]) > .fd-hero .fd-herobild--bild { overflow: visible; align-items: center; } /* ganze Figur (E173) */ .fd-page:not([data-seite="text"]) > .fd-hero .fd-herobild--bild > img { width: 100%; height: 100%; object-fit: contain; object-position: var(--fd-herobild-pos); } .fd-page:not([data-seite="text"]) > .fd-hero .fd-herobild__kreis > svg { stroke-width: 1.25px; } .fd-page:not([data-seite="text"]) > .fd-hero .fd-h1 { font-size: var(--type-display-lg-size); } /* halbe Breite: 36 bis 1239, 44 ab 1240 */ } @media (min-width: 1240px) { .fd-page:not([data-seite="text"]) > .fd-hero .fd-h1 { font-size: var(--type-display-xl-size); } } /* ── Agent B2 29.09. (E112) Sätze laufen bis zur rechten Kante der Inhaltsfläche ───────────────────────────────── Ursache: zwei Lesemaß-Kappen (34em = 544 px) hielten jeden Satz an der linken Kante zusammen, während Medien und Karten die ganze Inhaltsbreite (bis 1032 px) nutzten: `.fd-ch .fd-body` (mobil in 7c, ab 861 im Desktop-Block) und `.fd-ch__text` (ab 861). Beides fällt hier für alle Kapitel weg, auf allen Breiten in einer Regel (steht nach den Kappen, gleiche Spezifität, spätere Regel gewinnt, S1/S87). Der Satz unter dem Kapiteltitel ist damit ein Untertitel über die volle Breite, Medien und Karten stehen darunter. Ausnahmen (Spalte bleibt Spalte, sie begrenzt den Satz selbst): Text neben einem Handy oder Bild (Grid-Spalte, `max-width: none` gilt dort schon), Kopf-Split K5 (Lead im Lesemaß neben dem Begleiter), FAQ-Antworten (E71), Textseiten `.fd-doc` (Rechtstexte, eigenes Lesemaß in Abschnitt 9, Inhaltsverzeichnis rechts ab 1240) und das Hero-Lead (E53, Knöpfe so breit wie der Lead). Sand-Insel mit Formular (Kontakt 01): die Insel ist `fit-content` und würde mit einem langen Absatz auf volle Breite wachsen, dort bleibt das Lesemaß. ── */ @media (min-width: 861px) { /* Koordinator 29.09.: erst ab Desktop, Tablet 600 bis 860 behält das Lesemaß aus Fix P6 */ .fd-ch__text, .fd-ch .fd-body { max-width: none; } .fd-ch[data-flaeche="sand"]:is([data-muster="text"], [data-muster="text-medium-unten"]) :is(.fd-ch__text, .fd-body) { max-width: var(--fd-measure); } } /* ── Agent B2 29.09. (E113) Beispielvideo im Handy mit Play-Knopf ───────────────────────────────────────────────── Der Knopf liegt über dem Poster (dem Bildschirm) und deckt ihn ganz, Kreis in Orange mit weißem Symbol (E78), Hover und Aktiv Orange 700, Ring Orange 600 innen (außen würde der Bildschirm ihn beschneiden). Alle Zustände stehen einzeln, weil Kadence Knöpfe sonst violett färbt (S68). Ohne Klick bewegt sich nichts (WCAG 2.2.2). .fd-phone__ui ist relativ, damit inset 0 gegen den logischen 360 x 758 Bildschirm rechnet (S65). Die Abspielfläche .fd-phone__player legt das Skript erst beim Klick an. ── */ .fd-phone__ui:has(> .fd-phone__play) { position: relative; } .fd-phone__play { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text-on-brand); cursor: pointer; } .fd-phone__play:focus, .fd-phone__play:hover, .fd-phone__play:active { background: transparent; box-shadow: none; color: var(--text-on-brand); } .fd-phone__play:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -6px; } .fd-phone__play-kreis { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: var(--radius-pill); background: var(--brand-primary); color: var(--text-on-brand); box-shadow: var(--shadow-md); transition: background var(--duration-fast) var(--ease-out); } .fd-phone__play:hover .fd-phone__play-kreis, .fd-phone__play:active .fd-phone__play-kreis { background: var(--brand-active); } .fd-phone__play-kreis svg { width: 36px; height: 36px; margin-left: 4px; fill: currentColor; } .fd-phone__player { position: absolute; z-index: 2; inset: 0; background: var(--surface-page); } .fd-phone__player video { display: block; width: 100%; height: 100%; object-fit: cover; } .fd-phone__stop { position: absolute; top: 52px; right: var(--space-3); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--brand-primary); color: var(--text-on-brand); cursor: pointer; } .fd-phone__stop:focus, .fd-phone__stop:hover, .fd-phone__stop:active { background: var(--brand-active); color: var(--text-on-brand); box-shadow: none; } .fd-phone__stop:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .fd-phone__stop svg { width: 20px; height: 20px; } /* ══ 14 Weniger Bewegung ═════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fd-js .fd-reveal { opacity: 1; transform: none; transition: none; } .fd-js .fd-chat__run > .is-new, .fd-chat__typing, .fd-chat__typing i, .fd-certchip__tap, .fd-certchip__tap svg *, .fd-tcard__tap svg * { animation: none !important; } .fd-menu, .fd-scrim, .fd-cta, .fd-top, .fd-sheet__panel, .fd-sheet__scrim, .fd-burger span { transition: none; } .fd-faqtile, .fd-faqtile__num, .fd-faqhit { transition: none; } } /* ══ 15 Zustände: Kadence-Netz und Consent-Banner (E78, 27.09.2026) ════════════ Die Zustände der Bausteine stehen bei den Bausteinen (Kette: nur Orange und Espresso, nie Mental-Violett, Schrift auf Orange weiß, :focus beim Normalzustand). Kadence 1.4.5 (global.min.css) färbt button:hover/:focus/:active und a:hover/:focus/:active mit Palette 2 (#7970FF, 0,1,1). Hier zeigen die Theme-Variablen auf DS-Tokens, damit alles, was ohne eigene Regel durchrutscht (Blog, Fremd-Snippets), orange statt violett wird. Prüfung: mess-lauf.js --teil=zustaende (S68). */ body.fd-rahmen { --global-palette-highlight: var(--text-link); --global-palette-highlight-alt: var(--text-link-hover); --global-palette-btn-bg: var(--brand-primary); --global-palette-btn-bg-hover: var(--brand-primary-hover); --global-palette-btn: var(--text-on-brand); --global-palette-btn-hover: var(--text-on-brand); } /* Consent-Banner (Snippet coachbob-consent-banner, live, E78 E4): gleiche Kette, zwei Klassen schlagen Kadence und das Snippet */ .cb-consent .cb-consent__btn--accept, .cb-consent .cb-consent__btn--accept:focus { background: var(--brand-primary); border-color: transparent; color: var(--text-on-brand); box-shadow: none; font-family: var(--font-sans); } .cb-consent .cb-consent__btn--accept:hover { background: var(--brand-primary-hover); color: var(--text-on-brand); box-shadow: var(--shadow-md); transform: none; } .cb-consent .cb-consent__btn--accept:active { background: var(--brand-active); color: var(--text-on-brand); box-shadow: var(--shadow-pressed); } .cb-consent .cb-consent__btn--decline, .cb-consent .cb-consent__btn--decline:focus { background: transparent; border-color: var(--border-default); color: var(--text-primary); box-shadow: none; font-family: var(--font-sans); } .cb-consent .cb-consent__btn--decline:hover { background: var(--surface-fill-soft); border-color: var(--brand-primary); color: var(--text-link); box-shadow: none; } .cb-consent .cb-consent__btn--decline:active { background: var(--surface-marker); border-color: var(--brand-active); color: var(--brand-active); } .cb-consent .cb-consent__text a { color: var(--text-link); } .cb-consent .cb-consent__text a:hover, .cb-consent .cb-consent__text a:active { color: var(--text-link-hover); } /* ═══ Formular Kontakt (CF7 1552), S5 ═══ Gestaltung des Live-Formulars „coachBOB Kontakt-Hub“ (Contact Form 7, ID 1552) auf /kontakt/. E41: Felder, Wege, Conditional Fields und Anbindung bleiben 1:1, nur die Gestaltung ist neu. Hooks sind nur die Klassen des Live-Formulars (.kontakt-form, .form-field, .form-row, .form-input, .form-check, .field-help, .form-help, .ck-*) und die CF7-Klassen (.wpcf7*). Alles steht unter .kontakt-form oder .wpcf7, dazu der Träger .ck-form-wrap auf der Seite. - CF7 setzt um jede Zeile des Templates
und
(autop). Die
werden neutralisiert oder als Flex-Spalte genutzt. - Conditional Fields (Plugin 2.7.7) blendet die Gruppen [data-class="wpcf7cf_group"] mit display und einer eigenen Animation ein und aus. Dieser Block setzt an den Gruppen deshalb weder display noch margin noch padding: die Abstände kommen aus dem gap der Formularspalte (ausgeblendete Gruppen erzeugen keinen) und aus den Kindern der Gruppe. - Spezifität mindestens zwei Klassen, damit Kadence (input[type=…], 0,1,1) und das alte Zusatz-CSS (.btn) nicht gewinnen. - Fokus: ein Ring wie überall (T-13), hier ausdrücklich, weil Kadence ihn an Feldern mit outline: 0 abschaltet. - Mobil zuerst, ab 861 Zweierzeilen und Knopf in eigener Breite. Lokale Vorschau: tools/mock-cf7-1552.html. */ /* Träger auf der Seite (Kapitel Anfrage, Muster text-medium-unten in der Sand-Insel): Lesebreite wie der Text darüber */ .ck-form-wrap { width: 100%; max-width: var(--fd-measure); } /* Was live das CF7-Plugin-CSS erledigt, steht hier noch einmal (die Vorschau lädt es nicht) */ .wpcf7 .hidden-fields-container { display: none; } .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .wpcf7 .wpcf7-form { margin: 0; } .wpcf7 .wpcf7-form-control-wrap { display: block; position: relative; } /* Formularspalte */ .wpcf7 .kontakt-form { display: flex; flex-direction: column; gap: var(--space-6); font-family: var(--font-sans); color: var(--text-primary); } .wpcf7 .kontakt-form p { margin: 0; } .wpcf7 .kontakt-form br { display: none; } .wpcf7 .kontakt-form [data-class="wpcf7cf_group"] > * + * { margin-top: var(--space-5); } .wpcf7 .kontakt-form .form-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .wpcf7 .kontakt-form .form-field > p { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .wpcf7 .kontakt-form .form-row { display: grid; gap: var(--space-5); } /* Beschriftung, Hilfetexte */ .wpcf7 .kontakt-form .form-field label { display: block; font-size: var(--type-label-lg-size); font-weight: 600; line-height: var(--type-label-lg-lh); color: var(--text-primary); } .wpcf7 .kontakt-form label > span[aria-hidden="true"] { color: var(--brand-primary-hover); } .wpcf7 .kontakt-form .ck-anliegen-field label { font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-md-size); font-weight: var(--type-title-md-weight); line-height: var(--type-title-md-lh); } .wpcf7 .kontakt-form .field-help { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--text-secondary); } .wpcf7 .kontakt-form .form-help { font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: var(--text-primary); } .wpcf7 .kontakt-form a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; } .wpcf7 .kontakt-form a:hover { color: var(--text-link-hover); } /* Felder (DS Input und Select: 48 px, Radius md, Rand stark, Schrift 16 px gegen den Zoom in iOS) */ .wpcf7 .kontakt-form .form-input { display: block; width: 100%; min-height: 48px; margin: 0; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color var(--duration-fast) var(--ease-standard); } .wpcf7 .kontakt-form .form-input[type="date"] { -webkit-appearance: auto; appearance: auto; } .wpcf7 .kontakt-form .form-input::placeholder { color: var(--text-muted); opacity: 1; } .wpcf7 .kontakt-form .form-input:hover { border-color: var(--text-secondary); } .wpcf7 .kontakt-form .form-input:focus { border-color: var(--text-primary); box-shadow: none; } /* 08.10.2026 (E171): der alte Pfeil aus zwei Verläufen ist entfernt, Pfeil und Zustände der Auswahlfelder stehen in Abschnitt 21 (Lucide chevron-down) */ .wpcf7 .kontakt-form select.form-input { padding-right: var(--space-10); cursor: pointer; } .wpcf7 .kontakt-form textarea.form-input { height: 128px; min-height: 96px; resize: vertical; } /* Kurs-Auswahlfeld: bleibt für CF7 und Conditional Fields die Quelle, bedient wird es über die Kacheln (faden-shared.js) */ .wpcf7 .kontakt-form select.ck-kurs-hidden { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; opacity: 0; pointer-events: none; } /* Fokus: ein Ring (T-13) für Felder, Kacheln, Aufklapper, Einwilligung und Knopf */ .wpcf7 .kontakt-form :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Fehler (CF7 setzt .wpcf7-not-valid am Feld und den Hinweis .wpcf7-not-valid-tip in dessen Hülle) */ .wpcf7 .kontakt-form .wpcf7-not-valid, .wpcf7 .kontakt-form .form-input.wpcf7-not-valid { border-color: var(--surface-alert); box-shadow: inset 0 0 0 1px var(--surface-alert); } .wpcf7 .kontakt-form .wpcf7-not-valid-tip { display: block; margin-top: var(--space-2); font-size: var(--type-body-sm-size); font-weight: 600; line-height: var(--type-body-sm-lh); color: var(--text-alert); } /* Einwilligungen (acceptance): ganze Zeile ist die Trefferfläche, mindestens 44 px */ .wpcf7 .kontakt-form .form-check { display: block; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--text-primary); } .wpcf7 .kontakt-form .wpcf7-list-item { display: block; margin: 0; } .wpcf7 .kontakt-form .wpcf7-list-item > label { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px; padding: var(--space-3) 0; cursor: pointer; } .wpcf7 .kontakt-form input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--brand-primary); cursor: pointer; } /* Aufklapper und Hinweiskasten (Kontraindikationen, Krankenkasse). display bleibt unberührt: hidden und style="display:none" des Formulars wirken */ .wpcf7 .kontakt-form .ck-info-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; font-family: var(--font-sans); font-size: var(--type-label-lg-size); font-weight: 600; color: var(--brand-primary-hover); text-align: left; box-shadow: none; cursor: pointer; } .wpcf7 .kontakt-form .ck-info-toggle svg { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-out); } .wpcf7 .kontakt-form .ck-info-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .wpcf7 .kontakt-form .ck-info-toggle:hover, .wpcf7 .kontakt-form .ck-info-toggle:active { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; } .wpcf7 .kontakt-form .ck-info-note { padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--text-primary); } .wpcf7 .kontakt-form .ck-info-note > * + * { margin-top: var(--space-2); } /* Kurs-Kacheln: eine Zeile je Kurs (Bild, Titel, Haken, darunter Kursname oder „Bald verfügbar“), mobil wie Desktop */ .wpcf7 .kontakt-form .ck-kurs-tiles { display: grid; gap: var(--space-3); } .wpcf7 .kontakt-form .ck-kurs-tiles > p, .wpcf7 .kontakt-form .ck-kurs-tile > p { display: contents; } .wpcf7 .kontakt-form .ck-kurs-tile { display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; grid-template-areas: "bild titel haken" "bild text text"; align-items: start; gap: var(--space-1) var(--space-4); width: 100%; min-height: 44px; margin: 0; padding: var(--space-3); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-primary); font-family: var(--font-sans); text-align: left; box-shadow: none; } .wpcf7 .kontakt-form button.ck-kurs-tile { cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .wpcf7 .kontakt-form button.ck-kurs-tile:not([aria-pressed="true"]):hover { border-color: var(--brand-primary); } .wpcf7 .kontakt-form button.ck-kurs-tile:not([aria-pressed="true"]):active { border-color: var(--brand-active); background: var(--surface-fill-soft); } .wpcf7 .kontakt-form .ck-kurs-tile[aria-pressed="true"] { border-color: var(--brand-primary); background: var(--state-selected); box-shadow: inset 0 0 0 1px var(--brand-primary); } .wpcf7 .kontakt-form .ck-kurs-tile--soon { border-style: dashed; background: transparent; } .wpcf7 .kontakt-form .ck-kurs-tile-img { grid-area: bild; display: block; width: 56px; height: 56px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-fill); } .wpcf7 .kontakt-form .ck-kurs-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .wpcf7 .kontakt-form .ck-kurs-tile-title { grid-area: titel; font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-sm-size); font-weight: 600; line-height: var(--type-title-sm-lh); color: var(--text-primary); overflow-wrap: break-word; } .wpcf7 .kontakt-form .ck-kurs-tile--soon .ck-kurs-tile-title { color: var(--text-secondary); } .wpcf7 .kontakt-form .ck-kurs-tile-official { grid-area: text; font-size: var(--type-label-md-size); line-height: var(--type-body-sm-lh); color: var(--text-secondary); overflow-wrap: break-word; } .wpcf7 .kontakt-form .ck-kurs-tile-badge { grid-area: text; justify-self: start; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--surface-fill); font-size: var(--type-label-sm-size); font-weight: 700; letter-spacing: var(--tracking-label); color: var(--text-secondary); } .wpcf7 .kontakt-form .ck-kurs-tile-check { grid-area: haken; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); color: transparent; } .wpcf7 .kontakt-form .ck-kurs-tile-check svg { width: 14px; height: 14px; } .wpcf7 .kontakt-form .ck-kurs-tile[aria-pressed="true"] .ck-kurs-tile-check { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--text-on-brand); } .wpcf7 .kontakt-form .form-field:has(.ck-kurs-hidden.wpcf7-not-valid) .ck-kurs-tile:not(.ck-kurs-tile--soon) { border-color: var(--surface-alert); } /* Absenden: werbender Knopf (R-E, 56 px). CF7 sperrt ihn, bis die Einwilligung angehakt ist */ .wpcf7 .kontakt-form .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin: 0; padding: var(--space-4) var(--space-8); border: 1.5px solid transparent; border-radius: var(--radius-pill); background: var(--brand-primary); color: var(--text-on-brand); font-family: var(--font-sans); font-size: var(--type-body-lg-size); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.2; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } .wpcf7 .kontakt-form .wpcf7-submit:hover { background: var(--brand-primary-hover); box-shadow: var(--shadow-md); } .wpcf7 .kontakt-form .wpcf7-submit:active { background: var(--brand-active); box-shadow: var(--shadow-pressed); } .wpcf7 .kontakt-form .wpcf7-submit:disabled { background: var(--surface-marker); color: var(--text-secondary); box-shadow: none; cursor: not-allowed; } .wpcf7 .wpcf7-form .wpcf7-spinner { display: none; width: 24px; height: 24px; margin: 0 var(--space-4); padding: 0; border: 2px solid var(--border-default); border-top-color: var(--brand-primary); border-radius: var(--radius-pill); background: transparent; vertical-align: middle; } .wpcf7 .wpcf7-form .wpcf7-spinner::before { content: none; } .wpcf7 .wpcf7-form.submitting .wpcf7-spinner { display: inline-block; visibility: visible; animation: ckDreh calc(var(--duration-slow) * 3) linear infinite; } @keyframes ckDreh { to { transform: rotate(360deg); } } /* Rückmeldung nach dem Absenden (CF7 setzt die Klasse am form: invalid, unaccepted, failed, spam, sent) */ .wpcf7 .wpcf7-form .wpcf7-response-output { margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); border: 1.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); font-family: var(--font-sans); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: var(--text-primary); } .wpcf7 .wpcf7-form .wpcf7-response-output:empty, .wpcf7 .wpcf7-form.init .wpcf7-response-output, .wpcf7 .wpcf7-form.resetting .wpcf7-response-output, .wpcf7 .wpcf7-form.submitting .wpcf7-response-output { display: none; } .wpcf7 .wpcf7-form.invalid .wpcf7-response-output, .wpcf7 .wpcf7-form.unaccepted .wpcf7-response-output, .wpcf7 .wpcf7-form.payment-required .wpcf7-response-output, .wpcf7 .wpcf7-form.failed .wpcf7-response-output, .wpcf7 .wpcf7-form.aborted .wpcf7-response-output, .wpcf7 .wpcf7-form.spam .wpcf7-response-output { border-color: var(--border-alert); background: var(--surface-alert-subtle); color: var(--text-alert); } /* Danke-Zustand: CF7 leert das Formular, Conditional Fields blendet die Gruppen wieder aus, die Meldung bleibt stehen */ .wpcf7 .wpcf7-form.sent .wpcf7-response-output { display: flex; align-items: flex-start; gap: var(--space-3); border-color: var(--border-success); background: var(--surface-success-subtle); color: var(--text-success); font-weight: 600; } .wpcf7 .wpcf7-form.sent .wpcf7-response-output::before { content: ''; flex: 0 0 auto; width: 8px; height: 14px; margin: 2px var(--space-1) 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (min-width: 861px) { .wpcf7 .kontakt-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); } .wpcf7 .kontakt-form .wpcf7-submit { width: auto; } } @media (prefers-reduced-motion: reduce) { .wpcf7 .kontakt-form .form-input, .wpcf7 .kontakt-form button.ck-kurs-tile, .wpcf7 .kontakt-form .ck-info-toggle svg, .wpcf7 .kontakt-form .wpcf7-submit { transition: none; } .wpcf7 .wpcf7-form.submitting .wpcf7-spinner { animation: none; } } /* ── Agent F 29.09. (E119, E120): App-Band, QR-Sheet, Reihe mit wenigen Karten ───────────────────────────────────────── App-Band (Produkt, zwischen Kapitel 01 und 02): dasselbe Band wie „Deine Daten, unsere Verantwortung“ (.fd-band, .fd-band__scroll, .fd-certchip), aber die Kacheln sind Links (a) mit Symbol im Kreis (.fd-tcard__media--icon, Farbregel E114 kommt von dort), Titel und einer Zeile Meta. Modifier .fd-band--app nur für Größen; zweites Band je Seite nur mit diesem Modifier (Vertrag §2, Lint V-01b). */ .fd-certchip, .fd-certchip:hover, .fd-certchip:focus, .fd-certchip:active { text-decoration: none; } .fd-certchip__txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.25; } .fd-certchip__txt b { font-weight: 700; } .fd-certchip__meta { font-size: var(--type-label-sm-size); font-weight: 500; white-space: normal; color: var(--text-secondary); } .fd-band--app .fd-certchip { min-height: 56px; padding-block: var(--space-2); } .fd-band--app .fd-tcard__media { width: 32px; height: 32px; } .fd-band--app .fd-tcard__media > svg { width: 18px; height: 18px; } @media (min-width: 861px) { .fd-band--app .fd-certchip { padding-block: 0; } .fd-band--app .fd-tcard__media { width: 48px; height: 48px; } .fd-band--app .fd-tcard__media > svg { width: 24px; height: 24px; } } /* QR-Code im Sheet (nur ab 861 mit feinem Zeiger geöffnet, faden-shared.js). Unter 861 nie sichtbar, auch nicht nach einem Größenwechsel */ .fd-sheet__body:has(.fd-sheet__qr) { text-align: center; } .fd-sheet__body:has(.fd-sheet__qr) h3 { padding-left: var(--space-10); } .fd-sheet__qr { display: block; width: 240px; max-width: 100%; height: auto; aspect-ratio: 1; margin: var(--space-4) auto; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: 0 0 0 1px var(--border-default); } @media (max-width: 860.98px) { .fd-sheet__qr { display: none; } } /* Reihe mit höchstens drei Karten (Preise 01, E119): ab 1240 passen alle nebeneinander, dann füllen sie die volle Breite ohne Peek-Platz und ohne Pfeile. Bis 1239 bleibt es die scrollbare Reihe (E72). */ @media (min-width: 1240px) { .fd-carousel[data-car-desktop]:not(:has(> .fd-carousel__track > :nth-child(4))) > .fd-carousel__track .fd-tcard { flex: 1 1 0; } .fd-carousel[data-car-desktop]:not(:has(> .fd-carousel__track > :nth-child(4))) > .fd-carousel__nav { display: none; } } /* ── Agent A 29.09. (E121) Mobil nie zwei Demo-Knöpfe zugleich ── Solange der Hero-Knopf, ein Kapitel-Knopf (data-cta-inline) oder der klebende Knopf im Bild ist, setzt faden-shared.js html.fd-demo-eins, dann ruht der kleine Demo-Knopf in der Kopfleiste (nur unter 861, dort gibt es den klebenden Knopf). Ohne JS bleibt er stehen. */ /* 11.10.2026: Regel entfernt. Der Kopf trägt keinen Demo-Knopf mehr („Kontakt“ und „Lizenz kaufen“, Abschnitt 29), es gibt keine doppelten Demo-Knöpfe mehr zu verhindern. faden-shared.js setzt html.fd-demo-eins weiter, die Klasse hat keine Wirkung mehr. */ /* ── Agent A 29.09. (E123) Kontakt: Wege und Unterlagen mittig auf einer Ebene ── .fd-ch__nach--mitte zentriert die Überschrift, .fd-wege--mitte die Karten (ab 1048 drei gleich breite Karten in der Mitte), .fd-wege--vier die Unterlagen (ab 861 zwei mal zwei Karten, höchstens 400 px breit, mittig, mobil eine Spalte; vier in einer Reihe brachen „Nutzungsbedingungen“ mitten im Wort). Reihenfolge der Regeln nicht ändern (gleiche Spezifität). */ .fd-ch__nach--mitte > .fd-h3 { text-align: center; } .fd-wege--mitte { justify-content: center; } @media (min-width: 861px) { .fd-wege--mitte:not(.fd-wege--vier) { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); } .fd-wege--vier { grid-template-columns: repeat(2, minmax(0, 400px)); } } @media (min-width: 1048px) { .fd-wege--mitte:not(.fd-wege--vier) { grid-template-columns: repeat(3, minmax(0, 320px)); } } /* Reihe im Kapitel (E119): der negative Spurrand (Platz für den Kartenschatten, Regel data-car-desktop) fiel mit dem Rand von .fd-ch__medien zusammen (Randkollaps) und ließ Text → Medien 8 px kürzer messen, obwohl die Karten richtig standen (M7 32 statt 40). flow-root am Karussell hält den Spurrand darin, die Karten stehen unverändert. Trust-Leiste bleibt ausgenommen (E68, 112 px). */ .fd-ch__medien > .fd-carousel[data-car-desktop] { display: flow-root; } /* Preise 01 (E119, E112): Kopf breit auch für text-karten. Statt Lead links im Lesemaß und Begleiter rechts (K5, brach den Preis-Satz und den Knopf in eine schmale Spalte) steht der Lead über die volle Breite, darunter in einer Zeile der Demo-Satz mit Knopf, dann die Reihe. */ @media (min-width: 1048px) { .fd-ch[data-muster="text-karten"][data-kopf="breit"] .fd-ch__text:has(> .fd-ch__begleit) { display: block; } .fd-ch[data-muster="text-karten"][data-kopf="breit"] .fd-ch__text > .fd-ch__lead .fd-body { max-width: none; } .fd-ch[data-muster="text-karten"][data-kopf="breit"] .fd-ch__text > .fd-ch__begleit { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-top: var(--space-6); } .fd-ch[data-muster="text-karten"][data-kopf="breit"] .fd-ch__begleit > * { margin-top: 0; } } /* ── Agent G 29.09. (E122, E128) Team: Zeitlinie, Experten-Porträts, Logo-Platzhalter, Deutschlandkarte, Klick-Hinweis an einer Karte ────────── Zeitlinie .fd-zeit (Kapitel „Unsere Geschichte“, ein Medium in text-breit): ein geschwungener Pfad in Markenfarbe, sechs Stationen mit kleiner Kachel. Bis 1047 senkrecht und zentriert (Pfad läuft zwischen den Kacheln in S-Kurven, Punkt am oberen Kachelrand, feste Zeilenhöhe 168 = viewBox 1008), ab 1048 quer über die volle Breite, Kacheln abwechselnd über und unter dem Pfad (viewBox 1000 x 440 = 440 px Höhe, Punkt liegt genau auf dem Pfad, Stationen bei 12 % + k x 15,2 %, damit die halbe Kachelbreite (24cqi / 2) nie links über die Textkante reicht). Pfad ohne Verzerrung der Linie (non-scaling-stroke). */ .fd-zeit { position: relative; width: 100%; max-width: 420px; margin: 0 auto; container-type: inline-size; } .fd-zeit__pfad { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fd-zeit__pfad path { fill: none; stroke: var(--brand-primary); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; } .fd-zeit__pfad--quer { display: none; } .fd-zeit__liste { position: relative; } .fd-zeit__station { position: relative; height: 168px; } .fd-zeit__punkt { position: absolute; z-index: 1; left: 50%; top: 14px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: var(--radius-pill); background: var(--brand-primary); box-shadow: 0 0 0 4px var(--surface-page); } .fd-zeit__kachel { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: min(260px, 100%); padding: var(--space-5) var(--space-4) var(--space-4); text-align: center; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .fd-zeit__datum { min-height: 20px; font-size: var(--type-label-sm-size); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); } .fd-zeit__kachel b { display: block; font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-sm-size); font-weight: 600; line-height: var(--type-title-sm-lh); color: var(--text-primary); overflow-wrap: break-word; } .fd-zeit__kachel p { margin: 0; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--text-primary); } @media (min-width: 1048px) { .fd-zeit { max-width: none; height: 440px; } .fd-zeit__pfad--hoch { display: none; } .fd-zeit__pfad--quer { display: block; } .fd-zeit__liste { position: absolute; inset: 0; } .fd-zeit__station { position: absolute; top: 0; height: 100%; width: 0; } .fd-zeit__station:nth-child(1) { left: 12%; } .fd-zeit__station:nth-child(2) { left: 27.2%; } .fd-zeit__station:nth-child(3) { left: 42.4%; } .fd-zeit__station:nth-child(4) { left: 57.6%; } .fd-zeit__station:nth-child(5) { left: 72.8%; } .fd-zeit__station:nth-child(6) { left: 88%; } .fd-zeit__punkt { left: 0; top: 148px; } .fd-zeit__station:nth-child(even) .fd-zeit__punkt { top: 292px; } .fd-zeit__kachel { left: 0; top: auto; bottom: 314px; width: min(250px, 24cqi); padding: var(--space-4); } .fd-zeit__station:nth-child(even) .fd-zeit__kachel { top: 314px; bottom: auto; } } /* Experten-Porträts (Team 03): acht gleich große Kacheln 4:5, mobil 2 Spalten, ab 861 vier. Personen ohne Foto und Themen ohne Namen zeigen dieselbe Fläche mit Silhouette (Lucide user-round, E122). Fläche Sand, Linie Espresso (E114). Bald ein Foto: img statt .fd-crop__platz, nichts sonst ändern. */ .fd-experten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); width: 100%; } .fd-experten > * { min-width: 0; } .fd-crop__platz { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--surface-fill); color: var(--text-primary); } .fd-crop__platz svg { width: 44%; height: auto; } .fd-experten .fd-crop__caption > span:first-child { display: inline; } .fd-experten .fd-crop__caption > span + span { display: block; margin-top: var(--space-1); font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-label-lg-size); font-weight: 600; text-transform: none; color: var(--text-primary); } @media (min-width: 861px) { .fd-experten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); } } /* Logo-Kacheln (Team 05 Partner): Fläche Sand mit dem Firmenlogo (img), bis das Logo geliefert ist der Platzhalter .fd-ph. Darunter Name und eine Zeile. */ .fd-partnerlogo { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); width: 100%; margin: 0; } .fd-ch__medien > .fd-partnerlogo { align-self: start; } /* beide Logo-Kacheln gleich breit und mit gemeinsamer Oberkante */ .fd-partnerlogo__platz { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-fill); text-align: center; } .fd-partnerlogo__platz img { display: block; max-width: 70%; max-height: 60%; object-fit: contain; } .fd-partnerlogo__name { display: flex; flex-direction: column; gap: 2px; } .fd-partnerlogo__name b { font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-title-sm-size); font-weight: 600; line-height: var(--type-title-sm-lh); color: var(--text-primary); } .fd-partnerlogo__name span { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--text-secondary); } @media (max-width: 860.98px) { .fd-ch[data-muster="text-2medien"] .fd-ch__medien:has(> .fd-partnerlogo) { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } } /* Deutschlandkarte (Team 06): Umriss Natural Earth (gemeinfrei, Paket world-atlas 2, countries-50m, vereinfacht). Die Schutzlinie ist ein Ring im Abstand von 18 Einheiten: ein breiter Strich in Markenfarbe (gestrichelt) unter einem etwas schmaleren Strich in Seitenfarbe unter der Landfläche, sichtbar bleibt nur der äußere Rand des Rings. Punkte und Texte zeigen keine Zustände. Schrift aus Tokens. */ .fd-karte { margin: 0; width: 100%; max-width: 420px; } .fd-karte svg { display: block; width: 100%; height: auto; } .fd-karte__ring { fill: none; stroke: var(--brand-primary); stroke-width: 41px; stroke-linejoin: round; } .fd-karte__luecke { fill: none; stroke: var(--surface-page); stroke-width: 36px; stroke-linejoin: round; } .fd-karte__land { fill: var(--surface-fill); stroke: var(--text-primary); stroke-width: 1.5px; stroke-linejoin: round; } .fd-karte__punkt { fill: var(--text-primary); stroke: var(--surface-page); stroke-width: 2.5px; } .fd-karte__punkt--daten { stroke: var(--brand-primary); stroke-width: 3px; } .fd-karte__text { font-family: var(--font-sans); font-size: var(--type-label-lg-size); font-weight: 600; fill: var(--text-primary); } .fd-karte__text--links { text-anchor: end; } .fd-karte text { display: inline; } /* ohne Wirkung auf SVG-Text, aber die Messung M1 nimmt dann die Karte als Träger statt des Textelements selbst (Rundungsfunde von unter 2 px, Agent C 29.09.) */ .fd-karte__etikett rect { fill: var(--surface-page); stroke: var(--brand-primary); stroke-width: 1.5px; } .fd-karte__etikett text { font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-label-lg-size); font-weight: 600; fill: var(--text-primary); } /* Team 02 mit sieben Personenkarten: ab 1240 vier Spalten (4 + 3) statt 3 + 3 + 1, keine einzelne Karte in der letzten Zeile. Kompakter Kartenrand, damit Rolle und Name lesbar bleiben. */ @media (min-width: 1240px) { .fd-carousel__track:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } .fd-carousel__track:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) .fd-tcard__btn { gap: var(--space-3); padding: var(--space-4); } } /* Klick-Hinweis an genau einer Personenkarte (E122, E83, E96): Symbol nur an der ersten Karte (Seiten-HTML), Takt alle 5 s von selbst wie am Zertifikats-Band (dieselben Keyframes), Ruhe nach dem ersten Öffnen oder Fokus (.is-ruhig aus faden-shared.js, WCAG 2.2.2). Weniger Bewegung: Abschnitt 14 stoppt .fd-tcard__tap svg * */ .fd-js .fd-tcard__tap--takt .fd-tap__cur { animation: fdTapTaktCur 5s var(--ease-out) .8s infinite both; } .fd-js .fd-tcard__tap--takt .fd-tap__ray { animation: fdTapTaktRay 5s var(--ease-out) .8s infinite both; } .fd-js [data-takt].is-ruhig .fd-tcard__tap--takt .fd-tap__cur, .fd-js [data-takt].is-ruhig .fd-tcard__tap--takt .fd-tap__ray { animation: none; } /* ══ 16 Konzept D und Handy v9 (E130, E131, 01.10.2026, Cloud-Session) ═══════════════════════════════════════════════ E130: Aussagen mit Trennlinien (Layoutstudie D, demos/handy-text-optionen.html) ist der Standard für jedes Kapitel mit Handy und für reine Aussage-Listen. Muster data-muster="aussagen": in .fd-ch__text optional ein Einstieg (.fd-aussagen__einstieg, ein Satz), dann ul/ol.fd-aussagen mit 3 bis 5 Aussagen (je eine Zeile, feine Linie darunter). Rechts höchstens ein Medium: v9-Handy, Karte oder Bild. Mobil und bis 1047: Text, darunter das Medium mittig. Ab 1048: Text links, Medium rechts an der Außenkante, beide auf einer Mittelachse. E131: Handy nur noch als v9-Standard. figure.fd-phone.fd-phone--v9 > .fd-phone__screen > iframe.fd-phone__v9 (assets/v9/v9.html?ansicht=…). Der echte App-Prototyp v9 läuft im Bildschirm des Bild3-Rahmens (Vektor wie E90), logisch 390 x 821 (Seitenverhältnis des Bildschirms 360 x 758), skaliert auf die Bildschirmbreite: --fd-v9-s = Bildschirmbreite / 390 (faden-shared.js misst nach, ohne JS gilt der Wert für 270 px). Keine Scrollbar im Handy: die blendet v9.html selbst aus (scrollbar-width none), die Seite gibt dem iframe kein Scrollen. */ :root { --fd-v9-w: min(270px, calc(100vw - var(--fd-inset) - var(--fd-gutter))); /* eine Handygröße für die ganze Website */ --fd-v9-s: .632548; /* 270 * 360 / 394 / 390 */ } .fd-phone.fd-phone--v9 { --fd-phone-w: var(--fd-v9-w); width: var(--fd-v9-w); max-width: 100%; } .fd-phone--v9 .fd-phone__screen { background: var(--surface-page); } .fd-phone__v9 { position: absolute; left: 0; top: 0; display: block; width: 390px; height: 821px; border: 0; background: transparent; transform: scale(var(--fd-v9-s)); transform-origin: 0 0; color-scheme: light; } .fd-ch[data-muster="aussagen"] .fd-ch__body { display: block; } .fd-ch[data-muster="aussagen"] .fd-ch__text { max-width: none; } .fd-ch[data-muster="aussagen"] .fd-ch__medien { justify-items: center; margin-top: var(--space-10); } .fd-aussagen__einstieg { margin: 0; font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); color: var(--text-secondary); max-width: var(--fd-measure); } .fd-ch__text > .fd-aussagen__einstieg + .fd-aussagen { margin-top: var(--space-2); } .fd-aussagen { margin: 0; padding: 0; list-style: none; counter-reset: fd-aussage; } .fd-aussagen > li { position: relative; margin: 0; padding: var(--space-5) 0 var(--space-3); border-bottom: 1px solid var(--border-default); font-family: var(--font-sans); font-size: var(--type-title-md-size); font-weight: 500; line-height: var(--type-title-md-lh); color: var(--text-primary); text-wrap: pretty; } .fd-aussagen > li:first-child { padding-top: var(--space-2); } .fd-aussagen b, .fd-aussagen strong { font-weight: 700; } /* Reihenfolge (ol, Setup): kleine Nummer vor der Aussage, gleiche Linie, keine Kachel */ ol.fd-aussagen > li { counter-increment: fd-aussage; display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); column-gap: var(--space-3); align-items: baseline; } ol.fd-aussagen > li::before { content: counter(fd-aussage, decimal-leading-zero); font-family: var(--font-heading); letter-spacing: var(--tracking-wide); font-size: var(--type-label-md-size); font-weight: 600; color: var(--text-secondary); } .fd-ch[data-muster="aussagen"] .fd-ch__medien > .fd-crop { width: 100%; max-width: 560px; } /* Nachsatz unter der Liste (optional, einmal): ein Satz, ein Knopf oder der Quellen-Knopf .fd-info */ .fd-aussagen__nach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); } .fd-aussagen__nach > * { margin: 0; } .fd-aussagen__nach > .fd-body { flex: 1 1 18em; color: var(--text-secondary); } .fd-aussagen .fd-problem__mark { font-weight: 600; } @media (min-width: 861px) { :root { --fd-v9-w: 270px; } .fd-ch[data-muster="aussagen"] .fd-ch__medien { margin-top: var(--fdd-media); } .fd-aussagen > li { padding: var(--space-6) 0 var(--space-4); font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-lh); } .fd-aussagen > li:first-child { padding-top: var(--space-2); } ol.fd-aussagen > li { grid-template-columns: var(--space-10) minmax(0, 1fr); } } @media (min-width: 1048px) { /* Paar aus Aussagen und Medium: gemeinsame Mittelachse, Medium an der Außenkante, Text höchstens 640 breit (eine Aussage = eine bis zwei Zeilen) */ .fd-ch[data-muster="aussagen"] .fd-ch__body:has(> .fd-ch__medien) { display: grid; grid-template-columns: minmax(0, 640px) auto; justify-content: space-between; column-gap: var(--space-16); align-items: center; max-width: 1040px; } .fd-ch[data-muster="aussagen"] .fd-ch__body:has(> .fd-ch__medien) > .fd-ch__medien { margin-top: 0; justify-items: end; } /* Spiegel (data-medium="links"): folgen zwei Aussage-Kapitel aufeinander, wechselt das Medium die Seite (Stilbild: nie dreimal dieselbe Komposition) */ .fd-ch[data-muster="aussagen"][data-medium="links"] .fd-ch__body:has(> .fd-ch__medien) { grid-template-columns: auto minmax(0, 640px); } .fd-ch[data-muster="aussagen"][data-medium="links"] .fd-ch__body:has(> .fd-ch__medien) > .fd-ch__medien { order: -1; justify-items: start; } /* Ohne Medium: Aussagen über die Satzbreite (E112), Zeilenlänge bleibt lesbar */ .fd-ch[data-muster="aussagen"] .fd-ch__body:not(:has(> .fd-ch__medien)) .fd-aussagen > li { max-width: 46em; } } @media (min-width: 1240px) { .fd-aussagen > li { padding: var(--space-8) 0 var(--space-4); font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh); } .fd-aussagen > li:first-child { padding-top: var(--space-2); } .fd-aussagen__einstieg { font-size: var(--type-title-md-size); line-height: var(--type-title-md-lh); } } /* ── Feinschliff Anzeige (01.10.2026, Cloud-Session) ── */ /* Zitat-Karte in der Trust-Leiste (E132): das Zitat liest sich als Satz, nicht als Titel, damit die Karte nicht höher wird als die übrigen */ .fd-tcard--zitat b { font-family: var(--font-sans); letter-spacing: normal; font-size: var(--type-label-lg-size); font-weight: 500; line-height: var(--type-label-lg-lh); text-wrap: pretty; } .fd-tcard--zitat b .fd-tcard__meta { font-weight: 600; } @media (max-width: 860.98px) { /* Fußzeile mobil: vier Rechtslinks als 2 x 2, nie ein einzelner Link allein in der letzten Zeile (Mobil-Bericht P3) */ .fd-footer__nav ul { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: var(--space-6); } /* Kontakt: das Nachrichtenfeld zeigt den ganzen Beispieltext, er wird mobil nicht abgeschnitten */ .wpcf7 .kontakt-form textarea.form-input { height: 168px; } /* Dashboard-Ausschnitt mobil (K7: nur die zwei Kennzahl-Kacheln, 372/744 px): auf Tablets nicht über die Lesegröße hinaus aufziehen, sonst wirken die Kacheln riesig und unscharf */ .fd-ch__medien > .fd-crop--lift:has(picture) { max-width: 440px; margin-inline: auto; } } /* 17 Team: Praxis- und Partner-Links (E136, 07.10.2026). Trefferfläche 44 px wie .fd-link (M5) */ .fd-experten .fd-crop__caption > a, .fd-partnerlogo__name > a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; min-width: 44px; } /* Fokusfund Z5 (13.10.2026): der Partner-Link streckte sich in der Spalte über die ganze Kartenbreite, der Fokusring war ein 430-px-Kasten mit scharfen Ecken direkt am Text (am Handy lag seine Ecke unter dem Nach-oben-Knopf). Jetzt so breit wie der Link, gerundeter Ring mit 4 px Luft (outline-offset, das Layout bleibt) */ .fd-partnerlogo__name > a { align-self: flex-start; border-radius: var(--radius-sm); } .fd-partnerlogo__name > a:focus-visible { outline-offset: 4px; } /* Fokusfund Z5 (13.10.2026): nach einem Mausklick bleibt der Link im :focus und Kadence (a:focus) färbte ihn auf die Hover-Farbe (#803D17 → #652B08), er sah anders aus als vorher. :focus steht beim Normalzustand wie bei .fd-link (S68), Hover und Gedrückt behalten die dunklere Farbe */ .fd-experten .fd-crop__caption > a, .fd-experten .fd-crop__caption > a:visited, .fd-experten .fd-crop__caption > a:focus, .fd-partnerlogo__name > a, .fd-partnerlogo__name > a:visited, .fd-partnerlogo__name > a:focus { color: var(--text-link); } .fd-experten .fd-crop__caption > a:hover, .fd-experten .fd-crop__caption > a:active, .fd-partnerlogo__name > a:hover, .fd-partnerlogo__name > a:active { color: var(--text-link-hover); } .fd-tcard__media--de { background: none; } /* Kommentar start-1 (Jan 07.10.): der ganze Kreis in Deutschlandfarben statt Flagge im Sand-Kreis, Ausnahme zu E124 */ .fd-tcard__media--de img { width: 100%; height: 100%; } .fd-personas--ansicht { grid-template-columns: repeat(2, max-content); justify-content: start; } /* Umschalter Heute/Wochenplan (07.10.), Breite nach Inhalt statt Drittel */ .fd-personas--ansicht .fd-persona { padding: var(--space-1) var(--space-4); } /* ── Aussagen ruhiger (Jan 07.10.2026: „zu groß geschrieben, nicht sauber“, gilt website-weit nach E108) ── Aussage höchstens title-md statt display-md, weniger Luft. Neu: