— the handoff CSS already ships the
interactive styling (cursor, [aria-current] fill). Touch targets are
enlarged to 44px via ::after (DESIGN-SPEC §6.6) without changing the
visible 15px squares. */
.hero__punkt::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
translate: -50% -50%;
inline-size: 44px;
block-size: 44px;
}
/* control bar: pause button left of the dots, spacing = dot raster (22px).
Takes over the dots' original design position; the dots become static
flex children so the distance stays identical on every viewport width. */
.hero__steuerung {
position: absolute;
inset-block-end: min(53px, 2.7604vw);
inset-inline-end: min(57px, 2.9688vw);
z-index: 2;
display: flex;
align-items: center;
gap: 22px;
}
.hero__steuerung .hero__punkte {
position: static;
inset: auto;
}
.hero__pause {
position: relative;
display: grid;
place-items: center;
inline-size: 28px;
block-size: 28px;
padding: 0;
border: 1px solid var(--weiss);
background: rgb(0 0 0 / 0.25);
color: var(--weiss);
cursor: pointer;
}
.hero__pause::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
translate: -50% -50%;
inline-size: 44px;
block-size: 44px;
}
.hero__pause-icon { display: block; }
.hero__pause[aria-pressed="true"] .hero__pause-icon--pause { display: none; }
.hero__pause:not([aria-pressed="true"]) .hero__pause-icon--play { display: none; }
/* ---- Aktuelles container: map CMS children onto the design grid --------- */
.raster--aktuelles .aktuelles__kopf { display: contents; }
.raster--aktuelles .aktuelles__kopf > h1,
.raster--aktuelles .aktuelles__kopf > h2,
.raster--aktuelles .aktuelles__kopf > h3 {
grid-area: kopf;
margin: 0;
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-teaser-block);
line-height: 1.14;
color: var(--c-text-auf-weiss);
hyphens: none;
text-transform: none;
letter-spacing: 0;
}
@media (min-width: 1280px) {
.raster--aktuelles .aktuelles__kopf > h2 { line-height: 1.3; }
}
.raster--aktuelles .aktuelles__kopf > .textblock { grid-area: text; }
.raster--aktuelles .aktuelles__kopf > .textblock p {
margin: 0;
font-size: clamp(18px, 17.49px + 0.131vw, 20px);
font-weight: var(--w-bold);
line-height: 1.35;
color: var(--c-text-auf-weiss);
hyphens: none;
}
.aktuelles__cover-zone { display: contents; }
/* ---- Generic two-column container (Adresse, Kataloge …) ----------------- */
.zweispalter__raster {
display: grid;
grid-template-columns: 1fr;
row-gap: var(--s-8);
}
@media (min-width: 900px) {
.zweispalter__raster {
grid-template-columns: 668fr 982fr;
align-items: start;
row-gap: 0;
column-gap: var(--col-gap);
}
}
.zweispalter .textblock p {
font-style: normal;
font-size: var(--t-body-m);
font-weight: var(--w-bold);
line-height: 1.5;
color: var(--gruen-900);
margin: 0;
}
/* ---- Kontakt container: info column + form column (2fr/3fr) ------------- */
@media (min-width: 900px) {
.kontakt__raster .kontakt__formularzone { grid-column: 3; }
}
.kontakt__text .textblock p {
font-size: var(--t-body-m);
font-weight: var(--w-bold);
line-height: 1.5;
color: var(--c-text-auf-weiss);
max-inline-size: var(--mass-fliesstext);
hyphens: manual;
}
/* ---- Text + Bild (textpic / textmedia, Partial Content/TextBild) -------
Jede Bildposition aus dem Backend hat eine eigene Darstellung. Die
Umschaltpunkte messen die Breite des Elements, nicht des Fensters: in der
schmalen Kachel-Spalte von "Aktuelles" bleibt es so länger einspaltig als
als volle Sektion. Unter 560px Elementbreite stehen Bild und Text immer
untereinander, das Bild in voller Breite. */
.textbild:not(.sektion),
.textbild > .container {
container: textbild / inline-size;
}
.textbild__raster {
display: flex;
flex-direction: column;
gap: var(--s-6);
}
/* flow-root: das umflossene Bild (im Text) ragt nicht aus dem Element. */
.textbild__text { display: flow-root; min-inline-size: 0; }
.textbild__text > :last-child { margin-block-end: 0; }
/* Satzbreite statt der 95 % der Kapitel-Copy: sonst endet der Text über
oder unter einem vollbreiten Bild sichtbar vor dessen Kante. */
.textbild__copy { max-inline-size: var(--mass-fliesstext); }
.textbild__medien {
--textbild-spalten: 1;
display: grid;
grid-template-columns: repeat(var(--textbild-spalten), minmax(0, 1fr));
gap: var(--s-4);
align-items: start;
}
/* Mehrere Bilder: schmal höchstens zwei nebeneinander. */
.textbild__medien:not(.textbild__medien--spalten-1) { --textbild-spalten: 2; }
.textbild__bild { margin: 0; }
.textbild__bild picture,
.textbild__link { display: block; }
.textbild__bild img {
display: block;
inline-size: 100%;
block-size: auto;
}
.textbild__link:focus-visible {
outline: 2px solid var(--gruen-900);
outline-offset: 3px;
}
/* Im Text, schmal: Bild zwischen Überschrift und Text. */
.textbild--im-text .textbild__medien { margin-block-end: var(--s-5); }
@container textbild (min-width: 560px) {
.textbild__medien.textbild__medien--spalten-3 { --textbild-spalten: 3; }
.textbild__medien.textbild__medien--spalten-4 { --textbild-spalten: 4; }
.textbild__medien.textbild__medien--spalten-5 { --textbild-spalten: 5; }
.textbild__medien.textbild__medien--spalten-6 { --textbild-spalten: 6; }
/* Über / unter dem Text: links und rechts nehmen die halbe Breite und
stehen an ihrer Kante, mittig nimmt die volle Breite. */
.textbild--links:is(.textbild--oben, .textbild--unten) .textbild__medien,
.textbild--rechts:is(.textbild--oben, .textbild--unten) .textbild__medien {
inline-size: 50%;
}
.textbild--rechts:is(.textbild--oben, .textbild--unten) .textbild__medien {
align-self: flex-end;
}
/* Im Text: Bild auf 40 % Breite, der Text umfließt es. Die Überschrift
läuft darüber über die volle Breite. */
.textbild--im-text .textbild__medien {
inline-size: 40%;
margin-block: var(--s-1) var(--s-4);
}
.textbild--im-text.textbild--links .textbild__medien {
float: left;
margin-inline-end: var(--s-7);
}
.textbild--im-text.textbild--rechts .textbild__medien {
float: right;
margin-inline-start: var(--s-7);
}
/* Bei mehreren Bildern im 40-%-Streifen wird jedes zu klein. */
.textbild--im-text .textbild__medien { --textbild-spalten: 1; }
/* Neben dem Text: zwei gleich breite Spalten, Text läuft nicht unter
das Bild. */
.textbild--daneben .textbild__raster {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
/* In schmalen Containern frisst der volle Spaltenabstand sonst die
Textspalte. */
column-gap: min(var(--col-gap), 5cqi);
align-items: start;
}
.textbild--daneben.textbild--rechts .textbild__medien { order: 2; }
.textbild--daneben .textbild__medien:not(.textbild__medien--spalten-1) { --textbild-spalten: 2; }
}
/* Kachel-Spalte "Aktuelles": die Spalte läuft (mobil beidseitig, ab 1280px
rechts) bis an den Fensterrand, damit die Bild-Kacheln angeschnitten
stehen. Text-Elemente darin brauchen den Seitenrand zurück, sonst stößt
der Text an die Fensterkante. */
.aktuelles__kacheln > li > :is(.textbild, .textblock) {
padding-inline: var(--gutter);
}
@media (min-width: 1280px) {
.aktuelles__kacheln > li > :is(.textbild, .textblock) {
padding-inline: 0 var(--gutter);
}
}
/* Zwei Text-Meldungen hintereinander: der Kachel-Abstand (12-15px) trennt
sie nicht als eigene Beiträge. */
.aktuelles__kacheln > li:has(> :is(.textbild, .textblock)) + li:has(> :is(.textbild, .textblock)) {
margin-block-start: var(--s-8);
}
/* ---- Aufzählungen aus dem RTE ------------------------------------------
Der Reset nimmt ul/ol jeden Innenabstand. Da die Aufzählungszeichen per
Voreinstellung außerhalb des Inhaltsbereichs sitzen (list-style-position:
outside), standen sie dadurch links neben der Spalte im Seitenrand. Der
Einzug holt sie in die Textspalte zurück; der Text bleibt bündig zur
übrigen Copy. Dekorative Listen im Layout tragen eigene Klassen und sind
hier absichtlich nicht erfasst. */
:is(.kapitel-block__copy, .kapitel__copy, .text-a, .lead, .textblock,
.download-block__copy, .stellen__copy, .galerie__text, .trust__intro,
.werte__lead) :is(ul, ol) {
padding-inline-start: 1.6em;
}
/* Zahlen brauchen mehr Raum als ein Punkt, sonst stößt ab "10." die
Ziffer wieder an die Spaltenkante. */
:is(.kapitel-block__copy, .kapitel__copy, .text-a, .lead, .textblock,
.download-block__copy, .stellen__copy, .galerie__text, .trust__intro,
.werte__lead) ol {
padding-inline-start: 2.2em;
}
:is(.kapitel-block__copy, .kapitel__copy, .text-a, .textblock,
.download-block__copy, .stellen__copy, .galerie__text) :is(ul, ol) > li + li {
margin-block-start: var(--s-2);
}
/* ---- RTE output inside styled wrappers (no nested styling drift) ---- */
.lead p,
.werte__lead p,
.trust__intro p { margin: 0; font: inherit; color: inherit; }
.lead strong { font-weight: var(--w-black); }
@media (min-width: 900px) {
.lead strong { font-weight: var(--w-bold); }
}
/* ---- Trust-Logo-Slider: feste Slots, Slide-um-eins ------------------------
Sichtbare Logos je Breite: 3 (mobil) / 5 / 7 (Desktop, wie im Entwurf).
Gleiche Slotbreiten machen die Pfeil-Navigation logo-genau; die Punkte
sind Buttons — die Handoff-CSS liefert [aria-current] und 44px-Ziele. */
.trust__buehne .trust__spur {
--trust-sichtbar: 3;
justify-content: flex-start;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
@media (min-width: 640px) {
.trust__buehne .trust__spur { --trust-sichtbar: 5; }
}
@media (min-width: 1280px) {
.trust__buehne .trust__spur { --trust-sichtbar: 7; }
}
.trust__buehne .trust__spur li {
flex: 0 0 calc(100% / var(--trust-sichtbar));
display: grid;
place-items: center;
padding-inline: clamp(10px, 1.5vw, 32px);
scroll-snap-align: start;
}
.trust__buehne .trust__spur img {
block-size: auto;
inline-size: auto;
max-inline-size: 100%;
max-block-size: var(--logo-h-mob, 70px);
}
@media (min-width: 900px) {
.trust__buehne .trust__spur img { max-block-size: var(--logo-h, 130px); }
}
.trust__logo-link {
display: grid;
place-items: center;
max-inline-size: 100%;
}
.trust__pfeil:disabled {
opacity: 0.3;
cursor: default;
}
/* display:flex in seite.css würde das hidden-Attribut sonst überstimmen. */
.trust__punkte[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.trust__buehne .trust__spur { scroll-behavior: smooth; }
}
/* ---- Download-Block: Einleitungstext -------------------------------------
Folgt dem übrigen Fließtext der Seite. Vorher stand er fett und mit
engerer Zeilenhöhe als jeder andere Fließtext. */
.download-block__copy {
font-weight: var(--w-regular);
line-height: var(--lh-copy);
}
.download-block__copy > p + p { margin-block-start: var(--lh-copy); }
/* ---- Download-Zeile: Dateiangabe (DESIGN-SPEC §3.9 [ERG]) ----------------
Die Angabe steht unter dem Titel in derselben Spalte, nicht unter dem
Symbol: dort saß sie halb im Spaltenzwischenraum und wirkte losgelöst.
Das Symbol reicht dafür über beide Zeilen. */
.download-zeile__icon { grid-row: 1 / span 2; }
.download-zeile__name {
grid-column: 2;
font-weight: var(--w-medium);
/* Der Entwurf setzte den Titel optisch auf die Mitte des Symbols. Mit der
Dateiangabe darunter beginnt der Textblock wieder oben. */
margin-block-start: 0;
}
.download-zeile__meta {
grid-column: 2;
margin-block-start: 2px;
font-size: clamp(12px, 11.45px + 0.140vw, 14px);
font-weight: var(--w-regular);
line-height: 1.4;
color: var(--gruen-900);
white-space: nowrap;
}
/* ---- Standalone shop tab (Downloads) ------------------------------------- */
.shop-tab-anker { position: relative; block-size: 0; }
/* ---- Galerie text blocks -------------------------------------------------- */
.galerie__text p + p { margin-block-start: var(--s-6); }
/* ---- Formular: Abschlusszeile + Fehlerdarstellung ------------------------ */
.formular__abschluss {
display: flex;
justify-content: flex-end;
margin-block-start: var(--s-6);
}
/* Serverseitig gemeldete Fehler stehen dort, wo auch die Live-Meldung des
Browsers steht: über dem Feld, rechts neben der Marke. Ohne das fließen sie
unter dem Feld in die nächste Rasterzeile und überschreiben deren Marken. */
.feld .feld__fehler--sichtbar {
display: block;
position: absolute;
inset-block-end: calc(100% + 2px);
inset-inline: 32% 0;
margin: 0;
font-size: var(--t-body-s);
line-height: 1.35;
color: var(--rot);
text-align: end;
}
/* Die Meldung zur Datenschutz-Zustimmung bricht als eigene Zeile unter die
Ankreuzzeile um, statt sich rechts daneben zu setzen. */
.zustimmung--fehler { flex-wrap: wrap; }
.zustimmung .zustimmung__fehler {
display: block;
flex-basis: 100%;
margin: var(--s-1) 0 0;
font-size: var(--t-body-s);
line-height: 1.35;
color: var(--rot);
text-align: start;
}
/* Platz für die Meldung: die Zeilenfuge allein trägt nur eine Zeile, in der
bereits die Marke steht. Der Außenabstand am fehlerhaften Feld lässt die
Rasterzeile wachsen, statt die Meldung in die Zeile darüber zu schieben. */
.formular__raster .feld--fehler {
margin-block-start: calc(1.35 * var(--t-body-s));
}
.feld--nachricht.feld--fehler {
margin-block-start: calc(clamp(14.08px, 8.69px + 1.381vw, 35.21px) + 1.35 * var(--t-body-s));
}
/* Gleiche Randfarbe wie bei der Live-Prüfung des Browsers. */
.feld--fehler .feld__eingabe {
border: var(--border-1);
border-color: var(--rot);
}
.zustimmung--fehler .zustimmung__box { outline: 1px solid var(--rot); }
/* Die hochgestellte Marke weicht nur dort auf 30 % Breite aus, wo daneben eine
Meldung steht. Ohne Meldung darf sie die ganze Feldbreite nutzen — sonst
bricht "E-Mail-Adresse" auf schmalen Viewports um und wandert in das Feld
darüber. */
.feld:not(.feld--fehler):not(:has(.feld__eingabe:user-invalid)) .feld__eingabe:focus ~ .feld__marke,
.feld:not(.feld--fehler):not(:has(.feld__eingabe:user-invalid)) .feld__eingabe:not(:placeholder-shown) ~ .feld__marke {
max-inline-size: 100%;
}
/* ---- Pflichtfeld-Sternchen ------------------------------------------------
Haengt am required-Attribut des Eingabefeldes und nicht an einer eigenen
Klasse. Dadurch stimmt es sowohl im serverseitig gerenderten Zustand als
auch, sobald das Betreff-Feld die Adressfelder im Browser umschaltet. */
.feld:has(.feld__eingabe:required) .feld__marke::after,
.zustimmung:has(.zustimmung__box:required) .zustimmung__marke::after {
content: "\00a0*";
}
/* ---- Auswahlfeld (Betreff) ----------------------------------------------- */
.feld--voll { grid-column: 1 / -1; }
/* Die Marke des Auswahlfeldes steht dauerhaft ueber dem Feld und ragt damit
aus der ersten Rasterzeile heraus. Oberhalb liegt keine Zeilenfuge, die ihr
Platz liesse -- deshalb hier derselbe Abstand wie zwischen zwei Zeilen. */
.feld--auswahl { margin-block-start: clamp(20px, 17.96px + 0.5229vw, 28px); }
.feld__eingabe--auswahl {
appearance: none;
padding-inline-end: calc(var(--s-4) + 20px);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23004e2c' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--s-4) center;
background-size: 12px 8px;
cursor: pointer;
}
/* Ein Auswahlfeld hat immer einen Wert, seine Marke steht deshalb dauerhaft
ueber dem Feld -- derselbe Zustand wie bei einem ausgefuellten Textfeld. */
.feld--auswahl .feld__marke {
inset-block-start: auto;
inset-block-end: calc(100% + 2px);
inset-inline-end: auto;
max-inline-size: 30%;
text-align: start;
font-size: var(--t-body-s);
line-height: 1.35;
pointer-events: auto;
}
/* ---- Suchseite (nicht im XD entworfen, DESIGN-SPEC §8 Nr. 13) ------------ */
.suche__box { margin-block-end: var(--s-9); }
.suche__zeile { display: flex; gap: var(--s-3); max-inline-size: 640px; }
.suche__feld {
flex: 1;
block-size: 51px;
padding-inline: var(--s-4);
border: 1px solid color-mix(in srgb, var(--schwarz) 50%, transparent);
border-radius: 0;
font-size: var(--t-body-l);
font-family: var(--font-body);
color: var(--c-text);
background: var(--weiss);
}
.suche__versteckt { display: none; }
.suche__bilanz {
font-size: var(--t-body-m);
color: var(--gruen-900);
margin-block-end: var(--s-6);
}
.suche__liste { list-style: none; margin: 0; padding: 0; }
.suche__liste > li + li { margin-block-start: var(--s-7); }
.suche__treffer-titel {
font-family: var(--font-body);
font-weight: var(--w-bold);
font-size: var(--t-body-l);
color: var(--gruen-900);
margin: 0 0 var(--s-2);
}
.suche__treffer-titel a { color: inherit; }
.suche__treffer-text {
font-size: var(--t-body-m);
color: var(--c-text);
margin: 0 0 var(--s-1);
max-inline-size: var(--mass-fliesstext);
}
.suche__treffer-pfad {
font-size: var(--t-body-s);
color: var(--gruen-900);
margin: 0;
}
.suche__leer {
background: var(--gruen-100);
padding: var(--s-8);
max-inline-size: 34em;
}
.suche__leer h3 { margin: 0 0 var(--s-4); color: var(--gruen-900); }
.suche__leer p { margin: 0 0 var(--s-4); font-size: var(--t-body-m); }
.suche__leer ul { list-style: none; margin: 0; padding: 0; }
.suche__leer a { color: var(--gruen-900); text-decoration: underline; }
.suche__blaettern { margin-block-start: var(--s-8); }
.suche__blaettern ul { display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.suche__blaettern a,
.suche__blaettern span {
display: inline-flex;
min-inline-size: 44px;
min-block-size: 44px;
align-items: center;
justify-content: center;
color: var(--gruen-900);
}
.suche__blaettern span[aria-current] { font-weight: var(--w-bold); }
/* ---- Sektions-Rhythmus ---------------------------------------------------
Zwei Sektionen mit derselben Flächenfarbe lesen sich als ein Band. Zwei
volle Innenabstände (oben + unten) reißen es auseinander, deshalb trägt
dort nur die obere Sektion den Abstand. Unterschiedliche Farben behalten
den vollen Abstand — dort markiert er den Farbwechsel. */
.sektion--weiss + .sektion--weiss,
.sektion--hell + .sektion--hell,
.sektion--hell-kalt + .sektion--hell-kalt,
.sektion--gruen + .sektion--gruen {
padding-block-start: 0;
}
/* Letztes Element ohne eigene Flächen-Sektion (z. B. Inhalt-Spalten, Lead):
Abstand zum Footer, sonst stößt der Text direkt an die grüne Fläche. */
main > :last-child:not(.sektion, .statement, .hero) {
margin-block-end: var(--sektion-pad-block);
}
/* Dasselbe nach oben: folgt so ein Element auf eine Sektion, gilt der
Sektionsabstand. Sein eigener, kleinerer Elementabstand ist für den Abstand
innerhalb einer Sektion gedacht und ließe es oben enger sitzen als unten. */
main > :is(.sektion, .statement, .hero) + :not(.sektion, .statement, .hero) {
margin-block-start: var(--sektion-pad-block);
}
/* Umgekehrt: die Statement-Fläche bringt ohne Freisteller keinen eigenen
Außenabstand mehr mit. Folgt sie auf ein Element ohne Flächen-Sektion,
stünde sie sonst direkt am Text. */
main > :not(.sektion, .statement, .hero) + .statement:not(:has(.statement__freisteller)) {
margin-block-start: var(--sektion-pad-block);
}
/* ---- Abstand zwischen Inhaltselementen innerhalb eines Containers -------
Die Container-Spalten stapeln ihre Kinder ohne eigenen Abstand; dadurch
klebte eine Überschrift direkt am Absatz davor. */
.zweispalter__spalte > * + *,
.kontakt__text > * + *,
.aktuelles__text > * + * {
margin-block-start: var(--s-7);
}
/* ---- Bild-Element: volle Breite ------------------------------------------
Grundfall (rahmen--auto) füllt die Inhaltsbreite. "Volle Fensterbreite"
(layout = 2) sprengt zusätzlich den Seitenrand. */
.bildsektion .rahmen--auto + .rahmen--auto { margin-block-start: var(--s-4); }
.rahmen--vollbreit {
inline-size: 100vw;
max-inline-size: 100vw;
margin-inline: calc(50% - 50vw);
}
/* ---- Rechtstexte (Impressum, Datenschutzerklärung) -------------------------
kapitel-block--rechtstext: Datenschutz-Element und Textelement mit
Darstellung "Rechtstext". Schmale Lesespalte statt fast voller Breite,
gegliederte Zwischenüberschriften aus dem RTE bzw. von decareto. Der
decareto-Text steckt in #dcrt_dps_content, daher greifen die Abstände
auch für verschachtelte Absätze (nicht nur "> p + p"). */
.kapitel-block--rechtstext .kapitel-block__copy {
max-inline-size: 75ch;
}
.kapitel-block--rechtstext .kapitel-block__copy :is(p, ul, ol) + :is(p, ul, ol) {
margin-block-start: 0.75em;
}
.kapitel-block--rechtstext .kapitel-block__copy :is(h2, h3) {
font-family: var(--font-body);
font-weight: var(--w-bold);
color: var(--c-text-auf-weiss);
text-wrap: balance;
hyphens: none;
}
.kapitel-block--rechtstext .kapitel-block__copy h2 {
font-size: var(--t-jobs-block);
line-height: var(--lh-h2);
margin-block: var(--s-9) var(--s-4);
}
.kapitel-block--rechtstext .kapitel-block__copy h3 {
font-size: var(--t-body-l);
line-height: var(--lh-h3);
margin-block: var(--s-7) var(--s-2);
}
/* Erste Überschrift direkt unter dem Seitentitel: kein zusätzlicher Abstand. */
.kapitel-block--rechtstext .kapitel-block__copy > :first-child,
.kapitel-block--rechtstext .kapitel-block__copy > :first-child > :first-child {
margin-block-start: 0;
}
.kapitel-block--rechtstext .kapitel-block__copy a {
overflow-wrap: anywhere;
}
@media (min-width: 900px) {
.kapitel-block--rechtstext .kapitel-block__copy h2 { font-family: var(--font-display); }
}