/* ========================================================================== einfach vollstrecken – Designsystem, Basis (theme-neutral) Herkunft: eigene Gestaltung -------------------------------------------------------------------------- Aufbau (Cascade Layers, Reihenfolge = Rangfolge, spätere gewinnen): reset → token → basis → layout → komponenten → mockups → styleguide → hilfen Die Designdatei vorschlag-a.css steht außerhalb der Layer und gewinnt deshalb immer gegen diese Datei – ohne !important und ohne Spezifitäts-Wettlauf. Keine externen URLs, Schriften lokal (OFL 1.1). ========================================================================== */ @layer reset, token, basis, layout, komponenten, mockups, styleguide, hilfen; /* -------------------------------------------------------------------------- Schriften: Inter Variable und Source Serif 4 Variable (beide OFL 1.1), lokal; Inter mit Unicode-Bereichen wie Fontsource -------------------------------------------------------------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-ext-wght.woff2") format("woff2-variations"), url("../fonts/inter-latin-ext-wght.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-wght.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Titelschrift: Source Serif 4 Variable (Adobe, OFL 1.1, Release 4.005R), lokal, unverändert. Achsen: Stärke 200–900 und optische Größe (opsz, vom Browser automatisch nach Schriftgröße gewählt). Hinweis: „Source“ ist reservierter Schriftname – bei Verkleinerung (Subsetting) Schrift umbenennen. */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("../fonts/SourceSerif4Variable-Roman.ttf.woff2") format("woff2-variations"), url("../fonts/SourceSerif4Variable-Roman.ttf.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("../fonts/SourceSerif4Variable-Italic.ttf.woff2") format("woff2-variations"), url("../fonts/SourceSerif4Variable-Italic.ttf.woff2") format("woff2"); } /* ========================================================================== 1. RESET ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; } body { min-block-size: 100dvh; } img, picture, video, canvas, svg { display: block; max-inline-size: 100%; } img, video { block-size: auto; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; } p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption, blockquote, td, th { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } table { border-collapse: collapse; } textarea { field-sizing: content; } [hidden]:not([hidden="until-found"]) { display: none !important; } :target { scroll-margin-block: calc(var(--kopf-hoehe, 4rem) + 1.5rem) 5rem; } } /* ========================================================================== 2. TOKEN-SCHNITTSTELLE (neutrale Standardwerte) vorschlag-a.css überschreibt diese Werte in :root[data-vorschlag="a"]. Abgeleitete Token (z. B. --farbe-marke-hover) sind auf :root definiert und folgen automatisch, wenn das Design die Grundfarbe ändert. ========================================================================== */ @layer token { :root { color-scheme: light; /* ---- Farben nach Rollen ---- */ --farbe-grund: #fafaf9; /* Seitenhintergrund */ --farbe-flaeche: #ffffff; /* Karten, Panels, Eingabefelder */ --farbe-flaeche-2: #f1f2f4; /* ruhige Zweitfläche, Tabellenkopf */ --farbe-getoent: #edf1f6; /* getönte Sektion (leicht markenfarbig) */ --farbe-text: #15171c; /* Fließtext, Titel */ --farbe-text-leise: #4f5562; /* Nebentexte, Meta (mind. 4,5:1 auf grund/flaeche/flaeche-2) */ --farbe-linie: #dcdfe5; /* dekorative Linien, Kartenränder */ --farbe-linie-stark: #7d8390; /* Ränder von Eingabefeldern (mind. 3:1) */ --farbe-marke: #1d3557; /* Markenfarbe: Primärknopf, aktive Zustände */ --farbe-marke-kontrast: #ffffff; /* Text auf Markenfarbe */ --farbe-akzent: #0f766e; /* Akzent: Hervorhebung, Dachzeile, Icons */ --farbe-akzent-kontrast: #ffffff; /* Text auf Akzentfarbe */ --farbe-link: var(--farbe-marke); /* Textlinks */ --farbe-fokus: #1d4ed8; /* Fokusring (mind. 3:1 zum Umfeld) */ /* Status (Text-Farbe + zarte Fläche; Paar muss 4,5:1 erreichen) */ --farbe-erfolg: #166534; --farbe-erfolg-zart: #e7f4ea; --farbe-warnung: #92400e; --farbe-warnung-zart: #fdf3dc; --farbe-fehler: #b91c1c; --farbe-fehler-zart: #fdecec; --farbe-info: #1d4ed8; --farbe-info-zart: #eaf0fd; /* Dunkle Sektionen (dunkler Hero, CTA-Band, optional Fußzeile) */ --farbe-dunkel-grund: #0f1726; --farbe-dunkel-flaeche: #18233a; --farbe-dunkel-text: #f2f4f8; --farbe-dunkel-text-leise: #b7c0cf; --farbe-dunkel-linie: #2c3a55; --farbe-dunkel-marke: #a9c7ff; /* Primärknopf auf dunkel */ --farbe-dunkel-marke-kontrast: #0f1726; --farbe-dunkel-akzent: #6ee7d8; --farbe-dunkel-fokus: #fbd34d; --farbe-dunkel-erfolg: #86e3a6; /* Status auf dunkel */ --farbe-dunkel-warnung: #f8cf6a; --farbe-dunkel-fehler: #fca5a5; --farbe-dunkel-info: #a9c4ff; /* Abgeleitete Farben (folgen automatisch) */ --farbe-marke-hover: color-mix(in oklab, var(--farbe-marke) 84%, #000); --farbe-marke-zart: color-mix(in oklab, var(--farbe-marke) 9%, var(--farbe-flaeche)); --farbe-akzent-zart: color-mix(in oklab, var(--farbe-akzent) 10%, var(--farbe-flaeche)); --farbe-auswahl: color-mix(in oklab, var(--farbe-marke) 20%, transparent); /* Bereichs-Token: Fußzeile (Standard hell) */ --fuss-grund: var(--farbe-flaeche-2); --fuss-flaeche: var(--farbe-flaeche); --fuss-text: var(--farbe-text); --fuss-text-leise: var(--farbe-text-leise); --fuss-linie: var(--farbe-linie); --fuss-marke: var(--farbe-marke); --fuss-marke-kontrast: var(--farbe-marke-kontrast); --fuss-fokus: var(--farbe-fokus); /* Bereichs-Token: CTA-Band (Standard dunkel) */ --cta-grund: var(--farbe-dunkel-grund); --cta-flaeche: var(--farbe-dunkel-flaeche); --cta-text: var(--farbe-dunkel-text); --cta-text-leise: var(--farbe-dunkel-text-leise); --cta-linie: var(--farbe-dunkel-linie); --cta-marke: var(--farbe-dunkel-marke); --cta-marke-kontrast: var(--farbe-dunkel-marke-kontrast); --cta-fokus: var(--farbe-dunkel-fokus); /* Bereichs-Token: Kopfzeile */ --kopf-grund: color-mix(in srgb, var(--farbe-grund) 88%, transparent); --kopf-rand: var(--farbe-linie); --kopf-unschaerfe: 12px; /* Mockup-Token: UI-Ausschnitte bleiben auch in dunklen Sektionen hell */ --ui-grund: var(--farbe-grund); --ui-flaeche: var(--farbe-flaeche); --ui-flaeche-2: var(--farbe-flaeche-2); --ui-text: var(--farbe-text); --ui-text-leise: var(--farbe-text-leise); --ui-linie: var(--farbe-linie); --ui-marke: var(--farbe-marke); --ui-marke-kontrast: var(--farbe-marke-kontrast); --ui-marke-zart: var(--farbe-marke-zart); --ui-akzent: var(--farbe-akzent); --ui-radius: var(--radius-l); --ui-schatten: var(--schatten-3); --ui-papier: #fffefb; /* Formularvorschau: Papierton */ --ui-erfolg: var(--farbe-erfolg); --ui-erfolg-zart: var(--farbe-erfolg-zart); --ui-warnung: var(--farbe-warnung); --ui-warnung-zart: var(--farbe-warnung-zart); --ui-fehler: var(--farbe-fehler); --ui-fehler-zart: var(--farbe-fehler-zart); --ui-info: var(--farbe-info); --ui-info-zart: var(--farbe-info-zart); /* ---- Schriften ---- */ --schrift-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-titel: var(--schrift-text); --schrift-zahl: var(--schrift-text); --schrift-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --schrift-serif: ui-serif, "New York", "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif; --schrift-merkmale: "kern", "calt"; /* font-feature-settings für Text */ --titel-merkmale: "kern", "calt"; /* font-feature-settings für Titel */ /* ---- Typo-Skala, fluide (360 px → 1280 px) ---- */ --text-xs: clamp(0.75rem, 0.735rem + 0.07vw, 0.8125rem); --text-s: clamp(0.875rem, 0.86rem + 0.07vw, 0.9375rem); --text-m: clamp(1rem, 0.975rem + 0.11vw, 1.0625rem); --text-l: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); --text-xl: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.35rem + 0.65vw, 1.875rem); --text-3xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem); --text-4xl: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); --text-5xl: clamp(2.25rem, 1.7rem + 2.6vw, 4.25rem); --zeilenhoehe-text: 1.6; --zeilenhoehe-eng: 1.3; --zeilenhoehe-titel: 1.12; --text-gewicht: 400; --gewicht-stark: 600; --titel-gewicht: 680; --titel-laufweite: -0.022em; --titel-stil: normal; --titel-transform: none; --dachzeile-groesse: var(--text-xs); --dachzeile-gewicht: 650; --dachzeile-laufweite: 0.08em; --dachzeile-transform: uppercase; --dachzeile-farbe: var(--farbe-akzent); --zahlen-stil: tabular-nums lining-nums; /* font-variant-numeric für Beträge */ /* ---- Abstände ---- */ --abstand-1: 0.25rem; --abstand-2: 0.5rem; --abstand-3: 0.75rem; --abstand-4: 1rem; --abstand-5: 1.5rem; --abstand-6: 2rem; --abstand-7: 3rem; --abstand-8: 4rem; --abstand-9: 6rem; --abstand-10: 8rem; --sektion-abstand: clamp(3.5rem, 2.4rem + 4.8vw, 7rem); --raster-luecke: clamp(1rem, 0.8rem + 0.9vw, 1.5rem); --rand: clamp(1rem, 0.55rem + 2vw, 2.5rem); /* seitlicher Seitenrand, mind. 16 px */ /* ---- Radien ---- */ --radius-s: 0.375rem; --radius-m: 0.625rem; --radius-l: 1rem; --radius-xl: 1.5rem; --radius-pill: 999px; --knopf-radius: var(--radius-m); --karte-radius: var(--radius-l); --chip-radius: var(--radius-pill); --eingabe-radius: var(--radius-s); /* ---- Linien & Schatten ---- */ --rahmen-breite: 1px; --schatten-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.06); --schatten-2: 0 2px 4px rgb(16 24 40 / 0.05), 0 8px 20px -4px rgb(16 24 40 / 0.10); --schatten-3: 0 4px 8px rgb(16 24 40 / 0.04), 0 24px 48px -12px rgb(16 24 40 / 0.18); --karte-schatten: var(--schatten-1); --karte-schatten-hover: var(--schatten-2); --karte-rand: var(--rahmen-breite) solid var(--farbe-linie); /* ---- Knöpfe ---- */ --knopf-hoehe: 2.75rem; /* 44 px Zielgröße */ --knopf-gewicht: 600; --knopf-laufweite: 0; --knopf-transform: none; /* ---- Icons ---- */ --icon-strich: 1.75; /* ---- Layout ---- */ --breite-inhalt: 76rem; --breite-schmal: 56rem; --breite-text: 42rem; --kopf-hoehe: 4rem; /* Mehrhöhe der Kopfzeile: website.js misst die tatsächliche Höhe (--kopf-ist). Sie wächst, wenn das Menü bei größeren Text- und Buchstabenabständen (WCAG 1.4.12) oder größerer Schrift umbricht. Im Normalfall 0 (Kopf 68 px = 4rem + Kanten); ohne JS ebenfalls 0. Abstände für Fokus und Sprungziele, klebende Leisten und die Höhe der Menü-Panels rechnen sie hinzu (WCAG 2.4.11). */ --kopf-mehr: max(0px, var(--kopf-ist, 0px) - var(--kopf-hoehe) - 0.25rem); --mobil-cta-hoehe: 4.25rem; --umbruch-nav: 64rem; /* nur Doku: Desktop-Navigation ab 64rem (in @media fest) */ --ziel-min: 2.75rem; /* Touch-Ziel 44 px, gilt unter 64rem und bei Touch-Bedienung */ /* Obergrenze für große Titel: Wörter wie „Forderungsaufstellung“, „Vollstreckungsauftrag“ und „Forderungsmanagement“ (bis ca. 11,3 em breit, auch in kräftigen Schnitten) passen ungetrennt in die Inhaltsbreite – bei 320 px ca. 25 px, bei 390 px ca. 31 px. Ab ca. 600 px greift die Typo-Skala. */ --titel-grenze: calc((100vw - 2.25rem) / 11.4); --collage-ueberlappung: 3rem; /* Produktausschnitte: so weit überdeckt die zweite Karte die erste (nur Leerraum) */ /* ---- Fokus ---- */ --fokus-breite: 3px; --fokus-abstand: 2px; /* ---- Bewegung ---- */ --dauer-kurz: 120ms; --dauer: 200ms; --dauer-lang: 420ms; --kurve: cubic-bezier(0.2, 0.8, 0.2, 1); /* ---- Dekor (optional, im Design gesetzt) ---- */ --hero-hintergrund: none; --sektion-dekor: none; } } /* ========================================================================== 3. BASIS ========================================================================== */ @layer basis { html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--kopf-hoehe) + 1rem + var(--kopf-mehr)); background: var(--farbe-grund); } body { background: var(--farbe-grund); color: var(--farbe-text); font-family: var(--schrift-text); font-size: var(--text-m); font-weight: var(--text-gewicht); line-height: var(--zeilenhoehe-text); font-feature-settings: var(--schrift-merkmale); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; } ::selection { background: var(--farbe-auswahl); } h1, h2, h3, h4, h5, h6 { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); letter-spacing: var(--titel-laufweite); font-style: var(--titel-stil); text-transform: var(--titel-transform); font-feature-settings: var(--titel-merkmale); line-height: var(--zeilenhoehe-titel); text-wrap: balance; color: var(--farbe-text); } h1 { font-size: min(var(--text-4xl), var(--titel-grenze)); } h2 { font-size: min(var(--text-3xl), var(--titel-grenze)); } h3 { font-size: var(--text-xl); line-height: var(--zeilenhoehe-eng); } h4 { font-size: var(--text-l); line-height: var(--zeilenhoehe-eng); } h5, h6 { font-size: var(--text-m); line-height: var(--zeilenhoehe-eng); } /* Große Titel in allen Breiten NIE automatisch trennen („Forde-rungen“). Die Größe ist über --titel-grenze so begrenzt, dass lange Wörter bei 320 px ungetrennt passen; wo das nicht reicht, setzt der Inhalt gezielt ­. overflow-wrap: anywhere ist nur die letzte Sicherung gegen waagrechtes Scrollen (greift nur bei Wörtern, die gar nicht in die Zeile passen; anders als break-word verbreitert es auch keine Raster-/Flex-Spalte). */ h1, h2, .hero__titel, .seitenkopf__titel, .cta-band__titel { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: anywhere; } p, li, dd { text-wrap: pretty; } a { color: var(--farbe-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } strong, b { font-weight: var(--gewicht-stark); } small { font-size: var(--text-s); } abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; } code, kbd, samp { font-family: var(--schrift-mono); font-size: 0.92em; hyphens: none; -webkit-hyphens: none; } hr { border: 0; border-block-start: var(--rahmen-breite) solid var(--farbe-linie); margin-block: var(--abstand-6); } svg { flex-shrink: 0; } /* Fokus: immer sichtbar bei Tastaturbedienung */ :focus-visible { outline: var(--fokus-breite) solid var(--farbe-fokus); outline-offset: var(--fokus-abstand); border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } main:focus { outline: none; } /* Zahlen/Beträge */ .zahl, .betrag, td.zahl, th.zahl, time { font-family: var(--schrift-zahl); font-variant-numeric: var(--zahlen-stil); } .zahl, td.zahl, th.zahl { text-align: end; white-space: nowrap; } /* Ruhige Bewegung, wenn gewünscht */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Auf- und Zuklappen der Akkordeons (::details-content) ebenfalls ohne Bewegung. Eigene Regel: Browser ohne ::details-content verwerfen nur sie, nicht die Regel darüber. */ *::details-content { transition-duration: 0.01ms !important; } } } /* Seitenübergänge zwischen Unterseiten (nur gleiche Herkunft, moderne Browser) */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* ========================================================================== 4. LAYOUT-PRIMITIVES ========================================================================== */ @layer layout { .container { inline-size: 100%; max-inline-size: calc(var(--breite-inhalt) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); } .container--schmal { max-inline-size: calc(var(--breite-schmal) + 2 * var(--rand)); } .container--text { max-inline-size: calc(var(--breite-text) + 2 * var(--rand)); } /* Stapel: gleichmäßiger Abstand zwischen Geschwistern */ .stapel { display: flex; flex-direction: column; justify-content: flex-start; } .stapel > * { margin-block: 0; } .stapel > * + * { margin-block-start: var(--stapel-abstand, var(--abstand-4)); } .stapel--eng { --stapel-abstand: var(--abstand-2); } .stapel--weit { --stapel-abstand: var(--abstand-6); } /* Reihe: Elemente nebeneinander, umbrechend */ .reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--reihe-luecke, var(--abstand-3)); } .reihe--zwischen { justify-content: space-between; } .reihe--oben { align-items: flex-start; } /* Raster: automatisch so viele Spalten wie passen */ .raster { display: grid; gap: var(--raster-luecke); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--raster-min, 17rem)), 1fr)); } .raster--2 { --raster-min: 22rem; } .raster--3 { --raster-min: 17rem; } .raster--4 { --raster-min: 13rem; } @media (width >= 64rem) { .raster--2 { grid-template-columns: repeat(2, 1fr); } .raster--3 { grid-template-columns: repeat(3, 1fr); } .raster--4 { grid-template-columns: repeat(4, 1fr); } } /* Bento: Kacheln unterschiedlicher Größe */ .bento { display: grid; gap: var(--raster-luecke); grid-template-columns: 1fr; } @media (width >= 48rem) { .bento { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; } .bento > * { grid-column: span 3; } .bento > .bento__kachel--schmal { grid-column: span 2; } .bento > .bento__kachel--breit { grid-column: span 4; } .bento > .bento__kachel--voll { grid-column: 1 / -1; } .bento > .bento__kachel--hoch { grid-row: span 2; } } /* Geteilt: Text + Bild/Mockup */ .geteilt { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } /* Spalten dürfen schmaler werden als ihr breitester nicht umbrechender Inhalt (Etiketten, URLs) – sonst Überlauf */ .geteilt > * { min-inline-size: 0; } .geteilt--oben { align-items: start; } @media (width >= 56rem) { .geteilt { grid-template-columns: 1fr 1fr; } .geteilt--umgekehrt > :first-child { order: 2; } .geteilt--text-breit { grid-template-columns: 1.15fr 0.85fr; } } /* Sektionen */ .sektion { padding-block: var(--sektion-abstand); background-color: var(--farbe-grund); background-image: var(--sektion-dekor); color: var(--farbe-text); } .sektion--eng { padding-block: calc(var(--sektion-abstand) * 0.6); } .sektion--ohne-oben { padding-block-start: 0; } .sektion--flaeche { background-color: var(--farbe-flaeche-2); } .sektion--getoent { background-color: var(--farbe-getoent); } .sektion--linie { border-block-start: var(--rahmen-breite) solid var(--farbe-linie); } /* Dunkle Bereiche: Token werden lokal umgemappt, Komponenten passen sich an */ .sektion--dunkel, .dunkel { --farbe-grund: var(--farbe-dunkel-grund); --farbe-flaeche: var(--farbe-dunkel-flaeche); --farbe-flaeche-2: var(--farbe-dunkel-flaeche); --farbe-getoent: var(--farbe-dunkel-flaeche); --farbe-text: var(--farbe-dunkel-text); --farbe-text-leise: var(--farbe-dunkel-text-leise); --farbe-linie: var(--farbe-dunkel-linie); --farbe-linie-stark: var(--farbe-dunkel-text-leise); --farbe-marke: var(--farbe-dunkel-marke); --farbe-marke-kontrast: var(--farbe-dunkel-marke-kontrast); --farbe-marke-hover: color-mix(in oklab, var(--farbe-dunkel-marke) 82%, #fff); --farbe-marke-zart: color-mix(in oklab, var(--farbe-dunkel-marke) 14%, var(--farbe-dunkel-grund)); --farbe-akzent: var(--farbe-dunkel-akzent); --farbe-akzent-zart: color-mix(in oklab, var(--farbe-dunkel-akzent) 14%, var(--farbe-dunkel-grund)); --farbe-link: var(--farbe-dunkel-marke); --farbe-fokus: var(--farbe-dunkel-fokus); --dachzeile-farbe: var(--farbe-dunkel-akzent); --farbe-auswahl: color-mix(in oklab, var(--farbe-dunkel-marke) 35%, transparent); --farbe-erfolg: var(--farbe-dunkel-erfolg); --farbe-erfolg-zart: color-mix(in oklab, var(--farbe-dunkel-erfolg) 16%, var(--farbe-dunkel-grund)); --farbe-warnung: var(--farbe-dunkel-warnung); --farbe-warnung-zart: color-mix(in oklab, var(--farbe-dunkel-warnung) 16%, var(--farbe-dunkel-grund)); --farbe-fehler: var(--farbe-dunkel-fehler); --farbe-fehler-zart: color-mix(in oklab, var(--farbe-dunkel-fehler) 16%, var(--farbe-dunkel-grund)); --farbe-info: var(--farbe-dunkel-info); --farbe-info-zart: color-mix(in oklab, var(--farbe-dunkel-info) 16%, var(--farbe-dunkel-grund)); color-scheme: dark; background-color: var(--farbe-grund); color: var(--farbe-text); } /* Sektionskopf: Dachzeile + Titel + Einleitung */ .sektion__kopf { display: flex; flex-direction: column; gap: var(--abstand-3); max-inline-size: 46rem; margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .sektion__kopf--mitte { margin-inline: auto; text-align: center; align-items: center; } .sektion__kopf > h2 { font-size: min(var(--text-3xl), var(--titel-grenze)); } .sektion__fuss { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); display: flex; flex-wrap: wrap; gap: var(--abstand-3); } .dachzeile { display: inline-flex; align-items: center; gap: var(--abstand-2); font-size: var(--dachzeile-groesse); font-weight: var(--dachzeile-gewicht); letter-spacing: var(--dachzeile-laufweite); text-transform: var(--dachzeile-transform); color: var(--dachzeile-farbe); line-height: 1.4; hyphens: none; /* Versalien nie trennen */ -webkit-hyphens: none; } /* Weitere Versalien-Beschriftungen ebenfalls nie trennen */ .karte__rolle, .schritt__wer, .fuss__titel, .nav__panel-titel, .inhaltsverzeichnis__titel, .formularstand__daten dt, .ui-beispiel, .sg-label { hyphens: none; -webkit-hyphens: none; } .lead { font-size: var(--text-l); line-height: 1.55; color: var(--farbe-text-leise); max-inline-size: 40rem; } .leise { color: var(--farbe-text-leise); } .klein { font-size: var(--text-s); } /* Langtext (Ratgeber, Rechtstexte) */ .prosa { max-inline-size: var(--breite-text); } .prosa > * + * { margin-block-start: 1em; } .prosa > :is(h2) { margin-block-start: 2.2em; font-size: var(--text-2xl); } .prosa > :is(h3) { margin-block-start: 1.8em; } .prosa > :is(h2, h3) + * { margin-block-start: 0.6em; } .prosa :is(ul, ol) { padding-inline-start: 1.25em; } .prosa :is(ul, ol)[class] { padding-inline-start: 0; } .prosa li + li { margin-block-start: 0.4em; } .prosa li::marker { color: var(--farbe-akzent); } .prosa blockquote { border-inline-start: 3px solid var(--farbe-linie); padding-inline-start: var(--abstand-4); color: var(--farbe-text-leise); } .prosa :is(.hinweis, .quellenbox, .tabelle-scroll, figure) { margin-block: 1.75em; } .prosa dfn { font-style: normal; font-weight: var(--gewicht-stark); } } /* ========================================================================== 5. KOMPONENTEN ========================================================================== */ @layer komponenten { /* ---------- Icons (Inline-SVG aus dem Sprite, ) ---------- */ .icon { inline-size: var(--icon-groesse, 1.25em); block-size: var(--icon-groesse, 1.25em); fill: none; stroke: currentColor; stroke-width: var(--icon-strich); stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -0.2em; } .icon--gross { --icon-groesse: 1.75rem; } .icon-box { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-m); background: var(--farbe-marke-zart); color: var(--farbe-marke); --icon-groesse: 1.375rem; } .icon-box--akzent { background: var(--farbe-akzent-zart); color: var(--farbe-akzent); } /* ---------- Skip-Link ---------- */ .skip-link { position: absolute; inset-block-start: var(--abstand-2); inset-inline-start: var(--abstand-2); z-index: 1000; padding: var(--abstand-3) var(--abstand-4); background: var(--farbe-marke); color: var(--farbe-marke-kontrast); border-radius: var(--radius-m); font-weight: var(--gewicht-stark); text-decoration: none; translate: 0 -200%; transition: translate var(--dauer) var(--kurve); } .skip-link:focus-visible { translate: 0 0; } /* ---------- Logo (Bildzeichen + Wortmarke) und Deskriptor ---------- */ .logo { display: inline-flex; align-items: center; gap: 0.55em; color: var(--farbe-text); line-height: 1; } .logo__zeichen { inline-size: auto; block-size: 1.75em; color: var(--farbe-marke); } .logo__wort { font-family: var(--schrift-titel); font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap; font-weight: 500; } .logo__wort b { font-weight: 750; } .logo-link { display: inline-flex; align-items: center; text-decoration: none; color: inherit; min-block-size: 2.75rem; } /* ---------- Werkzeugleiste (nicht Teil der Website, im Produktionsbau entfernt) ---------- */ .proto-leiste { position: relative; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.375rem 0.75rem; padding: 0.375rem 0.75rem; background: #24262b; color: #f3f3f3; font: 500 0.8125rem/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; border-block-end: 2px dashed #f0b429; } .proto-leiste__marke { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; border-radius: 4px; background: #f0b429; color: #1b1b1b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; } .proto-leiste a { color: #f3f3f3; text-underline-offset: 0.2em; } .proto-leiste :focus-visible { outline: 2px solid #f0b429; outline-offset: 2px; } /* ---------- Kopfzeile ---------- */ .kopf { position: sticky; inset-block-start: 0; z-index: 50; background: var(--kopf-grund); -webkit-backdrop-filter: saturate(1.4) blur(var(--kopf-unschaerfe)); backdrop-filter: saturate(1.4) blur(var(--kopf-unschaerfe)); border-block-end: var(--rahmen-breite) solid var(--kopf-rand); } .kopf__innen { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); min-block-size: var(--kopf-hoehe); } .kopf__menue-knopf { display: inline-flex; align-items: center; gap: var(--abstand-2); min-block-size: 2.75rem; padding: 0 var(--abstand-3); border: var(--rahmen-breite) solid var(--farbe-linie); border-radius: var(--knopf-radius); background: var(--farbe-flaeche); color: var(--farbe-text); font-weight: var(--gewicht-stark); font-size: var(--text-s); } .kopf__menue-knopf .icon--zu { display: none; } .kopf__menue-knopf[aria-expanded="true"] .icon--auf { display: none; } .kopf__menue-knopf[aria-expanded="true"] .icon--zu { display: inline-block; } /* Sehr schmal: „Schließen“ ist breiter als „Menü“ und würde die Wortmarke überdecken – dann nur das Symbol zeigen */ @media (width < 22.5rem) { .kopf__menue-knopf[aria-expanded="true"] .kopf__menue-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } :root.no-js .kopf__menue-knopf { display: none; } /* Marke in der Kopfzeile: Logo-Link + Deskriptor (Deskriptor nur ab breitem Desktop, sonst zu eng für die Navigation) */ .kopf__marke { display: flex; align-items: center; gap: var(--abstand-4); min-inline-size: 0; } @media (width >= 64rem) { .kopf__marke { flex: none; } } .kopf__deskriptor { display: none; } @media (width >= 80rem) { .kopf__deskriptor { display: block; max-inline-size: 11rem; padding-inline-start: var(--abstand-4); border-inline-start: var(--rahmen-breite) solid var(--farbe-linie); font-size: var(--text-xs); line-height: 1.3; color: var(--farbe-text-leise); hyphens: none; text-wrap: balance; } } /* ---------- Navigation ---------- */ .nav__liste, .nav__panel-liste, .nav__aktionen { list-style: none; padding: 0; margin: 0; } .nav__link, .nav__ausloeser { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); min-block-size: 2.75rem; padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius-s); color: var(--farbe-text); font-weight: 550; text-decoration: none; cursor: pointer; } .nav__ausloeser { list-style: none; } .nav__ausloeser::-webkit-details-marker { display: none; } .nav__ausloeser .icon { transition: rotate var(--dauer) var(--kurve); --icon-groesse: 1rem; } .nav__gruppe[open] > .nav__ausloeser .icon { rotate: 180deg; } .nav__link:hover, .nav__ausloeser:hover { background: var(--farbe-flaeche-2); } .nav__link[aria-current="page"], .nav__gruppe:has([aria-current="page"]) > .nav__ausloeser { color: var(--farbe-marke); box-shadow: inset 0 -2px 0 var(--farbe-marke); } .nav__panel-titel { font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-leise); padding: var(--abstand-3) var(--abstand-3) var(--abstand-1); } .nav__panel-link { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem var(--abstand-3); align-items: start; padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius-m); color: var(--farbe-text); text-decoration: none; } .nav__panel-link .icon { grid-row: span 2; margin-block-start: 0.15rem; color: var(--farbe-marke); --icon-groesse: 1.25rem; } .nav__panel-link:hover { background: var(--farbe-flaeche-2); } .nav__panel-link[aria-current="page"] { background: var(--farbe-marke-zart); } .nav__panel-name { font-weight: var(--gewicht-stark); line-height: 1.35; } .nav__panel-text { grid-column: 2; font-size: var(--text-s); line-height: 1.4; color: var(--farbe-text-leise); } /* Zweite Überschrift in derselben Spalte (Lösungen: „Für Privatpersonen“ unter „Nach Rolle“) */ .nav__panel-liste + .nav__panel-titel { margin-block-start: var(--abstand-2); } .nav__panel-fuss { border-block-start: var(--rahmen-breite) solid var(--farbe-linie); margin-block-start: var(--abstand-2); padding: var(--abstand-3); display: flex; flex-wrap: wrap; gap: var(--abstand-6) var(--abstand-5); } .nav__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); } .nav__anmelden { display: inline-flex; align-items: center; gap: var(--abstand-2); } /* Mobil: Disclosure-Panel unter der Kopfzeile */ @media (width < 64rem) { :root.js .nav { position: fixed; inset-inline: 0; inset-block-start: var(--menue-oben, var(--kopf-hoehe)); inset-block-end: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--abstand-4) var(--rand) var(--abstand-8); background: var(--farbe-grund); border-block-start: var(--rahmen-breite) solid var(--farbe-linie); display: none; } :root.js .kopf[data-offen] .nav { display: block; } /* backdrop-filter würde das fixierte Panel an die Kopfzeile binden */ :root.js .kopf[data-offen] { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--farbe-grund); } :root.no-js .kopf { position: relative; } :root.no-js .kopf__innen { flex-wrap: wrap; } :root.no-js .nav { flex-basis: 100%; padding-block-end: var(--abstand-4); } .nav__liste > li + li { border-block-start: var(--rahmen-breite) solid var(--farbe-linie); } .nav__link, .nav__ausloeser { font-size: var(--text-l); padding-inline: var(--abstand-1); border-radius: 0; } .nav__link[aria-current="page"], .nav__gruppe:has([aria-current="page"]) > .nav__ausloeser { box-shadow: inset 3px 0 0 var(--farbe-marke); padding-inline-start: var(--abstand-3); } .nav__panel { padding-block-end: var(--abstand-3); } .nav__panel-link { padding-inline: var(--abstand-2); } .nav__panel-raster { display: grid; gap: var(--abstand-1); } .nav__aktionen { margin-block-start: var(--abstand-5); flex-direction: column-reverse; align-items: stretch; } .nav__aktionen .knopf { inline-size: 100%; min-block-size: 3rem; font-size: var(--text-m); } .nav__anmelden { display: flex; justify-content: center; min-block-size: 2.75rem; color: var(--farbe-text); font-weight: 600; text-decoration: none; } } :root.menue-offen body { overflow: hidden; } /* Desktop: waagrechte Navigation, Mega-Dropdowns */ @media (width >= 64rem) { .kopf__menue-knopf { display: none; } /* flex-wrap: Bei größeren Text- und Buchstabenabständen (WCAG 1.4.12) oder größerer Schrift rücken Menüpunkte und Aktionen in eine zweite Zeile, statt über den rechten Rand hinauszuragen. Im Normalfall bleibt alles einzeilig. */ .nav { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-1) var(--abstand-4); } .nav__liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1); margin-inline-start: var(--abstand-5); } .nav__link, .nav__ausloeser { font-size: var(--text-s); padding-inline: var(--abstand-3); min-block-size: 2.5rem; justify-content: flex-start; } .nav__link, .nav__ausloeser, .nav__anmelden, .nav__aktionen .knopf { white-space: nowrap; } .nav__gruppe { position: static; } .nav__panel { position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%; translate: -50% 0; inline-size: min(54rem, 100% - 2 * var(--rand)); padding: var(--abstand-4); background: var(--farbe-flaeche); border: var(--rahmen-breite) solid var(--farbe-linie); border-radius: var(--karte-radius); box-shadow: var(--schatten-3); opacity: 1; transition: opacity var(--dauer) var(--kurve), translate var(--dauer) var(--kurve); /* Niedrige Fenster (z. B. 1366 × 768 bei 110 % Zoom): Das Panel hängt in der klebenden Kopfzeile und ließe sich weder mit der Seite noch für sich scrollen – Links unten lägen mit Fokus außerhalb des Fensters (WCAG 2.4.7, 2.4.11, 1.4.4). Darum endet es 1,25rem über dem unteren Fensterrand und scrollt selbst; der Fokus holt den Link ins Bild. Oberkante = Kopf (4rem + Kanten + Mehrhöhe) + 0,5rem. scroll-padding: Fokusrahmen bleibt ganz. */ max-block-size: calc(100dvh - var(--kopf-hoehe) - 2rem - var(--kopf-mehr)); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--abstand-3); } @starting-style { .nav__gruppe[open] > .nav__panel { opacity: 0; translate: -50% -0.375rem; } } .nav__panel-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--abstand-1) var(--abstand-3); } .nav__panel-raster--3 { grid-template-columns: repeat(3, 1fr); } .nav__panel-spalte { display: grid; align-content: start; gap: var(--abstand-1); } .nav__aktionen { flex-wrap: nowrap; } .nav__anmelden { font-size: var(--text-s); font-weight: 550; color: var(--farbe-text); text-decoration: none; padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius-s); } .nav__anmelden:hover { background: var(--farbe-flaeche-2); } } /* Schmaler Desktop (64–80rem): Navigation enger setzen, damit nichts umbricht oder an das Logo stößt */ @media (64rem <= width < 80rem) { .nav__liste { gap: 0; margin-inline-start: var(--abstand-4); } .nav__link, .nav__ausloeser, .nav__anmelden { padding-inline: var(--abstand-2); } } /* ---------- Knöpfe ---------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-block-size: var(--knopf-hoehe); padding: 0.5rem 1.25rem; border: var(--rahmen-breite) solid transparent; border-radius: var(--knopf-radius); font-family: var(--schrift-text); font-size: var(--text-m); font-weight: var(--knopf-gewicht); letter-spacing: var(--knopf-laufweite); text-transform: var(--knopf-transform); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); -webkit-tap-highlight-color: transparent; } .knopf .icon { --icon-groesse: 1.125rem; transition: translate var(--dauer) var(--kurve); } .knopf:hover .icon--pfeil { translate: 0.2rem 0; } .knopf--primaer { background: var(--farbe-marke); color: var(--farbe-marke-kontrast); } .knopf--primaer:hover { background: var(--farbe-marke-hover); } .knopf--sekundaer { background: var(--farbe-flaeche); color: var(--farbe-text); border-color: var(--farbe-linie-stark); } .knopf--sekundaer:hover { background: var(--farbe-flaeche-2); border-color: var(--farbe-text); } .sektion--dunkel .knopf--sekundaer, .dunkel .knopf--sekundaer { background: transparent; } .knopf--ghost { background: transparent; color: var(--farbe-marke); } .knopf--ghost:hover { background: var(--farbe-marke-zart); } .knopf--akzent { background: var(--farbe-akzent); color: var(--farbe-akzent-kontrast); } .knopf--klein { min-block-size: 2.25rem; padding: 0.25rem 0.875rem; font-size: var(--text-s); } .knopf--gross { min-block-size: 3.25rem; padding: 0.75rem 1.75rem; font-size: var(--text-l); } .knopf--block { inline-size: 100%; } .knopf[aria-disabled="true"], .knopf:disabled { opacity: 0.55; cursor: not-allowed; } /* Während des Sendens bleibt der Absendeknopf fokussiert (aria-disabled, website.js); die Deckkraft würde auch den Fokusrahmen unter 3 : 1 drücken (WCAG 2.4.7, 1.4.11). */ .knopf[aria-disabled="true"]:focus-visible { opacity: 1; } /* Textlink mit Pfeil: inline statt inline-flex, damit ein umbrechender Link wie Fließtext umbricht und der Pfeil direkt hinter dem letzten Wort steht (nicht abgesetzt am rechten Rand). Gegen einen allein umbrechenden Pfeil klebt das Bauskript das letzte Wort und den Pfeil zusammen: Wort  (bei .textlink--zurueck Pfeil und erstes Wort). Im Baustein genügt „Text “. */ .textlink { display: inline; color: var(--farbe-link); font-weight: var(--gewicht-stark); text-decoration: none; } .textlink__ende { white-space: nowrap; } .textlink:hover { text-decoration: underline; text-decoration-thickness: 2px; } .textlink .icon { --icon-groesse: 1.05em; margin-inline-start: 0.125em; transition: translate var(--dauer) var(--kurve); } .textlink--zurueck .icon { margin-inline: 0 0.125em; } .textlink:hover .icon { translate: 0.2rem 0; } .textlink--zurueck:hover .icon { translate: -0.2rem 0; } /* ---------- Chips / Status ---------- */ .chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border: var(--rahmen-breite) solid var(--chip-rand, transparent); border-radius: var(--chip-radius); background: var(--chip-grund, var(--farbe-flaeche-2)); color: var(--chip-text, var(--farbe-text)); font-size: var(--text-xs); font-weight: 600; line-height: 1.45; letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle; } .chip .icon { --icon-groesse: 0.95rem; } .chip__punkt { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Status-Etiketten: .chip--verfuegbar mit Rand, .chip--geplant mit gestricheltem Rand */ .chip--verfuegbar { --chip-grund: transparent; --chip-text: var(--farbe-text); --chip-rand: var(--farbe-linie-stark); } .chip--erfolg { --chip-grund: var(--farbe-erfolg-zart); --chip-text: var(--farbe-erfolg); } .chip--info { --chip-grund: var(--farbe-info-zart); --chip-text: var(--farbe-info); } .chip--geplant { --chip-grund: transparent; --chip-text: var(--farbe-text-leise); --chip-rand: var(--farbe-linie-stark); border-style: dashed; } .chip--warnung { --chip-grund: var(--farbe-warnung-zart); --chip-text: var(--farbe-warnung); } .chip--fehler { --chip-grund: var(--farbe-fehler-zart); --chip-text: var(--farbe-fehler); } .chip--marke { --chip-grund: var(--farbe-marke-zart); --chip-text: var(--farbe-marke); } .chip--neutral { --chip-grund: var(--farbe-flaeche-2); --chip-text: var(--farbe-text-leise); } .chip--rand { --chip-grund: transparent; --chip-rand: var(--farbe-linie); } .chips { display: flex; flex-wrap: wrap; gap: var(--abstand-2); list-style: none; padding: 0; } /* Chip als Link (Sprungnavigation „Auf dieser Seite“): Zielgröße siehe Abschnitt Touch-Ziele */ a.chip { min-block-size: 2rem; text-decoration: none; --chip-rand: var(--farbe-linie-stark); } a.chip:hover { --chip-rand: var(--farbe-marke); --chip-text: var(--farbe-marke); } /* ---------- Platzhalter-Kennzeichnung ---------- */ .platzhalter { display: inline; padding: 0.05em 0.35em; border-radius: 3px; background: repeating-linear-gradient(135deg, #fff4cc 0 6px, #ffecb0 6px 12px); color: #5c3d00; font-family: var(--schrift-mono); font-size: 0.85em; font-weight: 500; font-style: normal; letter-spacing: 0; text-transform: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; hyphens: manual; -webkit-hyphens: manual; } /* ---------- Karten ---------- */ .karte { position: relative; display: flex; flex-direction: column; gap: var(--abstand-3); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--farbe-flaeche); border: var(--karte-rand); border-radius: var(--karte-radius); box-shadow: var(--karte-schatten); color: var(--farbe-text); container-type: inline-size; transition: box-shadow var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), translate var(--dauer) var(--kurve); } .karte__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-3); } .karte__titel { font-size: var(--text-l); line-height: var(--zeilenhoehe-eng); } .karte__text { color: var(--farbe-text-leise); } .karte__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--text-xs); color: var(--farbe-text-leise); } .karte__fuss { margin-block-start: auto; padding-block-start: var(--abstand-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3); } .karte__liste { list-style: none; padding: 0; display: grid; gap: var(--abstand-2); font-size: var(--text-s); } /* Ganze Karte klickbar: Link im Titel spannt sich auf (ein Tab-Stopp) */ .karte--link .karte__titel a { color: inherit; text-decoration: none; } .karte--link .karte__titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; } .karte--link .karte__titel a:focus-visible { outline: none; } .karte--link:has(.karte__titel a:focus-visible) { outline: var(--fokus-breite) solid var(--farbe-fokus); outline-offset: var(--fokus-abstand); } .karte--link:hover { box-shadow: var(--karte-schatten-hover); border-color: var(--farbe-linie-stark); } .karte--link:hover .textlink .icon { translate: 0.2rem 0; } .karte--feature .icon-box { margin-block-end: var(--abstand-1); } .karte--rolle { gap: var(--abstand-4); } .karte--rolle .karte__rolle { font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-akzent); } .karte--rolle .karte__fragen { list-style: none; padding: 0; display: grid; gap: var(--abstand-2); } .karte--rolle .karte__fragen li { padding-inline-start: 1.5rem; position: relative; font-size: var(--text-s); } .karte--rolle .karte__fragen li::before { content: "?"; position: absolute; inset-inline-start: 0; inset-block-start: 0.1em; inline-size: 1.05rem; block-size: 1.05rem; display: grid; place-items: center; border-radius: 50%; background: var(--farbe-marke-zart); color: var(--farbe-marke); font-size: 0.7rem; font-weight: 700; } .karte--branche .karte__titel { font-size: var(--text-xl); } .karte--artikel .karte__titel { font-size: var(--text-l); } .karte--flach { box-shadow: none; } .karte--getoent { background: var(--farbe-getoent); border-color: transparent; box-shadow: none; } .karte--hervor { border: 2px solid var(--farbe-marke); } /* Produktausschnitt am Kartenende: in Rasterreihen auf gleicher Höhe beginnen */ .karte > figure:last-child { margin-block-start: auto; } /* ---------- Listen mit Haken ---------- */ .liste-haken { list-style: none; padding: 0; display: grid; gap: var(--abstand-2); } .liste-haken > li { position: relative; padding-inline-start: 1.85rem; } .liste-haken > li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.2em; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; background-color: var(--farbe-akzent-zart); } .liste-haken > li::after { content: ""; position: absolute; inset-inline-start: 0.2rem; inset-block-start: calc(0.2em + 0.2rem); inline-size: 0.8rem; block-size: 0.8rem; background: var(--farbe-akzent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.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='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; } .liste-nein > li::before { background-color: var(--farbe-flaeche-2); } .liste-nein > li::after { background: var(--farbe-text-leise); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%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='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); } /* ---------- Hero ---------- */ .hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--sektion-abstand); background-color: var(--farbe-grund); background-image: var(--hero-hintergrund); color: var(--farbe-text); overflow: clip; } .hero__raster { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); align-items: center; } @media (width >= 64rem) { .hero__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } .hero--zentriert .hero__raster { grid-template-columns: 1fr; text-align: center; justify-items: center; } } .hero__text { display: flex; flex-direction: column; gap: var(--abstand-5); max-inline-size: 40rem; } .hero--zentriert .hero__text { align-items: center; max-inline-size: 48rem; } /* Unter 64rem begrenzt --titel-grenze. Am Desktop (zweispaltig, Textspalte max. 40rem) passen Wörter bis ca. 14–16 Zeichen; längere Wörter im Hero-Titel mit ­ versehen. */ .hero__titel { font-size: min(var(--text-5xl), var(--titel-grenze)); } .hero__titel em { font-style: normal; color: var(--farbe-marke); } .hero__lead { font-size: var(--text-l); line-height: 1.55; color: var(--farbe-text-leise); } .hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-3); } .hero__hinweis { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-4); font-size: var(--text-s); color: var(--farbe-text-leise); list-style: none; padding: 0; } .hero__hinweis li { display: inline-flex; align-items: center; gap: var(--abstand-2); } .hero__hinweis .icon { color: var(--farbe-akzent); } .hero__visual { position: relative; min-inline-size: 0; } @media (width < 30rem) { .hero__aktionen .knopf, .cta-band__aktionen .knopf { inline-size: 100%; } } .hero--klein { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(2rem, 1.5rem + 3vw, 4rem); } .hero--klein .hero__titel { font-size: min(var(--text-4xl), var(--titel-grenze)); } /* ---------- Seitenkopf für Unterseiten ---------- */ .seitenkopf { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1.5rem + 3vw, 4rem); } .seitenkopf__titel { font-size: min(var(--text-4xl), var(--titel-grenze)); max-inline-size: 22ch; } .seitenkopf .lead { margin-block-start: var(--abstand-4); } /* Seitenkopf mit optionalem Seitenelement (Quellenbox, Kennzahl, kleiner Produktausschnitt). Aufbau: .seitenkopf.seitenkopf--mit-aside > .container.stapel > nav.brotkrumen + .seitenkopf__raster > .seitenkopf__text.stapel (+ optional aside.seitenkopf__aside). Desktop zweispaltig nur, wenn das Seitenelement vorhanden ist; sonst einspaltig und schmal (keine leere Hälfte). Mobil steht das Seitenelement unter dem Text. */ .seitenkopf__raster { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .seitenkopf__text, .seitenkopf__aside { min-inline-size: 0; } .seitenkopf__raster:not(:has(> .seitenkopf__aside)) > .seitenkopf__text { max-inline-size: var(--breite-schmal); } .seitenkopf__aside > * + * { margin-block-start: var(--abstand-4); } @media (width >= 64rem) { .seitenkopf__raster:has(> .seitenkopf__aside) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 1rem + 3vw, 4.5rem); } } /* ---------- Brotkrumen ---------- */ .brotkrumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; list-style: none; padding: 0; font-size: var(--text-s); color: var(--farbe-text-leise); } .brotkrumen li { display: inline-flex; align-items: center; gap: 0.5rem; } .brotkrumen li + li::before { content: ""; inline-size: 0.4rem; block-size: 0.4rem; border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; rotate: 45deg; opacity: 0.6; } .brotkrumen a { color: inherit; text-decoration: none; display: inline-block; padding-block: 0.25rem; } .brotkrumen a:hover { color: var(--farbe-link); text-decoration: underline; } .brotkrumen [aria-current="page"] { color: var(--farbe-text); font-weight: 550; } /* ---------- Prozessschritte ---------- */ .schritte { list-style: none; padding: 0; display: grid; align-content: start; gap: var(--abstand-5); counter-reset: schritt; } .schritt { position: relative; display: grid; align-content: start; grid-template-columns: auto 1fr; gap: var(--abstand-1) var(--abstand-4); counter-increment: schritt; } .schritt__nr { grid-row: span 3; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--farbe-marke); color: var(--farbe-marke-kontrast); font-weight: 700; font-variant-numeric: tabular-nums; position: relative; z-index: 1; } .schritt__nr:empty::before { content: counter(schritt); } .schritt:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: calc(1.25rem - 1px); inset-block: 2.75rem calc(-1 * var(--abstand-5) + 0.25rem); inline-size: 2px; background: var(--farbe-linie); } .schritt__titel { font-size: var(--text-l); padding-block-start: 0.35rem; } .schritt__text { color: var(--farbe-text-leise); } .schritt__wer { font-size: var(--text-xs); font-weight: 650; color: var(--farbe-akzent); letter-spacing: 0.04em; text-transform: uppercase; } .schritt--nutzer .schritt__nr { background: var(--farbe-flaeche); color: var(--farbe-marke); box-shadow: inset 0 0 0 2px var(--farbe-marke); } /* Formregel: Quadrat = Software (Standard), Kreis = Sie/Ihr Team (.schritt--nutzer), Raute = andere Beteiligte wie Gericht, Gerichtsvollzieher, Drittschuldner oder wir als Anbieter (.schritt--andere). Listen ohne Beteiligte (Rechenschritte, Reihenfolgen) tragen .schritte--neutral: Ziffer ohne Form. Die Bedeutung steht immer zusätzlich im Text (.schritt__wer), die Form ergänzt nur. */ .schritt--andere .schritt__nr { background: var(--farbe-flaeche); color: var(--farbe-text); box-shadow: inset 0 0 0 2px var(--farbe-text-leise); } .schritte--neutral .schritt__nr { background: transparent; color: var(--farbe-marke); box-shadow: none; } @media (width >= 64rem) { .schritte--quer { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--abstand-5); } .schritte--quer .schritt { grid-template-columns: 1fr; gap: var(--abstand-3); } .schritte--quer .schritt__nr { grid-row: auto; } .schritte--quer .schritt:not(:last-child)::before { inset-block: calc(1.25rem - 1px) auto; inset-inline: 3rem calc(-1 * var(--abstand-5) + 0.5rem); inline-size: auto; block-size: 2px; } } /* ---------- Zeitstrahl ---------- */ .zeitstrahl { list-style: none; padding: 0; display: grid; align-content: start; gap: 0; } .zeitstrahl__eintrag { position: relative; display: grid; grid-template-columns: 1.25rem 1fr; gap: 0 var(--abstand-4); padding-block-end: var(--abstand-6); } .zeitstrahl__eintrag::before { content: ""; grid-row: 1 / span 3; margin-block-start: 0.3rem; inline-size: 1rem; block-size: 1rem; border-radius: 50%; border: 2px solid var(--farbe-marke); background: var(--farbe-grund); position: relative; z-index: 1; } .zeitstrahl__eintrag:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(0.5rem - 1px); inset-block: 1.4rem 0; inline-size: 2px; background: var(--farbe-linie); } .zeitstrahl__eintrag--erledigt::before { background: var(--farbe-marke); } .zeitstrahl__eintrag--aktuell::before { background: var(--farbe-akzent); border-color: var(--farbe-akzent); box-shadow: 0 0 0 4px var(--farbe-akzent-zart); } .zeitstrahl__eintrag--geplant::before { border-style: dashed; border-color: var(--farbe-linie-stark); } .zeitstrahl__datum { font-size: var(--text-s); font-weight: 650; color: var(--farbe-text-leise); font-variant-numeric: tabular-nums; } .zeitstrahl__titel { font-size: var(--text-l); margin-block: 0.15rem 0.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); } .zeitstrahl__text { color: var(--farbe-text-leise); } /* ---------- Tabellen ---------- */ .tabelle { inline-size: 100%; font-size: var(--text-s); font-variant-numeric: var(--zahlen-stil); } .tabelle-scroll .tabelle caption { padding: 0.75rem 0.875rem 0.25rem; } .tabelle caption { text-align: start; font-weight: var(--gewicht-stark); padding-block-end: var(--abstand-3); color: var(--farbe-text); } .tabelle :is(th, td) { padding: 0.75rem 0.875rem; text-align: start; vertical-align: top; border-block-end: var(--rahmen-breite) solid var(--farbe-linie); } .tabelle thead th { background: var(--farbe-flaeche-2); font-weight: 650; font-size: var(--text-xs); letter-spacing: 0.03em; text-transform: uppercase; color: var(--farbe-text-leise); white-space: nowrap; } .tabelle tbody th { font-weight: var(--gewicht-stark); } .tabelle tfoot :is(th, td) { font-weight: 700; border-block-end: 0; border-block-start: 2px solid var(--farbe-text); } /* Sehr schmal (320 px): weniger Innenabstand, damit Kopfzellen in Versalien (nowrap) nicht über den Rand ragen */ @media (width < 22.5rem) { .tabelle :is(th, td) { padding-inline: 0.625rem; } } /* Beträge rechtsbündig mit gleich breiten Ziffern (schlägt .tabelle :is(th, td) { text-align: start }) */ .tabelle :is(th, td).zahl, .vergleich :is(th, td).zahl { text-align: end; white-space: nowrap; font-family: var(--schrift-zahl); font-variant-numeric: var(--zahlen-stil); } /* Summenzeile: Strich darüber, doppelter Abschlussstrich darunter */ .tabelle tr.summe > :is(th, td) { font-weight: 700; border-block-start: var(--rahmen-breite) solid var(--farbe-text); border-block-end: 3px double var(--farbe-text); } .tabelle .ja { color: var(--farbe-erfolg); font-weight: 600; } .tabelle .nein { color: var(--farbe-text-leise); } /* Waagrecht scrollbar mit Hinweis (Hinweis erscheint nur bei Überlauf; JS setzt .ist-ueberlaeuft) */ .tabelle-scroll { position: relative; } .tabelle-scroll__innen { overflow-x: auto; border: var(--rahmen-breite) solid var(--farbe-linie); border-radius: var(--radius-m); background: var(--farbe-flaeche); background-image: linear-gradient(to right, var(--farbe-flaeche), var(--farbe-flaeche)), linear-gradient(to left, var(--farbe-flaeche), var(--farbe-flaeche)), linear-gradient(to right, rgb(0 0 0 / 0.12), transparent), linear-gradient(to left, rgb(0 0 0 / 0.12), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 1.5rem 100%, 1.5rem 100%, 0.75rem 100%, 0.75rem 100%; background-attachment: local, local, scroll, scroll; } .tabelle-scroll__innen:focus-visible { outline-offset: 2px; } .tabelle-scroll .tabelle { min-inline-size: 36rem; } .tabelle-scroll__hinweis { display: none; align-items: center; gap: var(--abstand-2); font-size: var(--text-xs); color: var(--farbe-text-leise); margin-block-end: var(--abstand-2); } .tabelle-scroll.ist-ueberlaeuft .tabelle-scroll__hinweis { display: flex; } :root.no-js .tabelle-scroll__hinweis { display: flex; } /* Vergleich: Desktop Tabelle, mobil Karten (td braucht data-label) */ .vergleich { inline-size: 100%; font-size: var(--text-s); } .vergleich :is(th, td) { padding: 0.875rem 1rem; text-align: start; vertical-align: top; } .vergleich thead th { font-size: var(--text-s); font-weight: 700; border-block-end: 2px solid var(--farbe-text); } .vergleich thead th.vergleich__wir { color: var(--farbe-marke); } .vergleich tbody tr { border-block-end: var(--rahmen-breite) solid var(--farbe-linie); } .vergleich tbody th { font-weight: 650; } .vergleich .vergleich__wir { background: var(--farbe-marke-zart); } @media (width < 48rem) { .vergleich, .vergleich tbody, .vergleich tr, .vergleich th, .vergleich td { display: block; } .vergleich thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .vergleich tbody { display: grid; gap: var(--abstand-4); } .vergleich tbody tr { border: var(--karte-rand); border-radius: var(--karte-radius); background: var(--farbe-flaeche); overflow: hidden; } .vergleich tbody th { background: var(--farbe-flaeche-2); font-size: var(--text-m); } .vergleich td { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: var(--abstand-3); border-block-start: var(--rahmen-breite) solid var(--farbe-linie); } .vergleich td::before { content: attr(data-label); font-weight: 650; color: var(--farbe-text-leise); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; padding-block-start: 0.15rem; } .vergleich td.zahl { text-align: start; } } /* Sehr schmal: Beschriftung über dem Wert statt daneben */ @media (width < 30rem) { .vergleich td { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; } } .vergleich caption:not(.visuell-versteckt) { caption-side: top; text-align: start; font-weight: 700; font-size: var(--text-m); padding-block-end: var(--abstand-3); } @media (width < 48rem) { .vergleich caption:not(.visuell-versteckt) { display: block; inline-size: 100%; } } /* Folgekostenrechner (folgekostenrechner.html, website.js Abschnitt g) */ .folgekosten__summe { font-size: var(--text-xl); font-variant-numeric: tabular-nums; } /* Einrückung zeigt, welche Felder zu welchem Weg gehören; .feldgruppe[…] schlägt .feldgruppe { padding: 0 } weiter unten */ [data-abhaengig], .feldgruppe[data-abhaengig] { padding-inline-start: 2rem; } [data-abhaengig].ist-inaktiv { opacity: 0.55; } .folgekosten__quelle, .folgekosten__nr { font-weight: 400; } .folgekosten__quelle { margin-block-start: var(--abstand-1); } /* Ergebnis-Überschrift bekommt den Fokus nur programmatisch (tabindex -1): kein Rahmen */ .folgekosten-ergebnis-titel:focus { outline: none; } /* Kontaktformular gesendet: ohne JS über die Sprungmarke (?gesendet=1#kontakt-gesendet), mit JS per .ist-sichtbar */ .hinweis.kontakt-gesendet { display: none; } .hinweis.kontakt-gesendet:is(:target, .ist-sichtbar) { display: grid; } .kontakt-gesendet:focus { outline: none; } /* Summe außerhalb von Tabellen (z. B. unter einer Liste):

Restsaldo 2.390,76 €

*/ .summe:not(tr) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--abstand-1) var(--abstand-4); padding-block: var(--abstand-2); border-block-start: var(--rahmen-breite) solid var(--farbe-text); border-block-end: 3px double var(--farbe-text); font-weight: 700; font-variant-numeric: var(--zahlen-stil); } .summe:not(tr) .zahl { font-family: var(--schrift-zahl); } /* ---------- Akkordeon (details/summary, ohne JS) ---------- */ .akkordeon { border-block-start: var(--rahmen-breite) solid var(--farbe-linie); } .akkordeon__eintrag { border-block-end: var(--rahmen-breite) solid var(--farbe-linie); interpolate-size: allow-keywords; } .akkordeon__frage { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); padding-block: var(--abstand-4); min-block-size: 3rem; font-weight: var(--gewicht-stark); font-size: var(--text-l); line-height: var(--zeilenhoehe-eng); cursor: pointer; list-style: none; } .akkordeon__frage::-webkit-details-marker { display: none; } .akkordeon__frage::after { content: ""; flex-shrink: 0; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--farbe-flaeche-2) center / 0.9rem no-repeat; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 0.75rem 2px, 2px 0.75rem; background-position: center; transition: rotate var(--dauer) var(--kurve), background-size var(--dauer) var(--kurve); } .akkordeon__eintrag[open] > .akkordeon__frage::after { background-size: 0.75rem 2px, 2px 0; rotate: 180deg; } .akkordeon__frage:hover { color: var(--farbe-marke); } .akkordeon__antwort { padding-block-end: var(--abstand-5); color: var(--farbe-text-leise); max-inline-size: var(--breite-text); } .akkordeon__antwort > * + * { margin-block-start: 0.75em; } .akkordeon__eintrag::details-content { block-size: 0; overflow: clip; transition: block-size var(--dauer-lang) var(--kurve), content-visibility var(--dauer-lang) allow-discrete; } .akkordeon__eintrag[open]::details-content { block-size: auto; } /* ---------- Artikel-Layout mit Inhaltsverzeichnis ---------- */ .artikel-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-6); } @media (width >= 64rem) { .artikel-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; } .artikel-layout > .inhaltsverzeichnis { position: sticky; inset-block-start: calc(var(--kopf-hoehe) + 1.5rem + var(--kopf-mehr)); max-block-size: calc(100dvh - var(--kopf-hoehe) - 3rem - var(--kopf-mehr)); overflow-y: auto; } /* Der Scrollbereich schneidet alles außerhalb seiner Fläche ab; die Links sind so breit wie er. Ein äußerer Fokusrahmen fehlte deshalb links und rechts, am Rand des Bereichs auch oben oder unten (WCAG 2.4.7, 1.4.11). Hier liegt der Rahmen innen: vollständig sichtbar, sobald der Link im Bild ist. */ .artikel-layout > .inhaltsverzeichnis a:focus-visible { outline-offset: calc(-1 * var(--fokus-breite)); } } .inhaltsverzeichnis { font-size: var(--text-s); } .inhaltsverzeichnis__titel { font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-leise); margin-block-end: var(--abstand-3); } .inhaltsverzeichnis__liste { list-style: none; padding: 0; display: grid; gap: 0.125rem; border-inline-start: 2px solid var(--farbe-linie); } .inhaltsverzeichnis__liste a { display: block; padding: 0.375rem 0.75rem; margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--farbe-text-leise); text-decoration: none; line-height: 1.4; } .inhaltsverzeichnis__liste a:hover { color: var(--farbe-text); border-inline-start-color: var(--farbe-linie-stark); } .inhaltsverzeichnis__liste a[aria-current="true"] { color: var(--farbe-marke); border-inline-start-color: var(--farbe-marke); font-weight: 600; } @media (width < 64rem) { .inhaltsverzeichnis { padding: var(--abstand-4); background: var(--farbe-flaeche-2); border-radius: var(--radius-m); } } .artikel-meta { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-5); font-size: var(--text-s); color: var(--farbe-text-leise); list-style: none; padding: 0; } .artikel-meta li { display: inline-flex; align-items: center; gap: var(--abstand-2); } /* ---------- Stand-/Quellenbox ---------- */ .quellenbox { display: grid; align-content: start; /* im Raster nicht auseinanderziehen */ gap: var(--abstand-3); padding: var(--abstand-4) var(--abstand-5); background: var(--farbe-flaeche); border: var(--rahmen-breite) solid var(--farbe-linie); border-inline-start: 4px solid var(--farbe-akzent); border-radius: var(--radius-m); font-size: var(--text-s); } .quellenbox__titel { display: flex; align-items: center; gap: var(--abstand-2); font-size: var(--text-s); font-weight: 700; } .quellenbox__titel .icon { color: var(--farbe-akzent); } .quellenbox dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.375rem var(--abstand-4); margin: 0; } .quellenbox dt { font-weight: 600; color: var(--farbe-text-leise); } .quellenbox dd { margin: 0; max-inline-size: 70ch; } /* Quellenlinks stehen oft nur durch „·“ getrennt nebeneinander: Trefferfläche mind. 24 px hoch (WCAG 2.5.8). Innenabstand an Inline-Links verschiebt keine Zeilen. */ .quellenbox dd a { padding-block: 0.25em; } @media (width < 30rem) { .quellenbox dl { grid-template-columns: 1fr; gap: 0.125rem; } .quellenbox dd + dt { margin-block-start: var(--abstand-2); } } /* ---------- Hinweisboxen ---------- */ .hinweis { --hinweis-farbe: var(--farbe-info); --hinweis-grund: var(--farbe-info-zart); /* Box nicht breiter als ihr Text (70ch) + Icon + Abstände – am Desktop keine leere Fläche rechts */ max-inline-size: calc(70ch + 1.375rem + var(--abstand-3) + var(--abstand-4) + var(--abstand-5)); display: grid; grid-template-columns: auto 1fr; align-content: start; /* im Raster nicht auseinanderziehen */ gap: var(--abstand-1) var(--abstand-3); padding: var(--abstand-4) var(--abstand-5) var(--abstand-4) var(--abstand-4); background: var(--hinweis-grund); border-radius: var(--radius-m); border-inline-start: 4px solid var(--hinweis-farbe); color: var(--farbe-text); font-size: var(--text-s); } .hinweis > .icon { grid-row: span 2; color: var(--hinweis-farbe); --icon-groesse: 1.375rem; margin-block-start: 0.05rem; } .hinweis__titel { font-size: var(--text-m); font-weight: 700; color: var(--farbe-text); line-height: 1.35; } .hinweis__inhalt { grid-column: 2; max-inline-size: 70ch; } /* Zeilenlänge auch bei voller Breite lesbar */ .hinweis__titel { max-inline-size: 70ch; } .hinweis__inhalt > * + * { margin-block-start: 0.5em; } .hinweis--recht { --hinweis-farbe: var(--farbe-marke); --hinweis-grund: var(--farbe-marke-zart); } .hinweis--warnung { --hinweis-farbe: var(--farbe-warnung); --hinweis-grund: var(--farbe-warnung-zart); } .hinweis--erfolg { --hinweis-farbe: var(--farbe-erfolg); --hinweis-grund: var(--farbe-erfolg-zart); } .hinweis--fehler { --hinweis-farbe: var(--farbe-fehler); --hinweis-grund: var(--farbe-fehler-zart); } .sektion--dunkel .hinweis, .dunkel .hinweis { --hinweis-grund: var(--farbe-dunkel-flaeche); } /* ---------- Zitat-/Referenz-Platzhalter ---------- */ .zitat { display: grid; gap: var(--abstand-4); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--karte-radius); background: var(--farbe-flaeche); border: var(--karte-rand); } .zitat__text { font-size: var(--text-xl); line-height: 1.45; font-weight: 500; text-wrap: pretty; } .zitat__quelle { font-size: var(--text-s); color: var(--farbe-text-leise); font-style: normal; } .zitat--platzhalter { border: 2px dashed var(--farbe-linie-stark); background: transparent; box-shadow: none; } /* ---------- Kennzahl mit Quelle ---------- */ .kennzahl { display: grid; gap: var(--abstand-2); padding: var(--abstand-5); border-radius: var(--karte-radius); background: var(--farbe-flaeche); border: var(--karte-rand); align-content: start; } .kennzahl__wert { font-family: var(--schrift-zahl); font-variant-numeric: var(--zahlen-stil); font-size: var(--text-4xl); font-weight: var(--titel-gewicht); letter-spacing: var(--titel-laufweite); line-height: 1; color: var(--farbe-marke); } .kennzahl__einheit { font-size: 0.45em; font-weight: 600; letter-spacing: 0; margin-inline-start: 0.15em; } .kennzahl__label { font-weight: 600; line-height: 1.35; } .kennzahl__quelle { font-size: var(--text-xs); color: var(--farbe-text-leise); } /* Große Kennzahl: kräftige Linie darüber, Wert sehr groß, Fundstelle darunter.

30Jahre

…

§ 197 Abs. 1 Nr. 3 BGB · Stand 14.10.2026

*/ .kennzahl--gross { gap: var(--abstand-3); padding: var(--abstand-4) 0 0; background: transparent; border: 0; border-block-start: 0.375rem solid var(--farbe-marke); border-radius: 0; box-shadow: none; } .kennzahl--gross .kennzahl__wert { font-size: min(var(--text-5xl), var(--titel-grenze)); color: var(--farbe-text); } .kennzahl--gross .kennzahl__label { font-size: var(--text-l); max-inline-size: 30ch; } .kennzahl--gross .kennzahl__quelle { font-size: var(--text-s); padding-block-start: var(--abstand-2); border-block-start: var(--rahmen-breite) solid var(--farbe-linie); } /* ---------- Formularstand: geltende Fassungen mit Fundstelle ---------- */ .formularstand { display: grid; gap: var(--abstand-3); padding: var(--abstand-4) var(--abstand-5); background: var(--farbe-flaeche); border: var(--rahmen-breite) solid var(--farbe-linie); border-block-start: 3px solid var(--farbe-akzent); border-radius: var(--radius-m); font-size: var(--text-s); container: formularstand / inline-size; } .formularstand__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--abstand-1) var(--abstand-4); } .formularstand__titel { display: flex; align-items: center; gap: var(--abstand-2); font-weight: 700; font-size: var(--text-m); } .formularstand__titel .icon { color: var(--farbe-akzent); } .formularstand__stand { color: var(--farbe-text-leise); font-variant-numeric: var(--zahlen-stil); } .formularstand__liste { list-style: none; padding: 0; margin: 0; display: grid; } .formularstand__zeile { display: grid; gap: var(--abstand-1) var(--abstand-4); padding-block: var(--abstand-3); border-block-start: var(--rahmen-breite) solid var(--farbe-linie); } .formularstand__anlage { font-weight: 700; white-space: nowrap; } .formularstand__name { line-height: 1.4; } .formularstand__text { color: var(--farbe-text-leise); max-inline-size: 70ch; } .formularstand__daten dd .platzhalter { white-space: normal; } /* schmal: Beschriftung links, Wert rechts (drei kurze Zeilen); breit: drei Spalten, Beschriftung über dem Wert */ .formularstand__daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 0.125rem var(--abstand-3); margin: 0; } .formularstand__daten div { display: contents; } .formularstand__daten dt { font-size: var(--text-xs); font-weight: 600; color: var(--farbe-text-leise); text-transform: uppercase; letter-spacing: 0.04em; } /* Werte dürfen nur in der schmalen Karte umbrechen (320 px: „BGBl. 2026 I Nr. 132“ ragte sonst über den Rand) */ .formularstand__daten dd { margin: 0; font-weight: 550; font-variant-numeric: var(--zahlen-stil); } .formularstand__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2) var(--abstand-4); padding-block-start: var(--abstand-3); border-block-start: var(--rahmen-breite) solid var(--farbe-linie); color: var(--farbe-text-leise); } .formularstand__fuss p { max-inline-size: 70ch; } /* Breit (ab 40rem Kartenbreite): eine Zeile je Anlage; schmal (mobil, Seitenspalte): gestapelt */ @container formularstand (min-width: 40rem) { .formularstand__zeile { grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: baseline; } .formularstand__daten { grid-template-columns: 10rem 8.5rem 6.5rem; grid-template-rows: auto auto; grid-auto-flow: column; gap: 0 var(--abstand-4); } .formularstand__daten dd { white-space: nowrap; } } /* ---------- Kurzantworten: 2 × 2 Fragenkarten ---------- */ .kurzantworten { display: grid; gap: var(--raster-luecke); grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; } @media (width >= 40rem) { .kurzantworten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kurzantwort { display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-4) var(--abstand-5); background: var(--farbe-flaeche); border: var(--karte-rand); border-inline-start: 3px solid var(--farbe-marke); border-radius: var(--radius-m); } .kurzantwort__frage { font-size: var(--text-m); font-weight: 700; line-height: 1.35; letter-spacing: 0; } .kurzantwort__text { font-size: var(--text-s); color: var(--farbe-text-leise); line-height: 1.5; } .kurzantwort .textlink { font-size: var(--text-s); margin-block-start: auto; align-self: flex-start; } /* ---------- Formulare ---------- */ .formular { display: grid; gap: var(--abstand-5); max-inline-size: 40rem; } .formular__raster { display: grid; gap: var(--abstand-5); } @media (width >= 40rem) { .formular__raster--2 { grid-template-columns: 1fr 1fr; } } .formular__pflicht-hinweis { font-size: var(--text-s); color: var(--farbe-text-leise); } .feld { display: grid; gap: 0.375rem; align-content: start; } .feld__label { font-weight: 600; font-size: var(--text-s); line-height: 1.35; color: var(--farbe-text); } .feld__pflicht { font-weight: 500; color: var(--farbe-text-leise); font-size: var(--text-xs); margin-inline-start: 0.25rem; } .feld__hilfe { font-size: var(--text-xs); color: var(--farbe-text-leise); line-height: 1.45; } .feld__fehler { display: flex; align-items: flex-start; gap: 0.375rem; font-size: var(--text-s); font-weight: 600; color: var(--farbe-fehler); line-height: 1.4; } .feld__fehler:empty { display: none; } .feld__fehler .icon { --icon-groesse: 1rem; margin-block-start: 0.1rem; } .eingabe { inline-size: 100%; min-block-size: 3rem; padding: 0.625rem 0.875rem; background: var(--farbe-flaeche); color: var(--farbe-text); border: var(--rahmen-breite) solid var(--farbe-linie-stark); border-radius: var(--eingabe-radius); font-size: var(--text-m); line-height: 1.4; transition: border-color var(--dauer-kurz), box-shadow var(--dauer-kurz); } .eingabe::placeholder { color: color-mix(in oklab, var(--farbe-text-leise) 75%, transparent); } .eingabe:hover { border-color: var(--farbe-text); } /* Deckender Fokusrahmen wie bei allen Bedienelementen (3 px, mind. 3 : 1 zum Umfeld, WCAG 2.4.7, 1.4.11). */ .eingabe:focus-visible { border-color: var(--farbe-fokus); outline: var(--fokus-breite) solid var(--farbe-fokus); outline-offset: 1px; } .eingabe[aria-invalid="true"] { border-color: var(--farbe-fehler); border-width: 2px; } textarea.eingabe { min-block-size: 8rem; resize: vertical; } select.eingabe, .auswahl { appearance: none; padding-inline-end: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5562' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.125rem; } .feldgruppe { border: 0; padding: 0; margin: 0; display: grid; gap: var(--abstand-3); min-inline-size: 0; } .feldgruppe > legend { font-weight: 600; font-size: var(--text-s); padding: 0; margin-block-end: var(--abstand-2); } .checkbox, .radio { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-3); align-items: start; font-size: var(--text-s); line-height: 1.5; cursor: pointer; } .checkbox input, .radio input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--farbe-marke); cursor: pointer; } .checkbox:has(input[aria-invalid="true"]) input { outline: 2px solid var(--farbe-fehler); outline-offset: 2px; } .formular__fehlerliste { padding: var(--abstand-4) var(--abstand-5); border: 2px solid var(--farbe-fehler); border-radius: var(--radius-m); background: var(--farbe-fehler-zart); } .formular__fehlerliste h2 { font-size: var(--text-m); color: var(--farbe-fehler); margin-block-end: var(--abstand-2); } .formular__fehlerliste ul { padding-inline-start: 1.25rem; font-size: var(--text-s); } .formular__fehlerliste a { color: var(--farbe-fehler); font-weight: 600; } .formular__erfolg { scroll-margin-block: 8rem; } .formular__datenschutz { font-size: var(--text-xs); color: var(--farbe-text-leise); } /* ---------- Glossar A–Z ---------- */ .glossar__alphabet { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; padding: 0; } .glossar__alphabet :is(a, span) { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-s); font-weight: 650; text-decoration: none; } /* Buchstaben mit Einträgen: Link mit Rahmen (mind. 3 : 1, WCAG 1.4.11). Buchstaben ohne Einträge: kein Rahmen, normale Stärke, Schrift mit mind. 4,5 : 1 (WCAG 1.4.3; mit text-leise auf Kalkweiß ca. 5 : 1) – der Unterschied liegt damit in Form und Stärke, nicht nur in der Farbe (WCAG 1.4.1). */ .glossar__alphabet a { background: var(--farbe-flaeche); border: var(--rahmen-breite) solid var(--farbe-linie-stark); color: var(--farbe-text); } .glossar__alphabet a:hover { border-color: var(--farbe-marke); color: var(--farbe-marke); } .glossar__alphabet span { color: color-mix(in srgb, var(--farbe-text-leise) 85%, var(--farbe-grund)); font-weight: 400; } @media (width >= 64rem) { .glossar__alphabet--sticky { position: sticky; inset-block-start: calc(var(--kopf-hoehe) + 0.5rem + var(--kopf-mehr)); z-index: 5; padding-block: var(--abstand-2); background: var(--farbe-grund); } /* Fokus nie unter Kopf + Buchstabenleiste (WCAG 2.4.11): Leiste ist ein- bis zweizeilig (bis ca. 7 rem hoch). Abstand für Sprungziele über scroll-padding. */ :root:has(.glossar__alphabet--sticky) { scroll-padding-block-start: calc(var(--kopf-hoehe) + 8rem + var(--kopf-mehr)); } :root:has(.glossar__alphabet--sticky) :is(:target, .glossar__liste dt) { scroll-margin-block-start: 0.5rem; } } .glossar__gruppe { display: grid; gap: var(--abstand-4); padding-block: var(--abstand-6); border-block-start: var(--rahmen-breite) solid var(--farbe-linie); } @media (width >= 48rem) { .glossar__gruppe { grid-template-columns: 5rem 1fr; } } .glossar__buchstabe { font-size: var(--text-3xl); color: var(--farbe-marke); line-height: 1; } .glossar__liste { display: grid; gap: var(--abstand-5); margin: 0; } .glossar__liste dt { font-weight: 700; font-size: var(--text-l); scroll-margin-block-start: calc(var(--kopf-hoehe) + 4rem); } .glossar__liste dd { margin: 0.25rem 0 0; color: var(--farbe-text-leise); max-inline-size: var(--breite-text); } .glossar__liste dd .textlink { margin-block-start: 0.375rem; font-size: var(--text-s); } /* ---------- Preise / Tarife ---------- */ .tarife { display: grid; gap: var(--raster-luecke); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: stretch; } .tarif { display: flex; flex-direction: column; gap: var(--abstand-4); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); border-radius: var(--karte-radius); background: var(--farbe-flaeche); border: var(--karte-rand); box-shadow: var(--karte-schatten); position: relative; } .tarif--hervorgehoben { border: 2px solid var(--farbe-marke); box-shadow: var(--schatten-2); } .tarif__etikett { position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% -50%; } .tarif__name { font-size: var(--text-xl); } .tarif__fuer { color: var(--farbe-text-leise); font-size: var(--text-s); } .tarif__preis { font-family: var(--schrift-zahl); font-variant-numeric: var(--zahlen-stil); font-size: var(--text-3xl); font-weight: var(--titel-gewicht); letter-spacing: var(--titel-laufweite); line-height: 1.1; } .tarif__preis small { display: block; font-size: var(--text-s); font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--farbe-text-leise); margin-block-start: 0.25rem; } .tarif__liste { flex: 1; align-content: start; } /* Punkte oben halten, wenn Karten einer Reihe unterschiedlich lange Listen haben */ .tarif .knopf { margin-block-start: auto; } /* ---------- Logo-Wand ---------- */ .logowand { display: grid; gap: var(--abstand-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); list-style: none; padding: 0; } .logowand__platz { display: grid; place-items: center; min-block-size: 4.5rem; padding: var(--abstand-3); border: 2px dashed var(--farbe-linie-stark); border-radius: var(--radius-m); color: var(--farbe-text-leise); font-size: var(--text-xs); text-align: center; line-height: 1.35; } /* ---------- CTA-Band ---------- */ .cta-band { --farbe-grund: var(--cta-grund); --farbe-flaeche: var(--cta-flaeche); --farbe-flaeche-2: var(--cta-flaeche); --farbe-text: var(--cta-text); --farbe-text-leise: var(--cta-text-leise); --farbe-linie: var(--cta-linie); --farbe-linie-stark: var(--cta-text-leise); --farbe-marke: var(--cta-marke); --farbe-marke-kontrast: var(--cta-marke-kontrast); --farbe-marke-hover: color-mix(in oklab, var(--cta-marke) 84%, var(--cta-text)); --farbe-marke-zart: color-mix(in oklab, var(--cta-marke) 14%, var(--cta-grund)); --farbe-link: var(--cta-marke); --farbe-fokus: var(--cta-fokus); --dachzeile-farbe: var(--cta-text-leise); background: var(--farbe-grund); color: var(--farbe-text); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); } .cta-band__innen { display: grid; gap: var(--abstand-6); align-items: center; } @media (width >= 56rem) { .cta-band__innen { grid-template-columns: 1.4fr auto; } } .cta-band__titel { font-size: min(var(--text-3xl), var(--titel-grenze)); color: var(--farbe-text); } .cta-band .dachzeile { margin-block-end: var(--abstand-3); } .cta-band__text { color: var(--farbe-text-leise); margin-block-start: var(--abstand-3); max-inline-size: 40rem; } .cta-band__aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-3); } /* ---------- Fußzeile ---------- */ .fuss { --farbe-grund: var(--fuss-grund); --farbe-flaeche: var(--fuss-flaeche); --farbe-text: var(--fuss-text); --farbe-text-leise: var(--fuss-text-leise); --farbe-linie: var(--fuss-linie); --farbe-marke: var(--fuss-marke); --farbe-marke-kontrast: var(--fuss-marke-kontrast); --farbe-link: var(--fuss-text); --farbe-fokus: var(--fuss-fokus); background: var(--farbe-grund); color: var(--farbe-text); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--abstand-6); font-size: var(--text-s); } .fuss__oben { display: grid; gap: var(--abstand-6); } @media (width >= 64rem) { .fuss__oben { grid-template-columns: minmax(14rem, 1.1fr) 3fr; gap: var(--abstand-8); } } .fuss__marke { display: grid; gap: var(--abstand-4); align-content: start; } .fuss__claim { color: var(--farbe-text-leise); max-inline-size: 22rem; } /* Telefon in der Fußzeile; Link mit 44 px Trefferfläche unter 64rem, siehe Touch-Ziele */ .fuss__kontakt { display: flex; align-items: center; gap: var(--abstand-2); color: var(--farbe-text-leise); } .fuss__kontakt .icon { color: var(--farbe-marke); } .fuss__kontakt a { color: var(--farbe-text); } .fuss__raster { display: grid; gap: var(--abstand-6) var(--abstand-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Unter 48rem zwei Spalten ohne gemeinsame Zeilen: „Wissen“ steht direkt unter „Produkt“, „Service“ unter „Lösungen“. Quelltext- und Fokusreihenfolge bleiben gleich; die Fußzeile wächst nicht, wenn eine Spalte mehr Einträge hat als ihre Nachbarin. */ @media (width < 48rem) { .fuss__raster { display: flow-root; } .fuss__raster > * { inline-size: calc(50% - var(--abstand-5) / 2); } .fuss__raster > :nth-child(odd) { float: left; clear: left; } .fuss__raster > :nth-child(even) { float: right; clear: right; } .fuss__raster > :nth-child(n + 3) { margin-block-start: var(--abstand-6); } } @media (width >= 48rem) { .fuss__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fuss__titel { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-leise); margin-block-end: var(--abstand-3); } .fuss__liste { list-style: none; padding: 0; display: grid; gap: 0.125rem; } .fuss__liste a { display: inline-block; padding-block: 0.3rem; color: var(--farbe-text); text-decoration: none; line-height: 1.35; } .fuss__liste a:hover { text-decoration: underline; } .fuss__hinweis { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-3); margin-block-start: var(--abstand-7); padding: var(--abstand-4) var(--abstand-5); border: var(--rahmen-breite) solid var(--farbe-linie); border-radius: var(--radius-m); background: color-mix(in oklab, var(--farbe-flaeche) 60%, transparent); line-height: 1.5; } .fuss__hinweis .icon { color: var(--farbe-marke); --icon-groesse: 1.375rem; } .fuss__hinweis strong { display: block; color: var(--farbe-text); } .fuss__hinweis p { color: var(--farbe-text-leise); max-inline-size: 100ch; } .fuss__hinweis p + p { margin-block-start: var(--abstand-2); } /* zweiter Absatz „Für Sonderfälle“ */ .fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--abstand-3) var(--abstand-5); margin-block-start: var(--abstand-6); padding-block-start: var(--abstand-5); border-block-start: var(--rahmen-breite) solid var(--farbe-linie); color: var(--farbe-text-leise); } .fuss__unten ul { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-5); list-style: none; padding: 0; } .fuss__unten a { color: var(--farbe-text-leise); display: inline-block; padding-block: 0.25rem; } .fuss .logo__zeichen { color: var(--farbe-marke); } /* Kein Zusatzabstand für die Mobil-Leiste nötig: sie blendet sich aus, sobald Abschlussband oder Fuß sichtbar sind. */ /* ---------- Sticky Mobil-CTA ---------- Ein Knopf „Jetzt starten“. Nur mit JS (website.js setzt html.mobil-cta-an) und nur unter 48rem: erscheint erst, wenn der erste Haupt-CTA ([data-haupt-cta] bzw. erster .knopf in .hero/.seitenkopf) aus dem Bild gescrollt ist; verschwindet, solange CTA-Band oder Fußzeile sichtbar sind oder ein Eingabefeld den Fokus hat. Ohne JS gibt es keine fixierte Leiste (nichts wird verdeckt). Aus mit . */ .mobil-cta { display: none; } @media (width < 48rem) { :root.mobil-cta-an .mobil-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; display: flex; padding: 0.625rem var(--rand) calc(0.625rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--farbe-flaeche) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-block-start: var(--rahmen-breite) solid var(--farbe-linie); box-shadow: 0 -6px 20px -10px rgb(16 24 40 / 0.25); opacity: 0; translate: 0 0.5rem; visibility: hidden; /* verborgen auch für Tastatur und Screenreader */ } :root.mobil-cta-an .mobil-cta.ist-sichtbar { opacity: 1; translate: 0 0; visibility: visible; } /* Fokussierte Elemente nie unter der Leiste (WCAG 2.4.11) */ :root.mobil-cta-an { scroll-padding-block-end: calc(var(--mobil-cta-hoehe) + 1rem); } } /* Ruhiges Ein- und Ausblenden, nur wenn Bewegung erwünscht ist (kein Hochpoppen, kein Wackeln) */ @media (width < 48rem) and (prefers-reduced-motion: no-preference) { :root.mobil-cta-an .mobil-cta { transition: opacity var(--dauer) var(--kurve), translate var(--dauer) var(--kurve), visibility 0s linear var(--dauer); } :root.mobil-cta-an .mobil-cta.ist-sichtbar { transition: opacity var(--dauer) var(--kurve), translate var(--dauer) var(--kurve), visibility 0s; } } .mobil-cta .knopf { flex: 1; min-block-size: 2.875rem; } :root.menue-offen .mobil-cta, :root body[data-mobil-cta="aus"] .mobil-cta { display: none; } /* Sehr niedrige Fensterhöhe (unter 30rem, z. B. 400 % Zoom oder Smartphone quer): Kopfzeile scrollt mit, keine Mobil-Leiste und keine klebende Buchstabenleiste. Sonst verdecken die festen Leisten bei 400 % Zoom (320 × 256 px) über die Hälfte der Fläche (Kopf 68 px + Leiste 67 px). Fokus und Sprungziele brauchen dann keinen Zusatzabstand. */ @media (height < 30rem) { .kopf { position: relative; } .glossar__alphabet--sticky { position: static; } :root.mobil-cta-an .mobil-cta { display: none; } :root, :root.mobil-cta-an, :root:has(.glossar__alphabet--sticky) { scroll-padding-block: var(--abstand-4); } } /* ---------- 404 ---------- */ .fehlerseite { display: grid; gap: var(--abstand-5); justify-items: start; padding-block: clamp(3rem, 2rem + 6vw, 7rem); } .fehlerseite__code { font-family: var(--schrift-zahl); font-size: clamp(4.5rem, 3rem + 10vw, 10rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--farbe-marke); font-variant-numeric: tabular-nums; } .fehlerseite__titel { font-size: var(--text-3xl); } .fehlerseite__links { display: grid; gap: var(--abstand-2); list-style: none; padding: 0; } /* ---------- Tags/Schlagwörter, Trenner, Kasten ---------- */ .kasten { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--karte-radius); background: var(--farbe-flaeche-2); } /* Sektionskopf im Kasten (z. B. Teil „unterstuetzte-faelle“): kein großer Sektionsabstand, der Kasten-Stapel regelt ihn */ .kasten > .sektion__kopf { margin-block-end: 0; } .kasten.stapel > .sektion__kopf + * { margin-block-start: var(--abstand-5); } /* Aktenzeichen (VB-2026-0412 usw.) nie am Bindestrich umbrechen: …, in Fließtext und Mockups. In .ui-fenster__pfad b gilt nowrap ohnehin. */ .aktenzeichen { white-space: nowrap; font-variant-numeric: var(--zahlen-stil); } .trenner { display: flex; align-items: center; gap: var(--abstand-4); color: var(--farbe-text-leise); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; } .trenner::before, .trenner::after { content: ""; flex: 1; block-size: 1px; background: var(--farbe-linie); } /* ---------- Touch-Ziele ≥ 44 px ---------- Unter 64rem und bei Touch-Bedienung. Listen- und Fußlinks bekommen echte 44 px Höhe (ohne Überlappung); einzeln stehende Textlinks und der Hero-Hinweislink vergrößern nur ihre Trefferfläche (negative Außenabstände), damit sich das Layout nicht streckt. Links im Fließtext sind ausgenommen. */ @media (width < 64rem), (pointer: coarse) { .fuss__liste { gap: 0; } .fuss__liste a, .fuss__unten a, .fuss__kontakt a, .nav__panel-fuss a:not(.textlink), .brotkrumen a { display: inline-flex; align-items: center; min-block-size: var(--ziel-min); padding-block: 0.25rem; } /* Block bleibt Block (lange Wörter dürfen umbrechen); Höhe über Innenabstand */ .inhaltsverzeichnis__liste a { padding-block: calc((var(--ziel-min) - 1.4em) / 2); } .hero__hinweis a { display: inline-flex; align-items: center; min-block-size: var(--ziel-min); margin-block: calc((var(--ziel-min) - 1.5em) / -2); } /* Textlink bleibt inline (Umbruch wie Fließtext). Senkrechter Innenabstand vergrößert die Trefferfläche; der gleich große negative Außenabstand hebt ihn auf, wenn der Link als Flex-Kind ein Block ist (.sektion__fuss, .reihe, .karte__fuss) – die Höhe des Layouts ändert sich in keinem Fall. */ a.textlink { padding-block: calc((var(--ziel-min) - 1.25em) / 2); margin-block: calc((var(--ziel-min) - 1.25em) / -2); } a.chip { min-block-size: var(--ziel-min); padding-inline: 0.875rem; } .glossar__alphabet :is(a, span) { inline-size: var(--ziel-min); block-size: var(--ziel-min); } /* .akkordeon__frage hat bereits min-block-size: 3rem (48 px), Knöpfe --knopf-hoehe (44 px) */ } } /* ========================================================================== 6. UI-MOCKUPS (Illustrationen aus HTML/CSS, erfundene Beispieldaten) Sie bleiben in jeder Sektion hell (eigene --ui-* Token) und passen sich per Container Query an ihre Breite an. Immer mit role="img" + aria-label. ========================================================================== */ @layer mockups { .ui-fenster { --farbe-grund: var(--ui-grund); --farbe-flaeche: var(--ui-flaeche); --farbe-flaeche-2: var(--ui-flaeche-2); --farbe-text: var(--ui-text); --farbe-text-leise: var(--ui-text-leise); --farbe-linie: var(--ui-linie); --farbe-marke: var(--ui-marke); --farbe-marke-kontrast: var(--ui-marke-kontrast); --farbe-marke-zart: var(--ui-marke-zart); --farbe-akzent: var(--ui-akzent); --farbe-erfolg: var(--ui-erfolg); --farbe-erfolg-zart: var(--ui-erfolg-zart); --farbe-warnung: var(--ui-warnung); --farbe-warnung-zart: var(--ui-warnung-zart); --farbe-fehler: var(--ui-fehler); --farbe-fehler-zart: var(--ui-fehler-zart); --farbe-info: var(--ui-info); --farbe-info-zart: var(--ui-info-zart); color-scheme: light; container-type: inline-size; position: relative; background: var(--ui-flaeche); color: var(--ui-text); border: var(--rahmen-breite) solid var(--ui-linie); border-radius: var(--ui-radius); box-shadow: var(--ui-schatten); overflow: hidden; font-family: var(--schrift-text); font-size: 0.8125rem; line-height: 1.45; text-align: start; hyphens: manual; -webkit-user-select: none; user-select: none; } /* Leiste bricht um statt abzuschneiden: Pfad und Etikett „Beispieldaten“ dürfen in zwei Zeilen stehen. */ .ui-fenster__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.5rem; padding: 0.625rem 0.875rem; background: var(--ui-flaeche-2); border-block-end: var(--rahmen-breite) solid var(--ui-linie); font-size: 0.75rem; color: var(--ui-text-leise); min-inline-size: 0; } .ui-fenster__pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.375rem; min-inline-size: 0; } .ui-fenster__pfad b { color: var(--ui-text); font-weight: 600; white-space: nowrap; } .ui-fenster__leiste .ui-beispiel { margin-inline-start: auto; } .ui-fenster__inhalt { padding: 1rem; display: grid; gap: 0.875rem; } .ui-beispiel { flex-shrink: 0; padding: 0.0625rem 0.4rem; border: 1px dashed var(--ui-text-leise); border-radius: 4px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ui-text-leise); white-space: nowrap; } .ui-titel { font-size: 0.9375rem; font-weight: 700; color: var(--ui-text); line-height: 1.3; letter-spacing: -0.005em; } .ui-unter { font-size: 0.75rem; color: var(--ui-text-leise); } .ui-zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .ui-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-block-size: 2rem; padding: 0.25rem 0.75rem; border-radius: calc(var(--knopf-radius) * 0.8); font-weight: 600; font-size: 0.75rem; background: var(--ui-flaeche); border: 1px solid var(--ui-linie); color: var(--ui-text); white-space: nowrap; } .ui-knopf--primaer { background: var(--ui-marke); border-color: var(--ui-marke); color: var(--ui-marke-kontrast); } .ui-knopf .icon { --icon-groesse: 0.9rem; } .ui-fenster .chip { font-size: 0.6875rem; padding: 0.125rem 0.5rem; } /* Collage: Hauptfenster + schwebende Karte */ .ui-collage { position: relative; display: grid; gap: 1rem; } /* Mobil: nur der erste Ausschnitt, damit der Einstieg kurz bleibt */ @media (width < 40rem) { .ui-collage--versetzt > :nth-child(n + 2) { display: none; } } /* Versetzt (ab 40rem): zweite Karte nach rechts eingerückt, überdeckt NUR einen leeren Fußstreifen der ersten Karte (::after, Höhe --collage-ueberlappung). So bleibt jeder Text sichtbar – egal wie hoch die Karten sind. */ @media (width >= 40rem) { .ui-collage--versetzt { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto var(--collage-ueberlappung) auto; gap: 0; } .ui-collage--versetzt > :nth-child(1) { grid-column: 1 / 11; grid-row: 1 / span 2; } .ui-collage--versetzt > :nth-child(1)::after { content: ""; display: block; block-size: var(--collage-ueberlappung); } .ui-collage--versetzt > .ui-formularvorschau:nth-child(1)::after { background: var(--ui-flaeche-2); } .ui-collage--versetzt > :nth-child(2) { grid-column: 4 / -1; grid-row: 2 / span 2; z-index: 1; } } /* --- Fallakte --- */ .ui-fallakte__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .ui-felder { display: grid; grid-template-columns: 1fr; gap: 0.625rem 1rem; margin: 0; } .ui-felder div { display: grid; gap: 0.0625rem; min-inline-size: 0; } .ui-felder dt { font-size: 0.6875rem; color: var(--ui-text-leise); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .ui-felder dd { margin: 0; font-weight: 550; color: var(--ui-text); overflow-wrap: anywhere; } @container (min-width: 26rem) { .ui-felder { grid-template-columns: 1fr 1fr; } } .ui-fortschritt { list-style: none; padding: 0; display: flex; gap: 0.25rem; } .ui-fortschritt li { flex: 1; display: grid; gap: 0.375rem; font-size: 0.6875rem; color: var(--ui-text-leise); min-inline-size: 0; } .ui-fortschritt li::before { content: ""; block-size: 4px; border-radius: 2px; background: var(--ui-linie); } .ui-fortschritt li.ist-erledigt::before { background: var(--ui-marke); } .ui-fortschritt li.ist-aktuell::before { background: linear-gradient(90deg, var(--ui-akzent) 50%, var(--ui-linie) 50%); } .ui-fortschritt li.ist-aktuell { color: var(--ui-text); font-weight: 600; } .ui-fortschritt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @container (max-width: 22rem) { .ui-fortschritt li:not(.ist-aktuell) span { visibility: hidden; } } .ui-naechster { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-m); background: var(--ui-marke-zart); color: var(--ui-text); font-size: 0.75rem; } .ui-naechster .icon { color: var(--ui-marke); } /* --- Forderungskonto --- */ .ui-tabelle { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.75rem; } .ui-tabelle :is(th, td) { padding: 0.5rem 0.375rem; text-align: start; border-block-end: 1px solid var(--ui-linie); vertical-align: baseline; } .ui-tabelle :is(th, td):first-child { padding-inline-start: 0; } .ui-tabelle :is(th, td):last-child { padding-inline-end: 0; } .ui-tabelle thead th { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-leise); font-weight: 650; } .ui-tabelle .zahl { text-align: end; white-space: nowrap; font-family: var(--schrift-zahl); } .ui-tabelle .ui-minus { color: var(--farbe-erfolg); } .ui-tabelle tfoot :is(th, td) { font-weight: 750; font-size: 0.8125rem; border-block-end: 0; border-block-start: 2px solid var(--ui-text); } .ui-tabelle .ui-tabelle__unter { display: block; font-size: 0.6875rem; color: var(--ui-text-leise); font-weight: 400; } @container (max-width: 25rem) { .ui-spalte--optional { display: none; } } .ui-konto__fuss { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-size: 0.6875rem; color: var(--ui-text-leise); } /* Summenzeile mit doppeltem Abschlussstrich (auch in .tabelle, siehe Komponenten) */ .ui-tabelle tr.summe > :is(th, td) { font-weight: 750; font-size: 0.8125rem; border-block-start: 1px solid var(--ui-text); border-block-end: 3px double var(--ui-text); } /* Forderungskonto mit Rechenweg: Zinszeilen mit Zeitraum, Tagen, Satz; Verrechnung der Teilzahlung */ .ui-konto__kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.25rem 0.75rem; } .ui-rechenweg { display: grid; gap: 0.375rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-m); background: var(--ui-flaeche-2); font-size: 0.6875rem; line-height: 1.45; } .ui-rechenweg__titel { font-size: 0.625rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-leise); } .ui-rechenweg ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; } .ui-rechenweg li { padding-inline-start: 0.875rem; position: relative; font-variant-numeric: tabular-nums; } .ui-rechenweg li::before { content: ""; position: absolute; inset-inline-start: 0.125rem; inset-block-start: 0.5em; inline-size: 0.3rem; block-size: 0.3rem; border-radius: 50%; background: var(--ui-marke); } .ui-rechenweg b { font-weight: 650; color: var(--ui-text); } /* --- Fallliste: Liste der Fälle mit Filtern nach Status und „mit Entwürfen zur Freigabe“. Breit als Tabelle (fünf Spalten), unter 38rem Fensterbreite als Karten. div.ui-fenster.ui-fallliste > Leiste + .ui-fenster__inhalt > div.ui-filter + table.ui-tabelle.ui-faelle (td.ui-faelle__az > b · td.ui-faelle__schuldner · td.ui-faelle__titel · td.ui-faelle__status > .chip · td.zahl.ui-faelle__entwuerfe > b + span.ui-faelle__label; ohne Entwurf: td.ui-faelle__entwuerfe.ist-leer „–“) --- */ .ui-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; } .ui-filter__titel { font-size: 0.625rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-leise); } .ui-filter .chip .icon { --icon-groesse: 0.75rem; } .ui-filter__anzahl { margin-inline-start: auto; font-size: 0.6875rem; color: var(--ui-text-leise); } .ui-faelle { table-layout: auto; } .ui-faelle :is(th, td) { vertical-align: middle; } .ui-faelle__az b { font-weight: 650; white-space: nowrap; } .ui-faelle__titel { color: var(--ui-text-leise); } .ui-faelle__entwuerfe b { font-weight: 650; } .ui-faelle__label { display: none; } /* nur in der Kartenansicht sichtbar; breit steht die Bedeutung im Spaltenkopf */ .ui-faelle__entwuerfe.ist-leer { color: var(--ui-text-leise); } @container (max-width: 38rem) { .ui-faelle, .ui-faelle tbody { display: block; } .ui-faelle thead { display: none; } .ui-faelle tbody { display: grid; gap: 0.5rem; } .ui-faelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "az status" "schuldner entwuerfe" "titel titel"; align-items: center; gap: 0.25rem 0.5rem; padding: 0.625rem 0.75rem; border: 1px solid var(--ui-linie); border-radius: var(--radius-m); } .ui-faelle :is(th, td) { display: block; padding: 0; border: 0; } .ui-faelle__az { grid-area: az; } .ui-faelle__status { grid-area: status; justify-self: end; } .ui-faelle__schuldner { grid-area: schuldner; font-weight: 600; min-inline-size: 0; } .ui-faelle__titel { grid-area: titel; } .ui-faelle__entwuerfe { grid-area: entwuerfe; justify-self: end; font-size: 0.6875rem; } .ui-faelle__entwuerfe.ist-leer { display: none; } .ui-faelle__label { display: inline; color: var(--ui-text-leise); } } /* --- Wiedervorlagen: ul.ui-wv > li.ui-wv__eintrag > span.ui-wv__icon + span.ui-wv__anlass + span.ui-wv__grund + span.ui-wv__datum; danach p.ui-wv__hinweis. --- */ .ui-wv { list-style: none; padding: 0; display: grid; } .ui-wv__eintrag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.125rem 0.625rem; align-items: center; padding-block: 0.625rem; border-block-end: 1px solid var(--ui-linie); } .ui-wv__eintrag:last-child { border-block-end: 0; } .ui-wv__icon { grid-row: 1 / span 2; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-s); background: var(--ui-flaeche-2); color: var(--ui-text-leise); --icon-groesse: 0.95rem; } .ui-wv__anlass { font-weight: 600; color: var(--ui-text); min-inline-size: 0; } .ui-wv__grund { grid-column: 2; font-size: 0.6875rem; color: var(--ui-text-leise); min-inline-size: 0; } .ui-wv__datum { grid-row: 1 / span 2; grid-column: 3; text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.75rem; white-space: nowrap; } .ui-wv__hinweis { font-size: 0.6875rem; color: var(--ui-text-leise); padding-block-start: 0.625rem; border-block-start: 1px solid var(--ui-linie); } /* --- Vorab-Abfragen vor dem Entwurf: Ja/Nein/Unbekannt; „Ja“ = kein Entwurf, „Unbekannt“ = Warnung --- */ .ui-vorab__liste { list-style: none; padding: 0; display: grid; } .ui-vorab__frage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem 0.75rem; align-items: center; padding-block: 0.5rem; border-block-end: 1px solid var(--ui-linie); } .ui-vorab__frage:last-child { border-block-end: 0; } @container (min-width: 28rem) { .ui-vorab__frage { grid-template-columns: minmax(0, 1fr) auto; } } .ui-vorab__text { font-weight: 550; color: var(--ui-text); } .ui-auswahl { display: inline-flex; justify-self: start; border: 1px solid var(--ui-linie); border-radius: var(--radius-s); overflow: hidden; font-size: 0.6875rem; white-space: nowrap; } .ui-auswahl > span { padding: 0.25rem 0.5rem; color: var(--ui-text-leise); } .ui-auswahl > span + span { border-inline-start: 1px solid var(--ui-linie); } .ui-auswahl > .ist-gewaehlt { background: var(--ui-marke); color: var(--ui-marke-kontrast); font-weight: 650; } .ui-vorab__meldung { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-m); background: var(--farbe-warnung-zart); color: var(--ui-text); font-size: 0.6875rem; } .ui-vorab__meldung .icon { flex-shrink: 0; margin-block-start: 0.05rem; color: var(--farbe-warnung); --icon-groesse: 0.95rem; } .ui-vorab__meldung--halt { background: var(--farbe-fehler-zart); } .ui-vorab__meldung--halt .icon { color: var(--farbe-fehler); } .ui-vorab__meldung b { font-weight: 650; } /* --- Fall anlegen (Erfassung mit Forderungsrolle; Forderungen Dritter gesperrt) --- */ .ui-erfassung__gruppe { display: grid; gap: 0.375rem; } .ui-erfassung__label { font-size: 0.6875rem; color: var(--ui-text-leise); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .ui-optionen { list-style: none; padding: 0; display: grid; gap: 0.375rem; } .ui-optionen li { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; border: 1px solid var(--ui-linie); border-radius: var(--radius-m); font-weight: 550; min-inline-size: 0; } .ui-optionen__punkt { inline-size: 0.875rem; block-size: 0.875rem; border-radius: 50%; border: 1.5px solid var(--ui-text-leise); flex-shrink: 0; } .ui-optionen .ist-gewaehlt { border-color: var(--ui-marke); background: var(--ui-marke-zart); } .ui-optionen .ist-gewaehlt .ui-optionen__punkt { border-color: var(--ui-marke); background: var(--ui-marke); box-shadow: inset 0 0 0 2px var(--ui-flaeche); } .ui-optionen .ist-gesperrt { color: var(--ui-text-leise); background: var(--ui-flaeche-2); border-style: dashed; font-weight: 400; } .ui-optionen .ist-gesperrt .icon { flex-shrink: 0; --icon-groesse: 0.875rem; } .ui-felder dd { font-variant-numeric: var(--zahlen-stil); } /* --- Vier-Augen-Freigabe --- */ .ui-freigabe { border-radius: var(--ui-radius); } .ui-freigabe__personen { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } @container (min-width: 24rem) { .ui-freigabe__personen { grid-template-columns: 1fr 1fr; } } .ui-person { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border: 1px solid var(--ui-linie); border-radius: var(--radius-m); min-inline-size: 0; } .ui-person__kuerzel { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--ui-marke-zart); color: var(--ui-marke); font-weight: 700; font-size: 0.6875rem; flex-shrink: 0; } .ui-person__rolle { display: block; font-size: 0.625rem; color: var(--ui-text-leise); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .ui-person__name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-pruefliste { list-style: none; padding: 0; display: grid; gap: 0.375rem; } .ui-pruefliste li { display: flex; align-items: flex-start; gap: 0.5rem; } .ui-haekchen { display: grid; place-items: center; inline-size: 1rem; block-size: 1rem; margin-block-start: 0.1rem; border-radius: 3px; border: 1.5px solid var(--ui-text-leise); flex-shrink: 0; --icon-groesse: 0.75rem; } .ui-haekchen--an { background: var(--ui-marke); border-color: var(--ui-marke); color: var(--ui-marke-kontrast); } .ui-freigabe__aktionen { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; padding-block-start: 0.25rem; border-block-start: 1px solid var(--ui-linie); padding-top: 0.75rem; } .ui-freigabe__hinweis { font-size: 0.6875rem; color: var(--ui-text-leise); } /* Erklärungsbestätigung: eigener Schritt vor der Freigabe (Name, Eigenschaft, Zeitpunkt) */ .ui-erklaerung { display: grid; gap: 0.25rem; padding: 0.5rem 0.625rem; border: 1px solid var(--ui-linie); border-radius: var(--radius-m); background: var(--ui-flaeche-2); font-size: 0.6875rem; } .ui-erklaerung__titel { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 650; color: var(--ui-text); } .ui-erklaerung__titel .icon { color: var(--ui-marke); --icon-groesse: 0.9rem; } .ui-erklaerung__text { color: var(--ui-text-leise); } .ui-erklaerung b { font-weight: 600; color: var(--ui-text); } .ui-freigabe__pruefwert { font-size: 0.625rem; color: var(--ui-text-leise); overflow-wrap: anywhere; } .ui-freigabe__pruefwert code { font-family: var(--schrift-mono); } /* Selbstfreigabe für Privatpersonen: eine Person erstellt und gibt frei, nach einer ausdrücklichen, protokollierten Bestätigung der eigenen Durchsicht. .ui-freigabe.ui-freigabe--selbst > … .ui-freigabe__personen.ui-freigabe__personen--eine (eine .ui-person) + div.ui-bestaetigung (span.ui-haekchen.ui-haekchen--an + div > p.ui-bestaetigung__text + p.ui-bestaetigung__protokoll) */ .ui-freigabe__personen--eine { grid-template-columns: 1fr; } @container (min-width: 24rem) { .ui-freigabe__personen--eine { grid-template-columns: 1fr; } } .ui-bestaetigung { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.625rem; border: 1px solid var(--ui-marke); border-radius: var(--radius-m); background: var(--ui-marke-zart); font-size: 0.75rem; } .ui-bestaetigung__text { color: var(--ui-text); font-weight: 550; } .ui-bestaetigung__protokoll { margin-block-start: 0.25rem; font-size: 0.625rem; color: var(--ui-text-leise); } /* --- Formularvorschau (stilisiert, keine Reproduktion des amtlichen Formulars) --- */ .ui-formular { background: var(--ui-flaeche-2); padding: 1rem 1rem 0; } .ui-blatt { position: relative; background: var(--ui-papier); border: 1px solid var(--ui-linie); border-block-end: 0; border-radius: 4px 4px 0 0; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); padding: 1rem 1rem 0; display: grid; gap: 0.625rem; block-size: 17rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); } .ui-blatt__kopf { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.625rem; color: var(--ui-text-leise); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .ui-blatt__titel { font-size: 0.875rem; font-weight: 750; color: var(--ui-text); letter-spacing: -0.005em; } .ui-blatt__abschnitt { display: grid; gap: 0.375rem; padding: 0.5rem; border: 1px solid var(--ui-linie); border-radius: 2px; } .ui-blatt__label { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-leise); font-weight: 650; } .ui-blatt__wert { font-family: var(--schrift-mono); font-size: 0.6875rem; color: var(--ui-marke); background: var(--ui-marke-zart); padding: 0.125rem 0.375rem; border-radius: 2px; justify-self: start; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-blatt__kreuz { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; } .ui-blatt__kreuz i { inline-size: 0.75rem; block-size: 0.75rem; border: 1px solid var(--ui-text); display: grid; place-items: center; font-style: normal; font-size: 0.625rem; line-height: 1; font-weight: 700; color: var(--ui-marke); } .ui-balken { block-size: 0.4375rem; border-radius: 2px; background: var(--ui-linie); inline-size: 100%; } .ui-balken--kurz { inline-size: 35%; } .ui-balken--mittel { inline-size: 55%; } .ui-balken--lang { inline-size: 78%; } .ui-formular__leiste { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 0; font-size: 0.6875rem; color: var(--ui-text-leise); } /* --- Import-Vorschau --- */ .ui-datei { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--ui-text-leise); border-radius: var(--radius-m); background: var(--ui-flaeche-2); min-inline-size: 0; } .ui-datei .icon { color: var(--ui-marke); --icon-groesse: 1.25rem; } .ui-datei__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; } .ui-zuordnung { list-style: none; padding: 0; display: grid; gap: 0.375rem; } .ui-zuordnung li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.5rem; } .ui-zuordnung code { font-size: 0.6875rem; padding: 0.25rem 0.5rem; background: var(--ui-flaeche-2); border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-zuordnung .ui-ziel { padding: 0.25rem 0.5rem; border: 1px solid var(--ui-linie); border-radius: 4px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; } .ui-zuordnung .icon { color: var(--ui-text-leise); --icon-groesse: 0.9rem; } .ui-ergebnis { display: flex; flex-wrap: wrap; gap: 0.375rem; } /* --- Audit-Log --- */ .ui-protokoll { list-style: none; padding: 0; display: grid; font-size: 0.75rem; } .ui-protokoll li { display: grid; grid-template-columns: auto 1fr; gap: 0 0.625rem; padding-block: 0.5rem; border-block-end: 1px solid var(--ui-linie); } .ui-protokoll li:last-child { border-block-end: 0; } .ui-protokoll time { font-size: 0.6875rem; color: var(--ui-text-leise); font-variant-numeric: tabular-nums; grid-row: span 2; padding-block-start: 0.05rem; } .ui-protokoll__aktion { font-weight: 600; } .ui-protokoll__hash { font-family: var(--schrift-mono); font-size: 0.625rem; color: var(--ui-text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ========================================================================== 7a. STYLEGUIDE (nur Musterseiten, nicht für Website-Seiten) ========================================================================== */ @layer styleguide { .sg-nav { margin-block-start: var(--abstand-3); } .sg-nav a { text-decoration: none; min-block-size: 1.75rem; } .sg-nav a:hover { border-color: var(--farbe-marke); color: var(--farbe-marke); } .sg-abschnitt { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); border-block-start: var(--rahmen-breite) solid var(--farbe-linie); } .sg-kopf { display: grid; gap: var(--abstand-2); margin-block-end: var(--abstand-6); max-inline-size: 56rem; } .sg-titel { font-size: var(--text-2xl); } .sg-untertitel { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--farbe-text-leise); margin-block: var(--abstand-7) var(--abstand-3); } .sg-kopf + .sg-untertitel, .sg-untertitel:first-child { margin-block-start: 0; } .sg-klassen { font-size: var(--text-xs); color: var(--farbe-text-leise); line-height: 2; } .sg-klassen code { background: var(--farbe-flaeche-2); padding: 0.1em 0.4em; border-radius: 4px; white-space: nowrap; color: var(--farbe-text); } .sg-label { font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--farbe-text-leise); } .sg-rahmen { border-block: var(--rahmen-breite) solid var(--farbe-linie); } .sg-sektion-titel { font-size: var(--text-2xl); } .sg-tokens { list-style: none; padding: 0; display: grid; gap: var(--abstand-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); } .token { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.125rem 0.75rem; align-items: center; padding: 0.5rem; border: var(--rahmen-breite) solid var(--farbe-linie); border-radius: var(--radius-m); background: var(--farbe-flaeche); font-size: var(--text-xs); line-height: 1.35; } .token--text { grid-template-columns: minmax(0, 1fr); } .token__farbe { grid-row: span 3; inline-size: 3rem; block-size: 3rem; border-radius: var(--radius-s); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); } .token__name { font-size: 0.75rem; font-weight: 600; overflow-wrap: anywhere; } .token__rolle { color: var(--farbe-text-leise); } .token__wert { font-family: var(--schrift-mono); font-size: 0.6875rem; color: var(--farbe-text-leise); overflow-wrap: anywhere; } .sg-paar { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--farbe-text-leise); font-family: var(--schrift-mono); text-transform: none; letter-spacing: 0; } .kontrast__probe { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 4px; font-weight: 600; border: 1px solid rgb(127 127 127 / 0.35); white-space: nowrap; } .sg-typo { display: grid; gap: 0.5rem; padding-block: var(--abstand-4); border-block-end: var(--rahmen-breite) solid var(--farbe-linie); } @media (width >= 48rem) { .sg-typo { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; } } .sg-typo__meta { display: grid; font-size: var(--text-xs); color: var(--farbe-text-leise); } .sg-typo__meta code { color: var(--farbe-text); font-weight: 600; } .sg-typo__probe { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); letter-spacing: var(--titel-laufweite); font-feature-settings: var(--titel-merkmale); line-height: 1.15; } .sg-abstaende { display: grid; gap: 0.5rem; list-style: none; padding: 0; } .sg-abstand { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4rem; align-items: center; gap: 0.75rem; font-size: var(--text-xs); } .sg-abstand__balken { block-size: 0.75rem; background: var(--farbe-akzent); border-radius: 2px; max-inline-size: 100%; } .sg-formen { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--abstand-4); } .sg-form { aspect-ratio: 4 / 3; display: grid; place-items: end start; padding: 0.5rem; background: var(--farbe-flaeche); border: var(--rahmen-breite) solid var(--farbe-linie); font-size: var(--text-xs); } .sg-icons { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; } .sg-icon { display: grid; justify-items: center; gap: 0.5rem; padding: 0.75rem 0.5rem; border: var(--rahmen-breite) solid var(--farbe-linie); border-radius: var(--radius-m); background: var(--farbe-flaeche); font-size: 0.6875rem; text-align: center; } .sg-icon code { overflow-wrap: anywhere; } .sg-buehne { padding: clamp(1rem, 0.5rem + 2vw, 2rem); border: var(--rahmen-breite) dashed var(--farbe-linie-stark); border-radius: var(--radius-l); background-color: var(--farbe-grund); } .sg-buehne--logo { display: grid; place-items: center; min-block-size: 9rem; } .sg-buehne--logo .logo { font-size: clamp(1.125rem, 0.6rem + 3vw, 1.75rem); } .sg-buehne--logo .logo__wort { font-size: 1em; } .sg-mockups { display: grid; gap: var(--raster-luecke); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: start; } .sg-mockup { margin: 0; display: grid; gap: 0.5rem; min-inline-size: 0; } .sg-mockup figcaption { font-size: var(--text-xs); color: var(--farbe-text-leise); } .sg-mockup--dunkel { padding: 1rem; border-radius: var(--radius-l); } .sg-mockup--breit { grid-column: 1 / -1; } .sg-mockup--mittel { grid-column: 1 / -1; max-inline-size: 46rem; } .sg-langwort { display: grid; gap: var(--abstand-3); } .sg-langwort > * { margin: 0; } .sg-seitenliste { list-style: none; padding: 0; display: grid; gap: 0.25rem; font-size: var(--text-s); } .sg-seitenliste li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; } .sg-seitenliste a { display: inline-block; padding-block: 0.2rem; font-weight: 550; } .sg-dokumente { padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; } } /* ========================================================================== 7. HILFSKLASSEN ========================================================================== */ @layer hilfen { .visuell-versteckt { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .icon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; } .text-mitte { text-align: center; } .mt-0 { margin-block-start: 0 !important; } .mt-4 { margin-block-start: var(--abstand-4) !important; } .mt-6 { margin-block-start: var(--abstand-6) !important; } .mt-8 { margin-block-start: var(--abstand-8) !important; } @media (width >= 48rem) { .nur-mobil { display: none !important; } } @media (width < 48rem) { .nur-desktop { display: none !important; } } } /* ========================================================================== 8. DRUCK (minimal) ========================================================================== */ @media print { .proto-leiste, .kopf__menue-knopf, .nav, .mobil-cta, .cta-band, .skip-link, .inhaltsverzeichnis, .glossar__alphabet { display: none !important; } .kopf { position: static; backdrop-filter: none; border: 0; } body, .sektion, .hero, .fuss, .sektion--dunkel { background: #fff !important; color: #000 !important; } .sektion, .hero { padding-block: 1rem !important; } .karte, .tarif, .ui-fenster { box-shadow: none !important; break-inside: avoid; } .prosa a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; } .artikel-layout { display: block; } h2, h3 { break-after: avoid; } /* Dunkle Bereiche: Browser drucken Hintergründe standardmäßig nicht – helle Schrift wäre auf weißem Papier kaum lesbar. Darum dort dunkle Schrift auf Weiß. */ .sektion--dunkel, .dunkel { --farbe-grund: #fff; --farbe-flaeche: #fff; --farbe-flaeche-2: #fff; --farbe-getoent: #fff; --farbe-text: #000; --farbe-text-leise: #333; --farbe-linie: #999; --farbe-linie-stark: #666; --farbe-marke: #000; --farbe-marke-kontrast: #fff; --farbe-marke-zart: #fff; --farbe-akzent: #333; --farbe-akzent-zart: #fff; --farbe-link: #000; --dachzeile-farbe: #333; color-scheme: light; } /* Flächen mit heller Schrift oder Zeichen (Knöpfe, Schrittnummern, Produktausschnitte, Haken in Listen): Hintergrund mitdrucken, damit Schrift und Symbole sichtbar bleiben */ .knopf--primaer, .schritt__nr, .ui-fenster, .liste-haken, .wer::before, .kostenstufen__legende::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Antworten in Akkordeons mitdrucken (Browser mit ::details-content; eigene Regel, damit andere Browser nur sie verwerfen) */ details::details-content { content-visibility: visible; block-size: auto; } } /* ========================================================================== Bausteine für „Wege nach dem Titel“ (Ebene komponenten) ========================================================================== */ @layer komponenten { /* ---------- Wer-Marke: Formregel als Zeichen im Text (wie .schritt__nr) ---------- Quadrat = Software (Standard), Kreis = Sie / Ihr Team (.wer--sie), Raute = Kanzlei, Gericht, Gerichtsvollzieher (.wer--andere). Die Bedeutung trägt immer das Wort; die Form ist ein Pseudo-Element und wird nicht vorgelesen. */ .wer { font-weight: 650; white-space: nowrap; } .wer::before { content: ""; display: inline-block; inline-size: 0.625rem; block-size: 0.625rem; margin-inline-end: 0.4rem; vertical-align: 0.05em; background: var(--farbe-marke); } .wer--sie::before { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--farbe-akzent); } .wer--andere::before { background: transparent; box-shadow: inset 0 0 0 2px var(--farbe-text-leise); rotate: 45deg; scale: 0.82; } .wer-legende { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); font-size: var(--text-s); color: var(--farbe-text-leise); list-style: none; padding: 0; } /* In der Legende darf der Eintrag umbrechen (sonst Überlauf bei großer Grundschrift); in Tabellenzellen bleibt nowrap */ .wer-legende .wer { white-space: normal; } @media (forced-colors: active) { .wer::before { background: CanvasText; } .wer--sie::before, .wer--andere::before { background: transparent; box-shadow: none; border: 2px solid CanvasText; box-sizing: border-box; } } /* ---------- table.vergleich: Modifikatoren ---------- --dicht: mobil weniger Innenabstand. --knapp: unter 30rem Beschriftung und Wert nebeneinander; dafür steht der Inhalt jeder Zelle in genau einem (die Zelle ist mobil ein Raster). */ @media (width < 48rem) { .vergleich--dicht tbody th { font-size: var(--text-s); padding-block: 0.625rem; } .vergleich--dicht td { padding-block: 0.5rem; } } @media (width < 30rem) { .vergleich--knapp td { grid-template-columns: minmax(5.5rem, 30%) 1fr; gap: var(--abstand-3); } } /* ---------- Kostenlogik: je Antrag oder fester Preis (Liste aus Text, kein Bild) ---------- */ .kostenlogik { list-style: none; padding: 0; display: grid; gap: var(--abstand-4); } .kostenlogik__zeile { display: grid; gap: var(--abstand-2); } @media (width >= 48rem) { .kostenlogik__zeile { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; gap: var(--abstand-5); } } .kostenlogik__weg { font-weight: 650; line-height: 1.35; } .kostenlogik__weg small { display: block; font-weight: 500; font-size: var(--text-s); color: var(--farbe-text-leise); } .kostenlogik__bausteine { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; } .kostenlogik__baustein { padding: 0.5rem 0.625rem; font-size: var(--text-s); line-height: 1.35; background: var(--farbe-flaeche-2); border-radius: var(--radius-s); } .kostenlogik__baustein b { display: block; font-size: var(--text-s); font-family: var(--schrift-zahl); } .kostenlogik__baustein--offen { background: transparent; box-shadow: inset 0 0 0 1px var(--farbe-linie-stark); } .kostenlogik__baustein--fest { grid-column: 1 / -1; background: var(--farbe-marke-zart); } .kostenlogik__baustein--leer { grid-column: 1 / -1; background: transparent; box-shadow: inset 0 0 0 1px var(--farbe-linie); color: var(--farbe-text-leise); } @media (forced-colors: active) { .kostenlogik__baustein { border: 1px solid CanvasText; } } /* ---------- Kostenstufen: Tabelle mit Betrag als Text und Balken als Ergänzung (SVG, aria-hidden) ---------- */ .kostenstufen { table-layout: fixed; } .kostenstufen thead th { white-space: normal; } .kostenstufen thead th:first-child { inline-size: 8.5rem; } .kostenstufe { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); align-items: center; gap: var(--abstand-3); } .kostenstufe__betrag { text-align: end; font-family: var(--schrift-zahl); font-variant-numeric: var(--zahlen-stil); white-space: nowrap; } .kostenbalken { display: block; inline-size: 100%; block-size: 0.75rem; overflow: visible; } .kostenbalken__wert { fill: var(--farbe-linie-stark); } .kostenbalken__linie { stroke: var(--farbe-marke); stroke-width: 2px; } .kostenstufen__legende { display: flex; align-items: center; gap: var(--abstand-2); font-size: var(--text-s); color: var(--farbe-text-leise); } .kostenstufen__legende::before { content: ""; flex: none; inline-size: 2px; block-size: 1rem; background: var(--farbe-marke); } @media (width < 22rem) { .kostenstufen thead th:first-child { inline-size: 7.25rem; } .kostenstufe { grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--abstand-2); } } @media (forced-colors: active) { .kostenbalken__wert { fill: CanvasText; } .kostenbalken__linie { stroke: Highlight; } .kostenstufen__legende::before { background: Highlight; } } /* ---------- Reihe aus Textlinks: Zeilenabstand so, dass sich die 44-px-Trefferflächen nicht berühren (UX 3.5) ---------- */ .reihe--links { --reihe-luecke: var(--abstand-6) var(--abstand-5); } /* ---------- Neutrale Aufzählung (Fakten ohne Wertung, keine Haken) ---------- */ .liste-punkte { list-style: disc; padding-inline-start: 1.25em; display: grid; gap: var(--abstand-2); } .liste-punkte > li::marker { color: var(--farbe-text-leise); } }