:root{ --brombeer:#23262b; --brombeer-tief:#0f1114; --gruen:#5bc236; --gelb:#f5a700; --rot:#e2342c; --weiss:#f4f7ff; --rahmen:#9aa4ae; --gold:#ffc83d; /* Nur fuer die Raenge: hell genug fuer den dunklen Grund, und die einzige Farbe, die im Spiel noch keine Bedeutung trug. */ --rang:#7fd4ff; } *{box-sizing:border-box;margin:0;padding:0} /* Muss hier stehen: eigene display-Regeln (grid, flex) schlagen sonst das hidden-Attribut und Elemente bleiben sichtbar, obwohl der Code sie versteckt. */ [hidden]{display:none !important} body{ min-height:100dvh; /* Riffelblech. Die Kachel ist 64 Pixel gross und liegt als eigene Datei daneben — aus Verlaeufen gebaut sah es nach Karomuster aus, weil echte Riffel kurze, getrennte Stege sind und keine durchlaufenden Linien. Die zweite Fassung ist deutlich schwaecher als die erste — die stoerte beim Lesen. Deshalb auch der neue Name: Bilder kommen aus dem Tonspeicher und werden nie wieder vom Netz geholt, ein Austausch unter altem Namen erreicht niemanden, der die App schon hat. NEUE DATEI: steht im GERUEST der sw.js. */ background: url("riffel-2.png") repeat, radial-gradient(circle at 50% 0%, #3a4049, var(--brombeer-tief) 72%); color:var(--weiss); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; display:flex; align-items:center; justify-content:center; padding:16px; /* Das viewport-Meta steht auf „viewport-fit=cover“: Der Hintergrund soll bis unter Notch und Gestenleiste reichen, der INHALT aber nicht. Ohne diese vier Zeilen lag die vierte Antwort auf einem Samsung mit Gestennavigation unter der Leiste und war unten angeschnitten. max() statt env() allein, damit die 16px Grundpolster nie unterschritten werden — auf Geräten ohne Aussparung ist env() schlicht 0. */ padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(16px, env(safe-area-inset-bottom)); padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); -webkit-font-smoothing:antialiased; /* Wer schnell hintereinander tippt — etwa waehrend der Erklaerung — loeste sonst den Doppeltipp-Zoom des Browsers aus, und das Bild sprang. manipulation laesst Wischen und Kneifen zu, nur der Doppeltipp zoomt nicht mehr. */ touch-action:manipulation; overscroll-behavior:none; } /* Während einer Frage darf nichts scrollen: Scrollen reißt sonst den Satz ab und man verliert Antwortzeit beim Suchen. Und der Grund fährt herunter: Grün und Rot auf den Antworten müssen die lautesten Farben im Bild sein. Auf dem vollen Cars-Rot der Startseite trägt die falsche Antwort nur noch über ihren goldenen Rand — gemessen am 02.11.2026 an f033. Die Lobby bleibt knallrot, die Sendung wird dunkler; das ist auch dramaturgisch richtig, im Studio geht ja das Licht runter. */ body.spielt{overflow:hidden; /* Dasselbe Blech, nur gedaempft: Gruen und Rot auf den Antworten muessen die lautesten Farben im Bild sein. */ background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url("riffel-2.png") repeat, radial-gradient(circle at 50% 0%, #2b3038, #0a0b0d 70%)} /* Dasselbe fuer alle anderen Bildschirme, die keine sein sollen — Lobby, Namen, Stufe, Themen, Vorspann, Tschuess. Welche blaettern duerfen, entscheidet BLAETTERBAR in js/app.js. Die Klasse steht auch auf , und das ist der Punkt: overflow:hidden NUR auf dem body haelt Handy-Browser nicht auf — dort schiebt dann das Wurzelelement weiter, und man wischt die Buehne trotzdem weg. overscroll-behavior nimmt zusaetzlich das Gummiband am Rand. */ html.steht, body.steht{overflow:hidden; overscroll-behavior:none} /* 32px sind die beiden Polster des body. Die Aussparungen des Geraets kommen obendrauf — sonst rechnet die Buehne mit Hoehe, die physisch unter der Gestenleiste liegt. */ body.spielt #buehne{ height:calc(100dvh - 32px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); display:flex; flex-direction:column; } body.spielt .bild[data-bild="spiel"]{flex:1;min-height:0;justify-content:space-between;gap:10px} /* overflow:hidden schnitt lange Regeltexte einfach ab. Scrollen lassen, und etwas mehr Platz geben. */ body.spielt .sprechblase{min-height:0;max-height:30vh;overflow-y:auto;margin-bottom:10px; -webkit-overflow-scrolling:touch} body.spielt .gesagt{font-size:clamp(.92rem,3.2vw,1.2rem)} /* Eine Variable, kein fester Wert: der Kasten rechnet seine Hoehe daraus, und wenn eine sehr lange Frage die Schrift verkleinern muss, bleibt der Kasten trotzdem genau gleich hoch. */ body.spielt .frage{--fragenschrift:clamp(.98rem,3.7vw,1.4rem); font-size:var(--fragenschrift)} /* Die Antworten der Edition sind deutlich laenger als die des Originals — zweiundneunzig Zeichen gegen dreiundfuenfzig. Mit der geerbten Groesse fuellt der Text die Reihe bis an den Rand. Die Reihenhoehe bleibt davon unberuehrt: grid-auto-rows rechnet mit der Schrift des Elternelements. Die kleinere Fragenschrift darueber kommt aus dem Show-Upgrade und betrifft eine andere Regel — beides gilt zusammen. */ body.spielt .antwort{padding:11px 14px; font-size:clamp(.86rem, 3.6vw, 1rem);line-height:1.3} body.spielt .antwort .b{flex:0 0 32px;height:32px} body.spielt .steuerung{padding-top:6px} body.spielt .knopf.klein{padding:8px 14px;font-size:.8rem} #buehne{width:100%;max-width:900px} .bild[hidden]{display:none} .bild{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center} .titel{width:100%;max-width:560px;margin:0 auto;text-align:center} .titel img{width:100%;height:auto;display:block;margin:0 auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))} /* 30ch stammten vom alten, laengeren Spruch und zwangen den neuen (40 Zeichen) auf zwei Zeilen — „wissen.“ stand allein darunter. Die Grenze bleibt, damit ein kuenftiger langer Text nicht quer ueber den Bildschirm laeuft, ist aber weit genug fuer diesen hier. balance verteilt die Woerter gleichmaessig, falls doch einmal umbrochen wird. */ .claim{opacity:.85;max-width:44ch;text-wrap:balance} /* Absender unten auf dem Startbild: Marke und Partnerhinweis, beides anklickbar. */ .absender{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:4px} .vonwem{font-size:.72rem;font-weight:600;opacity:.5;letter-spacing:.14em;text-transform:uppercase} .marke{display:block;opacity:.9;line-height:0} .marke:hover{opacity:1} .marke img{width:min(50%,188px);height:auto;display:block;margin:0 auto} .praesentiert{ color:var(--weiss);opacity:.6;font-size:.8rem;font-weight:600; text-decoration:underline;text-underline-offset:3px; } .praesentiert:hover{opacity:.9} h2{font-size:clamp(1.3rem,5vw,2rem);font-weight:800} .knopf{ /* relative, damit die Pro-Fahne am Knopf klebt. Ohne das hatte sie keinen positionierten Vorfahren und landete in der oberen rechten Ecke der Seite — weit weg von dem Knopf, auf den sie sich bezieht. */ position:relative; font:inherit;font-weight:800;cursor:pointer;border:none;border-radius:16px; padding:16px 28px;background:var(--gelb);color:#20160a; box-shadow:0 5px 0 #b87d00; transition:transform .06s, box-shadow .06s; } .knopf:active{transform:translateY(4px);box-shadow:0 1px 0 #b87d00} .knopf.gross{font-size:1.2rem;padding:18px 36px} .knopf.leise{background:transparent;color:var(--weiss);box-shadow:none;opacity:.7;font-weight:600;padding:8px} .zahlen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .knopf.zahl{width:84px;height:84px;font-size:2rem;border-radius:20px} .hinweis{opacity:.7;font-size:.9rem} .leiste{width:100%;display:flex;justify-content:space-between;font-weight:700;opacity:.85} .sprechblase{ width:100%;background:rgba(255,255,255,.08);border:2px solid var(--rahmen); border-radius:18px;padding:14px 18px;text-align:left;min-height:84px; margin-bottom:16px;display:flex;gap:12px;align-items:flex-start; } .sprechblase .wort{flex:1 1 auto;min-width:0} /* Das Gesicht wechselt mit dem Register der Zeile: wer spottet, grinst haemisch. Die Bilder stammen aus dem Modelsheet der Serie. */ /* Der Kopf sitzt in einer hellen Scheibe. Ohne sie verschwinden die dunklen Haare im dunklen Hintergrund, und uebrig bleibt ein schwebendes Gesicht ohne Silhouette — die Frisur ist aber das Erkennungszeichen der beiden. Der Ring nimmt die Farbe des Sprechers auf. */ .gesicht{ flex:0 0 auto;width:clamp(52px,15vw,74px);height:auto; border-radius:50%; background:radial-gradient(circle at 50% 35%, #fdfbf6 0%, #e8eaee 65%, #cbd0d6 100%); box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.5); outline:3px solid var(--rahmen);outline-offset:0; animation:gesichtRein .32s cubic-bezier(.2,1.6,.4,1) both; } .sprechblase:has(.sprecher[data-wer="fraenk"]) .gesicht{outline-color:var(--gruen)} .sprechblase:has(.sprecher[data-wer="hilary"]) .gesicht{outline-color:var(--rot)} .gesicht[hidden]{display:none} @keyframes gesichtRein{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){.gesicht{animation:none}} .sprecher{font-size:.75rem;letter-spacing:.18em;font-weight:800;opacity:.75} .sprecher[data-wer="hilary"]{color:var(--rot)} .sprecher[data-wer="fraenk"]{color:var(--gruen)} .gesagt{font-size:clamp(1rem,3.6vw,1.3rem);line-height:1.35;margin-top:4px} .uhr{ width:100%;height:12px;background:rgba(0,0,0,.35);border-radius:99px; position:relative;margin-bottom:22px; /* Im Spielbild ist die Bühne eine Flex-Spalte. Ohne diese Zeile drückt eine Frage mit vier langen Antworten den Balken auf null Höhe — das Fähnchen blieb stehen, weil es absolut positioniert ist, der Balken war weg. */ flex:0 0 12px; } .uhr-balken{height:100%;width:100%;background:var(--gelb);border-radius:99px;position:relative} .uhr-balken.knapp{background:var(--rot)} /* Fähnchen am Ende des Balkens: zeigt, was die Antwort JETZT noch wert ist, und wandert mit der ablaufenden Zeit nach links. */ .uhr-wert{ position:absolute;right:0;top:100%;transform:translate(50%,6px); background:var(--gelb);color:#20160a;font-weight:900;font-size:.82rem; padding:3px 10px;border-radius:99px;white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.35); } .uhr-wert::before{ content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%); border:5px solid transparent;border-bottom-color:var(--gelb);border-top:0; } .uhr-balken.knapp .uhr-wert{background:var(--rot);color:#fff} .uhr-balken.knapp .uhr-wert::before{border-bottom-color:var(--rot)} .frage{width:100%} .antworten{width:100%;display:grid;gap:10px;grid-template-columns:1fr} @media(min-width:620px){.antworten{grid-template-columns:1fr 1fr}} .antwort{ font:inherit;font-weight:700;text-align:left;cursor:pointer;border:none; border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.1); color:var(--weiss);display:flex;gap:12px;align-items:center; border:2px solid transparent; } .antwort .b{ flex:0 0 36px;height:36px;border-radius:10px;background:var(--rahmen); display:grid;place-items:center;font-weight:900; } .antwort:disabled{cursor:default} .antwort.richtig{background:var(--gruen);color:#07280a;border-color:#fff} .antwort.falsch{background:var(--rot);border-color:#fff} .antwort.gewaehlt{outline:3px solid var(--gold);outline-offset:2px} /* EINE Zeile aus Abrechnung und Punktestand. Die Abrechnung stand vorher unten und nahm dem Ergebnis den Platz, waehrend hier oben welcher frei war. `space-between` statt zentriert: Solange die Abrechnung leer ist (sie ist `hidden`), rutscht der Punktestand von selbst nach rechts. */ .punktezeile{ width:100%;display:flex;gap:5px;align-items:center;justify-content:space-between; /* NIE UMBRECHEN. Mit `wrap` rutscht der Punktestand unter die Abrechnung, sobald die Posten zu breit werden — und alles darunter springt bei jeder Aufloesung um 36 Punkte. Wir haben das in zwei Breitenbaendern gemessen, 320–374 und 570–600; die Nischenduft-Sitzung bei 360 mit drei Posten und bei 374 mit fuenf (Finalfrage x2, Richtig, Sek. uebrig, Fremdwort, Serie). Der Haltepunkt allein schliesst das untere Band nicht. Statt umzubrechen schiebt sich die Abrechnung in sich zusammen und laesst sich im Notfall seitwaerts wischen. Die HOEHE aendert sich nie — und darauf kommt es an. Ein min-height waere die Alternative, kostet aber dauerhaft die 36 Punkte, die wir gerade gewonnen haben. */ flex-wrap:nowrap; } /* KEIN overflow-x mehr. Das Wischen war keine Loesung, sondern ein abgeschnittener letzter Posten mit Ausrede — und ohne Balken sah man nicht einmal, dass da noch etwas ist. Stattdessen passen alle Pillen hinein, weil in ihnen ein Zeichen statt eines Wortes steht. */ .punktezeile .rechnung{ width:auto;flex:1 1 auto;min-width:0; flex-wrap:nowrap;justify-content:center;gap:4px; } .punktezeile .konten{width:auto;justify-content:flex-end;flex:0 0 auto} /* FESTE HOEHE, kein min-height. Mit min-height zogen die Zeichen die Zeilenbox der Pillen hoeher als die des Punktestands, und die Mittellinien lagen um gut drei Punkte auseinander — das ist der schiefe Eindruck, den Karl „nicht symmetrisch mit Spieler 1 Horizontal" nannte. Die Behaelter duerfen ihre Kinder dabei nicht strecken, sonst nuetzt die feste Hoehe nichts: darum align-items:center auch an ihnen. */ /* `body.spielt` MUSS hier mitstehen: weiter unten setzt `body.spielt .konto{padding:4px 12px}` das Polster, und das wiegt mehr als `.punktezeile .konto`. Ohne diesen Vorsatz kam das Polster von dort an, der Punktestand war zwoelf Punkte breiter als gedacht, und die zwoelf Punkte fehlten den Pillen. Dass die Zeile dabei richtig aussah, lag allein an box-sizing:border-box — richtig aus dem falschen Grund. Fund der Motor-World-Sitzung, 07.11.2026. */ body.spielt .punktezeile .rechnung .posten, body.spielt .punktezeile .konto{ height:28px;box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center; padding-top:0;padding-bottom:0; } .punktezeile .rechnung, .punktezeile .konten{align-items:center} .punktezeile .rechnung .posten{ flex:1 1 0;min-width:0;max-width:7.5em; text-align:center;overflow:hidden;gap:5px; font-size:.72rem;font-weight:800;padding:0 8px; } /* FESTE STELLEN plus tabular-nums, sonst wandert die Pille mit jeder Zahl. Vier Stellen reichen: mehr gibt keiner der Boni her. Und der Abstand zum Zeichen kommt aus `gap` — ein Leerzeichen im Markup liegt INNERHALB des rechtsbuendigen Blocks und verschwindet, sobald die Zahl ihn ausfuellt. */ .punktezeile .rechnung .posten b{ display:inline-block;min-width:4ch;text-align:right; font-variant-numeric:tabular-nums; } /* Die Ausnahme: das Schutzschild steht allein in der Zeile und nennt keine Punktzahl, sondern was nicht passiert ist. */ .punktezeile .rechnung .posten.schild{max-width:none;flex:0 1 auto} .punktezeile .rechnung .posten.schild b{min-width:0;text-align:left} body.spielt .punktezeile .konto{padding:0 6px;gap:4px} /* Sechs Stellen fuer den Punktestand. Nachgerechnet an unseren eigenen Werten, siehe werkzeuge/punktestand-hoechstwert.mjs: mehr als 39.500 ist in einer Sendung nicht erreichbar, und das sind sechs Zeichen. */ .punktezeile .konto b{font-size:.62rem;letter-spacing:.04em; text-transform:uppercase;-webkit-text-stroke-width:1.4px} .punktezeile .konto .punkte{font-size:.76rem;min-width:6ch; text-align:right;-webkit-text-stroke-width:1.4px} /* AB VIER PILLEN WIRD GESTAFFELT. Gleich breite Pillen teilen sich den Platz; bei vier und fuenf reicht er fuer „✅ 1000" nicht mehr, und was nicht passt, verschwindet hinten unter `overflow:hidden` — ohne dass die Zeile schief aussieht. Vier kommt oft vor, fuenf ist der Hoechstfall. Die feste Stellenbreite faellt dort weg: es geht nicht mehr um ruhige Ziffern, sondern darum, dass sie ueberhaupt dastehen. Werte an unserer Schrift gemessen, nicht vom Hauptspiel uebernommen — siehe werkzeuge/browser-abrechnung-drei.cjs. */ /* Die Groessen sind GESUCHT, nicht geschaetzt. Zu jeder Breite steht die groesste, bei der nichts beschnitten wird — und eingetragen ist eine Stufe darunter. Gemessen mit unserer Schrift: Breite groesste passende hier eingetragen 320 4 Pillen .52 .46 5 Pillen .42 .36 360 .60 .52 .48 .42 374/390 .64 .56 .52 .46 412+ .72 .64 .56 .52 Mein erster Versuch war ueberall rund ein Viertel zu klein — ich hatte die Werte des Hauptspiels heruntergerechnet statt die Grenze zu suchen. Die Stufe Abstand ist Absicht: ein Geraet, das eine andere Schrift einsetzt, setzt sie minimal breiter, und eine Kuerzung sieht man hier nicht. */ .punktezeile .rechnung[data-posten="4"] .posten{font-size:.64rem;padding:0 4px;gap:4px} .punktezeile .rechnung[data-posten="5"] .posten{font-size:.52rem;padding:0 3px;gap:3px} .punktezeile .rechnung[data-posten="4"] .posten b, .punktezeile .rechnung[data-posten="5"] .posten b{min-width:0} @media(max-width:395px){ .punktezeile .rechnung[data-posten="4"] .posten{font-size:.56rem} .punktezeile .rechnung[data-posten="5"] .posten{font-size:.46rem} } @media(max-width:365px){ .punktezeile .rechnung[data-posten="4"] .posten{font-size:.52rem;padding:0 3px} .punktezeile .rechnung[data-posten="5"] .posten{font-size:.42rem;padding:0 2px} } @media(max-width:340px){ .punktezeile .rechnung[data-posten="4"] .posten{font-size:.46rem;padding:0 3px} .punktezeile .rechnung[data-posten="5"] .posten{font-size:.36rem;padding:0 2px} } @media(max-width:340px){ .punktezeile .rechnung .posten{font-size:.52rem;padding:0 5px} body.spielt .punktezeile .konto{padding:0 5px} .punktezeile .konto b{font-size:.52rem} .punktezeile .konto .punkte{font-size:.62rem} } .konten{width:100%;display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .konto{ display:flex;gap:8px;align-items:baseline;background:rgba(255,255,255,.08); border:2px solid transparent;border-radius:99px;padding:6px 14px;font-weight:700; } .konto[data-dran="ja"]{border-color:var(--gold);background:rgba(255,200,61,.16)} .konto b{font-weight:800} .konto .punkte{font-variant-numeric:tabular-nums;opacity:.85} .namensfelder{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px} .namensfelder input{ font:inherit;font-weight:700;padding:14px 16px;border-radius:14px;border:2px solid var(--rahmen); background:rgba(255,255,255,.1);color:var(--weiss);text-align:center; } .namensfelder input::placeholder{color:rgba(244,247,255,.45);font-weight:600} .rangliste{list-style:none;width:100%;display:flex;flex-direction:column;gap:8px} /* Punktetafel statt Liste: Platzziffer, Name mit Marken darunter, rechts die Zahl in derselben Handschrift wie der Einschlag. */ .rangliste li{ display:flex;align-items:center;gap:10px; background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07)); border:2px solid rgba(255,255,255,.12); border-radius:18px;padding:12px 16px;font-weight:700; /* Damit die Jagd-Zeile als eigene Reihe unter alles passt. */ flex-wrap:wrap; } .rangliste .platz{ flex:0 0 auto;min-width:30px;height:30px;border-radius:50%; display:grid;place-items:center; background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.18); font-weight:900;font-size:.92rem;font-variant-numeric:tabular-nums; } .rangliste .wer{flex:1 1 auto;min-width:0;text-align:left;overflow:hidden} .rangliste .name{ font-size:clamp(1rem,4vw,1.2rem);font-weight:900;line-height:1.15; overflow-wrap:anywhere; } /* nowrap: die zwei Marken stehen nebeneinander oder gar nicht. */ .rangliste .marken{display:flex;flex-wrap:nowrap;gap:6px;margin-top:6px;min-width:0} .rangliste .marke{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis} .rangliste .marke{ /* Schrift waechst mit der Breite: auf einem 360er Handy muss „Durchgefallen" neben „4/10" noch ganz hineinpassen. */ font-size:clamp(.58rem,2.7vw,.72rem); font-weight:800;letter-spacing:.04em;text-transform:uppercase; line-height:1.6;padding:4px 10px;border-radius:999px; background:rgba(0,0,0,.28);white-space:nowrap; } .rangliste .marke.treffer{opacity:.85} .rangliste .punktzahl{ flex:0 0 auto; font-size:clamp(1.25rem,5.6vw,1.75rem);font-weight:900;line-height:1; letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--gelb); -webkit-text-stroke:2.2px #1a1004;paint-order:stroke fill; text-shadow:0 2px 0 #8a5a00, 0 4px 8px rgba(0,0,0,.45); } /* Die Siegerkarte: golden, mit Glanzkante. Dort ist alles dunkel, sonst stuende Gold auf Gold. */ .rangliste li.siegt{ background:linear-gradient(180deg, #ffd864, var(--gold) 55%, #e59a00); border-color:#fff0bf;color:#241a00; box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.6); } .rangliste li.siegt .platz{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.25)} /* Auf dem Gold brauchen die Marken einen dunklen Grund, sonst verschwimmt die Schrift darin. */ .rangliste li.siegt .marke{background:rgba(0,0,0,.42);color:#ffe9a8} .rangliste li.siegt .marke.gewonnen{background:#241a00;color:var(--gold)} .rangliste li.siegt .punktzahl{ color:#241a00;-webkit-text-stroke:0;text-shadow:0 2px 0 rgba(255,255,255,.45); } .stufen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .knopf.stufe{display:flex;flex-direction:column;gap:4px;min-width:150px} .knopf.stufe small{font-weight:600;opacity:.65;font-size:.72rem} /* Die Praemie fuers Bestehen. KEINE eigene Farbe: Der Stufenknopf ist selbst gold, und Gold auf Gold war schlicht unsichtbar. Sie erbt die Schriftfarbe des Knopfes und hebt sich durch volle Deckkraft und Fettung von der Zeile darueber ab — die steht auf opacity .65. */ .knopf.stufe small.praemie{ opacity:1;font-weight:800;letter-spacing:.02em;margin-top:2px; } .quote{opacity:.7;font-weight:600;font-size:.85rem} /* Der Rang in der Bestenliste. Gruen, rot und gold sind im Spiel mit Bedeutung belegt (richtig, falsch, perfekt) — frei ist nur Blau, und das dunkle Blau ist der Hintergrund. Deshalb ein helles Blau, das darauf liest. Gesperrt gesetzt, damit auch ein kurzes Wort wie „Handbremse" nach Auszeichnung aussieht und nicht nach Beschriftung. */ .rang{ color:var(--rang);font-weight:800;font-size:.78rem; letter-spacing:.08em;text-transform:uppercase; } .urteil{font-size:clamp(1.1rem,4vw,1.5rem);font-weight:800} .urteil.bestanden{color:var(--gruen)} .urteil.perfekt{color:var(--gold)} /* Die Siegerkarte ist selbst golden — dort waere Gold auf Gold unlesbar. */ .urteil.durchgefallen{color:var(--rot)} .steuerung{display:flex;gap:8px;justify-content:center;margin-top:auto;padding-top:12px} .knopf.klein{ background:rgba(255,255,255,.1);color:var(--weiss);box-shadow:none; font-size:.85rem;font-weight:700;padding:10px 18px;border-radius:12px; } .knopf.klein:active{transform:translateY(2px)} body.pausiert .antworten,body.pausiert .uhr{opacity:.35;pointer-events:none} /* Ruhebild zwischen den Fragen: verhindert, dass der Bildschirm leer wirkt und dass das Layout beim Erscheinen der Antworten springt. */ /* Seit dem quadratischen Logo ueber die Hoehe begrenzt — sonst schiebt das Ruhebild die Frage nach unten. */ .ruhebild{width:min(70%,340px);max-height:268px;height:auto;object-fit:contain; opacity:.9;margin:8px auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))} /* UNGENUTZT seit dem 06.11.2026. Diese Regel gehoerte zum Gong vor der Finalfrage: Das Ruhebild wackelte zum Schlag, dreimal statt endlos. Der Gong ist weg (Karls Entscheidung, der Song ersetzt ihn), also wird die Klasse `wackelt` von niemandem mehr gesetzt. NICHT LOESCHEN, jedenfalls nicht die Bewegung dahinter: `taenzeln` laeuft auch im Vorspann (weiter unten, endlos). Wer hier aufraeumt, darf nur diese eine Regel anfassen, nie die @keyframes. */ /* Der Verdopplungs-Posten soll sich von den anderen abheben. */ .rechnung .posten.doppelt{color:var(--gold);font-weight:800} .ruhebild.wackelt{transform-origin:50% 88%;animation:taenzeln 1.1s ease-in-out 3} @media (prefers-reduced-motion:reduce){.ruhebild.wackelt{animation:none}} .antworten.gesperrt .antwort{opacity:.75} .antworten.gesperrt .antwort .b{background:var(--gold);color:#20160a} /* Wer dran ist, muss auf einen Blick erkennbar sein. */ .dran{ width:100%;text-align:center;font-weight:900; font-size:clamp(1rem,4vw,1.4rem);color:var(--gold); background:rgba(255,200,61,.12);border:2px solid var(--gold); border-radius:99px;padding:8px 18px;letter-spacing:.02em; } /* Die Punkterechnung nach jeder Antwort — damit niemand raten muss, wie eine Zahl zustande kommt. */ .rechnung{ width:100%;display:flex;gap:10px;flex-wrap:wrap;justify-content:center; align-items:baseline;font-weight:700; } .rechnung .posten{background:rgba(255,255,255,.1);border-radius:99px;padding:6px 14px} .rechnung .posten b{color:var(--gruen)} /* AUF DEM TELEFON NUR DIE ZAHLEN. Mit voller Beschriftung braucht die Abrechnung die ganze Zeile, der Punktestand rutscht darunter, und die Zeile wird 117 statt 35 Punkte hoch — im Hauptspiel bei 374 Punkten Breite gemessen. Also faellt das Wort weg und die Zahl bleibt: „+1000", „+500". Welcher Posten das ist, sagt die Reihenfolge und die Farbe. */ @media(max-width:620px){ /* Hier stand `.was{display:none}`. In `.was` steckt jetzt das ZEICHEN, und ohne es stuende eine nackte Zahl da, die nichts erklaert. Die Pillen passen auch mit Zeichen in die Zeile. */ .punktezeile .rechnung .posten{padding:0 6px} } .rechnung .summe{ background:var(--gold);color:#241a00;border-radius:99px;padding:6px 16px;font-weight:900; } /* TOT seit dem 06.11.2026: Die Blase „Keine Punkte" gibt es nicht mehr, sie erscheint jetzt kurz dort, wo sonst das „+500" aufpoppt (Karls Entscheidung). Die Regel bleibt stehen, falls die Blase je zurueckkommt. */ .rechnung .nix{background:rgba(226,52,44,.22);border-radius:99px;padding:6px 16px} /* Vorspann: Das Logo tänzelt zur Titelmusik — wippen und leicht kippen, mit dem Drehpunkt unten, als stünde es auf der Bühne. */ .vorspann-logo{ width:min(92%,620px);height:auto;display:block; filter:drop-shadow(0 10px 30px rgba(0,0,0,.5)); transform-origin:50% 88%; animation:taenzeln 2.4s ease-in-out infinite; will-change:transform; } @keyframes taenzeln{ 0% {transform:rotate(-2.2deg) translateY(0) scale(1)} 25% {transform:rotate(1.6deg) translateY(-9px) scale(1.025)} 50% {transform:rotate(-1.2deg) translateY(0) scale(1)} 75% {transform:rotate(2.2deg) translateY(-7px) scale(1.018)} 100% {transform:rotate(-2.2deg) translateY(0) scale(1)} } @media (prefers-reduced-motion:reduce){.vorspann-logo{animation:none}} /* Richtig-oder-Falsch: zwei große Flächen statt vier Zeilen. */ .antworten.zwei{grid-template-columns:1fr 1fr} .antworten.zwei .antwort{ flex-direction:column;gap:8px;text-align:center;justify-content:center; padding:22px 14px;font-size:1.05rem; } .antworten.zwei .antwort .b{display:none} /* Schätzfragen: Zahl eingeben statt auswählen. */ .schaetzen{width:100%;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap} .schaetzen input{ font:inherit;font-weight:900;font-size:clamp(1.3rem,6vw,2rem);text-align:center; width:min(58%,220px);padding:12px 14px;border-radius:14px; border:2px solid var(--rahmen);background:rgba(255,255,255,.12);color:var(--weiss); font-variant-numeric:tabular-nums; } .schaetzen input::placeholder{color:rgba(244,247,255,.4);font-weight:600;font-size:1rem} .schaetzen .einheit{font-weight:700;opacity:.8} .aufloesung{ width:100%;text-align:center;font-weight:800; font-size:clamp(1rem,3.8vw,1.3rem); background:rgba(255,255,255,.1);border-radius:16px;padding:12px 16px; } .aufloesung b{color:var(--gruen)} .aufloesung .deine{color:var(--gold)} /* Hinweis über der Frage, wenn der Typ vom Üblichen abweicht. */ /* Der Tipp neben der Fragenummer. Gesetzt wie der Titel auf dem Ergebnisbild: dieselbe gesperrte Auszeichnung, aber als Feld, damit er sich von der Zaehlzeile daneben abhebt. Gold, und zwar auf Karls Wunsch — „das sind erfolgreiche Marken, also Gold verdient". Angemerkt sei, dass Gold im Spiel schon besetzt ist: die gewaehlte Antwort, wer dran ist, der Typ-Hinweis darunter und das perfekte Ergebnis. Blau waere die einzige noch freie Farbe gewesen. Deshalb hier bewusst gedaempft — Rahmen und Grund bleiben schwach, die Schrift ist klein: ein Namensschild, kein Pokal. Keine feste Hoechstbreite: Das Feld nimmt, was neben der Fragenummer frei ist — die steht auf flex:0 0 auto und wird nicht gequetscht. Eine Deckelung auf 62 Prozent hatte vorher Platz verschenkt, den es gab. Zentriert gesetzt: bei einem zweizeiligen Namen haengt die zweite Zeile sonst schief unter der ersten. Bei den einzeiligen aendert es nichts, dort sitzt die Pille ohnehin eng um den Text. */ .zaehler{white-space:nowrap;flex:0 0 auto} /* KEIN Namensfeld in dieser Zeile — anders als im Hauptspiel. Gemessen bei 374 Punkten Bildbreite: die Zeile ist 358 breit, „Frage 10 von 15" belegt 120, „Tipp: Technik & Erfindungen" belegt 214. Fuer einen Namen blieben 35 Punkte, zwei Buchstaben und drei Punkte; und liess man den Tipp dafuer schrumpfen, brach er zweizeilig um und die Zeile wuchs von 20 auf 34 Punkte Hoehe, bei 320 Breite auf 40. Der Name steht darum weiter in der Pille darunter — siehe index.html. */ .tipp{ color:var(--gold);font-weight:800;font-size:.68rem; letter-spacing:.05em;text-transform:uppercase; background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.38); border-radius:14px;padding:3px 8px;line-height:1.2; text-align:center;min-width:0; } /* Nur fuer die paar Markennamen, die in einer Zeile nicht neben die Fragenummer passen — „Maison Francis Kurkdjian" und zwei weitere. Eine Nummer kleiner, dann bleibt auch dort alles einzeilig. Gesetzt wird die Klasse nicht nach Zeichenzahl, sondern nachdem das Spiel nachgesehen hat, ob der Text wirklich umbricht: Auf einem breiteren Geraet passt er in voller Groesse, und dann soll er auch gross bleiben. */ .tipp.eng{font-size:.56rem;letter-spacing:.02em;padding:3px 8px} /* Umbrechen statt kuerzen. Drei Markennamen sind zu lang fuer eine Zeile neben der Fragenummer — „Maison Francis Kurkdjian", „PAX by Lorenzo Pazzaglia", „Stephane Humbert Lucas". Abgeschnitten waere der Tipp wertlos, und kleiner gesetzt drueckt er die Fragenummer in den Umbruch. Also darf das Feld zweizeilig werden; bei den anderen 62 Namen bleibt alles wie gehabt. Darum auch eckigere Ecken statt der Pille: ein zweizeiliger Kreisbogen sieht aus wie ein Unfall. */ .typhinweis{ font-weight:900;letter-spacing:.12em;font-size:.78rem; color:var(--gold);text-transform:uppercase; } /* Unauffälliger Textlink — etwa zum Überspringen der Typ-Erklärung. */ .link{ background:none;border:0;padding:4px 2px;cursor:pointer; font:inherit;font-size:.82rem;font-weight:600; color:var(--weiss);opacity:.6;text-decoration:underline;text-underline-offset:3px; } .link:hover,.link:active{opacity:.9} .schalter{display:flex;gap:4px;flex-wrap:wrap;justify-content:center} /* Hinweis auf die Vollversion, nur in der Gratisfassung. */ .werbung{ width:100%;display:flex;flex-direction:column;gap:8px;align-items:center; background:rgba(255,200,61,.12);border:2px solid var(--gold); border-radius:18px;padding:16px;text-align:center; } .werbung b{color:var(--gold)} .werbung span{font-size:.88rem;opacity:.85;max-width:34ch} /* Hilfe */ /* Eigene Zeile ueber der Sprechblase. Vorher lag der Knopf absolut in deren rechter oberer Ecke und sah aus, als gehoere er zum Kasten. */ /* In die Ecke gelegt, nicht in eine eigene Zeile: als Zeile hat sie oben vierundvierzig Pixel belegt, die dem Startbildschirm zum Hineinpassen gefehlt haben. */ .kopfleiste{position:absolute;top:10px;right:14px;z-index:5;margin:0; display:flex;justify-content:flex-end} .hilfe-knopf{ width:38px;height:38px;border-radius:50%;flex:0 0 auto; border:2px solid rgba(244,247,255,.35);background:rgba(255,255,255,.1); color:var(--weiss);font:inherit;font-weight:900;font-size:1.1rem;cursor:pointer; } .hilfe-knopf:hover{background:rgba(255,255,255,.2)} #buehne{position:relative} .hilfe{width:100%;text-align:left;max-height:62vh;overflow-y:auto; background:rgba(255,255,255,.07);border-radius:18px;padding:16px 18px} .hilfe h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);margin:14px 0 5px} .hilfe h3:first-child{margin-top:0} .hilfe p{font-size:.92rem;line-height:1.5;opacity:.9;margin-bottom:8px} .hilfe b{color:var(--weiss)} .rechtliches{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:4px} .rechtliches a{color:var(--weiss);opacity:.55;font-size:.78rem;text-decoration:underline; text-underline-offset:3px} .rechtliches a:hover{opacity:.9} /* Zugang zum Ausprobieren: sieben Klicks auf die Ueberschrift der Regeln. */ .bild[data-bild="hilfe"] h2{cursor:default;-webkit-user-select:none;user-select:none} .test-marke{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase; color:var(--gold);opacity:.85;margin-top:10px} /* Mehrspieler gehoert zur Vollversion. Das Faehnchen sagt es vorher, damit niemand erst tippt und dann abgewiesen wird. */ .zahl{position:relative} .pro-fahne{position:absolute;top:-7px;right:-7px;font-size:.58rem;font-weight:800; letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:999px; background:var(--gold);color:#14171b} body.hat-pro .pro-fahne{display:none} .pro-zeile{color:var(--gold);opacity:.95} .pro-zeile .hinweis{color:inherit;margin-bottom:10px} /* Abspann: dasselbe tänzelnde Logo wie im Vorspann, nur kleiner — darunter stehen ja noch Rangliste und Knöpfe. */ .abspann-logo{max-width:min(320px,62%);max-height:250px;object-fit:contain;margin:0 auto 4px} .abspann-knoepfe{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center} /* Flacher als sonst, aber nicht gedrueckt: darueber steht die Punktetafel. Dazu etwas Abstand nach oben, damit er nicht an der letzten Karte klebt. */ .abspann-knoepfe{margin-top:6px} .abspann-knoepfe .gross{flex:1 0 100%;padding-block:15px} /* Der Weg zur Vollversion steht auf der Startseite, nicht nur im Ergebnis. */ .pro-knopf{margin-top:12px;background:transparent;border:2px solid var(--gold); color:var(--gold);font-size:.92rem;padding:9px 16px} .pro-knopf:hover{background:rgba(246,195,68,.12)} body.hat-pro .pro-knopf{display:none} /* Der Preis steht nicht im Code. Er kommt aus dem Play Store, sobald die App dort liegt — sonst bleibt die Stelle einfach leer. */ .pro-preis:empty{display:none} /* Der Preis bleibt als Ganzes zusammen. Ohne das riss er auf schmalen Geraeten mitten durch und das Euro-Zeichen stand allein in der naechsten Zeile — nachgemessen bei 296 px Knopfbreite. Umbrechen darf der Knopf davor, zwischen „holen" und dem Preis. */ .pro-preis{white-space:nowrap} /* Der alte Preis steht blasser und duenner daneben, damit der neue die Hauptrolle behaelt. Er erscheint nur, wenn Google wirklich weniger verlangt — siehe preisEintragen() in js/app.js. */ .pro-preis s{opacity:.65;font-weight:400;margin-right:.15em} /* Die Frist steht als eigene, ruhigere Zeile unter dem Preis, damit der Knopf nicht zum Plakat wird. Als Block direkt im Knopf — siehe preisEintragen() in js/app.js. */ .knopf .aktion-bis{display:block;width:100%;margin-top:.2em; font-size:.68em;font-weight:400;opacity:.8;letter-spacing:.01em} /* Das Wort zum heutigen Preis. Steht neben der Preisspanne, nicht darin — die ist nowrap, und ein unzerbrechliches „· 4,99 € (Eröffnungspreis)" würde den Knopf auf schmalen Geräten sprengen. */ .knopf .pro-marke{font-size:.8em;font-weight:400;opacity:.8} /* Das Blatt vor dem Kauf. Kein eigenes Bild, sondern ein Dialog darüber — sonst müsste man aus dem Ergebnis heraus die Rangliste verlassen. */ /* margin:auto zentriert einen modalen Dialog. Der Reset *{margin:0} ganz oben hat das ausgehebelt — der Kasten klebte oben links. */ .blatt{margin:auto;border:0;border-radius:20px;padding:22px 20px;max-width:min(430px,92vw); color:var(--weiss);background:#1e2127;box-shadow:0 26px 60px rgba(0,0,0,.55)} .blatt::backdrop{background:rgba(18,5,16,.72)} .blatt h2{margin:0 0 14px;text-align:center} .vorteile{margin:0 0 18px;padding:0 0 0 18px;text-align:left} .vorteile li{margin-bottom:9px;font-size:.94rem;line-height:1.45;opacity:.92} .vorteile b{color:var(--gold)} .blatt .gross{width:100%} .blatt .link{display:block;margin:12px auto 0} /* Neuigkeiten. Die Liste scrollt in sich, damit das Blatt nicht waechst, wenn der Verlauf laenger wird — und das wird er. */ .news-knopf{ height:38px;padding:0 14px;border-radius:19px;flex:0 0 auto;margin-right:8px; position:relative; border:2px solid rgba(244,247,255,.35);background:rgba(255,255,255,.1); color:var(--weiss);font:inherit;font-weight:800;font-size:.86rem;cursor:pointer; letter-spacing:.06em;text-transform:uppercase; } .news-knopf:hover{background:rgba(255,255,255,.2)} /* Der Punkt ist blau, nicht rot oder gold: Die beiden haben im Spiel bereits eine Bedeutung (falsch und Punkte), und ein roter Fleck auf der Startseite sieht nach Fehler aus statt nach Neuigkeit. */ .news-punkt{position:absolute;top:-3px;right:-3px;width:11px;height:11px; border-radius:50%;background:#4ea3ff;border:2px solid #14171b} .news-liste{max-height:58vh;overflow-y:auto;text-align:left; margin:0 0 4px;padding-right:8px} /* Wie ein Blog: feiner Strich, viel Luft. Die 26 Pixel oben und unten sind nicht zu viel — sie sind der Grund, warum man die Beitraege als einzelne Stuecke liest und nicht als eine lange Wand. */ .news-eintrag{padding:26px 0;border-top:1px solid rgba(244,247,255,.13)} .news-eintrag:first-child{border-top:0;padding-top:4px} .news-eintrag:last-child{padding-bottom:6px} .news-kopf{display:flex;align-items:center;gap:9px;margin-bottom:9px} .news-datum{font-size:.74rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--gold);opacity:.85} .news-art{font-size:.68rem;font-weight:800;letter-spacing:.1em; text-transform:uppercase;padding:3px 9px;border-radius:11px; background:rgba(78,163,255,.2);color:#9ecbff} .news-eintrag h3{font-size:1.06rem;line-height:1.3;margin:0 0 9px} .news-eintrag p{font-size:.93rem;line-height:1.62;opacity:.88;margin:0 0 11px} .news-eintrag p:last-child{margin-bottom:0} .news-eintrag a{color:#9ecbff} /* Der Link sieht aus wie ein Knopf zum Antippen, nicht wie ein Wort im Flieastext — auf dem Handy trifft man sonst daneben. */ .news-link{display:inline-block;margin-top:4px;padding:9px 16px; border-radius:19px;text-decoration:none;font-weight:800;font-size:.9rem; background:rgba(78,163,255,.18);border:1px solid rgba(78,163,255,.45)} .news-link:hover{background:rgba(78,163,255,.3)} .news-link + .news-link{margin-left:8px} /* Das Sicherungsblatt. Erklärender Fließtext, den das Kaufblatt nicht hat: Niemand sichert etwas, dessen Zweck er nicht versteht. */ .blatt-text{margin:0 0 12px;font-size:.93rem;line-height:1.5;opacity:.9;text-align:left} .blatt-hinweis{margin:12px 0 0;font-size:.85rem;text-align:center;opacity:.75;min-height:1.2em} /* „Sicherung einlesen“ ist ein