/* ============================================================ PREMIUM v25 „Dämmerung und Papier" Fundament für ALLE Seiten. Wird als letzte CSS geladen: nach seo-geo.css. Inhalt 1 Tokens (Papier, Gold-Tinte, Kopf Navy, Schrift-Skala) 2 Papier / Nacht / Karte: EIN Muster auf allen Flächen 3 Kopf Navy + Lesefaden, Fokus, Footer-Glimmen 4 Goldfaden (Trenner) und Signatur (SVG-Ebene) 5 Zähler, Skala (Bitkom), Preis-Leiter 6 Textlink, Knöpfe, Hover-Zustände 7 Gating: reduced-motion, ohne JS, schmal Schalter, die premium.js setzt: html.premium-ok (Skript läuft). Versteckte Ausgangszustände gibt es NUR unter html.premium-ok UND prefers-reduced-motion:no-preference. Ohne JS oder bei reduzierter Bewegung steht jede Grafik fertig gezeichnet da. Text wird hier nie versteckt. ============================================================ */ /* ---------- 1 Tokens ---------- */ :root{ --papier:#FAF8F3; --papier-2:#F4F0E8; --karte:#FFFDF9; --kante:#E4DDCC; --gold-ink:#6B4F12; /* Goldtext auf Papier: gemessen im schlechtesten Pixel (Fasern, Korn, Knitter) 4,9:1; #7A5C17 kam dort nur auf 4,0:1 */ --gold-ink-papier:#6B4F12; --muted:#4C5667; /* Fließtext-Grau auf Papier: mit Fasern und Korn fiel #566070 im schlechtesten Pixel auf 4,0:1 (gemessen), dieses hält 4,5:1 */ --muted-2:#4C5667; /* das helle Grau #6A7280 fiel auf Papier unter 4,5:1 */ --rand:clamp(24px,6.7vw,96px); /* Kante von Kopf und Inhalt (Container 1180, Pad): Prozent wird dort aufgelöst, wo die Variable steht (Breite des Elternblocks, ohne Scrollbalken) */ --rand-hero:max(var(--pad),calc((100% - var(--container)) / 2 + var(--pad))); /* Papier: lange feine Fasern (stark gestreckte Turbulenz) und darüber ein leises Korn, beides Navy getönt */ --papier-fasern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .2' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .30 0 0 0 0 .16 .07 0 0 0 -.022'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23f)'/%3E%3C/svg%3E"); --papier-korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .14 0 0 0 0 .26 .14 0 0 0 -.042'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); --korn-hell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .5 0 0 0 -.14'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); /* weißes Korn für dunkle Flächen (Nacht, Hero, Bänder) */ --papier-textur:var(--papier-fasern) 0 0/640px 640px,var(--papier-korn) 0 0/240px 240px; --sh-papier:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(15,35,66,.06),0 12px 28px -14px rgba(15,35,66,.22); --sh-hover:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(15,35,66,.07),0 22px 40px -16px rgba(15,35,66,.32); --sh-tafel:0 0 0 1px rgba(196,154,59,.28),0 30px 60px -30px rgba(2,8,18,.7); --ease-linie:cubic-bezier(.3,.55,.35,1); /* Schrift-Skala (Konzept 5.2); Seiten dürfen sie nutzen, müssen nicht */ --t-display:clamp(2.125rem,1.19rem + 3.2vw,4.25rem); --t-h1:clamp(2rem,1.2rem + 2.6vw,3.25rem); --t-h2:clamp(1.625rem,1.2rem + 1.6vw,2.5rem); --t-h3:clamp(1.25rem,1.12rem + .6vw,1.5rem); --t-lead:clamp(1.125rem,1.05rem + .35vw,1.3125rem); --t-klein:.9375rem; --t-micro:.8125rem; /* Kopf Navy auf allen Seiten (gleiche Werte wie base.css; hier nochmal, damit eine Seiten-CSS, die noch einen hellen Kopf setzt, nicht gewinnt) */ --kopf-bg:rgba(10,26,51,.92); --kopf-ink:#E8EEF9; --kopf-tag:var(--gold-bright); --kopf-line:rgba(196,154,59,.22); --kopf-toggle:#E8EEF9; --logo-gold:var(--gold-bright); } /* ---------- 2 Papier / Nacht / Karte ---------- */ .papier,.papier-2,.nacht{position:relative;isolation:isolate} .papier{ background: linear-gradient(180deg,rgba(196,154,59,.20) 0,rgba(196,154,59,0) 2px), radial-gradient(110% 80% at 8% -10%,rgba(255,255,255,.62),rgba(255,255,255,0) 58%), linear-gradient(180deg,#FAF8F3 0%,#F5F1E7 100%); } .papier-2{ background: linear-gradient(180deg,rgba(196,154,59,.20) 0,rgba(196,154,59,0) 2px), radial-gradient(110% 80% at 8% -10%,rgba(255,255,255,.5),rgba(255,255,255,0) 58%), linear-gradient(180deg,#F0EADC 0%,#E9E2D1 100%); } /* Papier: Fasern und Korn, Navy getönt (prozedural, 0 Bild-Bytes). Kein Foto: PRIME-Entscheid 05.10.2026, das Knitterfoto (Pexels 8749388) ist raus. */ .papier::before,.papier-2::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:var(--papier-textur); } /* Nacht: Navy mit hellem Korn */ .nacht{background:var(--navy);color:#E8EEF9;--fokus:var(--gold-bright)} .nacht::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:var(--korn-hell) 0 0/240px 240px; opacity:.3; } /* dunkle Flächen geben ihre Fokusfarbe an alle Kinder weiter */ .site-header,.site-footer,.band,.cta-band,.hero-sig{--fokus:var(--gold-bright)} /* Karten auf Papier: warmes Weiß, Haarlinie, geschichteter Schatten */ .karte{ position:relative;isolation:isolate; background:var(--karte);border:1px solid var(--kante);border-radius:2px;box-shadow:var(--sh-papier); transition:transform .28s var(--ease-premium),box-shadow .28s var(--ease-premium),border-color .28s var(--ease-premium); } .karte::before{ /* Korn bei halber Stärke */ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;border-radius:inherit; background:var(--papier-korn) 0 0/240px 240px; } .karte::after{ /* Goldstrich oben, nur bei Hover/Fokus sichtbar */ content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--gold);opacity:0;border-radius:2px 2px 0 0; transition:opacity .28s var(--ease-premium);pointer-events:none; } @media (hover:hover) and (pointer:fine){ .karte--hover:hover,.karte--hover:focus-within{transform:translateY(-3px);box-shadow:var(--sh-hover);border-color:rgba(196,154,59,.55)} .karte--hover:hover::after,.karte--hover:focus-within::after{opacity:1} } .karte--hover:focus-within::after{opacity:1} /* ---------- 3 Kopf Navy, Lesefaden, Fokus, Footer ---------- */ .site-header{border-bottom-color:var(--kopf-line)} .nav-desktop a:not(.btn){color:#E8EEF9} .nav-desktop a:not(.btn)::after{background:var(--gold)} .nav-desktop a[aria-current="page"]:not(.btn){color:var(--gold-bright)} .brand-name{color:#E8EEF9} .lesefaden{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;z-index:2} .lesefaden i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));transform-origin:left center;transform:scaleX(var(--p,0))} /* das „&“ im Wortzeichen glimmt einmal (Kopf: Ende des Hero-Laufs; Footer: Seitenende) */ .amp.glimmt{animation:ampGlimm 1.1s var(--ease-premium)} @keyframes ampGlimm{ 0%{text-shadow:0 0 0 rgba(255,246,220,0)} 35%{text-shadow:0 0 18px rgba(255,246,220,.95);color:#FFF6DC} 100%{text-shadow:0 0 0 rgba(255,246,220,0)} } .skip-link:focus{outline:3px solid var(--gold-bright);outline-offset:0} /* ---------- 4 Goldfaden (Trenner) und Signatur ---------- */ [data-goldfaden]:not([data-goldfaden="lese"]){ display:block;height:1px;transform-origin:left center; background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold-bright) 50%,var(--gold) 88%,transparent); } /* Signatur-Ebene: die Linie und das „&“ liegen als SVG über dem Hero (premium.js baut sie) */ .und{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;max-width:none} .und text{font-family:'Fraunces','Gloock',Georgia,serif;font-weight:600;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0} .und-still{position:absolute;z-index:1;pointer-events:none;display:none} .no-js .und-still{display:block} .und-still text{font-family:'Fraunces','Gloock',Georgia,serif;font-weight:600;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0} /* ---------- 5 Zähler, Skala, Preis-Leiter ---------- */ [data-zaehl]{font-variant-numeric:tabular-nums lining-nums} /* Skala unter einer Prozentzahl: Grundlinie mit Teilstrichen bei 0/25/50/75/100, darüber ein Goldbalken */ .skala{ --w:.5;position:relative;display:block;height:10px;margin:14px 0 12px; background: linear-gradient(rgba(15,35,66,.25),rgba(15,35,66,.25)) 0 100%/100% 1px no-repeat, linear-gradient(rgba(15,35,66,.25),rgba(15,35,66,.25)) 0 100%/1px 5px no-repeat, linear-gradient(rgba(15,35,66,.25),rgba(15,35,66,.25)) 25% 100%/1px 5px no-repeat, linear-gradient(rgba(15,35,66,.25),rgba(15,35,66,.25)) 50% 100%/1px 5px no-repeat, linear-gradient(rgba(15,35,66,.25),rgba(15,35,66,.25)) 75% 100%/1px 5px no-repeat, linear-gradient(rgba(15,35,66,.25),rgba(15,35,66,.25)) 100% 100%/1px 5px no-repeat; } .skala::after{ content:"";position:absolute;left:0;top:2px;height:3px;width:calc(var(--w) * 100%); background:linear-gradient(90deg,var(--gold),var(--gold-bright));transform-origin:left center; } /* Preis-Leiter: oben die Einzelpreise als Segmente, darunter der Paketpreis, dazwischen die Ersparnis als Maßlinie. Ein gemeinsamer Maßstab für alle Stufen (die SVG-Maße setzt das Seiten-HTML aus den Preisdaten). */ .leiter{ --l-a:#C49A3B;--l-b:#E3C06A;--l-paket:#E3C06A;--l-mass:#E3C06A;--l-grund:rgba(147,161,184,.28); display:block;width:100%;height:auto;overflow:visible; } .leiter .grund{stroke:var(--l-grund);stroke-width:1} .leiter .seg{fill:var(--l-a);transform-box:fill-box;transform-origin:left center} .leiter .seg.b{fill:var(--l-b)} .leiter .paket{fill:var(--l-paket);transform-box:fill-box;transform-origin:left center} .leiter .mass{fill:none;stroke:var(--l-mass);stroke-width:1.2;stroke-linecap:square} .papier .leiter,.papier-2 .leiter{--l-a:#9A7A2C;--l-b:#C49A3B;--l-paket:#0F2342;--l-mass:#6B4F12;--l-grund:rgba(15,35,66,.2)} /* Zeilen-Masken des SplitText (motion.js): die Zeile gleitet aus einer Maske, ohne Ausblenden */ .line-mask{overflow:hidden} /* Abschluss-Bänder aller Seiten: dasselbe weiche Nachtfoto (Pexels 20717826, Weichzeichnung, 17 KB) unter dem Korn */ .cta-band{position:relative;isolation:isolate} .cta-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 440px at 50% -12%,rgba(227,192,106,.20),transparent 62%),linear-gradient(180deg,#10254A 0%,#0A1A33 100%);opacity:1} /* Korn liefert .nacht::before, hier nicht doppelt */ .cta-band::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(227,192,106,.7),transparent);pointer-events:none} /* ---------- 6 Textlink, Hover ---------- */ .textlink{ color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:.3em; transition:text-decoration-thickness .2s var(--ease-premium),color .2s var(--ease-premium); } .textlink:hover,.textlink:focus-visible{text-decoration-thickness:2px} .papier .textlink:hover,.papier-2 .textlink:hover{color:var(--gold-ink)} /* ---------- 7 Gating ---------- */ @media (prefers-reduced-motion:no-preference){ /* Ausgangszustände der Zeichnungen: nur wenn premium.js läuft */ html.premium-ok [data-goldfaden]:not([data-goldfaden="lese"]):not(.is-in){transform:scaleX(0)} html.premium-ok [data-goldfaden].is-in{transform:none;transition:transform 1.1s var(--ease-premium-io)} html.premium-ok .skala:not(.is-in)::after{transform:scaleX(0)} html.premium-ok .skala.is-in::after{transform:none;transition:transform .9s var(--ease-premium) calc(var(--i,0) * .12s)} html.premium-ok .leiter:not(.is-in) .seg, html.premium-ok .leiter:not(.is-in) .paket{transform:scaleX(0)} html.premium-ok .leiter:not(.is-in) .mass{stroke-dasharray:1;stroke-dashoffset:1} html.premium-ok .leiter.is-in .seg{transition:transform .7s var(--ease-premium) calc(var(--i,0) * .08s)} html.premium-ok .leiter.is-in .paket{transition:transform .7s var(--ease-premium) .15s} html.premium-ok .leiter.is-in .mass{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease-premium-io) .85s} } @media (prefers-reduced-motion:reduce){ .amp.glimmt{animation:none} .karte--hover:hover,.karte--hover:focus-within{transform:none} } @media (max-width:560px){ :root{--rand:24px} }