/* * Sponsorenlauf – semantische App-Klassen. * * Hier landen NUR App-eigene, semantische Klassen. Sie sind so geschrieben, * dass das darunterliegende CSS-Framework (aktuell: oat) ausgetauscht werden * kann, ohne dass die Templates angefasst werden muessen. * * Wenn das Framework wechselt: * 1) /static/vendor/ Dateien austauschen * 2) Diese Datei an die neuen CSS-Variablen anpassen * 3) Macros in templates/_components/ ggf. anpassen * 4) Templates in templates/pages/ bleiben unangetastet * * Farben kommen ausschliesslich aus den Theme-Tokens (theme.css): * --primary, --success, --warning, --danger, --info, --muted, --border, * --card, --accent, --faint, --terminal-* … → Light/Dark automatisch. */ /* Farbschema: Standard folgt dem OS (Light ODER Dark). Alle Farben laufen ueber light-dark()-Tokens (theme.css), daher kippt die ganze App mit. Ein erzwungener Modus (Hell/Dunkel) wird per Inline-`color-scheme` auf gesetzt — siehe /static/js/theme.js + Topnav-Umschalter. */ :root { color-scheme: light dark; } /* Das hidden-Attribut muss display-Regeln eigener Klassen schlagen. Sonst gewinnt z.B. .modal-backdrop{display:flex} ueber [hidden]. */ [hidden] { display: none !important; } /* Layout */ .page { padding: 1.5rem; max-width: 1200px; margin: 0 auto; } /* Workspace-Seiten (Lektion, Playground) brechen aus der 1200px-Kappung aus und nutzen die volle Bildschirmbreite — entscheidend auf Widescreen. */ .page--workspace { max-width: none; } .app-footer { padding: 1.5rem; text-align: center; border-top: 1px solid var(--border); margin-top: 3rem; } .centered-narrow { max-width: 32rem; margin: 3rem auto; } .stack { display: flex; flex-direction: column; } .stack.gap-2 { gap: 0.5rem; } .stack.gap-3 { gap: 1rem; } /* Typografie / Helfer */ .secondary-text { color: var(--muted-foreground); } /* Topnav: Wortmarke + Schulname links, Einstellungen + User rechtsbuendig. flex-wrap greift nur, wenn der Inhalt nicht in eine Zeile passt — auf dem Desktop bleibt die Leiste einzeilig, auf iPad/iPhone bricht sie sauber um statt horizontal zu ueberlaufen (sonst werden User-Menue/Abmelden abgeschnitten). */ [data-topnav] { flex-wrap: wrap; row-gap: 0.35rem; } .topnav-right { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 1rem; } /* Phone: Schulname raus (steht im Footer + Wortmarke), engere Abstaende. */ @media (max-width: 560px) { [data-topnav] { gap: 0.4rem 0.75rem; } [data-topnav] > .sub { display: none; } .topnav-right { gap: 0.35rem 0.6rem; } } .topnav-link { font-size: 0.95em; color: var(--muted-foreground); } .topnav-link:hover { color: var(--foreground); } /* Farbschema-Umschalter: kompakter Icon-Button in der Topnav. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.55rem; line-height: 1; } .theme-toggle__icon { font-size: 1.05rem; } /* User-Dropdown: Eintraege entzerren statt gedraengt aneinander. */ #user-menu { display: flex; flex-direction: column; gap: 0.25rem; min-width: 12rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-medium); } #user-menu .sub { padding: 0.25rem 0.5rem; font-size: 0.85em; color: var(--muted-foreground); } #user-menu a { padding: 0.4rem 0.5rem; border-radius: var(--radius-small, 0.375rem); text-decoration: none; color: var(--foreground); } #user-menu a:hover { background-color: var(--accent); } /* Button-Basis. oat stylt nur das