/* --------------------------------------------------------------------------- Kursplan — basis.css Reset, Tokens, Typografie, Layout. Die Glasflaechen stehen in glas.css, seitenspezifische Regeln in seiten.css. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 1. Tokens --------------------------------------------------------------------------- */ :root { /* Abstaende: 4-px-Raster. */ --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 20px; --abstand-6: 24px; --abstand-7: 32px; --abstand-8: 40px; /* Radien: groessere Flaechen bekommen groessere Radien, nicht alles denselben. */ --radius-s: 10px; --radius-m: 16px; --radius-l: 22px; --radius-xl: 28px; /* Groessenskala 34/28/22/17/15/13. */ --schrift-xxl: 34px; --schrift-xl: 28px; --schrift-l: 22px; --schrift-m: 17px; --schrift-s: 15px; --schrift-xs: 13px; /* Systemschrift, damit es auf iOS wie iOS aussieht. Eine Familie genuegt. */ --schriftfamilie: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif; /* --- Farben hell ------------------------------------------------------- */ --grund: #eceef3; --verlauf-1: #d3ddec; --verlauf-2: #e4dfea; --verlauf-3: #eef0f4; --flaeche: #ffffff; --text: #16181d; --text-leise: #565d6a; --rand: #d5d8e0; --rand-stark: #b0b5c0; --akzent: #1c6dd0; --akzent-text: #ffffff; --fehler: #b3261e; --erfolg: #17703f; /* --- Glas hell --------------------------------------------------------- Die Fuellung ist bewusst recht deckend: auf Glas muss Text noch 4,5:1 erreichen. Im Zweifel deckender machen, nicht den Text dunkler. */ --glas-fuellung: rgb(255 255 255 / .72); --glas-fuellung-deckend: #f7f8fa; --glas-rand: rgb(255 255 255 / .55); --glas-glanz: rgb(255 255 255 / .85); --glas-schatten: rgb(24 28 40 / .28); --glas-schleier: rgb(20 24 34 / .32); /* Bewegung. Sheets 320 ms, Zustandswechsel 180-240 ms. */ --dauer-schnell: 180ms; --dauer-mittel: 240ms; --dauer-sheet: 320ms; --kurve: cubic-bezier(.32, .72, 0, 1); /* Mindestgroesse einer Trefferflaeche. */ --treffer: 44px; /* Breite der Seitenleiste ab Tabletbreite. */ --leiste: 13rem; color-scheme: light dark; } /* Dunkel ueber die Systemeinstellung — ausser der Nutzer hat ausdruecklich hell gewaehlt. Nur die Farbtokens werden getauscht, sonst nichts. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --grund: #0f1116; --verlauf-1: #1a2331; --verlauf-2: #201b2b; --verlauf-3: #0f1116; --flaeche: #1a1d24; --text: #eaecf1; --text-leise: #a3aab6; --rand: #2e323b; --rand-stark: #454b57; --akzent: #4dabf7; --akzent-text: #0d1017; --fehler: #ff8a80; --erfolg: #51cf66; --glas-fuellung: rgb(26 29 36 / .72); --glas-fuellung-deckend: #1a1d24; --glas-rand: rgb(255 255 255 / .12); --glas-glanz: rgb(255 255 255 / .10); --glas-schatten: rgb(0 0 0 / .55); --glas-schleier: rgb(0 0 0 / .55); } } /* Manuelle Wahl aus den Einstellungen. Steht als data-theme am und muss die Systemeinstellung in beide Richtungen ueberstimmen. */ :root[data-theme="dunkel"] { --grund: #0f1116; --verlauf-1: #1a2331; --verlauf-2: #201b2b; --verlauf-3: #0f1116; --flaeche: #1a1d24; --text: #eaecf1; --text-leise: #a3aab6; --rand: #2e323b; --rand-stark: #454b57; --akzent: #4dabf7; --akzent-text: #0d1017; --fehler: #ff8a80; --erfolg: #51cf66; --glas-fuellung: rgb(26 29 36 / .72); --glas-fuellung-deckend: #1a1d24; --glas-rand: rgb(255 255 255 / .12); --glas-glanz: rgb(255 255 255 / .10); --glas-schatten: rgb(0 0 0 / .55); --glas-schleier: rgb(0 0 0 / .55); } /* --------------------------------------------------------------------------- 2. Reset --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--grund); color: var(--text); font: 400 var(--schrift-m) / 1.5 var(--schriftfamilie); } /* * Der Hintergrund, durch den das Glas scheint: ein ruhiger, weicher Verlauf aus * drei sehr entsaettigten Toenen. Fest positioniert und ohne Bewegung — der * Inhalt scrollt darueber, das Glas verwaescht ihn. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(90ch 70ch at 12% -10%, var(--verlauf-1) 0%, transparent 60%), radial-gradient(80ch 60ch at 92% 108%, var(--verlauf-2) 0%, transparent 62%), linear-gradient(160deg, var(--verlauf-3) 0%, var(--grund) 100%); } h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; } ul, ol { padding-left: 1.3em; } img, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } /* --------------------------------------------------------------------------- 3. Typografie Hierarchie ueber Groesse und Gewicht: 700 fuer Titel, 600 fuer Abschnitte, 400 fuer Fliesstext. Keine Versalien, keine Buchstabensperrung. --------------------------------------------------------------------------- */ .grosser-titel { font-size: var(--schrift-xxl); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: var(--schrift-xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; } h2 { font-size: var(--schrift-l); font-weight: 600; line-height: 1.25; } h3 { font-size: var(--schrift-m); font-weight: 600; } .leise { color: var(--text-leise); font-size: var(--schrift-s); } /* Zahlen in Stundenplan und Uhrzeiten stehen untereinander sauber. */ time, .zahl { font-variant-numeric: tabular-nums; } a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; } /* --------------------------------------------------------------------------- 4. Layout --------------------------------------------------------------------------- */ .kopfzeile { padding: var(--abstand-4) var(--abstand-4) var(--abstand-5); } .inhalt { padding: 0 var(--abstand-4); /* Platz fuer die schwebende Tab-Leiste. */ padding-bottom: calc(var(--abstand-8) + 76px + env(safe-area-inset-bottom)); } .kopfleiste__innen, .kopfzeile, .inhalt { padding-left: max(var(--abstand-4), env(safe-area-inset-left)); padding-right: max(var(--abstand-4), env(safe-area-inset-right)); } /* Ab Tabletbreite: Navigation links, Inhalt hoechstens 900 px und zentriert. */ @media (min-width: 768px) { body { padding-left: var(--leiste); } .kopfleiste__innen, .kopfzeile, .inhalt { max-width: 900px; margin-inline: auto; } .inhalt { padding-bottom: var(--abstand-8); } } /* Fliesstextabschnitte bleiben schlicht — Glas ist fuer schwebende Ebenen. */ .abschnitt { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-m); padding: var(--abstand-5); } .abschnitt + .abschnitt { margin-top: var(--abstand-4); } .abschnitt__kopf { display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: center; justify-content: space-between; } .abstand-oben { margin-top: var(--abstand-6); } /* --------------------------------------------------------------------------- 5. Formulare --------------------------------------------------------------------------- */ .formular { display: grid; gap: var(--abstand-5); } .feld { display: grid; gap: var(--abstand-2); } .feld > label, .feld__beschriftung { font-size: var(--schrift-s); font-weight: 600; } /* 16 px, damit iOS beim Fokussieren nicht in die Seite hineinzoomt. */ .feld input, .feld select, .feld textarea { font-size: 16px; min-height: var(--treffer); padding: var(--abstand-3); background: var(--flaeche); color: var(--text); border: 1px solid var(--rand-stark); border-radius: var(--radius-s); width: 100%; font-family: inherit; } .feld textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; } .feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%), linear-gradient(135deg, var(--text-leise) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--abstand-8); } .feld input[aria-invalid="true"] { border-color: var(--fehler); } .feldfehler { color: var(--fehler); font-size: var(--schrift-s); } .feldhinweis { color: var(--text-leise); font-size: var(--schrift-s); } /* --------------------------------------------------------------------------- 6. Knoepfe --------------------------------------------------------------------------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: var(--treffer); padding: var(--abstand-3) var(--abstand-5); font-size: var(--schrift-m); font-weight: 600; background: var(--flaeche); color: var(--text); border: 1px solid var(--rand-stark); border-radius: 999px; cursor: pointer; text-decoration: none; /* Knoepfe reagieren beim Druecken. */ transition: transform var(--dauer-schnell) var(--kurve), opacity var(--dauer-schnell) var(--kurve); } .knopf:active { transform: scale(.97); } .knopf:disabled { opacity: .5; cursor: default; } .knopf--haupt { background: var(--akzent); color: var(--akzent-text); border-color: transparent; } .knopf--klein { min-height: 36px; padding: var(--abstand-2) var(--abstand-4); font-size: var(--schrift-s); } /* Runder Knopf mit nur einem Symbol — braucht ein aria-label. */ .knopf--rund { width: var(--treffer); min-width: var(--treffer); height: var(--treffer); padding: 0; } /* --------------------------------------------------------------------------- 7. Kleinteile --------------------------------------------------------------------------- */ .datenliste { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-2) var(--abstand-4); font-size: var(--schrift-s); } .datenliste dt { color: var(--text-leise); } .datenliste dd { margin: 0; } .meldung { padding: var(--abstand-3) var(--abstand-4); border: 1px solid var(--rand); border-left: 4px solid var(--rand-stark); border-radius: var(--radius-s); background: var(--flaeche); font-size: var(--schrift-s); } .meldung--fehler { border-left-color: var(--fehler); } .meldung--hinweis { border-left-color: var(--akzent); } .nur-fuer-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Ruhige leere Ansicht: ein Satz und ein Knopf. Kein Bild, kein Ausrufezeichen. */ .leere-ansicht { display: grid; justify-items: center; gap: var(--abstand-5); padding: var(--abstand-8) var(--abstand-4); text-align: center; color: var(--text-leise); } /* --------------------------------------------------------------------------- 8. Untergrenze der Bedienbarkeit --------------------------------------------------------------------------- */ /* Tastaturfokus immer sichtbar, mit deutlichem Ring. */ :focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: var(--radius-s); } /* Bewegung antwortet auf Handlungen. Wer sie abbestellt, bekommt keine — die App muss dann trotzdem verstaendlich bleiben. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }