:root { /* Das helle Thema erklaert sich ausdruecklich hell. Ohne diese Zeile galt das Meta "light dark": bei dunklem Betriebssystem malte Chrome Radio, Checkbox und Scrollbalken dunkel auf die helle Seite -- auf /en/contact sah jede Auswahl wie schon gewaehlt aus (gemessen 2026-09-28). Dunkel setzt html[data-theme]. */ color-scheme:light; --c-fin-s:#1E7A4E; --c-fin-w:#DCF0E5; --c-zeit-s:#9A6408; --c-zeit-w:#F9EDD0; --c-doku-s:#2B5FA3; --c-doku-w:#DFE9F7; --c-med-s:#7A3E9D; --c-med-w:#F0E4F8; --c-dat-s:#0E7490; --c-dat-w:#D9EEF4; --c-rech-s:#BC4B08; --c-rech-w:#FBE5D1; --c-sich-s:#5B50B8; --c-sich-w:#E7E4F8; --petrol-tint:#EBF2F6; --petrol-soft:#A8D4E8; --petrol-bright:#3A8DB5; --petrol-mid:#266A8C; --petrol:#1B4965; --petrol-dark:#16405A; --petrol-deep:#0D2233; --petrol-night:#081824; --ink:#0D1B24; --ink-soft:#3C5262; --body:#46555F; --muted:#59696F; --white:#FFFFFF; --paper:#FFFFFF; --off:#F6F8FA; --wash:#F2F6F8; --line:#E3E9ED; --line-strong:#CFDBE3; --green:#2E9E6B; --ok:#1F7A4D; --warn:#B4432F; --accent:#2C7A9B; --font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-0:.8125rem; --fs-1:.9375rem; --fs-2:1.0625rem; --fs-3:clamp(1.18rem, .5vw + 1.05rem, 1.4rem); --fs-4:clamp(1.5rem, 1.4vw + 1.1rem, 1.9rem); --fs-5:clamp(1.9rem, 3.4vw, 2.7rem); --size-hero:clamp(2.15rem, 3.3vw + 0.75rem, 3.3rem); --size-h2:clamp(1.7rem, 2.6vw + 0.6rem, 2.5rem); --size-h3:clamp(1.12rem, 1vw + 0.9rem, 1.3rem); --size-lead:clamp(1.05rem, 0.5vw + 0.95rem, 1.2rem); --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px; --radius-sm:8px; --radius:14px; --radius-lg:20px; --radius-pill:999px; /* Bedienelemente: Knoepfe, Chips, Eingabefelder. Der Wert stand bis zum 2026-09-18 hartkodiert in .btn und nirgends sonst -- Chips liefen deshalb als Pillen, Felder mit 9px, Karten mit 11px. Ein Formular aus drei verschiedenen Rundungen sieht zusammengewuerfelt aus. */ --radius-control:10px; --shadow-card:0 1px 2px rgba(13,27,36,.05), 0 8px 24px rgba(13,27,36,.06); --shadow-lift:0 12px 32px rgba(27,73,101,.16); --shadow-frame:0 24px 64px rgba(13,34,51,.22); --motion-instant:100ms; --motion-fast:140ms; --motion-base:200ms; --motion-slow:300ms; --ease-standard:cubic-bezier(.2, .6, .2, 1); --ease-enter:cubic-bezier(0, .55, .45, 1); --ease-exit:cubic-bezier(.55, 0, 1, .45); --motion-distance-sm:4px; --motion-distance-md:12px; --motion:var(--motion-base); --ease:var(--ease-standard); --pad-section:clamp(56px, 9vw, 108px); --container:1180px; --measure:68ch; --header-h:69px; --sticky-h:69px; /* Semantische Paare fuer beide Darstellungen:Button, Status, gedaempfter Text. Dark-Werte im Block darunter. */ --btn-primary-bg:var(--petrol); --btn-primary-fg:#fff; --btn-primary-hover:#16405A; --dim-text:#2f3940; --status-ok-fg:#1a7f37; --status-ok-ink:#17624f; --status-ok-bg:#dff1eb; --status-done-fg:#49705f; --warn-bg:#FBEDEA; --paper-raised:#fcfdfd; } html[data-theme="dark"] { color-scheme:dark; --petrol-tint:#183544; --petrol-deep:#10293a; --btn-primary-bg:#9bd0df; --btn-primary-fg:#0b151d; --btn-primary-hover:#b4dce8; --paper-raised:#1b3342; --dim-text:#c0d0d8; --status-ok-fg:#74dbaa; --status-ok-ink:#8fdcb9; --status-ok-bg:#163a30; --status-done-fg:#8fd3b4; --warn-bg:#3a2320; --petrol-soft:#78bdd4; --petrol-bright:#9cdef2; --petrol-mid:#82c9e2; --petrol:#9bd0df; --petrol-dark:#b4dce8; --ink:#f3f8fa; --ink-soft:#cad8de; --body:#d2dfe4; --muted:#a9bdc6; --white:#0b151d; --paper:#142530; --off:#12232d; --wash:#172d39; --line:#2e4652; --line-strong:#5b7886; --green:#6dd7a7; --ok:#74dbaa; --warn:#ffab8e; --accent:#8ed3e7; --shadow-card:0 1px 2px rgba(0,0,0,.20), 0 8px 24px rgba(0,0,0,.22); --shadow-lift:0 12px 32px rgba(0,0,0,.28); --shadow-frame:0 24px 64px rgba(0,0,0,.40); } @media (prefers-reduced-motion: reduce) { :root { --motion-instant:.01ms; --motion-fast:.01ms; --motion-base:.01ms; --motion-slow:.01ms; --motion-distance-sm:0px; --motion-distance-md:0px; } html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; } } @view-transition { navigation:auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation:none; } } ::view-transition-old(root) { animation:kuk-vt-out var(--motion-fast) var(--ease-exit) both; } ::view-transition-new(root) { animation:kuk-vt-in var(--motion-base) var(--ease-enter) both; } @keyframes kuk-vt-out { to { opacity:0; } } @keyframes kuk-vt-in { from { opacity:0; transform:translateY(var(--motion-distance-md)); } } /* Beim Darstellungswechsel ist der neue Zustand eine Kreisflaeche, deren Mittelpunkt der ausloesende Schalter ist. Die dynamisch berechnete Endgroesse erreicht auch die am weitesten entfernte Fensterecke. */ html.is-theme-transition::view-transition-old(root), html.is-theme-transition::view-transition-new(root) { mix-blend-mode:normal; } html.is-theme-transition::view-transition-old(root) { z-index:1; animation:kuk-theme-old 760ms cubic-bezier(.22, 1, .36, 1) both; } html.is-theme-transition::view-transition-new(root) { z-index:2; clip-path:circle(0 at var(--theme-reveal-x) var(--theme-reveal-y)); animation:kuk-theme-reveal 820ms cubic-bezier(.16, 1, .3, 1) both; } @keyframes kuk-theme-old { 45% { filter:brightness(.92) saturate(.78); transform:scale(.992); } to { filter:brightness(.86) saturate(.7); transform:scale(.985); } } @keyframes kuk-theme-reveal { 0% { filter:brightness(1.28) saturate(.7); } 58% { filter:brightness(1.08) saturate(1.08); } to { clip-path:circle(var(--theme-reveal-radius) at var(--theme-reveal-x) var(--theme-reveal-y)); filter:brightness(1) saturate(1); } } html.is-theme-transition::view-transition-group(kuk-theme-toggle) { z-index:4; animation:kuk-theme-toggle-pop 820ms cubic-bezier(.22, 1, .36, 1) both; } html.is-theme-transition::view-transition-old(kuk-theme-toggle) { animation:kuk-theme-icon-out 260ms ease-in both; } html.is-theme-transition::view-transition-new(kuk-theme-toggle) { animation:kuk-theme-icon-in 680ms 110ms cubic-bezier(.22, 1, .36, 1) both; } @keyframes kuk-theme-toggle-pop { 0%, 100% { transform:scale(1); } 34% { transform:scale(.82); } 64% { transform:scale(1.16); } } @keyframes kuk-theme-icon-out { to { opacity:0; transform:rotate(-100deg) scale(.45); } } @keyframes kuk-theme-icon-in { from { opacity:0; transform:rotate(170deg) scale(.45); } to { opacity:1; transform:rotate(360deg) scale(1); } } .site-header { view-transition-name:kuk-header; } .site-header .brand { view-transition-name:kuk-brand; } html.is-theme-transition .site-header, html.is-theme-transition .site-header .brand { view-transition-name:none; } @media (prefers-reduced-motion: reduce) { html.is-theme-transition::view-transition-old(root), html.is-theme-transition::view-transition-new(root) { animation:none; } } *, *::before, *::after { box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { margin:0; font-family:var(--font-body); font-size:1.0625rem; line-height:1.65; color:var(--body); background:var(--white); text-rendering:optimizeLegibility; overflow-wrap:anywhere; } table { overflow-wrap:normal; } img, svg { max-width:100%; height:auto; display:block; } h1, h2, h3, h4 { color:var(--ink); line-height:1.15; margin:0 0 .5em; hyphens:manual; overflow-wrap:break-word; } @media (max-width: 640px) { h2, h3, h4 { hyphens:auto; hyphenate-limit-chars:10 4 4; } } h1 { font-size:var(--size-hero); font-weight:800; letter-spacing:-0.02em; } h2 { font-size:var(--size-h2); font-weight:750; letter-spacing:-0.015em; } h3 { font-size:var(--size-h3); font-weight:650; } p { margin:0 0 1em; } a { color:var(--petrol); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:3px; } p a, li a, td a, dd a, figcaption a, .faq-body a { text-decoration:underline; text-underline-offset:3px; } .site-nav a, .page-nav a, .toc a, .footer-col a, .breadcrumb a, .know-list a, .art-list > li > a, .art-sum-jump a, .footer-legal a, .wt-sublist a { text-decoration:none; } ul { margin:0; padding:0; list-style:none; } button { font:inherit; cursor:pointer; } ::selection { background:var(--petrol); color:#fff; } /* max() wegen viewport-fit=cover: im Querformat ist der Notch-Inset groesser als 18 px. */ .container { max-width:var(--container); margin-inline:auto; padding-left:max(clamp(18px, 4.5vw, 40px), env(safe-area-inset-left)); padding-right:max(clamp(18px, 4.5vw, 40px), env(safe-area-inset-right)); } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link { position:absolute; left:-9999px; top:0; background:var(--btn-primary-bg); color:var(--btn-primary-fg); padding:10px 16px; border-radius:0 0 8px 0; z-index:400; } .skip-link:focus { left:0; } :focus-visible { outline:3px solid var(--petrol-bright); outline-offset:2px; border-radius:3px; box-shadow:0 0 0 5px var(--white) !important; } /* Ein akzentuierter Fokusring fuer vier Sonderfaelle, an einer Stelle. */ .art-cmp-scroll:focus-visible,.art-rechtsgrundlagen > summary:focus-visible,.request-pause:focus-visible,.request-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .btn { display:inline-flex; align-items:center; gap:8px; border-radius:var(--radius-control); border:1.5px solid transparent; font-weight:600; line-height:1.2; text-decoration:none; text-align:center; max-width:100%; padding:13px 22px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } .btn:hover { text-decoration:none; transform:translateY(-1px); } .btn-primary { background:var(--btn-primary-bg); color:var(--btn-primary-fg); box-shadow:0 6px 18px rgba(27,73,101,.28); } .btn-primary:hover { background:var(--btn-primary-hover); box-shadow:0 10px 24px rgba(27,73,101,.34); } .btn-ghost { border-color:var(--line); color:var(--ink); background:var(--white); } .btn-ghost:hover { border-color:var(--petrol); } .btn-sm { padding:9px 16px; font-size:.92rem; } .site-header { position:relative; z-index:300; padding-top:max(10px,env(safe-area-inset-top)); padding-inline:max(12px,env(safe-area-inset-left)); background:transparent; border-bottom:0; } .site-header.is-scrolled { background:transparent; box-shadow:none; } /* Klebt bei top:0: ohne inset-top liegen Marke und Menuetaste unter der Statusleiste. */ .header-row { display:flex; flex-wrap:nowrap; align-items:center; column-gap:clamp(14px, 1.6vw, 24px); row-gap:0; min-height:72px; padding-block:4px; background:transparent; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none; min-width:0; } .brand:hover { text-decoration:none; } .brand-mark { width:36px; height:36px; border-radius:9px; background:var(--petrol); padding:4px; } .brand-text { display:flex; flex-direction:column; line-height:1.05; } .brand-name { font-weight:800; letter-spacing:.04em; color:var(--ink); font-size:.98rem; } .brand-sub { font-size:.68rem; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; } /* "Software & Services" (seit 2026-09-27) ist doppelt so lang wie "Software": auf schmalen Telefonen schob er das Menue in eine zweite Zeile. Enger gesetzt statt gekuerzt. */ @media (max-width:480px) { .brand-sub { font-size:.6rem; letter-spacing:.05em; } } .site-nav { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; column-gap:clamp(12px, 1.3vw, 22px); row-gap:6px; margin-left:auto; min-width:0; } /* Hauptnavigation: ein Markeneffekt fuer alle sechs Punkte, Panel als Summary links / Details rechts. Messwerte: docs/www/startseite-architektur.md. */ .site-nav > a:not(.btn),.nav-gruppe>summary { position:relative; color:var(--body); font-weight:550; font-size:.95rem; padding:10px 2px; white-space:nowrap; border-radius:4px; } .site-nav > a:not(.btn)::after,.nav-gruppe>summary::after { content:""; position:absolute; left:0; right:0; bottom:3px; height:2px; background:var(--petrol); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; } /* Vier Zustaende, die sich kombinieren duerfen, ohne sich zu ueberschreiben: current = hier bin ich (blau, Unterlinie steht dauerhaft) open = das schaue ich an (blau, Flaeche, gedrehter Pfeil) hover = da ist der Zeiger (blau, Unterlinie faehrt ein) focus = das bediene ich (Fokusring, aus :focus-visible global) Der staerkste farbige Ruf bleibt der Knopf rechts. */ .site-nav > a:not(.btn):hover,.nav-gruppe>summary:hover,.nav-gruppe[open]>summary, .site-nav [aria-current],.site-nav [data-current-section], .site-nav > a[aria-current="page"],.site-nav > a[data-current-section] { color:var(--petrol); text-decoration:none; } .site-nav > a:not(.btn):hover::after,.nav-gruppe>summary:hover::after, .site-nav > a[aria-current="page"]::after, .site-nav [data-current-section]::after { transform:scaleX(1); } .site-nav [data-current-section],.site-nav > a[aria-current] { font-weight:650; } /* Offen ist ein anderer Zustand als hier-bin-ich: eine Flaeche statt einer Linie, damit ein geoeffnetes Produkt-Panel den aktuellen Bereich "Funktionen" nicht verdeckt. */ .nav-gruppe[open]>summary { background:var(--petrol-tint); } .nav-gruppe[open]>summary>span { rotate:180deg; } /* Die aktuelle Seite im Panel: ruhige Flaeche und ein Punkt davor, kein zweiter Unterstrich -- der gehoert der Reiterzeile. */ .nav-spalten a[aria-current],.nav-summe a[aria-current] { background:var(--off); color:var(--petrol); font-weight:700; } .nav-spalten a[aria-current]::before { content:""; position:absolute; left:-2px; top:50%; width:3px; height:16px; margin-top:-8px; background:var(--petrol); border-radius:2px; } .nav-gruppe { flex:none; } .nav-gruppe>summary { min-height:44px; display:flex; align-items:center; gap:5px; cursor:pointer; list-style:none; } .nav-gruppe>summary::-webkit-details-marker { display:none; } .nav-gruppe>summary>span { font-size:.72em; transition:rotate .15s ease; } .nav-gruppe[open]>summary>span { rotate:180deg; } /* Der sichtbare Abstand bleibt. Die offene Gruppe deckt auch die Strecke unter dem 44-px-Trigger bis zur 72-px-Kopfkante als Pointer-Zone ab. */ @media (min-width:1200px) { .nav-gruppe[open]>summary::before { content:""; position:absolute; left:0; right:0; top:100%; height:20px; } } /* Mega-Panel: volle Kopfbreite als Flaeche, Inhalt auf Containerbreite, drei Zonen (Zusammenfassung | Gruppe | Gruppe). Bis zum 2026-09-17 war es eine 980-px-Karte mit 8 px Luft unter dem Kopf -- genau dieser Spalt war der Hover-Korridor, in dem das Menue beim Uebergang zuklappte. Jetzt schliesst das Panel buendig an die Unterkante an; der Bezug ist .site-header. */ .nav-panel { position:absolute; z-index:60; left:0; right:0; top:100%; width:auto; transform:none; display:block; padding:0; background:var(--paper); border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; box-shadow:0 28px 56px rgba(13,27,36,.16); } /* Der Inhalt beginnt an derselben Kante wie Marke und Reiter: die Kopfzeile ist calc(100% - clamp(24px,3vw,48px)) breit und liegt im Innenabstand des Kopfes (max(12px, safe-area)). Mit Containerbreite stand der Text bei 1440 px 139 px rechts der Marke -- gemessen am 2026-09-17. */ /* Eine Achse fuer alles im Kopf. Diese Zeile baute bis zum 2026-09-18 die alte Header-Formel nach, samt der 12-px-Notch-Korrektur -- drei eigene Rechnungen fuer dieselbe Kante. Bei 2560 px stand der Panelinhalt dadurch bei 36 px, waehrend der Seiteninhalt bei 530 begann. Die FLAECHE bleibt viewportbreit; nur ihr Inhalt folgt --shell. */ .nav-panel-inner { width:var(--shell); margin-inline:auto; padding:28px 0 34px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2fr); gap:clamp(24px,3.6vw,60px); } .nav-gruppe[open]>summary { font-weight:650; } /* Utilities und Knopf sind Geschwister der Navigation in .header-row; den Abstand liefert deren column-gap, kein eigener Rand. */ .nav-cta { display:flex; align-items:center; margin-left:0; } .nav-cta .btn { white-space:nowrap; } /* Utilities rechts: Suche, Darstellung. Ein Sprachschalter erscheint hier erst, wenn eine Gegenseite existiert (Locale-Owner folgt in eigenem Sprint). */ .nav-utils { display:flex; align-items:center; gap:6px; margin-left:0; padding-left:clamp(6px,1.2vw,18px); border-left:1px solid var(--line); } .search-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; min-width:40px; min-height:40px; padding:0; border:1px solid transparent; border-radius:9px; background:var(--off); color:var(--muted); font:inherit; } .search-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } .search-toggle:hover,.search-toggle[aria-expanded="true"] { border-color:var(--line); background:var(--wash); color:var(--petrol); } /* Suche: eigene Landmark () unter der Kopfzeile, volle Breite wie das Mega-Panel. */ search { display:block; }search[hidden] { display:none; } .site-search { position:absolute; left:0; right:0; top:100%; z-index:70; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 28px 56px rgba(13,27,36,.16); } /* Dieselbe Kante wie Marke, Reiter und Panelinhalt -- nicht die Containerbreite: auf 1866 px begann das Suchfeld sonst 307 px rechts der Marke (live in Chrome gemessen, 2026-09-17). */ .site-search-inner { width:var(--shell); max-width:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 14px; padding:18px 0 22px; } #site-search-input { min-height:48px; padding:10px 16px; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; font-size:1.05rem; } #site-search-input:focus { outline:3px solid var(--petrol-mid); outline-offset:2px; border-color:var(--petrol); } .site-search-close { min-height:48px; padding:0 16px; border:1px solid var(--line); border-radius:10px; background:var(--off); color:var(--ink); font:inherit; font-weight:600; } .site-search-results { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px clamp(16px,2.4vw,36px); } .site-search-results:empty { display:none; } /* Schnellwahl unter dem Suchfeld: die haeufigsten Ziele per Klick oder Tipp, ausgeblendet, sobald Treffer dastehen. */ .site-search-schnell { grid-column:1 / -1; } .site-search-results:not(:empty) ~ .site-search-schnell { display:none; } .site-search .site-search-schnell-titel { margin:0 0 8px; color:var(--muted); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } .site-search-schnell ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; } .site-search-schnell a { display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--radius-pill); background:var(--paper); color:var(--ink); font-size:.92rem; font-weight:600; text-decoration:none; } .site-search-schnell a:focus-visible { border-color:var(--petrol-mid); color:var(--petrol); } @media (hover: hover) { .site-search-schnell a:hover { border-color:var(--petrol-mid); color:var(--petrol); } } .site-search:focus { outline:none; } @media (pointer: coarse) { .site-search-schnell a { min-height:44px; } } .site-search-gruppe-name { margin:0 0 6px; color:var(--muted); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } .site-search-gruppe ul { list-style:none; margin:0; padding:0; } .site-search-gruppe a { display:block; margin-left:-8px; padding:7px 8px; border-radius:8px; color:var(--ink); font-weight:600; font-size:.95rem; line-height:1.35; text-decoration:none; } .site-search-gruppe a small { display:block; color:var(--muted); font-size:.8rem; font-weight:450; } .site-search-gruppe a:hover,.site-search-gruppe a:focus-visible { background:var(--off); color:var(--petrol); } /* Smart-sticky: klebt oben, faehrt per transform weg (kein Reflow, kein CLS). */ .site-header { position:sticky; top:0; transition:transform .28s ease, background-color .2s ease, box-shadow .2s ease; } .site-header.is-scrolled { background:var(--paper); box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(13,27,36,.08); } .site-header.is-hidden { transform:translateY(-100%); } /* Eine Hauptzeile; Sprachwahl erst nach vollstaendiger englischer Freigabe. */ .site-header { padding-top:env(safe-area-inset-top); } .nav-darstellung { display:none; } @media (max-width:359px) { .brand-sub { display:none; } .site-header .header-row { column-gap:8px; } } @media (prefers-reduced-motion:reduce) { .site-header { transition:none; } } /* Sprungziele landen nicht unter dem eingeblendeten Kopf -- zentral, nicht je Seite. */ [id] { scroll-margin-top:calc(var(--header-h, 72px) + 16px); } .nav-summe { display:flex; flex-direction:column; gap:7px; padding-right:clamp(16px,2.2vw,34px); border-right:1px solid var(--line); } .nav-summe strong { color:var(--ink); font-size:1.12rem; font-weight:700; line-height:1.25; } .nav-summe p { margin:0; max-width:36ch; font-size:.88rem; line-height:1.5; } .nav-summe a { margin-top:auto; padding-top:6px; color:var(--petrol); font-weight:650; font-size:.9rem; } .nav-spalten { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px clamp(14px,2vw,28px); } .nav-summe b,.nav-spalten h3 { color:var(--muted); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; } .nav-spalten h3 { margin:0 0 6px; } .nav-spalten a { display:block; position:relative; margin-left:-8px; padding:6px 22px 6px 8px; border-radius:8px; color:var(--ink); font-size:.92rem; font-weight:600; line-height:1.35; } .nav-spalten a b { display:block; color:var(--muted); font-size:.79rem; font-weight:450; } .nav-spalten a:after { content:"\2192"; position:absolute; right:7px; top:6px; opacity:0; transition:translate .18s ease,opacity .18s ease; } .nav-spalten a:hover { background:var(--off); color:var(--petrol); text-decoration:none; } .nav-spalten a:hover:after { opacity:1; translate:3px 0; } html[data-theme="dark"] .nav-spalten a:hover { background:var(--wash); } /* Zwei ruhige Linkspalten. Fremde Ziele kuendigen den neuen Tab an. */ .nav-panel { max-height:calc(100dvh - var(--header-h, 72px)); overflow-y:auto; overscroll-behavior:contain; } .nav-direkt a[target="_blank"]::after { content:"↗"; opacity:1; } .nav-panel a:focus-visible { outline:3px solid var(--petrol-mid); outline-offset:2px; } .nav-toggle { display:none; align-items:center; gap:8px; margin-left:auto; flex:none; background:none; border:1px solid var(--line); border-radius:10px; min-height:44px; padding:0 12px; color:var(--ink); font:inherit; font-weight:600; } .nav-toggle:hover { border-color:var(--petrol); color:var(--petrol); } .nav-toggle-bars { display:flex; flex-direction:column; gap:4px; width:18px; } .nav-toggle-bars span { display:block; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform:translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity:0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); } .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; min-width:40px; min-height:40px; padding:0; border:1px solid transparent; border-radius:9px; background:var(--off); color:var(--muted); flex:none; font:inherit; view-transition-name:kuk-theme-toggle; } .theme-toggle:hover { border-color:var(--line); background:var(--wash); color:var(--petrol); } .theme-toggle-icon { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .theme-toggle-icon-sun { display:none; } .theme-toggle-icon-moon { display:block; } html[data-theme="dark"] .theme-toggle-icon-sun { display:block; } html[data-theme="dark"] .theme-toggle-icon-moon { display:none; } .theme-toggle.is-theme-switching { animation:kuk-theme-control-pulse 760ms cubic-bezier(.22, 1, .36, 1) both; } .theme-toggle.is-theme-switching .theme-toggle-icon { animation:kuk-theme-icon-spin 620ms cubic-bezier(.22, 1, .36, 1) both; } @keyframes kuk-theme-control-pulse { 0%, 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(44,122,155,0); } 32% { transform:scale(.96); } 64% { transform:scale(1.04); box-shadow:0 0 0 10px rgba(44,122,155,.12); } } @keyframes kuk-theme-icon-spin { from { transform:rotate(-140deg) scale(.55); } to { transform:rotate(0) scale(1); } } html.is-theme-transition-fallback body { animation:kuk-theme-page-pulse 560ms cubic-bezier(.22, 1, .36, 1) both; } @keyframes kuk-theme-page-pulse { 0%, 100% { opacity:1; filter:brightness(1) saturate(1); } 34% { opacity:.86; filter:brightness(1.12) saturate(.82); } } html.is-theme-transition-fallback::before, html.is-theme-transition-fallback::after { content:""; position:fixed; z-index:2147483647; left:var(--theme-reveal-x); top:var(--theme-reveal-y); width:38px; height:38px; border:1.5px solid var(--petrol-bright); border-radius:50%; transform:translate(-50%, -50%); box-shadow:0 0 18px color-mix(in srgb, var(--petrol-bright) 42%, transparent); pointer-events:none; animation:kuk-theme-ring 760ms cubic-bezier(.22, 1, .36, 1) both; } html.is-theme-transition-fallback::after { animation-delay:140ms; } @keyframes kuk-theme-ring { 0% { width:38px; height:38px; opacity:0; } 12% { opacity:.72; } 100% { width:calc(var(--theme-reveal-radius) * 2); height:calc(var(--theme-reveal-radius) * 2); opacity:0; } } @media (prefers-reduced-motion: reduce) { .theme-toggle.is-theme-switching-reduced { animation:kuk-theme-button-soft 220ms ease-out both !important; animation-duration:220ms !important; } @keyframes kuk-theme-button-soft { 0%, 100% { opacity:1; box-shadow:0 0 0 0 rgba(44,122,155,0); } 50% { opacity:.72; box-shadow:0 0 0 8px rgba(44,122,155,.12); } } } @media (max-width: 1199px) { } .hero { padding:clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); } .hero h1 { text-wrap:balance; } .arch-diagram { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s5); flex-wrap:wrap; } .arch-col { display:grid; gap:var(--s2); } .arch-clients { gap:var(--s1); } .arch-node { border:1px solid var(--ink-soft); border-radius:var(--radius-sm); background:var(--wash); padding:10px 14px; font-size:var(--fs-1); color:var(--body); text-align:center; } .arch-node-main { border-color:var(--petrol); background:var(--petrol-tint); color:var(--ink); font-weight:650; padding:var(--s3) var(--s4); border-radius:var(--radius); } .arch-node-main span { display:block; font-weight:400; color:var(--body); font-size:var(--fs-0); margin-top:4px; } .arch-node-optional { border-style:dashed; color:var(--muted); } .arch-arrow { color:var(--muted); font-size:var(--fs-2); } .arch-external { text-align:center; } .arch-arrow-down { display:block; font-size:var(--fs-0); margin-bottom:6px; } @media (max-width: 720px) { .arch-diagram { flex-direction:column; align-items:stretch; } .arch-arrow { transform:rotate(90deg); text-align:center; } .arch-arrow-down { transform:none; } } .schema { margin:var(--s5) 0 0; } .schema figcaption { margin-top:var(--s3); max-width:62ch; color:var(--muted); font-size:var(--fs-0); } .schema-kette { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s5); } .schema-glied { position:relative; min-width:0; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); padding:var(--s3) var(--s4) var(--s4); } .schema-glied:not(:last-child)::after { content:"→"; position:absolute; top:50%; right:calc(-1 * var(--s5) / 2); color:var(--petrol-mid); font-size:var(--fs-2); line-height:1; transform:translate(50%, -50%); } .schema-glied--ziel { border-color:var(--petrol); background:var(--petrol-tint); } .schema .schema-rolle { margin:0 0 var(--s2); max-width:none; font-size:var(--fs-0); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--petrol-mid); } .schema .schema-zeile { margin:0; max-width:none; color:var(--ink); font-weight:600; } .schema .schema-quelle { margin:4px 0 0; max-width:none; color:var(--muted); font-size:var(--fs-1); } .schema-buendel { border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); padding:var(--s4); } .schema .schema-kopf { max-width:none; border-bottom:1px solid var(--line); padding-bottom:var(--s3); margin:0 0 var(--s3); } .schema-kopf b { display:block; color:var(--ink); font-size:var(--fs-3); } .schema-teile { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s3); margin:0; padding:0; list-style:none; } .schema-teile li { min-width:0; border-left:2px solid var(--petrol-soft); padding-left:var(--s3); } @media (max-width: 980px) { .schema-teile { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s4) var(--s3); } } @media (max-width: 760px) { .schema-kette, .schema-teile { grid-template-columns:1fr; gap:var(--s3); } .schema-glied:not(:last-child)::after { content:"↓"; top:auto; right:auto; bottom:calc(-1 * var(--s3) / 2 - 2px); left:50%; transform:translate(-50%, 50%); } .schema-kette { gap:var(--s4); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion:no-preference) { .schema-glied { animation:kuk-lift var(--motion-slow) var(--ease-enter) both; animation-timeline:view(); animation-range:entry 20% entry 85%; } .schema-glied:nth-child(2) { animation-range:entry 26% entry 90%; } .schema-glied:nth-child(3) { animation-range:entry 32% entry 95%; } .schema-glied:nth-child(4) { animation-range:entry 38% entry 100%; } .schema-glied:nth-child(5) { animation-range:entry 44% entry 100%; } } } /* Zwei Datenpfade nebeneinander, jeder senkrecht: Was im Betrieb bleibt, steht innerhalb der gestrichelten Hausgrenze, was das Haus verlaesst, darunter. Seit 2026-10-02; ersetzt das SVG, das beim Medienbudget entfallen war und nur seine Bildunterschrift zurueckgelassen hatte. Die Selektoren sind absichtlich spezifischer als die Pfeilregel der Kette, damit keine Reihenfolge und kein Media Query sie still ueberstimmt. */ .schema-pfade { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s5); align-items:start; } .schema-pfad { display:grid; gap:var(--s4); min-width:0; } .schema .schema-pfad-titel { margin:0; max-width:none; color:var(--ink); font-size:var(--fs-2); font-weight:700; } .schema-haus { display:grid; gap:var(--s4); border:1.5px dashed var(--petrol-mid); border-radius:var(--radius-lg); padding:var(--s3); } .schema .schema-haus-name { margin:0 0 calc(-1 * var(--s2)); max-width:none; color:var(--petrol-mid); font-size:var(--fs-0); font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .schema-pfade .schema-pfad .schema-glied::after { content:none; } .schema-pfade .schema-haus > .schema-glied:not(:last-child)::after { content:"↓"; position:absolute; top:auto; right:auto; bottom:calc(-1 * var(--s4) / 2); left:50%; color:var(--petrol-mid); font-size:var(--fs-2); line-height:1; transform:translate(-50%, 50%); } .schema-pfade .schema-glied--extern { border-color:var(--warn); background:var(--warn-bg); } .schema-pfade .schema-glied--extern::before { content:"↓"; position:absolute; top:calc(-1 * var(--s4) / 2 - 2px); left:50%; color:var(--warn); font-size:var(--fs-2); line-height:1; transform:translate(-50%, -50%); } .schema-pfade .schema-glied--extern .schema-rolle { color:var(--warn); } .schema-pfade .schema-glied--leer { border-style:dashed; background:transparent; } .schema-pfade .schema-glied--leer .schema-rolle { color:var(--muted); } @media (max-width: 760px) { .schema-pfade { grid-template-columns:1fr; gap:var(--s5); } } /* Zwei Fassungen nebeneinander (seit 2026-10-02): vorher und nachher oder zwei gleichrangige Ansaetze, die Teile je Fassung untereinander. Dazu drei Varianten fuer die zurueckgekehrten Ratgebergrafiken: Inseln mit drei Teilen, ein Teil, das fehlt, und eine Kette mit vier Gliedern. Doppelte Klassen halten die Spezifitaet ueber den Breitenregeln weiter oben, damit diese Regeln dort gewinnen, wo sie sollen, und sonst nirgends. */ .schema-vergleich { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s4); } .schema-vergleich .schema-teile { grid-template-columns:1fr; gap:var(--s3); } .schema-buendel.schema-buendel--schwach { border-style:dashed; background:transparent; } .schema-buendel--schwach .schema-teile li { border-left-color:var(--line-strong); } .schema-buendel.schema-buendel--ziel { border-color:var(--petrol); background:var(--petrol-tint); } .schema-buendel--ziel .schema-teile li { border-left-color:var(--petrol-mid); } .schema-teile.schema-teile--drei { grid-template-columns:repeat(3, minmax(0, 1fr)); } .schema-teile .schema-luecke { border-left:2px dashed var(--warn); } .schema .schema-luecke .schema-rolle { color:var(--warn); } .schema-kette.schema-kette--vier { grid-template-columns:repeat(4, minmax(0, 1fr)); } .schema-kette--vier .schema-glied { padding-inline:var(--s3); hyphens:auto; hyphenate-limit-chars:10 4 4; } @media (max-width: 760px) { .schema-vergleich, .schema-teile.schema-teile--drei, .schema-kette.schema-kette--vier { grid-template-columns:1fr; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion:no-preference) { .schema-vergleich > .schema-buendel { animation:kuk-lift var(--motion-slow) var(--ease-enter) both; animation-timeline:view(); animation-range:entry 20% entry 85%; } .schema-vergleich > .schema-buendel:nth-child(2) { animation-range:entry 30% entry 95%; } } } /* Fortschrittslinie am Ablauf (Profil "product", seit 2026-10-02): Auf den Funktionsseiten zieht beim Lesen der nummerierten Kette eine Petrol-Linie ueber die graue Verbindung -- sie zeigt, wie weit man im Ablauf ist. Nur transform, kein Inhalt haengt daran: ohne Unterstuetzung oder bei reduzierter Bewegung bleibt die graue Linie, wie sie war. Die Nummer liegt ueber der Linie (z-index), sonst schnitte die Linie durch die Ziffer. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion:no-preference) { .f-chain li::before { z-index:1; } .f-chain li:not(:last-child)::after { content:""; position:absolute; top:0; bottom:0; left:-2px; width:2px; background:var(--petrol-mid); transform-origin:top; transform:scaleY(0); animation:kuk-linie linear both; animation-timeline:view(); animation-range:entry 70% cover 60%; } } } @keyframes kuk-linie { to { transform:scaleY(1); } } /* Der Weg zu KUKANILEA (seit 2026-10-02): die Wegleiste am Ende jeder Produktseite, erzeugt von sync_lebensweg.py aus website/lebensweg.json. Fuenf Stationen; die eigene ist markiert, die davor liegenden tragen eine Petrol-Ziffer, die danach liegenden bleiben ruhig. Keine Bewegung: die Leiste orientiert, sie erklaert keinen Ablauf. Ziffern auf Petrol nehmen --paper als Schrift, damit sie hell und dunkel lesbar bleiben. */ .lebensweg { border-top:1px solid var(--line); background:var(--wash); padding-block:clamp(40px, 5vw, 64px); } .lebensweg .lebensweg-titel { margin:0 0 var(--s4); max-width:none; font-size:var(--fs-0); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol-mid); } .lebensweg-schritte { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--s4); margin:0; padding:0; list-style:none; } .lebensweg-schritte li { position:relative; min-width:0; } .lebensweg-schritte li:not(:last-child)::after { content:"→"; position:absolute; top:50%; right:calc(-1 * var(--s4) / 2); transform:translate(50%, -50%); color:var(--petrol-mid); font-size:var(--fs-1); line-height:1; } .lebensweg-schritte a { display:grid; align-content:start; gap:4px; height:100%; box-sizing:border-box; padding:var(--s3); border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--paper); color:var(--body); text-decoration:none; transition:border-color var(--motion-fast) var(--ease-standard); } @media (hover: hover) { .lebensweg-schritte a:hover { border-color:var(--petrol-mid); } } .lebensweg-schritte a:focus-visible { outline:3px solid var(--petrol-bright); outline-offset:2px; } .lebensweg-nr { display:inline-grid; place-items:center; width:26px; height:26px; margin-bottom:4px; border-radius:50%; background:var(--line); color:var(--ink); font-size:.8rem; font-weight:700; } .lebensweg-schritte b { color:var(--ink); font-size:var(--fs-2); } .lebensweg-zeile { color:var(--muted); font-size:var(--fs-0); line-height:1.4; } .lebensweg-schritte .ist-davor .lebensweg-nr { background:var(--petrol-soft); color:#0D1B24; } .lebensweg-schritte .ist-hier a { border-color:var(--petrol); background:var(--petrol-tint); box-shadow:inset 0 0 0 1px var(--petrol); } .lebensweg-schritte .ist-hier .lebensweg-nr { background:var(--petrol); color:var(--paper); } .lebensweg .lebensweg-weiter { margin:var(--s4) 0 0; max-width:none; } .lebensweg-weiter a { display:inline-block; padding-block:12px; font-weight:700; } @media (max-width: 860px) { .lebensweg-schritte { grid-template-columns:1fr; gap:var(--s2); } .lebensweg-schritte li:not(:last-child)::after { content:none; } .lebensweg-schritte a { grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:var(--s3); row-gap:0; min-height:44px; padding:var(--s2) var(--s3); } .lebensweg-nr { grid-row:span 2; margin-bottom:0; } } .section { padding-block:var(--pad-section); } .kicker { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--petrol-mid); margin-bottom:12px; } .section-lead { font-size:var(--size-lead); } .mod-group + .mod-group { margin-top:clamp(28px, 4vw, 44px); } .page-nav { margin:24px 0 0; } .page-nav ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; } .page-nav a { display:inline-flex; align-items:center; min-height:40px; padding:6px 15px; border:1px solid var(--line-strong); border-radius:var(--radius-pill); background:#fff; font-size:.9rem; font-weight:550; color:var(--ink-soft); } .page-nav a:hover { color:var(--petrol); border-color:var(--petrol-soft); text-decoration:none; } .section[id], [id].article-hero { scroll-margin-top:calc(var(--sticky-h) + 16px); } .faq-item { border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin-bottom:12px; box-shadow:var(--shadow-card); } .faq-item summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; font-weight:650; color:var(--ink); cursor:pointer; } .faq-item summary::-webkit-details-marker { display:none; } .faq-item summary::after { content:""; flex:none; width:22px; height:22px; background:url('data:image/svg+xml;utf8,') center / contain no-repeat; transition:transform .2s ease; } .faq-item[open] summary::after { transform:rotate(180deg); } .faq-body { padding:0 22px 20px; font-size:.97rem; } .faq-body p { margin-bottom:.6em; } .faq-body p:last-child { margin-bottom:0; } .site-footer { background:var(--petrol-night); color:#a3b8c6; padding:clamp(54px, 6vw, 88px) 0 26px; font-size:.92rem; } .site-footer > .container { width:var(--shell); max-width:none; padding-inline:0; } .footer-invite { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr); gap:clamp(32px,6vw,100px); align-items:end; padding-bottom:clamp(48px,6vw,82px); border-bottom:1px solid rgba(255,255,255,.16); } .footer-eyebrow { margin:0 0 16px; color:var(--petrol-soft); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .footer-invite h2 { max-width:17ch; margin:0 0 18px; color:#fff; font-size:clamp(2rem,3.3vw,3.35rem); line-height:1.05; letter-spacing:-.04em; } .footer-invite div > p:last-child { max-width:58ch; margin:0; color:#bed0d9; font-size:clamp(.98rem,1.2vw,1.12rem); line-height:1.65; } .footer-actions { display:flex; flex-direction:column; align-items:flex-start; gap:15px; } .footer-primary { display:inline-flex; align-items:center; gap:12px; padding:14px 18px; border-radius:8px; background:#fff; color:var(--petrol-deep) !important; font-weight:750; } .footer-grid { display:grid; grid-template-columns:minmax(260px,1.6fr) repeat(3,minmax(150px,1fr)); gap:clamp(28px,4vw,68px); padding-block:clamp(44px,5vw,68px); } .footer-brand .brand-static { display:inline-flex; align-items:center; gap:10px; } .footer-brand .brand-name { color:#fff; } .footer-brand .brand-sub { color:#a3b8c6; } .footer-brand p { margin:18px 0 0; max-width:31em; line-height:1.65; } .footer-head { font-weight:700; color:#fff; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; margin:0 0 12px; } .site-footer ul { list-style:none; margin:0; padding:0; } .site-footer li { padding:0; } .site-footer a { color:#a3b8c6; } .site-footer li > a, .footer-legal a, .footer-legal-btn { display:inline-block; padding-block:6px; } .footer-col small { display:block; color:#819aa8; font-size:.76rem; } .site-footer a:focus-visible, .footer-legal-btn:focus-visible { outline:2px solid var(--petrol-soft); outline-offset:3px; border-radius:3px; } .footer-base { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.12); padding-top:22px; font-size:.85rem; } .footer-copy { margin:0; } .footer-legal { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; } .footer-legal li { padding:0; } .footer-legal-btn { background:none; border:0; color:#a3b8c6; padding-inline:0; font:inherit; } .site-footer a:hover,.footer-legal-btn:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; } @media (max-width: 1060px) { .footer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .footer-brand { grid-column:1 / -1; } } @media (max-width: 760px) { .footer-invite { grid-template-columns:1fr; align-items:start; } .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .footer-brand { grid-column:1 / -1; } } @media (max-width: 480px) { /* Zwei Linkspalten nebeneinander statt drei untereinander: die Fingerziele sind seit 2026-10-02 44 px hoch, und einspaltig wurde der Fuss am Telefon zum laengsten Abschnitt jeder Seite. Der Kontakt mit seinen Adressen behaelt die volle Breite. */ .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; } .footer-col { padding-top:18px; border-top:1px solid rgba(255,255,255,.1); } .footer-col[aria-labelledby="ft-kontakt"] { grid-column:1 / -1; } .footer-base { align-items:flex-start; } } .cookie-banner { position:fixed; inset-inline:0; bottom:0; z-index:350; background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -12px 40px rgba(13,27,36,.14); transform:translateY(105%); opacity:0; transition:transform var(--motion-slow) var(--ease-standard), opacity var(--motion-slow) var(--ease-standard); } .cookie-banner.is-open { transform:translateY(0); opacity:1; } /* Der Dialog nimmt beim Oeffnen selbst den Fokus (keine Wahl vorgezeichnet, site.js openBanner). Er ist kein Bedienelement; ein Ring um die ganze Leiste waere nur Rahmen. Die Knoepfe darin behalten ihren Fokusring. */ .cookie-banner:focus-visible { outline:none; box-shadow:0 -12px 40px rgba(13,27,36,.14) !important; border-radius:0; } @media (prefers-reduced-motion: reduce) { .cookie-banner { transition:none; } } /* Fixiert am unteren Rand: ohne inset-bottom liegen die Knoepfe unter der Gestenleiste. */ .cookie-inner { max-width:var(--container); margin-inline:auto; display:grid; gap:10px; padding:18px max(clamp(18px, 4.5vw, 40px), env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(clamp(18px, 4.5vw, 40px), env(safe-area-inset-left)); } .cookie-text { font-size:.9rem; margin:0; } .cookie-categories { display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.86rem; } .cookie-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .cookie-btn-accept, .cookie-btn-decline { background:var(--paper); color:var(--petrol); border:1.5px solid var(--petrol); border-radius:9px; padding:10px 18px; font-weight:600; min-width:min(11rem, 100%); text-align:center; } .cookie-btn-selection { background:var(--btn-primary-bg); color:var(--btn-primary-fg); border:0; border-radius:9px; padding:10px 18px; font-weight:600; } .cookie-details { margin:0; } .cookie-details:not([hidden]) { display:grid; gap:10px; padding-top:4px; } .cookie-details-toggle { background:none; border:0; color:var(--petrol); font-weight:600; padding:10px 6px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; } .cookie-details-toggle::after { content:" \25be"; text-decoration:none; display:inline-block; transition:transform .2s ease; } .cookie-details-toggle[aria-expanded="true"]::after { transform:rotate(180deg); } .cookie-link { font-size:.84rem; } @keyframes kuk-lift { from { transform:translateY(var(--motion-distance-md)); } } .toc a { transition:color var(--motion-fast) var(--ease-standard); } .toc a.is-current { color:var(--petrol); font-weight:650; } .toc a.is-current::after { content:""; flex:none; align-self:stretch; width:3px; margin-left:auto; background:var(--petrol); border-radius:2px; } .copy-anchor { background:none; border:0; padding:2px 6px; margin-left:8px; color:var(--muted); font-size:.7em; font-weight:600; line-height:1; opacity:0; transition:opacity var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .prose h2:hover .copy-anchor, .copy-anchor:focus-visible { opacity:1; } .copy-anchor:hover { color:var(--petrol); } .copy-anchor[data-state="ok"] { opacity:1; color:var(--ok); } .wt-chip { transition:background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .btn, .copy-anchor { transition:none; } .btn:hover { transform:none; }} .article-hero { padding:clamp(58px,7vw,94px) 0 clamp(48px,6vw,78px); background:var(--wash); border-bottom:1px solid var(--line); } .breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.84rem; color:var(--muted); margin-bottom:8px; } .breadcrumb a { color:var(--muted); display:inline-flex; align-items:center; min-height:32px; } .breadcrumb a:hover { color:var(--petrol); } .article-hero h1 { max-width:19ch; font-size:clamp(2.2rem,4.3vw,3.8rem); line-height:1.06; letter-spacing:-.038em; text-wrap:balance; } .article-meta { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.88rem; color:var(--muted); margin-top:14px; } .article-meta strong { color:var(--ink); font-weight:600; } .article-layout { display:grid; grid-template-columns:minmax(0, 1fr) 264px; gap:clamp(28px, 4vw, 64px); align-items:start; padding-block:clamp(28px, 4vw, 48px); } .toc { position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; background:#fff; box-shadow:var(--shadow-card); } /* Klebt nur, wenn seine Spalte so lang ist wie der Artikel. Seit dem 2026-09-05 (align-items:start) war die Seitenleiste genau so hoch wie das Verzeichnis -- sticky hatte keinen Weg, und das Verzeichnis lief nach dem ersten Bildschirm mit weg, waehrend es die aktuelle Stelle markierte. Im echten Chrome gemessen am 2026-10-02: Seitenleiste 579 px, Artikel 10 127 px. In allen 24 Ratgebern traegt sie nur das Verzeichnis. Auf niedrigen Bildschirmen scrollt es in sich, statt unten abgeschnitten zu kleben. */ .article-layout > aside { align-self:stretch; } @media (min-width: 901px) { .toc { max-height:calc(100vh - 112px); overflow-y:auto; overscroll-behavior:contain; } } .toc-title { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--petrol-mid); margin:0 0 10px; } .toc ol { margin:0; padding:0; list-style:none; counter-reset:toc; } .toc li { padding:5px 0; font-size:.9rem; } .toc a { color:var(--body); display:flex; gap:8px; } .toc a::before { counter-increment:toc; content:counter(toc, decimal-leading-zero); color:var(--petrol-soft); font-weight:700; font-size:.8rem; margin-top:1px; flex-shrink:0; white-space:nowrap; font-variant-numeric:tabular-nums; min-width:1.75em; } .toc a:hover { color:var(--petrol); text-decoration:none; } .prose { max-width:72ch; } .prose h2 { margin-top:1.6em; scroll-margin-top:calc(var(--sticky-h) + 28px); } .prose h2 .prose h3 { margin-top:1.3em; } .prose ul:not([class]) { list-style:none; margin:0 0 1.2em; } .prose ul:not([class]) li { position:relative; padding:4px 0 4px 26px; } .prose ul:not([class]) li::before { content:""; position:absolute; left:2px; top:12px; width:14px; height:8px; border-left:2px solid var(--petrol-bright); border-bottom:2px solid var(--petrol-bright); transform:rotate(-45deg) scale(.8); border-radius:1px; } .prose ol:not([class]) { margin:0 0 1.2em; padding-left:1.3em; } .prose ol:not([class]) li { padding:4px 0; } .info-box { display:flex; gap:14px; border-radius:var(--radius); padding:16px 18px; margin:1.4em 0; font-size:.96rem; border:1px solid var(--line); background:var(--off); } .info-box > svg { flex:none; margin-top:2px; stroke:var(--petrol); } .info-box strong { color:var(--ink); } .info-box-tip { background:var(--petrol-tint); border-color:rgba(27,73,101,.25); } .info-box-warn { background:#FDF6E9; border-color:#E8D3A8; } .info-box-warn > svg { stroke:#A87718; } .info-box p { margin:0; } @media (max-width: 1199px) { .figure-scroll svg { min-width:700px; } } .prose-table-wrap { overflow-x:auto; margin:1.4em 0; } .prose table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:.94rem; box-shadow:var(--shadow-card); } .prose th, .prose td { padding:11px 14px; text-align:left; border-top:1px solid var(--line); vertical-align:top; } .prose thead th { border-top:0; background:var(--off); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .article-cta { border-radius:var(--radius-lg); background:var(--petrol-deep); color:#C6D6E0; padding:clamp(24px, 3.5vw, 40px); margin:2.2em 0; } .article-cta h2, .article-cta h3 { color:#fff; margin-top:0; } .article-cta p { color:#B9CBD8; } .article-cta .art-next-note { margin:18px 0; padding:14px 16px; border-left:3px solid var(--orange); border-radius:0 8px 8px 0; background:rgba(255, 255, 255, .07); color:#DCE8EF; } .article-cta .art-next-note strong { color:#fff; } .article-cta .btn { margin-top:6px; } .related { margin-top:clamp(32px, 5vw, 56px); } .related h2 { font-size:1.3rem; } @media (max-width: 1199px) { .article-layout { grid-template-columns:minmax(0, 1fr); } .toc { position:static; order:-1; } } /* Sechs Reiter und der volle CTA bekommen ab 1200 px ausreichend Platz. */ @media (max-width: 1199px) { .nav-toggle { display:inline-flex; margin-left:0; } /* Lupe bleibt neben der Marke, die Darstellung liegt im geoeffneten Menue. */ .nav-utils { margin-left:auto; gap:6px; padding:0; border-left:0; } .nav-utils .search-toggle,.nav-utils .theme-toggle { width:44px; min-width:44px; min-height:44px; } /* Die Suchleiste haengt ausserhalb des Kopf-Innenabstands (left:0/right:0); ohne eigenen Rand stuende das Feld an der Bildschirmkante, und der 8-px-Hover-Ueberhang der Treffer erzeugte waagerechtes Scrollen. */ .site-search-inner { grid-template-columns:minmax(0,1fr); padding:14px max(18px,env(safe-area-inset-right)) 18px max(18px,env(safe-area-inset-left)); } .site-search-results { grid-template-columns:1fr; } .nav-panel { position:static; display:block; width:auto; transform:none; padding:0 0 8px 14px; background:none; border:0; box-shadow:none; } .nav-panel-inner { display:block; width:auto; max-width:none; padding:0; } .nav-summe { padding:0; border:0; }.nav-summe b,.nav-summe strong,.nav-summe p { display:none; } .nav-spalten { display:block; } .nav-spalten h3,.nav-spalten a b,.nav-aufgaben,.nav-desktop { display:none; } .nav-direkt h3 { display:block; margin:12px 8px 2px; } .nav-summe a { margin:0; font-size:.95rem; } .nav-summe a > span { display:none; } .nav-darstellung { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; padding:16px 0; border-top:1px solid var(--line); color:var(--muted); } .nav-darstellung .theme-toggle { display:inline-flex; gap:8px; width:auto; min-height:44px; padding:0 14px; } .nav-darstellung [data-theme-label] { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; } .nav-panel a { min-height:44px; padding:12px 8px; font-size:1rem; }.nav-gruppe>summary { justify-content:space-between; } /* Derselbe CTA-Knoten wie auf dem Desktop. Er ist Geschwister der Navigation und erscheint nur mit geoeffnetem Menue, fest am unteren Rand -- immer sichtbar, auch wenn die Reiterliste scrollt. */ .nav-cta { display:none; } .site-nav.is-open ~ .nav-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:291; margin:0; padding:12px clamp(18px,4.5vw,40px) calc(12px + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -12px 32px rgba(13,27,36,.12); } .nav-cta .btn { width:100%; justify-content:center; min-height:48px; } .site-nav { position:absolute; top:100%; left:0; right:0; z-index:290; flex-direction:column; flex-wrap:nowrap; align-items:stretch; column-gap:0; row-gap:0; justify-content:flex-start; margin-left:0; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 24px 48px rgba(13,27,36,.16); padding:6px clamp(18px, 4.5vw, 40px) 96px; transform:translateY(-14px); opacity:0; visibility:hidden; transition:none; max-height:calc(100dvh - var(--header-h, 70px)); overflow-y:auto; overscroll-behavior:contain; } html[data-theme="dark"] .site-nav { background:var(--paper); } /* Geoeffnet fuellt das Menue die Ansicht bis zum unteren Rand: der fest stehende Beratungsknopf liegt dann sichtbar in der Flaeche, nicht ueber dem Seiteninhalt (--header-h setzt site.js aus der Kopfhoehe). */ .site-nav.is-open { transform:none; opacity:1; visibility:visible; min-height:calc(100dvh - var(--header-h, 70px)); } .site-nav > a:not(.btn),.nav-gruppe>summary { padding:15px 2px; border-bottom:1px solid var(--off); font-size:1.05rem; min-height:48px; display:flex; align-items:center; } .site-nav > a:not(.btn)::after { bottom:6px; } } @media (max-width: 1199px) and (prefers-reduced-motion: reduce) { .site-nav { transition:none; } } @media (max-width: 480px) { .header-row { column-gap:10px; } .nav-toggle { width:44px; min-width:44px; padding:0; justify-content:center; } .nav-toggle-text { display:none; } } .art-sum { margin:0 0 clamp(26px, 3.4vw, 40px); padding:clamp(18px, 2.4vw, 26px); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); background:linear-gradient(180deg, rgba(44, 122, 155, .045), rgba(44, 122, 155, 0) 70%), #fff; } .art-sum > h2 { font-size:var(--fs-2); margin:0 0 .6em; } .art-sum ul { margin:0 0 .9em; padding-left:1.1em; } .art-sum li { margin-bottom:.35em; font-size:.97rem; } .art-sum-meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 .9em; padding-bottom:.8em; border-bottom:1px solid var(--line); font-size:var(--fs-0); color:var(--muted); } .art-sum-meta b { color:var(--ink-soft); font-weight:600; } .art-sum-jump { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; } .art-sum-jump li { margin:0; } .art-sum-jump a { display:inline-block; padding:5px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-pill); font-size:var(--fs-0); color:var(--ink-soft); text-decoration:none; transition:border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .art-sum-jump a:hover, .art-sum-jump a:focus-visible { border-color:var(--accent); color:var(--accent); } .art-inset { margin:clamp(22px, 2.8vw, 32px) 0; padding:clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px); border-radius:var(--radius); background:#F7FAFB; border:1px solid var(--line); border-left:3px solid var(--ink-soft); } .art-inset > :last-child { margin-bottom:0; } .art-inset-label { display:block; margin:0 0 .45em; font-size:var(--fs-0); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); } .art-inset p { font-size:1.02rem; } .art-inset[data-variant="achtung"] { border-left-color:#B4551F; background:#FDF7F2; } .art-inset[data-variant="achtung"] .art-inset-label { color:#8F441A; } .art-inset[data-variant="definition"] { border-left-color:var(--accent); background:#F5FAFC; } .art-inset[data-variant="definition"] .art-inset-label { color:var(--accent); } .art-facts { margin:clamp(22px, 2.8vw, 32px) 0; padding:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .art-facts > div { display:grid; grid-template-columns:1fr; gap:2px 18px; padding:12px clamp(14px, 1.8vw, 20px); border-top:1px solid var(--line); } .art-facts > div:first-child { border-top:0; } .art-facts > div:nth-child(odd) { background:#FAFCFD; } .art-facts dt { font-weight:700; font-size:var(--fs-1); color:var(--ink-soft); margin:0; } .art-facts dd { margin:0; font-size:.98rem; } @media(min-width: 620px) { .art-facts > div { grid-template-columns:minmax(9rem, 15rem) 1fr; align-items:baseline; } } .art-steps { counter-reset:schritt; margin:clamp(22px, 2.8vw, 32px) 0; padding:0; list-style:none; } .art-steps > li { counter-increment:schritt; position:relative; padding:0 0 clamp(18px, 2.2vw, 24px) clamp(44px, 5vw, 56px); } .art-steps > li::before { content:counter(schritt); position:absolute; left:0; top:0; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-size:var(--fs-0); font-weight:700; font-variant-numeric:tabular-nums; } .art-steps > li::after { content:""; position:absolute; left:14.5px; top:34px; bottom:4px; width:1px; background:var(--line-strong); } .art-steps > li:last-child { padding-bottom:0; } .art-steps > li:last-child::after { display:none; } .art-steps h3, .art-steps > li > b:first-child { display:block; font-size:var(--fs-2); margin:4px 0 .35em; color:var(--ink); } .art-steps p { margin:0 0 .5em; } .art-steps .schritt-ergebnis { display:block; margin-top:.4em; font-size:var(--fs-1); color:var(--muted); } .art-steps .schritt-ergebnis b { color:var(--ink-soft); font-weight:600; } .art-cmp { margin:clamp(22px, 2.8vw, 32px) 0; } .art-cmp-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); -webkit-overflow-scrolling:touch; } .art-cmp table { width:100%; border-collapse:collapse; min-width:30rem; font-size:.96rem; } .art-cmp th, .art-cmp td { padding:11px clamp(12px, 1.6vw, 18px); text-align:left; vertical-align:top; border-top:1px solid var(--line); } .art-cmp thead th { border-top:0; background:#F4F8FA; font-size:var(--fs-1); color:var(--ink); position:sticky; top:0; } .art-cmp tbody th { font-weight:600; color:var(--ink-soft); width:34%; } .art-cmp caption { caption-side:top; text-align:left; margin-bottom:.6em; font-size:var(--fs-1); color:var(--muted); } .fn-ref { font-size:.72em; vertical-align:super; line-height:0; padding:0 .12em; font-weight:700; text-decoration:none; color:var(--accent); } .fn-ref:hover, .fn-ref:focus-visible { text-decoration:underline; } .art-fn { margin:clamp(26px, 3vw, 38px) 0 0; padding-top:clamp(16px, 2vw, 22px); border-top:1px solid var(--line); } .art-fn > h2 { font-size:var(--fs-2); } .art-fn ol { margin:0; padding-left:1.3em; font-size:var(--fs-1); color:var(--muted); } .art-fn li { margin-bottom:.5em; } .art-fn li:target { background:#FFF6D8; scroll-margin-top:90px; } .art-fn a { color:var(--accent); } .art-next { margin:clamp(26px, 3.2vw, 38px) 0 0; padding:clamp(18px, 2.4vw, 26px); border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(135deg, #F4F9FB, #FFF); } .art-next > h3 { font-size:var(--fs-3); margin:0 0 .4em; color:var(--ink); } .art-next p { margin:0 0 .9em; color:var(--ink-soft); } .art-next.article-cta h2, .art-next.article-cta h3 { color:var(--ink); } .art-next.article-cta p { color:var(--ink-soft); } .art-next.article-cta .art-next-note { background:var(--petrol-tint); color:var(--ink-soft); } .art-next.article-cta .art-next-note strong { color:var(--ink); } .art-next-actions { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; } .art-next-link { color:var(--petrol); font-weight:700; } @media print {.art-sum, .art-inset, .art-facts, .art-next { background:none !important; box-shadow:none; break-inside:avoid; page-break-inside:avoid; } .art-sum-jump { display:none; } .art-cmp-scroll { overflow:visible; } .art-cmp table { min-width:0; } .art-steps > li { break-inside:avoid; } .art-fn { break-before:auto; } } .art-rechtsgrundlagen { margin:clamp(18px, 2.2vw, 26px) 0; font-size:var(--fs-1); } .art-rechtsgrundlagen > summary { cursor:pointer; font-weight:600; color:var(--ink-soft); padding:8px 0; } .art-rechtsgrundlagen ul { margin:.4em 0 0; padding-left:1.2em; color:var(--muted); } .art-rechtsgrundlagen li { margin-bottom:.4em; } .art-rechtsgrundlagen a { color:var(--accent); } @media print { .art-rechtsgrundlagen { display:block; } .art-rechtsgrundlagen > ul { display:block; } } .know-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; } .know-list li::before { content:"\2192"; color:var(--muted); margin-right:8px; } .art-hinweis { margin:clamp(18px, 2.4vw, 26px) 0; padding-left:14px; border-left:2px solid var(--line-strong); color:var(--body); font-size:.95rem; } .anchor-alias { display:block; height:0; overflow:hidden; } /* Kopfzeile und Seiteninhalt teilen eine Achse. ============================================ Bis zum 2026-09-18 stand hier das Gegenteil: "Die rahmenlose Kopfzeile nutzt auf dem Desktop die verfuegbare Breite." Das war eine Absicht, und auf normalen Schirmen faellt sie nicht auf -- bei 1440 px betrug der Versatz 9 Pixel. Auf breiten schon: 174 Pixel bei 1920, 494 bei 2560. Die Marke klebt dann am Fensterrand, waehrend der Text fast einen halben Bildschirm weiter rechts beginnt, und Kopf und Seite wirken wie zwei Layoutsysteme. Die FLAECHE bleibt viewportbreit -- Hintergrund, Rahmen und die klebende Kopfzeile laufen weiter durch. Begrenzt wird nur der INHALT, und zwar mit demselben --shell wie die Seite. Keine zweite 1500er-Konstante: es gibt genau einen Containervertrag, und beide benutzen ihn. */ :root { --shell:min(1500px, calc(100% - max(clamp(40px, 6vw, 112px), 2 * env(safe-area-inset-left, 0px)))); } .story-shell { width:var(--shell); margin-inline:auto; } /* Ohne Breitenschranke, auf allen Groeszen. Zuerst stand hier @media (min-width:901px) -- und der Test blieb rot, weil er die Achse ueber das ganze Kontinuum prueft und nicht nur auf dem Desktop: 320 px 14 Pixel Versatz, 900 px 34. Eine Invariante, die unterhalb einer Schranke nicht gilt, ist keine. Das Innenpolster der Flaeche muss dafuer weg, sonst rechnet --shell mit der falschen Bezugsbreite: es ist ein Prozentwert, und 100 % meint das Elternelement. Mit den 12 px aus der Flaechenregel stand die Kopfzeile bei 1280 px auf 1179 statt 1203 -- zwoelf Pixel neben der Seitenkante, waehrend sie ab 1920 px zufaellig stimmte, weil dort die 1500er-Grenze greift. Der Notch-Schutz wandert damit dorthin, wo er hingehoert: in --shell selbst, und damit fuer Kopf und Seite gleichermaszen. Vorher schuetzte er nur den Kopf, waehrend der Seiteninhalt daneben ungeschuetzt stand. */ .site-header { padding-inline:0; } .site-header .header-row { width:var(--shell); max-width:none; margin-inline:auto; padding-inline:0; } .story-kicker,.story-index { margin:0 0 22px; color:var(--petrol-mid); font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .product-stage .story-kicker,.local-story .story-kicker { color:#a8d4e8; } .story-lead { max-width:61ch; color:var(--body); font-size:clamp(1.08rem,1.35vw,1.28rem); line-height:1.65; } .story-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:34px; } .story-text-link { display:inline-flex; align-items:center; gap:8px; color:var(--petrol); font-weight:750; text-decoration:none; } .story-text-link span { transition:transform .2s ease; }.story-text-link:hover span { transform:translateX(4px); } .story-text-link--light { color:#a8d4e8; } .story-note { margin:12px 0 0; color:var(--muted); font-size:.82rem; } .story-hero { display:flex; align-items:center; padding:clamp(40px,4.5vw,64px) 0 clamp(48px,5vw,72px); overflow:hidden; background:#fff; } .story-hero-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(600px,1.18fr); align-items:center; gap:clamp(56px,7vw,128px); } .story-hero-copy h1 { max-width:22ch; margin:0 0 26px; color:var(--petrol-deep); font-size:clamp(2.4rem,3.4vw + .4rem,3.5rem); font-weight:700; line-height:1.06; letter-spacing:-.025em; text-wrap:balance; } .story-hero-line { display:block; } .story-hero-line--anchor { color:var(--petrol-mid); } /* Helle Startseitenflaechen: ein sehr feines technisches Raster bleibt im Hintergrund. Es bewegt sich nicht (seit 2026-10-09); Text und Produktgrafiken liegen stets darueber. */ html[data-theme="light"] :where(.story-hero:not([data-hero-spotlight]),.story-principle,.story-outcomes,.document-story,.areas-story,.tools-story,.fit-story) { position:relative; isolation:isolate; overflow:hidden; } html[data-theme="light"] :where(.story-hero:not([data-hero-spotlight]),.story-principle,.story-outcomes,.document-story,.areas-story,.tools-story,.fit-story)::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; } html[data-theme="light"] :where(.story-hero:not([data-hero-spotlight]),.story-principle,.story-outcomes,.document-story,.areas-story,.tools-story,.fit-story)::before { opacity:.74; background-image: linear-gradient(rgba(31,88,120,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(31,88,120,.03) 1px,transparent 1px), radial-gradient(circle at 1px 1px,rgba(31,88,120,.15) .9px,transparent 1.25px); background-size:104px 104px,104px 104px,26px 26px; background-attachment:fixed; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%); } html[data-theme="light"] :where(.story-hero:not([data-hero-spotlight]),.story-principle,.story-outcomes,.document-story,.areas-story,.tools-story,.fit-story) > .story-shell { position:relative; z-index:1; } @media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) { html[data-theme="light"] :where(.story-hero:not([data-hero-spotlight]),.story-principle,.story-outcomes,.document-story,.areas-story,.tools-story,.fit-story)::after { opacity:.28; } } /* Hero-Produktvorschau: ein illustriertes KUKANILEA-Fenster mit den Farben des Produkts (Akzent im KUKANILEA-Petrol der Website, helle Flaechen, Radien 4/8 px, Systemschrift) und den echten Bereichen in Produktreihenfolge. Zustaende kommen aus site.js ueber data-demo-state; jede Ansicht ist fuer sich vollstaendig, der Rahmen hat feste Hoehe, nichts springt. */ .hd { position:relative; } /* Produktdemo: Huelle nach der Anwendung (Kopfzeile, Seitenleiste, rechte Leiste), Inhalte erzeugt. Eine Instanz: hero (Autoplay); darunter das Showcase. */ .demo-frame.hd-frame { color-scheme:light; --hd-primary:#1B4965; --hd-primary-2:#143A52; --hd-bg:#F7F9FB; --hd-panel:#fff; --hd-line:#E8ECF0; --hd-ink:#0C1D28; --hd-muted:#3D4F5C; --hd-ok:#146a2e; --hd-warn:#9a6700; --hd-err:#cf222e; position:relative; display:flex; flex-direction:column; height:clamp(440px,36vw,540px); min-height:0; font-size:12.5px; line-height:1.35; overflow:hidden; border:1px solid #c9d6de; border-radius:14px; background:var(--hd-bg); color:var(--hd-ink); text-align:left; box-shadow:0 42px 90px rgba(13,34,51,.18); } .hd-frame *,.hd-frame *:before,.hd-frame *:after { box-sizing:border-box; } .hd-frame button { font:inherit; } .hd-ic { display:inline-block; flex:none; width:14px; height:14px; background:currentColor; -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; } /* produktdemo:icons */.hd-ic--dashboard { --ic:url("data:image/svg+xml,"); }.hd-ic--upload { --ic:url("data:image/svg+xml,"); }.hd-ic--email { --ic:url("data:image/svg+xml,"); }.hd-ic--messenger { --ic:url("data:image/svg+xml,"); }.hd-ic--calendar { --ic:url("data:image/svg+xml,"); }.hd-ic--tasks { --ic:url("data:image/svg+xml,"); }.hd-ic--time { --ic:url("data:image/svg+xml,"); }.hd-ic--projects { --ic:url("data:image/svg+xml,"); }.hd-ic--visualizer { --ic:url("data:image/svg+xml,"); }.hd-ic--settings { --ic:url("data:image/svg+xml,"); }.hd-ic--assistant { --ic:url("data:image/svg+xml,"); }.hd-ic--bell { --ic:url("data:image/svg+xml,"); }.hd-ic--panel { --ic:url("data:image/svg+xml,"); }.hd-ic--file { --ic:url("data:image/svg+xml,"); }.hd-ic--edit { --ic:url("data:image/svg+xml,"); }.hd-ic--chevron { --ic:url("data:image/svg+xml,"); }.hd-ic--search { --ic:url("data:image/svg+xml,"); }.hd-ic--server { --ic:url("data:image/svg+xml,"); }/* /produktdemo:icons */ .hd-topbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; height:3.5em; padding:0 10px; border-bottom:1px solid var(--hd-line); background:#fff; } .hd-chip { display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border:1px solid var(--hd-line); border-radius:999px; background:#fff; color:var(--hd-muted); font-size:.8em; font-weight:700; line-height:1.45; white-space:nowrap; } .hd-status { display:flex; gap:5px; justify-self:center; } .hd-topbar-right { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; }.hd-topbar-right > .hd-ic { width:15px; height:15px; color:var(--hd-ink); } .demo-control { display:grid; place-items:center; width:26px; height:26px; margin-left:4px; border:1px solid var(--hd-line); border-radius:6px; background:#fff; color:var(--hd-primary); cursor:pointer; } .demo-control:focus-visible,.hd-btn:focus-visible,button.hd-doc:focus-visible,button.hd-card:focus-visible,button.hd-row:focus-visible,button.hd-thread:focus-visible,button.hd-task:focus-visible,button.hd-ev:focus-visible { outline:2px solid var(--hd-primary); outline-offset:2px; } button.hd-row:focus-visible,button.hd-thread:focus-visible,button.hd-task:focus-visible { outline-offset:-2px; } button.hd-ev:focus-visible { outline-offset:1px; } .demo-control:hover { border-color:var(--hd-primary); } .hd-body { position:relative; flex:1; min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; } .hd-sidebar { display:flex; flex-direction:column; width:6.4em; min-height:0; background-color:var(--hd-primary); background-image:linear-gradient(180deg,var(--hd-primary) 0,var(--hd-primary-2) 100%); border-right:1px solid rgba(255,255,255,.18); color:#fff; } .hd-nav { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; gap:1px; min-height:0; padding:3px 3px; } .hd-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:0; padding:3px 2px; border:0; border-radius:9px; background:transparent; color:rgba(255,255,255,.88); font-size:.8em; font-weight:500; line-height:1.1; text-align:center; cursor:pointer; } /* body traegt overflow-wrap:anywhere (lange URLs im Fliesstext). In der Produktvorschau bricht das Woerter an jeder Stelle: "Posteingang" stand am 2026-09-17 als "Poste / ingan / g" in der Ordnerliste, obwohl daneben hyphens:auto "Post-eingang" ergeben haette -- anywhere gewinnt. Die Vorschau hat eigene, kurze Beschriftungen und braucht den Notbruch nicht. */ .hd-frame { overflow-wrap:normal; } /* Umbruchgrenze (2026-10-02, im echten Chrome gegen die Produktion per Trace gemessen): jeder Demoschritt schaltet Ansichten um, und der Umbruch lief bis zur Dokumentwurzel -- im 4x-Mobilprofil bis 261 ms alle 2,7 Sekunden, solange die Vorschau sichtbar ist. "contain: layout paint" allein aenderte daran NICHTS (Wurzel blieb #document, sechs Wechsel 217 ms): Chrome nimmt ein Element erst als Umbruchgrenze, wenn auch seine GROESSE eingeschlossen ist. Mit strict wurzelt der Umbruch im Rahmen, sechs Wechsel 8,6 ms. Die Groesse haengt nie am Inhalt (clamp bzw. aspect-ratio, overflow hidden) -- nachgemessen 739 x 518 und 358 x 224 vorher wie nachher, Kinder auf dem Pixel. Der Elternblock ist kein Flex- oder Rastercontainer, sonst gaelte die Grenze nicht. Kein fixiertes Element darin. */ .demo-frame.hd-frame { contain:strict; } .hd-nav-item .hd-ic { width:15px; height:15px; }.hd-nav-item span { max-width:100%; hyphens:auto; } .hd-nav-item:hover { background:rgba(255,255,255,.12); color:#fff; }.hd-nav-item.is-active { background:#446a81; color:#fff; } .hd-nav-item:focus-visible { outline:2px solid #fff; outline-offset:-2px; } .hd-account { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.78); font-size:.8em; } .hd-account i { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:hsl(330 45% 45%); color:#fff; font-style:normal; font-weight:700; } .hd-screen { position:relative; min-width:0; min-height:0; overflow:hidden; transform:scale(var(--hd-zoom,1)); transform-origin:var(--hd-ox,50%) var(--hd-oy,50%); transition:transform .6s cubic-bezier(.22,.75,.24,1); } .demo-view { display:none; }.demo-view.is-active { display:flex; }.hd-view { position:absolute; inset:0; flex-direction:column; overflow:hidden; } .hd-page { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:12px 14px; } .hd-rail { display:flex; flex-direction:column; align-items:center; gap:13px; width:2.7em; padding-top:12px; border-left:1px solid var(--hd-line); background:#fff; } .hd-rail .hd-ic { width:14px; height:14px; color:var(--hd-ink); }.hd-rail b { width:60%; height:1px; background:var(--hd-line); } .hd-ki { position:absolute; right:3.2em; bottom:12px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--hd-primary); box-shadow:0 6px 16px rgba(27,73,101,.3); }.hd-ki .hd-ic { width:14px; height:14px; color:#fff; } .hd-dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--hd-primary); }.hd-dot--rot { background:var(--hd-err); }.hd-dot--gelb { background:#e0a300; }.hd-dot--gruen { background:#1f9d55; }.hd-dot--blau { background:#2563eb; }.hd-dot--petrol { background:var(--hd-primary); } .hd-ok { display:grid; flex:none; place-items:center; width:16px; height:16px; border-radius:50%; background:#dff1eb; color:var(--hd-ok); font-size:.8em; font-style:normal; font-weight:800; } .hd-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border:0; border-radius:7px; background:var(--hd-primary); color:#fff; font-size:.9em; font-weight:600; line-height:1.3; cursor:pointer; } .hd-btn:hover { background:#1F5C80; } .hd-btn--ablegen { min-width:7em; justify-content:center; }.hd-btn--ghost { border:1px solid var(--hd-line); background:#fff; color:var(--hd-primary); }.hd-btn--ghost:hover { background:#eef4f8; } .hd-tag { display:inline-block; margin-right:6px; padding:1px 6px; border-radius:4px; background:#e8ecf0; color:var(--hd-ink); font-size:.85em; font-style:normal; font-weight:600; vertical-align:middle; } .hd-badge { margin-left:6px; padding:1px 6px; border-radius:4px; background:#e6eff5; color:var(--hd-primary); font-size:.9em; font-style:normal; font-weight:700; } .hd-seg { display:inline-flex; align-items:center; padding:2px; border:1px solid var(--hd-line); border-radius:10px; background:#fff; font-size:.85em; white-space:nowrap; }.hd-seg > * { padding:3px 9px; border-radius:8px; color:var(--hd-muted); } .hd-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.hd-toolbar strong { font-size:1.15em; }.hd-arrows { color:var(--hd-muted); letter-spacing:.35em; } .hd-search { display:flex; align-items:center; gap:6px; flex:1; min-width:0; padding:6px 10px; border:1px solid var(--hd-line); border-radius:8px; background:#fff; color:var(--hd-muted); font-size:.9em; } .hd-para { display:block; margin:0 0 6px; color:#333c45; line-height:1.45; } /* Uebersicht */ .hd-greet { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background-color:var(--hd-primary); background-image:linear-gradient(135deg,var(--hd-primary) 0,#245b7a 100%); color:#fff; } .hd-greet strong { display:block; font-size:1.35em; font-weight:700; }.hd-greet span { display:block; margin-top:2px; font-size:.9em; opacity:.92; }.hd-greet em { display:flex; align-items:center; gap:5px; margin-top:6px; font-size:.85em; font-style:normal; }.hd-greet em .hd-dot { background:#8fe0b8; } .hd-ring { display:grid; grid-template-columns:auto auto; align-items:center; gap:8px; } .hd-ring i { width:34px; height:34px; border-radius:50%; background:conic-gradient(#fff var(--hd-ring,40%),rgba(255,255,255,.22) 0); -webkit-mask:radial-gradient(circle,transparent 57%,#000 59%); mask:radial-gradient(circle,transparent 57%,#000 59%); transition:--hd-ring .4s; } .hd-ring b { display:block; font-size:1em; white-space:nowrap; }.hd-ring small { display:block; font-size:.8em; letter-spacing:.07em; text-transform:uppercase; opacity:.85; } .hd-pill { display:flex; align-items:center; gap:8px; width:max-content; max-width:100%; min-width:0; padding:6px 12px; border:1px solid #c9d6de; border-radius:999px; background:#e6eef3; color:var(--hd-primary); font-weight:700; text-align:left; cursor:pointer; } .hd-pill span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--hd-muted); font-weight:500; }.hd-pill b { white-space:nowrap; }.hd-doc-main small .hd-tag { font-size:1em; }.hd-pill em { font-style:normal; }.hd-pill:hover { border-color:var(--hd-primary); } .hd-panels { display:grid; grid-template-columns:1.15fr 1fr .95fr; gap:8px; min-height:0; } .hd-panel { display:flex; flex-direction:column; gap:1px; min-width:0; padding:9px 10px; border:1px solid var(--hd-line); border-radius:12px; background:var(--hd-panel); } .hd-panel--done .hd-row { padding:4px; }.hd-panel header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }.hd-panel header strong { font-size:.95em; }.hd-panel header small { color:var(--hd-muted); font-size:.8em; } .hd-row { display:grid; grid-template-columns:auto 1fr; column-gap:7px; align-items:center; width:100%; padding:5px 4px; border:0; border-top:1px solid #eef1f3; border-radius:6px; background:transparent; color:inherit; text-align:left; } .hd-row b { font-weight:600; }.hd-row small { grid-column:2; color:var(--hd-muted); font-size:.85em; }.hd-row .hd-dot,.hd-row .hd-ok { grid-row:1/3; } button.hd-row { cursor:pointer; }button.hd-row:hover { background:#f2f6f8; } .hd-kpis { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }.hd-kpis b { display:block; font-size:1.3em; color:var(--hd-primary); }.hd-kpis small { color:var(--hd-muted); font-size:.8em; } .hd-bars { display:flex; align-items:flex-end; gap:5px; height:26px; margin-top:8px; }.hd-bars i { flex:1; height:45%; border-radius:2px 2px 0 0; background:#dbe4ea; }.hd-bars i:nth-child(2) { height:75%; }.hd-bars i.is-today { height:100%; background:var(--hd-primary); }.hd-bars i:nth-child(4) { height:30%; }.hd-bars i:nth-child(5) { height:20%; } .hd-legend { display:flex; justify-content:space-between; color:var(--hd-muted); font-size:.8em; } /* Upload und Pruefstand */ .hd-tabs { display:flex; gap:14px; padding:0 2px; border-bottom:1px solid var(--hd-line); color:var(--hd-muted); font-size:.95em; white-space:nowrap; overflow:hidden; } .hd-tabs span { padding:3px 0 6px; }.hd-tabs .is-active { color:var(--hd-primary); font-weight:700; box-shadow:inset 0 -2px 0 var(--hd-primary); } .hd-tabs em { margin-left:4px; padding:0 6px; border-radius:999px; background:var(--hd-primary); color:#fff; font-size:.85em; font-style:normal; font-weight:700; } .hd-pruef-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }.hd-pruef-head strong { font-size:1.2em; }.hd-pruef-head small { display:block; color:var(--hd-muted); font-size:.85em; } .hd-selbar { display:none; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:var(--hd-primary-2); color:#fff; font-size:.85em; white-space:nowrap; overflow:hidden; } .hd-selbar span { padding:2px 8px; border-radius:6px; background:#355c72; } .hd-frame[data-demo-state="doc-review"] .hd-selbar,.hd-frame[data-demo-state="doc-filed"] .hd-selbar{ display:flex; } .hd-pruef { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; min-height:0; } .hd-frame[data-demo-state="doc-review"] .hd-pruef,.hd-frame[data-demo-state="doc-filed"] .hd-pruef{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr); } .hd-docs { display:flex; flex-direction:column; gap:6px; min-width:0; } .hd-doc { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; padding:8px 10px; border:1px solid var(--hd-line); border-radius:10px; background:#fff; color:inherit; text-align:left; } .hd-doc > .hd-ic { width:16px; height:16px; color:var(--hd-err); } .hd-doc-main small { color:var(--hd-muted); font-size:.85em; } .hd-conf { display:block; width:60%; height:2px; border-radius:1px; background:#e0a300; }.hd-conf--ok { width:72%; background:#1f9d55; } .hd-doc-state { padding:4px 9px; border:1px solid var(--hd-line); border-radius:7px; color:var(--hd-ink); font-size:.85em; font-weight:600; white-space:nowrap; } button.hd-doc { cursor:pointer; }button.hd-doc:hover { border-color:#a8b5c1; } .hd-preview { display:none; flex-direction:column; gap:8px; min-width:0; padding:10px; border:1px solid var(--hd-line); border-radius:10px; background:#fff; } .hd-preview header { display:flex; align-items:center; gap:6px; padding-bottom:6px; border-bottom:1px solid var(--hd-line); font-weight:600; }.hd-doc-main b,.hd-preview header b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hd-frame[data-demo-state="doc-review"] .hd-preview,.hd-frame[data-demo-state="doc-filed"] .hd-preview{ display:flex; } .hd-classify { display:flex; flex-direction:column; gap:6px; }.hd-classify > small { color:var(--hd-muted); font-size:.82em; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .hd-field { display:grid; grid-template-columns:5.8em minmax(0,1fr); gap:8px; padding:4px 0; border-top:1px solid #eef1f3; }.hd-field span { color:var(--hd-muted); font-size:.88em; }.hd-field b { font-weight:600; } .hd-classify > .hd-btn { margin-top:6px; align-self:flex-start; } .hd-stored { display:none; margin-top:4px; color:var(--hd-ok); }.hd-stored .hd-dot { margin-right:6px; } .hd-next { display:none; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; padding:8px 10px; border:1px solid var(--hd-line); border-radius:8px; background:#f4f7f9; }.hd-next b { font-weight:700; } .hd-frame[data-demo-state="doc-review"] .hd-doc--pending { border-color:var(--hd-primary); background:#eef4f8; box-shadow:inset 0 0 0 1px var(--hd-primary); } .hd-frame[data-demo-state="doc-filed"] .hd-next { display:flex; } /* E-Mail */ .hd-mail { flex:1; display:grid; grid-template-columns:8.6em minmax(0,1fr) minmax(0,1.1fr); min-height:0; border:1px solid var(--hd-line); border-radius:10px; background:#fff; overflow:hidden; } .hd-folders { display:flex; flex-direction:column; gap:3px; padding:10px 8px; border-right:1px solid var(--hd-line); color:var(--hd-muted); font-size:.9em; } .hd-folders .hd-btn--new { justify-content:center; margin-bottom:6px; }.hd-folders span em { margin-left:auto; font-style:normal; font-weight:700; } .hd-seg b,.hd-folders .is-active { background:var(--hd-primary); color:#fff; font-weight:600; }.hd-folders small { margin-top:8px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.9em; } .hd-threads { display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--hd-line); } .hd-threads .hd-search { flex:none; margin:8px; }.hd-group { padding:2px 10px 4px; color:var(--hd-muted); font-size:.8em; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.hd-group em { font-style:normal; } .hd-thread { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; width:100%; padding:7px 10px; border:0; border-top:1px solid #eef1f3; background:#fff; color:inherit; text-align:left; } .hd-thread i { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e6eff5; color:var(--hd-primary); font-size:.85em; font-style:normal; font-weight:700; } .hd-thread span { display:flex; flex-direction:column; min-width:0; }.hd-thread b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }.hd-thread b:first-child { font-size:.9em; color:var(--hd-muted); font-weight:500; } .hd-thread small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--hd-muted); font-size:.85em; }.hd-thread em { color:var(--hd-muted); font-size:.85em; font-style:normal; } .hd-thread.is-new b { color:var(--hd-ink); }.hd-thread.is-new:before { content:""; position:absolute; left:3px; top:50%; width:5px; height:5px; border-radius:50%; background:var(--hd-primary); transform:translateY(-50%); } button.hd-thread { cursor:pointer; }button.hd-thread:hover { background:#f2f6f8; } .hd-reader { display:flex; flex-direction:column; min-width:0; padding:12px; } .hd-empty { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--hd-muted); }.hd-empty .hd-ic { width:26px; height:26px; color:#a8b5c1; } .hd-message { display:none; flex-direction:column; }.hd-message small { color:var(--hd-muted); font-size:.9em; }.hd-message strong { margin:4px 0 8px; font-size:1.1em; } .hd-chip--timer,.hd-chip--due { border-color:#f1dfae; background:#fff6dc; color:#6d5100; } .hd-frame[data-demo-state="mail-open"] .hd-empty { display:none; }.hd-frame[data-demo-state="mail-open"] .hd-message { display:flex; } .hd-frame[data-demo-state="mail-open"] .hd-thread.is-new { background:#eef4f8; }.hd-frame[data-gelesen] .hd-thread.is-new:before { display:none; } /* Kalender */ .hd-cal { flex:1; display:grid; grid-template-columns:8.6em minmax(0,1fr); gap:10px; min-height:0; position:relative; } .hd-cal-side { display:flex; flex-direction:column; gap:4px; color:var(--hd-muted); font-size:.9em; }.hd-cal-side .hd-btn { justify-content:center; margin-bottom:6px; } .hd-cal-side small { margin-top:6px; font-size:.9em; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }.hd-cal-side span { display:flex; align-items:center; gap:6px; } .hd-week { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; min-height:0; border:1px solid var(--hd-line); border-radius:10px; background:#fff; overflow:hidden; } .hd-week > div { display:flex; flex-direction:column; gap:4px; min-width:0; padding:6px 4px; border-right:1px solid #eef1f3; }.hd-week > div:last-child { border-right:0; }.hd-week > div.is-today { background:#fffbe8; } .hd-week small { margin-bottom:4px; color:var(--hd-muted); font-size:.8em; font-weight:700; text-align:center; } .hd-ev { display:block; width:100%; padding:4px 6px; border:0; border-left:3px solid var(--hd-primary); border-radius:4px; background:#e6eef5; color:var(--hd-ink); font-size:.8em; text-align:left; line-height:1.3; } .hd-ev--quiet { border-left-color:#a8b5c1; background:#eef1f3; color:var(--hd-muted); }.hd-ev--frist { border-left-color:var(--hd-err); background:#fbeaea; } button.hd-ev { cursor:pointer; }button.hd-ev:hover { background:#d9e7f0; } .hd-inspector { position:absolute; right:10px; bottom:10px; display:none; flex-direction:column; gap:3px; width:min(220px,60%); padding:10px 12px; border:1px solid var(--hd-line); border-radius:10px; background:#fff; box-shadow:0 12px 30px rgba(13,34,51,.14); font-size:.9em; } .hd-inspector small { color:var(--hd-muted); font-size:.9em; }.hd-inspector strong { font-size:1.05em; }.hd-inspector span { color:var(--hd-muted); } .hd-frame[data-demo-state="cal-open"] .hd-inspector { display:flex; animation:hd-row-in .3s ease backwards; }.hd-frame[data-demo-state="cal-open"] .hd-ev--focus { background:var(--hd-primary); color:#fff; } /* Aufgaben */ .hd-tasks3 { flex:1; display:grid; grid-template-columns:8.6em minmax(0,1fr) minmax(0,1fr); gap:10px; min-height:0; } .hd-tlists { display:flex; flex-direction:column; gap:2px; color:var(--hd-muted); font-size:.9em; }.hd-folders span,.hd-tlists span { display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:6px; }.hd-tlists span em { margin-left:auto; font-style:normal; } .hd-tlists .is-active { background:#e6eef5; color:var(--hd-primary); font-weight:600; }.hd-tlists small { margin-top:8px; font-size:.9em; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .hd-tlist { display:flex; flex-direction:column; gap:5px; min-width:0; padding:8px; border:1px solid var(--hd-line); border-radius:10px; background:#fff; } .hd-tlist header { display:flex; justify-content:space-between; padding:0 4px 4px; }.hd-tlist header strong { font-size:1.05em; }.hd-tlist header em { color:var(--hd-muted); font-style:normal; font-weight:700; } .hd-task { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; padding:6px 6px; border:1px solid transparent; border-top-color:#eef1f3; border-radius:6px; background:#fff; color:inherit; text-align:left; } .hd-task span { display:flex; flex-direction:column; min-width:0; }.hd-task b { font-weight:600; }.hd-task small { display:flex; align-items:center; gap:5px; color:var(--hd-muted); font-size:.85em; } .hd-radio { display:inline-block; flex:none; width:14px; height:14px; border:1.5px solid #9aa6b0; border-radius:50%; background:#fff; } button.hd-task { cursor:pointer; }button.hd-task:hover { background:#f2f6f8; } .hd-add { padding:6px 6px; color:var(--hd-muted); font-size:.9em; } .hd-tdetail { display:flex; flex-direction:column; gap:4px; min-width:0; padding:10px 12px; border:1px solid var(--hd-line); border-radius:10px; background:#fff; } .hd-tdetail > small { margin-top:6px; color:var(--hd-muted); font-size:.8em; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }.hd-tdetail > small em { font-style:normal; font-weight:500; text-transform:none; letter-spacing:0; } .hd-tdetail strong { font-size:1.15em; }.hd-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }.hd-sub { display:flex; align-items:center; gap:6px; } .hd-frame[data-erledigt] .hd-task--1 { order:3; }.hd-frame[data-erledigt] .hd-task--1 .hd-radio { border-color:var(--hd-primary); background:var(--hd-primary) radial-gradient(circle,#fff 30%,transparent 32%); }.hd-frame[data-erledigt] .hd-task--1 b { color:var(--hd-muted); text-decoration:line-through; } .hd-frame[data-demo-state="task-new"] .hd-task--neu,.hd-frame[data-demo-state="task-done"] .hd-task--1 { border-color:var(--hd-primary); background:#eef4f8; } .hd-frame[data-folgeaufgabe] .hd-task[data-wenn~="folgeaufgabe"] { display:grid; animation:hd-row-in .4s ease backwards; } /* Projekte */ .hd-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-height:0; } .hd-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:start; padding:10px; border:1px solid var(--hd-line); border-radius:12px; background:#fff; color:inherit; text-align:left; } .hd-avatar { display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#6b5bd6; color:#fff; font-style:normal; font-weight:700; } .hd-doc-main,.hd-card-main { display:flex; flex-direction:column; gap:3px; min-width:0; }.hd-card-main b { font-weight:600; }.hd-card-main small { color:var(--hd-muted); font-size:.85em; } .hd-state { align-self:flex-start; padding:1px 7px; border:1px solid #cfe0ea; border-radius:999px; color:var(--hd-primary); font-size:.8em; font-style:normal; font-weight:600; }.hd-state--done { border-color:#cfe8d8; color:var(--hd-ok); } .hd-step { display:flex; flex-direction:column; margin-top:4px; letter-spacing:.05em; text-transform:uppercase; font-size:.8em; font-weight:700; }.hd-step b { letter-spacing:0; text-transform:none; font-size:1.15em; font-weight:600; color:var(--hd-ink); } .hd-progress { display:block; height:4px; margin-top:4px; border-radius:2px; background:#e1e7ea; overflow:hidden; }.hd-progress b { display:block; height:100%; border-radius:2px; background:var(--hd-primary); }.hd-progress--35 b { width:35%; }.hd-progress--70 b { width:70%; }.hd-progress--100 b { width:100%; background:#1f9d55; } button.hd-card { cursor:pointer; }button.hd-card:hover { border-color:#a8b5c1; } .hd-frame[data-demo-state="proj-focus"] .hd-card--focus { border-color:var(--hd-primary); box-shadow:0 8px 24px rgba(31,35,40,.12); } /* Fakten (data-abgelegt, data-gelesen, data-erledigt, data-folgeaufgabe auf dem Rahmen; Varianten mit data-wenn/data-ohne) */ .hd-frame [data-wenn] { display:none; } .hd-frame[data-abgelegt] [data-wenn~="abgelegt"],.hd-frame[data-gelesen] [data-wenn~="gelesen"],.hd-frame[data-erledigt] [data-wenn~="erledigt"],.hd-frame[data-folgeaufgabe] [data-wenn~="folgeaufgabe"] { display:inline; } .hd-frame[data-abgelegt] .hd-row[data-wenn~="abgelegt"],.hd-frame[data-erledigt] .hd-row[data-wenn~="erledigt"],.hd-frame[data-folgeaufgabe] .hd-row[data-wenn~="folgeaufgabe"] { display:grid; animation:hd-row-in .4s ease backwards; } .hd-frame[data-abgelegt] [data-ohne~="abgelegt"],.hd-frame[data-gelesen] [data-ohne~="gelesen"],.hd-frame[data-erledigt] [data-ohne~="erledigt"],.hd-frame[data-folgeaufgabe] [data-ohne~="folgeaufgabe"] { display:none; } .hd-frame[data-abgelegt] .hd-ring i { --hd-ring:60%; }.hd-frame[data-erledigt] .hd-ring i { --hd-ring:80%; } .hd-frame[data-abgelegt] .hd-doc--pending .hd-doc-state { border-color:#cfe8d8; color:var(--hd-ok); }.hd-frame[data-abgelegt] .hd-doc--pending .hd-conf { width:72%; background:#1f9d55; } .hd-frame[data-abgelegt] .hd-classify > .hd-btn { display:none; }.hd-frame[data-abgelegt] .hd-stored { display:block; } .hd-frame[data-abgelegt] .hd-row--doc .hd-dot { background:#1f9d55; } @keyframes hd-row-in { from{opacity:0;transform:translateY(6px)} } /* Zustaende der Tour (data-demo-state aus site.js) */ .hd-frame[data-demo-state="dash-hover"] .hd-row--doc { background:#f2f6f8; } .story-principle { container:prinzip / inline-size; padding:clamp(76px,7vw,118px) 0; overflow:hidden; background:var(--off); } .principle-heading { display:grid; grid-template-columns:.3fr 1.05fr .7fr; gap:clamp(30px,4.5vw,74px); align-items:start; }.principle-heading h2 { max-width:20ch; margin:0; font-size:clamp(2.3rem,3.2vw,3.25rem); line-height:1.06; letter-spacing:-.04em; }.principle-heading>p:last-child { margin:4px 0 0; color:var(--body); font-size:1.02rem; line-height:1.68; } /* 01 / Das Prinzip: Arbeitsfluss. Links kommen Eingaenge unregelmaessig an, in der Mitte steht KUKANILEA Software als stabiler Kern mit Aufnahmezone, rechts laeuft eine Warteschlange mit vier Plaetzen (neu oben, Aelteres rueckt nach unten, das unterste faehrt hinaus). site.js setzt nur Zustand (data-state, data-core, data-drop, data-pos), Richtung und Bewegung entscheidet das CSS am Container. Ohne JavaScript und bei reduzierter Bewegung steht die Gesamtkomposition. Kein Text mit opacity 0: Wartendes ist geclippt oder ausgeblendet. */ .request-flow { --modus:schmal; --in-x:0px; --in-y:-22px; --take-x:0px; --take-y:8px; --take-o:.72; --out-x:0px; --out-y:-100%; --ruhe:.72; --gap:30px; --slot:66px; --ein:cubic-bezier(.16,.84,.3,1); --rein:cubic-bezier(.5,0,.9,.45); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap); margin-top:clamp(36px,4vw,56px); } .request-inbox,.request-done { position:relative; min-width:0; } .request-inbox-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:26px; margin:0 0 12px; } .request-inbox-head p,.request-done>p { margin:0; font-size:.66rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; } .request-inbox-head p { color:var(--petrol-mid); }.request-done>p { margin:0 0 12px; color:var(--status-done-fg); } /* Der Knopf haelt die Dauerbewegung an -- fuer wen er da ist, der muss ihn auch treffen. Mit 26x26 CSS px lag er zwar ueber dem Minimum von WCAG 2.2 AA 2.5.8, aber knapp; auf dem Telefon ist das der einzige Weg, die Bewegung zu stoppen. Die sichtbare Flaeche bleibt 26 px, gewachsen ist die Trefferflaeche: 44x44 per Polsterung, zurueckgeholt mit negativem Aussenabstand, damit die Ecke des Diagramms unveraendert bleibt. */ .request-pause { display:none; place-items:center; width:26px; height:26px; padding:0; border:1px solid var(--line-strong); border-radius:6px; background:var(--paper); color:var(--petrol); font-size:.8rem; cursor:pointer; } /* Trefferflaeche 44x44, sichtbar bleiben 26: Polsterung haette den Rahmen mitwachsen lassen, deshalb ein Pseudoelement. */ .request-pause::before { content:""; position:absolute; inset:-9px; } .is-armed .request-pause { display:grid; }.request-pause:hover,.request-pause[aria-pressed="true"] { border-color:var(--petrol); } .request-list,.request-queue { margin:0; padding:0; list-style:none; } .request-list { display:grid; gap:10px; min-height:calc(4 * var(--slot)); align-content:start; } .request-chip { --dur:.46s; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-width:0; padding:11px 13px; border:1px solid var(--line-strong); border-radius:10px; background:var(--paper); color:var(--ink); box-shadow:0 12px 26px rgba(13,34,51,.08); font:inherit; text-align:left; cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; transition:translate var(--dur) var(--ein),opacity var(--dur) ease,scale .25s ease,box-shadow .25s ease,border-color .25s ease; } .request-chip[data-tempo="fast"] { --dur:.32s; }.request-chip[data-tempo="heavy"] { --dur:.6s; } .request-chip:hover,.request-chip:focus-visible { border-color:var(--petrol-mid); box-shadow:0 16px 30px rgba(13,34,51,.14); } .request-chip[data-state="weg"],.request-chip[data-state="leer"] { display:none; } .request-chip[data-state="gewaehlt"] { border-color:var(--petrol); box-shadow:inset 0 0 0 1px var(--petrol); } .request-chip[data-state="aufnahme"] { translate:var(--take-x) var(--take-y); scale:.94; opacity:var(--take-o); transition-timing-function:var(--rein); pointer-events:none; } .request-chip[data-drag] { z-index:5; scale:1.02; box-shadow:0 22px 44px rgba(13,34,51,.22); cursor:grabbing; transition:scale .15s ease,box-shadow .15s ease; } .is-armed .request-chip[data-state="sichtbar"] { @starting-style { translate:var(--in-x) var(--in-y); opacity:var(--ruhe); } } .request-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:7px; background:var(--petrol-tint); color:var(--petrol); }.request-ic .hd-ic { width:16px; height:16px; } .request-chip b { overflow:hidden; font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; } .request-chip small { color:var(--dim-text); font-size:.68rem; white-space:nowrap; } /* Kern: Wortmarke, Zustand, vier Schritte, Aufnahmezone. Er bewegt sich nicht, er reagiert kurz. */ .request-core { position:relative; z-index:2; display:flex; flex-direction:column; min-height:280px; border:1px solid var(--line-strong); border-radius:18px; background:var(--paper); box-shadow:0 24px 55px rgba(13,34,51,.16); transition:border-color .25s ease,box-shadow .25s ease; } .request-core-head { display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:17px 17px 0 0; background:var(--btn-primary-bg); color:var(--btn-primary-fg); } .request-k { display:grid; flex:none; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--btn-primary-fg); color:var(--btn-primary-bg); font-size:1rem; font-style:normal; font-weight:900; } .request-core-head>b { font-size:.78rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .request-core-status { position:relative; flex:1; min-width:0; height:1.5em; font-size:.72rem; font-weight:650; text-align:right; } .request-core-status span { position:absolute; inset:0; overflow:hidden; white-space:nowrap; clip-path:inset(0 0 0 100%); transition:clip-path .15s ease; } [data-core="bereit"] .request-core-status span:nth-child(1),[data-core="eingang"] .request-core-status span:nth-child(2),[data-core="pruefen"] .request-core-status span:nth-child(2),[data-core="zuordnen"] .request-core-status span:nth-child(2),[data-core="weiter"] .request-core-status span:nth-child(3) { clip-path:inset(0); transition:clip-path .25s ease .18s; } .request-core-body { position:relative; flex:1; display:grid; align-content:center; gap:12px; padding:20px; } .request-core-steps { display:grid; gap:7px; margin:0; padding:0; list-style:none; counter-reset:schritt; } .request-core-steps li { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:10px; padding:7px 12px; border:1px solid var(--line); border-radius:9px; background:var(--off); color:var(--ink); font-size:.8rem; font-weight:650; counter-increment:schritt; transition:background .25s ease,border-color .25s ease,color .25s ease; } .request-core-steps li:before { content:counter(schritt); display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--line-strong); border-radius:50%; color:var(--petrol-mid); font-size:.64rem; font-weight:850; } [data-core="eingang"] .request-core-steps li:nth-child(1),[data-core="pruefen"] .request-core-steps li:nth-child(2),[data-core="zuordnen"] .request-core-steps li:nth-child(3),[data-core="weiter"] .request-core-steps li:nth-child(4) { background:var(--btn-primary-bg); border-color:var(--btn-primary-bg); color:var(--btn-primary-fg); } [data-core="pruefen"] .request-core-steps li:nth-child(1),[data-core="zuordnen"] .request-core-steps li:nth-child(-n+2),[data-core="weiter"] .request-core-steps li:nth-child(-n+3) { background:var(--petrol-tint); } [data-core="eingang"] { animation:prinzip-core .6s ease; } @keyframes prinzip-core { 30% { scale:1.015; border-color:var(--petrol-bright); } } .request-core:before { content:""; position:absolute; top:22%; bottom:22%; left:0; width:4px; border-radius:4px; background:var(--petrol-bright); opacity:.3; transition:opacity .25s ease; } [data-core="eingang"]:before,[data-drop]:before { opacity:1; } .request-drop { display:none; margin:0; padding:8px 12px; border:1px dashed var(--petrol-mid); border-radius:9px; color:var(--petrol-mid); font-size:.74rem; font-weight:650; text-align:center; } [data-drop] .request-drop { display:block; } [data-drop="aktiv"] { border-color:var(--petrol-bright); box-shadow:0 24px 55px rgba(13,34,51,.16),0 0 0 3px var(--petrol-soft); } [data-drop="aktiv"] .request-drop { border-style:solid; background:var(--petrol-tint); } /* Warteschlange: vier Plaetze und ein fuenfter, der hinausfaehrt. Bewegung ist translate auf --pos. */ .request-queue { position:relative; height:calc(4 * var(--slot)); overflow:hidden; } .request-out { position:absolute; inset-inline:0; top:0; box-sizing:border-box; display:grid; grid-template-columns:30px minmax(0,1fr); gap:0 10px; align-items:center; height:calc(var(--slot) - 10px); padding:6px 13px; border:1px solid var(--line-strong); border-radius:10px; background:var(--paper); translate:0 calc(var(--pos) * var(--slot)); transition:translate .42s ease; } .request-out[data-pos="-1"] { --pos:0; translate:var(--out-x) var(--out-y); transition:none; } .request-out[data-pos="0"] { --pos:0; }.request-out[data-pos="1"] { --pos:1; }.request-out[data-pos="2"] { --pos:2; }.request-out[data-pos="3"] { --pos:3; }.request-out[data-pos="4"] { --pos:4; } .request-out .request-ic { grid-row:1/4; width:30px; height:30px; border-radius:50%; background:var(--status-ok-bg); color:var(--status-ok-ink); } .request-out small { color:var(--petrol-mid); font-size:.56rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; } .request-out[data-pos="0"] small:after { content:" · neu"; color:var(--status-done-fg); } .request-out b { overflow:hidden; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; } .request-out em { color:var(--status-done-fg); font-size:.64rem; font-style:normal; font-weight:650; } @media (prefers-reduced-motion:reduce) { .request-chip,.request-out,.request-core,.request-core-steps li,.request-core-status span { transition:none; animation:none; } } @container prinzip (min-width:600px) and (max-width:1023.98px) { .request-list { grid-template-columns:1fr 1fr; min-height:calc(2 * var(--slot)); } } /* In der gestapelten Fassung folgt die Hoehe den wirklich sichtbaren Eingaengen. Die fruehere Vier-Platz-Reserve hinterliess waehrend des Ablaufs auf Tablet und Telefon eine grosse leere Flaeche. */ @container prinzip (max-width:1023.98px) { .request-flow { --gap:clamp(18px,4cqw,26px); } .request-list { min-height:0; } } /* Breite Komposition: Eingaenge in vier Bahnen, geclippt bis an den Kern; Ergebnisse von der Kernseite her */ @container prinzip (min-width:1024px) { .request-flow { --modus:breit; --in-x:calc(-100% - 60px); --in-y:0px; --take-x:calc(100% + 80px); --take-y:0px; --take-o:1; --out-x:-105%; --out-y:0px; --ruhe:1; --gap:clamp(30px,3.5cqw,56px); grid-template-columns:minmax(0,30fr) minmax(0,33fr) minmax(0,30fr); align-items:stretch; } .request-inbox { display:flex; flex-direction:column; } .request-list { position:relative; flex:1; display:block; min-height:0; clip-path:inset(0 calc(-1 * var(--gap)) 0 0); } .request-list:has([data-drag]) { clip-path:none; } .request-chip { position:absolute; left:calc(var(--x) * 1%); top:calc(var(--l) * 23% + 3%); width:var(--w); } .request-list li:nth-child(1) .request-chip { --l:0; --x:0; --w:92%; }.request-list li:nth-child(2) .request-chip { --l:1; --x:6; --w:94%; }.request-list li:nth-child(3) .request-chip { --l:0; --x:2; --w:88%; }.request-list li:nth-child(4) .request-chip { --l:3; --x:8; --w:90%; } .request-core { min-height:clamp(300px,16cqw + 90px,340px); } .request-done { display:flex; flex-direction:column; justify-content:center; } } .product-stage { position:relative; isolation:isolate; overflow:hidden; padding:clamp(92px,8vw,132px) 0; background:var(--petrol-deep); color:#dfeaf0; } .product-stage::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.34; background-image:linear-gradient(rgba(168,212,232,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(168,212,232,.035) 1px,transparent 1px),radial-gradient(circle at 1px 1px,rgba(168,212,232,.24) .9px,transparent 1.25px); background-size:104px 104px,104px 104px,26px 26px; background-attachment:fixed; } .product-stage::after { content:none; } .product-stage>.story-shell { position:relative; z-index:1; } .stage-heading { display:grid; grid-template-columns:1fr .48fr; gap:72px; align-items:end; margin-bottom:48px; }.stage-heading h2 { max-width:21ch; margin:0; color:#fff; font-size:clamp(2.35rem,3.35vw,3.35rem); line-height:1.06; letter-spacing:-.042em; }.stage-heading>p { max-width:46ch; color:#b5c8d2; line-height:1.68; } .demo-cursor { position:absolute; left:0; top:0; width:22px; height:30px; z-index:8; --cx:0px; --cy:0px; opacity:0; pointer-events:none; transform:translate(var(--cx),var(--cy)); transition:transform .7s cubic-bezier(.22,.75,.24,1),opacity .25s; }.demo-cursor:before { content:""; position:absolute; left:0; top:0; width:22px; height:30px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M2 2l16 13-7 1 4 9-3 1-4-9-6 5z' fill='%23102d40' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }.demo-cursor:after { content:""; position:absolute; left:-9px; top:-9px; width:22px; height:22px; border-radius:50%; background:rgba(27,73,101,.35); opacity:0; }.demo-cursor.is-click:after { animation:demo-click .32s ease-out both; }.demo-caption { margin:18px 0 0; color:#9db4c0; font-size:.78rem; } .story-outcomes { padding:clamp(88px,8vw,126px) 0; }.outcomes-layout { display:block; }.outcomes-copy { display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--s6); align-items:start; }.outcomes-head { margin-bottom:28px; }.outcomes-head h2 { max-width:12ch; margin:0 0 18px; font-size:clamp(2.3rem,3.2vw,3.1rem); line-height:1.05; letter-spacing:-.042em; }.outcomes-head>p:last-child { max-width:48ch; margin:0; color:var(--body); line-height:1.65; } .document-story { padding:clamp(86px,7.5vw,122px) 0; background:var(--off); }.document-grid { display:grid; grid-template-columns:.64fr 1.36fr; gap:clamp(46px,6vw,90px); align-items:center; }.document-grid h2 { max-width:18ch; margin:0 0 22px; font-size:clamp(2.3rem,3.2vw,3.15rem); line-height:1.06; letter-spacing:-.042em; }.document-copy>p:not(.story-kicker) { max-width:48ch; color:var(--body); line-height:1.68; }/* Umbricht nach eigenem Platzbedarf, nicht nach Fensterbreite: die Spaltenminima (210+320+24+48=604px) trugen bis zum Stapelpunkt 600px nicht, zwischen 604 und 620px ragte die Werkbank aus der Seite. */ .document-workbench { display:flex; flex-wrap:wrap; gap:24px; padding:24px; border:1px solid var(--line-strong); border-radius:18px; background:var(--paper); box-shadow:0 24px 55px rgba(27,73,101,.1); } .flow-paper { flex:1 1 230px; min-width:0; min-height:430px; padding:27px; border:1px solid var(--line); background:var(--paper-raised); box-shadow:0 10px 24px rgba(13,34,51,.07); }.flow-paper>div:first-child { display:flex; justify-content:space-between; align-items:center; }.flow-paper>div:first-child span { padding:5px 7px; border-radius:4px; background:var(--petrol-tint); color:var(--petrol); font-size:.62rem; font-weight:850; }.flow-paper small { color:var(--muted); font-size:.62rem; }.flow-paper>strong { display:block; margin:36px 0 30px; font-size:.86rem; }.flow-paper>i { display:block; width:78%; height:7px; margin:16px 0; background:var(--line); }.flow-paper>i.is-long { width:100%; }.flow-paper>i.is-short { width:55%; }.flow-paper dl { margin:52px 0 0; border-top:1px solid var(--line); }.flow-paper dl div { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }.flow-paper dt,.flow-paper dd { margin:0; font-size:.65rem; }.flow-paper dt { flex:none; margin-right:14px; color:var(--muted); white-space:nowrap; }.flow-paper dd { text-align:right; }.flow-paper dd { color:var(--petrol); font-weight:750; }.flow-slot { display:flow-root; min-height:118px; }.flow-confirm,.flow-stamp,.flow-task { display:block; }.flow-confirm { display:none; margin-top:22px; padding:9px 12px; border-radius:6px; background:var(--btn-primary-bg); color:var(--btn-primary-fg); font-size:.7rem; font-weight:750; width:max-content; }.flow-stamp { margin-top:22px; padding:6px 10px; border:1.5px solid var(--status-ok-fg); border-radius:6px; color:var(--status-ok-fg); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; width:max-content; transform:rotate(-3deg); }.flow-task { display:none; margin-top:12px; color:var(--petrol-mid); font-size:.68rem; font-weight:700; }.document-path { flex:1.78 1 409px; min-width:0; position:relative; margin:0; padding:0; list-style:none; }.document-path:after { content:""; position:absolute; left:18px; top:24px; bottom:24px; width:1px; background:var(--petrol); transform:scaleY(var(--fuell,0)); transform-origin:center top; }.flow-token { position:absolute; left:11px; top:0; z-index:2; display:none; width:15px; height:15px; border-radius:4px; background:var(--petrol); box-shadow:0 0 0 3px var(--paper); transform:translateY(var(--y,18px)) rotate(45deg); }.document-path:before { content:""; position:absolute; left:18px; top:24px; bottom:24px; width:1px; background:var(--line-strong); }.document-path li { position:relative; display:grid; grid-template-columns:38px 1fr auto; gap:13px; align-items:center; min-height:76px; padding:10px 0; border-bottom:1px solid var(--line); }.document-path li:last-child { border-bottom:0; }.document-path li>span { z-index:1; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%; background:var(--paper); color:var(--petrol-mid); font-size:.62rem; font-weight:850; }.document-path li.is-current>span { border-color:var(--petrol); background:var(--btn-primary-bg); color:var(--btn-primary-fg); }.document-path strong,.document-path small { display:block; }.document-path strong { margin-bottom:3px; font-size:.82rem; }.document-path small { color:var(--muted); font-size:.66rem; }.document-path em { padding:4px 6px; border-radius:4px; background:var(--petrol-tint); color:var(--petrol-mid); font-size:.56rem; font-style:normal; } /* Wo KUKANILEA laeuft -- Geometrie, Takte, Produktwahrheit und Messwerte: docs/www/startseite-architektur.md, Abschnitt 6. */ .local-story { padding:clamp(92px,8vw,132px) 0; overflow:hidden; background:var(--petrol-deep); color:#dce8ed; } .local-story-grid { display:grid; gap:clamp(44px,5vw,78px); } .local-head { display:grid; justify-items:center; gap:16px; max-width:720px; margin-inline:auto; text-align:center; } .local-story h2 { max-width:15.6em; margin:0; color:#fff; font-size:clamp(1.85rem,2.6vw,2.55rem); line-height:1.14; letter-spacing:-.03em; } .local-story p:not(.story-kicker) { max-width:56ch; color:#bed0d9; line-height:1.68; } .local-visual { position:relative; width:100%; max-width:1180px; margin-inline:auto; padding:clamp(20px,2.4vw,30px); border:1px solid rgba(168,212,232,.2); border-radius:22px; background:linear-gradient(145deg,#102e42,#0e293b); box-shadow:0 26px 65px rgba(0,0,0,.2); } .local-modes { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); gap:16px; } .local-mode { display:grid; grid-template-rows:auto 1fr; gap:12px; padding:17px 15px; border:1px solid rgba(168,212,232,.16); border-radius:14px; background:rgba(9,32,46,.45); } .local-mode-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0; } .local-mode-head b { color:#fff; font-size:.82rem; } .local-mode-head small { color:#8aa9b8; font-size:.66rem; } .local-legende { display:block; font-size:.65rem; } .local-orbit { position:relative; container-type:inline-size; align-self:center; width:min(100%,var(--feld)); aspect-ratio:1; margin:auto; } .local-orbit--solo { --feld:428px; --r:min(120px,32cqw); --dev:min(64px,17cqw); } .local-orbit--netz { --feld:470px; --r2:min(158px,38cqw); --core-d:max(58px,min(78px,16cqw)); --core-r:calc(var(--core-d) / 2); --dev:min(40px,9cqw); --rm:min(42px,9.2cqw); } .local-pos { position:absolute; left:50%; top:50%; width:0; height:0; rotate:var(--a); } .local-pos>span { position:absolute; left:0; top:calc(var(--rad) * -1); display:grid; justify-items:center; gap:4px; width:max-content; max-width:68px; translate:-50% -50%; rotate:calc(var(--a) * -1); } .local-mod { --a:calc(var(--i) * 72deg); --rad:var(--r); z-index:5; } .local-mod em,.local-platz em { text-align:center; line-height:1.2; }.local-mod em { color:#c7d8e0; font-size:.62rem; } .local-mod .hd-ic { width:15px; height:15px; padding:7px; border:1px solid rgba(168,212,232,.34); border-radius:9px; background:#12364c; box-sizing:content-box; color:#9fcde1; } @keyframes local-kreis { to { transform:rotate(360deg); } } @keyframes local-gegen { to { transform:rotate(-360deg); } } @keyframes local-bluehen { 0%,4%,100% { scale:1; } 1.2% { scale:1.14; } 2.6% { scale:1.04; } } @keyframes local-halo { 0% { opacity:0; } 1.2% { opacity:.55; scale:1.2; } 5%,100% { opacity:0; scale:1.45; } } @keyframes local-melden { 0% { opacity:0; translate:0 5px; } 1%,7% { opacity:1; translate:0 0; } 8%,100% { opacity:0; translate:0 5px; } } .local-mod>span:before { content:""; position:absolute; top:0; left:50%; width:29px; height:29px; margin-left:-15px; border:1px solid #a8d4e8; border-radius:10px; opacity:0; } .local-notice-stage { position:absolute; z-index:6; left:50%; top:max(52px,calc(50% - var(--r) - 30px)); width:min(216px,88%); height:52px; translate:-50% -100%; } .local-notice { position:absolute; left:0; right:0; bottom:0; padding:8px 11px; border:1px solid rgba(168,212,232,.3); border-radius:9px; background:#12364c; opacity:0; } .local-center b,.local-notice b { display:block; color:#9fcde1; font-size:.57rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; } .local-notice span { color:#dce8ed; font-size:.68rem; } .local-center { position:absolute; z-index:4; left:50%; top:50%; display:grid; justify-items:center; width:max-content; max-width:calc(var(--r,var(--core-d)) * 1.3); translate:-50% -50%; text-align:center; } .local-center b,.local-center small,.local-center em { display:block; } .local-center b { margin-top:7px; } .local-center small { color:#fff; font-size:.8rem; font-weight:700; } .local-center em,.local-platz em,.local-mod em { font-style:normal; }.local-center em { color:#8fabba; font-size:.62rem; } .device-art { position:relative; display:block; width:var(--dev); aspect-ratio:92/61; border:2px solid #9bb8c5; border-radius:5px; background:#173e55; box-shadow:inset 0 0 0 3px #123246; } .device-art:after { content:""; position:absolute; left:50%; bottom:-9px; width:36%; height:3px; background:#809eaa; transform:translateX(-50%); } .device-art i { position:absolute; left:50%; bottom:-7px; width:3px; height:6px; background:#809eaa; transform:translateX(-50%); } .device-art--laptop { aspect-ratio:76/46; } .device-art--laptop:after { left:-9%; bottom:-7px; width:118%; height:5px; border-radius:2px 2px 5px 5px; transform:none; } .device-art--laptop i { display:none; } .local-core { width:var(--core-d); aspect-ratio:1; align-content:center; padding:6px; border:1px solid #4a86a1; border-radius:50%; background:radial-gradient(circle at 38% 32%,#1d5170,#0f3145); } .local-core small { margin-top:0; font-size:.66rem; } .local-core em { color:#b5cdd9; font-size:.58rem; } .local-core i { position:absolute; inset:-6px; border:1px solid #a8d4e8; border-radius:50%; opacity:0; } .local-spoke { position:absolute; z-index:2; left:50%; top:50%; width:var(--r2); height:8px; margin-top:-4px; overflow:hidden; transform-origin:0 4px; rotate:calc(var(--a) - 90deg); background:linear-gradient(90deg,transparent var(--core-r),#4a7f9a var(--core-r)) center/100% 1px no-repeat; } .local-spoke b { position:absolute; z-index:3; left:var(--core-r); right:0; top:0; bottom:0; opacity:0; } .local-spoke b:before { content:""; position:absolute; right:0; top:1px; width:6px; height:6px; border-radius:50%; background:#d6ecf6; } .local-spoke:after { content:""; position:absolute; z-index:4; left:var(--core-r); top:1px; width:6px; height:6px; border-radius:50%; background:#70c8ed; opacity:0; } @keyframes local-anfrage { 0% { opacity:0; translate:0 0; } 2%,16% { opacity:1; } 18%,100% { opacity:0; translate:-100% 0; } }@keyframes local-ping { 1.3% { opacity:.55; } 2.2%,17.1% { opacity:0; } 18% { opacity:.55; } 18.9%,33.8% { opacity:0; } 34.7% { opacity:.55; } 35.6%,50.4% { opacity:0; } 51.3% { opacity:.55; } 52.2%,67.1% { opacity:0; } 68% { opacity:.55; } 68.9%,83.8% { opacity:0; } 84.7% { opacity:.55; } 85.6% { opacity:0; } } @keyframes local-antwort { 0%,19% { opacity:0; left:var(--core-r); } 21%,33% { opacity:.9; } 35% { opacity:0; left:calc(100% - 6px); } 36%,100% { opacity:0; left:var(--core-r); } } .local-platz { --rad:var(--r2); z-index:4; } .local-platz>span { width:max-content; max-width:none; } .local-platz>span>em { position:absolute; top:100%; left:50%; width:max-content; margin-top:5px; translate:-50% 0; } .local-platz em { color:#d8e6ec; font-size:.6rem; } .local-mini { position:relative; display:grid; place-items:center; width:calc(var(--rm) * 2 + 26px); aspect-ratio:1; --r:var(--rm); } .local-mini .hd-ic { width:13px; height:13px; padding:6px; border-radius:8px; border-color:rgba(168,212,232,.5); } .local-legende { color:#8aa9b8; text-align:center; } .local-visual[data-orbit] .request-pause { display:grid; }.local-visual .request-pause { position:absolute; z-index:7; right:13px; top:13px; border-color:rgba(168,212,232,.34); background:#12364c; color:#9fcde1; } @container (max-width:468px) { .local-core em { display:none; }.local-core small { font-size:.62rem; } } @container (max-width:344px) { .local-platz em span { display:none; }.local-mod .hd-ic { width:13px; height:13px; padding:5px; border-radius:7px; }.local-mod em { font-size:.56rem; }.local-pos>span { gap:2px; max-width:60px; }.local-core small { font-size:.56rem; }.local-spoke b:nth-child(n+4) { display:none; } } @media (prefers-reduced-motion:no-preference) { .local-mod { animation:local-kreis 21s linear infinite; }.local-mod>span { animation:local-gegen 21s linear infinite; }.local-orbit--netz .local-mod,.local-orbit--netz .local-mod>span { animation-duration:25s; }.local-orbit--solo .local-mod>span { animation:local-gegen 21s linear infinite,local-bluehen 21s linear infinite; animation-delay:0s,calc(var(--i) * -4.2s); }.local-orbit--solo .local-mod>span:before,.local-notice { animation:local-halo 21s linear calc(var(--i) * -4.2s) infinite; }.local-notice { animation-name:local-melden; }.t-b .local-mod,.t-b .local-mod>span { animation-delay:-8.3s; }.t-c .local-mod,.t-c .local-mod>span { animation-delay:-16.7s; }.local-spoke b { animation:local-anfrage 20.3s linear var(--v) infinite; }.local-spoke:after { animation:local-antwort 20.3s linear -3.65s infinite; }.local-core i { animation:local-ping 20.3s linear infinite; }.local-spoke.t-b b,.local-core i:nth-child(2) { animation-duration:25.1s; }.local-spoke.t-c b,.local-core i:nth-child(3) { animation-duration:31.3s; }.local-spoke.t-b:after { animation-duration:25.1s; animation-delay:-5.92s; }.local-spoke.t-c:after { animation-duration:31.3s; animation-delay:-8.28s; }.local-core i:nth-child(2) { animation-delay:-1.4s; }.local-core i:nth-child(3) { animation-delay:-2.8s; }html[data-hidden] .local-visual *,.local-visual:not([data-orbit="an"]) * { animation-play-state:paused !important; }html[data-hidden] .local-spoke:after,.local-visual:not([data-orbit="an"]) .local-spoke:after { animation-play-state:paused !important; } } .areas-story { padding:clamp(88px,8vw,126px) 0; }.areas-layout { display:block; }.areas-intro { display:grid; grid-template-columns:.28fr 1fr; gap:30px 40px; margin-bottom:40px; }.areas-intro h2 { max-width:14ch; margin:0; font-size:clamp(2.35rem,3.35vw,3.3rem); line-height:1.05; letter-spacing:-.043em; }.areas-intro>p:last-child { grid-column:2; max-width:52ch; margin:0; color:var(--body); line-height:1.65; }.areas-list { border-top:1px solid var(--line-strong); }.areas-list a { display:grid; grid-template-columns:.78fr 1fr; gap:3px 28px; align-items:center; min-height:82px; color:var(--ink); text-decoration:none; transition:background .25s; }.areas-list b { grid-row:2; }.areas-list span { font-size:clamp(1.1rem,1.5vw,1.42rem); font-weight:720; letter-spacing:-.025em; }.areas-list small { color:var(--body); font-size:.84rem; }.areas-list b { color:var(--petrol-mid); font-size:.72rem; text-transform:uppercase; }.areas-more { margin:28px 0 0; } .tools-story { padding:clamp(88px,8vw,126px) 0; background:var(--off); }.tools-grid { display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(52px,7vw,112px); align-items:center; }.tools-copy h2 { max-width:13ch; margin:0 0 22px; font-size:clamp(2.35rem,3.35vw,3.3rem); line-height:1.04; letter-spacing:-.043em; }.tools-copy>p:not(.story-kicker) { max-width:48ch; color:var(--body); line-height:1.68; }.tool-facts { display:flex; gap:24px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line-strong); }.tool-facts b,.tool-facts small { display:block; }.tool-facts b { font-size:.75rem; }.tool-facts small { margin-top:2px; color:var(--muted); font-size:.75rem; }.tools-copy .btn { margin-top:26px; }.tool-finder { padding:clamp(27px,3vw,42px); border:1px solid var(--line-strong); border-radius:18px; background:var(--paper); box-shadow:0 25px 60px rgba(27,73,101,.11); }.tool-finder>label { display:block; margin-bottom:12px; color:var(--muted); font-size:.75rem; }.tool-search { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:12px; min-height:66px; padding:0 18px; border:2px solid var(--petrol); border-radius:9px; }.tool-search>span { font-size:1.45rem; }.tool-search strong { font-size:clamp(1.05rem,1.5vw,1.35rem); }.tool-search small { color:var(--muted); font-size:.75rem; }.tool-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 16px; }.tool-tabs button { min-height:38px; padding:0 13px; border:1px solid var(--line-strong); border-radius:7px; background:var(--paper); color:var(--body); cursor:pointer; }.tool-tabs button[aria-selected="true"] { border-color:var(--petrol); background:var(--btn-primary-bg); color:var(--btn-primary-fg); }.tool-suggestions { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.tool-suggestions a { position:relative; display:grid; grid-template-columns:42px 1fr 20px; grid-template-rows:auto auto; align-items:center; gap:3px 11px; min-height:94px; padding:14px; border:1px solid var(--line); border-radius:9px; color:var(--ink); text-decoration:none; transition:border-color .2s,transform .2s; }.tool-suggestions a:hover { border-color:var(--petrol-mid); transform:translateY(-2px); }.tool-icon { display:grid; grid-row:1/3; place-items:center; width:39px; height:44px; border-radius:6px; background:var(--petrol-tint); color:var(--petrol)!important; font-size:.6rem; font-weight:850; }.tool-suggestions strong { overflow:hidden; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }.tool-suggestions small { color:var(--muted); font-size:.75rem; }.tool-suggestions a>b { grid-column:3; grid-row:1/3; color:var(--petrol-mid); } .fit-story { padding:clamp(82px,7vw,112px) 0; }.fit-story h2 { max-width:15ch; margin:0; font-size:clamp(2.25rem,3vw,3rem); line-height:1.06; letter-spacing:-.04em; } .areas-content { min-width:0; display:grid; grid-template-columns:.8fr 1.2fr; gap:0 var(--s6); }.areas-content .areas-intro { display:block; }.areas-intro h2 { margin-block:var(--s3); }.areas-more { grid-column:2; } @keyframes demo-click { 0%{opacity:.7;transform:scale(.3)} 100%{opacity:0;transform:scale(1.25)} } /* Der Hero bleibt sichtbar; kein Inhalt haengt an Animation. */ @keyframes hero-copy-in { from{transform:translateY(18px)} to{transform:translateY(0)} } @keyframes hero-window-in { from{translate:32px 24px;scale:.97} to{translate:0 0;scale:1} }@keyframes hero-window-in-gestapelt { from{translate:0 24px;scale:.97} to{translate:0 0;scale:1} } @media (prefers-reduced-motion:no-preference) { .hd { animation:hero-window-in var(--motion-slow) cubic-bezier(.22,1,.36,1) .12s backwards; } /* Dateiweg (Upload-Abschnitt, site.js scrollPhasen):data-schritt 1-5 auf der Werkbank. Ein Dateimarker wandert die Stationen entlang, die Linie fuellt sich, das Papier veraendert sich unterwegs. Ohne Klassen steht der abgelegte Zustand. Die Bewegung ist eine dritte Sprache: ein Objekt legt eine Strecke zurueck. */ .document-workbench.is-armed .flow-token { display:block; transition:transform .55s var(--ease-standard); } .document-workbench.is-armed .document-path:after { transition:transform .55s var(--ease-standard); } .document-workbench.is-armed .document-path li>span,.document-workbench.is-armed .document-path li>em,.document-workbench.is-armed .flow-paper dd,.document-workbench.is-armed .flow-paper>i,.document-workbench.is-armed .flow-stamp,.document-workbench.is-armed .flow-confirm,.document-workbench.is-armed .flow-task { transition:opacity .4s var(--ease-standard),background-color .4s var(--ease-standard),border-color .4s var(--ease-standard),color .4s var(--ease-standard),transform .4s var(--ease-standard); } .document-workbench.is-armed .document-path li.is-current>span { border-color:var(--line-strong); background:var(--paper); color:var(--petrol-mid); } .document-workbench.is-armed .document-path li>em { opacity:.8; color:var(--dim-text); } .document-workbench.is-armed .flow-paper dd { display:none; }.document-workbench.is-armed .flow-paper dl div:after { content:""; display:block; flex:none; align-self:center; width:38%; height:8px; border-radius:4px; background:var(--line); }@keyframes flow-dd-in { from{opacity:0;translate:0 4px} } .document-workbench.is-armed .flow-stamp { display:none; } .document-workbench[data-schritt="1"] .document-path li:nth-child(1)>span,.document-workbench[data-schritt="2"] .document-path li:nth-child(-n+2)>span,.document-workbench[data-schritt="3"] .document-path li:nth-child(-n+3)>span,.document-workbench[data-schritt="4"] .document-path li:nth-child(-n+4)>span,.document-workbench[data-schritt="5"] .document-path li:nth-child(-n+5)>span { border-color:var(--btn-primary-bg); background:var(--btn-primary-bg); color:var(--btn-primary-fg); } .document-workbench[data-schritt="1"] .document-path li:nth-child(1)>em,.document-workbench[data-schritt="2"] .document-path li:nth-child(2)>em,.document-workbench[data-schritt="3"] .document-path li:nth-child(3)>em,.document-workbench[data-schritt="4"] .document-path li:nth-child(4)>em,.document-workbench[data-schritt="5"] .document-path li:nth-child(5)>em { opacity:1; background:var(--btn-primary-bg); color:var(--btn-primary-fg); } .document-workbench[data-schritt="2"] .flow-paper>i { background:var(--line-strong); } .document-workbench[data-schritt="2"] .flow-paper dd,.document-workbench[data-schritt="3"] .flow-paper dd,.document-workbench[data-schritt="4"] .flow-paper dd,.document-workbench[data-schritt="5"] .flow-paper dd { display:block; animation:flow-dd-in .4s var(--ease-standard) backwards; }.document-workbench[data-schritt="2"] .flow-paper dl div:after,.document-workbench[data-schritt="3"] .flow-paper dl div:after,.document-workbench[data-schritt="4"] .flow-paper dl div:after,.document-workbench[data-schritt="5"] .flow-paper dl div:after { display:none; } .document-workbench[data-schritt="2"] .flow-paper dl div:nth-child(2) dd { animation-delay:.12s; }.document-workbench[data-schritt="2"] .flow-paper dl div:nth-child(3) dd { animation-delay:.24s; }.document-workbench[data-schritt="2"] .flow-paper dl div:nth-child(4) dd { animation-delay:.36s; } .document-workbench[data-schritt="3"] .flow-confirm { display:block; } .document-workbench[data-schritt="4"] .flow-stamp,.document-workbench[data-schritt="5"] .flow-stamp { display:block; animation:flow-stamp-in .45s var(--ease-standard) backwards; }@keyframes flow-stamp-in { from{opacity:0;transform:rotate(-3deg) scale(.85)} } .document-workbench[data-schritt="5"] .flow-task { display:block; } .story-hero-copy .story-kicker,.story-hero-copy .story-hero-line,.story-hero-copy .story-lead,.story-hero-copy .story-actions,.story-hero-copy .story-note { animation:hero-copy-in var(--motion-slow) cubic-bezier(.22,1,.36,1) backwards; } .story-hero-copy .story-kicker { animation-delay:.02s; }.story-hero-copy .story-hero-line:nth-child(1) { animation-delay:.04s; }.story-hero-copy .story-hero-line:nth-child(2) { animation-delay:.06s; } .story-hero-copy .story-lead { animation-delay:.08s; }.story-hero-copy .story-actions { animation-delay:.1s; }.story-hero-copy .story-note { animation-delay:.12s; } } /* Produktdemo seit 2026-09-27: Fensterrahmen und Monitor im Hero. Der Rahmen ist die Aussage "eigenes Programmfenster, keine Adresszeile" -- ohne ihn las sich die Vorschau auf dem Telefon als App. */ /* Bereiche, die nur persoenlich gezeigt werden: in der Leiste sichtbar, aber gesperrt. */ .hd-nav-item--ruhig { cursor:default; opacity:.45; }.hd-nav-item--ruhig:hover { background:transparent; } /* Geraetehinweis unter der Vorschau: Desktop-Programm, nicht App, nicht Webseite. */ /* Hero: ein helles, schwebendes Programmfenster statt des dunklen Monitors (Betreiberauftrag 2026-09-28) -- mit weichem Schein dahinter und zwei ruhenden Hinweiskarten am Rand. Die Vorschau steht nicht 1:1 in Original- groesse, sondern herausgezoomt: sie ist in em gebaut, eine kleinere Grundschrift verkleinert das ganze Fenster, und es zeigt mehr Arbeitsflaeche. */ .story-hero .hd-buehne { position:relative; isolation:isolate; } .story-hero .hd-buehne::before { content:""; position:absolute; inset:6% -4% 10%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--petrol-bright) 22%, transparent), transparent); filter:blur(36px); pointer-events:none; } .story-hero .hd-monitor { padding:0; border-radius:14px; background:transparent; box-shadow:none; } .story-hero .hd-monitor .demo-frame.hd-frame { border:0; border-radius:14px; box-shadow:none; } .story-hero .demo-frame.hd-frame[data-demo-mode="hero"] { font-size:11px; } /* Showcase der Startseite (2026-09-28): vier ruhende Karten statt der bedienbaren Vorschau. Markup aus build_product_demo.py. Die Karten sind Produktoberflaeche und bleiben darum in beiden Themen hell, wie die Hero-Vorschau: das Produkt hat keinen Dark Mode. Die Buehne darunter ist ohnehin in beiden Themen dunkel (petrol-deep). Ueberlappen nur ab 900 px; darunter eine Spalte ohne Versatz. */ .hero-showcase-container { --sc-bg:#fff; --sc-head:#f6f8fa; --sc-line:#e3e9ed; --sc-ink:#0d1b24; --sc-body:#3c5262; --sc-muted:#59696f; --sc-akzent:#1b4965; --sc-tint:#ebf2f6; color-scheme:light; position:relative; max-width:1100px; margin:0 auto; padding:2.5rem 0 2.75rem; } .showcase-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; align-items:start; } .showcase-card { position:relative; min-width:0; margin:0; overflow:hidden; border:1px solid var(--sc-line); border-radius:12px; background:var(--sc-bg); color:var(--sc-body); box-shadow:0 24px 48px -18px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.18); font-size:.8125rem; line-height:1.4; } @media (hover:hover) and (prefers-reduced-motion:no-preference) { .showcase-card { transition:transform var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard); }.showcase-card:hover { transform:translateY(-4px); box-shadow:0 30px 56px -18px rgba(0,0,0,.62),0 2px 6px rgba(0,0,0,.2); } } .card-header { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-bottom:1px solid var(--sc-line); background:var(--sc-head); color:var(--sc-ink); font-weight:650; } .sc-dots { display:flex; gap:5px; }.sc-dots i { width:8px; height:8px; border-radius:50%; background:#ec6a5e; }.sc-dots i+i { background:#f4bf4f; }.sc-dots i+i+i { background:#61c554; } .card-title { margin-right:auto; } .card-badge { padding:.15rem .5rem; border-radius:999px; font-size:.75rem; font-weight:650; white-space:nowrap; } .badge-blue { background:#dfe9f7; color:#1f4f8a; }.badge-green { background:#dcf0e5; color:#1a6a44; }.badge-slate { background:#e6ecf0; color:#3c5262; }.badge-orange { background:#fbe5d1; color:#8f3806; } .card-body { padding:.9rem 1rem 1rem; } .card-email { grid-column:1/9; grid-row:1; z-index:2; } .card-ai { grid-column:9/13; grid-row:1; z-index:3; margin-top:3.5rem; margin-left:-3rem; } .card-email .card-body,.card-projects .card-body { padding-right:3.75rem; } .card-projects { grid-column:1/7; grid-row:2; z-index:4; margin-top:-2.5rem; margin-left:1.5rem; } .card-tasks { grid-column:7/13; grid-row:2; z-index:5; margin-top:-.75rem; margin-left:-3rem; } .mock-email-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; padding:.55rem .6rem; border:1px solid var(--sc-line); border-radius:8px; }.mock-email-row:last-child { margin-bottom:0; } .mock-email-row.is-unread { border-color:#a8d4e8; background:var(--sc-tint); } .mock-email-row .avatar { display:grid; flex:none; place-items:center; width:28px; height:28px; border-radius:50%; background:#1b4965; color:#fff; font-size:.75rem; font-weight:700; }.mock-email-row .avatar.alt { background:#59696f; } .mock-meta { flex:1; min-width:0; }.mock-meta strong { display:block; color:var(--sc-ink); }.mock-meta > span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mock-meta .tag { margin-left:.25rem; padding:.05rem .35rem; border-radius:4px; background:var(--sc-line); color:var(--sc-body); font-size:.75rem; font-weight:600; } .mock-email-row time { flex:none; color:var(--sc-muted); font-size:.75rem; } .mock-doc-box { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; padding:.55rem .6rem; border-radius:8px; background:var(--sc-head); }.mock-doc-box .hd-ic { width:20px; height:20px; color:#b4432f; } .doc-info strong { display:block; color:var(--sc-ink); }.doc-info small,.card-body small { color:var(--sc-muted); font-size:.75rem; } .mock-ai-fields { margin:0; }.mock-ai-fields div { display:flex; justify-content:space-between; gap:.75rem; padding:.3rem 0; border-bottom:1px solid var(--sc-line); } .mock-ai-fields dt { color:var(--sc-muted); }.mock-ai-fields dd { margin:0; color:var(--sc-ink); font-weight:600; text-align:right; } .sc-vorschlag { margin-left:.3rem; padding:.05rem .35rem; border-radius:4px; background:var(--sc-tint); color:var(--sc-akzent); font-size:.75rem; font-style:normal; font-weight:600; } .mock-hinweis { margin:.6rem 0 0; color:var(--sc-muted); font-size:.75rem; } .proj-head { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }.proj-head strong { color:var(--sc-ink); }.proj-state { color:#1a6a44; font-size:.75rem; font-weight:650; } .proj-kunde { display:block; } .progress-bar { display:block; height:6px; margin:.55rem 0 .4rem; overflow:hidden; border-radius:3px; background:var(--sc-line); }.progress-fill { display:block; height:100%; border-radius:inherit; background:var(--sc-akzent); } .mock-task-item { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--sc-line); }.mock-task-item:last-child { border-bottom:0; } .mock-task-item > span:last-child { flex:1; }.mock-task-item small { display:block; }.mock-task-item strong { color:var(--sc-ink); }.mock-task-item s { color:var(--sc-muted); } .sc-check { flex:none; width:16px; height:16px; margin-top:1px; border:1.5px solid var(--sc-muted); border-radius:50%; } .mock-task-item.is-done .sc-check { border-color:#1f7a4d; background:#1f7a4d url("data:image/svg+xml,") center/12px no-repeat; } .mock-task-item.is-active .sc-check { border-color:var(--sc-akzent); } /* Unter 900 px keine Ueberlappung, und kein Stapel: vier Karten untereinander machten die Startseite auf dem Telefon um 0,6 Bildschirmhoehen laenger (gemessen 20,07 bei 390 x 844, Waechter 19,5). Eine seitlich wischbare Reihe mit angeschnittener Nachbarkarte traegt alle vier in der Hoehe der hoechsten. */ @media (max-width:899.98px) { .hero-showcase-container { padding:1rem 0 0; } .showcase-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(85%,22rem); gap:.85rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:.25rem .125rem 1rem; scrollbar-width:thin; } .showcase-card { grid-column:auto; grid-row:auto; margin:0; scroll-snap-align:start; }.card-email .card-body,.card-projects .card-body { padding-right:1rem; } .showcase-grid:focus-visible { outline:2px solid #a8d4e8; outline-offset:4px; border-radius:12px; } } @media (max-width:1100px) { .demo-frame.hd-frame { height:clamp(420px,62vw,560px); }} /* Schmal: keine Tab-Leiste am unteren Rand mehr (2026-09-27). Sie war das Erkennungszeichen einer Telefon-App -- KUKANILEA ist keine. Die Seitenleiste bleibt links, wie im Programmfenster, als Symbolleiste; die Beschriftung geht an Hilfstechnik. */ @media (max-width:767.98px) { .demo-frame.hd-frame { height:clamp(470px,120vw,580px); } .demo-frame.hd-frame[data-demo-mode="hero"] { height:auto; aspect-ratio:16/10; font-size:10.5px; }.hd-frame[data-demo-mode="hero"] .hd-nav-item .hd-ic { width:12px; height:12px; }.hd-frame[data-demo-mode="hero"] .hd-topbar { display:none; } .hd-topbar { grid-template-columns:auto minmax(0,1fr) auto; gap:6px; padding:0 8px; }.hd-status { display:none; } .hd-body { grid-template-columns:auto minmax(0,1fr); } .hd-sidebar { width:2.9em; }.hd-nav { padding:3px 2px; gap:0; }.hd-nav-item { position:relative; padding:4px 0; }.hd-nav-item .hd-ic { width:16px; height:16px; } .hd-nav-item > span { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .hd-account,.hd-rail,.hd-ki { display:none; } .hd-page { padding:10px; }.hd-panels { grid-template-columns:1fr; }.hd-panel--kpi { display:none; } .hd-tabs { gap:10px; }.hd-tabs span:first-child { display:none; }.hd-pruef-head .hd-seg { display:none; } .hd-frame[data-demo-state="doc-review"] .hd-pruef,.hd-frame[data-demo-state="doc-filed"] .hd-pruef{ grid-template-columns:1fr; } .hd-frame[data-demo-state="doc-review"] .hd-doc:not(.hd-doc--pending),.hd-frame[data-demo-state="doc-filed"] .hd-doc:not(.hd-doc--pending){ display:none; } .hd-field { grid-template-columns:1fr; gap:1px; }.hd-next { flex-direction:column; align-items:stretch; }.hd-selbar { flex-wrap:wrap; white-space:normal; overflow:visible; } .hd-mail { grid-template-columns:minmax(0,1fr); }.hd-folders,.hd-threads { border-right:0; }.hd-threads { border-bottom:1px solid var(--hd-line); }.hd-folders { display:none; } .hd-frame[data-demo-state="mail-open"] .hd-threads { display:none; }.hd-frame:not([data-demo-state="mail-open"]) .hd-reader { display:none; } .hd-cal { grid-template-columns:1fr; }.hd-cal-side { display:none; }.hd-toolbar .hd-seg { display:none; }.hd-week { grid-template-columns:repeat(3,minmax(0,1fr)); }.hd-week > div:nth-child(n+4) { display:none; } .hd-tasks3 { grid-template-columns:1fr; }.hd-tlists { display:none; }.hd-frame:not([data-demo-state="task-new"]):not([data-demo-state="task-done"]) .hd-tdetail { display:none; } .hd-cards { grid-template-columns:1fr; }.hd-card:not(.hd-card--focus) { display:none; }.hd-toolbar .hd-btn { display:none; } } @media (max-width:430px) { .demo-frame.hd-frame { border-radius:12px; }.hd-greet strong { font-size:1.2em; } } @media (max-width:1100px) {@media (prefers-reduced-motion:no-preference) { .hd { animation-name:hero-window-in-gestapelt; } } .story-hero-grid,.stage-heading,.document-grid,.areas-layout,.tools-grid { grid-template-columns:1fr; }.story-hero-grid { gap:30px; }.story-hero-copy h1 { max-width:12ch; }.stage-heading { gap:24px; }.stage-heading>p { max-width:58ch; }.tools-grid { gap:58px; }.tools-copy { display:grid; grid-template-columns:1fr 1fr; gap:16px 42px; align-items:end; }.tools-copy .story-kicker,.tools-copy h2,.tools-copy .tool-facts { grid-column:1/-1; }.tools-copy .btn { justify-self:start; } } @media (max-width:900px) { :root { --shell:min(1500px, calc(100% - max(36px, 2 * env(safe-area-inset-left, 0px)))); }.story-hero { padding:54px 0 72px; }.story-hero-copy h1 { font-size:clamp(2rem,6.6vw,2.7rem); }.story-lead { font-size:1rem; } .principle-heading { grid-template-columns:1fr; gap:16px; }.principle-heading h2,.stage-heading h2,.outcomes-head h2,.document-grid h2,.local-story h2,.areas-intro h2,.tools-copy h2,.fit-story h2 { font-size:clamp(2.15rem,8vw,2.8rem); }.principle-heading>p:last-child { max-width:58ch; }.story-principle,.product-stage,.story-outcomes,.document-story,.local-story,.areas-story,.tools-story,.fit-story,.story-final { padding-block:68px; }.demo-cursor { display:none; } .outcomes-copy,.areas-content { display:block; }.outcomes-head,.areas-intro { margin-bottom:var(--s5); }.document-grid { gap:40px; }.document-workbench { max-width:820px; }.areas-intro { grid-template-columns:1fr; gap:14px; }.areas-intro>p:last-child { grid-column:1; }.areas-list a { grid-template-columns:.55fr 1fr; }.tools-copy { display:block; }.tool-facts { max-width:420px; } } @media (max-width:430px) { :root { --shell:calc(100% - max(32px, 2 * env(safe-area-inset-left, 0px))); }.story-hero-copy h1 { font-size:clamp(1.85rem,8.2vw,2.25rem); }.story-actions { align-items:stretch; }.story-actions .btn,.story-actions .story-text-link { width:100%; justify-content:center; } .principle-heading h2,.stage-heading h2,.outcomes-head h2,.document-grid h2,.local-story h2,.areas-intro h2,.tools-copy h2,.fit-story h2 { font-size:clamp(2rem,9.5vw,2.4rem); }.local-visual { padding:12px; }.local-mode { padding:14px 9px; }.areas-list a { min-height:74px; padding:16px 0; }.areas-list small { margin-top:4px; }.areas-list b { grid-column:2; grid-row:1/3; }.tool-search { grid-template-columns:24px 1fr; }.tool-search>small { display:none; }.tool-tabs { display:grid; grid-template-columns:1fr 1fr; }.tool-suggestions { grid-template-columns:1fr 1fr; }.tool-suggestions a { grid-template-columns:34px 1fr; min-height:84px; padding:10px; }.tool-icon { width:32px; height:38px; }.tool-suggestions a>b { display:none; }.tool-facts { gap:16px; } } @media (max-width:600px) { .areas-list a { display:flex; flex-direction:column; align-items:start; } .document-workbench { padding:13px; } .flow-paper { display:none; }.flow-token { display:none!important; } } @media (prefers-reduced-motion:reduce) { .demo-cursor { display:none!important; }.story-text-link span,.areas-list a,.tool-suggestions a,.nav-gruppe>summary>span,.nav-spalten a:after { transition:none!important; } } @media (max-width:900px) { .story-hero h1,.story-principle h2,.product-stage h2,.story-outcomes h2,.document-story h2,.local-story h2,.areas-story h2,.tools-story h2,.fit-story h2 { hyphens:none; overflow-wrap:normal; } } @media (hover:none), (pointer:coarse) { .demo-cursor { display:none!important; } } .fit-section { background:var(--off); } .fit-layout { display:grid; grid-template-columns:minmax(260px, .78fr) minmax(0, 1.22fr); gap:clamp(42px, 6vw, 80px); align-items:start; } .fit-columns { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 56px); margin:0; } .fit-column { position:relative; min-width:0; padding:28px; border:1px solid var(--petrol-soft); border-radius:var(--radius); background:var(--petrol-tint); } .fit-columns .fit-column { padding:var(--s3) 0 0; border:0; border-top:2px solid var(--petrol); border-radius:0; background:none; } .fit-columns .fit-column.is-check { border-top-color:var(--muted); } .fit-columns .fit-column.is-check .simple-list li::before { top:.92em; width:11px; height:2px; border:0; border-radius:0; background:var(--muted); } .fit-symbol { display:grid; width:34px; height:34px; place-items:center; margin-bottom:18px; border-radius:50%; background:#fff; color:var(--petrol); font-weight:850; } .fit-column h3 { margin:0; font-size:var(--fs-3); } .simple-list { display:grid; gap:11px; margin:20px 0 0; } .simple-list li { position:relative; padding-left:20px; color:var(--ink-soft); } .simple-list li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border:2px solid var(--petrol-mid); border-radius:50%; } .fit-link { margin-top:24px; } /* Ein Link allein in seiner Zeile ist ein Steuerelement, kein Wort im Fliesstext: die Inline-Ausnahme von WCAG 2.5.8 gilt nicht. Mehrere Ziele in einer Zeile schon. */ p.note > a:only-child, .fit-link > a, dd > a:only-child, .extra-list > article > a:last-child { display:inline-flex; align-items:center; min-height:32px; } .faq-list { border-top:2px solid var(--petrol); } .faq-item { border-bottom:1px solid var(--line-strong); } .faq-item summary { display:flex; align-items:center; min-height:64px; padding:12px 42px 12px 0; color:var(--ink); font-size:var(--fs-2); font-weight:750; cursor:pointer; } .faq-body { padding:0 0 18px; color:var(--body); } .product-section, .day-section { background:var(--off); } .module-section { background:#fff; } .local-section { background:var(--petrol-night); color:#dce8ee; } .local-section h2, .local-section h3 { color:#fff; } .local-section .kicker { color:#9fcde1; } .local-section .home-link { color:#a8d4e8; } html[data-theme="dark"] .site-header { background:transparent; box-shadow:none; } /* Eingeblendet mitten auf der Seite braucht der Kopf auch dunkel eine Flaeche. */ html[data-theme="dark"] .site-header.is-scrolled { background:var(--paper); box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(0,0,0,.35); } html[data-theme="dark"] .page-nav a, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .toc, html[data-theme="dark"] .article-hero, html[data-theme="dark"] .module-section, html[data-theme="dark"] .fit-section, html[data-theme="dark"] .product-section, html[data-theme="dark"] .day-section, html[data-theme="dark"] .tool-suggestions a, html[data-theme="dark"] .fit-symbol { background:var(--paper); color:var(--body); } html[data-theme="dark"] .article-hero { background:linear-gradient(180deg, var(--petrol-tint), var(--white) 70%); } html[data-theme="dark"] :is(.site-nav > a:not(.btn),.nav-gruppe>summary) { color:var(--ink-soft); } html[data-theme="dark"] :is(.site-nav > a:not(.btn):hover,.nav-gruppe>summary:hover,.nav-gruppe[open]>summary,.site-nav [aria-current]) { color:var(--petrol); } html[data-theme="dark"] .site-header .theme-toggle { background:transparent; border-color:transparent; color:var(--muted); } html[data-theme="dark"] .site-header .theme-toggle:hover { background:var(--petrol-tint); border-color:var(--line); color:var(--petrol); } html[data-theme="dark"] .story-hero { background:radial-gradient(circle at 83% 18%, #1b3a4a 0, transparent 34%), var(--white); } html[data-theme="dark"] .story-hero-copy h1 { color:var(--ink); } html[data-theme="dark"] .local-visual { background:linear-gradient(145deg,#173a4f,#12313f); border-color:rgba(168,212,232,.5); } html[data-theme="dark"] .product-stage, html[data-theme="dark"] .story-final { box-shadow:inset 0 1px 0 rgba(168,212,232,.12); } html[data-theme="dark"] .faq-item summary::after { border-color:var(--petrol-bright); } /* Ratgeber-Bausteine im Dunkelmodus (2026-09-28). Die Textfarben kommen aus den Tokens und wurden hell, die Flaechen standen hart hell im Code -- Warnkasten, Tabelle, Zusammenfassung, Einschuebe, Faktenliste, Vergleichstabelle, Fussnote, Weiterlesen: 1,0 bis 1,8:1. Die helle Fassung bleibt unberuehrt; hier bekommen nur die Flaechen ihre dunkle Entsprechung. */ html[data-theme="dark"] .info-box-warn { background:#2a2415; border-color:#6b5a2e; } html[data-theme="dark"] .info-box-warn > svg { stroke:#e2b458; } html[data-theme="dark"] .prose table { background:var(--paper); } html[data-theme="dark"] .art-sum { background:linear-gradient(180deg, rgba(155, 208, 223, .06), rgba(155, 208, 223, 0) 70%), var(--paper); } html[data-theme="dark"] .art-inset { background:var(--paper); } html[data-theme="dark"] .art-inset[data-variant="achtung"] { border-left-color:#e08a5a; background:#2a1d17; } html[data-theme="dark"] .art-inset[data-variant="achtung"] .art-inset-label { color:#f0a37a; } html[data-theme="dark"] .art-inset[data-variant="definition"] { background:var(--petrol-tint); } html[data-theme="dark"] .art-facts > div:nth-child(odd) { background:var(--off); } html[data-theme="dark"] .art-cmp thead th { background:var(--wash); } html[data-theme="dark"] .art-fn li:target { background:#3a3218; } html[data-theme="dark"] .art-next { background:linear-gradient(135deg, var(--wash), var(--paper)); } /* Die Schrittziffer steht als Pseudoelement auf --accent, das im Dunkeln hell wird -- weiss darauf ist unlesbar, und axe misst Pseudoinhalte nicht. */ html[data-theme="dark"] .art-steps > li::before { color:var(--white); } html[data-theme="dark"] .tool-icon { background:var(--petrol-tint); color:var(--petrol-dark); } @media (max-width: 920px) { } @media (max-width: 680px) { .fit-layout { grid-template-columns:minmax(0, 1fr); } .fit-columns { grid-template-columns:minmax(0, 1fr); } .fit-columns { gap:var(--s5); } } /* Upload-Demo: eine vollständige, fiktive A4-Rechnung. Zeiger, Feldhaken und Prozesspfad werden in site.js aus demselben Phasenmodell gesteuert. */ .document-workbench { flex-wrap:nowrap; } .document-workbench .flow-paper { position:relative; display:flex; flex:0 0 clamp(318px,42%,344px); flex-direction:column; min-width:318px; min-height:0; aspect-ratio:210 / 297; padding:clamp(17px,1.7vw,23px); overflow:hidden; border-color:#d7e1e8; border-radius:2px; background:#fff; box-shadow:0 15px 34px rgba(13,34,51,.12); } .invoice-head,.invoice-brand,.invoice-title,.invoice-meta,.invoice-table,.invoice-totals,.invoice-total,.invoice-payment,.invoice-footer { position:relative; z-index:1; } .invoice-head { display:flex!important; justify-content:flex-end; align-items:center; padding-bottom:8px; border-bottom:1px solid #d7e1e8; } .invoice-head>span { padding:4px 6px; border-radius:3px; background:#e7f0f5; color:var(--petrol); font-size:.5rem; font-weight:850; letter-spacing:.05em; } /* Nebentexte der Beispielrechnung: #586a77 statt #718493/#82919b (2026-09-28). Die helleren Toene lagen bei 3,2 bis 3,9:1 und damit unter WCAG 1.4.3 -- das Blatt ist Beispiel, aber lesbarer Text; 5,4:1 auf dem hellsten Grund. */ .invoice-head small { color:#586a77; font-size:.43rem; } .invoice-brand { display:grid; gap:1px; margin-top:10px; } .invoice-brand strong { color:#102b3d; font-size:.62rem; } .invoice-brand small { color:#586a77; font-size:.4rem; line-height:1.35; } .invoice-title { display:flex; justify-content:space-between; align-items:end; margin-top:10px; padding-bottom:6px; border-bottom:2px solid #1f5878; color:#153e56; } .invoice-title strong { font-size:.72rem; letter-spacing:.1em; } .invoice-title b { font-size:.52rem; } .invoice-meta { display:grid; grid-template-columns:1.22fr 1fr; gap:7px; margin-top:8px; } .invoice-meta>div { position:relative; display:grid; align-content:start; gap:2px; min-width:0; min-height:49px; padding:6px; border:1px solid #d7e1e8; border-radius:3px; background:#f8fafb; } .invoice-meta span,.invoice-table-head,.invoice-total>span { color:#586a77; font-size:.4rem; text-transform:uppercase; letter-spacing:.055em; } .invoice-meta b { overflow:hidden; color:#173d55; font-size:.5rem; text-overflow:ellipsis; white-space:nowrap; } .flow-value { color:#173d55; font-weight:760; } .invoice-meta small { color:#586a77; font-size:.38rem; line-height:1.35; } .invoice-table { margin-top:8px; border-top:1px solid #d7e1e8; } .invoice-table>div { position:relative; display:grid; grid-template-columns:20px minmax(0,1fr) 29px 28px 50px; gap:4px; align-items:center; padding:6px 0; border-bottom:1px solid #e4ebef; color:#304f61; font-size:.4rem; } .invoice-table .invoice-table-head { padding:4px 0!important; border-bottom:1px solid #d7e1e8!important; } .invoice-table-head span:last-child,.invoice-line>b { text-align:right; } .invoice-line>span:nth-child(n+3) { text-align:center; } .invoice-line>span:nth-child(2) { display:grid; gap:1px; font-weight:720; } .invoice-line small { color:#586a77; font-size:.35rem; font-weight:500; line-height:1.25; } .invoice-line b { color:#173d55; font-size:.43rem; } .invoice-totals { display:grid; gap:3px; margin:6px 0 0 auto; width:58%; } .invoice-totals>span { position:relative; display:flex; justify-content:space-between; gap:6px; color:#586a77; font-size:.4rem; } .invoice-totals b { color:#173d55; font-size:.42rem; } .invoice-total { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin-top:6px; padding:7px 0 5px; border-top:2px solid #173f58; border-bottom:1px solid #d7e1e8; } .invoice-total strong { color:#173f58; font-size:.63rem; } .invoice-payment { display:grid; gap:1px; margin-top:6px; color:#304f61; } .invoice-payment b { font-size:.42rem; } .invoice-payment small { color:#586a77; font-size:.36rem; line-height:1.35; } .invoice-footer { margin-top:5px; color:#586a77; font-size:.32rem; line-height:1.35; } .flow-field-check { position:absolute; right:4px; top:50%; z-index:3; display:grid; place-items:center; width:13px; height:13px; border-radius:50%; background:#15803d; color:#fff; font-size:.5rem; font-style:normal; line-height:1; opacity:0; transform:translateY(-50%) scale(.65); transition:opacity .22s var(--ease-standard),transform .22s var(--ease-standard); } .invoice-line .flow-field-check { right:46px; } .invoice-totals .flow-field-check { right:-17px; } .invoice-total .flow-field-check { right:-4px; } .flow-field-check.is-checked { opacity:1; transform:translateY(-50%) scale(1); animation:flow-check-in .35s cubic-bezier(.22,1,.36,1) both; } @keyframes flow-check-in { 0%{opacity:0;transform:translateY(-50%) scale(.35)} 70%{transform:translateY(-50%) scale(1.12)} 100%{opacity:1;transform:translateY(-50%) scale(1)} } .document-workbench .flow-slot { display:grid; align-content:start; min-height:25px; margin-top:6px; } .document-workbench .flow-confirm { display:none; margin:0; padding:4px 6px; border:1px solid #b7e0c3; border-radius:4px; background:#effaf1; color:#15803d; font-size:.43rem; letter-spacing:.02em; width:max-content; } .document-workbench[data-phase="7"] .flow-confirm { display:block; animation:flow-status-in .3s var(--ease-standard) both; } .document-workbench .flow-stamp { display:none!important; margin:0; padding:4px 6px; border:1px solid #15803d; border-radius:3px; color:#15803d; font-size:.43rem; letter-spacing:.035em; transform:none; width:max-content; } .document-workbench[data-phase="8"] .flow-stamp,.document-workbench[data-phase="9"] .flow-stamp { display:inline-block!important; animation:flow-status-in .35s var(--ease-standard) both; } .document-workbench .flow-task { display:none; margin:3px 0 0; color:#1d668d; font-size:.4rem; font-weight:700; } .document-workbench[data-phase="9"] .flow-task { display:block; animation:flow-status-in .3s var(--ease-standard) both; } @keyframes flow-status-in { from{opacity:0;transform:translateY(3px) scale(.96)} } .document-workbench .flow-pointer { position:absolute; z-index:6; left:var(--flow-x,72%); top:var(--flow-y,10%); display:block; width:22px; height:28px; translate:-2px -2px; pointer-events:none; filter:drop-shadow(0 2px 2px rgba(13,34,51,.25)); transition:left .58s cubic-bezier(.22,1,.36,1),top .58s cubic-bezier(.22,1,.36,1),opacity .25s; } .flow-pointer:before { content:""; position:absolute; inset:0; clip-path:polygon(8% 3%,92% 53%,57% 60%,78% 93%,62% 100%,43% 67%,20% 88%); background:#173f58; } .flow-pointer:after { content:""; position:absolute; inset:2px 2px 1px 2px; clip-path:polygon(12% 9%,84% 52%,54% 57%,73% 89%,64% 94%,45% 62%,23% 82%); background:#fff; } .document-workbench .flow-pointer.is-clicking { animation:flow-pointer-click .3s cubic-bezier(.22,1,.36,1); } @keyframes flow-pointer-click { 45%{scale:.84} 100%{scale:1} } .document-workbench .document-path li>span { position:relative; } .document-workbench .flow-token { display:none!important; } .document-workbench .document-path li>span>b { display:block; font-size:.62rem; } .document-workbench[data-schritt] .document-path li>span { border-color:var(--line-strong); background:var(--paper); color:var(--petrol-mid); } .document-workbench[data-schritt] .document-path li>em { opacity:.72; background:var(--petrol-tint); color:var(--dim-text); } .flow-check { display:none; color:#fff; font-size:.65rem; font-style:normal; font-weight:850; line-height:1; } .document-workbench[data-complete="1"] .document-path li:nth-child(-n+1)>span,.document-workbench[data-complete="2"] .document-path li:nth-child(-n+2)>span,.document-workbench[data-complete="3"] .document-path li:nth-child(-n+3)>span,.document-workbench[data-complete="4"] .document-path li:nth-child(-n+4)>span,.document-workbench[data-complete="5"] .document-path li:nth-child(-n+5)>span { border-color:#15803d; background:#15803d; color:#fff; } .document-workbench[data-complete="1"] .document-path li:nth-child(-n+1) .flow-check,.document-workbench[data-complete="2"] .document-path li:nth-child(-n+2) .flow-check,.document-workbench[data-complete="3"] .document-path li:nth-child(-n+3) .flow-check,.document-workbench[data-complete="4"] .document-path li:nth-child(-n+4) .flow-check,.document-workbench[data-complete="5"] .document-path li:nth-child(-n+5) .flow-check { display:block; } .document-workbench[data-complete="1"] .document-path li:nth-child(-n+1)>span b,.document-workbench[data-complete="2"] .document-path li:nth-child(-n+2)>span b,.document-workbench[data-complete="3"] .document-path li:nth-child(-n+3)>span b,.document-workbench[data-complete="4"] .document-path li:nth-child(-n+4)>span b,.document-workbench[data-complete="5"] .document-path li:nth-child(-n+5)>span b { display:none; } .document-workbench[data-schritt="1"] .document-path li:nth-child(1)>em,.document-workbench[data-schritt="2"] .document-path li:nth-child(2)>em,.document-workbench[data-schritt="3"] .document-path li:nth-child(3)>em,.document-workbench[data-schritt="4"] .document-path li:nth-child(4)>em,.document-workbench[data-schritt="5"] .document-path li:nth-child(5)>em { opacity:1; background:var(--btn-primary-bg); color:var(--btn-primary-fg); } .document-workbench[data-schritt="1"] .document-path li:nth-child(1)>span,.document-workbench[data-schritt="2"] .document-path li:nth-child(2)>span,.document-workbench[data-schritt="3"] .document-path li:nth-child(3)>span,.document-workbench[data-schritt="4"] .document-path li:nth-child(4)>span,.document-workbench[data-schritt="5"] .document-path li:nth-child(5)>span { border-color:var(--petrol); box-shadow:0 0 0 3px rgba(31,88,120,.1); } @media (max-width:600px) { .document-workbench { flex-direction:column; align-items:stretch; gap:17px; } .document-workbench .flow-paper { align-self:center; width:min(100%,340px); min-width:0; flex-basis:auto; } .document-workbench .document-path { width:100%; flex-basis:auto; } } @media (min-width:601px) and (max-width:700px) { .document-workbench { gap:14px; padding:14px; } .document-workbench .document-path li { grid-template-columns:34px minmax(0,1fr); gap:9px; } .document-workbench .document-path li>em { display:none; } } @media (prefers-reduced-motion:reduce) { .document-workbench .flow-pointer { display:none; } .document-workbench .flow-field-check { transition:none; } } /* Webtools auf der Startseite: Nutzen, Auswahl und direkter Einstieg bilden einen gemeinsamen Produktmoment statt einer knappen Linkliste. */ .tools-story { position:relative; overflow:hidden; background:linear-gradient(145deg,var(--off) 0%,#eaf3f8 52%,var(--off) 100%); } .tools-story:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.32; background-image:radial-gradient(circle at 1px 1px,rgba(31,88,120,.13) 1px,transparent 1.2px); background-size:24px 24px; mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent); } .tools-story .tools-grid { position:relative; grid-template-columns:minmax(330px,.78fr) minmax(560px,1.22fr); gap:clamp(28px,4vw,64px); align-items:stretch; } .tools-copy { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(28px,3.4vw,52px); border-radius:24px; background:linear-gradient(145deg,#0c3045 0%,#174f6c 100%); color:#fff; box-shadow:0 28px 70px rgba(13,48,69,.18); } .tools-copy .story-kicker { color:#a9d8ef; } .tools-copy h2 { max-width:12ch; margin:0 0 20px; color:#fff; font-size:clamp(2.4rem,3.45vw,3.55rem); line-height:1.01; letter-spacing:-.047em; } .tools-copy>p.tools-lead { max-width:46ch; margin:0; color:rgba(255,255,255,.8); font-size:clamp(.98rem,1.18vw,1.1rem); line-height:1.66; } .tools-copy .tool-facts { display:grid; grid-template-columns:.72fr 1.3fr 1fr; width:100%; gap:16px; margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.22); } .tools-copy .tool-facts span { min-width:0; } .tools-copy .tool-facts b,.tools-copy .tool-facts small { display:block; } .tools-copy .tool-facts b { color:#fff; font-size:.82rem; line-height:1.2; } .tools-copy .tool-facts span:first-child b { color:#f4c95d; font-size:1.35rem; letter-spacing:-.035em; } .tools-copy .tool-facts small { margin-top:4px; color:rgba(255,255,255,.64); font-size:.69rem; } .tool-use-cases { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin-top:24px; } .tool-use-cases span { display:flex; align-items:center; gap:8px; min-width:0; padding:9px 10px; border:1px solid rgba(255,255,255,.15); border-radius:8px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.9); font-size:.69rem; } .tool-use-cases i { display:grid; flex:none; place-items:center; width:30px; height:26px; border-radius:5px; background:rgba(169,216,239,.14); color:#bfe7f7; font-size:.48rem; font-style:normal; font-weight:850; letter-spacing:.04em; } .tools-copy .tools-main-cta { margin-top:auto; background:#fff; color:#123f58; box-shadow:0 12px 28px rgba(0,0,0,.14); } .tools-copy .tools-main-cta:hover { background:#f3f8fb; color:#0c3045; } .tool-finder { display:flex; flex-direction:column; padding:clamp(24px,3vw,40px); border:1px solid rgba(31,88,120,.18); border-radius:24px; background:rgba(255,255,255,.88); box-shadow:0 28px 70px rgba(27,73,101,.13); backdrop-filter:blur(10px); } .tool-finder-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:18px; } .tool-finder-head div { display:grid; gap:4px; } .tool-finder-head small { color:var(--petrol-mid); font-size:.64rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .tool-finder-head strong { color:var(--ink); font-size:clamp(1.18rem,1.6vw,1.45rem); letter-spacing:-.025em; } .tool-finder-head>span { display:flex; align-items:center; gap:6px; color:#25704c; font-size:.67rem; font-weight:750; white-space:nowrap; } .tool-finder-head>span i { width:7px; height:7px; border-radius:50%; background:#2f9c68; box-shadow:0 0 0 4px rgba(47,156,104,.12); } .tool-finder .tool-search { grid-template-columns:30px 1fr auto; min-height:70px; padding:0 17px; border:1px solid rgba(31,88,120,.28); border-radius:11px; background:#f3f8fb; box-shadow:inset 0 0 0 1px rgba(255,255,255,.72); } .tool-finder .tool-search>span { color:var(--petrol); font-size:1.4rem; } .tool-finder .tool-search strong { font-size:clamp(1rem,1.4vw,1.2rem); } .tool-finder .tool-search small { padding:5px 7px; border-radius:5px; background:#fff; color:var(--muted); font-size:.62rem; } .tool-finder .tool-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:16px 0; } .tool-finder .tool-tabs button { min-height:42px; padding:6px 8px; border-radius:8px; font-size:.68rem; font-weight:720; line-height:1.25; } .tool-suggestions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .tool-suggestions a { display:grid; grid-template-columns:42px minmax(0,1fr) auto; grid-template-rows:1fr; gap:11px; align-items:center; min-height:92px; padding:13px; border:1px solid rgba(31,88,120,.16); border-radius:11px; background:rgba(255,255,255,.72); transition:border-color .2s,box-shadow .2s,transform .2s; } .tool-suggestions a:hover { border-color:var(--petrol-mid); box-shadow:0 10px 24px rgba(27,73,101,.1); transform:translateY(-2px); } .tool-suggestions .tool-icon { display:grid; grid-row:1; place-items:center; width:42px; height:46px; border-radius:8px; background:#e4f0f6; color:var(--petrol)!important; font-size:.55rem; font-weight:850; } .tool-card-copy { display:grid; min-width:0; gap:4px; } .tool-card-copy strong { overflow:hidden; color:var(--ink); font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; } .tool-card-copy small { overflow:hidden; color:var(--muted); font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; } .tool-open { display:grid; justify-items:end; gap:3px; color:var(--petrol-mid); font-size:.55rem; font-weight:750; } .tool-open b { font-size:1rem; line-height:1; transition:transform .2s; } .tool-suggestions a:hover .tool-open b { transform:translateX(3px); } .tool-catalog-link { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:auto; padding-top:18px; color:var(--petrol); font-size:.76rem; font-weight:780; text-decoration:none; } .tool-catalog-link b { font-size:1.15rem; transition:transform .2s; } .tool-catalog-link:hover b { transform:translateX(4px); } .tool-use-cases i .hd-ic { width:15px; height:15px; } .tool-finder>label.tool-search { display:grid; margin:0; color:var(--ink); font-size:inherit; } .tool-finder .tool-search { position:relative; transition:border-color .2s,box-shadow .2s,background .2s; } .tool-finder .tool-search:focus-within { border-color:var(--petrol); background:#fff; box-shadow:0 0 0 3px rgba(31,88,120,.1); } .tool-finder .tool-search>.hd-ic { width:19px; height:19px; color:var(--petrol); } .tool-finder .tool-search input { width:100%; min-width:0; padding:20px 0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:clamp(.94rem,1.3vw,1.08rem); font-weight:680; } .tool-finder .tool-search input::placeholder { color:#526775; opacity:1; font-weight:620; } .tool-finder .tool-search input::-webkit-search-cancel-button { cursor:pointer; } /* iOS Safari vergroessert die Seite beim Tippen in ein Feld unter 16 px -- und zoomt danach nicht zurueck. Bei 390 px stand dieses Feld auf 15 px. */ @media (pointer: coarse) { .tool-finder .tool-search input { font-size:max(16px, 1rem); } } .tool-finder.is-searching .tool-tabs { display:none; } .tool-finder.is-searching .tool-suggestions { margin-top:16px; } .tool-suggestions .tool-icon .hd-ic { width:22px; height:22px; } .tool-suggestions a:focus-visible { outline:3px solid rgba(31,88,120,.22); outline-offset:2px; } .tool-empty { grid-column:1/-1; display:grid; gap:5px; min-height:92px; margin:0; padding:18px; border:1px dashed rgba(31,88,120,.28); border-radius:11px; place-content:center start; } .tool-empty strong { font-size:.83rem; } .tool-empty span { color:var(--muted); font-size:.7rem; } /* tool-chip-breathe ist am 2026-09-18 entfallen. Die Chips atmeten dauerhaft in 5,4-Sekunden-Schleifen -- eine Endlosbewegung, und das Motion-System bindet die an drei Bedingungen: Kapselung in prefers-reduced-motion, Halt bei data-hidden und mindestens 20 Sekunden Dauer. Die dritte war verletzt, und sie liesz sich nicht sinnvoll erfuellen: mit 20 Sekunden ist eine 3-Pixel-Atmung unsichtbar, mit endlicher Wiederholung ein einzelner Huepfer. Die Bewegung trug keine Information -- sie blieb weg. Gefunden wurde sie erst, nachdem die Meldungsschleife daneben von 18 auf 20 Sekunden ging: der Test schneidet seine Befundliste bei fuenf ab, und die Chips standen dahinter. Ein bekannter Fehler hat einen unbekannten verdeckt, diesmal innerhalb desselben Tests. */ @media (prefers-reduced-motion:no-preference) { .tool-suggestions a { animation:flow-status-in .38s var(--ease-standard) both; } .tool-suggestions a:nth-child(2) { animation-delay:.04s; } .tool-suggestions a:nth-child(3) { animation-delay:.08s; } .tool-suggestions a:nth-child(4) { animation-delay:.12s; } } @media (max-width:1100px) { .tools-story .tools-grid { grid-template-columns:1fr; } .tools-copy { display:flex; min-height:0; } .tools-copy h2 { max-width:15ch; } .tools-copy>p.tools-lead { max-width:58ch; } .tools-copy .tools-main-cta { margin-top:28px; } } @media (max-width:620px) { .tools-copy,.tool-finder { border-radius:18px; } .tools-copy .tool-facts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .tool-finder-head { align-items:start; } .tool-finder-head>span { margin-top:4px; } .tool-finder .tool-tabs { grid-template-columns:1fr 1fr; } .tool-suggestions { grid-template-columns:1fr; } } @media (max-width:430px) { .tools-copy,.tool-finder { padding:22px 18px; } .tools-copy .tool-facts { grid-template-columns:1fr; } .tools-copy .tool-facts span { display:grid; grid-template-columns:1fr 1fr; align-items:baseline; gap:8px; } .tools-copy .tool-facts small { text-align:right; } .tool-use-cases { grid-template-columns:1fr; } .tool-finder-head { display:grid; } .tool-finder .tool-search { grid-template-columns:25px 1fr; } .tool-finder .tool-search small { display:none; } } html[data-theme="dark"] .tools-story { background:linear-gradient(145deg,#081f2d,#0c2c3e 55%,#081f2d); } /* Deckend statt .9: eine halbtransparente Karte hat keinen festen Kontrast -- er haengt am Abschnitt darunter. Gemessen am 2026-09-27: "Kostenlos nutzbar" 2,60:1, "170+ Werkzeuge" 1,95:1 (website-a11y.spec, Dark Mode), vorbestehend auch auf origin/main. */ html[data-theme="dark"] .tool-finder { background:#0C2838; } html[data-theme="dark"] .tool-finder-head > span { color:#6EE7B7; } html[data-theme="dark"] .tool-finder .tool-search,html[data-theme="dark"] .tool-suggestions a { background:rgba(255,255,255,.04); } html[data-theme="dark"] .tool-finder .tool-search:focus-within { background:rgba(255,255,255,.07); } html[data-theme="dark"] .tool-finder .tool-search small { background:#1B3645; } /* Policy-Versionen bleiben sichtbar, ohne den Rechtstext zu dominieren. */ .policy-version{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem 1rem; max-width:70ch; margin:1.1rem 0 0; color:var(--muted); font-size:.82rem; } .policy-version span+span::before{content:"·";margin-right:1rem;color:var(--line-strong)} .policy-version a{font-weight:700;color:var(--brand);text-underline-offset:.18em} /* Anfrage-Composer auf /kontakt. Die Chips sind echte Radiobuttons: sie bleiben mit Tastatur und Screenreader als Gruppe bedienbar, und der Fokusring liegt auf dem sichtbaren Feld statt auf einem versteckten Input. Zielgrosze mindestens 44 px (WCAG 2.2 AA, 2.5.8). Verhalten: site.js. */ .composer { margin:1.6rem 0 0; padding:clamp(1rem,2.4vw,1.6rem); border:1px solid var(--line); border-radius:var(--radius); background:var(--off); } .composer-h { margin:0 0 .35rem; font-size:1.1rem; } .composer-intro { margin:0 0 1.2rem; color:var(--muted); font-size:.92rem; max-width:56ch; } .composer-block { margin:0 0 1.3rem; padding:0; border:0; } .composer-block legend { padding:0; margin:0 0 .6rem; font-weight:750; font-size:.95rem; } .composer-frage { margin:.9rem 0 .5rem; font-size:.84rem; font-weight:700; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; } .composer-block .composer-frage:first-of-type { margin-top:0; } /* Die Schreibstil-Wahl steht ueber der Nachricht und soll ihr nicht die Schau stehlen: kleinere Beschriftung, kein Rahmen, etwas Abstand nach unten. Die Flaeche darunter soll wie eine Mail wirken, nicht wie ein zweites Formular. Auf schmalen Ansichten bricht sie um -- kein waagerechter Streifen. */ .composer-stil { margin:0 0 .9rem; padding:0; border:0; } .composer-stil legend { padding:0; margin:0 0 .5rem; font-size:.78rem; font-weight:750; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3, #5b6670); } .composer-chips { display:flex; flex-wrap:wrap; gap:.45rem; } .composer-chips label { position:relative; display:inline-flex; align-items:center; min-height:44px; padding:.5rem .9rem; border:1px solid var(--line-strong); border-radius:var(--radius-control); background:var(--white); cursor:pointer; font-size:.92rem; } .composer-chips input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .composer-chips label:hover { border-color:var(--petrol); } .composer-chips label:has(input:checked) { border-color:var(--petrol); background:var(--petrol); color:var(--white); font-weight:650; } .composer-chips label:has(input:focus-visible) { outline:3px solid var(--petrol); outline-offset:2px; } .composer-felder { display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); } /* Zwei Klassen, nicht eine: die Kontaktseite fuehrt `.section p + p` mit margin-top, und das schlaegt eine einklassige Regel. Gemessen am 2026-09-17: Betrieb und Telefon standen 16 px tiefer als Name. */ .composer .composer-felder p { margin:0; } .composer .composer-voll { margin:.8rem 0 0; } .composer label[for] { display:block; margin-bottom:.25rem; font-size:.88rem; font-weight:650; } .composer-opt { font-weight:400; color:var(--muted); } /* Nicht nach Typ aufzaehlen, sondern ausschlieszen, was ein Chip ist: die erste Fassung nannte text und tel -- und das E-Mail-Feld stand daneben in Browser-Vorgabebreite, halb so breit wie die anderen. Ein neuer Feldtyp erbt jetzt die Gestalt, statt sie zu verlieren. */ .composer input:not([type=radio]):not([type=checkbox]), .composer textarea { width:100%; min-height:44px; padding:.55rem .7rem; border:1px solid var(--line-strong); border-radius:var(--radius-control); background:var(--white); color:var(--ink); font:inherit; } .composer textarea { min-height:5rem; resize:vertical; } .composer input:focus-visible, .composer textarea:focus-visible { outline:3px solid var(--petrol); outline-offset:1px; border-color:var(--petrol); } /* Die Meldung steht dort, wo die Auswahl fehlt -- nicht als rote Wand oben und nicht als Browserblase an einem unsichtbaren Feld. */ .composer .composer-fehler { margin:.7rem 0 0; padding:.55rem .8rem; border-left:3px solid #8a3131; border-radius:0 var(--radius-control) var(--radius-control) 0; background:var(--white); color:#8a3131; font-size:.9rem; font-weight:650; } .composer-chips label:has(input[aria-invalid="true"]) { border-color:#8a3131; } .composer-fit { margin:.9rem 0 0; padding:.7rem .85rem; border-left:3px solid var(--petrol); background:var(--white); border-radius:0 var(--radius-control) var(--radius-control) 0; font-size:.9rem; } .composer-vorschau { margin:0 0 1.1rem; } .composer-vorschau pre { margin:0; padding:.85rem 1rem; border:1px solid var(--line); border-radius:11px; background:var(--white); color:var(--ink); font-size:.86rem; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; max-height:22rem; overflow:auto; } .composer-aktionen { display:flex; flex-wrap:wrap; gap:.6rem; margin:0; } .composer-status { margin:.7rem 0 0; min-height:1.3rem; font-size:.88rem; color:var(--muted); } /* Composer, zweiter Teil: Auswahlzustand, bedingte Bloecke und die Abschlussansicht. Das Haekchen ist keine Dekoration. Ein ausgewaehlter Chip unterscheidet sich sonst nur durch Farbe von einem nicht ausgewaehlten, und WCAG 1.4.1 verlangt ein zweites Merkmal -- wer Farben schlecht unterscheidet, sieht seine Auswahl sonst nicht. */ .composer-chips label:has(input:checked) > span::before { content:"✓\00a0"; font-weight:800; } .composer-chips label:has(input:focus-visible) { outline:3px solid var(--petrol); outline-offset:2px; } .composer-block legend .composer-opt { text-transform:none; letter-spacing:0; } /* Eine Folgefrage gehoert sichtbar zu ihrer Ursache, nicht daneben. */ .composer-folge { margin:.9rem 0 0; padding:.2rem 0 .2rem .9rem; border-left:2px solid var(--line-strong); } .composer-folge .composer-frage { margin-top:0; } .composer-adresse { margin:.9rem 0 0; } /* Der Tiefenblock ist sichtbar sekundaer: eine Linie darueber, gedaempfter Knopf, kein eigener Kasten. Er soll auffindbar sein, ohne mit dem Hauptweg zu konkurrieren -- wer ihn nie oeffnet, soll nichts verpassen. */ .composer-tiefe { margin:1.6rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line); } .composer-mehr { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.4rem .2rem; border:0; background:none; cursor:pointer; font:inherit; font-size:.94rem; font-weight:700; color:var(--petrol); } .composer-mehr::before { content:"+"; font-weight:800; } .composer-mehr[aria-expanded="true"]::before { content:"\2212"; } .composer-mehr:focus-visible { outline:3px solid var(--petrol); outline-offset:2px; } .composer-tiefe-hinweis { margin:.1rem 0 0 !important; color:var(--muted); font-size:.86rem; } .composer-tiefe fieldset:first-of-type { margin-top:1.1rem; } .composer-tiefe .composer-block legend { font-size:.92rem; } .composer-strasse { grid-column:1 / -1; } /* Das bevorzugte Kontaktfeld wird hervorgehoben, sobald der Kanal gewaehlt ist -- eine Betonung, keine Pflicht: wer telefonisch erreichbar sein will, soll sehen, wo die Nummer hingehoert. */ .composer-felder p[data-composer-gewuenscht="ja"] label { color:var(--petrol); } .composer-felder p[data-composer-gewuenscht="ja"] input { border-color:var(--petrol); } /* Die Abschlussansicht ersetzt die Eingabe, sie steht nicht darunter: erst waehlen, dann schreiben. Und die Zeile darunter ist kein Beiwerk. `[hidden]` setzt display:none mit der Spezifitaet eines Attributselektors -- jede Klassenregel mit display schlaegt das. Genau so ist es hier passiert: `.composer-review{display:block}` und `.composer-felder{display:grid}` machten den Abschluss und die eingeklappte Anschrift sofort sichtbar, obwohl beide hidden trugen. Zwei Specs haben es gefunden, kein Blick auf den Code. */ .composer [hidden], .composer[hidden] { display:none !important; } .composer-review { display:block; } /* Ein Nachrichtenfenster, kein nachgebauter Mailclient: An, Betreff, Text, senden. Keine Werkzeugleiste, keine winzigen Symbole, kein erfundenes Von-Feld -- welche Absenderadresse spaeter eingesetzt wird, weisz die Website nicht. */ .mail { margin:0 0 1.3rem; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--white); overflow:hidden; } .mail-titel { margin:0; padding:.7rem 1.1rem; border-bottom:1px solid var(--line); background:var(--off); font-size:.82rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .mail-titel:focus-visible { outline:3px solid var(--petrol); outline-offset:-3px; } /* Kopf: An steht fest, Betreff gehoert dem Menschen. Deshalb ist das eine ein Text und das andere ein echtes Eingabefeld -- ein deaktiviertes Feld waere ein toter Formularwert, der nur so aussieht wie einer. */ .mail-kopf { border-bottom:1px solid var(--line); } .mail-zeile { display:grid; grid-template-columns:4.5rem 1fr; gap:.9rem; align-items:center; margin:0 !important; padding:.5rem 1.1rem; } .mail-zeile + .mail-zeile { border-top:1px solid var(--line); } .mail-marke { color:var(--muted); font-size:.92rem; font-weight:650; } .mail-an { font-size:.92rem; font-weight:650; overflow-wrap:anywhere; } .mail-kopf input { min-height:40px; padding:.35rem .6rem; border:1px solid transparent; border-radius:var(--radius-control); background:transparent; color:var(--ink); font:inherit; font-size:.92rem; font-weight:650; } .mail-kopf input:hover { border-color:var(--line-strong); background:var(--white); } .mail-kopf input:focus-visible { outline:3px solid var(--petrol); outline-offset:1px; border-color:var(--petrol); background:var(--white); } /* Der Entwurf selbst: ein Textfeld, kein Vorschaukasten. Monospace waere hier falsch -- es ist ein Brief, keine Konfigurationsdatei. */ .composer .mail textarea { display:block; width:100%; min-height:20rem; padding:1.1rem; border:0; border-radius:0; background:var(--white); color:var(--ink); font:inherit; font-size:.94rem; line-height:1.6; resize:vertical; } .composer .mail textarea:focus-visible { outline:3px solid var(--petrol); outline-offset:-3px; } /* Zwei Klassen, nicht eine: die Kontaktseite fuehrt `.section p` mit max-width:70ch, und das schlaegt eine einklassige Regel. Viermal wurde daraus ein eigener Befund: erst die Eingabefelder, dann dieser Hinweis, dann in echtem Chrome der Kopf des Nachrichtenfensters (645 px) und die An-Zeile (749 px) in einem 1048 px breiten Kasten. Playwright meldete davon nichts -- kein Ueberlauf, kein axe-Verstosz, nur eine Flaeche, die falsch aussieht. Nach dem vierten Mal steht die Ausnahme deshalb einmal fuer die ganze Komponente statt je Element. */ .mail p, .mail dt, .mail dd, .composer p { max-width:none; } .mail .mail-hinweis { margin:0; max-width:none; padding:.75rem 1.1rem; border-top:1px solid var(--line); background:var(--off); color:var(--muted); font-size:.84rem; line-height:1.5; } @media (max-width:30rem) { .composer-aktionen .btn { width:100%; justify-content:center; } } /* Rueckmeldung im Anfrage-Composer (Betreiberwunsch 2026-09-27: "fluessig und belohnend"). Profil "minimal": nur Formzustand, Knopf und Akkordeon -- keine Dauerschleife, keine Scrollchoreografie. Jede Bewegung ist eine Antwort auf eine Eingabe und endet nach hoechstens 0,6 s. Ohne Bewegungswunsch bleibt nur der Zustandswechsel selbst. */ @media (prefers-reduced-motion: no-preference) { .composer-chips label { transition:transform .16s cubic-bezier(.34,1.56,.64,1), background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } .composer-chips label:active { transform:scale(.95); } .composer-chips label:has(input:checked) { animation:composer-chip-an .26s cubic-bezier(.34,1.56,.64,1); box-shadow:0 4px 12px rgba(27,73,101,.18); } .composer .mail.is-aktualisiert textarea { animation:composer-mail-neu .6s ease-out; } #composer-tiefe-inhalt.is-oeffnet { animation:composer-aufklappen .28s cubic-bezier(.16,1,.3,1); } .composer-aktionen .btn-primary.is-bereit { animation:composer-bereit .6s ease-out; } .composer-aktionen .btn { transition:background-color .18s ease, color .18s ease, transform .12s ease; } .composer-aktionen .btn:active { transform:scale(.98); } } @keyframes composer-chip-an { 0% { transform:scale(.95); } 55% { transform:scale(1.04); } 100% { transform:scale(1); } } @keyframes composer-mail-neu { from { background-color:var(--petrol-tint); } to { background-color:var(--white); } } @keyframes composer-aufklappen { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } @keyframes composer-bereit { 0% { box-shadow:0 0 0 0 rgba(27,73,101,.45); } 100% { box-shadow:0 0 0 12px rgba(27,73,101,0); } } .composer-aktionen .btn.is-kopiert { background:var(--green); border-color:var(--green); color:#fff; } /* Ausstiegshinweis (2026-09-28): ruhige Karte unten rechts, auf dem Telefon eine Leiste ueber die volle Breite. Ohne Bewegungswunsch erscheint sie ohne Gleiten. */ .ausstieg { position:fixed; right:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px); z-index:280; width:min(420px, calc(100vw - 24px)); padding:18px 18px 16px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:0 18px 44px rgba(13,27,36,.16); display:grid; gap:8px; opacity:0; transform:translateY(16px); } .ausstieg[hidden] { display:none; } .ausstieg.is-da { opacity:1; transform:none; } @media (prefers-reduced-motion: no-preference) { .ausstieg { transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1); } } .ausstieg-titel { margin:0; padding-right:40px; font-weight:700; color:var(--ink); line-height:1.3; } .ausstieg-text { margin:0; font-size:.9rem; color:var(--body); line-height:1.45; } .ausstieg-wege { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; } .ausstieg-zu { position:absolute; top:6px; right:6px; width:40px; height:40px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:1.4rem; line-height:1; cursor:pointer; } .ausstieg-zu:hover { background:var(--off); color:var(--ink); } @media (pointer:coarse) { .ausstieg-zu { width:44px; height:44px; } .ausstieg-wege .btn { min-height:44px; } } @media (max-width:600px) { .ausstieg { right:0; bottom:0; left:0; width:auto; border-radius:14px 14px 0 0; border-bottom:0; padding-bottom:calc(16px + env(safe-area-inset-bottom)); } .ausstieg-text { display:none; } } /* Echte Produktaufnahmen (seit 2026-09-28, website/MEDIA_MANIFEST.json). Betreiberwunsch: schlicht zeigen, nicht verschoenern -- kein Geraeterahmen, keine Perspektive, kein Glanz. Eine Linie, ein leichter Schatten, darunter in Worten, was es ist. */ .aufnahme { margin:var(--s5) 0 0; } .aufnahme picture { display:block; overflow:hidden; border:1px solid var(--line-strong); border-radius:10px; background:#fff; box-shadow:0 12px 32px -18px rgba(15,23,42,.28); } .aufnahme img { display:block; width:100%; height:auto; } .aufnahme figcaption { margin-top:var(--s3); max-width:62ch; color:var(--muted); font-size:var(--fs-0); } .aufnahme--hero { margin-top:clamp(28px,4vw,48px); } /* Blauer Haken (website/PRUEFHAKEN.json): Gestalt steht inline im Markup (scripts/ops/pruefhaken.py); hier nur, was eine Klasse braucht. */ .kuk-haken { flex: none; } @media (forced-colors: active) { .kuk-haken { forced-color-adjust: none; } } /* Ziele fuer Maus und Finger (seit 2026-10-02, Betreiberauftrag: am Desktop mit Mausklicks arbeiten, am Telefon mit dem Finger). Gemessen auf elf Seiten der Produktion bei 390 px mit Touch und 1440 px mit Maus: Finger Fusslinks 34-36 px, Logo 36, Brotkrumen 32, Abschnittsnavigation 40, Inhaltsverzeichnis 24, Sprungmarken 33, Linklisten 18-20, "Link kopieren" 20x16 -- unsichtbar, aber antippbar Maus Linklisten und Antwortwege 18-20 px hoch Gewaehlt wird nach Zeigerart, nicht nach Breite (webtool-quality-contract: Zeigerfaehigkeit statt Geraeteannahme). Jede Regel vergroessert nur die Trefferflaeche; Schrift, Abstaende im Text und Layout bleiben, wie sie sind. */ @media (pointer: fine) { .f-links a, .know-list a, .faq-weg a, .art-list li a { display:inline-block; padding-block:3px; } .toc a { padding-block:2px; } .copy-anchor { padding:6px 8px; } } @media (pointer: coarse) { .site-header .brand, .breadcrumb a, .page-nav a, .art-sum-jump a, .art-next-link, .home-link, .site-footer li > a, .footer-legal a, .footer-legal-btn, .f-links a, .know-list a, .faq-weg a, .art-list li a, .note > a { display:inline-flex; align-items:center; min-height:44px; } .toc a { min-height:44px; align-items:center; } /* Dieselben Ziele wie die Regel "Ein Link allein in seiner Zeile" weiter oben, mit gleicher Spezifitaet -- sie stehen spaeter und gewinnen nur hier. */ p.note > a:only-child, .fit-link > a, dd > a:only-child, .extra-list > article > a:last-child { min-height:44px; } .footer-actions > a { display:inline-flex; align-items:center; min-height:44px; } /* Aufklapper behalten ihr Dreieck (display:list-item); sie wachsen ueber den Innenabstand. */ .flow-warum > summary { padding-block:8px; } .art-rechtsgrundlagen > summary { padding-block:10px; } .composer-chips label { min-width:44px; justify-content:center; } /* Der Kopierknopf neben Zwischenueberschriften erscheint nur beim Ueberfahren mit der Maus. Am Touchgeraet bliebe er unsichtbar und doch antippbar -- ein 20 x 16 px grosses Ziel direkt neben der Ueberschrift. Dort teilt ohnehin das Teilen-Menue des Browsers. */ .copy-anchor { display:none; } } /* Navigation: drei Informationsoberflaechen, eine ruhige visuelle Grammatik. */ .nav-panel { --nav-surface:#f3f7f9; --nav-raise:#fff; --nav-hover:#e7f0f5; --nav-border:#dce6ec; background:var(--nav-raise); box-shadow:0 16px 32px rgba(13,27,36,.12); } html[data-theme="dark"] .nav-panel { --nav-surface:#20343f; --nav-raise:#192b36; --nav-hover:#2b4554; --nav-border:#36515f; } .nav-panel-inner { padding:26px 0 28px; gap:28px; } .nav-icon { display:block; width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; } .nav-panel a { text-decoration:none; } .nav-gruppe>summary { border-radius:8px; transition:background-color .15s ease,color .15s ease; } .nav-gruppe>summary:hover { background:var(--petrol-tint); } .nav-panel-inner ul { list-style:none; margin:0; padding:0; } .nav-product { grid-template-columns:minmax(0,1.1fr) minmax(0,2fr); } .nav-product-lead { border:1px solid var(--nav-border); border-radius:16px; background:var(--nav-surface); padding:24px; } .nav-product-lead strong { font-size:1.4rem; letter-spacing:-.03em; } .nav-product-lead p { font-size:.9rem; line-height:1.5; } .nav-modules { display:flex; align-items:center; gap:7px; padding:22px 0; color:var(--petrol); } .nav-modules>span { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--nav-border); border-radius:10px; background:var(--nav-raise); } .nav-modules>span:nth-child(even) { translate:0 5px; } .nav-product-paths { grid-template-columns:1fr 1fr; gap:26px; } .nav-product-paths>section { padding:18px 0 6px; } .nav-path-note { color:var(--muted); font-size:.86rem; margin:8px 0 16px; } .nav-product-paths a { padding:9px 16px 9px 36px; margin:0; font-size:.93rem; } .nav-product-paths a>.nav-icon { position:absolute; left:5px; top:11px; width:20px; height:20px; color:var(--petrol); } .nav-product-paths .nav-decision { border-left:1px solid var(--nav-border); padding-left:22px; } .nav-decision a { padding-left:8px; } .nav-decision .nav-next { margin-top:16px; padding:12px; border-radius:10px; background:var(--nav-surface); color:var(--petrol); } .nav-decision .nav-next::after { content:none; } .nav-functions { grid-template-columns:minmax(0,.72fr) minmax(0,2fr); } .nav-functions .nav-summe { border:0; justify-content:center; padding:16px 28px 16px 0; } .nav-functions .nav-summe strong { font-size:1.6rem; letter-spacing:-.035em; } .nav-functions .nav-summe a { margin-top:14px; } .nav-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; } .nav-feature-grid .nav-feature { display:flex; align-items:flex-start; gap:14px; margin:0; padding:17px 26px 17px 14px; border-radius:12px; min-height:94px; background:var(--nav-surface); font-size:.96rem; } .nav-feature-grid .nav-icon { padding:10px; box-sizing:content-box; border:1px solid var(--nav-border); border-radius:12px; background:var(--nav-raise); color:var(--petrol); } .nav-feature-grid a b { font-size:.82rem; font-weight:450; margin-top:4px; } .nav-feature-grid a::after { top:17px; } .nav-feature-grid a:hover { background:var(--nav-hover); } .nav-feature-grid a:hover .nav-icon { background:var(--petrol-tint); } .nav-tools { grid-template-columns:minmax(0,.7fr) minmax(0,2fr); gap:32px; } .nav-tools-intro { align-self:start; border:0; background:var(--nav-surface); padding:24px; border-radius:16px; } .nav-tools-intro strong { font-size:1.45rem; line-height:1.25; letter-spacing:-.035em; } .nav-tools-intro>p { display:none; } .nav-tools-intro>a { display:block; margin-top:auto; padding:22px 0 0; } .nav-tools-intro>small { color:var(--muted); font-size:.78rem; } .nav-tools-question { display:none; } .nav-tools-body { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; } .nav-tool-search>label { display:block; color:var(--ink); font-size:1rem; font-weight:650; margin-bottom:8px; } .nav-tool-search>div { display:flex; align-items:center; gap:10px; border:1px solid var(--nav-border); border-radius:12px; padding:5px 5px 5px 14px; background:var(--nav-surface); } .nav-tool-search input { min-width:0; width:100%; border:0; padding:10px 0; color:var(--ink); background:transparent; font:inherit; font-size:.95rem; } .nav-tool-search input::placeholder { color:var(--muted); opacity:1; } .nav-tool-search button { border:1px solid var(--nav-border); border-radius:8px; min-height:42px; padding:0 12px; font:inherit; font-size:.85rem; color:var(--ink); background:var(--nav-raise); white-space:nowrap; } .nav-tool-search input:focus-visible,.nav-tool-search button:focus-visible { outline:3px solid var(--petrol-mid); outline-offset:2px; } .nav-tool-search>div:focus-within { border-color:var(--petrol); } .nav-search-status { margin:6px 0 0; font-size:.8rem; color:var(--muted); } .nav-search-status:empty { display:none; } .nav-tool-results:not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:10px 0 0; } .nav-tool-results a { margin:0; padding:10px 14px; background:var(--nav-surface); border-radius:8px; } .nav-tool-results strong { display:block; font-size:.9rem; } .nav-tool-results small { display:block; color:var(--muted); font-size:.78rem; font-weight:450; } .nav-tools .nav-quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .nav-quick-grid a { display:flex; align-items:flex-start; gap:10px; height:100%; min-height:96px; margin:0; padding:16px 18px 16px 12px; border:1px solid var(--nav-border); border-radius:12px; font-size:.94rem; background:var(--nav-raise); } .nav-quick-grid .nav-icon { color:var(--petrol); width:22px; height:22px; margin:1px 0 0; } .nav-quick-grid a b { margin-top:4px; font-size:.78rem; font-weight:450; } .nav-quick-grid a::after { right:7px; top:7px; font-size:.75rem; } .nav-quick-grid a:hover { background:var(--nav-hover); } .nav-tools .nav-continue { padding:14px 16px; background:var(--nav-surface); border-radius:12px; } .nav-continue [hidden] { display:none; } .nav-continue h3 { margin:0 0 6px; } .nav-continue p { margin:0; color:var(--muted); font-size:.79rem; } .nav-continue a { margin:0; padding:6px 0; font-size:.86rem; } .nav-popular ul { display:flex; flex-wrap:wrap; gap:4px 24px; } .nav-continue a::after { content:none; } .nav-tools .nav-aufgaben { padding-top:2px; } .nav-aufgaben ul { display:flex; flex-wrap:wrap; gap:3px 18px; } .nav-aufgaben a { margin:0; padding:4px 0; font-size:.78rem; font-weight:500; color:var(--muted); } .nav-aufgaben a::after { content:none; } html[data-theme="dark"] .nav-feature-grid a:hover,html[data-theme="dark"] .nav-quick-grid a:hover { background:var(--nav-hover); } @media (min-width:1200px) { .nav-gruppe[open] .nav-panel-inner { animation:nav-appear .13s ease-out both; } .site-nav { column-gap:clamp(12px,1.3vw,22px); } } @keyframes nav-appear { from {opacity:0;translate:0 -5px;} to {opacity:1;translate:0 0;} } @media (max-width:1199px) { .nav-panel { background:transparent; padding:10px 0 12px; box-shadow:none; } .nav-panel-inner { display:block; padding:0; } .nav-product-lead { padding:0; background:transparent; border:0; } .nav-modules,.nav-path-note { display:none; } .nav-product-paths { display:block; } .nav-product-paths>section,.nav-product-paths .nav-decision { padding:0; border:0; } .nav-product-paths a { padding:12px 12px 12px 36px; font-size:.95rem; } .nav-product-paths a>.nav-icon { top:12px; } .nav-decision a { padding:12px 8px; } .nav-decision .nav-next { margin:8px 0 0; padding:12px; } .nav-functions .nav-summe { padding:0 0 6px; } .nav-functions .nav-summe a { margin:0; padding:12px 8px; } .nav-feature-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; } .nav-feature-grid .nav-feature { align-items:center; min-height:44px; padding:9px 8px; border:0; background:transparent; gap:12px; font-size:.95rem; } .nav-feature-grid .nav-icon { width:20px; height:20px; padding:3px; border:0; background:transparent; } .nav-tools { display:flex; flex-direction:column; gap:10px; } .nav-tools-body { display:contents; } .nav-tool-search,.nav-popular { display:none; } .nav-tools .nav-continue { order:-1; padding:10px 12px; } .nav-tools .nav-continue:not(:has([data-nav-recent]:not([hidden]))) { display:none; } .nav-tools .nav-continue h3 { display:block; } .nav-tools .nav-continue a { min-height:44px; display:flex; align-items:center; padding:8px 0; } .nav-tools .nav-direkt { order:0; } .nav-tools .nav-direkt>h3 { display:none; } .nav-tools .nav-tools-question { display:block; margin:0 0 10px; font-size:.95rem; color:var(--ink); font-weight:650; } .nav-tools .nav-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .nav-tools .nav-quick-grid a { min-height:56px; padding:12px 10px; align-items:center; font-size:.93rem; background:var(--nav-surface); } .nav-quick-grid .nav-icon { margin:0; } .nav-tools-intro { order:1; padding:0; background:transparent; border:0; } .nav-tools-intro>a { margin:0; padding:12px 8px; } .nav-tools-intro>small { display:none; } } @media (prefers-reduced-motion:reduce) { .nav-gruppe[open] .nav-panel-inner { animation:none; } .nav-gruppe>summary,.nav-spalten a::after { transition:none; } } /* Adaptive Hilfsflaechen: lokale Daten vor dem Oeffnen, feste Groessen, keine automatische Rotation. Die sechs Hauptpunkte und Funktionen bleiben. */ .nav-product-context { margin-top:20px; padding-top:16px; border-top:1px solid var(--nav-border); } .nav-product-context h3 { margin:0 0 7px; font-size:.68rem; letter-spacing:.1em; } .nav-product-context p { font-size:.83rem; margin:0 0 7px; } .nav-product-context a { display:flex; align-items:center; padding:8px 0; margin:0; font-size:.82rem; min-height:36px; } .nav-product-context>div { display:flex; flex-direction:column; } .nav-feature-context { min-height:20px; margin:10px 0 0; color:var(--petrol); font-size:.8rem; font-weight:600; } .nav-feature-grid a.is-context { box-shadow:inset 0 0 0 1.5px var(--petrol); background:var(--nav-hover); } .nav-tools .nav-direkt>h3 { font-size:.68rem; margin:0 0 9px; letter-spacing:.1em; } .nav-selection-reason { font-size:.7rem; font-weight:450; letter-spacing:0; text-transform:none; color:var(--muted); margin-left:9px; } .nav-quick-grid a>span:not(.sr-only) { min-width:0; } .nav-quick-grid a strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:.9rem; line-height:1.3; font-weight:650; } .nav-quick-grid a b { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.35; } .nav-tools .nav-quick-grid a { height:110px; min-height:110px; } .nav-tools .nav-continue { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; } .nav-tools .nav-continue:has([data-nav-recent]:not([hidden])) { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); } .nav-tools .nav-continue:not(:has([data-nav-recent]:not([hidden]),[data-nav-popular]:not([hidden]))) { display:none; } .nav-continue a { display:flex; align-items:flex-start; gap:9px; min-height:64px; } .nav-continue a>.nav-icon { width:20px; height:20px; color:var(--petrol); margin-top:2px; } .nav-continue a strong { font-size:.83rem; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .nav-continue a small { display:block; margin-top:5px; color:var(--muted); font-size:.7rem; line-height:1.3; } .nav-popular ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px 16px; } .nav-discovery { border-top:1px solid var(--nav-border); padding-top:18px; margin-top:24px; } .nav-discovery-head { display:flex; align-items:center; justify-content:space-between; gap:8px; } .nav-discovery-head h3 { margin:0; font-size:.68rem; letter-spacing:.11em; } .nav-discovery-head>div { display:flex; gap:5px; } .nav-discovery button { width:44px; height:44px; border:1px solid var(--nav-border); border-radius:10px; color:var(--ink); background:var(--nav-raise); font:inherit; font-size:1rem; cursor:pointer; } .nav-discovery button:hover,.nav-discovery button:active { background:var(--nav-hover); } .nav-discovery button:disabled { opacity:.5; cursor:default; } .nav-discovery button:focus-visible { outline:3px solid var(--petrol-mid); outline-offset:2px; } .nav-tools-intro .nav-discovery-card { display:flex; flex-direction:column; gap:12px; min-height:218px; height:218px; margin:12px 0 0; padding:0; color:var(--ink); } .nav-discovery-card>.nav-icon { width:28px; height:28px; box-sizing:content-box; padding:10px; background:var(--nav-raise); border:1px solid var(--nav-border); border-radius:12px; color:var(--petrol); } .nav-discovery-card>span:not(.sr-only) { display:flex; flex-direction:column; width:100%; } .nav-tools-intro .nav-discovery-card strong { font-size:1.05rem; line-height:1.3; min-height:2.6em; letter-spacing:-.02em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .nav-tools-intro .nav-discovery-card small { font-size:.8rem; line-height:1.4; min-height:2.8em; max-height:2.8em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:var(--muted); margin-top:6px; } .nav-discovery-card em { font-size:.8rem; font-style:normal; color:var(--petrol); margin-top:14px; font-weight:650; } .nav-tools-intro .nav-discovery-reason { display:block !important; margin:5px 0 0; min-height:2.7em; font-size:.7rem; line-height:1.35; color:var(--muted); } @media (max-width:1199px) { .nav-product-context,.nav-feature-context,.nav-discovery,.nav-tools .nav-direkt>h3 { display:none; } .nav-tools .nav-quick-grid a { height:60px; min-height:60px; } .nav-quick-grid a strong { font-size:.9rem; } .nav-tools .nav-quick-grid a b { display:none; } .nav-tools .nav-continue:has([data-nav-recent]:not([hidden])) { display:block; } .nav-tools .nav-continue:not(:has([data-nav-recent]:not([hidden]))) { display:none; } .nav-tools .nav-popular { display:none; } .nav-continue a { min-height:44px; padding:7px 0; } .nav-continue a small { font-size:.72rem; margin-top:3px; } } /* Webtools als kompakter Launcher: bestehende Katalogmarken und echte Aufnahmen. */ .nav-tools.nav-launcher { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:12px 0; } .nav-launcher .nav-tools-head { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.35fr) auto; align-items:center; gap:24px; } .nav-launcher .nav-tools-intro { display:contents; } .nav-launcher .nav-tools-intro>div { grid-column:1; grid-row:1; } .nav-launcher .nav-tools-intro b { display:block; color:var(--muted); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:3px; } .nav-launcher .nav-tools-intro strong { display:block; font-size:1rem; line-height:1.25; letter-spacing:-.025em; max-width:100%; } .nav-launcher .nav-tools-all { grid-column:3; grid-row:1; padding:5px 0; margin:0; font-size:.85rem; white-space:nowrap; color:var(--petrol); } .nav-launcher .nav-tools-all small { display:block; font-size:.65rem; font-weight:450; margin-top:4px; color:var(--muted); } .nav-launcher .nav-tool-search { grid-column:2; grid-row:1; position:relative; } .nav-launcher .nav-tool-search>div { border-radius:10px; padding:2px 3px 2px 11px; gap:8px; } .nav-launcher .nav-tool-search input { font-size:.8rem; padding:10px 0; } .nav-launcher .nav-tool-search button { width:38px; min-height:38px; padding:6px; display:grid; place-items:center; border:0; background:transparent; } .nav-launcher .nav-tool-search button .nav-icon { width:18px; height:18px; } .nav-launcher .nav-search-status:not(:empty) { position:absolute; top:100%; left:0; right:0; z-index:2; padding:8px 10px; background:var(--nav-raise); border:1px solid var(--nav-border); border-radius:8px; margin:5px 0 0; } .nav-launcher .nav-tool-results:not([hidden]) { position:absolute; z-index:3; top:calc(100% + 38px); left:0; right:0; display:grid; grid-template-columns:minmax(0,1fr); padding:6px; border:1px solid var(--nav-border); border-radius:10px; background:var(--nav-raise); box-shadow:0 12px 26px rgba(13,27,36,.14); max-height:340px; overflow-y:auto; } .nav-launcher .nav-tool-results a { display:flex; gap:10px; align-items:center; padding:8px; background:transparent; } .nav-launcher .nav-tool-results a:hover { background:var(--nav-hover); } .nav-launcher-main { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:26px; align-items:start; } .nav-launcher .nav-tools-body { display:flex; flex-direction:column; gap:4px; min-width:0; } .nav-app-icon { container-type:size; display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:9px; color:#fff; background:var(--tile-light); box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 3px rgba(13,27,36,.12); } .nav-app-icon svg { display:block; width:80%; height:80%; overflow:visible; } .nav-app-icon svg :is(path,circle,rect,line,polyline,polygon,ellipse):not(.duo) { stroke:currentColor; vector-effect:non-scaling-stroke; stroke-width:1.8px; } .nav-app-icon .duo { fill:rgba(255,255,255,.26); stroke:none; } html[data-theme="dark"] .nav-app-icon { background:var(--tile-dark); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); } .nav-preview { min-width:0; display:flex; flex-direction:column; gap:9px; } .nav-preview-meta { display:flex; align-items:center; gap:11px; height:58px; min-height:58px; } .nav-preview-meta>div { min-width:0; } .nav-preview-meta .nav-app-icon { width:44px; height:44px; border-radius:12px; } .nav-preview-meta .nav-app-icon svg :is(path,circle,rect,line,polyline,polygon,ellipse):not(.duo) { stroke-width:2px; } .nav-preview-meta h3 { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:0 0 4px; font-size:1.05rem; letter-spacing:-.025em; line-height:1.2; } .nav-preview-meta p { font-size:.76rem; line-height:1.35; margin:0; color:var(--muted); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .nav-preview-media { position:relative; aspect-ratio:2.9; overflow:hidden; border:1px solid var(--nav-border); border-radius:10px; background:var(--nav-surface); } .nav-preview-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .nav-preview-media img:not([src]) { display:none; } .nav-preview-media>span { position:absolute; inset:0; display:grid; place-items:center; font-size:.76rem; color:var(--muted); } .nav-preview-media>span[hidden] { display:none; } .nav-preview-media img.is-changing { animation:nav-preview-change .12s ease-out; } @keyframes nav-preview-change { from {opacity:.35;translate:0 2px;} to {opacity:1;translate:0 0;} } .nav-preview-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:32px; } .nav-preview-foot>small { font-size:.63rem; color:var(--muted); } .nav-preview-foot>a { font-size:.79rem; margin:0; padding:8px 0; color:var(--petrol); } .nav-launcher .nav-continue { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:0; border-radius:0; background:transparent; } .nav-launcher .nav-continue:has([data-nav-recent]:not([hidden])) { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); } .nav-launcher .nav-continue:not(:has([data-nav-recent]:not([hidden]),[data-nav-popular]:not([hidden]))) { display:none; } .nav-launcher .nav-continue h3 { margin:0 0 3px; font-size:.62rem; line-height:1.2; letter-spacing:.07em; } .nav-launcher .nav-continue a { min-height:34px; gap:8px; padding:3px 4px; border-radius:7px; align-items:center; } .nav-launcher .nav-continue a .nav-app-icon { width:28px; height:28px; border-radius:8px; } .nav-launcher .nav-continue a>span:not(.nav-app-icon):not(.sr-only) { min-width:0; } .nav-launcher .nav-continue a strong { font-size:.74rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav-launcher .nav-continue a small { margin-top:3px; font-size:.63rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav-launcher .nav-popular ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; } .nav-launcher .nav-direkt>h3 { font-size:.63rem; margin:0 0 6px; letter-spacing:.07em; } .nav-launcher .nav-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 10px; } .nav-launcher .nav-quick-grid a { height:54px; min-height:54px; padding:7px 20px 7px 7px; gap:9px; border:1px solid transparent; border-radius:9px; background:transparent; align-items:center; } .nav-launcher .nav-quick-grid a strong { font-size:.81rem; line-height:1.2; -webkit-line-clamp:1; } .nav-launcher .nav-quick-grid a b { font-size:.67rem; line-height:1.25; margin-top:4px; -webkit-line-clamp:1; color:var(--muted); } .nav-launcher .nav-quick-grid a::after { top:18px; right:6px; color:var(--muted); } .nav-launcher .nav-quick-grid a:hover,.nav-launcher .nav-continue a:hover { background:var(--nav-hover); } .nav-launcher a.is-preview { border-color:var(--nav-border); background:var(--nav-surface); } .nav-launcher .nav-discovery { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; align-items:center; padding:7px 0 0; margin:0; border-top:1px solid var(--nav-border); } .nav-launcher .nav-discovery-head { display:contents; } .nav-launcher .nav-discovery-head h3 { grid-column:1; grid-row:1; font-size:.6rem; line-height:1.2; margin:0 0 3px; } .nav-launcher .nav-discovery-head>div { grid-column:2; grid-row:1 / span 2; align-items:center; } .nav-launcher [data-nav-discovery-count] { min-width:32px; font-size:.63rem; text-align:center; color:var(--muted); } .nav-launcher .nav-discovery button { width:44px; height:44px; border-radius:9px; } .nav-launcher .nav-discovery-card { grid-column:1; grid-row:2; display:flex; flex-direction:row; align-items:center; gap:9px; padding:2px 0; margin:0; height:40px; min-height:40px; } .nav-launcher .nav-discovery-card .nav-app-icon { width:30px; height:30px; border-radius:8px; } .nav-launcher .nav-discovery-card>span:not(.sr-only):not(.nav-app-icon) { width:auto; min-width:0; display:block; } .nav-launcher .nav-discovery-card strong { display:block; font-size:.79rem; line-height:1.2; min-height:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav-launcher .nav-discovery-card small { display:block; margin-top:3px; font-size:.64rem; line-height:1.2; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav-launcher .nav-discovery-card em { display:none; } .nav-launcher .nav-aufgaben { border-top:1px solid var(--nav-border); padding-top:10px; } .nav-launcher .nav-aufgaben ul { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px 8px; } .nav-launcher .nav-aufgaben a { display:block; font-size:.7rem; font-weight:550; color:var(--ink); border:1px solid var(--nav-border); border-radius:7px; padding:5px 9px; line-height:1.25; margin:0; background:transparent; } .nav-launcher .nav-aufgaben a:hover { color:var(--petrol); background:var(--nav-hover); } @media (min-width:1200px) and (max-height:799px) and (min-height:760px) { .nav-tools.nav-launcher { padding-block:12px; gap:10px; } .nav-preview-media { aspect-ratio:3.1; } .nav-launcher .nav-quick-grid a { height:52px; min-height:52px; } .nav-launcher .nav-tools-body { gap:4px; } } /* Ein flacher Desktop behaelt Suche, App-Ziele und Kategorien, aber laedt keine Bilder. Die gesamte Auswahl passt in zwei Zeilen statt drei. */ @media (min-width:1200px) and (max-height:759px) { .nav-launcher .nav-preview { display:none; } .nav-launcher-main { grid-template-columns:minmax(0,1fr); } .nav-launcher .nav-quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .nav-launcher .nav-quick-grid a { height:52px; min-height:52px; } .nav-launcher .nav-tools-body { gap:8px; } } /* Current ist dauerhaft, auch ohne JS, Hover und Kontextempfehlung. Die exakte Seite kommt ausschliesslich aus sync_www_shell.standort(). */ .site-nav .nav-panel a[aria-current="page"] { color:var(--petrol); background:var(--nav-hover); font-weight:700; box-shadow:inset 3px 0 var(--petrol); } .site-nav .nav-panel a[aria-current="page"]::before { content:none; } @media (max-width:1199px) { .nav-tools.nav-launcher { display:flex; flex-direction:column; gap:10px; padding:0; } .nav-launcher-main,.nav-launcher .nav-tools-body { display:contents; } .nav-launcher .nav-tools-head { display:block; order:4; } .nav-launcher .nav-tools-intro>div,.nav-launcher .nav-tools-all small,.nav-launcher .nav-preview,.nav-launcher .nav-tool-search,.nav-launcher .nav-popular,.nav-launcher .nav-aufgaben { display:none; } .nav-launcher .nav-tools-all { display:block; margin:0; padding:12px 8px; font-size:.9rem; } .nav-launcher .nav-continue { order:0; display:block; padding:8px; } .nav-launcher .nav-continue:has([data-nav-recent]:not([hidden])) { display:block; } .nav-launcher .nav-continue:not(:has([data-nav-recent]:not([hidden]))) { display:none; } .nav-launcher .nav-continue a { min-height:44px; } .nav-launcher .nav-direkt { order:1; } .nav-launcher .nav-direkt>h3 { display:none; } .nav-launcher .nav-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .nav-launcher .nav-quick-grid a { height:60px; min-height:60px; padding:8px 5px; border-color:var(--nav-border); } .nav-launcher .nav-quick-grid a strong { font-size:.84rem; -webkit-line-clamp:2; } .nav-launcher .nav-quick-grid a b { display:none; } .nav-launcher .nav-app-icon { width:30px; height:30px; border-radius:8px; } .nav-launcher .nav-discovery { display:grid; order:2; margin-top:4px; grid-template-columns:minmax(0,1fr) auto; gap:0 6px; } .nav-launcher .nav-discovery-head h3 { display:block; } .nav-launcher .nav-discovery-card { min-height:44px; height:44px; } .nav-launcher .nav-discovery-card strong { font-size:.8rem; } .nav-launcher .nav-discovery-card small { display:none; } .nav-launcher [data-nav-discovery-count] { min-width:24px; } } @media (prefers-reduced-motion:reduce) { .nav-preview-media img.is-changing { animation:none; } } /* Product Spotlight — Betreiberfreigabe 2026-10-09, nur der freigegebene Startseiten-Hero. */ html body.home-page .story-hero[data-hero-spotlight] { position:relative; isolation:isolate; background:var(--white); padding-block:68px 72px; } html body.home-page .story-hero[data-hero-spotlight] .hd-buehne::before { content:none; } html body.home-page .story-hero[data-hero-spotlight] .story-hero-grid { grid-template-columns:minmax(0,.82fr) minmax(600px,1.18fr); gap:clamp(48px,5vw,80px); } html body.home-page .story-hero[data-hero-spotlight] .story-hero-copy h1 { max-width:18ch; font-size:clamp(2.35rem,3.45vw,3.55rem); line-height:1.09; font-weight:650; letter-spacing:-.025em; color:var(--ink); margin:0 0 26px; animation:none; background:none; -webkit-text-fill-color:currentColor; text-wrap:balance; } html body.home-page .story-hero[data-hero-spotlight] .story-kicker { color:var(--ink-soft); font-size:.8125rem; letter-spacing:.09em; line-height:1.5; margin-bottom:22px; } html body.home-page .story-hero[data-hero-spotlight] .story-lead { max-width:43ch; font-size:clamp(1.04rem,1.34vw,1.18rem); line-height:1.65; margin:0; } html body.home-page .story-hero[data-hero-spotlight] .story-actions { gap:14px 22px; margin-top:30px; } html body.home-page .story-hero[data-hero-spotlight] .story-text-link { min-height:44px; } html body.home-page .story-hero[data-hero-spotlight] .story-note { max-width:48ch; margin-top:18px; line-height:1.6; font-size:.8125rem; } html body.home-page .story-hero[data-hero-spotlight] .hd-frame { box-shadow:0 16px 36px -20px rgba(13,34,51,.28),0 0 0 1px var(--line-strong); } @media(max-width:1100px){ html body.home-page .story-hero[data-hero-spotlight] { padding-block:42px 56px; } html body.home-page .story-hero[data-hero-spotlight] .story-hero-grid { grid-template-columns:1fr; gap:40px; } html body.home-page .story-hero[data-hero-spotlight] .story-hero-copy { max-width:720px; } html body.home-page .story-hero[data-hero-spotlight] .story-hero-copy h1 { max-width:23ch; font-size:clamp(2.2rem,4.8vw,3.2rem); } html body.home-page .story-hero[data-hero-spotlight] .story-lead { max-width:58ch; } } @media(max-width:600px){ html body.home-page .story-hero[data-hero-spotlight] { padding-block:34px 44px; } html body.home-page .story-hero[data-hero-spotlight] .story-hero-grid { gap:32px; } html body.home-page .story-hero[data-hero-spotlight] .story-hero-copy h1 { font-size:clamp(1.95rem,7.8vw,2.7rem); line-height:1.12; max-width:20ch; margin-bottom:20px; } html body.home-page .story-hero[data-hero-spotlight] .story-kicker { font-size:.8125rem; letter-spacing:.055em; margin-bottom:18px; } html body.home-page .story-hero[data-hero-spotlight] .story-actions { margin-top:24px; gap:8px; } html body.home-page .story-hero[data-hero-spotlight] .story-note { margin-top:12px; } } @media(forced-colors:active){ html body.home-page .story-hero[data-hero-spotlight] { background:Canvas!important; } html body.home-page .story-hero[data-hero-spotlight] .hd-buehne::after { display:none!important; } } /* Product Spotlight: eine einzige unbewegte Lichtzone hinter dem Produkt. */ html body.home-page .story-hero[data-hero-spotlight] { background:radial-gradient(ellipse 46% 68% at 84% 42%,color-mix(in srgb,var(--petrol-soft) 42%,transparent),transparent 90%),var(--white); } html[data-theme="dark"] body.home-page .story-hero[data-hero-spotlight] { background:radial-gradient(ellipse 46% 68% at 84% 42%,color-mix(in srgb,var(--petrol-mid) 33%,transparent),transparent 90%),var(--white); } html body.home-page .story-hero[data-hero-spotlight] .hd-frame { box-shadow:0 28px 58px -28px rgba(13,34,51,.44),0 0 0 1px var(--line-strong); } @media(max-width:1100px){ html body.home-page .story-hero[data-hero-spotlight] { background:radial-gradient(ellipse 75% 42% at 65% 70%,color-mix(in srgb,var(--petrol-soft) 25%,transparent),transparent),var(--white); } } @media(max-width:600px){ html body.home-page .story-hero[data-hero-spotlight],html[data-theme="dark"] body.home-page .story-hero[data-hero-spotlight] { background:var(--white); } } /* Die Vorschau-Steuerung steht ausserhalb der illustrierten Anwendung. */ .story-hero[data-hero-spotlight] .demo-actions { display:flex; justify-content:flex-end; padding-top:8px; } .story-hero[data-hero-spotlight] .demo-control { position:static; width:44px; height:44px; margin:0; border-color:var(--line); background:var(--paper); color:var(--ink-soft); font:inherit; font-size:16px; touch-action:manipulation; } .story-hero[data-hero-spotlight] .demo-control:focus-visible { outline:2px solid var(--petrol); outline-offset:2px; } .story-hero[data-hero-spotlight] .demo-control:disabled { cursor:default; color:var(--dim-text); } .story-hero[data-hero-spotlight] .hd-topbar { grid-template-columns:1fr auto; } @media(forced-colors:active) { .story-hero[data-hero-spotlight] .demo-control { border:1px solid ButtonText; color:ButtonText; background:ButtonFace; } .story-hero[data-hero-spotlight] .demo-control:disabled { color:GrayText; } }