:root{
    --papier:#faf7f4; --tinte:#1a1a1a; --gedaempft:#6b6259;
    --linie:#e6ded6; --karte:#fff; --akzent:#f2b705; --rot:#b42318; --gruen:#067647;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--papier);color:var(--tinte);
       font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
  a{color:inherit}
  .huelle{max-width:70rem;margin:0 auto;padding:1.5rem}
  .marke{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}

  /* Mittige Karte für Anmeldung und Einrichtung */
  .mitte{min-height:100svh;display:grid;place-items:center;padding:1.5rem}
  .karte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;
         padding:2rem;max-width:26rem;width:100%}
  .karte.weit{max-width:40rem}
  .karte h1{font-size:1.25rem;margin:0 0 .35rem}
  .karte p.hinweis{color:var(--gedaempft);font-size:.9rem;margin:0 0 1.4rem}

  label{display:block;font-size:.85rem;font-weight:600;margin:.9rem 0 .35rem}
  input[type=password],input[type=text],select{width:100%;padding:.7rem .85rem;
    font-size:1rem;border:1px solid var(--linie);border-radius:9px;
    background:var(--papier);color:var(--tinte);font-family:inherit}
  input[type=date]{width:auto;padding:.45rem .6rem;font-size:.9rem;
    border:1px solid var(--linie);border-radius:8px;background:var(--papier);
    color:var(--tinte);font-family:inherit}
  input[type=checkbox]{accent-color:var(--akzent);width:auto}
  input:focus,select:focus{outline:2px solid var(--akzent);outline-offset:1px}
  button{margin-top:1.3rem;width:100%;padding:.75rem;font-size:1rem;font-weight:600;
    background:var(--akzent);color:var(--tinte);border:0;border-radius:9px;cursor:pointer}
  button:hover{filter:brightness(.95)}
  button.schlicht,.knopf-schlicht{margin:0;width:auto;padding:.35rem .7rem;
    font-size:.82rem;font-weight:500;background:transparent;
    border:1px solid var(--linie);border-radius:7px;color:var(--gedaempft);
    text-decoration:none;display:inline-block}
  button.schlicht:hover,.knopf-schlicht:hover{background:var(--papier);color:var(--tinte)}
  button.gefahr:hover{border-color:#f3c9c5;background:#fdf0ef;color:var(--rot)}
  .abbrechen{display:block;text-align:center;margin-top:.8rem;font-size:.9rem;
    color:var(--gedaempft)}

  .fehler{background:#fdf0ef;border:1px solid #f3c9c5;color:var(--rot);
          padding:.65rem .8rem;border-radius:9px;font-size:.88rem;margin-bottom:.4rem}
  .warnung{background:#fdf7e6;border:1px solid #f0dfa8;padding:.7rem .9rem;
           border-radius:9px;font-size:.9rem;margin-bottom:1.25rem}
  .erfolg{background:#eefaf3;border:1px solid #b7e4cd;padding:.9rem 1rem;
    border-radius:10px;font-size:.92rem;margin-bottom:1.25rem}
  .erfolg code{background:#fff;font-size:1.05em;font-weight:600;
    padding:.2em .5em;user-select:all}

  /* Kennzahlen */
  .zahlen{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
          margin:0 0 1.75rem}
  .zahl{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:1rem 1.1rem}
  .zahl b{display:block;font-size:1.9rem;line-height:1.15;font-variant-numeric:tabular-nums}
  .zahl span{font-size:.82rem;color:var(--gedaempft)}

  h2{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;
     color:var(--gedaempft);margin:2rem 0 .8rem}
  .kopfzeile{display:flex;align-items:center;gap:1rem;margin:2rem 0 .8rem}
  .kopfzeile:first-child{margin-top:0}
  .kopfzeile h2{margin:0}
  .kopfzeile a{margin-left:auto;text-decoration:none;font-size:.88rem;
    font-weight:600;background:var(--akzent);color:var(--tinte);
    padding:.5rem .9rem;border-radius:8px;white-space:nowrap}

  .rahmen{background:var(--karte);border:1px solid var(--linie);border-radius:12px;
          overflow-x:auto}
  .rahmen.gepolstert{padding:1rem}
  .rahmen.rollend{max-height:26rem;overflow:auto}
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  th,td{text-align:left;padding:.65rem .9rem;border-bottom:1px solid var(--linie);
        white-space:nowrap}
  th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gedaempft)}
  tr:last-child td{border-bottom:0}
  td.breit{white-space:normal;max-width:26rem}
  td.mittel{white-space:normal;max-width:16rem}
  code{font:.85em ui-monospace,SFMono-Regular,Menlo,monospace;
       background:var(--papier);padding:.12em .4em;border-radius:4px}
  .leer{padding:2.5rem 1rem;text-align:center;color:var(--gedaempft);font-size:.92rem}
  .ja{color:var(--gruen);font-weight:600}
  .nein{color:var(--gedaempft)}
  .fett{font-weight:600;text-decoration:none}
  .klein{font-size:.82rem;margin-top:.2rem;color:var(--gedaempft)}
  .unterzeile{margin:-.4rem 0 1.2rem;font-size:.88rem;color:var(--gedaempft)}
  .fussnote{color:var(--gedaempft);font-size:.84rem;margin:.6rem 0 0;
    max-width:46rem;line-height:1.55}

  .zeile{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
  .zeile form{display:inline}
  .zeile select{width:auto;padding:.35rem .5rem;font-size:.82rem}
  .zeile.mittig{margin-top:1rem;justify-content:center}

  .schild{display:inline-block;font-size:.74rem;font-weight:600;padding:.13em .55em;
    border-radius:999px;letter-spacing:.03em}
  .schild.admin{background:#1a1a1a;color:#faf7f4}
  .schild.mitarbeiter{background:var(--papier);color:var(--gedaempft);
    border:1px solid var(--linie)}
  .schild.gesperrt{background:#fdf0ef;color:var(--rot);border:1px solid #f3c9c5}
  .schild.lage-live{background:#eefaf3;color:var(--gruen);border:1px solid #b7e4cd}
  .schild.lage-entwurf{background:#fdf7e6;color:#8a6d1a;border:1px solid #f0dfa8}
  .schild.lage-archiv{background:var(--papier);color:var(--gedaempft);
    border:1px solid var(--linie)}

  /* ---------------------------------------------------- Seitenleiste */
  .rahmenwerk{display:flex;min-height:100svh}
  .seitenleiste{width:15rem;flex:0 0 15rem;background:var(--tinte);
    color:var(--papier);display:flex;flex-direction:column;
    position:sticky;top:0;height:100svh;transition:flex-basis .18s,width .18s}
  .sl-kopf{display:flex;align-items:center;gap:.5rem;padding:1.1rem .9rem;
    border-bottom:1px solid rgba(250,247,244,.12)}
  .seitenleiste .marke{flex:1;white-space:nowrap;overflow:hidden}
  .sl-schalter{margin:0;width:auto;padding:.3rem;background:transparent;
    border:0;color:var(--papier);opacity:.7;cursor:pointer;line-height:0}
  .sl-schalter:hover{opacity:1;background:transparent}

  .sl-menue{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .55rem;flex:1}
  .sl-menue a,.sl-abmelden{display:flex;align-items:center;gap:.7rem;
    padding:.6rem .65rem;border-radius:8px;text-decoration:none;
    color:rgba(250,247,244,.72);font-size:.92rem;white-space:nowrap}
  .sl-menue a:hover,.sl-abmelden:hover{background:rgba(250,247,244,.09);
    color:var(--papier)}
  .sl-menue a.aktiv{background:var(--akzent);color:var(--tinte);font-weight:600}
  .sl-menue svg,.sl-abmelden svg{width:19px;height:19px;flex:0 0 19px}
  .sl-menue a span{white-space:normal;line-height:1.25}

  .sl-fuss{padding:.7rem .55rem 1rem;border-top:1px solid rgba(250,247,244,.12)}
  .sl-wer{display:flex;flex-direction:column;gap:.3rem;padding:.5rem .65rem .7rem}
  .sl-name{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .sl-fuss .schild{align-self:flex-start}
  .sl-fuss .schild.admin{background:var(--akzent);color:var(--tinte)}
  .sl-fuss .schild.mitarbeiter{background:transparent;color:rgba(250,247,244,.6);
    border-color:rgba(250,247,244,.25)}

  .bereich{flex:1;min-width:0}
  .mobilkopf{display:none}
  .schleier{display:none}

  .rahmenwerk.schmal .seitenleiste{width:3.9rem;flex-basis:3.9rem}
  .rahmenwerk.schmal .seitenleiste .marke,
  .rahmenwerk.schmal .sl-menue span,
  .rahmenwerk.schmal .sl-abmelden span,
  .rahmenwerk.schmal .sl-wer{display:none}
  .rahmenwerk.schmal .sl-kopf{justify-content:center;padding-inline:.4rem}
  .rahmenwerk.schmal .sl-menue a,
  .rahmenwerk.schmal .sl-abmelden{justify-content:center;padding-inline:0}

  @media (max-width:820px){
    .seitenleiste{position:fixed;z-index:30;left:0;top:0;
      transform:translateX(-100%);transition:transform .2s}
    .rahmenwerk.offen .seitenleiste{transform:none}
    .rahmenwerk.schmal .seitenleiste{width:15rem;flex-basis:15rem}
    .rahmenwerk.schmal .seitenleiste .marke,
    .rahmenwerk.schmal .sl-menue span,
    .rahmenwerk.schmal .sl-abmelden span,
    .rahmenwerk.schmal .sl-wer{display:revert}
    .rahmenwerk.schmal .sl-menue a,
    .rahmenwerk.schmal .sl-abmelden{justify-content:flex-start;padding-inline:.65rem}
    .mobilkopf{display:flex;align-items:center;gap:.7rem;background:var(--tinte);
      color:var(--papier);padding:.75rem 1rem}
    .rahmenwerk.offen .schleier{display:block;position:fixed;inset:0;z-index:20;
      background:rgba(0,0,0,.42)}
    .kopfzeile{flex-wrap:wrap}
  }

  /* ------------------------------------------------------------ Umfrage */
  .filter{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
    background:var(--karte);border:1px solid var(--linie);border-radius:10px;
    padding:.75rem .9rem;margin-bottom:1.5rem}
  .filter label{margin:0;font-size:.8rem;color:var(--gedaempft)}
  .filter select{width:auto;padding:.45rem .6rem;font-size:.9rem}
  .filter button{margin:0}

  .option-zeile{display:flex;gap:.45rem;align-items:center;margin-bottom:.45rem}
  .option-zeile input[type=text]{flex:1}
  .option-zeile button{flex:0 0 auto}
  .kasten-label{display:flex;align-items:center;gap:.5rem;margin-top:1rem}
  .abstand-oben{margin-top:.5rem}

  .balken{height:4px;background:var(--papier);border-radius:99px;margin-top:.4rem;
    overflow:hidden;max-width:16rem}
  .balken i{display:block;height:100%;width:0;background:var(--akzent)}

  .diagramm{width:100%;height:auto;display:block;overflow:visible}
  .diagramm text{font-size:10px;fill:var(--gedaempft)}
  .diagramm .netz{stroke:var(--linie);stroke-width:1}
  .legende{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.9rem;
    font-size:.84rem;color:var(--gedaempft)}
  .legende span{display:flex;align-items:center;gap:.35rem}
  .legende i{width:10px;height:10px;border-radius:2px;display:inline-block}