/* ═══════════════════════════════════════════════════════════════════════
   🙈 „hidden" muss überall verstecken – EIN Riegel für die ganze App.
   Die Browser-Vorgabe [hidden]{display:none} hat die Stärke (0,1,0) und
   verliert damit gegen JEDE eigene Klassenregel mit display:flex/grid/
   inline-flex. Genau das ist heute dreimal passiert:
     · .dup-warn      → „Schon im Bestand" stand dauerhaft da
     · .btn-*         → jeder versteckte Knopf blieb sichtbar
     · .bs-tippen     → das ISBN-Feld war immer offen
   Deshalb hier eine Regel mit (0,1,2): sie schlägt Klassenregeln, aber
   sie verliert gegen ein per JavaScript gesetztes element.style.display
   (Inline-Stil) – und das ist wichtig, denn an 57 Stellen wird genau so
   ein- und ausgeblendet. KEIN !important: das würde die alle lahmlegen.
   ═══════════════════════════════════════════════════════════════════════ */
html body [hidden]{display:none}

:root{
    --navy:#1F3864;
    --navy-2:#2C4A7C;
    --navy-dark:#162B4E;
    --orange:#E89A3C;
    --orange-dark:#D2842A;
    --white:#ffffff;
    --surface:#ffffff;
    /* Sicherheitsnetz: alte Namen zeigen auf die Flaechenfarbe, damit sie
       im Dunkelmodus nicht auf Weiss zurueckfallen (siehe Designsystem 11c) */
    --card:var(--surface);
    --card-2:var(--tile);
    --ink:#1F3864;
    --bg:#F4F6FA;
    --tile:#E8F0FB;          /* leichtes Hellblau für Kachelbereiche */
    --line:#E2E7F0;
    --text:#243247;
    /* 🎨 v1.39.0b: von #7A879C auf #646F84 gehoben. Gemessen: 3,64:1 auf
       Weiss war unter dem Mindestwert 4,5:1; jetzt 5,06:1 auf Weiss und
       4,68:1 auf der Seitenflaeche --bg. Der Dunkelmodus lag schon darueber. */
    --muted:#646F84;
    --green:#3FA972;
    --yellow:#E8B93C;
    --red:#D96A5B;
    --shadow:0 2px 10px rgba(31,56,100,.08);
    --shadow-lg:0 8px 30px rgba(31,56,100,.14);
    font-family:Arial, "Segoe UI", sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--text);font-size:14px;line-height:1.45}
  button{font-family:inherit;cursor:pointer}
  .app{display:flex;min-height:100vh}

  /* ---------- Sidebar ---------- */
  .sidebar{width:220px;background:var(--navy);color:#D6DEEC;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
  .brand{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
  .brand .logo{font-size:26px;font-weight:800;letter-spacing:2px;color:#fff}
  .brand .logo b{color:var(--orange)}
  .brand .rule{height:3px;background:var(--orange);width:60px;margin:6px 0 5px;border-radius:2px}
  .brand .sub{font-size:8.5px;letter-spacing:1px;color:#9FB0CC;text-transform:uppercase}
  .brand .app-name{margin-top:12px;font-size:11px;color:#8FA1C0;letter-spacing:.5px;text-transform:uppercase}
  .nav{padding:14px 10px;flex:1}
  .nav a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:9px;color:#C7D2E6;text-decoration:none;font-size:14px;margin-bottom:3px;transition:.15s}
  .nav a .ic{width:18px;text-align:center;font-size:16px}
  .nav a:hover{background:rgba(255,255,255,.07);color:#fff}
  .nav a.active{background:var(--orange);color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(232,154,60,.35)}
  .side-stats{padding:12px 16px;display:flex;flex-direction:column;gap:9px;border-top:1px solid rgba(255,255,255,.08)}
  .side-stats .ss{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .side-stats .ss .k{font-size:10.5px;color:#93A2C0;text-transform:uppercase;letter-spacing:.3px}
  .side-stats .ss .v{font-size:16px;font-weight:800;color:#fff;white-space:nowrap}
  .side-foot{padding:14px 18px;font-size:11px;color:#7C8DAD;border-top:1px solid rgba(255,255,255,.08)}

  /* ---------- Main ---------- */
  .main{flex:1;min-width:0;display:flex;flex-direction:column}
  .topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:20}
  .search{flex:1;max-width:520px;position:relative}
  .search input{width:100%;padding:11px 14px 11px 40px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;background:var(--bg)}
  .search input:focus{outline:none;border-color:var(--orange);background:var(--surface)}
  .search .si{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px}
  .topbar .btn-primary{background:var(--orange);color:#fff;border:none;padding:11px 18px;border-radius:10px;font-weight:700;font-size:13px}
  .topbar .btn-primary:hover{background:var(--orange-dark)}
  .topbar .user{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
  .content{padding:26px;flex:1}
  .page{display:none;animation:fade .25s ease}
  .page.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
  .page-head h1{font-size:22px;color:var(--ink)}
  .page-head .sub{color:var(--muted);font-size:13px;margin-top:2px}

  /* ---------- Cards / stats ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
  .stat{background:var(--surface);border-radius:14px;padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--orange)}
  .stat .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
  .stat .v{font-size:28px;font-weight:800;color:var(--ink);margin-top:6px}
  .stat .d{font-size:12px;color:var(--green);margin-top:3px}
  .stat.alt::before{background:var(--navy)}

  .grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
  .card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:20px}
  .card h3{font-size:14px;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px}
  .card h3 .bar{width:4px;height:16px;background:var(--orange);border-radius:2px;display:inline-block}

  .catrow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .catrow .name{width:130px;font-size:13px}
  .catrow .track{flex:1;height:9px;background:var(--bg);border-radius:6px;overflow:hidden}
  .catrow .fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--orange-dark));border-radius:6px}
  .catrow .num{width:34px;text-align:right;font-weight:700;color:var(--ink);font-size:13px}

  .recent{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
  .recent:last-child{border-bottom:none}
  .thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--bg);border:1px solid var(--line)}
  .recent .thumb{background:var(--tile)}
  .recent .meta{flex:1;min-width:0}
  .recent .meta .t{font-weight:700;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .recent .meta .s{color:var(--muted);font-size:12px}
  .loc{font-family:monospace;font-size:11px;background:var(--navy);color:#fff;padding:2px 7px;border-radius:5px;letter-spacing:.5px}

  /* ---------- Table / list ---------- */
  .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
  .toolbar select,.toolbar input{padding:9px 12px;border:1.5px solid var(--line);border-radius:9px;font-size:13px;background:var(--surface);color:var(--text)}
  .toolbar .chip{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:7px 14px;font-size:12.5px;color:var(--muted)}
  .toolbar .chip.on{background:var(--navy);color:#fff;border-color:var(--ink)}
  .toolbar .spacer{flex:1}
  .table-wrap{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
  table{width:100%;border-collapse:collapse}
  thead th{background:var(--navy);color:#fff;text-align:left;padding:13px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
  tbody td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
  tbody tr{cursor:pointer;transition:.12s}
  tbody tr:hover{background:#FBF6EF}
  .id{font-family:monospace;color:var(--muted);font-size:12px}
  .cellname{display:flex;align-items:center;gap:11px}
  .cellname .mini{width:34px;height:34px;border-radius:8px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
  .cellname b{color:var(--ink)}
  .badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
  .b-neu{background:#E4F5EC;color:var(--green)}
  .b-sg{background:#E4F1F5;color:#2E82A6}
  .b-gut{background:#FBF0DC;color:var(--orange-dark)}
  .b-geb{background:#EFEFF3;color:#7A879C}
  .b-def{background:#FBE7E3;color:var(--red)}
  .price{font-weight:700;color:var(--ink)}
  .cat-tag{font-size:11.5px;color:var(--muted)}

  /* ---------- Detail ---------- */
  .detail-grid{display:grid;grid-template-columns:340px 1fr;gap:22px}
  .gallery .big{width:100%;height:260px;background:var(--bg);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:90px;box-shadow:var(--shadow);overflow:hidden}
  .gallery .big img{width:100%;height:100%;object-fit:contain}
  .gallery .strip{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .gallery .strip>div,.gallery .strip>a{flex:0 0 56px;width:56px;height:56px;background:var(--bg);border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;overflow:hidden}
  .gallery .strip div.sel{border-color:var(--orange);border-width:2px}
  .gallery .strip div.sel img{width:100%;height:100%;object-fit:cover}
  .gallery .addph{border:2px dashed var(--line)!important;color:var(--muted);font-size:12px!important}
  .detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
  .detail-head h2{font-size:22px;color:var(--ink)}
  .detail-head .actions{display:flex;gap:8px}
  .btn-ghost{background:var(--surface);border:1.5px solid var(--line);color:var(--ink);padding:9px 14px;border-radius:9px;font-weight:700;font-size:13px}
  .btn-ghost:hover{border-color:var(--orange);color:var(--orange-dark)}
  .btn-orange{background:var(--orange);border:none;color:#fff;padding:9px 14px;border-radius:9px;font-weight:700;font-size:13px}
  .btn-orange:hover{background:var(--orange-dark)}
  /* Aktions-Farbkonvention: rot=Abbruch/Beenden · grün=OK/Speichern · orange=sonst · grau=neutral */
  .btn-red{background:var(--red);border:none;color:#fff;padding:9px 14px;border-radius:9px;font-weight:700;font-size:13px}
  .btn-red:hover{background:#C2564A}
  .btn-green{background:var(--green);border:none;color:#fff;padding:9px 16px;border-radius:9px;font-weight:700;font-size:13px}
  .btn-green:hover{background:#348C5E}
  .btn-grey{background:var(--bg);border:1.5px solid var(--line);color:var(--muted);padding:9px 14px;border-radius:9px;font-weight:700;font-size:13px}
  .fields{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:16px}
  .field{background:var(--surface);padding:12px 15px}
  .field .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
  .field .val{font-size:14px;color:var(--text);margin-top:3px;font-weight:600}
  .field.full{grid-column:1/-1}
  .field .val.desc{font-weight:400;line-height:1.5}
  .qrbox{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:16px}
  .qrbox .txt{flex:1}
  .qrbox .txt .l{font-size:11px;color:var(--muted);text-transform:uppercase}
  .qrbox .txt b{color:var(--ink);font-size:16px}

  /* ---------- Labels ---------- */
  .label-intro{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
  .label-intro .opt{display:flex;flex-direction:column;gap:5px}
  .label-intro label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
  .label-intro select,.label-intro input{padding:8px 11px;border:1.5px solid var(--line);border-radius:8px;font-size:13px}
  .sheet{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:26px}
  .sheet .hint{color:var(--muted);font-size:12px;margin-bottom:16px}
  .labelstrip{display:flex;flex-direction:column;gap:8px;max-width:560px}
  .lbl{display:flex;align-items:center;gap:12px;border:1.5px solid var(--navy);border-radius:8px;padding:8px 12px;background:var(--surface)}
  .lbl .qr{flex-shrink:0}
  .lbl .info{flex:1;min-width:0}
  .lbl .info .nr{font-family:monospace;font-size:11px;color:var(--orange-dark);font-weight:700}
  .lbl .info .nm{font-weight:700;color:var(--ink);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lbl .info .lc{font-size:11px;color:var(--muted);font-family:monospace}
  .lbl .brandtag{writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;letter-spacing:2px;color:var(--orange);font-weight:800}
  .lbl .cond{width:12px;height:12px;border-radius:50%;flex-shrink:0}

  /* ---------- Mobile ---------- */
  .phone-row{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
  .phone{width:300px;background:#111;border-radius:38px;padding:11px;box-shadow:var(--shadow-lg)}
  .phone .screen{background:var(--bg);border-radius:28px;overflow:hidden;height:600px;display:flex;flex-direction:column;position:relative}
  .ph-note{text-align:center;color:var(--muted);font-size:12px;margin-top:12px;font-weight:700}
  .ph-top{background:var(--navy);color:#fff;padding:16px 16px 12px;flex-shrink:0}
  .ph-top .logo{font-size:17px;font-weight:800;letter-spacing:1px}
  .ph-top .logo b{color:var(--orange)}
  .ph-top .ttl{font-size:13px;color:#B9C6DF;margin-top:8px}
  .ph-body{flex:1;overflow:auto;padding:14px}
  .ph-photo{height:120px;border:2px dashed var(--orange);border-radius:14px;background:#FBF6EF;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--orange-dark);gap:4px;margin-bottom:14px}
  .ph-photo .cam{font-size:30px}
  .ph-photo small{font-size:11px;color:var(--muted)}
  .ph-field{margin-bottom:11px}
  .ph-field label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:4px}
  .ph-field .inp{background:var(--surface);border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;color:var(--text)}
  .ph-field .inp.ph-sel{display:flex;justify-content:space-between;color:var(--ink);font-weight:600}
  .ph-two{display:flex;gap:9px}
  .ph-two .ph-field{flex:1}
  .ph-save{background:var(--orange);color:#fff;text-align:center;padding:13px;border-radius:11px;font-weight:800;margin-top:6px}
  .ph-scan{position:absolute;bottom:16px;right:16px;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--shadow-lg);border:3px solid #fff}
  /* mobile list variant */
  .ph-card{background:var(--surface);border-radius:12px;padding:11px;display:flex;gap:11px;align-items:center;margin-bottom:10px;box-shadow:var(--shadow)}
  .ph-card .mini{width:44px;height:44px;border-radius:9px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
  .ph-card .m{flex:1;min-width:0}
  .ph-card .m .t{font-weight:700;color:var(--ink);font-size:13px}
  .ph-card .m .s{font-size:11px;color:var(--muted)}
  .ph-search{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:9px 14px;font-size:12px;color:var(--muted);margin-bottom:12px;position:sticky;top:-14px;z-index:3}

  /* dashboard search */
  .dash-search{display:flex;gap:12px;margin-bottom:14px}
  .dash-search .search{flex:1;max-width:none}
  .dash-search .search input{padding:14px 16px 14px 42px;font-size:15px;border-color:var(--orange);background:var(--surface)}
  .dash-search .si{font-size:18px}

  /* attachments */
  .attach{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
  .att-item{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:210px;max-width:100%}
  .att-item.pdf{border-color:var(--orange)}
  .att-item .ai{font-size:20px;flex-shrink:0}
  .att-item .an{min-width:0;flex:1}
  .att-item .an b{color:var(--ink);font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .att-item .an small{color:var(--muted);font-size:11px}
  .att-item .ax{margin-left:auto;color:var(--muted);font-size:15px;cursor:pointer}
  .att-add{display:flex;flex-direction:column;justify-content:center;text-align:center;border:2px dashed var(--orange);color:var(--orange-dark);border-radius:10px;padding:9px 16px;min-width:230px;font-weight:700;font-size:13px;cursor:pointer;background:#FBF6EF}
  .att-add small{font-weight:400;color:var(--muted);font-size:10.5px}

  /* mobile bottom nav */
  .ph-nav{flex-shrink:0;background:var(--surface);border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-around;padding:7px 6px 11px}
  .ph-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:17px;color:var(--muted);flex:1;padding-bottom:2px}
  .ph-nav-item span{font-size:9px;letter-spacing:.2px}
  .ph-nav-item.active{color:var(--ink);font-weight:700}
  .ph-plus-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
  .ph-plus{width:52px;height:52px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;box-shadow:0 6px 16px rgba(232,154,60,.5);margin-top:-26px;border:4px solid #fff}
  .ph-plus-wrap span{font-size:9px;color:var(--orange-dark);font-weight:700}

  /* topbar icon button */
  .icon-btn{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:18px}
  .icon-btn:hover{border-color:var(--orange);color:var(--orange-dark)}

  /* stars */
  .stars{display:inline-flex;gap:1px;line-height:1;font-size:15px}
  .st{position:relative;color:#D3DAE6}
  .stf{position:absolute;left:0;top:0;overflow:hidden;color:var(--orange);white-space:nowrap;width:0}
  .catrow .ccount{width:26px;height:22px;border-radius:6px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
  .catrow .cstars{margin-left:auto;display:flex;align-items:center;gap:7px}
  .catrow .cstars small{color:var(--muted);font-size:11px;font-weight:700;width:26px;text-align:right}

  /* Erfassen form */
  .form-grid{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start}
  .fcard{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
  .fcard h3{font-size:12px;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.4px}
  .fcard h3 .bar{width:4px;height:14px;background:var(--orange);border-radius:2px}
  .drop{border:2px dashed var(--orange);background:#FBF6EF;border-radius:12px;height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--orange-dark);gap:6px;font-weight:700;text-align:center;cursor:pointer;overflow:hidden;position:relative;padding:0}
  .drop .drop-ph{display:flex;flex-direction:column;align-items:center;gap:6px}
  .drop .big{font-size:38px}
  .drop small{color:var(--muted);font-weight:400}
  .drop-prev{display:none;width:100%;height:100%;object-fit:cover}
  .drop.has .drop-prev{display:block}
  .drop.has .drop-ph{display:none}
  .thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .thumbs .t{width:58px;height:58px;border-radius:9px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;overflow:hidden}
  .thumbs .t img{width:100%;height:100%;object-fit:cover}
  .thumbs .t.main::after{content:"HAUPT";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:7px;font-weight:800;padding:1px 4px;border-radius:4px;letter-spacing:.5px}
  .thumbs .t.add{border:2px dashed var(--line);color:#B7C0D2;font-size:22px;cursor:pointer;background:var(--surface);transition:.15s}
  .thumbs .t.add:hover{border-color:var(--orange);color:var(--orange);background:#FBF6EF}
  .img-label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:8px}
  .catimg{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
  .catimg .ci{width:48px;height:48px;border-radius:12px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
  .catimg .cx b{color:var(--ink);font-size:13px;display:block}
  .catimg .cx small{color:var(--muted);font-size:11px}
  .frow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .fld{flex:1;min-width:150px}
  .fld.full{flex-basis:100%;min-width:100%}
  .fld label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;font-weight:700}
  /* Allgemeiner runder Feld-Stil für ALLE .in-Felder & Selects (auch Kalkulationstabelle) */
  .in{border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;background:var(--surface);color:var(--text);outline:none}
  select.in{cursor:pointer}
  .in:focus{border-color:var(--orange)}
  .fld .in,.fld select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;background:var(--surface);color:var(--text)}
  .fld .in.ro{background:var(--bg);font-family:monospace;color:var(--ink);font-weight:700}
  .fld .with-btn{display:flex;gap:8px}
  .fld .with-btn .in{flex:1}
  .btn-search{background:var(--navy);color:#fff;border:none;border-radius:9px;padding:0 13px;font-size:12px;font-weight:700;white-space:nowrap}
  .btn-search:hover{background:var(--navy-dark)}
  /* richtext */
  .rt-toolbar{display:flex;gap:2px;border:1.5px solid var(--line);border-bottom:none;border-radius:9px 9px 0 0;padding:6px;background:var(--bg);flex-wrap:wrap}
  .rt-toolbar button{border:none;background:transparent;min-width:30px;height:28px;border-radius:6px;font-size:13px;color:var(--ink);padding:0 6px}
  .rt-toolbar button:hover{background:var(--surface)}
  .rt-toolbar .sep{width:1px;background:var(--line);margin:3px 4px}
  .rt-area{border:1.5px solid var(--line);border-radius:0 0 9px 9px;padding:12px;min-height:86px;font-size:14px;line-height:1.55}
  .rt-area b{color:var(--ink)}
  /* segmented condition */
  .seg-group{margin-bottom:15px}
  .seg-group>label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px;font-weight:700}
  .seg{display:flex;flex-wrap:wrap;gap:6px}
  .seg button{border:1.5px solid var(--line);background:var(--surface);color:var(--muted);padding:8px 13px;border-radius:20px;font-size:12.5px;font-weight:600}
  .seg button.on{background:var(--navy);color:#fff;border-color:var(--ink)}
  .seg button.on[data-tone="good"]{background:var(--green);border-color:var(--green)}
  .seg button.on[data-tone="warn"]{background:#C9962B;border-color:#C9962B;color:#fff}
  .seg button.on[data-tone="bad"]{background:var(--red);border-color:var(--red)}
  .score-box{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:12px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:12px;flex-wrap:wrap}
  .score-box .big{font-size:30px;font-weight:800;line-height:1}
  .score-box .lbl{font-size:10.5px;color:#B9C6DF;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
  .score-box .stars{font-size:24px}
  .score-box .st{color:#3A5488}
  /* loan / library */
  .switch{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);cursor:pointer;font-size:13px}
  .switch .track{width:42px;height:24px;background:var(--orange);border-radius:20px;position:relative;transition:.2s}
  .switch .track::after{content:"";position:absolute;right:2px;top:2px;width:20px;height:20px;background:var(--surface);border-radius:50%;transition:.2s}
  .switch.off .track{background:#C7CFDD}
  .switch.off .track::after{right:20px}
  .loan-fields{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}

  /* ---- Kompaktes Erfassen: 3 Spalten am breiten Desktop ---- */
  .erf-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
  .erf-grid .fcard{padding:16px;margin-bottom:16px}
  .erf-grid .frow{margin-bottom:10px}
  .erf-grid .fld label{font-size:10px;margin-bottom:3px}
  .erf-grid .fld .in,.erf-grid .fld select{padding:8px 10px;font-size:13px}
  .erf-grid .drop{height:122px}
  .erf-grid .seg button{padding:6px 11px;font-size:12px}
  .erf-grid .seg-group{margin-bottom:10px}
  /* Sammler-Score im Erfassen: schmale einzeilige Leiste oben in der Bewertung */
  .erf-grid .score-box.slim{margin:0 0 12px;padding:8px 12px;gap:10px;flex-wrap:nowrap;
                            align-items:center;justify-content:flex-start}
  .erf-grid .score-box.slim .big{font-size:17px}
  .erf-grid .score-box.slim .stars{font-size:15px}
  .erf-grid .score-box.slim .lbl{font-size:11px;margin:0;color:#B9C6DF;margin-left:auto}
  .erf-grid .rt-area{min-height:60px;padding:10px}
  @media(min-width:1180px){ .erf-grid{grid-template-columns:238px minmax(0,1fr) 306px} }
  /* Beschreibung: per Haken aktivierbar, sonst ausgegraut */
  .chk{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--ink);margin:2px 0 8px;cursor:pointer;user-select:none}
  .chk input{width:17px;height:17px;accent-color:var(--orange);cursor:pointer}
  .descbox{transition:.15s}
  .descbox.off{opacity:.4;filter:grayscale(.4);pointer-events:none}
  .descbox.off .rt-area{min-height:30px}      /* ausgegraut = flach, spart Platz */
  /* Eigentum & Bibliothek als volle Zeile unter dem Raster */
  .erf-owner{padding:16px}
  .erf-owner .frow>.fld{flex:0 1 300px}
  .erf-owner .loan-fields .fld{flex:1}
  .pill-lib{display:inline-flex;align-items:center;gap:6px;background:#FBF0DC;color:var(--orange-dark);padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700}
  .pill-home{background:#E4F5EC;color:var(--green)}
  .pill-over{background:#FBE7E3;color:var(--red)}
  .due{color:var(--red);font-weight:700}
  .lib-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .lib-row:last-child{border-bottom:none}
  .lib-row .mini{width:40px;height:40px;border-radius:9px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
  .lib-row .lm{flex:1;min-width:0}
  .lib-row .lm .t{font-weight:700;color:var(--ink);font-size:13px}
  .lib-row .lm .s{font-size:12px;color:var(--muted)}
  .who{display:inline-block;background:var(--navy);color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
  /* settings */
  .set-wrap{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:start}
  .set-tabs{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:10px;position:sticky;top:86px}
  .set-tabs button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:transparent;padding:11px 13px;border-radius:9px;font-size:13.5px;color:var(--text);font-weight:600}
  .set-tabs button:hover{background:var(--bg)}
  .set-tabs button.on{background:var(--navy);color:#fff}
  .set-select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:700;box-shadow:var(--shadow);margin-bottom:14px;-webkit-appearance:menulist;appearance:auto}
  .set-panel{display:none}
  .set-panel.on{display:block;animation:fade .2s ease}
  .set-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .set-head h2{font-size:17px;color:var(--ink)}
  .lst{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
  .lst .r{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .lst .r:last-child{border-bottom:none}
  .lst .r:hover{background:#FBF6EF}
  .lst .h{background:var(--navy);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
  .lst .h:hover{background:var(--navy)}
  .swatch{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
  .codecell{font-family:monospace;font-weight:700;color:var(--orange-dark);width:40px}
  .grow{flex:1;font-weight:600;color:var(--ink)}
  .muted-cell{color:var(--muted);font-size:12px}
  .rowact{display:flex;gap:6px}
  .rowact button{border:1.5px solid var(--line);background:var(--surface);border-radius:7px;width:30px;height:30px;font-size:13px;color:var(--muted)}
  .rowact button:hover{border-color:var(--orange);color:var(--orange-dark)}
  .rowact button.fav{color:#C7CFDD}
  .rowact button.fav.on{color:#E89A3C;border-color:#E89A3C;background:#FBF6EF}
  .add-row{display:flex;align-items:center;gap:8px;color:var(--orange-dark);font-weight:700;padding:12px 16px;font-size:13px;cursor:pointer;background:#FBF6EF}

  /* Kategorie-Widget (Dashboard) */
  .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .seg-toggle{display:inline-flex;background:var(--bg);border-radius:9px;padding:3px;gap:2px}
  .seg-toggle button{border:none;background:transparent;width:34px;height:28px;border-radius:7px;font-size:15px;color:var(--muted)}
  .seg-toggle button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-weight:700}
  .cw-empty{color:var(--muted);font-size:13px;padding:18px 4px}
  /* Liste kompakt */
  .cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .cat-cell{display:flex;align-items:center;gap:9px;background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:8px 11px}
  .cat-cell .cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .cat-cell .cat-ic{font-size:17px;flex-shrink:0}
  .cat-cell .cat-m{flex:1;min-width:0}
  .cat-cell .cn{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cat-cell .cs{font-size:12px;line-height:1;margin-top:2px}
  .cat-cell .cat-cnt{background:var(--navy);color:#fff;font-size:12px;font-weight:700;min-width:24px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  /* Balken */
  .barchart{display:flex;flex-direction:column;gap:9px}
  .bar-row{display:flex;align-items:center;gap:10px}
  .bar-row .bl{width:120px;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
  .bar-row .bt{flex:1;background:var(--bg);border-radius:6px;height:14px;overflow:hidden}
  .bar-row .bf{height:100%;border-radius:6px;min-width:3px;transition:width .4s}
  .bar-row .bv{width:26px;text-align:right;font-weight:700;color:var(--ink);font-size:12.5px;font-variant-numeric:tabular-nums}
  /* Ring */
  .ringwrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
  .donut{width:150px;height:150px;flex-shrink:0}
  .donut .seg{transition:stroke-dasharray .4s}
  .donut-num{font-size:8px;font-weight:800;fill:var(--navy);text-anchor:middle}
  .donut-lbl{font-size:2.6px;fill:var(--muted);text-anchor:middle;text-transform:uppercase;letter-spacing:.4px}
  .ringleg{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
  .lgi{display:flex;align-items:center;gap:8px;font-size:12.5px}
  .lgi .lgd{width:10px;height:10px;border-radius:3px;flex-shrink:0}
  .lgi .lgn{flex:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lgi .lgv{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}

  .footer-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
  .footer-note .foot-text{flex:1;text-align:center;min-width:180px}
  .footer-note .foot-actions{display:flex;gap:8px;align-items:center}
  .footer-note .foot-actions:empty{display:none}
  .mockup-flag{position:fixed;bottom:14px;left:14px;background:var(--navy);color:#fff;font-size:11px;padding:6px 12px;border-radius:20px;opacity:.85;z-index:50}
  @media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}}

  /* Desktop: Suchleiste oben fix, Kennzahlen in der Sidebar, ESISO-Zeile fix unten */
  @media(min-width:821px){
    .main{height:100vh;overflow:hidden}
    /* Das Polster MUSS so hoch sein wie die fixe Fußleiste – die ist je nach
       Fensterbreite 55 bis 96px hoch (Knöpfe brechen um). Ein fester Wert von
       66px verdeckte den Seitenschluss um bis zu 31px (Karl, 23.08.2026:
       „abgeschnitten unten der Verleih teil"). --fuss-h setzt app.js laufend
       nach; der Rückfallwert deckt den schlimmsten Fall ab. */
    .content{overflow-y:auto;overscroll-behavior:contain;
             padding-bottom:calc(var(--fuss-h, 96px) + 16px)}
    .content .stats{display:none}         /* Kennzahlen stehen jetzt links in der Sidebar */
    .content .dash-search{display:none}   /* Suche liegt schon fix in der Kopfzeile */
    /* ESISO-Zeile + Aktions-Buttons als fixe Leiste am unteren Rand */
    .content .footer-note{position:fixed;left:220px;right:0;bottom:0;z-index:30;margin:0;
                    background:var(--surface);border-top:1px solid var(--line);
                    padding:8px 26px;box-shadow:0 -3px 14px rgba(31,56,100,.08)}
  }

/* ==================== Responsive / Handy ==================== */
.mobnav{display:none}
.only-mobile{display:none}
.hide-mobile{display:flex}
.lbl-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1.5px solid var(--line);border-radius:8px;text-decoration:none;font-size:15px}
.lbl-btn:hover{border-color:var(--orange)}
/* Handy-Kartenliste Inventar */
.inv-cards{flex-direction:column;gap:10px}
.inv-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.inv-main{display:flex;align-items:center;gap:11px;padding:11px 13px;text-decoration:none}
.inv-main .mini{width:44px;height:44px;border-radius:10px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.inv-main .im{flex:1;min-width:0}
.inv-main .im .t{font-weight:700;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-main .im .s{color:var(--muted);font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-main .im .s2{margin-top:4px;display:flex;align-items:center;gap:8px}
.inv-main .ip{font-weight:700;color:var(--ink);font-size:13px;flex-shrink:0}
.inv-lbl{display:block;text-align:center;padding:9px;border-top:1px solid var(--line);color:var(--orange-dark);font-weight:700;font-size:13px;text-decoration:none;background:#FBF6EF}

@media(max-width:820px){
  /* clip statt hidden: verhindert horizontales Scrollen, ohne die klebende Kopf-/Filterleiste zu brechen */
  html,body{overflow-x:clip;max-width:100%}
  /* 16px verhindert das automatische Reinzoomen von iOS bei Fokus */
  input,select,textarea,.fld .in,.fld select,.in,.lend-form .in,.lend-form select{font-size:16px!important}
  .sidebar{display:none}
  .hide-mobile{display:none!important}
  .only-desktop{display:none!important}
  .only-mobile{display:block!important}
  .topbar{padding:10px 12px;gap:8px;position:sticky;top:0}
  .topbar .search{max-width:none;flex:1}
  .content{padding:14px 12px 100px}
  .dash-search{display:none}           /* Suche liegt schon fix oben */
  .page-head h1{font-size:19px}
  .page-head{gap:8px}
  .stats{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
  .stat{padding:9px 11px}
  .stat::before{width:4px}
  .stat .k{font-size:9.5px;letter-spacing:.3px}
  .stat .v{font-size:17px;margin-top:1px}
  .stat .d{display:none}
  .grid2{grid-template-columns:1fr;gap:14px}
  .cat-grid{grid-template-columns:1fr 1fr}
  .card{padding:15px}
  .detail-grid,.form-grid,.set-wrap{grid-template-columns:1fr!important;gap:14px}
  .fields{grid-template-columns:1fr}
  .set-tabs{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .set-tabs button{width:auto;flex:0 0 auto}
  /* Einstellungen: nichts seitlich abschneiden */
  .set-wrap>div{min-width:0}
  .set-panel{min-width:0}
  .set-head{flex-direction:column;align-items:flex-start;gap:3px}
  .pcol{width:50px;overflow-wrap:break-word;font-size:11px}
  /* Rechte-Tabelle: Aktion-Spalte darf schrumpfen/umbrechen, damit alles passt */
  #s-users .lst .r{gap:6px}
  #s-users .lst .r .grow{min-width:0;padding-right:2px}
  /* Benutzerliste: feste Spalten -> waagrecht scrollen statt abschneiden */
  .wide-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wide-scroll .r{width:max-content;min-width:100%}
  .emoji-grid{grid-template-columns:repeat(7,1fr)}
  .ringwrap{justify-content:center}
  .bar-row .bl{width:96px;font-size:12px}
  .modal{padding:16px}
  /* fixe untere Leiste */
  .mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;height:72px;padding-bottom:6px;background:var(--surface);border-top:1px solid var(--line);
          align-items:center;justify-content:space-around;z-index:60;box-shadow:0 -2px 12px rgba(31,56,100,.08)}
  .mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600}
  .mobnav a .mi{line-height:1;position:relative;display:flex;align-items:center;justify-content:center}
  .mobnav a .mi svg{width:24px;height:24px}
  .mobnav a{transition:.15s}
  .mobnav a .mi{transition:.15s;padding:3px 8px;border-radius:12px}
  .mobnav a.on{color:var(--orange-dark);font-weight:800}
  .mobnav a.on .mi{background:#FBEBD6;padding:4px 16px;transform:scale(1.08)}
  .mobnav .mob-plus{flex:0 0 auto;width:58px;height:58px;margin-top:-26px;border-radius:50%;background:var(--orange);color:#fff;
          font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;
          box-shadow:0 6px 16px rgba(232,154,60,.5);border:4px solid #fff}
}

/* ==================== Benutzerverwaltung ==================== */
.uav{width:32px;height:32px;border-radius:9px;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.role{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
.role-admin{background:#FBF0DC;color:var(--orange-dark)}
.role-user{background:#E4F1F5;color:#2E82A6}
.role-guest{background:#EFEFF3;color:#7A879C}
.tfa{font-size:12px;color:var(--muted);font-weight:700}
.tfa.on{color:var(--green)}
.fbadge{background:var(--orange);color:#fff;font-size:12px;font-weight:800;border-radius:20px;padding:1px 9px;margin-left:4px}
.frq{font-size:11px;font-weight:800;border-radius:6px;padding:3px 8px;flex-shrink:0}
.frq-edit{background:#FBF0DC;color:var(--orange-dark)}
.frq-del{background:#FBE7E3;color:var(--red)}
.rowact2{display:flex;gap:6px;flex-shrink:0}
.rowact2 button{border:1.5px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:700}
.rowact2 .ok{border-color:var(--green);color:var(--green)}
.rowact2 .ok:hover{background:#E4F5EC}
.rowact2 .no{border-color:var(--line);color:var(--muted)}
.pcol{width:110px;text-align:center;flex-shrink:0}
.pm{font-size:12px;font-weight:700}
.pm.yes{color:var(--green)}
.pm.appr{color:var(--orange-dark);font-size:11px}
.pm.no{color:#C7CFDD}
.rolehint{font-size:12px;color:var(--muted);margin-top:2px;min-height:16px}
/* Login-Seite */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1F3864,#2C4A7C);padding:20px}
.login-card{background:var(--surface);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:380px;max-width:100%;padding:32px 30px}
.login-card .lg{font-size:30px;font-weight:800;letter-spacing:2px;color:var(--ink);text-align:center}
.login-card .lg b{color:var(--orange)}
.login-card .lr{height:3px;width:56px;background:var(--orange);margin:8px auto 4px;border-radius:2px}
.login-card .lsub{text-align:center;font-size:9px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:22px}
.login-card label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin:12px 0 6px}
.login-card input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:15px}
.login-card input:focus{outline:none;border-color:var(--orange)}
.login-card .lbtn{width:100%;margin-top:20px;background:var(--orange);color:#fff;border:none;padding:13px;border-radius:11px;font-weight:800;font-size:15px;text-decoration:none;display:block;text-align:center}
.login-card .lbtn:hover{background:var(--orange-dark)}
.login-card .lhint{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}
.code-box{display:flex;gap:8px;justify-content:center;margin-top:8px}
.code-box input{width:44px;text-align:center;font-size:20px;font-family:monospace;padding:12px 0}

/* Benutzer-Chip, Logout, Fehler, Protokoll */
.userbox{display:flex;align-items:center;gap:8px}
.topbar a.user{text-decoration:none;overflow:hidden;cursor:pointer}
.topbar a.user img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.topbar a.user:hover{box-shadow:0 0 0 2px var(--orange)}
.logout{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--muted);font-size:16px}
.logout:hover{border-color:var(--red);color:var(--red)}
/* Online-Chip + Präsenz-Punkte */
.online-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:20px;padding:6px 12px;font-size:12.5px;font-weight:700}
.online-chip:hover{border-color:var(--orange)}
.pres{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.pres.on{background:var(--green)}
.pres.off{background:var(--red)}
/* Nutzerliste im Modal */
.userlist{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow:auto}
.userlist .ur{display:flex;align-items:center;gap:11px;padding:8px 6px;border-radius:9px}
.userlist .ur:hover{background:var(--bg)}
.uav2{position:relative;width:38px;height:38px;border-radius:50%;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.uav2 img{width:100%;height:100%;object-fit:cover}
.uav2 .pres{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border:2px solid var(--surface)}
.userlist .un{font-weight:700;color:var(--ink);font-size:14px;line-height:1.2}
.userlist .un small{color:var(--muted);font-weight:400;font-size:11.5px}
/* globales Modal (auch außerhalb der Einstellungen) */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(31,56,100,.45);z-index:100;align-items:flex-start;justify-content:center;padding:60px 16px;overflow:auto}
.modal-bg.on{display:flex}
.modal{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);width:420px;max-width:100%;padding:18px 20px;
  /* Dialoge dürfen nie höher werden als das Fenster – sonst rutschen die
     Knöpfe unten aus dem Bild und man sucht das „Speichern“. */
  max-height:calc(100vh - 120px);overflow:auto}
.modal-actions{position:sticky;bottom:-18px;background:var(--surface);
  padding:12px 0 2px;margin-top:6px;display:flex;justify-content:flex-end;gap:8px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal-head b{color:var(--ink);font-size:16px}
.modal-x{border:none;background:var(--bg);width:30px;height:30px;border-radius:8px;font-size:14px;color:var(--muted)}
.lerr{background:#FBE7E3;color:var(--red);border-radius:9px;padding:9px 12px;font-size:13px;font-weight:600;text-align:center;margin-bottom:6px}
.login-card .lerr{margin-top:0}
.logtbl{width:100%;border-collapse:collapse;font-size:12.5px}
.logtbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.logtbl .lt-ts{color:var(--muted);white-space:nowrap;width:130px;font-variant-numeric:tabular-nums}
.logtbl .lt-u{font-weight:700;color:var(--ink);width:120px}
.logtbl .lt-a{font-weight:700}
.logtbl .lt-d{color:var(--muted)}
.cl-ver{display:flex;align-items:center;gap:10px;margin:14px 0 8px}
.cl-ver .vtag{background:var(--navy);color:#fff;font-weight:800;font-size:13px;border-radius:8px;padding:3px 12px}
.cl-ver .vdate{color:var(--muted);font-size:12px}
.cl-list{margin:0 0 4px 20px}
.cl-list li{margin-bottom:5px;font-size:13px}
.link2fa{font-size:12px;color:var(--orange-dark);text-decoration:none;font-weight:700}

/* Retro-Hero (Dashboard) */
.hero{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:18px;line-height:0}
.hero svg{display:block;width:100%;height:auto}
.stats.compact .stat{padding:14px}
.stats.compact .stat .v{font-size:22px}
.stats.compact .stat .k{font-size:11px}
@media(max-width:820px){.hero{margin-bottom:14px}}

/* Handy: Kacheln wirklich kompakt (überstimmt .stats.compact) */
@media(max-width:820px){
  .stats.compact{gap:8px;margin-bottom:14px}
  .stats.compact .stat{padding:8px 11px}
  .stats.compact .stat::before{width:4px}
  .stats.compact .stat .k{font-size:9px;letter-spacing:.2px}
  .stats.compact .stat .v{font-size:16px;margin-top:1px;line-height:1.1}
  .stats.compact .stat .d{display:none}
  /* Handy: Kategorien und Schätzwert tauschen (Schätzwert=3, Kategorien=4) */
  .stats.compact .stat:nth-child(3){order:4}
  .stats.compact .stat:nth-child(4){order:3}
}

/* Stat-Kacheln mit Icon-Badge */
.stat{display:flex;align-items:center;gap:12px}
.stat .sc{flex:1;min-width:0}
.stat .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.stats.compact .stat .ic{width:38px;height:38px;font-size:19px;border-radius:10px}
@media(max-width:820px){ .stats.compact .stat .ic{width:34px;height:34px;font-size:17px;border-radius:9px} }

/* ================= Hell / Dunkel ================= */
html[data-theme="dark"]{
  --bg:#0f1622;
  --surface:#182234;
  --tile:#1d2b45;
  --ink:#e8edf6;
  --text:#cdd6e6;
  --muted:#93a0b8;
  --line:#2a3547;
  --shadow:0 2px 10px rgba(0,0,0,.45);
  --shadow-lg:0 10px 34px rgba(0,0,0,.6);
  --card:#182234;
  --card-2:#1d2b45;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
/* Eingaben etwas dunkler als die Karten */
html[data-theme="dark"] .search input,
html[data-theme="dark"] .toolbar select,
html[data-theme="dark"] .toolbar input,
html[data-theme="dark"] .fld .in,
html[data-theme="dark"] .fld select,
html[data-theme="dark"] .in,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .rt-area{background:#0f1622;color:var(--text)}
html[data-theme="dark"] .rt-toolbar{background:#0f1622}
html[data-theme="dark"] tbody tr:hover{background:#1f2b40}
html[data-theme="dark"] .cat-cell:hover,
html[data-theme="dark"] .lst .r:hover,
html[data-theme="dark"] .nav a:hover{background:rgba(255,255,255,.05)}
/* aktive Elemente sichtbar halten */
html[data-theme="dark"] .set-tabs button.on{background:var(--orange);color:#fff}
html[data-theme="dark"] .seg-toggle button.on{background:#0f1622;color:var(--ink)}
/* leichte Orange-Tönungen im Dunkeln abdunkeln */
html[data-theme="dark"] .drop,
html[data-theme="dark"] .att-add,
html[data-theme="dark"] .add-row{background:rgba(232,154,60,.10)}
/* Protokolle offen/abgeschlossen: getönte Kacheln im Dunkeln abdunkeln */
html[data-theme="dark"] .logentry.log-open{background:rgba(232,154,60,.09)}
html[data-theme="dark"] .logentry.log-done{background:rgba(63,169,114,.10)}
/* Blog-Karten & Chips theme-fähig */
html[data-theme="dark"] .bpost{background:var(--surface)}
html[data-theme="dark"] .bpost .bexcerpt{color:var(--text)}
html[data-theme="dark"] .blog-filters .chip{background:var(--surface);color:var(--muted)}
html[data-theme="dark"] .blog-filters .chip.on{background:var(--orange);color:#fff}
html[data-theme="dark"] .bpost .bim{background:linear-gradient(135deg,#1d2b45,#243247)}
/* Reparatur-Positionen: Arbeit-Zeile & readonly-Felder */
html[data-theme="dark"] .cost-total,html[data-theme="dark"] .in.ro{background:#0f1622;color:var(--ink)}
/* Schalter-Knöpfe & +-Rand bleiben weiß */
.switch .track::after,.prow .tsw::after{background:#fff}
/* Theme-Umschalter */
#themeToggle{font-size:16px}

/* Überfällig-Banner am Dashboard */
.overdue-banner{display:flex;align-items:center;gap:14px;background:rgba(217,106,91,.14);border:1px solid var(--red);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.overdue-banner .ob-ic{font-size:22px}
.overdue-banner .ob-txt{flex:1;min-width:0;font-size:13px;color:var(--ink)}
.overdue-banner .ob-txt b{display:block;color:var(--red)}
.overdue-banner .ob-txt span{color:var(--muted)}
/* Verleih-Formular in der Detailansicht */
.lend-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:4px}
.lend-form .fld{flex:0 1 200px;min-width:150px}
.lend-form label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;font-weight:700}
.lend-form .in,.lend-form select{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;font-size:13px;background:var(--surface);color:var(--text)}

/* Protokolle (Aufbau/Test & Reparatur) */
.courier{font-family:"Courier New","Courier",monospace}
.rt-area.courier{font-family:"Courier New","Courier",monospace}
.rt-area[data-ph]:empty:before{content:attr(data-ph);color:var(--muted)}
.rt-toolbar .emo{min-width:26px;font-size:15px}
.rt-toolbar .emos{display:inline-flex;flex-wrap:wrap;gap:1px}
.prow{display:flex;gap:8px;margin-bottom:8px}
.prow.ph{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin-bottom:4px}
.prow.ph span{flex:1}.prow.ph span:not(:first-child){flex:0 0 auto}
.logentry{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px;background:var(--tile)}
.log-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.log-title{color:var(--ink);font-size:15px}
.log-badge{font-size:11px;font-weight:800;border-radius:20px;padding:3px 10px}
.lb-test{background:#E4F1F5;color:#2E82A6}
.lb-rep{background:#FBF0DC;color:var(--orange-dark)}
.lb-repair{background:#FBF0DC;color:var(--orange-dark)}
.lb-care{background:#E4F5EC;color:#1b7a52}
html[data-theme="dark"] .lb-care{background:#173323;color:#7fd6a8}
.log-body{font-size:13.5px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word}
.log-body ul,.log-body ol{margin-left:20px}
.log-imgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.log-imgs img{width:88px;height:88px;object-fit:cover;border-radius:9px;border:1px solid var(--line);cursor:pointer}
.parts-tbl{margin-top:10px;border-top:1px solid var(--line)}
.parts-tbl .pr{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.parts-tbl .pr .grow{flex:1;color:var(--ink);font-weight:600}
.parts-tbl .pr .pp{font-weight:700;color:var(--ink)}
.log-cost{margin-top:10px;font-size:13px;color:var(--text)}
.log-cost b{color:var(--ink)}

/* Profil */
.prof-av{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.prof-avbox{position:relative;width:96px;height:96px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;flex-shrink:0}
.prof-avbox img{width:100%;height:100%;object-fit:cover}
.prof-avbox img.hide{display:none}
.prof-init{font-size:32px;font-weight:800}
.prof-cam{position:absolute;right:2px;bottom:2px;background:var(--orange);color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid var(--surface)}
.prof-hint{font-size:12.5px;color:var(--muted);font-weight:600}
.prof-hint small{font-weight:400}
.cnt{background:var(--navy);color:#fff;font-size:11px;font-weight:800;border-radius:20px;padding:1px 9px;margin-left:6px}

/* Handy-Kartenliste nur am Handy als Flex zeigen */
@media(max-width:820px){ .inv-cards{display:flex} }

/* Druck: nur die Etiketten, kein App-Rahmen */
@media print{
  .sidebar,.topbar,.mobnav,.footer-note,.page-head,.label-intro,.sheet .hint{display:none!important}
  .app{display:block}
  .main{height:auto;overflow:visible}
  .content{overflow:visible;padding:0}
  .sheet{box-shadow:none;border:none;padding:0;background:#fff}
  body{background:#fff}
}

/* --- Inventar / Kategorien klickbar --- */
a.cat-cell{text-decoration:none;cursor:pointer}
a.cat-cell:hover{border-color:var(--navy)}

/* --- Scanner --- */
.qr-reader{width:100%;max-width:420px;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#000;min-height:200px}
.qr-reader video{width:100%!important;height:auto!important;display:block}
.scan-msg{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
.scan-row{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.scan-hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.scan-hint code{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:11.5px}

/* --- Regal-Ansicht: nach Fach/Lade gruppiert --- */
.fach-block{margin-bottom:16px}
.fach-head{display:flex;align-items:center;gap:9px;margin:0 2px 8px}
.fach-tag{background:var(--navy);color:#fff;font-weight:700;font-size:13px;border-radius:8px;padding:4px 12px;white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.fach-cnt{color:var(--muted);font-size:12.5px}
.fach-empty{color:var(--muted);font-size:12.5px;padding:4px 2px 2px;font-style:italic}
.fach-block .inv-cards{display:flex;flex-direction:column;gap:8px}

/* --- Mobile: Filterleiste fix unter der Topbar --- */
@media(max-width:820px){
  .filterbar{position:sticky;top:var(--topbar-h,60px);z-index:15;background:var(--bg);
             padding:10px 0 8px;margin-bottom:10px;
             box-shadow:0 6px 8px -8px rgba(0,0,0,.35)}
  .filterbar .search{min-width:0}
}

/* --- Protokoll-Formular: einheitliche volle Breite --- */
.stack{display:flex;flex-direction:column;gap:16px;max-width:1000px}
.stack .fcard{width:100%}
.stack .rt-area{min-height:220px}

/* --- Sterne-Bewertung (Eingabe) --- */
.star-input{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.star-input .si-star{font-size:30px;line-height:1;background:none;border:none;cursor:pointer;color:var(--line);padding:0 2px;transition:color .08s}
.star-input .si-star.on{color:#f5b301}
.star-input .si-val{margin-left:10px;font-size:13px;color:var(--muted);min-width:96px}
.star-input .si-clear{margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:12px;padding:5px 10px;cursor:pointer}
.star-input .si-clear:hover{border-color:var(--navy);color:var(--ink)}

/* --- Protokoll: wer / wann --- */
.log-who{font-size:12px;color:var(--muted);margin:2px 0 8px}
.log-who b{color:var(--ink);font-weight:700}
.log-stars{transform:translateY(1px);font-size:12px}

/* --- Inventar: sortierbare Spalten --- */
th.sortable{padding:0}
th.sortable>a{display:flex;align-items:center;gap:6px;justify-content:inherit;text-decoration:none;color:inherit;padding:13px 14px;cursor:pointer;white-space:nowrap}
th.sortable>a:hover{background:rgba(255,255,255,.08)}
th.sortable .sarr{font-size:11px;opacity:.5}
th.sortable.sorted .sarr{opacity:1;color:var(--orange)}
th.sortable.sorted>a{color:#fff}
.sort-active{display:flex;align-items:center;gap:8px;background:var(--tile);border:1px solid var(--line);border-radius:9px;padding:7px 12px;margin-bottom:12px;font-size:12.5px;color:var(--muted)}
.sort-active b{color:var(--ink);font-weight:700}
.sort-clear{margin-left:auto;background:var(--navy);color:#fff;border-radius:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:12px;flex-shrink:0}
.sort-clear:hover{background:var(--red,#e34948)}
.sort-sel{max-width:170px}
.only-mobile.sort-sel{display:none}
@media(max-width:820px){ .only-mobile.sort-sel{display:block} }

/* --- Kalkulations-Positionen --- */
.time-total{font-weight:800;font-size:16px;color:var(--ink);display:flex;align-items:center}
.cost-total{font-weight:800;font-size:16px;color:var(--ink);display:flex;align-items:center;justify-content:flex-end}
.kt-cols{display:flex;gap:7px;padding:0 42px 7px 40px;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:700}
.kt-cols .c-bez{flex:1;min-width:0}
.kt-cols .c-dat{width:150px}.kt-cols .c-men{width:82px;text-align:right}.kt-cols .c-ep{width:88px;text-align:right}
.kt-cols .c-einh{width:86px}.kt-cols .c-pp{width:100px;text-align:right}.kt-cols .c-del{width:34px}
.pos{border:1px solid var(--line);border-radius:11px;padding:9px 10px;margin-bottom:9px;background:var(--surface)}
.pos.time{background:rgba(232,154,60,.06);border-color:rgba(232,154,60,.35)}
.kt-row{display:flex;gap:7px;align-items:center}
.kt-row .nr{width:30px;height:38px;border-radius:8px;background:var(--navy);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.kt-row .bez{flex:1;min-width:0}
.kt-row .dat{width:150px;flex-shrink:0}
.kt-row .men-cell{width:82px;flex-shrink:0}
.kt-row .men-cell .men,.kt-row .men-cell .men-std{width:100%}
.kt-row .men-std{padding:9px 6px}
.kt-row .ep{width:88px;flex-shrink:0}
.kt-row .pos-unit{width:86px;flex-shrink:0}
.kt-row .r{text-align:right}
.kt-row .pp{width:100px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;padding:0 11px;border-radius:9px;font-weight:800}
.kt-row .pp.money{background:var(--tile);color:var(--ink)}
.kt-row .pp.mins{background:rgba(232,154,60,.14);color:#a76a00;border:1px solid rgba(232,154,60,.4)}
.kt-row .pos-del{width:34px;height:38px;flex-shrink:0;background:none;border:1.5px solid var(--line);border-radius:8px;color:var(--muted);cursor:pointer;font-size:13px}
.kt-row .pos-del:hover{border-color:var(--red);color:var(--red)}
.kt-info{display:flex;gap:7px;align-items:center;margin-top:7px;padding-left:37px}
.kt-info .pos-wt{width:100px;flex-shrink:0}
.kt-info .pos-worker{width:220px;flex-shrink:0}
.kt-info .info{flex:1;min-width:0}
.pos .in:disabled{opacity:.45}
@media(max-width:820px){
  .kt-cols{display:none}
  .kt-row{flex-wrap:wrap}
  /* Nr. bleibt zuerst, Bezeichnung daneben in Zeile 1 */
  .kt-row .nr{order:0}
  .kt-row .bez{order:1;flex:1 1 60%;min-width:120px}
  .kt-row .dat{order:2;width:auto;flex:1 1 130px}
  .kt-row .men-cell{order:3;flex:1 1 78px}
  .kt-row .ep{order:4;flex:1 1 78px}
  .kt-row .pos-unit{order:5;flex:1 1 78px}
  .kt-row .pp{order:6;flex:1 1 90px}
  .kt-row .pos-del{order:7}
  .kt-info{padding-left:0;flex-wrap:wrap}
  .kt-info .pos-worker{width:auto;flex:1}
}

/* --- Positions-Badges in der Detailansicht --- */
.pos-badge{font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;flex-shrink:0;white-space:nowrap}
.pos-badge.pb-mat{background:var(--tile);color:var(--navy);border:1px solid var(--line)}
.pos-badge.pb-arb{background:rgba(237,161,0,.16);color:#a76a00;border:1px solid rgba(237,161,0,.4)}
.parts-tbl .pr{display:flex;align-items:center;gap:8px}
.parts-tbl .pr .grow{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* --- Positions-Summen unter den Positionen --- */
.pos-sums{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.pos-sums .ps{display:flex;gap:14px;font-size:13px;color:var(--muted);min-width:230px;justify-content:space-between}
.pos-sums .ps b{color:var(--ink)}
.pos-sums .ps.tot{border-top:2px solid var(--navy);margin-top:4px;padding-top:6px;font-size:15px}
.pos-sums .ps.tot b{font-weight:800}

/* --- Protokolle: offen / abgeschlossen --- */
.log-group{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:16px 0 10px;display:flex;align-items:center;gap:8px}
.log-group .n{background:var(--navy);color:#fff;border-radius:6px;padding:1px 8px;font-size:11px}
.log-group.open .n{background:var(--orange)}
.logentry.log-open{border-left:4px solid var(--orange);background:#fffdf8}
.logentry.log-done{border-left:4px solid var(--green);background:#fbfefc}
.stt{font-size:11px;font-weight:700;border-radius:20px;padding:2px 10px;white-space:nowrap}
.stt.o{background:#fdeccd;color:#a76a00}
.stt.d{background:#d8f3e5;color:#1c8a56}
.log-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:8px}
.log-meta b{color:var(--ink)}
.log-meta .lc-cost b{color:var(--ink)}
.log-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.log-acts .btn-orange,.log-acts .btn-green,.log-acts .btn-grey,.log-acts .btn-red{padding:6px 12px;font-size:12px}

/* --- Dashboard-Blog --- */
.blog-filters{display:flex;gap:6px}
.blog-filters .chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 13px;font-size:12.5px;color:var(--muted);cursor:pointer}
.blog-filters .chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.blog-feed{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.bpost{display:flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.bpost .bgal{flex:0 0 190px;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.bpost .bgal.one{grid-template-columns:1fr}
.bpost .bim{background:linear-gradient(135deg,#cdd8ec,#eaf0fb);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#9fb0cd;font-size:22px;min-height:80px;text-decoration:none}
.bpost .bbd{flex:1;padding:14px 16px;min-width:0}
.bpost .btop{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.badge.b-test{background:var(--tile);color:var(--navy);border:1px solid var(--line);font-size:11px;font-weight:700;border-radius:6px;padding:3px 9px}
.badge.b-rep{background:rgba(232,154,60,.16);color:#a76a00;border:1px solid rgba(232,154,60,.4);font-size:11px;font-weight:700;border-radius:6px;padding:3px 9px}
.badge.b-care{background:rgba(63,169,114,.16);color:#1b7a52;border:1px solid rgba(63,169,114,.4);font-size:11px;font-weight:700;border-radius:6px;padding:3px 9px}
html[data-theme="dark"] .badge.b-care{color:#7fd6a8}
.bpost .bstars{color:var(--orange);font-size:13px}
.bpost .bdate{color:var(--muted);font-size:12px;margin-left:auto}
.bpost .btitle{margin:0 0 3px;font-size:15.5px;color:var(--ink)}
.bpost .bobj{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.bpost .bobj a{color:var(--navy-2);text-decoration:none;font-weight:600}
.bpost .bexcerpt{font-family:"Courier New",monospace;font-size:12.5px;color:#3a4763;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px}
.bpost .bfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.bpost .bwho b{color:var(--ink)}
.bpost .bcost{background:var(--tile);color:var(--navy);font-weight:700;border-radius:7px;padding:3px 9px;font-size:12px}
.bpost .bopen{margin-left:auto;color:var(--orange);font-weight:700;font-size:12.5px}
@media(max-width:620px){.bpost{flex-direction:column}.bpost .bgal{flex:none;grid-template-columns:1fr 1fr 1fr;height:120px}.bpost .bgal.one{grid-template-columns:1fr}}

/* --- Bericht (Druck/PDF) --- */
.bericht-tools{max-width:840px;margin:0 auto 14px;display:flex;gap:10px;justify-content:flex-end}
.sheet.bericht{max-width:840px;margin:0 auto;padding:0;overflow:hidden}
.bericht .rep-head{background:var(--navy);color:#fff;padding:26px 34px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.bericht .brand .logo{font-size:26px;font-weight:800;letter-spacing:1px}
.bericht .brand .logo b{color:var(--orange)}
.bericht .brand .rule{height:3px;width:64px;background:var(--orange);border-radius:2px;margin:7px 0 6px}
.bericht .brand .bsub{font-size:11px;letter-spacing:.5px;color:#b9c6df;text-transform:uppercase}
.bericht .rep-title{text-align:right}
.bericht .rep-title .kicker{font-size:12px;color:#b9c6df;letter-spacing:2px;text-transform:uppercase}
.bericht .rep-title h1{margin:4px 0 0;font-size:24px;color:#fff}
.bericht .rep-title .rcode{font-family:"Courier New",monospace;color:var(--orange);font-weight:700;margin-top:4px}
.bericht .rep-body{padding:24px 34px 28px}
.bericht .objb{display:flex;gap:14px;align-items:center;background:var(--tile);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:18px}
.bericht .objb .ic{width:50px;height:50px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0}
.bericht .objb .nm{font-size:17px;font-weight:800;color:var(--ink)}
.bericht .objb .meta{color:var(--muted);font-size:12.5px;margin-top:2px}
.bericht .objb .starsb{margin-left:auto;text-align:right}
.bericht .objb .starsb .s{color:var(--orange);font-size:16px}
.bericht .objb .starsb .lbl{font-size:11px;color:var(--muted)}
.bericht .grid2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:6px}
.bericht .info-b{border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.bericht .info-b .k{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.bericht .info-b .v{font-weight:700;color:var(--ink);margin-top:3px;font-size:13px}
.bericht .rsec{font-size:13px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.5px;margin:20px 0 9px;display:flex;align-items:center;gap:8px}
.bericht .rsec::before{content:"";width:4px;height:15px;background:var(--orange);border-radius:2px}
.bericht .rep-tbl{width:100%;border-collapse:collapse;font-size:13px}
.bericht .rep-tbl thead th{background:var(--navy);color:#fff;text-align:left;padding:8px 10px;font-size:11.5px}
.bericht .rep-tbl th.r,.bericht .rep-tbl td.r{text-align:right}
.bericht .rep-tbl tbody td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.bericht .rep-tbl .who{background:none;padding:0;border-radius:0;font-weight:400;color:var(--muted);font-size:11.5px;display:table-cell}
.bericht .rbadge{font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 7px;white-space:nowrap}
.bericht .rbadge.b-mat{background:var(--tile);color:var(--navy);border:1px solid var(--line)}
.bericht .rbadge.b-arb{background:rgba(232,154,60,.16);color:#a76a00;border:1px solid rgba(232,154,60,.4)}
.bericht .rep-tbl tfoot td{padding:7px 10px;font-size:13px}
.bericht .rep-tbl tfoot .sub td{color:var(--muted)}
.bericht .rep-tbl tfoot .tot td{font-weight:800;color:var(--ink);border-top:2px solid var(--navy);font-size:15px}
.bericht .blogbox{border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:13px;line-height:1.6;background:#fbfcfe}
.bericht .rimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bericht .rim{aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#eef2f8}
.bericht .rim img{width:100%;height:100%;object-fit:cover;display:block}
.bericht .rep-foot{border-top:1px solid var(--line);margin-top:22px;padding-top:11px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
@media print{
  /* Immer helle Bericht-Farben drucken – auch wenn die App im Dunkelmodus ist */
  html[data-theme="dark"], :root{
    --bg:#ffffff;--surface:#ffffff;--tile:#E8F0FB;--ink:#1F3864;--text:#243247;
    --muted:#5b6a85;--line:#D8DEEA;--navy:#1F3864;--orange:#E89A3C;
  }
  html,body{background:#fff!important;color:#243247!important}
  /* Hintergrundfarben & Bilder mitdrucken */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .sidebar,.topbar,.mobnav,.footer-note,.no-print,.bericht-tools{display:none!important}
  .main{height:auto;overflow:visible}.content{overflow:visible;padding:0}
  .sheet.bericht{box-shadow:none;border:none;max-width:100%}
  .rep-tbl-wrap{overflow:visible!important;border:none!important}
  .bericht .rep-tbl{min-width:0!important;font-size:12px}
  .bericht .rep-head{color:#fff!important}
  .bericht .rep-title h1{color:#fff!important}
  .bericht .objb .nm,.bericht .info-b .v,.bericht .rsec{color:#1F3864!important}
  /* Tabellenzeilen im Druck immer weiß mit dunkler Schrift, Kopf navy */
  .bericht .rep-tbl tbody tr,.bericht .rep-tbl tbody td,.bericht .rep-tbl tfoot tr,.bericht .rep-tbl tfoot td{background:#fff!important;color:#243247!important}
  .bericht .rep-tbl thead th{background:#1F3864!important;color:#fff!important}
  .bericht .rep-tbl tfoot .tot td{color:#1F3864!important}
  .bericht .rep-tbl .who{color:#5b6a85!important}
  .bericht .objb{background:#E8F0FB!important}
}

/* --- Positions-Zeilen in Detailansicht (Kalkulation) --- */
.parts-tbl .pr .pp{font-weight:700;color:var(--ink);text-align:right;min-width:74px;flex-shrink:0}
.parts-tbl .pr .pp-mins{font-weight:700;color:#a76a00;text-align:right;min-width:64px;flex-shrink:0}

/* --- Blog Leer-Zustand --- */
.blog-empty{display:flex;align-items:center;gap:14px;background:var(--tile);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.blog-empty .be-ic{font-size:30px;flex-shrink:0}
.blog-empty .be-txt{flex:1;color:var(--muted);font-size:13px;line-height:1.5}
.blog-empty .be-txt b{color:var(--ink)}

/* --- Bericht: iPhone / Mobile --- */
.rep-tbl-wrap{width:100%}
@media(max-width:820px){
  .bericht-tools{flex-wrap:wrap}
  .sheet.bericht{max-width:100%}
  .bericht .rep-head{flex-direction:column;gap:12px;padding:18px}
  .bericht .rep-title{text-align:left}
  .bericht .rep-title h1{font-size:21px}
  .bericht .rep-body{padding:16px 16px 20px}
  .bericht .grid2{grid-template-columns:1fr}
  .bericht .objb{flex-wrap:wrap}
  .bericht .objb .starsb{margin-left:0;text-align:left;flex-basis:100%}
  /* Am iPhone KEIN seitliches Scrollen: Positionen als gestapelte Blöcke */
  .rep-tbl-wrap{overflow:visible;border:none}
  .bericht .rep-tbl{min-width:0;font-size:13px}
  .bericht .rep-tbl thead{display:none}
  .bericht .rep-tbl tbody tr{display:block;border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-bottom:9px;background:#fff}
  .bericht .rep-tbl tbody td{display:flex;justify-content:space-between;gap:12px;border:none;padding:3px 0;text-align:right}
  .bericht .rep-tbl tbody td::before{content:attr(data-label);color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;text-align:left}
  .bericht .rep-tbl tbody td.td-bez{display:block;text-align:left;font-weight:800;color:var(--ink);font-size:15px;margin-bottom:4px;border-bottom:1px solid var(--line);padding-bottom:6px}
  .bericht .rep-tbl tbody td.td-bez::before{display:block;font-size:10px;margin-bottom:2px}
  .bericht .rep-tbl tbody td.who .who{display:inline}
  .bericht .rep-tbl tfoot{display:block;margin-top:4px}
  .bericht .rep-tbl tfoot tr{display:flex;justify-content:space-between;border:none}
  .bericht .rep-tbl tfoot td{border:none;padding:4px 0}
  .bericht .rep-tbl tfoot .tot td{border-top:2px solid var(--navy);padding-top:7px}
}

/* --- Protokoll-Formular: Felder am Handy untereinander stapeln --- */
@media(max-width:820px){
  .stack .frow>.fld{flex:1 1 100%!important;min-width:0}
}

/* Berichte-Icon in der Topbar nur am Handy zeigen (Desktop hat es in der Sidebar) */
.show-mobile{display:none!important}
@media(max-width:820px){ .icon-btn.show-mobile{display:flex!important} }

/* --- Bibliothek: Handy-Karten --- */
.lib-cards{display:flex;flex-direction:column;gap:10px}
.lib-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 13px}
.lib-card .lc-top{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.lib-card .lc-top .mini{width:38px;height:38px;border-radius:10px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.lib-card .lc-name{flex:1;min-width:0}
.lib-card .lc-name b{color:var(--ink);font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-card .lc-code{font-family:monospace;font-size:11px;color:var(--muted)}
.lib-card .lc-row{font-size:12.5px;color:var(--muted);margin-top:2px}
.lib-card .lc-row b{color:var(--ink)}
.lib-card .lc-row.due{color:var(--red)}

/* --- Einstellungs-Listen am Handy: Spalten nicht verrutschen lassen --- */
@media(max-width:820px){
  .lst .r{gap:8px;padding:11px 12px}
  .lst .r .grow{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lst .r .nextno{display:none}
  .lst .r .codecell{width:auto;min-width:34px}
  .lst .r .rowact{gap:4px;flex-shrink:0}
  .lst .r .rowact button{width:32px;height:32px}
}

/* ==================== Inventar-Ansichten: Tabelle / Liste / Kacheln ==================== */
.view-seg{display:flex;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;overflow:hidden;flex-shrink:0}
.view-seg button{border:none;background:none;padding:8px 12px;font-size:15px;color:var(--muted);cursor:pointer;line-height:1}
.view-seg button.on{background:var(--navy);color:#fff}
html[data-theme="dark"] .view-seg button.on{background:var(--orange);color:#fff}

.inv-views .view{display:none}
.inv-views[data-view="table"] .view-table{display:block}
.inv-views[data-view="list"] .view-list{display:flex}
.inv-views[data-view="tiles"] .view-tiles{display:grid}

/* Bild-Platzhalter (Kategorie-Symbol auf Verlauf) */
/* Platzhalter, wenn ein Artikel (noch) kein Foto hat: ruhige Fläche mit
   dem Kategoriesymbol in der Mitte – nicht wie ein kaputtes Bild aussehen */
.ph{background:linear-gradient(135deg,var(--tile),var(--bg));display:flex;
  align-items:center;justify-content:center;color:var(--muted);font-size:26px}
html[data-theme="dark"] .ph{background:linear-gradient(135deg,#22304a,#1a2437)}

/* Chips */
.chip{font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap}
.chip.c-cat{background:var(--tile);color:var(--ink);border:1px solid var(--line)}
.chip.c-cond{background:rgba(63,169,114,.14);color:#1c8a56;border:1px solid rgba(63,169,114,.3)}

/* LISTE */
.view-list{flex-direction:column;gap:10px}
.lrow{display:flex;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:inherit}
.lrow:hover{border-color:var(--navy)}
.lrow .img{width:124px;flex-shrink:0;background:var(--bg)}
.lrow .img img{width:100%;height:100%;min-height:106px;object-fit:cover;display:block}
.lrow .img .ph{width:100%;height:100%;min-height:106px;display:flex;
  align-items:center;justify-content:center}
.lrow .bd{flex:1;min-width:0;padding:12px 14px}
.lrow .t{font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .badges{display:flex;gap:7px;flex-wrap:wrap;margin:5px 0 7px}
.lrow .meta{font-size:12.5px;color:var(--muted);display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center}
.lrow .meta b{color:var(--ink)}
.lrow .meta .stars{font-size:12px}
.lrow .right{padding:12px 14px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;flex-shrink:0;border-left:1px solid var(--line)}
.lrow .right .val{font-size:16px;font-weight:800;color:var(--ink)}
.lrow .right .lbl{font-size:11px;color:var(--muted)}

/* KACHELN */
.view-tiles{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer}
.tile:hover{border-color:var(--navy);transform:translateY(-2px);transition:transform .12s}
.tile .img{aspect-ratio:4/3;position:relative;background:var(--bg)}
.tile .img img{width:100%;height:100%;object-fit:cover;display:block}
.tile .img .ph{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-size:40px}
.tile .img .locbadge{position:absolute;left:8px;top:8px}
.tile .img .catbadge{position:absolute;right:8px;top:8px;background:rgba(255,255,255,.92);color:var(--navy);font-size:15px;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(31,56,100,.2)}
.tile .bd{padding:11px 12px;flex:1;display:flex;flex-direction:column;gap:4px}
.tile .t{font-size:14px;font-weight:800;color:var(--ink);line-height:1.25}
.tile .cat{font-size:12px;color:var(--muted)}
.tile .stars{font-size:12px}
.tile .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:6px}
.tile .foot .price{font-weight:800;color:var(--ink);font-size:14px}
.tile .tlbl{text-decoration:none;font-size:15px}

@media(max-width:820px){
  /* Am iPhone KEIN seitliches Scrollen: die echte Tabelle bleibt dem PC
     vorbehalten. „Tabelle" zeigt hier dieselben Zeilen, aber schmal und
     zweizeilig – Bild vorne, daneben Titel und die wichtigsten Daten. */
  .inv-views[data-view="table"] .view-table{display:none}
  .inv-views[data-view="table"] .view-list{display:flex}
  .view-tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .tile .t{font-size:13px}
  .tile .img .catbadge{width:26px;height:26px;font-size:14px}
  .lrow .img{width:96px}
  .lrow .t{font-size:15px}
  .lrow .right{padding:10px 12px}
  .lrow .right .val{font-size:15px}
}

/* Kachel: Nummer + Lagerort */
.tile .tcode{font-family:monospace;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tcode .loc{font-size:10px}

/* Desktop-Tabelle kompakter, damit ALLE Spalten passen */
.view-table table{font-size:12px;table-layout:auto}
.view-table thead th.sortable>a{padding:7px 7px;gap:3px}
.view-table thead th{padding:7px 7px}
.view-table tbody td{padding:5px 7px}
.view-table .cellname{gap:7px}
.view-table .cellname b{font-size:12.5px}
.view-table .mini{width:23px;height:23px;font-size:13px}
.view-table .id{font-size:11px;white-space:nowrap;color:var(--orange-dark)}
.view-table .cat-tag{white-space:nowrap;font-size:11.5px}
.view-table .price,.view-table td:nth-last-child(2){white-space:nowrap}
.view-table .badge{padding:2px 7px;font-size:11px}
.view-table .lbl-btn{font-size:14px}

/* Liste: mehr Daten am PC */
.chip.c-sub{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.lrow .meta.more{margin-top:4px;font-size:12px;color:var(--muted)}
.lrow .meta.more b{color:var(--ink);font-weight:700}
.lrow .right{gap:8px}
.lrow .right .pblock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.lrow .right .val2{font-size:14px;font-weight:800;color:var(--navy-2)}

/* Zurück-Link oben auf der Artikelseite */
.back-top{text-decoration:none;padding:7px 13px;flex-shrink:0;font-size:13px}

/* --- Inventar-Toolbar am iPhone: Suche oben, dann Kat+Unterkat, dann Sortieren/Ansicht/Filtern --- */
@media(max-width:820px){
  .filterbar{gap:8px}
  .filterbar>.search{order:0;flex:1 1 100%!important;min-width:0!important}
  .filterbar>select[name="cat"]{order:1;flex:1 1 46%;min-width:0}
  .filterbar>select[name="sub"]{order:2;flex:1 1 46%;min-width:0}
  .filterbar>.sort-sel{order:3;flex:1 1 120px;min-width:0;max-width:none}
  .filterbar>.view-seg{order:4;flex:0 0 auto}
  .filterbar>.btn-orange{order:5;flex:0 0 auto}
  .filterbar>a.btn-grey{order:7;flex:0 0 auto}
}

/* ===== Lagerort-Baum (Einstellungen) ===== */
.lg-tree{margin-top:6px}
.lg-node{margin:0}
.lg-children{margin-left:16px;border-left:2px solid var(--line);padding-left:12px}
.lg-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:6px 0}
.lg-row:hover{border-color:#C9D6EC}
.lg-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:15px;color:#fff;flex:0 0 auto}
.lg-ico.t-ort{background:#2C7BE5}.lg-ico.t-raum{background:#8B5CF6}
.lg-ico.t-regal,.lg-ico.t-schrank{background:#E89A3C}
.lg-ico.t-fach,.lg-ico.t-lade{background:#3FA972}
.lg-ico.t-box{background:#8D6E63}.lg-ico.t-bereich{background:#EC6B8A}
.lg-row .kz{font-family:"SF Mono",Consolas,monospace;font-weight:800;font-size:12.5px;background:var(--tile);color:var(--navy);border-radius:7px;padding:3px 9px;flex:0 0 auto;min-width:42px;text-align:center}
.lg-row .nm{font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-row .lg-tag{font-size:11px;color:var(--muted);background:#F1F4FA;border-radius:20px;padding:2px 9px;flex:0 0 auto}
.lg-row .lg-acts{margin-left:auto;display:flex;gap:6px;align-items:center;flex:0 0 auto}
.lg-acts button{border:1px solid var(--line);background:#fff;border-radius:8px;width:28px;height:28px;font-size:13px;color:var(--muted)}
.lg-acts button:hover{background:var(--tile);color:var(--navy)}
.lg-add{margin:6px 0 10px}
.lg-add>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border:1px dashed #C4D3EA;color:var(--navy);border-radius:10px;padding:7px 13px;font-size:12.5px;font-weight:600}
.lg-add>summary::-webkit-details-marker{display:none}
.lg-add>summary:hover{background:var(--tile)}
.lg-add>summary .p{color:var(--green);font-weight:800}
.lg-editbox{display:none;margin:0 0 8px}
.lg-editbox.on{display:block}
.lg-form{margin:8px 0 4px;background:#F7FAFF;border:1px solid #CFDDF1;border-radius:12px;padding:11px 13px}
html[data-theme="dark"] .lg-form{background:#111a27;border-color:#2a3547}
.lg-typs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.lg-typ{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 10px;font-size:12.5px;font-weight:600;cursor:pointer}
.lg-typ:hover{border-color:#B9CBE8;background:var(--tile)}
.lg-typ input{display:none}
.lg-typ:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 2px rgba(31,56,100,.12)}
.lg-typ .d{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-size:11px;color:#fff}
.lg-typ .d.t-ort{background:#2C7BE5}.lg-typ .d.t-raum{background:#8B5CF6}
.lg-typ .d.t-regal,.lg-typ .d.t-schrank{background:#E89A3C}
.lg-typ .d.t-fach,.lg-typ .d.t-lade{background:#3FA972}
.lg-typ .d.t-box{background:#8D6E63}.lg-typ .d.t-bereich{background:#EC6B8A}
.lg-inrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lg-inrow .kz-in{font-family:"SF Mono",Consolas,monospace;width:92px;font-weight:700}

/* ===== DB-Reset (Admin) ===== */
.reset-warn{background:#FDECEA;border:1px solid #F5C4BE;color:#B23B2E;border-radius:10px;padding:10px 13px;font-size:13px;margin:4px 0 14px}
.reset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.reset-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.reset-card.danger{border-color:#F0B9B2;background:#FEF7F6}
.rc-ic{font-size:24px}
.rc-t{font-weight:800;color:var(--navy);font-size:15px}
.rc-d{font-size:12px;color:var(--muted);flex:1}
.reset-card .in{width:100%}
.btn-danger{background:#D64B3B;color:#fff;border:0;border-radius:9px;padding:9px 14px;font-weight:700;cursor:pointer}
.btn-danger:hover{background:#BE3D2E}
@media(max-width:820px){
  .reset-grid{grid-template-columns:1fr}
  .lg-children{margin-left:9px;padding-left:9px}
  .lg-row{flex-wrap:wrap;gap:7px}
  .lg-row .lg-tag{display:none}
}

/* Ort nicht erfasst / Reintext in Liste */
.loc-warn{color:#C0392B;font-weight:700;font-size:12px;white-space:nowrap}
.locbadge.warn{background:#FDECEA !important;color:#C0392B !important}
.loc-rt{color:var(--muted);font-size:12px;margin-top:2px}
html[data-theme="dark"] .loc-warn{color:#F1948A}
html[data-theme="dark"] .locbadge.warn{background:#3a2020 !important;color:#F1948A !important}

/* ===== Migrationsassistent ===== */
.migbar{display:flex;align-items:center;gap:12px;background:#FFF3E0;border:1px solid #F3D6A8;border-radius:12px;padding:12px 14px;margin-bottom:16px}
.migbar .mi{font-size:20px}
.migbar .mt{flex:1;font-size:13px;color:#7a5b1e}
html[data-theme="dark"] .migbar{background:#3a2f1a;border-color:#5a4a2a}
html[data-theme="dark"] .migbar .mt{color:#e8cfa0}
.migsum{display:flex;gap:10px;align-items:center;color:var(--muted);margin:4px 0 12px}
.migsum b{color:var(--navy)}
.migsum .dot{opacity:.5}
.migtbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.migtbl{width:100%;border-collapse:collapse;font-size:13.5px}
.migtbl thead th{text-align:left;padding:11px 12px;background:var(--tile);color:var(--navy);font-size:12px;border-bottom:1px solid var(--line)}
.migtbl th.r,.migtbl td.r{text-align:right}
.migtbl th.c,.migtbl td.c{text-align:center;color:var(--muted)}
.migtbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.migtbl tr:last-child td{border-bottom:0}
.migtbl tr.chg{background:#FBFDF9}
html[data-theme="dark"] .migtbl tr.chg{background:#16241a}
.migtbl td.old{font-family:"SF Mono",Consolas,monospace;color:var(--muted);text-decoration:line-through}
.migtbl td.new{font-family:"SF Mono",Consolas,monospace;color:var(--navy)}
.migtbl td.arr{color:var(--orange);font-weight:800}
.migtbl select.in{min-width:150px;max-width:100%}
.migactions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
@media(max-width:820px){
  /* Tabelle -> gestapelte Karten, kein seitliches Scrollen */
  .migtbl,.migtbl tbody,.migtbl tr,.migtbl td{display:block;width:100%}
  .migtbl thead{display:none}
  .migtbl tr{border-bottom:1px solid var(--line);padding:8px 4px}
  .migtbl tr:last-child{border-bottom:0}
  .migtbl td{border:0;padding:5px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
  .migtbl td::before{content:attr(data-label);color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;flex:0 0 auto}
  .migtbl td.c.arr{display:none}
  .migtbl select.in{min-width:0;flex:1 1 auto}
  .migactions{flex-direction:column-reverse}
  .migactions .btn-orange,.migactions .btn-grey{width:100%;text-align:center}
}

/* ===== Box- / Lagerort-Ansicht ===== */
.box-head{display:flex;gap:18px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.box-head .bh-l{flex:1;min-width:0}
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;margin-bottom:6px}
.crumb a{color:var(--muted);text-decoration:none;font-family:"SF Mono",Consolas,monospace;font-weight:700}
.crumb a:hover{color:var(--navy)}
.crumb .sep{color:var(--line)}
.box-head h1{color:var(--navy);font-size:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bh-type{font-size:11px;color:var(--muted);background:#F1F4FA;border-radius:20px;padding:3px 10px;font-weight:700}
.bh-code{font-family:"SF Mono",Consolas,monospace;font-weight:800;font-size:17px;color:var(--navy);margin-top:6px}
.bh-rt{color:var(--muted);font-size:13px;margin-top:2px}
.bh-cnt{margin-top:8px;font-size:13px;color:var(--text)}
.bh-qr{flex:0 0 auto;text-align:center}
.bh-qr svg{width:110px;height:110px}
.box-children{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.bc{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-decoration:none;color:var(--text)}
.bc:hover{border-color:#C9D6EC;box-shadow:var(--shadow)}
.bc-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;color:#fff;flex:0 0 auto}
.bc-ic.t-ort{background:#2C7BE5}.bc-ic.t-raum{background:#8B5CF6}
.bc-ic.t-regal,.bc-ic.t-schrank{background:#E89A3C}
.bc-ic.t-fach,.bc-ic.t-lade{background:#3FA972}
.bc-ic.t-box{background:#8D6E63}.bc-ic.t-bereich{background:#EC6B8A}
.bc-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.bc-tx b{font-family:"SF Mono",Consolas,monospace;color:var(--navy);font-size:13px}
.bc-tx span{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-ar{color:var(--muted);font-weight:700}
.box-group{margin-bottom:16px}
.bg-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:6px 2px 8px}
.bg-head a{font-family:"SF Mono",Consolas,monospace;font-weight:800;color:var(--navy);text-decoration:none}
.box-items{display:flex;flex-direction:column;gap:8px}
.bi{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 13px;text-decoration:none;color:var(--text)}
.bi:hover{border-color:#C9D6EC;box-shadow:var(--shadow)}
.bi-img{width:44px;height:44px;border-radius:9px;background:var(--tile);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.bi-img img{width:100%;height:100%;object-fit:cover}
.bi-img .ph{font-size:20px}
.bi-bd{flex:1;min-width:0;display:flex;flex-direction:column}
.bi-t{font-weight:700;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-m{color:var(--muted);font-size:12.5px;font-family:"SF Mono",Consolas,monospace}
.bi-st{flex:0 0 auto;font-size:12px}
@media(max-width:820px){
  .box-head{flex-direction:column-reverse;align-items:stretch;gap:12px}
  .bh-qr{align-self:center}
  .box-children{grid-template-columns:1fr}
}
@media print{ .sidebar,.topbar,.footbar,.no-print{display:none!important} .bh-qr svg{width:150px;height:150px} }

/* Lagernummer als Link (öffnet Box-Ansicht) */
.loc-link{color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--muted)}
.loc-link:hover{color:var(--orange-dark);border-bottom-color:var(--orange)}
html[data-theme="dark"] .loc-link{color:var(--ink)}
.lg-acts a.iconbtn{display:grid;place-items:center;text-decoration:none}

/* ===== Icon-Suche (Kategorie-Dialog) ===== */
.isvg{display:inline-flex;align-items:center;justify-content:center;width:1.15em;height:1.15em;vertical-align:-.15em}
.isvg svg{width:100%;height:100%;display:block}
.swatch .isvg{width:20px;height:20px}
.icon-preview .isvg{width:28px;height:28px}
.icon-search{display:flex;gap:8px;align-items:center}
.icon-search .in{flex:1}
.icon-hint{font-size:11.5px;color:var(--muted);margin:6px 2px 8px}
.icon-results{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;min-height:0}
.icon-results:empty{display:none}
.iconhit{border:1.5px solid var(--line);background:#fff;border-radius:9px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px}
.iconhit:hover{border-color:var(--orange);background:#FBF6EF}
.iconhit img{width:26px;height:26px;object-fit:contain}
.iconhit .isvg{width:26px;height:26px}
.icon-load{grid-column:1/-1;color:var(--muted);font-size:12.5px;padding:8px 2px}
html[data-theme="dark"] .iconhit{background:#111a27}
html[data-theme="dark"] .iconhit img{filter:none}
@media(max-width:820px){ .icon-results{grid-template-columns:repeat(6,1fr)} }

/* Hersteller-Icon in Einstellungen-Liste */
.mfr-sw{width:30px;height:30px;border-radius:8px;background:#EEF2F8;display:inline-flex;align-items:center;justify-content:center;font-size:16px;margin-right:8px}
.mfr-sw .isvg{width:20px;height:20px}

/* Schnelles Lagerort-Ändern auf der Detailseite */


/* ===== Icon-Dropdown (Hersteller/Kategorie mit Logo) ===== */
.isel{position:relative}
.isel>select{display:none}
.isel-trg{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;color:var(--text);cursor:pointer}
.isel-trg:hover{border-color:#C9D6EC}
.isel.open .isel-trg{border-color:var(--navy);box-shadow:0 0 0 2px rgba(31,56,100,.10)}
.isel-ic{width:22px;height:22px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.isel-ic .isvg{width:20px;height:20px}
.isel-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.isel-ar{flex:0 0 auto;color:var(--muted);font-size:12px}
.isel-panel{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:320px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px}
.isel.open .isel-panel{display:block}
.isel-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;
  border-radius:9px;padding:9px 10px;font-family:inherit;font-size:14px;color:var(--text);cursor:pointer}
.isel-opt:hover{background:var(--tile)}
.isel-opt.on{background:var(--tile);font-weight:700}
.isel-opt .isel-ic{width:24px;height:24px;font-size:17px}
.isel-opt .isel-ic .isvg{width:22px;height:22px}
.isel-new{color:var(--navy);font-weight:600}
.isel-sep{height:1px;background:var(--line);margin:5px 8px}
html[data-theme="dark"] .isel-trg,html[data-theme="dark"] .isel-panel{background:#111a27}

/* Hinweis bei geänderter Artikelnummer (Bearbeiten) */
.num-warn{background:#FFF3E0;border:1px solid #F3D6A8;color:#7a5b1e;border-radius:10px;padding:10px 13px;font-size:13px;margin-top:-4px}
.in.ro.num-changed{color:var(--orange-dark);font-style:italic}
html[data-theme="dark"] .num-warn{background:#3a2f1a;border-color:#5a4a2a;color:#e8cfa0}

/* Nicht wählbarer Info-Eintrag im Icon-Dropdown ("Bitte auswählen …") */
.isel-info{padding:8px 10px;color:var(--muted);font-size:13px;font-style:italic}

/* ===== v1.6.0b: Dashboard-Banner, Backup, Galerie, Scanner, Versicherung ===== */
/* Bald-fällig + Backup-Banner (Stil an overdue-banner angelehnt) */
.duesoon-banner,.backup-banner{display:flex;align-items:center;gap:12px;border-radius:12px;padding:11px 14px;margin-bottom:12px}
.duesoon-banner{background:#FFF3E0;border:1px solid #F3D6A8}
.duesoon-banner .ob-txt{flex:1;font-size:13px;color:#7a5b1e}
.backup-banner{background:var(--tile);border:1px solid #CFDDF1}
.backup-banner .ob-txt{flex:1;font-size:13px;color:var(--text)}
html[data-theme="dark"] .duesoon-banner{background:#3a2f1a;border-color:#5a4a2a}
html[data-theme="dark"] .duesoon-banner .ob-txt{color:#e8cfa0}
html[data-theme="dark"] .backup-banner{background:#16202e;border-color:#2a3547}
/* Zuletzt erfasst: Lagerort-Badge nicht abschneiden */
.recent .rec-loc{flex:0 0 auto;margin-left:8px;white-space:nowrap}
.recent .meta{min-width:0}
.recent .meta .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Backup-Karte in Einstellungen */
.backup-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:15px;background:var(--surface)}
.backup-card .bk-ic{font-size:26px}
.backup-card .bk-tx{flex:1;min-width:0}
@media(max-width:820px){ .backup-card{flex-direction:column;align-items:stretch;text-align:left} }

/* Galerie: Thumb-Aktionen + Lightbox */
.gal-thumb{position:relative;cursor:pointer}
.gal-thumb.is-main::after{content:'★';position:absolute;top:2px;left:4px;color:var(--orange);font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.gal-thumb .gal-acts{position:absolute;right:2px;bottom:2px;display:flex;gap:3px;opacity:0;transition:.15s}
.gal-thumb:hover .gal-acts,.gal-thumb:active .gal-acts{opacity:1}
@media(max-width:820px){ .gal-thumb .gal-acts{opacity:1} }
.gal-acts form{display:inline}
.gal-acts button{width:22px;height:22px;border:0;border-radius:6px;background:rgba(255,255,255,.92);font-size:11px;cursor:pointer;line-height:1}
.gal-acts button:hover{background:#fff}
.gallery .big{cursor:zoom-in}
.lightbox{display:none;position:fixed;inset:0;background:rgba(10,16,28,.92);z-index:200;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox.on{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:10px;box-shadow:0 12px 50px rgba(0,0,0,.6)}
.lightbox .lb-close{position:absolute;top:14px;right:18px;color:#fff;font-size:22px}

/* Scanner: Modus-Umschalter + Umlagern-Status */
.scan-mode{display:flex;gap:8px;margin-bottom:10px}
.sm-btn{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 10px;font-weight:700;color:var(--muted);cursor:pointer;font-size:14px}
.sm-btn.on{border-color:var(--orange);color:var(--orange-dark);background:#FBF6EF}
html[data-theme="dark"] .sm-btn.on{background:#3a2f1a}
.move-state{margin-bottom:10px}
.ms-step{background:var(--tile);border:1px dashed #B9CBE8;border-radius:10px;padding:9px 12px;font-size:13px}
.ms-target{display:flex;align-items:center;gap:8px;background:#E7F5EC;border:1px solid #BFE3CD;border-radius:10px;padding:8px 12px;font-size:13px;flex-wrap:wrap}
html[data-theme="dark"] .ms-target{background:#14301f;border-color:#2a5a3a}
.ms-log{margin-top:8px;display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto}
.ms-line{font-size:13px;padding:6px 10px;border-radius:8px;background:var(--bg)}
.ms-line.ok{background:#E7F5EC}
.ms-line.warn{background:#FDECEA}
html[data-theme="dark"] .ms-line.ok{background:#14301f}
html[data-theme="dark"] .ms-line.warn{background:#3a2020}

/* Versicherungsliste */
.vers-sum{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vers-sum .vs{flex:1 1 140px;background:var(--tile);border-radius:10px;padding:10px 13px}
.vers-sum .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.vers-sum .v{font-size:18px;font-weight:800;color:var(--navy)}
.vers-tbl .vimg img{width:42px;height:42px;object-fit:cover;border-radius:7px}
.vers-tbl .vph{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;background:var(--tile);border-radius:7px;font-size:19px}
@media print{
  .vers-sum .vs{border:1px solid #ddd}
  .vers-tbl .vimg img{width:34px;height:34px}
}

/* Restore-Karte */
.restore-card{border-color:#F0B9B2;background:#FEF7F6;align-items:flex-start}
html[data-theme="dark"] .restore-card{background:#2a1a1a;border-color:#5a3030}

/* Sidebar: Trennstriche + Version oben */
.nav .nav-sep{height:1px;background:rgba(255,255,255,.10);margin:8px 14px}
.app-ver{color:#8FA3C4;font-weight:600;font-size:11px;margin-left:4px}

/* Abmelden unten in der Seitenleiste (vor den Statistiken) */
.nav-logout{padding:0 10px 10px}
.nav-logout a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:9px;color:#C7D2E6;text-decoration:none;font-size:14px;transition:.15s}
.nav-logout a .ic{width:18px;text-align:center;font-size:16px}
.nav-logout a:hover{background:rgba(255,255,255,.07);color:#fff}

/* Topbar: Gruppe rechts wirklich rechtsbündig */
.topbar .spacer{flex:1}

/* ===== Profil-Hero ===== */
.prof-hero{display:flex;align-items:center;gap:20px;background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 70%,#3a5a94 100%);border-radius:16px;padding:22px 24px;margin-bottom:18px;color:#fff;box-shadow:var(--shadow-lg)}
.prof-hero .prof-avbox.big{width:92px;height:92px;flex:0 0 auto}
.prof-hero .prof-avbox.big .prof-init{font-size:30px}
.ph-main{flex:1;min-width:0}
.ph-name{font-size:22px;font-weight:800}
.ph-sub{display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:#C7D2E6;font-size:13px;margin-top:3px}
.ph-role{background:rgba(232,154,60,.2);border:1px solid rgba(232,154,60,.55);color:#F5C98C;border-radius:20px;padding:2px 10px;font-weight:700;font-size:12px}
.ph-fav{margin-top:8px;font-size:13px;color:#E8EDF6}
.ph-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ph-chip{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:4px 12px;font-size:12.5px;color:#E8EDF6}
.ph-chip b{color:#fff}
@media(max-width:820px){
  .prof-hero{flex-direction:column;text-align:center;gap:12px}
  .ph-sub,.ph-stats{justify-content:center}
}

/* =====================================================================
   v1.8.0b – Forum, Nachrichten, Aufgabenplaner, Mitteilungszentrale
   ===================================================================== */
.hide{display:none!important}
.btn-sm{padding:5px 10px!important;font-size:12px!important;border-radius:8px!important}
.ph-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chk-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);margin:10px 0;cursor:pointer}
.lbl-sm{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:8px 0 6px}
.badge-red{background:#D64B3B;color:#fff;border-radius:999px;font-size:11px;font-weight:700;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.ib-badge{position:relative}
.badge-abs{position:absolute;top:-4px;right:-4px}

/* ---- Forum ---- */
.fo-sec{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;margin:18px 0 8px}
.fo-row{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:12px;
  box-shadow:var(--shadow);padding:12px 14px;margin-bottom:8px;text-decoration:none;
  transition:transform .12s, box-shadow .12s}
.fo-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.fo-ann{border-left:4px solid var(--orange);background:linear-gradient(90deg,#FBF3E6,var(--surface) 55%)}
.fo-pin{font-size:20px}
.fo-av{position:relative;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  flex-shrink:0;overflow:visible}
.fo-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.fo-av.big{width:48px;height:48px;font-size:16px}
.fo-av .pres{position:absolute;bottom:0;right:0}
.fo-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fo-title{font-weight:700;color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-meta{font-size:12px;color:var(--muted)}
.fo-cnt{background:var(--tile);color:var(--ink);border-radius:999px;font-size:12px;font-weight:700;
  min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;padding:0 8px}
.fo-thread{margin-bottom:16px}
.fo-post{display:flex;gap:10px;margin-bottom:12px}
.fo-bubble{flex:1;min-width:0;background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px}
.fo-phead{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.fo-phead b{color:var(--ink);font-size:13px}
.fo-del{margin-left:auto}
.fo-del button{background:none;border:0;cursor:pointer;font-size:13px;opacity:.55}
.fo-del button:hover{opacity:1}
.fo-body{font-size:14px;color:var(--text);white-space:pre-wrap;word-break:break-word}

/* ---- Private Nachrichten ---- */
.pm-list{max-width:680px}
.pm-row{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:12px;
  box-shadow:var(--shadow);padding:12px 14px;margin-bottom:8px;text-decoration:none;
  transition:transform .12s, box-shadow .12s}
.pm-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.chat{max-width:680px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);
  padding:16px;max-height:56vh;overflow-y:auto;margin-bottom:12px}
.chat-day{text-align:center;margin:10px 0}
.chat-day span{background:var(--tile);color:var(--muted);font-size:11px;border-radius:999px;padding:3px 10px}
.chat-msg{display:flex;flex-direction:column;margin-bottom:8px;max-width:80%}
.chat-msg.me{align-self:flex-end;align-items:flex-end;margin-left:auto}
.chat-msg.them{align-items:flex-start;margin-right:auto}
.chat-bubble{padding:9px 13px;border-radius:14px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.chat-msg.me .chat-bubble{background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.chat-msg.them .chat-bubble{background:var(--tile);color:var(--text);border-bottom-left-radius:4px}
.chat-time{font-size:10px;color:var(--muted);margin-top:2px}
.chat-input{max-width:680px;display:flex;gap:8px;align-items:flex-end}
.chat-input textarea{flex:1;resize:none}
.chat-input .btn-primary{padding:11px 18px}

/* ---- Sidebar: Mitglieder / online ---- */
.side-members{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 18px;font-size:11.5px;color:rgba(255,255,255,.75);border-top:1px solid rgba(255,255,255,.12)}
.sm-online{position:relative;display:flex;align-items:center;gap:5px;cursor:default}
.sm-online .pres{position:static}
.sm-tip{display:none;position:absolute;bottom:130%;right:0;background:var(--navy-dark);
  color:#fff;font-size:12px;line-height:1.7;border-radius:10px;padding:10px 14px;
  box-shadow:var(--shadow-lg);white-space:nowrap;z-index:60}
.sm-online:hover .sm-tip{display:block}

/* ---- Aufgabenplaner ---- */
.plan-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:start}
.cal-card{position:sticky;top:12px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head b{color:var(--ink);font-size:15px}
.cal-nav{width:32px;height:32px;border-radius:9px;background:var(--tile);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none;font-weight:700}
.cal-nav:hover{background:var(--navy);color:#fff}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-bottom:3px}
.cal-wd div{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;padding:2px 0}
.cal-day{min-height:64px;background:var(--bg);border-radius:8px;padding:3px 4px;
  display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cal-day.out{opacity:.42}
.cal-day.today{outline:2px solid var(--orange);background:#FBF3E6}
.cal-day.drop{outline:2px dashed var(--navy);background:var(--tile)}
.cal-num{font-size:10.5px;font-weight:700;color:var(--muted)}
.cal-day.today .cal-num{color:var(--orange-dark)}
.cal-chip{display:block;font-size:10px;line-height:1.35;background:var(--surface);
  border-left:3px solid var(--tc,#2E82A6);border-radius:5px;padding:2px 4px;color:var(--text);
  cursor:grab;box-shadow:0 1px 3px rgba(31,56,100,.12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-chip.done{opacity:.5;text-decoration:line-through}
.cal-hint{font-size:11px;color:var(--muted);margin-top:8px}
.pl-card{background:var(--bg);border-radius:12px;padding:11px 13px;margin-bottom:10px;cursor:grab}
.pl-card.flash{animation:plflash 1.4s}
@keyframes plflash{0%,60%{box-shadow:0 0 0 3px var(--orange)}100%{box-shadow:none}}
.pl-card.pl-done{opacity:.62}
.pl-top{display:flex;align-items:center;gap:9px;cursor:pointer}
.pl-type{width:30px;height:30px;border-radius:9px;background:#EAF1F8;background:color-mix(in srgb, var(--tc,#2E82A6) 16%, #fff);
  border:1.5px solid var(--tc,#2E82A6);display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0}
.pl-title{flex:1;min-width:0;font-weight:700;color:var(--ink);font-size:14px;word-break:break-word}
.pl-done .pl-title{text-decoration:line-through}
.pl-check{width:28px;height:28px;border-radius:50%;border:2px solid var(--green);background:var(--surface);
  color:transparent;font-weight:700;cursor:pointer;flex-shrink:0}
.pl-check.on,.pl-check:hover{background:var(--green);color:#fff}
.pl-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.pl-pill{font-size:11px;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:2px 8px;color:var(--text)}
.pl-pill[style*="--tc"]{border-color:var(--tc);color:var(--tc);font-weight:700}
.pl-warn{border-color:var(--yellow);color:#a67c00;background:#FDF6E3}
.pl-over{border-color:var(--red);color:var(--red);background:#FBEAE7;font-weight:700}
.pl-who{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.pl-as{font-size:11px;border-radius:999px;padding:2px 9px;background:var(--surface);
  border:1px solid var(--line);color:var(--text);display:inline-flex;gap:5px;align-items:center}
.pl-as b{font-size:11px}
.pl-accepted{border-color:var(--green);color:#20734d;background:#EAF7F0}
.pl-declined{border-color:var(--red);color:var(--red);background:#FBEAE7}
.pl-proposed{border-color:var(--orange);color:var(--orange-dark);background:#FBF3E6}
.pl-thinking,.pl-pending{border-color:var(--line);color:var(--muted)}
.pl-detail{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.pl-desc{font-size:13px;color:var(--text);white-space:pre-wrap;margin-bottom:8px}
.pl-checks{margin-bottom:8px}
.pl-ci{display:flex;align-items:center;gap:8px;padding:3px 0}
.ci-box{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);background:var(--surface);
  color:transparent;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0}
.ci-box.on{background:var(--green);border-color:var(--green);color:#fff}
.ci-txt{flex:1;font-size:13px;color:var(--text)}
.ci-txt.done{text-decoration:line-through;color:var(--muted)}
.ci-del{background:none;border:0;cursor:pointer;font-size:12px;opacity:.5}
.ci-del:hover{opacity:1}
.pl-links{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pl-link{font-size:12px;background:var(--tile);color:var(--ink);border-radius:999px;
  padding:4px 11px;text-decoration:none;font-weight:600}
.pl-link:hover{background:var(--navy);color:#fff}
.pl-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pl-btns{display:flex;gap:6px;align-items:center}
.tf-users{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.tf-user{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer}
.tf-user:has(input:checked){background:var(--tile);border-color:var(--navy);color:var(--ink);font-weight:700}
.tf-inrow{display:flex;gap:6px;margin-bottom:6px}
.tf-inrow .in{flex:1;min-width:0}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* ---- Mitteilungszentrale (Dashboard) ---- */
.notif-center{margin-bottom:18px}
.nc-row{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.nc-row:last-child{border-bottom:0;padding-bottom:0}
.nc-ask{background:linear-gradient(90deg,#FBF3E6,transparent 70%);border-radius:10px;
  padding:10px 10px;border-bottom:0;margin-bottom:4px}
.nc-ic{font-size:20px;flex-shrink:0;margin-top:1px}
.nc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nc-txt b{color:var(--ink);font-size:13.5px}
.nc-txt>span{font-size:12.5px;color:var(--muted)}
.nc-answer{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.nc-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--text);font-weight:600}
.nc-btn:hover{border-color:var(--navy);color:var(--ink)}
.nc-ok{border-color:var(--green);color:#20734d}
.nc-ok:hover{background:var(--green);color:#fff;border-color:var(--green)}
.nc-no{border-color:var(--red);color:var(--red)}
.nc-no:hover{background:var(--red);color:#fff;border-color:var(--red)}
.nc-date{width:auto;padding:5px 8px;font-size:12px}

/* ---- Einstellungen: Aufgabenarten ---- */
.pt-edit{display:flex;gap:6px;align-items:center;padding:8px 0;flex-wrap:wrap}
.pt-edit .in{flex:1;min-width:120px}
.pt-edit .pt-icon{flex:0 0 64px;min-width:64px;text-align:center}
.pt-edit .pt-color{flex:0 0 46px;min-width:46px;height:38px;padding:2px}

/* ---- Mobil ---- */
@media (max-width: 980px){
  .plan-grid{grid-template-columns:1fr}
  .cal-card{position:static}
}
@media (max-width: 640px){
  .cal-day{min-height:52px}
  .cal-chip{font-size:9px;padding:1px 3px}
  .chat{max-height:48vh}
  .chat-msg{max-width:92%}
  .nc-answer{gap:5px}
  .nc-btn{padding:6px 10px;font-size:12px}
  .fo-cnt{display:none}
  .side-members{display:none}
}

/* ---- Dunkelmodus-Anpassungen für Forum/Aufgaben/Mitteilungen ---- */
html[data-theme="dark"] .fo-ann{background:linear-gradient(90deg,rgba(232,154,60,.16),var(--surface) 55%)}
html[data-theme="dark"] .nc-ask{background:linear-gradient(90deg,rgba(232,154,60,.14),transparent 70%)}
html[data-theme="dark"] .cal-day.today{background:rgba(232,154,60,.14)}
html[data-theme="dark"] .pl-warn{background:rgba(232,185,60,.14);color:#e8c96a;border-color:rgba(232,185,60,.5)}
html[data-theme="dark"] .pl-over{background:rgba(217,106,91,.16);color:#ef9384;border-color:rgba(217,106,91,.55)}
html[data-theme="dark"] .pl-accepted{background:rgba(63,169,114,.16);color:#7fd6a8;border-color:rgba(63,169,114,.5)}
html[data-theme="dark"] .pl-declined{background:rgba(217,106,91,.16);color:#ef9384;border-color:rgba(217,106,91,.55)}
html[data-theme="dark"] .pl-proposed{background:rgba(232,154,60,.16);color:#f0b46a;border-color:rgba(232,154,60,.5)}
html[data-theme="dark"] .pl-type{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .pl-card{background:#131c2c}
html[data-theme="dark"] .cal-day{background:#131c2c}
html[data-theme="dark"] .cal-chip{background:var(--surface)}
html[data-theme="dark"] .chat-msg.them .chat-bubble{background:var(--tile)}
html[data-theme="dark"] .nc-ok{color:#7fd6a8}
html[data-theme="dark"] .nc-no{color:#ef9384}
html[data-theme="dark"] .fo-cnt{background:var(--tile);color:var(--ink)}
html[data-theme="dark"] .tf-user{background:#131c2c}
html[data-theme="dark"] .tf-user:has(input:checked){background:var(--tile)}

/* =====================================================================
   v1.9.0b – Freunde, großes Aufgaben-Modal, Lieferanten
   ===================================================================== */
/* Aufgaben-Modal: groß, in Bereiche gegliedert */
.tm-modal{width:760px;max-width:96vw;padding:0!important;overflow:hidden;
  display:flex;flex-direction:column;max-height:calc(100vh - 120px)}
.tm-hero{display:flex;align-items:center;gap:12px;padding:16px 20px;
  background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff}
.tm-hero b{font-size:17px}
.tm-hero-ic{font-size:26px}
.tm-hero-sub{font-size:12px;color:rgba(255,255,255,.75)}
.tm-x{margin-left:auto;color:#fff!important;background:rgba(255,255,255,.15)!important}
/* Das Formular zwischen Dialog und Inhalt muss die Flex-Kette weiterreichen,
   sonst wächst es über den Dialog hinaus und die Fußzeile mit „✓ Speichern“
   rutscht unsichtbar nach unten (auf niedrigen Bildschirmen war der Knopf
   dadurch überhaupt nicht erreichbar). min-height:0 gehört zwingend dazu. */
.tm-modal > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.tm-body{padding:14px 18px;overflow-y:auto;flex:1 1 auto;min-height:0}
.tm-sec{background:var(--bg);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.tm-sec-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  color:var(--sc,var(--ink));text-transform:uppercase;letter-spacing:.5px;
  border-left:4px solid var(--sc,var(--orange));padding-left:8px;margin-bottom:10px}
.tm-sec-head span{font-size:15px}
.tm-foot{padding:12px 18px;border-top:1px solid var(--line);margin-top:0;background:var(--surface)}
.lbl-hint{font-size:11.5px;color:var(--muted);margin-top:6px}
.tf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:6px}
.tf-chip{display:inline-flex;align-items:center;gap:7px;background:var(--tile);
  border:1px solid var(--navy);color:var(--ink);border-radius:999px;padding:5px 6px 5px 12px;
  font-size:13px;font-weight:600}
.tf-chip button{border:0;background:rgba(31,56,100,.12);border-radius:50%;width:20px;height:20px;
  cursor:pointer;font-size:10px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.tf-chip button:hover{background:var(--red);color:#fff}
.tf-addrow{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.tf-addrow .in{flex:1;min-width:160px}
.tf-linkbox{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:8px;margin-bottom:8px}
.tf-newshop{background:var(--surface);border:1.5px dashed var(--orange);border-radius:10px;
  padding:10px;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.tf-newshop b{font-size:12.5px;color:var(--ink)}
.pl-editbtn{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font-size:13px;color:var(--muted);flex-shrink:0}
.pl-editbtn:hover{border-color:var(--navy);color:var(--ink)}
.pl-item{text-decoration:none;background:var(--tile);border-color:var(--navy);color:var(--ink);font-weight:600}

/* Freunde */
.fr-state{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}

/* Lieferanten */
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.sup-card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:16px;
  text-decoration:none;transition:transform .12s, box-shadow .12s;display:flex;
  flex-direction:column;gap:6px}
.sup-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.sup-top{display:flex;align-items:center;gap:9px}
.sup-ic{width:34px;height:34px;border-radius:10px;background:var(--tile);display:flex;
  align-items:center;justify-content:center;font-size:16px}
.sup-name{font-weight:700;color:var(--ink);font-size:15px}
.sup-url{font-size:12px;color:var(--muted)}
.sup-info{font-size:12px;color:var(--text)}
.sup-stats{display:flex;gap:10px;font-size:12px;color:var(--muted);margin-top:4px;flex-wrap:wrap}
.sa-row{border-bottom:1px solid var(--line);padding:7px 0}
.sa-row:last-of-type{border-bottom:0}
.sa-top{display:flex;align-items:center;gap:8px;cursor:pointer}
.sa-top .grow{min-width:0}
.sa-price{color:var(--ink);font-weight:700;white-space:nowrap}
.sa-price small{color:var(--muted);font-weight:400}
.sa-det{padding:8px 0 4px}
.sa-hist{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:8px 0;font-size:12px}
.sa-priceform{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.sa-add{background:var(--bg);border-radius:10px;padding:10px;margin-top:12px}
.buy-row{border-bottom:1px solid var(--line);padding:8px 0}
.buy-row:last-child{border-bottom:0}
.buy-top{display:flex;align-items:center;gap:9px;cursor:pointer;flex-wrap:wrap}
.buy-date{font-weight:700;color:var(--ink);font-size:13px;white-space:nowrap}
.buy-status{font-size:11.5px;border-radius:999px;padding:2px 9px;border:1px solid var(--line);white-space:nowrap}
.st-bestellt{background:#FBF0DC;border-color:var(--yellow);color:#8a6d1f}
.st-geliefert{background:#EAF7F0;border-color:var(--green);color:#20734d}
.st-bezahlt{background:var(--tile);border-color:var(--navy);color:var(--ink)}
.buy-det{padding:8px 0 2px}
.buy-pos{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;color:var(--text)}
.cost-box{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cost-total{background:var(--tile);border-color:var(--navy);color:var(--ink);font-weight:700}
.cost-list{margin-top:8px;background:var(--bg);border-radius:9px;padding:6px 10px}
html[data-theme="dark"] .st-bestellt{background:rgba(232,185,60,.14);color:#e8c96a}
html[data-theme="dark"] .st-geliefert{background:rgba(63,169,114,.16);color:#7fd6a8}
html[data-theme="dark"] .tm-sec{background:#131c2c}
html[data-theme="dark"] .tf-linkbox,html[data-theme="dark"] .tf-newshop{background:#0f1622}
html[data-theme="dark"] .sa-add,html[data-theme="dark"] .cost-list{background:#131c2c}
@media (max-width: 640px){
  .tm-modal{width:100vw;max-width:100vw;max-height:96vh;border-radius:14px 14px 0 0}
  .sup-grid{grid-template-columns:1fr 1fr}
  .sa-priceform .in{min-width:100px}
}

/* Artikel-Checklisten + Rechnung + Aufgabe starten */
.note-row{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.note-row:last-of-type{border-bottom:0}
.note-ic{color:var(--muted);width:20px;text-align:center;flex-shrink:0}
.note-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.note-text{font-size:13.5px;color:var(--text);word-break:break-word}
.note-text.done{text-decoration:line-through;color:var(--muted)}
.note-meta{font-size:11px;color:var(--muted)}
.note-act{display:flex;gap:4px;flex-shrink:0}
.note-edit{display:flex;gap:6px;padding:6px 0}
.note-add{display:flex;gap:6px;margin-top:10px}
.note-add .in{flex:1;min-width:0}
.inv-card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:14px;margin-top:14px}
.inv-head{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
.inv-prev{width:100%;height:210px;border-radius:10px;border:1px solid var(--line);object-fit:cover;background:#fff;display:block}
.inv-img{cursor:zoom-in;object-fit:contain}
.inv-prevlink{position:relative;display:block;text-decoration:none}
.inv-pdftag{position:absolute;bottom:8px;right:8px;background:var(--navy);color:#fff;font-size:11.5px;border-radius:999px;padding:4px 10px}
.inv-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.inv-empty{display:block;border:2px dashed var(--orange);border-radius:12px;padding:26px 12px;text-align:center;color:var(--orange-dark);font-weight:700;cursor:pointer;background:#FDF8F0}
.inv-empty small{font-weight:400;color:var(--muted)}
.pl-startbtn{width:28px;height:28px;border-radius:50%;border:2px solid var(--orange);background:var(--surface);color:var(--orange-dark);font-size:11px;cursor:pointer;flex-shrink:0}
.pl-startbtn:hover{background:var(--orange);color:#fff}
.pl-run{border-color:var(--green);color:#20734d;background:#EAF7F0;font-weight:700}
html[data-theme="dark"] .inv-empty{background:rgba(232,154,60,.1)}
html[data-theme="dark"] .pl-run{background:rgba(63,169,114,.16);color:#7fd6a8}
html[data-theme="dark"] .inv-prev{background:#0f1622}

/* Forum: Wichtig, Abstimmung, Hoverkarte, Optionen */
.fo-imp{border-left:4px solid var(--red)}
.fo-ann.fo-imp{border-left:4px solid var(--red)}
.imp-tag{background:var(--red);color:#fff;border-radius:8px;padding:2px 9px;font-size:13px;vertical-align:middle}
.fo-follow{font-size:12px}
.fo-optrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:10px 0}
.fo-optrow #annDur{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fo-poll{background:var(--bg);border-radius:10px;padding:10px 12px;margin-top:6px}
.fo-poll summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink)}
.fo-poll .frow{margin-top:10px}
.poll-card .bar{background:var(--orange)}
.poll-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.poll-pick{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--surface);
  cursor:pointer;font-size:13px;color:var(--muted);flex-shrink:0}
.poll-pick.on{border-color:var(--orange);color:var(--orange-dark);font-weight:700}
.poll-pick:hover{border-color:var(--orange)}
.poll-opt{flex:1;min-width:0}
.poll-line{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:3px}
.poll-txt{color:var(--text);font-weight:600}
.poll-num{color:var(--muted);white-space:nowrap}
.poll-bar{height:8px;background:var(--bg);border-radius:999px;overflow:hidden}
.poll-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--orange-dark));border-radius:999px}
.uhov{position:relative;cursor:default}
.uhov-card{display:none;position:absolute;top:110%;left:0;z-index:70;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:12px 14px;
  min-width:210px;flex-direction:column;gap:4px}
.uhov:hover .uhov-card{display:flex}
.uhov-card b{color:var(--ink);font-size:13.5px}
.uh-role{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.uh-row{font-size:12.5px;color:var(--text)}
.fo-bubble .rt-area{min-height:80px}
.fo-body ul,.fo-body ol{margin:6px 0 6px 20px}
.fo-body a{color:var(--navy);font-weight:600}
#newThread .rt-area,#replyForm .rt-area{min-height:90px;border:1px solid var(--line);border-radius:0 0 10px 10px;padding:10px;font-size:14px;background:var(--surface)}
#newThread .rt-toolbar,#replyForm .rt-toolbar{border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0}
html[data-theme="dark"] .poll-bar{background:#0f1622}
html[data-theme="dark"] .fo-poll{background:#131c2c}
@media (max-width:640px){
  .uhov-card{left:auto;right:-40px}
  .page-head .ph-actions form{display:inline}
}

/* Einladungs-Logik */
.tf-whorow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.tf-req{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap}
.tf-pres{width:auto;padding:6px 8px;font-size:12.5px}
.pl-cancelbar{display:flex;align-items:center;gap:8px;background:#FBEAE7;border:1px solid var(--red);
  color:var(--red);border-radius:9px;padding:7px 10px;font-size:13px;margin-top:8px;flex-wrap:wrap}
.pl-card:has(.pl-cancelbar){outline:2px solid var(--red)}
.pl-absent{border-color:var(--line);color:var(--muted);text-decoration:line-through}
.nc-cancel{background:linear-gradient(90deg,#FBEAE7,transparent 70%);border-radius:10px;padding:10px;border-bottom:0;margin-bottom:4px}
.nc-task{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.nc-task-t{font-size:13px;color:var(--text);font-weight:600}
.nc-task-t small{color:var(--muted);font-weight:400}
.plog .r{align-items:flex-start;gap:8px}
.plog .grow{font-size:12.5px;font-weight:400}
.plog b{color:var(--ink)}
html[data-theme="dark"] .pl-cancelbar{background:rgba(217,106,91,.14);color:#ef9384}
html[data-theme="dark"] .nc-cancel{background:linear-gradient(90deg,rgba(217,106,91,.16),transparent 70%)}

/* Freund-Freigaben */
.perm-row{flex-basis:100%;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bg);border-radius:9px;padding:7px 10px;margin-top:6px}
.perm-pend{color:#a67c00;font-weight:700}
.perm-on{color:#20734d;font-weight:700}
html[data-theme="dark"] .perm-row{background:#131c2c}
html[data-theme="dark"] .perm-pend{color:#e8c96a}
html[data-theme="dark"] .perm-on{color:#7fd6a8}

/* Lieferanten: Kachel-/Listenansicht */
#supViews .sview-list{display:none}
#supViews[data-view="list"] .sview-list{display:block}
#supViews[data-view="list"] .sview-tiles{display:none}
#supViews .sview-list .sup-ic{width:38px;height:38px;border-radius:10px}

/* Gruppe + Rang neben dem Namen, Emoji-Panel, Ränge */
.wb{display:inline-flex;align-items:center;border-radius:999px;padding:1px 8px;
  font-size:10.5px;font-weight:700;vertical-align:middle;white-space:nowrap}
.wb-role{background:var(--tile);color:var(--ink);border:1px solid var(--navy)}
.wb-rank{background:#FBF0DC;color:#8a6d1f;border:1px solid var(--yellow)}
.rt-toolbar{position:relative;flex-wrap:wrap}
.rt-emojipanel{position:absolute;top:100%;left:0;right:0;z-index:40;background:var(--surface);
  border:1px solid var(--line);border-radius:0 0 10px 10px;box-shadow:var(--shadow-lg);
  padding:8px;display:flex;flex-wrap:wrap;gap:2px;max-height:180px;overflow-y:auto}
.rt-emojipanel button{font-size:17px;border:0;background:none;cursor:pointer;border-radius:6px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.rt-emojipanel button:hover{background:var(--tile)}
.rt-emojipanel.hide{display:none}
.rank-badge{background:#FBF0DC;color:#8a6d1f;border:1px solid var(--yellow);
  border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:700}
html[data-theme="dark"] .wb-rank,html[data-theme="dark"] .rank-badge{background:rgba(232,185,60,.14);color:#e8c96a}

/* Profil: linke Spalte breiter (E-Mail/Adresse wurden abgeschnitten) */
.prof-grid{grid-template-columns:minmax(420px,1fr) 1.3fr}
@media (max-width: 1100px){ .prof-grid{grid-template-columns:1fr} }

/* ===== Hero-Animationen: Cursor, Sonne, Sterne, Pac-Man, Diskette, Joystick ===== */
#crsr{animation:heroBlink 1.1s steps(1) infinite}
@keyframes heroBlink{0%,55%{opacity:.9}56%,100%{opacity:0}}
#sunG{animation:sunShimmer 7s ease-in-out infinite;transform-origin:820px 150px}
#sunGlow{animation:sunGlowPulse 7s ease-in-out infinite;transform-origin:820px 150px}
@keyframes sunShimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.13)}}
@keyframes sunGlowPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.tw{animation:twinkle 3.4s ease-in-out infinite}
.tw.t2{animation-duration:2.3s;animation-delay:.7s}
.tw.t3{animation-duration:4.6s;animation-delay:1.4s}
.tw.t4{animation-duration:2.9s;animation-delay:2.1s}
@keyframes twinkle{0%,100%{opacity:.85}50%{opacity:.15}}
#scanline{animation:scanMove 6s linear infinite}
@keyframes scanMove{0%{transform:translateY(0)}100%{transform:translateY(78px)}}
/* Diskette: rüberschweben, in den Schlitz tauchen, zurück */
#floppy{transition:none;transform-origin:0 0}
#floppy.f-go{animation:floppyGo 5.2s ease-in-out 1}
@keyframes floppyGo{
  0%{transform:translate(556px,150px) scale(1);opacity:1}
  20%{transform:translate(540px,120px) scale(0.8);opacity:1}
  38%{transform:translate(481px,194px) scale(0.5,0.5);opacity:1}
  48%{transform:translate(481px,209px) scale(0.5,0.08);opacity:1}
  56%{transform:translate(468px,209.5px) scale(0.38,0.06);opacity:1}
  60%{transform:translate(468px,209.5px) scale(0.38,0.06);opacity:0}
  72%{transform:translate(468px,209.5px) scale(0.38,0.06);opacity:0}
  78%{transform:translate(481px,209px) scale(0.5,0.08);opacity:1}
  86%{transform:translate(500px,170px) scale(0.75);opacity:1}
  100%{transform:translate(556px,150px) scale(1);opacity:1}
}
#pled.led-busy,#dled.led-busy{animation:ledBusy .22s steps(1) infinite}
@keyframes ledBusy{0%{fill:#5b6a55}50%{fill:#59d97a}100%{fill:#5b6a55}}
/* Joystick wackeln */
#joyStick{transform-box:fill-box;transform-origin:50% 95%}
#joyStick.j-wiggle{animation:joyWiggle 1.6s ease-in-out 1}
@keyframes joyWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}45%{transform:rotate(13deg)}70%{transform:rotate(-9deg)}85%{transform:rotate(5deg)}}
/* Pac-Man */
#pac{transition:opacity .4s}
/* Pac-Man: Position setzt das Skript (bleibt mit den Punkten synchron),
   nur das Mampfen läuft über CSS */
#pacman.pm-chomp .pm-open{animation:pmChompA .32s steps(1) infinite}
#pacman.pm-chomp .pm-shut{animation:pmChompB .32s steps(1) infinite}
@keyframes pmChompA{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pmChompB{0%,49%{opacity:0}50%,100%{opacity:1}}
#pacDots circle{transition:opacity .15s}
/* Sternschnuppe */
#shoot line{}
#shoot.sh-go{animation:shootGo 1.5s ease-in 1}
@keyframes shootGo{0%{opacity:0;transform:translate(1120px,10px)}10%{opacity:.9}100%{opacity:0;transform:translate(700px,90px)}}
@media (prefers-reduced-motion: reduce){
  #crsr,#sunG,#sunGlow,.tw,#scanline,#floppy,#joyStick,#pacman,#pacman .pm-open,#pacman .pm-shut,#pacman.pm-chomp .pm-open,#pacman.pm-chomp .pm-shut{animation:none!important}
}

/* Handy: Suchleiste bis zum nächsten Symbol ziehen (Spacer weg) */
@media (max-width: 820px){
  .topbar .spacer{display:none}
  .topbar .search{flex:1 1 auto;min-width:0}
}

/* Fix: Lupe lag hinter dem Platzhaltertext (Toolbar-Padding überschrieb die Suche) */
.toolbar .search input{padding-left:40px}

/* ================= v1.12 Wiki (Wissensdatenbank) ================= */
.wk-search{display:flex;gap:10px;align-items:center;position:relative;margin:6px 0 18px}
.wk-search input{flex:1;padding:12px 14px 12px 42px;font-size:15px;border-radius:12px}
.wk-glass{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--muted);pointer-events:none}
.wk-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.wk-cat{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 4px rgba(20,40,80,.06);transition:transform .12s,box-shadow .12s}
.wk-cat:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,40,80,.12)}
.wk-cat-ic{font-size:26px}
.wk-cat-name{font-weight:800;font-size:14px}
.wk-cat-n{font-size:12px;color:var(--muted)}
.wk-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.wk-sec{font-weight:800;font-size:13px;letter-spacing:.4px;color:var(--muted);margin:16px 0 8px;text-transform:uppercase}
.wk-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;margin-bottom:8px;text-decoration:none;color:var(--ink)}
.wk-row:hover{border-color:var(--orange)}
.wk-ic{font-size:20px;flex:0 0 auto}
.wk-main{display:flex;flex-direction:column;min-width:0;flex:1}
.wk-title{font-weight:700;font-size:14px}
.wk-meta{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-badge{flex:0 0 auto;font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap}
.wk-badge.st-done{background:#e2f6ec;color:#177a4e}
.wk-badge.st-draft{background:#fff3d8;color:#9a6b00}
.wk-badge.st-wanted{background:#fde5e2;color:#b3382c}
.wk-wanted{border-style:dashed}
.wk-wishcard{display:flex;flex-direction:column;gap:6px}
.wk-wish{display:flex;align-items:center;gap:8px}
.wk-wish.done .wk-wish-txt{text-decoration:line-through;color:var(--muted)}
.wk-wish-chk{background:none;border:none;font-size:17px;cursor:pointer;padding:2px;color:var(--ink)}
.wk-wish-txt{flex:1;font-size:13px}
.wk-wish-add{display:flex;gap:8px;margin-top:8px}
.wk-wish-add input{flex:1}
.iconbtn-plain{background:none;border:none;cursor:pointer;font-size:14px;padding:2px 4px;opacity:.7}
.iconbtn-plain:hover{opacity:1}
.wk-crumbs{font-size:13px;color:var(--muted);margin-bottom:8px}
.wk-crumbs a{color:var(--muted);text-decoration:none}
.wk-crumbs a:hover{color:var(--orange)}
.wk-wantbox{background:#fde5e2;border:1px dashed #e0a49c;color:#8c2f25;border-radius:12px;
  padding:10px 14px;font-size:13px;margin-bottom:14px}
.wk-art-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
.wk-body{font-size:14px;line-height:1.65;word-break:break-word}
.wk-body h3,.wk-body h4{margin:14px 0 6px}
.wk-body ul,.wk-body ol{padding-left:22px;margin:8px 0}
.wk-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.wk-thumb{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.wk-thumb img{width:100%;height:110px;object-fit:cover;display:block}
.wk-extlink{display:block;font-size:13px;font-weight:600;color:var(--blue,#2a78d6);
  text-decoration:none;padding:5px 0;border-bottom:1px dashed var(--line)}
.wk-extlink:last-child{border-bottom:none}
.wk-doc{display:flex;align-items:center;gap:6px;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--line)}
.wk-doc:last-child{border-bottom:none}
.wk-doc a{text-decoration:none;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.wk-metacard .wk-metarow{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  padding:5px 0;border-bottom:1px dashed var(--line)}
.wk-metacard .wk-metarow:last-child{border-bottom:none}
.wk-metacard .wk-metarow span{color:var(--muted)}
.wk-filelist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.wk-filepill{background:var(--chip,#eef1f6);border-radius:99px;padding:4px 10px;font-size:12px}
.rt-area.rt-tall{min-height:220px}
.wikilink{font-weight:700;text-decoration:none;color:var(--blue,#2a78d6);
  background:rgba(42,120,214,.08);border-radius:6px;padding:1px 5px}
.wikilink.wl-miss{color:#b3382c;background:rgba(227,73,72,.08)}
html[data-theme="dark"] .wk-badge.st-done{background:#173527;color:#5fd39b}
html[data-theme="dark"] .wk-badge.st-draft{background:#3a2f12;color:#eabf5e}
html[data-theme="dark"] .wk-badge.st-wanted{background:#3a1d1a;color:#ef8d81}
html[data-theme="dark"] .wk-wantbox{background:#3a1d1a;border-color:#6b3630;color:#ef9c92}
html[data-theme="dark"] .wk-filepill{background:#2a2f3c}
@media(max-width:900px){
  .wk-grid,.wk-art-grid{grid-template-columns:1fr}
  .wk-cats{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ================= v1.12.1 Recherche-Zentrale ================= */
.rc-portals{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:8px}
.rc-portal{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;text-decoration:none;color:var(--ink);font-weight:700;font-size:13.5px;
  box-shadow:0 1px 4px rgba(20,40,80,.06);transition:transform .12s,border-color .12s}
.rc-portal:hover{transform:translateY(-2px);border-color:var(--orange)}
.rc-portal .rc-p-ic{font-size:19px}
.rc-portal .rc-p-go{margin-left:auto;color:var(--muted)}
.rc-shop{border-style:dashed}
.rc-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start;margin-top:4px}
.rc-hit{display:flex;flex-direction:column;padding:8px 2px;border-bottom:1px dashed var(--line);
  text-decoration:none;color:var(--ink)}
.rc-hit:last-child{border-bottom:none}
.rc-hit:hover .rc-hit-t{color:var(--orange)}
.rc-hit-t{font-weight:700;font-size:13.5px}
.rc-hit-m{font-size:12px;color:var(--muted)}
.rc-find{padding:8px 0;border-bottom:1px dashed var(--line)}
.rc-find:last-of-type{border-bottom:none}
.rc-find-top{display:flex;align-items:baseline;gap:10px}
.rc-find-t{font-weight:700;font-size:13.5px;color:var(--blue,#2a78d6);text-decoration:none;flex:1;min-width:0}
.rc-find-p{font-weight:800;font-size:13.5px;white-space:nowrap}
.rc-find-m{font-size:12px;color:var(--muted)}
.rc-find-add{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
@media(max-width:900px){
  .rc-grid{grid-template-columns:1fr}
  .rc-portals{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media(max-width:600px){
  .wk-search{flex-wrap:wrap}
  .wk-search input{flex:1 1 100%}
  .wk-search .btn-orange{flex:1 1 auto;margin-left:auto}
}
@media(max-width:600px){
  .wk-glass{display:none}
  .wk-search input{padding-left:14px}
}

/* ================= v1.13 Wiki-Profi-Editor ================= */
.rt-toolbar.rtx{flex-wrap:wrap;row-gap:4px;position:relative}
.rt-toolbar.rtx button{min-width:30px}
.rt-palette{position:absolute;top:100%;left:0;z-index:30;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;gap:6px;
  flex-wrap:wrap;box-shadow:0 8px 24px rgba(20,40,80,.18);max-width:320px}
.rt-palette.hide{display:none}
.rt-palette button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);
  cursor:pointer;padding:0;font-size:12px}
.rt-palette.rt-sym{max-width:380px}
.rt-palette.rt-sym button{width:30px;height:30px;background:var(--surface);font-size:15px}
.rt-area img{max-width:100%;border-radius:8px;margin:4px 0}
.rt-area h2{font-size:20px;margin:12px 0 6px}
.rt-area h3{font-size:17px;margin:10px 0 5px}
.rt-area h4{font-size:14.5px;margin:8px 0 4px}
.rt-area blockquote,.wk-body blockquote{border-left:4px solid var(--orange);
  margin:8px 0;padding:6px 12px;background:rgba(237,161,0,.07);border-radius:0 8px 8px 0}
.wk-body img{max-width:100%;border-radius:10px;margin:6px 0}
.wk-body h2{font-size:21px;margin:16px 0 8px;scroll-margin-top:80px}
.wk-body h3{scroll-margin-top:80px}
.wk-body h4{scroll-margin-top:80px}
.wk-body hr,.rt-area hr{border:none;border-top:2px dashed var(--line);margin:12px 0}
mark[class^="mk-"]{border-radius:4px;padding:0 3px;color:#1c2333}
.mk-y{background:#ffe98a}.mk-g{background:#b9f0ce}.mk-b{background:#bcdcff}
.mk-p{background:#ffd2e5}.mk-o{background:#ffd9a8}
html[data-theme="dark"] mark[class^="mk-"]{color:#14181f}
.wk-anchor{font-size:11px;color:var(--muted);text-decoration:none;opacity:.7}
.wk-toc{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.wk-toc b{margin-bottom:4px}
.wk-toc a{text-decoration:none;color:var(--blue,#2a78d6);font-size:13.5px;padding:1px 0}
.wk-toc a:hover{color:var(--orange)}
.wk-toc .wk-toc-l3{padding-left:16px;font-size:13px}
.wk-toc .wk-toc-l4{padding-left:32px;font-size:12.5px;color:var(--muted)}

/* ================= v1.14 Videos, Tabellen, Schnellerfassen, Duplikate ================= */
.wk-video{position:relative;width:100%;max-width:720px;aspect-ratio:16/9;margin:10px 0;
  border-radius:12px;overflow:hidden;background:#000}
.wk-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rt-area .wk-video{pointer-events:none;border:2px dashed var(--line)}
.rt-area .wk-video::after{content:"🎬 YouTube-Video (Vorschau erst am Artikel)";
  position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.65);color:#fff;
  font-size:12px;padding:4px 8px}
.wk-vidcard video{width:100%;max-height:420px;border-radius:10px;background:#000}
.wk-vidmeta{font-size:12.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:6px}
.wk-body table,.rt-area table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13.5px}
.wk-body th,.wk-body td,.rt-area th,.rt-area td{border:1px solid var(--line);padding:7px 10px;
  text-align:left;min-width:40px}
.wk-body th,.rt-area th{background:rgba(237,161,0,.10);font-weight:800}
.wk-body tr:nth-child(even) td{background:rgba(20,40,80,.03)}
html[data-theme="dark"] .wk-body tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.qk-form{display:flex;flex-direction:column;gap:14px;max-width:560px}
.qk-photo{display:block;border:2px dashed var(--line);border-radius:14px;min-height:170px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  background:var(--surface);text-align:center}
.qk-photo:hover{border-color:var(--orange)}
.qk-photo-inner{font-size:15px;font-weight:700;color:var(--muted);line-height:1.7}
.qk-photo img{width:100%;max-height:300px;object-fit:contain}
.qk-name{font-size:17px;padding:13px 14px}
.qk-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.qk-cat input{display:none}
.qk-cat span{display:block;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;
  font-weight:700;font-size:13px;cursor:pointer;background:var(--surface)}
.qk-cat input:checked + span{border-color:var(--orange);background:rgba(237,161,0,.12)}
.qk-go{font-size:17px;padding:14px;border-radius:12px}
.qk-done{background:#e2f6ec;border:1px solid #9adbbb;color:#177a4e;border-radius:12px;
  padding:12px 16px;font-size:14px;margin-bottom:14px}
html[data-theme="dark"] .qk-done{background:#173527;border-color:#2c5a41;color:#5fd39b}
.qk-banner{background:#fff3d8;border:1px dashed #e0b64c;color:#7a5500;border-radius:12px;
  padding:10px 14px;font-size:13.5px;margin-bottom:14px;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap}
html[data-theme="dark"] .qk-banner{background:#3a2f12;border-color:#6b5a25;color:#eabf5e}
.qk-pill{display:inline-block;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:3px 10px;font-size:12.5px;text-decoration:none;color:var(--ink);
  margin:2px 4px 2px 0;font-weight:600}
.qk-pill:hover{border-color:var(--orange)}

/* ================= v1.15 Auswertung + Verknüpfungen ================= */
.aw-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.aw-tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 1px 4px rgba(20,40,80,.06)}
.aw-n{font-size:22px;font-weight:800}
.aw-l{font-size:12px;color:var(--muted);font-weight:600}
.aw-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.aw-user{padding:10px 0;border-bottom:1px dashed var(--line)}
.aw-user:last-child{border-bottom:none}
.aw-u-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aw-u-name{font-weight:800;font-size:14px}
.aw-u-pts{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
.aw-u-meta{font-size:12px;color:var(--muted);margin:2px 0 4px}
.aw-u-rate{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aw-stars{display:inline-flex;gap:1px;align-items:center}
.aw-star{background:none;border:none;font-size:17px;cursor:pointer;color:#c9cfdb;padding:0 1px}
.aw-star.on{color:#eda100}
.aw-star:hover{color:#eda100}
.aw-cat{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px}
.aw-cat-l{flex:0 0 45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.aw-cat-bar{flex:1;background:rgba(20,40,80,.07);border-radius:99px;height:10px;overflow:hidden}
.aw-cat-bar span{display:block;height:100%;background:var(--orange);border-radius:99px}
html[data-theme="dark"] .aw-cat-bar{background:rgba(255,255,255,.08)}
.aw-cat-n{flex:0 0 34px;text-align:right;font-weight:700}
.pl-pill.pl-wiki{background:rgba(42,120,214,.10);color:var(--blue,#2a78d6);text-decoration:none;font-weight:700}
@media(max-width:900px){.aw-grid{grid-template-columns:1fr}}

/* ================= v1.15.2 Funktions-Badge (✓/✗ aus neuestem Protokoll) ================= */
.fnb{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;font-size:11px;font-weight:900;margin-left:6px;vertical-align:middle;
  flex:0 0 auto}
.fnb-ok{background:#e2f6ec;color:#177a4e;border:1px solid #9adbbb}
.fnb-bad{background:#fde5e2;color:#c0392b;border:1px solid #eda9a0}
html[data-theme="dark"] .fnb-ok{background:#173527;border-color:#2c5a41;color:#5fd39b}
html[data-theme="dark"] .fnb-bad{background:#3a1d1a;border-color:#6b3630;color:#ef8d81}
.wk-seg{display:flex;gap:8px;flex-wrap:wrap}
.wk-seg-opt input{display:none}
.wk-seg-opt span{display:inline-block;border:1.5px solid var(--line);border-radius:99px;
  padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer;background:var(--surface)}
.wk-seg-opt input:checked + span{border-color:var(--orange);background:rgba(237,161,0,.12)}

/* ================= v1.15.3 Forum-Wünsche (lila) ================= */
.fo-wish{border-left:4px solid #8355d7;background:linear-gradient(90deg,#F0EAFB,var(--surface) 55%)}
.fo-wish .fo-title{color:#5b3ba8}
html[data-theme="dark"] .fo-wish{background:linear-gradient(90deg,rgba(131,85,215,.18),var(--surface) 55%)}
html[data-theme="dark"] .fo-wish .fo-title{color:#b79bef}
.wish-tag{display:inline-block;background:#F0EAFB;color:#5b3ba8;border:1px solid #cdb9f2;
  border-radius:99px;padding:2px 10px;font-size:12px;font-weight:800;vertical-align:middle}
html[data-theme="dark"] .wish-tag{background:rgba(131,85,215,.2);border-color:#5b3ba8;color:#b79bef}

/* ================= v1.16 Artikel-Verknüpfung + Badge-Spalte ================= */
.fnb-th{width:26px}
.fnb-td{text-align:center;padding-left:4px !important;padding-right:4px !important}
.fnb-td .fnb{margin-left:0}
.fnb-pre{margin-left:0;margin-right:6px}
.il-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.il-add input[list]{flex:1 1 220px;min-width:180px}
.il-add input[name=note]{flex:1 1 180px;min-width:150px}

/* ================= v1.16.1 Wunsch-Abstimmungen im Dashboard ================= */
.wp-card{border-left:4px solid #8355d7}
.wp-item{padding:10px 0;border-bottom:1px dashed var(--line)}
.wp-item:last-child{border-bottom:none}
.wp-title{font-weight:800;font-size:14px;color:#5b3ba8;text-decoration:none}
.wp-title:hover{text-decoration:underline}
html[data-theme="dark"] .wp-title{color:#b79bef}
.wp-q{display:block;font-size:13px;margin:2px 0 6px}
.wp-row{display:flex;align-items:center;gap:8px;padding:3px 0}
.wp-vote{background:none;border:none;cursor:pointer;font-size:15px;color:#8355d7;padding:0 2px}
.wp-vote.on{color:#5b3ba8;font-weight:900}
.wp-lab{flex:0 0 32%;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-bar{flex:1;background:rgba(131,85,215,.12);border-radius:99px;height:12px;overflow:hidden}
.wp-bar span{display:block;height:100%;background:#8355d7;border-radius:99px}
.wp-n{flex:0 0 26px;text-align:right;font-weight:800;font-size:13px}
@media(max-width:600px){.wp-lab{flex-basis:40%}}

/* Fix: Tabellen-Überschriften sauber linksbündig über den Inhalten */
thead th{text-align:left}
th.sortable>a{justify-content:flex-start}

/* ================= v1.17 Rechte-Zentrale, Papierkorb, Split-Ansicht, Wiki-Facelift ================= */
/* Forum-Lesemodus */
.fo-robanner{background:#fde5e2;border:1px dashed #e0a49c;color:#8c2f25;border-radius:12px;
  padding:10px 14px;font-size:13.5px;margin-bottom:14px}
html[data-theme="dark"] .fo-robanner{background:#3a1d1a;border-color:#6b3630;color:#ef9c92}
/* Rechte-Zentrale */
.rz-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}
.rz-tree{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.rz-role{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:10px;font-size:14px}
.rz-lvl{background:var(--navy);color:#fff;border-radius:8px;padding:1px 8px;font-size:11px;font-weight:800}
.rz-newrole{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.rz-newrole input[name=label]{flex:1;min-width:160px}
.rz-ov{background:#fff3d8;color:#9a6b00;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:800}
html[data-theme="dark"] .rz-ov{background:#3a2f12;color:#eabf5e}
.rz-matrix{border-collapse:collapse;width:100%;font-size:13px}
.rz-matrix th,.rz-matrix td{border:1px solid var(--line);padding:6px 8px;text-align:center}
.rz-matrix td:first-child,.rz-matrix th:first-child{text-align:left}
.rz-matrix thead th{background:var(--navy);color:#fff;font-size:12px}
.rz-grp td{background:rgba(237,161,0,.10);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.rz-lock{color:#1baf7a;font-weight:900}
.rz-matrix input[type=checkbox]{width:16px;height:16px;accent-color:var(--orange)}
.rz-saverow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* Einstellungs-Gruppen */
.set-tgrp{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);margin:10px 0 2px;padding:0 4px}
.set-tabs .set-tgrp:first-child{margin-top:0}
.set-tab-link{display:block;padding:8px 12px;border-radius:9px;text-decoration:none;
  color:var(--ink);font-size:13.5px;font-weight:600}
.set-tab-link:hover{background:rgba(237,161,0,.12)}
/* Lieferanten-Split */
.sup-split{display:flex;align-items:stretch;min-height:420px;height:calc(100vh - 300px)}
.sup-split-left{flex:0 0 42%;min-width:230px;overflow-y:auto;padding-right:2px}
.sup-split-drag{flex:0 0 8px;cursor:col-resize;border-radius:4px;margin:0 3px;
  background:linear-gradient(var(--line),var(--line)) center/2px 60% no-repeat}
.sup-split-drag:hover{background:linear-gradient(var(--orange),var(--orange)) center/3px 70% no-repeat}
.sup-split-right{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;position:relative;display:flex}
.sup-split-right iframe{width:100%;height:100%;border:0;background:transparent}
.sup-split-hint{margin:auto;text-align:center;color:var(--muted);font-size:14px;line-height:1.9;padding:20px}
.sup-row.sel{border-color:var(--orange);box-shadow:0 0 0 2px rgba(237,161,0,.25)}
@media(max-width:899px){
  .sup-split{display:block;height:auto}
  .sup-split-drag,.sup-split-right{display:none}
  .sup-split-left{overflow:visible;padding:0}
  .rz-grid{grid-template-columns:1fr}
}
/* Wiki-Facelift */
.wk-starter{display:flex;gap:18px;align-items:center;margin-bottom:16px;
  background:linear-gradient(120deg,rgba(237,161,0,.10),var(--surface) 60%)}
.wk-starter-ic{font-size:40px}
.wk-row-flat{border:none;box-shadow:none;border-bottom:1px dashed var(--line);border-radius:0;
  margin-bottom:0;padding-left:2px;padding-right:2px;background:transparent}
.wk-row-flat:hover{border-color:var(--line);background:rgba(237,161,0,.05)}
.wk-row-flat:last-of-type{border-bottom:none}
.wk-empty{color:var(--muted);font-size:13.5px;padding:8px 2px;line-height:1.6}
.fr-pill{display:inline-block;background:#e8ecf6;color:#2c3e6b;border:1px solid #b9c4e0;
  border-radius:99px;padding:1px 8px;font-size:11px;font-weight:800;margin-left:6px;vertical-align:middle}
html[data-theme="dark"] .fr-pill{background:#232a3d;border-color:#3a4665;color:#9fb0dd}
.pill-lib.pill-foreign{background:#e8ecf6;color:#2c3e6b}
.fb-add{margin-bottom:4px}
.wctx{position:absolute;z-index:200;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px rgba(20,40,80,.25);padding:4px}
.wctx button{background:none;border:none;padding:9px 14px;font-size:13.5px;font-weight:600;
  cursor:pointer;border-radius:7px;color:var(--ink);display:block;width:100%;text-align:left}
.wctx button:hover{background:rgba(227,73,72,.10);color:#c0392b}
/* v1.17.1: Borger/Verborger-Modus */
.reg-choice{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line,#d7dce6);
  border-radius:11px;padding:10px 12px;margin:7px 0 0;cursor:pointer;font-weight:400;
  background:var(--surface,#fff);transition:border-color .15s, box-shadow .15s}
.reg-choice input{margin-top:3px;accent-color:#eda100}
.reg-choice small{color:var(--muted,#7a879c);line-height:1.45;display:inline-block;margin-top:2px}
.reg-choice:has(input:checked){border-color:#eda100;box-shadow:0 0 0 2px rgba(237,161,0,.22)}
.bo-banner{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:linear-gradient(120deg,rgba(237,161,0,.14),var(--surface) 65%);
  border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:18px}
.bo-ic{font-size:34px}
.bo-txt{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px}
.bo-txt b{color:var(--navy,#1F3864)}
.bo-txt span{color:var(--muted);font-size:13.5px;line-height:1.5}
.bo-sent{background:#e6f6ee;color:#12744a;border:1px solid #9ed9bd;border-radius:99px;
  padding:7px 14px;font-size:13px;font-weight:800}
html[data-theme="dark"] .bo-sent{background:#15311f;border-color:#2c5c3f;color:#7fd6a8}
html[data-theme="dark"] .bo-txt b{color:#dfe6f5}
/* Fix: Handy-Kartenliste der Ausleihen war am Desktop sichtbar (.lib-cards
   überschrieb .only-mobile) – jetzt sauber nur am Handy */
.only-mobile.lib-cards{display:none}
@media(max-width:820px){ .only-mobile.lib-cards{display:flex} }
/* Registrier-Wahlkarten: normale Schrift statt Label-Optik, Radio links */
.login-card label.reg-choice{display:flex;text-transform:none;letter-spacing:0;
  font-size:13.5px;font-weight:400;margin:7px 0 0}
.login-card .reg-choice input{width:auto;flex:0 0 auto}
.login-card .reg-choice b{font-size:13.5px;color:var(--navy,#1F3864)}
/* v1.18: E-Mail-Verifizierung, AGB, 2FA */
.tos-box{white-space:pre-wrap;background:var(--surface,#f4f6fa);border:1px solid var(--line,#d7dce6);
  border-radius:11px;padding:14px 16px;font-size:12.5px;line-height:1.6;color:var(--ink,#333);
  max-height:340px;overflow-y:auto;margin-top:12px;text-align:left}
.vf-ok{color:#12744a;font-weight:700;font-size:12px}
.vf-wait{color:#b26a00;font-weight:700;font-size:12px}
html[data-theme="dark"] .vf-ok{color:#7fd6a8}
html[data-theme="dark"] .vf-wait{color:#f0b95c}
/* v1.18.1: AGB-Neuannahme + Impressum */
.lbtn-decline{background:transparent !important;color:#c0392b !important;
  border:1.5px solid #e0a9a4 !important;margin-top:10px}
.lbtn-decline:hover{background:rgba(227,73,72,.08) !important}
/* v1.18.1: Sidebar kompakt (nur Mitglieder unten), Forum-Kopf fix, Wiki-Kacheln flacher */
.side-members{margin-top:auto}
.sidebar .nav{overflow-y:auto;min-height:0}
.th-sticky{position:sticky;top:0;z-index:15;background:var(--surface,#eef1f6);
  padding:10px 0;margin-top:-10px;box-shadow:0 8px 14px -10px rgba(20,40,80,.28)}
html[data-theme="dark"] .th-sticky{background:var(--surface,#161b26)}
/* Wiki-Bereichskacheln: flach und einzeilig statt hoher Karten */
.wk-cats{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.wk-cat{flex-direction:row;align-items:center;gap:10px;padding:9px 13px}
.wk-cat-ic{font-size:20px;line-height:1}
.wk-cat-name{font-size:13px;flex:1;line-height:1.25}
.wk-cat-n{font-size:11.5px;white-space:nowrap}
/* Rollen verschieben (Rechte-Zentrale) */
.rz-grip{cursor:grab;color:var(--muted);font-size:14px;user-select:none;margin-right:2px}
.rz-role.rz-dragging{opacity:.45}
.rz-role.rz-over{outline:2px dashed var(--orange,#eda100);outline-offset:2px;border-radius:10px}
.rz-lvlform{display:inline}
.rz-lvl-in{width:58px;text-align:center;font-weight:800;font-size:13px;color:#fff;
  background:var(--navy,#1F3864);border:1px solid rgba(255,255,255,.25);border-radius:99px;
  padding:3px 4px;-moz-appearance:textfield}
.rz-lvl-in::-webkit-outer-spin-button,.rz-lvl-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Einstellungen: Kopf bleibt stehen, linke Spalte kompakt + eigenes Scrollen */
.set-head-sticky{position:sticky;top:0;z-index:16;background:var(--surface,#eef1f6);
  padding:10px 0;margin-top:-10px;box-shadow:0 8px 14px -10px rgba(20,40,80,.25)}
html[data-theme="dark"] .set-head-sticky{background:var(--surface,#161b26)}
@media(min-width:821px){
  .set-wrap{grid-template-columns:158px 1fr;gap:16px}
  .set-tabs{top:58px;max-height:calc(100vh - 165px);overflow-y:auto;
    overscroll-behavior:contain;padding:5px;scrollbar-width:thin}
  .set-tabs button{padding:3px 8px;font-size:12px;gap:6px;line-height:1.35;border-radius:7px}
  .set-tab-link{padding:4px 8px;font-size:12px;line-height:1.35}
  .set-tgrp{margin:6px 4px 2px;font-size:9.5px;letter-spacing:.4px}
  .set-tabs .set-tgrp:first-child{margin-top:1px}
}
/* v1.18.4: Sidebar kompakt – Brand-Kopf niedriger + Nav enger (alles ohne Scrollen) */
@media(min-width:821px){
  .sidebar .brand{padding:12px 16px 10px}
  .sidebar .brand .logo{font-size:21px}
  .sidebar .brand .rule{margin:4px 0 4px;width:52px;height:2px}
  .sidebar .brand .sub{font-size:7.5px;letter-spacing:.8px}
  .sidebar .brand .app-name{margin-top:7px;font-size:10px}
  .sidebar .nav{padding:8px 8px;overflow-y:auto;min-height:0}
  .sidebar .nav a{padding:7px 12px;font-size:13.5px;margin-bottom:2px;gap:10px}
  .sidebar .nav .nav-sep{margin:5px 12px}
  .sidebar .nav-logout{padding:0 8px 6px}
  .sidebar .nav-logout a{padding:7px 12px;font-size:13.5px}
  .side-members{padding:7px 16px}
}
/* v1.18.5: Fixe Kopfzeilen decken den kompletten oberen Streifen ab –
   vorher schien der scrollende Inhalt in der Lücke (Content-Padding) durch */
@media(min-width:821px){
  /* top:-26px: Chromium misst sticky ab der Innenkante NACH dem Padding –
     so klebt der Kopf wirklich bündig oben und nichts scheint durch */
  .th-sticky,.set-head-sticky{top:-26px;margin:-26px -26px 16px;padding:20px 26px 12px;border-radius:0}
}
@media(max-width:820px){
  .th-sticky,.set-head-sticky{top:-14px;margin:-14px -12px 12px;padding:12px 12px 10px;border-radius:0}
}
/* Sortierbare Tabellen + Protokoll-Ansichtsumschalter */
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{text-decoration:underline}
.sort-arr{display:inline-block;min-width:14px;margin-left:4px;font-size:10px}
.lv-toggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.lv-btn{border:none;background:var(--surface);padding:6px 11px;font-size:13px;cursor:pointer;color:var(--muted)}
.lv-btn.on{background:var(--navy,#1F3864);color:#fff}
@media(max-width:820px){ .lv-toggle{display:none} }
.aw-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.aw-filter .fld{min-width:130px}
.pr-kind{display:inline-block;border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:800}
.pr-kind.test{background:#e4f1f5;color:#20607a}
.pr-kind.repair{background:#fbe7e3;color:#a0402f}
.pr-kind.care{background:#e4f5ec;color:#1b7a52}
html[data-theme="dark"] .pr-kind.care{background:#173323;color:#7fd6a8}
html[data-theme="dark"] .pr-kind.test{background:#1c3340;color:#8fd0ea}
html[data-theme="dark"] .pr-kind.repair{background:#40231d;color:#f0a894}
/* 📣 Artikel-News */
.nc-row.inews{background:rgba(27,175,122,.07);border-radius:10px;padding:10px 12px;margin-bottom:6px;border-bottom:none}
.nc-x{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:28px;height:28px;
  cursor:pointer;color:var(--muted);font-size:13px;line-height:1}
.nc-x:hover{border-color:#e34948;color:#e34948}
.fo-news{background:rgba(27,175,122,.08);border:1px solid rgba(27,175,122,.35);border-radius:14px;
  padding:12px 16px;margin-bottom:14px}
.fo-news h3{margin:0 0 8px;font-size:14.5px;display:flex;align-items:center;gap:8px}
.fo-news .r{display:flex;gap:8px;align-items:center;padding:5px 0;font-size:13.5px;flex-wrap:wrap}
.fo-news .r a{text-decoration:none;color:inherit;font-weight:700}
.fo-news .r a:hover{text-decoration:underline}
.inews-days{background:#e6f6ee;color:#12744a;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:800;white-space:nowrap}
html[data-theme="dark"] .inews-days{background:#15311f;color:#7fd6a8}
/* ⚡ Erfassungsmodus (Handy): groß, klar, kein seitliches Scrollen */
.cp-body{background:var(--surface,#eef1f6);margin:0;padding-bottom:40px}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--navy,#1F3864);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:30}
.cp-brand{font-size:19px;display:flex;align-items:baseline;gap:8px}
.cp-brand b{letter-spacing:.3px}
.cp-sub{font-size:10.5px;color:#9FB0CC;text-transform:uppercase;letter-spacing:.6px}
.cp-exit{color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;background:rgba(255,255,255,.14);
  padding:8px 13px;border-radius:99px;white-space:nowrap}
.cp-tabs{display:flex;gap:8px;padding:10px 12px;background:var(--navy,#1F3864);position:sticky;top:56px;z-index:29}
.cp-tabs a{flex:1;text-align:center;color:#D6DEEC;text-decoration:none;font-size:15px;font-weight:700;
  padding:11px 6px;border-radius:11px;background:rgba(255,255,255,.08)}
.cp-tabs a.on{background:var(--orange,#eda100);color:#fff}
.cp-main{padding:14px 12px;max-width:680px;margin:0 auto}
.cp-in{width:100%;box-sizing:border-box;padding:13px 14px;border:1.5px solid var(--line,#d7dce6);
  border-radius:12px;font-size:16px;background:var(--surface,#fff);color:var(--ink,#222)}
.cp-btn{border:none;background:var(--navy,#1F3864);color:#fff;font-weight:800;font-size:15px;
  padding:12px 16px;border-radius:12px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.cp-btn-orange{background:var(--orange,#eda100)}
.cp-search{display:flex;gap:8px;margin-bottom:10px}
.cp-search .cp-in{flex:1}
.cp-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.cp-chip{background:var(--surface,#fff);border:1.5px solid var(--line,#d7dce6);border-radius:99px;
  padding:8px 13px;font-size:14px;text-decoration:none;color:var(--ink,#333);white-space:nowrap}
.cp-chip b{color:var(--muted,#7a879c);font-weight:800;margin-left:2px}
.cp-chip.on{background:var(--navy,#1F3864);border-color:var(--navy,#1F3864);color:#fff}
.cp-chip.on b{color:#ffd583}
.cp-list{display:flex;flex-direction:column;gap:9px}
.cp-item{display:flex;align-items:center;gap:12px;background:var(--surface,#fff);border:1px solid var(--line,#d7dce6);
  border-radius:14px;padding:10px 12px;text-decoration:none;color:var(--ink,#222)}
.cp-thumb{width:58px;height:58px;border-radius:11px;background:var(--surface,#eef1f6);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden}
.cp-thumb img{width:100%;height:100%;object-fit:cover}
.cp-item-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cp-item-tx b{font-size:16px;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.cp-item-tx small{color:var(--muted,#7a879c);font-size:12.5px}
.cp-go{color:var(--muted,#9aa7bd);font-size:22px}
.cp-empty{text-align:center;color:var(--muted);padding:26px 10px;font-size:15px}
.cp-fab{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;
  background:var(--orange,#eda100);color:#fff;font-size:32px;display:flex;align-items:center;
  justify-content:center;text-decoration:none;box-shadow:0 8px 22px rgba(20,40,80,.35);z-index:40}
.cp-form{display:flex;flex-direction:column;gap:4px}
.cp-lbl{font-size:12px;font-weight:800;color:var(--muted,#7a879c);text-transform:uppercase;
  letter-spacing:.4px;margin:12px 2px 5px}
.cp-photo{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--surface,#fff);
  border:2px dashed var(--line,#c6cede);border-radius:16px;padding:18px;cursor:pointer;margin-bottom:4px}
.cp-photo img{max-width:100%;max-height:220px;border-radius:12px}
.cp-photo-tx{font-size:16px;font-weight:800;color:var(--navy,#1F3864)}
.cp-save{margin-top:18px;border:none;background:#1baf7a;color:#fff;font-size:18px;font-weight:800;
  padding:16px;border-radius:14px;cursor:pointer}
.cp-ok{background:#e6f6ee;border:1px solid #9ed9bd;border-radius:16px;padding:18px;text-align:center;
  font-size:16px;margin-bottom:16px;color:#12744a}
.cp-ok-ic{font-size:34px}
.cp-ok-code{display:inline-block;background:#fff;border-radius:8px;padding:3px 10px;font-family:monospace;
  font-weight:800;margin-top:6px;color:#1F3864}
.cp-ok-acts{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.cp-kats{display:flex;flex-direction:column;gap:9px}
.cp-kat{background:var(--surface,#fff);border:1px solid var(--line,#d7dce6);border-radius:14px;padding:0}
.cp-kat summary{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;list-style:none}
.cp-kat summary::-webkit-details-marker{display:none}
.cp-kat-ic{font-size:24px}
.cp-kat-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-kat-tx small{color:var(--muted,#7a879c);font-size:12px}
.cp-kat-form,.cp-subs{padding:0 14px 12px}
.cp-kat-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.cp-kat-row .cp-in{flex:1;min-width:0}
.cp-sub-row{padding:7px 2px;font-size:14.5px;border-bottom:1px dashed var(--line,#e2e7ef)}
.cp-sub-code{font-family:monospace;font-size:12px;color:var(--muted);background:var(--surface,#eef1f6);
  border-radius:6px;padding:1px 6px;margin-right:6px}
.cp-hint{color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.5}
.md-card{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line,#d7dce6);border-radius:15px;
  padding:16px;margin-top:12px;text-decoration:none;color:var(--ink,#222);background:var(--surface,#fff);
  transition:border-color .15s, box-shadow .15s}
.md-card:active,.md-card:hover{border-color:var(--orange,#eda100);box-shadow:0 0 0 2px rgba(237,161,0,.2)}
.md-ic{font-size:30px}
.md-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left}
.md-tx b{font-size:16.5px;color:var(--navy,#1F3864)}
.md-tx small{color:var(--muted,#7a879c);font-size:13px;line-height:1.45}
.md-go{font-size:24px;color:var(--muted,#9aa7bd)}
html[data-theme="dark"] .cp-ok{background:#15311f;border-color:#2c5c3f;color:#7fd6a8}
html[data-theme="dark"] .cp-ok-code{background:#232a3d;color:#dfe6f5}
/* v1.18.7: Radlfahrer + „Diskette einlegen“-Anzeige im Titelbild */
#biker{transition:opacity .5s}
.bk-wheel{transform-box:fill-box;transform-origin:50% 50%;animation:bkspin 1.1s linear infinite}
@keyframes bkspin{to{transform:rotate(360deg)}}
#wbDisk{transition:opacity .45s}
#wbDisk.wb-on{opacity:1;animation:wbflick 7s steps(1) 1}
@keyframes wbflick{0%,4%{opacity:0}5%,100%{opacity:1}}
#wbDisk.wb-on #wbArrow{animation:wbarrow 1.1s ease-in-out infinite}
@keyframes wbarrow{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(5px);opacity:.35}}
@media (prefers-reduced-motion: reduce){
  .bk-wheel,#wbDisk.wb-on,#wbDisk.wb-on #wbArrow{animation:none}
}
/* v1.18.8: Handy – Eingabefelder nutzen die volle Breite
   (kurze Paare dürfen zu zweit nebeneinander stehen: .fld.sm) */
@media(max-width:820px){
  .frow,.lend-form,.aw-filter{gap:10px}
  .frow>.fld,.lend-form .fld,.aw-filter .fld,.erf-owner .frow>.fld,
  .erf-owner .loan-fields .fld{flex:1 1 100%!important;min-width:0!important;
    max-width:100%!important}
  /* zwei kurze Felder nebeneinander, wenn sie sich gut ausgehen */
  .frow>.fld.sm,.lend-form .fld.sm{flex:1 1 calc(50% - 5px)!important}
  /* Aktions-Knöpfe in Formularzeilen über die ganze Breite */
  .lend-form>button,.lend-form>.btn-orange,.aw-filter>button,.aw-filter>.btn-grey,
  .fb-add .fld>button,.fb-add .fld>.btn-orange{width:100%;align-self:stretch!important}
  .fld .with-btn{flex-wrap:nowrap}
}
/* v1.18.9: Mitteilungs-Zeilen als Ganzes anklickbar (statt Knopf weit rechts) */
.nc-row.nc-go{position:relative;cursor:pointer;border-radius:10px;
  padding-left:10px;padding-right:8px;margin-left:-10px;margin-right:-8px;
  transition:background .12s}
.nc-row.nc-go:hover,.nc-row.nc-go:focus-within{background:rgba(237,161,0,.09)}
.nc-stretch{position:absolute;inset:0;z-index:1;border-radius:inherit;
  text-decoration:none}
/* Knöpfe/Formulare in der Zeile bleiben eigenständig klickbar */
.nc-row.nc-go form,.nc-row.nc-go button,.nc-row.nc-go .nc-answer,
.nc-row.nc-go a:not(.nc-stretch){position:relative;z-index:2}
.nc-chev{margin-left:auto;align-self:center;color:var(--muted,#9aa7bd);
  font-size:24px;line-height:1;padding-left:6px}
.nc-row.nc-go:hover .nc-chev{color:var(--orange,#eda100)}
/* ---- Kontextmenü (Rechtsklick / langes Drücken) ---- */
.ctxmenu{position:fixed;z-index:300;background:var(--surface,#fff);border:1px solid var(--line,#d7dce6);
  border-radius:11px;box-shadow:0 14px 34px rgba(20,40,80,.26);padding:5px;min-width:210px;
  max-width:min(320px,92vw);overflow:hidden}
.ctx-title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted,#7a879c);padding:7px 11px 5px}
.ctxmenu a,.ctxmenu button{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  text-align:left;background:none;border:none;padding:10px 12px;border-radius:8px;font-size:13.5px;
  font-weight:600;color:var(--ink,#22314f);text-decoration:none;cursor:pointer;line-height:1.3}
.ctxmenu a:hover,.ctxmenu button:hover{background:rgba(237,161,0,.14)}
.ctxmenu form{margin:0}
.ctxmenu .ctx-del,.ctxmenu .ctx-del:hover{color:#c0392b}
.ctxmenu .ctx-del:hover{background:rgba(217,106,91,.14)}
.ctxmenu hr{border:none;border-top:1px solid var(--line,#e2e7f0);margin:4px 6px}
.ctx-src{display:none}
[data-ctx]{-webkit-touch-callout:none}

/* =====================================================================
   ESISO BUTTON-SYSTEM (v1.19) – eine Regel für alle Knöpfe
   Farblogik: 🟠 Orange = der Weg nach vorn (weiter, anlegen, suchen, filtern)
   🟢 Grün = einen Vorgang beenden (speichern, abschließen, zurückbuchen)
   🔴 Rot = NUR Löschen/Gefahr – niemals für „Abbrechen“!
   ⚪ Grau = neutral (abbrechen, zurück, öffnen, drucken)
   Faustregel: je Seite genau EIN orangener oder grüner Hauptknopf.
   ===================================================================== */
.btn-orange,.btn-green,.btn-red,.btn-danger,.btn-grey,.btn-ghost,.btn-primary,
.lbtn,.cp-btn,.cp-save,.nc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-weight:700;border-radius:9px;cursor:pointer;
  text-decoration:none;line-height:1.25;
  transition:filter .12s, box-shadow .12s, background .12s, border-color .12s;
  -webkit-tap-highlight-color:transparent}
.btn-orange,.btn-green,.btn-red,.btn-danger,.btn-grey,.btn-ghost,.btn-primary{
  min-height:38px;padding:9px 14px;font-size:13px}
.btn-sm{min-height:30px!important}
/* Rot: eine einzige Optik (btn-danger war ein zweiter Farbton) */
.btn-danger{background:var(--red);color:#fff;border:none}
/* Grau/Ghost: gleiche Optik, damit "neutral" überall gleich aussieht */
.btn-ghost{background:var(--bg);border:1.5px solid var(--line);color:var(--muted)}
/* Zustände – für ALLE gleich */
.btn-orange:hover,.btn-green:hover,.btn-red:hover,.btn-danger:hover,.btn-primary:hover{
  filter:brightness(1.07)}
.btn-grey:hover,.btn-ghost:hover{border-color:var(--orange);color:var(--ink)}
.btn-orange:active,.btn-green:active,.btn-red:active,.btn-danger:active,
.btn-grey:active,.btn-ghost:active,.btn-primary:active{transform:translateY(1px)}
.btn-orange:focus-visible,.btn-green:focus-visible,.btn-red:focus-visible,
.btn-danger:focus-visible,.btn-grey:focus-visible,.btn-ghost:focus-visible,
.btn-primary:focus-visible,.cp-btn:focus-visible,.lbtn:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(237,161,0,.45)}
.btn-orange[disabled],.btn-green[disabled],.btn-red[disabled],.btn-danger[disabled],
.btn-grey[disabled],.btn-ghost[disabled],.btn-primary[disabled]{
  opacity:.5;cursor:not-allowed;filter:none;transform:none}
/* Knopfreihen: überall derselbe Abstand */
.ph-actions,.log-acts,.nc-answer,.foot-actions,.cp-ok-acts{display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}
@media(max-width:820px){
  /* Am Handy sind Knöpfe größer (Daumen) */
  .btn-orange,.btn-green,.btn-red,.btn-danger,.btn-grey,.btn-ghost,.btn-primary,
  .btn-weg{
    min-height:44px;padding:11px 15px;font-size:14px}
  .btn-sm{min-height:34px!important;padding:7px 11px!important;font-size:12.5px!important}
}
/* Einheitliche fixe Kopfzeile auf allen Listen-Seiten (wie Forum/Einstellungen) */
.page-head.sticky-head{position:sticky;z-index:15;background:var(--surface,#eef1f6);
  box-shadow:0 8px 14px -10px rgba(20,40,80,.25)}
html[data-theme="dark"] .page-head.sticky-head{background:var(--surface,#161b26)}
@media(min-width:821px){
  .page-head.sticky-head{top:-26px;margin:-26px -26px 14px;padding:20px 26px 12px;border-radius:0}
}
@media(max-width:820px){
  .page-head.sticky-head{top:-14px;margin:-14px -12px 12px;padding:12px 12px 10px;border-radius:0}
}

/* =====================================================================
   ❓ HILFE / HANDBUCH (v1.19.2) – Kapitelliste links, Inhalt rechts
   ===================================================================== */
.hp-search{max-width:230px}
.hp-wrap{display:grid;grid-template-columns:268px 1fr;gap:18px;align-items:start}
.hp-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px;
  max-height:calc(100vh - 150px);overflow:auto;padding-right:4px}
.hp-tab{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;
  text-decoration:none;color:var(--ink,#22314f);border:1px solid transparent;line-height:1.25}
.hp-tab:hover{background:rgba(237,161,0,.10)}
.hp-tab.on{background:var(--surface,#fff);border-color:var(--line,#e2e7f0);
  box-shadow:0 2px 8px rgba(20,40,80,.07)}
.hp-tab.on .hp-ic{filter:none}
.hp-ic{font-size:17px;width:22px;text-align:center;flex-shrink:0}
.hp-tt{display:flex;flex-direction:column;min-width:0}
.hp-tt b{font-size:13px;font-weight:700}
.hp-tt small{font-size:10.5px;color:var(--muted,#7a879c);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hp-tab.soon{opacity:.62}
.hp-soon{margin-left:auto;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted,#7a879c);border:1px solid var(--line,#e2e7f0);
  border-radius:6px;padding:1px 5px;flex-shrink:0}
.hp-body h2{font-size:19px;color:var(--ink,#1F3864);margin:22px 0 8px}
.hp-body h2:first-child{margin-top:0}
.hp-body p{margin:0 0 10px;line-height:1.62}
.hp-body .fcard p:last-child{margin-bottom:0}
.hp-lead{font-size:14.5px;color:var(--muted,#5b6a86)}
.hp-shot{margin:12px 0 16px}
/* Bildschirmfotos nie groesser als noetig – auf breiten Schirmen wurden sie
   sonst riesig (Karl, 17.08.2026) */
.hp-shot img{width:100%;max-width:820px;display:block;border:1px solid var(--line,#e2e7f0);
  border-radius:11px;box-shadow:0 6px 18px rgba(20,40,80,.10);cursor:zoom-in}
.hp-shot figcaption{font-size:11.5px;color:var(--muted,#7a879c);margin-top:6px;
  padding-left:2px}
.hp-step{display:flex;gap:11px;margin:0 0 12px}
.hp-step .n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--blue,#1F3864);
  color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;
  justify-content:center}
.hp-step .tx{padding-top:2px;line-height:1.55}
.hp-tip{display:flex;gap:10px;background:rgba(237,161,0,.10);
  border:1px solid rgba(237,161,0,.35);border-radius:11px;padding:11px 13px;margin:12px 0}
.hp-tip .ic{font-size:17px;line-height:1.2}
.hp-warn{background:rgba(217,106,91,.10);border-color:rgba(217,106,91,.38)}
.hp-foot{display:flex;justify-content:space-between;gap:10px;margin:18px 0 4px}
.hp-zoom{position:fixed;inset:0;background:rgba(10,20,40,.86);z-index:400;
  display:none;align-items:center;justify-content:center;padding:22px;cursor:zoom-out}
.hp-zoom.on{display:flex}
.hp-zoom img{max-width:96vw;max-height:92vh;border-radius:10px;
  box-shadow:0 18px 48px rgba(0,0,0,.5)}
@media(max-width:900px){
  /* Am Handy zuerst das Kapitel, die Kapitelliste danach als Inhaltsverzeichnis */
  .hp-wrap{display:flex;flex-direction:column}
  .hp-body{order:1}
  .hp-nav{order:2;position:static;max-height:none;overflow:visible;
    border-top:1px solid var(--line,#e2e7f0);padding-top:12px;margin-top:6px}
  .hp-nav::before{content:'📚 Alle Kapitel';font-size:11px;font-weight:800;
    letter-spacing:.5px;text-transform:uppercase;color:var(--muted,#7a879c);
    padding:0 0 4px 2px}
  .hp-tt small{white-space:normal}
  .hp-search{max-width:none;width:100%}
}
.hp-cols{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:start}
.hp-shot-narrow img{max-width:210px}
@media(max-width:820px){ .hp-cols{grid-template-columns:1fr} .hp-shot-narrow img{max-width:100%} }
.hp-shot-card img{max-width:380px}

/* ---- ＋ „Neu anlegen …“-Fenster (gilt für alle Auswahlfelder) ---- */
.esnew-bg{position:fixed;inset:0;background:rgba(15,25,45,.55);z-index:420;
  display:flex;align-items:center;justify-content:center;padding:18px}
.esnew{background:var(--surface,#fff);border-radius:14px;padding:18px 18px 15px;
  width:min(380px,94vw);box-shadow:0 22px 54px rgba(15,25,45,.35)}
.esnew-h{font-size:15.5px;font-weight:800;color:var(--ink,#1F3864);margin-bottom:12px}
.esnew label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--muted,#7a879c);margin:8px 0 4px}
.esnew .in{width:100%;box-sizing:border-box}
.esnew .esnew-ic{width:74px;text-align:center;font-size:19px}
.esnew-err{color:#c0392b;font-size:12px;min-height:16px;margin-top:6px}
.esnew-b{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

/* ---- 💬 Feld-Erklärungen („?“ neben der Beschriftung) ---- */
.fhelp{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:6px;border-radius:50%;cursor:help;
  background:var(--line,#e2e7f0);color:var(--muted,#7a879c);
  font-size:10px;font-weight:800;line-height:1;position:relative;
  vertical-align:middle;text-transform:none;letter-spacing:0;flex-shrink:0}
.fhelp:hover,.fhelp.on{background:var(--orange,#E89A3C);color:#fff}
.fhelp-bub{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:260px;background:#1F3864;color:#fff;
  border-radius:9px;padding:8px 11px;font-size:11.5px;font-weight:500;
  line-height:1.45;text-align:left;letter-spacing:0;white-space:normal;
  box-shadow:0 8px 22px rgba(15,25,45,.28);opacity:0;visibility:hidden;
  transition:opacity .12s;z-index:350;pointer-events:none}
.fhelp-bub::after{content:'';position:absolute;top:100%;left:50%;
  transform:translateX(-50%);border:6px solid transparent;border-top-color:#1F3864}
.fhelp:hover .fhelp-bub,.fhelp.on .fhelp-bub,.fhelp:focus .fhelp-bub{opacity:1;visibility:visible}
@media(max-width:820px){
  .fhelp{width:19px;height:19px;font-size:12px}
  .fhelp-bub{max-width:min(280px,72vw)}
}
/* In Dialogen wird die Blase am Rand abgeschnitten (.modal hat overflow:auto).
   Dort hängt sie rechtsbündig und bleibt vollständig lesbar. (Karl, 22.08.2026) */
.modal .fhelp-bub{left:auto;right:-8px;transform:none;max-width:min(260px,calc(100% + 120px))}
.modal .fhelp-bub::after{left:auto;right:14px;transform:none}

/* =====================================================================
   📱 ANLEGEN AM HANDY (v1.19.6) – eine Regel für ALLE Eingabemasken
   Grundsatz: Jedes Feld nutzt die volle Breite, ist mindestens 44 px hoch
   (Daumenfläche) und der Knopf darunter ebenso. Nur ausdrücklich kurze
   Felder (.fld.sm, .kz-in, Mengen/Preise) dürfen sich eine Zeile teilen.
   ===================================================================== */
@media(max-width:820px){
  /* 1) Felder über die volle Breite – in JEDER Maske, auch in Dialogen */
  form .frow > .fld,
  form .fld,
  .sa-add .fld, .fb-add .fld, .lend-form .fld, .aw-filter .fld,
  .tm-sec .fld, .modal .fld, .wk-form .fld, .lg-form .fld{
    flex:1 1 100%!important;min-width:0!important;max-width:none!important}
  /* Ausnahmen: wirklich kurze Felder stehen zu zweit nebeneinander */
  form .fld.sm, .fld.sm{flex:1 1 46%!important}
  /* 2) Eingaben und Auswahlfelder daumengerecht */
  .in, input.in, select.in, textarea.in,
  .fld input, .fld select, .lg-form input, .lg-form select,
  .sa-add input, .sa-add select, .esnew .in{
    min-height:44px}
  textarea.in, .fld textarea{min-height:96px}
  /* 3) Knöpfe in Anlege-Masken: keine Miniaturen durch Inline-Größen */
  form .btn-orange, form .btn-green, form .btn-grey, form .btn-red,
  .sa-add button, .lg-form button, .esnew button, .modal-actions button,
  .tm-foot button{min-height:44px!important;padding:11px 16px!important;
    font-size:14px!important}
  .btn-sm{min-height:38px!important}
  /* 4) Kalkulations-Zeilen (Reparatur) und Einkaufs-Positionen stapeln */
  .pos-row, .buy-row, .sa-priceform{flex-wrap:wrap!important}
  .pos-row > *, .buy-row > *{flex:1 1 100%!important;min-width:0!important}
  .pos-row .pos-qty, .pos-row .pos-ep, .pos-row .pos-unit,
  .buy-row .b-qty, .buy-row .b-ep{flex:1 1 30%!important}
}

/* Auswahlliste am Handy: nie länger als der halbe Bildschirm, und
   „＋ Neu anlegen …“ klebt unten – sonst scrollt man ewig. */
@media(max-width:820px){
  .isel-panel{max-height:58vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;padding-bottom:0}
  .isel-panel .isel-new{position:sticky;bottom:0;background:var(--surface,#fff);
    border-top:1px solid var(--line,#e2e7f0);font-weight:700;
    box-shadow:0 -6px 12px rgba(20,40,80,.08);min-height:46px}
  .isel-opt{min-height:44px}
}

/* Am Handy öffnet sich eine Auswahlliste als Blatt von unten – so ist sie
   sofort da, wo der Daumen ist, statt irgendwo unterhalb des Feldes. */
@media(max-width:820px){
  .isel.open .isel-panel{position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;max-width:100%;max-height:72vh;border-radius:18px 18px 0 0;
    box-shadow:0 -12px 34px rgba(15,25,45,.28);z-index:330;padding-bottom:6px}
  .isel.open::after{content:'';position:fixed;inset:0;background:rgba(15,25,45,.35);
    z-index:320}
  .isel.open .isel-panel::before{content:'';display:block;width:44px;height:4px;
    border-radius:3px;background:var(--line,#e2e7f0);margin:8px auto 6px}
}

/* Am Handy klebt die Knopfleiste der Seite über der unteren Navigation.
   Sonst muss man bei langen Masken (Erfassen, Protokoll, Wiki) erst ans
   Ende scrollen, nur um „✓ Speichern“ zu drücken. */
@media(max-width:820px){
  .content .footer-note{margin-top:18px;padding-top:12px}
  .content .footer-note .foot-actions:not(:empty){
    position:fixed;left:0;right:0;bottom:72px;z-index:40;
    display:flex;gap:8px;justify-content:stretch;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -8px 20px rgba(20,40,80,.10)}
  .content .footer-note .foot-actions:not(:empty) > *{flex:1 1 0;
    justify-content:center;min-height:46px!important}
  /* Platz schaffen, damit nichts unter der Leiste verschwindet.
     Die genaue Höhe misst app.js (die Leiste kann ein- oder zweizeilig sein). */
  .content:has(.foot-actions:not(:empty)){padding-bottom:180px}
  .content .footer-note .foot-actions:not(:empty){flex-wrap:wrap}
  .content .footer-note .foot-actions:not(:empty) > *{flex:1 1 40%;
    font-size:13.5px!important;padding:11px 10px!important;white-space:nowrap}
  .content .footer-note .foot-text{font-size:11px;order:2}
}

/* Erfassen am Handy: zuerst die Stammdaten (Name, Kategorie) – dort fängt
   man an. Bilder und Zustand kommen danach; am PC bleibt alles wie gehabt. */
@media(max-width:820px){
  .erf-grid{display:flex;flex-direction:column}
  .erf-grid > div:nth-child(2){order:1}   /* Stammdaten zuerst */
  .erf-grid > div:nth-child(1){order:2}   /* dann Bilder + Eigentum */
  .erf-grid > div:nth-child(3){order:3}   /* zuletzt Zustand */
}

/* Am Handy darf KEIN Raster von einem breiten Kind aufgeblasen werden.
   Ohne min-height/min-width:0 wächst eine Spalte auf die Mindestbreite ihres
   Inhalts – die Seite ragt dann unsichtbar über den Bildschirm hinaus und
   Knöpfe am rechten Rand (z. B. „✓ Speichern“ im Lieferanten-Katalog) sind
   nicht mehr erreichbar. */
@media(max-width:820px){
  .grid2, .grid2 > *, .aw-grid, .aw-grid > *, .rz-grid, .rz-grid > *,
  .detail-grid, .detail-grid > *, .erf-grid, .erf-grid > *,
  .set-wrap, .set-wrap > *, .sup-split, .sup-split > *{min-width:0!important}
  .fcard, .card, .lib-card, .sa-add, .tm-sec{min-width:0;max-width:100%}
  .tf-inrow{flex-wrap:wrap}
  .tf-inrow > .in{flex:1 1 100%;min-width:0}
  .tf-inrow > .in[type=date], .tf-inrow > .in[inputmode=decimal]{flex:1 1 46%}
}

/* Nebeneinanderstehende Felder oben ausrichten – sonst „rutscht“ die
   Beschriftung des kürzeren Feldes nach unten und steht plötzlich neben
   dem Nachbarfeld statt über dem eigenen (z. B. Rückgabe-Frist /
   Erinnerung am Artikel). Knöpfe in der Zeile bleiben unten. */
.lend-form, .aw-filter{align-items:flex-start}
.lend-form > button, .aw-filter > button, .aw-filter > a{align-self:flex-end}
@media(max-width:820px){
  .lend-form > button, .aw-filter > button, .aw-filter > a{align-self:stretch;width:100%}
  /* beide Felder eines Paares gleich hoch, damit die Beschriftungen fluchten */
  .lend-form .fld, .frow > .fld, .aw-filter .fld{display:flex;flex-direction:column}
  .lend-form .fld > label, .frow > .fld > label, .aw-filter .fld > label{min-height:16px}
}

/* Handy-Knopfleiste: Symbole links, EIN Hauptknopf breit, „⋯“ rechts */
@media(max-width:820px){
  .content .footer-note .foot-actions.fa-mobil{flex-wrap:nowrap;gap:8px}
  .content .footer-note .foot-actions.fa-mobil > *{flex:0 0 auto}
  /* Nebenaktionen sind immer neutral – Farbe trägt nur der Hauptknopf. */
  .fa-ic{width:52px;min-width:52px;padding:0!important;font-size:20px!important;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface)!important;color:var(--ink)!important;
    border:1.5px solid var(--line)!important;box-shadow:none!important}
  .fa-ic:active{background:var(--bg)!important}
  .fa-ic form{display:contents}
  .foot-actions.fa-mobil form{flex:0 0 auto}
  .fa-haupt{flex:1 1 auto!important;min-width:0;font-size:15px!important;
    font-weight:800!important}
  .foot-actions.fa-mobil form:has(.fa-haupt){flex:1 1 auto!important}
  .fa-mehr{font-size:22px!important;letter-spacing:1px}
}

/* Löschen im Kontextmenü: im Dunkelmodus helleres Rot (Kontrast) */
html[data-theme="dark"] .ctxmenu .ctx-del,
html[data-theme="dark"] .ctxmenu .ctx-del:hover{color:#ff8a7a}

/* ⚡ Erfassungsmodus: Kategorien umbenennen und löschen (v1.20.0b) */
.cp-kat-row.cp-grow{flex:1 1 auto;min-width:0;margin-top:0}
.cp-sub-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.cp-sub-row .cp-sub-code{flex:0 0 auto;font-size:11px;padding:3px 5px}
.cp-sub-row .cp-in{min-width:0;padding:11px 10px}
.cp-sub-row .cp-btn{padding:11px 0;min-width:46px;flex:0 0 auto}
.cp-sub-row form{margin:0}
.cp-btn-red{background:#c0392b}
html[data-theme="dark"] .cp-btn-red{background:#8e2b20}
.cp-weg{background:rgba(63,169,114,.14);border:1px solid var(--green,#3FA972);
  border-radius:12px;padding:11px 13px;margin:12px 0;font-size:13.5px;
  color:var(--ink);line-height:1.45}

/* ================= ⧉ Gruppierte Inventaransicht (v1.20.1b) ============ */
.grp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 12px}
.grp-chip{background:rgba(232,154,60,.14);border:1px solid var(--orange);
  border-radius:99px;padding:6px 13px;font-size:13px;color:var(--ink)}
.grp-chip b{font-weight:800}
.grp-cnt{font-size:12.5px;color:var(--muted)}
.grp-all{margin-left:auto;background:var(--surface);border:1.5px solid var(--line);
  color:var(--ink);border-radius:10px;padding:7px 13px;font-size:13px;font-weight:700;
  cursor:pointer}
.grp-all:hover{border-color:var(--orange)}
.grp-clear{text-decoration:none;color:var(--muted);font-size:15px;padding:4px 8px;
  border-radius:8px;border:1px solid var(--line)}
.grp-clear:hover{color:var(--red);border-color:var(--red)}

.inv-groups{display:flex;flex-direction:column;gap:12px}
.gr{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden}
.gr-head{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
  list-style:none;background:linear-gradient(90deg,rgba(232,154,60,.10),transparent 55%)}
.gr-head::-webkit-details-marker{display:none}
.gr-head:hover{background:linear-gradient(90deg,rgba(232,154,60,.18),transparent 60%)}
.gr-ic{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;
  place-items:center;font-size:19px;background:var(--tile);color:var(--ink);
  letter-spacing:-2px}
.gr-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.gr-tx b{font-size:15.5px;color:var(--ink);font-weight:800}
.gr-tx small{font-size:12px;color:var(--muted)}
.gr-n{flex:0 0 auto;background:var(--navy);color:#fff;border-radius:99px;
  min-width:26px;text-align:center;padding:3px 9px;font-size:12.5px;font-weight:800}
.gr-arr{flex:0 0 auto;color:var(--muted);font-size:15px;transition:transform .15s}
details[open] > .gr-head > .gr-arr,
details[open] > .sgr-head > .gr-arr{transform:rotate(180deg)}
.gr-body{padding:0 10px 10px;border-top:1px solid var(--line)}

.sgr{margin-top:8px;border-left:3px solid var(--orange);border-radius:0 12px 12px 0;
  background:rgba(127,143,170,.05)}
.sgr-head{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
  list-style:none}
.sgr-head::-webkit-details-marker{display:none}
.sgr-tx{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgr-n{flex:0 0 auto;background:var(--tile);color:var(--ink);border-radius:99px;
  padding:2px 9px;font-size:12px;font-weight:800}
.sgr-body{padding:0 8px 8px;display:flex;flex-direction:column;gap:8px}
.gr-body > .lrow{margin:8px 2px}
html[data-theme="dark"] .sgr{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .gr-ic{background:var(--tile)}
/* „hidden“ muss auch gegen display:flex gewinnen */
.view-seg[hidden], .inv-views[hidden]{display:none!important}
/* Gruppen koennen dieselben drei Ansichten wie die flache Liste */
.inv-groups .view{display:none}
.inv-groups[data-view="table"] .view-table{display:block}
.inv-groups[data-view="list"] .view-list{display:flex}
.inv-groups[data-view="tiles"] .view-tiles{display:grid}
.inv-groups .view-table{margin:6px 0 4px}
.inv-groups .view-table table{width:100%}
.inv-groups .view-list{padding:6px 0}
.inv-groups .view-tiles{padding:8px 2px}
@media(max-width:820px){
  .inv-groups[data-view="table"] .view-table{display:none}
  .inv-groups[data-view="table"] .view-list{display:flex}
}
@media(max-width:820px){
  .gr-head{padding:11px 12px;gap:10px}
  .gr-ic{width:34px;height:34px;font-size:17px}
  .gr-tx b{font-size:15px}
  .grp-bar{gap:8px}
  .grp-chip{flex:1 1 100%;text-align:center}
  /* Karl 22.08.2026: zwei Zeilen statt drei – Zähler wandert neben die Knöpfe */
  .grp-all{margin-left:auto;flex:0 1 auto;min-height:44px}
  .grp-clear{flex:0 0 auto;min-height:44px;display:flex;align-items:center;
    justify-content:center;min-width:46px}
  .grp-cnt{flex:0 0 auto;font-size:12px}
  .sgr-body{padding:0 4px 8px}
  .gr-body{padding:0 6px 8px}
}

/* Gruppenansicht: die Zeilen kompakter, damit mehr Gruppen ins Bild passen */
.gr-body .lrow{box-shadow:none;border-radius:12px}
.gr-body .lrow .img{width:78px}
.gr-body .lrow .img img{min-height:74px}
.gr-body .lrow .img .ph{min-height:74px;font-size:22px}
.gr-body .lrow .bd{padding:9px 12px}
.gr-body .lrow .t{font-size:15px}
.gr-body .lrow .badges{margin:4px 0 5px}
.gr-body .lrow .meta.more{display:none}
.gr-body .lrow .right{padding:9px 12px}
@media(max-width:820px){
  /* am Handy: Bild schmal, Preisblock als Fusszeile statt schmaler Spalte */
  .gr-body .lrow{flex-wrap:wrap}
  .gr-body .lrow .img{width:62px}
  .gr-body .lrow .bd{flex:1 1 0;padding:8px 10px}
  .gr-body .lrow .right{width:100%;border-left:0;border-top:1px solid var(--line);
    flex-direction:row;align-items:center;justify-content:flex-end;gap:12px;
    padding:6px 12px}
  .gr-body .lrow .right .pblock{display:flex;align-items:baseline;gap:6px}
}

/* 🐞 Lagerort-Kürzel als Link: .loc hat navy Fläche, .loc-link setzte navy
   Schrift -> unsichtbar. In der Fläche bleibt die Schrift weiß. */
.loc.loc-link,html[data-theme="dark"] .loc.loc-link{color:#fff;
  border-bottom-color:rgba(255,255,255,.45)}
.loc.loc-link:hover{color:#ffd583;border-bottom-color:#ffd583}

/* Gruppen: Tabellenkopf zurückhaltender, er wiederholt sich je Untergruppe */
.inv-groups .view-table thead th{padding:6px 7px}
.inv-groups .view-table thead th a{font-size:10.5px}
.inv-groups .view-table table{border-radius:10px;overflow:hidden}

/* 🌙 Dunkelmodus: navy Schrift auf dunkler Fläche ist unlesbar.
   Diese Regeln setzen dieselben Stellen auf die helle Schriftfarbe.
   (gefunden mit /tmp/tdunkel.py – siehe Designsystem 11c) */
html[data-theme="dark"] .badge.b-test{color:var(--ink)}
html[data-theme="dark"] .bc-tx b{color:var(--ink)}
html[data-theme="dark"] .bericht .rbadge.b-mat{color:var(--ink)}
html[data-theme="dark"] .bg-head a{color:var(--ink)}
html[data-theme="dark"] .bh-code{color:var(--ink)}
html[data-theme="dark"] .bi-t{color:var(--ink)}
html[data-theme="dark"] .bo-txt b{color:var(--ink)}
html[data-theme="dark"] .box-head h1{color:var(--ink)}
html[data-theme="dark"] .bpost .bcost{color:var(--ink)}
html[data-theme="dark"] .bpost .bobj a{color:var(--ink)}
html[data-theme="dark"] .cp-photo-tx{color:var(--ink)}
html[data-theme="dark"] .crumb a:hover{color:var(--ink)}
html[data-theme="dark"] .fo-body a{color:var(--ink)}
html[data-theme="dark"] .isel-new{color:var(--ink)}
html[data-theme="dark"] .lg-acts button:hover{color:var(--ink)}
html[data-theme="dark"] .lg-add>summary{color:var(--ink)}
html[data-theme="dark"] .lg-row .kz{color:var(--ink)}
html[data-theme="dark"] .login-card .reg-choice b{color:var(--ink)}
html[data-theme="dark"] .lrow .right .val2{color:var(--ink)}
html[data-theme="dark"] .md-tx b{color:var(--ink)}
html[data-theme="dark"] .migsum b{color:var(--ink)}
html[data-theme="dark"] .migtbl td.new{color:var(--ink)}
html[data-theme="dark"] .migtbl thead th{color:var(--ink)}
html[data-theme="dark"] .pos-badge.pb-mat{color:var(--ink)}
html[data-theme="dark"] .rc-t{color:var(--ink)}
html[data-theme="dark"] .vers-sum .v{color:var(--ink)}
/* Links ohne eigene Klasse behalten sonst das Browser-Blau (#00e) */
html[data-theme="dark"] a:not([class]){color:#8fc0ff}
html[data-theme="dark"] a:not([class]):hover{color:#ffd583}
/* Inline gesetzte navy Schrift (Detailseite: Score „0/100“) */
html[data-theme="dark"] [style*="--navy"]{color:var(--ink)!important}

/* Symbol-Kacheln in Links: sonst erben sie das Browser-Blau der Links */
.sup-ic,.mini,.gr-ic{color:var(--ink)}

/* ================= 🚚 Lieferanten – Liste über die volle Breite ======= */
#supViews .sview-list{width:100%}
.sup-tbl{width:100%}
.sup-tbl table{width:100%;border-collapse:separate;border-spacing:0}
.sup-tbl tbody tr{cursor:pointer}
.sup-tbl tbody tr:hover{background:rgba(232,154,60,.09)}
.sup-tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.sup-tbl td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sup-tbl .cellname{display:flex;align-items:center;gap:10px;min-width:0}
.sup-tbl .cellname b{font-size:14.5px;color:var(--ink)}
.sup-tbl .sup-ic{width:30px;height:30px;font-size:15px;border-radius:9px;flex:0 0 auto}
.sup-web a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted);
  font-size:13px}
.sup-web a:hover{color:var(--orange-dark);border-bottom-color:var(--orange)}
.sup-infotd{color:var(--muted);font-size:13px}
.sup-act{width:44px;text-align:right}
.sup-act .iconbtn{text-decoration:none}
.sup-tbl tfoot .sup-sum td{background:var(--tile);border-bottom:0;font-size:13px;
  color:var(--ink)}
.sup-mob{display:none;flex-direction:column;gap:8px}
@media(max-width:820px){
  .sup-tbl{display:none}
  .sup-mob{display:flex}
}

/* 🖼️ Titelbild: volle Breite, aber gedeckelte Hoehe (Karl, 17.08.2026).
   Das SVG hat eine feste viewBox (1100 x 240) und wuerde auf einem breiten
   Schirm proportional mitwachsen. Deshalb ab 1200 px: Hoehe deckeln, das
   Motiv mittig in Originalproportion, und die Flaeche links und rechts mit
   demselben Himmel plus Horizontlinie fuellen. */
@media(min-width:1200px){
  .hero{position:relative;height:clamp(190px,15vw,270px);
    background:linear-gradient(180deg,#16233b 0%,#1F3864 60%,#33507f 100%)}
  .hero svg{height:100%;width:auto;max-width:none;margin:0 auto;position:relative;z-index:1}
  .hero::after{content:"";position:absolute;left:0;right:0;top:81.7%;height:2.5%;
    background:#E89A3C;opacity:.5;z-index:0}
}
/* Hilfe: Bilder und Textspalte auf Widescreen begrenzen, sonst laufen die
   Zeilen ueber die ganze Wand */
@media(min-width:1500px){
  .hp-body{max-width:1120px}
  .hp-shot img{max-width:760px}
  .hp-shot-card img{max-width:380px}
}

/* ================= 🖨️ Druckstudio: Etikettenblatt 10 × 15 cm ========== */
.et-wrap{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:18px;align-items:start}
.et-pick{padding:14px 14px 10px;position:sticky;top:12px}
.et-pick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:9px}
.et-pick-head b{font-size:15px;color:var(--ink)}
.et-cnt{font-size:12.5px;color:var(--muted)}
.et-pick-btns{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.et-pick-btns .btn-grey{padding:7px 12px;font-size:12.5px}
.et-list{max-height:60vh;overflow:auto;border-top:1px solid var(--line)}
.et-item{display:flex;align-items:center;gap:10px;padding:8px 4px;
  border-bottom:1px solid var(--line);cursor:pointer;font-size:13.5px}
.et-item:hover{background:rgba(232,154,60,.09)}
.et-item input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--orange)}
.et-nr{font-family:"SF Mono",Consolas,monospace;font-size:11.5px;color:var(--orange-dark);
  flex:0 0 auto}
.et-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-weight:600}
.et-lo{font-size:11px;color:var(--muted);flex:0 0 auto}

.et-prev-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.et-prev-head b{font-size:15px;color:var(--ink)}
.et-zoom{margin-left:auto;display:flex;gap:6px}
.et-zoom .btn-grey{padding:5px 11px;font-size:14px;line-height:1}
.et-hint{font-size:12.5px;color:var(--muted);margin-bottom:10px;line-height:1.5}
.et-leer{color:var(--muted);font-size:13.5px;padding:18px;text-align:center;
  border:1px dashed var(--line);border-radius:12px}
.et-sheets{--et-zoom:1;display:flex;flex-wrap:wrap;gap:16px}

/* Ein Blatt: exakt 100 × 150 mm, 10 Etiketten à 90 × 14 mm mittig */
.et-sheet{width:100mm;height:150mm;background:#fff;box-sizing:border-box;
  padding:5mm 0;display:flex;flex-direction:column;justify-content:flex-start;
  align-items:center;                 /* mittig, unabhaengig vom Bildschirmrahmen */
  gap:0;border:1px solid var(--line);box-shadow:var(--shadow);
  transform:scale(var(--et-zoom));transform-origin:top left;
  margin-bottom:calc((var(--et-zoom) - 1) * 150mm);
  margin-right:calc((var(--et-zoom) - 1) * 100mm)}
.et-lbl{width:90mm;height:14mm;box-sizing:border-box;display:flex;align-items:center;
  gap:2mm;padding:0.8mm 2mm;color:#111;background:#fff;overflow:hidden;
  border-bottom:0.2mm dashed #d8d8d8}
.et-sheet .et-lbl:last-child{border-bottom:0}
.et-qr{flex:0 0 auto;width:12mm;height:12mm;display:flex;align-items:center}
.et-qr svg{width:12mm;height:12mm;display:block;shape-rendering:crispEdges}
.et-tx{flex:1;min-width:0}
/* Etikettendrucker: reines Schwarz druckt am saubersten */
.et-l1{font-family:"SF Mono",Consolas,monospace;font-size:3mm;font-weight:800;
  letter-spacing:0.2mm;line-height:1.15;color:#000}
.et-l2{font-size:3mm;line-height:1.2;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:600;color:#000}
.et-rt{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:0.6mm;max-width:26mm}
.et-l3{font-size:2.4mm;color:#222;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:26mm}
.et-brand{font-size:2.2mm;letter-spacing:0.4mm;color:#555;font-weight:800}
.et-qr svg{color:#000;fill:#000}

@media(max-width:1100px){
  .et-wrap{grid-template-columns:1fr}
  .et-pick{position:static}
  .et-list{max-height:none}
  .et-sheets{--et-zoom:1}
}
@media(max-width:820px){
  .et-sheet{transform:scale(0.85);transform-origin:top left;
    margin-bottom:calc(-0.15 * 150mm);margin-right:calc(-0.15 * 100mm)}
}

/* Drucken: nur die Blätter, exakt in Originalgröße */
@media print{
  @page{size:100mm 150mm;margin:0}
  .et-tools,.et-pick,.et-prev-head,.et-hint,.et-leer,#etPool{display:none!important}
  .et-wrap{display:block}
  .et-sheets{--et-zoom:1!important;display:block;gap:0}
  .et-sheet{width:100mm;height:150mm;border:0;box-shadow:none;margin:0;
    transform:none!important;page-break-after:always;break-after:page}
  .et-sheet:last-child{page-break-after:auto;break-after:auto}
  .et-lbl{border-bottom:0}
}

/* 🤝 Verleih auf der Artikelseite: oben nur der Stand, unten alles zum Tun */
.lend-kurz{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lend-box{display:flex;flex-direction:column;gap:12px}
.lend-stat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lend-box .lend-form{margin:0}

/* ================= 📚 Bibliothek (v1.21.0b) ============================= */
.buch-cover{background:var(--bg)!important;display:flex;align-items:center;justify-content:center;
  height:auto!important;min-height:300px;padding:18px 0}
.buch-cover img{max-height:340px;max-width:74%;width:auto!important;height:auto!important;
  border-radius:3px 8px 8px 3px;box-shadow:0 10px 26px rgba(31,56,100,.32)}
.buch-cover ~ .thumbs .t img{object-fit:contain;background:#fff}
.thumbs .t.main{flex:0 0 58px;width:58px}
.buch-autor{font-size:14.5px;color:var(--muted);margin-top:4px}
.buch-autor b{color:var(--ink)}
/* Regal */
.regal{background:linear-gradient(180deg,#2b3d63,#1b294a);border-radius:12px;padding:16px 14px 10px;
  margin:8px 0}
.regal .brett{display:flex;align-items:flex-end;gap:6px;border-bottom:10px solid #8a6a3f;
  border-radius:0 0 4px 4px;padding-bottom:2px;min-height:180px;overflow-x:auto}
.regal .ruecken{width:36px;flex:0 0 auto;border-radius:3px 3px 0 0;color:#fff;padding:8px 4px;
  box-shadow:inset -4px 0 8px rgba(0,0,0,.30);cursor:pointer;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  transition:transform .12s}
.regal .ruecken:hover{transform:translateY(-6px)}
.regal .rk-t{writing-mode:vertical-rl;text-orientation:mixed;font-size:11px;font-weight:800;
  white-space:nowrap;overflow:hidden;max-height:132px;text-shadow:0 1px 2px rgba(0,0,0,.45);
  letter-spacing:.2px}
.regal .rk-a{writing-mode:vertical-rl;text-orientation:mixed;font-size:8.5px;opacity:.7;
  white-space:nowrap;overflow:hidden;max-height:44px;margin-top:4px}
.regal .ruecken.luecke{width:30px;background:repeating-linear-gradient(45deg,#33405c,#33405c 5px,#2a3550 5px,#2a3550 10px);
  height:110px;color:#8fa2c4;display:grid;place-items:center;font-size:15px;font-weight:800;
  border:1px dashed #55668c}
.regal-fuss{color:#9fb0cc;font-size:11.5px;padding:8px 2px 2px}
@media(max-width:820px){ .regal .brett{min-height:168px} .regal .ruecken{width:34px} }
/* Trefferliste */
.bk-treffer{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1.5px solid var(--line);
  border-radius:11px;margin-bottom:9px;background:var(--surface);cursor:pointer}
.bk-treffer:hover{border-color:var(--orange)}
.bk-treffer.on{border-color:var(--orange);background:rgba(232,154,60,.08)}
.bk-treffer img{width:44px;height:62px;object-fit:cover;border-radius:3px;flex:0 0 auto;
  box-shadow:0 3px 8px rgba(31,56,100,.25)}
.bk-tx{flex:1;min-width:0}
.bk-tx b{color:var(--ink);font-size:14px}
.pill-q{flex:0 0 auto;background:var(--tile);color:var(--navy);border-radius:99px;padding:3px 10px;
  font-size:11px;font-weight:800}

/* ── MOCKUP 2: Scan, Medien, Notizen, Ausweis, Forum ── */
.cam-mock{position:relative;border-radius:12px;overflow:hidden;background:#000;margin:6px 0 10px}
.cam-mock img{width:100%;display:block;opacity:.94}
.cam-ziel{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);width:56%;height:30%;
  border:3px solid #6EE7A0;border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,.28)}
.cam-hit{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);background:#2E6E4E;color:#fff;
  font-size:12.5px;font-weight:800;padding:4px 12px;border-radius:99px}
.med-row{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.med-row:last-of-type{border-bottom:0}
.med-ic{font-size:22px;flex:0 0 auto}
.med-tx{flex:1;min-width:0}
.med-tx b{color:var(--ink)}
.med-player{display:flex;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);
  border-radius:11px;padding:9px 12px;margin-top:8px}
.med-play{width:34px;height:34px;border-radius:50%;border:0;background:var(--orange);color:#fff;
  font-size:14px;cursor:pointer;flex:0 0 auto}
.med-bar{flex:1;height:7px;border-radius:99px;background:var(--line);overflow:hidden;min-width:0}
.med-fill{height:100%;background:var(--orange)}
.med-time{font-size:11.5px;color:var(--muted);font-family:monospace;flex:0 0 auto}
.note-blk{border:1px solid var(--line);border-radius:11px;margin-bottom:10px;overflow:hidden;background:var(--surface)}
.note-head{display:flex;justify-content:space-between;gap:8px;padding:7px 12px;background:var(--bg);
  border-bottom:1px solid var(--line);font-size:12px;flex-wrap:wrap}
.note-kind{font-weight:800;color:var(--ink)}
.note-body{padding:11px 13px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.note-img{max-width:220px;width:100%;border-radius:7px;box-shadow:0 4px 12px rgba(31,56,100,.2)}
.note-zitat{font-style:italic;border-left:4px solid var(--orange);padding-left:11px;color:var(--ink)}
.note-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.bew-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:820px){.bew-grid{grid-template-columns:1fr}}
.bew-box{border-radius:11px;padding:11px 13px;border:1px solid var(--line)}
.bew-box.gut{background:rgba(46,110,78,.08);border-color:rgba(46,110,78,.35)}
.bew-box.schlecht{background:rgba(139,58,58,.07);border-color:rgba(139,58,58,.3)}
.bew-l{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;color:var(--ink)}
.bew-t{font-size:13.5px;line-height:1.55;color:var(--ink)}
.pdf-drop{border:2px dashed var(--line);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--ink);background:var(--bg)}
/* Ausweis */
.ausweis-wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.ausweis{width:428px;max-width:100%;aspect-ratio:85.6/54;border-radius:14px;flex:0 0 auto;
  background-color:#1F3864;
  background-image:linear-gradient(135deg,#1F3864 0%,#2b4a80 55%,#1a2d52 100%);color:#fff;
  box-shadow:0 14px 34px rgba(31,56,100,.4);display:flex;flex-direction:column;padding:16px 20px 10px;position:relative;overflow:hidden}
/* (Der orange Zier-Kreis rechts oben ist raus – lag hinter dem QR und
   sah unruhig aus. Karl, 21.08.2026) */
.aw-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.aw-logo{font-size:21px;font-weight:900;letter-spacing:1px}
.aw-logo span{color:var(--orange)}
.aw-titel{text-align:right;font-size:11px;font-weight:800;letter-spacing:1.4px;line-height:1.35}
.aw-titel small{font-weight:400;letter-spacing:.4px;opacity:.75;text-transform:none}
.aw-body{display:flex;gap:14px;align-items:stretch;flex:1;min-width:0}
.aw-daten{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px}
.aw-f span{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.8px;opacity:.65}
.aw-f b{font-size:14px}
/* Der Name ist die Hauptinformation – deutlich größer (Karl, 21.08.2026) */
.aw-daten > .aw-f:first-child b{font-size:19px;line-height:1.15;letter-spacing:.2px}
.aw-f2{display:flex;gap:22px}
/* QR oben rechts, durch eine feine Linie von den Daten getrennt
   (Karl 21.08.2026, Variante B) */
.aw-qr{flex:0 0 auto;text-align:center;display:flex;flex-direction:column;
  justify-content:flex-start;align-items:flex-end;padding:2px 0 0 14px;
  border-left:1px solid rgba(255,255,255,.16)}
/* Beschriftung ist breiter als der Code – ohne align-items:flex-end würde
   der QR darin zentriert und säße nicht am rechten Kartenrand (Karl) */
.aw-qr small{text-align:right}
.aw-qrbox{width:84px;height:84px;background:#fff;border-radius:9px;display:grid;place-items:center;padding:5px;
  position:relative;z-index:2}   /* über dem Zier-Kreis – sonst stört der Scanner sich daran */
.aw-qrbox img{width:100%;height:100%;image-rendering:pixelated}
.aw-qr small{display:block;font-size:8.5px;opacity:.7;margin-top:4px;line-height:1.3}
.aw-fuss{font-size:8px;opacity:.55;letter-spacing:.5px;text-align:center;padding-top:6px}
.leih-fluss{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.lf-step{flex:1;min-width:150px;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:13px;text-align:center;font-size:13px;color:var(--ink)}
.lf-ic{font-size:28px;margin-bottom:5px}
.lf-arr{align-self:center;font-size:20px;color:var(--muted);flex:0 0 auto}
@media(max-width:820px){.lf-arr{display:none}.lf-step{min-width:100%}}
.sv-demo{display:flex;flex-direction:column;gap:8px}
.sv-line{border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:13.5px;color:var(--ink);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sv-line.ok{border-color:rgba(46,110,78,.4);background:rgba(46,110,78,.06)}
/* Forum Literatur */
.bdm-row{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:12px;
  padding:10px 12px;margin-bottom:9px;background:var(--surface)}
.bdm-row.on{border-color:var(--orange);background:rgba(232,154,60,.07)}
.bdm-row img{width:46px;height:64px;object-fit:cover;border-radius:4px;flex:0 0 auto;
  box-shadow:0 3px 8px rgba(31,56,100,.25)}
.bdm-tx{flex:1;min-width:0}
.bdm-tx b{color:var(--ink)}
.bdm-balken{height:7px;border-radius:99px;background:var(--line);margin-top:6px;overflow:hidden}
.bdm-balken div{height:100%;background:var(--orange);border-radius:99px}
.bdm-stimmen{text-align:center;flex:0 0 auto;color:var(--ink)}
.bdm-stimmen b{font-size:19px;display:block}
.bdm-stimmen small{font-size:10px;color:var(--muted)}
.fthread{display:flex;gap:11px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fthread:last-child{border-bottom:0}
.ft-ic{font-size:21px;flex:0 0 auto}
.ft-tx{flex:1;min-width:200px}
.ft-tx b{color:var(--ink);font-size:14px}
.ft-badge{flex:0 0 auto;background:var(--tile);color:var(--navy);border-radius:99px;padding:3px 11px;
  font-size:11px;font-weight:800}
.ft-badge.emp{background:rgba(232,154,60,.16);color:var(--orange-dark,#B96A18)}
.ft-badge.frage{background:rgba(46,110,78,.12);color:#2E6E4E}
.emp-post{border:1px solid var(--line);border-radius:13px;padding:13px 15px;background:var(--surface)}
.emp-kopf{display:flex;gap:9px;align-items:center;margin-bottom:10px;color:var(--ink)}
.avatar-sm{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;
  place-items:center;font-size:11px;font-weight:800;flex:0 0 auto}
.emp-buch{display:flex;gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line);
  border-radius:11px;padding:10px 12px;flex-wrap:wrap;color:var(--ink)}
.emp-buch img{width:50px;height:70px;object-fit:cover;border-radius:4px;flex:0 0 auto;
  box-shadow:0 3px 8px rgba(31,56,100,.25)}
.emp-text{font-size:13.5px;line-height:1.6;margin:10px 2px;color:var(--ink)}
.emp-fuss{display:flex;gap:8px;flex-wrap:wrap}
/* Dunkelmodus-Sicherheit für neue Bausteine */
html[data-theme="dark"] .bew-t,html[data-theme="dark"] .bew-l,html[data-theme="dark"] .note-body,
html[data-theme="dark"] .sv-line,html[data-theme="dark"] .emp-text,html[data-theme="dark"] .lf-step,
html[data-theme="dark"] .pdf-drop{color:var(--ink)}

/* Rezensionen */
.rz-schnitt{font-weight:400;color:var(--muted);font-size:12px;text-transform:none;letter-spacing:0;margin-left:auto}
.rz-post{border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:11px;background:var(--surface)}
.rz-post.mein{border-color:var(--orange)}
.rz-kopf{display:flex;gap:9px;align-items:center;margin-bottom:9px;flex-wrap:wrap;color:var(--ink)}
.rz-fuss{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.rz-neu{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:2px dashed var(--line);
  border-radius:11px;padding:10px 13px}
.rz-liste{display:flex;flex-direction:column;gap:11px}
.rz-item{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border-radius:13px;
  box-shadow:var(--shadow);padding:13px 15px;flex-wrap:wrap}
.rz-item img{width:56px;height:80px;object-fit:cover;border-radius:4px;flex:0 0 auto;
  box-shadow:0 4px 10px rgba(31,56,100,.25)}
.rz-mitte{flex:1;min-width:200px}
.rz-mitte b{color:var(--ink);font-size:15px}
.rz-kurz{font-size:13px;color:var(--ink);line-height:1.55;margin-top:4px}
.rz-rechts{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.lese-stat{display:flex;gap:11px;flex-wrap:wrap}
.ls-box{flex:1;min-width:96px;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:12px;text-align:center;color:var(--ink)}
.ls-box b{font-size:20px;display:block}
.ls-box small{color:var(--muted);font-size:11.5px}
html[data-theme="dark"] .rz-kurz,html[data-theme="dark"] .ls-box,html[data-theme="dark"] .rz-kopf{color:var(--ink)}

/* 📚 Bibliothek: Ansicht-Links wie Knöpfe + Kachel-Raster */
.view-seg a{border:none;background:none;padding:8px 12px;font-size:15px;color:var(--muted);
  cursor:pointer;line-height:1;text-decoration:none;display:block}
.view-seg a.on{background:var(--navy);color:#fff}
html[data-theme="dark"] .view-seg a.on{background:var(--orange);color:#fff}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:13px}
.bk-kachel{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:11px;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;
  align-items:center;text-align:center;transition:transform .12s}
.bk-kachel:hover{transform:translateY(-3px)}
.bk-kachel b{font-size:12.5px;line-height:1.3}
.bk-kachel small{color:var(--muted);font-size:11px}
.bk-cover{width:88px;height:124px;border-radius:3px 7px 7px 3px;overflow:hidden;background:var(--tile);
  display:grid;place-items:center;font-size:34px;box-shadow:0 5px 12px rgba(31,56,100,.22)}
.bk-cover img{width:100%;height:100%;object-fit:cover}
.regal .ruecken{text-decoration:none}
.aw-qrbox svg{width:100%;height:100%}
@media print{
  .sidebar,.topbar,.footer-note,.fcard.no-print,.page-head,.toolbar{display:none!important}
  .main{height:auto!important;overflow:visible!important}
  .content{overflow:visible!important;padding:0!important}
}
/* 👥 Echo der anderen neben dem Lesestatus: Bewertung + wie viele es kennen
   (Karl, 23.08.2026 – „nur anzeigen wie viele andere Nutzer es schon gelesen
   haben und die Gesamtbewertung"). Zahlen, keine Namen. */
.buch-echo{display:inline-flex;align-items:center;gap:6px;background:var(--tile);
  color:var(--navy);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700;
  text-decoration:none;white-space:nowrap}
a.buch-echo:hover{background:rgba(232,154,60,.18);color:var(--orange-dark)}
.buch-echo .stars{color:var(--yellow);font-size:12.5px;letter-spacing:.5px}
.buch-echo .be-n{font-weight:400;color:var(--muted)}
.buch-echo.leer{background:transparent;border:1px dashed var(--line);color:var(--muted);
  font-weight:400}
html[data-theme="dark"] .buch-echo{background:rgba(255,255,255,.07);color:var(--ink)}
html[data-theme="dark"] .buch-echo .be-n{color:var(--muted)}
.lese-sel{border:1.5px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px;
  background:var(--surface);color:var(--ink);cursor:pointer}
details.note-form>summary::-webkit-details-marker,details.rz-neu>summary::-webkit-details-marker{display:none}

/* 🧭 Erfassungs-Assistent (nur beim Neu-Erfassen) */
.wiz-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  background:var(--surface);border-radius:13px;box-shadow:var(--shadow);padding:11px 15px}
.wz-chip{display:flex;gap:8px;align-items:center;border:1.5px solid var(--line);background:var(--bg);
  border-radius:99px;padding:6px 13px 6px 7px;font-size:12.5px;font-weight:700;color:var(--muted);
  cursor:pointer;transition:.15s}
.wz-chip b{width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink);
  display:grid;place-items:center;font-size:11.5px}
.wz-chip.on{border-color:var(--orange);background:rgba(232,154,60,.1);color:var(--ink)}
.wz-chip.on b{background:var(--orange);color:#fff}
.wz-chip.done{color:var(--ink)}
.wz-chip.done b{background:#2E6E4E;color:#fff}
.wz-chip.done b::before{content:"✓"}
.wz-chip.done b{font-size:0}
.wz-chip.done b::before{font-size:11.5px}
.wz-chip:disabled{opacity:.5;cursor:default}
.wz-pfeil{color:var(--muted);font-size:14px;flex:0 0 auto}
.wstep[hidden]{display:none!important}
.wiz-flow .wstep{max-width:980px;margin:0 auto}
.wiz-nav{display:flex;justify-content:space-between;gap:10px;margin:2px auto 18px;max-width:980px}
.wiz-nav .btn-orange,.wiz-nav .btn-green{padding:11px 26px;font-size:14px}
.wiz-fehler{background:rgba(139,58,58,.08);border:1px solid rgba(139,58,58,.35);color:#8B3A3A;
  border-radius:10px;padding:9px 13px;font-size:13px;font-weight:700;margin-top:10px}
html[data-theme="dark"] .wiz-fehler{color:#e89a9a}
.wz-zwei{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:900px){.wz-zwei{grid-template-columns:1fr}
  .wiz-bar{gap:5px;padding:9px 10px}
  .wz-chip span{display:none}
  .wz-chip.on span{display:inline}
}
/* Bearbeiten: alle Schritte untereinander in zwei Spalten */
/* ═══════════════════════════════════════════════════════════════════
   ✏️ FORMULAR-LOGIK (Karl, 23.08.2026: „überlege dir eine durchgängige
   Logik wie die Bereiche und Felder darstellst")

   Zwei Ebenen, zwei Regeln – mehr nicht:

   1. BEREICHE (die Karten) fließen in Spalten von MINDESTENS 560px.
      Der Browser entscheidet, wie viele hineinpassen, und gleicht die
      Höhen aus. Keine Karte wird zerschnitten (break-inside).
      → 1850px = 2 Spalten à ~775px, 1400px = 2 à ~550px, 1100px = 1.

   2. FELDER in einer Karte liegen in einem Raster, dessen Spalten
      mindestens 200px breit sind. Passen zwei nebeneinander, stehen sie
      nebeneinander; sonst untereinander. Kein Feld wird je gequetscht,
      nichts scrollt seitlich.

   Vorher waren die Karten starr auf zwei Spalten verteilt (bis zu 911px
   leere Fläche) und die Felder mit festen Flex-Breiten – in schmalen
   Spalten standen dann zwei gequetschte Felder nebeneinander.
   ═══════════════════════════════════════════════════════════════════ */
.erf-voll{display:block;column-width:520px;column-gap:22px}
.erf-voll .wstep{display:contents}
.erf-voll .fcard{break-inside:avoid;-webkit-column-break-inside:avoid;
  page-break-inside:avoid;margin:0 0 18px}
.erf-voll .wstep > *:first-child{margin-top:0}
.erf-voll .wz-zwei{grid-template-columns:1fr}
@media(max-width:1000px){.erf-voll{column-width:auto;column-count:1}}

/* Regel 2 – gilt im Assistenten UND beim Bearbeiten, damit beide Wege
   gleich aussehen. Jede Karte ist ihr eigener Messrahmen. */
.erf-voll .fcard,.wiz-flow .fcard{container-type:inline-size}
.erf-voll .frow,.wiz-flow .frow{display:grid;gap:12px;margin-bottom:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.erf-voll .frow > .fld,.wiz-flow .frow > .fld{flex:none;min-width:0}
/* Felder, die von Haus aus eine feste Breite haben (Baujahr, Band, Heft …),
   dürfen im Raster mitwachsen statt schmal stehenzubleiben. */
.erf-voll .frow > .fld[style*="flex:0 0"],
.wiz-flow .frow > .fld[style*="flex:0 0"]{flex:none;width:auto}
/* Eine Karte unter 430px: alles strikt untereinander. */
@container (max-width: 430px){
  .frow{grid-template-columns:1fr !important}
}

/* 📷 Bilder-Schritt: Raster mit Größenregler + Cover-Karte rechts */
/* Cover + Bilder folgen derselben Regel wie alle Felder: nebeneinander,
   solange beide mindestens 300px bekommen – sonst untereinander. Vorher
   waren 320px fest fürs Cover reserviert, wodurch die Bilder-Karte in
   einer schmalen Spalte auf 215px zusammenfiel (Karl, 23.08.2026). */
.bild-grid{display:grid;gap:18px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.drop.drop-kompakt{height:150px;max-width:420px}
.drop-prev{object-fit:contain;background:var(--bg)}
.thumb-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.thumb-regler{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.thumb-regler input[type=range]{width:130px;accent-color:var(--orange)}
.thumbs.skal{--tg:88px}
.thumbs.skal .t{width:var(--tg);height:var(--tg)}
.thumbs.skal .t img{object-fit:contain;background:var(--bg)}
.cover-halter{border-radius:6px 12px 12px 6px;background:var(--bg);border:1px solid var(--line);
  min-height:240px;display:grid;place-items:center;overflow:hidden;padding:10px}
.cover-halter img{max-width:100%;max-height:300px;border-radius:3px 8px 8px 3px;
  box-shadow:0 8px 20px rgba(31,56,100,.3)}
.cover-leer{text-align:center;color:var(--muted);font-size:34px}
.cover-leer small{font-size:12px;display:block;margin-top:4px}
/* 🔎 Quellen-Anhakerl der Buchsuche */
.bk-quellen{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:2px 0 10px}
.bkq{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--ink);cursor:pointer;font-weight:600}
.bkq input{accent-color:var(--orange);width:16px;height:16px}

/* 📖 Mini-Cover vor dem Titelfeld (Schritt 1) */
.titel-zeile{display:flex;gap:10px;align-items:center}
.titel-zeile .in{flex:1;min-width:0}
.titel-cover{flex:0 0 38px;width:38px;height:54px;border-radius:2px 5px 5px 2px;overflow:hidden;
  box-shadow:0 3px 9px rgba(31,56,100,.3);background:var(--tile)}
.titel-cover img{width:100%;height:100%;object-fit:cover}

/* 📖 Durchgängige Titelzeile im Assistenten */
.wiz-titel{display:flex;gap:10px;align-items:center;background:var(--surface);border-radius:11px;
  box-shadow:var(--shadow);padding:8px 14px;margin:-6px 0 14px;font-size:14px;color:var(--ink)}
.wiz-titel .titel-cover{flex:0 0 26px;width:26px;height:37px}
/* 🛒 Kaufquellen-Tabelle auf der Buchseite */
.kauf-tbl{width:100%;border-collapse:collapse}
.kauf-tbl td{padding:7px 4px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink);vertical-align:middle}
.kauf-tbl tr:last-child td{border-bottom:0}
.kauf-tbl td small{display:block;color:var(--muted);font-size:11px}
.kauf-tbl td:last-child{text-align:right;white-space:nowrap}

/* 🔄 Cover-Vorschläge zum Auswählen */
.cover-vorschlaege{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:10px}
.cv-kachel{border:2px solid var(--line);border-radius:8px;background:var(--bg);padding:5px;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;align-items:center;transition:.12s}
.cv-kachel img{width:100%;height:92px;object-fit:contain}
.cv-kachel small{font-size:9.5px;color:var(--muted);font-weight:700}
.cv-kachel:hover{border-color:var(--orange)}
.cv-kachel.on{border-color:var(--orange);background:rgba(232,154,60,.1)}
.cv-kachel.on small{color:var(--orange-dark,#B96A18)}
/* 🖱️ Drag & Drop */
.drag-über{outline:3px dashed var(--orange);outline-offset:3px;background:rgba(232,154,60,.07)!important}
/* 🌐 Infos aus dem Netz (DNB-Datensatz) */
.netz-tbl{width:100%;border-collapse:collapse}
.netz-tbl th{width:130px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);padding:7px 10px 7px 2px;vertical-align:top;font-weight:700}
.netz-tbl td{font-size:13.5px;color:var(--ink);padding:7px 2px;line-height:1.5}
.netz-tbl tr{border-bottom:1px solid var(--line)}
.netz-tbl tr:last-child{border-bottom:0}
/* 📚 Rückseiten-Markierung in der Galerie */
.gal-thumb.ist-hinten::after{content:"RÜCKSEITE";position:absolute;bottom:2px;left:50%;
  transform:translateX(-50%);background:var(--navy);color:#fff;font-size:7px;font-weight:800;
  padding:1px 5px;border-radius:4px;letter-spacing:.5px}
/* 📷 OCR am Klappentext */
.ocr-zeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ocr-bildwahl{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ocr-b{border:2px solid var(--line);border-radius:8px;background:var(--bg);padding:4px;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;align-items:center}
.ocr-b img{width:64px;height:64px;object-fit:cover;border-radius:5px}
.ocr-b small{font-size:9px;color:var(--navy);font-weight:800}
.ocr-b:hover{border-color:var(--orange)}
/* 📚 Buchsuche im Handy-Erfassungsmodus */
.cp-hint{font-size:12.5px;color:var(--muted);margin:6px 0}
.cp-treffer{display:flex;gap:10px;align-items:center;border:2px solid var(--line);border-radius:11px;
  background:var(--surface);padding:8px 10px;margin-top:8px;width:100%;cursor:pointer;text-align:left}
.cp-treffer img{width:38px;height:54px;object-fit:cover;border-radius:3px;flex:0 0 auto}
.cp-treffer span{min-width:0}
.cp-treffer b{display:block;font-size:13.5px;color:var(--ink)}
.cp-treffer small{color:var(--muted);font-size:11.5px}
.cp-treffer:active{border-color:var(--orange)}

/* 🛋️ Leseecke: Kaminszene mit flackerndem Feuer */
.lese-ecke{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px;position:relative}
.lese-ecke svg{display:block;width:100%;height:150px}
.lese-ecke .le-text{position:absolute;left:14px;bottom:10px;right:14px;color:#e9eef8;
  font-size:12.5px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
@media(max-width:700px){.lese-ecke svg{height:120px}.lese-ecke .le-text{font-size:11.5px}}
.le-feuer .fl{transform-origin:1015px 140px}
.le-feuer .f1{animation:flacker1 1.1s ease-in-out infinite}
.le-feuer .f2{animation:flacker2 .8s ease-in-out infinite}
.le-feuer .f3{animation:flacker3 .6s ease-in-out infinite}
.le-schein{animation:lampenschein 2.6s ease-in-out infinite}
@keyframes flacker1{0%,100%{transform:scaleY(1) scaleX(1);opacity:.95}
  40%{transform:scaleY(1.08) scaleX(.96);opacity:1}70%{transform:scaleY(.94) scaleX(1.04);opacity:.88}}
@keyframes flacker2{0%,100%{transform:scaleY(1);opacity:.9}50%{transform:scaleY(1.14) scaleX(.94);opacity:1}}
@keyframes flacker3{0%,100%{transform:scaleY(1);opacity:.95}30%{transform:scaleY(.85);opacity:.8}
  60%{transform:scaleY(1.12);opacity:1}}
@keyframes lampenschein{0%,100%{opacity:.14}50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.le-feuer .fl,.le-schein{animation:none}}

/* ⭐ Rezensionen: Übersichtstabelle + aufgeräumtes Formular */
.rz-uebersicht{width:100%;border-collapse:collapse}
.rz-uebersicht th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);padding:6px 8px;border-bottom:1.5px solid var(--line)}
.rz-uebersicht td{padding:7px 8px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--line)}
.rz-uebersicht tr:last-child td{border-bottom:0}
.rz-uebersicht .avatar-sm{display:inline-grid;vertical-align:middle;margin-right:6px}
.rz-neu{display:block}
.rz-form{margin-top:14px;width:100%}
.rz-form-kopf{display:grid;grid-template-columns:200px 200px;gap:14px;margin-bottom:12px}
.rz-form-txt{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.rz-form-kopf{grid-template-columns:1fr 1fr}.rz-form-txt{grid-template-columns:1fr}}
/* 📚 Ähnliche Bücher: Cover-Reihe mit kleinem Titel darunter */
.aehnlich-reihe{display:flex;gap:14px;flex-wrap:wrap}
.ae-buch{width:96px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);
  text-align:center;transition:transform .12s}
.ae-buch:hover{transform:translateY(-3px)}
.ae-cover{width:96px;height:134px;border-radius:3px 7px 7px 3px;overflow:hidden;background:var(--tile);
  display:grid;place-items:center;font-size:34px;box-shadow:0 5px 12px rgba(31,56,100,.24)}
.ae-cover img{width:100%;height:100%;object-fit:cover}
.ae-buch small,.ae-titel{font-size:11px;line-height:1.25;font-weight:700;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.ae-autor{font-size:10px;color:var(--muted)}
/* 🔭 Netz-Büchersuche + 📎 Anhang-Ablage */
.netzb-tbl{width:100%;border-collapse:collapse}
.netzb-tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);padding:7px 8px;border-bottom:1.5px solid var(--line)}
.netzb-tbl td{padding:8px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--line);vertical-align:middle}
.nb-links{display:flex;gap:6px;flex-wrap:wrap}
.nb-links a{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:3px 10px;
  font-size:11.5px;font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap}
.nb-links a:hover{border-color:var(--orange)}
html[data-theme="dark"] .nb-links a{color:var(--ink)}
.lit-drop{display:block;border:2px dashed var(--line);border-radius:11px;padding:14px;text-align:center;
  color:var(--muted);font-weight:700;cursor:pointer;background:var(--bg)}
.lit-drop:hover{border-color:var(--orange);color:var(--orange-dark,#B96A18)}
/* 📎 Anhänge im Forum-Beitrag */
.fo-anhaenge{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.fo-anh-bild img{max-width:180px;max-height:140px;border-radius:8px;box-shadow:0 3px 10px rgba(31,56,100,.25)}
.fo-anh-pdf{display:inline-flex;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--navy);text-decoration:none}
html[data-theme="dark"] .fo-anh-pdf{color:var(--ink)}

/* 🔍 Alles-Suche am Handy: Nummer/Lagerort/Score ausblenden – kein Abschneiden,
   Artikel + Details + Status bleiben (nur Tabellen mit 4+ Spalten betroffen) */
   ACHTUNG (Karl, 22.08.2026): NICHT für die Bücherei-Tabelle – dort hat sie in
   gruppierten Ansichten Titel, Autor UND Bewertung verschluckt, es blieben nur
   Cover + Status. Die Bücherei hat ihre eigene Spaltenregel weiter unten. */
@media(max-width:640px){
  .gr table.sortierbar:not(.buch-tbl) th:nth-child(n+3):nth-last-child(n+2),
  .gr table.sortierbar:not(.buch-tbl) td:nth-child(n+3):nth-last-child(n+2){display:none}
}

/* 📚 Bücherei: eingerückter Unterpunkt von Inventar (Karls Variante A) */
.nav a.nav-sub{padding-left:30px;font-size:13.5px}
.sidebar .nav a.nav-sub{padding-left:26px}

/* 📚 Reihen-Check: Band-Chips am Buch (grün = da, rot gestrichelt = fehlt) */
.reihe-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.rb-chip{border-radius:9px;padding:7px 12px;font-size:12px;font-weight:800;text-decoration:none;
  border:1.5px solid var(--line);color:var(--navy)}
.rb-chip.da{background:rgba(46,162,95,.12);color:#1F7A47;border-color:rgba(46,162,95,.4)}
.rb-chip.da.hier{outline:2px solid var(--orange);outline-offset:1px}
.rb-chip.fehlt{background:rgba(214,69,69,.07);color:#B23B3B;border-style:dashed;border-color:#D64545}
html[data-theme="dark"] .rb-chip.da{background:rgba(46,162,95,.18);color:#7BD9A5}
html[data-theme="dark"] .rb-chip.fehlt{background:rgba(214,69,69,.14);color:#F09A9A}

/* ⚠️ Dubletten-Warnung beim Erfassen */
.dup-warn{border:2px dashed #D64545;background:rgba(214,69,69,.06);border-radius:10px;
  padding:10px 14px;font-size:13px;margin:4px 0 10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
html[data-theme="dark"] .dup-warn{background:rgba(214,69,69,.12)}

/* 📋 Inventur */
.inv-balken{height:12px;border-radius:7px;background:var(--tile);overflow:hidden}
.inv-balken span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),#F2B968);border-radius:7px;transition:width .3s}

/* 📰 Zeitschriften: Heft-Raster je Jahrgang */
.heft-raster{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.hf-chip{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:13px;
  font-weight:800;text-decoration:none;border:1.5px solid var(--line);color:var(--navy)}
.hf-chip.da{background:rgba(46,162,95,.12);color:#1F7A47;border-color:rgba(46,162,95,.4)}
.hf-chip.da.hier{outline:2px solid var(--orange);outline-offset:1px}
.hf-chip.fehlt{background:rgba(214,69,69,.07);color:#B23B3B;border-style:dashed;border-color:#D64545}
html[data-theme="dark"] .hf-chip.da{background:rgba(46,162,95,.18);color:#7BD9A5}
html[data-theme="dark"] .hf-chip.fehlt{background:rgba(214,69,69,.14);color:#F09A9A}

/* 🗂️ Unterkategorie-Fenster mit Kategorien-Baum */
.subneu-baum{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px}
.sn-kat{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:0;
  background:none;padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:800;color:var(--ink);cursor:pointer}
.sn-kat:hover{background:var(--bg)}
.sn-kat.on{background:var(--orange);color:#fff}
.sn-kat small,.sn-sub small{font-family:monospace;font-size:11px;color:var(--muted)}
.sn-kat.on small{color:#fff}
.sn-sub{display:flex;justify-content:space-between;padding:2px 10px 2px 24px;font-size:12.5px;color:var(--muted)}

/* 📝 Lesenotizen in der schmalen rechten Spalte: Formular umbrechen statt abschneiden */
#notizen .note-form .frow{flex-wrap:wrap}
#notizen .note-form select.in,#notizen .note-form input.in{min-width:0;width:100%}

/* 📚 Bücherei-Tabelle: schmal, schön, Zeilenhöhe einstellbar (--tzh) */
.btz-kopf{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.btz-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);
  color:var(--navy);font-size:15px;font-weight:800;cursor:pointer}
.btz-btn:hover{background:var(--bg)}
html[data-theme="dark"] .btz-btn{color:var(--ink)}
.buch-tbl{--tzh:42px}
.buch-tbl td{padding:4px 10px;height:var(--tzh);transition:height .15s}
.buch-tbl .bt-cover{padding:3px 4px 3px 10px}
.buch-tbl .bt-cover img{height:calc(var(--tzh) - 8px);width:auto;max-width:44px;border-radius:4px;
  object-fit:contain;display:block;box-shadow:0 2px 6px rgba(31,56,100,.25);transition:height .15s}
.buch-tbl .bt-ph{display:grid;place-items:center;height:calc(var(--tzh) - 8px);width:30px;
  background:var(--tile);border-radius:4px;font-size:14px}
.buch-tbl tbody tr:hover{background:var(--bg)}
.buch-tbl .stars{font-size:12.5px}

/* ⇅ Sortier-Pfeile an Tabellen-Überschriften (Alles-Suche, Bücherei, Inventur) */
table.sortierbar th[data-s]{user-select:none;white-space:nowrap}
table.sortierbar th.sort-auf::after{content:" ▲";font-size:9px}
table.sortierbar th.sort-ab::after{content:" ▼";font-size:9px}

/* 🪪 Ausweis-Knopf & -Fenster: überall in der App (Karl, 20.08.2026) */
.aw-taste{font-size:17px;align-items:center;justify-content:center;padding:0}  /* v1.50.1b: 🪪 klebte links (hide-mobile = flex ohne Zentrierung) */
.cp-aw{margin-left:auto;margin-right:8px;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer;display:grid;place-items:center}
.aw-modal{padding:24px 14px;align-items:center}
.aw-modal .modal.aw-modal-in{width:min(470px,100%);padding:16px}
.aw-lade{color:var(--muted);font-size:13px;padding:26px 0;text-align:center}
/* Karte im Fenster: volle Breite, QR schön groß zum Vorzeigen */
.aw-modal .ausweis{width:100%;margin:0 auto}
.aw-modal .aw-qr{z-index:2}
/* QR wie auf der echten Karte – wächst mit der Kartenbreite mit, nie klobig
   (Karl 21.08.2026: „war vorher schöner“) */
.aw-modal .aw-qrbox{width:clamp(68px,20%,92px);height:auto;aspect-ratio:1}
.aw-modal .aw-qrbox svg{width:100%;height:100%}
.aw-hinweis{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.5;text-align:center}
.aw-hinweis.warn{color:#B23B3B;font-weight:700}
.aw-leer{text-align:center;padding:22px 10px}
.aw-modal-fuss{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:520px){
  .aw-modal{padding:14px 10px}
  /* am Handy bleibt die Karte proportional – keine Sondergröße nötig */
}
/* 🔍 QR antippen = bildschirmfüllend (fürs Scannen am Tresen) */
.aw-modal .aw-qrbox{cursor:zoom-in}
.qr-voll{position:fixed;inset:0;z-index:300;background:#fff;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}
.qr-voll.on{display:flex}
.qr-voll .qv-box{width:min(78vw,78vh);aspect-ratio:1}
.qr-voll .qv-box svg{width:100%;height:100%}
.qr-voll .qv-nr{font-family:monospace;font-size:19px;font-weight:800;color:#1F3864;letter-spacing:1px}
.qr-voll .qv-zu{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:12px;
  border:1px solid #E3E9F2;background:#fff;color:#1F3864;font-size:18px;cursor:pointer}

/* ══════════════════════════════════════════════════════════════════
   📐 Ansichts-Feinschliff v1.22.0b (Sweep iPhone → 4K, Karl 21.08.2026)
   ══════════════════════════════════════════════════════════════════ */

/* 1 · Scanner: fünf Modus-Knöpfe passen am Handy nicht in eine Zeile */
.scan-mode{flex-wrap:wrap}
.sm-btn{flex:1 1 calc(50% - 8px);min-width:130px}
@media(min-width:900px){ .sm-btn{flex:1 1 auto;min-width:0} }

/* 2 · Sehr breite Bildschirme (WQHD/4K): Inhalt begrenzen, sonst
   laufen Zeilen über 2000px und werden unlesbar */
@media(min-width:2200px){
  .content > *{max-width:2100px;margin-left:auto;margin-right:auto}
  .content .page-head{max-width:2100px}
  .content > .hero{max-width:none}   /* Titelbild bleibt über die volle Breite (Karl) */
}

/* 3 · Bücherei-Tabelle auf schmalen Bildschirmen: nur die wichtigen Spalten
   (Cover, Titel, Autor, Bewertung, Status). Bis 1050px, weil ab 641px die
   Seitenleiste wieder Platz frisst – gemessen: 767px Tabelle in 606px Fenster
   ergab sonst 161px Schieberei innerhalb der Tabelle (Karl, 22.08.2026). */
@media(max-width:1050px){
  .buch-tbl th:nth-child(2),.buch-tbl td:nth-child(2),   /* Nummer */
  .buch-tbl th:nth-child(5),.buch-tbl td:nth-child(5),   /* Verlag */
  .buch-tbl th:nth-child(6),.buch-tbl td:nth-child(6),   /* Jahr */
  .buch-tbl th:nth-child(7),.buch-tbl td:nth-child(7){display:none}  /* Reihe */
}
/* iPhone-Breite: auch die Bewertung weicht, damit Titel + Autor ohne
   seitliches Schieben lesbar bleiben (gemessen: sonst 68px Überstand) */
@media(max-width:480px){
  .buch-tbl th:nth-child(8),.buch-tbl td:nth-child(8){display:none}
}

/* 4 · Fußzeilen-Links (Impressum/AGB) waren nur 12px hoch – zu klein zum Tippen */
.footer-note a{display:inline-block;padding:6px 2px}

/* 5 · Kleine Icon-Knöpfe in Listen: am Handy auf Fingergröße */
@media(max-width:820px){
  .gal-thumb form button,.note-act .icon-btn,.fo-del button{min-width:34px;min-height:34px}
  .view-seg a{min-height:36px;display:inline-flex;align-items:center}
}

/* 6 · Am Handy dürfen Raster-Spalten nie breiter werden als der Bildschirm
   (Grid-Spalten wachsen sonst auf min-content – das schnitt im Profil
   die rechte Kartenhälfte ab) */
@media(max-width:820px){
  .form-grid,.prof-grid,.detail-grid,.grid2,.aw-grid{grid-template-columns:1fr!important}
  .form-grid>*,.prof-grid>*,.detail-grid>*,.grid2>*,.aw-grid>*{min-width:0}
  .fcard,.card{max-width:100%;overflow-wrap:anywhere}
  .frow{flex-wrap:wrap}
  .fld{min-width:0}
  .btn-orange,.btn-green,.btn-grey,.btn-red,.btn-danger{max-width:100%;white-space:normal}
}

/* 7 · Fingerfreundliche Mindestgrößen am Handy */
@media(max-width:820px){
  .rt-toolbar button{min-height:34px;min-width:34px}
  .aw-star{min-height:32px;min-width:26px;font-size:19px}
  .lese-sel,select.in,input.in{min-height:38px}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px}
  .lg-acts button,.set-list button{min-height:34px;min-width:34px}
}

/* ✎ Forum: Beitrag bearbeiten */
.fo-edit{margin-top:8px}
.fo-edit textarea{width:100%;font-family:inherit;font-size:14px}
.fo-edit.hide{display:none}

/* 📚 Ausweis-Fenster: mein Ausleihkonto */
.aw-konto{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.aw-konto-kopf{font-size:10.5px;letter-spacing:.8px;color:var(--muted);font-weight:800;
  text-transform:uppercase;margin-bottom:6px}
.aw-leih{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:7px 10px;border-radius:9px;background:var(--bg);margin-bottom:5px;
  text-decoration:none;color:var(--ink);font-size:13px}
.aw-leih .al-titel{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-leih .al-frist{color:var(--muted);font-size:12px;flex:0 0 auto}
.aw-leih.ueber{background:rgba(214,69,69,.1)}
.aw-leih.ueber .al-frist{color:#B23B3B;font-weight:700}

/* ══ 📦 Ausmustern statt Löschen (v1.23.0b) ══ */
.ausg-banner{display:flex;gap:12px;align-items:center;background:var(--tile);
  border:1px solid var(--line);border-left:5px solid var(--muted);border-radius:12px;
  padding:11px 15px;margin-bottom:14px}
.ausg-banner .ob-txt b{display:block;font-size:14px}
.ausg-banner .ob-txt span{font-size:12.5px;color:var(--muted)}
.weg-box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.weg-box.weg-rot{border-color:rgba(214,69,69,.45);background:rgba(214,69,69,.05)}
.weg-kopf{font-weight:800;font-size:14px;color:var(--ink)}
.weg-gruende{display:flex;flex-direction:column;gap:5px}
.weg-grund{display:flex;gap:9px;align-items:center;font-size:13.5px;cursor:pointer;
  padding:6px 9px;border-radius:8px}
.weg-grund:hover{background:var(--bg)}
.weg-grund input{width:18px;height:18px;flex:0 0 auto}
/* ausgemusterte Zeilen: ausgegraut, aber lesbar */
.ist-ausg{opacity:.55}
.ist-ausg img{filter:grayscale(1)}
.pill-ausg{background:var(--tile);color:var(--muted);border:1px solid var(--line)}

/* ═══ 🎁 Weggabe aus dem Verleih (v1.47.0b) ═══════════════════════════
   Eine Ausleihe endet nicht immer mit einer Rückgabe. Verschenkt und
   verkauft bekommen deshalb eine eigene Farbe – nicht das Grün der
   Rückgabe (es kam ja nichts zurück) und nicht das Grau des blossen
   Aussortierens (es steckt eine Person dahinter). Violett ist in der
   App sonst nirgends vergeben, verwechselt sich also mit nichts.
   Kontrast gemessen: 5,9:1 hell, 7,4:1 dunkel – beide über 4,5:1. */
.pill-gift{background:#EDE4FA;color:#553a8b;border:1px solid #D6C7F0}
html[data-theme="dark"] .pill-gift{background:#2b2342;color:#c3b2ea;border-color:#473a6b}
/* Der Knopf bleibt umrandet statt gefüllt: kein Alltagsweg, aber auch
   keine Gefahr – rot wäre falsch, es ist ja nichts kaputt. */
.btn-weg{background:transparent;border:1.5px solid #8a6fc4;color:#553a8b;
  padding:9px 14px;border-radius:9px;font-weight:700;font-size:13px}
.btn-weg:hover{background:#EDE4FA}
.btn-weg-voll{background:#6b51a8;border-color:#6b51a8;color:#fff}
.btn-weg-voll:hover{background:#5b4392}
html[data-theme="dark"] .btn-weg{border-color:#7d66b5;color:#c3b2ea}
html[data-theme="dark"] .btn-weg:hover{background:#2b2342}
html[data-theme="dark"] .btn-weg-voll{background:#6b51a8;border-color:#6b51a8;color:#fff}
.weg-vl{border-color:#b9a4e0}
html[data-theme="dark"] .weg-vl{border-color:#473a6b}
.weg-vl-kopf{font-weight:800;font-size:14px;color:var(--ink)}
.weg-vl .weg-gruende{flex-direction:row;flex-wrap:wrap;gap:8px}
.weg-vl .weg-grund{border:1.5px solid var(--line);border-radius:9px;padding:8px 12px;
  min-height:44px}            /* 👍 Daumenfläche – Karls Regel */
/* 💶 Gemessen am 05.10.2026: Das Preisfeld blieb trotz hidden sichtbar.
   Grund ist die Regel „.frow > .fld{display:flex}" (0,2,0) – sie schlägt
   den allgemeinen Riegel „html body [hidden]" (0,1,2). Mit der ID davor
   steht (1,1,0) dagegen, und das gewinnt. Kein !important nötig. */
#wegPreisFeld[hidden],#wegModalPreisFeld[hidden]{display:none}
/* 📜 Gemessen am Handy (390 px): „🎁 verschenkt" ist breiter als „zurück",
   dadurch wurde in der Ausleih-Historie der Name zu „E.." gequetscht.
   Am Handy bekommt der Name deshalb eine eigene Zeile – lieber zwei
   Zeilen als ein unlesbarer Name (Karls Regel: nie seitlich scrollen). */
@media(max-width:820px){
  #lendHist .lst .r{flex-wrap:wrap;row-gap:4px}
  #lendHist .lst .r .grow{flex:1 0 100%}
}

/* 📗 Mehrfachexemplare: eine Kachel je Exemplar */
.ex-liste{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ex-karte{display:flex;flex-direction:column;gap:1px;min-width:118px;padding:8px 11px;
  border:1.5px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);
  background:var(--surface)}
.ex-karte b{font-family:monospace;font-size:12.5px}
.ex-karte small{font-size:11px;color:var(--muted)}
.ex-karte .ex-stat{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:2px}
.ex-karte.ex-hier{border-color:var(--orange);background:rgba(232,154,60,.09)}
.ex-karte:hover{border-color:var(--navy)}
.ex-neu-form{display:flex}
.ex-neu{min-width:100px;border:1.5px dashed var(--orange);background:none;border-radius:10px;
  color:var(--orange-dark,#B96A18);font-size:17px;font-weight:800;cursor:pointer;padding:8px 11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.ex-neu small{font-size:10.5px;font-weight:700;margin-top:2px}
html[data-theme="dark"] .ex-neu{color:var(--orange)}

/* ▦ „Alle anzeigen“ unter gekürzten Listen */
.alle-btn{margin-top:8px;width:100%}

/* 🏷️ Schlagwörter als Chips */
.tag-reihe{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.tag-chip{display:inline-block;background:var(--tile);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700;color:var(--navy);
  text-decoration:none}
.tag-chip:hover{border-color:var(--orange);color:var(--orange-dark,#B96A18)}
html[data-theme="dark"] .tag-chip{color:var(--ink)}
.tag-vorschlag{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.tag-chip.klick{cursor:pointer;font-size:11.5px;padding:3px 9px;background:none}
/* 🏷️ Schlagwort-Wolke */
.tag-wolke{display:flex;gap:9px;flex-wrap:wrap;align-items:baseline}
.tag-wolke a{text-decoration:none;color:var(--navy);font-weight:700;padding:3px 6px;border-radius:8px}
.tag-wolke a:hover{background:var(--tile)}
html[data-theme="dark"] .tag-wolke a{color:var(--ink)}
.tag-wolke small{color:var(--muted);font-weight:600;font-size:11px}

/* 🏷️ Schlagwort-Karte im Inventar */
.tag-karte{padding:12px 16px}
.tag-karte summary{cursor:pointer;list-style:none;font-size:14px}
.tag-karte summary::-webkit-details-marker{display:none}
.tag-wolke a.ist-aktiv{background:var(--orange);color:#fff}

/* 🗂️ Schalter in der Filterleiste (Bücher einblenden, Ausgemusterte) */
.ausg-schalter{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.ausg-schalter input{width:18px;height:18px}

/* 🔍 Ansicht-Umschalter: eigene Zeile mit Beschriftung statt gedrängt in der
   Filterleiste (Karl, 21.08.2026) */
.ansicht-zeile{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.az-lbl{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;font-weight:800;color:var(--muted)}
.view-seg.gross{border-radius:11px}
.view-seg.gross a,.view-seg.gross button{display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;
  border:none;background:none;cursor:pointer;line-height:1.1;border-right:1px solid var(--line)}
.view-seg.gross a:last-child,.view-seg.gross button:last-child{border-right:none}
.view-seg.gross a span,.view-seg.gross button span{font-size:15px}
.view-seg.gross a.on,.view-seg.gross button.on{background:var(--navy);color:#fff}
html[data-theme="dark"] .view-seg.gross a.on,
html[data-theme="dark"] .view-seg.gross button.on{background:var(--orange);color:#fff}
@media(max-width:560px){
  .view-seg.gross{width:100%}
  .view-seg.gross a,.view-seg.gross button{flex:1;justify-content:center;padding:9px 6px;font-size:12px}
}

/* 📚 Bücherei-Steuerleiste: Suchen · Gruppieren · Ansicht · Gruppen-Info
   in EINER Zeile (Karl, 22.08.2026 – „das muss in einer Zeile Platz haben?“).
   Bricht erst um, wenn der Platz wirklich nicht reicht. */
.buch-leiste{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 14px}
.buch-leiste > form.filterbar{flex:1 1 300px;margin:0;min-width:0}
/* 📗 Gruppierungs-Auswahl: das Herzstück der Leiste – groß genug, dass die
   längste Bezeichnung („🤝 Verliehen / im Regal") ohne Abschneiden hineinpasst,
   mit eigenem Pfeil statt Betriebssystem-Optik. (Karl, 23.08.2026) */
.buch-leiste select[name="g"]{
  flex:0 0 auto;min-width:238px;padding:10px 38px 10px 14px;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);
  background-color:var(--surface);border:1.5px solid var(--line);border-radius:10px;
  cursor:pointer;line-height:1.2;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A879C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.buch-leiste select[name="g"]:hover{border-color:var(--orange)}
.buch-leiste select[name="g"]:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(232,154,60,.18)}
@media(max-width:560px){.buch-leiste select[name="g"]{flex:1 1 auto;min-width:0;width:100%}}
.buch-leiste > .ansicht-zeile{margin:0;flex:0 0 auto}
.buch-leiste > .grp-bar{margin:0;flex:0 1 auto;gap:8px}
.buch-leiste .grp-all{margin-left:0}
.buch-leiste .grp-chip{white-space:nowrap}
.buch-leiste .grp-cnt{white-space:nowrap}
/* Trennstrich zwischen den drei Gruppen, damit die lange Zeile lesbar bleibt */
.buch-leiste > .ansicht-zeile::before,.buch-leiste > .grp-bar::before{
  content:"";align-self:stretch;width:1px;background:var(--line);margin-right:4px}
@media(max-width:1100px){
  .buch-leiste > .ansicht-zeile::before,.buch-leiste > .grp-bar::before{display:none}
}
/* Damit die eine Zeile auch bei mittleren Monitoren hält, weicht zuerst der
   Zähler („n Gruppen · n Bücher“) – die Zahl steht auch im Seitenkopf.
   Gemessen: ohne ihn bleibt es bis herunter zu ~1500px einzeilig. */
/* Der Zähler weicht nur noch auf schmalen Monitoren – seit der Chip weg ist,
   hält die eine Zeile schon ab ~1560px mit allem drin. */
@media(min-width:1101px) and (max-width:1560px){
  .buch-leiste > .grp-bar > .grp-cnt{display:none}
}
@media(max-width:560px){
  .buch-leiste{gap:10px}
  .buch-leiste > form.filterbar,.buch-leiste > .ansicht-zeile,
  .buch-leiste > .grp-bar{flex:1 1 100%}
}

/* ⬛ Fußleisten-Knöpfe: eine Größe, eine Schrift, sauberer Umbruch
   ⚠️ :not(.modal-bg) ist PFLICHT – in mehreren Vorlagen steht der Dialog
   (.modal-bg) als Geschwister der Fuß-Knöpfe im selben Container. Ohne die
   Ausnahme erbte der ganze Dialog white-space:nowrap (Texte liefen aus dem
   Fenster) und bekam padding + display:inline-flex aufgezwungen, wodurch
   das ✕ nicht mehr zuverlässig traf. (Karl, 22.08.2026) */
.footer-note .foot-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
.footer-note .foot-actions > *:not(.modal-bg):not(.lightbox):not([hidden]){
  font-size:13px !important;padding:9px 15px !important;
  border-radius:10px;line-height:1.15;white-space:nowrap;min-height:38px;display:inline-flex;
  align-items:center;gap:6px}
@media(max-width:820px){
  .footer-note .foot-actions{width:100%;justify-content:stretch}
  .footer-note .foot-actions > *:not(.modal-bg):not(.lightbox):not([hidden]){flex:1 1 auto;justify-content:center}
}
/* Gürtel und Hosenträger: ein Dialog erbt NIE Textumbruch-Regeln von außen */
.modal-bg,.modal-bg *{white-space:normal}
.modal-bg{padding:60px 16px !important;min-height:0 !important;font-size:inherit !important}

/* 🪟 Dialog-Kopf: langer Titel bricht um, das ✕ bleibt immer erreichbar */
.modal-head{align-items:flex-start;gap:12px}
.modal-head b{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.3}
.modal-x{flex:0 0 auto;cursor:pointer;min-width:30px;min-height:30px;
  display:inline-flex;align-items:center;justify-content:center}
.modal-x:hover{background:var(--line);color:var(--ink)}
.modal{overflow-x:hidden}
@media(max-width:560px){
  /* am Handy Fingergröße und nie schmaler als der Bildschirm */
  .modal-x{min-width:40px;min-height:40px;font-size:16px}
  .modal{width:100% !important}
}


/* ═══════════════════════════════════════════════════════════════════
   🔎 VORSCHLAGSKARTE für Netz-Buchdaten (Karl, 23.08.2026)
   Gefundene Werte werden NEBEN dem eigenen gezeigt, nicht eingesetzt.
   Eine Zeile je abweichendem Feld: Beschriftung · dein Wert · Vorschlag
   · Knopf. Auf schmalen Karten bricht die Zeile um.
   ═══════════════════════════════════════════════════════════════════ */
.vs-karte{border:1.5px solid var(--orange);border-radius:12px;overflow:hidden;
  background:var(--surface);margin-top:10px}
.vs-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:rgba(232,154,60,.12);border-bottom:1px solid var(--line)}
.vs-kopf b{color:var(--ink);font-size:13.5px}
.vs-akt{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.vs-zeilen{display:flex;flex-direction:column}
.vs-zeile{display:grid;gap:6px 12px;align-items:center;padding:9px 14px;
  border-bottom:1px solid var(--line);font-size:13px;
  grid-template-columns:150px minmax(0,1fr) 16px minmax(0,1fr) auto}
.vs-zeile:last-child{border-bottom:none}
.vs-lbl{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  font-weight:800;color:var(--muted)}
.vs-alt{color:var(--muted);overflow-wrap:anywhere}
.vs-pfeil{color:var(--orange);font-weight:800;text-align:center}
.vs-neu{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.vs-ok{color:var(--green);font-weight:700;font-size:12.5px;white-space:nowrap}
.vs-zeile.vs-fertig{background:rgba(63,169,114,.08)}
.vs-cover{max-height:64px;border-radius:4px;box-shadow:0 3px 8px rgba(31,56,100,.25)}
/* Frisch übernommenes Feld kurz aufleuchten lassen */
.vs-frisch{border-color:var(--green) !important;
  box-shadow:0 0 0 3px rgba(63,169,114,.18);transition:box-shadow .3s,border-color .3s}
@media(max-width:820px){
  .vs-zeile{grid-template-columns:1fr auto}
  .vs-lbl{grid-column:1/-1}
  .vs-pfeil{display:none}
  .vs-alt,.vs-neu{grid-column:1}
  .vs-alt::before{content:'jetzt: ';font-size:11px}
  .vs-neu::before{content:'neu: ';font-size:11px;color:var(--muted);font-weight:400}
}

/* ═══════════════════════════════════════════════════════════════════════
   📚 BUCH-SCANNER — der schnelle Weg am Handy (Karl, 23.08.2026)
   „beim Erfassen gleich Buch, ISBN scannen, alles ausgefüllt mit Cover,
    nur mehr ergänzen und abspeichern".
   Eine Seite mit drei Zuständen (.bs-stufe, nur .on ist sichtbar). Alles
   ist auf 390 px gebaut und wächst nach oben — nie seitlich.
   ═══════════════════════════════════════════════════════════════════════ */
.bs-wrap{max-width:560px;margin:0 auto}
.bs-stufe{display:none}
.bs-stufe.on{display:block}

/* ── Kopfzeile ────────────────────────────────────────────────────────── */
.bs-top{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.bs-titel{font-weight:800;font-size:17px;color:var(--ink);flex:1 1 auto;min-width:0}
.bs-x{width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:grid;place-items:center;
  background:var(--tile);color:var(--muted);text-decoration:none;font-size:17px;font-weight:700}
.bs-x:hover{color:var(--ink)}
.bs-zaehler{flex:0 0 auto;border:none;background:rgba(46,162,95,.14);color:var(--green);
  font-weight:700;font-size:13px;padding:9px 13px;border-radius:11px;cursor:pointer;min-height:40px}
.bs-zaehler b{font-size:15px}

/* ── 1) KAMERA: Vollbild. Randlos von oben bis unten, alles andere
      schwebt darüber. Der Sucher ist flach, weil ein EAN-Strichcode breit
      und niedrig ist – ein quadratischer Rahmen zwingt zu großem Abstand. */
body.bs-gesperrt{overflow:hidden}
.bs-voll{position:fixed;inset:0;z-index:210;background:#070C16}
.bs-video{position:absolute;inset:0;overflow:hidden}
/* Inline-Stile der Bibliothek überschreiben – sonst bleibt das Bild
   293 px hoch und der Rest des Bildschirms ist schwarz. */
.bs-video>div{position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;min-height:0!important}
.bs-video video{width:100%!important;height:100%!important;object-fit:cover;display:block}
.bs-video img{display:none}
/* Die Scanner-Bibliothek malt eigene graue Eckwinkel und eine Leiste –
   beides aus, wir zeichnen selbst. */
.bs-voll #qr-shaded-region{display:none!important}
.bs-voll #bsReader__dashboard,.bs-voll #bsReader__scan_region>img{display:none!important}

/* Abdunkeln ringsum + Sucherfenster */
.bs-scrim{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.bs-fenster{position:relative;width:min(84vw,420px);aspect-ratio:2.35/1;border-radius:14px;
  box-shadow:0 0 0 3000px rgba(6,10,20,.58);transition:box-shadow .25s}
.bs-fenster .ew{position:absolute;width:34px;height:34px;border:3px solid var(--orange);
  border-radius:4px;transition:border-color .25s}
.bs-fenster .ew1{top:-3px;left:-3px;border-right:none;border-bottom:none;border-top-left-radius:14px}
.bs-fenster .ew2{top:-3px;right:-3px;border-left:none;border-bottom:none;border-top-right-radius:14px}
.bs-fenster .ew3{bottom:-3px;left:-3px;border-right:none;border-top:none;border-bottom-left-radius:14px}
.bs-fenster .ew4{bottom:-3px;right:-3px;border-left:none;border-top:none;border-bottom-right-radius:14px}
/* Wandernde Suchlinie – zeigt, dass wirklich gesucht wird */
.bs-linie{position:absolute;left:8px;right:8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  box-shadow:0 0 12px rgba(232,154,60,.85);animation:bsSuchLinie 2.1s ease-in-out infinite}
@keyframes bsSuchLinie{0%,100%{top:10%;opacity:.35}50%{top:88%;opacity:1}}
/* 💚 Treffer */
.bs-fenster.treffer{box-shadow:0 0 0 3000px rgba(6,10,20,.72),0 0 30px 6px rgba(46,162,95,.7)}
.bs-fenster.treffer .ew{border-color:#3FD07E}
.bs-fenster.treffer .bs-linie{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){ .bs-linie{animation:none;top:50%} }

/* Kopfzeile über dem Bild – die EINZIGE Kopfzeile im Vollbild */
.bs-ov-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px 30px;
  background:linear-gradient(rgba(6,10,20,.78),transparent)}
.bs-ov-titel{flex:1 1 auto;min-width:0;color:#fff;font-weight:800;font-size:16px;
  text-shadow:0 1px 8px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-rund{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.4);color:#fff;
  text-decoration:none;font-size:18px;font-weight:700;-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);cursor:pointer}
.bs-rund-hell{background:var(--tile);border-color:var(--line);color:var(--ink)}

/* Fußzeile über dem Bild – hier endet der tote Platz */
.bs-ov-unten{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:34px 14px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(transparent,rgba(6,10,20,.86) 38%)}
.bs-hinweis{color:#EAF0FA;font-size:13.5px;line-height:1.45;text-align:center;margin-bottom:12px;
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
.bs-ov-akt{display:flex;gap:10px}
/* Knöpfe auf dem Bild: hell abgesetzt mit klarer Kante, nicht blass */
.bs-ov-btn{flex:1 1 auto;min-height:50px;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,.17);border:1.5px solid rgba(255,255,255,.45);color:#fff;
  font-family:inherit;font-weight:700;font-size:14.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bs-ov-btn:hover{background:rgba(255,255,255,.26)}
.bs-ov-btn:active{transform:translateY(1px)}
.bs-ov-schmal{flex:0 0 56px;font-size:19px}
.bs-tippen{display:flex;gap:9px;margin-top:11px}
.bs-tippen .in{flex:1 1 auto;min-width:0;min-height:50px;background:rgba(255,255,255,.95);
  border:1.5px solid rgba(255,255,255,.5);color:#12203A}
.bs-tippen .btn-orange{min-height:50px;flex:0 0 auto}

/* Kein Kamerazugriff: keine schwarze Fläche, sondern eine klare Ansage */
.bs-stufe.aus .bs-scrim{display:none}
.bs-stufe.aus .bs-video{background:var(--navy-dark)}
.bs-stufe.aus .bs-ov-unten{background:linear-gradient(transparent,rgba(6,10,20,.94) 22%)}

/* Blatt mit den gerade erfassten Büchern – kommt über den Zähler */
.bs-blatt{position:absolute;left:0;right:0;bottom:0;z-index:5;max-height:66%;
  display:flex;flex-direction:column;background:var(--surface);
  border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.5);
  padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px))}
.bs-blatt-kopf{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bs-blatt-kopf span{flex:1 1 auto;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);font-weight:700}
.bs-blatt-inhalt{overflow-y:auto;-webkit-overflow-scrolling:touch}
.bs-liste-zeile{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:11px 13px;border-radius:11px;background:var(--tile);margin-bottom:7px;
  text-decoration:none;color:var(--ink);font-size:13.5px;min-height:46px;box-sizing:border-box}
.bs-liste-zeile b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-liste-zeile span{flex:0 0 auto;font-size:12px}

/* ── 2) SUCHE LÄUFT – ebenfalls Vollbild, damit das Bild nicht springt ── */
#bsSuche{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:24px;
  background:rgba(7,12,22,.94)}
#bsSuche.on{display:flex}
#bsSuche .bs-ov-btn{flex:0 0 auto;min-width:180px}
.bs-lade{display:flex;gap:16px;align-items:center;max-width:420px;width:100%}
.bs-lade-cover{flex:0 0 74px;width:74px;height:104px;border-radius:9px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;font-size:30px}
.bs-lade-txt{min-width:0;flex:1 1 auto;color:#EAF0FA}
.bs-lade-txt b{display:block;font-size:16px;margin-bottom:5px}
.bs-lade-txt>div{font-size:12.5px;line-height:1.45;color:rgba(234,240,250,.75)}
.bs-balken{height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:12px}
.bs-balken i{display:block;height:100%;width:40%;border-radius:3px;background:var(--orange);
  animation:bsLauf 1.1s ease-in-out infinite}
@keyframes bsLauf{0%{margin-left:-40%}100%{margin-left:100%}}

/* ── 3) Maske: Cover groß, Daten daneben ──────────────────────────────── */
.bs-fund{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:14px;
  background:var(--tile);margin-bottom:12px}
.bs-cover{flex:0 0 96px;width:96px;min-height:134px;border-radius:9px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}
.bs-cover img{width:100%;height:100%;object-fit:cover;display:block}
.bs-cover-leer{font-size:11px;color:var(--muted);text-align:center;padding:6px;line-height:1.3}
.bs-fund-txt{flex:1 1 auto;min-width:0}
.bs-titel-feld,.bs-autor-feld{width:100%;box-sizing:border-box;border:1px solid transparent;
  background:transparent;font-family:inherit;color:var(--ink);border-radius:8px;
  padding:7px 9px;margin-bottom:5px}
.bs-titel-feld{font-size:17px;font-weight:800;line-height:1.25;min-height:44px}
.bs-autor-feld{font-size:14px;color:var(--muted);min-height:40px}
.bs-titel-feld:focus,.bs-autor-feld:focus{border-color:var(--orange);background:var(--surface);outline:none}
/* Der Fund soll sich wie eine Buchkarte lesen, nicht wie ein Formular: Titel
   und Autor stehen als Text da und werden erst beim Antippen zum Feld.
   Der Dunkelmodus färbt sonst jedes input dunkel ein (Regel weiter oben). */
html[data-theme="dark"] .bs-titel-feld,
html[data-theme="dark"] .bs-autor-feld{background:transparent;color:var(--ink)}
html[data-theme="dark"] .bs-titel-feld:focus,
html[data-theme="dark"] .bs-autor-feld:focus{background:#0f1622}
.bs-titel-feld::placeholder,.bs-autor-feld::placeholder{color:var(--muted);font-weight:400}
.bs-meta{font-size:12.5px;color:var(--muted);margin:2px 0 0;padding:0 9px}
.bs-quelle{font-size:11.5px;color:var(--green);margin-top:5px;padding:0 9px}

/* ── Aufklappbares „ändern" ───────────────────────────────────────────── */
.bs-mehr{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:var(--surface)}
.bs-mehr>summary{cursor:pointer;padding:13px 15px;font-weight:700;font-size:13.5px;
  color:var(--ink);list-style:none;min-height:46px;display:flex;align-items:center}
.bs-mehr>summary::-webkit-details-marker{display:none}
.bs-mehr>summary::after{content:'▾';margin-left:auto;color:var(--muted)}
.bs-mehr[open]>summary::after{content:'▴'}
.bs-mehr-in{padding:0 15px 15px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* ── Ergänzen ─────────────────────────────────────────────────────────── */
.bs-ergaenzen{display:grid;gap:14px;margin-bottom:16px}
.bs-feld{min-width:0}
.bs-feld>label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);margin-bottom:5px}
.bs-feld>label .muted-cell{text-transform:none;letter-spacing:0;font-size:11px}
.bs-feld .in,.bs-feld select{width:100%;box-sizing:border-box;min-height:48px}
.bs-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.bs-chip{border:1.5px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:999px;padding:8px 15px;font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;min-height:44px}   /* 44 px = Daumenfläche, gilt auch am PC */
.bs-chip.on{border-color:var(--orange);background:rgba(232,154,60,.14);color:var(--orange-dark)}

/* ── Dublette: erst fragen ────────────────────────────────────────────── */
.bs-dublette{border:2px dashed #D64545;background:rgba(214,69,69,.07);border-radius:12px;
  padding:13px 15px;margin-bottom:12px}
.bs-dub-kopf{font-size:13.5px;color:var(--ink);margin-bottom:11px;line-height:1.45}
.bs-dub-akt{display:flex;flex-wrap:wrap;gap:9px}
.bs-dub-akt>*{flex:1 1 100%;text-decoration:none}

/* ── Speichern ────────────────────────────────────────────────────────── */
.bs-speichern{display:flex;flex-wrap:wrap;gap:9px}

.bs-haupt{flex:1 1 100%;min-height:54px!important;font-size:16px!important}
.bs-speichern .btn-grey{flex:1 1 100%}

/* ── Kurzmeldung nach dem Speichern ───────────────────────────────────── */
.bs-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:86px;z-index:9000;
  background:var(--green);color:#fff;font-weight:700;font-size:13.5px;padding:12px 18px;
  border-radius:12px;box-shadow:0 10px 26px rgba(20,40,80,.28);max-width:92vw;
  text-align:center;transition:opacity .5s}
.bs-toast.weg{opacity:0}

@media(max-width:820px){
  /* Am Handy zählt jeder Pixel Höhe. Die Kamera bekommt so viel, dass der
     Strichcode bequem hineinpasst – aber nicht so viel, dass die Knöpfe
     darunter aus dem Bild rutschen. Und der Platz für die untere
     Navigationsleiste (72 px) muss frei bleiben, sonst liegt das
     ISBN-Feld dahinter. */
  .bs-cam{aspect-ratio:1/1;max-height:42vh}
  .bs-wrap{padding-bottom:96px}
  .bs-dub-akt>*{flex:1 1 100%}
}

/* Keine Kamera (Zugriff verweigert, Notebook ohne Kamera, Testbrowser):
   die schwarze Fläche schrumpft, damit sie keinen Platz verschwendet. */
.bs-cam.aus{aspect-ratio:auto;min-height:0;max-height:none;background:var(--tile)}
.bs-cam.aus #bsReader,.bs-cam.aus .bs-rahmen{display:none}
.bs-cam.aus .bs-cam-txt{position:static;background:none;color:var(--ink);
  padding:16px 15px;font-size:13.5px}
@media(min-width:560px){
  .bs-dub-akt>*{flex:1 1 auto}
  .bs-speichern .btn-grey{flex:0 0 auto}
  .bs-haupt{flex:1 1 auto}
}

/* 🌙 Dunkelmodus: die Kamera bleibt dunkel, die Karten heben sich ab */
html[data-theme="dark"] .bs-chip.on{background:rgba(232,154,60,.2);color:#F2B968}
html[data-theme="dark"] .bs-dublette{background:rgba(214,69,69,.14)}
html[data-theme="dark"] .bs-zaehler{background:rgba(46,162,95,.2);color:#7BD9A5}

/* 📚 Kachel „Buch scannen" am Dashboard – am Handy der erste Griff */
.scan-kachel{display:flex;align-items:center;gap:14px;margin:16px 0;padding:16px 18px;
  border-radius:14px;text-decoration:none;color:#fff;min-height:72px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  box-shadow:0 6px 18px rgba(20,40,80,.16)}
.scan-kachel:hover{box-shadow:0 8px 24px rgba(20,40,80,.24)}
.sk-ic{flex:0 0 46px;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);font-size:24px}
.sk-txt{flex:1 1 auto;min-width:0}
.sk-txt b{display:block;font-size:16px;font-weight:800;margin-bottom:3px}
.sk-txt span{display:block;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.82)}
.sk-pfeil{flex:0 0 auto;font-size:26px;color:rgba(255,255,255,.6);line-height:1}
@media(max-width:820px){
  .scan-kachel{min-height:84px;padding:18px}
  .sk-txt b{font-size:17px}
}

/* ─────────────────────────────────────────────────────────────────────────
   📚 Buch-Scanner am Handy: der Speichern-Balken.
   ACHTUNG REIHENFOLGE: dieser Block muss NACH .bs-haupt und nach den
   allgemeinen Knopf-Regeln stehen. Stand er davor, gewann `.bs-haupt
   {flex:1 1 100%}` und der Balken wurde zweizeilig — 60 px, die unten
   bei den Feldern fehlten. Die Selektoren sind zweistufig
   (.bs-speichern .bs-haupt), damit sie auch `form .btn-green` schlagen.
   ───────────────────────────────────────────────────────────────────────── */
@media(max-width:820px){
  .bs-speichern{position:fixed;left:0;right:0;bottom:72px;z-index:55;margin:0;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -8px 20px rgba(20,40,80,.12)}
  #bsMaske:not(.on) .bs-speichern{display:none}          /* nur in der Maske */
  .bs-speichern .bs-haupt{flex:1 1 auto;min-height:52px!important}
  /* Verwerfen ist nur ein ✕ daneben – so bleibt der Balken einzeilig. */
  .bs-speichern .bs-weg{flex:0 0 52px!important;width:52px;min-height:52px!important;
    padding-left:0!important;padding-right:0!important;font-size:17px!important}
  /* Platz für den Balken (70 px) plus die Navigationsleiste (72 px) */
  #bsMaske.on{padding-bottom:170px}
}
.bs-dub-hint{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}

/* 🖼️ Cover-Prüfung: erst messen, dann bauen (Karl, 23.08.2026) */
.cp-kopf{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.cp-akt{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cp-fortschritt{margin-bottom:14px}
.cp-balken{height:8px;border-radius:5px;background:var(--tile);overflow:hidden;margin-bottom:6px}
.cp-balken i{display:block;height:100%;width:0;background:var(--orange);
  border-radius:5px;transition:width .25s}
.cp-zahlen{display:grid;gap:10px;margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cp-kachel{background:var(--tile);border-radius:12px;padding:14px 16px;text-align:center}
.cp-kachel b{display:block;font-size:26px;font-weight:800;color:var(--ink);line-height:1.1}
.cp-kachel span{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.cp-kachel.gut b{color:var(--green)}
.cp-kachel.schlecht b{color:#D64545}
.cp-quellen{border-top:1px solid var(--line);padding-top:14px}
.cp-q-kopf{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  font-weight:700;margin-bottom:10px}
.cp-q-zeile{display:grid;gap:12px;align-items:center;margin-bottom:9px;
  grid-template-columns:minmax(110px,1fr) minmax(80px,2fr) minmax(110px,auto)}
.cp-q-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.cp-q-balken{height:9px;border-radius:5px;background:var(--tile);overflow:hidden}
.cp-q-balken i{display:block;height:100%;background:var(--green);border-radius:5px;transition:width .25s}
.cp-q-wert{font-size:12.5px;color:var(--muted);text-align:right}
.cp-fehl{display:grid;gap:4px 12px;padding:11px 13px;border-radius:10px;background:var(--tile);
  margin-bottom:7px;text-decoration:none;color:var(--ink);
  grid-template-columns:minmax(0,1fr) auto}
.cp-fehl b{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-fehl-isbn{font-size:12px;color:var(--muted);grid-column:1;font-variant-numeric:tabular-nums}
.cp-fehl .muted-cell{font-size:12px;grid-row:1;grid-column:2;text-align:right}
@media(max-width:560px){
  .cp-q-zeile{grid-template-columns:1fr auto}
  .cp-q-balken{grid-column:1/-1;order:3}
}

/* ═══════════════════════════════════════════════════════════════════════
   ⛶ SCANNEN im Vollbild — dieselbe Hülle wie der Buch-Scanner
   (Karl, 23.08.2026: „den anderen Scanner auch auf den schönen ändern").
   Unterschied: der Sucher ist QUADRATISCH, weil QR-Etiketten quadratisch
   sind. Der flache Rahmen bleibt dem Strichcode am Buch vorbehalten.
   ═══════════════════════════════════════════════════════════════════════ */
.bs-fenster.quadrat{aspect-ratio:1/1;width:min(66vw,300px)}

/* Kopf: zwei Zeilen – Schließen/Titel, darunter die Moduswahl */
.sc-top{display:block}
.sc-top-zeile{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sc-modi{display:flex;flex-wrap:wrap;gap:7px}
.sc-modus{border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);
  color:#fff;border-radius:999px;padding:9px 14px;font-family:inherit;font-weight:700;
  font-size:12.5px;min-height:42px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sc-modus:hover{background:rgba(255,255,255,.24)}
.sc-modus.on{background:var(--orange);border-color:var(--orange);color:#fff}
.sc-modus-link{border-style:dashed}

/* Fuß: Zustand des Modus + Verlauf, alles über dem Bild */
.sc-unten{max-height:62%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sc-zustand{background:rgba(10,16,28,.72);border:1px solid rgba(255,255,255,.18);
  border-radius:13px;padding:12px 14px;margin-bottom:12px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sc-zustand[hidden]{display:none}
.sc-schritt{color:#EAF0FA;font-size:13px;line-height:1.45}
.sc-schritt a{color:var(--orange);font-weight:700}
.sc-ziel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:#fff;
  font-size:13.5px;font-weight:700}
.sc-ziel[hidden]{display:none}
.sc-klein{font-weight:400;font-size:12.5px;color:rgba(234,240,250,.75)}
.sc-mini{border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);
  color:#fff;border-radius:9px;padding:7px 12px;font-family:inherit;font-weight:700;
  font-size:12px;min-height:36px;cursor:pointer;margin-left:auto}
.sc-log{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.sc-log:empty{display:none}
.sc-zeile{font-size:12.5px;line-height:1.4;color:#EAF0FA;padding:8px 11px;border-radius:9px;
  background:rgba(255,255,255,.1)}
.sc-zeile.ok{background:rgba(46,162,95,.24)}
.sc-zeile.warn{background:rgba(214,69,69,.26)}

/* Kein Kamerazugriff: dunkle Fläche statt schwarzem Loch */
.sc-voll.aus .bs-video{background:var(--navy-dark)}
.sc-voll.aus .bs-scrim{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   📷 Cover fotografieren + zuschneiden (Karl, 23.08.2026)
   ═══════════════════════════════════════════════════════════════════════ */
.bs-cover-spalte{flex:0 0 96px;display:flex;flex-direction:column;gap:7px}
.bs-cover-spalte .bs-cover{flex:0 0 auto}
.bs-foto-btn{border:1.5px dashed var(--line);background:var(--surface);color:var(--muted);
  border-radius:9px;padding:8px 6px;font-family:inherit;font-weight:700;font-size:11px;
  cursor:pointer;min-height:38px;line-height:1.25}
.bs-foto-btn:hover{border-color:var(--orange);color:var(--ink)}

/* Reihe mit mehreren gefundenen Covern – antippen wählt */
.bs-cover-wahl{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;padding:0 9px}
.bs-cover-wahl[hidden]{display:none}
.bs-cw{flex:0 0 44px;width:44px;height:62px;border-radius:7px;overflow:hidden;padding:0;
  border:2px solid var(--line);background:var(--surface);cursor:pointer}
.bs-cw img{width:100%;height:100%;object-fit:cover;display:block}
.bs-cw.on{border-color:var(--orange);box-shadow:0 0 0 2px rgba(232,154,60,.3)}

/* Zuschneide-Ansicht: Bild mittig, Netz und Ecken darüber */
#bsZuschnitt{z-index:230;background:#070C16}
.zs-buehne{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
#zsBild{max-width:94vw;max-height:76vh;display:block}
#zsNetz{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#zsNetz polygon{fill:rgba(232,154,60,.12);stroke:var(--orange);stroke-width:2.5}
.zs-ecke{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:3px solid var(--orange);background:rgba(255,255,255,.25);cursor:grab;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:none}
.zs-ecke::after{content:'';position:absolute;inset:14px;border-radius:50%;background:var(--orange)}

/* 📱 Am Handy KEINE Kacheln (Karl, 24.08.2026: „Am iPhone brauchen wir
   keine Kacheln. Die Ansicht jetzt ist Liste und daneben kommt Tabelle").
   Die Tabelle ist dort keine echte Tabelle – sie zeigt dieselben Zeilen
   als schmale Zweizeiler (siehe „.inv-views[data-view=table]" weiter
   unten). Bis v1.27.1b stand hier die Tabelle; die Regel muss am
   Dateiende stehen und zweistufig sein, weil `.view-seg.gross button`
   sonst mit display:inline-flex dagegenhält. */
@media(max-width:820px){
  .view-seg button[data-view="tiles"],
  .view-seg.gross button[data-view="tiles"]{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   📱 KOPFLEISTE UND „MEHR"-BLATT (Karl, 23.08.2026: „Chaos an Knöpfen")
   Gemessen war: acht unbeschriftete Symbole à 22 px Breite in der
   Kopfleiste, Suchfeld auf 116 px gequetscht, Navigation auf zwei
   Leisten verteilt. Jetzt: oben nur Suche, Thema und Profil – alles
   Weitere beschriftet im Blatt über der unteren Leiste.
   ═══════════════════════════════════════════════════════════════════════ */
.only-mobile{display:none}
.kopf-ich{flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;
  display:none;align-items:center;justify-content:center;text-decoration:none;
  background:var(--navy);color:#fff;font-weight:800;font-size:13px}
.kopf-ich img{width:100%;height:100%;object-fit:cover}

@media(max-width:820px){
  .only-mobile{display:flex}
  /* Das Suchfeld bekommt den Platz, der vorher an acht Symbole ging */
  .topbar .search{flex:1 1 auto;min-width:0}
  .topbar .icon-btn{width:44px;height:44px}          /* Daumenfläche */
  .topbar .search input{min-height:44px;box-sizing:border-box}
}

/* Fünfter Punkt unten: sieht aus wie die anderen, ist aber ein Knopf.
   Die Nachbarn holen ihre Maße aus `.mobnav a` – ein <button> fällt da
   nicht hinein, deshalb hier dieselben Werte, sonst steht er 10 px
   niedriger als seine Nachbarn (gemessen: 41 statt 51 px). */
.mehr-taste{border:none;background:none;font-family:inherit;cursor:pointer;
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--muted);font-size:11px;font-weight:600;padding:0}
.mehr-taste .mi{line-height:1;display:flex;align-items:center;justify-content:center;
  padding:3px 8px;border-radius:12px}
.mehr-taste .mi svg{width:24px;height:24px}

/* Das Blatt selbst */
.mehr-bg{position:fixed;inset:0;z-index:400;background:rgba(8,14,26,.55);
  display:flex;align-items:flex-end;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mehr-bg[hidden]{display:none}
.mehr-blatt{width:100%;max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface);border-radius:20px 20px 0 0;
  padding:10px 14px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -14px 44px rgba(0,0,0,.35)}
.mehr-griff{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
/* Zwei Spalten: 16 Punkte einspaltig wären 864 px – das letzte Drittel
   läge unter dem Bildschirmrand (gemessen: „Mein Ausweis" bei 869 px).
   Zweispaltig passen alle ohne Scrollen. */
.mehr-liste{display:grid;gap:7px;grid-template-columns:1fr 1fr}
.mehr-liste a,.mehr-liste button{display:flex;align-items:center;gap:10px;
  min-height:54px;padding:10px 12px;border-radius:12px;background:var(--tile);
  border:none;text-decoration:none;color:var(--ink);font-family:inherit;
  font-size:14px;font-weight:700;cursor:pointer;text-align:left;width:100%;
  box-sizing:border-box;line-height:1.25}
.mehr-aus{grid-column:1/-1}       /* Abmelden über die volle Breite, unten */
.mehr-liste a:hover,.mehr-liste button:hover{background:var(--line)}
.mehr-liste .mz{flex:0 0 24px;font-size:18px;text-align:center}
.mehr-aus{color:#D64545!important}
@media(min-width:821px){ .mehr-bg{display:none!important} }

/* ═══════════════════════════════════════════════════════════════════════
   📱 „TABELLE" AM HANDY = schmale Zweizeiler-Leiste
   (Karl, 24.08.2026: „eine zweizeilige schmale Leiste, vorne das Bild und
   dahinter zweizeilig die wichtigen Daten".)
   Es ist bewusst KEINE echte Tabelle – die bräuchte seitliches Scrollen,
   und das ist am Handy verboten. Stattdessen dieselben Zeilen wie in der
   Liste, nur dicht: Bild links, Zeile 1 = Titel, Zeile 2 = Nummer,
   Kategorie und Lagerort. Alles andere ist ausgeblendet.
   Muss NACH den Listen-Regeln stehen, sonst gewinnen deren Maße.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  .inv-views[data-view="table"] .view-list,
  .gr[data-view="table"] .view-list{gap:6px}

  .inv-views[data-view="table"] .lrow,
  .gr[data-view="table"] .lrow{
    align-items:stretch;min-height:60px;border-radius:10px}

  /* Bild vorne: schmal, im Buchformat */
  .inv-views[data-view="table"] .lrow .img,
  .gr[data-view="table"] .lrow .img{
    width:46px!important;flex:0 0 46px;min-height:60px}
  /* Das Grundbild erzwingt min-height:106px – in der schmalen Leiste
     würde die Zeile dadurch 108 px hoch (gemessen). Hier zurücknehmen. */
  .inv-views[data-view="table"] .lrow .img img,
  .inv-views[data-view="table"] .lrow .img .ph,
  .gr[data-view="table"] .lrow .img img,
  .gr[data-view="table"] .lrow .img .ph{
    min-height:0!important;height:100%;object-fit:cover}

  /* Textteil: genau zwei Zeilen */
  .inv-views[data-view="table"] .lrow .bd,
  .gr[data-view="table"] .lrow .bd{
    padding:8px 10px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
  .inv-views[data-view="table"] .lrow .t,
  .gr[data-view="table"] .lrow .t{
    font-size:14px!important;line-height:1.25;margin:0;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
    overflow:hidden;text-overflow:ellipsis}
  .inv-views[data-view="table"] .lrow .meta,
  .gr[data-view="table"] .lrow .meta{
    font-size:11.5px;margin:0;gap:8px;flex-wrap:nowrap;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}

  /* Was in der schmalen Leiste keinen Platz hat */
  .inv-views[data-view="table"] .lrow .badges,
  .inv-views[data-view="table"] .lrow .stars,
  .inv-views[data-view="table"] .lrow .loc-rt,
  .inv-views[data-view="table"] .lrow .meta.more,
  .inv-views[data-view="table"] .lrow .pill-ausg,
  .inv-views[data-view="table"] .lrow .right,
  .gr[data-view="table"] .lrow .badges,
  .gr[data-view="table"] .lrow .stars,
  .gr[data-view="table"] .lrow .loc-rt,
  .gr[data-view="table"] .lrow .meta.more,
  .gr[data-view="table"] .lrow .pill-ausg,
  .gr[data-view="table"] .lrow .right{display:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   ⤵️ Herunterziehen = Aktualisieren (v1.30.0b, Karl 24.08.2026)
   Das Band hängt über dem oberen Rand und wird beim Ziehen
   hereingeschoben. Es liegt ÜBER der Kopfleiste (z-index), sonst
   verschwindet es hinter der klebenden Suchzeile.
   ═══════════════════════════════════════════════════════════════════ */
/* Zurück-Pfeil der Kopfleiste – Maße hier statt als Inline-Stil, sonst
   könnte die Handy-Regel unten (Pfeil nur auf Unterseiten) nicht greifen:
   ein Inline-`display` sticht jede Klassenregel. */
.topbar .zur-taste{display:flex;align-items:center;justify-content:center;font-size:17px}

.ptr-band{position:fixed;top:-46px;left:0;right:0;height:46px;z-index:60;
  display:none;align-items:center;justify-content:center;gap:9px;
  pointer-events:none;opacity:0;
  font-size:12.5px;font-weight:700;color:var(--muted);
  background:var(--surface);border-bottom:1px solid var(--line)}
.ptr-band.weich{transition:transform .24s ease,opacity .24s ease}
.ptr-band .ptr-ring{width:17px;height:17px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--orange);display:block}
.ptr-band.bereit{color:var(--orange)}
.ptr-band.bereit .ptr-ring{border-color:var(--orange);border-top-color:var(--orange);
  transform:rotate(180deg);transition:transform .18s ease}
.ptr-band.laedt .ptr-ring{animation:ptrDreh .7s linear infinite}
@keyframes ptrDreh{to{transform:rotate(360deg)}}

@media(max-width:820px){
  .ptr-band{display:flex}
  /* Der Zurück-Pfeil in der Kopfleiste: am Handy NUR auf Unterseiten.
     Auf den fünf Zielen der unteren Leiste wäre er sinnlos – dort trägt
     `zur-haupt` ihn aus. Volle Daumenfläche (44 px). */
  .topbar .zur-taste{display:flex;flex:0 0 44px;width:44px;height:44px}
  .topbar .zur-taste.zur-haupt{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ptr-band,.ptr-band.laedt .ptr-ring{transition:none;animation:none}
}

/* Fehlerseite (404/403/500) – v1.30.0b */
.err-karte{text-align:center;padding:34px 22px 30px}
.err-nr{font-size:52px;font-weight:900;line-height:1;color:var(--orange);letter-spacing:-2px}
.err-kopf{margin:10px 0 6px;font-size:21px}
.err-text{color:var(--muted);font-size:14px;max-width:460px;margin:0 auto 20px;
  /* Absätze im Fehlertext erhalten (z. B. bei „Datei zu groß“) */
  white-space:pre-line}
.err-wege{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.err-wege .btn-orange,.err-wege .btn-grey{min-height:44px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 18px}

/* Lagerorte: Hinweis bei abgelehnter Eingabe + gesperrter Typ (v1.30.0b) */
.lg-hinweis{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;
  padding:11px 13px;border-radius:11px;font-size:13.5px;line-height:1.45;
  background:rgba(230,126,34,.12);border:1px solid rgba(230,126,34,.4);color:var(--text)}
.lg-typ.sperr{opacity:.4;cursor:not-allowed}

/* ═══════════════════════════════════════════════════════════════════
   🌳 LAGERORT-BAUM (v1.31.0b, Karl 24.08.2026)
   Am Handy ein Blatt von unten, am PC eine Klappliste unter dem Knopf.
   Einrückung über --t (Ebene); bei 6 Ebenen sind das 6×13 = 78 px –
   der Rest der Zeile bleibt breit genug, damit NICHTS seitlich scrollt.
   ═══════════════════════════════════════════════════════════════════ */
.ortwahl{position:relative;display:block}
.ow-knopf{width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  padding:9px 12px;min-height:52px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--text);font-family:inherit;font-size:15px;cursor:pointer}
.ow-knopf:hover{border-color:var(--orange)}
.ow-knopf[aria-expanded="true"]{border-color:var(--orange);box-shadow:0 0 0 3px rgba(230,126,34,.18)}
.ow-knopf-ic{font-size:19px;flex:0 0 auto;line-height:1}
.ow-knopf-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.ow-knopf-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-knopf-pfad{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-knopf.leer .ow-knopf-name{font-weight:600;color:var(--muted)}
.ow-knopf-pfeil{flex:0 0 auto;color:var(--muted);font-size:15px}

/* ── Hülle: am PC eine schwebende Liste, am Handy ein Blatt ───────── */
.ow-bg{position:fixed;inset:0;z-index:120}
.ow-blatt{position:fixed;display:flex;flex-direction:column;
  max-height:min(70vh,440px);background:var(--surface);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.24)}
.ow-griff{display:none}
.ow-kopf{display:flex;align-items:center;gap:8px;padding:9px 10px;position:relative;
  border-bottom:1px solid var(--line);background:var(--surface)}
.ow-lupe{position:absolute;left:22px;color:var(--muted);font-size:15px;pointer-events:none}
.ow-filter{flex:1 1 auto;min-width:0;min-height:40px;padding:8px 12px 8px 34px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--text);font-family:inherit;font-size:15px}
.ow-filter:focus{outline:none;border-color:var(--orange)}
.ow-zu{flex:0 0 40px;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--muted);font-size:15px;cursor:pointer}
.ow-liste{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:6px 8px 10px;
  -webkit-overflow-scrolling:touch}
.ow-zeile{display:flex;align-items:stretch;gap:2px;
  padding-left:calc(var(--t,0) * 13px)}
/* Der Klappknopf soll die Zeile nicht dominieren: keine Kachel, nur das
   Zeichen – die Fläche zum Antippen bleibt trotzdem voll. */
.ow-klapp{flex:0 0 30px;width:30px;border:1px solid transparent;border-radius:9px;
  background:none;color:var(--muted);font-size:16px;font-weight:800;line-height:1;
  font-family:inherit;cursor:pointer;margin:2px 0}
.ow-klapp:hover{background:var(--bg);border-color:var(--line);color:var(--orange)}
.ow-klapp[aria-expanded="true"]{color:var(--orange)}
.ow-klapp.leer{border:none;background:none;cursor:default}
.ow-wahl{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
  text-align:left;padding:7px 10px;margin:2px 0;border:1px solid transparent;
  border-radius:10px;background:none;color:var(--text);
  font-family:inherit;font-size:14.5px;cursor:pointer}
.ow-wahl:hover{background:var(--bg);border-color:var(--line)}
.ow-wahl .ow-ic{flex:0 0 auto;font-size:16px;line-height:1}
.ow-wahl .ow-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ow-wahl .ow-txt b{font-weight:800}
.ow-wahl .ow-hak{flex:0 0 auto;color:var(--orange);font-weight:900;opacity:0}
.ow-wahl.gewaehlt{background:rgba(230,126,34,.12);border-color:rgba(230,126,34,.45);font-weight:700}
.ow-wahl.gewaehlt .ow-hak{opacity:1}
.ow-nichts{padding:16px 12px;color:var(--muted);font-size:13.5px;text-align:center}
.ow-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-top:1px solid var(--line);background:var(--surface)}
.ow-fuss a,.ow-fuss .ow-alle{font-size:13px;font-weight:700;color:var(--orange);
  background:none;border:none;font-family:inherit;cursor:pointer;text-decoration:none;
  padding:6px 2px}

/* ── Handy: Blatt von unten, Daumenflächen 44 px ──────────────────── */
@media(max-width:820px){
  .ow-bg{background:rgba(15,23,42,.45)}
  .ow-blatt{left:0!important;right:0;bottom:0!important;top:auto!important;width:auto!important;
    max-height:82vh;border-radius:18px 18px 0 0;border-bottom:none;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 4px)}
  .ow-griff{display:block;width:44px;height:5px;border-radius:3px;background:var(--line);
    margin:8px auto 2px}
  .ow-lupe{left:24px}
  .ow-filter,.ow-zu{min-height:44px;height:44px}
  .ow-zu{flex:0 0 44px;width:44px}
  .ow-zeile{padding-left:calc(var(--t,0) * 12px)}
  .ow-klapp{flex:0 0 44px;width:44px;font-size:17px}
  .ow-wahl{min-height:44px;padding:8px 10px;font-size:15px}
  .ow-knopf{min-height:56px}
  .ow-fuss a,.ow-fuss .ow-alle{min-height:44px;display:flex;align-items:center}
}
body.ow-sperre{overflow:hidden}

/* 📱 Ansicht am Handy: leere Upload-Karten raus (v1.32.0b, Karl 24.08.2026)
   „Das am iPhone nur anzeigen unter Bearbeiten oder Anlegen, nicht in der
   Ansicht." Solange keine Rechnung / kein Typenschild hinterlegt ist, war
   das nur eine große gestrichelte Fläche mitten in der Ansicht. Hochgeladen
   wird jetzt im Formular; sobald etwas da ist, zeigt die Ansicht es wieder. */
@media(max-width:820px){
  .inv-card.inv-leer{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   📱 BEARBEITEN/ANLEGEN AM HANDY KOMPAKT (v1.32.0b, Karl 24.08.2026)
   „beim Bearbeiten am iPhone ist sowieso alles recht kompakt zu halten,
    damit das nicht zu viel unübersichtlich wird."
   ───────────────────────────────────────────────────────────────────
   Gemessen waren es 2953 px = 3,5 Bildschirme. Der Platz ging nicht an
   die Felder, sondern an das Drumherum: Kartenpolster, Abstände und
   Beschriftungen, die in Großbuchstaben über zwei Zeilen liefen.

   Die Eingabefelder selbst bleiben 44 px hoch – daran wird NICHT
   gespart, sonst trifft der Daumen nicht mehr.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  .erf-voll .fcard,.wiz-flow .fcard{padding:13px 12px;margin-bottom:12px}
  .erf-voll .fcard h3,.wiz-flow .fcard h3{margin-bottom:10px}
  .erf-voll .frow,.wiz-flow .frow{gap:9px;margin-bottom:9px}
  /* Beschriftung: enger, ohne Sperrung – das spart die zweite Zeile */
  .erf-voll .fld label,.wiz-flow .fld label{letter-spacing:0;margin-bottom:3px;
    line-height:1.25}
  /* Der Zusatz in Klammern ist ein Hinweis, keine Überschrift: klein und
     in normaler Schreibweise. In Großbuchstaben brach er die Zeile um. */
  .erf-voll .fld label small,.wiz-flow .fld label small,
  .erf-voll .fld label .muted-cell,.wiz-flow .fld label .muted-cell{
    text-transform:none;letter-spacing:0;font-weight:600}
  /* Daumenfläche bleibt: 44 px, nur das Polster wird knapper */
  .erf-voll .fld .in,.wiz-flow .fld .in,
  .erf-voll .fld select,.wiz-flow .fld select{min-height:44px;box-sizing:border-box}
  .erf-voll textarea.in,.wiz-flow textarea.in{min-height:88px}
}

/* Zwei kurze Felder dürfen am Handy nebeneinander stehen. Bis v1.31.0b
   erzwang die Karten-Regel unter 430px strikt EINE Spalte – dadurch wurde
   aus „Baujahr | Seriennummer" ein 141-px-Block statt 66 px. Lange Felder
   (.full: Name, Beschreibung, Lagerort) bleiben über die volle Breite. */
@media(max-width:820px){
  .erf-voll .frow,.wiz-flow .frow{
    grid-template-columns:repeat(auto-fit,minmax(152px,1fr))!important}
  .erf-voll .frow > .fld.full,.wiz-flow .frow > .fld.full{
    grid-column:1/-1;min-width:0}
  /* Bilder: die Ablegefläche war 150 px hoch – am Handy reicht die Hälfte,
     das Bild darunter zeigt ohnehin, was drin ist. */
  .erf-voll .drop,.wiz-flow .drop{height:104px}
  .erf-voll .drop .big,.wiz-flow .drop .big{font-size:26px}
}

/* Zustand & Bewertung am Handy: die Punktekarte war 109 px hoch, davon
   das meiste Luft. Eine Zeile reicht – die Zahl bleibt gross genug. */
@media(max-width:820px){
  .erf-voll .score-box,.wiz-flow .score-box{padding:10px 12px;gap:8px;margin-top:6px}
  .erf-voll .score-box .big,.wiz-flow .score-box .big{font-size:24px}
  .erf-voll .score-box .stars,.wiz-flow .score-box .stars{font-size:19px}
  .erf-voll .seg-group,.wiz-flow .seg-group{margin-top:8px}
}

/* 🔎 Cover-Suche im Buch-Scanner (v1.33.0b, Karl 24.08.2026)
   Vorher stand sofort „kein Cover" da, während im Hintergrund noch gesucht
   wurde – das las sich wie ein Ergebnis. Jetzt sieht man, dass es läuft. */
.bs-cover-sucht{display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:12px;line-height:1.3}
.bs-cover-ring{width:22px;height:22px;border-radius:50%;display:block;
  border:2.5px solid rgba(230,126,34,.25);border-top-color:var(--orange);
  animation:bsCoverDreh .8s linear infinite}
@keyframes bsCoverDreh{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bs-cover-ring{animation:none}}

/* ═══════════════════════════════════════════════════════════════════
   📎 BELEGE & DOKUMENTE (v1.34.0b, Karl 24.08.2026)
   Bis v1.33.0b stand in der Ansicht eine Ablegefläche, die nichts getan
   hat – kein Dateifeld, keine Strecke. Jetzt gibt es die Belege wirklich:
   hochgeladen wird im Formular, angezeigt wird in der Ansicht.
   ═══════════════════════════════════════════════════════════════════ */
.attach{display:flex;flex-direction:column;gap:8px}
.att-item{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.att-item .ai{flex:0 0 auto;font-size:19px;line-height:1}
.att-item .an{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;
  text-decoration:none;color:var(--text)}
.att-item .an b{font-size:13.5px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.att-item .an small{font-size:11px;color:var(--muted)}
.att-item .an:hover b{color:var(--orange)}
.att-item form{margin:0;display:flex}
.att-weg{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--muted);
  font-size:14px;cursor:pointer}
.att-weg:hover{border-color:#c0392b;color:#c0392b}
.att-weg[disabled]{opacity:.4;cursor:default}
.attach-form{margin-bottom:8px}
@media(max-width:820px){
  /* Daumenfläche – und die Belege stehen am Handy NUR als Liste da,
     hochgeladen wird unter Bearbeiten (Karl: „raus aus der Übersicht"). */
  .att-item{padding:9px 10px}
  .att-weg{width:44px;height:44px}
}

/* ═══════════════════════════════════════════════════════════════════
   📚 WEITERE INFORMATIONEN (v1.35.0b, Karl 24.08.2026)
   „Alle drei Punkte in eine Unterkategorie packen mit einem Button
    Weitere Informationen." – Nachschlagen, Wo zu kaufen und Allgemeine
   Informationen liegen jetzt hinter einem Knopf, zu von Haus aus.
   Ein <details>: kein eigenes JavaScript nötig.
   ═══════════════════════════════════════════════════════════════════ */
.mehr-info{margin-top:18px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);overflow:hidden}
.mi-knopf{display:flex;align-items:center;gap:11px;padding:13px 14px;
  cursor:pointer;list-style:none;min-height:56px;user-select:none}
.mi-knopf::-webkit-details-marker{display:none}   /* eigenes Dreieck */
.mi-knopf:hover{background:var(--bg)}
.mi-ic{flex:0 0 auto;font-size:20px;line-height:1}
.mi-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.mi-txt b{font-size:14.5px;font-weight:800;color:var(--ink)}
.mi-txt small{font-size:11.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mi-zahl{flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;
  background:var(--navy);color:#fff;font-size:11.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center}
.mi-pfeil{flex:0 0 auto;color:var(--muted);font-size:17px;line-height:1;
  transition:transform .18s ease}
.mehr-info[open] .mi-pfeil{transform:rotate(180deg)}
.mehr-info[open] .mi-knopf{border-bottom:1px solid var(--line)}
.mi-inhalt{padding:12px 12px 14px;display:flex;flex-direction:column;gap:12px}
.mi-inhalt > *{margin-top:0!important}
.mi-inhalt .inv-card,.mi-inhalt .card{margin-top:0}
@media(prefers-reduced-motion:reduce){.mi-pfeil{transition:none}}
@media(max-width:820px){
  .mi-knopf{min-height:60px;padding:14px}      /* Daumenfläche satt */
  .mi-inhalt{padding:10px 10px 12px;gap:10px}
}

/* ↩️ Erfassungsmodus: Zurück in der Kopfleiste (v1.36.0b, Karl 24.08.2026)
   „Hier gibt es weder einen Abbruch noch Zurück-Knopf." */
.cp-back{flex:0 0 44px;width:44px;height:44px;border:none;border-radius:12px;
  background:rgba(255,255,255,.14);color:#fff;font-size:19px;font-weight:800;
  font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cp-back:hover{background:rgba(255,255,255,.24)}
.cp-head .cp-brand{flex:1 1 auto;min-width:0}

/* ═══════════════════════════════════════════════════════════════════
   🧭 ERFASSUNG: ERST ARTIKEL ODER BUCH (v1.36.0b, Karl 24.08.2026)
   „nach dem Start soll das schnelle Erfassen zuerst fragen Artikel oder
    Buch. Ich komme aber gleich in die Auswahlmöglichkeit."
   ═══════════════════════════════════════════════════════════════════ */
.cp-wahl{display:flex;flex-direction:column;gap:12px;padding:6px 0 4px}
.cp-wahl-frage{font-size:15px;font-weight:800;color:var(--ink);margin:6px 2px 2px}
/* Einer der beiden Wege ist ein Verweis (Buch → Scanner), der andere ein
   Knopf. Sie müssen gleich aussehen – sonst unterstreicht der Browser den
   einen und der andere wirkt tot. */
.cp-wahl-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:18px 16px;min-height:84px;border:2px solid var(--line);border-radius:16px;
  background:var(--surface);color:var(--text);font-family:inherit;cursor:pointer;
  text-decoration:none;box-sizing:border-box}
.cp-wahl-btn,.cp-wahl-btn *{text-decoration:none}
.cp-wahl-btn:hover,.cp-wahl-btn:focus-visible{border-color:var(--orange);
  background:var(--bg);outline:none}
.cp-wahl-btn:active{transform:scale(.99)}
.cw-ic{flex:0 0 auto;font-size:32px;line-height:1}
.cw-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.cw-tx b{font-size:18px;font-weight:800;color:var(--ink)}
.cw-tx small{font-size:12.5px;color:var(--muted)}
.cw-pf{flex:0 0 auto;font-size:20px;color:var(--orange);font-weight:800}

/* Abbrechen neben dem Anlegen-Knopf */
.cp-akt{display:flex;gap:10px;align-items:stretch;margin-top:18px}
.cp-akt .cp-save{margin-top:0;flex:1 1 auto}
.cp-abbruch{flex:0 0 auto;min-width:132px;min-height:52px;padding:0 18px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--muted);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.cp-abbruch:hover{border-color:#c0392b;color:#c0392b}
@media(max-width:420px){
  .cp-abbruch{min-width:0;flex:0 0 44%;padding:0 10px;font-size:14px}
}

/* Kopfleiste der Erfassung am Handy: mit dem neuen Zurück-Pfeil wurde es
   eng – „ESISO Retro-Lager" lief über den Ausweis-Knopf (gemessen am
   iPhone). Der Zusatz ist Schmuck und tritt dort zurück. */
.cp-head{flex-wrap:nowrap}
.cp-brand{min-width:0;overflow:hidden}
.cp-brand b{white-space:nowrap}
.cp-aw{flex:0 0 auto}
@media(max-width:560px){
  .cp-head{padding:10px 12px;gap:8px}
  .cp-sub{display:none}
  .cp-brand{font-size:17px}
  .cp-exit{font-size:12.5px;padding:9px 11px}
  .cp-back{flex:0 0 40px;width:40px;height:40px;font-size:17px}
}

/* ═══════════════════════════════════════════════════════════════════
   🎛️ FILTERBANK IM INVENTAR (v1.38.0b, Karl 24.08.2026)
   Kopf = Weg D (2×2-Kacheln), Rest = Variante 2 (ruhige Zeilen im Blatt).
   Vorher standen neun gleich laute Bedienelemente übereinander.
   ═══════════════════════════════════════════════════════════════════ */
.fb{margin:0 0 14px}
.fb-such{position:relative;margin-bottom:9px}
.fb-such input{width:100%;height:50px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--text);font-size:15px;padding:0 14px 0 42px;
  box-sizing:border-box;font-family:inherit}
.fb-such input:focus{outline:none;border-color:var(--orange)}
.fb-lupe{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:16px;pointer-events:none}

/* ── Die vier Kacheln ───────────────────────────────────────────── */
.fb-raster{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}
.fb-kachel{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:9px 11px;min-width:0;min-height:56px;display:block;
  cursor:pointer}
.fb-kachel.an{border-color:var(--orange);background:rgba(232,154,60,.10)}
.fb-kachel.aus{opacity:.55}
.fb-l{font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:3px}
.fb-v{font-size:14.5px;font-weight:800;color:var(--ink);display:flex;
  align-items:center;justify-content:space-between;gap:6px}
.fb-w{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-v i{color:var(--muted);font-size:11px;font-style:normal;flex:0 0 auto}
.fb-kachel.an .fb-v{color:var(--orange-dark)}
/* Das echte Auswahlfeld liegt unsichtbar über der Kachel – am iPhone
   öffnet das die gewohnte Auswahl, ohne eigenen Nachbau. */
.fb-kachel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  border:none;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.fb-kachel select:disabled{cursor:default}
.fb-kachel:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,154,60,.18)}

/* ── Zeile mit „Mehr Filter" und Zähler ─────────────────────────── */
.fb-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-mehr{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--text);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  white-space:nowrap}
.fb-mehr.an{border-color:var(--orange);color:var(--orange-dark);background:rgba(232,154,60,.12)}
.fb-zahl{background:var(--orange);color:#fff;font-size:11px;font-weight:800;
  border-radius:99px;min-width:19px;height:19px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 5px}
.fb-zaehler{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.fb-zaehler b{color:var(--ink);font-weight:800}

/* ── Das Blatt mit dem Rest ─────────────────────────────────────── */
.fb-bg{position:fixed;inset:0;z-index:140;background:rgba(15,25,45,.45);
  display:flex;align-items:flex-end;justify-content:center}
.fb-sheet{width:100%;max-width:520px;background:var(--surface);
  border-radius:18px 18px 0 0;padding:8px 14px 16px;max-height:86vh;overflow-y:auto;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.fb-griff{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px}
.fb-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.fb-kopf b{font-size:17px;font-weight:800;color:var(--ink)}
/* Eigene Klasse, weil der Dunkelmodus klassenlose Verweise blau färbt
   (html[data-theme="dark"] a:not([class])) – gemessen. */
.fb-kopf .fb-reset{font-size:13px;font-weight:700;color:var(--orange-dark);
  text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.fb-liste{background:var(--bg);border:1px solid var(--line);border-radius:13px;
  overflow:hidden;margin-bottom:14px}
.fb-lz{position:relative;display:flex;align-items:center;gap:11px;padding:0 13px;
  width:100%;min-height:56px;border-bottom:1px solid var(--line);
  background:none;border-left:none;border-right:none;border-top:none;
  font-family:inherit;text-align:left;color:var(--text);cursor:pointer}
.fb-liste > *:last-child{border-bottom:none}
.fb-ic{flex:0 0 auto;font-size:17px}
.fb-nm{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--ink)}
.fb-nm small{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:1px}
.fb-wert{flex:0 0 auto;font-size:14px;color:var(--muted);font-weight:700;
  max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-wert.an{color:var(--orange-dark)}
.fb-pf{flex:0 0 auto;color:var(--muted);font-size:14px}
.fb-weg{flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  text-decoration:none;font-size:13px}
.fb-lz select{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  border:none;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.fb-lz input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px}
.fb-schalter{flex:0 0 52px;width:52px;height:31px;border-radius:99px;
  background:var(--line);position:relative;transition:background .18s ease}
.fb-schalter i{position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;
  background:#fff;display:block;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .18s ease}
.fb-schalter.an{background:var(--orange)}
.fb-schalter.an i{left:24px}
.fb-lz:focus-within{background:var(--tile)}

.fb-tags{display:flex;flex-wrap:wrap;gap:7px;padding:11px 13px;
  border-bottom:1px solid var(--line);background:var(--tile)}
.fb-tag{padding:8px 11px;min-height:38px;display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--text);text-decoration:none;font-size:13.5px;font-weight:700}
.fb-tag small{color:var(--muted);font-weight:600}
.fb-tag.ist-aktiv{border-color:var(--orange);color:var(--orange-dark);
  background:rgba(232,154,60,.12)}

.fb-akt{display:flex;gap:9px}
.fb-btn-grau{flex:0 0 auto;min-height:50px;padding:0 18px;border:1px solid var(--line);
  border-radius:13px;background:var(--surface);color:var(--muted);text-decoration:none;
  font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.fb-btn-orange{flex:1;min-height:50px;border:none;border-radius:13px;
  background:var(--orange);color:#fff;font-family:inherit;font-size:15.5px;
  font-weight:800;cursor:pointer}
body.fb-sperre{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .fb-schalter,.fb-schalter i{transition:none}
}
/* Am PC ist Platz: die vier Kacheln nebeneinander */
@media(min-width:821px){
  .fb-raster{grid-template-columns:repeat(4,1fr)}
  .fb-bg{align-items:center}
  .fb-sheet{border-radius:18px;max-height:80vh}
}

/* ══════════════════════════════════════════════════════════════════
   🪪 STECKBRIEF + BLÖCKE der Detailansicht (v1.39.0b, „Weg A+")

   Karl, 24.08.2026. Vorher: 3239 px Seitenlänge, der Name des Artikels
   erst bei 687 px, sieben leere Felder als „—", zehn Eingabefelder in
   einer ANSICHT und zweimal „Bearbeiten" gleichzeitig sichtbar.
   ══════════════════════════════════════════════════════════════════ */

/* ── Kopfzeile ──────────────────────────────────────────────────── */
.db-kopfzeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.db-brot{flex:1;min-width:0;font-size:14px;color:var(--muted);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-brot b{color:var(--ink);font-weight:700}
.mono,.db-brot b.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:.3px}
@media(max-width:820px){ .nur-pc{display:none!important} }

/* ── Steckbrief ─────────────────────────────────────────────────── */
.sb-kopf{display:flex;gap:13px;align-items:flex-start;margin-bottom:11px}
.sb-foto{flex:0 0 104px;width:104px;height:104px;border-radius:14px;background:var(--tile);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:40px;position:relative;overflow:hidden;cursor:zoom-in}
.sb-foto.leer{cursor:default}
.sb-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sb-foto.ist-buch{border-radius:5px 14px 14px 5px}
.sb-foto.ist-buch img{object-fit:contain;background:var(--tile)}
.sb-zahl{position:absolute;right:4px;bottom:4px;font-size:10px;font-weight:700;
  color:var(--ink);background:var(--surface);border-radius:6px;padding:3px 6px;
  box-shadow:0 1px 4px rgba(0,0,0,.18)}
.sb-txt{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:5px;min-height:104px}
.sb-titel{font-size:21px;line-height:1.22;font-weight:700;color:var(--ink);margin:0;
  overflow-wrap:anywhere;hyphens:auto}
.sb-unter{font-size:14px;line-height:1.35;color:var(--muted)}
.sb-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:13px}
.sb-chip{font-size:12px;font-weight:700;padding:8px 11px;border-radius:99px;
  background:var(--tile);color:var(--ink);border:1px solid var(--line)}
.sb-chip.gruen{background:rgba(63,169,114,.14);color:#2b7a51;border-color:rgba(63,169,114,.35)}
.sb-chip.rot{background:rgba(217,106,91,.14);color:#9b3a2c;border-color:rgba(217,106,91,.38)}
.sb-chip.gelb{background:rgba(232,185,60,.16);color:#7d5f0e;border-color:rgba(232,185,60,.42)}
html[data-theme="dark"] .sb-chip.gruen{color:#7fd6a8}
html[data-theme="dark"] .sb-chip.rot{color:#f0a294}
html[data-theme="dark"] .sb-chip.gelb{color:#e8c96b}
.sb-lese{margin:0}
.sb-lese .lese-sel{min-height:44px}

/* ── Kachelraster (dieselbe Machart wie die Filterbank) ─────────── */
.sb-raster{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.sb-ka{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:11px 12px;min-height:78px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
a.sb-ka:hover{border-color:var(--orange)}
.sb-ka.warn{border-color:rgba(232,185,60,.55)}
.sb-ka-l{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px;
  text-transform:uppercase;display:flex;align-items:center;gap:5px}
.sb-ka-w{font-size:16px;line-height:1.25;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.sb-ka-w.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:15px;letter-spacing:.3px}
.sb-ka-w.mono.lang{font-size:13px;letter-spacing:0}
.sb-ka-w.leer{color:var(--muted);font-weight:600}
.sb-ka-w.warn-t{color:#b4442f}
html[data-theme="dark"] .sb-ka-w.warn-t{color:#f0a294}
.sb-ka-k{font-size:11.5px;line-height:1.35;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Lichtkasten mit Pfeilen ────────────────────────────────────── */
.lb-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;border:none;background:rgba(255,255,255,.9);color:#1F3864;
  font-size:26px;line-height:1;cursor:pointer;z-index:2;display:none}
.lb-pfeil.da{display:block}
.lb-links{left:12px} .lb-rechts{right:12px}
.lb-zahl{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700;
  padding:6px 13px;border-radius:99px}

/* ── Blöcke ─────────────────────────────────────────────────────── */
.db-inhalt{display:flex;flex-direction:column;gap:12px}
/* Ohne das erzeugt der leere Behaelter #notes weiter einen 12-px-Abstand
   und man sieht ein Loch zwischen zwei Bloecken. */
.db-inhalt > #notes{display:contents}
.db-block{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow)}
/* Leerer Bereich: nur noch ein Sprungziel, keine graue Leiste mehr.
   Er MUSS im Baum bleiben, damit die Anlege-Zeile unten hinspringen kann. */
/* Ganz weg – sonst erzeugt das leere Element im Flex-Container weiter
   einen 12-px-Abstand und man sieht ein Loch, wo nichts steht. */
.db-nur-anker{display:none}
.db-nur-anker:target{display:block;border:1px solid var(--orange)}
.db-titel{display:flex;align-items:center;gap:9px;min-height:48px;padding:0 14px;
  font-size:15px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.db-zahl{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
.db-t-akt{margin-left:auto;display:flex;gap:8px;align-items:center}
.db-z{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;min-height:48px;
  border-bottom:1px solid var(--line)}
.db-z:last-child{border-bottom:0}
.db-l{flex:0 0 118px;font-size:13px;line-height:1.35;color:var(--muted)}
.db-w{flex:1;min-width:0;font-size:14px;line-height:1.35;font-weight:700;color:var(--ink);
  overflow-wrap:anywhere}
.db-w.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.3px}
.db-w.frei{font-weight:400;color:var(--text)}
.db-z.leer .db-w{color:var(--muted);font-weight:400}
.db-frei{padding:13px 14px;font-size:14px;line-height:1.55;color:var(--text);
  border-bottom:1px solid var(--line)}
.db-frei:last-child{border-bottom:0}
.db-quelle{display:block;margin-top:5px;font-size:12px;color:var(--muted)}
.db-hin{padding:10px 14px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.db-mehr{display:block;padding:13px 14px;font-size:13.5px;font-weight:700;
  color:var(--orange-dark);text-decoration:none;border-top:1px solid var(--line)}

/* Leere Felder eines Blocks: EINE ruhige Zeile statt vieler „—" */
.db-rest{border-top:1px solid var(--line)}
.db-rest > summary{display:flex;align-items:center;gap:7px;min-height:48px;padding:0 14px;
  font-size:13px;color:var(--muted);cursor:pointer;list-style:none}
.db-rest > summary::-webkit-details-marker{display:none}
.db-rest > summary b{color:var(--ink);font-weight:600}
.db-pf{margin-left:auto;color:var(--muted);font-size:15px;transition:transform .18s ease}
details[open] > summary .db-pf{transform:rotate(90deg)}

/* Einträge (Protokolle, Belege, Verknüpfungen, Aufgaben) */
.db-e{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.db-e:last-child{border-bottom:0}
.db-e-ic{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--tile);
  display:flex;align-items:center;justify-content:center;font-size:16px}
.db-e-tx{min-width:0;flex:1;text-decoration:none;color:inherit}
.db-e-tx b{display:block;font-size:14px;line-height:1.3;font-weight:700;color:var(--ink);
  overflow-wrap:anywhere}
.db-e-tx small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted)}

/* Anlegen: steckt in einem <details>, damit die ANSICHT ohne Formulare auskommt */
.db-neu{border-top:1px solid var(--line)}
.db-block > .db-neu:first-of-type:not(:last-child){border-top:1px solid var(--line)}
.db-neu > summary{display:flex;align-items:center;gap:9px;min-height:48px;padding:0 14px;
  font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.db-neu > summary::-webkit-details-marker{display:none}
.db-plus{color:var(--orange-dark);font-size:16px;font-weight:800}
.db-neu-inhalt{padding:4px 14px 14px;display:flex;flex-direction:column;gap:9px}
.db-neu-reihe{flex-direction:row;flex-wrap:wrap}
.db-neu .note-add,.db-neu .il-add{padding:4px 14px 14px}
.db-datei{display:flex;align-items:center;min-height:48px;padding:0 14px;cursor:pointer;
  text-decoration:none;
  border:1px dashed var(--line);border-radius:12px;background:var(--tile);
  font-size:13.5px;font-weight:700;color:var(--ink)}

/* Score */
.db-score{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 14px}
.db-sterne{font-size:19px}
.db-score b{color:var(--navy);font-size:15px}
html[data-theme="dark"] .db-score b{color:var(--ink)}
.db-score small{color:var(--muted);font-size:12px}
.db-kosten{display:flex;flex-wrap:wrap;gap:7px;padding:12px 14px;
  border-bottom:1px solid var(--line)}

/* Etikett & QR */
.db-qr{display:flex;gap:13px;align-items:center;padding:13px 14px}
.db-qr-bild{flex:0 0 auto;line-height:0}
.db-qr-bild svg{width:96px;height:96px;display:block}
.db-qr-tx{min-width:0}
.db-qr-tx b{display:block;font-size:16px;color:var(--ink)}
.db-qr-tx small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.db-qr-tx .db-mehr{border-top:0;padding:0;min-height:44px;display:flex;align-items:center}

/* ── „Noch nichts erfasst" – die Sammelzeile ────────────────────── */
.db-leer-tt{padding:6px 2px 0;font-size:12px;font-weight:700;color:var(--muted);
  letter-spacing:.6px;text-transform:uppercase}
.db-leer{display:flex;flex-wrap:wrap;gap:8px}
.db-lb{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;
  border:1px dashed var(--line);border-radius:13px;background:var(--surface);
  color:var(--ink);font-size:13.5px;font-weight:700;text-decoration:none}
.db-lb i{font-style:normal;color:var(--orange-dark);font-weight:800;font-size:15px}
.db-lb:hover{border-color:var(--orange);border-style:solid}

/* ── Am PC ist Platz ────────────────────────────────────────────── */
@media(min-width:821px){
  .sb-raster{grid-template-columns:repeat(4,1fr)}
  .sb-foto{flex-basis:140px;width:140px;height:140px}
  .sb-txt{min-height:140px}
  .sb-titel{font-size:26px}
  .db-l{flex-basis:190px}
}

/* Die noch nicht umgebauten Karten (Verleih, Rezensionen, weitere
   Ausgaben) sitzen im selben Fluss – damit sie nicht wie Fremdkörper
   wirken, bekommen sie Rahmen und Kopfzeile der neuen Blöcke.
   Der Inhalt bleibt unangetastet. */
.db-inhalt > .card,.db-inhalt .mehr-info{margin-top:0!important;border-radius:16px;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.db-inhalt > .card > h3{font-size:15px;font-weight:700;margin:-20px -20px 14px;
  min-height:48px;padding:0 14px;border-bottom:1px solid var(--line)}
.db-inhalt > .card > h3 .bar{display:none}
@media(max-width:820px){
  .db-inhalt > .card > h3{margin:-15px -15px 12px}
}
.db-score b.leer{color:var(--muted);font-weight:600}
/* Miniatur in einer Belegzeile – sticht die grosse .inv-prev-Regel */
.db-e img.db-e-vor{width:48px;height:48px;flex:0 0 48px;border-radius:10px;
  object-fit:cover;border:1px solid var(--line);cursor:zoom-in;background:var(--surface)}
.db-kosten-tt{padding:12px 14px 0;font-size:13px;font-weight:700;color:var(--ink)}
.db-kosten-tt + .db-kosten{padding-top:8px}
/* Der Beleg-Loeschknopf ist am Handy eine Daumenflaeche */
.db-e .att-weg{flex:0 0 44px;width:44px;height:44px;border:0;background:none;
  color:var(--muted);font-size:16px;cursor:pointer;border-radius:11px}
.db-e .att-weg:hover{background:var(--tile);color:var(--red)}
/* Bild-Aktionen im Lichtkasten (Hauptbild, Rückseite, Löschen) */
.lb-akt{position:absolute;left:0;right:0;bottom:56px;display:flex;justify-content:center;
  z-index:3;pointer-events:none}
.lb-set{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:0 12px;
  pointer-events:auto}
.lb-set form{margin:0}
.lb-b{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:0;
  border-radius:99px;background:rgba(255,255,255,.92);color:#1F3864;
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.lb-b.ist{background:rgba(232,154,60,.95);color:#fff;cursor:default}
.lb-b.lb-weg{background:rgba(217,106,91,.95);color:#fff}

/* ── Gleiche Kante für alles im Block ────────────────────────────────
   Karl, 25.08.2026 (Bild): Im Block „Exemplare dieses Titels" saß die
   Karte 14 px weiter links als die Überschrift und stieß an den runden
   Rand. Gemessen betraf es fünf Bausteine, die ihren Innenabstand von
   der alten `.card` bezogen hatten (die hatte 20 px rundum). Im
   `.db-block` sitzt der Abstand an den Zeilen selbst – diese hier
   bekommen ihn nachgereicht. */
.db-block > .ex-liste,
.db-block > .heft-raster,
.db-block > .reihe-chips,
.db-block > .note-row,
.db-block > .note-edit,
.db-block > .cost-list,
.db-block > .table-wrap,
.db-block > .log-group,
.db-block > .logentry,
.db-block > #logCards,
.db-block > .med-row{padding-left:14px;padding-right:14px}
.db-block > #logCards > .log-group,
.db-block > #logCards > .logentry{padding-left:0;padding-right:0}
.db-block > .ex-liste{padding-bottom:14px}
.db-block > .heft-raster,
.db-block > .reihe-chips{padding-bottom:12px}

/* ── Springen zu einem Bereich (v1.39.1b) ────────────────────────────
   Die Überschrift soll nach dem Sprung weit oben stehen und nicht unter
   der festen Kopfleiste verschwinden. Gemessen: Kopfleiste 65 px am
   Handy, 69 px am PC – dazu etwas Luft. */
.db-block,.db-inhalt > .card,.db-inhalt .mehr-info{scroll-margin-top:78px}
@media(min-width:821px){
  .db-block,.db-inhalt > .card,.db-inhalt .mehr-info{scroll-margin-top:16px}
}

/* Einmal aufblitzen, damit man den Sprung bemerkt */
@keyframes db-blitz{
  0%  {box-shadow:0 0 0 0 rgba(232,154,60,.65), var(--shadow)}
  18% {box-shadow:0 0 0 4px rgba(232,154,60,.65), var(--shadow)}
  42% {box-shadow:0 0 0 2px rgba(232,154,60,.22), var(--shadow)}
  62% {box-shadow:0 0 0 4px rgba(232,154,60,.60), var(--shadow)}
  100%{box-shadow:0 0 0 0 rgba(232,154,60,0),   var(--shadow)}
}
.db-blitz{animation:db-blitz 1.8s ease-out 1;border-color:var(--orange)}
/* Wer Bewegung reduziert hat, bekommt den Rahmen ohne Pulsieren */
@media(prefers-reduced-motion:reduce){
  .db-blitz{animation:none;box-shadow:0 0 0 3px rgba(232,154,60,.5), var(--shadow)}
}
/* Die Brotkrume führt zurück ins Inventar – ohne blaue Verweisfarbe */
.db-brot-weg{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:1px}
.db-brot-weg:hover{color:var(--ink);border-bottom-color:var(--orange)}

/* 📄 Notausgang unter einer Dateiauswahl (nur Tablet/Handy, siehe app.js).
   Unauffällig, aber mit Daumenfläche – Karl, 25.08.2026. */
.datei-frei{display:block;margin:5px 0 0;font-size:12px;color:var(--muted);line-height:1.35}

/* ══════════════════════════════════════════════════════════════════
   📖 LESEN – der Weg ins hinterlegte eBook (Karl, 26.08.2026:
   „wie kann ich das in der App lesen … wo machen wir das schön?")
   Steht direkt unter Titel und Autor, nicht als Fußnote ganz unten.
   Daumenfläche 44 px, am Handy nimmt „Lesen" die freie Breite.
   ══════════════════════════════════════════════════════════════════ */
.sb-lesen{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 13px}
.lese-knopf{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:0 20px;border-radius:12px;background:var(--orange);color:#fff;
  font-weight:800;font-size:15.5px;text-decoration:none;border:1px solid transparent;
  box-shadow:0 1px 2px rgba(31,56,100,.14)}
.lese-knopf:hover{filter:brightness(.96)}
.lese-knopf:active{transform:translateY(1px)}
.lese-sichern{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 14px;border-radius:12px;background:var(--surface);
  color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:14px;
  text-decoration:none}
.lese-info{flex:1 1 100%;font-size:12px;color:var(--muted);line-height:1.35}
@media(max-width:620px){
  .lese-knopf{flex:1 1 auto}
}
html[data-theme="dark"] .lese-sichern{background:var(--tile)}

/* 📗🎧 Buch UND Hörbuch desselben Titels – das ist kein Fehler, darum
   ruhiges Blau statt der warnenden Sandfarbe von „nc-ask"
   (Karl, 26.08.2026: „sollte die Warnmeldung anders aussehen"). */
.nc-info{background:linear-gradient(90deg,rgba(31,56,100,.07),transparent 70%);
  border-radius:10px;padding:10px;border-bottom:0;margin-bottom:4px}
.nc-info .nc-answer{display:inline-flex;margin-right:6px}
html[data-theme="dark"] .nc-info{background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 70%)}

/* 📗🎧 Derselbe Titel als anderes Medium ist kein Fehler – der Kasten
   verliert dafür sein rotes Warnkleid und wird ruhig navy
   (Karl, 26.08.2026). Die Verknüpfen-Zeile hat Daumenfläche. */
.dup-warn.ist-ausgabe{border-color:var(--navy);border-style:solid;
  background:rgba(31,56,100,.06)}
html[data-theme="dark"] .dup-warn.ist-ausgabe{background:rgba(255,255,255,.07)}
.dup-link-an{display:flex;align-items:center;gap:9px;min-height:44px;
  flex:1 1 100%;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.dup-link-an input{width:20px;height:20px}
.dup-link-an[hidden]{display:none}

/* 📥 Einspiel-Ordner: der zweite Weg neben dem Hochladen
   (Karl, 26.08.2026: „Das Hörbuch hat 600 MB"). Optisch abgesetzt,
   damit klar ist: entweder – oder. */
.einspiel{margin-top:10px;padding:10px 12px;border:1px dashed var(--line);
  border-radius:10px;background:var(--tile)}
.einspiel-kopf{font-size:13px;margin-bottom:7px;color:var(--ink)}
.einspiel select.in{min-height:44px}
html[data-theme="dark"] .einspiel{background:rgba(255,255,255,.04)}

/* 🔐 „Gerät merken" beim 2FA-Code – Daumenfläche, linksbündig,
   damit der Satz lesbar bleibt (Karl, 26.08.2026). */
.merk-zeile{display:flex;align-items:center;gap:10px;min-height:44px;
  margin:10px 0 6px;font-size:13.5px;text-align:left;cursor:pointer}
.merk-zeile input{width:20px;height:20px;flex:0 0 20px}

/* 🔐 Gemerkte Geräte im Profil */
.ger-block{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  background:var(--tile)}
.ger-kopf{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:8px;font-size:14px}
.ger-zeile{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.ger-zeile:first-of-type{border-top:0}
.ger-tx{flex:1;min-width:180px;font-size:13.5px}
.ger-jetzt{display:inline-block;margin-left:7px;font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:99px;background:rgba(63,169,114,.16);color:#2b7a51}
.ger-zeile .btn-grey,.ger-block .btn-red{min-height:44px}

/* ═══ 💾 Sicherung (v1.47.1b) ═══════════════════════════════════════════ */
.sv-kopf{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 18px;margin:6px 0 14px}
.sv-kopf b{overflow-wrap:anywhere}
.sv-warn{background:#FBF0DC;color:#7a5310;border:1.5px solid #E8B93C;border-radius:10px;padding:10px 13px;font-size:13.5px;margin-bottom:12px}
.sv-ok{background:#E4F5EC;color:#2F7D52;border-radius:10px;padding:10px 13px;font-size:13.5px;margin-bottom:12px}
html[data-theme="dark"] .sv-warn{background:#33291a;color:#E8B93C}
html[data-theme="dark"] .sv-ok{background:#1a3326;color:#5FCB8E}
.sv-liste .r{padding:7px 12px}
.sv-kopfzeile{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sv-z{flex:0 0 64px;text-align:right;font-variant-numeric:tabular-nums}
.sv-bleibt{opacity:.6}
.sv-form{margin-top:14px}
.sich-liste .r{padding:6px 12px}
.sich-liste .btn-grey{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0}

/* 👤 v1.47.1b: Profil-Kürzel mittig. Gemessen am 21.10.2026: am Handy stand
   „KA" oben links im Kreis, weil .only-mobile{display:block!important}
   (Handy-Abschnitt weiter oben) das display:flex des Kreises schlug.
   Betraf alle ohne Profilbild. */
@media(max-width:820px){ .kopf-ich.only-mobile{display:flex!important} }
#s-backup .in,#s-backup select.in,.sv-form .in{min-height:44px}

/* ═══ 👍 DAUMENREGEL 44 px (v1.48.0b) ════════════════════════════════════
   Gemessen am 21.10.2026 bei 390 px: 140 Symbol-Knöpfe in den
   Einstellungen mit 34 px, „Ist ok, habe ich wirklich doppelt" mit 29 px,
   Schlagwort-Vorschläge mit 23 px, Eingabefelder mit 38–43 px, kleine
   Knöpfe (.btn-sm) mit 38 px. Karls Regel: jede Bedienfläche am Handy
   mindestens 44 px. Steht bewusst am Ende, damit es alles Frühere schlägt.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  .in,select.in,input.in,.fld .in,.fld select,.rz-lvl-in{min-height:44px}
  .btn-sm{min-height:44px!important}
  .nc-btn,.tag-chip,.wz-chip{min-height:44px}
  .fav,.icon-btn,.set-panel .r button{min-height:44px;min-width:44px}
  /* Symbol-Knöpfe in Listenzeilen hatten feste 30–34 px */
  .rowact button,.lst .r .rowact button,.lg-acts button,.lg-acts a.iconbtn{width:44px;height:44px}
  .set-list button{min-height:44px;min-width:44px}
  .set-panel details>summary{min-height:44px;display:flex;align-items:center}
  .seg button,.seg-toggle button{min-height:44px;min-width:44px}
}

/* ═══ 🔋 Pflege-Plan (v1.49.0b) ═════════════════════════════════════════ */
.pf-warn{background:#FBF0DC;color:#7a5310;border:1.5px solid #E8B93C;border-radius:10px;padding:10px 13px;font-size:13.5px;margin-bottom:10px}
html[data-theme="dark"] .pf-warn{background:#33291a;color:#E8B93C}
.pf-liste{display:flex;flex-direction:column}
.pf-zeile{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;padding:11px 0;border-bottom:1px solid var(--line)}
.pf-zeile:last-child{border-bottom:none}
.pf-haken{flex:0 0 24px;height:24px;border-radius:7px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin-top:1px}
.pf-ok .pf-haken,.pf-erledigt .pf-haken{background:var(--green);border-color:var(--green);color:#fff}
.pf-faellig .pf-haken{border-color:#E8B93C;background:#FBF0DC}
html[data-theme="dark"] .pf-faellig .pf-haken{background:#33291a}
.pf-tx{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-tx b{color:var(--ink)}
.pf-ding{text-decoration:none;color:inherit}
.pf-warum summary{cursor:pointer;color:var(--muted);font-size:12.5px;min-height:32px;display:flex;align-items:center}
.pf-warum p,.pf-hinweis{font-size:13px;color:var(--text);margin:4px 0 2px;max-width:65ch}
.pf-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 100%;padding-left:36px}
.pf-mess{width:120px;flex:0 0 auto}
.pf-vorlagen{display:flex;flex-direction:column;gap:8px}
.pf-vorlage{border:1.5px solid var(--line);border-radius:10px;padding:0 12px}
.pf-vorlage>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;list-style:none;padding:6px 0}
.pf-vorlage>summary::-webkit-details-marker{display:none}
.pf-v-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-aus{opacity:.6}
.pf-neu{border-style:dashed;margin-top:8px}
.pf-v-form{display:flex;flex-direction:column;gap:6px;padding:4px 0 12px}
.pf-aktiv{display:flex;align-items:center;gap:8px;min-height:44px}
.pf-aktiv input{width:20px;height:20px}
.knopfreihe-pf{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:820px){ .pf-form{padding-left:0} .pf-warum summary{min-height:44px} }

/* ═══ 🧩 Vollständigkeit · 💶 Wert · 🛡️ Versicherungsmappe (v1.50.0b) ═══ */
.vt-kopf{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:8px}
.vt-balken{height:8px;border-radius:5px;background:var(--tile);overflow:hidden;margin-bottom:6px}
.vt-balken i{display:block;height:100%;background:var(--orange);border-radius:5px}
.vt-liste{display:flex;flex-direction:column}
.vt-zeile{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--line)}
.vt-zeile:last-child{border-bottom:none}
.vt-zeile form:first-child{flex:1;min-width:0}
.vt-haken{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;background:none;border:none;padding:0;
  text-align:left;font:inherit;color:var(--text);cursor:pointer}
.vt-box{flex:0 0 22px;height:22px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800}
.vt-haken.an .vt-box{background:var(--green);border-color:var(--green)}
.wv-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}
.wv-zahl{font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.wv-svg{width:100%;max-width:520px;height:auto;display:block;margin:4px 0 8px}
.wv-svg text{fill:var(--muted);font-size:10px}
.wv-achse{stroke:var(--line);stroke-width:1}
.wv-hilfe{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.wv-flaeche{fill:var(--green);fill-opacity:.14}
.wv-linie{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linejoin:round}
.wv-punkt{fill:var(--green)}
.wv-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.wv-form{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.wv-liste{margin-top:10px}
.wv-liste summary{cursor:pointer;color:var(--muted);min-height:44px;display:flex;align-items:center}
.wv-zeile{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.wv-zeile .muted-cell{flex:1;min-width:0}
.tl-sub{border-top:1px solid var(--line);padding:10px 0 4px;display:flex;flex-direction:column;gap:6px}
.tl-chips{display:flex;flex-wrap:wrap;gap:6px}
.tl-chip{display:inline-flex;align-items:center;gap:2px;background:var(--tile);border-radius:20px;padding-left:12px;font-size:13px}
.tl-chip button{background:none;border:none;color:var(--muted);min-width:44px;min-height:44px;cursor:pointer;font-size:14px}
.tl-neu summary{cursor:pointer;color:var(--navy);min-height:44px;display:flex;align-items:center;font-weight:600}
html[data-theme="dark"] .tl-neu summary{color:var(--ink)}
.tl-form{display:flex;flex-wrap:wrap;gap:8px}
.tl-form .in{flex:1 1 240px;min-width:0}
.vm-warn{background:#FBF0DC;color:#7a5310;border:1.5px solid #E8B93C;border-radius:10px;padding:10px 13px;font-size:13.5px;margin:12px 0}
html[data-theme="dark"] .vm-warn{background:#33291a;color:#E8B93C}
.vm-raeume{display:flex;flex-direction:column;gap:18px;margin-top:12px}
.vm-raum-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px solid var(--orange);padding-bottom:4px;flex-wrap:wrap}
.vm-raum-kopf h2{font-size:17px;color:var(--ink);margin:0}
.vm-g-kopf{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);padding:8px 0 4px;flex-wrap:wrap}
.vm-ding{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.vm-bild{flex:0 0 56px;height:56px;border-radius:9px;background:var(--tile);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);text-align:center}
.vm-bild img{width:100%;height:100%;object-fit:cover}
.vm-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.vm-tx b{color:var(--ink);overflow-wrap:anywhere}
.vm-wert{font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.vm-fuss{margin-top:18px}
@media print{ .vm-ding{padding:4px 0} .vm-bild{flex-basis:44px;height:44px} .vm-raum{break-before:auto} }

/* ═══ v1.50.2b – Durchsicht 24.10.2026: Lesbarkeit und Handy-Kleinigkeiten ═══
   Gemessen mit dem WCAG-Kontrastmaß (Mindestwert 4,5:1 für normalen Text).
   Vorher: Pillen-Text 2,6–2,9:1, Nummern 3,0:1, Sidebar-Zeile 4,4:1. */
.pill-lib{color:#9A5A10}                      /* 4,8:1 auf #FBF0DC (vorher 2,6) */
.pill-home,.b-neu{color:#1F6F45}              /* 5,4:1 auf #E4F5EC (vorher 2,6) */
.pill-over{color:#A83E30}                     /* 5,2:1 auf #FBE7E3 (vorher 2,9) */
.et-nr,.lbl .info .nr,.view-table .id{color:#A3600F}   /* 5,0:1 auf Weiß (vorher 3,0) */
.stt.o{color:#8a5600}                          /* 5,3:1 auf #fdeccd (vorher 3,8) */
.stt.d{color:#1b6e46}                          /* 5,3:1 auf #d8f3e5 (vorher 3,7) */
.brand .app-name{color:#B4C3DD}               /* 6,5:1 auf Navy (vorher 4,4) */
/* Dunkelmodus: Pillen und Abzeichen nicht mehr als helle Flecken, leere Sterne
   nicht mehr weiß (sahen wie volle Bewertung aus), Etiketten-Knopf nicht blau */
html[data-theme="dark"] .pill-lib{background:rgba(232,154,60,.16);color:#f0b863}
html[data-theme="dark"] .pill-home,html[data-theme="dark"] .b-neu{background:rgba(63,169,114,.16);color:#7fd6a8}
html[data-theme="dark"] .pill-over{background:rgba(217,106,91,.18);color:#f3a397}
html[data-theme="dark"] .badge.b-rep{color:#f0b863}
html[data-theme="dark"] .st{color:#34435f}
html[data-theme="dark"] .lbl-btn,html[data-theme="dark"] .cat-cell,html[data-theme="dark"] .cat-cell .cat-ic{color:var(--ink)}
html[data-theme="dark"] .et-nr,html[data-theme="dark"] .lbl .info .nr{color:#f0b863}
html[data-theme="dark"] .view-table .id{color:#f0b863}
html[data-theme="dark"] .stt.o{background:rgba(232,154,60,.16);color:#f0b863}
html[data-theme="dark"] .stt.d{background:rgba(63,169,114,.16);color:#7fd6a8}
/* Berichte ohne Bild: kein 150-px-Leerfeld mehr, nur ein schmaler Streifen mit Symbol */
.bpost .bgal.leer{flex:0 0 64px}
@media(max-width:620px){.bpost .bgal.leer{flex:none;height:44px}.bpost .bgal.leer .bim{min-height:0;font-size:18px}}
/* Forum ohne Themen: Hinweis + Knopf statt nur einer Zeile */
.forum-leer{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media(max-width:820px){
  /* Dashboard: Kategorie-Kacheln waren rechts 8 px abgeschnitten – die
     Sterne-Zeile hielt die Spalte breiter als die halbe Karte */
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-grid .cat-cell{min-width:0}
  .cat-cell .cs{display:none}   /* Sterne-Zeile am Handy weg – Platz für den Namen */
  .cat-cell{gap:7px;padding:8px 9px}
  .cat-cell .cat-dot{display:none}        /* Farbpunkt am Handy weg – 17 px mehr für den Namen */
  .cat-cell .cn{white-space:normal;line-height:1.2;hyphens:auto;font-size:12px}   /* „Heimcomputer“ ganz statt „Heimco…“ */
  .card-head{gap:8px;flex-wrap:wrap}
  /* Dashboard-Verleih: Pille unter den Text statt daneben (Text war in 5 Zeilen
     gequetscht) */
  .lib-row{flex-wrap:wrap}
  .lib-row .lm{flex:1 1 200px}
  .lib-row > .pill-lib{margin-left:52px}
}

/* ═══ v1.51.0b – Durchsicht II, Vorschläge A/E/F (Karl, 25.10.2026) ═══ */
/* A) Knopffarben: Navy-Schrift auf dem ESISO-Orange (5,0:1 statt 2,3:1 mit Weiß);
   Grün und Rot eine Stufe dunkler (4,9:1 / 4,8:1 mit Weiß). Farbregel unverändert. */
:root{--green:#28805A;--red:#C44B3A}
.btn-orange,.topbar .btn-primary,.btn-primary,.nav a.active,.login-card .lbtn,.ph-save,
.fb-btn-orange,.lese-knopf,.sc-modus.on,.sn-kat.on,.tag-wolke a.ist-aktiv,.wz-chip.on b,
.mobnav .mob-plus,.ph-plus,.fbadge,.fb-zahl,.prof-cam,.med-play,.pl-startbtn:hover{color:var(--navy)}
html[data-theme="dark"] .set-tabs button.on,html[data-theme="dark"] .blog-filters .chip.on,
html[data-theme="dark"] .view-seg button.on,html[data-theme="dark"] .view-seg a.on,
html[data-theme="dark"] .view-seg.gross button.on,html[data-theme="dark"] .nav a.active{color:#1F3864}
.btn-green:hover{background:#236f4e}
.btn-red:hover,.btn-danger:hover{background:#b3473a}
.btn-danger{background:var(--red)}
/* E) Inventar-Tabelle: „–“ ohne Bewertung, Unterkategorie, ⋯-Zeilenknopf */
.score-leer{color:var(--muted);font-weight:700;padding-left:4px}
.cat-tag .cat-sub{color:var(--muted);font-weight:400}
.view-table td.zeile-mehr{width:44px;text-align:right}
.zm-btn{width:34px;height:30px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:16px;font-weight:800;line-height:1;cursor:pointer}
.zm-btn:hover{border-color:var(--orange);color:var(--orange-dark)}
/* Bücherei-Regal am Handy: umbrechen statt innen seitlich scrollen (Karl, 25.10.2026).
   Jede Reihe bekommt ihr eigenes Brett über ein Pseudo-Element je Rücken. */
@media(max-width:820px){
  .regal .brett{flex-wrap:wrap;overflow:visible;row-gap:16px;border-bottom:none;padding-bottom:12px;min-height:0}
  .regal .ruecken::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-12px;height:10px;background:#8a6a3f;border-radius:0 0 2px 2px}
  .regal .ruecken:hover{transform:none}
}
/* Rechte-Zentrale am Handy: Hinweis statt umgebauter Tabelle (Karl, 25.10.2026) */
.rz-handy-hinweis{display:none}
@media(max-width:820px){
  .rz-handy-hinweis{display:block;background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px}
  .rz-tabelle th{hyphens:auto;overflow-wrap:anywhere}
}