/* ========================================================================= seitenfertig.de — app.css · Runde 3 „Werkbanklicht" (2026-08-28) Anker: geschaeftsadresse-online.de (das einzige vom Inhaber freigegebene Design). Aufbau: MOBILE FIRST. Jede Verbreiterung laeuft ueber @media(min-width:...). Eine spaeter im File stehende nackte Regel kann damit keinen Breakpoint ueberschreiben (FEHLER-019). Overrides ausschliesslich am Dateiende. Verboten in diesem Projekt: Mono, Nummern-Kicker, Raster-/Blaupausenoptik, Petrol, gleichfoermige Kartenreihen, Kursiv. ========================================================================= */ /* ---------------------------------------------------------------- Tokens */ :root{ /* Warmes Creme, Espresso statt Nachtblau, ein Bernstein-Akzent. */ --papier:#F7F1E6; --papier-2:#EFE4D3; --papier-3:#FBF7EF; --karte:#FFFDF8; --tinte:#241C16; --tinte-2:#33281F; --text:#3D322A; --leise:#726457; --leiser:#8E8175; --bernstein:#B0731A; --bernstein-tief:#8A5A11; --bernstein-hell:#E0A94A; --auf-tinte:#F6EDDE; --auf-tinte-leise:#BCAB96; --linie:rgba(36,28,22,.15); --linie-2:rgba(36,28,22,.075); --linie-nacht:rgba(246,237,222,.15); --linie-nacht-2:rgba(246,237,222,.08); --fd:"Newsreader",Georgia,"Times New Roman",serif; --fb:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --dur:620ms; --dur-kurz:240ms; --r:14px; --r-klein:11px; --max:1340px; --rand:18px; /* Abstand Wrap-Kante -> Viewport-Kante. Genau so weit darf ein Element bluten. */ --gutter:max(var(--rand),calc((100vw - var(--max)) / 2)); /* EIN Lichtsystem: Licht von oben links, drei gestaffelte Stufen. */ --nah:0 1px 2px rgba(36,28,22,.10); --fern:0 30px 62px -30px rgba(36,28,22,.42); --tief:0 2px 6px rgba(36,28,22,.13), 0 52px 92px -34px rgba(36,28,22,.52); --tief-nacht:0 3px 8px rgba(0,0,0,.26), 0 56px 96px -34px rgba(0,0,0,.60); --glow:0 0 0 1px rgba(224,169,74,.22), 0 44px 84px -34px rgba(176,115,26,.42); --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------- Grundlagen */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth} /* Doppelt gesichert: `overflow-x:clip` allein auf hat den Wheel-Seitwaerts- Scroll nicht verhindert (gemessen: scrollX bis 308 px). */ body{overflow-x:clip} body{ margin:0;background:var(--papier);color:var(--text); font-family:var(--fb);font-size:16.5px;line-height:1.6;font-weight:400; hyphens:manual;overflow-wrap:break-word;-webkit-font-smoothing:antialiased; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:90; opacity:.035;background-image:var(--korn); } h1,h2,h3{ font-family:var(--fd);font-weight:500;letter-spacing:-.014em;line-height:1.07; word-break:keep-all;margin:0;color:var(--tinte);font-style:normal; } p,ul,ol,dl,dd{margin:0} img,svg{display:block;max-width:100%} a{color:var(--bernstein-tief)} :focus-visible{outline:2.5px solid var(--bernstein);outline-offset:3px;border-radius:4px} .skip{position:absolute;left:-9999px;min-height:44px;display:inline-flex;align-items:center} .skip:focus{left:14px;top:14px;z-index:200;background:var(--tinte);color:var(--auf-tinte); padding:11px 16px;border-radius:8px;text-decoration:none} .wrap{width:min(100% - (var(--rand) * 2),var(--max));margin-inline:auto} /* Kleines gesperrtes Sans-Label — ersetzt die alten Mono-Kicker vollstaendig. */ .kick{ display:inline-flex;align-items:center;gap:11px; font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--bernstein-tief);margin:0; } .kick::before{content:"";width:26px;height:1.5px;background:var(--bernstein);flex:none} .kick--hell{color:var(--bernstein-hell)} .kick--hell::before{background:var(--bernstein-hell)} .zahl{font-variant-numeric:tabular-nums} .nowrap{white-space:nowrap} /* ------------------------------------------------------------ Kopf + Fuss */ .rail{background:var(--tinte);color:var(--auf-tinte-leise);font-size:13px} .rail .wrap{display:flex;gap:0 22px;justify-content:space-between;align-items:center; padding:6px 0;flex-wrap:wrap} .rail p{min-width:0} .rail b{color:var(--auf-tinte);font-weight:500} .rail a{color:var(--bernstein-hell);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;text-decoration-color:rgba(224,169,74,.5); display:inline-flex;align-items:center;min-height:44px} .rail a:hover{border-bottom-color:var(--bernstein-hell)} .kopf{position:sticky;top:0;z-index:80;padding-top:12px;transition:padding-top var(--dur-kurz) var(--ease)} .kopf-karte{ display:flex;align-items:center;gap:14px; background:var(--karte);border:1px solid var(--linie);border-radius:16px; padding:10px 10px 10px 18px;box-shadow:var(--fern); transition:box-shadow var(--dur-kurz) var(--ease),padding var(--dur-kurz) var(--ease); } .ist-geschrumpft .kopf{padding-top:6px} .ist-geschrumpft .kopf-karte{box-shadow:var(--tief);padding-block:7px} .marke{ font-family:var(--fd);font-size:26px;font-weight:500;letter-spacing:-.028em; color:var(--tinte);text-decoration:none;line-height:1;margin-right:auto;white-space:nowrap; display:inline-flex;align-items:center;min-height:44px; /* Tippflaeche, Optik unveraendert */ } .marke i{font-style:normal;color:var(--bernstein);box-shadow:inset 0 -5px 0 rgba(224,169,74,.38)} .kopf-nav{display:none} .kopf-tat{ display:inline-flex;align-items:center;gap:9px;background:var(--bernstein);color:#fff; font-weight:600;font-size:14.5px;border-radius:999px;padding:11px 18px;text-decoration:none; white-space:nowrap; box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 10px 22px -13px rgba(138,90,17,.95); transition:transform var(--dur-kurz) var(--ease),box-shadow var(--dur-kurz) var(--ease); } .kopf-tat .tat-lang{display:none} .kopf-tat svg{display:none;transition:transform var(--dur-kurz) var(--ease)} .kopf-tat:hover{box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 16px 30px -14px rgba(138,90,17,.95)} .kopf-tat:hover svg{transform:translateX(3px)} .burger{ width:44px;height:44px;flex:none;border:1.5px solid var(--linie);background:transparent; border-radius:50%;cursor:pointer;padding:0; display:flex;flex-direction:column;align-items:center;justify-content:center; } .burger i{display:block;width:17px;height:1.6px;background:var(--tinte);border-radius:2px; transition:transform var(--dur-kurz) var(--ease),opacity var(--dur-kurz) var(--ease)} .burger i + i{margin-top:4.5px} .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.1px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.1px) rotate(-45deg)} .panel{ display:none;margin-top:8px;background:var(--karte);border:1px solid var(--linie); border-radius:16px;box-shadow:var(--tief);padding:8px; } .panel.ist-offen{display:block} .panel a{display:block;padding:13px 14px;color:var(--tinte);text-decoration:none;font-size:16px; border-bottom:1px solid var(--linie-2)} .panel a:last-child{border-bottom:0} .fuss{background:var(--tinte);color:var(--auf-tinte-leise);padding:52px 0 34px;margin-top:0} .fuss-innen{display:grid;gap:26px} .fuss .marke{color:var(--auf-tinte);font-size:28px;margin-right:0} .fuss .marke i{color:var(--bernstein-hell);box-shadow:inset 0 -5px 0 rgba(224,169,74,.28)} .fuss-meta{font-size:13.5px;margin-top:8px} .fuss-nav{display:flex;flex-wrap:wrap;gap:0 24px} .fuss-nav a{color:var(--auf-tinte);font-size:14.5px; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px; text-decoration-color:var(--linie-nacht); display:inline-flex;align-items:center;min-height:44px;min-width:44px} /* Tippflaeche 44x44 */ .fuss-nav a:hover{text-decoration-color:var(--bernstein-hell)} .fuss-hinweis{font-size:12.5px;line-height:1.55;color:var(--auf-tinte-leise);max-width:70ch; border-top:1px solid var(--linie-nacht-2);padding-top:20px} /* ------------------------------------------------------- Fenster-Bausatz */ /* Ein Rezept fuer JEDEN Kundenscreenshot: gleiches Chrome, gleiche Radien, gleiche Schattenformel. Macht heterogenes Material zu einer Wand. */ .fenster{ background:var(--karte);border:1px solid var(--linie);border-radius:12px;overflow:hidden; box-shadow:var(--tief);margin:0; transition:transform var(--dur-kurz) var(--ease),box-shadow var(--dur-kurz) var(--ease); } .fl{display:flex;align-items:center;gap:7px;padding:9px 13px; border-bottom:1px solid var(--linie-2);background:linear-gradient(180deg,#FFFDF8,#F5EEE2)} .fl i{width:8px;height:8px;border-radius:50%;background:rgba(36,28,22,.16);flex:none} .fl span{margin-left:8px;font-size:12.5px;color:var(--leise);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fl em{font-style:normal;color:var(--bernstein-tief);font-weight:600;margin-left:12px; font-size:12px;white-space:nowrap;flex:none} .fenster img{width:100%;height:auto} .fenster--glow{box-shadow:var(--tief),var(--glow)} a.fenster-halt{display:block;text-decoration:none;color:inherit} a.fenster-halt:hover .fenster{transform:translateY(-3px);box-shadow:var(--tief),var(--glow)} /* --------------------------------------------------------------- Knoepfe */ .knopf{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:inherit;font-size:15.5px;font-weight:600;line-height:1; border:0;border-radius:999px;padding:15px 24px;cursor:pointer;text-decoration:none; min-height:48px;white-space:nowrap; transition:transform var(--dur-kurz) var(--ease),box-shadow var(--dur-kurz) var(--ease), background-color var(--dur-kurz) var(--ease); } .knopf svg{transition:transform var(--dur-kurz) var(--ease)} .knopf:hover svg{transform:translateX(3px)} .knopf--voll{background:var(--bernstein);color:#fff;forced-color-adjust:none; box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 12px 26px -14px rgba(138,90,17,.95)} .knopf--voll:hover{background:var(--bernstein-tief); box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 18px 34px -15px rgba(138,90,17,.95)} .knopf--linie{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--linie)} .knopf--linie:hover{box-shadow:inset 0 0 0 1.5px var(--bernstein);color:var(--bernstein-tief)} .knopf--hell{background:var(--bernstein-hell);color:#241C16;forced-color-adjust:none} .knopf--hell:hover{background:#EFBB61} /* ------------------------------------------------------------ 1 · Hero */ .hero{position:relative;z-index:3;padding:34px 0 0;overflow:visible} .hero-grid{display:grid;grid-template-columns:1fr;gap:26px} .hero h1{font-size:clamp(35px,8.4vw,63px);margin:18px 0 0;max-width:15ch} .akz{color:var(--bernstein-tief);position:relative;white-space:nowrap} .akz::after{content:"";position:absolute;left:0;right:0;bottom:.055em;height:.075em; background:var(--bernstein-hell);border-radius:3px;transform-origin:left center} .hero-lead{margin-top:20px;font-size:17.5px;max-width:46ch} .preiszeile{display:flex;align-items:baseline;gap:13px;margin-top:24px;flex-wrap:wrap} .preiszeile b{font-family:var(--fd);font-size:clamp(38px,9vw,46px);font-weight:500; color:var(--tinte);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap} .preiszeile span{font-size:13.5px;color:var(--leise);max-width:20ch;line-height:1.4} .hero-vertrauen{margin-top:24px;padding-top:18px;border-top:1px solid var(--linie-2); display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:var(--leise)} .hero-vertrauen b{color:var(--tinte);font-weight:600} .hero-buehne{position:relative;margin-top:6px} .hero-fenster{will-change:transform} /* Signaturgeste: das gestrichene Anfrageformular */ .gestrichen{ background:var(--karte);border:1px solid var(--linie);border-radius:var(--r); box-shadow:var(--tief);padding:20px 20px 22px;position:relative;z-index:5; } .gestrichen h2{font-family:var(--fb);font-size:11.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--leiser);line-height:1.4} .geist{margin:14px 0 0;padding:0;display:grid;gap:2px} .geist li{list-style:none;position:relative;font-size:14.5px;color:#9C8F81; border-bottom:1px solid var(--linie-2);padding:0 0 7px} /* Grundzustand: gestrichen. Ohne JS, ohne IO und bei Bewegungsreduktion ist die Geste damit sofort vollstaendig da. */ .geist li::after{ content:"";position:absolute;left:-3px;right:-3px;top:.53em;height:1.6px;border-radius:2px; background:var(--bernstein);opacity:.85;transform:scaleX(1);transform-origin:left center; } /* Nur wenn JS die Karte scharf schaltet, wird der Strich gezogen statt gesetzt. */ [data-strich].strich-bereit .geist li::after{ transform:scaleX(0);transition:transform 520ms var(--ease); } [data-strich].strich-bereit .geist li.ist-gestrichen::after{transform:scaleX(1)} .bleibt{margin-top:18px;padding-top:16px;border-top:1px solid var(--linie)} .bleibt-label{display:block;font-size:12px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--bernstein-tief);margin-bottom:9px} .feld-zeile{display:flex;gap:9px;flex-wrap:wrap} .feld-zeile input{ flex:1 1 190px;min-width:0;font:inherit;font-size:16px;padding:14px 15px; border:1.5px solid var(--linie);border-radius:var(--r-klein);background:#fff;color:var(--tinte); transition:border-color var(--dur-kurz) var(--ease),box-shadow var(--dur-kurz) var(--ease); } .feld-zeile input::placeholder{color:#A2958A} .feld-zeile input:focus{border-color:var(--bernstein);box-shadow:0 0 0 3px rgba(224,169,74,.22);outline:0} .feld-zeile .knopf{flex:1 1 auto;border-radius:var(--r-klein)} .hinweis{margin-top:11px;font-size:12.5px;color:var(--leise);line-height:1.5} .hinweis a{color:var(--bernstein-tief)} .formular-fehler{margin-top:10px;font-size:14px;color:#9B2C15;font-weight:600} .formular-fehler[hidden]{display:none} /* ------------------------------------------- 2 · Showroom auf Espresso */ .show{ background:var(--tinte);color:var(--auf-tinte);padding:66px 0 74px;position:relative; margin-top:60px; background-image:radial-gradient(105% 70% at 18% 0%,rgba(224,169,74,.16),transparent 62%), radial-gradient(80% 60% at 92% 100%,rgba(224,169,74,.07),transparent 60%); } .show::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05; background-image:var(--korn)} .show > .wrap{position:relative;z-index:2} .show h2{color:var(--auf-tinte);font-size:clamp(28px,6.4vw,46px);max-width:19ch;margin-top:16px} .show-sub{color:var(--auf-tinte-leise);max-width:54ch;margin-top:16px;font-size:16.5px} .show-kopf{margin-bottom:34px} /* Mobil ist die Wand eine Wischschiene: elf gestapelte Kacheln waeren eine Wueste. */ .wand{ display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;padding:2px var(--rand) 12px; margin-inline:calc(var(--rand) * -1);scrollbar-width:thin; } .kachel{flex:0 0 78%;min-width:0;scroll-snap-align:start} .wand .fenster{background:#2C221B;border-color:var(--linie-nacht);box-shadow:var(--tief-nacht)} .wand .fl{background:#332821;border-color:var(--linie-nacht-2)} .wand .fl i{background:rgba(246,237,222,.22)} .wand .fl span{color:var(--auf-tinte-leise)} .wand .fl em{color:var(--bernstein-hell)} .wand a.fenster-halt:hover .fenster{box-shadow:var(--tief-nacht),var(--glow)} .kachel-text{margin-top:11px;font-size:13px;color:var(--auf-tinte-leise);line-height:1.45} .kachel-text b{display:block;color:var(--auf-tinte);font-weight:600;font-size:15px; font-family:var(--fd);letter-spacing:-.01em} .kachel-text .adresse{color:var(--bernstein-hell)} .show-fuss{margin-top:34px;padding-top:22px;border-top:1px solid var(--linie-nacht-2); display:grid;gap:20px} .show-fuss p{color:var(--auf-tinte-leise);font-size:14px;max-width:66ch;margin:0} .show-fuss .knopf{justify-self:start} /* ------------------------------------------------- 3 · Vollbreiten-Band */ .band{position:relative;background:var(--tinte)} .band-bild{position:relative;overflow:hidden;height:280px} .band-bild img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.62} .band-bild::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(36,28,22,.72),rgba(36,28,22,.34) 42%,rgba(36,28,22,.88))} .band-innen{position:relative;z-index:3;margin-top:-280px;padding:44px 0 46px;color:var(--auf-tinte)} .band-karte{background:var(--karte);border-radius:var(--r);box-shadow:var(--tief-nacht); padding:22px 22px 24px;max-width:520px;color:var(--text)} .band-karte h2{font-size:clamp(24px,5.6vw,34px);margin-top:12px} .band-karte p{margin-top:12px;font-size:16px} .band-quelle{margin-top:14px;font-size:12.5px;color:var(--leiser)} /* ------------------------------------------------------------ 4 · Ablauf */ .ablauf{padding:64px 0 6px} .ablauf-kopf{display:grid;gap:14px;margin-bottom:34px} .ablauf h2{font-size:clamp(28px,6.4vw,44px);max-width:18ch;margin-top:14px} .ablauf-sub{max-width:52ch;font-size:16.5px} .ablauf-innen{display:grid;gap:36px} .spur{display:grid;grid-template-columns:1fr;gap:30px;padding:0;margin:0;list-style:none} .handy{margin:0} .handy-rahmen{background:var(--tinte);border-radius:26px;padding:8px;box-shadow:var(--tief); max-width:250px;margin-inline:auto} .handy-rahmen img{width:100%;height:auto;border-radius:19px} .handy figcaption{margin-top:14px;font-size:13.5px;color:var(--leise);line-height:1.5; max-width:34ch;margin-inline:auto;text-align:center} .etappe{position:relative;padding-top:16px} .etappe::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px; background:linear-gradient(90deg,var(--bernstein) 0 34px,var(--linie) 34px)} .etappe::after{content:"";position:absolute;left:0;top:-3px;width:9px;height:9px;border-radius:50%; background:var(--bernstein)} .etappe-n{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--bernstein-tief)} .etappe h3{font-size:21px;margin-top:9px} .etappe p{margin-top:9px;font-size:15.5px;color:var(--text)} .etappe .fenster{margin-top:16px} /* ------------------------------------------------------------ 5 · Preise */ .preise{position:relative;background:var(--papier-2);padding:66px 0 72px;margin-top:64px; overflow:hidden} .preise::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.04; background-image:var(--korn)} .preise > .wrap{position:relative;z-index:2} .preis-ziffer{position:absolute;right:-3%;top:1%;font-family:var(--fd);font-weight:500; font-size:clamp(130px,26vw,420px);line-height:.8;color:rgba(36,28,22,.035); pointer-events:none;user-select:none;z-index:1;letter-spacing:-.05em} .preise h2{font-size:clamp(28px,6.4vw,44px);max-width:17ch;margin-top:14px} .preise-sub{max-width:50ch;margin-top:14px} .preise-kopf{margin-bottom:34px} .tarife{display:grid;grid-template-columns:1fr;gap:20px} .tarif{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r); padding:26px 24px 28px;box-shadow:var(--fern)} .tarif--dunkel{background:var(--tinte);color:var(--auf-tinte-leise);border-color:transparent; box-shadow:var(--tief-nacht)} .tarif-kick{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--bernstein-tief)} .tarif--dunkel .tarif-kick{color:var(--bernstein-hell)} .tarif-preis{font-family:var(--fd);font-weight:500;font-size:clamp(46px,11vw,58px);line-height:1; color:var(--tinte);margin-top:10px;font-variant-numeric:tabular-nums;white-space:nowrap} .tarif--dunkel .tarif-preis{color:var(--auf-tinte)} .tarif-preis span{font-size:.52em;margin-left:6px} .tarif-sub{font-size:13px;color:var(--leise);margin-top:6px} .tarif--dunkel .tarif-sub{color:var(--auf-tinte-leise)} .tarif-was{margin-top:16px;font-size:15.5px;color:var(--text)} .tarif--dunkel .tarif-was{color:var(--auf-tinte-leise)} .tarif-liste{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px} .tarif-liste li{position:relative;padding-left:24px;font-size:15px; border-bottom:1px solid var(--linie-2);padding-bottom:10px} .tarif--dunkel .tarif-liste li{border-bottom-color:var(--linie-nacht-2)} .tarif-liste li::before{content:"";position:absolute;left:2px;top:.44em;width:9px;height:5px; border-left:1.8px solid var(--bernstein);border-bottom:1.8px solid var(--bernstein); transform:rotate(-45deg)} .tarif--dunkel .tarif-liste li::before{border-color:var(--bernstein-hell)} .tarif .knopf{width:100%} .neben{display:grid;gap:18px} .neben-block{background:transparent;border-top:2px solid var(--bernstein);padding-top:16px} .neben-kick{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--bernstein-tief)} .neben-preis{font-family:var(--fd);font-size:34px;font-weight:500;color:var(--tinte);margin-top:6px; font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1} .neben-preis small{font-family:var(--fb);font-size:14px;color:var(--leise);margin-left:2px} .neben-text{margin-top:9px;font-size:14.5px;color:var(--text)} .preise-fuss{margin-top:28px;font-size:13px;color:var(--leise);max-width:74ch} /* ---------------------------------------------------------- 6 · Klartext */ .klartext{padding:64px 0 70px} .klartext h2{font-size:clamp(28px,6.4vw,44px);max-width:14ch;margin-top:14px} .klartext-kopf{margin-bottom:30px} .spalten{display:grid;grid-template-columns:1fr;gap:28px} .spalte-kopf{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--bernstein-tief);padding-bottom:12px;border-bottom:2px solid var(--bernstein)} .spalte--nein .spalte-kopf{color:var(--leiser);border-bottom-color:var(--linie)} .spalte ul{list-style:none;padding:0;margin:0} .spalte li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--linie-2); font-size:15.5px} .spalte--ja li::before{content:"";position:absolute;left:2px;top:1.05em;width:9px;height:5px; border-left:1.8px solid var(--bernstein);border-bottom:1.8px solid var(--bernstein); transform:rotate(-45deg)} .spalte--nein li{color:var(--leise)} .spalte--nein li::before{content:"";position:absolute;left:2px;top:1.35em;width:11px;height:1.6px; background:var(--leiser);border-radius:2px} .klartext-note{margin-top:26px;font-size:15px;color:var(--text);max-width:70ch; border-left:3px solid var(--bernstein);padding-left:18px} /* ------------------------------------------------------------ 7 · Fragen */ .fragen{padding:64px 0 70px;background:var(--papier-2);position:relative;overflow:hidden} .fragen::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.04; background-image:var(--korn)} .fragen > .wrap{position:relative;z-index:2} .fragen h2{font-size:clamp(28px,6.4vw,44px);max-width:12ch;margin-top:14px} .fragen-kopf{margin-bottom:26px} .fragen-sub{margin-top:14px;max-width:38ch;color:var(--text)} .frage{border-top:1px solid var(--linie)} .fragen-liste .frage:last-child{border-bottom:1px solid var(--linie)} .frage summary{ list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px; padding:18px 0;font-family:var(--fd);font-size:19px;font-weight:500;color:var(--tinte); line-height:1.25; } .frage summary::-webkit-details-marker{display:none} .frage summary span{flex:1;min-width:0} .kreuz{position:relative;flex:none;width:18px;height:18px;margin-top:4px} .kreuz::before,.kreuz::after{content:"";position:absolute;left:0;top:8px;width:18px;height:1.8px; background:var(--bernstein);border-radius:2px;transition:transform var(--dur-kurz) var(--ease)} .kreuz::after{transform:rotate(90deg)} .frage[open] .kreuz::after{transform:rotate(0deg)} .frage-inhalt{padding:0 0 20px;max-width:72ch} .frage-inhalt p{font-size:15.5px;color:var(--text)} /* ----------------------------------------------------------- 8 · Schluss */ .schluss{position:relative;background:var(--tinte);color:var(--auf-tinte);overflow:hidden} .schluss-bild{position:absolute;inset:0;z-index:1} /* Makro-Ausschnitt statt Ganzseite: die Aufnahme wird auf das Foto der Kundenseite (Trauringe auf Sand) hineingezoomt. Sonst laeuft deren Headline gegen unsere eigene an — zwei Ueberschriften in einem Bild lesen sich als Fehler, nicht als Tiefe. */ .schluss-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.72; transform:scale(2.35);transform-origin:79% 58%} .schluss-bild::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(36,28,22,.94) 0 40%,rgba(36,28,22,.74) 64%, rgba(36,28,22,.52) 100%)} .schluss-innen{position:relative;z-index:3;padding:66px 0 72px;display:grid;gap:28px} .schluss-text h2{color:var(--auf-tinte);font-size:clamp(28px,6.4vw,46px);max-width:17ch;margin-top:16px} .schluss-lead{color:var(--auf-tinte-leise);max-width:48ch;margin-top:16px} .schluss-quelle{margin-top:18px;font-size:12.5px;color:var(--auf-tinte-leise);opacity:.85} .schluss .gestrichen{background:var(--karte);border-color:transparent;box-shadow:var(--tief-nacht)} /* ------------------------------------------------- Schmale Seiten / Recht */ /* Lesetypografie: Zeilenlaenge 66ch statt 74ch (bei 16,5 px rund 68 Zeichen — der Bereich, in dem laufender Rechtstext ohne Zeilenverlust gelesen wird), jede Ziffernebene mit eigener Zaesur: h2 mit Haarlinie und Bernsteinmarke, h3 leise in der Sans, Listen mit eigener Marke statt Browser-Punkt. */ .schmal,.recht{padding:46px 0 74px} .schmal-innen,.recht-innen{width:min(100% - (var(--rand) * 2),66ch);margin-inline:auto} .schmal h1,.recht h1{font-size:clamp(32px,7vw,46px);margin-top:14px} .schmal-lead{margin-top:16px;font-size:17px;color:var(--text)} .recht h1{max-width:18ch} .recht-lead{margin-top:16px;font-size:17.5px;line-height:1.62;color:var(--text);max-width:52ch} .recht h2{ font-size:24px;margin-top:52px;padding-top:26px;border-top:1px solid var(--linie); position:relative; } .recht h2::before{content:"";position:absolute;left:0;top:-1px;width:34px;height:2px; background:var(--bernstein)} .recht h3{font-size:17px;margin-top:28px;font-family:var(--fb);font-weight:600; letter-spacing:.005em;color:var(--tinte)} .recht p,.recht li{margin-top:13px;font-size:16.5px;line-height:1.68} .recht h2 + p,.recht h3 + p{margin-top:14px} .recht ul{margin-top:16px;padding-left:0;list-style:none} .recht li{position:relative;padding-left:22px;margin-top:11px} .recht li::before{content:"";position:absolute;left:1px;top:.72em;width:10px;height:1.6px; background:var(--bernstein);border-radius:2px;opacity:.75} .recht a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; text-decoration-color:rgba(176,115,26,.45)} .recht a:hover{text-decoration-color:var(--bernstein)} .recht-stand{margin-top:52px;padding-top:16px;border-top:1px solid var(--linie); font-size:13px;color:var(--leise)} .platzhalter{color:var(--leiser)} /* ------------------------------------------------------- Formularfelder */ .feld{margin-top:18px;min-width:0} .feld > label{display:block;font-size:13px;font-weight:600;color:var(--tinte);margin-bottom:8px; letter-spacing:.005em} .feld-zusatz{display:block;font-weight:400;color:var(--leise);font-size:12.5px;margin-top:2px} .feld input[type=text],.feld input[type=email],.feld textarea{ width:100%;font:inherit;font-size:16px;padding:14px 15px;border:1.5px solid var(--linie); border-radius:var(--r-klein);background:#fff;color:var(--tinte);min-height:50px; transition:border-color var(--dur-kurz) var(--ease),box-shadow var(--dur-kurz) var(--ease)} .feld textarea{line-height:1.55;resize:vertical} .feld input::placeholder,.feld textarea::placeholder{color:#A2958A} .feld input[type=text]:hover,.feld input[type=email]:hover,.feld textarea:hover{ border-color:var(--leiser)} .feld input:focus,.feld textarea:focus{border-color:var(--bernstein); box-shadow:0 0 0 3px rgba(224,169,74,.22);outline:0} .wahl{display:flex;gap:12px;align-items:flex-start;margin-top:10px;font-size:15.5px; background:var(--papier-3);border:1.5px solid var(--linie);border-radius:var(--r-klein); padding:14px 16px;cursor:pointer;min-height:52px;line-height:1.5; transition:border-color var(--dur-kurz) var(--ease),background-color var(--dur-kurz) var(--ease), box-shadow var(--dur-kurz) var(--ease)} .wahl:hover{border-color:var(--bernstein-hell);background:var(--karte)} .wahl input{margin-top:3px;accent-color:var(--bernstein);width:19px;height:19px;flex:none} .wahl:has(input:checked){border-color:var(--bernstein);background:var(--karte);box-shadow:var(--nah)} /* ------------------------------------------------------------- Reveals */ [data-rev]{opacity:0;transform:translate3d(0,14px,0); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} [data-rev].ist-da{opacity:1;transform:none} /* ========================================================================= Bis 899 px — das Formular gehoert in den ersten Viewport (gemessen: ohne diesen Block stand das Eingabefeld bei 390x844 erst bei top:1327px, also weit unter der Falz). hero-links/hero-buehne werden zu display:contents, damit alle sieben Hero-Kinder EIN Flex-Stack mit eigener order sind: Kicker, H1, Lead, dann sofort die Signaturgeste (Formular), erst danach Preiszeile/Vertrauen/Bildfenster. Preis bleibt trotzdem sofort sichtbar, weil die Kopf-Pille "ab 490 €" schon in der Ink-Rail-Zeile darueber steht. ========================================================================= */ @media (max-width:899px){ .hero-links,.hero-buehne{display:contents} .hero-grid{display:flex;flex-direction:column;gap:0} .hero .kick{order:1} .hero h1{order:2} .hero-lead{order:3} .hero .gestrichen{order:4;margin-top:22px;display:flex;flex-direction:column} .hero .gestrichen h2{order:1} .hero .gestrichen .bleibt{order:2;margin-top:16px;padding-top:0;border-top:none} .hero .gestrichen .geist{order:3;margin-top:18px;padding-top:14px;border-top:1px solid var(--linie)} .preiszeile{order:5;margin-top:26px} .hero-vertrauen{order:6} .hero-fenster{order:7;margin-top:26px} } /* ========================================================================= Ab 620 px ========================================================================= */ @media (min-width:620px){ :root{--rand:26px} .kopf-tat .tat-lang{display:inline} .kopf-tat .tat-kurz{display:none} .kopf-tat svg{display:block} .fuss-innen{grid-template-columns:1fr auto;align-items:start} .fuss-hinweis{grid-column:1/-1} .spalten{grid-template-columns:1fr 1fr;gap:34px} .spur{grid-template-columns:1fr 1fr;gap:34px 30px} .tarife{grid-template-columns:1fr 1fr} .neben{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:26px} .band-bild{height:340px} .band-innen{margin-top:-340px} .geist{grid-template-columns:1fr 1fr;gap:2px 24px} } /* ========================================================================= Ab 900 px — Desktop-Komposition ========================================================================= */ @media (min-width:900px){ :root{--rand:30px} body{font-size:17px} .kopf-nav{display:flex;align-items:center;gap:0;margin-right:6px} .kopf-nav a{font-size:14.5px;color:var(--text);text-decoration:none;padding:8px 15px; border-left:1px solid var(--linie-2);position:relative} .kopf-nav a:first-child{border-left:0} .kopf-nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:1.5px; background:var(--bernstein);transform:scaleX(0);transform-origin:left center; transition:transform var(--dur-kurz) var(--ease)} .kopf-nav a:hover::after{transform:scaleX(1)} .burger{display:none} .panel{display:none !important} .kopf-karte{padding:10px 10px 10px 24px;gap:18px} .marke{font-size:29px} .hero{padding:44px 0 0} .hero-grid{grid-template-columns:46% 1fr;gap:0;align-items:start} .hero-links{padding-right:56px;padding-bottom:20px} .hero-lead,.hero-vertrauen{max-width:41ch} .hero-buehne{margin-right:calc(var(--gutter) * -1);margin-top:10px;padding-bottom:118px} /* Das Bild ist breiter als sein Rahmen und wird VOM RAHMEN beschnitten (.fenster hat overflow:hidden). Dadurch bleibt der „laeuft aus dem Bild"-Eindruck, ohne dass irgendetwas ueber den Viewport hinausragt. */ .hero-fenster img{height:520px;width:calc(100% + 120px);max-width:none; object-fit:cover;object-position:left top} /* Karte kreuzt die Bildkante UND die Sektionsgrenze (Tiefe-Geraet 1). */ .hero .gestrichen{position:absolute;left:-70px;bottom:-58px;width:436px;z-index:6} .hero h1{margin-top:20px} .show{margin-top:26px;padding:88px 0 96px} /* Wand: vier Reihen, jede mit anderem Spaltenrhythmus und eigener Hoehenversetzung. Bewusst KEIN gleichfoermiges Kachelraster (Owner-Ablehnung „flaches Karten-Raster"). */ .wand{display:grid;grid-template-columns:repeat(12,1fr);gap:34px 26px; overflow:visible;padding:0;margin-inline:0;scroll-snap-type:none} .kachel{flex:none} .wand .k1{grid-column:1/8;grid-row:1} .wand .k2{grid-column:8/13;grid-row:1;margin-top:80px} .wand .k3{grid-column:1/6;grid-row:2;margin-top:-10px} .wand .k4{grid-column:6/10;grid-row:2;margin-top:46px} .wand .k5{grid-column:10/13;grid-row:2;margin-top:-4px} .wand .k6{grid-column:1/4;grid-row:3;margin-top:30px} .wand .k7{grid-column:4/9;grid-row:3;margin-top:-12px} .wand .k8{grid-column:9/13;grid-row:3;margin-top:40px} .wand .k9{grid-column:1/5;grid-row:4;margin-top:4px} .wand .k10{grid-column:5/10;grid-row:4;margin-top:44px} .wand .k11{grid-column:10/13;grid-row:4;margin-top:-8px} .wand .k1 .fenster{box-shadow:var(--tief-nacht),var(--glow)} .show-fuss{grid-template-columns:1fr auto;align-items:center;gap:36px} .show-fuss .knopf{justify-self:end} .show-kopf{display:grid;grid-template-columns:1fr 1fr;gap:0 50px;align-items:end;margin-bottom:46px} .show-kopf .kick{grid-column:1} .show-kopf h2{grid-column:1} .show-sub{grid-column:2;grid-row:1/3;align-self:end;margin-top:0} .band-bild{height:440px} .band-innen{margin-top:-440px;padding:60px 0 64px;min-height:440px;display:flex;align-items:center} .ablauf{padding:92px 0 0} .ablauf-kopf{grid-template-columns:1fr 1fr;gap:0 50px;align-items:end} .ablauf-kopf .kick{grid-column:1} .ablauf h2{grid-column:1} .ablauf-sub{grid-column:2;grid-row:1/3;align-self:end} .ablauf-innen{grid-template-columns:1fr 268px;gap:56px;align-items:start} .spur{grid-template-columns:1fr 1fr;gap:38px 34px} .handy-rahmen{max-width:268px} .handy figcaption{text-align:left;margin-inline:0} .preise{margin-top:96px;padding:92px 0 100px} .preise-kopf{display:grid;grid-template-columns:1fr 1fr;gap:0 50px;align-items:end;margin-bottom:46px} .preise-kopf .kick{grid-column:1} .preise h2{grid-column:1} .preise-sub{grid-column:2;grid-row:1/3;align-self:end;margin-top:0} .tarife{grid-template-columns:1.05fr 1.22fr .86fr;align-items:start;gap:26px} .tarif{padding:32px 30px 34px} .tarif--dunkel{margin-top:-26px;padding:38px 32px 40px} .neben{grid-column:auto;grid-template-columns:1fr;gap:30px;margin-top:14px} .klartext{padding:96px 0 96px} .klartext-kopf{display:grid;grid-template-columns:1fr 1fr;gap:0 50px;align-items:end} .spalten{grid-template-columns:1fr 1fr;gap:52px} .fragen{padding:96px 0 104px} .fragen-innen{display:grid;grid-template-columns:1fr 1.55fr;gap:52px;align-items:start} .fragen-kopf{margin-bottom:0;position:sticky;top:120px} .frage summary{font-size:21px;padding:22px 0} .schluss-innen{grid-template-columns:1fr 460px;gap:56px;align-items:center;padding:96px 0 104px} .schluss-bild img{transform:scale(2.15);transform-origin:79% 56%} .schmal,.recht{padding:64px 0 96px} } /* ========================================================================= Ab 1180 px ========================================================================= */ @media (min-width:1180px){ .hero h1{font-size:63px} .hero-links{padding-right:70px} .hero .gestrichen{left:-86px;width:452px} .preis-ziffer{font-size:420px} } /* ========================================================================= Bewegungsreduktion — Endzustand sofort, kein Parallax (Pflicht) ========================================================================= */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } [data-rev]{opacity:1 !important;transform:none !important} .geist li::after{transform:scaleX(1) !important} .hero-fenster{transform:none !important} .schluss-bild img{transform:scale(2.35) !important} } @media (max-width:899px){.gestrichen > h2{display:none}} /* ========================================================================= RUNDE 4 (2026-08-29) — Vorgangsseiten: Bestellen, Schritt 2, Danke, Bestellt, Fehlerseite. Tier T1 (Editorial Premium). Vorher liefen alle fuenf auf derselben flachen `.schmal`-Textspalte — eine Ebene, kein Bild, kein Licht. Alles hier ist MOBILE FIRST; jede Verbreiterung laeuft ueber @media(min-width:...) weiter unten in genau diesem Block (FEHLER-019). Ausschliesslich neue Selektoren, keine Kollision mit den Bloecken oben. Tiefe-Geraete: (1) dunkles Kopffeld als Kontrastflaeche, dessen Kante der Koerper ueberlappt, (2) eine Lichtrichtung mit den bestehenden Schatten- Tokens, (3) Korn-Textur auf dem Kopffeld, (4) uebergrosse Strukturziffer auf der Fehlerseite. ========================================================================= */ /* ---------------------------------------------- Gemeinsame Vorgangshuelle */ .vorgang{position:relative} .vorgang-kopf{ position:relative;margin-top:-12px;background:var(--tinte);color:var(--auf-tinte); padding:52px 0 86px;overflow:hidden; background-image:radial-gradient(108% 78% at 14% 0%,rgba(224,169,74,.17),transparent 62%), radial-gradient(74% 64% at 96% 100%,rgba(224,169,74,.07),transparent 60%); } .vorgang-kopf::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05; background-image:var(--korn)} .vorgang-kopf > .wrap{position:relative;z-index:2} .vorgang-kopf h1{color:var(--auf-tinte);font-size:clamp(31px,7.4vw,52px);max-width:17ch;margin-top:15px} .vorgang-lead{color:var(--auf-tinte-leise);max-width:52ch;margin-top:16px;font-size:16.5px} .vorgang-lead b{color:var(--auf-tinte);font-weight:600} .vorgang-marke{ display:inline-flex;align-items:baseline;gap:11px;margin-top:22px;max-width:100%;min-width:0; border:1px solid var(--linie-nacht);border-radius:999px;padding:9px 18px; background:rgba(246,237,222,.05);font-size:13px;color:var(--auf-tinte-leise); } .vorgang-marke span{letter-spacing:.11em;text-transform:uppercase;font-weight:600;font-size:11px; color:var(--bernstein-hell);flex:none} .vorgang-marke b{color:var(--auf-tinte);font-weight:600;font-size:15px;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vorgang-koerper{position:relative;z-index:3;margin-top:-56px;padding-bottom:74px} /* Papierblatt — das Grundstueck aller Vorgangsseiten */ .blatt{ background:var(--karte);border:1px solid var(--linie);border-radius:var(--r); box-shadow:var(--tief);padding:22px 19px 26px;min-width:0; } .blatt-kopf{ font-family:var(--fb);font-size:11.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--bernstein-tief); padding:0 0 13px;margin:0 0 4px;border-bottom:1px solid var(--linie);display:block;width:100%; } .blatt .feld:first-of-type{margin-top:16px} .blatt .folge{margin-top:30px} .formkarte .wahl{margin-top:22px} /* Fehlerkasten — enthalten statt nackter roter Absatz, ohne Icon */ .fehlerkarte{ margin-top:22px;background:#FCF1EC;border:1px solid rgba(155,44,21,.26); border-left:3px solid #9B2C15;border-radius:var(--r-klein);padding:15px 17px 16px; box-shadow:var(--nah); } .fehlerkarte p{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:#7E2411;margin:0} .fehlerkarte ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px} .fehlerkarte li{position:relative;padding-left:17px;font-size:15px;line-height:1.5;color:#7E2411} .fehlerkarte li::before{content:"";position:absolute;left:0;top:.65em;width:9px;height:1.7px; background:#9B2C15;border-radius:2px} /* ------------------------------------------------- Bestellen: Paketwahl */ .bestell-gitter{display:grid;gap:20px;min-width:0} .paketwahl{border:0;padding:0;margin:0;min-width:0} .paketwahl legend{padding:0;margin:0;display:block;width:100%} .paket-gitter{display:grid;gap:12px;margin-top:16px;min-width:0} .paket{ position:relative;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:0 14px; align-items:start;cursor:pointer;min-width:0; background:var(--papier-3);border:1.5px solid var(--linie);border-radius:var(--r-klein); padding:16px 17px 17px; transition:border-color var(--dur-kurz) var(--ease),background-color var(--dur-kurz) var(--ease), box-shadow var(--dur-kurz) var(--ease); } .paket:hover{border-color:var(--bernstein-hell);background:var(--karte)} .paket input{ appearance:none;-webkit-appearance:none;margin:0 0 0 0;grid-column:1;grid-row:1; /* 26 px statt 23: der sichtbare Punkt ist bei Vergroesserung/Low-Vision die Zielzone, die man anvisiert, auch wenn das Label die Aktivierungsflaeche ist. */ width:26px;height:26px;border-radius:50%;border:1.5px solid var(--leiser);background:#fff; flex:none;cursor:pointer;align-self:center; transition:border-color var(--dur-kurz) var(--ease),background-color var(--dur-kurz) var(--ease), box-shadow var(--dur-kurz) var(--ease); } .paket input:hover{border-color:var(--bernstein)} .paket input:checked{border-color:var(--bernstein);background:var(--bernstein); box-shadow:inset 0 0 0 4.5px #fff} .paket-name{grid-column:2;grid-row:1;font-family:var(--fd);font-size:21px;font-weight:500; color:var(--tinte);line-height:1.15;letter-spacing:-.012em;align-self:center;min-width:0} .paket-preis{grid-column:3;grid-row:1;font-family:var(--fd);font-size:27px;font-weight:500; color:var(--tinte);line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap; align-self:center;justify-self:end} .paket-preis span{font-size:.6em;margin-left:3px} .paket-was{grid-column:2/4;grid-row:2;font-size:14px;color:var(--leise);line-height:1.5; margin-top:8px;min-width:0} .paket:has(input:checked){ border-color:var(--bernstein);background:var(--karte); box-shadow:inset 0 0 0 1px var(--bernstein),var(--fern); } .paket:has(input:checked) .paket-was{color:var(--text)} @supports selector(:has(*)){ .paket input:focus-visible{outline:0} .paket:has(input:focus-visible){outline:2.5px solid var(--bernstein);outline-offset:3px; border-radius:var(--r-klein)} } /* ------------------------------------------- Bestellen: Bestelluebersicht */ /* Espresso-Karte auf Creme: derselbe Hell/Dunkel-Wechsel wie auf der Startseite, damit die Zahlungsseite dieselbe Sprache spricht wie die Preistafel. */ /* Die Bernstein-Haarlinie ist Pflicht, nicht Zierrat: gemessen liegt die Karte bei rgb(63,49,31) auf einem Kopffeld von rgb(42,34,27) — zu wenig Kante. Erst die Linie macht aus „dunkel auf dunkel" eine schwebende Karte. */ .uebersicht{ align-self:start;min-width:0;position:relative;overflow:hidden; background:var(--tinte);color:var(--auf-tinte-leise); border:1px solid rgba(224,169,74,.26); border-radius:var(--r);box-shadow:var(--tief-nacht);padding:24px 21px 26px; background-image:radial-gradient(120% 82% at 10% 0%,rgba(224,169,74,.15),transparent 62%); } .ueb-kick{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--bernstein-hell);margin:0} .ueb-block{display:block} .ueb-block[hidden]{display:none} .ueb-name{font-family:var(--fd);font-size:25px;font-weight:500;color:var(--auf-tinte); margin:11px 0 0;line-height:1.15;letter-spacing:-.012em} .ueb-was{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--auf-tinte-leise)} .ueb-liste{list-style:none;padding:0;margin:17px 0 0;display:grid;gap:0} .ueb-liste li{position:relative;padding:0 0 9px 23px;margin-top:9px;font-size:14.5px; line-height:1.45;border-bottom:1px solid var(--linie-nacht-2);min-width:0} .ueb-liste li:first-child{margin-top:0} .ueb-liste li:last-child{border-bottom:0;padding-bottom:0} .ueb-liste li::before{content:"";position:absolute;left:2px;top:.44em;width:9px;height:5px; border-left:1.8px solid var(--bernstein-hell);border-bottom:1.8px solid var(--bernstein-hell); transform:rotate(-45deg)} .ueb-summe{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap; margin-top:20px;padding-top:17px;border-top:1px solid var(--linie-nacht)} .ueb-summe span{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--auf-tinte-leise)} .ueb-summe b{font-family:var(--fd);font-weight:500;font-size:38px;line-height:1; color:var(--auf-tinte);font-variant-numeric:tabular-nums;white-space:nowrap} .ueb-fuss{margin-top:13px;font-size:12.5px;line-height:1.55;color:var(--auf-tinte-leise)} /* ------------------------------------------------ Bestellen: Abschluss */ .bestell-abschluss{min-width:0} .bestell-abschluss .knopf{width:100%} .bestell-abschluss .hinweis{margin-top:13px} /* Rueckversicherung vor dem Kauf: Link auf die echte, bereits gebaute Vorschau (/v/:id). Zeigt nur, wenn server.js eine Datei gefunden hat (vorschauDa) -- keine tote Kachel fuer Anfragen ohne fertige Vorschau. */ .vorgang-vorschau-hinweis{margin:0 0 22px} .vorgang-vorschau{ display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600; color:var(--bernstein-tief);text-decoration:none;padding:10px 15px;min-height:44px; background:var(--karte);border:1.5px solid var(--linie);border-radius:var(--r-klein); box-shadow:var(--nah);transition:border-color var(--dur-kurz) var(--ease), transform var(--dur-kurz) var(--ease); } .vorgang-vorschau:hover{border-color:var(--bernstein);transform:translateY(-1px)} .vorgang-vorschau svg{flex:none;transition:transform var(--dur-kurz) var(--ease)} .vorgang-vorschau:hover svg{transform:translateX(3px)} .bestell-abschluss .vorgang-vorschau{ width:100%;justify-content:center;margin-top:11px;background:transparent; box-shadow:none;border-color:transparent;color:var(--tinte); } .bestell-abschluss .vorgang-vorschau:hover{border-color:var(--linie);background:var(--karte)} /* Beweisstreifen: eine echte, laufende Kundenseite als Rueckversicherung */ .vorgang-beweis{ margin-top:34px;padding-top:28px;border-top:1px solid var(--linie); display:grid;gap:18px;align-items:center;min-width:0; } .vorgang-beweis p{font-size:14.5px;color:var(--leise);line-height:1.55;max-width:52ch;min-width:0} .vorgang-beweis p b{color:var(--tinte);font-weight:600} .vorgang-beweis .fenster{box-shadow:var(--fern)} /* -------------------------------------------------------- Schritt 2 */ .s2-gitter{display:grid;gap:22px;min-width:0} .s2-was{list-style:none;padding:0;margin:20px 0 0} .s2-was li{position:relative;padding:0 0 12px 24px;margin-top:12px;font-size:15px;line-height:1.5; color:var(--text);border-bottom:1px solid var(--linie-2)} .s2-was li:first-child{margin-top:0} .s2-was li:last-child{border-bottom:0;padding-bottom:0} .s2-was li::before{content:"";position:absolute;left:2px;top:.44em;width:9px;height:5px; border-left:1.8px solid var(--bernstein);border-bottom:1.8px solid var(--bernstein); transform:rotate(-45deg)} .s2-schau{min-width:0;margin:0} .s2-schau .handy-rahmen{max-width:214px} .s2-schau figcaption{margin-top:14px;font-size:13.5px;color:var(--leise);line-height:1.5; max-width:32ch;margin-inline:auto;text-align:center} /* ----------------------------------------------------- Danke / Bestellt */ /* Zwei verschiedene Momente, zwei verschiedene Gewichte: „danke" ist ein leises Versprechen (Papier), „bestellt" ist der teuerste Augenblick der Seite (Espressobeleg mit grosser Serifennummer). */ .folge{list-style:none;padding:0;margin:0;display:grid;gap:26px;min-width:0} .folge li{position:relative;padding-top:16px;min-width:0} .folge li::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px; background:linear-gradient(90deg,var(--bernstein) 0 34px,var(--linie) 34px)} .folge li::after{content:"";position:absolute;left:0;top:-3px;width:9px;height:9px; border-radius:50%;background:var(--bernstein)} .folge b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--bernstein-tief)} .folge h2,.folge h3{font-size:20px;margin-top:9px} .folge p{margin-top:9px;font-size:15.5px;color:var(--text);line-height:1.55} .danke-gitter{display:grid;gap:24px;min-width:0} .danke-schluss{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center} .danke-schluss p{font-size:14.5px;color:var(--leise);max-width:44ch;min-width:0} .beleg-karte{ position:relative;overflow:hidden;min-width:0;align-self:start; background:var(--tinte);color:var(--auf-tinte-leise);border-radius:var(--r); border:1px solid rgba(224,169,74,.26); box-shadow:var(--tief-nacht);padding:26px 22px 28px; background-image:radial-gradient(122% 84% at 12% 0%,rgba(224,169,74,.16),transparent 62%); } .beleg-nr{font-family:var(--fd);font-weight:500;font-size:clamp(38px,10vw,50px);line-height:1; color:var(--auf-tinte);margin:12px 0 0;letter-spacing:-.02em;font-variant-numeric:tabular-nums; overflow-wrap:anywhere} .beleg-zeilen{margin:22px 0 0;display:grid;gap:0} .beleg-zeilen > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px; flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--linie-nacht-2);min-width:0} .beleg-zeilen dt{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--auf-tinte-leise);flex:none} .beleg-zeilen dd{margin:0;font-size:16px;color:var(--auf-tinte);font-weight:500;min-width:0; text-align:right;overflow-wrap:break-word} .beleg-zeilen dd.gross{font-family:var(--fd);font-size:25px;font-weight:500;line-height:1.1; font-variant-numeric:tabular-nums} .beleg-fuss{margin-top:18px;padding-top:16px;border-top:1px solid var(--linie-nacht); font-size:12.5px;line-height:1.55;color:var(--auf-tinte-leise)} /* --------------------------------------------------------- Fehlerseite */ /* Bewusst OHNE dunkles Kopffeld: die 404 bekommt ein eigenes Schema (uebergrosse Strukturziffer als Layouttraeger), damit nicht alle fuenf Nebenseiten dasselbe Skelett tragen. */ .fehlerseite{position:relative;overflow:hidden;padding:44px 0 78px;background:var(--papier-2)} .fehlerseite::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.04; background-image:var(--korn)} .fehlerseite > .wrap{position:relative;z-index:2} .fehler-ziffer{ position:absolute;right:-4%;top:-2%;font-family:var(--fd);font-weight:500; font-size:clamp(150px,30vw,400px);line-height:.8;color:rgba(36,28,22,.045); pointer-events:none;user-select:none;z-index:1;letter-spacing:-.05em; font-variant-numeric:tabular-nums; } .fehler-gitter{display:grid;gap:26px;min-width:0} .fehlerseite h1{font-size:clamp(32px,7.4vw,50px);margin-top:15px;max-width:15ch} .fehler-lead{margin-top:16px;font-size:17px;color:var(--text);max-width:44ch} .wege{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--linie)} .wege li{border-bottom:1px solid var(--linie);min-width:0} .wege a{ display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px; padding:12px 2px;color:var(--tinte);text-decoration:none;font-size:16.5px;min-width:0; transition:padding var(--dur-kurz) var(--ease),color var(--dur-kurz) var(--ease); } .wege a b{font-weight:600;min-width:0} .wege a em{font-style:normal;color:var(--leise);font-size:14px;display:none} .wege a svg{flex:none;color:var(--bernstein);transition:transform var(--dur-kurz) var(--ease)} .wege a:hover{color:var(--bernstein-tief)} .wege a:hover svg{transform:translateX(4px)} .fehler-tat{margin-top:30px} .fehler-schau{margin:0;min-width:0} .fehler-schau figcaption{margin-top:13px;font-size:13.5px;color:var(--leise);line-height:1.5; max-width:36ch} /* ========================================================================= RUNDE 4 — ab 620 px ========================================================================= */ @media (min-width:620px){ .blatt{padding:26px 24px 30px} .paket{padding:18px 20px 19px} .vorgang-beweis{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:26px} .s2-gitter{grid-template-columns:minmax(0,1fr) minmax(0,232px);gap:30px;align-items:start} .s2-schau figcaption{text-align:left;margin-inline:0} /* .danke-gitter bleibt bis 899 px EINSPALTIG: bei 768 endete das rechte Fenster rund 300 px vor der linken Spalte (Critic-06, Punkt 2). Gestapelt bekommt das Kundenfenster die volle Breite. */ .folge{gap:30px} /* Beschreibungsspalte an einer festen Kante ausrichten. Mit justify-content:space-between saessen die Beschreibungen je Zeile an einer anderen x-Position — das liest sich als Versehen, nicht als Satz. */ .wege a{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;gap:0 22px} .wege a em{display:block} .fehler-gitter{grid-template-columns:minmax(0,1fr) minmax(0,264px);gap:36px;align-items:start} } /* ========================================================================= RUNDE 4 — ab 900 px: Desktop-Komposition ========================================================================= */ @media (min-width:900px){ .vorgang-kopf{padding:66px 0 104px} /* Die rechte Haelfte des Kopffelds lief leer (Critic-06, Punkt 1). Die Betriebs-Pille wandert an die rechte Kante und schliesst die Flaeche mit einem vorhandenen Element ab, statt mit erfundenem Text. */ .vorgang-kopf > .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto; column-gap:48px;align-items:end} .vorgang-kopf > .wrap > .kick, .vorgang-kopf > .wrap > h1, .vorgang-kopf > .wrap > .vorgang-lead{grid-column:1} .vorgang-kopf > .wrap > .vorgang-marke{grid-column:2;grid-row:3;justify-self:end; align-self:end;margin-top:0;max-width:min(38vw,360px)} .vorgang-koerper{margin-top:-66px;padding-bottom:96px} .blatt{padding:30px 32px 34px} /* Felder links, Uebersicht rechts. Die Uebersicht steht im Quelltext VOR dem Bestellknopf (JS-frei bedienbar, Screenreader-Reihenfolge korrekt) und wird nur visuell in die rechte Spalte gesetzt. */ .bestell-gitter{grid-template-columns:minmax(0,1fr) 346px;gap:24px 32px;align-items:start} .bestell-gitter > .paketwahl{grid-column:1;grid-row:1} .bestell-gitter > .formkarte{grid-column:1;grid-row:2} .bestell-gitter > .uebersicht{grid-column:2;grid-row:1 / span 3;position:sticky;top:116px} .bestell-gitter > .bestell-abschluss{grid-column:1;grid-row:3} .bestell-abschluss .knopf{width:auto;min-width:340px} .paket{grid-template-columns:23px minmax(0,1fr) auto;padding:20px 22px 21px} .paket-name{font-size:23px} .paket-preis{font-size:31px} .vorgang-beweis{grid-template-columns:minmax(0,336px) minmax(0,1fr);gap:34px; margin-top:44px;padding-top:34px} .s2-gitter{grid-template-columns:minmax(0,1fr) minmax(0,254px);gap:44px} .s2-schau .handy-rahmen{max-width:238px} .danke-gitter{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px} .beleg-karte{padding:34px 32px 36px} .fehlerseite{padding:64px 0 104px} .fehler-gitter{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:56px} } /* ========================================================================= RUNDE 4 — ab 1180 px ========================================================================= */ @media (min-width:1180px){ .bestell-gitter{grid-template-columns:minmax(0,1fr) 376px;gap:26px 40px} .fehler-ziffer{font-size:400px} }