/* ========================================================================== VIGIVIO — Website (vigivio.de) Stand: 27.09.2026 · Bezug: design.md (verbindlich), specimen.html Teil 1–3: Design-Tokens und Basis. Teil 4: Komponenten. Einzelthema hell. Kein Dark Mode. Alle Farben explizit gesetzt. Schriften selbst gehostet unter ../fonts/ (keine externen Anfragen). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Schriften (selbst gehostet, SIL OFL 1.1 — Lizenztexte in fonts/) -------------------------------------------------------------------------- */ /* Schibsted Grotesk, variabel 400–900, Latin */ @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/schibsted-grotesk-latin-wght-normal.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; } /* Schibsted Grotesk, Latin Extended (u. a. U+1E9E ẞ) — lädt nur bei Bedarf */ @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/schibsted-grotesk-latin-ext-wght-normal.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; } /* IBM Plex Mono 400/500 — nur für Marginalien, Kennungen, Fristen */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.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; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.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; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.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; } /* Metrisch angeglichene Ersatzschrift gegen Layoutsprung beim Nachladen. Werte gemessen: Laufweite deutscher Satzprobe Schibsted 400 vs. Arial. */ @font-face { font-family: "Schibsted Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 104.58%; ascent-override: 93.38%; descent-override: 24.65%; line-gap-override: 0%; } /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ :root { color-scheme: light only; /* ---- Schriftfamilien ---- */ --font-sans: "Schibsted Grotesk", "Schibsted Fallback", "Helvetica Neue", Arial, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- Neutrale (Salbeigrau: leichter Grün-Blau-Stich, nie reines Grau) ---- */ --c-bg: #FAFBFA; /* Seitengrund */ --c-surface: #FFFFFF; /* Karten, Browserrahmen, FAQ-Einträge */ --c-sunken: #F1F4F2; /* abgesetzte Bänder (FAQ), Sekundär-Knopf */ --c-sunken-hover: #E6EBE8; /* Hover Sekundär-Knopf */ --c-line: #E1E7E3; /* Haarlinien, Kartenränder */ --c-line-strong: #C9D2CD; /* betonte Linien, aktive Ränder */ --c-control-line: #7D8983; /* Ränder von Bedienelementen (≥ 3:1 auf Weiß) */ --c-ink: #0E1512; /* Text primär (fast schwarz, 18.5:1 auf Weiß) */ --c-ink-2: #46514C; /* Text sekundär (8.3:1) */ --c-ink-3: #5C6863; /* Text tertiär, Mono-Marginalien (≥ 5.0:1 auf allen Tönen) */ --c-ink-4: #9AA59F; /* nur Dekor/Deaktiviert — NIE für lesbaren Text */ --c-on-dark: #FFFFFF; /* Text auf Verlaufskarten und schwarzen Knöpfen */ --c-on-dark-2: rgba(255, 255, 255, 0.82); /* ---- Medienflächen (Hintergrund der großen Produktbild-Flächen) ---- */ --c-tint-blue: #EDF2F9; --c-tint-green: #EAF4EE; --c-tint-teal: #E7F2F1; --c-tint-neutral: #EEF2EF; /* ---- Signal-Grün „geprüft" (Anker: bisheriges Markengrün #0E6B38) ---- */ --c-green-50: #EEF7F1; --c-green-100: #D8EEDF; --c-green-200: #B4DEC4; --c-green-300: #86C9A3; --c-green-400: #4FAA7B; --c-green-500: #23895A; --c-green-600: #0E6B38; /* Signal: geprüft, freigegeben, im Plan */ --c-green-700: #0B5A30; --c-green-800: #094627; --c-green-900: #07331D; /* ---- Brücke Grün → Blau (Petrol) ---- */ --c-teal-300: #8CC7C4; --c-teal-500: #3E9491; --c-teal-700: #1F6663; /* ---- Blau (gedeckt, aus dem Logo-Blau #4283F0 abgeleitet) ---- */ --c-blue-50: #EFF3FA; --c-blue-100: #DCE5F4; --c-blue-200: #BACBE9; --c-blue-300: #93AEDB; --c-blue-400: #6A8DC9; --c-blue-500: #4A70B5; --c-blue-600: #345A9E; /* Fokusring, Info */ --c-blue-700: #284780; --c-blue-800: #1D3561; --c-blue-900: #142646; /* ---- Fristen-Ampel (nur in Produktdarstellungen und deren Erklärung) ---- */ --c-status-ok: var(--c-green-600); --c-status-ok-bg: var(--c-green-50); --c-status-due: #8F560A; /* fällig in ≤ 30 Tagen */ --c-status-due-bg: #FBF1DF; --c-status-over: #B42318; /* überfällig */ --c-status-over-bg: #FBE9E7; /* ---- Rollen ---- */ --c-text: var(--c-ink); --c-text-muted: var(--c-ink-2); --c-text-subtle: var(--c-ink-3); --c-btn-primary: var(--c-ink); --c-btn-primary-hover: #25302B; --c-btn-primary-active: #000000; --c-focus: var(--c-blue-600); --c-selection-bg: var(--c-green-100); --c-link-underline: var(--c-line-strong); --c-nav-bg: rgba(250, 251, 250, 0.82); /* Navigation mit Unschärfe */ --c-scrim: rgba(14, 21, 18, 0.28); /* Abdunklung hinter dem Mobil-Menü */ --c-browser-bar: #F3F6F4; /* Leiste des CSS-Browserrahmens */ --c-browser-dot: #D3DAD6; /* Fensterpunkte — bewusst neutral, keine Ampelfarben */ /* ---- Verläufe ---- */ /* Markenverlauf (gedämpfte Logo-Achse) — nur für schmale Akzente, nie hinter Text */ --grad-brand: linear-gradient(90deg, #4FAA7B 0%, #3E9491 48%, #4A70B5 100%); /* Hero-Dunst: dunkler Grünkern unten Mitte → Petrol → Blau-Lavendel → Mintnebel → Seitengrund. Ebene 1 liegt oben. Unterkante der Bühne ist eine harte Kante (wie Vorlage). */ --grad-haze: radial-gradient(34% 50% at 50% 104%, #0A3F26 0%, #0E5A36 34%, rgba(20, 104, 72, 0.78) 58%, rgba(41, 128, 104, 0) 100%), radial-gradient(58% 78% at 50% 104%, rgba(55, 138, 112, 0.95) 0%, rgba(79, 150, 136, 0.72) 36%, rgba(112, 148, 204, 0.62) 64%, rgba(156, 182, 226, 0) 100%), radial-gradient(86% 96% at 50% 104%, rgba(150, 178, 226, 0.85) 0%, rgba(172, 196, 232, 0.6) 46%, rgba(204, 226, 222, 0.45) 72%, rgba(214, 233, 226, 0) 100%), linear-gradient(180deg, #FAFBFA 0%, #F2F7F4 34%, #DCEBE5 70%, #D2E6DF 100%); /* Schluss-Dunst (Fußbereich, heller und flacher als der Hero) */ --grad-haze-soft: radial-gradient(60% 70% at 50% 100%, rgba(120, 170, 150, 0.55) 0%, rgba(150, 175, 220, 0.35) 55%, rgba(250, 251, 250, 0) 100%), linear-gradient(180deg, #FAFBFA 0%, #EEF5F1 100%); /* CTA-Karten: oben heller Nebel, unten tief. Weißer Text nur ab 34 % Höhe (siehe design.md §17). */ --grad-cta-green: linear-gradient(180deg, #C5D2EC 0%, #93ACD6 18%, #5B8AA6 38%, #2C6E58 58%, #0F5536 78%, #0A3F28 100%); --grad-cta-blue: linear-gradient(180deg, #CFE7DC 0%, #98CBBE 18%, #5E98B0 38%, #3E68A6 58%, #243F78 78%, #182C55 100%); /* Dieselben Verläufe gestaucht für niedrige Karten (mobil ohne Mindesthöhe): der dunkle Teil beginnt früher, damit weißer Text auch bei ~19 % Kartenhöhe ≥ 3:1 (große Schrift) erreicht. */ --grad-cta-green-kurz: linear-gradient(180deg, #C5D2EC 0%, #93ACD6 7%, #5B8AA6 15%, #2C6E58 30%, #0F5536 55%, #0A3F28 100%); --grad-cta-blue-kurz: linear-gradient(180deg, #CFE7DC 0%, #98CBBE 7%, #5E98B0 15%, #3E68A6 30%, #243F78 55%, #182C55 100%); /* ---- Typografie: Größen (fluid 360 → 1280 px Viewport) ---- */ --fs-display: clamp(2.25rem, 1.3696rem + 3.9130vw, 4.5rem); /* 36 → 72 H1 Hero */ --fs-h2: clamp(1.875rem, 1.4348rem + 1.9565vw, 3rem); /* 30 → 48 Abschnitt */ --fs-h3: clamp(1.375rem, 1.2283rem + 0.6522vw, 1.75rem); /* 22 → 28 Unterabschnitt, FAQ-Titel */ --fs-h4: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem); /* 18 → 20 Karten-, Schritt-Titel */ --fs-cta: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem); /* 28 → 40 CTA-Karten */ --fs-stat: clamp(2rem, 1.7065rem + 1.3043vw, 2.75rem); /* 32 → 44 Zahlen Belegleiste */ --fs-lead: clamp(1.0625rem, 0.9891rem + 0.3261vw, 1.25rem); /* 17 → 20 Hero-Untertitel, Intro */ --fs-body: 1rem; /* 16 Fließtext */ --fs-body-s: 0.9375rem; /* 15 Feature-Text, FAQ-Antwort, Kacheltext */ --fs-small: 0.875rem; /* 14 Navigation, Fußzeile, Belegtext */ --fs-caption: 0.8125rem; /* 13 Bildunterschrift, Rechtliches */ --fs-mono: 0.75rem; /* 12 Mono-Marginalie (Versalien) */ --fs-mono-s: 0.6875rem; /* 11 Mono in Produktkarten */ /* ---- Typografie: Zeilenhöhen ---- */ --lh-display: 1.03; --lh-h2: 1.08; --lh-h3: 1.18; --lh-h4: 1.3; --lh-lead: 1.5; --lh-body: 1.6; --lh-small: 1.5; --lh-mono: 1.4; /* ---- Typografie: Laufweite ---- */ --ls-display: -0.032em; --ls-h2: -0.026em; --ls-h3: -0.016em; --ls-h4: -0.008em; --ls-body: 0; --ls-mono: 0.08em; /* ---- Typografie: Gewichte (Schibsted variabel) ---- */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-display: 620; /* H1/H2: zwischen Semi und Bold — ruhiger als 700 */ /* ---- Abstände (4-px-Basis) ---- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ --sp-32: 8rem; /* 128 */ --sp-40: 10rem; /* 160 */ /* ---- Rhythmus (fluid) ---- */ --section-y: clamp(5rem, 3.0435rem + 8.6957vw, 10rem); /* 80 → 160 zwischen Abschnitten */ --row-gap: clamp(4.5rem, 2.3478rem + 9.5652vw, 10rem); /* 72 → 160 zwischen Feature-Reihen */ --hero-top: clamp(2.5rem, 1.9783rem + 2.3188vw, 4rem); /* 40 → 64 Navigation → Hero-Text */ --stage-top: clamp(2rem, 1.8043rem + 0.8696vw, 2.5rem); /* 32 → 40 Innenabstand Bühne oben (Produkt im ersten Bildschirm) */ --stage-bottom: clamp(6rem, 5.2174rem + 3.4783vw, 8rem); /* 96 → 128 Innenabstand Bühne unten */ --stage-gap: clamp(2.5rem, 2.3043rem + 0.8696vw, 3rem); /* 40 → 48 Hero-Knöpfe → Bühne */ --proof-y: clamp(4rem, 2.4348rem + 6.9565vw, 8rem); /* 64 → 128 Belegleiste oben/unten */ --closing-bottom: clamp(4rem, 3rem + 4vw, 6rem); /* 64 → 96 Schluss-CTA unten */ /* ---- Raster ---- */ --container: 76rem; /* 1216 Inhaltsbreite */ --container-narrow: 45rem; /* 720 FAQ, Schluss-CTA */ --gutter: clamp(1rem, 0.4130rem + 2.6087vw, 2.5rem); /* 16 → 40 Seitenrand */ --grid-cols: 12; --grid-gap: clamp(1rem, 0.7554rem + 1.087vw, 1.5rem); /* 16 → 24 Spaltenabstand */ --measure: 34rem; /* max. Zeilenlänge Fließtext (≈ 65 Zeichen bei 16 px) */ --measure-feature: 30rem; /* Feature-Text */ --nav-h: 4rem; /* 64 Desktop */ --nav-h-mobile: 3.5rem; /* 56 Mobil */ --frame-max: 65rem; /* 1040 Browserrahmen im Hero */ --logo-h: 1.75rem; /* 28 Logo in der Navigation (Mobil 24) */ /* ---- Bedienelemente ---- */ --btn-h: 2.75rem; /* 44 Standard */ --btn-h-sm: 2.25rem; /* 36 Navigation */ --btn-h-lg: 3.25rem; /* 52 Mobil-Menü, Bühnen-Pille */ --tap-min: 2.75rem; /* 44 Mindest-Trefferfläche */ /* ---- Radien ---- */ --r-xs: 6px; /* Chips in Produktkarten, Checkbox */ --r-sm: 8px; /* Adressleiste im Browserrahmen, kleine Badges */ --r-md: 12px; /* Browserrahmen, FAQ-Einträge, schwebende Karten innen */ --r-lg: 16px; /* Kacheln, schwebende Karten, Belegkarten */ --r-xl: 24px; /* große Produktbild-Flächen, CTA-Karten */ --r-2xl: 32px; /* Schluss-CTA-Karte */ --r-pill: 999px; /* Knöpfe, Status-Pillen */ /* ---- Schatten (sparsam; nur vier Stufen) ---- */ --shadow-hairline: 0 0 0 1px rgba(14, 21, 18, 0.06); --shadow-float: 0 1px 2px rgba(14, 21, 18, 0.06), 0 12px 32px -8px rgba(14, 21, 18, 0.18); --shadow-frame: 0 0 0 1px rgba(14, 21, 18, 0.07), 0 2px 4px rgba(14, 21, 18, 0.04), 0 32px 64px -28px rgba(7, 40, 26, 0.45); --shadow-pill: 0 1px 2px rgba(14, 21, 18, 0.08), 0 8px 24px -6px rgba(7, 40, 26, 0.35); /* ---- Bewegung ---- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; /* Hover, Farbe */ --dur-base: 240ms; /* Menü, Akkordeon-Symbol */ --dur-reveal: 640ms; /* Einblenden beim Scrollen */ --reveal-shift: 16px; --stagger: 70ms; /* ---- Ebenen ---- */ --z-float: 2; --z-nav: 50; --z-menu: 60; } /* -------------------------------------------------------------------------- 3. Basis (Pflicht — gehört zu den Tokens, damit Hintergrund und Schrift nie vom Browser-Standard abhängen) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-bg); color: var(--c-text); scroll-padding-top: calc(var(--nav-h) + var(--sp-4)); interpolate-size: allow-keywords; /* ermöglicht Akkordeon-Animation auf height:auto (Chromium) */ } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); font-feature-settings: "kern" 1, "liga" 1; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } ::selection { background: var(--c-selection-bg); color: var(--c-ink); } :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; } /* Auf dunklen und Verlaufsflächen erreicht der blaue Ring keine 3:1 — dort weiß (≥ 8:1) */ .expert :focus-visible, .cta-card :focus-visible, .stage-pill:focus-visible { outline-color: #fff; } img, svg, video, picture { display: block; max-width: 100%; } img { height: auto; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 4. Komponenten (nach design.md und specimen.html) ========================================================================== */ /* ---- Grundgerüst ---- */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: var(--sp-4); top: -100px; z-index: 100; background: var(--c-ink); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-small); text-decoration: none; } .skip:focus { top: var(--sp-3); } .icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; } main { display: block; } /* Silbentrennung nur auf schmalen Bildschirmen; auf breiten Spalten wirkt sie unruhig. */ p { hyphens: manual; } @media (max-width: 29.9375rem) { p { hyphens: auto; hyphenate-limit-chars: 10 4 4; } /* Lead, Verlaufskarten und Schluss: keine Trennung, sonst stehen dort „Fris-ten-Ampel“ und „Prüfbe-richt“ */ .lead, .cta-card p, .closing p { hyphens: manual; } } .nowrap { white-space: nowrap; } .line { display: block; } /* ---- Typografie ---- */ .display { margin: 0; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); text-wrap: balance; hyphens: manual; overflow-wrap: break-word; } .h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-display); text-wrap: balance; hyphens: manual; overflow-wrap: break-word; } .h3 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semi); text-wrap: balance; } .h4 { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-semi); text-wrap: balance; } .lead { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-text-muted); max-width: 36rem; text-wrap: pretty; } .text { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--c-text-muted); text-wrap: pretty; } .eyebrow { margin: 0; display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; font-weight: 500; color: var(--c-text-subtle); } .eyebrow .icon { width: 1rem; height: 1rem; color: var(--c-green-600); stroke-width: 2; } .mono-note { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono-s); line-height: var(--lh-mono); letter-spacing: .04em; color: var(--c-ink-3); } a.inline, .prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-link-underline); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color var(--dur-fast); } a.inline:hover, .prose a:hover { text-decoration-color: currentColor; } .num { font-variant-numeric: tabular-nums; } /* ---- Knöpfe ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--btn-h); padding: 0 1.25rem; border: 0; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: .9375rem; font-weight: 600; line-height: 1; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn .icon { width: 1rem; height: 1rem; stroke-width: 1.75; } .btn--primary { background: var(--c-btn-primary); color: var(--c-on-dark); } .btn--primary:hover { background: var(--c-btn-primary-hover); } .btn--primary:active { background: var(--c-btn-primary-active); } .btn--secondary { background: var(--c-sunken); color: var(--c-ink); } .btn--secondary:hover { background: var(--c-sunken-hover); } .btn--light { background: var(--c-surface); color: var(--c-ink); } .btn--light:hover { background: var(--c-sunken); } .btn--sm { height: var(--btn-h-sm); padding: 0 .875rem; font-size: .875rem; } .btn--lg { height: var(--btn-h-lg); padding: 0 1.625rem; font-size: 1rem; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } @media (max-width: 23.4375rem) { .btn-row .btn { white-space: normal; height: auto; min-height: var(--btn-h); padding-block: .625rem; line-height: 1.25; text-align: center; max-width: 100%; } } .text-link { margin: var(--sp-4) 0 0; font-size: var(--fs-body-s); line-height: 1.5; color: var(--c-ink-2); } /* ---- Navigation ---- */ .nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--c-nav-bg); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: var(--c-bg); } } .nav[data-scrolled="true"] { border-bottom-color: var(--c-line); } .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); height: var(--nav-h); } .nav__logo { justify-self: start; display: inline-flex; align-items: center; height: 2.75rem; border-radius: var(--r-xs); } .nav__logo img { height: 1.25rem; width: auto; } .nav__links { display: flex; gap: var(--sp-8); } .nav__links a { font-size: var(--fs-small); font-weight: 500; color: var(--c-ink-2); text-decoration: none; padding: .5rem .125rem; white-space: nowrap; transition: color var(--dur-fast); } .nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--c-ink); } .nav__actions { justify-self: end; display: flex; align-items: center; gap: var(--sp-2); } .nav__toggle { display: none; } html:not(.js) .nav__toggle { display: none; } .nav__menu { display: none; } .nav-scrim { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: var(--c-scrim); } .nav-scrim[hidden] { display: none; } /* Die Navigation klappt schon unter 1024 px zusammen: vier deutsche Linktexte plus zwei Knöpfe brauchen mehr Platz als die 880 px aus design.md. */ @media (max-width: 63.9375rem) { html { scroll-padding-top: calc(var(--nav-h-mobile) + var(--sp-4)); } .nav__inner { grid-template-columns: 1fr auto; height: var(--nav-h-mobile); } .nav__links, .nav__actions .btn--secondary { display: none; } .nav__toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.625rem; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--c-ink); cursor: pointer; } .nav__toggle .icon { width: 1.5rem; height: 1.5rem; } .nav__toggle[aria-expanded="true"] .i-menu, .nav__toggle[aria-expanded="false"] .i-close { display: none; } .nav__menu { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-menu); max-height: calc(100dvh - var(--nav-h-mobile)); overflow: auto; padding: var(--sp-2) var(--gutter) var(--sp-6); background: var(--c-bg); border-bottom: 1px solid var(--c-line); box-shadow: 0 24px 48px -24px rgba(14, 21, 18, .25); opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), display var(--dur-base) allow-discrete; } .nav__menu[hidden] { display: none; opacity: 0; transform: translateY(-8px); } @starting-style { .nav__menu { opacity: 0; transform: translateY(-8px); } } .nav__menu a.menu-link { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; border-bottom: 1px solid var(--c-line); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--c-ink); text-decoration: none; } .nav__menu a.menu-link .icon { color: var(--c-ink-3); } .menu-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); } .menu-actions .btn { width: 100%; } } @media (max-width: 26.9375rem) { .nav__logo img { height: 1.0625rem; } .nav__actions .btn--sm { padding: 0 .75rem; } } /* ---- Hero ---- */ .hero__text { padding-top: var(--hero-top); } .hero__text .eyebrow { margin-bottom: var(--sp-5); } /* Zwei Sätze, je eine Zeile (.line), sobald die Breite reicht */ .hero__text .display { max-width: 16em; } .hero__text .lead { margin-top: var(--sp-5); max-width: 46rem; } .hero__text .btn-row { margin-top: var(--sp-8); } /* Drei Vorteile unter der Unterzeile: ab 1024 px nebeneinander (eine Zeile ab ~1150 px, darunter zwei), unter 1024 px untereinander */ .gains { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8); } .gains li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); font-weight: 500; line-height: 1.35; letter-spacing: -.005em; color: var(--c-ink); } .gains__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm); background: var(--c-green-50); color: var(--c-green-600); flex: none; } .gains__icon .icon { width: 1.125rem; height: 1.125rem; stroke-width: 1.75; } @media (max-width: 63.9375rem) { .gains { flex-direction: column; gap: var(--sp-2); } } @media (max-width: 47.9375rem) { .hero__text .btn-row { margin-top: var(--sp-6); } } /* Eine Zeile unter den Knöpfen erklärt, was „Audit“ heißt */ .hero__audit { margin: var(--sp-5) 0 0; max-width: 34rem; font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); text-wrap: pretty; } .hero__audit b { font-weight: var(--fw-semi); color: var(--c-ink); } .hero__stage { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--stage-gap); padding: var(--stage-top) 0 var(--stage-bottom); } .hero__haze { position: absolute; inset: 0; z-index: -1; background: var(--grad-haze); transform-origin: 50% 100%; } @media (prefers-reduced-motion: no-preference) { .hero__haze { animation: haze-drift 24s var(--ease-in-out) infinite alternate; } } @keyframes haze-drift { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1.5%); } } .hero__frame { position: relative; max-width: var(--frame-max); margin-inline: auto; } .stage-pill { position: absolute; left: 50%; bottom: var(--sp-8); transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--sp-3); height: var(--btn-h-lg); padding: .375rem 1.375rem .375rem .375rem; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font-size: .9375rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-pill); transition: box-shadow var(--dur-fast) var(--ease-out); } .stage-pill:hover { box-shadow: 0 1px 2px rgba(14, 21, 18, .08), 0 12px 32px -6px rgba(7, 40, 26, .45); } .stage-pill__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-ink); color: #fff; transition: background-color var(--dur-fast); } .stage-pill:hover .stage-pill__icon { background: var(--c-btn-primary-hover); } .stage-pill__icon .icon { width: 1.125rem; height: 1.125rem; } @media (max-width: 29.9375rem) { .hero__text .btn-row .btn { flex: 1 1 100%; } } /* ---- Browserrahmen ---- */ .browser { margin: 0; background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--shadow-frame); overflow: hidden; } .browser__bar { display: grid; grid-template-columns: 1fr minmax(0, 22rem) 1fr; align-items: center; gap: var(--sp-3); height: 2.5rem; padding: 0 .875rem; background: var(--c-browser-bar); border-bottom: 1px solid var(--c-line); } .browser__dots { display: flex; gap: 6px; } .browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-browser-dot); } .browser__url { display: flex; align-items: center; justify-content: center; gap: 6px; height: 1.625rem; padding: 0 .625rem; border-radius: var(--r-sm); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); font-family: var(--font-mono); font-size: .75rem; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; } .browser__url .icon { width: .75rem; height: .75rem; stroke-width: 2; } .browser__tag { justify-self: end; font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .04em; color: var(--c-ink-3); white-space: nowrap; } .browser--compact .browser__bar { grid-template-columns: auto; height: 1.75rem; padding: 0 .75rem; } .browser--compact .browser__dots i { width: 7px; height: 7px; } .browser__screen { position: relative; background: #F5F4EF; } .browser__screen img { display: block; width: 100%; height: auto; } @media (max-width: 44.9375rem) { .hero .browser__screen img { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } .browser__bar { height: 2rem; grid-template-columns: auto minmax(0, 1fr) auto; } .browser__dots i { width: 8px; height: 8px; } .browser__url { font-size: .6875rem; height: 1.375rem; } .browser__tag-long { display: none; } } /* ---- Status und Marken ---- */ .status { display: inline-flex; align-items: center; gap: 6px; height: 1.5rem; padding: 0 .625rem 0 .5rem; border-radius: var(--r-pill); font-size: .75rem; font-weight: 500; line-height: 1; background: var(--c-status-ok-bg); color: var(--c-status-ok); white-space: nowrap; } .status .icon { width: .875rem; height: .875rem; stroke-width: 2; } .status--due { background: var(--c-status-due-bg); color: var(--c-status-due); } .status--over { background: var(--c-status-over-bg); color: var(--c-status-over); } .status--none { background: var(--c-sunken); color: var(--c-ink-2); } .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; } .tag-ki { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .4375rem; border-radius: 4px; border: 1px solid rgba(143, 86, 10, .38); background: var(--c-status-due-bg); color: var(--c-status-due); font-family: var(--font-mono); font-size: var(--fs-mono-s); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .stamp { display: inline-flex; align-items: center; gap: .4375rem; padding: .375rem .625rem .4375rem; border: 2px solid var(--c-green-600); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--c-surface), inset 0 0 0 3px var(--c-green-600); background: var(--c-surface); color: var(--c-green-600); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: rotate(-3deg); } .stamp .icon { width: .875rem; height: .875rem; stroke-width: 2.25; } /* ---- Schwebende Karte im Hero ---- */ .float-card { position: absolute; z-index: var(--z-float); left: -4rem; bottom: 4%; width: 16rem; padding: var(--sp-4); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-float); } .float-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .float-card__title { margin: var(--sp-3) 0 2px; font-size: .9375rem; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; } .float-card__meta { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .02em; line-height: 1.5; color: var(--c-ink-3); } .float-card__stamp { margin-top: var(--sp-4); } .float-card__by { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: .8125rem; color: var(--c-ink-2); } .avatar { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-green-100); color: var(--c-green-700); flex: none; } .avatar .icon { width: .875rem; height: .875rem; stroke-width: 1.75; } @media (max-width: 74.9375rem) { .float-card { left: -1.5rem; width: 14rem; } } @media (max-width: 69.9375rem) { .float-card { width: 13.25rem; } } /* Unter 1024 px läge die Karte auf Kennzahlen (Anlagen, Kosten) — dort entfällt sie; der Block „KI und Freigabe“ zeigt denselben Ablauf. */ @media (max-width: 63.9375rem) { .float-card { display: none; } } /* ---- Belegleiste ---- */ .proof { padding-block: var(--proof-y); } .proof__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--sp-10); } .proof__list > li { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; } .proof__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); background: var(--c-green-50); color: var(--c-green-600); } .proof__icon .icon { width: 1.5rem; height: 1.5rem; } .proof__title { margin: var(--sp-4) 0 0; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-semi); } .proof__text { margin: var(--sp-2) 0 0; max-width: 17rem; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-ink-2); } @media (max-width: 54.9375rem) { .proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 22.4375rem) { .proof__list { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-8); } } /* ---- Abschnitte ---- */ .section { padding-top: var(--section-y); } .section-head { max-width: 42rem; } .section-head .h2 { margin-top: var(--sp-4); } .section-head .lead, .section-head .text { margin-top: var(--sp-4); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .lead { margin-inline: auto; } /* ---- Feature-Reihen ---- */ .features { display: grid; gap: var(--row-gap); padding-top: var(--section-y); } .feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: center; } .feature__text { grid-column: 1 / span 5; grid-row: 1; } .feature__media { grid-column: 7 / span 6; grid-row: 1; } .feature--flip .feature__text { grid-column: 8 / span 5; } .feature--flip .feature__media { grid-column: 1 / span 6; } .feature__text .h2 { margin-top: var(--sp-4); font-size: clamp(1.875rem, 1.2rem + 1.2vw, 2.25rem); } /* 30 → 36: deutlich unter dem Hero, meist zweizeilig */ .feature__text .text { margin-top: var(--sp-4); max-width: var(--measure-feature); } .feature__points { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-3); max-width: var(--measure-feature); } .feature__points li { display: flex; gap: var(--sp-3); font-size: var(--fs-body-s); line-height: 1.5; color: var(--c-ink-2); } .feature__points .icon { width: 1.125rem; height: 1.125rem; margin-top: .125rem; color: var(--c-green-600); stroke-width: 2; } .feature__points--plain .icon { color: var(--c-ink-3); stroke-width: 1.5; } @media (max-width: 54.9375rem) { .feature, .feature--flip { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-8); } .feature__text, .feature__media, .feature--flip .feature__text, .feature--flip .feature__media { grid-column: 1; grid-row: auto; } } /* ---- Medienflächen ---- */ .media { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: var(--c-tint-blue); } .media--green { background: var(--c-tint-green); } .media--teal { background: var(--c-tint-teal); } .media--neutral { background: var(--c-tint-neutral); } .media__tag { position: absolute; z-index: 3; top: 3.2%; left: 8%; margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .04em; line-height: 1.4; color: var(--c-ink-3); white-space: nowrap; } .media__tag--right { left: auto; right: 8%; } /* Ausschnitt: läuft rechts (Standard) oder links aus der Fläche */ .media__shot { position: absolute; z-index: 1; top: 9%; left: 8%; width: 104%; } .media__shot--left { left: auto; right: 8%; } .media__shot--inset { width: 84%; } .media__shot .browser { box-shadow: var(--shadow-float); } /* HTML-Karte über dem Ausschnitt */ .media__card { position: absolute; z-index: 2; left: 6%; bottom: 6%; width: min(64%, 21rem); padding: var(--sp-4); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-float); } .media__card--right { left: auto; right: 6%; } .media__center { position: absolute; inset: 8% 8% 8% 8%; display: grid; place-items: center; } @media (max-width: 44.9375rem) { .media { border-radius: 20px; } .media__card { width: min(78%, 21rem); padding: var(--sp-3); } } /* Mini-Karten (gestaltete Produktelemente, Daten aus dem Demo-Bestand) */ .mini__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .mini__label { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono-s); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); } .mini__title { margin: var(--sp-3) 0 2px; font-size: .9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; } .mini__meta { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono-s); line-height: 1.5; letter-spacing: .02em; color: var(--c-ink-3); overflow-wrap: anywhere; } .mini__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; } .mini__list li { display: flex; align-items: center; gap: var(--sp-2); padding: .5rem 0; border-top: 1px solid var(--c-line); font-size: .8125rem; line-height: 1.35; color: var(--c-ink); } .mini__list li:first-child { border-top: 0; } .mini__list .icon { width: 1rem; height: 1rem; color: var(--c-status-due); } .mini__list b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; } .mini__stats { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: .5rem; } .mini__stats li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: .8125rem; } .mini__stats b { font-weight: 600; font-variant-numeric: tabular-nums; } .mini__foot { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: .8125rem; color: var(--c-ink-2); } .mini__foot .icon { width: 1rem; height: 1rem; color: var(--c-green-600); stroke-width: 2; } .mini__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); } .mini-btn { display: inline-flex; align-items: center; gap: 6px; height: 1.75rem; padding: 0 .625rem; border-radius: 4px; border: 1px solid var(--c-ink); font-family: var(--font-mono); font-size: var(--fs-mono-s); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); } .mini-btn--dark { background: var(--c-ink); color: #fff; } .mini-btn .icon { width: .8125rem; height: .8125rem; stroke-width: 2; } /* Prüfbericht: zwei gestaffelte PDF-Seiten */ .pages { position: absolute; inset: 0; } .page { position: absolute; margin: 0; width: 50%; border-radius: var(--r-sm); overflow: hidden; background: #fff; box-shadow: var(--shadow-float); } .page img { display: block; width: 100%; height: auto; } .page--back { top: 9%; right: 10%; width: 44%; } .page--front { top: 15%; left: 12%; width: 50%; z-index: 1; box-shadow: 0 1px 2px rgba(14, 21, 18, .08), 0 24px 48px -16px rgba(14, 21, 18, .28); } /* Problem-Illustration */ /* Ausgangslage: verstreute Unterlagen → Karte „Gebäudebestand“ (01.10.2026). --q (0 → 1) führt die Unterlagen zusammen, --k (0 → 1) blendet die Karte ein; beides setzt site.js beim Scrollen. Ohne Skript oder bei reduzierter Bewegung: Unterlagen verstreut, Karte davor (--q 0, --k 1). */ .ordnen { --q: 0; --k: 1; position: relative; aspect-ratio: 1 / 1; contain: layout; } .ordnen.ist-beweglich { --k: 0; } .ordnen__raster { position: absolute; inset: -8%; pointer-events: none; background: radial-gradient(closest-side, rgb(79 170 123 / calc(.20 * var(--k))), rgb(79 170 123 / 0)), linear-gradient(rgb(14 21 18 / .075) 1px, transparent 1px) 50% 50% / 28px 28px, linear-gradient(90deg, rgb(14 21 18 / .075) 1px, transparent 1px) 50% 50% / 28px 28px; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); } .unterlage { position: absolute; left: calc(var(--sx) + (50% - var(--sx)) * var(--q)); top: calc(var(--sy) + (47% - var(--sy)) * var(--q)); width: var(--sw); height: auto; transform: translate(-50%, -50%) rotate(calc(var(--sr) * (1 - var(--q)))) scale(calc(1 - .55 * var(--q))); opacity: calc(1 - var(--q) * var(--q)); filter: drop-shadow(0 14px 16px rgb(14 21 18 / .13)); } .ordnen__karte { position: absolute; left: 50%; top: 50%; width: min(80%, 21.5rem); padding: var(--sp-4) var(--sp-4) var(--sp-3); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-float); opacity: var(--k); transform: translate(-50%, -50%) scale(calc(.9 + .1 * var(--k))); } .ordnen__kopf { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--sp-3); font-size: var(--fs-body-s); font-weight: var(--fw-semi); color: var(--c-ink); } .ordnen__kopf .icon { width: 1.125rem; height: 1.125rem; color: var(--c-green-600); } .ordnen__marke { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-mono-s); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-green-600); } .ordnen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .ordnen__liste li { display: flex; align-items: center; gap: var(--sp-3); padding: .375rem .5rem .375rem .375rem; border-radius: var(--r-md); background: var(--c-sunken); font-size: var(--fs-body-s); font-weight: 500; color: var(--c-ink); } .ordnen__liste .key-icon { width: 2rem; height: 2rem; } .ordnen__haken { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; margin-left: auto; border-radius: 50%; background: var(--c-green-600); color: #fff; flex: none; } .ordnen__haken .icon { width: .8125rem; height: .8125rem; stroke-width: 2.5; } /* Haken setzen sich nacheinander, sobald die Karte steht */ .ordnen.ist-beweglich .ordnen__haken { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); } .ordnen.ist-beweglich.ist-geordnet .ordnen__haken { transform: none; } .ordnen.ist-geordnet li:nth-child(2) .ordnen__haken { transition-delay: .18s; } .ordnen.ist-geordnet li:nth-child(3) .ordnen__haken { transition-delay: .36s; } @media (prefers-reduced-motion: no-preference) { .unterlage { animation: schweben var(--f, 7s) ease-in-out infinite alternate; } } @keyframes schweben { from { translate: 0 0; } to { translate: 0 -9px; } } @media (max-width: 47.9375rem) { .ordnen__karte { width: min(86%, 21.5rem); padding: var(--sp-3); } .ordnen__liste li { gap: var(--sp-2); font-size: .8125rem; } .ordnen__liste .key-icon { width: 1.75rem; height: 1.75rem; } } .problem-keys { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-3); } .problem-keys li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body-s); font-weight: 500; color: var(--c-ink); } .key-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-hairline); color: var(--c-ink-2); flex: none; } .key-icon .icon { width: 1.125rem; height: 1.125rem; } /* ---- KI und Freigabe (dunkler Abschnitt) ---- */ .expert { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--section-y); padding-block: var(--section-y); background: var(--c-ink); color: var(--c-on-dark); } .expert::before { content: ""; position: absolute; inset: auto 0 0 0; height: 70%; z-index: -1; background: radial-gradient(60% 80% at 50% 110%, rgba(14, 107, 56, .45) 0%, rgba(31, 102, 99, .22) 45%, rgba(14, 21, 18, 0) 100%); } .expert .eyebrow { color: rgba(255, 255, 255, .72); } .expert .eyebrow .icon { color: var(--c-green-300); } .expert__statement { margin: var(--sp-5) auto 0; max-width: 16em; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); text-wrap: balance; } .expert__lead { margin: var(--sp-6) auto 0; max-width: 38rem; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-on-dark-2); text-wrap: pretty; } .expert__lead--betont { margin-top: var(--sp-3); color: var(--c-on-dark); font-weight: 500; text-wrap: balance; } .expert .btn-row { justify-content: center; margin-top: var(--sp-12); } .verdict { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-6); max-width: 58rem; margin: var(--sp-16) auto 0; } .verdict__card { position: relative; padding: var(--sp-5); background: var(--c-surface); color: var(--c-ink); border-radius: var(--r-lg); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6); } .verdict__card .mini__title { font-size: 1rem; } .verdict__rows { margin: var(--sp-4) 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .875rem; font-size: .8125rem; line-height: 1.4; } .verdict__rows dt { font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); padding-top: .125rem; } .verdict__rows dd { margin: 0; color: var(--c-ink); } .verdict__rows .ok { color: var(--c-green-600); } .verdict__stamp { position: absolute; right: var(--sp-4); bottom: calc(-1 * var(--sp-4)); } .verdict__step { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .78); } .verdict__circle { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; } .verdict__circle .icon { width: 1.375rem; height: 1.375rem; } .verdict__arrow { width: 1.25rem; height: 1.25rem; color: rgba(255, 255, 255, .6); } .verdict__caption { margin: var(--sp-10) 0 0; text-align: center; font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .04em; color: rgba(255, 255, 255, .72); } .pillars { list-style: none; margin: var(--sp-16) 0 0; padding: var(--sp-10) 0 0; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10) var(--grid-gap); } .pillars .icon { width: 1.5rem; height: 1.5rem; color: var(--c-green-300); } .pillars h3 { margin: var(--sp-4) 0 0; color: #fff; } .pillars p { margin: var(--sp-2) 0 0; max-width: 22rem; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--c-on-dark-2); } @media (max-width: 54.9375rem) { .verdict { grid-template-columns: minmax(0, 1fr); max-width: 26rem; gap: var(--sp-5); } .verdict__step { grid-auto-flow: column; align-items: center; justify-content: center; gap: var(--sp-3); } .verdict__arrow { transform: rotate(90deg); } .verdict__card--ok { margin-bottom: var(--sp-4); } .pillars { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } } /* ---- Weitere Funktionen: drei Bildkacheln (App-Ausschnitte) + schlichte Liste ---- */ .fn__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); background: var(--c-tint-neutral); color: var(--c-ink); } .fn__icon .icon { width: 1.5rem; height: 1.5rem; } .tiles { list-style: none; margin: var(--sp-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10) var(--grid-gap); } .tile__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; background: var(--c-tint-neutral); } .tile__media img { position: absolute; top: 14%; left: 8%; width: 150%; max-width: none; height: auto; border-radius: var(--r-sm); box-shadow: var(--shadow-float); } .tile .h4 { margin-top: var(--sp-5); } .tile .text { margin-top: var(--sp-2); max-width: 24rem; } .tiles-caption { margin: var(--sp-6) 0 0; font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .04em; color: var(--c-ink-3); } .fn-list { list-style: none; margin: var(--sp-10) 0 0; padding: var(--sp-8) 0 0; border-top: 1px solid var(--c-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--grid-gap); } .fn-list li { display: flex; gap: var(--sp-3); } .fn-list .icon { width: 1.25rem; height: 1.25rem; margin-top: .125rem; color: var(--c-ink-2); } .fn-list__title { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semi); line-height: 1.4; letter-spacing: -.005em; } .fn-list .text { margin-top: var(--sp-1); max-width: 22rem; } @media (max-width: 54.9375rem) { .tile__media img { width: 170%; } .fn-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } } @media (max-width: 34.9375rem) { .tiles { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } .tile__media { aspect-ratio: 16 / 10; } .tile__media img { top: 12%; width: 130%; } .tile .h4 { margin-top: var(--sp-4); } } /* ---- Für wen ---- */ .audience-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; } .audience-head .section-head { grid-column: 1 / span 7; } .audience-head .btn-row { grid-column: 9 / span 4; justify-content: flex-end; margin: 0; } .audience { list-style: none; margin: var(--sp-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } .audience__card { display: flex; flex-direction: column; padding: var(--sp-8) var(--sp-6) var(--sp-6); background: var(--c-sunken); border-radius: var(--r-lg); } .audience__card .h3 { margin-top: 0; } .audience__claim { margin: var(--sp-2) 0 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.45; color: var(--c-ink); } .audience__card .text { margin-top: var(--sp-3); } @media (max-width: 54.9375rem) { .audience-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); } .audience-head .section-head, .audience-head .btn-row { grid-column: 1; justify-content: flex-start; } .audience { grid-template-columns: minmax(0, 1fr); } .audience__card { padding: var(--sp-6) var(--sp-5) var(--sp-5); } } /* ---- Experte: Porträt auf Medienfläche, Namenskarte, drei Kennzahlen ---- */ /* Porträt: WebP/AVIF mit transparentem Außenbereich, der Kreis füllt das Quadrat; Radius und Schatten folgen ihm. */ .person__photo { position: absolute; z-index: 1; top: 7%; left: 50%; height: 74%; aspect-ratio: 1 / 1; transform: translateX(-50%); border-radius: 50%; box-shadow: var(--shadow-float); } .person__photo img { width: 100%; height: 100%; border-radius: 50%; } /* Karte hängt am Kreis statt an der Unterkante: Kreis endet bei 7 % + 74 % = 81 %, die Karte überlappt ihn um 1.75rem wie im Einspalter. */ .person__card { left: 6%; top: calc(81% - 1.75rem); bottom: auto; width: auto; max-width: min(88%, 21rem); padding: var(--sp-4) var(--sp-5); } .person__name { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semi); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); color: var(--c-ink); } .person__role { margin: 2px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-ink-2); } /* Kennzahlen: Grundzustand Liste mit Haarlinien (auch für Browser ohne Container Queries), nebeneinander erst, wenn die Textspalte breit genug ist, dass keine Beschriftung dreizeilig umbricht. */ .person .feature__text { container-type: inline-size; } .person__facts { list-style: none; margin: var(--sp-8) 0 0; padding: 0; border-top: 1px solid var(--c-line); display: grid; grid-template-columns: minmax(0, 1fr); } .person__facts li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; align-content: start; gap: var(--sp-4); padding-block: var(--sp-3); border-top: 1px solid var(--c-line); } .person__facts li:first-child { border-top: 0; } .person__num { font-size: var(--fs-h4); font-weight: var(--fw-display); line-height: 1.1; letter-spacing: var(--ls-h3); color: var(--c-ink); white-space: nowrap; } .person__facts span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-ink-2); text-wrap: pretty; } @container (min-width: 29rem) { .person__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); padding-top: var(--sp-6); } .person__facts li { grid-template-columns: none; align-items: normal; gap: var(--sp-1); padding-block: 0; border-top: 0; } .person__num { font-size: var(--fs-h3); } } /* Einspaltig: zuerst das Gesicht, dann die Aussage. Porträt und Karte im Fluss statt absolut, damit die Karte den Kreis immer gleich weit überlappt, auch wenn die Rolle auf schmalen Handys zweizeilig wird. */ @media (max-width: 54.9375rem) { .person .person__media { order: -1; aspect-ratio: auto; display: flex; flex-direction: column; padding: 7% 6% 6%; } .person__photo { position: relative; top: auto; left: auto; transform: none; align-self: center; width: min(84%, 24rem); height: auto; } .person__card { position: relative; left: auto; top: auto; align-self: flex-start; max-width: 100%; margin-top: -1.75rem; } } @media (max-width: 44.9375rem) { .person__card { padding: var(--sp-3) var(--sp-4); } } /* ---- Schrittfolge ---- */ .steps { position: relative; list-style: none; margin: var(--sp-16) 0 0; padding: var(--sp-8) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } .steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--grad-brand); } .step__num { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); color: var(--c-ink-3); } .step .icon { display: block; width: 1.5rem; height: 1.5rem; margin-top: var(--sp-6); color: var(--c-ink); } .step .h4 { margin-top: var(--sp-4); } .step .text { margin-top: var(--sp-2); max-width: 21rem; } .step__meta { margin: var(--sp-4) 0 0; font-family: var(--font-mono); font-size: var(--fs-mono-s); letter-spacing: .04em; color: var(--c-ink-3); hyphens: manual; } /* Ein Baustein der Meta-Zeile bleibt zusammen und bricht nur, wenn er allein zu breit ist. */ .step__meta-teil { display: inline-block; } .steps-foot { margin-top: var(--sp-12); } /* Telefon neben den Einstiegs-Knöpfen: auf Handys ohne eingerichtete Mail-App öffnet mailto nichts */ .call-note { margin: var(--sp-4) 0 0; font-size: var(--fs-body-s); line-height: 1.5; color: var(--c-ink-2); } .call-note a { white-space: nowrap; } @media (max-width: 47.9375rem) { .steps { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 var(--sp-8); row-gap: var(--sp-10); margin-top: var(--sp-12); } .steps::before { right: auto; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, #4FAA7B 0%, #3E9491 48%, #4A70B5 100%); } .step .icon { margin-top: var(--sp-4); } } /* ---- Sicherheit ---- */ .security { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--sp-12); align-items: center; } .security__text { grid-column: 1 / span 5; } .security__text .h2 { margin-top: var(--sp-4); } .security__text .text { margin-top: var(--sp-4); max-width: var(--measure-feature); } .trust { grid-column: 7 / span 6; list-style: none; margin: 0; padding: clamp(1rem, .5rem + 2vw, 2.5rem); background: var(--c-tint-neutral); border-radius: var(--r-xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } .trust li { padding: var(--sp-6) var(--sp-5) var(--sp-5); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-hairline); } .trust__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); background: var(--c-green-50); color: var(--c-green-600); } .trust__icon .icon { width: 1.375rem; height: 1.375rem; } .trust__title { margin: var(--sp-4) 0 0; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; } .trust__text { margin: var(--sp-2) 0 0; font-size: .875rem; line-height: 1.5; color: var(--c-ink-2); text-wrap: pretty; } @media (max-width: 54.9375rem) { .security { grid-template-columns: minmax(0, 1fr); } .security__text, .trust { grid-column: 1; } } @media (max-width: 29.9375rem) { .trust { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .trust li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-4); padding: var(--sp-5); } .trust__icon { grid-row: span 2; } .trust__title { margin-top: .125rem; } } /* ---- CTA-Karten ---- */ .cta-sec { padding-block: var(--section-y); } .cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } .cta-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-8); min-height: clamp(28rem, 22rem + 10vw, 30rem); padding: clamp(1.5rem, 1.1rem + 1.74vw, 2.5rem); border-radius: var(--r-xl); overflow: hidden; color: var(--c-on-dark); background: var(--grad-cta-green); } .cta-card--blue { background: var(--grad-cta-blue); } .cta-card .eyebrow { color: var(--c-ink); } .cta-card__title { margin: 0; font-size: var(--fs-cta); line-height: 1.1; letter-spacing: -.024em; font-weight: var(--fw-display); text-wrap: balance; max-width: 16ch; } .cta-card__text { margin: var(--sp-3) 0 0; font-size: var(--fs-body-s); line-height: 1.5; color: var(--c-on-dark); max-width: 30rem; } .cta-card .btn { margin-top: var(--sp-6); } .cta-card__call { margin: var(--sp-4) 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--c-on-dark-2); } .cta-card__call a { color: var(--c-on-dark); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-decoration-thickness: 1px; text-underline-offset: .2em; white-space: nowrap; } @media (max-width: 54.9375rem) { .cta-grid { grid-template-columns: minmax(0, 1fr); } } /* Mobil: keine Mindesthöhe (sonst ~150 px leere Verlaufsfläche), dafür gestauchter Verlauf */ @media (max-width: 47.9375rem) { .cta-card { min-height: 0; background: var(--grad-cta-green-kurz); } .cta-card--blue { background: var(--grad-cta-blue-kurz); } } /* ---- FAQ ---- */ .faq { background: var(--c-sunken); padding-block: var(--section-y); } .faq__list { display: grid; gap: var(--sp-2); margin-top: var(--sp-8); } .faq__item { background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--shadow-hairline); transition: box-shadow var(--dur-fast) var(--ease-out); } .faq__item:hover { box-shadow: 0 0 0 1px var(--c-line-strong); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 3.5rem; padding: var(--sp-4) var(--sp-5); list-style: none; cursor: pointer; border-radius: inherit; font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:focus-visible { outline-offset: 2px; } .faq__icon { width: 1.25rem; height: 1.25rem; color: var(--c-ink-3); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); } .faq__item[open] .faq__icon { transform: rotate(45deg); color: var(--c-ink); } .faq__answer { padding: 0 var(--sp-5) var(--sp-5); max-width: 62ch; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--c-ink-2); } .faq__answer p { margin: 0 0 var(--sp-3); } .faq__answer p:last-child { margin-bottom: 0; } .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; } .faq__item[open]::details-content { block-size: auto; } .faq__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin: var(--sp-8) 0 0; font-size: var(--fs-body-s); color: var(--c-ink-2); } /* ---- Schluss ---- */ .closing { position: relative; isolation: isolate; padding: var(--section-y) 0 var(--closing-bottom); background: var(--grad-haze-soft); } .closing__card { max-width: 28rem; margin-inline: auto; padding: var(--sp-10) var(--sp-8); background: var(--c-surface); border-radius: var(--r-2xl); box-shadow: var(--shadow-float); text-align: center; } .closing__mark { display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto var(--sp-6); border-radius: 22%; } .closing__card .text { margin-top: var(--sp-3); } .closing__card .btn { margin-top: var(--sp-6); } .closing__card .call-note { font-size: var(--fs-small); } /* ---- Fußzeile ---- */ .footer { padding: var(--sp-16) 0 var(--sp-8); border-top: 1px solid var(--c-line); background: var(--c-bg); font-size: var(--fs-small); color: var(--c-ink-2); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-10) var(--grid-gap); } .footer__brand img { height: 1.25rem; width: auto; } .footer__brand p { margin: var(--sp-4) 0 0; max-width: 20rem; line-height: 1.55; } .footer h2 { margin: 0 0 var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-ink-3); } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .footer a { color: var(--c-ink-2); text-decoration: none; transition: color var(--dur-fast); overflow-wrap: anywhere; } .footer a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-16); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; color: var(--c-ink-3); } .footer__bottom a { color: var(--c-ink-3); } .footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); } @media (max-width: 54.9375rem) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 34.9375rem) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 23.9375rem) { .footer__grid { grid-template-columns: minmax(0, 1fr); } } /* ---- Textseiten (Impressum, Datenschutz) ---- */ .legal { padding-top: var(--hero-top); padding-bottom: var(--section-y); } .legal h1 { overflow-wrap: break-word; margin: var(--sp-4) 0 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-display); } .legal h2 { margin: var(--sp-10) 0 var(--sp-2); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-semi); } .legal h1 + .legal__meta { margin-top: var(--sp-3); } .legal__meta { margin: 0 0 var(--sp-8); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-ink-3); } .legal p, .legal li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-2); } .legal p { margin: var(--sp-2) 0; } .legal ul { margin: var(--sp-2) 0; padding-left: 1.25rem; } .legal li + li { margin-top: var(--sp-1); } .legal-nav .nav__inner { grid-template-columns: 1fr auto; } /* ---- Einblenden beim Scrollen ---- */ .js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } } @media print { .js [data-reveal] { opacity: 1; transform: none; } .nav, .nav-scrim, .hero__haze { display: none; } } /* ---- Wartungsberichte: zwei gestaffelte Auswertungen; Geld: läuft links aus ---- */ /* Vorn vollständig sichtbar (Kennungen stehen links), hinten läuft nach außen (links) aus — nie zur Textspalte */ .media__shot.inbox-front { z-index: 2; left: 6%; right: auto; width: 88%; } .media__shot.inbox-back { top: 50%; left: auto; right: 15%; z-index: 1; } /* Die Auswertungen sind rechts beschnitten: weich auslaufen lassen statt Wortreste neben der Überschrift */ .inbox-front .browser__screen img, .inbox-back .browser__screen img { -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 99%); mask-image: linear-gradient(90deg, #000 84%, transparent 99%); } /* Befunde-Karte schmaler: der Status-Chip der Tabelle bleibt ganz sichtbar */ @media (min-width: 45rem) { #bestand .media__card { width: min(60%, 20rem); } } .proof + .features { padding-top: 0; } .float-card__meta, .mini__meta, .mono-note, .media__tag, .verdict__caption { hyphens: manual; } .expert__statement span { display: block; } /* Kosten: Diagramm oben vollständig, Jahresaufstellung als Karte unten rechts (liegt nur auf dem leeren Rand des Diagramms) */ .media__shot.geld-kosten { top: 9%; left: 6%; width: 88%; } .geld-jahr { position: absolute; z-index: 2; right: 6%; bottom: 6%; width: 50%; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); box-shadow: var(--shadow-float); } .geld-jahr img { display: block; width: 100%; height: auto; } @media (max-width: 44.9375rem) { .geld-jahr { width: 72%; } } .media__card--compact { width: min(60%, 18rem); bottom: 5%; right: 5%; } @media (max-width: 44.9375rem) { .media--cards { aspect-ratio: 4 / 5; } .stage-pill { bottom: var(--sp-6); } } /* Tablet: volle Breite, aber nicht quadratisch (sonst je Reihe über 1.100 px) */ @media (min-width: 30rem) and (max-width: 54.9375rem) { .media { aspect-ratio: 4 / 3; } } @media (min-width: 45rem) and (max-width: 54.9375rem) { .media--cards { aspect-ratio: 5 / 4; } .media--geld { aspect-ratio: 1 / 1; } #plaene .media__shot--inset { width: 62%; } } @media (min-width: 30rem) and (max-width: 44.9375rem) { .media--cards { aspect-ratio: 4 / 5; } } .legal-nav .nav__actions .btn--secondary { display: inline-flex; } @media (max-width: 29.9375rem) { .legal-nav__cta { display: none !important; } } .expert .section-head { max-width: 62rem; } /* ---- Verkaufsfassung 27.09.2026 ---- */ /* Hero: der Grund zu handeln (Haftung) steht in der Unterzeile und wird betont */ .lead strong { font-weight: var(--fw-medium); color: var(--c-ink); } /* Alte Anker (#posteingang, #expertengeprueft) als leere Marken: nehmen keinen Platz und keine Rasterzelle ein */ .anker { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; } #wartungsberichte { position: relative; } /* Bezug für die Marke #posteingang (.expert ist schon positioniert) */ /* Anbieter unter der Schlusskarte */ .closing__by { margin: var(--sp-3) 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--c-ink-3); } /* Hero nach Idee 2 (Team, 30.09.2026): Schmerz, "Schluss damit.", Lösung, Claim */ .hero__punch { margin: var(--sp-5) 0 0; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--ls-h3); font-weight: var(--fw-display); color: var(--c-ink); } .hero__text .hero__loesung { margin-top: var(--sp-3); } .hero__loesung strong { font-weight: var(--fw-semi); color: var(--c-ink); } .hero__claim { margin: var(--sp-5) 0 0; font-size: var(--fs-lead); line-height: 1.3; font-weight: var(--fw-semi); letter-spacing: -.005em; color: var(--c-green-600); } /* Hero nach Tinas Fassung (01.10.2026): Aussage in drei festen Zeilen „So geht / Gebäudebetrieb / heute.“, ohne Trennstrich; „heute.“ in Grün. Darunter die Aufzählung ruhig, „Eine Plattform.“ fett. */ .hero__text .display { max-width: 17em; } .hero__zeile { display: block; } .hero__heute { color: var(--c-green-600); } .hero__text .hero__punch .line { display: block; color: var(--c-ink); font-weight: var(--fw-display); } .hero__text .hero__punch { font-weight: 500; color: var(--c-ink-2); } /* ---- Teamseite /team/ (30.09.2026) ---- */ /* Aktuelle Seite im Menü: dunkle Schrift und grüne Unterkante (Startseite markiert Abschnitte nur per Farbe) */ .nav__links a[aria-current="page"] { color: var(--c-ink); box-shadow: inset 0 -2px 0 var(--c-green-600); } .nav__menu a.menu-link[aria-current="page"] { color: var(--c-green-700); } .nav__menu a.menu-link[aria-current="page"] .icon { color: var(--c-green-600); } /* Fünf Menüpunkte: unter 1200 px reicht die Mitte des 1fr-auto-1fr-Rasters nicht mehr für Links plus zwei Knöpfe. Dort bekommen die Links den Platz zwischen Logo und Knöpfen und rücken enger zusammen. */ @media (min-width: 64rem) and (max-width: 74.9375rem) { .nav__inner { grid-template-columns: auto minmax(0, 1fr) auto; } .nav__links { justify-self: center; gap: var(--sp-6); } } .team-intro { padding-top: var(--hero-top); text-align: center; } .team-intro__title { margin: var(--sp-5) auto 0; max-width: 14em; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-display); text-wrap: balance; } .team-intro .lead { margin: var(--sp-5) auto 0; max-width: 34rem; } .team { padding-top: clamp(3rem, 2rem + 4vw, 5rem); } /* Karten gleich breit (max. 24rem), mittig: einspaltig untereinander, ab 704 px zwei nebeneinander, ab 1024 px drei, sobald die dritte Karte sichtbar ist. */ .team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 24rem); justify-content: center; column-gap: clamp(1.5rem, .5rem + 3vw, 3rem); row-gap: var(--sp-16); } .member { display: flex; flex-direction: column; min-width: 0; } .member[hidden] { display: none; } @media (min-width: 44rem) { /* Nebeneinander stehen Name, Rolle, Text, „Ansprechpartner für" und Knopf jeder Karte auf einer Linie (Subgrid). Kein row-gap: im Subgrid läge er zwischen allen acht Zeilen jeder Karte. Die zweite Reihe rückt per Rand ab. */ .team__grid { grid-template-columns: repeat(2, minmax(0, 24rem)); row-gap: 0; } @supports (grid-template-rows: subgrid) { .member:not([hidden]) { display: grid; grid-template-rows: subgrid; grid-row: span 8; } } .member:nth-child(n+3) { margin-top: var(--sp-16); } } @media (min-width: 64rem) { .team__grid:has(> .member:nth-child(3):not([hidden])) { grid-template-columns: repeat(3, minmax(0, 24rem)); } .team__grid:has(> .member:nth-child(3):not([hidden])) > .member:nth-child(3) { margin-top: 0; } } .member__media { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: radial-gradient(90% 70% at 50% 115%, rgba(79, 170, 123, .22) 0%, rgba(79, 170, 123, 0) 70%), var(--c-tint-green); } .member__media--blue { background: radial-gradient(90% 70% at 50% 115%, rgba(74, 112, 181, .2) 0%, rgba(74, 112, 181, 0) 70%), var(--c-tint-blue); } .member__media--teal { background: radial-gradient(90% 70% at 50% 115%, rgba(62, 148, 145, .22) 0%, rgba(62, 148, 145, 0) 70%), var(--c-tint-teal); } .member__photo { display: block; height: 76%; aspect-ratio: 1 / 1; border-radius: 50%; box-shadow: var(--shadow-float); } .member__photo img { width: 100%; height: 100%; border-radius: 50%; } .member__initials { display: grid; place-items: center; background: var(--c-surface); font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem); font-weight: var(--fw-display); line-height: 1; letter-spacing: -.03em; color: var(--c-blue-700); user-select: none; } .member__media--green .member__initials { color: var(--c-green-700); } .member__media--teal .member__initials { color: var(--c-teal-700); } .member__name { margin: var(--sp-6) 0 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semi); text-wrap: balance; } .member__role { margin: var(--sp-1) 0 0; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.45; color: var(--c-ink); } .member__meta { margin: var(--sp-2) 0 0; font-family: var(--font-mono); font-size: var(--fs-mono-s); line-height: 1.5; letter-spacing: .04em; color: var(--c-ink-3); hyphens: manual; text-wrap: balance; } .member__bio { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); align-content: start; } .member__bio .text { margin: 0; } .member__for { margin: var(--sp-6) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--c-line); font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; font-weight: 500; color: var(--c-ink-3); } .member__topics { margin-top: var(--sp-3); } .member__topics li { color: var(--c-ink); } .member__cta { margin-top: var(--sp-6); } /* Startseite, Abschnitt Experte: Weg zur Teamseite neben „Frage stellen" */ .link-arrow { display: inline-flex; align-items: center; gap: .375rem; height: var(--btn-h); padding: 0 .25rem; font-size: .9375rem; font-weight: 600; line-height: 1; letter-spacing: -.005em; color: var(--c-ink); text-decoration: none; white-space: nowrap; border-radius: var(--r-xs); } .link-arrow .icon { width: 1rem; height: 1rem; stroke-width: 1.75; transition: transform var(--dur-fast) var(--ease-out); } .link-arrow:hover .icon { transform: translateX(3px); } /* Ausgangslage (Text von Tina, 30.09.2026): drei kurze Sätze je eine Zeile, die Lösung dunkel abgesetzt */ .feature__text .problem__loesung { margin-top: var(--sp-4); color: var(--c-ink); font-weight: var(--fw-medium); } /* Für wen (Text von Tina, 30.09.2026): nebeneinander stehen Titel, Kurzsatz und Text der drei Karten auf einer Linie */ @media (min-width: 55rem) { @supports (grid-template-rows: subgrid) { .audience { row-gap: 0; } .audience__card { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; } } } /* KI & Freigabe (Text von Tina, 01.10.2026): der Ablauf in einer Zeile unter dem Text */ .expert__ablauf { margin: var(--sp-6) auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: rgba(255, 255, 255, .82); } .expert__ablauf span { display: inline-flex; align-items: center; gap: var(--sp-3); } .expert__ablauf .icon { width: 1rem; height: 1rem; color: var(--c-green-300); stroke-width: 1.75; } /* Beispiel „unsicherer KI-Vorschlag“: der Grund der Prüfung in der Farbe „fällig“ */ .verdict__rows .warn { color: var(--c-status-due); } /* ---- Einstieg mit Gebäude im Schnitt (Bild, 01.10.2026) ---- Text links, Gebäude rechts (ab 1024 px); darunter Text, dann Gebäude. Das Bild ist ein KI-Rendering (Higgsfield); die Beschriftungen sind HTML-Pins darüber, damit sie scharf, übersetzbar und änderbar bleiben. Ein Pin sitzt mit seinem Punkt auf --x/--y (in % der Bildfläche), der Chip hängt an einer waagerechten Linie der Länge --l. */ .hero__kopf { padding-top: var(--hero-top); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); align-items: center; } .hero__kopf .hero__text { padding-top: 0; } @media (min-width: 64rem) { .hero__kopf { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--grid-gap); } .hero__kopf .hero__text .display { font-size: clamp(2.75rem, 1.2rem + 3.6vw, 4.75rem); } .hero__kopf .hero__punch { font-size: clamp(1.25rem, .45rem + 1.25vw, 1.75rem); } } .hero__bild { --hb-seite: 4 / 5; position: relative; margin: 0; width: 100%; max-width: 34rem; aspect-ratio: var(--hb-seite); justify-self: center; transform: perspective(1600px) rotateY(var(--neig-x, 0deg)) rotateX(var(--neig-y, 0deg)); transition: transform .9s var(--ease-out); } @media (min-width: 64rem) { .hero__bild { width: min(100%, 38rem); max-width: none; justify-self: end; } } .hero { overflow-x: clip; } .hero__bild img, .hero__film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } /* Unten und an den Seiten weich in den Seitengrund auslaufen. */ .hero__bild img, .hero__film { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 80%, transparent 99%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 80%, transparent 99%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-composite: intersect; } .hero__film { opacity: 0; transition: opacity .8s var(--ease-out); } .hero__film.ist-bereit { opacity: 1; } /* Leuchtebenen (Lage und Größe in % der Bildfläche, wie beim Freistellen). „screen“ hellt nur auf: bei Deckkraft 0 sieht man das Bild, wie es ist. */ .leuchten { position: absolute; left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); background: var(--lbild) center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: 0; pointer-events: none; } .leuchten--lueftung { --lx: 40%; --ly: 13%; --lw: 42%; --lh: 15%; --lbild: url("../img/leuchten-lueftung.webp?v=20261001"); } .leuchten--rwa { --lx: 39%; --ly: 25%; --lw: 10%; --lh: 14%; --lbild: url("../img/leuchten-rwa.webp?v=20261001"); } .leuchten--aufzug { --lx: 62%; --ly: 40%; --lw: 14%; --lh: 47%; --lbild: url("../img/leuchten-aufzug.webp?v=20261001"); } .leuchten--tuer { --lx: 42%; --ly: 55%; --lw: 9%; --lh: 13%; --lbild: url("../img/leuchten-tuer.webp?v=20261001"); } .leuchten--heizung { --lx: 33%; --ly: 68%; --lw: 26%; --lh: 19%; --lbild: url("../img/leuchten-heizung.webp?v=20261001"); } /* Bauplan-Raster mit grünem Schimmer hinter dem freigestellten Gebäude; läuft nach außen und unten aus. */ .hero__raster { position: absolute; inset: -4% -12% 4% -12%; pointer-events: none; background: radial-gradient(ellipse 46% 40% at 56% 42%, rgb(79 170 123 / .30), rgb(79 170 123 / 0) 100%), linear-gradient(rgb(14 21 18 / .085) 1px, transparent 1px) 50% 0 / 28px 28px, linear-gradient(90deg, rgb(14 21 18 / .085) 1px, transparent 1px) 50% 0 / 28px 28px; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 56% 44%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 56% 44%, #000 35%, transparent 100%); } /* Scan-Linie: fährt beim Laden einmal von oben nach unten über das Gebäude (5 % → 92 % in 2 s, linear); wo sie eine Anlage erreicht (--t), leuchtet die Anlage auf und ihr Pin erscheint. */ .hero__scan { position: absolute; left: 3%; right: 3%; top: 0; height: 18%; opacity: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(79 170 123 / 0) 0, rgb(79 170 123 / .09) 62%, rgb(79 170 123 / .26) 95%, rgb(35 137 90 / .95) 98.6%, rgb(35 137 90 / .95) 100%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); } /* Lichtimpuls: dieselbe Ebene, nur ein wandernder Streifen davon ist sichtbar (Luft im Kanal, Fahrt im Schacht). */ .leuchten--fluss { display: none; -webkit-mask-image: linear-gradient(100deg, transparent 0 38%, #000 50%, transparent 62% 100%); mask-image: linear-gradient(100deg, transparent 0 38%, #000 50%, transparent 62% 100%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; } .leuchten--fluss-hoch { -webkit-mask-image: linear-gradient(to top, transparent 0 40%, #000 50%, transparent 60% 100%); mask-image: linear-gradient(to top, transparent 0 40%, #000 50%, transparent 60% 100%); -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-position: 0 0; mask-position: 0 0; } .pin { --pin-r: .3125rem; position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; transform: translate(calc(-1 * var(--pin-r)), -50%); pointer-events: none; } .pin--links { flex-direction: row-reverse; transform: translate(calc(-100% + var(--pin-r)), -50%); } .pin--ok { --pin-farbe: #22A86A; --pin-text: var(--c-green-600); } .pin--faellig { --pin-farbe: #EEA32F; --pin-text: var(--c-status-due); } .pin--ueberfaellig { --pin-farbe: #E5484D; --pin-text: var(--c-status-over); } .pin__punkt { position: relative; flex: none; width: calc(2 * var(--pin-r)); height: calc(2 * var(--pin-r)); border-radius: 50%; background: var(--pin-farbe); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgb(14 21 18 / .28); } .pin__punkt::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--pin-farbe); opacity: 0; } .pin__linie { flex: none; width: var(--l, 2.25rem); height: 1px; background: rgb(14 21 18 / .42); } .pin--rechts .pin__linie { transform-origin: left center; } .pin--links .pin__linie { transform-origin: right center; } .pin__chip { display: flex; align-items: center; gap: .5rem; padding: .375rem .75rem .375rem .375rem; background: var(--c-surface); border-radius: 12px; box-shadow: var(--shadow-float); white-space: nowrap; } .pin__icon { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 8px; background: var(--c-sunken); color: var(--c-ink); flex: none; } .pin__icon .icon { width: 1.0625rem; height: 1.0625rem; } .pin__text { display: grid; gap: 1px; line-height: 1.2; } .pin__name { font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; color: var(--c-ink); } .pin__status { display: inline-flex; align-items: center; gap: .3125rem; font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--pin-text); } .pin__status::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; } /* Schmal: Bild randlos über die volle Breite, Chips ohne Symbolkästchen — sonst ragen die äußeren Chips (Brandschutztür links, Aufzug rechts) über den Rand. */ @media (max-width: 47.9375rem) { .hero__bild { width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); } .pin { --pin-r: .25rem; } .pin__linie { width: calc(var(--l, 2.25rem) * .5); } .pin__chip { padding: .3125rem .5625rem; border-radius: 9px; } .pin__icon { display: none; } .pin__name { font-size: .6875rem; } .pin__status { font-size: .5625rem; } } /* Auftritt: Bild blendet ein, die Scan-Linie fährt über das Gebäude, und jede Anlage leuchtet auf, sobald die Linie sie erreicht (--t); gleichzeitig erscheint ihr Pin (Punkt, Linie, Chip). Danach atmen die Anlagen, „Überfällig“ pulsiert. Bei reduzierter Bewegung steht alles sofort und still da. */ @media (prefers-reduced-motion: no-preference) { .js .hero__bild img { animation: hb-ein .9s var(--ease-out) both; } .js .hero__raster { animation: hb-ein 1.6s var(--ease-out) .2s both; } .js .hero__scan { animation: hero-scan 2s linear .4s both; } .js .pin__punkt { animation: pin-punkt .45s var(--ease-out) both; animation-delay: var(--t, .6s); } .js .pin__linie { animation: pin-linie .4s var(--ease-out) both; animation-delay: calc(var(--t, .6s) + .12s); } .js .pin__chip { animation: pin-chip .45s var(--ease-out) both; animation-delay: calc(var(--t, .6s) + .24s); } .pin--ueberfaellig .pin__punkt::after { animation: pin-puls 1.8s var(--ease-out) infinite; animation-delay: calc(var(--t, .6s) + 1s); } .js .leuchten { animation: leuchten-auf 1.4s var(--ease-out) both, leuchten-atmen 6s ease-in-out infinite; animation-delay: calc(var(--t, .6s) - .08s), calc(var(--t, .6s) + 1.32s); } .js .leuchten--faellig { animation-duration: 1.4s, 3.2s; } .js .leuchten--ueberfaellig { animation: leuchten-auf 1.4s var(--ease-out) both, leuchten-alarm 1.8s ease-in-out infinite; animation-delay: calc(var(--t, .6s) - .08s), calc(var(--t, .6s) + 1s); } .js .leuchten--fluss { display: block; opacity: .9; animation: leuchten-fluss 6s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--t, .6s) + 2s); } .js .leuchten--fluss-hoch { animation-name: leuchten-fluss-hoch; animation-duration: 7s; } } @keyframes hero-scan { 0% { opacity: 0; transform: translateY(-72%); } 8% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(411%); } } @keyframes leuchten-auf { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .3; } } @keyframes leuchten-atmen { 0%, 100% { opacity: .3; } 50% { opacity: .75; } } @keyframes leuchten-alarm { 0% { opacity: 1; } 65% { opacity: .2; } 100% { opacity: 1; } } @keyframes leuchten-fluss { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 55%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } } @keyframes leuchten-fluss-hoch { 0% { -webkit-mask-position: 0 0; mask-position: 0 0; } 55%, 100% { -webkit-mask-position: 0 100%; mask-position: 0 100%; } } @keyframes hb-ein { from { opacity: 0; } to { opacity: 1; } } @keyframes pin-punkt { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } } @keyframes pin-linie { from { transform: scaleX(0); } to { transform: none; } } @keyframes pin-chip { from { opacity: 0; transform: translateX(var(--pin-weg, -.375rem)); } to { opacity: 1; transform: none; } } .pin--links { --pin-weg: .375rem; } @keyframes pin-puls { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }