/* ============================================================================= app.css — Basis, Schrift, Layout, Prose, Utilities Setzt tokens.css als bereits geladen voraus (kein @import!). Ladereihenfolge im : tokens.css -> app.css -> komponenten.css -> print.css (media="print") Inhalt: 01 Selbstgehostete Schrift 02 Modernes Reset 03 Basis / Dokument 04 Typografie 05 Medien ohne Layout-Shift 06 Fokus und Barrierefreiheit 07 Layout: Container, Raster, Stack, Seitengeruest 08 Prose (.inhalt) fuer gerenderten Markdown 09 Utilities 10 Bewegungsreduktion ========================================================================== */ /* ============================================================================= 01 Selbstgehostete variable Schrift Datei erwartet unter assets/fonts/inter-var-latin.woff2 ========================================================================== */ /* Ausgeliefert wird ohne eigene Schriftdatei. Die Textschrift ist Arial, festgelegt an genau einer Stelle: --font-sans in tokens.css. Das spart eine Anfrage und rund 100 kB, und die Schrift ist sofort da statt erst nach dem Nachladen. Wer spaeter doch eine eigene Schrift mitliefern moechte, hat genau EINEN Handgriff in DIESER Datei: die Variable-Font-Datei als assets/fonts/inter-var-latin.woff2 ablegen, dann die Kommentarklammer um diesen Abschnitt entfernen - die oeffnende Zeile oben und die schliessende Zeile ganz unten, beide bestehen nur aus zwei Zeichen. Der Block bringt das @font-face UND die Neubelegung von --font-sans mit; app.css wird nach tokens.css geladen, die Neubelegung gewinnt also. In tokens.css ist dafuer nichts zu aendern. Ohne die Datei darf der Block nicht aktiv sein - sonst fragt jeder Browser sie einmal vergeblich an. Und die Lizenz der Schrift gehoert dann in CREDITS.md (bei Inter: SIL Open Font License 1.1). @font-face { font-family: "Inter var"; src: url("../fonts/inter-var-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --font-sans: "Inter var", Arial, "Helvetica Neue", Helvetica, "Liberation Sans", Roboto, sans-serif; } */ /* ============================================================================= 02 Modernes Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopfzeile-hoehe) + var(--space-4)); -moz-tab-size: 2; tab-size: 2; } body { min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ul[role="list"], ol[role="list"] { list-style: none; padding-inline: 0; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; cursor: pointer; } button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; } textarea { resize: vertical; } table { border-collapse: collapse; border-spacing: 0; } fieldset { border: 0; padding: 0; min-inline-size: 0; } legend { padding: 0; } summary { cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; } dialog { border: 0; padding: 0; background: none; color: inherit; max-width: none; max-height: none; } hr { border: 0; border-top: var(--rand-breite) solid var(--farbe-rand); } address { font-style: normal; } abbr[title] { text-decoration: underline dotted; cursor: help; } ::selection { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); } /* ============================================================================= 03 Basis / Dokument ========================================================================== */ body { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-normal); line-height: var(--lh-normal); color: var(--farbe-text); background-color: var(--farbe-bg); font-variant-numeric: tabular-nums; font-feature-settings: "kern" 1; } /* Grundgeruest: Kopfzeile, Inhalt, Fusszeile — Fusszeile klebt unten */ .seite { display: flex; flex-direction: column; min-height: 100svh; } .seite > main { flex: 1 1 auto; padding-block: var(--space-8) var(--space-16); } /* Der Kopfbereich liegt seit der Behebung der `region`-Verstöße innerhalb von
und bringt seinen Abstand selbst mit. Ohne diese Zeile käme der Innenabstand von
obendrauf und alles rutschte nach unten. Der Abstand, den dieser Innenabstand früher ZWISCHEN Kopfbereich und Inhalt erzeugt hat, sitzt jetzt am Kopfbereich selbst — sonst rückte der Inhalt um 32 px nach oben, und das wäre eine optische Änderung. */ .seite > main.inhalt--mit-kopfbereich { padding-block-start: 0; } .seitenkopf { margin-block-end: var(--space-8); } /* Eigene Bildlaufleisten, die sich am Theme orientieren */ * { scrollbar-color: var(--farbe-rand-stark) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--farbe-rand-stark); border-radius: var(--radius-voll); border: 2px solid var(--farbe-bg); } /* ============================================================================= 04 Typografie ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-fett); line-height: var(--lh-knapp); letter-spacing: var(--ls-eng); text-wrap: balance; /* Ein Wort breiter als das Fenster ("Trainingstagebuch" bei 320 px) wird umbrochen statt hinauszuragen - nur dann, sonst aendert sich nichts (Restarbeiten A2; hyphens: auto haette auch normale Zeilen umgebrochen). */ overflow-wrap: break-word; color: var(--farbe-text); } h1 { font-size: var(--fs-4xl); font-weight: var(--fw-schwarz); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); } h5 { font-size: var(--fs-lg); } h6 { font-size: var(--fs-base); font-weight: var(--fw-halbfett); } p, li, dd, dt { text-wrap: pretty; } a { color: var(--farbe-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--farbe-link-hover); } strong, b { font-weight: var(--fw-halbfett); } small { font-size: var(--fs-sm); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } kbd { display: inline-block; padding: 0.1em 0.4em; border: var(--rand-breite) solid var(--farbe-rand-stark); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--farbe-flaeche-hoch); font-size: 0.85em; line-height: 1.4; } mark { background: var(--farbe-akzent-weich); color: var(--farbe-text); padding: 0.05em 0.25em; border-radius: var(--radius-xs); } /* Vorspann / Lead-Absatz */ .lead { font-size: var(--fs-lg); color: var(--farbe-text-leise); max-width: var(--breite-text); } .leise { color: var(--farbe-text-leise); } .schwach { color: var(--farbe-text-schwach); } .uebertitel { font-size: var(--fs-xs); font-weight: var(--fw-halbfett); letter-spacing: var(--ls-weit); text-transform: uppercase; color: var(--farbe-akzent); } /* ============================================================================= 05 Medien ohne Layout-Shift ========================================================================== */ img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; } img, video { height: auto; } img { background-color: var(--farbe-flaeche-hoch); } svg { fill: currentColor; } /* Feste Seitenverhaeltnisse reservieren Platz, bevor das Bild laedt */ .bild-rahmen { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--farbe-flaeche-hoch); } .bild-rahmen > img, .bild-rahmen > video { width: 100%; height: 100%; object-fit: cover; } .bild-rahmen--quadrat { aspect-ratio: 1 / 1; } .bild-rahmen--portrait { aspect-ratio: 3 / 4; } .bild-rahmen--breit { aspect-ratio: 21 / 9; } .bild-rahmen--uebung { aspect-ratio: 4 / 3; } .bild-rahmen--enthalten > img { object-fit: contain; background: var(--farbe-flaeche); } figure { margin: 0; } figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--farbe-text-leise); } /* ============================================================================= 06 Fokus und Barrierefreiheit ========================================================================== */ :focus { outline: none; } :focus-visible { outline: var(--fokus-breite) solid var(--farbe-fokus); outline-offset: var(--fokus-abstand); border-radius: var(--radius-sm); } /* Fokus innerhalb dunkler Flaechen zusaetzlich absetzen */ .auf-akzent:focus-visible, .btn--primaer:focus-visible { outline-color: var(--farbe-text); } /* Nur fuer Screenreader */ .visually-hidden, .nur-screenreader { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* Sichtbar, sobald fokussiert (z. B. Sprunglinks) */ .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* Mindest-Trefferflaeche 44px fuer alles Interaktive */ a[role="button"], button, [type="button"], [type="submit"], [type="reset"], .ziel-min { min-height: var(--ziel-min); } /* Kleine Icon-Schaltflaechen behalten die Trefferflaeche ueber ein unsichtbares Pseudoelement, ohne optisch zu wachsen. */ .icon-knopf { position: relative; display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; min-height: 0; border-radius: var(--radius-md); color: var(--farbe-text-leise); transition: color var(--dauer-schnell) var(--ease-standard), background-color var(--dauer-schnell) var(--ease-standard); } .icon-knopf::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; inline-size: var(--ziel-min); block-size: var(--ziel-min); } .icon-knopf:hover { color: var(--farbe-text); background: var(--farbe-flaeche-hover); } /* Hoher Kontrastmodus */ @media (forced-colors: active) { :focus-visible { outline: 3px solid CanvasText; } } /* ============================================================================= 07 Layout ========================================================================== */ .container { width: 100%; max-width: var(--breite-container); margin-inline: auto; padding-inline: var(--container-pad); } .container--eng { max-width: var(--breite-eng); } /* F-026: Fuenf Kontoseiten trugen dafuer ein literales style-Attribut, das die CSP ohne unsafe-inline blockt - die Regel wurde verworfen und der Abstand fehlte. */ .container--luftig { padding-block: var(--space-10); } .container--text { max-width: var(--breite-text); } .container--inhalt { max-width: var(--breite-inhalt); } .container--weit { max-width: var(--breite-weit); } .container--voll { max-width: none; } /* Vertikaler Rhythmus */ .stack > * + * { margin-block-start: var(--stack-abstand, var(--space-4)); } .stack--eng { --stack-abstand: var(--space-2); } .stack--weit { --stack-abstand: var(--space-8); } .stack--sehr-weit { --stack-abstand: var(--space-12); } /* Abschnitt mit Standardabstand */ .abschnitt { padding-block: var(--space-10); } .abschnitt--gross { padding-block: var(--space-16); } .abschnitt--flaeche { background: var(--farbe-flaeche); border-block: var(--rand-breite) solid var(--farbe-rand-leise); } /* Flexible Reihe */ .reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--reihe-abstand, var(--space-3)); } /* Wie in der Kopfzeile (F-002): ein einzelnes Element, das allein breiter ist als die Zeile, darf unter seine Inhaltsbreite schrumpfen. Was nebeneinander passt, bleibt davon unberuehrt (Restarbeiten A2). */ .reihe > * { min-inline-size: 0; } .reihe--eng { --reihe-abstand: var(--space-2); } .reihe--weit { --reihe-abstand: var(--space-6); } .reihe--oben { align-items: flex-start; } .reihe--zwischen { justify-content: space-between; } .reihe--ende { justify-content: flex-end; } .reihe--mitte { justify-content: center; } /* Automatisches Raster: Mobile First, waechst mit dem Platz */ .raster { display: grid; gap: var(--raster-abstand, var(--space-6)); grid-template-columns: repeat( auto-fill, minmax(min(var(--raster-min, 16rem), 100%), 1fr) ); } .raster--eng { --raster-abstand: var(--space-3); } .raster--weit { --raster-abstand: var(--space-8); } .raster--klein { --raster-min: 11rem; } .raster--gross { --raster-min: 22rem; } /* Feste Spaltenzahlen ab Breakpoint */ .raster-2, .raster-3, .raster-4 { display: grid; gap: var(--raster-abstand, var(--space-6)); grid-template-columns: 1fr; } @media (min-width: 480px) { .raster-2, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .spanne-2 { grid-column: span 2; } .spanne-voll { grid-column: 1 / -1; } /* Seitengeruest mit Seitenleiste (z. B. Inhaltsverzeichnis, Filter) */ .seiten-layout { display: grid; gap: var(--space-8); /* minmax(0, …) statt 1fr: sonst setzt der breiteste Inhalt (Tabelle, Knopfreihe) die Mindestbreite der Spalte, und die Seite laeuft waagerecht ueber (gemessen 14.09.2026 bis 514 px, Restarbeiten A2). */ grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 1024px) { .seiten-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-10); } .seiten-layout--links { grid-template-columns: 16rem minmax(0, 1fr); } .seiten-layout__leiste { position: sticky; top: calc(var(--kopfzeile-hoehe) + var(--space-4)); max-height: calc(100svh - var(--kopfzeile-hoehe) - var(--space-8)); overflow-y: auto; overscroll-behavior: contain; } .seiten-layout--links .seiten-layout__leiste { order: -1; } } /* Zentrierter Inhaltsblock mit Zeilenlaengenbegrenzung */ .mittig { margin-inline: auto; text-align: center; } .messwert-gruppe { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); } /* Container Queries: Karteninhalte richten sich nach der Spaltenbreite, nicht nach dem Viewport. */ .cq { container-type: inline-size; } .cq-karten { container: karten / inline-size; } /* ============================================================================= 08 Prose (.inhalt) — gerenderter Markdown ========================================================================== */ .inhalt { max-width: var(--breite-text); font-size: var(--fs-base); line-height: var(--lh-weit); color: var(--farbe-text-leise); overflow-wrap: break-word; } .inhalt--breit { max-width: var(--breite-inhalt); } .inhalt > * + * { margin-block-start: var(--space-5); } .inhalt h2, .inhalt h3, .inhalt h4 { color: var(--farbe-text); scroll-margin-top: calc(var(--kopfzeile-hoehe) + var(--space-6)); } .inhalt h2 { margin-block-start: var(--space-12); padding-block-end: var(--space-2); border-bottom: var(--rand-breite) solid var(--farbe-rand); font-size: var(--fs-2xl); } .inhalt h3 { margin-block-start: var(--space-10); font-size: var(--fs-xl); } .inhalt h4 { margin-block-start: var(--space-8); font-size: var(--fs-lg); } .inhalt > :first-child { margin-block-start: 0; } .inhalt p { margin-block: 0; } .inhalt a { text-decoration: underline; text-decoration-color: hsl(var(--kanal-akzent) 52% / 0.5); } .inhalt a:hover { text-decoration-color: currentColor; } .inhalt ul, .inhalt ol { padding-inline-start: var(--space-6); } .inhalt li + li { margin-block-start: var(--space-2); } .inhalt ul > li::marker { color: var(--farbe-akzent); } .inhalt ol > li::marker { color: var(--farbe-akzent); font-weight: var(--fw-halbfett); } .inhalt li > ul, .inhalt li > ol { margin-block-start: var(--space-2); } .inhalt blockquote { margin-inline: 0; padding: var(--space-4) var(--space-5); border-inline-start: 4px solid var(--farbe-akzent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--farbe-flaeche); color: var(--farbe-text); font-size: var(--fs-lg); } .inhalt blockquote > * + * { margin-block-start: var(--space-3); } .inhalt blockquote cite { display: block; font-size: var(--fs-sm); font-style: normal; color: var(--farbe-text-schwach); } .inhalt img, .inhalt video { border-radius: var(--radius-lg); border: var(--rand-breite) solid var(--farbe-rand-leise); } .inhalt figure { margin-block: var(--space-8); } .inhalt hr { margin-block: var(--space-10); } .inhalt code { padding: 0.15em 0.4em; border-radius: var(--radius-sm); background: var(--farbe-flaeche-hoch); border: var(--rand-breite) solid var(--farbe-rand-leise); color: var(--farbe-text); word-break: break-word; } .inhalt pre { padding: var(--space-4); border-radius: var(--radius-lg); border: var(--rand-breite) solid var(--farbe-rand); background: var(--farbe-bg-tief); overflow-x: auto; font-size: var(--fs-sm); line-height: var(--lh-normal); -webkit-overflow-scrolling: touch; } .inhalt pre code { padding: 0; border: 0; background: none; font-size: inherit; white-space: pre; } .inhalt table { width: 100%; font-size: var(--fs-sm); border: var(--rand-breite) solid var(--farbe-rand); border-radius: var(--radius-md); overflow: hidden; } .inhalt th, .inhalt td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: var(--rand-breite) solid var(--farbe-rand-leise); } .inhalt th { background: var(--farbe-flaeche-hoch); color: var(--farbe-text); font-weight: var(--fw-halbfett); } .inhalt tbody tr:last-child td { border-bottom: 0; } .inhalt dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); } .inhalt dt { font-weight: var(--fw-halbfett); color: var(--farbe-text); } .inhalt dd { margin: 0; } /* Ankerlinks neben Ueberschriften (Markdown-Renderer setzt .anker) */ .inhalt .anker { margin-inline-start: var(--space-2); opacity: 0; text-decoration: none; color: var(--farbe-text-schwach); transition: opacity var(--dauer-schnell) var(--ease-standard); } .inhalt :is(h2, h3, h4):hover .anker, .inhalt .anker:focus-visible { opacity: 1; } /* ============================================================================= 09 Utilities ========================================================================== */ .verborgen, [hidden] { display: none !important; } .unsichtbar { visibility: hidden; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .grid { display: grid; } .inline-flex { display: inline-flex; } .voll-breit { width: 100%; } .max-text { max-width: var(--breite-text); } .max-eng { max-width: var(--breite-eng); } .text-links { text-align: left; } .text-mitte { text-align: center; } .text-rechts { text-align: right; } .fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-lg { font-size: var(--fs-lg); } .fs-xl { font-size: var(--fs-xl); } .fw-mittel { font-weight: var(--fw-mittel); } .fw-halbfett { font-weight: var(--fw-halbfett); } .fw-fett { font-weight: var(--fw-fett); } .grossbuchstaben { text-transform: uppercase; letter-spacing: var(--ls-weit); } .zahlen-tabellarisch { font-variant-numeric: tabular-nums; } .kein-umbruch { white-space: nowrap; } .umbruch-erzwingen { overflow-wrap: anywhere; } /* Textabschnitt nach n Zeilen abschneiden */ .klemme-1, .klemme-2, .klemme-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .klemme-1 { -webkit-line-clamp: 1; line-clamp: 1; } .klemme-2 { -webkit-line-clamp: 2; line-clamp: 2; } .klemme-3 { -webkit-line-clamp: 3; line-clamp: 3; } .mt-0 { margin-block-start: 0; } .mt-2 { margin-block-start: var(--space-2); } .mt-4 { margin-block-start: var(--space-4); } .mt-6 { margin-block-start: var(--space-6); } .mt-8 { margin-block-start: var(--space-8); } .mb-0 { margin-block-end: 0; } .mb-2 { margin-block-end: var(--space-2); } .mb-4 { margin-block-end: var(--space-4); } .mb-6 { margin-block-end: var(--space-6); } .mb-8 { margin-block-end: var(--space-8); } .mx-auto { margin-inline: auto; } .p-0 { padding: 0; } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .flaeche { background: var(--farbe-flaeche); border: var(--rand-breite) solid var(--farbe-rand); border-radius: var(--radius-lg); } .rand-oben { border-top: var(--rand-breite) solid var(--farbe-rand); } .rand-unten { border-bottom: var(--rand-breite) solid var(--farbe-rand); } .radius-md { border-radius: var(--radius-md); } .radius-lg { border-radius: var(--radius-lg); } .radius-voll { border-radius: var(--radius-voll); } .schatten-sm { box-shadow: var(--schatten-sm); } .schatten-md { box-shadow: var(--schatten-md); } .schatten-lg { box-shadow: var(--schatten-lg); } .farbe-akzent { color: var(--farbe-akzent); } .farbe-erfolg { color: var(--farbe-erfolg); } .farbe-warnung { color: var(--farbe-warnung); } .farbe-fehler { color: var(--farbe-fehler); } .farbe-info { color: var(--farbe-info); } /* Sichtbarkeit nach Breakpoint */ .nur-mobil { display: initial; } .ab-sm, .ab-md, .ab-lg { display: none; } @media (min-width: 768px) { .nur-mobil { display: none !important; } .ab-sm { display: initial; } } @media (min-width: 1024px) { .ab-md { display: initial; } .bis-md { display: none !important; } } @media (min-width: 1280px) { .ab-lg { display: initial; } } /* Scroll-Schnappen fuer horizontale Listen (z. B. Uebungskarussell) */ .schnapp-reihe { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-2); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .schnapp-reihe > * { scroll-snap-align: start; flex: 0 0 min(18rem, 80%); } /* ============================================================================= 10 Bewegungsreduktion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Parallax- und Transformeffekte abschalten */ .karte:hover, .btn:hover, .karte:focus-within { transform: none !important; } }