/* ============================================================================= NEONNACHT — Komponenten ============================================================================= atelier.css traegt Tokens und Primitives. Diese Datei traegt die Bausteine, die alle Kundenseiten gemeinsam brauchen und die bisher aus styles-news.css kamen. Warum getrennt: atelier.css gilt fuer JEDE umgestellte Seite, auch fuer die Startseite, die von alledem nichts braucht. Wer nur Tokens will, laedt nur atelier.css. Reihenfolge auf einer Seite: atelier.css → atelier-komponenten.css → atelier-panel.css → seite.css ----------------------------------------------------------------------------- Grundlage ist eine Analyse aller vierzehn Kundenseiten. Was hier steht, wurde dort mehrfach gebraucht; was nur einmal vorkam, bleibt bei der Seite. Ausdruecklich NICHT gebaut: eine Tabellenkomponente. In keiner der vierzehn Seiten und in keinem der Renderer steht ein . ============================================================================= */ /* ============================================================================= 1 RESET UND FLIESSTEXT ----------------------------------------------------------------------------- styles-news.css:4-8 setzt `* { margin:0; padding:0 }` und wird heute von allen vierzehn Seiten geladen. atelier.css liefert nur box-sizing. Ohne Ersatz kaemen auf jeder umgestellten Seite die Browser-Voreinstellungen fuer h1-h6, p, ul und form zurueck — und zwar ueberall gleichzeitig. Bewusst kein `* { margin: 0 }`: das nimmt auch dem Fliesstext seinen Rhythmus und man baut ihn danach muehsam wieder auf. Stattdessen gezielt. ============================================================================= */ /* Browser-Standardrand von 8px. styles-news.css hat ihn frueher genommen; ohne das waeren Inhalte auf dem Telefon 16px schmaler und randlose Leisten (Filter, Laufband) endeten vor dem Bildschirmrand. */ body.atelier { margin: 0; } .atelier h1, .atelier h2, .atelier h3, .atelier h4, .atelier h5, .atelier h6, .atelier p, .atelier figure, .atelier blockquote, .atelier dl, .atelier dd { margin: 0; } .atelier ul, .atelier ol { margin: 0; padding: 0; } .atelier ul[class], .atelier ol[class] { list-style: none; } .atelier fieldset { margin: 0; padding: 0; border: 0; } .atelier legend { padding: 0; } .atelier img, .atelier svg, .atelier video { max-inline-size: 100%; } /* :where() haelt diesen Reset auf Spezifitaet (0,0,1). Als ".atelier button" hatte er (0,1,1) und schlug damit jede einfache Klassenregel: .a-btn, .a-btn--primary, .n-btn, .checkout-btn und die Knoepfe in header.js kamen in 15px, normaler Staerke und Fliesstextgrau — auf dem Neonverlauf kaum lesbar. Ein Reset darf nie gegen eine Komponente gewinnen. */ :where(.atelier) button, :where(.atelier) input, :where(.atelier) select, :where(.atelier) textarea { font: inherit; color: inherit; } /* -- Prosa -------------------------------------------------------------------- Fuer die Rechtstexte und jeden laengeren Fliesstext. Als eigene Klasse, weil sie NUR dort gelten soll: eine globale h2-Regel wuerde in der App jede Ueberschrift treffen, die eigentlich Bebas Neue tragen soll. Die Rechtstexte sind der Grund, warum es diese Komponente ueberhaupt gibt — datenschutz.html hat 22 Zwischenueberschriften der dritten und 7 der vierten Ebene. Die Skala reicht deshalb bis h4. */ .a-prosa { max-inline-size: 72ch; color: var(--c-text-body); } .a-prosa h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-2xl); line-height: .95; text-transform: uppercase; color: var(--c-text); margin-block-end: var(--s-5); } .a-prosa h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); line-height: 1; text-transform: uppercase; color: var(--c-text); margin-block: var(--s-7) var(--s-3); padding-block-end: var(--s-2); border-block-end: var(--line); } .a-prosa h3 { font-size: var(--t-md); font-weight: 700; line-height: var(--lh-snug); color: var(--c-text); margin-block: var(--s-5) var(--s-2); } .a-prosa h4 { font-size: var(--t-base); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); margin-block: var(--s-4) var(--s-2); } .a-prosa p { margin-block-end: var(--s-4); line-height: var(--lh-loose); } .a-prosa ul, .a-prosa ol { margin-block-end: var(--s-4); padding-inline-start: var(--s-5); } .a-prosa li { margin-block-end: var(--s-2); line-height: var(--lh-loose); } .a-prosa li::marker { color: var(--c-accent-2); } .a-prosa strong, .a-prosa b { color: var(--c-text); font-weight: 700; } .a-prosa hr { margin-block: var(--s-6); block-size: 1px; border: 0; background: var(--c-line); } .a-prosa > :first-child { margin-block-start: 0; } /* -- Links -------------------------------------------------------------------- In KEINEM Stylesheet des Projekts gab es bisher eine a-Regel — auch nicht in den alten. Links im Fliesstext waren also browserblau auf hellem Grund und waeren auf dunklem Grund kaum noch lesbar. Betrifft die Rechtstexte, wo Links auf Behoerden und die EU-Streitschlichtung stehen und funktionieren muessen. */ .atelier a { color: var(--c-accent-3); text-decoration-color: rgb(34 211 238 / .4); text-underline-offset: 2px; } @media (hover: hover) { .atelier a:hover { color: var(--c-text); text-decoration-color: currentColor; } } /* Knoepfe und Karten sind auch — die sollen davon nichts abbekommen. */ .atelier a.a-card, .atelier a.hn-link, .atelier a.product-item { color: inherit; text-decoration: none; } /* Link-Knoepfe nehmen die Schriftfarbe des Knopfs (--btn-fg), nicht die des Absatzes: vorher erbten sie per inherit — grau neben weissen