/* ═══════════════════════════════════════════════════════════════ WIZARD – Landingpage (öffentlich, vor dem Spiel) Struktur/Look 1:1 aus dem Design-System (landing.html) abgeleitet. Tokens kommen aus tokens.css (Projekt-Konvention). Diese Datei ist NUR für landing.html gedacht und lädt bewusst NICHT style.css des Spiels – dadurch keine globalen Kollisionen mit dem Spiel-UI. ═══════════════════════════════════════════════════════════════ */ /* ---------- RESET / BASIS (nur auf der Landing-Seite aktiv) ---------- */ *{box-sizing:border-box} /* Solide dunkle Basisfarbe (matcht theme-color). iOS Safari tönt Statusleiste und untere Toolbar nach der background-COLOR – nicht nach dem Verlaufs- background-IMAGE. Ohne diese Farbe blieben oben/unten weiße Streifen. */ html{scroll-behavior:smooth;background-color:#1a1410} html,body{margin:0;padding:0} body{ font-family:var(--f-ui); color:var(--text-1); background: radial-gradient(1100px 700px at 15% -8%, rgba(200,150,60,.20), transparent 60%), radial-gradient(900px 600px at 92% 4%, rgba(200,150,60,.10), transparent 55%), radial-gradient(1200px 900px at 50% 120%, rgba(74,109,140,.14), transparent 60%), linear-gradient(180deg,#20180f,#1a1410 60%,#100d09); background-color:#1a1410; background-attachment:fixed; min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:rgba(200,150,60,.3);color:#fff} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:#1a1410} ::-webkit-scrollbar-thumb{background:#4a3a22;border-radius:6px} ::-webkit-scrollbar-thumb:hover{background:#6b4d1c} a{color:inherit} img{max-width:100%;display:block} /* Sichtbarer, tastatur-freundlicher Fokus überall */ :where(a,button,input):focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; border-radius:6px; } /* Skip-Link für Screenreader / Tastatur */ .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--panel);color:var(--gold-light); padding:12px 18px;border:1px solid var(--gold);border-radius:0 0 12px 0; font-family:var(--f-display);font-size:14px; } .skip:focus{left:0} /* Motion-Keyframes aus dem System */ @keyframes wz-pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,150,60,.45),0 0 22px rgba(200,150,60,.22)}50%{box-shadow:0 0 0 4px rgba(200,150,60,.10),0 0 34px rgba(200,150,60,.40)}} @keyframes wz-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes sf-twinkle{0%,100%{opacity:.22}50%{opacity:.6}} @keyframes aura-pulse{0%,100%{opacity:.65;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}} @keyframes cta-glow{0%,100%{box-shadow:var(--sh-card),0 0 40px rgba(200,150,60,.10)}50%{box-shadow:var(--sh-card),0 0 72px rgba(200,150,60,.22)}} @keyframes btn-sheen{to{left:135%}} /* ---------- SCROLL-REVEAL (nur aktiv, wenn .has-js) ---------- */ .has-js [data-reveal]{ opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .has-js [data-reveal].is-in{opacity:1;transform:none} /* ---------- LAYOUT-HILFEN ---------- */ .wrap{max-width:1180px;margin:0 auto;padding:0 24px} /* Overline: Schreibmaschine, weit gesperrt (Handoff-Rolle „Labels/Overlines") */ .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--f-type);letter-spacing:.34em; font-size:11px;color:var(--gold);text-transform:uppercase; } .eyebrow .rule{width:38px;height:1px;flex:0 0 auto;background:linear-gradient(90deg,transparent,var(--gold))} .eyebrow .rule.r{background:linear-gradient(90deg,var(--gold),transparent)} .eyebrow-text{white-space:nowrap} .section-head{ display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:16px;margin-bottom:30px; } .section-head .glyph{ color:var(--gold-deep);font-size:15px;line-height:1; text-shadow:0 0 10px rgba(200,150,60,.5); } .section-head h2{ margin:0;font-family:var(--f-display);font-weight:700; font-size:clamp(24px,4.5vw,32px);color:var(--text-1);letter-spacing:.02em; } .section-head .meta{color:var(--text-3);font-size:13px;font-weight:300;margin-left:auto} /* ---------- BUTTONS (aus Section 04 des Design-Systems) ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.05em; padding:14px 26px;border-radius:var(--r-ctrl);cursor:pointer; text-decoration:none;border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; -webkit-tap-highlight-color:transparent; } .btn-primary{ position:relative;overflow:hidden; color:#2a1c06;border:none; background:var(--grad-gold); box-shadow:var(--sh-cta), inset 0 1px 0 rgba(255,255,255,.5); } /* Lichtstreif, der beim Hover über den Button wandert */ .btn-primary::after{ content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);pointer-events:none; } .btn-primary:hover::after{animation:btn-sheen .65s ease} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(200,150,60,.5), inset 0 1px 0 rgba(255,255,255,.55)} .btn-primary:active{transform:translateY(0)} /* Sanfter Dauerpuls nur auf den großen Hero-/CTA-Buttons (nicht in der Nav) */ .hero-cta .btn-primary{animation:wz-pulse 3.4s ease-in-out infinite} .btn-secondary{ font-family:var(--f-ui);font-weight:500; color:var(--gold-light); border:1px solid var(--gold); background:rgba(200,150,60,.08); } .btn-secondary:hover{background:rgba(200,150,60,.16);transform:translateY(-2px)} .btn-ghost{ font-family:var(--f-ui);font-weight:500;font-size:13px;letter-spacing:.04em; color:var(--text-2);border:1px solid var(--line);background:transparent;padding:11px 20px; } .btn-ghost:hover{color:var(--gold-light);border-color:var(--gold)} /* ---------- NAV ---------- */ header.site{ position:sticky;top:0;z-index:50; background:rgba(26,20,16,.72);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;gap:22px;padding:13px 24px;max-width:1180px;margin:0 auto} .brand{display:flex;align-items:center;gap:11px;text-decoration:none} /* Leisten-Marke nach Handoff §11: 42-px-Kachel mit dem gelieferten „DS“-Monogramm (img/brand/app-icon-mark.webp), daneben „Dampfstich“ als Cinzel 700. Das volle Lockup kommt in Leisten und Topbars NICHT vor – sein Schriftzug ist unter 120 px nicht mehr lesbar. Das Icon bringt Messingrahmen, Platte und abgerundete Ecken selbst mit: kein weiterer Rand, kein Innenring, keine Platte darunter – nur den Radius clippen (9 px bei 40, Handoff). */ .brand .mark{ width:42px;height:42px;flex:none;border-radius:9px;overflow:hidden; display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); } .brand .mark img{width:100%;height:100%;object-fit:cover;display:block} .brand .word{ font-family:var(--f-display);font-weight:700;letter-spacing:.12em; font-size:20px;line-height:1;color:var(--gold-light); text-transform:uppercase;white-space:nowrap; } .nav-links{display:flex;gap:22px;margin-left:8px;font-size:12.5px;letter-spacing:.06em} .nav-links a{color:var(--text-2);text-decoration:none} .nav-links a:hover{color:var(--gold-light)} .nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px} /* ---------- HERO ---------- */ .hero{position:relative;text-align:center;overflow:hidden;padding:clamp(56px,10vw,96px) 24px clamp(48px,8vw,80px)} /* ---------- HERO-HINTERGRUND: ERFINDER-WERKSTATT ---------- Das Foto liegt als ::before ganz unten (die Sternenfeld-Ebenen, die Szene und .hero-inner kommen im DOM danach und malen darüber). Drei Schichten darüber, von unten nach oben gelesen: 1. das Foto 2. ein Messington, weil die Fensterlichter im Original kühl-blau sind und sonst aus dem Eisen/Messing-Schema fallen 3. der Schleier – oben dunkel für die Navigation, in der Mitte am stärksten hinter dem Titel, unten fließender Übergang in die Seite. Ohne Schleier verliert der Gold-Verlauf des Titels den Kontrast. */ .hero::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(ellipse 78% 58% at 50% 40%, rgba(18,16,11,.40) 0%, rgba(18,16,11,.68) 66%, rgba(18,16,11,.80) 100%), linear-gradient(180deg, rgba(18,16,11,.88) 0%, rgba(18,16,11,.26) 24%, rgba(18,16,11,.46) 62%, var(--bg-primary) 100%), linear-gradient(0deg, rgba(181,101,29,.12), rgba(181,101,29,.12)), url(img/szene/werkstatt-hero.webp) center 42%/cover no-repeat; } /* Über dem Foto wirken die Sternenpunkte wie Staub im Lichtstrahl – das passt zur Werkstatt, darf aber nicht mit dem Motiv konkurrieren. */ .hero .starfield.sf-a{opacity:.28} .hero .starfield.sf-b{opacity:.2} /* Zweischichtiges, sanft funkelndes Sternenfeld (gekachelt → Sterne überall) */ .starfield{ position:absolute;inset:0;pointer-events:none; background-repeat:repeat;background-size:520px 460px; } .starfield.sf-a{ opacity:.5;animation:sf-twinkle 4.8s ease-in-out infinite; background-image: radial-gradient(1.4px 1.4px at 20% 30%,rgba(237,224,200,.9),transparent), radial-gradient(1.2px 1.2px at 70% 22%,rgba(237,224,200,.7),transparent), radial-gradient(1.6px 1.6px at 42% 60%,rgba(240,214,138,.9),transparent), radial-gradient(1.1px 1.1px at 85% 55%,rgba(237,224,200,.6),transparent), radial-gradient(1.3px 1.3px at 12% 72%,rgba(237,224,200,.7),transparent), radial-gradient(1.5px 1.5px at 60% 80%,rgba(240,214,138,.8),transparent); } .starfield.sf-b{ opacity:.35;animation:sf-twinkle 6.4s ease-in-out -3.2s infinite; background-size:640px 560px; background-image: radial-gradient(1.2px 1.2px at 8% 18%,rgba(237,224,200,.8),transparent), radial-gradient(1.5px 1.5px at 33% 44%,rgba(230,192,114,.8),transparent), radial-gradient(1.1px 1.1px at 55% 12%,rgba(237,224,200,.7),transparent), radial-gradient(1.4px 1.4px at 78% 70%,rgba(240,214,138,.8),transparent), radial-gradient(1.2px 1.2px at 92% 34%,rgba(230,192,114,.7),transparent), radial-gradient(1.3px 1.3px at 28% 88%,rgba(237,224,200,.7),transparent); } /* Weiche Gold/Violett-Aura hinter der Wortmarke */ .hero-aura{ position:absolute;left:50%;top:6%;transform:translateX(-50%); width:min(760px,110vw);height:460px;pointer-events:none;filter:blur(12px); background:radial-gradient(closest-side,rgba(200,150,60,.15),rgba(200,150,60,.11) 46%,transparent 72%); animation:aura-pulse 7s ease-in-out infinite; } /* ---------- AUFSTEIGENDER DAMPF UM DAS LOCKUP ---------- Der Hero soll nicht neblig aussehen, sondern dampfen: Schwaden steigen aus der Werkstatt hinter der Wortmarke auf und dünnen nach oben aus. Drei Tiefen-Ebenen erzeugen die Staffelung – fog-back breit und träge, fog-mid dazwischen, fog-front fein und am schnellsten (Parallaxe). Nur fog-front liegt VOR den Lettern; sie ist deshalb die dünnste Ebene, damit der Gold-Verlauf der Wortmarke das Hellste im Bild bleibt. Warum Hülle + Band statt einer Ebene: Das Dichte-Profil (unten dicht, oben ausgedünnt) MUSS stehen bleiben, während sich der Dampf bewegt. Läge die Maske auf dem bewegten Element, wanderte sie mit und der Effekt wäre weg. Also trägt die Hülle (.fog-3d) Maske, Beschnitt und Blend-Modus, das Band (.fog-band) darin trägt die Textur und die Bewegung. Warum transform statt background-position: transform läuft im Compositor, background-position erzwingt bei jedem Frame ein Neuzeichnen der Fläche – auf dem Handy der teuerste Teil des Heros. WICHTIG – Kachelmaß muss mitwachsen: Die Ebenen sind ein Vielfaches des Lockups, auf dem Handy also nur ~370 × 165 px. Bliebe die Kachel bei Desktop-Maß, sähe man dort weniger als eine halbe Kachel – aus den Schwaden würde EIN einzelner Ballen neben der Wortmarke (genau der Fehler, der hier schon einmal behoben wurde). Deshalb steckt die Kachelgröße in --fog-tw/--fog-th, Bandhöhe und Aufstiegs-Keyframes lesen dieselbe Variable, und die Media-Queries skalieren sie auf 900er- und Handy-Maß. Die SVGs tragen dafür viewBox + preserveAspectRatio='none'. Warum die SVGs so aufwendig sind: Reines fractalNoise ergibt einen gleichmäßigen Grauteppich ohne erkennbare Form. Deshalb pro Kachel 1. grobes, senkrecht gestrecktes Rauschen (baseFrequency X > Y) → Säulen statt Nebelbänken, 2. feDisplacementMap mit einem zweiten, feineren Rauschen → gekräuselte, ausgefranste Ränder statt runder Wattebäusche, 3. feComponentTransfer/feFuncA mit steiler Tabelle → dichte Ballen MIT Löchern dazwischen; erst diese Löcher machen Schwaden lesbar, 4. feGaussianBlur im SVG statt CSS-blur() – CSS-Blur auf so großen Flächen kostet auf dem Handy jeden Frame erneut, der SVG-Blur ist im gerasterten Bild schon enthalten. Das feTile-Paar davor ist kein Zierrat: stitchTiles macht das Rauschen nur über die eigene Kachel nahtlos. Displacement und Blur greifen aber über deren Rand hinaus und fänden dort nichts – es entstünde ein sichtbarer Streifen bei jedem Kachelübergang. feTile legt die fertige Kachel vorher periodisch aus, sodass beide Filter gültige Nachbarschaft vorfinden. */ .hero-lockup{ position:relative; display:flex;flex-direction:column;align-items:center;gap:14px; } /* Alles mit z-index 2 liegt über fog-back/fog-mid (1) und unter fog-front (3) */ .hero-lockup .eyebrow,.hero-lockup h1{position:relative;z-index:2} .fog-3d{ position:absolute;left:50%;bottom:-8%; transform:translateX(-50%); width:min(140%,96vw);height:158%; pointer-events:none;overflow:hidden; mix-blend-mode:screen; /* Dichte-Profil: ganz unten noch nichts (sonst schnitte die Kante sichtbar über dem Claim ab), knapp darüber am dichtesten, dann bis zur Oberkante auf 0 ausdünnend. Bei ~80 % liegt die Überzeile – dort noch ein Rest Dampf, damit sie mit im Bild steht statt darüber zu schweben. */ -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 7%, #000 18%, rgba(0,0,0,.84) 44%, rgba(0,0,0,.52) 66%, rgba(0,0,0,.24) 86%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 7%, #000 18%, rgba(0,0,0,.84) 44%, rgba(0,0,0,.52) 66%, rgba(0,0,0,.24) 86%, rgba(0,0,0,0) 100%); } /* Das Band ist um genau eine Kachelhöhe zu hoch. Es startet bündig oben und wandert um exakt diese eine Kachelhöhe nach oben – danach steht die Textur deckungsgleich zum Anfang, der Loop springt also nicht. Die seitliche Blende sitzt hier statt auf der Hülle, weil ein waagerechter Verlauf von der senkrechten Bewegung unberührt bleibt. */ .fog-band{ position:absolute;left:0;right:0;top:0; height:calc(100% + var(--fog-th)); background-repeat:repeat; background-size:var(--fog-tw) var(--fog-th); -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%); animation:fog-rise var(--fog-dauer) linear infinite; } /* Ein EINZIGES Keyframe-Set pro Ebene: Aufstieg, Seitwärts-Schwebung und Atmen stecken in derselben transform-Kette. Zwei parallele Animationen auf transform würden einander überschreiben. Anfang und Ende sind in X und Skalierung identisch, in Y trennt sie genau eine Kachelhöhe – der Übergang ist damit unsichtbar. Die Schwebung verhindert, dass es wie ein Förderband wirkt. */ @keyframes fog-rise{ 0% {transform:translate3d(0,0,0) scaleX(1)} 25% {transform:translate3d(1.6%,calc(var(--fog-th) * -0.25),0) scaleX(1.03)} 50% {transform:translate3d(0,calc(var(--fog-th) * -0.5),0) scaleX(1)} 75% {transform:translate3d(-1.6%,calc(var(--fog-th) * -0.75),0) scaleX(1.03)} 100%{transform:translate3d(0,calc(var(--fog-th) * -1),0) scaleX(1)} } /* baseFrequency X deutlich größer als Y (~2,5:1) → senkrecht gestreckte Säulen statt runder Wattebäusche. Die Alpha-Tabelle beginnt erst ab der Mitte zu steigen: alles Dünne fällt auf 0, dazwischen entstehen echte Lücken – das ist der Unterschied zwischen Schwaden und Grauschleier. */ .fog-back{--fog-tw:520px;--fog-th:330px;--fog-dauer:78s;z-index:1;opacity:.46} .fog-mid {--fog-tw:400px;--fog-th:260px;--fog-dauer:54s;z-index:1;opacity:.32} /* Die vordere Ebene darf sichtbar sein, ohne die Wortmarke zu waschen: Ihre steile Alpha-Tabelle lässt nur ~11 % der Fläche stehen (die alte, flächige Textur deckte 67 %). Bei .21 landet dadurch rund ein Drittel des früheren Lichts auf den Lettern – der Gold-Verlauf bleibt kontrastreicher als zuvor. */ .fog-front{--fog-tw:300px;--fog-th:200px;--fog-dauer:34s;z-index:3;opacity:.21} .fog-back .fog-band{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='330' viewBox='0 0 520 330' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-130' y='-82' width='780' height='494' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.0034' numOctaves='4' seed='9' stitchTiles='stitch' x='0' y='0' width='520' height='330' result='n'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028 0.02' numOctaves='2' seed='37' stitchTiles='stitch' x='0' y='0' width='520' height='330' result='w'/%3E%3CfeTile in='n' result='nt'/%3E%3CfeTile in='w' result='wt'/%3E%3CfeDisplacementMap in='nt' in2='wt' scale='40' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0.35 0.85 1'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.90 0 0 0 0 0.89 0 0 0 0 0.98 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='520' height='330' filter='url(%23f)'/%3E%3C/svg%3E"); } .fog-mid .fog-band{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260' viewBox='0 0 400 260' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-100' y='-65' width='600' height='390' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.0048' numOctaves='4' seed='19' stitchTiles='stitch' x='0' y='0' width='400' height='260' result='n'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045 0.032' numOctaves='2' seed='5' stitchTiles='stitch' x='0' y='0' width='400' height='260' result='w'/%3E%3CfeTile in='n' result='nt'/%3E%3CfeTile in='w' result='wt'/%3E%3CfeDisplacementMap in='nt' in2='wt' scale='30' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0.28 0.8 1'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='3.5'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.93 0 0 0 0 0.94 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='260' filter='url(%23f)'/%3E%3C/svg%3E"); } .fog-front .fog-band{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-75' y='-50' width='450' height='300' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018 0.0075' numOctaves='4' seed='4' stitchTiles='stitch' x='0' y='0' width='300' height='200' result='n'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.07 0.05' numOctaves='2' seed='23' stitchTiles='stitch' x='0' y='0' width='300' height='200' result='w'/%3E%3CfeTile in='n' result='nt'/%3E%3CfeTile in='w' result='wt'/%3E%3CfeDisplacementMap in='nt' in2='wt' scale='20' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0.15 0.7 1'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.88 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='300' height='200' filter='url(%23f)'/%3E%3C/svg%3E"); } .hero-inner{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:14px;max-width:680px} /* Wortmarken-Lockup: "Akademie" (Display, Gold-Verlauf) + "der Zauberei" (Script) */ .hero h1{ margin:6px 0 0;display:flex;flex-direction:column;align-items:center;gap:0; } /* Wortmarke = geliefertes Bild (Handoff §11), Masthead-Größe 430 px, auf schmalen Schirmen mit der Viewportbreite mitlaufend. Nie einfärben. Die Kanten des Bildes sind weich ausgelaufen (10 % Feder), damit die braune Platte auf dunklem Grund nicht als Rechteck stehenbleibt – es gehört deshalb nur auf Flächen um #1a1410–#241c14, was der Hero-Schleier an dieser Stelle sicherstellt. */ .hero h1 .wordmark{ display:block;width:clamp(260px,74vw,430px);height:auto; filter:drop-shadow(0 2px 1px rgba(0,0,0,.5)); } .hero p.claim{ max-width:540px;margin:16px 0 0;color:var(--text-2);font-weight:300; font-size:clamp(15px,2.6vw,17px);line-height:1.7; } .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:26px} /* Tutorial + Spielregeln stehen als Paar untereinander neben den großen Knöpfen. Gleiche Mindestbreite, damit die beiden bündig übereinander sitzen; die Höhe bleibt bei 44 px je Knopf (Touch-Vorgabe des Handoffs). */ .cta-stapel{display:flex;flex-direction:column;gap:8px} .cta-stapel .btn{min-width:158px;padding:11px 18px} .hero-trust{ display:flex;gap:18px;flex-wrap:wrap;justify-content:center; margin-top:26px;color:var(--text-3);font-size:12.5px; } .hero-trust span{display:inline-flex;align-items:center;gap:7px} .hero-trust .dot{color:var(--gold);font-size:11px} /* ---------- SZENE IM HERO: DAMPFKOLOSS + FUNKENFEE ---------- Beides liegt UNTER dem Text (.hero-inner ist position:relative und kommt im DOM danach) und wird von .hero per overflow:hidden am Rand beschnitten. Rein dekorativ: aria-hidden im Markup, hier pointer-events:none. */ .szene-koloss,.szene-fee{position:absolute;pointer-events:none;z-index:0} /* Der Koloss steht VOLLSTÄNDIG im Bild auf der Grundlinie des Hero, rechts neben dem Kartenfächer und hinter ihm (z-index 0 < .hero-inner). Auf schmalen Schirmen schaut er hinter den Karten hervor – das liest sich wie „er steht hinter dem Tisch" und braucht keinen eigenen Platz. */ .szene-koloss{ right:clamp(4px,2.5vw,54px);bottom:clamp(6px,1.5vw,22px); width:clamp(76px,13vw,240px);aspect-ratio:509/621; /* Animiertes WebP (18 Frames, 1,8 s Schleife) – die Figur bewegt sich also selbst. Der frühere CSS-„Atem" ist deshalb entfallen, sonst lägen zwei Bewegungen übereinander. */ background:url(img/szene/dampfkoloss.webp) center bottom/contain no-repeat; opacity:.5;filter:drop-shadow(0 18px 40px rgba(0,0,0,.65)); } /* Die Funkenfee ist ein 5×5-Sprite (25 Frames, public/img/szene/). Zwei Frame-Animationen: X läuft fünfmal je Y-Schritt durch. Der Bereich 0 → 125 % ergibt mit steps(5) exakt 0/25/50/75/100 % – also genau die fünf Spalten bzw. Zeilen. Dazu die Flugbahn: von links unten nach rechts oben, dann eine lange Pause außerhalb des Bildes. Die Flugbahn steckt in zwei Variablen, damit sie je Format angepasst werden kann, ohne die Keyframes zu verdoppeln: --fee-hub ist die Steighöhe in px, --fee-tief der Startpunkt unter der Hero-Kante. */ .szene-fee{ --fee-hub:430px; --fee-tief:24px; left:0;bottom:0; width:clamp(58px,7vw,118px);aspect-ratio:200/166; background:url(img/szene/funkenfee-sprite.webp) 0 0/500% 500% no-repeat; animation: fee-frame-x .2s steps(5) infinite, fee-frame-y 1s steps(5) infinite, fee-flug 15s ease-in-out infinite; } @keyframes fee-frame-x{from{background-position-x:0}to{background-position-x:125%}} @keyframes fee-frame-y{from{background-position-y:0}to{background-position-y:125%}} @keyframes fee-flug{ 0% {transform:translate(-16vw, var(--fee-tief)) scale(.70);opacity:0} 3% {opacity:.95} 12% {transform:translate(22vw, calc(var(--fee-hub) * -.40)) scale(.85)} 24% {transform:translate(56vw, calc(var(--fee-hub) * -.70)) scale(.95)} 33% {transform:translate(86vw, calc(var(--fee-hub) * -.93)) scale(1);opacity:.95} 38% {transform:translate(112vw, calc(var(--fee-hub) * -1)) scale(1);opacity:0} 100%{transform:translate(112vw, calc(var(--fee-hub) * -1)) scale(1);opacity:0} } /* ---------- HERO-KARTENFÄCHER ---------- Nachbau des echten Karten-Looks aus dem Spiel (style.css .card): nur Farbe + Zahl, Zauberer mit W-Ecken + ✶. Rein dekorativ. */ .hero-cards{ position:relative;width:min(560px,92vw);height:200px; margin-top:38px; animation:wz-float 6s ease-in-out infinite; perspective:900px; } /* Wrapper für die 3D-Neigung zur Mausposition (JS setzt rotateX/rotateY) */ .hand-tilt{ position:absolute;inset:0; transform-style:preserve-3d; transition:transform .35s cubic-bezier(.22,1,.36,1); } /* Positionierhülle des Fächers. Das AUSSEHEN der Karte kommt aus cards.css – derselben Datei, die das Spiel lädt. Hier steht nur noch, wo die Karte liegt und wie sie gedreht ist. */ .hcard{ --lift:0px; position:absolute;left:50%;bottom:0; transform:translateX(calc(-50% + var(--tx,0px))) rotate(var(--rot,0deg)) translateY(var(--lift)); transform-origin:50% 135%; transition:transform .25s cubic-bezier(.22,1,.36,1); } /* Kartengröße für den Hero-Fächer; cards.css rechnet alles Weitere daraus. */ .hcard > .card{--card-w:106px;--card-h:148px} /* Fächer-Auslage + Stapelreihenfolge (Meisterwerk obenauf) */ .hcard.c-1{--rot:-16deg;--tx:-136px;z-index:1} .hcard.c-2{--rot:-8deg; --tx:-70px; z-index:2} .hcard.c-3{--rot:0deg; --tx:0px; z-index:5;bottom:10px} .hcard.c-4{--rot:8deg; --tx:70px; z-index:3} .hcard.c-5{--rot:16deg; --tx:136px; z-index:2} /* Hover/Tap hebt die Karte wie im Spiel (wz-hand-card-Gefühl). Der Schein sitzt an der Karte selbst, damit er ihren Farbton (--tone) aufnimmt – die Hülle kennt die Farbe nicht mehr, die steckt jetzt in cards.css. */ .hcard:hover{--lift:-18px;z-index:6} .hcard:hover > .card{ box-shadow: 0 22px 40px rgba(0,0,0,.55), 0 0 26px color-mix(in srgb,var(--tone) 45%,transparent), 0 0 0 1.5px var(--gold); } /* ---------- SCHAUBILD: ECHTER SPIELTISCH ---------- Messingfassung um den Screenshot, damit er wie ein gerahmtes Fenster in die Werkstatt wirkt statt wie ein eingeklebtes Bild. */ .schau{margin:0} .schau-rahmen{ border-radius:var(--r-card);overflow:hidden; border:1px solid color-mix(in srgb,var(--gold) 34%,transparent); box-shadow:var(--sh-card), inset 0 1px 0 rgba(230,192,114,.25); background:var(--bg-deep); } .schau-rahmen img{width:100%;height:auto;display:block} /* Desktop- und Handy-Aufnahme nebeneinander. flex-grow trägt das Seitenverhältnis des jeweiligen Bildes (1280/760 = 1.684 und 390/844 = .462). Bei flex-basis:0 verteilt sich die Breite genau in diesem Verhältnis, und weil Höhe = Breite / Seitenverhältnis ist, sind beide Rahmen dadurch automatisch gleich hoch – ohne feste Höhe, ohne Zuschnitt und bei jeder Containerbreite. Ändert sich ein Bildformat, muss hier nur die eine Zahl mitwandern. */ .schau-geraete{display:flex;gap:clamp(10px,1.6vw,20px);align-items:flex-start} .schau-desktop{flex:1.684 1 0;min-width:0} .schau-handy{flex:.462 1 0;min-width:0} /* Unter 720 px wird das Nebeneinander unlesbar: Der Desktop-Ausschnitt käme auf gut 250 px Breite. Deshalb untereinander – das Handybild zuerst, weil der Betrachter dort selbst am Handy sitzt. */ @media (max-width:720px){ .schau-geraete{flex-direction:column;align-items:center;gap:16px} .schau-handy{order:-1;flex:none;width:min(62%,240px)} .schau-desktop{flex:none;width:100%} } .schau-legende{ display:grid;gap:10px 26px;margin-top:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); color:var(--text-3);font-size:13.5px;line-height:1.5; } .schau-legende b{color:var(--gold-light);font-weight:600} /* ---------- ENDSTAND ---------- */ .endstand-zeile{ display:grid;gap:clamp(24px,4vw,52px);align-items:center; grid-template-columns:1.15fr .85fr; } .endstand-text h2{ margin:0 0 16px;font-family:var(--f-display);font-weight:700; font-size:clamp(23px,3.6vw,31px);color:var(--text-1);letter-spacing:.02em;line-height:1.25; } .endstand-text p{margin:0 0 18px;color:var(--text-2);font-size:clamp(15px,2.2vw,17px);line-height:1.6} .endstand-text p b{color:var(--gold-light)} .endstand-liste{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:9px} .endstand-liste li{ position:relative;padding-left:20px;color:var(--text-2);font-size:14.5px; } .endstand-liste li::before{ content:'✦';position:absolute;left:0;top:0;color:var(--gold-deep);font-size:11px; } .endstand-liste b{color:var(--gold-light);font-weight:600} .endstand-bild{margin:0;display:flex;justify-content:center} .endstand-bild img{ width:100%;max-width:330px;height:auto;border-radius:var(--r-card); border:1px solid color-mix(in srgb,var(--gold) 28%,transparent); box-shadow:var(--sh-card); } /* ---------- SONDERKARTEN-GALERIE ---------- Zeigt die echten Spielkarten (cards.css). Die Karten tragen ihren Namen und den Effekt-Hinweis bereits selbst – darunter steht deshalb nichts mehr, was doppelt wäre. Kartenbreite 132 px, damit der Hinweis auf der Karte sichtbar bleibt (Handoff: erst ab 110 px). */ .sk-intro{ max-width:62ch;margin:0 0 30px;color:var(--text-2); font-size:clamp(15px,2.2vw,17px);line-height:1.6; } .sk-grid{ display:grid;gap:clamp(14px,2.4vw,26px); grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); justify-items:center; } .sk-item{margin:0;display:flex;justify-content:center} .sk-card > .card{--card-w:132px;--card-h:185px} /* Die früheren Aufhellungen für Dampfkoloss und Kesselberster sind entfallen: Alle elf Sonderkarten tragen dasselbe helle Kartenblatt, kartenspezifische Flächentönungen gibt es nicht mehr – der Hinweis säuft nirgends mehr ab. */ /* Sanftes Anheben beim Überfahren – dasselbe Gefühl wie im Hero-Fächer */ .sk-card > .card{transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease} .sk-item:hover .card{ transform:translateY(-8px); box-shadow:0 20px 38px rgba(0,0,0,.55), 0 0 26px color-mix(in srgb,var(--tone) 45%,transparent); } .sk-fuss{ margin:30px 0 0;color:var(--text-3);font-size:14px;text-align:center; } .sk-fuss b{color:var(--gold-light);font-weight:600} /* ---------- ORNAMENT-TRENNER zwischen Sektionen ---------- */ .orn{ display:flex;align-items:center;justify-content:center;gap:14px; max-width:520px;margin:0 auto;padding:0 24px; } .orn-line{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(200,150,60,.45))} .orn-line.r{background:linear-gradient(90deg,rgba(200,150,60,.45),transparent)} .orn-star{color:var(--gold);font-size:13px;line-height:1;text-shadow:0 0 12px rgba(200,150,60,.8)} /* ---------- MAIN SECTIONS ---------- */ main{display:block} section.block{position:relative;padding:clamp(48px,8vw,72px) 0} /* Abwechselnde Stimmungs-Schleier, damit die Sektionen nicht gleich wirken */ section.block.mood-violet::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(880px 420px at 10% 0%,rgba(200,150,60,.13),transparent 65%); } section.block.mood-gold::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(880px 420px at 90% 0%,rgba(200,150,60,.09),transparent 65%); } /* Features */ .features{ display:grid;gap:16px; grid-template-columns:repeat(4,1fr); } /* Feature-Kacheln im Karten-Look des Spiels: Innenrahmen, Ecken-Glyphen, Suit-Akzentfarbe, Hover hebt sie wie eine Handkarte */ .feature{ --acc:var(--gold); position:relative;display:flex;flex-direction:column;gap:12px; align-items:center;text-align:center; padding:30px 20px 24px;border-radius:14px; /* Stoff-Textur je Kachel (public/img/stoff/), darüber ein Schleier. Dessen Stärke steckt in --sch1/--sch2, weil die vier Stoffe sehr unterschiedlich hell sind: Blau/Grün/Rot liegen bei ~30 von 255, Gelb bei 102. Mit einem einheitlichen Schleier wäre Gelb entweder zu grell oder die drei anderen unsichtbar. */ overflow:hidden; background: linear-gradient(165deg, rgba(18,16,11,var(--sch1,.52)), rgba(18,16,11,var(--sch2,.68))), var(--stoff,none) center center / cover no-repeat, linear-gradient(165deg, color-mix(in srgb,var(--acc) 13%,var(--bg-primary)), color-mix(in srgb,var(--acc) 4%,var(--bg-deep))); border:1.5px solid color-mix(in srgb,var(--acc) 32%,#000); box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px color-mix(in srgb,var(--acc) 16%,transparent); transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .22s ease, box-shadow .22s ease; } /* Stoff je Kachel. Gelb bekommt den kräftigeren Schleier (siehe oben). */ .feature.acc-heart{--acc:var(--heart);--accl:#F3B1A8;--stoff:url('img/stoff/rot.webp')} .feature.acc-spade{--acc:var(--spade);--accl:#A9BDF0;--stoff:url('img/stoff/blau.webp')} .feature.acc-club {--acc:var(--club); --accl:#92E0C0;--stoff:url('img/stoff/gruen.webp')} .feature.acc-gold {--acc:var(--gold); --accl:var(--gold-light);--stoff:url('img/stoff/gelb.webp'); --sch1:.80;--sch2:.88} /* Innenrahmen wie auf den Spielkarten */ .feature::before{ content:'';position:absolute;inset:7px;border-radius:8px;pointer-events:none; border:1px solid color-mix(in srgb,var(--acc) 26%,transparent); } .feature:hover{ transform:translateY(-8px) rotate(-.6deg); border-color:color-mix(in srgb,var(--acc) 55%,transparent); box-shadow: 0 20px 38px rgba(0,0,0,.5), 0 0 26px color-mix(in srgb,var(--acc) 28%,transparent), 0 0 0 1.5px color-mix(in srgb,var(--acc) 50%,transparent); } /* Ecken-Glyphen (wie die W/N-Lettern der Spielkarten) */ .fcorn{ position:absolute;font-size:11px;line-height:1;color:var(--acc);opacity:.85; text-shadow:0 0 8px color-mix(in srgb,var(--acc) 60%,transparent); } .fcorn.tl{top:11px;left:13px} .fcorn.br{bottom:11px;right:13px;transform:rotate(180deg)} /* Emblem: frei leuchtende Glyphe statt Icon-Box */ .feature .ico{ font-size:30px;line-height:1;color:var(--accl,var(--acc)); text-shadow:0 0 20px color-mix(in srgb,var(--acc) 80%,transparent); } .feature h3{margin:2px 0 0;font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--text-1)} .feature p{margin:0;color:var(--text-2);font-weight:300;font-size:14px;line-height:1.6} .feature .tag{ margin-top:auto;padding-top:10px; font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em; color:color-mix(in srgb,var(--accl,var(--acc)) 65%,transparent);text-transform:uppercase; } /* How it works — die drei Schritte liegen wie ein gespielter Stich auf dem (angedeuteten ovalen) Tisch: leicht gedrehte Karten, Nummer = Kartenwert */ .steps{ position:relative;display:grid;gap:22px;grid-template-columns:repeat(3,1fr); padding:36px 30px; } /* Tisch-Andeutung: ovale Filzfläche mit Goldrand (Verweis aufs Spielfeld) */ .steps::before{ content:'';position:absolute;inset:0;border-radius:50%; background:radial-gradient(62% 68% at 50% 50%,rgba(56,43,28,.6),rgba(32,24,15,.25) 68%,transparent 74%); border:1px solid rgba(200,150,60,.16); box-shadow:inset 0 0 60px rgba(0,0,0,.35); } /* Goldornament als Kastengrund (dieselbe Datei wie im Siegerscreen). Hier BEWUSST deutlicher als dort: Der Schleier ist dünner, weil in diesen Kästen nur wenige Zeilen stehen – im Siegerscreen liegt darunter eine ganze Punkteliste, die mehr Ruhe braucht. overflow:hidden, damit das Ornament an der Rundung sauber endet. */ .step{ position:relative;padding:26px 22px 24px;border-radius:14px;text-align:center; overflow:hidden; background: linear-gradient(170deg,rgba(46,36,24,.82),rgba(26,20,16,.86)), url('img/szene/sieger-ornament.webp') center center / cover no-repeat, linear-gradient(170deg,rgba(46,36,24,.85),rgba(26,20,16,.7)); border:1.5px solid rgba(200,150,60,.28); box-shadow:0 12px 28px rgba(0,0,0,.4); transform:rotate(var(--tilt,0deg)); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; } .step::after{ content:'';position:absolute;inset:7px;border-radius:8px;pointer-events:none; border:1px solid rgba(200,150,60,.18); } .step:nth-child(1){--tilt:-2.4deg} .step:nth-child(3){--tilt:2.4deg} .step:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,.5), 0 0 24px rgba(200,150,60,.22); } /* Nummer als Kartenwert: groß, Cinzel, goldenes Leuchten */ .step .n{ font-family:var(--f-display);font-weight:800;font-size:38px;line-height:1; color:var(--gold-light); text-shadow:0 0 24px rgba(200,150,60,.55); margin-bottom:12px; } .step h3{margin:0 0 6px;font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--text-1)} .step p{margin:0;color:var(--text-2);font-weight:300;font-size:14px;line-height:1.6} /* Bot-Stärken (Trust/Detail-Block) */ .bots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px} /* Akademie-Ränge: aufsteigende Insignien Bronze → Violett → Gold */ /* Stoff-Textur je Bot-Stärke, gleiche Rezeptur wie bei den Feature-Kacheln: Schleier oben drauf, Stärke je Stoff über --sch1/--sch2. Die Zeilen sind flacher als die Kacheln und tragen Fließtext – deshalb etwas dichter. */ .bot{ --racc:var(--copper); display:flex;align-items:center;gap:14px;padding:16px 18px; border-radius:14px;border:1px solid var(--line); overflow:hidden; background: linear-gradient(100deg, rgba(18,16,11,var(--sch1,.62)), rgba(18,16,11,var(--sch2,.76))), var(--stoff,none) center center / cover no-repeat, var(--panel); } .bot.rank-1{--racc:var(--club); --stoff:url('img/stoff/gruen.webp')} /* Ingenieur trug bisher ein hartcodiertes Violett (#9B6BD4) – der einzige kühle Fleck der Seite. Mit dem gelben Stoff hätte das gebissen, deshalb läuft der Akzent jetzt wie die anderen über einen Token. */ .bot.rank-2{--racc:var(--gold); --stoff:url('img/stoff/gelb.webp');--sch1:.82;--sch2:.90} .bot.rank-3{--racc:var(--heart); --stoff:url('img/stoff/rot.webp')} .bot .av{ /* 60 statt 44 px: Die Bot-Icons sind Siegel MIT Schrift ("Lehrling", "Chief Engineer") – bei 44 px war die nicht mehr lesbar. */ width:60px;height:60px;border-radius:50%;display:grid;place-items:center;flex:none; background:radial-gradient(circle at 35% 30%,var(--bg-3),var(--bg-primary)); border:1px solid color-mix(in srgb,var(--racc) 70%,transparent); font-size:20px;color:var(--racc); box-shadow:0 0 14px color-mix(in srgb,var(--racc) 28%,transparent); text-shadow:0 0 10px color-mix(in srgb,var(--racc) 70%,transparent); overflow:hidden; /* das Icon endet sauber am runden Rand */ } /* Bot-Icons (public/img/bots/) – randlos in den Avatarkreis eingepasst. */ .bot .av img{width:100%;height:100%;object-fit:cover;display:block} .bot.rank-3 .av{box-shadow:0 0 22px rgba(200,150,60,.45)} .bot .txt strong{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-1);font-weight:600} .bot .txt .lvl{ font-size:9px;font-family:var(--f-mono);letter-spacing:.05em; color:var(--racc);border:1px solid color-mix(in srgb,var(--racc) 50%,transparent); border-radius:5px;padding:1px 6px; } .bot .txt p{margin:3px 0 0;font-size:12.5px;color:var(--text-2);font-weight:300;line-height:1.5} /* Final CTA panel */ .cta-panel{ position:relative;overflow:hidden;text-align:center; border-radius:var(--r-card);border:1px solid rgba(200,150,60,.3); /* Schlussband: Goldornament unter warmem Messingschein. Der Schleier ist in der Mitte etwas dichter (dort steht die Überschrift) und lässt zu den Rändern hin mehr vom Ornament durch. */ background: radial-gradient(78% 62% at 50% 46%, rgba(26,20,16,.93) 0%, rgba(26,20,16,.88) 58%, rgba(18,16,11,.74) 100%), url('img/szene/sieger-ornament.webp') center center / cover no-repeat, radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--gold) 20%,var(--bg-secondary)), var(--bg-deep) 72%); box-shadow:var(--sh-card);padding:clamp(40px,7vw,64px) 24px; animation:cta-glow 5.5s ease-in-out infinite; } .cta-panel h2{ margin:8px 0 0;font-family:var(--f-display);font-weight:800; font-size:clamp(30px,6vw,46px); background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 4px 30px rgba(200,150,60,.3);line-height:1; } .cta-panel p{max-width:460px;margin:16px auto 0;color:var(--text-2);font-weight:300;font-size:15px;line-height:1.7} .cta-panel .hero-cta{margin-top:26px} /* ---------- FOOTER ---------- */ footer.site{border-top:1px solid var(--line);margin-top:clamp(48px,8vw,80px)} .foot{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; padding:28px 24px;max-width:1180px;margin:0 auto; } /* Im Fuß tritt die Marke zurück: kleinere Kachel, kleinerer Schriftzug. */ .foot .brand .mark{width:34px;height:34px;border-radius:8px} .foot .brand .word{font-size:15px;letter-spacing:.1em} .foot nav{display:flex;gap:20px;flex-wrap:wrap;font-size:13px} .foot nav a{color:var(--text-2);text-decoration:none} .foot nav a:hover{color:var(--gold-light)} .foot .copy{color:var(--text-3);font-size:12px;margin-left:auto;font-family:var(--f-mono)} /* ---------- RESPONSIVE — mobile-first, sauber bis 375px ---------- */ @media (max-width:900px){ .features{grid-template-columns:1fr 1fr} .endstand-zeile{grid-template-columns:1fr} .endstand-bild{order:-1} /* Bild zuerst, dann der Text */ .endstand-bild img{max-width:280px} .steps{grid-template-columns:1fr;padding:0} .steps::before{display:none} /* Tisch-Oval passt nicht zur 1-Spalten-Stapelung */ .step{--tilt:0deg} .bots{grid-template-columns:1fr} .nav-links{display:none} /* Desktop-Ankerlinks auf Mobile ausblenden */ /* Schmalerer Hero → kürzere Steighöhe für die Fee, sonst fliegt sie oben aus dem Bild. Der Koloss bleibt vollständig sichtbar. */ .szene-fee{--fee-hub:340px} /* Mittlere Stufe für den Dampf: Das Lockup schrumpft ab hier mit (11vw), die Kachel muss mitgehen – sonst franst der Aufstieg schon vor dem Handy-Breakpoint zu einem einzelnen Ballen aus. Die Dauern bleiben, das Tempo wirkt dadurch zur kleineren Szene passend ruhig. */ .fog-back{--fog-tw:390px;--fog-th:245px} .fog-mid {--fog-tw:305px;--fog-th:195px} .fog-front{--fog-tw:230px;--fog-th:150px} } @media (max-width:560px){ .features{grid-template-columns:1fr} .bots{grid-template-columns:1fr} /* Die Regel, die hier früher das Sekundär-CTA aus der schmalen Nav nahm, ist mit der Kontopflicht entfallen: In .nav-cta steht seither auf jeder Seite nur noch ein einziger, primärer Knopf. */ .hero-cta .btn{flex:1 1 100%} /* CTAs voll-breit, gut tappbar */ /* Tutorial + Spielregeln sind dritte Wahl. Als vierter und fünfter Vollbreit-Knopf ergäben sie eine Wand aus vier gleich schweren Blöcken – der goldene Haupt-CTA verlöre seine Dominanz. Auf dem Handy deshalb eine leichte Textlink-Zeile: keine Rahmen, nur ein Haarstrich als Trenner. Die Höhe bleibt bei 44 px, damit das Touch-Ziel der Vorgabe entspricht. */ .cta-stapel{ flex:1 1 100%;width:100%;margin-top:2px; flex-direction:row;justify-content:center;align-items:center;gap:0; } .cta-stapel .btn-ghost{ flex:0 1 auto;width:auto;min-width:0; border:0;border-radius:0;background:none; padding:12px 18px;min-height:44px;font-size:13.5px; } .cta-stapel .btn-ghost + .btn-ghost{position:relative} .cta-stapel .btn-ghost + .btn-ghost::before{ content:'';position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:14px;background:var(--line); } /* Die gesperrte Versalzeile passt sonst nicht in eine Zeile (sie bräche am Bindestrich von „Stich-Duell"): engere Sperrung, kürzere Zierstriche. */ .eyebrow{font-size:10.5px;letter-spacing:.2em;gap:8px} .eyebrow .rule{width:20px} /* Dampf auf Handy-Maß: Die Ebenen sind hier nur ~370 × 165 px groß. Bliebe die Kachel groß, sähe man statt Schwaden einen einzigen verwaschenen Ballen neben der Wortmarke. Faustregel = gleiches Kachel-zu-Ebene- Verhältnis wie am Desktop, also grob eine Kachel im Bild. */ .fog-back{--fog-tw:270px;--fog-th:165px} .fog-front{--fog-tw:165px;--fog-th:105px} /* Drei überlagerte Blend- und Maskenebenen sind auf schwachen Geräten der teuerste Posten im Hero. Die mittlere trägt am wenigsten zur Staffelung bei, weil sie mit fog-back auf derselben Tiefe liegt – sie entfällt. */ .fog-mid{display:none} /* Kartenfächer kompakter, bleibt aber 5-teilig */ .hero-cards{height:150px;margin-top:30px} /* Kleinere Karten – alle Innenmaße rechnet cards.css daraus. */ .hcard > .card{--card-w:78px;--card-h:110px} .hcard.c-1{--tx:-98px} .hcard.c-2{--tx:-50px} .hcard.c-4{--tx:50px} .hcard.c-5{--tx:98px} .foot .copy{margin-left:0;width:100%} /* Schmale Nav: Kachel und Schriftzug rücken zusammen, damit Marke und CTA nebeneinander in eine Zeile passen. Die Kachel bleibt über der 44-px-Touch-Grenze, weil der ganze .brand-Link das Ziel ist. */ .brand{gap:8px} .brand .mark{width:34px;height:34px;border-radius:8px} .brand .word{font-size:14px;letter-spacing:.08em} .nav-cta .btn-primary{padding:10px 15px;font-size:13px;white-space:nowrap} /* CTA einzeilig neben längerer Wortmarke */ /* Handy: Beide bleiben sichtbar, aber klein und zurückhaltend. Der Kartenfächer nimmt hier fast die volle Breite ein – stünde der Koloss wie auf dem Desktop auf der Grundlinie, schauten nur noch seine Beine dahinter hervor. Er rückt deshalb ÜBER den Fächer und liest sich dort wie weiter hinten im Raum stehend. 196 px = Innenabstand unten (48) + Fächerhöhe (150), er steht also genau auf dessen Oberkante. */ .szene-koloss{width:92px;right:8px;bottom:196px;opacity:.44} .szene-fee{--fee-hub:300px;--fee-tief:16px;width:54px} /* Kleinere Fassung des Werkstatt-Fotos (49 statt 124 KB) und etwas dichterer Schleier: Auf schmalen Schirmen liegt der Text direkter über dem Motiv. */ .hero::before{ background: radial-gradient(ellipse 92% 54% at 50% 38%, rgba(18,16,11,.56) 0%, rgba(18,16,11,.78) 66%, rgba(18,16,11,.88) 100%), linear-gradient(180deg, rgba(18,16,11,.90) 0%, rgba(18,16,11,.40) 22%, rgba(18,16,11,.58) 60%, var(--bg-primary) 100%), linear-gradient(0deg, rgba(181,101,29,.12), rgba(181,101,29,.12)), url(img/szene/werkstatt-hero-s.webp) center 42%/cover no-repeat; } } @media (max-width:380px){ .wrap{padding:0 16px} .nav{padding:11px 16px;gap:12px} .szene-koloss{width:78px;right:4px} .szene-fee{--fee-hub:260px;width:48px} } /* Bewegung respektieren */ @media (prefers-reduced-motion:reduce){ *{animation:none !important;scroll-behavior:auto !important;transition:none !important} /* Die Fee ergibt nur in Bewegung Sinn – ohne Flug stünde sie starr in der Ecke. */ .szene-fee{display:none} /* Der Dampf bleibt bewusst SICHTBAR, nur still: Das Band steht ohne Animation auf translateY(0) und deckt die Hülle dort vollständig ab – das ist ein gültiges Standbild. Ausblenden würde dem Hero seine Tiefe nehmen, ohne dass jemand etwas gewinnt. */ /* Der Koloss ist ein animiertes WebP – das lässt sich per CSS NICHT anhalten. Deshalb wird hier auf ein Standbild umgeschaltet, damit die Einstellung „Bewegung reduzieren" wirklich greift. */ .szene-koloss{background-image:url(img/szene/dampfkoloss-still.webp)} }