/* Seiten-eigene Stile der Landingpage — nutzt die Designsystem-Token und -Schriften.
Waechst in Phase 3/4 zum echten Seitenlayout. Kein harter Farbwert ausserhalb der
Zeitleisten-Einmaltoene: alles ueber --ds-*. */
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ds-paper);
color: var(--ds-graphite);
font-family: 'Libre Franklin', system-ui, sans-serif;
}
a { color: var(--ds-ink); }
a:hover { color: var(--ds-gold); }
/* aus den style-hover-Attributen von Design C: */
.btn-dunkel:hover { background: var(--ds-ink-hover) !important; }
.btn-gold:hover { background: var(--ds-gold-bright) !important; }
.nav-link:hover { color: var(--ds-gold) !important; }
/* Scroll-Spy: der Link zum gerade sichtbaren Abschnitt (gesetzt per JS in fuss.php). */
.nav-link.aktiv { color: var(--ds-gold) !important; }
/* Bedienelemente der Bild-Karussells (per JS in fuss.php erzeugt). */
.karussell-steuerung { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.karussell-pfeil {
appearance: none; -webkit-appearance: none;
border: 1px solid var(--ds-rule); background: var(--ds-paper); color: var(--ds-ink);
width: 36px; height: 36px; border-radius: 50%;
font-size: 20px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.karussell-pfeil:hover { border-color: var(--ds-ink); }
.karussell-punkte { display: flex; gap: 8px; align-items: center; }
.karussell-punkt {
appearance: none; -webkit-appearance: none; border: none; padding: 0;
width: 8px; height: 8px; border-radius: 50%; background: var(--ds-rule); cursor: pointer;
}
.karussell-punkt[aria-current="true"] { background: var(--ds-gold); }
input:focus, textarea:focus { border-color: var(--ds-ink); box-shadow: 0 0 0 1px var(--ds-ink); outline: none; }
/* §13 FAQ — natives Akkordeon: Standard-Dreieck weg, +/x als Zustandszeichen */
.faq-eintrag > summary { list-style: none; }
.faq-eintrag > summary::-webkit-details-marker { display: none; }
.faq-zeichen { transition: transform .15s ease; }
.faq-eintrag[open] .faq-zeichen { transform: rotate(45deg); }
/* Terminbuchung — Slot-Picker im hellen Formular-Card (#termin). JS in fuss.php fuellt #termin-slots. */
.termin-slots-box { max-height: 220px; overflow-y: auto; margin: 4px 0 6px; }
.termin-tag-kopf { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ash); margin: 16px 0 8px; }
.termin-tag-kopf:first-child { margin-top: 0; }
.termin-tag-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.termin-slot {
appearance: none; -webkit-appearance: none;
background: var(--ds-white); border: 1px solid var(--ds-field-rule); color: var(--ds-ink);
padding: 9px 14px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
.termin-slot:hover { border-color: var(--ds-gold); }
.termin-slot.gewaehlt { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-paper); }
.termin-leer { font-size: 14px; color: var(--ds-stone); line-height: 1.6; }
/* Lade- und Erfolgszustand der Funnel-Formulare (Kursanmeldung, Terminbuchung) — bis 07.09.2026
eine Eigengestaltung, weil der Zugriff auf das Claude-Design-Projekt "Landingpage E" zeitweise
nicht gelang (DesignSync.list_projects filtert auf Design-System-Projekte, "Landingpage E" ist
vom Typ PROJECT_TYPE_PROJECT). Ueber get_file mit der Projekt-Id direkt gefunden: der Entwurf
ersetzt bei Absenden das GANZE Formular durch einen rotierenden Ring, danach durch ein sich
zeichnendes Haekchen — nicht nur einen Button-Spinner mit angehaengter Zeile. Werte (Radius 44,
Strichbreite 3/6, Timing/Kurven) wortgleich aus "Landingpage E.dc.html" uebernommen, nur Hex-Farben
durch die entsprechenden Tokens ersetzt (#C08A14 -> --ds-gold, #16213A -> --ds-ink, #4A4F5C ->
--ds-graphite). Die Ringspur selbst (#E0DED6) hat keinen eigenen Token — kein Wert in
tokens.css liegt naeher als --ds-rule (#E5E4DE, "Linien"); --ds-field-rule waere die falsche
Rolle (Formular-Rahmen, deutlich dunkler/gesaettigter). */
.formular-busy,
.formular-erfolg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 34px 0;
}
.formular-spinner,
.formular-check { width: 84px; height: 84px; display: block; }
.formular-spinner { animation: formular-spin 900ms linear infinite; }
.formular-spinner .spur { fill: none; stroke: var(--ds-rule); stroke-width: 3; }
.formular-spinner .lauf {
fill: none; stroke: var(--ds-gold); stroke-width: 3; stroke-linecap: round;
stroke-dasharray: 70 206;
}
.formular-check { animation: formular-pop 420ms cubic-bezier(.2, .9, .3, 1.2) both; }
.formular-check circle { fill: none; stroke: var(--ds-gold); stroke-width: 3; }
.formular-check .haken {
fill: none; stroke: var(--ds-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 80; stroke-dashoffset: 80;
animation: formular-draw 420ms 300ms cubic-bezier(.4, 0, .2, 1) forwards;
}
.formular-busy h3, .formular-erfolg h3 {
font-family: var(--ds-font-serif); font-size: 26px; font-weight: 500; color: var(--ds-ink);
line-height: 1.25; margin: 22px 0 0;
}
.formular-erfolg h3 { animation: formular-fade 300ms 520ms both; }
.formular-busy p, .formular-erfolg p {
font-size: 15px; color: var(--ds-graphite); line-height: 1.7; margin: 10px 0 0; max-width: 32ch;
}
.formular-erfolg p { animation: formular-fade 300ms 640ms both; }
/* "App öffnen" (Erfolgszustand Kursanmeldung, seit 09.09.2026 kein Magic-Link mehr) und der
kleine Hinweistext darunter -- Werte wortgleich aus "Registrierung PWA.dc.html" (Screen 01):
Knopf margin-top 26px, Hinweis 13px/#6E7280/margin-top 18px, beide eigene Fade-Verzoegerung. Die
generische ".formular-erfolg p"-Regel oben traefe sonst auch den Hinweistext (32ch/10px/640ms),
deshalb hier mit dem Klassen-Selektor ueberschrieben statt einer zweiten ohne Unterschied. */
#kurs-erfolg-app {
margin-top: 26px;
animation: formular-fade 300ms 760ms both;
}
.formular-erfolg p.formular-erfolg-klein {
font-size: 13px;
color: var(--ds-stone);
line-height: 1.65;
margin-top: 18px;
max-width: 32ch;
animation: formular-fade 300ms 940ms both;
}
.formular-erfolg-klein a {
color: var(--ds-ink);
text-decoration: none;
border-bottom: 1px solid var(--ds-gold);
}
@keyframes formular-spin { to { transform: rotate(360deg); } }
@keyframes formular-pop {
0% { transform: scale(.4); opacity: 0; }
60% { transform: scale(1.06); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes formular-draw { to { stroke-dashoffset: 0; } }
@keyframes formular-fade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.formular-spinner, .formular-check, .formular-check .haken, .formular-erfolg h3, .formular-erfolg p {
animation: none;
}
.formular-check .haken { stroke-dashoffset: 0; }
}
/* Portrait (Sektion 4, "Wer mit Ihnen arbeitet") -- Entwurf deckelt bei max-width:260px, kein
ds-split-Verhaeltnis trifft das pixelgenau, deshalb direkt am Bild. Randfarbe #E0DED6 hat wie
beim Karussell-Ring keinen eigenen Token, --ds-rule (#E5E4DE) liegt am naechsten. */
.wer-portrait {
display: block;
width: 100%;
max-width: 260px;
height: auto;
border: 1px solid var(--ds-rule);
}
/* Auftraggeberwunsch (10.09.2026), NUR am Telefon: die 260px-Deckelung liess das Bild dort links
ausgerichtet mit sichtbarem Leerraum daneben stehen -- ds-split stapelt unter 48rem ohnehin auf
eine Spalte (ds-split.css), das Bild darf dort die volle Spaltenbreite ausfuellen wie der Text
darunter. Bewusst kein echtes Bluten ueber den Container-Rand hinaus: Bild und Text bleiben auf
derselben Breite/demselben Einzug, "Text darf nicht an den Rand gehen" bleibt damit automatisch
erfuellt, ohne eine zweite Regel dafuer zu brauchen. */
@media (width < 44rem) {
.wer-portrait {
max-width: none;
}
}
/* TÜV-Beleg unter dem Testimonial (Sektion 4) — Badge inline neben dem Satz, mit Trennlinie
darueber. Zielwerte aus dem Claude-Design-Export: Badge 52px hoch, Trennlinie in derselben
Randfarbe wie die Karte selbst. Kein Vorbild als fertiges Bauteil (ds-person-card kann nur
einen kleinen runden Avatar, keine inline-Badge-Zeile neben einem grossen Foto), deshalb hier
als einfache Seiten-Klasse wie .formular-erfolg. */
.tuev-zeile {
display: flex;
align-items: center;
gap: 16px;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--ds-field-rule);
}
.tuev-zeile img {
height: 52px;
width: auto;
flex: none;
display: block;
}
/* "Warum anders" (Sektion 3): Vergleichszeilen Name-ueber-Satz, KEIN ds-table -- die Komponente
rendert am Desktop echte zwei Spalten, der Entwurf zeigt aber durchgehend nur eine schmale
Spalte (kein
in "Landingpage E.dc.html"). Auf Mobil sah die fruehere
ds-table[variant="feldwert"]-Loesung durch Zufall richtig aus (die Tabellenspalten kollabierten
dort aehnlich), am Desktop nicht -- daher der spaete Fund (09.09.2026). Werte wortgleich aus dem
Entwurf uebernommen; #FAF6EC hat keinen eigenen Token, --ds-gold-surface (#F3E6C8) liegt zu weit
daneben (deutlich saettigter), deshalb hier als Literalwert. */
.unterschied-liste {
display: flex;
flex-direction: column;
gap: 1px;
background: var(--ds-rule);
border: 1px solid var(--ds-rule);
}
.unterschied-zeile {
padding: 20px 22px;
background: var(--ds-paper);
}
.unterschied-zeile--aktuell {
background: #faf6ec;
box-shadow: inset 3px 0 0 var(--ds-gold);
}
.unterschied-name {
font-family: 'Newsreader', serif;
font-size: 19px;
font-weight: 500;
line-height: 1.3;
color: var(--ds-stone);
}
.unterschied-zeile--aktuell .unterschied-name {
color: var(--ds-ink);
}
.unterschied-text {
font-size: 15px;
line-height: 1.65;
margin-top: 6px;
color: var(--ds-stone);
}
.unterschied-zeile--aktuell .unterschied-text {
color: var(--ds-ink);
}
/* Lernplattform-Karussell (Sektion 5): ds-carousel gibt seinen Folien laut eigener Doku bewusst
keine Groesse vor ("das Karussell gibt ihnen nur ihren Platz in der Spur vor", ds-carousel.css)
-- ohne eigene Regel fuellte das ![]()
die volle Kartenbreite und wirkte am Desktop (breite
Karte) deutlich groesser als im Entwurf, wo es bei max-width:280px gedeckelt und zentriert
bleibt (Landingpage E.dc.html: "max-width:280px" an allen vier Handy-Bildern). Auf Mobil fiel
das nicht auf, weil die Karte dort selbst schon nahe an 280px breit ist. Die Folie
(.karussell-folie) traegt weiterhin die volle Spurbreite -- nur das Bild darin wird gedeckelt,
sonst brechen Paging/Transform (siehe Kommentar in landing.php). */
.karussell-folie {
display: flex;
justify-content: center;
}
.karussell-folie img {
display: block;
max-width: 280px;
}
/* „Das Programm" (Sektion 2): drei Monatskarten. gap+minmax aus dem Claude-Design-Export
uebernommen (landingpage-e.mobil.html, Abschnitt „2 · ANGEBOT"). Kein margin-top hier — der
Kopf-zu-Inhalt-Abstand kommt aus ds-sections eigenem Layout-Gap; ein zusaetzlicher Wert hier
wuerde sich draufaddieren statt ihn zu ersetzen. */
.monats-gitter {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
/* Hero-Kennzahlen (Sektion 1): vier Karten, die ihre Rahmenlinie schon selbst mitbringen
(ds-stat-card.card hat border+background) — deshalb hier gap:0 statt eines eigenen
Rahmens/Zwischenraums wie bei ds-stat-strip, sonst verdoppelt sich das Polster. 2 Spalten unter
44rem, 4 darueber — dieselbe Bruchgrenze wie ds-stat-strip selbst (dort per @container, hier per
@media, weil dieser Container keinen container-type traegt). */
.kennzahlen-gitter {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
@media (width < 44rem) {
.kennzahlen-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Kartenueberschriften in Newsreader statt der Hausvorgabe fuer h3 — document.css setzt ab h3
bewusst auf die Grotesk um ("Ueberschriften stehen in Newsreader, ab H3 wechselt das Design auf
die Grotesk"), eine bestandsweit richtige Regel, die die Claude-Design-Vorlage fuer die
Landingpage E aber an jeder Kartenueberschrift durchbricht: Testimonial, die drei Monatskarten,
die Erfolgsmeldung nach der Terminbuchung setzen alle 'Newsreader',serif; font-weight:500
(landingpage-e.mobil.html, mehrfach). Seitenweit statt je Stelle einzeln, weil bislang keine
Kartenueberschrift auf dieser Seite die Hausvorgabe will. .wer-heading fuer das Testimonial
(Sektion 4): steht seit dem ds-card->ds-split-Wechsel nicht mehr in ds-card (dessen media-Slot
passte nicht, siehe .wer-portrait weiter oben), braucht die Regel darum als eigene Klasse. */
ds-card h3,
.wer-heading {
font-family: var(--ds-font-serif);
font-weight: var(--ds-weight-medium);
}
/* `.wer-heading` ist ein und traegt darum document.css' Kartengroesse (--ds-text-h3, wie die
Monatskarten), der Entwurf will hier aber eine H2-Groesse: clamp(24px,4.8vw,32px), bei 1920px
Fensterbreite exakt 32px = --ds-text-h2 (Landingpage E.dc.html, Sektion 4). Ohne die
Breitengrenze (max-width:26ch im Entwurf) lief die Ueberschrift einzeilig statt in den
vorgesehenen drei Zeilen. ANDERS ALS BEI .termin-titel STEHT DIE GROESSE HIER **EBENFALLS**
erst ab 48rem: der Entwurfswert klammert bei 390px auf 24px (4.8vw unterschreitet dort die
Untergrenze) -- naeher am bisherigen H3-Default (22px) als an den ungebremsten 32px, und die
Auftraggeber-Ansage fuer diesen Durchgang war ausdruecklich "mobiles Design bleibt", nicht "auf
den Entwurfswert bei jeder Breite". */
@media (width >= 48rem) {
.wer-heading {
font-size: var(--ds-text-h2);
max-inline-size: 26ch;
}
}
/* Die drei "Sie erhalten"-Fusszeilen der Monatskarten fluchten sonst nicht: unterschiedlich lange
Saetze verschieben die Trennlinie je Karte um bis zu 27px. Der Entwurf setzt deshalb
min-height:4.8em auf genau diesen Text (landingpage-e.mobil.html:83), nicht auf die ganze
Fusszeile — nur das erzwingt gleiche Fusszeilenhoehe unabhaengig vom Satzlaenge. */
.monats-gitter [slot="footer"] p {
min-height: 4.8em;
}
/* Zwischen den drei Monatskarten und der Fusszeile ("Ihr Aufwand … / Passt das? 30 Min reden")
fehlte jeder Abstand: ds-sections eigener --ds-layout-gap (28px) gilt nur zwischen .head und
.body (zwei Grid-Kinder in ds-section.ts), nicht zwischen mehreren in .body geslotteten Kindern
-- .monats-gitter und der folgende ds-split sind zwei solche Kinder. Entwurf:
margin-top:28px auf genau dieser Fusszeile (Landingpage E.dc.html, Sektion 2) -- --ds-gap-lg
ist derselbe Wert, hier als Geschwisterabstand nachgezogen. */
.monats-gitter + ds-split {
margin-block-start: var(--ds-gap-lg);
}
/* "Das Programm" und "Termin" laufen im Entwurf randlos dunkel (background auf dem aeusseren
Element, landingpage-e.mobil.html:73), waehrend ds-section die Flaeche nur innerhalb ihrer
eigenen, von ds-container begrenzten Breite faerbt — auf breiten Bildschirmen blieb links und
rechts ein heller Streifen stehen. Die Farbe auf dem ohnehin vorhandenen -Wrapper
(volle Breite, kein eigenes Padding) traegt sie bis zum Rand; ds-sections eigene, engere Flaeche
liegt exakt in derselben Farbe darueber und faellt nicht auf. */
#angebot,
#termin {
background: var(--ds-ink);
}
/* Dieselbe Falle, gleiche Ursache, helle statt dunkle Flaeche: "Wer mit Ihnen arbeitet" (Sektion 4)
und "Kostenlos, ohne Gespraech" (Sektion 6) laufen im Entwurf ebenfalls randlos ein (background
auf dem aeusseren Element, landingpage-e.mobil.html:145,218) -- ds-section[tone="linen"] faerbte
auch hier nur die von ds-container begrenzte Breite. */
#wer,
#kurs {
background: var(--ds-linen);
}
/*
* SENKRECHTER ABSTAND ZWISCHEN SEKTIONEN FEHLTE VOLLSTAENDIG. Gemessen 07.09.2026: jede der acht
* , ds-container und ds-section trugen alle drei 0px padding-block — nichts trennte eine
* Sektion von der naechsten ausser einem Farbwechsel, und in "Das Programm" sass die Ueberschrift
* direkt an der oberen Kante der dunklen Flaeche. Weder ds-container (nur padding-inline) noch
* ds-section (nur der Kopf-zu-Inhalt-`gap`) uebernehmen das — das ist Absicht, nicht Luecke: die
* echte Lernplattform-Anwendung loest denselben Fall genauso, ueber eine SEITENEIGENE Klasse
* (`.view-section`, `Lernplattform/resources/js/.../app-shell.css:918`), nicht in der Bibliothek.
* Der Entwurf setzt an jeder der neun Sektionen ein eigenes `padding:clamp(A,Nvw,B) ...` mit A
* zwischen 44 und 48px, B zwischen 56 und 72px (`landingpage-e.mobil.html`, neun Fundstellen) —
* die Unterschiede zwischen den Sektionen sind 4-16px und optisch nicht zu rechtfertigen als neun
* einzelne Werte; ein gemeinsamer Wert in der Mitte des Bereichs traegt alle neun gut genug.
*/
main > section {
padding-block: clamp(44px, 6vw, 64px);
}
/*
* ZWISCHEN DEN FORMULARFELDERN STAND KEIN ABSTAND. Gemessen 07.09.2026: Name, E-Mail, Firma,
* Telefon, "Was hakt gerade?" beruehrten sich mit 0px Luecke — jedes ``/``
* ist ein eigenstaendiges, `display:block`-Bauteil ohne eigenen Aussenabstand (richtig fuer ein
* Bauteil, das nicht wissen kann, wo es landet), und das `