:root{
    --blue:#005ca9; --blue-d:#013f74; --yellow:#ffd400; --ink:#1a1d21;
    --muted:#6b7280; --line:#e6e8eb; --bg:#f4f6f8; --card:#ffffff;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg)}
  header{background:#fff;padding:12px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-bottom:4px solid var(--yellow);box-shadow:0 2px 8px rgba(0,0,0,.06)}
  header .logo{height:52px;width:auto;display:block}
  header .htitle{font-size:18px;font-weight:600;color:var(--blue);margin-left:auto;letter-spacing:.02em}
  main{max-width:1100px;margin:0 auto;padding:20px}
  .controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:6px}
  .controls label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
  select,input[type=date]{font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);min-width:160px}
  .datestep{display:flex;gap:4px;align-items:center}
  .datestep input[type=date]{min-width:150px}
  button.step{padding:8px 11px;font-size:14px;line-height:1}
  button.step.btn-today{font-weight:600;color:var(--blue-d);border-color:#b9cfe2}
  button.step.btn-today:hover{background:#eef4fb}
  #btn-fest-vorjahr{font-weight:600;background:#fde68a;border-color:#e9c94a;color:#7c4a00}
  #btn-fest-vorjahr:hover{background:#fcd34d}
  input.tag-rot{border-color:#e24b4a !important;background:#fdecea;color:#b3261e}
  button{font-size:14px;padding:9px 14px;border:1px solid var(--blue);background:#fff;color:var(--blue-d);border-radius:8px;cursor:pointer}
  button:hover{background:#eef4fb}
  button.active{background:var(--blue);color:#fff}
  .hint{font-size:13px;color:var(--muted);margin:0 0 8px}
  .toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
  .toolbar-rows{display:flex;flex-direction:column;gap:8px}
  .btn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .row-label{font-size:12px;color:var(--muted);min-width:84px;font-weight:500}
  .toolbar-btns{display:flex;gap:8px;flex-wrap:wrap}
  .toolbar-btns button{cursor:grab}
  #markt-kopf{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
  #markt-kopf .mk-name{font-size:32px;font-weight:700;color:var(--blue)}
  #markt-kopf .mk-label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-top:3px}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
  .kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .kpi .l{font-size:12px;color:var(--muted)}
  .kpi .v{font-size:26px;font-weight:600;margin-top:2px}
  .kpi .d{font-size:12px;margin-top:3px;color:var(--muted)}
  .kpi .d.up{color:#137333} .kpi .d.down{color:#c5221f}
  .kennzahlen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
  .kz-tile{background:var(--bg);border-radius:8px;padding:10px 12px;cursor:grab}
  .kz-l{font-size:12px;color:var(--muted)}
  .kz-v{font-size:19px;font-weight:600;margin-top:2px}
  .kz-d{font-size:12px;margin-top:2px}
  .kz-tile.kz-click:hover{outline:2px solid var(--blue)}
  .kz-tile.kz-dragging{opacity:.4}
  #topwerte-detail .td-h{font-size:15px;font-weight:600;margin:16px 0 8px}
  #topwerte-detail table tbody tr:nth-child(even){background:#f1f6fc}
  #topwerte-detail th.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
  #topwerte-detail th.th-sort:hover{color:#005ca9}
  .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:18px}
  .card h2{font-size:15px;font-weight:600;margin:0 0 12px}
  .chart-wrap{position:relative;height:320px}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th,td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--line)}
  th:first-child,td:first-child{text-align:left}
  tbody tr.klick{cursor:pointer}
  tbody tr.klick:hover{background:#f0f6fc}
  #tabelle tbody tr:nth-child(even), .markt-block tbody tr:nth-child(even), #wochen-detail tbody tr:nth-child(even){background:#f1f6fc}
  #wochen-detail tbody tr.tag-feiertag{background:#fdecea}
  #wochen-detail tbody tr.tag-feiertag td:first-child{color:#b3261e;font-weight:500}
  tfoot td{font-weight:600;border-top:2px solid var(--line);border-bottom:none}
  .muted{color:var(--muted)}
  .up{color:#137333} .down{color:#c5221f}
  td .sub{font-size:11px;margin-top:2px}
  .badge{display:inline-block;font-size:12px;padding:2px 10px;border-radius:11px;margin-left:6px}
  .b-feiertag{background:#fdecea;color:#b3261e}
  .b-oster{background:#fde68a;color:#7c4a00;font-weight:600;font-size:13px;padding:3px 12px}
  .b-pfingst{background:#bbf7d0;color:#14532d;font-weight:600;font-size:13px;padding:3px 12px}
  .b-vor,.b-nach{background:#fef7e0;color:#8a5a00}
  .b-ferien{background:#e8f0fe;color:#13478a}
  .b-vos{background:#e6f4ea;color:#137333}
  .b-sonder{background:#fbe3d0;color:#9a3412}
  .wetter-chip{font-size:15px;font-weight:500;color:#374151;white-space:nowrap}
  .rb-box{display:flex;flex-direction:column;align-items:flex-end;gap:5px;border:1px solid var(--line);border-radius:10px;padding:7px 12px;background:#fff}
  .rb-box #badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
  .rb-box .badge{margin-left:0}
  .empty{color:var(--muted);font-size:14px;padding:24px 0;text-align:center}
  #tabelle-card,#wochen-card,#alle-card,#quer-card,#wg-card,#brot-card{display:none}
  .quer-wrap{overflow-x:auto}
  .wg-ctrl{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:6px 0 12px}
  .wg-ctrl label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
  .wg-ctrl input,.wg-ctrl select{font-size:14px;padding:5px 7px;border:1px solid #ccd6e0;border-radius:6px}
  .wg-ctrl button{align-self:end;background:var(--blue);color:#fff;border:0;border-radius:6px;padding:7px 14px;font-size:14px;cursor:pointer}
  .wg-summe{font-size:14px;margin-bottom:10px}
  .wg-summe b{font-size:18px}
  .wg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
  .wg-chip{font-size:12px;padding:4px 10px;border-radius:14px;border:1px solid #ccd6e0;background:#fff;cursor:pointer;user-select:none}
  .wg-chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}
  #wg-table tr.wg-ber{cursor:pointer;font-weight:600}
  #wg-table tr.wg-ber td{border-top:2px solid #e3eaf1}
  #wg-table tr.wg-ber.nonums{color:var(--muted);font-weight:400;font-style:italic}
  #wg-table tr.wg-det td:first-child{padding-left:26px;font-weight:400;color:#333}
  #wg-table tr.wg-det{font-size:13px;background:#f8fafc}
  #wg-table .wg-arrow{display:inline-block;width:14px;color:var(--muted)}
  #wg-table{overflow-x:auto}
  #wg-table th.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
  #wg-table th.th-sort:hover{color:var(--blue)}
  /* WG: Presets, Bereichs-Dropdown, Chart, Bedienform-Tags */
  .wg-presets{display:flex;gap:6px;flex-wrap:wrap;align-self:end}
  .wg-presets button{font-size:12px;padding:6px 10px;border:1px solid #ccd6e0;border-radius:6px;background:#fff;cursor:pointer;color:var(--blue-d)}
  .wg-presets button:hover{background:#eef4fb}
  .wg-presets button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
  .wg-dd{position:relative;align-self:end}
  .wg-dd>button{font-size:13px;padding:7px 12px;border:1px solid #ccd6e0;border-radius:6px;background:#fff;cursor:pointer}
  .wg-dd>button:hover{background:#eef4fb}
  .wg-dd-menu{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:220px;max-height:300px;overflow:auto;background:#fff;border:1px solid #ccd6e0;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12);padding:6px}
  .wg-dd-menu .dd-actions{display:flex;gap:12px;padding:4px 6px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .wg-dd-menu .dd-actions a{font-size:12px;color:var(--blue);cursor:pointer;text-decoration:underline}
  .wg-dd-menu label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 6px;border-radius:5px;cursor:pointer}
  .wg-dd-menu label:hover{background:#f2f6fb}
  .wg-chart-wrap{position:relative;height:280px;margin:4px 0 18px}
  .wg-bed-tag{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:9px;margin-left:6px;vertical-align:middle}
  .wg-bed-BED{background:#fbe3d0;color:#9a3412}
  .wg-bed-SB{background:#e0edff;color:#1e4fa3}
  table.quer{font-size:13px}
  table.quer th,table.quer td{white-space:nowrap;text-align:right;padding:6px 8px}
  table.quer th:first-child,table.quer td:first-child{text-align:left;position:sticky;left:0;background:#fff}
  table.quer thead th{vertical-align:bottom}
  table.quer thead th[colspan]{text-align:center}
  table.quer .qnr{font-weight:400;color:var(--muted);font-size:11px}
  table.quer .qsep{border-left:2px solid var(--line)}
  table.quer tbody tr:nth-child(even){background:#f1f6fc}
  table.quer tbody tr:nth-child(even) td:first-child{background:#f1f6fc}
  .markt-block{margin-bottom:22px}
  .markt-block h3{font-size:16px;font-weight:600;margin:0 0 8px;border-bottom:2px solid var(--line);padding-bottom:4px}
  .markt-block .mk-nr2{font-weight:400;color:var(--muted);font-size:13px}
  .mb-head{cursor:pointer;user-select:none}
  .mb-head .chev::before{content:'▾';display:inline-block;width:1em;color:var(--muted)}
  .markt-block.collapsed .mb-head .chev::before{content:'▸'}
  .markt-block.collapsed table{display:none}
  .grip{cursor:grab;color:var(--muted);font-size:14px;margin-right:6px;user-select:none}
  #vgl-toggle{display:none}   /* nur auf dem Handy sichtbar: Vergleich einklappen */

  /* ---------- Mobile Startansicht ("Heute", <=760px) ----------
     Vorbild: die alte Report-Seite – alle Märkte auf einen Blick, heute vs.
     Vergleichstag bis zur gleichen Stunde. Auf dem Desktop komplett ausgeblendet. */
  #mobil-start{display:none}
  .bottom-nav{display:none}
  /* Stunden-Akkordeon + Mehr-Linkliste: auf Desktop grundsätzlich aus (Isolation).
     Auf Mobile schaltet setMobilView() sie per Inline-Style ein/aus. */
  #mstd-wrap,#m-links,#mobil-datum{display:none}

  /* Stunden-Akkordeon-Stile global: seit Juli 2026 auch Desktop-Tab (body.dstunden). */
    /* Wunsch 3: Stunden-Akkordeon (#mstd-liste) – alle Märkte untereinander. */
    #mstd-wrap{margin:0}
    #mstd-kopf{display:flex;align-items:center;justify-content:space-between;
      gap:10px;margin:0 4px 12px}
    #mstd-kopf .mstd-titel{font-size:16px;font-weight:700;color:var(--blue)}
    /* Marktzeilen im Stunden-Tab wie auf der Heute-Seite: zusammenhaengende Liste,
       Zwei-Spalten-Raster (Name|Umsatz / Meta|Delta), KEIN Chevron-Punkt links. */
    .mstd-list{margin:0 0 10px}
    .mstd-sec{background:var(--card);border:1px solid var(--line);border-bottom:none;overflow:hidden}
    .mstd-sec:first-child{border-radius:12px 12px 0 0}
    .mstd-sec:last-child{border-radius:0 0 12px 12px;border-bottom:1px solid var(--line)}
    .mstd-head{display:grid;grid-template-columns:1fr auto;gap:2px 8px;
      align-items:center;padding:9px 12px;cursor:pointer;min-height:52px;
      -webkit-tap-highlight-color:rgba(0,92,169,.12)}
    .mstd-head:active{background:#eef4fb}
    .mstd-sec.open .mstd-head{background:#f4f8fc}
    .mstd-head .mstd-name{grid-column:1;grid-row:1;font-size:15px;font-weight:600;color:var(--ink)}
    .mstd-head .mstd-ums{grid-column:2;grid-row:1;font-size:16px;font-weight:700;text-align:right}
    .mstd-head .mstd-meta{grid-column:1;grid-row:2;font-size:12px;color:var(--muted)}
    .mstd-head .mstd-delta{grid-column:2;grid-row:2;text-align:right}
    .mstd-body{display:none;border-top:1px solid var(--line)}
    .mstd-sec.open .mstd-body{display:block}
    .mstd-sec.mstd-bl .mstd-head{border-left:3px solid var(--yellow);background:#f6f9fc;padding-left:11px}
    .mstd-sec.mstd-bl .mstd-name{font-size:14px;font-weight:500;color:var(--blue-d)}
    .mstd-tbl{width:100%;border-collapse:collapse;font-size:13px}
    /* 4 Spalten (Stunde|Umsatz|Kunden|Ø-Bon) -> etwas schmaleres Padding, damit es
       auch auf ~360px-Screens ohne Horizontal-Scroll passt und >=12px lesbar bleibt. */
    .mstd-tbl th,.mstd-tbl td{padding:7px 9px;text-align:right;border-bottom:1px solid var(--line);vertical-align:top}
    .mstd-tbl th:first-child,.mstd-tbl td:first-child{text-align:left;white-space:nowrap}
    .mstd-tbl thead th{font-size:11px;color:var(--muted);font-weight:600;background:#f8fafc}
    .mstd-tbl tbody tr:nth-child(even){background:#f9fbfd}
    .mstd-tbl tbody tr:last-child td{border-bottom:none}
    .mstd-tbl tfoot td{font-weight:600;border-top:2px solid var(--line);border-bottom:none;background:#f8fafc}
    .mstd-tbl .mstd-vj{color:var(--muted)}
    /* kompakte Zweitzeile unter dem Umsatz: VJ-Wert + Δ-Pill (nur bei Vergleich) */
    .mstd-tbl .mstd-usub{margin-top:3px;font-size:11px;display:flex;flex-wrap:wrap;
      justify-content:flex-end;align-items:center;gap:5px;line-height:1.3}
    .mstd-tbl .mstd-usub .mstd-vj{white-space:nowrap}
    .mstd-empty{padding:22px 14px;text-align:center;color:var(--muted);font-size:14px}
    .mstd-hidedelta{display:none}
    /* Chart bleibt als eingeklappte Zusatzkarte unter dem Akkordeon erreichbar. */
    #mstd-chartcard{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
    #mstd-chartcard .mstd-cc-head{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;font-size:14px;font-weight:600;color:var(--blue);min-height:48px}
    #mstd-chartcard .mstd-cc-head .mstd-chev{color:var(--muted);font-size:13px;transition:transform .15s}
    #mstd-chartcard.open .mstd-cc-head .mstd-chev{transform:rotate(90deg)}
    #mstd-chartbody{display:none;padding:0 12px 12px}
    #mstd-chartcard.open #mstd-chartbody{display:block}

  /* Heute-Design (Kacheln/Liste/Pills): global, weil die Startansicht seit
     Juli 2026 auch auf dem Desktop laeuft (body.dstart). Sichtbarkeit steuern
     die Media-Queries bzw. body.dstart, nicht diese Stilregeln. */
    .ms-gesamt{background:linear-gradient(135deg,#005ca9,#013f74);color:#fff;
      border-radius:14px;padding:16px 18px;margin:0 12px 12px;
      box-shadow:0 4px 14px rgba(0,60,120,.18)}
    .ms-gesamt .ms-g-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
    .ms-gesamt .ms-g-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.82}
    .ms-gesamt .ms-g-umsatz{font-size:30px;font-weight:700;margin-top:2px;line-height:1.05}
    .ms-gesamt .ms-sub{display:flex;gap:20px;margin-top:12px;padding-top:12px;
      border-top:1px solid rgba(255,255,255,.22)}
    .ms-gesamt .ms-sub .l{font-size:11px;opacity:.82}
    .ms-gesamt .ms-sub .v{font-size:17px;font-weight:600;margin-top:1px}
    .ms-gesamt .ms-sub .v.ms-vgl-datum{font-size:14px;font-weight:500;padding-top:3px;white-space:nowrap}
    /* Delta-Pills */
    .ms-pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;
      border-radius:11px;line-height:1.2;white-space:nowrap}
    .ms-pill.up{background:#e6f4ea;color:#137333}
    .ms-pill.down{background:#fdecea;color:#c5221f}
    .ms-pill.flat{background:#eef0f2;color:#6b7280}
    .ms-gesamt .ms-pill{background:rgba(255,255,255,.16);color:#fff}
    .ms-gesamt .ms-pill.up{color:#c7f0d2} .ms-gesamt .ms-pill.down{color:#ffc9c4}
    .ms-gesamt .ms-brot{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.22)}
    .ms-gesamt .ms-brot .bl{font-size:11px;opacity:.82;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
    .ms-gesamt .ms-brot .brow{display:flex;gap:22px;align-items:baseline}
    .ms-gesamt .ms-brot .bu{font-size:20px;font-weight:700}
    .ms-gesamt .ms-brot .bk{font-size:11px;opacity:.82}
    .ms-gesamt .ms-brot .bkv{font-size:14px;font-weight:600}
    .ms-pill-sm{font-size:11px;padding:2px 7px}

    .ms-liste{margin:0 12px}
    .ms-row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;
      min-height:52px;padding:9px 12px;background:var(--card);border:1px solid var(--line);
      border-bottom:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,92,169,.12)}
    .ms-row:first-child{border-radius:12px 12px 0 0}
    .ms-row:last-child{border-radius:0 0 12px 12px;border-bottom:1px solid var(--line)}
    .ms-row:active{background:#eef4fb}
    .ms-row .ms-name{font-size:15px;font-weight:600;color:var(--ink);grid-column:1;grid-row:1}
    .ms-row .ms-umsatz{font-size:16px;font-weight:700;text-align:right;grid-column:2;grid-row:1}
    .ms-row .ms-meta{font-size:12px;color:var(--muted);grid-column:1;grid-row:2}
    .ms-row .ms-delta{text-align:right;grid-column:2;grid-row:2}
    .ms-bl-row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;
      padding:8px 12px 8px 20px;background:#f6f9fc;border:1px solid var(--line);
      border-top:none;border-bottom:none;border-left:3px solid var(--yellow)}
    .ms-bl-row:last-child{border-bottom:1px solid var(--line);border-radius:0 0 12px 12px}
    .ms-bl-row .ms-bl-name{grid-column:1;grid-row:1;font-size:14px;font-weight:500;color:var(--blue-d)}
    .ms-bl-row .ms-bl-umsatz{grid-column:2;grid-row:1;font-size:15px;font-weight:600;text-align:right;color:var(--blue-d)}
    .ms-bl-row .ms-bl-meta{grid-column:1;grid-row:2;font-size:11px;color:var(--muted)}
    .ms-bl-row .ms-bl-delta{grid-column:2;grid-row:2;text-align:right}
    .ms-liste .ms-empty{background:var(--card);border:1px solid var(--line);border-radius:12px;
      padding:22px 14px;text-align:center;color:var(--muted);font-size:14px}
    .ms-hinweis{font-size:11px;color:var(--muted);margin:8px 12px 0;text-align:center}
    /* Wunsch 2: Vergleichs-Umschalter oben rechts in der Startansicht / im Stunden-Kopf.
       WICHTIG (Bugfix Juli 2026): Der Start-Button liegt ABSOLUT über der blauen
       .ms-gesamt-Kachel, die im DOM NACH dem Button kommt. Ohne hohen z-index kann
       die Kachel (Schatten/Fläche) den Tap schlucken -> Button "ohne Funktion".
       Deshalb z-index klar über die Kachel + touch-action:manipulation (kein 300ms-
       Delay, kein Doppel-Tap-Zoom auf iOS) + eine deutlich sichtbare Umschaltung. */
    .ms-vgltoggle{position:absolute;top:12px;right:22px;z-index:5;
      display:inline-flex;align-items:center;gap:4px;
      font-size:13px;font-weight:700;padding:7px 13px;border-radius:16px;
      border:1.5px solid var(--blue);background:#fff;color:var(--blue);
      cursor:pointer;line-height:1;min-height:34px;
      touch-action:manipulation;-webkit-tap-highlight-color:transparent;
      transition:background .12s,color .12s,box-shadow .12s}
    .ms-vgltoggle:active{transform:scale(.97)}
    /* Auf der BLAUEN Kachel (Startansicht): OFF = weiße Outline auf Blau (klar sichtbar),
       ON = weiß GEFÜLLT mit blauem Text + Häkchen. Unübersehbarer Zustandswechsel. */
    #mobil-start .ms-vgltoggle{border-color:#fff;background:transparent;color:#fff}
    #mobil-start .ms-vgltoggle.on{background:#fff;color:var(--blue);border-color:#fff;
      box-shadow:0 2px 6px rgba(0,0,0,.18)}
    /* Im Stunden-Kopf (WEISSER Grund): OFF = blaue Outline, ON = blau gefüllt weiß. */
    #mstd-vgltoggle{border-color:var(--blue);background:#fff;color:var(--blue)}
    #mstd-vgltoggle.on{background:var(--blue);color:#fff;border-color:var(--blue)}
    #mobil-start{position:relative}
  @media(max-width:760px){
    #mobil-start{display:block;margin:0 -12px 8px}   /* randlos bis an die main-Kanten */

    /* Datum-Tab im Heute-Design: Karten fuer Markt, Tag, Vergleichstag. */
    #mobil-datum{margin:0 12px}
    .md-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 12px}
    .md-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
    .md-select{width:100%;font-size:16px;font-weight:600;color:var(--ink);padding:12px;
      border:1px solid var(--line);border-radius:10px;background:#fff;min-height:50px}
    .md-daterow{display:grid;grid-template-columns:50px 1fr 50px;gap:8px;align-items:stretch}
    .md-step{font-size:22px;line-height:1;border:1px solid var(--line);border-radius:10px;
      background:#fff;color:var(--blue-d);cursor:pointer;min-height:52px;
      -webkit-tap-highlight-color:rgba(0,92,169,.12)}
    .md-step:active{background:#eef4fb}
    .md-datedisp{display:flex;flex-direction:column;align-items:center;justify-content:center;
      border:1px solid var(--line);border-radius:10px;background:#f8fafc;min-height:52px;padding:6px 8px}
    .md-datedisp .md-dd-main{font-size:17px;font-weight:700;color:var(--ink)}
    .md-datedisp .md-dd-wd{font-size:12px;color:var(--muted);margin-top:1px}
    .md-datedisp.md-empty .md-dd-main{color:var(--muted);font-weight:600}
    .md-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .md-chip{font-size:14px;padding:0 14px;min-height:44px;border:1px solid var(--blue);
      border-radius:999px;background:#fff;color:var(--blue-d);cursor:pointer;
      display:inline-flex;align-items:center;gap:6px;-webkit-tap-highlight-color:rgba(0,92,169,.12)}
    .md-chip:active{background:#eef4fb}
    .md-chip.md-off{border-color:var(--line);color:var(--muted)}
    .md-dtwrap{position:relative}
    .md-dtcal{position:absolute;top:6px;right:8px;width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none}
    .md-dtinput{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;margin:0}

    /* Bottom-Navigation (nur mobile) */
    .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
      background:#fff;border-top:1px solid var(--line);
      box-shadow:0 -2px 10px rgba(0,0,0,.06);
      padding-bottom:env(safe-area-inset-bottom)}
    .bottom-nav button{flex:1;background:none;border:none;border-radius:0;
      display:flex;flex-direction:column;align-items:center;gap:2px;
      padding:8px 2px 6px;color:var(--muted);font-size:11px;cursor:pointer;min-height:52px}
    .bottom-nav button .bn-ic{font-size:19px;line-height:1}
    .bottom-nav button.active{color:var(--blue)}
    .bottom-nav button:hover{background:#f4f8fc}

    /* Wunsch 1: Kopf-Links (Status/Öffnungszeiten/Einstellungen) verschwinden aus
       dem Kopf – sie leben auf Mobile in der "Mehr"-Ansicht als Linkliste. */
    .head-link{display:none !important}
    /* Linkliste ganz oben in "Mehr" (#m-links). Nur mobil sichtbar (im Media-Query). */
    #m-links{margin:0 0 14px}
    #m-links a{display:flex;align-items:center;gap:12px;min-height:48px;
      padding:12px 14px;background:var(--card);border:1px solid var(--line);
      border-bottom:none;color:var(--ink);text-decoration:none;font-size:15px;
      -webkit-tap-highlight-color:rgba(0,92,169,.12)}
    #m-links a:first-child{border-radius:12px 12px 0 0}
    #m-links a:last-child{border-radius:0 0 12px 12px;border-bottom:1px solid var(--line)}
    #m-links a:active{background:#eef4fb}
    #m-links a .ml-ic{width:22px;height:22px;flex:0 0 22px;color:var(--blue);
      display:flex;align-items:center;justify-content:center}
    #m-links a .ml-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;
      stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    #m-links a .ml-chev{margin-left:auto;color:var(--muted)}


  }

  /* ---------- Responsives Layout (Smartphone / kleines Tablet) ---------- */
  @media(max-width:760px){
    header{padding:10px 14px;gap:10px}
    header .logo{height:40px}
    header .htitle{font-size:15px;margin-left:auto}
    header a{padding:8px 10px}
    main{padding:12px;max-width:100%}

    /* Steuerung gestapelt, volle Breite */
    .controls{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:10px}
    .controls > div{width:100%}
    select,input[type=date]{width:100%;min-width:0;font-size:16px}   /* 16px verhindert iOS-Auto-Zoom */
    .datestep{flex-wrap:wrap;gap:6px}
    .datestep input[type=date]{width:auto;flex:1 1 110px;min-width:0}   /* Datum bleibt mit Steppern in einer Zeile */
    button.step{padding:10px 12px;font-size:15px;flex:0 0 auto}

    /* Vergleichstag einklappbar: spart oben Platz, volle Funktion bleibt erreichbar */
    #vgl-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;
      width:100%;padding:11px 13px;font-size:15px}
    #vgl-ctrl > label[for=vgl]{display:none}
    #vgl-ctrl .datestep{display:none;margin-top:8px}
    #vgl-ctrl.open .datestep{display:flex}
    .vt-chev{transition:transform .15s;color:var(--muted)}
    #vgl-ctrl.open .vt-chev{transform:rotate(180deg)}

    #hintrow{flex-direction:column;align-items:stretch;gap:8px}
    .rb-box{align-items:flex-start}
    .rb-box #badges{justify-content:flex-start}

    /* Toolbar: Beschriftung oben, Umschalter als horizontal scrollbare Leiste */
    .toolbar{flex-direction:column;align-items:stretch;gap:12px;margin:6px 0 14px}
    .toolbar-rows{width:100%;gap:12px}
    .btn-row{flex-direction:column;align-items:stretch;gap:6px}
    .row-label{min-width:0;font-weight:600}
    .toolbar-btns{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
      gap:6px;padding-bottom:4px;scrollbar-width:thin}
    .toolbar-btns button{flex:0 0 auto;cursor:pointer;padding:10px 14px}
    #markt-kopf{align-items:flex-start;width:100%}
    #markt-kopf .mk-name{font-size:22px}

    /* KPIs + Kachelraster schmaler, damit 1-2 Spalten entstehen */
    .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
    .kpi{padding:12px 14px}
    .kpi .v{font-size:22px}
    .kennzahlen-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

    .card{padding:12px;margin-bottom:14px}
    .card h2{font-size:14px}
    .chart-wrap{height:260px}

    /* Breite Tabellen horizontal scrollbar statt abgeschnitten; erste Spalte bleibt sichtbar */
    #tabelle-card,#maerkte-card,#wochen-card,#wg-card,#topwerte-detail{
      overflow-x:auto;-webkit-overflow-scrolling:touch}
    #tabelle,#uebersicht,#wochen-detail table,#topwerte-detail table{min-width:460px}
    #wg-table table{min-width:520px}
    th,td{padding:8px 7px}
    #tabelle th:first-child,#tabelle td:first-child,
    #uebersicht th:first-child,#uebersicht td:first-child{
      position:sticky;left:0;background:#fff;z-index:1}
    #uebersicht tbody tr:nth-child(even) td:first-child{background:#f1f6fc}

    /* Warengruppen-Steuerung umbrechen */
    .wg-ctrl{gap:8px}
    .wg-ctrl label{flex:1 1 45%}
    .wg-ctrl input,.wg-ctrl select{width:100%}
    .wg-ctrl button{flex:1 1 100%}

    /* Drag&Drop auf Touch ausblenden (mit dem Finger unbrauchbar), Klick-Funktionen bleiben */
    .grip{display:none}
    .kz-tile{cursor:pointer}

    /* Neue Mobile-Startansicht ("Heute", #mobil-start) ersetzt die frühere
       Karten-Priorisierung per order. Die klassischen Steuerelemente und Karten
       (#cards) sind auf dem Handy per Default nachrangig und werden über die
       Bottom-Nav umgeschaltet (Klasse .m-hide blendet sie aus). Desktop bleibt
       unberührt, weil .m-hide nur innerhalb dieses Media-Query wirkt. */
    #cards{display:flex;flex-direction:column}
    /* Reihenfolge in der "Mehr"-Ansicht: Stundenverlauf zuerst, dann der Rest. */
    #chart-card{order:1}
    #kennzahlen-card{order:2}
    #tabelle-card{order:3}
    #maerkte-card{order:4}
    #wochen-card{order:5}
    #quer-card{order:6}
    #alle-card{order:7}
    #wg-card{order:8}
    #brot-card{order:9}

    /* Über die Bottom-Nav ein-/ausblendbare Blöcke. */
    .m-hide{display:none !important}

    /* Platz unten, damit die fixe Bottom-Nav nichts verdeckt (inkl. iOS-Safe-Area). */
    main{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

    /* Kompakte, klebrige Kopfzeile: bleibt beim Scrollen erreichbar */
    header{position:sticky;top:0;z-index:20}
  }
  @media(max-width:400px){
    .kpis,.kennzahlen-grid{grid-template-columns:1fr}
    header .htitle{display:none}
  }

/* ---------- Desktop-Startansicht (Heute-Design) + Tab-Umschalter ----------
   body.dstart blendet die klassischen Bloecke aus und zeigt #mobil-start
   zentriert, ergaenzt um zwei Balkendiagramme (Umsatz je Markt, Brotlaeden).
   Auf Mobile bleibt alles unveraendert (Tabs+Charts dort ausgeblendet). */
#desk-tabs{display:none}
.ms-charts{display:none}
@media(min-width:761px){
  #desk-tabs{display:flex;gap:6px;margin:0 auto 14px;max-width:880px;
    padding:0 12px;box-sizing:border-box;align-items:center}
  #desk-tabs #randbedingungen{margin-left:auto}
  #desk-tabs .rb-box{padding:5px 11px;gap:3px}
  #desk-tabs .wetter-chip{font-size:13px}
  #desk-tabs button{font-size:14px;font-weight:600;padding:8px 22px;cursor:pointer;
    border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted)}
  #desk-tabs button.active{background:var(--blue);border-color:var(--blue);color:#fff}
  #desk-tabs button:hover:not(.active){background:#f4f8fc}
  body.dstart .controls,body.dstart .toolbar,
  body.dstart .kpis,body.dstart #cards{display:none}
  body.dstart #hintrow,body.dstunden #hintrow{display:none !important}
  body.dstart #datenstand,body.dstunden #datenstand{display:none}
  body.dstart #mobil-start{display:block;position:relative;max-width:880px;margin:0 auto}
  body.dstart .ms-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 12px 0}
  .ms-chartcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .ms-cc-title{font-size:13px;font-weight:600;color:var(--blue);margin:0 0 6px}
  .ms-cc-wrap{position:relative;height:240px}
  body.dstart .ms-row:hover{background:#f4f8fc}
  body.dstunden .controls,body.dstunden .toolbar,
  body.dstunden .kpis,body.dstunden #cards{display:none}
  body.dstunden #mstd-wrap{display:block !important;max-width:880px;margin:0 auto}
  body.dstunden .mstd-head:hover{background:#f4f8fc}
  /* Desktop-Stunden übersichtlicher (Wunsch Timo 13.07.2026):
     Seitenhintergrund dunkleres Grau, damit sich die weißen Filial-Karten
     abheben; jede Filiale als eigene Karte mit Abstand -> klare Trennung nach
     "Gesamt"; Stundenzeilen eingerückt (ohne Aufzählungszeichen); "Gesamt"
     farblich abgesetzt; Brotladen als eingerückte Unter-Karte mit eigenem
     Grauton direkt bei seinem Markt. */
  body.dstunden{background:#e8edf3}
  body.dstunden .mstd-sec{border-radius:12px;border-bottom:1px solid var(--line);margin:0 0 16px}
  body.dstunden .mstd-sec.mstd-bl{margin:-10px 0 16px 28px;border-radius:10px;background:#f0f3f8}
  body.dstunden .mstd-sec.mstd-bl .mstd-head{background:#f0f3f8}
  body.dstunden .mstd-sec.mstd-bl.open .mstd-head{background:#e8eef6}
  body.dstunden .mstd-tbl tbody td:first-child:not([colspan]){padding-left:34px}
  body.dstunden .mstd-tbl tfoot td{background:#eef4fb}
  /* Brotladen-Zeile der Start-Übersicht ist jetzt klickbar (-> Stunden). */
  body.dstart .ms-bl-row{cursor:pointer}
  body.dstart .ms-bl-row:hover{background:#f4f8fc}
  body.dstart .ms-vgltoggle{right:26px;top:16px}
  body.dstart .ms-spark{display:block;text-align:right;position:absolute;top:14px;right:166px}
  .ms-spark .sp-cap{font-size:10px;opacity:.75;margin-top:1px}
}
/* Sparkline in der Gesamt-Kachel: nur Desktop-Start (oben eingeschaltet). */
.ms-spark{display:none}


/* ---------- Login-Overlay + Rechte-Ausblendungen ---------- */
#login-overlay{position:fixed;inset:0;z-index:100;background:#f3f6f9;display:flex;align-items:center;justify-content:center;padding:16px}
#login-overlay form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px;width:330px;max-width:100%;box-shadow:0 8px 30px rgba(0,60,120,.12);display:flex;flex-direction:column;gap:10px}
#login-overlay form h2{margin:0 0 4px;color:var(--blue);font-size:20px;text-align:center}
#login-overlay form input{font-size:16px;padding:12px;border:1px solid var(--line);border-radius:10px;width:100%}
#login-overlay form button{font-size:16px;font-weight:600;padding:12px;border:none;border-radius:10px;background:var(--blue);color:#fff;cursor:pointer}
#login-overlay form button:hover{background:var(--blue-d)}
#login-fehler,#reset-fehler{color:#c5221f;font-size:13px;min-height:18px;text-align:center}
#login-fehler.ok,#vergessen-hinweis{color:#137333;font-size:13px;min-height:18px;text-align:center}
.login-link{font-size:13px;color:var(--blue-d);text-align:center;text-decoration:none;margin-top:2px}
.login-link:hover{text-decoration:underline}
.login-text{font-size:13px;color:#555;margin:0}
body.novgl #vgl-ctrl,body.novgl .ms-vgltoggle,body.novgl #mstd-vgltoggle,body.novgl #md-vgl-card{display:none !important}

/* ---------- Collector-LED im Kopf (gruen/orange/rot, grau = unbekannt) ---------- */
#led-collector{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;text-decoration:none}
#led-collector:hover{background:#f4f8fc}
.led{display:inline-block;width:13px;height:13px;border-radius:50%;background:#b6bec7}
.led.gruen{background:#1e9e4a;box-shadow:0 0 5px rgba(30,158,74,.65)}
.led.orange{background:#f2a900;box-shadow:0 0 5px rgba(242,169,0,.65)}
.led.rot{background:#d93025;box-shadow:0 0 5px rgba(217,48,37,.65)}