@profitlich/template-toolkit 5.8.0 → 6.1.0

package/CLAUDE.project.md

@@ -102,6 +102,22 @@ Ist ESLint eingerichtet, braucht `__DEBUG__` einen Eintrag unter `languageOption
 - Jedes Modul/Snippet hat eine eigene `.js`-Datei, die das zugehörige SCSS importiert — auch wenn sie sonst keine Logik enthält.
 - Keine globalen Styles in Modul- oder Snippet-SCSS-Dateien.
 
+#### Grundregel und Breakpoint-Blöcke
+
+**In einen `mediaquery()`-Block gehört nur, was sich pro Breakpoint unterscheidet** – in der Praxis fast nur Aufrufe mit `$layout`. Feste Werte wie `display: flex` oder `position: fixed` stehen einmal in der Grundregel oben in der Datei. Einen Breakpoint-Block nie als Kopie eines anderen anlegen: Genau so wandern feste Werte in alle drei Blöcke.
+
+Gleich *geschriebene* `$layout`-Aufrufe wie `font($layout, 14, 20)` sind keine Wiederholung – sie ergeben pro Breakpoint andere Werte und bleiben in den Blöcken.
+
+Das PostCSS-Plugin `@profitlich/template-toolkit/vite/postcssBreakpointDry` meldet beim Build und im Dev-Server, wo es trotzdem passiert ist: Deklarationen, die mit gleichem Selektor und Wert in Media-Queries stehen, die zusammen alle Breiten abdecken, und solche, die nur die Grundregel wiederholen. Es warnt nur. Eingebunden in `postcss.config.js`:
+
+```js
+import postcssBreakpointDry from '@profitlich/template-toolkit/vite/postcssBreakpointDry';
+
+export default {
+    plugins: [postcssBreakpointDry()],
+};
+```
+
 #### vw-Basis
 
 Per Default skalieren vw-basierte Werte mit der Viewport-Breite inkl. Scrollbar (`100vw`). Mit `"vwBasis": "body"` als Top-Level-Feld in `src/config.json` skalieren sie stattdessen mit der scrollbar-freien Body-Breite — sinnvoll, wenn Layout-Elemente in `%` gesetzt sind und Schriften/Abstände exakt mit diesen mitskalieren sollen. Dafür im Projekt `VwBody.getInstance()` (aus `@profitlich/template-toolkit/utils/VwBody`) aufrufen — setzt die Custom Property `--vw-body` per JS. Default-Verhalten ohne Feld unverändert.
@@ -142,6 +158,28 @@ $cap: capsize-cap-height("soehne", 40);  // → font-spezifischer Wert
 padding-top: size($layout, 40 - $cap + 8);
 ```
 
+**Capsize und Breakpoints**: Die Trims sind em-Werte und hängen nur von der Schrift und vom Verhältnis Zeilenhöhe/Schriftgrösse ab, nicht von `$layout`. Bekommt ein Selektor in allen Breakpoints Capsize, gehört der gleichbleibende Teil in die Grundregel. Zwei Fälle:
+
+- **Gleiches Verhältnis in allen Breakpoints** (z. B. überall 14/20): `capsize()` einmal in der Grundregel, in den Breakpoints `font()` ohne 4. Argument.
+
+    ```scss
+    .foo { @include capsize("soehne", 14, 20); }
+    @include mediaquery(tablet) using ($layout) {
+        .foo { @include font($layout, 14, 20); }
+    }
+    ```
+
+- **Verschiedene Verhältnisse** (z. B. 40/70, 56/120, 111/120): `capsize-base` in der Grundregel. Es schreibt `content` und `display` der Pseudo-Elemente einmal. `font()` mit Capsize-Font gibt danach für denselben Selektor nur noch die Trims aus. Die Verschachtelung muss in Grundregel und Breakpoint gleich sein, sonst greift die Zuordnung nicht, und es wird wie bisher alles ausgegeben.
+
+    ```scss
+    .foo { @include capsize-base; }
+    @include mediaquery(tablet) using ($layout) {
+        .foo { @include font($layout, 56, 120, "soehne"); }   // → nur Trims
+    }
+    ```
+
+Beides nur, wenn **jeder** Breakpoint Capsize bekommt. Sonst entstehen in den übrigen Pseudo-Elemente ohne Trims, die in einem Flex- oder Grid-Container als zusätzliche Items mitlaufen.
+
 ### Vite Entry
 
 Einen neuen Entry in `rollupOptions.input` eintragen **nur wenn** das Script per Twig/PHP-Tag direkt eingebunden wird. Wird es von einem anderen Script importiert, braucht es keinen eigenen Entry.

package/dev/Dev.js

@@ -15,6 +15,6 @@ export function initDev(config = {}, options = {}) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    new Toolbar(_options);
+    new Toolbar(_options, _config);
     console.info('Dev initialized.');
 });

package/dev/toolbar/Toolbar.js

@@ -1,7 +1,22 @@
 import GUI from 'lil-gui';
+import { canvasGridLines } from 'canvas-grid-lines';
 import { MediaQueries } from '../../utils/MediaQueries.js';
+import { gridColumnsTriple } from './gridColumns.js';
 import './toolbar.scss';
 
+/**
+ * Übersetzt die Auswahl im Grid-Menü in die Rasterart von `canvas-grid-lines`.
+ * Die Namen der Auswahl bleiben, wie sie waren — sie stehen im gespeicherten
+ * State der Toolbar und wären sonst bei jedem ein Rückschritt auf `aus`.
+ *
+ * Die Farben standen früher als Sass-Variablen in `toolbar.scss`. Ein Canvas
+ * bekommt sie zur Laufzeit, deshalb stehen sie jetzt hier.
+ */
+const GRID_MODES = {
+    lines: { gridType: 'columns', color: 'rgba(0, 0, 255, 0.5)' },
+    ribbons: { gridType: 'ribbons', color: 'rgba(191, 255, 254, 0.5)' },
+};
+
 /**
  * Beschreibt eine projekteigene Checkbox in der Dev-Toolbar.
  * @typedef {Object} ToolbarToggle
@@ -29,12 +44,18 @@ export class Toolbar {
     #pictureElements;
     #contentTypeContainer;
     #toggles;
+    #config;
+    #gridElement;
+    #grid = null;
 
     /**
      * @param {ToolbarOptions} [options={}] - Projekteigene Ergänzungen.
+     * @param {Object} [config={}] - Inhalt von `src/config.json` des Projekts.
+     *   Das Grid-Overlay leitet Spaltenzahl, Gutter und Seitenränder daraus ab.
      */
-    constructor(options = {}) {
+    constructor(options = {}, config = {}) {
         this.#toggles = options.toggles ?? [];
+        this.#config = config;
 
         // State aus localStorage laden
         const defaults = { visible: false, grid: 'aus', imageSize: false, sizes: false, contentType: false };
@@ -44,10 +65,12 @@ export class Toolbar {
         const saved = localStorage.getItem('devTools');
         this.#state = saved ? { ...defaults, ...JSON.parse(saved) } : defaults;
 
-        // Grid-Overlay DOM-Element erstellen
-        const gridOverlay = document.createElement('div');
-        gridOverlay.classList.add('dev-toolbar__grid');
-        document.body.prepend(gridOverlay);
+        // Grid-Overlay DOM-Element erstellen. Das Canvas darin entsteht erst
+        // beim ersten Einschalten — es ist eine Bitmap in Viewportgrösse, und
+        // die soll nicht zahlen, wer das Raster gar nicht anschaut.
+        this.#gridElement = document.createElement('div');
+        this.#gridElement.classList.add('dev-toolbar__grid');
+        document.body.prepend(this.#gridElement);
 
         // Content-Type-Label-Overlay erstellen
         this.#contentTypeContainer = document.createElement('div');
@@ -94,6 +117,7 @@ export class Toolbar {
 
         // Event-Listener
         window.addEventListener('resize', this.#onResize);
+        window.addEventListener('eventLayoutchange', this.#onLayoutChange);
         document.addEventListener('keydown', this.#handleKeyDown);
     }
 
@@ -109,12 +133,49 @@ export class Toolbar {
     #applyState() {
         document.body.setAttribute('data-dev-grid', this.#state.grid);
         document.body.setAttribute('data-dev-content-types', this.#state.contentType);
+        this.#updateGrid();
         this.#applyToggles();
         this.#updateImageSize();
         this.#updateSizes();
         this.#updateContentTypeLabels();
     }
 
+    /**
+     * Baut das Raster beim ersten Einschalten und hält es danach auf dem Stand
+     * von Auswahl und Layout. Im Modus `aus` geschieht nichts — das Ausblenden
+     * erledigt allein `data-dev-grid` in der CSS.
+     */
+    #updateGrid() {
+        const mode = GRID_MODES[this.#state.grid];
+        if (!mode) return;
+
+        const columns = gridColumnsTriple(this.#config, this.#mediaQueries.layout);
+        if (!columns) return;
+
+        if (!this.#grid) {
+            [this.#grid] = canvasGridLines.initGrid({
+                targets: this.#gridElement,
+                gridType: mode.gridType,
+                columns,
+                color: mode.color,
+                lineWidth: 1,
+                units: 'devicepixel',
+            }) ?? [];
+            return;
+        }
+
+        // Reihenfolge: erst die Spalten, dann die Rasterart. Der gridType-Setter
+        // leitet sein Lückenmuster aus dem aktuellen columns-Wert ab, und der
+        // muss nach einem Breakpoint-Wechsel schon der neue sein.
+        this.#grid.columns = columns;
+        this.#grid.gridType = mode.gridType;
+        this.#grid.color = mode.color;
+    }
+
+    #onLayoutChange = () => {
+        this.#updateGrid();
+    }
+
     #updateContentTypeLabels() {
         this.#contentTypeContainer.innerHTML = '';
         if (!this.#state.contentType) return;

package/dev/toolbar/gridColumns.js

@@ -0,0 +1,49 @@
+/**
+ * Rechnet die Spaltenkonfiguration eines Layouts in das Tripel um, das
+ * `canvas-grid-lines` für die Rasterarten `columns` und `ribbons` erwartet:
+ * `[total, band, gap]` in Rastereinheiten.
+ *
+ * Die Einheit ist der grösste gemeinsame Teiler von Spaltenbreite und Gutter —
+ * aus einem Verhältnis wie 80 : 20 werden damit die ganzen Zahlen 4 : 1, die
+ * das Paket als Wiederholungsmuster braucht. Beide Rasterarten teilen sich
+ * dieselbe Kantenfolge: `columns` strichelt sie, `ribbons` füllt dazwischen.
+ *
+ * @param {Object} config - Inhalt von `src/config.json` des Projekts.
+ * @param {string} layout - Layoutname, etwa `desktop`.
+ * @returns {number[]|undefined} `[total, band, gap]`, oder `undefined`, wenn die
+ *   Angaben fehlen oder sich das Verhältnis nicht ganzzahlig ausdrücken lässt.
+ */
+export function gridColumnsTriple(config, layout) {
+    const width = config?.layouts?.[layout];
+    const margins = config?.margins?.[layout];
+    const gutter = config?.gutter?.[layout];
+    const count = config?.columns?.[layout];
+
+    if (width == null || margins == null || gutter == null || count == null) {
+        console.warn(`Dev-Toolbar: Für das Layout "${layout}" fehlen Angaben in der config.json (layouts, margins, columns, gutter). Wird initDev die Config übergeben?`);
+        return undefined;
+    }
+
+    // Die Spaltenbreite ist `zaehler / count` und oft kein ganzer Designpixel —
+    // in `template-kirbycms` etwa 91,428…. Deshalb wird sie nie ausgerechnet:
+    // Das Verhältnis Spalte zu Gutter ist `zaehler/count : gutter`, und mit
+    // `count` erweitert wird daraus `zaehler : count · gutter`, also ein
+    // Verhältnis zweier ganzer Zahlen. Gekürzt ergibt das exakt das gesuchte
+    // Muster, ohne jede Rundung.
+    const zaehler = width - margins.left - margins.right - (count - 1) * gutter;
+
+    if (!Number.isInteger(zaehler) || !Number.isInteger(gutter) || !Number.isInteger(count) || zaehler <= 0) {
+        console.warn(`Dev-Toolbar: Layout "${layout}" ergibt keine brauchbare Spaltenaufteilung (Rest ${zaehler}, Gutter ${gutter}, Spalten ${count}) — das Raster bleibt aus.`);
+        return undefined;
+    }
+
+    const unit = greatestCommonDivisor(zaehler, count * gutter);
+    const band = zaehler / unit;
+    const gap = (count * gutter) / unit;
+
+    return [count * band + (count - 1) * gap, band, gap];
+}
+
+function greatestCommonDivisor(a, b) {
+    return b === 0 ? a : greatestCommonDivisor(b, a % b);
+}

package/dev/toolbar/toolbar.scss

@@ -7,69 +7,43 @@
 }
 
 // grid
-$color--dev-grid: rgba(0, 0, 255, 0.5);
-$color--dev-grid-ribbons: rgba(191, 255, 254, 0.5);
-$color--dev-grid-center: rgba(0, 0, 0, 0.2);
-
-@mixin dev-toolbar-grid($layout, $columns, $gutter, $margin-left, $margin-right) {
-
-    $gutter: size($layout, $gutter);
-    $margin-left: size($layout, $margin-left);
-    $margin-right: size($layout, $margin-right);
-
-    .dev-toolbar__grid::after {
-        // the grid is made through repition
-        // 'important' because background settings are more specific than the grid settings
-        background-size: calc((100% - ($columns * $gutter)) * calc(1 / $columns) + $gutter) 1px !important;
-        margin: 0 calc($margin-right - calc($gutter / 2)) 0 calc($margin-left - calc($gutter / 2));
-        // The grid is calculated starting from the middle
-        // Thats why its necessary to add the half of the column gap to the left and right side
-        width: calc(100% - $margin-right + calc($gutter / 2) - $margin-left + calc($gutter / 2));
-    }
-
-    body[data-dev-grid="lines"] {
-        .dev-toolbar__grid::after {
-            background:
-                // center of the column spacing
-                linear-gradient(90deg, transparent 0.5px, transparent 0.5px) 0 0,
-                // Left column line
-                // position: from the column spacing center to the right by half a column spacing
-                linear-gradient(90deg, $color--dev-grid 0.5px, transparent 0.5px) calc($gutter / 2) 0,
-                // right column line
-                linear-gradient(90deg, $color--dev-grid 0.5px, transparent 0.5px) calc($gutter / 2 * -1) 0;
-        }
-    }
-
-    body[data-dev-grid="ribbons"] {
-        .dev-toolbar__grid::after {
-            background:
-                // ceft column ribbon
-                // position: from the column spacing center to the right by half a column spacing
-                linear-gradient(90deg, $color--dev-grid-ribbons calc(100% - $gutter), transparent 0.5px) calc($gutter / 2) 0,
-        }
-    }
-}
-
+//
+// Gezeichnet wird das Raster von `canvas-grid-lines`; Toolbar.js hängt das
+// Canvas in dieses Element. Hier steht nur noch, wo das Element liegt.
+// Die Linienfarben stehen als GRID_MODES in Toolbar.js — ein Canvas nimmt sie
+// zur Laufzeit entgegen, nicht als Sass-Variable.
 .dev-toolbar__grid {
-    display: none;
-    width: 100%;
+    // Spannt genau die Rasterbreite auf: Seitenränder aus `$margins`, Breite
+    // aus `left`/`right`. Die frühere Verschiebung um eine halbe Gutter-Breite
+    // entfällt — sie richtete nur die Kachelwiederholung des Gradienten aus.
     height: 100%;
-    left: 0;
     pointer-events: none;
     position: fixed;
     top: 0;
 
-    body:not([data-dev-grid='aus']) & {
-        display: block;
-    }
+    // Nicht `display: none`: Ein Container ohne Ausdehnung schickt
+    // canvas-grid-lines auf seinen Lazy-Pfad, das Raster bliebe ungezeichnet.
+    visibility: hidden;
+
+    // Immer vor dem Inhalt: Ein Messraster, das hinter dem liegt, was man
+    // vermessen will, taugt nicht — früher galt das nur für `lines`, `ribbons`
+    // lag dahinter. Der z-index macht zugleich den Stacking Context auf, ohne
+    // den das Canvas hinter den Hintergrund des Body rutschte.
+    //
+    // Gleicher Wert wie `.lil-gui.lil-root`, und das ist Absicht: Bei
+    // Gleichstand entscheidet die Dokumentreihenfolge, und die Toolbar hängt
+    // sich nach dem Overlay ein. Das Panel bleibt also bedienbar.
+    z-index: 9999999;
 
-    body[data-dev-grid='lines'] & {
-        z-index: 9999999;
+    body:not([data-dev-grid='aus']) & {
+        visibility: visible;
     }
 
-    &::after {
-        content: "";
-        height: 100%;
+    // Bewusst statt eines Imports von `canvas-grid-lines/css`: Dessen Regel
+    // greift über `[data-grid-initialised] canvas` auf jedes Canvas im Dokument
+    // und würde die Rasterebenen im Projekt mit `z-index: -1` nach hinten
+    // ziehen. Hier bleibt sie auf das Overlay beschränkt.
+    canvas {
         left: 0;
         position: absolute;
         top: 0;
@@ -78,7 +52,10 @@ $color--dev-grid-center: rgba(0, 0, 0, 0.2);
 
 @each $layout, $breite in $layouts {
     @include mediaquery($layout) using ($layout) {
-        @include dev-toolbar-grid($layout, map.get($columns, $layout), map.get($gutter, $layout), map.get(map.get($margins, $layout), 'left'), map.get(map.get($margins, $layout), 'right'));
+        .dev-toolbar__grid {
+            left: size($layout, map.get(map.get($margins, $layout), 'left'));
+            right: size($layout, map.get(map.get($margins, $layout), 'right'));
+        }
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "5.8.0",
+    "version": "6.1.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "sass": "scss/forward.scss",
@@ -24,7 +24,8 @@
         "./scripts/copy-files": "./scripts/copy-files.js",
         "./scripts/deploy": "./scripts/deploy.js",
         "./vite/jsonToScss": "./vite/jsonToScss.js",
-        "./vite/capsizeSassFunctions": "./vite/capsizeSassFunctions.js"
+        "./vite/capsizeSassFunctions": "./vite/capsizeSassFunctions.js",
+        "./vite/postcssBreakpointDry": "./vite/postcssBreakpointDry.js"
     },
     "files": [
         "CLAUDE.project.md",
@@ -39,6 +40,7 @@
     ],
     "dependencies": {
         "basic-ftp": "^5.0.0",
+        "canvas-grid-lines": "^10.3.0",
         "chokidar": "^4.0.0",
         "cli-progress": "^3.12.0",
         "dotenv": "^17.0.0",
@@ -64,7 +66,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/profitlich-ch/profitlich-template-toolkit.git"
+        "url": "git+https://github.com/profitlich-ch/template-toolkit.git"
     },
     "license": "MIT"
 }

package/scss/core/capsize.scss

@@ -1,10 +1,19 @@
+@use "sass:map";
 @use "sass:meta";
 
+// Selektoren, deren fester Capsize-Teil per capsize-base bereits in der
+// Grundregel steht. Jede SCSS-Datei ist eine eigene Sass-Kompilation, die Map
+// gilt also nur innerhalb einer Datei.
+$_base-selectors: ();
+
 // Emittiert die Capsize-Pseudo-Elemente (::before/::after mit Em-Trims)
 // für den aktuellen Selektor. Die Inhalte (welche Pseudo-Elemente, welche
 // Properties) kommen vollständig aus @capsizecss/core via der
 // Sass-Custom-Function capsize-pseudo-elements (registriert im
 // vite/capsizeSassFunctions.js des Toolkits).
+//
+// Steht für den Selektor capsize-base in der Grundregel, entfallen hier die
+// festen Properties, und es bleiben nur die Trims.
 @mixin capsize($name, $fontSize, $lineHeight) {
     // Capsize ist opt-in: ohne registrierte Custom-Function wird übersprungen,
     // damit ein fehlender Vite-Setup nicht zu kryptischem Sass-Fehler führt.
@@ -12,12 +21,45 @@
         @warn "Capsize ist nicht eingerichtet: Custom-Function capsize-pseudo-elements fehlt. Siehe template-toolkit/CLAUDE.md, Abschnitt Capsize. Aufruf für \"#{$name}\" wird übersprungen.";
     } @else {
         $pseudo: capsize-pseudo-elements($name, $fontSize, $lineHeight);
+        $static: ();
+        @if map.has-key($_base-selectors, "#{&}") {
+            $static: capsize-static-properties();
+        }
+
         @each $selector-suffix, $props in $pseudo {
+            $skip: ();
+            @if map.has-key($static, $selector-suffix) {
+                $skip: map.get($static, $selector-suffix);
+            }
+
+            &#{$selector-suffix} {
+                @each $prop, $val in $props {
+                    @if not map.has-key($skip, $prop) {
+                        #{$prop}: $val;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Emittiert den festen Teil der Capsize-Pseudo-Elemente (content, display)
+// einmal in der Grundregel. Die Aufrufe von capsize() bzw. font() mit
+// Capsize-Font in den Breakpoint-Blöcken geben danach nur noch die Trims aus.
+//
+// Nur verwenden, wenn der Selektor in allen Breakpoints Capsize bekommt –
+// sonst entstehen dort Pseudo-Elemente ohne Trims.
+@mixin capsize-base {
+    @if not meta.function-exists("capsize-static-properties") {
+        @warn "Capsize ist nicht eingerichtet: Custom-Function capsize-static-properties fehlt. Siehe template-toolkit/CLAUDE.md, Abschnitt Capsize. capsize-base wird übersprungen.";
+    } @else {
+        @each $selector-suffix, $props in capsize-static-properties() {
             &#{$selector-suffix} {
                 @each $prop, $val in $props {
                     #{$prop}: $val;
                 }
             }
         }
+        $_base-selectors: map.set($_base-selectors, "#{&}", true) !global;
     }
 }

package/vite/capsizeSassFunctions.js

@@ -60,6 +60,33 @@ export async function createCapsizeFunctions(fontFiles) {
             return new sass.SassMap(OrderedMap(entries));
         },
 
+        // Liefert pro Pseudo-Element die Properties, die nicht von Schriftgrösse
+        // und Zeilenhöhe abhängen (heute content und display). Ermittelt aus zwei
+        // Aufrufen mit verschiedenem Verhältnis: Was in beiden gleich bleibt, ist
+        // fest. So bestimmt Capsize das Schema, nicht eine Liste im Toolkit.
+        'capsize-static-properties()': () => {
+            const fontMetrics = Object.values(metrics)[0];
+            if (!fontMetrics) {
+                throw new Error('capsize-static-properties: Keine Font-Metriken geladen.');
+            }
+
+            const narrow = createStyleObject({ fontSize: 10, leading: 12, fontMetrics });
+            const wide = createStyleObject({ fontSize: 10, leading: 30, fontMetrics });
+
+            const entries = [];
+            for (const [key, val] of Object.entries(narrow)) {
+                if (!key.startsWith('::')) continue;
+                const fixed = Object.fromEntries(
+                    Object.entries(val).filter(([prop, value]) => wide[key]?.[prop] === value)
+                );
+                entries.push([
+                    new sass.SassString(key, { quotes: false }),
+                    _objToSassMap(fixed),
+                ]);
+            }
+            return new sass.SassMap(OrderedMap(entries));
+        },
+
         'capsize-cap-height($name, $fontSize)': (args) => {
             const name = args[0].assertString('name').text;
             const fontSize = args[1].assertNumber('fontSize').value;

package/vite/postcssBreakpointDry.js

@@ -0,0 +1,134 @@
+import path from 'node:path';
+
+/**
+ * PostCSS-Plugin, das Wiederholungen über Breakpoint-Blöcke hinweg meldet.
+ *
+ * Läuft auf dem kompilierten CSS jeder SCSS-Datei. Verschachtelung ist dort
+ * aufgelöst und `$layout`-Werte sind ausgerechnet. Gewarnt wird in zwei Fällen:
+ *
+ * - Eine Deklaration steht mit gleichem Selektor und gleichem Wert in
+ *   Media-Queries, die zusammen alle Breiten abdecken (typisch: smartphone,
+ *   tablet und desktop). Sie gehört in die Grundregel.
+ * - Eine Deklaration in einer Media-Query wiederholt, was die Grundregel für
+ *   denselben Selektor bereits setzt.
+ *
+ * Das Plugin warnt nur und bricht den Build nie ab. Dateien aus `node_modules`
+ * werden übersprungen.
+ *
+ * @returns {import('postcss').Plugin}
+ */
+export default function postcssBreakpointDry() {
+    return {
+        postcssPlugin: 'postcss-breakpoint-dry',
+        OnceExit(root, { result }) {
+            const file = root.source?.input.file ?? '';
+            if (/[\\/]node_modules[\\/]/.test(file)) return;
+            // Vite nennt bei PostCSS-Warnungen die Datei nicht, darum steht sie in der Meldung
+            const location = file ? `${path.relative(process.cwd(), file)}: ` : '';
+
+            // Selektor|Eigenschaft → Wert, jeweils der letzte Stand der Grundregeln
+            const base = new Map();
+            // Selektor|Eigenschaft → [{ value, interval, decl, baseValue }]
+            const media = new Map();
+
+            root.each((node) => {
+                if (node.type === 'rule') {
+                    eachDecl(node, (key, value) => base.set(key, value));
+                    return;
+                }
+                if (node.type !== 'atrule' || node.name !== 'media') return;
+
+                // Unbekannte Bedingungen wie (hover: hover) lassen sich nicht auf Breiten abbilden
+                const interval = parseInterval(node.params);
+                if (!interval) return;
+
+                node.each((rule) => {
+                    if (rule.type !== 'rule') return;
+                    eachDecl(rule, (key, value, decl) => {
+                        if (!media.has(key)) media.set(key, []);
+                        media.get(key).push({ value, interval, decl, baseValue: base.get(key) });
+                    });
+                });
+            });
+
+            for (const [key, entries] of media) {
+                // Setzt eine andere Media-Query denselben Selektor anders, hängt das
+                // Ergebnis an der Reihenfolge – kein eindeutiger Fall
+                const values = new Set(entries.map((entry) => entry.value));
+                if (values.size > 1) continue;
+
+                const [selector, prop] = key.split('|');
+                const { value, decl } = entries[0];
+                // Pseudo-Elemente stammen meist aus font() mit Capsize-Font, behoben wird dort
+                const hint = /::?(before|after)\b/.test(selector) ? ' (bei Capsize: capsize() bzw. capsize-base in die Grundregel)' : '';
+
+                if (entries.every((entry) => entry.baseValue === value)) {
+                    decl.warn(result, `${location}${selector} { ${prop}: ${value} } wiederholt die Grundregel und kann aus den Media-Queries entfallen${hint}`);
+                } else if (coversAllWidths(entries.map((entry) => entry.interval))) {
+                    decl.warn(result, `${location}${selector} { ${prop}: ${value} } steht in Media-Queries, die zusammen alle Breiten abdecken, und gehört in die Grundregel${hint}`);
+                }
+            }
+        },
+    };
+}
+
+postcssBreakpointDry.postcss = true;
+
+/** Ruft `callback` für jede direkte Deklaration einer Regel auf, mit normalisiertem Schlüssel und Wert. */
+function eachDecl(rule, callback) {
+    const selector = rule.selectors.map((part) => part.replace(/\s+/g, ' ').trim()).join(', ');
+    rule.each((decl) => {
+        if (decl.type !== 'decl') return;
+        const value = decl.value.replace(/\s+/g, ' ').trim() + (decl.important ? ' !important' : '');
+        callback(`${selector}|${decl.prop}`, value, decl);
+    });
+}
+
+/**
+ * Liest eine Media-Query als Breitenbereich in ganzen px, in der Form
+ * `(min-width: 740px)` oder `(width >= 740px)`. Liefert `null` für alles andere –
+ * etwa Listen, Medientypen oder weitere Merkmale wie `(hover: hover)`.
+ */
+function parseInterval(params) {
+    if (params.includes(',')) return null;
+
+    const interval = { min: 0, max: Infinity };
+    for (const condition of params.split(/\s+and\s+/i)) {
+        const bound = parseBound(condition.trim());
+        if (!bound) return null;
+        if (bound.min !== undefined) interval.min = Math.max(interval.min, bound.min);
+        if (bound.max !== undefined) interval.max = Math.min(interval.max, bound.max);
+    }
+    return interval;
+}
+
+function parseBound(condition) {
+    const legacy = condition.match(/^\(\s*(min|max)-width\s*:\s*(\d+)px\s*\)$/i);
+    if (legacy) {
+        const px = Number(legacy[2]);
+        return legacy[1].toLowerCase() === 'min' ? { min: px } : { max: px };
+    }
+
+    const range = condition.match(/^\(\s*width\s*(<=|>=|<|>)\s*(\d+)px\s*\)$/i);
+    if (range) {
+        const px = Number(range[2]);
+        switch (range[1]) {
+            case '>=': return { min: px };
+            case '>': return { min: px + 1 };
+            case '<=': return { max: px };
+            case '<': return { max: px - 1 };
+        }
+    }
+    return null;
+}
+
+/** Prüft, ob die Bereiche lückenlos von 0 bis unendlich reichen. */
+function coversAllWidths(intervals) {
+    let reached = 0;
+    for (const { min, max } of [...intervals].sort((a, b) => a.min - b.min)) {
+        // max-width: 739px und min-width: 740px schliessen lückenlos aneinander an
+        if (min > reached) return false;
+        reached = Math.max(reached, max + 1);
+    }
+    return reached === Infinity;
+}

package/dev/toolbar/COLUMNS.md

@@ -1,228 +0,0 @@
-# Plan: Exakte Spaltenlinien via Canvas (Variante E)
-
-## Context
-
-Im `lines`-Modus des Dev-Grids werden Spaltenlinien über `linear-gradient` + `background-size` als Kachelmuster erzeugt. Die Kachelbreite löst auf Bruchpixel-Werte auf → die `0.5px`-Gradient-Stops landen an leicht unterschiedlichen physischen Pixeln pro Kachel. Ergebnis: Linien erscheinen wackelnd oder inkonsistent.
-
-**Lösung:** `<canvas>`-Element mit korrekter `devicePixelRatio`-Behandlung und dem "Half-Pixel"-Trick für pixelgenaue, scharf gerenderte Linien. Funktioniert auf 1×- und Retina-Displays gleich gut.
-
----
-
-## Betroffene Dateien
-
-- [dev/toolbar/Toolbar.js](dev/toolbar/Toolbar.js)
-- [dev/toolbar/toolbar.scss](dev/toolbar/toolbar.scss)
-
----
-
-## Architektur
-
-```text
-.dev-toolbar__grid (position: fixed, 100vw×100vh)
-└── <canvas>            ← neu, ersetzt ::after für "lines"
-::after                 ← bleibt für "ribbons" erhalten
-```
-
-Das Canvas-Element wird als Kind von `#gridElement` angehängt. Es erbt dessen Fixed-Positioning und Visibility-Steuerung über `data-dev`. Für den `lines`-Modus zeichnet das Canvas; für `ribbons` wird das Canvas geleert und `::after` übernimmt.
-
----
-
-## SCSS — `toolbar.scss`
-
-### 1. CSS Custom Properties im Mixin ergänzen
-
-Im Block `body[data-dev='true']` innerhalb von `dev-toolbar-grid`:
-
-```scss
-body[data-dev='true'] {
-    --dev-columns: #{$columns};        // unitless integer
-    --dev-gutter: #{$gutter};          // CSS-Wert (z. B. "1.5rem" oder "20px")
-    --dev-margin-left: #{$margin-left};
-    --dev-margin-right: #{$margin-right};
-
-    .dev-toolbar__grid::after { ... }  // unverändert
-}
-```
-
-### 2. `lines`-Gradient entfernen
-
-Den gesamten Block (Zeilen 28–39) entfernen — das Canvas übernimmt die Darstellung:
-
-```scss
-// ENTFERNEN:
-body[data-dev='true'][data-dev-grid="lines"] {
-    .dev-toolbar__grid::after { background: ...; }
-}
-```
-
-### 3. Canvas-Styling ergänzen
-
-```scss
-.dev-toolbar__grid {
-    canvas {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
-}
-```
-
----
-
-## JavaScript — `Toolbar.js`
-
-### Neue private Fields
-
-```javascript
-#gridElement = null;    // bisher nur lokale Variable, jetzt gespeichert
-#canvas = null;
-#ctx = null;
-```
-
-### `constructor()` — Änderungen
-
-1. `gridOverlay` → `this.#gridElement` (Referenz speichern)
-2. `#initCanvas()` aufrufen nach `prepend`
-
-```javascript
-this.#gridElement = document.createElement('div');
-this.#gridElement.classList.add('dev-toolbar__grid');
-document.body.prepend(this.#gridElement);
-this.#initCanvas();
-```
-
-### Neue Methode `#initCanvas()`
-
-```javascript
-#initCanvas() {
-    this.#canvas = document.createElement('canvas');
-    this.#gridElement.appendChild(this.#canvas);
-    this.#ctx = this.#canvas.getContext('2d');
-}
-```
-
-### Neue Methode `#drawGrid()`
-
-Wird aufgerufen bei: State-Wechsel (`#applyState`), Resize (`#onResize`).
-
-```javascript
-#drawGrid() {
-    const dpr = window.devicePixelRatio || 1;
-    const w = window.innerWidth;
-    const h = window.innerHeight;
-
-    this.#canvas.width  = Math.round(w * dpr);
-    this.#canvas.height = Math.round(h * dpr);
-
-    this.#ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
-
-    if (this.#state.grid !== 'lines') return;
-
-    this.#ctx.setTransform(dpr, 0, 0, dpr, 0.5, 0);  // scale + half-pixel shift
-
-    this.#drawColumnLines();
-}
-```
-
-**Half-pixel-Trick:** `ctx.setTransform(dpr, 0, 0, dpr, 0.5, 0)` — der 0.5px-Shift zentriert 1px-Linien exakt auf physische Pixel bei dpr=1. Bei dpr=2 (Retina) ist 0.5 CSS-px = 1 physischer Pixel, ebenfalls scharf.
-
-### Neue Methode `#drawColumnLines()`
-
-```javascript
-#drawColumnLines() {
-    const style = getComputedStyle(document.body);
-    const columns    = parseInt(style.getPropertyValue('--dev-columns'));
-    const gutter     = this.#resolveToPx(style.getPropertyValue('--dev-gutter').trim());
-    const marginLeft = this.#resolveToPx(style.getPropertyValue('--dev-margin-left').trim());
-
-    // Kachelbreite = (Viewport - Margins + Gutter) / Spalten
-    // (identisch zur background-size-Formel im SCSS)
-    const gridWidth = window.innerWidth - marginLeft
-        - this.#resolveToPx(style.getPropertyValue('--dev-margin-right').trim())
-        + gutter;
-    const tileWidth  = gridWidth / columns;
-    const colContent = tileWidth - gutter;
-
-    this.#ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
-    this.#ctx.lineWidth   = 1;
-    const h = window.innerHeight;
-
-    for (let i = 0; i < columns; i++) {
-        const leftEdge  = marginLeft + i * tileWidth;
-        const rightEdge = leftEdge + colContent;
-
-        this.#ctx.beginPath();
-        this.#ctx.moveTo(Math.round(leftEdge),  0);
-        this.#ctx.lineTo(Math.round(leftEdge),  h);
-        this.#ctx.stroke();
-
-        this.#ctx.beginPath();
-        this.#ctx.moveTo(Math.round(rightEdge), 0);
-        this.#ctx.lineTo(Math.round(rightEdge), h);
-        this.#ctx.stroke();
-    }
-}
-```
-
-### Neue Methode `#resolveToPx(cssValue)`
-
-Löst beliebige CSS-Einheiten (rem, vw, calc, …) auf px auf, ohne Unit-Parsing-Logik:
-
-```javascript
-#resolveToPx(cssValue) {
-    if (/^-?\d+(\.\d+)?px$/.test(cssValue)) return parseFloat(cssValue);
-
-    const probe = document.createElement('div');
-    probe.style.cssText = `position:fixed;visibility:hidden;width:${cssValue};top:0;left:0;`;
-    document.body.appendChild(probe);
-    const px = probe.getBoundingClientRect().width;
-    probe.remove();
-    return px;
-}
-```
-
-### `#applyState()` — Ergänzung
-
-```javascript
-#applyState() {
-    const gridActive = this.#state.grid !== 'aus';
-    document.body.setAttribute('data-dev', String(gridActive));
-    document.body.setAttribute('data-dev-grid', this.#state.grid);
-    this.#updateImageSize();
-    this.#drawGrid();   // ← neu
-}
-```
-
-### `#onResize` — Ergänzung
-
-```javascript
-#onResize = () => {
-    this.#gui.title(this.#getViewportText());
-    this.#updateImageSize();
-    this.#drawGrid();   // ← neu
-}
-```
-
----
-
-## Positionsformel (Herleitung)
-
-Das SCSS positioniert `::after` mit `margin-left = marginLeft - gutter/2`, sodass die Kacheln mittig zwischen Spalten beginnen. Die resultierenden Canvas-Positionen sind:
-
-| | Formel | Beispiel (12 Spalten, gutter=20px, marginLeft=40px) |
-| --- | --- | --- |
-| Linke Kante Spalte i | `marginLeft + i × tileWidth` | i=0: 40px, i=1: 120px, … |
-| Rechte Kante Spalte i | `marginLeft + i × tileWidth + colContent` | i=0: 100px, i=1: 180px, … |
-
-Diese Formel ist identisch zur bestehenden `background-size`-Logik, nur ohne Kachel-Grenz-Problem.
-
----
-
-## Verifikation
-
-1. `ddev npm run dev` starten
-2. Dev-Toolbar öffnen (Ctrl), Grid auf "lines" schalten
-3. **Browserfenster in verschiedene Breiten ziehen** → Linien dürfen nicht wackeln
-4. **Safari (Retina) + Chrome (1×)** vergleichen → gleiche Schärfe
-5. **Ribbons-Modus** prüfen → Canvas geleert, `::after`-Gradient unverändert
-6. **Breakpoint-Wechsel** prüfen → CSS Custom Properties werden neu gelesen, Linienanzahl passt sich an