/* sections.css — Feinlayout: Segmentraster, Module, Bedienelemente. ABSTÄNDE ZWISCHEN TEXTEN STEHEN IN em, NICHT IN rem (DEV-LOG [23]). rem hängt an der Wurzelgröße, die zwischen 820 px und der Einfrierbreite (--maxw, 1440 px) fluid von 13 px auf 16 px läuft. Die Schriftgrößen der Rollen schalten am Breakpoint aber zusätzlich auf ihren Mobilwert um — dadurch lief beides auseinander: `margin-top: 1.9rem` waren auf dem Handy 24,7 px neben 12,4 px Text, also die doppelte Schrifthöhe, während dasselbe Verhältnis auf Desktop 1,27 betrug. Genau das war als "Absatz-Abstände viel zu groß" gemeldet. DIE ABSTÄNDE DER SEKTIONEN STEHEN SEIT DEM SEGMENT-UMBAU IN DEN DATEN (DEV-LOG [32]). Ein Segment trägt --pad-t/--pad-b als Faktor von --sec-pad-y; hier steht dafür keine Regel mehr. Nur Hero und Footer haben ihre Abstände weiterhin im CSS — sie sind der Rahmen der Seite und keine Bauklotz-Segmente. */ /* ── Hero ──────────────────────────────────────────────────────────────── */ .sec--hero { --pad-t: 0; --pad-b: 0; /* Der Keil ist FEST — Form in HERO_WEDGE_POINTS, Höhe hier. Bewusst keine Einstellung und bewusst nicht über ckStyle(): an ihm ist nur noch die Füllfarbe dynamisch, und die steht als Attribut am . */ --wedge-h: 48px; /* Der Keil hängt unter der nominellen Hero-Höhe: an seiner tiefsten Stelle reicht das Video um genau --wedge-h weiter nach unten. */ height: calc(var(--hero-h) + var(--wedge-h)); /* Untergrenze für sehr flache Viewports (Handy quer): darunter wäre das Keyvisual ein Streifen. Auf Mobil niedriger, sonst schlüge sie die eingestellten 50 svh (bei ~700 px Gerätehöhe = 350 px) einfach nieder. */ min-height: 420px; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-video { width: 100%; height: 100%; object-fit: cover; } /* Solange kein Video hinterlegt ist: das Grün der Vorlage als Platzhalter. */ .hero-video--ph { background: #05ff39; } /* ── Segmentraster ───────────────────────────────────────────────────────── Ein Segment ist ein- oder zweispaltig; Verhältnis, Abstand und vertikale Ausrichtung kommen aus segmentProps() — als Variable (--seg-split, --seg-gap) oder als Klasse. Hier steht deshalb keine einzige Regel für einen bestimmten Inhalt: was "Text neben Bildraster" bis E5 als eigener Blocktyp war, ist jetzt ein zweispaltiges Segment mit zwei Modulen. */ .mseg { display: grid; gap: var(--seg-gap, var(--col-gap)); } .mseg--c1 { grid-template-columns: 1fr; } .mseg--c2 { grid-template-columns: var(--seg-split, 1fr 1fr); } .mseg--c3 { grid-template-columns: var(--seg-split, 1fr 1fr 1fr); } .mseg--v-center { align-items: center; } .mseg--v-start { align-items: start; } .mseg--v-end { align-items: end; } /* ── Trennlinien zwischen den Spalten (segmentProps()['divider'], DEV-LOG [99]) Die Klasse wählt die Höhe, die Farbe kommt als --seg-div-c (Token, Regel 2). GEZEICHNET VON DER RASTERBOX, NICHT VON DEN ZELLEN. Eine Zelle ist bei „Spalten vertikal: Mittig" nur so hoch wie ihr Inhalt — eine Linie daran wäre neben einem hohen Bild ein Strich neben dem Text. Ein ABSOLUT positioniertes Kind eines Grids nimmt dagegen den Rasterbereich, den grid-row/grid-column nennen, als umschließenden Block — und nimmt an der automatischen Platzierung NICHT teil, die Zellen rücken also nicht weg. 100 % Höhe ist damit die Höhe der Zeile, und left die Kante der Spalte: die halbe Fuge davor ist die Mitte des Spalts. ::before sitzt vor Spalte 2, ::after (nur dreispaltig) vor Spalte 3. */ .mseg--div-100 { --seg-div-h: 100%; } .mseg--div-75 { --seg-div-h: 75%; } .mseg--div-50 { --seg-div-h: 50%; } .mseg--div-25 { --seg-div-h: 25%; } :is(.mseg--div-100, .mseg--div-75, .mseg--div-50, .mseg--div-25) { position: relative; } :is(.mseg--div-100, .mseg--div-75, .mseg--div-50, .mseg--div-25)::before, :is(.mseg--div-100, .mseg--div-75, .mseg--div-50, .mseg--div-25).mseg--c3::after { content: ""; position: absolute; grid-row: 1; grid-column: 2; left: calc(var(--seg-gap, var(--col-gap)) / -2); top: calc((100% - var(--seg-div-h)) / 2); height: var(--seg-div-h); /* EIN RAHMEN, KEINE FLÄCHE — und kein transform (DEV-LOG [100]). Bis dahin stand hier width: 1px + background + translateX(-50%): der halbe Pixel Versatz und die gebrochene Spaltenkante (fr) legten die Linie ZWISCHEN zwei Gerätepixel, ein transform rastet nicht ein. Gemessen: bei 100 % Skalierung jede Linie 2 px halbhell, bei 150 % je Linie mal 2, mal 3 Gerätepixel, unabhängig voneinander beim Ziehen des Fensters. Eine Rahmenbreite rundet der Browser auf ganze Gerätepixel, und eine Box ohne transform rastet ihre Kante ein. Der halbe Pixel Versatz zur Fugenmitte ist unsichtbar. */ width: 0; border-left: 1px solid var(--seg-div-c, var(--ci-white)); pointer-events: none; } :is(.mseg--div-100, .mseg--div-75, .mseg--div-50, .mseg--div-25).mseg--c3::after { grid-column: 3; } .mcell--a-start { text-align: start; } .mcell--a-center { text-align: center; } .mcell--a-end { text-align: end; } /* ── Modul "Text" ────────────────────────────────────────────────────────── EIN Feld, beliebig viele Absätze (E12). Hier steht deshalb nichts mehr: Bis E12 hatte das Modul vier feste Felder, und jedes trug seinen Abstand (.mtext__sub 1.03em, __copy 1.13em, __sig 1.07em) sowie die Signatur ihr Kursiv (.mtext__sig). Die Klassen gibt es nicht mehr — es gibt die Felder nicht mehr. Der Abstand zwischen Absätzen kommt jetzt aus .rich > * + * (base.css) und gilt relativ zur Schriftgröße des jeweiligen Absatzes, also zu seiner ROLLE statt zur Feldbox darum. Kursiv steht im Text selbst. Die BÜNDIGKEIT stand hier schon seit DEV-LOG [52] nicht mehr fest; seit E12 ist sie zusätzlich je ABSATZ einstellbar, seit DEV-LOG [83] über die Formatierungsleiste — und seit DEV-LOG [95] entscheidet in einem Text NUR noch der Absatz: die Ebenen Feld (.mtext--a-*) und Textzelle gibt es nicht mehr, ihre gespeicherten Werte stehen beim Laden an den Absätzen. */ /* ── Bündigkeit je ABSATZ — DER ABSATZ GEWINNT (DEV-LOG [83]) ────────────── Geschichte in drei Schritten, alle Vorgabe des Betreibers: - E12 / DEV-LOG [61]: Zelle > Feld > Absatz. Eine Bündigkeit an der SPALTE war die Ansage für die ganze Spalte. - DEV-LOG [83]: Absatz > Feld > Zelle. Seit es die Formatierungsleiste gibt, setzt man die Bündigkeit am Text selbst — und ein Klick darauf, der sichtbar nichts tut, weil die Spalte etwas anderes sagt, ist ein Fehler. Feld und Zelle sind jetzt die VORGABE für Absätze ohne eigene Angabe. - DEV-LOG [95]: nur der Absatz. Feld und Textzelle tragen keine Klasse mehr; die Zellregeln unten gelten nur noch Bilderbox und Player (deren Bildunterschrift ist ein

) und treffen einen Fließtext nie. Damit drei Ebenen überhaupt vergleichbar sind, müssen alle drei DASSELBE Element treffen: den Absatz. Alle Regeln liegen bei 0,1,0, die RANGFOLGE macht deshalb die Reihenfolge, genau wie schon bei "mobil vor Desktop", nur eine Ebene tiefer. Kein !important, nirgends. (Mit reiner Vererbung gewönne zwar ebenfalls die innerste Angabe — aber nur, solange Feld und Zelle den Absatz nicht selbst treffen; mobil müssen sie das, siehe unten.) JEDER ABSATZ WIRD GETROFFEN, nicht nur der mit eigenem Attribut. Bis 2026-08-24 stand hier [data-a] auf der rechten Seite, und das war der Fehler: ein Absatz OHNE Angabe erbte weiter von .mtext--a-* bzw. .mcell--a-*, und dort entscheidet die VERERBUNG — also gewann die innerste Angabe, das Feld. Die Rangfolge galt damit ausgerechnet fuer den Normalfall nicht (DEV-LOG [63]). :is() STATT :where() UM DEN VORFAHREN. :where() nullt die Spezifitaet, :is() nimmt die seines staerksten Arguments — die Klasse zaehlt also mit (0,1,0), waehrend :where(p,h1,h2,li) rechts bei 0 bleibt. So liegen alle Regeln wieder gleichauf bei 0,1,0 und die REIHENFOLGE macht die Rangfolge. Mit :where() links waeren sie 0,0,0 und verloeren gegen [data-a]. Die Absatzliste muss zu SANITIZE_PARA passen (lib/sanitize.php) — der Selbsttest prueft das, sonst faellt eine spaeter erlaubte Absatzart hier still heraus. Reihenfolge von schwach nach stark: Zelle < Absatz. Der Selbsttest prüft sie im Dateitext (lib/selftest.php, „Rangfolge der Bündigkeit"). */ :is(.mcell--a-start) :where(p, h1, h2, li) { text-align: start; } :is(.mcell--a-center) :where(p, h1, h2, li) { text-align: center; } :is(.mcell--a-end) :where(p, h1, h2, li) { text-align: end; } :where(.rich) [data-a="start"] { text-align: start; } :where(.rich) [data-a="center"] { text-align: center; } :where(.rich) [data-a="end"] { text-align: end; } /* ── Buttons ─────────────────────────────────────────────────────────────── HIER STEHT NUR DIE BASISREGEL. Welches Preset welche Werte hat, sagt theme.json (schemaCollections()['btn'], DEV-LOG [111]): der Betreiber legt Presets an, benennt sie und löscht sie. Die Regel je Preset erzeugt deshalb btnPresetsCss() und gibt sie im Style-Block aus — bis [111] standen hier drei Regeln mit den drei festen Namen, und ein selbst angelegtes Preset hätte keine gehabt (dieselbe Lehre wie bei den Schriftrollen in [110]). Die Presetschlüssel sind zugleich die Whitelist, gegen die sanitizeWalk() das Attribut data-btn prüft — ein unbekannter Wert fällt weg und der Button bleibt ein Link. DIE FARBEN STEHEN ALS RÜCKFALL IN DER ERZEUGTEN REGEL, NICHT ALS WERT IM PRESET. Ein Preset auf "automatisch" gibt --btn--bg/-fg gar nicht erst aus; dann greift der Rückfall auf --btn-bg/--btn-fg, die contentBg() pro Sektion setzt (auf der CI-Hauptfarbe invertiert). Das kann nicht im Preset stehen: eine Variable, die auf :root eine andere Variable referenziert, wird BEIM DEKLARIEREN aufgelöst — dort gibt es kein --btn-bg, und der Button bliebe durchsichtig (DEV-LOG [32]). Ein fester Token im Preset sticht den Rückfall aus. Welcher Rückfall gilt, sagt die FORM des Presets (btnForms()). inline-flex statt inline-block seit [111]: mit einer Mindesthöhe muss die Beschriftung darin mittig stehen. Ohne Mindestmaße (Vorgabe 0) ist das Ergebnis dasselbe wie vorher. button[data-btn] seit DEV-LOG [120]: der Abschickknopf eines Formulars benutzt dieselben Presets. cursor, weil der Reset in base.css ihn nicht setzt und ein