/* Deltriva Homepage – Ablauf-Simulator
   Dunkles Band mit festen Werten (unabhängig vom Seitenmodus). Alles unter .sim, Präfix sim-. */

.sim {
  --sim-text: #eef4f4; --sim-schwach: rgba(238,244,244,.68); --sim-leise: rgba(238,244,244,.46);
  --sim-linie: rgba(238,244,244,.09); --sim-petrol: #5fb3b6; --sim-hell: #8fd9d6; --sim-kupfer: #e8a24a; --sim-kupfer-text: #f0b86a;
  --sim-rot: #ef7f55; --sim-gruen: #7ccf9f; --sim-feder: cubic-bezier(.34,1.3,.5,1);
  position: relative; isolation: isolate; color: var(--sim-text); color-scheme: dark;
  background: linear-gradient(180deg, #11343a 0%, #0b2226 46%, #091d21 100%);
  border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(238,244,244,.09), 0 1px 2px rgba(7,28,32,.2), 0 32px 64px -32px rgba(7,28,32,.55);
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased;
  min-height: 520px;
}
.sim *, .sim *::before, .sim *::after { box-sizing: border-box; }
/* Rahmenlicht folgt dem Zeiger */
.sim::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 4;
  background: radial-gradient(280px circle at var(--sim-mx, 50%) var(--sim-my, 0px), rgba(143,217,214,.6), rgba(143,217,214,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s; }
.sim:hover::before { opacity: 1; }
.sim-ecke { position: absolute; width: 9px; height: 9px; border: 0 solid rgba(143,217,214,.45); pointer-events: none; z-index: 4; }
.sim-ecke-lo { left: 8px; top: 8px; border-left-width: 1px; border-top-width: 1px; border-top-left-radius: 3px; }
.sim-ecke-ro { right: 8px; top: 8px; border-right-width: 1px; border-top-width: 1px; border-top-right-radius: 3px; }
.sim-ecke-lu { left: 8px; bottom: 8px; border-left-width: 1px; border-bottom-width: 1px; border-bottom-left-radius: 3px; }
.sim-ecke-ru { right: 8px; bottom: 8px; border-right-width: 1px; border-bottom-width: 1px; border-bottom-right-radius: 3px; }
.sim-ohne-js { padding: 40px 24px; color: var(--sim-schwach); }
.sim button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sim :focus-visible { outline: 2px solid var(--sim-kupfer); outline-offset: 2px; border-radius: 8px; }

/* ---------- Kopf: Reiter, Umschalter, Uhr ---------- */
.sim-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--sim-linie); }
.sim-reiter { display: flex; gap: 2px; min-width: 0; }
.sim-reiter button { position: relative; font-weight: 600; font-size: 14px; color: var(--sim-schwach); padding: 9px 12px; border-radius: 8px; white-space: nowrap;
  transition: color .2s, background-color .2s; }
.sim-reiter button:hover { color: var(--sim-text); background: rgba(238,244,244,.05); }
.sim-reiter button[aria-selected="true"] { color: var(--sim-text); background: rgba(238,244,244,.08); box-shadow: inset 0 0 0 1px rgba(238,244,244,.08); }
.sim-reiter button[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--sim-kupfer); }
.sim-steuer { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sim-schalter { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 11px; background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(238,244,244,.11); }
.sim-schalter button { position: relative; z-index: 1; font-weight: 600; font-size: 13.5px; padding: 8px 15px; border-radius: 8px; color: var(--sim-schwach);
  white-space: nowrap; transition: color .3s; }
.sim-schalter button:hover { color: var(--sim-text); }
.sim-schalter button[aria-pressed="true"] { color: var(--sim-text); }
.sim-schalter button[data-modus="deltriva"][aria-pressed="true"] { color: #062026; }
.sim-daumen { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px;
  background: rgba(238,244,244,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .55s var(--sim-feder), background-color .35s, opacity .3s; }
.sim-schalter[data-modus="deltriva"] .sim-daumen { transform: translateX(100%); background: var(--sim-petrol); box-shadow: 0 0 18px -2px rgba(95,179,182,.55); }
.sim-schalter[data-modus="eigen"] .sim-daumen { transform: translateX(50%) scaleX(.12); opacity: 0; }
.sim-schalter[data-modus="eigen"] { box-shadow: inset 0 0 0 1px rgba(232,162,74,.45); }
/* Einmaliger Hinweis nach dem Einschwingen */
.sim-hinweis .sim-schalter button[data-modus="deltriva"] { color: var(--sim-text); }
.sim-hinweis .sim-schalter button[data-modus="deltriva"]::before { content: ""; position: absolute; inset: -1px; border-radius: 9px; pointer-events: none;
  animation: sim-puls 1.7s ease-out 3; }
@keyframes sim-puls { 0% { box-shadow: 0 0 0 0 rgba(143,217,214,.6), inset 0 0 0 1px rgba(143,217,214,.7); } 100% { box-shadow: 0 0 0 12px rgba(143,217,214,0), inset 0 0 0 1px rgba(143,217,214,0); } }
.sim-uhr { margin: 0; font-size: 13px; color: var(--sim-schwach); white-space: nowrap; }
.sim-uhr b { color: var(--sim-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.sim-halt { width: 34px; height: 34px; border-radius: 9px !important; display: grid; place-items: center; color: var(--sim-schwach) !important;
  box-shadow: inset 0 0 0 1px rgba(238,244,244,.14); transition: color .2s, background-color .2s; }
.sim-halt:hover { color: var(--sim-text) !important; background: rgba(238,244,244,.06) !important; }
.sim-halt svg { width: 16px; height: 16px; display: block; }
.sim-halt .sim-sym-spiel, .sim-angehalten .sim-halt .sim-sym-halt { display: none; }
.sim-angehalten .sim-halt .sim-sym-spiel { display: block; }

/* ---------- Bühne ---------- */
.sim-buehne { position: relative; height: 330px; overflow: hidden; }
.sim-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sim-status { position: absolute; left: 18px; top: 12px; right: 18px; margin: 0; font-size: 12.5px; color: var(--sim-schwach); pointer-events: none; z-index: 2; }
.sim-legende { position: absolute; left: 18px; bottom: 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--sim-leise);
  pointer-events: none; z-index: 2; }
.sim-legende span { display: inline-flex; align-items: center; gap: 7px; }
.sim-legende span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.sim-l-vorgang::before { background: #eafcfb; box-shadow: 0 0 0 2px rgba(143,217,214,.25), 0 0 8px rgba(143,217,214,.8); }
.sim-l-rueck::before { background: #ffd0bb; box-shadow: 0 0 0 2px rgba(239,127,85,.3), 0 0 8px rgba(239,127,85,.85); }
.sim-l-bruch::before { width: 9px !important; height: 9px !important; background: rgba(58,40,22,.96); box-shadow: inset 0 0 0 1.5px var(--sim-kupfer); }

/* Stationen: echte Knöpfe/Beschriftungen über dem Canvas, per transform auf die Station gesetzt */
.sim-stationen { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sim .sim-st { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0 !important; display: block; text-align: inherit; border-radius: 50%;
  transition: opacity .45s ease calc(var(--i, 0) * 70ms + 220ms); }
.sim-neu .sim-st, .sim-weg .sim-st { opacity: 0; }
.sim-weg .sim-st { transition-delay: 0s; transition-duration: .2s; }
.sim-st:focus-visible { outline: none; }
.sim-st-punkt { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  pointer-events: auto; transition: width .45s var(--sim-feder), height .45s var(--sim-feder), left .45s var(--sim-feder), top .45s var(--sim-feder), background-color .3s; }
div.sim-st .sim-st-punkt { pointer-events: none; }
button.sim-st { pointer-events: auto; }
.sim-st:focus-visible .sim-st-punkt { outline: 2px solid var(--sim-kupfer); outline-offset: -4px; }
.sim-sym-haken { width: 11px; height: 11px; opacity: 0; transition: opacity .3s .15s; }
.sim-behoben .sim-st-punkt { left: 11px; top: 11px; width: 22px; height: 22px; background: var(--sim-petrol); color: #062026;
  box-shadow: 0 0 0 3px rgba(95,179,182,.18), 0 0 14px rgba(95,179,182,.45); }
.sim-behoben .sim-sym-haken { opacity: 1; }
.sim-behoben:hover .sim-st-punkt { background: var(--sim-hell); }
.sim-behoben:focus-visible .sim-st-punkt { outline-offset: 2px; }

.sim-st-text { position: absolute; left: 22px; width: var(--sim-lw, 150px); transform: translateX(-50%); display: grid; gap: 2px; justify-items: center;
  text-align: center; font-size: 13px; line-height: 1.25; color: var(--sim-text); pointer-events: auto; text-wrap: balance;
  transition: opacity .3s; }
.sim-oben .sim-st-text { bottom: 49px; }
.sim-unten .sim-st-text { top: 49px; }
.sim-rechts .sim-st-text { left: calc(22px + var(--sim-dx, 60px)); top: 22px; transform: translateY(-50%); justify-items: start; text-align: left; }
.sim-st-name { font-weight: 560; }
.sim-st-zusatz { font-size: 11.5px; font-weight: 600; color: var(--sim-kupfer-text); }
.sim-st-zusatz:empty { display: none; }
button.sim-st:hover .sim-st-zusatz, button.sim-st:focus-visible .sim-st-zusatz { text-decoration: underline; text-underline-offset: 3px; }
.sim-auto .sim-st-zusatz { color: var(--sim-hell); }
.sim-behoben .sim-st-text { opacity: 0; pointer-events: none; }
.sim-hover .sim-st-name { color: #fff; }
.sim-frisch { animation: sim-ein .55s var(--sim-feder); }
@keyframes sim-ein { from { opacity: 0; transform: translateY(5px); } }

.sim-st-engpass { position: absolute; left: 22px; font-size: 11px; font-weight: 650; line-height: 1; padding: 4px 7px; border-radius: 999px; white-space: nowrap;
  color: var(--sim-kupfer-text); background: rgba(232,162,74,.14); box-shadow: inset 0 0 0 1px rgba(232,162,74,.45);
  opacity: 0; transform: translate(-50%, 0) scale(.7); transition: opacity .3s, transform .45s var(--sim-feder); pointer-events: none; }
.sim-oben .sim-st-engpass { top: 49px; }
.sim-unten .sim-st-engpass { bottom: 49px; }
.sim-rechts .sim-st-engpass { left: auto; right: 24px; top: 0; transform: translate(0, -50%) scale(.7); display: none; }
.sim-engpass .sim-st-engpass { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Info unter dem Zeiger */
.sim-info { position: absolute; left: 0; top: 0; z-index: 3; width: max-content; max-width: 260px; display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px;
  background: rgba(6,22,25,.93); box-shadow: inset 0 0 0 1px rgba(238,244,244,.13), 0 14px 30px -12px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12.5px; color: var(--sim-schwach); pointer-events: none;
  font-variant-numeric: tabular-nums; }
.sim-info[hidden] { display: none; }
.sim-info strong { color: var(--sim-text); font-size: 13px; font-weight: 650; margin-bottom: 2px; }
.sim-info .sim-info-bruch { color: var(--sim-kupfer-text); }

/* ---------- Kennzahlen ---------- */
.sim-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--sim-linie); }
.sim-wert { padding: 15px 18px 16px; border-left: 1px solid var(--sim-linie); min-width: 0; }
.sim-wert:first-child { border-left: 0; }
.sim-wert dt { font-size: 13px; color: var(--sim-schwach); font-weight: 500; }
.sim-hilfe { display: block; font-size: 11.5px; color: var(--sim-leise); font-weight: 400; }
.sim-wert dd { margin: 0; }
.sim-zahl { display: flex; align-items: baseline; gap: 6px; margin-top: 9px !important; font-family: var(--titel, "Archivo", Inter, sans-serif); font-stretch: 112%;
  font-weight: 650; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--sim-text); font-variant-numeric: tabular-nums; }
.sim-einheit { font-family: Inter, system-ui, sans-serif; font-stretch: 100%; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--sim-schwach); }
.sim-walze { display: inline-flex; }
.sim-z { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.sim-r { display: flex; flex-direction: column; transition: transform .75s var(--sim-feder); }
.sim-r > span { display: block; height: 1em; line-height: 1; }
.sim-delta { display: inline-flex; margin-top: 9px !important; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums; transition: color .3s, background-color .3s; }
.sim-delta[data-art="neutral"] { color: var(--sim-schwach); background: rgba(238,244,244,.06); }
.sim-delta[data-art="gut"] { color: var(--sim-gruen); background: rgba(124,207,159,.12); }
.sim-delta[data-art="schlecht"] { color: var(--sim-kupfer-text); background: rgba(232,162,74,.12); }
.sim-beide { margin-top: 7px !important; font-size: 12px; color: var(--sim-schwach); font-variant-numeric: tabular-nums; }
.sim-beide:empty { display: none; }
.sim-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sim-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 12px 18px 15px; border-top: 1px solid var(--sim-linie);
  font-size: 12.5px; color: var(--sim-schwach); }
.sim-raffer { color: var(--sim-leise); }
.sim-ruhig .sim-halt, .sim-ruhig .sim-raffer { display: none; }

/* ---------- Mittlere Breite ---------- */
@media (max-width: 1020px) {
  .sim-steuer { margin-left: 0; width: 100%; }
  .sim-uhr { margin-left: auto; }
}
/* ---------- Schmal: Linie läuft senkrecht ---------- */
.sim-senkrecht { min-height: 0; }
.sim-senkrecht .sim-kopf { padding: 10px 12px; gap: 10px; }
.sim-senkrecht .sim-reiter { width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.sim-senkrecht .sim-reiter::-webkit-scrollbar { display: none; }
.sim-senkrecht .sim-reiter button { flex: none; padding: 11px 11px; }
.sim-senkrecht .sim-steuer { gap: 10px; }
.sim-senkrecht .sim-schalter { flex: 1; }
.sim-senkrecht .sim-schalter button { padding: 10px 8px; }
.sim-senkrecht .sim-uhr span { display: none; }
.sim-senkrecht .sim-status { left: 14px; right: 14px; top: 12px; }
.sim-senkrecht .sim-legende { left: 14px; right: 14px; bottom: 12px; gap: 4px 12px; }
.sim-senkrecht .sim-l-bruch { flex-basis: 100%; }
.sim-senkrecht .sim-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sim-senkrecht .sim-wert { padding: 13px 14px 14px; }
.sim-senkrecht .sim-wert:nth-child(odd) { border-left: 0; }
.sim-senkrecht .sim-wert:nth-child(n+3) { border-top: 1px solid var(--sim-linie); }
.sim-senkrecht .sim-zahl { font-size: 26px; }
.sim-senkrecht .sim-fuss { padding: 12px 14px 14px; }

@media (prefers-reduced-motion: reduce) {
  .sim *, .sim *::before, .sim *::after, .sim::before { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}
.sim-st-eng2 { display: none; font-size: 11px; font-weight: 650; line-height: 1; padding: 3px 7px; border-radius: 999px; margin-top: 2px;
  color: var(--sim-kupfer-text); background: rgba(232,162,74,.14); box-shadow: inset 0 0 0 1px rgba(232,162,74,.45); }
.sim-rechts.sim-engpass .sim-st-eng2 { display: inline-block; }