/* ============================================================================ Startseite, Umbau fürs Handy vom 11.10.2026. Nur in public/index.html eingebunden, nach site.css. Alle Klassen tragen den Vorsatz st-, damit hier nichts eine andere Seite trifft und site.css hier nichts überschreibt. Die Seite hat vier Teile, und jeder dient der einen Entscheidung «lade ich die App»: 1 · Kopf Hauptzeile, «Probier Tag 0 aus», App Store, Google Play 2 · Eine App Eluans drei Sätze und die Antwort: alles in einer App 3 · Was trifft auf dich zu? vier Personas, je eine Zeile zur Vertiefung 3b · Nah dran Eluan mit Gesicht, drei Fragen, Datenschutz (12.10.2026) 4 · Schluss Quest your way to a better you, die zwei Läden Handy zuerst: alles hier gilt ab 320 Pixeln, die Rechnerfassung kommt unten in den @media-Blöcken. Fliesstext mindestens 16 Pixel, Nebenzeilen mindestens 14. Farben nur aus den Variablen von site.css. ========================================================================== */ /* ---------- Gemeinsam ---------- */ .st-sek{padding:46px 0} .st-sek + .st-sek{border-top:1px solid var(--line)} .st-h2{font-size:clamp(32px,8.8vw,54px);line-height:1.04;margin:0;text-wrap:balance} .st-marke{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--primary);margin:0 0 12px} /* Symbole: inline SVG, viewBox 24, Strich 1.7, runde Enden (Design-System). */ .st-sym{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px; background:var(--primary-dim);color:var(--primary)} .st-sym svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* ---------- Die Laden-Knöpfe ---------- App Store oben, Google Play darunter, nie nebeneinander (Eluan, 11.10.2026). Die Klasse .store bleibt, weil assets/js/leuchten.js und die Messung in assets/js/analytics.js die Knöpfe daran erkennen. Aussehen wie die offiziellen Abzeichen: schwarz, heller Rand, Zeichen links. */ .st-laden{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:340px} .st-laden .store{display:flex;align-items:center;gap:14px;min-height:58px;margin:0; padding:8px 18px;border-radius:var(--r-md);background:#000;color:#fff; border:1px solid rgba(255,255,255,.34);text-decoration:none; transition:transform .14s var(--ease),border-color .18s,background .18s,box-shadow .2s} .st-laden .store svg{flex:none} .st-laden .store span{display:block;text-align:left;line-height:1.2;min-width:0} .st-laden .store span i{display:block;font-style:normal;font-size:14px;font-weight:500; letter-spacing:0;text-transform:none;opacity:1;color:#c9d3d1;margin:0 0 1px} .st-laden .store span b{display:block;font-size:19px;font-weight:800;letter-spacing:-.005em} .st-laden .store:hover{border-color:var(--primary);background:#0b0f10;transform:translateY(-1px);box-shadow:none} .st-laden .store:active{transform:translateY(0) scale(.99)} .st-laden .store:focus-visible{outline:3px solid var(--primary);outline-offset:3px} /* Der Laden-Knopf erkennt das Gerät (assets/js/laden-geraet.js setzt data-geraet am html-Element, bevor gezeichnet wird). In Blöcken mit data-laden-geraet steht auf dem iPhone nur der App Store, auf Android nur Google Play. Ohne Skript und am Rechner stehen beide, App Store oben. */ html[data-geraet="apple"] [data-laden-geraet] .store[href*="play.google.com"], html[data-geraet="android"] [data-laden-geraet] .store[href*="apps.apple.com"]{display:none} /* Tag 0 als zweiter, leiserer Weg unter einem Laden-Block (Mitte und Schluss): derselbe Knopf aus start.js, hier umrandet statt gefüllt. */ .st-probe-leise{margin-top:14px} .st-probe-leise .btn{width:100%;max-width:340px;min-height:52px;background:transparent;color:var(--text);border-color:var(--line-strong)} .st-probe-leise .btn:hover{background:rgba(255,255,255,.06);border-color:var(--primary)} .st-probe-leise .pc-start__zeile{margin:7px 0 0;font-size:14px;line-height:1.45;color:var(--muted)} /* ---------- 1 · Kopf ---------- Auf dem Handy der Reihe nach: kleine Zeile, Hauptzeile, «Probier Tag 0 aus», App Store, Google Play, ein Satz zur App. So steht im ersten Bildschirm (Safari 375 × 635) die Hauptzeile, der Chat und der App Store, auch solange unten noch das Zustimmungsband liegt. Am Rechner links Zeile, Satz und Läden, rechts der Chat in seiner Karte, an der Stelle, wo bis heute das bewegte Gerät stand. */ .st-held{padding:16px 0 0;overflow:hidden} .st-held__raster{display:grid;grid-template-columns:minmax(0,1fr); grid-template-areas:"kicker" "titel" "probe" "laden" "beleg" "lead" "bild"} .st-held__text{display:contents} .st-held__kicker{grid-area:kicker;margin:0 0 8px;font-size:14px;font-weight:600;line-height:1.4;color:var(--primary)} .st-held__h{grid-area:titel;margin:0;font-size:clamp(40px,10.6vw,72px);line-height:1.06;text-wrap:balance} .st-held__h .dim{display:block;color:#5f6d6b} /* Der Satz zur Methode steht nur am Rechner. Auf dem Handy hält sich der erste Bildschirm an höchstens 35 Wörter (Konkurrenz-Analyse, Median 33): kleine Zeile, Hauptzeile, Tag 0, Laden-Knopf, Beleg. */ .st-held__lead{grid-area:lead;display:none;margin:14px 0 0;max-width:34em;font-size:16px;line-height:1.55;color:var(--faint)} .st-held__beleg{grid-area:beleg;margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--muted)} /* Das Gerät ragt von unten in den ersten Bildschirm und läuft nach unten aus. Nur transform-freie Darstellung, kein Kippen: auf dem Handy ruhig. */ .st-held__bild{grid-area:bild;height:214px;margin-top:24px;overflow:hidden; -webkit-mask-image:linear-gradient(#000 52%,transparent);mask-image:linear-gradient(#000 52%,transparent)} .st-held__bild .iphone{--pw:min(236px,63vw)} .st-held__lead strong{color:var(--text);font-weight:600} .st-held .st-laden{grid-area:laden;margin-top:12px} .st-held .st-probe{grid-area:probe;margin-top:16px} /* Der Chat. Auf dem Handy nur der Knopf und eine Zeile; die Vorschau mit den ersten zwei Nachrichten steht erst am Rechner, sonst schöbe sie die Läden aus dem ersten Bildschirm. Ohne JavaScript bleibt der ganze Block verborgen (hidden im HTML, assets/probe-chat/start.js nimmt es weg). */ .st-probe[hidden]{display:none} .st-probe__kopf,.st-probe__verlauf{display:none} .st-probe [data-probe-chat] .btn{width:100%;max-width:340px;min-height:56px;font-size:17px} .st-probe .pc-start__zeile{margin:7px 0 0;font-size:14px;line-height:1.45;color:var(--muted)} /* ---------- 2 · Alles in einer App ---------- Die drei Sätze sind das Problem und stehen darum leiser: Zeilen ohne Kasten, Text in faint. Laut ist nur die Antwort darunter, in einer Karte mit dem App-Symbol. */ .st-eins__kopf{margin-bottom:18px} .st-saetze{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)} .st-satz{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center; padding:12px 0;border-bottom:1px solid var(--line)} .st-satz p{margin:0;font-size:17px;line-height:1.45;font-weight:500;color:var(--faint)} .st-kern{margin:20px 0 0;padding:18px;border-radius:var(--r-lg);background:var(--surface); border:1px solid var(--primary-line)} .st-kern__kopf{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center} .st-kern img{width:44px;height:44px;border-radius:12px} .st-kern__h{margin:0;font-size:19px;line-height:1.35;font-weight:800;color:var(--text)} .st-kern__t{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--faint)} .st-eins .st-laden{margin-top:20px} /* ---------- 3 · Was trifft auf dich zu? ---------- Vier Zeilen, je eine Persona. Die ganze Karte ist der Verweis: ein Tabstopp, eine grosse Trefferfläche. Das Symbol steht klein links neben dem Satz. Eluans Idee, es zusätzlich gross in den Hintergrund zu legen, war kurz gebaut und ist wieder weg: auf dem Handy nimmt ein Bild hinter dem Text dem Text Kontrast (Konkurrenz-Analyse, Entscheid 11.10.2026). */ .st-was .st-h2{margin-bottom:22px} .st-was .st-h2 .serif{color:var(--pop)} /* Aufbau der Karte: oben Symbol, Ich-Satz und Pfeil nebeneinander, darunter die Antwort über die ganze Breite. So bleibt dem Text auf 375 Pixeln die volle Zeile, und die Karte wird nicht zum schmalen Turm. */ .st-wahl{display:grid;gap:12px;margin:0;padding:0;list-style:none} .st-wahl__k{position:relative;overflow:hidden;display:grid;grid-template-columns:44px minmax(0,1fr) 30px; grid-template-areas:"sym satz pf" "ant ant ant";column-gap:14px;row-gap:10px;align-items:center; min-height:44px;padding:16px;border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--line-strong);color:inherit;text-decoration:none; transition:border-color .18s,transform .14s var(--ease),background .18s} .st-wahl__k > .st-sym{grid-area:sym} .st-wahl__txt{display:contents} .st-wahl__s{grid-area:satz;position:relative;z-index:1;margin:0;font-size:17.5px;line-height:1.35;font-weight:700;color:var(--text)} .st-wahl__a{grid-area:ant;position:relative;z-index:1;margin:0;font-size:16px;line-height:1.5;color:var(--faint)} .st-wahl__pf{grid-area:pf;position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:99px; border:1px solid var(--line-strong);transition:transform .18s var(--ease),border-color .18s,background .18s} .st-wahl__pf::before{content:"";width:7px;height:7px;border-top:2px solid var(--text);border-right:2px solid var(--text); transform:translateX(-1px) rotate(45deg)} .st-wahl__k .st-sym{position:relative;z-index:1} .st-wahl__k:hover{border-color:var(--primary-line);background:#1e2627} .st-wahl__k:hover .st-wahl__pf{border-color:var(--primary);background:var(--primary-dim);transform:translateX(2px)} .st-wahl__k:active{transform:scale(.99)} .st-wahl__k:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:var(--r-lg)} /* ---------- 3b · Nah dran (12.10.2026) ---------- Ein ruhiger Abschnitt vor dem Schluss: Eluan mit Gesicht, darunter drei Fragen zum Aufklappen und der Datenschutz in einem Satz. Laut ist hier nichts: kein Kasten um Eluan, die Fragen sind Zeilen, der Satz zum Datenschutz steht leise mit Schloss-Symbol. Hauptelement des Abschnitts ist das Gesicht. */ /* Ohne Kasten: direkt unter den vier Persona-Karten sähe eine fünfte Karte aus wie eine weitere Persona. Das Gesicht allein grenzt den Teil ab. */ .st-ich{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start} /* Das Foto ist dasselbe wie auf /gebaut (560 × 560). Im Kreis wird es leicht vergrössert, damit das Gesicht ihn füllt; der Ursprung liegt auf dem Gesicht. */ .st-ich__bild{display:block;width:64px;height:64px;border-radius:50%;overflow:hidden; background:var(--surface2);box-shadow:0 0 0 2px var(--primary-line)} .st-ich__bild img{display:block;width:100%;height:100%;object-fit:cover; transform:scale(1.5);transform-origin:48% 50%} .st-ich__satz{margin:0;font-size:17px;line-height:1.5;font-weight:500;color:var(--text)} .st-ich__wer{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;margin:4px 0 -10px; font-size:16px;line-height:1.4;color:var(--muted)} .st-ich__wer b{font-weight:700;color:var(--muted)} .st-ich__wer a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--primary); font-weight:600;text-decoration:none} .st-ich__wer a::after,.st-frage__los::after{content:"";width:7px;height:7px; border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg); transition:transform .18s var(--ease)} .st-ich__wer a:hover::after,.st-frage__los:hover::after{transform:translateX(2px) rotate(45deg)} .st-ich__wer a:focus-visible,.st-frage__los:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:8px} .st-fragen{margin-top:34px} .st-fragen .st-marke{margin:0 0 6px;line-height:1.4} .st-frage{border-bottom:1px solid var(--line)} .st-fragen .st-marke + .st-frage{border-top:1px solid var(--line)} /* Die ganze Zeile ist der Knopf (mindestens 56 hoch). Der Pfeil rechts ist ein ::after, damit im summary nur der Text steht: so ist er derselbe Schlüssel im Wörterbuch wie die Frage im FAQPage-Block. summary bleibt display:block: ältere Safari-Fassungen zeichnen ein summary mit display:flex nicht als aufklappbare Zeile. */ .st-frage summary{position:relative;display:block;min-height:56px;padding:16px 30px 16px 0; list-style:none;cursor:pointer;font-size:17px;line-height:1.35;font-weight:700;color:var(--text)} .st-frage summary::-webkit-details-marker{display:none} .st-frage summary::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-6px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg);transition:transform .22s var(--ease)} .st-frage[open] summary::after{transform:translateY(4px) rotate(-135deg)} .st-frage summary:hover{color:var(--primary)} .st-frage summary:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:8px} .st-frage p{margin:0 0 16px;max-width:36em;font-size:16px;line-height:1.55;color:var(--faint)} .st-frage__los{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-10px 0 8px; color:var(--primary);font-size:16px;font-weight:600;text-decoration:none} .st-schutz{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;margin-top:22px} .st-schutz p{margin:0;font-size:16px;line-height:1.55;color:var(--faint)} /* Der Verweis steht im Satz. padding-block vergrössert nur die Trefferfläche auf 44 Pixel Höhe, die Zeilen rücken dadurch nicht auseinander. */ .st-schutz a{padding-block:12px;color:var(--text);font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--primary-line); text-underline-offset:3px;text-decoration-thickness:2px} .st-schutz a:hover{text-decoration-color:var(--primary)} /* ---------- 4 · Schluss ---------- Auf dem Handy: links «Quest your way», rechts klein das Gerät mit dem Startbildschirm der App, darunter über die ganze Breite die Läden. */ .st-ende__raster{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"sagen" "holen"} .st-ende__sagen{grid-area:sagen;min-width:0} .st-ende__bild{grid-area:bild;display:none} .st-ende__holen{grid-area:holen} .st-ende__zahlen{margin:14px 0 0;font-size:16px;color:var(--muted)} .st-ende__los{margin:28px 0 12px;font-size:clamp(24px,6.4vw,32px);line-height:1.1} .st-ende .st-laden{margin-top:0;max-width:none} /* ---------- Bewegung: nur bei Wunsch nach Bewegung ---------- */ @media (prefers-reduced-motion:reduce){ .st-laden .store,.st-wahl__k,.st-wahl__pf{transition:none} .st-laden .store:hover,.st-wahl__k:hover,.st-wahl__k:hover .st-wahl__pf{transform:none} .st-frage summary::after,.st-ich__wer a::after,.st-frage__los::after{transition:none} .st-ich__wer a:hover::after,.st-frage__los:hover::after{transform:rotate(45deg)} } /* ---------- Ab 600 Pixeln ---------- */ @media (min-width:600px){ .st-sek{padding:72px 0} .st-wahl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .st-wahl__k{align-content:start;height:100%} } /* ---------- Ab 980 Pixeln: der Rechner ---------- */ @media (min-width:980px){ .st-sek{padding:92px 0} .st-held{padding:56px 0 84px} .st-held__bild{display:none} .st-held__raster{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);column-gap:64px; grid-template-areas:"kicker probe" "titel probe" "lead probe" "laden probe" "beleg probe"; grid-template-rows:auto auto auto auto 1fr;align-items:start} .st-held__h{font-size:clamp(46px,4.9vw,66px)} .st-held__lead{display:block;font-size:19px;margin-top:22px} .st-held .st-laden{margin-top:28px;max-width:300px} .st-held .st-probe{margin-top:0;align-self:center} /* Die Karte des Chats: die ersten zwei Nachrichten von Tag 0, wortgleich aus dem Chat, darunter der Knopf. Ein Tipp irgendwo auf die Karte öffnet ihn. */ .st-probe{position:relative;padding:20px;border-radius:var(--r-xl);background:var(--card); border:1px solid var(--line-strong);box-shadow:var(--shadow);cursor:pointer} .st-probe__kopf{display:flex;align-items:center;gap:12px;padding:2px 2px 16px;border-bottom:1px solid var(--line)} .st-probe__kopf img{width:40px;height:40px;border-radius:11px} .st-probe__kopf b{display:block;font-size:16px;line-height:1.3} .st-probe__kopf span{display:block;font-size:14px;color:var(--muted)} .st-probe__verlauf{display:grid;gap:10px;padding:18px 2px 20px} .st-blase{max-width:86%;margin:0;padding:12px 15px;border-radius:18px 18px 18px 6px; background:var(--surface2);font-size:16px;line-height:1.5;color:var(--text)} .st-blase b{color:var(--gold)} .st-chip{justify-self:start;margin:4px 0 0;padding:8px 16px;border-radius:99px; border:1px solid var(--primary-line);color:var(--primary);font-size:15px;font-weight:600} .st-probe [data-probe-chat] .btn{max-width:none} .st-eins__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px; grid-template-areas:"kopf kopf" "saetze antwort";align-items:start} .st-eins__kopf{grid-area:kopf;margin-bottom:26px} .st-saetze{grid-area:saetze} .st-eins__antwort{grid-area:antwort} .st-kern{margin-top:0;padding:24px} .st-kern__h{font-size:22px} .st-kern__t{font-size:17px} .st-satz{padding:16px 0} .st-satz p{font-size:18px} .st-wahl__s{font-size:20px} .st-wahl__a{font-size:17px} .st-wahl__k{padding:24px 22px} /* 3b: links Eluan, rechts die Fragen und der Datenschutz */ .st-nah__raster{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:72px;align-items:start} .st-ich{grid-template-columns:88px minmax(0,1fr);gap:22px} .st-ich__bild{width:88px;height:88px} .st-ich__satz{font-size:19px} .st-fragen{margin-top:0} .st-frage summary{font-size:19px} .st-frage p,.st-schutz p{font-size:17px} .st-ende__raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:72px; grid-template-areas:"bild sagen" "bild holen";align-items:end} .st-ende__bild{display:block;align-self:center} .st-ende__bild .iphone{--pw:min(260px,22vw)} .st-ende__holen{align-self:start} .st-ende .st-laden{max-width:none} .st-probe-leise .btn{max-width:300px} .st-ende .st-probe-leise .btn{max-width:none} } /* ============================================================================ V2 · NUR AM HANDY (12.10.2026) Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md. Eluan: «Die Seite im Umbau ist viel zu vollgestopft.» Am Handy darum pro Abschnitt höchstens ein Titel, ein Satz und ein Bild oder Element. Reihenfolge am Handy: 1 · Kopf Mitteilung, Hauptzeile, ein Satz, EIN Laden-Knopf, Beleg, darunter eine Hand mit dem iPhone und dem echten App-Bildschirm 2 · Eine App Titel, die drei Sätze als Blasen in einem Handy, die Antwort 3 · Bücher Titel und sieben Karten zum Wischen (neu, nur am Handy) 4 · Was trifft auf dich zu? nur noch die vier Ich-Sätze 5 · 14 Tage nur auf Android (neu, nur am Handy) 6 · Kurz gefragt zwei Fragen zum Aufklappen, ohne «Was ist Tag 0?» 7 · Schluss Symbol, Name, ein Satz, Laden-Knopf Weg am Handy (am Rechner unverändert, nur ausgeblendet): Tag 0 an allen drei Stellen, die kleine Zeile über der Hauptzeile, das nachgebaute Gerät, der lange Satz unter der Antwort, die Laden-Knöpfe in der Mitte, die Antworten unter den Ich-Sätzen, aus «Nah dran» Eluans Foto, die Frage «Was ist Tag 0?» und der Satz zum Datenschutz, und der alte Schluss. Die zwei übrigen Fragen bleiben, weil sie als FAQPage im Kopf stehen und Google die Seite als Handy liest: was dort steht, muss am Handy sichtbar sein. ‼️ Die grosse Grenze: am Rechner und am Tablet (ab 768 Pixeln) ändert sich kein Pixel. Alles hier steht darum unter max-width:767px, und was es nur am Handy gibt, trägt .st-handy und ist darüber hart ausgeblendet. Bewegung nur über transform und opacity. ========================================================================== */ @media (min-width:768px){ /* Seit der Rechner-Fassung (13.10.2026) stehen manche Handy-Teile auch am Rechner: sie tragen zusätzlich .st-auch-rechner (Abschnitt RECHNER am Ende dieser Datei). */ .st-handy:not(.st-auch-rechner){display:none !important} } @media (max-width:767px){ /* ---------- Was am Handy wegfällt ---------- */ .st-held__kicker,.st-held .st-laden,.st-held .st-probe,.st-held__bild, .st-eins .st-marke,.st-kern__t,.st-eins .st-laden,.st-probe-leise, .st-wahl__a,.st-ich,.st-schutz,.st-frage--tag0,.st-ende__sagen,.st-ende__holen{display:none} /* ---------- Die Laden-Knöpfe nach Gerät ---------- Baustein .laden-weiche aus site.css (16b): Aussehen und die Regel, welcher Knopf stehen bleibt, kommen von dort. Hier nur, wo er steht und wie breit er wird: im Kopf über die ganze Spalte, sonst mittig. Stehen beide da (Gerät unbekannt), teilen sie sich die Zeile. */ .st-laden-h{max-width:440px} .st-held .st-laden-h .laden-weiche{justify-content:flex-start} .st-held .st-laden-h .laden-weiche > a{max-width:none} /* Etwas weniger Luft zwischen den Abschnitten: höchstens fünf Bildschirme */ .st-sek{padding:36px 0} /* ---------- 1 · Kopf ---------- */ /* Der Schein oben (.glow--a) reicht hinter die schwebende Pille, wie auf den Warum-Seiten (site.css, 16d). Mit overflow:hidden schnitt der Abschnitt ihn an seiner Oberkante ab, und unter der Pille stand eine harte Kante quer über den Schirm. Seitlich bleibt er abgeschnitten (clip), damit nichts übersteht; ohne clip-Unterstützung gilt visible, und site.css hält die Seite waagrecht ohnehin fest (body overflow-x:hidden). */ .st-held{padding:10px 0 0;overflow:visible;overflow-x:clip} .st-held__raster{grid-template-areas:"mitteilung" "titel" "lead" "ladenh" "beleg" "hand"} /* Etwas mehr Zeilenabstand: sonst berühren die Punkte von «Ä» die Zeile darüber */ .st-held__h{line-height:1.12} .st-held__lead{display:block;margin:14px 0 0;font-size:17px;line-height:1.5;color:var(--faint)} .st-held .st-laden-h{grid-area:ladenh;margin-top:22px} .st-held__beleg{margin-top:14px} /* Die Mitteilung, Vorbild Deepstash. Alle fünf Karten liegen in derselben Zelle übereinander, so ist der Platz so hoch wie die höchste und nichts springt beim Wechsel. Verhalten: assets/js/start-mitteilungen.js */ .st-mitteilung{grid-area:mitteilung;display:grid;width:100%;max-width:460px;min-height:104px;margin:0 0 22px} .st-mitteilung__link{display:grid;color:inherit;text-decoration:none;border-radius:22px;pointer-events:none} .st-mitteilung__karte{grid-area:1/1;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:start; padding:12px 14px 13px 12px;border-radius:22px;background:rgba(40,47,49,.9); border:1px solid rgba(255,255,255,.1); box-shadow:0 16px 36px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3); opacity:0;transform:translateY(-22px) scale(.97);transform-origin:50% 0; transition:opacity .4s var(--ease),transform .62s cubic-bezier(.18,1.25,.4,1)} .st-mitteilung__karte.ist-an{opacity:1;transform:none;pointer-events:auto} .st-mitteilung__karte.ist-weg{opacity:0;transform:translateY(-14px) scale(.98); transition:opacity .28s ease,transform .32s ease} .st-mitteilung__symbol{width:40px;height:40px;border-radius:10px;margin-top:1px} .st-mitteilung__text{display:grid;min-width:0} .st-mitteilung__kopf{display:flex;justify-content:space-between;gap:10px;font-size:13px;line-height:18px;font-weight:500;color:#aeb9b6} .st-mitteilung__titel{margin-top:1px;font-size:16px;line-height:21px;font-weight:700;color:#fff} .st-mitteilung__zeile{font-size:16px;line-height:21px;color:#d9e1df} .st-mitteilung__link:focus-visible{outline:3px solid var(--primary);outline-offset:3px} /* Eine Hand hält das iPhone mit dem echten App-Bildschirm (Bild von Eluan). Die Mitte des Geräts liegt bei 34,3 Prozent der Bildbreite: so steht das Gerät mittig, und die Hand läuft rechts aus dem Bildschirm, statt an einer unsichtbaren Bildkante abzubrechen (seitlich schneidet .st-held ab). Breite und Höhe folgen allein aus width/height im HTML, nichts wird gestaucht. Der Schein dahinter hebt die schwarze Hand vom dunklen Grund ab. */ .st-hand{--hw:clamp(300px,100vw,430px);grid-area:hand;position:relative;margin:26px 0 0} .st-hand::before{content:"";position:absolute;left:50%;top:6%;width:calc(var(--hw) * .86);height:calc(var(--hw) * .9); transform:translateX(-46%);border-radius:50%;z-index:-1; background:radial-gradient(closest-side,rgba(95,181,171,.26),rgba(95,181,171,.08) 62%,rgba(95,181,171,0))} .st-hand__bild{display:block;width:var(--hw);max-width:none;height:auto;margin-left:calc(50% - var(--hw) * .343)} html[lang="en"] .st-hand__bild--de,html:not([lang="en"]) .st-hand__bild--en{display:none} /* ---------- 2 · Alles in einer App ---------- Vorbild Rosebud: oben ein Handy, das das Problem zeigt. Die drei Sätze stehen als Blasen darin, das Gerät läuft unten aus dem Bild. Darunter die Antwort als Karte mit Symbol und einem Satz. */ .st-eins__kopf{margin-bottom:24px} .st-saetze{position:relative;display:grid;gap:12px;max-width:420px;margin:0 auto;padding:48px 14px 30px; border:7px solid transparent;border-bottom:0;border-radius:44px 44px 0 0; background:linear-gradient(180deg,#182021,#121718) padding-box, linear-gradient(118deg,#ffdcc2 0%,#f0ab77 6%,#c2622c 17%,#8f3f16 27%,#f3bd92 38%,#d98a4e 47%,#7d3610 58%,#f7cba6 70%,#c96a33 82%,#8a3d14 92%,#ffdcc2 100%) border-box; box-shadow:inset 0 0 0 2px #06080a; -webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)} .st-saetze::before{content:"";position:absolute;top:13px;left:50%;width:84px;height:24px;margin-left:-42px; border-radius:99px;background:#000} .st-satz{grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:end;padding:0;border:0} .st-satz .st-sym{width:36px;height:36px;border-radius:50%} .st-satz .st-sym svg{width:19px;height:19px} .st-satz p{padding:10px 14px 11px;border-radius:18px 18px 18px 6px;background:#2a3335; font-size:16px;line-height:1.42;font-weight:500;color:#e6edeb} .st-kern{max-width:440px;margin:22px auto 0;padding:16px} .st-kern__h{font-size:19px} /* ---------- 4 · Was trifft auf dich zu? ---------- Nur noch Symbol, Ich-Satz und Pfeil. Die Antwort steht auf der Warum-Seite. */ .st-was .st-h2{margin-bottom:18px} .st-wahl{gap:8px} .st-wahl__k{grid-template-areas:"sym satz pf";row-gap:0;padding:10px 14px} .st-wahl__s{font-size:17px} /* ---------- 5 · 14 Tage, nur Android ---------- Vorbild Duolingo: Kreis oben, ein Satz, der Knopf. Sichtbar nur mit html[data-geraet="android"] oder wenn start-testphase.js ihn freischaltet. */ .st-probezeit{display:none;text-align:center} html[data-geraet="android"] .st-probezeit,.st-probezeit[data-frei]{display:block} .st-probezeit__ring{position:relative;display:grid;place-content:center;justify-items:center;width:116px;height:116px; margin:0 auto 18px;border-radius:50%;background:radial-gradient(closest-side,rgba(95,181,171,.2),rgba(95,181,171,0))} .st-probezeit__ring::before{content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 200deg,var(--gold),var(--primary) 55%,var(--gold)); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px)); mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px))} .st-probezeit__ring b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:52px;line-height:1;color:#fff} .st-probezeit__ring span{margin-top:2px;font-size:14px;line-height:1;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)} .st-probezeit__satz{max-width:19em;margin:0 auto 22px;font-size:19px;line-height:1.4;font-weight:700;color:var(--text);text-wrap:balance} /* ---------- 6 · Kurz gefragt ---------- Nur die zwei Fragen, die als FAQPage im Kopf stehen, zugeklappt. */ .st-fragen{margin-top:0} .st-frage--tag0 + .st-frage{border-top:1px solid var(--line)} /* ---------- 7 · Schluss, Vorbild Daylio ---------- */ .st-ende__raster{grid-template-areas:"schluss"} .st-schluss{grid-area:schluss;display:grid;justify-items:center;text-align:center} .st-schluss__symbol{width:80px;height:80px;border-radius:20px; box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)} .st-schluss__name{margin-top:16px;font-size:30px;line-height:1.1;font-weight:800;color:var(--text)} .st-schluss__name i{font-style:normal;color:var(--primary)} .st-schluss__satz{margin-top:8px;font-size:19px;line-height:1.4;color:var(--faint)} .st-schluss__satz .serif{font-size:1.12em;color:var(--text)} .st-schluss .st-laden-h{width:100%;margin:24px auto 0} } /* Breite Handys quer und kleine Tablets: ab 560 Pixeln endet das Hand-Bild vor dem rechten Rand. Dort läuft die Hand weich aus statt an der Bildkante. */ @media (min-width:560px) and (max-width:767px){ .st-hand__bild{-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 99%);mask-image:linear-gradient(90deg,#000 72%,transparent 99%)} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ .st-mitteilung__karte,.st-mitteilung__karte.ist-weg{transition:none} } /* ============================================================================ V2 RUNDE 2 · BLÄTTERN AM HANDY (12.10.2026 abends) Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 13, 16 und 17. Eluan: «Die Startseite allein soll das ganze Bild geben», je ein Bildschirm pro Thema, «Der Anfang ist zu voll»: Platz lassen, sauber, luxuriös. Die Seite trägt , jeder Abschnitt .bildschirm (Mechanik in site.css 17a: Einrasten, Höhe 100svh, oben 72 Pixel frei für die Pille, Inhalt senkrecht mittig). Hier nur, wie jeder Bildschirm innen aussieht. Reihenfolge am Handy, je genau ein Bildschirm: 1 · Ankommen Mitteilung oben, Hauptzeile, ein Satz, Laden-Knopf 2 · Übersicht die Hand mit dem iPhone (Home), darunter die Belegzeile 3 · Problem «Einzeln bringt es wenig», die drei Sätze im Handy 4 · Antwort Symbol und «Darum steckt bei Go & Grow alles in einer App.» 5 · Bücher Titel und Karten zum Wischen 6 · Was trifft auf dich zu? vier Ich-Sätze 7 · 14 Tage nur Android 8 · Kurz gefragt zwei Fragen, der Satz zum Datenschutz 9 · Schluss Symbol, Name, Satz, Laden-Knopf danach rastet die Fusszeile ein. Gemessen bei 402 × 732 (iPhone 17 in Safari) und 375 × 667: kein Bildschirm läuft über (docs/umbau-handy/v2/pruefen-blaettern.mjs). Am Rechner ändert sich nichts: alles unter 767 Pixeln, die neuen Teile tragen .st-handy, die neue Hülle st-eins__problem ist ab 768 Pixeln display:contents. Bewegung nur über transform und opacity. ========================================================================== */ @media (min-width:768px){ .st-eins__problem{display:contents} } @media (max-width:767px){ /* Die Bildschirme stossen ohne Linie aneinander: das Einrasten trennt sie */ .st-sek + .st-sek{border-top:0} /* ---------- 1 · Ankommen ---------- Die Mitteilung steht oben wie eine echte Mitteilung unter der Insel. Hauptzeile, Satz und Laden-Knopf stehen darunter frei, etwas über der Mitte. Unten bleibt Luft: dort liegt beim ersten Besuch das Zustimmungsband (rund 115 Pixel), und es verdeckt nichts davon. */ html.blaettern .st-held{display:grid;grid-template-rows:minmax(0,1fr);align-content:stretch} .st-held__raster{grid-template-rows:auto minmax(20px,1fr) auto auto auto minmax(40px,1.6fr); grid-template-areas:"mitteilung" "." "titel" "lead" "ladenh" "."} .st-mitteilung{margin:0} .st-held__beleg{display:none} .st-held__lead{margin-top:16px} .st-held .st-laden-h{margin-top:28px} /* ---------- 2 · Übersicht ---------- Das Gerät so gross, wie der Bildschirm hergibt: Breite aus der Höhe (Bild 800 × 914), höchstens 122 Prozent der Breite. Die Hand läuft rechts aus dem Bildschirm, seitlich schneidet der Abschnitt ab. */ html.blaettern .st-uebersicht{overflow:visible;overflow-x:clip} .st-uebersicht .st-hand{margin:0; --hw:clamp(300px,min(122vw,(100vh - 172px) * .875),560px); --hw:clamp(300px,min(122vw,(100svh - 172px) * .875),560px)} .st-uebersicht__beleg{margin:12px 0 0;text-align:center;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:balance} /* ---------- 3 und 4 · Eine App, zwei Bildschirme ---------- Erst das Problem: Titel und die drei Sätze im Handy. Dann die Antwort für sich, mittig: das Symbol der App und der eine Satz, gross und ohne Kasten. Die Abschnitts-Hülle hat dafür keinen eigenen Rand mehr; die zwei Bildschirme sind st-eins__problem und st-eins__antwort. Die Blasen stehen ohne Zeichen daneben: ruhiger, und der Bildschirm wird nicht voll. */ html.blaettern .st-eins{padding-block:0} .st-eins__kopf{margin-bottom:26px} .st-eins__antwort{text-align:center} .st-kern{max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0} .st-kern__kopf{grid-template-columns:minmax(0,1fr);justify-items:center;gap:26px} .st-kern img{width:76px;height:76px;border-radius:19px; box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)} /* Breite so, dass «Go & Grow» nie getrennt wird (gemessen bei 375, 402 und 430): deutsch drei Zeilen, englisch zwei. */ .st-kern__h{max-width:10em;font-size:clamp(28px,8vw,34px);line-height:1.2;font-weight:800;text-wrap:balance} html[lang="en"] .st-kern__h{max-width:none} /* Das Gerät läuft nur noch auf den letzten 36 Pixeln aus, unter der letzten Blase: vorher verblasste deren letzte Zeile mit. */ .st-saetze{gap:10px;padding:46px 16px 36px; -webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)} .st-satz{grid-template-columns:minmax(0,1fr)} .st-satz .st-sym{display:none} .st-satz p{justify-self:start;max-width:94%} /* ---------- 5 · Was trifft auf dich zu? ---------- */ .st-was .st-h2{margin-bottom:24px} .st-wahl{gap:10px} .st-wahl__k{padding:14px 16px} /* ---------- 8 · Kurz gefragt ---------- Der Bildschirm bekommt einen Titel wie die anderen: «Kurz gefragt» in der Schrift der Titel statt als kleine Marke. Die Fragen etwas grösser. Darunter steht am Handy wieder der eine Satz zum Datenschutz (in V2 am Handy ausgeblendet, weil der Abschnitt zu voll war): mit eigenem Bildschirm ist Platz dafür, und er gehört zum ganzen Bild. */ .st-fragen .st-marke{margin:0 0 22px;font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400; font-size:clamp(32px,8.8vw,54px);line-height:1.04;letter-spacing:.005em;color:var(--text)} .st-frage summary{min-height:64px;padding:20px 34px 20px 0;font-size:19px} .st-frage p{font-size:17px} .st-schutz{display:grid;margin-top:30px} /* ---------- 9 · Schluss ---------- */ .st-schluss__symbol{width:88px;height:88px;border-radius:22px} .st-schluss__name{margin-top:20px} .st-schluss .st-laden-h{margin-top:30px} } /* ============================================================================ V2 RUNDE 3 · JEDER BILDSCHIRM MIT BILD (12.10.2026 abends) Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 19 bis 24, und Eluans Nachtrag. Sein Urteil zu Runde 2: das Blättern «sieht sehr gut aus», die Bildschirme aber «sehr mager, null überzeugend, null visuell». Massstab ist die Rechner-Fassung. Darum hat jeder Bildschirm jetzt ein starkes Element und eine klare Aussage, nicht nur Text: 1 · Ankommen Mitteilung, Hauptzeile, Laden-Knopf (gross fürs eigene Gerät, klein der andere Laden), darunter links der Satz und drei grosse Zahlen, rechts die Hand mit dem iPhone 2 · Eine App Frage und Antwort auf EINEM Bildschirm: die drei Sätze kommen im Handy als Nachrichten herein, darunter die Antwort mit dem Symbol und den drei Bereichen der App 3 · Bücher Titel, woher die Quests kommen, Karten wie Bücher, Pfeile und Punkte; beim Einrasten fächern sich die Karten auf 4 · Was trifft auf dich zu? vier Karten, jedes Zeichen in seiner Farbe 5 · 14 Tage nur Android, unverändert 6 · Schluss unverändert, darunter klein die Fusszeile (site.css 17d) «Kurz gefragt» fällt am Handy weg (Punkt 23). Bewegung (assets/js/start-bewegung.js) nur über transform und opacity, nur Kiesel-Werte (kurz 200, mittel 250, lang 350 ms, Staffel 40 ms, Takt 1200 ms, kurve-standard 0.25, 0.1, 0.25, 1), nur wo sie etwas zeigt, abgespielt beim Einrasten; bei reduzierter Bewegung steht alles sofort da. Am Rechner ändert sich nichts: alles hier steht unter max-width:767px, die neuen Teile tragen .st-handy. ========================================================================== */ @media (max-width:767px){ /* ---------- 1 · Ankommen ---------- Oben über die ganze Breite Mitteilung, Hauptzeile und Laden-Knopf. Darunter zwei Spalten bis zum unteren Rand: links der Satz und die drei Zahlen, rechts die Hand mit dem iPhone. Das Gerät steht ganz im Bild, mit allen vier Ecken; nur die Hand läuft rechts und unten weich aus. --hand-b ist die Spalte der Hand ohne den rechten Rand (dorthin reicht das Bild noch). Das Bild liegt absolut in seiner Zelle, damit seine Höhe die Zeile nicht aufbläht: so bleibt der Bildschirm genau 100svh hoch. */ .st-held__raster{--hand-b:clamp(150px,calc(100vw - 214px),46vw);grid-template-columns:minmax(0,1fr) var(--hand-b);column-gap:10px; grid-template-rows:auto auto auto auto minmax(0,1fr); grid-template-areas:"mitteilung mitteilung" "titel titel" "ladenh ladenh" "lead hand" "zahlen hand"} .st-mitteilung{margin:0 0 14px} .st-held .st-laden-h{grid-area:ladenh;max-width:none;margin-top:18px} .st-held__lead{grid-area:lead;align-self:start;margin:16px 0 0;font-size:17px;line-height:1.45;color:var(--faint)} .st-auftakt{display:contents} /* Die drei Zahlen: wortgleich die freigegebene Belegzeile, die Zahl gross in der Schrift der Titel. Ein Strich in der Farbe einer Phase gibt jeder Zahl ihre Form. */ .st-zahlen{grid-area:zahlen;align-self:start;display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none} .st-zahlen li{display:flex;align-items:baseline;gap:8px;padding-left:9px;border-left:3px solid var(--gold)} .st-zahlen li:nth-child(2){border-left-color:var(--primary)} .st-zahlen li:nth-child(3){border-left-color:#a87fd6} .st-zahlen b{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:25px;line-height:1.1;color:var(--text);letter-spacing:.01em} .st-zahlen span{font-size:16px;line-height:1.3;color:var(--muted);white-space:nowrap} /* Die Hand: unten bis an den Rand des Bildschirms (über den Innenabstand unten hinaus), rechts bis an den Rand der Seite. Höhe aus der Zelle, höchstens so hoch, dass das Gerät (rund 60 Prozent der Bildhöhe breit) ganz in die Spalte passt. Der Schein dahinter hebt die schwarze Hand vom dunklen Grund ab. */ .st-auftakt .st-hand{grid-area:hand;position:relative;margin:14px calc(var(--pad) * -1) calc(var(--blatt-unten, 24px) * -1) 0} .st-auftakt .st-hand::before{left:4%;top:8%;width:118%;height:86%;transform:none} .st-auftakt .st-hand__bild{position:absolute;left:0;bottom:0;width:auto;max-width:none;height:100%;margin:0; max-height:calc((var(--hand-b) + var(--pad) - 10px) / .604); -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 98%);mask-image:linear-gradient(90deg,#000 70%,transparent 98%)} /* Die Mitteilung kommt herein wie im Kiesel-Katalog Nr. 27 «Nachricht kommt an»: opacity und 8 Pixel, scale 0.96 zu 1, 250 ms, kurve-standard, ohne Nachschwingen. Sie geht in 200 ms. */ .st-mitteilung__karte{transform:translateY(-8px) scale(.96); transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .25s cubic-bezier(.25,.1,.25,1)} .st-mitteilung__karte.ist-weg{opacity:0;transform:scale(.96); transition:opacity .2s cubic-bezier(.25,.1,.25,1),transform .2s cubic-bezier(.25,.1,.25,1)} /* ---------- 2 · Einzeln bringt es wenig, und die Antwort ---------- Seit Runde 3 wieder ein Bildschirm (Punkt 20): der Abschnitt selbst ist der Bildschirm. Runde 2 hatte ihm den Innenabstand genommen, weil damals seine zwei Hüllen die Bildschirme waren; hier bekommt er ihn zurück. */ html.blaettern .st-eins.bildschirm{padding-top:var(--blatt-oben);padding-bottom:var(--blatt-unten)} .st-eins__kopf{margin-bottom:18px} .st-saetze{gap:10px;padding:44px 14px 30px} /* Jede Nachricht hat links ihr Zeichen als kleines Bild des Absenders, in der Farbe des Bereichs, der sie in der Antwort darunter auffängt (Habits gold, Journal lila, Quests aus Büchern türkis). */ .st-satz{grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:end} .st-satz .st-sym{display:grid;width:30px;height:30px;border-radius:50%;background:rgba(224,185,74,.16);color:var(--gold)} .st-satz:nth-child(2) .st-sym{background:rgba(168,127,214,.18);color:#c3a4ea} .st-satz:nth-child(3) .st-sym{background:var(--primary-dim);color:var(--primary)} .st-satz .st-sym svg{width:16px;height:16px} .st-satz p{max-width:none;justify-self:start} .st-eins__antwort{text-align:left;margin-top:18px} .st-kern__kopf{grid-template-columns:56px minmax(0,1fr);justify-items:start;align-items:center;gap:14px} .st-kern img{width:56px;height:56px;border-radius:15px} .st-kern__h{max-width:none;font-size:20px;line-height:1.3} html[lang="en"] .st-kern__h{max-width:none} /* Die drei Bereiche, die die Antwort zusammenbringt: je das Zeichen ihrer Nachricht oben, in einer Phasenfarbe. */ .st-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none} .st-drei li{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 8px;border-radius:14px; background:var(--surface);border:1px solid var(--line-strong);font-size:15px;font-weight:700;color:var(--text)} .st-drei__sym{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none; background:rgba(224,185,74,.16);color:var(--gold)} .st-drei li:nth-child(2) .st-drei__sym{background:rgba(168,127,214,.18);color:#c3a4ea} .st-drei li:nth-child(3) .st-drei__sym{background:var(--primary-dim);color:var(--primary)} .st-drei__sym svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* Die Nachrichten im Handy (Kiesel-Katalog Nr. 27 «Nachricht kommt an»). Solange der Bildschirm noch nicht eingerastet ist, warten die Blasen unsichtbar (data-nachrichten="warte", nur mit Skript und ohne Wunsch nach weniger Bewegung). Dann zeigt sich die Tippen-Anzeige, die drei Punkte laufen einen Takt, und die Nachrichten kommen nacheinander. */ .st-saetze[data-nachrichten] .st-satz{transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .25s cubic-bezier(.25,.1,.25,1);transform-origin:0 100%} .st-saetze[data-nachrichten="warte"] .st-satz:not(.ist-da){opacity:0;transform:translateY(8px) scale(.96)} .st-tippt{position:absolute;left:14px;top:44px;display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 16px; border-radius:18px 18px 18px 6px;background:#2a3335;opacity:0;transform:translateY(8px) scale(.96);transform-origin:0 100%; transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .25s cubic-bezier(.25,.1,.25,1);pointer-events:none} .st-tippt.ist-da{opacity:1;transform:none} .st-tippt.ist-weg{opacity:0;transform:scale(.96);transition-duration:.2s} .st-tippt i{width:8px;height:8px;border-radius:50%;background:#aeb9b6;opacity:.35} .st-tippt.ist-da i{animation:st-tippt-punkt 1.2s cubic-bezier(.25,.1,.25,1) 1 both} .st-tippt.ist-da i:nth-child(2){animation-delay:.15s} .st-tippt.ist-da i:nth-child(3){animation-delay:.3s} /* ---------- 4 · Was trifft auf dich zu? ---------- Jedes Zeichen in einer eigenen Phasenfarbe, wie die Skills in der App: so stehen vier verschiedene Menschen da, nicht vier gleiche Zeilen. */ .st-was .st-h2{margin-bottom:10px} .st-was__tipp{margin:0 0 20px;font-size:16px;line-height:1.45;color:var(--faint)} .st-wahl__k{grid-template-columns:48px minmax(0,1fr) 30px;min-height:76px;padding:14px 16px} .st-wahl__k > .st-sym{width:48px;height:48px;border-radius:15px} .st-wahl li:nth-child(1) .st-sym{background:rgba(224,185,74,.16);color:var(--gold)} .st-wahl li:nth-child(2) .st-sym{background:rgba(168,127,214,.18);color:#c3a4ea} .st-wahl li:nth-child(3) .st-sym{background:rgba(90,160,224,.17);color:#7db6ea} .st-wahl li:nth-child(4) .st-sym{background:rgba(255,138,61,.15);color:var(--pop)} /* Ein Hauch derselben Farbe am linken Rand jeder Karte */ .st-wahl li .st-wahl__k{background:linear-gradient(90deg,rgba(224,185,74,.09),rgba(224,185,74,0) 46%),var(--surface)} .st-wahl li:nth-child(2) .st-wahl__k{background:linear-gradient(90deg,rgba(168,127,214,.11),rgba(168,127,214,0) 46%),var(--surface)} .st-wahl li:nth-child(3) .st-wahl__k{background:linear-gradient(90deg,rgba(90,160,224,.10),rgba(90,160,224,0) 46%),var(--surface)} .st-wahl li:nth-child(4) .st-wahl__k{background:linear-gradient(90deg,rgba(255,138,61,.09),rgba(255,138,61,0) 46%),var(--surface)} /* ---------- 5 · 14 Tage, nur Android ---------- Der Kreis grösser, darunter die 14 Tage als zwei Wochen zu je sieben Punkten (wie die Serie in der App), gold wie die Belohnung. */ .st-probezeit__ring{width:150px;height:150px;margin-bottom:20px} .st-probezeit__ring b{font-size:68px} .st-probezeit__raster{display:grid;grid-template-columns:repeat(7,14px);gap:9px;justify-content:center;margin:0 auto 24px} .st-probezeit__raster i{width:14px;height:14px;border-radius:5px;background:var(--gold)} .st-probezeit__raster i:nth-child(n+8){background:var(--primary)} /* ---------- Kurz gefragt fällt am Handy weg (Punkt 23) ---------- */ .st-nah{display:none} } @keyframes st-tippt-punkt{0%,100%{opacity:.35}50%{opacity:1}} /* Weniger Bewegung: alles steht sofort da (das Skript setzt dann auch keinen Wartezustand und keinen Stapel) */ @media (max-width:767px) and (prefers-reduced-motion:reduce){ .st-saetze[data-nachrichten] .st-satz,.st-tippt{transition:none} .st-tippt.ist-da i{animation:none} } /* ============================================================================ V2 RUNDE 4 · STARTSEITE (13.10.2026) Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 27 bis 32. Wie die Runden davor nur unter 768 Pixeln; am Rechner ändert sich nichts. 1 · Ankommen Mitteilung ohne «Go & Grow · jetzt», schmaler und leiser (Punkt 28); die Laden-Knöpfe ganz unten, Baustein .laden-weiche--reihe (Punkte 27 und 29, site.css 18a) 2 · Eine App «Alles in einer App. Optimiert für Erfolg.» (Punkt 30, nur Text, im HTML) 3 · Bücher statt der Bücher zum Wischen die Karte von Skill 1 wie am Rechner auf /funktionen, darunter «16 weitere Skills warten auf dich.» (Punkt 31) 6 · Schluss Laden-Knöpfe in der Grundform (Punkt 32, nur HTML/site.css) Bewegung nur über transform und opacity. ========================================================================== */ @media (max-width:767px){ /* ---------- 1 · Ankommen ---------- Oben Mitteilung und Hauptzeile über die ganze Breite, darunter links der Satz und die drei Zahlen, rechts die Hand mit dem iPhone, ganz unten die Laden-Knöpfe. Die Hand endet über den Knöpfen und läuft nach unten und rechts weich aus; das Gerät steht mit allen vier Ecken im Bild. */ .st-held__raster{grid-template-rows:auto auto auto minmax(0,1fr) auto; grid-template-areas:"mitteilung mitteilung" "titel titel" "lead hand" "zahlen hand" "ladenh ladenh"} .st-held .st-laden-h{grid-area:ladenh;max-width:none;margin-top:16px} .st-auftakt .st-hand{margin:4px calc(var(--pad) * -1) 0 0} .st-auftakt .st-hand__bild{ -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 98%),linear-gradient(180deg,#000 88%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,#000 70%,transparent 98%),linear-gradient(180deg,#000 88%,transparent 100%); mask-composite:intersect} /* Die Mitteilung (Punkt 28, Eluans Bild: «erdrückend»): ohne die Zeile «Go & Grow · jetzt» (start-mitteilungen.js), Titel und Zeile 15 statt 16 Pixel, das Symbol mittig daneben. Oben 8 Pixel mehr Luft zur Pille, unten 26 statt 14 zur Hauptzeile. */ .st-mitteilung{min-height:0;margin:8px 0 26px} .st-mitteilung__karte{grid-template-columns:38px minmax(0,1fr);column-gap:12px;align-items:center; padding:11px 16px 12px 11px;border-radius:20px; box-shadow:0 12px 28px rgba(0,0,0,.36),0 2px 6px rgba(0,0,0,.26)} .st-mitteilung__symbol{width:38px;height:38px;border-radius:9px;margin-top:0} .st-mitteilung__titel{margin-top:0;font-size:15px;line-height:20px} .st-mitteilung__zeile{font-size:15px;line-height:20px} /* Beim ersten Besuch liegt unten das Zustimmungsband (site.css 17b, rund 104 Pixel hoch, 10 über dem Rand). Es darf auf dem ersten Bildschirm nichts Wichtiges verdecken (Punkt 14): solange es offen ist, stehen die Laden-Knöpfe darüber, die Hand wird dafür kleiner. Nach der Wahl rücken sie wieder ganz nach unten. */ html.blaettern body:has(> .zust) .st-held.bildschirm{padding-bottom:calc(var(--blatt-unten) + 100px)} /* ---------- 3 · Bücher: die Karte von Skill 1 ---------- Eigene Kopie der Skill-Karte von /funktionen am Rechner (site.css, .skill, .karu, .buch, .karu__l), für das Handy grösser gesetzt: Nummer in der Farbe der Phase, Name, ein Satz, blass dahinter das Zeichen des Skills, unten das Karussell mit drei Büchern auf drei Plätzen (vorne das Buch der Woche, links und rechts gedreht und gedimmt) und darunter Woche und Titel. Gedimmt wird nur über opacity (am Rechner zusätzlich brightness), damit sich nur transform und opacity bewegen. */ .st-buecher .st-h2{font-size:clamp(28px,7.6vw,38px);line-height:1.08;margin-bottom:22px} .st-skill{--tint:#5fb5ab;position:relative;overflow:hidden;display:flex;flex-direction:column; padding:22px 22px 16px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line-strong)} .st-skill__bg{position:absolute;right:-36px;top:-34px;line-height:0;pointer-events:none;opacity:.075} .st-skill__bg svg{width:180px;height:180px;fill:none;stroke:var(--tint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .st-skill__n{position:relative;margin:0 0 6px;font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:14px;line-height:1.2; letter-spacing:.14em;color:var(--tint)} .st-skill__h{position:relative;margin:0 0 6px;font-size:24px;line-height:1.2;font-weight:700;color:var(--text)} .st-skill__s{position:relative;margin:0;max-width:17em;font-size:17px;line-height:1.5;color:var(--muted)} .st-skill__karu{position:relative;display:block;height:146px;margin:16px -6px 0;perspective:900px;transform-style:preserve-3d; border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent} .st-skill__karu:focus-visible{outline:3px solid var(--primary);outline-offset:2px} .st-skill__buch{position:absolute;top:8px;left:50%;display:grid;place-items:center;width:86px;height:118px; border-radius:4px 10px 10px 4px; background:linear-gradient(120deg,#2b3435 0%,#1d2425 55%,#161c1d 100%); box-shadow:inset 9px 0 0 rgba(0,0,0,.45),inset 11px 0 0 rgba(95,181,171,.55),0 14px 26px rgba(0,0,0,.55); transition:transform .62s var(--ease),opacity .5s ease;will-change:transform} .st-skill__buch em{padding-left:12px;font-family:'Anton',Impact,sans-serif;font-style:normal;font-size:36px;line-height:1; color:var(--tint);transition:opacity .4s ease} .st-skill__buch[data-p="1"]{transform:translate(-50%,0) translateZ(60px);opacity:1;z-index:3} .st-skill__buch[data-p="0"]{transform:translate(calc(-50% - 74px),12px) rotateY(48deg) scale(.84);opacity:.5;z-index:2} .st-skill__buch[data-p="2"]{transform:translate(calc(-50% + 74px),12px) rotateY(-48deg) scale(.84);opacity:.5;z-index:2} .st-skill__buch[data-p="0"] em,.st-skill__buch[data-p="2"] em{opacity:0} .st-skill__l{margin:10px 0 0;min-height:46px;text-align:center} .st-skill__l span{display:block;font-size:12px;line-height:1.3;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--tint)} .st-skill__l b{display:block;margin-top:4px;font-size:17px;line-height:1.3;font-weight:600;color:#dfe7e5} .st-skill__l.ist-neu{animation:st-schild .3s cubic-bezier(.2,.7,.3,1)} /* Der Weg zu den anderen 16 Skills (/funktionen#skills) */ .st-mehr{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:12px; color:var(--primary);font-size:17px;line-height:1.3;font-weight:600;text-decoration:none} .st-mehr::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor; transform:rotate(45deg);transition:transform .18s var(--ease)} .st-mehr:active::after{transform:translateX(2px) rotate(45deg)} .st-mehr:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:8px} } @media (max-width:767px) and (hover:hover){ .st-mehr:hover{color:#7fd0c6} .st-mehr:hover::after{transform:translateX(2px) rotate(45deg)} } @keyframes st-schild{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (max-width:767px) and (prefers-reduced-motion:reduce){ .st-skill__buch,.st-skill__buch em,.st-mehr::after{transition:none} .st-skill__l.ist-neu{animation:none} } /* Kleine Bildschirme (375 × 667) mit offenem Zustimmungsband: für Satz, Zahlen, Hand und Knöpfe über dem Band reicht die Höhe nicht. Bis zur Wahl fehlen dort die drei Zahlen; danach stehen sie wieder da. */ @media (max-width:767px) and (max-height:700px){ html.blaettern body:has(> .zust) .st-held .st-zahlen{display:none} } /* ============================================================================ 14 TAGE · HAUPTSATZ UND BEDINGUNG (13.10.2026, Eluans Nachtrag) Oben kurz «Teste jetzt die App 14 Tage kostenlos.», darunter klein und leise die Bedingung «Im Jahresabo bei Google Play.». Nur am Handy, nur Android (der Block selbst, siehe V2 · 5 oben). ========================================================================== */ @media (max-width:767px){ .st-probezeit__satz{margin-bottom:8px} .st-probezeit__bed{max-width:22em;margin:0 auto 22px;font-size:14px;line-height:1.45;color:var(--muted)} } /* ============================================================================ RECHNER · STARTSEITE AB 768 PIXELN (13.10.2026) Auftrag: docs/umbau-handy/DESKTOP-2026-10-13.md. Am Rechner erzählt die Startseite dieselbe Geschichte in derselben Reihenfolge wie am Handy, mit derselben Klarheit; die Breite nutzt sie für zwei Spalten: 1 · Ankommen links Mitteilung, Hauptzeile, ein Satz, beide Laden- Knöpfe, Belegzeile; rechts gross die Hand mit dem iPhone, die von unten ins Bild ragt 2 · Eine App links das Handy, in dem die drei Sätze als Nachrichten ankommen; rechts «Einzeln bringt es wenig.» und die Antwort «Alles in einer App. Optimiert für Erfolg.» 3 · Skill 1 links der Titel und «16 weitere Skills warten auf dich.», rechts die Karte von Skill 1 mit den drei Büchern 4 · Was trifft auf dich zu? vier Karten mit den Ich-Sätzen, 2 × 2 5 · Schluss Symbol, Name, ein Satz, beide Laden-Knöpfe, mittig Jeder Bereich ist genau einen Bildschirm hoch (ohne Kopfleiste), mit einem starken Hauptelement, kompakt und mittig. Seit Runde 2 am Rechner (13.10.2026) hakt die Seite bei jedem Bereich ein: eine Geste mit Mausrad oder Trackpad, ein Pfeil, Bild ab/auf oder die Leertaste, ein Bereich weiter (site.css 17e, assets/js/blaettern.js e). Was es am Rechner bisher zusätzlich gab (Probe-Chat «Probier Tag 0 aus», «Kurz gefragt», Eluans Foto, der alte Schluss mit Gerät, die lange Antwort und die Antworten unter den Ich-Sätzen) ist hier nur ausgeblendet, nicht gelöscht. Runde 2 dazu: der 14-Tage-Block zwischen «Was trifft auf dich zu?» und dem Schluss, mit dem Google-Play-Knopf (Abschnitt «4b» unten). Die Handy-Teile, die hier wieder auftauchen, tragen .st-auch-rechner; ihr Handy-Aussehen steht in den Blöcken darüber (nur unter 768 Pixeln), hier ist es für den Rechner neu gesetzt. Unter 768 Pixeln ändert dieser Abschnitt nichts. Bewegung nur über transform und opacity, dieselben Animationen wie am Handy (Mitteilung, Nachrichten im Handy, Bücher), bei weniger Bewegung steht alles still. ========================================================================== */ @media (min-width:768px){ /* ---------- Gemeinsam ---------- */ /* Ein Bildschirm ohne Kopfleiste; die Titel wachsen mit der Fensterhöhe, damit ein grosser Bildschirm nicht leer und ein kleiner nicht voll wirkt. */ /* --blatt-kopf: die Kopfleiste mit ihrem Rand (site.css 17e) */ #inhalt{--st-hoehe:calc(100vh - var(--blatt-kopf, calc(var(--nav-h) + 1px))); --st-h2:clamp(40px,min(4.6vw,7.4vh),80px); --st-luft:clamp(40px,7vh,96px)} .st-sek{padding:0} .st-sek + .st-sek{border-top:0} .st-held,.st-eins,.st-buecher,.st-was,.st-probezeit{min-height:var(--st-hoehe)} .st-eins,.st-buecher,.st-was,.st-probezeit,.st-ende{display:grid;align-content:center;padding-block:var(--st-luft)} /* Zeilenabstand 1.14: sonst berühren die Punkte von Ä und Ü die Zeile darüber */ .st-sek .st-h2{font-size:var(--st-h2);line-height:1.14;text-wrap:balance} /* Was am Rechner wegfällt: nur ausgeblendet (siehe Kopf dieses Abschnitts) */ .st-held__kicker,.st-held .st-probe,.st-held__bild,.st-auftakt .st-zahlen, .st-eins .st-marke,.st-kern__h.nur-rechner,.st-kern__t,.st-eins .st-laden,.st-probe-leise, .st-wahl__a,.st-nah,.st-ende__bild,.st-ende__sagen,.st-ende__holen,.st-schluss .st-laden-h{display:none} /* Laden-Knöpfe (Baustein .laden-weiche, site.css 16b): beide, gleich gestaltet, nebeneinander, App Store zuerst. Etwas grösser als dort. */ .st-laden-r,.st-schluss__laden-r{flex-wrap:nowrap;gap:12px} .st-laden-r > a,.st-schluss__laden-r > a{flex:0 1 220px;max-width:240px;min-height:60px;padding:8px 18px;gap:12px} .st-laden-r > a span b,.st-schluss__laden-r > a span b{font-size:19px} .st-laden-r > a span i,.st-schluss__laden-r > a span i{font-size:13px} /* Klick auf die Mitteilung: die zwei Knöpfe leuchten kurz auf (start-mitteilungen.js), dasselbe Leuchten wie bei /?leuchten=1#holen */ .laden-weiche > a.st-leuchtet{animation:storeLeuchten 1.8s var(--ease)} /* ---------- 1 · Ankommen ---------- Zwei Spalten. Links Mitteilung, Hauptzeile, Satz, Knöpfe, Belegzeile, als Gruppe mittig neben der Hand. Rechts die Hand mit dem iPhone, das Gerät mittig in der Spalte. Runde 2 am Rechner (13.10.2026, Eluans Bild): oben stand ein grosses Loch, und die Hand stiess unten an den Rand. Jetzt stehen Text und Hand als eine Gruppe senkrecht in der Mitte, leicht nach oben gerückt (unten mehr Luft als oben). Das Gerät ist ganz zu sehen, mit ruhigem Abstand zum unteren Rand; nur die Hand läuft nach rechts und unten weich aus. Höhe der Hand: 76 Prozent des Bereichs, höchstens so gross, dass das Gerät (rund 60 Prozent der Bildhöhe breit) in seine Spalte passt. */ .st-held{display:grid;align-content:center;padding:clamp(16px,3vh,40px) 0 clamp(32px,7vh,88px);overflow:hidden} .st-held__raster{--hand-h:min(calc(var(--st-hoehe) * .76),calc((min(100vw,var(--wrap)) - 88px) * .81),860px); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:48px; grid-template-rows:.8fr auto auto auto auto auto 1.2fr; grid-template-areas:". hand" "mitteilung hand" "titel hand" "lead hand" "laden hand" "beleg hand" ". hand"; align-items:start} .st-held__h{font-size:clamp(46px,min(9vh,calc((min(100vw,var(--wrap)) - 88px) * .072)),80px);line-height:1.14} .st-held__lead{display:block;max-width:27em;margin:clamp(16px,2.4vh,24px) 0 0; font-size:clamp(18px,2.3vh,21px);line-height:1.5;color:var(--faint)} .st-held .st-laden-r{grid-area:laden;justify-content:flex-start;margin-top:clamp(22px,3.6vh,34px)} .st-held__beleg{display:block;margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--muted)} /* Die Mitteilung: dieselbe Karte wie am Handy (Runde 4: ohne die Zeile «Go & Grow · jetzt»), etwas grösser. Alle fünf liegen übereinander in derselben Zelle, nichts springt beim Wechsel. Verhalten: assets/js/start-mitteilungen.js. */ .st-mitteilung{grid-area:mitteilung;display:grid;width:100%;max-width:470px;margin:0 0 clamp(22px,4vh,40px)} .st-mitteilung__link{display:grid;color:inherit;text-decoration:none;border-radius:22px;pointer-events:none} .st-mitteilung__karte{grid-area:1/1;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;align-items:center; padding:13px 18px 14px 13px;border-radius:22px;background:rgba(40,47,49,.9); border:1px solid rgba(255,255,255,.1); box-shadow:0 14px 34px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.26); -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3); opacity:0;transform:translateY(-8px) scale(.96);transform-origin:50% 0; transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .25s cubic-bezier(.25,.1,.25,1)} .st-mitteilung__karte.ist-an{opacity:1;transform:none;pointer-events:auto;cursor:pointer} .st-mitteilung__karte.ist-weg{opacity:0;transform:scale(.96); transition:opacity .2s cubic-bezier(.25,.1,.25,1),transform .2s cubic-bezier(.25,.1,.25,1)} .st-mitteilung__symbol{width:42px;height:42px;border-radius:10px} .st-mitteilung__text{display:grid;min-width:0} .st-mitteilung__titel{font-size:16px;line-height:21px;font-weight:700;color:#fff} .st-mitteilung__zeile{font-size:15px;line-height:21px;color:#d9e1df;text-wrap:pretty} .st-mitteilung__link:focus-visible{outline:3px solid var(--primary);outline-offset:3px} /* Die Hand: ein Kasten so hoch wie das Bild, mittig in seiner Zeile; das Bild liegt darin und läuft rechts über die Spalte hinaus (der Bereich schneidet seitlich ab). Unten blendet es erst unter dem Gerät aus (tiefster Punkt des Geräts bei 91 Prozent der Bildhöhe). */ .st-auftakt{grid-area:hand;position:relative;align-self:center;min-height:0} .st-auftakt .st-hand{position:relative;height:var(--hand-h);margin:0} .st-auftakt .st-hand::before{content:"";position:absolute;z-index:-1;left:50%;top:6%; width:calc(var(--hand-h) * .86);height:calc(var(--hand-h) * .86);transform:translateX(-50%);border-radius:50%; background:radial-gradient(closest-side,rgba(95,181,171,.24),rgba(95,181,171,.07) 62%,rgba(95,181,171,0))} .st-auftakt .st-hand__bild{position:absolute;top:0;left:calc(50% - var(--hand-h) * .30); width:auto;max-width:none;height:100%;margin:0; -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 99%),linear-gradient(180deg,#000 92%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,#000 72%,transparent 99%),linear-gradient(180deg,#000 92%,transparent 100%); mask-composite:intersect} html[lang="en"] .st-hand__bild--de,html:not([lang="en"]) .st-hand__bild--en{display:none} /* ---------- 2 · Einzeln bringt es wenig, und die Antwort ---------- Links das Handy mit den drei Sätzen als Nachrichten (dasselbe Gerät wie am Handy: Kupferrahmen, Insel, läuft unten aus), rechts der Titel und darunter die Antwort mit dem Symbol der App und den drei Bereichen. Titel und Antwort stehen als Gruppe auf der Höhe der Gerätemitte. */ .st-eins{background:radial-gradient(ellipse 46% 52% at 26% 54%,rgba(201,104,58,.09),rgba(201,104,58,0))} .st-eins__raster{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:clamp(48px,6vw,96px); grid-template-rows:1fr 1fr;grid-template-areas:"saetze kopf" "saetze antwort";align-items:center} .st-eins__kopf{grid-area:kopf;align-self:end;margin:0 0 clamp(22px,3.6vh,40px)} .st-eins__antwort{grid-area:antwort;align-self:start} .st-saetze{grid-area:saetze;position:relative;display:grid;gap:clamp(12px,1.6vh,16px);width:100%;max-width:clamp(340px,46vh,460px); justify-self:center;margin:0;padding:clamp(64px,8.4vh,80px) clamp(16px,2.2vh,22px) clamp(64px,9vh,96px); border:8px solid transparent;border-bottom:0;border-radius:56px 56px 0 0; background:linear-gradient(180deg,#182021,#121718) padding-box, linear-gradient(118deg,#ffdcc2 0%,#f0ab77 6%,#c2622c 17%,#8f3f16 27%,#f3bd92 38%,#d98a4e 47%,#7d3610 58%,#f7cba6 70%,#c96a33 82%,#8a3d14 92%,#ffdcc2 100%) border-box; box-shadow:inset 0 0 0 2px #06080a; -webkit-mask-image:linear-gradient(#000 calc(100% - clamp(56px,8vh,84px)),transparent);mask-image:linear-gradient(#000 calc(100% - clamp(56px,8vh,84px)),transparent)} .st-saetze::before{content:"";position:absolute;top:18px;left:50%;width:100px;height:30px;margin-left:-50px; border-radius:99px;background:#000} .st-satz{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:end;padding:0;border:0} .st-satz .st-sym{display:grid;width:38px;height:38px;border-radius:50%;background:rgba(224,185,74,.16);color:var(--gold)} .st-satz:nth-child(2) .st-sym{background:rgba(168,127,214,.18);color:#c3a4ea} .st-satz:nth-child(3) .st-sym{background:var(--primary-dim);color:var(--primary)} .st-satz .st-sym svg{width:19px;height:19px} .st-satz p{justify-self:start;padding:13px 17px 14px;border-radius:20px 20px 20px 6px;background:#2a3335; font-size:clamp(17px,2.2vh,21px);line-height:1.42;font-weight:500;color:#e6edeb} /* Die Antwort: Symbol und zwei Sätze, darunter die drei Bereiche */ .st-kern{margin:0;padding:0;background:none;border:0;border-radius:0} .st-kern__kopf{grid-template-columns:clamp(64px,8.4vh,80px) minmax(0,1fr);gap:clamp(18px,2.4vh,24px);align-items:center} .st-kern img{width:clamp(64px,8.4vh,80px);height:clamp(64px,8.4vh,80px);border-radius:22%; box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)} .st-kern__h{max-width:14em;font-size:clamp(24px,3.4vh,34px);line-height:1.2;font-weight:800;text-wrap:balance} .st-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:520px;margin:clamp(22px,3.4vh,32px) 0 0;padding:0;list-style:none} .st-drei li{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 10px;border-radius:16px; background:var(--surface);border:1px solid var(--line-strong);font-size:16px;font-weight:700;color:var(--text)} .st-drei__sym{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none; background:rgba(224,185,74,.16);color:var(--gold)} .st-drei li:nth-child(2) .st-drei__sym{background:rgba(168,127,214,.18);color:#c3a4ea} .st-drei li:nth-child(3) .st-drei__sym{background:var(--primary-dim);color:var(--primary)} .st-drei__sym svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* Die Nachrichten kommen an (Kiesel Nr. 27, start-bewegung.js): dieselben Werte wie am Handy */ .st-saetze[data-nachrichten] .st-satz{transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .25s cubic-bezier(.25,.1,.25,1);transform-origin:0 100%} .st-saetze[data-nachrichten="warte"] .st-satz:not(.ist-da){opacity:0;transform:translateY(8px) scale(.96)} .st-tippt{position:absolute;left:clamp(16px,2.2vh,22px);top:clamp(64px,8.4vh,80px);display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 18px; border-radius:20px 20px 20px 6px;background:#2a3335;opacity:0;transform:translateY(8px) scale(.96);transform-origin:0 100%; transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .25s cubic-bezier(.25,.1,.25,1);pointer-events:none} .st-tippt.ist-da{opacity:1;transform:none} .st-tippt.ist-weg{opacity:0;transform:scale(.96);transition-duration:.2s} .st-tippt i{width:9px;height:9px;border-radius:50%;background:#aeb9b6;opacity:.35} .st-tippt.ist-da i{animation:st-tippt-punkt 1.2s cubic-bezier(.25,.1,.25,1) 1 both} .st-tippt.ist-da i:nth-child(2){animation-delay:.15s} .st-tippt.ist-da i:nth-child(3){animation-delay:.3s} /* ---------- 3 · Methoden aus den Büchern grosser Denker: Skill 1 ---------- Links der Titel und der Weg zu den anderen 16 Skills, rechts die Karte von Skill 1 wie am Handy (eigene Kopie der Karte von /funktionen), hier grösser. Dahinter schauen oben zwei leere Karten hervor, wie ein Stapel: es folgen weitere Skills. Die zwei sind ::before und ::after des Rasters und liegen in derselben Zelle wie die Karte, ohne eigenes HTML. */ .st-buecher{background:radial-gradient(ellipse 44% 54% at 74% 52%,rgba(95,181,171,.09),rgba(95,181,171,0))} .st-buecher .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,6vw,96px); grid-template-rows:1fr 1fr;grid-template-areas:"titel karte" "mehr karte";align-items:center} .st-buecher .st-h2{grid-area:titel;align-self:end;margin:0;font-size:calc(var(--st-h2) * .8)} .st-buecher .st-mehr{grid-area:mehr;align-self:start} .st-buecher .wrap::before,.st-buecher .wrap::after{content:"";grid-area:karte;align-self:stretch;justify-self:center; width:100%;max-width:clamp(400px,54vh,500px);border-radius:var(--r-xl);border:1px solid var(--line-strong); background:#141a1b;transform-origin:50% 0;pointer-events:none} .st-buecher .wrap::before{transform:translateY(-30px) scale(.88);opacity:.55;border-top-color:rgba(168,127,214,.5)} .st-buecher .wrap::after{transform:translateY(-15px) scale(.94);opacity:.85;border-top-color:rgba(224,185,74,.5)} .st-skill{--tint:#5fb5ab;grid-area:karte;position:relative;z-index:1;overflow:hidden;display:flex;flex-direction:column; width:100%;max-width:clamp(400px,54vh,500px);justify-self:center; padding:clamp(26px,3.6vh,34px) clamp(26px,3.6vh,34px) clamp(18px,2.6vh,26px);border-radius:var(--r-xl);background:var(--card);border:1px solid var(--line-strong); box-shadow:0 30px 70px rgba(0,0,0,.45)} .st-skill__bg{position:absolute;right:-44px;top:-40px;line-height:0;pointer-events:none;opacity:.075} .st-skill__bg svg{width:240px;height:240px;fill:none;stroke:var(--tint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .st-skill__n{position:relative;margin:0 0 8px;font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-size:15px;line-height:1.2; letter-spacing:.14em;color:var(--tint)} .st-skill__h{position:relative;margin:0 0 8px;font-size:clamp(26px,3.4vh,32px);line-height:1.15;font-weight:700;color:var(--text)} .st-skill__s{position:relative;margin:0;max-width:20em;font-size:clamp(17px,2.1vh,19px);line-height:1.5;color:var(--muted)} .st-skill__karu{position:relative;display:block;height:clamp(170px,22vh,212px);margin:clamp(16px,2.6vh,26px) -6px 0;perspective:1000px;transform-style:preserve-3d; border-radius:16px;cursor:pointer} .st-skill__karu:focus-visible{outline:3px solid var(--primary);outline-offset:2px} .st-skill__buch{--bw:clamp(104px,13.4vh,128px);position:absolute;top:10px;left:50%;display:grid;place-items:center; width:var(--bw);height:calc(var(--bw) * 1.37);border-radius:5px 12px 12px 5px; background:linear-gradient(120deg,#2b3435 0%,#1d2425 55%,#161c1d 100%); box-shadow:inset 11px 0 0 rgba(0,0,0,.45),inset 13px 0 0 rgba(95,181,171,.55),0 18px 32px rgba(0,0,0,.55); transition:transform .62s var(--ease),opacity .5s ease;will-change:transform} .st-skill__buch em{padding-left:14px;font-family:'Anton',Impact,sans-serif;font-style:normal;font-size:calc(var(--bw) * .42);line-height:1; color:var(--tint);transition:opacity .4s ease} .st-skill__buch[data-p="1"]{transform:translate(-50%,0) translateZ(70px);opacity:1;z-index:3} .st-skill__buch[data-p="0"]{transform:translate(calc(-50% - var(--bw) * .86),14px) rotateY(48deg) scale(.84);opacity:.5;z-index:2} .st-skill__buch[data-p="2"]{transform:translate(calc(-50% + var(--bw) * .86),14px) rotateY(-48deg) scale(.84);opacity:.5;z-index:2} .st-skill__buch[data-p="0"] em,.st-skill__buch[data-p="2"] em{opacity:0} .st-skill__l{margin:10px 0 0;min-height:52px;text-align:center} .st-skill__l span{display:block;font-size:13px;line-height:1.3;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--tint)} .st-skill__l b{display:block;margin-top:5px;font-size:clamp(18px,2.2vh,20px);line-height:1.3;font-weight:600;color:#dfe7e5} .st-skill__l.ist-neu{animation:st-schild .3s cubic-bezier(.2,.7,.3,1)} .st-mehr{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:clamp(18px,3vh,30px); color:var(--primary);font-size:clamp(18px,2.3vh,21px);line-height:1.3;font-weight:600;text-decoration:none} .st-mehr::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor; transform:rotate(45deg);transition:transform .18s var(--ease)} .st-mehr:hover{color:#7fd0c6} .st-mehr:hover::after{transform:translateX(3px) rotate(45deg)} .st-mehr:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:8px} /* ---------- 4 · Was trifft auf dich zu? ---------- Vier Kacheln, 2 × 2, nur der Ich-Satz (die Antwort steht auf der Warum-Seite), Vorbild Rosebud: oben das Zeichen in seiner Phasenfarbe wie am Handy und rechts der Pfeil, unten gross der Satz. Die ganze Kachel ist der Verweis. */ .st-was .st-h2{margin:0 0 clamp(24px,4vh,44px)} .st-wahl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.8vh,18px)} .st-wahl__k{grid-template-columns:clamp(52px,6.8vh,64px) minmax(0,1fr) 40px;grid-template-rows:auto 1fr; grid-template-areas:"sym . pf" "satz satz satz";column-gap:16px;row-gap:clamp(14px,2vh,22px); align-content:stretch;align-items:start;height:100%;min-height:clamp(150px,21vh,230px);padding:clamp(20px,2.8vh,30px) clamp(22px,2.8vh,32px)} .st-wahl__k > .st-sym{width:clamp(52px,6.8vh,64px);height:clamp(52px,6.8vh,64px);border-radius:18px} .st-wahl__k > .st-sym svg{width:26px;height:26px} .st-wahl__s{align-self:end;max-width:22em;font-size:clamp(20px,2.8vh,27px);line-height:1.28;text-wrap:balance} .st-wahl__pf{width:40px;height:40px} .st-wahl li:nth-child(1) .st-sym{background:rgba(224,185,74,.16);color:var(--gold)} .st-wahl li:nth-child(2) .st-sym{background:rgba(168,127,214,.18);color:#c3a4ea} .st-wahl li:nth-child(3) .st-sym{background:rgba(90,160,224,.17);color:#7db6ea} .st-wahl li:nth-child(4) .st-sym{background:rgba(255,138,61,.15);color:var(--pop)} .st-wahl li .st-wahl__k{background:linear-gradient(90deg,rgba(224,185,74,.09),rgba(224,185,74,0) 46%),var(--surface)} .st-wahl li:nth-child(2) .st-wahl__k{background:linear-gradient(90deg,rgba(168,127,214,.11),rgba(168,127,214,0) 46%),var(--surface)} .st-wahl li:nth-child(3) .st-wahl__k{background:linear-gradient(90deg,rgba(90,160,224,.10),rgba(90,160,224,0) 46%),var(--surface)} .st-wahl li:nth-child(4) .st-wahl__k{background:linear-gradient(90deg,rgba(255,138,61,.09),rgba(255,138,61,0) 46%),var(--surface)} .st-wahl li .st-wahl__k:hover{border-color:var(--primary-line);background-color:#1e2627} /* ---------- 5 · Schluss, Vorbild Daylio ---------- Symbol, Name, ein Satz, beide Laden-Knöpfe, mittig. Zusammen mit der Fusszeile genau ein Bildschirm (--fuss-h misst assets/js/blaettern.js). */ .st-ende{min-height:calc(var(--st-hoehe) - var(--fuss-h, 0px)); background:radial-gradient(ellipse 34% 46% at 50% 44%,rgba(95,181,171,.08),rgba(95,181,171,0))} .st-ende__raster{display:block} .st-schluss{display:grid;justify-items:center;text-align:center} .st-schluss__symbol{width:clamp(92px,12vh,124px);height:clamp(92px,12vh,124px);border-radius:24%; box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)} .st-schluss__name{margin-top:clamp(20px,3vh,28px);font-size:clamp(36px,5.2vh,52px);line-height:1.1;font-weight:800;color:var(--text)} .st-schluss__name i{font-style:normal;color:var(--primary)} .st-schluss__satz{margin-top:10px;font-size:clamp(20px,2.7vh,26px);line-height:1.4;color:var(--faint)} .st-schluss__satz .serif{font-size:1.12em;color:var(--text)} .st-schluss__laden-r{justify-content:center;margin-top:clamp(28px,4.6vh,44px)} } @media (min-width:768px) and (prefers-reduced-motion:reduce){ .st-mitteilung__karte,.st-mitteilung__karte.ist-weg,.st-saetze[data-nachrichten] .st-satz,.st-tippt, .st-skill__buch,.st-skill__buch em,.st-mehr::after{transition:none} .st-tippt.ist-da i,.st-skill__l.ist-neu{animation:none} .st-mehr:hover::after{transform:rotate(45deg)} .laden-weiche > a.st-leuchtet{animation:none;box-shadow:0 0 0 3px var(--primary-line),0 0 0 7px var(--primary-dim)} } /* Schmale Rechner und Tablets hochkant (768 bis 979): Spalten und Karten rücken enger zusammen */ @media (min-width:768px) and (max-width:979px){ .st-held__raster{column-gap:28px} .st-laden-r > a,.st-schluss__laden-r > a{flex:1 1 0;padding:8px 12px;gap:10px} .st-laden-r > a span b,.st-schluss__laden-r > a span b{font-size:17px} .st-eins__raster,.st-buecher .wrap{column-gap:36px} .st-wahl__k{grid-template-columns:48px minmax(0,1fr) 34px;padding:20px} .st-wahl__k > .st-sym{width:48px;height:48px;border-radius:15px} .st-wahl__pf{width:34px;height:34px} .st-wahl__s{font-size:20px} } /* Tablets hochkant (768 bis 1100 breit, höher als breit): zwei Spalten liessen hier oben und unten viel Leere und machten Spalten zu schmal. Wie am Handy steht darum mehr untereinander: im Kopf Mitteilung und Hauptzeile über die ganze Breite, darunter links Satz, Knöpfe und Belegzeile, rechts die Hand bis an den unteren Rand; «Einzeln bringt es wenig» und Skill 1 ganz untereinander. */ @media (min-width:768px) and (max-width:1100px) and (orientation:portrait){ #inhalt{--st-h2:clamp(44px,7vw,76px)} .st-held__raster{--hand-h:min(calc(var(--st-hoehe) * .5),calc((min(100vw,var(--wrap)) - 88px) * .81)); grid-template-columns:minmax(0,1fr) minmax(0,.82fr); grid-template-rows:auto auto auto auto auto 1fr; grid-template-areas:"mitteilung mitteilung" "titel titel" "lead hand" "laden hand" "beleg hand" ". hand"} .st-auftakt{align-self:start;margin-top:8px} .st-held__h{font-size:clamp(56px,9.4vw,96px)} .st-held .st-laden-r{flex-wrap:wrap} .st-held .st-laden-r > a{flex:1 1 180px} .st-eins__raster{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto; grid-template-areas:"kopf" "saetze" "antwort"} .st-eins__kopf{align-self:start;margin-bottom:clamp(24px,3vh,40px)} .st-saetze{max-width:min(460px,100%)} .st-eins__antwort{margin-top:clamp(20px,2.6vh,32px)} .st-buecher .wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto; grid-template-areas:"titel" "karte" "mehr"} .st-buecher .st-h2{align-self:start;margin-bottom:clamp(44px,5vh,64px);font-size:var(--st-h2)} .st-buecher .st-mehr{justify-self:center} } /* ============================================================================ RECHNER 4b · 14 TAGE (Runde 2 am Rechner, 13.10.2026) Eluan: zwischen «Was trifft auf dich zu?» und dem Schluss kommt der 14-Tage-Block wie am Handy, mit dem Google-Play-Knopf. Die Bedingung darunter («Im Jahresabo bei Google Play.») sagt, wofür es gilt; darum braucht es am Rechner keine Geräte-Erkennung. Nur auf einem iPhone (quer ab 768 Pixeln) bleibt er aus, wie am Handy. Am Rechner steht nur der Google-Play-Knopf: der App-Store-Knopf bleibt im HTML (Baustein .laden-weiche), ist hier aber ausgeblendet. Aussehen wie am Handy (Kreis, zwei Wochen als Punkte, Satz, Bedingung, Knopf), grösser gesetzt. ========================================================================== */ @media (min-width:768px){ .st-probezeit{justify-items:center;text-align:center; background:radial-gradient(ellipse 34% 44% at 50% 42%,rgba(224,185,74,.07),rgba(224,185,74,0))} html[data-geraet="apple"] .st-probezeit:not([data-frei]){display:none} .st-probezeit .wrap{display:grid;justify-items:center} .st-probezeit__ring{position:relative;display:grid;place-content:center;justify-items:center; width:clamp(150px,22vh,210px);height:clamp(150px,22vh,210px);margin:0 auto clamp(18px,3vh,28px);border-radius:50%; background:radial-gradient(closest-side,rgba(95,181,171,.2),rgba(95,181,171,0))} .st-probezeit__ring::before{content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 200deg,var(--gold),var(--primary) 55%,var(--gold)); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px)); mask:radial-gradient(farthest-side,transparent calc(100% - 11px),#000 calc(100% - 10px))} .st-probezeit__ring b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(64px,9.4vh,92px);line-height:1;color:#fff} .st-probezeit__ring span{margin-top:4px;font-size:15px;line-height:1;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)} .st-probezeit__raster{display:grid;grid-template-columns:repeat(7,16px);gap:10px;justify-content:center;margin:0 auto clamp(22px,3.6vh,34px)} .st-probezeit__raster i{width:16px;height:16px;border-radius:5px;background:var(--gold)} .st-probezeit__raster i:nth-child(n+8){background:var(--primary)} .st-probezeit__satz{max-width:20em;margin:0 auto 10px;font-size:clamp(26px,3.6vh,36px);line-height:1.2;font-weight:800;color:var(--text);text-wrap:balance} .st-probezeit__bed{margin:0 auto clamp(24px,3.8vh,36px);font-size:16px;line-height:1.45;color:var(--muted)} .st-probezeit .st-laden-h{width:100%} .st-probezeit .laden-weiche{justify-content:center} .st-probezeit .laden-weiche > .apple{display:none} .st-probezeit .laden-weiche > a{flex:0 1 240px;max-width:260px;min-height:60px;padding:8px 18px;gap:12px} .st-probezeit .laden-weiche > a span b{font-size:19px} .st-probezeit .laden-weiche > a span i{font-size:13px} }