/* ========================================================================== savaara · Designsystem nach CI (Brand Guidelines V2: Farben, Typografie, Logo, Bildsprache) -------------------------------------------------------------------------- Aufbau 01 Schriften (Verweis auf schriften.css) 02 Design-Tokens (CI-Farben, Rollen-Tokens hell und dunkel, Typo-Skala, Abstände) 03 Farbkontexte (Weiß/Fog, Pastell, Violett) 04 Basis und Typografie 05 Layout-Grundlagen und Sektionen 06 Buttons, Links, Badges, Tags, Icons 07 Header und Navigation (Logo mit Sicherheitszone, Darstellung) 08 Hero und Seitenkopf 09 Section-Header, Fließtext, Callouts 10 Cover, Bücher-Raster, Buchdetail 11 Porträts, Autor*innen-Raster, Autor*innen-Detail 12 Modellkarten, Tabelle „Was bei Autor*innen ankommt“, Add-ons, Zahlung 13 Schrittfolge, KI und Mensch, Merkmale, Leitsatz 14 FAQ, CTA-Band, Rechtstexte 15 Formulare (mehrstufig, Upload, Zusammenfassung) 16 Footer 17 Bewegung, Hilfsklassen, Druck (immer hell) 18 Typo-Klassen (stehen am Ende und haben damit Vorrang) 19 Seitenbausteine der Integration (Wege-Karten, hervorgehobener Schritt, FAQ-Sprungmarken, Erlös-Tabelle, Fragebogen-Rahmen) 20 Barrierefreiheit (lange Wörter, erzwungene Farben) 21 Sprachumschalter (DE, EN; nur bei mehr als einer Sprache) CI-Regeln, die dieses Stylesheet umsetzt Schrift Ryker nur für Display-Momente ab 32 px (.display-xl|l|m und die Komponenten Hero, Seitenkopf, Buch- und Personentitel, Leitsatz, CTA-Band). Maximal ein Ryker-Moment pro Sektion. H1 bis H4 in ES Rebond Medium. Fließtext Rebond Regular 18 px, Zeilenhöhe 1,55. Labels Rebond Medium 12 px, Tracking 0,04 em, Versalien. Farbe 60/30/10: Weiß und Fog, Pastelle, Violett und Ink. Pro Sektion genau eine Pastellfarbe. Violett nie auf Pastell (die Pastell- Kontexte schalten Violett automatisch auf Ink um). Text nur in Ink oder Weiß, Violett nur als Signal (Logo, Buttons, Linien, Icons, Link-Hover, Display-Akzent). Violett nie als Seitenhintergrund, als großer Block (CTA-Band, Statement) mit weißer Schrift erlaubt. Logo Offizielle Dateien, Header 28 bis 36 px hoch, Sicherheitszone halbe Logohöhe, nie auf Pastell. Icons Linien-Icons, 1,5 px, runde Enden, 24 x 24, inline. Dunkel Folgt der Systemeinstellung, umschaltbar im Header (Abschnitt 02). Violett bleibt Fläche (Buttons, CTA-Band), Linien und Links werden Lilac, Pastell wird dunkle Tönung, Cover bleiben auf hellem Grund. Keine externen Ressourcen. Bewegung nur ohne prefers-reduced-motion. ========================================================================== */ /* 01 Schriften ------------------------------------------------------------ Die @font-face-Regeln (Ryker, ES Rebond Grotesque) stehen in assets/css/schriften.css und werden in beiden Builds eingebunden. Fallbacks stehen in --font-display und --font-text (Abschnitt 02). */ /* 02 Design-Tokens ---------------------------------------------------------- Drei Ebenen: 1. CI-Farben (--color-*): Konstanten der Farbpalette V2. Sie werden nie umdefiniert, auch nicht im Dunkelmodus. 2. Rollen-Tokens (--bg-*, --fg, --fg-muted, --line*, --signal*, --tint-*, --status-*, --cover-tile, --logo-color …): verbinden die CI-Farben mit ihrer Aufgabe. Nur sie wechseln zwischen Hell und Dunkel. 3. Kontext-Tokens (--text, --accent, --accent-fill, --on-accent, --rule …, Abschnitt 03): je Fläche, verweisen auf die Rollen-Tokens. Komponenten nutzen nur Ebene 2 und 3. Ausnahmen mit Absicht: violette Flächen (in beiden Modi gleich) und helle Inseln (Cover-Präsentation). Dunkelmodus - Standard ist die Systemeinstellung (prefers-color-scheme), ohne Speicherung. - data-theme="light" | "dark" am setzt assets/js/theme.js vor dem ersten Zeichnen, wenn die Person im Header selbst gewählt hat. - Der Block DUNKEL-TOKENS steht zweimal (Medienabfrage und data-theme), der Block HELL-TOKENS zweimal (:root und Druck). Der Build prüft, dass die Kopien gleich sind. Nur zwischen den Markierungen ändern. - Kontraste (WCAG 2.2 AA) sind für beide Modi berechnet, siehe _styleguide.html, Abschnitt Dunkelmodus. */ :root { /* CI-Farben (Farbpalette V2, Namen wie im CI-Code), konstant */ --color-violet: #6729FF; /* Savaara Violet: Signal, Logo, CTAs, Links, Highlights */ --color-ink: #1D1D1D; /* Ink Black: Text, Überschriften */ --color-white: #FFFFFF; /* Pure White: Haupt-Hintergrund */ --color-fog: #F4F4F6; /* Fog Gray: Sekundär-Hintergrund, Karten */ --color-lavender: #DBD2F3; /* Lavender Mist: Standard-Akzent */ --color-lilac: #A885FF; /* Lilac Bloom: Aktiv-Zustand, Hover, Signal im Dunkeln */ --color-mint: #D2F9BE; /* Mint Breeze: Erfolg, Freigabe */ --color-sky: #D6E8F5; /* Sky Wash: Information, Hinweis */ --color-peach: #F7EAE0; /* Peach Soft: Persönliches, Porträts */ --color-violet-light: var(--color-lilac); /* Semantische CI-Tokens (Namen aus dem CI-Code, konstant) */ --color-text-primary: var(--color-ink); --color-text-inverse: var(--color-white); --color-bg: var(--color-white); --color-bg-muted: var(--color-fog); --color-accent: var(--color-violet); --color-accent-hover: var(--color-lilac); --color-success: var(--color-mint); --color-info: var(--color-sky); --color-warmth: var(--color-peach); /* Rollen-Tokens, hell. Kontraste hell: Ink auf Weiß 16,9 : 1, Ink 70 % auf Weiß 6,2 : 1 (auf Pastell ab 5,2 : 1), Violett auf Weiß 6,3 : 1, Weiß auf Violett 6,3 : 1, Ink auf Lilac 6,0 : 1, Feldrahmen Ink 50 % 3,3 : 1. */ /* HELL-TOKENS:START */ color-scheme: light; --bg-page: var(--color-white); /* Seitengrund, Header, Tabellenkopf */ --bg-muted: var(--color-fog); /* Fog-Sektionen, Karten auf Weiß, Footer */ --bg-card: var(--color-white); /* Karten auf Fog und Pastell */ --bg-field: var(--color-white); /* Formularfelder */ --fg: var(--color-ink); /* Text, Überschriften, Ryker */ --fg-muted: rgba(29, 29, 29, .7); /* Nebentext */ --line: #D9D9D9; /* Haarlinien (dekorativ) */ --line-soft: rgba(29, 29, 29, .12); /* feine Trennlinien */ --line-control: rgba(29, 29, 29, .5); /* Rahmen von Bedienelementen (3 : 1) */ --signal: var(--color-violet); /* Linien, Icons, Link-Unterstreichung, Fokus, Display-Akzent */ --signal-fill: var(--color-violet); /* Fläche primärer Buttons, Plakette, Tabellenkopf */ --on-signal-fill: var(--color-white); /* Schrift auf --signal-fill */ --signal-hover-bg: var(--color-lilac); /* Hover primärer Buttons */ --signal-hover-fg: var(--color-ink); --tint-lavender: var(--color-lavender); /* Pastell-Sektionen */ --tint-peach: var(--color-peach); --tint-sky: var(--color-sky); --tint-mint: var(--color-mint); --status-error: #B3261E; /* nur Rahmen und Symbol, nie Fließtext */ --on-status-error: var(--color-white); --selection-bg: var(--color-lavender); --selection-fg: var(--color-ink); --cover-tile: var(--color-fog); /* Grund der Cover (Mockups haben Fog eingebacken) */ --logo-color: var(--color-violet); /* Wortmarke und Symbol (Inline-SVG) */ --logo-filter: none; /* Logo als : hell unverändert */ --portrait-dim: 1; --fw-lead: 300; /* Lead in Rebond Light */ --card-edge: transparent; /* Kante ruhiger Karten, im Dunkeln sichtbar */ --shadow-s: 0 1px 2px rgba(29, 29, 29, .06), 0 2px 8px -2px rgba(29, 29, 29, .08); --shadow-m: 0 2px 4px rgba(29, 29, 29, .04), 0 18px 40px -20px rgba(29, 29, 29, .28); --shadow-featured: 0 2px 4px rgba(29, 29, 29, .04), 0 24px 48px -28px rgba(29, 29, 29, .35); --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* HELL-TOKENS:ENDE */ /* Kompatibilität: frühere Hilfstöne verweisen auf die Rollen-Tokens */ --ink-70: var(--fg-muted); --ink-50: var(--line-control); --ink-12: var(--line-soft); /* Kompatibilität mit den Namen aus dem Konzept (Abschnitt 9), konstant */ --purple: var(--color-violet); --purple-light: var(--color-lilac); --lavender: var(--color-lavender); --peach: var(--color-peach); --sky: var(--color-sky); --mint: var(--color-mint); --ink: var(--color-ink); --paper: var(--color-fog); --white: var(--color-white); /* Schriften: nur das CI-Duo, Fallbacks laut Typo-Guide (nie Times, Arial, Calibri) */ --font-display: "Ryker", Georgia, serif; --font-display-text: "Ryker Text", "Ryker", Georgia, serif; --font-text: "ES Rebond Grotesque", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; /* Typo-Skala laut CI, fluide zwischen 375 px (mobil) und 1440 px (Desktop) */ --fs-display-xl: clamp(3.5rem, 2.62rem + 3.756vw, 6rem); /* Ryker 56 bis 96 */ --fs-display-l: clamp(2.75rem, 2.134rem + 2.629vw, 4.5rem); /* Ryker 44 bis 72 */ --fs-display-m: clamp(2.25rem, 1.81rem + 1.878vw, 3.5rem); /* Ryker 36 bis 56 */ --fs-h1: clamp(1.875rem, 1.655rem + .939vw, 2.5rem); /* Rebond Medium 30 bis 40 */ --fs-h2: clamp(1.75rem, 1.25rem + 1.6vw, 2.625rem); /* Rebond Medium 28 bis 42 */ --fs-h3: clamp(1.375rem, 1.331rem + .188vw, 1.5rem); /* Rebond Medium 22 bis 24 */ --fs-h4: clamp(1.125rem, 1.081rem + .188vw, 1.25rem); /* Rebond Medium 18 bis 20 */ --fs-lead: clamp(1.1875rem, 1.121rem + .282vw, 1.375rem);/* Rebond Light 19 bis 22 */ --fs-body: clamp(1.0625rem, 1.04rem + .094vw, 1.125rem); /* Body L 17 bis 18 */ --fs-body-m: 1rem; /* Body M 16 */ --fs-caption: clamp(.8125rem, .79rem + .094vw, .875rem); /* Caption 13 bis 14 */ --fs-label: .75rem; /* Label 12 */ --lh-display-xl: 1.05; --lh-display-l: 1.08; --lh-display-m: 1.12; --lh-h1: 1.15; --lh-h2: 1.2; --lh-h3: 1.3; --lh-h4: 1.4; --lh-lead: 1.5; --lh-body: 1.55; --lh-body-m: 1.5; --lh-caption: 1.45; --lh-label: 1.3; --tracking-label: .04em; /* Ältere Stufen-Namen, auf die CI-Skala gelegt */ --step--2: var(--fs-label); --step--1: var(--fs-caption); --step-0: var(--fs-body); --step-1: var(--fs-lead); --step-2: var(--fs-h3); --step-3: var(--fs-h2); --step-4: var(--fs-display-m); --step-5: var(--fs-display-l); --step-6: var(--fs-display-xl); --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: var(--lh-body); /* Abstände */ --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-section: clamp(4rem, 2.8rem + 5.5vw, 8rem); --gutter: clamp(1rem, .5rem + 2.6vw, 2.5rem); /* Maße */ --content-max: 76rem; /* 1216 px */ --narrow-max: 48rem; /* 768 px */ --measure: 68ch; --header-h: 4rem; --logo-h: 1.75rem; /* Header-Logo mobil 28 px */ /* Formen */ --radius-xs: 4px; --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --radius-pill: 999px; /* Bewegung */ --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 160ms; --dur: 280ms; --dur-slow: 640ms; } /* Rollen-Tokens, dunkel (CI-Ausblick Dark Mode: Grund #0D0D10, Flächen #1A1A1F, Text #F4F4F6). Violett #6729FF erreicht auf #0D0D10 nur 3,08 : 1 und bleibt deshalb Fläche (Buttons, CTA-Band, Plakette mit weißer Schrift 6,29 : 1). Für Linien, Icons, Links und Fokus gilt im Dunkeln Lilac Bloom #A885FF (6,90 : 1 auf #0D0D10, 6,16 : 1 auf #1A1A1F, 5,34 : 1 auf #26262D). Pastell wird zu ruhigen dunklen Tönungen mit hellem Text (ab 13,7 : 1). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* DUNKEL-TOKENS:START */ color-scheme: dark; --bg-page: #0D0D10; --bg-muted: #1A1A1F; --bg-card: #26262D; --bg-field: #0D0D10; --fg: #F4F4F6; --fg-muted: rgba(244, 244, 246, .7); --line: #34343C; --line-soft: rgba(244, 244, 246, .14); --line-control: #80808A; --signal: var(--color-lilac); --signal-fill: var(--color-violet); --on-signal-fill: var(--color-white); --signal-hover-bg: var(--color-lilac); --signal-hover-fg: #0D0D10; --tint-lavender: #241E38; --tint-peach: #2A221C; --tint-sky: #1A2631; --tint-mint: #1B2A17; --status-error: #FF8A80; --on-status-error: #0D0D10; --selection-bg: #3B2F6B; --selection-fg: #F4F4F6; --cover-tile: var(--color-fog); --logo-color: var(--color-white); --logo-filter: brightness(0) invert(1); --portrait-dim: .92; --fw-lead: 400; --card-edge: #34343C; --shadow-s: 0 1px 2px rgba(0, 0, 0, .5); --shadow-m: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 40px -20px rgba(0, 0, 0, .75); --shadow-featured: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 48px -28px rgba(0, 0, 0, .85); --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* DUNKEL-TOKENS:ENDE */ } } :root[data-theme="dark"] { /* DUNKEL-TOKENS:START */ color-scheme: dark; --bg-page: #0D0D10; --bg-muted: #1A1A1F; --bg-card: #26262D; --bg-field: #0D0D10; --fg: #F4F4F6; --fg-muted: rgba(244, 244, 246, .7); --line: #34343C; --line-soft: rgba(244, 244, 246, .14); --line-control: #80808A; --signal: var(--color-lilac); --signal-fill: var(--color-violet); --on-signal-fill: var(--color-white); --signal-hover-bg: var(--color-lilac); --signal-hover-fg: #0D0D10; --tint-lavender: #241E38; --tint-peach: #2A221C; --tint-sky: #1A2631; --tint-mint: #1B2A17; --status-error: #FF8A80; --on-status-error: #0D0D10; --selection-bg: #3B2F6B; --selection-fg: #F4F4F6; --cover-tile: var(--color-fog); --logo-color: var(--color-white); --logo-filter: brightness(0) invert(1); --portrait-dim: .92; --fw-lead: 400; --card-edge: #34343C; --shadow-s: 0 1px 2px rgba(0, 0, 0, .5); --shadow-m: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 40px -20px rgba(0, 0, 0, .75); --shadow-featured: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 48px -28px rgba(0, 0, 0, .85); --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* DUNKEL-TOKENS:ENDE */ } @media (min-width: 40em) { :root { --logo-h: 2rem; } /* 32 px */ } @media (min-width: 64em) { :root { --header-h: 4.75rem; --logo-h: 2.25rem; } /* 36 px */ } /* 03 Farbkontexte ------------------------------------------------------------ Komponenten färben ihre Signal-Elemente mit den Kontext-Tokens: --accent Linien, Haken, Icons, Fokus, Link-Unterstreichung, Display-Akzent --accent-fill Fläche primärer Buttons und Plaketten, Schrift darauf: --on-accent Die Fläche entscheidet, was sie sind: Weiß und Fog Violett (hell) bzw. Lilac für Linien und Violett für Flächen (dunkel) Pastell Textfarbe, weil Violett auf Pastell laut CI verboten ist (im Dunkeln sinngemäß: dunkle Tönung, Akzent in Textfarbe) Violett Weiß, Text in Weiß, in beiden Modi gleich Karten innerhalb einer Pastell- oder Violett-Sektion schalten zurück auf den Standard. --nested-pastel sorgt dafür, dass innerhalb einer Pastell-Sektion keine zweite Pastellfarbe auftaucht (Callouts, Badges usw. werden Karte). */ /* Pastell-Flächen */ .section--lavender, .section--peach, .section--sky, .section--mint, .surface--lavender, .surface--peach, .surface--sky, .surface--mint, .cta-band, .callout--info, .callout--note, .callout--success, .callout--brand, .notice, .form-success, .duo__col--mensch { --text: var(--fg); --text-muted: var(--fg-muted); --text-inverse: var(--bg-page); --accent: var(--fg); --accent-fill: var(--fg); --on-accent: var(--bg-page); --accent-hover-bg: var(--bg-card); --accent-hover-fg: var(--fg); --accent-hover-border: var(--fg); --rule: var(--line-soft); --logo-display: none; /* Logo und Symbol nie auf Pastell */ } .section--lavender, .section--peach, .section--sky, .section--mint, .surface--lavender, .surface--peach, .surface--sky, .surface--mint { --nested-pastel: var(--bg-card); } /* Standard: Weiß und Fog (auch Karten in farbigen Sektionen) */ :root, .section--white, .section--paper, .section--fog, .surface--white, .surface--fog, .cta-band--paper, .byline-person, .model-card, .addon-card, .pay-card, .summary__group, .choice, .filelist__item, .field__input, .field__select, .field__textarea, .cover__ph { --text: var(--fg); --text-muted: var(--fg-muted); --text-inverse: var(--bg-page); --accent: var(--signal); --accent-fill: var(--signal-fill); --on-accent: var(--on-signal-fill); --accent-hover-bg: var(--signal-hover-bg); --accent-hover-fg: var(--signal-hover-fg); --accent-hover-border: var(--signal-hover-bg); --rule: var(--line); --logo-display: block; --nested-pastel: initial; } /* Violett: großer Color-Block mit weißer Schrift (nie Seitenhintergrund). Bleibt im Dunkelmodus unverändert: Weiß auf #6729FF 6,29 : 1. */ .section--violet, .surface--violet, .cta-band--violet, .on-violet, .on-dark { --text: var(--color-white); --text-muted: var(--color-white); --text-inverse: var(--color-ink); /* Text auf weißen Buttons: Ink, nie Violett (CI) */ --accent: var(--color-white); --accent-fill: var(--color-white); --on-accent: var(--color-ink); --accent-hover-bg: var(--color-ink); --accent-hover-fg: var(--color-white); --accent-hover-border: var(--color-ink); --rule: rgba(255, 255, 255, .4); --logo-display: block; --nested-pastel: initial; color: var(--color-white); } /* 04 Basis und Typografie --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; min-height: 100vh; background: var(--bg-page); color: var(--fg); font-family: var(--font-text); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); letter-spacing: 0; font-kerning: normal; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; display: flex; flex-direction: column; } main { flex: 1 0 auto; display: block; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } img, svg, video, picture { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* Überschriften H1 bis H4: ES Rebond Medium. Ryker nur über .display-* und die Display-Komponenten (Hero, Seitenkopf, Leitsatz, CTA-Band). */ h1, h2, h3, h4 { font-family: var(--font-text); font-weight: 500; text-wrap: balance; hyphens: manual; } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.01em; } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.01em; } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -.005em; } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); } /* Lange deutsche Wörter in großen Headlines: nur auf schmalen Bildschirmen trennen */ @media (max-width: 40em) { h1, h2, h3, .display-xl, .display-l, .display-m, .principle { hyphens: auto; -webkit-hyphens: auto; } } p { text-wrap: pretty; } strong, b { font-weight: 500; } .muted { color: var(--text-muted, var(--fg-muted)); } .nums { font-variant-numeric: tabular-nums lining-nums; } /* Labels: ES Rebond Medium 12 px, Tracking 0,04 em, Versalien (Buttons, Navigation, Tags, Eyebrows, kleine Zwischentitel) */ .label, .eyebrow, .badge, .tag, .btn, .menu-toggle, .format__name, .book-detail__section-title, .maker__title, .model-card__facts dt, .model-card__label, .compare__corner, .duo__label, .feature__num, .faq-group__title, .site-footer__heading, .pay-card__label, .keyfacts dt, .person-card__books, .sg-label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; font-style: normal; line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* Eyebrow: Label in Ink mit violetter Linie (Signal, kein violetter Text) */ .eyebrow { display: inline-flex; align-items: center; gap: .6em; margin-bottom: var(--space-s); color: var(--text, var(--fg)); } .eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 2px; border-radius: 1px; background: var(--accent); } .eyebrow--ink { color: var(--text-muted); } .eyebrow--ink::before { background: currentColor; } .eyebrow--plain::before { display: none; } a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--accent); text-underline-offset: .22em; transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); } a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; } :focus { outline: none; } main:focus-visible { outline: none; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs); } hr, .rule { border: 0; height: 1px; background: var(--rule, var(--line)); margin: var(--space-xl) 0; } /* 05 Layout-Grundlagen und Sektionen ---------------------------------------- */ .container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(var(--narrow-max) + 2 * var(--gutter)); } .container--wide { max-width: calc(88rem + 2 * var(--gutter)); } /* Sektionen: pro Sektion genau eine Fläche. 60 % Weiß und Fog, 30 % Pastell, 10 % Violett und Ink. Pastell-Sektionen nicht direkt aufeinander folgen lassen. */ .section { padding-block: var(--space-section); } .section--tight { padding-block: calc(var(--space-section) * .6); } .section--flush-top { padding-top: 0; } .section--white { background: var(--bg-page); } .section--paper, .section--fog { background: var(--bg-muted); } .section--lavender, .surface--lavender { background: var(--tint-lavender); } .section--peach, .surface--peach { background: var(--tint-peach); } .section--sky, .surface--sky { background: var(--tint-sky); } .section--mint, .surface--mint { background: var(--tint-mint); } .section--violet, .surface--violet { background: var(--color-violet); } /* in beiden Modi gleich */ .surface--white { background: var(--bg-page); } .surface--fog { background: var(--bg-muted); } .section--line { border-top: 1px solid var(--line); } /* Abstand zwischen Kindern (Fluss) */ .stack > * + * { margin-top: var(--stack-space, var(--space-m)); } .stack--s { --stack-space: var(--space-s); } .stack--l { --stack-space: var(--space-xl); } .grid { display: grid; gap: var(--grid-gap, var(--space-l)); } @media (min-width: 48em) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 48em) and (max-width: 63.99em) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Zweispaltig: Text links, Randspalte rechts */ .split { display: grid; gap: var(--space-xl); } @media (min-width: 60em) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; } .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split--reverse > :first-child { order: 2; } .split__sticky { position: sticky; top: calc(var(--header-h) + var(--space-l)); } } .center { text-align: center; margin-inline: auto; } .actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; } .actions--center { justify-content: center; } /* 06 Buttons, Links, Badges, Tags, Icons ------------------------------------ */ .btn { --btn-bg: transparent; --btn-fg: var(--text, var(--fg)); --btn-border: var(--text, var(--fg)); display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 3rem; padding: .75rem 1.5rem; border: 1.5px solid var(--btn-border); border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; } .btn:hover { color: var(--btn-fg); text-decoration: none; } .btn:active { transform: translateY(1px); } /* Primär: Violett mit weißer Schrift, Hover Lilac Bloom mit Ink (CI: accent-hover). Die Fläche kommt aus --accent-fill, damit Buttons im Dunkeln Violett bleiben, während Linien und Links Lilac werden. Auf Pastell automatisch in Textfarbe, auf Violett Weiß mit Ink-Schrift. */ .btn--primary { --btn-bg: var(--accent-fill); --btn-fg: var(--on-accent); --btn-border: var(--accent-fill); } .btn--primary:hover { --btn-bg: var(--accent-hover-bg); --btn-fg: var(--accent-hover-fg); --btn-border: var(--accent-hover-border); } /* Sekundär: Kontur in Textfarbe */ .btn--secondary { --btn-bg: transparent; --btn-fg: var(--text); --btn-border: var(--text); } .btn--secondary:hover { --btn-bg: var(--text); --btn-fg: var(--text-inverse); --btn-border: var(--text); } .btn--ink { --btn-bg: var(--fg); --btn-fg: var(--bg-page); --btn-border: var(--fg); } .btn--ink:hover { --btn-bg: transparent; --btn-fg: var(--text); --btn-border: var(--text); } /* Hell: für violette Flächen (entspricht .btn--primary im Violett-Kontext), in beiden Modi gleich */ .btn--light { --btn-bg: var(--color-white); --btn-fg: var(--color-ink); --btn-border: var(--color-white); } .btn--light:hover { --btn-bg: var(--color-ink); --btn-fg: var(--color-white); --btn-border: var(--color-ink); } .btn--ghost { --btn-border: transparent; padding-inline: .75rem; } .btn--ghost:hover { --btn-bg: var(--bg-muted); --btn-fg: var(--fg); } .btn--sm { min-height: 2.5rem; padding: .5rem 1.125rem; } .btn--lg { min-height: 3.5rem; padding: 1rem 2rem; } .btn--block { display: flex; width: 100%; } .btn[disabled], .btn[aria-disabled="true"], .btn--disabled { --btn-bg: var(--bg-muted); --btn-fg: var(--fg-muted); --btn-border: var(--line); cursor: not-allowed; transform: none; } .btn__icon { width: 1.25em; height: 1.25em; flex: none; } /* Linien-Icons (Sprite, 24 x 24, 1,5 px, runde Enden) */ .icon { display: inline-block; flex: none; width: 1.5rem; height: 1.5rem; vertical-align: middle; color: inherit; } .icon--s { width: 1.25rem; height: 1.25rem; } .icon--l { width: 2rem; height: 2rem; } .icon--accent { color: var(--accent); } /* Textlink mit Pfeil (Icon als Maske, Strichstärke 1,5 px bei 1,1 em) */ .link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 500; color: var(--text, var(--fg)); text-decoration: none; } .link-arrow::after { content: ""; width: 1.1em; height: 1.1em; flex: none; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--dur) var(--ease); } .link-arrow:hover { text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .22em; } .link-arrow:hover::after { transform: translateX(4px); } .link-arrow--external::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E"); } .link-arrow--external:hover::after { transform: translate(2px, -2px); } .link-button { padding: 0; border: 0; background: none; color: var(--text, var(--fg)); font-size: var(--fs-caption); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .22em; } .link-button:hover { text-decoration-thickness: 2px; } .link-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); } /* Badges: Label auf ruhiger Fläche. In Pastell-Sektionen weiß (eine Pastellfarbe pro Sektion). */ .badge { display: inline-flex; align-items: center; gap: .4em; padding: .35rem .75rem; border-radius: var(--radius-pill); background: var(--nested-pastel, var(--bg-muted)); color: var(--fg); white-space: nowrap; } .badge--soon { background: var(--nested-pastel, var(--tint-peach)); } .badge--new { background: var(--nested-pastel, var(--tint-mint)); } .badge--info { background: var(--nested-pastel, var(--tint-sky)); } .badge--featured { background: var(--accent-fill); color: var(--on-accent); } .badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--rule, var(--line)); color: var(--text, var(--fg)); } .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .tag { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--fg); background: var(--bg-card); } /* Checkliste: Linien-Icon (Kreis mit Haken) in --accent */ .checklist { display: grid; gap: .7rem; } .checklist li { position: relative; padding-left: 2rem; line-height: var(--lh-body-m); } .checklist li::before { content: ""; position: absolute; left: 0; top: .12em; width: 1.25rem; height: 1.25rem; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.25 2.75 2.75L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.25 2.75 2.75L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat; } .checklist--muted li::before { background: var(--text, var(--fg)); } .checklist--plain li { padding-left: 1.25rem; } .checklist--plain li::before { top: .68em; width: .45rem; height: .45rem; border-radius: 50%; -webkit-mask: none; mask: none; } /* 07 Header und Navigation -------------------------------------------------- */ .skip-link { position: absolute; left: var(--space-s); top: var(--space-s); z-index: 100; padding: .75rem 1.25rem; border-radius: var(--radius-pill); background: var(--color-violet); /* Violett mit Weiß, in beiden Modi 6,29 : 1 */ color: var(--color-white); font-weight: 500; text-decoration: none; transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); color: var(--color-white); outline-color: var(--fg); } /* Header immer deckend: Logo violett auf Weiß (CI-Standard), im Dunkeln weiß auf #0D0D10. Keine Transparenz, sonst schimmern violette oder pastellfarbene Sektionen durch. */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-page); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); } .site-header.is-scrolled, .site-header.is-open { border-bottom-color: var(--line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); min-height: var(--header-h); } /* Logo: Höhe 28 px mobil, 32 px ab Tablet, 36 px Desktop (CI: 28 bis 32 bzw. 32 bis 40). Sicherheitszone halbe Logohöhe oben, unten und rechts; links sorgt der Seitenrand dafür. */ .site-logo { display: inline-flex; align-items: center; flex: none; padding-block: calc(var(--logo-h) / 2); margin-inline-end: calc(var(--logo-h) / 2); line-height: 0; color: var(--logo-color); text-decoration: none; } /* Wortmarke als Inline-SVG aus dem Sprite (currentColor): violett im hellen, weiß im dunklen Modus, folgt Systemeinstellung und Umschalter ohne Bildwechsel. Logos als (violette Datei) werden im Dunkeln per Filter weiß. */ .site-logo__img, .site-logo svg { display: block; width: auto; height: var(--logo-h); } .site-logo__img { filter: var(--logo-filter); } .site-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); } .site-nav__link { position: relative; display: inline-block; padding-block: .75rem; font-size: var(--fs-label); font-weight: 500; line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg); text-decoration: none; } .site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1.5px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .site-nav__link:hover { color: var(--fg); text-decoration: none; } .site-nav__link:hover::after, .site-nav__link[aria-current]::after { transform: scaleX(1); } .site-nav__link[aria-current] { color: var(--fg); } .menu-toggle { display: none; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem .25rem .5rem .75rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--fg); } .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 1.375rem; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease); } .menu-toggle__bars { position: relative; } .menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; } .menu-toggle__bars::before { top: -6px; } .menu-toggle__bars::after { top: 6px; } .site-header.is-open .menu-toggle__bars { background: transparent; } .site-header.is-open .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .site-header.is-open .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } /* Ohne JavaScript: Header nicht fixiert (die umbrochene Navigation wäre mobil über 230 px hoch und würde fokussierte Elemente verdecken), Navigation sichtbar */ .no-js .site-header { position: relative; } .no-js .site-header__inner { flex-wrap: wrap; padding-block: var(--space-2xs); } .no-js .site-header__panel, .no-js .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); } /* Darstellung (System, Hell, Dunkel): Auswahl im Header, mobil im Menü. Nur mit JavaScript sichtbar (theme.js setzt .js vor dem ersten Zeichnen); ohne JavaScript gilt die Systemeinstellung. Die gewählte Option wird über data-theme am markiert, damit beim Laden nichts springt; main.js hält die Radios synchron. Zielgröße 40 x 40 px (Desktop) bzw. 44 px hoch (Menü). */ .theme-switch { display: none; min-width: 0; margin: 0; padding: 0; border: 0; } .js .theme-switch { display: block; } .theme-switch__legend { float: left; width: 100%; margin-bottom: var(--space-xs); padding: 0; font-size: var(--fs-label); font-weight: 500; line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .theme-switch__options { clear: both; display: flex; gap: 2px; width: fit-content; padding: 3px; border: 1px solid var(--line-control); border-radius: var(--radius-pill); } .theme-switch__option { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.5rem; min-height: 2.5rem; padding: 0 .9rem; border-radius: var(--radius-pill); color: var(--fg-muted); font-size: var(--fs-caption); font-weight: 500; line-height: 1.2; cursor: pointer; } /* Das echte Optionsfeld liegt unsichtbar über der ganzen Option: Klick, Tastatur (Pfeiltasten) und Fokusrahmen gehören so zum nativen Element. */ .theme-switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: inherit; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; } .theme-switch__icon, .theme-switch__text { position: relative; pointer-events: none; } .theme-switch__icon { width: 1.25rem; height: 1.25rem; flex: none; } .theme-switch__option:hover { color: var(--fg); } .theme-switch__input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } /* gewählte Option: Automatisch ohne data-theme, sonst Hell bzw. Dunkel */ :root:not([data-theme]) .theme-switch__input[value="auto"], :root[data-theme="light"] .theme-switch__input[value="light"], :root[data-theme="dark"] .theme-switch__input[value="dark"] { background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--line-control); } :root:not([data-theme]) .theme-switch__input[value="auto"] ~ *, :root[data-theme="light"] .theme-switch__input[value="light"] ~ *, :root[data-theme="dark"] .theme-switch__input[value="dark"] ~ * { color: var(--fg); } /* Mobil und Tablet mit JavaScript: Menü-Schalter und aufklappendes Panel. Grenze 75em (1200 px): Navigation, Button und Darstellung passen erst ab dieser Breite in eine Zeile (bei 1024 px brach die Navigation um). Platz für den späteren Sprachumschalter ist eingeplant. main.js nutzt dieselbe Grenze. */ @media (max-width: 74.99em) { .js .menu-toggle { display: inline-flex; } /* absolut direkt unter dem Header, Höhe bis zum unteren Rand des Fensters */ .js .site-header__panel { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); z-index: 49; border-top: 1px solid var(--line); display: none; flex-direction: column; gap: var(--space-xl); padding: var(--space-l) var(--gutter) var(--space-2xl); background: var(--bg-page); overflow-y: auto; overscroll-behavior: contain; } .js .site-header.is-open .site-header__panel { display: flex; animation: nav-in var(--dur) var(--ease); } .js .site-nav { display: flex; flex-direction: column; gap: var(--space-xl); } .js .site-nav__list { flex-direction: column; gap: 0; } .js .site-nav__list li { border-bottom: 1px solid var(--line); } /* Im Panel groß als H2 in Rebond Medium, ohne Versalien */ .js .site-nav__link { display: block; padding-block: 1rem; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.01em; text-transform: none; } .js .site-nav__link::after { display: none; } .js .site-nav__link[aria-current] { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: .2em; } .js .site-nav__cta { width: 100%; min-height: 3.5rem; } /* Darstellung im Menü: sichtbare Legende, drei gleich breite Optionen mit Text */ .js .theme-switch__options { width: 100%; } .js .theme-switch__option { flex: 1 1 0; min-height: 2.75rem; padding-inline: .5rem; } .nav-open { overflow: hidden; } } @media (min-width: 75em) { .site-header__panel { display: flex; align-items: center; gap: var(--space-l); } .site-nav { display: flex; align-items: center; gap: var(--space-l); } .site-nav__list { gap: var(--space-l); } /* Im Header nur Symbole, Legende und Optionstexte bleiben für Screenreader */ .theme-switch__legend, .theme-switch__text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .theme-switch__option { padding: 0; } } @keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* 08 Hero und Seitenkopf ---------------------------------------------------- */ .hero { padding-block: clamp(3.5rem, 2rem + 6vw, 8rem) clamp(4rem, 2.5rem + 6vw, 8rem); position: relative; } .hero__inner { display: grid; gap: var(--space-2xl); align-items: center; } /* Ryker-Moment der Startseite: Display XL (56 bis 96 px) */ .hero__title { max-width: 16ch; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: normal; } /* Akzentwort: Violett auf Weiß, auf Pastell automatisch Ink */ .hero__title em { font-style: normal; color: var(--accent); } .hero__lead { margin-top: var(--space-l); max-width: 40rem; font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); } .hero__actions { margin-top: var(--space-xl); } .hero__note { margin-top: var(--space-m); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } /* Unter 1024 px: Display L statt XL (44 bis 60 px), damit die Headline mobil in vier Zeilen passt und die Skala bis zum Desktop sauber ansteigt */ @media (max-width: 63.99em) { .hero__title { max-width: 15ch; font-size: var(--fs-display-l); line-height: var(--lh-display-l); } } /* Handy: Buttons gleich breit untereinander, die Cover als ruhige Dreierreihe früher im Bild */ @media (max-width: 39.99em) { .hero__inner { gap: var(--space-l); } .hero__actions .btn { flex: 1 1 100%; justify-content: center; } .hero .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); } .hero .shelf > :first-child { grid-row: auto; } .hero .shelf > :first-child .cover { height: auto; aspect-ratio: 4 / 5; } } @media (min-width: 64em) { .hero--split .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } .hero--split .hero__title { max-width: 14ch; font-size: var(--fs-display-l); line-height: var(--lh-display-l); } } .hero--paper { background: var(--bg-muted); } /* Weiße Sektion direkt nach dem weißen Hero (Startseite: Erfolgsrechner): kein doppelter Abstand */ .hero:not(.hero--paper) + .section:not([class*="section--"]) { padding-top: clamp(.5rem, -1rem + 4vw, 2.5rem); } /* Seitenkopf für Unterseiten: Display M (Seitentitel laut CI) */ .page-hero { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-bottom: 1px solid var(--line); } .page-hero__title { max-width: 18ch; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m); line-height: var(--lh-display-m); letter-spacing: normal; } .page-hero__lead { margin-top: var(--space-m); max-width: 44rem; font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); } .page-hero--plain { border-bottom: 0; } /* Bücherregal (Cover im Hero) Gleiche Kacheln wie im Bücher-Raster: jedes Cover auf eigener, ruhiger Fläche, in natürlicher Größe, ohne Versatz und ohne Zoom. Das erste Buch steht groß, die beiden weiteren daneben übereinander. */ .shelf { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-s); } .shelf > :first-child { grid-row: span 2; } .shelf a { display: block; height: 100%; border-radius: var(--radius-s); } .shelf .cover { border-radius: var(--radius-s); } .shelf > :first-child .cover { height: 100%; aspect-ratio: auto; } .shelf a:hover .cover__img { transform: scale(1.035); } /* 09 Section-Header, Fließtext, Callouts ------------------------------------ */ .section-head { max-width: 48rem; margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 4rem); } /* Titel als H2 in Rebond Medium. Für ein großes Sektionsstatement .display-l oder .display-m ergänzen (dann der einzige Ryker-Moment der Sektion). Sektionen tragen keine Eyebrow mehr (nur Hero und Seitenkopf). Das violette Element der Fläche ist ein kurzer Signalstrich unter der H2; auf Pastell wird --accent zu Ink. Steht doch eine Eyebrow davor, entfällt der Strich (die Eyebrow hat ihren eigenen). */ .section-head__title { max-width: 30ch; letter-spacing: -.015em; } .section-head__title:not(.visually-hidden)::after { content: ""; display: block; width: 2.5rem; height: 2px; margin-top: .75rem; border-radius: 1px; background: var(--accent); } .eyebrow + .section-head__title::after { display: none; } .section-head--center .section-head__title::after { margin-inline: auto; } .section-head__title.display-l, .section-head__title.display-m, .section-head__title.display-xl { max-width: 18ch; } .section-head__lead { margin-top: var(--space-m); max-width: 40rem; font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .section-head__title, .section-head--center .section-head__lead { margin-inline: auto; } .section-head--split { max-width: none; display: grid; gap: var(--space-m); } /* Mobil steht „Alle Bücher“ bzw. „Modelle ansehen“ nach dem Inhalt (.section-more), ab 960 px rechts neben der Überschrift (.section-head__aside) */ .section-more { display: block; } @media (max-width: 59.99em) { .section-head--split > .section-head__aside { display: none; } } @media (min-width: 60em) { .section-more { display: none; } .section-head--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; row-gap: 0; column-gap: var(--space-xl); } .section-head--split > .eyebrow, .section-head--split > .section-head__title, .section-head--split > .section-head__lead { grid-column: 1; } .section-head--split > .section-head__aside { grid-column: 2; grid-row: 1 / span 3; align-self: end; } } /* Fließtext-Spalte: Body L, Absatzabstand 1,5 x Schriftgröße (CI) */ .prose { max-width: var(--measure); font-size: var(--fs-body); line-height: var(--lh-body); } .prose > * + * { margin-top: 1.5em; } .prose > ul, .prose > ol, .prose > * + ul, .prose > * + ol { margin-top: 1em; } .prose h2 { margin-top: 2em; font-size: var(--fs-h2); line-height: var(--lh-h2); } .prose h3 { margin-top: 1.75em; font-size: var(--fs-h3); line-height: var(--lh-h3); } .prose h4 { margin-top: 1.5em; font-size: var(--fs-h4); line-height: var(--lh-h4); } .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; } .prose > :first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .45em; } .prose ul li::marker { color: var(--accent); } .prose ol li::marker { color: var(--text, var(--fg)); font-weight: 500; } .prose blockquote { padding-left: var(--space-m); border-left: 2px solid var(--accent); font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); } .prose .lead { font-size: var(--fs-lead); } /* Früher Ryker, jetzt ohne dritten Ryker-Moment: große Rebond-Zwischentitel */ .prose--display h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); } @media (max-width: 37.5em) { .prose p, .prose li { hyphens: auto; -webkit-hyphens: auto; } } /* Callouts: eine ruhige Fläche. In Pastell-Sektionen weiß. */ .callout { padding: var(--space-m) var(--space-l); border-radius: var(--radius-m); background: var(--nested-pastel, var(--bg-muted)); max-width: var(--measure); } .callout > * + * { margin-top: .6em; } .callout__title { font-weight: 500; font-size: var(--fs-body); } .callout--info { background: var(--nested-pastel, var(--tint-sky)); } .callout--note { background: var(--nested-pastel, var(--tint-peach)); } .callout--success { background: var(--nested-pastel, var(--tint-mint)); } .callout--brand { background: var(--nested-pastel, var(--tint-lavender)); } .callout--outline { background: transparent; border: 1px solid var(--rule, var(--line)); } /* Volle Breite unter einem Raster, Checkliste in Spalten */ .callout--wide { max-width: none; } .callout--wide .checklist { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .6rem 2rem; } .callout--wide > p:not(.callout__title) { max-width: var(--measure); } .section--paper .callout:not([class*="callout--"]), .section--paper .callout.callout--wide:not(.callout--outline) { background: var(--bg-card); } .small, .fineprint { font-size: var(--fs-caption); line-height: var(--lh-caption); } .fineprint { max-width: var(--measure); color: var(--text-muted); } .fineprint-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .fineprint-list li { position: relative; } /* 10 Cover, Bücher-Raster, Buchdetail --------------------------------------- */ /* Cover-Fläche im Format 4 : 5. Die Mockups haben exakt den Grund Fog Gray (#F4F4F6), daher verschmelzen Bild und Fläche. Flache Cover (anderes Seitenverhältnis, erkennt der Build) erhalten Rand und Schatten. Dunkelmodus: heller Präsentationsrahmen. --cover-tile bleibt Fog, die Cover stehen wie in einer Vitrine auf dem dunklen Grund. Im Hero-Regal und im Bücher-Raster wird die ganze Kachel leicht gedimmt (Bild und Fläche gleich, Farbtreue bleibt), damit die hellen Flächen Headline und CTA nicht überstrahlen. Die Fläche ist eine helle Insel: Platzhalter und Schatten darin nutzen feste CI-Farben. */ .cover { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-s); background: var(--cover-tile); isolation: isolate; } .cover picture { display: contents; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shelf .cover, :root:not([data-theme="light"]) .book-card .cover { filter: brightness(.86); } } :root[data-theme="dark"] .shelf .cover, :root[data-theme="dark"] .book-card .cover { filter: brightness(.86); } .cover__img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease); } .cover--flat .cover__img { width: 64%; height: auto; max-height: 84%; object-fit: contain; border-radius: 2px; box-shadow: 0 1px 2px rgba(29, 29, 29, .1), 0 22px 36px -18px rgba(29, 29, 29, .45); } /* Platzhalter, solange kein Cover vorliegt: weißes Buch auf Fog, violetter Rücken (helle Insel, in beiden Modi gleich) */ .cover--placeholder { background: var(--cover-tile); } .cover__ph { display: flex; flex-direction: column; justify-content: space-between; width: 62%; aspect-ratio: 2 / 3; padding: 10% 9% 10% 12%; border-left: 5px solid var(--color-violet); border-radius: 2px; background: var(--color-white); box-shadow: 0 22px 36px -18px rgba(29, 29, 29, .35); text-align: left; } .cover__ph-title { font-family: var(--font-text); font-weight: 500; font-size: clamp(1rem, .85rem + .6vw, 1.375rem); line-height: 1.2; color: var(--color-ink); hyphens: auto; } .cover__ph-author { font-size: var(--fs-label); line-height: 1.3; color: rgba(29, 29, 29, .7); } .cover--xl .cover__ph-title { font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem); } .cover--xl .cover__ph-author { font-size: var(--fs-caption); } /* Bücher-Raster */ .book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-s); } @media (min-width: 40em) { .book-grid { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: var(--space-2xl) var(--space-m); } } @media (min-width: 64em) { .book-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .book-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-l); } } .book-card { position: relative; display: flex; flex-direction: column; } .book-card .cover { margin-bottom: var(--space-s); } .book-card__body { display: flex; flex-direction: column; gap: .2rem; } .book-card__title { font-family: var(--font-text); font-size: var(--fs-body); font-weight: 500; line-height: 1.35; letter-spacing: 0; hyphens: auto; } .book-card__link { color: var(--text, var(--fg)); text-decoration: none; } /* ganze Karte klickbar, Fokusrahmen um die Karte */ .book-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-s); } .book-card__link:focus-visible { outline: none; } .book-card__link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 6px; } .book-card__author { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .book-card__price { margin-top: .35rem; font-size: var(--fs-caption); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; } .book-card__badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; } .book-card:hover .cover__img { transform: scale(1.035); } .book-card:hover .book-card__link, .person-card:hover .person-card__link { text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .22em; } .book-grid__more { margin-top: var(--space-xl); } /* Breadcrumb */ .breadcrumb { padding-block: var(--space-l) 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; } .breadcrumb li { display: inline-flex; align-items: center; gap: .4rem; } .breadcrumb li + li::before { content: ""; width: .4rem; height: .4rem; border-top: 1.5px solid var(--line-control); border-right: 1.5px solid var(--line-control); transform: rotate(45deg); margin-right: .3rem; } .breadcrumb a { color: var(--text-muted); text-decoration-color: var(--line); } .breadcrumb a:hover { color: var(--text, var(--fg)); text-decoration-color: var(--accent); } .breadcrumb [aria-current] { color: var(--text, var(--fg)); } /* Buchdetail */ .book-detail__top { display: grid; gap: var(--space-xl); padding-block: var(--space-l) var(--space-section); } @media (min-width: 56em) { .book-detail__top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 1rem + 4vw, 6rem); align-items: start; } .book-detail__cover { position: sticky; top: calc(var(--header-h) + var(--space-l)); } } .book-detail__cover .cover { border-radius: var(--radius-m); } /* Ryker-Moment der Buchseite: Display M */ .book-detail__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m); line-height: var(--lh-display-m); letter-spacing: normal; } .book-detail__subtitle { margin-top: var(--space-s); font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: 1.45; } .book-detail__byline { margin-top: var(--space-m); font-size: var(--fs-body); } .book-detail__byline a { font-weight: 500; } .book-detail__contrib { margin-top: .25rem; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .book-detail__status { margin-top: var(--space-m); } .book-detail__teaser { margin-top: var(--space-l); max-width: 34rem; font-size: var(--fs-body); color: var(--fg); } /* Formate mit Preis und Kaufen-Button */ .formats { margin-top: var(--space-xl); border-top: 1px solid var(--line); } .format { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-s) var(--space-m); align-items: center; padding-block: var(--space-m); border-bottom: 1px solid var(--line); } .format__name { color: var(--text-muted); } .format__price { margin-top: .25rem; font-family: var(--font-text); font-size: var(--fs-h2); font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; } .format__hint { margin-top: .2rem; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } @media (max-width: 30em) { .format { grid-template-columns: 1fr; } .format .btn { width: 100%; } } .formats__note { margin-top: var(--space-s); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .book-detail__body { display: grid; gap: var(--space-2xl); padding-block: var(--space-section); border-top: 1px solid var(--line); } @media (min-width: 60em) { .book-detail__body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-3xl); } } .book-detail__section-title { margin-bottom: var(--space-m); color: var(--text-muted); } .book-detail__themes { margin-top: var(--space-xl); } /* Details-Tabelle (dl) */ .details-table { border-top: 1px solid var(--line); } .details-table > div { display: grid; grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 3fr); gap: var(--space-s); padding-block: .8rem; border-bottom: 1px solid var(--line); font-size: var(--fs-caption); line-height: 1.5; } .details-table dt { color: var(--text-muted); } .details-table dd { font-variant-numeric: tabular-nums lining-nums; } /* Herstellerangaben (Produktsicherheit) */ .maker { margin-top: var(--space-xl); padding: var(--space-m); border-radius: var(--radius-s); background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--card-edge); font-size: var(--fs-caption); line-height: 1.55; } .maker__title { margin-bottom: .5rem; color: var(--fg-muted); } .maker address { font-style: normal; } .maker__intro { color: var(--fg-muted); margin-bottom: .75rem; } .maker__list { display: grid; gap: .5rem; } .maker__list > div { display: grid; grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 2fr); gap: var(--space-s); } .maker__list dt { color: var(--fg-muted); } .maker__safety { margin-top: .75rem; } /* Autor*innen-Block auf Buchseiten (Peach-Soft-Sektion) */ .byline-people { display: grid; gap: var(--space-l); } @media (min-width: 48em) { .byline-people--many { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .byline-person { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-m); align-items: start; padding: var(--space-m); border-radius: var(--radius-m); background: var(--bg-card); /* Karte auf Peach: trägt das violette Signal (Link-Pfeil) */ } .byline-person .portrait { border-radius: var(--radius-s); } .byline-person__name { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 500; } .byline-person__role { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .byline-person__bio { margin-top: .5rem; font-size: var(--fs-body-m); line-height: var(--lh-body-m); } .byline-person__link { margin-top: .6rem; font-size: var(--fs-body-m); } /* 11 Porträts, Autor*innen-Raster, Autor*innen-Detail ----------------------- */ /* Porträts warm-neutral getönt (CI-Bildsprache). Die Tonung ist vorberechnet (assets/img/autorinnen/warm/, src/werkzeuge/portraets-tonen.sh). Fehlt sie, setzt der Build .portrait--roh und der CSS-Filter tönt ersatzweise. Grund: Peach Soft (im Dunkeln die dunkle Peach-Tönung). Keine Farb-Overlays (laut CI nur als Kampagnen-Stil). Im Dunkeln werden die hellen, warm getönten Fotos leicht abgedunkelt (--portrait-dim), damit sie nicht blenden. */ .portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-s); background: var(--nested-pastel, var(--tint-peach)); isolation: isolate; } .portrait picture { display: contents; } .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(var(--portrait-dim)); transition: transform var(--dur-slow) var(--ease); } .portrait--roh img { filter: grayscale(1) sepia(.2) saturate(.85) contrast(.97) brightness(calc(1.02 * var(--portrait-dim))); } .portrait--placeholder { display: grid; place-items: center; background: var(--nested-pastel, var(--tint-peach)); } .portrait__initials { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h1); line-height: 1; letter-spacing: .02em; color: var(--fg); } .portrait--sm .portrait__initials { font-size: var(--fs-h4); } .person-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-s); } @media (min-width: 40em) { .person-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--space-2xl) var(--space-m); } } .person-card { position: relative; } .person-card .portrait { margin-bottom: var(--space-s); } .person-card__name { font-family: var(--font-text); font-size: var(--fs-body); font-weight: 500; line-height: 1.35; letter-spacing: 0; } .person-card__link { color: var(--text, var(--fg)); text-decoration: none; } .person-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-s); } .person-card__link:focus-visible { outline: none; } .person-card__link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 6px; } .person-card__role { margin-top: .15rem; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .person-card__books { display: inline-flex; align-items: center; gap: .5em; margin-top: .45rem; color: var(--text, var(--fg)); } .person-card__books::before { content: ""; width: 1rem; height: 2px; border-radius: 1px; background: var(--accent); } .person-card:hover .portrait img { transform: scale(1.03); } /* Autor*innen-Detail: Porträt auf Peach-Soft-Passepartout */ .person-detail__top { display: grid; gap: var(--space-xl); padding-block: var(--space-l) var(--space-section); } @media (min-width: 56em) { .person-detail__top { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2.5rem, 1rem + 4vw, 6rem); align-items: start; } .person-detail__portrait { position: sticky; top: calc(var(--header-h) + var(--space-l)); } } .person-detail__portrait.portrait { padding: clamp(.75rem, .4rem + 1.5vw, 1.5rem); border-radius: var(--radius-m); background: var(--tint-peach); } .person-detail__portrait.portrait img { border-radius: var(--radius-xs); } /* Ryker-Moment der Personenseite: Display M */ .person-detail__name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m); line-height: var(--lh-display-m); letter-spacing: normal; } .person-detail__role { margin-top: var(--space-s); font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); color: var(--text-muted); } .person-detail__bio { margin-top: var(--space-xl); } .person-detail__links { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--line); } .person-detail__credit { margin-top: var(--space-m); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } /* 12 Modellkarten, Tabelle „Was bei Autor*innen ankommt“, Add-ons, Zahlung ---- */ .model-grid { display: grid; gap: var(--space-xl) var(--space-m); margin-top: var(--space-m); } /* Weiße Karten. Am besten auf Weiß oder Fog platzieren (die Empfehlungs-Plakette ragt über den Kartenrand hinaus und ist violett). */ .model-card { position: relative; display: flex; flex-direction: column; gap: var(--space-m); padding: var(--space-l) var(--space-m) var(--space-m); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--bg-card); color: var(--fg); } @media (min-width: 30em) { .model-card { padding: var(--space-xl) var(--space-l) var(--space-l); } } .model-card--featured { border: 2px solid var(--signal); box-shadow: var(--shadow-featured); } .model-card__flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } /* Modellname: H2 in Rebond Medium (drei Karten, daher kein Ryker) */ .model-card__name { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.01em; } .model-card__hint { margin-top: .6rem; font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); } .model-card__claim { margin-top: .6rem; font-size: var(--fs-body-m); line-height: var(--lh-body-m); } .model-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; padding-block: var(--space-m); border-block: 1px solid var(--line); } .model-card__from { font-size: var(--fs-caption); color: var(--fg-muted); } .model-card__amount { font-family: var(--font-text); font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; } .model-card__tax { flex-basis: 100%; font-size: var(--fs-caption); color: var(--fg-muted); } .model-card__facts { display: grid; gap: var(--space-s); } .model-card__facts dt { color: var(--fg-muted); } .model-card__facts dd { margin-top: .2rem; font-size: var(--fs-caption); line-height: 1.5; } .model-card__label { margin-bottom: var(--space-xs); color: var(--fg-muted); } .model-card__list .checklist { gap: .55rem; font-size: var(--fs-caption); } .model-card__list .checklist li::before { width: 1.125rem; height: 1.125rem; top: .1em; } .model-card__list .checklist li { padding-left: 1.75rem; line-height: 1.5; } .model-card__addons { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); } .model-card__addons ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; } .model-card__cta { margin-top: auto; padding-top: var(--space-2xs); } .model-card__cta .btn { width: 100%; } /* Gleiche Zeilenhöhen über alle Karten: Subgrid ab Desktop. Drei Zeilen: Kopf, Kernpunkte, Button (ohne Preiszeile, Preise stehen nur im Angebot). */ @media (min-width: 64em) { .model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-m); row-gap: 0; } @supports (grid-template-rows: subgrid) { .model-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-m); } .model-card__cta { margin-top: 0; align-self: end; } } } /* Kurzform (Startseite): Kopf, Dauer, Link */ .model-grid--compact .model-card { gap: var(--space-s); } @media (min-width: 64em) { @supports (grid-template-rows: subgrid) { .model-grid--compact .model-card { grid-row: span 3; } } } /* Preishinweis unter Bücherlisten */ .book-grid__note { margin-top: var(--space-l); } .model-card__who { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); } /* Tabelle „Was bei Autor*innen ankommt“ (rechte-und-erloese.html): Grundregeln, Feinschliff unter .compare--erloes */ .compare { margin-top: var(--space-l); } .compare__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); } .compare__table th, .compare__table td { padding: .95rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; } .compare__table thead th { position: sticky; top: var(--header-h); z-index: 1; background: var(--bg-page); border-bottom: 1.5px solid var(--fg); vertical-align: bottom; } .compare__table tbody th { font-weight: 400; width: 40%; } .compare__corner { color: var(--fg-muted); } /* Tabelle „Was bei Autor*innen ankommt“ mobil: jede Zeile wird zur Karte */ @media (max-width: 47.99em) { .compare__table, .compare__table tbody, .compare__table tr, .compare__table th, .compare__table td { display: block; width: 100%; } .compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .compare__table tbody tr { padding: var(--space-s) 0; border-bottom: 1px solid var(--line); } .compare__table tbody th { width: 100%; padding: 0 0 .5rem; border: 0; font-size: var(--fs-body-m); font-weight: 500; } .compare__table td { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: center; justify-items: start; gap: var(--space-s); padding: .45rem .75rem; border: 0; border-radius: var(--radius-xs); text-align: left; } .compare__table td::before { content: attr(data-label); font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg); } } /* Add-on-Karten */ .addon-grid { display: grid; gap: var(--space-m); } @media (min-width: 48em) { .addon-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } } @media (min-width: 64em) { .addon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .addon-card { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-l); border-radius: var(--radius-m); background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--card-edge); color: var(--fg); } .section--paper .addon-card, .section--lavender .addon-card, .section--peach .addon-card, .section--sky .addon-card, .section--mint .addon-card, .section--violet .addon-card { background: var(--bg-card); } .addon-card__name { font-family: var(--font-text); font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; } .addon-card__price { font-size: var(--fs-body); font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums lining-nums; } .addon-card__price small { font-size: var(--fs-caption); font-weight: 400; color: var(--fg-muted); } /* Hinweis statt Einzelpreis (Preise stehen nur im Angebot) */ .addon-card__text { font-size: var(--fs-caption); line-height: 1.55; } .addon-card__meta { display: grid; gap: .35rem; margin-top: auto; padding-top: var(--space-s); border-top: 1px solid var(--line); font-size: var(--fs-caption); } .addon-card__meta > div { display: flex; flex-wrap: wrap; gap: .1rem .5rem; } .addon-card__meta dt { color: var(--fg-muted); } .addon-card__meta dd { font-weight: 500; } /* Zahlung */ .pay-grid { display: grid; gap: var(--space-m); } @media (min-width: 56em) { .pay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pay-card { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-l); border: 1px solid var(--line); border-top: 2px solid var(--signal); border-radius: var(--radius-m); background: var(--bg-card); color: var(--fg); } .pay-card__label { color: var(--fg-muted); } .pay-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); } .pay-card__figure { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h1); line-height: 1; letter-spacing: -.01em; color: var(--fg); font-variant-numeric: lining-nums; } .pay-card__text { font-size: var(--fs-caption); line-height: 1.55; } .milestones { display: flex; gap: 4px; margin-top: var(--space-2xs); } .milestone { flex: var(--share, 1) 1 0; min-width: 0; } .milestone__bar { display: block; height: .5rem; border-radius: var(--radius-pill); background: var(--signal); } .milestone__pct { display: block; margin-top: .6rem; font-size: var(--fs-h4); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; } .milestone__label { display: block; margin-top: .2rem; font-size: var(--fs-caption); line-height: 1.35; color: var(--fg-muted); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; } .pay-note { margin-top: var(--space-l); } /* Kennzahlen-Zeile (z. B. Preis, Dauer) */ .keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-m); padding-block: var(--space-m); border-block: 1px solid var(--rule, var(--line)); } .keyfacts dt { color: var(--text-muted); } .keyfacts dd { margin-top: .3rem; font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; } /* 13 Schrittfolge, KI und Mensch, Merkmale, Leitsatz ------------------------ */ .steps { counter-reset: step; display: grid; gap: 0; } .step { counter-increment: step; position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--space-m); padding-bottom: var(--space-xl); } @media (min-width: 48em) { .step { column-gap: var(--space-l); } } /* Nummer im Linienkreis: Kreis in --accent (Signal), Ziffer in Textfarbe */ .step::before { content: counter(step, decimal-leading-zero); grid-row: 1 / span 4; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--accent); border-radius: 50%; font-family: var(--font-text); font-size: var(--fs-caption); font-weight: 500; line-height: 1; color: var(--text, var(--fg)); font-variant-numeric: lining-nums tabular-nums; background: inherit; } /* Verbindungslinie */ .step::after { content: ""; position: absolute; left: calc(1.375rem - .5px); top: 3.25rem; bottom: .5rem; width: 1px; background: var(--rule, var(--line)); } .step:last-child { padding-bottom: 0; } .step:last-child::after { display: none; } .step > * { grid-column: 2; } .step__title { font-size: var(--fs-h3); line-height: var(--lh-h3); padding-top: .45rem; } .step__text { margin-top: .5rem; max-width: 44rem; } .step__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-s); } /* Schritte kompakt als Reihe (Startseite) */ @media (min-width: 60em) { .steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-l); } .steps--row .step { grid-template-columns: 1fr; padding-bottom: 0; padding-top: var(--space-m); border-top: 1px solid var(--rule, var(--line)); } .steps--row .step::before { grid-row: auto; margin-bottom: var(--space-s); } .steps--row .step::after { display: none; } .steps--row .step > * { grid-column: 1; } .steps--row .step__title { padding-top: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); } } /* KI und Mensch: zweispaltige Gegenüberstellung (Fog und Lavendel) */ .duo { display: grid; gap: var(--space-m); } @media (min-width: 56em) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .duo__col { padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--radius-l); } .duo__col--ki { background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--card-edge); } .section--paper .duo__col--ki { background: var(--bg-card); } .duo__col--mensch { background: var(--nested-pastel, var(--tint-lavender)); } .duo__label { display: inline-block; margin-bottom: var(--space-s); color: var(--fg-muted); } .duo__col--mensch .duo__label { color: var(--fg); } /* H3 in Rebond Medium (zwei Spalten, daher kein Ryker) */ .duo__title { margin-bottom: var(--space-m); font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); } .duo__col--ki .checklist li::before { background: var(--fg); } .duo__footer { margin-top: var(--space-l); max-width: var(--measure); } /* Merkmale / Standards: violette Linie oben als Signal */ .features { display: grid; gap: var(--space-xl) var(--space-l); } @media (min-width: 48em) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .feature { padding-top: var(--space-m); border-top: 2px solid var(--accent); } .feature__num { display: block; margin-bottom: var(--space-s); color: var(--text-muted); } .feature__title { font-size: var(--fs-h3); line-height: var(--lh-h3); } .feature__text { margin-top: .6rem; font-size: var(--fs-body); line-height: var(--lh-body); } /* Leitsatz: Ryker Display L, der einzige Ryker-Moment seiner Sektion (Sektionstitel daneben als H2 in Rebond lassen) */ .principle { max-width: 22ch; margin-inline: auto; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-l); line-height: var(--lh-display-l); letter-spacing: normal; text-align: center; text-wrap: balance; } /* Symbol über dem Leitsatz: violett auf Weiß oder Fog (im Dunkeln weiß), weiß auf Violett, nie auf Pastell */ .principle__mark { display: var(--logo-display, block); width: auto; height: 2.25rem; margin: 0 auto var(--space-l); color: var(--logo-color); } .section--violet .principle__mark, .on-violet .principle__mark { color: var(--color-white); } .principle__note { max-width: 36rem; margin: var(--space-l) auto 0; font-size: var(--fs-body); text-align: center; color: var(--text-muted); } /* 14 FAQ, CTA-Band, Rechtstexte -------------------------------------------- */ .faq { border-top: 1px solid var(--text, var(--fg)); } .faq-group + .faq-group { margin-top: var(--space-2xl); } .faq-group__title { display: flex; align-items: center; gap: .6em; margin-bottom: var(--space-m); color: var(--text, var(--fg)); } .faq-group__title::before { content: ""; width: 1.5rem; height: 2px; border-radius: 1px; background: var(--accent); } .faq__item { border-bottom: 1px solid var(--rule, var(--line)); } .faq__q { position: relative; display: block; padding: 1.35rem 3rem 1.35rem 0; font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-h4); cursor: pointer; list-style: none; transition: color var(--dur-fast) var(--ease); } .faq__q::-webkit-details-marker { display: none; } .faq__q::marker { content: ""; } .faq__q::before, .faq__q::after { content: ""; position: absolute; right: .6rem; top: 50%; width: 1rem; height: 1.5px; background: var(--text, var(--fg)); transition: transform var(--dur) var(--ease), background-color var(--dur-fast) var(--ease); } .faq__q::after { transform: rotate(90deg); } .faq__q:hover { text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .22em; } .faq__q:hover::before, .faq__q:hover::after { background: var(--accent); } .faq__item[open] > .faq__q::after { transform: rotate(0deg); } .faq__q:focus-visible { outline-offset: -3px; border-radius: var(--radius-s); } .faq__a { padding: 0 3rem 1.75rem 0; max-width: var(--measure); } .faq__item[open] > .faq__a { animation: faq-in var(--dur) var(--ease); } @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* CTA-Band. Varianten: .cta-band Lavender Mist, Buttons in Ink, kein Symbol (nie Logo auf Pastell) .cta-band--paper Fog Gray, Buttons violett, Symbol violett .cta-band--violet großer violetter Block, weiße Schrift, weißes Symbol Das Symbol (svg.cta-band__mark) steht vollständig sichtbar über dem Titel, mit Sicherheitszone (halbe Symbolhöhe). */ .cta-band { --band-pad: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); --mark-h: 2.25rem; position: relative; padding-block: var(--band-pad); background: var(--tint-lavender); } .cta-band--paper { background: var(--bg-muted); } .cta-band--violet { background: var(--color-violet); color: var(--color-white); } /* in beiden Modi gleich */ .cta-band--paper, .cta-band--violet { padding-top: calc(var(--band-pad) + var(--mark-h) * 1.5); } .cta-band__inner { position: relative; z-index: 1; display: grid; gap: var(--space-l); align-items: end; } @media (min-width: 56em) { .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); } } /* Ryker-Moment des Bandes: Display M */ .cta-band__title { max-width: 18ch; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m); line-height: var(--lh-display-m); letter-spacing: normal; } .cta-band__text { margin-top: var(--space-m); max-width: 38rem; font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); } .cta-band__mark { display: none; position: absolute; top: var(--band-pad); left: max(var(--gutter), calc((100% - var(--content-max)) / 2)); width: auto; height: var(--mark-h); aspect-ratio: 138.6 / 144.3; pointer-events: none; } .cta-band--paper .cta-band__mark { display: block; color: var(--logo-color); } .cta-band--violet .cta-band__mark { display: block; color: var(--color-white); } .cta-band--violet a:not(.btn) { color: var(--color-white); text-decoration-color: currentColor; } /* kleiner Hinweis-Streifen (z. B. auf Buchseiten) */ .cta-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); padding: var(--space-l); border-radius: var(--radius-l); background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--card-edge); } .cta-inline__text { max-width: 40rem; font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: 1.45; } /* Rechtstexte */ .legal__inner { padding-block: var(--space-2xl) var(--space-section); } .legal .prose h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-top: 2.4em; } .legal .prose h3 { font-size: var(--fs-body); line-height: var(--lh-body); margin-top: 1.8em; } .legal .prose { font-size: var(--fs-body); } .legal__meta { margin-bottom: var(--space-xl); font-size: var(--fs-caption); color: var(--fg-muted); } .legal__toc { margin-bottom: var(--space-2xl); padding: var(--space-m) var(--space-l); border-radius: var(--radius-m); background: var(--bg-muted); font-size: var(--fs-caption); } .legal__toc ol { margin-top: .5rem; padding-left: 1.2em; columns: 2 14rem; column-gap: var(--space-xl); } .legal__toc li { break-inside: avoid; padding-block: .15rem; } .legal address { font-style: normal; } .legal-table { display: grid; border-top: 1px solid var(--line); max-width: var(--measure); } .legal-table > div { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr); gap: var(--space-s); padding-block: .7rem; border-bottom: 1px solid var(--line); } .legal-table dt { color: var(--fg-muted); } @media (max-width: 30em) { .legal-table > div { grid-template-columns: 1fr; gap: .1rem; } } /* 15 Formulare -------------------------------------------------------------- */ .form { max-width: 46rem; } .form-progress { margin-bottom: var(--space-xl); } .form-progress__bar { position: relative; height: 4px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; } .form-progress__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--progress, 0) * 1%); border-radius: inherit; background: var(--signal); transition: width var(--dur) var(--ease); } .form-progress__steps { display: flex; gap: var(--space-2xs); margin-top: var(--space-s); } .form-progress__item { flex: 1 1 0; min-width: 0; font-size: var(--fs-caption); line-height: 1.3; color: var(--fg-muted); } .form-progress__btn { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .25rem 0; border: 0; background: none; color: inherit; font-size: inherit; text-align: left; } .form-progress__btn[disabled] { cursor: default; } .form-progress__num { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border: 1.5px solid var(--line); border-radius: 50%; font-size: var(--fs-label); font-weight: 500; font-variant-numeric: tabular-nums; background: var(--bg-page); } .form-progress__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .form-progress__item.is-current { color: var(--fg); font-weight: 500; } .form-progress__item.is-current .form-progress__num { border-color: var(--signal); color: var(--fg); } /* Erledigt: Haken als Maske in --signal (folgt dem Modus und dem Kontrastmodus), die Ziffer wird ausgeblendet (font-size 0, auch im erzwungenen Farbmodus). */ .form-progress__item.is-done .form-progress__num { position: relative; border-color: var(--signal); font-size: 0; } .form-progress__item.is-done .form-progress__num::after { content: ""; position: absolute; inset: 19%; background: var(--signal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat; } .form-progress__item.is-done .form-progress__btn:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--signal); } @media (max-width: 47.99em) { .form-progress__item:not(.is-current) .form-progress__label { display: none; } .form-progress__item.is-current { flex: 3 1 0; } } .form-progress__status { margin-top: var(--space-2xs); font-size: var(--fs-caption); color: var(--fg-muted); } .form-step { min-width: 0; margin: 0; padding: 0; border: 0; } .js .form-step[hidden] { display: none; } .no-js .form-step + .form-step { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--line); } /* Schritt-Titel: H2 in Rebond Medium (der Ryker-Moment steht im Seitenkopf) */ .form-step__title { float: left; width: 100%; margin-bottom: var(--space-s); padding: 0; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.01em; } .form-step__title + * { clear: both; } .form-step__intro { clear: both; max-width: 40rem; margin-bottom: var(--space-xl); font-size: var(--fs-body); color: var(--fg-muted); } .field { display: grid; gap: .45rem; margin: 0 0 var(--space-l); padding: 0; border: 0; min-width: 0; } .field--row { display: grid; gap: 0 var(--space-m); } @media (min-width: 40em) { .field--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Feldbeschriftung: Body M in Medium */ .field__label { padding: 0; font-size: var(--fs-body-m); font-weight: 500; line-height: 1.4; } .field__req { color: var(--fg); margin-left: .15em; } .field__opt { font-weight: 400; color: var(--fg-muted); font-size: var(--fs-caption); margin-left: .35em; } .field__hint { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); } .field__input, .field__select, .field__textarea { display: block; width: 100%; min-height: 3.5rem; padding: .9rem 1.1rem; border: 1.5px solid var(--line-control); /* hell 3,3 : 1, dunkel 4,96 : 1 (Grenze eines Bedienelements) */ border-radius: var(--radius-m); background: var(--bg-field); font-size: var(--fs-body-m); line-height: 1.4; color: var(--fg); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); -webkit-appearance: none; appearance: none; } .field__textarea { min-height: 9rem; resize: vertical; line-height: var(--lh-body-m); } .field__select { padding-right: 3rem; background-image: var(--icon-select); /* Pfeil in Textfarbe, je Modus */ background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.25rem; } .field__input::placeholder, .field__textarea::placeholder { color: var(--fg-muted); opacity: 1; } /* hell 6,2 : 1, dunkel 8,9 : 1 */ /* Autofill im Dunkeln: Browser-Gelb bzw. -Blau durch den Feldgrund ersetzen */ .field__input:-webkit-autofill, .field__input:-webkit-autofill:hover, .field__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--fg); caret-color: var(--fg); box-shadow: 0 0 0 100px var(--bg-field) inset; } .field__input:hover, .field__select:hover, .field__textarea:hover { border-color: var(--fg-muted); } .field__input:focus, .field__select:focus, .field__textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); } .field__input:-webkit-autofill:focus { box-shadow: 0 0 0 1px var(--signal), 0 0 0 100px var(--bg-field) inset; } .field__input[aria-invalid="true"], .field__select[aria-invalid="true"], .field__textarea[aria-invalid="true"] { border-color: var(--status-error); } /* Fehlermeldung: Text in Textfarbe, Warnsymbol in der Funktionsfarbe (hell #B3261E mit weißem Zeichen, dunkel #FF8A80 mit dunklem Zeichen) */ .field__error { display: flex; gap: .45rem; align-items: flex-start; font-size: var(--fs-caption); font-weight: 500; line-height: 1.45; color: var(--fg); } .field__error:empty { display: none; } .field__error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .12em; border-radius: 50%; background: var(--status-error); color: var(--on-status-error); font-size: .75rem; font-weight: 700; line-height: 1; } .field__counter { justify-self: end; font-size: var(--fs-label); color: var(--fg-muted); } /* Auswahl: Radios und Checkboxen als Karten */ .choices { display: grid; gap: var(--space-2xs); } .choices--cards { gap: var(--space-s); } @media (min-width: 40em) { .choices--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choices--cards.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .choice { position: relative; display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-m); background: var(--bg-card); color: var(--fg); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .choice:hover { border-color: var(--line-control); } .choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--signal); } .choice:has(input:checked) { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); background: var(--bg-muted); } .choice:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 2px; } .choice input:focus-visible { outline: none; } .choice__body { display: grid; gap: .15rem; } .choice__title { font-weight: 500; line-height: 1.35; } .choice__text { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-muted); } .choice__meta { font-size: var(--fs-caption); font-weight: 500; color: var(--fg); } .choices--cards .choice { padding: 1.1rem 1.2rem; } .field--group[aria-invalid="true"] .choice, .choices[data-invalid] .choice { border-color: var(--status-error); } /* Einzelne Checkbox (z. B. Zustimmung) */ .check { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--fs-caption); line-height: 1.5; cursor: pointer; } .check input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--signal); } /* Upload-Zone */ .dropzone { position: relative; display: grid; gap: var(--space-s); } .dropzone__area { position: relative; display: grid; place-items: center; gap: .5rem; padding: var(--space-xl) var(--space-m); border: 1.5px dashed var(--line-control); border-radius: var(--radius-l); background: var(--bg-muted); text-align: center; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .section--paper .dropzone__area { background: var(--bg-card); } .dropzone__area:hover { border-color: var(--signal); } .dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .dropzone__input:focus-visible + .dropzone__area { outline: 3px solid var(--signal); outline-offset: 3px; } .dropzone.is-dragover .dropzone__area { border-style: solid; border-color: var(--signal); background: var(--bg-card); } .dropzone__icon { width: 2.25rem; height: 2.25rem; color: var(--signal); } .dropzone__title { font-weight: 500; font-size: var(--fs-body); } .dropzone__browse { color: var(--fg); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: .2em; } .dropzone__hint { font-size: var(--fs-caption); color: var(--fg-muted); } .filelist { display: grid; gap: var(--space-2xs); } .filelist__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-s); align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg-card); font-size: var(--fs-caption); } .filelist__item::before { content: ""; width: 1.25rem; height: 1.25rem; background: var(--signal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat; } .filelist__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .filelist__size { color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .filelist__remove { padding: .3rem .6rem; border: 0; border-radius: var(--radius-pill); background: transparent; font-size: var(--fs-caption); color: var(--fg); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: .2em; } .filelist__remove:hover { background: var(--bg-muted); } .filelist__total { font-size: var(--fs-caption); color: var(--fg-muted); } /* Fortschritt beim Hochladen (anfrage.js, im Statusbereich über dem Formular) */ .upload-progress__list { margin-top: .25rem; } .upload-progress__bar { width: clamp(4.5rem, 16vw, 9rem); height: .5rem; accent-color: var(--signal, #6729FF); } .upload-progress__state { min-width: 6.5em; text-align: right; } @media (max-width: 30em) { .upload-progress__item { grid-template-columns: auto minmax(0, 1fr) auto; } .upload-progress__bar { grid-column: 1 / -1; grid-row: 2; width: 100%; } .upload-progress__state { min-width: 0; } } /* Navigation im Formular */ .form-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid var(--line); } .form-nav__next { margin-left: auto; } .no-js .form-nav [data-prev], .no-js .form-nav [data-next] { display: none; } /* Ohne JavaScript nehmen api/anfrage.php und api/kontakt.php nichts an (Mindestzeit, X-Requested-With). Die Formulare bleiben deshalb verborgen, der noscript-Hinweis zeigt den Weg per E-Mail (42 N13). */ .no-js form[data-anfrage], .no-js form[data-kontakt] { display: none; } /* Zusammenfassung */ .summary { display: grid; gap: var(--space-l); margin-bottom: var(--space-xl); } .summary__group { padding: var(--space-m) var(--space-l); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-card); } .summary__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); margin-bottom: var(--space-s); } .summary__title { font-size: var(--fs-body); font-weight: 500; } .summary__list > div { display: grid; grid-template-columns: minmax(8rem, 2fr) minmax(0, 3fr); gap: var(--space-s); padding-block: .55rem; border-top: 1px solid var(--line-soft); font-size: var(--fs-caption); line-height: 1.5; } .summary__list dt { color: var(--fg-muted); } .summary__list dd { white-space: pre-line; } .summary__empty { color: var(--fg-muted); } @media (max-width: 30em) { .summary__list > div { grid-template-columns: 1fr; gap: .1rem; } } /* Statusmeldungen: je eine Pastellfläche (im Dunkeln Tönung), Text in Textfarbe */ .notice { display: grid; gap: .5rem; padding: var(--space-m) var(--space-l); border-radius: var(--radius-m); background: var(--nested-pastel, var(--tint-sky)); font-size: var(--fs-caption); line-height: 1.55; } .notice:empty { display: none; } .notice__title { font-size: var(--fs-body); font-weight: 500; } .notice--success { background: var(--nested-pastel, var(--tint-mint)); } .notice--warning { background: var(--nested-pastel, var(--tint-peach)); } .notice--error { background: var(--nested-pastel, var(--tint-peach)); box-shadow: inset 3px 0 0 var(--status-error); } .notice .actions { margin-top: .4rem; } .form-status { margin-bottom: var(--space-l); } .form-status:empty { display: none; margin: 0; } .form-success { padding: var(--space-xl); border-radius: var(--radius-l); background: var(--tint-mint); } /* Ryker-Moment nach dem Absenden (die Schritte sind dann ausgeblendet) */ .form-success__title { margin-bottom: var(--space-s); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-m); line-height: var(--lh-display-m); letter-spacing: normal; } /* Honigtopf gegen Spam: unsichtbar für Menschen */ .hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } /* 16 Footer ----------------------------------------------------------------- */ .site-footer { margin-top: auto; padding-block: var(--space-2xl) var(--space-l); background: var(--bg-muted); font-size: var(--fs-caption); line-height: var(--lh-caption); } .site-footer__inner { display: grid; gap: var(--space-xl); } @media (min-width: 56em) { .site-footer__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3xl); } } /* Logo violett auf Fog (offizielle Variante), im Dunkeln weiß, 32 px, Sicherheitszone halbe Höhe */ .site-footer__brand .site-logo { --logo-h: 2rem; padding-block: 0 calc(var(--logo-h) / 2); } .site-footer__claim { max-width: 24rem; font-size: var(--fs-body-m); line-height: var(--lh-body-m); } .site-footer__contact { margin-top: var(--space-m); } .site-footer__contact a { font-weight: 500; } .site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); } @media (min-width: 40em) { .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .site-footer__heading { margin-bottom: var(--space-s); color: var(--fg-muted); } .site-footer__nav ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; } .site-footer__nav a { text-decoration: none; } .site-footer__nav a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--signal); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s) var(--space-l); margin-top: var(--space-2xl); padding-top: var(--space-m); border-top: 1px solid var(--line); color: var(--fg-muted); } .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); } .site-footer__legal a { color: var(--fg-muted); text-decoration: none; } .site-footer__legal a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--signal); } /* 17 Bewegung, Hilfsklassen, Druck ----------------------------------------- */ /* Sanftes Einblenden beim Scrollen. Nur aktiv, wenn main.js die Klasse can-reveal setzt (also mit JavaScript und ohne reduzierte Bewegung). */ .can-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: var(--reveal-delay, 0ms); } .can-reveal [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Moduswechsel (Hell, Dunkel) ohne Übergänge: main.js setzt die Klasse für zwei Frames, damit alle Flächen gleichzeitig umschalten und nichts flackert. */ .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .book-card:hover .cover__img, .person-card:hover .portrait img { transform: none; } } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .mt-0 { margin-top: 0 !important; } .mt-s { margin-top: var(--space-s) !important; } .mt-m { margin-top: var(--space-m) !important; } .mt-l { margin-top: var(--space-l) !important; } .mt-xl { margin-top: var(--space-xl) !important; } .mt-2xl { margin-top: var(--space-2xl) !important; } .mb-0 { margin-bottom: 0 !important; } .maxw-measure { max-width: var(--measure); } /* Styleguide-Hilfen (nur _styleguide.html), ebenfalls nur im CI-Schrift-Duo */ .sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-s); } .sg-swatch { border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; font-size: var(--fs-caption); background: var(--color-white); color: var(--color-ink); } .sg-swatch__color { height: 5rem; border-bottom: 1px solid var(--ink-12); } .sg-swatch__meta { padding: .6rem .8rem; line-height: 1.4; } .sg-swatch__meta code { font-family: var(--font-text); font-size: var(--fs-caption); color: rgba(29, 29, 29, .7); } .sg-block + .sg-block { margin-top: var(--space-3xl); } .sg-label { display: block; margin-bottom: var(--space-m); padding-bottom: .5rem; border-bottom: 1px dashed var(--line); color: var(--fg-muted); text-transform: none; letter-spacing: .01em; } .sg-scale { display: grid; gap: var(--space-l); } .sg-scale > div { display: grid; gap: .35rem; padding-bottom: var(--space-m); border-bottom: 1px solid var(--line); } .sg-scale__meta { font-size: var(--fs-caption); color: var(--fg-muted); } .sg-logos { display: grid; gap: var(--space-m); } @media (min-width: 48em) { .sg-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sg-logo { display: grid; place-items: center; min-height: 10rem; padding: var(--space-l); border-radius: var(--radius-m); border: 1px solid var(--line); } .sg-logo img { height: 2.25rem; width: auto; } .sg-logo--symbol img { height: 3rem; } .sg-icons { display: flex; flex-wrap: wrap; gap: var(--space-m); color: var(--fg); } .sg-icons figure { display: grid; justify-items: center; gap: .4rem; font-size: var(--fs-label); color: var(--fg-muted); } /* Druck immer hell, auch im Dunkelmodus (Rollen-Tokens zurück auf Hell) */ @media print { :root, :root:not([data-theme="light"]), :root[data-theme] { /* HELL-TOKENS:START */ color-scheme: light; --bg-page: var(--color-white); /* Seitengrund, Header, Tabellenkopf */ --bg-muted: var(--color-fog); /* Fog-Sektionen, Karten auf Weiß, Footer */ --bg-card: var(--color-white); /* Karten auf Fog und Pastell */ --bg-field: var(--color-white); /* Formularfelder */ --fg: var(--color-ink); /* Text, Überschriften, Ryker */ --fg-muted: rgba(29, 29, 29, .7); /* Nebentext */ --line: #D9D9D9; /* Haarlinien (dekorativ) */ --line-soft: rgba(29, 29, 29, .12); /* feine Trennlinien */ --line-control: rgba(29, 29, 29, .5); /* Rahmen von Bedienelementen (3 : 1) */ --signal: var(--color-violet); /* Linien, Icons, Link-Unterstreichung, Fokus, Display-Akzent */ --signal-fill: var(--color-violet); /* Fläche primärer Buttons, Plakette, Tabellenkopf */ --on-signal-fill: var(--color-white); /* Schrift auf --signal-fill */ --signal-hover-bg: var(--color-lilac); /* Hover primärer Buttons */ --signal-hover-fg: var(--color-ink); --tint-lavender: var(--color-lavender); /* Pastell-Sektionen */ --tint-peach: var(--color-peach); --tint-sky: var(--color-sky); --tint-mint: var(--color-mint); --status-error: #B3261E; /* nur Rahmen und Symbol, nie Fließtext */ --on-status-error: var(--color-white); --selection-bg: var(--color-lavender); --selection-fg: var(--color-ink); --cover-tile: var(--color-fog); /* Grund der Cover (Mockups haben Fog eingebacken) */ --logo-color: var(--color-violet); /* Wortmarke und Symbol (Inline-SVG) */ --logo-filter: none; /* Logo als : hell unverändert */ --portrait-dim: 1; --fw-lead: 300; /* Lead in Rebond Light */ --card-edge: transparent; /* Kante ruhiger Karten, im Dunkeln sichtbar */ --shadow-s: 0 1px 2px rgba(29, 29, 29, .06), 0 2px 8px -2px rgba(29, 29, 29, .08); --shadow-m: 0 2px 4px rgba(29, 29, 29, .04), 0 18px 40px -20px rgba(29, 29, 29, .28); --shadow-featured: 0 2px 4px rgba(29, 29, 29, .04), 0 24px 48px -28px rgba(29, 29, 29, .35); --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* HELL-TOKENS:ENDE */ } .site-header, .site-footer__nav, .cta-band, .skip-link, .menu-toggle, .form-nav { display: none !important; } body { font-size: 11pt; } .section { padding-block: 1.5rem; } .can-reveal [data-reveal] { opacity: 1 !important; transform: none !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } .book-card__link::after, .person-card__link::after { content: none; } } /* 18 Typo-Klassen ------------------------------------------------------------ Stehen am Ende, damit sie Komponenten-Stile überschreiben (z. B.

). Ryker ausschließlich hier und in den Display-Komponenten, nie unter 32 px, maximal ein Ryker-Moment pro Sektion. Ryker nur in Ink oder Violett (auf Violett in Weiß). */ .display-xl, .display-l, .display-m { font-family: var(--font-display); font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; } .display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); } /* Hero-Headline Startseite */ .display-l { font-size: var(--fs-display-l); line-height: var(--lh-display-l); } /* Sektions-Statement, Claim */ .display-m { font-size: var(--fs-display-m); line-height: var(--lh-display-m); } /* Seitentitel */ /* Zitat-Moment in Ryker Text Light (ebenfalls ab 32 px, zählt als Ryker-Moment) */ .display-quote { font-family: var(--font-display-text); font-weight: 300; font-style: normal; font-size: var(--fs-display-m); line-height: 1.2; letter-spacing: normal; } .h1, .h2, .h3, .h4, .h2-text { font-family: var(--font-text); font-weight: 500; font-style: normal; text-transform: none; } .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.01em; } .h2, .h2-text { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.01em; } .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -.005em; } .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: 0; } .lead { max-width: 44rem; font-family: var(--font-text); font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); } .body-l { font-size: var(--fs-body); line-height: var(--lh-body); } .body-m { font-size: var(--fs-body-m); line-height: var(--lh-body-m); } .caption { font-size: var(--fs-caption); line-height: var(--lh-caption); } /* Farbe: Text nur in Textfarbe (Ink bzw. #F4F4F6 im Dunkeln) oder Weiß. .text-accent nur für Display-Akzente (Ryker). */ .text-ink { color: var(--fg); } .text-white { color: var(--color-white); } .text-accent, .text-purple { color: var(--accent); } /* 19 Seitenbausteine der Integration ---------------------------------------- Ergänzungen für die Inhaltsseiten (Start, Modelle, Ablauf, Rechte und Erlöse, FAQ, Fragebogen). Gleiche Regeln: Violett nur als Signal, in Pastell-Sektionen übernimmt --accent (Ink), Karten in Pastell-Sektionen sind weiß. */ /* Karten nebeneinander: Verlagswege (modelle.html), Konzeptfreigabe (ablauf.html) */ .path-grid { display: grid; gap: var(--space-m); } @media (min-width: 56em) { .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .path-card { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-l); border-radius: var(--radius-m); background: var(--nested-pastel, var(--bg-muted)); box-shadow: inset 0 0 0 1px var(--card-edge); color: var(--fg); } .section--paper .path-card { background: var(--bg-card); } .path-card__label { color: var(--text-muted); } .path-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); } .path-card__text { font-size: var(--fs-body-m); line-height: var(--lh-body-m); } .path-card__text > * + * { margin-top: .8em; } /* Hervorgehobener Schritt (Konzeptfreigabe): ruhige Fläche mit violetter Kante */ .step--highlight { --hl-pad: var(--space-s); padding: var(--space-m) var(--hl-pad); margin: 0 calc(-1 * var(--hl-pad)) var(--space-l); border-radius: var(--radius-m); background: var(--bg-muted); box-shadow: inset 3px 0 0 var(--signal); } .section--paper .step--highlight { background: var(--bg-card); } .step--highlight::before { border-color: var(--signal-fill); background: var(--signal-fill); color: var(--on-signal-fill); } @media (min-width: 48em) { .step--highlight { --hl-pad: var(--space-m); } } .step--highlight::after { left: calc(var(--hl-pad) + 1.375rem - .5px); top: calc(var(--space-m) + 3.25rem); bottom: calc(-1 * var(--space-l) + .5rem); } .step--highlight:last-child { margin-bottom: 0; } @media (min-width: 60em) { /* Inhalte oben bündig, auch wenn Nachbarschritte längere Texte haben */ .steps--row .step { align-content: start; } .steps--row .step--highlight { margin: 0 calc(-1 * var(--space-s)); padding: var(--space-m) var(--space-s); } /* Sechs Schritte in zwei Reihen zu je drei (Startseite) */ .steps--row.steps--grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-2xl); } } /* Links untereinander (Ablauf, 404) */ .link-list--stack { flex-direction: column; align-items: flex-start; gap: var(--space-s); } /* Leitsatz-Block unter der KI-und-Mensch-Gegenüberstellung */ .principle-block { margin-top: clamp(3rem, 2rem + 4vw, 6rem); } /* Sprungmarken zu den FAQ-Kategorien */ .jump-nav { margin-bottom: var(--space-2xl); } .jump-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); } .jump-list a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: 500; line-height: 1.3; color: var(--fg); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .jump-list a:hover { border-color: var(--signal); background: var(--bg-muted); color: var(--fg); } /* Tabelle „Was bei Autor*innen ankommt“ (rechte-und-erloese.html): Textzellen links, mobil als Karte je Zeile (Grundregeln in Abschnitt 12) */ .compare--erloes .compare__table th, .compare--erloes .compare__table td { text-align: left; vertical-align: top; } .compare--erloes .compare__table thead th { font-weight: 500; } .compare--erloes .compare__table thead .compare__corner { font-weight: 500; } .compare--erloes .compare__table tbody th { font-weight: 500; } .compare--erloes .compare__table td { font-variant-numeric: tabular-nums lining-nums; } @media (min-width: 48em) { .compare--erloes .compare__table tbody th { width: 28%; } .compare--erloes .compare__table td { width: 24%; } .compare--erloes .compare__table tr.is-own > * { background: var(--bg-muted); } } @media (max-width: 47.99em) { .compare--erloes .compare__table td { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; } .compare--erloes .compare__table tbody th { hyphens: auto; } .compare--erloes .compare__table tr.is-own { margin-top: var(--space-2xs); padding-inline: var(--space-s); border-radius: var(--radius-s); background: var(--bg-muted); } } /* Fragebogen: Vorbereitung neben dem Formular, Zusammenfassung im letzten Schritt */ .anfrage-info__box { padding: var(--space-l); border-radius: var(--radius-l); } .form-summary { margin: var(--space-xl) 0 var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--line); } .form-summary .form-step__intro { margin: var(--space-2xs) 0 var(--space-m); } .form-success > p + p { margin-top: var(--space-s); } /* Sehr schmale Displays (320 px): Menü-Schalter ohne Textzeile, damit Logo mit Sicherheitszone und Schalter nebeneinander passen. Der Schalter behält sein aria-label. */ @media (max-width: 22.5em) { .site-header__inner { gap: var(--space-s); } .menu-toggle__label { display: none; } /* Darstellung im Menü: nur die Wörter, damit „Automatisch“ nicht abgeschnitten wird */ .theme-switch__icon { display: none; } } /* Status-Badge in schmalen Buchkarten (zwei Spalten bei 320 px) darf umbrechen */ .book-card__badge { max-width: 100%; white-space: normal; } /* CI: auf jeder Fläche mindestens ein violettes Element, Violett aber nie direkt auf Pastell. In Pastell-Sektionen liegt die Eyebrow deshalb als weiße Pille auf der Fläche und trägt die violette Linie (im Dunkeln Karte mit Lilac-Linie). */ .section--lavender .eyebrow, .section--peach .eyebrow, .section--sky .eyebrow, .section--mint .eyebrow { width: fit-content; justify-self: start; align-self: start; padding: .4rem .85rem; border-radius: var(--radius-pill); background: var(--bg-card); color: var(--fg); } .section--lavender .eyebrow::before, .section--peach .eyebrow::before, .section--sky .eyebrow::before, .section--mint .eyebrow::before { background: var(--signal); } /* CI: genau eine Pastellfarbe pro Sektion. Im Fragebogen erscheinen Hinweise (Entwurf, Upload, Fehler, Versand) je nach Lage gleichzeitig. Alle nutzen deshalb Peach; Fehler bleiben über die rote Innenkante erkennbar. */ #fragebogen .notice, #fragebogen .notice--info, #fragebogen .notice--success, #fragebogen .notice--warning, #fragebogen .notice--error { background: var(--tint-peach); } /* Kleine Einzel-Checkbox (Option im Fragebogen-Kasten) */ .check--small { gap: .6rem; } .check--small input { width: 1.1rem; height: 1.1rem; } .check--small + .fineprint { margin: .35rem 0 0 1.7rem; } /* E-Mail-Weg im Fragebogen: Angaben als Text zum Markieren und Kopieren */ .mail-fallback { margin-top: .25rem; } .mail-fallback > summary { cursor: pointer; width: fit-content; } .mail-fallback .field__textarea { margin-top: .6rem; min-height: 8rem; font-size: var(--fs-caption); } /* 20 Barrierefreiheit: Textabstände, erzwungene Farben ----------------------- Ergänzungen aus dem Audit (WCAG 2.2 AA, EN 301 549). */ /* Lange deutsche Wörter (z. B. „Sprachwissenschaftler*innen“) in schmalen Spalten: Rasterelemente dürfen schrumpfen, Wörter werden getrennt statt die Seite zu verbreitern (1.4.10 und 1.4.12 bei 320 px mit erhöhten Textabständen). */ .grid > *, .features > *, .path-grid > *, .addon-grid > *, .pay-grid > *, .model-grid > *, .duo > *, .split > *, .steps > *, .book-grid > *, .person-grid > * { min-width: 0; } .feature__title, .feature__text, .path-card__title, .path-card__text, .step__title, .step__text, .addon-card__name, .model-card__name, .model-card__claim, .duo__title, .pay-card__title, .compare__table th, .compare__table td, .byline-person__name, .person-card__name, .faq__q { overflow-wrap: anywhere; } /* Kurze Texte: keine Trennung nach nur zwei Buchstaben („Ge-schichte“, „Be-zahlung“) */ .feature__text, .hero__lead, .section-head__lead, .step__text, .path-card__text { hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; } @media (max-width: 40em) { .feature__title, .feature__text, .path-card__title, .path-card__text, .step__title, .step__text, .addon-card__name, .duo__title, .pay-card__title, .compare__table th, .compare__table td, .faq__q { hyphens: auto; -webkit-hyphens: auto; } } /* Erzwungene Farben (Windows-Kontrastmodus): Icons aus Masken und Linien aus Hintergrundfarben würden sonst verschwinden. Sie werden in der Systemfarbe des Textes gezeichnet. */ @media (forced-colors: active) { .checklist li::before, .faq__q::before, .faq__q::after, .faq-group__title::before, .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after, .filelist__item::before, .link-arrow::after, .eyebrow::before, .section-head__title::after, .person-card__books::before, .milestone__bar, .form-progress__bar::after, .form-progress__item.is-done .form-progress__num::after, .site-nav__link::after { forced-color-adjust: none; background: CanvasText; } .site-header.is-open .menu-toggle__bars { background: transparent; } /* Menü-Schalter nie ohne sichtbaren Text (bei 320 px ist das Wort sonst ausgeblendet) */ .menu-toggle__label { display: inline; } .field__error::before { forced-color-adjust: none; background: CanvasText; color: Canvas; } .form-progress__bar { outline: 1px solid CanvasText; } /* Auswahlfeld mit nativem Pfeil statt Bildpfeil */ .field__select { -webkit-appearance: auto; appearance: auto; background-image: none; } /* Darstellung: gewählte Option in Systemfarbe markieren */ .theme-switch__option, .theme-switch__option:hover { forced-color-adjust: none; color: CanvasText; } .theme-switch__options { border-color: CanvasText; } :root:not([data-theme]) .theme-switch__input[value="auto"], :root[data-theme="light"] .theme-switch__input[value="light"], :root[data-theme="dark"] .theme-switch__input[value="dark"] { background: Highlight; } :root:not([data-theme]) .theme-switch__input[value="auto"] ~ *, :root[data-theme="light"] .theme-switch__input[value="light"] ~ *, :root[data-theme="dark"] .theme-switch__input[value="dark"] ~ * { color: HighlightText; } .theme-switch__input:focus-visible { outline-color: CanvasText; } /* Cover und Logos behalten ihre Farben */ .cover__img, .site-logo__img { forced-color-adjust: none; } } /* Styleguide: Token- und Kontrasttabellen (nur _styleguide.html) */ .sg-table-wrap { max-width: 100%; overflow-x: auto; } .sg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); line-height: 1.45; } .sg-table th, .sg-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .sg-table thead th { border-bottom: 1.5px solid var(--fg); font-weight: 500; } .sg-table tbody th { font-weight: 500; } .sg-table code { font-family: var(--font-text); font-size: var(--fs-caption); } .sg-dot { display: inline-block; width: .9rem; height: .9rem; margin-right: .4rem; vertical-align: -.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-control); } /* 21 Sprachumschalter (DE, EN) --------------------------------------------- Nur bei mehr als einer Sprache (site.json "sprachen"), erzeugt von build.py. Ein Link auf dieselbe Seite in der anderen Sprache, mit lang und hreflang. Sichtbar das Kürzel („EN“), der Name der Sprache („English“) steht im Header für Screenreader dabei und ist im Menü sichtbar (Label in Name, WCAG 2.5.3). Keine Flaggen, keine Speicherung: die Sprache steckt in der Adresse. Zielgröße 40 x 40 px im Header, 44 px hoch im Menü. */ .lang-switch { display: flex; flex: none; } .lang-switch__link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.5rem; min-height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--line-control); border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: 500; line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg); text-decoration: none; } .lang-switch__link:hover { border-color: var(--fg); color: var(--fg); text-decoration: none; } .lang-switch__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .lang-switch__name { font-weight: 400; letter-spacing: 0; text-transform: none; } /* Header ab 75em: nur das Kürzel sichtbar, der Name bleibt für Screenreader. Enger an die Auswahl „Darstellung“ gerückt (beides Einstellungen), damit Navigation, Button, Sprache und Darstellung ab 1200 px in eine Zeile passen. */ @media (min-width: 75em) { .lang-switch { margin-inline: -1rem -1.25rem; } .lang-switch__link { padding: 0; } .lang-switch__name { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } } /* Im aufklappenden Menü: Kürzel und Name, volle Zielgröße */ @media (max-width: 74.99em) { .js .lang-switch__link { min-height: 2.75rem; padding-inline: 1rem; } } @media (forced-colors: active) { .lang-switch__link { border-color: CanvasText; } .lang-switch__link:focus-visible { outline-color: CanvasText; } } /* 22 Erfolgsrechner ----------------------------------------------------------- {{komponente:rechner|kompakt,sky}} (Startseite, direkt nach dem Hero) und {{komponente:rechner|ausfuehrlich,sky}} (Rechte und Erlöse, Anker #erfolgsrechner). Markup aus build.py (comp_rechner), Logik in assets/js/rechner.js, Daten in src/data/rechner.json und rechner.texte.json. Aufbau .rechner (Container) > .rechner__panel (die eine Pastellfläche, Standard Lavender, auf beiden Seiten Sky für Information; in einer Pastell-Sektion durchsichtig) > .rechner__karte (weiße Karten im Standardkontext, nur hier steht Violett). Karten: __basis (Regler zum Buch), __ergebnis (Wege mit Balken und großen Ziffern), __druck (Deine Druckauflage, nur kompakt, links unter „Dein Buch“; ausführlich als __druck-block in der Ergebniskarte), __annahmen (weitere Regler, nur ausführlich), dazu __fuss. Darunter .rechner-aufteilung (gestapelter Balken und Tabelle je Weg) und .rechner-quellen (aufklappbar). Rechnung Vergleichswert mit savaara ist der 70-%-Anteil am Gewinn (Balken, große Zahl). Der Rückfluss der Druckkosten steht klein daneben, das Ergebnis nach Abzug der Druckauflage in Ink darunter (auch negativ). CI Violett nie auf Pastell: Regler, savaara-Balken und Rahmen nur auf den Karten. Die großen Ziffern (Ryker) sind zusammen der eine Ryker-Moment der Sektion; der Build zählt .rechner__wege wie eine Display-Überschrift. Übrige Wege ruhig grau. Zustände .no-js: Regler aus, Satz mit den Standardwerten an (Ergebnis vom Build). .is-sichtbar (rechner.js, einmal beim Hineinscrollen): Balken wachsen, Zahlen zählen hoch; .rechner-aufteilung.is-sichtbar deckt die Stapelbalken auf. .is-neu (kurz nach einer Änderung): die Summe pulsiert einmal. Bei prefers-reduced-motion keine Bewegung (Abschnitt 17, rechner.js). Größen Regler 44 px hoch, Griff 28 px, Länderwahl 44 px. Ab 320 px ohne Querscrollen: Raster über Container-Abfragen (rechner, ergebnis), nicht über die Fensterbreite. Mobil (kompakt) bleibt „Dein Buch“ beim Scrollen oben stehen, die vier Wege stehen als flache Zeilen darunter und passen zusammen in 812 px. */ .rechner { container: rechner / inline-size; } .rechner__panel { /* Pastell-Kontext (wie Abschnitt 03): Text und Signal in Textfarbe */ --text: var(--fg); --text-muted: var(--fg-muted); --accent: var(--fg); --accent-fill: var(--fg); --on-accent: var(--bg-page); --rule: var(--line-soft); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "basis" "ergebnis" "druck" "annahmen" "fuss"; gap: var(--space-s); padding: .75rem; border-radius: var(--radius-l); background: var(--tint-lavender); color: var(--fg); } /* Andere Pastellfläche über das Argument der Komponente, z. B. {{komponente:rechner|kompakt,sky}} */ .rechner--peach .rechner__panel { background: var(--tint-peach); } .rechner--sky .rechner__panel { background: var(--tint-sky); } .rechner--mint .rechner__panel { background: var(--tint-mint); } /* Schon in einer Pastell-Sektion: keine zweite Fläche, die Karten stehen direkt darauf */ :is(.section--lavender, .section--peach, .section--sky, .section--mint, .surface--lavender, .surface--peach, .surface--sky, .surface--mint) .rechner__panel { padding: 0; background: transparent; } .rechner__karte, .rechner-aufteilung__karte { /* Standardkontext: Violett (hell) bzw. Lilac (dunkel) als Signal */ --text: var(--fg); --text-muted: var(--fg-muted); --accent: var(--signal); --accent-fill: var(--signal-fill); --on-accent: var(--on-signal-fill); --accent-hover-bg: var(--signal-hover-bg); --accent-hover-fg: var(--signal-hover-fg); --rule: var(--line); --nested-pastel: initial; min-width: 0; border-radius: var(--radius-m); background: var(--bg-card); color: var(--fg); } .rechner__karte { padding: clamp(1.125rem, .8rem + 1.2vw, 1.75rem); box-shadow: var(--shadow-s), inset 0 0 0 1px var(--card-edge); } .rechner__basis { grid-area: basis; } .rechner__ergebnis { grid-area: ergebnis; container: ergebnis / inline-size; } .rechner__druck { grid-area: druck; } .rechner__annahmen { grid-area: annahmen; } .rechner__fuss { grid-area: fuss; } @container rechner (min-width: 52rem) { .rechner__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; grid-template-areas: "basis ergebnis" "annahmen ergebnis" "fuss ergebnis"; align-items: start; gap: var(--space-m); padding: var(--space-m); } /* Kompakt: links „Dein Buch“ und „Deine Druckauflage“, rechts die vier Wege */ .rechner--kompakt .rechner__panel { grid-template-areas: "basis ergebnis" "druck ergebnis" "fuss ergebnis"; } .rechner__ergebnis { align-self: stretch; } /* Kompakt: die vier Wege verteilen sich über die Höhe der linken Spalte */ .rechner--kompakt .rechner__ergebnis { display: flex; flex-direction: column; } .rechner--kompakt .rechner__wege { flex: 1 1 auto; grid-template-rows: repeat(3, minmax(auto, 1fr)) auto; } .rechner--kompakt .rechner__weg:not(.rechner__weg--savaara) { align-content: center; } } /* Ausführlich auf breiten, hohen Bildschirmen: Ergebnis bleibt stehen, während die Annahmen links verschoben werden */ @media (min-height: 50rem) { @container rechner (min-width: 52rem) { .rechner--ausfuehrlich .rechner__ergebnis { position: sticky; top: calc(var(--header-h) + var(--space-m)); align-self: start; } } } /* Mobil, kompakt: „Dein Buch“ bleibt beim Scrollen unter dem Header stehen, damit beim Ziehen eines Reglers alle vier Wege darunter sichtbar sind. Die Karte ist dafür etwas dichter. */ @media (max-width: 47.99em) and (min-height: 40rem) { .rechner--kompakt.is-bereit .rechner__basis { position: sticky; top: calc(var(--header-h) + .5rem); z-index: 2; box-shadow: var(--shadow-m), inset 0 0 0 1px var(--card-edge); } .rechner--kompakt .rechner__basis .rechner__karten-titel { margin-bottom: .75rem; } .rechner--kompakt .rechner__basis .rechner__regler + .rechner__regler { margin-top: 1rem; } .rechner--kompakt .rechner__basis .rechner__skala { display: none; } } /* Kartentitel: Label in Ink mit Signal-Strich (wie .eyebrow) */ .rechner__karten-titel { display: flex; align-items: center; gap: .6em; margin-bottom: var(--space-m); font-size: var(--fs-label); font-weight: 500; line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text); } .rechner__karten-titel::before { content: ""; flex: none; width: 1.5rem; height: 2px; border-radius: 1px; background: var(--accent); } /* Regler */ .rechner__regler + .rechner__regler, .rechner__land + .rechner__regler { margin-top: var(--space-l); } .rechner__regler-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .125rem .75rem; } .rechner__label { font-size: var(--fs-body-m); font-weight: 500; line-height: 1.4; } .rechner__wert { font-size: var(--fs-h4); font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; } .rechner__hinweis { margin-top: .125rem; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .rechner__range { --fill: 50%; --griff: 1.75rem; --spur: .5rem; display: block; width: 100%; height: 2.75rem; margin: .125rem 0 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; } .rechner__range:focus { outline: none; } .rechner__range::-webkit-slider-runnable-track { height: var(--spur); border-radius: var(--radius-pill); background: linear-gradient(to right, var(--accent) 0 var(--fill), color-mix(in srgb, var(--fg) 16%, transparent) var(--fill) 100%); } .rechner__range::-moz-range-track { height: var(--spur); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 16%, transparent); } .rechner__range::-moz-range-progress { height: var(--spur); border-radius: var(--radius-pill); background: var(--accent); } /* Griff: weiß mit Signal-Ring und kleinem Kern, wächst beim Greifen */ .rechner__range::-webkit-slider-thumb { box-sizing: border-box; width: var(--griff); height: var(--griff); margin-top: calc((var(--spur) - var(--griff)) / 2); border: 3px solid var(--accent); border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 .1875rem, var(--bg-card) calc(.1875rem + .5px)); box-shadow: 0 2px 8px -2px rgba(13, 13, 16, .35); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); -webkit-appearance: none; appearance: none; } .rechner__range::-moz-range-thumb { box-sizing: border-box; width: var(--griff); height: var(--griff); border: 3px solid var(--accent); border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 .1875rem, var(--bg-card) calc(.1875rem + .5px)); box-shadow: 0 2px 8px -2px rgba(13, 13, 16, .35); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .rechner__range:hover::-webkit-slider-thumb { transform: scale(1.08); } .rechner__range:hover::-moz-range-thumb { transform: scale(1.08); } .rechner__range:active::-webkit-slider-thumb { transform: scale(1.14); box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--accent) 16%, transparent); } .rechner__range:active::-moz-range-thumb { transform: scale(1.14); box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--accent) 16%, transparent); } /* Fokus: Doppelring um den Griff (3 px Signal auf 3 px Kartengrund) */ .rechner__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 6px var(--accent); } .rechner__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 6px var(--accent); } .rechner__skala { display: flex; justify-content: space-between; gap: 1rem; margin-top: .125rem; font-size: var(--fs-label); line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; color: var(--text-muted); } /* Länderwahl: zwei Optionen als Segmente */ .rechner__land { min-width: 0; margin: 0; padding: 0; border: 0; } .rechner__land > legend { float: left; width: 100%; margin-bottom: .5rem; padding: 0; } .rechner__segmente { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid var(--line-control); border-radius: var(--radius-pill); } .rechner__segment { position: relative; display: flex; min-width: 0; } .rechner__segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .rechner__segment span { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 .375rem; border-radius: var(--radius-pill); font-size: clamp(.9375rem, .9rem + .2vw, 1rem); font-weight: 500; line-height: 1.2; text-align: center; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .rechner__segment:hover input:not(:checked) + span { background: color-mix(in srgb, var(--fg) 7%, transparent); } .rechner__segment input:checked + span { background: var(--accent-fill); color: var(--on-accent); } .rechner__segment input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; } /* Ergebnis je Weg */ .rechner__statisch { display: none; margin: calc(var(--space-s) * -.5) 0 var(--space-s); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .rechner__wege { display: grid; margin: 0; } .rechner__weg { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "summe" "balken" "detail" "nach"; gap: .375rem 1rem; padding: 1rem 0 1.125rem; border-bottom: 1px solid var(--line-soft); } .rechner__weg:first-child { padding-top: 0; } .rechner__weg--savaara { margin-top: .75rem; padding: 1rem 1rem 1.125rem; border-bottom: 0; border-radius: var(--radius-m); box-shadow: inset 0 0 0 1.5px var(--accent); } @container ergebnis (min-width: 22rem) { .rechner__weg { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kopf summe" "balken balken" "detail detail" "nach nach"; align-items: end; } .rechner__summe { text-align: right; transform-origin: right center; } .rechner__weg--savaara { padding-inline: 1.25rem; } } /* Schmale Ergebniskarte (Handy): flache Zeilen, Name links und Summe rechts, ohne Unterzeile. So passen Regler und alle vier Wege zusammen in eine Bildschirmhöhe. Ryker bleibt bei 32 px. */ @container ergebnis (max-width: 21.99rem) { .rechner__weg { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kopf summe" "balken balken" "detail detail" "nach nach"; align-items: center; gap: .375rem .75rem; padding: .75rem 0; } .rechner__weg-info { display: none; } .rechner__summe, .rechner__weg--savaara .rechner__summe { font-size: 2rem; text-align: right; transform-origin: right center; } .rechner__balken { height: .5rem; } .rechner__weg--savaara { padding: .875rem .75rem; } .rechner__nach-druck { font-size: .9375rem; } } /* Handy: etwas weniger Innenabstand in der Ergebniskarte, damit Name und Summe in eine Zeile passen */ @media (max-width: 39.99em) { .rechner__ergebnis { padding-inline: 1rem; } } .rechner__weg-kopf { grid-area: kopf; display: flex; flex-direction: column; gap: .125rem; min-width: 0; } .rechner__weg-name { font-size: var(--fs-body-m); font-weight: 500; line-height: 1.35; } /* Farbpunkt wie eine Legende zum Balken */ .rechner__weg-name::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%; background: color-mix(in srgb, var(--fg) 34%, transparent); vertical-align: .1em; } .rechner__weg--savaara .rechner__weg-name::before { background: var(--accent); } .rechner__weg-info { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); overflow-wrap: anywhere; } /* Große Ziffern: Ryker ab 32 px, savaara etwas größer */ .rechner__summe { grid-area: summe; font-family: var(--font-display); font-size: clamp(2rem, 1.85rem + .5vw, 2.25rem); font-weight: 400; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; transform-origin: left center; } .rechner__weg--savaara .rechner__summe { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); } /* Nach einer Änderung pulsiert die Summe einmal kurz (rechner.js setzt .is-neu), damit auch der Regler „Verkaufte Exemplare“, der die Balken je Buch nicht verändert, sichtbar antwortet */ @keyframes rechner-puls { 40% { transform: scale(1.045); } } @media (prefers-reduced-motion: no-preference) { .rechner__weg.is-neu .rechner__summe { animation: rechner-puls 400ms var(--ease); } } .rechner__balken { grid-area: balken; display: block; height: .75rem; overflow: hidden; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 7%, transparent); } .rechner__balken-fuellung { display: block; width: calc(var(--anteil, 0) * 100%); min-width: .75rem; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--fg) 34%, transparent); transition: width 700ms cubic-bezier(.2, .8, .2, 1); } .rechner__weg--savaara .rechner__balken-fuellung { background: var(--accent); } /* Beim ersten Hineinscrollen wachsen die Balken nacheinander (rechner.js setzt .is-sichtbar) */ @keyframes rechner-wachsen { from { width: 0; min-width: 0; } } @media (prefers-reduced-motion: no-preference) { .rechner.is-sichtbar .rechner__wege .rechner__balken-fuellung { animation: rechner-wachsen 900ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 110ms); } } .rechner__je-buch { grid-area: detail; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem 1rem; font-size: var(--fs-caption); line-height: var(--lh-caption); font-variant-numeric: tabular-nums lining-nums; color: var(--text-muted); } /* Mit savaara: Ergebnis nach Abzug der vorab bezahlten Druckauflage, in Ink (nicht grau) */ .rechner__nach-druck { grid-area: nach; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .125rem 1rem; margin-top: .375rem; padding-top: .625rem; border-top: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); font-size: var(--fs-body-m); font-weight: 500; line-height: 1.35; color: var(--fg); } .rechner__nach-druck-wert { margin-left: auto; /* bricht die Zeile um, steht der Betrag rechts */ font-weight: 500; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; } /* Deine Druckauflage: Auflage, Vorab, ab wann sie wieder eingespielt ist (mit Fortschritt) */ .rechner__fakten { display: grid; margin: 0; } .rechner__fakten > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding: .75rem 0; border-top: 1px solid var(--line-soft); } .rechner__fakten > div:first-child { padding-top: 0; border-top: 0; } .rechner__fakten > div:last-child { padding-bottom: 0; } .rechner__fakten dt { font-size: var(--fs-label); font-weight: 500; line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .rechner__fakten dd { margin: 0; font-size: var(--fs-body-m); font-weight: 500; line-height: 1.35; font-variant-numeric: tabular-nums lining-nums; } .rechner__fakt-breakeven { flex-direction: column; align-items: stretch !important; } .rechner__fakt-breakeven dd { display: grid; gap: .5rem; } .rechner__meter { display: block; height: .5rem; overflow: hidden; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 9%, transparent); } .rechner__meter-fuellung { display: block; width: calc(var(--anteil, 0) * 100%); height: 100%; border-radius: inherit; background: var(--accent); transition: width 700ms cubic-bezier(.2, .8, .2, 1); } @media (prefers-reduced-motion: no-preference) { .rechner.is-sichtbar .rechner__meter-fuellung { animation: rechner-wachsen 900ms cubic-bezier(.2, .8, .2, 1) 300ms backwards; } } .rechner__noch { font-size: var(--fs-caption); font-weight: 400; line-height: var(--lh-caption); color: var(--text-muted); } /* Ausführlich: dieselben Kennzahlen als ruhiger Block in der Ergebniskarte */ .rechner__druck-block { margin-top: var(--space-m); padding: 1.125rem 1.25rem 1.25rem; border-radius: var(--radius-s); background: var(--bg-muted); } .rechner__druck-block .rechner__karten-titel { margin-bottom: .875rem; } .rechner__fuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding: .25rem .25rem 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .rechner__fuss .link-arrow { font-size: var(--fs-body-m); color: var(--text); } /* Aufteilung je Weg (ausführlich): Stapelbalken über den ganzen Ladenpreis, Tabelle mit Farbpunkten als Legende, Summe „Bei dir“ unten auf einer Linie über alle Karten */ .rechner-aufteilung { margin-top: var(--space-2xl); } .rechner-aufteilung__titel { margin-bottom: var(--space-m); font-size: var(--fs-h3); } .rechner-aufteilung__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: var(--space-s); } .rechner-aufteilung__karte { display: flex; flex-direction: column; padding: 1.25rem; box-shadow: inset 0 0 0 1px var(--line); } .rechner-aufteilung__karte--savaara { box-shadow: inset 0 0 0 1.5px var(--accent); } .rechner-aufteilung__name { margin-bottom: .75rem; font-size: var(--fs-body-m); font-weight: 500; line-height: 1.35; letter-spacing: 0; } /* Farben der Anteile: die Autor*in in Violett, der Rückfluss der vorab bezahlten Druckkosten in hellem Violett, alle anderen in ruhigen Grautönen (aus der Textfarbe, folgen dem Farbmodus) */ .rechner-aufteilung [data-seg] { --seg: color-mix(in srgb, var(--fg) 16%, transparent); } .rechner-aufteilung [data-seg="autorin"] { --seg: var(--accent); } .rechner-aufteilung [data-seg="rueckfluss"] { --seg: color-mix(in srgb, var(--accent) 38%, var(--bg-card)); } .rechner-aufteilung [data-seg="ust"] { --seg: color-mix(in srgb, var(--fg) 10%, transparent); } .rechner-aufteilung [data-seg="handel"] { --seg: color-mix(in srgb, var(--fg) 28%, transparent); } .rechner-aufteilung [data-seg="zwischenhandel"] { --seg: color-mix(in srgb, var(--fg) 20%, transparent); } .rechner-aufteilung [data-seg="kosten"] { --seg: color-mix(in srgb, var(--fg) 14%, transparent); } .rechner-aufteilung [data-seg="druck"] { --seg: color-mix(in srgb, var(--fg) 36%, transparent); } .rechner-aufteilung [data-seg="mittler"] { --seg: color-mix(in srgb, var(--fg) 48%, transparent); } /* Mehrere Karten nebeneinander: Namen auf zwei Zeilen reserviert, damit die Stapel auf einer Linie stehen */ @media (min-width: 40em) { .rechner-aufteilung__name { min-height: calc(2em * 1.35); } } .rechner-stapel { display: flex; gap: 2px; height: .75rem; margin-bottom: 1rem; overflow: hidden; border-radius: var(--radius-pill); } .rechner-stapel > span { flex: var(--w, 0) 1 0%; min-width: 0; background: var(--seg); transition: flex-grow 700ms cubic-bezier(.2, .8, .2, 1); } .rechner-stapel > span[hidden] { display: none; } /* Beim Hineinscrollen deckt sich jeder Stapel von links auf (rechner.js setzt .is-sichtbar) */ @keyframes rechner-aufdecken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: no-preference) { .rechner.is-bereit .rechner-aufteilung:not(.is-sichtbar) .rechner-stapel { clip-path: inset(0 100% 0 0); } .rechner-aufteilung.is-sichtbar .rechner-stapel { animation: rechner-aufdecken 900ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 110ms); } } .rechner-tabelle { width: 100%; margin-bottom: 1rem; border-collapse: collapse; font-size: var(--fs-caption); line-height: var(--lh-caption); font-variant-numeric: tabular-nums lining-nums; } .rechner-tabelle th, .rechner-tabelle td { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); font-weight: 400; text-align: left; vertical-align: baseline; } .rechner-tabelle th { color: var(--text-muted); overflow-wrap: anywhere; } .rechner-tabelle td { padding-left: .75rem; text-align: right; white-space: nowrap; } .rechner-tabelle__summe th, .rechner-tabelle__summe td { color: var(--fg); font-weight: 500; } /* Farbpunkt je Zeile: Legende zum Stapelbalken */ .rechner-tabelle tr[data-seg] th::before, .rechner-aufteilung__bei-dir > span::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 2px; background: var(--seg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent); vertical-align: .05em; } .rechner-aufteilung__bei-dir > span::before { --seg: var(--accent); box-shadow: none; } .rechner-aufteilung__notiz { margin-bottom: 1rem; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .rechner-aufteilung__summe { margin-top: auto; padding-top: .875rem; border-top: 1.5px solid var(--fg); } .rechner-aufteilung__bei-dir { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; font-size: var(--fs-body-m); font-weight: 500; line-height: 1.35; } .rechner-aufteilung__bei-dir strong { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; } .rechner-aufteilung__anteil { margin-top: .25rem; font-size: var(--fs-caption); line-height: var(--lh-caption); text-align: right; color: var(--text-muted); } /* Quellen und Annahmen (aufklappbar) */ .rechner-quellen { margin-top: var(--space-l); border-top: 1px solid var(--rule, var(--line)); border-bottom: 1px solid var(--rule, var(--line)); } .rechner-quellen__titel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .75rem 0; font-weight: 500; cursor: pointer; list-style: none; } .rechner-quellen__titel::-webkit-details-marker { display: none; } .rechner-quellen__titel::after { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--dur) var(--ease); } .rechner-quellen[open] > .rechner-quellen__titel::after { transform: rotate(45deg); } .rechner-quellen__inhalt { max-width: var(--measure); padding-bottom: var(--space-m); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); } .rechner-quellen__liste { display: grid; gap: .5rem; padding-left: 1.1rem !important; list-style: disc !important; } .rechner-quellen__label { margin-top: var(--space-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text); } .rechner-quellen__links { display: grid; gap: .25rem; margin-top: .25rem; } .rechner-quellen__links a { display: inline-block; padding-block: .25rem; overflow-wrap: anywhere; } /* Ziel 24 px hoch */ .rechner-quellen__stand { margin-top: var(--space-s); } /* Ohne JavaScript: das vorberechnete Beispiel ohne Regler */ .no-js .rechner__basis, .no-js .rechner__annahmen { display: none; } .no-js .rechner__statisch { display: block; } .no-js .rechner .rechner__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "ergebnis" "druck" "fuss"; } /* Druck: Regler aus, der Satz über dem Ergebnis nennt die aktuellen Werte (rechner.js) */ @media print { .rechner__basis, .rechner__annahmen { display: none; } .rechner__statisch { display: block; } .rechner .rechner__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "ergebnis" "druck" "fuss"; padding: 0; background: none; } .rechner__karte { box-shadow: none; } .rechner-stapel { clip-path: none !important; } } @media (forced-colors: active) { .rechner__balken, .rechner__meter { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; } .rechner__balken-fuellung, .rechner__meter-fuellung { forced-color-adjust: none; background: CanvasText; } .rechner__weg--savaara .rechner__balken-fuellung { background: Highlight; } .rechner-stapel { forced-color-adjust: none; outline: 1px solid CanvasText; } .rechner-stapel > span { background: CanvasText; } .rechner-stapel > span[data-seg="autorin"] { background: Highlight; } .rechner__weg-name::before, .rechner__karten-titel::before, .rechner-tabelle tr[data-seg] th::before, .rechner-aufteilung__bei-dir > span::before, .rechner-quellen__titel::after { forced-color-adjust: none; background: CanvasText; } .rechner__weg--savaara, .rechner-aufteilung__karte--savaara { outline: 2px solid CanvasText; } .rechner__range { height: auto; background: none; -webkit-appearance: auto; appearance: auto; } .rechner__segment input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; } .rechner__segmente { border-color: CanvasText; } }