/* =========================================================== LUDUS NOVUS — „Der Leuchtkasten" Konzept: Die Seite ist ein Untersuchungsraum. Der Weg des Kunden liegt als Radiographie darin — und an einer Stelle leuchtet es rot. Dunkle Kapitel = der Raum (Röntgen, Positiv, leuchtend). Helle Kapitel = der Leuchtkasten (Befund, Negativ, gedruckt). =========================================================== */ /* --- 0 · Fonts (lokal, DSGVO) ----------------------------- */ @font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap; src:url("/fonts/archivo-latin.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:"Archivo";font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap; src:url("/fonts/archivo-latin-ext.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:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap; src:url("/fonts/instrument-sans-latin.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:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap; src:url("/fonts/instrument-sans-latin-ext.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;} /* --- 1 · Tokens ------------------------------------------- */ :root{ /* Nichtfarbe: der Untersuchungsraum */ --ink:#06090D; --ink-2:#0B1118; --ink-3:#111A23; /* Leuchtkasten */ --lux:#EDEFF1; --lux-2:#DFE3E8; /* Der eine Akzent: die Stelle */ --red:#D22730; --red-lit:#FF5D50; --red-tx:#BA222A; /* Rot als Schrift auf hell — 5.5:1 / 4.9:1 auf Dokument */ --red-deep:#8E161D; /* Text */ --tx-d:#9FAAB6; /* Fliesstext auf dunkel — 7.4:1 */ --tx-dh:#EAEEF2; /* Headline auf dunkel — 15.6:1 */ --tx-dm:#7D8996; /* Sekundär auf dunkel — 5.3:1 auf Panel */ --tx-l:#39434E; /* Fliesstext auf hell — 9.1:1 */ --tx-lh:#080D12; /* Headline auf hell */ --tx-lm:#59636D; /* Sekundär auf hell — 5.3:1 */ /* Linien */ --ln-d:rgba(168,190,210,.15); --ln-d-2:rgba(168,190,210,.30); --ln-l:rgba(8,13,18,.14); --ln-l-2:rgba(8,13,18,.28); /* Typo */ --ff-d:"Archivo","Helvetica Neue",Arial,sans-serif; --ff-t:"Instrument Sans","Helvetica Neue",Arial,sans-serif; /* Raum */ --wrap:1280px; --read:37rem; --pad:clamp(1.25rem,5vw,3.5rem); --sec:clamp(5.5rem,12vh,10rem); /* Radien — bewusst gestaffelt, nicht überall gleich */ --r-s:3px; --r-m:9px; --r-l:22px; /* Motion */ --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1); --t-fast:.22s; --t-mid:.42s; --head-h:68px; } /* --- 2 · Reset -------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0} ul,ol{list-style:none;padding:0} img{max-width:100%;display:block} button,input,textarea{font:inherit;color:inherit} a{color:inherit} /* Kein scroll-behavior:smooth — natives Scrollen bleibt unangetastet. */ body{ background:var(--ink); color:var(--tx-d); font-family:var(--ff-t); font-size:clamp(16.5px,.55vw + 15px,19px); line-height:1.72; font-feature-settings:"ss01" 1; -webkit-font-smoothing:antialiased; overflow-x:clip; transition:background-color .9s var(--e-io),color .9s var(--e-io); } /* Die Grundfläche bleibt Tinte, auch im hellen Kapitel. Vorher wurde sie hell — und weil die dunklen Sektionen auf den Startseiten durchsichtig sind (der Canvas liegt dahinter), stand am Kapitelrand fast weisse Schrift für eine knappe Sekunde auf hellem Grund. Hell ist Sache der Sektion, die hell sein will; die trägt ihre eigene Fläche. */ body.is-light{color:var(--tx-l)} body:not(.has-xray).is-light{background:var(--lux)} /* --- 3 · Grundraster -------------------------------------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .read{max-width:var(--read)} .sec{position:relative;padding-block:var(--sec);z-index:1} .sec-tight{padding-block:calc(var(--sec) * .62)} /* Der Inhalt liegt über dem Röntgen-Canvas */ main,.site-header,.site-footer,.ln-rail,.ln-fab,.mobile-cta{position:relative;z-index:2} /* --- 4 · Typografie --------------------------------------- */ h1,h2,h3,h4,.d{font-family:var(--ff-d);font-weight:760;letter-spacing:-.03em;line-height:1.02; text-wrap:balance;font-variation-settings:"wdth" 108;color:var(--tx-dh)} .sec-light h1,.sec-light h2,.sec-light h3,.sec-light h4{color:var(--tx-lh)} .sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--tx-dh)} /* Der Kapitelwechsel ist eine Überblendung, kein Umschalten: der Raum wird hell, die Schrift geht mit. */ h1,h2,h3,h4,.lbl,.lead,.manifest,strong,.find-cap,.plan-when,.pair-h,.stage-read b,.stage-read span{ transition:color .85s var(--e-io)} @media (prefers-reduced-motion:reduce){ h1,h2,h3,h4,.lbl,.lead,.manifest,strong{transition:none} } h1{font-size:clamp(2.15rem,4.55vw,4.15rem);line-height:.96;letter-spacing:-.038em; font-variation-settings:"wdth" 112;font-weight:780;max-width:14ch} @media (max-width:719px){h1{max-width:none}} h2{font-size:clamp(1.95rem,4vw,3.5rem);line-height:1;letter-spacing:-.035em;font-variation-settings:"wdth" 110} h3{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.08;letter-spacing:-.025em} h4{font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.16;letter-spacing:-.02em;font-weight:700} p + p{margin-top:1.05em} strong{font-weight:600;color:var(--tx-dh)} .sec-light strong{color:var(--tx-lh)} .lead{font-size:clamp(1.08rem,1.35vw,1.34rem);line-height:1.58;color:var(--tx-dh);font-weight:400} .sec-light .lead{color:var(--tx-lh)} /* Label / Messwert-Beschriftung — das Instrumenten-Register */ /* Zeilenhöhe fest, nicht geerbt: die Augenbraue steht in manchen Sektionen als

, und ohne diese Zeile brächte das Element seine eigene mit. */ .lbl{font-family:var(--ff-d);font-size:11.5px;font-weight:600;letter-spacing:.22em; line-height:1.72; text-transform:uppercase;font-variation-settings:"wdth" 100; font-variant-numeric:tabular-nums;color:var(--tx-dm);display:flex;align-items:center;gap:.7em} .sec-light .lbl{color:var(--tx-lm)} .lbl::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none} .lbl-red{color:var(--red-lit)} .sec-light .lbl-red{color:var(--red-tx)} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* Akzentwort */ .ac{color:var(--red-lit)} .sec-light .ac{color:var(--red-tx)} /* Textlink */ .tl{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; padding-bottom:1px;transition:background-size .4s var(--e-out),color var(--t-fast) ease} .tl:hover{color:var(--red-lit);background-size:0% 1px;background-position:100% 100%} .sec-light .tl:hover{color:var(--red-tx)} /* --- 5 · Buttons ------------------------------------------ */ .btn{ --bg:var(--red);--fg:#fff; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em; font-family:var(--ff-d);font-weight:640;font-size:clamp(15px,1.02vw,16.5px); letter-spacing:.005em;font-variation-settings:"wdth" 104; padding:1.02em 1.7em;border:0;border-radius:var(--r-m); background:var(--bg);color:var(--fg);cursor:pointer;text-decoration:none; isolation:isolate;overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 34px -14px rgba(210,39,48,.85); transition:box-shadow var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-out); } .btn::after{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.30),transparent 70%); opacity:0;transition:opacity .35s ease} .btn:hover::after{opacity:1} .btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 20px 46px -14px rgba(210,39,48,.95)} .btn:active{transform:translateY(1px)} .btn-lg{padding:1.18em 2.05em;font-size:clamp(16px,1.15vw,18px);border-radius:var(--r-m)} .btn-ghost{--bg:transparent;--fg:var(--tx-dh);box-shadow:inset 0 0 0 1px var(--ln-d-2)} .btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--red-lit)} .sec-light .btn-ghost{--fg:var(--tx-lh);box-shadow:inset 0 0 0 1px var(--ln-l-2)} .cta-note{margin-top:1.1rem;font-size:14.5px;line-height:1.5;color:var(--tx-dm); display:flex;align-items:center;gap:.7em;flex-wrap:wrap} .cta-note::before{content:"";width:22px;height:1px;background:var(--red);flex:none} .sec-light .cta-note{color:var(--tx-lm)} /* Fokus — nie der System-Ring */ :where(a,button,input,textarea,[tabindex]):focus-visible{ outline:2px solid var(--red-lit);outline-offset:3px;border-radius:2px} .sec-light :where(a,button,input,textarea):focus-visible{outline-color:var(--red-tx)} /* --- 6 · Header ------------------------------------------- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--red);color:#fff;padding:.8rem 1.2rem} .skip-link:focus{left:.5rem;top:.5rem} .site-header{position:fixed;top:0;left:0;right:0;z-index:60; transition:background-color .5s var(--e-io),box-shadow .5s var(--e-io)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem; height:var(--head-h)} /* Kein backdrop-filter. Die Kopfleiste steht fest über einer vollflächigen WebGL-Fläche; jeder Blur zwingt den Compositor, bei JEDEM Scroll-Bild den Hintergrund neu zu lesen und zu weichzeichnen. Bei 94 % Deckung sieht man davon nichts und bezahlt trotzdem. Deshalb deckend. */ .site-header.scrolled{background:#070a0e;box-shadow:0 1px 0 var(--ln-d)} body.is-light .site-header.scrolled{background:#edeff1;box-shadow:0 1px 0 var(--ln-l)} .brand{display:flex;align-items:baseline;gap:.55rem;text-decoration:none; font-family:var(--ff-d);font-weight:740;letter-spacing:-.02em;font-size:16.5px; font-variation-settings:"wdth" 112;color:var(--tx-dh)} body.is-light .brand{color:var(--tx-lh)} .brand i{font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase; font-weight:600;color:var(--tx-dm);font-variation-settings:"wdth" 100} body.is-light .brand i{color:var(--tx-lm)} .head-right{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem)} .lang{display:flex;align-items:center;gap:.45rem;font-family:var(--ff-d);font-size:12px; letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--tx-dm)} body.is-light .lang{color:var(--tx-lm)} .lang a{text-decoration:none;transition:color var(--t-fast) ease} .lang a.on{color:var(--tx-dh)} body.is-light .lang a.on{color:var(--tx-lh)} .lang a:hover{color:var(--red-lit)} .head-cta{display:none} @media (min-width:800px){.head-cta{display:inline-flex;padding:.72em 1.15em;font-size:14.5px}} .scroll-progress{position:absolute;left:0;right:0;bottom:0;height:1.5px;pointer-events:none;overflow:hidden} .scroll-progress i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left} /* --- 7 · Die Skala (Mess-Rail, ≥1180px) -------------------- */ .ln-rail{position:fixed;left:calc(var(--pad) * .42);top:50%;transform:translateY(-50%); z-index:40;display:none;pointer-events:none} /* Unter 1200 Pixeln ist die Skala weg: dort nimmt sie Platz, ohne dass rechts ein Gegenstueck steht, und der Inhalt wirkt nach links gerueckt. */ @media (min-width:1200px){.ln-rail{display:block}} .ln-rail ol{display:flex;flex-direction:column;gap:14px} .ln-rail li{display:flex;align-items:center;gap:9px;height:12px} .ln-rail span{display:block;width:9px;height:1px;background:var(--tx-dm);opacity:.5; transition:width .5s var(--e-out),background-color .5s ease,opacity .5s ease} .ln-rail li.on span{width:24px;background:var(--red-lit);opacity:1} body.is-light .ln-rail span{background:var(--tx-lm)} body.is-light .ln-rail li.on span{background:var(--red-tx)} .ln-rail b{display:none;font-family:var(--ff-d);font-size:9.5px;letter-spacing:.16em;font-weight:600; font-variant-numeric:tabular-nums;color:var(--tx-dm);opacity:0;transform:translateX(-4px); transition:opacity .4s ease,transform .4s var(--e-out);white-space:nowrap} @media (min-width:1560px){.ln-rail b{display:block}} .ln-rail li.on b{opacity:.9;transform:none} body.is-light .ln-rail b{color:var(--tx-lm)} /* --- 8 · Röntgen-Canvas ----------------------------------- */ .xray-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; opacity:0;transition:opacity 1.4s var(--e-io)} /* Die Leseseite bleibt frei: das Volumen tritt nach links zurück, damit Schrift nie gegen den Scan kämpft. */ @media (min-width:960px){ .xray-canvas{ -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,.22) 26%,#000 58%); mask-image:linear-gradient(90deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,.22) 26%,#000 58%)} } @media (max-width:959px){ .xray-canvas{ -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.22) 100%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.22) 100%)} } .xray-canvas.on{opacity:1} .no-webgl .xray-canvas{display:none} /* --- 9 · Sektionsflächen ---------------------------------- */ .sec-light{background:var(--lux);color:var(--tx-l)} /* Nur die Startseiten lassen den Canvas durchscheinen; auf Lese-Seiten traegt jede Sektion ihre eigene Flaeche. */ body:not(.has-xray) .sec-dark,body:not(.has-xray) .doc-hero{background:var(--ink)} body:not(.has-xray){background:var(--ink)} body:not(.has-xray).is-light{background:var(--ink)} .sec-light p{color:var(--tx-l)} .sec-dark{background:transparent;color:var(--tx-d)} .sec-panel{background:var(--ink-2)} /* Trennmarke zwischen Kapiteln: die Scan-Linie */ .rule{position:relative;height:1px;background:var(--ln-d);overflow:hidden;border:0;margin:0} .sec-light + .rule,.rule.on-light{background:var(--ln-l)} .rule i{position:absolute;top:0;left:-30%;width:30%;height:100%; background:linear-gradient(90deg,transparent,var(--red),transparent); animation:scan 9s linear infinite} @keyframes scan{to{left:130%}} /* --- 10 · Hero -------------------------------------------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; padding-top:calc(var(--head-h) + 3rem);padding-bottom:clamp(2.5rem,7vh,5rem);overflow:hidden} .hero .wrap{width:100%} .hero-grid{display:grid;gap:clamp(1.6rem,3vw,2.6rem)} @media (min-width:960px){ .hero-grid{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);align-items:end; gap:clamp(2rem,4vw,4.5rem)} } .hero h1{margin-top:.7rem} /* Beide Zeilen der Hauptzeile bilden einen Satz und stehen deshalb in derselben Farbe. Vorher war die zweite grau; dadurch las sie sich wie eine Nebensache, obwohl sie den Satz erst fertig macht. */ .h1-sub{display:block;margin-top:.42em;font-size:clamp(1rem,1.62vw,1.62rem);line-height:1.28; font-weight:450;letter-spacing:-.012em;color:var(--tx-dh);font-variation-settings:"wdth" 100; max-width:30ch} .sec-light .h1-sub{color:var(--tx-lh)} .hero-lead{margin-top:1.5rem;max-width:34rem} .hero-act{margin-top:2rem;display:flex;flex-direction:column;align-items:flex-start} /* Trust: belegte Marken, keine erfundenen */ .trust{margin-top:clamp(2rem,4vh,3rem);display:grid;gap:.85rem; grid-template-columns:repeat(2,minmax(0,1fr));max-width:30rem} @media (min-width:960px){.trust{grid-template-columns:1fr;gap:1.15rem;max-width:none; border-left:1px solid var(--ln-d);padding-left:clamp(1.1rem,2vw,1.8rem)}} .trust li{display:flex;flex-direction:column;gap:.15rem} .trust b{font-family:var(--ff-d);font-size:clamp(1.28rem,2.3vw,1.95rem);font-weight:740; letter-spacing:-.03em;color:var(--tx-dh);font-variant-numeric:tabular-nums;line-height:1} .trust span{font-size:13px;line-height:1.4;color:var(--tx-dm);letter-spacing:.01em} .hero-scroll{margin-top:clamp(2rem,5vh,3.4rem);display:flex;align-items:center;gap:.7rem; font-family:var(--ff-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--tx-dm);font-weight:600} .hero-scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--red),transparent); animation:drop 2.4s var(--e-io) infinite} @keyframes drop{0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 46%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom}} /* --- 11 · Maskierte Zeilen -------------------------------- */ .mask{display:block;overflow:hidden;padding-bottom:.06em} .ml{display:block} /* Reveal-Fallback (ohne JS / reduced motion sichtbar) */ html.js .rv{opacity:0;transform:translateY(22px)} html.js .rv.vis{opacity:1;transform:none; transition:opacity .9s var(--e-out),transform .9s var(--e-out)} /* Was GSAP anfasst, darf keine CSS-Transition auf denselben Eigenschaften haben — sonst zieht die Transition jeden Frame neu los und die Bewegung kriecht (Playbook-Falle 10.2.1). */ html.js .rv.gsap-on{transition:none !important} /* --- 12 · Manifest / grosse Aussage ----------------------- */ .manifest{font-family:var(--ff-d);font-weight:640;letter-spacing:-.03em; font-size:clamp(1.5rem,3.1vw,2.8rem);line-height:1.16;color:var(--tx-lh); font-variation-settings:"wdth" 106;text-wrap:balance;max-width:22ch} .sec-dark .manifest{color:var(--tx-dh)} .manifest .ac{color:var(--red)} .sec-dark .manifest .ac{color:var(--red-lit)} .split{display:grid;gap:clamp(1.8rem,4vw,4rem)} @media (min-width:900px){ .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start} .split-r{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} } .split-side{position:sticky;top:calc(var(--head-h) + 3rem)} @media (max-width:899px){.split-side{position:static}} /* --- 13 · Befunde (Fälle) --------------------------------- */ .finds{display:grid;gap:clamp(1.4rem,2.6vw,2.2rem);margin-top:clamp(2.4rem,5vw,3.6rem)} @media (min-width:880px){.finds{grid-template-columns:repeat(3,1fr);align-items:start}} .find{position:relative;padding:clamp(1.5rem,2.4vw,2.1rem);border-radius:var(--r-l) var(--r-s) var(--r-l) var(--r-s); background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012)); box-shadow:inset 0 0 0 1px var(--ln-d),0 30px 60px -40px rgba(0,0,0,.9); overflow:hidden; transition:box-shadow .5s var(--e-out),transform .5s var(--e-out)} @media (min-width:880px){ .find:nth-child(2){margin-top:clamp(1.6rem,3.4vw,3rem)} .find:nth-child(3){margin-top:clamp(3.2rem,6.8vw,6rem)} } .find:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--ln-d-2),0 40px 70px -40px rgba(0,0,0,1)} .find p.find-fig{display:flex;align-items:baseline;gap:.45rem;font-family:var(--ff-d); font-size:clamp(2rem,3.9vw,3rem);font-weight:780;letter-spacing:-.045em;line-height:1; color:var(--red-lit);font-variant-numeric:tabular-nums;margin:0} .find p.find-fig em{font-style:normal;font-size:.30em;letter-spacing:.14em;text-transform:uppercase; font-weight:640;color:var(--tx-dm);transform:translateY(-.45em)} .find h4{margin-top:1rem} .find p{margin-top:.7rem;font-size:16px;line-height:1.66} .find-cap{margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--ln-d); font-family:var(--ff-d);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--tx-dm);font-weight:600} /* --- 14 · Porträt / Wer ich bin --------------------------- Das Porträt wurde bis v21 animiert überröntgt und wirkte dadurch wie ein Geist. Der Effekt ist raus. Es steht jetzt als klares Schwarzweiss-Bild direkt auf dem Sektionsgrund: keine Karte, kein Rahmen, kein Schlagschatten, kein abgerundeter Container. `overflow:clip` statt `hidden`: hidden würde einen Scroll-Container aufmachen, und ein Scroll-Container schaltet jedes `position:sticky` darin ab — das Bild bliebe dann nicht stehen. */ .about{position:relative;overflow:clip} .about-grid{display:grid;gap:clamp(2rem,4vw,4rem);align-items:stretch} @media (min-width:900px){.about-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}} /* Ab 1100 steht die Bildspalte auf einem festen Mass: 560 Pixel sind die geforderte Darstellungsbreite, und der Text bekommt den Rest. So füllt die Textspalte ihre Spalte aus und der rechte Rand bleibt gleich gross wie der linke. */ @media (min-width:1100px){ .about-grid{grid-template-columns:minmax(0,560px) minmax(0,1fr)} } /* Die Bildspalte ist ein eigener Kasten und wird so hoch wie die Textspalte. Erst dadurch hat das klebende Bild überhaupt Weg: läge `sticky` auf dem Rasterfeld selbst, wäre der Kasten nur so hoch wie das Bild und es bliebe knapp zweihundert Pixel stehen statt die ganze Sektion lang. */ .portrait-col{position:relative} .portrait{position:relative;width:min(100%,560px);margin-inline:auto;aspect-ratio:577/433} @media (min-width:900px){ .portrait{margin-inline:0; position:sticky;top:calc(var(--head-h) + 2.5rem)} } @media (max-width:899px){.portrait{position:static}} .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .portrait .p-base{filter:grayscale(1) contrast(1.16) brightness(.92)} /* --- 15 · Die Stelle — die gepinnte Signature-Szene ------- */ .stage{position:relative} .stage-pin{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden} .stage-cap{max-width:32rem;margin-top:1.6rem} .stage-cap li + li{margin-top:2.2rem} html.js .stage-cap{position:relative;min-height:clamp(17rem,30vh,21rem)} html.js .stage-cap li{position:absolute;top:0;left:0;right:0;opacity:0;transform:translateY(16px); transition:opacity .5s var(--e-out),transform .5s var(--e-out);pointer-events:none;margin-top:0} html.js .stage-cap li.on{opacity:1;transform:none;pointer-events:auto} .stage-cap h3{margin-bottom:.7rem} .stage-cap p{font-size:16.5px;line-height:1.66} .stage-read{position:absolute;right:var(--pad);bottom:clamp(1.6rem,5vh,3rem); display:none;text-align:right} @media (min-width:960px){.stage-read{display:block}} .stage-read b{display:block;font-family:var(--ff-d);font-size:clamp(2.6rem,5.4vw,4.6rem); font-weight:780;letter-spacing:-.05em;line-height:.9;color:var(--tx-dh); font-variant-numeric:tabular-nums} .stage-read span{display:block;margin-top:.4rem;font-family:var(--ff-d);font-size:10.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--tx-dm);font-weight:600} .stage-read.found b{color:var(--red-lit)} /* Mobil: kein Pin — die Szene wird gestapelt gelesen */ @media (max-width:719px){ .stage-pin{min-height:0;display:block;padding-block:var(--sec)} html.js .stage-cap{min-height:0} html.js .stage-cap li{position:relative;top:auto;left:auto;right:auto;opacity:1;transform:none; pointer-events:auto} html.js .stage-cap li + li{margin-top:2.2rem} } /* Stufen-Diagramm (auch ohne JS lesbar) */ .steps-dia{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:2rem;max-width:30rem} .steps-dia i{display:block;height:44px;border-radius:2px;background:rgba(159,170,182,.18); box-shadow:inset 0 0 0 1px var(--ln-d);transition:background-color .6s var(--e-out),box-shadow .6s var(--e-out)} .steps-dia i.leak{background:rgba(210,39,48,.30);box-shadow:inset 0 0 0 1px rgba(255,93,80,.6),0 0 24px rgba(210,39,48,.35)} .steps-dia i.sealed{background:rgba(159,170,182,.34);box-shadow:inset 0 0 0 1px var(--ln-d-2)} /* --- 16 · Der Plan ---------------------------------------- */ .plan{display:grid;gap:clamp(1.6rem,3vw,2.4rem);margin-top:clamp(2.2rem,4vw,3.2rem);counter-reset:p} @media (min-width:820px){.plan{grid-template-columns:repeat(3,1fr)}} .plan li{position:relative;counter-increment:p;padding-top:2.6rem} .plan li::before{content:counter(p,decimal-leading-zero);position:absolute;top:0;left:0; font-family:var(--ff-d);font-size:12px;font-weight:700;letter-spacing:.2em; color:var(--red);font-variant-numeric:tabular-nums} .plan li::after{content:"";position:absolute;top:.42rem;left:2.6rem;right:0;height:1px; background:var(--ln-l)} .sec-dark .plan li::after{background:var(--ln-d)} .plan p{font-size:16.5px;line-height:1.62} /* --- 17 · Angebot: die drei Phasen ------------------------ */ .phases{display:grid;gap:clamp(1.2rem,2.2vw,1.8rem);margin-top:clamp(2.2rem,4vw,3.4rem)} @media (min-width:900px){.phases{grid-template-columns:repeat(3,1fr)}} .phase{position:relative;padding:clamp(1.5rem,2.4vw,2.2rem);border-radius:var(--r-m); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px var(--ln-d);overflow:hidden} .phase::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--red),transparent)} .phase-lbl{font-family:var(--ff-d);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--red-lit);font-weight:600;font-variant-numeric:tabular-nums} .phase h4{margin:.9rem 0 .8rem} .phase p{font-size:16px;line-height:1.66} .included{margin-top:clamp(2.4rem,5vw,3.6rem)} .included ul{display:grid;gap:1px;background:var(--ln-d);border-radius:var(--r-s);overflow:hidden; box-shadow:inset 0 0 0 1px var(--ln-d);margin-top:1.5rem} @media (min-width:820px){.included ul{grid-template-columns:1fr 1fr}} .included li{background:var(--ink);padding:1.15rem clamp(1rem,2vw,1.5rem);font-size:16px;line-height:1.6} .included li b{display:block;font-family:var(--ff-d);font-size:14px;letter-spacing:-.01em; color:var(--tx-dh);margin-bottom:.25rem;font-weight:660} .price-box{margin-top:clamp(2.6rem,5vw,4rem);display:grid;gap:clamp(1.2rem,3vw,2.4rem); align-items:end} @media (min-width:800px){.price-box{grid-template-columns:auto minmax(0,1fr)}} .price{font-family:var(--ff-d);font-weight:790;letter-spacing:-.05em;line-height:.85; font-size:clamp(3.4rem,9vw,7.2rem);color:var(--tx-dh);font-variant-numeric:tabular-nums; display:flex;align-items:baseline;gap:.18em} .price em{font-style:normal;font-size:.22em;letter-spacing:.14em;text-transform:uppercase; color:var(--tx-dm);font-weight:640;transform:translateY(-.9em)} .price-note{font-size:16px;line-height:1.62} .scarcity{margin-top:1.6rem;display:inline-flex;align-items:center;gap:.7rem;padding:.6rem 1rem; border-radius:999px;box-shadow:inset 0 0 0 1px var(--ln-d-2);font-size:14px;color:var(--tx-d)} .scarcity i{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none; box-shadow:0 0 0 0 rgba(210,39,48,.6);animation:pulse 2.8s var(--e-io) infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(210,39,48,.55)}70%{box-shadow:0 0 0 12px rgba(210,39,48,0)}100%{box-shadow:0 0 0 0 rgba(210,39,48,0)}} /* --- 18 · Garantie — das Dokument ------------------------- */ .warranty{position:relative;padding:clamp(1.8rem,4vw,3.4rem);border-radius:var(--r-l); background:var(--lux-2);color:var(--tx-l); box-shadow:0 40px 90px -50px rgba(0,0,0,.9),inset 0 0 0 1px rgba(8,13,18,.1)} .warranty::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(8,13,18,.16); border-radius:calc(var(--r-l) - 6px);pointer-events:none} .warranty h3{color:var(--tx-lh);max-width:20ch} .warranty p{color:var(--tx-l);font-size:16.5px} .warranty .bet{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--ln-l);font-size:15.5px} .warranty .lbl{color:var(--tx-lm)} .warranty .lbl-red{color:var(--red-tx)} .warranty strong{color:var(--tx-lh)} .stamp{position:absolute;top:clamp(1.2rem,3vw,2.2rem);right:clamp(1.2rem,3vw,2.2rem); width:clamp(64px,9vw,96px);height:clamp(64px,9vw,96px);opacity:.9} /* --- 19 · FAQ --------------------------------------------- */ .faq{border-top:1px solid var(--ln-l)} .sec-dark .faq{border-color:var(--ln-d)} .faq:last-of-type{border-bottom:1px solid var(--ln-l)} .sec-dark .faq:last-of-type{border-color:var(--ln-d)} .faq-q{width:100%;background:none;border:0;text-align:left;cursor:pointer; padding:1.35rem 3rem 1.35rem 0;position:relative;font-family:var(--ff-d);font-weight:660; font-size:clamp(1rem,1.35vw,1.2rem);letter-spacing:-.02em;color:var(--tx-lh); transition:color var(--t-fast) ease} .sec-dark .faq-q{color:var(--tx-dh)} .faq-q:hover{color:var(--red-tx)} .sec-dark .faq-q:hover{color:var(--red-lit)} .faq-q::before,.faq-q::after{content:"";position:absolute;right:.4rem;top:50%;background:currentColor; transition:transform .4s var(--e-out),opacity .3s ease} .faq-q::before{width:14px;height:1.5px;margin-top:-.75px} .faq-q::after{width:1.5px;height:14px;right:calc(.4rem + 6.25px);margin-top:-7px} .faq.open .faq-q::after{transform:rotate(90deg);opacity:0} .faq-a{max-height:0;overflow:hidden;transition:max-height .55s var(--e-io)} .faq-a-in{padding:0 clamp(1rem,4vw,4rem) 1.5rem 0;font-size:16.5px;line-height:1.68} /* --- 20 · Zweite Tür / Blog ------------------------------- */ .door{position:relative;padding:clamp(1.8rem,4vw,3rem);border-radius:var(--r-l); box-shadow:inset 0 0 0 1px var(--ln-d); background:radial-gradient(120% 140% at 100% 0%,rgba(210,39,48,.12),transparent 60%)} /* Notizen: drei Karten, keine Tabelle. Vorher standen sie als dünne Spalten mit Haarlinien direkt auf der Fusszeile und lasen sich wie eine Fussnote. Jetzt tragen sie eigene Flächen, eine Ziffer und Luft nach unten. */ .sec-notes{padding-bottom:clamp(4rem,9vh,7rem)} .notes-lead{margin-top:1rem;max-width:34ch} .notes{display:grid;gap:clamp(.9rem,1.5vw,1.3rem);margin-top:clamp(1.8rem,3.4vw,2.8rem)} @media (min-width:820px){.notes{grid-template-columns:repeat(3,1fr)}} .note-a{position:relative;display:flex;flex-direction:column; background:var(--ink-2);border-radius:var(--r-m); padding:clamp(1.4rem,2.4vw,1.9rem);text-decoration:none; box-shadow:inset 0 0 0 1px var(--ln-d),0 26px 54px -42px rgba(0,0,0,.95); transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),background-color .4s ease} .note-a:hover{transform:translateY(-4px);background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--ln-d-2),0 38px 66px -42px #000} .note-nr{font-family:var(--ff-d);font-style:normal;font-size:11px;font-weight:700; letter-spacing:.2em;font-variant-numeric:tabular-nums;color:var(--tx-dm); display:block;margin-bottom:1.1rem} .note-a:hover .note-nr{color:var(--red-lit)} .note-a b{display:block;font-family:var(--ff-d);font-weight:700; font-size:clamp(18px,1.5vw,21px);letter-spacing:-.024em; color:var(--tx-dh);line-height:1.18;text-wrap:balance} .note-a span{display:block;margin-top:.7rem;font-size:15.5px;line-height:1.58;color:var(--tx-d)} .note-a i{display:block;margin-top:auto;padding-top:1.4rem;font-style:normal; font-family:var(--ff-d);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--red-lit);font-weight:600} .note-a i span{display:inline;margin:0;font-size:inherit;color:inherit; transition:transform .4s var(--e-out)} .notes-more{margin-top:clamp(1.4rem,2.6vw,2rem)} /* --- 21 · Finale ------------------------------------------ */ .finale{position:relative;text-align:left} .finale h2{font-size:clamp(2.2rem,5.4vw,4.6rem)} /* --- 22 · Footer ------------------------------------------ */ .site-footer{padding-block:clamp(2.5rem,6vh,4rem);border-top:1px solid var(--ln-d); background:var(--ink)} .ft{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;justify-content:space-between;align-items:flex-start} .ft-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:15px} .ft-nav a{text-decoration:none;color:var(--tx-d);transition:color var(--t-fast) ease} .ft-nav a:hover{color:var(--red-lit)} .ft-meta{font-size:13.5px;color:var(--tx-dm);text-align:right} .ft-meta a{color:var(--tx-dm);text-decoration:none} .ft-meta a:hover{color:var(--tx-d)} /* --- 23 · Sticky Mobile-CTA ------------------------------- */ .mobile-cta{display:none} @media (max-width:820px){ .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70; padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); background:#070a0e; /* deckend statt Blur, siehe Kopfleiste */ border-top:1px solid var(--ln-d); transform:translateY(115%);transition:transform .55s var(--e-out)} body.is-light .mobile-cta{background:#edeff1;border-top-color:var(--ln-l)} .mobile-cta.on{transform:none} .mobile-cta .btn{width:100%} body.modal-open .mobile-cta{transform:translateY(115%)} } /* --- 24 · Das Fadenkreuz ist der Zeiger -------------------- Kein nachgezeichnetes Element mehr. Ein nachgezeichneter Zeiger ist immer mindestens ein Bild zu spät, und bei laufendem Röntgen sind es mehrere — das war die gemeldete Verzögerung. Das Betriebssystem zeichnet ihn jetzt selbst; pünktlicher geht es nicht. Zwei Fassungen, weil die Seite zwischen hell und dunkel wechselt, und eine rote über allem, was man anfassen kann. */ @media (pointer:fine){ body{cursor:url("data:image/svg+xml,") 13 13, default} body.is-light{cursor:url("data:image/svg+xml,") 13 13, default} /* Die Klassen muessen mit in die Liste: .btn, .pk-tab und .modal-close tragen ein eigenes cursor:pointer, und eine Klasse schlaegt ein Element. Ohne sie bleibt ueber den Knoepfen der Systemzeiger. */ a,button,summary,label,[role="button"], .btn,.faq-q,.pk-tab,.modal-close,.tl,.note-a{ cursor:url("data:image/svg+xml,") 13 13, pointer} body.is-light a,body.is-light button,body.is-light summary, body.is-light label,body.is-light [role="button"], body.is-light .btn,body.is-light .faq-q,body.is-light .pk-tab, body.is-light .tl,body.is-light .note-a{ cursor:url("data:image/svg+xml,") 13 13, pointer} input,textarea,select{cursor:text} select{cursor:pointer} } /* --- 25 · Modal + Formular -------------------------------- */ .modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start; justify-content:center;padding:clamp(1rem,4vh,3rem) 1rem;overflow-y:auto; background:rgba(3,5,8,.86);backdrop-filter:blur(10px); opacity:0;visibility:hidden;transition:opacity .4s var(--e-io),visibility .4s} .modal-overlay.is-open{opacity:1;visibility:visible} .modal{position:relative;width:min(100%,44rem);background:var(--ink-2);border-radius:var(--r-l); padding:clamp(1.6rem,4vw,3rem);box-shadow:inset 0 0 0 1px var(--ln-d),0 50px 100px -40px #000; transform:translateY(24px) scale(.985);transition:transform .5s var(--e-out)} .modal-overlay.is-open .modal{transform:none} .modal h2{font-size:clamp(1.7rem,3vw,2.4rem)} .modal-sub{margin-top:.7rem;font-size:16px;color:var(--tx-d)} .modal-close{position:absolute;top:.9rem;right:.9rem;width:40px;height:40px;border:0;border-radius:50%; background:rgba(255,255,255,.06);color:var(--tx-dh);font-size:20px;line-height:1;cursor:pointer; transition:background-color var(--t-fast) ease} .modal-close:hover{background:var(--red)} .fg{margin-top:1.25rem} .fg label{display:block;font-family:var(--ff-d);font-size:13.5px;font-weight:600;letter-spacing:-.005em; color:var(--tx-dh);margin-bottom:.5rem;line-height:1.4} .fg input,.fg textarea{width:100%;background:rgba(255,255,255,.035);border:0; box-shadow:inset 0 0 0 1px var(--ln-d);border-radius:var(--r-s); padding:.85rem 1rem;color:var(--tx-dh);font-size:16px;line-height:1.5;resize:vertical; transition:box-shadow var(--t-fast) ease,background-color var(--t-fast) ease} .fg input:focus,.fg textarea:focus{outline:0;background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--red-lit)} .fg input.err,.fg textarea.err{box-shadow:inset 0 0 0 1px var(--red)} .form-rule{height:1px;background:var(--ln-d);border:0;margin:1.8rem 0 .4rem} .form-error{display:none;margin-top:1rem;padding:.8rem 1rem;border-radius:var(--r-s); background:rgba(210,39,48,.14);box-shadow:inset 0 0 0 1px rgba(210,39,48,.4); color:var(--red-lit);font-size:15px} .modal .btn{margin-top:1.6rem;width:100%} .form-priv{margin-top:1rem;font-size:13px;color:var(--tx-dm);line-height:1.5} .form-priv a{color:var(--tx-d)} .form-ok{display:none;text-align:center;padding:1rem 0} .form-ok .check{width:56px;height:56px;margin:0 auto 1.4rem;border-radius:50%; display:grid;place-items:center;background:rgba(210,39,48,.16); box-shadow:inset 0 0 0 1px rgba(255,93,80,.5);color:var(--red-lit);font-size:24px} .form-ok h3{margin-bottom:.8rem} .form-ok .hint{display:block;margin-top:1rem;font-size:13px;color:var(--tx-dm)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* --- 26 · Korn: die Filmkörnung --------------------------- */ body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* Kein Blendmodus. Die Körnung liegt fest über dem ganzen Bild; „multiply“ zwingt den Compositor, sie in jedem Scroll-Bild neu gegen alles darunter zu rechnen. Bei 4,5 Prozent Deckung ist der Unterschied nicht zu sehen. */ body.is-light::after{opacity:.05} /* --- 27 · Mobile: alles mittig ---------------------------- */ @media (max-width:719px){ .hero{align-items:center;text-align:center} .hero-grid{justify-items:center} .h1-sub{margin-inline:auto} .hero-lead,.read{margin-inline:auto} .hero-act{align-items:center;width:100%} .hero-act .btn{width:100%} .cta-note{justify-content:center;text-align:center} .trust{justify-items:center;text-align:center} .trust li{align-items:center} .hero-scroll{display:none} .sec{text-align:center} .sec .lbl{justify-content:center} .manifest,.stage-cap{margin-inline:auto} .plan li{padding-top:2.4rem} .plan li::after{left:0;right:0;top:.42rem;transform:translateY(0)} .plan li::before{left:50%;transform:translateX(-50%)} .find,.phase{text-align:left} .price{justify-content:center} .faq-q{text-align:left} .included li{text-align:left} .ft{justify-content:center;text-align:center} .ft-nav{justify-content:center} .ft-meta{text-align:center;width:100%} .steps-dia{margin-inline:auto} main{padding-bottom:5rem} } /* --- 28 · Reduced Motion ---------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} html.js .rv{opacity:1 !important;transform:none !important} .stage-pin{min-height:0;display:block;padding-block:var(--sec)} html.js .stage-cap{min-height:0} html.js .stage-cap li{position:relative !important;opacity:1 !important;transform:none !important; margin-top:2.2rem} html.js .stage-cap li:first-child{margin-top:0} .hero-scroll i{animation:none;transform:scaleY(1)} } /* =========================================================== 29 · AUSBAU — Rhythmus, Module, Conversion =========================================================== */ /* --- 29.1 · Rhythmus-Skala: Sektionen sind nicht alle gleich */ .sec-s{padding-block:clamp(3.4rem,7vh,5.5rem)} .sec-m{padding-block:clamp(4.6rem,10vh,8rem)} .sec-l{padding-block:clamp(5.6rem,13vh,10.5rem)} /* --- 29.2 · Stufen-Diagramm mit Beschriftung -------------- */ .steps-dia{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:2.4rem;max-width:34rem} .steps-dia li{display:block} .steps-dia i{display:block;height:46px;border-radius:2px;background:rgba(159,170,182,.16); box-shadow:inset 0 0 0 1px var(--ln-d); transition:background-color .6s var(--e-out),box-shadow .6s var(--e-out),transform .6s var(--e-out)} .steps-dia b{display:block;margin-top:.55rem;font-family:var(--ff-d);font-size:9px;font-weight:600; letter-spacing:.09em;text-transform:uppercase;color:var(--tx-dm);line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .steps-dia i.leak{background:rgba(210,39,48,.32);transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(255,93,80,.65),0 0 26px rgba(210,39,48,.4)} .steps-dia i.sealed{background:rgba(159,170,182,.34);box-shadow:inset 0 0 0 1px var(--ln-d-2)} /* --- 29.3 · Der Stufen-Wähler (interaktiv) ---------------- */ .picker{margin-top:clamp(2.4rem,5vw,3.6rem);border-radius:var(--r-l);overflow:hidden; background:linear-gradient(170deg,rgba(255,255,255,.055),rgba(255,255,255,.012)); box-shadow:inset 0 0 0 1px var(--ln-d),0 40px 80px -50px rgba(0,0,0,1)} .picker-tabs{display:grid;gap:1px;background:var(--ln-d)} @media (min-width:860px){.picker-tabs{grid-template-columns:repeat(4,1fr)}} .pk-tab{position:relative;background:var(--ink-2);border:0;cursor:pointer;text-align:left; padding:1.05rem clamp(1rem,2vw,1.5rem);font-family:var(--ff-d);font-weight:620; font-size:14.5px;letter-spacing:-.01em;color:var(--tx-d);line-height:1.3; transition:color var(--t-fast) ease,background-color var(--t-fast) ease} .pk-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e-out)} .pk-tab:hover{color:var(--tx-dh);background:var(--ink-3)} .pk-tab.is-on{color:var(--tx-dh);background:var(--ink-3)} .pk-tab.is-on::after{transform:scaleX(1)} .picker-body{display:grid;gap:clamp(1.6rem,3vw,2.6rem);padding:clamp(1.5rem,3.2vw,2.6rem)} @media (min-width:980px){.picker-body{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}} .chain{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;align-items:end} .chain li{position:relative} .chain i{display:block;height:64px;border-radius:3px;background:rgba(159,170,182,.14); box-shadow:inset 0 0 0 1px var(--ln-d); transition:background-color .55s var(--e-out),box-shadow .55s var(--e-out), height .55s var(--e-out),transform .55s var(--e-out)} .chain b{display:block;margin-top:.55rem;font-family:var(--ff-d);font-size:8.5px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dm);line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s ease} .chain li.hit i{height:92px;background:rgba(210,39,48,.34); box-shadow:inset 0 0 0 1px rgba(255,93,80,.7),0 0 30px rgba(210,39,48,.45)} .chain li.hit b{color:var(--red-lit)} .chain li.hit::after{content:"";position:absolute;left:50%;top:-14px;width:1px;height:8px; background:var(--red-lit);transform:translateX(-50%)} .picker-panels{position:relative} .pk-panel{transition:opacity .4s var(--e-out),transform .4s var(--e-out)} html.js .picker-panels{min-height:9.5rem} html.js .pk-panel{position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none} html.js .pk-panel.is-on{position:relative;opacity:1;transform:none;pointer-events:auto} .pk-stage{font-family:var(--ff-d);font-size:11.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--tx-dm);margin-bottom:.9rem} .pk-stage b{color:var(--red-lit);font-weight:700} .pk-panel p:not(.pk-stage){font-size:clamp(1.02rem,1.3vw,1.24rem);line-height:1.55;color:var(--tx-dh)} .picker-foot{padding:0 clamp(1.5rem,3.2vw,2.6rem) clamp(1.4rem,2.6vw,2rem); font-size:13.5px;color:var(--tx-dm);line-height:1.5} /* --- 29.4 · Zwischen-Band: der rote Kontrastmoment -------- */ .band{position:relative;z-index:1;background:var(--red);color:#fff; padding-block:clamp(3rem,7vh,5.5rem);overflow:hidden} .band::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 160% at 12% 0%,rgba(255,255,255,.20),transparent 55%)} .band-in{position:relative;display:grid;gap:clamp(1.8rem,4vw,3.5rem)} @media (min-width:920px){.band-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}} .band .band-lbl{color:rgba(255,255,255,.86)} .band h3.band-h{color:#fff;font-size:clamp(1.6rem,3.1vw,2.7rem);margin-top:1.1rem;max-width:20ch} .band p.band-p{color:rgba(255,255,255,.96);margin-top:1.1rem;max-width:46ch;font-size:16.5px} .band .band-note{color:rgba(255,255,255,.9)} body.is-light .band h3.band-h{color:#fff} .band-act{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem} .band-note{font-size:13.5px;color:rgba(255,255,255,.75);margin-top:.2rem} .btn-invert{--bg:#fff;--fg:var(--red);box-shadow:0 14px 34px -16px rgba(0,0,0,.6)} .btn-invert:hover{box-shadow:0 20px 44px -16px rgba(0,0,0,.7)} .btn-ghost-light{--bg:transparent;--fg:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)} .btn-ghost-light:hover{box-shadow:inset 0 0 0 1px #fff} .band .btn::after{background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 70%)} /* --- 29.5 · Für wen / Für wen nicht ----------------------- */ .pair{display:grid;gap:1px;margin-top:clamp(2rem,4vw,3rem);background:var(--ln-l); box-shadow:inset 0 0 0 1px var(--ln-l);border-radius:var(--r-m);overflow:hidden} @media (min-width:860px){.pair{grid-template-columns:1fr 1fr}} .pair-col{background:var(--lux);padding:clamp(1.5rem,3vw,2.4rem)} .pair-col p + p{margin-top:1rem} .pair-h{font-family:var(--ff-d);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.5rem); letter-spacing:-.025em;color:var(--tx-lh);margin-bottom:1.1rem; display:flex;align-items:center;gap:.6rem} .pair-h::before{content:"";width:22px;height:22px;border-radius:50%;flex:none; background:no-repeat center/12px 12px} .pair-yes .pair-h::before{background-color:rgba(20,120,70,.14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23147846' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 4.8 9.5 10 3'/%3E%3C/svg%3E")} .pair-no .pair-h::before{background-color:rgba(210,39,48,.13); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23D22730' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E")} .pair-no{background:var(--lux-2)} /* --- 29.6 · Danach --------------------------------------- */ .after{display:grid;gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(1.8rem,3.5vw,2.6rem)} @media (min-width:880px){.after{grid-template-columns:1fr 1fr}} .after p{font-size:17px;line-height:1.7} /* --- 29.7 · Plan mit Zeitmarke --------------------------- */ .plan-when{font-family:var(--ff-d);font-size:11px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--red-lit);margin-bottom:.7rem;font-variant-numeric:tabular-nums} .sec-light .plan-when{color:var(--red-tx)} .plan li{padding-top:2.2rem} /* --- 29.8 · Angebot: Wert-Stapel + Preiskarte ------------- */ .phase-lbl .num{color:var(--tx-dm)} /* Die Preiskarte sitzt vertikal mittig zur ganzen linken Spalte, also zum Block aus beiden Listen zusammen. Vorher klebte sie oben; Kleben und Zentrieren schliessen sich aus, deshalb steht sie jetzt fest. Auf schmalen Fenstern faellt sie unter die Listen, dort gilt die Zentrierung nicht. */ .offer-grid{display:grid;gap:clamp(2rem,4vw,3.4rem);margin-top:clamp(2.6rem,5vw,4rem);align-items:start} @media (min-width:980px){.offer-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center}} .value h3{font-size:clamp(1.15rem,1.7vw,1.45rem)} .value-list{margin-top:1.2rem;display:grid;gap:.85rem} .value-list li{position:relative;padding-left:2rem;font-size:16px;line-height:1.6} .value-list li b{color:var(--tx-dh);font-weight:600} .value-list li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px; border-radius:50%;background:rgba(255,93,80,.16) no-repeat center/9px 9px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FF5D50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 4.8 9.5 10 3'/%3E%3C/svg%3E")} .value-no li::before{background-color:rgba(159,170,182,.14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239FAAB6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 6h6'/%3E%3C/svg%3E")} .price-card{position:static;align-self:center; padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--r-l); background:linear-gradient(175deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px var(--ln-d-2),0 44px 90px -50px rgba(0,0,0,1)} @media (max-width:979px){.price-card{align-self:auto}} .price-card .price{margin-top:1.1rem} .price{font-family:var(--ff-d);font-weight:790;letter-spacing:-.05em;line-height:.85; font-size:clamp(3rem,6.2vw,5.2rem);color:var(--tx-dh);font-variant-numeric:tabular-nums; display:flex;align-items:baseline;gap:.2em;flex-wrap:wrap} .price em{font-style:normal;font-size:.2em;letter-spacing:.16em;text-transform:uppercase; color:var(--tx-dm);font-weight:640;transform:translateY(-.9em)} .price-note{margin-top:1.2rem;font-size:15.5px;line-height:1.6} .price-card .btn{width:100%} /* --- 29.9 · Zweite Tür (eigene Sektion, volle Breite) ----- */ .door{position:relative;display:grid;gap:clamp(1.4rem,3vw,2.4rem); padding:clamp(1.8rem,4vw,3rem);border-radius:var(--r-l); box-shadow:inset 0 0 0 1px var(--ln-d); background:radial-gradient(130% 150% at 100% 0%,rgba(210,39,48,.10),transparent 62%)} @media (min-width:900px){.door{grid-template-columns:minmax(0,1fr) auto;align-items:end}} .door-in{max-width:56ch} .door-act{font-family:var(--ff-d);font-weight:640;font-size:16px;letter-spacing:-.01em; white-space:nowrap} /* --- 29.10 · Finale: was als Nächstes passiert ------------ */ .finale-h{font-size:clamp(2.1rem,5vw,4.2rem);max-width:16ch} .finale-grid{display:grid;gap:clamp(2rem,4vw,3.6rem);margin-top:clamp(2rem,4vw,3rem)} @media (min-width:920px){.finale-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}} .next{counter-reset:n;display:grid;gap:1px;background:var(--ln-d); box-shadow:inset 0 0 0 1px var(--ln-d);border-radius:var(--r-m);overflow:hidden} .next li{counter-increment:n;background:var(--ink-2);padding:1.15rem clamp(1.1rem,2vw,1.6rem) 1.15rem 3.4rem; position:relative} .next li::before{content:counter(n,decimal-leading-zero);position:absolute;left:clamp(1.1rem,2vw,1.6rem); top:1.25rem;font-family:var(--ff-d);font-size:11px;font-weight:700;letter-spacing:.14em; color:var(--red-lit);font-variant-numeric:tabular-nums} .next b{display:block;font-family:var(--ff-d);font-weight:660;font-size:16px;letter-spacing:-.015em; color:var(--tx-dh)} .next span{display:block;margin-top:.3rem;font-size:15px;line-height:1.55;color:var(--tx-d)} /* --- 29.11 · Mobil: die neuen Module mittig -------------- */ @media (max-width:719px){ .picker{text-align:left} .pk-tab{text-align:center} .picker-foot{text-align:center} .chain b{font-size:7px;letter-spacing:.02em} .steps-dia b{font-size:7px;letter-spacing:.02em} .band-in{justify-items:center;text-align:center} .band-h,.band-p{margin-inline:auto} .band-act{align-items:stretch;width:100%} .band-act .btn{width:100%} .pair-col{text-align:left} .pair-h{justify-content:center;text-align:center} .value-list li{text-align:left} .price-card{text-align:center} .price{justify-content:center} .next li{text-align:left} .door{text-align:center} .door-in{margin-inline:auto} .after p{text-align:center} } /* =========================================================== 30 · Feinschliff nach dem Sichtlauf =========================================================== */ .brand{white-space:nowrap} @media (max-width:599px){ .brand i{display:none} .site-header .wrap{gap:.6rem} } /* Mobil: das Volumen tritt hinter dem Lesetext weiter zurück */ @media (max-width:959px){ .xray-canvas{ -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.42) 34%,rgba(0,0,0,.20) 70%,rgba(0,0,0,.14) 100%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.42) 34%,rgba(0,0,0,.20) 70%,rgba(0,0,0,.14) 100%)} } /* Das Garantie-Dokument mobil: Siegel oben, Text wie in den anderen Karten */ @media (max-width:719px){ .warranty{text-align:left} .warranty .lbl{justify-content:flex-start} .stamp{position:static;margin:0 0 1.2rem;width:64px;height:64px} .warranty::before{inset:8px} } /* Die Kette bleibt auch schmal lesbar */ @media (max-width:520px){ .chain{gap:5px} .chain i{height:52px} .chain li.hit i{height:76px} .chain b{font-size:6.5px} .steps-dia{gap:5px} .steps-dia i{height:38px} .steps-dia b{font-size:6.5px} } /* --- 31 · Befunde als Ausdrucke auf dem Leuchtkasten ------- */ .sec-light .find{ background:#F7F8FA; box-shadow:inset 0 0 0 1px rgba(8,13,18,.10),0 22px 44px -30px rgba(8,13,18,.42); backdrop-filter:none} .sec-light .find:hover{ box-shadow:inset 0 0 0 1px rgba(8,13,18,.20),0 30px 56px -30px rgba(8,13,18,.5)} .sec-light .find p{color:var(--tx-l)} .sec-light .find p.find-fig{color:var(--red-tx)} .sec-light .find p.find-fig em{color:var(--tx-lm)} .sec-light .find-cap{border-top-color:var(--ln-l);color:var(--tx-lm)} /* --- 32 · Das Porträt steht auf dem Leuchtkasten ---------- Ohne Karte darunter: das freigestellte Bild steht direkt auf der Sektionsfläche. Die Kante unten wird auf den letzten Prozenten weich, sonst bricht der Unterarm hart ab. */ .sec-light .portrait .p-base{filter:grayscale(1) contrast(1.03) brightness(1.03)} .portrait{margin-block:0} .portrait img{-webkit-mask-image:linear-gradient(180deg,#000 90%,rgba(0,0,0,.45) 97%,transparent 100%); mask-image:linear-gradient(180deg,#000 90%,rgba(0,0,0,.45) 97%,transparent 100%)} .portrait-cap{position:absolute;left:0;right:0;bottom:-2.1rem;text-align:center; font-family:var(--ff-d);font-size:10.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--tx-dm)} .sec-light .portrait-cap{color:var(--tx-lm)} /* =========================================================== 33 · Feinschliff-Runde: Staffelung, Trennmarken, Satz =========================================================== */ /* Gestaffelte Kinder in Gruppen */ html.js [data-stagger] > .st{opacity:0;transform:translateY(18px)} html.js [data-stagger].vis > .st{opacity:1;transform:none; transition:opacity .8s var(--e-out),transform .8s var(--e-out)} /* Kapitel-Trennmarke: die Scan-Linie */ .rule{position:relative;z-index:1;height:1px;background:var(--ln-d);overflow:hidden;border:0;margin:0} body.is-light .rule{background:var(--ln-l)} .rule i{position:absolute;top:0;left:-26%;width:26%;height:100%; background:linear-gradient(90deg,transparent,var(--red-lit),transparent); animation:scan 11s linear infinite;opacity:.7} body.is-light .rule i{background:linear-gradient(90deg,transparent,var(--red-tx),transparent);opacity:.5} @keyframes scan{0%{left:-26%}100%{left:126%}} /* Satz: keine Waisen, saubere Umbrüche in langen deutschen Wörtern */ p,li,.pk-panel p,.faq-a-in{text-wrap:pretty} @media (max-width:719px){ p,li,.faq-a-in{hyphens:auto;-webkit-hyphens:auto} } /* Hero: der Scroll-Hinweis sitzt jetzt unter dem Handlungsweg */ .hero-scroll{margin-top:clamp(1.8rem,4vh,2.8rem)} @media (max-width:719px){.hero-scroll{display:none}} /* Der Wähler: keine tote Fläche mehr unter der Antwort */ @media (min-width:980px){.picker-body{align-items:center}} html.js .picker-panels{min-height:8.5rem} /* Reduced Motion: Staffelung ohne Bewegung */ @media (prefers-reduced-motion:reduce){ html.js [data-stagger] > .st{opacity:1 !important;transform:none !important;transition:none !important} .rule i{animation:none;left:-26%} } /* Karten-Überschriften: Rang h3 (saubere Gliederung), Grösse wie zuvor */ .card-h{font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.16;letter-spacing:-.02em;font-weight:700} .find .card-h{margin-top:1rem} .phase .card-h{margin:.9rem 0 .8rem} /* =========================================================== 34 · Die Kette als Trichter — Stufen, die sich verjüngen =========================================================== */ .steps-dia,.chain{--fh:64px} .steps-dia li,.chain li{position:relative} .steps-dia i,.chain i{ height:var(--h,var(--fh)); border-radius:0; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%,9px 50%); background:rgba(159,170,182,.17); box-shadow:none; transition:height .55s var(--e-out),background-color .55s var(--e-out), filter .55s var(--e-out),transform .55s var(--e-out)} .steps-dia li:first-child i,.chain li:first-child i{ clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%)} .steps-dia li:last-child i,.chain li:last-child i{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%)} /* Verjüngung: jede Stufe trägt weniger als die davor */ .steps-dia li:nth-child(1) i,.chain li:nth-child(1) i{--h:calc(var(--fh) * 1.00)} .steps-dia li:nth-child(2) i,.chain li:nth-child(2) i{--h:calc(var(--fh) * .90)} .steps-dia li:nth-child(3) i,.chain li:nth-child(3) i{--h:calc(var(--fh) * .80)} .steps-dia li:nth-child(4) i,.chain li:nth-child(4) i{--h:calc(var(--fh) * .71)} .steps-dia li:nth-child(5) i,.chain li:nth-child(5) i{--h:calc(var(--fh) * .63)} .steps-dia li:nth-child(6) i,.chain li:nth-child(6) i{--h:calc(var(--fh) * .55)} .steps-dia li:nth-child(7) i,.chain li:nth-child(7) i{--h:calc(var(--fh) * .48)} .steps-dia,.chain{align-items:center} .steps-dia i.leak{background:rgba(210,39,48,.42);transform:none; filter:drop-shadow(0 0 18px rgba(210,39,48,.55))} .steps-dia i.sealed{background:rgba(159,170,182,.34);filter:none} .sec-light .steps-dia i,.sec-light .chain i{background:rgba(8,13,18,.14)} .steps-dia b,.chain b{margin-top:.7rem} @media (min-width:900px){.steps-dia,.chain{--fh:72px}} @media (max-width:520px){.steps-dia,.chain{--fh:46px}} /* =========================================================== 35 · Lese-Seiten — der Leuchtkasten als Leseflaeche =========================================================== */ .doc-hero{position:relative;z-index:1;padding-top:calc(var(--head-h) + clamp(3rem,9vh,6rem)); padding-bottom:clamp(2.6rem,7vh,4.6rem)} .doc-hero h1{margin-top:1.1rem;max-width:18ch} .doc-hero .lead{margin-top:1.4rem;max-width:44rem} .doc-hero-grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:end} @media (min-width:900px){.doc-hero-grid:has(.doc-portrait){grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}} .crumbs{font-family:var(--ff-d);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; font-weight:600;color:var(--tx-dm);display:flex;gap:.6em;align-items:center;margin-bottom:1.6rem} .crumbs a{text-decoration:none;transition:color var(--t-fast) ease} .crumbs a:hover{color:var(--red-lit)} .crumbs span:last-child{color:var(--tx-d)} .doc-portrait{position:relative;width:min(100%,300px);margin:0;aspect-ratio:577/433} .doc-portrait img{width:100%;height:100%;object-fit:contain; filter:grayscale(1) contrast(1.12) brightness(.95); -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%); mask-image:linear-gradient(180deg,#000 76%,transparent 100%)} .doc-body{max-width:40rem} .doc-body > * + *{margin-top:1.15em} .doc-body h2{margin-top:2.6em;font-size:clamp(1.5rem,2.6vw,2.15rem)} .doc-body h2:first-child{margin-top:0} .doc-body h3{margin-top:2em;font-size:clamp(1.1rem,1.6vw,1.35rem)} .doc-body .lead{margin-top:1.6em} .doc-body p{font-size:clamp(16.5px,.5vw + 15px,18.5px);line-height:1.75} .doc-note{font-size:15.5px;line-height:1.6;color:var(--tx-lm); padding-left:1.1rem;border-left:2px solid var(--ln-l-2)} .sec-dark .doc-note{color:var(--tx-dm);border-left-color:var(--ln-d-2)} .doc-rule{height:1px;background:var(--ln-l);margin:2.8rem 0} .sec-dark .doc-rule{background:var(--ln-d)} .doc-list,.doc-num{display:grid;gap:.7rem;margin-top:1.2em} .doc-list li,.doc-num li{position:relative;padding-left:1.6rem;font-size:16.5px;line-height:1.65} .doc-list li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--red)} .doc-num{counter-reset:dn} .doc-num li{counter-increment:dn;padding-left:2.2rem} .doc-num li::before{content:counter(dn,decimal-leading-zero);position:absolute;left:0;top:.08em; font-family:var(--ff-d);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--red); font-variant-numeric:tabular-nums} .pull-quote{margin:2.4rem 0 0;padding:clamp(1.3rem,3vw,2rem) clamp(1.3rem,3vw,2.2rem); border-radius:var(--r-l) var(--r-s) var(--r-l) var(--r-s);background:#F7F8FA; box-shadow:inset 0 0 0 1px rgba(8,13,18,.10),0 22px 44px -34px rgba(8,13,18,.4)} .pull-quote blockquote{margin:0} .pull-quote p{font-family:var(--ff-d);font-weight:620;letter-spacing:-.02em; font-size:clamp(1.08rem,1.7vw,1.42rem);line-height:1.4;color:var(--tx-lh)} .pull-quote figcaption{margin-top:1rem;font-family:var(--ff-d);font-size:11.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--tx-lm)} .sec-dark .pull-quote{background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px var(--ln-d)} .sec-dark .pull-quote p{color:var(--tx-dh)} .facts{display:grid;gap:1px;margin-top:1.8rem;background:var(--ln-l); box-shadow:inset 0 0 0 1px var(--ln-l);border-radius:var(--r-s);overflow:hidden} @media (min-width:640px){.facts{grid-template-columns:1fr 1fr}} .fact{background:var(--lux);padding:1rem 1.2rem} .fact dt{font-family:var(--ff-d);font-size:10.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--tx-lm)} .fact dd{margin:.35rem 0 0;font-size:16px;line-height:1.5;color:var(--tx-lh); font-variant-numeric:tabular-nums} .doc-steps{counter-reset:ds;display:grid;gap:1px;margin-top:1.8rem;background:var(--ln-l); box-shadow:inset 0 0 0 1px var(--ln-l);border-radius:var(--r-s);overflow:hidden} .doc-steps li{background:var(--lux);padding:1.3rem clamp(1.1rem,2.2vw,1.6rem)} .doc-step-h{font-family:var(--ff-d);font-weight:680;font-size:17px;letter-spacing:-.02em; color:var(--tx-lh);margin:.3rem 0 .5rem} .doc-steps p:last-child{font-size:16px;line-height:1.66} .leak-group{margin-top:2.6rem} .doc-body h2.leak-stage{font-family:var(--ff-d);font-size:11px;line-height:1.4;margin-top:2.6rem;font-weight:700;letter-spacing:.24em; text-transform:uppercase;color:var(--red-tx);padding-bottom:.7rem;border-bottom:1px solid var(--ln-l)} .leak{position:relative;padding:1.5rem 0 1.5rem 3.2rem;border-bottom:1px solid var(--ln-l)} .leak-nr{position:absolute;left:0;top:1.55rem;font-family:var(--ff-d);font-size:13px;font-weight:700; letter-spacing:.08em;color:var(--tx-lm);font-variant-numeric:tabular-nums} .leak-h{font-family:var(--ff-d);font-weight:680;font-size:clamp(1.02rem,1.5vw,1.22rem); letter-spacing:-.02em;color:var(--tx-lh);line-height:1.28;margin:0} .leak p{margin-top:.55rem;font-size:16px;line-height:1.65} .leak-q{margin-top:.9rem;padding-left:.9rem;border-left:2px solid var(--red); font-style:italic;color:var(--tx-lh);font-size:16px} @media (max-width:520px){.leak{padding-left:0;padding-top:2.4rem}.leak-nr{top:1.2rem}} /* Die 00 steht über den zwölf. Sie ist laut Marians Text die häufigste und teuerste Stelle überhaupt — also bekommt sie eine eigene Fläche und nicht nur eine Zeile mehr. */ .leak-top{margin-top:1.6rem;padding:clamp(1.5rem,3vw,2.2rem);padding-left:clamp(1.5rem,3vw,2.2rem); border-bottom:0;border-radius:var(--r-m);background:#F7F8FA; box-shadow:inset 0 0 0 1px rgba(8,13,18,.10),0 22px 46px -34px rgba(8,13,18,.42)} .leak-top .leak-nr{position:static;display:block;font-size:11px;letter-spacing:.2em; color:var(--red-tx);margin-bottom:.9rem} .leak-top .leak-h{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.2} .leak-top .leak-lead{margin-top:.8rem;font-family:var(--ff-d);font-weight:640; letter-spacing:-.015em;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--tx-lh)} .leak-top .leak-after{margin-top:1rem;font-size:15.5px;color:var(--tx-lm)} @media (max-width:520px){.leak-top{padding-top:clamp(1.5rem,3vw,2.2rem)}} .faq-wrap{margin-top:1.4rem} .doc-cta{margin-top:2.6rem} .doc-links{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin-top:2.4rem;padding-top:1.6rem; border-top:1px solid var(--ln-l)} .sec-dark .doc-links{border-top-color:var(--ln-d)} .doc-links a{font-family:var(--ff-d);font-weight:640;font-size:15.5px;letter-spacing:-.01em; text-decoration:none;color:var(--red-tx);transition:opacity var(--t-fast) ease} .sec-dark .doc-links a{color:var(--red-lit)} .doc-links a:hover{opacity:.7} .doc-chain{margin:1.8rem 0 .5rem;max-width:34rem} /* Rechtstexte behalten ihre eigene Gliederung */ .legal-body h2{margin-top:2.4em;font-size:clamp(1.25rem,2vw,1.6rem)} .legal-body p,.legal-body li{font-size:16.5px;line-height:1.72} .legal-body ul{margin-top:1em;display:grid;gap:.5rem} .legal-body li{position:relative;padding-left:1.4rem} .legal-body li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--red)} .legal-body a{color:var(--red-tx)} .legal-body strong{color:var(--tx-lh)} .legal-body table{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:15.5px} .legal-body th,.legal-body td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--ln-l);vertical-align:top} /* Blog-Übersicht */ .post-grid{display:grid;gap:1px;background:var(--ln-l);box-shadow:inset 0 0 0 1px var(--ln-l); border-radius:var(--r-m);overflow:hidden} @media (min-width:900px){.post-grid{grid-template-columns:repeat(3,1fr)}} .post-card{display:block;background:var(--lux);padding:clamp(1.4rem,2.6vw,2rem);text-decoration:none; transition:background-color .4s ease} .post-card:hover{background:#F7F8FA} .post-card h2{margin-top:1rem;font-size:clamp(1.15rem,1.8vw,1.45rem)} .post-card p{margin-top:.8rem;font-size:16px;line-height:1.6;color:var(--tx-l)} .post-more{display:block;margin-top:1.2rem;font-family:var(--ff-d);font-size:10.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--red-tx)} /* Hinweis unter der Kette in der Signature-Szene */ .stage-foot{margin-top:1.4rem;max-width:34rem;font-size:14.5px;line-height:1.55;color:var(--tx-dm)} /* Zwei Aktenzeichen statt drei */ @media (min-width:880px){ .finds-2{grid-template-columns:repeat(2,1fr);max-width:56rem} .finds-2 .find:nth-child(3){margin-top:0} } /* Zweiter Weg im roten Band */ .band-second{margin-top:.9rem;font-size:15.5px;color:rgba(255,255,255,.94)} .band-second .tl{color:#fff} .band-second .tl:hover{color:#fff;opacity:.8} /* Fusszeile in drei Spalten */ .ft-cols{display:grid;gap:clamp(1.6rem,4vw,3rem)} @media (min-width:720px){.ft-cols{grid-template-columns:repeat(3,minmax(0,1fr))}} .ft-h{font-family:var(--ff-d);font-size:10.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--tx-dm);margin-bottom:1rem} .ft-nav{display:grid;gap:.55rem} .ft-nav a{font-size:15.5px;text-decoration:none;color:var(--tx-d);transition:color var(--t-fast) ease} .ft-nav a:hover{color:var(--red-lit)} .ft-base{margin-top:clamp(2rem,5vh,3.2rem);padding-top:1.6rem;border-top:1px solid var(--ln-d); display:grid;gap:.6rem} .ft-brand{font-size:14.5px;line-height:1.6;color:var(--tx-d);max-width:62ch} .ft-brand b{color:var(--tx-dh);font-weight:660} .ft-brand a{color:var(--red-lit);text-decoration:none} .ft-legal{font-size:13.5px;color:var(--tx-dm)} .ft-legal a{color:var(--tx-dm)} @media (max-width:719px){.ft-cols,.ft-base{text-align:center}.ft-nav{justify-items:center}.ft-brand{margin-inline:auto}} /* Lese-Seiten ohne WebGL: ein ruhiges, atmendes Licht im Kopf */ .doc-hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:min(70vw,760px); height:min(70vw,760px);pointer-events:none;z-index:-1; background:radial-gradient(circle at 60% 40%,rgba(210,39,48,.16),rgba(120,160,200,.07) 42%,transparent 70%); /* Kein filter:blur. Ein Verlauf ist schon weich; der Weichzeichner zwang den Browser nur, die Ebene bei jedem Bild der Animation neu zu rastern. */ will-change:transform,opacity;animation:docBreath 26s var(--e-io) infinite} @keyframes docBreath{ 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.85} 50%{transform:translate3d(-3%,4%,0) scale(1.12);opacity:1}} @media (prefers-reduced-motion:reduce){.doc-hero::before{animation:none}} .doc-hero{isolation:isolate;overflow:hidden} /* Trichter: die Stufen stehen auf einer gemeinsamen Linie, die Beschriftungen ebenfalls */ .steps-dia,.chain{align-items:stretch} .steps-dia li,.chain li{display:grid;grid-template-rows:var(--fh) auto;align-items:center} .steps-dia b,.chain b{margin-top:.55rem;align-self:start} .steps-dia b,.chain b{font-size:8px;letter-spacing:.05em} @media (min-width:1100px){.steps-dia b,.chain b{font-size:8.5px;letter-spacing:.07em}} /* Mobil: der Kopf der Lese-Seiten folgt derselben mittigen Ordnung */ @media (max-width:719px){ .doc-hero{text-align:center} .doc-hero .lbl{justify-content:center} .doc-hero h1,.doc-hero .lead{margin-inline:auto} .crumbs{justify-content:center} .doc-portrait{margin-inline:auto;margin-top:1.6rem} .doc-body{text-align:center} .doc-body .doc-list li,.doc-body .doc-num li,.leak,.fact,.doc-steps li, .legal-body,.faq-a-in{text-align:left} .leak-q{text-align:left} .doc-links{justify-content:center} .pull-quote{text-align:center} } /* =========================================================== 36 · Anpassungen v15 (30.08.2026) =========================================================== */ /* --- 4.1 · Der Hero füllt den ersten Bildschirm ------------ */ .hero{ min-height:100svh; /* Fallback für ältere Browser */ min-height:100dvh; /* die Fensterhöhe, die mobil wirklich gilt */ align-items:center; padding-top:calc(var(--head-h) + 1.6em); padding-bottom:clamp(1.6rem,4vh,3rem)} .hero-grid{align-items:center} /* Flache Fenster: der Knopf hat Vorrang, die Zahlen wandern unter die Falz */ @media (min-width:720px) and (max-height:760px){ .hero{padding-top:calc(var(--head-h) + 1rem)} .hero h1{font-size:clamp(1.9rem,3.4vw,2.9rem)} .hero-lead{margin-top:1.1rem;font-size:1.02rem} .hero-act{margin-top:1.3rem} .trust{position:absolute;left:0;right:0;top:100svh;top:100dvh; padding-inline:var(--pad);max-width:var(--wrap);margin-inline:auto} .hero{position:relative;overflow:visible} } @media (max-width:719px){ .hero{padding-top:calc(var(--head-h) + 1.2rem)} .trust{margin-top:2rem} } /* Hohe Fenster: hier wird nicht mehr zentriert. Bei 1080 Pixel Fensterhöhe standen über der Augenbraue 229 Pixel Leere — mehr als die Kopfleiste hoch ist. Zentrieren verteilt jeden zusätzlichen Pixel je zur Hälfte nach oben und unten; oben ist er verschenkt, unten ist er die Einladung weiterzuscrollen. Ab hier sitzt der Inhalt also oben mit festem Abstand, und der Überschuss fällt nach unten. Unterhalb dieser Höhe bleibt es beim Zentrieren (v15, 4.1). */ @media (min-width:720px) and (min-height:920px){ .hero{align-items:flex-start;padding-top:clamp(150px,15vh,196px)} } /* --- 4.2 · Scroll-Snap: abgeschaltet ------------------------ v15/4.2 verlangte „y proximity“. Umgesetzt war es, es kostet aber genau das, was oben drübersteht: den flüssigen Lauf. Proximity greift nach dem Trackpad-Schwung in die Scrollposition und zieht sie nach — das fühlt sich an, als würde die Seite gegen die Hand arbeiten. Die Regel „immer flüssig, natives Scrollen“ schlägt den Einrast-Effekt. Zurückholen ist eine Zeile: den Block unten wieder einkommentieren. @media (min-width:768px) and (prefers-reduced-motion:no-preference){ html{scroll-snap-type:y proximity} .hero,.band,.stage,.sec{scroll-snap-align:start;scroll-snap-stop:normal} .sec-l,.sec-xl,.stage,#angebot,#faq,#funde,#found,#ps{scroll-snap-align:none} } ------------------------------------------------------------ */ /* --- 4.3a · Die vier Zustände des Scans sind sichtbar ------ */ .stage-inner{display:grid;gap:clamp(1.2rem,2.6vw,2.2rem)} @media (min-width:640px){.stage-inner{grid-template-columns:auto minmax(0,1fr);align-items:start}} .scan-rail{display:grid;gap:0;padding-top:.35rem;position:relative} .scan-rail::before{content:"";position:absolute;left:11px;top:1.1rem;bottom:1.1rem;width:1px; background:var(--ln-d)} .scan-rail li{display:flex;align-items:center;gap:.7rem;height:2.6rem;position:relative} .scan-rail b{font-family:var(--ff-d);font-size:11px;font-weight:700;letter-spacing:.14em; font-variant-numeric:tabular-nums;color:var(--tx-dm);width:22px; transition:color .45s var(--e-out)} .scan-rail i{display:block;width:10px;height:1px;background:var(--tx-dm);opacity:.5; transition:width .45s var(--e-out),background-color .45s var(--e-out),opacity .45s ease} .scan-rail li.on b{color:var(--red-lit)} .scan-rail li.on i{width:26px;background:var(--red-lit);opacity:1} .scan-rail li.done b{color:var(--tx-d)} @media (max-width:639px){ .scan-rail{grid-auto-flow:column;justify-content:start;gap:1.1rem} .scan-rail::before{left:0;right:0;top:1.3rem;bottom:auto;width:auto;height:1px} .scan-rail li{height:auto;flex-direction:column;gap:.4rem} .scan-rail i{width:14px} } /* --- 4.3b · Die Stufen stehen an der Kette ----------------- */ .node-labels{position:fixed;inset:0;z-index:1;pointer-events:none;margin:0;padding:0; opacity:0;transition:opacity .6s var(--e-io)} .node-labels.on{opacity:1} html.js .node-labels li{position:absolute;top:0;left:0;transform:translate(-50%,-50%); white-space:nowrap;opacity:0;transition:opacity .35s ease} html.js .node-labels li.vis{opacity:1} .node-labels b{font-family:var(--ff-d);font-size:10px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--tx-d); background:rgba(6,9,13,.82);padding:.28em .55em;border-radius:2px} .node-labels li.leak b{color:var(--red-lit);background:rgba(6,9,13,.9)} /* Ohne JavaScript bleibt die Liste als lesbare Aufzählung stehen */ html.no-js .node-labels{position:static;opacity:1;display:flex;flex-wrap:wrap;gap:.5rem 1rem; padding:0 var(--pad) 3rem} @media (prefers-reduced-motion:reduce){ .node-labels{opacity:1} html.js .node-labels li{opacity:1} } /* --- 4.5 · Die zweite Tür ist eine andere Tür -------------- Nicht Gold, nicht Braun. Die Seilschaft führt fünf Tage in die Alpen — die Farbe kommt von dort: kaltes Gletscherblau. Sie steht dem Signalrot des Erstgesprächs gegenüber, statt sich mit ihm zu erwärmen, und sie bedeutet etwas, statt nur „hochwertig“ zu behaupten. */ :root{--door:#3E7FA8;--door-lit:#6FB2DC;--door-bg:#0C1319;--door-panel:#121A22} .sec-door{background:var(--door-bg)} body:not(.has-xray) .sec-door{background:var(--door-bg)} .rule-door{background:var(--ln-d)} .rule-door i{background:linear-gradient(90deg,transparent,var(--door-lit),transparent)} .sec-door .door{background:linear-gradient(165deg,rgba(111,178,220,.10),rgba(111,178,220,.03)); box-shadow:inset 0 0 0 1px rgba(111,178,220,.26)} .sec-door .lbl{color:var(--door-lit)} .sec-door h3{color:#EAF1F6} .sec-door p{color:#A9BECD} .btn-door{--bg:transparent;--fg:var(--door-lit); box-shadow:inset 0 0 0 1px rgba(111,178,220,.55); padding:.95em 1.6em;font-size:15.5px} .btn-door:hover{--fg:#EAF1F6;box-shadow:inset 0 0 0 1px var(--door-lit)} .btn-door::after{background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),rgba(111,178,220,.22),transparent 70%)} /* --- Platz für die erste Kundenstimme ---------------------- */ .voice{margin:clamp(2.4rem,5vw,3.6rem) 0 0;padding:clamp(1.5rem,3vw,2.4rem); border-radius:var(--r-l) var(--r-s) var(--r-l) var(--r-s);background:#F7F8FA; box-shadow:inset 0 0 0 1px rgba(8,13,18,.10);max-width:44rem} .voice blockquote{margin:0} .voice p{font-family:var(--ff-d);font-weight:620;letter-spacing:-.02em; font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.45;color:var(--tx-lh)} .voice figcaption{margin-top:1rem;font-family:var(--ff-d);font-size:11px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--tx-lm)} [hidden]{display:none !important} /* Beschriftungen ohne Bewegung: als lesbare Aufzählung */ .node-labels.static{position:static;opacity:1;display:flex;flex-wrap:wrap;gap:.5rem 1rem; padding:0 var(--pad) 3rem;max-width:var(--wrap);margin-inline:auto} .node-labels.static li{position:static;transform:none;opacity:1} /* Die Seilschaft führt die Akzentfarbe der zweiten Tür weiter. Der gefüllte rote Knopf bleibt rot, weil er auf der ganzen Seite genau ein Ziel hat: das Erstgespräch. */ body.pg-door .doc-hero{background:var(--door-bg)} body.pg-door .doc-hero::before{ background:radial-gradient(circle at 60% 40%,rgba(111,178,220,.17),rgba(62,127,168,.06) 42%,transparent 70%)} body.pg-door .doc-hero .lbl{color:var(--door-lit)} body.pg-door .doc-hero .crumbs a:hover{color:var(--door-lit)} body.pg-door .sec-light .lbl-red, body.pg-door .sec-light .ac, body.pg-door .doc-links a, body.pg-door .leak-stage, body.pg-door .plan-when{color:#1B5A7E} body.pg-door .doc-list li::before, body.pg-door .doc-rule i{background:var(--door)} body.pg-door .value-list li::before{background-color:rgba(62,127,168,.18); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231B5A7E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 4.8 9.5 10 3'/%3E%3C/svg%3E")} body.pg-door .leak-q{border-left-color:var(--door)} body.pg-door .price{color:var(--tx-lh)} body.pg-door .sec-light .tl:hover{color:#1B5A7E} /* =========================================================== 35 · Der Grundsatz, die Formatzeile, die Opt-in-Seite (Anpassungsrunde September 2026) =========================================================== */ /* --- 35.1 · Der Grundsatz --------------------------------- Eine ruhige Sektion über die volle Breite, direkt unter «Wer ich bin». Viel Weissraum, kein Knopf, kein Beiwerk. Die erste Zeile steht deutlich grösser als der Fliesstext, in der Schrift der Sektionsüberschriften. */ .tenet{text-align:left} .tenet-in{max-width:44rem;margin-inline:auto;text-align:center; padding-block:clamp(1rem,4vh,3rem)} .tenet-h{font-family:var(--ff-d);font-weight:700;letter-spacing:-.032em; font-size:clamp(1.85rem,4vw,3.2rem);line-height:1.06;color:var(--tx-dh); font-variation-settings:"wdth" 108;text-wrap:balance} .sec-light .tenet-h{color:var(--tx-lh)} .tenet-p{margin-top:clamp(1.4rem,3vh,2.2rem); font-size:clamp(1.02rem,1.25vw,1.22rem);line-height:1.62;color:var(--tx-d); text-wrap:pretty} .sec-light .tenet-p{color:var(--tx-l)} /* --- 35.2 · Die Formatzeile ------------------------------- Steht überall dort, wo die Liste oder der Bogen angeboten wird, unmittelbar beim Knopf. */ .format-line,.band-format{margin-top:.9rem;font-size:14px;line-height:1.5; color:var(--tx-dm);letter-spacing:.005em} .sec-light .format-line,.sec-light .band-format{color:var(--tx-lm)} .band-format{margin-top:.6rem;color:rgba(255,255,255,.72)} .op-act .format-line{margin-top:1.05rem} /* Der Knopf und die Formatzeile auf der Lektionen-Seite */ .offer-line{display:flex;align-items:center;gap:1.1rem 1.4rem;flex-wrap:wrap; margin-top:2rem} .offer-line .format-line{margin-top:0} .btn-sm{padding:.82em 1.3em;font-size:15px} /* --- 35.3 · Kopf und Fuss der Opt-in-Seite ---------------- Kein Menü, kein Sprachwechsler, kein Knopf: die Seite soll niemanden wieder hinausführen. Der Fuss trägt Impressum, Datenschutz und den Weg zurück zur Startseite, sonst nichts. */ .site-header-bare .wrap{justify-content:flex-start} .brand-static{color:var(--tx-dh);text-decoration:none} .site-footer-slim .ft-nav-slim{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem; font-size:15px} .site-footer-slim .ft-legal{margin-top:1.4rem} /* --- 35.4 · Die Opt-in-Seite ------------------------------ */ body.pg-optin{padding-top:var(--head-h)} .op-hero{padding-top:clamp(3rem,8vh,6rem)} .op-hero-grid{display:grid;gap:clamp(2.4rem,5vw,4.5rem);align-items:center} @media (min-width:920px){ .op-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} } .op-hero h1{margin-top:1.1rem;max-width:20ch; font-size:clamp(2rem,3.6vw,3.3rem)} /* «Zwölf-Stellen-Bogen» darf nicht am Bindestrich umbrechen; «Der Zwölf-» allein auf einer Zeile liest sich wie ein Fehler. */ .op-hero h1 .nb{white-space:nowrap} .op-hero .lead{margin-top:1.5rem;max-width:36rem} .op-act{margin-top:2.2rem} .op-act .btn{max-width:100%} /* Das Heldenbild: der Bogen als Blatt, gezeichnet statt fotografiert. Keine zusätzliche Datei, kein Stimmungsbild. */ .op-sheet{perspective:1400px} .op-sheet-3d{position:relative;transform:rotateX(6deg) rotateY(-13deg) rotateZ(1.5deg); transform-style:preserve-3d;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))} .op-sheet-page{position:relative;aspect-ratio:210/297;width:min(100%,340px); margin-inline:auto;background:linear-gradient(168deg,#F7F8FA,#DDE2E7); border-radius:3px;padding:9% 8% 8%;display:flex;flex-direction:column;gap:2.1%; box-shadow:inset 0 0 0 1px rgba(8,13,18,.16)} .op-sheet-page .sh-head{display:block;height:5.5%;background:rgba(8,13,18,.72); border-radius:1px;width:62%;flex:none} .op-sheet-page .sh-row{display:flex;align-items:center;gap:4%;flex:1 1 0;min-height:0} .op-sheet-page .sh-row i{display:block;height:2.4px;background:rgba(8,13,18,.42); border-radius:1px} .op-sheet-page .sh-row b{display:block;flex:1 1 0;height:2px; background:rgba(8,13,18,.20);border-radius:1px} .op-sheet-page .sh-sum{display:block;height:3px;background:rgba(8,13,18,.75); border-radius:1px;flex:none;margin-top:1.5%} /* Die Scan-Linie: dieselbe Marke wie im Röntgen, nur langsam. */ .op-sheet-scan{position:absolute;left:-4%;right:-4%;top:0;height:16%; border-radius:2px;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,93,80,.14) 44%,rgba(255,93,80,.5) 50%,rgba(255,93,80,.14) 56%,transparent); animation:opscan 7s var(--e-io) infinite} @keyframes opscan{0%{transform:translateY(-30%);opacity:0} 8%{opacity:1}82%{opacity:1}100%{transform:translateY(640%);opacity:0}} @media (prefers-reduced-motion:reduce){.op-sheet-scan{animation:none;opacity:.5;top:38%}} .op-preview{max-width:44rem;margin-top:clamp(2rem,4vw,3rem)} .op-faq{max-width:44rem;margin-top:clamp(2rem,4vw,3rem)} .op-points{margin-top:clamp(2rem,4vw,2.8rem);display:grid;gap:1rem;max-width:48rem} .op-points li{position:relative;padding-left:2rem;font-size:16.5px;line-height:1.6} .op-points li b{color:var(--tx-dh);font-weight:600} .sec-light .op-points li b{color:var(--tx-lh)} .op-points li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px; border-radius:50%;background:var(--red);box-shadow:0 0 14px rgba(210,39,48,.7)} .op-form-in{max-width:40rem} .op-form-in h2{font-size:clamp(1.6rem,2.9vw,2.5rem);max-width:22ch} .op-form-in form{margin-top:clamp(2rem,4vw,2.8rem)} .op-form-in .btn{width:100%;margin-top:.6rem} .op-form-in .form-priv{margin-top:1.1rem} .op-thanks h1{max-width:18ch} @media (max-width:919px){ .op-sheet{margin-inline:auto;max-width:300px} .op-sheet-3d{transform:rotateX(4deg) rotateY(-8deg)} } @media (max-width:719px){ .op-hero-grid{justify-items:center} .op-act .btn{width:100%} .op-form-in{margin-inline:auto} .op-preview,.op-faq,.op-points{margin-inline:auto;text-align:left} .op-points li{text-align:left} }