zum * Scroll-Container und entwertet damit das position:sticky in `.landing nav`. Auf * wandert overflow auf den Viewport, und die Leiste klebt. Diese Seite zeigt also, was * `.landing nav` beschreibt, die Webapp nicht. Nicht angeglichen, weil die Halbtransparenz * und der backdrop-filter in derselben Regel nur dann etwas tun, wenn Inhalt unter der * Leiste durchläuft. Ausführlich in WEBSITE_README.md eine Ebene über diesem Ordner. */ /* ── NEU: Urbanist selbst ausliefern ───────────────────────────────────────── * Die Webapp lädt die Schrift über den Google-Fonts-Dienst. Auf einer Seite ohne eigenen * Server heißt das: jeder erste Aufruf meldet IP und User-Agent an Google, bevor der * Besucher irgendetwas getan hat. Beides zusammen ist personenbezogen, also einwilligungs- * pflichtig, also ein Cookie-Banner für eine Schriftart. Selbst ausliefern erspart das. * * Google liefert Urbanist als Variable Font aus, ein Datei-Paar für alle Schnitte von * 100 bis 900. Die beiden unicode-range-Angaben sind unverändert von dort übernommen, * damit die Zeichenabdeckung exakt dieselbe bleibt wie heute in der Webapp. Zeichen * außerhalb (→ ✓ 👀) fallen wie bisher auf die Systemschrift zurück. */ @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:100 900; font-display:swap; src:url('assets/fonts/urbanist-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Urbanist'; font-style:normal; font-weight:100 900; font-display:swap; src:url('assets/fonts/urbanist-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ── NEU: Grundabstand ─────────────────────────────────────────────────────── * `.landing *` trifft nur Nachfahren. Da `.landing` jetzt auf sitzt, bliebe dessen * eigener Vorgabe-Rand von 8px stehen und die Seite hätte einen Rahmen, den sie in der * Webapp nicht hat (dort erledigte das globals.css). */ html,body{margin:0;padding:0} /* ════════════════════════════════════════════════════════════════════════════ * Ab hier wortgleich aus webapp/src/app/landing.css * ════════════════════════════════════════════════════════════════════════════ */ .landing{--bg:#0D1011; --ink:#0A0C0D; --card:#151A1E; --card-up:#1A2026; --line:#232A2F; --primary:#006AC6; --accent:#4892F0; --navy:#002952; --white:#F7F8F8; --dim:#A1ADB6; --mute:#6A7680; --good:#25C685;} .landing *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} .landing{background:var(--bg);color:var(--white);font-family:'Urbanist',system-ui,sans-serif;line-height:1.45;overflow-x:hidden} .landing::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:99; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")} .landing a{color:inherit;text-decoration:none} .landing .wrap{max-width:1240px;margin:0 auto;padding:0 30px} .landing .btn{display:inline-block;background:var(--primary);color:#fff;font-weight:900;font-size:18px;letter-spacing:.01em;padding:18px 34px;border-radius:999px;transition:.18s;cursor:pointer} .landing .btn:hover{background:#1a82e3;transform:translate(-2px,-3px);box-shadow:6px 8px 0 rgba(0,42,82,.9)} .landing nav{position:sticky;top:0;z-index:60;background:rgba(13,16,17,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .landing .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px} .landing .brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px} .landing .brand img{width:28px;height:28px} .landing .nav-cta{background:var(--primary);padding:10px 20px;border-radius:999px;font-weight:800;font-size:14px} .landing .nav-cta:hover{background:#1a82e3} .landing .hero{position:relative;padding:70px 0 0;overflow:hidden} .landing .for-badge{display:inline-block;border:1.5px solid var(--accent);color:var(--accent);font-weight:800;font-size:13px;letter-spacing:.22em;padding:9px 18px;border-radius:999px;margin-bottom:34px;animation:pop .5s .1s both} .landing .hero h1{font-weight:900;text-transform:uppercase;font-size:clamp(42px,9.2vw,132px);line-height:.92;letter-spacing:-.025em} .landing .hero h1 .l{display:block;animation:slide .7s both} .landing .hero h1 .l:nth-child(2){animation-delay:.08s} .landing .hero h1 .l:nth-child(3){animation-delay:.16s} .landing .hero h1 .blue{color:var(--accent)} .landing .hero h1 .outline{color:transparent;-webkit-text-stroke:2px var(--white)} .landing .hero-row{display:flex;gap:50px;align-items:center;justify-content:space-between;margin-top:30px;padding-bottom:56px} .landing .hero-sub{max-width:520px;font-size:19px;color:var(--dim)} .landing .hero-sub b{color:var(--white)} .landing .cta-block{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .landing .fan-link{color:var(--mute);font-weight:700;font-size:14px;border-bottom:1.5px solid var(--line);transition:.2s} .landing .fan-link:hover{color:var(--white)} .landing .hero-phone{position:relative;flex:0 0 auto;animation:pop .8s .3s both} .landing .hero-phone img{width:min(260px,62vw);border-radius:26px;border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.65);transform:rotate(3deg);display:block} .landing .stamp{position:absolute;left:-80px;bottom:70px;max-width:250px;transform:rotate(-8deg);background:var(--good);color:#06281a;font-weight:900;font-size:15px;letter-spacing:.04em;padding:12px 18px;border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5);animation:pop .5s .8s both} @keyframes slide{ from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none}} @keyframes pop{ from{opacity:0;transform:scale(.85) rotate(3deg)} to{opacity:1}} .landing .ticker{border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);background:var(--ink);overflow:hidden;white-space:nowrap;padding:16px 0} .landing .ticker-track{display:inline-block;animation:scroll 26s linear infinite} .landing .ticker span{font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:.05em;margin:0 26px} .landing .ticker .pr{color:var(--good)} .landing .ticker .sold{color:var(--mute);text-decoration:line-through} @keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)}} .landing section{padding:100px 0} .landing .kick{font-size:13px;font-weight:800;letter-spacing:.24em;color:var(--accent);text-transform:uppercase;margin-bottom:20px} .landing h2{font-weight:900;text-transform:uppercase;font-size:clamp(34px,5vw,60px);line-height:.98;letter-spacing:-.02em;margin-bottom:18px} .landing h2 .blue{color:var(--accent)} .landing .sub{color:var(--dim);font-size:18px;max-width:620px} .landing .foryou{background:var(--ink);border-bottom:1px solid var(--line)} .landing .checks{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:14px} .landing .check{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;font-size:17px;transition:.2s} .landing .check:hover{transform:translate(-2px,-3px);border-color:#2e3a44} .landing .check .box{min-width:26px;height:26px;border-radius:8px;background:var(--good);color:#06281a;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:15px;transform:translateY(1px)} .landing .check b{color:var(--white)} .landing .check span{color:var(--dim)} .landing .not-famous{margin-top:36px;font-size:clamp(20px,2.6vw,28px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em} .landing .not-famous em{font-style:normal;color:var(--accent)} .landing .dms .dm-grid{display:grid;grid-template-columns:1fr .95fr;gap:60px;align-items:center;margin-top:10px} .landing .dm-thread{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:26px 24px 30px;max-width:540px;box-shadow:0 30px 70px rgba(0,0,0,.45);transform:rotate(-1deg)} .landing .dm-head{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px} .landing .dm-head .ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px} .landing .dm-head .t{font-weight:800;font-size:15px} .landing .dm-head .s{color:var(--mute);font-size:12.5px} .landing .dm{display:flex;gap:10px;margin-bottom:14px;align-items:flex-end} .landing .dm-thread.pre .dm{opacity:0;transform:translateY(14px)} .landing .dm-thread.in .dm{animation:dmin .45s forwards} .landing .dm-thread.in .dm:nth-child(2){animation-delay:.1s} .landing .dm-thread.in .dm:nth-child(3){animation-delay:.5s} .landing .dm-thread.in .dm:nth-child(4){animation-delay:.9s} .landing .dm-thread.in .dm:nth-child(5){animation-delay:1.5s} @keyframes dmin{ to{opacity:1;transform:none}} .landing .dm .ava{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:#fff} .landing .dm .a1{background:#7c4dbe} .landing .dm .a2{background:#b3552e} .landing .dm .a3{background:#2e7d5b} .landing .dm .bub{background:var(--card-up);border:1px solid var(--line);border-radius:18px 18px 18px 5px;padding:12px 16px;font-size:15.5px;max-width:78%} .landing .dm .bub .h{color:var(--mute);font-size:12px;font-weight:700;margin-bottom:3px} .landing .dm.me{flex-direction:row-reverse} .landing .dm.me .bub{background:var(--primary);border-color:var(--primary);border-radius:18px 18px 5px 18px;font-weight:700} .landing .dm-copy .fact{font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.12;text-transform:uppercase} .landing .dm-copy .fact .blue{color:var(--accent)} .landing .dm-copy p{margin-top:20px;color:var(--dim);font-size:17px} .landing .dm-copy p b{color:var(--white)} .landing .money-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;margin-top:10px} .landing .price-wall{position:relative;min-height:760px} .landing .floor-stamp{position:absolute;left:4px;top:0;transform:rotate(-4deg);border:2.5px dashed var(--accent);color:var(--accent);font-weight:900;text-transform:uppercase;font-size:15px;padding:14px 18px;border-radius:14px;line-height:1.2;z-index:6;background:rgba(13,16,17,.85)} .landing .pcard{position:absolute;width:240px;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);transition:.25s} .landing .pcard:hover{transform:scale(1.04) rotate(0deg)!important;z-index:5} .landing .pcard img{width:100%;height:170px;object-fit:cover;display:block} .landing .pcard .in{padding:12px 14px} .landing .pcard .n{font-weight:800;font-size:13.5px;line-height:1.25} .landing .pcard .pr{margin-top:6px;font-weight:900;font-size:18px;color:var(--good)} .landing .pc1{top:120px;left:0;transform:rotate(-5deg)} .landing .pc2{top:36px;left:52%;transform:rotate(3deg)} .landing .pc3{top:436px;left:6%;transform:rotate(2deg)} .landing .pc4{top:368px;left:56%;transform:rotate(-3deg)} .landing .money-copy .fact{font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.12;text-transform:uppercase} .landing .money-copy .fact .blue{color:var(--accent)} .landing .money-copy p{margin-top:20px;color:var(--dim);font-size:17px} .landing .money-copy p b{color:var(--white)} .landing .easy{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:80px 0} .landing .easy-row{display:flex;gap:0;align-items:baseline;justify-content:space-between;flex-wrap:wrap} .landing .easy-word{font-weight:900;text-transform:uppercase;font-size:clamp(40px,6.5vw,86px);letter-spacing:-.02em;line-height:1} .landing .easy-word .dot{color:var(--accent)} .landing .easy-cuts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px;align-items:start} .landing .cutcard{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--bg);transition:.2s} .landing .cutcard:hover{transform:translate(-2px,-3px);border-color:#2e3a44} .landing .cutcard img{width:100%;display:block} .landing .cutcard .cap{padding:14px 18px;border-top:1px solid var(--line);font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .landing .easy-note{margin-top:26px;color:var(--dim);font-size:17px;max-width:720px} .landing .easy-note b{color:var(--good)} .landing .diff h2{max-width:980px} .landing .diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px} .landing .diff-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;transition:.2s} .landing .diff-card:hover{transform:translate(-2px,-3px);border-color:#2e3a44} .landing .diff-card h4{font-size:12.5px;letter-spacing:.2em;color:var(--mute);margin-bottom:14px;font-weight:800;text-transform:uppercase} .landing .diff-card .no{font-weight:900;text-transform:uppercase;font-size:22px;line-height:1.05;margin-bottom:14px} .landing .diff-card .no s{color:var(--mute);text-decoration-thickness:3px} .landing .diff-card p{color:var(--dim);font-size:15.5px} .landing .diff-card p b{color:var(--white)} .landing .diff-punch{margin-top:70px;font-weight:900;text-transform:uppercase;font-size:clamp(32px,5.6vw,72px);line-height:.96;letter-spacing:-.02em} .landing .diff-punch span{color:var(--accent)} .landing .diff-punch .outline{color:transparent;-webkit-text-stroke:1.5px var(--white)} .landing .priv{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .landing .priv h2{max-width:900px} .landing .priv-grid{display:grid;grid-template-columns:1fr 1fr .8fr;gap:20px;margin-top:44px;align-items:stretch} .landing .flow{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column} .landing .flow h4{font-size:12.5px;letter-spacing:.2em;color:var(--accent);margin-bottom:18px;font-weight:800} .landing .flow ol{list-style:none;counter-reset:s} .landing .flow li{counter-increment:s;display:flex;gap:12px;padding:7px 0;color:var(--dim);font-size:15px;align-items:baseline} .landing .flow li::before{content:counter(s);min-width:25px;height:25px;border-radius:50%;background:var(--card-up);border:1px solid var(--line);color:var(--white);font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;transform:translateY(4px)} .landing .flow li b{color:var(--white)} .landing .qrflow{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;min-height:0} .landing .qrflow img{width:100%;display:block;flex:1 1 0;min-height:0;object-fit:cover;object-position:top} @media(max-width:920px){ .landing .qrflow img{flex:none;max-height:340px}} .landing .qrflow .cap{padding:14px 18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--dim)} .landing .qrflow .cap b{color:var(--white)} .landing .nobody{margin-top:30px;font-weight:900;text-transform:uppercase;font-size:clamp(18px,2.2vw,24px)} .landing .nobody span{color:var(--accent)} .landing .quiet{padding:22px 0;border-bottom:1px solid var(--line)} .landing .quiet p{text-align:center;color:var(--mute);font-size:13px} .landing .quiet b{color:var(--dim)} .landing .fans{padding:64px 0} .landing .fans-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 38px} .landing .fans-in h3{font-weight:900;text-transform:uppercase;font-size:24px} .landing .fans-in p{color:var(--dim);margin-top:6px;font-size:15.5px} .landing .store{display:flex;gap:14px;align-items:center} .landing .store img{height:42px} .landing .store .soon{font-size:12px;color:var(--mute)} .landing .final{text-align:center;padding:120px 0 110px;position:relative;overflow:hidden} .landing .final h2{font-size:clamp(44px,8vw,110px);line-height:.94} .landing .final .sub{margin:18px auto 40px} .landing .final .ghost{position:absolute;inset:auto 0 -30px;font-weight:900;text-transform:uppercase;font-size:clamp(60px,12vw,180px);color:transparent;-webkit-text-stroke:1px var(--line);white-space:nowrap;pointer-events:none;line-height:1} .landing footer{border-top:1px solid var(--line);padding:34px 0;color:var(--mute);font-size:13px} .landing .foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} .landing .foot a:hover{color:var(--dim)} @media(max-width:920px){ .landing .money-grid, .landing .dm-grid{grid-template-columns:1fr} .landing .dms .dm-grid{gap:44px} .landing .dm-thread{transform:none;max-width:100%} .landing .price-wall{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:14px} .landing .floor-stamp{position:static;display:inline-block;grid-column:1/-1;justify-self:start;margin-bottom:6px;transform:rotate(-3deg)} .landing .pcard{position:static;width:auto;transform:rotate(-1.5deg)} .landing .pcard:nth-of-type(odd){transform:rotate(1.5deg)} .landing .checks, .landing .priv-grid, .landing .diff-grid, .landing .easy-cuts{grid-template-columns:1fr} .landing .hero-row{flex-direction:column;align-items:flex-start} .landing .stamp{left:auto;right:-6px;bottom:40px} .landing section{padding:70px 0} .landing .final{padding:80px 0 90px}} @media(max-width:480px){ .landing .for-badge{font-size:11.5px;letter-spacing:.14em} .landing .pcard img{height:130px}} @media(prefers-reduced-motion:reduce){ .landing *, .landing *::before, .landing *::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important} .landing .dm{opacity:1;transform:none}} /* EU AI Act transparency mark. The four product photos on this page are AI-generated * (Higgsfield/Gemini output, confirmed by the CEO 2026-08-09), so they carry a visible label. * Small and unobtrusive, but readable — the point is disclosure, not decoration. */ /* NOTE: .pcard is position:absolute in the scattered desktop price wall, which already makes it * the containing block for the mark. The mobile breakpoint switches it to static for the grid. * Giving it position:relative there is not enough — the desktop top/left offsets would come back * to life and push the cards out of the viewport. inset:auto neutralises them. */ @media(max-width:920px){ .landing .pcard{position:relative;inset:auto} } .landing .ai-mark{ position:absolute;top:10px;left:10px;z-index:2; font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:4px 8px;border-radius:6px; background:rgba(13,16,17,.82);color:var(--dim); border:1px solid var(--line);backdrop-filter:blur(4px); pointer-events:none; } /* ── Korrekturen am Entwurf (CEO-Befunde 2026-08-09) ─────────────────────────── * Diese Regeln stehen bewusst am Ende, damit sie den übernommenen Entwurf überschreiben, * ohne ihn zu verändern. Jede Korrektur mit Grund. */ /* 1. Der QR-Screenshot war seitlich abgeschnitten: object-fit:cover beschneidet ein hohes * Telefonbild in einer schmalen Spalte an den Rändern. contain zeigt es vollständig. */ .landing .qrflow img{ object-fit:contain; object-position:center; background:var(--card); max-height:none; padding:10px; } /* Die Spalte darf mitwachsen, sonst bleibt das Bild winzig neben den beiden Ablauf-Karten. * ACHTUNG: nur am Schreibtisch. Ohne die Größenbegrenzung überschreibt diese Regel die * Handy-Umbruchregel gleicher Spezifität und die drei Karten bleiben nebeneinander stehen. */ @media(min-width:921px){ .landing .priv-grid{grid-template-columns:1fr 1fr 1.05fr} } .landing .qrflow{justify-content:space-between} /* 2. Die Seite skalierte je nach Bildschirm völlig anders: die Überschrift hing an 9,2vw, auf * einem 33-Zoll-Schirm also mehr als doppelt so groß wie auf einem 13-Zoll-Notebook. Dadurch * lag der Seitenumbruch mal beim Laufband, mal noch im Fließtext. Obergrenze runter und der * Inhalt bekommt eine maximale Breite, damit die Komposition über alle Größen hält. */ .landing .hero h1{font-size:clamp(40px,7.4vw,96px)} .landing .hero .hero-sub{font-size:clamp(16px,1.15vw,19px)} @media(min-width:1600px){ .landing .wrap{max-width:1440px} .landing .hero{padding-top:56px} .landing .hero-row{padding-bottom:44px} } /* ══════════════════════════════════════════════════════════════════════════════ * MOBILE-ÜBERARBEITUNG (CEO-Befund 2026-08-09: „viel zu langgezogen", DM verzogen) * * Gemessen vorher auf 375×812: 9.585 px Gesamthöhe = 11,8 Bildschirme. Für eine Seite, * deren einzige Aufgabe der Klick auf „Join the waitlist" ist, scrollt das niemand zu Ende. * * Die Haltung bleibt: Plakat-Typografie, versetzte Karten, harte Kontraste. Was sich ändert, * ist der Rhythmus und die Ausnutzung der schmalen Fläche. Nichts wird weggelassen. * ══════════════════════════════════════════════════════════════════════════════ */ @media(max-width:920px){ /* ── 1. DM-Abschnitt: der eigentliche Bruch ───────────────────────────────── * Die Grundregel `.dms .dm-grid` (zwei Klassen) schlägt die Umbruch-Regel `.dm-grid` * (eine Klasse), deshalb blieb hier auf dem Handy die zweispaltige Schreibtisch-Fassung * stehen: Faden 192 px, Textspalte 103 px, also ein Wort pro Zeile. Gleiche Spezifität * herstellen, dann greift der Umbruch. Dieser Fehler steckt schon im Ursprungsentwurf. */ .landing .dms .dm-grid{grid-template-columns:1fr;gap:28px} .landing .dm-thread{padding:18px 16px 20px;border-radius:22px} .landing .dm .bub{max-width:calc(100% - 42px);font-size:15px;padding:11px 14px} .landing .dm{margin-bottom:11px} .landing .dm-copy .fact{font-size:21px;line-height:1.15} .landing .dm-copy p{margin-top:14px;font-size:15.5px} /* ── 2. Rhythmus: der Hauptgrund für die Länge ────────────────────────────── * 70 px oben und unten je Abschnitt summieren sich über neun Abschnitte auf mehr als * einen ganzen Bildschirm nur an Luft. 48 px lassen die Plakatwirkung intakt. */ .landing section, .landing .easy{padding:48px 0} .landing .wrap{padding:0 20px} .landing h2{margin-bottom:14px} .landing .kick{margin-bottom:14px} /* ── 3. Die vier Zusagen: dichter, ohne an Gewicht zu verlieren ─────────────── */ .landing .checks{margin-top:26px;gap:10px} .landing .check{padding:15px 16px;font-size:15.5px;gap:13px;border-radius:15px} .landing .check .box{min-width:23px;height:23px;font-size:13px} .landing .not-famous{margin-top:24px} /* ── 4. Drei App-Ausschnitte als wischbare Reihe statt gestapelter Turm ─────── * Gestapelt waren das drei bildschirmhohe Blöcke. Nebeneinander mit Einrasten bleibt * jeder Ausschnitt groß genug zum Lesen, kostet aber nur noch einen Bildschirm. * Der Rand links und rechts zeigt, dass es weitergeht. */ .landing .easy-cuts{ display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; margin:0 -20px;padding:0 20px 6px; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .landing .easy-cuts::-webkit-scrollbar{display:none} .landing .cutcard{flex:0 0 76%;scroll-snap-align:center} .landing .easy-row{gap:2px} .landing .easy-note{margin-top:18px;font-size:15px} /* ── 5. Vergleich und Privatsphäre: gestapelt, aber straffer ────────────────── */ .landing .diff-grid, .landing .priv-grid{gap:12px;margin-top:26px} .landing .diff-card{padding:18px} .landing .diff-punch{margin-top:30px} .landing .flow{padding:18px} .landing .flow ol{gap:10px} /* Der QR-Ausschnitt darf nicht die halbe Seite einnehmen. */ .landing .qrflow img{max-height:300px} /* ── 6. Preiswand: zwei Spalten, Bilder in ruhiger Höhe ─────────────────────── */ .landing .price-wall{gap:10px} .landing .pcard .in{padding:11px 12px} .landing .pcard .n{font-size:12.5px} .landing .ai-mark{font-size:9px;padding:3px 6px;top:7px;left:7px} /* ── 7. Abbinder ────────────────────────────────────────────────────────────── */ .landing .fans-in{gap:18px} .landing .final{padding:64px 0 70px} .landing .quiet{padding:20px 0} } /* Sehr schmale Geräte: nur noch Feinschliff, keine neuen Regeln. */ @media(max-width:400px){ .landing .cutcard{flex:0 0 82%} .landing .dm-copy .fact{font-size:19.5px} } /* Zweiter Durchgang Handy: nach dem ersten lagen wir bei 9,4 Bildschirmen. Die wischbare * Reihe hat beim Ausschnitt-Block 595 px gespart, also bekommt der Vergleich dieselbe * Behandlung. Drei nebeneinanderliegende Argumente vergleicht man ohnehin lieber im Wischen * als im Scrollen. Die Ablauf-Karten bleiben gestapelt, weil sie eine Reihenfolge erzählen. */ @media(max-width:920px){ /* Vergleich: wischbar statt gestapelt */ .landing .diff-grid{ display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; margin:0 -20px;padding:0 20px 6px;scrollbar-width:none; } .landing .diff-grid::-webkit-scrollbar{display:none} .landing .diff-card{flex:0 0 80%;scroll-snap-align:center;display:flex;flex-direction:column} .landing .diff-punch{margin-top:26px;font-size:clamp(26px,8vw,40px)} /* Preiswand: die Bilder trugen die meiste Höhe */ .landing .pcard img{height:120px} .landing .floor-stamp{margin-bottom:2px} /* Hero: das Telefon darf kleiner, die Aussage trägt die Fläche */ .landing .hero{padding-top:44px} .landing .hero-phone img{width:min(210px,54vw)} .landing .hero-row{gap:26px;margin-top:22px;padding-bottom:34px} .landing .for-badge{margin-bottom:22px} .landing .hero-sub{font-size:16.5px} .landing .cta-block{margin-top:22px;gap:14px} .landing .btn{font-size:16px;padding:15px 26px} /* Privatsphäre: gestapelt lassen, aber die Luft rausnehmen */ .landing .priv .sub{font-size:16px} .landing .flow ol{margin-top:10px} .landing .flow li{font-size:14.5px} .landing .qrflow img{max-height:230px} .landing .nobody{margin-top:24px;font-size:clamp(20px,6vw,30px)} } /* Dritter Durchgang: Zeilenfall der Überschriften. Bei 34 px passte „YOUR FOLLOWERS ARE" * nicht in eine Zeile und riss zu „YOUR FOLLOWERS / ARE". Etwas kleiner hält die Zeilen * zusammen, die Plakatwirkung bleibt, weil Gewicht und Versalien unverändert sind. */ @media(max-width:920px){ .landing h2{font-size:clamp(27px,7.6vw,34px);line-height:1.02} .landing .hero h1{font-size:clamp(38px,10.6vw,52px);line-height:.94} /* Der QR-Text lief seitlich heraus, weil lange Wörter nicht umbrechen durften. */ .landing .qrflow .cap{overflow-wrap:anywhere;font-size:13px;padding:12px 14px} .landing .flow h4{font-size:11px;letter-spacing:.1em} } /* Vierter Durchgang: Basic und VIP sind zwei Alternativen, keine Abfolge. Nebeneinander zum * Wischen ist deshalb inhaltlich richtig und spart die halbe Abschnittshöhe. Die Schritte * innerhalb einer Karte bleiben natürlich untereinander. */ @media(max-width:920px){ .landing .priv-grid{ display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; margin:0 -20px;padding:0 20px 6px;scrollbar-width:none; } .landing .priv-grid::-webkit-scrollbar{display:none} .landing .flow, .landing .qrflow{flex:0 0 82%;scroll-snap-align:center} .landing .qrflow img{max-height:320px} } /* ════════════════════════════════════════════════════════════════════════════ * NEU: Ersatz für die fünf Inline-Stile aus page.tsx * * In React standen sie als style={{…}} direkt am Element. Eine Content-Security-Policy * ohne 'unsafe-inline' verbietet genau das. Die Vorgabe lautet: die Seite ändern, nicht * die Policy. Also stehen sie hier, mit denselben Werten. Kein Wert wurde angefasst. * ════════════════════════════════════════════════════════════════════════════ */ /* page.tsx Zeile 131:

— der Geld-Abschnitt sitzt näher * am Laufband darüber als die anderen Abschnitte. */ .landing .money{padding-top:40px} /* page.tsx Zeile 158: das Sneaker-Bild ist freigestellt auf Weiß, cover würde es beschneiden. */ .landing .pc4 img{object-fit:contain;background:#fff} /* page.tsx Zeile 281: die Unterzeile im Schluss-Abschnitt ist zentriert. Die Grundregel * `.landing .final .sub` setzt bereits margin:18px auto 40px, hier kommt nur die Achse dazu. */ .landing .final .sub{text-align:center} /* page.tsx Zeile 289: der Firmenname in der Fußzeile hebt sich vom übrigen Kleingedruckten ab. */ .landing .foot b{color:var(--dim)} /* page.tsx Zeile 280: paycheck. — das ist * wortwörtlich, was `.landing h2 .blue` ohnehin tut. Im HTML steht deshalb class="blue", * eine eigene Regel braucht es nicht. Dieser Kommentar steht hier, damit niemand nach ihr sucht. */