/* 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; --paper:#13161B; --card:#1E2228; --ink:#F0F1F3; --soft:#98A0AC; --line:#343941; --accent:#A87BDB; --accent-satt:#BF9BE6; --auf:#0E0F11; --still:#262A31; --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. */ .bild-hero{ max-width:min(460px, 86vw); margin-bottom:clamp(18px,3vh,30px); } .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; } .unterclaim{ font-size:clamp(16.5px,2.5vw,20px); font-weight:600; color:var(--soft); max-width:28ch; margin:0 auto 26px; text-wrap:balance; } .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(--accent); 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); } .knopf:hover{ background:var(--accent-satt); box-shadow:0 3px 0 var(--accent); } .unterknopf{ font-size:13px; font-weight:600; color:var(--soft); margin-top:12px; } /* 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); } .zahlen{ display:grid; grid-template-columns:1fr 1fr; gap:26px 18px; text-align:center; } @media (min-width:640px){ .zahlen{ grid-template-columns:repeat(4,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:28px 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; } /* ---- 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:clamp(28px,5vh,44px); 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; } .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(--accent); 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:20px; 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:24px; } .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(--accent); } .konfetti i.f1{ background:color-mix(in srgb,var(--accent) 55%,var(--paper)); } .konfetti i.f2{ background:var(--ink); } .konfetti i.f3{ background:var(--warn, #E8B064); } @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