@font-face {
  font-family: "IBM Plex Sans";
  src: url("schriften/IBMPlexSans.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("schriften/BricolageGrotesque.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("schriften/Lora.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinte: #0f172a;
  --tinte-hell: #1e293b;
  --grau: #64748b;
  --nacht: #020617;
  --papier: #faf7f2;
  --weiss: #ffffff;
  --bernstein: #f5b544;
  --linie: rgba(15, 23, 42, 0.08);
  --linie-kraeftig: rgba(15, 23, 42, 0.16);
  --h2-groesse: clamp(1.9rem, 4vw, 2.8rem);

  --schrift: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Bricolage Grotesque", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --schrift-marke: "Lora", Georgia, "Times New Roman", serif;

  --breite: 1280px;
  --rand: 32px;
  --abstand: clamp(56px, 9vw, 112px);
  --rund: 16px;

  --schatten-knopf: 0 8px 20px -12px rgba(15, 23, 42, 0.45);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 73px;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

a:focus-visible,
.knopf:focus-visible {
  outline: 3px solid var(--bernstein);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--schrift-titel);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  font-weight: 500;
  line-height: 0.98;
  margin-bottom: 24px;
}

h2 {
  font-size: var(--h2-groesse);
  font-weight: 500;
}

h3 {
  font-size: 1.3rem;
  font-weight: 500;
}

p {
  margin: 0 0 1em;
}

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(250, 247, 242, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

@supports (animation-timeline: scroll()) {
  .kopf {
    animation: kopf-mit-grund linear both;
    animation-timeline: scroll();
    animation-range: 0 24px;
  }
}

@keyframes kopf-mit-grund {
  from {
    background-color: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.kopf .innen {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}

.marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-decoration: none;
}

.marke-produkt {
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--tinte);
}

.marke-herkunft {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1;
}

.marke-von {
  font-weight: 500;
  color: var(--grau);
}

.marke-name {
  position: relative;
  font-family: var(--schrift-marke);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
  padding-right: calc(0.795em + 0.17em);
}

.marke-punkt {
  color: #d4af6e;
}

.marke-ai {
  position: absolute;
  top: -0.231em;
  right: 0;
  font-size: 0.65em;
  font-weight: 600;
  color: #d4af6e;
}

.kopf .marke-name {
  font-size: 11.5px;
  letter-spacing: 0.5px;
}

.navigation {
  display: flex;
  gap: 2px;
  margin: 0 auto;
  padding: 4px;
  background: var(--weiss);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  font-size: 14px;
  font-weight: 600;
}

.navigation a {
  padding: 7px 15px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--tinte);
  transition: color 0.2s, background-color 0.2s;
}

.navigation a:hover {
  background: rgba(15, 23, 42, 0.05);
}

.navigation a[aria-current] {
  background: var(--tinte);
  color: var(--papier);
}

.navigation .nav-hervor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.navigation .nav-hervor:not([aria-current]) {
  background: rgba(245, 181, 68, 0.18);
}

.navigation .nav-hervor:not([aria-current]):hover {
  background: rgba(245, 181, 68, 0.3);
}

.nav-funke {
  display: inline-flex;
  color: #d99a1e;
}

.navigation .nav-hervor[aria-current] .nav-funke {
  color: var(--bernstein);
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

.knopf-bernstein {
  background: var(--bernstein);
  color: var(--tinte);
}

.knopf-dunkel {
  background: var(--tinte);
  color: var(--papier);
}

.knopf-bernstein,
.knopf-dunkel {
  box-shadow: var(--schatten-knopf);
  transition: transform 0.2s;
}

.knopf-bernstein:hover,
.knopf-dunkel:hover {
  transform: translateY(-1px);
}

.knopf-bernstein:active,
.knopf-dunkel:active {
  transform: none;
}

.knopf-rand {
  border-color: var(--linie-kraeftig);
  color: var(--tinte);
}

.knopf-punkt {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bernstein);
  color: var(--tinte);
  display: inline-grid;
  place-items: center;
  font-size: 0.8rem;
}

.kopf .knopf {
  gap: 8px;
  padding: 6px 16px 6px 12px;
  font-size: 14px;
  font-weight: 500;
}

.kopf .knopf-punkt {
  width: 28px;
  height: 28px;
}

.kopf .knopf-text {
  line-height: 1.15;
}

.menue-knopf {
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 50%;
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.menue-knopf:focus-visible {
  outline: 3px solid var(--bernstein);
  outline-offset: 3px;
}

.menue-kreuz,
.kopf.menue-offen .menue-striche {
  display: none;
}

.kopf.menue-offen .menue-kreuz {
  display: block;
}

.kopf.menue-offen .menue-knopf {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}

.eroeffnung {
  --zeile: 56px;
  --randlinie: rgba(245, 181, 68, 0.17);
  padding: 56px 0 var(--abstand);
  background-image:
    linear-gradient(to left, transparent calc(var(--zeile) - 1px), var(--randlinie) calc(var(--zeile) - 1px)
      calc(var(--zeile) + 1px), transparent calc(var(--zeile) + 1px)),
    linear-gradient(to bottom, transparent calc(var(--zeile) - 1px), rgba(15, 23, 42, 0.042) calc(var(--zeile) - 1px)),
    radial-gradient(80% 60% at 80% 0, rgba(30, 41, 59, 0.14), transparent 60%),
    radial-gradient(60% 50% at 0 100%, rgba(245, 181, 68, 0.14), transparent 65%),
    radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent 70%);
  background-size: 100% 100%, 100% var(--zeile), 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
}

.eroeffnung .innen {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.augenbraue {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 6px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: var(--weiss);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: rgba(15, 23, 42, 0.7);
}

.augenbraue svg {
  flex: none;
  color: #e89a1a;
}

.geschwungen {
  position: relative;
  display: inline-block;
}

.geschwungen > span {
  position: relative;
  z-index: 1;
  font-style: italic;
  font-weight: 300;
}

.geschwungen svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  width: 100%;
  height: 12px;
  color: var(--bernstein);
}

.geschwungen path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.geschwungen.klein svg {
  bottom: -5px;
  height: 8px;
}

.geschwungen.klein path {
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.vorteile {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 16px 32px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.375;
  color: rgba(15, 23, 42, 0.8);
}

.vorteile li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vorteil-zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(245, 181, 68, 0.15);
  color: #9c5f0b;
}

.abschnitt {
  padding: var(--abstand) 0;
}

.abschnitt.hell {
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.abschnitt.dunkel {
  background: var(--tinte);
  color: var(--papier);
}

.kopfzeile {
  max-width: 40em;
  margin-bottom: 40px;
}

.kopfzeile h2:has(+ p) {
  margin-bottom: 10px;
}

.kopfzeile h2:has(.geschwungen):has(+ p) {
  margin-bottom: 20px;
}

.kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 12px;
}

.kicker-funke {
  display: flex;
  align-items: center;
  gap: 7px;
}

.kicker-funke .funke {
  display: inline-flex;
  color: var(--bernstein);
}

.abschnitt.dunkel .kicker {
  color: var(--bernstein);
}

.abschnitt.dunkel p {
  color: #cbd5e1;
}

.eroeffnung .innen {
  align-items: start;
}

.vorfuehrung {
  --geraet-breite: 320px;
  --geraet-hoehe: 574px;
  --briefing-links: 0px;
  display: grid;
  gap: 2px;
  width: 100%;
}

.vorfuehrung-flaeche {
  position: relative;
  height: var(--geraet-hoehe);
}

.geraet {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: calc(var(--briefing-links) + (100% - var(--briefing-links) - var(--geraet-breite)) / 2);
  width: var(--geraet-breite);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 14px 16px 12px;
  background: var(--tinte);
  color: var(--papier);
  border-radius: 42px;
  box-shadow: inset 0 0 0 2px rgba(250, 247, 242, 0.1), 0 30px 60px -30px rgba(15, 23, 42, 0.55);
  transform-origin: 50% 0;
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.24, 1), filter 0.6s;
}

.geraet-status {
  display: flex;
  justify-content: flex-end;
  height: 16px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: rgba(250, 247, 242, 0.85);
}

.vorfuehrung-briefing {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--briefing-links);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 20px 20px;
  background: var(--weiss);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 28px;
  box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.45);
  scrollbar-width: thin;
  transform-origin: 50% 0;
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.24, 1), filter 0.6s, box-shadow 0.6s;
}

.vorfuehrung-briefing:focus-visible {
  outline: 3px solid var(--bernstein);
  outline-offset: 2px;
}

.vorfuehrung-mail {
  width: 560px;
  transform: scale(var(--briefing-massstab, 0.68));
  transform-origin: top left;
  transition: filter 0.3s, opacity 0.3s;
}

.vorfuehrung[data-ansicht="gespraech"] .vorfuehrung-briefing,
.vorfuehrung[data-ansicht="briefing"] .geraet {
  transform: translateY(-28px) scale(0.92);
}

.vorfuehrung.bereit[data-ansicht="gespraech"] .vorfuehrung-briefing,
.vorfuehrung.bereit[data-ansicht="briefing"] .geraet {
  cursor: pointer;
}

.vorfuehrung[data-ansicht="gespraech"] .vorfuehrung-briefing {
  overflow: hidden;
}

.vorfuehrung[data-ansicht="gespraech"] .vorfuehrung-briefing *,
.vorfuehrung[data-ansicht="briefing"] .geraet * {
  pointer-events: none;
}

.vorfuehrung[data-ansicht="gespraech"] .vorfuehrung-mail {
  filter: blur(2.5px);
  opacity: 0.45;
}

.vorfuehrung[data-ansicht="briefing"] .vorfuehrung-briefing {
  z-index: 3;
}

.vorfuehrung[data-ansicht="briefing"] .geraet {
  filter: brightness(0.9);
}

.vorfuehrung[data-ansicht="briefing"] .geraet:hover {
  filter: brightness(1.05);
}

.vorfuehrung[data-ansicht="gespraech"] .vorfuehrung-briefing:hover {
  filter: brightness(1.03);
  box-shadow: 0 34px 64px -28px rgba(15, 23, 42, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .geraet,
  .vorfuehrung-briefing,
  .vorfuehrung-mail,
  .vorfuehrung-unten {
    transition: none;
  }
}

.vorfuehrung-unten {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px 16px;
  margin-left: var(--briefing-links);
  padding-inline: calc(4% - 0.04 * var(--briefing-links));
  transition: padding 0.6s cubic-bezier(0.22, 0.9, 0.24, 1);
}

.vorfuehrung[data-ansicht="briefing"] .vorfuehrung-unten {
  padding-inline: 0;
}

@media (max-width: 640px), (min-width: 901px) and (max-width: 1099px) {
  .vorfuehrung-unten {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vorfuehrung-unten .vorfuehrung-stern,
  .vorfuehrung-unten .ebenen-wechsel {
    grid-column: 1;
  }

  .vorfuehrung-unten .ebenen-wechsel {
    margin-top: 0;
  }
}

.ebenen-wechsel {
  display: none;
  place-items: center;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--bernstein);
  color: var(--tinte);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  grid-column: 3;
  justify-self: end;
  margin-top: 12px;
  box-shadow: var(--schatten-knopf);
  transition: translate 0.2s;
}

.vorfuehrung.bereit .ebenen-wechsel {
  display: inline-grid;
  animation: schweben 4s ease-in-out infinite;
}

@keyframes schweben {
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .vorfuehrung.bereit .ebenen-wechsel { animation: none; }
}

.ebenen-wechsel > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ebenen-wechsel svg {
  flex: none;
}

.ebenen-wechsel:hover {
  filter: brightness(0.95);
  translate: 0 -1px;
}

.ebenen-wechsel:active {
  translate: none;
}

.ebenen-wechsel:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 2px;
}

.vorfuehrung[data-ansicht="gespraech"] .wechsel-zum-gespraech,
.vorfuehrung[data-ansicht="briefing"] .wechsel-zum-briefing {
  visibility: hidden;
}

.vorfuehrung-stern {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--grau);
  text-align: center;
  grid-column: 2;
  justify-self: center;
  align-self: start;
}

.vorfuehrung[data-ansicht="gespraech"] .stern-briefing,
.vorfuehrung[data-ansicht="briefing"] .stern-gespraech {
  display: none;
}

.geraet-kopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.12);
  margin-bottom: 16px;
}

.geraet-kopf::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--fortschritt, 0%);
  height: 2px;
  border-radius: 1px;
  background: var(--bernstein);
  transition: width var(--balken-dauer, 0ms) linear;
}

.geraet-kopf .avatar {
  flex: none;
  width: 36px;
  height: 36px;
}

.geraet-kopf > div strong,
.geraet-kopf > div span {
  display: block;
  line-height: 18px;
}

.geraet-kopf strong {
  font-size: 0.95rem;
}

.geraet-kopf span {
  font-size: 0.78rem;
  color: #94a3b8;
}

.chat {
  display: grid;
  align-content: start;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.chat::-webkit-scrollbar {
  display: none;
}

.chat:focus-visible {
  outline: 2px solid var(--bernstein);
  outline-offset: 4px;
  border-radius: 8px;
}

.chat.oben-mehr {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px);
  mask-image: linear-gradient(to bottom, transparent, #000 22px);
}

.chat.laeuft .blase:not(.da) {
  display: none;
}

.blase.neu {
  animation: blase-rein 0.45s ease-out both;
}

@keyframes blase-rein {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

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

.blase {
  margin: 0;
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 88%;
}

.blase.mandant {
  background: var(--bernstein);
  color: var(--tinte);
  justify-self: end;
  border-bottom-right-radius: 4px;
}

.blase.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.blase.status svg {
  flex: none;
}

.blase.ki {
  background: rgba(250, 247, 242, 0.1);
  color: var(--papier);
  border-bottom-left-radius: 4px;
}

.geraet-fuss {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(250, 247, 242, 0.12);
  font-size: 0.8rem;
  color: #94a3b8;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.puls {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bernstein);
  animation: puls 1.6s ease-in-out infinite;
}

@keyframes puls {
  50% { opacity: 0.25; }
}

.fuss-eingang {
  display: none;
  flex: none;
  color: var(--bernstein);
}

.geraet-fuss.fertig .puls {
  display: none;
}

.geraet-fuss.fertig .fuss-eingang {
  display: block;
}

.geraet-fuss.fertig .fuss-text {
  color: var(--bernstein);
}

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

#loesung {
  padding: 64px 0;
}

#loesung .innen {
  container-type: inline-size;
}

.kreislauf {
  --luecke: 14px;
  --halb: calc((100cqw - 2 * var(--luecke)) / 3 * 0.39);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, var(--halb));
  grid-template-areas:
    "tl n tr"
    "w  n e"
    "w  s e"
    "bl s br";
  gap: var(--luecke);
}

.kreislauf-kopf {
  grid-area: tl;
  align-self: start;
}

.kreislauf-kopf h2 {
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  margin-bottom: 8px;
}

.kreislauf-kopf .unterzeile {
  font-size: 1.05rem;
  padding-right: 56px;
}

.kreislauf-hinweis {
  grid-area: tr;
  justify-self: center;
  align-self: start;
  max-width: 21em;
  margin: 0;
  padding-top: calc(0.8rem * 1.6 + 12px);
  font-size: 0.9rem;
  color: var(--grau);
  text-align: center;
}

.hinweis-gross {
  display: block;
  font-size: 1.05rem;
  color: var(--tinte);
}

.kreislauf-hinweis[hidden] {
  display: none;
}

.hinweis-aktion {
  margin: 0 -4px;
  padding: 0 4px;
  border-radius: 2px;
  background: linear-gradient(transparent 52%, color-mix(in srgb, var(--bernstein) 50%, transparent) 52% 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-weight: 600;
  color: var(--tinte);
}

.station[data-station="1"] { grid-area: n; }
.station[data-station="2"] { grid-area: e; }
.station[data-station="3"] { grid-area: s; }
.station[data-station="4"] { grid-area: w; }

.station {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.station .fassung {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 14px;
}

.fassung.standard {
  background: #eeeae3;
  border: 1px solid rgba(15, 23, 42, 0.2);
  padding: 10px;
}

.fassung.standard h3 {
  color: var(--tinte-hell);
}

.fassung.standard .station-bild {
  filter: url(#schleier);
}

.fassung.podschi {
  background: var(--weiss);
  border: 2px solid var(--bernstein);
  padding: 9px;
}

.station-nr {
  position: absolute;
  top: -11px;
  right: 12px;
  z-index: 4;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #94a3b8;
  color: var(--weiss);
  font-size: 0.78rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.station[data-seite="standard"] .station-nr.standard,
.station[data-seite="podschi"] .station-nr.podschi {
  z-index: 5;
}

.station-nr.podschi {
  background: var(--tinte);
  color: var(--bernstein);
}

.station-marke {
  position: absolute;
  top: -11px;
  right: 42px;
  z-index: 4;
}

.station-marke,
.lauf-marke {
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--tinte);
  color: var(--bernstein);
  font-family: var(--schrift-marke);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 24px;
}

.kreislauf:not(.bereit) .station-marke,
.kreislauf:not(.bereit) .station[data-seite="standard"] .fassung.podschi,
.kreislauf:not(.bereit) .station[data-seite="podschi"] .fassung.standard {
  visibility: hidden;
}

.station[data-seite="standard"] .fassung.standard,
.station[data-seite="podschi"] .fassung.podschi {
  z-index: 2;
}

.kreislauf.bereit .station {
  cursor: pointer;
}

.kreislauf.bereit .station:focus-visible {
  outline: 2px solid var(--bernstein);
  outline-offset: 3px;
}

.klappe {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  pointer-events: none;
  filter: drop-shadow(-1px -1px 2px rgba(15, 23, 42, 0.15));
}

.klappe path {
  fill: #d9d3c8;
  stroke: rgba(15, 23, 42, 0.12);
  stroke-width: 1;
  stroke-linejoin: round;
}

.station[data-seite="podschi"] .klappe path {
  fill: #ebe7df;
}

.station h3 {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.25;
}

.station p {
  margin: 2px 0 0;
  padding-right: 44px;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--grau);
}

.station-bild {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 901px) {
  .kreislauf.angeglichen .station-bild {
    max-height: var(--bild-hoehe);
    margin-block: auto;
  }
}

.bildflaeche {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 14px 18px 0;
  border-radius: 8px;
  background: rgba(245, 181, 68, 0.07);
}

.briefing-rahmen {
  min-height: calc(100% + 24px);
  background: var(--weiss);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 8px;
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.3);
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.2;
}

.briefing {
  overflow: hidden;
}

.briefing-mail {
  width: 680px;
  box-sizing: border-box;
  padding: 14px 18px;
  background: var(--weiss);
  transform: scale(var(--briefing-massstab, 0.49));
  transform-origin: top left;
}

.bild-lupe {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.lupe {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--grau);
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s;
}

.lupe[hidden] {
  display: none;
}

.lupe:hover,
.lupe:focus-visible {
  opacity: 1;
  background: var(--weiss);
}

.lupe svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.vergroessert {
  width: min(780px, 92vw);
  max-height: 88vh;
  padding: 26px 30px;
  border: 0;
  border-radius: 14px;
  background: var(--weiss);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.6);
  overflow: auto;
}

.vergroessert::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.vergroessert-inhalt img {
  display: block;
  width: 100%;
  height: auto;
}

.vergroessert-inhalt.verkleinert {
  clear: both;
  padding-top: 10px;
  box-sizing: content-box;
}

.vergroessert-inhalt.verkleinert > div {
  width: var(--satzbreite);
  transform: scale(var(--massstab));
  transform-origin: top left;
}

.vergroessert:focus {
  outline: none;
}

.vergroessert .schliessen {
  position: sticky;
  top: 0;
  float: right;
  width: 34px;
  height: 34px;
  margin: 0 -14px 0 12px;
  border: 0;
  border-radius: 50%;
  background: #eeeae3;
  color: var(--tinte);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.vergroessert-marke {
  position: sticky;
  top: 0;
  float: right;
  height: 34px;
  margin: 0 0 0 12px;
  padding: 0 14px;
  border-radius: 17px;
  background: #eeeae3;
  color: var(--tinte);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 34px;
  white-space: nowrap;
}

.vergroessert-marke[hidden] {
  display: none;
}

.kreis-pfeil {
  width: 56px;
  height: 56px;
  color: var(--grau);
  transition: color 0.4s;
}

.kreis-pfeil path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.kreis-pfeil.an {
  color: var(--bernstein);
}

.kreis-pfeil[data-ecke="tr"] { grid-area: tr; align-self: end; justify-self: start; }
.kreis-pfeil[data-ecke="br"] { grid-area: br; align-self: start; justify-self: start; transform: rotate(90deg); }
.kreis-pfeil[data-ecke="bl"] { grid-area: bl; align-self: start; justify-self: end; transform: rotate(180deg); }
.kreis-pfeil[data-ecke="tl"] { grid-area: tl; align-self: end; justify-self: end; transform: rotate(270deg); }

@media (max-width: 1199px) {
  .kreislauf {
    grid-template-rows: auto auto repeat(4, var(--halb));
    grid-template-areas:
      "kopf     kopf     kopf"
      "hinweis  hinweis  hinweis"
      "tl n tr"
      "w  n e"
      "w  s e"
      "bl s br";
  }

  .kreislauf-kopf {
    grid-area: kopf;
  }

  .kreislauf-kopf .unterzeile {
    padding-right: 0;
  }

  .kreislauf-hinweis {
    padding-top: 0;
    grid-area: hinweis;
    justify-self: start;
    max-width: none;
    margin-bottom: 8px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kreis-pfeil {
    transition: none;
  }
}

.haken {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.haken li {
  position: relative;
  padding-left: 30px;
}

.haken li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bernstein);
  color: var(--tinte);
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 3px;
}

.haken li.zubuchbar::before,
.konditionen-liste li::before {
  content: "";
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-origin: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 2px, 2px 10px;
}

#alltag {
  padding: 64px 0;
}

#alltag .kopfzeile {
  margin-bottom: 20px;
}

.bekannt {
  --verlauf: calc(6px + 18px + 6px + 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: stretch;
}

.bekannt-reihe {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  padding-left: 21px;
  line-height: 18px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
}

.bekannt-karte {
  background: #eeeae3;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
}

.bekannt-karte.loesung {
  position: relative;
  z-index: 1;
  background: var(--weiss);
  border: 2px solid var(--bernstein);
  padding: 17px 19px;
}

.bekannt-karte:not(.loesung) {
  position: relative;
  z-index: 0;
  background: none;
  border-color: transparent;
  padding-bottom: var(--verlauf);
  margin-bottom: calc(-1 * var(--verlauf));
}

.bekannt-karte:not(.loesung)::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: #eeeae3;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 12px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--verlauf) - 96px),
    rgba(0, 0, 0, 0.45) calc(100% - var(--verlauf)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--verlauf) - 96px),
    rgba(0, 0, 0, 0.45) calc(100% - var(--verlauf)), transparent 100%);
}

.bekannt-karte h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.bekannt-karte p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--tinte-hell);
}

.bekannt-karte p + p {
  margin-top: 6px;
}

.bekannt-karte strong {
  font-weight: 600;
}

.bekannt-symbol {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
}

.bekannt-symbol img {
  width: 56px;
  height: auto;
}

.bekannt-symbol.hand {
  justify-self: stretch;
  margin: 0 -12px;
}

.bekannt-symbol.hand img {
  width: 100%;
}

@media (max-width: 900px) {
  .bekannt {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .bekannt-reihe {
    margin-bottom: -4px;
  }

  .bekannt-karte:not(.loesung) {
    padding-bottom: 18px;
    margin-bottom: 0;
  }

  .bekannt-karte:not(.loesung)::before {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bekannt-symbol img {
    width: 44px;
  }

  .bekannt-symbol.hand {
    justify-self: center;
    width: 64px;
    margin: 0;
  }
}

.avatar {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  background: var(--papier);
}

.avatar img,
.avatar .schablone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.avatar .schablone {
  -webkit-mask: var(--schablone) center / cover no-repeat;
  mask: var(--schablone) center / cover no-repeat;
}

.schablone.anzug {
  background: var(--tinte);
}

.schablone.revers {
  background: var(--bernstein);
}

.schablone.akzent {
  background: var(--bernstein);
}

#assistenz {
  overflow: hidden;
  padding: 64px 0;
}

#assistenz .kopfzeile {
  max-width: none;
  margin-bottom: 32px;
}

.unterzeile {
  margin: 0;
  font-size: 1.2rem;
}

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

.assistentin {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: 24px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(250, 247, 242, 0.1);
}

.assistentin h3 {
  margin: 4px 0 0;
  font-size: 1.9rem;
}

.assistentin p {
  margin: 0;
}

.assistentin [data-karte] {
  color: var(--bernstein);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.assistentin [data-karte]:hover {
  text-decoration-thickness: 2px;
}

.laufband.laeuft {
  contain: inline-size;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}

.laufband-spur {
  display: flex;
  width: max-content;
  animation: laufband var(--dauer) linear infinite;
}

.laufband.laeuft .chips {
  flex-wrap: nowrap;
  padding-right: 6px;
}

.laufband.laeuft .chips li {
  white-space: nowrap;
}

.laufband.laeuft:hover .laufband-spur,
.karussell.bereit .assistentin:not([data-lage="mitte"]) .laufband-spur {
  animation-play-state: paused;
}

@keyframes laufband {
  to {
    transform: translateX(-50%);
  }
}

.assistentin .knopf {
  align-self: flex-start;
  margin-top: 8px;
}

.assistentin-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.assistentin-bild {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.assistentin-bild.leer {
  display: grid;
  place-items: center;
  font-family: var(--schrift-marke);
  font-size: 1.7rem;
  color: var(--bernstein);
  background: rgba(250, 247, 242, 0.08);
  border: 1px dashed rgba(250, 247, 242, 0.25);
}

.assistentin-bild.figur {
  overflow: hidden;
  background: linear-gradient(#a3a9b6, #7f8694);
  color: rgba(255, 255, 255, 0.92);
}

.assistentin-bild.figur svg {
  display: block;
  width: 100%;
  height: 100%;
}

.assistentin {
  position: relative;
}

.plan-marke {
  position: absolute;
  top: 76px;
  right: calc(50% - 126px);
  transform: rotate(6deg);
  padding: 7px 14px;
  border-radius: 4px;
  background: var(--bernstein);
  color: var(--tinte);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 8px 16px -8px rgba(2, 6, 23, 0.7);
}

.assistentin-etikett {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  color: var(--bernstein);
}

.assistentin-punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: #e2e8f0;
  font-size: 0.95rem;
}

.assistentin:not(:has(.plan-marke)):not([aria-label="Sonstiges"]) > p {
  font-style: italic;
}

.assistentin-punkte li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.assistentin-punkte li::before {
  content: "✓";
  flex: none;
  color: var(--bernstein);
  font-weight: 700;
}

.assistentin .chips li {
  background: rgba(250, 247, 242, 0.08);
  border-color: rgba(250, 247, 242, 0.18);
  color: var(--papier);
}

.karussell.bereit .karussell-buehne {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: stretch;
}

.assistentin > .knopf {
  margin-top: auto;
}

.karussell.bereit .assistentin {
  grid-area: 1 / 1;
  width: min(440px, 100%);
  background: #1e293b;
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}

.karussell.bereit .assistentin[data-lage="mitte"] {
  z-index: 5;
  border-color: rgba(250, 247, 242, 0.16);
}

.assistentin.gold,
.karussell.bereit .assistentin.gold[data-lage] {
  border: 2px solid var(--bernstein);
}

.assistentin.sonstiges,
.karussell.bereit .assistentin.sonstiges[data-lage] {
  background: #1e293b;
  background-image: linear-gradient(rgba(245, 181, 68, 0.14), rgba(245, 181, 68, 0.14));
  border-color: rgba(245, 181, 68, 0.35);
}

.karussell.bereit .assistentin[data-lage="links"],
.karussell.bereit .assistentin[data-lage="rechts"] {
  z-index: 4;
  filter: blur(1.5px) brightness(0.6);
  cursor: pointer;
}

.karussell.bereit .assistentin[data-lage="links2"],
.karussell.bereit .assistentin[data-lage="rechts2"] {
  z-index: 3;
  filter: blur(3px) brightness(0.4);
  cursor: pointer;
}

.karussell.bereit .assistentin[data-lage="links"] {
  transform: translateX(-62%) scale(0.86);
}

.karussell.bereit .assistentin[data-lage="rechts"] {
  transform: translateX(62%) scale(0.86);
}

.karussell.bereit .assistentin[data-lage="links2"] {
  transform: translateX(-112%) scale(0.72);
}

.karussell.bereit .assistentin[data-lage="rechts2"] {
  transform: translateX(112%) scale(0.72);
}

.karussell.bereit .assistentin[data-lage="weg"] {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
}

.karussell.bereit .karussell-buehne {
  touch-action: pan-y;
}

.karussell-steuerung {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 20px;
}

.karussell-steuerung[hidden] {
  display: none;
}

.karussell-pfeil {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 242, 0.2);
  background: transparent;
  color: var(--papier);
  cursor: pointer;
}

.karussell-pfeil:hover {
  background: rgba(250, 247, 242, 0.08);
}

.auswahl {
  position: relative;
  z-index: 5;
}

.auswahl-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 170px;
  padding: 11px 16px 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(250, 247, 242, 0.2);
  background: transparent;
  color: var(--papier);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.auswahl-knopf:hover,
.auswahl-knopf[aria-expanded="true"] {
  background: rgba(250, 247, 242, 0.08);
}

.auswahl-pfeil {
  color: var(--bernstein);
  transition: transform 0.2s;
}

.auswahl-knopf[aria-expanded="true"] .auswahl-pfeil {
  transform: rotate(180deg);
}

.auswahl-liste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 22px;
  border: 1px solid rgba(250, 247, 242, 0.2);
  background: #1e293b;
  box-shadow: 0 16px 32px -12px rgba(2, 6, 23, 0.7);
}

.auswahl-liste[hidden] {
  display: none;
}

.auswahl-liste li {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--papier);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.auswahl-liste li:hover,
.auswahl-liste li.fokus {
  background: rgba(250, 247, 242, 0.08);
}

.auswahl-liste li[aria-selected="true"] {
  color: var(--bernstein);
}

.auswahl-liste:focus {
  outline: none;
}

.karussell-pfeil:focus-visible,
.auswahl-knopf:focus-visible {
  outline: 3px solid var(--bernstein);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .karussell.bereit .assistentin {
    transition: none;
  }
}

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chips li {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--papier);
  border: 1px solid var(--linie-kraeftig);
}

#rechner {
  padding: 64px 0;
}

.rechner-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 48px;
  margin-bottom: 32px;
}

#rechner .kopfzeile {
  max-width: none;
  margin-bottom: 0;
}

#rechner .kopfzeile h2 {
  text-wrap: balance;
}

.bedienung {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-content: start;
  gap: 12px 24px;
}

.bedienung-kopf {
  grid-column: 1 / -1;
  margin: 0;
}

.bedienung .bedienung-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bedienung .bedienung-kopf svg {
  flex: none;
  color: var(--bernstein);
}

.bedienung .bedienung-kopf::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 4px;
  background: var(--linie-kraeftig);
}

.stufenwahl,
.anfragen-zeile,
.auftritt-zeile {
  display: flex;
  align-items: center;
}

.anfragen-zeile {
  grid-column: 1;
  grid-row: 2;
}

.stufenwahl {
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-end;
}

.auftritt-zeile {
  grid-column: 1 / -1;
  grid-row: 3;
  contain: inline-size;
}

.auftritt-zeile {
  gap: 12px;
}

.auftritt-zeile .auftritt-schalter {
  order: -1;
}

.auftritt-zeile .bedienung-titel {
  padding-right: 0;
}

.stufenwahl-knoepfe,
.anfragen-feld,
.auftritt-schalter {
  flex: none;
}

.stufenwahl[hidden],
.auftritt-zeile[hidden] {
  display: none;
}

.konditionen-liste {
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--grau);
}

.konditionen-liste li::before {
  margin-top: 0;
}

.konditionen-liste strong {
  color: var(--tinte);
  font-weight: 600;
}

.bedienung-titel {
  padding-right: 14px;
  font-size: 0.9rem;
  color: var(--grau);
}

.stufenwahl-knoepfe {
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  padding: 3px;
  background: rgba(245, 181, 68, 0.16);
  border: 1.5px solid transparent;
  border-radius: 999px;
}

.stufenwahl-knoepfe button {
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--grau);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.stufenwahl-knoepfe button:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--tinte);
}

.stufenwahl-knoepfe button[aria-pressed="true"] {
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.stufenwahl-knoepfe button:focus-visible {
  outline: 3px solid var(--bernstein);
  outline-offset: 2px;
}

.anfragen-feld {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(245, 181, 68, 0.16);
  border: 1.5px solid transparent;
  border-radius: 999px;
}

.anfragen-feld:focus-within {
  outline: 3px solid var(--bernstein);
  outline-offset: 2px;
}

.anfragen-schritt {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--weiss);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  color: var(--tinte);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.anfragen-schritt:hover {
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.3);
}

.anfragen-schritt[hidden] {
  display: none;
}

.anfragen-feld input {
  width: 2.8em;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinte);
  caret-color: var(--bernstein);
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
}

.anfragen-feld input:focus {
  outline: none;
}

.auftritt-zeile label {
  cursor: pointer;
}

.bedienung-zusatz {
  display: block;
  font-size: 0.75rem;
  line-height: 1.25;
  text-wrap: balance;
}

.aktion-stufe {
  display: block;
}

.aktion-stufe.jetzt {
  color: var(--tinte);
  font-weight: 600;
}

.aktion-stufe.vorbei {
  text-decoration: line-through;
}

.auftritt-schalter {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  justify-self: start;
  width: 58px;
  height: 32px;
  margin: 0;
  background: rgba(15, 23, 42, 0.12);
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.auftritt-schalter::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--weiss);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
  transition: transform 0.2s, background-color 0.2s;
}

.auftritt-schalter:not(:checked):hover {
  background: rgba(15, 23, 42, 0.18);
}

.auftritt-schalter:checked {
  background: rgba(245, 181, 68, 0.16);
}

.auftritt-schalter:checked:hover {
  background: rgba(245, 181, 68, 0.28);
}

.auftritt-schalter:checked::before {
  transform: translateX(26px);
}

.auftritt-schalter:focus-visible {
  outline: 3px solid var(--bernstein);
  outline-offset: 2px;
}

.lauf {
  --pfeil: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) var(--pfeil) minmax(0, 1fr) var(--pfeil) minmax(0, 1.95fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: stretch;
}

.lauf > * {
  grid-row: 1;
}

.lauf > .lauf-karte.kanzlei {
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: subgrid;
}

.lauf > .lauf-weiter {
  position: relative;
  grid-column: 5;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  display: flex;
  align-items: center;
  margin: 32px 0 0;
}

.lauf-weiter > span {
  position: absolute;
  top: 50%;
  right: calc(100% + 20px);
  transform: translateY(-50%);
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--tinte);
  white-space: nowrap;
}

.lauf-weiter .knopf {
  white-space: nowrap;
}

.lauf-weiter .knopf,
.preise-weiter .knopf {
  min-width: 10.8em;
  justify-content: center;
}

@media (min-width: 901px) {
  .lauf.versetzt > .lauf-karte.amortisation,
  .lauf.versetzt > .lauf-karte.ersparnis {
    transform: translateY(var(--versatz));
  }

  .lauf.versetzt {
    position: relative;
    z-index: 0;
  }

  .lauf.versetzt > .lauf-zeichen {
    visibility: hidden;
  }

  .lauf.versetzt > .lauf-linien {
    display: block;
  }
}

.lauf-linien {
  display: none;
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lauf-linien .grund {
  stroke: var(--bernstein);
}

.lauf-linien .licht {
  stroke: #fff4d6;
  stroke-dasharray: 10 26;
  animation: lauflicht 1.2s linear infinite;
}

@keyframes lauflicht {
  from {
    stroke-dashoffset: 36;
  }

  to {
    stroke-dashoffset: 0;
  }
}

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

.lauf-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #eeeae3;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 12px;
}

.lauf-karte h4 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
}

.lauf-heute,
.lauf-mit {
  display: grid;
  gap: 2px;
}

.lauf-karte.kanzlei {
  --verlauf: 14px;
  --verblassen: 140px;
  gap: 0;
  padding: 0;
  background: none;
  border: 0;
}

.lauf-mit {
  --vor-linie: 12px;
  position: relative;
  z-index: 1;
  grid-template-rows: auto auto auto 1fr;
  padding: 12px 14px 7px;
  background: var(--weiss);
  border: 2px solid var(--bernstein);
  border-radius: 12px;
}

.lauf-heute {
  position: relative;
  z-index: 0;
  align-self: start;
  padding: 14px 16px var(--verlauf);
}

.lauf-heute::before {
  content: "";
  position: absolute;
  inset: -40px 0 0;
  z-index: -1;
  background: #eeeae3;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 12px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--verlauf) - var(--verblassen)),
    rgba(0, 0, 0, 0.45) calc(100% - var(--verlauf)), rgba(0, 0, 0, 0.25) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--verlauf) - var(--verblassen)),
    rgba(0, 0, 0, 0.45) calc(100% - var(--verlauf)), rgba(0, 0, 0, 0.25) 100%);
}

.lauf-heute-inhalt {
  display: grid;
  gap: 2px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--verblassen)), rgba(0, 0, 0, 0.45) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--verblassen)), rgba(0, 0, 0, 0.45) 100%);
}

.lauf-mit h4,
.lauf-heute h4 {
  margin-bottom: 6px;
}

.lauf-marke {
  display: inline-block;
  margin-left: 2px;
  vertical-align: middle;
}

.lauf-schritte {
  display: grid;
  gap: 4px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--tinte-hell);
}

.lauf-schritte li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lauf-schritte svg {
  flex: none;
  color: var(--grau);
}

.lauf-mit .lauf-schritte svg {
  color: var(--bernstein);
}

.lauf-wer {
  font-family: var(--schrift-titel);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.06;
  color: inherit;
  align-self: end;
}

.lauf-werte {
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--tinte-hell);
}

.lauf-werte strong {
  font-size: 1.14em;
  font-weight: 600;
  color: var(--tinte);
  white-space: nowrap;
}

.lauf-zeichen {
  display: flex;
  align-self: center;
  justify-self: center;
  color: var(--bernstein);
}

.lauf-fuss {
  font-size: 0.78rem;
  color: var(--grau);
}

.lauf-stern {
  margin-top: auto;
  padding-top: calc(var(--vor-linie, 6px) + 1px + 7px);
  background: linear-gradient(var(--linie-kraeftig), var(--linie-kraeftig)) 0 var(--vor-linie, 6px) / 100% 1px
    no-repeat;
  font-size: 0.7rem;
  line-height: normal;
  color: var(--grau);
  text-align: right;
}

.mit-stern {
  position: relative;
}

.lauf-ersparnis-wert.mit-stern {
  justify-self: center;
}

.mit-stern::after {
  content: "*";
  position: absolute;
  top: 0;
  left: calc(100% + 1px);
  font-size: 0.6em;
  font-weight: 500;
  line-height: 1;
}

.lauf-karte.ersparnis {
  --vor-linie: 6px;
  justify-content: center;
  padding-bottom: 7px;
  background: linear-gradient(rgba(245, 181, 68, 0.16), rgba(245, 181, 68, 0.16)), var(--weiss);
  border: 2px solid var(--bernstein);
}

.ersparnis-spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 2px;
}

.ersparnis-spalten > div {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 2px;
  justify-items: center;
  min-width: 0;
  padding: 0 6px;
  text-align: center;
}

.ersparnis-spalten > div + div {
  border-left: 1px solid var(--linie-kraeftig);
}

@media (min-width: 901px) {
  .ersparnis-spalten {
    flex: 1;
    grid-template-rows: auto 1fr auto auto 1fr;
  }

  .ersparnis-spalten > div {
    grid-row: span 5;
  }

  .ersparnis-spalten > div > :nth-child(2) {
    grid-row: 3;
    margin-top: 12px;
  }

  .ersparnis-spalten > div > :nth-child(3) {
    grid-row: 4;
  }
}

.lauf-karte.amortisation {
  gap: 2px;
  background: var(--tinte);
  border-width: 2px;
  border-color: var(--tinte);
  color: var(--papier);
}

.lauf-karte.amortisation h4 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.25em;
  height: 1.2em;
  margin-block: -0.07em;
  overflow: hidden;
}

.lauf-karte.amortisation .lauf-ersparnis-wert {
  color: var(--bernstein);
  white-space: normal;
}

.lauf-tag-zahl {
  font-size: 2em;
  line-height: 1;
}

.lauf-karte.amortisation .lauf-ersparnis-wert:has(.lauf-tag-zahl) {
  margin-top: 0.5em;
}

.lauf-karte.amortisation .lauf-fuss {
  margin-top: 6px;
  color: #cbd5e1;
  text-wrap: balance;
}

.amortisation-wechsel {
  display: grid;
}

.amortisation-wechsel > div {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.amortisation-wechsel > [hidden] {
  display: flex;
  visibility: hidden;
}

.lauf-ersparnis-wert {
  font-family: var(--schrift-titel);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

.info-knopf {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  vertical-align: 1px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--grau);
  cursor: pointer;
  transition: color 0.2s;
}

.info-knopf::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.info-knopf:hover {
  color: var(--tinte);
}

.info-knopf:focus-visible {
  outline: 3px solid var(--bernstein);
  outline-offset: 2px;
}

.info-fenster {
  width: min(640px, 92vw);
}

.info-fenster[open] {
  animation: aufgehen 0.22s ease-out;
}

@keyframes aufgehen {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

.info-fenster h4 {
  margin: 20px 0 6px;
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
  font-weight: 500;
}

.info-fenster p {
  margin: 0 0 0.6em;
}

.info-quellen {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
}

.info-quellen li + li {
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .info-fenster[open] {
    animation: none;
  }
}

@media (max-width: 1239px) {
  .rechner-kopf {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .bedienung-blase {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .bedienung-blase {
    justify-self: stretch;
  }

  .bedienung {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 24px;
  }

  .stufenwahl,
  .anfragen-zeile,
  .auftritt-zeile {
    display: contents;
  }

  .auftritt-zeile {
    display: flex;
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: space-between;
    gap: 24px;
  }

  .auftritt-zeile .auftritt-schalter {
    order: 0;
  }

  .bedienung-titel {
    padding-right: 0;
  }

  .stufenwahl-knoepfe,
  .anfragen-feld,
  .auftritt-schalter {
    justify-self: end;
  }

  .lauf {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 4px;
  }

  .lauf > *,
  .lauf > .lauf-karte.kanzlei {
    grid-row: auto;
  }

  .lauf > .lauf-weiter {
    grid-column: auto;
    grid-row: auto;
    justify-self: center;
    flex-direction: column;
    gap: 12px;
    margin: 28px 0 8px;
    text-align: center;
  }

  .lauf-weiter > span {
    position: static;
    transform: none;
    white-space: normal;
  }

  .lauf > .lauf-karte.kanzlei {
    grid-template-rows: none;
  }

}

@media (max-width: 639px) {
  .ersparnis-spalten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ersparnis-spalten > div:first-child {
    grid-column: 1 / -1;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linie-kraeftig);
  }

  .ersparnis-spalten > div:nth-child(2) {
    border-left: 0;
  }
}

.stufen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
}

.stufe {
  --karte-rand: 32px;
  position: relative;
  grid-row: span 9;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 32px var(--karte-rand);
  border-radius: 24px;
  background: var(--weiss);
  border: 1px solid var(--linie);
}

.stufe.kern {
  background: var(--tinte);
  color: var(--papier);
  border-color: var(--tinte);
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.5);
}

.stufe-marke {
  position: absolute;
  top: 0;
  right: 32px;
  transform: translateY(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bernstein);
  color: var(--tinte);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stufe-name {
  margin: 0;
  font-size: 1.6rem;
}

.stufe p {
  margin: 0;
}

.stufe .stufe-kurz {
  margin-top: 8px;
  color: rgba(15, 23, 42, 0.65);
  font-size: 0.84375rem;
  line-height: 1.375;
}

.stufe.kern .stufe-kurz {
  color: rgba(250, 247, 242, 0.7);
}

.stufe.kern .stufe-zusatz {
  color: #cbd5e1;
}

.stufe .stufe-preis {
  margin-top: 18px;
  font-family: var(--schrift-titel);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.1;
}

.stufe-preis small {
  font-family: var(--schrift);
  font-size: 0.95rem;
  font-weight: 400;
}

.stufe-inklusive {
  display: block;
  margin-top: 8px;
  font-family: var(--schrift);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--grau);
  text-wrap: balance;
}

.stufe-inklusive strong {
  font-weight: 600;
  color: var(--tinte);
}

.stufe.kern .stufe-inklusive {
  color: #cbd5e1;
}

.stufe.kern .stufe-inklusive strong {
  color: var(--papier);
}

.stufe-zusaetze {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
  display: grid;
  align-content: start;
  gap: 8px;
}

.stufe.kern .stufe-zusaetze {
  border-top-color: rgba(250, 247, 242, 0.14);
}

.stufe-zusatz {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 0.88rem;
  color: var(--grau);
}

.stufe-zusatz dt {
  white-space: nowrap;
}

.stufe-zusatz dd {
  margin: 0 0 0 auto;
  font-weight: 600;
  color: var(--tinte);
  white-space: nowrap;
}

.stufe.kern .stufe-zusatz dd {
  color: var(--papier);
}

@media (min-width: 901px) and (max-width: 1099px) {
  .stufe {
    --karte-rand: 24px;
    padding: 28px var(--karte-rand);
  }

  .stufe .stufe-preis {
    font-size: 2.1rem;
  }

  .stufe-inklusive {
    font-size: 0.88rem;
  }
}

.stufe-zusatz strong {
  font-weight: 700;
}

.stufe-knopf {
  grid-row: 5;
  margin-top: 22px;
  justify-content: center;
}

.stufe-mehr {
  grid-row: 6 / span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin: 22px calc(-1 * var(--karte-rand)) 0;
  padding: 18px var(--karte-rand) 0;
  border-top: 1px solid var(--linie);
}

.stufe-gruppe {
  display: grid;
  align-content: start;
  gap: 10px;
}

.stufe-gruppe-titel {
  margin: 0;
  font-family: var(--schrift);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
}

.stufe.kern .stufe-gruppe-titel {
  color: #94a3b8;
}

.stufe-gruppe + .stufe-gruppe {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
}

.stufe.kern .stufe-mehr,
.stufe.kern .stufe-gruppe + .stufe-gruppe {
  border-top-color: rgba(250, 247, 242, 0.14);
}

.stufe-mehr .haken {
  font-size: 0.95rem;
}

.stufe-mehr .haken strong {
  font-weight: 600;
}

.haken .haken {
  margin-top: 10px;
}

.haken li.ohne {
  color: var(--grau);
}

.haken li.ohne::before {
  content: "✕";
  background: transparent;
  border: 1px solid var(--linie-kraeftig);
  color: var(--grau);
  font-size: 0.65rem;
}

.stufe.kern .haken li.ohne {
  color: #94a3b8;
}

.stufe.kern .haken li.ohne::before {
  border-color: rgba(250, 247, 242, 0.24);
  color: #94a3b8;
}

.haken li.zubuchbar::before {
  background-color: transparent;
  background-size: 8px 1.5px, 1.5px 8px;
  border: 1.5px solid var(--bernstein);
  color: var(--bernstein);
}

.stufen.zu .stufe-gruppe + .stufe-gruppe,
.stufen.zu .stufe-gruppe > :not(.haken, .stufe-gruppe-titel),
.stufen.zu .stufe-gruppe li:not(:first-child) {
  display: none;
}

.stufen.zu .stufe-gruppe .haken {
  max-height: 1.5em;
  overflow: hidden;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent);
  mask-image: linear-gradient(to bottom, #000 25%, transparent);
}

.stufen-rahmen {
  --schalter-hoehe: 46px;
  position: relative;
}

.stufen-rahmen:has(.stufen-schalter:not([hidden]))::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  bottom: calc(var(--schalter-hoehe) / 2);
  border: 1px solid var(--linie);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  pointer-events: none;
}

.stufen.zu .stufe:not(:first-child) {
  border-bottom-left-radius: 0;
}

.stufen.zu .stufe:not(:last-child) {
  border-bottom-right-radius: 0;
}

.stufen-schalter-zeile {
  position: relative;
  margin-top: calc(var(--schalter-hoehe) / -2);
  text-align: center;
}

.stufen-schalter {
  height: var(--schalter-hoehe);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--weiss);
  cursor: pointer;
  font-family: inherit;
}

.stufen-schalter[hidden] {
  display: none;
}

.stufen-schalter:hover {
  border-color: var(--tinte);
}

.stufen-schalter svg {
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.stufen-schalter[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.stufen-fuss {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--grau);
  text-align: center;
}

.konditionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 24px;
  width: fit-content;
  margin: 28px auto 0;
  padding: 10px 14px 10px 10px;
  border-radius: 26px;
  background: rgba(245, 181, 68, 0.16);
}

.konditionen .kicker {
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bernstein);
  color: var(--tinte);
  letter-spacing: 0.08em;
}

.konditionen .konditionen-liste {
  color: var(--tinte-hell);
}

.konditionen .konditionen-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}

@media (max-width: 900px) {
  .konditionen,
  .konditionen .konditionen-liste {
    display: grid;
    justify-content: start;
  }

  .konditionen {
    width: auto;
    padding: 14px 16px;
    border-radius: 20px;
  }

  .konditionen .kicker {
    justify-self: start;
  }

  .stufen-fuss {
    text-align: left;
  }
}

.preise-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: 40px;
}

.preise-kopf .kopfzeile {
  margin-bottom: 0;
}

.preise-weiter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  margin: 0 0 calc(0.745 * var(--h2-groesse)) auto;
}

@media (max-width: 939px) {
  .preise-weiter {
    margin-bottom: 0;
  }
}

@media (max-width: 900px) {
  .preise-weiter {
    margin-left: 0;
  }
}

.preise-weiter > .geschwungen {
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--tinte);
}

.faq-kopf {
  max-width: none;
  margin-bottom: 32px;
  text-align: center;
}

.faq-kopf h2 {
  margin-bottom: 0;
}

.faq-liste {
  max-width: 48rem;
  margin: 0 auto;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.faq-liste > * + * {
  border-top: 1px solid var(--linie);
}

.faq-liste summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
}

.faq-liste summary::-webkit-details-marker {
  display: none;
}

.faq-frage {
  font-family: var(--schrift-titel);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
}

.faq-knopf {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.faq-knopf svg {
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-liste summary:hover .faq-knopf {
  border-color: rgba(15, 23, 42, 0.3);
}

.faq-liste details[open] .faq-knopf {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}

.faq-liste details[open] .faq-knopf svg {
  transform: rotate(45deg);
}

.faq-antwort {
  padding: 0 40px 20px 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(15, 23, 42, 0.7);
}

.faq-antwort p {
  margin: 0;
}

.faq-antwort p + p {
  margin-top: 6px;
}

.faq-antwort strong {
  font-weight: 600;
}

.faq-antwort a,
.ueber-uns-verweis {
  color: var(--tinte-hell);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.faq-antwort a:hover,
.ueber-uns-verweis:hover {
  color: var(--tinte);
}

.faq-eigene {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 16px 20px;
  border: 1px solid var(--bernstein);
  border-radius: var(--rund);
  background: var(--papier);
  font-family: var(--schrift-titel);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinte);
  text-decoration: none;
}

.faq-eigene-zeile {
  padding: 16px 0;
}

.faq-pfeil {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bernstein);
}

.faq-pfeil svg {
  transition: transform 0.2s;
}

.faq-eigene:hover .faq-pfeil svg {
  transform: translateX(2px);
}

#kontakt {
  padding: 64px 0;
}

.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  align-items: start;
}

.kontakt-kopf {
  margin-bottom: 0;
}

.kontakt-fragen {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(203, 213, 225, 0.16);
}

.kontakt-fragen h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--papier);
}

.kontakt-fragen p {
  margin: 0;
}

.formular,
.formular-erfolg {
  grid-column: 2;
  grid-row: 1;
  max-width: 36rem;
}

@media (max-width: 900px) {
  .kontakt-raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt-kopf {
    margin-bottom: 40px;
  }

  .formular,
  .formular-erfolg {
    grid-column: 1;
    grid-row: auto;
  }
}

.formular-falle {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.formular-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 901px) and (max-width: 1239px) {
  .formular-auswahl {
    grid-column: 1 / -1;
  }
}

.formular-zeile {
  margin-top: 12px;
}

.formular input,
.formular select,
.formular textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(250, 247, 242, 0.15);
  border-radius: 16px;
  background: rgba(250, 247, 242, 0.06);
  color: var(--papier);
  font: inherit;
  font-size: 14px;
  line-height: 21px;
  transition: border-color 0.15s, background-color 0.15s;
}

.formular input::placeholder,
.formular textarea::placeholder {
  color: rgba(250, 247, 242, 0.7);
  opacity: 1;
}

.formular select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.formular option {
  background: var(--tinte);
  color: var(--papier);
}

.formular textarea {
  resize: none;
}

.nachricht-feld {
  border: 1px solid rgba(250, 247, 242, 0.15);
  border-radius: 16px;
  background: rgba(250, 247, 242, 0.06);
  transition: border-color 0.15s, background-color 0.15s;
}

.nachricht-feld:focus-within {
  border-color: var(--bernstein);
  background: rgba(250, 247, 242, 0.08);
  box-shadow: 0 0 0 2px rgba(245, 181, 68, 0.6);
}

.formular .nachricht-feld textarea,
.formular .nachricht-feld textarea:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.nachricht-hinweis {
  display: block;
  padding: 12px 16px 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--bernstein);
  cursor: text;
}

.nachricht-hinweis[hidden] {
  display: none;
}

.nachricht-hinweis:not([hidden]) + textarea {
  padding-top: 6px;
}

.formular input:focus-visible,
.formular select:focus-visible,
.formular textarea:focus-visible {
  outline: none;
  border-color: var(--bernstein);
  background: rgba(250, 247, 242, 0.08);
  box-shadow: 0 0 0 2px rgba(245, 181, 68, 0.6);
}

.formular [aria-invalid="true"] {
  border-color: rgba(253, 164, 175, 0.6);
}

.formular [aria-invalid="true"]:focus-visible {
  border-color: #fda4af;
  box-shadow: 0 0 0 2px rgba(253, 164, 175, 0.6);
}

.abschnitt.dunkel .feld-fehler {
  margin: 6px 0 0;
  font-size: 12px;
  color: #fda4af;
}

@media (pointer: coarse) {
  .formular input,
  .formular select,
  .formular textarea {
    font-size: 16px;
  }
}

.abschnitt.dunkel .formular-klein {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.375;
  color: rgba(250, 247, 242, 0.75);
}

.formular-klein a {
  color: inherit;
}

.formular-klein a:hover {
  color: var(--papier);
}

.abschnitt.dunkel .formular-fuss {
  text-align: center;
}

.formular-senden {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 16px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--bernstein);
  color: var(--tinte);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: var(--schatten-knopf);
  cursor: pointer;
  transition: transform 0.2s;
}

.formular-senden:hover {
  transform: translateY(-1px);
}

.formular-senden:active {
  transform: none;
}

.formular-senden:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tinte), 0 0 0 4px var(--bernstein);
}

.senden-pfeil {
  transition: transform 0.2s;
}

.formular-senden:hover .senden-pfeil {
  transform: translateX(2px);
}

.senden-kreis {
  display: none;
  order: -1;
  animation: kreiseln 1s linear infinite;
}

.formular-senden:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.formular-senden:disabled .senden-pfeil {
  display: none;
}

.formular-senden:disabled .senden-kreis {
  display: block;
}

@keyframes kreiseln {
  to {
    transform: rotate(360deg);
  }
}

.formular-fehler {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: #fda4af;
}

.formular-fehler[hidden] {
  display: none;
}

.formular-fehler svg {
  flex-shrink: 0;
  margin-top: 3px;
}

.formular-fehler a {
  color: inherit;
}

.formular-fehler a:hover {
  color: #fecdd3;
}

.formular-erfolg {
  padding: 40px 32px;
  border: 1px solid rgba(245, 181, 68, 0.3);
  border-radius: 24px;
  background: rgba(245, 181, 68, 0.1);
  text-align: center;
}

.formular-erfolg[hidden] {
  display: none;
}

.formular-erfolg svg {
  margin: 0 auto;
  color: var(--bernstein);
}

.formular-erfolg h3 {
  margin: 16px 0 0;
  font-size: 22px;
  color: var(--papier);
}

.abschnitt.dunkel .formular-erfolg p {
  margin: 8px 0 0;
  font-size: 15px;
  color: rgba(250, 247, 242, 0.75);
}

@media (max-width: 639px) {
  .formular-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .formular-senden,
  .senden-pfeil {
    transition: none;
  }
}

#ueber-uns {
  padding: 64px 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#ueber-uns::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30%;
  right: -20%;
  z-index: -1;
  background: url("bilder/muenchen.webp") 40% max(calc(102px - 19.35vw), 100%) / cover no-repeat;
  opacity: 0.26;
  -webkit-mask-image: radial-gradient(ellipse 40% 50% at 42% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 40% 50% at 42% 50%, #000 35%, transparent 100%);
  pointer-events: none;
}

@media (max-width: 900px) {
  #ueber-uns::before {
    top: 40%;
    left: 0;
    right: 0;
    background-position: 40% 60%;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 35%, transparent 100%);
  }
}

.ueber-uns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}

.ueber-uns > div {
  flex: 1 1 36em;
  max-width: 44em;
}

.ueber-uns h2 {
  margin-bottom: 10px;
  text-wrap: balance;
}

.ueber-uns p {
  margin: 0;
}

.ueber-uns p + p {
  margin-top: 10px;
}

.ueber-uns strong {
  font-weight: 600;
}

.ueber-uns-verweis {
  white-space: nowrap;
}

.fuss {
  background: var(--nacht);
  color: #cbd5e1;
  padding: 48px 0;
  font-size: 0.9rem;
}

.fuss .innen {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
  align-items: flex-end;
}

.fuss .marke-name {
  color: var(--papier);
}

.fuss p {
  margin-bottom: 0;
}

.fuss a {
  color: #cbd5e1;
  text-decoration: none;
}

.fuss a:hover,
.fuss a:focus-visible {
  text-decoration: underline;
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

@media (max-width: 1279px) {
  .marke-produkt {
    font-size: 19px;
  }
}

@media (max-width: 1199px) {
  .navigation {
    font-size: 13px;
  }

  .navigation a {
    padding: 7px 10px;
  }
}

@media (max-width: 1023px) {
  .navigation {
    display: none;
  }

  .kopf .innen {
    position: relative;
    gap: 10px;
  }

  .menue-knopf:not([hidden]) {
    display: grid;
  }

  .kopf.menue-offen .navigation {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 8px);
    right: var(--rand);
    width: min(240px, calc(100vw - 2 * var(--rand)));
    margin: 0;
    padding: 6px;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    font-size: 16px;
  }

  .kopf.menue-offen .navigation a {
    padding: 10px 16px;
  }

  .eroeffnung {
    padding-top: 48px;
  }

  .kopf .knopf {
    margin-left: auto;
  }
}

@media (max-width: 900px) {
  .eroeffnung .innen,
  .stufen {
    grid-template-columns: 1fr;
  }

  .vorfuehrung {
    margin-top: 44px;
  }

  .stufen {
    row-gap: 24px;
  }

  .stufe,
  .stufe-knopf,
  .stufe-mehr {
    grid-row: auto;
  }

  .stufen-rahmen:has(.stufen-schalter:not([hidden]))::before {
    display: none;
  }

  .stufen.zu .stufe:not(:first-child),
  .stufen.zu .stufe:not(:last-child) {
    border-radius: 24px;
  }

  .stufe,
  .stufe-mehr {
    grid-template-rows: none;
  }

  .kreislauf {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "kopf" "hinweis" "n" "e" "s" "w";
    gap: 18px;
  }

  .kreis-pfeil {
    display: none;
  }

  .station .fassung {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 14px;
  }

  .station .fassung > :first-child {
    grid-row: 1 / 3;
    aspect-ratio: 4 / 3;
  }

  .station h3 {
    margin-top: 2px;
  }

  .station p {
    font-size: 0.8rem;
  }

  .bildflaeche {
    padding: 6px 8px 0;
  }

  .briefing-rahmen {
    font-size: 0.55rem;
  }

  .lupe {
    right: 6px;
    bottom: 6px;
    width: 40px;
    height: 40px;
  }

  .lupe svg {
    width: 22px;
    height: 22px;
  }

  .vergroessert {
    padding: 18px 16px;
  }

}

@media (max-width: 639px) {
  :root {
    --rand: 20px;
  }

  .karussell.bereit .assistentin[data-lage="links"],
  .karussell.bereit .assistentin[data-lage="rechts"],
  .karussell.bereit .assistentin[data-lage="links2"],
  .karussell.bereit .assistentin[data-lage="rechts2"] {
    opacity: 0;
    pointer-events: none;
  }

  .karussell-steuerung {
    gap: 16px;
  }

  .eroeffnung {
    padding-top: 40px;
    --randlinie: transparent;
  }

  .vorteile {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .vorfuehrung {
    --geraet-breite: min(320px, calc(100vw - 80px));
  }

  .kopf .knopf-text {
    display: none;
  }

  .kopf .knopf {
    padding: 8px;
  }
}