/* Care-Auswertung: EGS brand palette + Manrope, from the agreed preview (lavish/preview). */
  /* EGS brand palette + Manrope (as in the brainstorm page and the status-dashboard concepts) */
  :root {
    color-scheme: light; /* native controls (date fields, scrollbars) follow the chosen theme */
    --font: Manrope, "Helvetica Neue", Arial, sans-serif;
    --ground: #F3F5FB; --panel: #FFFFFF; --panel-2: #F1F3FA;
    --ink: #101A48; --ink-soft: #56608A;
    --rule: rgba(24, 54, 181, .13); --grid: rgba(24, 54, 181, .08); --shadow: rgba(16, 26, 72, .08);
    --accent: #1836B5; --accent-soft: rgba(24, 54, 181, .07); --on-accent: #FFFFFF;
    --bar-bg: #1836B5; --bar-ink: #FFFFFF; --bar-soft: rgba(255, 255, 255, .72);
    --lemon: #EFD215; --lemon-soft: #FBF3B8; --lemon-ink: #5A4D00;
    --good: #1E9E4B; --bad: #C2412D; --bad-soft: #FBE9E5;
    --scrim: rgba(11, 21, 66, .45);
    --a-terminverschiebung: #1836B5; --a-terminstornierung: #1EA2EE; --a-wunsch_zum_termin: #8FD0F7;
    --a-wann_kommt_der_elektriker: #5A73DA; --a-zaehlerwechsel_verweigerung: #FFB566;
    --a-mangel_nach_installation: #EC8633; --a-beschwerde: #D4513A; --a-sachfrage: #A081FF;
    --a-lob: #31D468; --a-sonstiges: #B4B8C6;
    --p0: #101A48; --p1: #1836B5; --p2: #4460D6; --p3: #7188E6; --p4: #A0B1F0; --p5: #CBD5F8; --p6: #2E4A9E; --p7: #5E6FA8;
    --s-offen: #EFD215; --s-inb: #1EA2EE; --s-geschlossen: #1E9E4B;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --ground: #0A1030; --panel: #111A42; --panel-2: #18224F;
      --ink: #E9EDFB; --ink-soft: #A3AED6;
      --rule: rgba(170, 188, 255, .16); --grid: rgba(170, 188, 255, .08); --shadow: rgba(0, 0, 0, .35);
      --accent: #7C93FF; --accent-soft: rgba(124, 147, 255, .12); --on-accent: #0A1030;
      --bar-bg: #111A42; --bar-ink: #E9EDFB; --bar-soft: #A3AED6;
      --lemon: #EFD215; --lemon-soft: rgba(239, 210, 21, .16); --lemon-ink: #F5E27A;
      --good: #4BDD7E; --bad: #F08A76; --bad-soft: rgba(240, 138, 118, .14);
      --scrim: rgba(0, 0, 0, .55);
      --a-terminverschiebung: #5D79F0; --a-terminstornierung: #3DB3F5; --a-wunsch_zum_termin: #B5E1FA;
      --a-wann_kommt_der_elektriker: #8FA2F5; --a-zaehlerwechsel_verweigerung: #FFC285;
      --a-mangel_nach_installation: #F29A52; --a-beschwerde: #E56A52; --a-sachfrage: #B49BFF;
      --a-lob: #4BDD7E; --a-sonstiges: #8A90A6;
      --p0: #E9EDFB; --p1: #B8C5FA; --p2: #8EA2F7; --p3: #6B83F0; --p4: #4A63D8; --p5: #2F46AE; --p6: #D2DAFB; --p7: #7F8FC9;
      --s-offen: #EFD215; --s-inb: #3DB3F5; --s-geschlossen: #4BDD7E;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ground: #0A1030; --panel: #111A42; --panel-2: #18224F;
    --ink: #E9EDFB; --ink-soft: #A3AED6;
    --rule: rgba(170, 188, 255, .16); --grid: rgba(170, 188, 255, .08); --shadow: rgba(0, 0, 0, .35);
    --accent: #7C93FF; --accent-soft: rgba(124, 147, 255, .12); --on-accent: #0A1030;
    --bar-bg: #111A42; --bar-ink: #E9EDFB; --bar-soft: #A3AED6;
    --lemon: #EFD215; --lemon-soft: rgba(239, 210, 21, .16); --lemon-ink: #F5E27A;
    --good: #4BDD7E; --bad: #F08A76; --bad-soft: rgba(240, 138, 118, .14);
    --scrim: rgba(0, 0, 0, .55);
    --a-terminverschiebung: #5D79F0; --a-terminstornierung: #3DB3F5; --a-wunsch_zum_termin: #B5E1FA;
    --a-wann_kommt_der_elektriker: #8FA2F5; --a-zaehlerwechsel_verweigerung: #FFC285;
    --a-mangel_nach_installation: #F29A52; --a-beschwerde: #E56A52; --a-sachfrage: #B49BFF;
    --a-lob: #4BDD7E; --a-sonstiges: #8A90A6;
    --p0: #E9EDFB; --p1: #B8C5FA; --p2: #8EA2F7; --p3: #6B83F0; --p4: #4A63D8; --p5: #2F46AE; --p6: #D2DAFB; --p7: #7F8FC9;
    --s-offen: #EFD215; --s-inb: #3DB3F5; --s-geschlossen: #4BDD7E;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { background: var(--ground); }
  body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { margin: 0; text-wrap: balance; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .num, .tile .v, .chart text { font-variant-numeric: tabular-nums; }
  [hidden] { display: none !important; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* app bar */
  .appbar { background: var(--bar-bg); color: var(--bar-ink); border-bottom: 1px solid var(--rule); }
  .appbar-in { max-width: 1240px; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
  .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--bar-ink); color: var(--bar-bg); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
  .sync { font-size: 13px; color: var(--bar-soft); display: flex; align-items: center; gap: 8px; }
  .sync .dot { width: 8px; height: 8px; border-radius: 50%; background: #31D468; flex: none; }
  .user { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
  .user .who { display: grid; line-height: 1.25; text-align: right; }
  .user .who small { color: var(--bar-soft); }
  .avatar { width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--bar-ink) 18%, transparent); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
  .link-btn { font: 700 13px var(--font); color: var(--bar-ink); background: transparent; border: 1px solid color-mix(in srgb, var(--bar-ink) 35%, transparent); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
  .link-btn:hover { background: color-mix(in srgb, var(--bar-ink) 12%, transparent); }
  .appbar :focus-visible { outline-color: var(--bar-ink); } /* the accent would vanish on the blue bar */
  .theme-btn { display: inline-flex; align-items: center; gap: 6px; }
  .theme-btn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .theme-btn .i-moon { fill: currentColor; stroke: none; }
  .theme-btn .i-sun, .theme-btn.is-dark .i-moon { display: none; }
  .theme-btn.is-dark .i-sun { display: block; }

  main.app { max-width: 1240px; margin: 0 auto; padding: 18px 16px 48px; display: grid; gap: 16px; }
  .card { background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; padding: 16px; }

  /* controls */
  .controls { display: grid; gap: 14px; }
  .row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; justify-content: space-between; }
  .row > * { min-width: 0; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { font: 600 13px var(--font); color: var(--ink); background: var(--panel-2); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
  .chip:hover { border-color: var(--rule); }
  .chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
  .dates { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
  .dates label { font-size: 12px; font-weight: 700; color: var(--ink-soft); display: grid; gap: 2px; }
  .dates input { font: 600 14px var(--font); color: var(--ink); background: var(--panel-2); border: 1px solid var(--rule); border-radius: 10px; padding: 6px 8px; }
  .btn { font: 700 13px var(--font); color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
  .btn:hover { border-color: var(--rule); }
  #strip svg { display: block; width: 100%; }
  #strip .bar { fill: var(--accent); opacity: .5; }
  #strip .line { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 3 3; }
  #strip .wk { stroke: var(--grid); }
  #strip text { fill: var(--ink-soft); font: 500 11px var(--font); }
  #strip .selection { fill: var(--accent); fill-opacity: .14; stroke: var(--accent); stroke-opacity: .8; }
  #strip .handle { fill: var(--accent); fill-opacity: .55; }
  .strip-cap { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-soft); }
  .strip-cap i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }

  /* status tiles = key numbers + the 3-position status switch */
  .tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 640px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
  .tiles input { position: absolute; opacity: 0; pointer-events: none; }
  .tile { display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px; cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s; }
  .tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
  .tiles input:checked + .tile { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 10px 26px var(--shadow); }
  .tiles input:focus-visible + .tile { outline: 2px solid var(--accent); outline-offset: 3px; }
  .tile .k { font-size: 13px; font-weight: 800; }
  .tile .v { font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
  .tile .d { font-size: 13px; color: var(--ink-soft); }
  .tile.t-offen .v { color: var(--lemon-ink); }
  .tile .sel { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); opacity: 0; }
  .tiles input:checked + .tile .sel { opacity: 1; }
  .under-tiles { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-soft); }
  .under-tiles .live { display: flex; gap: 8px; align-items: center; }
  .under-tiles .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); flex: none; }
  .under-tiles .live.on .dot { background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); }
  .text-btn { font: 700 13px var(--font); color: var(--accent); background: none; border: none; padding: 2px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

  /* chart card */
  .chart-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .chart-head h2 { font-size: 18px; font-weight: 800; }
  .chart-head h2 span { color: var(--ink-soft); font-weight: 600; }
  .seg { display: inline-flex; background: var(--panel-2); border-radius: 12px; padding: 4px; gap: 4px; }
  .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .seg label { padding: 6px 14px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 14px; }
  .seg input:checked + label { background: var(--panel); box-shadow: 0 1px 4px var(--shadow); color: var(--accent); }
  .seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
  .legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin-bottom: 8px; }
  .legend button { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 8px; border-radius: 8px; }
  .legend button:hover { background: var(--panel-2); }
  .legend button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
  .legend .lc { color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
  .legend button:focus-visible { outline: 2px solid var(--accent); }
  .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
  .sw.nz { background: repeating-linear-gradient(135deg, var(--lemon) 0 3px, color-mix(in srgb, var(--lemon-ink) 45%, var(--lemon)) 3px 5px); }
  .hint { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--lemon-soft); color: var(--lemon-ink); font-size: 13px; font-weight: 600; }
  .hint.info { background: var(--accent-soft); color: var(--ink); }
  .head-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .ctl-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
  .chart { width: 100%; overflow-x: auto; }
  .chart svg { display: block; }
  .chart text { fill: var(--ink); font: 600 13px var(--font); }
  .chart .rt { fill: var(--ink-soft); font-weight: 700; }
  .chart .rl.nz { fill: var(--lemon-ink); font-weight: 800; }
  .chart .tick text { fill: var(--ink-soft); font-size: 11px; font-weight: 500; }
  .chart .grid line { stroke: var(--grid); }
  .chart rect.track { fill: var(--panel-2); }
  .chart rect.seg { cursor: pointer; transition: opacity .15s; }
  .chart rect.seg:focus-visible { outline: none; stroke: var(--ink); stroke-width: 2; }
  .chart .dim { opacity: .16; }
  .empty { padding: 28px; text-align: center; color: var(--ink-soft); background: var(--panel-2); border-radius: 12px; }
  .foot { font-size: 12px; color: var(--ink-soft); margin: 10px 0 0; }

  /* dialogs */
  dialog { color: var(--ink); background: var(--panel); border: none; padding: 0; }
  dialog::backdrop { background: var(--scrim); }
  dialog.drill { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(600px, 100vw); box-shadow: -20px 0 40px var(--shadow); }
  dialog.rules { border-radius: 18px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 50px var(--shadow); }
  .d-head { position: sticky; top: 0; background: var(--panel); padding: 18px 18px 12px; border-bottom: 1px solid var(--rule); display: flex; gap: 12px; justify-content: space-between; align-items: start; }
  .d-head h3 { font-size: 18px; font-weight: 800; }
  .eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin: 0 0 2px; }
  .icon-btn { font: 700 20px var(--font); line-height: 1; color: var(--ink); background: var(--panel-2); border: none; border-radius: 10px; width: 36px; height: 36px; cursor: pointer; flex: none; }
  .d-body { padding: 8px 18px 24px; }
  table.tickets { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.tickets th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 6px; border-bottom: 1px solid var(--rule); }
  table.tickets td { padding: 9px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  table.tickets td b { display: block; }
  table.tickets td span.t { color: var(--ink-soft); }
  .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--panel-2); }
  .pill.geschlossen { color: var(--good); }
  .pill.inb { color: var(--accent); }
  .pill.offen { background: var(--lemon-soft); color: var(--lemon-ink); }
  .care-link { white-space: nowrap; font-weight: 700; font-size: 12px; color: var(--accent); }
  .d-more { color: var(--ink-soft); font-size: 13px; }
  .rules dl { margin: 0; display: grid; gap: 12px; }
  .rules dt { font-weight: 800; font-size: 14px; }
  .rules dd { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; }

  /* login */
  .login { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
  .login-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--rule); border-radius: 20px; padding: 26px 24px; display: grid; gap: 16px; box-shadow: 0 20px 50px var(--shadow); }
  .login-card .brand { color: var(--ink); }
  .login-card .mark { background: var(--accent); color: var(--on-accent); }
  .login-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }
  .field { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
  .field input { font: 500 15px var(--font); color: var(--ink); background: var(--panel-2); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; }
  button.primary { font: 700 15px var(--font); background: var(--accent); color: var(--on-accent); border: none; border-radius: 10px; padding: 11px 14px; cursor: pointer; }
  .err { padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-size: 13px; font-weight: 600; }
  .login-note { font-size: 12px !important; }

  .tip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--ground); padding: 7px 10px; border-radius: 8px; font-size: 13px; line-height: 1.35; opacity: 0; transition: opacity .12s; max-width: 260px; }
  .toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100vw - 32px); }
  .toast.show { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
  .sync.warn .dot { background: #FFB566; }
  .appbar form { margin: 0; }
  .notice { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--rule); color: var(--ink-soft); font-size: 14px; }
  .drill-new { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; font-weight: 600; }