:root { --bg:#f4f6fa; --card:#fff; --line:#dbe1ea; --text:#16202e; --muted:#6b7686; --brand:#1e4e8c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:16px; }
.wrap { max-width:1100px; margin:0 auto; padding:0 14px; }
.top { background:var(--brand); color:#fff; }
.toprow { display:flex; align-items:center; justify-content:flex-start; gap:10px 12px; flex-wrap:wrap; padding:8px 14px; }
.brand { order:1; display:flex; align-items:center; gap:7px; flex:0 0 auto;
         color:#fff; text-decoration:none; font-weight:700; font-size:1.05rem; white-space:nowrap; }
.brandsub { opacity:.75; font-weight:400; font-size:.85rem; }
.langpick { order:2; margin-left:auto; }
.nav { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.nav a { color:#e8f0fb; text-decoration:none; font-size:.92rem; }
/* Symbol und Text sauber auf einer Linie – alle Einträge haben ein Symbol */
.nav a { display:inline-flex; align-items:center; gap:5px; }
/* Benutzer + Abmelden: eigener, fester Block rechts – wächst/schrumpft nicht, bricht nie um */
.userbox { order:3; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.userbox .who { display:inline-flex; align-items:center; gap:6px; max-width:240px; }
.userbox .whoname { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top a.logout { color:#fff; text-decoration:none; font-size:.9rem; font-weight:600;
                background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
                padding:6px 12px; border-radius:9px; white-space:nowrap; flex:0 0 auto; }
.top a.logout:hover { background:rgba(255,255,255,.28); }
.nav .navonly { display:none; }
.who { font-size:.85rem; opacity:.85; }
h1 { font-size:1.4rem; margin:18px 0 10px; }
h2 { font-size:1.05rem; margin:0 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:14px 0; }
.card.narrow { max-width:420px; margin:40px auto; }
label { display:block; margin:0 0 10px; font-size:.9rem; color:var(--muted); }
label.inline { display:flex; align-items:center; gap:8px; }
input, select, textarea { width:100%; padding:10px; font-size:1rem; border:1px solid var(--line); border-radius:10px; margin-top:4px; background:#fff; color:var(--text); }
label.inline input { width:auto; margin:0; }
.btn { display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--text); text-decoration:none; font-size:.95rem; margin:4px 6px 4px 0; cursor:pointer; }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.big { font-size:1.1rem; padding:14px 18px; width:100%; }
.btn.small { padding:6px 10px; font-size:.85rem; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 14px; }
.filter { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.filter input, .filter select { width:auto; min-width:150px; }
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:8px 8px; border-bottom:1px solid var(--line); font-size:.92rem; }
th { font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
td.num, th.num { text-align:right; }
.strong { font-weight:700; }
.small { font-size:.85rem; color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; }
.statnum { font-size:1.6rem; font-weight:700; }
.statlabel { font-size:.82rem; color:var(--muted); }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.code { display:inline-block; font-weight:700; border-left:5px solid #999; padding:2px 8px; background:#f8fafc; text-decoration:none; color:var(--text); border-radius:4px; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.78rem; background:#eef2f7; }
.s-new { background:#e8f0fb; } .s-checking { background:#fff4d6; } .s-parts { background:#fde8e8; }
.s-ready { background:#e6f6ec; } .s-out { background:#eceff3; }
.flash { padding:10px 12px; border-radius:10px; margin:12px 0; font-size:.92rem; }
.flash.ok { background:#e6f6ec; border:1px solid #bfe6cd; }
.flash.err { background:#fdecec; border:1px solid #f3c9c9; }
.kv th { width:34%; color:var(--muted); font-weight:500; font-size:.88rem; }
.reader { margin-top:12px; max-width:420px; }
.foot { color:var(--muted); font-size:.8rem; padding:18px 14px 30px; }
.foot a { color:var(--muted); }
.footmeta { font-size:.75rem; color:#8b96a6; margin-top:2px; letter-spacing:.02em; }

/* --- Logo, Weltkarte, Balken --- */
.logo { height:30px; width:auto; border-radius:6px; vertical-align:middle; background:#fff; padding:1px 3px; }
.brandtext { font-weight:700; font-size:1rem; }
.mapwrap { position:relative; margin:14px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#eef5fb; }
.mapwrap img { display:block; width:100%; height:auto; }
.marker { position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
          background:#e0245e; border:2px solid #fff; box-shadow:0 0 0 2px rgba(224,36,94,.35); }
.marker.mid { width:14px; height:14px; margin:-7px 0 0 -7px; }
.marker.big { width:18px; height:18px; margin:-9px 0 0 -9px; background:#c81e50; }
.maplabel { position:absolute; transform:translate(-50%,-165%); background:rgba(255,255,255,.92);
            border:1px solid var(--line); border-radius:6px; padding:1px 5px; font-size:.7rem; white-space:nowrap; color:#16202e; }
.bars { margin-top:6px; }
.barrow { display:grid; grid-template-columns:130px 1fr 60px; gap:8px; align-items:center; padding:3px 0; }
.barlabel { font-size:.88rem; }
.bartrack { background:#eef2f7; border-radius:6px; height:14px; overflow:hidden; display:block; }
.bartrack i { display:block; height:100%; background:linear-gradient(90deg,#2563eb,#16a34a); }
.barval { text-align:right; font-weight:600; font-size:.85rem; }
.bartrack i.home { background:linear-gradient(90deg,#ca8a04,#16a34a); }
.marker.home { background:#ca8a04; box-shadow:0 0 0 3px rgba(202,138,4,.35); width:20px; height:20px; margin:-10px 0 0 -10px; }
.maplabel.home { background:#fff7e0; border-color:#e3c46a; font-weight:700; }
.rowhome td { background:#fffbea; }
.legend { display:inline-block; width:10px; height:10px; border-radius:50%; background:#e0245e; margin:0 4px 0 10px; }
.legend.home { background:#ca8a04; }
.nav a.navfirst { background:rgba(255,255,255,.18); padding:5px 10px; border-radius:8px; font-weight:600; }
.teaser { border-left:6px solid #ca8a04; }
.alphabadge { display:inline-block; background:#ffd54f; color:#5b3c00; font-weight:800; font-size:.65rem;
              letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:999px;
              vertical-align:middle; margin-left:6px; }
.alphafoot { background:#fff8e1; border:1px dashed #e3c46a; border-radius:10px; padding:8px 12px;
             margin-bottom:8px; font-size:.85rem; color:#5b3c00; }
@media (max-width:640px) { .barrow { grid-template-columns:96px 1fr 44px; } .logo { height:24px; } }
@media (max-width:640px) { .grid2, .grid3 { grid-template-columns:1fr; } h1 { font-size:1.25rem; } }

/* ================= Handy- & Tablet-Optimierung ================= */
.btn { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.btn:active { transform:scale(.985); }
.btn.big { min-height:56px; font-size:1.12rem; }
input, select, textarea { font-size:16px; padding:12px; }   /* 16px verhindert Auto-Zoom auf iOS */
/* WICHTIG: kein overflow am .nav – sonst werden die Gruppenmenüs (.menubox) abgeschnitten.
   Statt zu scrollen bricht die Leiste bei Platzmangel um. */
.nav { order:4; flex:1 1 100%; min-width:0; flex-wrap:wrap; gap:8px 14px; overflow:visible; max-width:100%; }
.nav::-webkit-scrollbar { display:none; }
.nav a { white-space:nowrap; }

/* Segmentierte Auswahl (Schnelltest): große Tippflächen */
.segbtns { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px; }
.seg { display:block; margin:0; }
.seg input { position:absolute; opacity:0; width:1px; height:1px; }
.seg span { display:flex; align-items:center; justify-content:center; min-height:58px; padding:12px;
            border:2px solid var(--line); border-radius:14px; background:#fff; font-weight:700; color:var(--text); }
.seg input:checked + span { background:var(--brand); border-color:var(--brand); color:#fff; }
.seg input:focus-visible + span { outline:3px solid #7aa7dd; }

/* Klebende Aktionsleiste unten (Schnelltest) */
.stickybar { position:sticky; bottom:0; padding:10px 0 calc(12px + env(safe-area-inset-bottom)); margin-top:8px;
             background:linear-gradient(180deg, rgba(244,246,250,0), var(--bg) 40%); }
.stickybar .btn { width:100%; }

/* Scanner */
.scanactions { display:flex; gap:10px; flex-wrap:wrap; }
.scanactions .btn { flex:1 1 160px; }
.reader { margin-top:12px; max-width:none; }
.camvideo { width:100%; max-height:62vh; object-fit:cover; border-radius:14px; background:#000; display:block; }
.scanmsg { min-height:20px; margin-top:8px; }
.scanlog { display:flex; flex-direction:column; gap:8px; }
.scanrow { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#f7f9fc;
           border:1px solid var(--line); flex-wrap:wrap; }
.scanrow .sccode { font-weight:800; font-size:1.02rem; }
.scanrow .scinfo { font-size:.85rem; color:var(--muted); flex:1 1 120px; }
.scanrow .sctime { font-size:.75rem; color:var(--muted); }
.scanrow.neu { background:#e8f7ec; border-color:#bfe6cd; }
.scanrow.bekannt { background:#eef3fb; }
.scanrow.fehler { background:#fdecec; border-color:#f3c9c9; }
.dotcolor { width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.mt { margin-top:14px; }
.flashok { box-shadow:inset 0 0 0 4px #16a34a; }
.flasherr { box-shadow:inset 0 0 0 4px #dc2626; }

/* Tablet: etwas luftiger, zwei Spalten für Listen */
@media (min-width:641px) {
  th, td { padding:10px 10px; }
  .card { padding:20px; }
}
@media (min-width:900px) { .scanrow .scinfo { flex:1 1 auto; } }

/* Tabs + scrollbare Galerie (Gruppen-Übersicht) */
.tabs { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 0 10px; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:999px;
       border:1px solid var(--line); background:#fff; color:var(--text); text-decoration:none; font-size:.92rem; min-height:42px; }
.tab.active { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:700; }
.tab .cnt { font-size:.78rem; opacity:.85; background:rgba(0,0,0,.06); border-radius:999px; padding:1px 7px; }
.tab.active .cnt { background:rgba(255,255,255,.22); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; max-height:74vh;
           overflow-y:auto; padding:2px 6px 2px 2px; overscroll-behavior:contain; }
.gallery.short { max-height:38vh; }
.gcard { position:relative; display:block; padding:10px 12px 10px 18px; border:1px solid var(--line); border-radius:12px;
         background:#fff; color:inherit; text-decoration:none; box-shadow:0 1px 2px rgba(16,32,64,.04); }
.gcard:before { content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--c); border-radius:12px 0 0 12px; }
.gcard:active { transform:scale(.99); }
.gcard .gline1 { display:flex; align-items:center; gap:8px; justify-content:space-between; flex-wrap:wrap; }
.gcard .gcode { font-weight:800; }
.gcard .gmeta { font-size:.86rem; color:#33415c; margin-top:2px; }
.gcard .gmeta.small { font-size:.78rem; color:var(--muted); }
@media (max-width:640px) { .gallery { grid-template-columns:1fr 1fr; max-height:64vh; }
                           .gcard { padding:8px 8px 8px 14px; } .gcard .gmeta { font-size:.78rem; } }
@media (max-width:400px) { .gallery { grid-template-columns:1fr; } }

/* Kompakte Listen (2 Spalten), Monatsgruppen, Jahres-Chips */
.yearchips { display:flex; gap:8px; overflow-x:auto; padding:0 0 10px; scrollbar-width:none; }
.yearchips::-webkit-scrollbar { display:none; }
.chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
        border:1px solid var(--line); background:#fff; color:var(--text); text-decoration:none; font-size:.86rem; min-height:38px; }
.chip.active { background:#0f2f5c; color:#fff; border-color:#0f2f5c; font-weight:700; }
.chip .cnt { font-size:.76rem; opacity:.8; }
.monthscroll { max-height:74vh; overflow-y:auto; overscroll-behavior:contain; padding-right:6px; }
.monthscroll.short { max-height:40vh; }
.mhead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-weight:800; font-size:.95rem;
         color:#0f2f5c; border-bottom:2px solid #e6ecf5; padding:4px 2px 6px; margin:14px 0 8px;
         position:sticky; top:0; background:var(--bg); z-index:2; }
.mhead:first-child { margin-top:0; }
.clist { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.crow { display:flex; align-items:center; gap:8px; min-height:40px; padding:6px 10px; border:1px solid var(--line);
        border-radius:10px; background:#fff; color:inherit; text-decoration:none; font-size:.87rem; overflow:hidden; }
.crow:hover { border-color:#c9d7ea; }
.crow .cdot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.ccode { font-weight:800; flex:0 0 auto; }
.cname { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#41506b; }
.crow .badge { flex:0 0 auto; font-size:.7rem; }
@media (max-width:760px) { .clist { grid-template-columns:1fr; } .monthscroll { max-height:70vh; } }

/* Erfassungs-Modi + Ereignis-Verlauf */
.modebtns { display:grid; grid-template-columns:1fr; gap:12px; margin-top:8px; }
.modebtn { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:2px 12px; text-align:left;
           padding:14px 16px; border:2px solid var(--line); border-radius:16px; background:#fff; cursor:pointer;
           font:inherit; color:var(--text); min-height:84px; }
.modebtn:hover { border-color:var(--brand); background:#f7fbff; }
.modebtn .micon { grid-row:1 / span 2; font-size:1.8rem; align-self:center; }
.modebtn .mtitle { font-weight:800; font-size:1.05rem; }
.modebtn .mdesc { font-size:.85rem; color:var(--muted); }
.badge.mode-inventur { background:#eef3fb; color:#1e4e8c; }
.badge.mode-schnelltest { background:#fdf3e0; color:#92400e; }
.badge.mode-pruefung { background:#e8f7ec; color:#166534; }
.eventline { display:flex; flex-direction:column; gap:8px; }
.eventrow { display:grid; grid-template-columns:auto 128px 1fr; gap:10px; align-items:baseline;
            padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#f9fbfe; }
.eventrow .edot { width:9px; height:9px; border-radius:50%; background:var(--brand); margin-top:6px; }
.eventrow .ets { font-size:.8rem; color:var(--muted); }
.eventrow .euser { font-weight:700; font-size:.88rem; }
.eventrow .eaction { font-size:.88rem; grid-column:3; }
.crow .cby { flex:0 0 auto; font-size:.72rem; color:var(--muted); }
@media (max-width:640px) { .eventrow { grid-template-columns:auto 1fr; } .eventrow .eaction { grid-column:2; } }

/* Profilbilder & Benutzerkarten */
.avatar { width:46px; height:46px; border-radius:50%; object-fit:cover; background:#e6ecf5; border:1px solid var(--line); flex:0 0 auto; }
.avatar.sm { width:24px; height:24px; margin-right:5px; }
.avatar.lg { width:76px; height:76px; }
.usercard { border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:10px; background:#fff; }
.usercard summary { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; flex-wrap:wrap; }
.usercard summary::-webkit-details-marker { display:none; }
.usercard .uname { font-weight:700; }
.badge.role-intake { background:#eef3fb; color:#1e4e8c; }
.badge.role-tech { background:#e8f7ec; color:#166534; }
.badge.role-admin { background:#fdf3e0; color:#92400e; }
.rowbtns { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.checkline { display:flex; align-items:center; gap:8px; }
.btn.danger { background:#fee2e2; color:#991b1b; border-color:#f3c9c9; }
@media (max-width:640px) { .usercard summary { gap:8px; } .grid3 label { font-size:.95rem; } }

/* Sicherheitsabstand für iPhone-Notch unten */
.foot { padding-bottom:calc(26px + env(safe-area-inset-bottom)); }
.top { padding-top:env(safe-area-inset-top); }

/* Stick-Import: Schlüssel-Anzeige und Code in Texten */
.keybox { display:inline-block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1rem;
          background:#f4f7fb; border:1px solid var(--line); border-radius:8px; padding:8px 10px; word-break:break-all; }
code { background:#f4f7fb; border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:.9em; }

/* Ausgabe an Kunden + Archiv */
.badge.kunde { background:#e0f2fe; color:#075985; }
.badge.archiv { background:#eceff3; color:#475569; }
.crow.archived { background:#f6f7f9; }
.crow.archived .cname { color:#7b8798; }
.issuedbox { background:#e8f7ec; border:1px solid #bfe6cd; }
.archivbox { background:#f1f3f7; border:1px solid #d5dbe5; }
form.inline { display:inline-block; margin-top:8px; }
form.inline .btn { margin:0; }
/* Kunden-Übersicht */
.kundecard { border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; background:#fff; }
.kundecard .khead { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; justify-content:space-between; }
.kundecard .kid { font-weight:800; font-size:1.05rem; }
.kundecard .kcodes { margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.kundecard .kcodes a { font-size:.8rem; text-decoration:none; }


/* QR-Code im Gerät (oben in den Gerätedetails) */
.qrbox { border:1px solid var(--line); }
.devqr { width:120px; height:120px; background:#fff; padding:4px; border:1px solid #e5e7eb; border-radius:8px; }
.devqr svg { width:100%; height:100%; display:block; }
@media (max-width:520px) { .devqr { width:96px; height:96px; } }


/* ================= Aufgeräumte Filterleiste & Listen ================= */

/* Filter in einer ruhigen Zeile: Suche breit, Auswahlfelder daneben */
.fbar { display:grid; grid-template-columns:minmax(200px,1fr) auto auto auto auto; gap:8px; align-items:center; }
.fbar input, .fbar select, .fbar .btn { margin:0; }
.fbar .fsearch { min-width:0; }
.fbar select { min-width:145px; width:auto; }
.fbar .btn { white-space:nowrap; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn.ghost:hover { background:#eef2f7; color:var(--text); }
@media (max-width:860px) {
  .fbar { grid-template-columns:1fr 1fr; }
  .fbar .fsearch { grid-column:1 / -1; }
  .fbar .btn { width:100%; }
}
@media (max-width:480px) { .fbar { grid-template-columns:1fr; } }

/* Zeilen: flach, klare Trennung, Status rechts */
.crow { border-color:#e8edf4; }
.crow:hover { background:#fafcff; border-color:#cfdcec; }
.crow .badge { margin-left:auto; border:1px solid rgba(15,47,92,.07); font-weight:600; }
.cmeta { flex:0 0 auto; font-size:.72rem; color:#8b96a6; }
.cmeta.kunde { color:#075985; }
.crow .cby { font-size:.72rem; color:#9aa4b2; }
@media (max-width:1100px) { .crow .cby { display:none; } }

/* Monatsüberschriften dezenter */
.mhead { font-size:.9rem; font-weight:700; color:#31405a; border-bottom:1px solid #e8edf4; }

/* Kundenliste: Buttons schlanker */
.kundecard .mt .btn { min-height:40px; }

/* Standardstatus ("Eingegangen") tritt zurück - nur Abweichungen fallen auf */
.badge.s-new { background:#f4f6fa; color:#7b8798; }

/* Auf größeren Bildschirmen umbrechen, statt rechts anzuschneiden.
   Am Handy bleibt die horizontale Wischleiste (jetzt bewusst, mit Fade). */
@media (min-width:700px) {
  .tabs, .yearchips { flex-wrap:wrap; overflow:visible; }
}
@media (max-width:699px) {
  /* Kein seitliches Wischen mehr: Kategorien und Jahre brechen um,
     damit man ALLE Optionen ohne Versteck sieht. */
  .tabs, .yearchips { flex-wrap:wrap; overflow:visible; gap:6px; }
  .tabs { position:static; -webkit-mask-image:none; mask-image:none; }
  /* kompakter, damit viele Kategorien in wenige Zeilen passen */
  .tab { padding:7px 11px; font-size:.85rem; }
  .tab .cnt { font-size:.72rem; padding:0 6px; }
}

/* Kategorie-Tabs und Jahres-Chips laufen gemeinsam um - keine verwaisten Chips */
.chipwrap { display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin:0 0 6px; }
.chipwrap .tabs, .chipwrap .yearchips { margin:0; padding:0; }
.chipwrap .yearchips { align-items:center; gap:6px; }
.chipfilter { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#8b96a6; margin-right:2px; }
.chipwrap .yearchips .chip { min-height:32px; padding:4px 11px; font-size:.82rem; }

/* Desktop: Chips kompakter, damit Kategorien + Archiv in eine Zeile passen.
   Am Handy bleiben die großen Tippflächen (>=42px). */
@media (min-width:700px) {
  .chipwrap .tab { min-height:34px; padding:6px 11px; font-size:.86rem; gap:5px; }
  .chipwrap .tab .cnt { font-size:.72rem; padding:0 6px; }
  .chipwrap .tab .dot { width:8px; height:8px; margin-right:4px; }
}

.statnetto { font-size:.72rem; color:#8b96a6; margin-top:2px; }

/* Elektroschrott-Diagramm (horizontale Balken, reines CSS) */
.esbars { display:flex; flex-direction:column; gap:9px; margin:14px 0 4px; }
.esrow { display:grid; grid-template-columns:minmax(130px,190px) 1fr 88px; gap:10px; align-items:center; }
.eslabel { font-size:.88rem; color:#31405a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.estrack { display:block; height:20px; background:#eef2f7; border-radius:6px; overflow:hidden; }
.estrack i { display:block; height:100%; border-radius:6px; min-width:3px; transition:width .25s ease; }
.esval { text-align:right; font-weight:700; font-size:.9rem; font-variant-numeric:tabular-nums; }
.essumme { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:2px solid #e8edf4; }
.essumme b { font-size:1.35rem; color:#0f2f5c; font-variant-numeric:tabular-nums; }
@media (max-width:520px) {
  .esrow { grid-template-columns:1fr 74px; grid-template-rows:auto auto; }
  .eslabel { grid-column:1 / -1; font-size:.82rem; }
}

/* Geräte-Auswahl beim Ausgeben (Kundenseite) */
.zbars { margin-bottom:10px; }
.zhint { align-self:center; white-space:nowrap; justify-self:end; }
.pick { display:flex; align-items:center; gap:9px; min-height:46px; padding:7px 11px; margin-bottom:5px;
        border:1px solid #e8edf4; border-radius:10px; background:#fff; cursor:pointer; font-size:.9rem; }
.pick:hover { border-color:#cfdcec; background:#fafcff; }
.pick input[type=checkbox] { width:20px; height:20px; margin:0; flex:0 0 auto; accent-color:var(--brand); cursor:pointer; }
.pick .pname { font-weight:600; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick .pmeta { font-size:.76rem; color:#8b96a6; flex:1 1 auto; overflow:hidden;
               text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.pick:has(input:checked) { border-color:var(--brand); background:#f4f8ff; box-shadow:inset 0 0 0 1px var(--brand); }
.zfoot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
         margin-top:12px; padding-top:12px; border-top:2px solid #e8edf4; }
.zcount b { font-size:1.15rem; color:var(--brand); }
#zknopf:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:640px) {
  .pick { flex-wrap:wrap; }
  .pick .pmeta { flex:1 1 100%; text-align:left; padding-left:29px; }
  .zfoot .btn { width:100%; }
}

.langpick { width:auto; margin:0 0 0 auto; padding:5px 8px; font-size:.85rem; border-radius:8px;
            background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35); }
.langpick option { background:#fff; color:#16202e; }

.anabox { margin:16px 0 20px; padding:14px 10px; background:#f8fafc;
          border:1px solid #e2e8f0; border-radius:12px; }
.anasvg { display:block; width:100%; height:auto; max-width:560px; margin:0 auto; }
.anaimg { display:block; width:100%; height:auto; max-width:760px; margin:0 auto;
          border-radius:8px; background:#fff; }
@media print {
  .anabox { break-inside: avoid; }
}

/* Urkunde drucken: A4 quer, ohne Navigation */
@media print {
  @page { size: A4 landscape; margin: 6mm; }
  .top, .nav, .wanav, .flash, main > h1, .zfamilien + .zrecht ~ * { }
  .top, .nav, .wanav, .flash, footer, .alpha-hinweis { display: none !important; }
  body { background: #fff !important; }
  main.wrap { padding: 0 !important; max-width: none !important; margin: 0 !important; }
  .zsheet { max-width: none !important; width: 100% !important; margin: 0 !important;
            padding: 8mm 10mm !important; border: 0 !important; border-radius: 0 !important; }
  .zlogo { height: 18mm !important; }
  .ztitel { font-size: 20pt !important; }
  .zspender { font-size: 18pt !important; }
  .ztext { font-size: 10pt !important; }
  .zkacheln { gap: 6mm !important; }
  .zk { border: 1px solid #cbd5e1 !important; }
  .zstempel { width: 24mm !important; height: 24mm !important; }
  .noprint, #mailbox { display: none !important; }
}

/* ================= Mobil: Burger-Menue, Touch-Ziele, kein Überlauf ================= */
.burger, .navclose { display:none; }
.burger { order:4; }

@media (max-width: 900px) {
  /* Kopfzeile: alles in EINE Zeile, kompakt */
  .top { position:sticky; top:0; z-index:120; box-shadow:0 1px 6px rgba(0,0,0,.18); }
  .toprow { display:grid; grid-template-columns:1fr auto auto; align-items:center;
            gap:7px; padding:7px 12px; flex-wrap:nowrap; }
  .brand { min-width:0; display:flex; align-items:center; gap:7px; }
  .brandtext { display:block; font-size:.92rem; white-space:nowrap; overflow:hidden;
               text-overflow:ellipsis; }
  .alphabadge { font-size:.58rem; padding:1px 5px; }
  .logo { height:24px; }
  .langpick { width:auto; max-width:104px; padding:6px 4px; font-size:.78rem; }
  /* Benutzer + Abmelden wandern in die Schublade (.navonly) */
  .userbox { display:none; }

  .burger { display:flex; align-items:center; justify-content:center;
            width:44px; height:44px; flex:0 0 auto; border:0; border-radius:10px;
            background:rgba(255,255,255,.15); color:#fff; font-size:1.3rem; line-height:1;
            cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .burger:active { background:rgba(255,255,255,.28); }

  /* Navigation als Vollbild-Sheet */
  .nav { display:none; }
  body.navopen .nav {
    /* WICHTIG: kein Umbruch in der Schublade – sonst entstehen neue SPALTEN
       rechts neben dem Bildschirm (genau das war der seitliche Wisch-Effekt). */
    display:flex; flex-direction:column; flex-wrap:nowrap; overflow-x:hidden;
    position:fixed; inset:0;
    z-index:300; background:#16202e; padding:14px 16px calc(96px + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch; gap:2px; max-width:none;
  }
  body.navopen { overflow:hidden; }
  body.navopen .nav a {
    padding:14px 12px; font-size:1.02rem; border-radius:10px; width:100%;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  body.navopen .nav a:active { background:rgba(255,255,255,.13); }
  body.navopen .nav .who { display:flex; align-items:center; gap:8px; width:100%;
                            white-space:nowrap; padding:14px 12px; font-size:.9rem; opacity:.75; }
  body.navopen .nav a.logout { display:block; background:rgba(255,255,255,.14); margin-top:4px; }
  .navclose { display:block !important; align-self:flex-end; font-size:1.5rem;
              padding:4px 14px !important; border:0 !important; margin-bottom:6px; }

  /* Touch-Ziele */
  .btn, button.btn, a.btn { min-height:44px; display:inline-flex; align-items:center;
                            justify-content:center; }
  .btn.small { min-height:36px; }
  .tabs .tab, .wcat { min-height:38px; display:inline-flex; align-items:center; }

  /* Kein iOS-Zoom beim Antippen von Feldern */
  input, select, textarea { font-size:16px; }

  /* Etwas mehr Luft an den Seiten */
  .wrap { padding-left:12px; padding-right:12px; }

  /* Tabellen duerfen nie die Seite sprengen */
  table { table-layout:auto; }
  .kv td, .kv th { word-break:break-word; }
}

@media (max-width: 560px) {
  /* QR-Karte: QR oben, Daten darunter, volle Breite */
  .devinfos { flex-basis:100% !important; }
}
/* Datentabellen: lieber seitlich scrollen als Zahlen zerhacken */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; padding:0 2px; }
.ctab td, .ctab th { white-space:nowrap; }
.ctab { min-width:520px; }

/* Breite Datentabellen (Erfassungen, Verlauf): seitlich scrollen statt quetschen */
.etable { min-width: 780px; }
@media (max-width:700px) { .etable { min-width: 0; } }
.etable th { white-space: nowrap; }
.etable .badge { white-space: nowrap; }


@media (max-width: 640px) {
  /* Dashboard: Kacheln zweispaltig und kompakt statt eine Riesenkarte pro Zeile */
  .cards { grid-template-columns:1fr 1fr; gap:8px; }
  .stat { padding:10px 12px; }
  .statnum { font-size:1.55rem; line-height:1.15; }
  .statlabel { font-size:.76rem; line-height:1.25; }
  h1 { font-size:1.18rem; margin:10px 0 8px; }
  h2 { font-size:1.02rem; }
  .card { padding:12px; }
  /* Karten und Filter stapeln */
  .fbar { grid-template-columns:1fr !important; }
  .btnrow, .mt .btnrow { display:flex; flex-direction:column; gap:8px; }
  .btnrow .btn, .mt .btn { width:100%; }
  /* Fliesstext nicht zu klein */
  .small { font-size:.82rem; }
  /* Lange Werte umbrechen statt abschneiden */
  .kv td, td, th { overflow-wrap:anywhere; }
}

.zform { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.zform label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:#41506b; }
.zform .wide { grid-column:1/-1; }
.zslogan { margin:0 0 16px; padding:16px 18px; border-radius:14px;
           background:linear-gradient(135deg,#1e4e8c,#2f6dbd); color:#fff; }
.zslogan-titel { font-size:1.28rem; font-weight:700; letter-spacing:.01em; }
.zslogan-zahl { margin-top:4px; font-size:.95rem; opacity:.95; }
.zslogan-zahl b { font-size:1.15rem; }
.zslogan .small { opacity:.8; }
.zfamilien { margin:6px 0 4px; text-align:center; font-size:.8rem; color:#6e7a8a; }
@media(max-width:640px){ .zslogan-titel{ font-size:1.05rem; } .zslogan-zahl{ font-size:.85rem; } }
.zlogo { display:block; height:20mm; width:auto; margin:0 auto 8px; }
.zkats { max-width:640px; margin:-10px auto 16px; text-align:center; font-size:.95rem;
         font-weight:600; color:#1e4e8c; line-height:1.5; }
.zdanke { margin:2px 0 20px; font-size:1.05rem; font-weight:700; color:#16a34a; }
.zstempel { display:block; width:74px; height:74px; margin:0 auto 2px; opacity:.92; }
.zdatum { text-align:center; }
.zkat { border:1px solid #dde3ea; border-radius:10px; padding:12px 14px; background:#f8fafc; }
.zktitel { font-weight:600; font-size:.9rem; color:#16202e; margin-bottom:8px; }
.zkgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.zkgrid label { font-size:.82rem; }
.zksumme { margin-top:10px; font-size:.85rem; color:#41506b;
           border-top:1px solid #dde3ea; padding-top:8px; }
.zksumme b { color:#1e4e8c; font-size:.95rem; }

.zlist { display:flex; flex-direction:column; gap:8px; }
.zrow { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; padding:11px 14px;
        background:#fff; border:1px solid #dde3ea; border-radius:10px; text-decoration:none; color:inherit; }
.zrow:hover { border-color:#2563eb; }
.znr { font-family:ui-monospace,monospace; font-size:.82rem; color:#2563eb; font-weight:600; }
.zname { font-weight:600; }
.zsheet { position:relative; background:#fff; border:1px solid #cbd5e1; border-radius:10px;
          padding:28px 22px; text-align:center; max-width:820px; margin:0 auto; }
.zkopf { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#6e7a8a; }
.ztitel { margin:10px 0 18px; font-size:1.6rem; letter-spacing:.1em; color:#1e4e8c; font-weight:700; }
.zfuer { font-size:.8rem; color:#6e7a8a; }
.zspender { font-size:1.5rem; font-weight:700; color:#16202e; margin-top:4px; word-break:break-word; }
.zlinie { width:180px; height:1px; background:#d6dde5; margin:16px auto; }
.ztext { font-size:.95rem; line-height:1.6; color:#1f2937; max-width:620px; margin:0 auto 20px; }
.zkacheln { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:22px; }
.zk { min-width:120px; padding:10px 14px; background:#f1f5f9; border-radius:10px; }
.zk b { display:block; font-size:1.25rem; color:#1e4e8c; }
.zk span { font-size:.72rem; color:#6e7a8a; }
.zfuss { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end;
         font-size:.78rem; color:#6e7a8a; border-top:1px solid #e6ebf1; padding-top:14px; }
.zfuss b { display:block; font-size:.9rem; color:#16202e; }
.zunterschrift { min-width:150px; border-top:1px solid #16202e; padding-top:4px; }
.zrecht { margin-top:14px; font-size:.68rem; color:#8a96a3; line-height:1.5; }
@media(max-width:640px){
  .zsheet { padding:20px 14px; }
  .ztitel { font-size:1.15rem; letter-spacing:.06em; }
  .zspender { font-size:1.2rem; }
  .zk { min-width:calc(50% - 5px); flex:1 1 calc(50% - 5px); }
  .zfuss { flex-direction:column; align-items:flex-start; gap:10px; }
  .zunterschrift { width:100%; }
}

.whead h1 { margin-bottom:4px; }
.wsearch { display:flex; gap:8px; margin:16px 0 12px; flex-wrap:wrap; }
.wsearch input { flex:1 1 260px; padding:10px 12px; font-size:.95rem; border:1px solid #cbd5e1; border-radius:9px; }
.wcount { margin:2px 0 14px; color:#5b6b7c; }
.wcats { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.wcat { padding:6px 13px; border-radius:20px; border:1px solid #dde3ea; background:#fff;
        font-size:.86rem; color:#334155; text-decoration:none; }
.wcat:hover { border-color:#93b4f0; }
.wcat.on { background:#2563eb; border-color:#2563eb; color:#fff; font-weight:600; }
.wgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:12px; margin:12px 0; }
.wcard { display:flex; gap:12px; padding:14px 16px; background:#fff; border:1px solid #dde3ea;
         border-radius:12px; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.wcard:hover { border-color:#2563eb; box-shadow:0 3px 14px rgba(37,99,235,.12); }
.wcatico { font-size:1.5rem; line-height:1.1; flex:0 0 auto; }
.wcardbody { min-width:0; }
.wcard h3 { margin:0 0 3px; font-size:.98rem; color:#16202e; }
.wcard p { margin:0; font-size:.85rem; color:#5b6b7c; line-height:1.45; }
.wmeta { display:inline-block; margin-top:6px; font-size:.76rem; color:#8a96a3; }
.warticle { max-width:860px; }
.wanav { display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.wanav a { font-size:.88rem; font-weight:600; color:#2563eb; text-decoration:none; }
.wanav .wmeta { margin:0; }
.wanav button { margin-left:auto; }
.wtitel { margin:0 0 6px; font-size:1.6rem; line-height:1.25; }
.wlead { margin:0 0 20px; font-size:1rem; color:#5b6b7c; line-height:1.5;
         padding-bottom:14px; border-bottom:1px solid #e6ebf1; }
.wbody { font-size:.96rem; line-height:1.65; color:#1f2937; }
.wbody p { margin:0 0 12px; }
.wbody .small { color:#6b7787; font-size:.85rem; }
.wh2 { margin:24px 0 10px; font-size:1.12rem; color:#16202e; }
.wlist, .wol { margin:0 0 14px; padding-left:22px; }
.wlist li, .wol li { margin-bottom:7px; }
.wwarn { display:flex; gap:10px; margin:14px 0; padding:12px 14px; background:#fffbea;
         border:1px solid #f2dd8d; border-left:4px solid #eab308; border-radius:8px; font-size:.9rem; }
.wico { flex:0 0 auto; }
.wtab { width:100%; border-collapse:collapse; margin:12px 0 16px; font-size:.88rem; }
.wtab th { text-align:left; background:#f1f5f9; padding:7px 9px; border:1px solid #e2e8f0; }
.wtab td { padding:7px 9px; border:1px solid #e2e8f0; vertical-align:top; }
.wmore { margin-top:36px; padding-top:8px; border-top:1px solid #e6ebf1; }

/* --- Leitfaden: Inhaltsmarken, Prüfblöcke, Regeln (einheitliche Optik) --- */
.wtoc { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:10px;
        background:#f1f5f9; border:1px solid #e2e8f0; border-radius:10px; }
.wtoc a { font-size:.86rem; font-weight:600; color:#1e4e8c; text-decoration:none;
          background:#fff; border:1px solid #dbe3ec; border-radius:999px; padding:6px 12px; }
.wtoc a:hover { border-color:#2563eb; box-shadow:0 2px 8px rgba(37,99,235,.12); }
.wbody h2[id] { scroll-margin-top:96px; }
.wbody h2[id]:target { color:#1e4e8c; }
.wsteps { display:grid; gap:14px; margin:14px 0 18px; }
.wstep { background:#fff; border:1px solid #dde3ea; border-left:4px solid var(--brand);
         border-radius:12px; padding:14px 16px; }
.wstephead { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.wstepico { flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:#eef4fb;
            display:flex; align-items:center; justify-content:center; font-size:1.05rem; line-height:1; }
.wstephead h3 { margin:0; font-size:1.02rem; color:#16202e; }
.wcheck { list-style:none; margin:0; padding:0;
          display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:3px 18px; }
.wcheck li { position:relative; padding-left:22px; font-size:.9rem; line-height:1.5; margin:0; }
.wcheck li::before { content:"✓"; position:absolute; left:0; top:0; color:#16a34a; font-weight:700; }
.wrules { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; }
.wrules li { display:flex; gap:12px; align-items:flex-start; background:#fff;
             border:1px solid #dde3ea; border-radius:12px; padding:12px 14px;
             font-size:.93rem; line-height:1.55; }
.wrule-n { flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--brand);
           color:#fff; display:flex; align-items:center; justify-content:center;
           font-weight:700; font-size:.85rem; }
.wbox { display:flex; gap:10px; margin:16px 0; padding:12px 14px; font-size:.92rem;
        background:#eef4fb; border:1px solid #cfe0f5; border-left:4px solid var(--brand); border-radius:8px; }
.wnote { font-size:.82rem; color:#6b7787; margin:10px 0 0; }
@media(max-width:700px){ .wanav button{ margin-left:0; } .wtitel{ font-size:1.3rem; } }
@media print {
  .wanav, .wmore, .wsearch { display:none !important; }
  .wcard, .wbody p, .wlist li, .wol li { break-inside:avoid; }
  .wtitel { font-size:1.4rem; }
}

.rlcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:18px 0; }
.rlcard { display:flex; flex-direction:column; gap:6px; padding:16px 18px; background:#fff;
          border:1px solid #dde3ea; border-radius:12px; text-decoration:none; color:inherit;
          transition:border-color .15s, box-shadow .15s; }
.rlcard:hover { border-color:#2563eb; box-shadow:0 3px 14px rgba(37,99,235,.13); }
.rlcardico { font-size:1.6rem; line-height:1; }
.rlcard h3 { margin:4px 0 2px; font-size:1.02rem; color:#16202e; }
.rlcard p { margin:0; font-size:.86rem; color:#5b6b7c; line-height:1.45; }
.rllink { margin-top:auto; padding-top:8px; font-size:.85rem; font-weight:600; color:#2563eb; }
.rlnav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 18px;
         padding:8px 10px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:10px; }
.rlnav a { font-size:.87rem; padding:6px 11px; border-radius:7px; text-decoration:none;
           color:#334155; border:1px solid transparent; }
.rlnav a:hover { background:#fff; border-color:#cbd5e1; }
.rlnavitem.on { background:#2563eb; color:#fff; font-weight:600; }
.rlnavitem.on:hover { background:#2563eb; border-color:#2563eb; }
.rlback { font-weight:600; }
.rlprint { margin-left:auto; }
.rltitel { margin:0 0 14px; font-size:1.35rem; }
@media(max-width:700px){ .rlprint{ margin-left:0; } }

/* Grading (Zustand A/B/C) */
.grades { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:10px; }
.gopt { margin:0; cursor:pointer; }
.gopt input { position:absolute; opacity:0; width:1px; height:1px; }
.gbox { display:flex; flex-direction:column; gap:3px; padding:12px 14px; min-height:72px;
        border:2px solid var(--line); border-radius:14px; background:#fff; }
.gbox b { font-size:1rem; color:var(--text); }
.gdesc { font-size:.8rem; color:var(--muted); line-height:1.3; }
.gopt input:checked + .gbox { border-color:var(--brand); background:#f4f8ff; box-shadow:inset 0 0 0 1px var(--brand); }
.gopt input:focus-visible + .gbox { outline:3px solid #7aa7dd; }
.gchip { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
         min-width:22px; height:20px; padding:0 6px; border-radius:6px; font-size:.72rem; font-weight:800; }
.gchip.gA { background:#dcfce7; color:#166534; }
.gchip.gB { background:#fef3c7; color:#92400e; }
.gchip.gC { background:#fee2e2; color:#991b1b; }

/* Metadaten lesbar halten */
.cmeta { color:#6b7686; }
.badge.s-new { color:#5b6472; }

/* ================= Richtlinien-Seite (Grading & Prüfplan) ================= */
.rlhead { margin-bottom:10px; }
.rlhead h1 { margin-bottom:4px; }
.rlsec { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:14px 0; }
.rlsec h2 { font-size:1.15rem; margin-bottom:10px; }
.rlsec h3.rlsub { font-size:1rem; margin:18px 0 8px; }
.rlsec p { font-size:.92rem; line-height:1.55; }
.rlregel { background:#fff8e1; border-left:4px solid #e3c46a; padding:10px 12px; border-radius:8px; margin:12px 0; }
.gcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:14px; }
.gcarda, .gcardb, .gcardc { border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.gcarda { border-top:5px solid #16a34a; }
.gcardb { border-top:5px solid #ca8a04; }
.gcardc { border-top:5px solid #dc2626; }
.gviz { background:#f7f9fc; border-radius:10px; padding:8px; margin-bottom:8px; }
.gviz svg { display:block; width:100%; max-width:200px; height:auto; margin:0 auto; }
.gcards h3 { font-size:1rem; margin:6px 0 8px; min-height:2.6em; display:flex; align-items:flex-start; }
.gcards h3.ga { color:#166534; } .gcards h3.gb { color:#92400e; } .gcards h3.gc { color:#991b1b; }
.gcards ul { margin:0; padding-left:18px; }
.gcards li { font-size:.86rem; line-height:1.5; margin-bottom:3px; }
.rltab { width:100%; border-collapse:collapse; margin-top:10px; font-size:.88rem; }
.rltab th { text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);
            border-bottom:2px solid var(--line); padding:7px 6px; }
.rltab td { padding:7px 6px; border-bottom:1px solid #eef2f7; }
.rlgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:12px; }
.rlbox { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fbfcfe; }
.rlbox h4 { font-size:.95rem; margin:0 0 8px; color:#0f2f5c; }
ul.check { list-style:none; margin:0; padding:0; }
ul.check li { position:relative; padding-left:24px; font-size:.86rem; line-height:1.55; margin-bottom:5px; }
ul.check li:before { content:""; position:absolute; left:0; top:2px; width:14px; height:14px;
                     border:2px solid #94a3b8; border-radius:3px; }
ol.rlregeln { margin:8px 0 0; padding-left:22px; }
ol.rlregeln li { font-size:.9rem; line-height:1.6; margin-bottom:6px; }

/* Druck: A4, Navigation weg, saubere Umbrüche */
@media print {
  @page { size:A4; margin:14mm 12mm; }
  body { background:#fff; font-size:11pt; }
  .top, .noprint, .stickybar { display:none !important; }
  /* Fußzeile bleibt im Ausdruck - mit Autor, Version und Jahr */
  .foot { display:block !important; margin-top:10mm; padding-top:3mm; border-top:1px solid #94a3b8;
          font-size:8.5pt; color:#334155; }
  .alphafoot { display:none !important; }
  .footmeta { font-size:8.5pt; color:#475569; }
  .wrap { max-width:none; padding:0; }
  .rlsec { border:none; padding:0; margin:0 0 10mm; }
  .rlhead h1 { font-size:18pt; }
  .pagebreak { page-break-before:always; }
  .gcards { grid-template-columns:1fr 1fr 1fr; gap:4mm; }
  .gcarda, .gcardb, .gcardc { padding:3mm 3.5mm; }
  .rlgrid { grid-template-columns:1fr 1fr; gap:6mm; }
  .rlbox, .gcarda, .gcardb, .gcardc { break-inside:avoid; }
  .gcards li, ul.check li, ol.rlregeln li { font-size:9.5pt; }
  a { color:inherit; text-decoration:none; }
  ul.check li:before { border-color:#334155; }
}




/* ---- PDF-Vorschau der Urkunde ---- */
.pdfbox {
  background: #e8edf3;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 18px rgba(15,23,42,.10);
}
.pdframe {
  display: block;
  width: 100%;
  height: min(78vh, 700px);
  border: 0;
  border-radius: 8px;
  background: #fff;
}
@media (max-width: 640px) {
  .pdfbox { padding: 6px; border-radius: 8px; }
  .pdframe { height: 65vh; min-height: 300px; }
}

/* --- Rechte-Matrix, Team-Anwesenheit, Audit --- */
.rt th.rm, .rt td.rm { text-align:center; white-space:nowrap; }
.ryes { color:#16a34a; font-weight:700; }
.rno { color:#cbd5e1; }
.rsel { width:auto; min-width:132px; padding:6px 8px; font-size:.85rem; margin:0; }
.tp { font-weight:600; }
.tp.on { color:#15803d; }
.tp.off { color:#8a96a3; font-weight:400; }
.badge.role-owner { background:#ede9fe; color:#5b21b6; }
.card.danger { border-color:#f3c9c9; background:#fffafa; }
@media(max-width:640px){ .rsel { min-width:100px; font-size:.8rem; } }

/* --- Navigation: Gruppenmenüs --- */
.menu { position:relative; }
.menutoggle { background:none; border:0; cursor:pointer; color:#e8f0fb; font-size:.92rem;
              padding:2px 0; display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
              font-family:inherit; }
.menutoggle::after { content:"▾"; font-size:.7em; opacity:.75; }
.menutoggle[aria-expanded="true"] { color:#fff; }
.menubox { display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:200; min-width:210px;
           background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px;
           box-shadow:0 10px 28px rgba(16,32,46,.18); flex-direction:column; }
.menu.open .menubox { display:flex; }
.menubox a { display:block; padding:9px 12px; border-radius:8px; color:var(--text) !important;
             font-size:.92rem; text-decoration:none; white-space:nowrap; }
.menubox a:hover { background:#f1f5f9; }
.navbadge { display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:#ca8a04;
            color:#fff; font-weight:700; font-size:.75rem; text-align:center; }
.wholink { display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none;
           max-width:240px; padding:4px 6px; border-radius:9px; }
.wholink:hover { background:rgba(255,255,255,.12); }
.wholink .whoname { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.85rem; }
.avatar.pinit { display:inline-flex; align-items:center; justify-content:center;
                background:#eef4fb; color:var(--brand); font-weight:700; font-size:.85rem; }
.avatar.lg.pinit { font-size:2rem; }

/* --- Profil --- */
.prow { display:flex; align-items:center; gap:16px; }
.pavatar .avatar.lg { width:76px; height:76px; }
.pinfo { min-width:0; }
.pinfo b { font-size:1.05rem; }
.hint { display:block; font-size:.8rem; color:var(--muted); margin-top:3px; }
.frow { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:6px 0 4px; }
.fbtn { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px dashed #b9c7d8;
        border-radius:10px; cursor:pointer; font-size:.9rem; color:var(--brand); background:#f8fafc; }
.fbtn input[type=file] { display:none; }

/* --- Aufgaben --- */
.tdcard h2 { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.tdalle { margin-left:auto; }
.tdlist { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.tdrow { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line);
         border-left:4px solid #94a3b8; border-radius:10px; background:#fff; }
.tdrow.prio1 { border-left-color:#dc2626; }
.tdrow.prio2 { border-left-color:#2563eb; }
.tdrow.prio3 { border-left-color:#94a3b8; }
.tdrow.ueber { background:#fff7f7; }
.tdrow.done { opacity:.65; }
.tdtext { flex:1 1 auto; min-width:0; }
.tdtext b { font-size:.95rem; }
.tdform { margin:0; }
.tdcheck { width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:#f8fafc;
           color:#16a34a; font-weight:700; cursor:pointer; flex:0 0 auto; line-height:1; }
.tdcheck.frei { color:var(--brand); }
.tdcheck.done { display:flex; align-items:center; justify-content:center; background:#e6f6ec; border-color:#bfe6cd; }
.tdcheck:hover { background:#eef4fb; }
.tdactions { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.tduber { color:#b91c1c; font-weight:600; }
.tdneu summary { cursor:pointer; font-weight:700; color:var(--brand); }
.tdneu form { margin-top:12px; }
.tdchips { margin:0 0 12px; }
@media (max-width:900px) {
  /* Schublade: Gruppen aufgeklappt als flache Liste – ohne Aufklappen, ohne Zustand */
  .menutoggle { display:none; }
  .menu { display:contents; }
  .menubox { display:flex !important; position:static; box-shadow:none; border:0; background:none;
             padding:0; min-width:0; }
  .menubox a { color:#e8f0fb !important; padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.07);
               border-radius:10px; font-size:1.02rem; }
  /* Desktop-Benutzerblock ist versteckt – wholink nicht doppelt */
  .wholink { display:none; }
  .tdrow { flex-wrap:wrap; }
  .tdactions { margin-left:0; }
  .tdalle { margin-left:0; }
}

/* ================= Mobil: Tabellen werden zu Karten =================
   Statt 7 Spalten in 340 px zu quetschen, bekommt jede Zeile die Form
   einer Karte mit „Beschriftung → Wert“. Kein horizontaler Scroll nötig. */
@media (max-width: 700px) {
  .rtable { display:block; width:100%; }
  .rtable thead, .rtable tr.head { display:none !important; }
  .rtable tbody { display:block; }
  .rtable tr { display:grid; grid-template-columns:1fr 1fr; gap:3px 12px;
               border:1px solid var(--line); border-radius:12px;
               padding:10px 12px; margin:0 0 10px; background:#fff; }
  .rtable td { display:block; border:0; padding:0; font-size:.9rem; min-width:0; }
  .rtable td[data-label]::before { content: attr(data-label); display:inline;
      font-size:.7rem; color:#8a96a3; margin-right:4px; }
  .rtable td.who, .rtable td.wide { grid-column:1 / -1; }
  .rtable td.who { font-size:1rem; padding-bottom:5px; }
  .rtable td.rrecht { font-weight:700; font-size:.95rem; padding-bottom:7px; }
  /* Rechte-Matrix: eigene Karte, Rollen als Chips in einer Zeile */
  .rtable.rmatrix tr { display:block; }
  .rtable td.rm { display:inline-block; margin:2px 12px 2px 0; font-size:.85rem; }
  .rtable td.rm[data-label]::before { display:inline; margin:0 3px 0 0;
      font-size:.72rem; text-transform:none; letter-spacing:0; color:#8a96a3; }
  .rtable td.rm .rsel { display:block; margin-top:6px; }
}