/* Aurum Control — Gestaltung der App. Als eigene Datei bleibt sie im Gerät
   gespeichert und kommt nur nach einer Änderung neu. */
  :root{
    --bg:#ffffff;
    --bg-muted:#faf8f2;
    --card:#ffffff;
    --border:#ece6d6;
    --text:#17160f;
    --text-muted:#8b8578;
    --nav-text:#3a382f;
    --gold-300:#e9d8a3;
    --gold-500:#c9a227;
    --gold-600:#a8841e;
    --gold-grad:linear-gradient(135deg,#e7c968,#b8912a);
    --green:#1f8a4c;
    --green-bg:#eaf6ee;
    --red:#c9483f;
    --blue:#2f6db5;
    --radius-lg:16px;
    --radius-md:10px;
    --radius-sm:7px;
    --shadow:0 1px 2px rgba(23,22,15,0.04), 0 10px 24px rgba(23,22,15,0.04);
  }

  /* ---------- Dunkles Design ----------
     Dieselben Rollen, andere Werte: Hintergrund tief, Karten etwas heller,
     Gold bleibt Gold. Umgeschaltet wird über data-theme am <html>; ohne
     eigene Wahl gilt, was das Gerät sagt (dunkler Modus im System). */
  :root[data-theme="dunkel"]{
    --bg:#15140f;
    --bg-muted:#1c1a14;
    --card:#1f1d16;
    --border:#332f24;
    --text:#f3eedf;
    --text-muted:#a49d8b;
    --nav-text:#ddd6c4;
    --gold-300:#6b5a2c;
    --gold-500:#d9b544;
    --gold-600:#e2c565;
    --green:#4bbd7c;
    --green-bg:#1b2b21;
    --red:#e2685c;
    --blue:#6ea8e6;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="hell"]){
      --bg:#15140f;
      --bg-muted:#1c1a14;
      --card:#1f1d16;
      --border:#332f24;
      --text:#f3eedf;
      --text-muted:#a49d8b;
      --nav-text:#ddd6c4;
      --gold-300:#6b5a2c;
      --gold-500:#d9b544;
      --gold-600:#e2c565;
      --green:#4bbd7c;
      --green-bg:#1b2b21;
      --red:#e2685c;
      --blue:#6ea8e6;
      --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
      color-scheme: dark;
    }
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Inter',system-ui,sans-serif;
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
  }
  .num, .display{
    font-family:'Fraunces',serif;
    font-feature-settings:"ss01";
  }
  a{color:inherit;text-decoration:none;}

  /* ---------- Layout ---------- */
  .shell{display:flex;min-height:100vh;}
  .sidebar{
    width:248px;flex:none;
    border-right:1px solid var(--border);
    padding:24px 16px;
    display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;
    /* Ist der Bildschirm niedriger als das Menü, muss es scrollen — sonst
       sind die unteren Einträge, die Preisreferenz und die Konto-Knöpfe
       nicht erreichbar. */
    height:100dvh;
    overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  }
  .sidebar::-webkit-scrollbar{width:8px;}
  .sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
  .sidebar::-webkit-scrollbar-track{background:transparent;}
  .logo{display:flex;align-items:center;gap:10px;padding:4px 8px 28px;}
  .logo-mark{
    width:34px;height:34px;border-radius:8px;background:#111;
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-500);font-family:'Fraunces',serif;font-weight:600;font-size:19px;
  }
  .logo-text b{display:block;font-size:13.5px;letter-spacing:.02em;font-weight:700;line-height:1.15;}
  .logo-text span{display:block;font-size:8.5px;letter-spacing:.16em;color:var(--text-muted);font-weight:600;}

  .nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
  .nav li a{
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;border-radius:9px;
    font-size:13.5px;font-weight:500;color:var(--nav-text);
  }
  .nav li a:hover{background:var(--bg-muted);}
  .nav li a.active{background:var(--gold-grad);color:#171204;font-weight:600;}
  .nav-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex:none;}
  .nav-badge{
    margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.03em;
    background:var(--gold-300);color:#5b4712;padding:2px 7px;border-radius:20px;
  }
  .nav-section-label{
    font-size:10px;letter-spacing:.12em;color:var(--text-muted);
    font-weight:700;margin:22px 12px 8px;
  }
  .nav-sub{list-style:none;margin:0;padding:0;display:none;flex-direction:column;gap:1px;margin-left:18px;}
  .nav-sub.visible{display:flex;}
  .nav-sub li a{
    display:flex;align-items:center;gap:8px;
    padding:6px 10px;border-radius:7px;
    font-size:12.5px;font-weight:500;color:var(--nav-text);
  }
  .nav-sub li a:hover{background:var(--bg-muted);}
  .nav-sub li a.active{background:var(--gold-100,#fdf5d8);color:#171204;font-weight:600;}
  :root[data-theme="dunkel"] .nav-sub li a.active{background:#3a3220;color:var(--gold-600);}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="hell"]) .nav-sub li a.active{background:#3a3220;color:var(--gold-600);} }

  .sidebar-footer{padding-top:12px;border-top:1px solid var(--border);}
  .nav-app-installieren{display:flex;align-items:center;gap:9px;margin:auto 0 0;padding:9px 12px;
    border:1px solid var(--gold-300);border-radius:10px;background:var(--bg-muted);
    font-size:12.5px;font-weight:600;color:var(--gold-600);}
  .nav-app-installieren:hover{background:var(--bg-muted);}
  /* Frage stellen: wie „App installieren“, aber direkt unter dem Menü */
  .nav-frage{display:flex;align-items:center;gap:9px;margin:8px 0 0;padding:9px 12px;border-radius:9px;
    font-size:13.5px;font-weight:600;color:var(--gold-600);text-decoration:none;}
  .nav-frage:hover{background:var(--bg-muted);}
  .nav-frage svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;}
  .nav-app-installieren svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;}
  .nav-app-installieren + #preislisteAuswahlWrap{margin-top:8px !important;}
  .nav-app-installieren[hidden]{display:none;}
  .account{display:flex;align-items:center;gap:10px;padding:8px;}
  .konto-knoepfe{display:flex;gap:6px;padding:0 8px 6px;}
  .konto-knoepfe .btn-logout{margin-left:0;flex:1;min-width:0;padding:6px 0;font-size:13px;
    text-align:center;line-height:1.2;}
  .avatar{
    width:32px;height:32px;border-radius:50%;background:var(--gold-grad);
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;color:#171204;flex:none;
  }
  .account .name{font-size:13px;font-weight:600;}
  .account .id{font-size:11px;color:var(--text-muted);}
  .btn-logout{
    margin-left:auto;padding:4px 10px;border-radius:7px;font-size:11.5px;font-weight:600;
    border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--text-muted);
    transition:background .15s,color .15s;
  }
  .btn-logout:hover{background:var(--bg-muted);color:var(--red);}
  .admin-link{
    display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;
    font-size:12.5px;font-weight:600;color:var(--gold-600);
    background:transparent;border:none;cursor:pointer;width:100%;text-align:left;
    transition:background .15s;
  }
  .admin-link:hover{background:var(--bg-muted);}
  .tg-chips{display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px 8px;}
  .tg-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--gold-300);color:#5b4712;}
  :root[data-theme="dunkel"] .tg-chip{background:#3a3220;color:var(--gold-600);}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="hell"]) .tg-chip{background:#3a3220;color:var(--gold-600);} }
  .field-wrap{display:flex;flex-direction:column;gap:4px;}
  .field-label{font-size:11.5px;font-weight:600;color:var(--text-muted);}
  .field-input{border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:13.5px;font-family:inherit;color:var(--text);background:var(--card);outline:none;width:100%;}
  .field-input:focus{border-color:var(--gold-500);}
  textarea.field-input{font-family:inherit;}
  .btn-sm{padding:7px 14px;font-size:12.5px;font-weight:600;border-radius:8px;border:none;background:var(--gold-grad);color:#171204;cursor:pointer;}
  .btn-sm.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
  .btn-sm:hover{filter:brightness(1.06);}
  .del-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;padding:2px 6px;border-radius:5px;}
  .del-btn:hover{color:var(--red);background:var(--bg-muted);}
  .kunden-subtab{
    background:none;border:none;cursor:pointer;font-size:13.5px;font-weight:600;
    font-family:inherit;color:var(--text-muted);padding:10px 16px;
    border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;
  }
  .kunden-subtab.active{color:var(--gold-600);border-bottom-color:var(--gold-500);}
  .kunden-subtab:hover{color:var(--text);}

  /* min-width:0 — sonst wächst der Inhaltsbereich als Flex-Kind mit dem
     breitesten Inhalt mit, statt dass Tabellen in ihrem Rahmen scrollen. */
  .main{flex:1;min-width:0;padding:28px 36px 64px;max-width:1400px;}
  .page-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
  .page-head h1{font-family:'Fraunces',serif;font-weight:500;font-size:26px;margin:0;}
  .page-head p{margin:2px 0 0;color:var(--text-muted);font-size:13.5px;}

  /* ---------- Cards ---------- */
  .card{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
  }
  .card-pad{padding:20px 22px;}
  /* Was eine Seite kann und noch nicht benutzt wird — unter dem Untertitel.
     Ruhig genug, um nicht zu drängen, deutlich genug, um nicht übersehen zu
     werden: ein goldener Strich links, sonst nichts. */
  .seite-offen{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
  .seite-offen .offen-zeile{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
    font-size:12.5px;color:var(--text-muted);border-left:2px solid var(--gold-500);
    padding:2px 0 2px 10px;}
  .seite-offen .offen-name{color:var(--text);font-weight:600;}
  .seite-offen button{font-size:12px;padding:1px 9px;}
  @media print{.seite-offen{display:none;}}
  .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
  .card-head h2{font-size:15px;font-weight:600;margin:0;}
  .card-head p.sub{font-size:12.5px;color:var(--text-muted);margin:2px 0 0;}

  .row{display:flex;gap:18px;flex-wrap:wrap;}
  .row > .card{flex:1;min-width:260px;}
  section.block{margin-bottom:28px;}
  section.block > h2.section-title{
    font-family:'Fraunces',serif;font-weight:500;font-size:19px;margin:0 0 14px;
  }

  /* ---------- Form controls ---------- */
  label.field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-muted);font-weight:600;}
  select, input[type=number], input[type=text]{
    font-family:'Inter',sans-serif;font-size:13.5px;color:var(--text);
    padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);
    background:var(--card);outline:none;min-width:0;
  }
  select:focus, input:focus{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,39,.15);}
  .toggle{
    position:relative;width:38px;height:22px;border-radius:20px;background:#e6e2d3;
    border:none;cursor:pointer;flex:none;transition:background .15s;
  }
  .toggle::after{
    content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s;
  }
  .toggle.on{background:var(--gold-grad);}
  .toggle.on::after{transform:translateX(16px);}

  .btn{
    font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
    padding:10px 18px;border-radius:22px;border:none;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;
  }
  .btn-gold{background:var(--gold-grad);color:#171204;}
  .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
  .btn:hover{filter:brightness(1.04);}

  .pill-toggle{display:inline-flex;background:var(--bg-muted);border:1px solid var(--border);border-radius:20px;padding:3px;gap:2px;}
  /* Passt die Leiste nicht in die Breite (Handy), wird sie seitlich gewischt
     statt die Seite zu verbreitern. */
  .pill-toggle{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .pill-toggle::-webkit-scrollbar{display:none;}
  .pill-toggle button{flex:none;}
  .pill-toggle button{
    border:none;background:transparent;padding:6px 13px;border-radius:16px;font-size:12.5px;font-weight:600;
    color:var(--text-muted);cursor:pointer;
  }
  .pill-toggle button.active{background:var(--card);color:var(--text);box-shadow:var(--shadow);}

/* ---------- Hauptteil und Fußnote ---------- */
  /* „Ergebnis je Laufzeit" ist das, wofür die Seite da ist, sah aber aus wie
     jede andere Karte. Eine goldene Kante oben hebt sie heraus, ohne dass
     etwas blinkt. */
  .karte-haupt{
    position:relative;overflow:hidden;
    border-color:var(--gold-300);
    box-shadow:0 1px 2px rgba(23,22,15,.05),0 14px 34px rgba(168,132,30,.13);
  }
  .karte-haupt::before{
    content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--gold-grad);
  }
  .karte-haupt>.card-pad:first-child{padding-top:22px;}
  /* Eine Anmerkung unter der Tabelle, keine Lektüre davor. */
  .fussnote{
    font-size:12px;line-height:1.65;color:var(--text-muted);
    margin:16px 0 0;padding:12px 0 2px;border-top:1px solid var(--border);
  }
  .fussnote b{color:var(--text);font-weight:600;}

  /* ---------- Stat mini cards ---------- */
  .stat-value{font-size:26px;font-weight:500;}
  .stat-label{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
  .delta{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:3px;}
  .delta.pos{color:var(--green);background:var(--green-bg);}
  .delta.neg{color:var(--red);background:color-mix(in srgb, var(--red) 12%, var(--card));}

  /* ---------- Table ---------- */
  table{width:100%;border-collapse:collapse;font-size:13px;}
  thead th{
    text-align:left;font-size:11px;letter-spacing:.03em;text-transform:uppercase;
    color:var(--text-muted);font-weight:700;padding:0 10px 10px;border-bottom:1px solid var(--border);
  }
  tbody td{padding:12px 10px;border-bottom:1px solid #f2efe4;vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--bg-muted);}
  td.num, th.num{text-align:right;font-variant-numeric:tabular-nums;}

  .coin{
    width:30px;height:30px;border-radius:50%;flex:none;
    background:radial-gradient(circle at 32% 28%, #f6e6ab, #c9a227 60%, #8a6c17);
    box-shadow:inset 0 -2px 3px rgba(0,0,0,.25), inset 0 2px 2px rgba(255,255,255,.5);
  }
  .weight-cell{display:flex;align-items:center;gap:10px;}
  .weight-cell .label b{display:block;font-size:13px;font-weight:600;}
  .weight-cell .label span{font-size:11px;color:var(--text-muted);}

  .badge-pct{font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--bg-muted);color:var(--text-muted);}

  .empty-state{padding:40px 20px;text-align:center;color:var(--text-muted);font-size:13px;}
  .loading{opacity:.5;}

  /* Modelle als kompakte Kacheln statt als volle Zeilen — bei acht Modellen
     kostete das früher mehrere Bildschirmhöhen. */
  /* auto-fit statt auto-fill: leere Spalten fallen zusammen, der Platz geht
     an die Karten, die es gibt. */
  .modell-grid{display:grid;gap:10px;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
  .model-row{border:1px solid var(--border);border-radius:10px;padding:11px 12px;
    background:var(--card);display:flex;flex-direction:column;gap:9px;
    justify-content:space-between;}
  .model-row .name b{font-size:12.5px;line-height:1.25;}
  /* Name und Laufzeit in einer Zeile, die Laufzeit nachgestellt und ruhiger.
     Bricht der Name um, rutscht sie sauber darunter. */
  .model-row .name{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;}
  .model-row .name span{font-size:10.5px;color:var(--text-muted);white-space:nowrap;}
  .model-row .controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .model-row .toggle-group{display:flex;align-items:center;gap:6px;font-size:10.5px;
    color:var(--text-muted);font-weight:600;white-space:nowrap;}
  /* Die Auswahl braucht Platz für ihren Text, sonst steht dort „Refi: Sof…".
     Die Felder teilen sich die Zeile zu gleichen Teilen. */
  .model-row .controls select{font-size:11px;padding:4px 6px;border:1px solid var(--border);
    border-radius:7px;background:var(--bg-muted);color:var(--text);
    min-width:132px;flex:1 1 0;}
  .model-row .controls select:disabled{color:var(--text-muted);}

  /* Annahmen als eigene Zeile: die Felder nebeneinander, der Knopf als
     letzte Spalte — wie im öffentlichen Rechner. */
  .hr-felder{display:grid;gap:14px;align-items:end;
    grid-template-columns:repeat(auto-fit,minmax(165px,1fr));}
  .hr-felder .field{margin:0;}
  /* Schalter in der Feldbeschriftung: er gehört zum Feld darunter, nicht
     als eigene Spalte daneben — sonst bricht die Beschriftung um. */
  .feld-schalter{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
  .feld-schalter input[type=checkbox]{margin:0;flex:none;}
  label.field:has(#inSteuer:not(:checked)) input[type=number]{opacity:.5;}
  .hr-felder .btn{width:100%;justify-content:center;}

  /* Ziele: Eingabe links, daneben je Modell, wann es so weit ist */
  .hr-ziele{display:grid;gap:18px 40px;margin-top:18px;padding-top:18px;
    border-top:1px solid var(--border);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,620px),1fr));}
  .hr-ziel{display:grid;gap:12px 24px;align-items:start;grid-template-columns:190px minmax(0,1fr);}
  @media (max-width:560px){ .hr-ziel{grid-template-columns:1fr;} }
  .hr-ziel .field{margin:0;}
  /* Die Antwort als kleine Tabelle, oben bündig mit dem Eingabefeld */
  .hr-ziel-info{font-size:12.5px;line-height:1.4;padding-top:19px;min-width:0;}
  .hr-ziel-info .leer{color:var(--text-muted);display:block;padding-top:9px;}
  .ziel-liste{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);
    column-gap:18px;}
  .ziel-liste .zeile{display:contents;}
  .ziel-liste .zeile > span{padding:6px 0;border-bottom:1px solid var(--border);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;}
  .ziel-liste .zeile:last-child > span{border-bottom:none;}
  .ziel-liste .name{color:var(--text-muted);}
  .ziel-liste .datum{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
  .ziel-liste .dauer{color:var(--text-muted);}
  .ziel-liste .nie{grid-column:span 2;color:var(--text-muted);font-style:italic;}
  .ziel-marke{display:inline-block;width:16px;height:4px;border-radius:2px;
    vertical-align:middle;margin-right:6px;}
  .ziel-marke.wert{background:var(--gold-500);}
  .ziel-marke.monat{background:var(--blue);}
  #ergebnisTabelle td.ziel-wert{box-shadow:inset 0 -3px 0 var(--gold-500);}
  #ergebnisTabelle td.ziel-monat{box-shadow:inset 0 3px 0 var(--blue);}
  #ergebnisTabelle td.ziel-wert.ziel-monat{
    box-shadow:inset 0 -3px 0 var(--gold-500), inset 0 3px 0 var(--blue);}

  /* Kopfzeile: Link zum Verschicken links, Goldkurs rechts — gleich breit */
  .hr-kopf{display:grid;gap:16px;margin-bottom:16px;align-items:start;
    grid-template-columns:repeat(2,minmax(0,1fr));}
  @media (max-width:980px){
    .hr-kopf{grid-template-columns:1fr;}
  }

  .stueck-summary{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap;}
  .stueck-summary .box{flex:1;min-width:110px;}
  .stueck-summary .box .v{font-size:19px;font-weight:500;}
  .stueck-summary .box .l{font-size:11.5px;color:var(--text-muted);}

  .sidebar-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .sidebar-kopf .logo{flex:1;min-width:0;}
  .glocke{position:relative;width:38px;height:38px;flex:none;cursor:pointer;display:inline-flex;
    align-items:center;justify-content:center;border:1px solid var(--border);border-radius:9px;
    background:var(--card);color:var(--text-muted);}
  .glocke:hover{color:var(--text);background:var(--bg-muted);}
  .glocke svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;}
  .glocke-zahl{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
    border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
    line-height:18px;text-align:center;border:2px solid var(--card);box-sizing:content-box;}
  .glocke-zahl[hidden]{display:none;}
  .burger{
    display:none;width:38px;height:38px;flex:none;cursor:pointer;
    align-items:center;justify-content:center;
    border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);
  }
  .burger svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;}

  @media (max-width:900px){
    /* Schmale Bildschirme: nur eine kompakte Kopfzeile, das vollständige
       Menü klappt bei Bedarf darunter auf. */
    .shell{display:block;}
    .sidebar{
      width:auto;height:auto;min-height:0;position:sticky;top:0;z-index:60;
      border-right:none;border-bottom:1px solid var(--border);
      background:var(--card);padding:8px 12px;display:block;
    }
    .logo{padding:0;}
    .burger{display:inline-flex;}
    .nav, .sidebar-footer{display:none;}
    /* Aufgeklappt darf die ganze Schublade scrollen — am Handy passt sie
       sonst mit Konto-Knöpfen und Preisreferenz nicht auf den Schirm. */
    .sidebar.offen{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;}
    .sidebar.offen .nav{display:block;margin-top:10px;}
    .sidebar.offen .sidebar-footer{display:block;margin-top:6px;}
    /* „Frage stellen“ gehört zum Menü und klappt mit ihm auf. */
    .nav-frage{display:none;}
    .sidebar.offen .nav-frage{display:flex;}
    /* Am Handy wirbt ohnehin der Streifen unten; im Menü nur, wenn es offen ist */
    .nav-app-installieren{display:none;}
    .sidebar.offen .nav-app-installieren:not([hidden]){display:flex;margin:8px 0 0;}
    .nav a{padding:11px 12px;}
    .main{padding:16px 14px 40px;}
    .mobile-nav{display:none !important;}
  }
  .mobile-nav{
    display:none;
    position:fixed;bottom:0;left:0;right:0;
    background:var(--card);border-top:1px solid var(--border);
    z-index:100;
  }
  .mobile-nav a{
    flex:1;display:flex;flex-direction:column;align-items:center;
    padding:10px 0 12px;font-size:11px;font-weight:600;
    color:var(--text-muted);letter-spacing:.03em;gap:4px;
    text-decoration:none;
  }
  .mobile-nav a.active{color:var(--gold-600);}
  .mobile-nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;}
  /* ---------- Druck / PDF ---------- */
  @media print {
    @page { size: A4 landscape; margin: 12mm; }
    body { background:#fff; }
    .sidebar, .mobile-nav, .drucken-aus,
    #tgSelectorWrap, #preislisteAuswahlWrap { display:none !important; }
    .shell { display:block; }
    .main { padding:0; max-width:none; }
    .card { box-shadow:none; break-inside:avoid; }
    .card, table { page-break-inside:auto; }
    tr, .card-pad { break-inside:avoid; }
    thead { display:table-header-group; }
    #ov-monat { border:none; padding:0; font-weight:600; }
    .druck-kopf { display:block !important; }
    #hochrechnung .section-title { display:none; }
    #hochrechnung select, #hochrechnung .toggle { border:none; }
    footer { font-size:9.5px; margin-top:14px; }
    a[href]:after { content:none !important; }
  }
  .druck-kopf { display:none; }

  /* Baum- und KPI-Stile stehen jetzt in baum.css — gemeinsam mit admin.php */

  /* ---- Übersichtstabelle: Bonusblock und Summe klar absetzen ---- */
  /* Beträge nie umbrechen — sonst steht das Eurozeichen in der zweiten Zeile. */
  #ov-tabelle td.num, #ov-summe-row td.num{white-space:nowrap;}
  #ov-tabelle tr.bonus td{color:var(--text-muted);}
  #ov-tabelle tr.bonus-erste td{border-top:1px dashed var(--border);}
  #ov-summe-row tr{background:var(--bg-muted, #f6f5f2);}
  /* Kein border-radius: die Tabelle läuft mit border-collapse, dort greift er nicht */
  #ov-summe-row td{border-top:2px solid var(--gold-500);padding-top:11px;padding-bottom:11px;
    font-weight:700;}

  /* ---- Übersichts-Kacheln ---- */
  /* Die Zeile, mit der verglichen wird: die eigene Stückelung, noch einmal
     unter den Alternativen. Ein Farbton statt eines Wortes — man sieht, wo
     die eigene Wahl in der nach Kosten sortierten Liste steht. */
  .alt-basis{background:rgba(201,162,39,.10);}
  .alt-basis td{border-bottom-color:var(--gold-300);}
  :root[data-theme="dunkel"] .alt-basis{background:rgba(217,181,68,.13);}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="hell"]) .alt-basis{background:rgba(217,181,68,.13);} }
  /* Die Knöpfe im Info-Feld, die in einen anderen Bereich führen. */
  .info-wege{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
  /* Zwischenüberschrift für einen zweiten Abschnitt auf derselben Seite —
     dort, wo früher ein eigener Menüpunkt die Grenze gezogen hat. */
  .seiten-abschnitt{margin:28px 0 14px;padding-top:18px;border-top:1px solid var(--border);}
  .seiten-abschnitt h2{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin:0;}
  .seiten-abschnitt p{font-size:12.5px;color:var(--text-muted);margin:3px 0 0;}
  .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr));
    gap:12px;margin-bottom:18px;}
  /* Summen über Tabellen: drei oder vier nebeneinander, am Handy zwei */
  .summen-reihe{display:grid;gap:14px;margin-bottom:18px;
    grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr));}
  @media (max-width:700px){ .summen-reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} }
  /* Eingabezeilen in Formularen: am Handy zwei, ganz schmal eine Spalte */
  .form-reihe{display:grid;gap:10px;margin-bottom:10px;}
  .form-reihe > *{min-width:0;}
  @media (max-width:700px){ .form-reihe{grid-template-columns:1fr 1fr !important;} }
  @media (max-width:420px){ .form-reihe{grid-template-columns:1fr !important;} }
  /* Kompakte Variante für die Monatsdetails: sechs Beträge nebeneinander. */
  .zahl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px;}
  /* ---------- Kalender ---------- */
/* Sieben Spalten, gleich breit. Die Tage tragen ihre Termine als kleine
   Streifen — Farbe nach Art, damit man den Monat überfliegen kann, ohne zu
   lesen. */
.kal-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.kal-kopf{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--text-muted);text-align:center;padding:2px 0 6px;}
.kal-tag{min-height:86px;border:1px solid var(--border);border-radius:9px;padding:5px 6px;
  background:var(--card);display:flex;flex-direction:column;gap:3px;}
.kal-tag.fremd{background:var(--bg-muted);opacity:.55;}
.kal-tag.heute{border-color:var(--gold-500);box-shadow:0 0 0 1px var(--gold-500) inset;}
.kal-zahl{font-size:11.5px;font-weight:600;color:var(--text-muted);}
.kal-tag.heute .kal-zahl{color:var(--gold-600);}
.kal-eintrag{font-size:10.5px;line-height:1.35;border-radius:5px;padding:2px 5px;
  border-left:3px solid var(--text-muted);background:var(--bg-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;}
.kal-eintrag.gold{border-left-color:var(--gold-500);}
.kal-eintrag.rot{border-left-color:var(--red);}
.kal-eintrag.blau{border-left-color:#3b7dd8;}
.kal-eintrag.grau{border-left-color:var(--text-muted);}
/* Am Handy wird aus dem Raster eine Liste: Sieben Spalten auf 380 Pixel
   ergäben Kästchen, in denen nichts lesbar ist. */
@media (max-width:760px){
  .kal-gitter{grid-template-columns:1fr;}
  .kal-kopf{display:none;}
  .kal-tag{min-height:0;}
  .kal-tag.leer{display:none;}
}

.zahl-karte{background:var(--card);border:1px solid var(--border);
    border-radius:11px;padding:11px 13px;}
  .zahl-karte .titel{font-size:11px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--text-muted);}
  .zahl-karte .wert{font-family:'Fraunces',serif;font-size:19px;margin-top:5px;
    line-height:1.15;}
  .zahl-karte.summe{border-color:var(--gold-500);background:var(--bg-muted);}
  .zahl-karte.summe .wert{font-weight:600;}
  /* Die Linie zeigt denselben Zeitraum wie die Grafik darüber. */
  .zahl-karte .spark{margin-top:6px;height:26px;}
  .kpi-karte{position:relative;overflow:hidden;background:var(--card);
    border:1px solid var(--border);border-radius:13px;padding:14px 16px 12px;
    display:flex;flex-direction:column;min-height:138px;}
  /* Sparziel: Balken von 0 bis zum Ziel */
  .ziel-balken{position:relative;height:14px;border-radius:999px;background:var(--bg-muted);
    border:1px solid var(--border);overflow:hidden;}
  .ziel-fuellung{height:100%;border-radius:999px;background:var(--gold-grad,linear-gradient(135deg,#e7c968,#b8912a));
    transition:width .6s ease;}
  :root[data-theme="dunkel"] .ziel-fuellung{background:linear-gradient(135deg,#d9b544,#8a6f22);}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="hell"]) .ziel-fuellung{
    background:linear-gradient(135deg,#d9b544,#8a6f22);} }
  /* Im selben Balken: der selbst eingesetzte Teil, in eigener Farbe. */
  .ziel-eigen{position:absolute;left:0;top:0;height:100%;border-radius:999px 0 0 999px;
    background:var(--blue);opacity:.85;transition:width .6s ease;
    box-shadow:1px 0 0 var(--card);}
  .ziel-punkt{display:inline-block;width:8px;height:8px;border-radius:999px;
    background:var(--blue);margin-right:4px;vertical-align:middle;}
  .ziel-zeile{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
    font-size:13px;margin-top:8px;}

  /* Platzhalter, solange die Übersicht lädt */
  .kpi-karte.kpi-laedt{min-height:112px;}
  .kpi-karte.kpi-laedt .titel,.kpi-karte.kpi-laedt .wert,.kpi-karte.kpi-laedt .zweit{
    border-radius:6px;background:linear-gradient(90deg,var(--bg-muted) 25%,var(--border) 50%,var(--bg-muted) 75%);
    background-size:200% 100%;animation:kpi-laedt 1.2s ease-in-out infinite;}
  .kpi-karte.kpi-laedt .titel{width:45%;height:10px;}
  .kpi-karte.kpi-laedt .wert{width:70%;height:22px;margin-top:12px;}
  .kpi-karte.kpi-laedt .zweit{width:55%;height:9px;margin-top:10px;}
  @keyframes kpi-laedt{from{background-position:200% 0;}to{background-position:-200% 0;}}
  @media (prefers-reduced-motion: reduce){.kpi-karte.kpi-laedt *{animation:none !important;}}
  .kpi-karte.betont{border-color:var(--gold-500);
    box-shadow:0 0 0 1px rgba(197,160,72,.25);}
  /* Die Kurve liegt hinter dem Text und darf keine Klicks abfangen */
  .kpi-karte .kurve{position:absolute;right:0;bottom:0;width:54%;height:48%;
    pointer-events:none;}
  .kpi-karte > *{position:relative;}
  .kpi-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
  .kpi-karte .titel{font-family:'Fraunces',serif;font-size:14.5px;font-weight:600;line-height:1.2;}
  .kpi-karte .sub{font-size:11px;color:var(--text-muted);margin-top:3px;line-height:1.35;}
  .kpi-karte .wert{font-size:25px;font-weight:400;margin-top:12px;line-height:1;
    font-variant-numeric:tabular-nums;white-space:nowrap;}
  .kpi-karte .wert .nachkomma{font-size:.62em;color:var(--text-muted);}
  .kpi-karte .wert .pfeil{font-size:.5em;margin-left:6px;}
  .kpi-karte .zweit{font-size:11px;color:var(--text-muted);margin-top:5px;
    font-variant-numeric:tabular-nums;min-height:14px;}
  /* Symbolknopf — allgemein, nicht an die Kachel gebunden. Überall dort
     verwendbar, wo eine Fläche eine kleine Aktion tragen soll. */
  .ikon-btn{display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;flex:0 0 auto;padding:0;cursor:pointer;
    border:1px solid var(--border);border-radius:9px;background:var(--card);
    color:var(--text-muted);transition:border-color .15s,color .15s,background .15s;}
  .ikon-btn:hover{border-color:var(--gold-500);color:var(--gold-600);
    background:var(--bg-muted);}
  .ikon-btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}
  /* Während gearbeitet wird: sichtbar gedämpft statt beschriftet — bei einem
     Symbol gäbe es keinen Text, den man ändern könnte. */
  .ikon-btn.wirkt{opacity:.45;pointer-events:none;}
  /* Drucken und PDF: deutlich größer als die Symbole in Kacheln und Zeilen —
     sie sind eine Aktion für die ganze Seite und wurden zu leicht übersehen. */
  .ikon-btn.gross{width:36px;height:36px;border-radius:10px;}
  .ikon-btn.gross svg{width:19px;height:19px;}
  /* In Tabellenzeilen ohne Rahmen, damit er neben ✎ und ✕ nicht heraussticht */
  .ikon-btn.schlicht{width:auto;height:auto;padding:2px 6px;border:none;
    background:none;border-radius:5px;vertical-align:middle;}
  .ikon-btn.schlicht:hover{background:var(--bg-muted);color:var(--gold-600);}
  .ikon-btn.schlicht svg{width:14px;height:14px;display:block;}
  .ikon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  /* Symbolschalter: sieht aus wie der Symbolknopf, ist aber eine Ankreuzbox.
     Sie bleibt im Dokument — nur unsichtbar —, damit alles, was sie liest
     oder auf sie hört, unverändert weiterarbeitet. */
  .ikon-schalter{display:inline-flex;align-items:center;justify-content:center;
    position:relative;width:28px;height:28px;flex:0 0 auto;cursor:pointer;
    border:1px solid var(--border);border-radius:9px;background:var(--card);
    color:var(--text-muted);transition:border-color .15s,color .15s,background .15s;}
  .ikon-schalter:hover{border-color:var(--gold-500);color:var(--gold-600);}
  .ikon-schalter svg{width:15px;height:15px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .ikon-schalter input{position:absolute;opacity:0;width:100%;height:100%;
    margin:0;cursor:pointer;}
  /* Eingeschaltet: deutlich sichtbar, sonst weiß niemand, was gerade gilt. */
  .ikon-schalter:has(input:checked){border-color:var(--gold-500);
    background:var(--gold-50,#faf6ea);color:var(--gold-600);}
  .ikon-schalter:focus-within{outline:2px solid var(--gold-500);outline-offset:2px;}
  .kpi-karte .fuss{margin-top:auto;padding-top:10px;font-size:11px;color:var(--text-muted);}
  .kpi-karte .fuss b{font-weight:600;}
  /* Kleine Aufschlüsselung in der hervorgehobenen Kachel */
  @media (max-width:520px){
    .kpi-karte .wert{font-size:22px;}
  }
  /* Etwas breiter als früher: in die Karten ist die Verlaufslinie gezogen,
     unter 190px wird daraus ein unlesbarer Zacken. */
  .pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
  .pool-karte{border:1px solid var(--border);border-radius:11px;padding:11px 12px;background:var(--card);
    display:flex;flex-direction:column;gap:7px;}
  .pool-karte.aktiv{border-color:var(--gold-500);}
  .pool-karte.inaktiv{opacity:.55;}
  .pool-karte[role=button]{cursor:pointer;transition:border-color .12s, opacity .12s;}
  .pool-karte[role=button]:hover{opacity:1;border-color:var(--gold-500);}
  .pool-karte .kopf{display:flex;align-items:center;gap:8px;}
  .pool-karte .titel{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--text-muted);flex:1;}
  .pool-karte .marke{font-size:9.5px;font-weight:700;border-radius:20px;padding:2px 7px;}
  .pool-karte .marke.ja{background:rgba(197,160,72,.16);color:var(--gold-600);}
  .pool-karte .marke.nein{background:var(--bg-muted);color:var(--text-muted);}
  .pool-karte .gross{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.15;}
  .pool-karte .klein{font-size:11px;color:var(--text-muted);}
  .pool-karte .zeile{font-size:11.5px;}
  .pool-karte .zeile b{font-variant-numeric:tabular-nums;}
  /* Verlauf der Auszahlung je Mitglied. Er schiebt sich nach unten, damit
     Linie und Auszahlungsfeld als ein Block zusammenbleiben — sonst hinge
     die Linie mitten in der Karte und der Kasten allein am Boden. */
  .pool-karte .verlauf{margin-top:auto;}
  .pool-karte .verlauf-kopf{display:flex;align-items:baseline;justify-content:space-between;
    gap:6px;font-size:10px;color:var(--text-muted);margin-bottom:2px;}
  .pool-karte .verlauf-kopf b{font-variant-numeric:tabular-nums;font-size:10.5px;}
  .pool-karte .verlauf-leer{font-size:10.5px;color:var(--text-muted);
    border-top:1px dashed var(--border);padding-top:7px;}
  .pool-karte .auszahlung{margin-top:auto;border:1px solid var(--border);border-radius:8px;
    padding:7px 9px;font-size:11.5px;}
  .pool-karte .verlauf + .auszahlung{margin-top:8px;}
  .pool-karte.aktiv .auszahlung{border-color:var(--gold-500);background:rgba(197,160,72,.07);}
  .pool-karte .auszahlung b{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;}
  .pool-karte.global{background:var(--bg-muted);}
  /* Vorschau, keine Buchung — die Kennzeichnung soll man nicht übersehen. */
  .plan-marke{display:inline-block;margin-left:8px;font-size:9.5px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:2px 8px;
    background:rgba(197,160,72,.16);color:var(--gold-600);vertical-align:middle;}
  #dplan-tabelle .jahr td, #pplan-tabelle .jahr td, #rplan-tabelle .jahr td,
  #wplan-tabelle .jahr td{
    background:var(--bg-muted);font-size:11px;font-weight:700;letter-spacing:.05em;
    color:var(--text-muted);}
  #dplan-tabelle tr.jetzt td, #pplan-tabelle tr.jetzt td, #rplan-tabelle tr.jetzt td,
  #wplan-tabelle tr.jetzt td,
  #fvplan-tabelle tr.jetzt td{background:rgba(197,160,72,.10);}
  #dplan-tabelle tr.vorbei, #pplan-tabelle tr.vorbei, #rplan-tabelle tr.vorbei,
  #wplan-tabelle tr.vorbei{opacity:.5;}
  /* Eine Linie, die zu groß ist und deshalb draußen bleibt */
  #wplan-tabelle tr.posten.raus td{text-decoration:line-through;opacity:.6;}
  /* Bei über hundert Zeilen muss die Kopfzeile stehen bleiben, sonst weiß man
     nach dem Scrollen nicht mehr, welche Spalte welche ist. */
  #dplan-huelle thead th,
  #pplan-huelle thead th,
  #rplan-huelle thead th,
  #wplan-huelle thead th,
  #fvplan-huelle thead th{position:sticky;top:0;z-index:2;background:var(--card);
    box-shadow:inset 0 -1px 0 var(--border);}
  .dplan-schalter{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
    color:var(--text-muted);cursor:pointer;margin-bottom:10px;}
  .dplan-schalter input{accent-color:var(--gold-500);width:15px;height:15px;cursor:pointer;}
  /* Woher ein Monat kommt: eingetragen oder aus den Voraussetzungen gerechnet. */
  .pool-quelle{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:700;
    letter-spacing:.04em;border-radius:20px;padding:2px 7px;vertical-align:middle;
    background:var(--bg-muted);color:var(--text-muted);}
  .pool-quelle.gebucht{background:rgba(197,160,72,.16);color:var(--gold-600);}
  /* Die Vertragszeilen tragen die Monatssumme, deshalb stehen sie eingerückt
     und ruhiger als die Zeile, die den Monat abschließt. */
  #dplan-tabelle tr.posten td, #pplan-tabelle tr.posten td, #rplan-tabelle tr.posten td,
  #fvplan-tabelle tr.posten td,
  #wplan-tabelle tr.posten td{
    border-bottom:0;padding-top:3px;padding-bottom:3px;font-size:12.5px;color:var(--text-muted);}
  #dplan-tabelle tr.posten td:first-child,
  #pplan-tabelle tr.posten td:first-child,
  #rplan-tabelle tr.posten td:first-child,
  #wplan-tabelle tr.posten td:first-child,
  #fvplan-tabelle tr.posten td:first-child{padding-left:26px;}
  #dplan-tabelle tr.monat td, #pplan-tabelle tr.monat td, #rplan-tabelle tr.monat td,
  #wplan-tabelle tr.monat td,
  #fvplan-tabelle tr.monat td{
    font-weight:600;
    /* Die Zeile schließt einen Block ab — darunter beginnt der nächste. Das
       ist die Trennung, die zählt, deshalb liegt hier der kräftige Strich. */
    border-bottom:2px solid var(--gold-300);}
  #dplan-tabelle tr.monat.mit-posten td,
  #pplan-tabelle tr.monat.mit-posten td,
  #rplan-tabelle tr.monat.mit-posten td,
  #wplan-tabelle tr.monat.mit-posten td,
  #fvplan-tabelle tr.monat.mit-posten td{
    /* Innerhalb des Blocks genügt ein Haarstrich zwischen Posten und Summe. */
    border-top:1px dashed var(--border);}
  /* Die festen Voraussetzungen der Stufe — Regel, nicht Messung, deshalb
     ruhiger gesetzt als die Zahlen des Monats. */
  .pool-vor{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    padding:7px 0;}
  .pool-vor .vor-kopf{font-size:9px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
  .pool-vor .vor-zeile{display:flex;justify-content:space-between;gap:8px;
    font-size:11px;color:var(--text-muted);line-height:1.5;}
  .pool-vor .vor-zeile b{color:var(--text);font-weight:600;
    font-variant-numeric:tabular-nums;}
  /* Erfüllte Voraussetzung grün, offene mit dem, was noch fehlt. Die Karte
     wird dadurch auch ohne Lesen des Zahlenwerts überfliegbar. */
  .pool-vor .vor-zeile.erfuellt b{color:var(--green);}
  .pool-vor .vor-zeile.offen b{color:var(--text-muted);font-weight:500;}
  .pool-vor .vor-fehlt{color:var(--red);font-weight:600;}
  /* Welcher der beiden Wege den Umsatz trägt — klein, aber nachvollziehbar. */
  .pool-vor .vor-weg{font-size:10px;color:var(--text-muted);line-height:1.35;
    margin:-1px 0 3px;opacity:.85;}
  /* Übernommene, noch nicht bestätigte Werte. Gestrichelt, weil der Wert
     dasteht, aber niemand ihn für diesen Monat erhoben hat. */
  .wert-uebernommen{border-style:dashed !important;border-color:var(--gold-500) !important;
    color:var(--gold-600) !important;}
  .uebernommen-marke{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:700;
    letter-spacing:.04em;border-radius:20px;padding:2px 7px;
    background:rgba(197,160,72,.16);color:var(--gold-600);vertical-align:middle;}
  .pr-geprueft{display:inline-flex;align-items:center;gap:6px;font-size:12px;
    color:var(--text-muted);cursor:pointer;white-space:nowrap;padding-bottom:8px;}
  .pr-geprueft input{accent-color:var(--gold-500);width:15px;height:15px;cursor:pointer;}
  .uebernommen-hinweis{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    border:1px dashed var(--gold-500);border-radius:9px;padding:9px 12px;margin-bottom:14px;
    font-size:12.5px;color:var(--text-muted);}
  .markt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;align-items:start;}
  /* minmax(0,…): ein bloßes 1fr wächst mit der Preistabelle auf 600 px mit
     und schiebt am Handy die ganze Seite über den Rand. */
  @media (max-width:1250px){ .markt-grid{grid-template-columns:minmax(0,1fr);} }
  /* Die Preistabelle hat sechs Spalten – etwas enger gesetzt, damit sie
     neben dem Chart ohne Querscrollen auskommt. */
  .markt-grid table{font-size:12.5px;}
  .markt-grid table th,.markt-grid table td{padding-left:8px;padding-right:8px;white-space:nowrap;}
  .markt-grid table th:first-child,.markt-grid table td:first-child{padding-left:0;}
  .markt-grid table th:last-child,.markt-grid table td:last-child{padding-right:0;}
  .markt-grid .weight-cell .coin{width:20px;height:20px;}
  .markt-grid .weight-cell .label b{font-size:12.5px;}
  .zeitraum{display:inline-flex;gap:2px;background:var(--bg-muted);border-radius:9px;padding:3px;}
  .zeitraum button{border:none;background:transparent;font:inherit;font-size:12px;font-weight:600;
    color:var(--text-muted);padding:5px 10px;border-radius:7px;cursor:pointer;}
  .zeitraum button:hover{color:var(--text);}
  .zeitraum button.an{background:var(--card);color:var(--text);box-shadow:var(--shadow);}
  /* Vier Kennzahlen — auto-fit ließ bei einer fünften eine halbe Zeile
     stehen; mit fester Vierteilung bleibt die Reihe ruhig. */
  .markt-fuss{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;
    margin-top:14px;padding-top:13px;border-top:1px solid var(--border);}
  @media (min-width:520px){ .markt-fuss{grid-template-columns:repeat(4,1fr);} }
  .markt-fuss div span{display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--text-muted);font-weight:600;
    /* „Tief im Zeitraum" bricht auf zwei Zeilen, „Höchststand" nicht — ohne
       feste Höhe stünden die Beträge darunter auf verschiedenen Grundlinien. */
    min-height:2.1em;line-height:1.05;}
  .markt-fuss div span + span{min-height:0;margin-top:2px;}
  .markt-fuss div b{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;}
  .archiv-versand-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .archiv-versand-zeile .archiv-versand-mail{padding:5px 9px;}

/* ---------- Info (info.js) ----------
   Das ⓘ neben Seitentitel und Kartenüberschrift, darunter die aufklappbare
   Erklärung — überall gleich aufgebaut. */
.info-knopf{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  margin-left:8px;vertical-align:middle;border-radius:50%;border:1.5px solid var(--gold-500);
  background:transparent;color:var(--gold-600);font:italic 700 11.5px/1 Georgia,'Times New Roman',serif;
  cursor:pointer;padding:0;flex:none;transition:background .15s,color .15s;}
.info-knopf:hover,.info-knopf.an{background:var(--gold-500);color:#171204;}
/* Mittig statt an der Grundlinie: Das Zahnrad hat keinen Text und damit
   keine Grundlinie — an ihr ausgerichtet stünde es tiefer als das ⓘ. */
h1 .info-knopf{width:22px;height:22px;font-size:13px;vertical-align:middle;}
.info-feld{background:var(--bg-muted);border:1px solid var(--border);border-left:3px solid var(--gold-500);
  border-radius:10px;padding:12px 16px;margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--text);
  font-family:'Inter',system-ui,sans-serif;font-style:normal;font-weight:400;letter-spacing:0;
  text-transform:none;}
.info-feld[hidden]{display:none;}
/* Das Zahnrad neben dem ⓘ: gleiche Größe und Farbe, aber ein Bild statt
   eines Buchstabens — deshalb ein SVG darin statt Text. */
.info-knopf.info-zahn svg{width:12px;height:12px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
h1 .info-knopf.info-zahn svg{width:14px;height:14px;}
.info-teil + .info-teil{margin-top:8px;}
.info-teil b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:2px;}
.info-teil ul{margin:0;padding-left:18px;}
.info-teil li{margin:2px 0;}
.info-genau:not(:empty){margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.info-genau .info-absatz{margin:0 0 6px;font-size:12.5px;color:var(--text-muted);}
.info-genau .info-absatz:last-child{margin-bottom:0;}
@media print{ .info-knopf,.info-feld{display:none !important;} }

/* Goldkurs als Mitteilung: je Zeitpunkt Häkchen und eigene Preis-Auswahl */
#kaZeiten{display:grid;gap:6px;}
/* Eine Tabelle mit Spaltenköpfen stand hier einmal. Sie hing an
   @media (min-width:700px) — und das fragt nach der Breite des Bildschirms,
   nicht nach der des Behälters. Der Block steht aber im Zahnrad-Fenster, rund
   490 px breit: Am Rechner griff das Raster für fünf Spalten in einem Fenster,
   in das sie nicht passen, und die Zellen wanderten durcheinander.
   @container wäre die richtige Frage, gibt es aber auf älteren Telefonen
   nicht — dort bliebe das Durcheinander stehen. Also die Zeilenform, die
   lesbar war; die Wiederholung von „Push" und „Telegram" ist der Preis dafür. */
.ka-zeit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;padding:6px 0;
  border-top:1px solid var(--border);}
.ka-zeit:first-child{border-top:0;}
.ka-zeit label{display:flex;align-items:center;gap:6px;cursor:pointer;}
.ka-zeit-name{min-width:110px;}
.ka-zeit select{max-width:240px;font-size:12.5px;padding:5px 8px;}
.ka-zeit select:disabled{opacity:.45;}
/* „auch ohne Bewegung“ je Zeitpunkt — klein, es ist die Ausnahme */
.ka-ohne{font-size:12px;color:var(--text-muted);gap:5px;}
/* Das Formular darüber als ein Block: „Worauf / Preis / Melde mir" in der
   einen Zeile und „Betrag / Alarm setzen" in der nächsten sahen aus wie zwei
   Sachen. Im schmalen Fenster bricht es ohnehin um — der Rahmen sagt, dass es
   zusammengehört. */
/* Ein gerahmter Block um eine Gruppe Bedienelemente. Beide Hälften des
   Kursalarm-Fensters tragen ihn: oben das Formular, unten die Zeiten. So
   sieht man, dass es zwei Dinge gibt und nicht sieben. */
.ka-form{border:1px solid var(--border);border-radius:11px;padding:12px 13px;
  background:var(--bg-muted,transparent);}
/* Die erste Zeile im Kasten trennt nichts ab — darüber ist der Rahmen. */
.ka-form #kaZeiten > .ka-zeit:first-child{border-top:0;padding-top:0;}
.ka-form .hr-felder{gap:10px 12px;}
.ka-form .hr-felder .btn{align-self:end;}
.ka-form > p:last-child{margin-bottom:0;}