in .content würde dann, je nach Reihenfolge im
Stylesheet, fälschlich die generische Absatzfarbe statt der Lead-Farbe
bekommen. :where(...) um den GESAMTEN Selektor macht dessen Spezifität zu
(0,0,0): jede Bausteinklasse gewinnt dann garantiert, unabhängig davon,
wo sie im Stylesheet steht (wichtig, weil mehrere Agenten unabhängig
voneinander Klassen aus Teil B von KLASSEN.md kombinieren). */
:where(.content h2) {
margin: 56px 0 16px; font-weight: 700; font-size: 22px; letter-spacing: -.02em;
color: var(--ink); text-wrap: pretty; hyphens: auto; overflow-wrap: anywhere;
}
:where(.content h2:first-of-type) { margin-top: 0; }
:where(.content h3) {
margin: 28px 0 8px; font-weight: 700; font-size: 17px; letter-spacing: -.01em;
color: var(--ink); text-wrap: pretty; hyphens: auto; overflow-wrap: anywhere;
}
:where(.content p) { margin: 0 0 16px; max-width: 47ch; font-size: calc(17px + var(--fs-bump)); line-height: 1.65; color: var(--ink); text-wrap: pretty; }
:where(.content p:last-child) { margin-bottom: 0; }
/* Native Listen (z.B. Datenschutz-Aufzählung) im selben Duktus wie Absätze */
:where(.content ul, .content ol) { margin: 0 0 16px; padding-left: 22px; max-width: 47ch; font-size: calc(17px + var(--fs-bump)); line-height: 1.65; color: var(--ink); }
:where(.content li) { margin-bottom: 8px; }
:where(.content li:last-child) { margin-bottom: 0; }
:where(.content li)::marker { color: var(--accent); }
/* Trenner zwischen Themenblöcken (Rechtstexte) */
.content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
/* Echte
als Rückfall, falls eine Unterseite eine braucht (in den
Artboards selbst kommen nur die Grid-„Tabellen“ unten vor; Rechtstexte
haben keine Tabelle, aber die Struktur soll vollständig abbildbar sein).
In .table-scroll einpacken, damit sehr breite Tabellen bei 280px nicht
den Seiteninhalt aufreißen, sondern selbst scrollen. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15.5px; line-height: 1.5; }
.content table:last-child { margin-bottom: 0; }
.content th, .content td { text-align: left; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); }
.content th { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
/* ---------- Fließtext auf der strukturierten Seite (.wrap--seite) ----------
Abschnittsüberschrift (24px) für Das Angebot / Über mich. Anders als in
.content trägt hier NICHT die Überschrift den Vertikalabstand, sondern
das jeweils vorangehende Element (Grid/Karte) – siehe deren margin.
Kein eigener line-height-Wert: alle drei Artboard-Vorkommen dieser
Überschrift lassen line-height explizit weg (erbt 1.5 vom body). */
:where(.wrap--seite h2) {
margin: 0 0 16px; font-weight: 700; font-size: 24px; letter-spacing: -.02em;
color: var(--ink); text-wrap: pretty; hyphens: auto; overflow-wrap: anywhere;
}
:where(.wrap--seite p) { margin: 0 0 16px; max-width: 47ch; font-size: calc(17px + var(--fs-bump)); line-height: 1.65; color: var(--ink); text-wrap: pretty; }
:where(.wrap--seite p:last-child) { margin-bottom: 0; }
/* ---------- Inline-Hilfen ---------- */
/* Akzentfarbe für KURZEN Text auf hellem Grund (Zahlen-Präfixe, einzelne
Wörter wie „nicht“). Bewusst --accent-ink statt --accent: reines Orange-
rot erreicht bei Fließtextgröße nur ~3,96:1 auf Weiß (Large-Text-Wert),
für normalen Text sind 4,5:1 nötig. Gleiche Korrektur wie bei .eyebrow
in style.css, hier nur auf weitere Stellen übertragen. */
.text-akzent { color: var(--accent-ink); }
/* ---------- Kästen: Merkbox, Merksatz, Randnotiz ---------- */
/* Heller Kasten für Kernaussagen/Auswertungen („Der entscheidende Punkt“,
„Auswertung“, „Was KI nicht kann“). */
.callout { background: var(--surface); border-radius: 16px; corner-shape: squircle; padding: 24px; margin: 24px 0; }
/* :where(), gleicher Grund wie bei .content/.wrap--seite oben: das generische
im Callout darf .callout__titel (ebenfalls ein
) nicht überstimmen. */
:where(.callout p) { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
:where(.callout p:last-child) { margin-bottom: 0; }
.callout__titel { margin: 0 0 12px; font-weight: 700; font-size: 16px; color: var(--ink); }
/* Zitatblock/Merksatz: Balken links in Akzentfarbe, fette größere Zeile.
--kompakt für die etwas zurückhaltendere Über-mich-Verwendung. */
.merksatz { border-left: 3px solid var(--accent); padding: 4px 0 4px 24px; margin: 24px 0 40px; }
.merksatz p { margin: 0; font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.merksatz--kompakt { padding-left: 20px; }
.merksatz--kompakt p { font-size: 18px; }
/* Randnotiz „Woran Sie es erkennen“: schmaler Balken links, kleiner,
gedämpfter Text direkt unter einem Absatz. */
.notiz { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 14px; }
.notiz:last-child { margin-bottom: 0; }
.notiz strong { color: var(--ink); }
/* ---------- Selbsttest-Fragenliste (Checkliste) ----------
Dekoratives Kästchen: aria-hidden im Markup, kein echtes Formularfeld
(Vorlage aus den Artboards – der Leitfaden ist auch als Ausdruck/PDF
gedacht, Ankreuzen passiert auf Papier oder gedanklich). */
/* ---------- Punkteliste ----------
Ein Baustein für alle nummerierten/betitelten Kurzabsätze der Artboards:
„Vier Fragen bevor Sie anschaffen“, „Die fünf Momente“, „Der Weg in vier
Schritten“, Über-michs Urlaubs-Liste, Tür 3s Probelauf-Schritte. Ein
Punkt kann entweder aus .punkteliste__titel + .punkteliste__text bestehen
(zweizeiliges Muster) ODER aus einem einzelnen
mit eingebettetem
/.text-akzent (einzeiliges Muster) – beides ohne Zusatzklasse. */
.punkteliste { display: grid; gap: 16px; margin: 24px 0; }
.punkteliste__punkt { border-top: 1px solid var(--line); padding-top: 14px; }
/* :where(), gleicher Grund wie oben: das einzelne im einzeiligen Muster
soll nicht spezifischer sein als .punkteliste__titel/__text im zweizeiligen. */
:where(.punkteliste__punkt p) { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.punkteliste__titel { margin: 0 0 6px; font-weight: 700; font-size: 16px; color: var(--ink); }
.punkteliste__text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
/* ---------- Vergleichstabelle (Grid statt
) ----------
Kopfzeile in Versalien mit dickem Rahmen, Datenzeilen mit dünner Linie.
Basis: 2 Spalten („Was gesagt wird“ / „Was oft gemeint ist“).
--nummeriert: 3 Spalten mit schmaler Ziffernspalte (Tür 3, „Merkmal“). */
.vergleichstabelle { display: grid; margin: 24px 0; }
.vergleichstabelle__kopf, .vergleichstabelle__zeile { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
.vergleichstabelle__kopf > *, .vergleichstabelle__zeile > * { min-width: 0; }
.vergleichstabelle__kopf { border-bottom: 2px solid var(--ink); padding: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vergleichstabelle__zeile { border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 15px; line-height: 1.55; }
/* :where(), gleicher Grund wie oben: in der --nummerierten Variante ist die
erste Spalte .vergleichstabelle__num (eigene Farbe/Größe), nicht die
generische „erste Spalte fett+dunkel“-Vorgabe für die zweispaltige Basis. */
:where(.vergleichstabelle__zeile > :first-child) { font-weight: 500; color: var(--ink); }
:where(.vergleichstabelle__zeile > :last-child) { color: var(--muted); }
.vergleichstabelle--nummeriert .vergleichstabelle__kopf,
/* In der --nummerierten Variante ist die „fett/dunkel“-Spalte die ZWEITE
(Merkmal), nicht die erste (das ist dort die Ziffer) – siehe Tür 3. */
/* ---------- Eckdaten (Label:Wert-Zeilen) ----------
Über mich: Ausbildung/Erfahrung/Einsatzgebiet. */
.eckdaten { display: grid; margin: 24px 0 40px; }
.eckdaten__zeile { display: flex; gap: 20px; border-top: 1px solid var(--line); padding: 14px 0; }
.eckdaten__zeile:last-child { border-bottom: 1px solid var(--line); }
.eckdaten__label { flex-shrink: 0; width: 180px; padding-top: 3px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.eckdaten__wert { flex: 1; min-width: 0; max-width: 44ch; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
/* ---------- Leistungsliste (heller Listenblock, z.B. Maßnahmenplan) ----------
Label darüber mit .footer-label (style.css) setzen. */
.leistungsliste { list-style: none; margin: 0; padding: 0; display: grid; max-width: 47ch; }
.leistungsliste li { border-top: 1px solid var(--line); padding: 14px 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.leistungsliste li:last-child { border-bottom: 1px solid var(--line); }
/* ---------- FAQ-Liste (einspaltiges Akkordeon, z.B. Standortbestimmung) ----------
Angelehnt an .faq/.faq details/.faq summary (style.css), aber ohne deren
Sektions-Rahmen (Hintergrundflaeche, aeusserer border-top): dort sitzt
die FAQ als eigener Screen der Startseite, hier ist sie ein Block
INNERHALB von .wrap--seite. .faq-liste details p faerbt/skaliert daher
bewusst NICHT eigens ein - erbt Groesse, Zeilenhoehe und max-width von
:where(.wrap--seite p) weiter oben (gleiche Kaskade wie .notiz/.lead/…). */
.faq-liste { border-bottom: 1px solid var(--line); }
.faq-liste details { border-top: 1px solid var(--line); }
.faq-liste summary {
font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink);
padding: 18px 0; cursor: pointer; min-height: 44px; transition: color .25s ease;
}
.faq-liste summary:hover { color: var(--accent); }
/* ---------- Zwei-Spalten-Intro (heller Grund) ----------
NICHT .angebot__grid (style.css) wiederverwenden: dessen Absatzfarbe
ist für die dunkle Angebots-Karte der Startseite gebaut (rgba-Weiß) und
wäre auf hellem Grund praktisch unsichtbar. Gleiche Spaltenaufteilung,
eigene helle Typografie. */
.intro-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; margin-bottom: 56px; }
/* ---------- Kostenblock (dunkle Rechenzeilen, z.B. „Was Sie das kostet“) ---------- */
/* ---------- Preiskarten (auf dunklem Grund, z.B. Das Angebot) ---------- */
.preis-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 28px; }
.preis-karte { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); border-radius: 18px; corner-shape: squircle; padding: 28px; }
.preis-karte__label { display: block; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 12px; }
.preis-karte__preis { display: block; font-weight: 700; font-size: 36px; letter-spacing: -.03em; color: #fff; margin-bottom: 12px; hyphens: auto; overflow-wrap: anywhere; }
.preis-karte__preis small { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, .7); }
.preis-karte p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
/* Wiederverwendung von .angebot__card (style.css) als Preis-Rahmen: dessen
eigenes h2 ist für den HELLEN .h2-Kontext der Startseite gedacht (kein
Farbwechsel eingebaut) und die Karte zentriert sich selbst auf 1000px.
Beides hier auf den Unterseiten-Kontext zurechtschneiden: volle Breite
innerhalb von .wrap--seite, weiße Überschrift, Abstand nach unten. Die
zwei Absätze nach den Preiskarten (Hinweis + Zusage) unterscheiden sich
nur in der letzten Zeile – das übernimmt :last-child. */
.wrap--seite .angebot__card { max-width: none; width: auto; margin: 0 0 32px; }
.wrap--seite .angebot__card h2 { color: #fff; }
.wrap--seite .angebot__card > p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.wrap--seite .angebot__card > p:last-child { margin-bottom: 0; color: #fff; font-weight: 500; }
/* ---------- Prozess (kompakte Ablaufschritte, z.B. „So läuft es ab“) ----------
Eigenständig neben dem 3-spaltigen .steps/.step der Startseite (kleinere
Ziffer, kleinere Überschrift, mehr Spalten): beide Muster kommen in den
Artboards nebeneinander vor und sollen unterscheidbar bleiben. */
.prozess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0 0 64px; }
.prozess__schritt { border-top: 1px solid var(--line); padding-top: 18px; }
.prozess__num { display: block; font-weight: 700; font-size: 40px; line-height: .85; letter-spacing: -.04em; color: var(--accent); margin-bottom: 14px; }
.prozess__schritt h3 { margin: 0 0 8px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; }
.prozess__schritt p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
/* ---------- Abschluss-CTA ----------
.cta-band: dunkles Band am Ende jeder Unterseite (Leitfäden, Über mich).
margin-top statt margin-top+border: kollabiert bewusst mit dem
margin-bottom des vorangehenden Elements (siehe Kommentar unten), damit
der Abstand unabhängig davon passt, was direkt davor steht. */
.cta-band { background: var(--dark); color: #fff; border-radius: 24px; corner-shape: squircle; padding: 40px; margin-top: 32px; }
.cta-band h2 { margin: 0 0 8px; font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.cta-band p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.cta-band a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 4px; display: inline-block; padding: 10px 0; } /* f-14-Analogie: Tap-Ziel */
.cta-band--compact { padding: 36px; }
.cta-band--compact h2 { font-size: 24px; }
.cta-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* .cta-inline: heller Abschluss ohne Band (Das Angebot). border-top
verhindert Margin-Collapsing mit dem Vorabsatz; margin-top gleicht das
gezielt aus (16px Standardabsatz + 24px hier = 40px sichtbarer Abstand,
wie im Artboard). */
.cta-inline { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 40px; margin-top: 24px; }
.cta-inline p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* Fußnote/Quellenangabe am Artikelende (Leitfäden): eigener margin-top,
durch den border-top vom Band davor bewusst NICHT kollabierend. */
.fussnote { margin: 40px 0 0; border-top: 1px solid var(--line); padding-top: 20px; font-size: 13px; line-height: 1.6; color: var(--muted); font-style: italic; text-wrap: pretty; }
.fussnote + .fussnote { margin-top: 16px; border-top: 0; padding-top: 0; } /* zweite Fußzeile ohne doppelte Linie */
/* ---------- „Weiter zu“-Navigation (optional) ----------
Kein Vorbild in den Artboards, aber im Auftrag als möglicher Baustein
genannt: schlichte Verkettung zwischen Unterseiten. Nutzt bewusst nur
bereits vorhandene Bausteine (.footer-label, .link-more aus style.css)
plus einen schmalen Rahmen. */
.weiter-nav { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 32px; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
/* ---------- Layout-Helfer ---------- */
/* Sticky-Spalte für die Portrait-Figur (Über mich), gemeinsam mit dem
wiederverwendeten .person__grid/.person__figure aus style.css. Der Wert
132px im Artboard entspricht --header-h(80px) + 52px – als calc()
geschrieben, damit er mit --header-h in den Breakpoints mitwandert. */
.sticky-aside { position: sticky; top: calc(var(--header-h) + 52px); }
/* ---------- Druck ---------- */
@media print {
.sticky-aside { position: static; }
.weiter-nav { display: none; }
}
/* ---------- Responsive ----------
Bricht an denselben Punkten wie style.css (960px, 640px), damit sich
Unterseiten und Startseite im selben Rhythmus verhalten. */
@media (max-width: 960px) {
.intro-grid { grid-template-columns: 1fr; gap: 32px; }
.prozess { grid-template-columns: 1fr 1fr; }
.sticky-aside { position: static; top: auto; }
}
@media (max-width: 640px) {
.content, .wrap--seite { padding-left: 20px; padding-right: 20px; padding-bottom: 64px; }
.page-title { font-size: 28px; }
.lead--large { font-size: 19px; margin-bottom: 32px; }
.prozess { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
.preis-karten { grid-template-columns: 1fr; }
.callout, .kostenblock { padding: 20px; }
.cta-band { padding: 28px; }
.cta-band--compact { padding: 24px; }
.cta-band h2 { font-size: 22px; }
.cta-inline { padding-top: 28px; }
.preis-karte { padding: 22px; }
.eckdaten__label { width: 140px; }
}
@media (max-width: 480px) {
.eckdaten__zeile { flex-direction: column; gap: 4px; padding: 12px 0; }
.eckdaten__zeile:first-child { border-top: 1px solid var(--line); }
.eckdaten__label { width: auto; padding-top: 0; }
.vergleichstabelle__kopf, .vergleichstabelle__zeile { gap: 8px; }
.vergleichstabelle--nummeriert .vergleichstabelle__kopf,
.vergleichstabelle--nummeriert .vergleichstabelle__kopf > :last-child,
}
/* Bewegungsreduktion: diese Datei führt keine eigenen @keyframes/Übergänge
ein (nur .reveal/.reveal-load aus style.css werden auf .content bzw.
.wrap--seite angewendet). Der globale Reset
`*,*::before,*::after{animation:none!important;transition:none!important}`
in style.css greift daher bereits für alle Klassen dieser Datei. */