umschließt die Inhalts-Sections. Ob es eine zentrierte "Box" (Boxed) oder volle Breite (Full) ist, steuert eine Klasse auf : .layout-boxed (Standard) oder .layout-full. - Header/Slider/Footer liegen AUSSERHALB des frame -> immer volle Breite. */ /* --- Container: die eine, geteilte Contentbreite ------------------------ */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--pad-inline); } /* --- Boxed-Layout (Standard): Inhalt als Box auf grauem Grund ----------- */ .layout-boxed { background: var(--color-bg); } .frame { display: flex; flex-direction: column; gap: var(--section-gap); /* Abstand zwischen den Blöcken */ background: var(--color-surface); } /* Außenränder gehören zum RAND-Block selbst (erster/letzter Block), damit eine Tönung/Fill bis an die Rahmenkante reicht – statt eines weißen Rahmen-Rands. Gesamtmaß = eigenes Block-Padding + Zusatz (--frame-padding-block). */ .frame > .section:first-child { padding-top: calc(var(--section-padding-block) + var(--frame-padding-block)); } .frame > .section:last-child { padding-bottom: calc(var(--section-padding-block) + var(--frame-padding-block)); } @media (min-width: 60em) { .layout-boxed .frame { max-width: var(--frame-max); margin-inline: auto; margin-block: var(--space-48); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: clip; /* rundet die Ecken der inneren Sections mit */ } } /* --- Full-Width-Layout: keine Box, kein Schatten, kein Rand ------------- */ /* Seite = Contentfarbe, alles läuft randlos durch. */ .layout-full { background: var(--color-surface); } .layout-full .frame { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; } /* --- Section = Contentblock: eigenes, großzügiges Padding oben UND unten ---- */ /* Jeder Block ist in sich abgeschlossen. Deshalb wird das obere Padding NICHT gekappt – zwei weiße Blöcke ergeben bewusst viel Weißraum, und ein Block mit Hintergrundfarbe (.section--tint) bringt seine Farbfläche allseitig mit Luft mit. Die Tönung lässt sich so an JEDEN beliebigen Block hängen. */ .section { padding-block: var(--section-padding-block); } .section--tint { background: var(--color-surface-2); } /* Farbwechsel zwischen zwei Blöcken braucht mehr Luft als weiß-zu-weiß. Die Regel greift nur, wenn getönt und ungetönt aufeinandertreffen, und addiert sich zum Gap. (CSS kann keinen "vorherigen" Nachbarn wählen, darum liegt der Zuschlag als margin-top auf dem FOLGENDEN Block – optisch identisch zu "der Block davor bekommt mehr padding-bottom".) */ .frame > .section:not(.section--tint) + .section--tint, .frame > .section--tint + .section:not(.section--tint) { margin-top: var(--section-gap-shift); } .section--center { text-align: center; } .section--center :where(h1, h2, h3, h4, h5) + :where(.prose, .lead) { margin-top: var(--heading-text-gap-compact); } .section--center .prose, .section--center .lead, .section--center .overline { margin-inline: auto; } /* --- Spalten-System ----------------------------------------------------- */ /* Mobile: immer einspaltig. Ab 48em greifen die Aufteilungen. */ .cols { display: grid; gap: var(--gutter); align-items: center; } @media (min-width: 48em) { .cols--2 { grid-template-columns: 1fr 1fr; } .cols--3070 { grid-template-columns: 3fr 7fr; } .cols--7030 { grid-template-columns: 7fr 3fr; } /* Bild rechts statt links: schmale Spalte wandert nach rechts, DOM bleibt gleich (Bild zuerst -> gut für Screenreader/Reihenfolge). */ .cols--3070.cols--reverse { grid-template-columns: 7fr 3fr; } .cols--reverse > :first-child { order: 2; } } /* 5. ------------------------------------------------------------ BAUSTEINE -- */ /* --- Header / Navigation ------------------------------------------------ */ .site-header { border-bottom: var(--border); background: var(--color-surface); position: relative; z-index: 20; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding-block: var(--space-24); } /* Sticky-Header: Klasse .nav-sticky auf setzen. Der Anker-Versatz liegt als scroll-margin-top auf den Sprungzielen und entspricht exakt der Header-Höhe (--header-height, gesetzt von main.js; CSS-Fallback ~5rem). So landet die Section bündig unter dem Header – ohne Lücke, in der sonst der Bereich darüber (Slider/Rand) durchblitzt. */ .nav-sticky .site-header { position: sticky; top: 0; box-shadow: 0 1px 0 var(--color-border), 0 8px 24px -16px rgba(0, 0, 0, 0.28); } .nav-sticky :where(section[id]) { scroll-margin-top: var(--scroll-offset); } .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--color-text); text-decoration: none; } .logo span { color: var(--color-accent-strong); } /* gelber Akzent im Logo */ .nav ul { list-style: none; display: flex; gap: var(--space-32); padding: 0; } .nav a { font-family: var(--font-display); font-size: var(--text-small); font-weight: 600; letter-spacing: 0.02em; text-decoration: none; color: var(--color-text); padding-block: var(--space-8); position: relative; } /* animierter gelber Unterstrich beim Hover / für aktiven Punkt */ .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); } /* Burger-Button – nur auf Mobile sichtbar */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-8); } .nav-toggle svg { inline-size: 26px; block-size: 26px; } @media (max-width: 47.99em) { .site-header__inner { justify-content: center; position: relative; } .nav-toggle { display: block; position: absolute; right: var(--pad-inline); top: 50%; transform: translateY(-50%); } .nav { position: absolute; inset-inline: 0; top: 100%; background: var(--color-surface); border-bottom: var(--border); box-shadow: var(--shadow-card); display: none; } .nav[data-open="true"] { display: block; } .nav ul { flex-direction: column; gap: 0; padding-inline: var(--pad-inline); } .nav li { border-top: var(--border); } .nav li:first-child { border-top: none; } .nav a { display: block; padding-block: var(--space-16); } .nav a::after { display: none; } } /* --- Buttons ------------------------------------------------------------ */ /* Jede Variante steuert Fläche, Schrift UND Rand über Variablen (--btn-bg / --btn-fg / --btn-border) — so bleiben Buttons auf hellen wie dunklen Flächen und in beiden Themes sichtbar und konsistent. */ .button { --btn-bg: var(--color-accent); --btn-fg: var(--color-on-accent); --btn-border: var(--color-on-accent); /* gefüllt: dunkler Rand in beiden Themes */ display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-small); letter-spacing: 0.03em; text-decoration: none; line-height: 1; padding: var(--space-16) var(--space-32); background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-border); border-radius: var(--radius); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* Standard-Hover (helle Flächen): dunkle Füllung, gelber Text. */ .button:hover { --btn-bg: var(--color-inverse); --btn-fg: var(--color-accent); --btn-border: var(--color-inverse); } .button--ghost { --btn-bg: transparent; --btn-fg: var(--color-text); --btn-border: var(--color-text); } .button--ghost:hover { --btn-bg: var(--color-text); --btn-fg: var(--color-surface); --btn-border: var(--color-text); } /* Auf dunklen Flächen (Dark-Theme global oder .section--dark) würde die dunkle Hover-Füllung mit dem Grund verschmelzen -> stattdessen gelbe Outline + gelber Text (bleibt sichtbar, wirkt gewollt statt kaputt). */ :root[data-theme="dark"] .button:hover, .section--dark .button:hover { --btn-bg: transparent; --btn-fg: var(--color-accent); --btn-border: var(--color-accent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .button:hover { --btn-bg: transparent; --btn-fg: var(--color-accent); --btn-border: var(--color-accent); } } /* --- Runde Bilder (S/W) ------------------------------------------------- */ .round-media { aspect-ratio: 1; width: 100%; max-width: 320px; border-radius: 50%; object-fit: cover; filter: grayscale(1); /* echte Fotos werden automatisch S/W */ background: var(--color-surface-2); } .figure { margin: 0; } .figure figcaption { margin-top: var(--space-16); font-size: var(--text-small); color: var(--color-text-3); } /* --- Slider ------------------------------------------------------------- */ .slider { position: relative; } /* Seitenverhältnis-Presets. Alternativ inline: style="--slide-ratio: 2 / 1" Für ganz schmale Streifen z. B. 3 / 1 oder 21 / 9. */ .slider--21x9 { --slide-ratio: 21 / 9; } .slider--16x9 { --slide-ratio: 16 / 9; } .slider--3x2 { --slide-ratio: 3 / 2; } .slider--4x3 { --slide-ratio: 4 / 3; } .slider--1x1 { --slide-ratio: 1 / 1; } .slider--3x1 { --slide-ratio: 3 / 1; } /* Viewport-Modus: Header + Slider füllen gemeinsam die sichtbare Browserhöhe. --header-height wird von main.js auf die gemessene Header-Höhe gesetzt. */ .slider--viewport .slider__track { block-size: var(--slide-viewport-height); } .slider--viewport .slide { aspect-ratio: auto; block-size: 100%; min-block-size: 0; } .slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Scrollbar ausblenden (Firefox) */ } .slider__track::-webkit-scrollbar { display: none; } /* WebKit */ .slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: var(--slide-ratio); min-height: var(--slide-min); display: flex; align-items: flex-end; /* Inhalt unten */ overflow: hidden; isolation: isolate; } .slide__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); z-index: -2; } .slide::after { /* dunkler Verlauf für Lesbarkeit */ content: ""; position: absolute; inset: 0; background: linear-gradient( to top, var(--color-scrim) 0%, rgba(20, 20, 19, 0.15) 45%, rgba(20, 20, 19, 0) 75%); z-index: -1; } .slide__inner { /* trägt zusätzlich .container */ position: relative; z-index: 1; padding-block-end: clamp(var(--space-48), 6vw, var(--space-80)); } .slide__content { color: #fff; max-width: 46ch; } .slide__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h2); line-height: var(--leading-tight); letter-spacing: -0.015em; color: #fff; } .slide__text { margin-top: var(--space-16); font-size: var(--text-h5); color: rgba(255, 255, 255, 0.92); } .slide__content .button { margin-top: var(--space-32); } /* Pfeile – auf Desktop, blenden beim Hover über dem Slider ein */ .slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--color-text); cursor: pointer; opacity: 0; transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease); } .slider__arrow svg { inline-size: 22px; block-size: 22px; } .slider__arrow:hover { background: var(--color-accent); } .slider__arrow--prev { left: var(--space-24); } .slider__arrow--next { right: var(--space-24); } .slider:hover .slider__arrow, .slider__arrow:focus-visible { opacity: 1; } @media (hover: none) { /* Touch-Geräte: keine Pfeile */ .slider__arrow { display: none; } } /* Dot-Indikatoren unter/über dem Slider (hier: überlagert, unten zentriert) */ .slider__dots { position: absolute; bottom: var(--space-24); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: var(--space-16); } .slider__dot { inline-size: 10px; block-size: 10px; padding: 0; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .slider__dot[aria-current="true"] { background: var(--color-accent); transform: scale(1.25); } /* --- Kontaktformular ---------------------------------------------------- */ .form { max-width: 44rem; margin-top: var(--space-40); } .form__row { margin-bottom: var(--space-24); } /* Honeypot: für Menschen (und Screenreader) unsichtbar, für Bots ein Köder */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form label { display: block; font-family: var(--font-display); font-size: var(--text-small); font-weight: 600; margin-bottom: var(--space-8); } .form input, .form textarea { width: 100%; padding: var(--space-16); background: var(--color-surface); border: var(--border); border-radius: var(--radius); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .form input:focus, .form textarea:focus { outline: none; border-color: var(--color-text); box-shadow: 0 0 0 3px var(--color-accent); } .form textarea { min-height: 8rem; resize: vertical; } .form .button { margin-top: var(--space-8); } /* --- Footer ------------------------------------------------------------- */ .site-footer { background: var(--color-surface-2); border-top: var(--border); } /* Dunkle Variante – z. B. als voll breiter Abschluss im Full-Width-Layout */ .site-footer--dark { background: var(--color-inverse); border-top: none; color: var(--color-on-inverse); } .footer-top { padding-block: var(--section-padding-block); display: grid; gap: var(--gutter); } @media (min-width: 48em) { /* Spaltenzahl per style="--footer-cols: 3" steuerbar (Standard: 3) */ .footer-top { grid-template-columns: repeat(var(--footer-cols, 3), 1fr); } } .footer-col h5 { font-size: var(--text-overline); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-2); margin-bottom: var(--space-16); } .footer-col ul { list-style: none; padding: 0; } .footer-col li + li { margin-top: var(--space-8); } .footer-col a { color: var(--color-text); text-decoration: none; } .footer-col a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; } .footer-col address { font-style: normal; color: var(--color-text-2); } .footer-bottom { border-top: var(--border); } /* Trenner über volle Breite */ .footer-bottom__inner { padding-block: var(--space-24); font-family: var(--font-display); font-size: var(--text-small); color: var(--color-text-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-16); } .footer-bottom .heart { color: var(--color-accent-strong); } /* Farbanpassungen für die dunkle Variante */ .site-footer--dark .footer-col h5 { color: rgba(255, 255, 255, 0.65); } .site-footer--dark .footer-col a, .site-footer--dark .footer-col address { color: rgba(255, 255, 255, 0.85); } .site-footer--dark .footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); } .site-footer--dark .footer-bottom__inner { color: rgba(255, 255, 255, 0.6); } .site-footer--dark .heart { color: var(--color-accent); } /* 6. -------------------------------------------------- HILFSKLASSEN / A11Y -- */ /* Nur für Screenreader sichtbar */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip-Link */ .skip-link { position: absolute; left: var(--space-16); top: var(--space-16); z-index: 100; background: var(--color-text); color: var(--color-surface); padding: var(--space-8) var(--space-16); border-radius: var(--radius); text-decoration: none; transform: translateY(-150%); transition: transform var(--dur) var(--ease); } .skip-link:focus { transform: translateY(0); } /* Reduced Motion respektieren */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .slider__track { scroll-behavior: auto; } } /* =========================================================================== Overlay / Scrim — wiederverwendbare modale Ebene Basis für: Cookie-Dialog, Bild-Lightbox, Kontakt-Formular-Overlay. Steuerung über main.js (Atelier.overlay.open/close). Der Scrim ist die abdunkelnde Fläche, das .modal die zentrierte Karte darauf. =========================================================================== */ .scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--space-24); overflow-y: auto; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); } .scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); } .modal { width: 100%; max-width: 40rem; background: var(--color-surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: clamp(var(--space-24), 4vw, var(--space-40)); transform: translateY(8px); transition: transform var(--dur) var(--ease); } .scrim.is-open .modal { transform: none; } /* Varianten für spätere Nutzung */ .modal--wide { max-width: 60rem; } .modal--media { /* z. B. Lightbox: Bild randlos */ max-width: min(92vw, 1100px); padding: 0; background: transparent; border: 0; box-shadow: none; } /* Body-Sperre, während ein Overlay offen ist (Scrollbar-Breite kompensiert JS) */ .has-overlay { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .scrim, .modal { transition: none; } } /* =========================================================================== Inhaltsseiten (Impressum, Datenschutz, Über uns …) Bausteine für mehrseitige Sites. Header/Footer sind auf jeder Seite gleich (reines Static, kein Build → pro Seite dupliziert; kanonische Kopie in templates/). Jede Inhaltsseite beginnt mit einem Seitentitel (.page-header). =========================================================================== */ /* Seitentitel – auf ALLEN Inhaltsseiten. Als erste Section im .frame bekommt er automatisch den großzügigen Außenrand oben. */ .page-title { font-size: var(--text-h1); } /* Optional ausblendbar: h1 bleibt für SEO/Screenreader im DOM, nimmt aber keinen Platz ein; der folgende Block erhält dann den Außenrand oben. */ .page-header--hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .frame > .page-header--hidden:first-child + .section { padding-top: calc(var(--section-padding-block) + var(--frame-padding-block)); } /* Fließtext über die volle Container-Breite (statt Lesebreite --measure). Bewusst nur für kurze Absätze – lange Texte besser mit .prose (66ch). */ .prose--wide { max-width: none; } /* Medien über die volle Breite (z. B. 16:9). Ratio per --media-ratio. */ .media { display: block; width: 100%; aspect-ratio: var(--media-ratio, 16 / 9); object-fit: cover; border-radius: var(--radius); background: var(--color-surface-2); filter: grayscale(1); /* echte Fotos automatisch S/W, wie im Kit üblich */ } /* 4-Spalten-Raster (kleine Headline + Text je Spalte). Responsiv: 1 → 2 → 4. align-items:start, weil Textspalten oben bündig stehen sollen. */ .cols--4 { align-items: start; } @media (min-width: 40em) { .cols--4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 64em) { .cols--4 { grid-template-columns: repeat(4, 1fr); } } .cols--4 h3 { font-size: var(--text-h5); } /* Inhaltsverzeichnis (z. B. lange Datenschutzseite) */ .toc { margin: 0; padding: var(--space-24); background: var(--color-surface-2); border: var(--border); border-radius: var(--radius); } .toc ol { margin: 0; padding-left: 1.2em; } .toc li + li { margin-top: var(--space-8); } .toc a { color: var(--color-text); } /* Untergeordnete Rechts-Links im Footer-Bottom (Impressum, Datenschutz …) */ .footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); align-items: center; } .footer-legal a { color: inherit; } /* =========================================================================== 7. LANDING- / MARKETING-BAUSTEINE (Kitty-Erweiterung) --------------------------------------------------------------------------- Zusätzliche, wiederkehrende Sektionen für Landing- und Produktseiten. Alles folgt der bestehenden Logik: Tokens statt roher Werte, gleiche Klassennamens-Systematik, ohne JavaScript nutzbar (FAQ = native

). Gelb bleibt Signalfarbe (nur interaktiv / als kurze Signatur); die Feature-Icons sind bewusst monochrom, damit die Regel erhalten bleibt. =========================================================================== */ :root { --icon-size: 28px; } /* Standard-Icon-Kantenlänge (Feature-Grid, UI) */ /* --- Statischer Hero (ohne Slider) -------------------------------------- */ /* Ruhiger Seiteneinstieg mit großer Headline. Als erste Section im .frame erbt er automatisch den großzügigen Außenrand oben. */ .hero { text-align: center; } .hero__title { font-size: var(--text-h1); text-wrap: balance; } .hero .lead { margin-inline: auto; margin-top: var(--space-24); font-size: var(--text-h5); color: var(--color-text-2); } .hero .button-row { margin-top: var(--space-40); justify-content: center; } /* --- Button-Reihe (mehrere Buttons nebeneinander, umbrechend) ----------- */ .button-row { display: flex; flex-wrap: wrap; gap: var(--space-16); } .section--center .button-row, .cta .button-row { justify-content: center; } /* --- Icon-Konvention ----------------------------------------------------- */ /* Monochrome Inline-SVGs, die die Textfarbe erben (stroke="currentColor"). Größe über --icon-size. Kein Icon-Font, keine externe Bibliothek. */ .icon { display: inline-block; inline-size: var(--icon-size); block-size: var(--icon-size); flex: none; color: currentColor; } /* --- Feature-Grid: Blöcke mit Icon + Headline + Text -------------------- */ /* Responsiv 1 -> 2 -> 3 Spalten. Sechs Einträge ergeben das 2x3-Raster. Spaltenzahl bei Bedarf per style="--feature-cols: 3". */ .feature-grid { display: grid; gap: var(--gutter); align-items: start; } @media (min-width: 40em) { .feature-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 64em) { .feature-grid { grid-template-columns: repeat(var(--feature-cols, 3), 1fr); } } .feature__icon { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; margin-bottom: var(--space-24); border: var(--border); border-radius: var(--radius); background: var(--color-surface-2); color: var(--color-text); } .feature h3 { font-size: var(--text-h5); } .feature h3 + p { margin-top: var(--space-16); } .feature p { color: var(--color-text-2); max-width: 42ch; } /* --- Zahlen / Kennwerte -------------------------------------------------- */ .stats { display: grid; gap: var(--gutter); grid-template-columns: 1fr; } @media (min-width: 40em) { .stats { grid-template-columns: repeat(3, 1fr); } } .stat { text-align: center; } .stat__value { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h1); line-height: 1; letter-spacing: -0.02em; } .stat__label { margin-top: var(--space-16); font-family: var(--font-display); font-size: var(--text-small); letter-spacing: 0.02em; color: var(--color-text-2); } /* --- Schritte / Prozess -------------------------------------------------- */ /* Nummer als Signatur mit gelbem Unterstrich (wie die Overline). */ .steps { display: grid; gap: var(--gutter); align-items: start; } @media (min-width: 48em) { .steps { grid-template-columns: repeat(3, 1fr); } } .step__num { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h3); line-height: 1; color: var(--color-text); padding-bottom: var(--space-16); border-bottom: 3px solid var(--color-accent); margin-bottom: var(--space-24); } .step h3 { font-size: var(--text-h5); } .step h3 + p { margin-top: var(--space-16); } .step p { color: var(--color-text-2); } /* --- Zitat / Testimonial ------------------------------------------------- */ .quote blockquote { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h3); line-height: var(--leading-snug); letter-spacing: -0.015em; text-wrap: balance; } .quote figcaption, .quote__cite { margin-top: var(--space-24); font-family: var(--font-display); font-size: var(--text-small); color: var(--color-text-2); font-style: normal; } /* --- FAQ (native

, kein JavaScript nötig) ---------------------- */ .faq { max-width: var(--measure); } .faq__item { border-top: var(--border); } .faq__item:last-of-type { border-bottom: var(--border); } .faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-24); padding-block: var(--space-24); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h5); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-family: var(--font-display); font-weight: 400; font-size: 1.6em; line-height: 1; color: var(--color-text-3); transition: color var(--dur) var(--ease); } .faq__item[open] summary::after { content: "\2013"; } /* – */ .faq__item summary:hover::after { color: var(--color-accent-strong); } .faq__answer { padding-bottom: var(--space-24); color: var(--color-text-2); max-width: var(--measure); } /* --- Prompt-Beispiel (Zeile an Kitty) ----------------------------------- */ /* Zeigt einen Beispiel-Prompt. Linke gelbe Kante = Signatur. */ .prompt { display: block; font-family: var(--font-display); background: var(--color-surface-2); border: var(--border); border-left: 3px solid var(--color-accent); border-radius: var(--radius); padding: var(--space-16) var(--space-24); color: var(--color-text); } .prompt + .prompt { margin-top: var(--space-16); } /* --- Farbfelder / Token-Vorschau (Styleguide) --------------------------- */ .swatches { display: flex; flex-wrap: wrap; gap: var(--space-24); } .swatch { display: flex; flex-direction: column; gap: var(--space-8); font-family: var(--font-display); font-size: var(--text-small); } .swatch__chip { inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--radius); border: var(--border); } .swatch__label { color: var(--color-text); } .swatch__value { color: var(--color-text-3); font-size: var(--text-overline); letter-spacing: 0.04em; } /* --- Code (inline und Block) -------------------------------------------- */ code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--color-surface-2); border: var(--border); border-radius: var(--radius); padding: 0.1em 0.4em; } pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-small); line-height: 1.6; background: var(--color-surface-2); border: var(--border); border-radius: var(--radius); padding: var(--space-24); overflow-x: auto; } pre code { background: none; border: 0; padding: 0; font-size: inherit; } /* --- Dunkle Section-Variante (immer dunkles Full-Bleed-Band) ------------ */ .section--dark { background: var(--color-inverse); color: var(--color-on-inverse); } .section--dark :where(h1, h2, h3, h4, h5) { color: var(--color-on-inverse); } .section--dark p, .section--dark .lead { color: rgba(255, 255, 255, 0.82); } .section--dark .overline { color: rgba(255, 255, 255, 0.7); } .section--dark .stat__label { color: rgba(255, 255, 255, 0.7); } /* Gefüllter Button: Fläche ist Gelb, Rand unsichtbar. Hover -> gelbe Outline (siehe Button-Regeln). Ghost: heller Rand/Text, Hover wird zur hellen Fläche. */ .section--dark .button { --btn-border: transparent; } .section--dark .button--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgba(255, 255, 255, 0.5); } .section--dark .button--ghost:hover { --btn-bg: #fff; --btn-fg: var(--color-inverse); --btn-border: #fff; } /* --- CTA-Band ------------------------------------------------------------ */ .cta { text-align: center; } .cta .lead { margin-inline: auto; } /* Abstand Headline/Lead -> Buttons (sonst kleben sie an der Überschrift). */ .cta .button-row { margin-top: var(--space-40); } /* --- Navigation: Flyout-Untermenü (Nav-Punkt mit Unterseiten) ------------ */ /* Zwei Interaktionen in einem Baustein: 1. KLICK auf den Punkt -> führt auf die erste Seite (z. B. Übersicht). 2. HOVER / FOKUS -> zeigt die Unterseiten als luftiges Kontextmenü. Reveal per :hover (Maus) und .is-open (main.js für Tastatur/Escape/aria). Ohne JS: Hover funktioniert; Tastatur fällt sauber auf den Seitenlink zurück. Struktur-Regeln sind unter .nav__item--has-menu gescoped, damit sie die Basis-Nav (.nav ul / .nav a) sicher überschreiben. */ .nav__item--has-menu { position: relative; } .nav__item--has-menu > a { display: inline-flex; align-items: center; gap: var(--space-8); } .nav__caret { inline-size: 10px; block-size: 6px; color: var(--color-text-3); transition: transform var(--dur) var(--ease); } .nav__item--has-menu:hover > a .nav__caret, .nav__item--has-menu.is-open > a .nav__caret { transform: rotate(180deg); } .nav__item--has-menu .nav__submenu { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 14rem; margin: 0; padding: var(--space-8); list-style: none; display: block; /* überschreibt .nav ul (flex) */ background: var(--color-surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); } .nav__item--has-menu:hover > .nav__submenu, .nav__item--has-menu.is-open > .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .nav__item--has-menu .nav__submenu li { border: 0; margin: 0; } .nav__item--has-menu .nav__submenu a { display: block; padding: var(--space-16) var(--space-24); /* bewusst luftig */ font-family: var(--font-display); font-size: var(--text-small); font-weight: 600; color: var(--color-text); text-decoration: none; border-radius: var(--radius); white-space: nowrap; } .nav__item--has-menu .nav__submenu a::after { display: none; } /* kein Unterstrich hier */ .nav__item--has-menu .nav__submenu a:hover, .nav__item--has-menu .nav__submenu a:focus-visible { background: var(--color-surface-2); } .nav__item--has-menu .nav__submenu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--color-accent); /* aktive Unterseite: gelbe Kante */ } /* Mobile (im Burger-Menü): Untermenü inline und eingerückt statt Flyout. */ @media (max-width: 47.99em) { .nav__item--has-menu > a { justify-content: space-between; } .nav__caret { display: none; } .nav__item--has-menu .nav__submenu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 var(--space-8) 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } .nav__item--has-menu .nav__submenu li { border-top: 0; } .nav__item--has-menu .nav__submenu a { padding-left: var(--space-40); /* Einrückung = Hierarchie */ font-weight: 400; color: var(--color-text-2); } .nav__item--has-menu .nav__submenu a[aria-current="page"] { color: var(--color-text); } } /* Rechtsbündig öffnen (äußerster rechter Nav-Punkt, damit nichts aus dem Viewport ragt). */ .nav__item--has-menu .nav__submenu--end { left: auto; right: 0; } /* Weitere Lexend-Schnitte (selbst gehostet, DSGVO-konform). Werden nur geladen, wenn eine Seite den jeweiligen font-weight tatsächlich nutzt (z. B. die Typografie-Beispielseite). Die Kern-Headlines bleiben auf 600. */ @font-face { font-family:"Lexend"; src:url("fonts/lexend-latin-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Lexend"; src:url("fonts/lexend-latin-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Lexend"; src:url("fonts/lexend-latin-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } /* --- Karten (verlinkbare Vorschau-Kacheln) ------------------------------ */ /* Für Übersichts-/Hub-Seiten. Ganze Karte klickbar (a.card). */ .cards { display: grid; gap: var(--gutter); } @media (min-width: 40em) { .cards { grid-template-columns: 1fr 1fr; } } @media (min-width: 64em) { .cards { grid-template-columns: repeat(var(--cards-cols, 3), 1fr); } } .card { display: flex; flex-direction: column; padding: var(--space-32); background: var(--color-surface); border: var(--border); border-radius: var(--radius); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } a.card { text-decoration: none; color: inherit; } a.card:hover, a.card:focus-visible { box-shadow: var(--shadow-card); transform: translateY(-2px); } .card h3 { font-size: var(--text-h4); } .card p { margin-top: var(--space-16); color: var(--color-text-2); } .card__more { margin-top: var(--space-24); font-family: var(--font-display); font-weight: 700; font-size: var(--text-small); color: var(--color-text); } .card__more::after { content: " \2192"; color: var(--color-accent-strong); } /* =========================================================================== 8. THEMING & BEWEGUNG: Umschalter, weiche Seitenübergänge --------------------------------------------------------------------------- Farbschema kommt aus den light-dark()-Tokens in :root. Hier: der optische Umschalter, die weichen Übergänge und die Bewegungs-Regeln. Grundsatz: Jede Animation trägt ein Easing (--ease) und respektiert reduzierte Bewegung. =========================================================================== */ /* --- Farbschema-Umschalter (Sonne/Mond) --------------------------------- */ .nav { margin-left: auto; } /* schiebt Nav + Umschalter nach rechts */ .theme-toggle { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; background: none; border: none; border-radius: var(--radius); color: var(--color-text); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-toggle:hover { background: var(--color-surface-2); } .theme-toggle svg { inline-size: 20px; block-size: 20px; } /* Passendes Icon zum AKTIVEN Schema: hell -> Mond (Wechsel zu dunkel), dunkel -> Sonne (Wechsel zu hell). Deckt System- und manuelle Wahl ab. */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__moon { display: none; } :root:not([data-theme="light"]) .theme-toggle__sun { display: block; } } :root[data-theme="dark"] .theme-toggle__moon { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: block; } :root[data-theme="light"] .theme-toggle__moon { display: block; } :root[data-theme="light"] .theme-toggle__sun { display: none; } @media (max-width: 47.99em) { .theme-toggle { position: absolute; left: var(--pad-inline); top: 50%; transform: translateY(-50%); } } /* --- Weiche Seitenübergänge --------------------------------------------- */ /* 1) Moderne Browser: Cross-Document View Transitions -> sanftes Überblenden beim Seitenwechsel (kein hartes Aufblitzen). Mit Easing. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--ease); } /* 2) Überall (auch lokal per file:// und in älteren Browsern): sanftes Einblenden des Inhalts beim Laden. Nur Opacity -> keine Layout-Sprünge. */ @keyframes kitty-fade-in { from { opacity: 0; } to { opacity: 1; } } main { animation: kitty-fade-in 300ms var(--ease) both; } @media (prefers-reduced-motion: reduce) { main { animation: none; } ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }