/* ========================================================================== HAHNE DIGITAL – Stylesheet Art Direction: „Technische Zeichnung / Betriebssystem“ Keine externen Schriftarten, keine CDNs, keine Tracker (DSGVO-freundlich) -------------------------------------------------------------------------- AUFBAU 01 Design-System (Tokens) 12 Prozess 02 Reset / Base 13 Pakete 03 Typografie 14 Projekt-Check 04 Layout & Raster 15 Kontakt 05 Navigation 16 Footer 06 Buttons & Links 17 Modulseite 07 Hero 18 Demoseite / Anleitung / Rechtstexte 08 Systemzeichnung 19 Overlays 09 Sektionsköpfe 20 Motion 10 Leistungen 21 Responsive 11 Modulkonsole 22 Accessibility / Reduced Motion / Print -------------------------------------------------------------------------- REGELN DES SYSTEMS · Eine Akzentfamilie (Petrol) trägt alles Interaktive und Technische. Ein warmer Sandton markiert ausschließlich Beträge und Kennzahlen. · Flächen kommen aus vier Stufen (paper → surface-3). Kein Glas außer in der Navigationsleiste, keine Schatten außer den drei definierten. · Jede Schriftgröße kommt aus der Skala in 01 – keine freien clamp() in Komponenten. · Bewegung heißt: gezeichnet, gemessen, freigelegt – nie eingeblendet. ========================================================================== */ /* ========================================================================== 01 DESIGN-SYSTEM (TOKENS) ========================================================================== */ /* --- Schrift: Inter Variable, lokal gehostet (SIL Open Font License 1.1, Lizenztext unter assets/fonts/). Kein Abruf von fremden Servern. Der metrisch angepasste Ersatz („Inter Fallback“) verhindert Layoutsprünge, solange die Datei noch lädt. ------------------------------------------- */ @font-face{ font-family:"Inter Variable"; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/inter-latin-wght.woff2") format("woff2-variations"), url("fonts/inter-latin-wght.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Inter Variable"; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/inter-latin-ext-wght.woff2") format("woff2-variations"), url("fonts/inter-latin-ext-wght.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Inter Fallback"; src:local("Arial"),local("Helvetica Neue"),local("Helvetica"); ascent-override:90%; descent-override:22%; line-gap-override:0%; size-adjust:107%; } :root{ /* --- Flächen: vier Stufen, Anthrazit mit leichtem Blaugrün-Stich ------- */ --void:#04070a; /* tiefste Fläche: Footer, Overlays */ --paper:#070b0d; /* Seitengrund */ --surface-1:#0b1114; /* Karten, Panels */ --surface-2:#10171b; /* abgesetzte Fläche innerhalb einer Karte */ --surface-3:#162026; /* höchste Stufe: hervorgehobene Karte */ --panel:var(--surface-1); /* Altnamen: Unterseiten wandern mit */ --panel-soft:var(--surface-2); --panel-raised:var(--surface-3); /* --- Text: warmes Off-White in vier Stufen ----------------------------- */ --ink:#f2efe8; --ink-soft:rgba(242,239,232,.74); --ink-faint:rgba(242,239,232,.58); --ink-ghost:rgba(242,239,232,.30); /* --- Linien ------------------------------------------------------------ */ --line:rgba(242,239,232,.10); --line-soft:rgba(242,239,232,.055); --line-strong:rgba(242,239,232,.22); /* --- Akzent: Hahne-Türkis. Tief für Flächen, hell für Schrift, Linien, Datenimpulse, Fokus und technische Marken – nirgends sonst. ----------- */ --accent:#0f7a86; --accent-dark:#0a5a63; --accent-ink:#62d9e3; --accent-soft:rgba(15,122,134,.16); --accent-line:rgba(98,217,227,.34); --accent-glow:rgba(98,217,227,.16); /* --- Sand: ausschließlich Beträge, Kennzahlen, Laufzeiten -------------- */ --sand:#e2bd82; --sand-soft:rgba(226,189,130,.12); --sand-line:rgba(226,189,130,.30); --preis:var(--sand); /* --- Signalfarben ------------------------------------------------------ */ --warm:#d6a24a; --warm-soft:rgba(214,162,74,.12); --gruen:#4bbd83; --rot:#e2695c; /* --- Tiefe: genau drei Stufen ------------------------------------------ */ --sh-1:0 1px 2px rgba(0,0,0,.28); --sh-2:0 18px 44px rgba(0,0,0,.42); --sh-3:0 44px 96px rgba(0,0,0,.56); --shadow:var(--sh-2); --shadow-lg:var(--sh-3); --rim:inset 0 1px 0 rgba(243,245,246,.055); --shadow-inset:var(--rim); /* --- Radien: fünf Werte, sonst keine ----------------------------------- */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:22px; --r-pill:999px; --radius:var(--r-md); --radius-sm:var(--r-sm); --radius-lg:var(--r-lg); /* --- Abstände: eine Reihe, überall dieselbe ---------------------------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px; --s-6:30px; --s-7:40px; --s-8:54px; --s-9:72px; --s-10:96px; --s-11:128px;--s-12:168px; /* --- Raster ------------------------------------------------------------ */ --max:1320px; --gutter:clamp(20px,4.4vw,64px); --nav-h:76px; --section-y:clamp(72px,8.4vw,148px); --spalten:6; /* --- Schrift ----------------------------------------------------------- */ --sans:"Inter Variable","Inter Fallback",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --display:var(--sans); --serif:var(--sans); --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; /* --- Typoskala: fluid, einmal definiert, überall verwendet ------------- Sehr große, ruhige Überschriften; Fließtext zwischen 17 und 19 px; technische Marken in Monoschrift zwischen 10 und 12 px. Der Sprung zwischen Aussage, Erklärung und Metadaten trägt die Hierarchie. */ --fs-display:clamp(3.4rem,1.6rem + 7vw,10rem); --fs-h1:clamp(2.5rem,.9rem + 4.1vw,6.6rem); --fs-h2:clamp(2rem,1.2rem + 3vw,5.2rem); --fs-h3:clamp(1.5rem,1.1rem + 1.4vw,2.5rem); --fs-h4:clamp(1.15rem,1rem + .5vw,1.45rem); --fs-lead:clamp(1.125rem,1rem + .45vw,1.375rem); --fs-body:clamp(1.0625rem,1rem + .2vw,1.19rem); --fs-small:.9375rem; --fs-mini:.8125rem; --fs-label:.72rem; --fs-meta:.66rem; /* --- Zeilenhöhen & Laufweiten ------------------------------------------ */ --lh-display:.94; --lh-head:1.04; --lh-title:1.2; --lh-body:1.65; --tr-display:-.045em; --tr-head:-.035em; --tr-title:-.02em; --tr-label:.18em; --tr-meta:.22em; /* --- Textbreiten ------------------------------------------------------- */ --mw-head:16ch; --mw-lead:54ch; --mw-body:62ch; /* --- Motion: Dauer, Kurve, Rolle --------------------------------------- */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-smooth:cubic-bezier(.4,0,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-entry:cubic-bezier(.22,.9,.28,1); --duration-fast:170ms; --duration-medium:400ms; --duration-slow:820ms; --duration-cine:1400ms; --t-hover:var(--duration-fast) var(--ease-smooth); --t-state:var(--duration-medium) var(--ease-out); --t-reveal:var(--duration-slow) var(--ease-entry); color-scheme:dark; } /* --- Helle Szene: dieselben Komponenten, invertierte Werte --------------- Wird auf einzelne Sektionen gelegt (Statement, Preise) und erzeugt den Wechsel zwischen Licht und Dunkelheit im Scrollverlauf. */ .tone-light{ --paper:#ebe8e1; --surface-1:#f4f2ed; --surface-2:#e3e0d8; --surface-3:#faf9f6; --panel:var(--surface-1); --panel-soft:var(--surface-2); --panel-raised:var(--surface-3); --ink:#0d1214; --ink-soft:rgba(13,18,20,.78); --ink-faint:rgba(13,18,20,.62); --ink-ghost:rgba(13,18,20,.30); --line:rgba(13,18,20,.14); --line-soft:rgba(13,18,20,.07); --line-strong:rgba(13,18,20,.28); --accent-ink:#095059; --accent-soft:rgba(15,122,134,.10); --accent-line:rgba(15,122,134,.32); --accent-glow:rgba(15,122,134,.12); --sand:#8a6320; --sand-soft:rgba(226,189,130,.24); --sand-line:rgba(138,99,32,.32); --preis:var(--ink); --warm:#8a5a12; --warm-soft:rgba(214,162,74,.16); --gruen:#2f7d4f; --rot:#a8382c; --sh-1:0 1px 2px rgba(14,18,20,.06); --sh-2:0 18px 44px rgba(14,18,20,.10); --sh-3:0 36px 84px rgba(14,18,20,.14); --rim:inset 0 1px 0 rgba(255,255,255,.8); --shadow-inset:var(--rim); color-scheme:light; background:var(--paper); color:var(--ink); } /* ========================================================================== 02 RESET / BASE ========================================================================== */ *{box-sizing:border-box} html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 28px); -webkit-text-size-adjust:100%; background:var(--paper); } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body); overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-synthesis-weight:none; font-variant-numeric:tabular-nums; } a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} img,svg,canvas{max-width:100%} img{height:auto} ::selection{background:var(--accent-ink);color:#04191c} .tone-light ::selection{background:var(--accent);color:#fff} /* Bildlaufleiste: schmal, in der Farbwelt der Seite, ohne Rahmen ---------- */ html{scrollbar-color:rgba(243,245,246,.18) transparent;scrollbar-width:thin} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{ background:rgba(243,245,246,.16);border-radius:var(--r-pill); border:3px solid var(--paper); } ::-webkit-scrollbar-thumb:hover{background:rgba(243,245,246,.28)} /* Sehr feines Grundrauschen über der gesamten Seite – Filmkorn, kein Muster. Eine einzige statische Ebene ohne Mischmodus: der Browser kann sie dauerhaft zwischenspeichern, das Scrollen bleibt ruhig. */ body:before{ content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.025; background-image:url("data:image/svg+xml;utf8,"); background-size:170px 170px; } /* Kein seitenweites Raster mehr: das technische Raster erscheint nur noch innerhalb der Systemdarstellungen (HD Core, Zeichnungen), nicht als Dauermuster hinter dem Text. */ body>*{position:relative;z-index:1} /* ========================================================================== 03 TYPOGRAFIE ========================================================================== */ h1,h2,h3,h4{ font-family:var(--display); font-weight:500; letter-spacing:var(--tr-head); line-height:var(--lh-head); margin:0; text-wrap:balance; overflow-wrap:anywhere; hyphens:auto;-webkit-hyphens:auto; } h1{font-size:var(--fs-h1);font-weight:450;letter-spacing:var(--tr-display);line-height:var(--lh-display)} h2{font-size:var(--fs-h2);font-weight:450} h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:var(--tr-title);line-height:var(--lh-title)} h4{font-size:var(--fs-h4);font-weight:500;letter-spacing:var(--tr-title);line-height:var(--lh-title)} p{margin:0 0 1em} p:last-child{margin-bottom:0} strong,b{font-weight:500} /* Technische Marken: Kicker, Eyebrow, Labels, Metadaten ------------------- */ .kicker,.eyebrow,.label,.modul-kat,.demo-gruppe,.kia-abschnitt,.angebot-abschnitt, .foot-social-titel,.dom-alt-titel,.modell-label{ font-family:var(--mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--tr-label); font-weight:500; } .kicker{color:var(--accent-ink);margin:0 0 var(--s-4);display:flex;align-items:center;gap:var(--s-3)} .kicker:before{content:"";width:22px;height:1px;background:var(--accent-line);flex:0 0 auto} /* Eyebrow als Statuszeile: Rahmen, Punkt, Text – wie eine Anzeige im Betriebssystem, nicht wie eine Marketingzeile. */ .eyebrow{ display:inline-flex;align-items:center;gap:var(--s-3); color:var(--ink-soft);margin:0; padding:7px 15px 7px 12px; border:1px solid var(--line);border-radius:var(--r-pill); background:var(--surface-1); font-size:var(--fs-meta);letter-spacing:var(--tr-meta); } .eyebrow:before{ content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto; background:var(--accent-ink);box-shadow:0 0 0 0 var(--accent-glow); animation:puls 3.4s var(--ease-in-out) infinite; } /* Solange eine Marke einläuft, bleibt die Breite ruhig: der Text steht in einer Monoschrift, jedes Ersatzzeichen ist gleich breit. */ .decoding{color:var(--ink-faint)} .lead{ color:var(--ink-soft); font-size:var(--fs-lead); line-height:1.68; max-width:var(--mw-lead); } .note{font-size:var(--fs-mini);color:var(--ink-faint);margin-top:var(--s-4);line-height:1.6} .mono,.hud-line,.sys-label,.step-count,.treffer,.demo-zaehler{font-family:var(--mono)} /* Technische Mikrozeile: eine Einheit für HUD, Footer, Statusleisten ------ */ .hud-line{ font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta); text-transform:uppercase;color:var(--ink-faint); display:inline-flex;align-items:center;gap:var(--s-2); } .hud-dot{ width:5px;height:5px;border-radius:50%;background:var(--accent-ink);flex:0 0 auto; box-shadow:0 0 0 0 var(--accent-glow);animation:puls 3.2s var(--ease-in-out) infinite; } @keyframes puls{ 0%,100%{box-shadow:0 0 0 0 rgba(90,211,222,.32);opacity:.85} 50%{box-shadow:0 0 0 6px rgba(90,211,222,0);opacity:1} } /* ========================================================================== 04 LAYOUT & RASTER ========================================================================== */ .wrap{width:min(var(--max),calc(100% - 2*var(--gutter)));margin-inline:auto} section{padding:var(--section-y) 0;position:relative} /* Zugänglichkeit ---------------------------------------------------------- */ .skip{ position:absolute;left:0;top:0;z-index:200;background:var(--accent);color:#fff; padding:14px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:500;letter-spacing:.02em; transform:translateY(-140%); transition:transform var(--t-state); } .skip:focus{transform:none} :focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px} .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* Fläche: die eine Karte des Systems. Alles Kartenartige benutzt sie. ------ */ .flaeche{ background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--rim); } /* ========================================================================== 05 NAVIGATION -------------------------------------------------------------------------- Am Seitenanfang steht die Leiste offen im Bild. Sobald gescrollt wird, legt sie sich als ruhige Glasfläche über den Inhalt, wird eine Spur flacher und bekommt eine Haarlinie. Der aktive Punkt trägt eine Kapsel – dieselbe Form wie die Knöpfe, damit die Leiste wie Teil einer Anwendung wirkt und nicht wie eine Textzeile. ========================================================================== */ .nav{ position:sticky;top:0;z-index:60; background:transparent; border-bottom:1px solid transparent; transition:background var(--t-state),border-color var(--t-state), backdrop-filter var(--t-state); } .nav.is-scrolled{ background:color-mix(in srgb,var(--paper) 72%,transparent); border-bottom-color:var(--line); backdrop-filter:blur(22px) saturate(1.2); -webkit-backdrop-filter:blur(22px) saturate(1.2); } @supports not (background:color-mix(in srgb,red 50%,blue)){ .nav.is-scrolled{background:rgba(8,9,11,.88)} } .navin{ height:var(--nav-h);display:flex;align-items:center; justify-content:space-between;gap:clamp(14px,2vw,30px); transition:height var(--t-state); } .nav.is-scrolled .navin{height:calc(var(--nav-h) - 8px)} .brand{ display:inline-flex;align-items:center;gap:var(--s-3); font-family:var(--mono);font-weight:500;letter-spacing:.16em;font-size:.74rem; color:var(--ink);flex:0 0 auto; } .brand span{color:var(--accent-ink)} .brand-mark{ width:34px;height:34px;border:1px solid var(--line-strong);border-radius:var(--r-xs); display:grid;place-items:center;flex:0 0 auto;background:var(--surface-1); transition:border-color var(--t-state),transform var(--t-state),box-shadow var(--t-state); } .brand:hover .brand-mark{ border-color:var(--accent-line);transform:translateY(-1px); box-shadow:0 0 0 4px var(--accent-glow); } .brand-mark svg{width:80%;height:80%;display:block;fill:var(--ink);stroke:var(--ink)} .brand-mark .brand-bar{fill:var(--accent-ink);stroke:none} footer .brand-mark{width:30px;height:30px} .links{ display:flex;align-items:center;gap:2px; font-size:var(--fs-small);color:var(--ink-soft); } .links a{ position:relative;padding:9px 14px;border-radius:var(--r-pill); transition:color var(--t-hover),background var(--t-hover); white-space:nowrap; } /* Die Kapsel wächst aus der Mitte – kein Rahmen, der einfach erscheint. */ .links a:before{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; background:rgba(243,245,246,.06); transform:scale(.86);opacity:0; transition:transform var(--t-state),opacity var(--t-state); } .links a:hover{color:var(--ink)} .links a:hover:before{transform:scale(1);opacity:1} .links a[aria-current="true"],.links a[aria-current="page"]{color:var(--ink)} .links a[aria-current="true"]:before,.links a[aria-current="page"]:before{ transform:scale(1);opacity:1;background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); } /* Zwischen 981 und 1180 px stehen sechs Menüpunkte, Wortmarke, Sprachwahl und Handlungsaufforderung gleichzeitig in einer Zeile. Dort rückt alles enger zusammen, statt die Handlungsaufforderung zusammenzuquetschen. */ .navin>.btn-primary{flex:0 0 auto} @media(min-width:981px) and (max-width:1180px){ .navin{gap:12px} .links{font-size:.82rem;gap:0} .links a{padding:9px 10px} .navin>.btn-primary{padding:0 20px} } .burger{ display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm); background:transparent;cursor:pointer;place-items:center; transition:border-color var(--t-hover),background var(--t-hover); } .burger:hover{border-color:var(--line-strong);background:rgba(243,245,246,.04)} .burger i{display:block;width:18px;height:1px;background:var(--ink);position:relative; transition:background var(--t-hover)} .burger i:before,.burger i:after{ content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink); transition:transform var(--t-state),top var(--t-state); } .burger i:before{top:-6px} .burger i:after{top:6px} .burger[aria-expanded="true"] i{background:transparent} .burger[aria-expanded="true"] i:before{top:0;transform:rotate(45deg)} .burger[aria-expanded="true"] i:after{top:0;transform:rotate(-45deg)} /* ========================================================================== 06 BUTTONS & LINKS ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3); border-radius:var(--r-pill); min-height:50px;padding:0 26px; font-size:var(--fs-small);font-weight:500;letter-spacing:.005em; border:1px solid transparent;cursor:pointer;text-align:center;position:relative; isolation:isolate;overflow:hidden; transform:translate3d(var(--mag-x,0),var(--mag-y,0),0); transition:background var(--t-state),border-color var(--t-state),color var(--t-state), transform 240ms var(--ease-out),box-shadow var(--t-state); } /* Ein einziger ruhiger Lichtstreif quert den Knopf beim Überfahren – dieselbe Sprache wie die Datenpakete im System, nur langsamer. */ .btn:before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.16) 50%,transparent 66%); transform:translateX(-120%); } .btn:hover:before{transform:translateX(120%);transition:transform 880ms var(--ease-out)} .btn-primary{ background:var(--accent);color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 0 var(--accent-glow); } .btn-primary:hover{background:var(--accent-dark);box-shadow:0 14px 36px rgba(15,116,128,.4)} .btn-ghost{border-color:var(--line-strong);background:transparent;color:var(--ink)} .btn-ghost:hover{border-color:var(--accent-line);color:var(--accent-ink);background:var(--accent-soft)} .btn-ghost:before{background:linear-gradient(105deg,transparent 34%,rgba(90,211,222,.12) 50%,transparent 66%)} .btn[disabled]{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none} /* Pfeil, der beim Überfahren einen Schritt weitergeht */ .btn .pfeil{ width:14px;height:1px;background:currentColor;position:relative;flex:0 0 auto; transition:width var(--t-state); } .btn .pfeil:after{ content:"";position:absolute;right:0;top:-3px;width:7px;height:7px; border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg); } .btn:hover .pfeil{width:24px} /* Stiller Textlink: Unterstrich wird gezeichnet, nicht eingeblendet ------- */ .textlink{ display:inline-flex;align-items:center;gap:var(--s-2);color:var(--accent-ink); font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--tr-label); text-transform:uppercase;position:relative;padding-bottom:4px; } .textlink:after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor; transform:scaleX(0);transform-origin:right;transition:transform var(--t-state); } .textlink:hover:after{transform:scaleX(1);transform-origin:left} /* ========================================================================== 07 HERO / HD-CORE-STORY -------------------------------------------------------------------------- Die Hero-Szene der Startseite und die scrollgesteuerte HD-Core-Story stehen in assets/hd-core.css (nur dort geladen). Hier bleiben die Bausteine, die auch Unterseiten nutzen: Handlungsaufforderungen und die Zeile darunter. ========================================================================== */ .hero-actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)} /* Die Zeile unter den Knöpfen nimmt die letzte Hürde vor dem Klick: was kostet der erste Schritt und wie lange dauert er. */ .hero-fein{ margin:var(--s-3) 0 0;font-size:var(--fs-mini);color:var(--ink-faint); max-width:46ch;display:flex;align-items:flex-start;gap:var(--s-3);line-height:1.6; } .hero-fein:before{ content:"";flex:0 0 auto;width:14px;height:1px;background:var(--accent-line);margin-top:.72em; } /* ========================================================================== 08 SYSTEMZEICHNUNG (ruhige Fassung auf Unterseiten und im Kontaktblock) -------------------------------------------------------------------------- Gezeichnet von assets/hero-system.js (Canvas 2D, ohne Bibliothek). Ohne Canvas bleibt die statische SVG-Zeichnung stehen. ========================================================================== */ .sys{ position:relative; aspect-ratio:1/1; width:100%; max-width:560px; margin-inline:auto; display:grid; place-items:center; } .sys-canvas{ position:absolute;inset:0;width:100%;height:100%;display:block; opacity:0;transition:opacity var(--duration-cine) var(--ease-out); } .sys.is-live .sys-canvas{opacity:1} /* Statischer, hochwertiger Ersatz ohne Canvas ----------------------------- */ .sys-fallback{position:absolute;inset:0;display:block} .sys.is-live .sys-fallback{opacity:0;visibility:hidden;transition:opacity var(--duration-medium) var(--ease-smooth)} .sys-fallback svg{width:100%;height:100%;display:block} .sys-fallback .f-line{fill:none;stroke:rgba(242,239,232,.22);stroke-width:.7} .sys-fallback .f-line-soft{fill:none;stroke:rgba(242,239,232,.10);stroke-width:.7} .sys-fallback .f-accent{fill:none;stroke:var(--accent-ink);stroke-width:.9;opacity:.75} .sys-fallback .f-fill{fill:rgba(242,239,232,.035);stroke:rgba(242,239,232,.16);stroke-width:.7} .sys-fallback .f-core{fill:rgba(15,122,134,.24);stroke:var(--accent-ink);stroke-width:.9} .sys-fallback .f-node{fill:var(--accent-ink)} .sys-fallback .f-node-soft{fill:rgba(242,239,232,.09);stroke:rgba(242,239,232,.26);stroke-width:.7} .sys-fallback .f-accent-fill{fill:rgba(98,217,227,.07);stroke:var(--accent-line);stroke-width:.8} .sys-fallback .f-core-side{fill:rgba(15,122,134,.36);stroke:var(--accent-ink);stroke-width:.7} .sys-fallback .f-mark{fill:rgba(242,239,232,.34);font-family:var(--mono);font-size:5px;letter-spacing:1.4px} .sys-hud{position:absolute;inset:0;pointer-events:none} .sys-label{ position:absolute;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta); text-transform:uppercase;color:var(--ink-faint);white-space:nowrap; display:inline-flex;align-items:center;gap:7px; opacity:0;transform:translateY(4px); transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out); } .sys.is-ready .sys-label{opacity:1;transform:none} .sys-label:before{content:"";width:14px;height:1px;background:var(--accent-line)} /* Ruhige Wiederholung des Systems auf Unterseiten und im Kontaktbereich --- */ .sys--calm{max-width:340px;opacity:.94} /* ========================================================================== 09 SEKTIONSKÖPFE & SZENENWECHSEL ========================================================================== */ .section-head{ display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px,4vw,72px);align-items:end; margin-bottom:clamp(38px,5vw,80px); position:relative;padding-top:52px; } /* Sektionskennung mit Maßlinie: die Linie trägt an den Spaltengrenzen feine Teilstriche – dasselbe Raster, an dem das Layout hängt. */ .section-head:before{ content:attr(data-nr); position:absolute;top:0;left:0; font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta); text-transform:uppercase;color:var(--ink-faint); } .section-head:after{ content:"";position:absolute;top:30px;left:0;right:0;height:5px; background: linear-gradient(to right,var(--accent-ink) 0 74px,var(--line) 74px) top left/100% 1px no-repeat, repeating-linear-gradient(to right,var(--line-strong) 0 1px,transparent 1px calc(100%/var(--spalten))) top left/100% 5px no-repeat; transform:scaleX(0);transform-origin:left; transition:transform 1.1s var(--ease-out) .2s; } .section-head.show:after{transform:scaleX(1)} .section-head:not([data-nr]){padding-top:30px} .section-head:not([data-nr]):after{top:0} .section-head h2{ font-size:var(--fs-h2);font-weight:450;line-height:var(--lh-head); letter-spacing:var(--tr-head);margin:0;max-width:19ch; } .section-head p{ color:var(--ink-soft);max-width:var(--mw-lead);margin:0; font-size:var(--fs-lead);line-height:1.68; } /* Kante zwischen dunklen und hellen Szenen: eine saubere Schnittkante mit Haarlinie statt eines weichen Verlaufs. */ .tone-light{ position:relative; border-top:1px solid rgba(243,245,246,.14); border-bottom:1px solid rgba(243,245,246,.14); } .tone-light>.wrap{position:relative;z-index:1} /* ========================================================================== Kennzahlen – das Datenmoment der Seite -------------------------------------------------------------------------- Große Zahl, technische Beschriftung, ein Index in der Ecke. Beim Überfahren hebt sich die Zelle an und die obere Kante wird zur Signallinie: dieselbe Geste wie in den Leistungszeilen. ========================================================================== */ .kennzahlen{padding:0;border-bottom:1px solid var(--line)} .kennzahlen .zahlband{border-top:0} .zahlband{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px; background:var(--line);border-top:1px solid var(--line); } .zahl{ background:var(--paper);padding:clamp(24px,3vw,38px) clamp(18px,2.2vw,28px); position:relative;overflow:hidden; transition:background var(--duration-slow) var(--ease-out); } .zahl:before{ content:"";position:absolute;left:0;top:0;height:1px;width:100%; background:linear-gradient(to right,var(--accent-ink),transparent 72%); transform:scaleX(0);transform-origin:left;transition:transform 620ms var(--ease-out); } .zahl:hover{background:var(--surface-1)} .zahl:hover:before{transform:scaleX(1)} .zahl b{ display:block;font-size:clamp(2rem,3.6vw,3.1rem);letter-spacing:var(--tr-display); color:var(--ink);line-height:.98;font-weight:400;font-variant-numeric:tabular-nums; } .zahl span{ display:block;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.12em; text-transform:uppercase;color:var(--ink-faint);margin-top:var(--s-3);line-height:1.6; max-width:26ch; } /* ========================================================================== 10 LEISTUNGEN -------------------------------------------------------------------------- Keine Karten nebeneinander, sondern ein Datenblatt: nummerierte Zeilen, abwechselnd gesetzt, jede mit einer eigenen technischen Zeichnung und einer Kopfzeile aus Nummer und Bereichsmarke. ========================================================================== */ .services{display:grid;gap:0;border-top:1px solid var(--line)} .service{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(24px,4vw,72px); align-items:center; padding:clamp(38px,5vw,72px) 0; border-bottom:1px solid var(--line); position:relative; transition:background var(--duration-slow) var(--ease-out); } .service:after{ content:"";position:absolute;left:0;top:-1px;height:1px;width:100%; background:linear-gradient(to right,var(--accent-ink),transparent 70%); transform:scaleX(0);transform-origin:left; transition:transform 700ms var(--ease-out); } .service:hover:after,.service:focus-within:after{transform:scaleX(1)} .service:hover{background:linear-gradient(to right,rgba(243,245,246,.02),transparent 66%)} .service:nth-child(even) .service-visual{order:-1} .service-index{ display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-5); font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--tr-label); text-transform:uppercase;color:var(--ink-faint); } /* Die Nummer trägt die Zeile: groß, in Akzentfarbe, mit fester Ziffernbreite */ .service-index b{ color:var(--accent-ink);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.3rem); letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums; } .service-index i{flex:0 0 auto;width:clamp(20px,3vw,44px);height:1px;background:var(--line-strong);font-style:normal} .service h3{font-size:var(--fs-h3);font-weight:450;margin:0 0 var(--s-4);letter-spacing:var(--tr-head)} .service p{color:var(--ink-soft);margin:0;max-width:52ch;line-height:1.72} .service .more{ margin-top:var(--s-5);color:var(--accent-ink);font-family:var(--mono);font-size:var(--fs-label); letter-spacing:var(--tr-label);text-transform:uppercase;display:inline-flex;align-items:center;gap:var(--s-3); } .service .more:after{ content:"";width:26px;height:1px;background:var(--accent-line); transition:width var(--t-state); } .service:hover .more:after{width:48px} /* --- Technische Zeichnung je Leistung ------------------------------------ */ .service-visual{ position:relative;border:1px solid var(--line);border-radius:var(--r-md); background:linear-gradient(158deg,rgba(243,245,246,.028),rgba(243,245,246,0) 60%),var(--surface-1); overflow:hidden; display:flex;flex-direction:column; transition:border-color var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out); } .service:hover .service-visual{ border-color:var(--line-strong);transform:translateY(-5px);box-shadow:var(--sh-2); } .visual-plate{position:relative;aspect-ratio:16/10;flex:1 1 auto} .service-visual svg{position:absolute;inset:0;width:100%;height:100%} .visual-plate:after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 58% 58% at 72% 18%,rgba(90,211,222,.10),transparent 70%); } /* Beschriftungsstreifen: dieselbe Zeile wie in einer Anlagendokumentation */ .visual-cap{ margin:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3); padding:11px var(--s-4);border-top:1px solid var(--line-soft); background:var(--surface-2); font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase; color:var(--ink-faint); } .visual-cap i{font-style:normal;color:var(--accent-ink)} .v-line{fill:none;stroke:rgba(243,245,246,.24);stroke-width:.8} .v-line-soft{fill:none;stroke:rgba(243,245,246,.11);stroke-width:.8} .v-accent{fill:none;stroke:var(--accent-ink);stroke-width:1;opacity:.8} .v-fill{fill:rgba(243,245,246,.05);stroke:rgba(243,245,246,.16);stroke-width:.8} .v-node{fill:var(--accent-ink)} .v-node-soft{fill:rgba(243,245,246,.3)} .v-dash{stroke-dasharray:3 5} /* Bewegung erst, wenn die Zeichnung im Bild ist */ .v-draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)} .show .v-draw,.is-inview .v-draw{animation:vDraw 2.4s var(--ease-out) forwards} @keyframes vDraw{to{stroke-dashoffset:0}} .v-pulse{animation:vPulse 4.5s var(--ease-in-out) infinite} @keyframes vPulse{0%,100%{opacity:.25}50%{opacity:1}} .v-drift{animation:vDrift 9s var(--ease-in-out) infinite alternate} @keyframes vDrift{from{transform:translateY(-2px)}to{transform:translateY(2px)}} /* Datenpaket auf einer gezeichneten Leitung: dieselbe Sprache wie im Systemobjekt des Heros. Eine kurze Fahrt, dann eine Pause – Betrieb statt Dauerfeuer. Ohne offset-path bleibt schlicht nichts stehen. */ .v-paket{fill:var(--accent-ink);opacity:0;offset-rotate:0deg;offset-distance:0%} .show .v-paket{animation:vPaket 6s var(--ease-in-out) var(--pd,0s) infinite} @keyframes vPaket{ 0%{opacity:0;offset-distance:0%} 6%{opacity:1} 40%{opacity:1} 50%{opacity:0;offset-distance:100%} 100%{opacity:0;offset-distance:100%} } @supports not (offset-path:path("M0 0 L1 1")){.v-paket{display:none}} /* ========================================================================== Standards – technische Vertrauensleiste ========================================================================== */ .standards{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .standards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)} .standard{ background:var(--paper);padding:clamp(24px,3vw,34px) clamp(20px,2.4vw,28px); display:flex;flex-direction:column;gap:var(--s-2);position:relative;overflow:hidden; transition:background var(--duration-slow) var(--ease-out); } /* Dieselbe Geste wie in der Kennzahlenleiste: die obere Kante wird beim Überfahren zur Signallinie. Ein Verhalten, zwei Orte. */ .standard:before{ content:"";position:absolute;left:0;top:0;height:1px;width:100%; background:linear-gradient(to right,var(--accent-ink),transparent 72%); transform:scaleX(0);transform-origin:left;transition:transform 620ms var(--ease-out); } .standard:hover{background:var(--surface-1)} .standard:hover:before{transform:scaleX(1)} .standard b{ font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase; color:var(--ink);font-weight:500;display:flex;align-items:center;gap:var(--s-3); } .standard b:before{content:"";width:6px;height:6px;border-radius:1px;background:var(--accent-ink);flex:0 0 auto} .standard span{font-size:var(--fs-small);color:var(--ink-faint);line-height:1.6} /* ========================================================================== Teaser (Sichtbarkeit, Domain, Server) -------------------------------------------------------------------------- Drei aufeinanderfolgende Teaser sind ein Block, nicht drei Kapitel: untereinander stehen sie eng, nach außen behalten sie den Sektionsabstand. ========================================================================== */ .teaser-band{padding-block:clamp(18px,2.2vw,28px)} .teaser-band+.teaser-band{padding-top:clamp(10px,1.4vw,16px)} .teaser{ display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr); gap:clamp(24px,4vw,60px);align-items:center; border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(28px,3.6vw,52px); background:linear-gradient(152deg,rgba(243,245,246,.026),transparent 58%),var(--surface-1); box-shadow:var(--sh-2),var(--rim); transition:border-color var(--duration-slow) var(--ease-out); } .teaser:hover{border-color:var(--line-strong)} .teaser h2{font-size:var(--fs-h3);font-weight:450;margin:0 0 var(--s-4);max-width:20ch} .teaser p{color:var(--ink-soft);margin:0 0 var(--s-3)} .teaser-preis{ border-left:1px solid var(--line);padding-left:clamp(22px,3vw,40px); display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1); } /* Beträge stehen im Sandton – das einzige Element, das nicht Petrol ist. */ .teaser-preis b{ font-size:clamp(2.1rem,3.8vw,3rem);font-weight:400;letter-spacing:var(--tr-display); line-height:1;color:var(--preis); } .teaser-preis span{ font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.12em; text-transform:uppercase;color:var(--ink-faint);line-height:1.6; } .teaser-preis .btn{margin-top:var(--s-4)} .teaser-server{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)} .teaser-preis-links{ border-left:0;border-right:1px solid var(--line);padding-left:0; padding-right:clamp(22px,3vw,40px); } .teaser-fein{ margin-top:var(--s-4)!important;font-size:var(--fs-small);color:var(--ink-soft); border-left:1px solid var(--accent-line);padding-left:var(--s-4); } .teaser-fein b{color:var(--accent-ink);font-weight:500} /* ========================================================================== Statement – ruhiger Bruch zwischen den Kapiteln ========================================================================== */ .statement{padding:clamp(88px,14vw,190px) 0;position:relative;overflow:hidden} /* Der Satz steht links groß, die Quelle rechts unten auf derselben Grundlinie: die helle Szene bleibt dadurch eine Komposition und keine halb leere Fläche. */ .statement-grid{ display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"mark mark" "satz quelle"; gap:0 clamp(24px,4vw,72px);align-items:end; } .statement-mark{grid-area:mark} .statement blockquote{grid-area:satz} .statement-quelle{ grid-area:quelle;margin:0;text-align:right; padding-bottom:.4em;border-right:1px solid var(--line);padding-right:clamp(16px,2vw,28px); } .statement-quelle b{display:block;font-size:var(--fs-small);font-weight:500;color:var(--ink)} .statement-quelle span{ display:block;margin-top:4px;font-family:var(--mono);font-size:var(--fs-meta); letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint); } @media(max-width:900px){ .statement-grid{grid-template-columns:1fr;grid-template-areas:"mark" "satz" "quelle"} .statement-quelle{ text-align:left;border-right:0;border-left:1px solid var(--line); padding:0 0 0 clamp(16px,2vw,28px);margin-top:var(--s-7); } } .statement blockquote{ /* Sehr langsame Tiefenbewegung aus dem Szenenfortschritt: der Satz steht eine Spur ruhiger als die Seite, die an ihm vorbeizieht. */ transform:translate3d(0,calc((var(--sp,.5) - .5) * -44px),0); will-change:transform; margin:0; font-size:clamp(1.6rem,3.8vw,3.3rem); font-weight:400;line-height:1.16;letter-spacing:var(--tr-head); max-width:23ch;text-wrap:balance; } .statement blockquote em{font-style:normal;color:var(--accent-ink)} .statement-mark{ transform:translate3d(0,calc((var(--sp,.5) - .5) * -16px),0); font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta); text-transform:uppercase;color:var(--ink-faint); margin:0 0 clamp(30px,4vw,56px);display:flex;align-items:center;gap:var(--s-3); } .statement-mark:before{content:"";width:44px;height:1px;background:var(--line-strong)} /* ========================================================================== 11 MODULKONSOLE (Startseite) -------------------------------------------------------------------------- Die Beispielmodule stehen nicht als Karten, sondern in einem Fenster: Kopfleiste, Modulliste links, Bildschirm rechts. Damit sieht man in fünf Sekunden, dass hier echte Software gebaut wird. ========================================================================== */ .konsole{ border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:var(--surface-1);box-shadow:var(--sh-3),var(--rim); transition:border-color var(--duration-slow) var(--ease-out); } .konsole:hover{border-color:var(--line-strong)} .konsole-leiste{ display:flex;align-items:center;gap:var(--s-3); height:46px;padding:0 var(--s-4); border-bottom:1px solid var(--line);background:var(--surface-2); font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.14em; text-transform:uppercase;color:var(--ink-faint); } .konsole-punkte{display:inline-flex;gap:6px;flex:0 0 auto} .konsole-punkte i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);display:block} .konsole-punkte i:first-child{background:var(--accent-ink)} .konsole-pfad{color:var(--ink-soft)} .konsole-status{margin-left:auto;display:inline-flex;align-items:center;gap:var(--s-2)} .demo-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} .tabs{ display:grid;gap:0;align-content:start; border-right:1px solid var(--line);background:var(--surface-2); } .tab{ border:0;border-bottom:1px solid var(--line-soft);background:transparent;color:var(--ink-soft); padding:var(--s-4) var(--s-5);text-align:left;cursor:pointer; font-size:var(--fs-small);font-weight:450;position:relative; transition:color var(--t-hover),background var(--t-state),padding-left var(--t-state); } .tab:last-child{border-bottom:0} .tab span{ display:block;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.1em; text-transform:uppercase;color:var(--ink-faint);margin-top:5px; } .tab:before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent-ink); transform:scaleY(0);transition:transform var(--t-state); } .tab:hover{color:var(--ink);background:rgba(243,245,246,.03)} .tab[aria-selected="true"]{color:var(--ink);background:var(--surface-1);padding-left:calc(var(--s-5) + 6px)} .tab[aria-selected="true"]:before{transform:scaleY(1)} .tab[aria-selected="true"] span{color:var(--accent-ink)} .demo-screen{ background:var(--surface-1); padding:clamp(24px,2.8vw,40px);min-height:460px;position:relative;overflow:hidden; transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out),filter 260ms var(--ease-out); } .demo-screen:before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 58% 48% at 84% 0%,rgba(90,211,222,.07),transparent 70%); } .demo-screen>*{position:relative} .demo-screen .kicker{margin-bottom:var(--s-3)} .demo-screen h3{font-size:var(--fs-h3);font-weight:450;margin:0 0 var(--s-3)} .demo-screen p{color:var(--ink-soft);font-size:var(--fs-small)} .demo-screen.is-swapping{opacity:0;transform:translateY(6px) scale(.995);filter:blur(3px)} .stats{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:var(--s-6) 0; background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden; } .stat{ background:var(--surface-2);padding:var(--s-4) var(--s-5);color:var(--ink-faint); font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase; } .stat b{ display:block;font-family:var(--sans);color:var(--ink);font-size:1.6rem;font-weight:400; letter-spacing:var(--tr-head);margin-bottom:6px;text-transform:none; } .table{ display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden; } .row{ display:grid;grid-template-columns:1.3fr .85fr .7fr;gap:var(--s-3);padding:var(--s-4) var(--s-4); background:var(--surface-2);font-size:var(--fs-small);color:var(--ink-soft);align-items:center; transition:background var(--t-hover); } .row:hover{background:var(--surface-3)} .row b{color:var(--ink);font-weight:450} .status{ color:var(--accent-ink);font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.12em; text-transform:uppercase;text-align:right; } .demo-note{ color:var(--ink-faint);font-size:var(--fs-meta);margin-top:var(--s-5);font-family:var(--mono); letter-spacing:.06em;line-height:1.6; } .demo-extra{ margin-top:var(--s-5);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-sm); background:var(--surface-2); } .demo-extra b{color:var(--accent-ink);font-weight:500} .demo-extra ul{margin:var(--s-3) 0 0;padding-left:18px;display:grid;gap:9px;color:var(--ink-soft);font-size:var(--fs-small)} .demo-extra p{margin:var(--s-3) 0 0;font-size:var(--fs-mini);color:var(--ink-faint)} /* ========================================================================== 12 PROZESS ========================================================================== */ .process{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.5vw,38px); position:relative;padding-top:58px; } .process:before{content:"";position:absolute;left:0;right:0;top:24px;height:1px;background:var(--line)} .process:after{ content:"";position:absolute;left:0;top:24px;height:1px;width:var(--p,0%); background:linear-gradient(to right,var(--accent),var(--accent-ink)); transition:width var(--duration-slow) var(--ease-out); } .process-step{position:relative;padding-right:var(--s-4)} .process-node{ position:absolute;top:-42px;left:0;width:10px;height:10px;border-radius:50%; border:1px solid var(--line-strong);background:var(--paper); transition:border-color var(--t-state),background var(--t-state),box-shadow var(--t-state); } .process-step.is-passed .process-node{ border-color:var(--accent-ink);background:var(--accent-ink);box-shadow:0 0 0 5px var(--accent-glow); } .process-nr{ font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--tr-label);color:var(--ink-faint); display:block;margin-bottom:var(--s-4);transition:color var(--t-state); } .process-step.is-passed .process-nr{color:var(--accent-ink)} .process-step h3{font-size:var(--fs-h4);font-weight:500;margin:0 0 var(--s-3)} .process-step p{color:var(--ink-soft);margin:0;font-size:var(--fs-small);line-height:1.7} .process-dauer{ display:block;margin-top:var(--s-3);font-family:var(--mono);font-size:var(--fs-meta); letter-spacing:.12em;text-transform:uppercase;color:var(--ink-ghost); } /* ========================================================================== 13 PAKETE -------------------------------------------------------------------------- Nicht drei gleich breite Spalten: die Empfehlung steht breiter, liegt eine Stufe höher und trägt als einzige einen Rahmen. ========================================================================== */ .packages{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); gap:0;align-items:stretch;border-top:1px solid var(--line); } .package{ border-right:1px solid var(--line);border-bottom:1px solid var(--line); padding:clamp(28px,3.2vw,44px) clamp(22px,2.4vw,36px); display:flex;flex-direction:column;position:relative; transition:background var(--duration-slow) var(--ease-out); } .package:last-child{border-right:0} .package:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)} @supports not (background:color-mix(in srgb,red 50%,blue)){.package:hover{background:rgba(18,24,28,.03)}} .package .label{color:var(--ink-faint);margin:0 0 var(--s-6);display:block} .package.featured{ background:var(--surface-3); box-shadow:0 0 0 1px var(--line),var(--sh-2); z-index:1; } .package.featured .label{color:var(--accent-ink)} .package.featured:before{ content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(to right,var(--accent),var(--accent-ink)); } .package h3{font-size:var(--fs-h4);font-weight:500;margin:0 0 var(--s-1)} .price{ font-size:clamp(2.2rem,3.4vw,3.1rem);font-weight:400;letter-spacing:var(--tr-display); margin:var(--s-5) 0 var(--s-1);line-height:1;color:var(--preis); } .price-text{font-size:var(--fs-h4);font-weight:500;letter-spacing:var(--tr-title);color:var(--ink)} .price small{ font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-faint);display:block;margin-top:var(--s-3); } .package>p:not(.price){color:var(--ink-soft);font-size:var(--fs-small);margin:var(--s-4) 0 0} .checklist{list-style:none;padding:0;margin:var(--s-6) 0 var(--s-7);display:grid;gap:var(--s-3)} .checklist li{padding-left:22px;position:relative;font-size:var(--fs-small);color:var(--ink-soft);line-height:1.6} .checklist li:before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent-line)} .package .btn{margin-top:auto;width:100%} .price-note{ color:var(--ink-faint);font-size:var(--fs-mini);margin-top:var(--s-6); font-family:var(--mono);letter-spacing:.04em; } /* ========================================================================== 14 PROJEKT-CHECK ========================================================================== */ .advisor{ border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(28px,3.6vw,58px); background:linear-gradient(158deg,rgba(243,245,246,.03),transparent 54%),var(--surface-1); box-shadow:var(--sh-2),var(--rim);position:relative;overflow:hidden; } .advisor:before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 48% 58% at 100% 0%,rgba(90,211,222,.08),transparent 68%); } .advisor-grid{ display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,64px);position:relative; } .advisor h3{font-size:var(--fs-h3);font-weight:450;line-height:var(--lh-head);margin:0 0 var(--s-4)} .advisor p{color:var(--ink-soft)} /* Fortschritt als technische Schiene: 01 ━━ 02 ━━ 03 ━━ 04 */ .check-rail{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4)} .check-rail span{ font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.16em;color:var(--ink-faint); transition:color var(--t-state); } .check-rail i{flex:1 1 auto;height:1px;background:var(--line);font-style:normal} .progress{height:1px;background:var(--line);overflow:visible;margin:0 0 var(--s-3);position:relative} .progress span{ display:block;position:relative;height:1px;width:25%; background:linear-gradient(to right,var(--accent),var(--accent-ink)); transition:width var(--duration-slow) var(--ease-out); } .progress span:after{ content:"";position:absolute;top:-2px;right:0;width:5px;height:5px;border-radius:50%; background:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-glow); } .step-count{ font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-label); text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s-7); } .question{display:none} .question.active{display:block;animation:qIn var(--duration-medium) var(--ease-out)} @keyframes qIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .question>p{margin:0;font-size:var(--fs-h4);font-weight:450;letter-spacing:var(--tr-title)} .question>p b{font-weight:450} .options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-5)} .option{ border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:var(--r-sm); padding:var(--s-5) var(--s-5);cursor:pointer;text-align:left;font-size:var(--fs-small); position:relative;overflow:hidden; transition:border-color var(--t-state),background var(--t-state),transform var(--t-state); } .option:before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent-ink); transform:scaleY(0);transform-origin:bottom;transition:transform var(--t-state); } .option:hover{border-color:var(--accent-line);background:rgba(243,245,246,.035);transform:translateY(-2px)} .option:hover:before{transform:scaleY(1);transform-origin:top} .option[aria-pressed="true"]{border-color:var(--accent-ink);background:var(--accent-soft)} .option[aria-pressed="true"]:before{transform:scaleY(1)} .option[aria-pressed="true"]:after{ content:"";position:absolute;top:14px;right:14px;width:5px;height:5px;border-radius:50%; background:var(--accent-ink); } .back{ margin-top:var(--s-4);background:none;border:0;color:var(--ink-faint);cursor:pointer;padding:var(--s-2) 0; font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase; transition:color var(--t-hover); } .back:hover{color:var(--accent-ink)} .result{display:none} .result.show{display:block;animation:qIn var(--duration-medium) var(--ease-out)} .result>p:first-child{ font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--tr-label); text-transform:uppercase;color:var(--ink-faint); } .resultbox{ padding:var(--s-6);border-radius:var(--r-md);border:1px solid var(--accent-line); background:var(--accent-soft);margin-top:var(--s-4); } .resultbox strong{font-size:var(--fs-h4);font-weight:500;letter-spacing:var(--tr-title)} .resultbox p{margin:var(--s-3) 0 0;color:var(--ink-soft)} .resultbox ul{ margin:var(--s-5) 0 0;padding-left:0;list-style:none;color:var(--ink-soft);display:grid;gap:9px; font-size:var(--fs-small); } .resultbox li{padding-left:20px;position:relative} .resultbox li:before{content:"";position:absolute;left:0;top:.66em;width:9px;height:1px;background:var(--accent-line)} /* ========================================================================== 15 KONTAKT ========================================================================== */ .contact{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(18px,2.4vw,32px);align-items:start; } .panel{ border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,44px); background:var(--surface-1);position:relative;box-shadow:var(--rim); } .panel h2{font-size:var(--fs-h3);font-weight:450;line-height:var(--lh-head);margin:0 0 var(--s-5)} .field{display:grid;gap:var(--s-2);margin-bottom:var(--s-5)} .field label{ font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase; color:var(--ink-faint); } .field input,.field textarea,.field select{ width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink); padding:var(--s-3) 2px;border-radius:0;outline:none;font-size:1rem; transition:border-color var(--t-state); } .field select{padding-right:var(--s-2)} .field select option{background:var(--surface-1);color:var(--ink)} .field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)} .field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--accent-ink)} .field textarea{min-height:132px;resize:vertical;line-height:1.65} .field .err{color:var(--rot);font-size:var(--fs-mini);min-height:1em;font-family:var(--mono);letter-spacing:.04em} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:var(--rot)} .consent{ display:flex;gap:var(--s-3);align-items:flex-start;margin:var(--s-3) 0 var(--s-5); font-size:var(--fs-small);color:var(--ink-soft);line-height:1.6; } .consent input{width:18px;height:18px;flex:0 0 auto;margin-top:3px;accent-color:var(--accent)} .consent a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px} .formstatus{ margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border-radius:var(--r-sm); border:1px solid var(--accent-line);background:var(--accent-soft);font-size:var(--fs-small);display:none; } .formstatus.show{display:block} .formstatus a{color:var(--accent-ink);text-decoration:underline} .contact-direct{ margin-top:var(--s-7);display:grid;gap:9px;font-size:var(--fs-small);padding-top:var(--s-6); border-top:1px solid var(--line);color:var(--ink-soft); } .contact-direct strong{color:var(--ink);font-weight:500} .contact-direct a{color:var(--accent-ink)} /* Honigtopf: für Menschen unsichtbar, für ausfüllende Skripte aber ganz normal vorhanden. Kein Verschieben nach außerhalb der Seite – das zählt in Leserichtung von rechts nach links als seitlicher Überlauf. */ .hp{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .auswahl-hinweis{ border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-sm); padding:var(--s-4) var(--s-5);margin-bottom:var(--s-5);font-size:var(--fs-small);color:var(--ink-soft); } .auswahl-hinweis b{color:var(--accent-ink);font-weight:500} /* --- Über uns ------------------------------------------------------------ */ .ueberuns-info{ margin-top:clamp(28px,3.4vw,48px);display:grid;gap:var(--s-4) clamp(24px,4vw,72px); grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start; } .ueberuns-info p{color:var(--ink-soft);margin:0;max-width:var(--mw-body)} .ueberuns-info b{color:var(--ink);font-weight:500} .ueberuns-info a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px} .ueberuns-referenzen{ grid-column:2;grid-row:1 / span 2;align-self:start; border-left:1px solid var(--line);padding:2px 0 2px clamp(22px,3vw,40px); font-size:var(--fs-small);color:var(--ink-faint); } @media(max-width:980px){ .ueberuns-info{grid-template-columns:1fr} .ueberuns-referenzen{grid-column:1;grid-row:auto;border-left:0;border-top:1px solid var(--line);padding:18px 0 0} } .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)} .person{ padding:clamp(26px,3vw,42px) clamp(20px,2.4vw,34px) clamp(26px,3vw,42px) 0; border-bottom:1px solid var(--line);position:relative; transition:background var(--duration-slow) var(--ease-out); } .person:hover{background:rgba(243,245,246,.022)} .person:first-child{border-right:1px solid var(--line);padding-right:clamp(20px,2.4vw,34px)} .person:last-child{padding-left:clamp(20px,2.4vw,34px)} /* Monogramm als Zeichenplatte statt als Avatarkreis */ .person-nr{ display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:var(--s-5); border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface-1); font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--accent-ink); transition:border-color var(--t-state),box-shadow var(--t-state); } .person:hover .person-nr{border-color:var(--accent-line);box-shadow:0 0 0 5px var(--accent-glow)} .person h3{font-size:var(--fs-h4);font-weight:500;margin:0 0 var(--s-3)} .person p{color:var(--ink-soft);margin:0;font-size:var(--fs-small)} /* ========================================================================== 16 FOOTER ========================================================================== */ footer{ border-top:1px solid var(--line);padding:clamp(54px,7vw,96px) 0 clamp(30px,3.4vw,44px); color:var(--ink-soft);background:var(--void);position:relative;overflow:hidden; } /* Die Wortmarke steht als Zeichnungslinie, nicht als Fläche – und läuft nach unten aus, damit sie den Inhalt nicht erschlägt. */ .foot-wordmark{ font-size:clamp(2.6rem,13.4vw,11.4rem);line-height:.84;font-weight:450;letter-spacing:-.055em; color:transparent;-webkit-text-stroke:1px rgba(243,245,246,.15); margin:0 0 clamp(34px,5vw,68px);user-select:none; -webkit-mask-image:linear-gradient(to bottom,#000 30%,rgba(0,0,0,.25)); mask-image:linear-gradient(to bottom,#000 30%,rgba(0,0,0,.25)); } @supports not (-webkit-text-stroke:1px red){ .foot-wordmark{color:rgba(243,245,246,.13);-webkit-text-stroke:0} } .foot{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.6fr) minmax(0,1.3fr); gap:clamp(24px,4vw,60px);align-items:start;padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--line); } .foot strong{color:var(--ink)!important;font-weight:500} .foot>div:first-child{font-size:var(--fs-small);line-height:1.9;color:var(--ink-faint)} .foot-brand{ display:inline-flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2); font-family:var(--mono);letter-spacing:.14em;font-size:var(--fs-label); } .footlinks{display:flex;gap:var(--s-3) var(--s-5);flex-wrap:wrap;align-content:start;font-size:var(--fs-small)} .footlinks a{color:var(--ink-soft);position:relative;transition:color var(--t-hover)} .footlinks a:after{ content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--accent-line); transform:scaleX(0);transform-origin:right;transition:transform var(--t-state); } .footlinks a:hover{color:var(--accent-ink)} .footlinks a:hover:after{transform:scaleX(1);transform-origin:left} .foot-social{display:flex;flex-direction:column;gap:var(--s-3)} .foot-social-titel{margin:0;color:var(--ink-faint)} .social-leiste{display:inline-flex;gap:var(--s-2);flex-wrap:wrap} .social-link{ width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line); display:grid;place-items:center;color:var(--ink-faint); transition:border-color var(--t-state),color var(--t-state),transform var(--t-state); } .social-link:hover{border-color:var(--accent-line);color:var(--accent-ink);transform:translateY(-2px)} .social-link svg{width:18px;height:18px;fill:currentColor;display:block} .social-link.social-bald{opacity:.4;cursor:default;border-style:dashed} .social-link.social-bald:hover{border-color:var(--line);color:var(--ink-faint);transform:none} .foot-social-hinweis{margin:2px 0 0;font-size:var(--fs-mini);color:var(--ink-faint);max-width:34ch} .foot-social-hinweis:empty{display:none} .kontakt-social{ display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-2); padding-top:var(--s-4);border-top:1px solid var(--line-soft); } .kontakt-social>span:first-child{ font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.16em; text-transform:uppercase;color:var(--ink-faint); } .foot-status{ display:flex;flex-wrap:wrap;gap:var(--s-2) clamp(16px,2.6vw,38px); margin-top:clamp(26px,3.4vw,42px);padding-top:var(--s-5);border-top:1px solid var(--line-soft); } .totop{ position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%; border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 82%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none; transition:opacity var(--t-state),transform var(--t-state),border-color var(--duration-medium); z-index:40;transform:translateY(8px); } .totop.show{opacity:1;pointer-events:auto;transform:none} .totop:hover{border-color:var(--accent-line);color:var(--accent-ink)} @supports not (background:color-mix(in srgb,red 50%,blue)){.totop{background:rgba(8,9,11,.85)}} /* ========================================================================== 20 MOTION – Reveals, Strang, Rail -------------------------------------------------------------------------- Der Inhalt wird freigelegt, nicht eingeschaltet. Text wird dabei nie zerlegt – die Sprachumschaltung tauscht ganze Textknoten aus und würde sonst mit der Animation kollidieren. ========================================================================== */ .reveal{ opacity:0;transform:translate3d(0,20px,0); transition:opacity var(--duration-slow) var(--ease-entry) var(--rv-d,0s), transform var(--duration-slow) var(--ease-entry) var(--rv-d,0s), -webkit-mask-size 1.05s var(--ease-entry) var(--rv-d,0s), mask-size 1.05s var(--ease-entry) var(--rv-d,0s), filter var(--duration-slow) var(--ease-entry) var(--rv-d,0s); } .reveal.show{opacity:1;transform:none;filter:none} [data-reveal="fade"]{transform:none;filter:blur(5px)} [data-reveal="rise"]{transform:translate3d(0,32px,0)} /* Maske: der Inhalt läuft hinter einer Kante hervor. Bewusst mit mask-size statt clip-path: ein beschnittenes Element meldet dem IntersectionObserver eine leere Schnittfläche und würde deshalb nie ausgelöst. Eine Maske ist ein reiner Malvorgang und stört die Messung nicht. Der Endwert liegt über 100 %, damit im Ruhezustand garantiert nichts an der Kante hängen bleibt. */ [data-reveal="mask"],[data-reveal="wipe"]{ -webkit-mask-image:linear-gradient(to bottom,#000 0 100%); mask-image:linear-gradient(to bottom,#000 0 100%); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:0 0;mask-position:0 0; -webkit-mask-size:100% 0%;mask-size:100% 0%; } [data-reveal="mask"]{transform:translate3d(0,14px,0)} [data-reveal="wipe"]{transform:none} [data-reveal="mask"].show,[data-reveal="wipe"].show{ -webkit-mask-size:100% 140%;mask-size:100% 140%; } [data-reveal="scale"]{transform:scale(.99) translate3d(0,14px,0)} [data-reveal="left"]{transform:translate3d(-22px,0,0)} [data-delay="1"]{--rv-d:.08s} [data-delay="2"]{--rv-d:.16s} [data-delay="3"]{--rv-d:.24s} [data-delay="4"]{--rv-d:.32s} /* Gestaffelte Gruppen: der Index kommt aus assets/motion.js */ [data-stagger]>*{--rv-d:calc(var(--i,0) * 90ms)} /* Seitenübergang (Progressive Enhancement) */ .page-fade{ position:fixed;inset:0;z-index:300;background:var(--void);pointer-events:none; opacity:0;transition:opacity 260ms var(--ease-smooth); } body.is-leaving .page-fade{opacity:1} /* Zeigerlicht: sehr ruhiges Licht folgt dem Mauszeiger über hochwertigen Flächen. Reines Zusatzlicht – ohne Zeiger (Touch) oder ohne JavaScript bleibt die Fläche unverändert, es geht nie Information verloren. */ .spotlight{position:relative;isolation:isolate} .spotlight>.spot{ position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit; opacity:0;transition:opacity var(--t-state); background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),var(--accent-glow),transparent 62%); } .spotlight:hover>.spot,.spotlight:focus-within>.spot{opacity:1} @media(hover:none){.spotlight>.spot{display:none}} /* Systemstrang: das gezeichnete Rückgrat der Seite. Liegt über den Flächen, damit es auch über hellen Szenen durchläuft – haarfein, im Seitenrand, ohne Zeigereingaben. */ .strang{position:fixed;top:0;left:0;height:100%;z-index:45;pointer-events:none;display:none} .strang.ist-an{display:block} /* Scroll-Fortschritt: eine haarfeine Linie am oberen Rand ----------------- */ .scroll-progress{ position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none; background:linear-gradient(to right,var(--accent),var(--accent-ink)); transform:scaleX(0);transform-origin:left; } /* Technische Eckwinkel – Zielmarken an hochwertigen Flächen ---------------- */ .brackets{position:relative} .brackets:before,.brackets:after{ content:"";position:absolute;width:14px;height:14px;pointer-events:none; border-color:var(--accent-line);opacity:0; transition:opacity var(--t-state); } .brackets:before{top:12px;left:12px;border-top:1px solid;border-left:1px solid} .brackets:after{bottom:12px;right:12px;border-bottom:1px solid;border-right:1px solid} .brackets:hover:before,.brackets:hover:after, .brackets:focus-within:before,.brackets:focus-within:after{opacity:1} /* ========================================================================== 16b STARTSEITE – Highlights, Modulsystem, Serverszene ========================================================================== */ /* --- Highlight-Karten: kontrolliertes Karussell --------------------------- Ohne JavaScript eine normale, horizontal scrollbare Kartenliste mit Scroll-Snap. Mit JavaScript kommen Knöpfe, Zähler und Fortschritt dazu. */ .hl{position:relative} .hl-controls{ display:flex;align-items:center;gap:var(--s-5); margin-bottom:var(--s-5); } .hl-count{ margin:0;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta); color:var(--ink-faint);white-space:nowrap; } .hl-count [data-hl-current]{color:var(--ink)} .hl-progress{flex:1 1 auto;height:1px;background:var(--line);position:relative;overflow:hidden} .hl-progress i{ position:absolute;left:0;top:0;height:100%;width:20%; background:linear-gradient(to right,var(--accent),var(--accent-ink)); transform:translateX(var(--hl-x,0%)); transition:transform var(--t-state),width var(--t-state); } .hl-buttons{display:inline-flex;gap:var(--s-2)} .hl-btn{ width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong); background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center; font-size:1.05rem;transition:border-color var(--t-hover),color var(--t-hover),background var(--t-hover); } .hl-btn:hover{border-color:var(--accent-line);color:var(--accent-ink);background:var(--accent-soft)} .hl-btn[disabled]{opacity:.3;cursor:default;background:transparent;color:var(--ink);border-color:var(--line)} .hl:not(.is-ready) .hl-controls{display:none} .hl-track{ list-style:none;margin:0; display:flex;gap:clamp(14px,1.6vw,22px); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); padding:4px var(--gutter) 22px; scrollbar-width:none; } .hl-track::-webkit-scrollbar{display:none} .hl-card{ flex:0 0 min(78vw,420px); scroll-snap-align:start; display:flex;flex-direction:column;gap:var(--s-3); min-height:380px; padding:clamp(24px,2.6vw,34px); border:1px solid var(--line);border-radius:var(--r-lg); background:linear-gradient(158deg,rgba(242,239,232,.03),transparent 60%),var(--surface-1); box-shadow:var(--rim); transition:border-color var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out); } .hl-card:hover{border-color:var(--line-strong);transform:translateY(-4px)} .hl-index{ display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-2); font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-faint); } .hl-index b{color:var(--accent-ink);font-weight:500} .hl-index i{width:18px;height:1px;background:var(--line-strong)} .hl-card h3{font-size:var(--fs-h3);font-weight:450;margin:0} .hl-card p{color:var(--ink-soft);margin:0;font-size:var(--fs-small);max-width:34ch} .hl-art{width:100%;height:auto;margin-top:auto;display:block;max-height:150px} .hl-card .textlink{margin-top:var(--s-2)} /* --- Leistungen: Ergebnis und Weiterleitung -------------------------------- */ .service-result{ margin:var(--s-5) 0 0!important;padding:var(--s-4) 0 0;border-top:1px solid var(--line); display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);align-items:baseline; max-width:52ch; } .service-result b{ font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta);text-transform:uppercase; color:var(--accent-ink);font-weight:600; } .service-result span{color:var(--ink-soft);font-size:var(--fs-small);line-height:1.6} .service .textlink{margin-top:var(--s-5)} @media(max-width:600px){.service-result{grid-template-columns:1fr}} /* --- Modulsystem: Module als ansteckbare Komponenten des Kerns -------------- */ .modulmap{ position:relative; border-right:1px solid var(--line);background:var(--surface-2); padding:clamp(18px,2vw,28px) clamp(14px,1.6vw,22px); display:grid;align-content:center; } .modulmap .tabs{ display:grid;grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr); grid-auto-rows:auto;gap:12px 0;align-items:center; border:0;background:transparent; } .modulmap .tab{ position:relative;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--surface-1);color:var(--ink-soft); padding:12px 14px;text-align:left;cursor:pointer; font-size:var(--fs-small);font-weight:450; transition:color var(--t-hover),border-color var(--t-state),background var(--t-state),transform var(--t-state); } .modulmap .tab:nth-child(1),.modulmap .tab:nth-child(2),.modulmap .tab:nth-child(3){grid-column:1} .modulmap .tab:nth-child(4),.modulmap .tab:nth-child(5),.modulmap .tab:nth-child(6){grid-column:3} .modulmap .tab:nth-child(1),.modulmap .tab:nth-child(4){grid-row:1} .modulmap .tab:nth-child(2),.modulmap .tab:nth-child(5){grid-row:2} .modulmap .tab:nth-child(3),.modulmap .tab:nth-child(6){grid-row:3} .modulmap .tab span{ display:block;font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.1em; text-transform:uppercase;color:var(--ink-faint);margin-top:4px; } /* Verbindung zum Kern: eine Leiterbahn, die beim Zeigen, Fokus oder in der Auswahl aufleuchtet – und am Ende einen Anschlusspunkt trägt. */ .modulmap .tab:after{ content:"";position:absolute;top:50%;height:1px;width:22px; background:var(--line-strong);transition:background var(--t-state),box-shadow var(--t-state); } .modulmap .tab:before{ content:"";position:absolute;top:calc(50% - 3px);width:6px;height:6px;border-radius:1px; background:var(--surface-2);border:1px solid var(--line-strong); transition:background var(--t-state),border-color var(--t-state),box-shadow var(--t-state); } .modulmap .tab:nth-child(-n+3):after{left:100%} .modulmap .tab:nth-child(-n+3):before{left:calc(100% + 20px)} .modulmap .tab:nth-child(n+4):after{right:100%} .modulmap .tab:nth-child(n+4):before{right:calc(100% + 20px)} .modulmap .tab:hover,.modulmap .tab:focus-visible{color:var(--ink);border-color:var(--line-strong);transform:translateY(-1px)} .modulmap .tab:hover:after,.modulmap .tab:focus-visible:after,.modulmap .tab[aria-selected="true"]:after{ background:var(--accent-ink);box-shadow:0 0 8px var(--accent-glow); } .modulmap .tab:hover:before,.modulmap .tab:focus-visible:before,.modulmap .tab[aria-selected="true"]:before{ background:var(--accent-ink);border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-glow); } .modulmap .tab[aria-selected="true"]{color:var(--ink);border-color:var(--accent-line);background:var(--accent-soft);padding:12px 14px} .modulmap .tab[aria-selected="true"] span{color:var(--accent-ink)} .modulcore{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:104px;height:104px;border-radius:var(--r-md); display:grid;place-items:center;align-content:center;gap:2px;text-align:center; background:linear-gradient(135deg,#1b272c,#0a1013 70%); box-shadow:inset 0 0 0 1px rgba(242,239,232,.16),inset 1px 1px 0 rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.5),0 0 0 6px var(--surface-2); z-index:1;pointer-events:none; } .modulcore-mark{width:30px;height:30px;display:grid;place-items:center} .modulcore-mark svg{width:28px;height:28px;fill:var(--ink);stroke:var(--ink)} .modulcore-mark .brand-bar{fill:var(--accent-ink);stroke:none} .modulcore b{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--ink);font-weight:600} .modulcore span{font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);line-height:1.2;padding:0 6px} .modulmap .konsole-status{display:none} /* --- Serverszene ------------------------------------------------------------ */ .serverscene{ display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,4vw,64px);align-items:center; border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(28px,3.6vw,54px); background:linear-gradient(152deg,rgba(242,239,232,.026),transparent 58%),var(--surface-1); box-shadow:var(--sh-2),var(--rim); } .serverscene-art{ position:relative;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; background:var(--paper);aspect-ratio:520/360; } .serverscene-art svg{position:absolute;inset:0;width:100%;height:100%} .serverscene-art:after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 60% 60% at 76% 30%,rgba(98,217,227,.10),transparent 70%); } .s-etch{fill:rgba(242,239,232,.42);font-family:var(--mono);font-size:8px;letter-spacing:1.6px} .s-etch--accent{fill:#fff} .s-lock rect,.s-lock path{fill:none;stroke:var(--accent-ink);stroke-width:1} .s-badge rect{fill:rgba(242,239,232,.04);stroke:rgba(242,239,232,.22);stroke-width:.8} .serverscene-body h2{font-size:var(--fs-h3);font-weight:450;margin:0 0 var(--s-4);max-width:22ch} .serverscene-body>p{color:var(--ink-soft);margin:0 0 var(--s-3)} .serverscene-list{ list-style:none;margin:var(--s-6) 0 0;padding:var(--s-5) 0 0;border-top:1px solid var(--line); display:grid;gap:var(--s-3); } .serverscene-list li{display:grid;gap:2px;padding-left:20px;position:relative;font-size:var(--fs-small)} .serverscene-list li:before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--accent-line)} .serverscene-list b{color:var(--ink);font-weight:500} .serverscene-list span{color:var(--ink-faint);line-height:1.55} .serverscene-preis{ margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line); display:flex;align-items:center;gap:var(--s-3) var(--s-5);flex-wrap:wrap; } .serverscene-preis b{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:400;letter-spacing:var(--tr-display);line-height:1;color:var(--preis)} .serverscene-preis span{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)} .serverscene-preis .btn{margin-left:auto} /* --- Über uns: Profilkarte mit Kennung --------------------------------------- */ .person-meta{ margin:0 0 var(--s-3);font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:var(--tr-meta); text-transform:uppercase;color:var(--ink-faint); } /* --- Kontakt: Kleinigkeiten ohne Inline-Stile -------------------------------- */ .panel-lead{color:var(--ink-soft)} .field-optional{font-weight:400;color:var(--ink-faint);text-transform:none;letter-spacing:0} @media(max-width:1080px){ .modulmap{border-right:0;border-bottom:1px solid var(--line)} .serverscene{grid-template-columns:1fr} .serverscene-art{max-width:560px} } @media(max-width:760px){ .modulmap .tabs{grid-template-columns:1fr;gap:8px} .modulmap .tab{grid-column:auto!important;grid-row:auto!important} .modulmap .tab:before,.modulmap .tab:after{display:none} .modulcore{display:none} .hl-card{min-height:0} .serverscene-preis .btn{margin-left:0;width:100%} } /* ========================================================================== 17 MODULSEITE ========================================================================== */ .modul-hero{ padding:clamp(56px,8vw,110px) 0 0;position:relative;overflow:hidden; border-bottom:1px solid var(--line); } .modul-hero:before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(ellipse 50% 60% at 78% 10%,rgba(79,195,206,.10),transparent 70%), linear-gradient(to bottom,rgba(242,243,241,.03),transparent 60%); } .modul-hero h1{ font-size:var(--fs-h1);font-weight:400;line-height:var(--lh-display); letter-spacing:var(--tr-display);margin:var(--s-5) 0 var(--s-5);max-width:15ch; } /* Dieselbe Auszeichnung wie im Hero der Startseite: die Zeile bleibt in Textfarbe und bekommt den Akzent als Unterstrich – ein Bild, eine Regel. */ .modul-hero h1 em{ font-style:normal;color:var(--ink);display:inline-block;position:relative;padding-bottom:.1em; } .modul-hero h1 em:after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:1px; background:linear-gradient(to right,var(--accent-ink),transparent); transform:scaleX(0);transform-origin:left; animation:ruleIn var(--duration-cine) var(--ease-out) .5s forwards; } .modul-hero .lead{max-width:56ch} .modul-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(24px,4vw,64px);align-items:center} .modul-hero-grid .sys--calm{max-width:440px;opacity:1} .modul-hero .hero-actions{margin-bottom:clamp(40px,6vw,72px)} .zahlband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line); border-top:1px solid var(--line)} .zahl{background:var(--paper);padding:24px 22px} .zahl b{display:block;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.04em;color:var(--ink); line-height:1;font-weight:450;font-variant-numeric:tabular-nums} .zahl span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-faint);margin-top:10px;line-height:1.6} /* Kennzahlen-Leiste auf der Startseite: dieselbe Zahlband-Komponente, als eigener schmaler Abschnitt zwischen Hero und Leistungen. */ .kennzahlen{padding:0;border-bottom:1px solid var(--line)} .kennzahlen .zahlband{border-top:0} .modul-section{padding:clamp(60px,8vw,110px) 0} .modul-section.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* Erklärkarten (Modulseite, Domain, Über uns) */ .erklaer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)} .erklaer-vier{grid-template-columns:repeat(4,minmax(0,1fr))} .erklaer-zwei{grid-template-columns:repeat(2,minmax(0,1fr))} .erklaer-karte{ padding:clamp(24px,3vw,36px) clamp(18px,2.2vw,30px); border-right:1px solid var(--line);border-bottom:1px solid var(--line); transition:background var(--duration-slow) var(--ease-out); } .erklaer-karte:last-child{border-right:0} .erklaer-karte:hover{background:rgba(242,243,241,.025)} .erklaer-nr{ font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--accent-ink); margin-bottom:18px;display:block; } .erklaer-karte h3{font-size:1.15rem;font-weight:500;margin:0 0 10px} .erklaer-karte p{color:var(--ink-soft);margin:0;font-size:.93rem;line-height:1.7} /* Steuerleiste */ .steuerung{ position:sticky;top:var(--nav-h);z-index:20;padding:18px 0 16px;margin-bottom:26px; background:var(--panel);border-bottom:1px solid var(--line); } .modul-section:not(.alt) .steuerung{background:var(--paper)} .suchzeile{display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap} .suchfeld{position:relative;flex:1 1 280px} .suchfeld input{ width:100%;border:1px solid var(--line);background:var(--paper);color:var(--ink); padding:13px 16px 13px 42px;border-radius:var(--radius-sm);outline:none; transition:border-color var(--duration-medium) var(--ease-out); } .suchfeld input::placeholder{color:var(--ink-faint)} .suchfeld input:focus{border-color:var(--accent-line)} .suchfeld:before{content:"⌕";position:absolute;left:15px;top:50%;transform:translateY(-54%); color:var(--ink-faint);font-size:1.25rem} .treffer{color:var(--ink-faint);font-size:.72rem;letter-spacing:.1em;white-space:nowrap; text-transform:uppercase} .chipbar{display:flex;flex-wrap:wrap;gap:8px} .chip{ display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:transparent; color:var(--ink-soft);border-radius:999px;padding:9px 16px;font-size:.8rem;cursor:pointer; transition:border-color var(--duration-medium) var(--ease-out),color var(--duration-medium) var(--ease-out), background var(--duration-medium) var(--ease-out); } .chip:hover{border-color:var(--accent-line);color:var(--ink)} .chip-n{font-family:var(--mono);font-size:.7rem;opacity:.92} .chip[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)} /* Katalog */ .modul-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start} .modulgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .modul{ background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:26px;display:flex;flex-direction:column;position:relative; transition:border-color var(--duration-medium) var(--ease-out), transform var(--duration-medium) var(--ease-out), background var(--duration-medium) var(--ease-out); } .modul-section:not(.alt) .modul{background:var(--panel)} .modul:hover{border-color:var(--line-strong);transform:translateY(-2px)} .modul.gewaehlt{border-color:var(--accent-ink);background:var(--accent-soft)} .modul-badge{ position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:.6rem;text-transform:uppercase; letter-spacing:.14em;color:var(--warm);border:1px solid var(--warm);border-radius:999px;padding:4px 10px; } .modul-kat{color:var(--ink-faint);margin:0 0 10px} .modul h3{font-size:1.14rem;font-weight:500;margin:0 0 10px;line-height:1.35;padding-right:96px} .modul-kurz{color:var(--ink-soft);margin:0;font-size:.91rem;line-height:1.65} .modul-punkte{list-style:none;padding:0;margin:16px 0 20px;display:grid;gap:8px;font-size:.85rem; color:var(--ink-soft)} .modul-punkte li{padding-left:18px;position:relative} .modul-punkte li:before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px; background:var(--accent-line)} .modul-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px; padding-top:18px;border-top:1px solid var(--line)} .modul-preis b{display:block;font-size:1.6rem;letter-spacing:var(--tr-display);line-height:1; font-weight:400;color:var(--preis)} .modul-preis b span{font-family:var(--mono);font-size:.66rem;color:var(--ink-faint);letter-spacing:.1em} .modul-preis small{display:block;font-family:var(--mono);color:var(--ink-faint);font-size:.66rem; letter-spacing:.1em;text-transform:uppercase;margin-top:7px} .modul-aktionen{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end} .modul-btn{ border:1px solid var(--accent-line);background:transparent;color:var(--accent-ink);border-radius:999px; padding:9px 16px;font-size:.8rem;cursor:pointer;white-space:nowrap; transition:background var(--duration-medium) var(--ease-out),color var(--duration-medium) var(--ease-out); } .modul-btn:hover{background:var(--accent-soft)} .modul-btn.an{background:var(--accent);border-color:var(--accent);color:#fff} .demo-btn,.anleitung-btn{ border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:999px; padding:9px 15px;font-size:.8rem;cursor:pointer;white-space:nowrap; transition:border-color var(--duration-medium),color var(--duration-medium); } .demo-btn:hover,.anleitung-btn:hover{border-color:var(--accent-line);color:var(--accent-ink)} .modul-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-faint); margin:14px 0 0} .leer{color:var(--ink-soft);padding:44px 26px;border:1px dashed var(--line);border-radius:var(--radius); grid-column:1/-1} /* Kostenschätzung */ .rechner{ position:sticky;top:calc(var(--nav-h) + 20px);border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px;background:var(--paper);box-shadow:var(--shadow); } .modul-section:not(.alt) .rechner{background:var(--panel)} .rechner-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .rechner h3{font-size:1.4rem;font-weight:450;margin:2px 0 0} .rechner-zahl{font-family:var(--mono);font-size:.7rem;color:#fff;background:var(--accent); border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;padding:0 8px} .rechner-zahl:empty{display:none} .rechner-leer{color:var(--ink-faint);font-size:.88rem;margin:16px 0 20px} .rechner-liste{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px;font-size:.85rem; max-height:250px;overflow-y:auto} .rechner-liste li{display:flex;justify-content:space-between;gap:12px;padding-bottom:9px; border-bottom:1px solid var(--line-soft);color:var(--ink-soft)} .rechner-liste li span:last-child{color:var(--accent-ink);white-space:nowrap} .rechner-summe{margin:18px 0 16px;padding-top:16px;border-top:1px solid var(--line)} .rechner-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .rechner-zeile>span:first-child{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-faint)} .rechner-zeile b{font-size:1.8rem;letter-spacing:-.04em;color:var(--ink);font-weight:450} .rechner-zeile.klein{margin-top:8px;font-size:.85rem;color:var(--ink-soft)} .vergleich{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px; background:var(--panel-soft);font-size:.83rem} .vergleich b{display:block;font-family:var(--mono);color:var(--accent-ink);font-size:.66rem; text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px} .vgl-zeile{display:flex;justify-content:space-between;gap:12px;color:var(--ink-soft);padding:3px 0} .vgl-zeile span:last-child{white-space:nowrap;color:var(--ink)} .vergleich p{color:var(--ink-faint);margin:10px 0 0;font-size:.77rem;line-height:1.55} .rechner .btn{width:100%} .rechner-leeren{width:100%;background:none;border:0;color:var(--ink-faint);cursor:pointer; padding:12px 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase} .rechner-leeren:hover{color:var(--accent-ink)} .rechner-note{font-size:.75rem;color:var(--ink-faint);margin-top:14px;line-height:1.6} /* Mietmodell */ .modell-zeile{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px} .modell-schalter{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px} .modell-btn{border:0;background:transparent;color:var(--ink-faint);border-radius:999px;padding:9px 22px; font-size:.85rem;cursor:pointer;transition:background var(--duration-medium),color var(--duration-medium)} .modell-btn:hover{color:var(--ink)} .modell-btn[aria-pressed="true"]{background:var(--accent);color:#fff} .modell-hinweis{margin:0;font-size:.83rem;color:var(--ink-faint)} .modell-hinweis b{color:var(--warm)} .nur-miete{display:none} body[data-modell="miete"] .nur-kauf{display:none} body[data-modell="miete"] .nur-miete{display:inline} .modelle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start} .modell-karte{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(24px,3vw,36px)} .modul-section:not(.alt) .modell-karte{background:var(--panel)} .modell-karte.hervor{border-color:var(--accent-line);background:var(--panel-raised)} .modell-label{color:var(--accent-ink);margin:0} .modell-karte h3{font-size:1.5rem;font-weight:450;margin:12px 0 4px} .modell-preis{margin:16px 0 18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .modell-preis b{font-size:2.2rem;font-weight:450;letter-spacing:-.04em;color:var(--ink)} .modell-preis span{color:var(--ink-faint);font-size:.85rem} .modell-karte>p{color:var(--ink-soft)} .modell-karte .checklist{margin:20px 0} .modell-fuer{background:var(--accent-soft);border-radius:var(--radius-sm);padding:14px 16px; font-size:.88rem;color:var(--ink-soft);margin:0} .modell-fuer b{color:var(--accent-ink);font-weight:500} .wechsel{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px} .wechsel b{color:var(--accent-ink);font-weight:500} .wechsel p{margin:8px 0 0;color:var(--ink-soft);font-size:.93rem} .laufzeit-box{border:1px solid var(--warm);background:var(--warm-soft);border-radius:var(--radius-sm); padding:14px 16px;margin-bottom:14px} .laufzeit-box b{display:block;color:var(--warm);font-size:.88rem;margin-bottom:5px} .laufzeit-box span{display:block;color:var(--ink-soft);font-size:.78rem;line-height:1.55} .laufzeit-marker{display:inline-block;background:var(--warm-soft);color:var(--warm); border:1px solid var(--warm);border-radius:999px;padding:5px 14px;font-size:.78rem;margin:0 0 14px} .laufzeit-marker.frei{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)} .modul-meta .laufzeit{color:var(--warm)} /* Sichtbarkeit & Server (Modulseite) */ .sicht-erklaer,.sicht-ehrlich{ border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.6vw,30px); color:var(--ink-soft);margin-bottom:22px;background:var(--paper); } .modul-section:not(.alt) .sicht-erklaer,.modul-section:not(.alt) .sicht-ehrlich{background:var(--panel)} .sicht-ehrlich{border-color:var(--warm);background:var(--warm-soft);margin:26px 0 0} .sicht-erklaer p:last-child,.sicht-ehrlich p:last-child{margin-bottom:0} .sicht-ehrlich b{color:var(--warm);font-weight:500} .sicht-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)} .sicht-karte{padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,26px);border-right:1px solid var(--line); border-bottom:1px solid var(--line)} .sicht-karte:last-child{border-right:0} .sicht-karte h3{font-size:1.05rem;font-weight:500;margin:0 0 10px} .sicht-karte p{color:var(--ink-soft);margin:0;font-size:.9rem;line-height:1.65} .sicht-angebot{ display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(24px,4vw,52px); align-items:center;border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(26px,3.4vw,44px);margin-top:28px;background:var(--paper); } .modul-section:not(.alt) .sicht-angebot{background:var(--panel)} .sicht-angebot h3{font-size:clamp(1.35rem,2.4vw,2rem);font-weight:450;margin:0 0 14px} .sicht-preis{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,36px)} .sicht-betrag{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:450;letter-spacing:-.045em;margin:0; line-height:1} .sicht-zusatz{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-faint);margin:10px 0 18px} .sicht-note{font-size:.8rem;color:var(--ink-faint);margin:14px 0 0;line-height:1.6} /* Ablauf (Modulseite) */ .ablauf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)} .ablauf-schritt{padding:clamp(22px,3vw,34px) clamp(18px,2.2vw,30px);border-right:1px solid var(--line); border-bottom:1px solid var(--line)} .ablauf-schritt:last-child{border-right:0} .ablauf-nr{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--accent-ink); line-height:1;display:block;margin-bottom:16px} .ablauf-schritt h3{font-size:1.12rem;font-weight:500;margin:0 0 9px} .ablauf-schritt p{color:var(--ink-soft);margin:0;font-size:.93rem} /* Begriffe & FAQ */ .begriffe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)} .begriff{padding:22px 26px 22px 0;border-bottom:1px solid var(--line)} .begriff:nth-child(odd){border-right:1px solid var(--line);padding-right:26px} .begriff:nth-child(even){padding-left:26px} .begriff dt{color:var(--accent-ink);margin-bottom:7px;font-weight:500} .begriff dd{margin:0;color:var(--ink-soft);font-size:.92rem} .faq{display:grid;max-width:900px;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line);padding:22px 0} .faq summary{cursor:pointer;font-weight:450;list-style:none;display:flex;justify-content:space-between; gap:16px;font-size:1.02rem;transition:color var(--duration-fast)} .faq summary::-webkit-details-marker{display:none} .faq summary:after{content:"+";color:var(--accent-ink);font-size:1.3rem;line-height:1;flex:0 0 auto} .faq summary:hover{color:var(--accent-ink)} .faq details[open] summary{color:var(--accent-ink)} .faq details[open] summary:after{content:"–"} .faq details p{color:var(--ink-soft);margin:14px 0 0;max-width:72ch;font-size:.94rem} /* Abschluss-CTA */ .modul-cta{ display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,44px); align-items:center;border:1px solid var(--accent-line);border-radius:var(--radius-lg); padding:clamp(28px,4vw,52px); background:linear-gradient(140deg,rgba(14,111,122,.22),rgba(14,111,122,.04) 60%),var(--panel); position:relative;overflow:hidden; } .modul-cta:before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 50% 70% at 90% 10%,rgba(79,195,206,.14),transparent 70%); } .modul-cta>*{position:relative} .modul-cta .kicker{color:var(--accent-ink)} .modul-cta h2{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:450;line-height:1.1;margin:0 0 14px} .modul-cta p{color:var(--ink-soft);margin:0} .modul-cta .hero-actions{margin-top:0} /* ========================================================================== 18 DEMOSEITE / ANLEITUNG / RECHTSTEXTE ========================================================================== */ .demo-seite{padding:clamp(38px,5vw,64px) 0 clamp(60px,8vw,100px)} .demo-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap; margin-bottom:30px} .demo-kopf h1{font-size:var(--fs-h2);font-weight:450;letter-spacing:var(--tr-head);line-height:var(--lh-head); margin:6px 0 10px} .demo-untertitel{color:var(--ink-soft);margin:0;max-width:62ch;font-size:.96rem} .demo-preisbox{display:flex;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--radius-sm);overflow:hidden} .demo-preisbox[hidden]{display:none} .demo-preisbox div{background:var(--panel);padding:12px 18px;text-align:center} .demo-preisbox b{display:block;font-size:1.25rem;color:var(--ink);font-weight:450} .demo-preisbox span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-faint);margin-top:4px;white-space:nowrap} .demo-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start} .demo-liste{position:sticky;top:calc(var(--nav-h) + 20px);background:var(--panel); border:1px solid var(--line);border-radius:var(--radius);padding:14px; max-height:calc(100vh - 130px);overflow-y:auto} .demo-buehne{min-width:0} .demo-suche input{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:var(--radius-sm); padding:11px 14px;outline:none;font-size:.88rem;margin-bottom:10px;color:var(--ink)} .demo-suche input::placeholder{color:var(--ink-faint)} .demo-suche input:focus{border-color:var(--accent-line)} .demo-gruppe{color:var(--ink-faint);margin:16px 0 6px;padding:0 6px} .demo-eintrag{display:block;width:100%;text-align:left;border:0;background:none; border-radius:var(--radius-sm);padding:10px;cursor:pointer; transition:background var(--duration-fast) var(--ease-smooth)} .demo-eintrag:hover{background:rgba(242,243,241,.05)} .demo-eintrag b{display:block;font-size:.87rem;font-weight:450;color:var(--ink)} .demo-eintrag span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em; color:var(--ink-faint);margin-top:2px} .demo-eintrag[aria-current="true"]{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent-ink)} .demo-eintrag[aria-current="true"] b{color:var(--ink)} .demo-eintrag[aria-current="true"] span{color:var(--accent-ink)} .demo-leer{font-size:.86rem;color:var(--ink-faint);padding:14px 8px} .demo-fenster{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)} .demo-fenster.gross{box-shadow:var(--shadow)} .demo-leiste{display:flex;align-items:center;gap:7px;padding:0 16px;height:42px; background:var(--panel-soft);border-bottom:1px solid var(--line); font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)} .demo-leiste i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);display:block} .demo-leiste i:first-child{background:var(--accent-ink)} .demo-leiste span{margin-left:12px} .demo-inhalt{padding:18px} .demo-app{padding:20px} .demo-app-kopf{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap; margin-bottom:18px} .demo-app-suche{flex:1 1 220px} .demo-app-suche input{width:100%;border:1px solid var(--line);background:var(--paper); border-radius:var(--radius-sm);padding:9px 13px;font-size:.85rem;outline:none;color:var(--ink)} .demo-app-suche input:focus{border-color:var(--accent-line)} .demo-app-knoepfe{display:flex;gap:7px;flex-wrap:wrap} .demo-app-btn{border:1px solid var(--line);background:transparent;color:var(--ink-soft); border-radius:var(--radius-sm);padding:9px 15px;font-size:.82rem;cursor:pointer; transition:border-color var(--duration-medium),color var(--duration-medium)} .demo-app-btn:hover{border-color:var(--accent-line);color:var(--accent-ink)} .demo-app-btn.haupt{background:var(--accent);border-color:var(--accent);color:#fff} .demo-app-btn.haupt:hover{background:var(--accent-dark);color:#fff} .demo-app-kennzahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm); overflow:hidden;margin-bottom:18px} .demo-kpi{background:var(--panel-soft);padding:15px 17px} .demo-kpi b{display:block;font-size:1.4rem;color:var(--ink);line-height:1.1;font-weight:450; letter-spacing:-.03em} .demo-kpi span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-faint);margin-top:5px} .demo-tabelle{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line); border-radius:var(--radius-sm);overflow:hidden} .demo-zeile{display:grid;grid-template-columns:1.5fr 1fr .8fr;gap:12px;padding:13px 16px; background:var(--panel-soft);font-size:.88rem;cursor:pointer;color:var(--ink-soft); transition:background var(--duration-fast) var(--ease-smooth)} .demo-zeile:hover{background:var(--panel-raised)} .demo-zeile.gewaehlt{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent-ink)} .demo-titelzeile{background:var(--panel);padding:9px 16px;font-family:var(--mono);font-size:.66rem; text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);cursor:default} .demo-titelzeile:hover{background:var(--panel)} .demo-status{color:var(--accent-ink);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em; text-transform:uppercase} .demo-fussnote{margin:16px 0 0;font-size:.74rem;color:var(--ink-faint);text-align:center} .demo-tipp{margin:14px 0 0;padding:12px 15px;border-radius:var(--radius-sm);background:var(--warm-soft); border:1px solid var(--warm);font-size:.83rem;color:var(--ink-soft)} .demo-punkte{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)} .demo-punkte b{display:block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase; letter-spacing:.14em;color:var(--accent-ink);margin-bottom:10px} .demo-punkte ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--ink-soft);font-size:.89rem} .demo-aktionen{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px} .demo-aktionen[hidden]{display:none} .demo-erklaerung{margin-top:18px;padding:18px 20px;border:1px solid var(--line); border-radius:var(--radius-sm);background:var(--panel);font-size:.9rem} .demo-erklaerung b{color:var(--accent-ink);display:block;margin-bottom:8px;font-weight:500} .demo-erklaerung p{margin:0;color:var(--ink-soft)} .demo-hinweis-probe{background:var(--accent-soft);border:1px solid var(--accent-line); border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:18px;font-size:.86rem; color:var(--ink-soft);line-height:1.6} .demo-hinweis-probe b{color:var(--accent-ink);font-weight:500} .demo-app-btn.laeuft{background:var(--rot);border-color:var(--rot);color:#fff;animation:kiapuls 1.4s infinite} .demo-zaehler{margin:0 0 10px;font-size:.68rem;color:var(--ink-faint);text-transform:uppercase; letter-spacing:.14em} .demo-sort{border:0;background:none;color:inherit;font:inherit;text-transform:inherit; letter-spacing:inherit;cursor:pointer;padding:0;text-align:left} .demo-sort:hover{color:var(--accent-ink)} .demo-keine{padding:24px;text-align:center;color:var(--ink-faint);font-size:.88rem; border:1px dashed var(--line);border-radius:var(--radius-sm)} .demo-neu{background:var(--panel);border:1px solid var(--accent-line);border-radius:var(--radius-sm); padding:18px 20px;margin-bottom:18px} .demo-neu[hidden]{display:none} .demo-neu-titel{margin:0 0 14px;font-family:var(--mono);font-size:.66rem;text-transform:uppercase; letter-spacing:.14em;color:var(--accent-ink)} .demo-neu-felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px} .demo-neu label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-faint)} .demo-neu input,.demo-neu select{width:100%;margin-top:6px;border:1px solid var(--line); background:var(--paper);border-radius:var(--radius-sm);padding:10px 12px;font-size:.88rem; color:var(--ink);outline:none} .demo-neu input:focus,.demo-neu select:focus{border-color:var(--accent-line)} .demo-neu-knoepfe{display:flex;gap:8px;flex-wrap:wrap} .demo-detail{margin-top:12px;background:var(--panel);border:1px solid var(--accent-line); border-radius:var(--radius-sm);padding:16px 18px} .demo-detail[hidden]{display:none} .demo-detail-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px} .demo-detail-kopf b{font-size:1rem;font-weight:500} .demo-detail-zu{border:0;background:none;color:var(--ink-faint);font-size:1.2rem;cursor:pointer; line-height:1;padding:0 4px} .demo-detail-zu:hover{color:var(--accent-ink)} .demo-detail-zeile{margin:10px 0 14px;font-size:.85rem;color:var(--ink-faint);display:flex;gap:18px; flex-wrap:wrap} .demo-detail-zeile b{color:var(--ink);font-weight:450} .demo-detail-aktionen{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .demo-detail-titel{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-faint);margin-right:2px} .demo-chip{border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:999px; padding:6px 13px;font-size:.79rem;cursor:pointer;transition:border-color var(--duration-medium)} .demo-chip:hover{border-color:var(--accent-line);color:var(--accent-ink)} .demo-chip.an{background:var(--accent);border-color:var(--accent);color:#fff} .demo-loeschen{margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--rot); border-radius:999px;padding:6px 14px;font-size:.79rem;cursor:pointer} .demo-loeschen:hover{border-color:var(--rot)} /* Beispielansicht-Dialog (Modulseite) */ .demo-dialog,.angebot-dialog,.priv-dialog{ border:1px solid var(--line);padding:0;border-radius:var(--radius-lg); background:var(--panel);box-shadow:var(--shadow-lg);color:var(--ink); } .demo-dialog{max-width:780px;width:calc(100% - 32px)} .angebot-dialog{max-width:640px;width:calc(100% - 32px)} .priv-dialog{max-width:640px;width:calc(100% - 32px)} .demo-dialog::backdrop,.angebot-dialog::backdrop,.priv-dialog::backdrop{ background:rgba(8,10,11,.72);backdrop-filter:blur(4px); } .demo-dialog-kopf,.priv-dialog-kopf{display:flex;justify-content:space-between;align-items:flex-start; gap:16px;padding:24px 26px 20px;border-bottom:1px solid var(--line)} .demo-dialog-kopf h3,.priv-dialog-kopf h3{margin:6px 0 4px;font-size:1.3rem;font-weight:450} .demo-dialog-kopf p{margin:0;color:var(--ink-faint);font-size:.88rem} .demo-schliessen{border:1px solid var(--line);background:transparent;border-radius:var(--radius-sm); width:36px;height:36px;cursor:pointer;font-size:1.1rem;color:var(--ink-faint);flex:0 0 auto} .demo-schliessen:hover{border-color:var(--accent-line);color:var(--accent-ink)} .demo-body{padding:24px 26px} .demo-fuss{padding:0 26px 24px;display:flex;gap:10px;flex-wrap:wrap} /* Schaubilder (Anleitungen) */ .bild{width:100%;height:auto;display:block} .bild .b-flaeche{fill:var(--panel);stroke:var(--line-strong);stroke-width:1.2} .bild .b-flaeche.stark{fill:var(--panel-soft);stroke:var(--line-strong)} .bild .b-kopf{fill:var(--accent-soft);stroke:none} .bild .b-punkt{fill:rgba(242,243,241,.25)} .bild .b-punkt.an{fill:var(--accent-ink)} .bild .b-feld,.bild .b-zeile{fill:var(--paper);stroke:var(--line-strong);stroke-width:1} .bild .b-zeile.an{fill:var(--accent-soft);stroke:var(--accent-ink);stroke-width:1.3} .bild .b-linie{fill:rgba(242,243,241,.22)} .bild .b-linie.stark{fill:rgba(242,243,241,.42)} .bild .b-linie.akzent{fill:var(--accent-ink)} .bild .b-knopf{fill:var(--accent)} .bild .b-strich{stroke:rgba(242,243,241,.42);stroke-width:2.2;stroke-linecap:round;fill:none} .bild .b-strich.lang{stroke-width:1.6} .bild .b-strich.akzent{stroke:var(--accent-ink);stroke-dasharray:6 5} .bild .b-kurve{stroke:var(--accent-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none} .bild .b-ring{fill:none;stroke:var(--accent-ink);stroke-width:1.4;opacity:.4} .bild .b-haken{stroke:var(--paper);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none} /* Anleitungsseite */ .anl-block{display:grid;gap:16px;margin-bottom:16px} .anl-eignung{grid-template-columns:repeat(2,minmax(0,1fr))} .anl-passt,.anl-passt-nicht{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px; background:var(--panel)} .anl-passt{border-color:var(--gruen)} .anl-passt-nicht{border-color:var(--warm)} .anl-passt b{color:var(--gruen)} .anl-passt-nicht b{color:var(--warm)} .anl-passt b,.anl-passt-nicht b{display:block;font-size:.96rem;margin-bottom:10px;font-weight:500} .anl-passt ul,.anl-passt-nicht ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--ink-soft); font-size:.91rem;line-height:1.55} .anl-rechnet{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--radius); padding:20px 24px;margin-bottom:26px} .anl-rechnet b{display:block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase; letter-spacing:.14em;color:var(--accent-ink);margin-bottom:8px} .anl-rechnet p{margin:0;font-size:1rem;color:var(--ink-soft)} .anl-ueberschrift{font-size:var(--fs-h3);font-weight:450;letter-spacing:var(--tr-head);margin:0 0 18px} .anl-schritte{display:grid;gap:14px;margin-bottom:26px} .anl-schritt{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:center; background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px} .anl-bild{background:var(--paper);border-radius:var(--radius-sm);padding:8px} .anl-nr{display:inline-block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase; letter-spacing:.16em;color:var(--accent-ink);border:1px solid var(--accent-line);border-radius:999px; padding:4px 12px} .anl-schritt-text h3{font-size:1.1rem;margin:12px 0 8px;line-height:1.35;font-weight:500} .anl-schritt-text p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.6} .anl-tipp{border-left:1px solid var(--accent-line);background:var(--panel);border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px;margin-bottom:22px} .anl-tipp b{display:block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase; letter-spacing:.14em;color:var(--accent-ink);margin-bottom:8px} .anl-tipp p{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.6} .anl-fakten{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:22px} .anl-fakten div{background:var(--panel);padding:16px 18px} .anl-fakten b{display:block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase; letter-spacing:.12em;color:var(--ink-faint);margin-bottom:6px} .anl-fakten span{display:block;font-size:.9rem;color:var(--ink)} /* Rechtstexte */ .legal{padding:clamp(48px,7vw,90px) 0 clamp(64px,9vw,110px)} .legal h1{ font-size:clamp(1.7rem,4.6vw,3.4rem);font-weight:450;letter-spacing:var(--tr-head); line-height:var(--lh-head);margin:14px 0 32px; } .legal h1,.legal-body h2,.legal-body h3{hyphens:auto;-webkit-hyphens:auto} .legal-body a{overflow-wrap:anywhere} .legal-body{max-width:78ch} .legal-body h2{font-size:1.2rem;margin:44px 0 12px;color:var(--ink);font-weight:500} .legal-body h3{font-size:1rem;margin:26px 0 8px;font-weight:500} .legal-body p,.legal-body li{color:var(--ink-soft)} .legal-body ul{padding-left:20px;display:grid;gap:7px} .legal-body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px} .legal-body address{font-style:normal;line-height:1.9;margin:8px 0} .todo{background:var(--warm-soft);border:1px dashed var(--warm);color:var(--warm);border-radius:4px; padding:1px 8px;font-size:.92em} .hinweis{border:1px solid var(--warm);background:var(--warm-soft);border-radius:var(--radius); padding:20px 24px;margin:0 0 32px} .hinweis p{margin:6px 0 0;color:var(--ink-soft);font-size:.91rem} .toc{border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;background:var(--panel); margin-bottom:24px} .toc ol{margin:8px 0 0;padding-left:20px;display:grid;gap:6px} .toc a{color:var(--accent-ink)} /* Domainprüfung */ .dom-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px} .dom-box-schlank{border-radius:var(--radius);padding:20px;margin-top:20px;background:var(--panel-soft)} .dom-form{display:flex;gap:10px;flex-wrap:wrap} .dom-feld{flex:1 1 220px;min-width:0} .dom-feld input{width:100%;border:1px solid var(--line);background:var(--paper);color:var(--ink); padding:14px 16px;border-radius:var(--radius-sm);outline:none;font-size:.98rem; transition:border-color var(--duration-medium)} .dom-feld input:focus{border-color:var(--accent-line)} .dom-feld input::placeholder{color:var(--ink-faint)} .dom-knopf{flex:0 0 auto;white-space:nowrap} .dom-hinweis{margin:12px 0 0;font-size:.77rem;color:var(--ink-faint)} .dom-ergebnis{display:none;margin-top:16px;padding:16px 18px;border-radius:var(--radius-sm); border:1px solid var(--line)} .dom-ergebnis.an{display:block} .dom-ergebnis b{display:block;font-size:1rem;margin-bottom:5px;font-weight:500} .dom-ergebnis span{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.55} .dom-frei{border-color:var(--gruen);background:rgba(75,189,131,.10)} .dom-frei b{color:var(--gruen)} .dom-vergeben{border-color:var(--rot);background:rgba(226,105,92,.10)} .dom-vergeben b{color:var(--rot)} .dom-unklar,.dom-fehler{border-color:var(--warm);background:var(--warm-soft)} .dom-unklar b,.dom-fehler b{color:var(--warm)} .dom-laden{border-color:var(--accent-line);background:var(--accent-soft)} .dom-laden b{color:var(--accent-ink)} .dom-uebernehmen{margin-top:14px;padding:11px 18px;font-size:.86rem} .dom-alternativen{margin-top:14px} .dom-alternativen:empty{display:none} .dom-alt-titel{margin:0 0 8px;color:var(--ink-faint)} .dom-alt{border:1px solid var(--line);background:transparent;color:var(--accent-ink);border-radius:999px; padding:7px 14px;font-size:.82rem;cursor:pointer;margin:0 6px 6px 0; transition:border-color var(--duration-medium)} .dom-alt:hover{border-color:var(--accent-line);background:var(--accent-soft)} .dom-gewaehlt{border:1px solid var(--gruen);background:rgba(75,189,131,.10);border-radius:var(--radius-sm); padding:11px 14px;margin-bottom:14px;font-size:.86rem;display:flex;align-items:center;gap:8px; color:var(--ink-soft)} .dom-gewaehlt[hidden]{display:none} .dom-gewaehlt b{color:var(--gruen);font-weight:500} .dom-entfernen{margin-left:auto;border:0;background:none;color:var(--ink-faint);cursor:pointer; font-size:1.1rem;line-height:1;padding:0 4px} .dom-entfernen:hover{color:var(--rot)} /* Angebotsdialog */ .angebot-intro{margin:0 0 20px;color:var(--ink-soft);font-size:.93rem} .angebot-felder{display:grid;grid-template-columns:1.4fr .6fr;gap:12px} .feld-optional{color:var(--ink-faint);font-size:.8rem} .angebot-abschnitt{margin:20px 0 10px;color:var(--ink-faint)} .angebot-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .angebot-weg{border:1px solid var(--line);background:transparent;border-radius:var(--radius-sm); padding:14px 16px;text-align:left;cursor:pointer; transition:border-color var(--duration-medium),transform var(--duration-medium) var(--ease-out)} .angebot-weg:hover{border-color:var(--accent-line);transform:translateY(-2px)} .angebot-weg b{display:block;font-size:.94rem;color:var(--accent-ink);font-weight:500} .angebot-weg span{display:block;font-size:.78rem;color:var(--ink-faint);margin-top:3px} .angebot-mail{margin-top:14px} .angebot-status{display:none;margin-top:14px;padding:13px 15px;border-radius:var(--radius-sm); font-size:.87rem;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--ink-soft)} .angebot-status.an{display:block} .angebot-status.warnung{border-color:var(--warm);background:var(--warm-soft)} .angebot-fein{margin:14px 0 0;font-size:.77rem;color:var(--ink-faint)} /* ========================================================================== 19 OVERLAYS – Datenschutz, Sprache, Assistent ========================================================================== */ .priv{ position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--panel); border-top:1px solid var(--line);box-shadow:0 -24px 60px rgba(0,0,0,.5); transform:translateY(100%);transition:transform var(--duration-medium) var(--ease-out); } .priv.an{transform:none} .priv-inhalt{width:min(var(--max),calc(100% - 2*var(--gutter)));margin:auto;display:grid; grid-template-columns:minmax(0,1fr) 300px;gap:32px;padding:24px 0 26px;align-items:center} .priv-text b{display:block;font-size:1.02rem;margin-bottom:8px;font-weight:500} .priv-text p{margin:0 0 8px;color:var(--ink-soft);font-size:.88rem;line-height:1.6;max-width:70ch} .priv-text p:last-child{margin-bottom:0} .priv-text strong{color:var(--ink);font-weight:500} .priv-aktionen{display:grid;gap:9px} .priv-aktionen .btn{width:100%} .priv-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:2px} .priv-links a{font-size:.76rem;color:var(--ink-faint);text-decoration:underline} .priv-links a:hover{color:var(--accent-ink)} .priv-dialog-inhalt{padding:22px 26px 26px} .priv-zeile{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:16px 0; border-bottom:1px solid var(--line-soft)} .priv-zeile b{display:block;font-size:.96rem;font-weight:500} .priv-zeile span{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:4px;line-height:1.55} .priv-status{flex:0 0 auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em; border-radius:999px;padding:5px 12px;white-space:nowrap;text-transform:uppercase} .priv-status.fest{background:var(--accent-soft);color:var(--accent-ink)} .priv-status.aus{background:var(--panel-soft);color:var(--ink-faint)} .priv-schalter{flex:0 0 auto;width:52px;height:30px;border-radius:999px;border:1px solid var(--line); background:var(--panel-soft);cursor:pointer;position:relative;transition:background var(--duration-medium); padding:0} .priv-schalter span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%; background:var(--ink-soft);transition:left var(--duration-medium) var(--ease-out)} .priv-schalter.an{background:var(--accent);border-color:var(--accent)} .priv-schalter.an span{left:26px;background:#fff} .priv-fein{font-size:.79rem;color:var(--ink-faint);margin:18px 0 0;line-height:1.6} .priv-dialog-fuss{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .priv-dialog-fuss .btn{flex:1 1 200px} .priv-link{cursor:pointer} /* Sprachumschaltung */ .sprach-wahl{position:relative;flex:0 0 auto} .sprach-knopf{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line); background:transparent;color:var(--ink-soft);border-radius:999px;padding:9px 14px;cursor:pointer; font-family:var(--mono);font-size:.7rem;letter-spacing:.12em; transition:border-color var(--duration-medium),color var(--duration-medium)} .sprach-knopf:hover{border-color:var(--accent-line);color:var(--accent-ink)} .sprach-knopf svg{width:15px;height:15px;fill:currentColor} .sprach-liste{position:absolute;right:0;top:calc(100% + 10px);background:var(--panel); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:6px; display:grid;gap:2px;min-width:200px;z-index:70} .sprach-liste[hidden]{display:none} .sprach-liste button{display:block;width:100%;text-align:left;border:0;background:none; border-radius:var(--radius-sm);padding:9px 12px;cursor:pointer;color:var(--ink-soft); transition:background var(--duration-fast)} .sprach-liste button:hover{background:rgba(242,243,241,.05);color:var(--ink)} .sprach-liste button[aria-current="true"]{background:var(--accent-soft);color:var(--ink)} .sprach-liste b{display:block;font-size:.89rem;font-weight:450} .sprach-liste span{display:block;font-size:.73rem;color:var(--ink-faint)} .sprach-hinweis{background:var(--warm-soft);border-bottom:1px solid var(--warm);padding:11px 23px; font-size:.84rem;color:var(--ink-soft);text-align:center} /* Assistent / Hilfe-Fenster */ .kia{position:fixed;right:22px;bottom:22px;z-index:85;display:flex;flex-direction:column; align-items:flex-end;gap:10px} .kia-lockruf{position:relative;background:var(--panel);border:1px solid var(--line); border-radius:var(--radius);padding:14px 34px 14px 16px;font-size:.85rem;color:var(--ink-soft); box-shadow:var(--shadow);max-width:290px;animation:kiaEin var(--duration-medium) var(--ease-out)} .kia-lockruf[hidden]{display:none} .kia-lockruf-zu{position:absolute;top:6px;right:8px;border:0;background:none;color:var(--ink-faint); cursor:pointer;font-size:1rem;line-height:1;padding:2px 4px} .kia-lockruf-zu:hover{color:var(--accent-ink)} @keyframes kiaEin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .kia-knopf{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border:0; border-radius:999px;padding:14px 22px;font-size:.88rem;cursor:pointer; box-shadow:0 12px 32px rgba(14,111,122,.4); transition:background var(--duration-medium),transform var(--duration-medium) var(--ease-out)} .kia-knopf:hover{background:var(--accent-dark);transform:translateY(-2px)} .kia-punkt{width:7px;height:7px;border-radius:50%;background:#7fd6a0; box-shadow:0 0 0 3px rgba(127,214,160,.22)} .kia-punkt.aus{background:var(--ink-faint);box-shadow:0 0 0 3px rgba(242,243,241,.12)} body.kia-offen .kia-knopf,body.kia-offen .kia-lockruf{display:none} /* Im geöffneten mobilen Menü tritt der Assistent zurück */ body.nav-open .kia,body.nav-open .totop{display:none} .kia-fenster{width:min(400px,calc(100vw - 32px));height:min(620px,calc(100vh - 120px)); background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden; animation:kiaEin var(--duration-medium) var(--ease-out)} .kia-fenster[hidden]{display:none} .kia-kopf{display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--accent);color:#fff} .kia-titel{flex:1;min-width:0} .kia-titel b{display:block;font-size:.98rem;line-height:1.25;font-weight:500} .kia-titel span{display:block;font-size:.74rem;opacity:.85;margin-top:1px} .kia-zurueck,.kia-zu{background:rgba(8,10,11,.20);border:0;color:#fff;width:30px;height:30px; border-radius:9px;cursor:pointer;font-size:1.15rem;line-height:1;flex:0 0 auto} .kia-zurueck{font-size:1.35rem} .kia-zurueck:hover,.kia-zu:hover{background:rgba(8,10,11,.36)} .kia-zurueck[hidden]{display:none} .kia-ansicht{flex:1;display:flex;flex-direction:column;min-height:0} .kia-ansicht[hidden]{display:none} #ansichtStart{overflow-y:auto;padding:18px;background:var(--paper);gap:0} .kia-wege{display:grid;gap:10px;margin-bottom:22px} .kia-weg{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:14px;text-align:left; background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px; cursor:pointer;transition:border-color var(--duration-medium),transform var(--duration-medium) var(--ease-out)} .kia-weg:hover{border-color:var(--accent-line);transform:translateY(-2px)} .kia-weg-symbol{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--accent-soft); color:var(--accent-ink);display:grid;place-items:center;font-size:1.2rem;grid-row:span 2} .kia-weg b{display:block;font-size:.96rem;color:var(--ink);font-weight:500} .kia-weg span{display:block;font-size:.79rem;color:var(--ink-faint);margin-top:2px} .kia-abschnitt{color:var(--ink-faint);margin:0 0 10px} .kia-themen{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px} .kia-thema{border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:999px; padding:9px 14px;font-size:.82rem;cursor:pointer;transition:border-color var(--duration-medium)} .kia-thema:hover{border-color:var(--accent-line);color:var(--accent-ink)} .kia-direkt{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:16px; border-top:1px solid var(--line)} .kia-direkt-btn{border:1px solid var(--line);background:transparent;border-radius:var(--radius-sm); padding:12px 14px;text-align:center;transition:border-color var(--duration-medium)} .kia-direkt-btn:hover{border-color:var(--accent-line)} .kia-direkt-btn b{display:block;font-size:.86rem;color:var(--accent-ink);font-weight:500} .kia-direkt-btn span{display:block;font-size:.74rem;color:var(--ink-faint);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kia-verlauf{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px; background:var(--paper);scroll-behavior:smooth} .kia-blase{max-width:88%;padding:11px 14px;border-radius:var(--radius);font-size:.89rem;line-height:1.6; position:relative;animation:kiaEin .22s var(--ease-out)} .kia-es{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px; align-self:flex-start;color:var(--ink-soft)} .kia-ich{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end} .kia-text b{font-weight:500;color:var(--ink)} .kia-ich .kia-text b{color:#fff} .kia-zeit{display:block;font-size:.66rem;opacity:.55;margin-top:6px;text-align:right} .kia-link{display:inline-block;margin-top:9px;color:var(--accent-ink);font-weight:500;font-size:.84rem; text-decoration:underline} .kia-tippt{display:flex;gap:5px;padding:15px} .kia-tippt span{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);opacity:.4; animation:kiapunkt 1.1s infinite} .kia-tippt span:nth-child(2){animation-delay:.16s} .kia-tippt span:nth-child(3){animation-delay:.32s} @keyframes kiapunkt{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}} @keyframes kiapuls{0%,100%{box-shadow:0 0 0 0 rgba(226,105,92,.45)}60%{box-shadow:0 0 0 7px rgba(226,105,92,0)}} .kia-feedback{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:9px; border-top:1px solid var(--line-soft);font-size:.77rem;color:var(--ink-faint)} .kia-feedback button{border:1px solid var(--line);background:transparent;color:var(--ink-faint); border-radius:999px;padding:3px 12px;font-size:.75rem;cursor:pointer} .kia-feedback button:hover{border-color:var(--accent-line);color:var(--accent-ink)} .kia-vorschlaege{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 2px;background:var(--paper)} .kia-vorschlaege:empty{display:none} .kia-chip{border:1px solid var(--line);background:transparent;color:var(--accent-ink);border-radius:999px; padding:7px 13px;font-size:.78rem;cursor:pointer;text-decoration:none; transition:border-color var(--duration-medium),background var(--duration-medium)} .kia-chip:hover{background:var(--accent-soft);border-color:var(--accent-line)} .kia-abfrage{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .kia-kanaele{display:grid;gap:8px;margin-top:12px} .kia-kanal{border:1px solid var(--line);background:var(--paper);border-radius:var(--radius-sm); padding:11px 14px;display:block;transition:border-color var(--duration-medium)} .kia-kanal:hover{border-color:var(--accent-line)} .kia-kanal b{display:block;font-size:.86rem;color:var(--accent-ink);font-weight:500} .kia-kanal span{display:block;font-size:.75rem;color:var(--ink-faint);margin-top:1px} .kia-eingabe{display:flex;gap:7px;padding:12px 14px;border-top:1px solid var(--line);background:var(--panel)} .kia-eingabe input{flex:1;min-width:0;border:1px solid var(--line);background:var(--paper); border-radius:var(--radius-sm);padding:11px 14px;outline:none;font-size:.89rem;color:var(--ink)} .kia-eingabe input:focus{border-color:var(--accent-line)} .kia-senden{background:var(--accent);color:#fff;border:0;border-radius:var(--radius-sm);width:44px; cursor:pointer;font-size:1.05rem;flex:0 0 auto} .kia-senden:hover{background:var(--accent-dark)} .kia-mikro,.kia-ton{border:1px solid var(--line);background:transparent;color:var(--ink-soft); border-radius:var(--radius-sm);width:42px;cursor:pointer;font-size:1rem;flex:0 0 auto; transition:border-color var(--duration-medium)} .kia-mikro:hover,.kia-ton:hover{border-color:var(--accent-line)} .kia-mikro.an{background:var(--rot);border-color:var(--rot);color:#fff;animation:kiapuls 1.2s infinite} .kia-ton.an{background:var(--accent);border-color:var(--accent);color:#fff} .kia-fuss{margin:0;padding:0 14px 11px;font-size:.69rem;color:var(--ink-faint);background:var(--panel); text-align:center} .kia-reset{border:0;background:none;padding:2px;color:var(--ink-faint);text-decoration:underline; font-size:inherit;cursor:pointer;min-height:24px} .kia-reset:hover{color:var(--accent-ink)} .kia-lockruf-text{margin:0 0 10px;line-height:1.55} .kia-lockruf-aktionen{display:flex;flex-wrap:wrap;gap:6px} .kia-lockruf-aktionen .kia-chip{font-size:.77rem;padding:6px 12px} .kia-vergessen{display:block;width:calc(100% - 28px);margin:0 14px 8px;border:1px solid var(--line); background:transparent;color:var(--ink-faint);border-radius:var(--radius-sm);padding:8px; font-size:.75rem;cursor:pointer} .kia-vergessen:hover{border-color:var(--accent-line);color:var(--accent-ink)} .totop{right:auto;left:22px} /* ========================================================================== 21 RESPONSIVE -------------------------------------------------------------------------- Mobil ist keine verkleinerte Fassung: der Hero verliert den Anschnitt, die Konsole wird zur gestapelten Ansicht, aus Spalten werden Zeilen mit Trennlinien. Geprüfte Breiten: 320 / 375 / 430 / 768 / 1024 / 1440 / 1920. ========================================================================== */ @media(max-width:1180px){ .modul-layout{grid-template-columns:1fr} .rechner{position:static} .rechner-liste{max-height:none} .sicht-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .sicht-karte:nth-child(2n){border-right:0} .zahlband,.standards-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .zahl:nth-child(2n),.standard:nth-child(2n){border-right:0} } @media(max-width:1080px){ .sys{max-width:460px} .section-head{grid-template-columns:1fr;gap:var(--s-5)} .section-head h2{max-width:24ch} .service{grid-template-columns:1fr;gap:var(--s-6)} .service:nth-child(even) .service-visual{order:0} .visual-plate{aspect-ratio:16/9} .advisor-grid,.contact,.sicht-angebot,.modul-cta,.teaser,.teaser-server{grid-template-columns:1fr} .demo-wrap{grid-template-columns:1fr} .tabs{border-right:0;border-bottom:1px solid var(--line)} .tab[aria-selected="true"]{padding-left:calc(var(--s-5) + 6px)} .teaser-preis,.teaser-preis-links,.sicht-preis{ border-left:0;border-right:0;border-top:1px solid var(--line); padding-left:0;padding-right:0;padding-top:var(--s-6); } .teaser-preis-links{order:2} .teaser-server>div:last-child{order:1} .foot{grid-template-columns:1fr 1fr;gap:var(--s-7)} .foot>div:first-child{grid-column:1/-1} } /* Touchflächen: mindestens 44 × 44 Pixel ---------------------------------- */ @media(max-width:980px){ .chip,.modul-btn,.demo-btn,.anleitung-btn,.modell-btn,.dom-alt,.demo-eintrag, .demo-app-btn,.demo-chip,.demo-sort,.demo-loeschen,.kia-chip,.kia-thema, .social-link,.faq summary,.sprach-liste button,.sprach-knopf{min-height:44px} .chip,.modul-btn,.demo-btn,.anleitung-btn,.modell-btn,.dom-alt,.kia-chip, .kia-thema,.demo-loeschen,.sprach-knopf{display:inline-flex;align-items:center} .demo-eintrag,.demo-app-btn,.demo-chip,.demo-sort{display:flex;align-items:center} .burger,.totop,.kia-zurueck,.kia-zu,.demo-schliessen,.kia-mikro,.kia-ton, .kia-senden,.priv-schalter,.dom-entfernen{min-width:44px;min-height:44px} .consent input{width:24px;height:24px} .tab{min-height:56px} } /* Mobile Navigation ------------------------------------------------------- */ @media(max-width:980px){ .burger{display:grid} .links{ position:fixed;left:0;right:0;top:var(--nav-h);bottom:0; flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0; background:var(--void); padding:clamp(20px,6vw,44px) var(--gutter) 40px; display:none;overflow-y:auto;z-index:59; } .links:before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 70% 50% at 80% 8%,rgba(90,211,222,.09),transparent 70%); } .links.open{display:flex} .links a{ position:relative;padding:20px 0;border-radius:0;border-bottom:1px solid var(--line); font-size:clamp(1.35rem,6vw,2rem);font-weight:450;letter-spacing:var(--tr-head);color:var(--ink); opacity:0;transform:translateY(14px); animation:navIn var(--duration-medium) var(--ease-out) forwards; } .links a:before{display:none} .links a:after{ content:"";position:absolute;right:2px;top:50%;width:16px;height:1px; background:var(--accent-line);opacity:.7; } .links a[aria-current="true"],.links a[aria-current="page"]{color:var(--accent-ink)} .links.open a:nth-child(1){animation-delay:.05s} .links.open a:nth-child(2){animation-delay:.10s} .links.open a:nth-child(3){animation-delay:.15s} .links.open a:nth-child(4){animation-delay:.20s} .links.open a:nth-child(5){animation-delay:.25s} .links.open a:nth-child(6){animation-delay:.30s} @keyframes navIn{to{opacity:1;transform:none}} /* Auf kleinen Geräten ohne Weichzeichner: er kostet Rechenzeit und würde die Leiste zum Bezugsrahmen des fixierten Menüs machen – dieses wäre dann nur so hoch wie die Leiste selbst. Stattdessen deckt eine fast undurchsichtige Fläche. */ .nav,.nav.is-scrolled{ background:rgba(8,9,11,.95); backdrop-filter:none;-webkit-backdrop-filter:none; } .nav.is-scrolled .navin{height:var(--nav-h)} /* Im geöffneten Menü steht die Handlungsaufforderung unten fest – sonst hätte die mobile Navigation gar keinen Abschluss. Die höhere Spezifität hebt auch das Ausblenden unterhalb von 640 px auf. */ body.nav-open .nav .btn-primary{ display:inline-flex;position:fixed;z-index:61; left:var(--gutter);right:var(--gutter);bottom:max(28px,env(safe-area-inset-bottom)); width:auto;padding:0 26px; } body.nav-open .nav{background:var(--void);border-bottom-color:var(--line)} .brand{margin-inline-end:auto} } body.nav-open{overflow:hidden} @media(max-width:980px){ .erklaer,.erklaer-vier,.erklaer-zwei,.ablauf,.begriffe,.people{grid-template-columns:1fr} .erklaer-karte,.ablauf-schritt,.begriff,.person{ border-right:0!important;padding-left:0!important;padding-right:0!important; } .modelle,.anl-eignung{grid-template-columns:1fr} .modell-schalter{width:100%} .modell-btn{flex:1} .demo-layout{grid-template-columns:1fr} .demo-liste{position:static;max-height:none} .demo-app-kennzahlen{grid-template-columns:1fr} .demo-zeile{grid-template-columns:1fr;gap:3px} .demo-titelzeile{display:flex;flex-wrap:wrap;gap:4px 16px} .demo-preisbox{width:100%} .demo-preisbox div{flex:1} .anl-schritt{grid-template-columns:1fr;gap:16px} .anl-fakten{grid-template-columns:1fr 1fr} /* Prozess wird zur vertikalen Timeline */ .process{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:28px} .process:before{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto} .process:after{ left:4px;top:0;width:1px;height:var(--p,0%); transition:height var(--duration-slow) var(--ease-out); background:linear-gradient(to bottom,var(--accent),var(--accent-ink)); } .process-step{padding:0 0 36px} .process-step:last-child{padding-bottom:0} .process-node{top:6px;left:-28px} } @media(max-width:880px){ .modulgrid{grid-template-columns:1fr} .modul-hero{padding-top:44px} .modul-hero-grid{grid-template-columns:1fr} .modul-hero-grid .sys--calm{max-width:260px;margin-bottom:24px} .modul-section{padding:56px 0} .steuerung{position:static;background:none;padding:0 0 10px} .modul h3{padding-right:0} .modul-badge{position:static;display:inline-block;margin-bottom:12px} .sicht-grid{grid-template-columns:1fr} .sicht-karte{border-right:0} .packages{grid-template-columns:1fr} .package{border-right:0} .package.featured{box-shadow:none;border-top:2px solid var(--accent)} .package.featured:before{top:-1px} } @media(max-width:700px){ .options,.metric-row,.stats,.angebot-felder,.angebot-wege,.demo-neu-felder{grid-template-columns:1fr} .stats{gap:1px} .row{grid-template-columns:1fr;gap:3px} .status{text-align:left} .zahlband,.standards-grid{grid-template-columns:1fr} .zahl,.standard{border-right:0} .zahl span{max-width:none} } @media(max-width:640px){ :root{--nav-h:64px} .nav .btn-primary{display:none} .statement{padding:clamp(64px,18vw,120px) 0} /* Der Assistent bleibt auf kleinen Geräten eine kompakte Marke am Rand – eine Leiste über die volle Breite würde dauerhaft Inhalt verdecken. */ .kia{right:14px;bottom:14px;left:auto;align-items:flex-end} .kia-knopf{justify-content:center;padding:12px 18px} .kia-lockruf{max-width:min(280px,calc(100vw - 40px))} .kia-fenster{width:min(100vw - 28px,420px);height:min(80svh,600px)} .kia-direkt{grid-template-columns:1fr} .totop{left:14px;right:auto;bottom:16px} .dom-knopf{width:100%} .anl-fakten{grid-template-columns:1fr} .priv-inhalt{grid-template-columns:1fr;gap:18px;padding:20px 0 22px} .priv-dialog-fuss .btn{flex:1 1 100%} .foot{grid-template-columns:1fr} .modul-foot{flex-direction:column;align-items:stretch;gap:14px} .modul-aktionen{justify-content:stretch} .modul-aktionen button{flex:1} .btn{padding:0 20px} .demo-screen{min-height:0} .konsole-pfad{display:none} .sys{max-width:340px} .section-head{padding-top:44px} .section-head:after{top:26px} } @media(max-width:430px){ .hero-actions .btn{width:100%} .foot-wordmark{font-size:clamp(2.1rem,15vw,4rem)} .service h3{font-size:1.4rem} .person-nr{width:48px;height:48px} } /* Sehr schmale Geräte (320–480 px): nichts darf aus dem Bild laufen ------- Die Revisionsangabe der Zeichnung ist Beiwerk – sie würde die Kopfzeile zweizeilig machen. Der Knopf der Domainprüfung trägt einen langen Text und steht sonst auf einer Zeile; auf 320 px schiebt genau das die ganze Karte über den Rand. Dort darf er umbrechen. */ @media(max-width:480px){ .stage-head span{display:none} } @media(max-width:480px){ .demo-preisbox{flex-wrap:wrap} .demo-preisbox div{flex:1 1 40%} .demo-preisbox span{white-space:normal} } @media(max-width:420px){ .dom-form{gap:8px} .dom-knopf{white-space:normal;width:100%;line-height:1.3;padding:12px 16px;min-height:48px} } @media(max-width:360px){ :root{--gutter:14px} .navin{gap:8px} .brand{font-size:.64rem;gap:8px;letter-spacing:.1em} .brand-mark{width:30px;height:30px} .eyebrow{font-size:.6rem;letter-spacing:.16em;padding:6px 12px 6px 10px} .konsole-leiste{padding:0 12px} } /* Schreibrichtung von rechts nach links ----------------------------------- */ body.rtl{direction:rtl} body.rtl .eyebrow:before,body.rtl .kicker:before{order:2} body.rtl .hero-actions,body.rtl .foot{flex-direction:row-reverse} body.rtl .kia{right:auto;left:22px;align-items:flex-start} body.rtl .kia-ich{align-self:flex-start} body.rtl .kia-es{align-self:flex-end} body.rtl .sprach-liste{right:auto;left:0} body.rtl .modul-badge{right:auto;left:24px} body.rtl .modul h3{padding-right:0;padding-left:96px} body.rtl .totop{left:auto;right:22px} body.rtl .checklist li,body.rtl .modul-punkte li,body.rtl .resultbox li{padding-left:0;padding-right:22px} body.rtl .checklist li:before,body.rtl .modul-punkte li:before,body.rtl .resultbox li:before{left:auto;right:0} @media(max-width:980px){ body.rtl .brand{margin-inline-end:auto} } /* ========================================================================== 22 ACCESSIBILITY / REDUCED MOTION / PRINT ========================================================================== */ /* Sichtbarer Fokus hat Vorrang vor jeder Feldgestaltung ------------------ Mehrere Eingabefelder setzen outline:none, um den Standardring des Browsers loszuwerden. Für die Tastaturbedienung muss er zurückkommen – diese Regel steht bewusst am Ende der Datei und gewinnt damit jeden Gleichstand in der Spezifität. */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; } /* Innerhalb heller Szenen ist der helle Petrolton zu schwach – dort wird der Ring dunkler gesetzt. */ .tone-light a:focus-visible,.tone-light button:focus-visible, .tone-light input:focus-visible,.tone-light textarea:focus-visible, .tone-light select:focus-visible{outline-color:#095059} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*:before,*:after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .reveal,[data-reveal]{ opacity:1!important;transform:none!important;filter:none!important; clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important; } .modul-hero h1 em:after{transform:scaleX(1)} /* Tiefenbewegung entfällt vollständig – die Ebenen stehen still. */ .statement blockquote,.statement-mark{transform:none!important} .sys-label{opacity:1;transform:none} .links a{opacity:1;transform:none} .v-draw{stroke-dashoffset:0} .page-fade{display:none} .foot-wordmark{-webkit-mask-image:none;mask-image:none} } @media print{ body{background:#fff;color:#000} body:before{display:none} .nav,.totop,footer .footlinks,.steuerung,.rechner,.kia,.priv,.sys,.page-fade, .rail,.scroll-progress,.subnav{display:none} .foot-wordmark{color:#000;-webkit-text-stroke:0;-webkit-mask-image:none;mask-image:none} } /* Betrag und Eurozeichen nie trennen -------------------------------------- */ .modul-preis b,.price,.zahl b,.demo-preisbox b,.rechner-zeile b,.modell-preis b, .sicht-betrag,.teaser-preis b,.demo-kpi b,.anl-fakten span,.vgl-zeile span:last-child, .rechner-liste li span:last-child,.demo-eintrag span{white-space:nowrap}