/* Der Stil der Inhaltsseiten - gemeinsam fuer Startseite, Lehrkraefte, Creator und Institutionen. Lag bis eben inline in index.html; sobald es mehr als eine Seite gibt, muss er geteilt werden, sonst laufen sie auseinander. Genau aus dem Grund liegt kopf.css schon laenger daneben. */ :root{ color-scheme:dark; /* ================================================================== QRAKI FARBSYSTEM — Marcs Briefing vom 10. September 2026. Alles hier ist aus diesem Briefing uebernommen, nichts frei gewaehlt. DIE NEUTRALACHSE ist eine Familie: Farbton 224 bis 228, Saettigung 15 bis 18 %. Nur die Schriftfarbe faellt heraus, und zwar mit Absicht: "Qraki Paper" #F1F0ED liegt bei Farbton 45, ist also WARM auf kaltem Grund. Das ist der Grund, warum die Seite nicht klinisch wirkt - aber es muss so bleiben, sonst kippt der Eindruck. DAS LILA HAT ZWEI ROLLEN, und das ist keine Erfindung von mir, sondern eine Kontrastfrage: --marke #8B36FD Flaeche. Als kleine Schrift kaeme sie nur auf 3,34 und laege unter der Schwelle 4,5. --accent #BD92F6 Schrift und Linien. 7,14 - sicher. NACHGEMESSEN AM 11. SEPTEMBER 2026 (Marc: "die Farbe Website-Buttons und Qraki-Icon passen nicht zu Qrakis Farbe in den Grafiken, das sieht komisch aus"). Er hatte recht, und die Ursache war nicht der Farbton: Qrakis Koerper ist in allen sechs Flat-Vorlagen #8B36FD - Ton 265,6 und Helligkeit 60, also praktisch dasselbe wie das alte #8B5ED7 (262,3 / 60,6). Verschieden war allein die SAETTIGUNG: 98 gegen 60. Neben einem voll gesaettigten Lila wirkt ein halb gesaettigtes schmutzig - genau der "komische" Eindruck. Der Wert ist der haeufigste Koerperton ueber alle sechs Vorlagen, nicht geschaetzt. Der Tausch KOSTET keinen Kontrast, er bringt welchen: Weiss auf dem Knopf steigt von 4,49 auf 5,19 (das satte Lila ist in der Leuchtdichte dunkler). --accent wurde so gewaehlt, dass es bei 7,14 bleibt - derselbe Wert wie vorher, nur im Farbton der Grafiken. WEISSE SCHRIFT AUF DEM KNOPF, nicht dunkle: Auf #8B36FD kommt Weiss auf 5,19, die dunkelste Neutrale nur auf 3,7 - und die App macht es seit jeher so. Wer hier etwas aendert, rechnet die Kontraste nach. ================================================================== */ /* ================================================================== QRAKI WORLD, 14. September 2026 — die verbindliche Palette aus dem Website-Briefing, zentral an EINER Stelle. Die Namen aus dem Briefing stehen zuerst; die alten Namen darunter zeigen nur noch darauf, damit die 1900 Zeilen darunter unveraendert weiterlaufen. DIE EINE ABWEICHUNG, MIT ABSICHT: Das Briefing nennt fuer Qraki-Lila #8B5ED7. Nachgemessen ist Qrakis Koerper in allen neuen Grafiken (hero_flat, haken_flat, tiny_illustrations, sticker_set) aber #8836F8 bis #8B36FD, und die Farbflaeche in qraki_world_02.png ist tatsaechlich #8246FC gerendert - nur die Beschriftung sagt #8B5ED7. Ein halb gesaettigtes Lila neben der voll gesaettigten Figur wirkte am 11. September "komisch" (Marc) - genau diesen Fehler nicht wiederholen. Wer trotzdem das Briefing-Lila will, aendert nur --qraki-purple. Kontraste, nachgerechnet auf #111F29 / #232836 / #2A3142: Text primaer 14,5 / 12,7 / 11,2 Text sekundaer 7,2 / 6,3 / 5,6 Lila als Schrift (--accent #BD92F6) 6,9 / 6,0 / 5,3 Weiss auf dem Knopf 5,19 Das satte Lila selbst traegt keine kleine Schrift (3,2) - dafuer gibt es weiterhin --accent. */ /* DIE WERTE STEHEN NICHT MEHR HIER (14. September 2026). Sie kommen aus gemeinsam/tokens.css, das als tokens.css vor dieser Datei geladen wird - auf jeder Seite, auch auf codes.html. Hier wird nur noch uebersetzt: Website-Name links, gemeinsamer Name rechts. So koennen Website und App nicht mehr auseinanderlaufen, ohne dass es an EINER Stelle auffaellt. --orange hat im gemeinsamen Satz keine Entsprechung und bleibt hier; es kommt nur in Illustrationsnaehe vor, nicht in der Bedienung. */ --background:var(--grund); --surface:var(--flaeche); --card:var(--karte); --border:var(--linie); --text-primary:var(--tinte); --text-secondary:var(--soft); --qraki-purple:var(--qraki); --qraki-purple-dark:var(--qraki-tief); --blue:var(--blau-signal); --green:var(--ok); --yellow:var(--warn); --red:var(--fehler); --orange:#D98243; /* Die Kurznamen (--paper, --ink, --marke, --accent, --auf, --still, --line) stehen jetzt in tokens.css, damit auch codes.html sie kennt. Hier stand ausserdem --hoch:#333B4E und --leise:#9499AE noch einmal als Zahl; beides kommt jetzt aus dem gemeinsamen Satz. */ --sz1:#35373A; --sz2:#5A5B5E; --sz3:#7A7B7E; --sz4:#9EA0A2; --sz-akz2:#765999; --sz-glanz:#CBB0EE; --disp:ui-rounded,'SF Pro Rounded','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; /* Abstand zwischen Kaesten, die nebeneinander oder untereinander stehen. */ --luft:22px; /* Abstand zwischen zwei Inhaltsbloecken. EIN Wert, an einer Stelle: Vorher stand er als Literal nur an .kette, und .zweispur hatte gar keinen - die beiden Kaesten klebten dadurch auf sechs Seiten direkt am Absatz darueber (Marc, 4. September 2026). Ueberschriften und ihre Vorzeilen bleiben bewusst enger: Was zusammengehoert, soll auch naeher stehen. */ --block:clamp(26px,4vh,40px); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--disp); -webkit-font-smoothing:antialiased; line-height:1.55; } .bahn{ width:100%; max-width:680px; margin:0 auto; padding:0 22px; } h1,h2,h3{ letter-spacing:-.03em; text-wrap:balance; margin:0; } p{ margin:0; } a{ color:var(--accent); } /* Luft: die Abschnitte duerfen atmen. Enge wirkt gehetzt, und eine Seite, die etwas von Ruhe erzaehlt, darf nicht selbst gedraengt aussehen. */ /* Enger als vorher (104px -> 76px). Luft ist gut, aber siebzehn Bildschirme Scrollweg sind keine Ruhe mehr, sondern eine Strecke. */ section{ padding:clamp(40px,7vh,76px) 0; } /* Der Hero fuellt den Schirm. Wer die Seite oeffnet, soll EIN Bild sehen und EINEN Satz - nicht drei Dinge gleichzeitig. `100svh` statt `100vh`: Auf dem Handy zaehlt vh die Adressleiste mit, und der Knopf saesse dann unter der Kante. `min-height` statt `height`, damit ein sehr kleiner Schirm mitwaechst statt abzuschneiden. */ header.oben{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,6vh,56px) 0 clamp(80px,12vh,120px); text-align:center; position:relative; } /* Der Hinweis zum Weiterscrollen. Ein Bildschirm ohne sichtbare Unterkante sieht aus, als waere die Seite zu Ende - genau die Falle, die volle Hoehe aufmacht. */ .weiter-runter{ position:absolute; left:0; right:0; bottom:clamp(22px,4vh,40px); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--soft); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; } .weiter-runter svg{ width:20px; height:20px; } @media (prefers-reduced-motion:no-preference){ .weiter-runter svg{ animation:wippen 2.4s ease-in-out infinite; } } @keyframes wippen{ 0%,100%{ transform:none } 50%{ transform:translateY(5px) } } .figur{ color:var(--accent); width:clamp(84px,12vw,124px); height:auto; aspect-ratio:79.67/85.62; margin:0 auto 22px; display:block; } /* Die Illustrationen bringen ihren eigenen Grund mit, und der ist derselbe wie der der Seite - deshalb steht kein Rahmen darum (Marc). Genau dafuer ist der Seitengrund auf die Farbe der Grafiken gezogen worden. Die Breite ist gedeckelt, und zwar nicht aus Geschmack: Die Vorlagen sind 256 bis 334 Pixel breit, mehr Material gibt es nicht. Wer sie groesser zieht, bekommt Unschaerfe - auf einem Retina-Schirm schon ab etwa der halben Anzeigebreite. */ .bild{ display:block; width:100%; height:auto; margin:0 auto 26px; } /* Der Hero kommt mit 708x592 aus einer eigenen Vorlage und darf deshalb als einziges Bild wirklich gross werden - bis 340 px ist er selbst auf einem Retina-Schirm noch scharf. */ /* AUF DEM HANDY DARF DAS BILD NICHT DIE HANDLUNG VERDRAENGEN. Gemessen am 8. September 2026 bei 375x812: Das Bild nahm 45 % des ersten Bildschirms, der Knopf lag darunter ausserhalb. Es bleibt gross genug, um die Figur zu zeigen - aber Versprechen und Knopf stehen jetzt zuerst. */ .bild-hero{ max-width:min(460px, 62vw); margin-bottom:clamp(14px,2vh,26px); } /* Auch am Laptop: Bei 1280x800 lag der Knopf bei 718px, die Faktenzeile bei 790 und der Dreiklang bei 858 - zwei Drittel der Aussage fielen unter die Kante. Ein kleineres Bild hebt alles um gut hundert Pixel. */ @media (min-width:700px){ .bild-hero{ max-width:min(360px, 60vw); } } /* DER KNOPF BRAUCHT LUFT, NICHT LAENGE (Marc, 9. September 2026: "wirkt nun wieder eng"). Erst hiess er "Ausprobieren - ohne Anmeldung"; der Satz fuellte den Knopf bis an beide Kanten und musste dafuer auch noch enger gepolstert werden - zweimal in die falsche Richtung. Jetzt sagt der Knopf die Handlung in zwei Woertern, behaelt seine volle Polsterung und steht frei; der Einwand steht eine Zeile darunter ("ohne Konto"), also genau dort, wo man ihn im selben Blick liest. */ .hero-knopf{ margin-top:22px; font-size:clamp(16px,2.4vw,18px); white-space:nowrap; } .hero-knopf + .unterknopf{ margin-top:14px; line-height:1.6; } .unterknopf + .dreiklang{ margin-top:26px; margin-bottom:0; } .bild-gross{ max-width:292px; } .bild-spot{ max-width:232px; } /* Ein Bild direkt nach der Testkarte braucht Luft. .bild hat oben bewusst keinen Rand (es steht sonst immer als Erstes in einem Abschnitt) - hier folgt es aber auf eine 430 Pixel hohe Karte und klebte an deren Unterkante. */ /* Nicht ".probe + .bild": Zwischen Karte und Bild liegt die Konfettiflaeche, der direkte Nachbar-Selektor trifft also nicht. Gemessen: 10 Pixel Abstand. */ .probe ~ .bild{ margin-top:clamp(36px,6vh,60px); } @media (prefers-reduced-motion:no-preference){ .bild{ animation:bildAuf .5s cubic-bezier(.2,.7,.2,1) both; } } @keyframes bildAuf{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } h1{ font-size:clamp(30px,6.2vw,48px); font-weight:800; line-height:1.08; margin-bottom:18px; } /* Seit hier die FRAGE steht und nicht mehr die Produkterklaerung, traegt diese Zeile den halben Hero (9. September 2026). In der alten Groesse und im Grau einer Beschriftung ging sie unter - sie sah aus wie eine Fussnote unter der Ueberschrift. Jetzt zweite Stimme statt Fussnote: groesser, in Textfarbe, aber leichter gesetzt als die Ueberschrift darueber. */ .unterclaim{ font-size:clamp(19px,3.4vw,26px); font-weight:700; color:var(--ink); max-width:20ch; margin:0 auto 26px; text-wrap:balance; letter-spacing:-.02em; } .dreiklang{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 24px; margin-bottom:28px; } .dreiklang span{ font-size:clamp(17px,3vw,23px); font-weight:800; letter-spacing:-.03em; } .dreiklang span:nth-child(2){ color:var(--accent); } .knopf{ display:inline-block; background:var(--marke); color:var(--auf); text-decoration:none; font-size:16.5px; font-weight:800; padding:16px 34px; border-radius:16px; box-shadow:0 3px 0 var(--accent-satt); } .unterknopf{ font-size:13px; font-weight:600; color:var(--soft); margin-top:12px; } /* Ein Wort in der Zeile darf lauter sein als der Rest - es ist das, weshalb Eltern bleiben. Kein eigener Kasten, kein Ausrufezeichen: nur heller. */ .unterknopf b{ color:var(--ink); font-weight:800; } /* Die vier Versprechen: Zeichen in Textfarbe, nicht in Lila. Farbe traegt hier nichts bei - sie wuerde nur mit den Szenen konkurrieren. */ /* KEINE KACHELN. Diese vier Punkte stehen immer INNERHALB eines Aufklappers - eine Kachel darin waere ein Kasten im Kasten. Ein Haarstrich oben genuegt: er trennt die vier Punkte voneinander, ohne jeden einzeln einzurahmen. */ .blick{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 22px; margin:26px 0 4px; text-align:left; } @media (min-width:640px){ .blick{ grid-template-columns:repeat(4,1fr); gap:22px 26px; } } .blick div{ padding-top:14px; border-top:1px solid var(--line); } .blick svg{ width:20px; height:20px; color:var(--accent); margin-bottom:10px; display:block; } .blick b{ display:block; font-size:14.5px; font-weight:800; margin-bottom:4px; } .blick span{ display:block; font-size:13px; font-weight:600; color:var(--soft); line-height:1.45; } /* Ab hier spricht die Seite mit Eltern, nicht mit Kindern. Die Kante macht den Wechsel sichtbar, damit sich die beiden Stimmen nicht vermischen. */ /* ---- Harte Fakten --------------------------------------------------------- Vier Zahlen nebeneinander, gross. Keine Ueberschrift: Zahlen, die eine Ueberschrift brauchen, sind keine harten Fakten. */ .fakten{ padding-top:clamp(34px,6vh,64px); padding-bottom:clamp(34px,6vh,64px); border-bottom:1px solid var(--line); } /* Der Vierer-Rahmen ist geblieben, als hier nur noch ZWEI Zahlen standen - die beiden sassen dann in Spalte eins und zwei von vier und klebten links (gemessen: Mitten bei 305 und 468 statt 391 und 709). Jetzt zaehlt das Raster die Kinder mit, statt eine feste Zahl anzunehmen. */ .zahlen{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:26px 18px; text-align:center; } @media (max-width:520px){ .zahlen{ grid-auto-flow:row; grid-template-columns:1fr 1fr; } } /* ---- „qraki ist anders" --------------------------------------------------- Der Fuenf-Sekunden-Satz, und er steht mit Absicht GENAU HIER: direkt hinter den Zahlen. Erst der Beleg (0 Daten, 0 Euro), dann das Versprechen in Worten. Andersherum waere es eine Behauptung, der die Zahlen hinterherlaufen. BEWUSST OHNE HAKEN-ICONS. Die Elternsektion weiter unten hat eine eigene "Keine ..."-Liste (Chats, Likes, Serien) und benutzt dort Haken. Dieselbe Bildsprache zweimal laesst zwei verschiedene Aussagen wie eine aussehen - die eine handelt von Daten, die andere von Aufmerksamkeit. */ .anders{ background:var(--card); border-bottom:1px solid var(--line); padding-top:clamp(40px,7vh,72px); padding-bottom:clamp(40px,7vh,72px); } .anders-liste{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin:var(--block) 0 0; padding:0; list-style:none; } @media (min-width:700px){ .anders-liste{ grid-template-columns:repeat(4,1fr); } } .anders-liste li{ font-family:var(--disp); font-size:clamp(16px,3.4vw,19px); font-weight:800; color:var(--ink); line-height:1.3; text-wrap:balance; padding-left:14px; border-left:2px solid var(--accent); } /* Der Schlusssatz ist der eigentliche Satz - die vier Zeilen darueber sagen, was qraki NICHT tut, dieser sagt, warum das reicht. */ .anders-schluss{ margin:32px 0 0; font-family:var(--disp); font-size:clamp(19px,4.2vw,24px); font-weight:800; color:var(--accent-satt); line-height:1.3; text-wrap:balance; } /* ---- Die harte Liste auf /ueber-qraki ------------------------------------ Links die Praxis, klein und grau. Rechts immer derselbe Satz, fett. EINE Betonung je Zeile - der Kontrast macht den Schlag, nicht der Fettdruck. Unter 560px stapeln die beiden Haelften; "Nicht bei uns." rueckt dann unter den Satz, den es beantwortet, und bleibt trotzdem die letzte Zeile der Zeile. */ .knall{ list-style:none; margin:var(--block) 0 0; padding:0; border-top:1px solid var(--line); } .knall li{ display:grid; gap:5px 26px; grid-template-columns:1fr; padding:15px 0; border-bottom:1px solid var(--line); } .knall .tut{ font-size:15.5px; font-weight:600; color:var(--soft); line-height:1.5; } .knall .nein{ font-size:16px; font-weight:800; color:var(--ink); } @media (min-width:560px){ .knall li{ grid-template-columns:1fr auto; align-items:baseline; } .knall .nein{ text-align:right; white-space:nowrap; } } .knall-grund{ margin-top:26px; font-size:15.5px; font-weight:600; color:var(--soft); max-width:46ch; line-height:1.6; } /* Der Schlussakkord. Zweite Zeile in Akzentfarbe, damit der Satz, den Marc woertlich vorgegeben hat, allein steht und nicht im Absatz verschwindet. */ .darum{ margin-top:var(--block); max-width:var(--mass); font-size:clamp(20px,4vw,27px); font-weight:800; letter-spacing:-.03em; line-height:1.28; text-wrap:balance; } .darum span{ display:block; margin-top:7px; color:var(--accent-satt); } /* ---- Aufklappen: Ueberschrift und Teaser, alles Weitere einen Tipp entfernt (Marc). EIN Mechanismus, ueberall derselbe - vier Sonderloesungen waeren vier Dinge zum Lernen.
statt eigenem Zustand: Es funktioniert ohne JavaScript, ist von Haus aus mit der Tastatur bedienbar, und Suchmaschinen sehen den Inhalt trotzdem. Die FAQ weiter unten nutzt es schon - so bleibt es eine Sprache. */ .mehr{ margin-top:20px; } .mehr > summary{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; list-style:none; font-size:14.5px; font-weight:800; color:var(--accent); padding:9px 0; } .mehr > summary::-webkit-details-marker{ display:none; } .mehr > summary::after{ content:""; width:8px; height:8px; flex-shrink:0; border-right:2.4px solid currentColor; border-bottom:2.4px solid currentColor; transform:rotate(45deg) translateY(-2px); } .mehr[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); } .mehr[open] > summary{ color:var(--soft); } /* EINGERUECKT (Marc). Aufgeklappt gehoert der Inhalt sichtbar unter seine Ueberschrift - ohne Einzug steht er buendig mit dem Fliesstext darueber und man sieht nicht mehr, dass er zu dem Aufklapper gehoert. KEIN STRICH LINKS: Hier stand kurz einer als Klammer. Marc hat gefragt, was der graue Balken sei - und genau das ist die Antwort darauf. Ein Zeichen, das man erklaeren muss, erklaert nichts. Der Einzug allein sagt dasselbe leiser. Auf sehr schmalen Schirmen faellt er kleiner aus - dort ist jeder Millimeter Textbreite mehr wert. */ .mehr-inhalt{ padding:6px 0 2px 14px; } /* Der erste Absatz bringt oft seinen eigenen Aussenabstand mit (.kette hat bis zu 40 px). Der ist fuer den Fliesstext gedacht, in dem der Absatz sonst steht - im Aufklapper reisst er ein Loch direkt unter die Ueberschrift. */ .mehr-inhalt > :first-child{ margin-top:0; } @media (min-width:420px){ .mehr-inhalt{ padding-left:20px; } } /* Im Chat sitzt der Aufklapper zwischen Sprechblasen, nicht unter einem Absatz - er braucht Abstand nach oben und darf nicht am Rand kleben. */ .mehr-chat{ margin:6px 0 0 42px; } @media (prefers-reduced-motion:no-preference){ .mehr[open] .mehr-inhalt{ animation:mehrAuf .32s cubic-bezier(.2,.7,.2,1) both; } } @keyframes mehrAuf{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } } .zahlen b{ display:block; font-size:clamp(34px,7vw,52px); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; } /* Der Satz, der qrakis Haltung traegt. Er steht allein, ohne Kasten und ohne Ueberschrift - eine Aussage ueber Ruhe darf nicht selbst laut auftreten. */ .ruhe{ margin-top:var(--block); font-size:clamp(17px,2.6vw,21px); font-weight:600; color:var(--soft); line-height:1.55; max-width:46ch; } .ruhe span{ display:inline-block; margin-top:14px; color:var(--ink); font-weight:800; } /* VIER NULLEN. Sie stehen unter den echten Zahlen und in einer eigenen Reihe - eine Null neben "6664 Karten" liest sich als Mangel, vier Nullen untereinander lesen sich als Entscheidung. Akzentfarbe wie die Zahlen darueber, aber mit Linie darueber: Es ist derselbe Abschnitt, nur die andere Haelfte der Aussage. */ .nullen{ display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; margin-top:clamp(28px,5vh,44px); padding-top:clamp(24px,4vh,34px); border-top:1px solid var(--line); text-align:center; } @media (min-width:640px){ .nullen{ grid-template-columns:repeat(4,1fr); } } .nullen b{ display:block; font-size:clamp(30px,6vw,44px); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .nullen span{ display:block; margin-top:8px; font-size:13.5px; font-weight:650; color:var(--soft); line-height:1.4; text-wrap:balance; } .zahlen span{ display:block; margin-top:8px; font-size:13.5px; font-weight:600; color:var(--soft); line-height:1.35; text-wrap:balance; } .eltern-start{ border-top:1px solid var(--line); } /* `hidden` ist nur eine Browser-Voreinstellung und verliert gegen jede Klassenregel. Ohne diese Zeile stehen BEIDE Kartenseiten gleichzeitig da - dieselbe Spezifitaetsfalle wie neulich bei .punkte. */ /* DIE KARTE AENDERT BEIM DREHEN IHRE GROESSE NICHT (Marc). Vorder- und Rueckseite sind verschieden lang, also wuchs die Karte beim Drehen und ruckte die Nachbarkarte mit. Geloest wird das NICHT ueber eine feste Mindesthoehe - jeder geratene Wert ist auf einem schmalen Schirm zu klein und auf einem breiten zu gross. Stattdessen liegen beide Seiten uebereinander in DERSELBEN Rasterzelle: Die Karte ist damit immer genau so hoch wie ihre laengere Seite, auf jeder Breite, ohne dass irgendwo eine Zahl gepflegt werden muesste. Die abgewandte Seite wird `visibility:hidden` statt `display:none` - nur so belegt sie weiter Platz. Damit Screenreader sie trotzdem nicht vorlesen, traegt sie `aria-hidden`; `visibility:hidden` allein nimmt sie zwar aus dem Baum, aber der Zustand soll ausdruecklich im Markup stehen. `.gestapelt` setzt das Skript - ohne JavaScript bleibt es bei `hidden` auf der Rueckseite, und die Karte zeigt einfach nur ihre Vorderseite. */ /* Die Blockregel unten gilt der UEBERSCHRIFT. Im Fliesstext der Rueckseite soll ein eine Hervorhebung sein, kein eigener Absatz. */ /* Die Karte dreht sich, statt an eine andere Stelle der Seite zu springen (Marc) - ein Sprung reisst den Faden ab, man weiss nicht mehr, wo man war. BEWUSST KEINE echte Doppelseite: Dafuer muesste die Hoehe fuer BEIDE Seiten im Voraus feststehen, und die ist bei vier verschieden langen Texten und jeder Bildschirmbreite nicht zu raten. Stattdessen dreht die Karte auf 90 Grad, tauscht dort den Inhalt und dreht zurueck - sie darf dabei ihre Hoehe aendern, weil in dem Moment ohnehin nichts zu lesen ist. */ @media (prefers-reduced-motion:no-preference){ } /* ---- Preis ---------------------------------------------------------------- Der wichtigste Satz der Seite steht allein. Wer wissen will, was es kostet, soll nicht in einer Aufklappliste danach suchen. */ /* Der Schluss ist der eine Ort, an dem die Seite nicht erklaert, sondern etwas sagt. Deshalb bekommt er Satz statt Absatz: der Leuchtturm gross und allein, darueber ein Strich, der ihn vom Vorhergehenden trennt, darunter die Unterschrift leise und gesperrt - wie eine Signatur unter einem Brief. */ .schluss .leuchtturm{ position:relative; margin:clamp(22px,4vh,38px) auto clamp(18px,3vh,30px); padding-top:clamp(30px,5vh,46px); max-width:22ch; font-size:clamp(23px,4.6vw,34px); font-weight:800; letter-spacing:-.03em; line-height:1.25; color:var(--accent); text-wrap:balance; } /* Ein kurzer Strich statt einer Linie ueber die volle Breite: Er trennt, ohne den Abschnitt in zwei Haelften zu schneiden. */ .schluss .leuchtturm::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:44px; height:2px; border-radius:2px; background:var(--marke); opacity:.55; } .schluss .leuchtturm span{ display:block; margin-top:clamp(16px,2.6vh,22px); font-size:13px; font-weight:700; letter-spacing:.05em; line-height:1.5; color:var(--soft); } .preis{ text-align:center; } .preis .gross{ font-size:clamp(30px,6.5vw,46px); font-weight:800; letter-spacing:-.035em; line-height:1.1; text-wrap:balance; margin:0 0 16px; } .preis .dazu{ font-size:16.5px; font-weight:600; color:var(--soft); max-width:46ch; margin:0 auto 26px; } .preis-paar{ display:grid; grid-template-columns:1fr; gap:var(--luft); text-align:left; } @media (min-width:560px){ .preis-paar{ grid-template-columns:1fr 1fr; } } .preis-paar div{ background:var(--card); border-radius:20px; padding:20px 19px; box-shadow:0 3px 0 var(--line); } .preis-paar b{ display:block; font-size:17px; font-weight:800; margin-bottom:7px; } .preis-paar span{ font-size:14.5px; font-weight:600; color:var(--soft); line-height:1.45; } /* Warum der Verkauf kein Zugestaendnis ist, sondern der Grund, warum das Gratis funktioniert (Marcs Argument). Steht bewusst NACH dem Preis: erst die Zahlen, dann wofuer sie da sind. */ .kette{ margin:var(--block) auto 0; max-width:44ch; font-size:clamp(16px,2.4vw,19px); font-weight:600; color:var(--soft); line-height:1.55; } .kette b{ color:var(--ink); font-weight:800; } .preis-fuss{ font-size:14px; font-weight:600; color:var(--soft); margin-top:22px; max-width:52ch; margin-left:auto; margin-right:auto; } /* Die Ueberleitung zu den Faellen war der Schlusssatz eines Absatzes, der schon zwei andere Sachen erklaerte. Eine Ueberleitung ist eine eigene Aufgabe. */ .faelle-vor{ margin:clamp(26px,4vh,40px) auto 18px; max-width:44ch; font-size:clamp(16px,2.4vw,19px); font-weight:800; color:var(--ink); } .balken{ font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--soft); margin-bottom:11px; } h2{ font-size:clamp(24px,4vw,34px); font-weight:800; margin-bottom:14px; line-height:1.15; } .vor{ font-size:16.5px; font-weight:600; color:var(--soft); max-width:52ch; margin-bottom:26px; } /* Der Wortwechsel bekommt eine Einleitung - sonst faellt man mitten hinein und weiss nicht, wer da spricht. */ .chat-kopf{ background:var(--still); border-radius:20px 20px 0 0; padding:18px 20px; display:flex; align-items:center; gap:12px; } .chat-kopf svg{ width:30px; height:32px; color:var(--accent); flex-shrink:0; } .chat-kopf b{ font-size:15.5px; font-weight:800; display:block; } .chat-kopf span{ font-size:12.5px; font-weight:600; color:var(--soft); } .chat{ background:var(--card); border-radius:0 0 20px 20px; padding:20px 18px 22px; box-shadow:0 3px 0 var(--line); } /* Das CSS des Chats stand hier noch, obwohl der Chat selbst laengst raus war - .zug, .kuerzel, .sprech, .name, .blase, keine davon im Markup. Am Ende lag ausserdem der abgerissene Rest eines @keyframes ( "30%{...} }" ), und DER war nicht bloss tot: Eine geschweifte Klammer zu viel beendet den Regelsatz an der falschen Stelle. Alles danach bis zur naechsten gueltigen Regel fiel aus - .zweispur stand deshalb als display:block da, und die beiden Kaesten klebten aneinander. Beim Entfernen von Bausteinen also immer auch das CSS mitnehmen und danach die Klammern nachzaehlen. */ /* EIN Abstand fuer alle Kartenraster (Marc). Vorher standen hier vier verschiedene Werte - 12, 16, 16, 18 - und nebeneinander sah es aus, als waeren manche Kaesten aneinandergeklebt. Der Schlagschatten frisst ausserdem 3 px vom sichtbaren Abstand, deshalb ist der Wert grosszuegiger als er aussieht. Aendern bitte hier, nicht an den einzelnen Rastern. */ .zweispur{ display:grid; gap:var(--luft); grid-template-columns:1fr; margin-top:var(--block); } @media (min-width:640px){ .zweispur{ grid-template-columns:1fr 1fr; } } .spur{ background:var(--card); border-radius:20px; padding:22px 21px; box-shadow:0 3px 0 var(--line); } /* Kein farbiger Rand mehr (Marc): Er hiess "gibt es jetzt schon", stand aber an fuenf von sechs Stellen auf Paaren, die beide verfuegbar sind - dort war er Dekoration und hat abgelenkt. Der Zustand steht jetzt nur noch in der Kopfzeile, also im Wort, wo er hingehoert. */ .spur .kopfzeile{ font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--soft); margin-bottom:8px; } .spur.jetzt .kopfzeile{ color:var(--accent); } .spur h3{ font-size:19px; font-weight:800; margin:0 0 12px; } .spur p{ font-size:15px; font-weight:600; color:var(--soft); } .spur p + p{ margin-top:11px; } .spur b{ color:var(--ink); font-weight:800; } /* Zweimal stand dieselbe Zeile mit demselben Inline-Rand da. Zweimal dasselbe ist eine Klasse, die noch keinen Namen hat. */ .knopf-zeile{ margin-top:26px; } .nachsatz{ font-size:16px; font-weight:700; color:var(--ink); margin-top:var(--absatz); max-width:56ch; } /* Zwei Inline-Stile widersprachen sich hier auf derselben Klasse (24px und 0). Dahinter steckt aber eine Regel: Nach einem Ausklapper braucht der Nachsatz etwas mehr Luft, als erste Zeile IN einem gar keine. Aufgeschrieben gilt sie ueberall - inline galt sie nur dort, wo jemand daran gedacht hat. */ details.mehr + .nachsatz{ margin-top:var(--block); } .mehr-inhalt > .nachsatz:first-child{ margin-top:0; } .nachsatz span{ color:var(--soft); font-weight:600; } /* Der einzige Ort, an dem qraki eine Augenklappe traegt: dort, wo der Gedanke erklaert wird. Auf dem App-Icon bleibt sie weg - ein festes Zeichen findet man wieder, ein wechselndes nicht, und die Klappe kostet ein Auge, an dem die ganze Mimik haengt. */ .kaper{ background:var(--card); border-radius:22px; box-shadow:0 3px 0 var(--line); padding:26px 24px; } .kaper-kopf{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .kaper-kopf svg{ width:56px; height:61px; color:var(--accent); flex-shrink:0; } .kaper-kopf h2{ margin:0; } /* Unter 480px bleibt neben der Figur zu wenig fuer die Zeile - sie brach dreimal um. Dann steht die Figur lieber darueber. */ @media (max-width:479px){ .kaper-kopf{ flex-direction:column; align-items:flex-start; gap:12px; } } .kaper p + p{ margin-top:14px; } .kaper p{ font-size:16px; font-weight:600; color:var(--soft); max-width:56ch; } .kaper b{ color:var(--ink); font-weight:800; } .kaper .punkt{ font-size:17px; font-weight:800; color:var(--ink); margin-top:20px; } /* qraki sagt einen Satz dazu - er bittet nicht mehr um Hilfe, er erklaert, was Create kann. Das Bild bleibt, der Zweck hat sich verschoben. */ .bitte{ display:flex; gap:11px; align-items:flex-start; margin-bottom:20px; } .bitte svg{ width:34px; height:37px; color:var(--accent); flex-shrink:0; } .bitte .blase{ max-width:46ch; } /* Die Probe: Frage lesen, tippen, Antwort. Das ist die App in klein. */ .probe{ background:var(--card); border-radius:24px; box-shadow:0 3px 0 var(--line); padding:26px 24px; width:100%; max-width:360px; min-height:430px; margin:0 auto; display:flex; flex-direction:column; text-align:left; border:none; font:inherit; color:inherit; cursor:pointer; } .probe:hover{ box-shadow:0 3px 0 var(--accent); } .probe:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; } .probe .marke-zeile{ font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--soft); margin-bottom:11px; } .probe .marke-zeile span{ display:none; } .probe[data-stufe="0"] .marke-zeile span:nth-child(1), .probe[data-stufe="1"] .marke-zeile span:nth-child(2), .probe[data-stufe="2"] .marke-zeile span:nth-child(3), .probe[data-stufe="3"] .marke-zeile span:nth-child(4), .probe[data-stufe="4"] .marke-zeile span:nth-child(5), .probe[data-stufe="5"] .marke-zeile span:nth-child(5){ display:inline; } /* WIE IN DER APP: Die Karte DREHT UM, sie waechst nicht. Vorher stand die Antwort unter der Frage, beide gleichzeitig - das ist kein Umdrehen, das ist eine Liste, und es verraet die Antwort, waehrend man noch ueberlegt. Jetzt nimmt die Antwort den Platz der Frage ein, in derselben Groesse, und die Zeile oben sagt, welche Seite man sieht. Die Mitte traegt beide und zentriert sie senkrecht - genau wie auf dem Handy, wo die Frage nicht oben klebt, sondern in der Karte steht. */ .probe .mitte{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; } .probe .frage,.probe .antwort{ font-size:clamp(23px,4.4vw,30px); font-weight:800; line-height:1.2; letter-spacing:-.02em; } .probe .hinweis{ font-size:13px; font-weight:800; color:var(--accent); margin-top:auto; padding-top:18px; } .probe .hinweis span{ display:none; } .probe[data-stufe="0"] .hinweis span:nth-child(1), .probe[data-stufe="2"] .hinweis span:nth-child(2){ display:inline; } /* DIE KARTE DREHT SICH WIRKLICH. Vorher wechselte nur der Inhalt - das liest sich wie ein Textwechsel, nicht wie eine Karte. Dieselbe Mechanik wie in der App: auf halbem Weg (90 Grad) steht die Karte hochkant, dort wird getauscht, dann dreht sie zurueck. Der Trick daran ist, dass die Karte in diesem Moment ihre Hoehe aendern darf - es ist ohnehin nichts zu lesen. */ .probe{ transform-style:preserve-3d; } @media (prefers-reduced-motion:no-preference){ .probe{ transition:transform .19s ease-in, box-shadow .2s; } .probe.dreht{ transform:rotateY(90deg); } } /* „Mehr?“ mittig unter der Antwort, gleiche Form wie der Knopf in der App. */ .probe .mehr-marke{ display:none; align-self:center; margin-top:18px; color:var(--accent); font-size:13px; font-weight:800; letter-spacing:.02em; padding:9px 16px; border-radius:999px; box-shadow:0 2px 0 var(--line); } /* Auf BEIDEN Stufen sichtbar und ohne Animation: „Mehr?“ ist der feste Punkt, an dem es weitergeht - es soll nicht bei jedem Schritt neu erscheinen. */ .probe[data-stufe="1"] .mehr-marke, .probe[data-stufe="2"] .mehr-marke{ display:inline-flex; } /* qraki meldet sich, sobald die erste Karte umgedreht ist - in derselben Form wie die Begruessung auf dem Startbildschirm der App: ein Satz in Anfuehrungszeichen, gross, ohne Kaestchen. */ .probe .qraki-sagt{ display:none; margin-top:20px; text-align:center; font-size:17px; font-weight:800; line-height:1.25; letter-spacing:-.015em; color:var(--accent); text-wrap:balance; } .probe[data-stufe="1"] .qraki-sagt, .probe[data-stufe="2"] .qraki-sagt{ display:block; } /* ... aber nicht die QUIZ-Meldung: Sie traegt beide Klassen (.qraki-sagt fuer die Optik, .qraki-quiz fuer die Stufe) und wuerde von der Regel darueber mitgenommen. Sie gehoert allein auf Stufe 4. */ .probe[data-stufe="1"] .qraki-quiz, .probe[data-stufe="2"] .qraki-quiz{ display:none; } /* Der Balken blinkt nur, solange getippt wird. */ .probe .qraki-sagt.tippt::after{ content:"▌"; margin-left:1px; opacity:.85; animation:blinken .6s steps(1,end) infinite; } @keyframes blinken{ 50%{ opacity:0 } } /* Konfetti ueber die ganze Seite - Bauart aus der App uebernommen. */ .konfetti{ position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden; } .konfetti i{ position:absolute; top:-8vh; border-radius:1px; opacity:.95; animation-name:regnen; animation-timing-function:linear; animation-iteration-count:1; animation-fill-mode:forwards; } .konfetti i.f0{ background:var(--marke); } .konfetti i.f1{ background:color-mix(in srgb,var(--accent) 55%,var(--paper)); } .konfetti i.f2{ background:var(--ink); } .konfetti i.f3{ background:var(--yellow); } @keyframes regnen{ 0%{ transform:translateY(0) rotate(0) } 100%{ transform:translateY(118vh) rotate(var(--dreh)) } } @media (prefers-reduced-motion:reduce){ .konfetti{ display:none; } } .probe .antwort{ display:none; } .probe[data-stufe="1"] .frage, .probe[data-stufe="2"] .frage{ display:none; } .probe[data-stufe="1"] .antwort, .probe[data-stufe="2"] .antwort{ display:block; animation:auf .26s ease both; } /* Wie in der App: Die dritte Seite scrollt IN der Karte, statt sie in die Laenge zu ziehen. Sonst ist die Karte auf der letzten Stufe kein Handy mehr - und genau das soll sie zeigen. */ .probe .dritte{ display:none; max-height:250px; overflow-y:auto; overscroll-behavior:contain; } .probe[data-stufe="2"] .dritte{ display:block; animation:auf .26s ease both; } .probe .dritte{ margin-top:16px; padding:15px 16px; border-radius:14px; background:color-mix(in srgb,var(--accent) 9%,var(--card)); box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 34%,transparent); } .probe .dritte-titel{ font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; } .probe .dritte p{ font-size:14.5px; font-weight:600; color:var(--soft); } @keyframes auf{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } } /* ---- Quizstufe (3 bis 5) -------------------------------------------------- Nach der dritten Seite kommt eine echte Quizfrage, wie in der App: Frage auf der Karte, vier Knoepfe darunter. Die Knoepfe stehen ausserhalb der Karte, weil die Karte selbst ein