/*
* Clicdesign Theme
*
* CD-09 Alle Designwerte stammen aus theme.json. Die --cd-* Tokens sind
* nur lesbare Namen fuer die Presets, die WordPress daraus erzeugt.
* CD-11 Keine Inline-Styles.
* CD-12 Kundenanpassungen gehoeren ins Child-Theme, nicht hierhin.
*
* 1 Tokens
* 2 Grundlagen
* 3 Hilfsklassen und Zugaenglichkeit
* 4 Layout
* 5 Kopf und Navigation
* 6 Fuss
* 7 Freigegebene Core Blocks
* 8 Archive, Teaser, Suche
*/
/* ------------------------------------------------------------------ *
* 1 Tokens
* ------------------------------------------------------------------ */
:root {
/* Schrift. Platzhalter bis Fonts und Palette festgelegt sind. */
/*
* Schriftrolle und Schriftfamilie sind zwei verschiedene Dinge.
*
* In theme.json steht die Familie einmal — "system" mit ihrem Stack.
* Daneben stehen zwei Rollen, "body" und "heading", deren Wert ein
* Verweis auf eine Familie ist:
*
* --wp--preset--font-family--system system-ui, …
* --wp--preset--font-family--body var(--…--system)
* --wp--preset--font-family--heading var(--…--system)
*
* Eine Schriftauswahl im Backend aendert nur, worauf die Rolle
* zeigt. Die Familie selbst wird nirgends ein zweites Mal
* definiert — genau das waere die doppelte Quelle, die es nicht
* geben darf.
*
* Der Fallback bleibt, damit nichts bricht, wenn die Kaskade
* schweigt. Dieselbe Bauweise wie bei den Containerbreiten.
*/
--cd-font-head: var(--wp--preset--font-family--heading, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
--cd-font-text: var(--wp--preset--font-family--body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
/*
* Schrift fuer Zahlen, Zeiten und Labels. Standardmaessig die
* Grundschrift; ein Projekt setzt hier seine schmale oder feste
* Schrift ein. Bis Theme 0.21.0 stand an diesen Stellen
* var(--sm-font-mono) — der Name eines einzigen Kunden im
* Framework (CD-07).
*/
--cd-font-daten: var(--cd-font-text);
/*
* Schrift fuer herausgehobene Aussagen. Standardmaessig die
* Titelschrift; ein Projekt setzt hier seine Slab oder Serif ein.
*/
--cd-font-akzent: var(--cd-font-head);
/*
* Flaeche fuer ein Bild, das noch fehlt. Anthrazit und nicht grau:
* Ein hellgraues Feld sieht aus wie Gestaltung, ein dunkles wie eine
* Leerstelle, die noch jemand fuellen muss.
*/
--cd-color-platzhalter: #3a3a3a;
/*
* Laufband. Alle Stellschrauben stehen hier und nicht im Editor:
* Rhythmus ist ein Designwert (CD-09).
*
* Der Rhythmus entsteht aus dem Slot, nicht aus dem Logo. Jeder
* Eintrag steht in einer gleich breiten, gleich hohen Zelle; das
* Logo wird darin zentriert und in der Hoehe gedeckelt. Die
* Logohoehe ist bewusst kleiner als die Slothoehe: Der Rest ist der
* Luftraum, der ueber dem ganzen Band gleich hoch bleibt.
*
* Slotbreite geteilt durch Logohoehe ergibt das Seitenverhaeltnis,
* bis zu dem ein Logo die volle Hoehe behaelt — hier 200 / 52, also
* knapp 3.8 zu 1. Das deckt Wortmarken und Zeichen ab. Erst noch
* breitere Logos werden flacher, und daran ist ohne Beschnitt
* nichts zu aendern.
*
* Der Abstand ist klein gehalten. Die Luft steht bereits im Slot;
* ein grosser Gap kaeme oben drauf und risse neben schmalen Logos
* genau die Loecher auf, die das Slotsystem vermeiden soll.
*/
--cd-laufband-dauer: 46s;
--cd-laufband-slot-breite: 200px;
--cd-laufband-slot-hoehe: 72px;
--cd-laufband-logo-hoehe: 52px;
--cd-laufband-abstand: var(--cd-space-sm);
/*
* Megamenue. Keine Spaltenzahl darunter, und das ist Absicht: Die
* Spalten kommen aus den Gruppen der zweiten Menueebene, gerechnet
* von auto-fit. Waere die Zahl ein Token, muesste bei jeder
* Menueaenderung das Child angefasst werden.
*
* --cd-mega-spalte-min ist die einzige Stellschraube am Raster und
* damit zugleich die stille Obergrenze: 220px in 1180px ergeben
* hoechstens vier Spalten.
*/
--cd-mega-spalte-min: 220px;
--cd-mega-gap: var(--cd-space-md);
/*
* Luft ueber und unter den Spalten. Knapper als ein voller
* md-Abstand: Das Panel haengt an der Menuezeile und braucht keinen
* Auftakt wie ein Seitenabschnitt — es soll gelesen und wieder
* geschlossen werden.
*/
--cd-mega-padding: 32px;
--cd-mega-bg: var(--cd-color-bg);
--cd-mega-radius: var(--cd-radius);
/*
* Verweildauer, bevor das Panel beim Ueberfahren aufgeht. Kurz genug,
* dass es sich nicht traege anfuehlt, lang genug, dass eine Maus auf
* dem Weg zum naechsten Menuepunkt nichts ausloest.
*/
--cd-mega-verzug: 200ms;
/* Abstaende - Spiegel der spacingSizes aus theme.json */
--cd-space-xs: var(--wp--preset--spacing--xs, 12px);
--cd-space-sm: var(--wp--preset--spacing--sm, 24px);
--cd-space-md: var(--wp--preset--spacing--md, 48px);
--cd-space-lg: var(--wp--preset--spacing--lg, 80px);
--cd-space-xl: var(--wp--preset--spacing--xl, 128px);
/* Farben - Spiegel der palette aus theme.json */
--cd-color-primary: var(--wp--preset--color--primary, #1a1a1a);
--cd-color-secondary: var(--wp--preset--color--secondary, #6b6b6b);
--cd-color-text: var(--wp--preset--color--text, #1a1a1a);
--cd-color-text-muted: var(--wp--preset--color--text-muted, #6b6b6b);
--cd-color-bg: var(--wp--preset--color--background, #fff);
--cd-color-surface: var(--wp--preset--color--surface, #f4f4f2);
--cd-color-inverse: var(--wp--preset--color--inverse, #1a1a1a);
--cd-color-border: var(--wp--preset--color--border, #e0e0dd);
/* Typografie */
--cd-text: var(--wp--preset--font-size--medium, clamp(17px, 1.2vw, 20px));
--cd-lead: var(--wp--preset--font-size--large, clamp(20px, 1.6vw, 26px));
--cd-small: var(--wp--preset--font-size--small, clamp(15px, 1vw, 16px));
/* Layout */
/*
* Die Breiten kommen aus theme.json und stehen nicht mehr hier.
*
* Bis Theme 0.34.0 standen sie zweimal: layout.contentSize in der
* theme.json und derselbe Wert hier als Zahl. Wer den einen aenderte,
* bekam den anderen nicht mit — der Block Editor rechnete mit 1180
* und die Seite auch, aber aus zwei Quellen. Eine Oberflaeche
* darueber haette angezeigt, was sie aendert, und die Seite haette
* sich nicht bewegt.
*
* WordPress gibt beide Werte von sich aus als Variablen aus, auch im
* klassischen Theme. Der Fallback greift nur, wenn theme.json fehlt.
*/
--cd-container: var(--wp--style--global--content-size, 1180px);
--cd-container-wide: var(--wp--style--global--wide-size, 1400px);
--cd-measure: 68ch;
/* Kopfzeile */
--cd-header-height: 80px;
/*
* Hoehe des Logos. Als eigener Wert, weil sie sich pro Kunde
* unterscheidet: Ein breites Wortmarken-Logo braucht weniger Hoehe
* als ein kompaktes Zeichen, um gleich praesent zu wirken.
*/
--cd-logo-height: 48px;
/* Bewegung */
--cd-transition: 200ms ease;
}
/* ------------------------------------------------------------------ *
* 2 Grundlagen
* ------------------------------------------------------------------ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--cd-header-height) + var(--cd-space-sm));
}
body {
margin: 0;
font-family: var(--cd-font-text);
font-size: var(--cd-text);
line-height: 1.6;
color: var(--cd-color-text);
background-color: var(--cd-color-bg);
-webkit-font-smoothing: antialiased;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--cd-font-head);
font-weight: 600;
line-height: 1.1;
text-wrap: balance;
margin-block: 0 var(--cd-space-sm);
}
p {
margin-block: 0 var(--cd-space-sm);
}
:where(p, li) {
text-wrap: pretty;
}
a {
color: currentColor;
}
/* CD-19: Fokus muss immer sichtbar sein. */
:focus-visible {
outline: 2px solid var(--cd-color-primary);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ------------------------------------------------------------------ *
* 3 Hilfsklassen und Zugaenglichkeit
* ------------------------------------------------------------------ */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.cd-skip-link:focus {
position: fixed !important;
top: var(--cd-space-xs);
left: var(--cd-space-xs);
z-index: 999;
width: auto;
height: auto;
padding: var(--cd-space-xs) var(--cd-space-sm);
clip-path: none;
color: var(--cd-color-bg);
background: var(--cd-color-primary);
text-decoration: none;
}
/* ------------------------------------------------------------------ *
* 4 Layout
* ------------------------------------------------------------------ */
.cd-container {
width: 100%;
max-width: var(--cd-container);
margin-inline: auto;
padding-inline: var(--cd-space-sm);
}
.cd-main {
display: block;
min-height: 40vh;
}
/*
* Inhaltslayout.
*
* In einem klassischen Theme erzeugt WordPress um the_content() keinen
* Layout-Container. Die Breitenbegrenzung machen wir deshalb selbst -
* das ist die Entsprechung zu layout.contentSize aus theme.json.
*
* Seiten beginnen bewusst buendig unter dem Kopf: Sections bringen ihre
* eigene vertikale Luft mit.
*/
.cd-page__content > *,
.cd-single__content > * {
max-width: var(--cd-container);
margin-inline: auto;
padding-inline: var(--cd-space-sm);
}
.cd-page__content > .alignwide,
.cd-single__content > .alignwide {
max-width: var(--cd-container-wide);
}
.cd-page__content > .alignfull,
.cd-single__content > .alignfull {
max-width: none;
padding-inline: 0;
}
/*
* Fliesstext im Beitrag bekommt eine lesbare Zeilenlaenge.
* Muss nach der Regel oben stehen, sonst gewinnt die Containerbreite.
*/
.cd-single__content > :where(p, ul, ol, h2, h3, h4, blockquote) {
max-width: var(--cd-measure);
}
/* ------------------------------------------------------------------ *
* 5 Kopf und Navigation
* ------------------------------------------------------------------ */
.cd-header {
/*
* Klebrig statt fest: So bleibt der Kopf im Fluss und die Seite
* springt beim Ein- und Ausblenden nicht. Der Versatz beruecksichtigt
* die Adminleiste, sonst schiebt sie sich beim Anmelden darueber.
*/
position: sticky;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 100;
border-bottom: 1px solid var(--cd-color-border);
background: var(--cd-color-bg);
}
.cd-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-space-sm);
max-width: var(--cd-container);
min-height: var(--cd-header-height);
margin-inline: auto;
padding-inline: var(--cd-space-sm);
}
.cd-header__title {
margin: 0;
font-family: var(--cd-font-head);
font-size: 1.25rem;
font-weight: 600;
}
.cd-header__title a {
text-decoration: none;
}
/*
* Feste Hoehe statt Hoechsthoehe, und die Breitenbegrenzung aufgehoben.
*
* Eine SVG bringt keine Pixelmasse mit, und WordPress schreibt deshalb
* weder width noch height ins Markup. Zusammen mit "max-width: 100%"
* aus den Grundlagen fiel das Logo damit auf null zusammen: Der Kopf
* ist ein Flex-Container, das Branding darin hat keine eigene Breite,
* und 100 % von nichts ist nichts.
*
* Mit einer festen Hoehe rechnet der Browser die Breite aus dem
* Seitenverhaeltnis der viewBox — genau dafuer ist sie da.
*/
.cd-header__branding {
flex: none;
}
.cd-header__branding img,
.cd-header__branding .custom-logo {
height: var(--cd-logo-height);
width: auto;
max-width: none;
}
/* Burger */
.cd-header__burger {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: inherit;
}
.cd-header__burger-box {
position: relative;
display: block;
width: 24px;
height: 2px;
}
.cd-header__burger-line,
.cd-header__burger-line::before,
.cd-header__burger-line::after {
position: absolute;
left: 0;
width: 24px;
height: 2px;
background: currentColor;
transition: transform var(--cd-transition), opacity var(--cd-transition);
}
.cd-header__burger-line {
top: 0;
}
.cd-header__burger-line::before,
.cd-header__burger-line::after {
content: "";
}
.cd-header__burger-line::before {
top: -7px;
}
.cd-header__burger-line::after {
top: 7px;
}
.cd-header__burger[aria-expanded="true"] .cd-header__burger-line {
background: transparent;
}
.cd-header__burger[aria-expanded="true"] .cd-header__burger-line::before {
top: 0;
transform: rotate(45deg);
}
.cd-header__burger[aria-expanded="true"] .cd-header__burger-line::after {
top: 0;
transform: rotate(-45deg);
}
/* Navigation - Listen */
.cd-nav__list,
.cd-nav__submenu {
margin: 0;
padding: 0;
list-style: none;
}
.cd-nav a {
display: block;
text-decoration: none;
padding-block: var(--cd-space-xs);
font-size: var(--cd-small);
font-weight: 500;
}
/*
* Die oberste Ebene traegt die Hauptwege der Website und darf das
* zeigen. Das Untermenue bleibt eine Stufe darunter — dort steht die
* Auswahl innerhalb eines Wegs, nicht der Weg selbst.
*/
.cd-nav__list > li > a,
.cd-nav__list > li > .cd-nav__toggle {
font-size: 18px;
font-weight: 700;
}
.cd-nav__submenu a {
font-size: 15px;
}
/*
* Die aktive Seite traegt die Zeitmarke, nicht eine Unterstreichung.
* Damit gilt dasselbe Zeichen fuer "hier stehst du" wie fuer "das ist
* das Wichtige" im Inhalt — ein Element, eine Bedeutung.
*/
.cd-nav a[aria-current] {
position: relative;
}
.cd-nav a[aria-current]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: calc(var(--cd-space-xs) - 6px);
height: 2px;
background: var(--cd-color-primary);
}
/*
* Im Untermenue steht der Marker links neben dem Wort, nicht darunter.
* Ein Eintrag im Klappmenue ist ein Block ueber die ganze Breite; eine
* Linie unter ihm liest sich als Trennstrich zwischen zwei Eintraegen
* oder als Abschluss des Menues — nicht als "hier stehst du".
*/
.cd-nav__submenu a[aria-current]::after {
left: calc(var(--cd-space-sm) * -1);
right: auto;
bottom: auto;
top: 50%;
width: 16px;
transform: translateY(-50%);
}
.cd-nav__toggle {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.cd-nav__chevron {
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--cd-transition);
}
.cd-nav__toggle[aria-expanded="true"] .cd-nav__chevron {
transform: translateY(2px) rotate(-135deg);
}
/*
* Der Umbruchpunkt steht bewusst hart im Stylesheet:
* CSS-Variablen funktionieren in Media Queries nicht.
*/
/* Mobile: Panel */
@media (max-width: 899px) {
.cd-nav {
position: fixed;
inset: var(--cd-header-height) 0 0 0;
display: none;
padding: var(--cd-space-md) var(--cd-space-sm);
overflow-y: auto;
background: var(--cd-color-bg);
}
.cd-nav.is-open {
display: block;
}
.cd-nav__list > li {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
border-bottom: 1px solid var(--cd-color-border);
}
.cd-nav__list > li > a {
font-family: var(--cd-font-head);
font-size: var(--cd-lead);
padding-block: var(--cd-space-sm);
}
.cd-nav__submenu {
display: none;
grid-column: 1 / -1;
padding-bottom: var(--cd-space-sm);
padding-left: var(--cd-space-sm);
}
.cd-nav__submenu.is-open {
display: block;
}
body.cd-nav-open {
overflow: hidden;
}
}
/* Desktop: Zeile mit Dropdown */
@media (min-width: 900px) {
.cd-header__burger {
display: none;
}
.cd-nav__list {
display: flex;
align-items: center;
gap: var(--cd-space-sm);
}
.cd-nav__list > li {
position: relative;
display: flex;
align-items: center;
}
.cd-nav__submenu {
position: absolute;
top: 100%;
left: calc(var(--cd-space-xs) * -1);
z-index: 10;
display: none;
min-width: max-content;
padding: var(--cd-space-xs) 0;
border: 1px solid var(--cd-color-border);
background: var(--cd-color-bg);
box-shadow: 0 12px 32px rgb(22 24 28 / 8%);
}
/*
* Auf dem Desktop oeffnet das Untermenue beim Ueberfahren. Der
* Umschalter bleibt trotzdem bestehen — er ist der Weg fuer Tastatur
* und Touch, wo es kein Hover gibt (CD-19).
*/
.cd-nav__list > li:hover > .cd-nav__submenu:not(.cd-nav__submenu--mega),
.cd-nav__list > li:focus-within > .cd-nav__submenu:not(.cd-nav__submenu--mega),
.cd-nav__submenu.is-open:not(.cd-nav__submenu--mega) {
display: block;
}
/*
* Das Megamenue oeffnet ausschliesslich per Klick. Ein Panel ueber
* die halbe Seite, das beim Zielen aufgeht, ist ein Aergernis — und
* auf einem Touchgeraet gibt es kein Hover, an dem man es wieder
* loswuerde. Der :not() oben nimmt es aus der Hover-Regel heraus;
* gewoehnliche Dropdowns verhalten sich unveraendert.
*/
/*
* Zwischen Menuepunkt und Untermenue darf keine Luecke entstehen,
* sonst schliesst es beim Hinunterfahren mit der Maus.
*/
.cd-nav__list > li::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: var(--cd-space-xs);
}
/*
* Der Megamenue-Punkt wird static, damit sich das Panel am
* Kopfcontainer ausrichtet statt am schmalen Menuepunkt.
*
* Seine Bruecke haengt deshalb nicht hier, sondern am Panel selbst
* (::before, weiter unten): Ein absolut positioniertes ::after an
* einem statischen Element wuerde sich am Kopfcontainer ausrichten
* und nicht am Menuepunkt.
*/
.cd-nav__list > li.cd-mega {
position: static;
}
.cd-nav__list > li.cd-mega::after {
content: none;
}
.cd-nav__submenu a {
padding: 9px var(--cd-space-sm);
white-space: nowrap;
}
.cd-nav__submenu a:hover {
background: var(--cd-color-surface, #f4f4f2);
text-decoration: none;
}
.cd-nav__toggle {
width: 28px;
height: 28px;
}
}
/* ------------------------------------------------------------------ *
* 5b Megamenue
*
* Ein Hauptpunkt mit der Klasse cd-mega bekommt statt des Dropdowns ein
* Panel ueber die Kopfbreite. Der Inhalt kommt vollstaendig aus dem
* WordPress-Menue: zweite Ebene sind die Spalten, dritte die Links.
*
* DIE SPALTENZAHL STEHT NIRGENDS
*
* auto-fit legt so viele Spuren an, wie hineinpassen, und laesst die
* leeren zusammenfallen. Drei Gruppen ergeben drei Spalten, sechs
* ergeben vier und zwei in einer zweiten Zeile. Damit folgt das Raster
* dem Menue, und niemand muss ein Child anfassen, wenn eine Gruppe
* dazukommt.
* ------------------------------------------------------------------ */
.cd-nav__submenu--mega {
gap: var(--cd-mega-gap);
}
/*
* min-width: 0 ist der entscheidende Teil. Ein Rasterelement ist von
* sich aus so breit wie sein laengstes unteilbares Wort; ohne diese
* Zeile drueckt ein langer Gruppentitel seine Spalte ueber die
* Mindestbreite hinaus und das Panel laeuft seitlich aus dem Bild.
*/
.cd-mega__gruppe {
min-width: 0;
}
.cd-mega__titel {
display: block;
margin-bottom: var(--cd-space-xs);
font-family: var(--cd-font-head);
font-size: var(--cd-small);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--cd-color-text-muted);
}
a.cd-mega__titel:hover,
a.cd-mega__titel:focus-visible {
color: var(--cd-color-text);
}
.cd-mega__liste {
list-style: none;
margin: 0;
padding: 0;
}
.cd-mega__text {
display: block;
color: var(--cd-color-text-muted);
font-size: var(--cd-small);
}
/*
* Lange Woerter brechen, statt die Spalte zu sprengen. Betrifft
* ausschliesslich das Megamenue — im Dropdown bleibt nowrap richtig,
* dort bestimmt der laengste Eintrag die Breite.
*/
.cd-nav__submenu--mega a,
.cd-nav__submenu--mega .cd-mega__titel,
.cd-nav__submenu--mega .cd-mega__text {
white-space: normal;
overflow-wrap: anywhere;
}
/* Mobil: kein Raster. Dieselbe Hierarchie als verschachtelte Liste. */
@media (max-width: 899px) {
.cd-nav__submenu--mega {
display: none;
grid-column: 1 / -1;
}
.cd-nav__submenu--mega.is-open {
display: block;
}
.cd-mega__gruppe + .cd-mega__gruppe {
margin-top: var(--cd-space-sm);
}
.cd-mega__liste {
padding-left: var(--cd-space-sm);
}
}
@media (min-width: 900px) {
/*
* Ohne JavaScript steht das Panel im Fluss und offen — untereinander
* statt uebereinander, damit sich mehrere Megamenues nicht
* verdecken. Erst .cd-nav-js macht daraus ein Panel, das sich oeffnen
* und schliessen laesst (CD-29).
*
* .cd-nav-js und nicht .cd-js: Die zweite Klasse gehoert dem
* Auftaucheffekt und verschwindet planmaessig auf jeder Seite, die
* nichts zu zeigen hat. Ein Megamenue daran zu haengen hiesse, es
* dort aufzuklappen.
*/
.cd-nav__submenu--mega {
position: static;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--cd-mega-spalte-min), 1fr));
/*
* Der Kopf ist sticky und damit selbst ein Bezugspunkt: Ein
* absolut gesetztes Panel mit left/right 0 spannt ueber das
* ganze Fenster, nicht ueber den Inhaltscontainer. Deshalb hier
* dieselbe Breite wie der Kopfinhalt, mittig gesetzt — sonst
* stuenden die Spalten weiter aussen als alles andere auf der
* Seite.
*/
width: auto;
max-width: var(--cd-container);
min-width: 0;
margin-inline: auto;
padding: var(--cd-mega-padding) var(--cd-space-sm);
box-shadow: none;
}
/*
* Die Gruppentitel fluchten unten, nicht oben.
*
* "Fuer Mitarbeitende & Arbeitgeber" braucht zwei Zeilen, die
* anderen drei Titel eine. Ohne Zutun beginnen alle oben auf
* gleicher Hoehe, und der zweizeilige schiebt seine ganze Spalte
* nach unten — Beschreibung und Links stehen dann eine Zeile tiefer
* als nebenan. Das liest sich wie ein Versehen.
*
* Mit subgrid teilen sich alle Gruppen dieselben drei Zeilen des
* Panels: Titel, Beschreibung, Links. Die Titelzeile ist so hoch wie
* der laengste Titel, und align-self: end setzt die kurzen an deren
* Unterkante. Der zweizeiler waechst damit nach oben; alles
* darunter beginnt in jeder Spalte auf derselben Linie.
*
* In @supports, weil die Regeln ohne subgrid zusammen keinen Sinn
* ergeben: grid-row: span 3 ohne geteilte Zeilen wuerde das Raster
* zerlegen. Wo subgrid fehlt, bleibt es beim bisherigen Verhalten.
*/
@supports (grid-template-rows: subgrid) {
.cd-nav__submenu--mega {
grid-template-rows: auto auto 1fr;
/*
* Der gap des Panels war bisher rein waagerecht wirksam —
* es gab nur eine Zeile. Mit drei Zeilen wuerde er auch
* senkrecht greifen und Titel, Beschreibung und Links um
* einen ganzen Abschnittsabstand auseinanderziehen.
* Die senkrechten Abstaende macht weiterhin der Rand am
* Titel.
*/
row-gap: 0;
}
.cd-nav__submenu--mega .cd-mega__gruppe {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
.cd-nav__submenu--mega .cd-mega__titel {
align-self: end;
}
}
.cd-nav-js .cd-nav__submenu--mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 10;
display: none;
border-radius: var(--cd-mega-radius);
background: var(--cd-mega-bg);
box-shadow: 0 12px 32px rgb(22 24 28 / 8%);
}
.cd-nav-js .cd-nav__submenu--mega.is-open {
display: grid;
}
/*
* Das Megamenue oeffnet auch beim Ueberfahren — aber erst nach einer
* Verweildauer.
*
* Bis 0.39.0 oeffnete es ausschliesslich per Klick, mit gutem Grund:
* Ein Panel ueber die halbe Seite, das beim Zielen aufgeht, ist ein
* Aergernis. Am ersten Projekt mit Megamenue zeigte sich der Preis
* dafuer: Daneben oeffnet ein gewoehnliches Dropdown beim Hover, und
* wer beides in einer Zeile hat, findet das Panel nicht — es sieht
* aus wie ein Menuepunkt, der nicht reagiert.
*
* Die Verzoegerung loest beides. Wer vorbeifaehrt, loest nichts aus;
* wer stehenbleibt, bekommt das Panel. Der Umschalter bleibt und ist
* weiterhin der Weg fuer Tastatur (CD-19).
*
* Nur fuer echte Zeigergeraete: Auf einem Touchscreen gibt es kein
* Hover, an dem man das Panel wieder loswuerde. Dort bleibt es beim
* Klick, unveraendert.
*
* display bleibt grid und wird nicht geschaltet — auf display gibt es
* keine Verzoegerung. visibility nimmt das Panel aus dem
* Accessibility-Tree und der Tabfolge, solange es zu ist; opacity
* blendet es weich ein.
*/
@media (hover: hover) and (pointer: fine) {
.cd-nav-js .cd-nav__submenu--mega {
display: grid;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease 0s, visibility 0s linear 120ms;
}
/*
* Nur :hover, ausdruecklich kein :focus-within. Der Klick auf den
* Umschalter setzt den Fokus auf den Umschalter — mit
* :focus-within haette derselbe Klick das Panel gleich wieder
* geoeffnet, und es liesse sich nicht mehr schliessen. Die
* Tastatur laeuft ueber den Umschalter und die Klasse is-open,
* so wie bei den gewoehnlichen Dropdowns auch (CD-19).
*/
.cd-nav-js .cd-nav__list > li.cd-mega:hover > .cd-nav__submenu--mega {
visibility: visible;
opacity: 1;
pointer-events: auto;
transition: opacity 120ms ease var(--cd-mega-verzug), visibility 0s linear var(--cd-mega-verzug);
}
/* Der Klick oeffnet ohne Verzoegerung — die Absicht steht fest. */
.cd-nav-js .cd-nav__submenu--mega.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transition-delay: 0s;
}
/*
* Die Bruecke ueber die Luecke zwischen Menuezeile und Panel.
* Gewoehnliche Dropdowns haben sie am Listenpunkt; ein
* Megamenue-Punkt ist static, damit sich das Panel am
* Kopfcontainer ausrichtet, also haengt sie hier am Panel.
* Ohne sie schliesst das Panel, sobald die Maus die Luecke quert.
*/
.cd-nav-js .cd-nav__submenu--mega::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
right: 0;
/*
* Etwas hoeher als der Abstand darueber. Gemessen lagen
* zwischen Menuepunkt und Panel 14px, die Bruecke war 12px
* hoch — in den zwei Pixeln dazwischen fiel das Panel zu.
* Die Reserve laesst sie leicht unter den Menuepunkt
* reichen; dort steht kein Text, und der Link bleibt
* anklickbar.
*/
height: calc(var(--cd-space-xs) + 4px);
}
}
@media (prefers-reduced-motion: reduce) {
.cd-nav-js .cd-nav__submenu--mega {
transition-duration: 0s;
}
}
/*
* Ohne Skript stehen die Panels im Fluss. In einer Flex-Zeile
* stuenden sie nebeneinander und schoeben die Navigation aus dem
* Bild — deshalb bekommt ein Megamenue-Punkt dann eine eigene Zeile.
* Untereinander, vollstaendig lesbar, ohne seitlichen Ueberlauf.
*/
html:not(.cd-nav-js) .cd-nav__list {
flex-wrap: wrap;
}
html:not(.cd-nav-js) .cd-nav__list > li.cd-mega {
flex: 1 0 100%;
}
.cd-nav__submenu--mega a {
padding: 5px 0;
}
.cd-nav__submenu--mega a:hover {
background: none;
text-decoration: underline;
}
}
/* ------------------------------------------------------------------ *
* 6 Fuss
* ------------------------------------------------------------------ */
/*
* Der Fuss steht auf dunklem Grund. Die Seite laeuft sonst durchgehend
* hell; ohne Farbwechsel endet sie nicht, sie hoert nur auf. Die Farben
* kommen aus denselben Tokens wie ein dunkler Abschnitt — wer den Fuss
* hell will, tauscht sie hier und nirgends sonst.
*/
.cd-footer {
--cd-color-text: #fff;
--cd-color-text-muted: rgba(255, 255, 255, .66);
--cd-footer-linie: rgba(255, 255, 255, .16);
margin-top: var(--cd-space-xl);
padding-block: var(--cd-space-lg) var(--cd-space-md);
background: var(--cd-color-inverse, #16181c);
color: var(--cd-color-text);
font-size: var(--cd-small);
}
.cd-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--cd-space-md);
max-width: var(--cd-container);
margin-inline: auto;
padding-inline: var(--cd-space-sm);
}
@media (min-width: 700px) {
.cd-footer__inner {
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--cd-space-sm);
}
}
/*
* Das helle Logo, in derselben Hoehe wie im Kopf. Ohne feste Hoehe zieht
* eine SVG ohne eigene Masse den Kasten auf die Breite der Spalte.
*/
.cd-footer__logo {
display: inline-block;
margin-bottom: var(--cd-space-sm);
}
.cd-footer__logo img {
display: block;
height: 38px;
width: auto;
max-width: none;
}
.cd-footer__name {
margin: 0 0 var(--cd-space-sm);
font-family: var(--cd-font-head);
font-size: var(--cd-lead);
}
.cd-footer__adresse {
margin: 0;
line-height: 1.7;
color: var(--cd-color-text-muted);
}
.cd-footer__label {
margin: 0 0 12px;
color: rgba(255, 255, 255, .55);
}
/*
* Tag und Zeit als Beschreibungsliste: Das ist der Zusammenhang, den
* ein Vorleseprogramm braucht — "Montag bis Freitag" gehoert zu
* "07:30-12:00" und nicht daneben (CD-19).
*/
.cd-footer__zeiten {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px var(--cd-space-xs);
margin: 0;
}
.cd-footer__zeiten dt {
color: var(--cd-color-text-muted);
white-space: nowrap;
}
.cd-footer__zeiten dd {
margin: 0;
font-variant-numeric: tabular-nums;
}
/*
* Die Nummer ist der wahrscheinlichste naechste Schritt und darf
* entsprechend gross stehen. Auf dem Handy ist sie ein Anruf, am
* Schreibtisch eine Angabe, die man abschreibt — beides braucht Groesse.
*/
.cd-footer__telefon {
display: block;
font-family: var(--cd-font-head);
font-size: clamp(20px, 1.8vw, 24px);
letter-spacing: -.01em;
text-decoration: none;
color: var(--cd-color-text);
}
.cd-footer__telefon:hover {
color: var(--cd-color-primary);
}
.cd-footer__mail {
display: inline-block;
margin-top: 8px;
color: var(--cd-color-text-muted);
text-decoration: none;
word-break: break-word;
}
.cd-footer__mail:hover {
color: var(--cd-color-text);
text-decoration: underline;
text-underline-offset: 3px;
}
.cd-footer__liste {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.cd-footer__liste a {
color: var(--cd-color-text-muted);
text-decoration: none;
}
.cd-footer__liste a:hover {
color: var(--cd-color-text);
}
/*
* Die Schlusszeile ruecken wir mit einer Linie ab, nicht mit Abstand
* allein: Copyright und Rechtliches sind eine andere Ebene als die
* Angaben darueber.
*/
.cd-footer__schluss {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cd-space-xs);
max-width: var(--cd-container);
margin: var(--cd-space-md) auto 0;
padding-inline: var(--cd-space-sm);
padding-top: var(--cd-space-sm);
border-top: 1px solid var(--cd-footer-linie);
}
.cd-footer__copyright {
margin: 0;
color: var(--cd-color-text-muted);
}
.cd-footer__nav-list {
display: flex;
flex-wrap: wrap;
gap: var(--cd-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.cd-footer__nav-list a {
color: var(--cd-color-text-muted);
text-decoration: none;
}
.cd-footer__nav-list a:hover {
color: var(--cd-color-text);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ------------------------------------------------------------------ *
* 7 Freigegebene Core Blocks
*
* 'wp-block-styles' ist bewusst nicht aktiviert. Was hier nicht
* gestaltet ist, ist auch nicht freigegeben.
* ------------------------------------------------------------------ */
.wp-block-button__link {
display: inline-block;
/*
* Textschrift, nicht Displayschrift: Ein Knopf ist Bedienung, kein
* Titel. In der Displayschrift wirkt er wie eine kleine Ueberschrift,
* die man nicht anklicken kann.
*/
font-family: var(--cd-knopf-schrift);
font-weight: var(--cd-knopf-gewicht);
line-height: var(--cd-knopf-zeile);
text-decoration: none;
transition: opacity var(--cd-transition);
}
.wp-block-button__link:hover {
opacity: 0.85;
}
/*
* Sekundaer: Kontur statt Flaeche. Der Stil von Core heisst weiterhin
* is-style-outline und wird nicht entfernt — bestehende Knoepfe auf
* Kundenseiten tragen ihn im gespeicherten Inhalt (CD-05).
*/
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-cd-sekundaer .wp-block-button__link {
border: var(--cd-knopf-rahmen) solid currentColor;
color: var(--cd-knopf-grund);
background: transparent;
}
.wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--cd-space-xs);
}
.wp-block-image figcaption,
.wp-block-gallery figcaption {
margin-top: var(--cd-space-xs);
font-size: var(--cd-small);
color: var(--cd-color-text-muted);
}
.wp-block-quote {
margin-inline: 0;
padding-left: var(--cd-space-sm);
border-left: 2px solid var(--cd-color-border);
font-size: var(--cd-lead);
}
.wp-block-quote cite {
display: block;
margin-top: var(--cd-space-xs);
font-size: var(--cd-small);
font-style: normal;
color: var(--cd-color-text-muted);
}
.wp-block-separator {
height: 0;
margin-block: var(--cd-space-md);
border: 0;
border-top: 1px solid var(--cd-color-border);
}
.wp-block-columns {
gap: var(--cd-space-md);
}
/* ------------------------------------------------------------------ *
* 8 Archive, Teaser, Suche
* ------------------------------------------------------------------ */
.cd-archive,
.cd-single,
.cd-error {
padding-block: var(--cd-space-lg);
}
.cd-archive__header,
.cd-single__header {
margin-bottom: var(--cd-space-lg);
}
/*
* Titel und Autorzeile stehen in derselben Spalte wie der Fliesstext.
* Vorher lief der Titel ueber die ganze Containerbreite und begann
* damit weiter links als der Text, den er ueberschreibt — zwei Fluchten
* auf einer Seite, ohne dass eine davon etwas gliedert.
*/
.cd-single__header {
max-width: var(--cd-measure);
margin-inline: auto;
}
/*
* Der Beitragstitel darf gross auftreten. Eine eigene Groesse und nicht
* die h1 aus theme.json: Ein Seitentitel steht neben Navigation und
* Seitenkopf und muss sich einordnen, die Ueberschrift eines Berichts
* hat die Seite fuer sich.
*/
.cd-single__title {
font-size: clamp(34px, 5.5vw, 80px);
letter-spacing: -.015em;
}
.cd-archive__list {
display: grid;
gap: var(--cd-space-md);
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.cd-teaser__media img {
width: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}
.cd-teaser__title {
margin-block: var(--cd-space-xs) var(--cd-space-xs);
font-size: var(--cd-lead);
}
.cd-teaser__title a {
text-decoration: none;
}
.cd-teaser__title a:hover {
text-decoration: underline;
}
.cd-entry__date,
.cd-entry__author {
font-size: var(--cd-small);
color: var(--cd-color-text-muted);
}
.cd-entry__date {
display: block;
}
/*
* Im Einzelbeitrag stehen Autor und Datum auf einer Zeile, getrennt durch
* einen Punkt. Der Trenner kommt aus dem CSS und nicht aus dem Markup:
* Fehlt der Autor, faellt er mit weg, ohne dass ein einzelner Punkt
* stehenbleibt.
*/
.cd-single__header .cd-entry__author + .cd-entry__date {
display: inline;
}
/*
* Das Zeichen direkt und nicht als \00b7: Ein Hex-Escape wird in CSS durch
* ein Leerzeichen beendet, und dieses Leerzeichen gehoert dann nicht mehr
* zum Inhalt. Der Trenner klebte dadurch am Datum.
*/
.cd-single__header .cd-entry__author + .cd-entry__date::before {
content: " · ";
}
.cd-single__image {
margin: var(--cd-space-md) 0;
}
.cd-search {
display: flex;
flex-wrap: wrap;
gap: var(--cd-space-xs);
margin-top: var(--cd-space-sm);
}
.cd-search__field {
flex: 1 1 220px;
padding: 12px var(--cd-space-xs);
border: 1px solid var(--cd-color-border);
font: inherit;
color: inherit;
background: var(--cd-color-bg);
}
.cd-search__submit {
padding: 12px var(--cd-space-sm);
border: 0;
font-family: var(--cd-font-head);
color: var(--cd-color-bg);
background: var(--cd-color-primary);
cursor: pointer;
}
.wp-block-post-navigation-link,
.wp-pagenavi,
.navigation.pagination {
margin-top: var(--cd-space-lg);
}
.navigation.pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: var(--cd-space-xs);
}
.navigation.pagination .page-numbers {
display: grid;
place-items: center;
min-width: 44px;
min-height: 44px;
padding-inline: var(--cd-space-xs);
border: 1px solid var(--cd-color-border);
text-decoration: none;
}
.navigation.pagination .page-numbers.current {
color: var(--cd-color-bg);
background: var(--cd-color-primary);
border-color: var(--cd-color-primary);
}
/* ------------------------------------------------------------------ *
* 9 Pattern-Klassen
*
* Die Patterns bestehen aus Core Blocks. Ihr Aussehen steht hier —
* damit bleibt es zentral aenderbar, auch wenn das Markup nach dem
* Einfuegen eingefroren ist (CD-03).
* ------------------------------------------------------------------ */
.cd-eyebrow {
font-family: var(--cd-font-daten);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cd-color-text-muted);
margin-bottom: var(--cd-space-xs);
}
.cd-lead {
color: var(--cd-color-text-muted);
max-width: 56ch;
}
.cd-statement {
font-family: var(--cd-font-akzent);
font-weight: 500;
line-height: 1.4;
}
/* Seitenkopf */
.cd-seitenkopf {
padding-block: var(--cd-space-lg) var(--cd-space-md);
}
.cd-seitenkopf h1 {
max-width: 18ch;
}
/* Text und Bild */
.cd-textbild {
gap: var(--cd-space-lg);
align-items: start;
}
.cd-textbild img {
width: 100%;
object-fit: cover;
}
/*
* Die Ueberschrift folgt hier der Spalte, nicht dem Fenster.
*
* Die Skala steht als clamp(min, 5vw, max) in theme.json. Das vw darin
* misst das Browserfenster — richtig fuer einen Abschnitt ueber die
* volle Breite, falsch in diesem Baustein: Der Text steht in einer
* 42-Prozent-Spalte. Bei ATO waren das gemessene 442px Platz fuer eine
* Zeile, die mit 72px gesetzt wurde. "Vertrauenssache" fuellte eine
* ganze Zeile, die Ueberschrift wurde dreizeilig, und der Trennstrich
* musste retten, was die Groesse verursacht hatte.
*
* cqi misst die Spalte statt das Fenster. Der eingestellte H2-Wert
* bleibt die Obergrenze — die Ueberschrift wird dadurch nie groesser
* als das Projekt vorgibt, nur kleiner, wenn die Spalte es verlangt.
* Ein Projekt, das seine Skala unter Design -> Typografie einstellt,
* behaelt sie.
*
* Am ATO-Layout gefunden und im Browser gemessen, 08.09.2026.
*
* DER MINDESTWERT DARF DIE OBERGRENZE NICHT UEBERHOLEN
*
* Als clamp(28px, 9cqi, var(...)) geschrieben stimmte die Zusage nicht:
* clamp gewichtet den Mindestwert hoeher als den Hoechstwert. Wo das
* Projekt eine kleinere H2 vorgibt als 28px, gewann der Mindestwert des
* Themes. Auf garagesteiner.ch am 09.09.2026 gemessen: 26px bei jeder
* gewoehnlichen H2, 28px in diesem Baustein — genau die zwei Pixel, die
* hier niemand haben wollte.
*
* Deshalb erst der Boden, dann die Deckelung: min() zuletzt, damit die
* Vorgabe des Projekts unter allen Umstaenden das letzte Wort hat.
*/
.cd-textbild > .wp-block-column {
container-type: inline-size;
}
.cd-textbild h2 {
font-size: min( var(--wp--custom--h-2), max( 28px, 9cqi ) );
line-height: 1.15;
}
/* Aufforderungsband */
/*
* Ein farbiges Band ist eine Flaeche, keine Zeile. Der Text braucht
* ringsum Abstand zur Kante, nicht nur oben und unten — sonst klebt er
* links an der Farbe und die Flaeche wirkt wie ein Versehen.
*/
.cd-band {
padding: var(--cd-space-md);
border-block: 1px solid var(--cd-color-border);
}
@media (max-width: 640px) {
.cd-band {
padding: var(--cd-space-sm);
}
}
/* Linienliste: Aufzaehlung ohne Punkte, mit rotem Strich und Trennlinien */
.wp-block-list.is-style-cd-linien {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--cd-color-border);
}
/*
* Der Strich sitzt absolut, der Text fliesst normal.
*
* Vorher war der Listenpunkt ein Grid mit zwei Spalten. Damit wurde
* jedes Kind zu einer eigenen Zelle — ein "Begriff —
* Erklaerung" zerfiel in zwei Zellen und landete auf zwei Zeilen, die
* zweite davon rechtsbuendig. Auf der Jobs-Seite stand deshalb jeder
* Begriff allein am rechten Rand.
*
* Im normalen Fluss bleibt ausgezeichneter Text da, wo er hingehoert.
*/
.wp-block-list.is-style-cd-linien > li {
position: relative;
padding-block: 14px;
padding-left: calc(16px + var(--cd-space-sm));
border-bottom: 1px solid var(--cd-color-border);
}
/*
* Die unterste Linie faellt weg. Eine Trennlinie trennt zwei Dinge —
* unter dem letzten Eintrag steht nichts mehr, was zu trennen waere.
* Dort schliesst sie nicht ab, sie haengt.
*/
.wp-block-list.is-style-cd-linien > li:last-child {
border-bottom: 0;
}
.wp-block-list.is-style-cd-linien > li::before {
content: "";
position: absolute;
left: 0;
top: calc(14px + 0.7em);
width: 16px;
height: 1px;
background: var(--cd-color-primary);
}
/*
* Abstand nach oben, sobald etwas davor steht.
*
* Die Liste setzt ihre eigenen Aussenabstaende auf null, damit die Linien
* buendig sitzen; WordPress ergaenzt bei randlosen Geschwistern keinen.
* Vorher galt die Ausnahme nur nach einer Ueberschrift — nach einem
* Absatz klebte die erste Zeile weiterhin am Text darueber, und genau so
* steht es auf Jobs, MFK und den Fahrzeugen.
*/
.wp-block-list.is-style-cd-linien:not(:first-child) {
margin-top: var(--cd-space-sm);
}
/* Vier Gruende */
.cd-gruende .wp-block-columns {
gap: var(--cd-space-md);
margin-top: var(--cd-space-md);
}
.cd-gruende .wp-block-column {
border-top: 1px solid var(--cd-color-border);
padding-top: var(--cd-space-sm);
}
.cd-gruende h3 {
font-size: clamp(20px, 2vw, 24px);
margin-bottom: var(--cd-space-xs);
}
/*
* Hero.
*
* Die Position des Inhalts kommt aus diesem Stylesheet, nicht aus dem
* Block-Attribut contentPosition. Grund: Sobald ein Cover eine eigene
* Inhaltsposition traegt, setzt WordPress dem inneren Container
* width:auto und margin:0 mit hoeherer Spezifitaet — der Inhalt klebt
* dann an der Bildkante statt auf der Containerkante zu sitzen.
*/
.cd-hero {
display: flex;
align-items: flex-end;
padding-block: var(--cd-space-md);
}
.cd-hero > .wp-block-cover__inner-container {
width: 100%;
max-width: var(--cd-container);
margin-inline: auto;
padding-inline: var(--cd-space-sm);
}
.cd-hero .cd-eyebrow,
.cd-hero .cd-lead,
.cd-hero .cd-statement,
.cd-hero h1 {
color: #fff;
}
.cd-hero .cd-eyebrow,
.cd-hero .cd-lead {
color: rgba(255, 255, 255, .82);
}
.cd-hero h1 {
margin-bottom: var(--cd-space-xs);
}
.cd-hero .wp-block-buttons {
margin-top: var(--cd-space-sm);
}
/*
* Der sekundaere Knopf im Hero traegt Weiss.
*
* Kontur und Text stehen sonst in der Primaerfarbe, gewaehlt fuer helle
* Flaechen. Im Hero liegen sie ueber einem abgedunkelten Foto, dessen
* Helligkeit von Bild zu Bild und Stelle zu Stelle wechselt.
*
* Gemessen am ATO-Hero: Das Bild steht hinter den Knoepfen auf
* rgb(246,246,246), mit dem Overlay ergibt das ein mittleres Grau.
* Rot kommt darauf auf 1.83:1, ein aufgehelltes Rot sogar nur auf
* 1.17:1 — und mehr Overlay hilft nicht, weil es jeden Grund auf
* dieselbe Helligkeit zieht: Selbst bei 85 Prozent bleibt Rot unter
* 2.5:1. Weiss dagegen gewinnt mit jedem Prozent Overlay dazu und
* erreicht bei 70 Prozent 5.21:1.
*
* Deshalb hier Weiss statt der Token-Umdefinition, die der dunkle
* Abschnitt bekommt: Dort ist der Grund ein bekannter Ton, hier ein
* Foto. Wie stark das Overlay sein muss, bleibt eine Entscheidung pro
* Bild und steht im Cover-Block der Seite.
*/
.cd-hero .wp-block-button.is-style-outline .wp-block-button__link,
.cd-hero .wp-block-button.is-style-cd-sekundaer .wp-block-button__link {
color: #fff;
}
/* Abschnitte der Patterns bekommen vertikale Luft. */
.cd-abschnitt,
.cd-textbild,
.cd-gruende,
.cd-linienliste {
margin-block: var(--cd-space-lg);
}
.cd-band {
margin-block: var(--cd-space-lg);
}
/*
* Der Hero traegt die groesste Schriftstufe des Systems — nicht dieselbe
* wie ein Seitentitel. theme.json kennt nur eine h1-Groesse, deshalb hier.
*/
.cd-hero h1 {
font-size: clamp(38px, 6.4vw, 72px);
line-height: 1.02;
max-width: 16ch;
}
.cd-hero .cd-statement {
font-family: var(--cd-font-akzent);
font-weight: 500;
font-size: clamp(18px, 1.9vw, 24px);
margin-block: var(--cd-space-sm) var(--cd-space-xs);
}
.cd-hero .cd-lead {
max-width: 46ch;
}
/*
* Das Constrained-Layout von WordPress zentriert jedes Element, dessen
* max-width schmaler ist als der Container — und zwar mit !important:
*
* .is-layout-constrained > :where(:not(.alignleft)...) {
* margin-left: auto !important; margin-right: auto !important;
* }
*
* Fuer eine Lead-Zeile unter einer linksbuendigen Ueberschrift ist das
* falsch. Gegen ein !important hilft nur ein !important — die Alternative
* waere, jedes Pattern um eine zusaetzliche Gruppe zu erweitern, nur damit
* das Layout nicht zentriert. Das waere mehr Markup fuer denselben Zweck.
*
* Betrifft nur Elemente, die wir selbst positionieren. Alles andere
* zentriert WordPress weiterhin.
*/
.cd-hero > .wp-block-cover__inner-container > *,
.cd-seitenkopf > *,
.cd-abschnitt > *,
.cd-dunkel > *,
.cd-band > *,
.cd-lead,
.cd-statement {
margin-left: 0 !important;
margin-right: 0 !important;
}
/*
* Dunkler Abschnitt.
*
* Setzt sich vom Rest ab, deshalb randlos und mit mehr vertikaler Luft.
* Die Farben kommen aus theme.json (inverse/background), nicht von hier —
* damit funktioniert derselbe Abschnitt auf jeder Kundensite mit deren
* Palette.
*/
.cd-dunkel {
padding-block: var(--cd-space-lg);
margin-block: var(--cd-space-lg);
}
/*
* Farbtokens im dunklen Abschnitt.
*
* Blocks sind fuer hellen Grund gestaltet: gedaempftes Grau fuer
* Nebentexte, Primaerrot fuer Hervorhebungen. Auf dunklem Grund ergibt
* das Kontraste um 2:1, waehrend WCAG AA 4.5:1 fuer Fliesstext und 3:1
* fuer Bedienelemente verlangt (CD-19). Gemessen auf garagesteiner.ch:
* Text des Rennstands 2.13, Knopf mit Umriss 2.79.
*
* Statt einzelne Blocks nachzubessern werden die Tokens hier umdefiniert.
* Jeder Block, der sie nutzt, passt sich damit von selbst an — auch
* jeder, den es noch nicht gibt.
*
* Das Primaerrot wird aufgehellt statt durch einen zweiten festen Rotton
* ersetzt: So bleibt es die Farbe der jeweiligen Kundenpalette (CD-09).
* Bezug auf die Preset-Variable und nicht auf --cd-color-primary, weil
* eine Variable, die sich selbst verwendet, in CSS ungueltig ist.
*
* Der Hero gehoert ausdruecklich NICHT hierher, obwohl er dunkel wirkt.
* Sein Grund ist ein abgedunkeltes Foto und kein definierter Ton: Am
* ATO-Hero steht das Bild hinter den Knoepfen auf rgb(246,246,246),
* mit 60 Prozent Overlay ergibt das ein mittleres Grau. Ein
* aufgehelltes Rot kaeme dort auf 1.17:1 und waere schlechter als das
* ungemischte, das 1.83:1 erreicht. Gegen ein Grau hilft kein Rotton,
* weil das Overlay jeden Grund auf dieselbe Helligkeit zieht — auch bei
* 85 Prozent bleibt Rot unter 2.5:1. Der Hero wird deshalb weiter unten
* eigens behandelt. Im Browser gemessen, 08.09.2026.
*/
.cd-dunkel {
--cd-color-text: #fff;
--cd-color-text-muted: rgba(255, 255, 255, .72);
--cd-color-primary: color-mix(in srgb, var(--wp--preset--color--primary, #c8102e) 60%, #fff);
}
.cd-dunkel .cd-eyebrow {
color: rgba(255, 255, 255, .6);
}
.cd-dunkel h2 {
max-width: 20ch;
}
.cd-dunkel__raster {
margin-top: var(--cd-space-md);
gap: var(--cd-space-lg);
}
.cd-dunkel__raster img {
width: 100%;
object-fit: cover;
}
.cd-dunkel .wp-block-buttons {
margin-top: var(--cd-space-md);
}
/* ------------------------------------------------------------------ *
* 10 Breitenvariante
*
* Nicht jeder Abschnitt braucht die volle Containerbreite. Eine schmalere
* Spalte bringt Rhythmus in die Seite — breit, schmal, breit — und kuerzt
* lange Linien in Listen, die dem Auge sonst nichts bieten.
*
* Als Block Style umgesetzt, nicht als Sonderfall im Kundentheme (CD-08).
* ------------------------------------------------------------------ */
:root {
--cd-container-schmal: 900px;
}
.is-style-cd-schmal:not(.cd-flaeche),
.cd-page__content > .is-style-cd-schmal:not(.cd-flaeche),
.cd-single__content > .is-style-cd-schmal:not(.cd-flaeche) {
max-width: var(--cd-container-schmal);
margin-inline: auto;
}
/*
* Die Kinder einer schmalen Gruppe muessen mit: Das Constrained-Layout von
* WordPress setzt ihnen sonst weiter die volle Containerbreite.
*/
.is-style-cd-schmal > * {
max-width: 100% !important;
}
/* ------------------------------------------------------------------ *
* 11 Brotkrumen
*
* Die Daten liefert clicdesign-core, die Darstellung steht hier. Zurueck-
* haltend gesetzt: Der Pfad ist Orientierung, nicht Inhalt.
* ------------------------------------------------------------------ */
.cd-brotkrumen {
padding-block: var(--cd-space-sm) 0;
font-size: var(--cd-small);
}
.cd-brotkrumen ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
color: var(--cd-color-text-muted);
}
/*
* Jede Stufe ist selbst ein Flexkasten. Nur so sitzen Haus, Trenner und
* Text auf einer Mittellinie: Als Inline-Inhalt richtet sich eine
* Zeichnung an der Schriftgrundlinie aus und steht damit um die
* Unterlaengen zu hoch — beim Haus waren es drei Pixel.
*/
.cd-brotkrumen li {
display: flex;
align-items: center;
}
/*
* Der Trenner traegt dieselbe Farbe wie die Stufen davor und danach.
* Vorher stand er in der Rahmenfarbe und damit deutlich blasser als der
* Text — das las sich wie ein Fehler und nicht wie eine Gliederung.
*/
.cd-brotkrumen li + li::before {
content: "\203A";
margin-right: 8px;
font-size: 1.25em;
line-height: 1;
color: inherit;
}
.cd-brotkrumen a {
text-decoration: none;
color: inherit;
}
/*
* Das Haus sitzt auf der Schriftlinie der uebrigen Stufen. Ein Inline-SVG
* haengt sonst an der Grundlinie und steht tiefer als der Text daneben.
*/
.cd-brotkrumen__start {
display: inline-flex;
align-items: center;
}
.cd-brotkrumen__start .cd-icon {
display: block;
width: 17px;
height: 17px;
}
/*
* Das Haus ist die einzige Stufe ohne Text. Damit sie beim Ueberfahren
* antwortet, wechselt hier die Farbe statt der Unterstreichung — eine
* Linie unter einer Zeichnung sieht wie ein Fehler aus.
*/
.cd-brotkrumen__start:hover {
color: var(--cd-color-primary);
text-decoration: none;
}
/*
* Beim Ueberfahren wechselt die Stufe in die Akzentfarbe. Die
* Unterstreichung bleibt daneben stehen: Farbe allein ist fuer
* Farbfehlsichtige kein Hinweis darauf, dass hier etwas anklickbar ist.
*/
.cd-brotkrumen a:hover {
color: var(--cd-color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.cd-brotkrumen [aria-current] {
color: var(--cd-color-text);
}
/* Die Startseite und der Seitenkopf folgen direkt darunter. */
.cd-brotkrumen + .cd-page .cd-seitenkopf,
.cd-brotkrumen + article .cd-seitenkopf {
padding-top: var(--cd-space-md);
}
/* ------------------------------------------------------------------ *
* 12 Verhalten beim Scrollen
* ------------------------------------------------------------------ */
/*
* Der Kopf weicht beim Hinunterscrollen und kommt beim Hochscrollen
* zurueck — auch mitten in der Seite. Wer nach oben scrollt, sucht
* meistens die Navigation.
*/
.cd-header {
transition: transform 240ms ease;
will-change: transform;
}
.cd-header--weg {
transform: translateY(-100%);
}
/*
* Der Kopf bekommt den Fokus nur programmgesteuert nach dem Sprung nach
* oben. Ein Rahmen um den ganzen Kopf waere hier kein Hinweis, sondern
* ein Schreck.
*/
.cd-header:focus {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.cd-header {
transition: none;
}
}
/* Zurueck nach oben */
.cd-hoch {
position: fixed;
right: var(--cd-space-sm);
bottom: var(--cd-space-sm);
z-index: 65;
display: grid;
place-items: center;
width: 48px;
height: 48px;
background: var(--cd-color-bg);
border: 1px solid var(--cd-color-border);
color: var(--cd-color-text);
text-decoration: none;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.cd-hoch--sichtbar {
opacity: 1;
visibility: visible;
transform: none;
}
.cd-hoch:hover {
background: var(--cd-color-text);
border-color: var(--cd-color-text);
color: var(--cd-color-bg);
}
.cd-hoch__pfeil {
width: 10px;
height: 10px;
border-top: 2px solid currentColor;
border-left: 2px solid currentColor;
transform: translateY(2px) rotate(45deg);
}
/* Ueber dem mobilen Schnellzugriff, nicht darunter. */
@media (max-width: 1023px) {
.cd-hoch {
bottom: calc(56px + var(--cd-space-xs));
}
}
@media (prefers-reduced-motion: reduce) {
.cd-hoch {
transition: opacity 200ms ease, visibility 200ms;
transform: none;
}
}
/* ------------------------------------------------------------------ *
* 13 Ausklappbare Bereiche
*
* Dieselbe Gestaltung fuer haeufige Fragen (.cd-faq) und fuer lange
* Listen, die niemand am Stueck lesen will (.cd-ausklapp). Der Inhalt
* steht in beiden Faellen vollstaendig im Quelltext — er ist nur
* zugeklappt, nicht nachgeladen.
* ------------------------------------------------------------------ */
/*
* Aufgebaut auf core/details. Ohne JavaScript: Auf- und Zuklappen,
* Tastaturbedienung und die Ansage fuer Screenreader kommen vom
* Browser (CD-01, CD-18, CD-19).
*/
/*
* Kein Aussenabstand zwischen den Eintraegen.
*
* WordPress setzt zwischen Bloecken eines Flow-Layouts einen Abstand.
* Zusammen mit der Linie oben schwebte diese dann in der Mitte zwischen
* zwei Fragen und gehoerte optisch zu keiner. Ohne Abstand sitzen die
* Eintraege aneinander, und jede Linie gehoert zur Frage darunter — so
* liest sich die Liste als eine Sache statt als sieben.
*/
/*
* Der Abstand steht an genau einer Stelle: an der Zeile mit der Frage.
* Vorher hatte der Rahmen ein Polster und die Zeile darin noch eines —
* zusammen 40 Pixel um eine einzige Textzeile, was jeden Eintrag auf
* ueber hundert Pixel Hoehe brachte. Bei sieben Fragen untereinander
* ist das eine Bildschirmhoehe fuer nichts.
*/
.cd-faq .wp-block-details ,
.cd-ausklapp .wp-block-details {
border-top: 1px solid var(--cd-color-border);
padding-block: 0;
margin-block: 0;
}
/*
* Auch hier keine Linie unter dem letzten Eintrag — aus demselben
* Grund: Die Linie oben trennt jeden Eintrag vom vorherigen, unter dem
* letzten gibt es nichts zu trennen.
*/
/*
* Der erste Eintrag braucht Luft zur Ueberschrift. Ohne Aussenabstand
* zwischen den Eintraegen (siehe oben) faellt sonst auch der Abstand nach
* oben weg, und "Haeufige Fragen." klebt auf der ersten Frage.
*/
.cd-faq .wp-block-details:first-of-type ,
.cd-ausklapp .wp-block-details:first-of-type {
margin-top: var(--cd-space-sm);
}
/*
* Mittig, nicht auf der Grundlinie: Das Zeichen rechts ist ein Symbol,
* keine Schrift — auf der Grundlinie einer Textzeile sitzt es zu tief.
*/
.cd-faq summary ,
.cd-ausklapp summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-space-sm);
padding-block: 14px;
font-family: var(--cd-font-head, inherit);
font-weight: 700;
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.3;
cursor: pointer;
list-style: none;
}
/* Das voreingestellte Dreieck weg — wir zeichnen einen eigenen Pfeil. */
.cd-faq summary::-webkit-details-marker ,
.cd-ausklapp summary::-webkit-details-marker {
display: none;
}
.cd-faq summary::after ,
.cd-ausklapp summary::after {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
margin-top: 4px;
border-right: 2px solid var(--cd-color-text-muted);
border-bottom: 2px solid var(--cd-color-text-muted);
transform: rotate(45deg);
transition: transform 150ms ease;
}
.cd-faq details[open] summary::after ,
.cd-ausklapp details[open] summary::after {
transform: rotate(-135deg);
}
.cd-faq summary:hover ,
.cd-ausklapp summary:hover {
color: var(--cd-color-primary);
}
.cd-faq summary:focus-visible ,
.cd-ausklapp summary:focus-visible {
outline: 2px solid var(--cd-color-primary);
outline-offset: 4px;
}
.cd-faq .wp-block-details > :not(summary) ,
.cd-ausklapp .wp-block-details > :not(summary) {
margin-block: 0 14px;
max-width: 60ch;
color: var(--cd-color-text-muted);
}
@media (prefers-reduced-motion: reduce) {
.cd-faq summary::after {
transition: none;
}
}
/* ------------------------------------------------------------------ *
* 14 Neueste Berichte
*
* Hier stand eine eigene Gestaltung fuer core/latest-posts. Sie hat nie
* gegriffen: Die Selektoren erwarteten die Klasse cd-berichte an einem
* Element ueber der Liste, WordPress setzt sie aber an die Liste selbst.
* Auf garagesteiner.ch standen die Beitraege deshalb untereinander statt
* dreispaltig.
*
* Statt den Selektor zu reparieren ist die Gestaltung ganz entfallen.
* Beitraege in Rasterform kann der Block clicdesign/beitragsliste bereits
* — mit Bild, Titel, Datum und Anriss, in einer Darstellung, die auf
* jeder Seite dieselbe ist. Zwei Gestaltungen fuer dieselbe Sache waeren
* zwei Stellen, die auseinanderlaufen (CD-04).
* ------------------------------------------------------------------ */
/*
* Randlose Abschnitte: Innenabstand am Container.
*
* Dieselbe Ursache wie beim Hero (Theme 0.1.5): WordPress zentriert den
* Inhalt eines alignfull-Containers nicht, weil
* useRootPaddingAwareAlignments im klassischen Theme bewusst aus ist. Beim
* Hero half ein innerer Container. Hier geht das nicht — die Kinder eines
* cd-dunkel stehen absichtlich linksbuendig (margin-left: 0 !important
* weiter oben), also bleibt nur der Innenabstand am Container selbst.
*
* Der Wert bringt den Text in dieselbe senkrechte Flucht wie Hero und
* Bandabschnitte: erst auf Containerbreite einruecken, dann derselbe
* Innenabstand wie ueberall. Ist das Fenster schmaler als der Container,
* bleibt nur der Innenabstand.
*
* Ohne diese Regel begann der Text eines dunklen Abschnitts bei x=0 —
* auf garagesteiner.ch auf Startseite und Teamseite sichtbar.
*/
.cd-dunkel.alignfull,
.cd-band.alignfull {
padding-inline: calc(max(0px, (100% - var(--cd-container)) / 2) + var(--cd-space-sm));
}
/* ------------------------------------------------------------------ *
* 16 Auftauchen
*
* Abschnitte beginnen leicht unterhalb ihrer Position und blenden ein —
* beim Laden der Seite genauso wie beim Weiterscrollen. Einmal je
* Element, nicht bei jedem Vorbeiscrollen.
*
* Die Werte sind bewusst zurueckhaltend: 28 Pixel Weg, 700 Millisekunden,
* ein Easing, das schnell startet und weich ausklingt. Eine groessere
* Bewegung oder eine laengere Dauer wirkt sofort nach gekauftem Template
* und stellt sich vor den Inhalt.
*
* Warum die Liste hier steht und nicht nur im Skript: Wuerde erst das
* Skript die Elemente verstecken, waere der Inhalt einen Moment lang
* sichtbar, verschwaende und kaeme wieder — ein Flackern bei jedem
* Seitenaufruf. Deshalb versteckt das CSS, bevor das erste Mal gezeichnet
* wird, und das Skript blendet nur noch ein.
*
* Die Liste ist damit an zwei Stellen: hier und in oberflaeche.js. Wer
* eine aendert, aendert beide.
*
* Alles haengt an .cd-js, einer Klasse, die nur mit JavaScript gesetzt
* wird. Ohne JavaScript bleibt jeder Abschnitt sichtbar — eine Seite, die
* ohne Skript leer ist, waere ein weit groesserer Fehler als eine ohne
* Effekt.
*
* .cd-erscheint ist der Haken fuer alles ausserhalb des Frameworks: Ein
* Block aus einem Projekt-Plugin traegt diese Klasse auf seinem Wrapper
* und taucht mit auf, ohne dass sein Name hier stehen muss (CD-25).
*
* Die Liste steht in :where(), damit sie keine Spezifitaet beisteuert.
* Ohne das schlaegt eine Regel wie ".cd-js .cd-fakten > .cd-fakt" mit
* ihren drei Klassen die Zeile, die wieder einblendet — die Klasse wird
* gesetzt, und es passiert nichts. Genau so stand die Startseite am
* 03.09.2026 leer da, obwohl das Skript sauber lief.
* ------------------------------------------------------------------ */
/*
* "screen and no-preference": Versteckt wird nur, wo der Effekt auch
* erwuenscht ist.
*
* screen schliesst den Druck aus. Der Browser setzt die Seiten in einem
* Zug, ohne zu scrollen; was der Beobachter nicht erreicht haette, waere
* auf dem Papier eine leere Flaeche.
*
* no-preference schliesst aus, wer Bewegung abbestellt hat. Bis Theme
* 0.28.0 wurde auch dort versteckt und nur die Dauer auf eine
* Millisekunde gesetzt — der Inhalt blieb damit trotzdem unsichtbar,
* bis der Beobachter ihn erreichte. Wer keine Bewegung will, will
* nicht schneller aufblenden, sondern gar nicht.
*/
@media screen and (prefers-reduced-motion: no-preference) {
.cd-js :where(
.cd-seitenkopf,
.cd-hero > .wp-block-cover__inner-container,
.cd-abschnitt,
.cd-dunkel,
.cd-band,
.cd-textbild,
.cd-gruende,
.cd-faq,
.cd-ausklapp,
.cd-kontakt,
.cd-anfrage,
.cd-erscheint,
.cd-single__image,
.cd-single__content > figure,
.cd-single__content > .wp-block-gallery,
.cd-leistungen > .cd-leistung,
.cd-sammlung > .cd-sammlung__element,
.cd-liste__eintraege > .cd-liste__eintrag,
.cd-crew > .wp-block-column,
.cd-bildpaar > figure
) {
opacity: 0;
transform: translateY( var( --cd-auftauchen-weg ) );
transition:
opacity var( --cd-auftauchen-dauer ) cubic-bezier(.22, 1, .36, 1),
transform var( --cd-auftauchen-dauer ) cubic-bezier(.22, 1, .36, 1);
}
/*
* Flaechen fahren mit, werden dabei aber nicht durchsichtig.
*
* Eine Flaeche, die von null auf eins einblendet, zeigt unterwegs den
* Grund unter sich — bei Grau auf Weiss wird sie hell und blitzt. Dazu
* kommt der Versatz: Zwei Abschnitte erreichen ihren Platz nie
* gleichzeitig, der obere steht schon, waehrend der untere noch seine
* 32 Pixel unterwegs ist, und dazwischen klafft die Luecke.
*
* Also beides trennen. Die Flaeche bewegt sich deckend, ein Streifen
* ihrer eigenen Farbe fuellt die Luecke waehrend der Fahrt, und
* eingeblendet wird nur ihr Inhalt. Die Bewegung bleibt damit die des
* ganzen Balkens — nicht die von zwei Textzeilen in einem Kasten, der
* schon dasteht.
*/
.cd-js :where(.cd-seitenkopf, .cd-flaeche, .cd-band, .cd-dunkel, .has-background) {
position: relative;
opacity: 1;
}
/*
* Der Inhalt blendet ein und haengt dafuer an der Klasse der Flaeche —
* kein zweiter Beobachter noetig, und beides laeuft zwangslaeufig
* synchron.
*/
.cd-js :where(.cd-seitenkopf, .cd-flaeche, .cd-band, .cd-dunkel, .has-background)
> :where(:not(.cd-seitenkopf__bild)) {
opacity: 0;
transition: opacity var( --cd-auftauchen-dauer ) cubic-bezier(.22, 1, .36, 1);
}
.cd-js :where(.cd-seitenkopf, .cd-flaeche, .cd-band, .cd-dunkel, .has-background).cd-auftauchen
> :where(:not(.cd-seitenkopf__bild)) {
opacity: 1;
}
/*
* Der Streifen ueber der Flaeche fuellt die Luecke waehrend der Fahrt
* und liegt am Ziel unsichtbar auf dem Nachbarn, weil beide dieselbe
* Farbe tragen. Nur zwischen gleichfarbigen Nachbarn: Ueber einem
* andersfarbigen Abschnitt waere er die ganze Bewegung lang zu sehen.
*/
.cd-js :where(
.cd-flaeche + .cd-flaeche,
.cd-band + .cd-band,
.cd-dunkel + .cd-dunkel,
.has-surface-background-color + .has-surface-background-color,
.has-inverse-background-color + .has-inverse-background-color
)::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc( var( --cd-auftauchen-weg ) * -1 );
height: var( --cd-auftauchen-weg );
background: inherit;
z-index: -1;
}
.cd-js .cd-auftauchen {
opacity: 1;
transform: none;
}
} /* Ende: nur auf dem Bildschirm und nur mit erwuenschter Bewegung */
/*
* Nebeneinanderliegende Teile kommen leicht versetzt. Der Versatz
* wiederholt sich alle drei Elemente, damit in einem Dreierraster jede
* Zeile gleich laeuft und die letzte nicht sekundenlang wartet.
*
* Die Beitragsliste bringt ihren Versatz selbst mit: Sie wechselt je nach
* Breite zwischen einer, zwei und drei Spalten, und ein Rhythmus, der
* nicht zur Spaltenzahl passt, laesst die zweite Zeile rueckwaerts
* laufen. Raster und Rhythmus gehoeren deshalb in dieselbe Datei.
*/
.cd-js .cd-leistungen > .cd-leistung:nth-child(3n + 2),
.cd-js .cd-crew > .wp-block-column:nth-child(3n + 2) {
transition-delay: 80ms;
}
/* Das zweite Bild eines Paares folgt dem ersten. */
.cd-js .cd-bildpaar > figure:nth-child(2) {
transition-delay: 120ms;
}
.cd-js .cd-leistungen > .cd-leistung:nth-child(3n + 3),
.cd-js .cd-crew > .wp-block-column:nth-child(3n + 3) {
transition-delay: 160ms;
}
/*
* Der Versatz der Sammlungen richtet sich nach der Spaltenzahl, und die
* wechselt mit der Fensterbreite. Ein fester Dreierrhythmus liesse im
* zweispaltigen Raster die zweite Zeile rueckwaerts laufen — genau das
* ist am 03.09.2026 in der Beitragsliste passiert.
*
* Einspaltig gibt es nichts zu versetzen: Untereinander erscheint
* ohnehin eines nach dem anderen beim Scrollen.
*/
@media (min-width: 700px) {
.cd-js .cd-sammlung[data-spalten] > .cd-sammlung__element:nth-child(2n + 2) {
transition-delay: 80ms;
}
}
@media (min-width: 1000px) {
.cd-js .cd-sammlung[data-spalten="3"] > .cd-sammlung__element:nth-child(3n + 2),
.cd-js .cd-sammlung[data-spalten="4"] > .cd-sammlung__element:nth-child(4n + 2) {
transition-delay: 80ms;
}
.cd-js .cd-sammlung[data-spalten="3"] > .cd-sammlung__element:nth-child(3n + 3),
.cd-js .cd-sammlung[data-spalten="4"] > .cd-sammlung__element:nth-child(4n + 3) {
transition-delay: 160ms;
}
.cd-js .cd-sammlung[data-spalten="4"] > .cd-sammlung__element:nth-child(4n + 4) {
transition-delay: 240ms;
}
/* Im Dreierraster beginnt nach dem dritten wieder Null. */
.cd-js .cd-sammlung[data-spalten="3"] > .cd-sammlung__element:nth-child(3n + 1),
.cd-js .cd-sammlung[data-spalten="4"] > .cd-sammlung__element:nth-child(4n + 1) {
transition-delay: 0ms;
}
}
/*
* Weg und Dauer als Werte, nicht als Zahlen im Regelwerk. Wer Bewegung
* abbestellt hat, bekommt sie damit an einer einzigen Stelle abgestellt —
* ohne die ganze Liste oben ein zweites Mal zu wiederholen und ohne
* !important, das sonst auch jeden anderen Uebergang der Seite treffen
* wuerde.
*
* Eine Millisekunde statt null: Der Uebergang muss stattfinden, damit das
* Ereignis am Ende zuverlaessig kommt — sichtbar ist er dann nicht mehr.
*/
:root {
--cd-auftauchen-weg: 32px;
--cd-auftauchen-dauer: 700ms;
}
/*
* Frueher wurden hier Weg und Dauer auf null gesetzt. Das genuegte
* nicht: Versteckt wurde weiterhin, nur das Aufblenden ging schneller.
* Seit Theme 0.28.0 wird bei reduzierter Bewegung gar nicht mehr
* versteckt — die Bedingung steht oben an der Liste selbst.
*/
@media (prefers-reduced-motion: reduce) {
:root {
--cd-auftauchen-weg: 0px;
--cd-auftauchen-dauer: 1ms;
}
.cd-js .cd-leistungen > .cd-leistung,
.cd-js .cd-crew > .wp-block-column {
transition-delay: 0s;
}
}
/* ------------------------------------------------------------------ *
* 17 Zeitmarke
*
* Ein kurzer Strich in der Akzentfarbe, der vor einem Label steht. Er
* markiert das Wichtige wie ein Zeitnahme-Strich und ist das einzige
* wiederkehrende Zeichen, das die Komponenten miteinander verbindet.
*
* Als ::before am Label und nicht als eigenes Element: Wer ein Label
* setzt, soll den Strich nicht vergessen koennen.
* ------------------------------------------------------------------ */
.cd-marke {
display: flex;
align-items: center;
gap: 10px;
}
.cd-marke::before {
content: "";
flex: none;
width: 24px;
height: 2px;
background: var(--cd-color-primary);
}
/* ------------------------------------------------------------------ *
* 18 Ablauf
*
* Nummerierte Schritte mit Hairline dazwischen. Fuer alles, was
* tatsaechlich eine Reihenfolge hat — eine MFK-Vorbereitung, eine
* Schadenabwicklung. Nicht als Schmuck fuer eine Aufzaehlung: Die Nummer
* behauptet eine Reihenfolge, und diese Behauptung muss stimmen.
* ------------------------------------------------------------------ */
.cd-ablauf {
display: grid;
margin-block: var(--cd-space-md);
}
/*
* Auf schmalen Bildschirmen steht die Nummer ueber dem Titel. Nebeneinander
* bleiben von der Textspalte wenige Zentimeter, und die Nummer rueckt so
* dicht an den Titel, dass beide wie ein Wort gelesen werden.
*/
.cd-ablauf__schritt {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
padding-block: var(--cd-space-sm);
border-top: 1px solid var(--cd-color-border);
align-items: start;
}
@media (min-width: 640px) {
.cd-ablauf__schritt {
grid-template-columns: 62px 1fr;
gap: var(--cd-space-sm);
}
}
.cd-ablauf__schritt:first-child {
border-top: none;
padding-top: 0;
}
.cd-ablauf__nr {
font-family: var(--cd-font-daten);
font-size: var(--cd-small);
letter-spacing: .06em;
color: var(--cd-color-primary);
padding-top: 4px;
font-variant-numeric: tabular-nums;
}
.cd-ablauf__titel {
font-family: var(--cd-font-head);
font-size: clamp(18px, 1.4vw, 21px);
line-height: 1.2;
margin: 0 0 6px;
}
.cd-ablauf__text {
margin: 0;
color: var(--cd-color-text-muted);
max-width: 56ch;
}
/* ------------------------------------------------------------------ *
* 19 Gegenueberstellung
*
* Zwei Spalten, durch eine Hairline getrennt. Fuer Entscheidungen, die
* der Betrieb der Kundschaft ohnehin erklaert — was muss und was warten
* kann. Die linke Spalte traegt die Akzentfarbe an den Strichen, weil
* dort das Dringende steht.
* ------------------------------------------------------------------ */
.cd-gegen {
display: grid;
grid-template-columns: 1fr;
margin-block: var(--cd-space-md);
}
@media (min-width: 700px) {
.cd-gegen {
grid-template-columns: 1fr 1fr;
}
.cd-gegen__spalte + .cd-gegen__spalte {
border-left: 1px solid var(--cd-color-border);
padding-left: var(--cd-space-md);
margin-left: var(--cd-space-md);
}
}
.cd-gegen__spalte + .cd-gegen__spalte {
border-top: 1px solid var(--cd-color-border);
padding-top: var(--cd-space-sm);
margin-top: var(--cd-space-sm);
}
@media (min-width: 700px) {
.cd-gegen__spalte + .cd-gegen__spalte {
border-top: none;
padding-top: 0;
margin-top: 0;
}
}
.cd-gegen__liste {
list-style: none;
margin: var(--cd-space-sm) 0 0;
padding: 0;
}
.cd-gegen__liste li {
position: relative;
padding: 10px 0 10px 24px;
border-top: 1px solid var(--cd-color-border);
color: var(--cd-color-text-muted);
}
.cd-gegen__liste li::before {
content: "";
position: absolute;
left: 0;
top: 20px;
width: 12px;
height: 1px;
background: var(--cd-color-secondary);
}
.cd-gegen__spalte--dringend .cd-gegen__liste li::before {
background: var(--cd-color-primary);
height: 2px;
}
/* ------------------------------------------------------------------ *
* 20 Spezifikationen
*
* Schluessel links, Wert rechts, Hairline dazwischen. Die Werte in
* Tabellenziffern, damit Zahlen untereinander ausgerichtet stehen und
* sich vergleichen lassen — das ist der ganze Zweck einer Datenliste.
* ------------------------------------------------------------------ */
.cd-spec {
margin-block: var(--cd-space-sm);
}
.cd-spec__zeile {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--cd-space-sm);
padding-block: 12px;
border-top: 1px solid var(--cd-color-border);
}
.cd-spec__zeile:first-child {
border-top: none;
}
.cd-spec__k {
font-family: var(--cd-font-daten);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cd-color-text-muted);
}
.cd-spec__v {
font-family: var(--cd-font-daten);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* ------------------------------------------------------------------ *
* 21 Bildpaar
*
* Zwei Bilder nebeneinander, das zweite nach unten versetzt. Der Versatz
* bricht die Linie, auf der sonst jedes Bild einer Seite sitzt, und gibt
* einer Doppelung Rhythmus, ohne dass ein drittes Element noetig waere.
*
* Auf schmalen Bildschirmen stehen sie untereinander und der Versatz
* entfaellt: Dort gibt es keine Linie zu brechen.
* ------------------------------------------------------------------ */
.cd-bildpaar {
display: grid;
grid-template-columns: 1fr;
gap: var(--cd-space-sm);
margin-block: var(--cd-space-md);
}
@media (min-width: 700px) {
.cd-bildpaar {
grid-template-columns: 1fr 1fr;
gap: var(--cd-space-md);
align-items: start;
}
.cd-bildpaar > :nth-child(2) {
margin-top: var(--cd-space-lg);
}
}
.cd-bildpaar figure {
margin: 0;
}
.cd-bildpaar img {
width: 100%;
height: auto;
}
.cd-bildpaar figcaption {
font-family: var(--cd-font-daten);
font-size: 12px;
letter-spacing: .06em;
color: var(--cd-color-text-muted);
margin-top: var(--cd-space-xs);
}
/* ------------------------------------------------------------------ *
* 22 Lightbox
*
* WordPress bringt die Lightbox seit 6.4 selbst mit, in Hell. Ein Foto
* gross anzusehen heisst, alles andere auszublenden — auf einer weissen
* Flaeche bleibt der Raum drumherum praesent und das Bild wird zum
* Ausschnitt. Auf dunklem Grund verschwindet die Seite, und es bleibt
* das Bild.
*
* Nur Farben, keine Struktur: Die Mechanik gehoert WordPress und darf
* sich mit einer Version aendern, ohne dass hier etwas bricht.
* ------------------------------------------------------------------ */
/*
* Hier ist ein !important verdient: WordPress schreibt die
* Hintergrundfarbe des Schleiers direkt ins
* style-Attribut ("background-color: var(--wp--preset--color--background)").
* Ein Inline-Style schlaegt jede Regel im Stylesheet; ohne !important
* bleibt die Lightbox hell, egal was hier steht.
*/
.wp-lightbox-overlay .scrim {
background-color: var(--cd-color-inverse) !important;
opacity: .94;
}
.wp-lightbox-overlay button {
color: var(--cd-color-bg);
background: transparent;
}
.wp-lightbox-overlay button:hover,
.wp-lightbox-overlay button:focus {
background: rgba(255, 255, 255, .12);
}
.wp-lightbox-overlay figcaption {
color: rgba(255, 255, 255, .82);
background: transparent;
font-family: var(--cd-font-daten);
font-size: 12px;
letter-spacing: .06em;
}
/* ------------------------------------------------------------------ *
* 23 Ueberschrift und was ihr folgt
*
* Ein Abschnitt, der mit einer Ueberschrift endet, kuendigt an, was
* danach kommt — er gehoert zum Folgenden, nicht zum Vorangehenden. Mit
* dem vollen Abstand darunter schwebt der Titel allein zwischen zwei
* Bloecken; auf dem Rennkalender lagen 96 Pixel zwischen "Der Kalender."
* und der Tabelle, zu der er gehoert.
* ------------------------------------------------------------------ */
.cd-abschnitt:has(> :last-child:is(h2, h3)) {
margin-bottom: var(--cd-space-sm);
}
/* ------------------------------------------------------------------ *
* 24 Flaeche
*
* Ein Abschnitt, der eine eigene Grundflaeche traegt. Damit bekommt eine
* Seite Rhythmus, ohne dass ein einziger Kasten noetig waere: Der Wechsel
* der Flaeche gliedert, nicht ein Rahmen um jeden Block.
*
* Die Farbe kommt von WordPress (backgroundColor am Block), hier steht
* nur, wie sich eine Flaeche verhaelt: randlos ueber die ganze Breite,
* mit Innenabstand, und ohne den Aussenabstand der uebrigen Abschnitte —
* zwei Flaechen stossen direkt aneinander.
*
* Die Regel dazu steht nicht im CSS, sondern im Kopf: nie zwei gleiche
* Flaechen hintereinander, die dunkle hoechstens einmal pro Seite.
* ------------------------------------------------------------------ */
.cd-flaeche {
padding-block: var(--cd-space-lg);
margin-block: 0;
padding-inline: calc(max(0px, (100% - var(--cd-container)) / 2) + var(--cd-space-sm));
}
/*
* Eine Flaeche geht immer bis an den Rand — sonst ist sie keine Flaeche,
* sondern ein grauer Kasten mitten auf der Seite.
*
* Der schmale Stil begrenzt einen Abschnitt auf 900 Pixel. Das ist
* richtig fuer Text, aber es hat auch die Farbe mitbegrenzt: Die
* Randlosigkeit kam gar nicht zum Tragen. Die Breitenbegrenzung wandert
* deshalb vom Kasten in den Innenabstand — die Flaeche laeuft durch, der
* Text bleibt auf seiner Spalte.
*
* Und zwar auf derselben Spalte wie ueberall: Vorher stand der Text in
* einer Flaeche 24 Pixel weiter links als im Abschnitt darueber, weil
* die Flaeche mit der breiten und der Abschnitt mit der schmalen
* Containerbreite rechnete.
*/
.cd-flaeche.is-style-cd-schmal {
max-width: none;
padding-inline: calc(max(0px, (100% - var(--cd-container-schmal)) / 2) + var(--cd-space-sm));
}
/*
* Der Inhalt einer Flaeche steht linksbuendig wie ueberall, nicht
* zentriert — dieselbe Fluchtlinie wie im uebrigen Text.
*/
.cd-flaeche > * {
margin-left: 0 !important;
margin-right: 0 !important;
}
/*
* Stossen zwei Flaechen aneinander, gehoert der Abstand zwischen sie und
* nicht doppelt. Ohne das entsteht an jeder Kante die doppelte Luft.
*/
.cd-flaeche + .cd-flaeche {
padding-top: 0;
}
@media (max-width: 640px) {
.cd-flaeche {
padding-block: var(--cd-space-md);
}
}
/* ------------------------------------------------------------------ *
* 25 Rundung
*
* Bilder und Knoepfe bekommen einen weichen Radius. Auf Wunsch des
* Kunden vom 04.09.2026 — das Designsystem sieht an dieser Stelle
* rechtwinklige Formen vor, die Entscheidung geht hier bewusst dagegen.
*
* Nicht gerundet werden randlose Flaechen: Hero, dunkle Abschnitte und
* Farbbaender. Eine Flaeche, die bis an den Bildschirmrand laeuft, kann
* dort keine Ecke haben — der Radius wuerde einen Rahmen behaupten, den
* es nicht gibt.
* ------------------------------------------------------------------ */
:root {
/*
* Rundung. Die Vorgabe des Frameworks ist eckig — eine Rundung ist
* eine Gestaltungsentscheidung des einzelnen Projekts und keine des
* Frameworks (CD-07). Bis Theme 0.27.1 standen hier 25 Pixel: die
* Entscheidung eines bestimmten Kunden, die alle anderen geerbt
* haetten.
*
* Ein Projekt setzt seinen Wert in der theme.json des Child-Themes:
*
* "settings": { "custom": { "radius": "12px" } }
*/
--cd-radius: var(--wp--custom--radius, 0px);
/*
* Die Rundung der Knoepfe erbt vom allgemeinen Radius. Wer nichts
* einstellt, bekommt die Rundung der Karten; wer will, stellt Knoepfe
* getrennt ein. Ein eigener Wert ohne Vererbung waere ein zweiter
* Ort, an dem "eckig" entschieden wird.
*/
/*
* radius-knopf, nicht radiusKnopf: WordPress schreibt settings.custom
* in Kebab-Schreibweise aus und setzt dabei auch zwischen Buchstabe
* und Ziffer einen Bindestrich (h1 wird zu h-1). CSS-Variablennamen
* unterscheiden Gross- und Kleinschreibung — der falsche Name fiel
* still auf den Ersatzwert zurueck, und die Knopfrundung tat nie
* etwas. Am 08.09.2026 im Browser gemessen.
*/
--cd-radius-knopf: var(--wp--custom--radius-knopf, var(--cd-radius));
/*
* EIN SATZ WERTE FUER ALLE KNOEPFE
*
* Vorher standen sie an drei Orten: Farbe, Groesse und Innenabstand
* des Blockknopfes in theme.json, Schrift und Rahmen hier, und der
* Absendeknopf des Anfrageformulars hatte einen eigenen Satz — 16/32
* statt 14/28, 15px statt 17px, dunkel statt primaer. Drei Orte, an
* denen "wie sieht ein Knopf aus" beantwortet wurde.
*
* Jetzt einer. Ein Child, das Knoepfe anders will, ueberschreibt
* diese Tokens und trifft damit jeden Knopf der Website.
*/
--cd-knopf-schrift: var(--cd-font-text);
--cd-knopf-groesse: var(--cd-text);
--cd-knopf-gewicht: 500;
--cd-knopf-zeile: 1.2;
--cd-knopf-luft-y: 14px;
--cd-knopf-luft-x: 28px;
--cd-knopf-rahmen: 2px;
--cd-knopf-grund: var(--cd-color-primary);
--cd-knopf-farbe: var(--cd-color-bg);
}
.wp-block-image img,
.cd-bildpaar img,
.cd-liste__bild img,
.cd-single__image img,
.wp-block-post-featured-image img,
.cd-teaser__bild img {
border-radius: var(--cd-radius);
}
.wp-block-button__link,
.cd-anfrage button,
.cd-anfrage input[type="submit"] {
border-radius: var(--cd-radius-knopf);
}
/*
* Die Lightbox zeigt das Bild frei auf dunklem Grund. Dort ist die
* Rundung fehl am Platz: Sie beschneidet das Motiv, das man sich gerade
* genauer ansehen wollte.
*/
.wp-lightbox-overlay img {
border-radius: 0;
}
/* ------------------------------------------------------------------ *
* 26 Nachtrag zur Rundung
* ------------------------------------------------------------------ */
/*
* Beim Ueberfahren vergroessert WordPress das Bild leicht. Es waechst
* dabei ueber seine eigene Rundung hinaus und wirkt wieder eckig. Der
* Ausschnitt gehoert deshalb an den Rahmen, nicht ans Bild: Was
* darueber hinauswaechst, wird abgeschnitten — rund.
*/
.wp-lightbox-container {
border-radius: var(--cd-radius);
overflow: hidden;
}
/*
* Ein Farbband, das nicht bis an den Rand laeuft, ist eine Flaeche mit
* vier Ecken — die duerfen rund sein. Randlose Baender bleiben eckig,
* dort gibt es keine Ecke zu runden.
*/
.cd-band:not(.alignfull) {
border-radius: var(--cd-radius);
border-block: 0;
}
.cd-hoch {
border-radius: var(--cd-radius);
}
/*
* Dasselbe fuer jeden anderen Rahmen, in dem ein Bild wachsen kann.
* Die Regel steht bewusst hier und nicht beim Bild: Wer einen Ausschnitt
* setzt (overflow: hidden), bestimmt die Form — nicht sein Inhalt.
*/
.cd-bildpaar figure,
.wp-block-image.wp-lightbox-container,
.cd-teaser__bild,
.cd-single__image {
border-radius: var(--cd-radius);
overflow: hidden;
}
/* ------------------------------------------------------------------ *
* 27 Karte
*
* Ein Abschnitt, der als eigenstaendiges Objekt gelesen werden soll —
* ein Fahrzeug, ein Angebot. Anders als die Flaeche laeuft eine Karte
* nicht bis an den Rand: Sie hat vier Ecken, steht auf dem Grund der
* Seite und traegt ihren eigenen Abstand nach unten.
*
* Damit heben sich mehrere gleichartige Bloecke voneinander ab, ohne
* dass zwischen ihnen die Farbe wechseln muss. Bei vier Fahrzeugen
* hintereinander waere ein Farbwechsel ohnehin sinnlos — sie sind
* gleichrangig, keines ist wichtiger als das naechste.
* ------------------------------------------------------------------ */
.cd-karte {
background: var(--cd-color-surface);
border-radius: var(--cd-radius);
padding: var(--cd-space-md);
margin-block: var(--cd-space-sm);
}
.cd-karte > * {
margin-left: 0 !important;
margin-right: 0 !important;
}
@media (max-width: 640px) {
.cd-karte {
padding: var(--cd-space-sm);
}
}
/*
* Ein Ausklappbereich innerhalb einer Karte bekommt eine eigene Flaeche.
* Auf demselben Grund wie die Karte ist er nur eine Linie im Text und
* sieht nicht danach aus, dass man ihn anfassen kann.
*
* Ohne Rundung: Gerundet werden Bilder und Knoepfe, sonst nichts.
*
* Und ohne Rahmenlinien. Die Flaeche grenzt bereits ab; eine Linie oben
* und unten wuerde dieselbe Grenze ein zweites Mal ziehen — beim
* geoeffneten Element haengt sie dann unter dem Text, ohne etwas zu
* trennen.
*/
.cd-karte .cd-ausklapp,
.cd-ausklapp.is-style-cd-flaeche {
background: var(--cd-color-bg);
padding: 6px var(--cd-space-sm);
margin-block: var(--cd-space-sm);
}
.cd-karte .cd-ausklapp .wp-block-details,
.cd-ausklapp.is-style-cd-flaeche .wp-block-details {
border-top: 0;
border-bottom: 0;
margin-top: 0;
}
/* ------------------------------------------------------------------ *
* 28 Kopfbereich
*
* Die Flaeche ganz oben reicht bis unter die Navigation: auf der
* Startseite das Bild, auf allen anderen Seiten ein zartes Grau. Die
* Navigation liegt darauf, ohne eigenen Grund.
*
* Damit hat jede Seite oben eine geschlossene Flaeche statt einer
* Kopfleiste, unter der etwas anfaengt. Der Unterschied ist klein und
* macht viel: Die Seite beginnt mit einem Bild oder einer Flaeche, nicht
* mit einem Balken.
* ------------------------------------------------------------------ */
.cd-header {
position: absolute;
top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--cd-space-sm));
left: 0;
right: 0;
background: transparent;
border-bottom: 0;
}
/*
* Sobald gescrollt wird, loest sich der Kopf von der Flaeche und
* bekommt seinen eigenen Grund — sonst stuende die Navigation auf dem
* Inhalt und waere je nach Stelle unlesbar.
*/
/*
* Geloest vom Inhalt sitzt der Kopf wieder ganz oben — der Rand gehoert
* zur Flaeche darunter, nicht zur Leiste.
*/
.cd-header--fest {
position: fixed;
top: var(--wp-admin--admin-bar--height, 0px);
background: var(--cd-color-bg);
border-bottom: 1px solid var(--cd-color-border);
}
/*
* Auf dem Bild steht die Navigation hell — aber nur die oberste Ebene.
* Das Klappmenue hat einen eigenen hellen Grund; weisse Schrift darauf
* ist unsichtbar.
*/
.cd-hat-hero .cd-header:not(.cd-header--fest) .cd-nav__list > li > a,
.cd-hat-hero .cd-header:not(.cd-header--fest) .cd-nav__toggle,
.cd-hat-hero .cd-header:not(.cd-header--fest) .cd-header__title a {
color: #fff;
}
.cd-hat-hero .cd-header:not(.cd-header--fest) .cd-header__burger-line,
.cd-hat-hero .cd-header:not(.cd-header--fest) .cd-header__burger-line::before,
.cd-hat-hero .cd-header:not(.cd-header--fest) .cd-header__burger-line::after {
background: #fff;
}
/*
* Der Hero und der Seitenkopf beginnen unter der Navigation und laufen
* hinter ihr durch. Der Innenabstand oben haelt den Text frei.
*/
.cd-hero,
.cd-seitenkopf {
padding-top: calc(var(--cd-header-height) + var(--cd-space-lg));
}
/*
* Beide Kopfflaechen stehen als Flaeche auf der Seite, nicht als
* angeschnittener Streifen: ein schmaler Rand ringsum und gerundete
* Ecken. Der Hero bekommt dieselbe Form wie der graue Kopf der
* Unterseiten — sonst waere die Startseite die einzige Seite, deren
* Anfang bis in die Ecken laeuft.
*/
.cd-hero,
.cd-seitenkopf {
border-radius: var(--cd-radius);
overflow: hidden;
}
.cd-hero {
margin: var(--cd-space-sm);
width: auto;
}
/*
* Der Seitenkopf ist die graue Flaeche: randlos in der Breite, unten
* gerundet, damit sie als Flaeche endet und nicht als Schnitt.
*/
.cd-seitenkopf {
position: relative;
background: var(--cd-color-surface);
padding-bottom: var(--cd-space-lg);
padding-inline: calc(max(0px, (100% - var(--cd-container)) / 2) + var(--cd-space-sm));
margin-inline: calc(50% - 50vw + var(--cd-space-sm));
margin-top: var(--cd-space-sm);
width: 100vw;
max-width: calc(100vw - var(--cd-space-sm) * 2);
}
.cd-seitenkopf > * {
max-width: var(--cd-measure);
}
/* ---- Kopfflaeche mit Bild ---- */
/*
* Setzt die Seite ein Beitragsbild, tritt es an die Stelle des Graus.
* Die Farbwerte werden im Kasten umdefiniert, nicht an jedem Element
* gesetzt — so folgt jeder Block darin von selbst, auch einer, den es
* heute noch nicht gibt.
*/
.cd-seitenkopf--bild {
--cd-color-text: #fff;
/*
* Auf einem Bild wird der gedaempfte Ton kraeftiger als auf einer
* Flaeche. Achtzig Prozent Deckkraft reichen auf ruhigem Grund; auf
* einem Foto mit hellen Stellen faellt der Text darunter durch.
*/
--cd-color-text-muted: rgba(255, 255, 255, .94);
background: var(--cd-color-inverse);
color: #fff;
}
.cd-seitenkopf__bild {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
/*
* Die Deckung folgt dem Text, nicht dem Bild.
*
* Ein rein senkrechter Verlauf mit heller Mitte war zu wenig: Gemessen
* kam der Titel auf 2.6 und der Vorspann auf 2.0 — beides unter dem,
* was WCAG verlangt, weil die Werkstatt genau dort hell ist, wo der Text
* steht. Deshalb deckt der Verlauf schmal die Seite ab, auf der der Text
* liegt, und laesst die andere frei.
*
* Schmale Schirme bekommen die Flaeche: Dort laeuft der Text ueber die
* ganze Breite, und eine Seite freizulassen hilft niemandem.
*/
.cd-seitenkopf--bild::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 28%),
linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .74) 100%);
}
@media (min-width: 900px) {
.cd-seitenkopf--bild::after {
background:
linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 30%),
linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .72) 52%, rgba(0, 0, 0, .12) 88%);
}
}
.cd-seitenkopf--bild > *:not(.cd-seitenkopf__bild) {
position: relative;
z-index: 1;
}
/*
* Der Pfad steht unter der Flaeche, nicht darin — und dicht daran. Er
* ist Orientierung, kein Abschnitt; zwischen ihm und dem ersten Inhalt
* genuegt der halbe Abstand.
*/
.cd-seitenkopf + .cd-brotkrumen {
margin-block: var(--cd-space-xs) 0;
}
/*
* Der Pfad wird an den Seitenkopf gehaengt und steht damit im Inhalt,
* nicht daneben — der Nachbar ist also der erste Abschnitt selbst und
* nicht der Artikel. Mit dem falschen Nachbarn griff die Regel nicht,
* und unter dem Pfad standen die volle Abschnittsluft von 80 Pixeln
* plus sein eigener Abstand.
*/
.cd-brotkrumen + * {
margin-top: var(--cd-space-md) !important;
}
@media (max-width: 640px) {
.cd-hero,
.cd-seitenkopf {
padding-top: calc(var(--cd-header-height) + var(--cd-space-md));
}
}
/*
* Zwei Logos, eines sichtbar.
*
* Auf dem Bild steht die Navigation hell — ein dunkles Logo daneben ist
* dort kaum zu erkennen. Beide Fassungen stehen im Markup und werden
* per CSS getauscht, nicht per Skript: Beim Scrollen wechselt der Kopf
* seinen Grund, und ein Skript muesste denselben Wechsel ein zweites Mal
* nachbilden.
*/
.cd-header__logo--hell {
display: none;
}
.cd-hat-hero .cd-header:not(.cd-header--fest) .cd-header__logo--hell {
display: block;
}
.cd-hat-hero .cd-header:not(.cd-header--fest) .cd-header__logo--dunkel {
display: none;
}
/* ------------------------------------------------------------------ *
* 29 Beitrag
*
* Ein Rennbericht ist die laengste Textform der Website: dreissig
* Absaetze, ein Aufmacher, eine Galerie mit zwanzig Fotos und die
* Ergebnislisten als PDF. Alles davon war da, aber nichts davon
* gestaltet — der Aufmacher lief bis in die Ecken, die Galerie stapelte
* sich untereinander, und die Dateien standen als nackte Links im Text.
* ------------------------------------------------------------------ */
/*
* Der Aufmacher steht auf Inhaltsbreite, nicht randlos. Randlos war er
* breiter als alles andere auf der Seite und damit ein Fremdkoerper —
* ein Bild im Beitrag, kein zweiter Hero.
*/
.cd-single__image {
max-width: var(--cd-container);
margin-inline: auto;
padding-inline: var(--cd-space-sm);
margin-block: var(--cd-space-md);
}
.cd-single__image img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/*
* Der Beitragstext bleibt horizontal zentriert. Ich hatte ihn auf die
* linke Flucht der Seiten gestellt, weil zwei Fluchten auf einer
* Website nach Fehler aussehen — bei dreissig Absaetzen Fliesstext ist
* die Mitte aber richtig: Ein Rennbericht wird gelesen, nicht
* ueberflogen, und eine Lesespalte am linken Rand einer breiten Seite
* kippt optisch weg.
*/
.cd-single__content {
max-width: var(--cd-container);
margin-inline: auto;
}
/* ---- Galerie ---- */
/*
* Drei Spalten mit gleich hohen Bildern. WordPress laesst die Galerie
* ohne eigene Angaben als Liste stehen; bei achtzehn Fotos ergibt das
* eine Bildschirmhoehe pro Bild.
*/
.cd-single__content .wp-block-gallery {
display: grid;
grid-template-columns: 1fr;
gap: var(--cd-space-xs);
max-width: var(--cd-container);
margin-block: var(--cd-space-lg);
}
@media (min-width: 700px) {
.cd-single__content .wp-block-gallery {
grid-template-columns: repeat(3, 1fr);
}
}
/*
* Die Breite muss erzwungen werden, und zwar mit demselben Kunstgriff,
* mit dem WordPress sie schuetzt.
*
* WordPress legt die Galerie als Flexbox aus und gibt jedem Bild eine
* berechnete Breite. Diese Regel traegt ein ":not(#individual-image)" —
* eine Bedingung, die immer zutrifft und deren einziger Zweck es ist,
* der Regel die Spezifitaet einer ID zu geben. Dagegen kommt kein
* gewoehnlicher Selektor an.
*
* Im Raster galt die Breite weiter, bezog sich aber auf einen
* Flex-Container, den es nicht mehr gibt: Die Bilder fielen auf 77 mal
* 51 Pixel zusammen, in Spalten von 278.
*
* Derselbe Selektor mit demselben Zusatz, nur spaeter im Stylesheet —
* das ist die Antwort ohne !important.
*/
.cd-single__content .wp-block-gallery figure,
.cd-single__content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
width: 100%;
max-width: none;
flex: none;
margin: 0;
border-radius: var(--cd-radius);
overflow: hidden;
}
.cd-single__content .wp-block-gallery img,
.cd-single__content .wp-block-gallery.has-nested-images figure.wp-block-image img {
width: 100%;
height: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 0;
}
/* ---- Dateien ---- */
/*
* Die Ergebnislisten. Mehrere Dateien hintereinander werden zu einer
* Liste mit Hairlines: Sie gehoeren zusammen und sollen so aussehen.
* Der Dateityp steht als Label rechts — er entscheidet, ob jemand
* ueberhaupt klicken will.
*/
/*
* Auf Textbreite und in derselben Mitte wie der Text. Ein "margin: 0"
* nahm hier die Zentrierung mit, die alle Bloecke des Beitrags von der
* Regel darueber bekommen — die Liste stand dann allein links, waehrend
* der Text daneben in der Mitte lief.
*/
.cd-single__content .wp-block-file {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--cd-space-sm);
max-width: var(--cd-measure);
margin-block: 0;
margin-inline: auto;
padding-block: 14px;
border-top: 1px solid var(--cd-color-border);
}
.cd-single__content .wp-block-file + .wp-block-file {
border-top: 1px solid var(--cd-color-border);
}
.cd-single__content .wp-block-file:last-of-type {
border-bottom: 1px solid var(--cd-color-border);
margin-bottom: var(--cd-space-lg);
}
.cd-single__content .wp-block-file a:first-child {
font-weight: 500;
text-decoration: none;
}
.cd-single__content .wp-block-file a:first-child:hover {
color: var(--cd-color-primary);
text-decoration: underline;
text-underline-offset: 4px;
}
/*
* Den zweiten Link — den Download-Knopf von WordPress — auf ein Label
* zurechtstellen. Als Knopf neben jedem Dateinamen waere er sechsmal
* derselbe rote Block; als Wort tut er dasselbe und draengt nicht.
*/
.cd-single__content .wp-block-file__button {
flex: none;
padding: 0;
background: none;
border-radius: 0;
color: var(--cd-color-text-muted);
font-family: var(--cd-font-daten);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
}
.cd-single__content .wp-block-file__button:hover {
color: var(--cd-color-primary);
}
/*
* Wo es keine Kopfflaeche gibt, macht der Inhalt selbst Platz fuer die
* Navigation. Sonst liegt sie auf der ersten Zeile — auf einem
* Rennbericht lag der Pfad hinter dem Logo.
*/
.cd-ohne-kopfflaeche .cd-main {
padding-top: calc(var(--cd-header-height) + var(--cd-space-sm));
}
/* ------------------------------------------------------------------ *
* 30 Weiter im Archiv
*
* Zwei Haelften, getrennt durch eine Hairline. Der Pfeil steht als
* eigenes Zeichen vor beziehungsweise nach dem Label und wandert beim
* Ueberfahren ein Stueck in seine Richtung — die einzige Bewegung hier,
* und sie zeigt, wohin es geht.
* ------------------------------------------------------------------ */
.cd-weiter {
display: grid;
grid-template-columns: 1fr;
gap: var(--cd-space-sm);
max-width: var(--cd-container);
margin: var(--cd-space-lg) auto 0;
padding: var(--cd-space-md) var(--cd-space-sm) 0;
border-top: 1px solid var(--cd-color-border);
}
@media (min-width: 700px) {
.cd-weiter {
grid-template-columns: 1fr 1fr;
gap: var(--cd-space-md);
}
.cd-weiter__seite--vor {
text-align: right;
}
}
.cd-weiter__link {
display: grid;
gap: 6px;
text-decoration: none;
}
.cd-weiter__label {
font-family: var(--cd-font-daten);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cd-color-text-muted);
display: flex;
align-items: center;
gap: 8px;
}
.cd-weiter__label::before {
content: "\2190";
transition: transform var(--cd-transition);
}
/*
* Rechts steht der Pfeil hinter dem Text und die Zeile an der rechten
* Kante — beides ueber order und nicht ueber row-reverse: Bei umgekehrter
* Laufrichtung zeigt flex-end nach links, und die Ausrichtung kippt genau
* dann, wenn man sie braucht. Das Label stand deshalb an der linken Kante,
* waehrend der Titel darunter rechts sass.
*/
.cd-weiter__seite--vor .cd-weiter__label {
justify-content: flex-end;
}
.cd-weiter__seite--vor .cd-weiter__label::before {
content: "\2192";
order: 1;
}
.cd-weiter__link:hover .cd-weiter__label::before {
transform: translateX(-4px);
}
.cd-weiter__seite--vor .cd-weiter__link:hover .cd-weiter__label::before {
transform: translateX(4px);
}
.cd-weiter__titel {
font-family: var(--cd-font-head);
font-weight: 700;
font-size: clamp(18px, 1.6vw, 21px);
line-height: 1.25;
letter-spacing: -.01em;
color: var(--cd-color-text);
}
.cd-weiter__link:hover .cd-weiter__titel {
color: var(--cd-color-primary);
}
/*
* Das letzte Element im Beitrag braucht keinen Abstand nach unten mehr —
* der Artikel und die Weiter-Navigation bringen ihren eigenen mit. Ohne
* das summierten sich 96 Pixel Galerie, 96 Pixel Artikel und die Luft
* des Fusses auf 288 Pixel Leere.
*/
.cd-single__content > :last-child {
margin-bottom: 0;
}
.cd-single {
padding-bottom: 0;
}
/* ------------------------------------------------------------------ *
* 28 Sammlungen
*
* Ein Raster fuer alle strukturierten Blocks: Teaser, Team, Fragen.
* Sie teilen eine Bauweise (CD-24), also teilen sie auch ihr CSS. Was
* sich unterscheidet, unterscheidet sich als Block Style — nicht als
* zweiter Regelsatz.
*
* Die Spaltenzahl kommt als data-spalten aus dem Block und gilt nur fuer
* breite Fenster. Darunter rechnet das Raster selbst herunter: erst auf
* zwei, dann auf eine. Ein Regler, mit dem der Kunde die Mobilansicht
* einstellen koennte, waere ein Regler, mit dem er sie zerstoeren kann.
* ------------------------------------------------------------------ */
/*
* Waagerecht und senkrecht derselbe Abstand.
*
* Bisher standen 48px zwischen den Reihen und 24px zwischen den Spalten.
* Bei einem Raster aus gleichartigen Kacheln liest sich das als zwei
* Gruppen untereinander statt als ein Feld aus vier Karten — das Auge
* nimmt den groesseren Abstand als Trennung. Ein Raster braucht einen
* Abstand, nicht zwei.
*
* Angeglichen wird nach unten: Der engere Wert stand schon zwischen den
* Spalten, und er haelt die Karten als Einheit zusammen.
*/
.cd-sammlung {
display: grid;
gap: var(--cd-space-sm);
margin-block: var(--cd-space-lg);
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.cd-sammlung[data-spalten] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1000px) {
.cd-sammlung[data-spalten="3"] {
grid-template-columns: repeat(3, 1fr);
}
.cd-sammlung[data-spalten="4"] {
grid-template-columns: repeat(4, 1fr);
}
}
.cd-sammlung__element {
display: flex;
flex-direction: column;
gap: var(--cd-space-xs);
min-width: 0;
}
/*
* Fuehrt ein Eintrag einen Link, ist die ganze Kachel das Ziel. Ein
* zweiter Link darin waere fuer die Tastaturbedienung dieselbe Station
* zweimal (CD-19).
*/
a.cd-sammlung__element {
color: inherit;
text-decoration: none;
}
.cd-sammlung__pfeil {
margin-top: auto;
padding-top: var(--cd-space-xs);
font-size: var(--cd-lead);
line-height: 1;
transition: transform var(--cd-transition);
}
a.cd-sammlung__element:hover .cd-sammlung__pfeil,
a.cd-sammlung__element:focus-visible .cd-sammlung__pfeil {
transform: translateX(.35em);
}
.cd-sammlung__bild img {
display: block;
width: 100%;
height: auto;
border-radius: var(--cd-radius);
}
.cd-sammlung__eyebrow {
margin: 0;
font-size: var(--cd-small);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cd-color-text-muted);
}
.cd-sammlung__titel,
.cd-sammlung__name {
margin: 0;
font-family: var(--cd-font-head);
font-size: var(--wp--preset--font-size--large, 1.4rem);
font-weight: 600;
line-height: 1.2;
}
.cd-sammlung__text,
.cd-sammlung__funktion {
margin: 0;
color: var(--cd-color-text-muted);
}
.cd-sammlung__mail,
.cd-sammlung__tel {
margin: 0;
font-size: var(--cd-small);
}
/* --- Karte: die Grundform ----------------------------------------- */
/*
* Die Kartenoptik haengt an der Bauform und nicht am Block Style
* "Karten". Der Grund ist eine Eigenheit von WordPress: Die Klasse
* eines Block Styles steht erst im Markup, wenn jemand ihn auswaehlt.
* Der als Standard markierte Stil steht nirgends — am 06.09.2026
* standen Team und Inhaltsraster deshalb ohne Karte da, obwohl
* "Karten" im Editor als gewaehlt angezeigt wurde.
*
* Die beiden anderen Stile nehmen die Karte unten wieder weg.
*/
/*
* Gelesen: "Bauform Kachel, solange kein Stil gewaehlt ist — oder der
* Stil Karten." Das :not() haelt beide Wege auseinander, ohne dass die
* Reihenfolge im Stylesheet darueber entscheidet. Ein Block, dessen
* Bauform Zeilen ist, kann so trotzdem auf Karten umgestellt werden.
*/
.cd-sammlung:not([class*="is-style-"]).cd-bauform-kachel > .cd-sammlung__element,
.cd-sammlung.is-style-cd-karten > .cd-sammlung__element {
padding: var(--cd-space-sm);
background: var(--cd-color-surface);
border-radius: var(--cd-radius);
}
/*
* Das Bild fuellt die Kartenbreite. Der Innenabstand der Karte gehoert
* dem Text — ein Bild mit Rand darin sieht aus wie ein Bild im Rahmen
* und nicht wie der Kopf der Karte.
*/
.cd-sammlung:not([class*="is-style-"]).cd-bauform-kachel > .cd-sammlung__element > .cd-sammlung__bild,
.cd-sammlung.is-style-cd-karten > .cd-sammlung__element > .cd-sammlung__bild {
margin: calc(var(--cd-space-sm) * -1) calc(var(--cd-space-sm) * -1) var(--cd-space-xs);
}
.cd-sammlung:not([class*="is-style-"]).cd-bauform-kachel > .cd-sammlung__element > .cd-sammlung__bild img,
.cd-sammlung.is-style-cd-karten > .cd-sammlung__element > .cd-sammlung__bild img {
border-radius: var(--cd-radius) var(--cd-radius) 0 0;
}
/* --- Stil: Zeilen ------------------------------------------------- */
/*
* Eine Spalte, Eintraege durch Haarlinien getrennt. Fuer Listen, die
* gelesen und nicht ueberflogen werden — Leistungen etwa, wo der Titel
* die Information ist und das Bild nichts beitraegt.
*/
/*
* Eine Spalte, unabhaengig vom Spaltenregler. Der Regler bleibt
* sichtbar, weil derselbe Block auch als Karten laufen kann — er wirkt
* hier nur nicht.
*/
.cd-sammlung:not([class*="is-style-"]).cd-bauform-zeilen,
.cd-sammlung.is-style-cd-zeilen {
grid-template-columns: 1fr;
gap: 0;
}
.cd-sammlung:not([class*="is-style-"]).cd-bauform-zeilen > .cd-sammlung__element,
.cd-sammlung.is-style-cd-zeilen > .cd-sammlung__element {
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
gap: var(--cd-space-xs) var(--cd-space-sm);
padding: var(--cd-space-sm) 0;
background: none;
border-radius: 0;
border-top: 1px solid var(--cd-color-border);
}
/* Ohne Karte gibt es keinen Innenabstand, den das Bild sprengen muesste. */
.cd-bauform-zeilen > .cd-sammlung__element > .cd-sammlung__bild,
.is-style-cd-zeilen > .cd-sammlung__element > .cd-sammlung__bild {
margin: 0;
}
.cd-bauform-zeilen > .cd-sammlung__element > .cd-sammlung__bild img,
.is-style-cd-zeilen > .cd-sammlung__element > .cd-sammlung__bild img {
border-radius: var(--cd-radius);
}
.cd-bauform-zeilen > .cd-sammlung__element:last-child,
.is-style-cd-zeilen > .cd-sammlung__element:last-child {
border-bottom: 1px solid var(--cd-color-border);
}
.cd-bauform-zeilen .cd-sammlung__titel,
.cd-bauform-zeilen .cd-sammlung__name,
.is-style-cd-zeilen .cd-sammlung__titel,
.is-style-cd-zeilen .cd-sammlung__name {
flex: 0 0 clamp(200px, 30%, 340px);
}
.cd-bauform-zeilen .cd-sammlung__text,
.cd-bauform-zeilen .cd-sammlung__funktion,
.is-style-cd-zeilen .cd-sammlung__text,
.is-style-cd-zeilen .cd-sammlung__funktion {
flex: 1 1 300px;
}
.cd-bauform-zeilen .cd-sammlung__pfeil,
.is-style-cd-zeilen .cd-sammlung__pfeil {
margin-left: auto;
padding-top: 0;
}
.cd-bauform-zeilen .cd-sammlung__bild,
.is-style-cd-zeilen .cd-sammlung__bild {
flex: 0 0 96px;
}
/* --- Stil: Schritte ----------------------------------------------- */
/*
* Nummeriert. Nur fuer echte Reihenfolgen: Die Nummer behauptet, dass
* Schritt 2 nach Schritt 1 kommt — wo das nicht stimmt, gehoert der Stil
* Karten hin.
*
* Die Zahl kommt aus einem CSS-Zaehler und ist kein Feld. So bleibt sie
* richtig, wenn der Kunde einen Schritt in der Mitte einfuegt.
*/
.is-style-cd-schritte {
counter-reset: cd-schritt;
}
.is-style-cd-schritte > .cd-sammlung__element {
counter-increment: cd-schritt;
padding: var(--cd-space-sm) 0 0;
background: none;
border-radius: 0;
border-top: 2px solid var(--cd-color-primary);
}
.is-style-cd-schritte > .cd-sammlung__element > .cd-sammlung__bild {
margin: 0;
}
.is-style-cd-schritte > .cd-sammlung__element::before {
content: counter(cd-schritt, decimal-leading-zero);
font-family: var(--cd-font-head);
font-size: var(--cd-small);
font-variant-numeric: tabular-nums;
color: var(--cd-color-text-muted);
}
/* --- Sammlung: Downloads ------------------------------------------ */
.cd-sammlung__datei {
margin: 0;
font-size: var(--cd-small);
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--cd-color-text-muted);
}
/*
* Bei Dokumenten steht die Angabe zuoberst: Format und Groesse
* entscheiden mit, ob jemand hier klicken will.
*/
.cd-sammlung--downloads .cd-sammlung__element {
gap: calc(var(--cd-space-xs) / 2);
}
.cd-sammlung--downloads .cd-sammlung__datei {
flex: 0 0 auto;
order: 3;
}
/* --- Sammlung: Fragen --------------------------------------------- */
/*
* und bringen Auf- und Zuklappen, Tastaturbedienung
* und die Ansage fuer Screenreader mit (CD-01, CD-19). Hier wird nur
* gestaltet, nichts nachgebaut.
*/
.cd-sammlung--fragen {
gap: 0;
max-width: var(--cd-container-schmal);
margin-inline: auto;
}
.cd-sammlung--fragen .cd-sammlung__element {
padding-block: var(--cd-space-sm);
border-top: 1px solid var(--cd-color-border);
}
.cd-sammlung--fragen .cd-sammlung__element:last-child {
border-bottom: 1px solid var(--cd-color-border);
}
.cd-sammlung__frage {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--cd-space-sm);
cursor: pointer;
font-family: var(--cd-font-head);
font-size: var(--wp--preset--font-size--large, 1.3rem);
font-weight: 600;
line-height: 1.3;
list-style: none;
}
.cd-sammlung__frage::-webkit-details-marker {
display: none;
}
/*
* Das Zeichen dreht sich beim Aufklappen. Es steht in ::after und nicht
* als Bild: eine Drehung weniger, die beim Laden nachgeladen werden
* muesste.
*/
.cd-sammlung__frage::after {
content: "+";
flex: 0 0 auto;
font-weight: 400;
transition: transform var(--cd-transition);
}
.cd-sammlung__element[open] > .cd-sammlung__frage::after {
transform: rotate(45deg);
}
.cd-sammlung__antwort {
max-width: var(--cd-measure);
padding-top: var(--cd-space-xs);
color: var(--cd-color-text-muted);
}
.cd-sammlung__antwort > p:first-child {
margin-top: 0;
}
/* --- Sammlung: Team ----------------------------------------------- */
.cd-sammlung--team .cd-sammlung__bild img {
aspect-ratio: 3 / 4;
object-fit: cover;
}
.cd-sammlung--team.is-style-cd-zeilen .cd-sammlung__bild img {
aspect-ratio: 1;
border-radius: 50%;
}
/* ------------------------------------------------------------------ *
* 29 Block Styles fuer Core-Blocks
*
* Varianten eines Core-Blocks entstehen als Block Style, nie als Fork
* und nie als eigenes Pattern (CD-08). Beide hier ersetzen ein Pattern,
* das es bis Core 0.27.0 gab.
* ------------------------------------------------------------------ */
/* --- Tabelle: Spezifikationen ------------------------------------- */
/*
* Schluessel links, Wert rechts, Haarlinie dazwischen. Ersetzt das
* frueher aus Gruppen und Absaetzen nachgebaute Pattern — eine Tabelle
* kann WordPress selbst, und sie liest sich mit Screenreader richtig
* vor (CD-01, CD-19).
*/
.wp-block-table.is-style-cd-spec {
margin-block: var(--cd-space-sm);
max-width: var(--cd-container-schmal);
}
.wp-block-table.is-style-cd-spec table {
border-collapse: collapse;
width: 100%;
}
.wp-block-table.is-style-cd-spec td,
.wp-block-table.is-style-cd-spec th {
padding: 12px 0;
border: 0;
border-top: 1px solid var(--cd-color-border);
vertical-align: baseline;
}
.wp-block-table.is-style-cd-spec tr:first-child td,
.wp-block-table.is-style-cd-spec tr:first-child th {
border-top: 0;
}
/* Die erste Spalte ist der Schluessel: klein, gedaempft, gesperrt. */
.wp-block-table.is-style-cd-spec td:first-child,
.wp-block-table.is-style-cd-spec th:first-child {
font-family: var(--cd-font-daten);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cd-color-text-muted);
}
/*
* Der Wert steht rechts und in Tabellenziffern — nur so stehen Zahlen
* untereinander auf derselben Stelle. Genau dafuer ist die Form da.
*/
.wp-block-table.is-style-cd-spec td:last-child,
.wp-block-table.is-style-cd-spec th:last-child {
font-family: var(--cd-font-daten);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* --- Galerie: Paar versetzt --------------------------------------- */
/*
* Zwei Bilder nebeneinander, das zweite nach unten versetzt. Der Versatz
* bricht die Linie, auf der sonst jedes Bild einer Seite sitzt, und gibt
* einer Doppelung Rhythmus, ohne dass ein drittes Element noetig waere.
*
* Erst ab Tablet. Untereinander gibt es keine Linie zu brechen, und der
* Versatz waere nur ein Loch.
*/
@media (min-width: 700px) {
.wp-block-gallery.is-style-cd-paar {
gap: var(--cd-space-md);
align-items: start;
}
.wp-block-gallery.is-style-cd-paar > figure:nth-child(even) {
margin-top: var(--cd-space-lg);
}
}
.wp-block-gallery.is-style-cd-paar figcaption {
font-family: var(--cd-font-daten);
font-size: 12px;
letter-spacing: .06em;
color: var(--cd-color-text-muted);
}
/* ------------------------------------------------------------------ *
* 30 Inhaltsraster
*
* Der Rahmen um eine Liste aus der Datenbank: Jahresfilter oben,
* Blaetterleiste unten. Die Eintraege selbst tragen die Klassen der
* Sammlungen und werden dort gestaltet — ein Raster aus der Datenbank
* soll aussehen wie ein von Hand gepflegtes.
* ------------------------------------------------------------------ */
.cd-raster {
margin-block: var(--cd-space-lg);
}
.cd-raster .cd-sammlung {
margin-block: 0;
}
/* --- Filter nach Jahr --------------------------------------------- */
.cd-raster__jahre {
display: flex;
flex-wrap: wrap;
gap: var(--cd-space-xs) var(--cd-space-sm);
margin-bottom: var(--cd-space-md);
padding-bottom: var(--cd-space-xs);
border-bottom: 1px solid var(--cd-color-border);
}
.cd-raster__filter {
font-family: var(--cd-font-daten);
font-size: var(--cd-small);
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
color: var(--cd-color-text-muted);
text-decoration: none;
}
.cd-raster__filter:hover,
.cd-raster__filter:focus-visible {
color: var(--cd-color-text);
}
/*
* Das aktive Jahr ist kein Link mehr, sieht aber aus wie einer. Die
* Auszeichnung liegt deshalb nicht nur auf der Farbe: Wer Farben nicht
* unterscheidet, sieht sonst nicht, wo er steht (CD-19).
*/
.cd-raster__filter--aktiv {
color: var(--cd-color-text);
font-weight: 600;
text-decoration: underline;
text-underline-offset: .35em;
}
/* --- Blaettern ---------------------------------------------------- */
.cd-raster__blaettern {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--cd-space-sm);
margin-top: var(--cd-space-md);
padding-top: var(--cd-space-sm);
border-top: 1px solid var(--cd-color-border);
}
/*
* Der Stand steht in der Mitte, auch wenn nur einer der beiden Wege da
* ist. Ohne diese Zeile springt er auf der ersten Seite nach links und
* auf der letzten nach rechts.
*/
.cd-raster__stand {
order: 2;
flex: 1 1 auto;
text-align: center;
font-family: var(--cd-font-daten);
font-size: var(--cd-small);
font-variant-numeric: tabular-nums;
color: var(--cd-color-text-muted);
}
.cd-raster__zurueck {
order: 1;
}
.cd-raster__weiter {
order: 3;
}
.cd-raster__leer {
color: var(--cd-color-text-muted);
}
/* --- Ansicht nach Jahrgang ---------------------------------------- */
.cd-raster__saison + .cd-raster__saison {
margin-top: var(--cd-space-lg);
}
.cd-raster__jahr {
display: flex;
align-items: baseline;
gap: var(--cd-space-sm);
margin-bottom: var(--cd-space-sm);
padding-bottom: var(--cd-space-xs);
border-bottom: 1px solid var(--cd-color-border);
font-variant-numeric: tabular-nums;
}
.cd-raster__zahl {
font-family: var(--cd-font-daten);
font-size: var(--cd-small);
font-weight: 400;
letter-spacing: .04em;
color: var(--cd-color-text-muted);
}
/* --- Datum eines Eintrags ----------------------------------------- */
.cd-sammlung__datum {
margin: 0;
font-family: var(--cd-font-daten);
font-size: var(--cd-small);
font-variant-numeric: tabular-nums;
color: var(--cd-color-text-muted);
}
/* ------------------------------------------------------------------ *
* 31 Sammlung: Fakten
*
* Belegbare Angaben zum Betrieb. Bis Core 0.29.1 ein eigener Block mit
* eigener style.css; seit 0.30.0 eine Sammlung wie die anderen.
*
* Die Grunddarstellung haengt an der Bauform und nicht am Block Style
* "Band". WordPress schreibt is-style- erst ins Markup, wenn
* jemand den Stil auswaehlt — was als Standard markiert ist, steht
* nirgends. "Liste" und "Aussage" sind echte Varianten und bleiben
* Block Styles.
* ------------------------------------------------------------------ */
/*
* Keine Linie um das Band herum. Die Trennung leisten die Linien ueber
* den Spalten und die senkrechten dazwischen; ein Rahmen oben und unten
* kam bei jeder Spalte noch einmal dazu und legte das Band in einen
* Kasten, den niemand gezeichnet hatte.
*/
.cd-sammlung--fakten {
--cd-fakten-linie: var(--cd-color-border);
gap: 0;
}
/*
* Jede Angabe traegt ihre Linie oben. Nebeneinander ergeben sie eine
* durchgehende Linie ueber dem Band, untereinander trennen sie die
* Angaben. Unten braucht es keine: Unter der letzten steht nichts mehr.
*/
.cd-sammlung:not([class*="is-style-"]).cd-bauform-band > .cd-sammlung__element,
.cd-sammlung.is-style-band > .cd-sammlung__element {
padding-block: var(--cd-space-md);
border-top: 1px solid var(--cd-fakten-linie);
}
/*
* Die Linie oben ist eine Haarlinie wie ueberall — nur am
* Schluesselwert wird sie kraeftig und traegt die Akzentfarbe. Eine
* durchgehende Linie in Tinte war zu schwer: Direkt unter einem Hero
* las sie sich als Abschluss der Seite statt als Beginn eines Bandes.
*
* Die Information haengt nicht allein an der Farbe (CD-19) — der
* Schluesselwert steht ohnehin zuoberst und traegt sein eigenes Label.
*/
/*
* Dieselben drei Wege wie die Grunddarstellung darueber, sonst schlaegt
* sie diese Regel in der Spezifitaet: Vier Klassen gegen drei, und der
* Schluesselwert bekaeme die Haarlinie statt seiner Akzentlinie.
*/
.cd-sammlung:not([class*="is-style-"]).cd-bauform-band > .cd-sammlung__element--marke,
.cd-sammlung.is-style-band > .cd-sammlung__element--marke {
border-top: 2px solid var(--cd-color-primary);
}
.cd-sammlung--fakten .cd-sammlung__label {
margin: 0 0 var(--cd-space-xs);
font-family: var(--cd-font-daten);
font-size: 12px;
line-height: 1.3;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cd-color-text-muted);
}
/*
* Die Zahl in der Datenschrift, mit Tabellenziffern. Eine Zahl in der
* Ueberschriftenschrift ist eine Ueberschrift; in der Datenschrift ist
* sie ein Messwert — und darum geht es hier.
*/
.cd-sammlung--fakten:not(.is-style-liste) .cd-sammlung__zahl {
margin: 0;
font-family: var(--cd-font-daten);
font-weight: 500;
font-size: clamp(34px, 3.6vw, 46px);
line-height: 1;
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
}
.cd-sammlung--fakten:not(.is-style-liste) .cd-sammlung__element--marke .cd-sammlung__zahl {
color: var(--cd-color-primary);
}
.cd-sammlung--fakten:not(.is-style-liste) .cd-sammlung__text {
margin: var(--cd-space-xs) 0 0;
max-width: 34ch;
font-size: var(--cd-small);
color: var(--cd-color-text-muted);
}
/*
* Dieselben zwei Schwellen wie jede andere Sammlung: 700 auf zwei
* Spalten, 1000 auf drei. Bis Theme 0.29.1 sprang das Faktenband bei
* 768 direkt auf drei — auf Tabletbreite stand es dreispaltig, waehrend
* alles darueber und darunter zweispaltig lief. Ein Raster, das an
* einer Stelle anders bricht als das ganze uebrige System, liest sich
* als Fehler.
*
* Die senkrechte Linie sitzt links und faellt in der ersten Spalte
* jeder Zeile weg. Sie am letzten Element zu loeschen genuegte nur
* solange, wie es genau eine Zeile gab: Bei zwei Spalten und drei
* Angaben steht die dritte allein in der zweiten Zeile, und "letztes
* Element" ist dann nicht "rechter Rand".
*/
@media (min-width: 700px) {
.cd-sammlung--fakten:not(.is-style-liste) {
grid-template-columns: repeat(2, 1fr);
}
.cd-sammlung--fakten:not(.is-style-liste) > .cd-sammlung__element {
padding-inline: var(--cd-space-md);
border-left: 1px solid var(--cd-fakten-linie);
}
.cd-sammlung--fakten:not(.is-style-liste) > .cd-sammlung__element:nth-child(2n + 1) {
padding-left: 0;
border-left: 0;
}
.cd-sammlung--fakten:not(.is-style-liste) > .cd-sammlung__element:nth-child(2n) {
padding-right: 0;
}
}
@media (min-width: 1000px) {
.cd-sammlung--fakten:not(.is-style-liste) {
grid-template-columns: repeat(3, 1fr);
}
/*
* Die Zweierregeln zuerst zuruecknehmen. Sie sprechen ueber
* nth-child und sind damit staerker als eine allgemeine Regel —
* ohne diesen Schritt behielte die dritte Angabe die Kante der
* zweispaltigen Ansicht.
*/
.cd-sammlung--fakten:not(.is-style-liste) > .cd-sammlung__element:nth-child(2n + 1) {
padding-left: var(--cd-space-md);
border-left: 1px solid var(--cd-fakten-linie);
}
.cd-sammlung--fakten:not(.is-style-liste) > .cd-sammlung__element:nth-child(2n) {
padding-right: var(--cd-space-md);
}
.cd-sammlung--fakten:not(.is-style-liste) > .cd-sammlung__element:nth-child(3n + 1) {
padding-left: 0;
border-left: 0;
}
.cd-sammlung--fakten:not(.is-style-liste) > .cd-sammlung__element:nth-child(3n) {
padding-right: 0;
}
}
/* --- Variante: Liste ---------------------------------------------- */
.cd-sammlung--fakten.is-style-liste > .cd-sammlung__element {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
gap: var(--cd-space-sm);
padding-block: 14px;
border-top: 0;
border-bottom: 1px solid var(--cd-fakten-linie);
}
.cd-sammlung--fakten.is-style-liste > .cd-sammlung__element:last-child {
border-bottom: 0;
}
.cd-sammlung--fakten.is-style-liste .cd-sammlung__label {
display: none;
}
.cd-sammlung--fakten.is-style-liste .cd-sammlung__zahl {
order: 2;
font-size: var(--cd-small);
text-align: right;
}
.cd-sammlung--fakten.is-style-liste .cd-sammlung__text {
order: 1;
margin: 0;
font-family: var(--cd-font-daten);
font-size: var(--cd-small);
color: var(--cd-color-text-muted);
}
/* --- Messwert oder Aussage ---------------------------------------- */
/*
* Die Datenschrift bleibt den Messwerten vorbehalten: "Alles im Haus"
* in Tabellenziffern liest sich wie eine Kennzahl und nicht wie ein
* Versprechen — und eine Seite, die jede Aussage als Kennzahl setzt,
* klingt nach Software und nicht nach Unternehmen.
*
* Bis Core 0.32.1 war das ein Block Style namens "Aussage". Er
* unterschied sich von "Band" allein durch diese Schrift; Raster,
* Linien und Abstaende waren dieselben. Jetzt entscheidet der Wert
* selbst: Steht eine Ziffer darin, ist es ein Messwert — sonst eine
* Aussage. Der Redakteur waehlt nichts mehr aus, und die Seite kann
* beides nebeneinander zeigen, was ein Stil am Container nie konnte.
*/
/*
* Gleich stark wie die Regel des Bandes darueber und weiter unten im
* Stylesheet, sonst schlaegt sie diese hier: drei Klassen gegen eine.
* Die Listenform bleibt aussen vor — dort ist die Zahl klein und
* rechtsbuendig, und ein Wort stoert dabei nicht.
*/
.cd-sammlung--fakten:not(.is-style-liste) .cd-sammlung__zahl--wort {
font-family: var(--cd-font-head);
font-weight: 600;
font-size: clamp(24px, 2.2vw, 30px);
letter-spacing: -.02em;
font-variant-numeric: normal;
}
/*
* Neben einer Aussage traegt der Satz die eigentliche Information und
* nicht mehr nur die Erlaeuterung einer Zahl. Deshalb Lesegroesse statt
* Kleinschrift.
*/
.cd-sammlung--fakten:not(.is-style-liste) .cd-sammlung__zahl--wort + .cd-sammlung__text {
margin-top: 10px;
font-size: var(--cd-text);
line-height: 1.5;
max-width: 32ch;
}
/* --- Auf dunkler Flaeche ------------------------------------------ */
/*
* Die Farben kommen aus dem umgebenden Abschnitt, nicht aus dem Block —
* damit funktioniert derselbe Block hell wie dunkel.
*/
.has-inverse-background-color .cd-sammlung--fakten,
.cd-dunkel .cd-sammlung--fakten {
--cd-fakten-linie: rgba(255, 255, 255, .18);
}
.has-inverse-background-color .cd-sammlung--fakten .cd-sammlung__text,
.cd-dunkel .cd-sammlung--fakten .cd-sammlung__text,
.has-inverse-background-color .cd-sammlung--fakten .cd-sammlung__label,
.cd-dunkel .cd-sammlung--fakten .cd-sammlung__label {
color: rgba(255, 255, 255, .72);
}
.has-inverse-background-color .cd-bauform-band > .cd-sammlung__element,
.cd-dunkel .cd-sammlung:not([class*="is-style-"]).cd-bauform-band > .cd-sammlung__element,
.cd-sammlung.is-style-band > .cd-sammlung__element {
border-top-color: rgba(255, 255, 255, .55);
}
/* ------------------------------------------------------------------ *
* 32 Kontakt
*
* Bis Core 0.30.0 lag diese Gestaltung in blocks/kontakt/style.css.
* Darstellung gehoert ins Theme (CD-27).
* ------------------------------------------------------------------ */
.cd-kontakt__titel {
margin-top: 0;
}
.cd-kontakt__adresse {
display: grid;
gap: 2px;
font-style: normal;
margin-block: var(--cd-space-sm, 24px) 0;
}
.cd-kontakt__firma {
font-weight: 500;
}
.cd-kontakt__wege {
display: flex;
flex-wrap: wrap;
gap: var(--cd-space-sm, 24px);
margin-block: var(--cd-space-sm, 24px) 0;
}
/*
* Die Zeiten bekommen eine Ueberschrift. Ohne sie stand rechts eine
* Tabelle ohne Gegenstand: Links sagt der Firmenname, was dort steht,
* rechts sagte es niemand — man musste aus "Mo - Fr" schliessen, worum
* es geht. Sie steht in derselben Auszeichnung wie der Firmenname und
* damit auf einer Hoehe mit ihm.
*/
.cd-kontakt__zeiten-titel {
margin: var(--cd-space-md, 48px) 0 0;
font-weight: 500;
}
.cd-kontakt__zeiten {
margin-block: var(--cd-space-md, 48px) 0;
border-top: 1px solid var(--cd-color-border, #e0e0dd);
}
/* Steht der Titel davor, traegt er den Abstand nach oben. */
.cd-kontakt__zeiten-titel + .cd-kontakt__zeiten {
margin-top: var(--cd-space-xs, 12px);
}
.cd-kontakt__zeile {
display: flex;
justify-content: space-between;
gap: var(--cd-space-sm, 24px);
padding-block: 12px;
border-bottom: 1px solid var(--cd-color-border, #e0e0dd);
}
.cd-kontakt__zeile dt,
.cd-kontakt__zeile dd {
margin: 0;
}
.cd-kontakt__zeile dd {
text-align: right;
}
.cd-kontakt__cta {
margin-block: var(--cd-space-md, 48px) 0;
}
.cd-kontakt--leer .cd-kontakt__hinweis {
margin: 0;
padding: var(--cd-space-sm, 24px);
border: 1px dashed var(--cd-color-border, #e0e0dd);
color: var(--cd-color-text-muted, #6b6b6b);
}
/*
* Ab Tablet stehen Adresse und Zeiten nebeneinander.
*
* Untereinander laeuft jede Zeitzeile ueber die volle Breite: Zwischen
* "Mo – Fr" und der Uhrzeit liegen dann acht Zentimeter Leere, und das
* Auge verliert die Zuordnung. Zwei Spalten halten die Zeile kurz genug,
* dass Tag und Zeit zusammengehoerig bleiben.
*/
@media (min-width: 700px) {
.cd-kontakt__spalten {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cd-space-md, 48px);
align-items: start;
}
.cd-kontakt__spalten .cd-kontakt__zeiten-titel {
margin-top: var(--cd-space-sm, 24px);
}
.cd-kontakt__spalten .cd-kontakt__zeiten {
margin-top: var(--cd-space-sm, 24px);
}
.cd-kontakt__spalten .cd-kontakt__zeiten-titel + .cd-kontakt__zeiten {
margin-top: var(--cd-space-xs, 12px);
}
.cd-kontakt__spalten .cd-kontakt__adresse {
margin-top: var(--cd-space-sm, 24px);
}
}
/*
* Keine Linie unter dem letzten Eintrag: Eine Trennlinie trennt zwei
* Dinge, und unter dem letzten steht nichts mehr.
*/
.cd-kontakt__zeile:last-child {
border-bottom: 0;
}
/* ------------------------------------------------------------------ *
* 33 Anfrageformular
*
* Bis Core 0.30.0 lag diese Gestaltung in blocks/anfrage/style.css.
* Darstellung gehoert ins Theme (CD-27).
* ------------------------------------------------------------------ */
.cd-anfrage {
padding: var(--cd-space-md, 48px);
background: var(--cd-color-surface, #f4f3f0);
}
.cd-anfrage__titel {
margin-top: 0;
}
.cd-anfrage__hinweis,
.cd-anfrage__meldung {
max-width: 60ch;
font-size: var(--cd-small, 15px);
color: var(--cd-color-text-muted, #6b6b6b);
}
.cd-anfrage__meldung {
padding: var(--cd-space-sm, 24px);
border-left: 3px solid var(--cd-color-primary, #c8102e);
background: var(--cd-color-bg, #fff);
color: var(--cd-color-text, #1a1a1a);
}
.cd-anfrage__meldung--ok {
border-left-color: #2e7d32;
}
/* Die Falle gegen automatisch ausgefuellte Formulare. */
.cd-anfrage__falle {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.cd-anfrage__formular {
display: grid;
gap: var(--cd-space-sm, 24px);
max-width: 640px;
margin-top: var(--cd-space-sm, 24px);
}
.cd-anfrage__feld {
display: grid;
gap: 6px;
margin: 0;
}
.cd-anfrage__feld label {
font-size: var(--cd-small, 15px);
font-weight: 700;
}
.cd-anfrage__pflicht {
color: var(--cd-color-primary, #c8102e);
}
.cd-anfrage input[type="text"],
.cd-anfrage select,
.cd-anfrage textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--cd-color-border, #e0e0dd);
background: var(--cd-color-bg, #fff);
color: var(--cd-color-text, #1a1a1a);
font-family: inherit;
font-size: 16px; /* Unter 16px zoomt iOS beim Antippen hinein. */
line-height: 1.4;
border-radius: 0;
}
.cd-anfrage input[type="text"]:focus-visible,
.cd-anfrage select:focus-visible,
.cd-anfrage textarea:focus-visible {
outline: 2px solid var(--cd-color-primary, #c8102e);
outline-offset: 2px;
}
.cd-anfrage textarea {
resize: vertical;
}
.cd-anfrage__absenden {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-space-sm, 24px);
margin: 0;
}
/*
* Derselbe Knopf wie ueberall.
*
* Bis 0.41.0 hatte er einen eigenen Satz Werte: dunkler Grund, der beim
* Ueberfahren nach Primaer wechselte. Das war ein zweiter Knopf mit
* eigener Meinung — und ausgerechnet der wichtigste der Seite sah aus
* wie keiner der anderen.
*/
.cd-anfrage__knopf {
padding: var(--cd-knopf-luft-y) var(--cd-knopf-luft-x);
border: var(--cd-knopf-rahmen) solid var(--cd-knopf-grund);
background: var(--cd-knopf-grund);
color: var(--cd-knopf-farbe);
font-family: var(--cd-knopf-schrift);
font-size: var(--cd-knopf-groesse);
font-weight: var(--cd-knopf-gewicht);
line-height: var(--cd-knopf-zeile);
cursor: pointer;
transition: opacity var(--cd-transition);
}
.cd-anfrage__knopf:hover {
opacity: 0.85;
}
.cd-anfrage__knopf:focus-visible {
outline: 2px solid var(--cd-color-primary, #c8102e);
outline-offset: 3px;
}
.cd-anfrage__oder {
font-size: var(--cd-small, 15px);
color: var(--cd-color-text-muted, #6b6b6b);
}
@media (max-width: 599px) {
.cd-anfrage {
padding: var(--cd-space-sm, 24px);
}
}
/* ------------------------------------------------------------------ *
* 34 Beitragsliste (veraltet)
*
* Bis Core 0.30.0 lag diese Gestaltung in blocks/beitragsliste/style.css.
* Darstellung gehoert ins Theme (CD-27).
* ------------------------------------------------------------------ */
.cd-liste__jahre {
display: flex;
flex-wrap: wrap;
gap: var(--cd-space-xs, 12px) var(--cd-space-sm, 24px);
margin-bottom: var(--cd-space-md, 48px);
padding-bottom: var(--cd-space-sm, 24px);
border-bottom: 1px solid var(--cd-color-border, #e0e0dd);
}
.cd-liste__jahr {
font-family: var(--cd-font-daten);
font-size: var(--cd-small, 14px);
color: var(--cd-color-text-muted, #6b6b6b);
text-decoration: none;
}
.cd-liste__jahr:hover {
color: var(--cd-color-primary, #c8102e);
}
.cd-liste__jahr--aktiv {
color: var(--cd-color-text, #1a1a1a);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 5px;
}
.cd-liste__jahr:focus-visible {
outline: 2px solid var(--cd-color-primary, #c8102e);
outline-offset: 3px;
}
.cd-liste__eintraege {
display: grid;
gap: var(--cd-space-md, 48px);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 600px) {
.cd-liste__eintraege {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.cd-liste__eintraege {
grid-template-columns: repeat(3, 1fr);
}
}
/*
* Die Kacheln erscheinen von links nach rechts versetzt. Der Rhythmus
* haengt an der Spaltenzahl und steht deshalb hier und nicht beim
* Auftauch-Effekt im Theme: Ein Dreierversatz in einem zweispaltigen
* Raster laesst die zweite Zeile rueckwaerts laufen — die dritte Kachel
* beginnt links mit der laengsten Verzoegerung, die vierte daneben
* sofort.
*
* Einspaltig gibt es keinen Versatz: Untereinander kommen die Kacheln
* ohnehin nacheinander ins Bild, und eine Wartezeit obendrauf wirkt wie
* eine langsame Seite.
*/
@media (min-width: 600px) {
.cd-js .cd-liste__eintraege > .cd-liste__eintrag:nth-child(2n + 2) {
transition-delay: 90ms;
}
}
@media (min-width: 900px) {
.cd-js .cd-liste__eintraege > .cd-liste__eintrag:nth-child(2n + 2) {
transition-delay: 0s;
}
.cd-js .cd-liste__eintraege > .cd-liste__eintrag:nth-child(3n + 2) {
transition-delay: 90ms;
}
.cd-js .cd-liste__eintraege > .cd-liste__eintrag:nth-child(3n + 3) {
transition-delay: 180ms;
}
}
@media (prefers-reduced-motion: reduce) {
.cd-js .cd-liste__eintraege > .cd-liste__eintrag {
transition-delay: 0s;
}
}
.cd-liste__eintrag {
margin: 0;
}
.cd-liste__link {
display: block;
text-decoration: none;
}
/*
* Die Rundung gehoert an den Ausschnitt, nicht ans Bild. Beim
* Ueberfahren waechst das Bild ueber den Rahmen hinaus; sitzt die
* Rundung am Bild, wird sie vom eckigen Rahmen abgeschnitten und die
* Ecken wirken wieder spitz. Am Rahmen bleibt der Ausschnitt rund,
* unabhaengig davon, wie weit das Bild darin waechst.
*/
.cd-liste__bild {
display: block;
margin-bottom: var(--cd-space-xs, 12px);
overflow: hidden;
border-radius: var(--cd-radius, 0);
}
.cd-liste__bild img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
transition: transform 300ms ease;
}
.cd-liste__link:hover .cd-liste__bild img {
transform: scale(1.03);
}
.cd-liste__titel {
display: block;
font-family: var(--cd-font-head, inherit);
font-weight: 700;
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.25;
letter-spacing: -.01em;
color: var(--cd-color-text, #1a1a1a);
}
.cd-liste__link:hover .cd-liste__titel {
color: var(--cd-color-primary, #c8102e);
}
.cd-liste__link:focus-visible {
outline: 2px solid var(--cd-color-primary, #c8102e);
outline-offset: 4px;
}
.cd-liste__datum {
margin: 6px 0 0;
font-family: var(--cd-font-daten);
font-size: var(--cd-small, 14px);
color: var(--cd-color-text-muted, #6b6b6b);
}
.cd-liste__blaettern {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-space-sm, 24px);
margin-top: var(--cd-space-md, 48px);
padding-top: var(--cd-space-sm, 24px);
border-top: 1px solid var(--cd-color-border, #e0e0dd);
}
.cd-liste__stand {
font-family: var(--cd-font-daten);
font-size: var(--cd-small, 14px);
color: var(--cd-color-text-muted, #6b6b6b);
}
/*
* Damit die Seitenangabe in der Mitte bleibt, auch wenn nur einer der
* beiden Knoepfe da ist.
*/
.cd-liste__zurueck { order: 1; }
.cd-liste__stand { order: 2; margin-inline: auto; }
.cd-liste__weiter { order: 3; }
.cd-liste__leer {
padding: var(--cd-space-sm, 24px) 0;
color: var(--cd-color-text-muted, #6b6b6b);
}
/* ---- Jahresansicht ---- */
.cd-liste__saison + .cd-liste__saison {
margin-top: var(--cd-space-lg, 80px);
}
.cd-liste__saisonjahr {
display: flex;
align-items: baseline;
gap: var(--cd-space-sm, 24px);
margin: 0 0 var(--cd-space-sm, 24px);
padding-bottom: var(--cd-space-xs, 12px);
border-bottom: 2px solid var(--cd-color-text, #1a1a1a);
font-size: clamp(28px, 4vw, 44px);
line-height: 1;
letter-spacing: -.02em;
}
.cd-liste__saisonzahl {
font-family: var(--cd-font-daten);
font-size: var(--cd-small, 14px);
font-weight: 400;
letter-spacing: .04em;
color: var(--cd-color-text-muted, #6b6b6b);
}
.cd-liste__teaser {
margin: 8px 0 0;
font-size: var(--cd-small, 15px);
line-height: 1.5;
color: var(--cd-color-text-muted, #6b6b6b);
}
/* ------------------------------------------------------------------ *
* 35 Leistungsliste (veraltet)
*
* Bis Core 0.30.0 lag diese Gestaltung in blocks/leistungen/style.css.
* Darstellung gehoert ins Theme (CD-27).
* ------------------------------------------------------------------ */
.cd-leistungen {
counter-reset: cd-leistung;
border-top: 1px solid var(--cd-color-border, #e0e0dd);
}
.cd-leistung {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--cd-space-sm, 24px);
align-items: baseline;
padding-block: var(--cd-space-sm, 24px);
border-bottom: 1px solid var(--cd-color-border, #e0e0dd);
color: inherit;
text-decoration: none;
}
.cd-leistungen:not(.cd-leistungen--ohne-nummern) .cd-leistung__nr::before {
counter-increment: cd-leistung;
content: counter(cd-leistung, decimal-leading-zero);
}
.cd-leistung__nr {
display: none;
font-size: var(--cd-small, 15px);
color: var(--cd-color-text-muted, #6b6b6b);
font-variant-numeric: tabular-nums;
}
.cd-leistung__titel {
display: block;
font-family: var(--cd-font-head, inherit);
font-weight: 600;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.1;
}
.cd-leistung__beschreibung {
display: block;
margin-top: 6px;
font-size: var(--cd-text, 1rem);
line-height: 1.5;
color: var(--cd-color-text-muted, #6b6b6b);
}
.cd-leistung__pfeil {
font-size: var(--cd-small, 15px);
color: var(--cd-color-text-muted, #6b6b6b);
white-space: nowrap;
}
a.cd-leistung:hover .cd-leistung__titel,
a.cd-leistung:focus-visible .cd-leistung__titel {
color: var(--cd-color-primary, #1a1a1a);
text-decoration: underline;
text-underline-offset: 4px;
}
a.cd-leistung:hover .cd-leistung__pfeil {
color: var(--cd-color-primary, #1a1a1a);
}
@media (min-width: 900px) {
/*
* Weniger Luft zwischen Linie und Text als zwischen den Spalten:
* Die Linie gehoert zur Zeile, die sie abschliesst. Mit dem vollen
* Abstand schwamm der Titel in der Mitte eines leeren Kastens,
* statt zu seiner Linie zu gehoeren.
*/
.cd-leistung {
grid-template-columns: auto 1fr auto;
column-gap: var(--cd-space-md, 48px);
padding-block: 32px;
}
.cd-leistungen:not(.cd-leistungen--ohne-nummern) .cd-leistung__nr {
display: block;
}
}
/* Im Editor gibt es keinen Zaehler-Kontext ausserhalb der Liste. */
.editor-styles-wrapper .cd-leistungen {
counter-reset: cd-leistung;
}
/*
* Keine Linie unter dem letzten Eintrag: Eine Trennlinie trennt zwei
* Dinge, und unter dem letzten steht nichts mehr.
*/
.cd-leistung:last-child {
border-bottom: 0;
}
/* ------------------------------------------------------------------ *
* 36 Bildplatzhalter
*
* Ueberall, wo ein Bild hinkann und noch keines steht, erscheint eine
* anthrazitfarbene Flaeche in der Groesse, die das Bild bekommen wird.
*
* Ohne sie faellt ein leeres Bild auf null Hoehe zusammen: Ein frisch
* eingefuegtes Pattern sieht dann kaputt aus, und im Editor ist nicht
* zu erkennen, wo ueberhaupt ein Bild hingehoert.
*
* Die Flaeche verschwindet von selbst, sobald ein Bild gewaehlt ist —
* die Regeln greifen nur bei einem img ohne Quelle.
* ------------------------------------------------------------------ */
/*
* Die Flaeche selbst. Sie kommt aus PHP und steht nur da, wo eine
* angemeldete Person die Seite bearbeitet — ein Besucher sieht an einer
* unbefuellten Stelle nichts.
*/
.cd-bildplatzhalter {
display: block;
width: 100%;
/*
* Das Seitenverhaeltnis stand bis Theme 0.31.0 als Inline-Style im
* Markup. Es ist ein Designwert und gehoert hierher (CD-09, CD-11).
*/
aspect-ratio: 3 / 2;
background: var(--cd-color-platzhalter);
border-radius: var(--cd-radius);
}
.cd-bildplatzhalter--quadrat {
aspect-ratio: 1 / 1;
}
/*
* Dasselbe fuer ein img ohne Quelle. Im Editor kommt das vor, auf der
* Seite nicht — dort laesst WordPress das Element ganz weg.
*/
.wp-block-image img:not([src]),
.wp-block-image img[src=""],
.wp-block-gallery img:not([src]),
.wp-block-gallery img[src=""],
.cd-sammlung__bild img:not([src]),
.cd-sammlung__bild img[src=""] {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
background: var(--cd-color-platzhalter);
border-radius: var(--cd-radius);
}
/*
* Der Knopf, mit dem der Kunde ein Bild waehlt, sitzt auf der Flaeche
* statt darueber. So steht im Editor an derselben Stelle dasselbe
* Rechteck wie spaeter auf der Seite.
*/
.editor-styles-wrapper .cd-sammlung__bildwahl.components-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
background: var(--cd-color-platzhalter);
border-radius: var(--cd-radius);
color: #fff;
white-space: normal;
}
.editor-styles-wrapper .cd-sammlung__bildwahl.components-button:hover {
background: var(--cd-color-platzhalter);
color: #fff;
opacity: .85;
}
/*
* In der Zeilenform ist das Bild klein. Die Flaeche folgt ihm, sonst
* risse der Knopf die Zeile auseinander.
*/
.cd-bauform-zeilen .cd-sammlung__bildwahl.components-button,
.is-style-cd-zeilen .cd-sammlung__bildwahl.components-button {
aspect-ratio: 1;
max-width: 96px;
}
/* ------------------------------------------------------------------ *
* 37 Ziffernwalze
*
* Die Gestaltung zum Skript in oberflaeche.js. Eine Stelle ist ein
* Fenster von genau einer Zeilenhoehe; die Leiste darin faehrt auf die
* richtige Ziffer.
*
* Ohne JavaScript entsteht keine Walze — dann steht die Zahl als Text
* da, und diese Regeln greifen ins Leere (CD-29).
* ------------------------------------------------------------------ */
.cd-walze {
display: inline-block;
height: 1em;
overflow: clip;
vertical-align: bottom;
}
.cd-walze__band {
display: block;
line-height: 1;
transform: translateY(0);
}
/*
* Der Uebergang steht erst da, wenn das Skript ihn einschaltet. Ohne
* diese Trennung faehrt die Leiste beim Aufbau schon einmal los.
*/
.cd-walze--laeuft .cd-walze__band {
transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
.cd-walze--laeuft .cd-walze__band { transition: none; }
}
/* ------------------------------------------------------------------ *
* 38 Logoband
*
* Ein durchlaufendes Band ohne eine Zeile JavaScript und ohne Library.
*
* Die Spur enthaelt die Logos zweimal und faehrt um genau die halbe
* Spurbreite nach links. Danach steht das Bild wieder am Anfang — der
* Sprung ist unsichtbar.
*
* Damit das aufgeht, muss ein Satz exakt die halbe Spur sein. Deshalb
* traegt der Satz seinen Abstand nach rechts selbst (padding-right) und
* die Spur hat kein gap: Sonst waere die halbe Spur um einen halben
* Abstand daneben, und das Band ruckte bei jedem Durchlauf.
* ------------------------------------------------------------------ */
.cd-laufband {
display: block;
overflow: clip;
margin-block: var(--cd-space-lg);
/*
* An den Raendern laufen die Logos aus, statt abgeschnitten zu
* werden. Eine harte Kante liest sich als Fehler, ein Auslaufen als
* Bewegung, die weitergeht.
*/
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cd-laufband__spur {
display: flex;
width: max-content;
animation: cd-laufband var(--cd-laufband-dauer) linear infinite;
}
@keyframes cd-laufband {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/*
* Ein Satz ist mindestens so breit wie das Fenster. Das ist die
* Garantie gegen die Luecke — und zwar unabhaengig davon, wie viele
* Logos jemand einsetzt. Eine Regel wie "mindestens zwoelf Logos"
* waere geraten: Drei schmale Logos auf einem 1920er Bildschirm
* ergaeben trotzdem eine Luecke.
*
* Normalerweise greift diese Garantie gar nicht, weil die Ausgabe den
* Satz vorher schon breit genug wiederholt (siehe
* sammlung-ausgabe.php). Sie ist das Netz fuer den Bildschirm, mit dem
* niemand gerechnet hat. Bleibt doch Platz uebrig, wachsen alle Slots
* gleichmaessig mit — der Rhythmus bleibt regelmaessig, nur weiter.
*/
.cd-laufband__satz {
display: flex;
align-items: center;
gap: var(--cd-laufband-abstand);
padding-right: var(--cd-laufband-abstand);
min-width: 100vw;
}
/*
* Der Slot ist das Raster. Er ist bei jedem Eintrag gleich breit und
* gleich hoch, egal was fuer ein Logo darin steht — auch bei einem
* fehlenden Bild bleibt die Zelle stehen. place-items zentriert in
* beiden Achsen, ohne dass das Logo selbst etwas dazu beitragen muss.
*/
.cd-laufband__logo {
display: grid;
place-items: center;
flex: 1 0 var(--cd-laufband-slot-breite);
width: var(--cd-laufband-slot-breite);
height: var(--cd-laufband-slot-hoehe);
}
/*
* Logos kommen als breite Wortmarke und als quadratisches Zeichen. Die
* Hoehe wird am Token gedeckelt, nicht am Slot: So stehen Wortmarke
* und Zeichen auf derselben optischen Hoehe, statt dass das eine den
* Slot ausfuellt und das andere als flacher Streifen darin liegt.
* Das war der haeufigste Fehler solcher Baender ueberhaupt.
*/
.cd-laufband__logo img {
max-width: 100%;
max-height: var(--cd-laufband-logo-hoehe);
width: auto;
height: auto;
object-fit: contain;
}
/*
* Auf dem Telefon waere ein 200er Slot die halbe Bildschirmbreite —
* dann steht kaum mehr als ein Logo im Bild und das Band wirkt nicht
* wie ein Band. Das Raster wird darum kleiner, nicht das Verhaeltnis:
* Slotbreite zu Logohoehe bleibt bei knapp 3.8 zu 1, also sieht jedes
* Logo relativ gleich aus wie am grossen Bildschirm.
*/
@media (max-width: 700px) {
.cd-laufband {
--cd-laufband-slot-breite: 150px;
--cd-laufband-slot-hoehe: 56px;
--cd-laufband-logo-hoehe: 40px;
}
}
/* Ein verlinktes Logo hebt sich beim Ueberfahren leicht heraus. */
a.cd-laufband__logo img {
opacity: .68;
transition: opacity var(--cd-transition);
}
a.cd-laufband__logo:hover img,
a.cd-laufband__logo:focus-visible img {
opacity: 1;
}
/*
* Wer Bewegung abbestellt hat, bekommt nicht ein stehendes Band mit
* abgeschnittenem Inhalt, sondern alle Logos: Die technischen Kopien
* verschwinden, der Satz bricht um, das Band wird zu einer Reihe.
*/
@media (prefers-reduced-motion: reduce) {
.cd-laufband {
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.cd-laufband__spur {
width: auto;
animation: none;
}
/*
* Beides weg: der Kopiensatz und die Wiederholungen innerhalb des
* ersten Satzes. Ohne Bewegung soll jedes Logo genau einmal
* dastehen — sonst haette der Kunde seine Partner dreimal
* untereinander.
*/
.cd-laufband__satz[aria-hidden],
.cd-laufband__logo[aria-hidden] {
display: none;
}
.cd-laufband__satz {
flex-wrap: wrap;
justify-content: center;
min-width: 0;
padding-right: 0;
gap: var(--cd-space-md) var(--cd-laufband-abstand);
}
.cd-laufband__logo {
flex: 0 0 var(--cd-laufband-slot-breite);
}
}
/*
* Im Editor steht das Band still und zeigt eine Reihe. Die Kopien sind
* ein Darstellungsmittel und kein Inhalt; der Redakteur soll seine
* Logos in der Reihenfolge sehen, in der er sie sortiert hat.
*
* Die Hoehe bleibt offen: Unter jedem Logo steht der Knopf zum
* Austauschen, und der braucht Platz. Begrenzt wird das Bild, nicht der
* Platz darum.
*/
.editor-styles-wrapper .cd-bauform-laufband {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--cd-space-md) var(--cd-laufband-abstand);
}
.editor-styles-wrapper .cd-bauform-laufband > .cd-sammlung__element {
flex: 0 0 auto;
width: var(--cd-laufband-slot-breite);
gap: 4px;
}
/*
* Der Knopf zum Austauschen steht unter dem Logo, nicht daneben —
* sonst zieht er den Platz in die Breite und die Reihe auseinander.
*/
.editor-styles-wrapper .cd-bauform-laufband .cd-sammlung__bild {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 0;
}
.editor-styles-wrapper .cd-bauform-laufband .cd-sammlung__bild img {
width: auto;
height: auto;
max-width: 100%;
max-height: var(--cd-laufband-logo-hoehe);
object-fit: contain;
border-radius: 0;
}
.editor-styles-wrapper .cd-bauform-laufband .cd-sammlung__bildwahl.components-button {
aspect-ratio: auto;
height: var(--cd-laufband-logo-hoehe);
font-size: 11px;
}
.editor-styles-wrapper .cd-bauform-laufband .components-button.is-link {
height: auto;
font-size: 11px;
}