:root {
  
  --kalkweiss: #F7F5F2;
  --staub: #ECE8E3;
  --papier: #FFFFFF;
  --riss: #E2DED8;

  --russ: #1C1F24;          
  --beton: #5E6470;         
  --deaktiviert: #8A8F98;   

  --anthrazit: #23272E;
  --anthrazit-hell: #EAEAEC;

  --orange: #FF6B00;
  --orange-hover: #FF7A1A;
  --orange-aktiv: #E85F00;
  --orange-kante: #D95400;

  --dunkel-text: #E9E9EB;
  --dunkel-neben: #B0B5BC;
  --dunkel-matt: #9AA0A8;
  --dunkel-rahmen: #7F8794;
  --dunkel-ghost: #DADDE2;

  --fehler: #B3261E;        --fehler-flaeche: #FBEAE8;
  --erfolg: #1F7A4D;        --erfolg-flaeche: #E8F3EC;

  --whatsapp-dunkel: #127A3C;

  --anzeige: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1140px;
  --rand: 32px;

  --abschnitt: 64px;         
  --takt-klein: 24px;        
  --takt-gross: 44px;        
  --takt-rubrik: 18px;       
  --zeile-text: 1.62;        
  --zeile-lead: 1.5;         
  --rad-knopf: 999px;
  --rad-karte: 18px;
  --rad-feld: 12px;

  --band-hoehe: 38px;
  --band-tempo: 55s;
  --band-abstand: 26px;
  --band-grund: #23272E;    
  --band-grund-klar: rgba(35, 39, 46, 0);   
  --band-verlauf: clamp(20px, 3vw, 48px);  

  --nav-hoehe: 80px;
}

@media (min-width: 1081px) {
  :root { --nav-hoehe: 96px; }
}

@media (max-width: 900px) {
  :root {
    --rand: 20px;
    
    --abschnitt: 52px;
    --takt-gross: 38px;
  }
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  
  background: var(--anthrazit);
  color: var(--russ);
  font-family: var(--text);
  font-size: 18px;
  
  line-height: var(--zeile-text);
  -webkit-font-smoothing: antialiased;
  
  hyphens: auto;
}

img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--anzeige);
  font-weight: 700;
  letter-spacing: -.024em;
  margin: 0;
  text-wrap: balance;
  
  overflow-wrap: break-word;
}
h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.06; }
h2 { font-size: clamp(28px, 3.3vw, 40px); line-height: 1.14; font-weight: 600; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 600; }

p { margin: 0; max-width: 60ch; }        

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--anthrazit);
  outline-offset: 2px;
  border-radius: 4px;
}
.grund--dunkel :focus-visible { outline-color: var(--kalkweiss); }

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--orange); color: var(--russ);
  padding: 12px 20px; font-weight: 700; border: 1px solid var(--orange-kante);
}
.sprung:focus { left: 8px; top: 8px; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 28px; }
  h2 { font-size: 23px; }
  h3 { font-size: 18px; }
  .lead { font-size: 17px; }
  .abschnitt--eng > .innen > .lead { font-size: 16px; }
  .karte p { font-size: 15px; }
}

.innen {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: var(--abschnitt); }

.innen--mitte { max-width: calc(820px + 2 * var(--rand)); }

.innen--weit { max-width: calc(1320px + 2 * var(--rand)); }
.grund--kalkweiss { background: var(--kalkweiss); }
.grund--staub { background: var(--staub); }
.grund--dunkel { background: var(--anthrazit); color: var(--dunkel-text); }
.grund--dunkel h1, .grund--dunkel h2, .grund--dunkel h3 { color: var(--dunkel-text); }

.rubrik {
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--beton);
  margin: 0 0 var(--takt-rubrik);
}
.grund--dunkel .rubrik { color: var(--orange); }   

@media (max-width: 640px) { .rubrik { font-size: 12px; } }

.grund--dunkel .neben { color: var(--dunkel-matt); }
.grund--dunkel .quellenzeile, .grund--dunkel .quellenzeile a { color: var(--dunkel-matt); }

.lead { font-size: 20px; line-height: var(--zeile-lead); color: var(--beton); max-width: 64ch; }
.grund--dunkel .lead { color: var(--dunkel-neben); }

.grund--staub .lead { color: var(--russ); }

.lead--stark { color: var(--russ); }
.grund--dunkel .lead--stark { color: var(--dunkel-text); }
.grund--staub .lead--leise, .grund--kalkweiss .lead--leise { color: var(--beton); }
.grund--dunkel .lead--leise { color: var(--dunkel-neben); }

.betont { font-weight: 600; }
.neben { font-size: 15px; line-height: 1.5; color: var(--beton); }

.text--breit { max-width: none; }

.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange); color: var(--russ);
  border: 1px solid var(--orange-kante); border-radius: var(--rad-knopf);
  padding: 18px 34px;
  font-family: var(--text); font-size: 18px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(255, 107, 0, .7);
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.knopf__pfeil { transition: transform 180ms ease; }
.knopf:hover {
  background: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(255, 107, 0, .8);
}
.knopf:hover .knopf__pfeil { transform: translateX(3px); }
.knopf:active { background: var(--orange-aktiv); transform: none; }

.knopf--gross { font-size: 20px; padding: 21px 40px; }
.knopf--klein { font-size: 15px; padding: 12px 22px; }

:root { --knopf-leiste-gross: 20px; }

@media (min-width: 1366px) {
  .nav .knopf[data-leiste] {
    font-size: var(--knopf-leiste-gross);
    
    padding: 15px 68px;
    
    line-height: 1.1;
    
    box-shadow: 0 14px 34px -10px rgba(255, 107, 0, .78);
  }
}

.knopf--breit {
  display: flex; width: min(680px, 100%);
  justify-content: center; margin-inline: auto;
  padding: 26px 40px;
}

.knopfzeile {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.textlink--leise { font-size: 15px; font-weight: 500; }

.knopf--umriss {
  background: transparent; color: var(--russ);
  border: 1px solid var(--anthrazit); box-shadow: none; font-weight: 600;
}
.knopf--umriss:hover {
  background: var(--anthrazit); color: var(--kalkweiss);
  transform: none; box-shadow: none;
}

.knopf[data-nachrang="ja"] {
  background: transparent; color: var(--russ);
  border-color: var(--anthrazit); box-shadow: none;
}
.knopf[data-nachrang="ja"]:hover { background: var(--anthrazit); color: var(--kalkweiss); }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--russ);
  text-decoration: none;
  transform-origin: left center;
  transition: transform 180ms ease;
}
.textlink:hover, .textlink:focus-visible { transform: scale(1.05); }
.textlink svg { transition: transform 180ms ease; }
.textlink:hover svg { transform: translateX(3px); }
.grund--dunkel .textlink { color: var(--dunkel-text); }

.kopf {
  position: sticky; top: 0; z-index: 50;
  transition: transform 320ms cubic-bezier(.25, .1, .25, 1);
  will-change: transform;
}
.kopf[data-weg="ja"] { transform: translateY(calc(-1 * var(--band-hoehe))); }

.kopf[data-kino="ja"] { transform: translateY(-100%); }
.kopf[data-kino="ja"]:focus-within { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .kopf[data-kino="ja"] { transform: none; }
}

.band {
  position: relative;
  height: var(--band-hoehe); background: var(--band-grund);
  overflow: hidden; display: flex; align-items: center;
}

.band::before, .band::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: var(--band-verlauf); pointer-events: none;
}

.band::before { left: 0;  background: linear-gradient(90deg,  var(--band-grund) 0, var(--band-grund-klar) 100%); }
.band::after  { right: 0; background: linear-gradient(270deg, var(--band-grund) 0, var(--band-grund-klar) 100%); }

.band__lauf {
  position: relative; z-index: 1;
  display: flex; flex: none; will-change: transform;
  animation: band-lauf var(--band-tempo) linear infinite;
}
.band:hover .band__lauf, .band:focus-within .band__lauf { animation-play-state: paused; }

.band__satz { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }

.band__satz li {
  flex: none; display: flex; align-items: center; white-space: nowrap;
  color: var(--kalkweiss); font-size: 13px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase; padding: 0;
}
.band__satz li::after {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
  margin-left: var(--band-abstand); margin-right: var(--band-abstand);
}

@keyframes band-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

.nav {
  height: var(--nav-hoehe); background: var(--kalkweiss);
  border-bottom: 1px solid var(--riss);
  display: flex; align-items: center; gap: 32px;
  padding-inline: var(--rand);
}

.nav__logo { display: block; flex: none; width: 140px; color: var(--anthrazit); }
.nav__logo svg { width: 100%; height: auto; display: block; }

.umbruch--breit { display: none; }
@media (min-width: 720px) { .umbruch--breit { display: inline; } }

.nav__punkte { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.nav__liste { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }

@media (min-width: 1081px) {
  .nav__logo { width: 210px; }
}
@media (min-width: 1160px) {
  .nav__logo { width: 250px; }
}
@media (min-width: 1240px) {
  .nav__logo { width: 285px; }
}
@media (min-width: 1081px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
  .nav__punkte { display: contents; }
  .nav__liste { justify-self: center; }
  
  .nav > .knopf { justify-self: end; }
  
  .nav__rechts { justify-self: end; }
}

.nav__liste a {
  
  color: var(--russ); text-decoration: none; font-size: 17px; font-weight: 500;
  display: inline-block; transform-origin: center;
  transition: transform 180ms ease;
}
.nav__liste a:hover, .nav__liste a:focus-visible { transform: scale(1.09); }
.nav__liste a[aria-current="page"] { font-weight: 700; }

.nav__kurz { display: none; }

@media (min-width: 1081px) and (max-width: 1379px) {
  .nav__liste a { font-size: 16px; }
  
  .nav__voll { display: none; }
  .nav__kurz { display: inline; }
}

.nav__schalter { display: none; }

@media (max-width: 1080px) {
  
  .nav { gap: 12px; }
  .nav__schalter {
    display: inline-flex; align-items: center; justify-content: center;
    order: 3; width: 46px; height: 46px;
    background: transparent; border: 1px solid var(--riss); border-radius: 12px;
    color: var(--russ); cursor: pointer;
  }
  
  .nav > .knopf {
    order: 2; margin-left: auto;
    font-size: 14px; padding: 12px 14px; white-space: nowrap;
  }
  .nav > .knopf .knopf__pfeil { display: none; }
  .nav__punkte {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kalkweiss); border-bottom: 1px solid var(--riss);
    padding: 8px var(--rand) 20px;
  }
  .nav__punkte[hidden] { display: none; }
  
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste a {
    padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--riss);
    display: block;
  }
  
  .nav__liste a:hover, .nav__liste a:focus-visible { transform: none; }
}

@media (max-width: 359px) {
  .nav { gap: 8px; }
  .nav > .knopf { padding: 12px 11px; }
}

.nav__rechts { display: flex; align-items: center; gap: 14px; }

.suche { position: relative; display: flex; align-items: center; }

.suche__lupe {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: transparent; border: 1px solid var(--riss); border-radius: 10px;
  color: var(--russ); cursor: pointer;
  transition: border-color 180ms ease;
}
.suche__lupe:hover { border-color: var(--beton); }

.suche__feld {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
  width: min(420px, 44vw);
  background: var(--papier);
  border: 1px solid var(--riss); border-radius: 10px;
  padding: 0 8px 0 12px;
}

.suche__feld[hidden] { display: none; }

.suche__eingabe {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--russ);
  padding: 10px 0;
}
.suche__eingabe:focus { outline: none; }

.suche__feld:focus-within { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255, 107, 0, .25); }
.suche__eingabe::-webkit-search-cancel-button { display: none; }

.suche__zu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex: 0 0 auto;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--beton); cursor: pointer;
}
.suche__zu:hover { color: var(--russ); }

.nav--sucht .nav__liste { visibility: hidden; }

.suche__meldung {
  position: absolute; right: 0; top: calc(100% + 6px);
  margin: 0; font-size: 13px; color: var(--beton);
  white-space: nowrap;
}
.suche:not(.ist-offen) .suche__meldung { display: none; }

.suche__treffer {
  position: absolute; right: 0; top: calc(100% + 26px);
  width: min(520px, 86vw); max-height: 60vh; overflow-y: auto;
  background: var(--papier);
  border: 1px solid var(--riss); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(28, 31, 36, .12);
  z-index: 60;
}
.suche__treffer[hidden] { display: none; }   
.suche__treffer-eintrag {
  display: block; padding: 12px 14px;
  border-bottom: 1px solid var(--riss);
  text-decoration: none; color: var(--russ);
}
.suche__treffer-eintrag:last-child { border-bottom: 0; }
.suche__treffer-eintrag:hover,
.suche__treffer-eintrag.ist-gewaehlt { background: var(--staub); }
.suche__treffer-titel { display: block; font-weight: 700; font-size: 15px; }
.suche__treffer-text { display: block; margin-top: 3px; font-size: 13px; color: var(--beton); }

.suche__treffer-text mark { background: var(--staub); color: var(--russ); font-weight: 700; }

@media (max-width: 1080px) {
  .nav__rechts { display: contents; }
  .suche { display: block; margin-top: 14px; }
  .suche__lupe { width: 100%; height: auto; justify-content: flex-start; gap: 10px; padding: 12px 14px; }
  .suche__lupe::after { content: 'Suchen'; font-size: 17px; }
  
  .suche.ist-offen .suche__lupe { display: none; }
  .suche__feld { position: static; transform: none; width: 100%; margin-top: 10px; }
  .suche__meldung { position: static; margin-top: 8px; white-space: normal; }
  .suche__treffer {
    position: static; width: 100%; margin-top: 8px; max-height: 46vh;
    box-shadow: none;
  }
  .nav--sucht .nav__liste { visibility: visible; }
}

.karten { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.karte {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--riss);
  border-radius: var(--rad-karte); padding: 28px 28px 32px;
  transition: transform 200ms ease, box-shadow 200ms ease,
              background 200ms ease, border-color 200ms ease;
}

.karte__ziffer, .leistung__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  
  background: var(--anthrazit); color: var(--orange);
  font-family: var(--anzeige); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
  transition: background 200ms ease, color 200ms ease;
}
.karte::before {
  content: ""; position: absolute;
  left: calc(28px + 40px + 16px); right: 28px; top: calc(28px + 20px);
  height: 1px; background: var(--riss);
  transition: background 200ms ease;
}

.karte h3 { margin-bottom: 10px; }

.karte h3 a { text-decoration: none; color: inherit; display: block; padding-block: 7px; margin-block: -7px; }
.karte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rad-karte); }
.karte h3 a:focus-visible { outline: none; }
.karte:focus-within { outline: 3px solid var(--anthrazit); outline-offset: 2px; }

.karte p { font-size: 16px; line-height: 1.6; color: var(--beton); }

.karte:hover, .karte:focus-within, .karte[data-lkar-mitte] {
  background: var(--anthrazit); border-color: var(--anthrazit);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -18px rgba(28, 31, 36, .55);
}
.karte:hover h3, .karte:focus-within h3, .karte[data-lkar-mitte] h3 { color: var(--kalkweiss); }
.karte:hover p, .karte:focus-within p, .karte[data-lkar-mitte] p { color: var(--dunkel-neben); }
.karte:hover .karte__ziffer, .karte:focus-within .karte__ziffer,
.karte[data-lkar-mitte] .karte__ziffer {
  background: var(--orange); color: var(--russ);
}
.karte:hover::before, .karte:focus-within::before,
.karte[data-lkar-mitte]::before { background: rgba(247, 245, 242, .22); }

@media (min-width: 901px) {
  
  .karten--zwei { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
}

@media (min-width: 1400px) {
  .karten--zwei {
    --zwei-breite: min(1360px, 100vw - 80px);
    width: var(--zwei-breite);
    margin-inline: calc((100% - var(--zwei-breite)) / 2);
  }
}

.karten--drei { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
@media (min-width: 901px) {
  
  .karten--drei { grid-template-columns: repeat(3, 1fr); }
}

.karte--klapp {
  display: block;
  padding: 0 24px;
  
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.karte--klapp::before { display: none; }

.karte__klappe {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  
}
@media (min-width: 901px) {
  .karte__klappe { min-height: 124px; }
}
.karte__klappe::-webkit-details-marker { display: none; }
.karte__klappe h3 {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 14px;
  margin: 0; font-size: 19px; line-height: 1.35;
}

.karte__klappe .karte__ziffer { margin: 0; }

.karte--klapp > p { padding-bottom: 24px; margin: 0; max-width: none; }

.karte--klapp:not([open]):hover, .karte--klapp:not([open]):focus-within {
  background: var(--papier);
  border-color: var(--anthrazit);
  transform: none;
  box-shadow: 0 10px 24px -18px rgba(28, 31, 36, .5);
}
.karte--klapp:not([open]):hover .karte__wort,
.karte--klapp:not([open]):focus-within .karte__wort { color: var(--russ); }
.karte--klapp:not([open]):hover > p,
.karte--klapp:not([open]):focus-within > p { color: var(--beton); }
.karte--klapp:not([open]):hover .karte__ziffer,
.karte--klapp:not([open]):focus-within .karte__ziffer {
  background: var(--anthrazit); color: var(--orange);
}

.karte--klapp[open] {
  background: var(--anthrazit); border-color: var(--anthrazit);
  box-shadow: 0 18px 34px -18px rgba(28, 31, 36, .55);
}
.karte--klapp[open] .karte__wort { color: var(--kalkweiss); }
.karte--klapp[open] > p { color: var(--dunkel-neben); }
.karte--klapp[open] .karte__ziffer { background: var(--orange); color: var(--russ); }

.karte--klapp:focus-within { outline: none; }
.karte__klappe:focus-visible {
  outline: 3px solid var(--anthrazit); outline-offset: 2px; border-radius: 6px;
}
.karte--klapp[open] .karte__klappe:focus-visible { outline-color: var(--orange); }

.karte--klapp[open] { align-self: stretch; }

.klapp-wort {
  display: flex; align-items: center; gap: 8px;
  margin: 0; max-width: none;
  font-family: var(--anzeige);
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--beton);
}
.klapp-wort svg { flex: none; }

.cfolge { display: grid; }

.cfolge__zeile {
  display: grid; grid-template-columns: 196px 1fr;
  gap: 30px; align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--riss);
}
.cfolge__zeile:first-child { border-top: 1px solid var(--riss); }

.cfolge__zahl {
  display: flex; align-items: center; justify-content: center;
  min-height: 68px; padding: 12px 14px;
  background: var(--anthrazit); border-radius: var(--rad-karte);
  color: var(--orange);
  font-family: var(--anzeige); font-weight: 700;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.1; letter-spacing: -.02em;
  text-align: center; text-wrap: balance;
  font-variant-numeric: tabular-nums;
}

.cfolge__text h3 {
  font-size: clamp(19px, 1.7vw, 23px); line-height: 1.32;
  font-weight: 600; color: var(--russ);
}
.cfolge__text p {
  
  margin-top: 4px; max-width: 78ch;
  font-size: 16px; line-height: 1.5; color: var(--beton);
}

.cfolge__fuss { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; max-width: none; }
.cfolge__fuss .quellenlink { margin-left: auto; }

.quellenlink {
  font-size: 14px; line-height: 1.4; color: var(--beton);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  padding-block: 5px; margin-block: -5px;
}
.quellenlink:hover, .quellenlink:focus-visible { color: var(--russ); text-decoration-thickness: 2px; }

@media (max-width: 900px) {
  
  .cfolge__zeile { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .cfolge__zahl { min-height: 0; padding: 12px 16px; font-size: 22px; justify-self: start; }
}

.quellenzeile { margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--beton); max-width: 74ch; }
.quellenzeile a { color: var(--beton); text-underline-offset: 3px; }

.textlink--klein {
  font-size: 14px; gap: 6px; vertical-align: -1px;
  padding-block: 3px; margin-block: -3px;
}
.quellenzeile .textlink--klein { color: var(--russ); text-decoration: none; }

.quellenzeile--rechts { text-align: right; max-width: none; }
.quellenzeile--rechts .textlink--klein {
  color: var(--beton); font-size: 13px;
  padding-block: 6px; margin-block: -6px;
}

.textlink--satz {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.textlink--satz:hover, .textlink--satz:focus-visible { text-decoration-thickness: 2px; }

.lkar__pfeil[hidden] { display: none; }

.lkar__pfeil {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: var(--papier); color: var(--russ);
  border: 1px solid var(--riss); border-radius: var(--rad-knopf);
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.lkar__pfeil:hover {
  border-color: var(--anthrazit); transform: translateY(-2px);
  box-shadow: 0 12px 22px -14px rgba(28, 31, 36, .55);
}
.lkar__pfeil:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 2px; }

@media (max-width: 1099px) { .lkar__pfeil { display: none; } }

@media (min-width: 1100px) {

  .lkar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
  }

  .lkar__fenster {
    overflow-x: auto;
    
    padding-block: 22px; margin-block: -22px;
    
    scrollbar-width: none;
  }
  .lkar__fenster::-webkit-scrollbar { display: none; }
  
  .lkar[data-lkar-bereit] .lkar__fenster { overflow-x: hidden; }

  .lkar .lkar__spur {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    gap: 22px;
    transition: transform 420ms cubic-bezier(.25, .1, .25, 1);
  }
  
  .lkar .lkar__spur > * { flex: 0 0 calc((100% - 44px) / 3); min-width: 0; }

  .lkar__spur > .karte[data-lkar-mitte] { transform: scale(1.055); z-index: 2; }
  
  .lkar__spur > .karte[data-lkar-mitte]:hover,
  .lkar__spur > .karte[data-lkar-mitte]:focus-within {
    transform: translateY(-3px) scale(1.055);
  }

  .lkar__spur > .karte:not([data-lkar-mitte]):hover,
  .lkar__spur > .karte:not([data-lkar-mitte]):focus-within {
    background: var(--papier);                 
    border-color: var(--riss);                 
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 26px -16px rgba(28, 31, 36, .30);
  }
  .lkar__spur > .karte:not([data-lkar-mitte]):hover h3,
  .lkar__spur > .karte:not([data-lkar-mitte]):focus-within h3 { color: var(--russ); }
  .lkar__spur > .karte:not([data-lkar-mitte]):hover p,
  .lkar__spur > .karte:not([data-lkar-mitte]):focus-within p { color: var(--beton); }
  
  .lkar__spur > .karte:not([data-lkar-mitte]):hover .karte__ziffer,
  .lkar__spur > .karte:not([data-lkar-mitte]):focus-within .karte__ziffer {
    background: var(--anthrazit); color: var(--orange);
  }
  .lkar__spur > .karte:not([data-lkar-mitte]):hover::before,
  .lkar__spur > .karte:not([data-lkar-mitte]):focus-within::before {
    background: var(--riss);                   
  }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  .lkar--fuenf { display: block; }
  .lkar--fuenf .lkar__fenster { overflow: visible; padding-block: 0; margin-block: 0; }
  .lkar--fuenf .lkar__spur { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .lkar--fuenf .lkar__spur > * { flex: none; }
  .lkar--fuenf .lkar__pfeil { display: none; }
}

@media (min-width: 1400px) {
  
  .lkar--fuenf {
    --lkar-breite: min(1560px, 100vw - 80px);
    width: var(--lkar-breite);
    margin-inline: calc((100% - var(--lkar-breite)) / 2);
  }
  
  .lkar--fuenf .lkar__spur > * { flex: 0 0 calc((100% - 88px) / 5); }

  .lkar--fuenf .lkar__spur > .karte[data-lkar-rang="0"] { transform: scale(1.06); z-index: 3; }
  .lkar--fuenf .lkar__spur > .karte[data-lkar-rang="1"] { transform: scale(.95); z-index: 2; }
  .lkar--fuenf .lkar__spur > .karte[data-lkar-rang="2"] { transform: scale(.86); z-index: 1; }

  .lkar--fuenf .lkar__spur > .karte[data-lkar-rang="0"]:hover,
  .lkar--fuenf .lkar__spur > .karte[data-lkar-rang="0"]:focus-within { transform: translateY(-3px) scale(1.06); }
  .lkar--fuenf .lkar__spur > .karte[data-lkar-rang="1"]:hover,
  .lkar--fuenf .lkar__spur > .karte[data-lkar-rang="1"]:focus-within { transform: translateY(-3px) scale(.97); }
  .lkar--fuenf .lkar__spur > .karte[data-lkar-rang="2"]:hover,
  .lkar--fuenf .lkar__spur > .karte[data-lkar-rang="2"]:focus-within { transform: translateY(-3px) scale(.88); }

  .lkar--fuenf .lkar__fenster { padding-block: 26px; margin-block: -26px; }
}

@media (prefers-reduced-motion: reduce) {
  .lkar .lkar__spur { transition: none; }
  .lkar__pfeil { transition: none; }
}

.fragen { display: grid; gap: 12px; }
.frage {
  background: var(--papier); border: 1px solid var(--riss);
  border-radius: 14px; padding: 0 22px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.frage:hover, .frage:focus-within { border-color: var(--anthrazit); box-shadow: 0 10px 24px -18px rgba(28, 31, 36, .5); }
.frage[open] { border-color: var(--anthrazit); }
.frage__titel {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--anzeige); font-weight: 600; font-size: 18px; line-height: 1.4;
}
.frage__titel::-webkit-details-marker { display: none; }
.frage__titel::after {
  content: "+"; flex: none; font-size: 24px; font-weight: 400;
  color: var(--anthrazit); line-height: 1;
}
.frage[open] .frage__titel::after { content: "\2013"; }
.frage__antwort { padding: 0 0 20px; }
.frage__antwort p { font-size: 17px; color: var(--beton); }
.frage__antwort p + p { margin-top: 12px; }
.frage__antwort .knopf { margin-top: 20px; color: var(--russ); }

.thema {
  background: var(--papier); border: 1px solid var(--riss);
  border-radius: 14px; padding: 0 20px;
  scroll-margin-top: 90px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.thema:hover, .thema:focus-within { border-color: var(--anthrazit); box-shadow: 0 10px 24px -18px rgba(28, 31, 36, .5); }
.thema[open] { border-color: var(--anthrazit); }
.thema__kopf {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 0; cursor: pointer; list-style: none;
}
.thema__kopf::-webkit-details-marker { display: none; }

.thema__zahl { font-size: 13px; color: var(--beton); margin-left: auto; flex: none; }
@media (max-width: 700px) { .thema__zahl { font-size: 14px; } }
.thema__kopf::after {
  content: "+"; flex: none; font-size: 26px; font-weight: 400;
  color: var(--anthrazit); line-height: 1;
}
.thema[open] .thema__kopf::after { content: "\2013"; }

.thema__kopf .faq__gruppe { margin: 0; font-size: 21px; line-height: 1.3; }
.thema__inhalt { padding: 0 0 16px; display: grid; gap: 12px; }

.faq__gruppe {
  margin-top: 40px; margin-bottom: 14px;
  scroll-margin-top: 90px;
}
.faq__gruppe:first-child { margin-top: 0; }

.frage { scroll-margin-top: 90px; }

.feld { display: grid; gap: 4px; margin-bottom: 6px; }

.feld__paar > .feld { align-content: start; }

.feld__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.feld__paar--datei { grid-template-columns: .74fr 1.26fr; }
@media (max-width: 620px) { .feld__paar { grid-template-columns: 1fr; } }

.feld__notiz, .feld__legende, .formular__zusage { max-width: none; }
.feld__notiz { font-size: 13px; line-height: 1.4; color: var(--beton); }
.feld > label { font-size: 15px; font-weight: 600; }
.feld__hinweis { font-size: 13px; color: var(--beton); font-weight: 400; }
.feld input, .feld textarea {
  font-family: var(--text); font-size: 17px; color: var(--russ);
  background: var(--papier); border: 1px solid #C9C4BC; border-radius: var(--rad-feld);
  padding: 9px 13px; min-height: 44px; width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.feld textarea { min-height: 64px; resize: vertical; }

.feld input:hover, .feld textarea:hover { border-color: var(--anthrazit); }
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: none;
  border: 2px solid var(--anthrazit);
  box-shadow: 0 0 0 3px rgba(35, 39, 46, .18);
}

.feld:hover > label { color: var(--anthrazit); }
.feld--fehler input, .feld--fehler textarea { border: 2px solid var(--fehler); background: var(--fehler-flaeche); }
.feld__fehler { font-size: 14px; color: var(--fehler); font-weight: 600; }
.feld__fehler[hidden] { display: none; }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pflicht { color: var(--orange); font-weight: 700; }
.feld__legende { font-size: 13px; color: var(--beton); margin-bottom: 8px; }

.feld--wahl {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start; margin-bottom: 14px;
}
.feld--wahl input[type="checkbox"] {
  width: 24px; height: 24px; min-height: 0; margin: 0;
  accent-color: var(--orange);
}
.feld--wahl label { font-size: 13px; font-weight: 400; line-height: 1.45; }
.feld--wahl input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--anthrazit); outline-offset: 2px;
}

.feld input[type="file"] { padding: 5px 8px; min-height: 36px; font-size: 13px; cursor: pointer; }
.feld input[type="file"]::file-selector-button {
  font-family: var(--text); font-size: 13px; font-weight: 600;
  color: var(--russ); background: var(--staub);
  border: 1px solid var(--riss); border-radius: 999px;
  padding: 5px 12px; margin-right: 10px; cursor: pointer;
}
.feld input[type="file"]:hover::file-selector-button { border-color: var(--anthrazit); }

.formular__zusage, .erreichbar__unten .neben {
  font-size: 13px; line-height: 1.45; color: var(--beton);
  margin-top: 12px; margin-bottom: 0;
  min-height: calc(3 * 1.45em);
}

.feld__pruefung {
  margin: 6px 0 0;
  font-size: 14px; line-height: 1.45;
  color: var(--beton);
}
.feld__pruefung[hidden] { display: none; }

.feld__vorschlag {
  padding: 0; border: 0; background: none;
  font: inherit; color: var(--russ); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.feld__vorschlag:hover { color: var(--orange); }
.feld__vorschlag:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px;
}

.formular__meldung {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--staub);
  border-left: 4px solid var(--orange);
  border-radius: 0 8px 8px 0;
  color: var(--russ);
  font-size: 15px; line-height: 1.5;
}
.formular__meldung[hidden] { display: none; }

.knopf--whatsapp {
  background: #22C55E;
  border-color: #16A34A;
  color: var(--russ);
  box-shadow: none;
}
.knopf--whatsapp:hover, .knopf--whatsapp:focus-visible {
  background: #16A34A;
  border-color: #15803D;
  color: var(--russ);
  box-shadow: none;
}

.knopf--whatsapp svg { flex: 0 0 auto; }

.erreichbar .knopf--whatsapp {
  width: 100%;
  justify-content: center;
  padding-inline: 18px;
  white-space: nowrap;
}

.kontakt__formular .knopf, .erreichbar .knopf { line-height: 1.25; }

.erreichbar {
  background: var(--papier); border: 1px solid var(--riss);
  
  border-radius: var(--rad-karte); padding: 24px 26px 20px;
}

.erreichbar__zeiten { display: grid; margin: 14px 0 0; }
.erreichbar__zeiten > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 8px 0; border-bottom: 1px solid var(--riss);
}
.erreichbar__zeiten > div:last-child { border-bottom: 0; }
.erreichbar__zeiten dt { font-weight: 600; font-size: 16px; margin: 0; }
.erreichbar__zeiten dd { margin: 0; font-size: 16px; color: var(--beton); text-align: right; }

.erreichbar__satz { font-size: 16px; line-height: 1.5; margin-top: 48px; }

.erreichbar__wege { margin-top: 30px; }
.erreichbar__weg { display: grid; gap: 2px; }

.erreichbar__weg + .erreichbar__weg { margin-top: 10px; }
.erreichbar__was {
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--beton);
}
.erreichbar__wert { font-size: 18px; font-weight: 600; }
@media (max-width: 640px) { .erreichbar__was { font-size: 12px; } }

@media (max-width: 900px) {
  .erreichbar__link { display: inline-block; padding-block: 6px; margin-block: -6px; }
}

.danach {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0;
}
.danach__punkt { padding-top: 22px; border-top: 2px solid var(--orange); }
.danach__punkt h3 { font-size: 20px; }
.danach__punkt p { font-size: 16px; line-height: 1.6; color: var(--beton); margin-top: 10px; }
@media (max-width: 900px) { .danach { grid-template-columns: 1fr; gap: 26px; } }

.abschnitt--eng { padding-top: 64px; }

.abschnitt--eng > .innen > .lead { font-size: 18px; margin-top: var(--takt-klein); }

@media (max-width: 700px) {
  .feld__notiz, .feld__legende, .formular__zusage, .erreichbar__unten .neben,
  .feld--wahl label, .feld__hinweis { font-size: 14px; }
  .feld input[type="file"], .feld input[type="file"]::file-selector-button { font-size: 14px; }
}

.fuss { background: var(--anthrazit); color: var(--dunkel-neben); padding-block: 32px; font-size: 15px; }
.fuss__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.fuss__logo { display: block; width: 300px;    color: var(--kalkweiss); flex: 0 0 auto; }
.fuss__logo svg { width: 300px; height: auto; display: block; }
.fuss__reihe { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; margin-left: auto; }
.fuss a { color: var(--dunkel-ghost); text-underline-offset: 3px; }
.fuss__schluss { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(247, 245, 242, .14); display: flex; flex-wrap: wrap; gap: 6px 24px; color: var(--dunkel-matt); font-size: 14px; }   
@media (max-width: 700px) { .fuss__reihe { margin-left: 0; } }

.abstand-oben { margin-top: var(--takt-klein); }
.abstand-oben-gross { margin-top: var(--takt-gross); }

.hero {
  position: relative;
  overflow: hidden;
  background: var(--anthrazit);
  color: var(--dunkel-text);
  display: grid;
  align-content: center;
  min-height: calc(100vh - var(--nav-hoehe) - var(--band-hoehe));
  padding-block: clamp(56px, 9vh, 104px);
}
@supports (height: 100svh) {
  .hero { min-height: calc(100svh - var(--nav-hoehe) - var(--band-hoehe)); }
}

.hero__medium { position: absolute; inset: 0; z-index: 0; }
.hero__film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.hero__abdunkler { position: absolute; inset: 0; pointer-events: none; display: none; }

.hero[data-hero="ruhig"] .hero__abdunkler {
  display: block;
  
  background:
    linear-gradient(90deg,
      rgba(35, 39, 46, .82) 0%,
      rgba(35, 39, 46, .82) 64%,
      rgba(35, 39, 46, .54) 76%,
      rgba(35, 39, 46, .12) 90%,
      rgba(35, 39, 46, 0) 100%),
    rgba(35, 39, 46, .32);
}

.hero[data-hero="textur"] .hero__film { filter: blur(6px) brightness(.70); transform: scale(1.03); }
.hero[data-hero="textur"] .hero__abdunkler { display: block; background: rgba(35, 39, 46, .40); }
@media (max-width: 900px) {
  
  .hero[data-hero="textur"] .hero__film { filter: brightness(.62); transform: none; }
  .hero[data-hero="textur"] .hero__abdunkler { background: rgba(35, 39, 46, .52); }
}

.hero[data-hero="feld"] .hero__innen > * { position: relative; }
.hero[data-hero="feld"] .hero__innen::before {
  content: ""; position: absolute; z-index: -1;
  inset: -40px -48px -44px -48px;
  background: var(--anthrazit);
  border-radius: var(--rad-karte);
}

.hero__innen { position: relative; z-index: 1; }

.hero h1 {
  
  max-width: 29ch;
  
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.0;
  letter-spacing: -.03em;
  color: var(--kalkweiss);
}

.hero__lead {
  font-size: clamp(18px, 1.55vw, 22px);
  max-width: 67ch;
  color: var(--dunkel-text);
  margin-block: 26px 38px;
}

.hero__zusagen {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 6px clamp(12px, 1.4vw, 20px);
  margin-top: 26px;
  max-width: none;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--kalkweiss);
}
.hero__zusagen span { display: inline-flex; align-items: center; }
.hero__zusagen span:not(:last-child)::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: clamp(12px, 1.4vw, 20px);
  border-radius: 50%;
  background: var(--orange);
}

@media (max-width: 900px) {
  
  .hero {
    align-content: center;
    padding-block-start: calc(clamp(56px, 9vh, 104px) + var(--nav-hoehe) + var(--band-hoehe));
  }
  
  .hero[data-hero] .hero__abdunkler,
  .hero__abdunkler {
    background: linear-gradient(0deg,
      var(--anthrazit) 0%,
      rgba(35, 39, 46, .96) 62%,
      rgba(35, 39, 46, .82) 88%,
      rgba(35, 39, 46, .52) 100%);
  }
  .hero .knopf { width: 100%; justify-content: center; }
}

.ablauf {
  list-style: none; margin: var(--takt-gross) 0 0; padding: 0;
  border-top: 1px solid rgba(247, 245, 242, .14);
}

.ablauf__schritt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px clamp(16px, 2vw, 24px);
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid rgba(247, 245, 242, .14);
}

.ablauf__schluss { text-align: center; }

.ablauf__nr {
  grid-column: 1; grid-row: 1; align-self: start;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--orange); color: var(--russ);
  font-family: var(--text); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.ablauf__schritt h3 { grid-column: 2; grid-row: 1; color: var(--dunkel-text); }
.ablauf__schritt p { grid-column: 2 / 4; font-size: 16px; line-height: 1.6; color: var(--dunkel-neben); max-width: 62ch; }

.ablauf__schritt p + p { margin-top: 10px; }
.ablauf__zeit { grid-column: 3; grid-row: 1; font-size: 15px; font-weight: 600; color: var(--orange); white-space: nowrap; }
@media (max-width: 640px) {
  .ablauf__schritt { grid-template-columns: auto minmax(0, 1fr); }
  .ablauf__schritt p { grid-column: 2; }
  
  .ablauf__zeit { grid-column: 2; grid-row: auto; order: 1; white-space: normal; margin-top: 6px; }
}

.ablauf__schritt--lang {
  display: block; padding: 0;
}
.ablauf__klappe { display: block; }
.ablauf__kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 4px clamp(16px, 2vw, 24px);
  align-items: center;
  padding: 12px 0;
  cursor: pointer; list-style: none;
}
.ablauf__kopf::-webkit-details-marker { display: none; }

.ablauf__kopf::after {
  content: "+"; flex: none; justify-self: end;
  font-size: 24px; font-weight: 400; line-height: 1;
  color: var(--dunkel-text);
}
.ablauf__klappe[open] .ablauf__kopf::after { content: "\2013"; }

.ablauf__kopf .ablauf__nr { grid-column: 1; grid-row: auto; align-self: center; }
.ablauf__kopf h3 { grid-column: 2; grid-row: auto; }
.ablauf__kopf .ablauf__zeit { grid-column: 3; grid-row: auto; }

.ablauf__mehr {
  padding: 0 0 20px;
  margin-left: calc(38px + clamp(16px, 2vw, 24px));
}
.ablauf__mehr p { max-width: 62ch; }

.ablauf__schritt--lang:has(.ablauf__klappe[open]) { border-bottom-color: rgba(247, 245, 242, .3); }
.ablauf__klappe:hover .ablauf__kopf::after,
.ablauf__klappe .ablauf__kopf:focus-visible::after { color: var(--orange); }
@media (max-width: 640px) {
  
  .ablauf__kopf { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ablauf__kopf .ablauf__zeit { grid-column: 2; order: 1; white-space: normal; margin-top: 6px; }
  .ablauf__mehr { margin-left: 0; }
}

.aufwand { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.3; font-family: var(--anzeige); letter-spacing: -.024em; }
.aufwand b { font-weight: 700; }

.drei { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.drei__punkt {
  position: relative;
  background: var(--papier); border: 1px solid var(--riss);
  border-radius: var(--rad-karte); padding: 40px 32px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

@media (max-width: 900px) {
  .drei__punkt { padding: 32px 20px; }
}
.drei__punkt h3 { font-size: 25px; }   
.drei__punkt p { font-size: 19px; color: var(--beton); margin-top: 12px; }

.drei__punkt h3 a { text-decoration: none; color: inherit; }
.drei__punkt h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rad-karte); }
.drei__punkt h3 a:focus-visible { outline: none; }
.drei__punkt:focus-within { outline: 3px solid var(--anthrazit); outline-offset: 2px; }

.drei__punkt:hover, .drei__punkt:focus-within {
  transform: translateY(-3px);
  border-color: var(--anthrazit);
  box-shadow: 0 18px 34px -18px rgba(28, 31, 36, .45);
}

.drei__punkt--gross {
  background: var(--anthrazit); border-color: var(--anthrazit);
  color: var(--dunkel-text);
}
.drei__punkt--gross h3 { color: var(--dunkel-text); }
.drei__punkt--gross p { color: var(--dunkel-text); }
.drei__punkt--gross:hover, .drei__punkt--gross:focus-within { border-color: var(--dunkel-rahmen); }
.grund--kalkweiss .drei__punkt--gross:focus-within { outline-color: var(--anthrazit); }

.drei--vier { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) { .drei { grid-template-columns: 1fr; gap: 20px; } }

.person__raster { display: grid; gap: 56px; grid-template-columns: .9fr 1.1fr; align-items: center; }

.person__bildspalte { min-width: 0; }
.person__bildspalte .rubrik { margin: 0 0 14px; }

.person__name { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--beton); }
.grund--dunkel .person__name { color: var(--dunkel-neben); }

.person__bild {
  width: 100%; height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--rad-karte);
  border: 1px solid var(--riss);
}

.person__text p { color: var(--beton); }
.grund--dunkel .person__text p { color: var(--dunkel-neben); }

.person__raster--gedreht { grid-template-columns: 1.1fr .9fr; }

.person__raster--kopf { align-items: start; }

.person__raster--kopf .markenzeile { display: flex; justify-content: center; margin: 42px 0 18px; }

@media (max-width: 900px) {
  .person__raster--kopf .markenzeile { justify-content: flex-start; margin: 24px 0 26px; }
}

@media (max-width: 900px) { .person__raster { grid-template-columns: 1fr; gap: 32px; } }

.person__logo {
  display: flex; justify-content: center;
  
  margin: 14px 0 18px;
}
.person__logo svg { width: min(72%, 300px); height: auto; display: block; }
@media (max-width: 900px) {
  .person__logo { justify-content: flex-start; margin-bottom: 24px; }
  .person__logo svg { width: min(78%, 260px); }
}

.markenzeile { margin: 0 0 22px; }
.markenzeile svg { width: min(100%, 300px); height: auto; display: block; color: var(--anthrazit); }
@media (max-width: 900px) { .markenzeile svg { width: min(100%, 240px); } }

.abschluss { text-align: center; }

.abschluss > * { margin-inline: auto; }

.abschluss h2 { max-width: 26ch; font-size: clamp(32px, 4.2vw, 52px); }

.kontakt__raster { display: grid; gap: 56px; grid-template-columns: 1fr 1fr; align-items: start; }
.kontakt__formular {
  background: var(--papier); border: 1px solid var(--riss);
  border-radius: var(--rad-karte); padding: 20px 20px;
  
  display: flex; flex-direction: column;
}

.kontakt__formular .feld--wachs { flex: 1 1 auto; min-height: 0; grid-template-rows: auto auto 1fr; }
.kontakt__formular .feld--wachs textarea { height: 100%; }
.kontakt__formular .knopf { width: 100%; justify-content: center; }
@media (max-width: 900px) { .kontakt__raster { grid-template-columns: 1fr; gap: 40px; } }

.kontakt__raster--formular { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
.kontakt__raster--formular > .erreichbar { display: flex; flex-direction: column; }

.erreichbar__unten { margin-top: auto; padding-top: 22px; }

@media (max-width: 900px) { .kontakt__raster--formular { grid-template-columns: 1fr; } }

@media (max-width: 700px) {
  .erreichbar { padding: 24px 20px 20px; }
  .erreichbar .knopf--whatsapp { white-space: normal; padding-inline: 14px; }
}

@media (max-width: 400px) {
  .kopfbild .lead { font-size: 18px; }
  .kopfbild__satz { font-size: 14px; }
}

.knopf[aria-disabled="true"] { opacity: .82; pointer-events: none; }

.kopfbild {
  position: relative;
  overflow: hidden;
  background: var(--anthrazit);       
  color: var(--dunkel-text);
  display: grid;
  grid-template-areas: "kopf";
  align-items: center;
}

.kopfbild::before {
  content: "";
  grid-area: kopf;
  width: 100%;
  height: calc(100vh - var(--nav-hoehe) - var(--band-hoehe));
  pointer-events: none;
}

@supports (height: 100svh) {
  .kopfbild::before { height: calc(100svh - var(--nav-hoehe) - var(--band-hoehe)); }
}

.kopfbild__medium { position: absolute; inset: 0; z-index: 0; }
.kopfbild__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

.kopfbild__film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

@media (prefers-reduced-motion: reduce) { .kopfbild__film { display: none; } }

.kopfbild {
  --deckung: .70;
}

.kopfbild[data-motiv="hell"] { --deckung: .76; }

.kopfbild[data-motiv="dunkel"] { --deckung: .58; }

.kopfbild__abdunkler {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    
    linear-gradient(90deg,
      rgba(35, 39, 46, var(--deckung)) 0%,
      rgba(35, 39, 46, calc(var(--deckung) * .97)) 68%,
      rgba(35, 39, 46, calc(var(--deckung) * .58)) 88%,
      rgba(35, 39, 46, calc(var(--deckung) * .21)) 100%),
    rgba(35, 39, 46, calc(var(--deckung) * .30));
}

@media (max-width: 900px) {
  .kopfbild__abdunkler { background: rgba(35, 39, 46, calc(var(--deckung) * 1.08)); }
}

.kopfbild__innen {
  grid-area: kopf;
  position: relative; z-index: 1;
  padding-block: clamp(44px, 7vh, 88px);
}

.kopfbild h1 {
  color: var(--kalkweiss);
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 18ch;
}

.kopfbild .lead,
.kopfbild .kopfbild__satz { color: var(--dunkel-text); }

@keyframes kopfbildEin {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.kopfbild h1,
.kopfbild .lead,
.kopfbild .kopfbild__satz {
  animation: kopfbildEin 600ms cubic-bezier(.22, .61, .36, 1) both;
}
.kopfbild h1 { animation-delay: 60ms; }
.kopfbild .lead { animation-delay: 260ms; }
.kopfbild .kopfbild__satz { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .kopfbild h1,
  .kopfbild .lead,
  .kopfbild .kopfbild__satz { animation: none !important; }
}

.rechner {
  display: grid; gap: 40px;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
}
.rechner__felder { display: flex; flex-direction: column; }

.rechner__eingaben { margin-top: auto; padding-top: 30px; }

.rechner__mitEinheit { display: flex; align-items: stretch; }
.rechner__mitEinheit input {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  min-width: 0;
}
.rechner__einheit {
  display: flex; align-items: center; flex: none;
  padding: 0 16px;
  background: var(--staub); color: var(--beton);
  border: 1px solid #C9C4BC; border-left: 0;
  border-top-right-radius: var(--rad-feld); border-bottom-right-radius: var(--rad-feld);
  font-size: 15px; white-space: nowrap;
  
  min-width: 165px; justify-content: center;
}

.rechner__mitEinheit:hover .rechner__einheit { border-color: var(--anthrazit); border-left: 0; }
.rechner__mitEinheit:focus-within .rechner__einheit {
  border-color: var(--anthrazit); border-left: 0;
}
@media (max-width: 700px) { .rechner__einheit { font-size: 14px; padding: 0 12px; } }
.rechner__felder .feld { margin-bottom: 26px; }

.rechner__felder .feld > label { font-size: 18px; line-height: 1.4; }

.rechner__felder .feld > label .feld__hinweis {
  display: block; margin-top: 5px; line-height: 1.45; font-weight: 400;
  font-size: 15px;
}

.rechner__ergebnis {
  background: var(--anthrazit);
  border: 1px solid var(--anthrazit);
  border-radius: var(--rad-karte);
  padding: 34px 30px 30px;
  color: var(--dunkel-text);
}

.rechner__marke {
  font-size: 15px; font-weight: 600; line-height: 1.55;
  letter-spacing: .01em;
  color: var(--dunkel-neben);
  max-width: 34ch;
}

.rechner__zahl {
  font-family: var(--anzeige);
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  margin-top: 14px;
}
.rechner__unter { font-size: 16px; color: var(--dunkel-neben); margin-top: 6px; }

.rechner__zeilen { margin: 26px 0 0; display: grid; gap: 12px; }
.rechner__zeilen > div {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  justify-content: space-between; align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--dunkel-rahmen);
}
.rechner__zeilen dt { font-size: 15px; color: var(--dunkel-neben); max-width: 30ch; }
.rechner__zeilen dd {
  margin: 0; font-weight: 700; font-size: 19px;
  color: var(--dunkel-text);
  font-variant-numeric: tabular-nums;
}

.rechner__weg {
  margin-top: 22px;
  font-size: 15px; line-height: 1.5;
  color: var(--dunkel-neben);
  font-variant-numeric: tabular-nums;
}

.rechner__zusage {
  margin-top: 16px;
  font-size: 13px; font-weight: 400; line-height: 1.45;
  color: var(--dunkel-matt);
}
@media (max-width: 700px) { .rechner__zusage { font-size: 14px; } }

.rechner--zweit { align-items: center; }
.rechner__ergebnis--hell {
  background: var(--papier);
  border-color: var(--riss);
  color: var(--russ);
}
.rechner__ergebnis--hell .rechner__marke,
.rechner__ergebnis--hell .rechner__unter,
.rechner__ergebnis--hell .rechner__weg { color: var(--beton); }
.rechner__ergebnis--hell .rechner__zahl { color: var(--russ); }
.rechner__ergebnis--hell .rechner__zusage {
  color: var(--russ); border-top-color: var(--riss);
}

.rechner--kurz .rechner__ergebnis--offen {
  background: none;
  border: 0;
  border-left: 3px solid var(--orange);
  border-radius: 0;
  padding: 2px 0 2px 22px;
}
.rechner--kurz .rechner__zusage { border-top-color: var(--dunkel-rahmen); }

.rechner--kurz { max-width: 820px; margin-inline: auto; gap: 26px; }

.rechner--kurz .rechner__felder .feld { margin-bottom: 24px; }
.feld__einheit {
  margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--beton);
}
.grund--dunkel .feld__einheit { color: var(--dunkel-neben); }
.rechner--kurz .rechner__felder .feld:last-of-type { margin-bottom: 0; }
.rechner__zusage--leise {
  border-top: 0; padding-top: 8px; margin-top: 8px;
  font-size: 14px; font-weight: 400; color: var(--dunkel-matt);
}
.grund--dunkel .rechner__felder .feld > label { color: var(--dunkel-text); }
.grund--dunkel .rechner__felder .feld:hover > label { color: var(--kalkweiss); }
@media (max-width: 900px) {
  .rechner--kurz .rechner__ergebnis--offen {
    border-left: 0;
    border-top: 3px solid var(--orange);
    padding: 24px 0 0;
  }
}

.drei--gleich { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.drei__punkt--ruhig:hover, .drei__punkt--ruhig:focus-within {
  transform: none; border-color: var(--riss); box-shadow: none;
}

@media (max-width: 900px) {
  .rechner { grid-template-columns: 1fr; gap: 28px; }
  .drei--gleich { grid-template-columns: 1fr; }
}

.warum3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  
  gap: 22px; list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0;
}

.warum3__punkt {
  position: relative;
  background: var(--anthrazit);
  border: 1px solid var(--anthrazit);
  border-radius: var(--rad-karte);
  padding: 28px 24px 26px;
  overflow: hidden;
  color: var(--dunkel-text);
}

.warum3__punkt h3 { font-size: 25px; color: var(--dunkel-text); }
.warum3__punkt p { font-size: 19px; line-height: 1.6; color: var(--dunkel-neben); margin-top: 18px; }

.warum3 strong { font-weight: 700; color: var(--dunkel-text); }

.zusagen { list-style: none; margin: var(--takt-klein) 0 0; padding: 0; display: grid; gap: 7px; }
.zusagen li {
  position: relative; padding-left: 20px;
  font-size: 16px; line-height: 1.5; color: var(--russ);
}
.zusagen li::before {
  content: "—"; position: absolute; left: 0; top: 0;
  color: var(--orange); font-weight: 700;
}

.zusagen--gross li { font-size: 18px; line-height: 1.6; padding-left: 24px; }
.zusagen--gross { gap: 12px; }
@media (max-width: 900px) { .warum3 { grid-template-columns: 1fr; gap: 18px; } }

.quellen { display: grid; gap: 22px; }
.quelle {
  background: var(--papier); border: 1px solid var(--riss);
  border-radius: var(--rad-karte); padding: 30px 30px 26px;
}
.quelle__zahl {
  font-family: var(--anzeige); font-weight: 600;
  font-size: clamp(30px, 2.6vw, 38px); line-height: 1;
  letter-spacing: -.028em; color: var(--russ);
}
.quelle__aussage { margin-top: 10px; font-size: 18px; line-height: 1.55; color: var(--russ); max-width: 62ch; }

.quelle__daten {
  margin: 20px 0 0; display: grid; gap: 4px 20px;
  grid-template-columns: 1fr; font-size: 15px; line-height: 1.6;
  color: var(--beton);
}
.quelle__daten dt {
  font-weight: 700; color: var(--russ);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  margin-top: 12px;
}

.quelle__daten dd { margin: 0; max-width: 66ch; overflow-wrap: anywhere; }

.grund--dunkel .quelle__zahl { color: var(--orange); }
.grund--dunkel .quelle__aussage { color: var(--dunkel-text); }
.grund--dunkel .quelle__daten { color: var(--dunkel-matt); }
.grund--dunkel .quelle__daten dt { color: var(--dunkel-text); }
.grund--dunkel .quelle { background: var(--anthrazit); border-color: var(--dunkel-rahmen); }
@media (min-width: 700px) {
  .quelle__daten { grid-template-columns: 170px minmax(0, 1fr); }
  .quelle__daten dt { margin-top: 0; padding-top: 2px; }
  .quelle__daten dd { margin-bottom: 8px; }
}

.leistungen { display: grid; gap: 34px; }

.leistung {
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 20px; align-items: start;
}

.leistung__nr { margin-bottom: 0; }

.leistung__text h3 { margin-bottom: 10px; }
.leistung__text p { color: var(--beton); line-height: 1.65; }
.leistung__text p + p { margin-top: 12px; }

@media (max-width: 560px) {
  .leistung { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

.fakten {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px; margin-inline: 0; margin-bottom: 0; padding: 0; list-style: none;
}
.fakten__stueck {
  padding: 26px 24px;
  border: 1px solid var(--dunkel-rahmen);
  border-radius: var(--rad-karte);
}
.fakten__zahl {
  display: block;
  font-size: clamp(34px, 3.6vw, 46px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.024em;
  color: var(--orange);
}

.fakten__einheit {
  display: block; margin-top: 2px;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  color: var(--dunkel-text);
}

.fakten__wort {
  display: block; margin-top: 8px;
  font-size: 15px; line-height: 1.5; color: var(--dunkel-neben);
}

@media (min-width: 1400px) {
  .fakten {
    --fakten-breite: min(1360px, 100vw - 80px);
    width: var(--fakten-breite);
    margin-inline: calc((100% - var(--fakten-breite)) / 2);
  }
}
@media (max-width: 1399px) {
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .fakten__stueck:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .fakten { grid-template-columns: 1fr; }
  .fakten__stueck:last-child { grid-column: auto; }
  .fakten__stueck {
    display: grid; grid-template-columns: 118px minmax(0, 1fr);
    column-gap: 18px; align-items: center;
    padding: 18px 20px;
  }
  .fakten__zahl { font-size: 34px; }
  .fakten__wort { margin-top: 0; }
}

.fakten--dunkel { margin-bottom: var(--takt-gross); }
.fakten--dunkel .fakten__stueck {
  background: var(--anthrazit);
  border-color: transparent;
}

.cfolge--wort .cfolge__zeile {
  grid-template-columns: minmax(0, min(max-content, 200px)) minmax(0, 1fr);
  gap: 22px; padding: 14px 0;
}

@media (max-width: 900px) {
  .cfolge--wort .cfolge__zeile { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 0; }
}

.cfolge--wort .cfolge__zahl {
  font-size: clamp(17px, 1.35vw, 21px);
  font-variant-numeric: normal;
  letter-spacing: 0;
}

.abschnitt--bauplan { position: relative; overflow: clip; }
.abschnitt--bauplan > .innen { position: relative; z-index: 1; }

.bauplangrund--grau { background: rgba(28, 31, 36, .055); }

.bauplangrund {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  
  --bp-umgebung: transparent;
  --bp-blatt: transparent;
  --bp-linie: #FFFFFF;
  --bp-hilfe: #FFFFFF;
  --bp-schrift: #FFFFFF;
  --bp-signal: transparent;
  --bp-signal-kante: transparent;
  --bp-signal-schrift: transparent;
  
  --bp-frei: min(var(--container) - 2 * var(--rand), 76%);
  --bp-auslauf: clamp(2rem, 6vw, 7rem);
  -webkit-mask-image: linear-gradient(90deg,
    #000 0,
    #000 calc(50% - var(--bp-frei) / 2),
    transparent calc(50% - var(--bp-frei) / 2 + var(--bp-auslauf)),
    transparent calc(50% + var(--bp-frei) / 2 - var(--bp-auslauf)),
    #000 calc(50% + var(--bp-frei) / 2),
    #000 100%);
  mask-image: linear-gradient(90deg,
    #000 0,
    #000 calc(50% - var(--bp-frei) / 2),
    transparent calc(50% - var(--bp-frei) / 2 + var(--bp-auslauf)),
    transparent calc(50% + var(--bp-frei) / 2 - var(--bp-auslauf)),
    #000 calc(50% + var(--bp-frei) / 2),
    #000 100%);
}
.bauplangrund svg { width: 100%; height: 100%; display: block; }

.abschnitt--bauplan--voll > .bauplangrund {
  -webkit-mask-image: none;
  mask-image: none;
}

.tunnel {
  position: relative;
  height: 240vh;
  background: #000;
  
  --zoom: 1;
  --schwarz: 0;
}

.tunnel__buehne {
  position: sticky; top: 0;
  height: 100vh;
  display: grid; place-items: center;
  overflow: hidden;
}

.tunnel__fenster {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.tunnel__film {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--zoom));
  will-change: transform;
}

.tunnel__schwarz {
  position: absolute; inset: 0;
  background: #000;
  opacity: var(--schwarz);
  pointer-events: none;
}

.nach-tunnel-huelle {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  height: 170vh;
}

.nach-tunnel {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex; align-items: center;
  transform: translateY(var(--auf-y, 0px)) scale(var(--auf-s, 1));
  transform-origin: 50% 50%;
  opacity: var(--auf-o, 1);
  border-radius: calc(var(--rad-karte) * 1.6 * (1 - var(--auf-p, 1)));
  overflow: hidden;
  will-change: transform, opacity;
}

.nach-tunnel.faehrt { pointer-events: none; }

.nach-tunnel > .innen { width: 100%; }

.nach-tunnel.ist-da {
  transform: none;
  opacity: 1;
  border-radius: 0;
  overflow: visible;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tunnel { height: auto; padding-block: var(--abschnitt); }
  .tunnel__buehne { position: static; height: auto; }
  .tunnel__fenster { height: 240px; border-radius: var(--rad-karte); }
  .tunnel__schwarz { display: none; }

  .nach-tunnel-huelle { margin-top: 0; height: auto; }
  .nach-tunnel {
    position: static;
    min-height: 0;
    display: block;
    transform: none;
    opacity: 1;
    border-radius: 0;
    overflow: visible;
    will-change: auto;
  }

  .tunnel__fenster {
    background: #000 url("../video/tunnel-standbild.jpg") center / cover no-repeat;
  }
  .tunnel__film { display: none; }
}

@media (max-width: 700px) {
  .tunnel { height: 260vh; }

  .nach-tunnel-huelle { margin-top: 0; height: auto; }
  .nach-tunnel {
    position: static;
    min-height: 0;
    display: block;
    transform: none;
    opacity: 1;
    border-radius: 0;
    overflow: visible;
    will-change: auto;
  }
}

.karussell { display: none; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html[data-karussell="an"] .karussell { display: block; }
  html[data-karussell="an"] [data-rueckfall="ablauf-karussell"] { display: none; }
}

.karussell {
  position: relative;
  background: var(--anthrazit);
  color: var(--dunkel-text);
  --zeile: clamp(112px, 14.6vh, 158px);
  --schleier: .90;
  --nebel: .80;
}

.karussell__spur { position: relative; }

.karussell__buehne {
  position: sticky; top: var(--nav-hoehe);
  height: calc(100vh - var(--nav-hoehe));
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
}
@supports (height: 100svh) {
  .karussell__buehne { height: calc(100svh - var(--nav-hoehe)); }
}

.karussell__zeichnung {
  position: absolute; inset: 0; z-index: 0;
  
  --bp-umgebung: #23272E;
  --bp-blatt: #23272E; --bp-linie: #FFFFFF; --bp-hilfe: #B4BECC;
  --bp-schrift: #FFFFFF; --bp-signal: #FF6B00; --bp-signal-kante: #D95400;
  --bp-signal-schrift: #1C1F24;
  --bp-raster-ton: #3A424E;      
  --bp-stark: 1.7;               
  --bp-raster-deck: .15;
}
.karussell__zeichnung svg { display: block; width: 100%; height: 100%; }

.karussell__schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(64% 56% at 50% 50%,
      rgba(35, 39, 46, var(--schleier)) 0%,
      rgba(35, 39, 46, calc(var(--schleier) * .88)) 40%,
      rgba(35, 39, 46, calc(var(--schleier) * .42)) 68%,
      rgba(35, 39, 46, calc(var(--schleier) * .14)) 85%,
      rgba(35, 39, 46, calc(var(--schleier) * .02)) 100%),
    linear-gradient(180deg,
      rgba(35, 39, 46, .98) 0%, rgba(35, 39, 46, .92) 18%, rgba(35, 39, 46, 0) 34%,
      rgba(35, 39, 46, 0) 66%, rgba(35, 39, 46, .92) 82%, rgba(35, 39, 46, .98) 100%);
}

.karussell__nebelfeld { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.karussell__nebel {
  position: absolute; left: 50%; top: 50%;
  width: min(1180px, 100vw - 24px);
  height: calc(var(--zeile) * 1.66);
  transform: translate(-50%, -50%) translateY(var(--y, 0px)) scale(var(--s, 1));
  opacity: var(--o, 0);
  backdrop-filter: blur(22px) saturate(.82);
  -webkit-backdrop-filter: blur(22px) saturate(.82);
  background: rgba(35, 39, 46, var(--nebel));
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000 34%, rgba(0, 0, 0, .66) 64%, transparent 100%);
  mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000 34%, rgba(0, 0, 0, .66) 64%, transparent 100%);
  will-change: transform, opacity;
}

.karussell__zeichnung [data-ab] { opacity: 0; transition: opacity 620ms cubic-bezier(.25, .1, .25, 1); }
.karussell__zeichnung [data-ab].da { opacity: 1; }
.karussell__zeichnung [data-stufe] { opacity: 0; transition: opacity 520ms cubic-bezier(.25, .1, .25, 1); }
.karussell__zeichnung [data-anim="draw"] { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 780ms cubic-bezier(.25, .1, .25, 1); }
.karussell__zeichnung [data-stufe].an [data-anim="draw"] { stroke-dashoffset: 0; }
.karussell__zeichnung [data-stufe].an { opacity: 1; }

.karussell__zeichnung[data-erststand] [data-ab],
.karussell__zeichnung[data-erststand] [data-stufe],
.karussell__zeichnung[data-erststand] [data-anim="draw"] { transition: none; }

.karussell__zeichnung #bp-raster.an { opacity: var(--bp-raster-deck, .34); }
.karussell__zeichnung #bp-achsen.an,
.karussell__zeichnung #bp-bemassung.an,
.karussell__zeichnung #bp-beschriftung.an { opacity: 1; }

.karussell__zeichnung #bp-raster path { stroke: var(--bp-raster-ton); }
.karussell__zeichnung #bp-raster [data-anim="draw"] { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }

.karussell__zeichnung path[stroke="var(--bp-linie)"] { stroke-width: var(--bp-stark); }
.karussell__zeichnung #bp-achsen path[stroke="var(--bp-hilfe)"],
.karussell__zeichnung #bp-bemassung path[stroke="var(--bp-hilfe)"] { stroke-width: 1.15; }
.karussell__zeichnung #bp-beschriftung text,
.karussell__zeichnung #bp-achsen text { fill: var(--bp-schrift); }

.karussell__kopf {
  position: relative; z-index: 4; text-align: center;
  width: min(1180px, 100% - 48px); margin-inline: auto;
  padding-top: calc(var(--band-hoehe) + clamp(16px, 3vh, 40px));
}

.karussell__kopf h2 { color: var(--kalkweiss); font-size: clamp(26px, 3vw, 38px); line-height: 1.1; max-width: 22ch; margin-inline: auto; }
.karussell__kopf .rubrik { font-size: 13px; letter-spacing: .16em; margin-bottom: 12px; color: var(--orange); }
.karussell__unter { margin: 12px auto 0; color: var(--dunkel-neben); font-size: clamp(15px, 1.2vw, 18px); }

.karussell__rad {
  position: relative; z-index: 3;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.karussell__gleis { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.karussell__stufe {
  position: absolute; left: 50%; top: 50%;
  
  width: min(920px, 100vw - 96px);
  height: var(--zeile);
  display: grid;
  grid-template-columns: clamp(54px, 4.8vw, 70px) minmax(0, 1fr) auto;
  gap: 0 clamp(26px, 3.4vw, 54px);
  align-content: center; align-items: center;
  padding-inline: clamp(8px, 1.6vw, 28px);
  transform: translate(-50%, -50%) translateY(var(--y, 0px)) scale(var(--s, 1));
  opacity: var(--o, 0);
  will-change: transform, opacity;
}
.karussell__ziffer {
  display: grid; place-items: center; justify-self: start;
  width: clamp(48px, 4vw, 62px); height: clamp(48px, 4vw, 62px); border-radius: 50%;
  font-weight: 700; font-size: clamp(18px, 1.55vw, 23px); font-variant-numeric: tabular-nums;
  background: rgba(247, 245, 242, .12); color: #9AA0AA;
  transition: background 340ms linear, color 340ms linear;
}
.karussell__stufe.ist-aktiv .karussell__ziffer { background: var(--orange); color: var(--russ); }
.karussell__wort { min-width: 0; }
.karussell__wort b {
  display: block; font-weight: 600; letter-spacing: -.016em;
  font-size: clamp(23px, 2.9vw, 40px); line-height: 1.12; color: #8E939C;
  transition: color 340ms linear;
}
.karussell__stufe.ist-aktiv .karussell__wort b { color: var(--kalkweiss); }
.karussell__satz {
  display: block; margin-top: 10px; max-width: 56ch;
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: #D6DAE0;
  opacity: var(--on, 0);
}
.karussell__zeit {
  justify-self: end; white-space: nowrap; font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 600; color: #6E747E; transition: color 340ms linear;
}
.karussell__stufe.ist-aktiv .karussell__zeit { color: var(--orange); }

.karussell__fussteil {
  position: relative; z-index: 4; text-align: center;
  width: min(960px, 100% - 48px); margin-inline: auto;
  padding-bottom: clamp(20px, 3.8vh, 50px);
}
.karussell__aufwand {
  margin: 0 auto 14px; max-width: 64ch;
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--dunkel-neben);
}
.karussell__aufwand b { color: var(--kalkweiss); font-weight: 600; }
.karussell__fussteil .textlink { color: var(--dunkel-text); }

.karussell__punkte {
  position: absolute; z-index: 5; right: clamp(12px, 2.4vw, 36px); top: 50%;
  transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px;
}
.karussell__punkt { appearance: none; background: none; border: 0; padding: 6px; cursor: pointer; display: grid; place-items: center; }
.karussell__punkt span {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(247, 245, 242, .32);
  transition: background 300ms linear, transform 300ms cubic-bezier(.25, .1, .25, 1);
}
.karussell__punkt.aktiv span { background: var(--orange); transform: scale(1.7); }
.karussell__punkt:focus-visible { outline: 2px solid var(--orange); border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  
  .band { height: auto; padding: 10px 0; }
  
  .band::before, .band::after { display: none; }
  .band__lauf { animation: none; flex-wrap: wrap; justify-content: center; }
  .band__lauf .band__satz:last-child { display: none; }
  .band__satz { flex-wrap: wrap; justify-content: center; }
  .band__satz li { padding: 4px 0; }
  .band__satz li:last-child::after { display: none; }
  .kopf[data-weg="ja"] { transform: none; }
}

html[data-kino] .kopf { position: fixed; top: 0; left: 0; right: 0; }

html[data-kino] [data-kino-buehne] { min-height: 100vh; }
@supports (height: 100svh) { html[data-kino] [data-kino-buehne] { min-height: 100svh; } }

html[data-kino] { scroll-padding-top: calc(var(--nav-hoehe) + 12px); }

html[data-kino="an"] .kopf,
html[data-kino="frei"] .kopf { transform: translateY(-100%); visibility: hidden; }

html[data-kino="an"] .hero h1,
html[data-kino="an"] .hero__lead,
html[data-kino="an"] .hero__innen .knopf,
html[data-kino="an"] .hero__zusagen,
html[data-kino="an"] .hero__hinweis { opacity: 0; }

@keyframes kino-ein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

html[data-kino="frei"] .hero h1           { animation: kino-ein 560ms   0ms backwards cubic-bezier(.22, .61, .36, 1); }
html[data-kino="frei"] .hero__lead        { animation: kino-ein 560ms 280ms backwards cubic-bezier(.22, .61, .36, 1); }
html[data-kino="frei"] .hero__innen .knopf { animation: kino-ein 560ms 560ms backwards cubic-bezier(.22, .61, .36, 1); }

html[data-kino="frei"] .hero__zusagen      { animation: kino-ein 560ms 840ms backwards cubic-bezier(.22, .61, .36, 1); }
html[data-kino="frei"] .hero__hinweis      { animation: kino-ein 560ms 1240ms backwards cubic-bezier(.22, .61, .36, 1); }

.hero__marke {
  position: absolute; z-index: 2;
  left: var(--rand); top: 0;
  height: calc(var(--band-hoehe) + var(--nav-hoehe));
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  pointer-events: none;
}
html[data-kino] .hero__marke { transition: opacity 380ms linear, visibility 0s linear 380ms; }
html[data-kino="an"] .hero__marke,
html[data-kino="frei"] .hero__marke { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero__marke svg { width: 190px; height: auto; display: block; }
@media (max-width: 900px) {
  
  .hero__marke svg { width: 150px; }
}

.hero__hinweis { display: none; }
html[data-kino="an"] .hero__hinweis,
html[data-kino="frei"] .hero__hinweis {
  display: flex; justify-content: center;
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: clamp(16px, 3.4vh, 38px);
  pointer-events: none;
}
.hero__hinweis span {
  display: block; width: 13px; height: 13px;
  border-right: 2px solid var(--dunkel-text);
  border-bottom: 2px solid var(--dunkel-text);
  opacity: .8;
  
  transform: rotate(45deg);
  animation: kino-schweben 2600ms ease-in-out infinite;
}
@keyframes kino-schweben {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(5px, 5px); }
}

@media (prefers-reduced-motion: reduce) {
  
  .hero__hinweis span { animation: none; }
}

.regler {
  display: grid;
  grid-template-columns: clamp(200px, 26%, 320px) minmax(0, 1fr);
  
  column-gap: clamp(24px, 3vw, 40px);
  row-gap: 14px;
  align-items: start; margin-top: 20px;
}

.regler > .probe { grid-column: 1 / -1; order: 2; }
.regler__haelfte { min-width: 0; }

@media (max-width: 900px) { .regler { grid-template-columns: 1fr; } }

.regler__geraet {
  width: 100%; max-width: 462px; margin-inline: auto;
  --massstab: 1;
}

.regler__vorspann > p { max-width: 62ch; }

[data-vorspann="oben"] .regler__vorspann {
  grid-column: 1 / -1; order: -1;
  
  margin: 0 auto 26px;
  max-width: 74ch;
}
[data-vorspann="oben"] .regler__vorspann > p { max-width: none; }

[data-vorspann="unter"] .regler { grid-template-rows: auto auto; }
[data-vorspann="unter"] .regler__haelfte:not(.regler__haelfte--liste) { grid-column: 1; grid-row: 1; }
[data-vorspann="unter"] .regler__vorspann { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--takt-gross); }
[data-vorspann="unter"] .regler__haelfte--liste { grid-column: 2; grid-row: 1 / span 2; }
[data-vorspann="unter"] .regler__vorspann > p { max-width: none; font-size: 16px; }

[data-vorspann="neben"] .regler__haelfte:not(.regler__haelfte--liste) { grid-column: 1; grid-row: 1 / span 2; }
[data-vorspann="neben"] .regler__vorspann { grid-column: 2; grid-row: 1; margin-bottom: var(--takt-klein); }
[data-vorspann="neben"] .regler__haelfte--liste { grid-column: 2; grid-row: 2; }

@media (max-width: 900px) {
  .regler__vorspann { grid-column: 1 !important; order: -1 !important; margin: 0 0 var(--takt-klein) !important; }
}
.regler__vorspann > p + p { margin-top: var(--takt-klein); }

.regler__ueber {
  grid-column: 2; order: -2;
  
  margin: 0; text-align: center;
}

.regler__spaltenkopf {
  grid-column: 1 / -1; order: -1;
  display: grid;
  grid-template-columns: clamp(200px, 26%, 320px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--riss);
  
  margin-bottom: 26px;
}
.regler__spaltenkopf__woerter {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(16px, 3vw, 40px);
}
.regler__spaltenkopf__woerter span {
  
  font-size: 14px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--beton);
  
  text-align: center; margin-right: -.16em;
}
.regler__spaltenkopf__woerter span:first-child { color: var(--russ); }

@media (max-width: 900px) {
  .regler__spaltenkopf { display: none; }
  
  .regler__ueber { grid-column: 1; }
}

[data-vorspann="oben"] .regler__vorspann { order: -3; }

[data-vorspann="unter"] .regler__ueber,
[data-vorspann="neben"] .regler__ueber { grid-row: 1; }
[data-vorspann="unter"] .regler { grid-template-rows: auto auto auto; }
[data-vorspann="unter"] .regler__haelfte:not(.regler__haelfte--liste) { grid-row: 2; }
[data-vorspann="unter"] .regler__vorspann { grid-row: 3; }
[data-vorspann="unter"] .regler__haelfte--liste { grid-row: 2 / span 2; }
[data-vorspann="neben"] .regler__haelfte:not(.regler__haelfte--liste) { grid-row: 2 / span 2; }
[data-vorspann="neben"] .regler__vorspann { grid-row: 2; }
[data-vorspann="neben"] .regler__haelfte--liste { grid-row: 3; }

.regler__haelfte--liste .gegen { margin-top: 0; border-top: 0; }

.regler__buehne {
  width: 462px; height: 978px;
  transform: scale(var(--massstab));
  transform-origin: top left;
  
  margin-left: max(0px, calc((100% - 462px * var(--massstab)) / 2));
  margin-bottom: calc((var(--massstab) - 1) * 978px);
}

.regler__handy {
  position: relative; width: 462px; height: 978px;
  border: 11px solid var(--anthrazit); border-radius: 60px; overflow: hidden;
  background: var(--papier);
  box-shadow: 0 24px 60px -28px rgba(35, 39, 46, .55);
}

.regler__ebene { position: absolute; inset: 0; overflow: hidden; }
.regler__ebene iframe { border: 0; display: block; }
.regler__ebene--alt iframe { width: 1300px; height: 2824px; zoom: .3385; }
.regler__ebene--neu { clip-path: inset(0 50% 0 0); }
.regler__ebene--neu iframe { width: 440px; height: 956px; }

.regler__kachel {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 126px; height: 37px; border-radius: 999px; background: var(--anthrazit);
  z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 13px;
}
.regler__kachel i { width: 9px; height: 9px; border-radius: 999px; background: #3C434D; display: block; }

.regler__kante {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--orange);
  left: 50%; z-index: 4; pointer-events: none;
}

.regler__griff {
  position: absolute; top: 50%; left: 50%; z-index: 6;
  width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 999px;
  background: var(--orange); border: 1px solid var(--orange-kante); cursor: ew-resize;
  box-shadow: 0 8px 22px -6px rgba(255, 107, 0, .85); touch-action: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--text); font-weight: 700; font-size: 17px;
  color: var(--russ); letter-spacing: .08em; padding: 0;
}
.regler__griff::before { content: ""; position: absolute; inset: -12px; border-radius: 999px; }
.regler__griff:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 3px; }

.regler__marken { display: flex; justify-content: space-between; width: 100%; margin: 14px auto 0; }

.regler__marken span {
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--beton);
}

@media (max-width: 500px) { .regler__geraet { --massstab: .90; } }
@media (max-width: 460px) { .regler__geraet { --massstab: .82; } }
@media (max-width: 420px) { .regler__geraet { --massstab: .73; } }
@media (max-width: 380px) { .regler__geraet { --massstab: .64; } }
@media (max-width: 340px) { .regler__geraet { --massstab: .55; } }

.gegen { margin-top: 40px; border-top: 1px solid var(--riss); }

.gegen__kopf, .gegen__zeile {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(16px, 3vw, 40px);
  padding: 14px 0; border-bottom: 1px solid var(--riss);
}
.gegen__kopf { padding-block: 8px; }

.gegen__kopf span {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--beton);
  text-align: center; margin-right: -.16em;
}
.gegen__kopf span:first-child { color: var(--russ); }

.gegen__sache {
  
  grid-column: 1 / -1; line-height: 1.2;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--beton);
  
  text-align: center; margin-right: -.12em;
}
.gegen__zeile p { margin: 0; max-width: none; font-size: 16px; line-height: 1.5; }

.gegen__zeile .gegen__sache { margin-bottom: 12px; }
.gegen__gut { color: var(--russ); font-weight: 600; }
.gegen__schlecht { color: var(--beton); }

@media (max-width: 640px) {
  .gegen__kopf { display: none; }
  .gegen__zeile { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  
  .gegen__sache { text-align: left; margin-right: 0; }
  .gegen__gut::before, .gegen__schlecht::before {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--beton); margin-bottom: 3px;
  }
  .gegen__gut::before { content: "Fürs Handy gebaut"; }
  .gegen__schlecht::before { content: "Ohne Anpassung"; }
}

.probe {
  margin-top: 28px; padding: 22px 24px;
  background: var(--papier); border: 1px solid var(--riss); border-radius: 18px;
}
.probe p { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--beton); }
.probe__titel { font-size: 18px; font-weight: 700; color: var(--russ); margin-bottom: 8px; }

.probe--qr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
  border-top: 1px solid var(--riss);
  
  padding-top: 24px;
  margin-top: var(--takt-gross);
}
.probe--schalter { border-top: 1px solid var(--riss); padding-top: var(--takt-gross); margin-top: var(--takt-gross); }

.regler > .probe p { max-width: 68ch; }

.probe__klappe { min-width: 0; }
.probe__schalter {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--beton);
  padding: 8px 0;
}
.probe__schalter::-webkit-details-marker { display: none; }
.probe__schalter::before {
  content: "▸"; font-size: 13px; line-height: 1;
  transition: transform 180ms ease;
}
.probe__klappe[open] .probe__schalter::before { transform: rotate(90deg); }
.probe__schalter:hover { color: var(--russ); }
.probe__klappe[open] .probe__platzhalter { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .probe__schalter::before { transition: none; } }

.probe__qr {
  flex: 0 0 auto; display: block;
  width: auto; height: 100%; min-height: 132px; aspect-ratio: 1;
  border: 1px solid var(--riss); border-radius: 8px;
  background: var(--papier); padding: 6px;
}

@media (max-width: 900px) {
  .probe__qr { width: 148px; height: 148px; }
}

.probe__platzhalter {
  flex: 0 0 auto; width: 148px; height: 148px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 8px;
  border: 2px dashed var(--riss); border-radius: 8px; background: var(--kalkweiss);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--beton);
  text-transform: uppercase; line-height: 1.3;
}

.probe__platzhalter span:last-child { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: none; }

.probe__hinweis {
  margin-top: 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; color: var(--beton);
}
.probe__text { min-width: 0; }

@media (max-width: 900px) { .probe--qr { grid-template-columns: 1fr; } }

.probe__knopf { margin-top: 18px; }
.probe--schalter[hidden] { display: none; }

.regler[data-probe-modus] .probe--qr { display: none; }
.regler[data-probe-modus="schalter"] .regler__geraet { display: none; }

.zurueck {
  position: fixed; top: 0; left: 50%; z-index: 9999;
  transform: translate(-50%, -100%); transform-origin: 50% 100%;
  background: var(--orange); border: 1px solid var(--orange-kante);
  color: var(--russ); font-family: var(--text); font-weight: 700;
  font-size: 16px; line-height: 1; padding: 15px 26px; border-radius: 999px;
  cursor: pointer; box-shadow: 0 12px 30px -8px rgba(28, 31, 36, .55);
  
  width: max-content; max-width: calc(100vw - 24px);
}
.zurueck:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 3px; }

.zurueck[data-zustand="an"] {
  background: var(--papier);
  border-color: var(--anthrazit);
  color: var(--russ);
  font-weight: 600;
  box-shadow: 0 10px 26px -10px rgba(28, 31, 36, .45);
}

.hardfakt {
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 861px) {
  .hardfakt { grid-template-columns: minmax(0, 1fr); }
}
.hardfakt__bild { margin: 0; }
.hardfakt__bild img {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
}

.hardfakt__platz {
  aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 24px; text-align: center;
  background: var(--staub); border: 2px dashed var(--riss); border-radius: 14px;
  color: var(--beton);
}
.hardfakt__platz p {
  margin: 0; max-width: none;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.hardfakt__platz .neben { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }

.kette { list-style: none; margin: 0; padding: var(--takt-gross) 0 0; }
.kette__glied { position: relative; padding-left: 78px; padding-bottom: 36px; }
.kette__glied:last-child { padding-bottom: 0; }

.kette__glied::before {
  content: ""; position: absolute; left: 25px; top: 62px; bottom: 6px;
  width: 2px; background: var(--riss);
}
.kette__glied:last-child::before { display: none; }

.grund--staub .kette__glied::before { background: var(--anthrazit); opacity: .1; }

.kette__ziffer {
  position: absolute; left: 0; top: 0; margin: 0; max-width: none;
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--anthrazit); color: var(--kalkweiss);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; letter-spacing: .04em;
}
.kette__glied h3 { padding-top: 13px; }

.kette__klappe { display: block; }
.kette__kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 20px; align-items: center;
  padding: 13px 0;
  cursor: pointer; list-style: none;
}
.kette__kopf::-webkit-details-marker { display: none; }
.kette__kopf::after {
  content: "+"; justify-self: end;
  font-size: 26px; font-weight: 400; line-height: 1; color: var(--beton);
  transition: color 160ms ease;
}
.kette__klappe[open] .kette__kopf::after { content: "\2013"; }
.kette__klappe:hover .kette__kopf::after,
.kette__kopf:focus-visible::after { color: var(--russ); }
.kette__kopf:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 4px; }

.kette__kopf h3 { padding-top: 0; margin: 0; }
.kette__inhalt { padding-bottom: 6px; }

.kette__kopf { padding: 18px 0; }
.kette__glied { padding-bottom: 26px; }
.kette__glied:has(.kette__klappe[open]) { padding-bottom: 40px; }
.kette__glied::before { top: 62px; }

.kette__quelle {
  
  margin: var(--takt-klein) 0 0; max-width: none; text-align: right;
  font-size: 13px; line-height: 1.4;
}
.kette__quelle a {
  color: var(--beton); text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-block: 4px; margin-block: -4px;
}
.kette__quelle a:hover { color: var(--russ); }

.kette__abbinder { margin-inline: auto; text-align: center; text-wrap: balance; }

.kette__probe {
  margin-top: var(--takt-gross);
  padding: 14px 18px;
  background: var(--papier);
  border: 1px solid var(--riss);
  border-radius: var(--rad-karte);
}
.kette__probe > p { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.55; color: var(--russ); }
.kette__probe > p + p { margin-top: 6px; }
.kette__probe__marke {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--beton);
}

@media (max-width: 640px) { .kette__probe { padding: 12px 14px; } }

@media (max-width: 640px) {
  .kette__glied { padding-left: 58px; padding-bottom: 30px; }
  .kette__ziffer { width: 42px; height: 42px; font-size: 15px; }
  .kette__glied::before { left: 20px; top: 50px; }
  .kette__glied h3 { padding-top: 8px; }
}

.kkar, .kkar__text, .kkar__liste { display: contents; }
.kkar__zaehler, .kkar__feld, .kkar__steuer { display: none; }

@media (min-width: 901px) {
  .kkar .leistungen { gap: 0; }
  .kkar .leistung {
    grid-template-columns: 196px minmax(0, 1fr);
    column-gap: 30px; align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--riss);
  }
  .kkar .leistung:first-child { border-top: 1px solid var(--riss); }
  
  .kkar .leistung__nr {
    display: flex; align-items: center; justify-content: center;
    width: auto; min-height: 68px; padding: 12px 14px;
    align-self: center;
    font-size: clamp(20px, 2vw, 28px); line-height: 1.1; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
  }
}

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {

  html[data-kkar="an"] .kkar {
    --kkar-radius: 268px;
    --kkar-karte: 172px;
    
    --kkar-schritt: calc(360deg / var(--kkar-plaetze, 7));
  }

  html[data-kkar="an"] .kkar {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: center; gap: 34px;
    
    margin-top: calc(var(--abschnitt) * 2);
  }

  html[data-kkar="an"] .kkar__text {
    display: block; min-height: 430px;
    display: flex; flex-direction: column; justify-content: center;
  }
  html[data-kkar="an"] .kkar__zaehler {
    display: block; margin: 0 0 12px; max-width: none;
    font-size: 13px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--beton);
    font-variant-numeric: tabular-nums;
  }
  html[data-kkar="an"] .kkar__zaehler b { color: var(--russ); }

  html[data-kkar="an"] .kkar .leistungen { display: block; gap: 0; margin: 0; }
  html[data-kkar="an"] .kkar .leistung {
    display: none; grid-template-columns: minmax(0, 1fr);
    padding: 0; border: 0; margin: 0;
  }
  html[data-kkar="an"] .kkar .leistung[data-kkar-offen] { display: block; }
  
  html[data-kkar="an"] .kkar .leistung__nr { display: none; }
  html[data-kkar="an"] .kkar .leistung h3 {
    margin: 0 0 14px; font-size: clamp(24px, 2.3vw, 31px); line-height: 1.22;
  }
  html[data-kkar="an"] .kkar .leistung__text p { font-size: 17px; line-height: 1.6; }

  html[data-kkar="an"] .kkar__steuer { display: flex; gap: 12px; margin-top: 30px; }
  .kkar__pfeil {
    appearance: none; -webkit-appearance: none;
    width: 48px; height: 48px; padding: 0;
    display: grid; place-items: center;
    background: var(--papier); color: var(--russ);
    border: 1px solid var(--riss); border-radius: var(--rad-knopf);
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  }
  .kkar__pfeil:hover {
    border-color: var(--anthrazit); transform: translateY(-2px);
    box-shadow: 0 12px 22px -14px rgba(28, 31, 36, .55);
  }
  .kkar__pfeil:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 2px; }

  html[data-kkar="an"] .kkar__feld {
    display: grid; place-items: center;
    position: relative; justify-self: center;
    width: calc(var(--kkar-radius) * 2 + var(--kkar-karte));
    height: calc(var(--kkar-radius) * 2 + 110px);
  }
  
  .kkar__linie {
    position: absolute;
    width: calc(var(--kkar-radius) * 2); height: calc(var(--kkar-radius) * 2);
    border-radius: 50%; border: 1px solid #C4BDB3;
  }
  
  .kkar__marke {
    position: absolute; top: 50%;
    left: calc(50% - var(--kkar-radius) - var(--kkar-karte) / 2 - 22px);
    width: 30px; height: 1px; background: var(--riss);
  }

  .kkar__ring {
    position: absolute; width: 0; height: 0;
    transform: rotate(calc(var(--kkar-stand, 0) * var(--kkar-schritt) * -1));
    transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
  }
  .kkar__platz {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    transform: rotate(calc(-90deg + var(--i) * var(--kkar-schritt)))
               translateY(calc(var(--kkar-radius) * -1));
  }
  .kkar__karte {
    position: absolute;
    left: calc(var(--kkar-karte) / -2); top: -41px;
    width: var(--kkar-karte); min-height: 82px;
    display: grid; grid-template-columns: 38px minmax(0, 1fr);
    align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--papier); border: 1px solid var(--riss);
    border-radius: var(--rad-karte);
    text-align: left; cursor: pointer; appearance: none;
    font: inherit; color: inherit;
    transform: rotate(calc(90deg - var(--i) * var(--kkar-schritt)
                           + var(--kkar-stand, 0) * var(--kkar-schritt)));
    transition: transform 620ms cubic-bezier(.22, .61, .36, 1),
                background 300ms ease, border-color 300ms ease,
                scale 300ms ease, box-shadow 300ms ease;
  }
  
  .kkar__karte {
    scroll-margin-top: calc(var(--nav-hoehe) + 24px);
    scroll-margin-bottom: 24px;
  }
  .kkar__karte:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 3px; }
  .kkar__karte:not([data-kkar-aktiv]):hover { border-color: var(--anthrazit); }

  .kkar__nr {
    display: grid; place-items: center;
    width: 38px; height: 36px; border-radius: 10px;
    background: var(--anthrazit); color: var(--orange);
    font-size: 16px; font-weight: 700; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
  }
  .kkar__name { font-size: 12.5px; line-height: 1.3; font-weight: 600; }

  .kkar__karte[data-kkar-aktiv] {
    background: var(--anthrazit); border-color: var(--anthrazit);
    scale: 1.2; z-index: 2;
    box-shadow: 0 18px 34px -18px rgba(28, 31, 36, .55);
  }
  .kkar__karte[data-kkar-aktiv] .kkar__name { color: var(--kalkweiss); }
  .kkar__karte[data-kkar-aktiv] .kkar__nr { background: var(--orange); color: var(--russ); }
}

.wisch-wort { display: none; }
.wisch-nav  { display: none; }

@media (max-width: 900px) {

  [data-wischen] {
    --wisch-anschnitt: 14%;    
    --wisch-abstand: 18px;

    display: flex; flex-wrap: nowrap; align-items: stretch;
    gap: var(--wisch-abstand);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
    scroll-padding-inline: var(--rand);

    padding-block: 6px;

    scrollbar-width: none;
  }
  [data-wischen]::-webkit-scrollbar { display: none; }

  [data-wischen] > * {
    flex: 0 0 calc(100% - var(--wisch-anschnitt) - var(--wisch-abstand));
    scroll-snap-align: start;
    
    scroll-snap-stop: always;
  }

  .ablauf[data-wischen] { border-top: 0; }
  
  .ablauf[data-wischen] > .ablauf__schritt {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px 0;
    
    align-content: start;
    padding: 20px;
    border: 1px solid rgba(247, 245, 242, .14);
    border-radius: var(--rad-karte);
  }
  
  .ablauf[data-wischen] > .ablauf__schritt > .ablauf__nr,
  .ablauf[data-wischen] > .ablauf__schritt h3,
  .ablauf[data-wischen] > .ablauf__schritt .ablauf__zeit,
  .ablauf[data-wischen] > .ablauf__schritt p { grid-column: 1; grid-row: auto; }
  .ablauf[data-wischen] > .ablauf__schritt p + p { margin-top: 0; }

  .leistungen[data-wischen] > .leistung {
    grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-content: start;
    background: var(--papier); border: 1px solid var(--riss);
    border-radius: var(--rad-karte); padding: 24px 22px 26px;
  }

  .wisch-wort { display: block; text-align: right; margin: 30px 0 12px; }
  .wisch-wort svg { vertical-align: -1px; margin-left: 2px; }
  
  .wisch-wort + [data-wischen] { margin-top: 14px; }

  .wisch-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-top: 16px;
  }
  .wisch-punkte { display: flex; }
  
  .wisch-punkt {
    appearance: none; background: none; border: 0; cursor: pointer;
    padding: 11px 9px; display: grid; place-items: center;
  }
  .wisch-punkt span {
    display: block; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(28, 31, 36, .24);
    transition: background 300ms linear, transform 300ms cubic-bezier(.25, .1, .25, 1);
  }
  
  .wisch-punkt[aria-current="true"] span { background: var(--russ); transform: scale(1.7); }
  .grund--dunkel .wisch-punkt span { background: rgba(247, 245, 242, .32); }
  .grund--dunkel .wisch-punkt[aria-current="true"] span { background: var(--orange); }

  .wisch-zaehler {
    font-size: 14px; font-weight: 600; color: var(--beton);
    font-variant-numeric: tabular-nums; letter-spacing: .06em;
  }
  .grund--dunkel .wisch-zaehler { color: var(--dunkel-matt); }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  [data-wischen] { scroll-behavior: auto; }
  .wisch-punkt span { transition: none; }
}

.masslinie {
  position: fixed;
  left: var(--mass-abstand);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;                 
  height: var(--mass-hoehe);
  width: var(--mass-breite);
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms ease;
  font-family: var(--text);
}
.masslinie[data-da="ja"] { opacity: 1; }

.masslinie[data-kino="ja"] { opacity: 0; }

:root {
  --mass-abstand: 26px;
  --mass-breite: 52px;
  
  --mass-hoehe: min(322px, 37vh);
  --mass-strich: 14px;         
  --mass-strich-an: 30px;      
}

.masslinie__schiene {
  position: absolute; inset: 0 auto 0 0;
  width: 2px;
  background: var(--mass-linie);
}

.masslinie__schiene::before,
.masslinie__schiene::after {
  content: ""; position: absolute; left: 0;
  width: var(--mass-strich); height: 2px;
  background: var(--mass-linie);
}
.masslinie__schiene::before { top: 0; }
.masslinie__schiene::after  { bottom: 0; }

.masslinie__fuell {
  position: absolute; left: 0; top: 0;
  width: 2px;
  height: var(--fuell, 0%);
  background: var(--mass-linie-an);
  transition: height 460ms cubic-bezier(.25, .1, .25, 1);
}

.masslinie__marke {
  position: absolute; left: 0;
  top: var(--pos);
  display: block;
  height: 2px;
}
.masslinie__strich {
  position: absolute; left: 0; top: 0;
  display: block; height: 2px;
  width: var(--mass-strich);
  background: var(--mass-linie);
  transition: width 380ms cubic-bezier(.25, .1, .25, 1), background 380ms ease;
}
.masslinie__marke[data-an="ja"] .masslinie__strich {
  width: var(--mass-strich-an);
  background: var(--mass-linie-an);
}

.masslinie__name {
  position: absolute;
  left: calc(var(--mass-strich-an) + 10px);
  top: 50%;
  max-height: 100%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-size: 14px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mass-schrift);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(.25, .1, .25, 1);
}

.masslinie__name[data-neu="ja"] {
  opacity: 0;
  transform: translateY(calc(-50% + 8px)) rotate(180deg);
}

.masslinie__zahl {
  position: absolute; left: 0; bottom: -34px;
  font-size: 15px; font-weight: 700; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--mass-schrift);
}

.masslinie__zahl em { font-style: normal; font-weight: 500; opacity: .5; }

.masslinie {
  --mass-linie: var(--riss);
  --mass-linie-an: var(--beton);
  --mass-schrift: var(--beton);
}
.masslinie[data-grund="dunkel"] {
  --mass-linie: rgba(255, 255, 255, .24);
  --mass-linie-an: #FFFFFF;
  --mass-schrift: rgba(255, 255, 255, .82);
}

@media (prefers-reduced-motion: reduce) {
  .masslinie,
  .masslinie__fuell,
  .masslinie__strich,
  .masslinie__name { transition: none; }
}

@media (max-width: 1199px) {
  .masslinie { display: none; }
}

.text-mittig {
  text-align: center;
  text-wrap: balance;
  max-width: 760px;
  margin-inline: auto;
}

.block-mittig { max-width: 760px; margin-inline: auto; }

h1.text-mittig, h2.text-mittig, h3.text-mittig { max-width: none; }

.karte__kopf { display: block; list-style: none; }
.karte__kopf::-webkit-details-marker { display: none; }
.karte--handyklapp .karte__mehr { margin: 0; }

@media (min-width: 641px) {
  
  .karte--handyklapp::details-content { content-visibility: visible; block-size: auto; }
  
  .karte--handyklapp .karte__mehr { display: none; }
  .klapp-wort--schmal { display: none; }
}

@media (max-width: 640px) {
  .karte--handyklapp > .karte__kopf { cursor: pointer; }
  .karte--handyklapp > .karte__kopf:focus-visible {
    outline: 3px solid var(--anthrazit); outline-offset: 2px; border-radius: 8px;
  }
  
  .karte--handyklapp h3 a { pointer-events: none; }
  .karte--handyklapp h3 a::after { content: none; }
  .karte--handyklapp .karte__mehr { margin-top: 16px; }
  
  .karte--handyklapp:not([open]) { padding-bottom: 22px; }
}

.karten--eine { grid-template-columns: minmax(0, 1fr); align-items: start; }

.karte--klapp > p { padding-bottom: 0; }
.karte--klapp > p + p { margin-top: 14px; }
.karte--klapp > p:last-of-type { padding-bottom: 24px; }

.klapp-wort--breit { display: flex; }
@media (max-width: 900px) {
  .klapp-wort--breit { display: none; }
}

@media (max-width: 900px) {
  
  .ablauf[data-wischen] .ablauf__klappe::details-content {
    content-visibility: visible; block-size: auto;
  }
  
  .ablauf[data-wischen] .ablauf__kopf { cursor: default; pointer-events: none; }
  .ablauf[data-wischen] .ablauf__kopf::after { content: none; }
  
  .ablauf[data-wischen] .ablauf__kopf {
    grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; align-items: center;
  }
  .ablauf[data-wischen] .ablauf__kopf h3 { grid-column: 2; grid-row: 1; }
  .ablauf[data-wischen] .ablauf__kopf .ablauf__zeit { grid-column: 1 / -1; grid-row: 2; }
  .ablauf[data-wischen] .ablauf__mehr { margin-top: 12px; }
  
  .ablauf[data-wischen] { align-items: flex-start; }
}

.ablauf__mehr .ablauf__knopfzeile { margin-top: 36px; }

.cta-satz { font-size: 16px; line-height: 1.55; max-width: 80ch; }

@media (max-width: 640px) {
  .kopfbild__innen { padding-block: 30px; }
  .kopfbild h1 { font-size: clamp(28px, 7.6vw, 36px); max-width: 16ch; }
  .kopfbild .lead { font-size: 17px; }
  .kopfbild .kopfbild__satz { font-size: 15px; }
}

@media (max-width: 700px) {
  .tunnel { display: none; }
}

@media (max-width: 640px) {
  .karte--handyklapp:hover,
  .karte--handyklapp:focus-within,
  .karte--handyklapp[open] {
    background: var(--papier);
    border-color: var(--riss);
    transform: none;
  }
  .karte--handyklapp:hover h3,
  .karte--handyklapp:focus-within h3,
  .karte--handyklapp[open] h3 { color: var(--russ); }
  .karte--handyklapp:hover p,
  .karte--handyklapp:focus-within p,
  .karte--handyklapp[open] p { color: var(--beton); }
  .karte--handyklapp:hover .karte__ziffer,
  .karte--handyklapp:focus-within .karte__ziffer,
  .karte--handyklapp[open] .karte__ziffer {
    background: var(--anthrazit); color: var(--orange);
  }
  .karte--handyklapp:hover::before,
  .karte--handyklapp:focus-within::before,
  .karte--handyklapp[open]::before { background: var(--riss); }

  .karte__mehr a {
    color: var(--russ);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}

@media (max-width: 640px) {
  .leistung.karte--handyklapp { display: block; }
  .leistung.karte--handyklapp .leistung__text { padding-bottom: 4px; }
  .leistung.karte--handyklapp .leistung__text p { font-size: 16px; line-height: 1.6; color: var(--beton); }
  .leistung.karte--handyklapp .leistung__text p + p { margin-top: 12px; }
  
  .leistung.karte--handyklapp::before { display: none; }
  .leistung.karte--handyklapp .karte__ziffer { margin-bottom: 0; }
  .leistung.karte--handyklapp .karte__kopf h3 {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: 14px;
    font-size: 19px; line-height: 1.35;
  }
  .leistung.karte--handyklapp[open] .karte__kopf { margin-bottom: 16px; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .leistung.karte--handyklapp .karte__kopf { pointer-events: none; }
  .leistung.karte--handyklapp .karte__kopf h3 {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: 14px;
    margin-bottom: 14px;
  }
  .leistung.karte--handyklapp::before { display: none; }
  .leistung.karte--handyklapp .karte__ziffer { margin-bottom: 0; }
  .leistung.karte--handyklapp .leistung__text p { color: var(--beton); line-height: 1.65; }
  .leistung.karte--handyklapp .leistung__text p + p { margin-top: 12px; }
}

@media (min-width: 901px) {
  
  .leistung.karte--handyklapp {
    display: grid;
    background: none;
    box-shadow: none;
    transform: none;
    border-radius: 0;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--riss);
    padding: 18px 0;
  }
  .leistung.karte--handyklapp:first-child { border-top-width: 1px; }
  .leistung.karte--handyklapp::before { display: none; }

  .leistung.karte--handyklapp > .karte__kopf { display: contents; }
  .leistung.karte--handyklapp > .karte__kopf > h3 { display: contents; }

  .leistung.karte--handyklapp .karte__ziffer { grid-column: 1; grid-row: 1 / span 2; }
  .leistung.karte--handyklapp .karte__wort { grid-column: 2; grid-row: 1; margin-bottom: 10px; }
  .leistung.karte--handyklapp .leistung__text { grid-column: 2; grid-row: 2; }

  .leistung.karte--handyklapp .karte__wort {
    font-family: var(--anzeige); font-weight: 700; letter-spacing: -.024em;
    font-size: 20px; line-height: 1.3; color: var(--russ);
  }
  .leistung.karte--handyklapp .leistung__text p { color: var(--beton); line-height: 1.65; }
  .leistung.karte--handyklapp .leistung__text p + p { margin-top: 12px; }

  .leistung.karte--handyklapp > .karte__kopf { cursor: default; pointer-events: none; }
}

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  html[data-kkar="an"] .kkar .leistung.karte--handyklapp { display: none; }
  html[data-kkar="an"] .kkar .leistung.karte--handyklapp[data-kkar-offen] { display: block; }
  html[data-kkar="an"] .kkar .leistung.karte--handyklapp .karte__ziffer { display: none; }
  
  html[data-kkar="an"] .kkar .leistung.karte--handyklapp .karte__wort {
    display: block;
    margin: 0 0 14px;
    font-size: clamp(24px, 2.3vw, 31px); line-height: 1.22;
  }
  html[data-kkar="an"] .kkar .leistung.karte--handyklapp .leistung__text p {
    font-size: 17px; line-height: 1.6;
  }
}

@media (max-width: 900px) {
  body { hyphens: manual; }
  p, li, dd, dt, summary, figcaption, blockquote { overflow-wrap: break-word; }
}

@media (min-width: 641px) {
  .karte--handyklapp { display: flex; flex-direction: column; }
  .karte--handyklapp > .karte__kopf { display: contents; }
  
  .karte--handyklapp .karte__wort { display: block; }
  
  .klapp-wort--schmal + * { margin-top: var(--takt-gross); }
}

#formular { scroll-margin-top: 110px; }

.recht h2 { max-width: 40ch; }
.recht h2 + p { margin-top: var(--takt-klein); }

.recht p { color: var(--russ); }

.recht__liste,
.recht__rang {
  margin: 0; padding-left: 22px; max-width: 60ch;
  color: var(--russ); line-height: var(--zeile-text);
}
.recht__liste li + li,
.recht__rang li + li { margin-top: 8px; }
.recht__rang { padding-left: 26px; }

.recht__fristen { margin: 0; max-width: 68ch; }
.recht__fristen dt {
  font-weight: 600; color: var(--russ);
  padding-top: 14px; border-top: 1px solid var(--riss); margin-top: 14px;
}
.recht__fristen dt:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.recht__fristen dd { margin: 4px 0 0; color: var(--beton); }

@media (min-width: 701px) {
  .recht__fristen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; }
  .recht__fristen dt { grid-column: 1; }
  .recht__fristen dd { grid-column: 2; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--riss); }
  .recht__fristen dt:first-child + dd { border-top: 0; margin-top: 0; padding-top: 0; }
}

.danke .lead { max-width: 900px; }

@media (min-width: 901px) {
  .abschnitt.danke { --abschnitt: 24px; --takt-klein: 14px; --takt-gross: 20px; }
  .danke h1 { font-size: clamp(34px, 4.6vw, 52px); }
  .danke h2 { font-size: clamp(28px, 3.3vw, 34px); }
}

.abschnitt.danke--schluss { padding-bottom: 18px; }

mark[data-suchfund] {
  background-color: var(--orange);
  color: var(--russ);
  box-shadow: 0 0 0 2px var(--orange);
  border-radius: 2px;
}