/* Abspieler des Scroll-Films im Look „Weiß wie die Website“ (Board 33, Entwurf 1, WP 27. Okt. 2026): weißer Grund, Schrift in
   Schiefer, das „AI“ und die Knöpfe in Stahlblau, Beschriftungen in Lavendelgrau; die Kennfarbe des Moments nur an Punkt, Zahl und Leiste. */
@font-face{font-family:Inter;src:url('schriften/inter-variabel.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--bg:#ffffff;--ink:#2f3648;--text:#1a1c27;--muted:#6f77a4;--leicht:#7e8eb7;--line:#d9dde3;--stahl:#4b7faa;--akzent:#a21caf;--kreis:#eef1f6;--zeichen:var(--stahl)}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
/* Kopf */
.kopf{position:fixed;inset:0 0 auto;height:76px;padding:0 4.5vw;display:flex;align-items:center;justify-content:space-between;z-index:20;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))}.kopf>*{pointer-events:auto}
.marke{display:flex;align-items:center;gap:18px;text-decoration:none;color:var(--ink)}.marke img{height:38px;width:auto;display:block}.marke small{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:650;border-left:1px solid var(--line);padding-left:18px;color:var(--muted)}.marke svg{width:22px;height:22px}
.kopf-rechts{display:flex;align-items:center;gap:12px}
.demo{display:inline-flex;align-items:center;gap:14px;background:var(--stahl);color:#fff;padding:12px 18px;border-radius:3px;font-size:12.5px;font-weight:600;text-decoration:none}.demo span:last-child{font-size:16px}.demo.gross{padding:15px 22px;font-size:14px}
.steuer[hidden]{display:none}.steuer{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.pausezeichen{display:inline-flex;gap:3px}.pausezeichen i{display:block;width:3px;height:12px;background:var(--ink);border-radius:1px}
/* Bühne */
.geschichte{height:calc(var(--momente,6) * 170vh + 60vh);position:relative}
.buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
canvas{position:absolute;inset:0;width:100%;height:100%}body.welt-echt canvas{opacity:0;pointer-events:none;z-index:3} /* über dem Fenster der App, unter Schleier und Text */body.welt-3d .hintergrund,body.welt-3d .app{display:none}
/* Die echte Welt (Board 35, Entwurf 1): Bühne hinten (Bilder von Codex, weiß gedeckt), das Fenster der App rechts mit Schatten */
.hintergrund{position:absolute;inset:0;overflow:hidden}.hg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.02);transition:opacity .9s ease}.hg.an{opacity:1;transform:scale(1.07);transition:opacity .9s ease,transform 12s linear}
.hintergrund:after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.62)}
.app{position:absolute;right:4.5vw;top:50%;width:min(54vw,calc((100svh - 230px) * 1.6));aspect-ratio:1.6;transform:translateY(-46%);z-index:3}
.fenster{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 50px 90px -46px rgba(20,33,61,.55),0 18px 40px -30px rgba(20,33,61,.35)}
.lage{position:absolute;inset:0}.lage.naechste,.lage.aufzeichnung{opacity:0}.lage.auflagen{pointer-events:none}.kamera{position:absolute;inset:0;transform-origin:0 0;will-change:transform}.kamera img{display:block;width:100%;height:100%;object-fit:fill}
.kamera iframe{display:block;width:1600px;height:1000px;border:0;background:#fff;transform-origin:0 0}
.decken div{position:absolute;background:var(--deckfarbe,#f4f6fa);border:1px solid #e6eaf2;border-radius:10px;transition:opacity .35s ease}
.hervor div{position:absolute;border:2px solid var(--stahl);border-radius:10px;box-shadow:0 0 0 6px rgba(75,127,170,.14),0 10px 30px -14px rgba(75,127,170,.5);transition:opacity .3s ease}
.hervor div.farbig{border-color:var(--rahmen);box-shadow:0 0 0 6px color-mix(in srgb,var(--rahmen) 14%,transparent),0 10px 30px -14px color-mix(in srgb,var(--rahmen) 50%,transparent)}
.hervor div.klein,.hervor div.klein.farbig{border-width:1.5px;border-radius:6px;box-shadow:0 0 0 2px color-mix(in srgb,var(--rahmen,var(--stahl)) 14%,transparent)} /* kleiner Rahmen in einer Karte, ohne den breiten Schein */
.zeiger{position:absolute;width:26px;height:26px;margin:-2px 0 0 -3px;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));transition:opacity .25s}
.klick{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--stahl);opacity:0}
@media(prefers-reduced-motion:reduce){.hg.an{transform:none;transition:opacity .9s ease}}
.schleier{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 28%,rgba(255,255,255,0) 50%);opacity:.9;transition:opacity .4s}
.buehne.mit-text .schleier{opacity:1}
/* Einstieg */
.einstieg{position:absolute;left:6%;top:22%;max-width:760px;z-index:4;will-change:transform,opacity}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--muted);margin:0 0 22px}
h1{font-size:clamp(52px,6.4vw,110px);font-weight:500;letter-spacing:-.06em;line-height:1;margin:0;color:var(--ink)}h1 span{color:var(--stahl)}
.unterzeile{font-size:clamp(20px,2vw,31px);font-weight:400;letter-spacing:-.03em;line-height:1.3;margin:22px 0 0;max-width:640px;color:var(--text);display:flex;flex-direction:column;gap:.7em}.unterzeile p{margin:0}
.beispiel{font-size:12px;color:var(--leicht);margin:14px 0 0;letter-spacing:.02em}
/* Echte Welt (WP, 28. Okt. 2026): der Titel bleibt links neben dem Fenster der App, die Unterzeile ist ein Absatz für Berater */
body.welt-echt .einstieg{max-width:34%;top:18%}body.welt-echt h1{font-size:clamp(42px,3.9vw,76px)}body.welt-echt .unterzeile{font-size:clamp(15px,1.15vw,20px);line-height:1.5;letter-spacing:-.01em;max-width:100%;margin-top:18px}body.welt-echt .start{margin-top:28px}
.start{display:flex;align-items:center;gap:20px;margin-top:36px}
.abspielen{display:inline-flex;align-items:center;gap:12px;padding:13px 24px 13px 13px;border-radius:999px;border:0;font:inherit;font-size:15px;font-weight:600;background:var(--stahl);color:#fff;cursor:pointer;box-shadow:0 16px 34px -16px rgba(20,33,61,.5)}
.abspielen svg{width:30px;height:30px}.abspielen circle{fill:#fff}.abspielen path{fill:var(--stahl)}
.oder{font-size:14px;color:var(--muted)}.oder b{font-weight:600;color:var(--text)}
.scroll-hinweis{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--text);z-index:5;padding:12px 16px 10px;border-radius:22px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);box-shadow:0 10px 24px -14px rgba(20,33,61,.4);transition:opacity .4s}
.maus{width:22px;height:34px;border:2px solid currentColor;border-radius:12px;position:relative;opacity:.85}.maus i{position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:rad 1.6s ease-in-out infinite}
@keyframes rad{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
body.bewegt .scroll-hinweis{opacity:0}
/* Text der Momente */
.text{position:absolute;left:6%;top:21%;width:36%;max-width:560px;z-index:4;pointer-events:none}
/* Der Übergang gilt nur beim Einblenden (.an): beim Wechsel des Moments springt der alte Text sofort auf unsichtbar, statt noch
   einmal kurz sichtbar auszublenden. */
.text>*{opacity:0;transform:translateY(14px)}
.text.an>*{opacity:1;transform:none;transition:opacity .35s,transform .45s}
.bereich{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:650;margin:0 0 20px;color:var(--text)}.bereich i{width:9px;height:9px;border-radius:50%;background:var(--akzent)}
.frage{font-size:clamp(14px,1.15vw,17px);color:var(--muted);margin:0 0 14px;line-height:1.45}
/* --skala setzt der Abspieler, damit ein langer Satz seine Zeilen behält und der Text über der Leiste endet (textEinpassen) */
.satz{font-size:calc(clamp(40px,4.4vw,76px) * var(--skala,1));font-weight:500;letter-spacing:-.055em;line-height:1.02;margin:0 0 26px;white-space:pre-line;text-wrap:balance;color:var(--ink)}
.zahl{margin:0 0 18px;display:flex;flex-direction:column;gap:4px}.zahl b{font-size:calc(clamp(38px,4vw,66px) * var(--skala,1));font-weight:560;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--akzent)}.zahl span{font-size:12px;color:var(--muted);letter-spacing:.02em}
.erkenntnis{font-size:14.5px;line-height:1.6;color:var(--text);margin:0;max-width:440px;border-left:2px solid var(--akzent);padding-left:14px}
.text.an .frage{transition-delay:.05s}.text.an .satz{transition-delay:.12s}.text.an .zahl{transition-delay:.3s}.text.an .erkenntnis{transition-delay:.42s}
/* Der Überblick (Szene 4; WP 28. Okt. 2026, neu nach Board 39 am 30. Okt.): die vier Capabilities als vier Zeilen mit je einem Wert,
   je Zeile eine Kante in ihrer Farbe; liegt rechts der Rahmen auf ihrer Karte, bekommt die Zeile einen dezenten Grund und eine breitere
   Kante, die übrigen bleiben voll lesbar */
.frage[hidden],.zahl[hidden],.zahlpaar[hidden],.themen[hidden],.erkenntnis[hidden]{display:none}
/* zwei Werte nebeneinander (Szene 3: Risikosumme und freies Budget), der erste in der Farbe der Szene */
.zahlpaar{display:flex;flex-wrap:wrap;gap:12px 36px;margin:0 0 18px}.zahlpaar p{margin:0;display:flex;flex-direction:column;gap:4px}
.zahlpaar b{font-size:calc(clamp(30px,2.9vw,48px) * var(--skala,1));font-weight:560;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}.zahlpaar p:first-child b{color:var(--akzent)}
.zahlpaar span{font-size:12px;color:var(--muted);letter-spacing:.02em}.text.an .zahlpaar{transition-delay:.3s}
/* die Zeilen der Themen schrumpfen mit --skala wie Satz und Zahl, damit vier Zeilen auch in einem niedrigen Fenster (Studio) über der Leiste enden */
.themen{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:calc(10px * var(--skala,1));max-width:470px}
.themen li{border-left:3px solid var(--farbe);padding:calc(9px * var(--skala,1)) 14px calc(10px * var(--skala,1)) 18px;border-radius:0 8px 8px 0;transition:background-color .35s ease,border-left-width .35s ease,padding .35s ease}
.themen p{margin:0}.themen li>p:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px}.themen li>p:first-child i{font-style:normal;color:var(--leicht);margin:0 -4px}
.themen b{font-size:calc(clamp(13px,1.05vw,17px) * var(--skala,1));font-weight:650;letter-spacing:.12em;color:var(--farbe)}.themen li>p:first-child span{font-size:calc(clamp(13px,1.05vw,16px) * var(--skala,1));color:var(--muted)}
.themen .zahlen{margin-top:4px;font-size:calc(clamp(17px,1.46vw,24px) * var(--skala,1));font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums}
.themen.mit-fokus li.an{background:color-mix(in srgb,var(--farbe) 9%,transparent);border-left-width:5px;padding-left:16px}
.text.an .themen{transition-delay:.3s}
@media(max-width:900px){.themen{gap:4px}.themen li{padding:3px 8px 4px 11px}.themen b{font-size:12.5px}.themen li>p:first-child span{font-size:11.5px}.themen .zahlen{font-size:14px;margin-top:1px}.themen.mit-fokus li.an{padding-left:9px}}
/* Leiste */
.leiste{position:absolute;left:5%;right:5%;bottom:40px;z-index:5}.leiste ol{display:flex;gap:8px;margin:0;padding:0;list-style:none}.leiste li{flex:1}.leiste button{width:100%;background:transparent;border:0;padding:14px 0 0;text-align:left;cursor:pointer;color:var(--muted);font:inherit;font-size:10px;letter-spacing:.04em;position:relative}
.leiste button:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}.leiste button:after{content:'';position:absolute;left:0;top:0;height:2px;width:var(--fortschritt,0%);background:var(--farbe,var(--akzent))}
.leiste button[aria-current=step]{color:var(--text);font-weight:600}.leiste button:focus-visible{outline:2px solid var(--stahl);outline-offset:4px}
.laden{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--bg);font-size:12px;color:var(--muted)}.laden span{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--stahl);animation:dreh 1s linear infinite}body:not(.laedt) .laden{display:none}@keyframes dreh{to{transform:rotate(360deg)}}
/* Der große Knopf und die Zeichen der Kontaktkarte; der Schluss selbst steht unten */
.demo.gross{padding:20px 30px;font-size:17px;gap:18px;border-radius:4px;box-shadow:0 18px 36px -18px rgba(20,33,61,.55)}.demo.gross span:last-child{font-size:20px}
/* Die echten Zeichen in einem hellen Kreis, alle in Stahlblau (--zeichen; Schiefer wäre var(--ink)), nur die solreco-Marke in ihren Tönen */
.zeichen{width:38px;height:38px;border-radius:50%;background:var(--kreis);display:inline-flex;align-items:center;justify-content:center;flex:none}
.zeichen svg{width:18px;height:18px;fill:var(--zeichen)}.zeichen svg.marke{width:22px;height:18px}
.fuss{border-top:1px solid var(--line);padding:30px 6vw;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}
/* Der Schluss (Board 42, Fassung 1 „Vor der Skyline“ mit der Regie von Aufbau 4, Wahl WP 5. Nov. 2026; davor vom 3. bis 5. Nov. die
   Animation „Bühne und Strauß“, Board 41): die einfache letzte Seite vor der Stadt am Morgen (Board 32). Links auf einem weißen Schleier
   Kennzeile, Name, Knopf und die Kontaktkarte als Glas; rechts das Fenster der Startseite, das sich am Ende der Regie schräg setzt.
   Die Seite endet mit dem Fuß im Schluss, damit ganz unten der Schluss von oben im Bild steht. */
.finale{padding:0}
.schluss{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;overflow:hidden;display:grid;grid-template-rows:1fr auto;background:#eef2f6;color:var(--ink)}
.stadt{position:absolute;inset:0;z-index:-1;background:var(--stadt,none) 64% 58%/cover no-repeat}
.stadt:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 32%,rgba(255,255,255,.3) 58%,rgba(255,255,255,.06) 100%),linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 24%,rgba(255,255,255,0) 74%,rgba(255,255,255,.7))}
.schluss-innen{width:100%;max-width:1560px;margin:0 auto;padding:108px 4.5vw 48px;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:40px 64px;align-items:center;align-self:center}
.schluss-text{display:grid;gap:20px;justify-items:start;max-width:640px;min-width:0}
.pfad{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--stahl)}.pfad i{font-style:normal;color:var(--leicht);letter-spacing:0}.pfad strong{color:var(--text);font-weight:650}
.schluss-titel{margin:0;font-size:clamp(44px,5vw,86px);font-weight:520;letter-spacing:-.06em;line-height:.96;color:var(--ink);text-wrap:balance}.schluss-titel span{color:var(--stahl)}
.kontakt{justify-self:stretch;margin-top:14px;border:1px solid rgba(255,255,255,.75);border-radius:14px;padding:18px 24px 4px;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 60px -34px rgba(20,33,61,.4),0 8px 20px -14px rgba(20,33,61,.2);min-width:0}
.kontakt .eyebrow{margin:0 0 8px}
.kontakt a{display:flex;align-items:center;gap:16px;padding:11px 0;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;min-width:0}.kontakt a+a{border-top:1px solid var(--line)}
.kontakt .wort{flex:1;overflow-wrap:anywhere}.kontakt a i{font-style:normal;color:var(--stahl);font-size:18px;flex:none}.kontakt a:hover .wort{text-decoration:underline;text-decoration-color:var(--stahl);text-underline-offset:3px}
.schluss-buehne{position:relative;min-width:0;padding:0 0 9% 0}
.schluss-fenster{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 60px 100px -46px rgba(20,33,61,.55),0 0 0 1px rgba(20,33,61,.08);container-type:inline-size;transform-origin:center;transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.schluss-fenster.gesetzt{transform:perspective(2200px) rotateY(-7deg) rotateX(1.5deg) scale(.96)}
/* Die Regie des Schlusses (Board 42, Aufbau 4): Lagen im Fenster wie auf der Bühne, die Maße in cqw, damit sie mit dem Fenster wachsen */
.sf-lage{position:absolute;inset:0}
.sf-lage img{display:block;width:100%;height:100%;object-fit:fill}
.sf-rahmen{opacity:0;background:#fff;transition:opacity .9s cubic-bezier(.4,0,.2,1)}.sf-rahmen.an{opacity:1}
.sf-rahmen iframe{display:block;width:1600px;height:1000px;border:0;background:#fff;transform-origin:0 0;transform:scale(var(--f,1))}
.sf-auflagen{pointer-events:none}
.sf-tipp{position:absolute;left:76.4%;top:92.9%;width:18.4%;height:5%;display:flex;align-items:center;justify-content:flex-end;gap:.4cqw;padding:0 1.1cqw;background:#fff;border-radius:1.2cqw;font-size:1.05cqw;color:var(--text);white-space:nowrap;overflow:hidden;opacity:0}
.sf-tipp.an{opacity:1}.sf-tipp span{flex:none}
.sf-cursor{display:inline-block;width:.1cqw;height:1.3cqw;background:var(--text);animation:sf-blink 1s steps(2) infinite}.sf-tipp.fertig .sf-cursor{display:none}
@keyframes sf-blink{50%{opacity:0}}
.sf-denkt{display:none;gap:.35cqw}.sf-tipp.denkt .sf-denkt{display:inline-flex}
.sf-denkt i{width:.55cqw;height:.55cqw;border-radius:50%;background:var(--stahl);animation:sf-denkt 1.1s ease-in-out infinite}.sf-denkt i:nth-child(2){animation-delay:.18s}.sf-denkt i:nth-child(3){animation-delay:.36s}
@keyframes sf-denkt{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-.25cqw)}}
.sf-zeiger{position:absolute;width:1.7cqw;height:1.7cqw;margin:-.1cqw 0 0 -.2cqw;opacity:0;filter:drop-shadow(0 .15cqw .25cqw rgba(0,0,0,.28));transition:left 1s cubic-bezier(.4,0,.2,1),top 1s cubic-bezier(.4,0,.2,1),opacity .3s}.sf-zeiger.an{opacity:1}
.sf-klick{position:absolute;width:1.8cqw;height:1.8cqw;margin:-.9cqw 0 0 -.9cqw;border-radius:50%;border:.15cqw solid var(--stahl);opacity:0;transform:scale(.4)}.sf-klick.an{animation:sf-klick .6s cubic-bezier(.4,0,.2,1) both}
@keyframes sf-klick{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.9)}}
.schluss .fuss{border-top-color:rgba(47,54,72,.12)}
@media(max-width:900px){.schluss-innen{grid-template-columns:1fr;padding:92px 5vw 40px;gap:30px}.schluss-buehne{padding-bottom:0}.schluss-fenster.gesetzt{transform:none}.stadt:after{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 55%,rgba(255,255,255,.7) 100%)}.schluss-titel{font-size:46px}.kontakt{padding:16px 18px 4px}}
@media(prefers-reduced-motion:reduce){.text.an>*{transition:none}.maus i{animation:none}}
@media(max-width:900px){.kopf{height:62px;padding:0 5vw}.marke img{height:30px}.marke small{display:none}.demo{padding:10px 13px;font-size:11px}.steuer{padding:8px 12px;font-size:11px}
.einstieg{left:6%;right:6%;top:16%;max-width:none}h1{font-size:46px}.unterzeile{font-size:19px}.start{flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}.scroll-hinweis{bottom:84px}
.text{left:6%;right:6%;width:auto;top:16%;max-width:none}.satz{font-size:calc(36px * var(--skala,1));margin-bottom:16px}.zahl b{font-size:calc(34px * var(--skala,1))}.frage{font-size:13px}.erkenntnis{font-size:12px}
body.welt-echt .app{left:5%;right:5%;width:auto;top:72px;transform:none}body.welt-echt .text{top:calc(72px + 56.25vw + 18px);bottom:78px;overflow:hidden}body.welt-echt .satz{font-size:calc(28px * var(--skala,1));margin-bottom:10px}body.welt-echt .zahl{margin-bottom:10px}body.welt-echt .zahl b{font-size:calc(28px * var(--skala,1))}body.welt-echt .zahlpaar{margin-bottom:10px;gap:6px 24px}body.welt-echt .zahlpaar b{font-size:calc(26px * var(--skala,1))}body.welt-echt .bereich{margin-bottom:10px}body.welt-echt .frage{margin-bottom:8px}body.welt-echt .einstieg{top:calc(72px + 56.25vw + 14px);max-width:none;bottom:72px;overflow:hidden}body.welt-echt h1{font-size:34px}body.welt-echt .unterzeile{font-size:13.5px;line-height:1.45;margin-top:10px}body.welt-echt .beispiel{margin-top:8px}body.welt-echt .start{margin-top:12px}
.schleier{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.8) 42%,rgba(255,255,255,0) 62%)}
.demo.gross{padding:17px 24px;font-size:15.5px}}