@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/fonts/archivo-500-800-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-400-700-latin.woff2") format("woff2");
}
:root {
  color-scheme: only light;
  --abr-blau: #1c76bc;
  --abr-blau-dunkel: #155f99;
  --abr-blau-tief: #0e2c4a;
  --abr-blau-hell: #5aa7e8;
  --abr-blau-zart: #e8f1fa;
  --rohr-grau: #9c9ca0;
  --logo-text: #222326;
  --siegel-rot: #8c1028;
  --grund: #f8fafc;
  --flaeche: #f3f6fa;
  --text: #1f2328;
  --text-leise: #4a5260;
  --linie: #dce3ec;
  --linie-stark: #c3cedb;
  --ort-verlauf: linear-gradient(135deg, #f7fafd, #fff 45%, #eff5fc);
  --linie-feld: #7d8a9b;
  --wa-gruen: #167a45;
  --wa-gruen-dunkel: #10603a;
  --warn-flaeche: #fff6db;
  --warn-rand: #e9b949;
  --warn-text: #6b4600;
  --fehler: #b42318;
  --fokus: #0f4c7d;
  --schrift-titel: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --schrift-text: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gr-h1: clamp(1.75rem, 1.2rem + 2.3vw, 3rem);
  --gr-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem);
  --gr-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem);
  --gr-gross: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --gr-text: clamp(1.0625rem, 1.03rem + 0.12vw, 1.125rem);
  --gr-klein: 0.9375rem;
  --gr-mini: 0.8125rem;
  --zh-titel: 1.1;
  --zh-text: 1.6;
  --lw-titel: -0.02em;
  --a-1: 0.25rem; --a-2: 0.5rem; --a-3: 0.75rem; --a-4: 1rem; --a-5: 1.5rem;
  --a-6: 2rem; --a-7: 3rem; --a-8: 4rem; --a-9: 6rem;
  --abschnitt: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  --breite: 75rem;
  --breite-text: 42rem;
  --rand: clamp(1rem, 0.4rem + 2.4vw, 2rem);
  --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-xl: 24px; --r-rund: 999px;
  --schatten-1: 0 1px 2px rgba(14, 44, 74, 0.06), 0 1px 3px rgba(14, 44, 74, 0.08);
  --schatten-2: 0 8px 24px rgba(14, 44, 74, 0.12);
  --schatten-3: 0 18px 44px rgba(14, 44, 74, 0.18);
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-schnell: 150ms; --t-mittel: 250ms; --t-langsam: 400ms;
  --kopf-h: 4rem;
  --leiste-h: 4rem;
}
@media (min-width: 64rem) {
  :root { --kopf-h: 5rem; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text-leise);
  font-family: var(--schrift-text);
  font-size: var(--gr-text);
  line-height: var(--zh-text);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, .titel-wie-h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: var(--zh-titel);
  letter-spacing: var(--lw-titel);
  text-wrap: pretty;
}
h1 { font-size: var(--gr-h1); }
h2, .titel-wie-h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0 0 var(--a-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--abr-blau-dunkel); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--abr-blau-tief); }
strong { color: var(--text); font-weight: 650; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
.dunkel { --fokus: #ffffff; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprunglink {
  position: absolute; left: var(--a-4); top: -10rem; z-index: 100;
  padding: var(--a-3) var(--a-4); background: var(--abr-blau-tief); color: #fff; border-radius: var(--r-m);
}
.sprunglink:focus { top: var(--a-4); color: #fff; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.ohne-umbruch { white-space: nowrap; }
@media (max-width: 63.999rem) { .nur-desktop { display: none !important; } }
@media (min-width: 64rem) { .nur-handy { display: none !important; } }
.container { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--dunkel { background: var(--abr-blau-tief); color: #c9d6e4; }
.abschnitt--dunkel h2, .abschnitt--dunkel .titel-wie-h2, .abschnitt--dunkel h3, .abschnitt--dunkel strong { color: #fff; }
.abschnitt--dunkel a:not(.knopf) { color: #fff; }
.abschnitt--eng { padding-block: calc(var(--abschnitt) * 0.6); }
.abschnitt--anschluss { padding-top: 0; }
.stand { font-family: var(--schrift-text); font-weight: 400; font-size: var(--gr-klein); color: var(--text-leise); }
.abschnitt__kopf { max-width: 48rem; margin-bottom: var(--a-7); }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }
.abschnitt__kopf--breit { max-width: none; }
.abschnitt__kopf > p { margin-top: var(--a-4); font-size: var(--gr-gross); }
.abschnitt__fuss { margin-top: var(--a-6); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--a-3);
  margin: 0 0 var(--a-4);
  color: var(--abr-blau-dunkel);
  font-family: var(--schrift-titel); font-size: var(--gr-klein); font-weight: 600; letter-spacing: 0.01em;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; border-radius: 2px; }
.dunkel .eyebrow, .abschnitt--dunkel .eyebrow { color: var(--abr-blau-hell); }
.einleitung { font-size: var(--gr-gross); color: var(--text-leise); }
.raster { display: grid; gap: var(--a-5); }
@media (min-width: 40rem) { .raster--2, .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2);
  min-height: 3rem; padding: 0.75rem 1.375rem;
  border: 2px solid transparent; border-radius: var(--r-m);
  font-family: var(--schrift-titel); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; letter-spacing: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-schnell) var(--kurve), color var(--t-schnell) var(--kurve), border-color var(--t-schnell) var(--kurve), transform var(--t-schnell) var(--kurve);
}
.knopf .icon { width: 1.2em; height: 1.2em; }
.knopf--primaer { background: var(--abr-blau); color: #fff; }
.knopf--primaer:hover { background: var(--abr-blau-dunkel); color: #fff; }
.knopf--wa { background: var(--wa-gruen); color: #fff; }
.knopf--wa:hover { background: var(--wa-gruen-dunkel); color: #fff; }
.knopf--sekundaer { background: #fff; color: var(--abr-blau-dunkel); border-color: var(--linie-stark); }
.knopf--sekundaer:hover { border-color: var(--abr-blau); color: var(--abr-blau-tief); }
.knopf--hell { background: #fff; color: var(--abr-blau-tief); }
.knopf--hell:hover { background: var(--abr-blau-zart); color: var(--abr-blau-tief); }
.knopf--gross { min-height: 3.5rem; padding: 0.875rem 1.75rem; font-size: 1.1875rem; }
.knopf:active { transform: translateY(1px); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--a-3); }
:where(a[aria-disabled="true"]) { text-decoration: underline; cursor: pointer; }
[data-k="TELEFON"] { white-space: nowrap; }
.pfeillink {
  display: inline-flex; align-items: center; gap: var(--a-2);
  font-family: var(--schrift-titel); font-weight: 600; text-decoration: none; color: var(--abr-blau-dunkel);
}
.pfeillink .icon { transition: transform var(--t-schnell) var(--kurve); }
.pfeillink:hover .icon { transform: translateX(3px); }
.textknopf {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.logo { --logo-blau: var(--abr-blau); --logo-rohr: var(--rohr-grau); --logo-duese: #85858b; --logo-claim: #5b6472; }
.logo__blau { fill: var(--logo-blau); }
.logo__rohr { fill: var(--logo-rohr); }
.logo__duese { fill: var(--logo-duese); }
.logo__schrift { fill: currentColor; font-family: var(--schrift-titel); font-weight: 700; font-size: 64px; letter-spacing: -0.01em; }
.logo__claim { fill: var(--logo-claim); font-family: var(--schrift-text); font-weight: 400; font-size: 29px; }
.fuss .logo { --logo-blau: #4a9be0; --logo-claim: #b7c7d8; }
.kopf {
  position: relative; z-index: 50;
  background: #d6e7f6; border-bottom: 1px solid rgba(14, 44, 74, 0.1);
  transition: background-color var(--t-mittel) var(--kurve), border-color var(--t-mittel) var(--kurve);
}
@media (min-width: 64rem) { .kopf { position: sticky; top: 0; } }
.kopf[data-grund="weiss"] { background: var(--grund); border-bottom-color: var(--linie); }
.kopf[data-grund="flaeche"] { background: var(--flaeche); border-bottom-color: var(--linie); }
.kopf[data-grund="dunkel"] { background: var(--abr-blau-tief); border-bottom-color: rgba(255, 255, 255, 0.14); --fokus: #fff; }
.kopf :is(.kopf__logo, .kopf__24h, .hauptnav__liste > li > a, .hauptnav__knopf) { transition: color var(--t-mittel) var(--kurve); }
.kopf[data-grund="dunkel"] .kopf__logo { color: #fff; }
.kopf[data-grund="dunkel"] .logo { --logo-blau: #4a9be0; --logo-claim: #b7c7d8; }
.kopf[data-grund="dunkel"] :is(.hauptnav__liste > li > a, .hauptnav__knopf) { color: #fff; }
.kopf[data-grund="dunkel"] :is(.hauptnav__liste > li > a, .hauptnav__knopf):hover, .kopf[data-grund="dunkel"] .hauptnav a[aria-current="page"] { color: var(--abr-blau-hell); }
.kopf[data-grund="dunkel"] .kopf__24h { color: var(--abr-blau-hell); }
.kopf__innen { display: flex; align-items: center; gap: var(--a-5); height: var(--kopf-h); }
.kopf__logo { display: block; flex: none; color: var(--logo-text); text-decoration: none; }
.kopf__logo svg { height: 2.5rem; width: auto; }
@media (min-width: 64rem) { .kopf__logo svg { height: 2.875rem; } }
.kopf__rechts { display: flex; align-items: center; gap: var(--a-4); margin-left: auto; }
@media (max-width: 63.999rem) { .kopf__innen { gap: var(--a-3); } .kopf__rechts { gap: var(--a-2); } }
@media (max-width: 24rem) {
  .kopf__logo svg { height: 2.125rem; }
  .kopf__notdienst { font-size: 0.8125rem; }
  .kopf__menuetext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .leiste__knopf { font-size: 1rem; }
}
.kopf__24h {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1.125rem; color: var(--abr-blau-dunkel); text-decoration: none;
}
.kopf__24h .icon { width: 1.1em; height: 1.1em; }
.kopf__notdienst { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--schrift-titel); font-weight: 650; font-size: var(--gr-klein); color: var(--text); white-space: nowrap; }
.kopf__notdienst .icon { width: 1rem; height: 1rem; color: var(--abr-blau); }
.kopf__menueknopf {
  display: inline-flex; align-items: center; gap: var(--a-2);
  min-height: 2.75rem; padding: 0.5rem 0.25rem 0.5rem 0.5rem;
  border: 0; border-radius: var(--r-m); background: none; color: var(--text);
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1rem; cursor: pointer;
}
.kopf__menueknopf .icon { width: 1.5rem; height: 1.5rem; }
.kopf__menueknopf .icon--zu { display: none; }
.kopf.ist-offen .kopf__menueknopf .icon--auf { display: none; }
.kopf.ist-offen .kopf__menueknopf .icon--zu { display: block; }
.hauptnav__liste { list-style: none; }
.hauptnav a, .hauptnav__knopf { color: var(--text); text-decoration: none; font-family: var(--schrift-titel); font-weight: 600; }
.hauptnav a[aria-current="page"] { color: var(--abr-blau-dunkel); }
.hauptnav__knopf { display: inline-flex; align-items: center; gap: 0.3rem; border: 0; background: none; font-size: inherit; cursor: pointer; padding: 0; }
.hauptnav__knopf .icon { width: 1rem; height: 1rem; transition: transform var(--t-schnell) var(--kurve); }
.hauptnav__knopf[aria-expanded="true"] .icon { transform: rotate(180deg); }
.hauptnav__gruppentitel { margin: 0 0 var(--a-2); color: var(--text-leise); font-size: var(--gr-mini); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.hauptnav__gruppe ul { list-style: none; }
@media (min-width: 64rem) {
  .hauptnav { margin-left: var(--a-4); }
  .hauptnav__liste { display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.4vw, 1.75rem); }
  .hauptnav__liste > li > a, .hauptnav__knopf { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.0625rem; }
  .hauptnav__liste > li > a:hover, .hauptnav__knopf:hover { color: var(--abr-blau-dunkel); }
  .hauptnav__punkt--gruppe { position: relative; }
  .hauptnav__panel {
    position: absolute; left: -1.5rem; top: calc(100% + 0.6rem);
    display: none; grid-template-columns: repeat(3, max-content); gap: var(--a-6);
    padding: var(--a-5) var(--a-6); background: #fff; border: 1px solid var(--linie); border-radius: var(--r-l); box-shadow: var(--schatten-3);
  }
  .hauptnav__panel.ist-offen, html:not(.js) .hauptnav__punkt--gruppe:focus-within .hauptnav__panel { display: grid; }
  .hauptnav__gruppe li a { display: block; padding: 0.35rem 0; font-weight: 500; font-family: var(--schrift-text); font-size: 1.0625rem; }
  .hauptnav__gruppe li a:hover { color: var(--abr-blau-dunkel); text-decoration: underline; }
}
@media (max-width: 63.999rem) {
  .hauptnav {
    position: fixed; inset: var(--kopf-h) 0 calc(var(--leiste-h) + env(safe-area-inset-bottom)) 0; z-index: 49;
    display: none; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--a-4) var(--rand) var(--a-7); background: #fff; border-top: 1px solid var(--linie);
  }
  .kopf.ist-offen .hauptnav { display: block; }
  .hauptnav__liste > li { border-bottom: 1px solid var(--linie); }
  .hauptnav__liste > li > a, .hauptnav__knopf { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 3.5rem; font-size: 1.25rem; }
  .hauptnav__panel { display: none; padding: 0 0 var(--a-4); }
  .hauptnav__panel.ist-offen { display: grid; gap: var(--a-4); }
  .hauptnav__gruppe li a { display: block; padding: 0.55rem 0 0.55rem var(--a-4); font-size: 1.125rem; font-weight: 500; font-family: var(--schrift-text); }
  body.menue-offen { overflow: hidden; }
}
@media (min-width: 64rem) and (max-width: 74.999rem) {
  .kopf__innen { gap: var(--a-4); }
  .kopf__logo svg { height: 2.5rem; }
  .hauptnav { margin-left: 0; }
  .hauptnav__liste { gap: 0.875rem; }
  .hauptnav__liste > li > a, .hauptnav__knopf { font-size: var(--gr-klein); white-space: nowrap; }
  .kopf__rechts { gap: var(--a-3); }
  .kopf__24h { font-size: 1rem; }
  .kopf .knopf--primaer { padding-inline: var(--a-4); font-size: var(--gr-klein); white-space: nowrap; }
}
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-2);
  padding: var(--a-2) var(--a-2) calc(var(--a-2) + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--linie); box-shadow: 0 -6px 18px rgba(14, 44, 74, 0.1);
}
.leiste__knopf {
  display: flex; align-items: center; justify-content: center; gap: var(--a-2);
  min-height: 3rem; border-radius: var(--r-m);
  font-family: var(--schrift-titel); font-weight: 650; font-size: 1.125rem; text-decoration: none; color: #fff;
}
.leiste__knopf .icon { width: 1.35rem; height: 1.35rem; }
.leiste__knopf--anruf { background: var(--abr-blau); }
.leiste__knopf--wa { background: var(--wa-gruen); }
.leiste__knopf:hover { color: #fff; filter: brightness(0.95); }
@media (max-width: 63.999rem) {
  body { padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + 1rem); }
}
.schwebend {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60;
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; background: var(--wa-gruen); color: #fff; box-shadow: var(--schatten-3);
  transition: background-color var(--t-schnell) var(--kurve), transform var(--t-schnell) var(--kurve), opacity var(--t-mittel) var(--kurve), visibility var(--t-mittel);
}
.schwebend .icon { width: 1.75rem; height: 1.75rem; }
html.js .schwebend:not(.ist-sichtbar) { opacity: 0; visibility: hidden; transform: translateY(8px); }
.schwebend:hover { background: var(--wa-gruen-dunkel); color: #fff; transform: translateY(-2px); }
.hero { position: relative; overflow: clip; padding-block: clamp(1.75rem, 1rem + 2.5vw, 3.5rem) clamp(2.25rem, 1rem + 3vw, 4rem); background: linear-gradient(180deg, #d6e7f6, var(--flaeche)); }
.hero__raster { display: grid; gap: var(--a-7); align-items: center; }
@media (min-width: 64rem) { .hero__raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: var(--a-7); } }
.hero__raster > div:first-child { position: relative; z-index: 1; }
.hero h1 { margin-bottom: var(--a-5); font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3rem);  }
.hero .haekchen { margin-bottom: var(--a-6); }
.hero__wagen { position: relative; pointer-events: none; }
.hero__wagen-abstand { width: min(40%, 9rem); aspect-ratio: 1; margin-inline: auto; }
.hero__wagen-buehne {
  position: absolute; inset: 0 calc(-1 * var(--rand)); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-composite: intersect;
}
.hero__wagen-bild, .hero__wagen-film { position: absolute; left: 50%; top: 50%; height: 140%; width: auto; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); }
.hero__wagen-bild { display: block; object-fit: cover; }
.hero__wagen-film { opacity: 0; transition: opacity var(--t-langsam) var(--kurve); }
.hero__wagen-film.ist-bereit { opacity: 1; }
@media (max-width: 63.999rem) { .hero__raster { gap: var(--a-5); } .hero .haekchen { margin-bottom: 0; } .hero { padding-top: var(--a-5); } }
@media (min-width: 64rem) {
  .hero { display: grid; align-content: center; padding-block: var(--a-6); min-height: calc(100vh - var(--kopf-h) - 1px - 5.375rem); min-height: calc(100svh - var(--kopf-h) - 1px - 5.375rem); }
}
@media (min-width: 64rem) and (max-height: 47.5rem) { .hero { padding-block: var(--a-3); } }
@media (min-width: 64rem) {
  .hero__wagen { position: absolute; inset: 0; }
  .hero__wagen-abstand { display: none; }
  .hero__wagen-buehne {
    inset: auto; top: 50%; right: max(-6rem, calc(50% - 51rem)); width: min(66vw, 62rem); aspect-ratio: 2 / 1; overflow: visible;
    transform: translateY(calc(-44% - var(--hoch, 0px))) scale(var(--gross, 1));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
  }
  .hero__wagen-bild, .hero__wagen-film { width: 100%; height: auto; }
}
@media (min-width: 64rem) and (max-width: 79.999rem) { .hero__wagen-buehne { right: -2rem; width: 50vw; } }
.seitenhero--wagen { position: relative; overflow: clip; }
.seitenhero--wagen .seitenhero__raster > div:first-child { position: relative; z-index: 1; }
@media (min-width: 64rem) { .seitenhero--wagen .hero__wagen-buehne { width: min(58vw, 54rem); } }
.hero--foto, .zeichenleiste { --zeichen-h: 10.25rem; }
@media (min-width: 64rem) { .hero--foto, .zeichenleiste { --zeichen-h: 6.75rem; } }
.hero--foto { --fokus: #fff; isolation: isolate; background: var(--abr-blau-tief); padding-bottom: calc(var(--zeichen-h) / 2 + var(--a-6)); }
.hero__bilder { position: absolute; inset: 0; z-index: -2; }
.hero__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--kurve); }
.hero__foto.ist-aktiv { opacity: 1; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 40rem) { .hero__foto img { object-position: 68% 50%; } }
@media (min-width: 40rem) { .hero__foto--oben img { object-position: 68% 15%; } }
.hero--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 44, 74, 0.72), rgba(14, 44, 74, 0.65) 80%, rgba(21, 95, 153, 0.52)); }
@media (min-width: 64rem) { .hero--foto::after { background: linear-gradient(90deg, rgba(14, 44, 74, 0.9), rgba(14, 44, 74, 0.82) 38%, rgba(14, 44, 74, 0.7) 52%, rgba(21, 95, 153, 0.28) 66%, rgba(28, 118, 188, 0.05)); } }
.hero--foto :is(h1, h2, .haekchen li) { color: #fff; }
.hero--foto .eyebrow { color: #bfe0ff; }
.hero__zeile { display: block; }
.hero--foto .haekchen .icon { color: #8cc6f5; }
@media (max-width: 63.999rem) {
  .hero--foto .eyebrow { align-items: flex-start; }
  .hero--foto .eyebrow::before { flex: none; margin-top: 0.6em; }
}
@media (max-width: 39.999rem) {
  .hero--foto { min-height: 26rem; }
  .hero--foto .hero__raster { text-align: center; }
  .hero--foto .eyebrow { justify-content: center; }
  .hero--foto .eyebrow::before { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero--foto.ist-wechselnd .hero__foto.ist-aktiv img { animation: hero-zoom 7s linear forwards; }
}
@keyframes hero-zoom { from { transform: scale(1.05); } to { transform: scale(1); } }
@media (min-width: 64rem) {
  .hero--foto { min-height: calc(100vh - var(--kopf-h) - 1px - var(--zeichen-h) / 2 - var(--a-5)); min-height: calc(100svh - var(--kopf-h) - 1px - var(--zeichen-h) / 2 - var(--a-5)); padding-bottom: calc(var(--zeichen-h) / 2 + var(--a-6)); }
  body:has(> main > .hero--foto:first-child) .hero--foto { margin-top: calc(-1 * var(--kopf-h) - 1px); min-height: calc(100vh - var(--zeichen-h) / 2 - var(--a-5)); min-height: calc(100svh - var(--zeichen-h) / 2 - var(--a-5));
    padding-top: calc(var(--kopf-h) + 1px + var(--a-4) + var(--a-6)); }
}
@media (min-width: 64rem) and (max-height: 47.5rem) {
  .hero--foto { padding-bottom: calc(var(--zeichen-h) / 2 + var(--a-4)); }
  body:has(> main > .hero--foto:first-child) .hero--foto { padding-top: calc(var(--kopf-h) + 1px + var(--a-4) + var(--a-4)); }
}
@media (min-width: 64rem) {
  body:has(> main > .hero--foto:first-child) .kopf__innen { transition: background-color var(--t-mittel) var(--kurve), box-shadow var(--t-mittel) var(--kurve), transform var(--t-mittel) var(--kurve), border-radius var(--t-mittel) var(--kurve); }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) { background: transparent; border-bottom-color: transparent; }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) .kopf__innen {
    width: calc(100% - 2 * var(--a-4)); max-width: calc(var(--breite) + 2 * var(--a-5)); padding-inline: var(--a-5);
    background: #fff; border-radius: var(--r-l); box-shadow: var(--schatten-2); transform: translateY(var(--a-4));
  }
}
.zeichenleiste { position: relative; z-index: 2; margin-top: calc(var(--zeichen-h) / -2); }
.zeichenleiste__liste { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--a-4) var(--a-3);
  min-height: var(--zeichen-h); padding: var(--a-4); background: #fff; border-radius: var(--r-l); box-shadow: var(--schatten-3); }
.zeichenleiste__punkt { display: flex; align-items: center; gap: var(--a-2); min-width: 0; line-height: 1.25; }
.zeichenleiste__punkt strong { display: block; font-family: var(--schrift-titel); font-weight: 700; font-size: 0.875rem; color: var(--text); }
.zeichenleiste__klein { display: block; margin-top: 0.125rem; font-size: var(--gr-mini); color: var(--text-leise); }
.zeichenleiste__zeichen { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.zeichenleiste__zeichen img { width: 100%; height: 100%; object-fit: contain; }
.zeichenleiste__zeichen--rund img { border-radius: 50%; }
@media (max-width: 22.5rem) { .zeichenleiste__liste { padding-inline: var(--a-3); } .zeichenleiste__zeichen { width: 2.25rem; height: 2.25rem; } }
.zeichenleiste__zeichen--stern { border-radius: 50%; background: var(--abr-blau-zart); color: #e3a008; }
.zeichenleiste__zeichen--stern .icon { width: 55%; height: 55%; }
@media (min-width: 64rem) {
  .zeichenleiste > .container { width: calc(100% - 2 * var(--a-4)); max-width: calc(var(--breite) + 2 * var(--a-5)); padding-inline: 0; }
  .zeichenleiste__liste { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--a-5); padding: var(--a-4) var(--a-5); }
  .zeichenleiste__punkt { gap: var(--a-3); }
  .zeichenleiste__punkt strong { font-size: 1.0625rem; }
  .zeichenleiste__klein { font-size: var(--gr-mini); }
  .zeichenleiste__zeichen { width: 3.5rem; height: 3.5rem; }
  .zeichenleiste__zeichen--wko { width: 4.5rem; }
}
@media (min-width: 64rem) and (max-width: 79.999rem) { .zeichenleiste__liste { gap: var(--a-4); } .zeichenleiste__punkt { gap: var(--a-2); } .zeichenleiste__punkt strong { font-size: 1rem; } .zeichenleiste__zeichen { width: 2.75rem; height: 2.75rem; } .zeichenleiste__zeichen--wko { width: 3.5rem; } }
.haekchen { list-style: none; display: grid; gap: var(--a-3); }
.haekchen li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--a-3); align-items: start; color: var(--text); }
.haekchen .icon { width: 1.5rem; height: 1.5rem; color: var(--abr-blau); margin-top: 0.1rem; }
.abschnitt--dunkel .haekchen li { color: #fff; }
.abschnitt--dunkel .haekchen .icon { color: var(--abr-blau-hell); }
.seitenhero { padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); background: linear-gradient(180deg, #d6e7f6, var(--grund)); }
.seitenhero:has(+ :is(.vertrauen, .abschnitt--flaeche)), main > .abschnitt--flaeche:first-child { background: linear-gradient(180deg, #d6e7f6, var(--flaeche)); }
main:has(> .brotkrumen:first-child) { background: linear-gradient(#d6e7f6, #d6e7f6) 0 0 / 100% 12rem no-repeat; }
@media (min-width: 64rem) {
  .seitenhero:has(+ .vertrauen) { display: grid; align-content: center; padding-block: var(--a-6); min-height: calc(100vh - var(--kopf-h) - 1px - 3rem - 5.375rem); min-height: calc(100svh - var(--kopf-h) - 1px - 3rem - 5.375rem); }
}
@media (min-width: 64rem) and (max-height: 47.5rem) { .seitenhero:has(+ .vertrauen) { padding-block: var(--a-3); } }
@media (min-width: 64rem) {
  .seitenhero--frei { position: relative; overflow: hidden; }
  .seitenhero--frei .seitenhero__raster > div:first-child { position: relative; z-index: 1; max-width: 36rem; }
  .seitenhero__frei { position: absolute; right: 0; bottom: -12%; height: 112%; aspect-ratio: 1; max-width: calc(100% - 30rem - var(--rand)); pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%), linear-gradient(to bottom, transparent 0, #000 8%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 20%), linear-gradient(to bottom, transparent 0, #000 8%); mask-composite: intersect; }
  .seitenhero__frei img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
}
.seitenhero__raster { display: grid; gap: var(--a-7); align-items: center; }
.seitenhero--bild .seitenhero__raster { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .seitenhero--bild .seitenhero__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.seitenhero h1 { margin-bottom: var(--a-4); max-width: 22ch; }
.seitenhero__text { font-size: var(--gr-gross); margin-bottom: var(--a-5); max-width: var(--breite-text); }
.seitenhero .haekchen { margin-bottom: var(--a-6); }
.seitenhero__bild img { border-radius: var(--r-xl); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.brotkrumen { padding-top: var(--a-5); font-size: var(--gr-klein); }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); }
.brotkrumen li { display: inline-flex; align-items: center; gap: var(--a-2); }
.brotkrumen li + li::before { content: "›"; color: var(--rohr-grau); }
.brotkrumen a { color: var(--text-leise); }
.brotkrumen [aria-current="page"] { color: var(--text); font-weight: 600; }
.vertrauen { background: var(--flaeche); border-block: 1px solid var(--linie); }
.vertrauen__liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4) var(--a-3); padding-block: var(--a-4); }
@media (max-width: 39.999rem) {
  .vertrauen { background: none; border: 0; }
  .seitenhero--foto + .vertrauen { position: relative; z-index: 2; margin-top: -2.5rem; }
  .vertrauen__liste { grid-template-columns: 1fr; gap: 0.625rem; padding-block: 0 var(--a-6); }
  .seitenhero:not(.seitenhero--foto) + .vertrauen .vertrauen__liste { padding-top: var(--a-5); }
  .vertrauen__punkt { padding: 0.875rem var(--a-4); border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-3); }
}
@media (min-width: 40rem) { .vertrauen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4) var(--a-5); padding-block: var(--a-5); } }
@media (min-width: 60rem) { .vertrauen__liste { display: flex; justify-content: space-between; } .vertrauen__punkt--google > span { white-space: nowrap; } }
.vertrauen__liste--fakten .vertrauen__punkt { line-height: 1.25; } .vertrauen__liste--fakten .vertrauen__klein { line-height: 1.2; }
.vertrauen__punkt { display: flex; align-items: center; gap: var(--a-3); color: var(--text); font-family: var(--schrift-titel); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.vertrauen__icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fff; color: var(--abr-blau); box-shadow: var(--schatten-1); }
.vertrauen__icon .icon { width: 1.25rem; height: 1.25rem; }
.vertrauen__icon--stern { color: #e3a008; }
.vertrauen__klein { display: block; font-family: var(--schrift-text); font-weight: 400; font-size: var(--gr-mini); color: var(--text-leise); }
.karten { list-style: none; }
.karte {
  position: relative; display: flex; flex-direction: column; gap: var(--a-3); height: 100%;
  padding: var(--a-5); border-radius: var(--r-l); background: var(--abr-blau-zart);
  transition: background-color var(--t-mittel) var(--kurve), box-shadow var(--t-mittel) var(--kurve), transform var(--t-mittel) var(--kurve);
}
.karte__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--a-2); border-radius: var(--r-m); background: #fff; color: var(--abr-blau); box-shadow: var(--schatten-1); }
.karte__icon .icon { width: 1.5rem; height: 1.5rem; }
.karte h3 a { color: var(--text); text-decoration: none; }
.karte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.karte p { margin: 0; }
.karte__pfeil { margin-top: auto; padding-top: 0; color: var(--abr-blau-dunkel); }
.karte__pfeil .icon { width: 1.4rem; height: 1.4rem; transition: transform var(--t-schnell) var(--kurve); }
.karte:hover { background: #fff; box-shadow: var(--schatten-2); }
.karte:hover .karte__pfeil .icon { transform: translateX(4px); }
.karte:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }
.karte h3 a:focus-visible { outline: none; }
.flaeche-weiss .karte, .abschnitt--flaeche .karte, .seitenhero .karte { background: #fff; }
@media (max-width: 39.999rem) {
  .karten.raster { gap: var(--a-2); }
  .karte { display: grid; grid-template-columns: 2.5rem 1fr 1.25rem; grid-template-areas: "icon titel pfeil" "icon text pfeil"; column-gap: var(--a-4); row-gap: 0.15rem; align-items: center; padding: var(--a-3) var(--a-4); }
  .karte__icon { grid-area: icon; width: 2.5rem; height: 2.5rem; margin: 0; }
  .karte__icon .icon { width: 1.25rem; height: 1.25rem; }
  .karte h3 { grid-area: titel; font-size: 1.0625rem; }
  .karte p { grid-area: text; font-size: 1rem; line-height: 1.4; }
  .karte__pfeil { grid-area: pfeil; margin: 0; padding: 0; }
}
.karte.karte--kontakt, .karte.karte--kontakt:hover { border: 1px solid var(--linie); background: linear-gradient(135deg, rgba(232, 241, 250, 0.35), #fff 45%, rgba(232, 241, 250, 0.7)); }
.karte--kontakt .karte__icon--wa { color: var(--wa-gruen); }
.vorher {
  display: grid; gap: var(--a-5); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-xl); background: var(--abr-blau-zart); border: 1px solid #d3e3f3;
}
@media (min-width: 60rem) { .vorher { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: var(--a-7); } }
.vorher .haekchen { gap: var(--a-4); }
.vorher h2 + .eyebrow { margin: var(--a-3) 0 0; }
@media (min-width: 40rem) { .vorher .haekchen { grid-template-columns: 1fr 1fr; } }
.iconliste { list-style: none; display: grid; gap: var(--a-6) var(--a-5); }
@media (min-width: 40rem) { .iconliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .iconliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.iconliste li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--a-4); align-items: start; }
@media (max-width: 39.999rem) { .iconliste { gap: var(--a-5); } .iconliste li { grid-template-columns: 2.5rem 1fr; } .iconliste__icon { width: 2.5rem; height: 2.5rem; } .ablauf { gap: var(--a-4); } .ablauf li:not(:last-child)::after { bottom: calc(-1 * var(--a-4)); } }
.iconliste__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--abr-blau); color: #fff; }
.iconliste__icon .icon { width: 1.4rem; height: 1.4rem; }
.iconliste h3 { margin: 0.35rem 0 var(--a-2); font-size: 1.1875rem; }
.iconliste p { margin: 0; }
.iconliste h3 .pfeillink { display: inline; }
.iconliste h3 .pfeillink .icon { display: inline-block; vertical-align: -0.2em; margin-left: 0.35rem; }
.preise { display: grid; gap: var(--a-5); }
@media (min-width: 48rem) { .preise { grid-template-columns: 1fr 1fr; } }
.preis { padding: var(--a-6); border-radius: var(--r-l); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
.preis--hervor { border: 2px solid var(--abr-blau); }
.preis h3 { margin-bottom: var(--a-3); }
.preis__brutto { display: block; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); line-height: 1; color: var(--text); letter-spacing: -0.02em; }
.preis__zusatz { display: block; margin-top: var(--a-2); font-size: var(--gr-klein); color: var(--text-leise); }
.preis__inhalt { margin-top: var(--a-4); padding-top: var(--a-4); border-top: 1px solid var(--linie); }
.preis--wasser { position: relative; isolation: isolate; overflow: hidden; border-color: var(--abr-blau); color: #fff; }
.preis--wasser::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--abr-blau); transform-origin: 50% 100%; }
.preis--wasser :is(h3, .preis__brutto) { color: #fff; }
.preis--wasser .preis__zusatz { color: rgba(255, 255, 255, 0.86); }
.preis--wasser .preis__inhalt { color: #fff; border-top-color: rgba(255, 255, 255, 0.3); }
.preis--wasser.wasser-wartet { color: var(--text-leise); border-color: var(--linie); }
.preis--wasser.wasser-wartet::before { transform: scaleY(0); }
.preis--wasser.wasser-wartet :is(h3, .preis__brutto) { color: var(--text); }
.preis--wasser.wasser-wartet .preis__zusatz { color: var(--text-leise); }
.preis--wasser.wasser-wartet .preis__inhalt { color: var(--text-leise); border-top-color: var(--linie); }
.preis--wasser.wasser-laeuft::before { transition: transform 1s cubic-bezier(.45, .05, .35, 1) 1.9s; }
.preis--wasser.wasser-laeuft { transition: color 0.15s linear 2.9s, border-color 0.12s linear 1.9s; }
.preis--wasser.wasser-laeuft .preis__inhalt { transition: color 0.15s linear 3.2s, border-color 0.15s linear 2.9s; }
.preis--wasser.wasser-laeuft .preis__zusatz { transition: color 0.15s linear 2.95s; }
.preis--wasser.wasser-laeuft .preis__brutto { transition: color 0.15s linear 3s; }
.preis--wasser.wasser-laeuft h3 { transition: color 0.15s linear 3.05s; }
.rohrbild { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.rohrbild + .container { position: relative; z-index: 1; }
.rohrbild path { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.rohrbild__rand { stroke: #8e4f26; }
.rohrbild__rohr { stroke: #c98a5c; }
.rohrbild__glanz { stroke: #f3cfa9; }
.rohrbild__kabelrand { stroke: #cdd1d5; }
.rohrbild__kabel { stroke: #eaedf0; }
.rohrbild__kabelglanz { stroke: #ffffff; }
.rohrbild__metallrand { stroke: #6f7378; }
.rohrbild__metall { stroke: #b4b9bf; }
.rohrbild__glanz-metall { stroke: #eef0f2; }
.rohrbild__schlauchrand { stroke: #c3c8ce; }
.rohrbild__schlauch { stroke: #f2f4f6; }
.rohrbild__rippen { stroke: #d3d8dd; stroke-dasharray: 2 3.5; }
.rohrbild__wasser { stroke: var(--abr-blau); }
.rohrbild.wasser-laeuft .rohrbild__wasser { transition: stroke-dashoffset 1s cubic-bezier(.55, 0, .45, 1); }
.rohrbild.wasser-laeuft .rohrbild__wasser--danach { transition-delay: 1s; }
.preis-kompakt { padding: var(--a-4) var(--a-5); border-radius: var(--r-l); background: var(--abr-blau-zart); color: var(--text); }
.preis-kompakt a { font-weight: 600; }
.notdienst__raster { display: grid; gap: var(--a-7); align-items: center; }
@media (min-width: 60rem) { .notdienst__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a-8); } }
.notdienst h2 { margin-bottom: var(--a-4); }
.notdienst__text { font-size: var(--gr-gross); margin-bottom: var(--a-6); }
.notdienst__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-4) var(--a-5); }
.notdienst__abschluss { text-align: center; }
.notdienst__nummer { margin: var(--a-5) 0 0; font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem); line-height: 1.1; letter-spacing: 0.01em; }
.notdienst__nummer a { text-decoration: none; }
.notdienst__nummer a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.notdienst__abschluss .notdienst__aktion { justify-content: center; }
.notdienst__abschluss .zuschlag { max-width: 40rem; margin: var(--a-7) auto 0; text-align: left; }
.zuschlag { border-radius: var(--r-l); background: #fff; color: var(--text-leise); box-shadow: var(--schatten-2); overflow: hidden; }
.zuschlag__titel { margin: 0; padding: var(--a-4) var(--a-5); background: var(--flaeche); border-bottom: 1px solid var(--linie); color: var(--text); font-family: var(--schrift-titel); font-weight: 650; font-size: 1.0625rem; }
.zuschlag table { width: 100%; border-collapse: collapse; }
.zuschlag th, .zuschlag td { padding: var(--a-4) var(--a-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.zuschlag tr:last-child th, .zuschlag tr:last-child td { border-bottom: 0; }
.zuschlag th { font-weight: 400; color: var(--text); }
.zuschlag td { width: 1%; text-align: right; white-space: nowrap; font-family: var(--schrift-titel); font-weight: 700; color: var(--text); }
.zuschlag__zeit { display: block; }
.zuschlag__zusatz { display: block; margin-top: 0.15rem; font-size: var(--gr-klein); color: var(--text-leise); }
@media (max-width: 40rem) { .zuschlag th, .zuschlag td, .zuschlag__titel { padding: var(--a-3) var(--a-4); } }
.zuschlag td.zuschlag__ohne { font-weight: 600; }
.zuschlag__hinweis { margin: 0; padding: var(--a-3) var(--a-5) var(--a-4); font-size: var(--gr-klein); }
.gas { display: grid; gap: var(--a-4); padding: var(--a-6); border-radius: var(--r-l); background: var(--warn-flaeche); border: 2px solid var(--warn-rand); color: var(--text); }
@media (min-width: 48rem) { .gas { grid-template-columns: 3.25rem 1fr; gap: var(--a-5); } }
.gas__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--warn-rand); color: var(--text); }
.gas__icon .icon { width: 1.6rem; height: 1.6rem; }
.gas h2, .gas h3 { margin-bottom: var(--a-3); font-size: var(--gr-h3); }
.gas__notruf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-2) var(--a-4); margin-bottom: var(--a-4); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.25rem; }
.gas__notruf a { font-size: 2rem; color: var(--text); text-decoration-thickness: 2px; }
.gas ol { padding-left: 1.25rem; display: grid; gap: var(--a-2); }
.gas__quelle { margin-top: var(--a-4); font-size: var(--gr-klein); color: var(--text-leise); }
.ablauf { list-style: none; counter-reset: schritt; display: grid; gap: var(--a-5); }
.ablauf li { position: relative; counter-increment: schritt; display: grid; grid-template-columns: 3rem 1fr; gap: var(--a-4); align-content: start; }
.ablauf li::before {
  content: counter(schritt); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--abr-blau); color: var(--abr-blau-dunkel); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.25rem;
  position: relative; z-index: 1;
}
.ablauf li:not(:last-child)::after { content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: calc(-1 * var(--a-5)); width: 2px; background: var(--linie-stark); transform: translateX(-1px); }
.ablauf h3 { margin: 0.6rem 0 var(--a-2); font-size: 1.1875rem; }
.ablauf p { margin: 0; }
@media (min-width: 64rem) {
  .ablauf { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--a-5); }
  .ablauf li { grid-template-columns: 1fr; gap: var(--a-3); }
  .ablauf li:not(:last-child)::after { left: 3rem; right: calc(-1 * var(--a-5)); top: 1.5rem; bottom: auto; width: auto; height: 2px; transform: translateY(-1px); }
  .ablauf h3 { margin-top: var(--a-2); }
  .ablauf p { font-size: 1rem; }
}
.ablauf, .stationen { --t-fuell: 0.55s; --t-linie: 0.4s; --t-schritt: 0.95s; --t-zulauf: 0.6s; }
@media (min-width: 64rem) {
  .ablauf.ablauf--fuellt li::before {
    background: linear-gradient(to top, var(--abr-blau) 0 84%, var(--abr-blau-hell)) bottom / 100% 0% no-repeat #fff;
    transition: background-size var(--t-fuell) ease-in-out calc(var(--t-zulauf) + var(--i, 0) * var(--t-schritt)), color var(--t-schnell) linear calc(var(--t-zulauf) + var(--i, 0) * var(--t-schritt) + var(--t-fuell) * 0.5);
  }
  .ablauf.ablauf--fuellt li:not(:last-child)::after {
    background: linear-gradient(var(--abr-blau), var(--abr-blau)) left / 0% 100% no-repeat var(--linie-stark);
    transition: background-size var(--t-linie) linear calc(var(--t-zulauf) + var(--i, 0) * var(--t-schritt) + var(--t-fuell));
  }
  .ablauf.ist-gefuellt li::before { background-size: 100% 100%; color: #fff; }
  .ablauf.ist-gefuellt li:not(:last-child)::after { background-size: 100% 100%; }
}
.ablauf--kompakt li { grid-template-columns: 2.5rem 1fr; align-items: center; }
.ablauf--kompakt li::before { width: 2.5rem; height: 2.5rem; font-size: 1.0625rem; }
.ablauf--kompakt h3 { margin: 0; }
@media (max-width: 63.999rem) { .ablauf--kompakt li:not(:last-child)::after { left: 1.25rem; top: 2.5rem; } }
@media (min-width: 64rem) { .ablauf--kompakt li { grid-template-columns: 1fr; } .ablauf--kompakt li:not(:last-child)::after { left: 2.5rem; top: 1.25rem; } }
.siegelband { text-align: center; position: relative; overflow: clip; padding-block: calc(var(--abschnitt) * 0.6); }
.siegelband::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 56rem; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, transparent 38%, rgba(90, 167, 232, 0.10) 38.3%, transparent 38.8%, transparent 52%, rgba(90, 167, 232, 0.08) 52.3%, transparent 52.8%, transparent 68%, rgba(90, 167, 232, 0.06) 68.3%, transparent 68.8%);
  pointer-events: none;
}
.siegelband > * { position: relative; }
.siegelband__siegel { width: calc(157px + 0.75rem + 16px);  margin: -8px auto calc(var(--a-6) - 8px); border-radius: 50%; background: #fff; background-clip: padding-box; padding: 0.375rem; border: 8px solid rgba(255, 255, 255, 0.08); }
.siegelband__siegel img, .siegelband__siegel svg { width: 100%; height: auto; border-radius: 50%; }
.siegelband p { font-size: var(--gr-gross); max-width: 36rem; margin-inline: auto; margin-top: var(--a-4); }
.stimmen { list-style: none; }
.stimme { display: flex; flex-direction: column; gap: var(--a-4); height: 100%; margin: 0; padding: var(--a-6); border-radius: var(--r-l); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
.sterne { display: inline-flex; gap: 2px; color: #e3a008; }
.sterne .icon { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.stimme blockquote { margin: 0; color: var(--text); font-size: 1.125rem; line-height: 1.55; }
.stimme figcaption { margin-top: auto; font-size: var(--gr-klein); }
.stimme figcaption strong { display: block; }
.stimmen__summe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-4); margin-top: var(--a-6); color: var(--text); }
.stimmen__summe .sterne { margin-right: var(--a-1); }
.stimmen__summe strong { font-family: var(--schrift-titel); font-weight: 600; }
.stimmen__link { font-size: var(--gr-klein); }
.vergleich { display: grid; gap: var(--a-6); align-items: center; }
@media (min-width: 60rem) { .vergleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a-8); } }
.vergleich__text .einleitung { margin-top: var(--a-4); }
.vergleich__hinweis { display: flex; align-items: center; gap: var(--a-2); margin-top: var(--a-5); color: var(--text-leise); font-size: var(--gr-klein); }
.vergleich__hinweis[hidden] { display: none; }
.vergleich__hinweis .icon { width: 1rem; height: 1rem; color: var(--abr-blau); }
.vergleich__hinweis .icon:first-child, .vorhernachher__griff .icon:first-child { transform: scaleX(-1); }
.vergleich__hinweis .icon + .icon { margin-left: -0.6rem; margin-right: var(--a-1); }
.vergleich__link { margin-top: var(--a-5); }
.vergleich__bild { position: relative; isolation: isolate; }
@media (min-width: 60rem) { .vergleich__bild::after { content: ""; position: absolute; z-index: -1; right: -1rem; bottom: -1rem; width: 60%; height: 60%; border-radius: var(--r-xl); background: var(--abr-blau-zart); } }
.vorhernachher { --pos: 50%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); background: var(--flaeche); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.vorhernachher.ist-aktiv { cursor: ew-resize; }
.vorhernachher picture, .vorhernachher img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vorhernachher img { object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.vorhernachher__nachher { clip-path: inset(0 0 0 var(--pos)); }
.vorhernachher__linie { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); pointer-events: none; }
.vorhernachher__griff {
  position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%; background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--abr-blau);
  box-shadow: 0 10px 25px rgba(14, 44, 74, 0.28); transition: transform var(--t-mittel) var(--kurve), box-shadow var(--t-mittel) var(--kurve);
}
.vorhernachher__griff .icon { width: 1.25rem; height: 1.25rem; filter: drop-shadow(0 1px 1px rgba(14, 44, 74, 0.25)); }
.vorhernachher__griff .icon + .icon { margin-left: -0.35rem; }
.vorhernachher.ist-aktiv:hover .vorhernachher__griff { transform: scale(1.05); }
.vorhernachher.ist-gezogen .vorhernachher__griff { transform: scale(1.08); box-shadow: 0 14px 34px rgba(28, 118, 188, 0.45); }
@media (prefers-reduced-motion: reduce) { .vorhernachher__griff { transition: none; } }
.vorhernachher__marke {
  position: absolute; top: var(--a-4); padding: 0.3rem 0.8rem; border-radius: var(--r-rund); pointer-events: none;
  background: rgba(14, 44, 74, 0.88); color: #fff; font-family: var(--schrift-titel); font-weight: 650; font-size: var(--gr-klein);
}
.vorhernachher__marke--vorher { left: var(--a-4); }
.vorhernachher__marke--nachher { right: var(--a-4); }
.vorhernachher__regler { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.vorhernachher:has(.vorhernachher__regler:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.galerie { list-style: none; display: grid; gap: var(--a-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); } }
.galerie__breit { grid-column: 1 / -1; }
.galerie button { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-m); background: none; cursor: zoom-in; overflow: hidden; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform var(--t-langsam) var(--kurve); }
.galerie__breit img { aspect-ratio: 21 / 8; }
.galerie button:hover img { transform: scale(1.03); }
.lightbox { max-width: min(92vw, 80rem); max-height: 92vh; padding: 0; border: 0; border-radius: var(--r-l); background: #0b1c2e; }
.lightbox::backdrop { background: rgba(5, 15, 26, 0.86); }
.lightbox img { max-height: 84vh; width: auto; margin: 0 auto; }
.lightbox__zu { position: absolute; right: var(--a-3); top: var(--a-3); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: #fff; color: var(--text); cursor: pointer; }
.lightbox__text { margin: 0; padding: var(--a-3) var(--a-4); color: #c9d6e4; font-size: var(--gr-klein); }
.tradition { display: grid; gap: var(--a-7); align-items: center; }
@media (min-width: 60rem) { .tradition { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a-8); } }
.tradition__bild { position: relative; }
.tradition__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-xl); }
@media (min-width: 60rem) { .tradition__bild::after { content: ""; position: absolute; z-index: -1; right: -1rem; bottom: -1rem; width: 60%; height: 60%; border-radius: var(--r-xl); background: var(--abr-blau-zart); } }
.tradition__bild--logo { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-xl); background: radial-gradient(120% 95% at 50% 30%, #fff 0%, #eef5fc 50%, #d6e7f6 100%); }
@media (min-width: 60rem) { .tradition__bild--logo::after { background: var(--abr-blau); } }
.logozug { width: min(86%, 30rem); color: var(--logo-text); }
.logozug svg { display: block; width: 100%; height: auto; overflow: visible; }
.logozug__linie { fill: none; stroke-width: 7; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.logozug__linie--dach { stroke: var(--logo-blau); }
.logozug__linie--rohr { stroke: var(--logo-rohr); }
.logozug__tropfen, .logozug__abr, .logozug__wort { transform-box: fill-box; transform-origin: 50% 0; }
.logozug--bereit :is(.logozug__dach, .logozug__rohr, .logozug__duese, .logozug__tropfen, .logozug__abr, .logozug__wort) { opacity: 0; }
.logozug.ist-an .logozug__linie--dach { animation: lz-linie 1.1s var(--kurve) both; }
.logozug.ist-an .logozug__dach { animation: lz-ein 0.5s ease-out 0.6s both; }
.logozug.ist-an .logozug__linie--rohr { animation: lz-linie 1.1s var(--kurve) 0.45s both; }
.logozug.ist-an .logozug__rohr { animation: lz-ein 0.5s ease-out 1.05s both; }
.logozug.ist-an .logozug__duese { animation: lz-ein 0.3s ease-out 1.4s both; }
.logozug.ist-an .logozug__tropfen { animation: lz-tropfen 0.75s cubic-bezier(0.45, 0, 0.75, 0.3) 1.55s both; }
.logozug.ist-an .logozug__abr { animation: lz-text 0.7s var(--kurve) 0.9s both; }
.logozug.ist-an .logozug__wort { animation: lz-text 0.8s var(--kurve) 1.15s both; }
@keyframes lz-linie { 0% { opacity: 1; stroke-dashoffset: 1; } 65% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes lz-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes lz-tropfen { 0% { opacity: 0; transform: translateY(-60%) scale(0.5); } 25% { opacity: 1; } 78% { transform: translateY(0) scale(0.95, 1.1); } 90% { transform: scale(1.08, 0.92); } 100% { opacity: 1; transform: none; } }
@keyframes lz-text { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gewerke { list-style: none; display: flex; flex-wrap: wrap; gap: var(--a-3); margin: var(--a-5) 0 var(--a-6); }
.gewerke li { display: inline-flex; align-items: center; gap: var(--a-2); padding: 0.5rem 1rem 0.5rem 0.6rem; border-radius: var(--r-rund); background: var(--abr-blau-zart); color: var(--text); font-family: var(--schrift-titel); font-weight: 600; }
.gewerke .icon { width: 1.75rem; height: 1.75rem; padding: 0.3rem; border-radius: 50%; background: #fff; color: var(--abr-blau); }
.b2b { display: grid; gap: var(--a-6); padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); border-radius: var(--r-xl); background: var(--abr-blau); color: #e3eef9; }
@media (min-width: 60rem) { .b2b { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "titel liste" "link liste"; align-items: center; column-gap: var(--a-8); row-gap: var(--a-5); } .b2b__titel { grid-area: titel; align-self: end; } .b2b .haekchen { grid-area: liste; } .b2b__link { grid-area: link; align-self: start; } }
.b2b__link { margin: 0; }
.b2b__link .pfeillink { display: inline; }
.b2b__link .pfeillink .icon { display: inline-block; vertical-align: -0.2em; margin-left: 0.35rem; }
.b2b h2 { color: #fff; }
.b2b .eyebrow { color: #d5e7f8; }
.b2b .haekchen li { color: #fff; }
.b2b .haekchen .icon { color: #fff; }
.b2b .pfeillink { color: #fff; }
.b2b { --fokus: #fff; }
.gebiet { list-style: none; display: grid; gap: var(--a-3); }
@media (min-width: 40rem) { .gebiet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gebiet li { display: flex; align-items: center; gap: var(--a-3); padding: var(--a-4) var(--a-5); border-radius: var(--r-m); background: #fff; border: 1px solid var(--linie); color: var(--text); font-family: var(--schrift-titel); font-weight: 600; }
.gebiet .icon { color: var(--abr-blau); }
.gebiet__klein { font-family: var(--schrift-text); font-weight: 400; color: var(--text-leise); }
.bezirke { list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(23, auto); column-gap: var(--a-6); }
@media (min-width: 22.5rem) { .bezirke { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(12, auto); } }
@media (min-width: 22.5rem) and (max-width: 39.999rem) { .bezirke { column-gap: var(--a-4); } }
@media (min-width: 60rem) { .bezirke { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); } }
.bezirke li { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 0.25rem; padding: var(--a-2) 0; border-bottom: 1px solid var(--linie); color: var(--text); }
.bezirke .plz { font-family: var(--schrift-titel); font-weight: 650; color: var(--abr-blau-dunkel); }
.gebiet-fehlt { margin-top: var(--a-5); font-family: var(--schrift-titel); font-weight: 650; color: var(--text); font-size: 1.125rem; }
.faq { border-top: 1px solid var(--linie-stark); }
.faq details { border-bottom: 1px solid var(--linie-stark); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-4);
  padding: var(--a-5) 0; cursor: pointer; list-style: none;
  color: var(--text); font-family: var(--schrift-titel); font-weight: 650; font-size: 1.1875rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--abr-blau); transition: transform var(--t-mittel) var(--kurve); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq__antwort { padding: 0 0 var(--a-5); max-width: 46rem; }
.faq__antwort .zuschlag, .faq__antwort .preise { margin-top: var(--a-4); }
.kontakt { display: grid; gap: var(--a-7); }
@media (min-width: 64rem) { .kontakt { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--a-8); align-items: start; } }
.kontakt__wege { display: grid; gap: var(--a-3); }
.kontakt__wege .knopf { justify-content: flex-start; width: 100%; }
.kontakt__adresse { margin-top: var(--a-5); padding-top: var(--a-5); border-top: 1px solid var(--linie); font-style: normal; }
.kontakt__notfall { display: flex; gap: var(--a-3); max-width: 48rem; margin: calc(-1 * var(--a-5)) 0 var(--a-6); padding: var(--a-3) var(--a-4); border-radius: var(--r-m); background: var(--warn-flaeche); color: var(--text); font-weight: 600; }
.kontakt__notfall .icon { color: var(--warn-text); margin-top: 0.15rem; }
.formular { display: grid; gap: var(--a-5); padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-2); }
.formular__zeile { display: grid; gap: var(--a-5); }
@media (min-width: 40rem) { .formular__zeile { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: var(--a-2); min-width: 0; }
.feld label, .feld legend { color: var(--text); font-family: var(--schrift-titel); font-weight: 600; font-size: 1rem; padding: 0; }
.feld__pflicht { color: var(--abr-blau); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.05em; }
.formular__pflicht { margin: 0; color: var(--text-leise); font-size: var(--gr-klein); }
.feld input[type="text"], .feld input[type="tel"], .feld input[type="email"], .feld select, .feld textarea {
  width: 100%; min-width: 0; min-height: 3rem; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--linie-feld); border-radius: var(--r-m); background: #fff; color: var(--text);
  font: inherit; font-size: 1.0625rem; appearance: none; -webkit-appearance: none;
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld select { padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5260' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1.1rem; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--abr-blau); }
.feld__hilfe { margin: 0; font-size: var(--gr-klein); color: var(--text-leise); }
.feld__fehler { margin: 0; font-size: var(--gr-klein); color: var(--fehler); font-weight: 600; }
.feld__fehler:empty { display: none; }
.feld.hat-fehler input, .feld.hat-fehler textarea, .feld.hat-fehler select { border-color: var(--fehler); }
fieldset.feld { margin: 0; padding: 0; border: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-3); margin-top: var(--a-1); }
.wahl label { display: inline-flex; align-items: center; gap: var(--a-2); min-height: 2.75rem; padding: 0.4rem 1rem 0.4rem 0.75rem; border: 1.5px solid var(--linie-stark); border-radius: var(--r-rund); font-family: var(--schrift-text); font-weight: 500; cursor: pointer; }
.wahl input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--abr-blau); }
@media (max-width: 39.999rem) { .wahl { gap: var(--a-2); } .wahl label { padding: 0.35rem 0.75rem 0.35rem 0.6rem; } }
.wahl label:has(input:checked) { border-color: var(--abr-blau); background: var(--abr-blau-zart); }
.formular__falle { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular__hinweis { margin: 0; font-size: var(--gr-klein); }
@media (max-width: 40rem) { .formular button[type="submit"] { width: 100%; } }
.formular__fehlerliste { padding: var(--a-4); border-radius: var(--r-m); background: #fdecea; color: var(--fehler); }
.formular__fehlerliste:empty { display: none; }
.karte2 { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--flaeche); border: 1px solid var(--linie); aspect-ratio: 16 / 10; }
.karte2__vorhang { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--a-3); padding: var(--a-5); text-align: center;
  background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(28, 118, 188, 0.07) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(28, 118, 188, 0.07) 39px 40px), var(--flaeche); }
.karte2__vorhang p { max-width: 26rem; margin: 0; font-size: var(--gr-klein); }
.karte2 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte2__route { margin-top: var(--a-3); }
.fuss { background: var(--abr-blau-tief); color: #b7c7d8; padding-block: var(--a-8) var(--a-5); font-size: 1rem; --fokus: #fff; }
main:has(> .abschnitt--dunkel:last-child) + .fuss { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: #fff; }
.fuss__raster { display: grid; gap: var(--a-6); }
@media (min-width: 40rem) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fuss__raster { grid-template-columns: 1.1fr 1.4fr 1fr 1fr; gap: var(--a-7); } }
.fuss__kontakt a { white-space: nowrap; }
@media (max-width: 39.999rem) { .fuss__unten > span:first-child { flex-basis: 100%; } }
.fuss__logo { display: inline-block; color: #fff; margin-bottom: var(--a-4); }
.fuss__logo svg { height: 3.25rem; width: auto; }
.fuss strong { color: #fff; }
.fuss h2 { margin-bottom: var(--a-4); color: #fff; font-size: 1.0625rem; letter-spacing: 0; }
.fuss ul { list-style: none; display: grid; gap: var(--a-2); }
.fuss address { font-style: normal; }
.fuss__kontakt li { display: flex; gap: var(--a-2); align-items: flex-start; }
.fuss__kontakt .icon { margin-top: 0.2rem; color: var(--abr-blau-hell); }
.fuss__unten { display: flex; flex-wrap: wrap; gap: var(--a-3) var(--a-5); align-items: center; margin-top: var(--a-7); padding-top: var(--a-5); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--gr-klein); }
.fuss__unten .textknopf { color: #fff; text-decoration: none; }
.fuss__unten .textknopf:hover { text-decoration: underline; }
.banner {
  position: fixed; z-index: 70; left: var(--a-3); right: var(--a-3);
  bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + var(--a-3));
  max-width: 34rem; padding: var(--a-5); border-radius: var(--r-l); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-3); color: var(--text-leise);
}
@media (min-width: 64rem) { .banner { left: 1.5rem; right: auto; bottom: 1.5rem; } }
.banner[hidden] { display: none; }
.banner .banner__titel { margin-bottom: var(--a-2); font-size: 1.1875rem; letter-spacing: 0; }
.banner p { font-size: var(--gr-klein); line-height: 1.5; }
.banner__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-3); margin-top: var(--a-4); }
@media (min-width: 64rem) { .banner { left: 1.5rem; right: calc(1.5rem + 3.5rem + 1rem); max-width: none; display: flex; align-items: center; gap: var(--a-5); padding: var(--a-3) var(--a-5); } .banner .banner__titel { margin: 0; font-size: 1rem; white-space: nowrap; } .banner p { margin: 0; flex: 1; } .banner__knoepfe { display: flex; margin: 0; gap: var(--a-2); } .banner__knoepfe .knopf { min-height: 2.5rem; padding-inline: 1.25rem; } }
.banner__knoepfe .knopf { min-height: 2.75rem; padding-inline: 1rem; }
.banner--demo { position: static; }
@media (max-width: 63.999rem) { .banner:not(.banner--demo) { padding: var(--a-4); } .banner .banner__titel { font-size: 1.0625rem; } .banner p { font-size: 0.875rem; } .banner__knoepfe { margin-top: var(--a-3); } }
.markenband__titel { margin-bottom: var(--a-6); }
.markenband__reihen { display: grid; gap: var(--a-4); }
.markenband__fenster { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.markenband__lauf { display: flex; width: max-content; animation: markenlauf-links 60s linear infinite; }
.markenband__lauf--rechts { animation-name: markenlauf-rechts; }
.markenband__reihen:hover .markenband__lauf, .markenband__reihen:focus-within .markenband__lauf { animation-play-state: paused; }
.markenband__liste { list-style: none; display: flex; align-items: center; gap: var(--a-8); padding: var(--a-2) var(--a-8) var(--a-2) 0; margin: 0; }
.markenband__liste li { display: flex; align-items: center; height: 2.75rem; }
.markenband__liste img { display: block; height: 2rem; width: auto; max-width: 9.5rem; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter var(--t-mittel) var(--kurve), opacity var(--t-mittel) var(--kurve); }
.markenband__reihen:hover .markenband__liste img { filter: none; opacity: 1; }
@keyframes markenlauf-links { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes markenlauf-rechts { from { transform: translateX(-25%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .markenband__fenster { -webkit-mask-image: none; mask-image: none; }
  .markenband__lauf { animation: none; width: auto; }
  .markenband__liste { flex-wrap: wrap; gap: var(--a-3) var(--a-7); padding: 0; }
  .markenband__liste--kopie { display: none; }
  .markenband__reihen { max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
}
.wartung__raster { display: grid; gap: var(--a-8); }
@media (min-width: 60rem) { .wartung__raster { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); align-items: start; gap: var(--a-9); } }
.wartung__gross { margin: var(--a-4) 0 var(--a-5); font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(4rem, 2.6rem + 4.5vw, 6.5rem); line-height: 1; letter-spacing: -0.03em; color: #fff; }
.wartung__gross span { display: block; margin-top: var(--a-3); font-size: var(--gr-gross); font-weight: 600; letter-spacing: 0; color: var(--abr-blau-hell); }
.wartung__gruende { list-style: none; display: grid; gap: var(--a-3); margin: 0 0 var(--a-6); }
.wartung__gruende li { position: relative; padding-left: var(--a-5); }
.wartung__gruende li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--abr-blau-hell); }
.wartung__einleitung { margin: var(--a-4) 0 var(--a-6); font-size: var(--gr-gross); }
.wartung__punkte { list-style: none; display: grid; column-gap: var(--a-7); margin: 0; }
@media (min-width: 40rem) { .wartung__punkte { grid-template-columns: 1fr 1fr; } }
.wartung__punkte li { display: grid; grid-template-columns: 2.75rem 1fr; column-gap: var(--a-4); align-content: start; padding-block: var(--a-5); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.wartung__icon { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--abr-blau); color: #fff; }
.wartung__icon .icon { width: 1.25rem; height: 1.25rem; }
.wartung__punkte h3 { margin: 0.4rem 0 var(--a-2); font-size: 1.125rem; }
.wartung__punkte p { margin: 0; font-size: 1rem; }
.stoerungen { display: grid; gap: var(--a-7); }
@media (min-width: 60rem) { .stoerungen { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--a-9); align-items: start; } }
.stoerungen__kopf h2 { margin-bottom: var(--a-5); }
.stoerungen__kopf > p:not(.eyebrow) { margin-bottom: var(--a-5); font-size: var(--gr-gross); }
.stoerungen__liste { list-style: none; border-top: 1px solid var(--linie); }
.stoerungen__liste li { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--a-4); align-items: center; padding-block: var(--a-3); border-bottom: 1px solid var(--linie); color: var(--text); font-family: var(--schrift-titel); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.stoerungen__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--abr-blau-zart); color: var(--abr-blau); }
.stoerungen__icon .icon { width: 1.25rem; height: 1.25rem; }
.fehlercodes { display: grid; gap: var(--a-7); }
@media (min-width: 60rem) { .fehlercodes { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--a-9); align-items: start; } }
@media (min-width: 60rem) { .fehlercodes__kopf { position: sticky; top: calc(var(--kopf-h) + var(--a-6)); } }
.fehlercodes__kopf h2 { margin-bottom: var(--a-5); }
.fehlercodes__kopf > p:not(.eyebrow) { margin-bottom: var(--a-4); }
.fehlercodes__kopf .knopf { margin-top: var(--a-2); }
.fehlercodes__liste { list-style: none; display: grid; gap: var(--a-3); }
.fehlercode { display: grid; grid-template-columns: 4.75rem 1fr; gap: var(--a-4); align-items: start; padding: var(--a-4) var(--a-5); border-radius: var(--r-l); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
.fehlercode__code { display: grid; place-items: center; height: 2.75rem; border-radius: var(--r-s); background: #cfe6f7; border: 2px solid #a9cdea; color: var(--abr-blau-tief); font-family: var(--schrift-titel); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.fehlercode h3 { margin: 0.1rem 0 var(--a-1); font-size: 1.0625rem; }
.fehlercode h3 span { font-family: var(--schrift-text); font-weight: 400; font-size: var(--gr-klein); color: var(--text-leise); }
.fehlercode p { margin: 0; font-size: 1rem; }
.fehlercode .fehlercode__tun { margin-top: var(--a-2); color: var(--text); font-size: var(--gr-klein); }
@media (max-width: 39.999rem) { .fehlercode { grid-template-columns: 1fr; gap: var(--a-3); } .fehlercode__code { justify-self: start; min-width: 4.75rem; padding-inline: var(--a-3); } }
.betrieb__raster { display: grid; gap: var(--a-6); align-items: center; }
@media (min-width: 48rem) { .betrieb__raster { grid-template-columns: auto minmax(0, 1fr); gap: var(--a-8); } }
.betrieb .siegelband__siegel { margin: 0; }
@media (max-width: 47.999rem) { .betrieb .siegelband__siegel { width: calc(6.5rem + 0.75rem + 16px); } }
.betrieb h2 { margin-bottom: var(--a-5); }
.betrieb .haekchen li { color: #fff; }
.betrieb .haekchen .icon { color: var(--abr-blau-hell); }
.kurzgesagt { padding: var(--a-6); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
.kurzgesagt__titel { margin: 0 0 var(--a-3); color: var(--text); font-family: var(--schrift-titel); font-weight: 700; font-size: var(--gr-h3); }
.kurzgesagt dl { margin: 0; }
.kurzgesagt dl > div { display: grid; gap: var(--a-1); padding-block: var(--a-4); border-top: 1px solid var(--linie); }
.kurzgesagt dt { font-size: var(--gr-klein); }
.kurzgesagt dd { margin: 0; color: var(--text); font-family: var(--schrift-titel); font-weight: 600; font-size: 1.125rem; }
.kurzgesagt__fuss { margin: var(--a-2) 0 0; font-size: var(--gr-klein); }
.abschnitt__kopf > .eyebrow { margin-top: 0; font-size: var(--gr-klein); }
.entscheidung { list-style: none; display: grid; gap: var(--a-4); }
@media (min-width: 60rem) { .entscheidung { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-5); } }
.entscheidung li { display: flex; flex-direction: column; gap: var(--a-3); padding: var(--a-6); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--linie); border-top: 4px solid #a9cdea; box-shadow: var(--schatten-1); }
.entscheidung li:nth-child(2) { border-top-color: var(--abr-blau-hell); }
.entscheidung li:nth-child(3) { border-top-color: var(--abr-blau); }
.entscheidung__fall { margin: 0; color: var(--abr-blau-dunkel); font-family: var(--schrift-titel); font-weight: 700; font-size: var(--gr-klein); }
.entscheidung h3 { margin: 0; font-size: var(--gr-h3); }
.entscheidung p { margin: 0; }
.entscheidung .entscheidung__rat { margin-top: auto; padding-top: var(--a-4); border-top: 1px solid var(--linie); font-size: var(--gr-klein); }
.entscheidung__rat strong { color: var(--text); font-family: var(--schrift-titel); font-size: 1rem; }
.paket__bedarf { margin-top: var(--a-5); }
.betrieb__schluss { margin-top: var(--a-6); padding-top: var(--a-5); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.betrieb__schluss h3 { margin-bottom: var(--a-2); }
.betrieb__schluss p { max-width: 40rem; margin-bottom: var(--a-4); }
.seitenhero__marke { width: min(100%, 34rem); justify-self: center; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-xl); background: radial-gradient(120% 95% at 50% 30%, #fff 0%, #eef5fc 50%, #d6e7f6 100%); }
.seitenhero__marke .logozug { width: 100%; }
.abzeichen { list-style: none; margin: var(--a-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 8.25rem)); justify-content: space-between; column-gap: var(--a-4); }
.abzeichen li { position: relative; align-self: start; aspect-ratio: 1; border-radius: 50%; }
.abzeichen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.abzeichen__wko { display: grid; place-items: center; align-content: center; gap: 0.35rem; background: #fff; }
.abzeichen .abzeichen__wko img { position: static; width: 70%; height: auto; border-radius: 0; }
.abzeichen__wko span { font-family: var(--schrift-titel); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-leise); }
.logozug--bereit ~ .abzeichen li { opacity: 0; }
.logozug.ist-an ~ .abzeichen li { animation: az-ein 0.5s cubic-bezier(0.3, 1.3, 0.6, 1) 1.95s both; }
.logozug.ist-an ~ .abzeichen li:nth-child(2) { animation-delay: 2.13s; }
.logozug.ist-an ~ .abzeichen li:nth-child(3) { animation-delay: 2.31s; }
@keyframes az-ein { from { opacity: 0; transform: translateY(6px) scale(0.82); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
.abzeichen picture { display: contents; }
.abzeichen source { display: none; }
.stoerungen__liste--satz li { align-items: start; padding-block: var(--a-4); }
.stoerungen__liste--satz li > span:last-child { padding-top: 0.55rem; }
.stoerungen__satz { display: block; margin-top: 0.2rem; font-family: var(--schrift-text); font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--text-leise); }
.gas--wasser { background: var(--abr-blau-zart); border-color: var(--abr-blau-hell); }
.gas--wasser .gas__icon { background: var(--abr-blau); color: #fff; }
.gas__aktion { margin-top: var(--a-5); }
@media (min-width: 60rem) { .entscheidung--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vergleich__mehr h3 { margin-bottom: var(--a-4); }
@media (min-width: 60rem) {
  .vergleich--mehr { grid-template-rows: auto auto; align-items: start; row-gap: var(--a-6); }
  .vergleich--mehr .vergleich__text { grid-column: 1; grid-row: 1; align-self: end; }
  .vergleich--mehr .vergleich__bild { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .vergleich--mehr .vergleich__mehr { grid-column: 1; grid-row: 2; }
}
@media (min-width: 64rem) { .galerie--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vertrauen__punkt--link { text-decoration: none; }
.vertrauen__punkt--link .vertrauen__klein { color: var(--abr-blau-dunkel); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.vertrauen__punkt--link:hover .vertrauen__klein { color: var(--abr-blau-tief); }
.waerme { list-style: none; display: grid; gap: var(--a-5); }
@media (min-width: 60rem) { .waerme { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.waerme > li { padding: var(--a-6); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
.waerme h3 { margin-bottom: var(--a-2); }
.waerme > li > p { margin: 0 0 var(--a-5); }
.waerme__liste { list-style: none; display: grid; gap: var(--a-3) var(--a-5); }
@media (min-width: 30rem) { .waerme__liste--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.waerme__liste li, .anzeichen li { display: flex; align-items: center; gap: var(--a-3); color: var(--text); font-family: var(--schrift-titel); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.waerme__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--abr-blau-zart); color: var(--abr-blau); }
.waerme__icon .icon { width: 1.2rem; height: 1.2rem; }
@media (max-width: 39.999rem) { .waerme > li { padding: var(--a-5); } .waerme__liste { gap: var(--a-2) var(--a-4); } .waerme__icon { width: 2.25rem; height: 2.25rem; } }
.anzeichen { list-style: none; display: grid; gap: var(--a-4); }
.anzeichen li { padding: var(--a-4) var(--a-5); border-radius: var(--r-l); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
@media (min-width: 40rem) { .anzeichen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .anzeichen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-5); }
  .anzeichen li { flex-direction: column; align-items: flex-start; gap: var(--a-4); padding: var(--a-5); }
}
.stationen { list-style: none; display: grid; gap: var(--a-5); }
.stationen li { position: relative; display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--a-4); align-content: start; }
.stationen li:not(:last-child)::after { content: ""; position: absolute; left: 1.625rem; top: 3.25rem; bottom: calc(-1 * var(--a-5)); width: 2px; background: rgba(28, 118, 188, 0.28); transform: translateX(-1px); }
.stationen__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--abr-blau); color: #fff; }
.stationen__icon .icon { width: 1.4rem; height: 1.4rem; }
.stationen h3 { margin: 0.65rem 0 var(--a-2); font-size: 1.1875rem; }
.stationen p { margin: 0; }
@media (min-width: 64rem) {
  .stationen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stationen li { grid-template-columns: 1fr; gap: var(--a-3); }
  .stationen li:not(:last-child)::after { left: 3.25rem; right: calc(-1 * var(--a-5)); top: 1.625rem; bottom: auto; width: auto; height: 2px; transform: translateY(-1px); }
  .stationen h3 { margin-top: var(--a-2); }
  .stationen p { font-size: 1rem; }
}
.einsatz { display: grid; gap: var(--a-5); }
@media (min-width: 60rem) { .einsatz { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--a-6); } }
.einsatz__gruppe { padding: var(--a-6); border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }
.einsatz__gruppe h3 { margin-bottom: var(--a-5); }
.einsatz__liste { list-style: none; display: grid; gap: var(--a-4) var(--a-6); }
@media (min-width: 40rem) { .einsatz__liste--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.einsatz__liste li { display: flex; align-items: center; gap: var(--a-3); color: #fff; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.einsatz__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--abr-blau); color: #fff; }
.einsatz__icon .icon { width: 1.25rem; height: 1.25rem; }
.einsatz__zusatz { display: flex; align-items: flex-start; gap: var(--a-3); margin: var(--a-5) 0 0; padding-top: var(--a-5); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 1rem; }
.einsatz__zusatz > span:last-child { padding-top: 0.15rem; }
.einsatz__zusatz .pfeillink, .einsatz__link .pfeillink { display: inline; }
.einsatz__zusatz .pfeillink .icon, .einsatz__link .pfeillink .icon { display: inline-block; vertical-align: -0.2em; margin-left: 0.35rem; }
.einsatz__link { margin: var(--a-5) 0 0; }
@media (max-width: 39.999rem) { .einsatz__gruppe { padding: var(--a-5); } .stationen { gap: var(--a-4); } .stationen li:not(:last-child)::after { bottom: calc(-1 * var(--a-4)); } }
.zeitzuschlag { list-style: none; display: grid; gap: var(--a-4); }
.zeitzuschlag > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0 var(--a-4); padding: var(--a-4) var(--a-5); border-radius: var(--r-l); background: #fff; border: 1px solid var(--linie); border-top: 4px solid var(--linie); box-shadow: var(--schatten-1); }
.zeitzuschlag > li:nth-child(2) { border-top-color: var(--abr-blau-hell); }
.zeitzuschlag > li:nth-child(3) { border-top-color: var(--abr-blau); }
.zeitzuschlag__icon { grid-column: 1; grid-row: 1 / 4; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--abr-blau-zart); color: var(--abr-blau); }
.zeitzuschlag__icon .icon { width: 1.3rem; height: 1.3rem; }
.zeitzuschlag h3 { grid-column: 2; margin: 0.15rem 0 0; font-size: 1.0625rem; }
.zeitzuschlag__wert { grid-column: 2; margin: var(--a-1) 0; font-family: var(--schrift-titel); font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--text); white-space: nowrap; }
.zeitzuschlag__zeit { grid-column: 2; margin: 0; font-size: var(--gr-klein); line-height: 1.4; color: var(--text-leise); }
@media (max-width: 22.499rem) { .zeitzuschlag > li { gap: 0 var(--a-3); padding-inline: var(--a-4); } .zeitzuschlag__icon { width: 2.25rem; height: 2.25rem; } }
@media (min-width: 60rem) {
  .zeitzuschlag { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-5); }
  .zeitzuschlag > li { grid-template-columns: 1fr; grid-template-rows: auto; align-content: start; align-items: start; gap: 0; padding: var(--a-6); }
  .zeitzuschlag__icon, .zeitzuschlag h3, .zeitzuschlag__zeit, .zeitzuschlag__wert { grid-column: 1; grid-row: auto; }
  .zeitzuschlag__icon { width: 3.25rem; height: 3.25rem; margin-bottom: var(--a-5); }
  .zeitzuschlag__icon .icon { width: 1.5rem; height: 1.5rem; }
  .zeitzuschlag h3 { margin: 0; font-size: 1.1875rem; }
  .zeitzuschlag__wert { margin: var(--a-3) 0; font-size: clamp(1.75rem, 0.9rem + 1.4vw, 2.5rem); }
}
.notfaelle { list-style: none; display: grid; gap: var(--a-5); }
@media (min-width: 60rem) { .notfaelle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notfaelle > li { display: flex; flex-direction: column; align-items: flex-start; padding: var(--a-6); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-1); }
.notfaelle__kopf { display: flex; align-items: center; gap: var(--a-4); margin-bottom: var(--a-5); }
.notfaelle__icon { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--abr-blau); color: #fff; }
.notfaelle__icon .icon { width: 1.4rem; height: 1.4rem; }
.notfaelle h3 { margin: 0; }
.notfaelle__faelle { list-style: none; display: grid; gap: var(--a-2); margin: 0 0 var(--a-4); }
.notfaelle__faelle li { position: relative; padding-left: 1.25rem; color: var(--text); font-family: var(--schrift-titel); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.notfaelle__faelle li::before { content: ""; position: absolute; left: 0.15rem; top: 0.45em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--abr-blau); }
.notfaelle > li > p { margin: 0 0 var(--a-5); }
.notfaelle > li > .pfeillink { margin-top: auto; }
@media (max-width: 39.999rem) { .notfaelle > li { padding: var(--a-5); } .notfaelle__kopf { margin-bottom: var(--a-4); } .notfaelle__icon { width: 2.75rem; height: 2.75rem; } }
.seitenhero__text:has(+ .seitenhero__gas) { margin-bottom: var(--a-4); }
.seitenhero__gas { display: flex; align-items: flex-start; gap: var(--a-3); max-width: var(--breite-text); margin: 0 0 var(--a-5); color: var(--text); font-size: 1rem; line-height: 1.5; }
.seitenhero__gas-icon { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; border-radius: 50%; background: var(--warn-rand); color: var(--text); }
.seitenhero__gas-icon .icon { width: 0.875rem; height: 0.875rem; }
.sofort { display: grid; gap: var(--a-5); }
@media (min-width: 60rem) { .sofort { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.zeitzuschlag--fakten > li:nth-child(n) { border-top-color: var(--abr-blau); }
.zeitzuschlag--fakten .zeitzuschlag__wert { white-space: normal; }
@media (min-width: 40rem) { .zeitzuschlag--fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .zeitzuschlag--fakten .zeitzuschlag__wert { font-size: clamp(1.375rem, 0.85rem + 0.8vw, 1.75rem); } }
@media (min-width: 64rem) { .zeitzuschlag--fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .einsatz--gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.einsatz__liste a { text-decoration-color: rgba(255, 255, 255, 0.45); }
.einsatz__liste a:hover { color: var(--abr-blau-hell); text-decoration-color: currentColor; }
@media (min-width: 64rem) {
  .seitenhero__frei--kurz { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, transparent 0, #000 8%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, transparent 0, #000 8%); }
}
.kartenband { --k-at: #e6edf4; --k-noe: #d8e8f7; --k-wien: #a9cef1; --k-bgld: #c3dcf3; --k-ausland: #f0f2f5; --k-fluss: #4f9fe3; --k-see: #79b5ec;
  border-block: 1px solid var(--linie); }
.kartenband .karte2 { aspect-ratio: auto; border: 0; border-radius: 0; background: var(--grund); }
.kartenband .karte2:has(iframe) { min-height: 15rem; }
.kartenband .karte2__vorhang { position: relative; inset: auto; display: block; padding: var(--a-5) 0; text-align: left; background: none; }
.kartenband__kasten { display: grid; gap: var(--a-3); justify-items: start; max-width: 25rem; padding: var(--a-5) var(--a-6); background: #fff;
  border-radius: var(--r-l); box-shadow: var(--schatten-2); }
.kartenband__kasten p { margin: 0; font-size: var(--gr-klein); }
@media (max-width: 63.99rem) {
  .kartenband .karte2 { height: 20rem; background: var(--k-ausland); }
  .kartenband .karte2__vorhang { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 0 var(--a-4); }
  .kartenband__kasten { max-width: none; padding: var(--a-4); }
  .kartenband__kasten .knopf { order: -1; width: 100%; }
  .kartenband__kasten p { font-size: 0.875rem; }
  .kartenbild { position: absolute; top: 0; left: 50%; width: 160rem; max-width: none; height: 20rem; translate: -57.5% 0; }
}
@media (min-width: 64rem) {
  .kartenband .karte2 { height: 20rem; background: var(--k-ausland); }
  .kartenband .karte2__vorhang { position: absolute; inset: 0; display: flex; align-items: center; padding: 0.875rem 0 0; }
  .kartenbild { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
@media (min-width: 64rem) and (max-width: 74.99rem) { .kartenbild { width: calc(100% + 7.5rem); } }
.kartenbild .k-fl { stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.kartenbild .k-at { fill: var(--k-at); stroke: rgba(255, 255, 255, 0.5); }
.kartenbild .k-aus { fill: var(--k-ausland); }
.kartenbild .k-gebiet { fill: none; stroke: var(--abr-blau-hell); stroke-width: 5; stroke-linejoin: round; }
.kartenbild .k-see { fill: var(--k-see); stroke: var(--abr-blau); stroke-width: 0.75; }
.kartenbild .k-fluss { fill: none; stroke: var(--k-fluss); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.kartenbild .k-fluss--klein { stroke-width: 1.75; }
.kartenbild .k-name { font-family: var(--schrift-titel); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; fill: var(--text-leise); text-anchor: middle;
  paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.kartenbild .k-name--ort { font-size: 17px; font-weight: 700; fill: var(--text); }
.kartenbild .k-sitz { fill: var(--abr-blau); stroke: #fff; stroke-width: 2; }
.kartenbild .k-sitz-hof { fill: var(--abr-blau); opacity: 0.18; }
.erreichbar .stoerungen__liste { margin-bottom: var(--a-6); }
.erreichbar .stoerungen__satz .pfeillink { margin-top: var(--a-1); }
.orbit { position: relative; width: min(100%, 34rem, calc(100svh - var(--kopf-h) - 1px - 3rem - 5.375rem - 4rem)); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.seitenhero--orbit { overflow-x: clip; }
.orbit__bahn { position: absolute; top: 50%; left: 50%; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(28, 118, 188, 0.2);
  background: radial-gradient(circle, transparent 58%, rgba(90, 167, 232, 0.08) 82%, rgba(90, 167, 232, 0.16) 100%); box-shadow: 0 0 2.5rem rgba(90, 167, 232, 0.16); }
.orbit__bahn--innen { width: 43cqw; height: 43cqw; }
.orbit__bahn--aussen { width: 80cqw; height: 80cqw; }
.orbit__mitte { position: absolute; z-index: 1; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 17cqw; height: 17cqw; border-radius: 50%;
  background: var(--abr-blau-tief); border: 2px solid #b9d4ee; box-shadow: 0 0.75rem 2rem rgba(14, 44, 74, 0.2), 0 0 3rem rgba(90, 167, 232, 0.35); }
.orbit__mitte .logo { --logo-blau: #4a9be0; }
.orbit__mitte svg { width: 64%; height: 64%; }
.orbit__ring { position: absolute; inset: 0; z-index: 2; list-style: none; margin: 0; padding: 0; }
.orbit__ring--innen { --r: 21.5cqw; }
.orbit__ring--aussen { --r: 40cqw; }
.orbit__ring li { position: absolute; top: 50%; left: 50%; transform: rotate(var(--w)) translateX(var(--r)) rotate(calc(-1 * var(--w))); }
.orbit__ding { position: relative; display: grid; place-items: center; align-content: center; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: var(--schatten-2); }
.orbit__ding picture { display: contents; }
.orbit__ding source { display: none; }
.orbit__ding--bild, .orbit__ding--wko { width: 14cqw; height: 14cqw; }
.orbit__ding--bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.orbit__ding--wko { gap: 0.25rem; border: 1px solid var(--linie); }
.orbit__ding--wko img { width: 72%; height: auto; }
.orbit__ding--wko span { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(0.625rem, 1.9cqw, 0.6875rem); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-leise); }
.orbit__ding--land { width: 16cqw; height: 16cqw; background: linear-gradient(var(--f1) 50%, var(--f2) 50%); box-shadow: 0 0 0 3px #fff, var(--schatten-2); }
.orbit__ding--wien { --f1: #d8121e; --f2: #fff; }
.orbit__ding--noe { --f1: #1b4f9c; --f2: #ffcc00; }
.orbit__ding--bgld { --f1: #c8102e; --f2: #f2c200; }
.orbit__ding--land svg { position: absolute; inset: 0 0 10%; margin: auto; width: 66%; height: 66%; }
.orbit__ding--land svg path { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.orbit__ding--land span { position: absolute; left: 50%; bottom: -0.45rem; translate: -50% 0; padding: 0.15rem 0.45rem; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px var(--linie), var(--schatten-1); white-space: nowrap; font-family: var(--schrift-titel); font-weight: 700;
  font-size: clamp(0.625rem, 2.1cqw, 0.75rem); line-height: 1.1; color: var(--text); }
@keyframes orbit-dreh { to { rotate: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  .orbit__ring--innen, .orbit__ring--innen .orbit__ding { animation: orbit-dreh 60s linear infinite; }
  .orbit__ring--innen .orbit__ding { animation-direction: reverse; }
  .orbit__ring--aussen, .orbit__ring--aussen .orbit__ding { animation: orbit-dreh 90s linear infinite reverse; }
  .orbit__ring--aussen .orbit__ding { animation-direction: normal; }
  .orbit:hover .orbit__ring, .orbit:hover .orbit__ding { animation-play-state: paused; }
}
.gebiete { border-top: 1px solid var(--linie); }
.gebiete__zeile { display: grid; gap: var(--a-4); padding-block: var(--a-6); border-bottom: 1px solid var(--linie); }
.gebiete h2 { margin-bottom: var(--a-2); font-size: var(--gr-h3); scroll-margin-top: var(--a-6); }
.gebiete__kopf p { margin: 0; }
.gebiete__link { margin: 0; }
@media (min-width: 60rem) {
  .gebiete__zeile { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--a-8); align-items: start; }
  .gebiete__link { padding-top: var(--a-4); }
}
.ortkarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); }
.ortkarte { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--a-2); padding: var(--a-3); border-radius: var(--r-l);
  border: 1px solid var(--linie); background: linear-gradient(135deg, rgba(232, 241, 250, 0.35), #fff 45%, rgba(232, 241, 250, 0.7));
  color: var(--text); font-family: var(--schrift-titel); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.ortkarte__kopf, .ortkarte__fuss { position: relative; }
.ortkarte__fuss { min-width: 0; overflow-wrap: break-word; }
.ortkarte__kopf { display: flex; align-items: center; justify-content: space-between; }
.ortkarte__pin { flex: none; color: var(--abr-blau); filter: drop-shadow(0 0 4px rgba(90, 167, 232, 0.55)); }
.ortkarte__status, .ortkarte__linie { display: none; }
@media (max-width: 22.4375rem) { .ortkarte { gap: 0.375rem; padding-inline: 0.625rem; font-size: 0.875rem; } }
@media (min-width: 60rem) {
  .ortkarten { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--a-3); }
  .ortkarten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ortkarte { flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--a-4); min-height: 7.375rem; padding: var(--a-4) var(--a-5); font-size: 1rem; }
  .ortkarte__status { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.5rem; border-radius: var(--r-rund); background: rgba(14, 44, 74, 0.05);
    font-family: var(--schrift-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--text-leise); }
  .ortkarte__status::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--abr-blau); }
  .ortkarte__name { display: block; }
  .ortkarte__linie { display: block; height: 1px; margin-top: var(--a-1); transform: scaleX(0.3); transform-origin: left center;
    background: linear-gradient(to right, rgba(28, 118, 188, 0.6), rgba(90, 167, 232, 0.35), transparent); }
}
@media (min-width: 60rem) and (hover: hover) and (pointer: fine) {
  .ortkarte:hover .ortkarte__pin { filter: drop-shadow(0 0 8px rgba(90, 167, 232, 0.9)); }
  .ortkarte:hover .ortkarte__name { transform: translateX(4px); }
  .ortkarte:hover .ortkarte__linie { transform: scaleX(1); }
  .ortkarte:hover .ortkarte__status { transform: scale(1.05); background: rgba(14, 44, 74, 0.08); }
}
@media (min-width: 60rem) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ortkarte__pin { transition: filter var(--t-mittel) var(--kurve); }
  .ortkarte__name { transition: transform var(--t-mittel) var(--kurve); }
  .ortkarte__linie { transition: transform var(--t-langsam) ease-out; }
  .ortkarte__status { transition: transform var(--t-schnell) var(--kurve), background-color var(--t-schnell) var(--kurve); }
}
.bezirke--karten { gap: var(--a-2); }
.bezirke--karten li { display: flex; align-items: center; justify-content: space-between; gap: var(--a-2); padding: var(--a-3) var(--a-4); border: 1px solid var(--linie);
  border-radius: var(--r-m); background: linear-gradient(135deg, rgba(232, 241, 250, 0.35), #fff 45%, rgba(232, 241, 250, 0.7));
  font-family: var(--schrift-titel); font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.bezirk__name { min-width: 0; overflow-wrap: break-word; }
.bezirk__linie { display: block; height: 1px; margin-top: 0.3rem; transform: scaleX(0.3); transform-origin: left center;
  background: linear-gradient(to right, rgba(28, 118, 188, 0.6), rgba(90, 167, 232, 0.35), transparent); }
.bezirke--karten .plz { flex: none; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.15rem 0.45rem; border-radius: var(--r-rund); background: rgba(14, 44, 74, 0.05);
  font-family: var(--schrift-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--text-leise); }
.bezirke--karten .plz::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--abr-blau); }
@media (max-width: 39.999rem) {
  .bezirke--karten li { gap: var(--a-1); padding: var(--a-2) var(--a-3); font-size: 0.875rem; }
  .bezirke--karten .plz { gap: 0; padding: 0.1rem 0.35rem; font-size: 0.6875rem; letter-spacing: 0.02em; }
  .bezirke--karten .plz::before { display: none; }
}
@media (min-width: 60rem) { .bezirke--karten { gap: var(--a-3); } .bezirke--karten li { font-size: 1rem; } }
@media (hover: hover) and (pointer: fine) {
  .bezirke--karten li:hover .bezirk__name { transform: translateX(3px); }
  .bezirke--karten li:hover .bezirk__linie { transform: scaleX(1); }
  .bezirke--karten li:hover .plz { transform: scale(1.05); background: rgba(14, 44, 74, 0.08); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bezirk__name { transition: transform var(--t-mittel) var(--kurve); }
  .bezirk__linie { transition: transform var(--t-langsam) ease-out; }
  .bezirke--karten .plz { transition: transform var(--t-schnell) var(--kurve), background-color var(--t-schnell) var(--kurve); }
}
.zuschlagkarten { display: grid; gap: var(--a-3); }
.zuschlagkarten__titel { margin: 0 0 var(--a-1); color: #fff; font-family: var(--schrift-titel); font-weight: 650; font-size: 1.0625rem; }
.zuschlagkarten__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-3); }
.zuschlagkarte { display: grid; gap: var(--a-2); padding: var(--a-4) var(--a-5); border-radius: var(--r-l); border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(135deg, #eef4fb, #fff 45%, #e6f0fa); box-shadow: var(--schatten-2); color: var(--text); }
.zuschlagkarte__kopf { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon wert" "zeit zeit"; align-items: center; gap: var(--a-2) var(--a-3); }
.zuschlagkarte__icon { grid-area: icon; color: var(--abr-blau); filter: drop-shadow(0 0 4px rgba(90, 167, 232, 0.55)); }
.zuschlagkarte__zeit { grid-area: zeit; font-family: var(--schrift-titel); font-weight: 600; line-height: 1.3; }
.zuschlagkarte__wert { grid-area: wert; justify-self: end; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.55rem; border-radius: var(--r-rund);
  background: rgba(14, 44, 74, 0.06); font-family: var(--schrift-text); font-weight: 600; font-size: 0.8125rem; color: var(--text); white-space: nowrap; }
.zuschlagkarte__wert::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--abr-blau); }
.zuschlagkarte__wert--stark { background: rgba(28, 118, 188, 0.1); color: var(--abr-blau-tief); }
.zuschlagkarte__satz { margin: 0; font-size: var(--gr-klein); color: var(--text-leise); }
.zuschlagkarte__linie { display: block; height: 1px; margin-top: var(--a-1); transform: scaleX(0.3); transform-origin: left center;
  background: linear-gradient(to right, rgba(28, 118, 188, 0.6), rgba(90, 167, 232, 0.35), transparent); }
@media (max-width: 22.4375rem) { .zuschlagkarte { padding-inline: var(--a-4); } }
@media (min-width: 60rem) { .zuschlagkarte__kopf { grid-template-columns: auto 1fr auto; grid-template-areas: "icon zeit wert"; } }
@media (hover: hover) and (pointer: fine) {
  .zuschlagkarte:hover .zuschlagkarte__icon { filter: drop-shadow(0 0 8px rgba(90, 167, 232, 0.9)); }
  .zuschlagkarte:hover .zuschlagkarte__zeit { transform: translateX(4px); }
  .zuschlagkarte:hover .zuschlagkarte__linie { transform: scaleX(1); }
  .zuschlagkarte:hover .zuschlagkarte__wert { transform: scale(1.05); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .zuschlagkarte__icon { transition: filter var(--t-mittel) var(--kurve); }
  .zuschlagkarte__zeit { transition: transform var(--t-mittel) var(--kurve); }
  .zuschlagkarte__linie { transition: transform var(--t-langsam) ease-out; }
  .zuschlagkarte__wert { transition: transform var(--t-schnell) var(--kurve); }
}
@media (min-width: 64rem) {
  .karten--kopfzeile .karte { display: grid; grid-template-columns: auto minmax(0, 1fr) 1.4rem; grid-template-areas: "icon titel pfeil" "linie linie linie" "text text text"; align-items: center; align-content: start; column-gap: var(--a-4); row-gap: var(--a-3); }
  .karten--kopfzeile .karte__icon { grid-area: icon; margin: 0; }
  .karten--kopfzeile .karte h3 { grid-area: titel; margin: 0; overflow-wrap: break-word; }
  .karten--kopfzeile .karte p { grid-area: text; }
  .karten--kopfzeile .karte::before { content: ""; grid-area: linie; align-self: start; height: 1px; transform: scaleX(0.3); transform-origin: left center;
    background: linear-gradient(to right, rgba(28, 118, 188, 0.6), rgba(90, 167, 232, 0.35), transparent); }
  .karten--kopfzeile .karte__pfeil { grid-area: pfeil; margin: 0; padding: 0; align-self: center; }
  .karten--kopfzeile .karte:hover::before { transform: scaleX(1); }
}
@media (min-width: 64rem) and (max-width: 79.999rem) { .karten--kopfzeile .karte { column-gap: var(--a-3); } .karten--kopfzeile .karte h3 { font-size: 1.125rem; } }
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) { .karten--kopfzeile .karte::before { transition: transform var(--t-langsam) ease-out; } }
@media (min-width: 64rem) {
  .abschnitt:has(.ablauf:not(.ablauf--kompakt), .stationen) { overflow-x: clip; }
  .ablauf:not(.ablauf--kompakt), .stationen { --r-kreis: 1.5rem; position: relative; gap: 0; }
  .stationen { --r-kreis: 1.625rem; --linie-zeit: rgba(28, 118, 188, 0.28); }
  .ablauf:not(.ablauf--kompakt) li, .stationen li { justify-items: center; padding-inline: var(--a-3); text-align: center; }
  .ablauf:not(.ablauf--kompakt) li:not(:last-child)::after, .stationen li:not(:last-child)::after { left: 50%; right: -50%; top: var(--r-kreis); }
  .ablauf:not(.ablauf--kompakt)::before, .ablauf:not(.ablauf--kompakt)::after, .stationen::before, .stationen::after {
    content: ""; position: absolute; top: var(--r-kreis); height: 2px; transform: translateY(-1px); background: var(--linie-zeit, var(--linie-stark)); }
  .ablauf:not(.ablauf--kompakt)::before, .stationen::before { left: calc(50% - 50vw); right: 90%; }
  .ablauf:not(.ablauf--kompakt)::after, .stationen::after { left: 90%; right: calc(50% - 50vw); }
  .ablauf.ablauf--fuellt::before, .ablauf.ablauf--fuellt::after, .stationen.ablauf--fuellt::before, .stationen.ablauf--fuellt::after,
  .stationen.ablauf--fuellt li:not(:last-child)::after {
    background: linear-gradient(var(--abr-blau), var(--abr-blau)) left / 0% 100% no-repeat var(--linie-zeit, var(--linie-stark)); }
  .ablauf.ablauf--fuellt::before, .stationen.ablauf--fuellt::before { transition: background-size var(--t-zulauf) linear; }
  .ablauf.ablauf--fuellt::after, .stationen.ablauf--fuellt::after { transition: background-size var(--t-linie) linear calc(var(--t-zulauf) + 4 * var(--t-schritt) + var(--t-fuell)); }
  .stationen.ablauf--fuellt li:not(:last-child)::after { transition: background-size var(--t-linie) linear calc(var(--t-zulauf) + var(--i, 0) * var(--t-schritt) + var(--t-fuell)); }
  .stationen.ablauf--fuellt .stationen__icon { color: var(--abr-blau); box-shadow: inset 0 0 0 2px var(--abr-blau);
    background: linear-gradient(to top, var(--abr-blau) 0 84%, var(--abr-blau-hell)) bottom / 100% 0% no-repeat #fff;
    transition: background-size var(--t-fuell) ease-in-out calc(var(--t-zulauf) + var(--i, 0) * var(--t-schritt)), color var(--t-schnell) linear calc(var(--t-zulauf) + var(--i, 0) * var(--t-schritt) + var(--t-fuell) * 0.5); }
  .ablauf.ist-gefuellt::before, .ablauf.ist-gefuellt::after, .stationen.ist-gefuellt::before, .stationen.ist-gefuellt::after,
  .stationen.ist-gefuellt li:not(:last-child)::after { background-size: 100% 100%; }
  .stationen.ist-gefuellt .stationen__icon { background-size: 100% 100%; color: #fff; }
}
.marken { display: flex; gap: var(--a-3); align-items: flex-start; padding: var(--a-4) var(--a-5); border-radius: var(--r-m); background: var(--flaeche); color: var(--text); }
.marken .icon { color: var(--abr-blau); margin-top: 0.2rem; }
.text { max-width: var(--breite-text); }
.text h2 { margin-bottom: var(--a-5); }
.text > p { margin-bottom: var(--a-4); }
.text .haekchen { margin-top: var(--a-5); }
.text-mit-bild { display: grid; gap: var(--a-7); align-items: center; }
@media (min-width: 60rem) { .text-mit-bild { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--a-8); } }
.text-mit-bild img { border-radius: var(--r-xl); width: 100%; }
.danke { max-width: 44rem; margin-inline: auto; padding: clamp(1.75rem, 1rem + 3vw, 3rem); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-2); text-align: center; }
.danke__icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto var(--a-5); border-radius: 50%; background: var(--abr-blau-zart); color: var(--abr-blau); }
.danke__icon .icon { width: 2rem; height: 2rem; }
.danke h1 { font-size: var(--gr-h2); margin-bottom: var(--a-5); }
.danke__nummer { margin: var(--a-5) 0 var(--a-2); color: var(--text); font-family: var(--schrift-titel); font-weight: 600; }
.danke__nummer output { display: block; margin-top: var(--a-2); color: var(--abr-blau-dunkel); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 800; letter-spacing: 0.04em; }
.danke .knopfreihe { justify-content: center; margin-top: var(--a-4); }
.danke__eilig { margin: var(--a-6) 0 0; padding-top: var(--a-5); border-top: 1px solid var(--linie); color: var(--text); font-family: var(--schrift-titel); font-weight: 600; }
@media (max-width: 39.999rem) { .danke .knopfreihe { flex-direction: column; } .danke .knopfreihe .knopf { width: 100%; } }
.angaben { margin: var(--a-5) 0 0; max-width: 46rem; border-top: 1px solid var(--linie); }
.angaben > div { display: grid; gap: 0.15rem; padding-block: var(--a-3); border-bottom: 1px solid var(--linie); }
.angaben dt { color: var(--text); font-family: var(--schrift-titel); font-weight: 600; }
.angaben dd { margin: 0; }
@media (min-width: 40rem) { .angaben > div { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--a-5); } }
.rechtstext__text { max-width: var(--breite-text); }
.rechtstext__text h2 { margin-bottom: var(--a-4); font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); }
.rechtstext__text > section + section { margin-top: var(--a-5); padding-top: var(--a-5); border-top: 1px solid var(--linie); }
@media (min-width: 64rem) {
  .rechtstext { display: grid; grid-template-columns: minmax(0, var(--breite-text)) 15rem; justify-content: space-between; column-gap: var(--a-8); align-items: start; }
  .rechtstext__text { grid-column: 1; grid-row: 1; }
  .rechtstext__text > section + section { margin-top: var(--a-6); padding-top: var(--a-6); }
  .rechtstext__inhalt { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--kopf-h) + var(--a-6)); }
  .rechtstext__inhalt ul { list-style: none; border-left: 2px solid var(--linie); }
  .rechtstext__inhalt a { display: block; margin-left: -2px; padding: 0.35rem 0 0.35rem var(--a-4); border-left: 2px solid transparent; color: var(--text-leise); text-decoration: none; }
  .rechtstext__inhalt a:hover, .rechtstext__inhalt a:focus-visible { color: var(--abr-blau); border-left-color: var(--abr-blau); }
}
@media (prefers-reduced-motion: no-preference) {
  .karte:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; scroll-behavior: auto !important; }
}
.lightbox { --fokus: #fff; }
.lightbox__zu:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 7px #0b1c2e; }
.formular__zeile { align-items: start; }
.lightbox__zu .icon { width: 1.5rem; height: 1.5rem; }
.markenband__liste img[src$="sime.svg"] { height: 2.6rem; }
.markenband__liste img[src$="austria-email.svg"] { height: 2.4rem; }
.markenband__liste img[src$="loeblich.webp"] { height: 2.3rem; }
.markenband__liste img:is([src$="baxi.svg"], [src$="buderus.svg"], [src$="hoval.svg"]) { height: 1.75rem; }
.preis--wasser .preis__zusatz { color: #fff; }
.fuss__raster nav a, .vertrauen__klein a, .angaben a { padding-block: 0.35rem; }
.fuss__kontakt a, .fuss__unten a, .fuss__unten .textknopf, .einsatz__liste a, .stimmen__link, .haekchen a { padding-block: 0.35rem; margin-block: -0.35rem; }
.brotkrumen a { display: inline-block; padding-block: 0.625rem; margin-block: -0.625rem; }
.pfeillink { padding-block: 0.5rem; margin-block: -0.5rem; }
.notfaelle > li > .pfeillink { padding-top: 0; }
.erreichbar .stoerungen__satz .pfeillink { margin-top: calc(var(--a-1) - 0.5rem); }
.kopf__menueknopf { position: relative; }
.kopf__menueknopf::after { content: ""; position: absolute; inset: 0 -0.25rem; }
@media (hover: hover) {
  .faq summary:hover { color: var(--abr-blau-dunkel); }
  .brotkrumen a:hover { color: var(--abr-blau-dunkel); }
  .feld:not(.hat-fehler) :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea):hover { border-color: var(--text-leise); }
  .wahl label:hover { border-color: var(--abr-blau); }
  .lightbox__zu:hover { background: var(--abr-blau-zart); }
}
html.mit-banner { scroll-padding-bottom: var(--banner-h); }
@media (max-width: 39.999rem) {
  .brotkrumen ol { justify-content: center; }
  .seitenhero :is(h1, .seitenhero__text) { text-align: center; }
  .seitenhero__raster .eyebrow { display: flex; justify-content: center; }
  .seitenhero__raster .eyebrow::before { display: none; }
}
.gas__notruf, .danke__nummer output { white-space: nowrap; }
.gas__notruf span { white-space: normal; }
@media (max-width: 22.499rem) { .danke__nummer output { font-size: 1.5rem; } }
.seitenhero__foto { display: none; }
@media (max-width: 63.999rem) {
  main:has(> .seitenhero--foto) { position: relative; }
  main:has(> .seitenhero--foto) > .brotkrumen { --fokus: #fff; position: absolute; z-index: 2; inset: 0 0 auto; }
  main:has(> .seitenhero--foto) > .brotkrumen :is(a, [aria-current="page"]), main:has(> .seitenhero--foto) > .brotkrumen li + li::before { color: #fff; }
  .seitenhero.seitenhero--foto { --fokus: #fff; position: relative; isolation: isolate; overflow: clip; min-height: 26rem; padding-top: calc(3rem + var(--a-6)); background: var(--abr-blau-tief); }
  .seitenhero--foto .seitenhero__foto { display: block; position: absolute; inset: 0; z-index: -2; }
  .seitenhero__foto picture { display: block; height: 100%; }
  .seitenhero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foto-x, 50%) 50%; }
  .seitenhero--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 44, 74, 0.8), rgba(14, 44, 74, 0.72) 3.25rem, rgba(14, 44, 74, 0) 6.5rem) top / 100% 6.5rem no-repeat,
      linear-gradient(180deg, rgba(14, 44, 74, 0.25), rgba(14, 44, 74, 0.22) 80%, rgba(21, 95, 153, 0.2)); }
  .seitenhero--foto .seitenhero__raster > div:first-child { position: relative; z-index: 1; padding: var(--a-5) 1.25rem; border-radius: 1.25rem; background: rgba(14, 44, 74, 0.58);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.35), inset -1px -1px 1px rgba(255, 255, 255, 0.35), 0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08); }
  .seitenhero--foto :is(h1, .seitenhero__text, .seitenhero__gas) { color: #fff; }
  .seitenhero--foto .seitenhero__gas a { color: #fff; }
  .seitenhero--foto .eyebrow { color: #e0efff; }
  .seitenhero--foto :is(.seitenhero__text, .seitenhero__gas) { margin-bottom: 0; }
  .seitenhero--foto .seitenhero__text:has(+ .seitenhero__gas) { margin-bottom: var(--a-4); }
  .seitenhero.seitenhero--wagen { padding-bottom: calc(min(100vw, 30rem) / 2 + 1.5rem); background: #ecf3f9; }
  .seitenhero--foto .seitenhero__foto--wagen { inset: auto 0 1.5rem; }
  .seitenhero__foto--wagen picture { width: min(100%, 30rem); height: auto; margin-inline: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 22%, #000 85%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 22%, #000 85%, transparent); mask-composite: intersect; }
  .seitenhero__foto--wagen img { height: auto; }
  .seitenhero.seitenhero--orbit { padding-bottom: calc(min(92vw, 30rem) * 0.9 + 1rem); background: #e8f1fa; }
  .seitenhero--orbit .orbit { position: absolute; z-index: -2; left: 50%; bottom: 2.75rem; width: min(92vw, 30rem); margin: 0; translate: -50% 0; }
  .seitenhero__marke { width: min(100%, 22rem); margin-inline: auto; }
}
@media (max-width: 39.999rem) { .seitenhero.seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) { padding-bottom: 4.5rem; } }
@media (max-width: 63.999rem) {
  .ablauf.ablauf--schritte li::before { background: linear-gradient(to top, var(--abr-blau) 0 84%, var(--abr-blau-hell)) bottom / 100% 0% no-repeat #fff;
    transition: background-size var(--t-fuell) ease-in-out var(--v, 0s), color var(--t-schnell) linear calc(var(--v, 0s) + var(--t-fuell) * 0.5); }
  .ablauf.ablauf--schritte li:not(:last-child)::after { background: linear-gradient(var(--abr-blau), var(--abr-blau)) top / 100% 0% no-repeat var(--linie-stark);
    transition: background-size 0.5s linear calc(var(--v, 0s) + var(--t-fuell)); }
  .ablauf.ablauf--schritte li.ist-gefuellt::before { background-size: 100% 100%; color: #fff; }
  .ablauf.ablauf--schritte li.ist-gefuellt:not(:last-child)::after { background-size: 100% 100%; }
}
@media (max-width: 39.999rem) {
  .hero--foto, .zeichenleiste { --zeichen-h: 17.875rem; }
  .zeichenleiste__liste { grid-template-columns: 1fr; gap: 0.625rem; min-height: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .zeichenleiste__punkt { min-height: 4rem; padding: calc(0.875rem - 1px) var(--a-4); gap: var(--a-3); border: 1px solid var(--linie); border-radius: var(--r-l); background: var(--ort-verlauf); }
  .zeichenleiste__punkt strong { font-size: 1rem; font-weight: 600; line-height: 1.25; }
  .zeichenleiste__klein { margin-top: 0; line-height: 1.2; }
  .zeichenleiste__zeichen { width: 2.25rem; height: 2.25rem; }
}
@media (max-width: 63.999rem) {
  .hero--foto, .seitenhero.seitenhero--foto { min-height: calc(100svh - var(--kopf-h) - 1px - var(--leiste-h) - env(safe-area-inset-bottom)); }
  .seitenhero.seitenhero--wagen { padding-bottom: calc(min(100vw, 30rem) * 0.29 + 1.5rem); }
  .seitenhero--foto .seitenhero__foto--wagen { inset: auto 0 calc(min(100vw, 30rem) * -0.1155); }
  .seitenhero__foto--wagen picture { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 22%);
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 22%); }
  .seitenhero--orbit .orbit { bottom: 1rem; }
}
@media (max-width: 39.999rem) {
  :is(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen { margin-top: 0; }
  :is(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen .vertrauen__liste { padding-top: var(--a-5); }
  .zeichenleiste__punkt:nth-child(2) { order: 3; }
  .zeichenleiste__punkt:nth-child(3) { order: 2; }
  .zeichenleiste__punkt:nth-child(4) { order: 4; }
}
@media (max-width: 39.999rem) {
  .hero--foto .hero__raster > div { position: relative; padding: var(--a-4) 1rem 0; border: 1px solid transparent; }
  .hero--foto .hero__raster > div::after { content: ""; position: absolute; inset: -1px -1px calc(3rem + var(--a-4)); z-index: -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.45), inset -1px -1px 1px rgba(255, 255, 255, 0.3), 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.08); }
  .hero--foto .eyebrow { margin-bottom: var(--a-3); color: #fff; }
  .hero--foto h1 { margin-bottom: 0; font-size: min(1.75rem, 6.6vw); }
  .hero--foto .haekchen { width: fit-content; margin: var(--a-4) auto 0; gap: var(--a-2); text-align: left; }
  .hero--foto .haekchen li { font-size: 1rem; line-height: 1.45; }
}
@media (max-width: 39.999rem) {
  html:has(> body.handy-fest) { background: var(--abr-blau-tief); }
  body.handy-fest { padding-top: calc(var(--kopf-h) + 1px); background: var(--abr-blau-tief); }
  body.handy-fest > main, body.handy-fest > main:has(> .brotkrumen:first-child) { background-color: var(--grund); }
  body.handy-fest .kopf { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
  body.handy-fest .kopf:is([data-grund="weiss"], [data-grund="flaeche"]) { box-shadow: 0 2px 12px rgba(14, 44, 74, 0.1); }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) { background: var(--abr-blau-tief); border-bottom-color: rgba(255, 255, 255, 0.14); --fokus: #fff; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) .kopf__logo { color: #fff; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) .logo { --logo-blau: #4a9be0; --logo-claim: #b7c7d8; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) :is(.kopf__notdienst, .kopf__menueknopf) { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: #fff; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) .kopf__notdienst .icon { color: #8cc6f5; }
  main:has(> .hero--foto) { --foto-h: calc(100vh - var(--kopf-h) - 1px); --foto-h: calc(100lvh - var(--kopf-h) - 1px); --foto-ende: 3rem;
    --erst-h: calc(100vh - var(--kopf-h) - 1px - var(--leiste-h) - env(safe-area-inset-bottom)); --erst-h: calc(100svh - var(--kopf-h) - 1px - var(--leiste-h) - env(safe-area-inset-bottom)); }
  .hero--foto { --luecke: max(3rem, calc((var(--erst-h) - 24.5rem) * 2 / 3)); display: flex; flex-direction: column; padding-block: 0; }
  .hero--foto::after { display: none; }
  .hero--foto .hero__bilder { order: -1; inset: auto; position: sticky; top: calc(var(--kopf-h) + 1px); flex: none; height: var(--foto-h); overflow: hidden;
    pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .hero--foto .hero__bilder::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 44, 74, 0.72), rgba(14, 44, 74, 0.65) 80%, rgba(21, 95, 153, 0.52)); }
  .hero--foto .hero__raster { align-content: end; margin-top: calc(var(--a-6) / 2 - var(--foto-h));
    min-height: calc((100vh - var(--kopf-h) - 1px - var(--a-6) - 2.5rem - env(safe-area-inset-bottom) + 97.5rem) / 6);
    min-height: calc((100svh - var(--kopf-h) - 1px - var(--a-6) - 2.5rem - env(safe-area-inset-bottom) + 97.5rem) / 6);
    margin-bottom: calc(var(--luecke) + var(--zeichen-h) + var(--foto-ende)); }
  .hero--foto + .zeichenleiste { margin-top: calc(-1 * (var(--zeichen-h) + var(--foto-ende))); margin-bottom: var(--foto-ende); }
  .hero__knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); margin: calc(var(--a-5) + var(--a-4)) calc(-1rem - 1px) 0; }
  .hero__knoepfe .knopf { height: 3rem; min-height: 3rem; padding: 0 0.5rem; border-radius: 999px; font-size: 1.125rem; font-weight: 650; white-space: nowrap; }
  .hero__knoepfe .knopf .icon { width: 1.35rem; height: 1.35rem; }
  body.handy-fest .leiste { background: var(--grund); }
  body.handy-fest .leiste:is([data-grund="himmel"], [data-grund="dunkel"]) { background: var(--abr-blau-tief); border-top-color: rgba(255, 255, 255, 0.14); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18); }
  body.handy-fest .leiste[data-grund="flaeche"] { background: var(--flaeche); }
  html.js body.handy-fest .leiste:not(.ist-da) { transform: translateY(calc(100% + 1px)); visibility: hidden; }
  html.js body.handy-fest:has(.leiste:not(.ist-da)) .banner { bottom: calc(env(safe-area-inset-bottom) + var(--a-3)); }
  body.handy-fest .karte { grid-template-areas: "icon titel pfeil" "icon text text"; }
  body.handy-fest .karte p { font-size: var(--gr-klein); }
  body.handy-fest .karte__umbruch { display: inline; }
  body.handy-fest .b2b { padding-inline: 1rem; }
  body.handy-fest .b2b .haekchen { gap: var(--a-2); }
  body.handy-fest .b2b .haekchen li { font-size: var(--gr-klein); }
  body.handy-fest .tradition .gewerke { display: grid; grid-template-columns: 1fr 1fr; }
  body.handy-fest .tradition .gewerke li { justify-content: flex-start; }
  body.handy-fest .abschnitt__kopf:has(#gebiet-titel) { margin-bottom: var(--a-6); }
  body.handy-fest .kontakt aside { display: none; }
  .ablauf.ablauf--schritte li::before { background: linear-gradient(to bottom, var(--abr-blau) 0 84%, var(--abr-blau-hell)) top / 100% 0% no-repeat #fff; }
  .ablauf.ablauf--schritte li.ist-gefuellt::before { background-size: 100% 100%; }
}
.karte__umbruch { display: none; }
@media (max-width: 39.999rem) and (prefers-reduced-motion: no-preference) {
  .hero--foto .hero__bilder .hero__foto.ist-aktiv img { animation: hero-zoom-handy 7s linear forwards; }
  html.js body.handy-fest .leiste.ist-bereit { transition: transform 0.35s var(--kurve), visibility 0s linear, background-color var(--t-mittel) var(--kurve), border-color var(--t-mittel) var(--kurve), box-shadow var(--t-mittel) var(--kurve); }
  html.js body.handy-fest .leiste.ist-bereit:not(.ist-da) { transition: transform 0.35s var(--kurve), visibility 0s linear 0.35s, background-color var(--t-mittel) var(--kurve), border-color var(--t-mittel) var(--kurve), box-shadow var(--t-mittel) var(--kurve); }
}
@keyframes hero-zoom-handy { from { transform: scale(1.08); } to { transform: scale(1); } }
.kopf__notdienst { min-height: 2.5rem; padding: 0 0.625rem; border: 1px solid rgba(14, 44, 74, 0.16); border-radius: 999px; background: #fff; text-decoration: none; }
@media (max-width: 24rem) { .kopf__notdienst { padding: 0 0.5rem; gap: 0.25rem; } }
@media (max-width: 63.999rem) {
  .kopf__menueknopf { min-height: 2.5rem; padding: 0 0.75rem 0 0.625rem; border: 1px solid rgba(14, 44, 74, 0.16); border-radius: 999px; background: #fff; }
  .kopf__menueknopf::after { inset: -0.125rem; }
  .leiste { padding-inline: 1rem; gap: 0.625rem; }
  .leiste__knopf { border-radius: 999px; }
}
@media (max-width: 26.999rem) {
  .kopf__menueknopf { width: 2.5rem; justify-content: center; padding: 0; }
  .kopf__menuetext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 64rem) {
  .zeichenleiste__liste { border: 1px solid var(--linie); background: var(--ort-verlauf); }
  .hauptnav__liste > li > a, .hauptnav__knopf, .hauptnav__gruppe li a { position: relative; }
  .hauptnav__liste > li > a::after, .hauptnav__knopf::after, .hauptnav__gruppe li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.4rem; height: 2px; border-radius: 1px;
    background: linear-gradient(to right, var(--abr-blau), rgba(90, 167, 232, 0.55), rgba(90, 167, 232, 0)); transform: scaleX(0); transform-origin: left center; }
  .hauptnav__gruppe li a { display: inline-block; }
  .hauptnav__gruppe li a::after { bottom: 0.15rem; }
  .hauptnav__gruppe li a:hover { text-decoration: none; }
  :is(.hauptnav__liste > li > a, .hauptnav__knopf, .hauptnav__gruppe li a):is(:hover, [aria-current="page"])::after, .hauptnav__knopf[aria-expanded="true"]::after { transform: scaleX(1); }
  .hauptnav__panel { background: #d6e7f6; border-color: rgba(14, 44, 74, 0.1); }
  .kopf[data-grund="weiss"] .hauptnav__panel { background: var(--grund); border-color: var(--linie); }
  .kopf[data-grund="flaeche"] .hauptnav__panel { background: var(--flaeche); border-color: var(--linie); }
  .kopf[data-grund="dunkel"] .hauptnav__panel { border-color: rgba(255, 255, 255, 0.14); background: var(--abr-blau-tief); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
  .kopf[data-grund="dunkel"] .hauptnav__gruppentitel { color: #b7c7d8; }
  .kopf[data-grund="dunkel"] .hauptnav__gruppe li a { color: #fff; }
  .kopf[data-grund="dunkel"] .hauptnav__gruppe li a:is(:hover, [aria-current="page"]) { color: var(--abr-blau-hell); }
  .kopf[data-grund="dunkel"] .hauptnav__gruppe li a::after { background: linear-gradient(to right, var(--abr-blau-hell), rgba(90, 167, 232, 0.5), rgba(90, 167, 232, 0)); }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) { --fokus: #fff; }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) .kopf__innen { border: 1px solid rgba(255, 255, 255, 0.14); background: var(--abr-blau-tief); }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) .kopf__logo { color: #fff; }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) .logo { --logo-blau: #4a9be0; --logo-claim: #b7c7d8; }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) :is(.hauptnav__liste > li > a, .hauptnav__knopf) { color: #fff; }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) :is(.hauptnav__liste > li > a, .hauptnav__knopf):is(:hover, [aria-current="page"], [aria-expanded="true"]) { color: var(--abr-blau-hell); }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) .kopf__24h { color: var(--abr-blau-hell); }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) :is(.hauptnav__liste > li > a, .hauptnav__knopf, .hauptnav__gruppe li a)::after { background: linear-gradient(to right, var(--abr-blau-hell), rgba(90, 167, 232, 0.5), rgba(90, 167, 232, 0)); }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav__panel { border-color: rgba(255, 255, 255, 0.14); background: var(--abr-blau-tief); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav__gruppentitel { color: #b7c7d8; }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav__gruppe li a { color: #fff; }
  body:has(> main > .hero--foto:first-child) .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav__gruppe li a:is(:hover, [aria-current="page"]) { color: var(--abr-blau-hell); }
}
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .hauptnav__liste > li > a::after, .hauptnav__knopf::after, .hauptnav__gruppe li a::after { transition: transform var(--t-langsam) ease-out; }
}
@media (max-width: 39.999rem) {
  body.handy-fest > main:has(> .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit)) { --foto-h: calc(100vh - var(--kopf-h) - 1px); --foto-h: calc(100lvh - var(--kopf-h) - 1px); --foto-ende: 3rem; --vertrauen-h: 17.875rem;
    --erst-h: calc(100vh - var(--kopf-h) - 1px - var(--leiste-h) - env(safe-area-inset-bottom)); --erst-h: calc(100svh - var(--kopf-h) - 1px - var(--leiste-h) - env(safe-area-inset-bottom)); }
  body.handy-fest .seitenhero.seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) { --luecke: max(3rem, calc((var(--erst-h) - 24.5rem) * 2 / 3)); display: flex; flex-direction: column; min-height: 0; padding-block: 0; }
  body.handy-fest .seitenhero.seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit)::after { display: none; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__foto { inset: auto; position: sticky; top: calc(var(--kopf-h) + 1px); flex: none; height: var(--foto-h); z-index: -2; overflow: hidden;
    pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 44, 74, 0.72), rgba(14, 44, 74, 0.65) 80%, rgba(21, 95, 153, 0.52)); }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__raster { margin-top: calc(3rem + var(--a-6) - var(--foto-h)); margin-bottom: calc(var(--luecke) + var(--vertrauen-h) + var(--foto-ende)); }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__raster > div:first-child { z-index: auto; padding: var(--a-4) 1rem 0; border: 1px solid transparent; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__raster > div:first-child::after { content: ""; position: absolute; inset: -1px -1px calc(3rem + var(--a-4)); z-index: -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.45), inset -1px -1px 1px rgba(255, 255, 255, 0.3), 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.08); }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .eyebrow { color: #fff; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen { margin-top: calc(-1 * (var(--vertrauen-h) + var(--foto-ende))); margin-bottom: var(--foto-ende); }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen .vertrauen__liste { padding: 0; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen .vertrauen__punkt { min-height: 4rem; padding-block: calc(0.875rem - 1px); border: 1px solid var(--linie); background: var(--ort-verlauf); box-shadow: none; }
}
@media (max-width: 39.999rem) and (prefers-reduced-motion: no-preference) {
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__foto img { animation: hero-zoom-handy 7s linear forwards; }
  body.handy-fest :is(.kopf, .leiste) { transition: background-color var(--t-mittel) var(--kurve), border-color var(--t-mittel) var(--kurve), box-shadow var(--t-mittel) var(--kurve); }
}
@media (max-width: 63.999rem) {
  .hauptnav { background: #d6e7f6; border-top-color: rgba(14, 44, 74, 0.1); }
  .kopf[data-grund="weiss"] .hauptnav { background: var(--grund); border-top-color: var(--linie); }
  .kopf[data-grund="flaeche"] .hauptnav { background: var(--flaeche); border-top-color: var(--linie); }
  .kopf[data-grund="dunkel"] .hauptnav { background: var(--abr-blau-tief); border-top-color: rgba(255, 255, 255, 0.14); }
  .kopf[data-grund="dunkel"] .hauptnav__liste > li { border-bottom-color: rgba(255, 255, 255, 0.14); }
  .kopf[data-grund="dunkel"] :is(.hauptnav a, .hauptnav__knopf) { color: #fff; }
  .kopf[data-grund="dunkel"] .hauptnav a[aria-current="page"] { color: var(--abr-blau-hell); }
  .kopf[data-grund="dunkel"] .hauptnav__gruppentitel { color: #b7c7d8; }
}
@media (max-width: 39.999rem) {
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav { background: var(--abr-blau-tief); border-top-color: rgba(255, 255, 255, 0.14); }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav__liste > li { border-bottom-color: rgba(255, 255, 255, 0.14); }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) :is(.hauptnav a, .hauptnav__knopf) { color: #fff; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav a[aria-current="page"] { color: var(--abr-blau-hell); }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav__gruppentitel { color: #b7c7d8; }
}
@media (max-width: 39.999rem) {
  body.handy-fest .seitenhero.seitenhero--wagen { --wagen-b: min(100vw, 30rem); display: grid; grid-template-columns: var(--rand) 1rem minmax(0, 1fr) 1rem var(--rand); align-content: start;
    min-height: 0; padding: 3rem 0 var(--a-5); background: #ecf3f9; }
  body.handy-fest .seitenhero.seitenhero--wagen::after { display: none; }
  body.handy-fest .seitenhero--wagen > .seitenhero__raster, body.handy-fest .seitenhero--wagen .seitenhero__raster > div:first-child { display: contents; }
  body.handy-fest main:has(> .seitenhero--wagen) > .brotkrumen { --fokus: var(--abr-blau-dunkel); }
  body.handy-fest main:has(> .seitenhero--wagen) > .brotkrumen a { color: var(--text-leise); }
  body.handy-fest main:has(> .seitenhero--wagen) > .brotkrumen [aria-current="page"] { color: var(--text); }
  body.handy-fest main:has(> .seitenhero--wagen) > .brotkrumen li + li::before { color: var(--rohr-grau); }
  body.handy-fest .seitenhero--wagen .eyebrow { grid-area: 2 / 3; margin: var(--a-4) 0 var(--a-3); color: var(--abr-blau-dunkel); }
  body.handy-fest .seitenhero--wagen h1 { grid-area: 3 / 3; margin: 0 auto; color: var(--text); }
  body.handy-fest .seitenhero--wagen .seitenhero__text { grid-area: 4 / 3; margin: var(--a-4) 0; color: var(--text-leise); }
  body.handy-fest .seitenhero.seitenhero--wagen::before, body.handy-fest .seitenhero--wagen .seitenhero__gas { border-radius: 1.25rem; background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero.seitenhero--wagen::before { content: ""; grid-area: 2 / 2 / 5 / 5; z-index: -1; pointer-events: none; }
  body.handy-fest .seitenhero--wagen .hero__knoepfe { grid-area: 5 / 2 / 6 / 5; margin: var(--a-4) 0 0; }
  body.handy-fest .seitenhero--wagen .seitenhero__foto--wagen { grid-area: 1 / 1 / 2 / -1; position: static; inset: auto; margin: 0 0 calc(var(--wagen-b) * -0.115); }
  body.handy-fest .seitenhero--wagen .seitenhero__foto--wagen picture { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 22%);
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 22%); }
  body.handy-fest .seitenhero--wagen .seitenhero__gas { grid-area: 6 / 2 / 7 / 5; position: relative; z-index: 1; max-width: none; margin: var(--a-4) 0 0; padding: var(--a-4) 1rem; color: var(--text); }
  body.handy-fest .seitenhero--wagen .seitenhero__gas a { color: var(--abr-blau-dunkel); }
  body.handy-fest .seitenhero--wagen + .vertrauen .vertrauen__punkt { min-height: 4rem; padding-block: calc(0.875rem - 1px); border: 1px solid var(--linie); background: var(--ort-verlauf); box-shadow: none; }
}
@media (max-width: 39.999rem) {
  .gas { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 var(--a-4); }
  .gas > div { display: contents; }
  .gas h2, .gas h3 { grid-column: 2; margin: 0; }
  .gas > div > :not(h2, h3) { grid-column: 1 / -1; }
  .gas > div > :is(h2, h3) + * { margin-top: var(--a-5); }
}
@media (max-width: 39.999rem) {
  body.handy-fest .seitenhero.seitenhero--orbit { --orbit-b: min(92vw, 30rem); --vertrauen-h: 17.875rem; --kachel-luecke: calc(var(--a-4) - 1px);
    --orbit-luecke: calc(var(--a-7) - var(--orbit-b) * 0.1);
    min-height: 0; padding: calc(3rem + var(--a-4)) 0 var(--a-5); background: #e8f1fa; }
  body.handy-fest .seitenhero.seitenhero--orbit::after { display: none; }
  body.handy-fest main:has(> .seitenhero--orbit) > .brotkrumen { --fokus: var(--abr-blau-dunkel); }
  body.handy-fest main:has(> .seitenhero--orbit) > .brotkrumen a { color: var(--text-leise); }
  body.handy-fest main:has(> .seitenhero--orbit) > .brotkrumen [aria-current="page"] { color: var(--text); }
  body.handy-fest main:has(> .seitenhero--orbit) > .brotkrumen li + li::before { color: var(--rohr-grau); }
  body.handy-fest .seitenhero--orbit .seitenhero__raster { gap: 0; }
  body.handy-fest .seitenhero--orbit .seitenhero__raster > div:first-child { z-index: auto; padding: var(--a-4) 1rem 0; border: 1px solid transparent; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.handy-fest .seitenhero--orbit .seitenhero__raster > div:first-child::after { content: ""; position: absolute; inset: -1px -1px calc(3rem + var(--a-4)); z-index: -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero--orbit .seitenhero__raster .eyebrow { color: var(--abr-blau-dunkel); }
  body.handy-fest .seitenhero.seitenhero--orbit h1 { color: var(--text); }
  body.handy-fest .seitenhero.seitenhero--orbit .seitenhero__text { color: var(--text-leise); }
  body.handy-fest .seitenhero.seitenhero--orbit .orbit { position: relative; z-index: auto; left: auto; bottom: auto; width: var(--orbit-b);
    margin: calc(var(--kachel-luecke) + var(--vertrauen-h) + var(--orbit-luecke)) 0 0 50%; translate: -50% 0; }
  body.handy-fest .seitenhero--orbit .orbit__ding--wko { gap: 0.1rem; }
  body.handy-fest .seitenhero--orbit .orbit__ding--wko img { width: 62%; }
  body.handy-fest .seitenhero--orbit .orbit__ding--wko span { font-size: 2.1cqw; letter-spacing: 0.02em; }
  body.handy-fest .seitenhero--orbit + .vertrauen { --orbit-b: min(92vw, 30rem); --orbit-luecke: calc(var(--a-7) - var(--orbit-b) * 0.1);
    margin-top: calc(-1 * (17.875rem + var(--orbit-luecke) + var(--orbit-b) + var(--a-5))); margin-bottom: calc(var(--orbit-luecke) + var(--orbit-b) + var(--a-5)); }
  body.handy-fest .seitenhero--orbit + .vertrauen .vertrauen__liste { padding: 0; }
  body.handy-fest .seitenhero--orbit + .vertrauen .vertrauen__punkt { min-height: 4rem; padding-block: calc(0.875rem - 1px); border: 1px solid var(--linie); background: var(--ort-verlauf); box-shadow: none; }
}
.handy-umbruch { display: none; }
@media (max-width: 39.999rem) {
  .handy-umbruch { display: inline; }
  body.handy-fest .seitenhero:has(.kontakt__wege) > .container { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 1rem; }
  body.handy-fest .seitenhero:has(.kontakt__wege) > .container::before { content: ""; grid-area: 1 / 1 / 3 / -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero:has(.kontakt__wege) h1 { grid-area: 1 / 2; position: relative; margin: var(--a-4) 0 0; }
  body.handy-fest .seitenhero:has(.kontakt__wege) .seitenhero__text { grid-area: 2 / 2; position: relative; margin: var(--a-4) 0; }
  body.handy-fest .seitenhero:has(.kontakt__wege) .kontakt__wege { grid-area: 3 / 1 / 4 / -1; margin-top: var(--a-4); }
}
@media (max-width: 39.999rem) {
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 1rem; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container::before { content: ""; grid-area: 1 / 1 / 2 / -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container:has(> .seitenhero__text)::before { grid-area: 1 / 1 / 3 / -1; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > * { grid-column: 1 / -1; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > h1 { grid-area: 1 / 2; position: relative; margin: var(--a-4) 0; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > h1:has(+ .seitenhero__text) { margin-bottom: 0; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > .seitenhero__text { grid-area: 2 / 2; position: relative; margin: var(--a-4) 0; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > :is(h1, .seitenhero__text) ~ :not(.seitenhero__text, .sr-only) { margin-top: var(--a-4); }
  body.handy-fest .seitenhero.seitenhero--bild:has(.seitenhero__marke) { --vertrauen-h: 17.875rem; --marke-b: min(100vw - 2 * var(--rand), 22rem);
    --marke-h: calc(6rem + (var(--marke-b) - 3rem) * 0.3308 + (var(--marke-b) - 5rem) / 3);
    position: relative; isolation: isolate; padding-bottom: var(--a-5); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .seitenhero__raster { gap: 0; }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .seitenhero__raster > div:first-child { position: relative; padding: var(--a-4) 1rem 0; border: 1px solid transparent; }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .seitenhero__raster > div:first-child::after { content: ""; position: absolute; inset: -1px -1px calc(3rem + var(--a-4)); z-index: -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .hero__knoepfe { margin-top: calc(var(--a-5) + var(--a-4)); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .seitenhero__marke { margin-top: calc(var(--a-4) - 1px + var(--vertrauen-h) + var(--a-4)); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) + .vertrauen { --marke-b: min(100vw - 2 * var(--rand), 22rem); --marke-h: calc(6rem + (var(--marke-b) - 3rem) * 0.3308 + (var(--marke-b) - 5rem) / 3);
    position: relative; z-index: 2; margin-top: calc(-1 * (17.875rem + var(--a-4) + var(--marke-h) + var(--a-5))); margin-bottom: calc(var(--a-4) + var(--marke-h) + var(--a-5)); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) + .vertrauen .vertrauen__liste { padding: 0; }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) + .vertrauen .vertrauen__punkt { min-height: 4rem; padding-block: calc(0.875rem - 1px); border: 1px solid var(--linie); background: var(--ort-verlauf); box-shadow: none; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .hero--foto { min-height: 26rem; }
  .hero--foto .hero__raster { text-align: center; }
  .hero--foto .eyebrow { justify-content: center; }
  .hero--foto .eyebrow::before { display: none; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .vertrauen { background: none; border: 0; }
  .seitenhero--foto + .vertrauen { position: relative; z-index: 2; margin-top: -2.5rem; }
  .vertrauen__liste { grid-template-columns: 1fr; gap: 0.625rem; padding-block: 0 var(--a-6); }
  .seitenhero:not(.seitenhero--foto) + .vertrauen .vertrauen__liste { padding-top: var(--a-5); }
  .vertrauen__punkt { padding: 0.875rem var(--a-4); border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-3); }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .brotkrumen ol { justify-content: center; }
  .seitenhero :is(h1, .seitenhero__text) { text-align: center; }
  .seitenhero__raster .eyebrow { display: flex; justify-content: center; }
  .seitenhero__raster .eyebrow::before { display: none; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .seitenhero.seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) { padding-bottom: 4.5rem; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .hero--foto, .zeichenleiste { --zeichen-h: 17.875rem; }
  .zeichenleiste__liste { grid-template-columns: 1fr; gap: 0.625rem; min-height: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .zeichenleiste__punkt { min-height: 4rem; padding: calc(0.875rem - 1px) var(--a-4); gap: var(--a-3); border: 1px solid var(--linie); border-radius: var(--r-l); background: var(--ort-verlauf); }
  .zeichenleiste__punkt strong { font-size: 1rem; font-weight: 600; line-height: 1.25; }
  .zeichenleiste__klein { margin-top: 0; line-height: 1.2; }
  .zeichenleiste__zeichen { width: 2.25rem; height: 2.25rem; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  :is(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen { margin-top: 0; }
  :is(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen .vertrauen__liste { padding-top: var(--a-5); }
  .zeichenleiste__punkt:nth-child(2) { order: 3; }
  .zeichenleiste__punkt:nth-child(3) { order: 2; }
  .zeichenleiste__punkt:nth-child(4) { order: 4; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .hero--foto .hero__raster > div { position: relative; padding: var(--a-4) 1rem 0; border: 1px solid transparent; }
  .hero--foto .hero__raster > div::after { content: ""; position: absolute; inset: -1px -1px calc(3rem + var(--a-4)); z-index: -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.45), inset -1px -1px 1px rgba(255, 255, 255, 0.3), 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.08); }
  .hero--foto .eyebrow { margin-bottom: var(--a-3); color: #fff; }
  .hero--foto h1 { margin-bottom: 0; font-size: min(1.75rem, 6.6vw); }
  .hero--foto .haekchen { width: fit-content; margin: var(--a-4) auto 0; gap: var(--a-2); text-align: left; }
  .hero--foto .haekchen li { font-size: 1rem; line-height: 1.45; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  html:has(> body.handy-fest) { background: var(--abr-blau-tief); }
  body.handy-fest { padding-top: calc(var(--kopf-h) + 1px); background: var(--abr-blau-tief); }
  body.handy-fest > main, body.handy-fest > main:has(> .brotkrumen:first-child) { background-color: var(--grund); }
  body.handy-fest .kopf { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
  body.handy-fest .kopf:is([data-grund="weiss"], [data-grund="flaeche"]) { box-shadow: 0 2px 12px rgba(14, 44, 74, 0.1); }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) { background: var(--abr-blau-tief); border-bottom-color: rgba(255, 255, 255, 0.14); --fokus: #fff; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) .kopf__logo { color: #fff; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) .logo { --logo-blau: #4a9be0; --logo-claim: #b7c7d8; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) :is(.kopf__notdienst, .kopf__menueknopf) { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: #fff; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"], [data-grund="dunkel"]) .kopf__notdienst .icon { color: #8cc6f5; }
  main:has(> .hero--foto) { --foto-h: calc(100vh - var(--kopf-h) - 1px); --foto-h: calc(100lvh - var(--kopf-h) - 1px); --foto-ende: 3rem;
    --erst-h: calc(100vh - var(--kopf-h) - 1px - var(--leiste-h) - env(safe-area-inset-bottom)); --erst-h: calc(100svh - var(--kopf-h) - 1px - var(--leiste-h) - env(safe-area-inset-bottom)); }
  .hero--foto { --luecke: max(3rem, calc((var(--erst-h) - 24.5rem) * 2 / 3)); display: flex; flex-direction: column; padding-block: 0; }
  .hero--foto::after { display: none; }
  .hero--foto .hero__bilder { order: -1; inset: auto; position: sticky; top: calc(var(--kopf-h) + 1px); flex: none; height: var(--foto-h); overflow: hidden;
    pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .hero--foto .hero__bilder::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 44, 74, 0.72), rgba(14, 44, 74, 0.65) 80%, rgba(21, 95, 153, 0.52)); }
  .hero--foto .hero__raster { align-content: end; margin-top: calc(var(--a-6) / 2 - var(--foto-h));
    min-height: calc((100vh - var(--kopf-h) - 1px - var(--a-6) - 2.5rem - env(safe-area-inset-bottom) + 97.5rem) / 6);
    min-height: calc((100svh - var(--kopf-h) - 1px - var(--a-6) - 2.5rem - env(safe-area-inset-bottom) + 97.5rem) / 6);
    margin-bottom: calc(var(--luecke) + var(--zeichen-h) + var(--foto-ende)); }
  .hero--foto + .zeichenleiste { margin-top: calc(-1 * (var(--zeichen-h) + var(--foto-ende))); margin-bottom: var(--foto-ende); }
  .hero__knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); margin: calc(var(--a-5) + var(--a-4)) calc(-1rem - 1px) 0; }
  .hero__knoepfe .knopf { height: 3rem; min-height: 3rem; padding: 0 0.5rem; border-radius: 999px; font-size: 1.125rem; font-weight: 650; white-space: nowrap; }
  .hero__knoepfe .knopf .icon { width: 1.35rem; height: 1.35rem; }
  body.handy-fest .leiste { background: var(--grund); }
  body.handy-fest .leiste:is([data-grund="himmel"], [data-grund="dunkel"]) { background: var(--abr-blau-tief); border-top-color: rgba(255, 255, 255, 0.14); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18); }
  body.handy-fest .leiste[data-grund="flaeche"] { background: var(--flaeche); }
  html.js body.handy-fest .leiste:not(.ist-da) { transform: translateY(calc(100% + 1px)); visibility: hidden; }
  html.js body.handy-fest:has(.leiste:not(.ist-da)) .banner { bottom: calc(env(safe-area-inset-bottom) + var(--a-3)); }
  body.handy-fest .kontakt aside { display: none; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) and (prefers-reduced-motion: no-preference) {
  .hero--foto .hero__bilder .hero__foto.ist-aktiv img { animation: hero-zoom-handy 7s linear forwards; }
  html.js body.handy-fest .leiste.ist-bereit { transition: transform 0.35s var(--kurve), visibility 0s linear, background-color var(--t-mittel) var(--kurve), border-color var(--t-mittel) var(--kurve), box-shadow var(--t-mittel) var(--kurve); }
  html.js body.handy-fest .leiste.ist-bereit:not(.ist-da) { transition: transform 0.35s var(--kurve), visibility 0s linear 0.35s, background-color var(--t-mittel) var(--kurve), border-color var(--t-mittel) var(--kurve), box-shadow var(--t-mittel) var(--kurve); }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  body.handy-fest > main:has(> .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit)) { --foto-h: calc(100vh - var(--kopf-h) - 1px); --foto-h: calc(100lvh - var(--kopf-h) - 1px); --foto-ende: 3rem; --vertrauen-h: 17.875rem;
    --erst-h: calc(100vh - var(--kopf-h) - 1px - var(--leiste-h) - env(safe-area-inset-bottom)); --erst-h: calc(100svh - var(--kopf-h) - 1px - var(--leiste-h) - env(safe-area-inset-bottom)); }
  body.handy-fest .seitenhero.seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) { --luecke: max(3rem, calc((var(--erst-h) - 24.5rem) * 2 / 3)); display: flex; flex-direction: column; min-height: 0; padding-block: 0; }
  body.handy-fest .seitenhero.seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit)::after { display: none; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__foto { inset: auto; position: sticky; top: calc(var(--kopf-h) + 1px); flex: none; height: var(--foto-h); z-index: -2; overflow: hidden;
    pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 44, 74, 0.72), rgba(14, 44, 74, 0.65) 80%, rgba(21, 95, 153, 0.52)); }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__raster { margin-top: calc(3rem + var(--a-6) - var(--foto-h)); margin-bottom: calc(var(--luecke) + var(--vertrauen-h) + var(--foto-ende)); }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__raster > div:first-child { z-index: auto; padding: var(--a-4) 1rem 0; border: 1px solid transparent; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__raster > div:first-child::after { content: ""; position: absolute; inset: -1px -1px calc(3rem + var(--a-4)); z-index: -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.45), inset -1px -1px 1px rgba(255, 255, 255, 0.3), 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 12px rgba(0, 0, 0, 0.08); }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .eyebrow { color: #fff; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen { margin-top: calc(-1 * (var(--vertrauen-h) + var(--foto-ende))); margin-bottom: var(--foto-ende); }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen .vertrauen__liste { padding: 0; }
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) + .vertrauen .vertrauen__punkt { min-height: 4rem; padding-block: calc(0.875rem - 1px); border: 1px solid var(--linie); background: var(--ort-verlauf); box-shadow: none; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) and (prefers-reduced-motion: no-preference) {
  body.handy-fest .seitenhero--foto:not(.seitenhero--wagen, .seitenhero--orbit) .seitenhero__foto img { animation: hero-zoom-handy 7s linear forwards; }
  body.handy-fest :is(.kopf, .leiste) { transition: background-color var(--t-mittel) var(--kurve), border-color var(--t-mittel) var(--kurve), box-shadow var(--t-mittel) var(--kurve); }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav { background: var(--abr-blau-tief); border-top-color: rgba(255, 255, 255, 0.14); }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav__liste > li { border-bottom-color: rgba(255, 255, 255, 0.14); }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) :is(.hauptnav a, .hauptnav__knopf) { color: #fff; }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav a[aria-current="page"] { color: var(--abr-blau-hell); }
  body.handy-fest .kopf:is(:not([data-grund]), [data-grund="himmel"]) .hauptnav__gruppentitel { color: #b7c7d8; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  body.handy-fest .seitenhero.seitenhero--wagen { --wagen-b: min(100vw, 30rem); display: grid; grid-template-columns: var(--rand) 1rem minmax(0, 1fr) 1rem var(--rand); align-content: start;
    min-height: 0; padding: 3rem 0 var(--a-5); background: #ecf3f9; }
  body.handy-fest .seitenhero.seitenhero--wagen::after { display: none; }
  body.handy-fest .seitenhero--wagen > .seitenhero__raster, body.handy-fest .seitenhero--wagen .seitenhero__raster > div:first-child { display: contents; }
  body.handy-fest main:has(> .seitenhero--wagen) > .brotkrumen { --fokus: var(--abr-blau-dunkel); }
  body.handy-fest main:has(> .seitenhero--wagen) > .brotkrumen a { color: var(--text-leise); }
  body.handy-fest main:has(> .seitenhero--wagen) > .brotkrumen [aria-current="page"] { color: var(--text); }
  body.handy-fest main:has(> .seitenhero--wagen) > .brotkrumen li + li::before { color: var(--rohr-grau); }
  body.handy-fest .seitenhero--wagen .eyebrow { grid-area: 2 / 3; margin: var(--a-4) 0 var(--a-3); color: var(--abr-blau-dunkel); }
  body.handy-fest .seitenhero--wagen h1 { grid-area: 3 / 3; margin: 0 auto; color: var(--text); }
  body.handy-fest .seitenhero--wagen .seitenhero__text { grid-area: 4 / 3; margin: var(--a-4) 0; color: var(--text-leise); }
  body.handy-fest .seitenhero.seitenhero--wagen::before, body.handy-fest .seitenhero--wagen .seitenhero__gas { border-radius: 1.25rem; background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero.seitenhero--wagen::before { content: ""; grid-area: 2 / 2 / 5 / 5; z-index: -1; pointer-events: none; }
  body.handy-fest .seitenhero--wagen .hero__knoepfe { grid-area: 5 / 2 / 6 / 5; margin: var(--a-4) 0 0; }
  body.handy-fest .seitenhero--wagen .seitenhero__foto--wagen { grid-area: 1 / 1 / 2 / -1; position: static; inset: auto; margin: 0 0 calc(var(--wagen-b) * -0.115); }
  body.handy-fest .seitenhero--wagen .seitenhero__foto--wagen picture { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 22%);
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(transparent, #000 22%); }
  body.handy-fest .seitenhero--wagen .seitenhero__gas { grid-area: 6 / 2 / 7 / 5; position: relative; z-index: 1; max-width: none; margin: var(--a-4) 0 0; padding: var(--a-4) 1rem; color: var(--text); }
  body.handy-fest .seitenhero--wagen .seitenhero__gas a { color: var(--abr-blau-dunkel); }
  body.handy-fest .seitenhero--wagen + .vertrauen .vertrauen__punkt { min-height: 4rem; padding-block: calc(0.875rem - 1px); border: 1px solid var(--linie); background: var(--ort-verlauf); box-shadow: none; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  body.handy-fest .seitenhero.seitenhero--orbit { --orbit-b: min(92vw, 30rem); --vertrauen-h: 17.875rem; --kachel-luecke: calc(var(--a-4) - 1px);
    --orbit-luecke: calc(var(--a-7) - var(--orbit-b) * 0.1);
    min-height: 0; padding: calc(3rem + var(--a-4)) 0 var(--a-5); background: #e8f1fa; }
  body.handy-fest .seitenhero.seitenhero--orbit::after { display: none; }
  body.handy-fest main:has(> .seitenhero--orbit) > .brotkrumen { --fokus: var(--abr-blau-dunkel); }
  body.handy-fest main:has(> .seitenhero--orbit) > .brotkrumen a { color: var(--text-leise); }
  body.handy-fest main:has(> .seitenhero--orbit) > .brotkrumen [aria-current="page"] { color: var(--text); }
  body.handy-fest main:has(> .seitenhero--orbit) > .brotkrumen li + li::before { color: var(--rohr-grau); }
  body.handy-fest .seitenhero--orbit .seitenhero__raster { gap: 0; }
  body.handy-fest .seitenhero--orbit .seitenhero__raster > div:first-child { z-index: auto; padding: var(--a-4) 1rem 0; border: 1px solid transparent; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.handy-fest .seitenhero--orbit .seitenhero__raster > div:first-child::after { content: ""; position: absolute; inset: -1px -1px calc(3rem + var(--a-4)); z-index: -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero--orbit .seitenhero__raster .eyebrow { color: var(--abr-blau-dunkel); }
  body.handy-fest .seitenhero.seitenhero--orbit h1 { color: var(--text); }
  body.handy-fest .seitenhero.seitenhero--orbit .seitenhero__text { color: var(--text-leise); }
  body.handy-fest .seitenhero.seitenhero--orbit .orbit { position: relative; z-index: auto; left: auto; bottom: auto; width: var(--orbit-b);
    margin: calc(var(--kachel-luecke) + var(--vertrauen-h) + var(--orbit-luecke)) 0 0 50%; translate: -50% 0; }
  body.handy-fest .seitenhero--orbit .orbit__ding--wko { gap: 0.1rem; }
  body.handy-fest .seitenhero--orbit .orbit__ding--wko img { width: 62%; }
  body.handy-fest .seitenhero--orbit .orbit__ding--wko span { font-size: 2.1cqw; letter-spacing: 0.02em; }
  body.handy-fest .seitenhero--orbit + .vertrauen { --orbit-b: min(92vw, 30rem); --orbit-luecke: calc(var(--a-7) - var(--orbit-b) * 0.1);
    margin-top: calc(-1 * (17.875rem + var(--orbit-luecke) + var(--orbit-b) + var(--a-5))); margin-bottom: calc(var(--orbit-luecke) + var(--orbit-b) + var(--a-5)); }
  body.handy-fest .seitenhero--orbit + .vertrauen .vertrauen__liste { padding: 0; }
  body.handy-fest .seitenhero--orbit + .vertrauen .vertrauen__punkt { min-height: 4rem; padding-block: calc(0.875rem - 1px); border: 1px solid var(--linie); background: var(--ort-verlauf); box-shadow: none; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .handy-umbruch { display: inline; }
  body.handy-fest .seitenhero:has(.kontakt__wege) > .container { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 1rem; }
  body.handy-fest .seitenhero:has(.kontakt__wege) > .container::before { content: ""; grid-area: 1 / 1 / 3 / -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero:has(.kontakt__wege) h1 { grid-area: 1 / 2; position: relative; margin: var(--a-4) 0 0; }
  body.handy-fest .seitenhero:has(.kontakt__wege) .seitenhero__text { grid-area: 2 / 2; position: relative; margin: var(--a-4) 0; }
  body.handy-fest .seitenhero:has(.kontakt__wege) .kontakt__wege { grid-area: 3 / 1 / 4 / -1; margin-top: var(--a-4); }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 1rem; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container::before { content: ""; grid-area: 1 / 1 / 2 / -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container:has(> .seitenhero__text)::before { grid-area: 1 / 1 / 3 / -1; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > * { grid-column: 1 / -1; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > h1 { grid-area: 1 / 2; position: relative; margin: var(--a-4) 0; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > h1:has(+ .seitenhero__text) { margin-bottom: 0; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > .seitenhero__text { grid-area: 2 / 2; position: relative; margin: var(--a-4) 0; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > :is(h1, .seitenhero__text) ~ :not(.seitenhero__text, .sr-only) { margin-top: var(--a-4); }
  body.handy-fest .seitenhero.seitenhero--bild:has(.seitenhero__marke) { --vertrauen-h: 17.875rem; --marke-b: min(100vw - 2 * var(--rand), 22rem);
    --marke-h: calc(6rem + (var(--marke-b) - 3rem) * 0.3308 + (var(--marke-b) - 5rem) / 3);
    position: relative; isolation: isolate; padding-bottom: var(--a-5); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .seitenhero__raster { gap: 0; }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .seitenhero__raster > div:first-child { position: relative; padding: var(--a-4) 1rem 0; border: 1px solid transparent; }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .seitenhero__raster > div:first-child::after { content: ""; position: absolute; inset: -1px -1px calc(3rem + var(--a-4)); z-index: -1; border-radius: 1.25rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px 1px rgba(255, 255, 255, 0.45), 0 4px 14px rgba(14, 44, 74, 0.08); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .hero__knoepfe { margin-top: calc(var(--a-5) + var(--a-4)); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) .seitenhero__marke { margin-top: calc(var(--a-4) - 1px + var(--vertrauen-h) + var(--a-4)); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) + .vertrauen { --marke-b: min(100vw - 2 * var(--rand), 22rem); --marke-h: calc(6rem + (var(--marke-b) - 3rem) * 0.3308 + (var(--marke-b) - 5rem) / 3);
    position: relative; z-index: 2; margin-top: calc(-1 * (17.875rem + var(--a-4) + var(--marke-h) + var(--a-5))); margin-bottom: calc(var(--a-4) + var(--marke-h) + var(--a-5)); }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) + .vertrauen .vertrauen__liste { padding: 0; }
  body.handy-fest .seitenhero--bild:has(.seitenhero__marke) + .vertrauen .vertrauen__punkt { min-height: 4rem; padding-block: calc(0.875rem - 1px); border: 1px solid var(--linie); background: var(--ort-verlauf); box-shadow: none; }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  :root { --spalte: 36rem; }
  body.handy-fest .vertrauen__liste { display: grid; }
  body.handy-fest :is(.hero--foto > .container, .zeichenleiste > .container, .seitenhero__raster, .seitenhero--foto + .vertrauen > .container, .seitenhero--bild + .vertrauen > .container,
    .seitenhero:has(.kontakt__wege) > .container) { max-width: calc(var(--spalte) + 2 * var(--rand)); margin-inline: auto; }
  body.handy-fest .seitenhero:has(.kontakt__wege) .karten { grid-template-columns: minmax(0, 1fr); gap: var(--a-2); }
  body.handy-fest .seitenhero:has(.kontakt__wege) .karte { display: grid; grid-template-columns: 2.5rem 1fr 1.25rem; grid-template-areas: "icon titel pfeil" "icon text text"; column-gap: var(--a-4); row-gap: 0.15rem; align-items: center; padding: var(--a-3) var(--a-4); }
  body.handy-fest .seitenhero:has(.kontakt__wege) .karte__icon { grid-area: icon; width: 2.5rem; height: 2.5rem; margin: 0; }
  body.handy-fest .seitenhero:has(.kontakt__wege) .karte__icon .icon { width: 1.25rem; height: 1.25rem; }
  body.handy-fest .seitenhero:has(.kontakt__wege) .karte h3 { grid-area: titel; font-size: 1.0625rem; }
  body.handy-fest .seitenhero:has(.kontakt__wege) .karte p { grid-area: text; font-size: var(--gr-klein); line-height: 1.4; }
  body.handy-fest .seitenhero:has(.kontakt__wege) .karte__pfeil { grid-area: pfeil; margin: 0; padding: 0; }
  body.handy-fest .seitenhero.seitenhero--wagen { grid-template-columns: minmax(var(--rand), 1fr) 1rem minmax(0, calc(var(--spalte) - 2rem)) 1rem minmax(var(--rand), 1fr); }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container { grid-template-columns: minmax(0, 1fr) 1rem minmax(0, calc(var(--spalte) - 2rem)) 1rem minmax(0, 1fr); }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container::before, body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container:has(> .seitenhero__text)::before { grid-column: 2 / 5; }
  body.handy-fest .seitenhero:not(.seitenhero--bild, .seitenhero--foto):not(:has(.kontakt__wege)) > .container > :is(h1, .seitenhero__text) { grid-column: 3; }
}