/* ============================================================ Sudoku · Noir — Styles ============================================================ */ :root { /* Farb-Tokens kommen jetzt aus css/tokens.css (Alias-Schicht: --bg, --accent, --text, --panel, --accent2, --danger …). Hier bleiben nur Nicht-Farb-Tokens bzw. solche ohne Theme-Abhängigkeit. */ --radius: 18px; --shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.75); /* Einheitliche Bedien-Oberfläche (Tasten, Werkzeuge, HUD, Pause) */ --ctrl: linear-gradient(180deg, rgba(86, 58, 50, 0.85), rgba(42, 27, 27, 0.88)); --ctrl-hover: linear-gradient(180deg, rgba(120, 84, 66, 0.9), rgba(60, 38, 36, 0.9)); --ctrl-brd: color-mix(in srgb, var(--accent) 26%, rgba(255, 240, 220, 0.08)); --ctrl-sh: inset 0 1px 0 rgba(255, 240, 220, 0.08), 0 3px 12px -6px rgba(0, 0, 0, 0.65); --ctrl-sh-hover: inset 0 1px 0 rgba(255, 240, 220, 0.14), 0 10px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* BEFUND-2 3.1/4.3: ein globaler Reset statt einzeln nachgeholter Werte. Ohne ihn erben Formularelemente die Systemschrift (die Woche/Monat/Gesamt-Reiter rendern dann in Arial) und ungestylte Links das Browser-Blau — beides fällt aus der Wein/Kupfer/Gold-Palette. Klassenregeln sind spezifischer und gewinnen. */ button, input, select, textarea { font: inherit; } /* Schrift-Ton, nicht Flächen-Ton: `--accent` ist im hellen Theme #a9762a und ergibt als Linkschrift auf Creme nur 3.03:1 (verlangt 4.5). Im Dunkeln sind beide Töne derselbe, die Umstellung ändert dort also nichts. Begründung des Tokens: css/themes.css. */ a { color: var(--color-primary-text); } /* DAS QUERSCROLLEN WIRD GENAU EINMAL UNTERBUNDEN, und zwar hier. Bis zum 03.09.2026 stand `overflow-x: hidden` an BEIDEN Elementen, und das sah nach doppelter Sicherheit aus. Tatsaechlich gibt der Browser die Angabe am Wurzelelement an den Viewport weiter; die zweite am Body wird deshalb nicht mehr weitergereicht, sondern macht den Body zu einem eigenen Scroll-Container. Zusammen mit `height: 100%` war seine Box damit exakt so hoch wie der sichtbare Bereich im Moment des Ladens. In Chrome am Handy stand deshalb beim Oeffnen der Startseite unten ein dunkler Streifen zwischen Inhalt und Werkzeugleiste: Faehrt die Leiste beim Scrollen ein Stueck ein, waechst der sichtbare Bereich, die Box bleibt stehen -- und darunter liegt nur noch `html { background: #1c0c0f }` aus index.html, die Farbe gegen das weisse Aufblitzen. Der Body waechst jetzt mit seinem Inhalt (`min-height: 100%` steht unten). Damit deckt sein Verlauf die ganze Seite, und der Streifen kann nicht mehr entstehen. Am Aussehen aendert das nichts -- der Verlauf bleibt ueber die volle Inhaltshoehe gestreckt, waehrend ein Verlegen auf das Wurzelelement ihn auf Viewport-Hoehe gestaucht und die Startseite sichtbar aufgehellt haette (gemessen und verworfen). Geprueft in test/design-01-tokens-und-layout.test.mjs, Block 336. */ html { margin: 0; height: 100%; overflow-x: hidden; } body { margin: 0; } /* 5.3 A11y: einheitlicher, gut sichtbarer Tastatur-Fokus (nur bei Keyboard-Nav). */ :focus-visible { /* Nicht --color-primary: das ist der Flaechen-Akzent und haette im hellen Theme nur 2,79:1 — WCAG 1.4.11 verlangt 3:1 fuer Nicht-Text. */ outline: 2px solid var(--color-primary-text); outline-offset: 2px; } /* 5.3 A11y: visuell versteckt, aber für Screenreader lesbar (Live-Region). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body { font-family: var(--font-body); /* Deko-Ausnahme: atmosphärische Wein/Braun-Glows (bewusst Literale). Für Light-Mode in themes.css überschrieben (warme, helle Variante). */ /* DIE GEOMETRIE HAENGT AN FESTEN LAENGEN, NICHT AN DER BOX -- und das ist keine Kosmetik, sondern der Kern dieser Aenderung. Die Glows standen bei `at 20% -10%` und `at 100% 10%`, waren also an die HOEHE ihrer Box gebunden. Solange der Body ein Scroll-Container in Bildschirmhoehe war, ergaben das 760px und die Glows lagen im Bild. Seit er mit dem Inhalt waechst, waeren es 8753px: `-10%` liegt dann 875px ueber der Kante, der 800px-Radius reicht nicht mehr herein, und die Startseite wurde sichtbar dunkler (gemessen und fotografiert am 03.09.2026). Feste Pixel setzen die Glows dorthin, wo sie vorher lagen, und lassen sie dort -- unabhaengig davon, wie hoch die Box ist. WARUM NICHT `background-attachment: fixed`: Das war der erste Anlauf und sah in Chrome am Rechner richtig aus. iOS behandelt `fixed` aber seit jeher wie `scroll` -- in Safari, in Chrome fuers iPhone (das WebKit benutzt) und in unserer App-Huelle waere die Seite also genau dort dunkler geworden, wo der Fehler gemeldet wurde. Eine Behebung, die von einer Browser-Eigenheit abhaengt, ist keine. Der lineare Verlauf laeuft ueber eine Bildschirmhoehe und wird nicht wiederholt; darunter traegt `background-color` seinen Endton weiter. Ohne diese beiden Zeilen zoege er sich ueber die ganze Seitenhoehe und waere oben fast einfarbig. */ background: radial-gradient(1200px 800px at 20% -76px, #4a1922 0%, transparent 55%), radial-gradient(1000px 700px at 100% 76px, #3a2416 0%, transparent 50%), linear-gradient(160deg, var(--bg), var(--bg2)); background-repeat: no-repeat; background-size: auto, auto, 100% 100vh; background-color: var(--bg2); color: var(--text); /* Fuellt den Bildschirm auch bei kurzen Seiten -- ohne den Body auf Viewport-Hoehe festzunageln. Kein `overflow-x` hier, siehe oben. */ min-height: 100%; position: relative; } /* Ambient orbs — Deko-Ausnahme: bewusst feste Atmosphären-Farben (blurred, opacity 0.5). Im Light-Mode über themes.css abgedämpft. z-index NEGATIV, und das ist keine Kosmetik: `position: fixed` macht die Ebene zu einem positionierten Kasten, der bei z-index 0 NACH dem gewöhnlichen Inhaltsfluss gemalt wird — also über dem Text. Auf der Startseite fiel das nie auf, weil deren Inhalt in einem eigenen Stapelkontext liegt und gewinnt; die Inhaltsseiten haben keinen. Dort färbte die Deko den Fließtext mit: gemessen 6.04 statt 6.62 auf der Regelseite. Kein Sturz unter den Grenzwert, aber Zierrat gehört hinter den Text. `pointer-events: none` verdeckt den Fehler zusätzlich — es macht die Ebene für Klicks und für `elementFromPoint` unsichtbar, obwohl sie sichtbar darüberliegt. */ .bg-orbs { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; } .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; animation: float 18s ease-in-out infinite; } .orb.o1 { width: 420px; height: 420px; background: #7a2230; top: -120px; left: -80px; } .orb.o2 { width: 380px; height: 380px; background: #b5863f; bottom: -140px; right: -60px; animation-delay: -6s; } .orb.o3 { width: 320px; height: 320px; background: #5a1620; top: 40%; left: 55%; animation-delay: -11s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.1); } } .glass { background: var(--panel); border: 1px solid var(--panel-brd); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--shadow); } /* ---- Screens ---- */ .screen { display: none; position: relative; z-index: 1; min-height: 100vh; animation: fade 0.4s ease; } .screen.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .container { max-width: 760px; margin: 0 auto; padding: 24px 20px 60px; } /* ============================================================ Phase 2: Home-Dashboard. Mobile/Tablet = Einzelspalte wie bisher (Seiten-Panels aus). Ab 1024px 3-spaltiges Grid. ============================================================ */ /* Am Handy stehen die Dashboard-Karten unter dem Center-Inhalt (also unter der Rangliste). `display: contents` löst die beiden