@font-face { font-family: "Bebas Neue"; src: url("fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Dancing Script"; src: url("fonts/dancing-script-latin-subset-700.woff2") format("woff2"); font-weight: 700; font-display: block; }
:root {
  --bg:         #0A0A0D;
  --fg:         #E9E3D8;
  --fg-mute:    rgba(233,227,216,0.76);
  --fg-soft:    rgba(233,227,216,0.58);
  --accent:     #C23C48;
  --accent-2:   #8B1A1A;
  --accent-text:#D95560;
  --grund-grau: #1D1D23;
  --accent-text-grau: #E0666F;
  --icon:       rgba(233,227,216,0.52);
  --cream:      #F5F1EC;
  --line:       rgba(233,227,216,0.14);
  --line-strong:rgba(233,227,216,0.28);
  --f-display: "Bebas Neue", Impact, sans-serif;
  --f-text:    "Instrument Sans", system-ui, sans-serif;
  --f-script:  "Dancing Script", cursive;
  --radius-btn:    4px;
  --hover-flaeche: rgba(255,255,255,0.055);
  --ease-eintritt: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-austritt: cubic-bezier(0.5, 0, 0.9, 0.3);
  --ease-wechsel:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-kurz:   100ms;
  --dur-mittel: 160ms;
  --dur-lang:   240ms;
  --dur-szene:  400ms;
  --versatz: 40ms;
  --anriss: 0%;
  --gutter: clamp(20px, 5vw, 72px);
  --nav-h:  64px;
  --mark-nav:    38px;
  --scrub: 40vh;
  --hero-pt: calc(var(--nav-h) + clamp(48px, 10vw, 80px));
}
@media (min-width: 1024px) { :root { --hero-pt: calc(var(--nav-h) + 52px); } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, p, li, th, td { hyphens: auto; overflow-wrap: anywhere; }
a { color: var(--accent-text); text-decoration: none; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 2px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff;
  padding: 12px 20px; font-family: var(--f-display); letter-spacing: 0.08em;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.wrap { padding-inline: var(--gutter); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0.11em calc(28px - 0.1em) 0 28px;
  font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.1em;
  border: 0; border-radius: var(--radius-btn);
  white-space: nowrap;
  transition: background var(--dur-kurz) var(--ease-wechsel),
              color var(--dur-kurz) var(--ease-wechsel),
              border-color var(--dur-kurz) var(--ease-wechsel);
}
.btn-primary { background: var(--accent); color: #fff; border-bottom: 2px solid var(--accent-2); }
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:active { border-bottom-width: 0; transform: translateY(2px); }
.btn-ghost { background: none; color: var(--fg); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost:active { transform: translateY(1px); }
@media (max-width: 520px) {
  .btn {
    font-size: 0.95rem; white-space: normal; text-align: center;
    padding: calc(0.5rem + 0.11em) calc(20px - 0.1em) 0.5rem 20px;
  }
}
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 44px; height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  color: var(--fg-mute);
  transition: color var(--dur-kurz) var(--ease-wechsel),
              border-color var(--dur-kurz) var(--ease-wechsel);
}
.btn-icon:hover { color: var(--accent-text); border-color: var(--accent-text); }
.btn-icon svg { width: 22px; height: 22px; }
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(10,10,13,0.86);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.nav::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(233,227,216,0) 0%, rgba(233,227,216,0.22) 10%,
    rgba(233,227,216,0.22) 90%, rgba(233,227,216,0) 100%);
}
.nav-inner {
  height: 100%; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.nav-home { display: flex; align-items: center; min-height: 44px; color: var(--fg); }
.nav-slot { width: 0; height: var(--mark-nav); flex: 0 0 auto; }
.nav-word {
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1;
}
.nav-word em { font-style: normal; color: var(--accent); }
.nav-links { display: none; margin-left: auto; gap: 26px; }
.nav-links a {
  position: relative;
  color: var(--fg-mute); font-size: 0.9375rem;
  transition: color var(--dur-mittel) var(--ease-wechsel);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--fg); }
.nav-swash {
  position: absolute; left: 0; bottom: -9px;
  width: 100%; height: 12px; overflow: visible; pointer-events: none;
}
.nav-swash path {
  fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-mittel) var(--ease-austritt);
}
.nav-swash path:first-child { stroke: var(--accent); stroke-width: 2; }
.nav-swash path + path { stroke: rgba(194,60,72,0.45); stroke-width: 1.2; }
.nav-links a:hover .nav-swash path,
.nav-links a:focus-visible .nav-swash path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-lang) var(--ease-eintritt);
}
.nav-links a:hover .nav-swash path + path,
.nav-links a:focus-visible .nav-swash path + path { transition-delay: 40ms; }
.nav-cta { margin-left: auto; font-size: 0.9375rem; min-height: 44px; padding-inline: 18px; }
.menu { margin-left: 4px; }
.menu > summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 26px; height: 26px; overflow: visible; }
.menu > summary path {
  fill: none; stroke: var(--fg); stroke-width: 11; stroke-linecap: butt;
  transform-box: view-box; transform-origin: 0 0;
  transition: transform var(--dur-mittel) var(--ease-wechsel),
              stroke var(--dur-mittel) var(--ease-wechsel);
}
.menu > summary .ecke-ol { transform: translate(16px, 16px); }
.menu > summary .ecke-ur { transform: translate(-16px, -16px); }
.menu[open] > summary path { stroke: var(--accent); transform: none; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: var(--nav-h);
  background: #0A0A0D;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px var(--gutter) 20px;
  display: flex; flex-direction: column;
}
.menu-panel a {
  color: var(--fg); font-size: 1.0625rem;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.menu-panel a:last-child { border-bottom: 0; }
.menu[open] .menu-panel { animation: menuAuf var(--dur-lang) var(--ease-eintritt) both; }
@keyframes menuAuf {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-swash path, .menu > summary path, .nav-links a { transition: none; }
  .menu[open] .menu-panel { animation: none; }
}
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { margin-left: 0; }
  .menu { display: none; }
}
.hero-portrait {
  position: absolute; z-index: 3;
  right: 0;
  bottom: 0;
  width: clamp(460px, 74vw, 900px);
  height: 118%;
  pointer-events: none;
}
.hero-portrait img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: 100% 100%;
  filter: drop-shadow(-24px 10px 40px rgba(0,0,0,0.55));
}
.gv-geraet {
  position: relative; z-index: 3;
  margin: 0 auto clamp(28px, 4vw, 44px);
  width: clamp(190px, 46vw, 260px);
  filter: drop-shadow(0 0 60px rgba(233,227,216,0.16)) drop-shadow(-18px 14px 38px rgba(0,0,0,0.6));
}
.gv-geraet svg { display: block; width: 100%; height: auto; }
.gv-stapel { position: relative; aspect-ratio: 560 / 760; perspective: 1500px; }
.gv-blatt { position: absolute; inset: 0; transform-origin: 74% 90%; }
.gv-b3 { transform: translateZ(-190px) translateX(-22%) rotateY(17deg) rotate(-13deg); filter: brightness(0.42); }
.gv-b2 { transform: translateZ(-125px) translateX(-15%) rotateY(12deg) rotate(-8.6deg); filter: brightness(0.58); }
.gv-b1 { transform: translateZ(-62px) translateX(-7.5%) rotateY(7deg) rotate(-4.3deg); filter: brightness(0.78); }
.gv-vorn { transform: rotateY(-4deg) rotate(4deg); }
.gv-defs { position: absolute; width: 0; height: 0; }
@media (min-width: 1024px) {
  .gv-buehne.wrap { padding-bottom: 190px; }
  .gv-danach .doors { margin-top: -186px; }
  .gv-danach + .sec {
    margin-top: -92px;
    padding-top: calc(clamp(54px, 6.4vw, 94px) + 68px);
  }
}
@media (min-width: 1024px) {
  .gv-geraet {
    position: absolute; margin: 0;
    right: clamp(24px, 7vw, 130px); bottom: 100px;
    width: clamp(280px, 22vw, 360px);
  }
}
.gv-rahmen { fill: #121216; stroke: rgba(233,227,216,0.30); stroke-width: 2; }
.gv-kamera { fill: rgba(233,227,216,0.34); }
.gv-schirm { fill: url(#gv-schirmton); }
.gv-willkommen {
  font-family: var(--f-script); font-weight: 700; font-size: 78px;
  fill: #16161A; text-anchor: middle;
}
.gv-aus { fill: #08080B; opacity: 0; }
.gv-h1,
.it-buehne h1,
.ak-buehne h1 {
  margin-top: 22px; max-width: 900px;
  font-family: var(--f-display); font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.92; letter-spacing: 0.01em; hyphens: auto;
}
.gv-h1 b,
.it-buehne h1 b,
.ak-buehne h1 b { font-weight: 400; color: var(--accent); }
@keyframes heroUnschaerfe {
  from { opacity: 1; }
  to   { opacity: 0.28; }
}
@keyframes gvAus {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero,
.gv-buehne,
.it-buehne,
.ak-buehne {
  position: relative; overflow: hidden;
  padding-top: var(--hero-pt);
  padding-bottom: 96px;
  background-color: #17171B;
}
.hero::before,
.gv-buehne::before,
.it-buehne::before,
.ak-buehne::before {
  content: ""; position: absolute; inset: -24px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(19,19,24,0) 62%, #131318 100%),
    radial-gradient(120% 95% at 74% 14%, rgba(233,227,216,0.17) 0%, rgba(233,227,216,0.05) 34%, rgba(0,0,0,0) 62%),
    linear-gradient(115deg, rgba(4,4,6,0.88) 0%, rgba(4,4,6,0.42) 38%, rgba(4,4,6,0.10) 66%, rgba(4,4,6,0.34) 100%),
    url(tex-putz.webp) center / cover,
    linear-gradient(#17171B, #17171B);
  background-blend-mode: normal, normal, normal, soft-light, normal;
}
.hero-body { position: relative; z-index: 4; max-width: 760px; }
@media (min-width: 1024px) {
  .gv-buehne .hero-body,
  .it-buehne .hero-body,
  .ak-buehne .hero-body { max-width: 620px; }
}
.it-buehne { padding-bottom: clamp(230px, 36vw, 520px); }
.it-tal {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: clamp(230px, 36vw, 520px);
  pointer-events: none;
}
.it-tal svg { display: block; width: 100%; height: 100%; }
.it-k4 { fill: #2B2B34; }
.it-k3 { fill: #23232B; }
.it-k2 { fill: #1B1B22; }
.it-k1 { fill: #101015; }
.it-dach   { fill: #08080B; }
.it-wand   { fill: #0C0C11; }
.it-tor    { fill: #08080B; }
.it-wagen-korpus  { fill: #1E1E26; }
.it-wagen-scheibe { fill: #3A3A46; }
.it-wagen-fuge    { stroke: #14141A; stroke-width: 3; }
.it-wagen-rad     { fill: #08080B; }
.it-mond {
  position: absolute; z-index: 2; pointer-events: none;
  top: clamp(104px, 13vw, 168px); right: clamp(56px, 7vw, 124px);
  width: clamp(44px, 5.4vw, 78px); aspect-ratio: 1; border-radius: 50%;
  background: #C6CBD4;
  box-shadow: 0 0 clamp(54px, 6.5vw, 104px) clamp(24px, 3.2vw, 46px) rgba(198,203,212,0.13);
}
@media (max-width: 1023px) { .it-mond { display: none; } }
.ak-szene {
  position: relative; z-index: 3;
  margin: clamp(30px, 4.5vw, 48px) auto -96px;
  width: min(100%, 420px);
  pointer-events: none;
}
.ak-szene svg { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .ak-buehne.wrap { padding-bottom: 190px; }
  .ak-danach .doors { margin-top: -175px; }
  .ak-szene {
    position: absolute; margin: 0;
    right: max(clamp(20px, 4vw, 72px), calc((100% - 1180px) / 2)); bottom: 0;
    width: clamp(340px, 34vw, 540px);
  }
}
.ak-kapitell       { fill: #353541; }
.ak-kapitell-seite { fill: #43434F; }
.ak-kapitell-front { fill: #23232C; }
.ak-treppe {
  list-style: none; padding: 0;
  margin: clamp(30px, 4vw, 46px) 0 0;
}
.ak-treppe > li {
  position: relative;
  padding: 2px 0 clamp(24px, 3.4vw, 34px) clamp(16px, 2vw, 22px);
  border-left: 1px solid var(--line);
}
.ak-treppe > li:last-child { padding-bottom: 0; }
.ak-treppe > li:nth-child(2) { margin-left: clamp(14px, 3vw, 46px); }
.ak-treppe > li:nth-child(3) { margin-left: clamp(28px, 6vw, 92px); }
.ak-treppe > li > p { margin: 6px 0 0; max-width: 52ch; color: var(--fg-soft); }
.ak-treppe > li.ak-stufe-stark {
  border-left: 2px solid var(--accent);
  padding-left: calc(clamp(16px, 2vw, 22px) - 1px);
}
.ak-treppe > li.ak-stufe-stark > p {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.45; color: var(--fg);
}
.karte-icon {
  display: block; width: 32px; height: 32px;
  margin-bottom: 14px; color: var(--accent);
}
.ak-fazit {
  margin-top: clamp(30px, 4vw, 44px);
  border: 1px solid var(--accent); border-radius: 6px;
  background: #151519;
  padding: clamp(22px, 3vw, 30px);
}
.ak-fazit > p {
  margin: 8px 0 0; max-width: 52ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5;
}
.ak-platzpreis {
  display: block; margin-top: 8px;
  font-family: var(--f-display); font-size: 1.375rem;
  letter-spacing: 0.02em; color: var(--fg-soft);
}
@media (min-width: 720px) {
  .ws-kauf .ws-stufe-stark {
    margin-top: -16px;
    border-width: 2px;
  }
}
.ak-band            { fill: #7E2730; }
.ak-siegel          { fill: var(--accent); }
.ak-siegel-praegung { fill: #9E2F39; }
.ak-deckel      { fill: #24242D; }
.ak-seite       { fill: #3F3F4B; }
.ak-deckelkante { fill: #1A1A21; }
.ak-papier      { fill: #AEA189; }
.ak-ruecken     { fill: #141419; }
.ak-etikett     { fill: #32323D; }
@media (min-width: 1024px) {
  .doors.doors-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors.doors-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.it-danach .doors { margin-top: -56px; }
@media (min-width: 560px)  { .it-danach .doors { margin-top: -155px; } }
@media (min-width: 1024px) { .it-danach .doors { margin-top: -220px; } }
@media (min-width: 560px) { .it-danach .eyebrow { margin-top: clamp(44px, 5vw, 76px); } }
.it-fenster { fill: #17171B; }
.it-an { fill: #F6E3B8; }
.claim { font-size: clamp(3.4rem, 30vw, 13.75rem); line-height: 1; }
.claim-a {
  display: block;
  font-family: var(--f-display); font-size: 1em; line-height: 0.82;
  letter-spacing: 0.01em; color: #F3EFE7;
  transform: scaleY(1.58); transform-origin: left top;
}
.claim-b {
  display: block; width: fit-content; position: relative;
  margin: -0.164em auto 0 -0.202em;
  font-family: var(--f-script); font-weight: 700; font-size: 0.764em;
  line-height: 1; color: var(--accent);
  transform: rotate(-3.5deg); transform-origin: left center;
  white-space: nowrap;
}
.claim-swash {
  position: absolute; left: 0.095em; top: 0.893em;
  width: 3.63em; height: 0.238em;
}
.hero-lede {
  margin-top: clamp(28px, 5vw, 46px);
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.58;
  color: var(--fg-mute);
}
.hero-cta { margin-top: clamp(24px, 3vw, 34px); font-size: clamp(1rem, 1.3vw, 1.25rem); }
.proof { margin-top: clamp(26px, 3vw, 35px); display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.proof-faces { display: flex; flex: 0 0 auto; }
.proof-faces span {
  width: 42px; height: 42px; border-radius: 999px; border: 2px solid #17171B;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 0.9375rem; letter-spacing: 0.06em;
  color: rgba(233,227,216,0.82);
}
.proof-faces span + span { margin-left: -13px; }
.proof-faces span:nth-child(1) { background: #2E2E34; }
.proof-faces span:nth-child(2) { background: #3A3A42; }
.proof-faces span:nth-child(3) { background: #43434C; }
.proof-mehr { background: rgba(194,60,72,0.24); color: var(--fg); }
.proof-stars { display: flex; gap: 3px; color: var(--accent); font-size: 1.125rem; line-height: 1; }
.proof-text { font-size: 1rem; color: rgba(233,227,216,0.80); }
.proof-text div + div { margin-top: 6px; }
@media (max-width: 1023px) {
  .proof { flex-direction: column; align-items: center; gap: 14px; }
  .proof-stars { justify-content: center; margin-bottom: 6px; }
  .proof-text { max-width: 34ch; }
}
@media (max-width: 1023px) {
  .hero-portrait { display: none; }
  .hero-body { margin-inline: auto; text-align: center; }
  .hero-lede { margin-inline: auto; }
  .claim-b { margin-inline: auto; transform-origin: center; }
  .proof { justify-content: center; }
  .proof-stars { justify-content: center; }
}
.hero-seite {
  padding-top: var(--hero-pt);
  padding-bottom: clamp(48px, 6vw, 84px);
  background: linear-gradient(180deg, rgba(12,12,17,0) 58%, #0C0C11 100%);
}
.hero-seite h1 {
  margin-top: 22px; max-width: 1100px;
  font-family: var(--f-display); font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.92; letter-spacing: 0.01em; hyphens: auto;
}
.hero-seite h1 b { font-weight: 400; color: var(--accent); }
.hero-seite-lede {
  margin-top: 26px; max-width: 48ch;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.55; color: var(--fg-mute);
}
.hero-seite .btn { margin-top: 34px; }
.ws-h1 {
  position: relative; z-index: 6;
  max-width: min(760px, 100% - 2 * var(--gutter));
  margin-inline: auto; margin-bottom: clamp(22px, 3vw, 38px);
  font-family: var(--f-display); font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 0.96; letter-spacing: 0.01em; text-align: center;
  text-wrap: balance;
}
.ws-h1 b { font-weight: 400; color: var(--accent); }
.zert-zeichen { width: 34px; height: 34px; color: var(--accent); }
.zert-titel { font-size: clamp(2.4rem, 5.4vw, 5rem); }
.zert-zeichen + .ueberzeile { margin-top: 16px; }
.doors.doors-flach { margin-top: 0; }
@media (max-width: 559px) { .doors.doors-flach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .doors-flach .door { padding: 22px 16px 24px; } }
@media (max-width: 559px) { .doors-flach .door:nth-child(-n+2) { border-top: 0; } }
@media (max-width: 559px) { .doors-flach .door:nth-child(2n) { border-left: 1px solid rgba(233,227,216,0.16); } }
.doors {
  margin-top: -56px;
  position: relative; z-index: 5;
  border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden;
  display: grid; grid-template-columns: 1fr;
  background: #15151B;
}
.door {
  display: block; position: relative; padding: 22px 26px 24px;
  border-top: 1px solid var(--line);
  transition: box-shadow var(--dur-kurz) var(--ease-wechsel);
}
.door:first-child { border-top: 0; }
a.door:hover, a.door:focus-visible { box-shadow: inset 0 0 0 100vmax var(--hover-flaeche); }
a.door:focus-visible { outline: 2px solid var(--fg); outline-offset: -5px; }
.door .karten-key + h2 { margin-top: 10px; }
.doors .door h2, .doors .door h3 {
  margin-top: 0;
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.08em;
  line-height: 1; color: var(--fg);
}
.door p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.45; color: var(--fg-mute); }
@media (min-width: 560px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -110px; }
  .hero { padding-bottom: 150px; }
  .door:nth-child(-n+2) { border-top: 0; }
  .door:nth-child(2n) { border-left: 1px solid rgba(233,227,216,0.16); }
}
@media (min-width: 1024px) {
  .doors { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: -150px; }
  .hero { padding-bottom: 200px; }
  .door { border-top: 0; border-left: 1px solid rgba(233,227,216,0.16); }
  .door:first-child { border-left: 0; }
  .door:nth-child(2n) { border-left: 1px solid rgba(233,227,216,0.16); }
}
.leist-band {
  margin-top: -56px; position: relative; z-index: 5;
  display: grid; grid-template-columns: 1fr;
  background: #15151B; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden;
}
.leist-band a {
  display: block; color: var(--fg); text-decoration: none;
  transition: box-shadow var(--dur-kurz) var(--ease-wechsel);
}
.leist-band a:hover, .leist-band a:focus-visible { box-shadow: inset 0 0 0 100vmax var(--hover-flaeche); }
.leist-band a:focus-visible { outline: 2px solid var(--fg); outline-offset: -5px; }
.leistungen .leist-band h2 {
  margin: 0; font-family: var(--f-display); font-size: 1.5rem; line-height: 1;
  letter-spacing: 0.08em; color: var(--fg);
}
.leist-band .leist-haupt { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border-bottom: 1px solid var(--line); }
.leistungen .leist-haupt h2 { font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 0.95; }
.leist-haupt p { font-size: 1.0625rem; line-height: 1.5; color: var(--fg-mute); max-width: 36ch; }
.leist-weiter {
  margin-top: auto; padding-top: 8px;
  font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.12em; color: var(--accent-text);
}
.leist-neben a { padding: 18px 24px; border-top: 1px solid var(--line); }
.leist-neben a:first-child { border-top: 0; }
.leist-neben p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.45; color: var(--fg-mute); }
@media (min-width: 768px) { .leist-band { margin-top: -110px; } }
@media (min-width: 1024px) {
  .leist-band { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-top: -150px; }
  .leist-band .leist-haupt { padding: 40px 44px; border-bottom: 0; border-right: 1px solid var(--line); }
  .leist-neben a { padding: 22px 32px; }
}
.sec { padding-block: clamp(54px, 6.4vw, 94px); }
.grund-tief { background-color: #0C0C11; }
.gv-danach { background: linear-gradient(180deg, #131318 0%, var(--grund-grau) 100%); padding-bottom: 0; }
.doors-sec {
  display: flow-root; padding-top: 0; padding-bottom: 0;
  background: linear-gradient(180deg, #0C0C11 0%, var(--grund-grau) 100%);
}
.sec-knapp { padding-block: clamp(34px, 4.6vw, 58px); }
@media (min-width: 1024px) { .doors-sec .doors { margin-top: -42px; } }
.grund-hoch, .grund-kauf, .ws-sec-tief { background-color: var(--grund-grau); }
.grund-hoch, .grund-kauf, .ws-sec-tief, .leistungen, .bewertungen { --accent-text: var(--accent-text-grau); }
main.rechts { background-color: #0C0C11; }
main:has(.sec-mitte) > .wrap {
  padding-inline: max(var(--gutter), (100% - 1180px) / 2);
}
.sec-mitte > * + * { margin-top: clamp(24px, 3vw, 34px); }
.eyebrow {
  font-family: var(--f-display); font-size: 1.25rem; letter-spacing: 0.2em;
  line-height: 1; color: var(--accent-text);
}
.sec :is(h1, h2) {
  margin-top: 22px;
  font-family: var(--f-display); font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 0.94; letter-spacing: 0.01em; color: var(--fg);
}
.sec :is(h1, h2) b { font-weight: 400; color: var(--accent); }
.leistungen {
  display: flow-root;
  background: var(--grund-grau);
  padding-top: 0;
}
.split > *, .ueber-grid > *, .bewertungen-grid > *, .abschluss-inner > *, .footer-top > * { min-width: 0; }
.split { display: grid; gap: clamp(40px, 4vw, 56px); align-items: start; margin-top: clamp(72px, 9vw, 130px); }
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    max-width: 1180px; margin-inline: auto;
  }
}
.checks { margin-top: 34px; display: flex; flex-direction: column; gap: 15px; }
.checks li { display: flex; align-items: flex-start; gap: 14px; }
.checks { list-style: none; padding: 0; }
.checks svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; color: var(--icon); }
.checks span { font-size: 1.0625rem; line-height: 1.45; color: rgba(233,227,216,0.86); }
.checks strong { font-weight: 400; color: var(--cream); }
.leistungen .btn { margin-top: 38px; }
.panel {
  background: #131318; border: 1px solid rgba(233,227,216,0.22); border-radius: 22px;
  padding: 30px 30px 14px;
}
.panel h3 {
  font-family: var(--f-display); font-size: 1.375rem; letter-spacing: 0.18em;
  line-height: 1; color: var(--fg);
}
.panel ul { list-style: none; margin: 12px 0 0; padding: 0; }
.panel li {
  display: flex; align-items: center; gap: 18px;
  padding: 17px 0; border-bottom: 1px solid rgba(233,227,216,0.10);
}
.panel li:last-child { border-bottom: 0; }
.panel li i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px;
  border: 1px solid rgba(194,60,72,0.45); background: rgba(194,60,72,0.10);
}
.panel li i svg { width: 22px; height: 22px; color: var(--icon); }
.panel li span {
  font-family: var(--f-display); font-size: 1.3125rem; letter-spacing: 0.05em;
  line-height: 1.12; color: var(--fg);
  hyphens: auto; overflow-wrap: anywhere;
}
.ueber {
  overflow: clip;
  background: linear-gradient(180deg, #09090C 0%, #0C0C11 40%, #0B0B10 100%);
}
.ueber-grid { margin-top: clamp(36px, 4vw, 52px); display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (max-width: 1023px) {
  .ueber-grid > .portrait-block { max-width: 420px; margin-inline: auto; width: 100%; }
}
@media (min-width: 1024px) {
  .ueber-grid {
    grid-template-columns: clamp(300px, 32vw, 440px) minmax(0, 1fr);
    align-items: start;
  }
  .ueber-grid > .portrait-block {
    grid-column: 1; grid-row: 1 / 3; align-self: stretch;
    margin-top: -38%;
    display: flex; flex-direction: column;
  }
  .ueber-grid > .portrait-block > .fakten { flex: 1; }
  .ueber-grid > .ueber-kopf {
    grid-column: 2; grid-row: 1; align-self: start;
    margin-top: calc(-0.1616 * clamp(300px, 32vw, 440px));
  }
  .ueber-grid > .ueber-karten { grid-column: 2; grid-row: 2; align-self: stretch; }
}
.portrait { position: relative; container-type: inline-size; }
.portrait::before {
  content: "";
  position: absolute;
  inset: 18% 5% 0 5%; z-index: 0;
  background: linear-gradient(170deg, #17171E 0%, #121218 62%, #0F0F14 100%);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 20px 20px 0 0;
}
.portrait-typo {
  position: absolute; inset: 24% 5% auto 5%; z-index: 0;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  font-family: var(--f-display); font-size: 38cqw;
  letter-spacing: 0.01em; line-height: 0.86; white-space: nowrap;
  color: rgba(233,227,216,0.055);
  -webkit-text-stroke: 1.5px rgba(233,227,216,0.34);
  user-select: none;
}
.portrait picture { display: block; position: relative; z-index: 1; }
.portrait picture img {
  display: block; width: 91%; margin-left: 3.6%; height: auto; max-width: none;
  filter: drop-shadow(-18px 16px 34px rgba(0,0,0,0.5));
}
.portrait-hi {
  display: block;
  font-family: var(--f-script); font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1; color: var(--accent);
  transform: rotate(-3deg); transform-origin: 0 100%;
  margin-left: 2px;
}
.portrait-wer {
  display: block; margin-top: -0.18em;
  font-family: var(--f-display); font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  letter-spacing: 0.02em; line-height: 0.95; color: var(--fg);
  text-shadow: 0 2px 12px rgba(10,8,12,0.8), 0 1px 3px rgba(10,8,12,0.9);
}
.ueber-karten {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
@media (min-width: 560px) { .ueber-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ueber-karten.karten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.u-karte {
  background: #0E0E12; padding: clamp(22px, 2.4vw, 30px); min-width: 0;
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 14px; align-content: start;
  transition: background var(--dur-kurz) var(--ease-wechsel);
}
.u-karte:hover { background: #121218; }
.ueber-kopf { margin-bottom: calc(-1 * clamp(12px, 2vw, 30px)); }
.ueber-kopf .portrait-hi {
  display: block; width: fit-content;
  font-family: var(--f-script); font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1; color: var(--accent);
  transform: rotate(-3deg); transform-origin: 0 100%;
  margin-left: 2px;
}
.ueber-name { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.ueber-name .btn-icon { position: relative; top: calc(-0.14 * clamp(2.6rem, 5.2vw, 4rem)); }
.ueber-kopf .portrait-wer {
  display: block; margin-top: -0.14em;
  font-family: var(--f-display); font-size: clamp(2.6rem, 5.2vw, 4rem);
  letter-spacing: 0.02em; line-height: 0.95; color: var(--fg);
  text-shadow: none;
}
.u-karte svg { width: 26px; height: 26px; color: var(--icon); grid-column: 1; grid-row: 1; }
.u-karte h3 {
  grid-column: 2; grid-row: 1; align-self: center;
  font-family: var(--f-display); font-size: 1.1875rem; letter-spacing: 0.06em;
  line-height: 1.1; color: var(--fg);
}
.u-karte p { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; font-size: 0.9375rem; line-height: 1.55; color: rgba(233,227,216,0.7); }
.fakten {
  margin-left: 5%; width: 90%; margin-top: -38px;
  padding-top: 38px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch;
  background: linear-gradient(180deg, rgba(14,14,18,0) 0%, rgba(14,14,18,0.9) 12%, #0E0E12 18%);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 14px 14px; overflow: hidden;
}
.fakt {
  position: relative; text-align: center;
  padding: clamp(16px, 2vw, 22px) clamp(12px, 1.6vw, 20px); min-width: 0;
  display: grid; grid-template-rows: auto 1fr; row-gap: 6px;
}
.fakt + .fakt::before {
  content: ""; position: absolute; left: -14px; top: 0; bottom: 0;
  width: 28px;
  background: currentColor;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M5 0l10 50-10 50' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='butt' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M5 0l10 50-10 50' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='butt' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  color: rgba(194,60,72,0.26);
}
.fakt b {
  display: block; font-weight: 400;
  font-family: var(--f-display); font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1; letter-spacing: 0.02em; color: var(--fg);
}
.fakt span {
  display: block; font-size: 0.875rem; line-height: 1.3;
  color: rgba(233,227,216,0.72); hyphens: auto; overflow-wrap: break-word;
}
.bewertungen {
  background: var(--grund-grau);
  padding-inline: 0;
}
.bewertungen-grid { display: grid; gap: clamp(36px, 4vw, 48px); align-items: center; }
@media (min-width: 1024px) { .bewertungen-grid { grid-template-columns: 520px minmax(0, 1fr); } }
.bewertungen-kopf { padding-inline: var(--gutter); }
@media (min-width: 1024px) { .bewertungen-kopf { padding-right: 0; } }
.bewertungen-bandkopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-inline: var(--gutter); margin-bottom: 20px;
}
.bewertungen .btn { margin-top: 0; }
.band {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(233,227,216,0.28) transparent;
  padding: 14px var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 7%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 7%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}
.band:focus-visible { outline-offset: -2px; }
.band-track { display: flex; gap: 22px; width: max-content; }
.review {
  flex: 0 0 auto; width: min(320px, 78vw);
  background: #15151A; border: 1px solid rgba(233,227,216,0.14); border-radius: 16px;
  padding: 26px 26px 24px; display: flex; flex-direction: column;
}
.review-kopf { display: flex; align-items: center; gap: 14px; }
.review-kopf span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 999px; background: #2E2E34;
  font-family: var(--f-display); font-size: 1.125rem; letter-spacing: 0.06em;
  color: rgba(233,227,216,0.86);
}
.review:nth-child(3n+2) .review-kopf span { background: #3A3A42; }
.review:nth-child(3n) .review-kopf span { background: #43434C; }
.review-name { font-family: var(--f-display); font-size: 1.375rem; letter-spacing: 0.06em; line-height: 1; color: var(--fg); }
.review-quelle { margin-top: 5px; font-size: 0.8125rem; color: var(--fg-soft); }
.review p {
  margin-top: 22px; flex: 1;
  font-size: 1rem; font-style: italic; line-height: 1.55; color: rgba(233,227,216,0.84);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
}
.stars { display: flex; gap: 6px; color: var(--accent); font-size: 1.6875rem; line-height: 1; }
.abschluss {
  background: #0B0B0F;
  padding-block: 0 clamp(72px, 9vw, 110px);
}
.abschluss-inner {
  border-top: 1px solid rgba(233,227,216,0.12);
  padding-top: clamp(60px, 7vw, 92px);
  display: grid; gap: clamp(32px, 4vw, 48px); align-items: center;
}
@media (min-width: 1024px) { .abschluss-inner { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); } }
.abschluss h2 {
  margin-top: 0;
  font-family: var(--f-display); font-size: clamp(2.6rem, 5.4vw, 4rem);
  line-height: 0.92; letter-spacing: 0.01em;
}
.abschluss h2 b { font-weight: 400; color: var(--accent); }
.abschluss-lede { margin-top: 26px; max-width: 31rem; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.6; color: rgba(233,227,216,0.74); }
.abschluss .btn { margin-top: 32px; }
.sig { position: relative; font-size: clamp(3rem, 7vw, 6.5rem); }
.sig-text {
  display: block; font-family: var(--f-script); font-weight: 700; font-size: 1em;
  line-height: 1; color: var(--accent); white-space: nowrap;
  transform: rotate(-3deg); transform-origin: left center;
}
@media (min-width: 1024px) { .sig { text-align: right; } .sig-text { transform-origin: right center; } }
.sig-swash { margin-top: 0.12em; width: 2.8em; height: 0.24em; }
@media (min-width: 1024px) { .sig-swash { margin-left: auto; } }
.footer { padding-block: clamp(48px, 6vw, 64px) clamp(36px, 4vw, 48px); background: #101014; border-top: 1px solid rgba(233,227,216,0.12); }
.footer-top { display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 560px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-top { grid-template-columns: minmax(0, 1fr) 210px 190px 200px; gap: clamp(40px, 4vw, 64px); } }
.footer-word { width: 112px; height: 43px; }
.footer-claim { margin-top: 16px; font-family: var(--f-display); font-size: 1.75rem; letter-spacing: 0.04em; color: rgba(233,227,216,0.72); }
.footer-claim b { font-weight: 400; color: var(--accent); }
.footer-ort { margin-top: 20px; font-size: 0.9375rem; line-height: 1.7; color: rgba(233,227,216,0.72); font-style: normal; }
.footer-col h3 { font-family: var(--f-display); font-size: 1.3125rem; letter-spacing: 0.1em; color: var(--fg); }
.footer-col div, .footer-col a { margin-top: 14px; font-size: 0.9375rem; line-height: 1.7; color: rgba(233,227,216,0.72); }
.footer-col a { display: block; margin-top: 0; padding-block: 10px; }
.footer-zeit { display: block; padding-block: 10px; }
.footer-col > div { margin-top: 4px; margin-bottom: -10px; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
  margin-top: clamp(32px, 4vw, 46px); padding-top: 24px;
  border-top: 1px solid rgba(233,227,216,0.10);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 0.875rem; color: rgba(233,227,216,0.52);
}
@property --schreib {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
.schreibzug {
  display: inline-block;
  padding: 0.22em 0.10em 0.30em 0.30em;
  margin: -0.22em -0.10em -0.30em -0.30em;
  -webkit-mask-image: linear-gradient(100deg,
    #000 calc(var(--schreib) - 7%), transparent var(--schreib));
          mask-image: linear-gradient(100deg,
    #000 calc(var(--schreib) - 7%), transparent var(--schreib));
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@keyframes schreiben { from { --schreib: 0%; } to { --schreib: 107%; } }
.claim-swash path, .sig-swash path {
  stroke-dasharray: 1 1.5; stroke-dashoffset: 1;
}
@keyframes strich { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.schrift-da) .claim-b .schreibzug { --schreib: 0%; }
  html.js:not(.schrift-da) .claim-swash path { stroke-dashoffset: 1; }
  html.schrift-da .claim-b .schreibzug {
    animation: schreiben 760ms linear both;
  }
  html.schrift-da .claim-swash path {
    animation: strich var(--dur-lang) var(--ease-eintritt) both;
    animation-delay: 700ms;
  }
  html.schrift-da .claim-swash path + path { animation-delay: 740ms; }
  @supports (animation-timeline: view()) {
    .portrait-hi .schreibzug {
      animation-name: schreiben;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    .sig .schreibzug {
      animation-name: schreiben;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 15% cover 40%;
    }
    .sig-swash path {
      animation-name: strich;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 38% cover 52%;
    }
    .sig-swash path + path { animation-range: cover 42% cover 56%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .hero-body, .hero-portrait {
      will-change: opacity;
      animation-name: heroUnschaerfe;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: calc(var(--scrub) * 0.15) var(--scrub);
    }
    .gv-buehne .hero-body,
    .gv-geraet,
    .it-buehne .hero-body,
    .it-tal,
    .ak-buehne .hero-body,
    .ak-szene {
      will-change: opacity;
      animation-name: heroUnschaerfe;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: calc(var(--scrub) * 0.15) var(--scrub);
    }
    .gv-aus {
      animation-name: gvAus;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0px calc(var(--scrub) * 0.5);
    }
  }
}
.nav-links a.is-current { color: var(--fg); }
.nav-links a.is-current .nav-swash path { stroke-dashoffset: 0; }
.ws-buehne {
  --ws-kb: clamp(190px, 52vw, 350px);
  --ws-kh: calc(var(--ws-kb) * 1.6657);
  --ws-kt: clamp(28px, 4vw, 60px);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding-block: calc(var(--nav-h) + var(--ws-kt)) clamp(40px, 5vw, 64px);
  background: #101014;
  perspective: 620px; perspective-origin: 50% 44%;
}
@media (min-width: 1024px) { .ws-buehne { perspective: 1050px; } }
.ws-buehne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 190px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(19,19,24,0), #131318 88%);
}
.ws-knopfzeile { position: relative; z-index: 11; }
.ws-hgrund {
  position: absolute; inset: 0; z-index: 0;
  background: url(tex-putz.webp) center / cover;
  opacity: 0.6; mix-blend-mode: soft-light;
}
.ws-schein {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(78% 70% at 50% 46%,
      rgba(246,243,237,0.34),
      rgba(246,243,237,0.26) 38%,
      rgba(246,243,237,0.14) 62%,
      rgba(246,243,237,0.05) 80%,
      transparent 94%),
    radial-gradient(44% 40% at 50% 44%, var(--ws-ton, transparent), transparent 72%);
  transition: background var(--dur-szene) var(--ease-wechsel);
}
.ws-gleis {
  position: relative; z-index: 10;
  width: 100%; height: var(--ws-kh);
  transform-style: preserve-3d;
}
.ws-gleis > * { transform-style: preserve-3d; }
.ws-platz {
  position: absolute; top: 0; left: 50%;
  margin-left: calc(var(--ws-kb) / -2);
  width: var(--ws-kb); height: var(--ws-kh);
  transform: var(--ws-tf); z-index: var(--ws-z);
  perspective: 900px;
  transition: transform var(--ws-tr, 640ms) var(--ease-eintritt);
}
.ws-platz.ist-weg { pointer-events: none; }
html:not(.ws-bereit) .ws-platz,
html:not(.ws-bereit) .ws-karte,
html:not(.ws-bereit) .ws-zeile { transition: none; }
html:not(.js) .ws-pfeil { display: none; }
.ws-karte {
  display: block; position: relative; width: 100%; height: 100%;
  padding: 0; border: 0; font: inherit; color: inherit; cursor: pointer;
  border-radius: 4px; overflow: hidden; background: #131318;
  opacity: var(--ws-op); filter: brightness(var(--ws-br));
  box-shadow: var(--ws-sch, none);
  transition: opacity var(--dur-lang) var(--ease-wechsel),
              filter var(--dur-lang) var(--ease-wechsel),
              box-shadow var(--ws-tr, 640ms) var(--ease-eintritt);
  outline-offset: 3px;
}
.ws-karte:focus-visible { outline: 2px solid var(--accent-text); }
.ws-karte img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ws-platz.ist-vorn .ws-karte { transform: rotateY(var(--ws-kmy, 0deg)); }
.ws-schleier {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,10,13,0) 32%, rgba(10,10,13,0.55) 56%, rgba(10,10,13,0.95) 100%);
}
.ws-frei {
  display: flex; flex-direction: column; gap: clamp(9px, 2vw, 16px);
  height: 100%; box-sizing: border-box; padding: clamp(15px, 3.4vw, 26px);
  background: linear-gradient(162deg, var(--ws-fton), #101014 74%);
}
.ws-frei span { display: block; background: rgba(233,227,216,0.16); border-radius: 2px; }
.ws-frei .kopf { height: 12px; width: 46%; }
.ws-frei .flaeche { height: 36.7%; width: 100%; background: rgba(233,227,216,0.09); border: 1px solid rgba(233,227,216,0.12); }
.ws-frei .z1 { height: 8px; width: 88%; }
.ws-frei .z2 { height: 8px; width: 64%; }
.ws-frei .cta { height: 34px; width: 42%; background: rgba(194,60,72,0.5); border-radius: 4px; margin-top: 6px; }
.ws-tafel {
  position: relative; z-index: 40; pointer-events: none;
  width: 100%; margin-top: 20px; height: 168px;
  perspective: 900px;
}
.ws-aufschrift {
  position: absolute; left: 0; right: 0; top: 0; text-align: center;
  padding-inline: var(--gutter);
  transform: rotateY(var(--ws-kmy, 0deg));
}
.ws-zeile {
  opacity: var(--ws-tsicht, 0); transform: translateY(var(--ws-ty, 0px));
  transition: opacity 500ms var(--ease-wechsel) var(--ws-vz, 0ms),
              transform 500ms var(--ease-wechsel) var(--ws-vz, 0ms);
}
.ws-platz.ist-vorn .ws-zeile,
.ws-aufschrift.ist-vorn .ws-zeile {
  transition: opacity 620ms var(--ease-eintritt) calc(520ms + var(--ws-vz, 0ms)),
              transform 620ms var(--ease-eintritt) calc(520ms + var(--ws-vz, 0ms));
}
.ws-marke {
  display: inline-block; font-family: var(--f-display);
  font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(233,227,216,0.72);
}
.ws-name {
  font-family: var(--f-display); font-size: clamp(2.125rem, 8.6vw, 4.5rem);
  line-height: 0.9; letter-spacing: 0.01em; margin-top: 10px; color: var(--fg);
}
.ws-sloganzeile { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.4vw, 18px); margin-top: clamp(12px, 2.4vw, 20px); }
.ws-strich { width: clamp(38px, 8vw, 64px); height: 2px; background: var(--accent); flex: 0 0 auto; }
.ws-slogan { font-size: clamp(0.9375rem, 2.6vw, 1.0625rem); color: rgba(233,227,216,0.82); }
.ws-knopfzeile { position: relative; z-index: 50; margin-top: 10px; }
.ws-pfeil {
  position: absolute; z-index: 55;
  top: calc(var(--nav-h) + var(--ws-kt) + var(--ws-kh) * 0.4614);
  width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; font: inherit; cursor: pointer;
  color: var(--fg-mute); border: 1px solid var(--line); border-radius: 4px;
  background: rgba(10,10,13,0.42);
  transition: color var(--dur-kurz) var(--ease-wechsel), border-color var(--dur-kurz) var(--ease-wechsel);
}
.ws-pfeil.zurueck { left: clamp(8px, 2.6vw, 40px); }
.ws-pfeil.vor { right: clamp(8px, 2.6vw, 40px); }
.ws-pfeil:hover { color: var(--accent-text); border-color: var(--accent-text); }
.ws-pfeil:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
@media (min-width: 1024px) {
  .ws-tafel { margin-top: calc(var(--ws-kh) * -0.4237); height: 190px; }
  .ws-knopfzeile { margin-top: 104px; }
}
.ws-sec { position: relative; padding-block: clamp(44px, 5.4vw, 78px); }
.ws-sec > * { max-width: 1180px; margin-inline: auto; }
.ws-buehne + .ws-sec { background: #131318; }
.ws-sec h2, .ws-sec h3,
.karte h3, .vierer h3, .kasten h3 {
  font-family: var(--f-display); letter-spacing: 0.01em; line-height: 0.92;
}
.ws-sec h2 { font-size: clamp(2.125rem, 5.6vw, 3.875rem); hyphens: auto; }
.ws-sec h2 b { font-weight: 400; color: var(--accent); }
.lede,
.ws-lede { font-size: 1.125rem; color: var(--fg-mute); max-width: 52ch; }
.lede a { text-decoration: underline; text-decoration-color: rgba(217,85,96,0.42); text-underline-offset: 3px; }
.lede a:hover { text-decoration-color: var(--accent-text); }
.fein,
.ws-fein { font-size: 0.9375rem; color: var(--fg-soft); max-width: 55ch; }
.sec-mitte > p { max-width: 52ch; color: var(--fg-mute); }
.ws-kopf-rechts { display: grid; gap: clamp(34px, 5vw, 80px); align-items: start; }
.ws-kopf-rechts > * { min-width: 0; }
@media (min-width: 1200px) { .ws-kopf-rechts { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }
.ws-bau .ws-karten { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.ws-bau .ws-tuer {
  font: inherit; color: inherit; text-align: left; border: 0;
  width: 100%; cursor: pointer; display: block;
}
.ws-bau .ws-karten { overflow: visible; border-radius: var(--radius-btn); }
.ws-bau .ws-tuer:first-child { border-radius: var(--radius-btn) var(--radius-btn) 0 0; }
.ws-bau .ws-tuer:last-child { border-radius: 0 0 var(--radius-btn) var(--radius-btn); }
html.js .ws-bau .ws-tuer {
  transition: color var(--dur-mittel) var(--ease-wechsel),
              opacity var(--dur-mittel) var(--ease-wechsel),
              background var(--dur-mittel) var(--ease-wechsel);
}
html.js .ws-bau .ws-tuer:not(.ist-da) h3 { color: var(--fg-mute); }
html.js .ws-bau .ws-tuer:not(.ist-da) p { color: var(--fg-soft); }
html.js .ws-bau .ws-tuer:not(.ist-da) .ws-zeichen { opacity: 0.5; }
html.js .ws-bau .ws-tuer:not(.ist-da):hover .ws-zeichen,
html.js .ws-bau .ws-tuer:not(.ist-da):focus-visible .ws-zeichen { opacity: 0.8; }
.ws-bau {
  --ws-reiter: #17171D;
  --ws-reiter-hoch: color-mix(in srgb, #ffffff 5.5%, #17171D);
}
html.js .ws-bau .ws-tuer-stark:not(.ist-da) { background: #101014; }
html.js .ws-bau .ws-tuer.ist-da { background: var(--ws-reiter); }
html.js .ws-bau .ws-tuer.ist-da:hover { background: var(--ws-reiter-hoch); box-shadow: none; }
html.js .ws-bau .ws-tuer.ist-da::before,
html.js .ws-bau .ws-tuer.ist-da::after {
  content: ""; position: absolute; border: 13px solid transparent;
  pointer-events: none;
}
@media (min-width: 1200px) {
  html.js .ws-bau .ws-tuer.ist-da::before {
    left: 100%; top: 50%; transform: translateY(-50%);
    border-left-color: var(--line-strong);
  }
  html.js .ws-bau .ws-tuer.ist-da::after {
    left: calc(100% - 1px); top: 50%; transform: translateY(-50%);
    border-left-color: var(--ws-reiter);
  }
  html.js .ws-bau .ws-tuer.ist-da:hover::after { border-left-color: var(--ws-reiter-hoch); }
}
@media (max-width: 1199px) {
  html.js .ws-bau .ws-tuer {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 0 14px; align-items: center;
    padding: 16px 20px;
  }
  html.js .ws-bau .ws-tuer .ws-zeichen { grid-row: 1; margin: 0; }
  html.js .ws-bau .ws-tuer h3 { grid-row: 1; margin: 0; }
  html.js .ws-bau .ws-tuer p { grid-column: 1 / -1; margin-top: 10px; }
  html.js .ws-bau .ws-tuer:not(.ist-da) p { display: none; }
  html.js .ws-bau .ws-tuer .ws-ecke { display: none; }
}
@media (max-width: 1199px) {
  html.js .ws-bau .ws-tuer.ist-da::before,
  html.js .ws-bau .ws-tuer.ist-da::after { content: none; }
}
html.js .ws-bau .ws-mappe:not(.ist-da) { display: none; }
.ws-bau .ws-mappe + .ws-mappe { margin-top: clamp(40px, 6vw, 72px); }
html.js .ws-bau .ws-mappe + .ws-mappe { margin-top: 0; }
.ws-mappe-lede { margin-top: 16px; color: var(--fg-mute); font-size: 0.9375rem; max-width: 52ch; }
.ws-bau-titel { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.ws-bau { margin-top: clamp(26px, 4vw, 44px); }
.karten,
.ws-karten {
  display: grid; gap: 2px; margin-top: clamp(30px, 4vw, 44px);
  background: var(--line); border: 1px solid var(--line);
  border-radius: 22px; overflow: hidden;
}
@media (min-width: 1024px) { .karten, .ws-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .karten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.karte,
.ws-tuer {
  position: relative; min-width: 0; background: #101014;
  padding: clamp(26px, 3.4vw, 34px) clamp(22px, 3vw, 30px);
  transition: box-shadow var(--dur-kurz) var(--ease-wechsel);
}
.karte-stark,
.ws-tuer-stark { background: #151519; }
.karte:hover,
.ws-tuer:hover { box-shadow: inset 0 0 0 100vmax var(--hover-flaeche); }
.karte h3,
.ws-tuer h3 { font-size: 1.75rem; margin-top: 16px; }
.karte p,
.ws-tuer p { margin-top: 10px; color: var(--fg-mute); font-size: 0.9375rem; }
.zeichen,
.ws-zeichen { color: var(--accent); transition: color var(--dur-mittel) var(--ease-wechsel); }
.karte:hover .zeichen,
.ws-tuer:hover .ws-zeichen { color: var(--accent-text); }
.ecke,
.ws-ecke { position: absolute; width: 26px; height: 26px; overflow: visible; pointer-events: none; }
.ecke path,
.ws-ecke path {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-mittel) var(--ease-austritt);
}
.karte:hover .ecke path,
.ws-tuer:hover .ws-ecke path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-lang) var(--ease-eintritt);
}
.karte:hover .ecke.ur path,
.ws-tuer:hover .ws-ecke.ur path { transition-delay: var(--versatz); }
.zeilen,
.ws-zeilen { border-bottom: 1px solid var(--line); }
.z-reihe,
.ws-z-reihe { display: grid; gap: clamp(4px, 2vw, 40px); padding-block: 24px; border-top: 1px solid var(--line); }
@media (min-width: 560px) { .z-reihe, .ws-z-reihe { grid-template-columns: 230px minmax(0, 1fr); } }
.ws-z-kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0 11px; align-items: start;
}
.ws-z-kopf i { grid-row: 1 / span 2; color: var(--icon); padding-top: 4px; }
.z-sache,
.ws-z-sache { font-family: var(--f-display); font-size: 1.625rem; letter-spacing: 0.03em; line-height: 1.1; }
.z-zusatz,
.ws-z-zusatz { font-size: 0.9375rem; color: var(--accent-text); margin-top: 4px; letter-spacing: 0.02em; }
.z-reihe p,
.ws-z-reihe p { color: var(--fg-mute); max-width: 62ch; }
.z-reihe p { max-width: 52ch; }
.z-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: center; }
.z-kopf i { display: block; color: var(--accent); }
.z-kopf i svg { width: 28px; height: 28px; display: block; }
@media (min-width: 720px) {
  .zeilen-wechsel .z-reihe {
    grid-template-columns: 220px minmax(0, 460px);
    justify-content: start; align-items: center;
    padding-block: clamp(26px, 3vw, 40px);
  }
  .zeilen-wechsel .z-reihe:nth-child(even) { justify-content: end; }
}
.it-monat-karte { margin-top: 20px; }
.it-monat-karte b i { font-style: normal; font-size: 0.42em; color: var(--fg-soft); letter-spacing: 0.04em; }
.it-monat { margin-top: 18px; display: grid; gap: clamp(14px, 2vw, 22px); }
.it-monat-satz { font-size: 0.9375rem; color: var(--fg-soft); }
.it-monat .checks { margin-top: 0; }
@media (min-width: 720px) {
  .it-monat .checks {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px clamp(24px, 3vw, 48px);
  }
}
.ws-zeiten { display: grid; gap: clamp(24px, 3.4vw, 40px); margin-top: clamp(30px, 4vw, 44px); }
@media (min-width: 1024px) { .ws-zeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-zeit { border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.ws-zeit-warnung { border-color: rgba(217,85,96,0.38); }
.ws-zeit-kopf { padding: 16px 22px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; }
.ws-zeit-warnung .ws-zeit-kopf { border-color: rgba(217,85,96,0.38); }
.ws-zeit-titel { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.06em; }
.ws-zeit-datum { font-size: 0.9375rem; color: var(--fg-soft); }
.ws-zeit-koerper { padding: clamp(20px, 3vw, 26px); display: flex; flex-direction: column; gap: 16px; }
.ws-rahmen { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #131318; }
.ws-rahmen-kopf { height: 32px; display: flex; align-items: center; gap: 8px; padding-inline: 14px; border-bottom: 1px solid var(--line); }
.ws-rahmen-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ws-rahmen-adresse { font-size: 0.9375rem; color: var(--fg-soft); margin-left: 10px; }
.ws-rahmen-koerper { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.ws-rahmen-koerper span { display: block; }
.ws-rahmen-koerper .kopf { height: 12px; width: 44%; background: rgba(233,227,216,0.28); }
.ws-rahmen-koerper .zeile { height: 7px; width: 76%; background: rgba(233,227,216,0.14); }
.ws-rahmen-koerper .cta { height: 28px; width: 128px; background: var(--accent); border-radius: 4px; }
.ws-zeit-warnung .ws-rahmen-koerper { opacity: 0.55; }
.ws-zeit-warnung .ws-rahmen-koerper .cta { background: rgba(194,60,72,0.45); }
.ws-etiketten { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.ws-etikett {
  display: inline-flex; align-items: center; font-size: 0.9375rem;
  padding: 9px 11px; border-radius: 3px; position: relative;
  font-family: inherit; background: none; text-align: left; cursor: help;
  transition: border-color var(--dur-kurz) var(--ease-wechsel),
              color var(--dur-kurz) var(--ease-wechsel);
}
.ws-etikett-gut { color: var(--icon); border: 1px solid var(--line-strong); }
.ws-etikett-schlecht { color: var(--accent-text); border: 1px solid var(--accent-text); }
.ws-etikett::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 44px;
}
.ws-etikett-gut:hover, .ws-etikett-gut:focus-visible { color: var(--fg); border-color: var(--fg-soft); }
.ws-etikett-schlecht:hover, .ws-etikett-schlecht:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); }
.ws-etiketten { position: relative; }
.ws-etikett-feld { display: inline-flex; }
.ws-tip {
  position: absolute; bottom: calc(100% + 9px); left: 0; right: 0;
  z-index: 5;
  padding: 12px 14px; border-radius: 5px;
  background: #1A1A21; border: 1px solid var(--fg-soft);
  box-shadow: 0 2px 4px rgba(0,0,0,0.55);
  font-size: 0.9375rem; line-height: 1.45; color: var(--fg-mute);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--dur-mittel) var(--ease-eintritt),
              transform var(--dur-mittel) var(--ease-eintritt),
              visibility 0s linear var(--dur-mittel);
}
.ws-tip::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 11px;
}
.ws-etikett-feld:hover .ws-tip,
.ws-etikett-feld:focus-within .ws-tip {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.ws-tab { width: 100%; border-collapse: collapse; }
.ws-tab th {
  text-align: left; font-family: var(--f-display); font-size: 1rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft);
  font-weight: 400; padding: 0 16px 12px 0; border-bottom: 1px solid var(--line-strong);
}
.ws-tab td { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.9375rem; color: var(--fg-mute); hyphens: auto; }
.ws-tab td.sache { font-family: var(--f-display); font-size: 1.3125rem; letter-spacing: 0.03em; color: var(--fg); line-height: 1.15; hyphens: none; }
.ws-tab td.wert { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.03em; color: var(--accent-text); white-space: nowrap; }
@media (max-width: 767px) {
  .ws-tab, .ws-tab tbody, .ws-tab td { display: block; }
  .ws-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ws-tab tr { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); padding-block: 18px; }
  .ws-tab td { border: 0; padding: 0; order: 2; }
  .ws-tab td.sache { order: 0; margin-bottom: 4px; }
  .ws-tab td.wert { order: 1; margin-bottom: 10px; }
}
@media (min-width: 768px) {
  .ws-tab td.sache { width: 185px; }
  .ws-tab td.wert { width: 155px; text-align: right; }
  .ws-tab th:last-child { text-align: right; }
}
.kasten,
.ws-kasten { background: #131318; border-radius: 6px; padding: 30px; margin-top: 30px; }
.kasten h3,
.ws-kasten h3 { font-size: 1.625rem; margin-bottom: 14px; }
.kasten ul,
.ws-kasten ul { list-style: none; margin: 0; padding: 0; }
.kasten li,
.ws-kasten li { display: flex; gap: 14px; align-items: flex-start; padding-block: 10px; border-top: 1px solid var(--line); }
.kasten li:first-child,
.ws-kasten li:first-child { border-top: 0; }
.kasten li i,
.ws-kasten li i { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent-text); }
.kasten li span,
.ws-kasten li span { min-width: 0; font-family: var(--f-display); font-size: 1.25rem; letter-spacing: 0.02em; line-height: 1.15; padding-top: 5px; hyphens: auto; }
.vierer,
.ws-vierer { display: grid; gap: clamp(22px, 3vw, 26px); margin-top: clamp(32px, 4.4vw, 46px); }
@media (min-width: 560px) { .vierer, .ws-vierer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vierer, .ws-vierer { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vierer > div,
.ws-vierer > div { min-width: 0; border-top: 2px solid var(--line-strong); padding-top: 20px; }
.vierer > div:first-child,
.ws-vierer > div:first-child { border-top-color: var(--accent); }
@media (min-width: 1024px) { .vierer-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vierer svg { width: 26px; height: 26px; color: var(--icon); }
.vierer svg + h3 { margin-top: 14px; }
.vierer h3,
.ws-vierer h3 { font-size: 1.75rem; }
.vierer-namen h3 {
  font-family: var(--f-text); font-size: 1.25rem;
  letter-spacing: 0; line-height: 1.3;
}
.vierer p,
.ws-vierer p { margin-top: 10px; color: var(--fg-mute); font-size: 0.9375rem; }
.ueberzeile + .ablauf { margin-top: clamp(20px, 2.6vw, 28px); }
.ablauf > div { position: relative; }
.ablauf > div > svg { position: absolute; top: 18px; right: 0; }
.ablauf > div > svg + h3 { margin-top: 12px; }
.arbeit-text { display: grid; gap: clamp(22px, 3vw, 44px); }
@media (min-width: 900px) { .arbeit-text { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.arbeit-text > p { min-width: 0; color: var(--fg-mute); font-size: 1.0625rem; line-height: 1.6; }
.preiszahl,
.ws-preiszahl { font-family: var(--f-display); font-size: clamp(6rem, 15vw, 11rem); line-height: 0.78; }
.preiszahl em,
.ws-preiszahl em { font-style: normal; font-size: 0.45em; color: var(--fg-mute); }
.preiseinheit,
.ws-preiseinheit { font-family: var(--f-display); font-size: 1.3125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-top: 18px; }
.ws-wege, .wege { display: grid; gap: 18px; margin-top: 20px; }
@media (min-width: 720px) { .ws-wege, .wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-weg, .weg { position: relative; border: 1px solid var(--line); border-radius: 6px; padding: 24px; min-width: 0; }
.ws-weg-stark, .weg-stark { border-color: var(--accent); background: #151519; }
.ws-weg-marke, .weg-marke {
  position: absolute; top: -10px; left: 22px;
  font-family: var(--f-display); font-size: 0.9375rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-text);
  background: #101014; padding: 0 8px;
}
.ws-weg b, .weg b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 3rem; line-height: 0.9; }
.ws-weg > span:not([class]), .weg > span:not([class]) { display: block; font-size: 0.9375rem; color: var(--fg-soft); margin-top: 8px; }
.weg-name {
  margin-top: 6px;
  font-size: 0.9375rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
}
.ws-ueberschrift-klein, .ueberzeile { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); margin-top: 34px; }
.ws-weg, .weg { padding-top: 40px; }
.ws-weg-marke, .weg-marke {
  top: -14px; left: 18px;
  font-size: 1.0625rem; letter-spacing: 0.1em;
  color: #fff; background: var(--accent);
  padding: 4px 12px; border-radius: 3px;
}
.ws-weg-marke-leise, .weg-marke-leise {
  color: var(--fg-mute); background: #101014;
  border: 1px solid var(--line-strong);
  padding: 3px 11px;
}
.ws-weg { transition: border-color var(--dur-kurz) var(--ease-wechsel), background var(--dur-kurz) var(--ease-wechsel); }
.ws-weg:hover, .weg:hover { border-color: var(--fg-soft); background: #131318; }
.ws-weg-stark:hover, .weg-stark:hover { border-color: var(--accent); background: #17171D; }
@media (min-width: 1024px) {
  .ws-gruppen { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto auto; column-gap: 18px; }
  .ws-gruppe { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .ws-gruppe > .ws-wege, .ws-gruppe > .wege { align-self: stretch; }
  .ws-gruppe > .ws-wege:has(> :only-child), .ws-gruppe > .wege:has(> :only-child) { grid-template-columns: 1fr; }
  .ws-gruppen-halb { grid-template-columns: 1fr; }
  .ws-gruppen-halb > .ws-gruppe { grid-row: auto; }
}
@media (min-width: 1280px) {
  .ws-gruppen-halb { grid-template-columns: 1fr 1fr; }
  .ws-gruppen-halb > .ws-gruppe { grid-row: span 2; }
}
@media (max-width: 1023px) {
  .ws-gruppen .ws-gruppe > .ws-kauf-titel, .ws-gruppen .ws-gruppe > .ueberzeile { margin-top: 16px; }
  .ws-gruppen .ws-gruppe > .ws-wege, .ws-gruppen .ws-gruppe > .wege { margin-top: 12px; }
}
.ws-weg-link { display: block; color: var(--fg); text-decoration: none; text-align: left; }
.ws-weg-link:active { transform: translateY(1px); }
.ws-wege:has(> .ws-weg-link + .ws-weg-link) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .wege-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-haken li i {
  flex: 0 0 24px; height: 24px; border: 0; border-radius: 0;
  color: var(--icon); place-items: center start;
}
.ws-haken li { display: flex; align-items: center; gap: 12px; }
.ws-haken-eng { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 2px; }
.ws-haken-eng li { border-top: 0; padding-block: 5px; }
.ws-haken-eng li i { flex: 0 0 20px; height: 20px; }
.ws-haken-eng li span {
  font-family: var(--f-display); font-size: 1.1875rem; letter-spacing: 0.02em;
  line-height: 1.2; padding-top: 2px; min-width: 0; hyphens: auto;
}
@media (min-width: 720px) { .ws-haken-eng { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 26px; } }
.ws-fakten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 26px;
  margin-block: clamp(26px, 3.4vw, 36px) 0;
  padding-top: 20px; border-top: 1px solid var(--line);
}
@media (min-width: 1024px) { .ws-fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ws-fakten > div { min-width: 0; }
.ws-fakten dt {
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-soft);
}
.ws-fakten dd {
  margin: 6px 0 0; font-family: var(--f-display); font-size: 1.5rem;
  letter-spacing: 0.03em; line-height: 1.1; color: var(--fg); hyphens: auto;
}
.ws-vierer > div {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0 12px; align-items: center;
}
.ws-vierer > div i { grid-row: 1; display: block; color: var(--icon); }
.ws-vierer > div h3 { grid-row: 1; }
.ws-vierer > div p { grid-column: 1 / -1; }
.ws-kauf-titel { margin-top: clamp(30px, 4vw, 44px); }
.ws-kauf-titel:first-of-type { margin-top: clamp(24px, 3vw, 34px); }
.ws-kauf-fein { max-width: 50ch; margin-top: 18px; }
.ws-stufen, .stufen { display: grid; gap: 18px; margin-top: 20px; }
@media (min-width: 720px) { .ws-stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) and (max-width: 959px) { .ws-stufen-3 > :nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 960px) { .ws-stufen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stufen-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) { .stufen-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 720px) { .stufen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stufe .staffel { display: block; list-style: none; margin: 18px 0 0; padding: 0; }
.stufe .staffel li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--line);
  font-size: 0.9375rem; color: var(--fg-mute); line-height: 1.45;
}
.stufe .staffel li::before { content: none; }
.stufe .staffel li:first-child { border-top: 0; padding-top: 0; }
.stufe .staffel b {
  font-family: var(--f-display); font-weight: 400; font-size: 1.625rem;
  line-height: 1; color: var(--fg); white-space: nowrap;
}
.stufe .staffel .staffel-frei {
  font-family: var(--f-text); font-size: 0.9375rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-mute);
}
.stufe .staffel-oft > span { color: var(--fg); }
.stufe .staffel em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
}
.stufe:has(.stufe-fuss) { display: flex; flex-direction: column; }
.stufe-fuss {
  margin: auto 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem; font-style: italic; color: var(--fg-soft);
}
.ws-stufe, .stufe {
  position: relative;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 40px 24px 24px; min-width: 0;
  transition: border-color var(--dur-kurz) var(--ease-wechsel), background var(--dur-kurz) var(--ease-wechsel);
}
.stufe { padding-top: 24px; }
.ws-stufe:hover, .stufe:hover { border-color: var(--fg-soft); background: #131318; }
.ws-stufe-stark, .stufe-stark { border-color: var(--accent); background: #151519; }
.ws-stufe-stark:hover, .stufe-stark:hover { border-color: var(--accent); background: #17171D; }
.ws-stufe-marke, .stufe-marke {
  position: absolute; top: -14px; left: 18px;
  font-family: var(--f-display); font-size: 1.0625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff; background: var(--accent);
  padding: 4px 12px; border-radius: 3px;
}
.stufe:has(.stufe-marke) { padding-top: 40px; }
.stufe-marke-leise {
  color: var(--fg-mute); background: #101014;
  border: 1px solid var(--line-strong);
  padding: 3px 11px;
}
.ws-stufe b, .stufe b {
  display: block; font-family: var(--f-display); font-weight: 400;
  font-size: 3rem; line-height: 0.9;
}
.ws-stufe-name, .stufe-name {
  display: block; margin-top: 6px;
  font-size: 0.9375rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
}
.ws-stufe ul, .stufe ul, .stufen-inhalt {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 9px;
}
.ws-stufe li, .stufe li, .stufen-inhalt li {
  position: relative; padding-left: 20px;
  font-size: 0.9375rem; color: var(--fg-mute); line-height: 1.45;
}
.stufen-inhalt { margin-top: 20px; }
@media (min-width: 720px) { .stufen-inhalt { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); } }
.ws-stufe li::before, .stufe li::before, .stufen-inhalt li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--icon); border-bottom: 1.5px solid var(--icon);
  transform: rotate(-45deg);
}
.ws-kauf-schluss {
  margin-top: clamp(28px, 3.8vw, 46px);
  padding-top: clamp(26px, 3.4vw, 38px);
  border-top: 1px solid var(--line);
  display: grid; gap: clamp(22px, 3.4vw, 48px); align-items: center;
}
@media (min-width: 1024px) {
  .ws-kauf-schluss { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
}
.ws-kauf-schluss .btn { margin-top: clamp(22px, 2.6vw, 30px); }
.ws-kauf-schluss > * { min-width: 0; }
.ws-kauf-schluss .ws-zug { margin-bottom: 8px; }
.ws-kauf-schluss h3 { font-size: clamp(1.875rem, 4.4vw, 2.75rem); }
.ws-kauf-schluss h3 b { font-weight: 400; color: var(--accent); }
.ws-kauf-schluss .ws-lede { margin-top: 14px; max-width: 54ch; }
.ws-lede b { font-weight: 400; color: var(--fg); }
.ws-zug { font-family: var(--f-script); font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--accent-text); }
.ws-abschluss-feld { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.ws-abschluss-feld > * { min-width: 0; }
@media (min-width: 1024px) {
  .ws-abschluss-feld { grid-template-columns: minmax(0, 1fr) 420px; }
  .ws-abschluss-knopf { display: flex; justify-content: flex-end; }
}
@keyframes ws-auf {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ws-marke-auf {
  from { opacity: 0; transform: scale(0.78); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ws-zeit,
    .ws-vierer > div,
    .ws-fakten > div,
    .ws-wege .ws-weg {
      animation-name: ws-auf;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
    }
    .ws-zeit { animation-range: entry 0% entry 58%; }
    .ws-zeit-warnung { animation-range: entry 24% entry 82%; }
    .ws-zeit { view-timeline-name: --ws-karte; }
    .ws-zeit .ws-etikett-feld .ws-etikett {
      animation-name: ws-auf;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --ws-karte;
      animation-range: entry calc(14% + var(--i) * 6%) entry calc(52% + var(--i) * 6%);
    }
    .ws-zeit-warnung .ws-etikett-feld .ws-etikett {
      animation-range: entry calc(38% + var(--i) * 8%) entry calc(68% + var(--i) * 8%);
    }
    .ws-vierer > div { animation-range: entry calc(var(--i) * 8%) entry calc(58% + var(--i) * 8%); }
    .ws-fakten > div { animation-range: entry calc(var(--i) * 7%) entry calc(60% + var(--i) * 7%); }
    .ws-wege .ws-weg { animation-range: entry 8% entry 72%; }
    .ws-kasten { view-timeline-name: --ws-kasten; }
    .ws-haken-eng { view-timeline-name: --ws-preisliste; }
    .ws-kasten .ws-haken li i path { animation-timeline: --ws-kasten; }
    .ws-haken-eng li i path { animation-timeline: --ws-preisliste; }
    .ws-haken li i path {
      stroke-dasharray: 1 1.1; stroke-dashoffset: 1;
      animation-name: strich;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-range: entry calc(10% + var(--i) * 8%) entry calc(42% + var(--i) * 8%);
    }
    .ws-weg-stark { view-timeline-name: --ws-weg; }
    .ws-weg-marke {
      animation-name: ws-marke-auf;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --ws-weg;
      animation-range: entry 30% entry 80%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ws-platz, .ws-karte, .ws-aufschrift, .ws-zeile, .ws-schein, .ws-pfeil,
  .ws-platz.ist-vorn .ws-zeile, .ws-aufschrift.ist-vorn .ws-zeile {
    transition-duration: 0.01ms; transition-delay: 0ms;
  }
  .ws-platz.ist-vorn .ws-karte { transform: none; }
}
.karten-key {
  font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.16em;
  line-height: 1.2; color: var(--fg-soft);
}
.karte .karten-key + h3, .vierer .karten-key + h3 { margin-top: 10px; }
.karten-key.preis { margin-top: 16px; color: var(--accent-text); }
.beleg {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 0.9375rem; color: var(--accent-text);
  border-bottom: 1px solid rgba(217,85,96,0.35);
  transition: border-color var(--dur-kurz) var(--ease-wechsel);
}
.beleg::after { content: ''; position: absolute; inset: -10px 0; }
.beleg:hover { border-bottom-color: var(--accent-text); }
.beleg svg { width: 15px; height: 15px; }
.angebot {
  margin-top: clamp(34px, 4vw, 48px);
  background: #131318; border: 1px solid rgba(233,227,216,0.16); border-radius: 22px;
  padding: clamp(26px, 3vw, 36px);
}
.angebot p { margin-top: 16px; max-width: 52ch; color: var(--fg-mute); }
.angebot .btn { margin-top: 26px; }
@media (min-width: 1024px) {
  .angebot {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: clamp(32px, 4vw, 64px);
  }
  .angebot .btn { grid-column: 2; grid-row: 1 / 3; justify-self: end; margin-top: 0; }
}
.angebot h3,
.zwischenkopf { font-family: var(--f-display); font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1; letter-spacing: 0.01em; }
.antwort { border-left: 2px solid var(--accent); padding-left: clamp(18px, 2.4vw, 26px); }
.antwort p { margin-top: 8px; font-size: 1.125rem; line-height: 1.55; color: var(--fg); max-width: 52ch; }
.antwort-leise { border-left-color: var(--line-strong); }
.antwort-leise p { color: var(--fg-mute); }
.marken { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
.marken li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 0.9375rem; color: var(--fg-mute);
}
.marken svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--icon); }
.preisanker { margin-top: clamp(40px, 5vw, 64px); }
.preisanker .fein { margin-top: 20px; }
.rechts { padding-top: var(--hero-pt); padding-bottom: clamp(60px, 8vw, 100px); }
.rechts > * { max-width: 780px; margin-inline: auto; }
.rechts h1 {
  margin-top: 22px;
  font-family: var(--f-display); font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 0.92; letter-spacing: 0.01em;
}
.rechts-sub { margin-top: 16px; font-size: 0.9375rem; color: var(--fg-soft); }
.rechts-sub .k { color: var(--fg-mute); }
.toc {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(30px, 4vw, 44px); padding-top: 26px;
  border-top: 1px solid var(--line);
}
.toc a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 0.9375rem; color: var(--fg-mute);
  transition: border-color var(--dur-kurz) var(--ease-wechsel),
              color var(--dur-kurz) var(--ease-wechsel);
}
.toc a:hover { border-color: var(--accent-text); color: var(--accent-text); }
.rechtsblock { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.rechts-nummer { font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.18em; color: var(--accent-text); }
.rechtsblock h2 {
  margin-top: 10px;
  font-family: var(--f-display); font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.02; letter-spacing: 0.01em;
}
.rechtsblock h3 { margin-top: 30px; font-family: var(--f-display); font-size: 1.375rem; letter-spacing: 0.06em; line-height: 1.1; }
.rechtsblock p, .rechtsblock li { max-width: 52ch; font-size: 1rem; line-height: 1.7; color: var(--fg-mute); }
.rechtsblock p + p, .rechtsblock h3 + p, .rechtsblock ul + p { margin-top: 16px; }
.rechtsblock ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.rechtsblock a { text-decoration: underline; text-decoration-color: rgba(217,85,96,0.42); text-underline-offset: 3px; }
.rechtsblock li > a:only-child,
.rechtsblock p > a:only-child {
  display: inline-block; min-height: 24px; padding-block: 2px;
}
.rechtsblock strong, .rechtsblock .k { font-weight: 400; color: var(--fg); }
.rechts code { font-family: var(--f-text); color: var(--fg); }
.artikel .rechtsblock ol { margin: 18px 0 0; padding-left: 1.5em; display: grid; gap: 12px; }
.artikel .rechtsblock ol > li { min-width: 0; }
.artikel .rechtsblock ol > li::marker { color: var(--accent-text); }
.artikel .rechtsblock ol + p, .artikel .rechtsblock pre + p,
.artikel .rechtsblock table + p, .artikel .rechtsblock p + ol { margin-top: 16px; }
.artikel .rechtsblock h2 + * { margin-top: 16px; }
.artikel code, .artikel-autor p { hyphens: manual; }
.artikel pre {
  max-width: 100%; margin-top: 16px; padding: 14px 16px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: rgba(233,227,216,0.04);
  font-size: 0.9375rem; line-height: 1.6; white-space: pre; overflow-wrap: normal;
}
.artikel pre code { color: var(--fg); }
.artikel table { width: 100%; max-width: 52ch; margin-top: 18px; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.artikel th, .artikel td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--fg-mute); }
.artikel th { font-weight: 400; color: var(--fg); border-bottom-color: var(--line-strong); }
.artikel-autor .btn { margin-top: 24px; text-decoration: none; }
.artikel .rechtsblock .code-box + p { margin-top: 16px; }
.artikel-karte {
  display: flex; align-items: center; gap: 16px;
  margin-top: 24px; padding: 16px;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(233,227,216,0.03);
}
.artikel-karte-bild { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; }
.artikel-karte-text { display: grid; gap: 2px; font-size: 0.9375rem; line-height: 1.4; }
.artikel-karte-rolle { font-size: 0.8125rem; color: var(--fg-soft); }
.artikel-karte-name { font-size: 1.0625rem; color: var(--fg); }
.artikel-karte-titel { color: var(--fg-mute); hyphens: manual; }
.artikel-karte-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; width: max-content;
  color: var(--accent-text);
  text-decoration: underline; text-decoration-color: rgba(217,85,96,0.42); text-underline-offset: 3px;
}
.artikel-karte-link svg { width: 18px; height: 18px; flex: none; }
.artikel-karte-link:hover { text-decoration-color: currentColor; }
.code-box {
  display: flex; align-items: center; max-width: 100%; margin-top: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: rgba(233,227,216,0.04);
}
.artikel .code-box pre {
  flex: 1; min-width: 0; margin: 0; border: 0; background: none;
  scrollbar-width: thin; scrollbar-color: rgba(233,227,216,0.18) transparent;
}
.artikel .code-box pre:hover { scrollbar-color: rgba(233,227,216,0.34) transparent; }
.code-kopieren {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; margin: 7px 7px 7px 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: none; color: var(--fg-mute); cursor: pointer;
  transition: color var(--dur-kurz) var(--ease-wechsel), border-color var(--dur-kurz) var(--ease-wechsel);
}
.code-kopieren:hover, .code-kopieren:focus-visible { color: var(--fg); border-color: var(--line-strong); }
.code-kopieren:active { transform: translateY(1px); }
.code-kopieren.ist-kopiert { color: var(--accent-text); border-color: var(--accent-text); }
.code-kopieren svg { width: 18px; height: 18px; }
.code-kopieren .ic-ok, .code-kopieren.ist-kopiert .ic-kopie { display: none; }
.code-kopieren.ist-kopiert .ic-ok { display: block; }
@media (min-width: 1100px) {
  main.artikel {
    display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 1fr);
    grid-template-areas: "kopf karte" "text karte";
    column-gap: clamp(48px, 6vw, 96px); align-items: start;
  }
  .artikel > * { max-width: none; margin-inline: 0; }
  .artikel-kopf { grid-area: kopf; }
  .artikel-text { grid-area: text; min-width: 0; }
  .artikel-karte {
    grid-area: karte; position: sticky; top: calc(var(--nav-h) + 32px);
    justify-self: end; width: 280px;
    flex-direction: column; align-items: flex-start; margin-top: 22px; padding: 24px;
  }
  .artikel-karte-bild { width: 96px; height: 96px; }
  .artikel .rechtsblock p, .artikel .rechtsblock li { max-width: 48ch; font-size: 1.125rem; }
  .artikel table { max-width: 48ch; }
}
.artikel-toc { display: none; }
@media (min-width: 1280px) {
  main.artikel {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 720px) minmax(260px, 1fr);
    grid-template-areas: "toc kopf karte" "toc text karte";
    column-gap: clamp(40px, 4vw, 72px);
  }
  .artikel-toc {
    display: block; grid-area: toc; position: sticky; top: calc(var(--nav-h) + 32px);
    justify-self: start; width: 240px;
    margin-top: 22px; max-height: calc(100dvh - var(--nav-h) - 64px); overflow-y: auto;
  }
  .artikel table { max-width: none; }
}
.artikel-toc-titel { font-size: 0.8125rem; color: var(--fg-soft); }
.artikel-toc ol { list-style: none; margin: 12px 0 0; padding: 0; border-left: 1px solid var(--line); }
.artikel-toc a {
  display: block; margin-left: -1px; padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  font-size: 0.875rem; line-height: 1.35; color: var(--fg-mute); hyphens: manual;
  transition: color var(--dur-kurz) var(--ease-wechsel), border-color var(--dur-kurz) var(--ease-wechsel);
}
.artikel-toc .ist-unter a { padding-left: 26px; font-size: 0.8125rem; }
.artikel-toc a:hover { color: var(--fg); }
.artikel-toc a[aria-current="true"] { color: var(--fg); border-left-color: var(--accent-text); }
.rechts-zurueck { margin-top: clamp(48px, 6vw, 76px); padding-top: 28px; border-top: 1px solid var(--line); }
.rechts-zurueck a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.rechts-zurueck svg { width: 18px; height: 18px; }
.rechts-zurueck-oben { margin-top: 0; margin-bottom: clamp(16px, 2vw, 24px); padding-top: 0; border-top: 0; }
.kontakt-sec { padding-top: var(--hero-pt); }
.kontakt-sec h1 { margin-top: 0; }
.kanaele { display: grid; gap: 14px; margin-top: clamp(28px, 3.5vw, 44px); }
@media (min-width: 560px) { .kanaele { grid-template-columns: 1fr 1fr; } }
.kanal {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 18px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 14px; color: var(--fg);
  transition: border-color var(--dur-kurz) var(--ease-wechsel),
              box-shadow var(--dur-kurz) var(--ease-wechsel);
}
.kanal:hover { border-color: var(--line-strong); box-shadow: inset 0 0 0 999px var(--hover-flaeche); }
.kanal > svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--icon); }
.kanal b {
  display: block; font-weight: 400;
  font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.16em; color: var(--fg-soft);
}
.kanal span { font-size: 1.0625rem; line-height: 1.4; color: var(--fg); overflow-wrap: anywhere; }
.kanal-termin { margin-top: clamp(38px, 5vw, 58px); }
.kanal-termin + .formular { margin-top: 20px; }
.kanal-termin > svg { color: var(--accent); }
.kontakt-sec .lede { margin-top: 26px; }
.kontakt-adresse { margin-top: 30px; font-size: 0.9375rem; line-height: 1.7; color: var(--fg-soft); hyphens: manual; }
.rechts-fehler {
  margin-top: clamp(30px, 4vw, 44px);
  border-left: 2px solid var(--accent);
  background: rgba(194,60,72,0.07);
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: 0 6px 6px 0;
}
.rechts-fehler h2 { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1.1; }
.rechts-fehler ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.rechts-fehler li { font-size: 1rem; line-height: 1.6; color: var(--fg-mute); }
.rechts-fehler a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.rechts-fehler + .formular { margin-top: clamp(24px, 3vw, 34px); }
.feld-fehler {
  margin-top: -12px; font-size: 0.9375rem; line-height: 1.5; color: var(--accent-text);
}
.formular input[aria-invalid="true"],
.formular textarea[aria-invalid="true"] { border-color: var(--accent); }
.formular {
  display: grid; gap: 22px;
  margin-top: clamp(38px, 5vw, 58px);
  background: #131318; border: 1px solid rgba(233,227,216,0.16); border-radius: 22px;
  padding: clamp(22px, 3vw, 34px);
}
.formular-paar { display: grid; gap: 22px; }
@media (min-width: 560px) { .formular-paar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .formular {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: clamp(28px, 3vw, 44px);
    align-items: start;
  }
  .formular-paar { grid-column: 1; grid-template-columns: 1fr; }
  .formular-bereich { grid-column: 1; }
  .formular-nachricht { grid-column: 2; grid-row: 1 / 3; align-self: stretch; grid-template-rows: auto 1fr; }
  .formular-nachricht textarea { height: 100%; }
  .formular-zustimmung { grid-column: 1; grid-row: 3; }
  .formular > .btn { grid-column: 2; grid-row: 3; justify-self: start; }
}
.formular-kurz textarea { min-height: 96px; }
.formular-kurz > .btn { margin-top: 0; }
@media (min-width: 1024px) {
  .formular-kurz { grid-template-columns: minmax(0, 1fr); }
  .formular-kurz .formular-paar { grid-template-columns: 1fr 1fr; }
  .formular-kurz .formular-zustimmung,
  .formular-kurz > .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}
.formular-bereich { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.formular-bereich legend {
  padding: 0; float: left; width: 100%;
  font-family: var(--f-display); font-size: 1.0625rem; letter-spacing: 0.14em; color: var(--fg-soft);
}
.formular-bereich legend + * { clear: both; }
.bereich-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.formular .bereich-chips label { display: block; margin: 0; gap: 0; flex: 1 1 auto; }
@media (min-width: 560px) { .formular .bereich-chips label { max-width: 50%; } }
.bereich-chips input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
.formular .bereich-chips span {
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 44px; padding: 10px 16px;
  font-family: var(--f-text); font-size: 0.9375rem; line-height: 1.3; letter-spacing: 0;
  color: var(--fg-mute); background: #0E0E12;
  border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
  transition: border-color var(--dur-kurz) var(--ease-wechsel),
              color var(--dur-kurz) var(--ease-wechsel);
}
.formular .bereich-chips label:hover span { border-color: var(--line-strong); color: var(--fg); }
.formular .bereich-chips input:checked + span { border-color: var(--accent); color: var(--fg); }
.formular .bereich-chips input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.formular label { display: grid; gap: 8px; }
.formular label > span {
  font-family: var(--f-display); font-size: 1.0625rem; letter-spacing: 0.14em; color: var(--fg-soft);
}
.formular input[type="text"],
.formular input[type="email"],
.formular textarea {
  width: 100%; min-height: 44px; padding: 11px 14px;
  font-family: var(--f-text); font-size: 1rem; line-height: 1.5;
  color: var(--fg); background: #0E0E12;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  transition: border-color var(--dur-kurz) var(--ease-wechsel);
}
.formular input[type="text"]:hover,
.formular input[type="email"]:hover,
.formular textarea:hover { border-color: rgba(233,227,216,0.42); }
.formular textarea { min-height: 156px; resize: vertical; }
.formular label.formular-zustimmung { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.formular-zustimmung input { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.formular label.formular-zustimmung > span { font-family: var(--f-text); font-size: 0.9375rem; letter-spacing: 0; line-height: 1.6; color: var(--fg-mute); }
.formular-zustimmung a { text-decoration: underline; }
.formular > .btn { justify-self: start; }
:root { --wc-gut: #3FBE8A; }
.ws-check {
  position: relative; z-index: 6;
  margin-top: calc(clamp(22px, 3vw, 38px) * -0.45);
  margin-bottom: clamp(24px, 3vw, 40px);
  border-color: var(--accent);
}
.ws-check::after {
  content: ""; position: absolute; inset: -1px;
  border: 1px solid var(--accent); border-radius: inherit;
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ws-check::after { animation: ws-puls 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
}
@keyframes ws-puls {
  0%   { transform: scale(1, 1); opacity: 0.8; }
  70%  { opacity: 0; }
  100% { transform: scale(1.08, 1.45); opacity: 0; }
}
.wc-feld { max-width: 520px; }
@media (min-width: 1024px) {
  .wc-feld { grid-template-columns: minmax(0, 1fr); }
  .wc-feld .formular-zustimmung,
  .wc-feld > .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}
.wc-sec p { max-width: 52ch; }
.wc-mitte { text-align: center; }
.wc-mitte > h1 { text-wrap: balance; }
.wc-mitte > p { margin-inline: auto; max-width: 58ch; text-wrap: balance; }
.wc-mitte .wc-feld { margin-inline: auto; text-align: left; }
.rechts.wc-breit > * { max-width: 1080px; }
.rechts .wc-band {
  background: var(--grund-grau);
  box-shadow: 0 0 0 100vmax var(--grund-grau);
  clip-path: inset(0 -100vmax);
  --accent-text: var(--accent-text-grau);
  border-top: 0;
  padding-block: clamp(36px, 4.5vw, 60px);
}
.wc-breit .rechts-sub { max-width: 52ch; hyphens: manual; }
.wc-ringfeld {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 88px; aspect-ratio: 1; color: var(--fg);
}
.wc-ringfeld > * { grid-area: 1 / 1; }
.wc-ring { display: block; width: 100%; height: 100%; }
.wc-ring-zahl {
  font-family: var(--f-display); font-size: 1.875rem; line-height: 1;
  letter-spacing: 0.01em; color: var(--fg);
}
.wc-gut .wc-ringfeld { color: var(--wc-gut); }
.wc-schlecht .wc-ringfeld { color: var(--accent); }
.wc-leer .wc-ringfeld { color: var(--icon); }
.wc-kopf { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) {
  .wc-kopf.wc-mit-bild { grid-template-columns: minmax(0, 1fr) 248px; }
}
.wc-note {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 20px clamp(24px, 4vw, 44px);
  margin-top: clamp(24px, 3vw, 36px);
}
.wc-ringfeld-gross { width: clamp(172px, 26vw, 220px); }
.wc-ringfeld-gross .wc-ring { stroke-width: 6; }
.wc-note-kopf {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--f-display); line-height: 0.9;
}
.wc-note-zahl { font-size: clamp(3.5rem, 8vw, 5rem); letter-spacing: 0.01em; color: var(--fg); }
.wc-note-max { margin-top: 6px; font-size: 0.9375rem; letter-spacing: 0.16em; color: var(--fg-soft); }
.wc-note-urteil {
  flex: 1 1 240px; max-width: 34ch;
  font-size: 1.25rem; line-height: 1.45; color: var(--fg);
}
.wc-note-danach {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-mute);
}
.wc-muster { flex: 0 0 auto; width: 22px; height: 6px; background: var(--fg); opacity: 0.32; }
.wc-note-danach.wc-gut .wc-muster { background: var(--wc-gut); }
.wc-note-danach.wc-schlecht .wc-muster { background: var(--accent); }
.wc-neu-form {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
  margin-top: clamp(20px, 2.4vw, 26px);
}
.wc-neu { flex: 0 0 auto; }
.wc-neu-hinweis { flex: 1 1 240px; max-width: 46ch; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-soft); }
.wc-telefon {
  margin: 0; justify-self: start; width: min(248px, 48vw);
  padding: 8px; background: #131318;
  border: 1px solid var(--line-strong); border-radius: 12px;
}
.wc-telefon img { display: block; width: 100%; height: auto; border-radius: 6px; }
.wc-telefon figcaption { margin-top: 10px; padding: 0 4px 2px; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-soft); }
.wc-kacheln {
  display: grid; gap: 12px; margin-top: clamp(36px, 4.5vw, 56px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .wc-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wc-kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 18px 18px 20px;
  background: #0E0E12; border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg); text-decoration: none;
  transition: border-color var(--dur-kurz) var(--ease-wechsel),
              background var(--dur-kurz) var(--ease-wechsel);
}
.wc-kachel:hover { border-color: var(--line-strong); background: #121217; }
.wc-kachel { position: relative; }
.wc-kachel-icon { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; color: var(--accent); }
.wc-kachel .wc-ringfeld { width: 76px; margin-bottom: 12px; }
.wc-kachel-name {
  font-family: var(--f-display); font-size: 1.125rem; line-height: 1.1;
  letter-spacing: 0.1em; color: var(--fg);
}
.wc-kachel-wort { font-size: 0.9375rem; line-height: 1.5; color: var(--fg-soft); }
.wc-kachel.wc-gut .wc-kachel-wort { color: var(--wc-gut); }
.wc-kachel.wc-schlecht .wc-kachel-wort { color: var(--accent-text); }
.rechtsblock .wc-fixes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.wc-fixes li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--line); max-width: none;
}
.wc-fixes li:first-child { border-top: 0; }
.wc-fixes li > div { max-width: 60ch; }
.wc-fixes strong { display: block; margin-top: 6px; font-weight: 400; color: var(--fg); font-size: 1.0625rem; line-height: 1.5; }
.wc-fix-rang { font-family: var(--f-display); font-size: 3rem; line-height: 0.85; color: var(--fg-soft); }
.wc-fix-punkte {
  font-family: var(--f-display); font-size: 1.25rem; letter-spacing: 0.06em;
  color: var(--accent-text);
}
.wc-prio {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 3px;
  border: 1px solid var(--accent);
  font-family: var(--f-display); font-size: 0.9375rem; letter-spacing: 0.1em;
  color: var(--accent-text); vertical-align: 2px;
}
.wc-karten { display: grid; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 1024px) {
  .wc-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-karten > .wc-karte:first-child { grid-column: 1 / -1; }
}
.wc-karten > .wc-karte {
  margin-top: 0; padding: clamp(20px, 2.4vw, 28px);
  background: #0E0E12; border: 1px solid var(--line); border-radius: 6px;
}
.wc-karten > #b-barrierefreiheit { background: none; border-style: dashed; }
.wc-karte-kopf { display: flex; align-items: flex-start; gap: 18px; }
.wc-karte-kopf .wc-ringfeld { width: 72px; }
.wc-karte-kopf .wc-ring-zahl { font-size: 1.625rem; }
.wc-karte-kopf h2 { margin-top: 4px; }
.wc-karte .wc-herkunft { margin-top: 8px; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-mute); }
.wc-karte .wc-alles { margin-top: 18px; font-size: 1rem; color: var(--wc-gut); }
.wc-karte .wc-werte {
  margin: 22px 0 0; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.wc-karte .wc-wert {
  display: flex; flex-direction: column; gap: 4px; max-width: none;
  padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 6px;
}
.wc-wert-name { display: flex; align-items: baseline; gap: 8px; font-size: 0.9375rem; line-height: 1.4; color: var(--fg-mute); }
.wc-wert-zahl {
  margin-top: 6px; font-family: var(--f-display); font-size: 2.25rem;
  line-height: 1; letter-spacing: 0.01em; color: var(--fg);
}
.wc-wert-einheit {
  margin-left: 4px; font-family: var(--f-text); font-size: 1rem;
  letter-spacing: 0; color: var(--fg-soft);
}
.wc-wert.wc-gut .wc-wert-zahl { color: var(--wc-gut); }
.wc-wert.wc-schlecht .wc-wert-zahl { color: var(--accent); }
.wc-wert.wc-gut .wc-zeichen { color: var(--wc-gut); }
.wc-wert.wc-schlecht .wc-zeichen { color: var(--accent-text); }
.wc-wert-ziel { font-size: 0.9375rem; line-height: 1.5; color: var(--fg-soft); }
.wc-wert .wc-tun { margin-top: 8px; }
.wc-karte .wc-pruef { margin: 18px 0 0; gap: 14px; }
.wc-pruef li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); max-width: none;
}
.wc-pruef li > div { max-width: 52ch; }
.wc-pruef li:last-child { padding-bottom: 0; border-bottom: 0; }
.wc-zeichen { font-size: 1rem; line-height: 1.5; text-align: center; color: var(--icon); }
.wc-pruef li.wc-gut .wc-zeichen { color: var(--wc-gut); }
.wc-pruef li.wc-schlecht .wc-zeichen { color: var(--accent-text); }
.wc-pruef strong { display: block; font-weight: 400; color: var(--fg); font-size: 1rem; line-height: 1.5; }
.wc-pruef li.wc-gut strong { color: var(--fg-mute); }
.wc-beleg { display: block; margin-top: 2px; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-soft); }
.wc-tun { display: block; margin-top: 6px; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-mute); }
.wc-tun::before { content: "→ "; color: var(--accent-text); }
.wc-beleg, .wc-tun { hyphens: manual; }
.wc-auf { margin-top: 16px; }
.wc-auf > summary,
.wc-methode > summary {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  cursor: pointer; list-style: none;
}
.wc-auf > summary::-webkit-details-marker,
.wc-methode > summary::-webkit-details-marker { display: none; }
.wc-auf > summary { font-size: 0.9375rem; color: var(--fg-mute); transition: color var(--dur-kurz) var(--ease-wechsel); }
.wc-auf > summary:hover { color: var(--fg); }
.wc-auf > summary::before,
.wc-methode > summary::after {
  content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  font-family: var(--f-text); font-size: 1rem; line-height: 1; color: var(--fg-soft);
}
.wc-erfuellt > summary::before { color: var(--wc-gut); }
.wc-auf[open] > summary::before,
.wc-methode[open] > summary::after { content: "−"; }
.wc-karte .wc-auf .wc-pruef { margin-top: 8px; }
.wc-karte .wc-ursachen > p { margin-top: 4px; font-size: 0.9375rem; line-height: 1.6; }
.wc-methode > summary {
  font-family: var(--f-display); font-size: 1.375rem; letter-spacing: 0.06em; color: var(--fg);
}
.wc-methode > summary + p { margin-top: 12px; }
.wc-empfehlung {
  margin-top: 20px; padding: clamp(22px, 3vw, 30px);
  background: #12121A; border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(233, 227, 216, 0.04), 0 18px 40px -28px rgba(194, 60, 72, 0.45);
}
.wc-empfehlung .wc-empf-fuer { margin-top: 0; font-size: 0.9375rem; color: var(--fg-soft); }
.wc-empf-kopf {
  margin-top: 8px;
  font-family: var(--f-display); font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1; color: var(--fg);
}
.wc-empfehlung p { margin-top: 12px; max-width: 52ch; }
.wc-empf-preis {
  margin-top: 18px;
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.04em; color: var(--fg);
}
.wc-empfehlung .btn { margin-top: 18px; }
.wc-laden {
  display: grid; align-items: center;
  gap: clamp(28px, 4vw, 44px) clamp(32px, 6vw, 96px);
  grid-template-areas: "kopf" "buehne" "stufen";
}
@media (min-width: 900px) {
  .wc-laden {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas: "kopf buehne" "stufen buehne";
  }
}
.wc-laden-kopf { grid-area: kopf; align-self: end; }
.wc-laden-buehne { grid-area: buehne; display: grid; justify-items: center; gap: 24px; }
.wc-fortschritt { grid-area: stufen; align-self: start; }
.wc-laden-ring {
  display: grid; place-items: center;
  width: min(300px, 72vw); aspect-ratio: 1; color: var(--fg);
}
.wc-laden-ring > * { grid-area: 1 / 1; }
.wc-laden-ring svg { display: block; width: 100%; height: 100%; }
.wc-laden-lauf { opacity: 0; transform-origin: 50% 50%; }
.wc-laden-namen { display: grid; place-items: center; }
.wc-laden-namen > span {
  grid-area: 1 / 1; opacity: 0;
  font-family: var(--f-display); font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1; letter-spacing: 0.06em; color: var(--fg);
}
.wc-saetze {
  list-style: none; margin: 0; padding: 0;
  display: grid; width: 100%; min-height: 3.4em; text-align: center;
}
.wc-saetze > li {
  grid-area: 1 / 1; opacity: 0;
  font-size: 1.125rem; line-height: 1.5; color: var(--fg-mute); text-wrap: balance;
}
.wc-laden-namen > .ist,
.wc-saetze > .ist { opacity: 1; }
.wc-stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wc-stufen li {
  display: flex; align-items: center; gap: 10px; min-height: 24px;
  font-size: 1rem; line-height: 1.5; color: var(--fg-soft);
}
.wc-stufen li::before {
  content: "○"; flex: 0 0 auto; width: 1em; text-align: center; color: var(--icon);
}
.wc-stufen li.wc-fertig { color: var(--fg-mute); }
.wc-stufen li.wc-fertig::before { content: "✓"; color: var(--wc-gut); }
.wc-stufen li.wc-laeuft { color: var(--fg); }
.wc-stufen li.wc-laeuft::before { content: "●"; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .wc-laden-lauf {
    opacity: 1;
    animation: wc-dreh 1.6s linear infinite;
    animation-delay: var(--wc-t, 0s);
  }
  .wc-laden-namen > span,
  .wc-laden-namen > .ist {
    opacity: 0;
    animation: wc-bereich 24s var(--ease-wechsel) infinite both;
    animation-delay: calc(var(--wc-g, 0) * 6s + var(--wc-t, 0s));
  }
  .wc-saetze > li,
  .wc-saetze > .ist {
    opacity: 0;
    animation: wc-satz 24s var(--ease-wechsel) infinite both;
    animation-delay: calc(var(--wc-i, 0) * 1.2s + var(--wc-t, 0s));
  }
  .wc-kopf .wc-ring-bogen,
  .wc-kacheln .wc-ring-bogen {
    animation: wc-ring var(--dur-szene) var(--ease-eintritt) both;
    animation-delay: calc(var(--wc-i, 0) * 40ms + 120ms);
  }
  .wc-kopf .wc-ring-plus {
    animation: wc-auf var(--dur-lang) var(--ease-eintritt) both;
    animation-delay: 520ms;
  }
}
@keyframes wc-dreh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes wc-satz {
  0%        { opacity: 0; transform: translateX(-8px); }
  1%        { opacity: 1; transform: none; }
  4.33%     { opacity: 1; transform: none; }
  5%, 100%  { opacity: 0; transform: none; }
}
@keyframes wc-bereich {
  0%        { opacity: 0; }
  1%        { opacity: 1; }
  24.33%    { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes wc-ring { from { stroke-dasharray: 0 100; } }
@keyframes wc-auf { from { opacity: 0; } }