/* ========================================================================= 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; /* Oben --space-l statt --space-xl: die Intro-Sektion darüber bringt bereits ihr eigenes --space-xl Bottom-Padding mit, dazu käme sonst ein zweites. */ padding-block: var(--space-l) var(--space-xl); border-block-start: 1px solid var(--flair-linie); scroll-margin-block-start: calc(var(--nav-h) + var(--leiste-h, 0px) + var(--space-m)); } /* Eyebrow, 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 .eyebrow { color: var(--flair-mute); } .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. -------------------------------------------------------------------------- */ /* ---------- Forderungs-Akkordeon (themen.html) ----------------------------- Variante der Akkordeon-Komponente aus style.css. Basis-Klassen bleiben unangetastet, damit das Skript und der Zustand ohne JS weiter greifen: ohne JS sind alle Panels offen, das Layout haelt das aus. Jede Forderung traegt im zugeklappten Zustand eine Zeile Vorschau, im aufgeklappten die Begruendung links und die Zahl oder den persoenlichen Bezug rechts. Farben laufen ueber dieselben Flair-Tokens wie .theme-block oben. -------------------------------------------------------------------------- */ .accordion--forderungen { display: grid; gap: var(--space-s); border-block-start: 0; } .accordion--forderungen .accordion__item { background: var(--flair-flaeche); border: 1px solid var(--flair-linie); border-inline-start: 6px solid var(--flair-linie); border-block-end: 1px solid var(--flair-linie); transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .accordion--forderungen .accordion__item:has(.accordion__trigger[aria-expanded="true"]) { background: var(--flair-flaeche-offen); border-inline-start-color: var(--flair-akzent); } .accordion--forderungen .accordion__item:hover { border-inline-start-color: var(--flair-akzent); } /* ---- Kopfzeile ----------------------------------------------------------- */ .accordion--forderungen .accordion__trigger { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--space-m); padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.75rem); color: var(--flair-akzent-text); } .accordion--forderungen .accordion__trigger:hover { color: var(--flair-hover); } .forderung__num { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--flair-akzent); padding-block-start: 0.35em; } .forderung__kopf { display: grid; gap: 0.3em; min-inline-size: 0; } .forderung__titel { display: block; text-wrap: balance; } .forderung__teaser { display: block; font-family: var(--font-sans); font-size: var(--step--1); font-weight: 400; line-height: 1.5; color: var(--flair-mute); } .accordion--forderungen .accordion__icon { display: grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; border: 1px solid var(--flair-linie); color: var(--flair-akzent-text); transition: transform 0.25s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .accordion--forderungen .accordion__trigger:hover .accordion__icon { border-color: var(--flair-hover); color: var(--flair-hover); } /* ---- Inhalt -------------------------------------------------------------- */ .accordion--forderungen .accordion__panel { padding: 0 clamp(1.1rem, 2.4vw, 1.75rem) clamp(1.4rem, 3vw, 2rem); } .forderung__body { display: grid; gap: var(--space-m); padding-block-start: var(--space-m); border-block-start: 1px solid var(--flair-linie); } @media (min-width: 860px) { .forderung__body { grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr); gap: var(--space-l); } } .forderung__text > * + * { margin-block-start: var(--space-m); } .forderung__lead { max-inline-size: var(--measure); } .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); } /* ---- Rechte Spalte: Beleg oder eigener Bezug ----------------------------- */ .forderung__aside { display: grid; gap: var(--space-s); align-content: start; } /* Die Zahl ist Beleg, nicht Schlagzeile. Sie stand hier bis zum 21.09.2026 als grosse Kennzahl (.forderung__zahl-wert, --step-2) in einer eigenen Kachel. Joel: nicht die Zahlen sollen die Hauptbotschaft sein, sondern Position, Forderung und Begruendung — die Zahl ist die Orientierung dahinter. Die Kachel ist darum der geteilten Komponente .nachweis aus style.css gewichen; hier bleibt nur ihre Anbindung an die Flair-Tokens, damit sie auch auf dem dunklen Unternehmertum-Block liest. */ .theme-block .nachweis { border-inline-start-color: var(--flair-akzent); } .theme-block .nachweis__label, .theme-block .nachweis__text, .theme-block .nachweis__quelle { color: var(--flair-mute); } .theme-block .nachweis__wert { color: var(--flair-akzent-text); } .forderung__bezug { display: grid; gap: 0.4em; padding-inline-start: var(--space-m); border-inline-start: 3px solid var(--flair-akzent); } .forderung__bezug p:last-child { font-size: var(--step--1); line-height: 1.6; }