/* cd-buendel 42a285ee193e4350a12cd75da9ddd7247ed163bc — erzeugt von Build/css-buendel.js, NICHT von Hand bearbeiten */
/* schriften.css */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-800-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/archivo-800-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../Fonts/ibmplexmono-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../Fonts/ibmplexmono-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../Fonts/ibmplexmono-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../Fonts/ibmplexmono-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../Fonts/ibmplexmono-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../Fonts/ibmplexmono-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/ibmplexsans-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/ibmplexsans-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/ibmplexsans-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/ibmplexsans-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/ibmplexsans-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url('../Fonts/ibmplexsans-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo Ersatz';
font-weight: 400;
font-style: normal;
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 98.5%;
ascent-override: 89.14%;
descent-override: 21.32%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Archivo Ersatz';
font-weight: 500;
font-style: normal;
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 100.22%;
ascent-override: 87.61%;
descent-override: 20.95%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Archivo Ersatz';
font-weight: 600;
font-style: normal;
src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Liberation Sans Bold');
size-adjust: 95.76%;
ascent-override: 91.69%;
descent-override: 21.93%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Archivo Ersatz';
font-weight: 700;
font-style: normal;
src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Liberation Sans Bold');
size-adjust: 98.81%;
ascent-override: 88.86%;
descent-override: 21.25%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Archivo Ersatz';
font-weight: 800;
font-style: normal;
src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Liberation Sans Bold');
size-adjust: 103.39%;
ascent-override: 84.92%;
descent-override: 20.31%;
line-gap-override: 0%;
}
@font-face {
font-family: 'IBM Plex Sans Ersatz';
font-weight: 400;
font-style: normal;
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 99.56%;
ascent-override: 102.95%;
descent-override: 27.62%;
line-gap-override: 0%;
}
@font-face {
font-family: 'IBM Plex Sans Ersatz';
font-weight: 500;
font-style: normal;
src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
size-adjust: 101.7%;
ascent-override: 100.79%;
descent-override: 27.04%;
line-gap-override: 0%;
}
@font-face {
font-family: 'IBM Plex Sans Ersatz';
font-weight: 600;
font-style: normal;
src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Liberation Sans Bold');
size-adjust: 96.65%;
ascent-override: 106.05%;
descent-override: 28.45%;
line-gap-override: 0%;
}
@font-face {
font-family: 'IBM Plex Mono Ersatz';
font-weight: 400 600;
font-style: normal;
src: local('Courier New'), local('CourierNewPSMT'), local('Liberation Mono'), local('DejaVu Sans Mono');
size-adjust: 99.98%;
ascent-override: 102.52%;
descent-override: 27.5%;
line-gap-override: 0%;
}
/* tokens.css */
:root {
--cd-rot: #C41118;
--cd-rot-tief: #9E0C12;
--cd-rot-hell: #E01A22;
--cd-rot-auf-dunkel: #E1666B;
--cd-rot-auf-karte-dunkel: #E97A7E;
--cd-tinte: #0D1A21;
--cd-text-2: #4E626C;
--cd-text-3: #5C6F79;
--cd-text-schwach: #7E97A2;
--cd-text-auf-dunkel: #A9BEC8;
--cd-text-auf-dunkel-2: #93A9B4;
--cd-weiss: #ffffff;
--cd-flaeche-1: #F7F9FA;
--cd-flaeche-2: #F2F5F7;
--cd-flaeche-3: #E9EEF1;
--cd-dunkel: #16272F;
--cd-dunkel-2: #1F343C;
--cd-dunkel-3: #2C444D;
--cd-linie: #DDE4E8;
--cd-linie-2: #E1E7EA;
--cd-linie-3: #D7E0E4;
--cd-linie-auf-dunkel: #5C7684;
--cd-schrift-display: 'Archivo', 'Archivo Ersatz', Arial, sans-serif;
--cd-schrift-text: 'IBM Plex Sans', 'IBM Plex Sans Ersatz', Arial, sans-serif;
--cd-schrift-mono: 'IBM Plex Mono', 'IBM Plex Mono Ersatz', 'Courier New', monospace;
--cd-gr-mikro: 11px;
--cd-gr-klein: 13px;
--cd-gr-text: 16px;
--cd-gr-gross: 18px;
--cd-gr-h4: 20px;
--cd-gr-h3: 24px;
--cd-gr-h2: clamp(28px, 1.6rem + 1.4vw, 44px);
--cd-gr-h1: clamp(34px, 1.9rem + 2.4vw, 60px);
--cd-gr-kennzahl: clamp(27px, 1.05rem + 1.2vw, 38px);
--cd-zeile-eng: 1.15;
--cd-zeile-kopf: 1.22;
--cd-zeile-text: 1.62;
--cd-inhalt: 1280px;
--cd-rinne: 40px;
--cd-portalschiene: 260px;
--cd-portalschiene-fuge: 40px;
--cd-schienen-platz: 0px;
--cd-schiene: 170px;
--cd-a1: 4px;
--cd-a2: 8px;
--cd-a3: 12px;
--cd-a4: 16px;
--cd-a5: 24px;
--cd-a6: 32px;
--cd-a7: 48px;
--cd-a8: 64px;
--cd-a9: 96px;
--cd-bahn: clamp(64px, 8.2vw, 118px);
--cd-bahn-fuss: 1.05;
--cd-r-feld: 2px;
--cd-r-knopf: 3px;
--cd-r-karte: 10px;
--cd-r-gross: 14px;
--cd-schatten-mega: 0 34px 64px -38px rgba(13, 26, 33, .6);
--cd-schatten-karte: 0 12px 28px -20px rgba(13, 26, 33, .45);
--cd-kopf-oben: 38px;
--cd-kopf-haupt: 84px;
--cd-kopf-gesamt: calc(var(--cd-kopf-oben) + var(--cd-kopf-haupt));
--cd-e-schiene: 140;
--cd-e-portalschiene: 120;
--cd-e-kopf: 150;
--cd-e-mega: 160;
--cd-e-mobilmenue: 200;
--cd-e-dialog: 300;
--cd-zeit: .2s;
--cd-kurve: cubic-bezier(.2, .7, .2, 1);
}
@media (hover: none) and (pointer: coarse) {
:root {
--cd-zielgroesse: 44px;
}
}
@media (hover: hover) and (pointer: fine) {
:root {
--cd-zielgroesse: 24px;
}
}
/* basis.css */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--cd-kopf-gesamt) + 16px);
}
@media (max-width: 1100px) {
html {
--cd-mobilleiste-hoehe: 58px;
scroll-padding-top: 96px;
scroll-padding-block-end: calc(var(--cd-mobilleiste-hoehe) + 16px);
}
}
body {
margin: 0;
background: var(--cd-weiss);
color: var(--cd-tinte);
font-family: var(--cd-schrift-text);
font-size: var(--cd-gr-text);
line-height: var(--cd-zeile-text);
-webkit-font-smoothing: antialiased;
text-wrap: pretty;
min-height: 100dvh;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.cd-inhalt :where(ul:not([class]), ol:not([class])) {
margin-block: var(--cd-a4);
padding-inline-start: 1.4em;
}
.cd-inhalt :where(ul:not([class])) { list-style: disc; }
.cd-inhalt :where(ol:not([class])) { list-style: decimal; }
.cd-inhalt :where(ul:not([class]), ol:not([class])) > li::marker {
color: var(--cd-rot);
font-weight: 700;
}
.cd-inhalt :where(nav ul:not([class]), nav ol:not([class])) {
margin: 0;
padding: 0;
list-style: none;
}
h1, h2, h3, h4 {
font-family: var(--cd-schrift-display);
text-wrap: balance;
}
h1 { font-size: var(--cd-gr-h1); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; }
h2 { font-size: var(--cd-gr-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.028em; }
h3 { font-size: var(--cd-gr-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }
h4 { font-size: var(--cd-gr-h4); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }
p { max-width: 68ch; }
a { color: var(--cd-rot); text-decoration: none; }
a:hover { color: var(--cd-rot-tief); }
.cd-inhalt :where(p, li, dd, blockquote, figcaption) a[href] {
text-decoration: underline;
text-underline-offset: .18em;
}
.cd-inhalt :where(p, li, dd) a.cd-knopf,
.cd-inhalt :where(p, li, dd) a.cd-karte,
.cd-inhalt :where(p, li, dd) a.cd-chip,
.cd-inhalt :where(p, li) a[class*="__knopf"],
.cd-inhalt :where(p, li) a[class*="__karte"],
.cd-inhalt :where(p, li) a[class*="__kachel"],
.cd-inhalt :where(p, li) a[class*="__zeile"] {
text-decoration: none;
}
.cd-inhalt .cd-kundenmenue a[href] {
text-decoration: none;
}
.cd-inhalt :where(.cd-tickets, .cd-portal, .cd-anfragen, .cd-mitteilungen) a[href] {
text-decoration: none;
}
:where(nav, .cd-kopf, .cd-fuss, .cd-mobilmenue, .cd-mega, .cd-kontaktschiene) a[href] {
text-decoration: none;
}
img, svg, video { max-width: 100%; height: auto; }
::selection { background: var(--cd-rot); color: #fff; }
button { font: inherit; color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--cd-rot);
outline-offset: 2px;
border-radius: 1px;
}
.cd-auf-dunkel :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.cd-fuss :where(a, button, [tabindex]):focus-visible {
outline-color: #fff;
}
a[href], button, [role="button"], summary,
input[type="checkbox"], input[type="radio"] {
min-block-size: var(--cd-zielgroesse, 24px);
min-inline-size: var(--cd-zielgroesse, 24px);
}
p a[href], li a[href], span a[href] {
min-block-size: 0;
min-inline-size: 0;
}
label input[type="checkbox"]:not(.cd-nurlesen),
label input[type="radio"]:not(.cd-nurlesen) {
min-block-size: 0;
min-inline-size: 0;
inline-size: 18px;
block-size: 18px;
}
label:has(> input[type="checkbox"]:not(.cd-nurlesen)),
label:has(> input[type="radio"]:not(.cd-nurlesen)) {
min-block-size: var(--cd-zielgroesse, 24px);
}
input[type="checkbox"]:not(.cd-nurlesen):has(+ label),
input[type="radio"]:not(.cd-nurlesen):has(+ label) {
min-block-size: 0;
min-inline-size: 0;
inline-size: 18px;
block-size: 18px;
}
input[type="checkbox"]:not(.cd-nurlesen) + label,
input[type="radio"]:not(.cd-nurlesen) + label {
display: inline-flex;
align-items: center;
min-block-size: var(--cd-zielgroesse, 24px);
}
.cd-sprungmarke {
position: absolute;
inset-inline-start: var(--cd-a4);
inset-block-start: calc(var(--cd-a4) * -6);
z-index: var(--cd-e-dialog);
padding: var(--cd-a3) var(--cd-a5);
background: var(--cd-rot);
color: #fff;
font-weight: 600;
border-radius: 0 0 var(--cd-r-knopf) var(--cd-r-knopf);
transition: inset-block-start var(--cd-zeit) var(--cd-kurve);
}
.cd-sprungmarke:focus {
inset-block-start: 0;
color: #fff;
}
@supports selector(:focus-visible) {
.cd-sprungmarke:focus:not(:focus-visible) {
inset-block-start: calc(var(--cd-a4) * -6);
}
}
.cd-inhalt:focus { outline: none; }
.cd-nurlesen {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
dialog {
border: 0;
padding: 0;
color: inherit;
background: transparent;
}
dialog::backdrop {
background: rgb(13 26 33 / .62);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
animation-timeline: auto !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* layout.css */
.cd-mitte {
inline-size: 100%;
max-inline-size: var(--cd-inhalt);
margin-inline: auto;
padding-inline: var(--cd-rinne);
}
.cd-kopf {
position: sticky;
inset-block-start: 0;
z-index: var(--cd-e-kopf);
background: var(--cd-weiss);
}
.cd-oberleiste {
background: var(--cd-tinte);
color: var(--cd-text-auf-dunkel-2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
line-height: 1.2;
text-transform: uppercase;
}
.cd-oberleiste__inhalt {
block-size: var(--cd-kopf-oben);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a5);
}
.cd-oberleiste__links,
.cd-oberleiste__rechts {
display: flex;
align-items: center;
gap: var(--cd-a5);
}
.cd-oberleiste__link {
display: inline-flex;
align-items: center;
gap: var(--cd-a2);
color: var(--cd-text-auf-dunkel-2);
transition: color var(--cd-zeit) ease;
}
.cd-oberleiste__link:hover { color: var(--cd-weiss); }
.cd-oberleiste__link--hell { color: var(--cd-weiss); }
.cd-notfall {
display: inline-flex;
align-items: center;
gap: var(--cd-a2);
color: var(--cd-text-auf-dunkel);
letter-spacing: .1em;
transition: color var(--cd-zeit) ease;
}
.cd-notfall:hover { color: var(--cd-weiss); }
.cd-notfall__punkt {
position: relative;
flex: 0 0 auto;
inline-size: 7px;
block-size: 7px;
}
.cd-notfall__punkt::before,
.cd-notfall__punkt::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--cd-rot-hell);
}
.cd-notfall__punkt::after { animation: cdPuls 1.8s ease-out 2; }
@keyframes cdPuls {
0%, 100% { transform: scale(1);   opacity: 1; }
50%      { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.cd-notfall__punkt::after { animation: none; opacity: 0; }
}
.cd-hauptzeile {
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-hauptzeile__inhalt {
block-size: var(--cd-kopf-haupt);
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.cd-marke { display: flex; align-items: center; flex: 0 0 auto; }
.cd-marke__bild { display: block; block-size: 42px; inline-size: auto; }
.cd-hauptnav { flex: 0 1 auto; }
.cd-hauptnav__liste {
display: flex;
align-items: center;
gap: 26px;
}
.cd-hauptnav__link {
display: inline-flex;
align-items: center;
gap: 7px;
padding-block: 6px;
line-height: 1.25;
color: var(--cd-dunkel);
font-size: 15px;
font-weight: 500;
white-space: nowrap;
border-block-end: 2px solid transparent;
transition: color var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-hauptnav__link:hover,
.cd-hauptnav__link[aria-expanded="true"] {
color: var(--cd-rot);
border-block-end-color: var(--cd-rot);
}
.cd-hauptnav__link[aria-current="page"] { color: var(--cd-rot); }
[data-navmerkmal="linie"] .cd-hauptnav__link[aria-current="page"],
body:not([data-navmerkmal]) .cd-hauptnav__link[aria-current="page"] {
border-block-end-color: var(--cd-rot);
}
[data-navmerkmal="fett"] .cd-hauptnav__link[aria-current="page"] {
font-weight: 700;
}
[data-navmerkmal="punkt"] .cd-hauptnav__link[aria-current="page"]::before {
content: "";
inline-size: 5px;
block-size: 5px;
margin-inline-end: 7px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
}
[data-navmerkmal="flaeche"] .cd-hauptnav__link[aria-current="page"] {
font-weight: 600;
background: color-mix(in srgb, var(--cd-rot) 8%, transparent);
padding-inline: 10px;
border-radius: var(--cd-r-feld);
}
[data-navmerkmal="vollflaeche"] .cd-hauptnav__link[aria-current="page"] {
font-weight: 600;
background: var(--cd-rot);
color: var(--cd-weiss);
padding-inline: 12px;
border-radius: var(--cd-r-feld);
border-block-end-color: transparent;
}
[data-navmerkmal="vollflaeche"] .cd-hauptnav__link[aria-current="page"]:hover,
[data-navmerkmal="vollflaeche"] .cd-hauptnav__link[aria-current="page"][aria-expanded="true"] {
background: var(--cd-rot-tief);
color: var(--cd-weiss);
border-block-end-color: transparent;
}
[data-navmerkmal="vollflaeche"] .cd-hauptnav__link[aria-current="page"]:focus-visible {
outline: 3px solid var(--cd-tinte);
outline-offset: 2px;
}
.cd-hauptnav__pfeil {
inline-size: 0;
block-size: 0;
border-inline: 4px solid transparent;
border-block-start: 5px solid currentColor;
opacity: .55;
transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-hauptnav__link[aria-expanded="true"] .cd-hauptnav__pfeil {
transform: rotate(180deg);
opacity: 1;
}
.cd-mega {
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
z-index: var(--cd-e-mega);
background: var(--cd-weiss);
border-block: 1px solid var(--cd-linie-2);
box-shadow: var(--cd-schatten-mega);
animation: cdMegaEin .2s var(--cd-kurve);
}
.cd-kopf { position: sticky; }
.cd-hauptzeile { position: relative; }
@keyframes cdMegaEin {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: none; }
}
.cd-mega__inhalt {
display: flex;
align-items: stretch;
gap: var(--cd-a6);
padding-block: 42px 40px;
}
.cd-mega__spalte {
flex: 0 0 232px;
min-inline-size: 0;
}
.cd-mega__spalteTitel {
font-family: var(--cd-schrift-mono);
font-size: 10.5px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--cd-rot);
padding-block-end: 12px;
border-block-end: 1px solid var(--cd-linie-2);
margin-block-end: 16px;
}
.cd-mega__liste { display: grid; gap: 2px; }
.cd-mega__link {
display: block;
padding: 9px 10px 9px 0;
border-radius: var(--cd-r-feld);
color: var(--cd-dunkel);
font-size: 15px;
line-height: 1.25;
transition: color var(--cd-zeit) ease, background var(--cd-zeit) ease,
padding-inline-start var(--cd-zeit) var(--cd-kurve);
}
.cd-mega__link:hover {
color: var(--cd-rot);
background: var(--cd-flaeche-1);
padding-inline-start: 10px;
}
.cd-mega__neu {
margin-inline-start: var(--cd-a2);
padding: 1px 6px;
background: var(--cd-rot);
color: var(--cd-weiss);
border-radius: var(--cd-r-feld);
font-family: var(--cd-schrift-mono);
font-size: 9.5px;
letter-spacing: .1em;
text-transform: uppercase;
vertical-align: 2px;
}
.cd-mega__kachel {
flex: 0 0 300px;
margin-inline-start: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 26px 24px;
background: var(--cd-tinte);
color: var(--cd-weiss);
}
.cd-mega__kachelKicker {
font-family: var(--cd-schrift-mono);
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cd-text-auf-dunkel-2);
margin-block-end: 12px;
}
.cd-mega__kachelText {
font-size: 15px;
line-height: 1.55;
color: var(--cd-text-auf-dunkel);
max-inline-size: none;
}
.cd-mega__kachelKnopf { margin-block-start: 22px; justify-content: center; }
.cd-menueknopf { display: none; }
@media (prefers-reduced-motion: reduce) {
.cd-menueknopf__balken,
.cd-menueknopf__balken::before,
.cd-menueknopf__balken::after { transition: none; }
}
.cd-kopf__notfall { display: none; }
.cd-kopf__notfall:focus-visible { outline-color: var(--cd-tinte); }
.cd-mobilmenue {
position: fixed;
inset: 0;
z-index: var(--cd-e-mobilmenue);
--cd-mm-oben: 0;
--cd-mm-unten: 0;
--cd-mm-start: auto;
--cd-mm-ende: 0;
--cd-mm-breite: min(420px, 100%);
--cd-mm-hoehe: auto;
--cd-mm-max-hoehe: none;
--cd-mm-radius: 0;
--cd-mm-schatten: none;
--cd-mm-grund: var(--cd-weiss);
--cd-mm-text: var(--cd-dunkel);
--cd-mm-text-2: var(--cd-text-2);
--cd-mm-leise: var(--cd-text-3);
--cd-mm-linie: var(--cd-linie-2);
--cd-mm-rahmen: var(--cd-linie);
--cd-mm-ring: var(--cd-rot);
--cd-mm-schleier: rgb(13 26 33 / .55);
--cd-mm-zu: none;
--cd-mm-feld-deck: 1;
--cd-mm-schleier-deck: 1;
}
.cd-mobilmenue :focus-visible { outline-color: var(--cd-mm-ring); }
.cd-mobilmenue__liste a[href],
.cd-mobilmenue__unter a[href] {
min-block-size: var(--cd-zielgroesse, 24px);
}
.cd-mobilmenue__schleier {
position: absolute;
inset: 0;
background: var(--cd-mm-schleier);
}
.cd-mobilmenue__feld {
position: absolute;
inset-block: var(--cd-mm-oben) var(--cd-mm-unten);
inset-inline: var(--cd-mm-start) var(--cd-mm-ende);
inline-size: var(--cd-mm-breite);
block-size: var(--cd-mm-hoehe);
max-block-size: var(--cd-mm-max-hoehe);
border-radius: var(--cd-mm-radius);
box-shadow: var(--cd-mm-schatten);
display: flex;
flex-direction: column;
background: var(--cd-mm-grund);
overflow-y: auto;
overscroll-behavior: contain;
}
.cd-mobilmenue__kopf {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--cd-a4) var(--cd-a5);
border-block-end: 1px solid var(--cd-mm-linie);
}
.cd-mobilmenue__titel {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-mm-leise);
}
.cd-mobilmenue__zu {
color: var(--cd-mm-text);
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
font-size: 20px;
cursor: pointer;
}
.cd-mobilmenue__block { padding: var(--cd-a5) var(--cd-a5) 0; }
.cd-mobilmenue__blockTitel {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-mm-leise);
margin-block-end: var(--cd-a3);
}
.cd-mobilmenue__zeile {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a3);
}
.cd-mobilmenue__link {
display: block;
flex: 1 1 auto;
padding-block: var(--cd-a3);
color: var(--cd-mm-text);
font-size: var(--cd-gr-gross);
font-weight: 500;
}
.cd-mobilmenue__block--start {
padding-block-end: var(--cd-a4);
border-block-end: 1px solid var(--cd-mm-linie);
}
.cd-mobilmenue__link--start {
display: flex;
align-items: center;
gap: var(--cd-a3);
}
.cd-mobilmenue__link--start .cd-symbol {
flex: 0 0 auto;
inline-size: 20px;
block-size: 20px;
color: var(--cd-rot);
}
.cd-mobilmenue__auf {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
background: none;
border: 1px solid var(--cd-mm-rahmen);
border-radius: var(--cd-r-feld);
cursor: pointer;
}
.cd-mobilmenue__aufPfeil {
inline-size: 0;
block-size: 0;
border-inline: 5px solid transparent;
border-block-start: 6px solid currentColor;
transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-mobilmenue__auf[aria-expanded="true"] .cd-mobilmenue__aufPfeil {
transform: rotate(180deg);
}
.cd-mobilmenue__unter {
padding-inline-start: var(--cd-a4);
padding-block-end: var(--cd-a3);
border-inline-start: 2px solid var(--cd-mm-linie);
margin-inline-start: var(--cd-a1);
}
.cd-mobilmenue__unter a {
display: block;
padding-block: 9px;
color: var(--cd-mm-text-2);
font-size: var(--cd-gr-text);
}
.cd-mobilmenue__unter a[aria-current="page"] { color: var(--cd-rot); font-weight: 600; }
.cd-mobilmenue__fuss {
margin-block-start: auto;
padding: var(--cd-a5);
border-block-start: 1px solid var(--cd-mm-linie);
}
.cd-mobilmenue__cta { inline-size: 100%; justify-content: center; }
.cd-mobilmenue__zeiten {
margin-block-start: var(--cd-a2);
text-align: center;
font-size: var(--cd-gr-klein);
color: var(--cd-mm-leise);
}
.cd-abschnittsschiene { display: none; }
.cd-kontaktschiene {
position: fixed;
inset-inline-end: 0;
inset-block-start: 0;
block-size: 100vh;
display: flex;
align-items: center;
z-index: var(--cd-e-schiene);
pointer-events: none;
}
.cd-kontaktschiene__leiste {
inline-size: 64px;
display: flex;
flex-direction: column;
box-shadow: -14px 0 40px -26px rgb(13 26 33 / .7);
pointer-events: auto;
}
.cd-kontaktschiene__knopf {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px 0;
border: 0;
writing-mode: vertical-rl;
transform: rotate(180deg);
color: var(--cd-weiss);
font-size: 11.5px;
font-family: var(--cd-schrift-mono);
letter-spacing: .12em;
cursor: pointer;
transition: background var(--cd-zeit) ease;
}
.cd-kontaktschiene__knopf--rot {
background: var(--cd-rot);
padding: 22px 0;
}
.cd-kontaktschiene__knopf--rot:hover { background: var(--cd-rot-tief); color: var(--cd-weiss); }
.cd-kontaktschiene__knopf--tinte { background: var(--cd-tinte); }
.cd-kontaktschiene__knopf--tinte:hover { background: var(--cd-dunkel); color: var(--cd-weiss); }
.cd-kontaktschiene__knopf--dunkel { background: var(--cd-dunkel); }
.cd-kontaktschiene__knopf--dunkel:hover { background: var(--cd-rot); color: var(--cd-weiss); }
.cd-kontaktschiene__punkt {
flex: 0 0 auto;
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: var(--cd-weiss);
}
.cd-kontaktschiene__oben {
display: flex;
align-items: center;
justify-content: center;
block-size: 52px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-3);
border-inline-end: 0;
color: var(--cd-tinte);
cursor: pointer;
transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-kontaktschiene__oben:hover { background: var(--cd-rot); color: var(--cd-weiss); }
.cd-mobilleiste { display: none; }
.cd-inhalt { display: block; }
.cd-fuss {
padding-block-start: 78px;
background: var(--cd-tinte);
color: var(--cd-text-auf-dunkel-2);
}
.cd-fuss a { color: var(--cd-text-auf-dunkel); }
.cd-fuss a:hover { color: var(--cd-weiss); }
.cd-fuss__oben {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(0, 1fr));
gap: var(--cd-a7) var(--cd-a6);
padding-block-end: var(--cd-a8);
}
.cd-fuss__logo {
display: block;
block-size: 42px;
inline-size: auto;
margin-block-end: 26px;
}
.cd-fuss__adresse { font-style: normal; line-height: 1.7; }
.cd-fuss__zusatz { display: block; }
.cd-fuss__wege {
display: grid;
gap: 6px;
margin-block-start: var(--cd-a5);
}
.cd-fuss__weg {
display: flex;
align-items: center;
gap: 12px;
min-block-size: 26px;
}
.cd-fuss__weg a {
display: inline-flex;
align-items: center;
min-block-size: 24px;
}
.cd-fuss__wegzeichen {
flex: 0 0 auto;
display: inline-flex;
color: var(--cd-text-schwach);
}
.cd-fuss__wegzeichen .cd-symbol {
inline-size: 18px;
block-size: 18px;
}
.cd-fuss__weg--stark .cd-fuss__wegzeichen { color: var(--cd-rot-auf-dunkel); }
.cd-fuss__weg--stark a {
font-size: var(--cd-gr-gross);
font-weight: 600;
color: var(--cd-weiss);
}
.cd-fuss__zeichen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a3);
margin-block-start: calc(var(--cd-a6) + var(--cd-a2));
}
.cd-fuss__zeichen img {
display: block;
block-size: 46px;
inline-size: auto;
opacity: .85;
}
.cd-fuss__stapel {
display: grid;
align-content: start;
gap: var(--cd-a6);
}
.cd-fuss__titel {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-schwach);
margin-block-end: var(--cd-a4);
}
.cd-fuss__liste { display: grid; gap: 5px; }
.cd-fuss__liste a {
display: inline-flex;
align-items: center;
min-block-size: 24px;
font-size: var(--cd-gr-klein);
}
.cd-fuss__unten {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cd-a4);
padding-block: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-auf-dunkel);
font-size: var(--cd-gr-klein);
}
.cd-fuss__recht ul { display: flex; flex-wrap: wrap; gap: var(--cd-a3) var(--cd-a5); }
.cd-fuss__recht li a[href] {
display: inline-flex;
align-items: center;
min-block-size: 24px;
}
.cd-fuss__cookieknopf {
display: inline-flex;
align-items: center;
min-block-size: 24px;
background: none;
border: 0;
padding: 0;
color: var(--cd-text-auf-dunkel);
font-size: inherit;
text-decoration: underline;
text-underline-offset: .18em;
cursor: pointer;
}
.cd-fuss__cookieknopf:hover { color: var(--cd-weiss); }
@media (min-width: 1620px) {
.cd-abschnittsschiene {
position: fixed;
inset-inline-start: 0;
inset-block-start: 0;
block-size: 100vh;
inline-size: var(--cd-schiene);
display: flex;
align-items: center;
z-index: var(--cd-e-schiene);
pointer-events: none;
}
.cd-abschnittsschiene__liste {
display: grid;
gap: 1px;
margin-inline-start: 30px;
padding-inline-start: 18px;
border-inline-start: 1px solid var(--cd-linie);
pointer-events: auto;
}
.cd-abschnittsschiene__link {
display: flex;
align-items: center;
gap: 10px;
padding-block: 6px;
color: var(--cd-text-2);
font-size: 12.5px;
transition: color var(--cd-zeit) ease;
}
.cd-abschnittsschiene__link:hover { color: var(--cd-rot); }
.cd-abschnittsschiene__nr {
flex: 0 0 auto;
inline-size: 16px;
font-family: var(--cd-schrift-mono);
font-size: 10px;
letter-spacing: .08em;
color: var(--cd-text-2);
}
.cd-abschnittsschiene--dunkel .cd-abschnittsschiene__link { color: var(--cd-text-auf-dunkel); }
.cd-abschnittsschiene--dunkel .cd-abschnittsschiene__nr { color: var(--cd-text-auf-dunkel-2); }
.cd-abschnittsschiene--dunkel .cd-abschnittsschiene__liste { border-inline-start-color: rgb(255 255 255 / .22); }
.cd-abschnittsschiene--dunkel .cd-abschnittsschiene__link:hover,
.cd-abschnittsschiene--dunkel .cd-abschnittsschiene__link[aria-current],
.cd-abschnittsschiene--dunkel .cd-abschnittsschiene__link[aria-current] .cd-abschnittsschiene__nr {
color: var(--cd-rot-auf-dunkel);
}
.cd-abschnittsschiene--rot .cd-abschnittsschiene__link,
.cd-abschnittsschiene--rot .cd-abschnittsschiene__nr,
.cd-abschnittsschiene--rot .cd-abschnittsschiene__link:hover,
.cd-abschnittsschiene--rot .cd-abschnittsschiene__link[aria-current],
.cd-abschnittsschiene--rot .cd-abschnittsschiene__link[aria-current] .cd-abschnittsschiene__nr {
color: var(--cd-weiss);
}
.cd-abschnittsschiene--rot .cd-abschnittsschiene__liste { border-inline-start-color: rgb(255 255 255 / .45); }
.cd-abschnittsschiene__text {
max-inline-size: 0;
opacity: 0;
overflow: hidden;
white-space: nowrap;
transition: max-inline-size var(--cd-zeit) var(--cd-kurve),
opacity var(--cd-zeit) ease;
}
.cd-abschnittsschiene__link:hover .cd-abschnittsschiene__text,
.cd-abschnittsschiene__link:focus-visible .cd-abschnittsschiene__text,
.cd-abschnittsschiene__link[aria-current] .cd-abschnittsschiene__text {
max-inline-size: 12rem;
opacity: 1;
}
.cd-abschnittsschiene__link[aria-current] {
color: var(--cd-rot);
font-weight: 600;
}
.cd-abschnittsschiene__link[aria-current] .cd-abschnittsschiene__nr { color: var(--cd-rot); }
.cd-abschnittsschiene__link:focus-visible {
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.cd-abschnittsschiene__text { transition: none; }
}
}
@media (max-width: 1419px) {
:root { --cd-rinne: 32px; }
}
@media (max-width: 1100px) {
body:not([data-tabletmenue="navigation"]) .cd-hauptnav,
body:not([data-tabletmenue="navigation"]) .cd-mega { display: none; }
.cd-menueknopf {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
padding: 0;
background: none;
border: 0;
border-radius: var(--cd-r-feld);
color: var(--cd-tinte);
cursor: pointer;
transition: background var(--cd-zeit) ease;
}
.cd-menueknopf:hover { background: var(--cd-flaeche-2); }
.cd-menueknopf__text {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.cd-menueknopf__balken {
position: relative;
inline-size: 26px;
block-size: 2.5px;
border-radius: 2px;
background: currentColor;
transition: background var(--cd-zeit) ease;
}
.cd-menueknopf__balken::before,
.cd-menueknopf__balken::after {
content: "";
position: absolute;
inset-inline: 0;
block-size: 2.5px;
border-radius: 2px;
background: currentColor;
transition: transform var(--cd-zeit) ease, inset-block-start var(--cd-zeit) ease;
}
.cd-menueknopf__balken::before { inset-block-start: -7.5px; }
.cd-menueknopf__balken::after  { inset-block-start: 7.5px; }
.cd-menueknopf[aria-expanded="true"] .cd-menueknopf__balken { background: transparent; }
.cd-menueknopf[aria-expanded="true"] .cd-menueknopf__balken::before {
inset-block-start: 0;
transform: rotate(45deg);
}
.cd-menueknopf[aria-expanded="true"] .cd-menueknopf__balken::after {
inset-block-start: 0;
transform: rotate(-45deg);
}
.cd-hauptzeile__inhalt { block-size: 64px; }
.cd-marke__bild,
.cd-fuss__logo { block-size: 36px; }
.cd-kontaktschiene { display: none; }
.cd-mobilleiste {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: var(--cd-e-schiene);
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
background: var(--cd-weiss);
border-block-start: 1px solid var(--cd-linie);
box-shadow: 0 -14px 40px -26px rgb(13 26 33 / .7);
}
.cd-mobilleiste__knopf {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding-block: 10px;
background: none;
border: 0;
color: var(--cd-dunkel);
font-size: var(--cd-gr-mikro);
font-family: var(--cd-schrift-mono);
letter-spacing: .06em;
cursor: pointer;
}
.cd-mobilleiste__knopf--rot { background: var(--cd-rot); color: var(--cd-weiss); }
.cd-fuss { padding-block-end: 72px; }
}
@media (max-width: 900px) {
.cd-fuss__oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cd-oberleiste__links .cd-oberleiste__link:first-child { display: none; }
}
@media (max-width: 600px) {
:root { --cd-rinne: 16px; }
.cd-hauptnav,
.cd-mega { display: none; }
.cd-fuss__oben { grid-template-columns: minmax(0, 1fr); gap: var(--cd-a6); }
.cd-fuss { padding-block-start: 48px; }
.cd-fuss__unten { flex-direction: column; align-items: flex-start; }
:root {
--cd-kopf-oben: 0px;
--cd-kopf-haupt: 72px;
}
.cd-oberleiste { display: none; }
html {
scroll-padding-top: calc(var(--cd-kopf-gesamt) + 16px);
}
.cd-hauptzeile__inhalt { block-size: var(--cd-kopf-haupt); gap: 6px; }
.cd-hauptzeile__inhalt { justify-content: flex-start; }
.cd-marke { margin-inline-end: auto; }
.cd-kopf__notfall {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
inline-size: 62px;
block-size: 58px;
padding: 0;
border-radius: var(--cd-r-feld);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 400;
letter-spacing: .03em;
line-height: 1;
}
.cd-kopf__notfall .cd-symbol {
inline-size: 16px;
block-size: 16px;
}
.cd-kopf__notfall {
background: var(--cd-rot);
color: var(--cd-weiss);
border: 1px solid var(--cd-rot);
transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-kopf__notfall:hover {
background: var(--cd-rot-hell);
border-color: var(--cd-rot-hell);
color: var(--cd-weiss);
}
}
.cd-seitentitel {
padding-block: clamp(2.5rem, 6vw, 5.5rem);
background: var(--cd-flaeche-2);
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-seitentitel h1 {
max-inline-size: 22ch;
}
html:has(body[data-oberleiste="aus"]) {
--cd-kopf-oben: 0px;
}
.cd-oberleiste {
block-size: var(--cd-kopf-oben);
overflow: hidden;
transition: block-size var(--cd-zeit) var(--cd-kurve);
}
@media (hover: hover) and (pointer: fine) {
html.cd-oben-weg {
--cd-kopf-oben: 0px;
}
}
@media (prefers-reduced-motion: reduce) {
.cd-oberleiste { transition: none; }
}
body[data-kopf="frei"] .cd-kopf {
position: static;
}
.cd-kopf {
transition: transform var(--cd-zeit) var(--cd-kurve);
}
html.cd-kopf-weg:not(.cd-kopf-fokus) .cd-kopf {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
.cd-kopf { transition: none; }
}
.cd-kopf__login {
display: inline-flex;
align-items: center;
gap: var(--cd-a2);
min-block-size: 24px;
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
white-space: nowrap;
}
.cd-kopf__login:hover { color: var(--cd-rot); }
.cd-kopf__login .cd-symbol { inline-size: 16px; block-size: 16px; }
@media (max-width: 1100px) {
.cd-kopf__login { display: none; }
}
@media (max-width: 600px) {
body:not([data-angebot-mobil="kopf"]):not([data-angebot-mobil="beides"]) .cd-kopf__cta { display: none; }
}
@media (min-width: 601px) and (max-width: 1100px) {
body:not([data-angebot-tablet="kopf"]):not([data-angebot-tablet="beides"]) .cd-kopf__cta { display: none; }
}
@media (max-width: 600px) {
body[data-notfall-mobil="0"] .cd-kopf__notfall { display: none; }
}
@media (min-width: 1101px) {
body[data-angebot-desktop="0"] .cd-kopf__cta { display: none; }
}
.cd-mobilmenue:not([hidden]) .cd-mobilmenue__feld,
.cd-mobilmenue:not([hidden]) .cd-mobilmenue__schleier {
transition: transform .32s var(--cd-kurve), opacity .32s ease;
}
.cd-mobilmenue:not(.cd-mobilmenue--auf) .cd-mobilmenue__feld {
transform: var(--cd-mm-zu);
opacity: var(--cd-mm-feld-deck);
}
.cd-mobilmenue:not(.cd-mobilmenue--auf) .cd-mobilmenue__schleier {
opacity: var(--cd-mm-schleier-deck);
}
body[data-menuebewegung="schieben"] .cd-mobilmenue {
--cd-mm-zu: translateX(100%);
--cd-mm-schleier-deck: 0;
}
body[data-menuebewegung="blende"] .cd-mobilmenue {
--cd-mm-feld-deck: 0;
--cd-mm-schleier-deck: 0;
}
body[data-menuebewegung="oben"] .cd-mobilmenue {
--cd-mm-unten: auto;
--cd-mm-start: 0;
--cd-mm-ende: 0;
--cd-mm-breite: 100%;
--cd-mm-max-hoehe: 88vh;
--cd-mm-zu: translateY(-100%);
--cd-mm-schleier-deck: 0;
}
@media (prefers-reduced-motion: reduce) {
.cd-mobilmenue {
--cd-mm-zu: none;
--cd-mm-feld-deck: 1;
--cd-mm-schleier-deck: 1;
}
.cd-mobilmenue .cd-mobilmenue__feld,
.cd-mobilmenue .cd-mobilmenue__schleier {
transition: none;
transform: none;
opacity: 1;
}
}
.cd-mega__link[aria-current="page"] {
color: var(--cd-rot);
font-weight: 600;
}
.cd-mega__link[aria-current="page"]:hover { color: var(--cd-rot-tief); }
.cd-obenschweber { display: none; }
@media (max-width: 900px) {
body[data-obenknopf-mobil="1"] .cd-obenschweber {
position: fixed;
inset-block-end: calc(var(--cd-mobilleiste-hoehe, 0px) + 12px);
inset-inline-end: var(--cd-rinne, 16px);
z-index: var(--cd-e-schiene);
inline-size: 44px;
block-size: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
cursor: pointer;
border: 1px solid var(--cd-linie);
border-radius: 50%;
background: var(--cd-weiss);
color: var(--cd-tinte);
box-shadow: 0 8px 24px -12px rgb(13 26 33 / .55);
transition: border-color var(--cd-zeit) var(--cd-kurve),
color var(--cd-zeit) var(--cd-kurve);
}
body[data-obenknopf-mobil="1"] .cd-obenschweber:hover,
body[data-obenknopf-mobil="1"] .cd-obenschweber:focus-visible {
border-color: var(--cd-rot);
color: var(--cd-rot);
}
body[data-obenknopf-mobil="1"] .cd-obenschweber--fort { display: none; }
body[data-obenknopf-form="eckig"] .cd-obenschweber {
border-radius: var(--cd-r-karte);
}
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
body[data-obenknopf-mobil="1"] .cd-obenschweber { transition: none; }
}
@media (min-width: 901px) {
body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber {
position: fixed;
inset-block-end: 24px;
inset-inline-end: 24px;
z-index: var(--cd-e-schiene);
inline-size: 46px;
block-size: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
cursor: pointer;
border: 1px solid var(--cd-linie);
border-radius: 50%;
background: var(--cd-weiss);
color: var(--cd-tinte);
box-shadow: 0 8px 24px -12px rgb(13 26 33 / .55);
transition: border-color var(--cd-zeit) var(--cd-kurve),
color var(--cd-zeit) var(--cd-kurve);
}
body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber:hover,
body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber:focus-visible {
border-color: var(--cd-rot);
color: var(--cd-rot);
}
body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber--fort { display: none; }
body[data-obenknopf-form="eckig"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber {
border-radius: var(--cd-r-karte);
}
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber { transition: none; }
}
.cd-mobilmenue__block--konto {
margin-block-start: var(--cd-a5);
padding-block: var(--cd-a4) var(--cd-a5);
background: var(--cd-flaeche-2);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-mobilkonto__name {
display: flex;
align-items: center;
gap: .6ch;
margin: 0 0 var(--cd-a3);
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
}
.cd-mobilkonto__name .cd-symbol { inline-size: 16px; block-size: 16px; }
.cd-mobilkonto__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 2px;
}
.cd-mobilkonto__liste a[href] {
min-block-size: var(--cd-zielgroesse, 24px);
}
.cd-mobilkonto__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a3);
padding: 8px 10px;
border-radius: var(--cd-r-feld);
color: var(--cd-dunkel);
font-weight: 500;
text-decoration: none;
}
.cd-mobilkonto__link:hover { background: var(--cd-weiss); }
.cd-mobilkonto__link--aktiv {
background: var(--cd-weiss);
box-shadow: inset 3px 0 0 var(--cd-rot);
}
.cd-mobilkonto__zahl {
flex: 0 0 auto;
min-inline-size: 20px;
padding: 1px 6px;
border-radius: 999px;
background: var(--cd-rot);
color: var(--cd-weiss);
font-size: 11px;
font-weight: 700;
text-align: center;
}
.cd-mobilkonto__anmelden,
.cd-mobilkonto__abmelden {
display: flex;
align-items: center;
justify-content: center;
gap: .5ch;
min-block-size: var(--cd-zielgroesse, 24px);
margin-block-start: var(--cd-a4);
padding: 10px 16px;
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-knopf);
background: var(--cd-weiss);
color: var(--cd-text-2);
font-family: var(--cd-schrift-text);
font-size: var(--cd-gr-klein);
font-weight: 600;
text-decoration: none;
}
.cd-mobilkonto__anmelden { margin-block-start: 0; }
.cd-mobilkonto__anmelden .cd-symbol,
.cd-mobilkonto__abmelden .cd-symbol { inline-size: 15px; block-size: 15px; }
.cd-mobilkonto__anmelden:hover,
.cd-mobilkonto__abmelden:hover {
border-color: var(--cd-rot);
color: var(--cd-rot);
}
.cd-kontoknopf { display: none; }
@media (max-width: 1100px) {
.cd-kontoknopf {
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
inline-size: 62px;
block-size: 58px;
padding: 0;
background: none;
border: 0;
border-radius: var(--cd-r-feld);
color: var(--cd-tinte);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 400;
letter-spacing: .03em;
line-height: 1;
cursor: pointer;
}
.cd-kontoknopf:hover {
background: var(--cd-flaeche-2);
}
.cd-kontoknopf .cd-symbol {
inline-size: 16px;
block-size: 16px;
}
.cd-kontoknopf__zahl {
position: absolute;
inset-block-start: 4px;
inset-inline-start: 32px;
min-inline-size: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--cd-rot);
color: var(--cd-weiss);
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
}
}
@media (max-width: 600px) {
body[data-login-mobil="symbol"] .cd-kontoknopf[data-zustand="gast"],
body[data-konto-mobil="symbol"] .cd-kontoknopf[data-zustand="konto"] { display: inline-flex; }
body[data-login-mobil="symbol"] .cd-hauptzeile__inhalt:has(.cd-kontoknopf[data-zustand="gast"]) .cd-kopf__notfall,
body[data-konto-mobil="symbol"] .cd-hauptzeile__inhalt:has(.cd-kontoknopf[data-zustand="konto"]) .cd-kopf__notfall { display: none; }
body:not([data-login-mobil="menue"]) .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto:has(.cd-mobilkonto[data-zustand="gast"]),
body:not([data-konto-mobil="menue"]) .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto:has(.cd-mobilkonto[data-zustand="konto"]) { display: none; }
}
@media (min-width: 601px) and (max-width: 1100px) {
body[data-login-tablet="symbol"] .cd-kontoknopf[data-zustand="gast"],
body[data-konto-tablet="symbol"] .cd-kontoknopf[data-zustand="konto"] { display: inline-flex; }
body[data-login-tablet="symbol"] .cd-hauptzeile__inhalt:has(.cd-kontoknopf[data-zustand="gast"]) .cd-kopf__notfall,
body[data-konto-tablet="symbol"] .cd-hauptzeile__inhalt:has(.cd-kontoknopf[data-zustand="konto"]) .cd-kopf__notfall { display: none; }
body:not([data-login-tablet="menue"]):not([data-login-tablet="beides"]) .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto:has(.cd-mobilkonto[data-zustand="gast"]),
body:not([data-konto-tablet="menue"]):not([data-konto-tablet="beides"]) .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto:has(.cd-mobilkonto[data-zustand="konto"]) { display: none; }
body:not([data-login-tablet="oberleiste"]):not([data-login-tablet="beides"]) .cd-kopf__kontoslot[data-zustand="gast"],
body:not([data-konto-tablet="oberleiste"]):not([data-konto-tablet="beides"]) .cd-kopf__kontoslot[data-zustand="konto"] { display: none; }
}
.cd-mobilmenue--konto .cd-mobilmenue__block--konto {
margin-block-start: 0;
border-block-start: 0;
background: none;
}
@media (min-width: 801px) and (max-width: 1100px) {
body[data-tabletmenue="navigation"] .cd-menueknopf { display: none; }
body[data-tabletmenue="navigation"] .cd-hauptnav__liste { gap: 16px; }
body[data-tabletmenue="navigation"] .cd-mega__inhalt { padding-inline: var(--cd-rinne); }
}
@media (min-width: 1101px) and (max-width: 1200px) {
.cd-hauptzeile__inhalt { gap: 20px; }
.cd-hauptnav__liste { gap: 16px; }
.cd-kopf__cta { flex: 0 0 auto; }
}
@media (min-width: 601px) and (max-width: 800px) {
body[data-tabletmenue="navigation"] .cd-hauptnav,
body[data-tabletmenue="navigation"] .cd-mega { display: none; }
}
@media (min-width: 801px) and (max-width: 1049px) {
body[data-tabletmenue="navigation"][data-angebot-tablet="kopf"] .cd-hauptnav,
body[data-tabletmenue="navigation"][data-angebot-tablet="kopf"] .cd-mega { display: none; }
body[data-tabletmenue="navigation"][data-angebot-tablet="kopf"] .cd-menueknopf { display: inline-flex; }
body[data-tabletmenue="navigation"][data-angebot-tablet="beides"] .cd-hauptnav,
body[data-tabletmenue="navigation"][data-angebot-tablet="beides"] .cd-mega { display: none; }
body[data-tabletmenue="navigation"][data-angebot-tablet="beides"] .cd-menueknopf { display: inline-flex; }
}
/* komponenten.css */
.cd-knopf {
display: inline-flex;
align-items: center;
gap: var(--cd-a3);
padding: 12px 19px;
border: 1px solid transparent;
border-radius: var(--cd-r-knopf);
font-family: var(--cd-schrift-text);
font-size: 15px;
font-weight: 600;
letter-spacing: .01em;
line-height: 1.25;
cursor: pointer;
transition: background var(--cd-zeit) ease,
color var(--cd-zeit) ease,
border-color var(--cd-zeit) ease,
transform var(--cd-zeit) ease;
}
.cd-knopf--rot {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-knopf--rot:hover {
background: var(--cd-rot-tief);
border-color: var(--cd-rot-tief);
color: var(--cd-weiss);
transform: translateY(-1px);
}
.cd-knopf--linie {
background: transparent;
border-color: var(--cd-linie);
color: var(--cd-dunkel);
}
.cd-knopf--linie:hover {
border-color: var(--cd-dunkel);
color: var(--cd-dunkel);
}
.cd-auf-dunkel .cd-knopf--linie {
border-color: var(--cd-linie-auf-dunkel);
color: var(--cd-weiss);
}
.cd-auf-dunkel .cd-knopf--linie:hover { border-color: var(--cd-weiss); }
.cd-knopf__pfeil {
font-family: var(--cd-schrift-mono);
font-size: 14px;
line-height: 1;
transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-knopf:hover .cd-knopf__pfeil { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.cd-knopf:hover { transform: none; }
.cd-knopf:hover .cd-knopf__pfeil { transform: none; }
}
.cd-symbol {
flex: 0 0 auto;
display: block;
}
.cd-kopfzeile {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
align-items: end;
gap: var(--cd-a6);
margin-block-end: 52px;
}
.cd-kopfzeile__text { max-inline-size: none; }
.cd-kicker {
display: block;
font-family: var(--cd-schrift-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--cd-rot);
margin-block-end: 20px;
}
.cd-auf-dunkel .cd-kicker { color: var(--cd-rot-auf-dunkel); }
.cd-nummer {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-nummer { color: var(--cd-text-auf-dunkel-2); }
@media (max-width: 900px) {
.cd-kopfzeile {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--cd-a4);
}
}
.cd-karte {
display: flex;
flex-direction: column;
gap: var(--cd-a3);
padding: var(--cd-a5);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-karte);
transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-karte:hover {
border-color: var(--cd-linie);
box-shadow: var(--cd-schatten-karte);
}
.cd-karte__titel { font-size: var(--cd-gr-h4); }
.cd-karte__text { font-size: var(--cd-gr-klein); color: var(--cd-text-2); }
.cd-karte__kachel {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
border-radius: var(--cd-r-knopf);
background: color-mix(in srgb, var(--cd-rot) 8%, transparent);
color: var(--cd-rot);
}
.cd-karte__mehr {
margin-block-start: auto;
padding-block-start: var(--cd-a3);
font-size: var(--cd-gr-klein);
font-weight: 600;
color: var(--cd-rot);
}
.cd-chip {
display: inline-flex;
align-items: center;
gap: var(--cd-a2);
padding: 6px 12px;
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-feld);
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
}
.cd-abzeichen {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin-inline-start: 7px;
padding: 2px 7px;
border-radius: 999px;
background: var(--cd-rot);
color: var(--cd-weiss);
font-family: var(--cd-schrift-mono);
font-size: 9.5px;
font-weight: 600;
line-height: 1.5;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
align-self: center;
}
.cd-abzeichen--dunkel {
background: var(--cd-dunkel);
color: var(--cd-weiss);
}
.cd-abzeichen--linie {
background: none;
color: var(--cd-rot);
border: 1px solid currentColor;
padding: 1px 6px;
}
.cd-abzeichen--punkt {
inline-size: 7px;
block-size: 7px;
min-inline-size: 7px;
padding: 0;
align-self: flex-start;
margin-block-start: 3px;
}
.cd-auf-dunkel .cd-abzeichen--dunkel,
.cd-fuss .cd-abzeichen--dunkel {
background: var(--cd-weiss);
color: var(--cd-dunkel);
}
.cd-auf-dunkel .cd-abzeichen--linie,
.cd-fuss .cd-abzeichen--linie { color: var(--cd-rot-auf-dunkel); }
[data-klappen="ohne"]  { --cd-klapp: 0ms; }
[data-klappen="sanft"] { --cd-klapp: 260ms; }
[data-klappen="ruhig"] { --cd-klapp: 460ms; }
@media (prefers-reduced-motion: reduce) {
[data-klappen] { --cd-klapp: 0ms; }
}
.cd-akkordeon__punkt {
border-block-end: 1px solid var(--cd-linie-2);
interpolate-size: allow-keywords;
}
.cd-akkordeon__frage {
inline-size: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a4);
padding-block: var(--cd-a5);
background: none;
border: 0;
text-align: start;
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h4);
font-weight: 600;
cursor: pointer;
}
.cd-akkordeon__zeichen {
flex: 0 0 auto;
position: relative;
inline-size: 16px;
block-size: 16px;
}
.cd-akkordeon__zeichen::before,
.cd-akkordeon__zeichen::after {
content: "";
position: absolute;
inset-block-start: 7px;
inset-inline: 0;
block-size: 2px;
background: var(--cd-rot);
transition: transform var(--cd-klapp, var(--cd-zeit)) var(--cd-kurve);
}
.cd-akkordeon__zeichen::after { transform: rotate(90deg); }
.cd-akkordeon__frage[aria-expanded="true"] .cd-akkordeon__zeichen::after,
.cd-akkordeon__punkt[open] .cd-akkordeon__zeichen::after {
transform: rotate(0deg);
}
.cd-akkordeon__punkt::details-content {
block-size: 0;
overflow: clip;
transition:
block-size var(--cd-klapp, 260ms) var(--cd-kurve),
content-visibility var(--cd-klapp, 260ms) var(--cd-kurve);
transition-behavior: allow-discrete;
}
.cd-akkordeon__punkt[open]::details-content { block-size: auto; }
.cd-klappmass .cd-akkordeon__punkt[open]::details-content {
block-size: var(--cd-klapphoehe, auto);
}
.cd-akkordeon__antwort {
padding-block-end: var(--cd-a5);
color: var(--cd-text-2);
opacity: 0;
translate: 0 -.4rem;
transition:
opacity var(--cd-klapp, 260ms) var(--cd-kurve),
translate var(--cd-klapp, 260ms) var(--cd-kurve);
}
.cd-akkordeon__punkt[open] .cd-akkordeon__antwort {
opacity: 1;
translate: 0 0;
}
.cd-schieber { position: relative; }
.cd-schieber__bedienung {
display: flex;
align-items: center;
gap: var(--cd-a2);
margin-block-start: var(--cd-a5);
}
.cd-schieber__knopf {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-feld);
cursor: pointer;
}
.cd-schieber__knopf:hover { border-color: var(--cd-dunkel); }
.cd-schieber__punkte { display: flex; gap: 6px; margin-inline-start: var(--cd-a3); }
.cd-schieber__punkt {
inline-size: 8px;
block-size: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--cd-linie);
cursor: pointer;
}
.cd-schieber__punkt[aria-current="true"] { background: var(--cd-rot); }
.cd-schieber__punkt::before {
content: "";
position: absolute;
inline-size: var(--cd-zielgroesse, 24px);
block-size: var(--cd-zielgroesse, 24px);
transform: translate(-50%, -50%);
}
.cd-feld { display: grid; gap: 6px; }
.cd-feld__label { font-size: var(--cd-gr-klein); font-weight: 600; }
.cd-feld__eingabe {
inline-size: 100%;
padding: 12px 14px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-feld);
font: inherit;
color: var(--cd-tinte);
}
.cd-feld__eingabe::placeholder { color: var(--cd-text-3); opacity: 1; }
.cd-feld__eingabe:focus-visible { border-color: var(--cd-rot); }
.cd-feld__fehler { font-size: var(--cd-gr-klein); color: var(--cd-rot); }
.cd-feld__pflicht::after { content: " *"; color: var(--cd-rot); }
.cd-auf-dunkel { background: var(--cd-dunkel); color: var(--cd-text-auf-dunkel); }
.cd-auf-dunkel h1, .cd-auf-dunkel h2, .cd-auf-dunkel h3, .cd-auf-dunkel h4 { color: var(--cd-weiss); }
.cd-auf-dunkel a { color: var(--cd-weiss); }
.cd-auf-rot { --cd-bahn: clamp(52px, 6.7vw, 96px); }
.cd-auf-rot { background: var(--cd-rot); color: var(--cd-weiss); }
.cd-auf-rot h1, .cd-auf-rot h2, .cd-auf-rot h3, .cd-auf-rot h4 { color: var(--cd-weiss); }
.cd-auf-rot a { color: var(--cd-weiss); }
.cd-auf-rot :where(a, button, [tabindex]):focus-visible { outline-color: var(--cd-weiss); }
.cd-modal {
inline-size: min(100% - 32px, 720px);
max-block-size: min(100% - 32px, 900px);
margin: auto;
overflow: visible;
}
.cd-modal__kasten {
position: relative;
max-block-size: min(100vh - 32px, 900px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--cd-weiss);
border-radius: var(--cd-r-karte);
box-shadow: var(--cd-schatten-mega);
}
.cd-modal__schliessen {
position: sticky;
inset-block-start: 0;
float: inline-end;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
margin: 12px 12px 0 0;
background: var(--cd-flaeche-2);
border: 0;
border-radius: var(--cd-r-feld);
color: var(--cd-tinte);
cursor: pointer;
transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-modal__schliessen:hover {
background: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-modal__kreuz {
inline-size: 16px;
block-size: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
.cd-modal__inhalt > .cd-bahn {
padding-block: 0;
background: transparent;
border: 0;
}
.cd-modal__inhalt .cd-bahn__inhalt {
max-inline-size: none;
padding: 36px 40px 40px;
}
.cd-modal__inhalt .cd-kontakt__panel {
padding: 0;
background: transparent;
border: 0;
}
.cd-modal__inhalt .cd-kontakt__raster {
grid-template-columns: minmax(0, 1fr);
max-inline-size: none;
gap: var(--cd-a6);
}
.cd-modal-offen { overflow: hidden; }
@media (max-width: 600px) {
.cd-modal { inline-size: 100%; max-inline-size: 100%; max-block-size: 100%; }
.cd-modal__kasten { border-radius: 0; max-block-size: 100vh; }
.cd-modal__inhalt .cd-bahn__inhalt { padding: var(--cd-a5); }
}
@property --cd-fuell {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
.cd-takt {
position: relative;
isolation: isolate;
}
.cd-takt--laeuft::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(to top, var(--cd-rot) var(--cd-fuell), transparent 0);
animation: cd-takt var(--cd-takt, 6500ms) linear infinite;
}
.cd-auf-dunkel .cd-takt--laeuft::before {
background: linear-gradient(to top,
color-mix(in srgb, var(--cd-rot-auf-dunkel) 50%, transparent) var(--cd-fuell),
transparent 0);
}
.cd-takt--laeuft[data-cd-ruht="1"]::before {
animation-play-state: paused;
}
@keyframes cd-takt {
from { --cd-fuell: 0%; }
to { --cd-fuell: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.cd-takt--laeuft::before { animation: none; }
}
.cd-navknopf {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border: 1px solid currentColor;
border-radius: var(--cd-r-knopf);
font-weight: 600;
line-height: 1.2;
transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease,
border-color var(--cd-zeit) ease;
}
.cd-navknopf:hover,
.cd-navknopf:focus-visible {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-fuss__knopf::before {
content: "";
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: var(--cd-rot);
flex: 0 0 auto;
}
.cd-fuss__knopf:hover::before,
.cd-fuss__knopf:focus-visible::before {
background: var(--cd-weiss);
}
.cd-auf-getoent { background: var(--cd-flaeche-2); }
.cd-bahn.cd-auf-kopfton { background: var(--cd-flaeche-3); }
[data-symbolbewegung] .cd-symbol,
svg.cd-symbol[data-bewegung] {
transition: transform .28s var(--cd-kurve);
}
[data-symbolbewegung="heben"] :is(a, li, .cd-karten__feld):hover .cd-symbol:not([data-bewegung]),
:is(a, li, .cd-karten__feld):hover svg.cd-symbol[data-bewegung="heben"] {
transform: translateY(-3px) scale(1.08);
}
[data-symbolbewegung="drehen"] :is(a, li, .cd-karten__feld):hover .cd-symbol:not([data-bewegung]),
:is(a, li, .cd-karten__feld):hover svg.cd-symbol[data-bewegung="drehen"] {
transform: rotate(-8deg) scale(1.06);
}
[data-symbolbewegung="pulsieren"] .cd-symbol:not([data-bewegung]),
svg.cd-symbol[data-bewegung="pulsieren"] {
animation: cd-symbolpuls 2.4s ease-in-out 2;
}
@keyframes cd-symbolpuls {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.07); }
}
[data-symbolbewegung="zeichnen"] .cd-symbol:not([data-bewegung]) :is(path, circle, rect, line, polyline),
svg.cd-symbol[data-bewegung="zeichnen"] :is(path, circle, rect, line, polyline) {
stroke-dasharray: 240;
stroke-dashoffset: 240;
}
html.cd-bewegung [data-symbolbewegung="zeichnen"].cd-ein .cd-symbol:not([data-bewegung]) :is(path, circle, rect, line, polyline),
html.cd-bewegung .cd-ein svg.cd-symbol[data-bewegung="zeichnen"] :is(path, circle, rect, line, polyline) {
animation: cd-symbolzeichnen .9s var(--cd-kurve) forwards;
}
@keyframes cd-symbolzeichnen {
to { stroke-dashoffset: 0; }
}
html:not(.cd-bewegung) [data-symbolbewegung="zeichnen"] .cd-symbol :is(path, circle, rect, line, polyline),
html:not(.cd-bewegung) svg.cd-symbol[data-bewegung="zeichnen"] :is(path, circle, rect, line, polyline) {
stroke-dashoffset: 0;
}
svg.cd-symbol[data-bewegung="keine"],
svg.cd-symbol[data-bewegung="keine"] :is(path, circle, rect, line, polyline) {
animation: none;
transform: none;
transition: none;
stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
[data-symbolbewegung] .cd-symbol,
[data-symbolbewegung] .cd-symbol :is(path, circle, rect, line, polyline),
svg.cd-symbol[data-bewegung],
svg.cd-symbol[data-bewegung] :is(path, circle, rect, line, polyline) {
animation: none;
transition: none;
transform: none;
stroke-dashoffset: 0;
}
}
.cd-grossknopf,
.cd-cta__knoepfe:not(.cd-cta__knoepfe--reihe) > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
inline-size: 100%;
padding: 19px 27px;
border-style: solid;
border-width: 1px;
border-radius: var(--cd-r-knopf);
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: 18px;
letter-spacing: -.012em;
line-height: 1.2;
text-align: start;
transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease,
border-color var(--cd-zeit) ease;
}
@media (max-width: 600px) {
.cd-grossknopf,
.cd-cta__knoepfe:not(.cd-cta__knoepfe--reihe) > a {
font-size: 16px;
padding: calc(var(--cd-a4) - 1px) calc(var(--cd-a5) - 1px);
}
}
.cd-geraet {
position: relative;
color: var(--cd-text-3);
inline-size: 100%;
}
.cd-geraet__scheibe {
position: relative;
overflow: hidden;
background: var(--cd-flaeche-3);
}
.cd-geraet__scheibe img {
inline-size: 100%;
block-size: 100%;
display: block;
object-fit: cover;
object-position: top center;
}
.cd-geraet--laptop,
.cd-geraet--monitor{
--cd-geraet-strich: 1.5px;
--cd-geraet-rand: 4px;
--cd-geraet-radius: 8px;
--cd-geraet-feld: calc(var(--cd-gr-mikro) * 1.4 + var(--cd-a1));
--cd-geraet-leiste: calc(var(--cd-geraet-feld) + var(--cd-a2));
--cd-geraet-punkt: 7px;
--cd-geraet-punktreihe: calc(var(--cd-geraet-punkt) * 3 + var(--cd-a1) * 2);
--cd-geraet-pfeil: 7px;
--cd-geraet-fensterpunkte: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 7"><g fill="none" stroke="%23000" stroke-width="1.5"><circle cx="3.5" cy="3.5" r="2.75"/><circle cx="14.5" cy="3.5" r="2.75"/><circle cx="25.5" cy="3.5" r="2.75"/></g></svg>');
container: cd-geraet / inline-size;
}
.cd-geraet--laptop{
--cd-geraet-sockel: 12px;
padding-inline: clamp(6px, 4%, 18px);
padding-block-end: var(--cd-geraet-sockel);
}
.cd-geraet--monitor{
--cd-geraet-rand: 8px;
--cd-geraet-radius: 6px;
--cd-geraet-hals: 22px;
--cd-geraet-platte: 8px;
padding-block-end: calc(var(--cd-geraet-hals) + var(--cd-geraet-platte));
}
.cd-geraet--laptop .cd-geraet__deckel,
.cd-geraet--monitor .cd-geraet__deckel{
box-sizing: border-box;
border: var(--cd-geraet-strich) solid currentColor;
border-radius: var(--cd-geraet-radius);
padding-block-start: calc(var(--cd-geraet-rand) + var(--cd-geraet-leiste));
padding-inline: var(--cd-geraet-rand);
padding-block-end: var(--cd-geraet-rand);
}
.cd-geraet--laptop .cd-geraet__scheibe,
.cd-geraet--monitor .cd-geraet__scheibe{
box-sizing: border-box;
border-block-start: var(--cd-geraet-strich) solid currentColor;
border-end-start-radius: max(0px, calc(var(--cd-geraet-radius) - var(--cd-geraet-strich) - var(--cd-geraet-rand)));
border-end-end-radius:   max(0px, calc(var(--cd-geraet-radius) - var(--cd-geraet-strich) - var(--cd-geraet-rand)));
}
.cd-geraet--laptop .cd-geraet__scheibe{ aspect-ratio: 16 / 10; }
.cd-geraet--monitor .cd-geraet__scheibe{ aspect-ratio: 16 / 9; }
.cd-geraet--laptop .cd-geraet__deckel::before,
.cd-geraet--monitor .cd-geraet__deckel::before{
content: "";
position: absolute;
inset-block-start: calc(var(--cd-geraet-rand) + (var(--cd-geraet-leiste) - var(--cd-geraet-punkt)) / 2);
inset-inline-start: calc(var(--cd-geraet-rand) + var(--cd-a2));
inline-size: var(--cd-geraet-punktreihe);
block-size: var(--cd-geraet-punkt);
-webkit-mask: var(--cd-geraet-fensterpunkte) no-repeat 0 0 / 100% 100%;
mask: var(--cd-geraet-fensterpunkte) no-repeat 0 0 / 100% 100%;
pointer-events: none;
}
@supports ((-webkit-mask-image: url("i.svg")) or (mask-image: url("i.svg"))){
.cd-geraet--laptop .cd-geraet__deckel::before,
.cd-geraet--monitor .cd-geraet__deckel::before{ background-color: currentColor; }
}
.cd-geraet--laptop .cd-geraet__deckel::after,
.cd-geraet--monitor .cd-geraet__deckel::after{
content: "";
position: absolute;
box-sizing: border-box;
inset-block-start: calc(var(--cd-geraet-rand) + (var(--cd-geraet-leiste) - var(--cd-geraet-pfeil)) / 2);
inset-inline-start: calc(var(--cd-geraet-rand) + var(--cd-a2) + var(--cd-geraet-punktreihe) + var(--cd-a2));
inline-size: var(--cd-geraet-pfeil);
block-size: var(--cd-geraet-pfeil);
border-inline-start: var(--cd-geraet-strich) solid currentColor;
border-block-end: var(--cd-geraet-strich) solid currentColor;
transform: rotate(45deg);
pointer-events: none;
}
.cd-geraet__adresse{
position: absolute;
box-sizing: border-box;
inset-block-start: calc(var(--cd-geraet-rand) + (var(--cd-geraet-leiste) - var(--cd-geraet-feld)) / 2);
inset-inline-start: calc(var(--cd-geraet-rand) + var(--cd-a2) + var(--cd-geraet-punktreihe)
+ var(--cd-a2) + var(--cd-geraet-pfeil) + var(--cd-a3));
inset-inline-end: calc(var(--cd-geraet-rand) + var(--cd-a2));
block-size: var(--cd-geraet-feld);
padding-inline: var(--cd-a2);
border: var(--cd-geraet-strich) solid currentColor;
border-radius: 999px;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
line-height: calc(var(--cd-geraet-feld) - var(--cd-geraet-strich) * 2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
pointer-events: none;
}
.cd-geraet--laptop::before{
content: "";
position: absolute;
box-sizing: border-box;
inset-block-end: 0;
inset-inline: 0;
block-size: calc(var(--cd-geraet-sockel) + var(--cd-geraet-strich));
border: var(--cd-geraet-strich) solid currentColor;
border-end-start-radius: 6px;
border-end-end-radius: 6px;
pointer-events: none;
}
.cd-geraet--laptop::after{
content: "";
position: absolute;
inset-block-end: calc((var(--cd-geraet-sockel) - var(--cd-geraet-strich)) / 2);
inset-inline-start: 50%;
translate: -50% 0;
inline-size: 18%;
max-inline-size: 72px;
block-size: 0;
border-block-start: var(--cd-geraet-strich) solid currentColor;
pointer-events: none;
}
.cd-geraet--monitor::before{
content: "";
position: absolute;
inset-block-end: var(--cd-geraet-platte);
inset-inline-start: 50%;
translate: -50% 0;
inline-size: 16%;
min-inline-size: 28px;
max-inline-size: 64px;
block-size: var(--cd-geraet-hals);
border-inline: var(--cd-geraet-strich) solid currentColor;
pointer-events: none;
}
.cd-geraet--monitor::after{
content: "";
position: absolute;
box-sizing: border-box;
inset-block-end: 0;
inset-inline-start: 50%;
translate: -50% 0;
inline-size: 42%;
min-inline-size: 96px;
max-inline-size: 150px;
block-size: var(--cd-geraet-platte);
border: var(--cd-geraet-strich) solid currentColor;
border-radius: 3px;
pointer-events: none;
}
@container cd-geraet (inline-size < 12rem){
.cd-geraet__adresse{
inset-inline-start: calc(var(--cd-geraet-rand) + var(--cd-a2)
+ var(--cd-geraet-punktreihe) + var(--cd-a3));
font-size: 0;
}
.cd-geraet--laptop .cd-geraet__deckel::after,
.cd-geraet--monitor .cd-geraet__deckel::after{ display: none; }
}
@container cd-geraet (inline-size < 9rem){
.cd-geraet--laptop .cd-geraet__deckel,
.cd-geraet--monitor .cd-geraet__deckel{
padding-block-start: var(--cd-geraet-rand);
}
.cd-geraet--laptop .cd-geraet__scheibe,
.cd-geraet--monitor .cd-geraet__scheibe{ border-block-start: 0; }
.cd-geraet--laptop .cd-geraet__deckel::before,
.cd-geraet--monitor .cd-geraet__deckel::before,
.cd-geraet__adresse{ display: none; }
}
@media (forced-colors: active){
.cd-geraet--laptop .cd-geraet__deckel::before,
.cd-geraet--monitor .cd-geraet__deckel::before{ background-color: CanvasText; }
}
[dir="rtl"] .cd-geraet--laptop .cd-geraet__deckel::after,
[dir="rtl"] .cd-geraet--monitor .cd-geraet__deckel::after{
transform: rotate(-45deg);
}
.cd-geraet--iphone,
.cd-geraet--galaxy {
box-sizing: border-box;
padding-inline: var(--cd-a1);
max-inline-size: 14rem;
margin-inline: auto;
min-inline-size: 0;
}
.cd-geraet--iphone .cd-geraet__deckel,
.cd-geraet--iphone .cd-geraet__scheibe,
.cd-geraet--galaxy .cd-geraet__deckel,
.cd-geraet--galaxy .cd-geraet__scheibe {
box-sizing: border-box;
}
.cd-geraet--iphone .cd-geraet__scheibe::before,
.cd-geraet--iphone .cd-geraet__scheibe::after,
.cd-geraet--galaxy .cd-geraet__scheibe::before {
content: "";
position: absolute;
inset-inline-start: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: 1;
}
.cd-geraet--iphone::before,
.cd-geraet--iphone::after,
.cd-geraet--galaxy::after {
content: "";
position: absolute;
inline-size: var(--cd-a1);
border: 1.5px solid currentColor;
pointer-events: none;
}
.cd-geraet--iphone .cd-geraet__deckel {
border: 1.5px solid currentColor;
padding: max(4px, 2.6%);
border-radius: 16.4% / 7.8%;
}
.cd-geraet--iphone .cd-geraet__scheibe {
aspect-ratio: 9 / 19.5;
border: 1.5px solid currentColor;
border-radius: 14% / 6.5%;
}
.cd-geraet--iphone .cd-geraet__scheibe::before {
inset-block-start: 1.6%;
inline-size: 30%;
aspect-ratio: 3.6 / 1;
min-block-size: 9px;
border: 1.5px solid currentColor;
border-radius: 999px;
}
.cd-geraet--iphone .cd-geraet__scheibe::after {
inset-block-end: 1.2%;
inline-size: 34%;
block-size: 1.5px;
border-radius: 1px;
background: currentColor;
}
.cd-geraet--iphone::before {
inset-inline-start: 0;
inset-block-start: 19%;
block-size: 13%;
border-inline-end: 0;
border-start-start-radius: 2px;
border-end-start-radius: 2px;
}
.cd-geraet--iphone::after {
inset-inline-end: 0;
inset-block-start: 25%;
block-size: 11%;
border-inline-start: 0;
border-start-end-radius: 2px;
border-end-end-radius: 2px;
}
.cd-geraet--galaxy .cd-geraet__deckel {
border: 1.5px solid currentColor;
padding: max(3px, 1.6%);
border-radius: 11% / 5%;
}
.cd-geraet--galaxy .cd-geraet__scheibe {
aspect-ratio: 9 / 20;
border: 1.5px solid currentColor;
border-radius: 9% / 4%;
}
.cd-geraet--galaxy .cd-geraet__scheibe::before {
inset-block-start: 1.6%;
inline-size: max(6px, 5%);
aspect-ratio: 1;
border: 1.5px solid currentColor;
border-radius: 50%;
}
.cd-geraet--galaxy::after {
inset-inline-end: 0;
inset-block-start: 23%;
block-size: 9%;
border-inline-start: 0;
border-start-end-radius: 2px;
border-end-end-radius: 2px;
}
.cd-geraet--tablet {
--cd-geraet-strich: 1.5px;
--cd-geraet-rand: var(--cd-a3);
--cd-geraet-radius: var(--cd-a4);
--cd-geraet-punkt: 6px;
min-inline-size: 0;
}
.cd-geraet--tablet .cd-geraet__deckel {
box-sizing: border-box;
border: var(--cd-geraet-strich) solid currentColor;
border-radius: var(--cd-geraet-radius);
padding: var(--cd-geraet-rand);
background: none;
}
.cd-geraet--tablet .cd-geraet__scheibe {
box-sizing: border-box;
border: var(--cd-geraet-strich) solid currentColor;
border-radius: max(0px, calc(var(--cd-geraet-radius) - var(--cd-geraet-rand)));
aspect-ratio: 3 / 4;
}
.cd-geraet--tablet .cd-geraet__deckel::before {
--cd-geraet-punkt-bahn: calc((var(--cd-geraet-rand) - var(--cd-geraet-punkt)) / 2);
content: "";
position: absolute;
box-sizing: border-box;
inline-size: var(--cd-geraet-punkt);
block-size: var(--cd-geraet-punkt);
border: var(--cd-geraet-strich) solid currentColor;
border-radius: 50%;
inset-block: var(--cd-geraet-punkt-bahn) auto;
inset-inline: 0;
margin-block: 0;
margin-inline: auto;
}
.cd-geraet--tablet.cd-geraet--quer .cd-geraet__scheibe {
aspect-ratio: 4 / 3;
}
.cd-geraet--tablet.cd-geraet--quer .cd-geraet__deckel::before {
inset-block: 0;
inset-inline: var(--cd-geraet-punkt-bahn) auto;
margin-block: auto;
margin-inline: 0;
}
@supports (container-type: inline-size) {
.cd-geraet--tablet {
container-type: inline-size;
}
@container (min-inline-size: 560px) {
.cd-geraet--tablet .cd-geraet__deckel {
--cd-geraet-rand: var(--cd-a4);
--cd-geraet-radius: var(--cd-a5);
--cd-geraet-punkt: 8px;
}
}
}
.cd-auf-dunkel .cd-geraet { color: var(--cd-text-auf-dunkel-2); }
.cd-rechnung {
display: grid;
gap: 6px;
margin-block-start: var(--cd-a5);
max-inline-size: 28rem;
}
.cd-rechnung__label {
font-weight: 600;
font-size: var(--cd-gr-klein);
color: var(--cd-tinte);
}
.cd-rechnung__feld {
inline-size: 7rem;
padding: 11px 14px;
border: 1px solid var(--cd-linie-3);
border-radius: var(--cd-r-feld);
background: var(--cd-weiss);
font-family: var(--cd-schrift-text);
font-size: var(--cd-gr-text);
color: var(--cd-tinte);
}
.cd-rechnung__feld:focus-visible {
border-color: var(--cd-rot);
}
.cd-rechnung__hinweis {
margin: 0;
color: var(--cd-text-3);
font-size: var(--cd-gr-klein);
}
.cd-auf-dunkel .cd-rechnung__label {
color: var(--cd-weiss);
}
.cd-auf-dunkel .cd-rechnung__hinweis {
color: var(--cd-text-auf-dunkel);
}
.cd-datenschutzmodal__titel {
margin: 0;
padding: var(--cd-a5) var(--cd-a6) var(--cd-a4);
font-size: var(--cd-gr-h3);
line-height: 1.25;
}
.cd-datenschutzmodal__laedt {
margin: 0;
padding: 0 var(--cd-a6) var(--cd-a6);
color: var(--cd-text-3);
}
.cd-modal__inhalt[data-cd-dsziel] {
padding: 0 var(--cd-a6) var(--cd-a6);
}
.cd-modal__inhalt[data-cd-dsziel] > .cd-bahn:first-child {
padding-block-start: 0;
}
.cd-spinner {
display: inline-block;
inline-size: 14px;
block-size: 14px;
margin-inline-end: .6ch;
border: 2px solid currentColor;
border-block-start-color: transparent;
border-radius: 50%;
opacity: .8;
animation: cd-drehen .7s linear infinite;
vertical-align: -2px;
}
@keyframes cd-drehen {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.cd-spinner {
animation: cd-pulsen 1.2s ease-in-out infinite;
border-block-start-color: currentColor;
}
@keyframes cd-pulsen {
0%, 100% { opacity: .25; }
50% { opacity: .9; }
}
}
button[aria-busy="true"] {
cursor: progress;
opacity: .72;
}
.cd-aktion--fehler .cd-knopf {
border-color: var(--cd-rot);
color: var(--cd-rot);
}
.cd-kihinweis {
font-family: var(--cd-schrift-mono);
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.cd-kihinweis--marke {
position: absolute;
inset-block-end: var(--cd-a3);
inset-inline-start: var(--cd-a3);
z-index: 2;
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--cd-dunkel) 82%, transparent);
color: var(--cd-weiss);
backdrop-filter: blur(6px);
pointer-events: none;
}
.cd-kihinweis--unterschrift {
margin-block: var(--cd-a2) 0;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-kihinweis--unterschrift,
.cd-fuss .cd-kihinweis--unterschrift {
color: var(--cd-text-auf-dunkel-2);
}
@media (prefers-reduced-motion: no-preference) {
.cd-modal[open] {
animation: cd-modal-auf var(--cd-zeit) var(--cd-kurve) both;
}
.cd-modal[open]::backdrop {
animation: cd-schleier-auf var(--cd-zeit) ease both;
}
}
@keyframes cd-modal-auf {
from { opacity: 0; transform: translateY(10px) scale(.99); }
to   { opacity: 1; transform: none; }
}
@keyframes cd-schleier-auf {
from { opacity: 0; }
to   { opacity: 1; }
}
.cd-modal__laden {
display: flex;
align-items: center;
gap: var(--cd-a3);
padding: var(--cd-a6) 0;
color: var(--cd-text-2);
font-size: var(--cd-gr-klein);
}
.cd-modal__laden .cd-spinner {
inline-size: 18px;
block-size: 18px;
margin-inline-end: 0;
color: var(--cd-rot);
}
.cd-modal__inhalt[aria-busy="true"] {
min-block-size: 8rem;
}
a > .cd-spinner {
text-decoration: none;
margin-inline-end: .5ch;
vertical-align: -1px;
}
.cd-auf-dunkel .cd-feld__fehler,
.cd-auf-rot .cd-feld__fehler {
color: var(--cd-rot-auf-dunkel);
}
.cd-schleier {
position: fixed;
inset: 0;
z-index: 900;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--cd-grund) 72%, transparent);
backdrop-filter: blur(2px);
opacity: 0;
animation: cd-schleier-auf .18s ease .12s forwards;
}
.cd-schleier[hidden] { display: none; }
@keyframes cd-schleier-auf {
to { opacity: 1; }
}
.cd-schleier__ring {
inline-size: 44px;
block-size: 44px;
border-width: 3px;
margin-inline-end: 0;
color: var(--cd-rot);
}
@media (prefers-reduced-motion: reduce) {
.cd-schleier { animation: none; opacity: 1; }
}
/* bahnen/cd_menuefassungen.css */
body[data-abschnitte="ohne-titel"] .cd-mobilmenue__blockTitel,
body[data-abschnitte="flach"] .cd-mobilmenue__blockTitel {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
body[data-abschnitte="ohne-titel"] .cd-mobilmenue:not(.cd-mobilmenue--konto)
.cd-mobilmenue__block:not(.cd-mobilmenue__block--start) + .cd-mobilmenue__block {
border-block-start: 1px solid var(--cd-mm-linie);
margin-block-start: var(--cd-a3);
padding-block-start: var(--cd-a5);
}
body[data-abschnitte="flach"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--start {
border-block-end: 0;
padding-block-end: 0;
}
body[data-abschnitte="flach"] .cd-mobilmenue:not(.cd-mobilmenue--konto)
.cd-mobilmenue__block + .cd-mobilmenue__block {
padding-block-start: 0;
}
body[data-unterpunkte="ebenen"] .cd-mobilmenue:not(.cd-mobilmenue--konto)
.cd-mobilmenue__unter:not([hidden]) {
position: absolute;
inset: 0;
z-index: 2;
margin: 0;
padding: var(--cd-a4) var(--cd-a5) var(--cd-a6);
border-inline-start: 0;
background: var(--cd-mm-grund);
overflow-y: auto;
overscroll-behavior: contain;
animation: cdEbeneEin .24s var(--cd-kurve);
}
@keyframes cdEbeneEin {
from { transform: translateX(18%); opacity: 0; }
to   { transform: none; opacity: 1; }
}
.cd-mobilmenue__zurueck {
display: flex;
align-items: center;
gap: var(--cd-a2);
inline-size: 100%;
min-block-size: var(--cd-zielgroesse, 24px);
margin-block-end: var(--cd-a3);
padding: var(--cd-a2) 0;
background: none;
border: 0;
border-block-end: 1px solid var(--cd-mm-linie);
color: var(--cd-mm-leise);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
text-align: start;
cursor: pointer;
}
.cd-mobilmenue__zurueckPfeil {
flex: 0 0 auto;
inline-size: 0;
block-size: 0;
border-block: 5px solid transparent;
border-inline-end: 6px solid currentColor;
}
@media (prefers-reduced-motion: reduce) {
body[data-unterpunkte="ebenen"] .cd-mobilmenue .cd-mobilmenue__unter:not([hidden]) {
animation: none;
}
}
@media (max-width: 600px) {
body[data-mobilmenue="ruhe"] .cd-mobilmenue {
--cd-mm-linie: transparent;
--cd-mm-rahmen: transparent;
}
body[data-mobilmenue="ruhe"] .cd-mobilmenue__titel {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__feld {
padding-inline: var(--cd-a3);
}
body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block {
padding-block: var(--cd-a6) 0;
}
body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__blockTitel {
font-size: 10px;
letter-spacing: .18em;
margin-block-end: var(--cd-a4);
}
body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link {
font-family: var(--cd-schrift-display);
font-size: 28px;
font-weight: 500;
letter-spacing: -.01em;
padding-block: 10px;
}
body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link--start {
font-size: 20px;
color: var(--cd-mm-leise);
}
body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__auf {
inline-size: 44px;
color: var(--cd-mm-leise);
}
body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__cta {
background: none;
color: var(--cd-mm-text);
border: 1px solid var(--cd-mm-leise);
}
body[data-mobilmenue="ruhe"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__fuss {
padding-block-end: var(--cd-a6);
}
body[data-mobilmenue="vollfeld"] .cd-mobilmenue {
--cd-mm-breite: 100%;
--cd-mm-grund: var(--cd-dunkel);
--cd-mm-text: #fff;
--cd-mm-text-2: var(--cd-text-auf-dunkel);
--cd-mm-leise: var(--cd-text-auf-dunkel);
--cd-mm-linie: var(--cd-linie-auf-dunkel);
--cd-mm-rahmen: var(--cd-linie-auf-dunkel);
--cd-mm-ring: #fff;
--cd-mm-schleier: transparent;
}
body[data-mobilmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link {
font-family: var(--cd-schrift-display);
font-size: 26px;
font-weight: 500;
}
body[data-mobilmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link--start {
font-size: 18px;
color: var(--cd-mm-leise);
}
body[data-mobilmenue="vollfeld"] .cd-mobilmenue .cd-mobilmenue__cta {
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45);
}
body[data-mobilmenue="flaechen"] .cd-mobilmenue {
--cd-mm-grund: var(--cd-flaeche-2);
--cd-mm-linie: transparent;
}
body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__feld {
padding-inline: var(--cd-a4);
gap: var(--cd-a3);
}
body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__kopf {
padding-inline: 0;
}
body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
padding: var(--cd-a4) var(--cd-a5);
box-shadow: var(--cd-schatten-karte);
}
body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--start {
padding-block: var(--cd-a2);
}
body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__blockTitel {
color: var(--cd-rot);
margin-block-end: var(--cd-a2);
}
body[data-mobilmenue="flaechen"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__fuss {
padding-inline: 0;
padding-block-end: var(--cd-a5);
}
body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf:not(.cd-mobilmenue--konto) .cd-mobilmenue__block,
body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf:not(.cd-mobilmenue--konto) .cd-mobilmenue__punkt,
body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf:not(.cd-mobilmenue--konto) .cd-mobilmenue__fuss {
animation: cdKachelEin .3s var(--cd-kurve) both;
}
body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenue__block--start { animation-delay: .04s; }
body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenue__punkt:nth-child(1) { animation-delay: .10s; }
body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenue__punkt:nth-child(2) { animation-delay: .15s; }
body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenue__punkt:nth-child(3) { animation-delay: .20s; }
body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenue__punkt:nth-child(4) { animation-delay: .25s; }
body[data-mobilmenue="choreografie"] .cd-mobilmenue--auf .cd-mobilmenue__fuss { animation-delay: .30s; }
body[data-mobilmenue="choreografie"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link {
font-family: var(--cd-schrift-display);
font-size: 24px;
font-weight: 500;
}
body[data-mobilmenue="blatt"] .cd-mobilmenue {
--cd-mm-oben: auto;
--cd-mm-unten: var(--cd-mobilleiste-hoehe, 0px);
--cd-mm-start: 0;
--cd-mm-ende: 0;
--cd-mm-breite: 100%;
--cd-mm-hoehe: 78svh;
--cd-mm-max-hoehe: calc(100% - var(--cd-mobilleiste-hoehe, 0px));
--cd-mm-radius: 18px 18px 0 0;
--cd-mm-schatten: 0 -24px 48px -28px rgb(13 26 33 / .5);
--cd-mm-zu: translateY(100%);
}
body[data-mobilmenue="blatt"][data-menuebewegung="blende"] .cd-mobilmenue,
body[data-mobilmenue="blatt"][data-menuebewegung="ohne"] .cd-mobilmenue {
--cd-mm-zu: none;
}
body[data-mobilmenue="blatt"] .cd-mobilmenue__kopf {
position: relative;
padding-block-start: var(--cd-a6);
}
body[data-mobilmenue="blatt"] .cd-mobilmenue__kopf::before {
content: "";
position: absolute;
inset-block-start: 10px;
inset-inline-start: 50%;
translate: -50% 0;
inline-size: 44px;
block-size: 4px;
border-radius: 2px;
background: var(--cd-mm-rahmen);
}
body[data-mobilmenue="blatt"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link {
font-size: var(--cd-gr-h4);
}
}
@media (min-width: 601px) and (max-width: 1100px) {
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) {
--cd-mm-oben: var(--cd-a4);
--cd-mm-unten: auto;
--cd-mm-ende: var(--cd-a4);
--cd-mm-breite: min(760px, 92%);
--cd-mm-max-hoehe: calc(100% - 2 * var(--cd-a4));
--cd-mm-radius: var(--cd-r-gross);
--cd-mm-schatten: var(--cd-schatten-mega);
}
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__feld {
display: grid;
grid-template-columns: 1fr 1fr;
align-content: start;
column-gap: var(--cd-a6);
padding-block-end: var(--cd-a2);
}
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__kopf,
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--start,
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto,
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__fuss {
grid-column: 1 / -1;
}
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__fuss {
margin-block-start: var(--cd-a4);
display: flex;
align-items: center;
gap: var(--cd-a5);
}
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__cta {
inline-size: auto;
flex: 0 0 auto;
}
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__zeiten {
margin-block-start: 0;
text-align: start;
}
body[data-tabletmenue="zweispaltig"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link {
font-size: var(--cd-gr-h4);
}
body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) {
--cd-mm-oben: var(--cd-kopf-gesamt);
--cd-mm-unten: auto;
--cd-mm-start: 0;
--cd-mm-ende: 0;
--cd-mm-breite: 100%;
--cd-mm-schatten: var(--cd-schatten-mega);
--cd-mm-schleier: rgb(13 26 33 / .28);
--cd-mm-zu: translateY(-100%);
}
body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__schleier {
inset-block-start: var(--cd-kopf-gesamt);
}
body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__feld {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--cd-a6);
align-items: start;
padding: var(--cd-a5) var(--cd-rinne) var(--cd-a6);
border-block-end: 3px solid var(--cd-rot);
}
body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__kopf {
display: none;
}
body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--start {
grid-column: 1 / -1;
padding-inline: 0;
}
body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block {
padding-inline: 0;
}
body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__fuss {
grid-column: 3;
grid-row: 3;
margin-block-start: 0;
border-block-start: 0;
padding: 0;
}
body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto {
grid-column: 3;
grid-row: 2;
padding-inline: 0;
}
body[data-tabletmenue="band"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link {
font-size: var(--cd-gr-gross);
}
body[data-tabletmenue="vollfeld"] .cd-mobilmenue {
--cd-mm-breite: 100%;
--cd-mm-grund: var(--cd-dunkel);
--cd-mm-text: #fff;
--cd-mm-text-2: var(--cd-text-auf-dunkel);
--cd-mm-leise: var(--cd-text-auf-dunkel);
--cd-mm-linie: var(--cd-linie-auf-dunkel);
--cd-mm-rahmen: var(--cd-linie-auf-dunkel);
--cd-mm-ring: #fff;
--cd-mm-schleier: transparent;
}
body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__feld {
align-items: center;
}
body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__kopf,
body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block,
body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__fuss {
inline-size: min(520px, 100%);
}
body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__kopf {
padding-block: var(--cd-a6) var(--cd-a5);
}
body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link {
font-family: var(--cd-schrift-display);
font-size: 32px;
font-weight: 500;
}
body[data-tabletmenue="vollfeld"] .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__link--start {
font-size: 20px;
color: var(--cd-mm-leise);
}
body[data-tabletmenue="vollfeld"] .cd-mobilmenue .cd-mobilmenue__cta {
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45);
}
}
.cd-mobilmenue__cta--angebot {
display: none;
margin-block-end: var(--cd-a3);
}
@media (max-width: 600px) {
body[data-angebot-mobil="menue"] .cd-mobilmenue__cta--angebot,
body[data-angebot-mobil="beides"] .cd-mobilmenue__cta--angebot { display: inline-flex; }
body[data-angebot-mobil="menue"] .cd-mobilmenue__cta--telefon,
body[data-angebot-mobil="beides"] .cd-mobilmenue__cta--telefon {
background: none;
color: var(--cd-mm-text);
border: 1px solid var(--cd-mm-leise);
}
}
@media (min-width: 601px) and (max-width: 1100px) {
body[data-angebot-tablet="menue"] .cd-mobilmenue__cta--angebot,
body[data-angebot-tablet="beides"] .cd-mobilmenue__cta--angebot { display: inline-flex; }
body[data-angebot-tablet="menue"] .cd-mobilmenue__cta--telefon,
body[data-angebot-tablet="beides"] .cd-mobilmenue__cta--telefon {
background: none;
color: var(--cd-mm-text);
border: 1px solid var(--cd-mm-leise);
}
}
@keyframes cdKachelEin {
from { opacity: 0; transform: translateY(14px); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
body[data-mobilmenue="choreografie"] .cd-mobilmenue .cd-mobilmenue__block,
body[data-mobilmenue="choreografie"] .cd-mobilmenue .cd-mobilmenue__punkt,
body[data-mobilmenue="choreografie"] .cd-mobilmenue .cd-mobilmenue__fuss { animation: none; }
body[data-mobilmenue] .cd-mobilmenue,
body[data-tabletmenue] .cd-mobilmenue {
--cd-mm-zu: none;
--cd-mm-feld-deck: 1;
--cd-mm-schleier-deck: 1;
}
}
/* bahnen/cd_hero.css */
.cd-hero {
background: var(--cd-flaeche-3);
border-block-end: 1px solid var(--cd-linie);
}
.cd-hero__raster {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
gap: var(--cd-a8);
align-items: center;
}
.cd-hero--ohneNeben .cd-hero__raster {
grid-template-columns: minmax(0, 1fr);
}
.cd-hero__haupt { min-inline-size: 0; }
.cd-hero__neben { min-inline-size: 0; position: relative; }
.cd-hero__krume ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a3);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cd-text-2);
margin-block-end: var(--cd-a6);
}
.cd-hero__krume li { display: flex; align-items: center; gap: var(--cd-a3); }
.cd-hero__krume li:not(:last-child)::after {
content: "/";
color: var(--cd-text-2);
}
.cd-hero__krume a { color: var(--cd-text-2); }
.cd-hero__krume a:hover { color: var(--cd-rot); }
.cd-hero__krume [aria-current="page"] { color: var(--cd-rot); }
.cd-auf-dunkel .cd-hero__krume ol { color: var(--cd-text-auf-dunkel-2); }
.cd-auf-dunkel .cd-hero__krume a { color: var(--cd-text-auf-dunkel-2); }
.cd-auf-dunkel .cd-hero__krume a:hover { color: var(--cd-weiss); }
.cd-auf-dunkel .cd-hero__krume [aria-current="page"] { color: var(--cd-rot-auf-dunkel); }
.cd-hero__kicker {
display: flex;
align-items: center;
gap: var(--cd-a3);
margin-block-end: var(--cd-a6);
}
.cd-hero__strich {
flex: 0 0 auto;
inline-size: 28px;
block-size: 1px;
background: currentColor;
}
.cd-hero__puls {
position: relative;
flex: 0 0 auto;
inline-size: 9px;
block-size: 9px;
}
.cd-hero__puls > span {
position: absolute;
inset: 0;
border-radius: 50%;
background: currentColor;
}
.cd-hero__puls > span:last-child { animation: cdHeroPuls 2.4s ease-out 2; }
@keyframes cdHeroPuls {
0%   { transform: scale(1);   opacity: .7; }
70%  { transform: scale(2.6); opacity: 0; }
100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.cd-hero__puls > span:last-child { animation: none; opacity: .35; }
}
.cd-hero__titel { max-inline-size: 18ch; }
.cd-hero--fallstudie .cd-hero__titel { max-inline-size: 22ch; }
.cd-hero__unterzeile {
margin-block-start: var(--cd-a4);
font-size: var(--cd-gr-gross);
color: var(--cd-text-2);
}
.cd-hero__text {
margin-block-start: var(--cd-a5);
font-size: var(--cd-gr-gross);
line-height: var(--cd-zeile-text);
color: var(--cd-text-2);
max-inline-size: 60ch;
}
.cd-hero__text > * + * { margin-block-start: var(--cd-a4); }
.cd-auf-dunkel .cd-hero__text { color: var(--cd-text-auf-dunkel); }
.cd-hero__merkmale {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a4);
margin-block-start: var(--cd-a6);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-hero__merkmal { display: flex; align-items: center; gap: var(--cd-a2); }
.cd-hero__merkmal:not(:last-child)::after {
content: "\00b7";
margin-inline-start: var(--cd-a4);
color: var(--cd-text-2);
}
.cd-hero__knoepfe {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a5);
margin-block-start: var(--cd-a7);
}
.cd-hero__anrufSchlicht {
display: inline-flex;
align-items: center;
min-block-size: 24px;
padding-block: 6px 3px;
color: var(--cd-text-2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
border-block-end: 1px solid transparent;
transition: color var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-hero__anrufSchlicht:hover {
color: var(--cd-rot);
border-block-end-color: currentColor;
}
.cd-hero__anruf {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--cd-a3);
}
.cd-hero__anrufZeile {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-hero__anrufKnopf {
display: inline-flex;
align-items: center;
gap: var(--cd-a4);
padding: 18px 28px;
background: var(--cd-rot);
color: var(--cd-weiss);
border-radius: var(--cd-r-knopf);
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: var(--cd-gr-h3);
letter-spacing: -.01em;
line-height: 1.1;
transition: background var(--cd-zeit) ease, transform var(--cd-zeit) ease;
}
.cd-hero__anrufKnopf:hover {
background: var(--cd-rot-tief);
color: var(--cd-weiss);
transform: translateY(-2px);
}
.cd-auf-dunkel .cd-hero__anrufKnopf:hover { background: var(--cd-rot-hell); }
@media (prefers-reduced-motion: reduce) {
.cd-hero__anrufKnopf:hover { transform: none; }
}
.cd-hero__fuss {
margin-block-start: var(--cd-a5);
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-hero__fuss { color: var(--cd-text-auf-dunkel-2); }
.cd-hero__plaketten {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a5);
margin-block-start: var(--cd-a6);
}
.cd-hero__plakette { display: block; block-size: 44px; inline-size: auto; }
.cd-hero__bildrahmen { margin: 0; }
.cd-hero__bild {
display: block;
inline-size: 100%;
block-size: auto;
}
.cd-hero__bildhinweis {
margin-block-start: var(--cd-a2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
color: var(--cd-text-2);
}
.cd-hero__notiz {
position: relative;
max-inline-size: 22rem;
margin-block-start: calc(var(--cd-a5) * -1);
margin-inline-start: var(--cd-a4);
padding: var(--cd-a5) var(--cd-a6);
border-inline-start: 3px solid var(--cd-rot);
}
.cd-hero__notizKicker {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cd-text-auf-dunkel-2);
margin-block-end: var(--cd-a2);
}
.cd-hero__notizText { font-size: var(--cd-gr-klein); line-height: 1.55; }
.cd-hero__notizListe {
list-style: none;
margin: var(--cd-a2) 0 0;
padding: 0;
display: grid;
gap: var(--cd-a2);
}
.cd-hero__notizPunkt {
position: relative;
padding-inline-start: 1.1em;
font-size: var(--cd-gr-klein);
line-height: 1.5;
}
.cd-hero__notizPunkt::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: .62em;
inline-size: .4em;
block-size: .4em;
border-radius: 50%;
background: var(--cd-rot);
}
.cd-hero__karte {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
box-shadow: var(--cd-schatten-karte);
padding: var(--cd-a5) var(--cd-a5) var(--cd-a5);
}
.cd-hero__karteKopf {
display: flex;
align-items: center;
gap: var(--cd-a3);
padding-block-end: var(--cd-a4);
border-block-end: 1px solid var(--cd-linie-2);
margin-block-end: var(--cd-a5);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-hero__punkt {
flex: 0 0 auto;
inline-size: 9px;
block-size: 9px;
border-radius: 50%;
background: var(--cd-rot);
}
.cd-hero__frage {
padding: var(--cd-a3) var(--cd-a4);
background: var(--cd-flaeche-2);
border-radius: var(--cd-r-feld);
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
margin-block-end: var(--cd-a5);
}
.cd-hero__antwort { color: var(--cd-dunkel-2); }
.cd-hero__antwort p + p { margin-block-start: var(--cd-a3); }
.cd-hero__quellen {
margin-block-start: var(--cd-a5);
padding-block-start: var(--cd-a4);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-hero__quellenKopf {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-2);
margin-block-end: var(--cd-a3);
}
.cd-hero__quellenListe { display: grid; gap: var(--cd-a2); }
.cd-hero__quellenListe li {
display: flex;
gap: var(--cd-a3);
align-items: baseline;
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
}
.cd-hero__quellenZahl { color: var(--cd-rot); }
.cd-hero__karteFuss {
margin-block-start: var(--cd-a5);
padding-inline-start: var(--cd-a4);
border-inline-start: 2px solid var(--cd-rot);
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
}
.cd-hero--notfall { border-block-end: 4px solid var(--cd-rot); }
.cd-hero__tafel {
background: var(--cd-weiss);
border-inline-start: 3px solid var(--cd-rot);
padding: var(--cd-a6);
}
.cd-hero__tafelKicker {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cd-text-2);
margin-block-end: var(--cd-a5);
}
.cd-hero__zeilen {
display: grid;
gap: 1px;
background: var(--cd-linie-3);
border: 1px solid var(--cd-linie-3);
}
.cd-hero__zeile {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a5);
padding: var(--cd-a4) var(--cd-a5);
background: var(--cd-weiss);
}
.cd-hero__zeile dt { color: var(--cd-tinte); }
.cd-hero__zeile dd {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-2);
white-space: nowrap;
}
.cd-hero__zeile:first-child dd { color: var(--cd-rot); }
.cd-hero__tafelText {
margin-block-start: var(--cd-a5);
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
}
.cd-hero__code {
margin: 0;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-3);
border-radius: var(--cd-r-feld);
}
.cd-hero__codeLeiste {
display: flex;
align-items: center;
gap: var(--cd-a2);
padding: var(--cd-a3) var(--cd-a4);
border-block-end: 1px solid var(--cd-linie-3);
}
.cd-hero__codePunkte { display: flex; gap: var(--cd-a2); }
.cd-hero__codePunkte > span {
inline-size: 10px;
block-size: 10px;
border-radius: 50%;
background: var(--cd-linie);
}
.cd-hero__codePunkte > span:first-child { background: var(--cd-rot); }
.cd-hero__codeName {
margin-inline-start: var(--cd-a3);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-hero__codeText:focus-visible {
outline: 3px solid var(--cd-rot-auf-dunkel);
outline-offset: -3px;
}
.cd-hero__codeText {
margin: 0;
padding: var(--cd-a5);
overflow-x: auto;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
line-height: 1.85;
color: var(--cd-text-2);
}
.cd-hero__wege {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin-block-start: var(--cd-a7);
background: var(--cd-linie);
border: 1px solid var(--cd-linie);
border-block-end: 0;
}
.cd-hero__weg { background: var(--cd-weiss); }
.cd-hero__weg--dunkel { background: var(--cd-dunkel); }
.cd-hero__wegLink {
display: flex;
flex-direction: column;
gap: var(--cd-a3);
block-size: 100%;
padding: var(--cd-a6);
color: var(--cd-tinte);
transition: background var(--cd-zeit) ease;
}
.cd-hero__weg:not(.cd-hero__weg--dunkel) .cd-hero__wegLink:hover { background: var(--cd-flaeche-1); }
.cd-hero__weg--dunkel .cd-hero__wegLink:hover { background: var(--cd-dunkel-2); }
.cd-hero__wegLabel {
display: flex;
align-items: center;
gap: var(--cd-a3);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .15em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-hero__weg--dunkel .cd-hero__wegLabel { color: var(--cd-rot-auf-dunkel); }
.cd-hero__wegLabel .cd-hero__puls { color: var(--cd-rot); }
.cd-hero__weg--dunkel .cd-hero__wegLabel .cd-hero__puls { color: var(--cd-rot-auf-dunkel); }
.cd-hero__wegTitel {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: var(--cd-gr-h3);
letter-spacing: -.02em;
line-height: var(--cd-zeile-kopf);
}
.cd-hero__wegText {
font-size: var(--cd-gr-klein);
line-height: 1.6;
color: var(--cd-text-2);
}
.cd-hero__weg--dunkel .cd-hero__wegText { color: var(--cd-text-auf-dunkel); }
.cd-hero.cd-hero--fallstudie {
position: relative;
overflow: hidden;
border-block-end: 0;
padding-block: var(--cd-a6) var(--cd-a8);
}
.cd-hero__grund {
position: absolute;
inset: 0;
background-color: var(--cd-dunkel-2);
background-image: var(--cd-hero-bild);
background-size: cover;
background-position: center;
}
.cd-hero__schleier {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--cd-tinte) 92%, transparent) 0%,
color-mix(in srgb, var(--cd-tinte) 55%, transparent) 34%,
color-mix(in srgb, var(--cd-tinte) 96%, transparent) 100%
);
}
.cd-hero__fallstudie {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--cd-a9);
min-block-size: 30rem;
}
.cd-hero__eckdaten {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a3);
margin-block-end: var(--cd-a5);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-auf-dunkel);
}
.cd-hero__art {
background: var(--cd-rot);
color: var(--cd-weiss);
padding: var(--cd-a1) var(--cd-a3);
}
@media (max-width: 1419px) {
.cd-hero__raster { gap: var(--cd-a7); }
.cd-hero__titel { max-inline-size: none; }
}
@media (max-width: 900px) {
.cd-hero__raster {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a7);
align-items: start;
}
.cd-hero__wege { grid-template-columns: minmax(0, 1fr); }
.cd-hero__notiz {
max-inline-size: none;
margin-inline-start: 0;
}
.cd-hero__fallstudie { gap: var(--cd-a7); min-block-size: 0; }
}
@media (max-width: 600px) {
.cd-hero__knoepfe { align-items: stretch; gap: var(--cd-a4); }
.cd-hero__anruf { align-self: stretch; }
.cd-hero__anrufKnopf {
justify-content: center;
font-size: var(--cd-gr-h4);
padding: var(--cd-a4) var(--cd-a5);
}
.cd-hero__knoepfe .cd-knopf { justify-content: center; }
.cd-hero__zeile {
flex-direction: column;
align-items: flex-start;
gap: var(--cd-a2);
}
.cd-hero__wegLink { padding: var(--cd-a5); }
}
.cd-hero {
--cd-bahn: clamp(48px, 6.1vw, 88px);
--cd-bahn-fuss: 1.09;
}
@media (max-width: 900px) {
.cd-hero { --cd-bahn: clamp(32px, 5vw, 56px); }
}
.cd-hero--kompakt {
--cd-bahn: clamp(40px, 4.8vw, 72px);
--cd-bahn-fuss: 1;
}
@media (max-width: 900px) {
.cd-hero--kompakt { --cd-bahn: clamp(28px, 4.4vw, 48px); }
}
.cd-hero--kompakt .cd-hero__raster {
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: var(--cd-a7);
align-items: center;
}
.cd-hero--kompakt .cd-hero__titel {
max-inline-size: 16ch;
font-size: clamp(32px, 1.7rem + 2.1vw, 52px);
}
.cd-hero--kompakt .cd-hero__text {
max-inline-size: 46ch;
}
@media (max-width: 900px) {
.cd-hero--kompakt .cd-hero__raster {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--cd-a7);
}
}
.cd-hero--kompakt .cd-hero__knoepfe {
gap: var(--cd-a4) var(--cd-a5);
margin-block-start: var(--cd-a6);
}
.cd-hero__band {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--cd-a5) var(--cd-a6);
margin: var(--cd-a7) 0 0;
padding: var(--cd-a6) 0 0;
border-block-start: 1px solid var(--cd-linie);
}
.cd-hero__bandspalte { min-inline-size: 0; }
.cd-hero__bandmarke {
margin: 0 0 var(--cd-a2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-rot);
}
.cd-hero__bandtext {
margin: 0;
margin-inline-start: 0;
font-size: var(--cd-gr-klein);
line-height: 1.5;
color: var(--cd-text-2);
}
@media (max-width: 1100px) {
.cd-hero__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.cd-hero__band {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a4);
margin-block-start: var(--cd-a6);
padding-block-start: var(--cd-a5);
}
}
.cd-hero--umsatz {
--cd-bahn: clamp(40px, 4.8vw, 76px);
--cd-bahn-fuss: 1;
}
@media (max-width: 900px) {
.cd-hero--umsatz { --cd-bahn: clamp(28px, 4.4vw, 48px); }
}
.cd-hero--umsatz .cd-hero__titel {
max-inline-size: 20ch;
font-size: clamp(36px, 1.9rem + 2.6vw, 60px);
line-height: 1.06;
}
.cd-hero__titelzeile {
display: block;
}
.cd-hero__titelzeileText {
display: inline-block;
max-inline-size: 100%;
}
html.cd-bewegung .cd-hero--umsatz .cd-hero__titelzeileText {
animation: cdTippen .95s steps(22, end) 1 backwards;
animation-delay: calc((var(--cdZeile, 1) - 1) * .8s);
}
@keyframes cdTippen {
from { clip-path: inset(0 100% 0 0); }
to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
html.cd-bewegung .cd-hero--umsatz .cd-hero__titelzeileText { animation: none; }
}
.cd-hero--umsatz .cd-hero__band {
margin: var(--cd-a7) 0 0;
padding: 0;
border-block-start: 0;
gap: var(--cd-a5) var(--cd-a6);
}
.cd-hero--umsatz .cd-hero__bandspalte {
padding-block-start: var(--cd-a4);
border-block-start: 3px solid var(--cd-rot);
}
.cd-hero--umsatz .cd-hero__bandmarke {
margin: 0 0 var(--cd-a2);
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: clamp(18px, 1rem + .5vw, 22px);
letter-spacing: -.022em;
line-height: var(--cd-zeile-kopf);
text-transform: none;
color: var(--cd-tinte);
font-variant-numeric: tabular-nums;
}
.cd-hero--umsatz .cd-hero__bandtext {
font-size: var(--cd-gr-klein);
line-height: 1.5;
color: var(--cd-text-2);
}
@media (max-width: 520px) {
.cd-hero--umsatz .cd-hero__band {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a5);
}
}
@media (max-width: 900px) {
.cd-hero--umsatz .cd-hero__titel { max-inline-size: none; }
.cd-hero--umsatz .cd-hero__text { max-inline-size: none; }
.cd-hero--umsatz .cd-hero__band { margin-block-start: var(--cd-a6); }
}
/* bahnen/cd_cta.css */
.cd-cta--hell {
background: var(--cd-weiss);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-cta__raster {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: var(--cd-a8);
align-items: center;
}
.cd-cta--ohneSeite .cd-cta__raster {
grid-template-columns: minmax(0, 1fr);
}
.cd-cta__text { min-inline-size: 0; }
.cd-cta__seite {
min-inline-size: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--cd-a4);
}
.cd-cta__bild {
inline-size: min(100%, 430px);
margin: 0 auto var(--cd-a2);
}
.cd-cta__bild img {
display: block;
inline-size: 100%;
block-size: auto;
}
.cd-cta__kicker { margin-block-end: var(--cd-a4); }
.cd-cta.cd-auf-rot .cd-kicker {
color: color-mix(in srgb, var(--cd-weiss) 88%, transparent);
}
.cd-cta__unterzeile {
margin-block-start: var(--cd-a3);
font-size: var(--cd-gr-gross);
color: var(--cd-text-2);
}
.cd-cta__beitext {
margin-block-start: var(--cd-a4);
font-size: var(--cd-gr-gross);
line-height: var(--cd-zeile-text);
color: var(--cd-text-2);
max-inline-size: 58ch;
}
.cd-cta__beitext > * + * { margin-block-start: var(--cd-a4); }
.cd-cta.cd-auf-dunkel .cd-cta__beitext,
.cd-cta.cd-auf-dunkel .cd-cta__unterzeile { color: var(--cd-text-auf-dunkel); }
.cd-cta.cd-auf-rot .cd-cta__beitext,
.cd-cta.cd-auf-rot .cd-cta__unterzeile {
color: color-mix(in srgb, var(--cd-weiss) 88%, transparent);
}
.cd-cta.cd-auf-rot .cd-cta__beitext a,
.cd-cta.cd-auf-dunkel .cd-cta__beitext a {
color: var(--cd-weiss);
text-decoration: underline;
text-underline-offset: .18em;
}
.cd-cta__knoepfe {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--cd-a3);
}
.cd-cta__knopf { justify-content: space-between; }
.cd-cta__knoepfe--reihe {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.cd-cta__knoepfe--reihe .cd-cta__knopf { justify-content: center; }
.cd-cta__anrufSchlicht {
display: inline-flex;
align-items: center;
gap: var(--cd-a2);
}
.cd-cta__anrufSchlicht .cd-symbol {
inline-size: 16px;
block-size: 16px;
}
.cd-cta__telefonknopf {
background: var(--cd-rot);
border: 1px solid var(--cd-rot);
color: var(--cd-weiss);
transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease,
border-color var(--cd-zeit) ease;
}
.cd-cta__telefonknopf:hover {
background: var(--cd-rot-tief);
border-color: var(--cd-rot-tief);
color: var(--cd-weiss);
}
.cd-cta.cd-auf-dunkel .cd-cta__telefonknopf,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf {
background: var(--cd-weiss);
color: var(--cd-tinte);
}
.cd-cta.cd-auf-dunkel .cd-cta__telefonknopf:hover,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf:hover {
background: var(--cd-flaeche-2);
color: var(--cd-tinte);
}
.cd-cta.cd-auf-dunkel .cd-cta__telefonknopf .cd-symbol,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf .cd-symbol { color: var(--cd-rot); }
.cd-cta.cd-auf-rot .cd-knopf--linie {
border-color: color-mix(in srgb, var(--cd-weiss) 45%, transparent);
color: var(--cd-weiss);
}
.cd-cta.cd-auf-rot .cd-knopf--linie:hover {
border-color: var(--cd-weiss);
background: color-mix(in srgb, var(--cd-weiss) 12%, transparent);
color: var(--cd-weiss);
}
@media (prefers-reduced-motion: reduce) {
.cd-cta__telefonknopf:hover { transform: none; }
}
.cd-cta--aktion {
position: relative;
overflow: hidden;
}
.cd-cta--aktion::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 54% 70% at 88% 20%, rgba(13, 26, 33, .30), transparent 64%);
pointer-events: none;
}
.cd-cta--aktion > .cd-cta__raster { position: relative; }
.cd-cta--aktion .cd-cta__titel {
font-size: clamp(32px, 1.8rem + 1.9vw, 52px);
font-weight: 800;
line-height: 1.06;
letter-spacing: -.032em;
max-inline-size: 640px;
}
.cd-cta--aktion .cd-cta__beitext,
.cd-cta--aktion .cd-cta__unterzeile {
font-size: 18px;
line-height: 1.6;
max-inline-size: 520px;
}
.cd-cta--aktion .cd-cta__knoepfe { gap: 14px; }
.cd-cta--aktion .cd-cta__hauptknopf,
.cd-cta.cd-auf-rot .cd-cta__hauptknopf {
background: var(--cd-weiss);
border: 1px solid var(--cd-weiss);
color: var(--cd-tinte);
}
.cd-cta--aktion .cd-cta__hauptknopf:hover,
.cd-cta.cd-auf-rot .cd-cta__hauptknopf:hover {
background: var(--cd-tinte);
border-color: var(--cd-tinte);
color: var(--cd-weiss);
}
.cd-cta--aktion .cd-cta__telefonknopf,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf {
background: transparent;
border: 1px solid color-mix(in srgb, var(--cd-weiss) 55%, transparent);
color: var(--cd-weiss);
transform: none;
}
.cd-cta--aktion .cd-cta__telefonknopf:hover,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf:hover {
background: var(--cd-tinte);
border-color: var(--cd-tinte);
color: var(--cd-weiss);
transform: none;
}
.cd-cta--aktion .cd-cta__telefonknopf .cd-symbol,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf .cd-symbol { color: currentColor; }
.cd-cta__knopfbild {
flex: 0 0 auto;
inline-size: 17px;
block-size: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
}
.cd-cta--aktion :focus-visible {
outline: 3px solid var(--cd-weiss);
outline-offset: 3px;
}
.cd-cta--aktion .cd-cta__hauptknopf:focus-visible {
outline-color: var(--cd-tinte);
}
.cd-cta__kleinzeile {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1.7;
text-align: start;
color: var(--cd-text-3);
}
.cd-cta.cd-auf-dunkel .cd-cta__kleinzeile { color: var(--cd-text-auf-dunkel-2); }
.cd-cta.cd-auf-rot .cd-cta__kleinzeile {
color: var(--cd-weiss);
}
.cd-cta__kleinzeile { margin-block-start: 8px; }
@media (max-width: 1419px) {
.cd-cta__raster { gap: var(--cd-a7); }
}
@media (max-width: 900px) {
.cd-cta__raster {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
align-items: start;
}
}
@media (max-width: 600px) {
.cd-cta--aktion .cd-cta__beitext,
.cd-cta--aktion .cd-cta__unterzeile { font-size: 16px; }
}
/* bahnen/cd_karten.css */
.cd-karten__ueberschrift { color: var(--cd-tinte); }
.cd-auf-dunkel .cd-karten__ueberschrift { color: var(--cd-weiss); }
.cd-karten__beitext {
font-size: var(--cd-gr-gross);
line-height: 1.65;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-karten__beitext { color: var(--cd-text-auf-dunkel); }
.cd-karten__kopf:not(:has(.cd-karten__ueberschrift, .cd-kicker, .cd-karten__nebenkopf)) {
margin-block-end: 0;
}
.cd-karten__nebenkopf {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--cd-a5);
}
.cd-karten__bild {
display: block;
inline-size: 100%;
max-inline-size: 390px;
block-size: auto;
margin-inline-start: auto;
}
.cd-karten__knoepfe {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a3);
margin-block-start: var(--cd-a5);
}
@media (min-width: 901px) {
.cd-karten:not(.cd-karten--zeilen)
.cd-karten__nebenkopf:not(:has(.cd-karten__beitext))
.cd-karten__knoepfe {
margin-inline-start: auto;
justify-content: flex-end;
}
}
.cd-karten__anordnung > * { min-inline-size: 0; }
.cd-karten__raster {
display: grid;
gap: 2px;
background: var(--cd-linie-2);
border: 1px solid var(--cd-linie-2);
grid-template-columns: repeat(var(--cd-sp-m, 1), minmax(0, 1fr));
}
@media (min-width: 601px) {
.cd-karten__raster {
grid-template-columns: repeat(var(--cd-sp-t, 2), minmax(0, 1fr));
}
}
@media (min-width: 1101px) {
.cd-karten__raster {
grid-template-columns: repeat(var(--cd-sp-d, 3), minmax(0, 1fr));
}
}
.cd-auf-dunkel .cd-karten__raster {
background: var(--cd-dunkel-3);
border-color: var(--cd-dunkel-3);
}
.cd-karten__feld {
position: relative;
display: flex;
flex-direction: column;
gap: var(--cd-a3);
padding: var(--cd-a6) 30px 30px;
background: var(--cd-weiss);
transition: background var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-auf-dunkel .cd-karten__feld { background: var(--cd-dunkel-2); }
.cd-karten__feld--dunkel {
background: var(--cd-dunkel);
color: var(--cd-text-auf-dunkel);
}
.cd-karten__feld--dunkel .cd-karten__titel,
.cd-karten__feld--dunkel .cd-karten__titel a { color: var(--cd-weiss); }
.cd-karten__feld--dunkel .cd-karten__text { color: var(--cd-text-auf-dunkel); }
.cd-karten__feld--dunkel .cd-karten__tag,
.cd-karten__feld--dunkel .cd-karten__mehr { color: var(--cd-rot-auf-karte-dunkel); }
.cd-karten__feld--dunkel .cd-karten__mehr { border-block-start-color: var(--cd-dunkel-3); }
.cd-karten__feld--vor { box-shadow: inset 0 3px 0 var(--cd-rot); }
.cd-karten__feld:has(.cd-karten__ziel):hover {
background: var(--cd-flaeche-1);
box-shadow: inset 0 3px 0 var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__feld:has(.cd-karten__ziel):hover {
background: var(--cd-dunkel-3);
}
.cd-karten__feld--dunkel:has(.cd-karten__ziel):hover {
background: var(--cd-dunkel-3);
}
.cd-karten__kopfzeile {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a3);
}
.cd-karten__tag {
flex: 1 0 100%;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__tag { color: var(--cd-rot-auf-karte-dunkel); }
.cd-karten__symbol { margin-block-end: var(--cd-a1); }
.cd-karten__symbol .cd-symbol {
inline-size: 24px;
block-size: 24px;
}
.cd-auf-dunkel .cd-karten__symbol,
.cd-karten__feld--dunkel .cd-karten__symbol {
background: color-mix(in srgb, var(--cd-rot-auf-dunkel) 14%, transparent);
color: var(--cd-rot-auf-dunkel);
}
.cd-karten__titel {
font-size: var(--cd-gr-h4);
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-karten__titel { color: var(--cd-weiss); }
.cd-karten__ziel { color: inherit; }
.cd-karten__ziel::after {
content: "";
position: absolute;
inset: 0;
}
.cd-karten__ziel:hover { color: var(--cd-rot); }
.cd-auf-dunkel .cd-karten__ziel:hover { color: var(--cd-rot-auf-karte-dunkel); }
.cd-karten__feld:has(.cd-karten__ziel:focus-visible) {
outline: 3px solid var(--cd-rot);
outline-offset: -3px;
}
.cd-auf-dunkel .cd-karten__feld:has(.cd-karten__ziel:focus-visible) {
outline-color: var(--cd-weiss);
}
.cd-karten__ziel:focus-visible { outline: none; }
.cd-karten__text {
font-size: 15.5px;
line-height: 1.62;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-karten__text { color: var(--cd-text-auf-dunkel); }
.cd-karten__merkmale {
display: grid;
gap: var(--cd-a2);
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-karten__merkmale { color: var(--cd-text-auf-dunkel); }
.cd-karten__merkmal {
position: relative;
padding-inline-start: var(--cd-a5);
line-height: 1.55;
}
.cd-karten__merkmal::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: .55em;
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__merkmal::before { background: var(--cd-rot-auf-dunkel); }
.cd-karten__schlagworte {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: var(--cd-a2);
margin-block-start: var(--cd-a2);
}
.cd-karten__schlagwort {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-karten__schlagwort {
border-color: var(--cd-linie-auf-dunkel);
color: var(--cd-text-auf-dunkel);
}
.cd-karten__marke {
display: inline-flex;
align-items: baseline;
gap: var(--cd-a2);
align-self: flex-start;
padding: var(--cd-a2) var(--cd-a4);
background: var(--cd-tinte);
border-radius: var(--cd-r-feld);
}
.cd-karten__markeWert {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: var(--cd-gr-gross);
color: var(--cd-weiss);
}
.cd-karten__markeText {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-auf-dunkel-2);
}
.cd-karten__logo {
display: block;
inline-size: auto;
max-inline-size: 150px;
block-size: 34px;
object-fit: contain;
object-position: left center;
}
.cd-karten__kartenfussnote {
font-size: var(--cd-gr-klein);
line-height: 1.55;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-karten__kartenfussnote { color: var(--cd-text-auf-dunkel-2); }
.cd-karten__mehr {
margin-block-start: auto;
padding-block-start: var(--cd-a4);
border-block-start: 1px solid var(--cd-linie-2);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a3);
font-family: var(--cd-schrift-mono);
font-size: 10.5px;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__mehr {
border-block-start-color: var(--cd-dunkel-3);
color: var(--cd-rot-auf-karte-dunkel);
}
.cd-karten__feld:has(.cd-karten__ziel):hover .cd-karten__mehr .cd-knopf__pfeil {
transform: translateX(3px);
}
.cd-karten__fussnote {
margin-block-start: var(--cd-a5);
font-size: var(--cd-gr-klein);
line-height: 1.6;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-karten__fussnote { color: var(--cd-text-auf-dunkel-2); }
.cd-karten__hinweis {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cd-a6);
margin-block-start: var(--cd-a6);
padding: 26px 30px;
background: var(--cd-flaeche-2);
border-inline-start: 3px solid var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__hinweis { background: var(--cd-dunkel-2); }
.cd-karten__hinweisText {
max-inline-size: 760px;
font-size: 16.5px;
line-height: 1.6;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-karten__hinweisText { color: var(--cd-text-auf-dunkel); }
.cd-karten--karten .cd-karten__feld { padding: 40px 36px 34px; }
.cd-karten--karten .cd-karten__titel { font-size: var(--cd-gr-h3); font-weight: 700; }
.cd-karten--karten .cd-karten__symbol {
inline-size: auto;
block-size: auto;
margin-block-end: 0;
background: none;
}
.cd-karten--karten .cd-karten__symbol .cd-symbol {
inline-size: 27px;
block-size: 27px;
}
.cd-karten--kacheln .cd-karten__symbol {
flex: 0 0 100%;
max-inline-size: 48px;
}
.cd-karten--kacheln .cd-karten__feld { padding: 30px 26px 32px; }
.cd-karten--kacheln .cd-karten__titel { font-size: 18.5px; }
.cd-karten--verweisreihe .cd-karten__raster {
grid-template-columns: minmax(0, 1fr);
gap: 0;
background: none;
border: 0;
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-karten--verweisreihe .cd-karten__feld {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: var(--cd-a5);
row-gap: var(--cd-a2);
margin-inline: calc(var(--cd-a4) * -1);
padding: var(--cd-a5) var(--cd-a4);
background: none;
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-karten--verweisreihe .cd-karten__feld:has(.cd-karten__ziel):hover {
background: var(--cd-flaeche-3);
box-shadow: none;
}
.cd-karten--verweisreihe .cd-karten__feld:has(.cd-karten__ziel):hover .cd-knopf__pfeil {
transform: translateX(5px);
}
.cd-karten--verweisreihe .cd-knopf__pfeil {
transition: transform var(--cd-zeit) ease;
}
@media (prefers-reduced-motion: reduce) {
.cd-karten--verweisreihe .cd-knopf__pfeil { transition: none; }
.cd-karten--verweisreihe .cd-karten__feld:has(.cd-karten__ziel):hover .cd-knopf__pfeil {
transform: none;
}
}
.cd-karten--verweisreihe .cd-karten__kopfzeile { margin: 0; }
.cd-karten--verweisreihe .cd-karten__text { margin: 0; }
.cd-karten--verweisreihe .cd-karten__mehr {
grid-row: 1;
grid-column: 2;
margin: 0;
padding: 0;
border: 0;
align-self: center;
}
.cd-karten--verweisreihe .cd-karten__mehrwort { display: none; }
.cd-karten--verweisreihe .cd-knopf__pfeil {
font-size: 22px;
line-height: 1;
}
@media (min-width: 901px) {
.cd-karten--verweisreihe .cd-karten__feld {
grid-template-columns: minmax(0, 9fr) minmax(0, 12fr) auto;
align-items: center;
column-gap: var(--cd-a7);
}
.cd-karten--verweisreihe .cd-karten__mehr { grid-column: 3; }
}
.cd-karten--weiterlesen .cd-karten__feld { padding: 30px 28px 32px; }
.cd-karten--weiterlesen .cd-karten__mehr {
margin-block-start: var(--cd-a2);
padding-block-start: 0;
border-block-start: 0;
justify-content: flex-start;
font-family: var(--cd-schrift-text);
font-size: var(--cd-gr-klein);
font-weight: 600;
letter-spacing: normal;
text-transform: none;
}
.cd-karten--haken .cd-karten__feld { padding-inline-start: 54px; }
.cd-karten--haken .cd-karten__feld::before {
content: "";
position: absolute;
inset-block-start: 38px;
inset-inline-start: 28px;
inline-size: 7px;
block-size: 13px;
border-inline-end: 2px solid var(--cd-rot);
border-block-end: 2px solid var(--cd-rot);
transform: rotate(42deg);
}
.cd-auf-dunkel.cd-karten--haken .cd-karten__feld::before {
border-color: var(--cd-rot-auf-dunkel);
}
.cd-karten--haken .cd-karten__titel { font-size: 18.5px; }
.cd-karten--zeilen .cd-karten__anordnung {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 72px;
align-items: start;
}
.cd-karten--zeilen .cd-karten__kopf {
display: block;
margin-block-end: 0;
}
.cd-karten--zeilen .cd-karten__beitext { margin-block-start: var(--cd-a4); }
.cd-karten--zeilen .cd-karten__raster { grid-template-columns: minmax(0, 1fr); }
.cd-karten--zeilen .cd-karten__feld {
display: grid;
grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
gap: var(--cd-a5);
align-items: baseline;
padding: var(--cd-a5) 28px;
}
.cd-karten--zeilen .cd-karten__kopfzeile { display: contents; }
.cd-karten--zeilen .cd-karten__titel { font-size: 16.5px; }
.cd-bahn.cd-karten--band { padding-block: 0; }
.cd-karten--band .cd-karten__raster {
gap: 0;
background: none;
border: 0;
}
.cd-karten--band .cd-karten__feld {
flex-direction: row;
align-items: center;
gap: 18px;
padding: 34px 30px;
background: none;
border-inline-start: 1px solid var(--cd-dunkel-2);
}
.cd-karten--band .cd-karten__feld:first-child {
padding-inline-start: 0;
border-inline-start: 0;
}
.cd-karten--band .cd-karten__feld:last-child { padding-inline-end: 0; }
.cd-karten--band .cd-karten__feld:hover { background: none; box-shadow: none; }
.cd-karten--band .cd-karten__symbol {
inline-size: auto;
block-size: auto;
margin-block-end: 0;
background: none;
color: var(--cd-rot-auf-dunkel);
}
.cd-karten--band .cd-karten__symbol .cd-symbol {
inline-size: 30px;
block-size: 30px;
}
.cd-karten--band .cd-karten__titel {
font-size: 19px;
font-weight: 600;
}
.cd-karten--band .cd-karten__text {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-auf-dunkel-2);
}
.cd-karten--band .cd-karten__symbol { flex: 0 0 auto; }
.cd-karten--band .cd-karten__inhalt { flex: 1 1 auto; }
.cd-karten--kennzahlen .cd-karten__raster {
gap: 0;
background: none;
border: 0;
border-block: 1px solid var(--cd-linie);
align-items: stretch;
}
.cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__raster {
border-block-color: var(--cd-dunkel-3);
}
.cd-karten--kennzahlen .cd-karten__feld {
--cd-kz-einzug: var(--cd-a6);
position: relative;
gap: var(--cd-a2);
padding-block: var(--cd-a7) var(--cd-a6);
padding-inline: var(--cd-kz-einzug) var(--cd-a6);
background: none;
border-inline-start: 1px solid var(--cd-linie);
}
.cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__feld {
border-inline-start-color: var(--cd-dunkel-3);
}
.cd-karten--kennzahlen .cd-karten__feld:first-child {
--cd-kz-einzug: 0px;
border-inline-start: 0;
}
.cd-karten--kennzahlen .cd-karten__feld:hover { background: none; box-shadow: none; }
.cd-karten--kennzahlen .cd-karten__feld::before {
content: '';
position: absolute;
inset-block-start: -1px;
inset-inline-start: var(--cd-kz-einzug);
inline-size: 36px;
block-size: 2px;
background: var(--cd-rot);
}
.cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__feld::before {
background: var(--cd-rot-auf-dunkel);
}
html.cd-bewegung .cd-karten--kennzahlen .cd-karten__feld::before {
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld::before { transform: scaleX(1); }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(2)::before { transition-delay: .10s; }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(3)::before { transition-delay: .18s; }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(4)::before { transition-delay: .26s; }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(5)::before { transition-delay: .34s; }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(6)::before { transition-delay: .42s; }
.cd-karten__inhalt {
display: grid;
gap: var(--cd-a1);
min-inline-size: 0;
}
.cd-karten__bezeichnung {
font-family: var(--cd-schrift-mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-karten__bezeichnung { color: var(--cd-text-auf-dunkel-2); }
.cd-karten__wert {
font-family: var(--cd-schrift-display);
font-weight: 600;
font-size: var(--cd-gr-h3);
line-height: 1.15;
letter-spacing: -.018em;
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-karten__wert { color: var(--cd-weiss); }
.cd-karten--kennzahlen .cd-karten__inhalt { gap: var(--cd-a2); }
.cd-karten--kennzahlen .cd-karten__bezeichnung {
font-size: var(--cd-gr-mikro);
letter-spacing: .16em;
}
.cd-karten--kennzahlen .cd-karten__wert {
font-size: var(--cd-gr-kennzahl);
line-height: 1.06;
letter-spacing: -.028em;
font-variant-numeric: tabular-nums lining-nums;
hyphens: auto;
}
.cd-karten--kennzahlen .cd-karten__text {
margin-block-start: var(--cd-a2);
max-inline-size: 46ch;
}
.cd-karten--kennzahlen .cd-karten__fussnote {
margin-block-start: var(--cd-a5);
padding-inline-start: var(--cd-a4);
border-inline-start: 2px solid var(--cd-linie);
max-inline-size: 74ch;
}
.cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__fussnote {
border-inline-start-color: var(--cd-dunkel-3);
}
.cd-karten--kennzahlen .cd-karten__knoepfe { margin-block-start: var(--cd-a7); }
@media (max-width: 1100px) {
.cd-karten--zeilen .cd-karten__anordnung { gap: var(--cd-a7); }
}
@media (max-width: 900px) {
.cd-karten--zeilen .cd-karten__anordnung {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
}
.cd-karten--zeilen .cd-karten__feld {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a2);
}
.cd-karten__nebenkopf { align-items: stretch; }
.cd-karten__bild { margin-inline: auto; }
.cd-karten--band .cd-karten__feld {
padding-inline: 0;
border-inline-start: 0;
border-block-start: 1px solid var(--cd-dunkel-2);
}
.cd-karten--band .cd-karten__feld:first-child {
border-block-start: 0;
}
.cd-karten--kennzahlen .cd-karten__raster {
grid-template-columns: minmax(0, 1fr);
}
.cd-karten--kennzahlen .cd-karten__feld {
--cd-kz-einzug: 0px;
padding-block: var(--cd-a6);
padding-inline: 0;
border-inline-start: 0;
border-block-start: 1px solid var(--cd-linie);
}
.cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__feld {
border-block-start-color: var(--cd-dunkel-3);
border-inline-start: 0;
}
.cd-karten--kennzahlen .cd-karten__feld:first-child {
border-block-start: 0;
}
.cd-karten__hinweis { flex-direction: column; align-items: flex-start; gap: var(--cd-a4); }
}
@media (max-width: 600px) {
.cd-karten--karten .cd-karten__feld { padding: 28px var(--cd-a5) var(--cd-a5); }
.cd-karten--haken .cd-karten__feld { padding-inline-start: 46px; }
.cd-karten--haken .cd-karten__feld::before { inset-inline-start: var(--cd-a5); inset-block-start: 30px; }
.cd-karten__hinweis { padding: var(--cd-a5); }
}
@media (prefers-reduced-motion: reduce) {
.cd-karten__feld:has(.cd-karten__ziel):hover .cd-karten__mehr .cd-knopf__pfeil {
transform: none;
}
}
.cd-karten--symbolueber .cd-karten__symbol {
flex: 1 0 100%;
margin-block-end: var(--cd-a2);
justify-content: flex-start;
}
.cd-karten--sprung .cd-karten__raster {
gap: var(--cd-a4);
background: none;
border: 0;
}
.cd-karten--sprung .cd-karten__feld {
flex-direction: row;
align-items: center;
min-block-size: 44px;
padding: 15px 18px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-2);
border-radius: 3px;
}
.cd-karten--sprung .cd-karten__feld:hover {
border-color: var(--cd-rot);
box-shadow: none;
transform: none;
}
.cd-karten--sprung .cd-karten__kopfzeile {
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
grid-template-areas:
"zeichen zahl"
"zeichen name";
column-gap: 16px;
align-items: center;
inline-size: 100%;
}
.cd-karten--sprung .cd-karten__symbol {
grid-area: zeichen;
inline-size: 50px;
block-size: 50px;
margin-block-end: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--cd-flaeche-2);
border: 1px solid var(--cd-linie);
border-radius: 3px;
color: var(--cd-rot);
}
.cd-karten--sprung .cd-karten__symbol .cd-symbol {
inline-size: 24px;
block-size: 24px;
}
.cd-karten--sprung .cd-karten__tag {
grid-area: zahl;
flex: none;
margin-block-end: 5px;
font-size: 11px;
letter-spacing: .16em;
color: var(--cd-rot);
}
.cd-karten--sprung .cd-karten__titel {
grid-area: name;
font-size: 16.5px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.015em;
}
.cd-karten--sprung .cd-karten__feld .cd-karten__ziel {
text-decoration: none;
}
.cd-karten--sprung :is(.cd-karten__text, .cd-karten__merkmale,
.cd-karten__schlagworte, .cd-karten__marke, .cd-karten__mehr,
.cd-karten__logo, .cd-karten__kartenfussnote) {
display: none;
}
/* bahnen/cd_logoband.css */
.cd-logoband {
--cd-logoband-grund: var(--cd-weiss);
--cd-logoband-dauer: 52s;
}
.cd-logoband.cd-auf-dunkel { --cd-logoband-grund: var(--cd-dunkel); }
.cd-logoband__ueberschrift {
font-size: var(--cd-gr-h3);
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-logoband__ueberschrift { color: var(--cd-weiss); }
.cd-logoband__kicker {
color: var(--cd-text-3);
letter-spacing: .16em;
}
.cd-auf-dunkel .cd-logoband__kicker { color: var(--cd-text-auf-dunkel-2); }
.cd-logoband__fenster {
position: relative;
overflow: hidden;
padding-block: var(--cd-a2);
}
.cd-logoband__lauf {
display: flex;
align-items: center;
inline-size: max-content;
animation: cdLogobandLauf var(--cd-logoband-dauer) linear infinite;
}
.cd-logoband--zeigerhalt .cd-logoband__fenster:hover .cd-logoband__lauf {
animation-play-state: paused;
}
@keyframes cdLogobandLauf {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.cd-logoband__reihe {
display: flex;
align-items: center;
}
.cd-logoband__stueck {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
inline-size: 150px;
margin-inline-end: 64px;
}
.cd-logoband__logo {
display: block;
max-inline-size: 100%;
block-size: 42px;
object-fit: contain;
filter: grayscale(1);
opacity: .6;
transition: filter .3s ease, opacity .3s ease;
}
.cd-logoband__stueck:hover .cd-logoband__logo {
filter: grayscale(0);
opacity: 1;
}
.cd-auf-dunkel .cd-logoband__logo { opacity: .78; }
.cd-logoband__logo--normal {
filter: grayscale(1);
opacity: .6;
}
.cd-logoband__logo--kraeftig {
filter: grayscale(1);
opacity: 1;
}
.cd-auf-dunkel .cd-logoband__logo--kraeftig { opacity: 1; }
.cd-logoband__schleier {
position: absolute;
inset-block: 0;
inline-size: 130px;
pointer-events: none;
}
.cd-logoband__schleier--links {
inset-inline-start: 0;
background: linear-gradient(90deg, var(--cd-logoband-grund) 12%, transparent);
}
.cd-logoband__schleier--rechts {
inset-inline-end: 0;
background: linear-gradient(270deg, var(--cd-logoband-grund) 12%, transparent);
}
.cd-logoband__knopf {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
inline-size: 52px;
block-size: 52px;
padding: 0;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-knopf);
color: var(--cd-text-3);
cursor: pointer;
transition: border-color var(--cd-zeit) ease, color var(--cd-zeit) ease,
background var(--cd-zeit) ease, opacity var(--cd-zeit) ease;
}
.cd-logoband__knopf:hover {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-auf-dunkel .cd-logoband__knopf {
background: transparent;
border-color: var(--cd-linie-auf-dunkel);
color: var(--cd-text-auf-dunkel);
}
.cd-auf-dunkel .cd-logoband__knopf:hover {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
}
@media (hover: hover) and (pointer: fine) {
.cd-logoband__knopf--leise { opacity: .55; }
.cd-logoband:hover .cd-logoband__knopf--leise,
.cd-logoband:focus-within .cd-logoband__knopf--leise { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.cd-logoband__knopf--leise { opacity: 1; }
}
.cd-logoband__schalter:focus-visible ~ .cd-logoband__knopf {
outline: 3px solid var(--cd-rot);
outline-offset: 2px;
}
.cd-auf-dunkel .cd-logoband__schalter:focus-visible ~ .cd-logoband__knopf {
outline-color: var(--cd-weiss);
}
.cd-logoband__zeichen {
flex: 0 0 auto;
inline-size: 12px;
block-size: 13px;
border-inline: 4px solid currentColor;
}
.cd-logoband__wort--weiter { display: none; }
.cd-logoband__schalter:checked ~ .cd-logoband__fenster .cd-logoband__lauf {
animation-play-state: paused;
}
.cd-logoband__schalter:checked ~ .cd-logoband__knopf .cd-logoband__wort--halt { display: none; }
.cd-logoband__schalter:checked ~ .cd-logoband__knopf .cd-logoband__wort--weiter { display: inline; }
.cd-logoband__schalter:checked ~ .cd-logoband__knopf .cd-logoband__zeichen {
inline-size: 0;
block-size: 0;
border: 0;
border-inline-start: 11px solid currentColor;
border-block: 6.5px solid transparent;
}
.cd-logoband__schalter:checked ~ .cd-logoband__fenster { overflow-x: auto; }
.cd-logoband__fenster {
scrollbar-color: var(--cd-text-3) var(--cd-flaeche-2);
}
.cd-auf-dunkel .cd-logoband__fenster {
scrollbar-color: var(--cd-text-auf-dunkel-2) var(--cd-dunkel-2);
}
.cd-logoband--band .cd-logoband__kicker {
display: block;
margin-block-end: var(--cd-a6);
text-align: center;
}
.cd-logoband--band .cd-logoband__ueberschrift {
margin-block-end: var(--cd-a4);
text-align: center;
}
.cd-logoband--band .cd-logoband__knopf { margin-block-start: var(--cd-a5); }
.cd-bahn.cd-logoband--zeile {
padding-block: var(--cd-a7);
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-bahn.cd-logoband--zeile.cd-auf-dunkel { border-block-end-color: var(--cd-dunkel-3); }
.cd-logoband--zeile .cd-logoband__zeile {
display: flex;
align-items: center;
gap: var(--cd-a7);
}
.cd-logoband--zeile .cd-logoband__kicker {
flex: 0 0 auto;
margin-block-end: 0;
max-inline-size: 14rem;
}
.cd-logoband--zeile .cd-logoband__fenster { flex: 1 1 auto; min-inline-size: 0; }
.cd-logoband--zeile .cd-logoband__knopf { flex: 0 0 auto; align-self: center; }
.cd-logoband--zeile .cd-logoband__logo { block-size: 34px; }
.cd-logoband--zeile .cd-logoband__stueck {
inline-size: 130px;
margin-inline-end: 52px;
}
@media (max-width: 900px) {
.cd-logoband--zeile .cd-logoband__zeile {
flex-wrap: wrap;
gap: var(--cd-a4);
}
.cd-logoband--zeile .cd-logoband__kicker { max-inline-size: none; }
.cd-logoband--zeile .cd-logoband__fenster { flex: 1 1 100%; }
.cd-logoband__schleier { inline-size: 60px; }
}
@media (max-width: 600px) {
.cd-logoband__stueck,
.cd-logoband--zeile .cd-logoband__stueck {
inline-size: 110px;
margin-inline-end: var(--cd-a6);
}
.cd-logoband__logo { block-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.cd-logoband__lauf {
animation: none;
flex-wrap: wrap;
inline-size: 100%;
justify-content: center;
}
.cd-logoband__reihe {
flex-wrap: wrap;
justify-content: center;
row-gap: var(--cd-a5);
inline-size: 100%;
}
.cd-logoband__reihe[aria-hidden] { display: none; }
.cd-logoband__stueck { margin-inline-end: var(--cd-a6); }
.cd-logoband__schleier { display: none; }
.cd-logoband__knopf { display: none; }
.cd-logoband__schalter { display: none; }
.cd-logoband__logo { filter: none; opacity: 1; }
}
.cd-logoband--band .cd-logoband__zeile {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) 52px;
align-items: center;
row-gap: var(--cd-a6);
}
.cd-logoband--band .cd-logoband__ueberschrift,
.cd-logoband--band .cd-logoband__kicker {
grid-column: 2;
margin-block-end: 0;
}
.cd-logoband--band .cd-logoband__fenster {
grid-column: 1 / -1;
}
.cd-logoband--band .cd-logoband__knopf {
grid-column: 3;
grid-row: 1;
justify-self: end;
align-self: center;
margin-block-start: 0;
}
/* bahnen/cd_schritte.css */
.cd-schritte {
--cd-schritt-aktiv: var(--cd-rot);
--cd-schritt-ruhe: var(--cd-text-schwach);
--cd-schritt-linie: var(--cd-linie-2);
--cd-schritt-flaeche: var(--cd-weiss);
--cd-schritt-takt: 3.2s;
}
.cd-schritte.cd-auf-dunkel {
--cd-schritt-aktiv: var(--cd-rot-auf-dunkel);
--cd-schritt-ruhe: var(--cd-text-auf-dunkel-2);
--cd-schritt-linie: var(--cd-dunkel-3);
--cd-schritt-flaeche: var(--cd-dunkel-2);
}
.cd-schritte__titel {
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h2);
font-weight: 700;
line-height: var(--cd-zeile-kopf);
letter-spacing: -.028em;
color: var(--cd-tinte);
}
.cd-schritte__nebenkopf {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--cd-a4);
}
.cd-schritte__beitext {
font-size: var(--cd-gr-gross);
line-height: var(--cd-zeile-text);
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-schritte__beitext { color: var(--cd-text-auf-dunkel); }
.cd-schritte__kopfknopf { margin-block-start: var(--cd-a3); }
.cd-schritte__kopf--textunten .cd-kopfzeile__text .cd-schritte__beitext {
margin-block-start: var(--cd-a4);
max-inline-size: 62ch;
}
.cd-schritte__kopf--textunten .cd-kopfzeile__text .cd-schritte__beitext + .cd-schritte__beitext {
margin-block-start: var(--cd-a3);
}
.cd-schritte__kopf--textunten .cd-schritte__bild {
max-inline-size: 100%;
}
.cd-schritte__bild {
display: block;
inline-size: 100%;
max-inline-size: 390px;
block-size: auto;
margin-inline-start: auto;
}
.cd-schritte--kacheln .cd-schritte__kopf,
.cd-schritte--fragen .cd-schritte__kopf,
.cd-schritte--zeitpunkte .cd-schritte__kopf {
grid-template-columns: minmax(0, 1fr);
align-items: start;
max-inline-size: 52rem;
}
.cd-schritte .cd-schritte__kopf--bild {
grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
align-items: center;
max-inline-size: none;
}
.cd-schritte__liste {
display: grid;
grid-template-columns: repeat(var(--cd-spalten, 4), minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.cd-schritte__punkt {
position: relative;
display: flex;
flex-direction: column;
gap: var(--cd-a4);
}
.cd-schritte__inhalt {
display: flex;
flex-direction: column;
gap: var(--cd-a3);
}
.cd-schritte__nummer {
font-family: var(--cd-schrift-display);
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: -.04em;
color: var(--cd-schritt-aktiv);
}
.cd-schritte__punkttitel {
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h4);
font-weight: 600;
line-height: 1.26;
letter-spacing: -.018em;
color: var(--cd-tinte);
}
.cd-schritte__punkttext {
font-size: var(--cd-gr-text);
line-height: var(--cd-zeile-text);
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-schritte__punkttext { color: var(--cd-text-auf-dunkel); }
.cd-schritte__symbol {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
border-radius: var(--cd-r-knopf);
background: color-mix(in srgb, var(--cd-schritt-aktiv) 8%, transparent);
color: var(--cd-schritt-aktiv);
}
.cd-schritte__zusatz {
margin-block-start: var(--cd-a2);
padding-block-start: var(--cd-a4);
border-block-start: 1px solid var(--cd-schritt-linie);
font-size: var(--cd-gr-klein);
line-height: 1.55;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-schritte__zusatz { color: var(--cd-text-auf-dunkel-2); }
.cd-schritte__zusatzwort {
font-weight: 600;
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-schritte__zusatzwort { color: var(--cd-weiss); }
.cd-schritte__begruendung {
font-size: var(--cd-gr-klein);
line-height: 1.55;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-schritte__begruendung { color: var(--cd-text-auf-dunkel-2); }
.cd-schritte__punktfussnote {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
line-height: 1.5;
letter-spacing: .04em;
color: var(--cd-text-schwach);
}
.cd-auf-dunkel .cd-schritte__punktfussnote { color: var(--cd-text-auf-dunkel-2); }
.cd-schritte--zeitstrahl .cd-schritte__liste {
border-block-start: 2px solid var(--cd-rot);
}
.cd-schritte--zeitstrahl .cd-schritte__punkt {
padding: var(--cd-a6) var(--cd-a6) var(--cd-a7);
border-inline-start: 1px solid var(--cd-schritt-linie);
}
.cd-schritte--zeitstrahl .cd-schritte__punkt:first-child {
padding-inline-start: 0;
border-inline-start: 0;
}
.cd-schritte__marke {
position: absolute;
inset-block-start: -6px;
inset-inline-start: var(--cd-a6);
inline-size: 11px;
block-size: 11px;
border-radius: 50%;
background: var(--cd-schritt-aktiv);
}
.cd-schritte--zeitstrahl .cd-schritte__punkt:first-child .cd-schritte__marke {
inset-inline-start: 0;
}
.cd-schritte--karten .cd-schritte__liste {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
background: var(--cd-schritt-linie);
border: 1px solid var(--cd-schritt-linie);
}
.cd-schritte--karten .cd-schritte__punkt {
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr);
gap: var(--cd-a5);
align-items: start;
padding: var(--cd-a5) var(--cd-a6);
background: var(--cd-schritt-flaeche);
}
.cd-schritte--karten .cd-schritte__nummer { font-size: 1.5rem; }
.cd-schritte--kacheln .cd-schritte__liste,
.cd-schritte--fragen .cd-schritte__liste {
gap: 2px;
background: var(--cd-schritt-linie);
border: 1px solid var(--cd-schritt-linie);
}
.cd-schritte--kacheln .cd-schritte__punkt,
.cd-schritte--fragen .cd-schritte__punkt {
padding: var(--cd-a6) var(--cd-a5) var(--cd-a7);
background: var(--cd-schritt-flaeche);
}
.cd-schritte--fragen .cd-schritte__nummer {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-auf-dunkel.cd-schritte--fragen .cd-schritte__nummer { color: var(--cd-text-auf-dunkel-2); }
.cd-schritte--fragen .cd-schritte__punkttitel { font-size: var(--cd-gr-gross); }
.cd-schritte--zeitpunkte .cd-schritte__liste {
grid-template-columns: minmax(0, 1fr);
background: var(--cd-flaeche-1);
border: 1px solid var(--cd-schritt-linie);
}
.cd-auf-dunkel.cd-schritte--zeitpunkte .cd-schritte__liste {
background: var(--cd-schritt-flaeche);
}
.cd-schritte--zeitpunkte .cd-schritte__punkt {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--cd-a3) var(--cd-a5);
padding: var(--cd-a5) var(--cd-a6);
border-block-start: 1px solid var(--cd-schritt-linie);
}
.cd-schritte--zeitpunkte .cd-schritte__punkt:first-child { border-block-start: 0; }
.cd-schritte__zeitmarke {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .06em;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-schritte__zeitmarke { color: var(--cd-text-auf-dunkel-2); }
.cd-schritte__status { white-space: nowrap; }
.cd-auf-dunkel .cd-schritte__status {
border-color: var(--cd-linie-auf-dunkel);
color: var(--cd-text-auf-dunkel);
}
.cd-schritte__band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cd-a5);
margin-block-start: var(--cd-a6);
padding: var(--cd-a5) var(--cd-a6);
background: var(--cd-flaeche-2);
border-inline-start: 3px solid var(--cd-rot);
}
.cd-auf-dunkel .cd-schritte__band { background: var(--cd-schritt-flaeche); }
.cd-schritte__bandtext {
max-inline-size: 62ch;
font-size: var(--cd-gr-text);
line-height: var(--cd-zeile-text);
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-schritte__bandtext { color: var(--cd-text-auf-dunkel); }
.cd-schritte--zeitpunkte .cd-schritte__band {
margin-block-start: var(--cd-a4);
padding: 0;
background: none;
border-inline-start: 0;
}
.cd-schritte--zeitpunkte .cd-schritte__bandtext {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
line-height: 1.9;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-auf-dunkel.cd-schritte--zeitpunkte .cd-schritte__bandtext {
color: var(--cd-text-auf-dunkel-2);
}
@keyframes cdSchritteNummer {
0%, 20%  { color: var(--cd-schritt-aktiv); }
24%, 96% { color: var(--cd-schritt-ruhe); }
100%     { color: var(--cd-schritt-aktiv); }
}
@keyframes cdSchritteMarke {
0%, 20%  { background: var(--cd-schritt-aktiv); transform: scale(1.15); }
24%, 96% { background: var(--cd-schritt-ruhe); transform: scale(1); }
100%     { background: var(--cd-schritt-aktiv); transform: scale(1.15); }
}
.cd-schritte--selbstlauf .cd-schritte__nummer {
color: var(--cd-schritt-ruhe);
animation: cdSchritteNummer calc(var(--cd-schritte-anzahl, 4) * var(--cd-schritt-takt)) ease-in-out infinite;
animation-delay: calc(var(--cd-schritt, 0) * var(--cd-schritt-takt));
}
.cd-schritte--selbstlauf .cd-schritte__marke {
background: var(--cd-schritt-ruhe);
animation: cdSchritteMarke calc(var(--cd-schritte-anzahl, 4) * var(--cd-schritt-takt)) ease-in-out infinite;
animation-delay: calc(var(--cd-schritt, 0) * var(--cd-schritt-takt));
}
.cd-schritte__haltmarke {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--cd-a2);
min-block-size: 44px;
min-inline-size: 210px;
margin-block-end: var(--cd-a5);
padding: 8px 14px;
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-feld);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
color: var(--cd-tinte);
cursor: pointer;
}
.cd-auf-dunkel .cd-schritte__haltmarke {
border-color: var(--cd-linie-auf-dunkel);
color: var(--cd-weiss);
}
.cd-schritte__haltmarke:hover { border-color: var(--cd-rot); }
.cd-schritte__halt:focus-visible + .cd-schritte__haltmarke {
outline: 2px solid var(--cd-rot);
outline-offset: 2px;
}
.cd-auf-dunkel .cd-schritte__halt:focus-visible + .cd-schritte__haltmarke {
outline-color: var(--cd-weiss);
}
.cd-schritte__haltwort--aus { display: none; }
.cd-schritte__halt:checked + .cd-schritte__haltmarke .cd-schritte__haltwort--an { display: none; }
.cd-schritte__halt:checked + .cd-schritte__haltmarke .cd-schritte__haltwort--aus { display: inline; }
.cd-schritte__halt:checked ~ .cd-schritte__liste .cd-schritte__nummer,
.cd-schritte__halt:checked ~ .cd-schritte__liste .cd-schritte__marke {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.cd-schritte--selbstlauf .cd-schritte__nummer {
animation: none;
color: var(--cd-schritt-aktiv);
}
.cd-schritte--selbstlauf .cd-schritte__marke {
animation: none;
background: var(--cd-schritt-aktiv);
}
.cd-schritte__halt,
.cd-schritte__haltmarke { display: none; }
}
@media (max-width: 1100px) {
.cd-schritte__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-schritte--karten .cd-schritte__liste,
.cd-schritte--zeitpunkte .cd-schritte__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.cd-schritte .cd-schritte__kopf--bild {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.cd-schritte__bild { margin-inline-start: 0; }
.cd-schritte--zeitpunkte .cd-schritte__punkt {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.cd-schritte__status { justify-self: start; }
}
@media (max-width: 600px) {
.cd-schritte__liste,
.cd-schritte--karten .cd-schritte__liste { grid-template-columns: minmax(0, 1fr); }
.cd-schritte--zeitstrahl .cd-schritte__punkt {
padding: var(--cd-a6) 0;
border-inline-start: 0;
border-block-start: 1px solid var(--cd-schritt-linie);
}
.cd-schritte--zeitstrahl .cd-schritte__punkt:first-child { border-block-start: 0; }
.cd-schritte__marke { inset-inline-start: 0; }
.cd-schritte--karten .cd-schritte__punkt {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a3);
}
.cd-schritte__band { padding: var(--cd-a5); }
}
@media (min-width: 601px) {
.cd-schritte--zeitstrahl .cd-schritte__liste { border-block-start: 0; }
.cd-schritte--zeitstrahl .cd-schritte__punkt,
.cd-schritte--zeitstrahl .cd-schritte__punkt:first-child {
border-block-start: 2px solid var(--cd-rot);
border-inline-start: 0;
padding: var(--cd-a6) var(--cd-a7) var(--cd-a7) 0;
}
.cd-schritte--zeitstrahl .cd-schritte__marke { inset-inline-start: 0; }
}
@media (max-width: 600px) {
.cd-schritte--zeitstrahl .cd-schritte__liste { border-block-start: 0; }
.cd-schritte--zeitstrahl .cd-schritte__punkt:first-child {
border-block-start: 2px solid var(--cd-rot);
}
}
/* bahnen/cd_aussagenband.css */
.cd-aussagenband {
--cd-aussage-linie: var(--cd-linie-2);
--cd-aussage-flaeche: var(--cd-weiss);
}
.cd-aussagenband.cd-auf-dunkel {
--cd-aussage-linie: var(--cd-dunkel-3);
--cd-aussage-flaeche: var(--cd-dunkel-2);
}
.cd-aussagenband__kopf {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--cd-a4) var(--cd-a7);
margin-block-end: var(--cd-a6);
}
.cd-aussagenband__kopftext .cd-kicker { margin-block-end: 0; }
.cd-aussagenband__titel {
margin-block-start: var(--cd-a3);
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h3);
font-weight: 700;
line-height: var(--cd-zeile-kopf);
letter-spacing: -.024em;
color: var(--cd-tinte);
}
.cd-aussagenband__einleitung {
max-inline-size: 46ch;
font-size: var(--cd-gr-text);
line-height: 1.55;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-aussagenband__einleitung { color: var(--cd-text-auf-dunkel-2); }
.cd-aussagenband__liste {
display: grid;
grid-template-columns: repeat(var(--cd-spalten, 4), minmax(0, 1fr));
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
background: var(--cd-aussage-linie);
border: 1px solid var(--cd-aussage-linie);
}
.cd-aussagenband__punkt {
display: flex;
flex-direction: column;
gap: var(--cd-a3);
padding: var(--cd-a5) var(--cd-a5) var(--cd-a6);
background: var(--cd-aussage-flaeche);
}
.cd-aussagenband__satz {
font-size: var(--cd-gr-text);
line-height: 1.58;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-aussagenband__satz { color: var(--cd-text-auf-dunkel); }
.cd-aussagenband__satzwort {
font-weight: 600;
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-aussagenband__satzwort { color: var(--cd-weiss); }
.cd-aussagenband__punkttitel {
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-gross);
font-weight: 600;
line-height: 1.3;
letter-spacing: -.015em;
color: var(--cd-tinte);
}
.cd-aussagenband__pfeil {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-text);
line-height: 1;
color: var(--cd-rot);
}
.cd-auf-dunkel .cd-aussagenband__pfeil { color: var(--cd-rot-auf-dunkel); }
.cd-aussagenband--wenndann .cd-aussagenband__punkt {
justify-content: space-between;
padding: var(--cd-a5);
background: var(--cd-flaeche-1);
}
.cd-auf-dunkel.cd-aussagenband--wenndann .cd-aussagenband__punkt {
background: var(--cd-aussage-flaeche);
}
.cd-aussagenband__wenn {
min-block-size: 3.2em;
font-size: var(--cd-gr-text);
line-height: 1.55;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-aussagenband__wenn { color: var(--cd-text-auf-dunkel); }
.cd-aussagenband__dann {
display: flex;
align-items: center;
gap: var(--cd-a3);
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h4);
font-weight: 700;
letter-spacing: -.02em;
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-aussagenband__dann { color: var(--cd-weiss); }
.cd-aussagenband--schlagworte .cd-aussagenband__liste {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a3);
background: none;
border: 0;
}
.cd-aussagenband--schlagworte .cd-aussagenband__punkt {
padding: 0;
background: none;
}
.cd-aussagenband__wort {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .04em;
color: var(--cd-tinte);
background: var(--cd-weiss);
}
.cd-auf-dunkel .cd-aussagenband__wort {
border-color: var(--cd-linie-auf-dunkel);
background: var(--cd-aussage-flaeche);
color: var(--cd-text-auf-dunkel);
}
.cd-aussagenband__fussnote {
margin-block-start: var(--cd-a4);
font-size: var(--cd-gr-klein);
line-height: 1.6;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-aussagenband__fussnote { color: var(--cd-text-auf-dunkel-2); }
@media (max-width: 1100px) {
.cd-aussagenband__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.cd-aussagenband__liste { grid-template-columns: minmax(0, 1fr); }
.cd-aussagenband__wenn { min-block-size: 0; }
}
/* bahnen/cd_bahn.css */
.cd-zug {
--zug-linie: var(--cd-linie-2);
--zug-feld: var(--cd-weiss);
--zug-text: var(--cd-text-2);
--zug-akzent: var(--cd-rot);
--zug-mager: var(--cd-text-3);
}
.cd-zug.cd-auf-dunkel,
.cd-zug .cd-auf-dunkel {
--zug-linie: var(--cd-dunkel-3);
--zug-feld: var(--cd-dunkel-2);
--zug-text: var(--cd-text-auf-dunkel);
--zug-akzent: var(--cd-rot-auf-dunkel);
--zug-mager: var(--cd-text-auf-dunkel-2);
}
.cd-zug__raster {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a7);
align-items: center;
}
.cd-zug__text { min-inline-size: 0; }
.cd-zug__neben { min-inline-size: 0; }
@media (min-width: 900px) {
.cd-zug--zwei .cd-zug__raster {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--cd-a8);
row-gap: 0;
}
.cd-zug--zwei .cd-zug__text { grid-column: 1; grid-row: 1; }
.cd-zug--zwei .cd-zug__neben { grid-column: 2; grid-row: 1; }
.cd-zug--zwei.cd-zug--gespiegelt .cd-zug__neben { grid-column: 1; grid-row: 1; }
.cd-zug--zwei.cd-zug--gespiegelt .cd-zug__text { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1100px) {
.cd-zug--lehnt .cd-zug__text { text-align: end; }
.cd-zug--lehnt .cd-zug__zeile,
.cd-zug--lehnt .cd-zug__marken,
.cd-zug--lehnt .cd-zug__knopfzeile { justify-content: flex-end; }
.cd-zug--lehnt .cd-zug__zeile {
flex-direction: row-reverse;
justify-content: flex-start;
}
.cd-zug--lehnt .cd-zug__fliess { margin-inline-start: auto; }
}
.cd-zug__abzeichen {
display: inline-block;
margin-block-end: var(--cd-a3);
padding: 5px 10px;
background: var(--zug-akzent);
color: var(--cd-weiss);
border-radius: var(--cd-r-feld);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1.2;
}
.cd-zug.cd-auf-dunkel .cd-zug__abzeichen { color: var(--cd-tinte); }
.cd-zug__zeile {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--cd-a1) var(--cd-a3);
margin-block-end: var(--cd-a3);
max-inline-size: none;
}
.cd-zug__nummer {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: var(--cd-gr-h3);
line-height: 1;
letter-spacing: -.04em;
color: var(--zug-akzent);
}
.cd-zug__kicker { margin-block-end: 0; }
.cd-zug__titel {
margin-block-end: var(--cd-a4);
max-inline-size: 22ch;
}
.cd-zug--lehnt .cd-zug__titel { margin-inline-start: auto; }
.cd-zug__unterzeile {
margin-block-end: var(--cd-a4);
font-size: var(--cd-gr-gross);
color: var(--zug-mager);
}
.cd-zug__fliess {
color: var(--zug-text);
font-size: var(--cd-gr-gross);
max-inline-size: 58ch;
}
.cd-zug__fliess > * + * { margin-block-start: var(--cd-a4); }
.cd-zug__fliess + .cd-zug__fliess { margin-block-start: var(--cd-a4); }
.cd-zug__fliess--zwei { font-size: var(--cd-gr-text); color: var(--zug-mager); }
.cd-zug__punkte {
display: grid;
gap: 2px;
margin-block-start: var(--cd-a6);
background: var(--zug-linie);
border: 1px solid var(--zug-linie);
text-align: start;
}
.cd-zug__punkt {
display: flex;
align-items: flex-start;
gap: var(--cd-a3);
padding: var(--cd-a4) var(--cd-a5);
background: var(--zug-feld);
font-size: var(--cd-gr-text);
}
.cd-zug__punkt--link { padding: 0; }
.cd-zug__pfeil {
flex: 0 0 auto;
font-family: var(--cd-schrift-mono);
line-height: var(--cd-zeile-text);
color: var(--zug-akzent);
}
.cd-zug__punktText { min-inline-size: 0; }
.cd-zug__punkt .cd-zug__punktLink {
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a4);
inline-size: 100%;
padding: var(--cd-a4) var(--cd-a5);
color: var(--cd-tinte);
font-weight: 600;
transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-zug.cd-auf-dunkel .cd-zug__punkt .cd-zug__punktLink { color: var(--cd-weiss); }
.cd-zug__punkt .cd-zug__punktLink:hover {
background: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-zug__punktLink .cd-knopf__pfeil { color: var(--zug-akzent); }
.cd-zug__punktLink:hover .cd-knopf__pfeil { color: var(--cd-weiss); }
@media (min-width: 1100px) {
.cd-zug--zwei .cd-zug__punkte:has(.cd-zug__punkt--link) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cd-zug__zahlen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
gap: 2px;
margin-block-start: var(--cd-a6);
background: var(--zug-linie);
border: 1px solid var(--zug-linie);
text-align: start;
}
.cd-zug__zahl {
display: grid;
gap: var(--cd-a2);
padding: var(--cd-a5);
background: var(--zug-feld);
}
.cd-zug__zahlWert {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: var(--cd-gr-h2);
line-height: 1;
letter-spacing: -.03em;
}
.cd-zug__zahlName {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--zug-mager);
}
.cd-zug__marken {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a2);
margin-block-start: var(--cd-a6);
padding-block-start: var(--cd-a4);
border-block-start: 1px solid var(--zug-linie);
}
.cd-zug__marke {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .04em;
}
.cd-zug.cd-auf-dunkel .cd-zug__marke {
border-color: var(--cd-linie-auf-dunkel);
color: var(--cd-text-auf-dunkel);
}
.cd-zug__knopfzeile {
display: flex;
margin-block-start: var(--cd-a6);
max-inline-size: none;
}
.cd-zug__bild {
position: relative;
margin: 0;
min-inline-size: 0;
}
.cd-zug__bild--unten { margin-block-start: var(--cd-a7); }
.cd-zug__bildDatei {
display: block;
inline-size: 100%;
max-inline-size: 560px;
block-size: auto;
margin-inline: auto;
}
.cd-zug__bild--unten .cd-zug__bildDatei { max-inline-size: 400px; margin-inline: 0; }
.cd-zug__bild--mitUnterschrift .cd-zug__bildDatei { margin-inline: 0; }
.cd-zug__bildunterschrift {
display: grid;
gap: var(--cd-a2);
margin-block-start: var(--cd-a4);
max-inline-size: none;
}
.cd-zug__bildunterschriftKopf {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--zug-mager);
}
.cd-zug__bildunterschriftText {
font-size: var(--cd-gr-klein);
line-height: 1.65;
color: var(--zug-mager);
max-inline-size: 65ch;
}
.cd-zug__bildhinweis {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--zug-mager);
}
.cd-zug__plakette {
display: grid;
gap: var(--cd-a1);
margin-block-start: var(--cd-a4);
padding: var(--cd-a5);
background: var(--cd-rot);
color: var(--cd-weiss);
max-inline-size: none;
}
.cd-zug__plaketteTitel {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: var(--cd-gr-gross);
line-height: var(--cd-zeile-kopf);
}
.cd-zug__plaketteText {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
}
@media (min-width: 900px) {
.cd-zug__bild:has(.cd-zug__plakette) {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__bildDatei,
.cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__plakette {
grid-area: 1 / 1;
}
.cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__plakette {
align-self: end;
justify-self: end;
margin-block: 0 calc(var(--cd-a5) * -1);
margin-inline-end: calc(var(--cd-a5) * -1);
max-inline-size: 15rem;
}
.cd-zug--gespiegelt .cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__plakette {
justify-self: start;
margin-inline-end: 0;
margin-inline-start: calc(var(--cd-a5) * -1);
}
.cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__bildhinweis,
.cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__bildunterschrift {
margin-block-start: calc(var(--cd-a4) + var(--cd-a5));
}
}
.cd-zug__listenkopf {
margin-block-end: var(--cd-a4);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--zug-mager);
}
.cd-zug__paare {
display: grid;
gap: 2px;
background: var(--zug-linie);
border: 1px solid var(--zug-linie);
border-block-start: 2px solid var(--cd-rot);
}
.cd-zug__paar {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a2);
padding: var(--cd-a5);
background: var(--zug-feld);
}
.cd-zug__paarTitel {
font-family: var(--cd-schrift-display);
font-weight: 600;
font-size: var(--cd-gr-gross);
letter-spacing: -.015em;
}
.cd-zug__paarText {
margin: 0;
font-size: var(--cd-gr-text);
line-height: 1.58;
color: var(--zug-text);
}
.cd-zug__paare--label .cd-zug__paarTitel {
font-family: var(--cd-schrift-mono);
font-weight: 500;
font-size: var(--cd-gr-mikro);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--zug-akzent);
}
@media (min-width: 1100px) {
.cd-zug__paar {
grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
gap: var(--cd-a5);
align-items: baseline;
}
}
.cd-zug__karten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 2px;
background: var(--zug-linie);
border: 1px solid var(--zug-linie);
}
.cd-zug__karte {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--cd-a4);
padding: var(--cd-a6);
background: var(--zug-feld);
}
.cd-zug__karte.cd-auf-dunkel { background: var(--cd-tinte); }
.cd-zug__karteLogo {
display: block;
block-size: 64px;
inline-size: auto;
object-fit: contain;
}
.cd-zug__karteTitel {
font-size: var(--cd-gr-h4);
font-weight: 600;
letter-spacing: -.018em;
}
.cd-zug__karteText {
font-size: var(--cd-gr-text);
line-height: 1.62;
color: var(--zug-text);
}
.cd-zug__karte.cd-auf-dunkel .cd-zug__karteText { color: var(--cd-text-auf-dunkel); }
.cd-zug__karte .cd-karte__mehr { text-decoration: none; }
.cd-zug__karte.cd-auf-dunkel .cd-karte__mehr { color: var(--cd-rot-auf-dunkel); }
.cd-zug__logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
gap: 2px;
background: var(--zug-linie);
border: 1px solid var(--zug-linie);
}
.cd-zug__logoFeld {
display: flex;
align-items: center;
justify-content: center;
padding: var(--cd-a5);
background: var(--zug-feld);
}
.cd-zug__logoBild {
display: block;
block-size: 48px;
inline-size: auto;
object-fit: contain;
}
.cd-zug__kartenkasten {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--cd-a5);
padding: var(--cd-a8) var(--cd-a7);
min-block-size: var(--cd-kartenhoehe, 25rem);
}
.cd-zug__einwilligung {
font-size: var(--cd-gr-text);
color: var(--cd-text-auf-dunkel);
max-inline-size: 52ch;
}
.cd-zug__kartenknoepfe {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a3) var(--cd-a5);
}
.cd-zug__karteneinstellungen {
appearance: none;
padding: 0;
border: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: var(--cd-gr-klein);
color: var(--cd-text-auf-dunkel);
text-decoration: underline;
text-underline-offset: .2em;
}
.cd-zug__karteneinstellungen:hover,
.cd-zug__karteneinstellungen:focus-visible {
color: var(--cd-weiss);
}
[data-cd-karte-ersatz] {
display: grid;
gap: var(--cd-a4);
justify-items: start;
}
.cd-zug__kartenkasten--geladen {
display: block;
padding: 0;
overflow: hidden;
}
.cd-zug__kartenrahmen {
display: block;
inline-size: 100%;
block-size: var(--cd-kartenhoehe, 25rem);
min-block-size: 15rem;
border: 0;
}
.cd-kartenblase {
display: flex;
flex-direction: column;
gap: 8px;
color: var(--cd-tinte);
font-family: var(--cd-schrift-text);
font-size: 13px;
line-height: 1.5;
padding-block-end: 2px;
padding-inline-end: 26px;
}
.cd-kartenblase__logo {
display: block;
inline-size: 170px;
block-size: auto;
}
.cd-kartenblase__text {
display: block;
font-weight: 600;
max-inline-size: 26ch;
}
.cd-zug__kartenrahmen .gm-style-iw-d {
margin-block-start: -35px;
}
.cd-kartenpunkt {
display: block;
inline-size: 18px;
block-size: 18px;
border-radius: 50%;
background: var(--cd-kartenpunkt-farbe, var(--cd-rot));
box-shadow: 0 0 0 3px var(--cd-kartenpunkt-rand, var(--cd-weiss)),
0 2px 6px rgb(0 0 0 / 0.35);
transform: translateY(-50%);
}
.cd-zug .cd-zug__box,
.cd-zug__box {
--zug-linie: var(--cd-linie-2);
--zug-feld: var(--cd-flaeche-2);
--zug-text: var(--cd-text-2);
--zug-akzent: var(--cd-rot);
--zug-mager: var(--cd-text-3);
display: grid;
justify-items: start;
gap: var(--cd-a4);
padding: var(--cd-a6);
background: var(--cd-weiss);
color: var(--cd-tinte);
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-karte);
box-shadow: var(--cd-schatten-karte);
}
.cd-zug__boxText {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: var(--cd-gr-h3);
line-height: var(--cd-zeile-kopf);
letter-spacing: -.028em;
max-inline-size: none;
}
.cd-zug__boxKnopf { inline-size: 100%; justify-content: space-between; }
@media (max-width: 600px) {
.cd-zug__raster { gap: var(--cd-a6); }
.cd-zug__punkt { padding: var(--cd-a3) var(--cd-a4); }
.cd-zug__punkt--link { padding: 0; }
.cd-zug__punkt .cd-zug__punktLink { padding: var(--cd-a3) var(--cd-a4); }
.cd-zug__paar,
.cd-zug__zahl { padding: var(--cd-a4); }
.cd-zug__karte { padding: var(--cd-a5); }
.cd-zug__kartenkasten {
padding: var(--cd-a7) var(--cd-a5);
min-block-size: var(--cd-kartenhoehe, 25rem);
}
.cd-zug__kartenkasten--geladen { padding: 0; }
.cd-zug__kartenrahmen { min-block-size: 15rem; }
}
.cd-zug .cd-zug__punkte .cd-zug__punktLink {
text-decoration: none;
}
.cd-zug__marken--schlicht .cd-zug__marke {
padding: 0;
border: 0;
background: none;
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-zug__marken--schlicht .cd-zug__marke {
color: var(--cd-text-auf-dunkel-2);
}
.cd-zug__marken--schlicht { gap: var(--cd-a5); }
.cd-auf-dunkel .cd-zug__box .cd-nummer { color: var(--cd-text-3); }
.cd-auf-dunkel .cd-zug__box .cd-kicker { color: var(--cd-rot); }
/* bahnen/cd_preisstufen.css */
.cd-preise {
--preise-linie: var(--cd-linie-2);
--preise-feld: var(--cd-weiss);
--preise-text: var(--cd-text-2);
--preise-mager: var(--cd-text-3);
}
.cd-preise__kopf {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
align-items: end;
margin-block-end: var(--cd-a7);
}
@media (min-width: 900px) {
.cd-preise__kopf {
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
column-gap: var(--cd-a8);
}
}
.cd-preise__einleitung { min-inline-size: 0; }
.cd-preise__titel {
margin-block-end: var(--cd-a4);
max-inline-size: 20ch;
}
.cd-preise__unterzeile {
margin-block-end: var(--cd-a4);
font-size: var(--cd-gr-gross);
color: var(--preise-mager);
}
.cd-preise__fliess {
color: var(--preise-text);
font-size: var(--cd-gr-gross);
max-inline-size: 60ch;
}
.cd-preise__fliess > * + * { margin-block-start: var(--cd-a4); }
.cd-preise__kopfknopf { display: flex; }
@media (min-width: 900px) {
.cd-preise__kopfknopf { justify-content: flex-end; }
}
.cd-preise__bild { margin: 0; min-inline-size: 0; }
.cd-preise__bildDatei {
display: block;
inline-size: 100%;
max-inline-size: 390px;
block-size: auto;
margin-inline-start: auto;
}
.cd-preise__raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: 2px;
background: var(--preise-linie);
border: 1px solid var(--preise-linie);
}
.cd-preise__stufe {
display: flex;
flex-direction: column;
padding: var(--cd-a6) var(--cd-a6) var(--cd-a5);
background: var(--preise-feld);
border-block-start: 3px solid transparent;
}
.cd-preise__stufe.cd-auf-dunkel { background: var(--cd-tinte); }
.cd-preise__stufe--empfohlen { border-block-start-color: var(--cd-rot); }
.cd-preise__stufe--empfohlen.cd-auf-dunkel { border-block-start-color: var(--cd-rot-auf-dunkel); }
.cd-preise__etikett {
margin-block-end: var(--cd-a4);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .15em;
text-transform: uppercase;
color: var(--cd-rot);
}
.cd-preise__stufe.cd-auf-dunkel .cd-preise__etikett { color: var(--cd-rot-auf-dunkel); }
.cd-preise__stufeTitel {
margin-block-end: var(--cd-a3);
font-size: var(--cd-gr-h3);
letter-spacing: -.022em;
}
.cd-preise__preis {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: var(--cd-a2);
row-gap: var(--cd-a1);
margin-block-end: var(--cd-a5);
max-inline-size: none;
}
.cd-preise__preisWert {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: var(--cd-gr-h2);
line-height: 1.1;
letter-spacing: -.03em;
}
.cd-preise__preisVorsatz,
.cd-preise__preisZusatz {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--preise-mager);
}
.cd-preise__preisVorsatz { flex-basis: 100%; }
.cd-preise__stufe.cd-auf-dunkel .cd-preise__preisVorsatz,
.cd-preise__stufe.cd-auf-dunkel .cd-preise__preisZusatz { color: var(--cd-text-auf-dunkel-2); }
.cd-preise__preisWert small {
font-size: .5em;
font-weight: 500;
letter-spacing: 0;
}
.cd-preise__preisWert sup,
.cd-preise__preisWert sub {
font-size: .45em;
letter-spacing: 0;
}
.cd-preise__stufeText {
margin-block-end: var(--cd-a5);
font-size: var(--cd-gr-text);
line-height: 1.62;
color: var(--preise-text);
}
.cd-preise__stufe.cd-auf-dunkel .cd-preise__stufeText { color: var(--cd-text-auf-dunkel); }
.cd-preise__merkmale {
display: grid;
align-content: start;
gap: var(--cd-a3);
flex: 1;
margin-block-end: var(--cd-a5);
}
.cd-preise__merkmal {
display: flex;
align-items: flex-start;
gap: var(--cd-a3);
font-size: var(--cd-gr-text);
line-height: 1.5;
}
.cd-preise__haken {
flex: 0 0 auto;
font-family: var(--cd-schrift-mono);
line-height: 1.5;
color: var(--cd-rot);
}
.cd-preise__stufe.cd-auf-dunkel .cd-preise__haken { color: var(--cd-rot-auf-dunkel); }
.cd-preise__merkmalText { min-inline-size: 0; }
.cd-preise__stufeKnopfzeile { margin-block-start: auto; }
.cd-preise__stufe .cd-preise__stufeKnopf {
text-decoration: none;
inline-size: 100%;
justify-content: space-between;
}
.cd-preise__stufe .cd-preise__stufeKnopf:hover {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-preise__stufe .cd-preise__stufeKnopf:hover .cd-knopf__pfeil { color: var(--cd-weiss); }
.cd-preise__fussnote {
margin-block-start: var(--cd-a5);
font-size: var(--cd-gr-text);
line-height: 1.6;
color: var(--cd-text-3);
max-inline-size: 90ch;
}
@media (max-width: 600px) {
.cd-preise__kopf { margin-block-end: var(--cd-a6); }
.cd-preise__stufe { padding: var(--cd-a5); }
.cd-preise__bildDatei { margin-inline: auto; }
}
/* bahnen/cd_referenzen.css */
.cd-referenzen__titel {
margin-block-end: var(--cd-a4);
}
.cd-referenzen__beitext {
color: var(--cd-text-2);
font-size: var(--cd-gr-gross);
}
.cd-referenzen__kopfknopf {
display: flex;
justify-content: flex-end;
}
.cd-referenzen__kopfknopf .cd-knopf {
white-space: nowrap;
}
@media (max-width: 900px) {
.cd-referenzen__kopfknopf { justify-content: flex-start; }
}
.cd-referenzen__kopf:not(:has(.cd-referenzen__kopfknopf)):has(.cd-kopfzeile__text > .cd-nurlesen:only-child) {
margin-block-end: 0;
}
.cd-referenzen__bild {
position: relative;
inline-size: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--cd-flaeche-3);
}
.cd-referenzen__projektmarke {
position: absolute;
inset-block-start: var(--cd-a3);
inset-inline-start: var(--cd-a3);
z-index: 1;
margin-inline-start: 0;
}
.cd-referenzen__bild--flach { aspect-ratio: 16 / 9; }
.cd-referenzen__bild img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: transform .5s var(--cd-kurve);
}
.cd-referenzen__text {
display: flex;
flex-direction: column;
gap: var(--cd-a3);
padding: var(--cd-a5) var(--cd-a5) var(--cd-a6);
flex: 1;
}
.cd-referenzen__teaser {
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
flex: 1;
}
.cd-referenzen__fusszeile {
margin-block-start: var(--cd-a4);
padding-block-start: var(--cd-a4);
border-block-start: 1px solid var(--cd-linie-2);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a4);
}
.cd-referenzen__weiter {
display: inline-flex;
align-items: center;
gap: var(--cd-a2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-rot);
}
.cd-referenzen__plakette {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 132px;
block-size: 52px;
margin-block-start: -52px;
margin-block-end: var(--cd-a4);
padding: 10px 14px;
background: var(--cd-weiss);
box-shadow: var(--cd-schatten-karte);
}
.cd-referenzen__plakette img {
max-block-size: 100%;
inline-size: auto;
object-fit: contain;
}
.cd-referenzen__plakette--weiss { background: var(--cd-weiss); }
.cd-referenzen__plakette--dunkel {
background: var(--cd-dunkel);
box-shadow: var(--cd-schatten-karte), inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.cd-referenzen__plakette--ohne {
background: none;
box-shadow: none;
padding-inline: 0;
inline-size: auto;
}
.cd-referenzen__plakette--wort {
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-gross);
font-weight: 700;
letter-spacing: -.03em;
color: var(--cd-dunkel);
}
.cd-referenzen__karte {
display: flex;
flex-direction: column;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-2);
color: var(--cd-tinte);
transition: border-color var(--cd-zeit) ease,
box-shadow var(--cd-zeit) ease,
transform var(--cd-zeit) var(--cd-kurve);
}
.cd-referenzen__karte--verweis:hover {
color: var(--cd-tinte);
border-color: var(--cd-rot);
box-shadow: var(--cd-schatten-karte);
transform: translateY(-4px);
}
.cd-referenzen__karte--verweis:hover .cd-referenzen__bild img {
transform: scale(1.04);
}
.cd-referenzen__karten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: var(--cd-a6);
}
.cd-referenzen__spur {
display: flex;
gap: var(--cd-a6);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-block: var(--cd-a1) var(--cd-a2);
scrollbar-width: none;
}
.cd-referenzen__spur::-webkit-scrollbar { display: none; }
.cd-referenzen__spur:focus-visible {
outline: 2px solid var(--cd-rot);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.cd-referenzen__spur { scroll-behavior: auto; }
}
.cd-referenzen__folie {
flex: 0 0 min(396px, 84%);
scroll-snap-align: start;
display: flex;
}
.cd-referenzen__spur--gezaehlt > .cd-referenzen__folie {
--cd-ref-je: var(--cd-ref-je-m, 1);
flex: 0 0 calc((100% - (var(--cd-ref-je) - 1) * var(--cd-a6)) / var(--cd-ref-je));
}
@media (min-width: 700px) {
.cd-referenzen__spur--gezaehlt > .cd-referenzen__folie {
--cd-ref-je: var(--cd-ref-je-t, var(--cd-ref-je-m, 2));
}
}
@media (min-width: 1100px) {
.cd-referenzen__spur--gezaehlt > .cd-referenzen__folie {
--cd-ref-je: var(--cd-ref-je-d, var(--cd-ref-je-t, 3));
}
}
.cd-referenzen__folie > .cd-referenzen__karte {
flex: 1 1 auto;
}
.cd-referenzen__kopfrechts {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--cd-a4);
}
.cd-referenzen__bedienung {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.cd-referenzen__pfeil {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 52px;
block-size: 52px;
background: transparent;
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-knopf);
color: var(--cd-tinte);
cursor: pointer;
transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease,
color var(--cd-zeit) ease;
}
.cd-referenzen__pfeil:hover:not([disabled]) {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-referenzen__pfeil[disabled] {
opacity: .35;
cursor: default;
}
.cd-referenzen__pfeilbild {
inline-size: 17px;
block-size: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
.cd-referenzen__haltezeichen {
position: relative;
inline-size: 12px;
block-size: 13px;
}
.cd-referenzen__haltezeichen::before,
.cd-referenzen__haltezeichen::after {
content: "";
position: absolute;
inset-block: 0;
inline-size: 4px;
background: currentColor;
}
.cd-referenzen__haltezeichen::before { inset-inline-start: 0; }
.cd-referenzen__haltezeichen::after { inset-inline-end: 0; }
.cd-referenzen__halt[aria-pressed="true"] .cd-referenzen__haltezeichen::before {
inline-size: 0;
inset-block: 0;
border-block: 6.5px solid transparent;
border-inline-start: 11px solid currentColor;
}
.cd-referenzen__halt[aria-pressed="true"] .cd-referenzen__haltezeichen::after { display: none; }
.cd-referenzen__fortschritt {
display: flex;
align-items: center;
gap: 20px;
margin-block-start: var(--cd-a3);
}
.cd-referenzen__bedienung[hidden],
.cd-referenzen__fortschritt[hidden] { display: none; }
.cd-referenzen__linie {
flex: 1 1 auto;
position: relative;
block-size: 2px;
overflow: hidden;
background: var(--cd-linie-2);
}
.cd-referenzen__balken {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: 25%;
background: var(--cd-rot);
transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-referenzen__zaehler {
flex: 0 0 auto;
margin: 0;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
color: var(--cd-text-3);
}
.cd-referenzen__mosaik {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 2px;
background: var(--cd-linie);
border: 1px solid var(--cd-linie);
}
.cd-referenzen__stein {
position: relative;
grid-column: span 4;
min-block-size: 279px;
display: block;
overflow: hidden;
background: var(--cd-dunkel);
color: var(--cd-weiss);
transition: box-shadow var(--cd-zeit) ease;
}
.cd-referenzen__stein--gross {
grid-column: span 8;
grid-row: span 2;
min-block-size: 560px;
}
a.cd-referenzen__stein:hover {
color: var(--cd-weiss);
box-shadow: inset 0 0 0 3px var(--cd-rot);
}
.cd-referenzen__steinbild {
position: absolute;
inset: 0;
}
.cd-referenzen__steinbild img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center 22%;
display: block;
}
.cd-referenzen__steinschleier {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 72%;
background: linear-gradient(180deg,
color-mix(in srgb, var(--cd-tinte) 0%, transparent) 0%,
color-mix(in srgb, var(--cd-tinte) 62%, transparent) 42%,
color-mix(in srgb, var(--cd-tinte) 94%, transparent) 100%);
}
.cd-referenzen__steintext {
position: relative;
block-size: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--cd-a3);
padding: var(--cd-a6) var(--cd-a6) var(--cd-a7);
}
.cd-referenzen__marke {
align-self: flex-start;
padding: 6px 11px;
background: var(--cd-rot);
color: var(--cd-weiss);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
}
.cd-referenzen__steintitel {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: var(--cd-gr-h3);
line-height: var(--cd-zeile-kopf);
letter-spacing: -.028em;
color: var(--cd-weiss);
}
.cd-referenzen__stein--gross .cd-referenzen__steintitel {
font-size: var(--cd-gr-h2);
}
.cd-referenzen__stein .cd-nummer { color: var(--cd-text-auf-dunkel-2); }
.cd-referenzen__filter {
margin: 0 0 var(--cd-a6);
padding: var(--cd-a5) var(--cd-a6);
border: 0;
background: var(--cd-flaeche-2);
}
.cd-referenzen__filterlegende {
padding: 0;
margin-block-end: var(--cd-a4);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .15em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-referenzen__filterzeile {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--cd-a3) var(--cd-a6);
}
.cd-referenzen__filterzahl {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
color: var(--cd-text-3);
}
.cd-referenzen__filterzahl:empty { display: none; }
.cd-referenzen__filterknopf:has(.cd-referenzen__filterwahl:checked) .cd-referenzen__filterzahl {
color: var(--cd-rot);
}
.cd-referenzen__klappe {
margin-block-end: var(--cd-a6);
text-align: center;
}
.cd-referenzen__klappe .cd-referenzen__filter { text-align: start; }
.cd-referenzen__klappknopf {
display: inline-block;
list-style: none;
padding: 11px var(--cd-a5);
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-knopf);
background: var(--cd-weiss);
cursor: pointer;
font-size: var(--cd-gr-klein);
color: var(--cd-tinte);
transition: border-color var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-referenzen__klappknopf::-webkit-details-marker { display: none; }
.cd-referenzen__klappinnen {
display: inline-flex;
align-items: center;
gap: var(--cd-a3);
}
.cd-referenzen__klappknopf:hover { border-color: var(--cd-rot); color: var(--cd-rot); }
.cd-referenzen__klappknopf:focus-visible {
outline: 3px solid var(--cd-rot);
outline-offset: 3px;
}
.cd-referenzen__klappzeichen {
position: relative;
inline-size: 12px;
block-size: 12px;
}
.cd-referenzen__klappzeichen::before,
.cd-referenzen__klappzeichen::after {
content: "";
position: absolute;
inset-block-start: 5px;
inset-inline: 0;
block-size: 2px;
background: var(--cd-rot);
transition: transform var(--cd-klapp, var(--cd-zeit)) var(--cd-kurve);
}
.cd-referenzen__klappzeichen::after { transform: rotate(90deg); }
.cd-referenzen__klappe[open] .cd-referenzen__klappzeichen::after { transform: rotate(0deg); }
.cd-referenzen__klappe .cd-referenzen__filter { margin-block-start: var(--cd-a4); }
.cd-referenzen__kachel[hidden] { display: none; }
@media (scripting: enabled) {
.cd-referenzen__kachel--spaeter { display: none; }
}
.cd-referenzen__mehrzeile {
display: flex;
justify-content: center;
margin-block-start: calc(var(--cd-a7) + var(--cd-a5));
}
.cd-referenzen__mehrzeile:not(:has(> :not([hidden]))) { margin-block-start: 0; }
.cd-referenzen__mehr {
display: inline-flex;
align-items: center;
gap: var(--cd-a3);
padding: 15px var(--cd-a7, 40px);
border: 1px solid var(--cd-rot);
border-radius: var(--cd-r-knopf);
background: var(--cd-rot);
cursor: pointer;
font-size: var(--cd-gr-klein);
font-weight: 600;
color: var(--cd-weiss);
transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-referenzen__mehr:hover {
background: var(--cd-rot-tief);
border-color: var(--cd-rot-tief);
}
.cd-referenzen__mehr:focus-visible {
outline: 3px solid var(--cd-rot);
outline-offset: 3px;
}
.cd-referenzen__mehr[hidden] { display: none; }
.cd-referenzen__mehrpfeil {
position: relative;
inline-size: 10px;
block-size: 10px;
border-inline-end: 2px solid currentColor;
border-block-end: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
}
.cd-referenzen__kachel:focus-visible {
outline: 3px solid var(--cd-rot);
outline-offset: 3px;
}
.cd-referenzen__kachel { scroll-margin-block-start: calc(var(--cd-kopf-gesamt) + 16px); }
.cd-referenzen__alle {
text-align: center;
margin-block-start: 0;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-referenzen__alle[hidden] { display: none; }
.cd-referenzen__filterknopf {
position: relative;
display: inline-flex;
align-items: baseline;
gap: var(--cd-a2);
padding-block-end: 7px;
border-block-end: 3px solid transparent;
cursor: pointer;
font-size: var(--cd-gr-text);
color: var(--cd-text-2);
transition: color var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-referenzen__filterknopf:hover { color: var(--cd-tinte); }
.cd-referenzen__filterknopf:has(.cd-referenzen__filterwahl:checked) {
border-block-end-color: var(--cd-rot);
color: var(--cd-tinte);
font-weight: 600;
}
.cd-referenzen__filterknopf:has(.cd-referenzen__filterwahl:focus-visible) {
outline: 3px solid var(--cd-rot);
outline-offset: 3px;
}
.cd-referenzen__raster {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: var(--cd-a5);
}
.cd-referenzen__kachel {
display: flex;
flex-direction: column;
background: var(--cd-flaeche-2);
transition: background var(--cd-zeit) ease;
}
.cd-referenzen__kachel:hover { background: var(--cd-flaeche-3); }
.cd-referenzen__kachel:hover .cd-referenzen__bild img { transform: scale(1.05); }
.cd-referenzen__kachelknopf {
align-self: flex-start;
margin-block-start: var(--cd-a4);
}
.cd-referenzen__kachel--ruhig {
position: relative;
}
.cd-referenzen__kachel--ruhig .cd-referenzen__bild { position: relative; }
.cd-referenzen__schleier {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--cd-a2);
padding: var(--cd-a5);
background: linear-gradient(to top, rgba(13, 26, 33, .94), rgba(13, 26, 33, .72) 55%, rgba(13, 26, 33, .18));
color: var(--cd-weiss);
opacity: 0;
transition: opacity var(--cd-zeit) var(--cd-kurve);
}
.cd-referenzen__kachel--ruhig:hover .cd-referenzen__schleier,
.cd-referenzen__kachel--ruhig:focus-within .cd-referenzen__schleier {
opacity: 1;
}
.cd-referenzen__schleierMeta {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-auf-dunkel-2);
}
.cd-referenzen__schleierText {
font-size: var(--cd-gr-klein);
line-height: var(--cd-zeile-text);
color: var(--cd-weiss);
}
.cd-referenzen__fallmarke {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
z-index: 1;
padding: 7px 12px;
background: var(--cd-rot);
color: var(--cd-weiss);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
}
.cd-referenzen__kachel--ruhig .cd-referenzen__text {
gap: var(--cd-a2);
padding: 22px var(--cd-a5) var(--cd-a5);
}
.cd-referenzen__kachel--ruhig .cd-referenzen__plakette,
.cd-referenzen__kachel--ruhig .cd-kicker {
margin-block-end: 0;
}
.cd-referenzen__kachel--ruhig { background: var(--cd-flaeche-3); }
.cd-referenzen__kachel--ruhig:hover { background: var(--cd-flaeche-3); }
.cd-referenzen__kachelziel { color: inherit; }
.cd-referenzen__kachelziel::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
}
.cd-referenzen__kachel--ruhig:hover .cd-referenzen__kachelziel { color: var(--cd-rot); }
.cd-referenzen__kachelziel:focus-visible { outline: none; }
.cd-referenzen__kachel--ruhig:focus-within {
outline: 3px solid var(--cd-rot);
outline-offset: 3px;
}
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="typo3"]:checked)
.cd-referenzen__kachel:not([data-system="typo3"]):not([data-kategorie="typo3"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="wordpress"]:checked)
.cd-referenzen__kachel:not([data-system="wordpress"]):not([data-kategorie="wordpress"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="shopware"]:checked)
.cd-referenzen__kachel:not([data-system="shopware"]):not([data-kategorie="shopware"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="woocommerce"]:checked)
.cd-referenzen__kachel:not([data-system="woocommerce"]):not([data-kategorie="woocommerce"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="eigen"]:checked)
.cd-referenzen__kachel:not([data-system="eigen"]):not([data-kategorie="eigen"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="website"]:checked)
.cd-referenzen__kachel:not([data-system="website"]):not([data-kategorie="website"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="shop"]:checked)
.cd-referenzen__kachel:not([data-system="shop"]):not([data-kategorie="shop"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="portal"]:checked)
.cd-referenzen__kachel:not([data-system="portal"]):not([data-kategorie="portal"]),
.cd-referenzen__filterbereich:has(.cd-referenzen__filterwahl[value="marketing"]:checked)
.cd-referenzen__kachel:not([data-system="marketing"]):not([data-kategorie="marketing"]) {
display: none;
}
.cd-referenzen__weitere {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 2px;
background: var(--cd-linie-2);
border: 1px solid var(--cd-linie-2);
}
.cd-referenzen__kurz {
display: flex;
flex-direction: column;
background: var(--cd-weiss);
color: var(--cd-tinte);
transition: background var(--cd-zeit) ease;
}
.cd-referenzen__kurz--verweis:hover {
background: var(--cd-flaeche-1);
color: var(--cd-tinte);
}
.cd-referenzen__kurz--verweis:hover .cd-referenzen__bild img { transform: scale(1.06); }
.cd-referenzen__kurztitel {
font-size: var(--cd-gr-h4);
}
.cd-referenzen__fall {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
border: 1px solid var(--cd-linie-2);
}
.cd-referenzen__fallbild {
min-block-size: 460px;
overflow: hidden;
background: var(--cd-dunkel);
}
.cd-referenzen__fallbild img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
.cd-referenzen__falltext {
display: flex;
flex-direction: column;
gap: var(--cd-a5);
padding: var(--cd-a7) var(--cd-a7) var(--cd-a7);
}
.cd-referenzen__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-3);
max-inline-size: none;
}
.cd-referenzen__art { color: var(--cd-rot); }
.cd-referenzen__falltitel { font-size: var(--cd-gr-h2); }
.cd-referenzen__fliesstext { color: var(--cd-text-2); }
.cd-referenzen__schlagworte {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a2);
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-referenzen__fallknopf { margin-block-start: auto; max-inline-size: none; }
@media (max-width: 1100px) {
.cd-referenzen__stein,
.cd-referenzen__stein--gross {
grid-column: span 6;
grid-row: auto;
min-block-size: 320px;
}
}
@media (max-width: 900px) {
.cd-referenzen__fall { grid-template-columns: minmax(0, 1fr); }
.cd-referenzen__fallbild { min-block-size: 260px; }
.cd-referenzen__falltext { padding: var(--cd-a6) var(--cd-a5); }
.cd-referenzen__stein,
.cd-referenzen__stein--gross {
grid-column: span 12;
min-block-size: 280px;
}
.cd-referenzen__steintext { padding: var(--cd-a5); }
.cd-referenzen__filter { padding: var(--cd-a4); }
.cd-referenzen__filterzeile { gap: var(--cd-a3) var(--cd-a5); }
}
@media (prefers-reduced-motion: reduce) {
.cd-referenzen__bild img,
.cd-referenzen__karte,
.cd-referenzen__kachel,
.cd-referenzen__kurz {
transition: none;
}
.cd-referenzen__karte--verweis:hover { transform: none; }
.cd-referenzen__karte--verweis:hover .cd-referenzen__bild img,
.cd-referenzen__kachel:hover .cd-referenzen__bild img,
.cd-referenzen__kurz--verweis:hover .cd-referenzen__bild img { transform: none; }
.cd-referenzen__spur { scroll-behavior: auto; }
}
@media (max-width: 900px) {
.cd-referenzen__kopfrechts {
align-items: flex-start;
inline-size: 100%;
}
.cd-referenzen__bedienung { justify-content: flex-start; }
}
.cd-referenzen[data-reffuge="eng"]  { --cd-ref-fuge: var(--cd-a3); }
.cd-referenzen[data-reffuge="weit"] { --cd-ref-fuge: var(--cd-a8); }
.cd-referenzen[data-reffuge="naht"] { --cd-ref-fuge: 0px; }
.cd-referenzen__karten  { gap: var(--cd-ref-fuge, var(--cd-a6)); }
.cd-referenzen__raster  { gap: var(--cd-ref-fuge, var(--cd-a5)); }
.cd-referenzen__weitere { gap: var(--cd-ref-fuge, var(--cd-a6)); }
.cd-referenzen__spur    { gap: var(--cd-ref-fuge, var(--cd-a6)); }
.cd-referenzen__mosaik,
.cd-referenzen__galerie { gap: var(--cd-ref-fuge, 2px); }
.cd-referenzen[data-reffuge="naht"] .cd-referenzen__mosaik,
.cd-referenzen[data-reffuge="naht"] .cd-referenzen__galerie {
background: none;
border: 0;
}
.cd-referenzen[data-spalten] .cd-referenzen__karten,
.cd-referenzen[data-spalten] .cd-referenzen__galerie,
.cd-referenzen[data-spalten] .cd-referenzen__weitere,
.cd-referenzen[data-spalten] .cd-referenzen__raster {
grid-template-columns: repeat(var(--cd-sp-m, 1), minmax(0, 1fr));
}
@media (min-width: 601px) {
.cd-referenzen[data-spalten] .cd-referenzen__karten,
.cd-referenzen[data-spalten] .cd-referenzen__galerie,
.cd-referenzen[data-spalten] .cd-referenzen__weitere,
.cd-referenzen[data-spalten] .cd-referenzen__raster {
grid-template-columns: repeat(var(--cd-sp-t, var(--cd-sp-d, 2)), minmax(0, 1fr));
}
}
@media (min-width: 901px) {
.cd-referenzen[data-spalten] .cd-referenzen__karten,
.cd-referenzen[data-spalten] .cd-referenzen__galerie,
.cd-referenzen[data-spalten] .cd-referenzen__weitere,
.cd-referenzen[data-spalten] .cd-referenzen__raster {
grid-template-columns: repeat(var(--cd-sp-d, var(--cd-sp-t, 3)), minmax(0, 1fr));
}
}
@media (min-width: 901px) {
.cd-referenzen[data-spalten] .cd-referenzen__mosaik > .cd-referenzen__stein {
grid-column: span calc(12 / var(--cd-sp-d, 3));
}
.cd-referenzen[data-spalten] .cd-referenzen__mosaik > .cd-referenzen__stein--gross {
grid-column: span calc(12 - 12 / var(--cd-sp-d, 3));
}
}
.cd-referenzen[data-refformat="16-10"] .cd-referenzen__bild { aspect-ratio: 16 / 10; }
.cd-referenzen[data-refformat="16-9"]  .cd-referenzen__bild { aspect-ratio: 16 / 9; }
.cd-referenzen[data-refformat="3-2"]   .cd-referenzen__bild { aspect-ratio: 3 / 2; }
.cd-referenzen[data-refformat="1-1"]   .cd-referenzen__bild { aspect-ratio: 1 / 1; }
.cd-referenzen[data-refformat="frei"] .cd-referenzen__bild {
aspect-ratio: auto;
min-block-size: 0;
}
.cd-referenzen[data-refformat="frei"] .cd-referenzen__bild img {
block-size: auto;
}
.cd-referenzen[data-refformat="16-10"] .cd-referenzen__galerie > .cd-referenzen__stein { aspect-ratio: 16 / 10; min-block-size: 0; }
.cd-referenzen[data-refformat="16-9"]  .cd-referenzen__galerie > .cd-referenzen__stein { aspect-ratio: 16 / 9;  min-block-size: 0; }
.cd-referenzen[data-refformat="3-2"]   .cd-referenzen__galerie > .cd-referenzen__stein { aspect-ratio: 3 / 2;   min-block-size: 0; }
.cd-referenzen[data-refformat="1-1"]   .cd-referenzen__galerie > .cd-referenzen__stein { aspect-ratio: 1 / 1;   min-block-size: 0; }
.cd-referenzen[data-refschnitt="mitte"] .cd-referenzen__bild img,
.cd-referenzen[data-refschnitt="mitte"] .cd-referenzen__steinbild img,
.cd-referenzen[data-refschnitt="mitte"] .cd-referenzen__fallbild img {
object-position: center center;
}
.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__bild,
.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__fallbild {
background: var(--cd-weiss);
}
.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__bild img,
.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__steinbild img,
.cd-referenzen[data-refschnitt="ganz"] .cd-referenzen__fallbild img {
object-fit: contain;
object-position: center center;
}
.cd-referenzen[data-refkachel="knapp"] .cd-referenzen__teaser,
.cd-referenzen[data-refkachel="knapp"] .cd-referenzen__fusszeile,
.cd-referenzen[data-refkachel="knapp"] .cd-referenzen__kachelknopf,
.cd-referenzen[data-refkachel="knapp"] .cd-referenzen__zeilenteaser {
display: none;
}
@media (min-width: 601px) {
.cd-referenzen[data-refkachel="neben"] .cd-referenzen__karte,
.cd-referenzen[data-refkachel="neben"] .cd-referenzen__kachel,
.cd-referenzen[data-refkachel="neben"] .cd-referenzen__kurz {
flex-direction: row;
align-items: stretch;
}
.cd-referenzen[data-refkachel="neben"] .cd-referenzen__bild {
flex: 0 0 42%;
aspect-ratio: auto;
align-self: stretch;
min-block-size: 100%;
}
.cd-referenzen[data-refkachel="neben"] .cd-referenzen__text {
flex: 1 1 auto;
min-inline-size: 0;
}
.cd-referenzen[data-refkachel="neben"] .cd-referenzen__plakette {
position: static;
margin: 0 0 var(--cd-a3);
}
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__karte,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kachel,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kurz {
position: relative;
overflow: hidden;
background: var(--cd-dunkel);
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__text {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
padding: var(--cd-a7) var(--cd-a5) var(--cd-a5);
background: linear-gradient(
to top,
color-mix(in srgb, var(--cd-dunkel) 92%, transparent) 0%,
color-mix(in srgb, var(--cd-dunkel) 78%, transparent) 55%,
transparent 100%
);
color: var(--cd-weiss);
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kartentitel,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kacheltitel,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kurztitel,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kacheltitel a {
color: var(--cd-weiss);
}
.cd-referenzen[data-refkachel="ueber"] .cd-kicker,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__weiter {
color: var(--cd-rot-auf-dunkel);
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__teaser,
.cd-referenzen[data-refkachel="ueber"] .cd-nummer {
color: var(--cd-text-auf-dunkel);
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__fusszeile {
border-block-start-color: var(--cd-linie-auf-dunkel);
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__plakette {
position: absolute;
inset-block-start: var(--cd-a4);
inset-inline-start: var(--cd-a4);
margin: 0;
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__bild {
position: absolute;
inset: 0;
aspect-ratio: auto;
}
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__karte,
.cd-referenzen[data-refkachel="ueber"] .cd-referenzen__kachel {
min-block-size: 340px;
}
.cd-referenzen__text { position: relative; }
.cd-referenzen__plakette {
position: absolute;
inset-block-start: -52px;
inset-inline-start: var(--cd-a5);
margin: 0;
}
.cd-referenzen[data-refplakette="platz"] .cd-referenzen__plakette {
position: static;
margin-block-start: -52px;
margin-block-end: var(--cd-a4);
}
.cd-referenzen[data-refplakette="platz"] .cd-referenzen__text:not(:has(> .cd-referenzen__plakette))::before {
content: "";
display: block;
block-size: 52px;
margin-block-start: -52px;
margin-block-end: var(--cd-a4);
}
.cd-referenzen[data-refplakette="ohne"] .cd-referenzen__plakette { display: none; }
.cd-referenzen__galerie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
background: var(--cd-linie);
border: 1px solid var(--cd-linie);
}
.cd-referenzen__galerie > .cd-referenzen__stein {
grid-column: auto;
aspect-ratio: 4 / 3;
min-block-size: 0;
}
.cd-referenzen__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--cd-ref-fuge, 0px);
}
.cd-referenzen__zeilenpunkt { border-block-start: 1px solid var(--cd-linie); }
.cd-referenzen__zeilenpunkt:last-child { border-block-end: 1px solid var(--cd-linie); }
.cd-referenzen__zeile {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) auto;
align-items: center;
gap: var(--cd-a5);
padding-block: var(--cd-a4);
padding-inline: var(--cd-a3);
color: inherit;
text-decoration: none;
transition: background var(--cd-zeit) var(--cd-kurve);
}
a.cd-referenzen__zeile--verweis:hover { background: var(--cd-flaeche-2); }
a.cd-referenzen__zeile--verweis:hover .cd-referenzen__zeilentitel { color: var(--cd-rot); }
a.cd-referenzen__zeile--verweis:focus-visible {
outline: 3px solid var(--cd-rot);
outline-offset: -3px;
}
.cd-referenzen__zeilenbild {
aspect-ratio: 16 / 10;
border: 1px solid var(--cd-linie);
}
.cd-referenzen__zeilentext {
display: flex;
flex-direction: column;
gap: var(--cd-a2);
}
.cd-referenzen__zeilentitel {
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h4);
line-height: var(--cd-zeile-kopf);
margin: 0;
transition: color var(--cd-zeit) var(--cd-kurve);
}
.cd-referenzen__zeilenteaser {
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
margin: 0;
}
.cd-referenzen__zeilenmeta { margin: 0; }
.cd-referenzen__zeilenpfeil {
color: var(--cd-rot);
font-size: var(--cd-gr-h4);
padding-inline: var(--cd-a3);
}
@media (max-width: 700px) {
.cd-referenzen__zeile {
grid-template-columns: 96px minmax(0, 1fr) auto;
gap: var(--cd-a4);
}
.cd-referenzen__zeilenpfeil { padding-inline: 0; }
}
@media (max-width: 420px) {
.cd-referenzen__zeilenteaser { display: none; }
}
.cd-referenzen__stein .cd-kihinweis--marke {
inset-block: var(--cd-a3) auto;
inset-inline: auto var(--cd-a3);
}
.cd-referenzen__fallbild {
position: relative;
}
.cd-referenzen__bild > .cd-kihinweis--marke,
.cd-referenzen__zeilenbild > .cd-kihinweis--marke {
inset-inline: auto var(--cd-a3);
inset-block-end: var(--cd-a3);
}
.cd-referenzen__bild,
.cd-referenzen__fallbild { position: relative; }
.cd-referenzen__plakette--imBild {
position: absolute;
inset-block-start: auto;
inset-block-end: var(--cd-a4);
inset-inline-start: var(--cd-a4);
margin-block-start: 0;
z-index: 2;
}
.cd-referenzen__plakette--imBild img {
inline-size: auto;
block-size: auto;
max-inline-size: 100%;
max-block-size: 100%;
object-fit: contain;
transform: none;
transition: none;
}
@media (max-width: 699px) {
.cd-referenzen[data-refmobil="liste"] {
--cd-ref-zeilenbild: 104px;
--cd-ref-zl-titel: var(--cd-tinte);
--cd-ref-zl-linie: var(--cd-linie);
--cd-ref-zl-akzent: var(--cd-rot);
--cd-ref-zl-leise: var(--cd-text-3);
--cd-ref-zl-text: var(--cd-text-2);
--cd-ref-zl-ring: var(--cd-rot);
}
.cd-referenzen.cd-auf-dunkel[data-refmobil="liste"] {
--cd-ref-zl-titel: var(--cd-weiss);
--cd-ref-zl-linie: var(--cd-linie-auf-dunkel);
--cd-ref-zl-akzent: var(--cd-rot-auf-dunkel);
--cd-ref-zl-leise: var(--cd-text-auf-dunkel-2);
--cd-ref-zl-text: var(--cd-text-auf-dunkel);
--cd-ref-zl-ring: var(--cd-weiss);
}
.cd-referenzen.cd-auf-rot[data-refmobil="liste"] {
--cd-ref-zl-titel: var(--cd-weiss);
--cd-ref-zl-linie: var(--cd-linie-auf-dunkel);
--cd-ref-zl-akzent: var(--cd-weiss);
--cd-ref-zl-leise: var(--cd-weiss);
--cd-ref-zl-text: var(--cd-weiss);
--cd-ref-zl-ring: var(--cd-weiss);
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__raster,
.cd-referenzen__karten,
.cd-referenzen__spur,
.cd-referenzen__galerie,
.cd-referenzen__mosaik,
.cd-referenzen__weitere
) {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: 0;
scroll-padding: 0;
overflow: visible;
scroll-snap-type: none;
background: none;
border: 0;
border-block-end: 1px solid var(--cd-ref-zl-linie);
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__folie {
display: block;
scroll-snap-align: none;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__kachel,
.cd-referenzen__karte,
.cd-referenzen__kurz,
.cd-referenzen__stein
) {
position: relative;
display: grid;
grid-template-columns: var(--cd-ref-zeilenbild) minmax(0, 1fr);
align-items: center;
column-gap: var(--cd-a4);
row-gap: 0;
grid-column: auto;
grid-row: auto;
min-block-size: 0;
aspect-ratio: auto;
padding: var(--cd-a4) 0;
overflow: visible;
background: none;
border: 0;
border-block-start: 1px solid var(--cd-ref-zl-linie);
border-radius: 0;
box-shadow: none;
transform: none;
color: inherit;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachel[hidden] {
display: none;
}
@media (scripting: enabled) {
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachel--spaeter {
display: none;
}
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__kachel,
.cd-referenzen__karte,
.cd-referenzen__kurz
) > .cd-referenzen__bild {
position: relative;
inset: auto;
inline-size: 100%;
min-block-size: 0;
aspect-ratio: auto;
flex: none;
overflow: visible;
background: none;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__kachel,
.cd-referenzen__karte,
.cd-referenzen__kurz
) > .cd-referenzen__bild > img,
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__steinbild > img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 3 / 2;
border: 1px solid var(--cd-ref-zl-linie);
background: var(--cd-flaeche-3);
transform: none;
transition: none;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__kachel,
.cd-referenzen__karte,
.cd-referenzen__kurz
) > .cd-referenzen__bild:not(:has(> img)) {
aspect-ratio: 3 / 2;
background: var(--cd-flaeche-3);
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__steinbild {
position: static;
grid-column: 1;
grid-row: 1;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__steintext {
grid-column: 2;
grid-row: 1 / span 2;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__bild,
.cd-referenzen__stein
) > .cd-kihinweis--marke {
position: static;
display: block;
grid-column: 1;
grid-row: 2;
align-self: start;
margin-block-start: var(--cd-a1);
padding: 0;
border-radius: 0;
background: none;
backdrop-filter: none;
letter-spacing: .04em;
color: var(--cd-ref-zl-leise);
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__plakette,
.cd-referenzen__projektmarke,
.cd-referenzen__fallmarke,
.cd-referenzen__steinschleier
) {
display: none;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__schleier {
inset: auto;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__text,
.cd-referenzen__steintext
) {
position: static;
inset: auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--cd-a1);
flex: none;
block-size: auto;
min-inline-size: 0;
padding: 0;
background: none;
color: inherit;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__text::before {
content: none;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__text,
.cd-referenzen__steintext
) > .cd-kicker {
margin: 0;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__marke {
align-self: auto;
padding: 0;
background: none;
font-size: 11.5px;
font-weight: 500;
letter-spacing: .18em;
color: var(--cd-ref-zl-akzent);
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__kacheltitel,
.cd-referenzen__kartentitel,
.cd-referenzen__kurztitel,
.cd-referenzen__steintitel
) {
margin: 0;
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h4);
font-weight: 600;
line-height: var(--cd-zeile-kopf);
letter-spacing: -.018em;
color: var(--cd-ref-zl-titel);
transition: color var(--cd-zeit) var(--cd-kurve);
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachelziel {
color: inherit;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__teaser {
flex: none;
margin: 0;
font-size: var(--cd-gr-klein);
color: var(--cd-ref-zl-text);
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__text,
.cd-referenzen__steintext
) .cd-nummer {
color: var(--cd-ref-zl-leise);
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__fusszeile {
flex-wrap: wrap;
justify-content: flex-start;
gap: 0 var(--cd-a3);
margin: 0;
padding: 0;
border: 0;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__weiter {
color: var(--cd-ref-zl-akzent);
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachelknopf {
align-self: flex-start;
gap: var(--cd-a2);
min-block-size: 0;
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
letter-spacing: .12em;
line-height: 1.4;
text-transform: uppercase;
color: var(--cd-ref-zl-akzent);
transform: none;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachelknopf:hover {
background: none;
color: var(--cd-ref-zl-akzent);
transform: none;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachelknopf::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__kachelknopf,
.cd-referenzen__kachelziel
):focus-visible {
outline: none;
}
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__kachel:has(:is(.cd-referenzen__kachelknopf, .cd-referenzen__kachelziel):focus-visible),
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
a.cd-referenzen__karte,
a.cd-referenzen__kurz,
a.cd-referenzen__stein
):focus-visible {
outline: 3px solid var(--cd-ref-zl-ring);
outline-offset: -3px;
}
}
@media (max-width: 699px) and (hover: hover) {
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__kachel:has(.cd-referenzen__kachelknopf, .cd-referenzen__kachelziel),
a.cd-referenzen__karte,
a.cd-referenzen__kurz,
a.cd-referenzen__stein
):hover :is(
.cd-referenzen__kacheltitel,
.cd-referenzen__kartentitel,
.cd-referenzen__kurztitel,
.cd-referenzen__steintitel
) {
color: var(--cd-ref-zl-akzent);
}
}
@media (max-width: 420px) {
.cd-bahn.cd-referenzen[data-refmobil="liste"] .cd-referenzen__teaser {
display: none;
}
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
.cd-bahn.cd-referenzen[data-refmobil="liste"] :is(
.cd-referenzen__kacheltitel,
.cd-referenzen__kartentitel,
.cd-referenzen__kurztitel,
.cd-referenzen__steintitel
) {
transition: none;
}
}
@media (max-width: 699px) {
.cd-bahn.cd-referenzen[data-mobilspur="nie"] .cd-referenzen__spur {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-ref-fuge, var(--cd-a5));
overflow: visible;
scroll-snap-type: none;
}
.cd-bahn.cd-referenzen[data-mobilspur="nie"] .cd-referenzen__folie {
scroll-snap-align: none;
}
}
@media (max-width: 699px) {
.cd-referenzen__liste {
--cd-ref-zeilenbild: 104px;
}
.cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeile {
grid-template-columns: var(--cd-ref-zeilenbild) minmax(0, 1fr) auto;
}
.cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilenbild {
aspect-ratio: auto;
overflow: visible;
border: 0;
background: none;
}
.cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilenbild > img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 3 / 2;
border: 1px solid var(--cd-linie);
background: var(--cd-flaeche-3);
transform: none;
}
.cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilenbild > .cd-referenzen__plakette--imBild {
display: none;
}
.cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilentext > .cd-kicker {
margin: 0;
}
.cd-bahn.cd-referenzen .cd-referenzen__liste .cd-referenzen__zeilenbild > .cd-kihinweis--marke {
position: static;
display: block;
margin-block-start: var(--cd-a1);
padding: 0;
border-radius: 0;
background: none;
backdrop-filter: none;
letter-spacing: .04em;
color: var(--cd-text-3);
}
.cd-bahn.cd-referenzen.cd-auf-dunkel .cd-referenzen__liste .cd-referenzen__zeilenbild > .cd-kihinweis--marke {
color: var(--cd-text-auf-dunkel-2);
}
}
/* bahnen/cd_referenzdetail.css */
.cd-referenzdetail__buehne {
position: relative;
display: block;
}
.cd-referenzdetail__kopf { position: relative; }
.cd-referenzdetail__rueckweg { margin-block-end: var(--cd-a6); }
.cd-referenzdetail__rueckwegLink {
display: inline-flex;
align-items: center;
gap: var(--cd-a3);
min-block-size: 24px;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-2);
transition: color var(--cd-zeit) ease;
}
.cd-referenzdetail__rueckwegLink:hover { color: var(--cd-rot); }
.cd-referenzdetail__rueckwegPfeil {
inline-size: 8px;
block-size: 8px;
border-inline-start: 2px solid currentColor;
border-block-end: 2px solid currentColor;
transform: rotate(45deg);
}
.cd-referenzdetail__kopftext { max-inline-size: 52rem; }
.cd-referenzdetail__titel { margin-block: var(--cd-a3) var(--cd-a5); }
.cd-referenzdetail__teaser {
font-size: var(--cd-gr-gross);
color: var(--cd-text-2);
max-inline-size: 44rem;
}
.cd-referenzdetail__sitz {
margin-block-start: var(--cd-a4);
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
max-inline-size: 44rem;
}
.cd-referenzdetail__sitz strong {
font-weight: 600;
color: var(--cd-tinte);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__sitz { color: var(--cd-text-auf-dunkel-2); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__sitz strong { color: var(--cd-text-auf-dunkel); }
.cd-referenzdetail__eckwerte {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
gap: var(--cd-a5) 0;
}
.cd-referenzdetail__eckwert {
padding-inline: var(--cd-a5);
border-inline-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__eckwert:first-child {
padding-inline-start: 0;
border-inline-start: 0;
}
.cd-referenzdetail__eckwert dt {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-3);
margin-block-end: 4px;
}
.cd-referenzdetail__eckwert dd {
margin: 0;
font-size: var(--cd-gr-gross);
font-weight: 500;
color: var(--cd-tinte);
}
.cd-referenzdetail__bild,
.cd-referenzdetail__kopfbild,
.cd-referenzdetail__kapitelbild {
margin: 0;
background: var(--cd-flaeche-3);
}
.cd-referenzdetail__bild img,
.cd-referenzdetail__kopfbild img,
.cd-referenzdetail__kapitelbild img {
inline-size: 100%;
block-size: auto;
display: block;
}
.cd-referenzdetail__bild { margin-block-end: var(--cd-a8); }
.cd-referenzdetail__spalten {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--cd-a8);
align-items: start;
}
.cd-referenzdetail__text {
font-size: var(--cd-gr-gross);
color: var(--cd-text-2);
}
.cd-referenzdetail__fliess p + p { margin-block-start: var(--cd-a4); }
.cd-referenzdetail__kapitel {
list-style: none;
margin: 0;
padding: 0;
counter-reset: cd-kapitel;
}
.cd-referenzdetail__kapitelpunkt {
counter-increment: cd-kapitel;
margin-block-end: var(--cd-a8);
}
.cd-referenzdetail__kapitelpunkt:last-child { margin-block-end: 0; }
.cd-referenzdetail__kapiteltitel {
margin-block: var(--cd-a3) var(--cd-a4);
color: var(--cd-tinte);
}
.cd-referenzdetail__kapitelfliess p + p { margin-block-start: var(--cd-a4); }
.cd-referenzdetail__kapitelfliess ul {
list-style: none;
padding: 0;
margin-block-start: var(--cd-a4);
display: grid;
gap: var(--cd-a3);
}
.cd-referenzdetail__kapitelfliess ul li {
position: relative;
padding-inline-start: var(--cd-a6);
}
.cd-referenzdetail__kapitelfliess ul li::before {
content: "";
position: absolute;
inset-block-start: .72em;
inset-inline-start: 0;
inline-size: 14px;
block-size: 2px;
background: var(--cd-rot);
}
.cd-referenzdetail__kapitelfliess ol {
padding-inline-start: var(--cd-a6);
margin-block-start: var(--cd-a4);
display: grid;
gap: var(--cd-a3);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapiteltitel {
font-size: var(--cd-gr-h3);
line-height: 1.25;
letter-spacing: -.018em;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess p {
max-inline-size: 40rem;
}
.cd-referenzdetail__kapitelbild { margin-block-start: var(--cd-a5); }
.cd-referenzdetail__schlagworte {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a2);
margin-block-start: var(--cd-a7);
}
.cd-referenzdetail__seite {
padding: var(--cd-a6);
background: var(--cd-flaeche-2);
}
.cd-referenzdetail__logo {
display: flex;
align-items: center;
justify-content: center;
inline-size: fit-content;
block-size: 72px;
padding: var(--cd-a3) var(--cd-a4);
background: var(--cd-weiss);
border-radius: var(--cd-r-feld);
margin-block-end: var(--cd-a5);
}
.cd-referenzdetail__logo img {
max-inline-size: min(15rem, 100%);
max-block-size: 100%;
inline-size: auto;
block-size: auto;
object-fit: contain;
}
.cd-referenzdetail__logo img[src$=".svg"] { block-size: 100%; }
.cd-referenzdetail__logo--weiss { background: var(--cd-weiss); }
.cd-referenzdetail__logo--dunkel {
background: var(--cd-dunkel);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.cd-referenzdetail__logo--ohne {
background: none;
box-shadow: none;
padding-inline: 0;
}
.cd-referenzdetail__kunde {
font-weight: 600;
color: var(--cd-tinte);
margin-block-end: var(--cd-a5);
}
.cd-referenzdetail__daten { margin-block-end: var(--cd-a6); }
.cd-referenzdetail__datum {
display: flex;
justify-content: space-between;
gap: var(--cd-a4);
padding-block: var(--cd-a3);
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__datum:last-child { border-block-end: 0; }
.cd-referenzdetail__datum dt {
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
}
.cd-referenzdetail__datum dd {
margin: 0;
font-size: var(--cd-gr-klein);
font-weight: 600;
color: var(--cd-tinte);
text-align: end;
}
.cd-referenzdetail__adresse { margin: 0; }
.cd-referenzdetail__seite .cd-knopf--linie {
border-color: var(--cd-text-3);
}
.cd-referenzdetail__seite .cd-knopf--linie:hover,
.cd-referenzdetail__seite .cd-knopf--linie:focus-visible {
border-color: var(--cd-dunkel);
}
.cd-referenzdetail--standard .cd-referenzdetail__kopf,
.cd-referenzdetail--bericht .cd-referenzdetail__kopf,
.cd-referenzdetail--galerie .cd-referenzdetail__kopf,
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kopf,
.cd-referenzdetail--wechsel .cd-referenzdetail__kopf {
padding-block-end: var(--cd-a6);
}
.cd-referenzdetail--standard .cd-referenzdetail__band .cd-bahn__inhalt,
.cd-referenzdetail--wechsel .cd-referenzdetail__band .cd-bahn__inhalt {
padding-block: var(--cd-a5) var(--cd-a7);
border-block-start: 1px solid var(--cd-linie-2);
}
@media (min-width: 1024px) {
.cd-referenzdetail--standard .cd-referenzdetail__seite,
.cd-referenzdetail--fallstudie .cd-referenzdetail__seite,
.cd-referenzdetail--kompakt .cd-referenzdetail__seite {
position: sticky;
inset-block-start: calc(var(--cd-kopf-gesamt) + var(--cd-a5));
}
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__buehne,
.cd-referenzdetail--magazin .cd-referenzdetail__buehne {
overflow: hidden;
isolation: isolate;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__buehne { background: var(--cd-tinte); }
.cd-referenzdetail--magazin .cd-referenzdetail__buehne { background: var(--cd-flaeche-3); }
.cd-referenzdetail__buehnenbild {
position: absolute;
inset: 0;
z-index: -2;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__buehne::before,
.cd-referenzdetail--magazin .cd-referenzdetail__buehne::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__buehne::before {
background: linear-gradient(105deg, rgba(13, 26, 33, .94) 0%, rgba(13, 26, 33, .78) 45%, rgba(13, 26, 33, .45) 100%);
}
.cd-referenzdetail--magazin .cd-referenzdetail__buehne::before {
background: linear-gradient(105deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .82) 48%, rgba(255, 255, 255, .5) 100%);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kopf,
.cd-referenzdetail--magazin .cd-referenzdetail__kopf {
padding-block: var(--cd-a7) var(--cd-a9);
min-block-size: 22rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__titel { color: var(--cd-weiss); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__teaser { color: var(--cd-text-auf-dunkel); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__kicker { color: var(--cd-rot-auf-dunkel); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__rueckwegLink { color: var(--cd-text-auf-dunkel-2); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__rueckwegLink:hover { color: var(--cd-weiss); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__band {
background: var(--cd-dunkel);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__band .cd-bahn__inhalt {
padding-block: var(--cd-a6);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__eckwert {
border-inline-start-color: var(--cd-linie-auf-dunkel);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__eckwert dt { color: var(--cd-text-auf-dunkel-2); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__eckwert dd { color: var(--cd-weiss); }
.cd-referenzdetail--fallstudie .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a9); }
.cd-referenzdetail--bericht .cd-referenzdetail__band { background: var(--cd-flaeche-2); }
.cd-referenzdetail--bericht .cd-referenzdetail__band .cd-bahn__inhalt {
padding-block: var(--cd-a6);
}
.cd-referenzdetail--bericht .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a8); }
.cd-referenzdetail--bericht .cd-referenzdetail__spalten,
.cd-referenzdetail--galerie .cd-referenzdetail__spalten,
.cd-referenzdetail--zeitleiste .cd-referenzdetail__spalten,
.cd-referenzdetail--wechsel .cd-referenzdetail__spalten {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a8);
}
.cd-referenzdetail--bericht .cd-referenzdetail__text {
max-inline-size: 46rem;
margin-inline: auto;
}
.cd-referenzdetail--bericht .cd-referenzdetail__seite,
.cd-referenzdetail--galerie .cd-referenzdetail__seite,
.cd-referenzdetail--zeitleiste .cd-referenzdetail__seite,
.cd-referenzdetail--wechsel .cd-referenzdetail__seite {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
gap: var(--cd-a5) var(--cd-a7);
align-items: start;
}
.cd-referenzdetail--bericht .cd-referenzdetail__logo,
.cd-referenzdetail--galerie .cd-referenzdetail__logo,
.cd-referenzdetail--zeitleiste .cd-referenzdetail__logo,
.cd-referenzdetail--wechsel .cd-referenzdetail__logo {
margin-block-end: 0;
}
.cd-referenzdetail--wechsel .cd-referenzdetail__kapitelpunkt {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--cd-a8);
align-items: center;
margin-block-end: var(--cd-a9);
}
.cd-referenzdetail--wechsel .cd-referenzdetail__kapitelbild { margin-block-start: 0; }
.cd-referenzdetail--wechsel .cd-referenzdetail__kapitelpunkt:nth-child(even) .cd-referenzdetail__kapiteltext { order: 2; }
.cd-referenzdetail--magazin .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a8); }
.cd-referenzdetail--magazin .cd-referenzdetail__spalten {
grid-template-columns: minmax(0, 1fr);
}
.cd-referenzdetail--magazin .cd-referenzdetail__kapitel {
columns: 2;
column-gap: var(--cd-a8);
}
.cd-referenzdetail--magazin .cd-referenzdetail__kapitelpunkt {
break-inside: avoid-column;
margin-block-end: var(--cd-a7);
}
.cd-referenzdetail--magazin .cd-referenzdetail__kapiteltitel {
break-after: avoid-column;
}
.cd-referenzdetail--magazin .cd-referenzdetail__seite {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
gap: var(--cd-a5) var(--cd-a7);
align-items: start;
}
.cd-referenzdetail--magazin .cd-referenzdetail__logo { margin-block-end: 0; }
.cd-referenzdetail--kompakt .cd-referenzdetail__kopf {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--cd-a8);
align-items: center;
padding-block: var(--cd-a7) var(--cd-a8);
}
.cd-referenzdetail--kompakt .cd-referenzdetail__rueckweg {
grid-column: 1 / -1;
margin-block-end: 0;
}
.cd-referenzdetail--kompakt .cd-referenzdetail__band { background: var(--cd-flaeche-2); }
.cd-referenzdetail--kompakt .cd-referenzdetail__band .cd-bahn__inhalt {
padding-block: var(--cd-a6);
}
.cd-referenzdetail--kompakt .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a8); }
.cd-referenzdetail--galerie .cd-referenzdetail__galerie {
list-style: none;
margin: 0 0 var(--cd-a8);
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
gap: var(--cd-a4);
}
.cd-referenzdetail--galerie .cd-referenzdetail__galeriestueck figure {
margin: 0;
background: var(--cd-flaeche-3);
}
.cd-referenzdetail--galerie .cd-referenzdetail__galeriestueck img {
inline-size: 100%;
block-size: auto;
display: block;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.cd-referenzdetail--galerie .cd-referenzdetail__galeriestueck figcaption {
padding: var(--cd-a3) var(--cd-a4);
background: var(--cd-flaeche-2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-referenzdetail--galerie .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a7); }
.cd-referenzdetail--galerie .cd-referenzdetail__text { max-inline-size: 46rem; }
.cd-referenzdetail--zeitleiste .cd-referenzdetail__rumpf { padding-block-start: var(--cd-a8); }
.cd-referenzdetail--zeitleiste .cd-referenzdetail__text { max-inline-size: 52rem; }
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kapitelpunkt {
position: relative;
padding-inline-start: var(--cd-a8);
padding-block-end: var(--cd-a8);
margin-block-end: 0;
border-inline-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kapitelpunkt:last-child {
border-inline-start-color: transparent;
padding-block-end: 0;
}
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kapitelpunkt::before {
content: counter(cd-kapitel);
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
inline-size: 34px;
block-size: 34px;
border-radius: 50%;
background: var(--cd-weiss);
border: 1px solid var(--cd-rot);
color: var(--cd-rot);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
font-weight: 600;
}
.cd-referenzdetail--zeitleiste .cd-referenzdetail__kapiteltitel { margin-block-start: 0; }
@media (max-width: 1023px) {
.cd-referenzdetail__spalten,
.cd-referenzdetail--kompakt .cd-referenzdetail__kopf,
.cd-referenzdetail--wechsel .cd-referenzdetail__kapitelpunkt {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a7);
}
.cd-referenzdetail--magazin .cd-referenzdetail__kapitel { columns: 1; }
.cd-referenzdetail--bericht .cd-referenzdetail__text { max-inline-size: none; }
.cd-referenzdetail--wechsel .cd-referenzdetail__kapitelpunkt:nth-child(even) .cd-referenzdetail__kapiteltext {
order: 0;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kopf,
.cd-referenzdetail--magazin .cd-referenzdetail__kopf {
min-block-size: 16rem;
padding-block: var(--cd-a6) var(--cd-a7);
}
.cd-referenzdetail--bericht .cd-referenzdetail__eckwert {
flex-basis: 100%;
padding-inline: 0;
border-inline-start: 0;
}
}
.cd-referenzdetail__faktentitel {
margin: calc(var(--cd-a6) * -1) calc(var(--cd-a6) * -1) var(--cd-a5);
padding: var(--cd-a4) var(--cd-a6);
background: var(--cd-tinte);
color: var(--cd-weiss);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
}
.cd-referenzdetail__faktentitel strong { font-weight: 600; }
.cd-referenzdetail__nebenaktion {
margin-block-start: var(--cd-a6);
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__nebenaktionTitel {
font-weight: 600;
color: var(--cd-tinte);
margin-block-end: var(--cd-a4);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px;
background: var(--cd-linie-2);
padding: 2px;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul li:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
@media (max-width: 600px) {
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul {
grid-template-columns: minmax(0, 1fr);
}
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul li {
display: flex;
align-items: center;
min-block-size: 56px;
margin: 0;
padding: var(--cd-a3) var(--cd-a4) var(--cd-a3) var(--cd-a6);
background: var(--cd-weiss);
font-size: var(--cd-gr-klein);
color: var(--cd-tinte);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kapitelfliess ul li::before {
inset-block-start: 50%;
inset-inline-start: var(--cd-a4);
transform: translateY(-50%);
inline-size: 10px;
}
.cd-referenzdetail__technik {
background: var(--cd-flaeche-2);
border-block-start: 1px solid var(--cd-linie-2);
margin-block-start: var(--cd-a9);
}
.cd-referenzdetail__technikRaster {
display: grid;
grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
gap: var(--cd-a8);
align-items: start;
padding-block: var(--cd-a8);
}
.cd-referenzdetail__technikTitel { margin-block-start: var(--cd-a3); }
.cd-referenzdetail__technikListe {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cd-referenzdetail__technikListe li {
display: inline-flex;
align-items: center;
min-block-size: 43px;
padding-inline: var(--cd-a5);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-knopf);
font-size: var(--cd-gr-klein);
color: var(--cd-tinte);
}
.cd-referenzdetail__weitere { background: var(--cd-weiss); }
.cd-referenzdetail__weitere > .cd-bahn__inhalt { padding-block: var(--cd-a8); }
.cd-referenzdetail__weitereKopf {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cd-a5);
margin-block-end: var(--cd-a7);
}
.cd-referenzdetail__weitereTitel { margin: 0; }
.cd-referenzdetail__weitereListe {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
gap: var(--cd-a4);
}
.cd-referenzdetail__weiteresStueck article {
position: relative;
display: flex;
flex-direction: column;
block-size: 100%;
background: var(--cd-flaeche-2);
}
.cd-referenzdetail__weiteresBild {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--cd-flaeche-3);
}
.cd-referenzdetail__weiteresBild img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: top center;
display: block;
transition: transform .5s var(--cd-kurve);
}
.cd-referenzdetail__weiteresStueck article:hover .cd-referenzdetail__weiteresBild img {
transform: scale(1.05);
}
.cd-referenzdetail__weiteresText {
padding: var(--cd-a4) var(--cd-a5) var(--cd-a5);
display: grid;
gap: var(--cd-a2);
}
.cd-referenzdetail__weiteresTitel { margin: 0; font-size: var(--cd-gr-h4); }
.cd-referenzdetail__weiteresZiel { color: inherit; }
.cd-referenzdetail__weiteresZiel::after {
content: "";
position: absolute;
inset: 0;
}
.cd-referenzdetail__weiteresStueck article:hover .cd-referenzdetail__weiteresZiel { color: var(--cd-rot); }
.cd-referenzdetail__weiteresZiel:focus-visible { outline: none; }
.cd-referenzdetail__weiteresStueck article:focus-within {
outline: 3px solid var(--cd-rot);
outline-offset: 3px;
}
.cd-referenzdetail__abschluss {
background: var(--cd-dunkel);
border-block-start: 4px solid var(--cd-rot);
border-block-end: 1px solid var(--cd-linie-auf-dunkel);
color: var(--cd-text-auf-dunkel);
}
.cd-referenzdetail__abschlussRaster {
display: grid;
grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
gap: var(--cd-a8);
align-items: center;
padding-block: var(--cd-a8);
}
.cd-referenzdetail__abschlussTitel { color: var(--cd-weiss); }
.cd-referenzdetail__abschlussText {
margin-block-start: var(--cd-a4);
max-inline-size: 34rem;
}
.cd-referenzdetail__abschlussKnoepfe {
display: grid;
gap: 14px;
}
.cd-referenzdetail__anruf {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-referenzdetail__anruf:hover {
background: var(--cd-rot-tief);
border-color: var(--cd-rot-tief);
color: var(--cd-weiss);
}
.cd-referenzdetail__anruf .cd-symbol { inline-size: 20px; block-size: 20px; }
.cd-referenzdetail__abschlussZweit {
background: transparent;
border-color: var(--cd-linie-auf-dunkel);
color: var(--cd-weiss);
}
.cd-referenzdetail__abschlussZweit:hover {
border-color: var(--cd-weiss);
background: color-mix(in srgb, var(--cd-weiss) 8%, transparent);
color: var(--cd-weiss);
}
@media (max-width: 1023px) {
.cd-referenzdetail__technikRaster,
.cd-referenzdetail__abschlussRaster {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
}
}
.cd-referenzdetail__externZeichen {
position: relative;
inline-size: 12px;
block-size: 12px;
flex: 0 0 auto;
border: 1.5px solid currentColor;
border-block-start-color: transparent;
border-inline-end-color: transparent;
}
.cd-referenzdetail__externZeichen::before,
.cd-referenzdetail__externZeichen::after {
content: "";
position: absolute;
}
.cd-referenzdetail__externZeichen::before {
inset-block-start: -1px;
inset-inline-end: -3px;
inline-size: 10px;
block-size: 1.5px;
background: currentColor;
transform: rotate(-45deg);
transform-origin: 100% 50%;
}
.cd-referenzdetail__externZeichen::after {
inset-block-start: -4px;
inset-inline-end: -4px;
inline-size: 6px;
block-size: 6px;
border-block-start: 1.5px solid currentColor;
border-inline-end: 1.5px solid currentColor;
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__schlagworte { display: none; }
.cd-bahn.cd-referenzdetail--fallstudie { padding-block-end: 0; }
.cd-referenzdetail__abzeichenzeile {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a4);
margin-block-end: var(--cd-a5);
}
.cd-referenzdetail__abzeichen {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: var(--cd-rot);
color: var(--cd-weiss);
border-radius: var(--cd-r-knopf);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
.cd-referenzdetail__abzeichenwert {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-auf-dunkel-2);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__kopf { min-block-size: 30rem; }
.cd-referenzdetail--fallstudie .cd-referenzdetail__band .cd-bahn__inhalt {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cd-a5);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__eckwerte { flex: 1 1 34rem; }
.cd-referenzdetail__bandknopf { flex: 0 0 auto; }
.cd-referenzdetail__galerieband {
background: var(--cd-flaeche-2);
border-block-start: 1px solid var(--cd-linie-2);
margin-block-start: var(--cd-a9);
}
.cd-referenzdetail__galerieband > .cd-bahn__inhalt { padding-block: var(--cd-a8); }
.cd-referenzdetail__galeriekopf { margin-block-end: var(--cd-a7); }
.cd-referenzdetail__galerietitel { margin-block-start: var(--cd-a3); }
.cd-referenzdetail__galeriereihe {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
gap: 2px;
background: var(--cd-linie-2);
}
.cd-referenzdetail__galeriereihe figure { margin: 0; background: var(--cd-weiss); }
.cd-referenzdetail__galeriereihe img {
inline-size: 100%;
block-size: auto;
display: block;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: top center;
}
.cd-referenzdetail__galeriereihe figcaption {
padding: var(--cd-a4) var(--cd-a5);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-referenzdetail__galerieoeffner {
position: relative;
display: block;
color: inherit;
text-decoration: none;
outline-offset: var(--cd-a2);
}
.cd-referenzdetail__galerieoeffner:focus-visible {
outline: 2px solid var(--cd-rot);
}
.cd-referenzdetail__galeriehinweis {
position: absolute;
inset-inline-end: var(--cd-a4);
inset-block-end: var(--cd-a4);
display: flex;
align-items: center;
gap: var(--cd-a3);
min-block-size: 2.75rem;
padding-inline-start: var(--cd-a4);
background: color-mix(in srgb, var(--cd-dunkel) 90%, transparent);
color: var(--cd-weiss);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .08em;
text-transform: uppercase;
opacity: 0;
transform: translateY(var(--cd-a2));
transition: opacity .2s ease, transform .2s ease;
}
.cd-referenzdetail__galerieplus {
display: grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
background: var(--cd-rot);
font-family: var(--cd-schrift-mono);
font-size: 1.35rem;
}
.cd-referenzdetail__galerieoeffner:hover .cd-referenzdetail__galeriehinweis,
.cd-referenzdetail__galerieoeffner:focus-visible .cd-referenzdetail__galeriehinweis {
opacity: 1;
transform: none;
}
.cd-referenzdetail__fragen {
background: var(--cd-weiss);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__fragenRaster {
display: grid;
grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
gap: var(--cd-a8);
align-items: start;
padding-block: var(--cd-a8);
}
.cd-referenzdetail__fragenTitel { margin-block-start: var(--cd-a3); }
.cd-referenzdetail__fragenListe { border-block-start: 1px solid var(--cd-linie-2); }
@media (max-width: 1023px) {
.cd-referenzdetail__fragenRaster {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
}
}
.cd-referenzdetail__galeriereihe {
background: none;
gap: var(--cd-a6);
align-items: end;
}
.cd-referenzdetail__galeriereihe figure { background: none; }
.cd-referenzdetail__galeriereihe img { aspect-ratio: auto; }
.cd-referenzdetail__galeriereihe figcaption {
padding-inline: 0;
padding-block: var(--cd-a4) 0;
text-align: center;
}
.cd-referenzdetail__galeriestueck--tablet .cd-geraet {
inline-size: 62%;
max-inline-size: 15rem;
margin-inline: auto;
}
.cd-referenzdetail__galeriestueck--iphone .cd-geraet,
.cd-referenzdetail__galeriestueck--galaxy .cd-geraet {
inline-size: 38%;
max-inline-size: 9.5rem;
margin-inline: auto;
}
.cd-referenzdetail__galeriestueck--mockup img {
border: 1px solid color-mix(in srgb, var(--cd-linie-2) 72%, transparent);
}
@media (min-width: 900px) {
.cd-referenzdetail__galerieband--editorial .cd-referenzdetail__galeriereihe {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.cd-referenzdetail__galerieband--editorial .cd-referenzdetail__galeriestueck:first-of-type {
grid-column: 1 / -1;
}
}
.cd-referenzdetail__galerieband--raster .cd-referenzdetail__galeriereihe {
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
align-items: start;
}
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriereihe {
display: flex;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scrollbar-width: thin;
scrollbar-color: var(--cd-rot) var(--cd-linie-2);
align-items: start;
gap: var(--cd-a5);
padding-block-end: var(--cd-a3);
}
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriestueck {
flex: 0 0 100%;
min-inline-size: 0;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriestueck--tablet .cd-geraet {
inline-size: min(72%, 46rem);
max-inline-size: 46rem;
}
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriestueck--iphone .cd-geraet,
.cd-referenzdetail__galerieband--slider .cd-referenzdetail__galeriestueck--galaxy .cd-geraet {
inline-size: min(48%, 20rem);
max-inline-size: 20rem;
}
.cd-referenzdetail__galeriebedienung {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a5);
margin-block-start: var(--cd-a5);
}
.cd-referenzdetail__galeriebedienung[hidden],
.cd-referenzdetail__galeriefortschritt[hidden],
.cd-referenzdetail__galeriepunkte[hidden] { display: none; }
.cd-referenzdetail__galeriepunkte {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a2);
}
.cd-referenzdetail__galeriepunkte .cd-spurpunkt {
position: relative;
inline-size: 1.65rem;
block-size: 1.65rem;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.cd-referenzdetail__galeriepunkte .cd-spurpunkt::before {
content: '';
position: absolute;
inset: 50% auto auto 50%;
inline-size: .5rem;
block-size: .5rem;
border-radius: 50%;
background: var(--cd-linie-3);
transform: translate(-50%, -50%);
}
.cd-referenzdetail__galeriepunkte .cd-spurpunkt[aria-current]::before {
background: var(--cd-rot);
transform: translate(-50%, -50%) scale(1.45);
}
.cd-referenzdetail__galeriesteuerung {
display: flex;
align-items: center;
gap: var(--cd-a3);
margin-inline-start: auto;
}
.cd-referenzdetail__galeriepfeil {
display: grid;
place-items: center;
inline-size: 3rem;
block-size: 3rem;
padding: 0;
border: 1px solid var(--cd-linie-3);
background: var(--cd-weiss);
color: var(--cd-text);
font-size: 1.25rem;
cursor: pointer;
}
.cd-referenzdetail__galeriepfeil:hover,
.cd-referenzdetail__galeriepfeil:focus-visible {
border-color: var(--cd-rot);
background: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-referenzdetail__galeriepfeil:disabled {
opacity: .35;
cursor: default;
}
.cd-referenzdetail__galeriezaehler,
.cd-referenzdetail__lightboxzaehler {
margin: 0;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
}
.cd-referenzdetail__galeriefortschritt {
block-size: 2px;
margin-block-start: var(--cd-a4);
background: var(--cd-linie-2);
overflow: hidden;
}
.cd-referenzdetail__galeriefortschritt > span {
display: block;
block-size: 100%;
background: var(--cd-rot);
transform-origin: left center;
transition: transform .25s ease;
}
html.cd-galerie-offen { overflow: hidden; }
.cd-referenzdetail__lightbox {
inline-size: min(96vw, 100rem);
max-inline-size: none;
max-block-size: 96vh;
padding: 0;
border: 0;
background: transparent;
color: var(--cd-weiss);
overflow: visible;
}
.cd-referenzdetail__lightbox::backdrop {
background: color-mix(in srgb, #05070a 92%, transparent);
backdrop-filter: blur(6px);
}
.cd-referenzdetail__lightboxkasten {
border: 1px solid color-mix(in srgb, var(--cd-weiss) 18%, transparent);
background: #0a0d12;
box-shadow: 0 2rem 7rem rgba(0, 0, 0, .48);
}
.cd-referenzdetail__lightboxkopf {
display: flex;
align-items: center;
justify-content: space-between;
min-block-size: 4rem;
padding-inline: var(--cd-a5);
border-block-end: 1px solid rgba(255, 255, 255, .14);
}
.cd-referenzdetail__lightboxkopf form { margin: 0; }
.cd-referenzdetail__lightboxschliessen {
display: flex;
align-items: center;
gap: var(--cd-a3);
padding: var(--cd-a3) 0 var(--cd-a3) var(--cd-a3);
border: 0;
background: transparent;
color: inherit;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
}
.cd-referenzdetail__lightboxschliessen span { font-size: 1.6rem; line-height: 1; }
.cd-referenzdetail__lightboxbuehne {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr) 4rem;
align-items: center;
min-block-size: min(78vh, 56rem);
}
.cd-referenzdetail__lightboxfigur {
min-inline-size: 0;
margin: 0;
padding: var(--cd-a5);
}
.cd-referenzdetail__lightboxfigur img {
display: block;
inline-size: auto;
max-inline-size: 100%;
block-size: auto;
max-block-size: 72vh;
margin-inline: auto;
object-fit: contain;
}
.cd-referenzdetail__lightboxfigur figcaption {
min-block-size: 2rem;
padding-block-start: var(--cd-a4);
color: color-mix(in srgb, var(--cd-weiss) 72%, transparent);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
}
.cd-referenzdetail__lightboxpfeil {
align-self: stretch;
border: 0;
background: transparent;
color: var(--cd-weiss);
font-size: 1.65rem;
cursor: pointer;
}
.cd-referenzdetail__lightboxpfeil:hover,
.cd-referenzdetail__lightboxpfeil:focus-visible {
background: rgba(255, 255, 255, .08);
color: var(--cd-rot-auf-dunkel);
}
@media (max-width: 699px) {
.cd-referenzdetail__galeriehinweis > span:first-child { display: none; }
.cd-referenzdetail__galeriehinweis {
opacity: 1;
transform: none;
inset-inline-end: var(--cd-a3);
inset-block-end: var(--cd-a3);
padding: 0;
}
.cd-referenzdetail__galeriebedienung {
align-items: flex-end;
flex-direction: column;
}
.cd-referenzdetail__galeriepunkte { align-self: flex-start; }
.cd-referenzdetail__lightbox {
inline-size: 100vw;
max-block-size: 100vh;
margin: 0;
}
.cd-referenzdetail__lightboxkasten { min-block-size: 100vh; }
.cd-referenzdetail__lightboxbuehne {
position: relative;
display: block;
min-block-size: calc(100vh - 4rem);
padding-block: var(--cd-a5) 4.5rem;
}
.cd-referenzdetail__lightboxfigur { padding: var(--cd-a3); }
.cd-referenzdetail__lightboxfigur img { max-block-size: 72vh; }
.cd-referenzdetail__lightboxpfeil {
position: absolute;
inset-block-end: var(--cd-a3);
inline-size: calc(50% - var(--cd-a4));
block-size: 3.25rem;
border: 1px solid rgba(255, 255, 255, .18);
}
.cd-referenzdetail__lightboxpfeil--zurueck { inset-inline-start: var(--cd-a3); }
.cd-referenzdetail__lightboxpfeil--vor { inset-inline-end: var(--cd-a3); }
}
@media (prefers-reduced-motion: reduce) {
.cd-referenzdetail__galeriehinweis,
.cd-referenzdetail__galeriefortschritt > span { transition: none; }
}
.cd-referenzdetail__galeriereihe { align-items: end; }
@media (max-width: 700px) {
.cd-referenzdetail__eckwerte {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--cd-a5) var(--cd-a6);
}
.cd-referenzdetail__eckwert {
padding-inline: 0;
border-inline-start: 0;
}
}
.cd-referenzdetail__stimme {
background: var(--cd-flaeche-2);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__stimmeRaster {
padding-block: var(--cd-a8);
}
.cd-referenzdetail__stimmeZeichen {
display: block;
font-family: var(--cd-schrift-display);
font-size: 84px;
font-weight: 700;
line-height: 1;
color: var(--cd-rot);
margin-block-start: -.47em;
margin-block-end: var(--cd-a2);
}
.cd-referenzdetail__stimmeStueck { margin: 0; }
.cd-referenzdetail__zitat {
margin: 0;
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h3);
font-weight: 500;
line-height: 1.45;
letter-spacing: -.01em;
color: var(--cd-tinte);
max-inline-size: 46rem;
}
.cd-referenzdetail__zitat p { margin: 0; }
.cd-referenzdetail__zitat p + p { margin-block-start: var(--cd-a4); }
.cd-referenzdetail__stimmeWer {
display: flex;
align-items: center;
gap: var(--cd-a5);
max-inline-size: 46rem;
margin-block-start: var(--cd-a6);
padding-block-start: var(--cd-a6);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-referenzdetail__stimmeLogo {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
.cd-referenzdetail__stimmeLogo img {
display: block;
max-block-size: 32px;
inline-size: auto;
}
.cd-referenzdetail__stimmeLogo img[src$=".svg"] {
block-size: 32px;
max-inline-size: 12rem;
}
.cd-referenzdetail__stimmeLogo--weiss,
.cd-referenzdetail__stimmeLogo--ohne { background: none; }
.cd-referenzdetail__stimmeLogo--dunkel {
background: var(--cd-dunkel);
border-radius: var(--cd-r-feld);
padding: 8px 12px;
}
.cd-referenzdetail__stimmePerson {
display: block;
font-style: normal;
font-weight: 700;
color: var(--cd-tinte);
}
.cd-referenzdetail__stimmeRolle {
display: block;
margin-block-start: 2px;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-referenzdetail--fallstudie .cd-referenzdetail__stimme {
background: var(--cd-flaeche-2);
}
@media (max-width: 700px) {
.cd-referenzdetail__stimmeZeichen { font-size: 58px; }
.cd-referenzdetail__stimmeWer {
flex-wrap: wrap;
gap: var(--cd-a4);
}
}
.cd-referenzdetail__stimme + .cd-referenzdetail__galerieband {
margin-block-start: 0;
}
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__buehne::before {
background: linear-gradient(180deg, rgba(13, 26, 33, .08), rgba(13, 26, 33, .3));
}
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__buehnenbild {
object-position: center;
}
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__kopf {
min-block-size: 36rem;
}
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume {
align-self: flex-start;
padding: var(--cd-a2) var(--cd-a3);
background: rgba(13, 26, 33, .82);
backdrop-filter: blur(8px);
}
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume ol,
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume a,
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume li:not(:last-child)::after {
color: var(--cd-text-auf-dunkel-2);
}
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume a:hover { color: var(--cd-weiss); }
.cd-referenzdetail--kopf-foto .cd-referenzdetail__krume [aria-current="page"] { color: var(--cd-rot-auf-dunkel); }
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__kopftext {
align-self: flex-end;
inline-size: min(100%, 42rem);
padding: clamp(var(--cd-a5), 4vw, var(--cd-a7));
background: rgba(13, 26, 33, .9);
border-inline-start: 4px solid var(--cd-rot);
box-shadow: 0 24px 64px rgba(13, 26, 33, .24);
backdrop-filter: blur(12px);
}
@media (max-width: 700px) {
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__kopf {
min-block-size: 30rem;
}
.cd-referenzdetail--fallstudie.cd-referenzdetail--kopf-foto .cd-referenzdetail__kopftext {
padding: var(--cd-a5);
}
}
@media (min-width: 1024px) {
.cd-referenzdetail:not(.cd-referenzdetail--bericht):not(.cd-referenzdetail--galerie):not(.cd-referenzdetail--zeitleiste):not(.cd-referenzdetail--wechsel):not(.cd-referenzdetail--magazin)
.cd-referenzdetail__spalten > .cd-referenzdetail__text {
grid-column: 1;
grid-row: 1;
}
.cd-referenzdetail:not(.cd-referenzdetail--bericht):not(.cd-referenzdetail--galerie):not(.cd-referenzdetail--zeitleiste):not(.cd-referenzdetail--wechsel):not(.cd-referenzdetail--magazin)
.cd-referenzdetail__spalten > .cd-referenzdetail__seite {
grid-column: 2;
grid-row: 1;
}
}
@media (max-width: 1023px) {
.cd-referenzdetail__seite { padding: var(--cd-a5); }
.cd-referenzdetail__faktentitel {
margin: calc(var(--cd-a5) * -1) calc(var(--cd-a5) * -1) var(--cd-a4);
padding: var(--cd-a3) var(--cd-a5);
}
:is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) .cd-referenzdetail__seite {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 0;
}
:is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) :is(.cd-referenzdetail__faktentitel, .cd-referenzdetail__daten, .cd-referenzdetail__adresse, .cd-referenzdetail__nebenaktion) {
grid-column: 1 / -1;
}
:is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) .cd-referenzdetail__logo {
grid-column: 1;
}
:is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) .cd-referenzdetail__kunde {
grid-column: 2;
}
.cd-referenzdetail__logo {
block-size: 56px;
inline-size: 6.5rem;
min-inline-size: 0;
margin-block-end: var(--cd-a5);
margin-inline-end: var(--cd-a4);
}
.cd-referenzdetail__kunde { margin-block-end: var(--cd-a5); }
.cd-referenzdetail__daten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
gap: 0 var(--cd-a4);
margin-block-end: var(--cd-a5);
}
.cd-referenzdetail__datum {
display: block;
padding-block: var(--cd-a3);
}
.cd-referenzdetail__datum:last-child { border-block-end: 1px solid var(--cd-linie-2); }
.cd-referenzdetail__datum dd {
margin-block-start: 2px;
text-align: start;
}
.cd-referenzdetail__nebenaktion {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a3) var(--cd-a4);
}
.cd-referenzdetail__nebenaktionTitel { margin: 0; }
}
.cd-referenzdetail__technikListe li {
gap: var(--cd-a3);
padding-inline: var(--cd-a4);
}
.cd-referenzdetail__technikListe .cd-symbol {
inline-size: 20px;
block-size: 20px;
flex: 0 0 auto;
color: var(--cd-rot);
}
.cd-referenzdetail__technik:not(:has(.cd-referenzdetail__technikListe > li:nth-child(3))) .cd-referenzdetail__technikRaster {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--cd-a6);
padding-block: var(--cd-a7);
}
.cd-referenzdetail__technik:not(:has(.cd-referenzdetail__technikListe > li:nth-child(3))) .cd-referenzdetail__technikTitel {
font-size: var(--cd-gr-h3);
margin-block-start: var(--cd-a2);
}
.cd-referenzdetail__technik:not(:has(.cd-referenzdetail__technikListe > li:nth-child(3))) .cd-referenzdetail__technikListe {
justify-content: flex-end;
}
@media (max-width: 900px) {
.cd-referenzdetail__technik .cd-referenzdetail__technikRaster {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: var(--cd-a5);
padding-block: var(--cd-a7);
}
.cd-referenzdetail__technik .cd-referenzdetail__technikListe { justify-content: flex-start; }
}
.cd-chip--symbol .cd-symbol {
inline-size: 16px;
block-size: 16px;
flex: 0 0 auto;
color: var(--cd-rot);
}
@media (min-width: 1024px) {
.cd-referenzdetail__faktenschmal { display: none; }
}
@media (max-width: 1023px) {
:is(.cd-referenzdetail--standard, .cd-referenzdetail--fallstudie, .cd-referenzdetail--kompakt) .cd-referenzdetail__seite--breit {
display: none;
}
.cd-referenzdetail__faktenschmal {
padding-block: var(--cd-a8);
}
}
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
padding: 0;
}
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur img {
padding: var(--cd-a5);
align-self: center;
}
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur figcaption {
min-block-size: 0;
padding: var(--cd-a4) var(--cd-a5);
border-block-start: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .05);
color: color-mix(in srgb, var(--cd-weiss) 84%, transparent);
font-family: inherit;
font-size: var(--cd-gr-klein);
letter-spacing: normal;
text-align: start;
text-transform: none;
}
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur figcaption:empty {
display: none;
}
.cd-referenzdetail__lightboxstreifen {
display: flex;
gap: var(--cd-a2);
padding: var(--cd-a3) var(--cd-a5);
border-block-start: 1px solid rgba(255, 255, 255, .14);
overflow-x: auto;
overscroll-behavior-inline: contain;
}
.cd-referenzdetail__lightboxstreifen:empty { display: none; }
.cd-referenzdetail__lightboxmini {
flex: 0 0 auto;
inline-size: 5.5rem;
block-size: 3.75rem;
padding: 0;
border: 1px solid transparent;
background: rgba(255, 255, 255, .06);
cursor: pointer;
opacity: .55;
transition: opacity .18s ease, border-color .18s ease;
}
.cd-referenzdetail__lightboxmini img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.cd-referenzdetail__lightboxmini:hover,
.cd-referenzdetail__lightboxmini:focus-visible { opacity: 1; }
.cd-referenzdetail__lightboxmini--hier {
opacity: 1;
border-color: var(--cd-rot-auf-dunkel);
}
.cd-referenzdetail__lightbox--karte { inline-size: min(94vw, 84rem); }
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxkasten {
background: #10141b;
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxbuehne {
min-block-size: min(66vh, 44rem);
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .95fr);
align-items: center;
gap: var(--cd-a5);
padding: var(--cd-a5);
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur img {
max-block-size: 62vh;
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur figcaption {
align-self: center;
min-block-size: 0;
padding-block-start: 0;
padding-inline-start: var(--cd-a5);
border-inline-start: 1px solid rgba(255, 255, 255, .16);
color: color-mix(in srgb, var(--cd-weiss) 84%, transparent);
font-family: inherit;
font-size: var(--cd-gr-klein);
letter-spacing: normal;
text-align: start;
text-transform: none;
}
@media (max-width: 899px) {
.cd-referenzdetail__lightbox--karte { inline-size: min(96vw, 100rem); }
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a4);
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur img {
max-block-size: 52vh;
}
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur figcaption {
padding-inline-start: 0;
padding-block-start: var(--cd-a4);
border-inline-start: 0;
border-block-start: 1px solid rgba(255, 255, 255, .16);
}
}
@media (max-width: 699px) {
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur img {
padding: var(--cd-a3);
}
.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur figcaption {
padding: var(--cd-a3);
}
.cd-referenzdetail__lightboxstreifen { padding: var(--cd-a2) var(--cd-a3); }
.cd-referenzdetail__lightboxmini { inline-size: 4.25rem; block-size: 2.9rem; }
.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxfigur {
padding: var(--cd-a3);
}
}
@media (prefers-reduced-motion: reduce) {
.cd-referenzdetail__lightboxmini { transition: none; }
}
.cd-referenzdetail__lightbox--bento .cd-referenzdetail__lightboxbuehne {
display: none;
}
.cd-referenzdetail__lightboxbentokasten {
padding: var(--cd-a5);
}
.cd-referenzdetail__lightboxbento {
--cdBentoSpalten: 4;
--cdBentoReihen: 2;
display: grid;
grid-template-columns: repeat(var(--cdBentoSpalten), minmax(0, 1fr));
grid-auto-rows: minmax(0, 1fr);
grid-auto-flow: dense;
gap: var(--cd-a3);
max-block-size: 72vh;
}
.cd-referenzdetail__lightboxkachel {
position: relative;
min-inline-size: 0;
min-block-size: 0;
padding: 0;
border: 1px solid transparent;
background: rgba(255, 255, 255, .06);
cursor: pointer;
overflow: hidden;
opacity: .62;
transition: opacity .2s ease, border-color .2s ease;
}
.cd-referenzdetail__lightboxkachel img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.cd-referenzdetail__lightboxkachel:hover,
.cd-referenzdetail__lightboxkachel:focus-visible { opacity: 1; }
.cd-referenzdetail__lightboxkachel--gross {
grid-column: span 2;
grid-row: span var(--cdBentoReihen, 2);
opacity: 1;
border-color: var(--cd-rot-auf-dunkel);
}
.cd-referenzdetail__lightboxkachel--gross img {
object-fit: contain;
background: #05070a;
}
.cd-referenzdetail__lightboxbentotext {
inline-size: 100%;
max-inline-size: none;
min-block-size: 2rem;
padding-block-start: var(--cd-a4);
margin: 0;
color: color-mix(in srgb, var(--cd-weiss) 78%, transparent);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
}
.cd-referenzdetail__lightboxbentotext[hidden] { display: none; }
@media (max-width: 899px) {
.cd-referenzdetail__lightboxbento {
--cdBentoSpalten: 2;
--cdBentoReihen: 2;
max-block-size: 64vh;
}
}
@media (max-width: 699px) {
.cd-referenzdetail__lightboxbentokasten { padding: var(--cd-a3); }
.cd-referenzdetail__lightboxbento { gap: var(--cd-a2); }
}
@media (prefers-reduced-motion: reduce) {
.cd-referenzdetail__lightboxkachel { transition: none; }
}
.cd-referenzdetail__lightboxpfeilEckig { display: none; }
.cd-referenzdetail__lightboxpfeilEckig svg { display: block; inline-size: 1.6rem; block-size: 1.6rem; }
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeilZeichen { display: none; }
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeilEckig { display: block; }
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxbuehne {
position: relative;
display: block;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil {
position: absolute;
inset-block-start: 50%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
inline-size: 3.25rem;
block-size: 3.25rem;
border-radius: 4px;
background: rgba(16, 16, 18, .42);
backdrop-filter: blur(3px);
opacity: .9;
transform: translateY(-50%);
transition: background .18s ease, opacity .18s ease;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil:hover,
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil:focus-visible {
background: rgba(16, 16, 18, .68);
color: var(--cd-weiss);
opacity: 1;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil[disabled] {
opacity: .28;
cursor: default;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil--zurueck { inset-inline-start: var(--cd-a4); }
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil--vor { inset-inline-end: var(--cd-a4); }
.cd-referenzdetail__lightboxpille {
position: absolute;
inset-inline-start: 50%;
inset-block-end: var(--cd-a4);
z-index: 4;
display: flex;
align-items: center;
gap: var(--cd-a3);
padding: 5px 16px 5px 5px;
border-radius: 999px;
background: rgba(16, 16, 18, .5);
backdrop-filter: blur(4px);
transform: translateX(-50%);
}
.cd-referenzdetail__lightboxlauf {
position: relative;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.375rem;
block-size: 2.375rem;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--cd-rot-auf-dunkel);
color: var(--cd-weiss);
cursor: pointer;
overflow: hidden;
}
.cd-referenzdetail__lightboxlauffuellung {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 0;
background: rgba(255, 255, 255, .42);
pointer-events: none;
}
.cd-referenzdetail__lightboxlauf svg {
position: relative;
z-index: 1;
display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.cd-referenzdetail__lightboxlauf .cd-referenzdetail__lightboxlaufAus { display: none; }
.cd-referenzdetail__lightbox--laeuft .cd-referenzdetail__lightboxlauf .cd-referenzdetail__lightboxlaufAn { display: none; }
.cd-referenzdetail__lightbox--laeuft .cd-referenzdetail__lightboxlauf .cd-referenzdetail__lightboxlaufAus { display: block; }
.cd-referenzdetail__lightboxpillezaehler {
color: color-mix(in srgb, var(--cd-weiss) 90%, transparent);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .06em;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxzaehler { visibility: hidden; }
@media (max-width: 699px) {
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil {
inline-size: 2.75rem;
block-size: 2.75rem;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil--zurueck { inset-inline-start: var(--cd-a2); }
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil--vor { inset-inline-end: var(--cd-a2); }
.cd-referenzdetail__lightboxpille { inset-block-end: var(--cd-a2); }
}
@media (prefers-reduced-motion: reduce) {
.cd-referenzdetail__lightboxpfeil,
.cd-referenzdetail__lightboxlauffuellung { transition: none; }
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxfigur {
position: relative;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxfigur img {
grid-area: 1 / 1;
align-self: center;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxfigur figcaption {
grid-area: 2 / 1;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpille {
position: static;
grid-area: 1 / 1;
align-self: end;
justify-self: center;
margin-block-end: var(--cd-a4);
transform: none;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil {
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .12);
opacity: 1;
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil:hover,
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil:focus-visible {
border-color: var(--cd-rot-auf-dunkel);
background: rgba(255, 255, 255, .2);
}
.cd-referenzdetail__lightbox--schaufenster .cd-referenzdetail__lightboxpfeil[disabled] {
border-color: rgba(255, 255, 255, .1);
background: rgba(255, 255, 255, .04);
opacity: 1;
}
.cd-referenzdetail__lightbox--ohnekasten::backdrop {
background: color-mix(in srgb, #05070a 96%, transparent);
}
.cd-referenzdetail__lightbox--ohnekasten .cd-referenzdetail__lightboxkasten {
border: 0;
background: transparent;
box-shadow: none;
}
.cd-referenzdetail__lightbox--ohnekasten .cd-referenzdetail__lightboxkopf {
border-block-end: 0;
}
.cd-referenzdetail__lightbox--ohnekasten .cd-referenzdetail__lightboxstreifen {
border-block-start: 0;
}
.cd-referenzdetail__lightbox--ohnekasten .cd-referenzdetail__lightboxschliessen {
padding-inline-end: 0;
}
.cd-referenzdetail__lightbox--ohnekasten.cd-referenzdetail__lightbox--text .cd-referenzdetail__lightboxfigur figcaption {
border-block-start: 0;
background: transparent;
}
.cd-referenzdetail__lightbox--ohnekasten.cd-referenzdetail__lightbox--karte .cd-referenzdetail__lightboxkasten {
background: transparent;
}
.cd-referenzdetail__kopfbild,
.cd-referenzdetail__bild,
.cd-referenzdetail__kapitelbild,
.cd-referenzdetail__galeriestueck figure {
position: relative;
}
.cd-referenzdetail__buehne > .cd-kihinweis--marke {
inset-inline: auto var(--cd-a5);
inset-block-end: var(--cd-a5);
}
.cd-referenzdetail__galerieoeffner > .cd-kihinweis--marke {
inset-inline: var(--cd-a3) auto;
}
.cd-referenzdetail__weiteresBild {
position: relative;
}
.cd-referenzdetail__weiteresBild > .cd-kihinweis--marke {
inset-inline: auto var(--cd-a3);
inset-block-end: var(--cd-a3);
}
.cd-referenzdetail__leistung {
margin-block-start: var(--cd-a7);
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--cd-a3);
}
.cd-referenzdetail__leistungtext {
color: var(--cd-text-2);
max-inline-size: 58ch;
}
.cd-referenzdetail__leistungtext > :last-child {
margin-block-end: 0;
}
.cd-auf-dunkel .cd-referenzdetail__leistung,
.cd-auf-rot .cd-referenzdetail__leistung {
border-block-start-color: var(--cd-linie-auf-dunkel);
}
.cd-auf-dunkel .cd-referenzdetail__leistungtext,
.cd-auf-rot .cd-referenzdetail__leistungtext {
color: var(--cd-text-auf-dunkel);
}
.cd-referenzdetail__leistungbild {
margin: 0;
inline-size: 100%;
}
.cd-referenzdetail__leistungbild img {
inline-size: 100%;
block-size: auto;
display: block;
}
.cd-referenzdetail__weiteresLogo {
position: relative;
z-index: 1;
justify-self: start;
align-self: start;
display: inline-flex;
align-items: center;
margin-block-start: -54px;
margin-block-end: var(--cd-a3);
padding: 7px 10px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
box-shadow: var(--cd-schatten-karte);
pointer-events: none;
}
.cd-referenzdetail__weiteresLogo img {
display: block;
block-size: 26px;
inline-size: auto;
}
.cd-referenzdetail__weiteresLogo--weiss { background: var(--cd-weiss); }
.cd-referenzdetail__weiteresLogo--dunkel {
background: var(--cd-dunkel);
border-color: rgb(255 255 255 / 0.18);
}
.cd-referenzdetail__weiteresLogo--wort {
font-family: var(--cd-schrift-mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--cd-tinte);
}
/* bahnen/cd_stimmen.css */
.cd-stimmen {
--cd-stimmen-knopfrand: #2A424C;
--cd-stimmen-zitatfarbe: #EAF1F4;
--cd-st-grund: var(--cd-tinte);
--cd-st-text: var(--cd-text-auf-dunkel);
--cd-st-titel: var(--cd-weiss);
--cd-st-kicker: var(--cd-rot-auf-dunkel);
--cd-st-marke: var(--cd-rot-auf-dunkel);
--cd-st-balken: var(--cd-rot-auf-dunkel);
--cd-st-knopfrand: var(--cd-stimmen-knopfrand);
--cd-st-knopffarbe: var(--cd-weiss);
--cd-st-kartegrund: var(--cd-tinte);
--cd-st-karterand: var(--cd-dunkel-2);
--cd-st-zitat: var(--cd-stimmen-zitatfarbe);
--cd-st-name: var(--cd-weiss);
--cd-st-leise: var(--cd-text-schwach);
--cd-st-schiene: var(--cd-dunkel-2);
--cd-st-fokus: var(--cd-weiss);
background: var(--cd-st-grund);
color: var(--cd-st-text);
}
.cd-stimmen--getoent,
.cd-stimmen--hell {
--cd-st-text: var(--cd-text-2);
--cd-st-titel: var(--cd-dunkel);
--cd-st-kicker: var(--cd-rot);
--cd-st-marke: var(--cd-rot);
--cd-st-balken: var(--cd-rot);
--cd-st-knopfrand: var(--cd-linie-2);
--cd-st-knopffarbe: var(--cd-dunkel);
--cd-st-kartegrund: var(--cd-weiss);
--cd-st-karterand: var(--cd-linie-2);
--cd-st-zitat: var(--cd-dunkel);
--cd-st-name: var(--cd-dunkel);
--cd-st-leise: var(--cd-text-2);
--cd-st-schiene: var(--cd-linie-2);
--cd-st-fokus: var(--cd-rot);
}
.cd-stimmen--getoent { --cd-st-grund: var(--cd-flaeche-2); }
.cd-stimmen--hell { --cd-st-grund: var(--cd-weiss); }
.cd-stimmen__kopf {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-block-end: 52px;
}
.cd-stimmen__kicker { color: var(--cd-st-kicker); }
.cd-stimmen__titel {
color: var(--cd-st-titel);
max-inline-size: 620px;
}
.cd-stimmen__beitext {
margin-block-start: var(--cd-a4);
max-inline-size: 620px;
}
.cd-stimmen__bedienung {
flex: 0 0 auto;
display: flex;
gap: 10px;
}
.cd-stimmen__bedienung[hidden],
.cd-stimmen__fortschritt[hidden] { display: none; }
.cd-stimmen__pfeil {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 52px;
block-size: 52px;
background: transparent;
border: 1px solid var(--cd-st-knopfrand);
border-radius: var(--cd-r-knopf);
color: var(--cd-st-knopffarbe);
cursor: pointer;
transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-stimmen__pfeil:hover:not([disabled]) {
background: var(--cd-rot);
border-color: var(--cd-rot);
}
.cd-stimmen__pfeil[disabled] {
opacity: .35;
cursor: default;
}
.cd-stimmen__pfeilbild {
inline-size: 17px;
block-size: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
.cd-stimmen__haltezeichen {
position: relative;
inline-size: 12px;
block-size: 13px;
}
.cd-stimmen__haltezeichen::before,
.cd-stimmen__haltezeichen::after {
content: "";
position: absolute;
inset-block: 0;
inline-size: 4px;
background: currentColor;
}
.cd-stimmen__haltezeichen::before { inset-inline-start: 0; }
.cd-stimmen__haltezeichen::after { inset-inline-end: 0; }
.cd-stimmen__halt[aria-pressed="true"] .cd-stimmen__haltezeichen::before {
inline-size: 0;
inset-block: 0;
border-block: 6.5px solid transparent;
border-inline-start: 11px solid currentColor;
}
.cd-stimmen__halt[aria-pressed="true"] .cd-stimmen__haltezeichen::after { display: none; }
.cd-stimmen__spur {
display: flex;
gap: 2px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.cd-stimmen__spur::-webkit-scrollbar { display: none; }
.cd-stimmen__spur:focus-visible {
outline: 2px solid var(--cd-st-fokus);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.cd-stimmen__spur { scroll-behavior: auto; }
}
.cd-stimmen__spur[data-je-folie="2"] > .cd-stimmen__karte { flex-basis: calc(50% - 1px); }
.cd-stimmen__spur[data-je-folie="3"] > .cd-stimmen__karte { flex-basis: calc(33.333% - 1.34px); }
.cd-stimmen__spur[data-je-folie="4"] > .cd-stimmen__karte { flex-basis: calc(25% - 1.5px); }
.cd-stimmen__spur:is([data-je-folie="2"], [data-je-folie="3"], [data-je-folie="4"]) > .cd-stimmen__karte {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
padding: 40px 44px;
}
.cd-stimmen__spur:is([data-je-folie="2"], [data-je-folie="3"], [data-je-folie="4"]) > .cd-stimmen__karte > .cd-stimmen__person {
display: flex;
align-items: center;
gap: var(--cd-a4);
}
.cd-stimmen__spur:is([data-je-folie="2"], [data-je-folie="3"], [data-je-folie="4"]) .cd-stimmen__logo {
margin-block-end: 0;
flex: 0 0 auto;
inline-size: 150px;
block-size: 52px;
}
.cd-stimmen__spur:is([data-je-folie="2"], [data-je-folie="3"], [data-je-folie="4"]) .cd-stimmen__zitat p {
font-size: 18px;
line-height: 1.55;
}
@media (max-width: 1100px) {
.cd-stimmen__spur[data-je-folie] > .cd-stimmen__karte { flex-basis: 100%; }
}
.cd-stimmen__karte {
flex: 0 0 100%;
scroll-snap-align: start;
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: 60px;
align-items: start;
margin: 0;
padding: 56px 60px;
background: var(--cd-st-kartegrund);
border: 1px solid var(--cd-st-karterand);
}
.cd-stimmen__logo {
display: flex;
align-items: center;
justify-content: center;
block-size: 66px;
inline-size: 100%;
max-inline-size: 200px;
padding: 11px 16px;
background: var(--cd-weiss);
border-radius: var(--cd-r-feld);
margin-block-end: 28px;
}
.cd-stimmen__logo img {
max-inline-size: 100%;
max-block-size: 100%;
inline-size: auto;
block-size: auto;
object-fit: contain;
}
.cd-stimmen__logo--weiss { background: var(--cd-weiss); }
.cd-stimmen__logo--dunkel {
background: var(--cd-dunkel);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.cd-stimmen__logo--ohne {
background: none;
box-shadow: none;
padding-inline: 0;
inline-size: auto;
justify-content: flex-start;
}
.cd-stimmen__name {
display: block;
color: var(--cd-st-name);
font-weight: 600;
font-size: 16px;
margin-block-end: 6px;
}
.cd-stimmen__firma,
.cd-stimmen__rolle {
display: block;
font-family: var(--cd-schrift-mono);
font-size: 10.5px;
line-height: 1.6;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-st-leise);
}
.cd-stimmen__zitat { margin: 0; }
.cd-stimmen__marke {
display: block;
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: 50px;
line-height: .7;
color: var(--cd-st-marke, var(--cd-rot));
margin-block-end: 22px;
}
.cd-stimmen__zitat p {
font-family: var(--cd-schrift-display);
font-weight: 500;
font-size: 24px;
line-height: 1.5;
letter-spacing: -.014em;
color: var(--cd-st-zitat);
max-inline-size: 820px;
}
.cd-stimmen__fortschritt {
display: flex;
align-items: center;
gap: 20px;
margin-block-start: 32px;
}
.cd-stimmen__linie {
flex: 1 1 auto;
position: relative;
block-size: 2px;
overflow: hidden;
background: var(--cd-st-schiene);
}
.cd-stimmen__balken {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: 25%;
background: var(--cd-st-balken, var(--cd-rot));
transition: transform var(--cd-zeit) ease, inline-size var(--cd-zeit) ease;
}
@media (prefers-reduced-motion: reduce) {
.cd-stimmen__balken { transition: none; }
}
.cd-stimmen__zaehler {
flex: 0 0 auto;
font-family: var(--cd-schrift-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-st-leise);
}
@media (max-width: 1100px) {
.cd-stimmen__karte {
grid-template-columns: 200px minmax(0, 1fr);
gap: 40px;
padding: 44px 44px;
}
.cd-stimmen__zitat p { font-size: 21px; }
.cd-stimmen__marke { font-size: 42px; }
}
@media (max-width: 900px) {
.cd-stimmen .cd-bahn__inhalt {
display: flex;
flex-direction: column;
}
.cd-stimmen__kopf { display: contents; }
.cd-stimmen__kopftext { order: 1; margin-block-end: var(--cd-a6); }
.cd-stimmen__spur { order: 2; }
.cd-stimmen__fortschritt { order: 3; }
.cd-stimmen__bedienung { order: 4; margin-block-start: var(--cd-a5); }
.cd-stimmen__titel { font-size: 32px; }
.cd-stimmen__karte {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a5);
padding: var(--cd-a6) var(--cd-a5);
}
.cd-stimmen__zitat p { font-size: 18.5px; }
.cd-stimmen__marke { font-size: 36px; margin-block-end: 14px; }
.cd-stimmen__logo { margin-block-end: 20px; }
}
.cd-stimmen--a-randlos .cd-stimmen__kopf {
padding-block-end: var(--cd-a5);
border-block-end: 1px solid var(--cd-dunkel-2);
}
.cd-stimmen--a-randlos .cd-stimmen__karte {
grid-template-columns: minmax(0, 1fr) 230px;
gap: 60px;
align-items: end;
padding: var(--cd-a6) 0 0;
background: none;
border: 0;
}
@media (max-width: 860px) {
.cd-stimmen--a-randlos .cd-stimmen__karte {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a5);
align-items: start;
}
}
@media (min-width: 901px) {
.cd-stimmen:not(.cd-stimmen--a-randlos):not(.cd-stimmen--a-mitte):not(.cd-stimmen--a-gross) .cd-stimmen__spur[data-je-folie="1"] > .cd-stimmen__karte > .cd-stimmen__person {
grid-column: 1;
grid-row: 1;
}
.cd-stimmen:not(.cd-stimmen--a-randlos):not(.cd-stimmen--a-mitte):not(.cd-stimmen--a-gross) .cd-stimmen__spur[data-je-folie="1"] > .cd-stimmen__karte > .cd-stimmen__zitat {
grid-column: 2;
grid-row: 1;
}
}
.cd-stimmen--a-mitte .cd-bahn__inhalt {
display: flex;
flex-direction: column;
}
.cd-stimmen--a-mitte .cd-stimmen__kopf { display: contents; }
.cd-stimmen--a-mitte .cd-stimmen__kopftext {
order: 1;
text-align: center;
max-inline-size: 720px;
margin-inline: auto;
margin-block-end: var(--cd-a6);
}
.cd-stimmen--a-mitte .cd-stimmen__spur { order: 2; }
.cd-stimmen--a-mitte .cd-stimmen__fortschritt { order: 3; }
.cd-stimmen--a-mitte .cd-stimmen__bedienung {
order: 4;
justify-content: center;
margin-block-start: var(--cd-a5);
}
.cd-stimmen--a-mitte .cd-stimmen__karte {
grid-template-columns: minmax(0, 1fr);
gap: 0;
justify-items: center;
text-align: center;
max-inline-size: 760px;
margin-inline: auto;
padding: var(--cd-a5) 0 var(--cd-a6);
background: none;
border: 0;
}
.cd-stimmen--a-mitte .cd-stimmen__spur:not([data-je-folie="1"]) > .cd-stimmen__karte {
max-inline-size: none;
}
.cd-stimmen--a-mitte .cd-stimmen__marke { margin-block-end: 18px; }
.cd-stimmen--a-mitte .cd-stimmen__zitat p {
font-size: 26px;
max-inline-size: none;
text-wrap: balance;
}
.cd-stimmen--a-mitte .cd-stimmen__person {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin-block-start: var(--cd-a5);
text-align: start;
}
.cd-stimmen--a-mitte .cd-stimmen__logo {
margin-block-end: 0;
block-size: 54px;
inline-size: auto;
max-inline-size: 170px;
}
.cd-stimmen--a-mitte .cd-stimmen__quelle {
padding-inline-start: 22px;
border-inline-start: 1px solid var(--cd-st-karterand);
}
.cd-stimmen--a-mitte .cd-stimmen__name { margin-block-end: 4px; }
@media (max-width: 700px) {
.cd-stimmen--a-mitte .cd-stimmen__karte {
padding: 0 0 var(--cd-a5);
}
.cd-stimmen--a-mitte .cd-stimmen__zitat p { font-size: 19px; }
.cd-stimmen--a-mitte .cd-stimmen__person {
flex-direction: column;
gap: 16px;
text-align: center;
}
.cd-stimmen--a-mitte .cd-stimmen__quelle {
padding-inline-start: 0;
border-inline-start: 0;
}
}
.cd-stimmen--a-gross .cd-bahn__inhalt {
display: flex;
flex-direction: column;
}
.cd-stimmen--a-gross .cd-stimmen__kopf { display: contents; }
.cd-stimmen--a-gross .cd-stimmen__kopftext {
order: 1;
margin-block-end: var(--cd-a5);
}
.cd-stimmen--a-gross .cd-stimmen__spur { order: 2; }
.cd-stimmen--a-gross .cd-stimmen__fortschritt { order: 3; }
.cd-stimmen--a-gross .cd-stimmen__bedienung {
order: 4;
justify-content: flex-start;
margin-block-start: var(--cd-a5);
}
.cd-stimmen--a-gross .cd-stimmen__karte {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: 0;
background: none;
border: 0;
}
.cd-stimmen--a-gross .cd-stimmen__marke {
font-size: 56px;
margin-block-end: 20px;
}
.cd-stimmen--a-gross .cd-stimmen__zitat p {
font-size: clamp(20px, 2.7vw, 34px);
line-height: 1.36;
letter-spacing: -.02em;
max-inline-size: none;
}
.cd-stimmen--a-gross .cd-stimmen__person {
display: flex;
align-items: center;
gap: 22px;
margin-block-start: var(--cd-a6);
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-st-karterand);
}
.cd-stimmen--a-gross .cd-stimmen__logo {
margin-block-end: 0;
block-size: 52px;
inline-size: auto;
max-inline-size: 160px;
}
.cd-stimmen--a-gross .cd-stimmen__quelle {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 14px;
}
.cd-stimmen--a-gross .cd-stimmen__name { margin-block-end: 0; }
.cd-stimmen--a-gross .cd-stimmen__firma,
.cd-stimmen--a-gross .cd-stimmen__rolle {
padding-inline-start: 14px;
border-inline-start: 1px solid var(--cd-st-karterand);
}
@media (max-width: 700px) {
.cd-stimmen--a-gross .cd-stimmen__marke {
font-size: 44px;
margin-block-end: 12px;
}
.cd-stimmen--a-gross .cd-stimmen__person {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-block-start: var(--cd-a5);
}
.cd-stimmen--a-gross .cd-stimmen__quelle {
flex-direction: column;
gap: 4px;
}
.cd-stimmen--a-gross .cd-stimmen__firma,
.cd-stimmen--a-gross .cd-stimmen__rolle {
padding-inline-start: 0;
border-inline-start: 0;
}
}
/* bahnen/cd_faq.css */
.cd-faq {
background: var(--cd-weiss);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-faq__raster {
display: grid;
grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
gap: var(--cd-a8);
align-items: start;
}
.cd-faq__seite {
position: sticky;
inset-block-start: calc(var(--cd-kopf-gesamt) + var(--cd-a5));
}
.cd-faq__titel:not(.cd-nurlesen) {
margin-block-end: var(--cd-a5);
}
.cd-faq__beitext {
color: var(--cd-text-2);
font-size: var(--cd-gr-gross);
margin-block-end: var(--cd-a6);
}
.cd-faq__beitext p + p { margin-block-start: var(--cd-a3); }
.cd-faq__liste {
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-faq__frage {
list-style: none;
transition: color var(--cd-zeit) ease;
}
.cd-faq__frage::-webkit-details-marker { display: none; }
.cd-faq__frage:hover { color: var(--cd-rot); }
.cd-faq__frageText { min-inline-size: 0; }
.cd-faq__antwort {
padding-inline-end: var(--cd-a8);
}
.cd-faq__antwort p + p { margin-block-start: var(--cd-a3); }
.cd-faq__antwort ul {
display: grid;
gap: var(--cd-a2);
margin-block-start: var(--cd-a3);
padding: 0;
list-style: none;
}
.cd-faq__antwort li { padding-inline-start: var(--cd-a4); position: relative; }
.cd-faq__antwort li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: .62em;
inline-size: 6px;
block-size: 1px;
background: var(--cd-rot);
}
@media (max-width: 1100px) {
.cd-faq__seite {
inset-block-start: calc(96px + var(--cd-a5));
}
.cd-faq__raster { gap: var(--cd-a7); }
}
@media (max-width: 900px) {
.cd-faq__raster {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
}
.cd-faq__seite { position: static; }
.cd-faq__antwort { padding-inline-end: 0; }
}
.cd-faq__antwort .cd-faq__marken {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a2);
margin-block: var(--cd-a4) 0;
padding-inline-start: 0;
list-style: none;
}
.cd-faq__antwort .cd-faq__marke {
padding: 10px 16px;
border: 1px solid var(--cd-linie-2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
white-space: nowrap;
}
.cd-faq__antwort .cd-faq__marke {
padding-inline-start: 16px;
position: static;
}
.cd-faq__antwort .cd-faq__marke::before { content: none; }
.cd-faq__antwort .cd-faq__nachsatz {
margin-block-start: var(--cd-a3);
font-size: var(--cd-gr-klein);
line-height: 1.6;
color: var(--cd-text-3);
}
/* bahnen/cd_blogteaser.css */
.cd-blog {
background: var(--cd-flaeche-2);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-blog--aufmacher,
.cd-blog--raster {
background: var(--cd-weiss);
border-block-start: 0;
}
.cd-blog__mehr {
justify-self: end;
align-self: end;
white-space: nowrap;
background: transparent;
border: 1px solid var(--cd-tinte);
color: var(--cd-tinte);
padding: 14px 22px;
font-family: var(--cd-schrift-display);
font-weight: 600;
font-size: 15.5px;
}
.cd-blog__mehr:hover {
background: var(--cd-tinte);
color: var(--cd-weiss);
}
.cd-blog__raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: 28px;
}
[data-blaettern] .cd-blog__raster {
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.cd-blog__karte {
position: relative;
display: flex;
flex-direction: column;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-2);
transition: border-color var(--cd-zeit) ease, transform var(--cd-zeit) ease;
}
.cd-blog__karte:hover {
border-color: var(--cd-rot);
transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
.cd-blog__karte { transition: border-color var(--cd-zeit) ease; }
.cd-blog__karte:hover { transform: none; }
}
.cd-blog__bild {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--cd-flaeche-3);
}
.cd-blog__bild img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform .5s var(--cd-kurve);
}
.cd-blog__karte:hover .cd-blog__bild img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
.cd-blog__karte:hover .cd-blog__bild img { transform: none; }
}
.cd-blog__text {
display: flex;
flex: 1;
flex-direction: column;
padding: 28px 28px 30px;
}
.cd-blog__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-block-end: 16px;
max-inline-size: none;
font-family: var(--cd-schrift-mono);
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-blog__kategorie {
color: var(--cd-rot);
}
.cd-blog__kategorie + *::before,
.cd-blog__abzeichen + .cd-blog__datum::before {
content: "";
display: inline-block;
inline-size: 14px;
block-size: 1px;
margin-inline-end: 12px;
vertical-align: middle;
background: var(--cd-linie-3);
}
.cd-blog__datum + .cd-blog__dauer::before {
content: "\00B7";
margin-inline-end: 8px;
}
.cd-blog__abzeichen {
padding: var(--cd-a1) var(--cd-a2);
background: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-blog__karteTitel {
font-size: 22px;
font-weight: 700;
margin-block-end: 14px;
}
.cd-blog__link { color: inherit; }
.cd-blog__link::after {
content: "";
position: absolute;
inset: 0;
}
.cd-blog__link:hover { color: var(--cd-rot); }
.cd-blog__anriss {
flex: 1;
margin-block-end: 24px;
font-size: 16px;
line-height: 1.66;
color: var(--cd-text-2);
}
.cd-blog__zeile {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--cd-schrift-display);
font-weight: 600;
font-size: 15.5px;
letter-spacing: 0;
text-transform: none;
color: var(--cd-tinte);
transition: color var(--cd-zeit) ease;
}
.cd-blog__karte:hover .cd-blog__zeile { color: var(--cd-rot); }
.cd-blog__aufmacher {
position: relative;
display: grid;
grid-template-columns: minmax(0, 23fr) minmax(0, 17fr);
margin-block-end: 28px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-2);
transition: box-shadow var(--cd-zeit) ease;
}
.cd-blog__aufmacher:hover { box-shadow: inset 0 0 0 2px var(--cd-rot); }
.cd-blog__aufmacherBild {
position: relative;
min-block-size: 380px;
overflow: hidden;
background: var(--cd-dunkel);
}
.cd-blog__aufmacherBild img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.cd-blog__bildhinweis {
position: absolute;
inset-inline-start: var(--cd-a3);
inset-block-end: var(--cd-a3);
padding: 6px 9px;
border-radius: var(--cd-r-feld);
background: color-mix(in srgb, var(--cd-dunkel) 88%, transparent);
color: var(--cd-weiss);
font-family: var(--cd-schrift-mono);
font-size: 10px;
line-height: 1.2;
letter-spacing: .06em;
text-transform: uppercase;
pointer-events: none;
}
.cd-blog__aufmacherText {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--cd-a4);
padding: var(--cd-a7);
}
.cd-blog__aufmacherTitel { font-size: var(--cd-gr-h3); }
.cd-blog__aufmacherAnriss { color: var(--cd-text-2); }
@media (max-width: 900px) {
.cd-blog__aufmacher { grid-template-columns: minmax(0, 1fr); }
.cd-blog__aufmacherBild { min-block-size: 240px; }
.cd-blog__aufmacherText { padding: var(--cd-a6); }
.cd-blog__mehr { justify-self: start; }
}
@media (max-width: 600px) {
.cd-blog__text { padding: var(--cd-a5); }
.cd-blog__aufmacherText { padding: var(--cd-a5); }
}
.cd-blog__blaetterleiste {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--cd-a3);
margin-block-start: var(--cd-a6);
}
.cd-blog__blaetterleiste[hidden] { display: none; }
.cd-blog__karte[hidden],
.cd-blog__aufmacher[hidden] { display: none; }
.cd-blog__blaetterzahl {
min-inline-size: 40px;
min-block-size: 40px;
padding: 8px 12px;
background: none;
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-feld);
font: inherit;
font-size: var(--cd-gr-klein);
color: var(--cd-tinte);
cursor: pointer;
}
.cd-blog__blaetterzahl:hover { border-color: var(--cd-rot); color: var(--cd-rot); }
.cd-blog__blaetterzahl[aria-current="page"] {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
font-weight: 600;
}
.cd-blog__blaetterzahl:disabled { opacity: .45; cursor: default; }
.cd-blog__blaetterstand {
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-blog__blaetterzahl {
border-color: var(--cd-linie-auf-dunkel);
color: var(--cd-text-auf-dunkel);
}
.cd-auf-dunkel .cd-blog__blaetterstand { color: var(--cd-text-auf-dunkel-2); }
.cd-blog__mehrknopf {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding-block: 14px;
padding-inline: 32px;
}
.cd-blog__mehrzahl {
font-size: var(--cd-gr-mini, .78rem);
font-weight: 400;
opacity: .82;
}
.cd-blog__blaetterleiste[data-art="mehr"] {
flex-direction: column;
gap: var(--cd-a3);
}
/* bahnen/cd_artikeltext.css */
.cd-bahn.cd-artikeltext {
padding-block: 0;
background: var(--cd-weiss);
}
.cd-artikeltext__spalte {
max-inline-size: 780px;
margin-inline: auto;
padding-block: clamp(2.4rem, 5vw, 4.5rem);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-hero + .cd-artikeltext .cd-artikeltext__spalte {
border-block-start: 0;
}
.cd-artikeltext__titel {
max-inline-size: 24ch;
margin-block-end: var(--cd-a5);
font-size: var(--cd-gr-h3);
}
.cd-artikeltext__text {
font-size: clamp(1rem, .96rem + .18vw, 1.125rem);
line-height: 1.75;
color: var(--cd-text-2);
}
.cd-artikeltext__text > * + * {
margin-block-start: var(--cd-a4);
}
.cd-artikeltext__text ul,
.cd-artikeltext__text ol {
display: grid;
gap: var(--cd-a3);
max-inline-size: 68ch;
padding-inline-start: 1.25em;
}
.cd-artikeltext__text ul { list-style: disc; }
.cd-artikeltext__text ol { list-style: decimal; }
.cd-artikeltext__text li::marker {
color: var(--cd-rot);
font-weight: 700;
}
.cd-artikeltext__text a {
color: var(--cd-rot);
text-decoration-thickness: .08em;
text-underline-offset: .18em;
}
.cd-artikeltext__text a:hover {
color: var(--cd-tinte);
}
.cd-artikeltext__bild {
margin-block: var(--cd-a7) 0;
}
.cd-artikeltext__bildDatei {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--cd-r-karte);
}
.cd-artikeltext__bildhinweis {
margin-block-start: var(--cd-a2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-artikeltext__text :is(h2, h3, h4) {
hyphens: auto;
overflow-wrap: break-word;
}
.cd-matomo-optout--bereit {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a3) var(--cd-a5);
padding: var(--cd-a4) var(--cd-a5);
border-inline-start: 3px solid var(--cd-rot);
background: var(--cd-flaeche-2);
}
.cd-matomo-optout__stand { margin: 0; }
/* bahnen/cd_beitragsnav.css */
.cd-beitragsnav {
border-block-start: 1px solid var(--cd-linie-2);
padding-block: var(--cd-a7);
}
.cd-beitragsnav__inhalt {
display: grid;
gap: var(--cd-a5);
}
.cd-beitragsnav__zurueck {
display: inline-flex;
align-items: center;
gap: var(--cd-a2);
justify-self: start;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-rot);
}
.cd-beitragsnav__stand {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
color: var(--cd-text-schwach);
}
.cd-beitragsnav__blaettern {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 1px;
background: var(--cd-linie-2);
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-karte);
overflow: hidden;
}
.cd-beitragsnav__nachbar {
display: grid;
gap: var(--cd-a2);
padding: var(--cd-a5);
background: var(--cd-weiss);
color: var(--cd-dunkel);
transition: background var(--cd-zeit) ease;
}
.cd-beitragsnav__nachbar:hover { background: var(--cd-flaeche-1); color: var(--cd-dunkel); }
.cd-beitragsnav__nachbar--nachher { text-align: end; }
.cd-beitragsnav__richtung {
display: inline-flex;
align-items: center;
gap: var(--cd-a2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-schwach);
}
.cd-beitragsnav__nachbar--nachher .cd-beitragsnav__richtung { justify-content: flex-end; }
.cd-beitragsnav__titel {
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h4);
font-weight: 600;
line-height: 1.3;
text-wrap: balance;
}
.cd-beitragsnav__pfeil {
flex: 0 0 auto;
inline-size: 7px;
block-size: 7px;
border-block-start: 1.5px solid currentColor;
border-inline-end: 1.5px solid currentColor;
transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-beitragsnav__pfeil--zurueck { transform: rotate(-135deg); }
.cd-beitragsnav__pfeil--vor { transform: rotate(45deg); }
.cd-beitragsnav__zurueck:hover .cd-beitragsnav__pfeil--zurueck { transform: rotate(-135deg) translate(2px, -2px); }
.cd-beitragsnav__nachbar:hover .cd-beitragsnav__pfeil--vor { transform: rotate(45deg) translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {
.cd-beitragsnav__pfeil { transition: none; }
.cd-beitragsnav__zurueck:hover .cd-beitragsnav__pfeil--zurueck { transform: rotate(-135deg); }
.cd-beitragsnav__nachbar:hover .cd-beitragsnav__pfeil--vor { transform: rotate(45deg); }
}
@media (max-width: 600px) {
.cd-beitragsnav__blaettern { grid-template-columns: minmax(0, 1fr); }
.cd-beitragsnav__nachbar--nachher { text-align: start; }
.cd-beitragsnav__nachbar--nachher .cd-beitragsnav__richtung { justify-content: flex-start; }
}
/* bahnen/cd_artikeleinschub.css */
.cd-bahn.cd-artikeleinschub {
padding-block: clamp(2.5rem, 5vw, 5rem);
background: var(--cd-flaeche-1);
border-block: 1px solid var(--cd-linie-2);
}
.cd-artikeleinschub__raster {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
align-items: center;
max-inline-size: 1080px;
margin-inline: auto;
}
.cd-artikeleinschub__text {
min-inline-size: 0;
max-inline-size: 540px;
}
.cd-artikeleinschub__kicker {
margin-block-end: var(--cd-a3);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--cd-rot);
}
.cd-artikeleinschub__titel {
max-inline-size: 22ch;
margin-block-end: var(--cd-a5);
font-size: clamp(1.55rem, 1.35rem + .85vw, 2.15rem);
line-height: var(--cd-zeile-kopf);
}
.cd-artikeleinschub__fliess {
max-inline-size: 48ch;
color: var(--cd-text-2);
font-size: clamp(1rem, .96rem + .16vw, 1.1rem);
line-height: 1.72;
}
.cd-artikeleinschub__fliess > * + * {
margin-block-start: var(--cd-a4);
}
.cd-artikeleinschub__bild {
position: relative;
min-inline-size: 0;
margin: 0;
}
.cd-artikeleinschub__bildDatei {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--cd-r-gross);
box-shadow: var(--cd-schatten-mega);
}
.cd-artikeleinschub__bildhinweis {
position: absolute;
inset-inline-start: var(--cd-a4);
inset-block-end: var(--cd-a4);
max-inline-size: calc(100% - (2 * var(--cd-a4)));
padding: var(--cd-a2) var(--cd-a3);
border-radius: var(--cd-r-feld);
background: color-mix(in srgb, var(--cd-dunkel) 90%, transparent);
color: var(--cd-weiss);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 700;
letter-spacing: .08em;
line-height: 1.35;
text-transform: uppercase;
}
@media (min-width: 860px) {
.cd-artikeleinschub__raster {
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: clamp(var(--cd-a7), 6vw, var(--cd-a9));
}
.cd-artikeleinschub--bild-links .cd-artikeleinschub__bild {
grid-column: 1;
grid-row: 1;
}
.cd-artikeleinschub--bild-links .cd-artikeleinschub__text {
grid-column: 2;
grid-row: 1;
}
.cd-artikeleinschub--bild-rechts .cd-artikeleinschub__text {
grid-column: 1;
grid-row: 1;
}
.cd-artikeleinschub--bild-rechts .cd-artikeleinschub__bild {
grid-column: 2;
grid-row: 1;
}
}
@media (max-width: 520px) {
.cd-artikeleinschub__bildhinweis {
position: static;
display: block;
max-inline-size: none;
margin-block-start: var(--cd-a2);
padding: 0;
background: transparent;
color: var(--cd-text-3);
}
}
/* bahnen/cd_reiter.css */
.cd-bahn.cd-reiter {
padding-block-end: var(--cd-a7);
}
.cd-reiter__leiste {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a5);
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-auf-dunkel .cd-reiter__leiste {
border-block-end-color: var(--cd-dunkel-3);
}
.cd-reiter__knopf {
position: relative;
display: flex;
align-items: center;
gap: var(--cd-a4);
min-block-size: 44px;
padding: 14px 4px 16px;
border: 0;
background: none;
text-align: start;
color: var(--cd-text-2);
cursor: pointer;
transition: color var(--cd-zeit) var(--cd-kurve);
}
.cd-reiter__plakette {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
block-size: 46px;
padding: 8px 14px;
background: var(--cd-weiss);
border-radius: var(--cd-r-feld);
transform: scale(.92);
transform-origin: left center;
transition: transform var(--cd-zeit) var(--cd-kurve),
box-shadow var(--cd-zeit) var(--cd-kurve);
}
.cd-reiter__plakette img {
display: block;
inline-size: auto;
block-size: 100%;
max-inline-size: 132px;
object-fit: contain;
}
.cd-reiter__knopf--an .cd-reiter__plakette,
.cd-reiter__knopf:hover .cd-reiter__plakette {
transform: scale(1);
}
.cd-reiter__knopf--an .cd-reiter__plakette {
box-shadow: 0 6px 18px rgb(0 0 0 / .28);
}
.cd-reiter__beschriftung {
display: grid;
gap: 2px;
min-inline-size: 0;
}
.cd-reiter__name {
font-family: var(--cd-schrift-display);
font-weight: 600;
font-size: clamp(15px, .9rem + .25vw, 17.5px);
line-height: 1.25;
}
.cd-reiter__rolle {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-reiter__rolle { color: var(--cd-text-auf-dunkel-2); }
.cd-auf-dunkel .cd-reiter__knopf--an .cd-reiter__rolle { color: var(--cd-rot-auf-dunkel); }
.cd-reiter__knopf--an .cd-reiter__rolle { color: var(--cd-rot); }
.cd-auf-dunkel .cd-reiter__knopf {
color: var(--cd-text-auf-dunkel-2);
}
.cd-reiter__knopf::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: -1px;
block-size: 3px;
background: var(--cd-rot);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-auf-dunkel .cd-reiter__knopf::after {
background: var(--cd-rot-auf-dunkel);
}
.cd-reiter__knopf--an {
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-reiter__knopf--an {
color: var(--cd-weiss);
}
.cd-reiter__knopf--an::after {
transform: scaleX(1);
}
.cd-reiter__knopf:hover {
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-reiter__knopf:hover {
color: var(--cd-weiss);
}
.cd-reiter__knopf:focus-visible {
outline: 3px solid var(--cd-rot);
outline-offset: 3px;
border-radius: 3px;
}
.cd-auf-dunkel .cd-reiter__knopf:focus-visible {
outline-color: var(--cd-rot-auf-dunkel);
}
@media (prefers-reduced-motion: reduce) {
.cd-reiter__knopf,
.cd-reiter__knopf::after,
.cd-reiter__plakette {
transition: none;
}
}
@media (max-width: 620px) {
.cd-reiter__leiste {
display: grid;
gap: 0;
border-block-end: 0;
}
.cd-reiter__knopf {
padding: 12px 0 12px 16px;
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-auf-dunkel .cd-reiter__knopf { border-block-end-color: var(--cd-dunkel-3); }
.cd-reiter__knopf:last-child { border-block-end: 0; }
.cd-reiter__knopf::after {
inset-inline: 0 auto;
inset-block: 0;
inline-size: 3px;
block-size: auto;
transform: scaleY(0);
transform-origin: center top;
}
.cd-reiter__knopf--an::after { transform: scaleY(1); }
.cd-reiter__plakette {
block-size: 40px;
min-inline-size: 128px;
transform: none;
}
.cd-reiter__knopf--an .cd-reiter__plakette,
.cd-reiter__knopf:hover .cd-reiter__plakette { transform: none; }
}
.cd-reiter__feld .cd-kicker {
display: none;
}
/* bahnen/cd_erklaergrafik.css */
.cd-erklaer__kopf {
margin-block-end: var(--cd-a7);
}
.cd-erklaer__titel {
font-size: var(--cd-gr-h2);
line-height: var(--cd-zeile-kopf);
max-inline-size: 22ch;
}
.cd-erklaer__beitext {
margin-block-start: var(--cd-a4);
color: var(--cd-text-2);
max-inline-size: 62ch;
}
.cd-erklaer__rahmen {
margin: 0;
padding: var(--cd-a6);
background: var(--cd-flaeche-2);
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-karte);
}
.cd-erklaer.cd-auf-dunkel .cd-erklaer__rahmen,
.cd-erklaer.cd-auf-getoent .cd-erklaer__rahmen {
background: var(--cd-weiss);
border-color: var(--cd-linie);
}
.cd-erklaer__bild {
display: block;
inline-size: 100%;
block-size: auto;
}
.cd-erklaer__unterschrift {
margin-block-start: var(--cd-a4);
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
text-align: center;
}
@media (max-width: 700px) {
.cd-erklaer__rahmen {
padding: var(--cd-a4);
}
.cd-erklaer__kopf {
margin-block-end: var(--cd-a6);
}
}
.cd-erklaer[data-erklaerrahmen="weiss"] .cd-erklaer__rahmen {
background: var(--cd-weiss);
border-color: var(--cd-linie);
}
.cd-erklaer[data-erklaerrahmen="ohne"] .cd-erklaer__rahmen {
padding: 0;
background: none;
border: 0;
}
.cd-erklaer[data-erklaerrahmen="ohne"] .cd-erklaer__unterschrift {
text-align: start;
}
.cd-erklaer__pfeil {
justify-self: start;
align-self: end;
inline-size: 320px;
max-inline-size: 100%;
margin-block-end: var(--cd-a3);
color: var(--cd-rot);
}
.cd-erklaer__pfeil svg {
display: block;
inline-size: 100%;
block-size: auto;
}
@media (max-width: 900px) {
.cd-erklaer__pfeil { display: none; }
}
html.cd-bewegung .cd-erklaer__pfeilBogen {
stroke-dasharray: 340;
stroke-dashoffset: 340;
transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1);
}
html.cd-bewegung .cd-erklaer.cd-ein .cd-erklaer__pfeilBogen {
stroke-dashoffset: 0;
}
html.cd-bewegung .cd-erklaer__pfeilSpitze {
opacity: 0;
transition: opacity .35s ease-out .85s;
}
html.cd-bewegung .cd-erklaer.cd-ein .cd-erklaer__pfeilSpitze {
opacity: 1;
}
.cd-erklaer.cd-auf-dunkel .cd-erklaer__beitext {
color: var(--cd-text-auf-dunkel);
}
.cd-erklaer.cd-auf-dunkel[data-erklaerrahmen="ohne"] .cd-erklaer__unterschrift {
color: var(--cd-text-auf-dunkel-2);
}
.cd-erklaer.cd-auf-dunkel .cd-erklaer__pfeil {
color: var(--cd-rot-auf-dunkel);
}
.cd-erklaer__kunde {
display: flex;
align-items: center;
gap: var(--cd-a4);
margin: 0 0 var(--cd-a6);
}
.cd-erklaer__kundelogo {
flex: 0 0 auto;
display: flex;
align-items: center;
block-size: 48px;
padding: 8px 12px;
background: var(--cd-weiss);
border-radius: var(--cd-r-feld);
}
.cd-erklaer__kundelogo { border: 1px solid var(--cd-linie-2); }
.cd-auf-dunkel .cd-erklaer__kundelogo { border-color: transparent; }
.cd-erklaer__kundelogo img { block-size: 100%; inline-size: auto; }
.cd-erklaer__kundename { color: var(--cd-text-2); font-size: var(--cd-gr-klein); }
.cd-erklaer__kundename b {
display: block;
color: var(--cd-tinte);
font-size: var(--cd-gr-basis);
font-weight: 600;
}
.cd-auf-dunkel .cd-erklaer__kundename { color: var(--cd-text-auf-dunkel); }
.cd-auf-dunkel .cd-erklaer__kundename b { color: var(--cd-weiss); }
.cd-erklaer__seiten {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
border: 1px solid var(--cd-linie-2);
background: var(--cd-flaeche-1);
}
.cd-auf-dunkel .cd-erklaer__seiten {
border-color: var(--cd-dunkel-3);
background: var(--cd-dunkel);
}
@media (min-width: 901px) {
.cd-erklaer__seiten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.cd-erklaer__seite { padding: var(--cd-a6); }
.cd-erklaer__seite + .cd-erklaer__seite { border-block-start: 1px solid var(--cd-linie-2); }
.cd-auf-dunkel .cd-erklaer__seite + .cd-erklaer__seite { border-block-start-color: var(--cd-dunkel-3); }
@media (min-width: 901px) {
.cd-erklaer__seite + .cd-erklaer__seite {
border-block-start: 0;
border-inline-start: 1px solid var(--cd-linie-2);
}
.cd-auf-dunkel .cd-erklaer__seite + .cd-erklaer__seite {
border-inline-start-color: var(--cd-dunkel-3);
}
}
.cd-erklaer__marke {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 var(--cd-a5);
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__marke { color: var(--cd-text-auf-dunkel-2); }
.cd-erklaer__seite--aussen .cd-erklaer__marke { color: var(--cd-rot); }
.cd-auf-dunkel .cd-erklaer__seite--aussen .cd-erklaer__marke { color: var(--cd-rot-auf-dunkel); }
.cd-erklaer__punkte { display: grid; gap: var(--cd-a3); margin: 0; padding: 0; list-style: none; }
.cd-erklaer__punkte li {
position: relative;
padding-inline-start: 22px;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__punkte li { color: var(--cd-text-auf-dunkel); }
.cd-erklaer__punkte li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: .62em;
inline-size: 10px;
block-size: 2px;
background: currentColor;
opacity: .55;
}
.cd-erklaer__daten { margin: 0; display: grid; gap: var(--cd-a4); }
.cd-erklaer__daten > div {
display: grid;
gap: 2px;
padding-block-end: var(--cd-a4);
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-auf-dunkel .cd-erklaer__daten > div { border-block-end-color: var(--cd-dunkel-3); }
.cd-erklaer__daten > div:last-child { padding-block-end: 0; border-block-end: 0; }
.cd-erklaer__daten dt {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__daten dt { color: var(--cd-text-auf-dunkel-2); }
.cd-erklaer__daten dd { margin: 0; color: var(--cd-tinte); font-weight: 500; }
.cd-auf-dunkel .cd-erklaer__daten dd { color: var(--cd-weiss); }
.cd-erklaer__naht {
display: flex;
align-items: center;
gap: var(--cd-a3);
margin: var(--cd-a4) 0 0;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__naht { color: var(--cd-text-auf-dunkel-2); }
.cd-erklaer__naht::before,
.cd-erklaer__naht::after {
content: "";
flex: 1 1 auto;
block-size: 1px;
background: var(--cd-linie-2);
}
.cd-auf-dunkel .cd-erklaer__naht::before,
.cd-auf-dunkel .cd-erklaer__naht::after { background: var(--cd-dunkel-3); }
.cd-erklaer__nebeneinander {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
align-items: start;
}
@media (min-width: 901px) {
.cd-erklaer__nebeneinander { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
}
.cd-erklaer__nebeneinander .cd-erklaer__seite {
padding: var(--cd-a6);
border: 1px solid var(--cd-linie-2);
background: var(--cd-flaeche-1);
}
.cd-auf-dunkel .cd-erklaer__nebeneinander .cd-erklaer__seite {
border-color: var(--cd-dunkel-3);
background: var(--cd-dunkel);
}
.cd-erklaer__nachsatz {
margin-block-start: var(--cd-a6);
max-inline-size: 42rem;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__nachsatz { color: var(--cd-text-auf-dunkel); }
.cd-erklaer--schnittstelle .cd-erklaer__rahmen,
.cd-erklaer--datenblatt .cd-erklaer__rahmen { margin-block-start: var(--cd-a7); }
.cd-erklaer--datenblatt .cd-erklaer__rahmen { margin-block-start: 0; }
/* bahnen/cd_schnittstellen.css */
.cd-sstband__kopf { max-inline-size: 46rem; margin-block-end: var(--cd-a6); }
.cd-sstband__titel { margin-block-start: var(--cd-a3); }
.cd-sstband__beitext { margin-block-start: var(--cd-a4); color: var(--cd-text-2); }
.cd-auf-dunkel .cd-sstband__beitext { color: var(--cd-text-auf-dunkel); }
.cd-sstband__reiter {
display: flex;
gap: var(--cd-a3);
margin-block-end: var(--cd-a5);
overflow-x: auto;
scrollbar-width: none;
padding-block-end: 2px;
}
.cd-sstband__reiter::-webkit-scrollbar { display: none; }
.cd-sstband__reiter-knopf {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--cd-a4);
padding: var(--cd-a3) var(--cd-a4);
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-feld);
background: var(--cd-weiss);
text-decoration: none;
color: inherit;
transition: border-color var(--cd-zeit) ease, background var(--cd-zeit) ease;
}
.cd-auf-dunkel .cd-sstband__reiter-knopf {
border-color: var(--cd-dunkel-3);
background: var(--cd-dunkel);
}
.cd-sstband__reiter-knopf:hover { border-color: var(--cd-rot); }
.cd-sstband__reiter-knopf--auf {
border-color: var(--cd-rot);
box-shadow: inset 0 -3px 0 var(--cd-rot);
}
.cd-sstband__reiter-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
inline-size: 7.5rem;
min-inline-size: 0;
block-size: 40px;
padding: 4px 8px;
background: var(--cd-weiss);
border-radius: var(--cd-r-feld);
}
.cd-sstband__reiter-logo img { max-inline-size: 100%; max-block-size: 100%; }
.cd-sstband__reiter-text { display: grid; gap: 1px; text-align: start; }
.cd-sstband__reiter-text b { font-weight: 600; font-size: var(--cd-gr-klein); }
.cd-sstband__reiter-text span {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-sstband__reiter-text span { color: var(--cd-text-auf-dunkel-2); }
.cd-sstband__spur {
display: flex;
gap: var(--cd-a6);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
position: relative;
min-inline-size: 0;
}
.cd-sstband__spur::-webkit-scrollbar { display: none; }
.cd-sstband__folie {
flex: 0 0 100%;
scroll-snap-align: start;
min-inline-size: 0;
}
.cd-sstband__folienkopf { max-inline-size: 46rem; margin-block-end: var(--cd-a6); }
.cd-sstband__folientitel { margin-block-start: var(--cd-a3); }
.cd-sstband__vorspann {
margin-block-start: var(--cd-a4);
color: var(--cd-text-2);
max-inline-size: 40rem;
}
.cd-auf-dunkel .cd-sstband__vorspann { color: var(--cd-text-auf-dunkel); }
.cd-sstband__seiten {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
border: 1px solid var(--cd-linie-2);
background: var(--cd-flaeche-1);
}
.cd-auf-dunkel .cd-sstband__seiten {
border-color: var(--cd-dunkel-3);
background: var(--cd-dunkel);
}
@media (min-width: 901px) {
.cd-sstband__seiten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.cd-sstband__seite { padding: var(--cd-a6); }
.cd-sstband__seite + .cd-sstband__seite { border-block-start: 1px solid var(--cd-linie-2); }
.cd-auf-dunkel .cd-sstband__seite + .cd-sstband__seite { border-block-start-color: var(--cd-dunkel-3); }
@media (min-width: 901px) {
.cd-sstband__seite + .cd-sstband__seite {
border-block-start: 0;
border-inline-start: 1px solid var(--cd-linie-2);
}
.cd-auf-dunkel .cd-sstband__seite + .cd-sstband__seite { border-inline-start-color: var(--cd-dunkel-3); }
}
.cd-sstband__marke {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 var(--cd-a5);
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-sstband__marke { color: var(--cd-text-auf-dunkel-2); }
.cd-sstband__seite--aussen .cd-sstband__marke { color: var(--cd-rot); }
.cd-auf-dunkel .cd-sstband__seite--aussen .cd-sstband__marke { color: var(--cd-rot-auf-dunkel); }
.cd-sstband__punkte { display: grid; gap: var(--cd-a3); margin: 0; padding: 0; list-style: none; }
.cd-sstband__punkte li {
position: relative;
padding-inline-start: 22px;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-sstband__punkte li { color: var(--cd-text-auf-dunkel); }
.cd-sstband__punkte li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: .62em;
inline-size: 10px;
block-size: 2px;
background: currentColor;
opacity: .55;
}
.cd-sstband__daten { margin: 0; display: grid; gap: var(--cd-a4); }
.cd-sstband__daten > div {
display: grid;
gap: 2px;
padding-block-end: var(--cd-a4);
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-auf-dunkel .cd-sstband__daten > div { border-block-end-color: var(--cd-dunkel-3); }
.cd-sstband__daten > div:last-child { padding-block-end: 0; border-block-end: 0; }
.cd-sstband__daten dt {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-sstband__daten dt { color: var(--cd-text-auf-dunkel-2); }
.cd-sstband__daten dd { margin: 0; color: var(--cd-tinte); font-weight: 500; }
.cd-auf-dunkel .cd-sstband__daten dd { color: var(--cd-weiss); }
.cd-sstband__naht {
display: flex;
align-items: center;
gap: var(--cd-a3);
margin: var(--cd-a4) 0 0;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-sstband__naht { color: var(--cd-text-auf-dunkel-2); }
.cd-sstband__naht::before,
.cd-sstband__naht::after {
content: "";
flex: 1 1 auto;
block-size: 1px;
background: var(--cd-linie-2);
}
.cd-auf-dunkel .cd-sstband__naht::before,
.cd-auf-dunkel .cd-sstband__naht::after { background: var(--cd-dunkel-3); }
.cd-sstband__rahmen { margin: var(--cd-a7) 0 0; }
.cd-sstband__rahmen picture { display: block; }
.cd-sstband__bild { display: block; inline-size: 100%; block-size: auto; }
.cd-sstband__nachsatz {
margin-block-start: var(--cd-a6);
max-inline-size: 42rem;
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-sstband__nachsatz { color: var(--cd-text-auf-dunkel); }
.cd-sstband__bedienung {
display: flex;
align-items: center;
gap: var(--cd-a3);
margin-block-start: var(--cd-a6);
}
.cd-sstband__bedienung[hidden] { display: none; }
.cd-sstband__pfeil {
inline-size: 52px;
block-size: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-knopf);
background: none;
color: inherit;
font-size: 20px;
cursor: pointer;
transition: border-color var(--cd-zeit) ease;
}
.cd-auf-dunkel .cd-sstband__pfeil { border-color: var(--cd-linie-auf-dunkel); }
.cd-sstband__pfeil:hover:not(:disabled) { border-color: var(--cd-rot); }
.cd-sstband__pfeil:disabled { opacity: .35; cursor: default; }
.cd-sstband__zaehler {
margin: 0 0 0 auto;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
color: var(--cd-text-2);
font-variant-numeric: tabular-nums;
}
.cd-auf-dunkel .cd-sstband__zaehler { color: var(--cd-text-auf-dunkel-2); }
@media (max-width: 900px) {
.cd-sstband__spur { gap: var(--cd-a5); }
.cd-sstband__seite { padding: var(--cd-a5); }
.cd-sstband__reiter-logo { inline-size: 6rem; block-size: 34px; }
}
@media (min-width: 1101px) {
.cd-sstband--neben .cd-sstband__folie {
display: grid;
grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
column-gap: var(--cd-a8);
align-items: start;
}
.cd-sstband--neben .cd-sstband__folienkopf,
.cd-sstband--neben .cd-sstband__seiten,
.cd-sstband--neben .cd-sstband__naht { grid-column: 1; }
.cd-sstband--neben .cd-sstband__rahmen {
grid-column: 2;
grid-row: 1 / span 3;
margin-block-start: 0;
align-self: center;
}
.cd-sstband--neben .cd-sstband__nachsatz { grid-column: 1 / -1; }
.cd-sstband--neben .cd-sstband__seiten { grid-template-columns: minmax(0, 1fr); }
.cd-sstband--neben .cd-sstband__seite + .cd-sstband__seite {
border-block-start: 1px solid var(--cd-linie-2);
border-inline-start: 0;
}
.cd-auf-dunkel.cd-sstband--neben .cd-sstband__seite + .cd-sstband__seite {
border-block-start-color: var(--cd-dunkel-3);
}
}
.cd-sstband--weiss .cd-sstband__folie,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__folie {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-2);
padding: var(--cd-a7);
color: var(--cd-text-2);
}
.cd-sstband--weiss .cd-sstband__seiten,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seiten { color: var(--cd-text-2); }
@media (max-width: 900px) {
.cd-sstband--weiss .cd-sstband__folie { padding: var(--cd-a5); }
}
.cd-sstband--weiss .cd-sstband__reiter { margin-block-end: 0; padding-block-end: 0; }
.cd-sstband--weiss .cd-sstband__reiter-knopf {
background: transparent;
border-color: transparent;
border-end-start-radius: 0;
border-end-end-radius: 0;
position: relative;
inset-block-end: -1px;
}
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf {
background: transparent;
border-color: transparent;
}
.cd-sstband--weiss .cd-sstband__reiter-knopf--auf {
background: var(--cd-weiss);
border-color: var(--cd-linie-2);
border-block-end-color: var(--cd-weiss);
box-shadow: inset 0 3px 0 var(--cd-rot);
}
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf--auf {
background: var(--cd-weiss);
border-color: var(--cd-linie-2);
border-block-end-color: var(--cd-weiss);
}
.cd-sstband--weiss .cd-sstband__folientitel,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__folientitel { color: var(--cd-tinte); }
.cd-sstband--weiss .cd-sstband__folienkicker,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__folienkicker { color: var(--cd-rot); }
.cd-sstband--weiss .cd-sstband__vorspann,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__vorspann { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__nachsatz,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__nachsatz { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__seiten,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seiten {
border-color: var(--cd-linie-2);
background: var(--cd-flaeche-1);
}
.cd-sstband--weiss .cd-sstband__seite + .cd-sstband__seite,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seite + .cd-sstband__seite {
border-block-start-color: var(--cd-linie-2);
}
@media (min-width: 901px) {
.cd-sstband--weiss .cd-sstband__seite + .cd-sstband__seite,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seite + .cd-sstband__seite {
border-inline-start-color: var(--cd-linie-2);
}
}
.cd-sstband--weiss .cd-sstband__marke,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__marke { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__seite--aussen .cd-sstband__marke,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seite--aussen .cd-sstband__marke { color: var(--cd-rot); }
.cd-sstband--weiss .cd-sstband__punkte li,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__punkte li { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__daten > div,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__daten > div { border-block-end-color: var(--cd-linie-2); }
.cd-sstband--weiss .cd-sstband__daten dt,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__daten dt { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__daten dd,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__daten dd { color: var(--cd-tinte); }
.cd-sstband--weiss .cd-sstband__naht,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__naht { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__naht::before,
.cd-sstband--weiss .cd-sstband__naht::after,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__naht::before,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__naht::after { background: var(--cd-linie-2); }
.cd-sstband--weiss .cd-sstband__spur { padding-block-start: 0; }
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf--auf,
.cd-sstband--weiss .cd-sstband__reiter-knopf--auf { color: var(--cd-tinte); }
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf--auf .cd-sstband__reiter-text b,
.cd-sstband--weiss .cd-sstband__reiter-knopf--auf .cd-sstband__reiter-text b { color: var(--cd-tinte); }
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf--auf .cd-sstband__reiter-text span,
.cd-sstband--weiss .cd-sstband__reiter-knopf--auf .cd-sstband__reiter-text span { color: var(--cd-text-2); }
/* bahnen/cd_mobilspur.css */
@media (max-width: 699px) {
.cd-karten__raster:has(> :nth-child(3)),
.cd-blog__raster:has(> :nth-child(3)) {
display: flex;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
min-inline-size: 0;
max-inline-size: 100%;
position: relative;
scrollbar-width: none;
padding-block: 3px;
}
.cd-karten__raster:has(> :nth-child(3))::-webkit-scrollbar,
.cd-blog__raster:has(> :nth-child(3))::-webkit-scrollbar,
[data-mobilspur="immer"] .cd-referenzen__raster::-webkit-scrollbar,
[data-mobilspur="immer"] .cd-referenzen__karten::-webkit-scrollbar,
[data-mobilspur="immer"] .cd-referenzen__weitere::-webkit-scrollbar,
[data-mobilspur="immer"] .cd-referenzen__galerie::-webkit-scrollbar {
display: none;
}
.cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld,
.cd-blog__raster:has(> :nth-child(3)) > .cd-blog__karte {
flex: 0 0 var(--cd-spur-karte, min(396px, 84%));
scroll-snap-align: start;
}
.cd-bahn[data-mobilspur-layout="voll"]       { --cd-spur-karte: 100%; }
.cd-bahn[data-mobilspur-layout="anderthalb"] { --cd-spur-karte: 66%; }
.cd-bahn[data-mobilspur-layout="zwei"]       { --cd-spur-karte: 48%; }
.cd-bahn[data-mobilspur-layout="mitte"]      { --cd-spur-karte: 78%; }
.cd-bahn[data-mobilspur-layout="mitte"] .cd-karten__raster,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__raster,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__karten,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__weitere,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__galerie,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-blog__raster {
scroll-padding-inline: 11%;
padding-inline: 11%;
box-sizing: border-box;
}
.cd-bahn[data-mobilspur-layout="mitte"] .cd-karten__raster > .cd-karten__feld,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__raster > .cd-referenzen__kachel,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__karten > .cd-referenzen__karte,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__weitere > .cd-referenzen__kurz,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__galerie > .cd-referenzen__stein,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-blog__raster > .cd-blog__karte {
scroll-snap-align: center;
}
.cd-karten__raster:has(> :nth-child(3)) {
gap: var(--cd-a5);
background: none;
border: 0;
}
.cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld {
border: 1px solid var(--cd-linie-2);
}
.cd-auf-dunkel .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld {
border-color: var(--cd-dunkel-3);
}
.cd-karten--kennzahlen .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld,
[data-mobilspur="immer"].cd-karten--kennzahlen .cd-karten__raster > .cd-karten__feld {
--cd-kz-einzug: var(--cd-a5);
padding: var(--cd-a5);
}
[data-mobilspur="immer"] .cd-karten__raster,
[data-mobilspur="immer"] .cd-referenzen__raster,
[data-mobilspur="immer"] .cd-referenzen__karten,
[data-mobilspur="immer"] .cd-referenzen__weitere,
[data-mobilspur="immer"] .cd-referenzen__galerie,
[data-mobilspur="immer"] .cd-blog__raster {
display: flex;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-block: 3px;
min-inline-size: 0;
max-inline-size: 100%;
position: relative;
}
[data-mobilspur="immer"] .cd-karten__raster {
gap: var(--cd-a5);
background: none;
border: 0;
}
[data-mobilspur="immer"] .cd-karten__raster > .cd-karten__feld {
border: 1px solid var(--cd-linie-2);
}
[data-mobilspur="immer"] .cd-karten__raster > .cd-karten__feld,
[data-mobilspur="immer"] .cd-referenzen__raster > .cd-referenzen__kachel,
[data-mobilspur="immer"] .cd-referenzen__karten > .cd-referenzen__karte,
[data-mobilspur="immer"] .cd-referenzen__weitere > .cd-referenzen__kurz,
[data-mobilspur="immer"] .cd-referenzen__galerie > .cd-referenzen__stein,
[data-mobilspur="immer"] .cd-blog__raster > .cd-blog__karte {
flex: 0 0 var(--cd-spur-karte, min(396px, 84%));
scroll-snap-align: start;
}
[data-mobilspur="nie"] .cd-karten__raster,
[data-mobilspur="nie"] .cd-referenzen__raster,
[data-mobilspur="nie"] .cd-referenzen__karten,
[data-mobilspur="nie"] .cd-referenzen__weitere,
[data-mobilspur="nie"] .cd-referenzen__galerie,
[data-mobilspur="nie"] .cd-blog__raster,
[data-blaettern] .cd-blog__raster {
display: grid;
overflow-x: visible;
scroll-snap-type: none;
}
[data-mobilspur="nie"] .cd-karten__raster {
gap: 2px;
background: var(--cd-linie-2);
border: 1px solid var(--cd-linie-2);
}
[data-mobilspur="nie"] .cd-auf-dunkel .cd-karten__raster,
.cd-auf-dunkel [data-mobilspur="nie"] .cd-karten__raster {
background: var(--cd-dunkel-3);
border-color: var(--cd-dunkel-3);
}
[data-mobilspur="nie"] .cd-karten__raster > .cd-karten__feld,
[data-mobilspur="nie"] .cd-referenzen__raster > .cd-referenzen__kachel,
[data-mobilspur="nie"] .cd-referenzen__karten > .cd-referenzen__karte,
[data-mobilspur="nie"] .cd-referenzen__weitere > .cd-referenzen__kurz,
[data-mobilspur="nie"] .cd-referenzen__galerie > .cd-referenzen__stein,
[data-mobilspur="nie"] .cd-blog__raster > .cd-blog__karte {
flex: initial;
border: 0;
scroll-snap-align: none;
}
.cd-karten--verweisreihe .cd-karten__raster:has(> :nth-child(3)) {
display: grid;
overflow-x: visible;
scroll-snap-type: none;
gap: 0;
padding-block: 0;
background: none;
border: 0;
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-karten--verweisreihe .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld {
flex: initial;
scroll-snap-align: none;
border: 0;
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-karten__raster:focus-visible,
.cd-referenzen__raster:focus-visible,
.cd-referenzen__karten:focus-visible,
.cd-referenzen__weitere:focus-visible,
.cd-referenzen__galerie:focus-visible,
.cd-blog__raster:focus-visible {
outline: 2px solid var(--cd-rot);
outline-offset: 4px;
}
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
.cd-karten__raster,
.cd-referenzen__raster,
.cd-referenzen__karten,
.cd-referenzen__weitere,
.cd-referenzen__galerie,
.cd-blog__raster {
scroll-behavior: auto;
}
}
.cd-spurbedienung { display: none; }
.cd-spurbedienung[hidden],
.cd-spurbedienung__punkte[hidden] { display: none; }
@media (max-width: 699px) {
.cd-spurbedienung {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: var(--cd-a4);
row-gap: var(--cd-a3);
margin-block-start: var(--cd-a5);
}
.cd-spurbedienung__rechts {
display: flex;
align-items: center;
gap: var(--cd-a4);
margin-inline-start: auto;
}
.cd-spurbedienung__punkte {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-inline-size: 0;
}
.cd-spurbedienung__punkte:has(> :nth-child(13)) { display: none; }
.cd-spurpunkt {
appearance: none;
border: 0;
background: none;
cursor: pointer;
padding: 8px;
flex: 0 0 var(--cd-zielgroesse, 24px);
min-inline-size: var(--cd-zielgroesse, 24px);
block-size: var(--cd-zielgroesse, 24px);
display: inline-flex;
align-items: center;
justify-content: center;
}
.cd-spurbedienung__punkte:has(> :nth-child(9)) .cd-spurpunkt {
flex: 0 1 var(--cd-zielgroesse, 24px);
min-inline-size: 24px;
}
.cd-spurpunkt::before {
content: "";
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: var(--cd-text-3);
transition: background var(--cd-zeit) var(--cd-kurve),
transform var(--cd-zeit) var(--cd-kurve);
}
.cd-spurpunkt[aria-current]::before {
background: var(--cd-rot);
transform: scale(1.25);
}
.cd-auf-dunkel .cd-spurpunkt::before { background: var(--cd-dunkel-3); }
.cd-auf-dunkel .cd-spurpunkt[aria-current]::before { background: var(--cd-rot-auf-dunkel); }
.cd-spurbedienung__pfeile { display: flex; gap: var(--cd-a2); }
.cd-spurpfeil {
appearance: none;
cursor: pointer;
inline-size: 44px;
block-size: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-knopf);
background: var(--cd-weiss);
color: var(--cd-tinte);
transition: background var(--cd-zeit) var(--cd-kurve),
border-color var(--cd-zeit) var(--cd-kurve),
color var(--cd-zeit) var(--cd-kurve);
}
.cd-spurpfeil:hover,
.cd-spurpfeil:focus-visible {
border-color: var(--cd-rot);
color: var(--cd-rot);
}
.cd-spurpfeil[disabled] {
cursor: default;
opacity: .35;
border-color: var(--cd-linie-2);
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-spurpfeil {
background: none;
border-color: var(--cd-dunkel-3);
color: var(--cd-text-auf-dunkel-1, #fff);
}
.cd-auf-dunkel .cd-spurpfeil:hover,
.cd-auf-dunkel .cd-spurpfeil:focus-visible {
border-color: var(--cd-rot-auf-dunkel);
color: var(--cd-rot-auf-dunkel);
}
.cd-spurzaehler {
margin: 0;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
color: var(--cd-text-3);
white-space: nowrap;
}
.cd-auf-dunkel .cd-spurzaehler { color: var(--cd-text-auf-dunkel-2); }
.cd-spurhalt {
appearance: none;
cursor: pointer;
position: relative;
overflow: hidden;
inline-size: 44px;
block-size: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-knopf);
background: var(--cd-weiss);
color: var(--cd-tinte);
transition: border-color var(--cd-zeit) var(--cd-kurve),
color var(--cd-zeit) var(--cd-kurve);
}
.cd-spurhalt:hover,
.cd-spurhalt:focus-visible {
border-color: var(--cd-rot);
color: var(--cd-rot);
}
.cd-auf-dunkel .cd-spurhalt {
background: none;
border-color: var(--cd-dunkel-3);
color: var(--cd-text-auf-dunkel-1, #fff);
}
.cd-spurhalt__weiter { display: none; }
.cd-spurhalt[aria-pressed="true"] .cd-spurhalt__pause { display: none; }
.cd-spurhalt[aria-pressed="true"] .cd-spurhalt__weiter { display: block; }
.cd-spurhalt .cd-symbol { position: relative; z-index: 1; }
.cd-spurbedienung:not(:has(.cd-spurbedienung__punkte)) .cd-spurbedienung__rechts {
margin-inline-start: 0;
inline-size: 100%;
justify-content: space-between;
}
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
.cd-spurpunkt::before { transition: none; }
}
@media (max-width: 699px) {
.cd-bahn[data-mobilspur-layout="mitte"] { --cd-spur-karte: 100%; }
.cd-bahn[data-mobilspur-layout="mitte"] .cd-karten__raster,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__raster,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__karten,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__weitere,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-referenzen__galerie,
.cd-bahn[data-mobilspur-layout="mitte"] .cd-blog__raster {
padding-inline: 14%;
scroll-padding-inline: 14%;
}
.cd-bahn[data-mobilspur-layout="mitte"][data-blaettern] .cd-blog__raster {
padding-inline: 0;
scroll-padding-inline: 0;
}
.cd-bahn.cd-karten--band { padding-block: var(--cd-a6); }
.cd-karten--band .cd-karten__raster:has(> :nth-child(3)) > .cd-karten__feld,
[data-mobilspur="immer"] .cd-karten--band .cd-karten__raster > .cd-karten__feld {
padding: 26px 22px;
}
.cd-karten--band .cd-karten__titel { text-wrap: wrap; }
}
[data-blaettern] .cd-spurbedienung { display: none; }
/* bahnen/cd_gegenueberstellung.css */
.cd-gegen__kopf {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
margin-block-end: var(--cd-a7);
}
.cd-gegen__kopf--mitbild {
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: var(--cd-a8);
align-items: center;
}
.cd-gegen__titel {
margin-block-end: var(--cd-a4);
}
.cd-gegen__subtitel {
font-size: var(--cd-gr-gross);
color: var(--cd-text-3);
margin-block-end: var(--cd-a3);
}
.cd-gegen__beitext {
font-size: var(--cd-gr-gross);
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-gegen__beitext,
.cd-auf-dunkel .cd-gegen__subtitel { color: var(--cd-text-auf-dunkel); }
.cd-gegen__bild {
justify-self: end;
max-inline-size: 390px;
}
.cd-gegen__bilddatei {
display: block;
inline-size: 100%;
block-size: auto;
}
.cd-gegen__tafeln {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1px;
background: var(--cd-linie-2);
border: 1px solid var(--cd-linie-2);
}
.cd-gegen__tafel {
display: flex;
flex-direction: column;
gap: var(--cd-a4);
padding: var(--cd-a6);
background: var(--cd-weiss);
}
.cd-auf-dunkel .cd-gegen__tafeln {
background: var(--cd-dunkel-3);
border-color: var(--cd-dunkel-3);
}
.cd-auf-dunkel .cd-gegen__tafel { background: var(--cd-dunkel-2); }
.cd-gegen__tafelkicker {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-rot);
}
.cd-auf-dunkel .cd-gegen__tafelkicker { color: var(--cd-rot-auf-dunkel); }
.cd-gegen__tafelkopf {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--cd-a5);
flex-wrap: wrap;
}
.cd-gegen__tafeltitel {
flex: 1 1 auto;
min-inline-size: 0;
}
.cd-gegen__tag {
flex: 0 0 auto;
max-inline-size: none;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-rot);
}
.cd-auf-dunkel .cd-gegen__tag { color: var(--cd-rot-auf-dunkel); }
.cd-gegen__tafeltext {
color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-gegen__tafeltext { color: var(--cd-text-auf-dunkel); }
.cd-gegen__punktegruppe {
display: grid;
gap: var(--cd-a3);
}
.cd-gegen__punktelabel {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .15em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-gegen__punktelabel { color: var(--cd-text-auf-dunkel-2); }
.cd-gegen__punkte {
display: grid;
gap: var(--cd-a3);
}
.cd-gegen__punkt {
display: flex;
gap: var(--cd-a3);
font-size: var(--cd-gr-klein);
line-height: var(--cd-zeile-text);
color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-gegen__punkt { color: var(--cd-text-auf-dunkel); }
.cd-gegen__punkte--nein .cd-gegen__punkt { color: var(--cd-text-2); }
.cd-auf-dunkel .cd-gegen__punkte--nein .cd-gegen__punkt { color: var(--cd-text-auf-dunkel-2); }
.cd-gegen__punkttext { min-inline-size: 0; }
.cd-gegen__marke {
position: relative;
flex: 0 0 auto;
inline-size: 17px;
block-size: 17px;
margin-block-start: 3px;
}
.cd-gegen__marke--ja::before {
content: "";
position: absolute;
inset-block-start: 1px;
inset-inline-start: 5px;
inline-size: 6px;
block-size: 11px;
border-inline-end: 2px solid var(--cd-rot);
border-block-end: 2px solid var(--cd-rot);
transform: rotate(45deg);
}
.cd-auf-dunkel .cd-gegen__marke--ja::before {
border-inline-end-color: var(--cd-rot-auf-dunkel);
border-block-end-color: var(--cd-rot-auf-dunkel);
}
.cd-gegen__marke--nein::before,
.cd-gegen__marke--nein::after {
content: "";
position: absolute;
inset-block-start: 8px;
inset-inline-start: 2px;
inline-size: 13px;
block-size: 2px;
background: var(--cd-text-schwach);
}
.cd-gegen__marke--nein::before { transform: rotate(45deg); }
.cd-gegen__marke--nein::after  { transform: rotate(-45deg); }
.cd-auf-dunkel .cd-gegen__marke--nein::before,
.cd-auf-dunkel .cd-gegen__marke--nein::after { background: var(--cd-text-auf-dunkel-2); }
.cd-gegen__marke--neutral::before {
content: "";
position: absolute;
inset-block-start: 5px;
inset-inline-start: 4px;
inline-size: 7px;
block-size: 7px;
border-block-start: 2px solid var(--cd-rot);
border-inline-end: 2px solid var(--cd-rot);
transform: rotate(45deg);
}
.cd-auf-dunkel .cd-gegen__marke--neutral::before {
border-block-start-color: var(--cd-rot-auf-dunkel);
border-inline-end-color: var(--cd-rot-auf-dunkel);
}
.cd-gegen__tafelfuss {
margin-block-start: auto;
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-auf-dunkel .cd-gegen__tafelfuss { border-block-start-color: var(--cd-dunkel-3); }
.cd-gegen__weiter {
display: inline-flex;
align-items: center;
font-weight: 600;
font-size: var(--cd-gr-klein);
color: var(--cd-rot);
}
.cd-auf-dunkel .cd-gegen__weiter { color: var(--cd-weiss); }
.cd-gegen__weiterpfeil {
inline-size: 7px;
block-size: 7px;
margin-inline-start: var(--cd-a3);
border-block-start: 2px solid currentColor;
border-inline-end: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-gegen__weiter:hover .cd-gegen__weiterpfeil {
transform: rotate(45deg) translate(2px, -2px);
}
.cd-gegen__tafelfussnote {
margin-block-start: auto;
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-2);
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-gegen__tafelfussnote {
border-block-start-color: var(--cd-dunkel-3);
color: var(--cd-text-auf-dunkel-2);
}
.cd-gegen__schluss {
margin-block-start: var(--cd-a5);
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
}
.cd-gegen__schluss a { text-decoration: underline; text-underline-offset: .18em; }
.cd-auf-dunkel .cd-gegen__schluss { color: var(--cd-text-auf-dunkel-2); }
.cd-gegen--tafeln .cd-gegen__tafel {
gap: var(--cd-a4);
padding: var(--cd-a7);
}
.cd-gegen--tafeln .cd-gegen__tafeln {
background: var(--cd-linie);
border-color: var(--cd-linie);
}
.cd-gegen--empfehlung .cd-gegen__tafel {
padding: var(--cd-a7) var(--cd-a6);
}
.cd-gegen--empfehlung .cd-gegen__tafel--akzent {
background: var(--cd-flaeche-1);
border-inline-start: 3px solid var(--cd-rot);
}
.cd-gegen--empfehlung.cd-auf-dunkel .cd-gegen__tafel--akzent {
background: var(--cd-dunkel-3);
border-inline-start-color: var(--cd-rot-auf-dunkel);
}
.cd-gegen--empfehlung .cd-gegen__tafel:not(.cd-gegen__tafel--akzent) .cd-gegen__tafelkicker {
color: var(--cd-text-3);
}
.cd-gegen--empfehlung.cd-auf-dunkel .cd-gegen__tafel:not(.cd-gegen__tafel--akzent) .cd-gegen__tafelkicker {
color: var(--cd-text-auf-dunkel-2);
}
.cd-gegen--doppelpanel .cd-gegen__tafeln {
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: var(--cd-a8);
background: none;
border: 0;
align-items: start;
}
.cd-gegen--doppelpanel .cd-gegen__tafel {
padding: 0;
background: none;
}
.cd-gegen--doppelpanel .cd-gegen__tafel + .cd-gegen__tafel {
padding: var(--cd-a6);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-karte);
}
.cd-gegen--doppelpanel.cd-auf-dunkel .cd-gegen__tafel + .cd-gegen__tafel {
background: var(--cd-dunkel-2);
border-color: var(--cd-dunkel-3);
}
.cd-gegen--doppelpanel .cd-gegen__tafel:first-child .cd-gegen__punkte {
gap: 1px;
background: var(--cd-linie);
border: 1px solid var(--cd-linie);
}
.cd-gegen--doppelpanel .cd-gegen__tafel:first-child .cd-gegen__punkt {
padding: var(--cd-a4) var(--cd-a5);
background: var(--cd-weiss);
font-size: var(--cd-gr-text);
}
.cd-gegen--doppelpanel.cd-auf-dunkel .cd-gegen__tafel:first-child .cd-gegen__punkte {
background: var(--cd-dunkel-3);
border-color: var(--cd-dunkel-3);
}
.cd-gegen--doppelpanel.cd-auf-dunkel .cd-gegen__tafel:first-child .cd-gegen__punkt {
background: var(--cd-dunkel-2);
}
.cd-gegen--doppelpanel .cd-gegen__tafel:first-child .cd-gegen__tafelfuss {
border-block-start: 0;
padding-block-start: var(--cd-a4);
}
@media (max-width: 1100px) {
.cd-gegen__kopf--mitbild {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
}
.cd-gegen__bild {
justify-self: start;
}
}
@media (max-width: 900px) {
.cd-gegen__tafeln,
.cd-gegen--doppelpanel .cd-gegen__tafeln {
grid-template-columns: minmax(0, 1fr);
}
.cd-gegen--doppelpanel .cd-gegen__tafeln {
gap: var(--cd-a7);
}
.cd-gegen--tafeln .cd-gegen__tafel,
.cd-gegen--empfehlung .cd-gegen__tafel {
padding: var(--cd-a6) var(--cd-a5);
}
}
@media (prefers-reduced-motion: reduce) {
.cd-gegen__weiterpfeil { transition: none; }
.cd-gegen__weiter:hover .cd-gegen__weiterpfeil { transform: rotate(45deg); }
}
/* bahnen/cd_vergleichstabelle.css */
.cd-tab__kopf {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
margin-block-end: var(--cd-a7);
}
.cd-tab__kopf--mitbild {
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: var(--cd-a8);
align-items: center;
}
.cd-tab__titel { margin-block-end: var(--cd-a4); }
.cd-tab__subtitel {
font-size: var(--cd-gr-gross);
color: var(--cd-text-3);
margin-block-end: var(--cd-a3);
}
.cd-tab__beitext {
font-size: var(--cd-gr-gross);
color: var(--cd-text-2);
}
.cd-tab__bild {
justify-self: end;
max-inline-size: 390px;
}
.cd-tab__bilddatei {
display: block;
inline-size: 100%;
block-size: auto;
}
.cd-tab__rahmen {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-block-start: 2px solid var(--cd-rot);
}
.cd-tab__tabelle {
inline-size: 100%;
border-collapse: collapse;
text-align: start;
}
.cd-tab__kopfzeile { background: var(--cd-flaeche-1); }
.cd-tab__spaltenkopf {
padding: var(--cd-a4) var(--cd-a5);
border-block-end: 1px solid var(--cd-linie-2);
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-gross);
font-weight: 700;
letter-spacing: -.02em;
text-align: start;
vertical-align: bottom;
}
.cd-tab__spaltenkopf--a {
inline-size: 24%;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-tab__zeile { border-block-start: 1px solid var(--cd-linie-2); }
.cd-tab__zeile:first-child { border-block-start: 0; }
.cd-tab__kriterium {
padding: var(--cd-a5);
border-inline-start: 3px solid transparent;
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-gross);
font-weight: 700;
letter-spacing: -.02em;
text-align: start;
vertical-align: top;
color: var(--cd-tinte);
}
.cd-tab__zelle {
padding: var(--cd-a5);
border-inline-start: 1px solid var(--cd-linie-2);
vertical-align: top;
font-size: var(--cd-gr-klein);
line-height: var(--cd-zeile-text);
color: var(--cd-text-2);
}
.cd-tab__zellentext { display: block; }
.cd-tab__wert {
display: block;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .06em;
color: var(--cd-tinte);
}
.cd-tab__zelle--empfehlung { font-weight: 600; color: var(--cd-tinte); }
.cd-tab__zelle--hervor {
background: var(--cd-flaeche-2);
font-weight: 600;
color: var(--cd-tinte);
}
.cd-tab--dreispaltig .cd-tab__zelle--befund .cd-tab__zellentext {
position: relative;
padding-inline-start: var(--cd-a5);
}
.cd-tab--dreispaltig .cd-tab__zelle--befund .cd-tab__zellentext::before {
content: "";
position: absolute;
inset-block-start: .5em;
inset-inline-start: 2px;
inline-size: 6px;
block-size: 6px;
border-block-start: 2px solid var(--cd-rot);
border-inline-end: 2px solid var(--cd-rot);
transform: rotate(45deg);
}
.cd-tab__balken {
display: block;
position: relative;
block-size: 7px;
margin-block-end: var(--cd-a3);
background: var(--cd-flaeche-3);
overflow: hidden;
}
.cd-tab__balkenwert {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
display: block;
background: var(--cd-rot);
}
.cd-tab__balken--b .cd-tab__balkenwert { background: var(--cd-dunkel); }
.cd-tab__zeile--rot .cd-tab__kriterium {
border-inline-start-color: var(--cd-rot);
color: var(--cd-rot-tief);
}
.cd-tab__zeile--rot .cd-tab__zelle--empfehlung { color: var(--cd-rot-tief); }
.cd-tab__zeile--gelb .cd-tab__kriterium { border-inline-start-color: var(--cd-text-schwach); }
.cd-tab__zeile--gruen .cd-tab__kriterium { border-inline-start-color: var(--cd-dunkel); }
.cd-tab__zeile--neutral .cd-tab__kriterium { border-inline-start-color: var(--cd-linie); }
.cd-tab__fussleiste {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a6);
flex-wrap: wrap;
padding: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-2);
background: var(--cd-flaeche-1);
}
.cd-tab__fussleistentext {
flex: 1 1 22rem;
min-inline-size: 0;
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
}
.cd-tab__fussnote {
margin-block-start: var(--cd-a4);
max-inline-size: 80ch;
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
}
.cd-tab__fussnote a { text-decoration: underline; text-underline-offset: .18em; }
.cd-tab__minikopf { display: none; }
@media (max-width: 1100px) {
.cd-tab__kopf--mitbild {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a6);
}
.cd-tab__bild { justify-self: start; }
.cd-tab__kriterium,
.cd-tab__zelle,
.cd-tab__spaltenkopf { padding: var(--cd-a4); }
}
@media (max-width: 760px) {
.cd-tab__tabelle,
.cd-tab__tabelle tbody,
.cd-tab__tabelle tr,
.cd-tab__tabelle th,
.cd-tab__tabelle td { display: block; }
.cd-tab__tabelle thead {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.cd-tab__zeile {
padding-block: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-tab__kriterium {
padding: 0 var(--cd-a5) var(--cd-a3);
border-inline-start-width: 0;
}
.cd-tab__zeile--rot .cd-tab__kriterium,
.cd-tab__zeile--gelb .cd-tab__kriterium,
.cd-tab__zeile--gruen .cd-tab__kriterium,
.cd-tab__zeile--neutral .cd-tab__kriterium {
border-inline-start-width: 3px;
padding-inline-start: var(--cd-a4);
margin-inline-start: var(--cd-a3);
}
.cd-tab__zelle {
padding: var(--cd-a2) var(--cd-a5);
border-inline-start: 0;
}
.cd-tab__minikopf {
display: block;
margin-block-end: var(--cd-a1);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-tab__zelle--hervor { background: none; }
.cd-tab__fussleiste { padding: var(--cd-a5) var(--cd-a4); }
}
/* bahnen/cd_vergleich.css */
.cd-vergleich__kopf {
margin-block-end: var(--cd-a6);
}
.cd-vergleich__titel {
font-size: var(--cd-gr-h2);
line-height: var(--cd-zeile-kopf);
max-inline-size: 24ch;
}
.cd-vergleich__beitext {
margin-block-start: var(--cd-a4);
color: var(--cd-text-2);
max-inline-size: 62ch;
}
.cd-vergleich__box {
max-inline-size: none;
}
.cd-vergleich__leiste {
display: flex;
align-items: center;
gap: var(--cd-a4);
}
.cd-vergleich__ampel {
display: flex;
flex: 0 0 auto;
gap: 6px;
}
.cd-vergleich__ampel i {
inline-size: 9px;
block-size: 9px;
border-radius: 50%;
background: var(--cd-linie-3);
}
.cd-vergleich__adresse {
flex: 0 1 auto;
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .02em;
color: var(--cd-text-3);
}
.cd-vergleich__schaltzeile {
display: flex;
align-items: center;
gap: var(--cd-a3);
}
.cd-vergleich__tabs {
display: none;
gap: 2px;
padding: 4px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: 999px;
}
.cd-vergleich--bereit .cd-vergleich__tabs {
display: inline-flex;
}
.cd-vergleich__tab {
appearance: none;
border: 0;
background: transparent;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .04em;
padding: 7px 16px;
border-radius: 999px;
color: var(--cd-text-3);
cursor: pointer;
white-space: nowrap;
transition: color var(--cd-zeit) ease, background var(--cd-zeit) ease;
}
.cd-vergleich__tab:hover {
color: var(--cd-tinte);
}
.cd-vergleich__tab[aria-selected="true"] {
background: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-vergleich__tab[aria-selected="true"]:hover {
color: var(--cd-weiss);
}
.cd-vergleich__schaltzeile .cd-vergleich__tab {
font-size: var(--cd-gr-text);
padding: 10px 24px;
}
.cd-vergleich__buehne {
position: relative;
}
.cd-vergleich__panel {
margin: 0;
position: relative;
}
.cd-vergleich__panel:not([hidden]) + .cd-vergleich__panel:not([hidden]) {
border-block-start: 1px solid var(--cd-linie);
}
.cd-vergleich__bild {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
background: var(--cd-flaeche-2);
}
.cd-vergleich__fahne {
position: absolute;
inset-block-start: var(--cd-a3);
inset-inline-start: var(--cd-a3);
z-index: 1;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .08em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 999px;
backdrop-filter: blur(3px);
}
.cd-vergleich__fahne--vorher {
background: rgba(13, 26, 33, .72);
color: #fff;
}
.cd-vergleich__fahne--heute {
background: var(--cd-rot);
color: #fff;
}
.cd-vergleich--bereit .cd-vergleich__fahne {
display: none;
}
.cd-vergleich__notiz {
display: flex;
align-items: center;
gap: var(--cd-a3);
min-block-size: 56px;
color: var(--cd-text-2);
font-size: var(--cd-gr-klein);
line-height: 1.5;
}
.cd-vergleich__notiz > span {
display: block;
max-inline-size: 90ch;
}
.cd-vergleich__notiz::before {
content: "";
flex: 0 0 auto;
inline-size: 3px;
block-size: 1.15em;
border-radius: 2px;
background: var(--cd-linie-3);
}
.cd-vergleich__notiz--heute::before {
background: var(--cd-rot);
}
.cd-vergleich__unterschrift {
margin-block-start: var(--cd-a4);
color: var(--cd-text-3);
font-size: var(--cd-gr-klein);
max-inline-size: 92ch;
}
.cd-auf-dunkel .cd-vergleich__beitext,
.cd-auf-dunkel .cd-vergleich__unterschrift {
color: var(--cd-text-auf-dunkel);
}
.cd-auf-rot .cd-vergleich__beitext,
.cd-auf-rot .cd-vergleich__unterschrift {
color: var(--cd-weiss);
}
.cd-auf-rot .cd-vergleich__adresse {
color: var(--cd-weiss);
}
.cd-vergleich__halt {
display: none;
flex: 0 0 auto;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--cd-tinte);
color: var(--cd-weiss);
cursor: pointer;
transition: background var(--cd-zeit) ease;
}
.cd-vergleich--bereit .cd-vergleich__halt {
display: inline-flex;
}
.cd-vergleich__halt:hover {
background: var(--cd-dunkel-3);
}
.cd-vergleich__haltezeichen {
position: relative;
inline-size: 12px;
block-size: 13px;
}
.cd-vergleich__haltezeichen::before,
.cd-vergleich__haltezeichen::after {
content: "";
position: absolute;
inset-block: 0;
inline-size: 4px;
background: currentColor;
}
.cd-vergleich__haltezeichen::before { inset-inline-start: 0; }
.cd-vergleich__haltezeichen::after { inset-inline-end: 0; }
.cd-vergleich__halt[aria-pressed="true"] .cd-vergleich__haltezeichen::before {
inline-size: 0;
inset-block: 0;
border-block: 6.5px solid transparent;
border-inline-start: 11px solid currentColor;
}
.cd-vergleich__halt[aria-pressed="true"] .cd-vergleich__haltezeichen::after {
display: none;
}
[data-vgl-layout="fenster"] .cd-vergleich__rahmen {
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
overflow: hidden;
background: var(--cd-weiss);
box-shadow: var(--cd-schatten-karte);
}
[data-vgl-layout="fenster"] .cd-vergleich__leiste {
min-block-size: 52px;
padding: var(--cd-a2) var(--cd-a3) var(--cd-a2) var(--cd-a4);
background: var(--cd-flaeche-2);
border-block-end: 1px solid var(--cd-linie);
}
[data-vgl-layout="fenster"] .cd-vergleich__adresse {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: 999px;
padding: 4px 14px;
}
[data-vgl-layout="fenster"] .cd-vergleich__tabs {
margin-inline-start: auto;
padding: 3px;
}
[data-vgl-layout="fenster"] .cd-vergleich__halt {
inline-size: 44px;
block-size: 44px;
}
[data-vgl-layout="fenster"] .cd-vergleich__notiz {
padding: var(--cd-a3) var(--cd-a4);
border-block-start: 1px solid var(--cd-linie);
}
.cd-auf-dunkel[data-vgl-layout="fenster"] .cd-vergleich__rahmen {
border-color: var(--cd-linie-auf-dunkel);
box-shadow: var(--cd-schatten-mega);
}
[data-vgl-layout="abgesetzt"] .cd-vergleich__schaltzeile {
margin-block-end: var(--cd-a4);
}
[data-vgl-layout="abgesetzt"] .cd-vergleich__rahmen {
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
overflow: hidden;
background: var(--cd-weiss);
box-shadow: var(--cd-schatten-karte);
}
[data-vgl-layout="abgesetzt"] .cd-vergleich__leiste {
min-block-size: 42px;
padding: var(--cd-a2) var(--cd-a4);
background: var(--cd-flaeche-2);
border-block-end: 1px solid var(--cd-linie);
}
[data-vgl-layout="abgesetzt"] .cd-vergleich__adresse {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: 999px;
padding: 4px 14px;
}
[data-vgl-layout="abgesetzt"] .cd-vergleich__notiz {
padding: var(--cd-a3) var(--cd-a4);
border-block-start: 1px solid var(--cd-linie);
}
.cd-auf-dunkel[data-vgl-layout="abgesetzt"] .cd-vergleich__rahmen {
border-color: var(--cd-linie-auf-dunkel);
box-shadow: var(--cd-schatten-mega);
}
.cd-auf-dunkel[data-vgl-layout="abgesetzt"] .cd-vergleich__halt {
background: var(--cd-dunkel-3);
}
[data-vgl-layout="oben"] .cd-vergleich__schaltzeile {
margin-block-end: var(--cd-a4);
}
[data-vgl-layout="oben"] .cd-vergleich__ampel {
display: none;
}
[data-vgl-layout="oben"] .cd-vergleich__leiste {
justify-content: flex-end;
margin-block-end: var(--cd-a2);
}
[data-vgl-layout="oben"] .cd-vergleich__buehne {
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
overflow: hidden;
background: var(--cd-weiss);
box-shadow: var(--cd-schatten-karte);
}
[data-vgl-layout="oben"] .cd-vergleich__notiz {
padding: var(--cd-a3) var(--cd-a4);
border-block-start: 1px solid var(--cd-linie);
}
.cd-auf-dunkel[data-vgl-layout="oben"] .cd-vergleich__buehne {
border-color: var(--cd-linie-auf-dunkel);
box-shadow: var(--cd-schatten-mega);
}
.cd-auf-dunkel[data-vgl-layout="oben"] .cd-vergleich__adresse {
color: var(--cd-text-auf-dunkel);
}
.cd-auf-dunkel[data-vgl-layout="oben"] .cd-vergleich__halt {
background: var(--cd-dunkel-3);
}
[data-vgl-layout="auflage"] .cd-vergleich__box {
position: relative;
}
[data-vgl-layout="auflage"] .cd-vergleich__schaltzeile {
position: absolute;
inset-block-start: var(--cd-a5);
inset-inline: 0;
z-index: 2;
justify-content: center;
pointer-events: none;
}
[data-vgl-layout="auflage"] .cd-vergleich__tabs,
[data-vgl-layout="auflage"] .cd-vergleich__halt {
pointer-events: auto;
}
[data-vgl-layout="auflage"] .cd-vergleich__leiste {
display: none;
}
[data-vgl-layout="auflage"] .cd-vergleich__tabs,
[data-vgl-layout="auflage"] .cd-vergleich__halt {
box-shadow: 0 6px 20px -8px rgba(13, 26, 33, .55);
}
[data-vgl-layout="auflage"] .cd-vergleich__buehne {
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
overflow: hidden;
background: var(--cd-weiss);
box-shadow: var(--cd-schatten-karte);
}
[data-vgl-layout="auflage"] .cd-vergleich__notiz {
padding: var(--cd-a3) var(--cd-a4);
border-block-start: 1px solid var(--cd-linie);
}
[data-vgl-layout="auflage"] .cd-vergleich__fahne {
inset-block-start: auto;
inset-block-end: var(--cd-a3);
}
.cd-auf-dunkel[data-vgl-layout="auflage"] .cd-vergleich__buehne {
border-color: var(--cd-linie-auf-dunkel);
box-shadow: var(--cd-schatten-mega);
}
@media (max-width: 700px) {
[data-vgl-layout="fenster"] .cd-vergleich__leiste {
flex-wrap: wrap;
gap: var(--cd-a2);
}
[data-vgl-layout="fenster"] .cd-vergleich__adresse {
flex: 1 1 auto;
}
[data-vgl-layout="fenster"] .cd-vergleich--bereit .cd-vergleich__tabs {
display: flex;
inline-size: 100%;
margin-inline-start: 0;
}
[data-vgl-layout="fenster"] .cd-vergleich__tab {
flex: 1;
text-align: center;
padding-block: 9px;
}
[data-vgl-layout="abgesetzt"] .cd-vergleich--bereit .cd-vergleich__tabs,
[data-vgl-layout="oben"] .cd-vergleich--bereit .cd-vergleich__tabs {
flex: 1 1 auto;
}
[data-vgl-layout="abgesetzt"] .cd-vergleich__tab,
[data-vgl-layout="oben"] .cd-vergleich__tab {
flex: 1;
text-align: center;
padding-inline: 12px;
}
[data-vgl-layout="oben"] .cd-vergleich__leiste {
display: none;
}
[data-vgl-layout="auflage"] .cd-vergleich__schaltzeile {
position: static;
margin-block-end: var(--cd-a4);
pointer-events: auto;
justify-content: flex-start;
}
[data-vgl-layout="auflage"] .cd-vergleich--bereit .cd-vergleich__tabs {
flex: 1 1 auto;
}
[data-vgl-layout="auflage"] .cd-vergleich__tab {
flex: 1;
text-align: center;
padding-inline: 12px;
}
[data-vgl-layout="auflage"] .cd-vergleich__fahne {
inset-block-start: var(--cd-a3);
inset-block-end: auto;
}
.cd-vergleich__notiz {
min-block-size: 74px;
padding: var(--cd-a3);
}
}
/* bahnen/cd_kontakt.css */
.cd-kontakt__raster {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: var(--cd-a8);
align-items: start;
}
.cd-kontakt--kompakt .cd-kontakt__raster {
grid-template-columns: minmax(0, 1fr);
max-inline-size: 46rem;
}
.cd-kontakt__saeule {
max-inline-size: 55rem;
}
.cd-kontakt__spalte,
.cd-kontakt__panel {
min-inline-size: 0;
}
.cd-kontakt__kopf {
margin-block-end: var(--cd-a6);
}
.cd-kontakt__titel {
margin-block-start: var(--cd-a3);
}
.cd-kontakt__unterzeile {
margin-block-start: var(--cd-a3);
font-size: var(--cd-gr-gross);
color: var(--cd-text-2);
}
.cd-kontakt__beitext {
margin-block-start: var(--cd-a4);
font-size: var(--cd-gr-gross);
line-height: var(--cd-zeile-text);
color: var(--cd-text-2);
}
.cd-kontakt__beitext ul {
display: grid;
gap: 2px;
margin-block-start: var(--cd-a5);
padding: 0;
list-style: none;
background: var(--cd-linie-2);
border: 1px solid var(--cd-linie-2);
}
.cd-kontakt__beitext li {
display: flex;
gap: var(--cd-a3);
padding: var(--cd-a4) var(--cd-a5);
background: var(--cd-weiss);
font-size: var(--cd-gr-text);
}
.cd-kontakt__beitext li::before {
content: "\2192";
flex: 0 0 auto;
font-family: var(--cd-schrift-mono);
color: var(--cd-rot);
}
.cd-kontakt__daten {
margin-block-start: var(--cd-a6);
}
.cd-kontakt__telefon {
display: flex;
align-items: center;
gap: var(--cd-a3);
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h3);
font-weight: 700;
letter-spacing: -.028em;
line-height: var(--cd-zeile-eng);
color: var(--cd-tinte);
}
.cd-kontakt__telefon:hover { color: var(--cd-rot); }
.cd-kontakt__telefon .cd-symbol { color: var(--cd-rot); }
.cd-kontakt__telefon--gross {
margin-block-start: var(--cd-a6);
font-size: var(--cd-gr-h2);
}
.cd-kontakt__zeiten {
display: flex;
align-items: center;
gap: var(--cd-a3);
margin-block-start: var(--cd-a3);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-kontakt__punkt {
position: relative;
flex: 0 0 auto;
inline-size: 8px;
block-size: 8px;
color: var(--cd-rot);
}
.cd-kontakt__punkt::before,
.cd-kontakt__punkt::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: currentColor;
}
.cd-kontakt__punkt::after { animation: cdKontaktPuls 2.4s ease-out 2; }
.cd-kontakt__wege {
display: grid;
gap: 1px;
margin-block-start: var(--cd-a6);
background: var(--cd-linie-2);
border: 1px solid var(--cd-linie-2);
}
.cd-kontakt__weg {
display: flex;
align-items: center;
gap: var(--cd-a3);
padding: var(--cd-a4) var(--cd-a5);
background: var(--cd-weiss);
color: var(--cd-dunkel);
}
.cd-kontakt__weg:hover {
background: var(--cd-flaeche-1);
color: var(--cd-rot);
}
.cd-kontakt__weg .cd-symbol { color: var(--cd-rot); }
.cd-kontakt__anschrift {
margin-block-start: var(--cd-a6);
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-kontakt__spaltentitel {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--cd-text-3);
margin-block-end: var(--cd-a3);
}
.cd-kontakt__anschrift p {
font-size: var(--cd-gr-gross);
line-height: var(--cd-zeile-text);
color: var(--cd-dunkel);
}
.cd-kontakt__illu {
display: block;
inline-size: 100%;
max-inline-size: 28rem;
block-size: auto;
margin-block-start: var(--cd-a7);
margin-inline: auto;
}
.cd-kontakt__panel {
padding: var(--cd-a7) var(--cd-a6);
background: var(--cd-flaeche-2);
border: 1px solid var(--cd-linie-2);
}
.cd-kontakt--schritte .cd-kontakt__panel {
padding: 0;
background: none;
border: 0;
}
.cd-kontakt__reihe {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--cd-a4);
}
.cd-kontakt__feld--breit {
margin-block-start: var(--cd-a4);
}
.cd-kontakt__textfeld {
min-block-size: 8rem;
line-height: var(--cd-zeile-text);
resize: vertical;
}
.cd-kontakt__panel .cd-feld__eingabe:focus-visible {
border-color: var(--cd-rot);
}
.cd-kontakt__gruppe {
margin-block-start: var(--cd-a5);
padding: 0;
border: 0;
}
.cd-kontakt__chips {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a2);
margin-block-start: var(--cd-a3);
}
.cd-kontakt__chip {
position: relative;
display: inline-flex;
cursor: pointer;
}
.cd-kontakt__chipfeld {
position: absolute;
inline-size: 1px;
block-size: 1px;
min-inline-size: 0;
min-block-size: 0;
margin: 0;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.cd-kontakt__chiptext {
background: var(--cd-weiss);
transition: background var(--cd-zeit) ease,
border-color var(--cd-zeit) ease,
color var(--cd-zeit) ease;
min-block-size: var(--cd-zielgroesse, 24px);
}
.cd-kontakt__chip:hover .cd-kontakt__chiptext {
border-color: var(--cd-dunkel);
color: var(--cd-dunkel);
}
.cd-kontakt__chipfeld:checked + .cd-kontakt__chiptext {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
}
.cd-kontakt__chipfeld:focus-visible + .cd-kontakt__chiptext {
outline: 3px solid var(--cd-rot);
outline-offset: 2px;
}
.cd-kontakt__gruppe [name="budget"] + .cd-kontakt__chiptext {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
}
.cd-kontakt__zustimmung {
margin-block-start: var(--cd-a5);
}
.cd-kontakt__haken-label {
display: flex;
align-items: flex-start;
gap: var(--cd-a3);
padding-block: var(--cd-a2);
cursor: pointer;
font-size: var(--cd-gr-klein);
line-height: var(--cd-zeile-text);
color: var(--cd-text-2);
}
.cd-kontakt__haken-feld {
flex: 0 0 auto;
inline-size: 18px;
block-size: 18px;
min-inline-size: 18px;
min-block-size: 18px;
margin-block-start: 3px;
accent-color: var(--cd-rot);
}
.cd-kontakt__datenschutzlink {
text-decoration: underline;
text-underline-offset: .18em;
}
.cd-kontakt__fuss {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a5);
margin-block-start: var(--cd-a6);
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-kontakt__senden {
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-gross);
font-weight: 700;
padding: var(--cd-a4) var(--cd-a6);
}
.cd-kontakt__antwortzeit {
font-size: var(--cd-gr-klein);
line-height: var(--cd-zeile-text);
color: var(--cd-text-3);
}
.cd-bahn.cd-kontakt--portal {
padding-block-end: var(--cd-a8);
}
.cd-kontakt--portal .cd-kontakt__raster {
max-inline-size: 58rem;
}
.cd-bahn.cd-portalkopfbahn:has(+ .cd-kontakt--portal) {
padding-block-end: var(--cd-a7);
}
@media (min-width: 1101px) {
.cd-kontakt--portal .cd-kontakt__raster {
max-inline-size: var(--cd-inhalt);
}
}
.cd-kontakt--portal .cd-kontakt__panel {
counter-reset: cd-schritt;
padding: 0;
overflow: hidden;
background: var(--cd-weiss);
border-color: var(--cd-linie);
border-radius: var(--cd-r-gross);
box-shadow: var(--cd-schatten-karte);
}
.cd-kontakt--portal .cd-kontakt__kopf {
margin-block-end: 0;
}
.cd-kontakt--portal .cd-kontakt__formulargruppe {
min-inline-size: 0;
margin: 0;
padding: var(--cd-a6);
border: 0;
counter-increment: cd-schritt;
}
.cd-kontakt--portal .cd-kontakt__gruppentitel {
display: grid;
gap: var(--cd-a1);
inline-size: calc(100% + var(--cd-a6) * 2);
margin: 0 calc(var(--cd-a6) * -1);
padding: var(--cd-a6);
padding-block-end: var(--cd-a2);
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h4);
font-weight: 700;
letter-spacing: -.018em;
line-height: var(--cd-zeile-eng);
color: var(--cd-tinte);
}
.cd-kontakt--portal .cd-kontakt__formulargruppe + .cd-kontakt__formulargruppe .cd-kontakt__gruppentitel {
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-kontakt--portal .cd-kontakt__gruppentitel::before {
content: counter(cd-schritt, decimal-leading-zero) / "";
margin-block-end: var(--cd-a2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 400;
letter-spacing: .16em;
color: var(--cd-rot);
}
.cd-kontakt--portal .cd-kontakt__gruppenhinweis {
font-family: var(--cd-schrift-text);
font-size: var(--cd-gr-klein);
font-weight: 400;
letter-spacing: 0;
line-height: var(--cd-zeile-text);
color: var(--cd-text-3);
}
.cd-kontakt--portal .cd-kontakt__reihe {
gap: var(--cd-a5);
}
.cd-kontakt--portal .cd-kontakt__feld--breit,
.cd-kontakt--portal .cd-kontakt__gruppe:first-of-type {
margin-block-start: 0;
}
.cd-kontakt--portal .cd-feld {
gap: var(--cd-a2);
}
.cd-kontakt--portal .cd-feld__label {
color: var(--cd-tinte);
}
.cd-kontakt--portal .cd-feld__eingabe,
.cd-kontakt--portal .cd-rechnung__feld {
min-block-size: 50px;
background: var(--cd-flaeche-1);
border-color: var(--cd-linie-3);
transition: background var(--cd-zeit) ease,
border-color var(--cd-zeit) ease,
box-shadow var(--cd-zeit) ease;
}
.cd-kontakt--portal .cd-feld__eingabe:hover,
.cd-kontakt--portal .cd-rechnung__feld:hover {
border-color: var(--cd-text-3);
}
.cd-kontakt--portal .cd-feld__eingabe:focus-visible,
.cd-kontakt--portal .cd-rechnung__feld:focus-visible {
background: var(--cd-weiss);
border-color: var(--cd-rot);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-rot) 14%, transparent);
}
.cd-kontakt--portal .cd-kontakt__textfeld {
min-block-size: 11rem;
}
.cd-kontakt--portal .cd-kontakt__zustimmung {
margin-block-start: 0;
padding: var(--cd-a5);
background: var(--cd-flaeche-1);
border: 1px solid var(--cd-linie-2);
border-radius: var(--cd-r-karte);
}
.cd-kontakt--portal .cd-kontakt__zustimmung {
position: relative;
overflow: hidden;
}
.cd-kontakt--portal .cd-kontakt__zustimmung::before {
content: '';
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: 3px;
background: var(--cd-rot);
transition: background var(--cd-zeit) ease;
}
.cd-kontakt--portal .cd-kontakt__zustimmung:has(.cd-kontakt__haken-feld:checked)::before {
background: var(--cd-text-schwach);
}
.cd-kontakt--portal .cd-rechnung {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--cd-a2);
max-inline-size: none;
margin-block-start: var(--cd-a5);
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-kontakt--portal .cd-rechnung__label {
grid-column: 1;
grid-row: 1;
font-size: var(--cd-gr-text);
}
.cd-kontakt--portal .cd-rechnung__feld {
grid-column: 1;
grid-row: 2;
justify-self: start;
inline-size: 7rem;
text-align: center;
font-variant-numeric: tabular-nums lining-nums;
}
.cd-kontakt--portal .cd-rechnung__hinweis {
grid-column: 1;
grid-row: 3;
margin-block-start: var(--cd-a1);
}
.cd-kontakt--portal .cd-kontakt__fuss {
flex-direction: row-reverse;
justify-content: space-between;
margin-block-start: 0;
padding: var(--cd-a5) var(--cd-a6);
background: var(--cd-flaeche-2);
border-block-start-color: var(--cd-linie);
}
.cd-kontakt--portal .cd-kontakt__senden {
min-inline-size: 14rem;
justify-content: center;
}
.cd-kontakt__danke {
text-align: center;
padding-block: var(--cd-a6);
}
.cd-kontakt__danke[hidden] { display: none; }
.cd-kontakt__haken {
display: flex;
align-items: center;
justify-content: center;
inline-size: 54px;
block-size: 54px;
margin-inline: auto;
margin-block-end: var(--cd-a5);
border-radius: 50%;
background: var(--cd-rot);
color: var(--cd-weiss);
font-size: var(--cd-gr-h3);
}
.cd-kontakt__danketitel {
font-size: var(--cd-gr-h3);
}
.cd-kontakt__danketext {
margin-block-start: var(--cd-a3);
margin-inline: auto;
font-size: var(--cd-gr-gross);
line-height: var(--cd-zeile-text);
color: var(--cd-text-2);
}
.cd-kontakt__danke .cd-knopf {
margin-block-start: var(--cd-a6);
}
.cd-kontakt--notfall {
border-block-start: 4px solid var(--cd-rot);
}
.cd-kontakt--karte {
border-block-start: 4px solid var(--cd-rot);
}
.cd-kontakt--karte .cd-kontakt__raster {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cd-kontakt--karte .cd-kontakt__panel {
background: var(--cd-weiss);
border: 0;
border-block-start: 4px solid var(--cd-rot);
color: var(--cd-tinte);
box-shadow: var(--cd-schatten-mega);
}
.cd-kontakt--karte .cd-kontakt__panel h1,
.cd-kontakt--karte .cd-kontakt__panel h2,
.cd-kontakt--karte .cd-kontakt__panel h3,
.cd-kontakt--karte .cd-kontakt__panel h4 {
color: var(--cd-tinte);
}
.cd-kontakt--karte .cd-kontakt__panel a {
color: var(--cd-rot);
}
.cd-kontakt--karte .cd-kontakt__panel .cd-kicker {
color: var(--cd-rot);
}
.cd-kontakt--karte .cd-kontakt__panel .cd-knopf--linie {
border-color: var(--cd-linie-2);
color: var(--cd-tinte);
}
.cd-kontakt--karte .cd-kontakt__panel .cd-knopf--linie:hover {
border-color: var(--cd-rot);
color: var(--cd-rot);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__beitext {
color: var(--cd-text-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__beitext ul {
background: var(--cd-dunkel-3);
border-color: var(--cd-dunkel-3);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__beitext li {
background: var(--cd-dunkel);
color: var(--cd-text-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__beitext li::before {
color: var(--cd-rot-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__telefon {
color: var(--cd-weiss);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__telefon:hover {
color: var(--cd-rot-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__telefon .cd-symbol,
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__punkt {
color: var(--cd-rot-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__zeiten,
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__spaltentitel {
color: var(--cd-text-auf-dunkel-2);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__wege {
background: var(--cd-dunkel-3);
border-color: var(--cd-dunkel-3);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__weg {
background: var(--cd-dunkel);
color: var(--cd-weiss);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__weg:hover {
background: var(--cd-dunkel-2);
color: var(--cd-rot-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__weg .cd-symbol {
color: var(--cd-rot-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__anschrift {
border-block-start-color: var(--cd-linie-auf-dunkel);
}
.cd-kontakt--karte .cd-kontakt__spalte .cd-kontakt__anschrift p {
color: var(--cd-text-auf-dunkel);
}
.cd-kontakt__schrittleiste {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--cd-a1);
margin-block-end: var(--cd-a7);
}
.cd-kontakt__marke {
padding-block-start: var(--cd-a3);
border-block-start: 3px solid var(--cd-linie);
}
.cd-kontakt__marke:first-child {
border-block-start-color: var(--cd-rot);
}
.cd-kontakt__markentitel {
display: block;
margin-block-start: var(--cd-a1);
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-gross);
font-weight: 600;
letter-spacing: -.018em;
color: var(--cd-tinte);
}
.cd-kontakt__schritt {
margin: 0;
padding: 0;
border: 0;
}
.cd-kontakt__schritt + .cd-kontakt__schritt {
margin-block-start: var(--cd-a7);
}
.cd-kontakt--modal {
inline-size: min(100% - var(--cd-a7), 42rem);
max-block-size: 88dvh;
padding: 0;
background: var(--cd-weiss);
color: var(--cd-tinte);
border: 0;
box-shadow: var(--cd-schatten-mega);
}
.cd-kontakt--modal::backdrop {
background: color-mix(in srgb, var(--cd-tinte) 72%, transparent);
}
.cd-kontakt__dialogkopf {
position: sticky;
inset-block-start: 0;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--cd-a5);
padding: var(--cd-a5) var(--cd-a6);
background: var(--cd-tinte);
color: var(--cd-weiss);
}
.cd-kontakt__dialogkopf .cd-kicker { color: var(--cd-text-auf-dunkel); }
.cd-kontakt__dialogkopf .cd-kontakt__titel {
margin-block-start: var(--cd-a2);
color: var(--cd-weiss);
font-size: var(--cd-gr-h3);
}
.cd-kontakt__dialogschliessen { margin: 0; }
.cd-kontakt__schliessen {
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--cd-zielgroesse, 24px);
block-size: var(--cd-zielgroesse, 24px);
padding: 0;
background: none;
border: 0;
border-radius: var(--cd-r-feld);
color: var(--cd-text-auf-dunkel);
font-size: var(--cd-gr-h3);
line-height: 1;
cursor: pointer;
}
.cd-kontakt__schliessen:hover { color: var(--cd-weiss); }
.cd-kontakt__schliessen:focus-visible { outline-color: var(--cd-weiss); }
.cd-kontakt__dialoginhalt {
padding: var(--cd-a6);
overflow-y: auto;
}
@keyframes cdKontaktPuls {
0%   { transform: scale(1);   opacity: .7; }
70%  { transform: scale(2.6); opacity: 0; }
100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.cd-kontakt__punkt::after { animation: none; opacity: .35; }
.cd-kontakt__chiptext { transition: none; }
}
@media (max-width: 1000px) {
.cd-kontakt__raster {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a7);
}
.cd-kontakt--karte .cd-kontakt__raster {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 700px) {
.cd-kontakt__reihe {
grid-template-columns: minmax(0, 1fr);
}
.cd-kontakt__panel {
padding: var(--cd-a5) var(--cd-a4);
}
.cd-kontakt__schrittleiste {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a3);
}
.cd-kontakt__telefon { font-size: var(--cd-gr-h4); }
.cd-kontakt__telefon--gross { font-size: var(--cd-gr-h3); }
.cd-kontakt__fuss {
align-items: stretch;
gap: var(--cd-a4);
}
.cd-kontakt__senden { justify-content: center; }
.cd-bahn.cd-kontakt--portal {
padding-block-end: var(--cd-a7);
}
.cd-kontakt--portal .cd-kontakt__panel {
border-radius: var(--cd-r-karte);
}
.cd-kontakt--portal .cd-kontakt__formulargruppe {
padding: var(--cd-a5) var(--cd-a4);
}
.cd-kontakt--portal .cd-kontakt__gruppentitel {
inline-size: calc(100% + var(--cd-a4) * 2);
margin-inline: calc(var(--cd-a4) * -1);
padding: var(--cd-a5) var(--cd-a4) var(--cd-a2);
}
.cd-kontakt--portal .cd-rechnung {
grid-template-columns: minmax(0, 1fr);
}
.cd-kontakt--portal .cd-rechnung__feld,
.cd-kontakt--portal .cd-rechnung__hinweis {
grid-column: 1;
}
.cd-kontakt--portal .cd-rechnung__feld {
grid-row: auto;
}
.cd-kontakt--portal .cd-kontakt__fuss {
flex-direction: column;
padding: var(--cd-a4);
}
.cd-kontakt--portal .cd-kontakt__senden {
inline-size: 100%;
min-inline-size: 0;
}
}
.cd-kontakt__meldung {
margin: 0 0 var(--cd-a5);
padding: 12px 16px;
border-inline-start: 4px solid currentColor;
border-radius: var(--cd-r-feld);
font-size: var(--cd-gr-klein);
line-height: 1.5;
}
.cd-kontakt__meldung--schlecht {
color: var(--cd-rot-tief);
background: color-mix(in srgb, var(--cd-rot) 7%, transparent);
}
.cd-kontakt__meldung--gut {
color: var(--cd-tinte);
background: var(--cd-flaeche-2);
}
.cd-auf-dunkel .cd-kontakt__meldung--schlecht {
color: var(--cd-rot-auf-dunkel);
background: color-mix(in srgb, var(--cd-rot-auf-dunkel) 14%, transparent);
}
.cd-auf-dunkel .cd-kontakt__meldung--gut {
color: var(--cd-text-auf-dunkel);
background: var(--cd-dunkel-2);
}
.cd-kontakt__danke:focus { outline: none; }
.cd-kontakt__danke:focus-visible {
outline: 3px solid var(--cd-rot);
outline-offset: 4px;
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel {
color: var(--cd-tinte);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel :is(h1, h2, h3, h4) {
color: var(--cd-tinte);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel a {
color: var(--cd-rot);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-kicker {
color: var(--cd-rot);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-nummer {
color: var(--cd-text-3);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-kontakt__haken-label span,
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-kontakt__antwortzeit,
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-kontakt__unterzeile {
color: var(--cd-text-2);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-knopf--linie {
border-color: var(--cd-linie-2);
color: var(--cd-tinte);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-knopf--linie:hover {
border-color: var(--cd-rot);
color: var(--cd-rot);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel :where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline-color: var(--cd-rot);
}
.cd-kontakt--schritte:is(.cd-auf-dunkel, .cd-auf-rot) .cd-kontakt__haken-label {
color: var(--cd-text-auf-dunkel);
}
.cd-kontakt--schritte:is(.cd-auf-dunkel, .cd-auf-rot) .cd-kontakt__haken-feld {
accent-color: var(--cd-rot-auf-dunkel);
outline: 1px solid var(--cd-text-auf-dunkel);
outline-offset: 0;
}
.cd-kontakt--schritte:is(.cd-auf-dunkel, .cd-auf-rot) :is(.cd-kontakt__antwortzeit, .cd-kontakt__unterzeile) {
color: var(--cd-text-auf-dunkel-2);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-rechnung__label {
color: var(--cd-tinte);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-rechnung__hinweis {
color: var(--cd-text-2);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-abzeichen--dunkel {
background: var(--cd-dunkel);
color: var(--cd-weiss);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-abzeichen--linie {
color: var(--cd-rot);
}
.cd-kontakt:is(.cd-auf-dunkel, .cd-auf-rot):not(.cd-kontakt--schritte) .cd-kontakt__panel .cd-feld__fehler {
color: var(--cd-rot);
}
.cd-kontakt:is(.cd-auf-getoent, .cd-auf-kopfton) .cd-kontakt__panel {
background: var(--cd-weiss);
border-color: var(--cd-linie-3);
box-shadow: var(--cd-schatten-karte);
}
.cd-kontakt--flaeche .cd-kontakt__formular {
padding: clamp(24px, 3.4vw, 44px);
border-radius: var(--cd-r-karte);
}
.cd-kontakt--flaeche-hell .cd-kontakt__formular {
background: var(--cd-flaeche-1);
}
.cd-kontakt--flaeche-weiss .cd-kontakt__formular {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie-3);
box-shadow: var(--cd-schatten-karte);
}
.cd-kontakt--flaeche-umrandet .cd-kontakt__formular {
border: 1px solid var(--cd-linie-3);
}
/* bahnen/cd_fallstudie.css */
.cd-fallstudie__raster {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a8);
align-items: start;
}
.cd-fallstudie--mit-karte .cd-fallstudie__raster {
grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
}
.cd-fallstudie__haupt,
.cd-fallstudie__seite {
min-inline-size: 0;
}
.cd-fallstudie__titel {
margin-block-start: var(--cd-a3);
}
.cd-fallstudie__unterzeile {
margin-block-start: var(--cd-a3);
font-size: var(--cd-gr-gross);
color: var(--cd-text-2);
}
.cd-fallstudie__kapitel {
display: grid;
gap: var(--cd-a7);
margin-block-start: var(--cd-a7);
}
.cd-fallstudie__kapitelpunkt {
min-inline-size: 0;
}
.cd-fallstudie__kapiteltitel {
margin-block-start: var(--cd-a3);
font-size: var(--cd-gr-h2);
font-weight: 700;
letter-spacing: -.026em;
}
.cd-fallstudie__kapiteltext {
margin-block-start: var(--cd-a4);
font-size: var(--cd-gr-gross);
line-height: var(--cd-zeile-text);
color: var(--cd-text-2);
}
.cd-fallstudie__leistungen {
margin-block-start: var(--cd-a8);
padding-block-start: var(--cd-a6);
border-block-start: 1px solid var(--cd-linie-2);
}
.cd-fallstudie__leistungstitel {
font-weight: 500;
margin-block-end: var(--cd-a5);
}
.cd-fallstudie__leistungsliste {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--cd-linie-2);
border: 1px solid var(--cd-linie-2);
}
.cd-fallstudie__leistung {
display: flex;
gap: var(--cd-a3);
padding: var(--cd-a4) var(--cd-a5);
background: var(--cd-weiss);
font-size: var(--cd-gr-klein);
line-height: var(--cd-zeile-text);
color: var(--cd-dunkel);
}
.cd-fallstudie__leistung::before {
content: "\2192";
flex: 0 0 auto;
font-family: var(--cd-schrift-mono);
color: var(--cd-rot);
}
.cd-fallstudie__seite {
position: sticky;
inset-block-start: calc(var(--cd-kopf-gesamt) + var(--cd-a5));
}
.cd-fallstudie__fakten {
border: 1px solid var(--cd-linie-2);
}
.cd-fallstudie__faktentitel {
padding: var(--cd-a5) var(--cd-a5);
background: var(--cd-tinte);
color: var(--cd-weiss);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
}
.cd-fallstudie__marke {
display: flex;
align-items: center;
justify-content: center;
min-block-size: 96px;
padding: var(--cd-a5);
background: var(--cd-weiss);
border-block-end: 1px solid var(--cd-linie-2);
}
.cd-fallstudie__logo {
display: block;
inline-size: auto;
max-inline-size: 100%;
block-size: 52px;
object-fit: contain;
}
.cd-fallstudie__wortmarke {
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h3);
font-weight: 700;
letter-spacing: -.03em;
color: var(--cd-dunkel);
}
.cd-fallstudie__eckdaten {
display: grid;
gap: 1px;
background: var(--cd-linie-2);
}
.cd-fallstudie__eckdatum {
padding: var(--cd-a4) var(--cd-a5);
background: var(--cd-weiss);
}
.cd-fallstudie__eckdatum dt {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-fallstudie__eckdatum dd {
margin: 0;
margin-block-start: var(--cd-a1);
font-size: var(--cd-gr-text);
line-height: var(--cd-zeile-text);
color: var(--cd-dunkel);
}
.cd-fallstudie__website {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a4);
margin-block-start: 1px;
padding: var(--cd-a4) var(--cd-a5);
background: var(--cd-weiss);
border-block-start: 1px solid var(--cd-linie-2);
color: var(--cd-dunkel);
transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-fallstudie__website:hover {
background: var(--cd-flaeche-1);
color: var(--cd-rot);
}
.cd-fallstudie__webadresse {
display: block;
margin-block-start: var(--cd-a1);
font-size: var(--cd-gr-text);
line-height: var(--cd-zeile-text);
overflow-wrap: anywhere;
}
.cd-fallstudie__website .cd-knopf__pfeil {
flex: 0 0 auto;
color: var(--cd-rot);
}
.cd-fallstudie__box {
margin-block-start: var(--cd-a4);
padding: var(--cd-a5);
background: var(--cd-flaeche-2);
border: 1px solid var(--cd-linie-2);
}
.cd-fallstudie__boxtext {
font-size: var(--cd-gr-text);
line-height: var(--cd-zeile-text);
color: var(--cd-dunkel);
}
.cd-fallstudie__boxknopf {
display: flex;
justify-content: space-between;
inline-size: 100%;
margin-block-start: var(--cd-a4);
}
@media (max-width: 1100px) {
.cd-fallstudie--mit-karte .cd-fallstudie__raster {
grid-template-columns: minmax(0, 1fr);
gap: var(--cd-a7);
}
.cd-fallstudie__seite {
position: static;
}
}
@media (max-width: 700px) {
.cd-fallstudie__leistungsliste {
grid-template-columns: minmax(0, 1fr);
}
.cd-fallstudie__kapitel {
gap: var(--cd-a6);
}
.cd-fallstudie__kapiteltitel {
font-size: var(--cd-gr-h3);
}
}
/* bahnen/cd_felogin.css */
.cd-login {
inline-size: 100%;
max-inline-size: 30rem;
margin-block: var(--cd-a2);
padding: clamp(24px, 4vw, 40px);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
box-shadow: var(--cd-schatten-karte);
margin: 5em auto;
}
.cd-login__form {
display: grid;
gap: var(--cd-a4);
}
.cd-login__knopf {
appearance: none;
-webkit-appearance: none;
inline-size: 100%;
justify-content: center;
margin-block-start: var(--cd-a2);
}
.cd-login__aktion {
margin-block-start: var(--cd-a1);
}
.cd-feld--check {
display: flex;
align-items: center;
gap: var(--cd-a2);
}
.cd-feld--check label {
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
cursor: pointer;
}
.cd-feld--check input[type="checkbox"] {
inline-size: 18px;
block-size: 18px;
accent-color: var(--cd-rot);
cursor: pointer;
}
.cd-login__flashes { list-style: none; margin: 0 0 var(--cd-a4); padding: 0; display: grid; gap: var(--cd-a2); }
.cd-login__hinweis {
display: grid;
gap: 2px;
margin-block-end: var(--cd-a4);
padding: 12px 14px;
border-radius: var(--cd-r-feld);
font-size: var(--cd-gr-klein);
line-height: 1.5;
}
.cd-login__hinweis--fehler {
background: #FBEBEC;
border: 1px solid #F0C9CC;
color: #9E0C12;
}
.cd-login__hinweis--erfolg {
background: #EAF5EE;
border: 1px solid #BFDEC9;
color: #1B5E32;
}
.cd-login__hinweis--info {
background: var(--cd-flaeche-2);
border: 1px solid var(--cd-linie);
color: var(--cd-text-2);
}
.cd-login__hinweis strong { font-weight: 600; }
.cd-login__vergessen {
margin-block-start: var(--cd-a4);
font-size: var(--cd-gr-klein);
}
.cd-login__vergessen a { color: var(--cd-text-3); }
.cd-login__vergessen a:hover { color: var(--cd-rot); }
.cd-login--angemeldet { display: grid; gap: var(--cd-a5); }
.cd-login__status { color: var(--cd-text-2); }
.cd-login__wege {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cd-a3);
}
.cd-login__abmelden { margin: 0; }
.cd-login__abmelden .cd-knopf { appearance: none; -webkit-appearance: none; }
.cd-konto {
position: relative;
display: inline-flex;
}
.cd-oberleiste:has(.cd-konto[open]) { overflow: visible; }
.cd-konto__knopf {
display: inline-flex;
align-items: center;
gap: .5ch;
padding: 5px 12px 5px 10px;
border-radius: 999px;
background: var(--cd-rot);
color: var(--cd-weiss);
cursor: pointer;
list-style: none;
transition: background var(--cd-zeit) ease;
}
.cd-konto__knopf::-webkit-details-marker { display: none; }
.cd-konto__knopf::marker { content: ""; }
.cd-konto__knopf:hover,
.cd-konto[open] .cd-konto__knopf { background: var(--cd-rot-hell); }
.cd-konto__knopf .cd-symbol { color: var(--cd-weiss); }
.cd-konto__name { font-weight: 600; }
.cd-konto__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 18px;
block-size: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--cd-weiss);
color: var(--cd-rot);
font-family: var(--cd-schrift-text);
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
}
.cd-konto__punkt { justify-content: flex-start; }
.cd-konto__zahl {
margin-inline-start: auto;
min-inline-size: 20px;
padding: 1px 6px;
border-radius: 999px;
background: var(--cd-rot);
color: var(--cd-weiss);
font-size: 11px;
font-weight: 700;
text-align: center;
}
.cd-konto__pfeil {
inline-size: 0;
block-size: 0;
border-inline: 4px solid transparent;
border-block-start: 5px solid currentColor;
opacity: .7;
transition: transform var(--cd-zeit) ease;
}
.cd-konto[open] .cd-konto__pfeil { transform: rotate(180deg); }
.cd-konto__menue {
position: absolute;
inset-block-start: calc(100% + 8px);
inset-inline-end: 0;
z-index: var(--cd-e-mega, 160);
min-inline-size: 12rem;
display: grid;
padding: 6px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
box-shadow: var(--cd-schatten-karte);
font-family: var(--cd-schrift-text);
text-transform: none;
letter-spacing: 0;
}
.cd-konto__punkt {
display: inline-flex;
align-items: center;
gap: .6ch;
padding: 9px 12px;
border-radius: var(--cd-r-feld);
color: var(--cd-tinte);
font-size: var(--cd-gr-klein);
text-decoration: none;
}
.cd-konto__punkt .cd-symbol {
inline-size: 16px;
block-size: 16px;
color: var(--cd-text-3);
}
.cd-konto__punkt:hover { background: var(--cd-flaeche-2); }
.cd-konto__punkt--abmelden {
color: var(--cd-text-2);
margin-block-start: 5px;
padding-block-start: 13px;
border-block-start: 1px solid var(--cd-linie);
}
.cd-konto__punkt--abmelden:hover { background: #FBEBEC; color: var(--cd-rot); }
.cd-konto__punkt--abmelden:hover .cd-symbol { color: var(--cd-rot); }
.cd-modal--schmal { inline-size: min(100% - 32px, 440px); }
.cd-modal__titel {
margin: 0;
padding: 28px 32px 0;
font-size: var(--cd-gr-h3);
line-height: 1.25;
}
.cd-modal__inhalt > .frame {
margin: 0;
padding: 0;
}
.cd-modal__inhalt .cd-login {
max-inline-size: none;
margin: 0;
padding: 20px 32px 28px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.cd-modal__fussweg {
margin: 0;
padding: 16px 32px 24px;
border-block-start: 1px solid var(--cd-linie);
background: var(--cd-flaeche-2);
border-end-start-radius: var(--cd-r-karte);
border-end-end-radius: var(--cd-r-karte);
font-size: var(--cd-gr-klein);
}
.cd-modal__fussweg a { color: var(--cd-text-3); }
.cd-modal__fussweg a:hover { color: var(--cd-rot); }
@media (max-width: 600px) {
.cd-modal--schmal { inline-size: 100%; }
.cd-modal__titel { padding: 24px 20px 0; }
.cd-modal__inhalt .cd-login { padding: 16px 20px 24px; }
.cd-modal__fussweg { padding: 16px 20px 20px; border-radius: 0; }
}
/* bahnen/cd_kundenmenue.css */
.cd-kundenmenue {
background: var(--cd-flaeche-2);
border-block-end: 1px solid var(--cd-linie);
}
.cd-kundenmenue__inhalt {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--cd-a3) var(--cd-a5);
padding-block: var(--cd-a3);
}
.cd-kundenmenue__marke {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cd-text-3);
}
.cd-kundenmenue__liste {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a5);
margin: 0;
padding: 0;
list-style: none;
}
.cd-kundenmenue__icon { display: none; }
.cd-kundenmenue__text { min-inline-size: 0; }
.cd-kundenmenue__link {
display: inline-block;
padding-block: 6px;
color: var(--cd-text-2);
font-weight: 500;
text-decoration: none;
border-block-end: 2px solid transparent;
transition: color var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-kundenmenue__liste a[href] {
min-block-size: var(--cd-zielgroesse, 24px);
display: inline-flex;
align-items: center;
}
.cd-kundenmenue__link:hover { color: var(--cd-tinte); }
.cd-kundenmenue__link--aktiv {
color: var(--cd-tinte);
border-block-end-color: var(--cd-rot);
}
.cd-kundenmenue__abmelden {
margin-inline-start: auto;
display: inline-flex;
align-items: center;
gap: .5ch;
padding: 7px 14px;
border-radius: var(--cd-r-knopf);
border: 1px solid var(--cd-linie);
background: var(--cd-weiss);
color: var(--cd-text-2);
font-family: var(--cd-schrift-text);
font-size: var(--cd-gr-klein);
font-weight: 600;
text-decoration: none;
transition: border-color var(--cd-zeit) ease, color var(--cd-zeit) ease, background var(--cd-zeit) ease;
}
.cd-kundenmenue__abmelden:hover {
border-color: var(--cd-rot);
color: var(--cd-rot);
background: #FBEBEC;
}
.cd-kundenmenue__abmelden .cd-symbol { inline-size: 15px; block-size: 15px; }
@media (max-width: 600px) {
.cd-kundenmenue__abmelden { margin-inline-start: 0; }
}
[data-kundenmenue^="kasten"] .cd-kundenmenue,
[data-kundenmenue^="schiene"] .cd-kundenmenue {
background: transparent;
border-block-end: 0;
padding-block: var(--cd-a5);
}
[data-kundenmenue^="kasten"] .cd-kundenmenue__inhalt,
[data-kundenmenue^="schiene"] .cd-kundenmenue__inhalt {
align-items: center;
flex-wrap: wrap;
gap: var(--cd-a3) var(--cd-a5);
padding: var(--cd-a3) var(--cd-a5);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
box-shadow: var(--cd-schatten-karte);
inline-size: fit-content;
max-inline-size: 100%;
min-inline-size: 0;
}
[data-kundenmenue^="kasten"] .cd-kundenmenue__marke,
[data-kundenmenue^="schiene"] .cd-kundenmenue__marke { display: none; }
[data-kundenmenue^="kasten"] .cd-kundenmenue__abmelden,
[data-kundenmenue^="schiene"] .cd-kundenmenue__abmelden {
margin-inline-start: 0;
}
[data-kundenmenue="kasten-links"]  .cd-kundenmenue__inhalt { margin-inline: 0 auto; }
[data-kundenmenue="kasten-mitte"]  .cd-kundenmenue__inhalt { margin-inline: auto; }
[data-kundenmenue="kasten-rechts"] .cd-kundenmenue__inhalt { margin-inline: auto 0; }
[data-kundenmenue="kasten"] .cd-kundenmenue__inhalt,
[data-kundenmenue^="schiene"] .cd-kundenmenue__inhalt {
inline-size: auto;
}
[data-kundenmenue="kasten"] .cd-kundenmenue__abmelden,
[data-kundenmenue^="schiene"] .cd-kundenmenue__abmelden {
margin-inline-start: auto;
}
@media (max-width: 600px) {
[data-kundenmenue^="kasten"] .cd-kundenmenue,
[data-kundenmenue^="schiene"] .cd-kundenmenue { padding-block: var(--cd-a4); }
[data-kundenmenue^="kasten"] .cd-kundenmenue__inhalt,
[data-kundenmenue^="schiene"] .cd-kundenmenue__inhalt {
padding: var(--cd-a3) var(--cd-a4);
inline-size: auto;
}
}
@media (max-width: 600px) {
body:not([data-konto-mobil="aus"]) .cd-kundenmenue { display: none; }
}
@media (min-width: 601px) and (max-width: 1100px) {
body:not([data-konto-tablet="aus"]) .cd-kundenmenue { display: none; }
}
@media (min-width: 1101px) {
[data-kundenmenue^="schiene"] .cd-inhalt:has(> .cd-kundenmenue) {
position: relative;
min-block-size: 620px;
background: var(--cd-flaeche-2);
--cd-schienen-platz: calc(var(--cd-portalschiene) + var(--cd-portalschiene-fuge));
}
[data-kundenmenue^="schiene"] .cd-inhalt:has(> .cd-kundenmenue) > .cd-bahn {
padding-block-end: var(--cd-a8);
}
[data-kundenmenue^="schiene"] .cd-inhalt:has(> .cd-kundenmenue) > .cd-portalkopfbahn {
padding-block-end: var(--cd-a7);
}
[data-kundenmenue^="schiene"] .cd-inhalt:has(> .cd-kundenmenue) > .cd-portalkopfbahn + .cd-bahn {
padding-block-start: 0;
}
[data-kundenmenue="schiene-links"] .cd-inhalt:has(> .cd-kundenmenue) .cd-bahn > .cd-bahn__inhalt {
margin-inline: max(0px, calc((100% - var(--cd-inhalt)) / 2)) auto;
padding-inline: calc(var(--cd-rinne) + var(--cd-schienen-platz)) var(--cd-rinne);
}
[data-kundenmenue="schiene-rechts"] .cd-inhalt:has(> .cd-kundenmenue) .cd-bahn > .cd-bahn__inhalt {
margin-inline: auto max(0px, calc((100% - var(--cd-inhalt)) / 2));
padding-inline: var(--cd-rinne) calc(var(--cd-rinne) + var(--cd-schienen-platz));
}
[data-kundenmenue^="schiene"] .cd-inhalt > .cd-kundenmenue {
position: absolute;
inset-block: 0;
inset-inline: 0;
z-index: var(--cd-e-portalschiene);
padding-block: var(--cd-a7) 0;
background: none;
border-block-end: 0;
pointer-events: none;
}
[data-kundenmenue^="schiene"] .cd-inhalt > .cd-kundenmenue > .cd-mitte {
position: sticky;
inset-block-start: calc(var(--cd-kopf-gesamt) + var(--cd-a5));
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__inhalt {
inline-size: var(--cd-portalschiene);
display: grid;
gap: 0;
padding: var(--cd-a5);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
box-shadow: 0 22px 48px -34px rgb(13 26 33 / .55);
pointer-events: auto;
}
[data-kundenmenue="schiene-rechts"] .cd-kundenmenue__inhalt {
margin-inline-start: auto;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__marke {
display: flex;
align-items: center;
gap: var(--cd-a2);
margin: 0 var(--cd-a2) var(--cd-a3);
padding-block-end: var(--cd-a4);
border-block-end: 1px solid var(--cd-linie-2);
color: var(--cd-tinte);
font-weight: 600;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__marke::before {
content: "";
inline-size: 8px;
block-size: 8px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--cd-rot);
box-shadow: 0 0 0 4px #FBEBEC;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__liste {
display: grid;
gap: var(--cd-a1);
margin-inline: calc(var(--cd-a5) * -1);
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__punkt {
inline-size: 100%;
min-inline-size: 0;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__link {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: var(--cd-a3);
inline-size: 100%;
min-block-size: 46px;
padding: 6px var(--cd-a5) 6px calc(var(--cd-a5) + var(--cd-a2));
border: 1px solid transparent;
border-inline: 0;
border-radius: 0;
color: var(--cd-text-2);
font-size: var(--cd-gr-text);
line-height: 1.25;
transition: color var(--cd-zeit) ease,
background var(--cd-zeit) ease,
border-color var(--cd-zeit) ease;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__icon {
display: grid;
place-items: center;
inline-size: 34px;
block-size: 34px;
border-radius: 9px;
background: var(--cd-flaeche-2);
color: var(--cd-text-3);
transition: color var(--cd-zeit) ease,
background var(--cd-zeit) ease;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__icon .cd-symbol {
inline-size: 17px;
block-size: 17px;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__link:hover {
background: #FBEBEC;
border-color: #F0C9CC;
color: var(--cd-tinte);
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__link:hover .cd-kundenmenue__icon {
background: transparent;
color: var(--cd-rot);
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__link--aktiv {
background: var(--cd-rot);
border-color: var(--cd-rot);
box-shadow: 0 10px 22px -16px rgb(196 17 24 / .9);
color: var(--cd-weiss);
font-weight: 700;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__link--aktiv .cd-kundenmenue__icon {
background: rgb(255 255 255 / .16);
color: var(--cd-weiss);
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__link--aktiv:hover {
background: var(--cd-rot-tief);
border-color: var(--cd-rot-tief);
color: var(--cd-weiss);
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__link--aktiv:hover .cd-kundenmenue__icon {
background: rgb(255 255 255 / .18);
color: var(--cd-weiss);
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__abmelden {
inline-size: 100%;
min-block-size: 42px;
margin-block-start: var(--cd-a4);
padding: var(--cd-a4) var(--cd-a2) 0;
justify-content: flex-start;
border: 0;
border-block-start: 1px solid var(--cd-linie-2);
border-radius: 0;
background: transparent;
color: var(--cd-text-3);
font-size: var(--cd-gr-klein);
font-weight: 500;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__abmelden:hover {
border-color: var(--cd-linie-2);
background: transparent;
color: var(--cd-rot);
}
[data-kundenmenue^="schiene"] .cd-inhalt > .cd-kundenmenue + .cd-bahn:not(.cd-hero) {
padding-block-start: var(--cd-a7);
}
}
@media (min-width: 1101px) and (prefers-reduced-motion: reduce) {
[data-kundenmenue^="schiene"] .cd-kundenmenue__link,
[data-kundenmenue^="schiene"] .cd-kundenmenue__icon {
transition: none;
}
[data-kundenmenue^="schiene"] .cd-kundenmenue__link:hover {
transform: none;
}
}
/* bahnen/cd_fernwartung.css */
.cd-fernwartung {
background: var(--cd-flaeche-2);
}
.cd-fernwartung__inhalt {
display: grid;
gap: var(--cd-a5);
}
.cd-fernwartung__karte {
display: grid;
gap: var(--cd-a4);
max-inline-size: 33rem;
padding: clamp(24px, 4vw, 38px);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
box-shadow: var(--cd-schatten-karte);
}
.cd-fernwartung__download {
inline-size: 100%;
justify-content: center;
}
.cd-fernwartung__mini {
margin: calc(var(--cd-a4) * -1 + 2px) 0 0;
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
text-align: center;
}
.cd-fernwartung__hinweis {
margin: 0;
padding: 14px 16px;
border-radius: var(--cd-r-feld);
background: var(--cd-flaeche-2);
border: 1px solid var(--cd-linie);
color: var(--cd-text-2);
font-size: var(--cd-gr-klein);
line-height: 1.5;
}
.cd-fernwartung__schritte {
list-style: none;
margin: 0;
padding: var(--cd-a2) 0 0;
display: grid;
gap: var(--cd-a3);
border-block-start: 1px solid var(--cd-linie);
}
.cd-fernwartung__schritte li {
display: flex;
align-items: flex-start;
gap: var(--cd-a3);
color: var(--cd-text-2);
line-height: 1.5;
}
.cd-fernwartung__schritte strong { color: var(--cd-tinte); font-weight: 600; }
.cd-fernwartung__nr {
flex: 0 0 auto;
inline-size: 1.75rem;
block-size: 1.75rem;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--cd-rot);
color: var(--cd-weiss);
font-family: var(--cd-schrift-mono);
font-weight: 700;
font-size: .82rem;
}
.cd-fernwartung__anruf {
inline-size: 100%;
justify-content: center;
}
/* bahnen/cd_tickets.css */
.cd-tickets {
background: var(--cd-flaeche-2);
}
.cd-bahn__inhalt.cd-tickets__inhalt {
max-inline-size: calc(52rem + var(--cd-schienen-platz, 0px));
}
.cd-hp {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.cd-tickets__fehler {
margin: 0 0 var(--cd-a4);
padding: 12px 16px;
border-radius: var(--cd-r-feld);
background: #FBEBEC;
border: 1px solid #F0C9CC;
color: #9E0C12;
font-size: var(--cd-gr-klein);
}
.cd-tickets__zurueck {
display: inline-block;
margin-block-end: var(--cd-a4);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .04em;
color: var(--cd-text-3);
text-decoration: none;
}
.cd-tickets__zurueck:hover { color: var(--cd-rot); }
.cd-tstatus {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .06em;
text-transform: uppercase;
font-weight: 700;
background: var(--cd-kopfton, #E9EEF1);
color: var(--cd-tinte);
}
.cd-tstatus--arbeit  { background: #FFF3E0; color: #8A5300; }
.cd-tstatus--warten  { background: #FBEBEC; color: #9E0C12; }
.cd-tstatus--geloest { background: #E4F3EA; color: #1C7A43; }
.cd-tstatus--zu      { background: var(--cd-flaeche-3, #E9EEF1); color: var(--cd-text-3); }
.cd-tliste { list-style: none; margin: 0 0 var(--cd-a5); padding: 0; display: grid; gap: 10px; }
.cd-tliste__link {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
padding: 16px 18px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
text-decoration: none;
transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-tliste__link:hover { border-color: var(--cd-linie-stark, #c9d4da); box-shadow: var(--cd-schatten-karte); }
.cd-tliste__betreff {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--cd-tinte);
}
.cd-tliste__unten { display: inline-flex; align-items: center; gap: 12px; }
.cd-tliste__zeit { font-size: var(--cd-gr-klein); color: var(--cd-text-3); }
.cd-tliste__punkt { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cd-rot); }
.cd-tliste__zeile--neu .cd-tliste__link { border-color: #F0C9CC; }
.cd-tickets__leerhinweis {
margin: 0 0 var(--cd-a5);
color: var(--cd-text-2);
}
.cd-tickets__kopf {
margin-block-end: var(--cd-a5);
padding-block-end: var(--cd-a4);
border-block-end: 1px solid var(--cd-linie);
}
.cd-tickets__betreff {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: clamp(1.4rem, 3vw, 1.9rem);
line-height: 1.2;
color: var(--cd-tinte);
margin: 0 0 var(--cd-a3);
}
.cd-tickets__meta { display: flex; align-items: center; gap: 14px; }
.cd-tickets__nr { font-family: var(--cd-schrift-mono); font-size: var(--cd-gr-klein); color: var(--cd-text-3); }
.cd-tverlauf { list-style: none; margin: 0 0 var(--cd-a5); padding: 0; display: grid; gap: var(--cd-a4); }
.cd-tmsg { display: flex; flex-direction: column; max-inline-size: 82%; }
.cd-tmsg--kunde { margin-inline-start: auto; align-items: flex-end; }
.cd-tmsg--agentur { margin-inline-end: auto; align-items: flex-start; }
.cd-tmsg__kopf { display: flex; gap: 10px; align-items: baseline; margin-block-end: 5px; padding-inline: 4px; }
.cd-tmsg__wer { font-weight: 600; font-size: var(--cd-gr-klein); color: var(--cd-tinte); }
.cd-tmsg__zeit { font-size: var(--cd-gr-mikro); color: var(--cd-text-3); font-family: var(--cd-schrift-mono); }
.cd-tmsg__text {
padding: 12px 16px;
border-radius: 14px;
font-size: 15px;
line-height: 1.55;
overflow-wrap: anywhere;
}
.cd-rte-inhalt > :first-child { margin-block-start: 0; }
.cd-rte-inhalt > :last-child { margin-block-end: 0; }
.cd-rte-inhalt p { margin: 0 0 .6em; }
.cd-rte-inhalt ul, .cd-rte-inhalt ol { margin: 0 0 .6em; padding-inline-start: 1.4em; }
.cd-rte-inhalt li { margin-block-end: .2em; }
.cd-rte-inhalt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cd-tmsg--agentur .cd-rte-inhalt a { color: var(--cd-rot); }
.cd-rte { display: grid; gap: 6px; }
.cd-rte__bar { display: flex; flex-wrap: wrap; gap: 4px; }
.cd-rte__knopf {
min-inline-size: 34px;
padding: 5px 9px;
background: var(--cd-flaeche-2);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-feld);
font-size: 13px;
color: var(--cd-tinte);
cursor: pointer;
transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-rte__knopf:hover { background: var(--cd-weiss); border-color: var(--cd-rot); }
.cd-rte__flaeche {
min-block-size: 7em;
overflow-wrap: anywhere;
}
.cd-rte__flaeche:focus-visible { outline: 2px solid var(--cd-rot); outline-offset: 1px; }
.cd-rte__flaeche > :first-child { margin-block-start: 0; }
.cd-rte__flaeche p { margin: 0 0 .5em; }
.cd-rte__flaeche ul, .cd-rte__flaeche ol { margin: 0 0 .5em; padding-inline-start: 1.4em; }
.cd-tmsg--agentur .cd-tmsg__text {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
color: var(--cd-tinte);
border-start-start-radius: 4px;
}
.cd-tmsg--kunde .cd-tmsg__text {
background: var(--cd-tinte);
color: var(--cd-weiss);
border-start-end-radius: 4px;
}
.cd-tform { display: grid; gap: var(--cd-a4); margin-block-start: var(--cd-a4); }
.cd-tform--antwort {
padding: var(--cd-a4);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
}
.cd-tform .cd-feld { display: grid; gap: 6px; }
.cd-tform .cd-feld__label { font-weight: 600; font-size: var(--cd-gr-klein); color: var(--cd-tinte); }
.cd-tform__check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--cd-gr-klein);
color: var(--cd-text-2);
line-height: 1.45;
}
.cd-tform__check input { margin-block-start: 3px; accent-color: var(--cd-rot); flex: 0 0 auto; }
.cd-tform .cd-knopf { justify-self: start; }
.cd-tickets__hinweis {
margin-block-start: var(--cd-a4);
padding: 12px 16px;
border-radius: var(--cd-r-feld);
background: var(--cd-flaeche-3, #E9EEF1);
color: var(--cd-text-2);
font-size: var(--cd-gr-klein);
}
.cd-tickets__listenkopf {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--cd-a4);
flex-wrap: wrap;
margin-block-end: var(--cd-a5);
}
.cd-tickets__anzahl {
margin: 0;
color: var(--cd-text-3);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .03em;
padding-block-start: 12px;
}
.cd-tneu {
display: flex;
flex-direction: column;
gap: var(--cd-a4);
margin-inline-start: auto;
}
.cd-tneu__auf {
align-self: flex-end;
}
.cd-tneu[open] {
flex: 1 0 100%;
margin-inline-start: 0;
}
.cd-tneu__auf {
list-style: none;
}
.cd-tneu__auf::-webkit-details-marker { display: none; }
.cd-tneu__auf .cd-symbol { color: currentColor; }
.cd-tneu[open] {
flex: 1 0 100%;
margin-inline-start: 0;
}
.cd-tneu .cd-tform {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
padding: var(--cd-a5);
}
@media (max-width: 600px) {
.cd-tmsg { max-inline-size: 100%; }
.cd-tliste__link { flex-direction: column; align-items: flex-start; }
}
/* bahnen/cd_anfragen.css */
.cd-bahn__inhalt.cd-anfragen__inhalt {
max-inline-size: calc(62rem + var(--cd-schienen-platz, 0px));
}
.cd-anfragen__listenkopf {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--cd-a4);
flex-wrap: wrap;
margin-block-end: var(--cd-a5);
}
.cd-anfragen__anzahl {
margin: 0;
color: var(--cd-text-3);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .03em;
padding-block-start: 12px;
}
.cd-anfragen__neu {
margin-inline-start: auto;
text-decoration: none;
}
.cd-azustand {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .06em;
text-transform: uppercase;
font-weight: 700;
}
.cd-azustand--offen  { background: var(--cd-flaeche-3, #E9EEF1); color: var(--cd-tinte); }
.cd-azustand--fertig { background: #E4F3EA; color: #1C7A43; }
.cd-aliste {
list-style: none;
margin: 0 0 var(--cd-a5);
padding: 0;
display: grid;
gap: 10px;
}
.cd-aliste__link {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
padding: 16px 18px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
text-decoration: none;
transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-aliste__link:hover {
border-color: var(--cd-linie-stark, #c9d4da);
box-shadow: var(--cd-schatten-karte);
}
.cd-aliste__betreff {
font-weight: 600;
color: var(--cd-tinte);
min-inline-size: 0;
overflow-wrap: anywhere;
}
.cd-aliste__unten {
display: inline-flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.cd-aliste__zeit {
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
}
.cd-anfragen__leer {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
padding: var(--cd-a6);
max-inline-size: 46rem;
}
.cd-anfragen__leer h2 {
margin: 0 0 var(--cd-a3);
font-size: var(--cd-gr-h4);
}
.cd-anfragen__leer p {
margin: 0;
color: var(--cd-text-2);
}
.cd-anfragen__leerhinweis {
margin: 0;
color: var(--cd-text-2);
}
.cd-anfragen__zurueck {
display: inline-block;
margin-block-end: var(--cd-a4);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .04em;
color: var(--cd-text-3);
text-decoration: none;
}
.cd-anfragen__zurueck:hover { color: var(--cd-rot); }
.cd-anfrage {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
padding: var(--cd-a6);
}
.cd-anfrage__kopf {
margin-block-end: var(--cd-a5);
padding-block-end: var(--cd-a4);
border-block-end: 1px solid var(--cd-linie);
}
.cd-anfrage__betreff {
margin: 0 0 var(--cd-a3);
font-size: var(--cd-gr-h3);
line-height: 1.25;
}
.cd-anfrage__meta {
display: flex;
align-items: center;
gap: var(--cd-a3);
flex-wrap: wrap;
}
.cd-anfrage__zeit {
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
}
.cd-anfrage__text {
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--cd-tinte);
line-height: 1.6;
margin-block-end: var(--cd-a6);
}
.cd-anfrage__angaben {
display: grid;
gap: var(--cd-a3);
margin: 0 0 var(--cd-a5);
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-linie);
}
.cd-anfrage__angaben > div {
display: grid;
grid-template-columns: 10rem 1fr;
gap: var(--cd-a3);
}
.cd-anfrage__angaben dt {
color: var(--cd-text-3);
font-size: var(--cd-gr-klein);
}
.cd-anfrage__angaben dd {
margin: 0;
color: var(--cd-tinte);
overflow-wrap: anywhere;
}
.cd-anfrage__weiter {
margin: 0;
color: var(--cd-text-2);
font-size: var(--cd-gr-klein);
}
@media (max-width: 600px) {
.cd-aliste__link {
flex-direction: column;
align-items: flex-start;
}
.cd-anfrage__angaben > div {
grid-template-columns: 1fr;
gap: 2px;
}
.cd-anfrage,
.cd-anfragen__leer {
padding: var(--cd-a5);
}
}
/* bahnen/cd_geheim.css */
.cd-bahn__inhalt.cd-geheim__inhalt {
max-inline-size: calc(46rem + var(--cd-schienen-platz, 0px));
}
.cd-geheim__karte {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
padding: var(--cd-a6);
}
.cd-geheim__titel {
margin: 0 0 var(--cd-a3);
font-size: var(--cd-gr-h3);
line-height: 1.25;
}
.cd-geheim__hinweis {
margin: 0 0 var(--cd-a5);
color: var(--cd-text-2);
}
.cd-geheim__warnung {
margin: 0 0 var(--cd-a5);
padding: var(--cd-a4);
background: #FFF8E6;
border-inline-start: 3px solid #C98A0E;
border-radius: var(--cd-r-feld);
color: var(--cd-tinte);
font-size: var(--cd-gr-klein);
line-height: 1.55;
}
.cd-geheim__frist {
margin: 0 0 var(--cd-a5);
color: var(--cd-text-3);
font-size: var(--cd-gr-klein);
}
.cd-geheim__label {
display: block;
margin-block-end: 6px;
font-weight: 600;
font-size: var(--cd-gr-klein);
}
.cd-geheim__wert {
inline-size: 100%;
margin-block-end: var(--cd-a4);
padding: var(--cd-a4);
background: var(--cd-flaeche-1);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-feld);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-text);
line-height: 1.5;
color: var(--cd-tinte);
resize: vertical;
}
.cd-geheim__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.cd-geheim__zeile {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--cd-a4);
padding: var(--cd-a4) var(--cd-a5);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
}
.cd-geheim__zeiletext {
display: grid;
gap: 2px;
min-inline-size: 0;
}
.cd-geheim__zeiletitel {
font-weight: 600;
color: var(--cd-tinte);
}
.cd-geheim__zeilehinweis {
color: var(--cd-text-3);
font-size: var(--cd-gr-klein);
}
.cd-geheim__marke--weg {
color: var(--cd-text-3);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
white-space: nowrap;
}
.cd-geheim__form { margin: 0; }
.cd-geheim__nach,
.cd-geheim__leerhinweis {
margin: var(--cd-a4) 0 0;
color: var(--cd-text-2);
font-size: var(--cd-gr-klein);
}
@media (max-width: 600px) {
.cd-geheim__karte { padding: var(--cd-a5); }
.cd-geheim__zeile { flex-direction: column; align-items: stretch; }
}
/* bahnen/cd_uebersicht.css */
.cd-portal {
background: var(--cd-flaeche-2);
}
.cd-portalkopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cd-a5);
margin-block-end: var(--cd-a5);
padding-block-end: var(--cd-a5);
border-block-end: 1px solid var(--cd-linie);
}
.cd-portalkopf__text { max-inline-size: 62ch; }
.cd-portalkopf__eyebrow {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-rot);
margin: 0 0 6px;
}
.cd-portalkopf__titel {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: clamp(1.7rem, 3.4vw, 2.3rem);
line-height: 1.1;
letter-spacing: -.02em;
color: var(--cd-tinte);
margin: 0;
}
.cd-portalkopf__unter {
margin: var(--cd-a3) 0 0;
color: var(--cd-text-2);
line-height: 1.55;
}
.cd-portalkopf__grafik {
flex: 0 0 auto;
display: grid;
place-items: center;
inline-size: 76px;
block-size: 76px;
border-radius: 50%;
background: #FBEBEC;
color: var(--cd-rot);
}
.cd-portalkopf__grafik .cd-symbol { inline-size: 36px; block-size: 36px; }
@media (max-width: 560px) {
.cd-portalkopf { gap: var(--cd-a3); }
.cd-portalkopf__grafik { inline-size: 54px; block-size: 54px; }
.cd-portalkopf__grafik .cd-symbol { inline-size: 26px; block-size: 26px; }
}
.cd-portal__kopf {
margin-block-end: var(--cd-a5);
max-inline-size: 60ch;
}
.cd-portal__gruss {
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cd-rot);
margin: 0 0 6px;
}
.cd-portal__titel {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: clamp(1.9rem, 4vw, 2.6rem);
line-height: 1.1;
letter-spacing: -.02em;
color: var(--cd-tinte);
margin: 0 0 var(--cd-a3);
}
.cd-portal__unter { color: var(--cd-text-2); line-height: 1.6; margin: 0; }
.cd-portal__stand {
display: flex;
flex-wrap: wrap;
gap: var(--cd-a3);
margin-block-end: var(--cd-a5);
}
.cd-portal__kennzahl {
display: inline-flex;
align-items: baseline;
gap: .6ch;
padding: 12px 18px;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
text-decoration: none;
transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-portal__kennzahl:hover { border-color: var(--cd-linie-stark, #c9d4da); box-shadow: var(--cd-schatten-karte); }
.cd-portal__zahl {
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: 1.6rem;
line-height: 1;
color: var(--cd-tinte);
font-variant-numeric: tabular-nums;
}
.cd-portal__label { color: var(--cd-text-2); font-size: var(--cd-gr-klein); }
.cd-portal__kennzahl--rot { border-color: #F0C9CC; background: #FBEBEC; }
.cd-portal__kennzahl--rot .cd-portal__zahl { color: var(--cd-rot); }
.cd-portal__kennzahl--rot .cd-portal__label { color: #9E0C12; }
.cd-portal__kacheln {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--cd-a3);
}
.cd-portal__kachel {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"icon titel pfeil"
"icon text  pfeil";
align-items: center;
column-gap: var(--cd-a3);
padding: clamp(18px, 3vw, 26px);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
text-decoration: none;
transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease, transform var(--cd-zeit) ease;
}
.cd-portal__kachel:hover {
border-color: var(--cd-linie-stark, #c9d4da);
box-shadow: var(--cd-schatten-karte);
transform: translateY(-2px);
}
.cd-portal__icon {
grid-area: icon;
display: grid;
place-items: center;
inline-size: 46px;
block-size: 46px;
border-radius: 50%;
background: #FBEBEC;
color: var(--cd-rot);
}
.cd-portal__icon .cd-symbol { inline-size: 22px; block-size: 22px; }
.cd-portal__ktitel {
grid-area: titel;
align-self: end;
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: 1.15rem;
color: var(--cd-tinte);
}
.cd-portal__ktext { grid-area: text; align-self: start; color: var(--cd-text-2); font-size: var(--cd-gr-klein); line-height: 1.4; }
.cd-portal__pfeil {
grid-area: pfeil;
color: var(--cd-text-schwach);
font-size: 1.3rem;
transition: transform var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-portal__kachel:hover .cd-portal__pfeil { transform: translateX(3px); color: var(--cd-rot); }
.cd-portal__badge {
position: absolute;
inset-block-start: 14px;
inset-inline-start: 40px;
min-inline-size: 20px;
block-size: 20px;
padding: 0 6px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--cd-rot);
color: var(--cd-weiss);
font-size: 11px;
font-weight: 700;
line-height: 1;
box-shadow: 0 0 0 2px var(--cd-weiss);
}
@media (max-width: 680px) {
.cd-portal__kacheln { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1101px) {
.cd-portalkopf {
gap: var(--cd-a6);
margin-block-end: var(--cd-a6);
padding-block-end: var(--cd-a6);
}
.cd-portal__kopf,
.cd-portal__stand {
margin-block-end: var(--cd-a6);
}
.cd-portal__stand {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--cd-a4);
}
.cd-portal__kennzahl {
min-inline-size: 0;
min-block-size: 72px;
align-items: center;
padding: var(--cd-a4) var(--cd-a5);
}
.cd-portal__zahl { font-size: 2rem; }
.cd-portal__kacheln { gap: var(--cd-a4); }
.cd-portal__kachel {
min-block-size: 126px;
padding: var(--cd-a6);
}
.cd-portal__icon {
inline-size: 50px;
block-size: 50px;
}
}
.cd-portalkopfbahn {
padding-block: 0;
}
.cd-portalkopfbahn .cd-portalkopf {
margin-block-end: 0;
}
.cd-portalkopfbahn + .cd-bahn {
padding-block-start: 0;
}
.cd-inhalt:has(> .cd-kundenmenue) > .cd-bahn:not([class*="cd-auf-"]) {
background: var(--cd-flaeche-2);
}
.cd-inhalt:has(> .cd-kundenmenue) .cd-portalkopf {
margin-block-end: var(--cd-a5);
}
.cd-inhalt:has(> .cd-kundenmenue) .cd-fernwartung__inhalt > .cd-portalkopf {
margin-block-end: 0;
}
@media (min-width: 1101px) {
[data-kundenmenue^="schiene"] .cd-inhalt:has(> .cd-kundenmenue) .cd-bahn > .cd-bahn__inhalt {
max-inline-size: var(--cd-inhalt);
}
}
.cd-inhalt:has(> .cd-kundenmenue) > .cd-kundenmenue + .cd-bahn:not(.cd-hero) {
padding-block-start: var(--cd-a6);
}
/* bahnen/cd_mitteilungen.css */
.cd-bahn__inhalt.cd-mitteilungen__inhalt {
max-inline-size: calc(62rem + var(--cd-schienen-platz, 0px));
}
.cd-mitteilungen__listenkopf {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--cd-a4);
margin-block-end: var(--cd-a5);
}
.cd-mitteilungen__anzahl {
margin: 0;
padding-block-start: 12px;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
color: var(--cd-text-3);
}
.cd-mitteilungen__alle {
margin: 0;
margin-inline-start: auto;
}
.cd-mliste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.cd-mliste__zeile {
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
padding: 16px 18px;
}
.cd-mliste__zeile--neu {
border-color: #F0C9CC;
}
.cd-mliste__kopf {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 var(--cd-a2);
}
.cd-mliste__titel {
margin: 0 0 var(--cd-a2);
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-gross);
line-height: 1.3;
}
.cd-mliste__text {
color: var(--cd-text-2);
line-height: var(--cd-zeile-text);
overflow-wrap: anywhere;
}
.cd-mliste__unten {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-block-start: var(--cd-a3);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
color: var(--cd-text-3);
}
.cd-mliste__form {
margin-block-start: var(--cd-a3);
}
.cd-mart,
.cd-mliste__neu {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
.cd-mart--hinweis  { background: var(--cd-flaeche-3); color: var(--cd-tinte); }
.cd-mart--wartung  { background: #FFF3E0; color: #8A5300; }
.cd-mart--warnung  { background: #FBEBEC; color: #9E0C12; }
.cd-mart--update   { background: #E7EEF7; color: #1F4E87; }
.cd-mart--rechnung { background: #E4F3EA; color: #1C7A43; }
.cd-mliste__neu {
background: #FBEBEC;
color: #9E0C12;
}
.cd-mitteilungen__fehler {
margin: 0 0 var(--cd-a5);
padding: var(--cd-a3) var(--cd-a4);
background: #FBEBEC;
border: 1px solid #F0C9CC;
border-radius: var(--cd-r-feld);
color: #9E0C12;
}
.cd-mitteilungen__leer {
max-inline-size: 46rem;
padding: var(--cd-a6);
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-gross);
}
.cd-mitteilungen__leer h2 {
margin: 0 0 var(--cd-a3);
font-size: var(--cd-gr-gross);
}
.cd-mitteilungen__leer p { margin: 0 0 var(--cd-a3); color: var(--cd-text-2); }
.cd-mitteilungen__leer p:last-child { margin-block-end: 0; }
.cd-mitteilungen__leerhinweis {
color: var(--cd-text-2);
}
@media (max-width: 600px) {
.cd-mliste__kopf,
.cd-mliste__unten {
flex-direction: column;
align-items: flex-start;
}
.cd-mitteilungen__alle {
margin-inline-start: 0;
inline-size: 100%;
}
.cd-mitteilungen__leer { padding: var(--cd-a5); }
}
[data-js] .cd-mliste__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.cd-mliste__aktionen {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--cd-a3);
margin-block-start: var(--cd-a3);
}
.cd-mliste__form { margin: 0; }
.cd-modal--lesen { inline-size: min(100% - 32px, 620px); }
.cd-mlesen { padding: 28px 32px 32px; }
.cd-mlesen__kopf { margin: 0 0 var(--cd-a3); }
.cd-mlesen__kopf:empty { display: none; }
.cd-mlesen__titel {
margin: 0 0 var(--cd-a2);
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-h3);
line-height: 1.25;
}
.cd-mlesen__datum {
margin: 0 0 var(--cd-a5);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
color: var(--cd-text-3);
}
.cd-mlesen__text {
color: var(--cd-text-2);
line-height: var(--cd-zeile-text);
overflow-wrap: anywhere;
}
.cd-mlesen__fuss:not(:empty) {
margin-block-start: var(--cd-a5);
padding-block-start: var(--cd-a4);
border-block-start: 1px solid var(--cd-linie);
}
@media (max-width: 600px) {
.cd-mlesen { padding: 24px 20px 24px; }
}
/* bahnen/cd_portalarchiv.css */
.cd-archivnav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
inline-size: min(100%, 28rem);
margin: 0 0 var(--cd-a5);
padding: 4px;
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-feld);
background: var(--cd-weiss);
}
.cd-archivnav__link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-block-size: 42px;
padding: 8px 12px;
border-radius: calc(var(--cd-r-feld) - 3px);
color: var(--cd-text-2);
font-size: var(--cd-gr-klein);
font-weight: 600;
text-decoration: none;
transition: color var(--cd-zeit) ease, background var(--cd-zeit) ease;
}
.cd-archivnav__link:hover {
color: var(--cd-tinte);
background: var(--cd-flaeche-2);
}
.cd-archivnav__link--aktiv,
.cd-archivnav__link--aktiv:hover {
color: var(--cd-weiss);
background: var(--cd-tinte);
}
.cd-archivnav__zahl {
display: inline-grid;
place-items: center;
min-inline-size: 22px;
block-size: 22px;
padding-inline: 6px;
border-radius: 999px;
background: var(--cd-flaeche-3);
color: var(--cd-text-2);
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
line-height: 1;
}
.cd-archivnav__link--aktiv .cd-archivnav__zahl {
background: rgb(255 255 255 / 16%);
color: var(--cd-weiss);
}
.cd-archivaktion-form { margin: 0; }
.cd-archivaktion {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-block-size: 38px;
padding: 7px 10px;
border: 1px solid transparent;
border-radius: var(--cd-r-feld);
background: transparent;
color: var(--cd-text-3);
font: inherit;
font-size: var(--cd-gr-klein);
cursor: pointer;
transition: color var(--cd-zeit) ease, border-color var(--cd-zeit) ease, background var(--cd-zeit) ease;
}
.cd-archivaktion:hover {
color: var(--cd-tinte);
border-color: var(--cd-linie);
background: var(--cd-flaeche-2);
}
.cd-archivaktion .cd-symbol {
inline-size: 16px;
block-size: 16px;
flex: 0 0 16px;
}
.cd-archivfehler {
margin: 0 0 var(--cd-a4);
padding: 12px 16px;
border: 1px solid #F0C9CC;
border-radius: var(--cd-r-feld);
background: #FBEBEC;
color: #9E0C12;
font-size: var(--cd-gr-klein);
}
.cd-archivzeile {
display: flex;
align-items: stretch;
overflow: hidden;
background: var(--cd-weiss);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-archivzeile:hover,
.cd-archivzeile:focus-within {
border-color: var(--cd-linie-stark, #c9d4da);
box-shadow: var(--cd-schatten-karte);
}
.cd-archivzeile.cd-tliste__zeile--neu { border-color: #F0C9CC; }
.cd-archivzeile > :is(.cd-aliste__link, .cd-tliste__link) {
flex: 1 1 auto;
min-inline-size: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.cd-archivzeile > :is(.cd-aliste__link, .cd-tliste__link):hover { box-shadow: none; }
.cd-archivzeile > .cd-archivaktion-form {
display: flex;
align-items: center;
flex: 0 0 auto;
padding: 8px;
border-inline-start: 1px solid var(--cd-linie);
}
.cd-mliste__zeile > :is(.cd-mliste__form, .cd-archivaktion-form) {
display: inline-flex;
margin-block-start: var(--cd-a3);
vertical-align: top;
}
.cd-mliste__zeile > .cd-archivaktion-form { margin-inline-start: 6px; }
:is(.cd-anfrage__meta, .cd-tickets__meta) > .cd-archivaktion-form {
margin-inline-start: auto;
}
@media (max-width: 600px) {
.cd-archivnav { inline-size: 100%; }
.cd-archivzeile { flex-direction: column; }
.cd-archivzeile > .cd-archivaktion-form {
justify-content: flex-end;
border-inline-start: 0;
border-block-start: 1px solid var(--cd-linie);
}
.cd-archivzeile > .cd-archivaktion-form .cd-archivaktion { inline-size: 100%; }
.cd-mliste__zeile > :is(.cd-mliste__form, .cd-archivaktion-form) {
display: flex;
inline-size: 100%;
margin-inline: 0;
}
.cd-mliste__zeile > .cd-archivaktion-form .cd-archivaktion { inline-size: 100%; }
:is(.cd-anfrage__meta, .cd-tickets__meta) > .cd-archivaktion-form {
inline-size: 100%;
margin-inline-start: 0;
}
}
/* bahnen/cd_spaltensatz.css */
.cd-spaltensatz__kopf {
max-inline-size: 46rem;
margin-block-end: var(--cd-a6);
}
.cd-spaltensatz__ueberschrift {
margin: 0 0 var(--cd-a3);
}
.cd-spaltensatz__beitext {
color: var(--cd-text-2);
line-height: var(--cd-zeile-text);
}
.cd-spaltensatz__beitext > :last-child { margin-block-end: 0; }
.cd-spaltensatz__satz {
inline-size: var(--cd-satzbreite-m, 100%);
margin-inline: var(--cd-satzlage-m, auto auto);
}
.cd-spaltensatz__raster {
display: grid;
grid-template-columns: var(--cd-satz-m, repeat(auto-fit, minmax(min(100%, 22rem), 1fr)));
gap: var(--cd-satz-fuge, clamp(20px, 2.6vw, 40px));
align-items: var(--cd-satz-ausrichtung, start);
}
@media (max-width: 600px) {
[data-satztausch="1"] .cd-spaltensatz__raster { direction: rtl; }
[data-satztausch="1"] .cd-spaltensatz__feld { direction: ltr; }
}
@media (min-width: 601px) {
.cd-spaltensatz__satz {
inline-size: var(--cd-satzbreite-t, var(--cd-satzbreite-m, 100%));
margin-inline: var(--cd-satzlage-t, var(--cd-satzlage-m, auto auto));
}
.cd-spaltensatz__raster {
grid-template-columns: var(--cd-satz-t, var(--cd-satz-m, repeat(auto-fit, minmax(min(100%, 22rem), 1fr))));
}
}
@media (min-width: 1101px) {
.cd-spaltensatz__satz {
inline-size: var(--cd-satzbreite-d, var(--cd-satzbreite-t, var(--cd-satzbreite-m, 100%)));
margin-inline: var(--cd-satzlage-d, var(--cd-satzlage-t, var(--cd-satzlage-m, auto auto)));
}
.cd-spaltensatz__raster {
grid-template-columns: var(--cd-satz-d, var(--cd-satz-t, var(--cd-satz-m, repeat(auto-fit, minmax(min(100%, 22rem), 1fr)))));
}
}
@media (min-width: 601px) {
.cd-spaltensatz__feld[data-spanne="2"]    { grid-column: span 2; }
.cd-spaltensatz__feld[data-spanne="3"]    { grid-column: span 3; }
.cd-spaltensatz__feld[data-spanne="alle"] { grid-column: 1 / -1; }
}
.cd-spaltensatz__feld {
min-inline-size: 0;
}
.cd-spaltensatz__bild {
inline-size: 100%;
block-size: auto;
margin-block-end: var(--cd-a4);
border-radius: var(--cd-r-karte);
}
.cd-spaltensatz__symbol {
display: inline-flex;
margin-block-end: var(--cd-a3);
color: var(--cd-rot);
}
.cd-spaltensatz__symbol .cd-symbol {
inline-size: 28px;
block-size: 28px;
}
.cd-spaltensatz__kicker { display: block; margin-block-end: var(--cd-a2); }
.cd-spaltensatz__titel {
margin: 0 0 var(--cd-a3);
font-family: var(--cd-schrift-display);
font-size: var(--cd-gr-gross);
line-height: 1.3;
}
.cd-spaltensatz__text {
color: var(--cd-text-2);
line-height: var(--cd-zeile-text);
overflow-wrap: anywhere;
}
.cd-spaltensatz__knopf { margin-block-start: var(--cd-a4); }
.cd-spaltensatz__verweis {
display: inline-flex;
align-items: center;
gap: .4ch;
margin-block-start: var(--cd-a3);
color: var(--cd-rot);
font-weight: 600;
}
.cd-spaltensatz__verweis:hover .cd-spaltensatz__pfeil {
transform: translateX(3px);
}
.cd-spaltensatz__pfeil {
transition: transform var(--cd-zeit) ease;
}
@media (prefers-reduced-motion: reduce) {
.cd-spaltensatz__pfeil { transition: none; }
.cd-spaltensatz__verweis:hover .cd-spaltensatz__pfeil { transform: none; }
}
/* bahnen.css */
.cd-bahn.cd-auf-dunkel + .cd-bahn.cd-auf-dunkel,
.cd-bahn.cd-auf-rot + .cd-bahn.cd-auf-rot {
margin-block-start: -1px;
}
.cd-bahn.cd-auf-dunkel + .cd-bahn.cd-auf-dunkel:not(.cd-stimmen),
.cd-bahn.cd-auf-rot + .cd-bahn.cd-auf-rot {
padding-block-start: 0;
}
.cd-inhalt > .cd-bahn:first-child:not(.cd-hero) {
padding-block-start: 0;
}
.cd-bahn__inhalt {
inline-size: 100%;
max-inline-size: var(--cd-inhalt);
margin-inline: auto;
padding-inline: var(--cd-rinne);
}
.cd-bahn[id] {
scroll-margin-block-start: calc(var(--cd-kopf-gesamt) + 16px);
}
.cd-bahn {
padding-block: var(--cd-luft-m, var(--cd-bahn))
calc(var(--cd-luft-m, var(--cd-bahn)) * var(--cd-bahn-fuss));
}
@media (min-width: 601px) {
.cd-bahn {
padding-block: var(--cd-luft-t, var(--cd-luft-m, var(--cd-bahn)))
calc(var(--cd-luft-t, var(--cd-luft-m, var(--cd-bahn))) * var(--cd-bahn-fuss));
}
}
@media (min-width: 1101px) {
.cd-bahn {
padding-block: var(--cd-luft-d, var(--cd-bahn))
calc(var(--cd-luft-d, var(--cd-bahn)) * var(--cd-bahn-fuss));
}
}
.cd-kopfzeile {
grid-template-columns: var(--cd-kopfsp-m, minmax(0, 1fr));
}
@media (min-width: 601px) {
.cd-kopfzeile {
grid-template-columns: var(--cd-kopfsp-t, var(--cd-kopfsp-m, minmax(0, 1fr)));
}
}
@media (min-width: 901px) {
.cd-kopfzeile {
grid-template-columns: var(--cd-kopfsp-t, minmax(0, 1fr) minmax(0, 26rem));
}
}
@media (min-width: 1101px) {
.cd-kopfzeile {
grid-template-columns: var(--cd-kopfsp-d, minmax(0, 1fr) minmax(0, 26rem));
}
}
html.cd-bewegung .cd-bahn {
--cd-weg: 28px;
--cd-dauer: .7s;
opacity: 0;
transform: none;
transition: opacity var(--cd-dauer) var(--cd-kurve),
transform var(--cd-dauer) var(--cd-kurve);
will-change: opacity, transform;
}
html.cd-bewegung body[data-bewegung="deutlich"] .cd-bahn {
--cd-weg: 56px;
--cd-dauer: .9s;
}
html.cd-bewegung body[data-auftritt="hoch"]   .cd-bahn { transform: translateY(var(--cd-weg)); }
html.cd-bewegung body[data-auftritt="links"]  .cd-bahn { transform: translateX(calc(var(--cd-weg) * -1)); }
html.cd-bewegung body[data-auftritt="rechts"] .cd-bahn { transform: translateX(var(--cd-weg)); }
html.cd-bewegung body[data-auftritt="zoom"]   .cd-bahn { transform: scale(.97); }
html.cd-bewegung body[data-auftritt="keine"]  .cd-bahn { opacity: 1; transition: none; }
html.cd-bewegung .cd-bahn[data-auftritt="blende"] { transform: none; }
html.cd-bewegung .cd-bahn[data-auftritt="hoch"]   { transform: translateY(var(--cd-weg)); }
html.cd-bewegung .cd-bahn[data-auftritt="links"]  { transform: translateX(calc(var(--cd-weg) * -1)); }
html.cd-bewegung .cd-bahn[data-auftritt="rechts"] { transform: translateX(var(--cd-weg)); }
html.cd-bewegung .cd-bahn[data-auftritt="zoom"]   { transform: scale(.97); }
html.cd-bewegung .cd-bahn[data-auftritt="keine"]  { opacity: 1; transform: none; transition: none; }
html.cd-bewegung .cd-bahn.cd-ein {
opacity: 1;
transform: none;
}
html.cd-bewegung .cd-bahn[data-staffel="1"] :is(.cd-karten__feld, .cd-referenzen__folie, .cd-schritte__punkt) {
opacity: 0;
transform: translateY(calc(var(--cd-weg) * .5));
transition: opacity var(--cd-dauer) var(--cd-kurve),
transform var(--cd-dauer) var(--cd-kurve);
}
html.cd-bewegung .cd-bahn[data-staffel="1"].cd-ein :is(.cd-karten__feld, .cd-referenzen__folie, .cd-schritte__punkt) {
opacity: 1;
transform: none;
}
html.cd-bewegung .cd-bahn[data-staffel="1"].cd-ein :is(.cd-karten__feld, .cd-referenzen__folie, .cd-schritte__punkt):nth-child(2) { transition-delay: .08s; }
html.cd-bewegung .cd-bahn[data-staffel="1"].cd-ein :is(.cd-karten__feld, .cd-referenzen__folie, .cd-schritte__punkt):nth-child(3) { transition-delay: .16s; }
html.cd-bewegung .cd-bahn[data-staffel="1"].cd-ein :is(.cd-karten__feld, .cd-referenzen__folie, .cd-schritte__punkt):nth-child(4) { transition-delay: .24s; }
html.cd-bewegung .cd-bahn[data-staffel="1"].cd-ein :is(.cd-karten__feld, .cd-referenzen__folie, .cd-schritte__punkt):nth-child(5) { transition-delay: .32s; }
html.cd-bewegung .cd-bahn[data-staffel="1"].cd-ein :is(.cd-karten__feld, .cd-referenzen__folie, .cd-schritte__punkt):nth-child(n+6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
html.cd-bewegung .cd-bahn,
html.cd-bewegung .cd-bahn[data-staffel="1"] :is(.cd-karten__feld, .cd-referenzen__folie, .cd-schritte__punkt) {
opacity: 1;
transform: none;
transition: none;
}
}
@media (min-width: 1101px) {
.cd-bahn[data-bahnbreite="schmal"] > .cd-bahn__inhalt { max-inline-size: calc(var(--cd-inhalt) * .74); }
.cd-bahn[data-bahnbreite="eng"]    > .cd-bahn__inhalt { max-inline-size: calc(var(--cd-inhalt) * .56); }
.cd-bahn[data-bahnbreite="breit"] > .cd-bahn__inhalt {
max-inline-size: min(calc(var(--cd-inhalt) * 1.14), calc(100vw - var(--cd-rinne) * 2));
}
.cd-bahn[data-bahnlage="links"] > .cd-bahn__inhalt {
margin-inline: max(var(--cd-rinne), calc((100% - var(--cd-inhalt)) / 2)) auto;
}
.cd-bahn[data-bahnlage="rechts"] > .cd-bahn__inhalt {
margin-inline: auto max(var(--cd-rinne), calc((100% - var(--cd-inhalt)) / 2));
}
.cd-bahn[data-kopfeinzug] :is(
.cd-kopfzeile__text,
.cd-aussagenband__kopftext,
.cd-gegen__kopftext,
.cd-kontakt__kopf,
.cd-preise__kopf,
.cd-stimmen__kopftext,
.cd-tab__kopftext,
.cd-referenzdetail__kopftext,
.cd-faq__seite > .cd-faq__beitext,
.cd-logoband__ueberschrift
) {
padding-inline-start: var(--cd-kopf-einzug, 0px);
}
.cd-bahn[data-kopfeinzug="klein"]  { --cd-kopf-einzug: 8%; }
.cd-bahn[data-kopfeinzug="mittel"] { --cd-kopf-einzug: 17%; }
.cd-bahn[data-kopfeinzug="gross"]  { --cd-kopf-einzug: 26%; }
.cd-bahn[data-kopfeinzug]:not([data-kopfeinzug=""]) :is(
.cd-kopfzeile__text,
.cd-aussagenband__kopftext,
.cd-gegen__kopftext,
.cd-stimmen__kopftext,
.cd-tab__kopftext
) {
position: relative;
}
.cd-bahn[data-kopfeinzug]:not([data-kopfeinzug=""]) :is(
.cd-kopfzeile__text,
.cd-aussagenband__kopftext,
.cd-gegen__kopftext,
.cd-stimmen__kopftext,
.cd-tab__kopftext
)::before {
content: "";
position: absolute;
inset-block: 6px;
inset-inline-start: calc(var(--cd-kopf-einzug, 0px) - var(--cd-a6));
inline-size: 2px;
background: var(--cd-rot);
}
.cd-auf-dunkel[data-kopfeinzug]:not([data-kopfeinzug=""]) :is(.cd-kopfzeile__text, .cd-stimmen__kopftext)::before {
background: var(--cd-rot-auf-dunkel);
}
.cd-auf-rot[data-kopfeinzug]:not([data-kopfeinzug=""]) :is(.cd-kopfzeile__text, .cd-stimmen__kopftext)::before {
background: var(--cd-weiss);
}
}
@media (min-width: 1101px) {
.cd-schritte--kacheln[data-versatz] .cd-schritte__liste,
.cd-schritte--fragen[data-versatz] .cd-schritte__liste {
gap: var(--cd-a5);
background: none;
border: 0;
align-items: start;
}
.cd-schritte--kacheln[data-versatz] .cd-schritte__punkt,
.cd-schritte--fragen[data-versatz] .cd-schritte__punkt {
border: 1px solid var(--cd-schritt-linie);
border-radius: var(--cd-r-karte);
}
.cd-bahn[data-versatz] .cd-karten__raster,
.cd-bahn[data-versatz] .cd-referenzen__raster,
.cd-bahn[data-versatz] .cd-referenzen__karten,
.cd-bahn[data-versatz] .cd-blog__raster {
align-items: start;
}
.cd-bahn[data-versatz="wechsel"] :is(
.cd-schritte__punkt,
.cd-karten__feld,
.cd-referenzen__kachel,
.cd-referenzen__karte,
.cd-blog__karte
):nth-child(even) {
margin-block-start: 34px;
}
.cd-schritte[data-versatz="treppe"] .cd-schritte__punkt {
margin-block-start: calc(var(--cd-schritt, 0) * 22px);
}
.cd-schritte[data-versatz="bogen"] .cd-schritte__punkt {
margin-block-start: calc(
(
var(--cd-schritt, 0)
- 2 * max(0, var(--cd-schritt, 0) - (var(--cd-schritte-anzahl, 4) - 1) / 2)
) * 22px
);
}
}
/* wacon.css */
.waconcookiemanagement {
display: none;
position: fixed;
inset: 0;
z-index: 320;
pointer-events: none;
}
.waconcookiemanagement.cd-cookie--offen { display: block; }
#CookieBox.cookiemanagement {
pointer-events: auto;
position: fixed;
inset-inline: 0;
inset-block-end: 0;
max-block-size: 88vh;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--cd-a6) var(--cd-rinne) var(--cd-a6);
background: var(--cd-tinte);
color: var(--cd-weiss);
border-block-start: 3px solid var(--cd-rot);
box-shadow: 0 -34px 64px -40px rgb(0 0 0 / .8);
}
.waconcookiemanagement .wcm-bar { display: none; }
.waconcookiemanagement .middle-center {
inline-size: 100%;
max-inline-size: 816px;
margin-inline: auto;
}
#CookieBox[data-ansicht="intro"] .box-cookie-management,
#CookieBox[data-ansicht="intro"] .cookie-fix { display: none; }
#CookieBox[data-ansicht="einstellungen"] .intro { display: none; }
.waconcookiemanagement .wcm-title {
display: flex;
align-items: center;
gap: var(--cd-a3);
margin: 0 0 var(--cd-a3);
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -.02em;
line-height: var(--cd-zeile-kopf);
color: var(--cd-weiss);
}
.waconcookiemanagement .wcm-ico {
flex: 0 0 auto;
inline-size: 22px;
color: var(--cd-rot-auf-dunkel);
}
.waconcookiemanagement .wcm-ico svg { inline-size: 100%; block-size: auto; display: block; }
.waconcookiemanagement .cd-cookie__text {
margin: 0 0 var(--cd-a5);
max-inline-size: 62ch;
font-size: 15.5px;
line-height: var(--cd-zeile-text);
color: var(--cd-text-auf-dunkel);
}
.waconcookiemanagement .intro {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--cd-a3);
align-items: stretch;
}
.waconcookiemanagement .intro > .wcm-title,
.waconcookiemanagement .intro > .cd-cookie__text,
.waconcookiemanagement .intro > .cookie-legal { grid-column: 1 / -1; }
.waconcookiemanagement .cookie-accept-container,
.waconcookiemanagement .cookie-refuse-container,
.waconcookiemanagement .cookie-management-container {
display: flex;
margin: 0;
max-inline-size: none;
}
.waconcookiemanagement .cookie-btn {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 100%;
min-block-size: var(--cd-zielgroesse, 44px);
padding: 13px 20px;
border: 1px solid transparent;
border-radius: var(--cd-r-knopf);
font-family: var(--cd-schrift-display);
font-weight: 700;
font-size: 15px;
letter-spacing: .01em;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.waconcookiemanagement .cookie-btn {
background: var(--cd-rot);
border-color: var(--cd-rot);
color: var(--cd-weiss);
}
.waconcookiemanagement .cookie-btn:hover {
background: var(--cd-rot-hell);
border-color: var(--cd-rot-hell);
}
.waconcookiemanagement .cookie-fix {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--cd-a3);
align-items: stretch;
margin-block-start: var(--cd-a5);
padding-block-start: var(--cd-a5);
border-block-start: 1px solid var(--cd-dunkel-3);
}
.waconcookiemanagement .cookie-fix .cookie-save {
display: flex;
margin: 0;
max-inline-size: none;
}
.waconcookiemanagement .cookie-fix .text-back-right { display: contents; }
.waconcookiemanagement .cookie-fix .cookie-legal { grid-column: 1 / -1; }
.waconcookiemanagement .cookie-legal {
display: flex;
gap: var(--cd-a5);
margin: 0;
max-inline-size: none;
font-size: var(--cd-gr-klein);
}
.waconcookiemanagement .cookie-legal a {
color: var(--cd-text-auf-dunkel-2);
display: inline-block;
padding-block: 6px;
margin-block: -6px;
}
.waconcookiemanagement .cookie-legal a:hover { color: var(--cd-weiss); }
.waconcookiemanagement .box-cookie-management-in > .wcm-title { margin-block-start: 0; }
.waconcookiemanagement .category {
padding-block: var(--cd-a5);
border-block-start: 1px solid var(--cd-dunkel-3);
}
.waconcookiemanagement .category:first-of-type { border-block-start: 0; }
.waconcookiemanagement .cd-cookie__kopf {
display: flex;
align-items: center;
gap: var(--cd-a4);
margin-block-end: var(--cd-a2);
}
.waconcookiemanagement .category .h3 {
flex: 1 1 auto;
margin: 0;
font-family: var(--cd-schrift-text);
font-size: 16px;
font-weight: 600;
color: var(--cd-weiss);
}
.waconcookiemanagement .cd-cookie__beschreibung {
margin: 0;
max-inline-size: 62ch;
font-size: 13.5px;
line-height: 1.55;
color: var(--cd-text-auf-dunkel-2);
}
.waconcookiemanagement .cd-cookie__immer {
flex: 0 0 auto;
padding: 5px 11px;
border: 1px solid var(--cd-linie-auf-dunkel);
border-radius: 999px;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-mikro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cd-text-auf-dunkel-2);
}
.waconcookiemanagement .cd-cookie__schalter {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--cd-a3);
min-block-size: var(--cd-zielgroesse, 44px);
padding: 0;
border: 0;
background: none;
color: var(--cd-text-auf-dunkel);
font: inherit;
cursor: pointer;
}
.waconcookiemanagement .cd-cookie__wort {
min-inline-size: 2.4em;
text-align: end;
font-family: var(--cd-schrift-mono);
font-size: var(--cd-gr-klein);
letter-spacing: .04em;
}
.waconcookiemanagement .cookie-on .cd-cookie__wort { color: var(--cd-weiss); }
.waconcookiemanagement .activated {
position: relative;
display: block;
inline-size: 46px;
block-size: 26px;
border-radius: 999px;
background: var(--cd-dunkel-3);
border: 1px solid var(--cd-linie-auf-dunkel);
transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.waconcookiemanagement .activated .on {
position: absolute;
inset-block-start: 3px;
inset-inline-start: 3px;
inline-size: 18px;
block-size: 18px;
border-radius: 50%;
background: var(--cd-text-auf-dunkel);
transition: transform var(--cd-zeit) var(--cd-kurve), background var(--cd-zeit) ease;
}
.waconcookiemanagement .cookie-on .activated {
background: var(--cd-rot);
border-color: var(--cd-rot);
}
.waconcookiemanagement .cookie-on .activated .on {
background: var(--cd-weiss);
transform: translateX(20px);
}
.waconcookiemanagement .cd-cookie__schalter--klein .activated {
inline-size: 38px;
block-size: 22px;
}
.waconcookiemanagement .cd-cookie__schalter--klein .activated .on {
inline-size: 14px;
block-size: 14px;
}
.waconcookiemanagement .cd-cookie__schalter--klein.cookie-on .activated .on { transform: translateX(16px); }
.waconcookiemanagement .cookie-acc {
display: inline-flex;
align-items: center;
gap: var(--cd-a2);
min-block-size: var(--cd-zielgroesse, 44px);
margin-block-start: var(--cd-a2);
padding: 0;
border: 0;
background: none;
color: var(--cd-text-auf-dunkel-2);
font-family: var(--cd-schrift-mono);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
}
.waconcookiemanagement .cookie-acc:hover { color: var(--cd-weiss); }
.waconcookiemanagement .cookie-acc .arrow {
inline-size: 0;
block-size: 0;
border-inline: 4px solid transparent;
border-block-start: 5px solid currentColor;
transition: transform var(--cd-zeit) ease;
}
.waconcookiemanagement .cookie-acc .arrow.up { transform: rotate(180deg); }
.waconcookiemanagement .info-text { display: none; }
.waconcookiemanagement .cookie-acc[aria-expanded="true"] + .info-text { display: block; }
.waconcookiemanagement .cookie-info {
margin-block-start: var(--cd-a4);
padding: var(--cd-a4);
background: var(--cd-dunkel-2);
border-radius: var(--cd-r-feld);
font-size: 13px;
color: var(--cd-text-auf-dunkel-2);
}
.waconcookiemanagement .cd-cookie__dienstkopf {
display: flex;
align-items: center;
gap: var(--cd-a4);
}
.waconcookiemanagement .cd-cookie__dienst {
flex: 1 1 auto;
margin: 0;
color: var(--cd-weiss);
font-size: 14px;
}
.waconcookiemanagement .cd-cookie__zweck { margin-block-start: var(--cd-a2); }
.waconcookiemanagement .cd-cookie__zweck p { margin: 0; }
.waconcookiemanagement .cookie-info table {
inline-size: 100%;
margin-block-start: var(--cd-a3);
border-collapse: collapse;
font-size: 12.5px;
}
.waconcookiemanagement .cookie-info td {
padding: 3px 10px 3px 0;
vertical-align: top;
overflow-wrap: anywhere;
}
.waconcookiemanagement .cookie-info td:first-child {
inline-size: 34%;
color: var(--cd-text-auf-dunkel-2);
}
.waconcookiemanagement .cookie-info td + td { color: var(--cd-text-auf-dunkel); }
.waconcookiemanagement .cookieclose {
position: absolute;
inset-block-start: var(--cd-a4);
inset-inline-end: var(--cd-a4);
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--cd-zielgroesse, 44px);
block-size: var(--cd-zielgroesse, 44px);
padding: 0;
border: 0;
background: none;
color: var(--cd-text-auf-dunkel-2);
cursor: pointer;
}
.waconcookiemanagement .cookieclose:hover { color: var(--cd-weiss); }
#CookieBox[data-entschieden="nein"] .cookieclose { display: none; }
.waconcookiemanagement :is(a, button, [tabindex]):focus-visible {
outline: 2px solid var(--cd-weiss);
outline-offset: 3px;
border-radius: 2px;
}
#CookieBox:focus { outline: none; }
#CookieBox:focus-visible { outline: none; }
@media (max-width: 900px) {
#CookieBox.cookiemanagement {
max-block-size: 92vh;
padding: var(--cd-a5) var(--cd-rinne) var(--cd-a5);
}
.waconcookiemanagement .intro,
.waconcookiemanagement .cookie-fix { grid-template-columns: minmax(0, 1fr); }
.waconcookiemanagement .cookieclose {
inset-block-start: var(--cd-a2);
inset-inline-end: var(--cd-a2);
}
.waconcookiemanagement .wcm-title { padding-inline-end: 44px; }
body[data-cookie-hoehe="gedeckelt"] .waconcookiemanagement .cd-cookie__text {
max-block-size: 19vh;
overflow-y: auto;
overscroll-behavior: contain;
padding-inline-end: var(--cd-a2);
}
body[data-cookie-hoehe="gedeckelt"] .waconcookiemanagement .intro { gap: var(--cd-a2); }
body[data-cookie-hoehe="gedeckelt"] #CookieBox.cookiemanagement {
padding: var(--cd-a4) var(--cd-rinne) var(--cd-a4);
}
}
@media (max-height: 520px) {
#CookieBox.cookiemanagement { max-block-size: 96vh; }
}
@keyframes cdCookieAuf {
from { opacity: 0; transform: translateY(100%); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes cdCookieZu {
from { opacity: 1; transform: translateY(0); }
to   { opacity: 0; transform: translateY(100%); }
}
#CookieBox.cookiemanagement {
animation: cdCookieAuf .45s cubic-bezier(.16, .84, .44, 1) both;
}
.waconcookiemanagement.wcm-leaving #CookieBox.cookiemanagement {
animation: cdCookieZu .32s cubic-bezier(.4, 0, .7, .2) forwards;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
#CookieBox.cookiemanagement,
.waconcookiemanagement.wcm-leaving #CookieBox.cookiemanagement { animation: none; }
.waconcookiemanagement .activated,
.waconcookiemanagement .activated .on,
.waconcookiemanagement .cookie-btn,
.waconcookiemanagement .cookie-acc .arrow { transition: none; }
}
.cookie-set,
.cookie-set-direct { cursor: pointer; }
.cookie-set.script,
.cookie-set-direct.script {
position: relative;
display: grid;
place-items: center;
min-block-size: 220px;
padding: var(--cd-a6);
background: var(--cd-flaeche-2);
border: 1px dashed var(--cd-linie);
border-radius: var(--cd-r-karte);
text-align: center;
}
.cookie-set.script p,
.cookie-set-direct.script p {
margin: 0;
max-inline-size: 46ch;
color: var(--cd-text-2);
}
.cookie-set.script img,
.cookie-set-direct.script img { max-inline-size: 100%; block-size: auto; }
.waconcookiemanagementlist #CookieBox2 {
padding: var(--cd-a5);
background: var(--cd-flaeche-1);
border: 1px solid var(--cd-linie);
border-radius: var(--cd-r-karte);
color: var(--cd-tinte);
}
.waconcookiemanagementlist .cookie-info {
padding-block: var(--cd-a4);
border-block-start: 1px solid var(--cd-linie);
}
.waconcookiemanagementlist table { inline-size: 100%; border-collapse: collapse; }
.waconcookiemanagementlist td { padding: 3px 10px 3px 0; vertical-align: top; }