/* SC Spedition Suite - das Aussehen der Oberflaeche. */
  *{box-sizing:border-box}
  body{margin:0;background:#11161f;color:#e8ecf3;font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:14.5px;line-height:1.5}
  a{color:#3e8fd6}
  button{font-family:inherit;font-size:13.5px;cursor:pointer;border-radius:5px;border:1px solid #3d4a63;
         background:#222b3d;color:#e8ecf3;padding:8px 14px;margin:0 6px 6px 0}
  button:hover{background:#2c6da8;border-color:#3e8fd6}
  button:disabled{opacity:.4;cursor:not-allowed}
  button.p{background:#3e8fd6;border-color:#3e8fd6;font-weight:600}
  button.p:hover{background:#4f9fe4}
  button.g{background:#2b6b4d;border-color:#3d8f68}
  button.d{background:#7a3228;border-color:#a04434}
  button.sm{padding:5px 10px;font-size:12.5px}
  input,select,textarea{background:#222b3d;color:#e8ecf3;border:1px solid #3d4a63;border-radius:5px;
        padding:8px 10px;font-family:inherit;font-size:13.5px;width:100%}
  select{color:#e8ecf3}
  option{background:#222b3d;color:#e8ecf3}
  label{display:block;font-size:11.5px;color:#97a3b6;margin:10px 0 3px}
  header{background:#1a2130;border-bottom:1px solid #313b4f;padding:12px 18px;position:sticky;top:0;z-index:20}
  header .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  header .firma{font-size:17px;font-weight:600}
  header .wer{font-size:11.5px;color:#97a3b6}
  header .wer .nm{font-size:13.5px;color:#e8ecf3;font-weight:600}
  .rolle{font-size:.8em;color:#97a3b6;font-weight:400;white-space:nowrap}
  header .sp{flex:1}
  nav{background:#161c28;border-bottom:1px solid #313b4f;padding:0 12px;display:flex;gap:2px;overflow-x:auto;
      position:sticky;top:58px;z-index:19}
  nav button{background:none;border:none;border-bottom:2px solid transparent;border-radius:0;margin:0;
             padding:11px 14px;color:#97a3b6;white-space:nowrap}
  nav button:hover{background:#1f2736;color:#e8ecf3}
  nav button.on{color:#e8ecf3;border-bottom-color:#3e8fd6;background:#1a2130}
  /* Reiter eines geoeffneten Auftrags - sie kommen hinter den festen Reitern
     dazu und tragen ein Kreuz zum Schliessen. */
  nav button.auftragsreiter{border-left:1px solid #313b4f;font-variant-numeric:tabular-nums}
  nav button.auftragsreiter .zu{margin-left:9px;padding:0 3px;border-radius:3px;color:#6f7d92}
  nav button.auftragsreiter .zu:hover{background:#31405a;color:#e8ecf3}
  main{padding:18px;max-width:1500px;margin:0 auto}
  .karte{background:#1a2130;border:1px solid #313b4f;border-radius:7px;padding:16px;margin-bottom:14px}
  .karte h2{margin:0 0 12px;font-size:13px;font-weight:600;color:#97a3b6;text-transform:uppercase;letter-spacing:.6px}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
  .kpi{background:#1a2130;border:1px solid #313b4f;border-radius:7px;padding:13px}
  .kpi .t{font-size:10px;color:#97a3b6;text-transform:uppercase;letter-spacing:.5px}
  .kpi .v{font-size:23px;font-weight:700;margin-top:3px}
  .kpi .v.w{color:#d9a441}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;color:#97a3b6;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
     padding:0 8px 8px 0;border-bottom:1px solid #313b4f;font-weight:600;white-space:nowrap}
  td{padding:9px 8px 9px 0;border-bottom:1px solid #222b3d;vertical-align:top}
  tr.klick{cursor:pointer}
  tr.klick:hover td{background:#212a3c}
  .r{text-align:right}
  .chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap;color:#11161f}
  .zeit{color:#97a3b6;font-size:11.5px}
  .leiste{display:flex;flex-wrap:wrap;gap:0;align-items:center;margin-bottom:12px}
  .leiste input,.leiste select{width:auto;min-width:150px;margin:0 8px 6px 0}
  .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 16px}
  .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px}
  .paar{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid #222b3d;font-size:13px}
  .paar b{color:#97a3b6;font-weight:600;min-width:130px;font-size:12px}

  /* ---- Auftrag im eigenen Tab: alles eine Spur weiter auseinander ---- */
  .auftragskopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .auftragskopf h1{font-size:25px;margin:0;letter-spacing:.3px}
  .auftragskopf .betreff{width:100%;font-size:16px;color:#b8c3d4;margin-top:4px}
  .weit .karte{padding:20px 22px;margin-bottom:16px}
  .weit .karte h2{margin-bottom:14px}
  .weit .paar{padding:9px 0;font-size:13.5px}
  .weit .paar b{min-width:150px;font-size:12.5px}
  .weit .grid3{gap:0 28px}
  .weit table td{padding:12px 14px 12px 0}
  .weit table th{padding-bottom:10px}
  .weit .hinweis{padding:13px 16px;font-size:13px}
  /* Fahrerbereich: grosse Knoepfe, eine Fahrt je Kasten - am Handy wie am PC */
  .fahrt{border:1px solid #2b3446;border-radius:8px;padding:12px;margin:10px 0;background:#151b27}
  .fahrt .z1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .fahrt .z2{margin-top:5px;font-weight:600}
  .fahrt .z3{color:#97a3b6;font-size:13px;margin-top:3px}
  .fahrt .knopfleiste{margin-top:10px}
  .fpos{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #222a38;flex-wrap:wrap;font-size:13px}
  .fpos .t{flex:1;min-width:190px}
  .fpos button,.stopp button{min-width:120px;padding:9px 14px}
  .stopp{border-left:4px solid #3e8fd6;background:#151b27;border-radius:6px;padding:10px 12px;margin:10px 0}
  .stopp.fertig{border-left-color:#4caf7d;opacity:.7}
  .stopp .kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .stopp .nr{display:inline-block;min-width:26px;height:26px;line-height:26px;text-align:center;border-radius:13px;background:#3e8fd6;color:#0a0e15;font-weight:700}
  .stopp.fertig .nr{background:#4caf7d}
  .stopp .akt{display:flex;align-items:center;gap:10px;padding:6px 0;flex-wrap:wrap;font-size:13px}
  .stopp .akt .t{flex:1;min-width:200px}
  .stopp .akt.auf .t b{color:#78d4a4} .stopp .akt.ab .t b{color:#cdb8f5}
  .stopp .akt.erl{opacity:.6}
  .erledigt{color:#78d4a4;font-weight:600;font-size:12.5px}
  .betrag.ein{color:#78d4a4} .betrag.aus{color:#e58a7c}
  tr.storniert td{text-decoration:line-through;opacity:.55}
  .knopfleiste{display:flex;flex-wrap:wrap;gap:9px}
  .fpos input.mort{width:min(260px,60vw);margin:2px 6px 2px 0;padding:4px 7px;font-size:12px}
  #demoleiste{background:#4b3596;color:#fff;padding:7px 14px;font-size:12.5px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  #demoleiste b{letter-spacing:1px}
  #demoleiste span{flex:1;min-width:220px;opacity:.92}
  #demoleiste button{margin:0;background:#2d2060;border-color:#8f7ad6;color:#fff}
  .knopfleiste button{margin:0}
  .hinweis{background:#20283a;border-left:3px solid #3e8fd6;padding:10px 13px;border-radius:0 5px 5px 0;font-size:12.5px;color:#b8c3d4;margin:10px 0}
  .warn{border-left-color:#d9a441;color:#e6be6a}
  .fehler{border-left-color:#d2604e;color:#e89484}
  .ok{border-left-color:#4caf7d;color:#78d4a4}
  .anmeldung{max-width:390px;margin:8vh auto;padding:26px;background:#1a2130;border:1px solid #313b4f;border-radius:9px}
  .anmeldung h1{font-size:20px;margin:0 0 4px}
  .anmeldung p.u{color:#97a3b6;font-size:12.5px;margin:0 0 18px}
  .modal{position:fixed;inset:0;background:rgba(8,11,17,.72);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
  /* Vorschau der eigenen Unterschrift - dunkle Tinte auf hellem Grund, wie im PDF */
  .unterschrift{margin-top:8px;height:80px;border:1px solid #3d4a63;border-radius:6px;background:#f4f1ea;color:#1b2a4a}
  .unterschrift svg{display:block;width:100%;height:100%}
  .modal .box{background:#1a2130;border:1px solid #313b4f;border-radius:9px;padding:20px;max-width:720px;width:100%;max-height:88vh;overflow:auto}
  .modal h3{margin:0 0 12px;font-size:16px}
  .lade{position:fixed;inset:0;background:rgba(8,11,17,.55);display:flex;align-items:center;justify-content:center;z-index:80;font-size:14px}
  .lade .b{background:#1a2130;border:1px solid #313b4f;border-radius:8px;padding:16px 26px}
  .fuss{color:#5c6b84;font-size:11.5px;text-align:center;margin:26px 0 10px}
  .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ---- Serververwaltung: deutlich andere Anmutung, damit man nie im
         falschen Bereich arbeitet ---- */
  body.admin header{background:#2b2213;border-bottom-color:#5c4a20}
  body.admin nav{background:#241d10;border-bottom-color:#5c4a20}
  body.admin nav button.on{border-bottom-color:#d9a441;background:#2b2213}
  body.admin .karte h2{color:#d9a441}
  body.admin button.p{background:#c08a2e;border-color:#c08a2e;color:#1a1408}
  body.admin button.p:hover{background:#d9a441}
  /* Angekuendigte Wartung: steht im Login und ueber der Arbeitsoberflaeche,
     dauerhaft, bis das Fenster vorbei ist. Rot erst, wenn sie laeuft. */
  .wartungsband{background:#2f3a4e;color:#dce4f0;font-size:12px;font-weight:600;
             padding:6px 18px;letter-spacing:.3px;text-align:center;border-bottom:1px solid #46536b}
  .wartungsband.laeuft{background:#8a3b1f;color:#ffe9dd;border-bottom-color:#c05a2e}
  .wartungsband.spaet{background:#7a2f4a;color:#ffe2ee;border-bottom-color:#b8497a}
  .wartungsband b{color:#fff}
  /* Die Wartungsanzeige nach der Anmeldung ohne Wartungszugang - wie die Wartungsseite */
  .wartungsanzeige{max-width:560px;margin:10vh auto 0;padding:38px 24px;text-align:center}
  .wartungsanzeige .zeichen{font-size:46px;letter-spacing:6px;color:#d97a3e;margin-bottom:10px}
  .wartungsanzeige h1{font-size:26px;margin:0 0 14px}
  .wartungsanzeige p{color:#b8c3d4;line-height:1.6;margin:0 0 12px}
  .wartungsanzeige .zeit{color:#e8ecf3;font-size:15px}
  .wartungsanzeige .klein{color:#6f7d92;font-size:12.5px;margin-top:22px}
  .wartungsanzeige .balken{height:3px;border-radius:2px;background:#2a3547;overflow:hidden;margin:26px 0 8px}
  .wartungsanzeige .balken i{display:block;height:100%;width:38%;background:#d97a3e;animation:wl 2.2s ease-in-out infinite}
  @keyframes wl{0%{margin-left:-38%}100%{margin-left:100%}}
  .adminband{background:#d9a441;color:#1a1408;font-size:11.5px;font-weight:600;
             padding:5px 18px;letter-spacing:.4px;text-align:center}
  #badmin{background:#3a2f16;border-color:#7a6228;color:#e8c987}
  #badmin:hover{background:#c08a2e;border-color:#d9a441;color:#1a1408}
  .firmenkarte{background:#222b3d;border:1px solid #3d4a63;border-radius:7px;padding:14px;margin-bottom:10px}
  .firmenkarte.aus{opacity:.55}
  .firmenkarte .kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
  .firmenkarte .nm{font-size:16px;font-weight:600}
  .firmenzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:10px 0}
  .firmenzahlen div{background:#1a2130;border-radius:5px;padding:8px}
  .firmenzahlen .t{font-size:9.5px;color:#97a3b6;text-transform:uppercase;letter-spacing:.4px}
  .firmenzahlen .v{font-size:16px;font-weight:600;margin-top:2px}
  .rechteliste{max-height:340px;overflow:auto;border:1px solid #313b4f;border-radius:6px;padding:10px}
  .rechteliste .gr{font-size:10.5px;color:#97a3b6;text-transform:uppercase;letter-spacing:.5px;margin:10px 0 4px}
  .rechteliste label{display:flex;align-items:center;gap:8px;margin:0;padding:4px 0;font-size:13px;color:#e8ecf3}
  .rechteliste input{width:auto}

  /* ---- Handy und Tablet ---- */
  /* ================= Drei Oberflaechen, die sich ausschliessen =================
     Die erkannte Geraeteklasse steht als data-geraet am <body>: "pc", "tablet"
     oder "handy". JEDE Regel haengt an genau einer davon - deshalb koennen sich
     die drei Oberflaechen nicht mehr ueberlagern. Mit Breitenbereichen ging das
     schief: ein kleines Fenster am PC bekam Tabletregeln, ein Tablet im
     Querformat die PC-Regeln, und in den Uebergaengen galten beide.
     Erkannt wird in JavaScript (bestimmeGeraet), umschalten laesst es sich im
     Kopf der Seite.
     ============================================================================ */

  /* ---- Tablet: Spalten bleiben, aber alles fingergerecht ---- */
  body[data-geraet="tablet"] main{padding:14px;max-width:none}
  body[data-geraet="tablet"] .grid3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  body[data-geraet="tablet"] .grid2{grid-template-columns:1fr}
  body[data-geraet="tablet"] button{min-height:40px;padding:10px 15px}
  body[data-geraet="tablet"] button.sm{min-height:34px;padding:7px 12px;font-size:13px}
  body[data-geraet="tablet"] nav button{padding:13px 16px;font-size:14px}
  body[data-geraet="tablet"] input,
  body[data-geraet="tablet"] select,
  body[data-geraet="tablet"] textarea{font-size:16px;padding:10px}   /* 16px: sonst zoomt iOS beim Tippen */
  body[data-geraet="tablet"] .paar{padding:7px 0}
  body[data-geraet="tablet"] .weit .grid3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  body[data-geraet="tablet"] .weit .karte{padding:16px 18px}
  body[data-geraet="tablet"] table td{padding:11px 8px 11px 0}

  /* ---- Handy: eine Spalte, Tabellen werden zu Karten ---- */
  body[data-geraet="handy"]{font-size:15px}
  body[data-geraet="handy"] main{padding:10px;max-width:none}
  body[data-geraet="handy"] header{padding:9px 12px;position:static}
  body[data-geraet="handy"] header .firma{font-size:14.5px}
  body[data-geraet="handy"] header .wer{font-size:10.5px}
  body[data-geraet="handy"] header .sp{display:none}
  body[data-geraet="handy"] header .row{gap:6px}
  body[data-geraet="handy"] header button{padding:8px 12px;font-size:12.5px;min-height:36px;margin:0;white-space:nowrap}
  body[data-geraet="handy"] nav{top:0;position:sticky}
  body[data-geraet="handy"] nav button{padding:12px 13px;font-size:13.5px}
  body[data-geraet="handy"] button{padding:11px 14px;font-size:14px;min-height:42px}
  body[data-geraet="handy"] button.sm{padding:8px 12px;font-size:13px;min-height:36px}
  body[data-geraet="handy"] input,
  body[data-geraet="handy"] select,
  body[data-geraet="handy"] textarea{font-size:16px;padding:11px 10px}
  body[data-geraet="handy"] .grid2,
  body[data-geraet="handy"] .grid3,
  body[data-geraet="handy"] .weit .grid3{grid-template-columns:1fr}
  body[data-geraet="handy"] .paar{flex-direction:column;gap:0;padding:7px 0}
  body[data-geraet="handy"] .paar b{min-width:0}
  body[data-geraet="handy"] .kpis{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
  body[data-geraet="handy"] .kpi .v{font-size:20px}
  body[data-geraet="handy"] .modal{padding:0;align-items:stretch}
  body[data-geraet="handy"] .modal .box{max-height:100vh;border-radius:0;border:none;padding:14px}
  body[data-geraet="handy"] .weit .karte{padding:14px;margin-bottom:12px}
  body[data-geraet="handy"] .auftragskopf h1{font-size:21px}
  /* Kopfzeile knapp halten - am Handy zaehlt jede Zeile ueber der Liste.
     Die Knoepfe bleiben in einer Reihe und lassen sich seitlich schieben. */
  body[data-geraet="handy"] .kopfknoepfe{display:flex;gap:6px;overflow-x:auto;width:100%;padding-bottom:2px;
               scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body[data-geraet="handy"] .kopfknoepfe::-webkit-scrollbar{display:none}
  body[data-geraet="handy"] .adminband{padding:4px 12px;font-size:10.5px}
  /* Suchzeile: Eingabe voll, darunter Auswahl und Knopf nebeneinander */
  body[data-geraet="handy"] .leiste{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  body[data-geraet="handy"] .leiste input{grid-column:1/-1;width:100%;min-width:0;margin:0}
  body[data-geraet="handy"] .leiste select{width:100%;min-width:0;margin:0}
  body[data-geraet="handy"] .leiste button{width:100%;margin:0}
  body[data-geraet="handy"] .leiste>button:only-of-type{grid-column:1/-1}
  /* Tabellen werden zu Karten - waagerechtes Schieben ist am Handy laestig */
  body[data-geraet="handy"] table.karten thead{display:none}
  body[data-geraet="handy"] table.karten,
  body[data-geraet="handy"] table.karten tbody,
  body[data-geraet="handy"] table.karten tr,
  body[data-geraet="handy"] table.karten td{display:block;width:100%}
  body[data-geraet="handy"] table.karten tr{background:#222b3d;border:1px solid #313b4f;border-radius:7px;margin-bottom:10px;padding:10px}
  body[data-geraet="handy"] table.karten td{border:none;padding:3px 0;display:flex;gap:10px;justify-content:space-between}
  body[data-geraet="handy"] table.karten td::before{content:attr(data-t);color:#97a3b6;font-size:11px;text-transform:uppercase;
                          letter-spacing:.4px;flex-shrink:0}
  body[data-geraet="handy"] table.karten td.r{text-align:left}
  body[data-geraet="handy"] table.karten td:empty{display:none}

  /* ---- Handy: eigens gebaute Listen statt Tabellen-als-Karten ----
     Zehn beschriftete Zeilen je Auftrag liest am Telefon niemand. Startseite und
     Routenplaner bekommen deshalb eine eigene Darstellung: das Wichtigste zuerst,
     der Rest in einer Zeile darunter. */
  body[data-geraet="handy"] .hkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
  body[data-geraet="handy"] .hkpis>div{background:#1a2130;border:1px solid #313b4f;border-radius:7px;padding:8px 3px;
        text-align:center;font-size:9.5px;color:#97a3b6;text-transform:uppercase;letter-spacing:.3px;overflow:hidden}
  body[data-geraet="handy"] .hkpis span{display:block;font-size:17px;font-weight:700;color:#e8ecf3;text-transform:none;letter-spacing:0}
  body[data-geraet="handy"] .hgeld{display:flex;gap:8px;margin-bottom:10px}
  body[data-geraet="handy"] .hgeld>div{flex:1;background:#1a2130;border:1px solid #313b4f;border-radius:7px;padding:9px 10px}
  body[data-geraet="handy"] .hgeld .t{display:block;font-size:9.5px;color:#97a3b6;text-transform:uppercase;letter-spacing:.3px}
  body[data-geraet="handy"] .hgeld b{font-size:15px}
  body[data-geraet="handy"] .hgeld b.w{color:#d9a441}
  body[data-geraet="handy"] .hliste{display:flex;flex-direction:column;gap:9px}
  body[data-geraet="handy"] .hzeile{background:#222b3d;border:1px solid #313b4f;border-radius:8px;padding:11px 12px}
  body[data-geraet="handy"] .hzeile.klick{cursor:pointer}
  body[data-geraet="handy"] .hzeile.klick:active{background:#2a3648}
  body[data-geraet="handy"] .hzeile .z1{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:15px}
  body[data-geraet="handy"] .hzeile .z2{margin-top:3px;font-size:13.5px}
  body[data-geraet="handy"] .hzeile .z3{margin-top:2px;font-size:12.5px;color:#97a3b6}
  body[data-geraet="handy"] .hzeile .z4{margin-top:6px;display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12px;color:#b8c3d4}
  body[data-geraet="handy"] .hzeile .pfeil{color:#3e8fd6}
  body[data-geraet="handy"] .hstopp{margin-top:7px;padding-top:6px;border-top:1px solid #313b4f;
        display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
  body[data-geraet="handy"] .hstopp.auf{color:#78d4a4}
  body[data-geraet="handy"] .hstopp.ab{color:#e6be6a}
  /* Sternkarte */
  .sternkarte{position:relative;height:560px;border-radius:8px;overflow:hidden;background:#0a0e15;border:1px solid #2a3346}
  .sternkarte canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
  .sk-leiste{position:absolute;left:8px;top:8px;display:flex;gap:4px;flex-wrap:wrap;max-width:calc(100% - 16px)}
  .sk-leiste button{margin:0;background:rgba(17,22,31,0.86)}
  .sk-tipp{position:absolute;max-width:290px;background:rgba(17,22,31,0.96);border:1px solid #3d4a63;border-radius:6px;padding:8px 10px;font-size:12.5px;line-height:1.45;pointer-events:none}
  .sk-laden{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#97a3b6}
  .sk-legende{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:#97a3b6;margin-top:8px}
  .sk-legende i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
  body[data-geraet="tablet"] .sternkarte{height:470px}
  body[data-geraet="handy"] .sternkarte{height:380px}
  /* Postfach und Kundenbewertungen (3.0) */
  .postzahl{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:99px;background:#d2604e;color:#fff;
        font-size:11px;font-weight:700;line-height:18px;text-align:center}
  /* Lange Links (Kunden-, Fahrer-, Bewertungslink) brechen um statt ueber den Rand zu laufen */
  .hinweis a{overflow-wrap:anywhere}
  body[data-geraet="handy"] .postbetreff{text-align:right;min-width:0}
  body[data-geraet="handy"] .bwkpis{grid-template-columns:repeat(2,1fr);gap:8px}
  body[data-geraet="handy"] .bwkpis .kpi{padding:9px 10px}
  body[data-geraet="handy"] .bwkpis .kpi .v{font-size:19px}
  tr.ungelesen td{font-weight:600}
  tr.ungelesen td .zeit{font-weight:400}
  .posttext{white-space:pre-wrap;background:#141a26;border:1px solid #313b4f;border-radius:6px;padding:12px;margin-top:10px;
        max-height:50vh;overflow:auto;font-size:13.5px}
  .empfaengerliste{max-height:220px;overflow:auto;border:1px solid #313b4f;border-radius:6px;padding:6px 10px}
  .empfaengerliste label{display:flex;align-items:center;gap:8px;margin:0;padding:3px 0;font-size:13px;color:#e8ecf3}
  .empfaengerliste input{width:auto}
  .empfaengerliste .gr{font-size:10.5px;color:#97a3b6;text-transform:uppercase;letter-spacing:.5px;margin:10px 0 4px}
  .sterne{color:#e6be6a;letter-spacing:1px;white-space:nowrap}
  .sterne .aus{color:#3d4a63}
  .bwzeile{display:flex;align-items:center;gap:10px;margin:5px 0}
  .bwzeile span{width:34px;color:#97a3b6;font-size:12px}
  .bwzeile .bw{flex:1;height:10px;background:#222b3d;border-radius:99px;overflow:hidden}
  .bwzeile .bw i{display:block;height:100%;background:#e6be6a}
  .bwzeile b{width:30px;text-align:right;font-size:12px}
  .bewertung{padding:10px 0;border-bottom:1px solid #222b3d}
  .bewertung:last-child{border-bottom:none}
  svg.unterschrift{display:block;width:100%;max-width:360px;height:auto;max-height:110px;background:#1f2738;border-radius:6px;margin-top:6px}