/* ============================================================================ DESIGNVARIANTE SPOTLIGHT Ein feiner Lichtstrahl steht auf dem Claim. Beim Scrollen wird er breiter, wandert nach unten und flutet den Raum: Der Hintergrund wechselt von Schwarz auf Weiß, und in dem hellen Raum steht die Antwort auf die Frage, die der Claim gestellt hat. Palette dieser Variante: Schwarz, Weiß und ein einziger Akzent in Hellblau (#BEDCEE). Schrift ist Montserrat Light, kein Gold, keine Serife. Bewegt werden nur transform, opacity und Farbwerte, die die Karte nicht neu berechnen muss. Den Fortschritt setzt js/selbst-spotlight.js als --p (0 bis 1) und die daraus abgeleiteten Werte auf . ============================================================================ */ .ws-spot { /* Vom Skript gesetzt, hier stehen die Ruhewerte für den ersten Frame */ --p: 0; /* Fortschritt der Szene */ --hell: 0; /* Deckkraft der hellen Grundfläche */ --glanz: .85; /* Deckkraft des Strahls */ --sx: 1; /* Öffnung des Strahls in der Breite */ --sy: 1; /* Öffnung des Strahls in der Länge */ --tief: 0vh; /* Wanderung des Strahls nach unten */ --claim: 1; /* Deckkraft des Claims */ /* Ansichtsseite ohne Leiste: kein Platz für sie reservieren */ --nav-h: 0px; /* Wo die Lichtquelle sitzt: mittig am oberen Rand */ --quelle-y: clamp(28px, 4vh, 48px); --quelle-w: 40px; --bild-w: min(74vw, 980px); /* Breite des Strahlbilds in Ruhe */ /* Die drei Farben dieser Variante */ --schwarz: #000000; --weiss: #ffffff; --akzent: #BEDCEE; --akzent-r: 190,220,238; --tinte: #0b0b0b; /* Schrift im hellen Raum */ /* Frostglas: eine Kante, eine Füllung, sonst nichts */ --frost: rgba(255,255,255,.045); --frost-kante: rgba(255,255,255,.12); --frost-text: rgba(255,255,255,.72); /* Die Bausteine aus selbststaendig.css lesen weiter --gold. Hier zeigt die Variable auf den Akzent, damit nichts Goldenes durchkommt. */ --gold: var(--akzent); --gold-hell: #d8ebf6; --gold-tief: #9dc3dc; --gold-text: var(--tinte); --papier: var(--weiss); --papier-2: #f3f5f7; --navy: var(--tinte); --linie: rgba(0,0,0,.1); --leise: rgba(11,11,11,.66); font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--schwarz); overflow-x: hidden; } /* Falls die Leiste doch einmal eingebunden wird: auf der Ansichtsseite bleibt sie unsichtbar */ .ws-spot #main-nav { display: none; } /* ── Grundfläche: der Raum, der hell wird ─────────────────────────────── */ .sp-grund { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--schwarz); background-image: radial-gradient(ellipse 110% 70% at 50% -12%, #0e0f11, transparent 70%); } .sp-grund::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 50% 6%, rgba(var(--akzent-r), .22), transparent 68%), var(--weiss); opacity: var(--hell); } /* ── Aura ───────────────────────────────────────────────────────────────── Drei weichgezeichnete Lichtwolken treiben langsam im dunklen Raum, in Weiß und im Akzent, sehr leise. Bewegt wird nur transform. Im screen- Modus verschwinden sie über dem weißen Raum von selbst, zusätzlich geht die Lage mit der Aufhellung aus. */ .sp-aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: calc(1 - var(--hell)); } .sp-aura i { position: absolute; border-radius: 50%; filter: blur(94px); mix-blend-mode: screen; will-change: transform; animation: 17s ease-in-out infinite alternate; } .sp-aura i:nth-child(1) { left: -12%; top: -18%; width: 52vw; height: 52vw; background: radial-gradient(circle, rgba(var(--akzent-r), .2), rgba(var(--akzent-r), 0) 68%); animation-name: sp-aura-1; } .sp-aura i:nth-child(2) { right: -16%; top: 18%; width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(255,255,255,.1), rgba(255,255,255,0) 68%); animation-name: sp-aura-2; animation-duration: 21s; } .sp-aura i:nth-child(3) { left: 18%; bottom: -30%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(var(--akzent-r), .13), rgba(var(--akzent-r), 0) 68%); animation-name: sp-aura-3; animation-duration: 25s; } @keyframes sp-aura-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vw, 10vh, 0) scale(1.18); } } @keyframes sp-aura-2 { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-12vw, 14vh, 0) scale(.92); } } @keyframes sp-aura-3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-10vw, -12vh, 0) scale(1.14); } } html.sparsam .sp-aura i { animation: none; will-change: auto; filter: blur(40px); } /* Kühle Flut: damit die Blende von Schwarz auf Weiß nicht durch ein totes Grau läuft, sondern aussieht, als liefe Licht in den Raum. Sie steht in der Mitte des Übergangs am höchsten und ist am Ende wieder weg. */ .sp-flut { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% -5%, rgba(255,255,255,.9), rgba(var(--akzent-r), .4) 38%, rgba(var(--akzent-r), 0) 76%); opacity: var(--flut, 0); mix-blend-mode: screen; } /* ── Der Lichtstrahl ────────────────────────────────────────────────────── Ein gerendertes Strahlbild auf Schwarz (Bilder/selbststaendig/ spot-strahl.webp). Im screen-Modus verschwindet sein Schwarz über dem schwarzen Raum und sein Licht bleibt; über dem weißen Raum löst es sich von selbst auf. Die Spitze des Strahls liegt auf dem Signet, von dort aus wird es beim Scrollen skaliert. Nur transform und opacity bewegen sich. */ .sp-strahl { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: var(--glanz); mix-blend-mode: screen; } .sp-kegel { position: absolute; left: 50%; /* Die Spitze des Bildes sitzt in der Mitte des Signets */ top: calc(var(--quelle-y) + var(--quelle-w) / 2 - 2px); width: var(--bild-w); height: auto; transform: translateX(-50%) translateY(var(--tief)) scale(var(--sx), var(--sy)); transform-origin: 50% 0; will-change: transform; /* Die Ränder des Bildes laufen aus, damit im Übergang kein Rechteck steht. Die Spitze oben deckt der Schein des Signets. */ -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 76%, transparent), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 76%, transparent), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; } html.sparsam .sp-kegel { will-change: auto; } /* Die Lichtquelle: das Signet, aus dem der Strahl kommt */ /* Sie bleibt beim Scrollen stehen wie der Strahl selbst und geht erst aus, wenn das Licht den Raum geflutet hat und der Kegel verschwunden ist. */ .sp-quelle { position: fixed; z-index: 3; left: 50%; top: var(--quelle-y); width: var(--quelle-w); aspect-ratio: 532 / 559; translate: -50% 0; background: var(--weiss); -webkit-mask: url('../Bilder/selbststaendig/signet.png') center / contain no-repeat; mask: url('../Bilder/selbststaendig/signet.png') center / contain no-repeat; opacity: calc((.55 + .45 * var(--claim)) * (1 - var(--hell))); pointer-events: none; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 18px rgba(var(--akzent-r), .8)); } /* Ein weicher Schein um die Quelle, damit sie im Strahl steht statt davor */ .sp-quelle::before { content: ''; position: absolute; inset: -120%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.5), rgba(var(--akzent-r), .18) 40%, transparent 70%); } html.sparsam .sp-quelle { filter: none; } /* ── Bühne und Claim ──────────────────────────────────────────────────── */ .sp-kopf { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: calc(var(--nav-h) + clamp(40px, 9vh, 110px)); padding-bottom: clamp(60px, 12vh, 140px); } .sp-claim-block { opacity: var(--claim); translate: 0 calc((1 - var(--claim)) * -26px); } .ws-spot .ws-eyebrow { font-weight: 300; letter-spacing: .3em; } /* Mittige Zeilen bekommen den Strich auf beiden Seiten */ .sp-antwort .ws-eyebrow::after, .sp-teaser .ws-eyebrow::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; } .sp-claim { position: relative; font-family: 'Montserrat', -apple-system, sans-serif; font-size: clamp(32px, 4.7vw, 76px); line-height: 1.12; font-weight: 300; letter-spacing: -.01em; margin: 0; color: var(--weiss); text-wrap: balance; } .sp-claim .sp-zeile { display: block; } .sp-claim .sp-hell { color: var(--weiss); } .sp-claim em { display: block; font-family: inherit; font-style: normal; font-weight: 300; letter-spacing: inherit; color: var(--akzent); } /* Der Schein, der hinter der Schrift steht */ .sp-claim::before { content: ''; position: absolute; z-index: -1; inset: -34% -12%; background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.1), rgba(var(--akzent-r), .05) 46%, transparent 74%); filter: blur(18px); pointer-events: none; } html.sparsam .sp-claim::before { filter: none; } .sp-unterzeile { max-width: 640px; margin: clamp(28px, 3.6vw, 44px) auto 0; font-family: 'Montserrat', sans-serif; font-size: clamp(15px, 1.15vw, 17px) !important; font-weight: 300; line-height: 1.75 !important; color: rgba(255,255,255,.66) !important; } .sp-unterzeile b { color: var(--weiss); font-weight: 400; } /* Kennzahlen als Frostglas-Plaketten: Füllung, Hairline, kein harter Rand */ .sp-marken { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; font-size: 13.5px; font-weight: 300; letter-spacing: .02em; } .sp-marken li { display: inline-flex; align-items: baseline; gap: 9px; padding: 10px 20px; border-radius: 999px; background: var(--frost); color: var(--frost-text); box-shadow: inset 0 0 0 1px var(--frost-kante), inset 0 1px 1px rgba(255,255,255,.14), inset 0 18px 34px rgba(var(--akzent-r), .04); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .sp-marken b { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 0; color: var(--akzent); } html.sparsam .sp-marken li { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18,18,18,.92); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sp-marken li { background: rgba(18,18,18,.92); } } .sp-hinweis { position: absolute; left: 50%; bottom: clamp(18px, 3vh, 34px); translate: -50% 0; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 300; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.4); opacity: var(--claim); } .sp-hinweis i { width: 1px; height: 46px; background: linear-gradient(to bottom, rgba(var(--akzent-r), .9), transparent); animation: sp-faden 2.4s var(--ease-out) infinite; transform-origin: top; } @keyframes sp-faden { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* ── Der helle Raum: die Lösung ───────────────────────────────────────── */ /* Ohne Skript trägt der Inhalt seine helle Fläche selbst, mit Skript übernimmt das die feste Grundfläche, die vom Licht aufgehellt wird. style.css gibt main eine eigene Farbe, die hier weichen muss. */ .sp-main { position: relative; z-index: 2; background: var(--weiss); /* style.css setzt main einen Schlagschatten und runde Ecken. Beides würde hier als Kante quer durch den Lichtstrahl laufen. */ box-shadow: none; border-radius: 0; } html.js .sp-main { background: transparent; } html.js.sparsam .sp-main { background: var(--weiss); } .sp-loesung { position: relative; overflow: clip; padding-block: clamp(20px, 4vh, 50px) clamp(90px, 13vh, 150px); } .sp-loesung .ws-eyebrow { color: rgba(11,11,11,.55) !important; } /* ── Aufbau der Antwort ─────────────────────────────────────────────────── Der Höhepunkt der Seite, in vier Stufen: das Geflüster, der Satz mit dem Namen über der Tür, die Tür selbst als Erzählgrafik und darunter die sechs Schritte, die in die beiden Knöpfe münden. Bewegt werden ausschließlich transform, opacity und stroke-dashoffset. */ /* Stufe eins: Psst, groß und allein, darunter die Zusage im Vertrauen. */ .sp-fluester { position: relative; display: inline-block; margin-bottom: clamp(40px, 5.2vw, 72px); } .sp-antwort .sp-psst { font-family: 'Montserrat', sans-serif !important; font-size: clamp(40px, 6vw, 92px) !important; font-weight: 300; line-height: 1 !important; letter-spacing: -.03em; color: var(--tinte) !important; margin: 0; } .sp-antwort .sp-psst-sub { max-width: none !important; margin: clamp(10px, 1.2vw, 16px) 0 0 !important; font-family: 'Montserrat', sans-serif !important; font-size: clamp(17px, 1.6vw, 22px) !important; font-weight: 300; line-height: 1.5 !important; color: var(--leise) !important; } /* Ein sehr leiser Schein liegt hinter dem Geflüster, wie ein Rest des Lichtkegels, der eben noch im Raum stand. */ .sp-fluester::before { content: ''; position: absolute; z-index: -1; inset: -70% -40%; background: radial-gradient(ellipse at 50% 46%, rgba(var(--akzent-r), .34), transparent 70%); filter: blur(26px); pointer-events: none; } html.sparsam .sp-fluester::before { filter: none; } /* ── Stufe zwei: die Tür ────────────────────────────────────────────────── Boden, Sturz und Rahmen zeichnen sich, das Schild fährt über den Sturz und der Name darauf tippt sich. Das Signet sitzt mittig auf dem Schild: das Wasserzeichen der Seite, hier als Marke über der Tür. Beim Weiterscrollen drehen die beiden Türblätter auf. Wie weit, steht in --auf (0 bis 1); den Wert setzt js/selbst-spotlight.js aus der Lage der Grafik im Bild. Bewegt werden nur transform und opacity. */ .sp-tuer { --auf: 0; /* 0 zu, 1 ganz offen */ --schein: clamp(0, calc((var(--auf) - .12) / .45), 1); --frei: clamp(0, calc((var(--auf) - .42) / .38), 1); width: min(100%, 440px); margin: clamp(30px, 4vw, 52px) auto clamp(26px, 3.4vw, 46px); display: flex; flex-direction: column; align-items: center; } .sp-tuer-raum { position: relative; width: 100%; } .sp-tuer-riss { display: block; width: 100%; height: auto; overflow: visible; } .sp-tuer-riss path { stroke: rgba(11,11,11,.5); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .sp-tuer-riss .t-boden { stroke: rgba(11,11,11,.2); } .sp-tuer-riss .t-stufe { stroke: rgba(11,11,11,.14); } .sp-tuer-riss .t-sturz { stroke: rgba(11,11,11,.3); } .sp-tuer-riss .t-halter { stroke: rgba(11,11,11,.22); stroke-width: 1.1; } .sp-tuer.an .t-boden { transition: stroke-dashoffset 1s var(--ease-out); stroke-dashoffset: 0; } .sp-tuer.an .t-stufe { transition: stroke-dashoffset .7s .2s var(--ease-out); stroke-dashoffset: 0; } .sp-tuer.an .t-sturz { transition: stroke-dashoffset .8s .15s var(--ease-out); stroke-dashoffset: 0; } .sp-tuer.an .t-halter { transition: stroke-dashoffset .5s 1.5s var(--ease-out); stroke-dashoffset: 0; } .sp-tuer.an .t-rahmen { transition: stroke-dashoffset 1.3s .25s var(--ease-out); stroke-dashoffset: 0; } /* Das Licht auf dem Boden vor der Tür wächst mit der Öffnung */ .sp-tuer-riss .t-bodenschein { fill: rgba(var(--akzent-r), .6); opacity: var(--schein); transform-origin: 200px 250px; transform: scaleX(calc(.3 + .7 * var(--schein))); } /* ── Die Öffnung ────────────────────────────────────────────────────────── Sie liegt genau in der lichten Weite des Rahmens: im Bild x 104 bis 296 von 400 und y 42 bis 250 von 276. */ .sp-tuer-oeffnung { position: absolute; left: 26%; top: 15.2%; width: 48%; height: 75.4%; perspective: 1000px; transform-style: preserve-3d; } /* Das Licht dahinter */ .sp-tuer-licht { position: absolute; inset: -4% -6%; border-radius: 10px 10px 3px 3px; background: radial-gradient(ellipse 76% 62% at 50% 52%, #ffffff, rgba(255,255,255,.9) 44%, rgba(255,255,255,0) 74%), linear-gradient(to top, rgba(var(--akzent-r), 1), rgba(var(--akzent-r), .58) 62%, rgba(var(--akzent-r), .3)); filter: blur(10px); opacity: calc(var(--schein) * .9); pointer-events: none; } html.sparsam .sp-tuer-licht { filter: none; } /* Die beiden Türblätter, die aufdrehen. Sie tragen dieselbe Haarlinie wie der gezeichnete Rahmen und einen Griff nahe der Mittelfuge. */ .sp-tuer-blatt { position: absolute; top: 0; width: 50%; height: 100%; background: linear-gradient(to bottom, #ffffff, #f4f8fb); box-shadow: inset 0 0 0 1.4px rgba(11,11,11,.42); backface-visibility: hidden; will-change: transform; } .sp-tuer-blatt::after { content: ''; position: absolute; top: 52%; width: 7px; height: 7px; border-radius: 50%; background: #3f7290; opacity: calc(1 - var(--frei)); } .sp-tuer-blatt--l { left: 0; border-radius: 7px 0 0 0; transform-origin: left center; transform: rotateY(calc(var(--auf) * -72deg)); } .sp-tuer-blatt--l::after { right: 9px; } .sp-tuer-blatt--r { right: 0; border-radius: 0 7px 0 0; transform-origin: right center; transform: rotateY(calc(var(--auf) * 72deg)); } .sp-tuer-blatt--r::after { left: 9px; } /* Beim Aufdrehen legt sich Schatten auf die Blätter, sonst bleiben sie flach */ .sp-tuer-blatt::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(11,11,11,.16), rgba(11,11,11,0)); opacity: calc(var(--auf) * .9); } .sp-tuer-blatt--r::before { background: linear-gradient(to left, rgba(11,11,11,.16), rgba(11,11,11,0)); } /* Beim ersten Öffnen einmal weich nachziehen, danach hängt die Drehung wieder unmittelbar am Scrollweg. */ .sp-tuer.is-einholen .sp-tuer-blatt, .sp-tuer.is-einholen .sp-tuer-licht, .sp-tuer.is-einholen .sp-sechs-zahl { transition: transform .7s var(--ease-out), opacity .7s var(--ease-out); } html.sparsam .sp-tuer-blatt { will-change: auto; } /* ── Was hinter der Tür steht: die sechs Schritte ───────────────────────── Die Zahl steht im Akzent, um sie herum zeichnen sich sechs Segmente nacheinander zum Kreis: ein Schritt je Segment, gemeinsam der fertige Weg, den Kapitel eins gleich ausführt. */ .sp-sechs-zahl { position: absolute; left: 50%; top: 48%; translate: -50% -50%; display: grid; place-items: center; width: min(74%, 132px); aspect-ratio: 1; opacity: var(--frei); transform: scale(calc(.78 + .22 * var(--frei))); } .sp-sechs-zahl b { position: relative; font-family: 'Montserrat', sans-serif; font-size: clamp(40px, 4.8vw, 66px); font-weight: 400; line-height: 1; letter-spacing: -.04em; color: #3f7290; } .sp-sechs-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sp-ring-teil { fill: none; stroke: #3f7290; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } /* Sobald die Tür weit genug offen ist, schließt sich der Ring Schritt für Schritt. Die Klasse wird einmal gesetzt und bleibt. */ .sp-tuer.is-offen .sp-ring-teil { transition: stroke-dashoffset .55s var(--ease-out); transition-delay: calc(var(--d) * 1ms); stroke-dashoffset: 0; } /* Die Zeile unter der Tür. Sie steht als Satz für sich, die Zahl in der Tür ist das Bild dazu. */ .sp-antwort .sp-sechs { max-width: 22ch; margin: 0 auto !important; font-family: 'Montserrat', sans-serif !important; font-size: clamp(21px, 2.5vw, 35px) !important; font-weight: 300; line-height: 1.28 !important; letter-spacing: -.02em; color: var(--tinte) !important; text-wrap: balance; } /* Das Schild über dem Sturz */ .sp-tuer-schild { position: relative; z-index: 1; width: min(84%, 320px); margin-bottom: 17px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: clamp(14px, 2vw, 20px) clamp(18px, 2.4vw, 28px) clamp(16px, 2.2vw, 22px); border-radius: 16px; background: var(--weiss); box-shadow: inset 0 0 0 1px rgba(11,11,11,.1), 0 1px 0 rgba(255,255,255,.9), 0 26px 50px -30px rgba(11,11,11,.55); opacity: 0; transform: translateY(16px); transition: opacity .9s 1.5s var(--ease-out), transform 1s 1.5s var(--ease-out); } .sp-tuer.an .sp-tuer-schild { opacity: 1; transform: none; } .sp-tuer-signet { width: clamp(26px, 3vw, 34px); aspect-ratio: 532 / 559; background: #3f7290; -webkit-mask: url('../Bilder/selbststaendig/signet.png') center / contain no-repeat; mask: url('../Bilder/selbststaendig/signet.png') center / contain no-repeat; } .sp-tuer-pre { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(11,11,11,.5); transition: opacity .3s var(--ease-out); } .sp-tuer-name { display: inline-flex; align-items: center; min-height: 1.2em; font-family: 'Montserrat', sans-serif; font-size: clamp(19px, 2.1vw, 27px); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; color: var(--tinte); white-space: nowrap; } .sp-tuer-name b { font-weight: inherit; } .sp-tuer-name i { display: inline-block; width: 2px; height: .92em; margin-left: 4px; background: #3f7290; animation: sp-cursor 1.05s steps(1) infinite; } @keyframes sp-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Der Faden führt von den sechs Schritten hinunter zu den beiden Knöpfen, in derselben Sprache wie der Lichtfaden im Kopf der Seite. */ .sp-faden { display: block; width: 1px; height: clamp(44px, 6vw, 74px); margin: clamp(16px, 2vw, 24px) auto 0; background: linear-gradient(to bottom, rgba(var(--akzent-r), 0), #9dc3dc); } @media (max-width: 620px) { .sp-antwort .sp-sechs { max-width: 20ch; } .sp-tuer { width: min(100%, 330px); } .sp-tuer-schild { width: 100%; border-radius: 14px; } .sp-tuer-name { font-size: 19px; } .sp-tuer-pre { font-size: 9px; letter-spacing: .16em; } } /* Teurer Übergang in Kapitel eins: das Weiß läuft unten in das helle Papier der Bühne aus, darüber liegt ein sehr leiser Schein im Akzent. */ .sp-loesung::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(120px, 18vh, 230px); pointer-events: none; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(var(--akzent-r), .3), transparent 72%), linear-gradient(to bottom, rgba(243,245,247,0), var(--papier-2)); } #fragen.ws-buehne-hell { border-top: 0; } .sp-antwort { max-width: 900px; margin: 0 auto; text-align: center; } .sp-antwort h2 { font-family: 'Montserrat', sans-serif !important; font-size: clamp(30px, 4.2vw, 60px) !important; line-height: 1.12 !important; letter-spacing: -.01em !important; font-weight: 300 !important; color: var(--tinte) !important; margin: 0; } .sp-antwort h2 { max-width: 17ch; margin-inline: auto; } /* Die Betonung trägt das Hellblau in der abgedunkelten Stufe, damit sie auf dem weißen Papier Kontrast hält (4,6:1). */ .sp-antwort h2 em { font-family: inherit; font-style: normal; font-weight: 300; color: #3f7290; } .sp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; /* Der Faden führt bereits hinunter, die Knöpfe hängen direkt daran */ margin-top: clamp(16px, 2vw, 26px); } /* Knöpfe in dieser Variante: Akzent gefüllt, Linie in Schwarz */ .ws-spot .ws-btn { font-weight: 400; color: var(--tinte); background: var(--akzent); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.06), 0 0 0 1px rgba(var(--akzent-r), 1), 0 16px 36px -14px rgba(var(--akzent-r), .8); } .ws-spot .ws-btn:focus-visible { outline-color: var(--tinte); } .ws-spot .ws-btn--line { color: var(--tinte); background: var(--weiss); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(0,0,0,.2), 0 10px 26px -16px rgba(0,0,0,.3); } .ws-spot .ws-btn--line::before { background: linear-gradient(100deg, transparent, rgba(var(--akzent-r), .4), transparent); } .sp-fuss { margin-top: 22px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13.5px !important; color: var(--leise) !important; } /* Abschlusshinweis der Variante */ .sp-teaser { position: relative; z-index: 2; padding-block: clamp(50px, 7vh, 90px) clamp(80px, 12vh, 130px); text-align: center; background: var(--papier-2); } html.js .sp-teaser { background: rgba(243,245,247,.8); } .sp-teaser .ws-eyebrow { color: rgba(11,11,11,.55) !important; } .sp-teaser p { max-width: 620px; margin: 0 auto 26px; font-family: 'Montserrat', sans-serif; font-weight: 300; color: var(--leise) !important; } /* Die Leiste der Designvarianten trägt hier den Akzent statt Gold */ .ws-spot .ws-varianten { background: rgba(0,0,0,.78); } .ws-spot .ws-varianten a.is-hier { background: var(--akzent); color: var(--tinte); } /* ── Schmale Fenster ──────────────────────────────────────────────────── */ @media (max-width: 760px) { /* Auf schmalen Fenstern steht das Bild breiter, sonst bleibt der Strahl ein Faden neben dem Satz */ .ws-spot { --bild-w: 150vw; --quelle-w: 32px; --quelle-y: clamp(20px, 3vh, 36px); } .sp-claim { font-size: clamp(30px, 8.6vw, 46px); } .sp-hinweis { display: none; } .sp-marken { gap: 8px; font-size: 13px; } .sp-marken li { padding: 8px 15px; } .sp-marken b { font-size: 16px; } /* Unten Platz für die Leiste der Designvarianten, sonst deckt sie die Kennzahlen zu */ .sp-kopf { padding-top: calc(var(--nav-h) + 40px); padding-bottom: clamp(96px, 16vh, 150px); } .sp-aura i { filter: blur(60px); } } /* ── Bildband: Partnerschaft auf Augenhöhe ──────────────────────────────── Steht zwischen den sechs Fragen und dem Fall Littig und gibt dem Auge eine Pause. Text auf Foto braucht einen Schleier: waagerecht trägt er die Spalte links und öffnet sich nach rechts auf die beiden Männer. */ .sp-bildband { position: relative; z-index: 2; display: flex; align-items: flex-end; min-height: clamp(300px, 46vh, 520px); overflow: clip; background-color: var(--tinte); } .sp-bildband-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; } .sp-bildband::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,10,.86) 0%, rgba(8,10,10,.6) 34%, rgba(8,10,10,.16) 62%, rgba(8,10,10,.06) 100%), linear-gradient(to top, rgba(8,10,10,.45), transparent 48%); } .sp-bildband-text { position: relative; z-index: 1; padding-block: clamp(30px, 4.4vw, 58px); } .sp-bildband-text .ws-eyebrow { color: var(--akzent) !important; max-width: none; } .sp-bildband-text p { max-width: 30ch; margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: clamp(19px, 2.1vw, 31px) !important; line-height: 1.32 !important; color: var(--weiss) !important; text-wrap: balance; } @media (max-width: 760px) { .sp-bildband { min-height: clamp(360px, 60vh, 460px); } .sp-bildband-bild { object-position: 62% 32%; } .sp-bildband::after { background: linear-gradient(to top, rgba(8,10,10,.9) 0%, rgba(8,10,10,.6) 42%, rgba(8,10,10,.1) 78%); } .sp-bildband-text p { max-width: none; } } /* ── Marke bis ins Detail: der Dekorationswagen in Kapitel drei ──────────── */ .sp-ci { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 5vw, 76px); } .sp-ci-bild { margin: 0; overflow: hidden; border-radius: 22px; aspect-ratio: 16 / 9; background-color: rgba(255,255,255,.04); } .sp-ci-bild img { width: 100%; height: 100%; object-fit: cover; } .sp-ci-text h3 { margin: 0 0 14px; } @media (max-width: 820px) { .sp-ci { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 5vw, 32px); } } /* ── Übernommene Kapitel aus der dunklen Fassung ───────────────────────── Fall Littig, Wachstum, Tobias Göck und der Vergleich stehen hier in derselben Struktur wie in der dunklen Fassung. Die Wortwelle bekommt statt Navy den Akzent dieser Variante und läuft kleiner, da "Ehrlich gesagt" nach der Antwort-Sektion nicht noch einmal so viel Bühne braucht. Die Sechs-Fragen-Bühne (Kapitel eins) läuft hier hell statt dunkel. */ .ws-spot .ws-welle .w.hot, .ws-spot .ws-welle .w.gold.hot { color: var(--akzent); } .ws-spot .ws-welle .w.gold.hot { text-shadow: 0 0 20px rgba(var(--akzent-r), .4); } .ws-spot .ws-provo { color: var(--akzent) !important; } .ws-spot .ws-welle-sec { padding-top: clamp(40px, 5vw, 72px); } .ws-spot .ws-welle { font-size: clamp(20px, 2.5vw, 34px) !important; } .ws-spot .ws-provo { font-size: clamp(18px, 1.7vw, 24px) !important; } .ws-spot .ws-welle-fuss p { font-size: 14px !important; } /* Ohne feste Navigationsleiste darf die Bühne hochkant weiter nach oben. Text und Bühne lesen denselben Versatz, damit der Text immer unmittelbar unter der Grafik haftet. */ @media (max-width: 900px) { .ws-spot .ws-buehne { --buehne-o: 16px; --buehne-h: min(30vh, 250px); } } /* Kapitel zwei: die Betonung trägt den Akzent der Variante statt Schwarz. Reines Hellblau hielte auf dem weißen Papier keinen Kontrast (1,4:1), diese Stufe steht bei 4,0:1 und bleibt sichtbar hellblau. */ .ws-spot .ws-fall-text h2 em { color: #4a86ab; } /* „Der Weg in Zahlen“ führt den Block an und steht deshalb größer */ .ws-spot .sp-zeit-eyebrow { font-size: 14.5px !important; letter-spacing: .16em; } /* Mehr erfahren: Zeitleiste und Zahlen klappen erst auf Klick auf */ .sp-mehr { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 0; border-radius: 999px; background: var(--weiss); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--tinte); cursor: pointer; transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out); } .sp-mehr:hover { background: rgba(var(--akzent-r), .18); box-shadow: inset 0 0 0 1px rgba(var(--akzent-r), 1), 0 12px 28px -20px rgba(0,0,0,.6); } .sp-mehr:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; } .sp-mehr svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease-out); } .sp-mehr[aria-expanded="true"] svg { transform: rotate(180deg); } .sp-mehr-feld { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); } .sp-mehr-innen { overflow: hidden; min-height: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s .55s; } .sp-mehr-feld.is-auf { grid-template-rows: 1fr; } .sp-mehr-feld.is-auf .sp-mehr-innen { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .14s var(--ease-out), transform .5s .14s var(--ease-out), visibility 0s; } /* Die Zeitleiste sitzt sonst direkt unter dem Knopf */ .sp-mehr-innen .ws-zeit-leiste { margin-top: clamp(26px, 3vw, 38px); } /* Das Porträt von Tobias Göck steht kleiner und dadurch scharf. Die Plakette schrumpft mit, sonst deckt sie das halbe Bild zu. */ .ws-spot .ws-person-bild { max-width: 330px; } .ws-spot .ws-person-marke { right: -16px; bottom: 20px; padding: 12px 17px; } .ws-spot .ws-person-marke b { font-size: 32px; } @media (min-width: 1081px) { .ws-spot .ws-person { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); } } /* ── Kapitel eins hell ──────────────────────────────────────────────────── Die Bühne selbst (der dunkle Screen mit den sechs animierten Szenen) bleibt dunkel – ihre Farben (Weiß, Gold/Akzent) sind darauf abgestimmt. Nur die Sektion drumherum wechselt auf das helle Papier der Variante. */ #fragen.ws-buehne-hell { background-color: var(--papier-2); color: var(--leise); } #fragen.ws-buehne-hell .ws-aura i { mix-blend-mode: multiply; opacity: .16; } #fragen.ws-buehne-hell .ws-schritt-nr { color: var(--gold-text); } #fragen.ws-buehne-hell .ws-schritt h3 { color: var(--navy); } #fragen.ws-buehne-hell .ws-schritt p { color: var(--leise); } #fragen.ws-buehne-hell .ws-kopf h2 em { color: #3f7290; } @media (max-width: 900px) { #fragen.ws-buehne-hell .ws-stage-inner { box-shadow: 0 20px 44px -24px rgba(0,0,0,.35); } #fragen.ws-buehne-hell .ws-schritt, #fragen.ws-buehne-hell .ws-schritt:first-child, #fragen.ws-buehne-hell .ws-schritt:last-child { min-height: 56vh; } #fragen.ws-buehne-hell .ws-kopf { margin-bottom: clamp(24px, 5vw, 40px); } } /* ── Ruhezustand ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .sp-hinweis i { animation: none; } .sp-main { background: var(--weiss); } .sp-karte { transition: none; } /* Der Aufklapper schaltet ohne Bewegung, bleibt aber bedienbar */ .sp-mehr, .sp-mehr svg, .sp-mehr-feld, .sp-mehr-innen { transition: none !important; } /* Tür und sechs Schritte zeigen das fertige Bild: Linien gezeichnet, Licht an, Schild oben, Ring geschlossen, kein Tippen, kein Cursor */ .sp-tuer-riss path { stroke-dashoffset: 0 !important; transition: none !important; } .sp-tuer-riss .t-griff, .sp-tuer-riss .t-bodenschein, .sp-tuer-licht, .sp-tuer-schild { opacity: 1 !important; transform: none !important; transition: none !important; } .sp-tuer-name i { display: none; } /* Die Tür steht offen, die sechs Schritte stehen frei */ .sp-tuer { --auf: 1; } .sp-tuer-blatt { transition: none !important; } .sp-sechs-zahl { opacity: 1 !important; transform: none !important; } .sp-ring-teil { stroke-dashoffset: 0 !important; transition: none !important; } .sp-fluester::before { filter: none; } /* Strahl und Aura bleiben stehen, nur als ruhiges Bild */ .sp-kegel { will-change: auto; } .sp-aura i { animation: none !important; will-change: auto; } .sp-marken li { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18,18,18,.92); } } /* ============================================================================ EINHEITLICHE SCHRIFT Die übernommenen Kapitel brachten drei Schriften mit: Source Sans für Überschriften, Playfair Display kursiv für Betonungen und Kapitelzähler, Montserrat für Eyebrows und Knöpfe. In dieser Variante läuft alles in Montserrat, mager und modern. Betont wird nicht mehr über Kursiv, sondern über Hellblau: auf Weiß in der abgedunkelten Stufe (#3f7290, 4,6:1), auf dunklem Grund im reinen Akzent. ============================================================================ */ .ws-spot, .ws-spot h1, .ws-spot h2, .ws-spot h3, .ws-spot h4, .ws-spot p, .ws-spot li, .ws-spot dt, .ws-spot dd, .ws-spot b, .ws-spot strong, .ws-spot span, .ws-spot small, .ws-spot em, .ws-spot blockquote, .ws-spot figcaption, .ws-spot button, .ws-spot a, .ws-spot .ws-welle, .ws-spot .ws-provo, .ws-spot .ws-zeit-satz, .ws-spot .ws-kapitel, .ws-spot .ws-schild-name, .ws-spot .ws-fakten dd b, .ws-spot .ws-band span, .ws-spot .ws-v-spalte--wir .ws-v-kopf span, .ws-spot .ws-welle .w.gold, .ws-spot .ws-welle .w.gold.hot, .ws-spot .ws-szene text, .ws-spot .s-pintext, .ws-spot .s-name, .ws-spot .s-org-du text, .ws-spot .k-knoten--gold text { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important; font-style: normal !important; } /* Überschriften: mager und weit, große Grade noch leichter als kleine */ .ws-spot h1, .ws-spot h2 { font-weight: 300 !important; letter-spacing: -.015em; } .ws-spot h3 { font-weight: 400 !important; letter-spacing: -.01em; } .ws-spot .ws-schritt h3 { font-weight: 400 !important; } .ws-spot .ws-zeit-satz, .ws-spot .ws-welle, .ws-spot .ws-provo { font-weight: 300 !important; letter-spacing: -.015em; } .ws-spot .ws-fakten dd b, .ws-spot .ws-heute b, .ws-spot .s-gaeste-zahl b { font-weight: 400 !important; letter-spacing: -.02em; } .ws-spot .ws-band span { font-weight: 300 !important; } .ws-spot p, .ws-spot li, .ws-spot dt { font-weight: 300; } /* Betonung: Hellblau statt Kursiv */ .ws-spot em, .ws-spot .ws-kapitel, .ws-spot .ws-provo, .ws-spot .ws-welle .w.gold.hot, .ws-spot .ws-zeit-satz em, .ws-spot .ws-v-spalte--wir .ws-v-kopf span, .ws-spot .ws-kopf h2 em, .ws-spot .ws-fall-text h2 em, .ws-spot #fragen.ws-buehne-hell .ws-kopf h2 em { color: #3f7290 !important; font-weight: 300; text-shadow: none; } .ws-spot .ws-kapitel { font-size: 11.5px !important; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; opacity: 1; margin-bottom: 12px; } /* Auf dunklem Grund trägt die Betonung den reinen Akzent */ .ws-spot .ws-dark em, .ws-spot .ws-dark .ws-kapitel, .ws-spot .ws-dark h2 em, .ws-spot .sp-bildband-text em { color: var(--akzent) !important; } .ws-spot .ws-welle .w.gold.hot { text-shadow: none !important; } /* Der Claim im Kegel bleibt wie er ist, nur ohne Kursiv-Erbe */ .ws-spot .sp-claim em { color: var(--akzent) !important; font-weight: 300; } /* Die Antwort-Überschrift trägt das Hellblau als Schrift statt als Band */ .sp-antwort h2 em { background: none !important; padding-inline: 0 !important; color: #3f7290 !important; } /* Bildband: der Schleier lag so dunkel, dass die Gesichter verschwanden. Jetzt trägt er die Textspalte gerade noch und gibt die Männer frei. */ .sp-bildband::after { background: linear-gradient(90deg, rgba(8,10,10,.66) 0%, rgba(8,10,10,.34) 36%, rgba(8,10,10,.06) 64%, rgba(8,10,10,0) 100%), linear-gradient(to top, rgba(8,10,10,.34), transparent 46%); } @media (max-width: 760px) { .sp-bildband::after { background: linear-gradient(to top, rgba(8,10,10,.78) 0%, rgba(8,10,10,.4) 44%, rgba(8,10,10,0) 76%); } } /* Ohne Bewegung steht der Name fest auf dem Schild, ohne blinkenden Cursor */ html.sparsam .sp-tuer-name i { display: none; } html.sparsam .sp-tuer-licht { filter: blur(8px); } html.sparsam .sp-tuer-name i { display: none; } html.sparsam .sp-tuer-licht { filter: blur(8px); } /* Der Weg zur Namensvorschau bleibt unter der Fußzeile als leiser Link */ .sp-fuss--link { margin-top: 8px; } .sp-fuss--link a { color: #3f7290; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(63,114,144,.4); transition: text-decoration-color .3s var(--ease-out); } .sp-fuss--link a:hover { text-decoration-color: currentColor; }