/* Tasklytic: gebündelt aus tokens.css, base.css, komponenten.css, layout.css, startseite.css, kopfbild.css, seiten.css, funnel.css, branchenbilder.css, branchenschirme.css, anpassung.css, bewegung.css, anzeige.css. Nicht von Hand ändern, die Quelle sind die Einzeldateien. */
@font-face {
font-family: "Montserrat Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
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: "Inter Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
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: "Montserrat Ersatz";
font-weight: 100 599;
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
size-adjust: 113.78%;
ascent-override: 85.08%;
descent-override: 22.06%;
line-gap-override: 0%;
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: "Montserrat Ersatz";
font-weight: 600 900;
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
size-adjust: 107.18%;
ascent-override: 90.31%;
descent-override: 23.42%;
line-gap-override: 0%;
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: "Inter Ersatz";
font-weight: 100 549;
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
size-adjust: 106.92%;
ascent-override: 90.61%;
descent-override: 22.56%;
line-gap-override: 0%;
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: "Inter Ersatz";
font-weight: 550 900;
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
size-adjust: 101.28%;
ascent-override: 95.65%;
descent-override: 23.82%;
line-gap-override: 0%;
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;
}
:root {
--tl-nacht: #00070e;
--tl-nacht-2: #000d16;
--tl-nacht-3: #000b14;
--tl-leiste: #03101a;
--tl-karte-dunkel: #0b1a29;
--tl-karte-glas: #081a29;
--tl-hell: #f4f7fa;
--tl-weiss: #ffffff;
--tl-blau: #00a7fe;
--tl-blau-titel: #0aa6f0;
--tl-blau-text: #0073c2;
--tl-blau-hell: #3cb8ff;
--tl-rot: #e5242c;
--tl-rot-hell: #ff3b47;
--tl-tinte: #08111b;
--tl-text-hell: #e7edf3;
--tl-grau-dunkel: #9aa6b4;
--tl-grau-hell: #4a5563;
--tl-linie-dunkel: rgba(255, 255, 255, 0.14);
--tl-band: linear-gradient(90deg, #0191e9 0%, #017ac8 10%, #0762a6 20%, #0d497f 30%, #1a3860 40%, #282f4d 50%, #4a2c43 60%, #702a3b 70%, #9e2d3a 80%, #bd2f3a 90%, #e5333c 100%);
--tl-band-abschluss: linear-gradient(90deg, #0170bc 0%, #01508c 10%, #01437b 20%, #01457d 30%, #034275 40%, #112e57 50%, #242746 60%, #652a43 70%, #862535 80%, #b22632 90%, #f6313a 100%);
--tl-schrift-titel: "Montserrat Variable", "Montserrat", "Montserrat Ersatz", ui-sans-serif, system-ui, sans-serif;
--tl-schrift: "Inter Variable", "Inter", "Inter Ersatz", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--tl-breite: 1440px;
--tl-rand-l: 70px;
--tl-rand-r: 40px;
--tl-radius: 6px;
--tl-radius-karte: 8px;
--tl-ziel: 44px;
--tl-ease: cubic-bezier(0.22, 1, 0.36, 1);
--tl-dauer: 0.6s;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: 96px;
}
body {
margin: 0;
background: var(--tl-nacht);
color: var(--tl-tinte);
font-family: var(--tl-schrift);
font-size: 1rem;
line-height: 1.5;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
a {
color: inherit;
}
button {
font: inherit;
color: inherit;
}
address {
font-style: normal;
}
:focus-visible {
outline: 3px solid var(--tl-blau-text);
outline-offset: 3px;
border-radius: 2px;
}
.held :focus-visible,
.systeme :focus-visible,
.stimmen :focus-visible,
.abschluss :focus-visible,
.fuss :focus-visible,
.kopf :focus-visible,
.menue :focus-visible,
.ablauf-dialog :focus-visible,
.karte :focus-visible,
.seitenkopf :focus-visible {
outline-color: #ffffff;
}
main:focus,
section:focus {
outline: none;
}
.behaelter {
width: 100%;
max-width: var(--tl-breite);
margin-inline: auto;
padding-left: max(var(--tl-rand-l), env(safe-area-inset-left, 0px));
padding-right: max(var(--tl-rand-r), env(safe-area-inset-right, 0px));
}
.unsichtbar {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.tl-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.sprunglink {
position: absolute;
top: 8px;
left: 8px;
z-index: 100;
padding: 12px 18px;
border-radius: var(--tl-radius);
background: #ffffff;
color: var(--tl-tinte);
font-weight: 600;
transform: translateY(-160%);
}
.sprunglink:focus {
transform: none;
}
.icon {
width: 24px;
height: 24px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon .f {
fill: currentColor;
stroke: none;
}
.ueberzeile {
display: flex;
align-items: center;
gap: 17px;
color: var(--tl-blau-text);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
}
.ueberzeile::before {
content: "";
flex: none;
width: 4px;
height: 18px;
background: var(--tl-rot);
}
.ueberzeile--grau {
color: var(--tl-grau-dunkel);
font-weight: 500;
letter-spacing: 0.12em;
}
.ueberzeile--hell {
color: var(--tl-blau-hell);
}
.titel-2 {
margin-top: 18px;
color: var(--tl-tinte);
font-size: 1.96875rem;
font-weight: 700;
letter-spacing: -0.022em;
line-height: 1.20635;
text-wrap: balance;
}
.titel-2--hell {
color: #ffffff;
}
.zeile {
display: block;
}
.knopf {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-height: var(--tl-ziel);
padding: 0 24px;
overflow: hidden;
border: 1.5px solid transparent;
border-radius: var(--tl-radius);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.3s ease, transform 0.25s var(--tl-ease);
}
.knopf .icon--pfeil {
width: 18px;
height: 18px;
stroke-width: 1.8;
transition: transform 0.3s var(--tl-ease);
}
.knopf:hover .icon--pfeil,
.knopf:focus-visible .icon--pfeil {
transform: translateX(4px);
}
.knopf--primaer {
background: var(--tl-blau);
color: var(--tl-tinte);
}
.knopf--primaer:hover,
.knopf--primaer:focus-visible {
background: #35bbff;
box-shadow: 0 10px 30px -10px rgba(0, 167, 254, 0.75);
}
.knopf--gross {
min-height: 53px;
padding: 0 30px;
font-size: 1rem;
}
.knopf--rahmen {
border-color: var(--tl-blau);
background: transparent;
color: var(--tl-tinte);
}
.knopf--rahmen .icon--pfeil {
color: #0a8fd8;
}
.knopf--rahmen:hover,
.knopf--rahmen:focus-visible {
background: rgba(0, 167, 254, 0.08);
}
.knopf--dunkel {
color: #ffffff;
}
.knopf--dunkel .icon--pfeil {
color: var(--tl-blau);
}
.knopf--dunkel:hover,
.knopf--dunkel:focus-visible {
background: rgba(0, 167, 254, 0.14);
}
.knopf--rahmen-hell {
border-color: rgba(255, 255, 255, 0.9);
background: transparent;
color: #ffffff;
}
.knopf--rahmen-hell:hover,
.knopf--rahmen-hell:focus-visible {
background: rgba(255, 255, 255, 0.1);
}
.knopf--rahmen-hell .icon--play {
width: 20px;
height: 20px;
stroke-width: 1.8;
transition: transform 0.3s var(--tl-ease);
}
.knopf--rahmen-hell:hover .icon--play {
transform: scale(1.15);
}
.knopf--telefon {
gap: 10px;
min-height: 43px;
padding: 0 17px;
border-color: rgba(10, 166, 240, 0.9);
background: rgba(0, 10, 20, 0.35);
color: #ffffff;
font-size: 0.84375rem;
font-weight: 500;
}
.knopf--telefon .icon--telefon {
width: 18px;
height: 18px;
}
.knopf--telefon:hover,
.knopf--telefon:focus-visible {
background: rgba(0, 167, 254, 0.16);
}
.knopf--glanz::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
transform: translateX(-120%);
pointer-events: none;
}
.logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.logo__bild {
display: block;
width: auto;
height: 76px;
}
.badge-beleg {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
background: #fff4d6;
color: #3d2c00;
font-family: var(--tl-schrift);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.4;
text-transform: none;
vertical-align: middle;
white-space: nowrap;
}
.rundknopf {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1.5px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
background: transparent;
color: #ffffff;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.rundknopf:hover {
border-color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
.rundknopf--haupt {
width: 52px;
height: 52px;
border-color: var(--tl-blau);
background: var(--tl-blau);
color: var(--tl-tinte);
}
.rundknopf--haupt:hover {
background: #35bbff;
}
.rundknopf--haupt .icon--play,
.rundknopf--haupt[aria-pressed="true"] .icon--pause {
display: block;
}
.rundknopf--haupt .icon--pause,
.rundknopf--haupt[aria-pressed="true"] .icon--play {
display: none;
}
.rundknopf--haupt .icon--play {
fill: currentColor;
}
.kopf {
position: fixed;
top: env(safe-area-inset-top, 0px);
left: 0;
right: 0;
z-index: 50;
color: #ffffff;
transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.45s var(--tl-ease);
}
.kopf__innen {
display: flex;
align-items: center;
height: 90px;
max-width: var(--tl-breite);
margin-inline: auto;
padding-left: max(63px, env(safe-area-inset-left, 0px));
padding-right: max(var(--tl-rand-r), env(safe-area-inset-right, 0px));
transition: height 0.35s var(--tl-ease);
}
.kopf .logo {
margin-top: 14px;
transform-origin: left center;
transition: transform 0.35s var(--tl-ease), margin 0.35s var(--tl-ease);
}
.kopf__nav {
margin-left: auto;
margin-right: 56px;
}
.kopf__liste {
display: flex;
gap: 30px;
}
.kopf__liste a,
.menue__liste a {
position: relative;
display: inline-block;
padding: 12px 0;
color: #ffffff;
font-size: 0.78125rem;
font-weight: 500;
text-decoration: none;
}
.kopf__liste a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 6px;
height: 2px;
background: var(--tl-blau);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.35s var(--tl-ease);
}
.kopf__liste a:hover::after,
.kopf__liste a:focus-visible::after,
.kopf__liste a[aria-current="page"]::after {
transform: scaleX(1);
transform-origin: left;
}
.kopf__aktionen {
display: flex;
align-items: center;
gap: 18px;
}
.knopf--kopf {
gap: 12px;
min-height: 43px;
padding: 0 18px 0 22px;
font-size: 0.875rem;
}
.kopf__menueknopf {
display: inline-grid;
place-items: center;
width: 48px;
height: 48px;
margin-right: -9px;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
.kopf__menueknopf[hidden] {
display: none;
}
.js-frueh .kopf__menueknopf[hidden] {
display: inline-grid;
}
@media (min-width: 75em) {
.kopf__menueknopf {
display: none !important;
}
}
@media (max-width: 74.99em) {
.hat-menue .kopf__nav {
display: none;
}
.hat-menue .kopf__aktionen {
margin-left: auto;
}
}
.kopf.ist-fest {
background: rgba(0, 7, 14, 0.9);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.kopf.ist-fest .kopf__innen {
height: 72px;
}
.kopf.ist-fest .logo {
margin-top: 0;
transform: scale(0.74);
}
.kopf.ist-versteckt {
transform: translateY(-110%);
}
.menue-zeichen {
width: 30px;
height: 30px;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.menue-zeichen__linie {
stroke-width: 1.8;
transform-box: fill-box;
transform-origin: center;
transition: stroke 0.2s ease;
}
.menue-zeichen__wabe {
opacity: 0;
stroke: var(--tl-blau-hell);
stroke-width: 1.6;
stroke-dasharray: 64;
stroke-dashoffset: 64;
transform-box: fill-box;
transform-origin: center;
transition: stroke 0.2s ease;
}
.kopf__menueknopf:hover .menue-zeichen__linie {
stroke: var(--tl-blau-hell);
}
.menue__zu .menue-zeichen__linie {
opacity: 0;
}
.menue__zu .menue-zeichen__wabe {
opacity: 1;
stroke-dashoffset: 0;
}
.menue__zu:hover .menue-zeichen__wabe {
stroke: #ffffff;
}
.menue {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
background: transparent;
color: #ffffff;
}
.menue[open] {
display: block;
}
.menue__flaeche {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 28px;
width: min(420px, 100%);
padding: max(20px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 24px 24px;
overflow-y: auto;
background: var(--tl-nacht);
}
.menue::backdrop {
background: rgba(0, 7, 14, 0.65);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.menue__kopf {
display: flex;
align-items: center;
min-height: 50px;
padding-right: 64px;
}
.menue .logo__bild {
height: 50px;
}
.menue__zu {
position: absolute;
top: var(--knopf-oben, 21px);
right: var(--knopf-rechts, 11px);
z-index: 1;
display: inline-grid;
place-items: center;
width: var(--knopf-groesse, 48px);
height: var(--knopf-groesse, 48px);
padding: 0;
border: 0;
background: transparent;
color: #ffffff;
cursor: pointer;
}
.menue__liste {
display: grid;
gap: 2px;
}
.menue__liste a {
display: block;
padding: 12px 0;
border-bottom: 1px solid var(--tl-linie-dunkel);
font-size: 1.25rem;
font-weight: 600;
}
.menue__aktionen {
display: grid;
gap: 12px;
margin-top: auto;
}
.abschluss {
position: relative;
overflow: hidden;
background: var(--tl-band-abschluss);
color: #ffffff;
}
.abschluss::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.06));
pointer-events: none;
}
.abschluss .waben {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.abschluss__raster {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
min-height: 135px;
padding-top: 30px;
padding-bottom: 14px;
}
.abschluss .ueberzeile--hell {
color: #a8dcff;
}
.abschluss__titel {
margin-top: 5px;
color: #ffffff;
font-size: 1.65rem;
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.22728;
}
.abschluss__aktion {
display: grid;
justify-items: center;
gap: 12px;
margin-right: 47px;
padding-top: 0;
}
.abschluss .knopf--gross {
min-width: 318px;
min-height: 53px;
font-size: 1.0625rem;
}
.abschluss__unterzeile {
color: #ffffff;
font-size: 0.84375rem;
line-height: 1.4;
}
.fuss {
background: var(--tl-nacht-3);
color: #c9d2dc;
font-size: 0.84375rem;
}
.fuss__raster {
display: grid;
grid-template-columns: 358px 247px 206px 265px 1fr;
padding-top: 20px;
padding-bottom: 12px;
padding-left: max(73px, env(safe-area-inset-left, 0px));
}
.fuss .logo__bild {
height: 52px;
}
.fuss__text {
max-width: 301px;
margin-top: 15px;
color: #d3dbe4;
line-height: 1.36297;
}
.fuss__social {
display: flex;
gap: 14px;
margin-top: 12px;
}
.fuss__social a,
.fuss__social-platzhalter {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
color: #e6ecf2;
transition: color 0.2s ease, transform 0.25s var(--tl-ease);
}
.fuss__social a:hover {
color: var(--tl-blau);
transform: translateY(-2px);
}
.fuss__social .icon {
width: 22px;
height: 22px;
}
.fuss__social-platzhalter {
opacity: 0.45;
cursor: help;
}
.fuss__recht {
margin-top: 12px;
color: #aeb9c5;
font-size: 0.78rem;
}
.fuss__einwilligung {
min-height: 24px;
margin-top: 4px;
padding: 0;
border: 0;
background: none;
color: #aeb9c5;
font: inherit;
font-size: 0.78rem;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.fuss__einwilligung:hover,
.fuss__einwilligung:focus-visible {
color: #ffffff;
}
.fuss__titel {
margin-top: 6px;
color: #ffffff;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
}
.fuss__liste {
display: grid;
gap: 0;
margin-top: 9px;
}
.fuss__liste a {
display: inline-block;
padding: 2.5px 0;
color: #d3dbe4;
line-height: 1.40741;
text-decoration: none;
transition: color 0.2s ease;
}
.fuss__liste--weit a {
padding: 2.5px 0;
}
.fuss__liste a:hover,
.fuss__liste a:focus-visible,
.fuss__kontakt a:hover {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 3px;
}
.fuss__kontakt address {
display: grid;
gap: 6px;
margin-top: 9px;
}
.fuss__zeile {
display: flex;
align-items: flex-start;
gap: 12px;
color: #e6ecf2;
font-size: 0.875rem;
line-height: 1.28572;
}
.fuss__zeile .icon {
width: 20px;
height: 20px;
color: var(--tl-blau);
}
.fuss__zeile a {
text-decoration: none;
}
.fuss__kontakt .knopf {
width: 217px;
margin-top: 14px;
}
.held {
position: relative;
isolation: isolate;
min-height: 627px;
overflow: hidden;
background: var(--tl-nacht);
color: #ffffff;
}
.held__hintergrund {
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(90deg, #00070e 0%, #00070e 28%, #040f19 46%, #040f19 100%);
}
.held__raster {
position: relative;
}
.held__text {
position: relative;
z-index: 2;
width: 600px;
padding-top: 131px;
}
.held .ueberzeile {
gap: 16px;
font-size: 0.90625rem;
line-height: 1.24138;
}
.held__titel {
margin-top: 7px;
font-family: var(--tl-schrift-titel);
font-size: 3.1875rem;
font-weight: 800;
letter-spacing: -0.022em;
line-height: 1.11765;
text-transform: uppercase;
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
}
.held__zeile {
display: block;
overflow: hidden;
padding-bottom: 2px;
margin-bottom: -2px;
}
.held__zeile-innen {
display: block;
}
.held__zeile--blau {
color: var(--tl-blau-titel);
}
.held__strich {
display: block;
width: 102px;
height: 3px;
margin-top: 7px;
background: var(--tl-rot);
transform-origin: left;
}
.held__einleitung {
max-width: 562px;
margin-top: 12px;
color: var(--tl-text-hell);
font-size: 1.175rem;
line-height: 1.38298;
}
.held__knoepfe {
display: flex;
flex-wrap: wrap;
gap: 23px;
margin-top: 24px;
}
.held__knoepfe .knopf--primaer {
min-width: 293px;
padding-inline: 22px;
}
.held__knoepfe .knopf--rahmen-hell {
min-width: 204px;
}
.held__bild {
--rand-links: linear-gradient(90deg, transparent 0, #000 4%);
--rand-oben: linear-gradient(180deg, transparent 0, #000 11%);
--rand-ecke: radial-gradient(34% 30% at 0 100%, transparent 0, transparent 35%, #000 100%);
position: absolute;
top: 67px;
left: 630px;
z-index: 1;
width: 810px;
-webkit-mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke);
-webkit-mask-composite: source-in;
mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke);
mask-composite: intersect;
}
@media (min-width: 1440.02px) {
.held__bild {
--rand-rechts: linear-gradient(270deg, transparent 0, #000 6%);
-webkit-mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke), var(--rand-rechts);
mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke), var(--rand-rechts);
}
}
.held__merkmale {
position: relative;
z-index: 2;
display: flex;
margin-top: 44px;
padding-bottom: 29px;
}
.merkmal {
display: flex;
align-items: center;
gap: 16px;
padding-block: 0;
color: var(--tl-text-hell);
font-size: 0.84375rem;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.45926;
text-transform: uppercase;
}
.merkmal:not(:last-child) {
padding-right: 30px;
}
.merkmal + .merkmal {
padding-left: 24px;
border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.merkmal__icon {
width: 50px;
height: 50px;
color: var(--tl-blau-titel);
stroke-width: 1.4;
}
.merkmal__icon--rot {
color: var(--tl-rot-hell);
}
.waben__grund {
fill: none;
stroke-width: 1;
opacity: 0.45;
}
.waben__hervor,
.waben__lauf {
fill: none;
stroke-width: 1.4;
stroke-linejoin: round;
}
.waben__hervor--rot {
stroke: var(--tl-rot-hell);
opacity: 0.85;
}
.waben__hervor--cyan {
stroke: #1aa7f5;
opacity: 0.6;
}
.waben__lauf {
stroke: #ffffff;
stroke-width: 1.6;
stroke-dasharray: 26 334;
stroke-dashoffset: 0;
opacity: 0;
}
.waben__knoten {
fill: #7fd3ff;
}
.waben__knoten--rot {
fill: #ff5a63;
}
.waben--abschluss .waben__grund {
opacity: 0.4;
}
.waben--abschluss .waben__hervor--rot {
opacity: 1;
}
.systeme {
background: linear-gradient(90deg, #021420 0%, #03111c 18%, #03101a 100%);
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: #ffffff;
}
.systeme .behaelter {
min-height: 111px;
padding-top: 18px;
}
.systeme__titel {
color: #b9c4d0;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1.23077;
text-align: center;
text-transform: uppercase;
}
.systeme__liste {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 13px;
padding-left: 18px;
padding-right: 54px;
}
.systeme__eintrag {
display: flex;
align-items: center;
gap: 8px;
min-height: 32px;
color: #a7b4c3;
font-family: var(--tl-schrift-titel);
font-size: 1.1875rem;
font-weight: 700;
letter-spacing: -0.01em;
transition: color 0.3s ease, transform 0.3s var(--tl-ease);
}
.systeme__eintrag .icon {
width: 26px;
height: 26px;
stroke-width: 1.8;
}
.systeme__eintrag:hover {
color: #ffffff;
transform: translateY(-2px);
}
.systeme__logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 18px 56px;
margin-top: 16px;
padding-bottom: 18px;
}
.systeme__logo {
display: block;
width: auto;
max-width: 150px;
height: 34px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.72;
transition: opacity 0.3s ease;
}
.systeme__logos li:hover .systeme__logo {
opacity: 1;
}
.loesungen {
background: linear-gradient(90deg, #f7f9fc 0%, #f4f7fa 35%, #f3f7fa 100%);
}
.loesungen__raster {
display: grid;
grid-template-columns: 496px 1fr;
min-height: 347px;
padding-top: 29px;
padding-bottom: 16px;
}
.loesungen .titel-2,
.ablauf .titel-2 {
margin-top: 12px;
}
.loesungen__text {
max-width: 482px;
margin-top: 17px;
color: #27313c;
font-size: 0.90625rem;
line-height: 1.51725;
}
.loesungen__einleitung .knopf {
min-width: 253px;
margin-top: 24px;
}
.loesungen__karten {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 17.5px;
align-self: start;
margin-top: 2px;
}
.karte {
position: relative;
height: 300px;
overflow: hidden;
border-radius: var(--tl-radius-karte);
background: var(--tl-karte-dunkel);
color: #ffffff;
box-shadow: 0 14px 30px -18px rgba(5, 20, 35, 0.6);
transition: transform 0.45s var(--tl-ease), box-shadow 0.45s var(--tl-ease);
}
.karte::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(26, 167, 245, 0);
transition: box-shadow 0.45s ease;
pointer-events: none;
}
.karte:hover,
.karte:focus-within {
transform: translateY(-6px);
box-shadow: 0 26px 40px -20px rgba(5, 40, 70, 0.75);
}
.karte:hover::after,
.karte:focus-within::after {
box-shadow: inset 0 0 0 1px rgba(26, 167, 245, 0.7);
}
.karte__bild {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 54%;
}
.karte__bild::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, var(--tl-karte-dunkel) 0%, rgba(11, 26, 41, 0) 36%, rgba(11, 26, 41, 0) 52%, rgba(6, 14, 22, 0.94) 86%, rgba(6, 14, 22, 0.97) 100%);
}
.illu {
width: 100%;
height: 100%;
transition: transform 0.7s var(--tl-ease);
}
.karte:hover .illu,
.karte:focus-within .illu {
transform: scale(1.06);
}
.illu__pflanze {
fill: #0f2a1f;
opacity: 0.85;
}
.karte__inhalt {
position: relative;
z-index: 2;
height: 100%;
padding: 19px 10px 0 27px;
}
.karte__icon {
width: 32px;
height: 32px;
color: #1aa7f5;
stroke-width: 1.5;
}
.karte__titel {
margin-top: 9px;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2353;
}
.karte__text {
max-width: 152px;
margin-top: 10px;
color: #d7e0ea;
font-size: 0.825rem;
line-height: 1.41667;
}
.karte:nth-child(2) .karte__text { max-width: 160px; }
.karte:nth-child(3) .karte__text { max-width: 136px; }
.karte__link {
position: absolute;
left: 25px;
bottom: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 24px;
padding-block: 2px;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
}
.karte__link::before {
content: "";
position: absolute;
inset: -400px -400px -40px -400px;
}
.karte__link .icon--pfeil {
width: 15px;
height: 15px;
stroke-width: 1.9;
transition: transform 0.3s var(--tl-ease);
}
.karte:hover .karte__link .icon--pfeil,
.karte__link:focus-visible .icon--pfeil {
transform: translateX(4px);
}
.ablauf {
background: #ffffff;
}
.ablauf__raster {
display: grid;
grid-template-columns: 370px 1fr;
min-height: 316px;
padding-top: 30px;
padding-bottom: 24px;
}
.ablauf__text {
max-width: 290px;
margin-top: 8px;
color: #27313c;
font-size: 1rem;
line-height: 1.35;
}
.ablauf__einleitung .knopf {
min-width: 268px;
min-height: 45px;
margin-top: 17px;
}
.schritte {
display: grid;
grid-template-columns: 233px 260px 264px 1fr;
padding-top: 11px;
counter-reset: schritt;
}
.schritt {
position: relative;
}
.schritt:nth-child(1) .schritt__text { max-width: 165px; }
.schritt:nth-child(2) .schritt__text { max-width: 206px; }
.schritt:nth-child(3) .schritt__text { max-width: 195px; }
.schritt:nth-child(4) .schritt__text { max-width: 190px; }
.schritt__nummer {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1.5px solid #1aa7f5;
border-radius: 50%;
background: #ffffff;
color: var(--tl-tinte);
font-size: 0.9375rem;
font-weight: 700;
}
.schritt__pfeil {
position: absolute;
left: 129px;
top: 29px;
width: 40px;
height: 30px;
color: #1d3a5c;
stroke-width: 1.5;
}
.schritt__icon {
width: 43px;
height: 43px;
margin-top: 11px;
margin-left: 5px;
color: #1aa7f5;
stroke-width: 1.4;
}
.schritt:first-child .schritt__icon,
.schritt:first-child .schritt__titel,
.schritt:first-child .schritt__text {
margin-left: 10px;
}
.schritt__titel {
margin-top: 10px;
color: var(--tl-tinte);
font-size: 1.1875rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.26316;
}
.schritt__text {
margin-top: 5px;
color: var(--tl-grau-hell);
font-size: 1.04rem;
line-height: 1.40625;
}
.kennzahlen {
background: var(--tl-band);
color: #ffffff;
}
.kennzahlen__liste {
display: grid;
grid-template-columns: 308px 336px 328px 1fr;
align-items: center;
min-height: 101px;
padding-left: max(75.6px, env(safe-area-inset-left, 0px));
}
.kennzahl {
display: flex;
align-items: center;
gap: 28px;
}
.kennzahl__icon {
width: 54px;
height: 54px;
stroke-width: 1.3;
}
.kennzahl__text {
display: grid;
gap: 2px;
}
.kennzahl__wert {
display: flex;
align-items: center;
font-size: 1.71875rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.16364;
font-variant-numeric: tabular-nums;
}
.kennzahl__wert--platzhalter {
color: rgba(255, 255, 255, 0.75);
}
.kennzahl__beschreibung {
font-size: 1.03125rem;
line-height: 1.33334;
}
.stimmen {
position: relative;
overflow: hidden;
background:
radial-gradient(60% 120% at 100% 100%, rgba(255, 59, 71, 0.08), rgba(0, 0, 0, 0) 60%),
radial-gradient(50% 120% at 0% 100%, rgba(10, 120, 200, 0.1), rgba(0, 0, 0, 0) 60%),
var(--tl-nacht-2);
color: #ffffff;
}
.stimmen__raster {
display: grid;
grid-template-columns: 442px 1fr;
min-height: 281px;
padding-top: 31px;
padding-bottom: 24px;
padding-left: max(74px, env(safe-area-inset-left, 0px));
}
.stimmen .titel-2 {
margin-top: 10px;
font-size: 2.03125rem;
line-height: 1.13847;
}
.stimmen__text {
max-width: 430px;
margin-top: 9px;
color: #dbe3eb;
font-size: 1rem;
line-height: 1.39375;
}
.stimmen__einleitung .knopf {
min-width: 215px;
min-height: 45px;
margin-top: 18px;
}
.stimmen__karussell {
position: relative;
min-width: 0;
padding-top: 26px;
}
.stimmen__steuerung {
position: absolute;
top: -17px;
right: 13px;
display: flex;
gap: 23px;
}
.stimmen__knopf {
display: inline-grid;
place-items: center;
width: 40px;
height: 32px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: var(--tl-radius);
background: rgba(255, 255, 255, 0.03);
color: #ffffff;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.stimmen__knopf .icon {
width: 16px;
height: 16px;
stroke-width: 1.8;
}
.stimmen__knopf:hover:not([aria-disabled="true"]) {
border-color: var(--tl-blau);
background: rgba(0, 167, 254, 0.14);
}
.stimmen__knopf[aria-disabled="true"] {
opacity: 0.35;
cursor: default;
}
.stimmen__spur {
display: grid;
grid-auto-columns: calc((100% - 40px) / 3);
grid-auto-flow: column;
gap: 20px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.stimmen__spur::-webkit-scrollbar {
display: none;
}
.stimme {
position: relative;
min-height: 196px;
padding: 17px 16px 14px 14px;
border: 1px solid rgba(120, 160, 200, 0.18);
border-radius: var(--tl-radius-karte);
background: linear-gradient(180deg, rgba(14, 38, 60, 0.72), rgba(8, 26, 41, 0.72));
scroll-snap-align: start;
transition: border-color 0.3s ease, transform 0.4s var(--tl-ease);
}
.stimme:hover {
border-color: rgba(26, 167, 245, 0.55);
transform: translateY(-3px);
}
.stimme figure {
display: grid;
grid-template-columns: 33px 1fr;
column-gap: 0;
}
.stimme__zeichen {
width: 24px;
height: 24px;
margin-top: 1px;
color: #1aa7f5;
}
.stimme__zitat {
color: #e8eef4;
font-size: 0.84375rem;
line-height: 1.54815;
}
.stimme__person {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 22px;
margin-top: 16px;
}
.stimme__bild {
flex: none;
width: 58px;
height: 58px;
border-radius: 50%;
object-fit: cover;
}
.stimme__bild--leer {
display: inline-grid;
place-items: center;
border: 1px dashed rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
}
.stimme__name {
display: block;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.35715;
}
.stimme__rolle {
display: block;
color: #aab6c3;
font-size: 0.8125rem;
line-height: 1.38462;
}
.stimme .badge-beleg {
position: absolute;
top: 10px;
right: 10px;
margin: 0;
}
.stimme--platzhalter .stimme__zitat {
padding-right: 62px;
}
.stimme--platzhalter .stimme__zitat {
color: #b5c1cd;
font-style: italic;
}
.ablauf-dialog {
width: min(880px, calc(100% - 32px));
max-height: calc(100% - 32px);
padding: 0;
overflow: auto;
border: 1px solid rgba(120, 160, 200, 0.25);
border-radius: 14px;
background:
radial-gradient(70% 90% at 90% 0%, rgba(26, 120, 200, 0.25), rgba(0, 0, 0, 0) 60%),
var(--tl-nacht);
color: #ffffff;
box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8);
}
.ablauf-dialog::backdrop {
background: rgba(0, 7, 14, 0.75);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.ablauf-dialog__kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 20px 0 32px;
}
.ablauf-dialog__titel {
font-size: 1.25rem;
font-weight: 700;
}
.ablauf-dialog__zu {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.ablauf-dialog__video {
width: calc(100% - 64px);
margin: 20px 32px 0;
border-radius: 8px;
}
.ablauf-dialog__fuss {
display: flex;
justify-content: flex-end;
padding: 0 32px 28px;
}
.praesentation {
padding: 12px 32px 24px;
}
.praesentation__folien {
position: relative;
display: grid;
}
.folie {
display: grid;
grid-template-columns: 220px 1fr;
align-items: center;
gap: 40px;
min-height: 260px;
padding-block: 16px;
}
.folie[hidden] {
display: none;
}
.folie__bild {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
max-width: 100%;
}
.folie__ring {
position: absolute;
inset: 12px;
border: 1.5px solid rgba(26, 167, 245, 0.6);
border-radius: 50%;
box-shadow: 0 0 60px rgba(26, 167, 245, 0.25), inset 0 0 40px rgba(26, 167, 245, 0.15);
}
.folie__icon {
width: 92px;
height: 92px;
color: #1aa7f5;
stroke-width: 1.2;
}
.folie__nummer {
color: var(--tl-blau-hell);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.folie__titel {
margin-top: 8px;
font-family: var(--tl-schrift-titel);
font-size: 2.25rem;
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
}
.folie__beschreibung {
max-width: 46ch;
margin-top: 14px;
color: var(--tl-text-hell);
font-size: 1.125rem;
line-height: 1.55;
}
.praesentation__leiste {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 8px;
}
.praesentation__fortschritt {
display: flex;
flex: 1;
gap: 8px;
min-width: 200px;
}
.praesentation__punkt {
position: relative;
flex: 1;
height: 24px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.praesentation__punkt::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.18);
transform: translateY(-50%);
}
.praesentation__fuellung {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 4px;
border-radius: 2px;
background: var(--tl-blau);
transform: translateY(-50%) scaleX(0);
transform-origin: left;
}
.praesentation__punkt.ist-erledigt .praesentation__fuellung,
.praesentation__punkt[aria-current="step"] .praesentation__fuellung {
transform: translateY(-50%) scaleX(1);
}
.praesentation__knoepfe {
display: flex;
align-items: center;
gap: 12px;
}
.held__bild-innen {
--massstab: 1;
position: relative;
}
.held__bild-innen > img {
display: block;
width: 100%;
height: auto;
}
.held__schirm,
.held__lichter {
display: none;
}
.kopfbild-lebt .held__schirm {
position: absolute;
top: 0;
left: 0;
display: block;
transform-origin: 0 0;
backface-visibility: hidden;
}
.held__schirm--laptop {
transform: scale(var(--massstab)) matrix3d(1.0091141, -0.17759011, 0, -0.0002718747, -0.30704899, 1.2659162, 0, -0.00010707348, 0, 0, 1, 0, 586.5, 348.29999, 0, 1);
}
.held__schirm--handy {
transform: scale(var(--massstab)) matrix3d(0.96571335, -0.09301369, 0, -0.00017082404, -0.47425347, 1.1919082, 0, -0.00015096345, 0, 0, 1, 0, 1442.1, 544.5, 0, 1);
}
.held__schirm::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0) 70%),
rgba(4, 12, 22, 0.07);
pointer-events: none;
}
.held__schirm--handy {
overflow: hidden;
border-radius: 13px;
}
.kopfbild-lebt .held__lichter {
position: absolute;
inset: 0;
display: block;
mix-blend-mode: screen;
pointer-events: none;
}
.held__linien,
.held__knoten {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.held__schirm {
--u: 1px;
--g-blau: #1a8fe0;
--g-blau-hell: #9ccff5;
--g-text: #0f1d2c;
--g-grau: #6b7c8f;
--g-grau-hell: #8a99aa;
--g-flaeche: #f3f6fa;
--g-karte: #fff;
--g-linie: #e3e9f0;
font-family: var(--tl-schrift);
color: var(--g-text);
-webkit-font-smoothing: antialiased;
}
.held__schirm p {
margin: 0;
}
.held__schirm .icon {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.laptop__bildschirm {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: calc(2 * var(--u));
background: var(--g-flaeche);
}
.laptop__bildschirm::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 42%);
pointer-events: none;
}
.dash {
display: grid;
grid-template-columns: calc(118 * var(--u)) 1fr;
height: 100%;
background: var(--g-flaeche);
font-size: calc(6 * var(--u));
line-height: 1.3;
}
.dash__seite {
display: flex;
flex-direction: column;
padding: calc(12 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));
background: linear-gradient(180deg, #0c1b2d 0%, #091522 100%);
color: #a9bccf;
}
.dash__marke {
display: flex;
align-items: center;
gap: calc(5 * var(--u));
margin: 0 0 calc(14 * var(--u)) calc(4 * var(--u));
color: #fff;
font-size: calc(9 * var(--u));
font-weight: 700;
letter-spacing: 0.01em;
}
.dash__menue {
display: grid;
gap: calc(2 * var(--u));
margin: 0;
padding: 0;
list-style: none;
}
.dash__menue li {
display: flex;
align-items: center;
gap: calc(6 * var(--u));
padding: calc(4.6 * var(--u)) calc(6 * var(--u));
border-radius: calc(5 * var(--u));
font-size: calc(6.4 * var(--u));
font-weight: 500;
}
.dash__menue li.ist-aktiv {
background: rgba(26, 143, 224, 0.2);
color: #fff;
box-shadow: inset calc(1.6 * var(--u)) 0 0 #38b8ff;
}
.dash__menue .icon {
flex: none;
width: calc(8 * var(--u));
height: calc(8 * var(--u));
}
.dash__hilfe {
display: flex;
gap: calc(5 * var(--u));
align-items: flex-start;
margin-top: auto;
padding: calc(7 * var(--u));
border-radius: calc(6 * var(--u));
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.08);
color: #c7d4e2;
font-size: calc(5.6 * var(--u));
line-height: 1.4;
}
.dash__hilfe .icon {
flex: none;
width: calc(9 * var(--u));
height: calc(9 * var(--u));
color: #38b8ff;
}
.dash__haupt {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
gap: calc(8 * var(--u));
min-width: 0;
padding: calc(11 * var(--u)) calc(12 * var(--u));
}
.dash__kopf {
display: flex;
align-items: center;
justify-content: space-between;
}
.dash__titel {
font-size: calc(11 * var(--u));
font-weight: 700;
letter-spacing: -0.01em;
}
.dash__untertitel {
margin-top: calc(1 * var(--u));
color: var(--g-grau);
font-size: calc(5.8 * var(--u));
}
.dash__werkzeuge {
display: flex;
align-items: center;
gap: calc(5 * var(--u));
}
.dash__suche,
.dash__glocke {
display: flex;
align-items: center;
height: calc(15 * var(--u));
border-radius: calc(8 * var(--u));
background: var(--g-karte);
box-shadow: 0 0 0 calc(0.5 * var(--u)) #dbe3ec;
color: var(--g-grau-hell);
}
.dash__suche {
gap: calc(3.5 * var(--u));
width: calc(90 * var(--u));
padding-inline: calc(5.5 * var(--u));
font-size: calc(5.6 * var(--u));
}
.dash__glocke {
justify-content: center;
width: calc(15 * var(--u));
border-radius: 50%;
}
.dash__suche svg,
.dash__glocke svg {
width: calc(7 * var(--u));
height: calc(7 * var(--u));
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.dash__person {
display: grid;
place-items: center;
width: calc(15 * var(--u));
height: calc(15 * var(--u));
border-radius: 50%;
background: linear-gradient(135deg, #38b8ff, #0a6fd1);
color: #fff;
font-size: calc(5.4 * var(--u));
font-weight: 700;
}
.dash__kacheln {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(7 * var(--u));
}
.dash__kachel,
.dash__karte {
border-radius: calc(7 * var(--u));
background: var(--g-karte);
box-shadow:
0 calc(0.6 * var(--u)) calc(2 * var(--u)) rgba(16, 40, 70, 0.07),
0 0 0 calc(0.5 * var(--u)) var(--g-linie);
}
.dash__kachel {
display: grid;
grid-template-columns: calc(17 * var(--u)) minmax(0, 1fr) auto;
gap: calc(4 * var(--u)) calc(5 * var(--u));
align-items: center;
padding: calc(7 * var(--u));
}
.dash__kachel-icon,
.dash__liste-icon,
.handy__icon {
display: grid;
place-items: center;
border-radius: calc(5 * var(--u));
background: #e6f2fd;
color: var(--g-blau);
}
.dash__kachel-icon {
width: calc(17 * var(--u));
height: calc(17 * var(--u));
}
.dash__kachel-icon .icon {
width: calc(9 * var(--u));
height: calc(9 * var(--u));
}
.dash__kachel-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.dash__kachel-name {
color: var(--g-grau);
font-size: calc(5.4 * var(--u));
}
.dash__kachel-wert,
.dash__liste-text > span,
.handy__text b,
.handy__text small {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.dash__kachel-wert {
font-size: calc(6.8 * var(--u));
font-weight: 700;
}
.dash__funke {
grid-column: 1 / -1;
width: 100%;
height: calc(12 * var(--u));
}
.dash__funke path {
fill: none;
stroke: var(--g-blau);
stroke-width: 1.4;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.chip {
flex: none;
padding: calc(1.2 * var(--u)) calc(4 * var(--u));
border-radius: calc(8 * var(--u));
background: #eef3f8;
color: #405468;
font-size: calc(4.8 * var(--u));
font-style: normal;
font-weight: 700;
line-height: 1.4;
}
.chip--neu {
background: #e3f1fd;
color: #0b62b0;
}
.chip--ok {
background: #e2f6eb;
color: #12723f;
}
.chip--warten {
background: #fff2d9;
color: #8a5200;
}
.dash__diagramme,
.dash__unten {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: calc(7 * var(--u));
min-height: 0;
}
.dash__karte {
display: flex;
flex-direction: column;
min-height: 0;
padding: calc(7 * var(--u)) calc(8 * var(--u));
}
.dash__kartenkopf {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: calc(5 * var(--u));
}
.dash__kartentitel {
font-size: calc(6.6 * var(--u));
font-weight: 700;
}
.dash__legende {
display: flex;
align-items: center;
gap: calc(3 * var(--u));
color: var(--g-grau);
font-size: calc(5 * var(--u));
}
.dash__legende i {
width: calc(6 * var(--u));
height: calc(2 * var(--u));
margin-left: calc(3 * var(--u));
border-radius: calc(1 * var(--u));
background: var(--g-blau);
}
.dash__legende i.hell {
background: var(--g-blau-hell);
}
.dash__mehr {
color: var(--g-blau);
font-size: calc(5.4 * var(--u));
font-weight: 600;
}
.dash__flaeche-huelle {
flex: 1;
min-height: 0;
}
.dash__linie {
display: block;
width: 100%;
height: 100%;
}
.dash__raster {
fill: none;
stroke: #e8eef4;
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.dash__flaeche {
fill: url(#dash-flaeche);
}
.dash__kurve {
fill: none;
stroke: var(--g-blau);
stroke-width: 1.8;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.dash__kurve--hell {
stroke: var(--g-blau-hell);
stroke-width: 1.4;
}
.dash__achse {
display: flex;
justify-content: space-between;
margin-top: calc(4 * var(--u));
color: var(--g-grau-hell);
font-size: calc(5 * var(--u));
}
.dash__karte--balken .dash__achse span {
flex: 1;
text-align: center;
}
.dash__balken {
display: flex;
flex: 1;
align-items: flex-end;
gap: calc(5 * var(--u));
min-height: 0;
padding-top: calc(4 * var(--u));
background: repeating-linear-gradient(180deg, transparent 0 calc(22 * var(--u) - 1px), #eef2f7 calc(22 * var(--u) - 1px) calc(22 * var(--u)));
}
.dash__balken i {
flex: 1;
border-radius: calc(2.5 * var(--u)) calc(2.5 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u));
background: linear-gradient(180deg, #45b9ff 0%, #1a7fd6 100%);
transform-origin: bottom;
}
.dash__balken i:nth-child(1) { height: 48%; }
.dash__balken i:nth-child(2) { height: 66%; }
.dash__balken i:nth-child(3) { height: 57%; }
.dash__balken i:nth-child(4) { height: 82%; }
.dash__balken i:nth-child(5) { height: 74%; }
.dash__balken i:nth-child(6) { height: 26%; background: linear-gradient(180deg, #a9d8fa, #7cc0f2); }
.dash__balken i:nth-child(7) { height: 18%; background: linear-gradient(180deg, #a9d8fa, #7cc0f2); }
.dash__liste {
display: grid;
gap: calc(4 * var(--u));
height: calc(53 * var(--u));
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
align-content: start;
}
.dash__liste li {
display: flex;
align-items: center;
gap: calc(5 * var(--u));
height: calc(15 * var(--u));
}
.dash__liste-icon {
flex: none;
width: calc(14 * var(--u));
height: calc(14 * var(--u));
border-radius: calc(4 * var(--u));
}
.dash__liste-icon .icon {
width: calc(7.5 * var(--u));
height: calc(7.5 * var(--u));
}
.dash__liste-text {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.dash__liste-text > span {
font-size: calc(6 * var(--u));
font-weight: 600;
}
.dash__liste-text small {
color: var(--g-grau-hell);
font-size: calc(4.8 * var(--u));
}
.dash__karte--freigabe {
justify-content: space-between;
}
.dash__freigabe-text {
color: #33475b;
font-size: calc(6 * var(--u));
line-height: 1.4;
}
.dash__freigabe-knoepfe {
display: flex;
gap: calc(4 * var(--u));
}
.dash__knopf {
padding: calc(3.4 * var(--u)) calc(7 * var(--u));
border-radius: calc(5 * var(--u));
background: var(--g-blau);
color: #fff;
font-size: calc(5.6 * var(--u));
font-weight: 600;
}
.dash__knopf--leise {
background: #e9f1f9;
color: #1a5f9e;
}
.handy__bildschirm {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
padding: 0 calc(8 * var(--u)) calc(5 * var(--u));
border: calc(3.5 * var(--u)) solid #050608;
border-radius: calc(27 * var(--u));
background: var(--g-flaeche);
}
.handy__bildschirm::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 38%);
pointer-events: none;
}
.handy__status {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
height: calc(21 * var(--u));
}
.handy__insel {
position: absolute;
top: calc(5 * var(--u));
left: 50%;
width: calc(46 * var(--u));
height: calc(13 * var(--u));
margin-left: calc(-23 * var(--u));
border-radius: calc(8 * var(--u));
background: #050608;
}
.handy__signal {
display: flex;
align-items: flex-end;
gap: calc(0.8 * var(--u));
height: calc(6 * var(--u));
margin-right: calc(2 * var(--u));
}
.handy__signal i {
width: calc(1.5 * var(--u));
border-radius: calc(0.4 * var(--u));
background: var(--g-text);
}
.handy__signal i:nth-child(1) { height: 30%; }
.handy__signal i:nth-child(2) { height: 52%; }
.handy__signal i:nth-child(3) { height: 76%; }
.handy__signal i:nth-child(4) { height: 100%; }
.handy__signal svg {
width: calc(12 * var(--u));
height: calc(6 * var(--u));
margin-left: calc(3 * var(--u));
fill: none;
stroke: var(--g-text);
stroke-width: 1;
}
.handy__signal svg .voll {
fill: var(--g-text);
stroke: none;
}
.handy__kopf {
display: flex;
align-items: center;
justify-content: space-between;
margin: calc(8 * var(--u)) 0 calc(7 * var(--u));
}
.handy__titel {
font-size: calc(12.5 * var(--u));
font-weight: 700;
letter-spacing: -0.01em;
}
.handy__reiter {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-bottom: calc(7 * var(--u));
padding: calc(1.6 * var(--u));
border-radius: calc(6 * var(--u));
background: #e4eaf1;
color: #5d6f82;
font-size: calc(5.6 * var(--u));
font-weight: 600;
text-align: center;
}
.handy__reiter span {
padding: calc(3 * var(--u)) 0;
border-radius: calc(5 * var(--u));
}
.handy__reiter .ist-aktiv {
background: var(--g-karte);
color: var(--g-text);
box-shadow: 0 calc(0.5 * var(--u)) calc(1.5 * var(--u)) rgba(16, 40, 70, 0.12);
}
.handy__liste {
display: grid;
flex: 1;
gap: calc(5 * var(--u));
align-content: start;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.handy__liste li {
display: flex;
align-items: center;
gap: calc(5 * var(--u));
padding: calc(5.5 * var(--u));
border-radius: calc(7 * var(--u));
background: var(--g-karte);
box-shadow:
0 calc(0.6 * var(--u)) calc(2 * var(--u)) rgba(16, 40, 70, 0.07),
0 0 0 calc(0.5 * var(--u)) var(--g-linie);
}
.handy__icon {
flex: none;
width: calc(17 * var(--u));
height: calc(17 * var(--u));
}
.handy__icon .icon {
width: calc(8.5 * var(--u));
height: calc(8.5 * var(--u));
}
.handy__text {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.handy__text b {
font-size: calc(6.4 * var(--u));
font-weight: 700;
}
.handy__text small {
color: var(--g-grau-hell);
font-size: calc(5 * var(--u));
}
.handy__meldung {
position: absolute;
right: calc(9 * var(--u));
bottom: calc(31 * var(--u));
left: calc(9 * var(--u));
display: flex;
align-items: center;
gap: calc(5 * var(--u));
padding: calc(6.5 * var(--u)) calc(7 * var(--u));
border-radius: calc(9 * var(--u));
background: rgba(15, 29, 44, 0.96);
color: #fff;
font-size: calc(5.8 * var(--u));
font-weight: 600;
line-height: 1.3;
box-shadow: 0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(5, 15, 30, 0.35);
}
.handy__meldung i {
flex: none;
width: calc(7 * var(--u));
height: calc(7 * var(--u));
border-radius: 50%;
background: #2ccf7f;
box-shadow: 0 0 0 calc(2 * var(--u)) rgba(44, 207, 127, 0.25);
}
.handy__leiste {
display: flex;
justify-content: space-around;
margin-top: calc(4 * var(--u));
padding-top: calc(6 * var(--u));
border-top: calc(0.5 * var(--u)) solid var(--g-linie);
color: #9aaabb;
}
.handy__leiste .icon {
width: calc(9.5 * var(--u));
height: calc(9.5 * var(--u));
}
.handy__leiste .icon:first-child {
color: var(--g-blau);
}
.laptop__bildschirm {
width: calc(569 * var(--u));
border-radius: 0;
}
.handy__bildschirm {
box-sizing: border-box;
width: calc(154 * var(--u));
height: calc(330 * var(--u));
border: 0;
border-radius: 0;
}
.laptop__bildschirm::after,
.handy__bildschirm::after {
display: none;
}
.dash__marke img {
display: block;
width: calc(96 * var(--u));
height: auto;
}
.seitenkopf {
position: relative;
isolation: isolate;
overflow: hidden;
background:
radial-gradient(55% 120% at 88% 10%, rgba(32, 74, 112, 0.6) 0%, rgba(0, 7, 14, 0) 70%),
linear-gradient(90deg, #00070e 0%, #04101a 60%, #0a1a29 100%);
color: #ffffff;
}
.seitenkopf .waben {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0.85;
}
.seitenkopf__innen {
padding-top: 116px;
padding-bottom: 56px;
}
.seitenkopf__raster {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 40px;
margin-top: 22px;
}
.seitenkopf__text {
max-width: 760px;
}
.seitenkopf .ueberzeile {
margin-bottom: 14px;
}
.seitenkopf__titel {
font-size: clamp(2rem, 1.3rem + 2.4vw, 2.875rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
text-wrap: balance;
}
.seitenkopf__titel,
.prosa h2,
.prosa h3,
.kachel__titel,
.glossar dt {
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
}
.seitenkopf__einleitung {
max-width: 62ch;
margin-top: 18px;
color: var(--tl-text-hell);
font-size: 1.125rem;
line-height: 1.6;
}
.seitenkopf__zusatz {
margin-top: 14px;
color: var(--tl-grau-dunkel);
font-size: 0.9375rem;
}
.seitenkopf__knoepfe {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.seitenkopf__zeichen {
position: relative;
display: grid;
place-items: center;
width: 168px;
height: 168px;
color: #1aa7f5;
}
.seitenkopf__zeichen .icon {
width: 72px;
height: 72px;
stroke-width: 1.2;
}
.seitenkopf__ring {
position: absolute;
inset: 0;
border: 1.5px solid rgba(26, 167, 245, 0.55);
border-radius: 50%;
box-shadow: 0 0 60px rgba(26, 167, 245, 0.22), inset 0 0 40px rgba(26, 167, 245, 0.12);
}
.seitenkopf--bild {
--seitenrand: max(0px, (100% - var(--tl-breite)) / 2);
}
.seitenkopf--bild .seitenkopf__text {
position: relative;
z-index: 2;
max-width: 640px;
}
.seitenkopf__bild {
position: absolute;
z-index: 1;
pointer-events: none;
}
.seitenkopf__foto {
display: block;
width: 100%;
height: auto;
}
.seitenkopf--anfahrt .seitenkopf__bild {
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: flex-end;
max-width: calc(100% - var(--seitenrand) - var(--tl-rand-l) - 600px);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 10%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 10%);
mask-composite: intersect;
}
.seitenkopf--anfahrt .seitenkopf__bewegung {
position: relative;
flex: none;
height: 100%;
}
.seitenkopf--anfahrt .seitenkopf__foto {
width: auto;
height: 100%;
}
.seitenkopf__fahrzeug {
position: absolute;
inset: 0;
transform-origin: var(--fluchtpunkt);
-webkit-mask-image: radial-gradient(ellipse var(--fahrzeug-groesse) at var(--fahrzeug-mitte), #000 74%, transparent);
mask-image: radial-gradient(ellipse var(--fahrzeug-groesse) at var(--fahrzeug-mitte), #000 74%, transparent);
}
.seitenkopf__fahrzeug-bild {
display: block;
width: 100%;
height: 100%;
}
.seitenkopf__licht {
position: absolute;
width: 13%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(190, 230, 255, 0.55) 30%, rgba(60, 184, 255, 0.18) 60%, rgba(60, 184, 255, 0));
mix-blend-mode: screen;
opacity: 0.4;
translate: -50% -50%;
}
.seitenkopf__licht--1 {
top: var(--licht-1-y);
left: var(--licht-1-x);
}
.seitenkopf__licht--2 {
top: var(--licht-2-y);
left: var(--licht-2-x);
}
.seitenkopf--bildschirm .seitenkopf__bild,
.seitenkopf--netz .seitenkopf__bild {
top: 104px;
right: calc(var(--seitenrand) + var(--tl-rand-r));
bottom: 36px;
left: calc(var(--seitenrand) + var(--tl-rand-l) + 688px);
display: grid;
place-items: center;
container-type: size;
perspective: 1400px;
}
@media (max-width: 1199.98px) {
.seitenkopf--bild .seitenkopf__raster {
grid-template-columns: minmax(0, 1fr);
}
.seitenkopf--bild .seitenkopf__text {
max-width: 760px;
}
.seitenkopf--bild .seitenkopf__bild {
position: relative;
inset: auto;
width: auto;
margin-bottom: -56px;
}
.seitenkopf--anfahrt .seitenkopf__bild {
display: block;
width: min(100% + max(var(--tl-rand-r), env(safe-area-inset-right, 0px)), 460px);
max-width: none;
margin-right: calc(-1 * max(var(--tl-rand-r), env(safe-area-inset-right, 0px)));
margin-left: auto;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 18%);
mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 18%);
}
.seitenkopf--anfahrt .seitenkopf__bewegung {
height: auto;
}
.seitenkopf--anfahrt .seitenkopf__foto {
width: 100%;
height: auto;
}
.seitenkopf--bildschirm .seitenkopf__bild,
.seitenkopf--netz .seitenkopf__bild {
height: clamp(230px, 62vw, 380px);
margin: 8px 0 0;
}
}
.brotkrumen ol {
display: flex;
flex-wrap: wrap;
gap: 4px 0;
color: var(--tl-grau-dunkel);
font-size: 0.875rem;
}
.brotkrumen li {
display: flex;
align-items: center;
}
.brotkrumen li + li::before {
content: "/";
margin: 0 10px;
color: #5d6a78;
}
.brotkrumen a {
display: inline-block;
padding: 3px 0;
color: #dbe3eb;
text-decoration: underline;
text-decoration-color: rgba(219, 227, 235, 0.4);
text-underline-offset: 3px;
}
.brotkrumen a:hover {
text-decoration-color: currentColor;
}
.brotkrumen [aria-current] {
color: var(--tl-grau-dunkel);
}
main {
background: #ffffff;
}
.home main {
background: transparent;
}
.seite {
padding-block: 64px 80px;
background: #ffffff;
color: var(--tl-tinte);
}
.seite__raster {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
align-items: start;
gap: 64px;
}
.seite--schmal .seite__raster {
grid-template-columns: minmax(0, 820px);
}
.prosa {
min-width: 0;
max-width: 72ch;
color: #1d2733;
font-size: 1.0625rem;
line-height: 1.7;
}
.prosa > * + * {
margin-top: 1.1em;
}
.prosa h2 {
margin-top: 2.2em;
color: var(--tl-tinte);
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
text-wrap: balance;
}
.prosa h3 {
margin-top: 1.8em;
color: var(--tl-tinte);
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.35;
}
.prosa > :first-child {
margin-top: 0;
}
.prosa a {
color: var(--tl-blau-text);
text-decoration: underline;
text-underline-offset: 3px;
}
.prosa a:hover {
color: #005a99;
}
.prosa strong {
color: var(--tl-tinte);
font-weight: 650;
}
.prosa ul,
.prosa ol {
display: grid;
gap: 0.55em;
padding-left: 0;
}
.prosa ul li {
position: relative;
padding-left: 1.6em;
}
.prosa ul li::before {
content: "";
position: absolute;
left: 0.25em;
top: 0.62em;
width: 0.5em;
height: 0.5em;
border-radius: 2px;
background: #1aa7f5;
transform: rotate(45deg);
}
.prosa ol {
counter-reset: punkt;
}
.prosa ol li {
position: relative;
padding-left: 2.2em;
counter-increment: punkt;
}
.prosa ol li::before {
content: counter(punkt);
position: absolute;
left: 0;
top: 0.1em;
display: grid;
place-items: center;
width: 1.6em;
height: 1.6em;
border: 1.5px solid #1aa7f5;
border-radius: 50%;
color: var(--tl-tinte);
font-size: 0.85em;
font-weight: 700;
}
.prosa .wp-block-details {
border: 1px solid #dde5ee;
border-radius: var(--tl-radius-karte);
background: #f7f9fc;
}
.prosa .wp-block-details + .wp-block-details {
margin-top: 10px;
}
.prosa .wp-block-details summary {
position: relative;
display: block;
padding: 16px 56px 16px 20px;
color: var(--tl-tinte);
font-weight: 650;
line-height: 1.45;
list-style: none;
cursor: pointer;
}
.prosa .wp-block-details summary::-webkit-details-marker {
display: none;
}
.prosa .wp-block-details summary::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
width: 14px;
height: 14px;
margin-top: -7px;
background:
linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
color: var(--tl-blau-text);
transition: transform 0.3s var(--tl-ease);
}
.prosa .wp-block-details[open] summary::after {
transform: rotate(45deg);
}
.prosa .wp-block-details > :not(summary) {
margin: 0;
padding: 0 20px 18px;
}
.prosa .wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 1.6em;
}
.prosa .wp-block-button__link {
display: inline-flex;
align-items: center;
min-height: var(--tl-ziel);
padding: 0 24px;
border-radius: var(--tl-radius);
background: var(--tl-blau);
color: var(--tl-tinte);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
transition: background-color 0.25s ease;
}
.prosa .wp-block-button__link:hover {
background: #35bbff;
color: var(--tl-tinte);
}
.prosa--klein {
font-size: 0.9375rem;
}
.seitenleiste {
position: sticky;
top: 96px;
display: grid;
gap: 20px;
}
.seitenleiste__karte {
display: grid;
gap: 12px;
padding: 24px;
border-radius: var(--tl-radius-karte);
background:
radial-gradient(80% 120% at 100% 0%, rgba(26, 120, 200, 0.35), rgba(0, 0, 0, 0) 60%),
var(--tl-karte-dunkel);
color: #dbe3eb;
font-size: 0.9375rem;
line-height: 1.55;
}
.seitenleiste__karte .knopf {
justify-self: start;
gap: 10px;
}
.seitenleiste__karte .icon--kalender {
width: 18px;
height: 18px;
}
.seitenleiste__titel {
color: #ffffff;
font-size: 1.125rem;
font-weight: 700;
}
.seitenleiste__verwandt .seitenleiste__titel {
color: var(--tl-tinte);
font-size: 1rem;
}
.seitenleiste__alternativ a {
color: #ffffff;
font-weight: 600;
}
.seitenleiste__verwandt {
padding: 20px 24px;
border: 1px solid #dde5ee;
border-radius: var(--tl-radius-karte);
}
.seitenleiste__verwandt ul {
display: grid;
gap: 4px;
margin-top: 10px;
}
.seitenleiste__verwandt a {
display: flex;
align-items: center;
gap: 12px;
min-height: 40px;
color: var(--tl-tinte);
font-weight: 600;
text-decoration: none;
}
.seitenleiste__verwandt a:hover span {
color: var(--tl-blau-text);
text-decoration: underline;
text-underline-offset: 3px;
}
.seitenleiste__verwandt .icon {
width: 22px;
height: 22px;
color: #0a8fd8;
}
.uebersicht {
padding-block: 64px;
background: var(--tl-hell);
}
.uebersicht + .seite {
padding-top: 64px;
}
.uebersicht__titel {
margin-bottom: 24px;
color: var(--tl-tinte);
font-size: 1.5rem;
font-weight: 700;
}
.kacheln {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.kachel {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
padding: 26px 26px 22px;
border: 1px solid #dde5ee;
border-radius: var(--tl-radius-karte);
background: #ffffff;
box-shadow: 0 1px 2px rgba(8, 17, 27, 0.04);
transition: transform 0.4s var(--tl-ease), box-shadow 0.4s var(--tl-ease), border-color 0.3s ease;
}
.kachel:hover,
.kachel:focus-within {
border-color: #9fd6f7;
box-shadow: 0 20px 40px -24px rgba(5, 40, 70, 0.45);
transform: translateY(-4px);
}
.kachel__icon {
width: 40px;
height: 40px;
color: #0a8fd8;
stroke-width: 1.4;
transition: transform 0.5s var(--tl-ease);
}
.kachel:hover .kachel__icon {
transform: scale(1.1) rotate(-4deg);
}
.kachel__titel {
margin-top: 6px;
color: var(--tl-tinte);
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.3;
}
.kachel__zusatz {
color: var(--tl-grau-hell);
font-size: 0.875rem;
}
.kachel__text {
color: #3a4552;
font-size: 0.96875rem;
line-height: 1.6;
}
.kachel__link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
margin-top: auto;
padding-top: 8px;
color: var(--tl-blau-text);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
}
.kachel__link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.kachel__link .icon--pfeil {
width: 16px;
height: 16px;
stroke-width: 1.9;
transition: transform 0.3s var(--tl-ease);
}
.kachel:hover .kachel__link .icon--pfeil {
transform: translateX(4px);
}
.kachel--hervor {
border-color: transparent;
background: var(--tl-karte-dunkel);
}
.kachel--hervor .kachel__titel {
color: #ffffff;
}
.kachel--hervor .kachel__text {
color: #d7e0ea;
}
.kachel--hervor .kachel__link {
color: #7fd3ff;
}
.kachel--hervor .kachel__icon {
color: #1aa7f5;
}
.kachel:focus-within {
outline: 3px solid var(--tl-blau-text);
outline-offset: 3px;
}
.kachel--hervor:focus-within {
outline-color: var(--tl-blau-text);
}
.kachel__link:focus-visible {
outline: none;
}
.autor {
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 3em;
padding: 20px;
border-radius: var(--tl-radius-karte);
background: #f4f7fa;
font-size: 0.9375rem;
}
.autor__bild {
width: 44px;
height: 44px;
flex: none;
padding: 8px;
border-radius: 50%;
background: #ffffff;
color: #0a8fd8;
}
.glossar__abc ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 40px;
}
.glossar__abc a {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid #dde5ee;
border-radius: var(--tl-radius);
color: var(--tl-tinte);
font-weight: 700;
text-decoration: none;
}
.glossar__abc a:hover {
border-color: var(--tl-blau);
background: #eef8ff;
}
.glossar__gruppe + .glossar__gruppe {
margin-top: 40px;
}
.glossar__buchstabe {
padding-bottom: 8px;
border-bottom: 2px solid var(--tl-tinte);
font-family: var(--tl-schrift-titel);
font-size: 1.75rem;
font-weight: 800;
}
.glossar__liste {
margin: 0;
}
.glossar__eintrag {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 24px;
padding-block: 18px;
border-bottom: 1px solid #e6ebf1;
scroll-margin-top: 110px;
}
.glossar__eintrag:target {
background: #f2f9ff;
}
.glossar__eintrag dt {
color: var(--tl-tinte);
font-size: 1.0625rem;
font-weight: 700;
}
.glossar__eintrag dd {
margin: 0;
max-width: none;
}
.kontakt {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
align-items: start;
gap: 64px;
}
.kontakt__formular {
scroll-margin-top: 100px;
}
.kontakt__titel {
color: var(--tl-tinte);
font-size: 1.625rem;
font-weight: 700;
}
.kontakt__hinweis {
margin-top: 8px;
color: var(--tl-grau-hell);
}
.kontakt__wege {
display: grid;
gap: 24px;
}
.kontakt__daten {
display: grid;
gap: 14px;
}
.kontakt__daten p {
display: flex;
align-items: flex-start;
gap: 12px;
line-height: 1.5;
}
.kontakt__daten .icon {
width: 22px;
height: 22px;
margin-top: 1px;
color: #0a8fd8;
}
.kontakt__daten a {
color: var(--tl-tinte);
font-weight: 600;
}
.formular {
display: grid;
gap: 20px;
margin-top: 28px;
}
.formular__raster {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.feld {
display: grid;
gap: 6px;
align-content: start;
}
.feld label {
color: var(--tl-tinte);
font-weight: 600;
}
.feld__art {
color: var(--tl-grau-hell);
font-size: 0.875rem;
font-weight: 400;
}
.feld__hilfe {
color: var(--tl-grau-hell);
font-size: 0.875rem;
}
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
width: 100%;
min-height: 48px;
padding: 11px 14px;
border: 1.5px solid #6b7785;
border-radius: var(--tl-radius);
background: #ffffff;
color: var(--tl-tinte);
font: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.feld textarea {
resize: vertical;
}
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
border-color: var(--tl-blau-text);
outline: 3px solid rgba(0, 115, 194, 0.35);
outline-offset: 0;
}
.feld--fehler input,
.feld--fehler textarea {
border-color: #c4161f;
}
.feld__fehler {
color: #b3141c;
font-size: 0.9375rem;
font-weight: 600;
}
.feld__fehler:empty {
display: none;
}
.feld--fehler .feld__fehler::before {
content: "Fehler: ";
}
.feld--haken {
grid-template-columns: auto 1fr;
align-items: start;
column-gap: 12px;
}
.feld--haken input {
width: 24px;
height: 24px;
margin: 2px 0 0;
accent-color: var(--tl-blau-text);
}
.feld--haken label {
font-weight: 400;
line-height: 1.55;
}
.feld--haken label a {
color: var(--tl-blau-text);
}
.feld--haken .feld__fehler {
grid-column: 2;
}
.feld--falle {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.formular__meldung {
margin-top: 24px;
padding: 16px 20px;
border: 2px solid #c4161f;
border-radius: var(--tl-radius-karte);
background: #fff5f5;
color: #5c0a0e;
}
.formular__meldung ul {
display: grid;
gap: 4px;
margin-top: 8px;
padding-left: 20px;
list-style: disc;
}
.formular__meldung a {
color: #8f0f15;
}
.formular__absenden {
display: grid;
gap: 12px;
justify-items: start;
}
.formular__absenden .knopf[disabled] {
opacity: 0.7;
cursor: progress;
}
.formular__danach {
color: var(--tl-grau-hell);
font-size: 0.9375rem;
}
.wege {
display: grid;
gap: 10px;
}
.wege a {
color: var(--tl-blau-text);
font-size: 1.125rem;
font-weight: 600;
}
@media (max-width: 1023.98px) {
.seite__raster,
.kontakt {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.seitenleiste {
position: static;
}
.seitenkopf__zeichen {
display: none;
}
}
@media (max-width: 767.98px) {
.seitenkopf__innen {
padding-top: 92px;
padding-bottom: 40px;
}
.seitenkopf--bild .seitenkopf__bild {
margin-bottom: -40px;
}
.seitenkopf__einleitung {
font-size: 1.0625rem;
}
.seitenkopf__knoepfe .knopf {
width: 100%;
}
.seite {
padding-block: 40px 56px;
}
.uebersicht {
padding-block: 40px;
}
.formular__raster {
grid-template-columns: minmax(0, 1fr);
}
.glossar__eintrag {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.prosa h2 {
font-size: 1.4375rem;
}
}
.check {
display: grid;
gap: 32px;
max-width: 860px;
}
.check__formular {
display: grid;
gap: 28px;
}
.check__frage {
display: grid;
gap: 16px;
min-width: 0;
margin: 0;
padding: 28px;
border: 1px solid #dfe6ee;
border-radius: var(--tl-radius-karte);
background: var(--tl-weiss);
box-shadow: 0 18px 40px -30px rgba(8, 17, 27, 0.35);
}
.check__titel {
float: left;
display: grid;
gap: 6px;
width: 100%;
padding: 0;
color: var(--tl-tinte);
font-family: var(--tl-schrift-titel);
font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
font-weight: 700;
line-height: 1.25;
text-wrap: balance;
}
.check__nummer {
color: var(--tl-blau-text);
font-family: var(--tl-schrift);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.check__frage-text:focus {
outline: none;
}
.check__frage-text:focus-visible {
outline: 3px solid var(--tl-blau-text);
outline-offset: 4px;
}
.check__hinweis {
color: var(--tl-grau-hell);
font-size: 0.9375rem;
}
.check__optionen {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
gap: 10px;
}
.check__option {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 12px 16px;
border: 1.5px solid #b9c4d0;
border-radius: var(--tl-radius);
background: var(--tl-weiss);
color: var(--tl-tinte);
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.check__option input {
flex: none;
width: 24px;
height: 24px;
margin: 0;
accent-color: var(--tl-blau-text);
}
.check__option:hover {
border-color: var(--tl-blau-text);
}
.check__option:has(input:checked) {
border-color: var(--tl-blau-text);
background: #eaf6fe;
box-shadow: inset 0 0 0 1px var(--tl-blau-text);
}
.check__option:has(input:focus-visible) {
outline: 3px solid rgba(0, 115, 194, 0.45);
outline-offset: 2px;
}
.check__fehler {
color: #b3141c;
font-weight: 600;
}
.check__navi {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
}
.check__navi [data-check-weiter],
.check__navi [type="submit"] {
margin-left: auto;
}
.check [hidden],
.ratgeber__haupt [hidden] {
display: none !important;
}
.check--schritte .check__nummer {
display: none;
}
.check__fortschritt {
display: grid;
gap: 8px;
}
.check__schritt {
color: var(--tl-grau-hell);
font-size: 0.9375rem;
font-weight: 600;
}
.check__balken {
height: 6px;
overflow: hidden;
border-radius: 3px;
background: #e3e9ef;
}
.check__balken span {
display: block;
width: 0;
height: 100%;
background: var(--tl-band);
transition: width 0.4s var(--tl-ease);
}
.check__ergebnis {
display: grid;
gap: 16px;
padding: 32px;
border-radius: var(--tl-radius-karte);
background: var(--tl-hell);
color: var(--tl-tinte);
}
.check__ergebnis:focus {
outline: none;
}
.check__ergebnis-titel {
font-family: var(--tl-schrift-titel);
font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
line-height: 1.2;
text-wrap: balance;
}
.check__liste {
display: grid;
gap: 4px;
margin: -8px 0 0;
padding-left: 1.25em;
list-style: disc;
}
.check__liste li::marker {
color: var(--tl-blau-text);
}
.check__ergebnis h3 {
margin-top: 8px;
font-size: 1.125rem;
}
.check__ergebnis a:not(.knopf),
.check__alternativ a,
.ratgeber__stand a:not(.knopf) {
color: var(--tl-blau-text);
font-weight: 600;
}
.check__aktion {
margin-top: 4px;
}
.check__alternativ,
.check__neu {
color: var(--tl-grau-hell);
}
.check__ratgeber {
display: grid;
gap: 8px;
padding: 32px;
border: 1px solid #dfe6ee;
border-radius: var(--tl-radius-karte);
}
.check__ratgeber h3 {
font-family: var(--tl-schrift-titel);
font-size: 1.25rem;
}
.check__hinweis-daten {
color: var(--tl-grau-hell);
font-size: 0.9375rem;
}
.ratgeber__haupt {
display: grid;
gap: 40px;
min-width: 0;
}
.ratgeber__stand {
display: grid;
gap: 14px;
padding: 28px 32px;
border-left: 4px solid var(--tl-blau-text);
border-radius: var(--tl-radius-karte);
background: var(--tl-hell);
}
.ratgeber__stand:focus {
outline: none;
}
.ratgeber__stand h2,
.ratgeber__anfordern h2 {
font-family: var(--tl-schrift-titel);
font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem);
line-height: 1.25;
}
.ratgeber__anfordern {
padding: 32px;
border: 1px solid #dfe6ee;
border-radius: var(--tl-radius-karte);
box-shadow: 0 18px 40px -30px rgba(8, 17, 27, 0.35);
}
.formular--ratgeber {
margin-top: 16px;
}
@media (max-width: 640px) {
.check__frage,
.check__ergebnis,
.check__ratgeber,
.ratgeber__anfordern {
padding: 20px;
}
.ratgeber__stand {
padding: 20px;
}
.check__navi .knopf {
flex: 1 1 auto;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.check__balken span,
.check__option {
transition: none;
}
}
.seitenkopf--branche-spedition-logistik {
--fluchtpunkt: 100% 74%;
--fahrzeug-mitte: 53% 49.5%;
--fahrzeug-groesse: 52.7% 52.0%;
--licht-1-x: 17.3%;
--licht-1-y: 70.2%;
--licht-2-x: 54.2%;
--licht-2-y: 71.3%;
}
.schirm {
--format: 4 / 3;
--seiten: 1.3333;
width: min(100cqw, calc(100cqh * var(--seiten)));
aspect-ratio: var(--format);
padding: 10px;
border-radius: 20px;
background: linear-gradient(145deg, #1b2b3b 0%, #0a131d 55%, #05090f 100%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08),
0 34px 70px -24px rgba(0, 0, 0, 0.8),
0 0 70px -16px rgba(60, 184, 255, 0.4);
transform: rotateY(-14deg) rotateX(5deg);
container-type: inline-size;
}
.schirm--monitor {
--format: 16 / 10;
--seiten: 1.6;
padding: 8px;
border-radius: 12px;
}
.schirm__flaeche {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 11px;
background: #f3f6fa;
color: #0f1d2c;
font-family: var(--tl-schrift);
font-size: 2.15cqw;
line-height: 1.3;
}
.schirm--monitor .schirm__flaeche {
border-radius: 5px;
font-size: 2.2cqw;
}
.schirm__flaeche::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 24%, rgba(255, 255, 255, 0) 40%);
pointer-events: none;
}
.schirm .icon {
width: 1.5em;
height: 1.5em;
color: #1a8fe0;
}
.schirm__marke {
width: auto;
height: 1.7em;
}
.schirm__chip {
flex: none;
margin-left: auto;
padding: 0.25em 0.8em;
border-radius: 2em;
background: #e3f1fd;
color: #0b62b0;
font-size: 0.82em;
font-weight: 600;
white-space: nowrap;
}
.schirm__chip--warten {
background: #fff2d9;
color: #8a5200;
}
.schirm__chip--ok {
background: #e2f6eb;
color: #12723f;
}
.schirm__kopf {
display: flex;
align-items: center;
gap: 0.9em;
padding: 0.8em 1.2em;
background: linear-gradient(180deg, #0c1b2d 0%, #091522 100%);
}
.schirm__titel {
padding-left: 0.9em;
border-left: 1px solid rgba(169, 188, 207, 0.35);
color: #a9bccf;
font-weight: 600;
}
.schirm__inhalt {
position: relative;
flex: 1;
padding: 1.1em 1.2em;
}
.sk {
padding: 0.9em 1em;
border-radius: 0.8em;
background: #ffffff;
box-shadow: 0 0.2em 0.8em rgba(15, 29, 44, 0.08);
}
.sk__kopf {
display: flex;
align-items: center;
gap: 0.6em;
margin-bottom: 0.6em;
}
.sk__liste {
display: grid;
gap: 0.35em;
}
.sk__zeile {
display: flex;
align-items: center;
gap: 0.6em;
padding: 0.35em 0.5em;
border-radius: 0.5em;
background: #f3f6fa;
}
.sk__name {
width: 8.4em;
color: #6b7c8f;
}
.sk__wert {
font-weight: 600;
white-space: nowrap;
}
.sk__fotos {
display: flex;
gap: 0.35em;
}
.sk__fotos i {
width: 2.2em;
height: 1.5em;
border-radius: 0.3em;
background: linear-gradient(135deg, #9ccff5, #4d8fc4 60%, #2f6a99);
}
.schirm .sk__haken {
margin-left: auto;
color: #1a9a59;
}
.sk__fuss {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 0.6em;
color: #12723f;
font-size: 0.9em;
font-weight: 600;
}
.schirm .sk__fuss .icon {
color: #1a9a59;
}
.sk--anfrage {
opacity: 0.7;
scale: 0.97;
translate: 0 -2%;
}
.sk--angebot {
position: absolute;
right: 1.2em;
bottom: 1.1em;
left: 2.6em;
box-shadow: 0 0.6em 2em rgba(15, 29, 44, 0.22);
}
.sk__posten {
display: grid;
gap: 0.45em;
margin-bottom: 0.8em;
}
.sk__posten li {
display: flex;
align-items: center;
gap: 0.8em;
color: #6b7c8f;
}
.sk__posten span {
width: 6.4em;
}
.sk__posten i {
flex: 1;
height: 0.55em;
border-radius: 1em;
background: #e3e9f0;
transform-origin: left center;
}
.sk__aktion {
display: flex;
align-items: center;
gap: 0.8em;
}
.sk__knopf {
padding: 0.5em 1em;
border-radius: 0.5em;
background: #00a7fe;
color: #08111b;
font-weight: 700;
}
.sk__hinweis {
display: flex;
align-items: center;
gap: 0.4em;
color: #6b7c8f;
font-size: 0.88em;
}
.kal {
display: grid;
grid-template-columns: 4.2em 1fr;
height: 100%;
}
.kal__seite {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8em;
padding: 0.9em 0;
background: #0f1d2c;
}
.kal__seite .schirm__marke {
width: 2.6em;
height: auto;
object-fit: cover;
object-position: left center;
aspect-ratio: 1;
}
.kal__menue {
display: grid;
place-items: center;
width: 2.4em;
height: 2.4em;
border-radius: 0.6em;
}
.kal__menue.ist-aktiv {
background: rgba(60, 184, 255, 0.18);
}
.schirm .kal__menue .icon {
color: #9ccff5;
}
.kal__haupt {
display: flex;
flex-direction: column;
padding: 1em 1.2em;
}
.kal__kopf {
display: flex;
align-items: baseline;
gap: 0.8em;
margin-bottom: 0.8em;
}
.kal__kopf b {
font-size: 1.25em;
}
.kal__kopf span:not(.schirm__chip) {
color: #6b7c8f;
}
.kal__raster {
display: grid;
flex: 1;
grid-template-columns: 5.6em repeat(5, minmax(0, 1fr));
grid-template-rows: auto 1fr 1fr;
gap: 0.45em;
}
.kal__tag {
color: #6b7c8f;
font-weight: 600;
text-align: center;
}
.kal__teil {
align-self: center;
color: #6b7c8f;
font-size: 0.9em;
}
.kal__spalte {
display: grid;
gap: 0.35em;
}
.kal__termin {
position: relative;
display: grid;
place-items: center;
padding: 0.2em;
overflow: hidden;
border-left: 0.25em solid #1a8fe0;
border-radius: 0.35em;
background: #e3f1fd;
color: #0b4f8c;
font-size: 0.85em;
font-style: normal;
font-weight: 600;
white-space: nowrap;
}
.kal__termin--leer {
border: 1px dashed #c9d5e1;
background: transparent;
}
.kal__termin--wieder {
border: 1px dashed #1a9a59;
background: #e2f6eb;
color: #12723f;
line-height: 1.05;
text-align: center;
white-space: normal;
}
.kal__meldung {
position: absolute;
right: 0.9em;
bottom: 0.9em;
display: flex;
align-items: center;
gap: 0.7em;
padding: 0.7em 1em;
border-radius: 0.7em;
background: #0f1d2c;
color: #ffffff;
box-shadow: 0 0.6em 1.8em rgba(15, 29, 44, 0.35);
}
.kal__meldung span {
display: grid;
color: #9ccff5;
font-size: 0.9em;
}
.kal__meldung b {
color: #ffffff;
font-size: 1.1em;
}
.schirm .kal__meldung .icon {
color: #3cb8ff;
}
.netz {
width: min(100cqw, calc(100cqh * 4 / 3));
height: auto;
overflow: visible;
}
.netz__linie {
fill: none;
stroke: #3cb8ff;
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 50;
opacity: 0.7;
}
.netz__wabe {
fill: rgba(8, 26, 41, 0.92);
stroke: #3cb8ff;
stroke-width: 1.5;
}
.netz__wabe--mitte {
fill: rgba(10, 42, 66, 0.95);
stroke: #ff3b47;
stroke-width: 2;
}
.netz__system,
.netz__mitte {
transform-box: fill-box;
transform-origin: center;
}
.netz__icon {
color: #9ccff5;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.netz__name {
fill: #e7edf3;
font-family: var(--tl-schrift);
font-size: 11.5px;
font-weight: 600;
text-anchor: middle;
}
.netz__fracht {
opacity: 0;
color: #08111b;
}
.netz__fracht rect {
fill: #00a7fe;
}
.netz__fracht use {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.netz__fracht text {
fill: #08111b;
font-family: var(--tl-schrift);
font-size: 11px;
font-weight: 700;
}
@media (max-width: 1439.98px) {
:root {
--tl-rand-l: clamp(20px, 4.86vw, 70px);
--tl-rand-r: clamp(20px, 2.78vw, 40px);
}
.kopf__innen {
padding-left: max(clamp(16px, 4.4vw, 63px), env(safe-area-inset-left, 0px));
}
.held__bild {
--rand-unten: linear-gradient(0deg, transparent 0, #000 12%);
right: 0;
left: auto;
width: min(810px, calc(100% - 590px));
-webkit-mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke), var(--rand-unten);
mask-image: var(--rand-links), var(--rand-oben), var(--rand-ecke), var(--rand-unten);
}
.fuss__raster {
grid-template-columns: 1.45fr 1fr 0.84fr 1.07fr 1fr;
column-gap: 16px;
}
}
@media (max-width: 1359.98px) {
.kopf .knopf--telefon {
display: none;
}
}
@media (max-width: 1299.98px) {
.loesungen__raster {
grid-template-columns: 1fr;
row-gap: 32px;
padding-top: 56px;
padding-bottom: 56px;
}
.loesungen__einleitung {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 48px;
align-items: start;
}
.loesungen__einleitung .ueberzeile,
.loesungen__einleitung .titel-2 {
grid-column: 1;
}
.loesungen__text {
grid-column: 2;
grid-row: 1 / span 2;
align-self: end;
max-width: none;
}
.loesungen__einleitung .knopf {
grid-column: 2;
justify-self: start;
}
.loesungen__karten {
margin-top: 0;
}
.loesungen__karten .karte .karte__text {
max-width: none;
}
.schritte {
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
}
.schritte .schritt .schritt__text {
max-width: none;
}
.kennzahlen__liste {
grid-template-columns: repeat(4, auto);
justify-content: space-between;
gap: 24px;
padding-left: var(--tl-rand-l);
}
.kennzahl {
gap: 18px;
}
.kennzahl__icon {
width: 44px;
height: 44px;
}
}
@media (max-width: 1199.98px) {
.kopf__innen {
height: 80px;
}
html:not(.js):not(.js-frueh) .kopf {
position: absolute;
}
html:not(.js):not(.js-frueh) .kopf__innen {
flex-wrap: wrap;
height: auto;
padding-block: 8px;
}
html:not(.js):not(.js-frueh) .kopf__nav {
order: 3;
width: 100%;
margin: 0;
}
html:not(.js):not(.js-frueh) .kopf__liste {
flex-wrap: wrap;
gap: 0 20px;
}
html:not(.js):not(.js-frueh) .held__text {
padding-top: 230px;
}
.kopf .logo,
.kopf.ist-fest .logo {
margin-top: 0;
transform: none;
}
.kopf .logo__bild {
height: 58px;
}
.held {
min-height: 0;
}
.held__raster {
display: grid;
}
.held__text {
width: auto;
max-width: 640px;
padding-top: 120px;
}
.held__bild {
--rand-oben: linear-gradient(180deg, transparent 0, #000 18%);
position: relative;
top: auto;
right: auto;
left: auto;
width: min(100% + max(var(--tl-rand-r), env(safe-area-inset-right, 0px)), 900px);
aspect-ratio: 1728 / 1000;
margin: -12px calc(-1 * max(var(--tl-rand-r), env(safe-area-inset-right, 0px))) 0 auto;
}
.held__bild {
overflow: hidden;
}
.held__bild-innen {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.held__merkmale {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: space-between;
margin-top: 24px;
padding-bottom: 48px;
}
.ablauf__raster {
grid-template-columns: 1fr;
row-gap: 40px;
padding-top: 56px;
padding-bottom: 56px;
}
.ablauf__text {
max-width: 52ch;
}
.stimmen__raster {
grid-template-columns: 1fr;
row-gap: 24px;
padding-top: 56px;
padding-bottom: 56px;
padding-left: var(--tl-rand-l);
}
.stimmen__text {
max-width: 52ch;
}
.stimmen__karussell {
padding-top: 56px;
}
.stimmen__steuerung {
top: 0;
left: 0;
right: auto;
gap: 12px;
}
.stimmen__knopf {
width: 44px;
height: 44px;
}
.abschluss__raster {
flex-wrap: wrap;
padding-top: 40px;
padding-bottom: 40px;
}
.abschluss__aktion {
margin-right: 0;
justify-items: start;
}
.fuss__raster {
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 32px;
padding-top: 48px;
padding-bottom: 32px;
padding-left: var(--tl-rand-l);
}
.fuss__marke {
grid-column: 1 / -1;
}
.fuss__text {
max-width: 46ch;
}
.kennzahlen__liste {
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: stretch;
padding-top: 28px;
padding-bottom: 28px;
}
.systeme .behaelter {
padding-bottom: 24px;
}
.systeme__liste {
flex-wrap: wrap;
justify-content: center;
gap: 14px 28px;
padding: 0;
}
}
@media (max-width: 1023.98px) {
.loesungen__einleitung {
display: block;
}
.loesungen__text {
max-width: 60ch;
}
.loesungen__karten {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stimmen__spur {
grid-auto-columns: calc((100% - 20px) / 2);
}
.fuss__raster {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 899.98px) {
.held__merkmale {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 16px;
}
.merkmal,
.merkmal + .merkmal,
.merkmal:not(:last-child) {
padding: 0;
border: 0;
}
}
@media (max-width: 767.98px) {
.kopf__innen {
height: 68px;
}
.systeme__logos {
gap: 16px 32px;
}
.systeme__logo {
max-width: 130px;
height: 30px;
}
.held__bild {
width: auto;
margin-right: calc(-1 * max(var(--tl-rand-r), env(safe-area-inset-right, 0px)));
margin-left: calc(-1 * max(var(--tl-rand-l), env(safe-area-inset-left, 0px)));
}
.kopf .logo__bild {
height: 44px;
}
.kopf.ist-fest .kopf__innen {
height: 64px;
}
.held__text {
padding-top: 100px;
}
.held .ueberzeile {
font-size: 0.8125rem;
line-height: 1.38462;
}
.held__titel {
font-size: clamp(2rem, 1.1rem + 4.4vw, 3.1875rem);
line-height: 1.08;
}
.held__einleitung {
font-size: 1.0625rem;
line-height: 1.55;
}
.held__knoepfe {
gap: 12px;
}
.held__knoepfe .knopf {
width: 100%;
min-width: 0;
}
.held__merkmale {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 16px;
padding-bottom: 56px;
}
.merkmal,
.merkmal + .merkmal,
.merkmal:not(:last-child) {
padding: 0;
border: 0;
}
.merkmal {
gap: 12px;
font-size: 0.78125rem;
line-height: 1.576;
}
.merkmal__icon {
width: 40px;
height: 40px;
}
.bewegung-schalter {
bottom: 16px;
}
.systeme .behaelter {
padding-top: 24px;
padding-bottom: 24px;
}
.systeme__liste {
flex-wrap: wrap;
justify-content: center;
gap: 14px 22px;
padding: 0;
}
.systeme__eintrag {
font-size: 1rem;
}
.titel-2 {
font-size: 1.75rem;
line-height: 1.2;
}
.schritte {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 32px;
}
.schritt__pfeil {
display: none;
}
.abschluss__titel {
font-size: 1.375rem;
line-height: 1.3;
}
.abschluss .ueberzeile--hell {
color: #ffffff;
}
.abschluss .knopf--gross {
min-width: 0;
width: 100%;
}
.abschluss__aktion {
width: 100%;
justify-items: stretch;
text-align: center;
}
.ablauf-dialog__kopf {
padding: 16px 16px 0 20px;
}
.praesentation {
padding: 8px 20px 20px;
}
.folie {
grid-template-columns: 1fr;
gap: 12px;
min-height: 0;
}
.folie__bild {
width: 140px;
}
.folie__icon {
width: 64px;
height: 64px;
}
.folie__titel {
font-size: 1.75rem;
}
.ablauf-dialog__fuss {
padding: 0 20px 20px;
}
.ablauf-dialog__fuss .knopf {
width: 100%;
}
}
@media (max-width: 599.98px) {
.kopf .knopf--kopf {
display: none;
}
.loesungen__karten {
grid-template-columns: 1fr;
}
.karte {
height: 280px;
}
.kennzahlen__liste {
grid-template-columns: 1fr;
}
.stimmen__spur {
grid-auto-columns: 86%;
}
.fuss__raster {
grid-template-columns: 1fr;
}
.fuss__kontakt .knopf {
width: 100%;
}
}
@media (max-width: 479.98px) {
.schritte {
grid-template-columns: 1fr;
}
.schritt {
display: grid;
grid-template-columns: 46px 1fr;
column-gap: 16px;
align-items: start;
}
.schritt__nummer {
grid-row: 1 / span 3;
}
.schritt__icon {
display: none;
}
.schritt__titel,
.schritt:first-child .schritt__titel,
.schritt:first-child .schritt__text {
margin: 0;
}
.schritt__titel {
align-self: center;
}
}
@media (max-width: 385.98px) {
.held__merkmale {
grid-template-columns: 1fr;
}
}
@media (max-width: 374.98px) {
.kopf .logo__bild {
height: 38px;
}
}
.bewegung-schalter {
position: absolute;
right: max(var(--tl-rand-r), env(safe-area-inset-right, 0px));
bottom: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 0 10px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
background: rgba(0, 7, 14, 0.55);
color: #d7e0ea;
font-size: 0.75rem;
cursor: pointer;
}
.bewegung-schalter[hidden] {
display: none;
}
.bewegung-schalter .icon {
width: 14px;
height: 14px;
stroke-width: 2;
}
.bewegung-schalter .icon--play {
display: none;
fill: currentColor;
}
.bewegung-aus .bewegung-schalter .icon--play {
display: block;
}
.bewegung-aus .bewegung-schalter .icon--pause {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
.held__auftritt {
animation: tl-auf 0.9s var(--tl-ease) both;
}
.held__auftritt--1 { animation-delay: 0.1s; }
.held__auftritt--3 { animation-delay: 0.6s; }
.held__auftritt--4 { animation-delay: 0.75s; }
.held__auftritt--5 { animation-delay: 0.95s; }
.held__zeile-innen {
animation: tl-zeile 1s var(--tl-ease) both;
}
.held__zeile:nth-child(1) .held__zeile-innen { animation-delay: 0.18s; }
.held__zeile:nth-child(2) .held__zeile-innen { animation-delay: 0.3s; }
.held__zeile:nth-child(3) .held__zeile-innen { animation-delay: 0.42s; }
.held__strich {
animation: tl-strich 0.9s var(--tl-ease) 0.55s both;
}
.held__bild-innen {
transform-origin: 62% 58%;
animation: tl-foto 1.6s var(--tl-ease) 0.2s both, tl-zoom 24s ease-in-out 1.8s infinite alternate both;
}
.kopfbild-lebt .dash__balken i {
transform-origin: bottom;
animation: tl-balken 1s var(--tl-ease) both;
}
.dash__balken i:nth-child(1) { animation-delay: 1.4s; }
.dash__balken i:nth-child(2) { animation-delay: 1.46s; }
.dash__balken i:nth-child(3) { animation-delay: 1.52s; }
.dash__balken i:nth-child(4) { animation-delay: 1.58s; }
.dash__balken i:nth-child(5) { animation-delay: 1.64s; }
.dash__balken i:nth-child(6) { animation-delay: 1.7s; }
.dash__balken i:nth-child(7) { animation-delay: 1.76s; }
.kopfbild-lebt .dash__kurve {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: tl-linie 1.8s ease 1.6s forwards;
}
.kopfbild-lebt .dash__kurve--hell {
animation-delay: 1.9s;
}
.kopfbild-lebt .dash__flaeche {
animation: tl-blende 1.2s ease 2.4s both;
}
.kopfbild-lebt .dash__funke {
animation: tl-blende 1s ease 1.5s both;
}
.dash__liste li.ist-neu,
.handy__liste li.ist-neu {
animation: tl-neu 0.7s var(--tl-ease) both;
}
.dash__liste li.ist-neu b {
animation: tl-blinken 1.4s ease 0.4s 2;
}
.kopfbild-lebt .handy__meldung {
animation: tl-meldung 7s var(--tl-ease) 2.6s infinite both;
}
.held__knoten-licht {
transform-box: fill-box;
transform-origin: center;
animation: tl-knoten 3.4s ease-in-out infinite;
}
.held__knoten-licht:nth-of-type(3n + 1) { animation-delay: -1.1s; }
.held__knoten-licht:nth-of-type(3n + 2) { animation-delay: -2.3s; animation-duration: 4.2s; }
.held__knoten-licht:nth-of-type(4n) { animation-duration: 2.8s; }
.held__linien {
-webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 42%, #000 50%, transparent 58%, transparent 100%);
mask-image: linear-gradient(115deg, transparent 0%, transparent 42%, #000 50%, transparent 58%, transparent 100%);
-webkit-mask-size: 300% 100%;
mask-size: 300% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: tl-lichtlauf 7s ease-in-out 2s infinite both;
}
.seitenkopf--anfahrt .seitenkopf__fahrzeug {
animation: tl-anfahrt 2.6s cubic-bezier(0.55, 0, 0.2, 1) 0.2s both;
}
.seitenkopf--anfahrt .seitenkopf__licht {
animation: tl-scheinwerfer 3.2s ease-out 0.2s both;
}
.seitenkopf--anfahrt .seitenkopf__foto {
animation: tl-umgebung 1.1s ease-out 2.3s both;
}
.schirm {
animation: tl-schirm 0.9s var(--tl-ease) 0.1s both;
}
.sk__zeile {
animation: tl-zeile 0.45s var(--tl-ease) both;
}
.sk__zeile:nth-child(1) { animation-delay: 0.5s; }
.sk__zeile:nth-child(2) { animation-delay: 0.75s; }
.sk__zeile:nth-child(3) { animation-delay: 1s; }
.sk__zeile:nth-child(4) { animation-delay: 1.25s; }
.sk__zeile .sk__haken {
animation: tl-haken 0.4s var(--tl-ease) both;
}
.sk__zeile:nth-child(1) .sk__haken { animation-delay: 0.75s; }
.sk__zeile:nth-child(2) .sk__haken { animation-delay: 1s; }
.sk__zeile:nth-child(3) .sk__haken { animation-delay: 1.25s; }
.sk__zeile:nth-child(4) .sk__haken { animation-delay: 1.5s; }
.sk__fuss {
animation: tl-zeile 0.45s var(--tl-ease) 1.7s both;
}
.sk--anfrage {
animation: tl-zurueck 0.6s var(--tl-ease) 2.3s both;
}
.sk--angebot {
animation: tl-karte 0.65s var(--tl-ease) 2.35s both;
}
.sk__posten i {
animation: tl-balken-quer 0.5s var(--tl-ease) both;
}
.sk__posten li:nth-child(1) i { animation-delay: 2.8s; }
.sk__posten li:nth-child(2) i { animation-delay: 2.95s; }
.sk__posten li:nth-child(3) i { animation-delay: 3.1s; }
.sk__knopf {
animation: tl-knopf 0.7s ease-in-out 3.4s both;
}
.sk__hinweis {
animation: tl-zeile 0.45s var(--tl-ease) 3.7s both;
}
.kal__spalte {
animation: tl-termin 0.4s var(--tl-ease) both;
}
.kal__spalte:nth-child(8) { animation-delay: 0.5s; }
.kal__spalte:nth-child(9) { animation-delay: 0.62s; }
.kal__spalte:nth-child(10) { animation-delay: 0.74s; }
.kal__spalte:nth-child(11) { animation-delay: 0.86s; }
.kal__spalte:nth-child(12) { animation-delay: 0.98s; }
.kal__spalte:nth-child(14) { animation-delay: 1.1s; }
.kal__spalte:nth-child(15) { animation-delay: 1.22s; }
.kal__spalte:nth-child(16) { animation-delay: 1.34s; }
.kal__spalte:nth-child(17) { animation-delay: 1.46s; }
.kal__spalte:nth-child(18) { animation-delay: 1.58s; }
.kal__termin--wieder::before {
content: "Kontrolle";
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-left: 0.25em solid #1a8fe0;
border-radius: inherit;
background: #e3f1fd;
color: #0b4f8c;
animation: tl-ausblenden 0.5s ease 2.3s both;
}
.kal__meldung {
animation: tl-meldung-ein 0.6s var(--tl-ease) 2.8s both;
}
.kal__kopf .schirm__chip {
animation: tl-zeile 0.45s var(--tl-ease) 3.4s both;
}
.netz__mitte {
animation: tl-wabe-plopp 0.6s var(--tl-ease) 0.1s both;
}
.netz__system {
animation: tl-wabe-plopp 0.5s var(--tl-ease) both;
}
.netz__system:nth-child(2) { animation-delay: 0.3s; }
.netz__system:nth-child(3) { animation-delay: 0.42s; }
.netz__system:nth-child(4) { animation-delay: 0.54s; }
.netz__system:nth-child(5) { animation-delay: 0.66s; }
.netz__system:nth-child(6) { animation-delay: 0.78s; }
.netz__system:nth-child(7) { animation-delay: 0.9s; }
.netz__linie {
animation: tl-linie-zeichnen 0.5s ease-out both;
}
.netz__linie:nth-child(1) { animation-delay: 1s; }
.netz__linie:nth-child(2) { animation-delay: 1.08s; }
.netz__linie:nth-child(3) { animation-delay: 1.16s; }
.netz__linie:nth-child(4) { animation-delay: 1.24s; }
.netz__linie:nth-child(5) { animation-delay: 1.32s; }
.netz__linie:nth-child(6) { animation-delay: 1.4s; }
.netz__fracht:nth-child(9) { animation: tl-fracht-1 1.3s ease-in-out 1.6s both; }
.netz__fracht:nth-child(10) { animation: tl-fracht-2 1.3s ease-in-out 2.35s both; }
.netz__fracht:nth-child(11) { animation: tl-fracht-3 1.3s ease-in-out 3.1s both; }
.waben__knoten {
animation: tl-puls 3.2s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.waben__knoten:nth-of-type(3n + 1) { animation-delay: -0.8s; }
.waben__knoten:nth-of-type(3n + 2) { animation-delay: -1.9s; }
.waben__knoten:nth-of-type(4n) { animation-duration: 4.1s; }
.waben__lauf {
animation: tl-lauf 6s linear infinite;
}
.waben__lauf:nth-of-type(2n) { animation-delay: -2s; animation-duration: 7.5s; }
.waben__lauf:nth-of-type(3n) { animation-delay: -4.2s; animation-duration: 8.5s; }
.bewegung-aus .waben__knoten,
.bewegung-aus .waben__lauf {
animation: none;
}
.bewegung-aus .held__bild-innen,
.bewegung-aus .held__knoten-licht,
.bewegung-aus .held__linien,
.bewegung-aus .handy__meldung,
.bewegung-aus .dash__liste li.ist-neu b {
animation-play-state: paused;
}
.bewegung-aus .waben__lauf {
opacity: 0;
}
.zeigen-bereit [data-zeigen] {
transition: opacity 0.8s var(--tl-ease), transform 0.8s var(--tl-ease);
}
.zeigen-bereit [data-zeigen]:not(.ist-sichtbar) {
opacity: 0;
transform: translateY(26px);
}
.zeigen-bereit .karte[data-zeigen]:nth-child(2) { transition-delay: 0.08s; }
.zeigen-bereit .karte[data-zeigen]:nth-child(3) { transition-delay: 0.16s; }
.zeigen-bereit .karte[data-zeigen]:nth-child(4) { transition-delay: 0.24s; }
.zeigen-bereit .kennzahl[data-zeigen]:nth-child(2) { transition-delay: 0.1s; }
.zeigen-bereit .kennzahl[data-zeigen]:nth-child(3) { transition-delay: 0.2s; }
.zeigen-bereit .kennzahl[data-zeigen]:nth-child(4) { transition-delay: 0.3s; }
.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__nummer,
.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__icon,
.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__titel,
.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__text {
opacity: 0;
}
.zeigen-bereit .schritte:not(.ist-sichtbar) .schritt__pfeil {
clip-path: inset(0 100% 0 0);
}
.schritte.ist-sichtbar .schritt__nummer {
animation: tl-plopp 0.7s var(--tl-ease) both;
}
.schritte.ist-sichtbar .schritt__icon,
.schritte.ist-sichtbar .schritt__titel,
.schritte.ist-sichtbar .schritt__text {
animation: tl-auf 0.8s var(--tl-ease) both;
}
.schritte.ist-sichtbar .schritt__pfeil {
animation: tl-ziehen 0.7s var(--tl-ease) both;
}
.schritte.ist-sichtbar .schritt:nth-child(1) > * { animation-delay: 0.05s; }
.schritte.ist-sichtbar .schritt:nth-child(1) .schritt__pfeil { animation-delay: 0.45s; }
.schritte.ist-sichtbar .schritt:nth-child(2) > * { animation-delay: 0.55s; }
.schritte.ist-sichtbar .schritt:nth-child(2) .schritt__pfeil { animation-delay: 0.95s; }
.schritte.ist-sichtbar .schritt:nth-child(3) > * { animation-delay: 1.05s; }
.schritte.ist-sichtbar .schritt:nth-child(3) .schritt__pfeil { animation-delay: 1.45s; }
.schritte.ist-sichtbar .schritt:nth-child(4) > * { animation-delay: 1.55s; }
.schritt:hover .schritt__nummer {
background: var(--tl-blau);
border-color: var(--tl-blau);
transition: background-color 0.25s ease;
}
.schritt:hover .schritt__icon {
transform: translateY(-3px);
transition: transform 0.35s var(--tl-ease);
}
.merkmal .merkmal__icon {
transition: transform 0.6s var(--tl-ease);
}
.merkmal:hover .icon--zahnrad {
transform: rotate(90deg);
}
.merkmal:hover .icon--uhr .zeiger,
.held__merkmale.ist-aktiv .icon--uhr .zeiger {
transform-box: view-box;
transform-origin: 12px 12px;
animation: tl-zeiger 1.2s var(--tl-ease) both;
}
.merkmal:hover .icon--diagramm .pfeil {
animation: tl-anstieg 0.8s var(--tl-ease) both;
}
.merkmal:hover .icon--haken-kreis .haken {
stroke-dasharray: 16;
animation: tl-haken 0.6s ease both;
}
.knopf--glanz:hover::after,
.knopf--glanz:focus-visible::after {
transform: translateX(120%);
transition: transform 0.9s var(--tl-ease);
}
.karte:hover .illu__balken rect,
.karte:focus-within .illu__balken rect {
transform-box: fill-box;
transform-origin: bottom;
animation: tl-balken 0.7s var(--tl-ease) both;
}
.karte:hover .illu__balken rect:nth-child(2) { animation-delay: 0.05s; }
.karte:hover .illu__balken rect:nth-child(3) { animation-delay: 0.1s; }
.karte:hover .illu__balken rect:nth-child(4) { animation-delay: 0.15s; }
.karte:hover .illu__balken rect:nth-child(5) { animation-delay: 0.2s; }
.karte:hover .illu__kurve,
.karte:focus-within .illu__kurve {
stroke-dasharray: 1;
animation: tl-linie-neu 0.9s ease both;
}
.karte:hover .illu__blasen rect,
.karte:focus-within .illu__blasen rect {
animation: tl-blase 0.5s var(--tl-ease) both;
transform-box: fill-box;
transform-origin: left center;
}
.karte:hover .illu__blasen rect:nth-child(2) { animation-delay: 0.12s; }
.karte:hover .illu__blasen rect:nth-child(3) { animation-delay: 0.24s; }
.karte:hover .illu__blasen rect:nth-child(4) { animation-delay: 0.36s; }
.karte:hover .illu__blasen rect:nth-child(5) { animation-delay: 0.48s; }
.karte:hover .illu__tippen circle {
animation: tl-tippen 0.9s ease-in-out infinite;
}
.karte:hover .illu__tippen circle:nth-child(2) { animation-delay: 0.15s; }
.karte:hover .illu__tippen circle:nth-child(3) { animation-delay: 0.3s; }
.illu__pulse path {
stroke-dasharray: 0.12 1;
stroke-dashoffset: 1.12;
opacity: 0;
}
.karte:hover .illu__pulse path,
.karte:focus-within .illu__pulse path {
opacity: 1;
animation: tl-impuls 1.4s linear infinite;
}
.karte:hover .illu__pulse path:nth-child(2) { animation-delay: 0.45s; }
.karte:hover .illu__pulse path:nth-child(3) { animation-delay: 0.9s; }
.karte:hover .illu__stift {
animation: tl-schreiben 1.6s ease-in-out infinite;
}
.ablauf-dialog[open] {
animation: tl-dialog 0.45s var(--tl-ease) both;
}
.menue[open] .menue__flaeche {
animation: tl-menue 0.45s var(--tl-ease) both;
}
.menue[open] .menue__zu .menue-zeichen__linie {
animation: tl-striche-weg 0.3s var(--tl-ease) both;
}
.menue[open] .menue__zu .menue-zeichen__linie--2 { animation-delay: 0.05s; }
.menue[open] .menue__zu .menue-zeichen__linie--3 { animation-delay: 0.1s; }
.menue[open] .menue__zu .menue-zeichen__wabe {
animation: tl-wabe-auf 0.6s var(--tl-ease) 0.1s both;
}
.kopf__menueknopf.ist-zurueck .menue-zeichen__wabe {
animation: tl-wabe-zu 0.4s ease-in both;
}
.kopf__menueknopf.ist-zurueck .menue-zeichen__linie {
animation: tl-striche-auf 0.35s var(--tl-ease) 0.2s both;
}
.kopf__menueknopf.ist-zurueck .menue-zeichen__linie--2 { animation-delay: 0.26s; }
.kopf__menueknopf.ist-zurueck .menue-zeichen__linie--3 { animation-delay: 0.32s; }
.folie.ist-aktiv .folie__ring {
animation: tl-ring 4s ease-in-out infinite;
}
.folie.ist-aktiv .folie__icon {
animation: tl-plopp 0.7s var(--tl-ease) both;
}
.folie.ist-aktiv .folie__text > * {
animation: tl-auf 0.7s var(--tl-ease) both;
}
.folie.ist-aktiv .folie__titel { animation-delay: 0.08s; }
.folie.ist-aktiv .folie__beschreibung { animation-delay: 0.16s; }
.praesentation.laeuft .praesentation__punkt[aria-current="step"] .praesentation__fuellung {
animation: tl-fuellen var(--tl-folie-dauer, 5s) linear both;
}
}
@keyframes tl-auf {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: none; }
}
@keyframes tl-zeile {
from { transform: translateY(105%); }
to { transform: none; }
}
@keyframes tl-strich {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes tl-foto {
from { opacity: 0.01; translate: 48px 18px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes tl-blende {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes tl-neu {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
@keyframes tl-blinken {
50% { background: #1a8fe0; color: #ffffff; }
}
@keyframes tl-meldung {
0%, 6% { opacity: 0; transform: translateY(8px); }
12%, 52% { opacity: 1; transform: none; }
60%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes tl-knoten {
0%, 100% { opacity: 0.25; transform: scale(0.75); }
50% { opacity: 0.95; transform: scale(1.25); }
}
@keyframes tl-lichtlauf {
0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
70%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@keyframes tl-anfahrt {
from { scale: 0.16; opacity: 0; filter: brightness(0.5) blur(1.5px); }
12% { opacity: 1; }
75% { filter: brightness(0.95) blur(0); }
to { scale: 1; opacity: 1; filter: none; }
}
@keyframes tl-scheinwerfer {
0% { scale: 1.8; opacity: 1; }
70% { scale: 1.1; opacity: 1; }
80% { scale: 1.35; opacity: 1; }
100% { scale: 1; opacity: 0.4; }
}
@keyframes tl-umgebung {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes tl-schirm {
from { opacity: 0; translate: 0 24px; scale: 0.96; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes tl-zeile {
from { opacity: 0; translate: -0.8em 0; }
to { opacity: 1; translate: 0 0; }
}
@keyframes tl-haken {
from { opacity: 0; scale: 0.3; }
70% { opacity: 1; scale: 1.2; }
to { opacity: 1; scale: 1; }
}
@keyframes tl-zurueck {
from { opacity: 1; scale: 1; translate: 0 0; }
to { opacity: 0.7; scale: 0.97; translate: 0 -2%; }
}
@keyframes tl-karte {
from { opacity: 0; translate: 0 40%; }
to { opacity: 1; translate: 0 0; }
}
@keyframes tl-balken-quer {
from { scale: 0 1; }
to { scale: 1 1; }
}
@keyframes tl-knopf {
0%, 100% { scale: 1; box-shadow: 0 0 0 0 rgba(0, 167, 254, 0); }
50% { scale: 1.06; box-shadow: 0 0 0 0.5em rgba(0, 167, 254, 0.25); }
}
@keyframes tl-termin {
from { opacity: 0; scale: 0.85; }
to { opacity: 1; scale: 1; }
}
@keyframes tl-ausblenden {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes tl-meldung-ein {
from { opacity: 0; translate: 120% 0; }
to { opacity: 1; translate: 0 0; }
}
@keyframes tl-wabe-plopp {
from { opacity: 0; scale: 0.55; }
to { opacity: 1; scale: 1; }
}
@keyframes tl-linie-zeichnen {
from { stroke-dashoffset: 50; }
to { stroke-dashoffset: 0; }
}
@keyframes tl-fracht-1 {
from { opacity: 0; translate: 100px 180px; }
12% { opacity: 1; }
50% { translate: 240px 180px; }
88% { opacity: 1; }
to { opacity: 0; translate: 380px 180px; }
}
@keyframes tl-fracht-2 {
from { opacity: 0; translate: 170px 58.8px; }
12% { opacity: 1; }
50% { translate: 240px 180px; }
88% { opacity: 1; }
to { opacity: 0; translate: 310px 58.8px; }
}
@keyframes tl-fracht-3 {
from { opacity: 0; translate: 170px 301.2px; }
12% { opacity: 1; }
50% { translate: 240px 180px; }
88% { opacity: 1; }
to { opacity: 0; translate: 310px 301.2px; }
}
@keyframes tl-zoom {
from { scale: 1.02; }
to { scale: 1.06; }
}
@keyframes tl-balken {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
@keyframes tl-linie {
to { stroke-dashoffset: 0; }
}
@keyframes tl-linie-neu {
from { stroke-dashoffset: 1; }
to { stroke-dashoffset: 0; }
}
@keyframes tl-puls {
0%, 100% { opacity: 0.55; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.35); }
}
@keyframes tl-lauf {
0% { opacity: 0; stroke-dashoffset: 360; }
10% { opacity: 0.9; }
60% { opacity: 0.9; }
75%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes tl-plopp {
0% { opacity: 0; transform: scale(0.4); }
70% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: none; }
}
@keyframes tl-ziehen {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes tl-zeiger {
from { transform: rotate(-360deg); }
to { transform: rotate(0); }
}
@keyframes tl-anstieg {
0% { transform: translate(-2px, 2px); opacity: 0.4; }
100% { transform: none; opacity: 1; }
}
@keyframes tl-haken {
from { stroke-dashoffset: 16; }
to { stroke-dashoffset: 0; }
}
@keyframes tl-blase {
from { opacity: 0; transform: scaleX(0.3); }
to { opacity: 1; transform: none; }
}
@keyframes tl-tippen {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@keyframes tl-impuls {
from { stroke-dashoffset: 1.12; }
to { stroke-dashoffset: 0; }
}
@keyframes tl-schreiben {
0%, 100% { transform: translate(0, 0); }
30% { transform: translate(-6px, 4px); }
60% { transform: translate(4px, 2px); }
}
@keyframes tl-dialog {
from { opacity: 0; transform: translateY(24px) scale(0.97); }
to { opacity: 1; transform: none; }
}
@keyframes tl-menue {
from { transform: translateX(100%); }
to { transform: none; }
}
@keyframes tl-striche-weg {
from { opacity: 1; scale: 1 1; }
to { opacity: 0; scale: 0 1; }
}
@keyframes tl-striche-auf {
from { opacity: 0; scale: 0 1; }
to { opacity: 1; scale: 1 1; }
}
@keyframes tl-wabe-auf {
from { opacity: 0; stroke-dashoffset: 64; rotate: -60deg; }
15% { opacity: 1; }
to { opacity: 1; stroke-dashoffset: 0; rotate: 0deg; }
}
@keyframes tl-wabe-zu {
from { opacity: 1; stroke-dashoffset: 0; rotate: 0deg; }
85% { opacity: 1; }
to { opacity: 0; stroke-dashoffset: -64; rotate: 60deg; }
}
@keyframes tl-ring {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.05); opacity: 1; }
}
@keyframes tl-fuellen {
from { transform: translateY(-50%) scaleX(0); }
to { transform: translateY(-50%) scaleX(1); }
}
:root {
--zugang-rand: max(20px, env(safe-area-inset-left, 0px));
--zugang-unten: max(20px, env(safe-area-inset-bottom, 0px));
--zugang-groesse: 56px;
--zugang-ueber: calc(var(--zugang-unten) + var(--zugang-groesse) + 12px);
}
@media (max-width: 640px) {
:root {
--zugang-rand: max(16px, env(safe-area-inset-left, 0px));
--zugang-unten: max(16px, env(safe-area-inset-bottom, 0px));
--zugang-groesse: 48px;
}
}
.zugang-knopf {
position: fixed;
left: var(--zugang-rand);
bottom: var(--zugang-unten);
z-index: 59;
display: inline-grid;
place-items: center;
width: var(--zugang-groesse);
height: var(--zugang-groesse);
padding: 0;
border: 1px solid rgba(60, 184, 255, 0.45);
border-radius: 50%;
background: var(--tl-nacht);
box-shadow: 0 14px 34px -14px rgba(0, 7, 14, 0.8), 0 0 0 4px rgba(0, 167, 254, 0.08);
color: #ffffff;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
}
.js-frueh .zugang-knopf[hidden] {
display: inline-grid;
}
.zugang-knopf .icon {
width: 30px;
height: 30px;
stroke-width: 1.5;
}
.zugang-knopf:hover,
.zugang-knopf:focus-visible,
.zugang-knopf[aria-expanded="true"] {
border-color: var(--tl-blau);
background: #031726;
}
.zugang-knopf:focus-visible {
outline-color: var(--tl-blau);
}
.zugang-knopf[hidden],
.fuss__zugang[hidden] {
display: none;
}
.einwilligung-offen .zugang-knopf {
display: none !important;
}
@media (max-width: 640px) {
html.ki-offen .zugang-knopf {
display: none;
}
}
.fuss__zugang {
display: block;
}
.fuss {
padding-bottom: 76px;
}
.anzeige {
position: fixed;
inset: auto auto var(--zugang-ueber) var(--zugang-rand);
width: min(400px, calc(100vw - 2 * var(--zugang-rand)));
max-width: none;
height: auto;
max-height: min(640px, calc(100vh - var(--zugang-ueber) - 16px));
max-height: min(640px, calc(100dvh - var(--zugang-ueber) - 16px));
margin: 0;
padding: 0 22px 22px;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid rgba(60, 184, 255, 0.35);
border-radius: 18px;
background: var(--tl-nacht);
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
color: var(--tl-text-hell);
font-size: 1rem;
line-height: 1.5;
}
.anzeige[open] {
display: flex;
flex-direction: column;
gap: 22px;
}
.anzeige::backdrop {
background: rgba(0, 7, 14, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
.anzeige[open] {
transform-origin: left bottom;
animation: anzeige-auf 0.18s ease-out;
}
}
.bewegung-aus .anzeige[open] {
animation: none;
}
@keyframes anzeige-auf {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.anzeige :focus-visible {
outline-color: #ffffff;
}
.anzeige__kopf {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 -22px;
padding: 12px 22px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: var(--tl-nacht);
}
.anzeige__titel {
display: flex;
align-items: center;
gap: 12px;
color: #ffffff;
font-family: var(--tl-schrift-titel);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.25;
}
.anzeige__titel .icon {
width: 30px;
height: 30px;
color: var(--tl-blau-titel);
stroke-width: 1.5;
}
.anzeige__zu {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
flex: none;
margin-right: -10px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #ffffff;
cursor: pointer;
}
.anzeige__zu:hover,
.anzeige__zu:focus-visible {
background: rgba(255, 255, 255, 0.1);
}
.anzeige__hinweis {
color: var(--tl-grau-dunkel);
font-size: 0.9375rem;
}
.anzeige__gruppe {
display: grid;
gap: 12px;
min-width: 0;
margin: 0;
padding: 20px 0 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.anzeige__legende {
float: left;
width: 100%;
margin: 0 0 12px;
padding: 0;
color: #ffffff;
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
}
.anzeige__legende + * {
clear: both;
}
.anzeige__unterlegende {
float: left;
width: 100%;
margin: 4px 0 8px;
padding: 0;
color: var(--tl-grau-dunkel);
font-size: 0.875rem;
font-weight: 500;
}
.anzeige__klein {
color: var(--tl-grau-dunkel);
font-size: 0.875rem;
}
.anzeige__fehlt {
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--tl-radius);
color: var(--tl-text-hell);
font-size: 0.9375rem;
}
.anzeige__vorlesen {
display: grid;
gap: 12px;
}
.anzeige__vorlesen[hidden],
.anzeige__fehlt[hidden] {
display: none;
}
.anzeige__vorlesen-knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 20px;
border: 0;
border-radius: var(--tl-radius);
background: var(--tl-blau);
color: var(--tl-tinte);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.anzeige__vorlesen-knopf:hover,
.anzeige__vorlesen-knopf:focus-visible {
background: #3cb8ff;
}
.anzeige__stufen {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.anzeige__gruppe.anzeige__stufen {
padding-top: 20px;
}
.anzeige__stufen--tempo,
.anzeige__stufen--schrift {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.anzeige__stufen--schrift {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.anzeige__stufen--tempo > legend,
.anzeige__stufen--schrift > legend {
grid-column: 1 / -1;
margin-bottom: 0;
}
.anzeige__stufe {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.anzeige__stufe input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.anzeige__stufe > span {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--tl-radius);
color: var(--tl-text-hell);
font-size: 0.9375rem;
text-align: center;
white-space: nowrap;
}
.anzeige__stufe input:checked + span {
border-color: var(--tl-blau);
background: var(--tl-blau);
color: var(--tl-tinte);
font-weight: 600;
}
.anzeige__stufe input:focus-visible + span {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
.anzeige__stufe input:hover + span {
border-color: var(--tl-blau);
}
.anzeige__muster {
font-family: var(--tl-schrift-titel);
font-weight: 700;
line-height: 1;
}
.anzeige__stufe--0 .anzeige__muster { font-size: 0.875rem; }
.anzeige__stufe--1 .anzeige__muster { font-size: 1rem; }
.anzeige__stufe--2 .anzeige__muster { font-size: 1.125rem; }
.anzeige__stufe--3 .anzeige__muster { font-size: 1.3125rem; }
.anzeige__schalter {
display: grid;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.anzeige__schalter li {
display: grid;
gap: 0;
}
.anzeige__schalter-knopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
min-height: 44px;
padding: 6px 0;
border: 0;
background: none;
color: #ffffff;
font: inherit;
font-weight: 500;
text-align: left;
cursor: pointer;
}
.anzeige__regler {
position: relative;
width: 46px;
height: 26px;
flex: none;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
transition: background-color 0.2s;
}
.anzeige__regler::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
transition: transform 0.2s var(--tl-ease);
}
.anzeige__schalter-knopf[aria-checked="true"] .anzeige__regler {
border-color: var(--tl-blau);
background: var(--tl-blau);
}
.anzeige__schalter-knopf[aria-checked="true"] .anzeige__regler::after {
background: var(--tl-tinte);
transform: translateX(20px);
}
.anzeige__schalter-text {
padding-bottom: 8px;
color: var(--tl-grau-dunkel);
font-size: 0.875rem;
}
.anzeige__fuss {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.anzeige__zuruecksetzen {
min-height: 44px;
padding: 0 18px;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: var(--tl-radius);
background: transparent;
color: #ffffff;
font: inherit;
font-weight: 500;
cursor: pointer;
}
.anzeige__zuruecksetzen:hover,
.anzeige__zuruecksetzen:focus-visible {
border-color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
.anzeige__hilfe {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--tl-blau-hell);
text-decoration: underline;
text-underline-offset: 3px;
}
html {
scroll-padding-bottom: 96px;
}
html.liest-vor {
scroll-padding-bottom: 150px;
}
.vorlese-leiste {
position: fixed;
bottom: var(--zugang-ueber);
left: var(--zugang-rand);
z-index: 90;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
max-width: calc(100% - 32px);
padding: 6px 6px 6px 16px;
border: 1px solid var(--tl-blau);
border-radius: 28px;
background: var(--tl-nacht);
color: #ffffff;
box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
font-size: 0.9375rem;
}
.vorlese-leiste[hidden] {
display: none;
}
.vorlese-leiste > .icon {
width: 22px;
height: 22px;
color: var(--tl-blau-titel);
}
.vorlese-leiste__stand {
min-width: 5.5em;
}
.vorlese-leiste__knopf {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 22px;
background: transparent;
color: #ffffff;
font: inherit;
cursor: pointer;
}
.vorlese-leiste__knopf:hover,
.vorlese-leiste__knopf:focus-visible {
border-color: #ffffff;
background: rgba(255, 255, 255, 0.1);
}
.vorlese-leiste :focus-visible {
outline-color: #ffffff;
}
.vorlese-leiste__knopf .icon {
width: 18px;
height: 18px;
}
.vorlese-leiste .icon--play {
display: none;
fill: currentColor;
}
.vorlese-leiste.ist-angehalten .icon--play {
display: block;
}
.vorlese-leiste.ist-angehalten .icon--pause {
display: none;
}
.vorlese-leiste .icon--stopp {
fill: currentColor;
stroke: none;
}
@media (max-width: 420px) {
.vorlese-leiste {
gap: 8px;
padding-left: 12px;
}
.vorlese-leiste__knopf {
padding: 0 10px;
}
}
.vorlesen-aktiv {
border-radius: 3px;
outline: 3px solid var(--tl-blau) !important;
outline-offset: 4px;
background-color: rgba(0, 167, 254, 0.12);
}
.einfach-bereich {
padding: 28px 0 0;
background: var(--tl-weiss);
}
.einfach {
max-width: 72ch;
border-left: 4px solid var(--tl-blau-text);
border-radius: 0 var(--tl-radius) var(--tl-radius) 0;
background: #eef6fc;
color: var(--tl-tinte);
}
.einfach > summary {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 10px 18px;
color: var(--tl-tinte);
font-weight: 600;
cursor: pointer;
list-style: none;
}
.einfach > summary::-webkit-details-marker {
display: none;
}
.einfach > summary::after {
content: "";
width: 9px;
height: 9px;
margin-left: auto;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
}
.einfach[open] > summary::after {
transform: translateY(2px) rotate(-135deg);
}
.einfach > summary .icon {
width: 22px;
height: 22px;
color: var(--tl-blau-text);
}
.einfach__text {
display: grid;
gap: 6px;
padding: 0 18px 18px 50px;
font-size: 1.0625rem;
line-height: 1.65;
}
.anzeige-einfach .einfach {
max-width: none;
border-left-width: 6px;
background: #e3f1fb;
}
.anzeige-einfach .einfach__text {
font-size: 1.1875rem;
}
html.anzeige-schrift-1 { font-size: 112.5%; }
html.anzeige-schrift-2 { font-size: 125%; }
html.anzeige-schrift-3 { font-size: 150%; }
html[class*="anzeige-schrift-"] :is(h1, h2, h3, h4, p, li, dd, dt, td, th, summary, label, address, a, .titel-2) {
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: anywhere;
}
html[class*="anzeige-schrift-"] .knopf {
max-width: 100%;
padding-block: 8px;
text-align: center;
white-space: normal;
}
html[class*="anzeige-schrift-"] .karte {
height: auto;
min-height: 300px;
}
html[class*="anzeige-schrift-"] .karte__inhalt {
height: auto;
padding-bottom: 184px;
}
html[class*="anzeige-schrift-"] .karte__bild {
height: 168px;
}
html[class*="anzeige-schrift-"] :is(.karte__text, .schritt__text, .ablauf__text) {
max-width: none !important;
}
.anzeige-zeilen :is(main, .fuss, .ki__verlauf, .anzeige) :is(p, li, dd, dt, td, th, blockquote, summary, figcaption, label, address):not([aria-hidden="true"] *) {
line-height: 1.9 !important;
}
.anzeige-zeilen :is(main, .fuss) :is(h1, h2, h3, h4):not([aria-hidden="true"] *) {
line-height: 1.45 !important;
}
.anzeige-zeilen main :is(p, ul, ol, dl, blockquote) + :is(p, ul, ol, dl, blockquote, h2, h3, h4) {
margin-top: 1.5em;
}
.anzeige-zeilen main {
word-spacing: 0.08em;
}
.anzeige-links a:not(.knopf):not(.logo):not(.sprunglink) {
text-decoration-line: underline !important;
text-decoration-thickness: max(1px, 0.08em);
text-underline-offset: 0.2em;
}
html.bewegung-aus {
scroll-behavior: auto !important;
}
.bewegung-aus *,
.bewegung-aus *::before,
.bewegung-aus *::after {
animation-duration: 0.001ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
.bewegung-aus.zeigen-bereit [data-zeigen]:not(.ist-sichtbar) {
opacity: 1;
transform: none;
}
.anzeige-lesen :is(.waben, .held__bild, .held__hintergrund, .seitenkopf__bild, .seitenkopf__zeichen, .seitenleiste, .systeme, .bewegung-schalter, .abschluss) {
display: none !important;
}
.anzeige-lesen .seite__raster {
grid-template-columns: minmax(0, 1fr);
}
.anzeige-lesen :is(.prosa, .einfach) {
max-width: 66ch;
margin-inline: auto;
}
.anzeige-lesen .prosa {
font-size: 1.125rem;
}
.anzeige-lesen .seitenkopf__raster {
grid-template-columns: minmax(0, 1fr);
}
.anzeige-lesen .seitenkopf__text {
max-width: 66ch;
}
.anzeige-kontrast {
--tl-grau-dunkel: #ffffff;
--tl-grau-hell: #08111b;
--tl-text-hell: #ffffff;
--tl-blau-text: #00508a;
--tl-blau-hell: #9fdcff;
--tl-blau-titel: #6fcbff;
--tl-linie-dunkel: rgba(255, 255, 255, 0.6);
}
.anzeige-kontrast .prosa,
.anzeige-kontrast .prosa :is(p, li, dd, dt, td, th, blockquote, figcaption) {
color: #000000;
}
.anzeige-kontrast :is(.kopf, .held, .seitenkopf, .stimmen, .abschluss, .fuss, .systeme, .menue, .anzeige, .vorlese-leiste) :is(p, li, dd, dt, address, small, figcaption):not(.ueberzeile):not([aria-hidden="true"] *) {
color: #ffffff;
}
.anzeige-kontrast :is(.anzeige__regler, .anzeige__stufe > span, .anzeige__zuruecksetzen, .vorlese-leiste__knopf, .zugang-knopf) {
border-color: #ffffff;
}
.anzeige-kontrast :focus-visible {
outline-width: 4px;
}
@media (forced-colors: active) {
.anzeige__regler {
border: 2px solid ButtonText;
}
.anzeige__regler::after {
background: ButtonText;
}
.anzeige__schalter-knopf[aria-checked="true"] .anzeige__regler {
border-color: Highlight;
background: Highlight;
}
.anzeige__schalter-knopf[aria-checked="true"] .anzeige__regler::after {
background: HighlightText;
}
.anzeige__stufe input:checked + span {
border: 3px solid Highlight;
}
.vorlesen-aktiv {
outline-color: Highlight !important;
}
.einfach {
border: 1px solid CanvasText;
border-left-width: 4px;
}
}
.einfach-bereich--dunkel {
padding: 0 0 32px;
background: var(--tl-nacht);
}
.einfach-bereich--dunkel .einfach {
border-left-color: var(--tl-blau);
background: var(--tl-karte-dunkel);
color: var(--tl-text-hell);
}
.einfach-bereich--dunkel .einfach > summary {
color: #ffffff;
}
.einfach-bereich--dunkel .einfach > summary .icon {
color: var(--tl-blau-titel);
}
.einfach-bereich--dunkel :focus-visible {
outline-color: #ffffff;
}
.anzeige-einfach .einfach-bereich--dunkel .einfach {
background: #10263a;
}
.einfach-bereich + .seite {
padding-top: 40px;
}
html[class*="anzeige-schrift-"] .badge-beleg {
max-width: calc(100% - 8px);
white-space: normal;
}