/* TT1710_HP_TEAMSEITE 17.10.2026: das-team.html + en/ (v3\teamseite.py) — the LEITSTAND (control room).
   Loaded ONLY by these two pages (not in the hp.css bundle: budget). Page tokens from tokens.css (light/dark follow
   them); the monitor SCREENS stay dark in both themes on purpose (a control room) and carry their own fixed colours. */
/* the <dialog> is a sibling of .ts-rumpf (not inside it) → it needs the same screen tokens */
.ts-rumpf, .ts-blatt { --ts-schirm: #0b1119; --ts-schirm2: #101a26; --ts-rahmen: #1b222d; --ts-rahmen2: #2a3342; --ts-schrift: #eef2f6;
  --ts-matt: #9fb0c2; --ts-gold: #f1c97a; --ts-blau: #5cb9de; --ts-gruen: #52c892; --ts-violett: #aa93f6; --ts-glanz: rgba(255,255,255,.06); }
/* ✏️ TT1710_HP_TEAMSEITE_NEUBASIS: the Leitstand stands on a motorway at DUSK (Marco 17.10.: „ein schöner Hintergrund …
   von einer straße“ · „nur nicht zu dunkel“) — a lit blue-hour panel in BOTH themes (fixed colours like the screens), the
   scene is the inline SVG .ts-strasse (v3\teamseite.py). The CSS gradient below paints the same sky/asphalt at once, so the
   first paint never waits for anything. Texts on the scene sit on a frosted dark pill (AA ≥ 4.5 on every part of the sky). */
.ts-leitstand { position: relative; display: grid; gap: var(--ab6); padding: var(--ab6) var(--ab5) var(--ab7, 48px);
  border-radius: var(--rd-g, 20px); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #2c4a8a 0, #5d72b4 16%, #e0937a 27%, #ffc98a 33%, #6a6f97 34%, #4a5268 100%);
  box-shadow: 0 30px 70px -40px rgba(20,30,60,.7), inset 0 0 0 1px rgba(255,255,255,.12); }
.ts-strasse { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ts-karte path { stroke: #fff3dc; stroke-width: 1; opacity: .28; }
.ts-ort { fill: #fff0c8; opacity: .85; animation: ts-puls 3.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.ts-ort.o1 { fill: #bfe6ff; animation-delay: 1.2s; } .ts-ort.o2 { fill: #c9f2dc; animation-delay: 2.4s; }
.ts-kante { stroke: #f6f2e8; stroke-width: 4; opacity: .85; }
.ts-mitte { stroke: #ffd27a; stroke-width: 4; opacity: .9; }
.ts-spur { stroke: #fbf8f0; stroke-width: 5; stroke-dasharray: 34 46; opacity: .8; animation: ts-spur 3.2s linear infinite; }
.ts-licht, .ts-licht-glut { stroke-linecap: round; stroke-dasharray: 90 430; }
.ts-licht { stroke-width: 4; } .ts-licht-glut { stroke-width: 16; opacity: .3; }
.ts-licht.hin, .ts-licht-glut.hin { stroke: url(#ts-weiss); animation: ts-hin 9s linear infinite; }
.ts-licht.weg, .ts-licht-glut.weg { stroke: url(#ts-rot); animation: ts-weg 11s linear infinite; }
.ts-l1 { animation-delay: -3.7s !important; animation-duration: 12s !important; } .ts-l2 { animation-delay: -6.1s !important; }
@keyframes ts-spur { to { stroke-dashoffset: -80; } }
@keyframes ts-hin { to { stroke-dashoffset: -520; } }
@keyframes ts-weg { to { stroke-dashoffset: 520; } }
@keyframes ts-fluss { to { stroke-dashoffset: -320; } }
@keyframes ts-puls { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
.ts-reihe { position: relative; z-index: 1; }
.ts-leitstand .ts-reihe-titel, .ts-leitstand .ts-reihe-satz, .ts-leitstand .ts-tipp { width: fit-content; max-width: 100%; color: #f6f8fb;
  background: rgba(14,22,42,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 20px -10px rgba(0,0,0,.5); }
.ts-leitstand .ts-reihe-titel { padding: 6px 14px; border-radius: var(--rd-voll, 999px); }
.ts-leitstand .ts-reihe-satz, .ts-leitstand .ts-tipp { padding: 6px 12px; border-radius: 10px; }
.ts-leitstand .ts-tipp { margin: 0 auto; }
/* the old hp.css gives every section padding + a top line (section + section) — not in the Leitstand / the sheet */
.ts-leitstand > section, .ts-b-rumpf > section { padding: 0; border-top: 0; background: none; }
.ts-reihe-titel { display: flex; align-items: center; gap: var(--ab2); margin: 0 0 var(--ab2); }
.ts-reihe-satz { margin: 0 0 var(--ab4); max-width: 60ch; }
.ts-led { width: 9px; height: 9px; border-radius: 50%; background: var(--ton); box-shadow: 0 0 0 3px var(--tonhauch2), 0 0 12px var(--ton);
  flex: none; animation: ts-blink 2.8s ease-in-out infinite; }
.ts-led.blau { background: var(--blau); box-shadow: 0 0 0 3px rgba(92,185,222,.18), 0 0 12px var(--blau); animation-delay: .7s; }
.ts-led.gruen { background: var(--gruen); box-shadow: 0 0 0 3px rgba(82,200,146,.18), 0 0 12px var(--gruen); animation-delay: 1.4s; }
@keyframes ts-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ts-hinweis { position: relative; z-index: 1; }
.ts-tipp { position: relative; z-index: 1; text-align: center; margin: 0; }

/* ── the summary card in the head band ── */
.ts-summe { text-align: center; }
.ts-summe-zahl { font-family: var(--serif); font-size: var(--gr-zahl-xl); line-height: 1; margin: var(--ab2) 0;
  background: var(--gold-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; }
.ts-einheit { font-size: .4em; }

/* ── one monitor ── */
.ts-wand { display: grid; gap: var(--ab5) var(--ab4); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ts-monitor { --glut: var(--ts-blau); appearance: none; font: inherit; color: var(--ts-schrift); text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0 0 18px; position: relative;
  -webkit-tap-highlight-color: transparent; }
.ts-monitor.ts-probe { --glut: var(--ts-gruen); }
.ts-monitor.ts-inhaber { --glut: var(--ts-gold); }
.ts-monitor::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 34%; height: 18px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--ts-rahmen2), var(--ts-rahmen)); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  border-radius: 0 0 6px 6px; }
.ts-schirm { position: relative; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px 18px; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--glut) 22%, var(--ts-schirm2)) 0%, var(--ts-schirm) 62%);
  border: 6px solid var(--ts-rahmen); outline: 1px solid var(--ts-rahmen2); outline-offset: -1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9), 0 0 34px -14px var(--glut);
  transition: transform var(--ruhig) var(--kurve), box-shadow var(--ruhig) var(--kurve); }
.ts-schirm::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px); }
.ts-schirm::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, var(--ts-glanz) 0%, transparent 38%); }
.ts-monitor:hover .ts-schirm, .ts-monitor:focus-visible .ts-schirm { transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 26px 50px -22px rgba(0,0,0,.95), 0 0 46px -8px var(--glut); }
.ts-monitor:focus-visible { outline: none; }
.ts-monitor:focus-visible .ts-schirm { outline: 2px solid var(--glut); outline-offset: 3px; }
.ts-monitor .ts-led { position: absolute; top: 10px; right: 12px; width: 7px; height: 7px; background: var(--glut);
  box-shadow: 0 0 10px var(--glut); }
.ts-bild { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: var(--ts-schirm2);
  box-shadow: 0 0 0 3px var(--ts-schirm), 0 0 0 5px var(--glut), 0 0 26px -2px var(--glut); }
.ts-monogramm { display: grid; place-items: center; font-family: var(--serif); font-size: 2.4rem; color: var(--glut); }
.ts-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; margin-top: 8px; color: var(--ts-schrift); }
.ts-rolle { font-size: var(--gr-mini); letter-spacing: var(--sp-aufschrift); text-transform: uppercase; color: var(--glut); font-weight: 600; }
.ts-seit { font-size: var(--gr-mini); color: var(--ts-matt); }
.ts-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 2px; }
.ts-chips span { font-size: .6875rem; padding: 2px 8px; border-radius: var(--rd-voll); color: var(--ts-schrift);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.ts-ticker { margin-top: auto; white-space: nowrap; font-family: var(--mono); font-size: .6875rem; color: var(--glut); letter-spacing: .04em;
  padding: 4px 10px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.06); }

/* ── the big main monitor (owner) ── */
.ts-haupt { display: grid; }
.ts-haupt .ts-monitor { padding-bottom: 22px; }
.ts-haupt .ts-monitor::after { width: 18%; height: 22px; }
.ts-haupt .ts-schirm { flex-direction: row; justify-content: center; gap: var(--ab6); padding: 34px 32px; text-align: left; border-width: 8px; }
.ts-haupt .ts-bild { width: 148px; height: 148px; flex: none; }
.ts-haupt .ts-name { font-size: clamp(2rem, 4vw, 2.8rem); margin-top: 0; }
.ts-haupt .ts-text { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ts-haupt .ts-chips { justify-content: flex-start; }
.ts-krone { font-size: 1.6rem; line-height: 1; }
.ts-kpi-reihe { display: flex; flex-wrap: wrap; gap: var(--ab4); margin-top: var(--ab2); }
.ts-kpi-reihe b { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--ts-gold); font-variant-numeric: tabular-nums; }
.ts-kpi-reihe span { font-size: var(--gr-mini); color: var(--ts-matt); }

/* skeletons */
.ts-gerippe { cursor: default; }
.ts-gerippe .ts-schirm { min-height: 210px; }
.ts-gerippe.ts-gross .ts-schirm { min-height: 230px; }
.ts-leer { box-shadow: 0 0 0 3px var(--ts-schirm), 0 0 0 5px var(--ts-rahmen2); animation: ts-schimmer 1.4s ease-in-out infinite; }
.ts-zeile { width: 60%; height: 12px; border-radius: 6px; background: var(--ts-rahmen2); animation: ts-schimmer 1.4s ease-in-out infinite; }
.ts-zeile.kurz { width: 40%; }
@keyframes ts-schimmer { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

/* ── the stats sheet ── */
.ts-blatt { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--rd-g);
  color: var(--ts-schrift); background: var(--ts-schirm); box-shadow: 0 0 0 6px var(--ts-rahmen), 0 0 0 7px var(--ts-rahmen2),
  0 40px 90px -20px rgba(0,0,0,.95), 0 0 70px -20px var(--glut, var(--ts-blau)); overflow: auto; overscroll-behavior: contain; }
.ts-blatt[open] { animation: ts-auf .42s var(--kurve); }
.ts-blatt::backdrop { background: rgba(4,6,10,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes ts-auf { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.ts-b-kopf { position: relative; display: flex; align-items: center; gap: var(--ab4); padding: 26px 26px 20px;
  background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--glut) 26%, transparent), transparent 70%);
  border-bottom: 1px solid rgba(255,255,255,.07); }
.ts-b-kopf .ts-bild { width: 84px; height: 84px; flex: none; }
.ts-b-kopf h2 { font-family: var(--serif); font-size: 2rem; margin: 0; line-height: 1.1; color: var(--ts-schrift); }
.ts-b-zu { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.3); color: var(--ts-schrift); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.ts-b-zu:focus-visible { outline: 2px solid var(--glut); outline-offset: 2px; }
.ts-b-rumpf { padding: 22px 26px 28px; display: grid; gap: 22px; }
.ts-b-titel { font-size: var(--gr-mini); letter-spacing: var(--sp-aufschrift); text-transform: uppercase; color: var(--ts-matt); margin: 0 0 10px; }
.ts-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ts-kpi { padding: 14px 12px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.ts-kpi b { display: block; font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.05; color: var(--glut);
  font-variant-numeric: tabular-nums; }
.ts-kpi span { font-size: .75rem; color: var(--ts-matt); }
.ts-lieb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ts-lieb div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--glut) 14%, transparent), rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--glut) 30%, transparent); }
.ts-lieb i { font-style: normal; font-size: 1.5rem; }
.ts-lieb small { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-matt); }
.ts-lieb b { font-size: 1rem; line-height: 1.25; }
.ts-lieb em { font-style: normal; font-size: .75rem; color: var(--ts-matt); }
.ts-strecke svg { width: 100%; height: auto; display: block; }
.ts-strecke .bogen { fill: none; stroke: var(--glut); stroke-width: 3; stroke-dasharray: 8 9; animation: ts-fluss 9s linear infinite; }
.ts-strecke .punkt { fill: var(--glut); }
.ts-strecke text { fill: var(--ts-schrift); font: 600 15px var(--schrift); }
.ts-strecke .mal { fill: var(--ts-matt); font-weight: 400; font-size: 13px; }
.ts-balken { display: grid; gap: 8px; }
.ts-balken div { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; align-items: center; gap: 10px; font-size: .875rem; }
.ts-balken s { text-decoration: none; height: 10px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.ts-balken s u { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--glut), color-mix(in srgb, var(--glut) 50%, #fff));
  transition: width 1s var(--kurve); }
.ts-balken em { font-style: normal; color: var(--ts-matt); font-variant-numeric: tabular-nums; }
.ts-welt { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); }
.ts-welt .ets { background: var(--ts-blau); } .ts-welt .ats { background: var(--ts-gold); }
.ts-welt-text { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--ts-matt); margin-top: 6px; }
.ts-welt-text span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ts-blau); }
.ts-welt-text span.ats::before { background: var(--ts-gold); }
/* 🧪 preview testers (Marco ~12:0x): violet screen glow + a flask badge on the avatar ring */
.ts-monitor.ts-tester { --glut: var(--ts-violett); }
.ts-led.violett { background: var(--violett); box-shadow: 0 0 0 3px rgba(170,147,246,.18), 0 0 12px var(--violett); animation-delay: 2.1s; }
.ts-abzeichen { position: absolute; top: 86px; left: calc(50% + 22px); width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 1rem; border-radius: 50%; background: var(--ts-schirm); box-shadow: 0 0 0 2px var(--ts-violett), 0 0 14px var(--ts-violett); }
.ts-b-kopf .ts-chips { justify-content: flex-start; }
.ts-spass { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ts-spass div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.12); font-size: .875rem; }
.ts-spass i { font-style: normal; font-size: 1.4rem; display: block; }
.ts-spass b { color: var(--glut); }
.ts-leer-text { color: var(--ts-matt); margin: 0; }

/* ── phone ── */
@media (max-width: 700px) {
  .ts-leitstand { padding: var(--ab5) var(--ab3) var(--ab6); border-radius: 16px; }
  .ts-wand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab4) var(--ab3); }
  .ts-schirm { padding: 18px 10px 14px; border-width: 5px; }
  .ts-bild { width: 72px; height: 72px; }
  .ts-name { font-size: 1.2rem; }
  .ts-abzeichen { top: 66px; left: calc(50% + 14px); width: 26px; height: 26px; font-size: .875rem; }
  .ts-haupt .ts-schirm { flex-direction: column; text-align: center; padding: 24px 16px; gap: var(--ab3); }
  .ts-haupt .ts-text { align-items: center; }
  .ts-haupt .ts-chips, .ts-kpi-reihe { justify-content: center; }
  .ts-haupt .ts-bild { width: 116px; height: 116px; }
  .ts-kpis, .ts-lieb, .ts-spass { grid-template-columns: repeat(2, 1fr); }
  .ts-b-kopf { padding: 20px 64px 16px 18px; }
  .ts-b-rumpf { padding: 18px; }
  .ts-blatt { max-height: calc(100dvh - 12px); width: calc(100vw - 12px); }
}
@media (max-width: 360px) { .ts-wand { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .ts-strasse *, .ts-led, .ts-leer, .ts-zeile, .ts-strecke .bogen { animation: none !important; }
  .ts-blatt[open] { animation: none; }
  .ts-schirm, .ts-balken s u { transition: none; }
}
/* ✏️ TT1710_HP_TEAMLINK 17.10.2026: the header link „Das Team“ (after Status) marked on its own page */
.hp-rechts .hp-teamlink[aria-current="page"] { color: var(--text-gold); border-color: var(--tonhauch2); background: var(--tonhauch); box-shadow: inset 0 0 0 1px var(--tonhauch2); }