/* ========================================================================== Edlerritter IT-Consulting · Unterseiten (gemeinsames Stylesheet) Ergänzt css/style.css (Tokens, Header, Footer, Buttons, Dialoge, Typo- Bausteine bleiben DORT und werden hier wiederverwendet, nicht dupliziert). Quelle/Vorgabe: die fünf Design-Artboards „Tür 1 Doppelarbeit“, „Tür 2 Systemakzeptanz“, „Tür 3 KI Digitalisierung“, „Das Angebot“, „Über mich“ (dc-Runtime, Inline-Styles). Diese Datei überträgt deren wiederkehrende Bausteine in wiederverwendbare Klassen für alle künftigen Unterseiten (Leitfäden, Angebot, Über mich, Impressum, Datenschutz). Diese Datei NICHT ohne css/style.css einbinden (Tokens, Reset, Header/ Footer/Buttons/Dialoge/Reveal-Animation fehlen sonst). ========================================================================== */ /* ---------- Token-Ergänzung ---------- --grau-voll stammt wörtlich aus den Artboards (Selbsttest-Kästchen-Rahmen) und aus 01_DESIGN.md („zusätzliche Sekundärfläche, nur in Variante B“). Steht nicht in style.css, wird hier NUR ergänzt (keine bestehenden Tokens werden überschrieben). */ :root { --grau-voll: #A7A8AB; } /* ---------- Seiten-Rahmen ---------- Zwei Container für die zwei Seitentypen aus den Artboards: .content – schmale Lesespalte (760px) für lange Fließtexte: Leitfäden (Tür 1/2/3) und Rechtstexte (Impressum, Datenschutz). Zeilenlänge bleibt damit im Rahmen der 68-Zeichen-Vorgabe aus 01_DESIGN.md. .wrap--seite – Modifier auf das bestehende .wrap (1080px, style.css) für strukturierte Unterseiten mit Grids/Karten: Das Angebot, Über mich. .wrap liefert bereits max-width:1080px + margin:0 auto; hier wird nur das Padding angepasst (Standardpadding von .wrap ist für Abschnitte MITTEN auf einer Seite gedacht, nicht für den Seitenanfang direkt unter dem fixierten Header). Beide erhalten die Kopfraum-Formel per calc(), damit sie bei jeder --header-h-Anpassung (siehe style.css Responsive-Sektion) automatisch mitskalieren, ohne eigene Breakpoints duplizieren zu müssen. */ /* Beide Container haengen ab 07.09.2026 an --lese (style.css) statt an eigenen Zahlen: die Aussenbreite ist die Lesespalte plus die 64px Innenabstand links und rechts. Damit ist der Kasten genau so breit wie der Text darin und sitzt mittig, statt dass der Text links in einem breiteren Kasten klebt. .wrap--seite hob vorher nur das Padding an und erbte 1080px von .wrap; das war der Grund, warum /ueber-mich auf grossen Schirmen linkslastig wirkte. */ .content { max-width: calc(var(--lese) + 64px); margin: 0 auto; width: 100%; box-sizing: border-box; padding: calc(var(--header-h) + 52px) 32px 96px; overflow-wrap: break-word; } /* .wrap--seite bekommt BEWUSST keine Lesespalten-Begrenzung. Der Versuch am 07.09.2026, auch hier auf calc(--lese + 64px) zu gehen, hat /ueber-mich zerlegt: die Seite traegt in diesem Container ein zweispaltiges Raster aus Portraet (462px) und Text. Bei 760px Aussenbreite blieben fuer die Textspalte 424px, das Raster lief aus dem Container heraus und die Seite sass sichtbar rechts der Mitte. Der Container bleibt also bei --wrap-max aus .wrap (style.css), die Lesebreite machen die Absaetze darin ueber --lese. */ .wrap--seite { padding: calc(var(--header-h) + 52px) 32px 96px; } /* ---------- Seitenkopf: Eyebrow (.eyebrow, style.css) + Titel + Lead ---------- .eyebrow wird 1:1 wiederverwendet (Kicker „Leitfaden“, „Das Angebot“, „Über mich“ – bereits AA-korrekt in --accent-ink, siehe style.css). */ .page-title { margin: 0 0 16px; font-weight: 700; font-size: 36px; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); text-wrap: pretty; hyphens: auto; overflow-wrap: anywhere; } .page-title--tight { margin-bottom: 12px; } /* Leitfäden: Untertitel folgt eng */ .page-title--loose { margin-bottom: 24px; } /* Über mich */ .lead { margin: 0 0 20px; font-weight: 500; font-size: 19px; line-height: 1.45; color: var(--muted); text-wrap: pretty; } .lead--large { font-size: 22px; line-height: 1.4; letter-spacing: -.02em; color: var(--ink); margin-bottom: 48px; } /* Autor/Meta-Zeile unter dem Lead (nur Leitfäden) */ .doc-meta { margin: 0 0 48px; font-size: 14px; line-height: 1.5; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 24px; } /* ---------- Fließtext in der Lesespalte (.content) ---------- Kapitel-Rhythmus wie in den Leitfäden: großer Abstand vor jedem Kapitel (56px), das erste Kapitel direkt unter Lead/Meta ohne diesen Abstand. */ /* Hinweis zu :where() hier und im ganzen Abschnitt: ein reiner Kontext- Selektor wie „.content h2“ hätte als Klasse+Typ (0,1,1) mehr Spezifität als ein einzelner Bausteinklassenname wie .notiz/.lead/.fussnote (0,1,0) – ein

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: var(--lese); 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: var(--lese); 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: var(--lese); 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; } /* ---------- Spur links, Lesespalte rechts (Richtung B) ---------- Das Muster von /ueber-mich, der Seite die Marvin gefaellt, als Seitengeruest: eine schmale Spalte, die mitlaeuft und sagt, wo man ist und was der eine Weg ist. Mit Marvin entschieden am 04.09.2026. Ab 1001px zweispaltig und klebend. Darunter faellt die Spur auf einen normalen Block zurueck und die Abschnittsliste verschwindet: eine fixierte Leiste unten wuerde mit dem WhatsApp-Knopf kollidieren, der dort schon fest sitzt, und die Seite ist durch das Aufklappen ohnehin kurz. Kopfausgleich wie bei .band, an --header-h gekoppelt. */ /* Drei Spalten statt zwei, seit 07.09.2026. Vorher stand hier "200px 1fr" in einem 1080px breiten Kasten: der Inhalt war damit im Bereich RECHTS der Spur zentriert, und dieser Bereich liegt nicht in der Bildschirmmitte. Auf 1920px sass die Lesespalte dadurch 130px rechts der Mitte, mit einer 215px breiten Luecke zwischen Spur und Text. Jetzt traegt die mittlere Spalte die Lesebreite und sitzt auf der echten Seitenmitte, die beiden 1fr-Spalten aussen sind gleich gross, und die Spur haengt sich rechtsbuendig in die linke davon. Nachgemessen faellt die Spaltenmitte auf 1440, 1920 und 2560px exakt auf die Fenstermitte. Die Breite kommt jetzt von --container-max, damit die aeusseren Spalten ueberhaupt Platz haben; die Lesespalte selbst waechst davon nicht mit, die haengt allein an --lese. */ .seite-spur { display: grid; gap: 56px; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: calc(var(--header-h) + 72px) 32px 96px; } /* Die Grenze liegt seit 07.09.2026 bei 1200px, vorher bei 1001px. Grund ist eine Rechnung, keine Vorliebe: mittig sitzt die Lesespalte nur, wenn rechts von ihr genauso viel Platz frei bleibt wie links die Spur belegt. Das sind 620px Lesespalte + zweimal 56px Abstand + 64px Innenabstand + zweimal 200px, also 1196px. Auf 1024px ging sich das nicht aus: die linke Spalte hielt ihre 200px, die rechte fiel auf 28px zusammen, und die Lesespalte stand 86px rechts der Mitte (nachgemessen). Zwischen 1001 und 1199px faellt deshalb die ganze Spur weg statt die Mitte zu verlieren. Sie war unterhalb von 1001px ohnehin schon ausgeblendet, die Grenze wandert also nur, sie ist nicht neu. */ @media (min-width: 1200px) { .seite-spur { grid-template-columns: 1fr minmax(0, calc(var(--lese) + 48px)) 1fr; } .spur { justify-self: end; width: 200px; } } /* Seiten ohne Spur (aktuell /leistungen, seit dort das Verzeichnis auf einen Eintrag geschrumpft und dann ganz weggefallen ist). Ohne eigene Regel bekaeme das Raster nur noch EIN Kind, und das landet in der ersten Spalte: der Text sass dann links statt mittig. Deshalb hier eine einzige Spalte in Lesebreite, ueber justify-content zentriert. Steht NACH dem 1200px-Block, damit die Regel dort gewinnt, und gilt gleichzeitig darunter, wo .seite-spur ohnehin einspaltig ist. minmax(0, ...) laesst die Spalte auf schmalen Schirmen schrumpfen. */ .seite-spur--ohne-spur { grid-template-columns: minmax(0, calc(var(--lese) + 48px)); justify-content: center; } /* align-self ist hier NICHT dasselbe wie align-content: ohne align-self streckt das Raster die Spur auf die volle Zeilenhoehe, und ein Element, das so hoch ist wie sein Container, hat keinen Weg zum Kleben. Genau daran ist position:sticky vorher gescheitert. */ .spur { display: grid; gap: 16px; align-content: start; align-self: start; } @media (min-width: 1200px) { .spur { position: sticky; top: calc(var(--header-h) + 40px); } } .spur__label { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .spur__nav { display: grid; border-top: 1px solid var(--line); } .spur__nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 0 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; color: var(--muted); text-decoration: none; box-shadow: inset 2px 0 0 transparent; transition: color .2s ease, box-shadow .2s ease; } .spur__nav a:hover { color: var(--ink); } /* Setzt Abschnitt 5 in js/main.js. Ohne JavaScript bleibt die Spur eine normale Abschnittsliste, nur ohne Markierung. */ .spur__nav a[aria-current="true"] { color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); } /* Unter 1200px faellt die ganze Spur weg, nicht nur ihre Liste. Vorher blieb das Label stehen: auf dem Handy stand damit ganz oben, noch vor der Ueberschrift, "AUF DIESER SEITE" als Ueberschrift fuer ein Verzeichnis, das dort gar nicht gerendert wird. Der Weg zum Erstgespraech geht ueberall ueber den Header-Knopf, das CTA-Band und den schwebenden WhatsApp-Knopf. Der eigene Knopf in der Spur ist seit 11.09.2026 weg, er war die vierte Stelle fuer dieselbe Handlung. */ @media (max-width: 1199px) { .spur { display: none; } } /* .content und .wrap--seite bleiben auf dem Element stehen, damit alle ihre Regeln fuer Listen, Tabellen, Trenner, Kaesten und Fussnoten weiter greifen. Nur ihre Container-Eigenschaften werden hier ueberschrieben. Die Regel greift auf .spur__inhalt selbst und nicht auf die Kombination mit .content: von den zwoelf Seiten mit Spur tragen zehn "content spur__inhalt", eine "wrap wrap--seite spur__inhalt" und /leistungen nur "spur__inhalt". Die Kombi-Auswahl haette /leistungen ausgelassen, und genau dort liefen Ueberschriften und Aufklapper dann auf 938px waehrend die Absaetze bei 638px endeten. */ /* Bis 07.09.2026 stand hier max-width:none: der Inhalt lief ueber die volle Breite neben der Spur (760px bei 1440, 1043px bei 2560), die Absaetze darin waren aber auf 517px gedeckelt und klebten am linken Rand des Bereichs. Jetzt bekommt die Spalte selbst die Lesebreite plus vier Zeichen Luft fuer Karten und Tabellen und wird zentriert. Der Text bleibt linksbuendig, nur die Spalte wandert in die Mitte des Bereichs rechts der Spur. */ .spur__inhalt { max-width: calc(var(--lese) + 48px); margin: 0 auto; padding: 0; } /* Lange Verzeichnisse (Datenschutz hat 13 Abschnitte, ein Leitfaden 11) wuerden die klebende Spur hoeher machen als den Bildschirm. Dann scrollt sie in sich selbst statt aus dem Bild zu wandern. */ .spur__nav { max-height: calc(100vh - var(--header-h) - 110px); overflow-y: auto; } /* Drei Tuerkarten nebeneinander brauchen Breite, die die Lesespalte nicht mehr hergibt: in 62ch waere jede Karte rund 200px breit und die Ueberschriften stuenden auf fuenf Zeilen. Seit die Spalte auf --lese begrenzt ist, gilt das auf jeder Fenstergroesse, nicht mehr nur bis 1200px. Deshalb ohne Breakpoint untereinander. */ .spur__inhalt .doors { grid-template-columns: 1fr; gap: 28px; } /* Gleiche Rechnung fuer die vierteilige Prozessreihe auf /standortbestimmung und /webentwicklung: in der Lesespalte blieben je Spalte 128 bzw. 131px, gemessen bei 1920px. "Der Tag im Betrieb" stand dadurch auf zwei Zeilen mit Trennung mitten im Wort. Zwei mal zwei ergibt rund 360px je Karte und liest sich wieder. Die 640px-Regel weiter unten setzt darunter weiterhin auf eine Spalte. */ .spur__inhalt .prozess { grid-template-columns: 1fr 1fr; } /* Die Lesespalte. Uebernimmt die Rolle, die auf den anderen Unterseiten .wrap--seite hat, mit einer klaren Groessenstufe 36 / 28 / 19. */ :where(.spur__inhalt section) { margin: 0; } :where(.spur__inhalt h2) { margin: 72px 0 20px; font-weight: 700; font-size: 28px; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; } :where(.spur__inhalt section:first-of-type h2) { margin-top: 44px; } /* Der Vorabstand kam bis 07.09.2026 von der
-Huelle: auf /leistungen steckte jede Unterleistung in einem Aufklapper, und dessen Trennlinie hat die Ueberschrift vom Block darueber getrennt. Seit die vier Leistungen offen untereinander stehen, muss die Ueberschrift den Abstand selbst tragen, sonst klebt "IT-Infrastruktur" direkt an der Liste der Zeile darueber. Direkt unter ihrer h2 braucht sie ihn nicht, dort setzt die zweite Regel zurueck. */ :where(.spur__inhalt h3) { margin: 40px 0 8px; font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; } :where(.spur__inhalt h2 + h3) { margin-top: 20px; } /* Adressblock gegen den Absatz darunter absetzen: auf /kontakt stiess die Datenschutznotiz sonst ohne Luft an "Oesterreich". */ :where(.spur__inhalt address) { margin: 0 0 24px; } :where(.spur__inhalt p) { margin: 0 0 16px; max-width: var(--lese); font-size: calc(17px + var(--fs-bump)); line-height: 1.65; color: var(--ink); text-wrap: pretty; } .leistung-haupt { margin: 0 0 10px; } .leistung-haupt h3 { font-size: 24px; } /* Aufklappen statt Loeschen: der Text bleibt im HTML und wird weiter indexiert, er verschwindet nur aus dem Blickfeld. Google bewertet Inhalt in
seit der Umstellung auf Mobile-First nicht mehr ab. Chevron aus zwei Raendern gezeichnet, weil die Pfeilzeichen nicht im Poppins-Subset liegen und sonst in der Systemschrift rendern wuerden. Die Hoehenanimation der 21st-Vorlagen ist bewusst weggelassen: sie braucht ::details-content, und wenn das schiefgeht, ist Inhalt weg. */ .faq-liste summary { display: flex; align-items: center; gap: 12px; list-style: none; } .faq-liste summary::-webkit-details-marker { display: none; } .faq-liste summary h3 { margin: 0; font: inherit; color: inherit; } .faq-liste summary::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .25s ease; } .faq-liste details[open] summary::after { transform: translateY(2px) rotate(-135deg); } .faq-liste details > :last-child { margin-bottom: 20px; } /* ---------- 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. */ /* Gleiche Umstellung wie bei .leistungsliste, nur ist ein Punkt hier ein

und kein
  • : ein echter ::marker geht deshalb nicht, der Punkt kommt als ::before. Die Position haengt an em statt an px, damit er auch dann auf der ersten Textzeile sitzt, wenn --fs-bump auf grossen Bildschirmen die Schrift anhebt. */ .punkteliste { display: grid; gap: 10px; margin: 24px 0; padding-left: 22px; } .punkteliste__punkt { position: relative; } .punkteliste__punkt::before { content: "\2022"; position: absolute; left: -22px; top: 0; font-size: 15.5px; line-height: 1.6; color: var(--accent); } /* :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, .vergleichstabelle--nummeriert .vergleichstabelle__zeile { grid-template-columns: 24px 1fr 1.1fr; } /* 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. */ /* Bis 07.09.2026 trug jeder Punkt eine Trennlinie oben und der letzte eine unten. Vier solche Listen untereinander ergaben auf /leistungen eine Leiter aus zwanzig Querstrichen, die schwerer wog als der Text darin. Jetzt echte Aufzaehlungspunkte, im selben Muster wie die vorhandenen Listen in .content: 22px Einzug und Punkt in der Akzentfarbe. display:grid muss weg, ein Rasterelement zeigt keinen ::marker. */ .leistungsliste { margin: 0 0 16px; padding: 0 0 0 22px; max-width: var(--lese); } .leistungsliste li { margin-bottom: 8px; font-size: 16px; line-height: 1.5; color: var(--ink); } .leistungsliste li:last-child { margin-bottom: 0; } .leistungsliste li::marker { color: var(--accent); } /* ---------- 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; } /* ---------- Kontaktweg (nur /kontakt) ---------- Die Seite hat genau eine Aufgabe: dass jemand Kontakt aufnimmt. Die drei Wege stehen deshalb nicht als Textzeilen in einer Datentabelle und auch nicht als drei gefuellte Knoepfe nebeneinander, sondern als dieselben .option-Zeilen, die der Erstgespraech-Dialog schon traegt (style.css). Zwei Gruende: DESIGN.md erlaubt pro Abschnitt genau EINEN gefuellten Knopf (Zwei-Wege-Regel), drei gleich schwere widersprechen dem direkt; und WhatsApp-Gruen ist dort als Fremdmarkenfarbe genau fuer diese Zeile vorgesehen, waehrend ein oranger WhatsApp-Knopf gegen die eigene Farblogik lief. Daneben das Portraet, weil der Unterschied zum Systemhaus genau der ist: man schreibt an eine Person, nicht an ein Postfach. .person__figure kommt unveraendert aus style.css, damit das Foto hier so aussieht wie auf /ueber-mich und der Startseite. */ .kontaktweg { display: grid; gap: 32px; align-items: start; margin: 40px 0 24px; } @media (min-width: 641px) { .kontaktweg { grid-template-columns: 200px minmax(0, 1fr); } } .kontaktweg .person__figure { max-width: 200px; } .kontaktweg__optionen { display: grid; gap: 12px; align-content: start; } .kontakt-fakten { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; } /* Unter den Kontaktwegen steht nur noch eine kurze Liste ("Vorher kurz ueberlegen", drei Zeilen). Ihre Ueberschrift ist ein h2 wie die Abschnitte auf den anderen Unterseiten, nur kleiner gesetzt und ohne deren 72px Vorabstand, weil sie hier ein Listenkopf ist und kein Kapitel. Die zweite Liste ("Was dann passiert") und die zwei Spalten dafuer sind seit 11.09.2026 weg: zu viel Text vor dem, was zaehlt. */ .kontakt-spalten { display: grid; gap: 32px; margin: 48px 0 0; } :where(.kontakt-spalten section) { margin: 0; } :where(.kontakt-spalten h2) { margin: 0 0 14px; font-size: 20px; } /* Auf /kontakt stehen in diesem Bau drei gleichrangige Knoepfe (WhatsApp, Telefon, E-Mail) statt eines Knopfs mit Textlinks daneben. 24px Abstand war dort zu viel, die Reihe riss auf 1440px unnoetig um. */ .cta-actions--knoepfe { gap: 12px; margin: 24px 0 8px; } /* .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) { /* :not(.spur__inhalt), sonst kaempft diese Regel mit dem padding:0 der Spur-Spalte und gewinnt, weil sie spaeter steht. Ergebnis waren auf JEDER der zwoelf Unterseiten mit Spur 32px von .seite-spur PLUS 20px von hier, also 52px je Seite auf einem 390px-Schirm. Der Inhalt hatte dadurch 286 statt 350px. Die Spur-Spalte bekommt ihre Handy-Werte direkt darunter. */ .content:not(.spur__inhalt), .wrap--seite:not(.spur__inhalt) { padding-left: 20px; padding-right: 20px; padding-bottom: 64px; } .seite-spur { 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__zeile { grid-template-columns: 18px 1fr; } .vergleichstabelle--nummeriert .vergleichstabelle__kopf > :last-child, .vergleichstabelle--nummeriert .vergleichstabelle__zeile > :last-child { grid-column: 2 / -1; margin-top: 4px; } .checkliste__frage { gap: 12px; } } /* 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. */ /* ---------- Bausteine der Leitfaden-Seiten ---------- Diese Regeln waren am 29.08. als tot entfernt worden, weil die Leitfaden-Seiten damals nicht gebaut wurden. Jetzt kommen sie: der Selbsttest braucht .checkliste, die Kostenrechnung .kostenblock, und die Gegenueberstellung "was gesagt wird / was gemeint ist" die nummerierte Vergleichstabelle. Wortgleich aus c370919^ zurueckgeholt. */ .checkliste { display: grid; margin: 24px 0; } /* Raster statt Flexbox: das Kaestchen bekommt eine eigene, letzte Spalte und steht damit in jeder Zeile an derselben Stelle. Mit `display:flex` hing es am Textende, wanderte also mit der Textbreite von Zeile zu Zeile und sprang beim Ankreuzen noch einmal, weil der Text dann halbfett wird. */ .checkliste__frage { display: grid; grid-template-columns: 22px minmax(0, 1fr) 24px; gap: 16px; align-items: baseline; border-top: 1px solid var(--line); padding: 14px 0; } .checkliste__nr { font-weight: 700; font-size: 15px; color: var(--accent-ink); } .checkliste__text { max-width: 55ch; font-size: 15.5px; line-height: 1.55; color: var(--ink); } /* max-width: sonst bis 85 Zeichen je Zeile */ /* Das Kaestchen ist ein echtes in einem