; beide sollen gleich aussehen,
* deshalb die Textauszeichnung hier zurücksetzen. */
.m-bg-icon-teaser .m-bg-icon-teaser-inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem;
color: inherit;
text-decoration: none;
}
a.m-bg-icon-teaser-inner:hover { text-decoration: none; }
.m-bg-icon-teaser--icon-right .m-bg-icon-teaser-inner { flex-direction: row-reverse; }
.m-bg-icon-teaser .m-bg-icon-teaser-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
/* 2.667rem = 48px bei 18px Grundschrift — dieselbe Größe wie die
Vorschau-Kachel im Editor, damit Redaktion und Frontend übereinstimmen. */
width: 2.667rem;
height: 2.667rem;
color: var(--box-fg, currentColor);
}
.m-bg-icon-teaser .m-bg-icon-teaser-icon svg {
width: 100%;
height: 100%;
}
/* WANN DER TEXT UNTER DAS ICON RUTSCHT — und warum das keine Media-Query ist.
*
* Auslöser ist die Breite der BOX, nicht die des Fensters. Ein Icon-Teaser
* steht in einer Box-Grid-Spalte: Bei schmalem Fenster stapelt das Raster auf
* eine Spalte, die Box wird also BREITER, nicht schmäler. Eine
* `max-width`-Abfrage auf den Viewport würde genau dann stapeln, wenn am
* meisten Platz da ist.
*
* Der erste Entwurf hatte hier `@media (max-width: 30em)` — ein Wert, den es
* sonst nirgends in dieser Datei gibt (die Leiter des Projekts ist
* 40/48/64/112.5em) und dessen Herleitung „~24em Text" eine Schätzung war.
* Beides vom regel-check beanstandet, zu Recht.
*
* Stattdessen bricht die Flex-Zeile um, sobald der Textspalte weniger als ihre
* Grundbreite bleibt. HERLEITUNG DIESER GRUNDBREITE: 18em sind bei einer
* durchschnittlichen Zeichenbreite von ~0.5em rund 36 Zeichen je Zeile. Die
* typografische Spanne für lesbaren Fließsatz beginnt bei etwa 45 Zeichen; 36
* ist bewusst darunter, weil ein Teaser aus wenigen Wörtern besteht und ein zu
* früher Umbruch mehr stört als eine knappe Zeile.
*
* ZWEI BEISPIELE, durchgerechnet mit den Werten dieser Datei
* (Innenabstand 1.333rem je Seite, Icon 2.667rem, Abstand 1rem):
*
* Box 30em: 30 − 2×1.333 − 2.667 − 1 = 23.67em ≥ 18em → nebeneinander
* Box 20em: 20 − 2×1.333 − 2.667 − 1 = 13.67em < 18em → Text unter das Icon
*
* Die Umschaltbreite liegt damit rechnerisch bei 18 + 2.666 + 2.667 + 1 =
* 24.33em Boxbreite — hergeleitet, nicht gesetzt, und ohne einen Wert, der in
* der Breakpoint-Leiter nichts zu suchen hat. */
.m-bg-icon-teaser .m-bg-icon-teaser-body {
flex: 1 1 18em;
min-width: 0; /* sonst sprengt langer Text ohne Leerzeichen die Flex-Spalte */
}
/* Icon über dem Text — jetzt eine EIGENE Auswahl, keine Kopplung mehr.
*
* Bis 2026-08-25 stand hier `.m-bg-icon-teaser.m-bg-text--center …` mit der
* Begründung, bei zentriertem Text gehöre das Icon in die Mitte. Nachvollziehbar,
* aber falsch gebaut: `halign` hat im Renderer den Vorgabewert `center`, die
* Regel griff also im AUSLIEFERUNGSZUSTAND. Wer nichts einstellte, bekam das
* gestapelte Bild — und beide Optionen des Feldes „Icon-Position" waren ohne
* jede Wirkung, bis jemand die Textausrichtung auf links oder Blocksatz stellte.
*
* Eine Vorgabe darf eine ausdrückliche Auswahl nicht überschreiben. Gemeldet vom
* Auftritt Frauennotruf Westerburg, dessen Agentur-Vorlage genau die verhinderte
* Anordnung zeigt: Icon links, Text zentriert daneben. Ihr Vorschlag — dritte
* Option statt Kopplung — ist umgesetzt. */
.m-bg-icon-teaser--icon-top .m-bg-icon-teaser-inner {
flex-direction: column;
align-items: center;
}
.m-bg-icon-teaser .m-bg-linkbox-wrap { margin-top: 1rem; }
/* Der gestreckte Link. `z-index: 1` hält ihn über dem Hintergrund der Box,
ohne Inhalte zu überdecken, die selbst keinen Stapelkontext aufmachen. */
.m-bg-icon-teaser .m-bg-icon-teaser-link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.m-bg-html { width: 100%; }
/* === Utility · TinyMCE-Listen-Marker === */
/*
* Standard-Listen-Marker für TinyMCE-Body-Container (alle Inhalts-Module):
* Tailwind-Reset entfernt list-style komplett, daher hier mit ::before-
* Pseudo-Element ein Akzent-Pfeil als Marker.
* Geltungsbereich: Box-Element-Slots + Box-Grid-Blöcke + News-Detail.
*/
.m-bg-text ul,
.m-bg-kachel-content ul,
.m-bg-infobox-body ul,
.m-bg-col--card ul,
.box-element > .text .box-body ul,
.box-element > .infobox .box-body ul,
.box-element > .bildtextbox .box-text ul,
.m-kachel-text ul,
.m-news-detail-text ul {
list-style: none;
padding-left: 1.333rem;
margin: 0 0 0.778rem 0;
}
.m-bg-text ul > li,
.m-bg-kachel-content ul > li,
.m-bg-infobox-body ul > li,
.m-bg-col--card ul > li,
.box-element > .text .box-body ul > li,
.box-element > .infobox .box-body ul > li,
.box-element > .bildtextbox .box-text ul > li,
.m-kachel-text ul > li,
.m-news-detail-text ul > li {
position: relative;
padding-left: 0;
margin-bottom: 0.222rem;
}
.m-bg-text ul > li::before,
.m-bg-kachel-content ul > li::before,
.m-bg-infobox-body ul > li::before,
.m-bg-col--card ul > li::before,
.box-element > .text .box-body ul > li::before,
.box-element > .infobox .box-body ul > li::before,
.box-element > .bildtextbox .box-text ul > li::before,
.m-kachel-text ul > li::before,
.m-news-detail-text ul > li::before {
content: "";
position: absolute;
left: -1.333rem;
top: 0.25em;
width: 1em; height: 1em;
background-color: var(--bullet-color, var(--color-accent, #fde68a));
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Auf gelben Section-/Card-Hintergruenden den Akzent-Pfeil auf Primaer-Blau
* umstellen — sonst geht der gelbe Pfeil im gelben Hintergrund unter. */
.bg-accent,
.box-accent,
.m-bg-kachel.bg-accent,
.m-bg-kachel.box-accent,
.m-kachel.bg-accent,
.m-kachel.box-accent,
.m-bg-col--card.bg-accent,
.m-bg-col--card.box-accent {
--bullet-color: var(--color-primary, #0f172a);}
/* InfoBox (aufklappbar) */
.m-bg-infobox { width: 100%; }
.m-bg-infobox-summary {
list-style: none;
cursor: pointer;
padding: 0.667rem 0;
border-bottom: 1px solid currentColor;
display: flex; flex-direction: column;
}
.m-bg-infobox-summary::-webkit-details-marker { display: none; }
.m-bg-infobox-summary::after {
content: "▾"; align-self: flex-end;
font-size: 1.111rem; line-height: 1; transition: transform 0.2s;
color: var(--color-accent, #fde68a);
}
.m-bg-infobox[open] > .m-bg-infobox-summary::after { transform: rotate(180deg); }
.m-bg-infobox-summary .m-bg-h1,
.m-bg-infobox-summary .m-bg-h3 {
display: block; font-weight: 300; font-size: 1.667rem;
color: var(--section-muted, var(--section-fg, inherit));
}
.m-bg-infobox-summary .m-bg-h2 {
display: block; font-weight: 800; font-size: 2rem;
text-transform: uppercase; letter-spacing: 0.02em;
color: var(--section-heading, var(--section-fg, inherit));
}
.m-bg-infobox-body { padding: 1rem 0; color: var(--section-fg, inherit); }
/* Kachel — Card-Layout 1:1 zu .m-kachel (m-be / Box-Element-Modul). */
.m-bg-kachel {
display: flex; flex-direction: column;
border-radius: 0.222rem;
overflow: hidden;
background: var(--card-bg, #ffffff);
color: var(--card-fg, var(--section-fg, inherit));
}
.m-bg-kachel-img {
margin: 0;
width: 100%;
aspect-ratio: 340 / 185;
overflow: hidden;
}
.m-bg-kachel-img img,
.m-bg-kachel-img picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-bg-kachel-content {
/* Vertikal folgt der Stufenfaktor der Spalte (`--m-col-scale`, gesetzt vom
Box-Grid-Modul und hierher vererbt) — analog `.m-bg-col--card`. Horizontal
bleibt 1.111rem fix; die Stufe steuert ausdruecklich nur den vertikalen
Abstand. Ohne Auswahl liefert der Fallback 1 die bisherigen Werte. */
padding: calc(var(--m-col-scale, 1) * 1rem) 1.111rem calc(var(--m-col-scale, 1) * 1.222rem) 1.111rem;
display: flex; flex-direction: column;
flex: 1;
}
.m-bg-kachel .m-bg-headline,
.m-bg-col--card .m-bg-headline { line-height: 1.2; margin: 0; }
.m-bg-kachel .m-bg-headline .m-bg-h1,
.m-bg-col--card .m-bg-headline .m-bg-h1 {
font-size: 1.167rem;
font-weight: 300;
line-height: 1.25;
margin: 0 0 0.333rem 0;
color: var(--card-muted, var(--card-fg, inherit));
}
.m-bg-kachel .m-bg-headline .m-bg-h2,
.m-bg-col--card .m-bg-headline .m-bg-h2 {
font-size: 1.167rem;
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 0.667rem 0;
color: var(--card-heading, var(--card-fg, inherit));
}
/* Zeile 3 (leicht) im Card-/Kachel-Kontext: Typografie identisch zu Zeile 1.
Sie ist immer die letzte Zeile der Überschrift und übernimmt deshalb den
Abstand zum Folgeinhalt (0.667rem), den sonst Zeile 2 trägt; Zeile 2 fällt
dann auf den Zeilenabstand innerhalb der Überschrift (0.333rem) zurück.
Ohne Zeile 3 ist Zeile 2 letztes Kind → alles bleibt unverändert. */
.m-bg-kachel .m-bg-headline .m-bg-h3,
.m-bg-col--card .m-bg-headline .m-bg-h3 {
font-size: 1.167rem;
font-weight: 300;
line-height: 1.25;
margin: 0 0 0.667rem 0;
color: var(--card-muted, var(--card-fg, inherit));
}
.m-bg-kachel .m-bg-headline .m-bg-h2:not(:last-child),
.m-bg-col--card .m-bg-headline .m-bg-h2:not(:last-child) {
margin-bottom: 0.333rem;
}
.m-bg-kachel .m-bg-text,
.m-bg-col--card .m-bg-text {
font-size: 0.944rem;
font-weight: 400;
line-height: 1.4;
margin: 0 0 1rem 0;
color: var(--card-fg, inherit);
}
.m-bg-kachel .m-bg-text > :first-child,
.m-bg-col--card .m-bg-text > :first-child { margin-top: 0; }
.m-bg-kachel .m-bg-text > :last-child,
.m-bg-col--card .m-bg-text > :last-child { margin-bottom: 0; }
.m-bg-kachel .m-bg-linkbox,
.m-bg-col--card .m-bg-linkbox {
background-color: var(--card-link-bg, var(--section-link-bg, #2563eb)); color: var(--card-link-fg, var(--section-link-fg, #ffffff)) !important;
font-size: 1rem;
font-weight: 400;
padding: 0.389rem 0.889rem;
border-radius: 0.222rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* Galerie — Lead-Bild + Thumbnails */
.m-bg-galerie { display: flex; flex-direction: column; gap: 0.667rem; }
.m-bg-galerie-lead img { width: 100%; height: auto; display: block; border-radius: 0.444rem; }
.m-bg-galerie-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.444rem; }
.m-bg-galerie-thumbs a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0.222rem; }
.m-bg-galerie-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Grid-Items duerfen unter ihre Inhaltsbreite schrumpfen.
*
* WARUM DAS HIER STEHEN MUSS: Grid- und Flex-Items haben von Haus aus
* `min-width: auto` — sie duerfen NICHT schmaler werden als ihr Inhalt. Bei
* einem Swiper laeuft daraus eine Rueckkopplung: Swiper setzt die Slide-Breite
* inline, diese Breite geht in die Inhaltsbreite der Spalte ein, die Spalte
* waechst, und weil der Slider mit `observer: true` auf Layout-Aenderungen
* reagiert, rechnet er erneut — mit der neuen, groesseren Spalte.
*
* Gemessen am 09.08.2026 auf demo (Layout c1, vier Slides): Spalte
* 33.553.886 px bei 2.521 px Grid-Breite, Slide 11.184.618 px, Sektion
* 7.456.475 px hoch. Mit `min-width: 0` an derselben Stelle: Spalte 1.485 px,
* Slide 484 px, Sektion 386 px.
*
* Die Regel schuetzt auch alles andere, was eine Spalte sprengen kann —
* lange Wortketten, Tabellen, -Bloecke. */
.m-bg-col { min-width: 0; }
/* Video-Block */
.m-bg-video { position: relative; margin: 0; width: 100%; min-width: 0; border-radius: 0.444rem; overflow: hidden; }
.m-bg-video-el { display: block; width: 100%; }
/* Nur mit fester Hoehe darf beschnitten werden — ohne sie traegt das Element das
* Seitenverhaeltnis der Datei, und `cover` haette nichts zu beschneiden. */
.m-bg-video-el[style*="height"] { object-fit: cover; }
/* Pause-Knopf fuer automatisch startende Videos ohne native Bedienelemente.
* Unten rechts, weil dort kein Bildinhalt erwartet wird und die native Leiste
* an derselben Kante saesse — die Bedienung bleibt am gewohnten Ort.
* Masse aus dem Projektraster: 2.667rem = 48 px bei 18-px-Root, die uebliche
* Mindestgroesse einer Schaltflaeche fuer Finger. */
.m-bg-video-pause {
position: absolute;
right: 0.889rem;
bottom: 0.889rem;
width: 2.667rem;
height: 2.667rem;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.m-bg-video-pause:hover,
.m-bg-video-pause:focus-visible { background: rgba(0, 0, 0, 0.75); }
/* Zwei Balken = Pause. Im angehaltenen Zustand wird daraus ein Dreieck (Play),
* erzeugt aus denselben zwei Elementen ueber Rahmen — kein zweites Icon noetig. */
.m-bg-video-pause-icon {
width: 0.556rem;
height: 0.889rem;
border-left: 0.167rem solid currentColor;
border-right: 0.167rem solid currentColor;
}
.m-bg-video-pause.is-paused .m-bg-video-pause-icon {
width: 0;
height: 0;
border-left: 0.667rem solid currentColor;
border-right: 0;
border-top: 0.444rem solid transparent;
border-bottom: 0.444rem solid transparent;
margin-left: 0.167rem;
}
/* Slider — Swiper-Carousel.
*
* `overflow: hidden` und die Eckenrundung hingen bis hierher an dieser
* Basisklasse. Fuer eine BILDreihe ist das richtig: Der angeschnittene letzte
* Slide braucht die harte Kante, und die Rundung gehoert ans Bild.
* Fuer eine KACHELreihe ist es falsch — ein Schatten oder eine Anhebung beim
* Ueberfahren (`transform: scale(…)`) wird an der Containerkante abgeschnitten.
* Beides sitzt deshalb an der Bild-Variante; eine andere Reihe erbt nur noch
* Breite und `min-width`. Gemeldet von HGK-Events.
*
* `min-width: 0` bleibt an der Basis: Ohne das sprengt ein Slider jede
* Grid-Spalte, weil Grid-Items `min-width: auto` haben. */
.m-bg-slider { width: 100%; min-width: 0; }
.m-bg-slider--images { overflow: hidden; border-radius: 0.444rem; }
/* Kachelreihe: Ueberstand zulassen, ohne die Nachbar-Slides zu zeigen.
*
* Die Basisklasse allein genuegt dafuer NICHT — `overflow: hidden` kommt
* zusaetzlich aus `swiper-bundle.min.css` (`.swiper`), also aus der Bibliothek.
* Am Prueftand gemessen: Nach dem Entfernen an `.m-bg-slider` stand der
* Kartenslider weiterhin auf `hidden`, und die gewinnende Regel war Swipers.
*
* `overflow: clip` clippt wie `hidden`, erlaubt aber ueber
* `overflow-clip-margin` einen Rand — Schatten und eine Anhebung beim
* Ueberfahren bleiben sichtbar, angrenzende Slides nicht.
* Rand hergeleitet: Eine Kachel von rund 300 px waechst bei `scale(1.1)` um
* 15 px je Seite; ein ueblicher Schatten (`0 4px 12px`) braucht 12 px. 1.5rem
* (27 px bei 18-px-Root) deckt beides ab.
* Kennt ein Browser `clip` nicht (Safari < 16), wird die Deklaration verworfen
* und Swipers `hidden` bleibt — der alte Zustand, kein kaputter. */
.m-bg-cardslider.swiper {
overflow: clip;
overflow-clip-margin: 1.5rem;
}
.m-bg-slider .swiper-slide img { width: 100%; height: auto; display: block; }
.m-bg-slider .swiper-pagination { position: relative; margin-top: 0.5rem; }
/* Bedienelement IM FLUSS (Schiebebalken, Punkte) — der Wrapper darf dann keine
* Prozenthöhe tragen.
*
* Swiper liefert `.swiper-wrapper { height: 100% }` mit. Der `.m-bg-slider`
* selbst hat keine gesetzte Höhe, sie entsteht aus dem Inhalt — und dieser
* Inhalt enthält das Bedienelement bereits. Die Prozenthöhe löst sich also
* gegen eine Höhe auf, die den Balken schon einschliesst: Der Wrapper wird um
* exakt dessen Blockgröße zu hoch, schiebt ihn um dieselbe Strecke nach unten
* und `overflow: hidden` (Zeile oben) schneidet ihn ab. Sichtbar ist nichts.
*
* An echtem Inhalt gemessen (HGK-Events, 10.08.2026, vier Zustände):
* ohne Balken im Fluss .swiper 540,09 Wrapper 540,09 → Balken sichtbar
* mit Balken im Fluss .swiper 612,08 Wrapper 612,08 → Balken abgeschnitten
* 612,08 = 540,09 + 64 (margin-top) + 8 (Höhe) — exakt die Blockgröße.
* `height: auto` wirkt NUR am Wrapper: Der `.swiper` ist ohnehin auto, und der
* Slide ist Flex-Item und wird auf die Wrapper-Höhe gedehnt.
*
* Bewusst nur diese beiden Fälle: Bei Pfeilen sind die Bedienelemente absolut
* positioniert, und ein Projekt darf dem `.swiper` eine feste Höhe geben
* (`.m-slider` tut das per `aspect-ratio`) — dort ist die Prozenthöhe richtig. */
.m-bg-slider--scrollbar .swiper-wrapper,
.m-bg-slider--pagination .swiper-wrapper { height: auto; }
/* Pfeile: Foundation-Groesse statt Swiper-Default (44 px), damit sie nicht
* ueber schmalen Slides thronen. */
.m-bg-slider .swiper-button-prev,
.m-bg-slider .swiper-button-next { color: var(--color-primary, #334155); }
.m-bg-slider .swiper-button-prev::after,
.m-bg-slider .swiper-button-next::after { font-size: 1.5rem; }
/* Schiebebalken (Bedienelement „Scrollbar" am Slider-Block).
*
* Er steht UNTER der Reihe, nicht darüber: Swiper legt seine Scrollbar per
* `position:absolute` über den unteren Bildrand — als Fortschrittsanzeige einer
* Bildreihe verdeckt sie dort Inhalt.
*
* Spezifität mit Absicht dreistellig: Swiper liefert `.swiper-horizontal >
* .swiper-scrollbar` (zwei Klassen) mit, und sein Stylesheet wird vom
* Render-Helfer erst im Body eingebunden — also NACH dieser Datei. Bei
* gleicher Spezifität gewänne deshalb Swiper.
*
* Maße aus dem Projektraster hergeleitet (1 rem = Root-Schriftgröße, 18 px im
* größten Breakpoint):
* Höhe 0.444rem = 8 px — dieselbe Stufe wie die Eckenrundung der Slider-Box
* Radius = halbe Höhe → Kapselform
* Abstand nach oben 1.444rem = der Blockabstand innerhalb einer Spalte
* (`.m-bg-col { gap }`), damit der Balken wie ein eigener Block sitzt
* Farbe folgt der Sektion (`--section-heading`), damit er auf dunklem Grund
* nicht verschwindet — Muster wie bei `.m-news-title`. */
.m-bg-slider.swiper > .swiper-scrollbar {
position: relative;
left: auto;
bottom: auto;
width: 100%;
/* zentriert, sobald ein Projekt den Balken schmaler macht als die Reihe —
ein Design gibt den Balken regelmäßig kürzer an als die Bildreihe
(Beispiel aus der Praxis: 1539 von 1924 px). Ohne diese Zeile klebte er
dann am linken Rand und das Projekt bräuchte eine zweite Regel. */
margin-inline: auto;
height: 0.444rem;
margin-top: 1.444rem;
border-radius: 0.222rem;
background: color-mix(in srgb, var(--section-heading, var(--color-primary, #334155)) 18%, transparent);
}
.m-bg-slider .swiper-scrollbar-drag {
background: var(--section-heading, var(--color-primary, #334155));
border-radius: 0.222rem;
}
/* Kartenslider — Kacheln statt Bilder in der Swiper-Reihe (Block-Typ
* `kartenslider`). Der Block trägt `.m-bg-slider` zusätzlich und erbt damit
* alles oben; hier steht nur, was die Kachel vom Bild-Slide unterscheidet.
*
* Bewusst ohne Farben, feste Maße und Farbwechsel der Kacheln: Das sind Werte
* des jeweiligen Entwurfs, nicht Mechanik. Ein Projekt setzt sie über
* `.m-bg-cardslider .swiper-slide:nth-child(3n+1)` und Geschwister — tragfähig
* ist dieser Selektor nur, weil der Block ohne `loop` initialisiert wird
* (output.php): Mit Endlosschleife klont Swiper Slides an beide Enden der
* Reihe, und die DOM-Reihenfolge wäre nicht mehr die des Backends.
*
* Gleiche Kachelhöhe entsteht über die Flex-Kette, nicht über Prozente: Der
* Slide ist Flex-Item des `.swiper-wrapper` und wird auf die Höhe der höchsten
* Kachel gedehnt; als eigener Flex-Container gibt er diese Höhe an die Kachel
* weiter. `height: 100%` trüge hier nicht, weil der Wrapper bei Bedienelement
* im Fluss `height: auto` bekommt (Regel oben) und eine Prozenthöhe daran
* nicht auflöst. */
.m-bg-cardslider .swiper-slide { display: flex; height: auto; }
.m-bg-card {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/* Aus dem Raster der Foundation übernommen: 0.667rem ist der Blockabstand
innerhalb einer Kachel-Spalte (`.m-bg-col--card`), 1.222rem das seitliche
Innenpadding der `.m-bg-iconbox`. */
gap: 0.667rem;
padding: 1.222rem;
}
.m-bg-card-icon { display: inline-flex; align-items: center; justify-content: center; }
.m-bg-card-value,
.m-bg-card-label { display: block; }
/* Linkboxen-Block */
.m-bg-linkboxes { gap: 0.778rem; margin: 0; }
@media (max-width: 47.99em) {
.m-bg-linkboxes { gap: 0.667rem; }
}
.m-bg-linkboxes--w-stretch { display: grid; }
.m-bg-linkboxes--w-stretch.m-bg-linkboxes--cols-1 { grid-template-columns: 1fr; }
.m-bg-linkboxes--w-stretch.m-bg-linkboxes--cols-2 { grid-template-columns: 1fr 1fr; }
.m-bg-linkboxes--w-natural { display: flex; flex-wrap: wrap; }
.m-bg-linkboxes--w-natural .m-bg-linkbox-item { flex: 0 0 auto; }
.m-bg-linkboxes--w-natural.m-bg-linkboxes--cols-1 { flex-direction: column; align-items: flex-start; }
.m-bg-linkbox-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.389rem 0.889rem;
font-size: 1rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
text-decoration: none !important;
border-radius: 0.222rem;
transition: filter 0.2s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.m-bg-linkbox-item .m-bg-linkbox-label { flex: 1; }
.m-bg-linkbox-item .m-bg-linkbox-arrow {
flex: 0 0 auto;
width: 1.111rem; height: 1.111rem;
color: var(--color-accent, #fde68a);
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.15s ease;
}
.m-bg-linkbox-item .m-bg-linkbox-arrow svg { width: 1.111rem; height: 1.111rem; }
.m-bg-linkbox-item:hover .m-bg-linkbox-arrow { transform: translateX(3px); }
.m-bg-linkbox-icon-left { flex: 0 0 1.111rem; display: inline-flex; align-items: center; justify-content: center; }
.m-bg-linkbox-icon-left svg { width: 1.111rem; height: 1.111rem; }
.m-bg-linkboxes--primary .m-bg-linkbox-item {
background-color: var(--section-link-bg, #2563eb); color: var(--section-link-fg, #ffffff) !important;
}
.m-bg-linkboxes--primary .m-bg-linkbox-item:hover { filter: brightness(0.95); }
.m-bg-linkboxes--outline .m-bg-linkbox-item {
background-color: transparent;
color: var(--section-fg, inherit) !important;
border: 2px solid var(--section-link-bg, #2563eb); padding: 0.222rem 0.722rem;
}
.m-bg-linkboxes--outline .m-bg-linkbox-item:hover {
background-color: var(--section-link-bg, #2563eb); color: var(--section-link-fg, #ffffff) !important;
}
.m-bg-linkboxes--plain .m-bg-linkbox-item {
background-color: transparent;
color: var(--section-fg, inherit) !important;
padding: 0.444rem 0;
border-radius: 0;
}
.m-bg-linkboxes--plain .m-bg-linkbox-item:hover { color: var(--section-heading, inherit) !important; }
@media (max-width: 47.99em) {
.m-bg-linkboxes--w-stretch.m-bg-linkboxes--cols-2 { grid-template-columns: 1fr; }
.m-bg-linkboxes--w-natural { flex-direction: column; align-items: flex-start; }
}
/* Iconbox — Icon 45x45 px, Titel Figtree Regular 18px, Text Figtree Light 18px */
.m-bg-iconbox { padding: 1rem 1.222rem; border-radius: 0.444rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.m-tone-light .m-bg-iconbox { background: #f1f5f9; border-color: #e2e8f0; }
.m-bg-iconbox-title { font-weight: 700; font-size: 1.111rem; margin-bottom: 0.667rem; }
.m-bg-iconbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.778rem; }
.m-bg-iconbox-list--cols-1 { grid-template-columns: 1fr; }
.m-bg-iconbox-list--cols-2 { grid-template-columns: 1fr 1fr; }
.m-bg-iconbox-list--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.m-bg-iconbox-list li { display: flex; align-items: center; gap: 0.778rem; }
.m-bg-icon {
flex: 0 0 2.5rem;
width: 2.5rem; height: 2.5rem;
display: inline-flex; align-items: center; justify-content: center;
color: var(--section-heading, currentColor);
}
.m-bg-icon svg { width: 2.5rem; height: 2.5rem; }
/* Grundgröße jedes Box-Grid-Symbols.
*
* Bis 0.3.14 baute sws_box_grid_render::iconSvg() das SVG selbst und schrieb
* width="20" height="20" ins Tag. Seit 0.3.15 delegiert die Methode an
* sws_icon(), das statt der Attribute eine Klasse setzt — die Größe muss
* seitdem aus dem CSS kommen.
*
* 20px waren der bisherige Wert; die Grundschrift dieses Projekts ist 18px,
* also 20/18 = 1.111rem — derselbe Wert, den .m-bg-iconlist-icon svg und
* .m-bg-linkbox-arrow svg bereits tragen.
*
* Container-Regeln wie `.m-bg-icon svg` (0,1,1) sind spezifischer als diese
* Klasse (0,1,0) und behalten ihre eigene Größe. Fuer .m-bg-card-icon, das
* keine eigene svg-Regel hat, ist sie die einzige Größenquelle: ohne sie
* fällt ein viewBox-SVG ohne Attribute auf die CSS-Ersatzgröße zurück.
* Sie wirkt zugleich auf Voll-SVGs aus „Eigene Icons“, deren eigene
* width/height-Attribute vom CSS geschlagen werden — genau so gewollt. */
.m-bg-icon-svg { width: 1.111rem; height: 1.111rem; }
.m-bg-itext { display: flex; flex-direction: column; line-height: 1.25; }
.m-bg-itext strong,
.m-bg-itext span {
font-family: 'Figtree', sans-serif;
font-weight: 300;
font-size: 1rem;
color: var(--section-fg, inherit);
}
.m-bg-itext strong { color: var(--section-heading, var(--section-fg, inherit)); }
/* Icon-Liste */
.m-bg-iconlist-wrap { width: 100%; }
.m-bg-iconlist-title { font-weight: 700; font-size: 1.111rem; margin-bottom: 0.667rem; }
.m-bg-iconlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.444rem 1.222rem; }
.m-bg-iconlist--cols-1 { grid-template-columns: 1fr; }
.m-bg-iconlist--cols-2 { grid-template-columns: 1fr 1fr; }
.m-bg-iconlist--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.m-bg-iconlist li {
display: flex; align-items: baseline; gap: 0.556rem;
font-family: 'Figtree', sans-serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.45;
color: var(--section-fg, inherit);
}
.m-bg-iconlist-icon {
flex: 0 0 1.111rem;
width: 1.111rem; height: 1.111rem;
display: inline-flex; align-items: center; justify-content: center;
color: var(--color-accent, #FFD200);
transform: translateY(0.111rem);
}
.m-bg-iconlist-icon svg { width: 1.111rem; height: 1.111rem; }
.m-bg-iconlist-text { flex: 1 1 0; min-width: 0; }
@media (max-width: 63.99em) {
.m-bg-grid--c111,
.m-bg-grid--c1111,
.m-bg-grid--c11111 { grid-template-columns: 1fr 1fr; }
}
/* Tablet/Laptop (48–64em): 3-spaltige Inhalte auf 2 Cols downscalen.
* Lange Labels / Worte in 3 schmalen Cols blähen die min-content der äußeren
* Text-Col auf, sodass im 1:3-Layout (c13/c31) die Bild-Col auf ~50px
* kollabiert. 2 Cols entspannen min-content ausreichend. */
@media (min-width: 48em) and (max-width: 63.99em) {
.m-bg-iconbox-list--cols-3,
.m-bg-iconlist--cols-3 { grid-template-columns: 1fr 1fr; }
.m-bg-text--cols-3 { columns: 2; }
}
@media (max-width: 47.99em) {
.m-bg-grid--c11,
.m-bg-grid--c11o-l,
.m-bg-grid--c11o-r,
.m-bg-grid--c12,
.m-bg-grid--c21,
.m-bg-grid--c13,
.m-bg-grid--c31,
.m-bg-grid--c111,
.m-bg-grid--c1111,
.m-bg-grid--c11111 { grid-template-columns: 1fr; }
.m-bg-text--cols-2,
.m-bg-text--cols-3 { columns: 1; }
.m-bg-iconbox-list--cols-2,
.m-bg-iconbox-list--cols-3 { grid-template-columns: 1fr; }
.m-bg-iconlist--cols-2,
.m-bg-iconlist--cols-3 { grid-template-columns: 1fr; }
.m-bg-headline .m-bg-h1,
.m-bg-headline .m-bg-h3 { font-size: 1.333rem; }
.m-bg-headline .m-bg-h2 { font-size: 1.556rem; }
}
/* Globale strong/b-Schrift */
strong,
b {
font-weight: 600;
}
/* Tabellen */
table tr > td, table tr > th {
padding: 0.5rem 0.5rem;
vertical-align: top;
text-align: left;
}
/* === Sticky-Header mit Compact-Modus (analog stahlbauhoch3.de) === */
/*
* Header startet bei voller Höhe (8.611rem; ≈ 155 px @ 18 px root) und klebt
* von Anfang an oben fest. Beim Scrollen > 100 px setzt m-header.js die
* Klasse `.is-compact` → Header schrumpft auf 4.444rem (≈ 80 px), Logo-Halo
* von 12.333rem auf 4rem, Steuerrad-Logo von 10.333rem auf 3.5rem.
*
* `body { padding-top: var(--m-header-h-full) }` kompensiert den entfallenen
* Layout-Fluss — sonst rutscht der Hero unter den fixed Header.
* `scroll-padding-top` sorgt, dass Anker (Fahrtenrevier-Orte, FAQ-Items …)
* nicht hinter dem Header landen.
*/
:root {
--m-header-h-full: 8.611rem;
--m-header-h-compact: 4.444rem;
}
html { scroll-padding-top: var(--m-header-h-compact); }
body { padding-top: var(--m-header-h-full); }
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: box-shadow 0.25s ease;
}
#header .m-header-h,
#header .m-logo-circle,
#header .m-logo-steering {
transition: height 0.25s ease, width 0.25s ease, left 0.25s ease;
}
#header.is-compact { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
#header.is-compact .m-header-h { height: var(--m-header-h-compact); }
#header.is-compact .m-logo-circle { width: 4rem; height: 4rem; left: var(--edge-pad); }
#header.is-compact .m-logo-steering { width: 3.5rem; height: 3.5rem; }
#header.is-compact .m-megamenu-viewport { top: var(--m-header-h-compact); }
@media (max-width: 1023px) {
#header {
max-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
/* Tablet + Mobile (< 1024 px): Logo verkleinern + bündig auf Inhalts-Edge. */
@media (max-width: 1023px) {
.m-logo-circle {
width: 8.5rem;
height: 8.5rem;
left: var(--edge-pad);
top: 50%;
transform: translateY(-50%);
}
.m-logo-steering {
width: 7.2rem;
height: 7.2rem;
}
}
/* Desktop ≥ 1024 px im Vollmodus: Logo etwas größer als die Token-Defaults. */
@media (min-width: 1024px) {
.m-logo-circle {
width: 13.5rem;
height: 13.5rem;
left: var(--edge-pad);
}
.m-logo-steering {
width: 11.5rem;
height: 11.5rem;
}
}
/* === Box-/Kachel-Design (pflegbar via Page Composer → CSS-Optionen) === */
/*
* Border-Radius, Schatten und Rahmen werden pro Box-Klasse im Backend gepflegt
* (Spalten border_radius, border_width, border_color, box_shadow in
* rex_sws_css_options/category=box_class). Werte landen als CSS-Variablen
* am gerenderten Card-Element via Inline-Style:
* --card-border-radius, --card-border-width, --card-border-color, --card-shadow
*
* Greift NUR, wenn die Variable im Inline-Style gesetzt ist (Attribute-Selector).
* Ohne gesetzten Wert bleiben die Card-spezifischen Defaults (z. B.
* .m-bg-col--card { border-radius: 0.222rem }) unangetastet.
*/
[style*="--card-border-radius"] {
border-radius: var(--card-border-radius);
}
[style*="--card-shadow"] {
box-shadow: var(--card-shadow);
}
[style*="--card-border-color"],
[style*="--card-border-width"] {
border: var(--card-border-width, 1px) solid var(--card-border-color, currentColor);
}
/* === sws_starter Lite-Templates · Header + Footer · Vanilla-CSS (kein Tailwind) === */
/*
* Wird von den Default-Templates `data/templates/header.php` und
* `data/templates/footer.php` genutzt. Komplett eigenständig.
*
* KORREKTUR 2026-08-25: Hier stand, die Vorlagen bauten „nur auf Tokens
* (`.site-max-w`, `.site-px-edge`, ggf. .site-header-h)" auf. Das trifft nicht
* zu — sie emittieren `lite-*`-Klassen, und die drei genannten Selektoren kommen
* in keiner Vorlage und in keinem gerenderten HTML vor. Der Satz hat einen ganzen
* Token-Satz im Seed am Leben gehalten, den niemand benutzt hat.
*
* Projekt
* kann diese Klassen beliebig overriden in eigener overrides.css oder die
* Templates komplett ersetzen.
*/
/* === Lite-Header ===
* Farbschema kommt aus dispatch_header.php (sws_starter_get_header_appearance):
* --header-bg / --header-text / --header-heading / --header-link-bg / --header-link-fg
* werden als Inline-Style auf gesetzt. Fallback hier = Foundation-Defaults.
*/
.lite-header {
background: var(--header-bg, #ffffff);
color: var(--header-text, #334155);
border-bottom: 1px solid #e2e8f0;
position: sticky;
top: 0;
z-index: 40;
}
.lite-header-inner {
max-width: var(--max-w, 1485px);
margin: 0 auto;
padding: 0 1.5rem;
min-height: 4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.lite-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--header-heading, #0f172a); }
.lite-logo img { max-height: 2.5rem; width: auto; display: block; }
.lite-logo-text { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--header-heading, #0f172a); }
.lite-logo-icon { height: 2.5rem; width: auto; display: block; color: var(--header-heading, #0f172a); }
/* === Heading-Vorlagen (responsive via clamp) ===
* Wirkt global pro Site, gesetzt im Starter-Setup → rex_config sws_starter/heading_h1_class etc.
* Module rendern die Klasse zusätzlich zu ihren bestehenden Headline-Klassen.
* Skalierung: Min-Wert (mobil) – 5vw Vorzugswert – Max-Wert (desktop).
*/
.m-h1-s { font-size: clamp(1.25rem, 3.5vw, 1.5rem); line-height: 1.2; }
.m-h1-m { font-size: clamp(1.5rem, 4.5vw, 2rem); line-height: 1.18; }
.m-h1-l { font-size: clamp(2rem, 5.5vw, 2.75rem); line-height: 1.12; }
.m-h1-xl { font-size: clamp(2.5rem, 6.5vw, 3.5rem); line-height: 1.08; }
.m-h1-display { font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1.05; }
.m-h2-s { font-size: clamp(1rem, 2.5vw, 1.125rem); line-height: 1.3; }
.m-h2-m { font-size: clamp(1.125rem, 3vw, 1.375rem); line-height: 1.25; }
.m-h2-l { font-size: clamp(1.375rem, 3.5vw, 1.75rem); line-height: 1.2; }
.m-h2-xl { font-size: clamp(1.625rem, 4vw, 2.25rem); line-height: 1.15; }
/* === Linkbox-Vorlagen (Button-Varianten) ===
* Wirkt global, gesetzt im Starter-Setup → rex_config sws_starter/linkbox_class.
* Module fügen die Klasse zu ihrem Button-Selektor zusätzlich an (z.B. `m-tis-btn m-btn-outline`).
* Color/BG nutzen Section-aware Custom-Properties wo möglich.
*/
.m-btn-solid {
background: var(--color-accent);
color: var(--color-accent-foreground);
padding: 0.85rem 1.75rem;
border: 0;
border-radius: 0.25rem;
transition: filter 0.15s;
}
.m-btn-solid:hover { filter: brightness(0.92); }
.m-btn-outline {
background: transparent;
color: var(--color-accent);
padding: 0.75rem 1.65rem;
border: 2px solid var(--color-accent);
border-radius: 0.25rem;
transition: background 0.15s, color 0.15s;
}
.m-btn-outline:hover {
background: var(--color-accent);
color: var(--color-accent-foreground);
}
.m-btn-ghost {
background: transparent;
color: var(--color-accent);
padding: 0.85rem 1rem;
border: 0;
border-radius: 0.25rem;
transition: background 0.15s;
}
.m-btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.m-btn-pill {
background: var(--color-accent);
color: var(--color-accent-foreground);
padding: 0.85rem 2rem;
border: 0;
border-radius: 999px;
transition: filter 0.15s;
}
.m-btn-pill:hover { filter: brightness(0.92); }
.m-btn-text {
background: transparent;
color: var(--color-accent);
padding: 0.5rem 0;
border: 0;
border-bottom: 1px solid var(--color-accent);
border-radius: 0;
transition: opacity 0.15s;
}
.m-btn-text:hover { opacity: 0.7; }
/* Icon im Button (gepflegt im Starter-Setup → linkbox_icon, aus sws_verwaltung Icons) */
.m-btn-icon {
width: 1.1em;
height: 1.1em;
flex-shrink: 0;
color: currentColor;
}
.m-btn-icon svg { width: 100%; height: 100%; display: block; }
/* --- Variante „Spacious" (Aldorf-Stil): höherer Header + größerer Logo-Slot --- */
.lite-header--spacious .lite-header-inner { min-height: 5.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.lite-header--spacious .lite-logo img { max-height: 3.5rem; }
.lite-header--spacious .lite-logo-icon { height: 3.5rem; }
.lite-header--spacious .lite-logo-text { font-size: 1.5rem; }
.lite-header--spacious .lite-nav--desktop ul { gap: 2.25rem; }
.lite-header--spacious .lite-nav--desktop a { font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
/* --- Modifier „Logo-Box": weiße Box mit Schatten, ragt unter den Header.
* Box ist via position:absolute aus dem Flex-Layout genommen — der Header-Streifen
* behält seine ursprüngliche Höhe. Box-Breite passt sich dem Logo-Inhalt an
* (min-width = Box-Höhe, also mindestens quadratisch; bei breiten Wortmarken wächst sie).
* Der Inner-Container reserviert per padding-left Platz für die Box.
*/
.lite-header--logo-box { overflow: visible; }
.lite-header--logo-box .lite-header-inner { position: relative; padding-left: 8rem; }
.lite-header--logo-box .lite-logo {
position: absolute;
left: 1.5rem;
top: -1rem; /* Überstand oben */
bottom: -1rem; /* Überstand unten — symmetrisch */
width: auto;
min-width: 6rem; /* untere Schranke = ungefähre Box-Höhe → quadratisch wenn Logo schmal */
max-width: 16rem; /* obere Schranke damit lange Wortmarken nicht das halbe Layout fressen */
background: #ffffff;
box-shadow: 0 6px 16px -2px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 6px;
padding: 0.7rem 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
}
/* Logo-Inhalt füllt die Box vertikal aus; Breite folgt der Aspect-Ratio des Originals,
* wodurch das Logo dynamisch breit wird und die Box mitwächst. */
.lite-header--logo-box .lite-logo img,
.lite-header--logo-box .lite-logo .lite-logo-icon {
max-height: 100%;
max-width: 100%;
width: auto;
height: 4.5rem; /* fest → Breite ergibt sich aus Aspect-Ratio */
display: block;
}
.lite-header--logo-box .lite-logo-text {
color: #0f172a;
font-size: 0.95rem;
line-height: 1.15;
text-align: center;
font-weight: 700;
}
/* Bei Spacious darf die Box größer + Überstand symmetrisch tiefer */
.lite-header--spacious.lite-header--logo-box .lite-header-inner { padding-left: 9.5rem; }
.lite-header--spacious.lite-header--logo-box .lite-logo {
min-width: 7.5rem;
top: -1.25rem;
bottom: -1.25rem; /* symmetrisch */
}
.lite-header--spacious.lite-header--logo-box .lite-logo img,
.lite-header--spacious.lite-header--logo-box .lite-logo .lite-logo-icon {
height: 5.5rem;
}
/* Bei Hero-Overlay bleibt die Box weiß auch wenn Header transparent */
.lite-header--hero.lite-header--logo-box .lite-logo {
background: #ffffff;
color: #0f172a;
}
/* Centered-Variante: Box mittig, symmetrischer Überstand */
.lite-header--centered.lite-header--logo-box .lite-header-inner { padding-left: 0; }
.lite-header--centered.lite-header--logo-box .lite-logo {
position: relative;
left: auto;
top: auto;
bottom: auto;
margin: -1rem auto -1rem auto; /* symmetrisch, gleichzeitig Container-Höhe stabil */
}
/* Desktop-Nav (sichtbar ≥ 64em) */
.lite-nav--desktop { display: none; }
.lite-nav--desktop ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; align-items: center; }
.lite-nav--desktop a {
color: var(--header-text, #334155);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: color 0.15s;
}
.lite-nav--desktop a:hover, .lite-nav--desktop a[aria-current="page"] { color: var(--header-link-bg, #2563eb); }
/* Burger (sichtbar < 64em) */
.lite-burger {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--header-text, #334155);
padding: 0.5rem;
cursor: pointer;
}
.lite-burger:hover { color: var(--header-link-bg, #2563eb); }
/* Mobile-Accordion-Nav */
.lite-nav--mobile { background: var(--header-bg, #ffffff); border-top: 1px solid #e2e8f0; }
.lite-nav--mobile[hidden] { display: none; }
.lite-nav--mobile ul {
list-style: none; margin: 0; padding: 0 1.5rem;
max-width: var(--max-w, 1485px); margin-left: auto; margin-right: auto;
}
.lite-nav--mobile li { border-bottom: 1px solid rgba(0,0,0,0.05); }
.lite-nav--mobile li:last-child { border-bottom: 0; }
.lite-nav--mobile a {
display: block;
padding: 0.875rem 0;
color: var(--header-heading, #0f172a);
text-decoration: none;
font-weight: 500;
}
.lite-nav--mobile a:hover, .lite-nav--mobile a[aria-current="page"] { color: var(--header-link-bg, #2563eb); }
/* Der Umschaltpunkt Desktop-Nav ↔ Burger stand hier bis 2026-08-09 fest auf 64em.
Er ist jetzt je Header-Variante pflegbar (`nav_breakpoint`, Default 1024 px = 64em,
weil 1em in Media Queries immer 16 px sind) und wird deshalb von
`lib/dispatch_header.php` als