@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --s: 1;                    
  --weiss: #ffffff;
  --text: #0a0a0a;
  --text-2: #444a53;
  --text-3: #5c636e;
  --linie: #e4e8ee;
  --linie-2: #cdd4df;
  --flaeche: #f6f8fb;
  --blau: #0066ff;
  --blau-tief: #0052cc;      
  --blau-hauch: #eef4ff;
  --markierung: #d6e5ff;
  --grau-hauch: #e9ecf1;
  --schrift: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --breite: 75rem;
  --rand: clamp(1.25rem, calc(5vw * var(--s)), 3rem);
  
  --abstand: clamp(6rem, min(calc(12vw * var(--s)), calc(22vh * var(--s))), 11rem);
  --h1: clamp(2.25rem, min(1.2rem + calc(4.4vw * var(--s)), calc(8.2vh * var(--s))), 4.75rem);
  --h2: clamp(2rem, min(1.35rem + calc(2.5vw * var(--s)), calc(6.2vh * var(--s))), 3.25rem);
  --h3: 1.3125rem;
  --radius: 1rem;
  --kante: linear-gradient(90deg, rgba(0, 102, 255, 0), rgba(0, 102, 255, 0.55) 50%, rgba(0, 102, 255, 0));
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

@media (min-width: 1001px) {
  html { font-size: clamp(12px, min(0.9373vw, 2.171vh), 16px); }
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
h3 { letter-spacing: -0.015em; line-height: 1.3; }
p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: .1875rem; border-radius: .25rem; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


.ki-hinweis { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: .75rem; top: -7.5rem; z-index: 100;
  padding: .75rem 1rem; border-radius: .5rem; background: var(--blau); color: #fff; text-decoration: none;
}
.skip:focus { top: .75rem; }

.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abstand); }


.etikett {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.strich { flex: none; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--blau); }

.abschnitt h2 { font-size: var(--h2); }
.abschnitt__kopf { max-width: 48.75rem; margin-bottom: clamp(2.5rem, calc(5vw * var(--s)), 4rem); }
.einleitung { margin-top: 1.5rem; max-width: 38em; font-size: clamp(1.125rem, 1rem + calc(0.4vw * var(--s)), 1.25rem); color: var(--text-2); }
.einleitung + .einleitung { margin-top: .75rem; }
.hinweis-klein { margin-top: .875rem; font-size: 0.9375rem; color: var(--text-3); }
.quelle { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.55; letter-spacing: 0.02em; color: var(--text-3); }

.ohne-umbruch { white-space: nowrap; }


.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 3rem; padding: 0 1.5rem; border: 1.5px solid var(--blau); border-radius: 999px;
  background: var(--blau); color: #fff; font-size: 1rem; font-weight: 550; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.knopf:hover { background: var(--blau-tief); border-color: var(--blau-tief); text-decoration: none; }
.knopf--klein { min-height: 2.5rem; padding: 0 1.125rem; font-size: 0.9375rem; }
.knopf--gross { min-height: 3.75rem; padding: 0 1.75rem; font-size: 1.0625rem; gap: .75rem; }

.textlink {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 .25rem;
  color: var(--text); font-size: 1rem; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--linie-2); text-decoration-thickness: 1.5px; text-underline-offset: 0.35em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.textlink:hover { color: var(--blau); text-decoration-color: currentColor; text-decoration-thickness: 1.5px; }


.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.kopf__innen {
  position: relative; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto;
  padding: clamp(.75rem, calc(2.6vh * var(--s)), 1.375rem) var(--rand); display: flex; align-items: center; gap: 1rem;
  transition: padding 0.3s ease;
}
.kopf--schmal {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(1.6) blur(.875rem);
  backdrop-filter: saturate(1.6) blur(.875rem);
  box-shadow: 0 1px 0 var(--linie);
}
.kopf--schmal .kopf__innen { padding-top: .625rem; padding-bottom: .625rem; }
.marke {
  display: inline-flex; align-items: center; min-height: 2.5rem;
  font-size: 1.25rem; font-weight: 640; letter-spacing: 0.07em; color: var(--text); text-decoration: none;
}
.marke__iq { color: var(--blau); }
.haupt { margin-left: auto; }
.menue { display: flex; gap: 2px; list-style: none; padding: 0; }
.menue a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 .75rem; border-radius: .5rem;
  color: var(--text); font-size: 0.9375rem; text-decoration: none;
}
.menue a:hover { color: var(--blau); }
.kopf__cta { margin-left: .75rem; }

.menue-mobil { display: none; }
.menue-mobil summary {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem;
  border: 1px solid var(--linie-2); border-radius: 999px; background: #fff;
  font-size: 0.9375rem; cursor: pointer; list-style: none;
}
.menue-mobil summary::-webkit-details-marker { display: none; }
.menue-mobil[open] summary { border-color: var(--text); }
.menue-mobil nav {
  position: absolute; left: 0; right: 0; top: 100%; padding: .5rem var(--rand) 1.25rem;
  background: #fff; border-bottom: 1px solid var(--linie); box-shadow: 0 1.5rem 2.5rem -1.75rem rgba(10, 20, 40, 0.35);
}
.menue-mobil ul { list-style: none; padding: 0; }
.menue-mobil a {
  display: flex; align-items: center; min-height: 3.25rem; border-bottom: 1px solid var(--linie);
  color: var(--text); font-size: 1.125rem; text-decoration: none;
}


.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: clamp(6rem, calc(17vh * var(--s)), 7.5rem) 0 clamp(3rem, calc(11vh * var(--s)), 6rem);
}

.hero__partikel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__schleier {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.84) 42%, rgba(255, 255, 255, 0.25) 66%, rgba(255, 255, 255, 0) 82%);
}
@media (max-width: 760px) {
  .hero__schleier {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.88) 24%, rgba(255, 255, 255, 0.88) 76%, rgba(255, 255, 255, 0) 100%);
  }
}
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.hero::before { top: 0; height: 8.125rem; background: linear-gradient(#fff 30%, rgba(255, 255, 255, 0)); }
.hero::after { bottom: 0; height: 18%; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.hero__text { position: relative; max-width: 47.5rem; }
.hero__text::before {
  content: ""; position: absolute; inset: -2.5rem -3.5rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.62) 62%, rgba(255, 255, 255, 0));
}
.hero .etikett { margin-bottom: clamp(1rem, calc(3.4vh * var(--s)), 1.75rem); }
.hero h1 { font-size: var(--h1); line-height: 1.03; max-width: 17ch; }
.hero h1 .zeile { display: block; }
.hero__unterzeile { margin-top: clamp(1rem, calc(3.4vh * var(--s)), 1.75rem); max-width: 32em; font-size: clamp(1.125rem, 1rem + calc(0.45vw * var(--s)), 1.3125rem); color: var(--text-2); }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: clamp(1.5rem, calc(5vh * var(--s)), 2.5rem); }


.engpaesse__raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, calc(6vw * var(--s)), 6rem); align-items: start; }
.engpaesse__links { display: flex; flex-direction: column; min-width: 0; }
.engpaesse__rechts { min-width: 0; }

@media (min-width: 1001px) {
  .engpaesse__links { position: sticky; top: min(7rem, calc(100vh - var(--links-h, 0px) - 1.5rem)); }
  .engpaesse .bausteine { height: clamp(12.5rem, calc(100vh - 30rem), 20.625rem); margin-top: clamp(1.25rem, calc(4vh * var(--s)), 2.5rem); }
  .engpaesse .einleitung { margin-top: clamp(.875rem, calc(3vh * var(--s)), 1.5rem); }
}
.engpaesse h2 { max-width: 14ch; }

.bausteine { position: relative; width: 100%; max-width: 26.25rem; height: clamp(18.75rem, calc(28vw * var(--s)), 25rem); margin-top: 2.5rem; }
.bausteine svg { width: 100%; height: 100%; overflow: visible; }
.platz polygon, .platz rect { fill: var(--flaeche); stroke: var(--linie-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.platz .stein__nr { fill: #9aa3ae; }
.platz .stein__name { fill: #8a939f; }
.stein__nr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; fill: var(--blau-tief); }
.stein__name { font-family: var(--schrift); font-size: 14px; font-weight: 560; letter-spacing: -0.01em; text-anchor: middle; fill: var(--text); }
.stein { transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.34, 1.3, 0.5, 1); }
.stein .stein__front { fill: var(--blau-hauch); stroke: var(--blau); stroke-width: 1.4; transition: fill 0.45s ease; }
.stein .stein__oben { fill: #fff; stroke: var(--blau); stroke-width: 1.4; stroke-linejoin: round; }
.stein .stein__seite { fill: var(--markierung); stroke: var(--blau); stroke-width: 1.4; stroke-linejoin: round; }
.stein text { transition: fill 0.45s ease; }
.stein.ist-neu .stein__front { fill: var(--blau); }
.stein.ist-neu text { fill: #fff; }
.ziel__linie { fill: none; stroke: var(--blau); stroke-width: 1.4; transition: stroke 0.45s ease; }
.ziel__feld { fill: var(--blau); stroke: var(--blau); stroke-width: 1.2; transition: fill 0.45s ease, stroke 0.45s ease; }
.ziel__text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; text-anchor: middle; fill: #fff; transition: fill 0.45s ease; }
.fortschritt { width: 100%; max-width: 26.25rem; margin-top: 1.125rem; }
.fortschritt__text {
  display: flex; justify-content: space-between; gap: .75rem; margin: 0 0 .5625rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: var(--text-3);
}
.fortschritt__text strong { font-weight: 600; color: var(--blau-tief); }
.fortschritt__spur { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .3125rem; }
.fortschritt__spur i { display: block; height: .25rem; border-radius: 2px; background: var(--blau); transition: background-color 0.45s ease; }
.zitat {
  position: relative; margin: 2.5rem 0 0; padding: 1.875rem 1.75rem 1.375rem 2rem; overflow: hidden;
  border: 1px solid var(--linie); border-left: .1875rem solid var(--blau); border-radius: .25rem 1.25rem 1.25rem .25rem;
  background: linear-gradient(135deg, var(--blau-hauch) 0%, #fff 72%);
}
.zitat::before {
  content: "\201C"; position: absolute; right: 1rem; top: -1.875rem; pointer-events: none;
  font-size: 10rem; font-weight: 700; line-height: 1; color: var(--blau); opacity: 0.1;
}
.zitat blockquote { margin: 0; }
.zitat blockquote p { position: relative; font-size: clamp(1.125rem, 1rem + calc(0.45vw * var(--s)), 1.375rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }
.zitat figcaption { margin-top: 1.125rem; padding-top: .875rem; border-top: 1px solid var(--linie); font-size: 0.875rem; line-height: 1.5; color: var(--text-2); }
.zitat figcaption strong { font-weight: 600; color: var(--text); }
.engpaesse__hinweis { margin-top: 1.5rem; }



.engpass-raster { display: grid; gap: 1.125rem; margin: 0; padding: 0; list-style: none; }
.engpass {
  position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1.625rem; align-items: start;
  min-height: 15.625rem; padding: 2.25rem 2.375rem 2.125rem 2rem; border: 1px solid var(--linie); border-radius: 1.25rem; background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.engpass::before { content: ""; position: absolute; inset: 0 1.375rem auto; height: 1px; background: var(--kante); }
.engpass:hover { border-color: var(--linie-2); box-shadow: 0 1.375rem 2.75rem -2rem rgba(10, 30, 70, 0.4); transform: translateY(-2px); }
.engpass:nth-child(2) { --i: 1; }
.engpass:nth-child(3) { --i: 2; }
.engpass:nth-child(4) { --i: 3; }
.engpass:nth-child(5) { --i: 4; }
.engpass:nth-child(6) { --i: 5; }
.engpass__symbol {
  grid-row: 1 / span 4; width: 3.25rem; height: 3.25rem; padding: .8125rem; border-radius: .875rem; background: var(--blau-hauch);
  fill: none; stroke: var(--blau); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.engpass__symbol { transition: background-color 0.45s ease, stroke 0.45s ease; }
.engpass.ist-geloest .engpass__symbol { background: var(--blau); stroke: #fff; }   
.engpass__nr { grid-column: 2; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: var(--blau-tief); }
.engpass h3 { grid-column: 2; margin-top: .375rem; font-size: clamp(1.25rem, 1.1rem + calc(0.45vw * var(--s)), 1.5rem); font-weight: 560; line-height: 1.25; letter-spacing: -0.02em; }
.engpass__satz { grid-column: 2; margin-top: .625rem; font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); }
.engpass__bewertung { grid-column: 2; margin-top: 1.375rem; }
.engpass__skala { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .5625rem; font-size: 0.75rem; line-height: 1.4; color: var(--text-3); }
.engpass__skala strong { font-weight: 600; color: var(--blau-tief); }
.engpass__spur { display: block; height: .375rem; border-radius: .25rem; background: var(--linie); overflow: hidden; }
.engpass__spur > span {
  display: block; width: calc(var(--gewicht) * 100%); height: 100%; border-radius: inherit; background: var(--blau);
  transform-origin: left center; transition: transform 1.4s cubic-bezier(0.22, 0.8, 0.3, 1) calc(var(--i, 0) * 90ms + 0.2s);
}
.engpass__ansatz { margin-top: .625rem; font-size: 0.8125rem; line-height: 1.45; color: var(--text-3); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(1.125rem); } to { opacity: 1; transform: none; } }



.alltag { border-top: 1px solid var(--linie); background: var(--flaeche); }
.alltag h2 { max-width: 21ch; }

.kern {
  margin: 0 0 clamp(3.5rem, calc(6vw * var(--s)), 5.5rem); padding: clamp(1.625rem, calc(3.2vw * var(--s)), 2.75rem);
  border: 1px solid var(--linie); border-radius: 1.25rem; background: #fff;
  box-shadow: 0 1px 2px rgba(10, 30, 70, 0.04), 0 1.125rem 2.5rem -1.875rem rgba(10, 30, 70, 0.28);
}
.kern__zahlen { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.kern__zahlen strong {
  display: block; font-family: var(--mono); font-size: clamp(2.5rem, 1.5rem + calc(3.4vw * var(--s)), 4.75rem); font-weight: 500;
  line-height: 1; letter-spacing: -0.05em;
}
.kern__zahlen p > span { display: block; max-width: 24ch; margin-top: .75rem; font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); }
.kern__technik strong { color: var(--text-3); }
.kern__mensch { display: grid; justify-items: end; text-align: right; }
.kern__mensch strong { color: var(--blau); }
.kern__symbol {
  width: 2.75rem; height: 2.75rem; margin-bottom: .875rem; padding: .625rem; border-radius: 50%; background: var(--blau-hauch);
  fill: none; stroke: var(--blau); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.kern__balken { display: flex; gap: .25rem; height: 1.25rem; margin-top: 1.625rem; }
.kern__t, .kern__m { display: block; border-radius: .375rem; transform-origin: left center; }
.kern__t { flex: 93 1 0; background: repeating-linear-gradient(135deg, var(--grau-hauch) 0 .375rem, var(--linie) .375rem .75rem); }
.kern__m { flex: 7 1 0; min-width: .875rem; background: var(--blau); box-shadow: 0 0 0 .25rem var(--markierung); }
.kern figcaption { margin-top: 1.125rem; }
.einheit { margin-left: 0.06em; font-size: 0.62em; letter-spacing: 0; }


.alltag__liste { display: grid; gap: .875rem; margin: 0; padding: 0; list-style: none; }
.folge {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "frage antwort" "text text" "rueck rueck";
  gap: 0 2.5rem; align-items: center;
  padding: 1.625rem 1.875rem; border: 1px solid var(--linie); border-left: .1875rem solid var(--linie-2); border-radius: .375rem 1.125rem 1.125rem .375rem; background: #fff;
  transition: border-color 0.3s ease;
}
.folge[data-antwort="nein"] { border-left-color: var(--blau); }
.folge__frage { grid-area: frage; font-size: clamp(1.125rem, 1rem + calc(0.5vw * var(--s)), 1.375rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; }
.folge__antwort { display: none; }
html.js .folge__antwort { grid-area: antwort; display: flex; gap: .5rem; justify-self: end; }
.folge__antwort button {
  min-width: 4.75rem; min-height: 2.75rem; padding: 0 1.25rem; border: 1.5px solid var(--linie-2); border-radius: 999px;
  background: #fff; font-size: 0.9375rem; font-weight: 550; cursor: pointer; touch-action: manipulation;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.folge__antwort button:hover { border-color: var(--blau); }
.folge__antwort button[aria-pressed="true"] { border-color: var(--blau); background: var(--blau); color: #fff; }
.folge__text { grid-area: text; margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--linie); }
.folge__nr { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: var(--blau-tief); }
.folge h3 { margin-top: .375rem; font-size: 1.0625rem; font-weight: 560; line-height: 1.3; letter-spacing: -0.015em; }
.folge__satz { margin-top: .5rem; font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); }
html.js .folge__satz { display: none; }
html.js .folge:not([data-antwort]) .folge__text { display: none; }
.folge__rueck { display: none; }
html.js .folge[data-antwort="ja"] .folge__rueck[data-fuer="ja"],
html.js .folge[data-antwort="nein"] .folge__rueck[data-fuer="nein"] {
  grid-area: rueck; display: block; max-width: 44em; margin-top: .5rem;
  font-size: clamp(1.0625rem, 1rem + calc(0.25vw * var(--s)), 1.1875rem); line-height: 1.55; color: var(--text);
  animation: auftauchen 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.alltag__stand:not([hidden]) {
  display: block; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--markierung); border-radius: .875rem;
  background: var(--blau-hauch); font-size: 1.0625rem; line-height: 1.55; color: var(--text);
}
.alltag__stand strong { font-family: var(--mono); font-weight: 600; color: var(--blau-tief); }


.studien { margin-top: clamp(3.5rem, calc(6vw * var(--s)), 5rem); }
.studien__titel { margin-bottom: 1.375rem; font-size: var(--h3); font-weight: 560; letter-spacing: -0.015em; }
.studien__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.studie {
  display: flex; flex-direction: column; margin: 0; padding: clamp(1.5rem, calc(2.6vw * var(--s)), 2.125rem);
  border: 1px solid var(--linie); border-radius: 1.25rem; background: #fff;
}
.studie__titel { font-size: clamp(1.125rem, 1rem + calc(0.5vw * var(--s)), 1.375rem); font-weight: 560; line-height: 1.3; letter-spacing: -0.015em; }
.studie__unter { margin-top: .5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
.studie__balken { display: grid; gap: 1.125rem; margin: 1.625rem 0 1.375rem; }
.balken { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: end; }
.balken__name { font-size: 0.9375rem; line-height: 1.4; color: var(--text-2); }
.balken strong { grid-column: 2; grid-row: 1; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; color: var(--text-2); }
.balken__spur { grid-column: 1 / -1; display: block; height: .625rem; border-radius: .3125rem; background: var(--grau-hauch); overflow: hidden; }
.balken__spur i {
  display: block; width: calc(var(--wert) * 1%); min-width: .375rem; height: 100%; border-radius: inherit; background: var(--text-3);
  transform-origin: left center; transition: transform 1.2s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.balken--blau .balken__spur i { background: var(--blau); }
.balken--blau strong { color: var(--blau); }
.studie figcaption { margin-top: auto; }

.studie__schluss {
  margin: 0 0 1.25rem; padding: .875rem 1rem; border-left: .1875rem solid var(--blau); border-radius: .25rem .75rem .75rem .25rem;
  background: var(--blau-hauch); font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--text);
}


.alltag__schluss {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem 3.5rem; flex-wrap: wrap;
  margin-top: clamp(3.5rem, calc(6vw * var(--s)), 5rem); padding: clamp(1.75rem, calc(3.6vw * var(--s)), 3rem); border-radius: 1.25rem;
  background: var(--blau); color: #fff;
}
.alltag__schluss-text { max-width: 34em; }
.alltag__schluss-satz { margin-bottom: .625rem; font-size: clamp(1.5rem, 1.1rem + calc(1.4vw * var(--s)), 2.25rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.alltag__schluss-text p:not(.alltag__schluss-satz) { font-size: 1.0625rem; }
.alltag__schluss .knopf { border-color: #fff; background: #fff; color: var(--blau-tief); }
.alltag__schluss .knopf:hover { border-color: var(--blau-hauch); background: var(--blau-hauch); }
.alltag__schluss .hinweis-klein { margin-top: .75rem; color: #fff; }


.alltag__quellen { margin-top: 1.75rem; }
.alltag__quellen summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  color: var(--text-2); text-decoration: underline; text-decoration-color: var(--linie-2); text-underline-offset: 0.3em;
}
.alltag__quellen summary::-webkit-details-marker { display: none; }
.alltag__quellen summary::after { content: "+"; font-size: 1rem; color: var(--blau-tief); }
.alltag__quellen[open] summary::after { content: "\2013"; }
.alltag__quellen ul { margin: .25rem 0 0; padding: 0; list-style: none; }
.alltag__quellen a { color: var(--text-3); text-decoration-color: var(--linie-2); }
.alltag__quellen a:hover { color: var(--blau-tief); }

@media (prefers-reduced-motion: no-preference) {
  .kern__t { transition: transform 1.3s cubic-bezier(0.22, 0.8, 0.3, 1); }
  .kern__m { transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.5, 1) 1.25s; }
  html.js .kern:not(.ist-da) .kern__t, html.js .kern:not(.ist-da) .kern__m { transform: scaleX(0); }
  html.js .studie:not(.ist-da) .balken__spur i { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .folge__rueck, .kern__t, .kern__m, .balken__spur i { animation: none !important; transition: none !important; }
}
@media (max-width: 760px) {
  .kern__zahlen p > span { font-size: 0.8125rem; }
  .folge { grid-template-columns: minmax(0, 1fr); grid-template-areas: "frage" "antwort" "text" "rueck"; padding: 1.375rem 1.25rem; }
  html.js .folge__antwort { justify-self: start; margin-top: .875rem; }
  .studien__raster { grid-template-columns: minmax(0, 1fr); }
  .alltag__schluss { flex-direction: column; align-items: flex-start; }
}



.loesungen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: loesung; }
.loesung {
  position: relative; display: flex; flex-direction: column; overflow: hidden; counter-increment: loesung;
  padding: 0 0 clamp(1.625rem, calc(2.6vw * var(--s)), 2rem); border: 1px solid var(--linie); border-radius: 1.25rem; background: #fff;
  box-shadow: 0 1px 2px rgba(10, 30, 70, 0.04), 0 1.125rem 2.5rem -1.875rem rgba(10, 30, 70, 0.28);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.loesung:hover { border-color: var(--linie-2); box-shadow: 0 1px 2px rgba(10, 30, 70, 0.05), 0 1.625rem 3.125rem -1.875rem rgba(10, 30, 70, 0.4); transform: translateY(-2px); }
.loesung--breit { grid-column: span 2; }
.loesung h3 { padding-inline: clamp(1.5rem, calc(2.6vw * var(--s)), 2rem); font-size: clamp(1.375rem, 1.2rem + calc(0.45vw * var(--s)), 1.625rem); font-weight: 560; letter-spacing: -0.02em; }
.loesung h3::before {
  content: counter(loesung, decimal-leading-zero); display: block; margin-bottom: .5rem;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--blau-tief);
}
.loesung > p { margin: .625rem 0 0; padding-inline: clamp(1.5rem, calc(2.6vw * var(--s)), 2rem); max-width: 38em; font-size: 1rem; color: var(--text-2); }

.bild {
  display: grid; place-items: center; min-height: 9.25rem; padding: 1.375rem 1.25rem;
  border-radius: .875rem; background: var(--flaeche);
}
.loesung .bild {
  order: -1; min-height: 13rem; margin-bottom: 1.625rem; padding: 1.5rem clamp(1.25rem, calc(2.4vw * var(--s)), 2rem);
  border-radius: 0; border-bottom: 1px solid var(--linie);
  background: radial-gradient(120% 90% at 50% 0%, #fff 0%, var(--blau-hauch) 100%);
}
.grafik { width: 100%; height: auto; overflow: visible; }


.phasen { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 38.75rem; margin: 0; padding: 0; list-style: none; }
.phasen::before, .phasen::after { content: ""; position: absolute; top: .4375rem; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px; }
.phasen::before { background: var(--linie-2); }
.phasen::after { background: var(--blau); transform-origin: left center; transition: transform 2.4s linear 0.2s; }
.phasen li {
  position: relative; display: grid; justify-items: center; gap: .875rem; text-align: center;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.phasen li::before {
  content: ""; position: relative; z-index: 1; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--blau); background: var(--blau); box-shadow: 0 0 0 .25rem rgba(0, 102, 255, 0.12);
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.phasen li:nth-child(1)::before { transition-delay: 0.2s; }
.phasen li:nth-child(2)::before { transition-delay: 1s; }
.phasen li:nth-child(3)::before { transition-delay: 1.8s; }
.phasen li:nth-child(4)::before { transition-delay: 2.6s; }


.grafik-fluss { max-width: 20rem; }
.grafik-fluss .linie { fill: none; stroke: var(--linie-2); stroke-width: 2; stroke-dasharray: 4 5; }
.grafik-fluss .punkt { fill: var(--blau); transform: translateX(128px); transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.grafik-fluss .knoten rect { fill: #fff; stroke: var(--linie-2); stroke-width: 1.5; transition: fill 0.4s ease 2s, stroke 0.4s ease 2s; }
.grafik-fluss .knoten text { font-family: var(--schrift); font-size: 12.5px; font-weight: 500; fill: var(--text); text-anchor: middle; transition: fill 0.4s ease 2s; }
.grafik-fluss .knoten--ki circle { fill: var(--blau); }
.grafik-fluss .knoten--ki text { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: #fff; }
.grafik-fluss .knoten--ziel rect { fill: var(--blau-hauch); stroke: var(--blau); }
.grafik-fluss .knoten--ziel text { fill: var(--blau-tief); }


.code { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .75rem; width: 100%; max-width: 23.75rem; }
.code__fenster { border: 1px solid var(--linie-2); border-radius: .625rem; background: #fff; overflow: hidden; }
.code__kopf { display: flex; gap: .3125rem; padding: .5rem .625rem; border-bottom: 1px solid var(--linie); }
.code__kopf span { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--linie-2); }
.code__text { padding: .5625rem .75rem .625rem; font-family: var(--mono); font-size: .7188rem; line-height: 1.75; color: var(--text); white-space: pre; }
.code__zeile { display: block; transition: opacity 0.35s ease, transform 0.35s ease; }
.c-f { color: var(--blau-tief); }
.c-s { color: var(--blau); }
.code__ui { display: grid; align-content: center; gap: .5rem; padding: .75rem; border: 1px dashed var(--linie-2); border-radius: .625rem; background: #fff; }
.code__feld, .code__knopf { transition: opacity 0.35s ease, transform 0.35s ease; }
.code__feld { display: block; padding: .375rem .5625rem; border: 1px solid var(--linie-2); border-radius: .375rem; font-size: .7188rem; line-height: 1.2; color: var(--text-3); }
.code__knopf { justify-self: start; padding: .375rem .75rem; border-radius: 999px; background: var(--blau); color: #fff; font-size: .7188rem; font-weight: 600; line-height: 1.2; }
.code__zeile:nth-child(2), .code__feld:nth-child(1) { transition-delay: 0.5s; }
.code__zeile:nth-child(3), .code__feld:nth-child(2) { transition-delay: 1s; }
.code__zeile:nth-child(4), .code__knopf { transition-delay: 1.5s; }
.code__zeile:nth-child(5) { transition-delay: 1.8s; }


.grafik-agent { max-width: 33.75rem; }
.grafik-agent .blatt-form { fill: #fff; stroke: var(--linie-2); stroke-width: 1.5; stroke-linejoin: round; }
.grafik-agent .zeile { fill: var(--linie); }
.grafik-agent .stelle { fill: var(--markierung); }
.grafik-agent .spur { fill: none; stroke: var(--linie-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.grafik-agent .form { fill: #fff; stroke: var(--linie-2); stroke-width: 1.5; }
.grafik-agent .form-titel { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; fill: var(--text-3); }
.grafik-agent .feld-name { font-family: var(--schrift); font-size: 11.5px; font-weight: 500; fill: var(--text-2); }
.grafik-agent .feld { fill: var(--flaeche); stroke: var(--linie); }
.grafik-agent .wert { font-family: var(--schrift); font-size: 11.5px; font-weight: 600; fill: var(--text); transition: opacity 0.4s ease; }
.grafik-agent .wert--1 { transition-delay: 1.4s; }
.grafik-agent .wert--2 { transition-delay: 2.2s; }
.grafik-agent .wert--3 { transition-delay: 3s; }
.grafik-agent .flug { fill: var(--blau); opacity: 0; }

.grafik-agent--schmal { display: none; max-width: 18.75rem; }
.grafik-agent--schmal .feld-name { font-size: 9.5px; }
.grafik-agent--schmal .wert { font-size: 10.5px; }
.grafik-agent--schmal .form-titel, .grafik-agent--schmal .agent-text { font-size: 8.5px; }
.grafik-agent .agent { fill: var(--blau); }
.grafik-agent .agent-text { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; fill: #fff; text-anchor: middle; }
@keyframes flug {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 0.9; }
  84% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}


.themen { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.themen li {
  display: inline-flex; align-items: center; gap: .5625rem; min-height: 2.375rem; padding: 0 1rem;
  border: 1px solid var(--linie-2); border-radius: 999px; background: #fff; font-size: 0.9375rem; line-height: 1.3;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.themen li::before { content: ""; flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--blau); }
.themen li:nth-child(2) { transition-delay: 0.25s; }
.themen li:nth-child(3) { transition-delay: 0.5s; }
.themen li:nth-child(4) { transition-delay: 0.75s; }


.grafik-netz { max-width: 18.75rem; }
.grafik-netz .verbindung { fill: none; stroke: var(--blau); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.grafik-netz .verbindung:nth-child(2) { transition-delay: 0.25s; }
.grafik-netz .verbindung:nth-child(3) { transition-delay: 0.5s; }
.grafik-netz .verbindung:nth-child(4) { transition-delay: 0.75s; }
.grafik-netz .system rect { fill: #fff; stroke: var(--blau); stroke-width: 1.5; transition: stroke 0.4s ease; }
.grafik-netz .system:nth-of-type(1) rect { transition-delay: 0.7s; }
.grafik-netz .system:nth-of-type(2) rect { transition-delay: 0.95s; }
.grafik-netz .system:nth-of-type(3) rect { transition-delay: 1.2s; }
.grafik-netz .system:nth-of-type(4) rect { transition-delay: 1.45s; }
.grafik-netz .system text { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; fill: var(--text); text-anchor: middle; }
.grafik-netz .mitte circle { fill: var(--blau); }
.grafik-netz .mitte text { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: #fff; text-anchor: middle; }


.anwendungen { overflow-x: clip; }
.anwendungen .abschnitt__kopf { margin-bottom: clamp(2rem, calc(4vw * var(--s)), 3rem); }
.band { position: relative; display: grid; gap: 1rem; padding-block: .375rem; }
.band:focus-visible { outline: 2px solid var(--blau); outline-offset: .25rem; border-radius: 0; }
.band__reihe {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.band__spur { display: flex; gap: 1rem; width: max-content; animation: band-links 95s linear infinite; }
.band__reihe--rueck .band__spur { animation-name: band-rechts; animation-duration: 105s; }

.band:focus-visible .band__spur, .band.ist-aussen .band__spur { animation-play-state: paused; }
.band__liste { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.anw {
  flex: none; width: 18.125rem; padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--linie); border-radius: var(--radius); background: #fff;
  transition: border-color 0.25s ease;
}
.anw:hover { border-color: var(--blau); }
.anw__kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.anw__symbol {
  width: 2.5rem; height: 2.5rem; padding: .5625rem; border-radius: .625rem; background: var(--blau-hauch);
  fill: none; stroke: var(--blau); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.anw__bereich {
  padding: .1875rem .5625rem; border: 1px solid var(--linie); border-radius: 999px;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.anw h3 { margin-top: 1rem; font-size: 1.0625rem; font-weight: 600; }
.anw p:last-child { margin-top: .25rem; font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); }
@keyframes band-links { from { transform: translateX(0); } to { transform: translateX(calc(-50% - .5rem)); } }
@keyframes band-rechts { from { transform: translateX(calc(-50% - .5rem)); } to { transform: translateX(0); } }


.reiter {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.25rem;
  margin-bottom: clamp(2.25rem, calc(4vw * var(--s)), 3.25rem); border-bottom: 1px solid var(--linie);
}
html:not(.js) .reiter { display: none; }
.reiter__knopf {
  position: relative; display: grid; gap: .25rem; align-content: start; min-height: 3rem; padding: .75rem 2px 1.125rem;
  border: 0; background: none; text-align: left; cursor: pointer; color: var(--text-2);
}
.reiter__knopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blau);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.35s ease;
}
.reiter__knopf:hover { color: var(--text); }
.reiter__knopf[aria-selected="true"] { color: var(--text); }
.reiter__knopf[aria-selected="true"]::after { transform: scaleX(1); }
.reiter__art { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.reiter__knopf[aria-selected="true"] .reiter__art { color: var(--blau); }
.reiter__name { font-size: 1.0625rem; font-weight: 560; line-height: 1.3; }
html:not(.js) .fall + .fall { margin-top: 6rem; padding-top: 4rem; border-top: 1px solid var(--linie); }


.fall__raster {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas: "kopf vorf" "loes vorf" "zahl vorf";
  grid-template-rows: auto auto 1fr; column-gap: clamp(2.5rem, calc(5vw * var(--s)), 4.5rem);
}
.fall__kopf { grid-area: kopf; }
.fall__loes { grid-area: loes; }
.fall__vorf { grid-area: vorf; }

.fall__raster > .fall__zahl { grid-area: zahl; align-self: start; margin-top: 1.875rem; padding-top: 1.375rem; border-top: 1px solid var(--linie); }
.fall__anriss { margin-top: .75rem; max-width: 34em; font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); }
.kennung {
  display: inline-flex; align-items: center; gap: .625rem; padding: .3125rem .75rem;
  border: 1px solid var(--linie-2); border-radius: 999px;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--text-2);
}
.fall h3 { margin-top: 1.125rem; font-size: clamp(1.5rem, 1.2rem + calc(1vw * var(--s)), 2rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.fall__teil { margin-top: 1.625rem; }
.fall h4, .vorf__kopf h4 {
  margin-bottom: .625rem; font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; color: var(--text-3);
}
.vier { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; counter-reset: vier; }
.vier li { position: relative; padding-left: 2.375rem; font-size: 1rem; line-height: 1.45; counter-increment: vier; transition: color 0.3s ease; }
.vier li::before {
  content: counter(vier); position: absolute; left: 0; top: -1px; z-index: 1; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border: 1.5px solid var(--linie-2); border-radius: 50%; background: #fff;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1; color: var(--text-2);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.vier.laeuft li { color: var(--text-3); }
.vier.laeuft li.ist-fertig, .vier.laeuft li.ist-aktiv { color: var(--text); }
.vier.laeuft li.ist-fertig::before { border-color: var(--blau); color: var(--blau); }
.vier.laeuft li.ist-aktiv::before { border-color: var(--blau); background: var(--blau); color: #fff; }

.vorf__ende {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-top: .75rem; padding: .75rem 1rem;
  border-left: 2px solid var(--blau); border-radius: 0 .625rem .625rem 0; background: #fff;
  font-size: 0.9375rem; font-weight: 560; line-height: 1.5; color: var(--text);
  transition: opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s;
}
.vorf__ende-marke { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blau-tief); }

.fall__zahl { margin-top: 1.375rem; }
.fall__zahl-kopf { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; color: var(--text-3); }
.fall__zahl .praxis__zahl { margin-top: .25rem; }
.fall__mehr { margin-top: .5rem; }
.fall__mehr-inhalt { margin-top: .5rem; padding: 1rem 1.125rem 1.125rem; border: 1px solid var(--linie); border-radius: .75rem; }
.fall__mehr-inhalt .praxis__text { max-width: 42em; font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); }
.fall__mehr-inhalt .praxis__quelle { margin-top: .375rem; font-size: 0.8125rem; }
.fall__mehr-inhalt h4 { margin: 1.125rem 0 .5rem; }
.fall__mehr summary {
  display: inline-flex; align-items: center; gap: .625rem; min-height: 2.25rem; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.fall__mehr summary::-webkit-details-marker { display: none; }
.fall__mehr summary::before {
  content: "+"; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid var(--linie-2); border-radius: 50%;
  font-size: 0.9375rem; line-height: 1; color: var(--text);
}
.fall__mehr[open] summary::before { content: "\2212"; }
.fall__mehr summary:hover { color: var(--text); }

.absicherung { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.absicherung li { position: relative; padding-left: 1.875rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text); }
.absicherung li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 1.125rem; height: 1.25rem; background: var(--blau);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v6c0 4.6-3.2 7.8-7.5 9.2C7.7 19.8 4.5 16.6 4.5 12V6z'/%3E%3Cpath d='M9 12l2 2 4-4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v6c0 4.6-3.2 7.8-7.5 9.2C7.7 19.8 4.5 16.6 4.5 12V6z'/%3E%3Cpath d='M9 12l2 2 4-4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.technik { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.technik li {
  padding: .25rem .625rem; border: 1px solid var(--linie-2); border-radius: .375rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--text-2);
}


.vorf__kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.5rem; margin-bottom: .625rem; }
.vorf__kopf h4 { margin-bottom: 0; }
.nochmal {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .875rem;
  border: 1px solid var(--linie-2); border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 0.875rem; font-weight: 500; color: var(--text);
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.35s ease, visibility 0s linear 0.35s;
}
.nochmal:hover { border-color: var(--blau); color: var(--blau); }
.nochmal svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html:not(.js) .nochmal { display: none; }
.js .nochmal:not(.ist-bereit) { opacity: 0; visibility: hidden; }
.js .nochmal.ist-bereit { transition: border-color 0.2s ease, color 0.2s ease, opacity 0.35s ease, visibility 0s; }

.vorf {
  position: relative; padding: clamp(.75rem, calc(1.8vw * var(--s)), 1.25rem);
  border: 1px solid var(--linie-2); border-radius: var(--radius); background: var(--flaeche);
  font-size: 0.9375rem; line-height: 1.5;
}
.vorf__bild { display: grid; gap: .75rem; align-items: start; }
.blatt { padding: .875rem 1rem; border: 1px solid var(--linie); border-radius: .625rem; background: #fff; }
.blatt__kopf {
  display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .5rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; line-height: 1.4; text-transform: uppercase; color: var(--text-3);
}
.blatt__meta { display: grid; gap: 1px; padding-bottom: .5rem; border-bottom: 1px solid var(--linie); font-size: 0.875rem; color: var(--text-2); }
.blatt__meta > div { display: flex; gap: .5rem; }
.blatt__meta dt { min-width: 4.4em; color: var(--text-3); }
.blatt__text { display: grid; gap: .5rem; margin-top: .625rem; }

.m { padding: 1px .1875rem; margin: 0 -1px; border-radius: .1875rem; background: var(--markierung); color: inherit; box-shadow: inset 0 -2px 0 var(--blau); transition: background-color 0.5s ease, box-shadow 0.5s ease; }
.m--grau { background: var(--grau-hauch); box-shadow: inset 0 -2px 0 #98a2b1; }
.felder > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .625rem; align-items: baseline; padding: .4375rem 0; border-top: 1px solid var(--linie); }
.felder > div:first-child { border-top: 0; padding-top: 0; }
.felder dt { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.felder dd { font-size: 0.875rem; font-weight: 500; }
.felder strong { font-size: 1.0625rem; font-weight: 650; }
.vorf__abschluss--zeile { grid-area: abschluss; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1.25rem; }
.vorf__abschluss--zeile .vorf__freigabe { flex: 1 1 20rem; }
.vorf__freigabe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .625rem 1rem; padding-block: .625rem; }
.vorf__freigabe > p { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font-size: 0.9375rem; }
.vorf__freigabe .blatt__kopf { margin: 0; }
.freigabe-knopf {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem; flex: none;
  border: 1.5px solid var(--blau); border-radius: 999px; background: var(--blau); color: #fff; font-size: 0.875rem; font-weight: 560;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.freigabe-knopf .vorher { display: none; }
.vorf__versand { display: flex; align-items: center; gap: .625rem; font-size: 0.9375rem; font-weight: 560; transition: opacity 0.5s ease; }
.vorf__versand .ico { width: 1.375rem; height: 1.375rem; stroke: var(--blau); stroke-width: 2.2; }


.vorf--anfrage .vorf__bild { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "mail erkannt" "pruefung angebot" "abschluss abschluss"; }
.vorf__mail { grid-area: mail; }
.vorf__erkannt { grid-area: erkannt; }
.vorf__pruefung { grid-area: pruefung; }
.vorf__angebot { grid-area: angebot; }
.erkannt { display: grid; margin: 0; padding: 0; list-style: none; }
.erkannt li { display: grid; gap: 2px; padding: .5rem 0; border-top: 1px solid var(--linie); transition: opacity 0.5s ease, transform 0.5s ease; }
.erkannt li:first-child { border-top: 0; padding-top: 2px; }
.erkannt__was { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.erkannt__wert { font-size: 0.875rem; line-height: 1.5; }
.pruefliste { display: grid; gap: .5625rem; margin: 0; padding: 0; list-style: none; }
.pruefliste li { display: flex; align-items: flex-start; gap: .625rem; font-size: 0.875rem; line-height: 1.45; transition: opacity 0.5s ease, transform 0.5s ease; }
.pruefliste .ico { width: 1.25rem; height: 1.25rem; padding: .1875rem; border-radius: 50%; background: var(--blau); stroke: #fff; stroke-width: 2.8; }
.pruefliste .pruefliste--warn { color: var(--blau-tief); font-weight: 560; }
.pruefliste--warn .ico { padding: 0; background: none; stroke: var(--blau-tief); stroke-width: 2; }
.vorf__hinweis {
  display: flex; flex-wrap: wrap; gap: 2px .625rem; margin-top: .5rem; padding: .5rem .75rem;
  border-left: 2px solid var(--blau); border-radius: 0 .375rem .375rem 0; background: var(--blau-hauch); font-size: 0.8125rem;
}
.vorf__hinweis span { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blau-tief); }


.vorf--rag .vorf__bild { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); grid-template-areas: "quellen chat"; }
.vorf__quellen { grid-area: quellen; }
.vorf__chat { grid-area: chat; }
.quellen { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.quellen__dok { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border: 1px solid var(--linie); border-radius: .5rem; font-size: 0.8125rem; line-height: 1.3; transition: border-color 0.5s ease, background-color 0.5s ease; }
.quellen__dok .ico { width: 1.125rem; height: 1.125rem; stroke: var(--text-3); }
.quellen__dok small { display: block; font-size: 0.6875rem; color: var(--text-3); }
.quellen__dok--treffer { border-color: var(--blau); background: var(--blau-hauch); }
.quellen__dok--treffer .ico { stroke: var(--blau); }
.fundstelle { margin-top: .75rem; padding: .625rem .75rem; border-left: 2px solid var(--blau); border-radius: 0 .5rem .5rem 0; background: var(--blau-hauch); font-size: 0.8125rem; line-height: 1.5; transition: opacity 0.5s ease, transform 0.5s ease; }
.fundstelle__kopf { margin-bottom: .25rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blau-tief); }
.chat { display: grid; gap: .625rem; }
.chat__frage { justify-self: end; max-width: 88%; padding: .5625rem .8125rem; border-radius: .75rem .75rem .25rem .75rem; background: var(--blau); color: #fff; font-size: 0.875rem; line-height: 1.45; transition: opacity 0.5s ease, transform 0.5s ease; }
.chat__suche { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--text-3); transition: opacity 0.4s ease; }
.suche__lauf { display: none; gap: .1875rem; }
.suche__lauf i { width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--blau); animation: tippen 1s ease-in-out infinite; }
.suche__lauf i:nth-child(2) { animation-delay: 0.15s; }
.suche__lauf i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tippen { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.chat__antwort { max-width: 92%; padding: .625rem .8125rem; border: 1px solid var(--linie); border-radius: .75rem .75rem .75rem .25rem; background: #fff; font-size: 0.875rem; line-height: 1.5; transition: opacity 0.5s ease, transform 0.5s ease; }
.chat__antwort sup { color: var(--blau); font-weight: 600; }
.chat__quelle { margin-top: .375rem; padding-top: .375rem; border-top: 1px solid var(--linie); font-size: 0.75rem; color: var(--text-3); }
.chat__antwort--leer { border-style: dashed; border-color: #98a2b1; }
.suche__ergebnis { padding: 0 .4375rem; border: 1px solid var(--linie-2); border-radius: 999px; background: #fff; color: var(--text-2); }
.chat__marke { display: inline-block; margin-top: .5rem; padding: 2px .5625rem; border-radius: .375rem; background: var(--grau-hauch); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.03em; color: var(--text-2); }


.vorf--plan .vorf__bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "grundlage" "plan" "abschluss"; }
.plan__grundlage { grid-area: grundlage; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding-block: .625rem; transition: opacity 0.5s ease; }
.plan__grundlage .blatt__kopf { margin: 0; }
.plan__quellen { display: flex; flex-wrap: wrap; gap: .375rem; }
.plan__quellen span { padding: 2px .625rem; border: 1px solid var(--linie-2); border-radius: 999px; background: #fff; font-size: 0.8125rem; color: var(--text-2); }
.plan { grid-area: plan; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.plan__tag { display: grid; grid-template-rows: auto 1fr; gap: .375rem; min-height: 11rem; padding: .5rem; border: 1px dashed var(--linie-2); border-radius: .625rem; background: rgba(255, 255, 255, 0.55); }
.plan__datum { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.plan__beitrag {
  display: flex; flex-direction: column; gap: .375rem; padding: .5625rem; border: 1px solid var(--linie); border-radius: .5rem; background: #fff;
  font-size: 0.8125rem; line-height: 1.4; transition: opacity 0.5s ease, transform 0.5s ease;
}
.plan__kanal { align-self: start; padding: 1px .4375rem; border-radius: 999px; background: var(--blau-hauch); font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blau-tief); }
.plan__status {
  align-self: start; margin-top: auto; padding: 1px .5rem; border: 1px solid var(--blau); border-radius: 999px; background: var(--blau);
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.04em; color: #fff;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.plan__status .vorher { display: none; }
.ohne-beleg {
  padding: 0 2px; border-radius: 2px; background: var(--grau-hauch); box-shadow: inset 0 -1.5px 0 #98a2b1;
  text-decoration: line-through; text-decoration-color: var(--text-2); color: var(--text-3);
  transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
}
.ohne-beleg__marke {
  align-self: start; padding: 0 .4375rem; border: 1px dashed #98a2b1; border-radius: 999px;
  font-family: var(--mono); font-size: 0.5625rem; line-height: 1.7; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2);
  transition: opacity 0.5s ease;
}



.js .vorf .vorf__mail, .js .vorf .vorf__erkannt, .js .vorf .erkannt li, .js .vorf .vorf__pruefung, .js .vorf .pruefliste li,
.js .vorf .vorf__angebot, .js .vorf .vorf__freigabe, .js .vorf .vorf__versand, .js .vorf .chat__frage, .js .vorf .chat__suche,
.js .vorf .chat__antwort, .js .vorf .fundstelle, .js .vorf .vorf__datenblatt, .js .vorf .entwurf, .js .vorf .vorf__frage,
.js .vorf .vorf__abfrage, .js .vorf .vorf__ergebnis, .js .vorf .tabelle tbody tr, .js .vorf .rechenweg { opacity: 0; }
.js .vorf .erkannt li, .js .vorf .pruefliste li, .js .vorf .chat__frage, .js .vorf .chat__antwort, .js .vorf .fundstelle,
.js .vorf .entwurf, .js .vorf .vorf__frage { transform: translateY(.375rem); }
.js .vorf .freigabe-knopf { background: transparent; color: var(--blau); }

.js .vorf .vorf__ende { opacity: 0; transform: translateY(.375rem); }
.js .vorf--anfrage.p13 .vorf__ende, .js .vorf--rag.p8 .vorf__ende, .js .vorf--content.p8 .vorf__ende, .js .vorf--leads.p8 .vorf__ende { opacity: 1; transform: none; }
.js .vorf .freigabe-knopf .vorher { display: inline; }
.js .vorf .freigabe-knopf .nachher { display: none; }


.js .vorf--anfrage .vorf__mail .m { background: transparent; box-shadow: inset 0 -2px 0 transparent; }
.js .vorf--anfrage.p1 .vorf__mail, .js .vorf--anfrage.p1 .vorf__erkannt { opacity: 1; }
.js .vorf--anfrage.p2 .erkannt li[data-m="1"], .js .vorf--anfrage.p3 .erkannt li[data-m="2"], .js .vorf--anfrage.p4 .erkannt li[data-m="3"],
.js .vorf--anfrage.p5 .erkannt li[data-m="4"], .js .vorf--anfrage.p6 .erkannt li[data-m="5"] { opacity: 1; transform: none; }
.js .vorf--anfrage.p2 .vorf__mail .m[data-m="1"], .js .vorf--anfrage.p3 .vorf__mail .m[data-m="2"], .js .vorf--anfrage.p4 .vorf__mail .m[data-m="3"],
.js .vorf--anfrage.p6 .vorf__mail .m[data-m="5"] { background: var(--markierung); box-shadow: inset 0 -2px 0 var(--blau); }
.js .vorf--anfrage.p5 .vorf__mail .m[data-m="4"] { background: var(--grau-hauch); box-shadow: inset 0 -2px 0 #98a2b1; }
.js .vorf--anfrage.p7 .vorf__pruefung { opacity: 1; }
.js .vorf--anfrage.p7 .pruefliste li[data-c="1"], .js .vorf--anfrage.p8 .pruefliste li[data-c="2"], .js .vorf--anfrage.p9 .pruefliste li[data-c="3"] { opacity: 1; transform: none; }
.js .vorf--anfrage.p10 .vorf__angebot { opacity: 1; }
.js .vorf--anfrage.p11 .vorf__freigabe { opacity: 1; }
.js .vorf--anfrage.p12 .freigabe-knopf, .js .vorf--marketing.p9 .freigabe-knopf { background: var(--blau); color: #fff; }
.js .vorf--anfrage.p12 .freigabe-knopf .vorher, .js .vorf--marketing.p9 .freigabe-knopf .vorher { display: none; }
.js .vorf--anfrage.p12 .freigabe-knopf .nachher, .js .vorf--marketing.p9 .freigabe-knopf .nachher { display: inline; }
.js .vorf--anfrage.p13 .vorf__versand, .js .vorf--marketing.p9 .vorf__versand { opacity: 1; }


.js .vorf--rag .vorf__quellen { opacity: 1; }
.js .vorf--rag:not(.p3) .quellen__dok--treffer { border-color: var(--linie); background: #fff; }
.js .vorf--rag:not(.p3) .quellen__dok--treffer .ico { stroke: var(--text-3); }
.js .vorf--rag .suche__ergebnis { display: none; }
.js .vorf--rag .suche__lauf { display: inline-flex; }
.js .vorf--rag.p1 .chat__frage[data-c="1"], .js .vorf--rag.p4 .chat__antwort[data-c="1"], .js .vorf--rag.p3 .fundstelle,
.js .vorf--rag.p5 .chat__frage[data-c="2"], .js .vorf--rag.p8 .chat__antwort[data-c="2"] { opacity: 1; transform: none; }
.js .vorf--rag.p2 .chat__suche[data-c="1"], .js .vorf--rag.p6 .chat__suche[data-c="2"] { opacity: 1; }
.js .vorf--rag.p3 .chat__suche[data-c="1"] .suche__lauf, .js .vorf--rag.p7 .chat__suche[data-c="2"] .suche__lauf { display: none; }
.js .vorf--rag.p3 .chat__suche[data-c="1"] .suche__ergebnis, .js .vorf--rag.p7 .chat__suche[data-c="2"] .suche__ergebnis { display: inline; }


.js .vorf--plan .plan__grundlage { opacity: 0; }
.js .vorf--plan .plan__beitrag { opacity: 0; transform: translateY(.375rem); }
.js .vorf--plan .plan__status { border-color: var(--linie-2); background: transparent; color: var(--text-3); }
.js .vorf--plan .plan__status .vorher { display: inline; }
.js .vorf--plan .plan__status .nachher { display: none; }
.js .vorf--plan.p1 .plan__grundlage { opacity: 1; }
.js .vorf--plan.p2 .plan__tag[data-t="1"] .plan__beitrag, .js .vorf--plan.p3 .plan__tag[data-t="2"] .plan__beitrag,
.js .vorf--plan.p4 .plan__tag[data-t="3"] .plan__beitrag, .js .vorf--plan.p5 .plan__tag[data-t="4"] .plan__beitrag,
.js .vorf--plan.p6 .plan__tag[data-t="5"] .plan__beitrag { opacity: 1; transform: none; }
.js .vorf--plan:not(.p7) .plan__beitrag .m { background: transparent; box-shadow: inset 0 -2px 0 transparent; }
.js .vorf--plan:not(.p7) .ohne-beleg { background: transparent; box-shadow: none; }
.js .vorf--plan:not(.p7) .ohne-beleg__marke { opacity: 0; }
.js .vorf--plan:not(.p8) .ohne-beleg { text-decoration: none; color: inherit; }
.js .vorf--plan.p9 .vorf__freigabe { opacity: 1; }
.js .vorf--plan.p10 .freigabe-knopf { background: var(--blau); color: #fff; }
.js .vorf--plan.p10 .freigabe-knopf .vorher { display: none; }
.js .vorf--plan.p10 .freigabe-knopf .nachher { display: inline; }
.js .vorf--plan.p10 .plan__status { border-color: var(--blau); background: var(--blau); color: #fff; }
.js .vorf--plan.p10 .plan__status .vorher { display: none; }
.js .vorf--plan.p10 .plan__status .nachher { display: inline; }
.js .vorf--plan.p10 .vorf__versand { opacity: 1; }
.vorf.sofort, .vorf.sofort * { transition: none !important; }


.praxis__zahl { margin-top: .375rem; font-size: clamp(1.625rem, 1.3rem + calc(1vw * var(--s)), 2.125rem); font-weight: 560; letter-spacing: -0.03em; line-height: 1.15; color: var(--text); }
.praxis__zahl span[aria-hidden] { color: var(--blau); }
.praxis__zahl small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.praxis__text { font-size: 1rem; color: var(--text); }
.praxis__quelle { margin-top: .5rem; font-size: 0.875rem; color: var(--text-3); }


.platzhalter {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 2.75rem 1.25rem 1.25rem;
  border: 1px dashed #aab5c6; border-radius: var(--radius); background: var(--flaeche); text-align: center;
}
.platzhalter::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1.875rem; border-bottom: 1px dashed #aab5c6; }
.platzhalter__text {
  display: grid; gap: .375rem; max-width: 32em;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3);
}
.platzhalter__text > :first-child { color: var(--blau-tief); }
.platzhalter--flach { aspect-ratio: auto; min-height: 5.5rem; padding: 1.125rem 1rem; }
.platzhalter--flach::before { display: none; }


.preise__spalte { max-width: 62.5rem; }
.schritte { position: relative; margin: 0; padding: 0; list-style: none; --fortschritt: 1; }
.schritte::before, .schritte::after { content: ""; position: absolute; left: 1.3125rem; top: 1.75rem; bottom: 1.75rem; width: 2px; border-radius: 2px; }
.schritte::before { background: var(--linie); }
.schritte::after { background: var(--blau); transform-origin: top; transform: scaleY(var(--fortschritt)); transition: transform 0.15s linear; }
.schritt { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: .375rem 1.75rem; padding: 1.375rem 0; align-items: start; }
.schritt__nr {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1.5px solid var(--linie-2); border-radius: 50%; background: #fff;
  font-family: var(--mono); font-size: 0.9375rem; color: var(--text-3);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.schritt.erreicht .schritt__nr { border-color: var(--blau); color: var(--blau); }
.schritt__inhalt h3 { padding-top: .5rem; font-size: var(--h3); }
.schritt__inhalt > p { margin-top: .375rem; max-width: 38em; font-size: 1rem; color: var(--text-2); }
.schritt__inhalt > .ergebnisse { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .875rem; }
.ergebnisse__titel { margin-right: .25rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.marke-klein {
  display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 .625rem;
  border: 1px solid var(--linie-2); border-radius: 999px; background: #fff; font-size: 0.8125rem; font-weight: 500; color: var(--text);
}
.schritt__preis { min-width: 10.625rem; padding-top: .5rem; text-align: right; }
.preis { display: block; font-size: 1.3125rem; font-weight: 560; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis--wort { font-size: 1rem; font-weight: 500; white-space: normal; color: var(--text-2); }
.preis__vor, .preis__zusatz { display: block; font-size: 0.875rem; color: var(--text-2); }
.preis__zusatz { max-width: 15em; margin: .25rem 0 0 auto; }

.umfang { margin-top: .875rem; max-width: 38em; }
.umfang summary {
  display: inline-flex; align-items: center; gap: .625rem; min-height: 2.5rem; cursor: pointer; list-style: none;
  font-size: 0.9375rem; font-weight: 500; color: var(--blau);
}
.umfang summary::-webkit-details-marker { display: none; }
.umfang summary::before {
  content: "+"; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border: 1.5px solid currentColor; border-radius: 50%;
  font-family: var(--mono); font-size: 0.875rem; line-height: 1;
}
.umfang[open] summary::before { content: "–"; }
.umfang__inhalt { margin-top: .375rem; padding: .875rem 1rem; border: 1px dashed #aab5c6; border-radius: .625rem; background: var(--flaeche); font-size: 0.9375rem; color: var(--text-2); }
.umfang__marke { margin-bottom: .375rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blau-tief); }

.preise__test { margin-top: 1.25rem; padding: .875rem 1.125rem; border-left: 2px solid var(--blau); background: var(--flaeche); font-size: 1rem; }
.preise__festpreis { margin-top: 1.125rem; font-size: 0.9375rem; color: var(--text-2); }

.zusatz {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; column-gap: 1.125rem;
  margin-top: 1.75rem; padding: 1.125rem 1.5rem 1.125rem 1.25rem; border: 1px dashed var(--linie-2); border-radius: 1rem; background: #fff;
}
.zusatz .ico { width: 2.75rem; height: 2.75rem; padding: .6875rem; border-radius: .75rem; background: var(--blau-hauch); stroke: var(--blau); stroke-width: 1.6; }
.zusatz__marke { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: var(--text-3); }
.zusatz__titel { margin-top: .1875rem; font-size: 1.0625rem; font-weight: 560; line-height: 1.35; }
.zusatz__preis { font-size: 1.25rem; font-weight: 560; letter-spacing: -0.01em; white-space: nowrap; }
.haken-zeile { display: flex; flex-wrap: wrap; gap: .625rem 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.haken-zeile li { display: inline-flex; align-items: center; gap: .625rem; font-size: 1rem; font-weight: 500; }
.haken-zeile .ico { width: 1.375rem; height: 1.375rem; padding: .25rem; border-radius: 50%; background: var(--blau); stroke: #fff; stroke-width: 2.8; }

.preise__zeile { margin-top: 1.5rem; overflow: hidden; font-size: 0.875rem; color: var(--text-3); }
.preise__zeile p { display: flex; flex-wrap: wrap; row-gap: .375rem; margin-left: -1.625rem; }
.preise__zeile span { position: relative; padding-left: 1.625rem; }
.preise__zeile span::before { content: "·"; position: absolute; left: 0; width: 1.625rem; text-align: center; color: var(--text-3); }


.datenschutz {
  padding-block: clamp(4rem, calc(8vw * var(--s)), 6.5rem); border-block: 1px solid var(--linie);
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 102, 255, 0.1) 1px, transparent 1.3px) 0 0 / 1.375rem 1.375rem,
    linear-gradient(180deg, var(--blau-hauch), #fff 85%);
}
.datenschutz__raster { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr); gap: clamp(2rem, calc(5vw * var(--s)), 4.5rem); align-items: start; }
.datenschutz h2 { font-size: clamp(1.75rem, 1.35rem + calc(1.3vw * var(--s)), 2.5rem); max-width: 13ch; }
.datenschutz__link { gap: .5rem; margin-top: 1rem; margin-left: -.25rem; font-size: 0.9375rem; }
.datenschutz__link .ico { width: 1.125rem; height: 1.125rem; transition: transform 0.2s ease; }
.datenschutz__link:hover .ico { transform: translateX(.1875rem); }
.datenfluss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin: 0; padding: 0; list-style: none; }
.datenfluss__station { position: relative; display: grid; justify-items: start; align-content: start; gap: .25rem; padding: 1.25rem; border: 1px solid var(--linie); border-radius: 1rem; background: #fff; }
.datenfluss__station .ico { width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; padding: .5625rem; border-radius: .625rem; background: var(--blau-hauch); stroke: var(--blau); stroke-width: 1.6; }
.datenfluss__station strong { font-size: 1.0625rem; font-weight: 600; }
.datenfluss__station span { font-size: 0.875rem; line-height: 1.45; color: var(--text-2); }
.datenfluss__station--mitte { border-color: var(--blau); box-shadow: 0 0 0 .25rem rgba(0, 102, 255, 0.08), 0 1.125rem 2.25rem -1.5rem rgba(0, 102, 255, 0.45); }
.datenfluss__station--mitte .ico { background: var(--blau); stroke: #fff; }

.datenfluss__station + .datenfluss__station::before {
  content: ""; position: absolute; left: -3.0625rem; top: 50%; width: 3rem; height: 2px;
  background: repeating-linear-gradient(90deg, var(--blau) 0 .375rem, transparent .375rem .6875rem);
}
.datenfluss__station + .datenfluss__station::after {
  content: ""; position: absolute; left: -3.0625rem; top: calc(50% - .25rem); width: .625rem; height: .625rem; border-radius: 50%; background: var(--blau);
  transform: translateX(2.375rem); transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}
.datenfluss__station:nth-child(3)::after { transition-delay: 1.5s; }
.datenschutz__punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.datenschutz__punkte li { padding: 1rem 1.125rem 1.125rem; border-top: 2px solid var(--blau); border-radius: 0 0 .75rem .75rem; background: rgba(255, 255, 255, 0.8); }
.datenschutz__punkte .ico { display: inline-block; width: 1.25rem; height: 1.25rem; margin-right: .5rem; vertical-align: -.25rem; stroke: var(--blau); }
.datenschutz__punkte h3 { display: inline; font-size: 1rem; font-weight: 600; }
.datenschutz__punkte p { margin-top: .375rem; font-size: 0.875rem; color: var(--text-2); }



.person { overflow-x: clip; }
.person__raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, calc(7vw * var(--s)), 7rem); align-items: center; }
.person__bild { position: relative; isolation: isolate; width: min(100% - 2.5rem, 21.25rem); aspect-ratio: 5 / 6; margin: 1.75rem auto 2.75rem; }
.oval {
  position: absolute; inset: 0; overflow: hidden; background: #4a515b;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  animation: morph1 8s ease-in-out infinite;
}

.oval--foto { box-shadow: 0 2.5rem 6.25rem -1.25rem rgba(0, 102, 255, 0.4); }
.oval img { width: 100%; height: 100%; object-fit: cover; }
@keyframes morph1 {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  34% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; }
  67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
}

.namensschild {
  position: absolute; left: -1.375rem; bottom: 7%; z-index: 3;
  padding: .625rem 1.125rem; border: 2px solid var(--blau); border-radius: .75rem;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(.75rem) saturate(1.4);
          backdrop-filter: blur(.75rem) saturate(1.4);
  box-shadow: 0 0 1.5625rem rgba(0, 102, 255, 0.45);
  font-size: 0.9375rem; font-weight: 750; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--text);
}
.person__bild[data-schild="2"] .namensschild {
  background: var(--blau); color: #fff; box-shadow: 0 0 1.5625rem rgba(0, 102, 255, 0.5);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.person__zeile { margin-top: 1.5rem; max-width: 32em; font-size: clamp(1.1875rem, 1.05rem + calc(0.6vw * var(--s)), 1.5rem); line-height: 1.45; color: var(--text-2); }

.rollen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.rolle { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; border: 1px solid var(--linie); border-radius: 1.125rem; background: #fff; }
.rolle__kopf { display: flex; align-items: center; gap: .875rem; }
.rolle__bild {
  flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; overflow: hidden;
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--linie-2);
  background: linear-gradient(135deg, var(--blau-hauch), #dce8fb);
  font-family: var(--mono); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--blau-tief);
}
.rolle__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.rolle__kopf strong { display: block; font-size: 1.0625rem; font-weight: 600; }
.rolle__titel { display: block; margin-top: 2px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--blau-tief); }
.rolle > p:not([class]) { font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
.rolle__themen { display: flex; flex-wrap: wrap; gap: .375rem; margin: auto 0 0; padding: 0; list-style: none; }
.rolle__themen li { padding: 2px .5625rem; border: 1px solid var(--linie-2); border-radius: 999px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.03em; color: var(--text-2); }
.zusagen__titel { margin-top: 2.75rem; font-size: var(--h3); }
.zusagen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; margin-top: 1rem; padding: 0; list-style: none; counter-reset: zusage; }
.zusagen li { position: relative; padding: 1rem 0 1rem 2.75rem; border-top: 1px solid var(--linie); counter-increment: zusage; font-size: 1rem; }
.zusagen li::before { content: counter(zusage, decimal-leading-zero); position: absolute; left: 0; top: 1.125rem; font-family: var(--mono); font-size: 0.8125rem; color: var(--blau); }
.zertifikate { margin-top: 2rem; }


.abschluss {
  position: relative; max-width: 60rem; margin-inline: auto; padding: clamp(3rem, calc(7vw * var(--s)), 5.5rem) clamp(1.25rem, calc(5vw * var(--s)), 4.5rem);
  border: 1px solid var(--linie); border-radius: 1.75rem; text-align: center; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 0%, rgba(0, 102, 255, 0.07), rgba(0, 102, 255, 0) 70%), #fff;
}
.abschluss::before { content: ""; position: absolute; inset: 0 3rem auto; height: 1px; background: var(--kante); }
.abschluss .etikett { justify-content: center; }
.abschluss h2 { max-width: 20ch; margin-inline: auto; }
.abschluss .einleitung { margin: 1.25rem auto 0; }
.abschluss .knopf--gross { margin-top: 2.25rem; }
.abschluss .knopf--gross .ico { width: 1.25rem; height: 1.25rem; }
.haken { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem 1.75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.haken li { display: inline-flex; align-items: center; gap: .5rem; font-size: 0.9375rem; font-weight: 500; color: var(--text-2); }
.haken .ico { width: 1.125rem; height: 1.125rem; stroke: var(--blau); stroke-width: 2.2; }
.kontakt__weiter {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2.5rem, calc(6vw * var(--s)), 6rem);
  max-width: 60rem; margin: clamp(2.5rem, calc(5vw * var(--s)), 3.5rem) auto 0; padding-inline: clamp(.25rem, calc(3vw * var(--s)), 2.5rem);
}
.kontakt__spalte h3 { font-size: 1.125rem; font-weight: 600; }
.kontakt__hinweis { margin-top: .375rem; max-width: 30em; font-size: 0.9375rem; color: var(--text-2); }
.kontakt__wege { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: .5rem; }
.kontakt__wege a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.0625rem; }
.kontakt__spalte .textlink { margin-top: .25rem; margin-left: -.25rem; font-size: 0.9375rem; }


.fragen { border-top: 1px solid var(--linie); background: var(--flaeche); }
.erklaer {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1.5rem clamp(2rem, calc(5vw * var(--s)), 4.5rem);
  padding: clamp(1.625rem, calc(3.2vw * var(--s)), 2.75rem); border: 1px solid var(--linie); border-radius: 1.25rem; background: #fff;
}
.erklaer__text h3 { font-size: clamp(1.25rem, 1.1rem + calc(0.5vw * var(--s)), 1.5rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.erklaer__text p { margin-top: .875rem; font-size: 1rem; line-height: 1.65; color: var(--text-2); }



.pruefweg { display: grid; gap: .625rem; }
.pruefweg__zeile {
  display: grid; grid-template-columns: 1.375rem 10rem 1rem minmax(0, 1fr); align-items: center; gap: .25rem .75rem;
  padding: .75rem 1rem; border-left: .1875rem solid var(--blau); border-radius: 0 .75rem .75rem 0; background: var(--blau-hauch);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.pruefweg__zeile--nein { border-left-color: var(--linie-2); background: var(--flaeche); transition-delay: 0.5s; }
.pruefweg__zeile .ico { width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--blau); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pruefweg__zeile--nein .ico { stroke: var(--text-2); }
.pruefweg__zeile .pruefweg__pfeil { width: 1rem; height: 1rem; stroke: var(--text-3); stroke-width: 1.8; }
.pruefweg__fall { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.pruefweg__folge { font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); }


.fragen__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; align-items: start; margin-top: clamp(2.5rem, calc(5vw * var(--s)), 4rem); }
.fragen__spalte { border-bottom: 1px solid var(--linie-2); }
.frage { border-top: 1px solid var(--linie-2); }
.frage summary { display: flex; align-items: center; gap: 1rem; min-height: 4.75rem; padding: 1rem 0; cursor: pointer; list-style: none; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary .ico {
  flex: none; width: 2.25rem; height: 2.25rem; padding: .5rem; border: 1px solid var(--linie); border-radius: .625rem; background: #fff;
  fill: none; stroke: var(--blau); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.frage summary h3 { flex: 1; font-size: clamp(1.0625rem, 1rem + calc(0.25vw * var(--s)), 1.1875rem); font-weight: 560; letter-spacing: -0.01em; line-height: 1.35; transition: color 0.2s ease; }
.frage summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 2.125rem; height: 2.125rem;
  border: 1px solid var(--linie-2); border-radius: 50%; background: #fff; font-size: 1.125rem; line-height: 1; color: var(--text);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.frage[open] summary::after { content: "\2212"; border-color: var(--blau); background: var(--blau); color: #fff; }
.frage summary:hover h3 { color: var(--blau-tief); }

.frage__antwort { padding: 0 3.125rem 1.5rem 3.25rem; }
.frage__antwort p { font-size: 1rem; line-height: 1.65; color: var(--text-2); }
.frage__antwort p + p { margin-top: .625rem; }
.fragen__mehr { margin-top: 1.75rem; font-size: 1rem; color: var(--text-2); }


.fuss { padding: 2.5rem 0 3rem; border-top: 1px solid var(--linie); }
.fuss__innen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; }
.fuss__marke { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.fuss__ort { padding-left: 1rem; border-left: 1px solid var(--linie-2); font-size: 0.9375rem; line-height: 1.4; color: var(--text-3); }
.fuss__nav { margin-left: auto; }
.fuss__nav ul { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; list-style: none; }
.fuss__nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 .625rem; color: var(--text-2); font-size: 0.9375rem; text-decoration: none; }
.fuss__nav a:hover { color: var(--blau); }



.kopf-zitat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.5rem clamp(2.5rem, calc(6vw * var(--s)), 6rem); align-items: end; margin-bottom: clamp(2.5rem, calc(5vw * var(--s)), 4rem); }
.kopf-zitat .abschnitt__kopf { margin-bottom: 0; }
.zitat--kurz { margin: 0; padding: 1.625rem 1.625rem 1.25rem 1.75rem; }
.zitat--kurz blockquote p { font-size: clamp(1.5rem, 1.2rem + calc(1vw * var(--s)), 2.125rem); line-height: 1.2; letter-spacing: -0.02em; }


.fall--breit .fall__raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "kopf" "loes" "vorf"; }
.fall--breit .fall__kopf { position: relative; }
.fall--breit .fall__anriss { max-width: 46em; }
.fall--breit .fall__vorf { margin-top: 1.75rem; }

.kanaele { position: absolute; top: .375rem; right: 1.5rem; width: 18.75rem; height: 8.5rem; pointer-events: none; }
.kanal {
  position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center;
  width: var(--g); height: var(--g); border: 1px solid var(--linie); border-radius: 50%; background: #fff;
  box-shadow: 0 .625rem 1.5rem -1rem rgba(10, 30, 70, 0.35);
}
.kanal svg { width: 52%; height: 52%; fill: none; stroke: var(--blau); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kanal .voll { fill: var(--blau); stroke: none; }
.fall--breit .vier { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }

.fall--breit .vier::before { content: ""; position: absolute; top: .6875rem; left: .75rem; right: calc(25% - 1.6875rem); height: 1px; background: var(--linie); }
.fall--breit .vier li { padding: 2.25rem 0 0; }


.vorf--content .vorf__bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eingabe" "kanaele" "abschluss"; }
.content__eingabe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding-block: .625rem; transition: opacity 0.5s ease; }
.content__eingabe .blatt__kopf { margin: 0; }
.content__quellen { display: flex; flex-wrap: wrap; gap: .375rem; }
.content__quellen span { padding: 2px .625rem; border: 1px solid var(--linie-2); border-radius: 999px; background: #fff; font-size: 0.8125rem; color: var(--text-2); }
.content__kanaele { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: .875rem; align-items: start; }
.post {
  overflow: hidden; border: 1px solid var(--linie); border-radius: .75rem; background: #fff; font-size: 0.8125rem; line-height: 1.5;
  box-shadow: 0 1rem 2rem -1.625rem rgba(10, 30, 70, 0.45); transition: opacity 0.6s ease, transform 0.6s ease;
}
.post__kopf { display: flex; align-items: center; gap: .625rem; padding: .75rem .875rem .5rem; }
.post__logo { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: .5rem; background: var(--text); color: #fff; font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; }
.post__kopf strong { display: block; font-size: 0.875rem; line-height: 1.3; }
.post__kopf small { display: block; font-size: 0.6875rem; color: var(--text-3); }
.post--linkedin .post__text { padding: 0 .875rem .625rem; }
.post__bild { position: relative; aspect-ratio: 16 / 9; background: var(--blau-hauch); }
.post__bild--flach { aspect-ratio: 20 / 7; }
.post__bild svg { display: block; width: 100%; height: 100%; transition: filter 0.9s ease, opacity 0.9s ease; }
.ki-bild {
  position: absolute; left: .5rem; top: .5rem; padding: 1px .4375rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92);
  font-family: var(--mono); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2);
  transition: opacity 0.5s ease;
}
.post__leiste { display: flex; justify-content: space-around; padding: .5rem .625rem; border-top: 1px solid var(--linie); font-size: 0.6875rem; font-weight: 500; color: var(--text-3); }
.post__innen { padding: .75rem .875rem .875rem; }
.post__marke { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blau-tief); }
.post__titel { margin-top: 2px; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.post__innen .post__text { margin-top: .25rem; color: var(--text-2); }
.post__knopf { display: inline-block; margin-top: .625rem; padding: .3125rem .75rem; border-radius: 999px; background: var(--blau); color: #fff; font-size: 0.75rem; font-weight: 600; }
.post__adresse { padding: .4375rem .75rem; border-bottom: 1px solid var(--linie); background: var(--flaeche); font-family: var(--mono); font-size: 0.625rem; color: var(--text-3); }
.post__daten { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.post__daten span { padding: 2px .5rem; border: 1px solid var(--linie); border-radius: .375rem; font-size: 0.75rem; color: var(--text-2); }
.post .ohne-beleg__marke { display: inline-block; margin: 0 .25rem; vertical-align: 1px; }


.vorf--leads .vorf__bild { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); grid-template-areas: "eingang board" "karte karte" "abschluss abschluss"; }
.leads__eingang { grid-area: eingang; transition: opacity 0.5s ease; }
.leads__liste { display: grid; margin: 0; padding: 0; list-style: none; }
.leads__liste li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 1.5rem; gap: .625rem; align-items: start; padding: .5625rem 0; border-top: 1px solid var(--linie); }
.leads__liste li:first-child { border-top: 0; padding-top: 2px; }
.lead__quelle { padding: 1px .375rem; border: 1px solid var(--linie-2); border-radius: 999px; text-align: center; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.lead__inhalt strong { display: block; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.lead__inhalt span { display: block; font-size: 0.75rem; line-height: 1.4; color: var(--text-2); }
.lead__ziel, .stufe {
  display: grid; place-items: center; width: 1.375rem; height: 1.375rem; flex: none; border-radius: 50%; background: var(--blau); color: #fff;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; transition: opacity 0.4s ease, transform 0.4s ease;
}
.lead__ziel--b, .stufe--b { border: 1.5px solid var(--blau); background: #fff; color: var(--blau-tief); }
.lead__ziel--c, .stufe--c { background: var(--grau-hauch); color: var(--text-2); }
.leads__board { grid-area: board; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.leads__spalte { min-height: 14.375rem; padding: .625rem; border: 1px dashed var(--linie-2); border-radius: .625rem; background: rgba(255, 255, 255, 0.55); }
.leads__kopf { display: flex; align-items: center; gap: .5rem; font-size: 0.8125rem; font-weight: 600; }
.lead { margin-top: .5rem; padding: .625rem; border: 1px solid var(--linie); border-radius: .5rem; background: #fff; transition: opacity 0.5s ease, transform 0.5s ease; }
.lead__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: 0.8125rem; line-height: 1.3; }
.lead__wert { font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; color: var(--blau-tief); }
.lead__spur { display: block; height: .25rem; margin-top: .375rem; border-radius: 2px; background: var(--linie); overflow: hidden; }
.lead__spur i { display: block; width: calc(var(--w) * 100%); height: 100%; background: var(--blau); transform-origin: left center; transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) 0.2s; }
.lead__gruende { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.lead__gruende span { padding: 1px .4375rem; border-radius: 999px; background: var(--blau-hauch); font-size: 0.6875rem; color: var(--blau-tief); }

.lead-karte { grid-area: karte; border-color: var(--blau); box-shadow: 0 0 0 .25rem rgba(0, 102, 255, 0.06); transition: opacity 0.5s ease, transform 0.5s ease; }
.lead-karte > .blatt__kopf > :last-child { color: var(--blau-tief); font-weight: 600; }
.lead-karte__raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.25fr); margin-top: .25rem; padding-top: .75rem; border-top: 1px solid var(--linie); }
.lead-karte__raster > div { min-width: 0; padding: 0 1rem; border-left: 1px solid var(--linie); }
.lead-karte__raster > div:first-child { padding-left: 0; border-left: 0; }
.lead-karte__raster > div:last-child { padding-right: 0; }
.lead-karte__titel { margin-bottom: .5rem; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; color: var(--blau-tief); }
.lead-karte__daten { display: grid; gap: .25rem; margin: 0; }
.lead-karte__daten > div { display: grid; grid-template-columns: 3.625rem minmax(0, 1fr); gap: .5rem; font-size: 0.75rem; line-height: 1.4; }
.lead-karte__daten dt { color: var(--text-3); }
.lead-karte__daten dd { margin: 0; font-weight: 500; }
.lead-karte__punkt { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; align-items: baseline; font-size: 0.75rem; line-height: 1.3; }
.lead-karte__punkt + .lead-karte__punkt { margin-top: .4375rem; }
.lead-karte__punkt b { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--blau-tief); }
.lead-karte__punkt .lead__spur { grid-column: 1 / -1; margin-top: .25rem; }
.lead-karte__schritt { font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.lead-karte__klein { margin-top: .25rem; font-size: 0.75rem; line-height: 1.45; color: var(--text-2); }
.lead-karte__entwurf { padding: .5rem .625rem; border-left: 2px solid var(--blau); border-radius: 0 .375rem .375rem 0; background: var(--blau-hauch); font-size: 0.8125rem; line-height: 1.5; }


.js .vorf--content .content__eingabe, .js .vorf--content .post { opacity: 0; }
.js .vorf--content .post { transform: translateY(.625rem); }
.js .vorf--content.p1 .content__eingabe { opacity: 1; }
.js .vorf--content.p2 .post[data-k="1"], .js .vorf--content.p4 .post[data-k="2"], .js .vorf--content.p5 .post[data-k="3"] { opacity: 1; transform: none; }
.js .vorf--content:not(.p3) .post[data-k="1"] .post__bild svg { filter: blur(.625rem) saturate(0.4); opacity: 0.55; }
.js .vorf--content:not(.p3) .post[data-k="1"] .ki-bild { opacity: 0; }
.js .vorf--content:not(.p6) .post .m { background: transparent; box-shadow: inset 0 -2px 0 transparent; }
.js .vorf--content:not(.p6) .ohne-beleg { background: transparent; box-shadow: none; }
.js .vorf--content:not(.p6) .ohne-beleg__marke { opacity: 0; }
.js .vorf--content:not(.p7) .ohne-beleg { text-decoration: none; color: inherit; }
.js .vorf--content.p7 .vorf__freigabe, .js .vorf--leads.p7 .vorf__freigabe { opacity: 1; }
.js .vorf--content.p8 .freigabe-knopf, .js .vorf--leads.p8 .freigabe-knopf { background: var(--blau); color: #fff; }
.js .vorf--content.p8 .freigabe-knopf .vorher, .js .vorf--leads.p8 .freigabe-knopf .vorher { display: none; }
.js .vorf--content.p8 .freigabe-knopf .nachher, .js .vorf--leads.p8 .freigabe-knopf .nachher { display: inline; }
.js .vorf--content.p8 .vorf__versand, .js .vorf--leads.p8 .vorf__versand { opacity: 1; }


.js .vorf--leads .lead-karte { opacity: 0; transform: translateY(.5rem); }
.js .vorf--leads.p6 .lead-karte { opacity: 1; transform: none; }
.js .vorf--leads.p6 .lead-karte .lead__spur i { transform: none; }
.js .vorf--leads .leads__eingang { opacity: 0; }
.js .vorf--leads .lead { opacity: 0; transform: translateY(.5rem); }
.js .vorf--leads .leads__liste .lead__ziel { opacity: 0; transform: scale(0.6); }
.js .vorf--leads .lead__spur i { transform: scaleX(0); }
.js .vorf--leads.p1 .leads__eingang { opacity: 1; }
.js .vorf--leads.p2 .lead[data-l="1"], .js .vorf--leads.p3 .lead[data-l="2"], .js .vorf--leads.p4 .lead[data-l="3"], .js .vorf--leads.p5 .lead[data-l="4"] { opacity: 1; transform: none; }
.js .vorf--leads.p2 .lead[data-l="1"] .lead__spur i, .js .vorf--leads.p3 .lead[data-l="2"] .lead__spur i,
.js .vorf--leads.p4 .lead[data-l="3"] .lead__spur i, .js .vorf--leads.p5 .lead[data-l="4"] .lead__spur i { transform: none; }
.js .vorf--leads.p2 li[data-l="1"] .lead__ziel, .js .vorf--leads.p3 li[data-l="2"] .lead__ziel,
.js .vorf--leads.p4 li[data-l="3"] .lead__ziel, .js .vorf--leads.p5 li[data-l="4"] .lead__ziel { opacity: 1; transform: none; }


.person__kopf { margin-bottom: clamp(2rem, calc(4vw * var(--s)), 3rem); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, calc(6vw * var(--s)), 6rem); }
.duo__person { display: grid; justify-items: start; align-content: start; }
.duo .person__bild { width: min(100% - 3rem, 16.25rem); margin: .75rem 0 2.5rem 1.75rem; }


.oval--motiv { background: linear-gradient(160deg, #2b7fff 0%, var(--blau) 42%, #0047b8 100%) var(--blau-tief); animation-delay: -3.4s; }
.oval--motiv::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 18%, rgba(255, 255, 255, 0.18), transparent 60%); pointer-events: none; }
.oval--motiv .motiv-stroemung { position: absolute; inset: 0; }
.motiv-code {
  position: absolute; inset: 0; display: none; align-content: center; gap: .1875rem; padding: 0 10% 8% 14%;
  font-family: var(--mono); font-size: clamp(.5938rem, 0.62rem + calc(0.1vw * var(--s)), .6875rem); line-height: 1.5; color: #fff;
}
.motiv-code__klammer { margin-bottom: .875rem; font-size: clamp(2.25rem, 1.8rem + calc(1.4vw * var(--s)), 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.motiv-code code { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); white-space: pre; overflow: hidden; }
.motiv-code i { font-style: normal; font-weight: 300; }
.motiv-code b { font-weight: 600; color: #fff; }
.motiv-code__aktiv { margin-inline: -.375rem; padding-inline: .375rem; border-radius: .25rem; background: rgba(255, 255, 255, 0.14); color: #fff; }

.motiv-code__aktiv:has(+ .motiv-code__aktiv) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.motiv-code__aktiv + .motiv-code__aktiv { margin-top: -.1875rem; padding-top: .1875rem; border-top-left-radius: 0; border-top-right-radius: 0; }
.person__bild[data-motiv="2"] .motiv-stroemung { display: none; }
.person__bild[data-motiv="2"] .motiv-code { display: grid; }

.duo__name { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .875rem; margin-top: .25rem; }
.duo__text .duo__name h3 { margin-top: 0; }
.person__link {
  display: inline-flex; align-items: center; gap: .25rem; padding: 2px .625rem; border: 1px solid var(--linie-2); border-radius: 999px;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; text-decoration: none;
}
.person__link:hover { border-color: var(--blau); text-decoration: none; }
.duo__text h3 { margin-top: .25rem; font-size: clamp(1.375rem, 1.2rem + calc(0.6vw * var(--s)), 1.75rem); font-weight: 560; letter-spacing: -0.02em; }
.duo__text > p:not([class]) { margin-top: .625rem; max-width: 30em; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
.duo__text .rolle__themen { margin-top: 1rem; }

.person__weiter { margin-top: clamp(3.5rem, calc(6vw * var(--s)), 5.5rem); padding-top: clamp(2.25rem, calc(4vw * var(--s)), 3rem); border-top: 1px solid var(--linie); }
.person__weiter h3 { font-size: var(--h3); font-weight: 560; letter-spacing: -0.015em; }
.zusagen-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(2.5rem, calc(6vw * var(--s)), 6rem); margin: 1.375rem 0 0; padding: 0; list-style: none; }
.zusagen-liste li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: .875rem; align-items: start; font-size: 1rem; line-height: 1.55; }
.zusagen-liste .ico { width: 1.5rem; height: 1.5rem; margin-top: 0; padding: .3125rem; border-radius: 50%; background: var(--blau); stroke: #fff; stroke-width: 2.8; }
.person .zertifikate { margin-top: clamp(3rem, calc(5vw * var(--s)), 4.5rem); }


@media (prefers-reduced-motion: no-preference) {
  html.js .engpass:not(.ist-da) { opacity: 0; }
  html.js .engpass:not(.ist-da) .engpass__spur > span { transform: scaleX(0); }
  html.js .datenfluss:not(.ist-da) .datenfluss__station + .datenfluss__station::after { transform: none; }
  html.js .engpass.ist-da { animation: auftauchen 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
  
  html.js .stein:not(.ist-gelegt) { opacity: 0; transform: translateY(-34px); }
  html.js .bausteine:not(.ist-fertig) .ziel__linie { stroke: var(--linie-2); stroke-dasharray: 3 4; }
  html.js .bausteine:not(.ist-fertig) .ziel__feld { fill: #fff; stroke: var(--linie-2); stroke-dasharray: 4 4; }
  html.js .bausteine:not(.ist-fertig) .ziel__text { fill: #8a939f; }
  html.js .fortschritt__spur i:not(.an) { background: var(--linie); }

  html.js .loesung:not(.ist-da) .phasen::after { transform: scaleX(0); }
  html.js .loesung:not(.ist-da) .phasen li::before { border-color: var(--linie-2); background: #fff; box-shadow: none; }
  html.js .loesung:not(.ist-da) .grafik-fluss .punkt { transform: none; }
  html.js .loesung:not(.ist-da) .grafik-fluss .knoten--ziel rect { fill: #fff; stroke: var(--linie-2); }
  html.js .loesung:not(.ist-da) .grafik-fluss .knoten--ziel text { fill: var(--text); }
  html.js .loesung:not(.ist-da) .code__zeile, html.js .loesung:not(.ist-da) .code__feld, html.js .loesung:not(.ist-da) .code__knopf { opacity: 0; transform: translateY(.25rem); }
  html.js .loesung:not(.ist-da) .grafik-agent .wert { opacity: 0; }
  html.js .loesung.ist-da .grafik-agent .flug--1 { animation: flug 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both; }
  html.js .loesung.ist-da .grafik-agent .flug--2 { animation: flug 1.2s cubic-bezier(0.65, 0, 0.35, 1) 1.1s both; }
  html.js .loesung.ist-da .grafik-agent .flug--3 { animation: flug 1.2s cubic-bezier(0.65, 0, 0.35, 1) 1.9s both; }
  html.js .loesung:not(.ist-da) .themen li { opacity: 0; transform: translateY(.375rem); }
  html.js .loesung:not(.ist-da) .grafik-netz .verbindung { stroke-dashoffset: 1; }
  html.js .loesung:not(.ist-da) .grafik-netz .system rect { stroke: var(--linie-2); }
  html.js .loesung.sofort *, html.js .loesung.sofort *::before, html.js .loesung.sofort *::after { transition: none !important; animation: none !important; }
  
  html.js .pruefweg:not(.ist-da) .pruefweg__zeile { opacity: 0; transform: translateY(.375rem); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oval { animation: none; }
  .vorf *, .engpass__spur > span, .datenfluss__station::after, .schritte::after, .schritt__nr, .kopf, .kopf__innen, .engpass, .engpass__symbol,
  .loesung, .loesung *, .loesung *::before, .loesung *::after, .reiter__knopf::after, .pruefweg__zeile,
  .stein, .stein *, .ziel *, .fortschritt__spur i { transition: none !important; }
  .suche__lauf i { animation: none; }
  .nochmal { display: none !important; }
  
  .band__reihe { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding: 2px var(--rand) .625rem; }
  .band__spur { animation: none; }
  .band__liste[aria-hidden="true"] { display: none; }
  .anw { scroll-snap-align: start; }
}


@media (max-width: 1080px) {
  .fall__raster, .fall--breit .fall__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "loes" "vorf" "zahl"; grid-template-rows: none; }
  .fall__vorf { margin-top: 2rem; }
  .kanaele { display: none; }
  .content__kanaele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopf-zitat { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .haupt { display: none; }
  .kopf__cta { margin-left: auto; }
  .menue-mobil { display: block; }
  .engpaesse__raster { grid-template-columns: minmax(0, 1fr); }
  .engpaesse h2 { max-width: 18ch; }
  .bausteine { flex: none; width: 100%; max-width: 32.5rem; height: 20rem; min-height: 0; margin-top: 1.75rem; }
  .fortschritt { max-width: 32.5rem; }
  .zitat { max-width: 44em; }
  .loesungen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loesung--breit { grid-column: span 2; }
  .datenschutz__raster { grid-template-columns: minmax(0, 1fr); }
  .datenschutz h2 { max-width: 22ch; }
}
@media (max-width: 860px) {
  .reiter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; border-bottom: 0; }
  .reiter__knopf { border-bottom: 1px solid var(--linie); }
  .vorf--anfrage .vorf__bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mail" "erkannt" "pruefung" "angebot" "abschluss"; }
  .vorf--rag .vorf__bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "quellen" "chat"; }
  .vorf--marketing .vorf__bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "datenblatt" "entwuerfe" "abschluss"; }
  .vorf--zahlen .vorf__bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "frage" "abfrage" "ergebnis"; }
  .datenschutz__punkte { grid-template-columns: minmax(0, 1fr); }
  .plan { grid-template-columns: minmax(0, 1fr); }
  .content__kanaele, .leads__board { grid-template-columns: minmax(0, 1fr); }
  .vorf--leads .vorf__bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eingang" "board" "karte" "abschluss"; }
  .fall--breit .vier { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
  .fall--breit .vier::before { display: none; }
  .fall--breit .vier li { padding: 0 0 0 2.375rem; }
  .lead-karte__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .875rem; }
  .lead-karte__raster > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .lead-karte__raster > div:nth-child(2) { padding-right: 0; }
  .leads__spalte { min-height: 0; }
  .plan__tag { grid-template-columns: 2.125rem minmax(0, 1fr); grid-template-rows: none; align-items: start; min-height: 0; }
  .datenfluss { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .datenfluss__station + .datenfluss__station::before { left: 2.4375rem; top: -1.8125rem; width: 2px; height: 1.75rem; background: repeating-linear-gradient(180deg, var(--blau) 0 .375rem, transparent .375rem .6875rem); }
  .datenfluss__station + .datenfluss__station::after { display: none; }
  .erklaer, .fragen__liste { grid-template-columns: minmax(0, 1fr); }
  .fragen__spalte:first-child { border-bottom: 0; }   
}
@media (max-width: 760px) {
  .hero { padding: 6.5rem 0 4.5rem; }
  .hero__text::before { inset: -1.5rem -1.25rem; }
  .hero .etikett { margin-bottom: 1.375rem; }
  .hero__unterzeile { margin-top: 1.375rem; }
  .knoepfe { margin-top: 2rem; }
  .engpass-raster { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
  .loesungen__raster { grid-template-columns: minmax(0, 1fr); }
  .loesung--breit { grid-column: auto; }
  .schritt { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.125rem; }
  .schritt__preis { grid-column: 2; min-width: 0; padding-top: .25rem; text-align: left; }
  .preis__zusatz { margin-left: 0; }
  .zusatz { grid-template-columns: 2.75rem minmax(0, 1fr); row-gap: .5rem; padding: 1rem 1.125rem; }
  .zusatz__preis { grid-column: 2; }
  .person__raster, .zusagen, .kontakt__weiter, .rollen, .duo, .zusagen-liste { grid-template-columns: minmax(0, 1fr); }
  .person__bild { width: min(100% - 2.5rem, 17.5rem); }
  .namensschild { left: -1rem; padding: .5rem .875rem; font-size: 0.8125rem; }
  .fuss__nav { margin-left: 0; width: 100%; }
  .fuss__nav ul { margin-left: -.625rem; }
  .anw { width: 16.375rem; }
}
@media (max-width: 560px) {
  .grafik-agent--breit { display: none; }
  .grafik-agent--schmal { display: block; }
  .reiter { grid-template-columns: minmax(0, 1fr); }
  
  .tabelle th:nth-child(2), .tabelle td:nth-child(2), .tabelle th:nth-child(3), .tabelle td:nth-child(3) { display: none; }
  .bausteine { height: 15.625rem; }
  .engpass { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; min-height: 0; padding: 1.375rem 1.25rem 1.25rem 1.125rem; }
  .engpass__symbol { width: 2.75rem; height: 2.75rem; padding: .6875rem; border-radius: .75rem; }
  .lead-karte__raster { grid-template-columns: minmax(0, 1fr); }
  .lead-karte__raster > div { padding: .75rem 0 0; border-left: 0; border-top: 1px solid var(--linie); }
  .lead-karte__raster > div:first-child { padding-top: 0; border-top: 0; }
  .lead-karte > .blatt__kopf { flex-wrap: wrap; }
  
  .pruefweg__zeile { grid-template-columns: 1.375rem minmax(0, 1fr); }
  .pruefweg__zeile .pruefweg__pfeil { display: none; }
  .pruefweg__folge { grid-column: 2; }
  .frage summary { gap: .75rem; }
  .frage__antwort { padding: 0 0 1.375rem; }
}
@media (max-width: 480px) {
  .reiter__name { font-size: 1rem; }
  .phasen li { letter-spacing: 0.03em; }   
  .knopf--gross { width: 100%; padding: 0 1.125rem; font-size: 1rem; gap: .625rem; }
  .knopf--gross .ico:last-child { display: none; }
  .zahlen { gap: .625rem; }
  .zahl-karte { padding: 1.125rem 1rem 1rem; }
  .zahl-karte figcaption { font-size: 0.875rem; }
  .engpass { padding: 1.375rem 1.25rem 1.25rem; }
  .bild { padding: 1.125rem .75rem; }
  .code { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .5rem; }
  .code__text { padding: .5rem .5625rem; font-size: .6562rem; }
  .partner { align-items: flex-start; }
  .fuss__ort { padding-left: 0; border-left: 0; }
}
@media (max-width: 440px) {
  .kopf__cta { display: none; }
  .menue-mobil { margin-left: auto; }
  .kopf__innen { padding-top: 1rem; padding-bottom: 1rem; }
}


@media (max-width: 760px) {
  body { font-size: 1rem; }
  :root { --h2: 1.75rem; }
  .abschnitt { padding-block: 3.5rem; }
  .abschnitt__kopf, .kopf-zitat { margin-bottom: 1.75rem; }
  .etikett { margin-bottom: .875rem; font-size: 0.75rem; }
  .einleitung { margin-top: .875rem; font-size: 1rem; line-height: 1.55; }
  .einleitung + .einleitung { margin-top: .5rem; }

  
  .hero { align-items: flex-start; padding: 7rem 0 2.5rem; }
  .hero::after { height: 6%; }
  .hero__schleier {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 18%, rgba(255, 255, 255, 0.8) 62%, rgba(255, 255, 255, 0) 80%);
  }
  .hero__unterzeile { font-size: 1.0625rem; }

  
  .anwendungen, .detail, .menue-mobil a[href="#anwendungen"] { display: none; }

  
  .bausteine { height: 13.125rem; margin-top: 1.25rem; }
  .engpass-raster { gap: .625rem; }
  .engpass { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .875rem; padding: 1rem 1rem .875rem .875rem; border-radius: .875rem; }
  .engpass__symbol { width: 2.25rem; height: 2.25rem; padding: .5rem; border-radius: .625rem; }
  .engpass__nr { font-size: 0.625rem; }
  .engpass h3 { margin-top: 2px; font-size: 1.0625rem; }
  .engpass__satz { margin-top: .25rem; font-size: 0.9375rem; line-height: 1.45; }
  .engpass__bewertung { margin-top: .625rem; }
  .engpass__skala { margin-bottom: .3125rem; font-size: 0.6875rem; }
  .engpass__spur { height: .25rem; }
  .engpass__ansatz { margin-top: .375rem; font-size: 0.75rem; }
  .engpaesse__hinweis { margin-top: .875rem; font-size: 0.6875rem; }

  
  .loesungen__raster { gap: .75rem; }
  .loesung { padding-bottom: 1rem; border-radius: .875rem; }
  .loesung .bild { min-height: 0; margin-bottom: .875rem; padding: 1.125rem 1rem; }
  .loesung h3 { padding-inline: 1.125rem; font-size: 1.125rem; }
  .loesung h3::before { margin-bottom: .25rem; font-size: 0.6875rem; }
  .loesung > p { margin-top: .25rem; padding-inline: 1.125rem; font-size: 0.9375rem; line-height: 1.5; }

  
  .zitat--kurz { margin-top: 0; padding: .875rem 1rem .75rem 1.125rem; }
  .zitat--kurz::before { top: -1.125rem; font-size: 6rem; }
  .zitat--kurz blockquote p { font-size: 1.1875rem; }
  .zitat figcaption { margin-top: .5rem; padding-top: .5rem; font-size: 0.8125rem; }
  .schritte::before, .schritte::after { left: .9375rem; top: 1.25rem; bottom: 1.25rem; }
  .schritt { position: relative; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .875rem; padding: .625rem 0; }
  .schritt__nr { width: 2rem; height: 2rem; font-size: 0.8125rem; }
  .schritt__inhalt h3 { padding: .3125rem 9.375rem 0 0; font-size: 1.0625rem; }
  .schritt__inhalt > p { margin-top: .1875rem; font-size: 0.875rem; line-height: 1.5; }
  .schritt__inhalt > .ergebnisse { gap: .3125rem; margin-top: .4375rem; }
  .ergebnisse__titel { font-size: 0.625rem; }
  .marke-klein { min-height: 1.375rem; padding: 0 .5rem; font-size: 0.75rem; }
  .schritt__preis { position: absolute; top: .875rem; right: 0; display: flex; align-items: baseline; gap: .3125rem; min-width: 0; padding: 0; white-space: nowrap; }
  .preis { font-size: 1.0625rem; }
  .preis--wort { font-size: 0.8125rem; white-space: nowrap; }
  .preis__vor, .preis__zusatz { display: inline; font-size: 0.75rem; line-height: 1.3; }
  .preis__zusatz { max-width: none; margin: 0; }
  .zusatz { grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; margin-top: .75rem; padding: .75rem .875rem; }
  .zusatz .ico { width: 2.25rem; height: 2.25rem; padding: .5rem; border-radius: .625rem; }
  .zusatz__titel { font-size: 0.875rem; }
  .zusatz__preis { grid-column: auto; font-size: 1.0625rem; }
  .preise__test { margin-top: .75rem; padding: .625rem .875rem; font-size: 0.875rem; }
  .preise__festpreis { margin-top: .625rem; font-size: 0.8125rem; }
  .haken-zeile { gap: .5rem 1.25rem; margin-top: .75rem; }
  .haken-zeile li { font-size: 0.875rem; gap: .5rem; }
  .haken-zeile .ico { width: 1.125rem; height: 1.125rem; padding: .1875rem; }
  .preise__zeile { margin-top: .75rem; font-size: 0.75rem; }

  
  .datenschutz { padding-block: 3rem; }
  .datenschutz h2 { font-size: 1.625rem; }
  .datenfluss { gap: .75rem; }
  .datenfluss__station { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .75rem; row-gap: 0; align-items: center; padding: .625rem .875rem; border-radius: .75rem; }
  .datenfluss__station .ico { grid-row: span 2; width: 2.25rem; height: 2.25rem; margin: 0; padding: .5rem; }
  .datenfluss__station strong { font-size: 0.9375rem; }
  .datenfluss__station span { font-size: 0.8125rem; line-height: 1.35; }
  .datenfluss__station + .datenfluss__station::before { left: 1.9375rem; top: -.8125rem; height: .75rem; }
  .datenschutz__punkte { gap: .5rem; margin-top: .875rem; }
  .datenschutz__punkte li { padding: .625rem .875rem .75rem; }
  .datenschutz__punkte h3 { font-size: 0.9375rem; }
  .datenschutz__punkte p { margin-top: .1875rem; font-size: 0.8125rem; line-height: 1.45; }

  
  .person__kopf { margin-bottom: .5rem; }
  .duo { gap: 1.75rem; }
  .duo .person__bild { width: 14.75rem; margin: .5rem 0 1.5rem 1.5rem; }
  .namensschild { font-size: 0.75rem; }
  .duo__text h3 { font-size: 1.25rem; }
  .duo__text > p:not([class]) { margin-top: .375rem; font-size: 0.9375rem; line-height: 1.5; }
  .duo__text .rolle__themen { margin-top: .625rem; }
  .rolle__themen li { font-size: 0.625rem; }
  .person__weiter { margin-top: 2rem; padding-top: 1.5rem; }
  .zusagen-liste { gap: .625rem; margin-top: .875rem; }
  .zusagen-liste li { grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: .625rem; font-size: 0.9375rem; line-height: 1.45; }
  .zusagen-liste .ico { width: 1.25rem; height: 1.25rem; padding: .25rem; }

  
  .abschluss { padding: 2rem 1.125rem; border-radius: 1.25rem; }
  .abschluss h2 { font-size: 1.5rem; }
  .abschluss .einleitung { margin-top: .75rem; }
  .abschluss .knopf--gross { margin-top: 1.375rem; }
  .haken { gap: .25rem 1.125rem; margin-top: 1rem; }
  .haken li { font-size: 0.8125rem; }
  .kontakt__weiter { gap: 1.25rem; margin-top: 1.5rem; padding-inline: 0; }
  .kontakt__hinweis { font-size: 0.875rem; }
  .erklaer { gap: 1rem; padding: 1.125rem; border-radius: .875rem; }
  .erklaer__text h3 { font-size: 1.125rem; }
  .erklaer__text p { margin-top: .5rem; font-size: 0.9375rem; line-height: 1.55; }
  .fragen__liste { margin-top: 1.5rem; }
  .frage summary { min-height: 3.5rem; gap: .75rem; padding: .5rem 0; }
  .frage summary .ico { width: 2rem; height: 2rem; padding: .4375rem; }
  .frage summary h3 { font-size: 0.9375rem; }
  .fragen__mehr { margin-top: 1.125rem; font-size: 0.9375rem; }
}


.galerie-punkte { display: none; }
@media (max-width: 760px) {
  
  .engpass-raster, .loesungen__raster {
    display: flex; align-items: stretch; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none;
    margin-inline: calc(-1 * var(--rand)); padding: .25rem var(--rand) 1.25rem;
  }
  .engpass-raster::-webkit-scrollbar, .loesungen__raster::-webkit-scrollbar { display: none; }
  .engpass, .loesung { flex: 0 0 min(84%, 20rem); scroll-snap-align: start; scroll-snap-stop: always; }
  .engpass:hover, .loesung:hover { transform: none; }
  .galerie-punkte { display: flex; justify-content: center; gap: .5rem; margin-top: .25rem; }
  .galerie-punkte button {
    width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px; background: var(--linie-2);
    cursor: pointer; transition: width 0.3s ease, background-color 0.3s ease;
  }
  .galerie-punkte button[aria-current="true"] { width: 1.5rem; background: var(--blau); }
  
  .engpass { grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1.25rem 1.125rem; }
  .engpass__symbol { grid-row: auto; margin-bottom: .875rem; width: 2.5rem; height: 2.5rem; padding: .5625rem; }
  .engpass__nr, .engpass h3, .engpass__satz, .engpass__bewertung { grid-column: 1; }
  html.js .engpass:not(.ist-da) { opacity: 1; }
  html.js .engpass.ist-da { animation: none; }
  .engpaesse__hinweis { margin-top: 1.25rem; }
  .loesung .bild { min-height: 10rem; }

  
  .kern { margin-bottom: 2rem; padding: 1rem 1.125rem .875rem; border-radius: 1rem; }
  .kern__symbol { display: none; }
  .kern__zahlen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
  .kern__zahlen strong { font-size: 2.25rem; }
  .kern__zahlen p > span { max-width: none; margin-top: .375rem; font-size: 0.75rem; line-height: 1.35; }
  .kern__balken { gap: .1875rem; height: .5rem; margin-top: .875rem; }
  .kern__t { border-radius: 999px 0 0 999px; background: var(--linie-2); }
  .kern__m { min-width: .625rem; border-radius: 0 999px 999px 0; box-shadow: none; }
  .kern figcaption { margin-top: .625rem; font-size: 0.6875rem; }

  
  .alltag__liste {
    gap: 0; overflow: hidden; border: 1px solid var(--linie); border-radius: 1rem; background: #fff;
    box-shadow: 0 1px 2px rgba(10, 30, 70, 0.04), 0 1.125rem 2.5rem -1.875rem rgba(10, 30, 70, 0.28);
  }
  .folge { position: relative; padding: .875rem 1.125rem 1rem; border: 0; border-radius: 0; background: none; }
  .folge + .folge::before { content: ""; position: absolute; top: 0; left: 1.125rem; right: 0; height: 1px; background: var(--linie); }
  .folge[data-antwort="nein"] { box-shadow: inset .1875rem 0 0 var(--blau); }
  
  .folge { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "frage antwort" "text text" "rueck rueck"; column-gap: .875rem; }
  .folge__frage { font-size: 0.9375rem; line-height: 1.4; }
  html.js .folge__antwort {
    justify-self: end; align-self: center; display: grid; grid-template-columns: 3.25rem 3.25rem; gap: .125rem;
    margin-top: 0; padding: .1875rem; border-radius: .625rem; background: var(--grau-hauch);
  }
  .folge__antwort button { min-width: 0; min-height: 2.25rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; font-size: 0.875rem; }
  .folge__antwort button:hover { border-color: transparent; }
  .folge__antwort button[aria-pressed="true"] { background: var(--blau); color: #fff; box-shadow: 0 1px 3px rgba(0, 60, 160, 0.3); }
  .folge__text { margin-top: .75rem; padding-top: .625rem; }
  .folge h3 { font-size: 0.9375rem; }
  html.js .folge[data-antwort="ja"] .folge__rueck[data-fuer="ja"],
  html.js .folge[data-antwort="nein"] .folge__rueck[data-fuer="nein"] { margin-top: .375rem; font-size: 0.875rem; line-height: 1.5; }
  .alltag__stand:not([hidden]) { margin-top: 1rem; padding: 1rem 1.125rem; font-size: 0.9375rem; }

  
  .studien { margin-top: 2.75rem; }
  .studien__titel { margin-bottom: 1rem; font-size: 1.25rem; }
  .studien__raster {
    display: flex; align-items: stretch; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none;
    margin-inline: calc(-1 * var(--rand)); padding: .25rem var(--rand) 1.25rem;
  }
  .studien__raster::-webkit-scrollbar { display: none; }
  .studie { flex: 0 0 min(86%, 21rem); scroll-snap-align: start; scroll-snap-stop: always; padding: 1.25rem 1.125rem 1.125rem; }
  .studie__titel { font-size: 1.0625rem; }
  .studie__unter { font-size: 0.875rem; }
  .studie__balken { gap: .875rem; margin: 1.125rem 0 1rem; }
  .balken__name { font-size: 0.8125rem; }
  .balken strong { font-size: 1.0625rem; }
  .balken__spur { height: .5rem; }
  .studie__schluss { font-size: 0.9375rem; }
  .alltag__schluss { margin-top: 2rem; }

  
  .datenschutz { padding-block: 3.5rem; background: var(--flaeche); }
  .datenschutz__raster { gap: 0; }
  .datenschutz__kopf { display: contents; }
  .datenschutz h2 { margin-bottom: 1.5rem; }
  .datenschutz__link { order: 2; justify-self: start; margin-top: 1.25rem; }
  .datenschutz__inhalt {
    order: 1; display: flex; flex-direction: column; padding: .5rem 1.125rem .625rem;
    border: 1px solid var(--linie); border-radius: 1.25rem; background: #fff;
    box-shadow: 0 1px 2px rgba(10, 30, 70, 0.04), 0 1.125rem 2.5rem -1.875rem rgba(10, 30, 70, 0.28);
  }
  .datenfluss, .datenschutz__punkte { display: contents; }
  .datenfluss__station:nth-child(1) { order: 1; }
  .datenschutz__punkte li:nth-child(3) { order: 2; }
  .datenfluss__station:nth-child(2) { order: 3; }
  .datenschutz__punkte li:nth-child(1) { order: 4; }
  .datenschutz__punkte li:nth-child(2) { order: 5; }
  .datenfluss__station:nth-child(3) { order: 6; }
  .datenfluss__station, .datenfluss__station--mitte {
    position: relative; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: .875rem; row-gap: 0; align-items: start;
    padding: .75rem 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .datenfluss__station .ico { position: relative; z-index: 1; grid-row: span 2; width: 2.5rem; height: 2.5rem; margin: 0; padding: .5625rem; border-radius: 50%; }
  .datenfluss__station strong { padding-top: .125rem; font-size: 1rem; }
  .datenfluss__station span { font-size: 0.875rem; line-height: 1.4; }
  
  .datenfluss__station::before, .datenfluss__station + .datenfluss__station::before {
    content: ""; position: absolute; left: calc(1.25rem - 1px); top: 0; bottom: 0; width: 2px; height: auto; background: var(--markierung);
  }
  .datenfluss__station:nth-child(1)::before { top: 2rem; }
  .datenfluss__station:nth-child(3)::before { bottom: auto; height: 2rem; }
  .datenfluss__station + .datenfluss__station::after { display: none; }
  .datenschutz__punkte li {
    position: relative; display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); column-gap: .5rem; align-items: center;
    margin: 0 0 .5rem 3.375rem; padding: .75rem .875rem .8125rem; border: 0; border-radius: .875rem; background: var(--flaeche);
  }
  .datenschutz__punkte li + li { border-top: 0; }
  .datenschutz__punkte li::before { content: ""; position: absolute; left: calc(-2.125rem - 1px); top: 0; bottom: -.5rem; width: 2px; background: var(--markierung); }
  .datenschutz__punkte li::after { content: ""; position: absolute; left: -2.125rem; top: 1.3125rem; width: 2.125rem; height: 2px; background: var(--markierung); }
  .datenschutz__punkte .ico { grid-row: auto; width: 1.125rem; height: 1.125rem; margin: 0; padding: 0; border-radius: 0; background: none; vertical-align: 0; }
  .datenschutz__punkte h3 { display: block; font-size: 0.9375rem; }
  .datenschutz__punkte p { grid-column: 1 / -1; margin-top: .3125rem; font-size: 0.8125rem; line-height: 1.5; }

  
  .preise__festpreis, .preise__zeile { color: var(--text-3); }
  .preise__zeile p { flex-direction: column; margin-left: 0; }
  .preise__zeile span { padding-left: 0; }
  .preise__zeile span::before { display: none; }

  
  .haken { display: grid; justify-content: center; justify-items: start; gap: .5rem; }
  .kontakt__weiter { gap: 2rem; margin-top: 2rem; }
  .kontakt__wege { display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; margin-top: 1rem; }
  .kontakt__wege a {
    justify-content: center; min-height: 3rem; border: 1.5px solid var(--linie-2); border-radius: 999px; background: #fff;
    font-size: 1rem; font-weight: 550; color: var(--text); text-decoration: none;
  }
  .kontakt__wege a:active { border-color: var(--blau); }
}


@media (max-width: 760px) {
  .hero { min-height: var(--hero-h, 100svh); }
}