/* ========================================================================== Frontvertrieb — CI "Schwelle" Eigene Formensprache statt Standard-Dark-Grid: die Seite ist als Schwelle zwischen Flur (dunkel) und geoeffneter Tuer (Neonlicht in Violett-Pink) gebaut. Vier wiederkehrende Motive tragen die Identitaet: 1) LICHTSPALT — gerichtete, keilfoermige Lichtschneisen (wie durch einen Tuerspalt), nicht die ueblichen runden Blur-Kreise. Sitzen bewusst nur an den Aussenraendern, nie hinter Fliesstext. 2) TUERRASTER — Hintergrundraster in Tuerproportion (1:2.2) statt quadratischem Entwickler-Grid; einzelne Zellen sind als Tuerblatt mit Griffpunkt ausgezeichnet. 3) TUERRAHMEN — Rahmenlinie ohne Unterkante (offen nach unten) als Umfassung von Modulen; dazu Hausnummern-Plaketten und ein doppelter "Klopf"-Puls auf dem Haupt-CTA. 4) DIE TUER SELBST — im Hero als begehbares 3D-Objekt: das Tuerblatt dreht scrollgebunden um die Angel auf (siehe Abschnitt "Portal"). Kontrast: alle Textfarben rechnerisch gegen ihren realen Untergrund geprueft (siehe contrast.py) — Fliesstext >= 4.5:1, grosse Headlines >= 3:1. ========================================================================== */ :root{ --sand: #EDE2CE; --sand-hi: #F6EFE1; --sand-dim: rgba(237,226,206,.82); /* Fliesstext dunkel: 10.5:1 auf --void */ --sand-dim2: rgba(237,226,206,.70); /* Mono-Kleinlabels: 7.8:1 auf --void */ --ink: #17120E; --ink-soft: #4F453A; /* Fliesstext hell: 7.0:1 auf --sand */ --pink: #FF3EA5; --pink-lt: #FF7BC2; --pink-dk: #93206F; /* Magenta auf Sand: 6.1:1 */ --void: #0B070B; --night: #100B10; --line-dk: rgba(237,226,206,.11); --line-dk-2: rgba(237,226,206,.19); --warn: #F0A078; --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --f-body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --wrap: 1180px; --grid: 74px; /* Rasterbreite; Hoehe = Tuerproportion 1:2.2 */ --rad: 14px; --rad-tur: 17px 17px 4px 4px; /* Tuer-Silhouette: oben Bogen, unten Standfuss */ --grad: linear-gradient(120deg, #C13FE0, #FF3EA5 78%); } *{box-sizing:border-box} /* ACHTUNG: hier KEIN overflow-x setzen — das macht zum Clip-Container und der Sticky-Header bleibt beim Scrollen oben liegen statt zu kleben. Das Ueberlaufen wird an der Quelle verhindert (siehe .reveal--x im Einspaltenlayout) plus overflow-x:hidden auf . */ html{scroll-behavior:smooth; background:var(--void)} body{ margin:0; background:var(--void); color:var(--sand); font-family:var(--f-body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block; max-width:100%} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px; position:relative; z-index:3} /* Tastatur-Einstieg direkt zum Formular */ .skip{ position:fixed; top:8px; left:50%; translate:-50% 0; z-index:200; padding:10px 18px; border-radius:999px; background:var(--pink); color:#100D08; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; opacity:0; pointer-events:none; transform:translateY(-140%); transition:transform .2s ease, opacity .2s ease; } .skip:focus-visible{opacity:1; pointer-events:auto; transform:translateY(0)} /* --- Typografie ----------------------------------------------------------- */ h1,h2,h3{ font-family:var(--f-display); font-weight:700; font-stretch:112%; letter-spacing:-.03em; line-height:1.02; margin:0; color:var(--sand); } h1{font-size:clamp(3.1rem,7.4vw,6.2rem); line-height:.9; letter-spacing:-.045em} h2{font-size:clamp(2.1rem,4.2vw,3.6rem); line-height:.98; letter-spacing:-.038em; text-wrap:balance} h3{font-size:1.22rem; font-stretch:106%; letter-spacing:-.015em; line-height:1.24; text-wrap:balance} p{margin:0 0 1.05em; text-wrap:pretty} a{color:inherit} /* Tastatur-Fokus sichtbar machen; Formularfelder haben eigenen Fokus-Stil */ a:focus-visible, button:focus-visible, .btn:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; } .lede{font-size:1.2rem; line-height:1.58; color:var(--sand-dim)} /* Eyebrow-Plakette mit Tuer-Glyphe */ .tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--pink-lt); background:rgba(22,9,21,.82); border:1px solid rgba(255,62,165,.34); border-radius:11px 11px 3px 3px; /* gleiche Tuer-Silhouette wie die Module */ padding:7px 15px 7px 11px; margin-bottom:1.5rem; align-self:flex-start; } .tag .tur{width:15px; height:15px; opacity:1} .tag--lt{color:var(--pink-dk); background:rgba(255,252,245,.88); border-color:rgba(147,32,111,.3)} /* --- Tuer-Glyphe ---------------------------------------------------------- */ .tur{ display:inline-block; width:20px; height:20px; flex:none; background:url(assets/tuer-pink.svg) center/contain no-repeat; } .tur--ink{background-image:url(assets/tuer-ink.svg)} .tur--sand{background-image:url(assets/tuer-sand.svg)} .tur--sm{width:16px; height:16px} .tur--lg{width:30px; height:30px} /* --- Dunkle Sektionen ----------------------------------------------------- */ /* scroll-margin: Anker-Sprungziele landen sonst unter dem Sticky-Header */ .sec{position:relative; overflow:hidden; isolation:isolate; scroll-margin-top:72px} .sec--dark{background:var(--night)} .sec--void{background:var(--void)} /* MOTIV 2: Tuerraster — Zellen in Tuerproportion, nicht quadratisch. Die Maske nimmt die Mitte (= Textspalte) bewusst zurueck, damit keine Linie durch Fliesstext laeuft. */ .grid-tex{ position:absolute; inset:0; pointer-events:none; z-index:0; background-image: linear-gradient(rgba(237,226,206,.052) 1px, transparent 1px), linear-gradient(90deg, rgba(237,226,206,.052) 1px, transparent 1px); background-size:var(--grid) calc(var(--grid) * 2.2); -webkit-mask-image:radial-gradient(ellipse 78% 70% at 50% 50%, transparent 0%, rgba(0,0,0,.55) 48%, #000 72%, transparent 100%); mask-image:radial-gradient(ellipse 78% 70% at 50% 50%, transparent 0%, rgba(0,0,0,.55) 48%, #000 72%, transparent 100%); } /* Einzelne Rasterzellen als Tuerblatt ausgezeichnet (Rahmen + Griffpunkt). Sitzen bewusst NUR in den Aussenspalten links/rechts der Inhaltsspalte (max 1180px), damit kein Rahmen durch eine Eyebrow-Plakette oder einen Absatz laeuft. */ .grid-tex i{ position:absolute; display:block; width:calc(var(--grid) * .62); height:calc(var(--grid) * 1.38); border:1px solid rgba(255,62,165,.26); border-radius:2px 2px 0 0; } .grid-tex i::after{ content:""; position:absolute; right:15%; top:52%; width:3px; height:3px; border-radius:50%; background:rgba(255,62,165,.5); } .grid-tex i:nth-child(1){top:11%; left:3.5%} .grid-tex i:nth-child(2){top:46%; left:7.5%; transform:scale(.74); opacity:.55} .grid-tex i:nth-child(3){top:19%; right:4.5%; transform:scale(1.12); opacity:.8} .grid-tex i:nth-child(4){bottom:13%; left:6%; transform:scale(.86); opacity:.5} .grid-tex i:nth-child(5){bottom:24%; right:7%; opacity:.62} @media (max-width:1500px){ .grid-tex i{display:none} .grid-tex i:nth-child(1),.grid-tex i:nth-child(3),.grid-tex i:nth-child(5){display:block} } @media (max-width:1280px){ .grid-tex i:nth-child(1){left:1.2%} .grid-tex i:nth-child(3){right:1.5%} .grid-tex i:nth-child(5){right:2%} } /* Unter ~1000px laeuft der Inhalt bis an den linken Rand -> die Zelle dort liefe sonst durch die Headline. */ @media (max-width:1000px){ .grid-tex i:nth-child(1){display:none} } /* MOTIV 1: Lichtspalt — gerichtete Lichtschneise wie durch einen Tuerspalt, nicht der uebliche runde Blur-Kreis. Aufbau ohne starken Blur-Filter, damit der SCHARFE Lichtkern erhalten bleibt: - horizontaler Verlauf = Querschnitt des Lichtstrahls (heller Kern innen, weicher Saum aussen) - clip-path-Trapez = am Spalt schmal, nach unten aufgehend. - Maske = das Licht laeuft mit der Entfernung aus. */ .beam{ position:absolute; pointer-events:none; z-index:0; mix-blend-mode:screen; will-change:transform,opacity; opacity:var(--o,1); animation:beam-breathe 12s ease-in-out infinite; background:linear-gradient(90deg, transparent 0%, rgba(150,45,190,.12) 26%, rgba(232,80,205,.32) 42%, rgba(255,214,240,.62) 50%, rgba(232,80,205,.32) 58%, rgba(150,45,190,.12) 74%, transparent 100%); -webkit-clip-path:polygon(43% 0, 57% 0, 104% 100%, -4% 100%); clip-path:polygon(43% 0, 57% 0, 104% 100%, -4% 100%); -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.22) 62%, transparent 88%); mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.22) 62%, transparent 88%); filter:blur(13px); } /* Die Tuerspalt-Kante selbst: kurze, sehr helle Linie am Ursprung */ .beam::after{ content:""; position:absolute; top:-1%; left:46.5%; width:7%; height:11%; border-radius:2px; background:linear-gradient(180deg, rgba(255,230,246,.95), rgba(255,160,220,.38) 55%, transparent 100%); animation:slit-flicker 7s steps(1,end) infinite; } .beam--hero-a{top:-4%; right:-11%; width:38vw; max-width:500px; height:126%; transform:rotate(19deg); --o:1; animation-duration:11s} .beam--hero-b{top:32%; left:-14%; width:26vw; max-width:330px; height:110%; transform:rotate(-21deg); --o:.55; animation-duration:13s; animation-delay:-4s} .beam--soft {top:-6%; left:-10%; width:29vw; max-width:370px; height:120%; transform:rotate(-17deg); --o:.7; animation-duration:12s; animation-delay:-2s} .beam--right {top:-5%; right:-11%; width:31vw; max-width:400px; height:124%; transform:rotate(20deg); --o:.75; animation-duration:10s; animation-delay:-6s} .beam--apply {top:-12%; left:50%; width:44vw; max-width:600px; height:116%; transform:translateX(-50%); --o:.78; animation-duration:14s; animation-delay:-3s} /* Das Licht ATMET: langsames An- und Abschwellen von Helligkeit und Breite. opacity/scale sind Composite-Eigenschaften, kein Layout-Thrashing; die Scroll-Parallaxe schreibt separat `translate` und kollidiert nicht. */ @keyframes beam-breathe{ 0%,100%{opacity:calc(var(--o,1) * .62); scale:1 1} 50% {opacity:var(--o,1); scale:1.08 1.03} } /* Der helle Spaltkern flackert dazu ganz leicht — wie echtes Licht */ @keyframes slit-flicker{ 0%,100%{opacity:.72} 42%{opacity:1} 47%{opacity:.8} 53%{opacity:.97} 71%{opacity:.85} } /* Schutzschicht ueber dem Licht, unter dem Inhalt. Bewusst als horizontales Band statt als Ellipse: die Mitte (= Inhaltsspalte, max 1180px) wird satt abgedunkelt, die Aussenraender bleiben hell. */ .scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, transparent 0%, rgba(11,7,11,.72) 13%, rgba(11,7,11,.90) 26%, rgba(11,7,11,.90) 74%, rgba(11,7,11,.72) 87%, transparent 100%), radial-gradient(ellipse 120% 52% at 50% 50%, rgba(11,7,11,.5) 0%, transparent 78%); } /* --- Karten --------------------------------------------------------------- */ /* Bewusst OHNE backdrop-filter: die Flaeche ist mit .92 ohnehin fast deckend, der Filter kostete auf jeder der 14 Karten eine eigene Composite-Ebene. */ .card{ position:relative; background:linear-gradient(168deg, rgba(28,17,28,.94), rgba(15,11,16,.92) 62%); border:1px solid var(--line-dk-2); border-radius:var(--rad); padding:clamp(28px,3.2vw,44px); box-shadow:0 24px 60px -44px rgba(0,0,0,.95); transition:border-color .22s ease, background .22s ease, transform .22s ease; } .card--lt{ background:var(--sand-hi); border-color:rgba(23,18,14,.14); box-shadow:0 18px 44px -38px rgba(23,18,14,.5); } a.card:hover, .card--hov:hover{ border-color:rgba(255,62,165,.5); background:linear-gradient(168deg, rgba(36,21,36,.96), rgba(19,13,20,.94) 62%); transform:translateY(-3px); } .card--lt.card--hov:hover{background:#FFFBF2; border-color:rgba(147,32,111,.45)} /* Lichtsaum: auf dunklen Karten folgt ein warmer Schein dem Cursor ENTLANG DER RAHMENLINIE (nicht als Flaechen-Glow ueber dem Text). Die Maske stanzt die Content-Box aus, uebrig bleibt nur der 1px-Ring — wie Licht, das am Tuerrahmen entlangwandert. --lx/--ly setzt app.js per pointermove, nur bei hover:hover + feinem Zeiger. */ .js .card--hov:not(.card--lt)::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background:radial-gradient(190px circle at var(--lx,50%) var(--ly,50%), rgba(255,123,194,.75), rgba(193,63,224,.3) 45%, transparent 68%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; opacity:0; transition:opacity .35s ease; } .js .card--hov:not(.card--lt):hover::after{opacity:1} /* MOTIV 3: Tuerrahmen — Rahmenlinie ohne Unterkante, nach unten offen */ .framed{position:relative} .framed::before{ content:""; position:absolute; z-index:1; pointer-events:none; inset:clamp(10px,1.3vw,18px) clamp(10px,1.3vw,18px) 0; border:1px solid var(--line-dk); border-bottom:0; border-radius:8px 8px 0 0; } .framed--lt::before{border-color:rgba(23,18,14,.13)} /* --- Buttons -------------------------------------------------------------- */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--f-mono); font-size:.8rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; padding:16px 28px; border:1px solid transparent; border-radius:999px; transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; cursor:pointer; } /* Haupt-CTA: Violett->Pink-Verlauf + Shine-Sweep (2. Background-Layer, damit der Klopf-Ring in ::after NICHT von overflow:hidden abgeschnitten wird) */ .btn--pink{ background: linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 58%) no-repeat -160% 0 / 220% 100%, var(--grad); color:#100D08; border-color:rgba(255,123,194,.55); transition:background-position .55s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, translate .3s cubic-bezier(.2,.7,.3,1), filter .18s ease; } .btn--pink:hover{ background-position:160% 0, 0 0; border-color:rgba(255,182,219,.85); color:#100D08; filter:saturate(1.15); box-shadow:0 10px 38px -10px rgba(255,62,165,.8); transform:translateY(-2px) } .btn--pink[disabled]{opacity:.6; cursor:progress; transform:none; box-shadow:none} .btn--pink[disabled]::after{animation:none; opacity:0} .btn--line{background:rgba(237,226,206,.05); color:var(--sand); border-color:var(--line-dk-2)} .btn--line:hover{background:rgba(237,226,206,.1); border-color:var(--sand-dim2); transform:translateY(-2px)} .btn--sm{padding:11px 20px; font-size:.72rem} /* Doppelter "Klopf"-Puls auf dem Haupt-CTA (klopf-klopf, dann Pause) — laeuft dauerhaft als leiser Herzschlag, auf Hover schneller */ .btn--pink::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid rgba(255,123,194,.8); opacity:0; pointer-events:none; animation:klopf 3.4s cubic-bezier(.3,.7,.4,1) infinite; } .btn--pink:hover::after{animation-duration:1.5s} @keyframes klopf{ 0% {transform:scale(1); opacity:.85} 7% {transform:scale(1.24); opacity:0} 8% {transform:scale(1); opacity:.85} 15% {transform:scale(1.24); opacity:0} 100% {transform:scale(1.24); opacity:0} } /* Klingelschild-CTA: Haupt-Buttons bekommen einen Klingelknopf vorangestellt (gleiche Optik wie .portal__knob) und der Mauszeiger wird zur klopfenden Faust — die Bewerbung wird so zum "Anklopfen" statt zum Formular-Klick. */ .btn--bell{cursor:url("assets/knock-cursor.svg") 15 9, pointer} .btn__bell{ position:relative; width:11px; height:11px; border-radius:50%; flex:none; background:radial-gradient(circle at 34% 32%, #FFC6E6, #FF3EA5 62%, #8E1F62); box-shadow:0 0 0 3px rgba(16,13,8,.16), 0 0 10px rgba(255,62,165,.55); } .btn--bell:hover .btn__bell, .btn--bell:focus-visible .btn__bell{animation:plate-knock .5s ease, bell-glow .5s ease} @keyframes bell-glow{ 0%,100%{box-shadow:0 0 0 3px rgba(16,13,8,.16), 0 0 10px rgba(255,62,165,.55)} 40%{box-shadow:0 0 0 5px rgba(16,13,8,.1), 0 0 20px rgba(255,62,165,.95)} } /* --- Topbar --------------------------------------------------------------- */ .topbar{ position:sticky; top:0; z-index:60; background:rgba(11,7,11,.86); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; } .topbar.is-stuck{background:rgba(11,7,11,.95); border-bottom-color:var(--line-dk); box-shadow:0 12px 40px -24px rgba(0,0,0,.9)} .topbar__row{display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px; transition:height .25s ease} .topbar.is-stuck .topbar__row{height:64px} .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; font-family:var(--f-display); font-weight:700; font-stretch:118%; font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase; } .brand .tur{width:19px; height:19px} .topbar__nav{display:flex; align-items:center; gap:30px} .topbar__nav a{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--sand-dim2); padding-bottom:3px; border-bottom:1px solid transparent; transition:color .16s ease, border-color .16s ease; } .topbar__nav a:hover{color:var(--sand); border-bottom-color:var(--pink)} /* Scrollspy: die Sektion, in der man gerade steht, bleibt markiert */ .topbar__nav a.is-cur{color:var(--sand); border-bottom-color:var(--pink)} .topbar__nav .btn{border-bottom:0} /* Spezifitaet: .topbar__nav a (0,1,1) schlaegt sonst .btn--pink (0,1,0) und faerbt die CTA-Schrift sandfarben auf Pink = zu wenig Kontrast. */ .topbar__nav a.btn--pink{color:#100D08} .topbar__nav a.btn--pink:hover{color:#100D08; border-bottom:0} /* --- Hero ----------------------------------------------------------------- */ .hero{padding:clamp(44px,5.4vw,78px) 0 clamp(46px,5vw,68px)} .hero__grid{ display:grid; grid-template-columns:1.14fr .86fr; gap:clamp(30px,4.2vw,60px); align-items:center; } /* Tuerrahmen-Ecke: senkrechter Pfosten + Sturz-Ansatz links vom Hero-Text. Der Leser steht im Rahmen, das Licht kommt von rechts aussen herein. */ .hero__main{position:relative} /* Der Rahmen sitzt im Aussensteg (Gutter), NICHT als padding — sonst verengt er die Textspalte und die Headline bricht auf drei Zeilen. */ .hero__main::before{ content:""; position:absolute; left:-28px; top:-22px; bottom:8px; width:1px; background:linear-gradient(180deg, rgba(255,62,165,.55) 0%, rgba(255,62,165,.14) 62%, transparent 100%); } .hero__main::after{ content:""; position:absolute; left:-28px; top:-22px; height:1px; width:clamp(40px,5vw,74px); background:linear-gradient(90deg, rgba(255,62,165,.55), transparent); } .hero__lede{max-width:40ch; margin-top:1.7rem; margin-bottom:2.2rem} .hero__actions{display:flex; flex-wrap:wrap; gap:12px} /* ========================================================================== DIE TUER (Portal) — zentrales Bildmotiv des Hero Aufbau in Schichten, alles reines CSS (keine Bilddatei): .portal__jamb = Zarge/Sturz rund um die Oeffnung .portal__room = der Raum dahinter (Licht + Kernaussage) .portal__clip = eigener Perspektiv-Kontext MIT overflow:hidden, damit das schwenkende Blatt exakt in der Oeffnung bleibt und nicht unten aus dem Rahmen in die Bildunterschrift ragt (perspective wirkt nur auf direkte Kinder — deshalb ein eigener Wrapper statt overflow auf .portal__room) .portal__leaf = das Tuerblatt, dreht um die linke Angel in den Raum .portal__spill = Lichtkeil, der aus der Oeffnung faellt .portal__pool = Lichtpfuetze auf dem Boden Gesteuert ueber EINE Custom Property --open (0 = zu, 1 = ganz offen), die app.js an den Scrollfortschritt der ersten Viewport-Hoehe koppelt. Alle abgeleiteten Werte (Winkel, Deckkraft, Breite) rechnen per calc() daraus — dadurch bleibt die gesamte Animation eine einzige Composite-Eigenschaft pro Ebene. Faellt JS aus, bleibt der CSS-Startwert stehen: Tuer offen. ========================================================================== */ .stage{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; min-width:0; } .portal{ --open:.92; /* Fallback ohne JS/ohne Animation: Tuer offen, Kernaussage vollstaendig frei */ /* Max. 78 Grad statt 90: die Tuer bleibt bis zuletzt als Tuer lesbar, gibt aber ~80 % der Oeffnung frei. Ganz aufgeschwungen waere das Blatt nur noch ein Strich — das Motiv verschwaende genau im Moment der Pointe. */ --ang:calc(var(--open) * -78deg); position:relative; width:min(300px,100%); aspect-ratio:100/152; perspective:1150px; perspective-origin:66% 44%; margin-bottom:34px; /* Luft fuer Lichtkeil + Lichtpfuetze */ } .portal__clip{ position:absolute; inset:0; z-index:2; overflow:hidden; border-radius:20px 20px 4px 4px; perspective:1150px; perspective-origin:66% 44%; } /* Zarge: Rahmenlinie + Sturz, nach unten offen (wie MOTIV 3) */ .portal__jamb{ position:absolute; inset:-15px -15px -2px; z-index:0; border:1px solid rgba(255,62,165,.34); border-bottom:0; border-radius:24px 24px 0 0; box-shadow:0 0 44px -14px rgba(255,62,165,.35), inset 0 0 30px -18px rgba(255,62,165,.6); } .portal__jamb::before{ content:""; position:absolute; left:7%; right:7%; bottom:1px; height:3px; border-radius:2px; z-index:3; background:linear-gradient(90deg, transparent, rgba(255,166,222,.95) 22%, rgba(255,166,222,.95) 78%, transparent); box-shadow:0 0 20px 5px rgba(255,62,165,.55); opacity:calc(1 - var(--open) * 1.6); } .portal__jamb::after{ content:""; position:absolute; left:12%; right:12%; top:-9px; height:1px; background:linear-gradient(90deg, transparent, rgba(255,62,165,.6), transparent); } /* Der Raum dahinter */ .portal__room{ position:absolute; inset:0; overflow:hidden; border-radius:20px 20px 4px 4px; background: radial-gradient(ellipse 115% 70% at 56% 44%, rgba(255,120,205,.34), transparent 72%), linear-gradient(180deg, #2B0D29 0%, #170A1A 52%, #0A060B 100%); box-shadow:inset 0 0 46px rgba(0,0,0,.92); } .portal__light{ position:absolute; left:56%; top:-6%; width:130%; height:116%; translate:-50% 0; background:radial-gradient(ellipse 42% 38% at 50% 42%, rgba(255,222,244,.6), rgba(255,62,165,.24) 44%, transparent 72%); mix-blend-mode:screen; animation:room-breathe 9s ease-in-out infinite; } @keyframes room-breathe{0%,100%{opacity:.72; scale:1} 50%{opacity:1; scale:1.06}} /* Kernaussage im Tuerrahmen. Sitzt rechts, weil sich die Oeffnung beim Aufschwingen von rechts nach links freigibt. Blendet erst auf, wenn die Tuer weit genug offen steht — sonst laege der Text unter dem Blatt. */ .portal__inner{ position:absolute; inset:auto 6% 15% 26%; text-align:right; opacity:calc((var(--open) - .58) * 3.6); } .portal__kicker{ display:block; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pink-lt); margin-bottom:8px; } .portal__num{ display:block; font-family:var(--f-display); font-weight:700; font-stretch:118%; font-size:clamp(2.2rem,3.2vw,2.85rem); line-height:.94; letter-spacing:-.045em; background:linear-gradient(100deg, #FFA8D8 0%, #FF3EA5 52%, #C13FE0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 22px rgba(255,62,165,.55)); } .portal__sub{ display:block; margin-top:9px; font-family:var(--f-mono); font-size:.68rem; line-height:1.6; letter-spacing:.04em; color:var(--sand-dim); max-width:22ch; margin-left:auto; } /* Das Tuerblatt */ .portal__leaf{ position:absolute; inset:0; transform-origin:left center; transform:rotateY(var(--ang)); transform-style:preserve-3d; will-change:transform; border-radius:20px 20px 4px 4px; background: linear-gradient(100deg, rgba(255,255,255,.05) 0%, transparent 26%), linear-gradient(96deg, #191019 0%, #271729 44%, #140E16 100%); border:1px solid rgba(237,226,206,.17); box-shadow:0 34px 64px -42px #000; } /* Kassetten */ .portal__pane{ position:absolute; left:13%; right:24%; border:1px solid rgba(237,226,206,.2); border-radius:5px; background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(0,0,0,.3)); box-shadow:inset 0 1px 0 rgba(237,226,206,.09), inset 0 -1px 0 rgba(0,0,0,.5); } .portal__pane--a{top:9%; height:34%} .portal__pane--b{top:50%; height:40%} /* Klinke + Rosette */ .portal__knob{ position:absolute; right:9%; top:49%; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 34% 32%, #FFC6E6, #FF3EA5 62%, #8E1F62); box-shadow:0 0 0 4px rgba(255,62,165,.14), 0 0 14px rgba(255,62,165,.5); } .portal__knob::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(255,123,194,.75); opacity:0; animation:klopf 3.4s cubic-bezier(.3,.7,.4,1) infinite .6s; } /* Namensschild statt Hausnummer — greift die Plaketten der Etappen auf */ .portal__nameplate{ position:absolute; left:50%; top:4.5%; translate:-50% 0; padding:3px 10px; border-radius:3px; background:rgba(11,7,11,.9); border:1px solid rgba(255,62,165,.45); font-family:var(--f-mono); font-size:.56rem; font-weight:500; letter-spacing:.22em; color:var(--pink-lt); } /* Leuchtender Tuerspalt an der Schlosskante: hell wenn zu, weg wenn offen */ .portal__slit{ position:absolute; right:-1px; top:2%; bottom:2%; width:5px; border-radius:3px; background:linear-gradient(180deg, rgba(255,226,246,.15), rgba(255,120,205,.95) 45%, rgba(255,226,246,.15)); box-shadow:0 0 16px 3px rgba(255,62,165,.75); opacity:calc((.66 - var(--open)) * 2.1); } /* Materialstaerke der Tuer: schmale Flaeche, die nach hinten wegklappt */ .portal__edge{ position:absolute; right:0; top:0; bottom:0; width:11px; transform-origin:right center; transform:rotateY(90deg); background:linear-gradient(90deg, rgba(10,6,10,.95), rgba(122,58,112,.9)); border-radius:4px 0 0 4px; } /* Das Blatt dreht sich vom Licht weg -> wird beim Oeffnen dunkler */ .portal__shade{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(104deg, rgba(0,0,0,.1), rgba(0,0,0,.7)); opacity:calc(var(--open) * .9); } /* Licht, das aus der Oeffnung faellt */ .portal__spill{ position:absolute; left:58%; top:6%; width:150%; height:120%; z-index:1; pointer-events:none; mix-blend-mode:screen; /* Kegel aus Konus-Verlauf statt clip-path: eine geclippte Kante bleibt auch hinter blur() hart und zeichnete sich als sichtbare Diagonale ab. */ background:conic-gradient(from 84deg at 0% 0%, transparent 0deg, rgba(255,150,218,.34) 9deg, rgba(193,63,224,.13) 27deg, transparent 44deg); -webkit-mask-image:radial-gradient(circle at 0% 0%, #000 0%, rgba(0,0,0,.45) 46%, transparent 84%); mask-image:radial-gradient(circle at 0% 0%, #000 0%, rgba(0,0,0,.45) 46%, transparent 84%); filter:blur(10px); transform-origin:0 0; scale:calc(.45 + var(--open) * .7) calc(.7 + var(--open) * .4); opacity:calc(var(--open) * .95); } .portal__pool{ position:absolute; left:-8%; right:-34%; bottom:-22px; height:56px; z-index:1; pointer-events:none; mix-blend-mode:screen; background:radial-gradient(ellipse 46% 100% at 40% 0%, rgba(255,110,200,.45), transparent 70%); filter:blur(11px); opacity:calc(var(--open) * .8); } .stage__cap{ margin:0; max-width:36ch; text-align:center; font-size:.93rem; line-height:1.58; color:var(--sand-dim); } .stage__cap strong{color:var(--sand)} .stage__hint{display:none} /* nur sinnvoll, wenn JS die Tuer bewegt */ .js .stage__hint{ display:inline-flex; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-dim2); align-items:center; gap:8px; transition:opacity .4s ease, translate .4s ease; } .stage__hint::before{content:""; width:16px; height:1px; background:var(--pink)} .stage__hint::after{ content:""; width:6px; height:6px; border-right:1px solid var(--pink); border-bottom:1px solid var(--pink); rotate:45deg; translate:0 -2px; animation:hint-bob 1.8s ease-in-out infinite; } .stage__hint.is-off{opacity:0; translate:0 6px} @keyframes hint-bob{0%,100%{translate:0 -3px} 50%{translate:0 2px}} /* --- Hero-Fakten ---------------------------------------------------------- */ .hero__facts{margin-top:clamp(42px,5vw,66px)} .hero__facts-label{ font-family:var(--f-mono); font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--pink-lt); margin:0 0 18px; display:flex; align-items:center; gap:14px; } .hero__facts-label::after{content:""; flex:1; height:1px; background:var(--line-dk)} .facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); } .fact{padding:clamp(22px,2.4vw,30px); border-radius:var(--rad-tur)} .fact h3{margin-bottom:8px; font-size:1.12rem} .fact p{margin:0; font-size:.93rem; line-height:1.56; color:var(--sand-dim)} /* --- Warum die Tür -------------------------------------------------------- */ .why{padding:clamp(58px,7.5vw,100px) 0} .why__grid{display:grid; grid-template-columns:.84fr 1.16fr; gap:clamp(30px,5vw,76px); align-items:start} .why__head{position:sticky; top:110px} .why h2{max-width:12ch} .why__doors{display:flex; align-items:center; gap:13px; margin-top:30px} .why__note{ margin-top:26px; font-family:var(--f-mono); font-size:.72rem; line-height:1.85; letter-spacing:.04em; color:var(--sand-dim2); max-width:26ch; } .why__body{display:grid; gap:18px} .why__body p{color:var(--sand-dim); max-width:64ch; margin:0} .why__body p + p{margin-top:1.05em} .pull{ margin:0; padding:clamp(24px,2.6vw,34px) clamp(26px,3vw,38px); border-left:2px solid var(--pink); font-family:var(--f-display); font-weight:600; font-stretch:106%; font-size:clamp(1.3rem,2.2vw,1.85rem); line-height:1.3; letter-spacing:-.02em; color:var(--sand); background:linear-gradient(100deg, rgba(64,16,60,.75), rgba(15,11,16,.55) 72%); border-radius:0 var(--rad) var(--rad) 0; } /* --- Dein Weg: drei Etappen mit Hausnummern-Plaketten --------------------- */ .trail{padding:clamp(58px,7.5vw,100px) 0} .trail__head{display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:end; margin-bottom:clamp(46px,5vw,70px)} .trail__head h2{max-width:18ch} .trail__aside{ font-family:var(--f-mono); font-size:.76rem; line-height:1.85; color:var(--sand-dim2); border-left:1px solid var(--line-dk); padding-left:22px; max-width:36ch; margin:0; } .trail__track{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,24px); align-items:start} .step{padding-top:clamp(40px,3.8vw,52px); border-radius:var(--rad-tur)} .step:nth-child(2){margin-top:30px} .step:nth-child(3){margin-top:60px} /* Hausnummern-Plakette, sitzt wie ein Schild auf der Kartenkante */ .step__plate{ position:absolute; top:-16px; left:clamp(26px,3vw,40px); min-width:46px; height:34px; padding:0 12px; border-radius:4px; background:#0B070B; border:1px solid rgba(255,62,165,.55); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.92rem; font-weight:500; letter-spacing:.06em; color:var(--pink-lt); box-shadow:0 6px 18px -10px rgba(0,0,0,.9); } .step__num{ display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pink); margin-bottom:12px; } .step h3{margin-bottom:11px; font-size:1.3rem} .step p{color:var(--sand-dim); font-size:.97rem; margin:0} /* --- Dein Gebiet: EINZIGE helle Flaeche, als Modul im dunklen Raum -------- */ .gebiet{ position:relative; background:var(--sand); color:var(--ink); padding:clamp(62px,8vw,104px) clamp(0px,2vw,28px); max-width:1600px; margin:clamp(10px,2vw,28px) auto; border-radius:clamp(0px,2.4vw,30px); box-shadow:0 40px 120px -60px rgba(0,0,0,.9); overflow:hidden; } .gebiet h2,.gebiet h3{color:var(--ink)} .gebiet__grid{display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(30px,5vw,76px)} .gebiet__head{position:sticky; top:110px; align-self:start} /* text-wrap:wrap statt balance: balance wuerde "Nine-to-" / "Five-…" trennen, normaler Umbruch haelt "Nine-to-Five-" zusammen */ .gebiet__head h2{max-width:14ch; text-wrap:wrap} .gebiet__head p{margin-top:1.2rem; color:var(--ink-soft); font-size:1rem; max-width:34ch} .gebiet__list{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,20px)} .item{ padding:clamp(24px,2.6vw,32px); border-radius:var(--rad-tur); /* Griffpunkt rechts auf Hoehe der Klinke */ background: radial-gradient(circle at right 17px top 54%, rgba(147,32,111,.5) 0 3.2px, transparent 4px), var(--sand-hi); } .item.card--hov:hover{background:radial-gradient(circle at right 17px top 54%, rgba(147,32,111,.7) 0 3.2px, transparent 4px), #FFFBF2} /* Zwei Baender an der linken Kante = Tuerbaender/Scharniere */ .item::before, .item::after{ content:""; position:absolute; left:-1px; width:3px; height:16px; border-radius:0 2px 2px 0; background:rgba(147,32,111,.4); } .item::before{top:27%} .item::after{top:63%} .item h3{margin-bottom:9px} .item p{margin:0; font-size:.95rem; color:var(--ink-soft)} /* Verdienst-Kachel: die Zahl traegt die Aussage, nicht die Ueberschrift. Verlauf endet bei #C13FE0 (3.6:1 auf Sand) — heller waere zu schwach. */ .item--num{ background: linear-gradient(#C13FE0, #FF3EA5) top left / 100% 2px no-repeat, radial-gradient(circle at right 17px top 54%, rgba(147,32,111,.5) 0 3.2px, transparent 4px), var(--sand-hi); } .item--num.card--hov:hover{ background: linear-gradient(#C13FE0, #FF3EA5) top left / 100% 2px no-repeat, radial-gradient(circle at right 17px top 54%, rgba(147,32,111,.7) 0 3.2px, transparent 4px), #FFFBF2; } .item__fig{ display:block; margin-bottom:10px; font-family:var(--f-display); font-weight:700; font-stretch:118%; font-size:clamp(2.2rem,3.4vw,2.9rem); line-height:.92; letter-spacing:-.05em; background:linear-gradient(104deg, #93206F 0%, #B02C89 46%, #C13FE0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; } /* --- Passt du an die Tür? ------------------------------------------------- */ .fit{padding:clamp(54px,6.5vw,88px) 0} .fit__grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px,4.6vw,70px); align-items:start} .fit__head h2{max-width:none; font-size:clamp(1.85rem,3.1vw,2.65rem)} .fit__list{list-style:none; margin:0; padding:0} .fit__list li{ position:relative; padding:19px 0 19px 40px; border-top:1px solid var(--line-dk); font-family:var(--f-display); font-weight:500; font-stretch:104%; font-size:clamp(1.04rem,1.6vw,1.3rem); line-height:1.36; letter-spacing:-.015em; color:var(--sand); text-wrap:pretty; } .fit__list li:first-child{border-top:0; padding-top:0} /* Aufzaehlungszeichen als gezeichnete Mini-Tuer (Rahmen + Klinke) — die SVG-Glyphe verliert unter ~24 px ihre Form und liest sich nur als Fleck. */ .fit__list li::before{ content:""; position:absolute; left:3px; top:20px; width:14px; height:25px; border:1px solid rgba(255,62,165,.75); border-radius:3px 3px 0 0; transform-origin:left center; transition:transform .5s cubic-bezier(.34,.86,.28,1), border-color .3s ease, box-shadow .4s ease; } .fit__list li::after{ content:""; position:absolute; left:12px; top:33px; width:3px; height:3px; border-radius:50%; background:var(--pink); transition:translate .5s cubic-bezier(.34,.86,.28,1); } /* Beim Ueberfahren der Zeile schwingt das Tuerchen einen Spalt auf, die Klinke wandert perspektivisch mit — gleiche Angel-Logik wie ueberall */ .fit__list li:hover::before{ transform:perspective(150px) rotateY(-32deg); border-color:var(--pink); box-shadow:2px 0 10px -2px rgba(255,62,165,.55); } .fit__list li:hover::after{translate:-3px 0} .fit__list li:first-child::before{top:1px} .fit__list li:first-child::after{top:14px} /* --- FAQ (jede Frage eine ECHTE Mini-Tuer) -------------------------------- Gleiches Bauprinzip wie das Hero-Portal, auf Kachelmass verdichtet: .fdoor__jamb = Zarge mit Lichtsaum (Rahmen ohne Unterkante, MOTIV 3) .fdoor__room = der Raum dahinter — glimmt erst richtig, wenn offen .fdoor__clip = eigener Perspektiv-Kontext mit overflow:hidden, damit das schwenkende Blatt in der Oeffnung bleibt .fdoor__leaf = Tuerblatt mit Kassetten, Klinke, Kantenstaerke und leuchtendem Schlosskanten-Spalt; dreht um die linke Angel .fdoor__spill = Lichtkeil, der beim Oeffnen aus der Tuer auf die Antwort faellt Zustand haengt an .is-open (setzt app.js — so animiert auch das ZUklappen); ohne JS greifen dieselben Regeln ueber [open] nativ. Die Antwort faehrt per grid-template-rows 0fr->1fr aus: animierbar ganz ohne Hoehenmessung, der Text tritt leicht versetzt "ins Licht". */ .faq{padding:clamp(56px,7vw,92px) 0} .faq__grid{display:grid; grid-template-columns:.84fr 1.16fr; gap:clamp(30px,5vw,76px); align-items:start} .faq__head{position:sticky; top:110px} .faq__head h2{max-width:15ch} .faq__list{display:grid; gap:14px} .faq__door{padding:0} .faq__door.is-open, html:not(.js) .faq__door[open]{border-color:rgba(255,62,165,.5)} .faq__q{ list-style:none; display:flex; align-items:center; gap:18px; cursor:url("assets/knock-cursor.svg") 15 9, pointer; /* Anklopfen wie am CTA */ padding:clamp(15px,1.8vw,20px) clamp(24px,2.6vw,32px); font-family:var(--f-display); font-weight:500; font-stretch:104%; font-size:1.06rem; color:var(--sand); -webkit-tap-highlight-color:transparent; } .faq__q::-webkit-details-marker{display:none} .faq__q::marker{content:""} .faq__q:focus-visible{outline:2px solid var(--pink); outline-offset:-2px; border-radius:var(--rad)} .faq__qtext{flex:1; min-width:0; transition:color .3s ease} .faq__door.is-open .faq__qtext, html:not(.js) .faq__door[open] .faq__qtext{color:var(--sand-hi)} /* Hausnummern der Strasse "Bevor du klingelst" — greift die Etappen-Plaketten auf */ .faq__num{ flex:none; font-family:var(--f-mono); font-size:.7rem; font-weight:500; letter-spacing:.16em; color:var(--sand-dim2); transition:color .35s ease; } .faq__door.is-open .faq__num, html:not(.js) .faq__door[open] .faq__num{color:var(--pink-lt)} /* Die Mini-Tuer selbst (42x64 = Proportion des Hero-Portals) */ .fdoor{position:relative; flex:none; width:42px; height:64px} .fdoor__jamb{ position:absolute; inset:-6px -6px -2px; border:1px solid rgba(255,62,165,.3); border-bottom:0; border-radius:9px 9px 0 0; transition:border-color .5s ease, box-shadow .5s ease; } .faq__door.is-open .fdoor__jamb, html:not(.js) .faq__door[open] .fdoor__jamb{ border-color:rgba(255,62,165,.6); box-shadow:0 0 20px -6px rgba(255,62,165,.55), inset 0 0 12px -6px rgba(255,62,165,.6); } .fdoor__room{ position:absolute; inset:0; border-radius:7px 7px 2px 2px; overflow:hidden; background: radial-gradient(ellipse 120% 76% at 58% 42%, rgba(255,120,205,.42), transparent 74%), linear-gradient(180deg, #2B0D29 0%, #170A1A 54%, #0A060B 100%); box-shadow:inset 0 0 14px rgba(0,0,0,.92); opacity:.5; transition:opacity .6s ease; } .faq__door.is-open .fdoor__room, html:not(.js) .faq__door[open] .fdoor__room{ opacity:1; animation:fdoor-breathe 7s ease-in-out .7s infinite; } /* startet bei 1 = Endwert der Oeffnen-Transition -> kein Helligkeitssprung */ @keyframes fdoor-breathe{0%,100%{opacity:1} 50%{opacity:.78}} .fdoor__clip{ position:absolute; inset:0; overflow:hidden; border-radius:7px 7px 2px 2px; perspective:380px; perspective-origin:72% 42%; } .fdoor__leaf{ position:absolute; inset:0; border-radius:7px 7px 2px 2px; transform-origin:left center; transform:rotateY(0deg); transform-style:preserve-3d; background: linear-gradient(100deg, rgba(255,255,255,.06) 0%, transparent 30%), linear-gradient(96deg, #191019 0%, #271729 46%, #140E16 100%); border:1px solid rgba(237,226,206,.22); transition:transform .65s cubic-bezier(.34,.86,.28,1), filter .65s ease; } /* Kassetten wie am grossen Blatt */ .fdoor__leaf::before, .fdoor__leaf::after{ content:""; position:absolute; left:15%; right:26%; border:1px solid rgba(237,226,206,.22); border-radius:2px; background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(0,0,0,.3)); } .fdoor__leaf::before{top:10%; height:32%} .fdoor__leaf::after{top:50%; height:38%} .fdoor__knob{ position:absolute; right:12%; top:48%; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle at 34% 32%, #FFC6E6, #FF3EA5 62%, #8E1F62); box-shadow:0 0 6px rgba(255,62,165,.6); } /* Leuchtender Spalt an der Schlosskante: hell wenn zu, weg wenn offen */ .fdoor__slit{ position:absolute; right:-1px; top:4%; bottom:4%; width:3px; border-radius:2px; background:linear-gradient(180deg, rgba(255,226,246,.2), rgba(255,120,205,.95) 46%, rgba(255,226,246,.2)); box-shadow:0 0 8px 2px rgba(255,62,165,.7); opacity:.75; transition:opacity .5s ease; } /* Materialstaerke: schmale Flaeche, die beim Schwenken sichtbar wird */ .fdoor__edge{ position:absolute; right:0; top:0; bottom:0; width:7px; transform-origin:right center; transform:rotateY(90deg); background:linear-gradient(90deg, rgba(10,6,10,.95), rgba(122,58,112,.9)); border-radius:2px 0 0 2px; } /* OFFEN: Blatt schwingt in den Raum und dreht sich vom Licht weg */ .faq__door.is-open .fdoor__leaf, html:not(.js) .faq__door[open] .fdoor__leaf{ transform:rotateY(-76deg); filter:brightness(.55); } .faq__door.is-open .fdoor__slit, html:not(.js) .faq__door[open] .fdoor__slit{opacity:0} /* HOVER (nur zu): die Tuer steht einen Spalt auf — Einladung zum Klopfen */ .js .faq__door:not(.is-open) .faq__q:hover .fdoor__leaf{transform:rotateY(-16deg)} .js .faq__door:not(.is-open) .faq__q:hover .fdoor__slit{opacity:1} .js .faq__door:not(.is-open) .faq__q:hover .fdoor__room{opacity:.75} /* Lichtkeil aus der offenen Tuer Richtung Antwort */ .fdoor__spill{ position:absolute; left:52%; top:12%; width:300%; height:220%; z-index:0; pointer-events:none; mix-blend-mode:screen; background:conic-gradient(from 76deg at 0% 0%, transparent 0deg, rgba(255,150,218,.36) 11deg, rgba(193,63,224,.14) 30deg, transparent 50deg); -webkit-mask-image:radial-gradient(circle at 0% 0%, #000 0%, rgba(0,0,0,.4) 48%, transparent 82%); mask-image:radial-gradient(circle at 0% 0%, #000 0%, rgba(0,0,0,.4) 48%, transparent 82%); filter:blur(7px); transform-origin:0 0; scale:.45; opacity:0; transition:opacity .65s ease, scale .65s cubic-bezier(.34,.86,.28,1); } .faq__door.is-open .fdoor__spill, html:not(.js) .faq__door[open] .fdoor__spill{scale:1; opacity:1} /* Antwort-Panel: Hoehe via grid-template-rows, Text tritt ins Licht */ .faq__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s cubic-bezier(.34,.86,.28,1)} .faq__panel-in{overflow:hidden; min-height:0; position:relative} /* Lichtfaden: faellt aus der Mini-Tuer senkrecht auf die Antwort */ .faq__panel-in::before{ content:""; position:absolute; top:0; bottom:16px; width:1px; left:calc(clamp(24px,2.6vw,32px) + 21px); background:linear-gradient(180deg, rgba(255,123,194,.55), rgba(255,123,194,.12) 70%, transparent); opacity:0; transition:opacity .5s ease .15s; } .faq__door.is-open .faq__panel-in::before, html:not(.js) .faq__door[open] .faq__panel-in::before{opacity:1} .faq__door.is-open .faq__panel, html:not(.js) .faq__door[open] .faq__panel{grid-template-rows:1fr} .faq__a{ margin:0; padding:2px clamp(24px,2.6vw,32px) clamp(20px,2.3vw,26px) calc(clamp(24px,2.6vw,32px) + 60px); color:var(--sand-dim); font-size:.94rem; line-height:1.62; max-width:56ch; opacity:0; translate:0 10px; transition:opacity .45s ease .14s, translate .55s cubic-bezier(.34,.86,.28,1) .14s; } .faq__door.is-open .faq__a, html:not(.js) .faq__door[open] .faq__a{opacity:1; translate:0 0} /* --- Hinweis -------------------------------------------------------------- */ .note{padding:0 0 clamp(60px,8vw,100px)} .note__inner{max-width:820px; margin:0 auto; text-align:center; padding:clamp(38px,4vw,56px); border-top:2px solid var(--pink)} .note__label{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--pink-lt); display:block; margin-bottom:14px; } .note p{margin:0; font-size:1.05rem; line-height:1.65; color:var(--sand-dim)} .note strong{color:var(--sand)} /* --- Bewerbung ------------------------------------------------------------ */ .apply{padding:clamp(66px,8vw,112px) 0 clamp(58px,7vw,92px)} .apply__lead{max-width:820px; margin:0 auto clamp(46px,5vw,74px); text-align:center} .apply__lead .doors{justify-content:center; margin-bottom:22px} .apply__lead .doors__seg{max-width:120px} .apply__lead p{ font-family:var(--f-display); font-weight:700; font-stretch:110%; font-size:clamp(1.8rem,3.8vw,3.1rem); line-height:1.08; letter-spacing:-.035em; color:var(--sand); margin:0; text-wrap:balance; text-shadow:0 2px 26px rgba(11,7,11,.95); } .apply__lead em{font-style:normal; color:var(--pink-lt)} .apply__grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(20px,2.4vw,30px); align-items:stretch} .apply__intro{padding:clamp(28px,3vw,40px); display:flex; flex-direction:column} .apply__intro h2{max-width:11ch} .apply__intro p{color:var(--sand-dim); margin-top:1.1rem; font-size:1rem; max-width:32ch} .apply__steps{ list-style:none; margin:1.4rem 0 0; padding:0; counter-reset:s; font-size:.9rem; line-height:1.5; color:var(--sand-dim); } .apply__steps li{position:relative; padding:0 0 0 34px; margin-bottom:12px; counter-increment:s} .apply__steps li::before{ content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; color:var(--pink-lt); } .apply__contact{ margin-top:auto; padding-top:24px; border-top:1px solid var(--line-dk); font-family:var(--f-mono); font-size:.76rem; line-height:1.9; color:var(--sand-dim2); letter-spacing:.03em; } .apply__contact a{ color:var(--pink-lt); text-decoration:none; border-bottom:1px solid rgba(255,123,194,.4); word-break:break-all; transition:color .16s ease, border-color .16s ease; } .apply__contact a:hover{color:var(--sand-hi); border-bottom-color:var(--pink-lt)} /* Tuerreihe: mehrere Tuer-Glyphen in abnehmender Groesse = Strassenzug */ .doors{display:flex; align-items:center; gap:12px} .doors__seg{height:1px; background:var(--line-dk); flex:1} /* --- Formular ------------------------------------------------------------- */ .form{padding:clamp(26px,3vw,40px)} .form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px} .form label{ display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sand-dim2); margin:0 0 8px; } .label__opt{text-transform:none; letter-spacing:0} .form .field{margin-bottom:18px} .form input, .form textarea{ width:100%; background:rgba(7,4,8,.8); color:var(--sand); border:1px solid var(--line-dk-2); border-radius:9px; padding:14px 15px; font-family:var(--f-body); font-size:1rem; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; } .form textarea{min-height:104px; resize:vertical} .form input::placeholder, .form textarea::placeholder{color:rgba(237,226,206,.52)} .form input:hover:not(:focus), .form textarea:hover:not(:focus){border-color:rgba(237,226,206,.32)} .form input:focus, .form textarea:focus{ outline:none; border-color:var(--pink); background:rgba(7,4,8,.95); box-shadow:0 0 0 3px rgba(255,62,165,.18); } .field.is-bad input, .field.is-bad textarea{border-color:var(--warn); box-shadow:0 0 0 3px rgba(240,160,120,.16)} .field.is-bad label{color:var(--warn)} .form__submit{width:100%; margin-top:6px} .form__legal{ margin:14px 0 0; font-family:var(--f-mono); font-size:.66rem; line-height:1.7; letter-spacing:.03em; color:var(--sand-dim2); } .form__status{ min-height:20px; margin-top:8px; font-family:var(--f-mono); font-size:.75rem; line-height:1.7; letter-spacing:.05em; color:var(--sand-dim2); } .form__status.ok{color:var(--pink-lt)} .form__status.err{color:var(--warn)} .form__status a{color:var(--pink-lt)} /* Spam-Falle: aus dem Blickfeld, aber nicht display:none (das ueberspringen viele Bots) */ .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} /* Erfolgszustand ersetzt das Formular */ .form.is-sent{display:flex; align-items:center; justify-content:center; text-align:center; min-height:340px} .sent__mark{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; margin-bottom:20px; border:1px solid rgba(255,62,165,.5); background:rgba(255,62,165,.1); } .sent h3{font-size:1.5rem; margin-bottom:12px} .sent p{color:var(--sand-dim); font-size:.97rem; margin-bottom:1.6rem} .sent strong{color:var(--sand); white-space:nowrap} /* --- Mobiler Dauer-CTA ---------------------------------------------------- */ .cta-dock{ position:fixed; left:16px; right:16px; bottom:14px; z-index:55; display:none; align-items:center; justify-content:center; gap:10px; padding:16px 22px; border-radius:999px; text-decoration:none; font-family:var(--f-mono); font-size:.78rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:#100D08; background:var(--grad); border:1px solid rgba(255,182,219,.7); box-shadow:0 16px 34px -12px rgba(255,62,165,.7), 0 2px 10px rgba(0,0,0,.5); transform:translateY(180%); opacity:0; transition:transform .34s cubic-bezier(.2,.8,.3,1), opacity .22s ease; } .cta-dock.is-on{transform:translateY(0); opacity:1} @media (max-width:860px){ .cta-dock{display:inline-flex} } /* --- Footer --------------------------------------------------------------- */ footer{background:var(--void); color:var(--sand-dim2); padding:38px 0 44px; border-top:1px solid var(--line-dk); position:relative; z-index:3} .footer__row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; } .footer__row .tur{opacity:.85} /* flex-start + kleiner Versatz: bleibt auch bei zweizeiligem Umbruch (Mobile) optisch an der ersten Textzeile ausgerichtet */ .footer__brand{display:flex; align-items:flex-start; gap:10px} .footer__brand .tur{margin-top:2px} /* --- Scroll-Reveal -------------------------------------------------------- */ /* Der Startzustand gilt NUR, wenn JS laeuft (html.js wird inline im gesetzt). Ohne JS bleibt alles sichtbar, statt auf opacity:0 zu haengen. */ .js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.84,.28,1), transform .7s cubic-bezier(.16,.84,.28,1); transition-delay:calc(var(--d,0) * 90ms); } .js .reveal--x{transform:translateX(40px)} /* kommt seitlich herein */ .js .reveal--pop{transform:translateY(24px) scale(.965)} .js .reveal.is-in{opacity:1; transform:none} /* Nach abgeschlossenem Reveal (app.js setzt .is-done per transitionend) uebernimmt wieder das flinke Karten-Timing: vorher erbte jeder Hover die .7s-Kurve PLUS die Staffel-Verzoegerung (--d) des Reveals — eine Karte mit --d:3 reagierte also erst 270ms nach dem Ueberfahren. */ .js .reveal.is-done{transition:border-color .22s ease, background .22s ease, transform .22s ease} /* Hero-Headline: Zeilen schieben sich aus einer Maske nach oben ins Bild */ h1 .mask{display:block; overflow:hidden; padding:.06em .02em; margin:-.06em -.02em} .js h1 .line{display:inline-block; translate:0 118%; transition:translate .9s cubic-bezier(.16,.84,.28,1) .1s} .js h1 .mask + .mask .line{transition-delay:.24s} .js .reveal.is-in .line{translate:0 0} /* Hervorhebung in der Headline als Violett->Pink-Verlauf im Schriftzug */ .hero h1 .hl{ background:linear-gradient(105deg, #FF7BC2 10%, #FF3EA5 55%, #C13FE0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Tuerreihen: die Glyphen blinken nacheinander kurz auf (Lauflicht) */ .doors .tur, .why__doors .tur{animation:door-blink 5.4s ease-in-out infinite} .doors .tur:nth-of-type(2), .why__doors .tur:nth-of-type(2){animation-delay:.4s} .doors .tur:nth-of-type(3), .why__doors .tur:nth-of-type(3){animation-delay:.8s} .doors .tur:nth-of-type(4){animation-delay:1.2s} .doors .tur:nth-of-type(5){animation-delay:1.6s} @keyframes door-blink{ 0%,100%{opacity:1; translate:0 0} 6% {opacity:.35; translate:0 -2px} 12%{opacity:1; translate:0 0} } /* Griffpunkte der Tuerblatt-Rasterzellen glimmen versetzt auf */ .grid-tex i::after{animation:knob-glow 6s ease-in-out infinite} .grid-tex i:nth-child(2)::after{animation-delay:1.2s} .grid-tex i:nth-child(3)::after{animation-delay:2.4s} .grid-tex i:nth-child(4)::after{animation-delay:3.6s} .grid-tex i:nth-child(5)::after{animation-delay:4.8s} @keyframes knob-glow{ 0%,100%{box-shadow:0 0 0 0 rgba(255,62,165,0)} 50% {box-shadow:0 0 10px 2px rgba(255,62,165,.5)} } /* Hausnummern-Plakette klopft beim Karten-Hover kurz an */ .card--hov:hover .step__plate{animation:plate-knock .55s ease} @keyframes plate-knock{ 0%{rotate:0deg} 28%{rotate:-4deg} 60%{rotate:3deg} 100%{rotate:0deg} } /* --- Laufband ------------------------------------------------------------- */ .ticker{ position:relative; z-index:3; overflow:hidden; border-top:1px solid var(--line-dk); border-bottom:1px solid var(--line-dk); background:var(--night); padding:15px 0; /* Eintraege tauchen aus dem Dunkel auf statt hart an der Kante zu erscheinen */ -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .ticker__track{display:flex; width:max-content; animation:ticker 34s linear infinite} .ticker:hover .ticker__track{animation-play-state:paused} .ticker__seq{ display:flex; align-items:center; gap:30px; padding-right:30px; font-family:var(--f-mono); font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--sand-dim2); white-space:nowrap; } .ticker__seq b{color:var(--pink-lt); font-weight:500} .ticker__seq .tur{width:14px; height:14px; opacity:.9} @keyframes ticker{to{translate:-50% 0}} /* --- Scroll-Fortschritt --------------------------------------------------- */ .progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:70; pointer-events:none} .progress b{ display:block; height:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, #C13FE0, #FF3EA5); } @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1; transform:none; transition:none} .js h1 .line{translate:0 0; transition:none} html{scroll-behavior:auto} .btn--pink::after, .btn--pink:hover::after, .beam, .beam::after, .doors .tur, .why__doors .tur, .grid-tex i::after, .ticker__track, .card--hov:hover .step__plate, .portal__light, .portal__knob::after, .stage__hint::after, .btn--bell:hover .btn__bell, .btn--bell:focus-visible .btn__bell{animation:none} .stage__hint{display:none} .cta-dock{transition:none} /* FAQ-Tueren: Zustaende schalten hart, ohne Schwing- und Fahr-Animation */ .fdoor__leaf,.fdoor__slit,.fdoor__room,.fdoor__jamb,.fdoor__spill, .faq__panel,.faq__a,.faq__panel-in::before,.faq__qtext,.faq__num{transition:none} .faq__door.is-open .fdoor__room, html:not(.js) .faq__door[open] .fdoor__room{animation:none} .fit__list li::before,.fit__list li::after{transition:none} .fit__list li:hover::before{transform:none} .fit__list li:hover::after{translate:0 0} .js .card--hov:not(.card--lt)::after{display:none} } /* --- Responsiv ------------------------------------------------------------ */ @media (max-width:1080px){ .hero__grid{grid-template-columns:1fr .78fr; gap:clamp(24px,3vw,40px)} .portal{width:min(252px,100%); margin-bottom:34px} .portal__num{font-size:clamp(1.9rem,3.4vw,2.3rem)} .facts{grid-template-columns:1fr} .fact{padding:clamp(20px,2.4vw,26px) clamp(24px,2.6vw,30px)} } @media (max-width:1000px){ :root{--grid:62px} .why__grid,.trail__head,.gebiet__grid,.apply__grid,.fit__grid,.faq__grid{grid-template-columns:1fr} .why__head,.gebiet__head,.faq__head{position:static} .why h2,.trail__head h2,.gebiet__head h2,.apply__intro h2,.fit__head h2{max-width:20ch} .trail__aside{border-left:0; border-top:1px solid var(--line-dk); padding:18px 0 0; max-width:none} .trail__track{grid-template-columns:1fr} .step{margin-top:0 !important} .gebiet__list{grid-template-columns:1fr} .apply__contact{margin-top:26px} } @media (max-width:860px){ .hero__grid{grid-template-columns:1fr; align-items:start; gap:clamp(34px,6vw,48px)} /* Der seitliche Reveal schoebe die Tuer-Buehne im Einspaltenlayout ueber den rechten Rand hinaus -> auf schmalen Schirmen von unten einblenden. */ .js .reveal--x{transform:translateY(28px)} .stage{margin-top:6px} .portal{width:min(248px,72%); margin-bottom:38px} } @media (max-width:720px){ :root{--grid:50px; --rad:12px} body{font-size:16px} .wrap{padding:0 20px} .topbar__nav a:not(.btn){display:none} .btn--sm{padding:13px 22px} /* Touch-Target des Nav-CTAs auf >=44px bringen */ .sec{scroll-margin-top:62px} /* Zentrierter Flattertext liest sich auf Schmalformat schlecht */ .note__inner{text-align:left} .topbar__row{height:64px} .topbar.is-stuck .topbar__row{height:58px} .hero__lede{max-width:none} .hero__actions .btn{padding:15px 20px; font-size:.72rem} .hero__actions .btn:first-child{flex:1} .portal{width:min(226px,70%); margin-bottom:32px} .portal__inner{inset:auto 6% 13% 20%} .portal__sub{font-size:.62rem} .stage__cap{font-size:.88rem; max-width:34ch} .form__row{grid-template-columns:1fr} .form.is-sent{min-height:300px} /* FAQ-Mini-Tueren kompakter, Antwort-Einzug und Lichtfaden ruecken mit */ .faq__q{gap:14px} .fdoor{width:34px; height:52px} .faq__a{padding-left:calc(clamp(24px,2.6vw,32px) + 48px)} .faq__panel-in::before{left:calc(clamp(24px,2.6vw,32px) + 17px)} footer{padding-bottom:96px} /* Platz fuer den fixierten CTA */ .grid-tex{background-image: linear-gradient(rgba(237,226,206,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(237,226,206,.035) 1px, transparent 1px)} .grid-tex i{display:none} .grid-tex i:nth-child(3){display:block; top:8%; right:-2%; transform:scale(.9); opacity:.55} .hero__main::before{top:-14px; left:-20px} .hero__main::after{top:-14px; left:-20px; width:30px} .tag{align-items:flex-start} .tag .tur{margin-top:2px} /* Auf Schmalformat rueckt alles in die Mitte -> Licht weiter nach aussen und deutlich gedaempft, sonst leidet die Lesbarkeit. */ .beam{filter:blur(16px)} .beam--hero-a{--o:1; top:-2%; right:-22%; width:60vw; height:96%; transform:rotate(26deg)} .beam--hero-b{--o:.4; left:-36%; width:62vw} .beam--soft{--o:.55; left:-26%; width:56vw} .beam--right{--o:.62; right:-26%; width:56vw} .beam--apply{--o:.5; width:88vw} /* Auf Schmalformat laeuft der Text bis an den Rand -> Schleier deckt die volle Breite, nur die obersten/untersten Zonen bleiben offen. */ .scrim{ background:linear-gradient(90deg, rgba(11,7,11,.5) 0%, rgba(11,7,11,.9) 16%, rgba(11,7,11,.94) 50%, rgba(11,7,11,.9) 84%, rgba(11,7,11,.5) 100%); } } /* Sehr schmale Geraete (iPhone SE & Co.): Wortmarke + Nav-CTA passen sonst nicht nebeneinander in die Kopfzeile und der Button wird angeschnitten. */ @media (max-width:430px){ .topbar__row{gap:12px} .brand{font-size:.92rem; gap:9px} .brand .tur{width:16px; height:16px} .topbar__nav .btn--sm{padding:12px 15px; font-size:.66rem; letter-spacing:.09em} .wrap{padding:0 18px} .hero__actions .btn{padding:15px 16px; font-size:.68rem; letter-spacing:.09em} } @media (max-width:365px){ .brand{font-size:.84rem} .topbar__nav .btn--sm{padding:12px 13px; font-size:.62rem} }