:root {
  --canvas:      #f5f5f7;
  --surface:     #ffffff;
  --wash:        #f4f8fb;
  --deep:        #12222b;
  --deep-2:      #1a3240;
  --ink:         #1d1d1f;
  --ink-2:       #565b5e;
  --ink-3:       #686d70;
  --on-deep:     #eef2f4;
  --on-deep-2:   #a9bcc6;
  --hairline:    #d2d2d7;
  --hairline-deep: #2c4451;
  --action:      #367282;
  --action-deep: #2a5865;
  --action-soft: #eaf2f4;
  --cool-wash:   #e8e8ed;
  --f-sky:   #cfe2e8;
  --f-mint:  #cde3dd;
  --f-sand:  #e8ddca;
  --f-blush: #e3d2cf;
  --f-haze:  #c9d3e0;
  --f-stone: #d8dee1;
  --ember:   #b64400;
  --decor:       #4b9eb4;
  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
            system-ui, "Helvetica Neue", Arial, sans-serif;
  --t-caption:    12px;  --lh-caption:    1.33; --ls-caption:   -0.022em;
  --t-body-sm:    14px;  --lh-body-sm:    1.29; --ls-body-sm:   -0.019em;
  --t-body:       17px;  --lh-body:       1.47; --ls-body:      -0.016em;
  --t-subheading: 21px;  --lh-subheading: 1.30; --ls-subheading:-0.005em;
  --t-heading-sm: 28px;  --lh-heading-sm: 1.20; --ls-heading-sm:-0.008em;
  --t-heading:    40px;  --lh-heading:    1.14; --ls-heading:   -0.015em;
  --t-heading-lg: 44px;  --lh-heading-lg: 1.16; --ls-heading-lg:-0.018em;
  --t-display:    56px;  --lh-display:    1.10; --ls-display:   -0.021em;
  --t-hero:       96px;  --lh-hero:       1.06; --ls-hero:      -0.015em;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 40px; --s-10: 48px; --s-14: 56px;
  --pad-gross:  64px;
  --pad-mittel: 48px;
  --pad-klein:  32px;
  --section: 120px;
  --page: 1200px;
  --text: 720px;
  --nav-h: 61px;
  --r-card: 28px;
  --r-inner: 20px;
  --r-pill: 980px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-inplace: cubic-bezier(.2, .8, .2, 1);
  --dur: 320ms;
  --dur-tap: 160ms;
}
@media (max-width: 900px) {
  :root {
    --pad-gross:  40px;
    --pad-mittel: 32px;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: calc(var(--nav-h) + 73px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p  { margin: 0; }
figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--action); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible {
  outline: 2px solid var(--action-deep);
  outline-offset: 3px;
  border-radius: var(--s-1);
}
.skip {
  position: absolute; left: -9999px; top: var(--s-2);
  background: var(--surface); color: var(--ink);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  border: 1px solid var(--hairline); z-index: 100;
}
.skip:focus { left: var(--s-4); }
.inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--s-8); }
@media (max-width: 600px) {
  .inner { padding-inline: var(--s-6); }
}
.text  { max-width: var(--text); }
.section { padding-block: var(--section); }
.section--tight { padding-block: 64px; }
.section.on-canvas  + .section.on-canvas,
.section.on-surface + .section.on-surface,
.section.on-deep    + .section.on-deep { padding-top: 0; }
.on-canvas  { background: var(--canvas); }
.on-surface { background: var(--surface); }
.on-wash    { background: var(--wash); }
.on-deep    { background: var(--deep); color: var(--on-deep); }
.stack   { display: flex; flex-direction: column; gap: var(--s-5); }
.stack-s { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-l { display: flex; flex-direction: column; gap: var(--s-8); }
.eyebrow {
  font-size: var(--t-caption); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-3);
}
.on-deep .eyebrow { color: var(--on-deep-2); }
.showcase .eyebrow, .duoshow .eyebrow, .thema .eyebrow, .pin__no { color: var(--ink-2); }
.hero-type  { font-size: clamp(42px, 8.4vw, var(--t-hero)); font-weight: 700;
              line-height: var(--lh-hero); letter-spacing: var(--ls-hero); }
.display    { font-size: clamp(36px, 6vw, var(--t-display)); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.heading-lg, .heading, .heading-sm, .hero-type {
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.heading-lg { font-size: clamp(36px, 6vw, 64px); line-height: 1.08; letter-spacing: -0.019em; }
.heading    { font-size: clamp(32px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.02em; }
.heading-md { font-size: clamp(28px, 3vw, var(--t-heading)); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.heading-sm { font-size: var(--t-heading-sm); line-height: var(--lh-heading-sm); letter-spacing: 0.007em; }
@media (max-width: 359px) {
  .hero-type  { font-size: 34px; }
  .heading-lg { font-size: 30px; }
  .heading    { font-size: 28px; }
  .heading-sm { font-size: 24px; }
}
.tagline {
  font-size: clamp(19px, 2.4vw, 26px); font-weight: 400;
  line-height: 1.34; letter-spacing: -0.004em; color: var(--ink-2);
}
.on-deep .tagline { color: var(--on-deep-2); }
.lead { font-size: var(--t-subheading); font-weight: 400; line-height: var(--lh-subheading); letter-spacing: var(--ls-subheading); color: var(--ink-2); }
.on-deep .lead { color: var(--on-deep-2); }
@media (max-width: 600px) {
  .lead { font-size: var(--t-body); line-height: 1.4; }
}
.muted { color: var(--ink-3); }
.on-deep .muted { color: var(--on-deep-2); }
.small { font-size: var(--t-body-sm); line-height: 1.5; letter-spacing: var(--ls-body-sm); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-size: var(--t-body); font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--fill   { background: var(--action); color: #fff; }
.btn--fill:hover { background: var(--action-deep); }
.btn--line   { background: transparent; color: var(--ink); border-color: rgba(29,29,31,.28); }
.btn--line:hover { background: var(--cool-wash); }
.on-deep .btn--line { color: var(--on-deep); border-color: #527183; }
.on-deep .btn--line:hover { background: rgba(255,255,255,.08); }
.btn--sm { min-height: 36px; padding: 7px 16px; font-size: var(--t-body-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
         min-height: 24px; }
.arrow svg { transition: transform var(--dur) var(--ease); }
.arrow:hover svg { transform: translateX(3px); }
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface);
  transition: border-color 500ms var(--ease-inplace);
}
.nav--fest { border-bottom: 1px solid var(--hairline); }
.nav--offen, .nav--mob { border-bottom-color: transparent; }
.nav__in {
  max-width: var(--page); margin-inline: auto;
  padding-inline: var(--s-8);
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-6);
}
.nav__logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
             color: var(--ink); text-decoration: none; }
.nav__logo img { width: 34px; height: 34px; }
.nav__logo span { font-size: var(--t-body-sm); font-weight: 600; letter-spacing: -.01em; }
.nav__links {
  flex: 1 1 auto; min-width: 0;
  display: flex; justify-content: center; align-items: center;
  gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.nav__punkt {
  font-family: inherit; font-size: 16px;
  font-weight: 450;
  letter-spacing: -.01em; line-height: 1;
  color: var(--ink);
  background: none; border: 0; padding: 0 2px; margin: 0;
  min-height: 44px; display: inline-flex; align-items: center;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-tap) var(--ease-inplace);
}
.nav__punkt[aria-expanded="true"] { color: var(--ink-3); }
.nav a:hover, .nav a:focus-visible { text-decoration: none; }
.nav__punkt {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  color: var(--ink-2); background: transparent;
  transition: color 150ms cubic-bezier(.4, 0, .2, 1),
              background-color 150ms cubic-bezier(.4, 0, .2, 1);
}
@media (any-hover: hover) {
  .nav__punkt:hover { color: var(--ink); background: rgba(0, 0, 0, .06); }
}
.nav__punkt:focus-visible,
.nav__punkt[aria-expanded="true"] { color: var(--ink); background: rgba(0, 0, 0, .06); }
.nav__punkt[aria-current="page"] { color: var(--ink); font-weight: 500; background: transparent; }
.nav__akt { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-3); }
.nav__knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 20px; border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}
.nav__knopf--fill { background: var(--action); color: #fff; }
.nav__knopf--fill:hover { background: var(--action-deep); }
.nav__knopf--line {
  background: transparent; color: var(--ink);
  border-color: rgba(29, 29, 31, .28); font-weight: 450; padding: 8px 16px;
  font-variant-numeric: tabular-nums;
}
.nav__knopf--line:hover { background: var(--cool-wash); }
.nav__knopf--line svg { width: 16px; height: 16px; color: var(--ink-2); flex: 0 0 auto; }
.nav__burger {
  display: none; flex: 0 0 auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  border-radius: var(--r-pill);
}
.nav__burger:hover { background: var(--cool-wash); }
.nav__burger .nav__b-zu { display: none; }
.nav--mob .nav__burger .nav__b-zu { display: block; }
.nav--mob .nav__burger .nav__b-auf { display: none; }
.nav :focus-visible {
  outline: 2px solid var(--action-deep); outline-offset: 3px; border-radius: 6px;
}
.nav__schub {
  position: absolute; top: 100%; left: 0; right: 0;
  height: 0; overflow: hidden;
  background: var(--surface);
  transition: height 500ms var(--ease);
}
.nav__panel {
  position: absolute; top: 0; left: 0; width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity 200ms var(--ease-inplace),
              transform 200ms var(--ease-inplace),
              visibility 0s linear 200ms;
}
.nav__panel[data-aktiv] {
  visibility: visible; opacity: 1; transform: none;
  transition-delay: 75ms, 75ms, 0s;
}
.nav__schub { background: transparent; }
.nav__panel {
  background: transparent;
  border-bottom: 0;
  padding: 10px var(--s-8) 40px;
  pointer-events: none;
}
.nav__schub { pointer-events: none; }
.nav__panelin { pointer-events: auto; }
.nav__panelin {
  max-width: calc(var(--page) - 2 * var(--s-8));
  margin-inline: auto;
  padding: 24px 28px 28px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(18, 34, 43, .10), 0 1px 3px rgba(18, 34, 43, .05);
  border: 1px solid var(--hairline);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 330px);
  gap: 0 var(--s-6);
  align-items: stretch;
}
.nav__gruppe { display: grid; gap: 12px; align-content: start; }
.nav__glabel {
  margin: 0 0 2px 12px;
  font-size: 13px; line-height: 1.35; font-weight: 500;
  color: var(--ink-3);
}
.nav__gruppe:last-child:not(:first-child) {
  border-left: 1px solid var(--hairline);
  padding-left: var(--s-6);
}
.nav__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-auto-rows: 84px;
}
.nav__liste > li { display: grid; }
.nav__karte {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  box-sizing: border-box;
  height: 100%;
  min-height: 84px;
  border-radius: var(--r-card);
  background: transparent;
  text-decoration: none;
  transition: background-color 150ms var(--ease-inplace);
}
.nav__kicon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-inner);
  background: var(--cool-wash);
  color: var(--ink-2);
  transition: background-color 150ms var(--ease-inplace),
              color            150ms var(--ease-inplace);
}
.nav__kicon svg { width: 20px; height: 20px; }
.nav__ktext { display: grid; gap: 2px; min-width: 0; }
.nav__kname {
  font-size: 15px; line-height: 1.45; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}
.nav__kunter { font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.nav__liste .nav__kunter {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (any-hover: hover) {
  .nav__karte:hover { background: var(--canvas); }
  .nav__karte:hover .nav__kicon { background: var(--action-soft); color: var(--action); }
  .nav__karte--offen:hover { background: transparent; }
  .nav__karte--offen:hover .nav__kicon { background: var(--canvas); color: var(--ink-3); }
}
.nav__karte--offen { cursor: default; }
.nav__karte--offen .nav__kicon { background: var(--canvas); color: var(--ink-3); }
.nav__karte--offen .nav__kname { color: var(--ink-2); }
.nav__kmarke {
  display: inline-block; vertical-align: 1px;
  margin-left: 8px; padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  color: var(--ink-2);
}
.nav__karte:focus-visible {
  outline: 2px solid var(--action-deep);
  outline-offset: 2px;
  border-radius: var(--r-card);
  background: var(--canvas);
}
.nav__karte:focus-visible .nav__kicon { background: var(--action-soft); color: var(--action); }
@media (max-width: 1079px) {
  .nav__knopf--line { width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; }
  .nav__knopf--line span { display: none; }
  .nav__knopf--line svg { width: 18px; height: 18px; }
}
@media (max-width: 959px) {
  .nav__links, .nav__schub { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__in { padding-inline: var(--s-5); gap: var(--s-3); }
  .nav__akt { margin-left: auto; }
}
@media (max-width: 560px) {
  .nav__logo span, .nav__knopf--line { display: none; }
}
.nav__mob {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
  height: var(--nav-rest, 70vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 26px var(--s-5) 40px;
}
.nav--mob .nav__mob { display: block; animation: nav-mob 320ms var(--ease) both; }
@keyframes nav-mob { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.nav__mobnav { display: grid; gap: 4px; }
.nav__mobtitel {
  list-style: none;
  display: flex; align-items: center;
}
.nav__mobtitel::-webkit-details-marker { display: none; }
.nav__mobliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav__mobkarte {
  display: flex; gap: 12px; align-items: center;
  min-height: 56px; padding: 8px 8px 8px 0;
  text-decoration: none;
  border-radius: var(--r-inner);
}
.nav__mobkarte .nav__kicon { width: 40px; height: 40px; }
.nav__mobkarte .nav__kname { font-size: 16px; }
.nav__mobkarte .nav__kunter { font-size: 13px; }
.nav__mobkarte--offen .nav__kicon { background: var(--canvas); color: var(--ink-3); }
.nav__mobkarte--offen .nav__kname { color: var(--ink-2); }
.nav__mobdirekt {
  display: flex; align-items: center;
  min-height: 56px;
  border-top: 1px solid var(--hairline);
  font-size: 16px; font-weight: 600; color: var(--ink);
  text-decoration: none;
}
.nav__mobkontakt {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hairline);
  display: grid; gap: 4px;
}
.nav__mobkontakt a {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 15px; color: var(--ink); text-decoration: none;
}
.nav__mobkontakt svg { width: 18px; height: 18px; color: var(--ink-2); }
.nav__mob {
  background: var(--canvas);
  padding: 16px var(--s-5) 28px;
}
.nav__mobnav { gap: 16px; }
.nav__mobsekt {
  border-top: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.nav__mobtitel {
  min-height: 44px;
  padding: 0 6px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .nav__mobtitel::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 20px; height: 20px;
    background: var(--ink-3);
    -webkit-mask: var(--mob-chevron) center / 20px 20px no-repeat;
            mask: var(--mob-chevron) center / 20px 20px no-repeat;
    transition: transform 200ms var(--ease-inplace);
  }
  .nav__mobsekt[open] .nav__mobtitel::after { transform: rotate(180deg); }
}
.nav__mob { --mob-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.2l4 4 4-4'/%3E%3C/svg%3E"); }
.nav__mobtitel:focus-visible {
  outline: 2px solid var(--action-deep);
  outline-offset: 2px;
  border-radius: var(--r-inner);
}
.nav__mobliste {
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(18, 34, 43, .10), 0 1px 3px rgba(18, 34, 43, .05);
  gap: 2px;
}
.nav__mobkarte {
  gap: 12px;
  padding: 10px 12px 10px 8px;
  min-height: 60px;
  border-radius: var(--r-card);
  background: transparent;
  transition: background-color 150ms var(--ease-inplace);
}
.nav__mobkarte .nav__kicon {
  width: 40px; height: 40px;
  border-radius: var(--r-inner);
  background: var(--cool-wash);
  color: var(--ink-2);
  transition: background-color 150ms var(--ease-inplace),
              color            150ms var(--ease-inplace);
}
.nav__mobkarte .nav__kname  { font-size: 15px; line-height: 1.45; font-weight: 600; }
.nav__mobkarte .nav__kunter { font-size: 13px; line-height: 1.35; color: var(--ink-3); }
@media (any-hover: hover) {
  .nav__mobkarte:hover { background: var(--canvas); }
  .nav__mobkarte:hover .nav__kicon { background: var(--action-soft); color: var(--action); }
}
.nav__mobkarte:active { background: var(--canvas); }
.nav__mobkarte--offen { cursor: default; }
.nav__mobkarte--offen:active { background: transparent; }
.nav__mobkarte--offen .nav__kicon { background: var(--canvas); color: var(--ink-3); }
.nav__mobkarte--offen .nav__kname { color: var(--ink-2); }
@media (any-hover: hover) {
  .nav__mobkarte--offen:hover { background: transparent; }
  .nav__mobkarte--offen:hover .nav__kicon { background: var(--canvas); color: var(--ink-3); }
}
.nav__mobkarte:focus-visible {
  outline: 2px solid var(--action-deep);
  outline-offset: 2px;
  border-radius: var(--r-card);
  background: var(--canvas);
}
.nav__mobkarte:focus-visible .nav__kicon { background: var(--action-soft); color: var(--action); }
.nav__mobkarte[aria-current="page"] { background: var(--canvas); }
.nav__mobkarte[aria-current="page"] .nav__kicon { background: var(--action-soft); color: var(--action); }
.nav__mobkarte[aria-current="page"] .nav__kmarke { background: var(--surface); }
.nav__mobdirekt {
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(18, 34, 43, .10), 0 1px 3px rgba(18, 34, 43, .05);
  font-size: 16px; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink);
  transition: background-color 150ms var(--ease-inplace);
}
@media (any-hover: hover) { .nav__mobdirekt:hover { background: var(--canvas); } }
.nav__mobdirekt:active { background: var(--canvas); }
.nav__mobdirekt[aria-current="page"] { background: var(--canvas); }
.nav__mobdirekt:focus-visible {
  outline: 2px solid var(--action-deep);
  outline-offset: 2px;
  border-radius: var(--r-card);
}
.nav__mobkontakt {
  margin-top: 20px;
  padding-top: 16px;
}
.nav__mobkontakt a {
  padding: 0 6px;
  border-radius: var(--r-inner);
  transition: background-color 150ms var(--ease-inplace);
}
@media (any-hover: hover) { .nav__mobkontakt a:hover { background: var(--cool-wash); } }
.nav__mobkontakt a:active { background: var(--cool-wash); }
.nav__mobkontakt a:focus-visible {
  outline: 2px solid var(--action-deep);
  outline-offset: 2px;
  border-radius: var(--r-inner);
}
@media (max-width: 359px) {
  .nav__mob { padding-inline: var(--s-4); }
  .nav__mobliste { padding: 4px; }
  .nav__mobkarte { gap: 10px; padding-left: 4px; padding-right: 8px; }
  .nav__mobdirekt { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__mobtitel::after,
  .nav__mobkarte, .nav__mobkarte .nav__kicon,
  .nav__mobdirekt, .nav__mobkontakt a { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__schub, .nav__panel,
  .nav__punkt, .nav__knopf, .nav__karte, .nav__kicon { transition: none; }
  .nav__panel { transform: none; }
  .nav--mob .nav__mob { animation: none; }
}
.hero { padding-top: 80px; padding-bottom: 0; }
.hero--textig.hero--kompakt { min-height: 0; }
.hero--textig {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: var(--s-10);
}
.hero__copy { text-align: center; max-width: 980px; margin-inline: auto; gap: var(--s-3); }
.hero__kicker { font-size: var(--t-body); color: var(--ink-2); }
.hero__copy .tagline { margin-top: var(--s-3); }
.hero__copy .btn-row { justify-content: center; margin-top: var(--s-8); }
.hero__figure { margin-top: 64px; display: flex; justify-content: center; }
.hero__figure img { width: auto; max-width: 94%; max-height: 620px; }
.hero__figure--paar { align-items: flex-end; }
.hero__figure--paar img { max-height: none; max-width: none; }
.hero__figure--paar .hero__g-hinten { width: 330px; position: relative; z-index: 1;
                                      margin-bottom: 40px; margin-right: -120px; }
.hero__figure--paar .hero__g-vorn   { width: 250px; position: relative; z-index: 2; }
@media (max-width: 720px) {
  .hero__figure--paar .hero__g-hinten { width: 195px; margin-bottom: 24px;
                                        margin-right: -70px; }
  .hero__figure--paar .hero__g-vorn   { width: 150px; }
}
.hero__figure--tiefe {
  align-items: flex-end;
  width: min(calc(var(--gesamt) * 1px), 100%);
  margin-inline: auto;
}
.hero__figure--tiefe .hero__tiefe-vorn {
  width: calc(var(--vorn) / var(--gesamt) * 100%);
  margin-right: calc(var(--ueber, 0) / var(--gesamt) * -100%);
  max-width: none; max-height: none;
  position: relative;
  z-index: 10;
}
.hero__figure--tiefe .hero__tiefe {
  position: relative;
  display: block;
  line-height: 0;
  width: calc(var(--breite) / var(--gesamt) * 100%);
  margin-bottom: calc(var(--hoch) / var(--gesamt) * 100%);
  margin-right: calc(var(--ueber) / var(--gesamt) * -100%);
}
.hero__figure--tiefe .hero__tiefe img {
  width: 100%; height: auto; max-width: none; max-height: none;
}
.hero__figure--tiefe .hero__tiefe::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(245, 245, 247, .24), rgba(245, 245, 247, .46));
  pointer-events: none;
}
.hero__note {
  margin-top: 72px;
  display: flex; flex-wrap: wrap; gap: var(--s-3) 56px;
  justify-content: center;
}
.hero__note span { font-size: var(--t-body-sm); color: var(--ink-3); }
.hero__figure--siegel { position: relative; width: fit-content; margin-inline: auto; }
.hero__figure--siegel .hero__siegel {
  position: absolute;
  width: var(--sw, 59%);
  left: var(--sx, -50%);
  top: 0;
  margin-top: var(--sy, -24px);
  z-index: 2;
  line-height: 0;
}
.hero__figure--siegel .hero__siegel img {
  width: 100%; height: auto; max-width: none; max-height: none;
}
.hero__figure--siegel .hero__siegel--kreis img { clip-path: circle(47%); }
@media (max-width: 900px) {
  .hero__figure--siegel .hero__siegel { width: var(--sw, 42%); left: var(--sx, -20%); margin-top: var(--sy, -14px); }
}
@media (max-width: 480px) {
  .hero__figure--siegel .hero__siegel { width: var(--sw, 36%); left: var(--sx, -6%); margin-top: var(--sy, -8px); }
}
.hero__figure--turm {
  flex-direction: column;
  align-items: center;
  width: min(calc(var(--breit) * 1px), 100%);
  margin-inline: auto;
}
.hero__figure--turm .hero__turm-oben {
  display: block;
  line-height: 0;
  width: var(--breite);
  margin-bottom: calc(var(--tiefer) * -1);
  margin-right: calc(var(--seite) * -2);
  position: relative;
  z-index: 1;
}
.hero__figure--turm .hero__turm-oben img { width: 100%; height: auto; max-width: none; max-height: none; }
.hero__figure--turm .hero__turm-unten { width: 100%; height: auto; max-width: none; max-height: none; position: relative; z-index: 2; }
.hero--motiv {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: var(--s-10);
}
.hero--motiv > .inner { width: 100%; }
.hero-motiv {
  --kachel-breite: min(1200px, 100vw) - 2 * var(--s-8);
  min-height: calc((var(--kachel-breite)) / 2.49);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "motiv";
  border-radius: var(--r-card);
  overflow: clip;
  background: var(--deep);
}
.hero-motiv__rahmen,
.hero-motiv__copy,
.hero-motiv::after { grid-area: motiv; }
.hero-motiv__rahmen { position: relative; z-index: 0; line-height: 0; overflow: clip; }
.hero-motiv__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
  object-position: 52% 38%;
}
.hero-motiv::after {
  content: "";
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(18, 34, 43, .86) 0%,
      rgba(18, 34, 43, .84) 34%,
      rgba(18, 34, 43, .60) 56%,
      rgba(18, 34, 43, .12) 76%,
      rgba(18, 34, 43,  0)  90%),
    linear-gradient(rgba(18, 34, 43, .18), rgba(18, 34, 43, .18));
}
.hero__copy.hero-motiv__copy {
  z-index: 2;
  align-self: center;
  justify-self: start;
  max-width: 64%;
  margin-inline: 0;
  padding: var(--pad-gross);
  text-align: left;
  color: var(--on-deep);
}
.hero__copy.hero-motiv__copy .hero__kicker { color: var(--on-deep-2); }
.hero__copy.hero-motiv__copy .hero-type    { color: var(--on-deep); }
.hero__copy.hero-motiv__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-subheading);
  line-height: var(--lh-subheading);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-motiv__bild {
      animation: hc-heran linear both;
      animation-timeline: scroll();
      animation-range: 0 640px;
      will-change: transform;
    }
    @keyframes hc-heran {
      from { transform: scale(1); }
      to   { transform: scale(1.12); }
    }
  }
}
@media (max-width: 900px) {
  .hero-motiv {
    min-height: 0;
    grid-template-areas: "motiv" "text";
  }
  .hero-motiv__copy { grid-area: text; }
  .hero-motiv::after { display: none; }
  .hero__copy.hero-motiv__copy {
    max-width: none;
    justify-self: stretch;
    padding: var(--pad-mittel);
  }
  .hero-motiv__rahmen { aspect-ratio: 16 / 10; }
  .hero-motiv__bild { object-position: 90% 40%; }
}
@media (max-width: 560px) {
  .hero__copy.hero-motiv__copy { padding: var(--pad-klein); }
  .hero__copy.hero-motiv__copy .tagline {
    font-size: var(--t-body);
    line-height: var(--lh-body);
  }
  .hero-motiv__rahmen { aspect-ratio: 3 / 2; }
}
.hero--motiv > .inner {
  max-width: none;
  padding-inline: 0;
  width: 100%;
  margin-inline: 0;
}
.hero-motiv {
  --kachel-breite: 100%;
  border-radius: 0;
  min-height: calc(100svh - var(--nav-h));
}
.hero--motiv {
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}
.hero--motiv .hero__copy.hero-motiv__copy {
  max-width: min(var(--page), 100%);
  margin-inline: auto;
  padding-inline: var(--s-8);
  box-sizing: border-box;
  width: 100%;
}
.hero__copy.hero-motiv__copy .hero__kicker,
.hero__copy.hero-motiv__copy .hero-type,
.hero__copy.hero-motiv__copy .tagline { max-width: 46ch; }
.hero__copy.hero-motiv__copy .btn-row {
  justify-content: flex-start;
  margin-top: var(--s-6);
  max-width: none;
}
.hero__copy.hero-motiv__copy .btn--line {
  color: var(--on-deep);
  border-color: #527183;
}
.hero__copy.hero-motiv__copy .btn--line:hover {
  background: rgba(238, 242, 244, .12);
  color: #fff;
}
.hero-motiv::after {
  background:
    linear-gradient(90deg,
      rgba(18, 34, 43, .88) 0%,
      rgba(18, 34, 43, .84) 26%,
      rgba(18, 34, 43, .62) 44%,
      rgba(18, 34, 43, .14) 66%,
      rgba(18, 34, 43,  0)  82%),
    linear-gradient(rgba(18, 34, 43, .16), rgba(18, 34, 43, .16));
}
.hero.hero--zwei { background: var(--wash); padding-bottom: var(--s-14); }
.hero.hero--zwei > .inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-14);
  align-items: center;
}
.hero.hero--zwei .hero__copy {
  text-align: left;
  max-width: none;
  margin-inline: 0;
}
.hero.hero--zwei .hero__copy .btn-row { justify-content: flex-start; }
.hero.hero--zwei .hero__figure { margin-top: 0; justify-content: flex-end; }
.hero.hero--zwei .hero__figure img {
  width: 100%;
  max-width: 520px;
  max-height: none;
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px -24px rgba(18, 34, 43, .35);
}
.hero.hero--zwei .hero__note {
  grid-column: 1 / -1;
  margin-top: var(--s-14);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 860px) {
  .hero.hero--zwei > .inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
  .hero.hero--zwei .hero__figure { justify-content: center; }
  .hero.hero--zwei .hero__figure img { max-width: 100%; }
  .hero.hero--zwei .hero__note { margin-top: var(--s-10); }
}
.hero__figure--person { display: flex; justify-content: flex-end; width: 100%; }
.hero__portraet {
  width: 100%; max-width: 440px; aspect-ratio: 4 / 5;
  border-radius: var(--r-card); overflow: hidden;
  background-size: cover; background-position: center 30%;
  display: flex; align-items: flex-start; padding: var(--s-6);
  box-shadow: 0 24px 60px -24px rgba(18, 34, 43, .35);
}
.hero__portraet--offen {
  background: var(--surface); border: 1px dashed var(--hairline);
  box-shadow: none;
}
.hero__leer {
  font-size: var(--t-body-sm); line-height: 1.5;
  letter-spacing: var(--ls-body-sm); color: var(--ink-3);
}
@media (max-width: 860px) {
  .hero__figure--person { justify-content: center; }
  .hero__portraet { max-width: none; aspect-ratio: 4 / 3; }
}
.hero.hero--zwei.hero--portraet > .inner { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 860px) {
  .hero.hero--zwei.hero--portraet > .inner { grid-template-columns: minmax(0, 1fr); }
}
.hero--lang.hero--portraet .hero-type { font-size: clamp(28px, 3vw, 42px); }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
         gap: var(--s-8) var(--s-10); }
.logos img { height: 40px; width: auto; }
.logos--box { gap: var(--s-6) var(--s-5); }
.logos--box img { width: 104px; height: 104px; object-fit: contain; }
@media (max-width: 900px) { .logos--box img { width: 80px; height: 80px; } }
.logos--tech {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--pad-klein);
  gap: var(--s-8) var(--s-10);
}
.logos--tech img { height: 32px; }
.logos-satz { text-align: center; color: var(--ink-2); max-width: 46ch; margin-inline: auto; }
@media (max-width: 720px) {
  .logos { gap: var(--s-6) var(--s-8); }
  .logos:not(.logos--box):not(.logos--belegwand) img { height: 26px; }
}
.on-deep .logos--box img {
  background: #fff;
  border-radius: var(--r-inner);
  padding: var(--s-4);
  box-sizing: border-box;
}
.logos__mehr {
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.on-deep .logos--box .logos__mehr {
  background: #fff;
  border-radius: var(--r-inner);
  box-sizing: border-box;
}
@media (max-width: 900px) { .logos__mehr { width: 80px; height: 80px; } }
.lb {
  --lb-oben: 40px;
  --lb-unten: 56px;
  --lb-zelle: 96px;
  --lb-luft: 8px;
  --lb-reihe: 64px;
  --lb-b: 84px;
  --lb-h: 40px;
  --lb-weg: calc(14vh + 37px);
  overflow-x: clip;
}
@media (min-width: 560px) {
  .lb {
    --lb-oben: 48px; --lb-unten: 64px;
    --lb-zelle: 124px; --lb-luft: 20px; --lb-reihe: 84px;
    --lb-b: 116px; --lb-h: 48px;
    --lb-weg: calc(14vh + 39px);
  }
}
@media (min-width: 900px) {
  .lb {
    --lb-oben: 56px; --lb-unten: 72px;
    --lb-zelle: 150px; --lb-luft: 30px; --lb-reihe: 98px;
    --lb-b: 150px; --lb-h: 56px;
    --lb-weg: calc(14vh + 45px);
  }
}
.section.lb { padding-block: var(--lb-oben) var(--lb-unten); }
.section.on-canvas + .section.on-canvas.lb { padding-top: var(--lb-oben); }
@media (forced-colors: active) {
  .lb { forced-color-adjust: none; }
}
.lb-titel {
  margin: 0 0 var(--s-4);
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lb--betitelt { --lb-oben: var(--s-4); }
@media (max-width: 559px) {
  .lb--betitelt > .inner { padding-inline: var(--s-6); }
}
@media (min-width: 560px) {
  .lb--betitelt { --lb-oben: var(--s-4); }
}
@media (min-width: 900px) {
  .lb--betitelt .lb-titel { margin-bottom: var(--s-6); }
}
.lb-reihe { display: flex; gap: var(--lb-luft); }
.lb-folge {
  display: flex;
  gap: var(--lb-luft);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-zelle {
  flex: 0 0 var(--lb-zelle);
  height: var(--lb-reihe);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-zelle img {
  display: block;
  width: var(--lb-b);
  height: var(--lb-h);
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.lb-zelle--kleiner img {
  width: calc(var(--lb-b) * .8);
  height: calc(var(--lb-h) * .8);
}
.lb-reihe--2,
.lb-kopie { display: none; }
.lb-reihe--1 {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-8);
  box-sizing: border-box;
}
.lb-reihe--1 > .lb-folge { flex-wrap: wrap; }
@media (max-width: 559px) {
  .lb-reihe--1 .lb-zelle { flex-basis: 88px; }
}
@media (max-width: 600px) {
  .lb-reihe--1 { padding-inline: var(--s-6); }
  .lb-reihe--1 > .lb-folge { justify-content: center; }
}
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.tile {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--pad-klein);
  display: flex; flex-direction: column; gap: var(--s-4);
  transition: background-color var(--dur) var(--ease-inplace);
}
.tile { position: relative; }
.tile .arrow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile:hover, .tile:focus-within { background: var(--action-soft); }
.tile:active { background: var(--cool-wash); transition-duration: var(--dur-tap); }
.tile__fig {
  background: var(--canvas); border-radius: var(--r-inner);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  padding: var(--s-5); overflow: hidden;
}
.tile__fig img { max-height: 100%; width: auto; object-fit: contain; }
.tile h3 { font-size: var(--t-subheading); letter-spacing: var(--ls-subheading); }
.tile p  { font-size: var(--t-body-sm); line-height: 1.5; color: var(--ink-2); }
.tile .arrow { margin-top: auto; font-size: var(--t-body-sm); color: var(--ink); }
.tile--sammel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cool-wash);
}
.tile--sammel h3 { margin-top: 0; }
.tile--wegweiser:hover,
.tile--wegweiser:focus-within { background: var(--cool-wash); }
.tile--wegweiser { justify-content: flex-start; }
.tile__kopf { display: flex; align-items: center; gap: var(--s-2); }
.tile__zahl {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  color: var(--action);
  background: var(--action-soft);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-2);
}
.tile__wege { display: flex; flex-direction: column; }
.tile__wege li { margin: 0; }
.tile__weg {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  padding: var(--s-3);
  border-radius: var(--s-3);
  color: var(--ink);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  transition: background-color var(--dur) var(--ease-inplace);
}
.tile__weg:hover,
.tile__weg:focus-visible { background: var(--action-soft); text-decoration: none; }
.tile__weg:active { background: var(--cool-wash); transition-duration: var(--dur-tap); }
.tile__weg:focus-visible {
  outline: 2px solid var(--action-deep);
  outline-offset: 2px;
  border-radius: var(--s-3);
}
.tile__ikon { flex: 0 0 auto; display: flex; color: var(--ink-3); }
.tile__ikon svg { display: block; }
.tile__fig--standorte {
  container-type: size;
  padding: 0;
}
.tile__standorte {
  flex: none;
  width: 320px;
  scale: var(--standorte-mass, 1);
}
.tile__standorte .fsu__karte {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--surface);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 36px -16px rgba(0, 0, 0, .22);
}
.tile__standorte .fsu__werk { font-size: 24px; }
@container (min-height: 1px) { .tile__standorte { --standorte-mass: .35; } }
@container (min-height: 134px) { .tile__standorte { --standorte-mass: .4; } }
@container (min-height: 151px) { .tile__standorte { --standorte-mass: .45; } }
@container (min-height: 168px) { .tile__standorte { --standorte-mass: .5; } }
@container (min-height: 184px) { .tile__standorte { --standorte-mass: .55; } }
@container (min-height: 201px) { .tile__standorte { --standorte-mass: .6; } }
@container (min-height: 218px) { .tile__standorte { --standorte-mass: .65; } }
@container (min-height: 234px) { .tile__standorte { --standorte-mass: .7; } }
@container (min-height: 251px) { .tile__standorte { --standorte-mass: .75; } }
@container (min-height: 268px) { .tile__standorte { --standorte-mass: .8; } }
@container (min-height: 285px) { .tile__standorte { --standorte-mass: .85; } }
@container (min-height: 302px) { .tile__standorte { --standorte-mass: .9; } }
@container (min-height: 318px) { .tile__standorte { --standorte-mass: .95; } }
@container (min-height: 335px) { .tile__standorte { --standorte-mass: 1; } }
.ueb__raster {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s-10);
  align-items: start;
}
.ueb__kopf .eyebrow { margin-bottom: var(--s-3); }
.ueb__kopf .heading { margin: 0; }
@media (min-width: 861px) {
  .ueb__kopf { position: sticky; top: calc(var(--nav-h) + var(--s-8)); }
}
.ueb__text { display: grid; gap: var(--s-5); }
.ueb__text .lead { margin: 0; max-width: 58ch; }
.ueb__text .btn-row { margin-top: var(--s-3); justify-content: flex-start; }
@media (max-width: 860px) {
  .ueb__raster { grid-template-columns: 1fr; gap: var(--s-6); }
}
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
.facts .n { font-size: clamp(26px, 6.4vw, 40px); font-weight: 600; letter-spacing: -0.02em;
            line-height: 1.1; overflow-wrap: anywhere;
            font-variant-numeric: tabular-nums; }
.facts .k { font-size: var(--t-body-sm); color: var(--on-deep-2); margin-top: var(--s-1);
            overflow-wrap: anywhere; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.praxis {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.praxis__grund {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.praxis__foto {
  position: absolute;
  inset: -12% 0;
  background-size: cover;
  background-position: 0% 50%;
  filter: saturate(.55) contrast(.95);
  transform: translateZ(0);
}
.praxis__ton {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18,34,43,0) 40%, rgba(18,34,43,.35) 100%),
    rgba(18,34,43,.8);
}
.praxis__bahn { position: relative; z-index: 1; }
.praxis__spalte { max-width: 620px; }
.praxis__block { margin: 0; }
.praxis__auf {
  display: block;
  width: 36px;
  color: var(--decor);
  margin-bottom: var(--s-5);
}
.praxis__auf svg { display: block; width: 100%; height: auto; }
.praxis__zitat {
  margin: 0;
  color: var(--on-deep);
  font-size: clamp(23px, 1.1vw + 18.9px, 34px);
  font-weight: 600;
  line-height: 1.31;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.praxis__zitat p { margin: 0; }
.praxis__wer {
  margin-top: var(--s-8);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.praxis__kopf {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: clip;
  background-size: cover;
  background-position: 50% 30%;
}
.praxis__wer-text { display: flex; flex-direction: column; gap: 2px; }
.praxis__name {
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-body);
  color: var(--on-deep);
}
.praxis__rolle {
  font-size: var(--t-body-sm);
  line-height: 1.4;
  letter-spacing: var(--ls-body-sm);
  color: var(--on-deep-2);
}
.praxis__spalte > .btn { margin-top: var(--s-6); }
.on-deep .praxis__spalte > .btn--line { border-color: rgba(255,255,255,.7); }
.on-deep .praxis__spalte > .btn--line:hover { background: rgba(255,255,255,.12); }
.praxis__spalte > .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (min-width: 735px) {
  .praxis__spalte { margin-inline: auto; }
  .praxis__auf { width: 44px; margin-bottom: var(--s-6); }
  .praxis__spalte > .btn { margin-top: var(--s-8); }
}
@media (min-width: 735px) {
  .praxis { padding-top: 260px; padding-bottom: 88px; }
  .praxis__foto { background-size: 118% auto; background-position: 20% 8%; }
  .praxis__spalte { position: relative; max-width: 1120px; }
  .praxis__spalte > .btn { position: absolute; right: 0; bottom: 0; margin-top: 0; }
}
@media (min-width: 1200px) {
  .praxis { padding-top: 286px; }
  .praxis__zitat { font-size: 34px; line-height: 1.31; max-width: 900px; }
  .praxis__spalte > .btn { right: calc(100% - 895px); }
}
@media (min-width: 1600px) {
  .praxis__foto { background-size: 116% auto; background-position: 18% 21%; }
}
@media (max-width: 734px) {
  .praxis { padding-block: 260px 64px; }
  .praxis__foto {
    inset: -48px 0 auto 0; height: 516px;
    background-position: 38% 0%;
  }
  .praxis__ton {
    background:
      linear-gradient(180deg, rgba(18,34,43,0) 0, rgba(18,34,43,0) 208px,
        rgba(18,34,43,.6) 378px, rgb(18,34,43) 468px),
      rgba(18,34,43,.7);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .praxis__foto {
      animation: praxis-grund linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
    @keyframes praxis-grund {
      from { transform: translateY(-48px); }
      to   { transform: translateY(48px); }
    }
  }
}
.team { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--s-10); align-items: center; }
.team img { border-radius: var(--r-card); }
@media (max-width: 820px) { .team { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
.cta { text-align: center; }
.cta .btn-row { justify-content: center; margin-top: var(--s-8); }
:root {
  --foot-luft: 16px;
  --foot-radius: var(--r-card);
  --foot-frei: 660px;
}
@media (min-width: 700px)  { :root { --foot-luft: 32px; } }
@media (min-width: 1100px) { :root { --foot-luft: min(6.25vw, 110px); --foot-radius: 48px; --foot-frei: 600px; } }
#inhalt > .on-deep:last-child {
  padding-bottom: var(--s-4);
  box-shadow: 0 1px 0 var(--deep);
}
.foot {
  position: relative;
  background: var(--deep);
  color: var(--on-deep);
  padding: var(--s-8) var(--foot-luft) 0;
}
.foot__karte {
  position: relative;
  z-index: 2;
  max-width: 1260px;
  margin-inline: auto;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--foot-radius);
  padding: var(--pad-klein) var(--s-6) var(--s-6);
}
@media (min-width: 700px)  { .foot__karte { padding: var(--pad-mittel) var(--pad-mittel) var(--s-8); } }
@media (min-width: 1100px) { .foot__karte { padding: var(--pad-gross) var(--pad-gross) var(--s-8); } }
.foot__karte a {
  color: var(--ink);
  font-size: var(--t-body-sm);
  letter-spacing: var(--ls-body-sm);
  line-height: 1.35;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.foot__karte a:hover {
  color: var(--action-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.foot__oben { display: grid; gap: var(--s-8); }
@media (min-width: 1100px) {
  .foot__oben { grid-template-columns: minmax(250px, 19rem) 1fr; gap: var(--s-10); align-items: start; }
}
.foot__spaltentitel {
  margin: 0 0 var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.foot__adresse {
  margin: 0;
  font-style: normal;
  font-size: var(--t-body-sm);
  line-height: 1.6;
  color: var(--ink-2);
}
.foot__register { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
@media (min-width: 700px) { .foot__register { grid-template-columns: repeat(4, max-content); justify-content: space-between; } }
.foot ul { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; }
.foot li { margin: 0; }
.foot__hilfe {
  margin-top: var(--s-10);
  padding: var(--s-8) 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6) var(--s-10);
}
.foot__hilfe-titel {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--ink);
}
@media (min-width: 1100px) { .foot__hilfe-titel { font-size: 32px; } }
.foot__hilfe-titel span { color: var(--ink-3); }
.foot__wege { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-14); }
.foot__weg { display: flex; flex-direction: column; gap: var(--s-1); }
.foot__weg .foot__spaltentitel { border-top: 0; padding-top: 0; margin-bottom: var(--s-1); }
.foot__karte a.foot__weg-tel { font-size: var(--t-body); letter-spacing: var(--ls-body); font-weight: 600; }
.foot__karte a.foot__weg-mail { color: var(--ink-2); }
.foot__karte a.foot__weg-mail:hover { color: var(--action-deep); }
.foot__fine {
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  font-size: var(--t-body-sm);
  color: var(--ink-2);
}
.foot__fine a { color: var(--ink-2); min-width: 24px; justify-content: center; }
.foot__fine a.foot__foerder { margin-left: auto; }
.foot__foerder img { display: block; width: 220px; height: auto; }
@media (max-width: 699px) {
  .foot__copy { flex-basis: 100%; }
  .foot__fine a.foot__foerder { margin-left: 0; flex-basis: 100%; justify-content: flex-start; margin-top: var(--s-2); }
  .foot__foerder img { width: 200px; }
}
.foot__frei {
  position: relative;
  height: var(--foot-frei);
  margin-inline: calc(-1 * var(--foot-luft));
  clip-path: inset(0);
}
.foot__marke {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: var(--foot-frei);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-8) var(--s-4);
  text-align: center;
}
.foot__wort {
  margin: 0;
  font-size: 34px;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--on-deep);
}
@media (min-width: 700px) { .foot__wort { font-size: var(--t-heading); } }
@media (min-width: 1100px) {
  .foot__wort { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
}
.foot__satz { margin: var(--s-4) auto 0; max-width: 44rem; font-size: var(--t-body); line-height: var(--lh-body); color: var(--on-deep); }
.foot__ort  { margin: var(--s-2) 0 0; font-size: var(--t-body-sm); color: var(--on-deep-2); }
.foot ul.foot__sozial { margin: var(--s-8) 0 0; flex-direction: row; justify-content: center; gap: var(--s-3); }
.foot__sozial a {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-inner);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--on-deep);
  transition: background-color var(--dur-tap) var(--ease-inplace);
}
.foot__sozial a:hover { background: rgba(255,255,255,.18); }
.foot__sozial svg { display: block; }
.foot__sozial a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.showcase {
  border-radius: var(--r-card);
  padding: var(--pad-gross);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
  gap: var(--s-10); align-items: center;
  overflow: clip;
}
.showcase--flip .showcase__fig { order: -1; }
.showcase .heading { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.showcase .showcase__fig { animation: none; }
.showcase__fig img {
  margin-inline: auto;
  width: 100%; height: auto; max-height: 480px;
  object-fit: contain;
}
.showcase__list { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.showcase__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3);
                     font-size: var(--t-body); color: var(--ink-2); }
.showcase__list svg { margin-top: 5px; color: var(--ink); }
@media (max-width: 1100px) {
  .showcase { gap: var(--s-8); }
}
@media (max-width: 900px) {
  .showcase { grid-template-columns: minmax(0, 1fr); padding: var(--pad-gross); gap: var(--s-6); }
  .showcase--flip .showcase__fig { order: 0; }
  .showcase__fig img { max-height: 300px; }
}
.duoshow__marke {
  display: inline-block; margin-bottom: var(--s-3);
  padding: 4px 12px; border-radius: 999px;
  background: var(--ink); color: var(--surface);
  font-size: var(--t-body-sm); font-weight: 600;
}
.duoshow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-4); }
.duoshow__card {
  border-radius: var(--r-card); padding: var(--pad-mittel);
  display: flex; flex-direction: column; gap: var(--s-4);
  min-height: 440px;
}
.duoshow__card img { margin-top: auto; margin-inline: auto;
                     width: 100%; height: auto; max-height: 260px; object-fit: contain; }
@media (max-width: 820px) {
  .duoshow { grid-template-columns: minmax(0, 1fr); }
  .duoshow__card { min-height: 0; padding: var(--pad-klein); }
}
.showcase--personen              { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); }
.showcase--personen.showcase--flip { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
.showcase--personen .showcase__fig { min-height: 0; }
.showcase--personen {
  align-items: end;
  padding-bottom: 0;
}
.showcase--personen > .stack {
  padding-bottom: var(--pad-gross);
}
.showcase--personen .showcase__fig {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.showcase--personen .showcase__fig img {
  width: var(--breite);
  max-width: none;
  max-height: none;
  height: auto;
  object-fit: contain;
  margin-inline: 0;
  display: block;
}
.showcase--personen .showcase__fig img:first-child {
  margin-right: calc(var(--ueber) * -1);
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .showcase--personen,
  .showcase--personen.showcase--flip { grid-template-columns: minmax(0, 1fr); }
  .showcase--personen > .stack { padding-bottom: 0; }
  .showcase--personen .showcase__fig { min-height: 0; margin-top: var(--s-6); }
  .showcase--personen .showcase__fig img { width: calc(var(--breite) * 1.72); }
  .showcase--personen .showcase__fig img:first-child {
    margin-right: calc(var(--ueber, 0%) * -1.72);
  }
}
.neu { color: var(--ember); font-weight: 500; font-size: var(--t-body-sm); }
.ribbon {
  background: var(--surface); text-align: center;
  padding: 11px var(--s-6);
  font-size: var(--t-body-sm); color: var(--ink-2);
}
.ribbon a { color: var(--action); display: inline-block; min-height: 24px; padding-block: 2px; }
@media (min-width: 1000px) {
  }
.sprung {
  background: var(--surface);
  border-block: 1px solid var(--hairline);
  position: sticky; top: var(--nav-h); z-index: 40;
}
.sprung__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--s-8);
  overflow-x: auto; scrollbar-width: none;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.sprung__liste::-webkit-scrollbar { display: none; }
.sprung__liste a {
  display: inline-block; padding-block: var(--s-4);
  font-size: var(--t-body-sm); color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.sprung__liste a:hover { color: var(--ink); border-bottom-color: var(--action); }
.thema {
  border-radius: var(--r-card); padding: var(--pad-gross);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-10); align-items: center;
}
.thema__fig { display: grid; place-items: center; }
.thema__fig img { max-width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.14)); }
.merkmale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.merkmal h3 {
  font-size: var(--t-subheading); line-height: 1.3; letter-spacing: -.005em;
  margin: 0 0 var(--s-3); display: flex; gap: var(--s-3); align-items: baseline;
  overflow-wrap: anywhere; -webkit-hyphens: manual; hyphens: manual;
}
.merkmal h3 svg { flex: none; color: var(--action); translate: 0 3px; }
.merkmal p { margin: 0; color: var(--ink-2); font-size: var(--t-body); line-height: var(--lh-body); }
.pakete {
  overflow-x: auto;
  scrollbar-width: none;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.pakete::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .pakete__t th:first-child,
  .pakete__t td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--hairline);
  }
}
.pakete__t { border-collapse: collapse; width: 100%; min-width: 720px; table-layout: fixed; }
.pakete__t thead th:first-child { width: 28%; }
.pakete__t thead th + th { width: 18%; }
.pakete__t th, .pakete__t td { padding: var(--s-3) var(--s-4); text-align: left; }
.pakete__t thead th { vertical-align: top; border-bottom: 1px solid var(--hairline); }
.pakete__t tbody th {
  font-weight: 400; font-size: var(--t-body-sm); color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.pakete__t thead th:first-child,
.pakete__t tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--hairline);
}
.pakete__t tbody td {
  text-align: center; border-bottom: 1px solid var(--hairline);
}
.pakete__t tbody tr:hover th, .pakete__t tbody tr:hover td { background: var(--action-soft); }
.pakete__name   { display: block; font-size: var(--t-body); font-weight: 600; }
.pakete__zusatz { display: block; font-size: var(--t-caption); color: var(--ink-3); margin-top: 2px; }
.pakete__marker {
  display: inline-block; margin-top: var(--s-2);
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .05em;
  color: var(--ember);
}
.ist-ja, .ist-option, .ist-nein {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%;
  position: relative;
}
.ist-ja     { background: var(--action); }
.ist-option { background: var(--surface); border: 1.5px solid var(--action); }
.ist-nein   { background: var(--cool-wash); }
.ist-ja::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/10px 8px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2l2.6 2.6L9 1.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ist-option::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/8px 2px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 2'%3E%3Crect width='8' height='2' rx='1' fill='%23367282'/%3E%3C/svg%3E");
}
.pakete__legende {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  font-size: var(--t-body-sm); color: var(--ink-2);
}
.pakete__legende li { display: flex; align-items: center; gap: var(--s-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 900px) {
  .thema { grid-template-columns: minmax(0, 1fr); padding: var(--pad-gross); }
  .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .merkmale { grid-template-columns: minmax(0, 1fr); }
  .sprung__liste { gap: var(--s-5); }
}
.thema--ohnebild { grid-template-columns: minmax(0, 1fr); }
.thema--ohnebild .lead { max-width: var(--text); }
.gw {
  --gw-rand: max(var(--s-8), calc((100vw - var(--page)) / 2 + var(--s-8)));
  --gw-karte: 420px;
  --gw-hoch: 420px;
  --gw-fl: var(--canvas);
  overflow-x: clip;
}
.gw.on-canvas { --gw-fl: var(--surface); }
.gw .gw__kopf { position: relative; }
.gw__pfeile { display: none; gap: var(--s-2); }
@media (min-width: 700px) {
  .gw__pfeile { display: flex; position: absolute; right: 0; bottom: 0; }
  .gw .gw__kopf > .stack { padding-right: 112px; }
}
.gw__pfeile[hidden] { display: none; }
.gw__pfeil {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: opacity 200ms var(--ease-inplace, ease), transform 150ms var(--ease-inplace, ease);
}
.gw__pfeil svg { width: 18px; height: 18px; }
.gw__pfeil:active { transform: scale(.94); }
.gw__pfeil:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.gw__pfeil:disabled { opacity: .35; cursor: default; }
.gw__schiene {
  position: relative;
  margin-inline: calc(var(--gw-rand) * -1);
  padding: var(--s-1) var(--gw-rand) var(--s-2);
  scroll-padding-inline: var(--gw-rand);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.gw__schiene--zieht { cursor: grabbing; scroll-behavior: auto !important; user-select: none; -webkit-user-select: none; }
.gw__schiene::-webkit-scrollbar { display: none; }
.gw__schiene:focus-visible { outline: 3px solid var(--action); outline-offset: -3px; border-radius: var(--r-card); }
@media (prefers-reduced-motion: no-preference) { .gw__schiene { scroll-behavior: smooth; } }
.gw__reihe {
  list-style: none;
  display: flex;
  gap: 12px;
  margin: 0; padding: 0;
  width: max-content;
}
.gw .gw__reihe > li {
  flex: 0 0 var(--gw-karte);
  display: flex;
}
.gw .galerie__karte {
  position: relative;
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  gap: 0;
  border-radius: var(--r-card);
  background: var(--gw-fl);
  overflow: hidden;
}
.gw .galerie__karte figcaption {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-6) 0;
  color: var(--ink);
}
.gw__name {
  font-size: var(--t-subheading);
  line-height: var(--lh-subheading);
  letter-spacing: var(--ls-subheading);
  font-weight: 600;
}
.gw__pill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-size: 13px; line-height: 18px;
  color: var(--ink-2);
}
.gw .galerie__fig {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.gw .galerie__fig img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.gw__reihe--foto .galerie__karte { background: var(--deep); height: var(--gw-hoch); }
.gw__reihe--foto .galerie__fig { position: absolute; inset: 0; padding: 0; }
.gw__reihe--foto .galerie__fig img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
}
.gw__reihe--foto .galerie__karte figcaption {
  position: relative; z-index: 1;
  margin-top: auto;
  padding: var(--s-10) var(--s-6) var(--s-6);
  color: #fff;
  background: linear-gradient(180deg, rgba(18, 34, 43, 0) 0, rgba(18, 34, 43, .82) 60%);
}
.gw__reihe--foto .gw__pill { color: #fff; border-color: rgba(255, 255, 255, .7); }
@media (max-width: 559px) {
  .gw { --gw-karte: min(327px, calc(100vw - var(--gw-rand) - 48px)); --gw-hoch: 360px; }
}
.lang__kopf { max-width: var(--text); }
.lang__kopf .heading { max-width: 20ch; }
.lang__tab {
  overflow-x: auto;
  scrollbar-width: none;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.lang__tab::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .lang__tab thead th:first-child,
  .lang__tab tbody th:first-child,
  .lang__tab tfoot th:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--hairline);
  }
}
.lang__tab table { border-collapse: collapse; width: 100%; min-width: 480px; }
.lang__tab th, .lang__tab td { padding: var(--s-3) var(--s-4); text-align: left; }
.lang__tab thead th { font-size: var(--t-body-sm); color: var(--ink-2); font-weight: 400;
                      border-bottom: 1px solid var(--hairline); }
.lang__tab tbody th { font-weight: 400; color: var(--ink); }
.lang__tab tbody th, .lang__tab tbody td { border-bottom: 1px solid var(--hairline); }
.lang__tab tfoot th, .lang__tab tfoot td { font-weight: 600; padding-top: var(--s-4); }
.lang__tab .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .lang__tab { overflow-x: visible; background: none; }
  .lang__tab table { min-width: 0; }
  .lang__tab thead th:first-child,
  .lang__tab tbody th:first-child,
  .lang__tab tfoot th:first-child { position: static; background: none; box-shadow: none; }
  .lang__tab th, .lang__tab td { padding: var(--s-3) var(--s-2); vertical-align: top; }
  .lang__tab thead th:first-child,
  .lang__tab tbody th:first-child,
  .lang__tab tfoot th:first-child { padding-left: 0; width: 42%; }
  .lang__tab .num { text-align: left; }
  .lang__tab--stapel table, .lang__tab--stapel tbody, .lang__tab--stapel tfoot,
  .lang__tab--stapel tr, .lang__tab--stapel th, .lang__tab--stapel td { display: block; }
  .lang__tab--stapel thead { display: none; }
  .lang__tab--stapel tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); }
  .lang__tab--stapel tfoot tr { border-bottom: 0; }
  .lang__tab--stapel tbody th, .lang__tab--stapel tbody td,
  .lang__tab--stapel tfoot th, .lang__tab--stapel tfoot td { border: 0; padding: 0; }
  .lang__tab--stapel tbody th:first-child,
  .lang__tab--stapel tfoot th:first-child { width: auto; font-weight: 600; margin-bottom: var(--s-2); }
  .lang__tab--stapel td + td { margin-top: var(--s-3); }
  .lang__tab--stapel td::before { content: attr(data-label); display: block;
                                  font-size: var(--t-body-sm); color: var(--ink-2); }
}
.lang__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.lang__n { font-size: clamp(32px, 5vw, 52px); font-weight: 600; letter-spacing: -0.02em;
           line-height: 1.05; margin: 0; font-variant-numeric: tabular-nums; }
.lang__k { font-size: var(--t-body-sm); color: var(--ink-2); margin: var(--s-2) 0 0;
           line-height: var(--lh-body); }
.lang__q { color: var(--ink-3); }
.lang__gross { text-align: center; padding: var(--pad-mittel);
               background: var(--f-mint); border-radius: var(--r-card); }
.lang__gross-n { font-size: clamp(48px, 10vw, 96px); font-weight: 600; letter-spacing: -0.03em;
                 line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.lang__gross-k { font-size: var(--t-subheading); color: var(--ink-2); margin: var(--s-3) 0 0; }
.lang__punkte { list-style: none; counter-reset: p; margin: 0; padding: 0;
                display: grid; gap: var(--s-8); }
.lang__punkte > li { counter-increment: p; display: grid; grid-template-columns: 40px minmax(0, 1fr);
                   gap: var(--s-5); align-items: start; max-width: 900px; }
.lang__punkte > li::before {
  content: counter(p); grid-row: span 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--action); color: #fff;
  font-size: var(--t-body-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.lang__punkte > li > * { grid-column: 2; }
.lang__punkte p { margin: var(--s-2) 0 0; color: var(--ink-2); line-height: var(--lh-body); }
.lang__hinweis { font-size: var(--t-body-sm); color: var(--ink-3); max-width: var(--text);
                 line-height: var(--lh-body); }
.schritte { list-style: none; counter-reset: s; margin: 0; padding: 0;
            display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.schritt { counter-increment: s; display: flex; flex-direction: column; gap: var(--s-5); }
.schritt__fig { border-radius: var(--r-card); overflow: clip; aspect-ratio: 4 / 3; }
.schritt__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.schritt__text h3::before {
  content: counter(s, decimal-leading-zero);
  display: block; color: var(--action); font-size: var(--t-body-sm);
  font-variant-numeric: tabular-nums; margin-bottom: var(--s-2);
}
.schritt__text p { margin: var(--s-3) 0 0; color: var(--ink-2); line-height: var(--lh-body); }
.stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.stimme { margin: 0; padding: var(--pad-klein); background: var(--surface);
          border: 1px solid var(--hairline); border-radius: var(--r-card);
          display: flex; flex-direction: column; gap: var(--s-5); }
.stimme blockquote { margin: 0; line-height: var(--lh-body); }
.stimme figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.stimme__name { font-weight: 600; }
.stimme__rolle { font-size: var(--t-body-sm); color: var(--ink-2); }
.kurzstimmen { list-style: none; margin: 0; padding: 0;
               display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.kurzstimmen li { border-top: 1px solid var(--hairline); padding-top: var(--s-4); }
.kurzstimme__text { margin: 0; color: var(--ink-2); font-size: var(--t-body-sm);
                    line-height: var(--lh-body); }
.kurzstimme__name { margin: var(--s-2) 0 0; font-size: var(--t-body-sm); }
@media (max-width: 900px) {
  .schritte, .stimmen { grid-template-columns: minmax(0, 1fr); }
  .lang__zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kurzstimmen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .lang__zahlen { grid-template-columns: minmax(0, 1fr); }
}
.hero__stars { display: flex; align-items: center; justify-content: center; gap: var(--s-3);
               font-size: var(--t-body-sm); color: var(--ink-2); margin: var(--s-4) 0 0; }
.hero__sterne { color: var(--ember); letter-spacing: .1em; }
.hero--lang .hero-type { font-size: clamp(32px, 4.6vw, 56px); }
.hero--lang .hero__copy { max-width: 900px; }
.hero--lang.hero--breit .hero__copy { max-width: 1000px; }
.cta__person { display: flex; align-items: center; justify-content: center; gap: var(--s-4);
               margin-top: var(--s-8); }
.cta__person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.cta__person p { margin: 0; text-align: left; }
.cta__name { font-weight: 600; }
.lang__link { display: inline-block; padding-block: var(--s-3); }
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.karte { padding: var(--pad-klein); background: var(--surface); border: 1px solid var(--hairline);
         border-radius: var(--r-card); display: flex; flex-direction: column; gap: var(--s-4); }
.karte__unter { margin: 0; font-size: var(--t-body-sm); color: var(--ink-2); }
.karte__liste { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: var(--s-3); }
.karte__liste li { display: flex; gap: var(--s-3); align-items: baseline;
                   font-size: var(--t-body-sm); line-height: var(--lh-body); }
.karte__liste svg { flex: none; color: var(--action); translate: 0 3px; }
.karte__grenze { margin: auto 0 0; padding-top: var(--s-4); border-top: 1px solid var(--hairline);
                 font-size: var(--t-body-sm); color: var(--ink-2); line-height: var(--lh-body); }
.lang__haken { list-style: none; margin: 0; padding: 0;
               display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: var(--s-4) var(--s-8); max-width: 900px; }
.lang__haken li { display: flex; gap: var(--s-3); align-items: baseline;
                  line-height: var(--lh-body); }
.lang__haken svg { flex: none; color: var(--action); translate: 0 3px; }
@media (max-width: 760px) { .lang__haken { grid-template-columns: minmax(0, 1fr); } }
.karten { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.karten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .karten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .karte .heading-sm { font-size: 24px; }
}
.videogruppe + .videogruppe { margin-top: var(--s-10); }
.videogruppe > h3 { margin: 0 0 var(--s-5); }
.videos { list-style: none; margin: 0; padding: 0;
          display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-6); }
@media (max-width: 600px) { .videos { grid-template-columns: minmax(0, 1fr); } }
.video { background: var(--surface); border: 1px solid var(--hairline);
         border-radius: var(--r-card); overflow: clip;
         display: flex; flex-direction: column; gap: var(--s-2); padding: 0 var(--pad-klein) var(--pad-klein); }
.video__fig { margin: 0 calc(var(--pad-klein) * -1) var(--s-5); }
.video__fig img { width: 100%; height: auto; display: block; }
.video h4, .video__titel { margin: 0; font-size: var(--t-subheading); line-height: 1.3;
                          letter-spacing: -.005em; font-weight: 600; }
.video p { margin: 0; color: var(--ink-2); font-size: var(--t-body-sm); line-height: var(--lh-body); }
.video__link { margin-top: auto; padding-top: var(--s-3); font-size: var(--t-body-sm);
               display: inline-flex; align-items: center; min-height: 24px; }
.karte__link { margin: auto 0 0; padding-top: var(--s-4); }
.karte__link a { display: inline-flex; align-items: center; min-height: 24px; }
.formular { max-width: 900px; }
.formular--mitte .formular { margin-inline: auto; width: 100%; }
.formular--mitte .lang__kopf { margin-inline: auto; text-align: center; }
.formular--mitte .lang__kopf .lead { margin-inline: auto; }
.formular--mitte .lang__hinweis {
  max-width: 900px; margin-inline: auto; width: 100%; text-align: center;
}
.formular__rahmen { width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-card);
                    background: var(--surface); display: block; }
.lang__unterliste { list-style: disc; margin: var(--s-3) 0 0; padding-left: var(--s-6);
                    color: var(--ink-2); line-height: var(--lh-body); }
.lang__unterliste li { margin-bottom: var(--s-2); }
.video, .karte { position: relative; transition: background-color var(--dur) var(--ease-inplace); }
.video__link::after, .karte__link a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.video:hover, .video:focus-within { background: var(--action-soft); }
.video:active { background: var(--cool-wash); transition-duration: var(--dur-tap); }
.karte {
  transition:
    transform    240ms var(--ease-inplace),
    box-shadow   320ms var(--ease-inplace),
    border-color 240ms var(--ease-inplace),
    background-color var(--dur) var(--ease-inplace);
  will-change: transform;
}
.karte:hover, .karte:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04);
  border-color: color-mix(in srgb, var(--action) 24%, var(--hairline));
}
.karte:active {
  transform: translateY(-2px) scale(.995);
  background: var(--cool-wash);
  transition-duration: var(--dur-tap);
}
@media (hover: none) {
  .video:hover { background: var(--surface); }
  .karte:hover { transform: none; box-shadow: none; border-color: var(--hairline); }
}
@media (prefers-reduced-motion: reduce) {
  .karte { transition: box-shadow 1ms, background-color 1ms; will-change: auto; }
  .karte:hover, .karte:focus-within, .karte:active { transform: none; }
}
.weiter__liste { list-style: none; margin: var(--s-4) 0 0; padding: 0;
                 display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); }
.weiter__liste a { display: inline-flex; align-items: center; min-height: 24px;
                   font-size: var(--t-subheading); line-height: 1.35; letter-spacing: -.004em;
                   color: var(--ink); text-decoration: none; }
.weiter__liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cta__stand { margin-top: var(--s-5); color: var(--on-deep-2); }
.lang__zwei { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 80px; align-items: center; }
.lang__seitenbild { margin: 0; }
.lang__seitenimg { width: 100%; height: auto; border-radius: var(--r-inner); }
@media (max-width: 860px) {
  .lang__zwei { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
}
.faq-sektion {
  --faq-ring: var(--s-2);
  --faq-aussen: calc(var(--faq-ring) + 1px);
  --faq-pad: var(--s-4);
  --faq-luft: var(--s-2);
  --faq-icon: 28px;
}
@media (min-width: 560px) {
  .faq-sektion { --faq-pad: var(--s-6); --faq-luft: var(--s-3); }
}
.faq-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "liste" "rest";
  row-gap: var(--s-8);
}
.faq-kopf  { grid-area: kopf; }
.faq-liste { grid-area: liste; }
.faq-rest  { grid-area: rest; }
.faq-kopf .heading-md {
  margin: 0;
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
}
@media (min-width: 1000px) {
  .faq-raster {
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "kopf liste"
      "kopf liste"
      "rest liste";
    column-gap: var(--pad-gross);
    align-items: start;
  }
  .faq-kopf { align-self: stretch; }
  .faq-kopf__kleber {
    position: sticky;
    top: calc(var(--nav-h) + var(--s-8));
  }
  .faq-rest { align-self: end; max-width: 360px; }
}
.faq-liste {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}
.faq-gruppe {
  display: flex;
  flex-direction: column;
}
.faq-gruppe__titel {
  margin: 0 0 var(--s-3);
  font-size: var(--t-subheading);
  line-height: var(--lh-subheading);
  letter-spacing: var(--ls-subheading);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: break-word;
}
.faq {
  margin: var(--faq-aussen);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: var(--canvas);
  box-shadow: 0 0 0 var(--faq-ring) var(--canvas),
              0 0 0 var(--faq-aussen) var(--cool-wash);
  transition: background-color var(--dur) var(--ease-inplace),
              border-color var(--dur) var(--ease-inplace);
}
.faq + .faq { margin-top: calc(var(--s-3) + var(--faq-aussen)); }
.faq[open] {
  background: var(--surface);
  border-color: var(--cool-wash);
}
.on-canvas .faq {
  background: var(--surface);
  box-shadow: 0 0 0 var(--faq-ring) var(--surface),
              0 0 0 var(--faq-aussen) var(--hairline);
}
.faq summary {
  position: relative;
  display: block;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 600;
  color: var(--ink);
  padding: var(--faq-pad);
  padding-right: calc(var(--faq-pad) + var(--faq-icon) + var(--s-3));
  border-radius: calc(var(--r-card) - 1px);
  transition: padding-bottom var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq[open] summary { padding-bottom: var(--faq-luft); }
@media (min-width: 560px) {
  .faq summary {
    font-size: var(--t-subheading);
    line-height: 1.4;
    letter-spacing: var(--ls-subheading);
  }
}
.faq summary::after {
  content: "";
  position: absolute;
  right: var(--faq-pad);
  top: calc(var(--faq-pad) + 1px);
  top: calc(var(--faq-pad) + (1lh - var(--faq-icon)) / 2);
  width: var(--faq-icon);
  height: var(--faq-icon);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11.375' fill='%23686d70'/%3E%3Cpath d='M9.6 12.2l4.4 4.4 4.4-4.4' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: rotate var(--dur) var(--ease);
}
.faq[open] summary::after { rotate: -90deg; }
.faq summary:focus-visible { border-radius: calc(var(--r-card) - 1px); outline-offset: -2px; }
@supports selector(:has(*)) {
  .faq summary:focus-visible { outline: none; }
  .faq:has(> summary:focus-visible) {
    outline: 2px solid var(--action-deep);
    outline-offset: calc(var(--faq-aussen) + 2px);
  }
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding: 0;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq[open] .faq__a { grid-template-rows: 1fr; }
.faq__a > .faq__text {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 var(--faq-pad);
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  transition: padding-bottom var(--dur) var(--ease);
}
@media (min-width: 560px) {
  .faq__a > .faq__text { padding-right: calc(var(--faq-pad) + var(--faq-icon) + var(--s-10)); }
}
.faq[open] .faq__a > .faq__text { padding-bottom: var(--faq-pad); }
.faq__text p { margin: 0; }
.faq__text p + p { margin-top: var(--s-4); }
.faq__a a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.faq__a a:hover { color: var(--action-deep); }
@supports selector(::details-content) {
  .faq::details-content {
    transition: content-visibility var(--dur) var(--ease) allow-discrete;
  }
}
.faq-rest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding: var(--s-6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
@media (min-width: 560px) { .faq-rest { padding: var(--pad-klein); } }
.faq-rest__titel {
  margin: 0 0 var(--s-2);
  font-size: var(--t-subheading);
  line-height: var(--lh-subheading);
  letter-spacing: var(--ls-subheading);
  font-weight: 600;
  color: var(--ink);
}
.faq-rest__text p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.faq-rest__wege {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.faq-rest__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--action);
}
.faq-rest__tel svg { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .faq, .faq summary, .faq summary::after, .faq__a, .faq__a > .faq__text { transition: none; }
}
.recht .inner { max-width: 860px; }
.recht h1 { margin-bottom: var(--s-8); }
.recht .lead { margin-bottom: var(--s-5); }
.recht__inhalt {
  margin: var(--s-10) 0;
  padding: var(--s-8);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.recht__inhalt h2 {
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-4);
}
.recht__inhalt ol { margin: 0; padding-left: var(--s-6); display: grid; gap: var(--s-2); }
.recht__inhalt a { display: inline-flex; align-items: center; min-height: 24px;
                   line-height: var(--lh-body);
                   min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 479px) {
  .recht__inhalt { padding: var(--s-5); }
  .recht__inhalt ol { padding-left: var(--s-5); }
}
@media (max-width: 359px) {
  .recht__inhalt a { font-size: var(--t-body-sm); }
}
.recht__block { margin-top: var(--s-10); }
.recht__block { scroll-margin-top: 96px; }
.recht__block h2 {
  font-size: var(--t-heading-sm); line-height: var(--lh-heading-sm);
  letter-spacing: 0.007em; margin: 0 0 var(--s-5);
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
.recht__block p, .recht .lead {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.recht__block p {
  margin: 0 0 var(--s-4); color: var(--ink-2);
  line-height: 1.6;
}
.recht__block p:last-child { margin-bottom: 0; }
.gespraech { max-width: var(--text); display: flex; flex-direction: column; gap: var(--s-10); }
.gespraech > .heading-md { margin-bottom: var(--s-2); }
.gespraech__runde { display: flex; flex-direction: column; gap: var(--s-6); }
.gespraech__frage { display: flex; flex-direction: column; gap: var(--s-2); }
.gespraech__f {
  font-size: var(--t-body); font-weight: 600; line-height: var(--lh-body);
  letter-spacing: var(--ls-body); color: var(--ink-2); max-width: 34em;
}
.gespraech__antwort { display: flex; flex-direction: column; gap: var(--s-2); }
.gespraech__a {
  font-size: var(--t-subheading); font-weight: 400; line-height: var(--lh-subheading);
  letter-spacing: var(--ls-subheading); color: var(--ink);
}
.gespraech__antwort .gespraech__a + .gespraech__a { margin-top: var(--s-4); }
.gespraech__hervor {
  margin-top: var(--s-6);
  font-size: clamp(24px, 3vw, var(--t-heading-sm)); font-weight: 400;
  line-height: var(--lh-heading-sm); letter-spacing: 0.007em; color: var(--ink);
  border-left: 2px solid var(--hairline); padding-left: var(--s-6);
}
.on-deep .gespraech__f { color: var(--on-deep-2); }
.on-deep .gespraech__a,
.on-deep .gespraech__hervor { color: var(--on-deep); }
.on-deep .gespraech__hervor { border-left-color: var(--hairline-deep); }
@media (max-width: 700px) {
  .gespraech { gap: var(--s-8); }
  .gespraech__runde { gap: var(--s-5); }
  .gespraech__hervor { padding-left: var(--s-5); }
}
.gespraech-zwei { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 80px; align-items: stretch; }
.gespraech-zwei > .gespraech { max-width: none; }
.gespraech__bilder { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-10); }
.gespraech__bild { margin: 0; }
.gespraech__bild:only-child { margin-block: auto; }
.gespraech__img { width: 100%; height: auto; border-radius: var(--r-inner); }
.gespraech__bild figcaption {
  margin-top: var(--s-3); font-size: var(--t-body-sm); line-height: 1.5;
  letter-spacing: var(--ls-body-sm); color: var(--ink-3);
}
.on-deep .gespraech__bild figcaption { color: var(--on-deep-2); }
@media (max-width: 1060px) {
  .gespraech-zwei { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-10); }
}
@media (max-width: 860px) {
  .gespraech-zwei { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
  .gespraech__bilder { flex-direction: column; gap: var(--s-8); }
}
.gegen { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.gegen__seite { padding-inline: var(--s-8); }
.gegen__seite:first-child { padding-left: 0; }
.gegen__seite:last-child  { padding-right: 0; border-left: 1px solid var(--hairline); }
.gegen__zeilen { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.gegen__z {
  font-size: var(--t-heading-sm); line-height: var(--lh-heading-sm);
  letter-spacing: 0.007em; color: var(--ink-3);
}
.gegen__seite--heute .gegen__z { color: var(--ink); }
.gegen__plus { font-size: var(--t-subheading); color: var(--ink-3); }
.on-deep .gegen__z { color: var(--on-deep-2); }
.on-deep .gegen__seite--heute .gegen__z { color: var(--on-deep); }
.on-deep .gegen__seite:last-child { border-left-color: var(--hairline-deep); }
@media (max-width: 700px) {
  .gegen { grid-template-columns: 1fr; }
  .gegen__seite { padding-inline: 0; }
  .gegen__seite:last-child {
    border-left: 0; border-top: 1px solid var(--hairline);
    padding-top: var(--s-8); margin-top: var(--s-8);
  }
  .gegen__z { font-size: var(--t-subheading); line-height: var(--lh-subheading); }
}
.fakten__kopf { display: flex; align-items: center; gap: var(--s-5); }
.fakten__logo {
  width: 88px; height: 88px; flex: none; display: grid; place-items: center;
  background: #fff; border-radius: var(--r-inner); border: 1px solid var(--hairline);
}
.fakten__logo img { width: 56px; height: 56px; object-fit: contain; }
.on-deep .fakten__logo { border-color: transparent; }
.fakten { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.fakten__z {
  border-top: 1px solid var(--hairline); padding: var(--s-5) var(--s-6) 0 0;
  font-size: var(--t-subheading); line-height: var(--lh-subheading);
  letter-spacing: var(--ls-subheading); color: var(--ink);
}
.fakten__z:last-child { padding-right: 0; }
.on-deep .fakten__z { border-top-color: var(--hairline-deep); color: var(--on-deep); }
@media (max-width: 900px) { .fakten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .fakten { grid-template-columns: 1fr; }
  .fakten__z { padding-right: 0; }
}
.kern { max-width: 900px; margin-inline: auto; text-align: center; }
.kern__satz { font-weight: 400; color: var(--ink); text-wrap: balance; }
.kern--gross .kern__satz {
  font-size: clamp(32px, 5vw, var(--t-display)); line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.kern--mittel .kern__satz {
  font-size: clamp(24px, 3vw, var(--t-heading)); line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.kern__quelle {
  margin-top: var(--s-6); font-size: var(--t-body-sm); line-height: 1.5;
  letter-spacing: var(--ls-body-sm); color: var(--ink-3);
}
.on-deep .kern__satz { color: var(--on-deep); }
.on-deep .kern__quelle { color: var(--on-deep-2); }
.bband { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); align-items: start; }
.bband__name { padding-top: var(--s-2); }
.bband__n {
  font-size: var(--t-heading-sm); line-height: var(--lh-heading-sm);
  letter-spacing: 0.007em; color: var(--ink);
}
.bband__r {
  margin-top: var(--s-2); font-size: var(--t-body-sm); line-height: 1.5;
  letter-spacing: var(--ls-body-sm); color: var(--ink-3);
}
.bband__f { margin: 0; }
.bband__f img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-inner); display: block;
}
.bband__f figcaption {
  margin-top: var(--s-3); font-size: var(--t-body-sm); line-height: 1.5;
  letter-spacing: var(--ls-body-sm); color: var(--ink-3);
}
.on-deep .bband__n { color: var(--on-deep); }
.on-deep .bband__r, .on-deep .bband__f figcaption { color: var(--on-deep-2); }
@media (max-width: 900px) {
  .bband { grid-template-columns: repeat(2, 1fr); }
  .bband__name { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .bband { grid-template-columns: 1fr; } }
.fidx { list-style: none; counter-reset: fidx; }
.fidx li { border-top: 1px solid var(--hairline); }
.fidx li:last-child { border-bottom: 1px solid var(--hairline); }
.fidx a {
  display: flex; gap: var(--s-5); align-items: baseline;
  padding-block: var(--s-5); color: var(--ink); text-decoration: none;
  font-size: var(--t-heading-sm); line-height: var(--lh-heading-sm);
  letter-spacing: 0.007em;
  transition: color var(--dur-tap) var(--ease-inplace);
}
.fidx a::before {
  counter-increment: fidx; content: counter(fidx, decimal-leading-zero);
  font-size: var(--t-caption); letter-spacing: var(--ls-caption);
  color: var(--ink-3); flex: none; width: 2em;
}
@media (any-hover: hover) { .fidx a:hover { color: var(--action-deep); text-decoration: none; } }
.on-deep .fidx li { border-color: var(--hairline-deep); }
.on-deep .fidx a { color: var(--on-deep); }
@media (max-width: 700px) {
  .fidx a { font-size: var(--t-subheading); line-height: var(--lh-subheading); gap: var(--s-4); }
}
.zband { max-width: 900px; margin-inline: auto; text-align: center; }
.zband__satz {
  font-weight: 400; color: var(--on-deep); text-wrap: balance;
  font-size: clamp(28px, 3.2vw, var(--t-heading));
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
}
.zband__satz p + p { margin-top: var(--s-5); }
.zband__wer {
  margin-top: var(--s-10); display: flex; align-items: center;
  justify-content: center; gap: var(--s-4);
}
.zband__logo {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  background: #fff; border-radius: 50%;
}
.zband__logo img { width: 32px; height: 32px; object-fit: contain; }
.zband__kopf {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  background-size: cover; background-position: 50% 40%;
}
.zband__wer-text { display: flex; flex-direction: column; text-align: left; }
.zband__name {
  font-size: var(--t-body); font-weight: 600; line-height: 1.3;
  letter-spacing: var(--ls-body); color: var(--on-deep);
}
.zband__rolle {
  font-size: var(--t-body-sm); line-height: 1.4;
  letter-spacing: var(--ls-body-sm); color: var(--on-deep-2);
}
@media (max-width: 700px) {
  .zband__wer { margin-top: var(--s-8); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: v-fade linear both;
      animation-timeline: view();
      animation-range: entry 25% entry 60%;
    }
    .reveal > * {
      animation: v-rise linear both;
      animation-timeline: view();
      animation-range: entry 25% entry 60%;
    }
    @keyframes v-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes v-rise { from { transform: translateY(72px); } to { transform: translateY(0); } }
    .reveal-img {
      animation: v-parallax linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
    @keyframes v-parallax {
      from { transform: translateY(90px); }
      to   { transform: translateY(-90px); }
    }
  }
}
.btn:active { transform: scale(.985); transition-duration: var(--dur-tap); }
.arrow:active { opacity: .6; transition: opacity var(--dur-tap) var(--ease-inplace); }
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: e-fade 620ms var(--ease-inplace) both; }
  .enter > * { animation: e-rise 900ms var(--ease) both; }
  .enter-1 { animation-delay: 60ms; }  .enter-1 > * { animation-delay: 60ms; }
  .enter-2 { animation-delay: 200ms; } .enter-2 > * { animation-delay: 200ms; }
  .enter-3 { animation-delay: 360ms; } .enter-3 > * { animation-delay: 360ms; }
  .enter-4 { animation-delay: 500ms; } .enter-4 > * { animation-delay: 500ms; }
  @keyframes e-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes e-rise { from { transform: translateY(54px); } to { transform: translateY(0); } }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__figure img {
      animation: h-zoom linear both;
      animation-timeline: scroll();
      animation-range: 0 760px;
      will-change: transform;
    }
    @keyframes h-zoom { from { transform: scale(.86); } to { transform: scale(1); } }
    .hero__figure--tiefe img { animation: none; will-change: auto; }
    .hero__figure--tiefe {
      animation: h-zoom linear both;
      animation-timeline: scroll();
      animation-range: 0 760px;
      will-change: transform;
    }
    .satz i {
      transform: translateY(105%);
      animation: w-auf linear both;
      animation-timeline: view();
      animation-range: entry calc(25% + var(--i) * 6%) entry calc(70% + var(--i) * 6%);
    }
    @keyframes w-auf {
      from { transform: translateY(105%); }
      to   { transform: translateY(0); }
    }
    .grid .tile__fig {
      animation: t-scale linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
    @keyframes t-scale { from { scale: .88; } to { scale: 1; } }
  }
}
.satz { font-weight: 600; text-wrap: balance; }
.satz span { display: inline-block; overflow: clip; vertical-align: bottom;
             padding-bottom: 0.14em; margin-bottom: -0.14em; }
.satz i { display: inline-block; font-style: normal; }
.pin { display: flex; flex-direction: column; gap: var(--s-4); }
.pin__card {
  border-radius: var(--r-card);
  padding: var(--pad-gross);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s-10); align-items: center;
  min-height: 420px;
}
.pin__card img { width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.pin__card .pin__no { font-size: var(--t-subheading); font-weight: 600; }
.pin__card .lead strong { font-weight: 600; color: var(--ink); }
.pin__fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: var(--s-5);
}
.pin__angabe {
  font-size: var(--t-body-sm); font-weight: 500; color: var(--ink);
}
.pin__pille {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-size: var(--t-body-sm); font-weight: 500;
}
.pin__fig { display: flex; flex-direction: column; gap: var(--s-4); align-items: center; }
.pin__card .pin__fig > img { border-radius: var(--r-inner); }
.pin__logos {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-6); flex-wrap: wrap;
}
.pin__logos { background: var(--surface); border-radius: 999px; padding: 10px 20px; }
.pin__card .pin__logos img { width: auto; height: 22px; max-height: 22px; object-fit: contain; }
.pin__card:nth-child(2) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
}
.pin__card:nth-child(2) .pin__fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
}
.pin__card:nth-child(2) .pin__fig > img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--r-inner);
}
.pin__card:nth-child(2) .pin__logos {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 36px;
  background: none;
  padding: 0;
  border-radius: 0;
}
.pin__card:nth-child(2) .pin__logos img.pin__logo {
  box-sizing: border-box;
  width: 128px;
  height: 103px;
  max-width: none;
  max-height: none;
  padding: var(--s-6);
  background: var(--surface);
  border-radius: var(--r-inner);
  object-fit: contain;
}
@media (max-width: 900px) {
  .pin__card:nth-child(2) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pin__card:nth-child(2) .pin__fig {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
  }
  .pin__card:nth-child(2) .pin__logos {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-4);
    background: var(--surface);
    border-radius: var(--r-pill);
    padding: var(--s-3) var(--s-5);
  }
  .pin__card:nth-child(2) .pin__logos img.pin__logo {
    width: auto;
    height: 36px;
    max-height: 36px;
    padding: 0;
    background: none;
    border-radius: 0;
  }
}
.pin__card--personen {
  align-items: center; padding-bottom: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.pin__card--personen > .stack { padding-bottom: var(--pad-gross); }
.pin__card--personen .pin__personen { align-self: end; }
.pin__personen { display: flex; align-items: flex-end; justify-content: center; }
.pin__personen img {
  width: var(--breite); max-height: none; height: auto;
  margin-right: calc(var(--ueber, 0%) * -1);
}
@media (max-width: 900px) {
  .pin__card--personen { grid-template-columns: minmax(0, 1fr); }
}
.pin::after { content: ''; display: block; height: 400px; }
@media (max-width: 820px) {
  .pin::after { height: 0; }
  .pin__logos { gap: var(--s-4); padding: 8px 14px; }
  .pin__card--personen > .stack { padding-bottom: var(--pad-klein); }
}
.pin__offen {
  display: grid; place-items: center; text-align: center;
  min-height: 200px; padding: var(--s-6);
  border: 1px dashed var(--ink-3); border-radius: var(--r-card);
  color: var(--ink-2); font-size: var(--t-body-sm);
}
.pin__no {
  font-family: inherit; font-size: var(--t-body-sm); font-weight: 500;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .pin__card { position: static !important; }
}
@media (min-width: 901px) {
  .pin { display: block; }
  .pin__card { position: sticky; top: 96px; margin-bottom: var(--s-4); }
  .pin__card:nth-child(1) { top: 88px; }
  .pin__card:nth-child(2) { top: 112px; }
  .pin__card:nth-child(3) { top: 136px; }
}
@media (max-width: 900px) {
  .pin__card { grid-template-columns: minmax(0,1fr); padding: var(--pad-gross);
               min-height: 0; gap: var(--s-6); }
  .pin__card--personen { padding-bottom: 0; }
  .pin__card img { max-height: 240px; }
}
@media (min-width: 901px) {
  .pin--breit { display: block; padding-bottom: 0; }
  .pin--breit > .pin__karte:last-child { margin-bottom: 0; }
  .pin--breit::after { content: ''; display: block; height: 240px; }
  .pin--breit > .pin__karte {
    position: sticky;
    min-height: 540px;
    margin-bottom: 120px;
    animation: none;
    animation-timeline: auto;
    clip-path: none;
    opacity: 1;
  }
  .pin--breit > .pin__karte:nth-child(1) { top: 88px; }
  .pin--breit > .pin__karte:nth-child(2) { top: 112px; }
  .pin--breit > .pin__karte:nth-child(3) { top: 136px; }
  .pin--breit > .pin__karte:nth-child(4) { top: 160px; }
}
@media (max-width: 900px) {
  .pin--breit { display: flex; flex-direction: column; gap: var(--s-6); }
  .pin--breit > .pin__karte { position: static !important; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 360px) {
    .lb {
      view-timeline-name: --lb;
      view-timeline-axis: block;
    }
    .lb-reihe { width: max-content; }
    .lb-reihe--1 {
      max-width: none;
      margin-inline: 0;
      padding-inline: 0;
    }
    .lb-reihe--1 > .lb-folge { flex-wrap: nowrap; }
    .lb-reihe--1 .lb-zelle { flex-basis: var(--lb-zelle); }
    .lb-kopie { display: flex; }
    .lb-reihe--2 {
      display: flex;
      margin-left: calc((var(--lb-zelle) + var(--lb-luft)) * -.5);
    }
    .lb-reihe--1 {
      animation: lb-links linear both;
      animation-timeline: --lb;
      animation-range: cover 0% cover 100%;
    }
    .lb-reihe--2 {
      animation: lb-rechts linear both;
      animation-timeline: --lb;
      animation-range: cover 0% cover 100%;
    }
    @keyframes lb-links {
      from { transform: translateX(0); }
      to   { transform: translateX(calc(var(--lb-weg) * -1)); }
    }
    @keyframes lb-rechts {
      from { transform: translateX(calc(var(--lb-weg) * -1)); }
      to   { transform: translateX(0); }
    }
  }
}
@media (max-width: 359px) {
  .pin__pille { border-radius: 14px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .banner__img {
      animation: b-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes b-drift {
      from { background-position: center 18%; }
      to   { background-position: center 40%; }
    }
    .showcase {
      animation: v-fade linear both, f-auf linear both;
      animation-timeline: view(), view();
      animation-range: entry 25% cover 45%, entry 30% cover 55%;
    }
    @keyframes f-auf {
      from { clip-path: inset(0 0 55% 0 round var(--r-card)); }
      to   { clip-path: inset(0 0 0 0 round var(--r-card)); }
    }
  }
}
.hero.hero--film {
  --kante: var(--s-6);
  --geraet-b: min(calc(100vw - 64px), 360px);
  --sockel-strich: rgba(238, 242, 244, .22);
  padding-top: 0;
  padding-bottom: var(--s-6);
}
.hero-film__band {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.hero-film__band > .inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--s-8) var(--kante) var(--s-8);
  box-sizing: border-box;
}
.hero--film .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.hero--film .hero__kicker { color: var(--on-deep-2); }
.hero--film .hero-type {
  color: var(--on-deep);
  font-size: clamp(32px, 9.2vw, 44px);
}
.hero--film .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.hero--film .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.hero--film .btn--line {
  color: var(--on-deep);
  border-color: rgba(238, 242, 244, .55);
}
.hero--film .btn--line:hover { background: rgba(238, 242, 244, .12); }
.hero--film .btn:active { transform: scale(.97); }
.hero--film .btn:focus-visible,
.hero-film__pause:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (max-width: 559px) {
  .hero--film .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.hero--film { --kante: var(--s-8); --geraet-b: min(calc(100vw - 80px), 380px); }
}
.hero-film__film {
  position: relative;
  z-index: 0;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.hero-film__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 70% 12%;
}
.hero-film__schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--deep) 0%, rgba(18, 34, 43, 0) 16%),
    linear-gradient(0deg, rgba(18, 34, 43, .55) 0%, rgba(18, 34, 43, 0) 36%);
}
.hero-film__geraet {
  position: absolute;
  z-index: 3;
  right: var(--kante);
  bottom: calc(var(--geraet-b) * -.2);
  width: var(--geraet-b);
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-film__geraet { animation: hero-film-auf 1100ms var(--ease) 700ms both; }
  @keyframes hero-film-auf {
    from { opacity: 0; translate: 0 56px; }
    to   { opacity: 1; translate: 0 0; }
  }
}
.hero-film__pause {
  position: absolute;
  z-index: 4;
  left: var(--kante);
  bottom: var(--s-4);
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(238, 242, 244, .55);
  background: rgba(18, 34, 43, .74);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-inplace),
              transform var(--dur-tap) var(--ease-inplace),
              opacity 200ms var(--ease-inplace);
}
.hero-film__pause { opacity: 0; }
.hero-film__band:hover .hero-film__pause,
.hero-film__pause:hover,
.hero-film__pause:focus-visible { opacity: 1; }
@media (hover: none) {
  .hero-film__pause { opacity: 1; }
}
.hero-film__pause[hidden] { display: none; }
@media (max-width: 559px) {
  .hero-film__pause { bottom: calc(75vw - 44px - var(--s-4)); }
}
.hero-film__pause:hover { background: rgba(18, 34, 43, .92); }
.hero-film__pause:active { transform: scale(.92); }
.hero-film__pause:focus-visible { box-shadow: 0 0 0 7px rgba(18, 34, 43, .85); }
.hero-film__pause svg { width: 16px; height: 16px; display: block; }
.hero-film__pause .hero-film__i-play { display: none; }
.hero-film__pause[data-zustand="pause"] .hero-film__i-pause { display: none; }
.hero-film__pause[data-zustand="pause"] .hero-film__i-play { display: block; }
.hero-film__fuss {
  padding: calc(var(--geraet-b) * .2 + var(--s-4)) var(--kante) 0;
}
.hero-film__fakten {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: var(--s-6) 0 var(--s-8);
  padding: 0 var(--kante);
  max-width: none;
  min-width: 0;
}
.hero-film__zahl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  align-self: stretch;
  flex: none;
  min-width: 0;
}
.hero-film__zahl + .hero-film__zahl {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--sockel-strich);
}
.hero-film__zahl b {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--on-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  flex: none;
}
.hero-film__zahl span {
  font-size: var(--t-body-sm);
  line-height: 1.29;
  letter-spacing: var(--ls-body-sm);
  color: var(--on-deep-2);
}
@media (min-width: 900px) {
  .hero.hero--film {
    --kante: max(var(--s-8), calc((100% - var(--page)) / 2 + var(--s-8)));
    --spalte: clamp(420px, 40vw, 580px);
    --geraet-b: clamp(300px, 30vw, 460px);
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
    padding-bottom: var(--s-8);
  }
  @supports (min-height: 100svh) {
    .hero.hero--film { min-height: calc(100svh - var(--nav-h)); }
  }
  .hero-film__band {
    flex: 1 0 auto;
    min-height: 560px;
    justify-content: center;
  }
  .hero-film__band > .inner { padding: 72px var(--kante) 176px; }
  .hero--film .hero__copy { max-width: var(--spalte); }
  .hero--film .hero__kicker { color: var(--on-deep); }
  .hero--film .hero-type {
    font-size: clamp(48px, 5vw, 76px);
    white-space: normal;
    margin-inline-end: -100px;
  }
  .hero--film .hero__copy .btn-row { max-width: calc(max(var(--spalte) * .8, 400px) - 16px); }
  .hero--film .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
    max-width: min(540px, var(--spalte));
  }
  .hero-film__film {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: inherit;
  }
  .hero-film__video {
    left: 12%;
    right: auto;
    width: 100%;
    object-position: 50% 20%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  }
  .hero-film__schleier {
    background:
      linear-gradient(90deg,
        rgba(18, 34, 43, .88) 0,
        rgba(18, 34, 43, .84) calc(var(--kante) + var(--spalte) * .6),
        rgba(18, 34, 43, .66) calc(var(--kante) + var(--spalte) + 20px),
        rgba(18, 34, 43, .46) calc(var(--kante) + var(--spalte) + 120px),
        rgba(18, 34, 43, .12) calc(var(--kante) + var(--spalte) + 280px),
        rgba(18, 34, 43, 0)   calc(var(--kante) + var(--spalte) + 420px)),
      linear-gradient(0deg, rgba(18, 34, 43, .5) 0%, rgba(18, 34, 43, 0) 30%);
  }
  .hero-film__geraet {
    right: auto;
    left: calc(max(calc(var(--kante) + var(--spalte) * .8), calc(var(--kante) + 400px)) + clamp(40px, 5vw, 110px));
  }
  .hero-film__pause {
    left: auto;
    right: var(--kante);
    bottom: var(--s-8);
  }
  .hero-film__fakten {
    position: absolute;
    left: var(--kante);
    bottom: var(--s-8);
    width: calc(max(var(--spalte) * .8, 400px) - var(--s-6));
    margin: 0;
    padding: var(--s-5) 0 0;
    box-sizing: border-box;
    border-top: 1px solid var(--sockel-strich);
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .hero-film__zahl b { font-size: 32px; }
  .hero-film__zahl { align-self: center; }
  .hero-film__zahl + .hero-film__zahl {
    margin: 0 0 0 var(--s-6);
    padding: 4px 0 4px var(--s-6);
    border-top: 0;
    border-left: 1px solid var(--sockel-strich);
  }
  .hero-film__fuss {
    box-sizing: border-box;
    min-height: calc(var(--geraet-b) * .2);
    padding-top: 0;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-film__zahl b { font-size: 28px; }
  .hero-film__zahl + .hero-film__zahl {
    margin-left: var(--s-4);
    padding-left: var(--s-4);
  }
}
.hero--film .ha {
  --u: calc(var(--geraet-b) / 400);
  color: #475260;
  line-height: 1.2;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ha-innen {
  position: relative;
  display: grid;
  grid-template-columns: calc(32 * var(--u)) calc(58 * var(--u)) 1fr;
  width: 100%;
  height: calc(222 * var(--u));
}
:where(.ha-innen) :where(ul, ol, p) { list-style: none; margin: 0; padding: 0; }
.ha-innen small { font-size: inherit; }
.ha-marke {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  background: #fff;
  border: calc(1 * var(--u)) solid rgba(15, 23, 42, .13);
  border-radius: 24%;
  overflow: hidden;
  color: #0c6a7c;
}
.ha-marke img { display: block; width: 64%; height: 64%; object-fit: contain; }
.ha-marke--wolt img { width: 68%; height: 68%; }
.ha-marke--takeaway img { width: 76%; height: 76%; }
.ha-sym { display: block; width: 58%; height: 58%; stroke-width: 1.5; }
.ha-sym--webshop { width: 72%; height: 72%; stroke-width: 1.3; }
.ha-quellen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ha-q { width: calc(32 * var(--u)); }
.ha-q .ha-marke {
  border: 0;
  border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(0, 0, 0, .6);
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.ha-q.is-an .ha-marke {
  transform: translateX(calc(4 * var(--u)));
  box-shadow:
    0 0 0 calc(2 * var(--u)) var(--decor),
    0 0 calc(22 * var(--u)) calc(2 * var(--u)) rgba(75, 158, 180, .45);
}
.ha-trichter {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ha-trichter path {
  fill: none;
  stroke: rgba(75, 158, 180, .5);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.ha-trichter path.is-an {
  stroke: #7cc3d6;
  stroke-width: 2;
  stroke-dasharray: 1;
}
.ha-eingang { fill: #7cc3d6; }
.ha-ampel {
  align-self: center;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: calc(198 * var(--u));
  overflow: hidden;
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow:
    0 calc(-20 * var(--u)) calc(80 * var(--u)) calc(-12 * var(--u)) rgba(75, 158, 180, .34),
    0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .3),
    0 calc(34 * var(--u)) calc(60 * var(--u)) calc(-20 * var(--u)) rgba(18, 34, 43, .6);
}
.ha-kopf {
  flex: none;
  display: grid;
  place-items: center;
  height: calc(30 * var(--u));
  background: #0c6a7c;
  color: #fff;
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
}
.ha-unter {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: calc(24 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-bottom: calc(1 * var(--u)) solid #e3e8ec;
  font-size: calc(8.5 * var(--u));
}
.ha-unter b { color: #1a1a1a; font-weight: 700; }
.ha-unter span {
  position: absolute;
  left: calc(130 * var(--u));
  color: #68727e;
  font-size: calc(7 * var(--u));
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ha-liste {
  flex: none;
  height: calc(144 * var(--u));
  overflow: hidden;
}
.ha-zeile {
  display: grid;
  grid-template-columns: calc(24 * var(--u)) calc(84 * var(--u)) minmax(calc(64 * var(--u)), 1fr) auto;
  align-items: center;
  column-gap: calc(6 * var(--u));
  box-sizing: border-box;
  height: calc(48 * var(--u));
  padding: 0 calc(10 * var(--u));
  background: #fff;
  font-size: calc(8 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 1400ms var(--ease-inplace);
}
.ha-zeile + .ha-zeile {
  background-image: linear-gradient(#eef1f4, #eef1f4);
  background-size: 100% calc(1 * var(--u));
  background-repeat: no-repeat;
}
.ha-z { display: block; }
.ha-soll { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; overflow: hidden; }
.ha-soll small { display: flex; align-items: center; gap: calc(2 * var(--u)); color: #475260; }
.ha-soll b { color: #1a1a1a; font-weight: 700; font-size: calc(11.5 * var(--u)); font-variant-numeric: tabular-nums; }
.ha-i { display: block; flex: none; width: 1.15em; height: 1.15em; }
.ha-i--uhr { color: #0f6b7c; }
.ha-pille {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  box-sizing: border-box;
  height: calc(18 * var(--u));
  padding: 0 calc(7 * var(--u)) 0 calc(6 * var(--u));
  border: calc(1 * var(--u)) solid;
  border-radius: 999px;
  font-size: calc(8.5 * var(--u));
  font-weight: 600;
}
.ha-pille .ha-i { width: 1.25em; height: 1.25em; }
.ha-pille--lief { background: #dbeef2; border-color: #619fab; color: #0f6b7c; }
.ha-pille--abhol { background: #eef1e0; border-color: #96a06c; color: #5c6b1e; }
.ha-akt { display: flex; gap: calc(4 * var(--u)); justify-content: flex-end; }
.ha-kreis {
  display: grid;
  place-items: center;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  color: #fff;
}
.ha-kreis .ha-i { width: 62%; height: 62%; stroke-width: 1.8; }
.ha-kreis--blau { background: #4b9eb4; }
.ha-kreis--gruen { background: #71a736; }
.ha-kreis--rot { background: #b34f4a; }
.ha-zeile--spaet { background: #fdeee6; box-shadow: inset calc(3 * var(--u)) 0 0 #d47a4a; }
.ha-zeile--spaet .ha-soll b { color: #a8501f; }
.ha-zeile.is-neu { background: #e3f1f5; }
.ha-zeile.is-warte .ha-marke { visibility: hidden; }
.ha-flug {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: calc(32 * var(--u));
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
}
.ha-flug .ha-marke {
  border: 0;
  border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(0, 0, 0, .45);
}
@media (prefers-reduced-motion: reduce) {
  .ha-q .ha-marke, .ha-zeile { transition: none; }
}
.hero.kkz {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
.kkz__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(60% 50% at 72% 70%, rgba(75, 158, 180, .22), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.kkz__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.kkz .kkz__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.kkz .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.kkz .hero__kicker { color: var(--on-deep-2); }
.kkz .hero-type {
  color: var(--on-deep);
  font-size: clamp(32px, 8.6vw, 44px);
  text-wrap: balance;
}
.kkz .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.kkz .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.kkz .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kkz .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .kkz .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.kkz { --kante: var(--s-8); }
}
.kkz__figur {
  container-type: inline-size;
  container-name: kkz;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.kkz__netz {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1015;
  --bx: 190; --by: 300; --bw: 620;
}
.kkz__bild {
  position: absolute;
  left: calc(var(--bx) / 1000 * 100%);
  top: calc(var(--by) / 1015 * 100%);
  width: calc(var(--bw) / 1000 * 100%);
  height: auto;
  max-width: none;
  display: block;
  filter: drop-shadow(0 3cqw 4cqw rgba(0, 0, 0, .5));
}
.kkz__bahnen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}
.kkz__satz--breit { display: none; }
.kkz__schein path {
  fill: none;
  stroke: rgba(75, 158, 180, .28);
  stroke-width: 7px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kkz__bahn path {
  fill: none;
  stroke: #7cc3d6;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kkz__punkte circle { fill: #7cc3d6; }
.kkz__punkte .kkz__port { fill: #eef2f4; stroke: #7cc3d6; stroke-width: 2px; }
.kkz__karten rect { fill: #fff; }
@media (prefers-reduced-motion: reduce) { .kkz__karten { display: none; } }
.kkz__karten .kkz__strich { fill: #c9d3e0; }
.kkz__kanaele { list-style: none; margin: 0; padding: 0; }
.kkz__kachel {
  position: absolute;
  z-index: 3;
  top: 0;
  left: calc(var(--x) / 1000 * 100%);
  width: 22%;
  height: calc(140 / 1015 * 100%);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  background: var(--surface);
  border-radius: max(10px, 2.8cqw);
  box-shadow: 0 1.2cqw 3cqw -1cqw rgba(0, 0, 0, .45);
}
.kkz__kachel img { display: block; width: auto; height: 9.6cqw; max-width: 80%; object-fit: contain; }
.kkz__kachel .kkz__l--takeaway { height: 9.8cqw; }
.kkz__kachel .kkz__l--wolt { height: 8.2cqw; }
.kkz__kachel .kkz__l--ubereats { height: 6.6cqw; }
.kkz__kachel .kkz__l--webshop {
  display: block;
  width: auto;
  height: 8.4cqw;
  aspect-ratio: 30 / 20;
  color: var(--action);
  overflow: visible;
}
.kkz__zettel {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  margin: -40px auto 0;
  padding: 10px;
  border-radius: var(--r-inner);
  background: rgba(245, 245, 247, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 60px -20px rgba(0, 0, 0, .6);
  text-align: left;
}
.kkz__kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 4px 8px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink-2);
}
.kkz__globus { width: 14px; height: 14px; flex: none; }
.kkz__zahl {
  margin-left: auto;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: #fff;
  font-size: var(--t-caption);
  line-height: 20px;
}
.kkz__liste {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kkz__karte {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 8px 12px 8px 8px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 34, 43, .08);
}
.kkz__logo {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 36px;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 34, 43, .1);
}
.kkz__logo img { display: block; width: auto; height: 27px; max-width: 46px; object-fit: contain; }
.kkz__logo .kkz__l--takeaway { height: 29px; }
.kkz__logo .kkz__l--wolt { height: 24px; }
.kkz__logo .kkz__l--ubereats { height: 19px; }
.kkz__logo .kkz__l--webshop {
  display: block;
  width: 36px;
  height: 24px;
  color: var(--action);
  overflow: visible;
}
.kkz__kanal {
  grid-column: 2;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.kkz__zeit {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-size: var(--t-caption);
  line-height: 20px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.kkz__z2 {
  grid-column: 2 / 4;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 359px) { .kkz__nr { display: none; } }
.kkz__tse {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px -10px 0;
  padding: 10px 14px 2px;
  border-top: 1px dashed #b9bec2;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-2);
  white-space: nowrap;
}
.kkz__haken { width: 18px; height: 18px; flex: none; color: var(--action); }
.kkz__fiskaly { display: block; width: auto; height: 17px; max-width: none; margin-top: 1px; }
@supports not (width: 1cqw) {
  .kkz__bild { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
  .kkz__kachel { border-radius: 12px; box-shadow: 0 6px 14px -5px rgba(0, 0, 0, .45); }
  .kkz__kachel img { height: 68.6%; }
  .kkz__kachel .kkz__l--takeaway { height: 70%; }
  .kkz__kachel .kkz__l--wolt { height: 58.6%; }
  .kkz__kachel .kkz__l--ubereats { height: 47.1%; }
  .kkz__kachel .kkz__l--webshop { height: 60%; }
}
@container kkz (min-width: 420px) {
  .kkz__netz { --bx: 360; --by: 290; --bw: 640; }
  .kkz__satz--schmal { display: none; }
  .kkz__satz--breit { display: inline; }
  .kkz__netz { margin-bottom: 56px; }
  .kkz__zettel {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 304px;
    margin: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .kkz--auftritt .kkz__bild   { animation: kkz-auf 1000ms var(--ease) 250ms both; }
  .kkz--auftritt .kkz__kachel { animation: kkz-fall 800ms var(--ease) both;
                                animation-delay: calc(450ms + var(--i) * 90ms); }
  .kkz--auftritt .kkz__bahn path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: kkz-zieh 700ms var(--ease-inplace) forwards;
    animation-delay: calc(850ms + var(--i, 0) * 90ms);
  }
  .kkz--auftritt .kkz__schein path { opacity: 0; animation: kkz-da 600ms var(--ease-inplace) 1400ms forwards; }
  .kkz--auftritt .kkz__zettel { animation: kkz-rein 900ms var(--ease) 1500ms both; }
  .kkz--auftritt .kkz__karte  { animation: kkz-ein 700ms var(--ease) both;
                                animation-delay: calc(1750ms + var(--nach, 0) * 120ms); }
  .kkz--auftritt .kkz__tse    { animation: kkz-stempel 520ms var(--ease-inplace) 2350ms both; }
  @keyframes kkz-auf     { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
  @keyframes kkz-fall    { from { opacity: 0; translate: 0 -48px; } to { opacity: 1; translate: 0 0; } }
  @keyframes kkz-zieh    { to { stroke-dashoffset: 0; } }
  @keyframes kkz-da      { to { opacity: 1; } }
  @keyframes kkz-rein    { from { opacity: 0; translate: -64px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes kkz-ein     { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }
  @keyframes kkz-stempel { from { opacity: 0; scale: 1.14; } to { opacity: 1; scale: 1; } }
}
@media (min-width: 1000px) {
  .hero.kkz {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.kkz { min-height: calc(100svh - var(--nav-h)); }
  }
  .kkz__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .kkz .kkz__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 64px;
  }
  .kkz .hero-type { font-size: clamp(38px, 3.2vw, 46px); text-wrap: wrap; }
  .kkz .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .kkz .hero__kicker { color: var(--on-deep); }
  .kkz__figur { max-width: 560px; margin-inline: auto 0; }
}
.hero.ksb {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
.ksb__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(55% 50% at 74% 58%, rgba(75, 158, 180, .24), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.ksb__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.ksb .ksb__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.ksb .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.ksb .hero__kicker { color: var(--on-deep-2); }
.ksb .hero-type {
  color: var(--on-deep);
  font-size: clamp(32px, 8.6vw, 44px);
  text-wrap: balance;
}
.ksb .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.ksb .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.ksb .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ksb .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .ksb .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.ksb { --kante: var(--s-8); }
}
.ksb__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.ksb__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.ksb__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.ksb__figur {
  container-type: inline-size;
  container-name: ksb;
  position: relative;
  min-width: 0;
  width: 100%;
  --bleed: max(var(--kante), calc((100vw - var(--page)) / 2 + var(--kante)));
}
.ksb__buehne {
  position: relative;
  --links: 20px;
  --mon-b: calc(100cqw - var(--links) + var(--bleed) + 24px);
  --mon-h: calc(var(--mon-b) * 700 / 691);
  --bon-oben: .74;
}
.ksb__shop {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--mon-b);
  max-width: none;
  height: auto;
  margin-left: var(--links);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .42));
}
.ksb__bon {
  position: relative;
  z-index: 2;
  width: 240px;
  max-width: 74cqw;
  margin-top: calc(var(--mon-h) * (var(--bon-oben) - 1));
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .5)) drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}
.ksb__papier {
  box-sizing: border-box;
  padding: 20px 16px 22px;
  background: #fbfbfa;
  color: var(--ink);
  text-align: left;
  font-variant-numeric: tabular-nums;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 7L6 0l6 7z'/%3E%3C/svg%3E") left top / 12px 7px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 13px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0h12L6 7z'/%3E%3C/svg%3E") left bottom / 12px 7px repeat-x;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 7L6 0l6 7z'/%3E%3C/svg%3E") left top / 12px 7px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 13px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0h12L6 7z'/%3E%3C/svg%3E") left bottom / 12px 7px repeat-x;
}
.ksb__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed #b9bec2;
}
.ksb__kt, .ksb__kr { display: grid; min-width: 0; }
.ksb__kt b { font-size: 15px; line-height: 20px; font-weight: 600; }
.ksb__kt span { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ksb__kr { text-align: right; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.ksb__kr span:first-child { line-height: 20px; }
.ksb__liste {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px dashed #b9bec2;
}
.ksb__posten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
}
.ksb__name {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ksb__menge { color: var(--ink-2); }
.ksb__groesse {
  grid-column: 1 / -1;
  padding-left: 19px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
}
.ksb__betrag { flex: none; font-size: 14px; line-height: 20px; color: var(--ink); }
.ksb__summe,
.ksb__provision {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.ksb__summe {
  padding-top: 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.ksb__summe .ksb__betrag { font-weight: 600; }
.ksb__provision {
  align-items: center;
  margin: 10px -6px 0;
  padding: 8px 10px 8px 8px;
  border-radius: 10px;
  background: var(--action-soft);
  color: var(--action-deep);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
}
.ksb__provision > span:first-of-type { margin-right: auto; }
.ksb__provision .ksb__betrag { font-size: 17px; line-height: 24px; color: var(--action-deep); }
.ksb__hk {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  margin-right: -2px;
}
.ksb__hk svg { width: 14px; height: 14px; }
@container ksb (min-width: 440px) {
  .ksb__buehne {
    --links: max(64px, calc(100cqw + var(--bleed) + 24px - var(--mon-max, 620px)));
    --bon-oben: .6;
  }
  .ksb__bon {
    width: 288px;
    margin-left: max(0px, calc(var(--links) - 120px));
  }
  .ksb__papier { padding: 22px 18px 24px; }
}
@supports not (width: 1cqw) {
  .ksb__shop { width: calc(100% - 20px); margin-left: 20px; }
  .ksb__bon  { max-width: 74%; margin-top: calc(-26.3% + 5px); }
}
@media (min-width: 1600px) {
  .ksb__figur { --mon-max: 740px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ksb--auftritt .ksb__shop   { animation: ksb-auf 1000ms var(--ease) 150ms both; }
  .ksb--auftritt .ksb__bon    { animation: ksb-bon 1100ms var(--ease) 600ms both; }
  .ksb--auftritt .ksb__papier { animation: ksb-druck 1100ms var(--ease) 600ms both; }
  .ksb--auftritt .ksb__provision { animation: ksb-stempel 520ms var(--ease-inplace) 1650ms both; }
  @keyframes ksb-auf   { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes ksb-bon   { from { opacity: 0; translate: 0 96px; } 30% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
  @keyframes ksb-druck { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes ksb-stempel { from { opacity: 0; scale: 1.12; } to { opacity: 1; scale: 1; } }
}
@media (min-width: 1000px) {
  .hero.ksb {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.ksb { min-height: calc(100svh - var(--nav-h)); }
  }
  .ksb__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .ksb .ksb__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .ksb .hero-type { font-size: clamp(38px, 3.2vw, 46px); text-wrap: wrap; }
  .ksb .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .ksb .hero__kicker { color: var(--on-deep); }
}
html.kp-an {
  scroll-padding-top: calc(var(--nav-h) + 24px);
  scroll-padding-bottom: 96px;
}
.sprung.kp {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin-inline: auto;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(238, 242, 244, .14);
  border-radius: 26px;
  background: rgba(18, 34, 43, .9);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
  color: var(--on-deep);
  opacity: 0;
  translate: 0 calc(100% + 32px);
  pointer-events: none;
  transition: translate 600ms var(--ease), opacity 320ms var(--ease-inplace);
}
.sprung.kp--da,
.sprung.kp:focus-within {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
html:has(.nav--mob) .sprung.kp { opacity: 0; translate: 0 calc(100% + 32px); pointer-events: none; }
.kp .inner {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
}
.kp .sprung__liste {
  gap: 0;
  overflow: visible;
  background: none;
}
.kp .sprung__liste a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--on-deep-2);
  text-decoration: none;
  transition: color 320ms var(--ease-inplace);
}
.kp .sprung__liste a:hover { color: var(--on-deep); text-decoration: none; }
.kp .sprung__liste a[aria-current] { color: var(--deep); }
.kp .sprung__liste a:active { transform: scale(.97); }
.kp a:focus-visible,
.kp .kp__knopf:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 22px;
}
.kp__marke {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mw, 0px);
  height: 44px;
  translate: var(--mx, 0px) var(--my, 0px);
  border-radius: 22px;
  background: var(--on-deep);
  opacity: 0;
  pointer-events: none;
}
.kp--aktiv .kp__marke { opacity: 1; }
.kp--bereit .kp__marke {
  transition: translate 500ms var(--ease), width 500ms var(--ease),
              opacity 200ms var(--ease-inplace);
}
.kp__knopf { display: none; }
.kp__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprung.kp--kompakt {
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column-reverse;
}
.kp--kompakt .kp__knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--on-deep);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp--kompakt .kp__knopf:active { transform: scale(.98); }
.kp__zahl {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(238, 242, 244, .12);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kp__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
.kp__pfeil {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--on-deep-2);
  transition: rotate 500ms var(--ease);
}
.kp--offen .kp__pfeil { rotate: 180deg; }
.kp--kompakt .inner {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms var(--ease);
}
.kp--kompakt.kp--offen .inner { grid-template-rows: 1fr; }
.kp--kompakt .sprung__liste {
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  visibility: hidden;
  transition: visibility 0s linear 500ms;
}
.kp--kompakt.kp--offen .sprung__liste { visibility: visible; transition-delay: 0s; }
.kp--kompakt .sprung__liste li:last-child { margin-bottom: 4px; }
.kp--kompakt .sprung__liste a {
  justify-content: space-between;
  padding: 0 14px;
  font-size: 15px;
  white-space: normal;
}
.kp--kompakt .sprung__liste a[aria-current] {
  background: var(--on-deep);
  color: var(--deep);
}
.kp--kompakt .kp__marke { display: none; }
.kp--kompakt.kp--offen { border-radius: 24px; }
.hero.dst {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
.dst__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(55% 50% at 70% 42%, rgba(75, 158, 180, .24), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.dst__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.dst .dst__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.dst .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.dst .hero__kicker { color: var(--on-deep-2); }
.dst .hero-type {
  color: var(--on-deep);
  font-size: clamp(32px, 8.6vw, 44px);
  text-wrap: balance;
}
.dst .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.dst .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.dst .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dst .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .dst .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.dst { --kante: var(--s-8); }
}
.dst__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.dst__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.dst__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.dst__figur {
  container-type: inline-size;
  container-name: dst;
  position: relative;
  min-width: 0;
  width: 100%;
  --bleed: max(var(--kante), calc((100vw - var(--page)) / 2 + var(--kante)));
}
.dst__buehne {
  position: relative;
  --tw: calc(100cqw * 1.34 + var(--bleed));
  --th: calc(var(--tw) * 900 / 1020);
  --oben: calc(var(--th) * .42);
  --chip: 48px;
  --qt: 4px;
  --ql: 8px;
  padding-bottom: 60px;
}
.dst__theke {
  display: block;
  position: relative;
  z-index: 1;
  width: var(--tw);
  max-width: none;
  height: auto;
  margin-left: auto;
  margin-right: calc(-1 * var(--bleed));
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .42));
}
.dst__quelle {
  position: absolute;
  z-index: 4;
  top: var(--qt);
  left: var(--ql);
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 7px 12px 7px 10px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55);
}
.dst__logo { display: block; width: auto; height: 26px; max-width: none; }
.dst__qtext { display: grid; gap: 1px; }
.dst__qk {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dst__qz {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 19px;
  color: var(--ink);
  white-space: nowrap;
}
.dst__qz b { font-weight: 600; }
.dst__qp {
  color: var(--action-deep);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dst__draht {
  position: absolute;
  z-index: 4;
  top: calc(var(--qt) + var(--chip));
  left: calc(var(--ql) + 26px);
  width: 2px;
  height: calc(var(--oben) - var(--qt) - var(--chip));
  --weg: calc(var(--oben) - var(--qt) - var(--chip) - 8px);
}
.dst__linie {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: #7cc3d6;
  transform-origin: top center;
}
.dst__funke {
  position: absolute;
  left: -7px;
  top: 0;
  width: 16px;
  height: 11px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(75, 158, 180, .35);
  opacity: 0;
  visibility: hidden;
}
.dst__port {
  position: absolute;
  left: -5px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #eef2f4;
  box-shadow: 0 0 0 2px #7cc3d6;
}
.dst__tafel {
  position: absolute;
  z-index: 3;
  top: var(--oben);
  left: 0;
  box-sizing: border-box;
  width: 94cqw;
  padding: 7px;
  border-radius: 16px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 60px -18px rgba(0, 0, 0, .65);
}
.dst__schirm {
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  text-align: left;
}
.dst__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 14px;
  background: var(--action);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.dst__live {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: var(--t-caption);
  line-height: 20px;
  font-weight: 600;
}
.dst__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}
.dst__zeilen {
  margin: 0;
  padding: 4px 14px 10px;
  list-style: none;
}
.dst__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 12px;
  box-sizing: border-box;
  min-height: 46px;
  padding: 4px 8px;
  margin-inline: -8px;
  border-radius: 10px;
  border-bottom: 1px solid var(--hairline);
}
.dst__zeile:last-child { border-bottom: 0; }
.dst__zeile--wechsel {
  border-bottom-color: transparent;
  background: var(--action-soft);
}
.dst__name {
  grid-column: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dst__pille {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin-inline-start: 10px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.dst__preis {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  width: 76px;
  height: 42px;
  font-variant-numeric: tabular-nums;
}
.dst__wert {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
}
.dst__alt {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--ink-3);
  transform-origin: right center;
}
.dst__strich {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: left center;
}
.dst__neu {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 19px;
  line-height: 24px;
  font-weight: 700;
  color: var(--action-deep);
}
@container dst (min-width: 440px) {
  .dst__buehne {
    --tw: calc(100cqw + var(--bleed));
    --oben: calc(var(--th) * .2);
    --qt: 8px;
    --ql: 16px;
    padding-bottom: 0;
  }
  .dst__draht { left: calc(var(--ql) + 28px); }
  .dst__tafel { width: 88cqw; padding: 9px; }
  .dst__kopf { padding: 10px 18px; font-size: 15px; }
  .dst__zeilen { padding: 6px 18px 12px; }
  .dst__zeile { min-height: 52px; }
  .dst__name { font-size: 16px; }
  .dst__preis { width: 84px; height: 44px; }
  .dst__wert { font-size: 18px; }
  .dst__neu { font-size: 21px; line-height: 26px; }
}
@media (prefers-reduced-motion: no-preference) {
  .dst--auftritt .dst__theke  { animation: dst-auf 1000ms var(--ease) 100ms both; }
  .dst--auftritt .dst__tafel  { animation: dst-tafel 900ms var(--ease) 250ms both; }
  .dst--auftritt .dst__zeile  { animation: dst-zeile 600ms var(--ease) both;
                                animation-delay: calc(600ms + var(--i, 0) * 70ms); }
  .dst--auftritt .dst__quelle { animation: dst-chip 700ms var(--ease) 1000ms both; }
  .dst--auftritt .dst__linie  { animation: dst-zieh 420ms var(--ease-inplace) 1320ms both; }
  .dst--auftritt .dst__funke  { animation: dst-fahrt 780ms var(--ease) 1700ms both; }
  .dst--auftritt .dst__port   { animation: dst-port 360ms var(--ease-inplace) 2320ms both; }
  .dst--auftritt .dst__zeile--wechsel { animation: dst-leuchte 700ms var(--ease-inplace) 2400ms both; }
  .dst--auftritt .dst__alt    { animation: dst-alt 700ms var(--ease) 2400ms both; }
  .dst--auftritt .dst__strich { animation: dst-strich 380ms var(--ease-inplace) 2700ms both; }
  .dst--auftritt .dst__neu    { animation: dst-neu 700ms var(--ease) 2520ms both; }
  .dst--auftritt .dst__pille  { animation: dst-pille 600ms var(--ease) 2700ms both; }
  @keyframes dst-auf    { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes dst-tafel  { from { opacity: 0; translate: 0 26px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes dst-zeile  { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
  @keyframes dst-chip   { from { opacity: 0; translate: 0 -22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes dst-zieh   { from { scale: 1 0; } to { scale: 1 1; } }
  @keyframes dst-fahrt  {
    0%   { visibility: hidden; opacity: 0; translate: 0 0; }
    1%   { visibility: visible; opacity: 1; }
    86%  { opacity: 1; }
    100% { visibility: hidden; opacity: 0; translate: 0 var(--weg); }
  }
  @keyframes dst-port   { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
  @keyframes dst-leuchte { from { background-color: rgba(234, 242, 244, 0); } to { background-color: var(--action-soft); } }
  @keyframes dst-alt    { from { scale: 1.42; translate: 0 -13px; color: var(--ink); } to { scale: 1; translate: 0 0; color: var(--ink-3); } }
  @keyframes dst-strich { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes dst-neu    {
    0%   { visibility: hidden; opacity: 0; translate: 0 14px; }
    1%   { visibility: visible; }
    100% { visibility: visible; opacity: 1; translate: 0 0; }
  }
  @keyframes dst-pille  {
    0%   { visibility: hidden; opacity: 0; translate: -14px 0; }
    1%   { visibility: visible; }
    100% { visibility: visible; opacity: 1; translate: 0 0; }
  }
}
@supports not (width: 1cqw) {
  .dst__theke { width: 100%; margin-right: 0; }
  .dst__tafel { width: 100%; }
}
@media (min-width: 1000px) {
  .hero.dst {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.dst { min-height: calc(100svh - var(--nav-h)); }
  }
  .dst__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .dst .dst__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .dst .hero-type { font-size: clamp(38px, 3.2vw, 46px); text-wrap: wrap; }
  .dst .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .dst .hero__kicker { color: var(--on-deep); }
}
@media (max-width: 359px) {
  .dst__zeilen { padding-inline: 10px; }
  .dst__zeile { column-gap: 8px; }
  .dst__pille { margin-inline-start: 0; }
  .dst__preis { width: 64px; }
}
.hero.kap {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
.kap__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(52% 46% at 70% 40%, rgba(75, 158, 180, .24), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.kap__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.kap .kap__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.kap .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.kap .hero__kicker { color: var(--on-deep-2); }
.kap .hero-type {
  color: var(--on-deep);
  font-size: clamp(32px, 8.6vw, 44px);
  text-wrap: balance;
}
.kap .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.kap .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.kap .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kap .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .kap .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.kap { --kante: var(--s-8); }
}
.kap__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.kap__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.kap__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.kap__figur {
  container-type: inline-size;
  container-name: kap;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  --bleed: 0px;
}
.kap__buehne {
  position: relative;
  width: calc(100% + var(--bleed) + 24px);
  aspect-ratio: 380 / 420;
}
.kap__hinten,
.kap__vorn {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}
.kap__hinten {
  z-index: 1;
  left: 46%;
  top: 0;
  width: 54%;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .45));
}
.kap__vorn {
  z-index: 2;
  left: 2%;
  top: 9%;
  width: 44%;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
}
.kap__stapel {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin: -76px auto 0;
  padding: 0;
  list-style: none;
}
.kap__stapel::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -40%;
  top: -85%;
  width: 180%;
  height: 230%;
  pointer-events: none;
  background: radial-gradient(46% 40% at 50% 30%, rgba(75, 158, 180, .46), rgba(75, 158, 180, .13) 56%, rgba(75, 158, 180, 0) 78%);
}
.kap__push {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 1px;
  align-items: center;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(245, 245, 247, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 26px 48px -16px rgba(0, 0, 0, .62);
  text-align: left;
}
.kap__icon {
  grid-column: 1;
  grid-row: 1 / 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 34, 43, .1);
}
.kap__icon img { display: block; width: 38px; height: 38px; max-width: none; object-fit: contain; }
.kap__app {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-caption);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kap__zeit {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-size: var(--t-caption);
  line-height: 16px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.kap__titel {
  grid-column: 2 / 4;
  grid-row: 2;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}
.kap__zeile {
  grid-column: 2 / 4;
  grid-row: 3;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-2);
}
@container kap (min-width: 400px) {
  .kap__buehne { aspect-ratio: 720 / 700; }
  .kap__hinten { left: 46%; top: 0; width: 58%; }
  .kap__vorn   { left: 12%; top: 10%; width: 41%; }
  .kap__stapel {
    position: absolute;
    left: 0;
    top: 42%;
    width: 340px;
    max-width: 100%;
    margin: 0;
  }
  .kap__push { padding: 13px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kap--auftritt .kap__hinten { animation: kap-auf 1000ms var(--ease) 150ms both; }
  .kap--auftritt .kap__vorn   { animation: kap-auf 1000ms var(--ease) 300ms both; }
  .kap--auftritt .kap__push {
    animation: kap-push 900ms var(--ease) both;
    animation-delay: calc(1000ms + var(--i, 0) * 300ms);
  }
  .kap--auftritt .kap__stapel::before {
    animation: kap-schein 900ms var(--ease-inplace) 1150ms both;
  }
  @keyframes kap-auf {
    from { opacity: 0; visibility: hidden; translate: 0 40px; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; translate: 0 0; }
  }
  @keyframes kap-push {
    from { opacity: 0; visibility: hidden; translate: 0 -128px; scale: .92; }
    1%   { opacity: 0; visibility: visible; }
    28%  { opacity: 1; }
    to   { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
  }
  @keyframes kap-schein {
    from { opacity: 0; visibility: hidden; scale: .55; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; scale: 1; }
  }
}
@media (min-width: 1000px) {
  .hero.kap {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.kap { min-height: calc(100svh - var(--nav-h)); }
  }
  .kap__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .kap .kap__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .kap .hero-type { font-size: clamp(38px, 3.2vw, 46px); text-wrap: wrap; }
  .kap .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .kap .hero__kicker { color: var(--on-deep); }
  .kap__figur {
    margin-inline: auto 0;
    --bleed: min(120px, max(0px, calc((100vw - var(--page)) / 2 + var(--kante))));
  }
}
@media (min-width: 1400px) {
  .kap__figur { max-width: 520px; }
}
.hero.tkg {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
@media (min-width: 560px) {
  .hero.tkg { --kante: var(--s-8); }
}
.tkg__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(58% 52% at 74% 62%, rgba(75, 158, 180, .22), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.tkg__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.tkg .tkg__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.tkg .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.tkg .hero__kicker { color: var(--on-deep-2); }
.tkg .hero-type {
  color: var(--on-deep);
  font-size: clamp(30px, 8.2vw, 44px);
  text-wrap: balance;
}
.tkg .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.tkg .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.tkg .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tkg .btn:active { transform: scale(.97); }
.tkg .btn--line { color: var(--on-deep); border-color: #527183; }
.tkg .btn--line:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 559px) {
  .tkg .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
.tkg__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.tkg__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.tkg__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.tkg__figur {
  container-type: inline-size;
  container-name: tkg;
  position: relative;
  min-width: 0;
  width: 100%;
}
.tkg__buehne {
  position: relative;
  --bw: calc(100cqw + 2 * var(--kante));
}
.tkg__geraet {
  display: block;
  width: var(--bw);
  max-width: none;
  height: auto;
  margin-left: calc(-1 * var(--kante));
  aspect-ratio: 999 / 524;
  object-fit: cover;
  object-position: center top;
}
.tkg__karte {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  margin: var(--s-3) auto 0;
  padding: 12px 14px 0;
  border-radius: var(--r-inner);
  background: rgba(245, 245, 247, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 60px -20px rgba(0, 0, 0, .6);
  color: var(--ink);
  text-align: left;
}
.tkg__kkopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  padding-bottom: 12px;
}
.tkg__fuehler { width: 24px; height: 24px; flex: none; color: var(--action); }
.tkg__kname { display: grid; min-width: 0; }
.tkg__kname b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkg__kname span { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.tkg__werte {
  position: relative;
  overflow: hidden;
  width: 104px;
  height: 26px;
  font-variant-numeric: tabular-nums;
}
.tkg__wert-a,
.tkg__wert-b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.tkg__wert-a { color: var(--ink); visibility: hidden; }
.tkg__wert-b { color: var(--ember); }
.tkg__wd { width: 17px; height: 17px; flex: none; }
.tkg__plot {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
}
.tkg__yachse { grid-area: 1 / 1; position: relative; }
.tkg__ymarke {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 14px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tkg__feld {
  grid-area: 1 / 2;
  position: relative;
  aspect-ratio: 286 / 116;
}
.tkg__graf { display: block; width: 100%; height: 100%; overflow: visible; }
.tkg__xachse {
  grid-area: 2 / 2;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11px;
  line-height: 14px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tkg__raster line { stroke: var(--hairline); stroke-width: 1px; }
.tkg__grenze {
  stroke: var(--ember);
  stroke-width: 1.5px;
  stroke-dasharray: 5 4;
}
.tkg__lot {
  stroke: var(--ember);
  stroke-width: 1px;
  stroke-dasharray: 2 3;
  opacity: .6;
}
.tkg__kurve { fill: none; stroke: var(--action); stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round; }
.tkg__ueber { fill: none; stroke: var(--ember); stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; }
.tkg__flaeche { stroke: none; }
.tkg__mgrund { fill: rgba(182, 68, 0, .13); }
.tkg__mstrich { stroke: rgba(182, 68, 0, .5); stroke-width: 1.6; }
.tkg__alarmpunkt { fill: #fff; stroke: var(--ember); stroke-width: 2.4px; }
.tkg__jetzt { fill: var(--ember); }
.tkg__halo { fill: rgba(182, 68, 0, .18); }
.tkg__gmarke {
  position: absolute;
  left: 0;
  top: 40%;
  transform: translateY(-100%);
  margin-top: -3px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(245, 245, 247, .9);
  font-size: 11px;
  line-height: 15px;
  font-weight: 600;
  color: var(--ember);
  white-space: nowrap;
}
.tkg__melden {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px -14px 0;
  padding: 9px 14px 10px;
  border-left: 3px solid var(--ember);
  border-radius: 0 0 var(--r-inner) var(--r-inner);
  background: rgba(182, 68, 0, .1);
}
.tkg__mwd { width: 20px; height: 20px; flex: none; color: var(--ember); }
.tkg__mtext { display: grid; min-width: 0; }
.tkg__mtext b { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ink); }
.tkg__mtext span { font-size: 12px; line-height: 16px; color: var(--ink-2); }
@container tkg (min-width: 440px) {
  .tkg__buehne {
    --bleed: max(var(--kante), calc((100vw - var(--page)) / 2 + var(--kante) + 28px));
    --bw: min(1000px, calc(100cqw + var(--bleed)));
  }
  .tkg__geraet { margin-left: 0; }
  .tkg__karte {
    position: absolute;
    left: calc(-1 * var(--s-6));
    bottom: -12px;
    width: 304px;
    max-width: none;
    margin: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .tkg--auftritt .tkg__geraet { animation: tkg-auf 1000ms var(--ease) 150ms both; }
  .tkg--auftritt .tkg__karte  { animation: tkg-rein 900ms var(--ease) 550ms both; }
  .tkg--auftritt .tkg__welle {
    animation: tkg-funk 520ms var(--ease-inplace) both;
    animation-delay: calc(1150ms + var(--i, 0) * 130ms);
  }
  .tkg--auftritt .tkg__kurve { animation: tkg-zieh 1300ms var(--ease-inplace) 1250ms both; }
  .tkg--auftritt .tkg__ueber { animation: tkg-zieh 420ms linear 2550ms both; }
  .tkg--auftritt .tkg__flaeche,
  .tkg--auftritt .tkg__lot    { animation: tkg-da 420ms var(--ease-inplace) 2700ms both; }
  .tkg--auftritt .tkg__alarmpunkt { animation: tkg-pop 460ms var(--ease-inplace) 2650ms both; }
  .tkg--auftritt .tkg__jetzt,
  .tkg--auftritt .tkg__halo   { animation: tkg-pop 460ms var(--ease-inplace) 2950ms both; }
  .tkg--auftritt .tkg__wert-a { animation: tkg-wert-weg 520ms var(--ease) 2800ms both; }
  .tkg--auftritt .tkg__wert-b { animation: tkg-wert-her 520ms var(--ease) 2800ms both; }
  .tkg--auftritt .tkg__melden { animation: tkg-oeffnen 620ms var(--ease) 2950ms both; }
  @keyframes tkg-auf   { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes tkg-rein  { from { opacity: 0; translate: -56px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes tkg-funk  { from { opacity: 0; visibility: hidden; stroke-dasharray: 24; stroke-dashoffset: 24; }
                         50%  { opacity: 1; visibility: visible; }
                         to   { opacity: 1; visibility: visible; stroke-dasharray: 24; stroke-dashoffset: 0; } }
  @keyframes tkg-zieh  { from { visibility: hidden; stroke-dasharray: 1; stroke-dashoffset: 1; }
                         1%   { visibility: visible; }
                         to   { visibility: visible; stroke-dasharray: 1; stroke-dashoffset: 0; } }
  @keyframes tkg-da    { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
  @keyframes tkg-pop   { from { opacity: 0; visibility: hidden; scale: .3; }
                         60%  { opacity: 1; visibility: visible; scale: 1.25; }
                         to   { opacity: 1; visibility: visible; scale: 1; } }
  @keyframes tkg-wert-weg { from { visibility: visible; translate: 0 0; }
                            99% { visibility: visible; }
                            to  { visibility: hidden; translate: 0 -100%; } }
  @keyframes tkg-wert-her { from { visibility: hidden; translate: 0 100%; }
                            1%  { visibility: visible; }
                            to  { visibility: visible; translate: 0 0; } }
  @keyframes tkg-oeffnen  { from { visibility: hidden; clip-path: inset(0 0 100% 0); }
                            1%  { visibility: visible; }
                            to  { visibility: visible; clip-path: inset(0 0 0 0); } }
}
.tkg__alarmpunkt, .tkg__jetzt, .tkg__halo { transform-box: fill-box; transform-origin: center; }
@media (min-width: 1000px) {
  .hero.tkg {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.tkg { min-height: calc(100svh - var(--nav-h)); }
  }
  .tkg__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .tkg .tkg__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .tkg .hero-type { font-size: clamp(36px, 3.1vw, 46px); text-wrap: wrap; }
  .tkg .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .tkg .hero__kicker { color: var(--on-deep); }
  .tkg__figur { margin-inline: auto 0; }
}
@supports not (width: 1cqw) {
  .tkg__geraet { width: 100%; margin-left: 0; }
  .tkg__karte  { position: relative; left: auto; bottom: auto; width: 100%; max-width: 380px; margin: var(--s-3) auto 0; }
}
.hero.fsu {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: var(--s-10);
}
@media (min-width: 560px) {
  .hero.fsu { --kante: var(--s-8); }
}
.fsu__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(58% 52% at 74% 58%, rgba(75, 158, 180, .22), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.fsu__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.fsu .fsu__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.fsu .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.fsu .hero__kicker { color: var(--on-deep-2); }
.fsu .hero-type {
  color: var(--on-deep);
  font-size: clamp(30px, 7.6vw, 44px);
  text-wrap: balance;
}
.fsu .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.fsu .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.fsu .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fsu .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .fsu .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
.fsu__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.fsu__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.fsu__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.fsu__figur {
  container-type: inline-size;
  container-name: fsu;
  position: relative;
  min-width: 0;
  width: 100%;
}
.fsu__buehne {
  position: relative;
  --bw: calc(100cqw + var(--kante));
}
.fsu__geraet {
  display: block;
  width: var(--bw);
  max-width: none;
  height: auto;
  aspect-ratio: 762 / 558;
}
.fsu__karte {
  --zh: 36px;
  --zu: calc(var(--zh) / 2 + 39px);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  margin: -24px auto 0;
  padding: 13px 14px 0;
  border-radius: var(--r-inner);
  background: rgba(245, 245, 247, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 60px -20px rgba(0, 0, 0, .6);
  color: var(--ink);
  text-align: left;
}
.fsu__kkopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  padding-bottom: 10px;
}
.fsu__nadel { width: 22px; height: 22px; flex: none; color: var(--action); }
.fsu__kname { display: grid; min-width: 0; }
.fsu__kname b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fsu__kname span {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fsu__pille {
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.fsu__zeilen {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fsu__zeile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  height: var(--zh);
  padding-inline: 8px;
  margin-inline: -8px;
}
.fsu__balken {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: calc(100% * var(--q, 1));
  border-radius: 8px;
  background: rgba(54, 114, 130, .13);
  transform-origin: left center;
}
.fsu__name {
  position: relative;
  min-width: 0;
  font-size: 14px;
  line-height: 19px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fsu__betrag {
  position: relative;
  padding-right: 14px;
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fsu__tropfen {
  position: absolute;
  right: 2px;
  top: 50%;
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--action);
  visibility: hidden;
}
.fsu__summe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  margin: 10px -14px 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--hairline);
  border-radius: 0 0 var(--r-inner) var(--r-inner);
  background: var(--action-soft);
}
.fsu__stitel { display: grid; min-width: 0; }
.fsu__stitel b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}
.fsu__stitel span {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}
.fsu__werk {
  display: flex;
  align-items: flex-start;
  font-size: 24px;
  font-size: clamp(20px, 6.4cqw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--action-deep);
  font-variant-numeric: tabular-nums;
}
.fsu__rolle {
  display: block;
  overflow: hidden;
  height: 1.15em;
}
.fsu__walze {
  display: block;
  translate: 0 calc(var(--z, 0) * -1.15em);
}
.fsu__walze span {
  display: block;
  height: 1.15em;
  line-height: 1.15em;
}
.fsu__fest { display: block; line-height: 1.15em; }
@container fsu (min-width: 440px) {
  .fsu__buehne {
    --bleed: max(0px, calc((100vw - var(--page)) / 2 + var(--kante)));
    --bw: min(762px, calc(100cqw + var(--bleed)));
  }
  .fsu__karte {
    position: absolute;
    left: calc(-1 * var(--s-6));
    bottom: 26px;
    width: 320px;
    max-width: none;
    margin: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fsu--auftritt .fsu__geraet { animation: fsu-auf 1000ms var(--ease) 150ms both; }
  .fsu--auftritt .fsu__karte  { animation: fsu-rein 900ms var(--ease) 500ms both; }
  .fsu--auftritt .fsu__kkopf  { animation: fsu-da 500ms var(--ease-inplace) 800ms both; }
  .fsu--auftritt .fsu__zeile {
    animation: fsu-zeile 520ms var(--ease) both;
    animation-delay: calc(880ms + var(--i, 0) * 90ms);
  }
  .fsu--auftritt .fsu__balken {
    animation: fsu-wachsen 640ms var(--ease) both;
    animation-delay: calc(1000ms + var(--i, 0) * 90ms);
  }
  .fsu--auftritt .fsu__tropfen {
    animation: fsu-fliess 860ms var(--ease) both;
    animation-delay: calc(1620ms + var(--i, 0) * 100ms);
  }
  .fsu--auftritt .fsu__summe { animation: fsu-oeffnen 620ms var(--ease) 2180ms both; }
  .fsu--auftritt .fsu__walze {
    animation: fsu-rollen var(--dauer) var(--ease) 2240ms both;
    --dauer: calc(820ms + var(--s, 0) * 80ms);
  }
  @keyframes fsu-auf     { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fsu-rein    { from { opacity: 0; translate: -56px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes fsu-da      { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
  @keyframes fsu-zeile   { from { opacity: 0; visibility: hidden; translate: 0 -14px; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; translate: 0 0; } }
  @keyframes fsu-wachsen { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes fsu-fliess  { from { visibility: hidden; opacity: 0; scale: .4; translate: 0 0; }
                           10%  { visibility: visible; opacity: 1; scale: 1; }
                           78%  { visibility: visible; opacity: 1; scale: 1; }
                           to   { visibility: hidden; opacity: 0; scale: .5;
                                  translate: 0 calc(var(--n, 0) * var(--zh) + var(--zu)); } }
  @keyframes fsu-oeffnen { from { visibility: hidden; clip-path: inset(0 0 100% 0); }
                           1%   { visibility: visible; }
                           to   { visibility: visible; clip-path: inset(0 0 0 0); } }
  @keyframes fsu-rollen  { from { translate: 0 0; } to { translate: 0 calc(var(--z, 0) * -1.15em); } }
}
.fsu__balken { transform-origin: left center; }
@media (min-width: 1000px) {
  .hero.fsu {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.fsu { min-height: calc(100svh - var(--nav-h)); }
  }
  .fsu__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .fsu .fsu__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .fsu .hero-type { font-size: clamp(36px, 3.1vw, 46px); text-wrap: wrap; }
  .fsu .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .fsu .hero__kicker { color: var(--on-deep); }
  .fsu__figur { margin-inline: auto 0; }
}
@supports not (width: 1cqw) {
  .fsu__geraet { width: 100%; }
  .fsu__karte {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 360px;
    margin: -24px auto 0;
  }
}
.hero.kmk {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
.kmk__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(54% 48% at 72% 34%, rgba(75, 158, 180, .24), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.kmk__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.kmk .kmk__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.kmk .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.kmk .hero__kicker { color: var(--on-deep-2); }
.kmk .hero-type {
  color: var(--on-deep);
  font-size: clamp(32px, 8.6vw, 44px);
  text-wrap: balance;
}
.kmk .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.kmk .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.kmk .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kmk .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .kmk .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.kmk { --kante: var(--s-8); }
}
.kmk__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.kmk__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.kmk__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.kmk__figur {
  container-type: inline-size;
  container-name: kmk;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  --bleed: 0px;
}
.kmk__buehne {
  position: relative;
  width: calc(100% + var(--bleed) + 24px);
}
@media (max-width: 999px) {
  .kmk__buehne { width: 100%; }
}
.kmk__kanaele {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 3%;
  padding: 0;
  list-style: none;
}
.kmk__kanal {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(124, 195, 214, .34);
  background: rgba(75, 158, 180, .16);
  color: var(--on-deep);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.kmk__ki {
  flex: none;
  width: 14px;
  height: 14px;
  color: #7cc3d6;
}
.kmk__feld {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 900;
}
.kmk__links, .kmk__mitte, .kmk__rechts {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  z-index: 1;
}
.kmk__links  { left: 9%;     top: 20.30%; width: 43.41%; filter: drop-shadow(0 1.4cqw 2.6cqw rgba(0, 0, 0, .45)); }
.kmk__mitte  { left: 31.70%; top: 18.31%; width: 46.58%; z-index: 2; filter: drop-shadow(0 1.8cqw 3cqw rgba(0, 0, 0, .5)); }
.kmk__rechts { left: 56.57%; top: 20.04%; width: 43.41%; filter: drop-shadow(0 1.4cqw 2.6cqw rgba(0, 0, 0, .45)); }
.kmk__bahnen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 3;
}
.kmk__satz--breit { display: none; }
.kmk__schein path {
  fill: none;
  stroke: rgba(75, 158, 180, .26);
  stroke-width: 7px;
  stroke-linecap: round;
}
.kmk__schein .kmk__rueck { stroke: rgba(124, 195, 214, .34); stroke-width: 12px; }
.kmk__linie path {
  fill: none;
  stroke: #7cc3d6;
  stroke-width: 1.8px;
  stroke-linecap: round;
}
.kmk__linie .kmk__rueck { stroke: #cfeef7; stroke-width: 3.2px; }
.kmk__punkte circle { fill: #7cc3d6; }
.kmk__punkte .kmk__port { fill: #12222b; stroke: #7cc3d6; stroke-width: 2px; }
.kmk__punkte .kmk__hafen { fill: #12222b; stroke: #cfeef7; stroke-width: 2.6px; }
.kmk__fahrt rect { fill: #fff; }
.kmk__fahrt .kmk__falz { fill: none; stroke: #7cc3d6; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; }
.kmk__fahrt .kmk__strich { fill: #c9d3e0; }
@media (prefers-reduced-motion: reduce) { .kmk__fahrt { display: none; } }
.kmk__karte {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  width: 100%;
  max-width: 340px;
  margin: -18% auto 0;
  padding: 12px 12px 12px;
  border-radius: var(--r-inner);
  background: rgba(245, 245, 247, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 60px -20px rgba(0, 0, 0, .6);
  text-align: left;
}
.kmk__kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink-2);
  min-width: 0;
}
.kmk__kopf > span:first-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kmk__kz { width: 15px; height: 15px; flex: none; color: var(--action); }
.kmk__zahl {
  flex: none;
  margin-left: auto;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: #fff;
  font-size: var(--t-caption);
  line-height: 20px;
}
.kmk__liste {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kmk__zeile {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  padding: 7px 10px 7px 7px;
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 34, 43, .08);
}
.kmk__ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--action-soft);
  color: var(--action);
}
.kmk__ic svg { width: 17px; height: 17px; }
.kmk__quelle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.kmk__zeit {
  font-size: var(--t-caption);
  line-height: 16px;
  font-weight: 400;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.kmk__betrag {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kmk__summe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 7px 10px 7px 7px;
  border-radius: 13px;
  background: var(--action-soft);
  color: var(--action-deep);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}
.kmk__summe > span:first-of-type { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmk__summe .kmk__betrag { color: var(--action-deep); font-size: 15px; }
.kmk__hk {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
}
.kmk__hk svg { width: 14px; height: 14px; }
@container kmk (min-width: 400px) {
  .kmk__satz--schmal { display: none; }
  .kmk__satz--breit  { display: block; }
  .kmk__kanaele {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(84 / 900 * 100%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5%;
    margin: 0;
  }
  .kmk__kanal {
    justify-self: center;
    align-self: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    padding: 7px 13px;
    font-size: max(10.5px, 2.15cqw);
    line-height: 1.25;
  }
  .kmk__ki { width: 1.2em; height: 1.2em; }
  .kmk__links  { left: 38.00%; top: 37.57%; width: 29.58%; }
  .kmk__mitte  { left: 53.47%; top: 36.20%; width: 31.74%; }
  .kmk__rechts { left: 70.42%; top: 37.39%; width: 29.58%; }
  .kmk__karte {
    position: absolute;
    left: 0;
    top: min(calc(556 / 900 * 100%), calc(100% - 190px));
    width: min(286px, 48%);
    max-width: none;
    margin: 0;
    padding: 9px;
  }
  .kmk__kopf { font-size: 11.5px; line-height: 16px; margin-bottom: 6px; }
  .kmk__kz { width: 14px; height: 14px; }
  .kmk__zahl { padding: 0 8px; font-size: 11px; line-height: 17px; }
  .kmk__liste { gap: 5px; }
  .kmk__zeile { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; padding: 4px 7px 4px 4px; border-radius: 11px; }
  .kmk__ic { width: 24px; height: 24px; border-radius: 8px; }
  .kmk__ic svg { width: 14px; height: 14px; }
  .kmk__quelle { font-size: 12.5px; line-height: 18px; gap: 6px; }
  .kmk__zeit { font-size: 11px; }
  .kmk__betrag { font-size: 12.5px; line-height: 18px; }
  .kmk__summe { margin-top: 6px; font-size: 12.5px; line-height: 18px; padding: 5px 7px 5px 4px; border-radius: 11px; }
  .kmk__summe .kmk__betrag { font-size: 13px; }
  .kmk__hk { width: 19px; height: 19px; }
  .kmk__hk svg { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kmk--auftritt .kmk__links  { animation: kmk-auf 900ms var(--ease) 260ms both; }
  .kmk--auftritt .kmk__mitte  { animation: kmk-auf 900ms var(--ease) 150ms both; }
  .kmk--auftritt .kmk__rechts { animation: kmk-auf 900ms var(--ease) 330ms both; }
  .kmk--auftritt .kmk__linie path {
    stroke-dasharray: 1;
    animation: kmk-zug 600ms var(--ease) both;
    animation-delay: calc(550ms + var(--i, 0) * 120ms);
  }
  .kmk--auftritt .kmk__schein path {
    animation: kmk-glanz 600ms var(--ease-inplace) both;
    animation-delay: calc(550ms + var(--i, 0) * 120ms);
  }
  .kmk--auftritt .kmk__linie .kmk__rueck,
  .kmk--auftritt .kmk__schein .kmk__rueck { animation-duration: 620ms; animation-delay: 1550ms; }
  .kmk--auftritt .kmk__kanal {
    animation: kmk-pille 500ms var(--ease-inplace) both;
    animation-delay: calc(1240ms + var(--i, 0) * 120ms);
  }
  .kmk--auftritt .kmk__punkte circle {
    animation: kmk-glanz 400ms var(--ease-inplace) 1300ms both;
  }
  .kmk--auftritt .kmk__punkte .kmk__hafen { animation-delay: 2100ms; }
  .kmk--auftritt .kmk__karte { animation: kmk-karte 800ms var(--ease) 1550ms both; }
  .kmk--auftritt .kmk__zeile {
    animation: kmk-zeile 460ms var(--ease) both;
    animation-delay: calc(2200ms + var(--i, 0) * 110ms);
  }
  .kmk--auftritt .kmk__summe { animation: kmk-stempel 450ms var(--ease-inplace) 2620ms both; }
  @keyframes kmk-auf {
    from { opacity: 0; visibility: hidden; translate: 0 40px; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; translate: 0 0; }
  }
  @keyframes kmk-zug {
    from { stroke-dashoffset: 1; visibility: hidden; }
    1%   { visibility: visible; }
    to   { stroke-dashoffset: 0; visibility: visible; }
  }
  @keyframes kmk-glanz {
    from { opacity: 0; visibility: hidden; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; }
  }
  @keyframes kmk-pille {
    from { opacity: 0; visibility: hidden; translate: 0 -18px; scale: .86; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
  }
  @keyframes kmk-karte {
    from { opacity: 0; visibility: hidden; translate: 0 64px; }
    1%   { opacity: 0; visibility: visible; }
    30%  { opacity: 1; }
    to   { opacity: 1; visibility: visible; translate: 0 0; }
  }
  @keyframes kmk-zeile {
    from { opacity: 0; visibility: hidden; translate: 0 -22px; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; translate: 0 0; }
  }
  @keyframes kmk-stempel {
    from { opacity: 0; visibility: hidden; scale: 1.1; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; scale: 1; }
  }
}
@media (min-width: 1000px) {
  .hero.kmk {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.kmk { min-height: calc(100svh - var(--nav-h)); }
  }
  .kmk__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .kmk .kmk__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .kmk .hero-type { font-size: clamp(38px, 3.2vw, 46px); text-wrap: wrap; }
  .kmk .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .kmk .hero__kicker { color: var(--on-deep); }
  .kmk__figur {
    margin-inline: auto 0;
    --bleed: min(120px, max(0px, calc((100vw - var(--page)) / 2 + var(--kante))));
  }
}
@media (min-width: 1400px) {
  .kmk__figur { max-width: 520px; }
}
.hero.kpr {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
.kpr__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(55% 50% at 72% 46%, rgba(75, 158, 180, .24), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.kpr__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.kpr .kpr__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.kpr .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.kpr .hero__kicker { color: var(--on-deep-2); }
.kpr .hero-type {
  color: var(--on-deep);
  font-size: clamp(30px, 8.2vw, 44px);
  text-wrap: balance;
}
.kpr .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.kpr .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.kpr .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kpr .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .kpr .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.kpr { --kante: var(--s-8); }
}
.kpr__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.kpr__notizen li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.kpr__notizen svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--on-deep-2); }
.kpr__figur {
  container-type: inline-size;
  container-name: kpr;
  position: relative;
  min-width: 0;
  width: 100%;
  --bleed: var(--kante);
}
.kpr__buehne {
  position: relative;
  --ch: 116px;
  --as: 32px;
  --ct: calc(var(--ch) - 42px);
  --kw: calc(100cqw * 1.12 + var(--bleed));
  --kh: calc(var(--kw) * 657 / 637);
  --po: .58;
  --wl: 40px;
  padding-top: var(--ct);
  padding-bottom: 72px;
}
.kpr__karte {
  display: block;
  position: relative;
  z-index: 1;
  width: var(--kw);
  max-width: none;
  height: auto;
  margin-left: 0;
  margin-right: calc(100cqw - var(--kw));
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .45));
}
.kpr__coupon {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: min(76cqw, 216px);
  height: var(--ch);
  padding: 11px 14px var(--as);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  rotate: -2.5deg;
  transform-origin: 20% 100%;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6);
}
.kpr__ck {
  margin: 0;
  font-size: 10px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kpr__wert {
  margin: 1px 0 0;
  font-size: 26px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--action-deep);
  font-variant-numeric: tabular-nums;
}
.kpr__cz {
  margin: 1px 0 0;
  font-size: 11px;
  line-height: 15px;
  color: var(--ink-2);
}
.kpr__abriss {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: var(--as);
  margin: 0;
  padding: 0 14px;
  border-top: 1.5px dashed #b9bec2;
  border-radius: 0 0 12px 12px;
  background: var(--action-soft);
}
.kpr__at {
  font-size: 9px;
  line-height: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kpr__code {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--action-deep);
}
.kpr__weg {
  position: absolute;
  z-index: 3;
  top: calc(var(--ch) + 6px);
  left: var(--wl);
  width: 2px;
  height: calc(var(--kh) * var(--po) - 48px);
  --flug: calc(var(--kh) * var(--po) - 48px);
}
.kpr__linie {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: #7cc3d6;
  box-shadow: 0 0 10px rgba(75, 158, 180, .55);
  transform-origin: top center;
}
.kpr__chip {
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .07em;
  white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(75, 158, 180, .35), 0 6px 14px -4px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
}
.kpr__port {
  position: absolute;
  left: 50%;
  bottom: -6px;
  translate: -50% 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #eef2f4;
  box-shadow: 0 0 0 2px #7cc3d6;
}
.kpr__panel {
  position: absolute;
  z-index: 5;
  top: calc(var(--ct) + var(--kh) * var(--po));
  left: 0;
  box-sizing: border-box;
  width: min(100%, 304px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  text-align: left;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 28px 56px -18px rgba(0, 0, 0, .7);
}
.kpr__kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  background: var(--action);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.kpr__fenster { flex: none; width: 18px; height: 15px; }
.kpr__kt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpr__zahl { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; }
.kpr__posten { margin: 0; padding: 8px 14px 10px; list-style: none; }
.kpr__zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid var(--hairline);
}
.kpr__zeile:last-child { border-bottom: 0; }
.kpr__menge { font-size: 13px; line-height: 19px; color: var(--ink-2); }
.kpr__name {
  min-width: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpr__gr {
  flex: none;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--cool-wash);
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ink-2);
}
.kpr__betrag { font-size: 13px; line-height: 19px; color: var(--ink); }
.kpr__gut {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
  margin: 0 8px;
  padding: 7px 8px;
  border-radius: 10px;
  background: var(--action-soft);
  color: var(--action-deep);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.kpr__hk {
  display: grid;
  place-items: center;
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
}
.kpr__hk svg { width: 13px; height: 13px; }
.kpr__pille {
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: #fff;
  font-size: 10px;
  line-height: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.kpr__gut .kpr__betrag {
  justify-self: end;
  color: var(--action-deep);
  font-size: 13px;
  font-weight: 700;
}
.kpr__summe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 14px 12px;
}
.kpr__st { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.kpr__feld { position: relative; width: 82px; height: 40px; flex: none; }
.kpr__neu {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 19px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.kpr__alt {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--ink-3);
  transform-origin: right center;
}
.kpr__strich {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: left center;
}
@container kpr (min-width: 440px) {
  .kpr__buehne {
    --ch: 132px;
    --as: 36px;
    --kw: calc(100cqw + var(--bleed));
    --po: .52;
    --wl: 48px;
    padding-bottom: 0;
  }
  .kpr__karte { margin-left: auto; margin-right: calc(-1 * var(--bleed)); }
  .kpr__coupon { width: 244px; padding: 13px 16px var(--as); border-radius: 14px; }
  .kpr__ck { font-size: 11px; line-height: 14px; }
  .kpr__wert { font-size: 30px; line-height: 35px; }
  .kpr__cz { font-size: 12px; line-height: 16px; }
  .kpr__abriss { padding: 0 16px; border-radius: 0 0 14px 14px; }
  .kpr__at { font-size: 10px; }
  .kpr__code { font-size: 13px; }
  .kpr__panel { width: 344px; }
  .kpr__kopf { padding: 11px 16px; font-size: 14px; line-height: 20px; }
  .kpr__fenster { width: 20px; height: 16px; }
  .kpr__zahl { font-size: 12px; }
  .kpr__posten { padding: 10px 16px 12px; }
  .kpr__zeile { column-gap: 9px; padding: 7px 0; }
  .kpr__menge, .kpr__name, .kpr__betrag { font-size: 15px; line-height: 21px; }
  .kpr__gr { font-size: 11px; line-height: 18px; padding: 0 8px; }
  .kpr__gut { margin: 0 10px; padding: 9px 10px; font-size: 14px; line-height: 20px; }
  .kpr__gut .kpr__betrag { font-size: 15px; }
  .kpr__hk { width: 21px; height: 21px; }
  .kpr__hk svg { width: 14px; height: 14px; }
  .kpr__pille { font-size: 11px; line-height: 18px; }
  .kpr__summe { padding: 10px 16px 14px; }
  .kpr__st { font-size: 15px; line-height: 20px; }
  .kpr__feld { width: 92px; height: 44px; }
  .kpr__neu { font-size: 22px; line-height: 27px; }
  .kpr__alt { font-size: 13px; line-height: 17px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kpr--auftritt .kpr__karte  { animation: kpr-auf 1000ms var(--ease) 100ms both; }
  .kpr--auftritt .kpr__coupon { animation: kpr-coupon 900ms var(--ease) 380ms both; }
  .kpr--auftritt .kpr__panel  { animation: kpr-panel 900ms var(--ease) 700ms both; }
  .kpr--auftritt .kpr__zeile  { animation: kpr-zeile 600ms var(--ease) both;
                                animation-delay: calc(1000ms + var(--i, 0) * 90ms); }
  .kpr--auftritt .kpr__linie  { animation: kpr-zieh 440ms var(--ease-inplace) 1520ms both; }
  .kpr--auftritt .kpr__chip   { animation: kpr-flug 820ms var(--ease) 1900ms both; }
  .kpr--auftritt .kpr__port   { animation: kpr-port 360ms var(--ease-inplace) 2560ms both; }
  .kpr--auftritt .kpr__gut    { animation: kpr-gut 640ms var(--ease) 2620ms both; }
  .kpr--auftritt .kpr__alt    { animation: kpr-alt 700ms var(--ease) 2660ms both; }
  .kpr--auftritt .kpr__strich { animation: kpr-strich 380ms var(--ease-inplace) 2980ms both; }
  .kpr--auftritt .kpr__neu    { animation: kpr-neu 700ms var(--ease) 2780ms both; }
  @keyframes kpr-auf    { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes kpr-coupon { from { opacity: 0; translate: 0 -26px; rotate: -10deg; } to { opacity: 1; translate: 0 0; rotate: -2.5deg; } }
  @keyframes kpr-panel  { from { opacity: 0; translate: 0 28px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes kpr-zeile  { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
  @keyframes kpr-zieh   { from { scale: 1 0; } to { scale: 1 1; } }
  @keyframes kpr-flug   {
    0%   { visibility: hidden; opacity: 0; translate: 0 0; rotate: -8deg; }
    1%   { visibility: visible; opacity: 1; }
    84%  { opacity: 1; }
    100% { visibility: hidden; opacity: 0; translate: 0 var(--flug); rotate: 0deg; }
  }
  @keyframes kpr-port   { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
  @keyframes kpr-gut    {
    0%   { visibility: hidden; opacity: 0; translate: -16px 0; background-color: rgba(234, 242, 244, 0); }
    1%   { visibility: visible; }
    100% { visibility: visible; opacity: 1; translate: 0 0; background-color: var(--action-soft); }
  }
  @keyframes kpr-alt    { from { scale: 1.58; translate: 0 -16px; color: var(--ink); } to { scale: 1; translate: 0 0; color: var(--ink-3); } }
  @keyframes kpr-strich { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes kpr-neu    {
    0%   { visibility: hidden; opacity: 0; translate: 0 16px; }
    1%   { visibility: visible; }
    100% { visibility: visible; opacity: 1; translate: 0 0; }
  }
}
@supports not (width: 1cqw) {
  .kpr__buehne { padding-top: 74px; padding-bottom: 0; }
  .kpr__karte { width: 100%; margin-left: 0; margin-right: 0; }
  .kpr__coupon { width: min(76%, 216px); }
  .kpr__weg { display: none; }
  .kpr__panel { position: static; width: min(100%, 304px); margin-top: -43.3%; }
}
@media (min-width: 1000px) {
  .hero.kpr {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.kpr { min-height: calc(100svh - var(--nav-h)); }
  }
  .kpr__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .kpr .kpr__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .kpr .hero-type { font-size: clamp(38px, 3.2vw, 46px); text-wrap: wrap; }
  .kpr .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .kpr .hero__kicker { color: var(--on-deep); }
  .kpr__figur {
    margin-inline: auto 0;
    --bleed: min(120px, max(var(--kante), calc((100vw - var(--page)) / 2 + var(--kante))));
  }
  .kpr__buehne { --kw: min(700px, calc(100cqw + var(--bleed))); }
}
.hero.udk {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: var(--s-10);
  background: var(--canvas);
}
@media (min-width: 560px) {
  .hero.udk { --kante: var(--s-8); }
}
.udk__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(56% 54% at 76% 46%, rgba(75, 158, 180, .22), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.udk__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.udk .udk__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.hero.udk .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.udk .hero__kicker { color: var(--on-deep-2); }
.hero.udk .hero-type {
  color: var(--on-deep);
  font-size: clamp(28px, 7.4vw, 40px);
  text-wrap: balance;
}
.hero.udk .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.udk .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.udk .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.udk .btn:active { transform: scale(.97); }
.udk__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.udk__notizen li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.udk__notizen svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.udk__figur {
  container-type: inline-size;
  container-name: udk;
  position: relative;
  min-width: 0;
  width: 100%;
}
.udk__buehne {
  position: relative;
  --bw: calc(100cqw + var(--kante));
}
.udk__rahmen {
  position: relative;
  width: var(--bw);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 28px 56px -26px rgba(0, 0, 0, .75);
}
.udk__bild {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.udk__karte {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 344px;
  margin: -28px auto 0;
  padding: 12px 14px 0;
  border-radius: var(--r-inner);
  background: rgba(245, 245, 247, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 60px -20px rgba(0, 0, 0, .6);
  color: var(--ink);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.udk__kkopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 9px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.udk__tuete { display: block; width: 20px; height: 20px; color: var(--action); }
.udk__tuete svg { display: block; width: 100%; height: 100%; }
.udk__kkopf b {
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.udk__pille {
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--action-soft);
  color: var(--action-deep);
  font-size: 12px;
  line-height: 19px;
  font-weight: 600;
  white-space: nowrap;
}
.udk__schritte {
  display: grid;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}
.udk__schritt {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 17px;
  column-gap: 9px;
  align-items: center;
  padding: 4px 0;
}
.udk__nr {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--action-soft);
  color: var(--action-deep);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}
.udk__was {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.udk__ok { display: block; width: 17px; height: 17px; color: var(--action); }
.udk__ok svg { display: block; width: 100%; height: 100%; }
.udk__mess {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.udk__spur {
  height: 5px;
  border-radius: 3px;
  background: rgba(54, 114, 130, .16);
  overflow: hidden;
}
.udk__balken {
  display: block;
  width: calc(100% * var(--q, 1));
  height: 100%;
  border-radius: 3px;
  background: var(--action);
  transform-origin: left center;
}
.udk__zaehler {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.udk__fahrer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--hairline);
}
.udk__flabel {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-2);
}
.udk__platz { display: grid; justify-items: end; }
.udk__platz > * { grid-area: 1 / 1; }
.udk__leer {
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 3px 10px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-2);
  white-space: nowrap;
}
.udk__leer svg { width: 15px; height: 15px; flex: none; }
.udk__chip {
  display: flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.udk__roller { display: block; width: 22px; height: 15px; flex: none; }
.udk__roller svg { display: block; width: 100%; height: 100%; }
.udk__chaken { display: block; width: 14px; height: 14px; flex: none; }
.udk__chaken svg { display: block; width: 100%; height: 100%; }
.udk__fahrt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 20px;
}
.udk__fahrt dt {
  min-width: 0;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.udk__fahrt dd {
  margin: 0;
  text-align: right;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.udk__ohne {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 11px -14px 0;
  padding: 10px 14px 11px;
  border-radius: 0 0 var(--r-inner) var(--r-inner);
  background: var(--action-soft);
  color: var(--ink);
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
}
.udk__pk {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
}
.udk__pk svg { width: 14px; height: 14px; }
@container udk (min-width: 460px) {
  .udk__buehne {
    --bleed: min(120px, max(0px, calc((100vw - var(--page)) / 2 + var(--kante))));
    --bw: min(var(--bmax, 680px), calc(100cqw + var(--bleed)));
  }
  .udk__karte {
    position: absolute;
    left: calc(-1 * var(--s-6));
    bottom: 18px;
    width: 332px;
    max-width: none;
    margin: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .udk--auftritt .udk__rahmen { animation: udk-auf 900ms var(--ease) 150ms both; }
  .udk--auftritt .udk__karte  { animation: udk-rein 850ms var(--ease) 450ms both; }
  .udk--auftritt .udk__kkopf  { animation: udk-da 460ms var(--ease-inplace) 760ms both; }
  .udk--auftritt .udk__schritt {
    animation: udk-zeile 500ms var(--ease) both;
    animation-delay: calc(880ms + var(--i, 0) * 110ms);
  }
  .udk--auftritt .udk__balken {
    animation: udk-wachsen 900ms steps(var(--n, 3), end) 960ms both;
  }
  .udk--auftritt .udk__zaehler { animation: udk-da 400ms var(--ease-inplace) 1830ms both; }
  .udk--auftritt .udk__leer { animation: udk-platz 950ms linear 1120ms both; }
  .udk--auftritt .udk__chip { animation: udk-landen 780ms var(--ease) 1900ms both; }
  .udk--auftritt .udk__fahrt { animation: udk-oeffnen 560ms var(--ease) 2450ms both; }
  .udk--auftritt .udk__ohne  { animation: udk-stempel 480ms var(--ease-inplace) 2800ms both; }
  @keyframes udk-auf     { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes udk-rein    { from { opacity: 0; translate: -56px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes udk-da      { from { opacity: 0; visibility: hidden; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; } }
  @keyframes udk-zeile   { from { opacity: 0; visibility: hidden; translate: 0 -14px; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; translate: 0 0; } }
  @keyframes udk-wachsen { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes udk-platz   { 0%   { opacity: 0; visibility: hidden; }
                           3%   { opacity: 1; visibility: visible; }
                           78%  { opacity: 1; visibility: visible; }
                           100% { opacity: 0; visibility: hidden; } }
  @keyframes udk-landen  { from { opacity: 0; visibility: hidden; translate: 96px -54px; scale: .82; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; translate: 0 0; scale: 1; } }
  @keyframes udk-oeffnen { from { visibility: hidden; clip-path: inset(0 0 100% 0); }
                           1%   { visibility: visible; }
                           to   { visibility: visible; clip-path: inset(0 0 0 0); } }
  @keyframes udk-stempel { from { opacity: 0; visibility: hidden; scale: 1.08; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; scale: 1; } }
}
.udk__balken { transform-origin: left center; }
@media (min-width: 1000px) {
  .hero.udk {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  @supports (min-height: 100svh) {
    .hero.udk { min-height: calc(100svh - var(--nav-h)); }
  }
  .udk__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .udk .udk__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .hero.udk .hero-type { font-size: clamp(30px, 2.8vw, 40px); text-wrap: wrap; }
  .hero.udk .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .udk .hero__kicker { color: var(--on-deep); }
  .udk__figur { margin-inline: auto 0; }
}
@media (min-width: 1400px) {
  .udk__figur { --bmax: 600px; }
}
@supports not (width: 1cqw) {
  .udk__rahmen { width: 100%; }
  .udk__karte {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 344px;
    margin: -28px auto 0;
  }
}
.hero.lpv {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: var(--s-10);
  background: var(--canvas);
}
@media (min-width: 560px) {
  .hero.lpv { --kante: var(--s-8); }
}
.lpv__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(58% 52% at 74% 58%, rgba(75, 158, 180, .22), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.lpv__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.lpv .lpv__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.hero.lpv .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.lpv .hero__kicker { color: var(--on-deep-2); }
.hero.lpv .hero-type {
  color: var(--on-deep);
  font-size: clamp(27px, 7.1vw, 40px);
  text-wrap: balance;
}
.hero.lpv .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.lpv .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.lpv .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lpv .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .lpv .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
.lpv__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.lpv__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.lpv__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.lpv .hero__stars {
  justify-content: flex-start;
  margin: 0;
  color: var(--on-deep-2);
}
.lpv .hero__stars strong { color: var(--on-deep); font-weight: 600; }
.lpv .hero__sterne { color: #ff9d4d; }
.lpv .lpv__bewertung {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-deep);
}
.lpv__figur {
  container-type: inline-size;
  container-name: lpv;
  position: relative;
  min-width: 0;
  width: 100%;
}
.lpv__buehne {
  position: relative;
  --bw: calc(100cqw + var(--kante));
}
.lpv__bild {
  display: block;
  width: var(--bw);
  max-width: none;
  height: auto;
  aspect-ratio: 814 / 820;
}
.lpv__karte {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 340px;
  margin: -28px auto 0;
  padding: 12px 13px 0;
  border-radius: var(--r-inner);
  background: rgba(245, 245, 247, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 60px -20px rgba(0, 0, 0, .6);
  color: var(--ink);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.lpv__kkopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 9px;
  align-items: center;
  padding-bottom: 10px;
}
.lpv__korb { width: 20px; height: 20px; flex: none; color: var(--action); }
.lpv__kkopf b {
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lpv__pille {
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: #fff;
  font-size: 12px;
  line-height: 19px;
  font-weight: 600;
  white-space: nowrap;
}
.lpv__raster { display: grid; }
.lpv__zeile {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) minmax(56px, auto) minmax(56px, auto);
  column-gap: 8px;
  align-items: baseline;
  padding: 5px 0;
}
.lpv__zeile--kopf { align-items: end; padding-bottom: 6px; }
.lpv__kanal {
  text-align: right;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.lpv__was {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lpv__wert {
  text-align: right;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
  white-space: nowrap;
}
.lpv__bleibt {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) minmax(56px, auto) minmax(56px, auto);
  column-gap: 8px;
  align-items: baseline;
  margin: 8px -13px 0;
  padding: 10px 13px 11px;
  border-top: 1px solid var(--hairline);
  background: var(--action-soft);
}
.lpv__bwas {
  font-size: 13px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
}
.lpv__bwert {
  text-align: right;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--action-deep);
  white-space: nowrap;
}
.lpv__spur {
  grid-row: 2;
  margin-top: 6px;
  height: 5px;
  border-radius: 3px;
  background: rgba(54, 114, 130, .16);
  overflow: hidden;
}
.lpv__bleibt > :nth-child(4) { grid-column: 2; }
.lpv__bleibt > :nth-child(5) { grid-column: 3; }
.lpv__balken {
  display: block;
  width: calc(100% * var(--q, 1));
  height: 100%;
  border-radius: 3px;
  background: var(--action);
  transform-origin: left center;
}
.lpv__mehr {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 -13px;
  padding: 9px 13px 11px;
  border-radius: 0 0 var(--r-inner) var(--r-inner);
  background: var(--action-soft);
  color: var(--action-deep);
  font-size: 15px;
  line-height: 22px;
}
.lpv__mehr b { font-weight: 700; letter-spacing: -.018em; white-space: nowrap; }
.lpv__mehr span { color: var(--ink-2); font-size: 13px; }
.lpv__pk {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
}
.lpv__pk svg { width: 14px; height: 14px; }
@container lpv (min-width: 460px) {
  .lpv__buehne {
    --bleed: min(120px, max(0px, calc((100vw - var(--page)) / 2 + var(--kante))));
    --bw: min(var(--bmax, 700px), calc(100cqw + var(--bleed)));
  }
  .lpv__karte {
    position: absolute;
    left: calc(-1 * var(--s-6));
    bottom: 14px;
    width: 326px;
    max-width: none;
    margin: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .lpv--auftritt .lpv__bild  { animation: lpv-auf 1000ms var(--ease) 150ms both; }
  .lpv--auftritt .lpv__karte { animation: lpv-rein 900ms var(--ease) 500ms both; }
  .lpv--auftritt .lpv__kkopf { animation: lpv-da 500ms var(--ease-inplace) 820ms both; }
  .lpv--auftritt .lpv__zeile {
    animation: lpv-zeile 520ms var(--ease) both;
    animation-delay: calc(900ms + var(--i, 0) * 110ms);
  }
  .lpv--auftritt .lpv__bleibt { animation: lpv-oeffnen 620ms var(--ease) 1560ms both; }
  .lpv--auftritt .lpv__balken {
    animation: lpv-wachsen 780ms var(--ease) both;
    animation-delay: calc(1900ms + var(--n, 0) * 140ms);
  }
  .lpv--auftritt .lpv__bleibt > :nth-child(5) .lpv__balken { --n: 1; }
  .lpv--auftritt .lpv__mehr { animation: lpv-stempel 520ms var(--ease-inplace) 2560ms both; }
  @keyframes lpv-auf     { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes lpv-rein    { from { opacity: 0; translate: -56px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes lpv-da      { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
  @keyframes lpv-zeile   { from { opacity: 0; visibility: hidden; translate: 0 -14px; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; translate: 0 0; } }
  @keyframes lpv-oeffnen { from { visibility: hidden; clip-path: inset(0 0 100% 0); }
                           1%   { visibility: visible; }
                           to   { visibility: visible; clip-path: inset(0 0 0 0); } }
  @keyframes lpv-wachsen { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes lpv-stempel { from { opacity: 0; visibility: hidden; scale: 1.1; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; scale: 1; } }
}
.lpv__balken { transform-origin: left center; }
@media (min-width: 1000px) {
  .hero.lpv {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  @supports (min-height: 100svh) {
    .hero.lpv { min-height: calc(100svh - var(--nav-h)); }
  }
  .lpv__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .lpv .lpv__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .hero.lpv .hero-type { font-size: clamp(30px, 2.8vw, 40px); text-wrap: wrap; }
  .hero.lpv .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .lpv .hero__kicker { color: var(--on-deep); }
  .lpv__figur { margin-inline: auto 0; }
}
@media (min-width: 1400px) {
  .lpv__figur { --bmax: 620px; }
}
@supports not (width: 1cqw) {
  .lpv__bild { width: 100%; }
  .lpv__karte {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 340px;
    margin: -28px auto 0;
  }
}
.hero.gtb {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
.gtb__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(54% 48% at 72% 46%, rgba(75, 158, 180, .24), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.gtb__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.gtb .gtb__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.gtb .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.gtb .hero__kicker { color: var(--on-deep-2); }
.gtb .hero-type {
  color: var(--on-deep);
  font-size: clamp(30px, 8vw, 42px);
  text-wrap: balance;
}
.gtb .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.gtb .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.gtb .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gtb .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .gtb .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.gtb { --kante: var(--s-8); }
}
.gtb__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.gtb__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.gtb__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.gtb__figur {
  container-type: inline-size;
  container-name: gtb;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  --bleed: 0px;
}
.gtb__buehne {
  position: relative;
  width: calc(100% + var(--bleed) + 24px);
  aspect-ratio: 380 / 492;
}
.gtb__tablet {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: 76%;
  height: auto;
  max-width: none;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
}
.gtb__karte {
  position: absolute;
  z-index: 3;
  container-type: inline-size;
  container-name: gtbk;
  left: 0;
  bottom: 3%;
  box-sizing: border-box;
  width: min(300px, 96cqw);
  padding: 14px 16px 16px;
  border-radius: 20px;
  background: rgba(245, 245, 247, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 26px 48px -16px rgba(0, 0, 0, .62);
  text-align: left;
}
.gtb__suche {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(18, 34, 43, .12);
}
.gtb__lupe {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gtb__query {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
  border-right: 2px solid transparent;
}
.gtb__treffer {
  display: grid;
  grid-template-rows: 1fr;
}
.gtb__tr {
  overflow: hidden;
  min-height: 0;
}
.gtb__zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}
.gtb__marke {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 34, 43, .1);
}
.gtb__marke img {
  display: block;
  width: 28px;
  height: 28px;
  max-width: none;
  object-fit: contain;
}
.gtb__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}
.gtb__art {
  flex: none;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(18, 34, 43, .07);
  font-size: 11px;
  line-height: 16px;
  color: var(--ink-2);
  white-space: nowrap;
}
@container gtbk (max-width: 250px) {
  .gtb__art-zu { display: none; }
}
.gtb__knoepfe {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.gtb__knopf {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--action-deep);
  box-shadow: inset 0 0 0 1px rgba(42, 88, 101, .32);
  text-align: center;
}
.gtb__knopf--voll {
  background: var(--action);
  color: #fff;
  box-shadow: none;
}
.gtb__weg {
  position: absolute;
  left: 58%;
  bottom: 100%;
  width: 92px;
  height: 104px;
  margin-bottom: -12px;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(10, 20, 26, .5));
}
.gtb__linie {
  fill: none;
  stroke: var(--decor);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.gtb__port { fill: var(--decor); }
.gtb__siegel {
  position: absolute;
  z-index: 4;
  left: 26%;
  top: 1%;
  width: 92px;
  height: auto;
  max-width: none;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45));
}
@container gtb (min-width: 440px) {
  .gtb__buehne { aspect-ratio: 720 / 626; }
  .gtb__tablet { right: 0; top: 0; width: 64%; }
  .gtb__karte {
    bottom: 5%;
    width: clamp(268px, 56cqw, 318px);
    padding: 16px 18px 18px;
  }
  .gtb__siegel { left: 30%; top: 2%; width: 118px; }
}
@media (prefers-reduced-motion: no-preference) {
  .gtb--auftritt .gtb__tablet  { animation: gtb-auf 1000ms var(--ease) 150ms both; }
  .gtb--auftritt .gtb__karte   { animation: gtb-karte 760ms var(--ease) 420ms both; }
  .gtb--auftritt .gtb__query   { animation: gtb-tippen 540ms linear 1000ms both; }
  .gtb--auftritt .gtb__treffer { animation: gtb-oeffnen 480ms var(--ease) 1500ms both; }
  .gtb--auftritt .gtb__tr      { animation: gtb-ein 420ms var(--ease-inplace) 1620ms both; }
  .gtb--auftritt .gtb__schein,
  .gtb--auftritt .gtb__linie   { animation: gtb-ziehen 500ms var(--ease) 1920ms both; }
  .gtb--auftritt .gtb__port    { animation: gtb-port 340ms var(--ease-inplace) 2360ms both; }
  .gtb--auftritt .gtb__siegel  { animation: gtb-stempel 440ms var(--ease-inplace) 2200ms both; }
  @keyframes gtb-auf {
    from { opacity: 0; visibility: hidden; translate: 0 40px; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; translate: 0 0; }
  }
  @keyframes gtb-karte {
    from { opacity: 0; visibility: hidden; translate: 0 -36px; scale: .94; }
    1%   { opacity: 0; visibility: visible; }
    30%  { opacity: 1; }
    to   { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
  }
  @keyframes gtb-tippen {
    from { max-width: 0; border-right-color: var(--action); }
    88%  { border-right-color: var(--action); }
    to   { max-width: 100%; border-right-color: transparent; }
  }
  @keyframes gtb-oeffnen {
    from { grid-template-rows: 0fr; }
    to   { grid-template-rows: 1fr; }
  }
  @keyframes gtb-ein {
    from { opacity: 0; visibility: hidden; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; }
  }
  @keyframes gtb-ziehen {
    from { stroke-dasharray: 1; stroke-dashoffset: 1; visibility: hidden; }
    1%   { visibility: visible; }
    to   { stroke-dasharray: 1; stroke-dashoffset: 0; visibility: visible; }
  }
  @keyframes gtb-port {
    from { opacity: 0; visibility: hidden; scale: 2.4; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; scale: 1; }
  }
  @keyframes gtb-stempel {
    from { opacity: 0; visibility: hidden; scale: 1.22; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; scale: 1; }
  }
}
@media (min-width: 1000px) {
  .hero.gtb {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.gtb { min-height: calc(100svh - var(--nav-h)); }
  }
  .gtb__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .gtb .gtb__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .gtb .hero-type { font-size: clamp(32px, 2.5vw, 36px); text-wrap: wrap; }
  .gtb .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .gtb .hero__kicker { color: var(--on-deep); }
  .gtb__figur {
    margin-inline: auto 0;
    --bleed: min(120px, max(0px, calc((100vw - var(--page)) / 2 + var(--kante))));
  }
}
@media (min-width: 1400px) {
  .gtb__figur { max-width: 520px; }
}
.hero.pgb {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: var(--s-10);
  background: var(--canvas);
}
@media (min-width: 560px) {
  .hero.pgb { --kante: var(--s-8); }
}
.pgb__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(58% 52% at 74% 58%, rgba(75, 158, 180, .22), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.pgb__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.pgb .pgb__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.hero.pgb .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.pgb .hero__kicker { color: var(--on-deep-2); }
.hero.pgb .hero-type {
  color: var(--on-deep);
  font-size: clamp(28px, 7.4vw, 42px);
  text-wrap: balance;
}
.hero.pgb .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.pgb .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.pgb .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pgb .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .pgb .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
.pgb__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.pgb__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.pgb__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.pgb .hero__stars {
  justify-content: flex-start;
  margin: 0;
  color: var(--on-deep-2);
}
.pgb .hero__stars strong { color: var(--on-deep); font-weight: 600; }
.pgb .hero__sterne { color: #ff9d4d; }
.pgb .pgb__bewertung {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-deep);
}
.pgb__figur {
  container-type: inline-size;
  container-name: pgb;
  position: relative;
  min-width: 0;
  width: 100%;
}
.pgb__buehne {
  position: relative;
  --bw: calc(100cqw + var(--kante));
}
.pgb__bild {
  display: block;
  width: var(--bw);
  max-width: none;
  height: auto;
  aspect-ratio: 763 / 600;
  clip-path: polygon(0 0, 63.43% 0, 66.58% 50%, 100% 56.33%, 100% 100%, 0 100%);
}
.pgb__karte {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 348px;
  margin: -26px auto 0;
  padding: 13px 14px 15px;
  border-radius: var(--r-inner);
  background: rgba(245, 245, 247, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 30px 60px -20px rgba(0, 0, 0, .6);
  color: var(--ink);
  text-align: left;
}
.pgb__kkopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--hairline);
}
.pgb__drucker { width: 20px; height: 20px; flex: none; color: var(--action); }
.pgb__kkopf b {
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pgb__reihe {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  column-gap: 10px;
  align-items: center;
  padding: 12px 0 11px;
}
.pgb__marke {
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.pgb__geraete {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
}
.pgb__zahl {
  justify-self: end;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pgb__geraet {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  max-width: 46px;
  aspect-ratio: 46 / 60;
  display: grid;
  place-items: center;
  padding: 4px 4px 9px;
  border: 1.5px solid rgba(86, 91, 94, .55);
  border-radius: 7px;
  background: var(--surface);
}
.pgb__geraet::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3.5px;
  width: 38%;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(86, 91, 94, .45);
  translate: -50% 0;
}
.pgb__schirm { display: grid; place-items: center; width: 100%; height: 100%; }
.pgb__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 92%;
  max-height: 60%;
  object-fit: contain;
}
.pgb__logo--takeaway { max-height: 62%; }
.pgb__logo--wolt     { max-height: 52%; }
.pgb__logo--ubereats { max-height: 42%; max-width: 96%; }
.pgb__logo--dailyorder { max-height: 60%; }
.pgb__punkt {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 2px #f4f4f6;
}
.pgb__geraet--system {
  flex: 0 1 auto;
  width: 104px;
  max-width: 100%;
  aspect-ratio: 104 / 60;
  padding: 5px 8px 10px;
  border-color: var(--action);
  border-width: 2px;
}
.pgb__geraet--system::after { width: 26%; height: 2px; background: var(--action); }
.pgb__geraet--system .pgb__logo { max-height: 66%; max-width: 74%; }
.pgb__haken {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  box-shadow: 0 0 0 2px #f4f4f6;
}
.pgb__haken svg { width: 12px; height: 12px; }
.pgb__winkel {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}
.pgb__winkel i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--action-soft);
  color: var(--action-deep);
}
.pgb__winkel svg { width: 14px; height: 14px; }
.pgb__winkel::after {
  content: "";
  height: 1px;
  background: var(--hairline);
}
@container pgb (max-width: 340px) {
  .pgb__karte { padding: 12px 11px 13px; }
  .pgb__marke { font-size: 10px; letter-spacing: .04em; }
  .pgb__zahl { font-size: 12px; }
  .pgb__reihe { column-gap: 8px; }
  .pgb__geraete { gap: 5px; }
}
@container pgb (min-width: 460px) {
  .pgb__buehne {
    --bleed: min(120px, max(0px, calc((100vw - var(--page)) / 2 + var(--kante))));
    --bw: min(var(--bmax, 700px), calc(100cqw + var(--bleed)));
  }
  .pgb__karte {
    position: absolute;
    left: auto;
    right: 0;
    bottom: 6%;
    width: 286px;
    max-width: none;
    margin: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pgb--auftritt .pgb__bild  { animation: pgb-auf 1000ms var(--ease) 150ms both; }
  .pgb--auftritt .pgb__karte { animation: pgb-rein 900ms var(--ease) 460ms both; }
  .pgb--auftritt .pgb__kkopf { animation: pgb-da 500ms var(--ease-inplace) 800ms both; }
  .pgb--auftritt .pgb__marke { animation: pgb-da 420ms var(--ease-inplace) 960ms both; }
  .pgb--auftritt .pgb__reihe--vorher .pgb__zahl {
    animation: pgb-da 420ms var(--ease-inplace) 1560ms both;
  }
  .pgb--auftritt .pgb__reihe--vorher .pgb__geraet {
    animation: pgb-fall 560ms var(--ease) both;
    animation-delay: calc(1000ms + var(--i, 0) * 130ms);
  }
  .pgb--auftritt .pgb__winkel { animation: pgb-winkel 520ms var(--ease) 1700ms both; }
  .pgb--auftritt .pgb__reihe--danach {
    animation: pgb-oeffnen 680ms var(--ease) 1900ms both;
  }
  .pgb--auftritt .pgb__geraet--system {
    animation: pgb-stempel 560ms var(--ease-inplace) 2240ms both;
  }
  .pgb--auftritt .pgb__reihe--danach .pgb__zahl {
    animation: pgb-da 420ms var(--ease-inplace) 2520ms both;
  }
  @keyframes pgb-auf     { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes pgb-rein    { from { opacity: 0; translate: -56px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes pgb-da      { from { opacity: 0; visibility: hidden; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; } }
  @keyframes pgb-fall    { from { opacity: 0; visibility: hidden; translate: 0 -26px; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; translate: 0 0; } }
  @keyframes pgb-winkel  { from { opacity: 0; visibility: hidden; translate: 0 -10px; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; translate: 0 0; } }
  @keyframes pgb-oeffnen { from { visibility: hidden; clip-path: inset(0 100% 0 0); }
                           1%   { visibility: visible; }
                           to   { visibility: visible; clip-path: inset(0 0 0 0); } }
  @keyframes pgb-stempel { from { opacity: 0; visibility: hidden; scale: 1.4; }
                           1%   { visibility: visible; }
                           to   { opacity: 1; visibility: visible; scale: 1; } }
}
@media (min-width: 1000px) {
  .hero.pgb {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  @supports (min-height: 100svh) {
    .hero.pgb { min-height: calc(100svh - var(--nav-h)); }
  }
  .pgb__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .pgb .pgb__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .hero.pgb .hero-type { font-size: clamp(30px, 2.9vw, 42px); text-wrap: wrap; }
  .hero.pgb .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .pgb .hero__kicker { color: var(--on-deep); }
  .pgb__figur { margin-inline: auto 0; }
}
@media (min-width: 1400px) {
  .pgb__figur { --bmax: 620px; }
}
@supports not (width: 1cqw) {
  .pgb__bild { width: 100%; }
  .pgb__karte {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 348px;
    margin: -26px auto 0;
  }
}
.hero.kfo {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
.kfo__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(54% 48% at 74% 44%, rgba(75, 158, 180, .22), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.kfo__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.kfo .kfo__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.kfo .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.kfo .hero__kicker { color: var(--on-deep-2); }
.kfo .hero-type {
  color: var(--on-deep);
  font-size: clamp(30px, 8vw, 42px);
  text-wrap: balance;
}
.kfo .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.kfo .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.kfo .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kfo .btn:active { transform: scale(.97); }
.kfo__band .btn--line { color: var(--on-deep); border-color: #527183; }
.kfo__band .btn--line:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 559px) {
  .kfo .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.kfo { --kante: var(--s-8); }
}
.kfo__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.kfo__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.kfo__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.kfo__rahmen {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}
.kfo--quer .kfo__rahmen { max-width: none; }
.kfo__rahmen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  pointer-events: none;
}
.kfo__bild {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: var(--r-card);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .62);
}
.kfo__unterschrift {
  margin: var(--s-4, 16px) 0 0;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
  text-align: left;
}
@media (prefers-reduced-motion: no-preference) {
  .kfo--auftritt .kfo__rahmen {
    animation: kfo-auf .8s cubic-bezier(.32, .72, 0, 1) .25s both;
  }
  @keyframes kfo-auf {
    from { opacity: 0; translate: 0 48px; }
    to   { opacity: 1; translate: 0 0; }
  }
}
@media (min-width: 1000px) {
  .hero.kfo {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.kfo { min-height: calc(100svh - var(--nav-h)); }
  }
  .kfo__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .kfo .kfo__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .kfo .hero-type { font-size: clamp(32px, 3vw, 44px); text-wrap: wrap; }
  .kfo .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .kfo .hero__kicker { color: var(--on-deep); }
  .kfo__rahmen {
    max-width: 480px;
    margin-inline: auto 0;
    translate: min(64px, max(0px, calc((100vw - var(--page)) / 2))) 0;
  }
  .hero.kfo--quer {
    --bleed: max(0px, calc((100vw - var(--page)) / 2 + var(--kante)));
  }
  .kfo--quer .kfo__band > .inner {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  }
  .kfo--quer .kfo__rahmen {
    width: calc(100% + var(--bleed));
    translate: none;
    border-radius: var(--r-card) 0 0 var(--r-card);
  }
  .kfo--quer .kfo__rahmen::after,
  .kfo--quer .kfo__bild { border-radius: inherit; }
  .kfo--quer .kfo__bild {
    max-height: 440px;
    object-fit: cover;
  }
}
.hero.kfo.kfo--naht { min-height: 0; background: var(--deep); }
.kfo--naht .kfo__band { border-radius: 0; }
.kfo--naht + .section.on-deep {
  position: relative;
  z-index: 1;
  padding-top: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.kfo--naht + .section.on-deep > .inner {
  position: relative;
  padding-top: var(--section);
}
.kfo--naht + .section.on-deep > .inner::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: var(--s-8);
  height: 1px;
  background: rgba(238, 242, 244, .12);
}
@media (max-width: 559px) {
  .kfo--naht + .section.on-deep > .inner::before { inset-inline: var(--s-6); }
}
.kfo--naht + .section.on-deep + .section.on-surface {
  box-shadow: 0 calc(-1 * var(--r-card)) 0 0 var(--surface);
}
.hero.dck {
  --kante: var(--s-6);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--surface);
}
.dck__band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(52% 46% at 74% 44%, rgba(75, 158, 180, .24), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.dck__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 28%, #000 72%, transparent 100%);
}
.dck .dck__band > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  gap: var(--s-8);
}
.dck .hero__copy { text-align: left; max-width: none; margin-inline: 0; }
.dck .hero__kicker { color: var(--on-deep-2); }
.dck .hero-type {
  color: var(--on-deep);
  font-size: clamp(30px, 8vw, 42px);
  text-wrap: balance;
}
.dck .hero__copy .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.dck .hero__copy .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.dck .btn--line { color: var(--on-deep); border-color: #527183; }
.dck .btn--line:hover { background: rgba(255, 255, 255, .08); }
.dck .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dck .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .dck .hero__copy .btn-row .btn { flex: 1 1 100%; }
}
@media (min-width: 560px) {
  .hero.dck { --kante: var(--s-8); }
}
.dck__notizen {
  display: grid;
  gap: 6px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.dck__notizen li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-body-sm);
  line-height: 20px;
  color: var(--on-deep-2);
}
.dck__notizen svg { width: 16px; height: 16px; flex: none; color: var(--on-deep-2); }
.dck__figur {
  container-type: inline-size;
  container-name: dck;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  --bleed: 0px;
}
.dck__buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 3.4cqw, 22px);
  padding-top: 14%;
}
.dck__stapel {
  position: relative;
  width: calc(100% + var(--bleed));
  aspect-ratio: 16 / 9;
}
.dck__karte {
  position: absolute;
  left: calc(var(--i) * 7%);
  bottom: calc(var(--i) * 15%);
  width: calc(100% - var(--i) * 8%);
}
.dck__hebung {
  position: relative;
  display: block;
  border-radius: clamp(10px, 2.8cqw, 18px);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 22px 40px -16px rgba(0, 0, 0, .72);
}
.dck__bild {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.dck__schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--deep);
  opacity: calc(var(--i) * .26);
}
.dck__spiel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.dck__spiel svg {
  width: clamp(46px, 17cqw, 84px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
.dck__ringgrund {
  fill: rgba(14, 26, 33, .82);
  stroke: rgba(238, 242, 244, .28);
  stroke-width: 2;
}
.dck__ring {
  fill: none;
  stroke: var(--decor);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.dck__dreieck { fill: #fff; }
.dck__zeile {
  display: grid;
  margin: 0;
  min-width: 0;
}
.dck__satz {
  grid-area: 1 / 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.dck__satz--2 { opacity: 0; visibility: hidden; }
.dck__titel {
  font-size: clamp(15px, 3.4cqw, 19px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--on-deep);
  overflow-wrap: break-word;
}
.dck__grp {
  font-size: var(--t-body-sm);
  line-height: 18px;
  color: var(--on-deep-2);
  overflow-wrap: break-word;
}
.dck__leiste {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.dck__block {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}
.dck__strich {
  flex: 1 1 6px;
  min-width: 4px;
  max-width: 18px;
  height: 4px;
  border-radius: 2px;
  background-color: #7f97a3;
}
.dck__strich--a {
  flex-grow: 3.4;
  max-width: 54px;
  background-color: #eef2f4;
}
@media (prefers-reduced-motion: no-preference) {
  .dck--auftritt .dck__hebung {
    animation: dck-steigen 700ms var(--ease) calc(150ms + (3 - var(--i)) * 90ms) both;
  }
  .dck--auftritt .dck__spiel  { animation: dck-ein 420ms var(--ease-inplace) 760ms both; }
  .dck--auftritt .dck__leiste { animation: dck-ein 460ms var(--ease-inplace) 1000ms both; }
  .dck--auftritt .dck__ring { animation: dck-ring 1900ms linear 1150ms both; }
  .dck--auftritt .dck__satz--1 {
    animation: dck-ein 420ms var(--ease-inplace) 900ms both,
               dck-satz-raus 300ms var(--ease-inplace) 2100ms forwards;
  }
  .dck--auftritt .dck__satz--2 {
    animation: dck-satz-rein 380ms var(--ease-inplace) 2220ms both;
  }
  .dck--auftritt .dck__karte { animation: dck-ruecken 620ms var(--ease) 2100ms both; }
  .dck--auftritt .dck__karte:not(.dck__karte--vorn) .dck__schleier {
    animation: dck-heller 620ms var(--ease-inplace) 2100ms both;
  }
  .dck--auftritt .dck__karte--vorn { animation: dck-weg 640ms var(--ease) 2100ms both; }
  .dck--auftritt .dck__strich--a { animation: dck-strich-aus 620ms var(--ease) 2100ms forwards; }
  .dck--auftritt .dck__strich--b { animation: dck-strich-an  620ms var(--ease) 2100ms forwards; }
  @keyframes dck-steigen {
    from { opacity: 0; visibility: hidden; transform: translateY(34px); }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; transform: translateY(0); }
  }
  @keyframes dck-ein {
    from { opacity: 0; visibility: hidden; }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; }
  }
  @keyframes dck-ring {
    from { stroke-dashoffset: 1; }
    47%  { stroke-dashoffset: 0; }
    49%  { stroke-dashoffset: 0; }
    50%  { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 1; }
  }
  @keyframes dck-satz-raus {
    from { opacity: 1; visibility: visible; transform: translateY(0); }
    99%  { visibility: visible; }
    to   { opacity: 0; visibility: hidden; transform: translateY(-14px); }
  }
  @keyframes dck-satz-rein {
    from { opacity: 0; visibility: hidden; transform: translateY(14px); }
    1%   { opacity: 0; visibility: visible; }
    to   { opacity: 1; visibility: visible; transform: translateY(0); }
  }
  @keyframes dck-ruecken {
    from { left: calc(var(--i) * 7%);       bottom: calc(var(--i) * 15%);       width: calc(100% - var(--i) * 8%); }
    to   { left: calc((var(--i) - 1) * 7%); bottom: calc((var(--i) - 1) * 15%); width: calc(100% - (var(--i) - 1) * 8%); }
  }
  @keyframes dck-heller {
    from { opacity: calc(var(--i) * .26); }
    to   { opacity: calc((var(--i) - 1) * .26); }
  }
  @keyframes dck-weg {
    from { left: 0;   bottom: 0;    opacity: 1; }
    to   { left: -9%; bottom: -36%; opacity: 0; }
  }
  @keyframes dck-strich-aus {
    from { flex-grow: 3.4; max-width: 54px; background-color: #eef2f4; }
    to   { flex-grow: 1;   max-width: 18px; background-color: #7f97a3; }
  }
  @keyframes dck-strich-an {
    from { flex-grow: 1;   max-width: 18px; background-color: #7f97a3; }
    to   { flex-grow: 3.4; max-width: 54px; background-color: #eef2f4; }
  }
}
@container dck (min-width: 440px) {
  .dck__buehne { gap: 22px; }
  .dck__leiste { gap: 16px; }
  .dck__block  { gap: 6px; }
}
@media (min-width: 1000px) {
  .hero.dck {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    flex-direction: column;
  }
  @supports (min-height: 100svh) {
    .hero.dck { min-height: calc(100svh - var(--nav-h)); }
  }
  .dck__band { flex: 1 0 auto; width: 100%; display: flex; align-items: center; }
  .dck .dck__band > .inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-10);
    padding-block: 56px;
  }
  .dck .hero-type { font-size: clamp(32px, 3vw, 40px); text-wrap: wrap; }
  .dck .hero__copy .tagline {
    font-size: var(--t-subheading);
    line-height: var(--lh-subheading);
  }
  .dck .hero__kicker { color: var(--on-deep); }
  .dck__figur {
    margin-inline: auto 0;
    --bleed: min(96px, max(0px, calc((100vw - var(--page)) / 2 + var(--kante))));
  }
}
@media (min-width: 1400px) {
  .dck__figur { max-width: 540px; }
}
.hero.k404 {
  --kante: var(--s-6);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 0;
  text-align: left;
  background:
    radial-gradient(55% 50% at 74% 58%, rgba(75, 158, 180, .24), rgba(75, 158, 180, 0) 70%),
    var(--deep);
  color: var(--on-deep);
}
.hero.k404::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(238, 242, 244, .07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.hero.k404 > .inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--s-8) var(--kante) var(--s-10);
  box-sizing: border-box;
  display: grid;
  grid-template-areas: "kopf" "figur" "rest";
  row-gap: var(--s-6);
}
@media (min-width: 560px) {
  .hero.k404 { --kante: var(--s-8); }
}
.k404__kopf { grid-area: kopf; }
.k404__rest { grid-area: rest; }
.k404 .hero__copy { text-align: left; max-width: none; margin-inline: 0; min-width: 0; }
.k404 .hero__kicker { color: var(--on-deep-2); }
.k404 .hero-type {
  color: var(--on-deep);
  font-size: clamp(32px, 8.6vw, 44px);
  text-wrap: balance;
}
.k404 .tagline {
  color: var(--on-deep);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  max-width: 34em;
}
.k404 .btn-row { justify-content: flex-start; margin-top: var(--s-6); }
.k404 .btn--line { color: var(--on-deep); border-color: #527183; }
.k404 .btn--line:hover { background: rgba(255, 255, 255, .08); }
.k404 .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.k404 .btn:active { transform: scale(.97); }
@media (max-width: 559px) {
  .k404 .btn-row .btn { flex: 1 1 100%; }
}
.k404__wege { margin-top: var(--s-8); }
.k404__wegtitel {
  margin: 0 0 var(--s-2);
  font-size: var(--t-caption);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-deep-2);
}
.k404__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline-deep);
}
.k404__liste li { border-bottom: 1px solid var(--hairline-deep); }
.k404__weg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  column-gap: var(--s-3);
  min-height: 48px;
  padding: 10px 4px;
  color: var(--on-deep);
  text-decoration: none;
  border-radius: 10px;
  transition: background-color var(--dur-tap) var(--ease);
}
.k404__weg:hover { text-decoration: none; background: rgba(255, 255, 255, .05); }
.k404__weg:active { background: rgba(255, 255, 255, .09); }
.k404__weg:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.k404__wname { display: block; font-size: var(--t-body); line-height: 22px; font-weight: 500; }
.k404__wunter { display: block; font-size: var(--t-body-sm); line-height: 20px; color: var(--on-deep-2); }
.k404__pfeil { width: 20px; height: 20px; color: var(--on-deep-2); }
.k404__figur {
  grid-area: figur;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding-block: var(--s-2);
}
.k404__figur .ksb__bon {
  width: 240px;
  max-width: 100%;
  margin: 0;
}
.k404__figur .ksb__papier { padding: 20px 16px 22px; }
.k404__label { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.k404__domain { display: block; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.k404__pfad {
  display: block;
  min-height: 18px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.k404__notiz {
  display: block;
  padding-top: 2px;
  font-size: 13px;
  line-height: 18px;
  font-style: italic;
  color: var(--ink-2);
}
.k404__figur .ksb__provision.k404__vermerk { background: #fbece3; color: #8a3300; }
.k404__figur .k404__vermerk .ksb__betrag { color: #8a3300; }
.k404__figur .k404__vermerk .ksb__hk { background: var(--ember); }
.k404__figur .k404__vermerk .ksb__hk svg { width: 14px; height: 14px; }
@media (min-width: 1000px) {
  .hero.k404 > .inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "kopf figur" "rest figur";
    grid-template-rows: auto 1fr;
    column-gap: var(--s-10);
    row-gap: var(--s-4);
    padding-block: 72px 88px;
  }
  .k404__figur { align-self: center; padding-block: 0; }
  .k404 .hero-type { font-size: clamp(38px, 3.2vw, 46px); text-wrap: wrap; }
  .k404 .tagline { font-size: var(--t-subheading); line-height: var(--lh-subheading); }
  .k404 .hero__kicker { color: var(--on-deep); }
  .k404__wege { max-width: 520px; }
  .k404__figur .ksb__bon { width: 288px; rotate: -2deg; }
  .k404__figur .ksb__papier { padding: 22px 18px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .k404__weg { transition: none; }
}