:root {
  --st-zwei-abstand: 64px;
  --st-zwei-abstand-mobil: 36px;
  --st-punkt-haken: 22px;
  --st-punkt-innen: 16px 18px;
  --st-portraits-breite: 560px;
  --st-pfeil-drehung: rotate(180deg);
  --st-faq-zeile: 64px;
  --st-faq-innen: 22px;
  --st-faq-radius: 18px;
  --st-fs-faq: 17px;
  --st-fs-preis: 44px;
  --st-fs-preis-name: 22px;
  --st-preis-innen: 30px;
}

.akzent {
  color: var(--akzent-text);
}

.st-zwei {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--st-zwei-abstand-mobil);
  align-items: center;
}

.st-zwei > * {
  min-width: 0;
}

.st-gruender__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

.st-gruender__text .u-eyebrow {
  margin-bottom: 0;
}

.st-punkte {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  margin-top: var(--s-2);
  list-style: none;
}

.karte.st-punkt {
  display: flex;
  gap: var(--s-2);
  padding: var(--st-punkt-innen);
  color: var(--text);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}

.st-punkt__haken {
  flex: none;
  width: var(--st-punkt-haken);
  height: var(--st-punkt-haken);
  margin-top: 1px;
}

.st-punkt__haken circle {
  fill: var(--glas-hover);
}

.st-punkt__haken path {
  fill: none;
  stroke: var(--akzent-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-gruender__karte {
  padding: var(--s-3);
}

.st-gruender__portraits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  list-style: none;
}

.st-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-bild);
  object-fit: cover;
}

.st-portrait__name {
  margin-top: var(--s-1);
  color: var(--text);
  font-size: var(--fs-klein-mobil);
  line-height: var(--lh-klein);
}

.st-preise__karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-6);
  max-width: var(--inhalt-tablet);
  list-style: none;
}

.karte.st-preiskarte {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--st-preis-innen);
}

.st-preiskarte > * + * {
  margin-top: 0;
}

.st-preiskarte__name {
  margin-bottom: var(--s-1);
  font-size: var(--st-fs-preis-name);
}

.st-preiskarte__preis {
  color: var(--titel);
  font-size: var(--st-fs-preis);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: -0.03em;
}

.st-preiskarte__ab {
  color: var(--text);
  font-size: var(--fs-einl);
  letter-spacing: 0;
}

.st-preiskarte__einheit {
  color: var(--text);
  font-size: var(--fs-label-mobil);
}

.st-preiskarte__text {
  margin-top: var(--s-1);
  color: var(--text);
  font-size: var(--fs-label-mobil);
}

.st-preise__alle {
  margin-top: var(--s-4);
}

.st-faq__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--st-zwei-abstand-mobil);
  align-items: start;
}

.st-faq__kopf .u-lead {
  margin-top: var(--s-2);
}

.st-faq__liste {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.st-faq__eintrag {
  padding: 0 var(--st-faq-innen);
  border: var(--rand) solid var(--glas-rand);
  border-radius: var(--st-faq-radius);
  background-color: var(--glas);
}

.st-faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--st-faq-zeile);
  color: var(--titel);
  font-size: var(--st-fs-faq);
  font-weight: var(--fw-medium);
  list-style: none;
  cursor: pointer;
}

.st-faq__frage::-webkit-details-marker {
  display: none;
}

.st-faq__frage:focus-visible {
  outline-offset: var(--s-1);
}

.st-faq__pfeil {
  flex: none;
  width: var(--s-3);
  height: var(--s-3);
  fill: none;
  stroke: var(--akzent-text);
  stroke-width: var(--icon-strich);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--uebergang) var(--kurve);
}

.st-faq__eintrag[open] .st-faq__pfeil {
  transform: var(--st-pfeil-drehung);
}

.st-faq__antwort {
  padding-bottom: var(--s-3);
  color: var(--text);
}

@media (min-width: 735px) {
  .st-preise__karten {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }

  .st-portrait__name {
    font-size: var(--fs-klein);
  }
}

@media (min-width: 1069px) {
  .st-zwei {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--st-zwei-abstand);
  }

  .st-zwei--um {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .st-faq__raster {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--st-zwei-abstand);
  }
}



@media print {
  .st-faq__eintrag {
    border-color: var(--linie);
  }
}

:root {
  --st-streifen-a-mobil: 66%;
  --st-badge: 0.62em;
  --st-badge-abstand: 0.18em;
  --st-badge-hoch: 0.08em;
  --st-badge-strich: 2.6;
  --st-mitte-basis: 520px;
  --st-zeile-abstand: 28px 32px;
  --st-fs-knopf-hero: 16px;
  --st-faecher-hoehe: 520px;
  --st-faecher-hoehe-mobil: 470px;
  --st-faecher-oben: var(--s-7);
  --st-faecher-spur: 1240px;
  --st-perspektive: 1800px;
  --st-kipp-links: rotateY(18deg) scale(0.94);
  --st-kipp-rechts: rotateY(-18deg) scale(0.94);
  --st-ueberlappung: -26px;
  --st-karte-seite: 460px;
  --st-karte-mitte: 340px;
  --st-karte-versatz: var(--s-7);
  --st-karte-innen-links: 18px 34px 18px 18px;
  --st-karte-innen-rechts: 20px 20px 20px 40px;
  --st-karte-innen-mitte: 22px;
  --st-karte-abstand: 14px;
  --st-fs-karte-titel: 16px;
  --st-fs-karte-mini: 13px;
  --st-fs-karte-klein: 13px;
  --st-fs-karte-text: 14px;
  --st-fs-karte-gross: 15px;
  --st-fs-uhr: 78px;
  --st-ls-uhr: -0.04em;
  --st-ls-karte-titel: -0.01em;
  --st-ls-label: 0.02em;
  --st-label-innen: 5px 12px;
  --st-label-abstand: 12px;
  --st-label-punkt: 6px;
  --st-dp-name-spalte: 76px;
  --st-dp-name-abstand: 6px;
  --st-ls-schicht: -0.03em;
  --st-dp-abstand: 5px;
  --st-dp-zelle: 30px;
  --st-dp-initial: 24px;
  --st-dp-min: 400px;
  --st-status-innen: 4px 10px;
  --st-status-punkt: 7px;
  --st-abschluss-haken: 20px;
  --st-abschluss-abstand: 10px;
  --st-knopf-karte: 48px;
  --st-knopf-karte-rechts: 46px;
  --st-hinweis-oben: 14px;
}

.st-hero__buehne {
  padding-bottom: 0;
  text-align: center;
}

.st-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--st-badge);
  height: var(--st-badge);
  margin-left: var(--st-badge-abstand);
  border-radius: var(--radius-rund);
  background: var(--buehne-badge);
  vertical-align: var(--st-badge-hoch);
}

.st-hero__badge svg {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: var(--weiss);
  stroke-width: var(--st-badge-strich);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-hero__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-zeile-abstand);
  width: 100%;
}

.st-hero__mitte {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.st-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}

.st-faecher {
  position: relative;
  height: var(--st-faecher-hoehe);
  margin-top: var(--st-faecher-oben);
  overflow: hidden;
  -webkit-mask-image: var(--faecher-maske);
  mask-image: var(--faecher-maske);
}

.st-faecher__spur {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: var(--st-faecher-spur);
  transform: translateX(-50%);
  perspective: var(--st-perspektive);
}

.st-faecher__platz {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--st-karte-seite);
  text-align: left;
}

.st-faecher__platz--links {
  margin-top: var(--st-karte-versatz);
  margin-right: var(--st-ueberlappung);
  transform: var(--st-kipp-links);
  transform-origin: right center;
}

.st-faecher__platz--rechts {
  margin-top: var(--st-karte-versatz);
  margin-left: var(--st-ueberlappung);
  transform: var(--st-kipp-rechts);
  transform-origin: left center;
  text-align: right;
}

.st-faecher__platz--mitte {
  z-index: 3;
  width: min(var(--st-karte-mitte), calc(100vw - 2 * var(--s-3)));
}

.st-faecher__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  max-width: none;
  margin-bottom: var(--st-label-abstand);
  padding: var(--st-label-innen);
  border-radius: var(--radius-pille);
  background-color: var(--buehne-label-grund);
  color: var(--weiss);
  font-size: var(--st-fs-karte-klein);
  line-height: var(--lh-klein);
  letter-spacing: var(--st-ls-label);
}

.st-faecher__punkt {
  width: var(--st-label-punkt);
  height: var(--st-label-punkt);
  border-radius: var(--radius-rund);
  background-color: currentColor;
}

.st-karte {
  display: flex;
  flex-direction: column;
  gap: var(--st-karte-abstand);
  border-radius: var(--radius-fenster);
  box-shadow: var(--schatten-fenster);
  color: var(--titel);
  text-align: left;
}

.st-karte--dienstplan {
  padding: var(--st-karte-innen-links);
}

.st-karte--dienstplan .st-karte__neben,
.st-karte--dienstplan .st-dp__kopf {
  color: var(--text);
}

.st-karte--abschluss {
  gap: var(--s-2);
  padding: var(--st-karte-innen-rechts);
}

.st-karte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1);
}

.st-karte__kopf--mitte {
  align-items: center;
}

.st-karte__titel {
  font-size: var(--st-fs-karte-titel);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--st-ls-karte-titel);
}

.st-karte__neben {
  color: var(--text-2);
  font-size: var(--st-fs-karte-klein);
}

.st-karte__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--st-knopf-karte-rechts);
  border-radius: var(--radius-pille);
  background-color: var(--tiefblau);
  color: var(--weiss);
  font-size: var(--st-fs-karte-gross);
  font-weight: var(--fw-semibold);
}

.st-karte__knopf--hell {
  min-height: var(--st-knopf-karte);
  background-color: var(--weiss);
  color: var(--nacht);
}

.st-karte__knopf--umriss {
  min-height: var(--st-knopf-karte);
  border: var(--rand) solid var(--knopf-umriss-rand);
  background-color: transparent;
  color: var(--weiss);
}

.st-karte__hinweis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--s-1);
  padding: 12px 14px;
  border: var(--rand) solid var(--linie);
  border-radius: var(--radius-bild);
  color: var(--text-2);
  font-size: var(--st-fs-karte-klein);
  line-height: var(--lh-klein);
}

.st-karte__hinweistitel {
  color: var(--titel);
  font-size: var(--st-fs-karte-text);
  font-weight: var(--fw-semibold);
}

.st-karte__datei {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: var(--rand) solid var(--linie);
  border-radius: var(--radius-menue-eintrag);
}

.st-karte__dateiicon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--menue-icon);
  height: var(--menue-icon);
  border-radius: var(--radius-feld);
  background-color: var(--soft);
}

.st-karte__dateiicon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--app-blau);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.st-karte__dateitext {
  display: flex;
  flex-direction: column;
  color: var(--text-2);
  font-size: var(--st-fs-karte-klein);
  line-height: var(--lh-klein);
}

.st-karte__dateiname {
  color: var(--titel);
  font-weight: var(--fw-semibold);
}

.st-karte__trenner {
  height: var(--rand);
  background-color: var(--linie);
}

.st-dp {
  overflow-x: auto;
}

.st-dp__raster {
  display: grid;
  grid-template-columns: var(--st-dp-name-spalte) repeat(7, minmax(0, 1fr));
  align-items: center;
  gap: var(--st-dp-abstand);
  min-width: var(--st-dp-min);
}

.st-dp__kopf {
  color: var(--text-2);
  font-size: var(--st-fs-karte-mini);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.st-dp__name {
  display: flex;
  align-items: center;
  gap: var(--st-dp-name-abstand);
  min-width: 0;
  font-size: var(--st-fs-karte-klein);
  font-weight: var(--fw-medium);
}

.st-dp__person {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-dp__initial {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--st-dp-initial);
  height: var(--st-dp-initial);
  border-radius: var(--radius-rund);
  background-color: var(--hellgrau);
  font-size: var(--st-fs-karte-mini);
  font-weight: var(--fw-semibold);
}

.st-dp__name--offen {
  color: var(--text);
}

.st-dp__name--offen .st-dp__initial {
  border: var(--rand) dashed var(--border-strong);
  background-color: transparent;
  font-size: var(--st-fs-karte-klein);
}

.st-dp__schicht {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--st-dp-zelle);
  border-radius: var(--radius-knopf);
  font-size: var(--st-fs-karte-mini);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--st-ls-schicht);
  white-space: nowrap;
}

.st-dp__schicht--frueh {
  background-color: var(--akzent-soft);
  color: var(--tiefblau);
}

.st-dp__schicht--spaet {
  background-color: var(--tiefblau);
  color: var(--weiss);
}

.st-dp__schicht--offen {
  border: var(--rand) dashed var(--border-strong);
  color: var(--text);
}

.st-dp__schicht--leer {
  background-color: var(--hellgrau);
}

.st-karte--stempeluhr {
  gap: var(--s-2);
  padding: var(--st-karte-innen-mitte);
  border: var(--rand) solid var(--karte-uhr-rand);
  border-radius: var(--radius-glas);
  background: var(--karte-uhr-licht-rueckfall), var(--nacht);
  box-shadow: var(--schatten-karte-vorn);
  color: var(--weiss);
}

@supports (background: color-mix(in oklab, red 50%, transparent)) {
  .st-karte--stempeluhr {
    background: var(--karte-uhr-licht), var(--nacht);
  }
}

.st-uhr__schicht {
  font-size: var(--st-fs-karte-text);
  font-weight: var(--fw-semibold);
}

.st-uhr__status {
  display: inline-flex;
  align-items: center;
  gap: var(--st-kennzahl-abstand);
  padding: var(--st-status-innen);
  border-radius: var(--radius-pille);
  background-color: var(--buehne-glas-aktiv);
  color: var(--weiss);
  font-size: var(--st-fs-karte-klein);
  font-weight: var(--fw-semibold);
}

.st-uhr__statuspunkt {
  width: var(--st-status-punkt);
  height: var(--st-status-punkt);
  border-radius: var(--radius-rund);
  background-color: var(--licht-pink);
}

.st-uhr__zeit {
  font-size: var(--st-fs-uhr);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--st-ls-uhr);
  font-variant-numeric: tabular-nums;
}

.st-uhr__person {
  font-size: var(--st-fs-karte-gross);
  font-weight: var(--fw-medium);
}

.st-uhr__linie {
  height: var(--rand);
  background-color: color-mix(in srgb, currentColor 30%, transparent);
}

.st-uhr__zeile {
  display: flex;
  justify-content: space-between;
  font-size: var(--st-fs-karte-text);
  font-weight: var(--fw-medium);
}

.st-abschluss-liste {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: var(--st-fs-karte-text);
}

.st-abschluss-liste li {
  display: flex;
  align-items: center;
  gap: var(--st-abschluss-abstand);
}

.st-abschluss-liste__haken {
  flex: none;
  width: var(--st-abschluss-haken);
  height: var(--st-abschluss-haken);
}

.st-abschluss-liste__haken circle {
  fill: var(--soft);
}

.st-abschluss-liste__haken path {
  fill: none;
  stroke: var(--app-blau);
  stroke-width: var(--rand-betont);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-hero__hinweis {
  max-width: none;
  margin-top: var(--st-hinweis-oben);
  color: var(--text-2);
  font-size: var(--fs-klein-mobil);
  line-height: var(--lh-klein);
  text-align: center;
}

@media (max-width: 734px) {
  .st-hero .buehne__streifen--a {
    top: var(--st-streifen-a-mobil);
  }

  .st-faecher {
    height: var(--st-faecher-hoehe-mobil);
  }

  .st-faecher__spur {
    width: 100%;
  }

  .st-faecher__platz--links,
  .st-faecher__platz--rechts {
    display: none;
  }

}

@media (min-width: 735px) {

  .st-faecher__platz {
    --st-karte-seite: 410px;
  }

  :root {
    --st-faecher-spur: 1160px;
    --st-fs-karte-mini: 11px;
    --st-fs-karte-klein: 12px;
    --st-dp-name-spalte: 66px;
    --st-dp-min: 330px;
  }

}

@media (min-width: 1069px) {
  .st-hero__mitte {
    flex: 1 1 var(--st-mitte-basis);
  }
}

@media print {
  .st-hero__buehne {
    padding-top: var(--s-4);
  }

  .st-faecher,
  .st-hero__hinweis {
    display: none;
  }

  .st-hero__buehne .buehne__titel,
  .st-hero__buehne .buehne__akzent {
    color: var(--papier-text);
  }
}


.st-hero__mitte {
  flex: 1 1 100%;
}
.st-hero__zeile {
  justify-content: center;
}
.st-faecher {
  margin-top: var(--s-4);
}

@media (max-width: 734px) {
  .st-hero__buehne {
    padding-top: calc(var(--header-height) + var(--s-4));
  }
  .st-hero__mitte {
    gap: var(--s-2);
  }
  }

.sv2 { --e: 0; --w: 1; padding-block: var(--abschnitt-y); }
.sv2 h2 span, .sv2 .pro-after { color: var(--akzent-text); }
.sv2 p { margin: 0; }
.sv2 button, .sv2 input, .sv2 select { font: inherit; }
.sv2 button { cursor: pointer; }
.sv2 button:disabled { cursor: default; }
.sv2 :focus-visible { outline: var(--sv2-3px) solid var(--fokus); outline-offset: var(--sv2-3px); }
.sv2 .pin-in { position: relative; }
.sv2 .prolog { position: relative; }
.sv2 .pro-head { text-align: center; padding: var(--sv2-32px) var(--sv2-20px); }
.sv2 .pro-head h2, .sv2 .pro-head p { margin-inline: auto; }
.sv2 .pro-after { font-size: var(--fs-h3); }
.sv2 .chaos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sv2-20px); padding: var(--sv2-24px); }
.sv2 .cx { width: var(--sv2-260px); padding: var(--sv2-20px); border-radius: var(--radius-papier); color: var(--papier-text); background: var(--fenster-weiss); }
.sv2 .cx b { color: inherit; }
.sv2 .cx p { margin-top: var(--sv2-10px); }
.sv2 .chat { background: var(--menue-grund); color: var(--raum-text-2); border: var(--sv2-1px) solid var(--glas-rand); transform: rotate(var(--sv2-5deg)); }
.sv2 .bub { background: var(--glas); padding: var(--sv2-12px); border-radius: var(--radius-feld); }
.sv2 .zettel { transform: rotate(var(--sv2-6deg)); }
.sv2 .xl { transform: rotate(var(--sv2-3deg)); }
.sv2 .pro-win { max-width: var(--sv2-640px); margin: var(--sv2-32px) auto; }
.sv2 .wh { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sv2-10px); padding: var(--sv2-16px) var(--sv2-20px); border-bottom: var(--sv2-1px) solid var(--linie); }
.sv2 .wh b { color: var(--papier-titel); font-size: var(--sv2-16px); }
.sv2 .wh span { font-size: var(--sv2-13px); color: var(--papier-text-2); }
.sv2 .wb { padding: var(--sv2-20px); display: flex; flex-direction: column; gap: var(--sv2-14px); font-size: var(--sv2-14px); color: var(--papier-text); }
.sv2 .plan-wrap, .sv2 .csv { overflow-x: auto; max-width: 100%; }
.sv2 .plan { display: grid; grid-template-columns: var(--sv2-100px) repeat(7,minmax(var(--sv2-44px),1fr)); gap: var(--sv2-4px); align-items: center; min-width: var(--sv2-460px); }
.sv2 .gh { font-size: var(--sv2-13px); font-weight: 600; text-align: center; }
.sv2 .nm { display: flex; gap: var(--sv2-6px); align-items: center; font-size: var(--sv2-13px); color: var(--papier-titel); }
.sv2 .av { display: none; }
.sv2 .z { min-height: var(--sv2-44px); display: flex; align-items: center; justify-content: center; font-size: var(--sv2-13px); border-radius: var(--radius-feld); background: var(--soft); color: var(--papier-titel); }
.sv2 .z.e { background: transparent; }
.sv2 .z.s { background: var(--tiefblau); color: var(--fenster-weiss); }
.sv2 .z.u { background: var(--soft); border: var(--sv2-1px) solid var(--app-blau); }
.sv2 button.z.off { width: 100%; border: var(--sv2-1px) dashed var(--papier-text-2); background: var(--fenster-weiss); }
.sv2 .card, .sv2 .sheet, .sv2 .nt { display: flex; flex-direction: column; gap: var(--sv2-10px); padding: var(--sv2-14px); border: var(--sv2-1px) solid var(--linie); border-radius: var(--radius-feld); background: var(--fenster-weiss); color: var(--papier-text); box-shadow: none; }
.sv2 .card b, .sv2 .sheet b, .sv2 .nt b { color: var(--papier-titel); }
.sv2 .sm, .sv2 small { color: var(--papier-text-2); font-size: var(--sv2-13px); }
.sv2 .stat-line { display: flex; align-items: baseline; gap: var(--sv2-8px); padding: var(--sv2-12px); background: var(--soft); color: var(--papier-titel); border-radius: var(--radius-feld); }
.sv2 .stat-line i { display: inline-block; width: var(--sv2-8px); height: var(--sv2-8px); flex: none; border-radius: var(--radius-rund); background: var(--app-blau); }
.sv2 .warn i { background: var(--licht-pink); box-shadow: 0 0 0 var(--sv2-4px) var(--story-probe-ring); }
.sv2 .bn, .sv2 .chip { display: inline-flex; align-items: center; justify-content: center; min-height: var(--sv2-44px); min-width: var(--sv2-44px); padding: var(--sv2-8px) var(--sv2-16px); border-radius: var(--radius-pille); border: var(--sv2-1px) solid var(--tiefblau); background: var(--tiefblau); color: var(--fenster-weiss); font-size: var(--sv2-14px); font-weight: 600; }
.sv2 .bn.ghost { background: var(--fenster-weiss); color: var(--papier-titel); }
.sv2 .bn:disabled { opacity: .55; }
.sv2 .chips, .sv2 .draft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv2-10px); }
.sv2 label { display: flex; flex-direction: column; gap: var(--sv2-6px); min-width: 0; }
.sv2 input, .sv2 select { width: 100%; min-height: var(--sv2-44px); color: var(--papier-text); background: var(--fenster-weiss); padding: var(--sv2-8px); border: var(--sv2-1px) solid var(--papier-text-2); border-radius: var(--radius-feld); font-size: var(--sv2-14px); }
.sv2 .term { padding: var(--sv2-20px); display: flex; flex-direction: column; gap: var(--sv2-14px); color: var(--raum-text); background: var(--canvas); border-radius: var(--radius-fenster); }
.sv2 .term p { color: var(--raum-text-2); }
.sv2 .term .big { font-size: var(--sv2-20px); color: var(--raum-text); }
.sv2 .nb2, .sv2 .keys { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sv2-8px); }
.sv2 .keys { grid-template-columns: repeat(3,1fr); }
.sv2 .tb { min-height: var(--sv2-46px); min-width: var(--sv2-44px); border: var(--sv2-1px) solid var(--glas-rand); border-radius: var(--radius-feld); background: var(--glas); color: var(--raum-text); }
.sv2 .tb.w { background: var(--fenster-weiss); color: var(--canvas); }
.sv2 .dots4 { display: flex; gap: var(--sv2-10px); }
.sv2 .dots4 i { width: var(--sv2-14px); height: var(--sv2-14px); border-radius: var(--radius-rund); border: var(--sv2-2px) solid var(--akzent-text); }
.sv2 .dots4 .on { background: var(--raum-text); }
.sv2 .tbl { border-collapse: collapse; font-size: var(--sv2-13px); white-space: nowrap; }
.sv2 .tbl th, .sv2 .tbl td { padding: var(--sv2-8px); border-bottom: var(--sv2-1px) solid var(--linie); text-align: left; }
.sv2 .file { display: flex; gap: var(--sv2-12px); padding: var(--sv2-12px); background: var(--soft); border-radius: var(--radius-feld); }
.sv2 .file b, .sv2 .file span { display: block; }
.sv2 .file .fi { display: none; }
.sv2 .rail { display: flex; flex-wrap: wrap; gap: var(--sv2-8px); padding-block: var(--sv2-24px); }
.sv2 .ri { position: relative; min-height: var(--sv2-44px); padding: var(--sv2-10px) var(--sv2-16px); color: var(--raum-text-2); background: var(--glas); border: var(--sv2-1px) solid var(--glas-rand); border-radius: var(--radius-pille); text-align: left; }
.sv2 .ri[aria-pressed="true"] { color: var(--raum-text); border-color: var(--akzent-text); }
.sv2 .chapters { min-width: 0; }
.sv2 .chapter { padding-block: var(--sv2-32px); scroll-margin-top: var(--header-height); }
.sv2 .chapter-copy { display: flex; flex-direction: column; gap: var(--sv2-14px); margin-bottom: var(--sv2-24px); }
.sv2 .try { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--sv2-10px); padding: var(--sv2-8px) var(--sv2-14px); border: var(--sv2-1px) solid var(--glas-rand); border-radius: var(--radius-pille); background: var(--glas); font-size: var(--sv2-14px); color: var(--raum-text-2); }
.sv2 .try::before { content: ""; flex: none; width: var(--sv2-8px); height: var(--sv2-8px); border-radius: var(--radius-rund); background: var(--licht-pink); box-shadow: 0 0 0 var(--sv2-4px) var(--story-probe-ring); }
.sv2 .stage { position: relative; padding-top: var(--sv2-52px); min-width: 0; }
.sv2 .phone { width: var(--sv2-260px); padding: var(--sv2-8px); border-radius: var(--sv2-36px); border: var(--sv2-1px) solid var(--glas-rand); background: var(--tiefblau); margin-top: var(--sv2-16px); box-shadow: var(--schatten-fenster); }
.sv2 .ps { background: var(--fenster-weiss); border-radius: var(--sv2-28px); min-height: var(--story-handy-hoehe); padding: var(--sv2-16px) var(--sv2-12px); display: flex; flex-direction: column; gap: var(--sv2-10px); font-size: var(--sv2-13px); color: var(--papier-text); }
.sv2 .mode { position: absolute; top: 0; right: 0; min-height: var(--sv2-44px); padding: var(--sv2-8px) var(--sv2-14px); border: var(--sv2-1px) solid var(--glas-rand); border-radius: var(--radius-pille); background: var(--menue-grund); color: var(--raum-text); font-size: var(--sv2-13px); }
.sv2 .cur { position: absolute; left: 0; top: 0; z-index: 5; width: var(--sv2-24px); height: var(--sv2-24px); pointer-events: none; opacity: 0; transition: opacity var(--cursor-fade); will-change: transform; contain: layout style; }
.sv2 .cur.on { opacity: 1; }
.sv2 .cur svg { display: block; width: 100%; height: 100%; overflow: visible; filter: var(--sv2-cursor-shadow); }
.sv2 .cur path { fill: var(--canvas); stroke: var(--fenster-weiss); }
.sv2 .cur .ring { position: absolute; left: var(--sv2-ring-left); top: var(--sv2-ring-top); width: var(--sv2-36px); height: var(--sv2-36px); border: var(--sv2-2px) solid var(--sv2-ring-color); border-radius: var(--radius-rund); opacity: 0; }
.sv2 .cur.press .ring { opacity: .9; }
.sv2.no-cursor .cur { display: none; }
.sv2 [hidden] { display: none !important; }
@media (min-width: 901px) {
 .sv2.ready:not(.reduced) .prolog { height: var(--prolog-height); }
 .sv2.ready:not(.reduced) .scene { height: var(--scene-height); }
 .sv2.ready:not(.reduced) .pin-in { position: sticky; top: var(--header-height); height: calc(var(--sv2-100svh) - var(--header-height)); display: flex; flex-direction: column; justify-content: center; }
 .sv2.ready:not(.reduced) .pro-head { position: absolute; top: var(--sv2-2vh); left: 0; right: 0; }
 .sv2.ready:not(.reduced) .chaos { position: absolute; inset: 32% 0 0; opacity: 1; pointer-events: none; }
 .sv2.ready:not(.reduced) .cx { position: absolute; left: 50%; top: 35%; }
 .sv2.ready:not(.reduced) .chat { transform: translate(calc(-50% - max(0,(1 - var(--e)*2))*var(--sv2-24vw)),calc(-50% - max(0,(1 - var(--e)*2))*var(--sv2-10vh))) rotate(var(--sv2-5deg)); }
 .sv2.ready:not(.reduced) .zettel { transform: translate(calc(-50% + max(0,(1 - var(--e)*2))*var(--sv2-24vw)),calc(-50% - max(0,(1 - var(--e)*2))*var(--sv2-10vh))) rotate(var(--sv2-6deg)); }
 .sv2.ready:not(.reduced) .xl { transform: translate(-50%,calc(-50% + max(0,(1 - var(--e)*2))*var(--sv2-10vh))) rotate(var(--sv2-3deg)); }
 .sv2.ready:not(.reduced) .pro-win { position: absolute; width: min(var(--sv2-640px),var(--sv2-90vw)); left: 50%; top: 57%; margin: 0; transform: translate(-50%,-50%) scale(calc(.9 + var(--w)*.1)); visibility: hidden; }
 .sv2.ready:not(.reduced) .pro-after { visibility: hidden; }
 .sv2.ready:not(.reduced) .prolog.geordnet .chaos { visibility: hidden; }
 .sv2.ready:not(.reduced) .prolog.geordnet .pro-win,
 .sv2.ready:not(.reduced) .prolog.geordnet .pro-after { visibility: visible; }
 .sv2.ready:not(.reduced) .scene-grid { display: grid; width: min(var(--sv2-scene-width),100% - 2 * var(--sv2-28px)); grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); gap: var(--s-7); align-items: center; }
 .sv2.ready:not(.reduced) .rail { flex-direction: column; gap: 0; padding: 0; }
 .sv2.ready:not(.reduced) .rail-item { position: relative; padding: 0 0 var(--sv2-16px) var(--sv2-24px); border-left: var(--sv2-2px) solid var(--glas-rand); }
 .sv2.ready:not(.reduced) .rail-item:last-child { border-left-color: transparent; padding-bottom: 0; }
 .sv2.ready:not(.reduced) .ri { padding: 0; border: 0; background: transparent; color: var(--gedaempft); }
 .sv2.ready:not(.reduced) .ri::before { content: ""; position: absolute; left: calc(-1 * var(--sv2-32px)); top: var(--sv2-14px); width: var(--sv2-14px); height: var(--sv2-14px); border-radius: var(--radius-rund); background: var(--canvas); border: var(--sv2-2px) solid var(--knopf-umriss-rand); }
 .sv2.ready:not(.reduced) .ri[aria-pressed="true"], .sv2.ready:not(.reduced) .ri.done { color: var(--raum-text); }
 .sv2.ready:not(.reduced) .ri[aria-pressed="true"]::before { background: var(--licht-pink); border-color: var(--licht-pink); box-shadow: 0 0 0 var(--sv2-6px) var(--story-probe-ring); }
 .sv2.ready:not(.reduced) .ri.done::before { background: var(--raum-text); }
 .sv2.ready:not(.reduced) [data-rail-copy] { display: none; }
 .sv2.ready:not(.reduced) .rail-item.active [data-rail-copy] { display: block; }
 .sv2.ready:not(.reduced) .rail .u-eyebrow { display: none; }
 .sv2.ready:not(.reduced) .chapter { display: none; padding: 0; }
 .sv2.ready:not(.reduced) .chapter.active { display: block; }
 .sv2.ready:not(.reduced) .chapter-copy h3 { font-size: var(--fs-h3); }
 .sv2.ready:not(.reduced) .chapter-copy { gap: var(--sv2-8px); margin-bottom: var(--sv2-8px); }
 .sv2.ready:not(.reduced) .chapter-copy p { font-size: var(--fs-text); }
 .sv2.ready:not(.reduced) .chapter-copy .try { font-size: var(--sv2-14px); }
 .sv2.ready:not(.reduced) .stage { padding-left: var(--sv2-190px); }
 .sv2.ready:not(.reduced) .phone { position: absolute; left: 0; bottom: calc(-1 * var(--sv2-10px)); width: var(--sv2-210px); z-index: 3; }
 .sv2.ready:not(.reduced) .win .wh { flex: none; }
 .sv2.ready:not(.reduced) .win .wb { flex: 1; min-height: 0; overflow-y: auto; }
 .sv2.ready:not(.reduced) .win { height: var(--story-fenster-hoehe); min-height: var(--story-fenster-hoehe); display: flex; flex-direction: column; }
}
@media (max-width: 900px) {
 .sv2 { padding-block: var(--abschnitt-y-mobil); }
 .sv2 .pro-win { margin-inline: var(--sv2-20px); }
 .sv2 .wb { padding: var(--sv2-14px); }
 .sv2 .rail { position: static; }
}
@media (prefers-reduced-motion: reduce) {
 .sv2 *, .sv2 *::before, .sv2 *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
 .sv2 .cur { display: none !important; }
}

.sv2 .win:has(.term) .wb {
  background: var(--canvas);
  justify-content: center;
}
.sv2 .term {
  padding: var(--sv2-14px);
}

.sv2 .story-controls, .sv2 .pro-controls { display: none; }
.sv2 progress {
  appearance: none;
  border: 0;
  border-radius: var(--radius-pille);
  overflow: hidden;
  height: var(--sv2-4px);
  background: var(--glas-rand);
  color: var(--akzent-text);
}
.sv2 progress::-webkit-progress-bar { background: var(--glas-rand); }
.sv2 progress::-webkit-progress-value { background: var(--akzent-text); }
.sv2 progress::-moz-progress-bar { background: var(--akzent-text); }
@media (min-width: 901px) {
  .sv2.ready:not(.reduced) .story-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-2);
    font-size: var(--fs-klein-mobil);
  }
  .sv2 .story-controls progress { flex: 1; min-width: var(--sv2-44px); width: var(--sv2-44px); }
  .sv2.ready:not(.reduced) .pro-controls {
    position: absolute;
    bottom: var(--sv2-32px);
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
  }
  .sv2 .pro-controls progress { width: 100%; }
}