/* ========================================================================= Joel Sidler — Seiten-CSS: Themen (Grundlage) Gilt für themen.html. Traegt die drei Themenbloecke (Bildung, Unternehmer- tum, Wohnen) und das Forderungs-Akkordeon darin. Der politische Kompass liegt in css/pages/themen-kompass.css. Ergaenzt nur Layout. Komponenten kommen ausschliesslich aus css/style.css. ========================================================================= */ /* ---------- Themenblöcke (themen.html) ------------------------------------- Token-Vertrag »Flair«: jeder Themenblock liest seine Farben aus diesen Custom Properties statt aus style.css direkt. Die Werte hier sind der einzige, gemeinsame Stand — je eigene Flair-Dateien pro Thema (Bildung, Unternehmertum, Wohnen) gab es, sind aber entfernt: alle drei liefen am Ende auf diese neutralen Tokens hinaus. --flair-grund Grund des Blocks (heute: kein eigener Hintergrund, darum --paper) --flair-text Fliesstext und Ueberschriften (--ink) --flair-mute Teaser- und Nebentext (--ink-mute) --flair-flaeche Akkordeon-Eintrag, zugeklappt (--paper-alt) --flair-flaeche-offen Akkordeon-Eintrag, aufgeklappt (--white) --flair-linie Rahmen und Trennlinien (--line) --flair-akzent dekorativ: Balken links am offenen Eintrag, Listenquadrate, Forderungsnummer, Bezug-Steg, Nachweis-Steg (--cyan) --flair-akzent-text Trigger-Text, Nachweis-Wert, Icon (--blue-deep) --flair-hover Hover-Farbe Trigger und Icon (--magenta) --flair-motiv Farbe des Kompass-Motivs im Block (transparent = aus) --flair-fokus Fokusring (--focus) Themen-Agents setzen Tokens gescoped auf `.theme-block[data-flair="…"]` in ihrer eigenen Datei; neue Farben nur als color-mix() bestehender Tokens, keine neuen Hex-Werte. -------------------------------------------------------------------------- */ .theme-block { --flair-grund: var(--paper); --flair-text: var(--ink); --flair-mute: var(--ink-mute); --flair-flaeche: var(--paper-alt); --flair-flaeche-offen: var(--white); --flair-linie: var(--line); --flair-akzent: var(--cyan); --flair-akzent-text: var(--blue-deep); --flair-hover: var(--magenta); --flair-motiv: transparent; --flair-fokus: var(--focus); background: var(--flair-grund); color: var(--flair-text); position: relative; isolation: isolate; /* clip statt hidden: sticky- oder positionierte Kinder eines spaeteren Flairs (z. B. ein Motiv-::before) sollen weiter funktionieren koennen. */ overflow: clip; /* v13: oben und unten --space-l, ein volles Sektionspolster je Seite war zu viel Scrollweg. v16: ohne Haarlinie dazwischen — die Blöcke trennt jetzt der Kopf, der links mitfährt und vom nächsten abgelöst wird. */ padding-block: var(--space-l); scroll-margin-block-start: calc(var(--kopf-h) + var(--space-m)); } /* Links und Fokusring im Block beziehen sich auf dieselben Tokens, damit ein dunkles Flair sie mitzieht, ohne dass jemand jede Regel einzeln anfassen muss. Ueberschriften (h2, h3) und Fliesstext brauchen keine eigene Regel: sie erben `color` bereits von .theme-block. */ .theme-block a { color: var(--flair-akzent-text); } .theme-block :focus-visible { outline-color: var(--flair-fokus); } /* ---------- Motiv-Rezept (Kompass-Netz als Hintergrundmotiv) --------------- Kein aktiver Code — nur die Anleitung fuer die Themen-Agents. Das Netz liegt als eigenstaendige SVG unter img/kompass-netz.svg (Achteck-Geometrie, reiner Strich, schwarz). Ueber eine Maske faerbt --flair-motiv sie ein: .theme-block[data-flair="…"]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--flair-motiv); -webkit-mask: url("../../img/kompass-netz.svg") center / contain no-repeat; mask: url("../../img/kompass-netz.svg") center / contain no-repeat; } `position: absolute` braucht den `position: relative` von .theme-block als Bezug, `z-index: -1` haengt das Motiv unter den Inhalt — beides bringt .theme-block schon mit, `isolation: isolate` haelt den negativen Index im eigenen Stapelkontext. Getestet in Chrome (headless, 300px und 1200px Breite): die Maske rendert sichtbar, aber `vector-effect="non-scaling-stroke"` greift innerhalb einer extern referenzierten Maske nicht — die SVG wird beim Maskieren wie eine Rastergrafik skaliert, der Strich waechst mit der Boxgroesse mit. Darum traegt img/kompass-netz.svg eine feste Strichstaerke (0.6 Einheiten auf 200 Einheiten Breite), die bei rund 800px Motivgroesse fein bleibt und bei 300px wie bei 1200px noch als Haarlinie liest, nicht als Flaeche. Braucht ein Thema eine andere Strichstaerke oder eine Schraffur statt reiner Linien: eigene SVG als data-URI in der eigenen Datei anlegen, mit derselben Achteck-Geometrie (Ringe bei Radius 25/50/75/100, Ecken auf Vielfachen von 45°, Nord oben), nicht diese Datei aendern. -------------------------------------------------------------------------- */ /* ---------- Forderungen (themen.html) -------------------------------------- Seit v12 kein Akkordeon mehr: Kästen mit Balken und Pfeilknopf lasen sich wie ein Baukasten, und aufgeklappt war ohnehin alles. Jetzt eine ruhige, nummerierte Liste wie ein Zeitungsdossier — grosse Ziffer links, Titel und Ansätze daneben, Haarlinien dazwischen. Seit v16 klappt nur die Begründung (Problem und Quelle) auf, als schlichte Textzeile mit +/−. -------------------------------------------------------------------------- */ .forderungen { list-style: none; margin: 0; padding: 0; border-block-start: 2px solid var(--flair-text); } .forderung { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-s) var(--space-m); padding-block: var(--space-m); border-block-end: 1px solid var(--flair-linie); } /* v16: unter dem letzten Punkt eines Themas keine Linie mehr (Joel). */ .forderung:last-child { border-block-end: 0; } .forderung__num { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1; font-variant-numeric: tabular-nums; color: var(--flair-akzent-text); } .forderung__text { display: grid; gap: var(--space-s); align-content: start; } .forderung__titel { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; text-wrap: balance; } .forderung__lead { max-inline-size: var(--measure); } /* v16: erst die zwei Punkte, darunter »Warum das wichtig ist« zum Aufklappen — Problem und Quelle. Spart Platz (Joel). Natives
, funktioniert ohne JS und per Tastatur. */ .forderung__quelle { font-size: var(--step--1); color: var(--flair-mute); } .forderung__warum > p { margin-block-start: var(--space-s); } .forderung__warum > summary { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); color: var(--flair-akzent-text); list-style: none; cursor: pointer; transition: color 0.2s var(--ease); } .forderung__warum > summary::-webkit-details-marker { display: none; } .forderung__warum > summary::after { content: "+"; display: grid; place-items: center; inline-size: 1.4em; block-size: 1.4em; border: 1px solid currentColor; font-weight: 600; line-height: 1; } .forderung__warum[open] > summary::after { content: "−"; } .forderung__warum > summary:hover { color: var(--flair-hover); } .forderung__liste { list-style: none; padding: 0; display: grid; gap: var(--space-s); max-inline-size: var(--measure); } .forderung__liste li { position: relative; padding-inline-start: 1.6em; } .forderung__liste li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em; inline-size: 0.55em; block-size: 0.55em; background: var(--flair-akzent); } /* ---------- Themenraster (v13) -------------------------------------------- Zwei Spalten ab 960 px: links, worum es geht, was ich denke und warum es mir persönlich wichtig ist; rechts, was ich fordere. Vorher stand alles untereinander, und ein Thema war drei Bildschirme lang. */ .theme-block__raster { display: grid; gap: var(--space-l); } @media (min-width: 960px) { .theme-block__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } /* v16: der Kopf fährt links mit, bis sein Block endet, dann schiebt der nächste ihn weg (Joel). Unter der Navigation, auch wenn sie beim Hochscrollen zurückkommt. overflow: clip auf .theme-block bricht sticky nicht, hidden würde es. */ .theme-block__kopf { position: sticky; inset-block-start: calc(var(--kopf-h) + var(--space-m)); } } /* ---------- Themenkopf (v12) ---------------------------------------------- Der Themenname ist die Überschrift — dieselben drei Wörter wie auf der Startseite —, die Zuspitzung steht als Lead darunter, dann ein Absatz (v14; vorher »Meine Haltung« und »Mein Bezug«). */ .theme-block h2 { font-size: var(--step-3); line-height: 1; letter-spacing: -0.02em; } .theme-block__claim { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.25; color: var(--flair-akzent-text); max-inline-size: 30ch; } .theme-block__forderungen > h3 { font-size: var(--step--1); color: var(--flair-mute); } /* Intro neben dem Smartspider: Titel und Lead tragen die Spalte allein, darum gross. Seit v16 dieselben zwei Sätze wie im Hero der Startseite. */ #themen-h { font-size: var(--step-3); line-height: 1; letter-spacing: -0.025em; } .themen-intro__lead { font-size: var(--step-0); line-height: 1.55; color: var(--ink); }