/* GradeGrid Website - bewusst eine einzige, kleine Datei. Kein Framework, kein Build-Schritt: Was hier steht, laeuft auf jedem Webspace. Diese Datei traegt ALLE fuenf Seiten. start.css kommt auf der Startseite zusaetzlich dazu und darf nur ergaenzen, nicht die Grundlagen umwerfen. */ :root { color-scheme: light dark; --grund: #ffffff; --flaeche: #f5f6f7; --text: #1a1c1e; --gedaempft: #5a6169; --linie: #dfe3e6; --marke: #0f6f7a; /* Petrol, wie in der App */ --marke-hell: #14929f; --auf-marke: #ffffff; /* Schrift auf Petrol-Flaeche */ --warnung-grund: #fff6e5; --warnung-linie: #e0a800; --warnung-text: #6b4d00; /* Ab hier klappt die Navigation zum Menue zusammen. 46rem sind 736 Pixel: Die Startseite braucht mit fuenf Punkten und der Wortmarke rund 540 Pixel, bei 736 bleiben 696 - also Luft. Darunter wird es eng, lange bevor etwas ueberlaeuft. Bewusst NICHT 768: Ein iPad mini (744) und ein iPad (820) im Hochformat sollen die echte Zeile behalten, sie haben den Platz dafuer. Der Wert steht hier als Erinnerung - Media-Queries koennen keine Variablen lesen, die Zahl steht unten noch einmal woertlich. */ --menue-breite: 46rem; } @media (prefers-color-scheme: dark) { :root { --grund: #14171a; --flaeche: #1c2024; --text: #e8eaed; --gedaempft: #a3abb3; --linie: #2c3238; --marke: #4ec5d3; --marke-hell: #7bd8e3; /* Im Dunkelmodus ist Petrol die HELLE Flaeche - weisse Schrift darauf waere kaum lesbar. Deshalb dreht sich das Verhaeltnis hier um. */ --auf-marke: #08272b; --warnung-grund: #2e2612; --warnung-linie: #a37c00; --warnung-text: #f0d99a; } } * { box-sizing: border-box; } body { margin: 0; background: var(--grund); color: var(--text); font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; /* Lange Woerter brechen, statt die Seite breiter zu machen. Anlass (31.08.2026): "apple.com/legal/internet-services/itunes/dev/stdeula" in den Nutzungsbedingungen ist rund 430 Pixel breit, bei 320 Pixern stehen 280 zur Verfuegung. Ob ein Browser nach einem Schraegstrich umbricht, ist Auslegungssache - das hier ist keine. */ overflow-wrap: break-word; /* Sicherheitsnetz gegen waagrechtes Scrollen. clip statt hidden, weil hidden auf die klebende Kopfzeile der Startseite kaputt macht. Aeltere Browser ignorieren die Zeile; sie ersetzt kein sauberes Layout, sie faengt nur den Rest. */ overflow-x: clip; } /* Bilder sprengen nie den Rahmen. Gilt auch fuer alles, was spaeter dazukommt, ohne dass jemand daran denken muss. */ img, video { max-width: 100%; height: auto; } .rahmen { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; } /* ---------- Fuer Bildschirmleser da, fuer das Auge nicht ---------- Nicht display:none: Das naehme das Element aus der Tabfolge, und genau das Gegenteil ist gewollt. */ .visuell-versteckt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Sprungmarke fuer die Tastatur: erste Station auf jeder Seite, sichtbar nur, solange sie den Fokus hat. Ohne sie muss man sich vor jedem Inhalt erst durch das ganze Menue tippen. */ .ueberspringen { position: absolute; left: 0.75rem; top: -4rem; z-index: 100; background: var(--marke); color: var(--auf-marke); text-decoration: none; padding: 0.7rem 1.1rem; border-radius: 10px; font-size: 0.95rem; } @media (prefers-reduced-motion: no-preference) { .ueberspringen { transition: top 0.15s ease; } } .ueberspringen:focus { top: 0.75rem; color: var(--auf-marke); } /* Sichtbarer Fokus ueberall. Ein Menue, das man mit der Tastatur bedienen kann, aber dabei nicht sieht, ist nicht bedienbar. */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; border-radius: 4px; } /* ============================================================ Kopfzeile und Menue ============================================================ Fund 31.08.2026: Von den 15 Media-Queries der Startseite fasste keine einzige
oder