/* ============================================================================= 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); } /* 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; 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); } .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)); } .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; } .reihe--umbruchlos { flex-wrap: nowrap; } /* 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); grid-template-columns: 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; } }