/* ========================================================================== DAO Systems — base.css Reset, Basis-Typografie, Buttons, Karten, Layout-Primitive, Utilities. Setzt css/tokens.css voraus und wird VOR css/style.css eingebunden. Regel: keine Literalwerte für Farben, Abstände oder Schriftgrößen. Ausschließlich var(--…) aus tokens.css. Namenskonvention: .btn, .card, .container, .section Komponenten / Layout-Primitive .btn--primary Modifier (BEM, doppelter Bindestrich) .u-* Utility, ein Zweck, darf überschreiben .on-dark Kontextklasse: Inhalt auf dunkler Fläche ========================================================================== */ /* ========================================================================== 1. RESET / NORMALIZE ========================================================================== */ *, *::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(--header-height) + var(--space-2)); -moz-tab-size: 4; tab-size: 4; } body { min-height: 100vh; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Deutsche Komposita sind länger als ein schmales Display breit ist ("Auftragsverarbeitungsvertrag", "Datenschutzerklärung"). steht, damit greift die deutsche Silbentrennung und das Wort bricht sauber, statt die Seite horizontal scrollen zu lassen. text-wrap: balance/pretty bricht KEINE Wörter — dafür zusätzlich overflow-wrap weiter unten. Das -webkit-Präfix ist nötig: Safari kennt `hyphens` erst ab Version 17. */ -webkit-hyphens: auto; hyphens: auto; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } svg { fill: currentColor; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: var(--border-width) solid var(--color-border); margin-block: var(--space-4); } [hidden] { display: none !important; } /* ========================================================================== 2. BASIS-TYPOGRAFIE ========================================================================== */ /* Umbruch-Sicherheitsnetz: Überschriften laufen in großen Schriftgraden sonst aus dem Container (gemessen: "Datenschutzerklärung" als h1 bei 375px, 36px Überlauf). Zusammen mit `hyphens: auto` am body bricht das Wort zuerst an einer Trennstelle und erst zur Not mitten im Wort. */ h1, h2, h3, h4, h5, h6 { color: var(--color-primary); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: var(--font-size-h1); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); font-weight: var(--font-weight-bold); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } h4 { font-size: var(--font-size-h4); } h5, h6 { font-size: var(--font-size-md); } /* Abstand kommt vom Folge-Element, nicht vom Heading selbst -> keine Collapsing-Überraschungen, keine leeren Vorspänne. */ h1 + *, h2 + *, h3 + *, h4 + * { margin-top: var(--space-2); } p { max-width: var(--measure); text-wrap: pretty; overflow-wrap: break-word; } p + p { margin-top: var(--space-2); } a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: from-font; transition: var(--transition-color); } a:hover { color: var(--color-link-hover); } strong, b { font-weight: var(--font-weight-semibold); color: var(--color-text); } small { font-size: var(--font-size-sm); color: var(--color-text-subtle); line-height: var(--line-height-snug); } ul, ol { padding-left: var(--space-3); max-width: var(--measure); } li + li { margin-top: var(--space-1); } li::marker { color: var(--color-secondary); } ul ul, ol ol, ul ol, ol ul { margin-top: var(--space-1); } dl { max-width: var(--measure); } dt { font-weight: var(--font-weight-semibold); color: var(--color-primary); } dd { margin-top: var(--space-0-5); color: var(--color-text-muted); } dd + dt { margin-top: var(--space-2); } blockquote { border-left: var(--border-width-accent) solid var(--color-secondary); padding-left: var(--space-2); color: var(--color-text-muted); } code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--font-size-sm); } code { background-color: var(--color-surface-tinted); border-radius: var(--radius-sm); padding: var(--space-0-5) var(--space-1); } address { font-style: normal; } ::selection { background-color: var(--color-primary); color: var(--color-text-invert); } /* ========================================================================== 3. FOKUS — immer sichtbar, nie ausgeblendet ========================================================================== */ :focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* Browser ohne :focus-visible bekommen den klassischen Ring zurück. */ :focus:not(:focus-visible) { outline: none; } /* Auf dunklen Flächen ist das dunkle Amber zu schwach -> helles Amber. */ .on-dark :focus-visible { outline-color: var(--color-focus-invert); } /* ========================================================================== 4. LAYOUT-PRIMITIVE ========================================================================== */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: var(--container-wide); } .section { padding-block: var(--section-padding-y); } .section--lg { padding-block: var(--section-padding-y-lg); } .section--tinted { background-color: var(--color-surface-tinted); } /* Zwei gleich getönte Sektionen direkt untereinander sollen wie eine wirken. */ .section--tinted + .section--tinted { padding-top: var(--space-0); } /* ========================================================================== 5. KONTEXT: INHALT AUF DUNKLER FLÄCHE Auf ein Element mit dunklem Hintergrund setzen (Footer, dunkler Hero). Der Hintergrund selbst wird in style.css gesetzt. ========================================================================== */ .on-dark { color: var(--color-text-invert-muted); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6, .on-dark strong, .on-dark dt { color: var(--color-text-invert); } .on-dark a { color: var(--color-text-invert); } .on-dark a:hover { color: var(--color-focus-invert); } .on-dark small, .on-dark .u-text-muted, .on-dark .u-text-subtle { color: var(--color-text-invert-muted); } .on-dark hr { border-top-color: var(--color-border-on-dark); } .on-dark li::marker { color: var(--color-text-invert-muted); } /* ========================================================================== 6. BUTTONS Basis + Farbvarianten. Immer auf oder