/* ============================================================
   Schatulle – Gestaltung
   Farbwelt: Schwarz und Anthrazit mit Gold als einzigem
   Akzent. Dunkel ist die eigentliche Identität, hell eine
   Elfenbein-Variante derselben Familie.
   Umschaltung über data-theme am <html>.
   ============================================================ */
:root{
  /* Helle Fassung: Elfenbein und Tinte, Gold als Akzent.
     Bleibt in derselben Familie wie die dunkle Fassung. */
  --bg:#F5F3EE;
  --surface:#FFFFFF;
  --surface2:#EBE7DE;
  --ink:#16161A;
  --ink-soft:#5C574C;
  --line:#DCD5C7;
  --accent:#8A6B1C;          /* Gold, auf Hell abgedunkelt für Kontrast */
  --accent-ink:#FFFFFF;
  --gold:#A8842C;
  --gold-soft:#F0E6CB;
  --danger:#9E3A2C;
  --shadow:0 1px 2px rgba(22,22,26,.06),0 8px 24px rgba(22,22,26,.09);
  --chip-gold-bg:#F1E5C4;      --chip-gold-ink:#6F5411;
  --chip-silber-bg:#E7E7E4;    --chip-silber-ink:#4E4E4A;
  --chip-platin-bg:#E4E6E7;    --chip-platin-ink:#414A50;
  --chip-palladium-bg:#E8E4DC;  --chip-palladium-ink:#5A5245;
  --chip-sonstiges-bg:#EAE6DD; --chip-sonstiges-ink:#5C574C;
}
/* Dunkle Fassung ist die eigentliche Identität:
   Schwarz und Anthrazit, Gold als einziger Farbakzent. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D0D0F;
    --surface:#17171A;
    --surface2:#212125;
    --ink:#EDE9E0;
    --ink-soft:#99938A;
    --line:#2F2F35;
    --accent:#C9A227;
    --accent-ink:#141410;
    --gold:#D4AF37;
    --gold-soft:#332C18;
    --danger:#D9776A;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.55);
    --chip-gold-bg:#332C18;      --chip-gold-ink:#E0C170;
    --chip-silber-bg:#26262A;    --chip-silber-ink:#BDBAB3;
    --chip-platin-bg:#23282C;    --chip-platin-ink:#A9BAC6;
    --chip-palladium-bg:#2A2620; --chip-palladium-ink:#C4B49A;
    --chip-sonstiges-bg:#242428; --chip-sonstiges-ink:#99938A;
  }
}
:root[data-theme="dark"]{
  --bg:#0D0D0F;
  --surface:#17171A;
  --surface2:#212125;
  --ink:#EDE9E0;
  --ink-soft:#99938A;
  --line:#2F2F35;
  --accent:#C9A227;
  --accent-ink:#141410;
  --gold:#D4AF37;
  --gold-soft:#332C18;
  --danger:#D9776A;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.55);
  --chip-gold-bg:#332C18;      --chip-gold-ink:#E0C170;
  --chip-silber-bg:#26262A;    --chip-silber-ink:#BDBAB3;
  --chip-platin-bg:#23282C;    --chip-platin-ink:#A9BAC6;
  --chip-palladium-bg:#2A2620; --chip-palladium-ink:#C4B49A;
  --chip-sonstiges-bg:#242428; --chip-sonstiges-ink:#99938A;
}
*{box-sizing:border-box}
/* Das hidden-Attribut muss stärker sein als jede display-Regel einer Klasse –
   sonst bleibt etwa .grid{display:grid} trotz hidden sichtbar. */
[hidden]{display:none !important}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg); color:var(--ink);
    font-family:Karla,"Segoe UI",system-ui,sans-serif;
    font-size:15.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  h1,h2,h3{font-family:Fraunces,Georgia,serif; text-wrap:balance; margin:0}
  button{font:inherit; cursor:pointer}
  input,select,textarea{font:inherit; color:var(--ink)}
  a{color:var(--accent)}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  /* ---------- header ---------- */
  header.app{
    position:sticky; top:0; z-index:30;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .brandbar{
    display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
    max-width:1200px; margin:0 auto; padding:14px 20px 10px;
  }
  .brand{display:flex; align-items:baseline; gap:10px; flex:0 1 auto; min-width:0}
  .brand .mark{
    width:34px;height:34px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--gold) 0%, color-mix(in srgb, var(--gold) 55%, var(--bg)) 70%, transparent 71%);
    border:1px solid var(--gold);
    align-self:center; position:relative;
  }
  .brand h1{font-size:26px; font-weight:600; letter-spacing:.01em; white-space:nowrap}
  .brand .sub{color:var(--ink-soft); font-size:13px; display:none}
  @media(min-width:1500px){ .brand .sub{display:inline} }
  /* Benutzerchip darf schrumpfen, damit nichts umbricht */
  .userchip{min-width:0; overflow:hidden}
  .userchip .name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  @media(max-width:1080px){ .userchip .name{display:none} }
  .brandbar .grow{flex:1}
  .iconbtn{
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
    border-radius:10px; padding:7px 12px; display:inline-flex; align-items:center; gap:7px;
    white-space:nowrap; flex:0 0 auto;
  }
  .iconbtn:hover{border-color:var(--accent)}
  .primary{
    background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
    border-radius:10px; padding:8px 16px; font-weight:700;
    white-space:nowrap; flex:0 0 auto;
  }
  .primary:hover{filter:brightness(1.07)}
  .primary:disabled,.iconbtn:disabled{opacity:.5;cursor:not-allowed}

  /* price ticker */
  .ticker{
    border-top:1px solid var(--line);
    background:var(--surface2);
  }
  .ticker-inner{
    max-width:1200px; margin:0 auto; padding:6px 20px;
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    font-size:13px; color:var(--ink-soft);
  }
  .ticker b{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:700}
  .ticker .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:baseline}
  .ticker .stand{margin-left:auto}
  .linklike{background:none;border:none;color:var(--accent);text-decoration:underline;padding:0}

  /* ---------- toolbar ---------- */
  .toolbar{
    max-width:1200px; margin:18px auto 0; padding:0 20px;
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  }
  .search{
    flex:1 1 220px; position:relative;
  }
  .search input{
    width:100%; padding:9px 12px 9px 36px;
    border:1px solid var(--line); border-radius:10px; background:var(--surface);
  }
  .search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.5}
  .toolbar select{
    padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
  }
  .summary{
    max-width:1200px; margin:14px auto 0; padding:0 20px;
    display:flex; gap:24px; flex-wrap:wrap; color:var(--ink-soft); font-size:13.5px;
  }
  .summary b{color:var(--ink); font-variant-numeric:tabular-nums}

  /* ---------- grid ---------- */
  .grid{
    max-width:1200px; margin:16px auto 60px; padding:0 20px;
    display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:16px;
  }
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    overflow:hidden; box-shadow:var(--shadow);
    display:flex; flex-direction:column; text-align:left; padding:0;
    transition:transform .12s ease, border-color .12s ease;
  }
  .card:hover{transform:translateY(-2px); border-color:var(--gold)}
  .thumb{
    aspect-ratio:1/1; background:
      radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gold) 22%, var(--surface2)) 0%, var(--surface2) 62%);
    display:flex; align-items:center; justify-content:center; position:relative;
  }
  .thumb img{width:100%;height:100%;object-fit:contain;display:block}
  .thumb .ph{opacity:.45; font-size:38px; font-family:Fraunces,serif; color:var(--gold)}
  .thumb .count{
    position:absolute; right:8px; bottom:8px; background:rgba(20,20,16,.62); color:#fff;
    border-radius:99px; font-size:11.5px; padding:1px 8px;
  }
  .card .body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px}
  .card .name{font-family:Fraunces,serif; font-size:17px; font-weight:600; line-height:1.25}
  .chiprow{display:flex; gap:6px; flex-wrap:wrap}
  .chip{
    font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    border-radius:99px; padding:2px 9px;
  }
  .chip.gold{background:var(--chip-gold-bg);color:var(--chip-gold-ink)}
  .chip.silber{background:var(--chip-silber-bg);color:var(--chip-silber-ink)}
  .chip.platin{background:var(--chip-platin-bg);color:var(--chip-platin-ink)}
  .chip.palladium{background:var(--chip-palladium-bg);color:var(--chip-palladium-ink)}
  .chip.sonstiges{background:var(--chip-sonstiges-bg);color:var(--chip-sonstiges-ink)}
  .card .meta{color:var(--ink-soft); font-size:13px}
  .card .price{
    margin-top:2px; font-size:16.5px; font-weight:700; font-variant-numeric:tabular-nums;
  }
  .empty{
    grid-column:1/-1; text-align:center; padding:70px 20px; color:var(--ink-soft);
  }
  .empty .big{font-family:Fraunces,serif; font-size:26px; color:var(--ink); margin-bottom:8px}

  /* ---------- dialogs ---------- */
  dialog{
    border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink);
    width:min(720px, calc(100vw - 32px)); max-height:calc(100vh - 48px); max-height:calc(100dvh - 32px);
    padding:0; box-shadow:var(--shadow);
  }
  dialog::backdrop{background:rgba(20,19,15,.55); backdrop-filter:blur(2px)}
  .dlg-head{
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--line);
    position:sticky; top:0; background:var(--surface); z-index:2;
  }
  .dlg-head h2{font-size:20px; flex:1}
  .dlg-body{padding:18px 20px 22px}
  .dlg-foot{
    display:flex; gap:10px; justify-content:flex-end; align-items:center;
    padding:14px 20px; border-top:1px solid var(--line);
    position:sticky; bottom:0; background:var(--surface);
  }
  .xbtn{background:none;border:none;font-size:20px;color:var(--ink-soft);padding:4px 8px;border-radius:8px}
  .xbtn:hover{background:var(--surface2)}

  form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  @media(max-width:560px){ form .row{grid-template-columns:1fr} }
  .field{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
  .field label{font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft)}
  .field input,.field select,.field textarea{
    padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--bg);
  }
  .field textarea{resize:vertical; min-height:64px}
  .hint{font-size:12.5px; color:var(--ink-soft)}
  .calcbox{
    background:var(--surface2); border:1px solid var(--line); border-radius:12px;
    padding:10px 14px; margin:4px 0 14px; display:flex; gap:22px; flex-wrap:wrap;
    font-variant-numeric:tabular-nums;
  }
  .calcbox .lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); display:block}
  .calcbox b{font-size:16px}

  /* photos in form */
  .photorow{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px}
  .photorow .p{
    flex:0 0 auto;
    width:152px; height:152px; border-radius:12px; overflow:hidden; position:relative;
    border:1px solid var(--line); background:var(--surface2);
  }
  .photorow .p img{width:100%;height:100%;object-fit:contain;display:block}
  .photorow .p .rm{
    position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%;
    border:none; background:rgba(20,20,16,.68); color:#fff; font-size:12px; line-height:1;
  }
  /* Werkzeugleiste je Foto: bearbeiten und nach vorne holen */
  .photorow .p .tools{
    position:absolute; left:0; right:0; bottom:0; display:flex; gap:1px;
    opacity:0; transition:opacity .12s ease;
  }
  .photorow .p:hover .tools,.photorow .p:focus-within .tools{opacity:1}
  .photorow .p .tools button{
    flex:1; border:none; background:rgba(20,20,16,.74); color:#EDE9E0;
    font-size:12px; padding:4px 0; line-height:1.1;
  }
  .photorow .p .tools button:hover{background:var(--gold); color:#141410}
  .photorow .p .badge{
    position:absolute; left:3px; top:3px; background:var(--gold); color:#141410;
    font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    border-radius:99px; padding:1px 7px;
  }
  .photorow .p .badge.changed{background:var(--accent); color:var(--accent-ink)}
.photorow .p .badge + .badge{top:20px}
/* Auf Geräten ohne Mauszeiger gibt es kein "Überfahren" – dort sind die
   Werkzeuge dauerhaft sichtbar, sonst wären sie unerreichbar. */
@media (hover: none){
  .photorow .p .tools{opacity:1}
  /* Größere Kacheln, damit die drei Knöpfe mit dem Finger treffbar sind */
  .photorow .p,.addphoto{width:128px; height:128px}
  .photorow .p .tools button{padding:9px 0; font-size:14px}
  .photorow .p .rm{width:26px; height:26px; font-size:13px}
}
  .addphoto{
    flex:0 0 auto;
    width:152px; height:152px; border-radius:12px; border:1.5px dashed var(--line);
    background:none; color:var(--ink-soft); font-size:34px;
  }
  .addphoto:hover{border-color:var(--accent); color:var(--accent)}

  /* detail dialog */
  .det-hero{display:flex; gap:16px; flex-wrap:wrap}
  .det-photos{flex:1 1 260px; min-width:240px}
  .det-photos .main{
    width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
    border:1px solid var(--line); background:var(--surface2);
  }
  .det-photos .main img{width:100%;height:100%;object-fit:contain;display:block;background:var(--surface2)}
  .det-photos .strip{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
  .det-photos .strip button{
    width:74px;height:74px;border-radius:9px;overflow:hidden;padding:0;border:2px solid transparent;background:var(--surface2)
  }
  .det-photos .strip button.on{border-color:var(--gold)}
  .det-photos .strip img{width:100%;height:100%;object-fit:contain;display:block}
  .det-facts{flex:1 1 260px; min-width:240px}
  .facts{width:100%; border-collapse:collapse; font-size:14.5px}
  .facts td{padding:7px 0; border-bottom:1px solid var(--line); vertical-align:top}
  .facts td:first-child{color:var(--ink-soft); width:42%; padding-right:10px}
  .facts td:last-child{font-variant-numeric:tabular-nums}
  .linklist{margin:8px 0 0; padding-left:18px}
  .linklist li{margin-bottom:4px; overflow-wrap:anywhere}
  .research{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
  .research a,.research button{
    font-size:13px; border:1px solid var(--line); background:var(--bg); color:var(--ink);
    border-radius:99px; padding:5px 12px; text-decoration:none;
  }
  .research a:hover,.research button:hover{border-color:var(--accent); color:var(--accent)}

  .banner{
    max-width:1200px; margin:12px auto 0; padding:10px 16px;
    border:1px solid var(--gold); background:var(--gold-soft); color:var(--ink);
    border-radius:12px; font-size:14px; display:none;
  }
  .banner.show{display:block; margin-left:20px; margin-right:20px}
  @media(min-width:1240px){ .banner.show{margin-left:auto;margin-right:auto} }

  /* toast */
  #toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:99px;
    font-size:14px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:99;
    max-width:min(560px,90vw); text-align:center;
  }
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

  .spin{
    display:inline-block; width:14px; height:14px; border-radius:50%;
    border:2px solid currentColor; border-top-color:transparent;
    animation:sp 1s linear infinite; vertical-align:-2px;
  }
  @keyframes sp{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation-duration:.01s !important}
  }
  /* ---------- Mobil ---------- */
  @media(max-width:700px){
    .brandbar{flex-wrap:wrap; row-gap:8px}
    .brandbar{padding:10px 14px 8px; gap:8px}
    .brand h1{font-size:21px}
    .brand .mark{width:26px;height:26px}
    .iconbtn{padding:6px 10px; font-size:13.5px}
    /* Anlegen-Button als schwebender Knopf unten rechts */
    #btnAdd{
      position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
      z-index:60; border-radius:99px; padding:14px 20px; font-size:16px;
      box-shadow:0 6px 20px rgba(0,0,0,.28);
    }
    .ticker-inner{padding:5px 14px; gap:10px; font-size:12px}
    .ticker .stand{margin-left:0; flex-basis:100%}
    .toolbar{margin-top:12px; padding:0 14px; gap:8px}
    .toolbar select{flex:1 1 40%; min-width:0}
    .summary{padding:0 14px; gap:14px; font-size:12.5px}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 14px; margin-top:12px; margin-bottom:110px}
    .card .body{padding:9px 10px 11px; gap:4px}
    .card .name{font-size:14.5px}
    .card .meta{font-size:12px}
    .card .price{font-size:14.5px}
    .chip{font-size:10px; padding:2px 7px}
    .thumb .count{font-size:10.5px}
    /* Dialoge als Vollbild */
    dialog{
      width:100vw; max-width:100vw; border-radius:0; border:none;
      height:100dvh; max-height:100dvh; margin:0;
    }
    #dlgConfirm{height:auto; max-height:90dvh; border-radius:16px 16px 0 0; margin-top:auto}
    .dlg-head{padding:12px 14px}
    .dlg-body{padding:14px 14px 20px}
    .dlg-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px))}
    #toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
    .calcbox{gap:14px; padding:9px 12px}
    .calcbox b{font-size:14.5px}
    /* Am Telefon genau drei Kacheln je Zeile: die Breite rechnet sich
       aus dem verfügbaren Platz minus der beiden Zwischenräume (2x10px). */
    .photorow .p,.addphoto{
      width:calc((100% - 20px) / 3); height:auto; aspect-ratio:1 / 1; min-width:0;
    }
  }
  /* iOS: Eingabefelder mind. 16px, sonst zoomt Safari beim Tippen hinein */
  @media(max-width:700px){
    input,select,textarea{font-size:16px}
    .search input{font-size:16px}
  }
  .danger-ghost{
    background:none; border:1px solid var(--danger); color:var(--danger);
    border-radius:10px; padding:8px 14px;
  }
  .danger-ghost:hover{background:var(--danger); color:#fff}
  .copybox{
    width:100%; margin-top:8px; font-size:13px; padding:8px 10px;
    border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink);
    min-height:88px; display:none;
  }

  /* iOS zoomt bei Eingabefeldern unter 16px in das Feld hinein */
  @media(max-width:820px){
    .field input,.field select,.field textarea,.search input{font-size:16px}
  }

/* ============================================================
   Ergänzungen für die Webspace-Fassung: Anmeldung, Rollen,
   Benutzerverwaltung
   ============================================================ */
.hidden{display:none !important}

/* ---------- Anmeldung ---------- */
#loginView{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
.login-card{
  width:min(400px,100%); background:var(--surface);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  padding:28px 26px 24px;
}
.login-card .mark{
  width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold) 0%,
             color-mix(in srgb, var(--gold) 55%, var(--surface)) 70%, transparent 71%);
  border:1px solid var(--gold); margin-bottom:14px;
}
.login-card h1{font-size:28px; font-weight:600; margin-bottom:4px}
.login-card p.lead{color:var(--ink-soft); font-size:14px; margin:0 0 20px}
.login-card .field{margin-bottom:14px}
.login-card button[type=submit]{width:100%; padding:11px; font-size:16px; margin-top:4px}
.login-msg{
  margin-top:14px; font-size:14px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--danger); color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent);
}
.login-foot{margin-top:18px; font-size:12.5px; color:var(--ink-soft); text-align:center}

/* ---------- Kopfzeile: Benutzer ---------- */
.userchip{
  display:inline-flex; align-items:center; gap:8px; font-size:13px;
  color:var(--ink-soft); border:1px solid var(--line); background:var(--surface);
  border-radius:99px; padding:5px 6px 5px 12px;
}
.userchip .role{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border-radius:99px; padding:2px 8px; background:var(--surface2); color:var(--ink-soft);
}
.userchip .role.admin{background:var(--chip-gold-bg); color:var(--chip-gold-ink)}
.userchip .role.editor{background:var(--chip-platin-bg); color:var(--chip-platin-ink)}

/* ---------- Benutzerverwaltung ---------- */
.usertable{width:100%; border-collapse:collapse; font-size:14px}
.usertable th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); padding:6px 8px 6px 0; border-bottom:1px solid var(--line);
}
.usertable td{padding:8px 8px 8px 0; border-bottom:1px solid var(--line); vertical-align:middle}
.usertable td:last-child{text-align:right; padding-right:0}
.usertable select{padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg)}
.usertable .self{font-size:11.5px; color:var(--ink-soft)}

/* ---------- Ladezustand ---------- */
#bootView{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); gap:10px; font-size:15px;
}
.offline-note{
  max-width:520px; margin:0 auto; text-align:center; padding:40px 20px; color:var(--ink-soft);
}
.offline-note h2{font-size:22px; color:var(--ink); margin-bottom:10px}
.offline-note code{
  background:var(--surface2); padding:1px 6px; border-radius:6px; font-size:13px;
  overflow-wrap:anywhere;
}

/* ============================================================
   Fassung 1.1 – Menü, Listenansicht, Zuschnitt, Galerie,
   Auswertungen, Papierkorb
   ============================================================ */

/* ---------- Burgermenü ---------- */
.burger{gap:9px}
.burger .bars{display:inline-flex; flex-direction:column; gap:3.5px; width:16px}
.burger .bars span{
  display:block; height:2px; width:100%; background:currentColor; border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}
.burger.open .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.open .bars span:nth-child(2){opacity:0}
.burger.open .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.burger.open{border-color:var(--gold); color:var(--gold)}

.menu-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:25;
  animation:fadein .15s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.menu-panel{
  position:absolute; right:max(20px, calc(50vw - 600px)); top:100%;
  margin-top:-6px; z-index:40; width:min(300px, calc(100vw - 24px));
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden;
  animation:menuin .16s ease;
}
@keyframes menuin{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.menu-inner{display:flex; flex-direction:column}
.menu-user{padding:14px 16px 12px; border-bottom:1px solid var(--line); background:var(--surface2)}
.mu-name{font-family:Fraunces,Georgia,serif; font-size:17px; font-weight:600}
.mu-role{display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12px}
.menu-group{padding:6px 0; border-bottom:1px solid var(--line)}
.menu-group:last-child{border-bottom:none}
.menu-group[hidden]{display:none}
.menu-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:none; border:none; color:var(--ink); padding:10px 16px; font-size:14.5px;
}
.menu-item:hover{background:var(--surface2)}
.menu-item:disabled{opacity:.6}
.menu-item.danger{color:var(--danger)}
.mi-ico{
  width:20px; text-align:center; color:var(--gold); font-size:14px; flex:0 0 auto;
}
.menu-item.danger .mi-ico{color:var(--danger)}

/* ---------- Ansichtsumschalter ---------- */
.viewswitch{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.viewswitch button{
  background:var(--surface); border:none; color:var(--ink-soft);
  padding:9px 12px; font-size:13.5px; white-space:nowrap;
}
.viewswitch button + button{border-left:1px solid var(--line)}
.viewswitch button.on{background:var(--gold-soft); color:var(--gold); font-weight:700}

/* ---------- Karten: Nummer und Datum ---------- */
.thumb .invno{
  position:absolute; left:8px; top:8px; background:rgba(10,10,10,.66); color:#EDE9E0;
  border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:2px 8px; font-variant-numeric:tabular-nums;
}
.card .added{font-size:11.5px; color:var(--ink-soft); margin-top:2px}
.chip.stone{background:var(--surface2); color:var(--ink-soft)}

/* ---------- Listenansicht ---------- */
.listwrap{max-width:1200px; margin:16px auto 60px; padding:0 20px; overflow-x:auto}
.itemlist{
  width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:14.5px;
}
.itemlist th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); font-weight:700; padding:10px 12px; background:var(--surface2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.itemlist td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.itemlist tbody tr{cursor:pointer}
.itemlist tbody tr:hover{background:var(--surface2)}
.itemlist tbody tr:last-child td{border-bottom:none}
.itemlist .c-no{font-variant-numeric:tabular-nums; color:var(--ink-soft); width:1%; white-space:nowrap}
.itemlist .c-img{width:52px; padding-right:0}
.itemlist .c-img img{width:42px; height:42px; object-fit:contain; border-radius:8px; display:block; background:var(--surface2)}
.itemlist .c-img .noimg{
  width:42px;height:42px;border-radius:8px;background:var(--surface2);color:var(--gold);
  display:flex;align-items:center;justify-content:center;opacity:.5
}
.itemlist .c-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.itemlist .c-mat,.itemlist .c-date{white-space:nowrap}
.itemlist .c-date{color:var(--ink-soft); font-size:13px}
.li-name{font-weight:600}
.li-sub{font-size:12px; color:var(--ink-soft); margin-top:1px}

/* ---------- Formular: Gruppierung ---------- */
.fset{
  border:1px solid var(--line); border-radius:12px; padding:14px 14px 2px;
  margin:0 0 14px; min-width:0;
}
.fset legend{
  padding:0 8px; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- Detailansicht ---------- */
.det-no{
  font-family:Karla,sans-serif; font-size:13px; font-weight:700; color:var(--gold);
  background:var(--gold-soft); border-radius:99px; padding:3px 9px;
  vertical-align:middle; margin-right:6px; font-variant-numeric:tabular-nums;
}
.det-photos .main{position:relative; cursor:zoom-in}
.det-photos .main.empty-photo{
  display:flex; align-items:center; justify-content:center; cursor:default;
}
.det-photos .main.empty-photo span{font-size:54px; opacity:.35; color:var(--gold)}
.zoomhint{
  position:absolute; right:8px; bottom:8px; background:rgba(10,10,10,.62); color:#EDE9E0;
  border-radius:99px; font-size:11.5px; padding:3px 10px; opacity:0; transition:opacity .15s;
}
.det-photos .main:hover .zoomhint{opacity:1}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.kpi{
  background:var(--surface2); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; display:flex; flex-direction:column; gap:2px; min-width:0;
}
.k-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700}
.k-val{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.k-sub{font-size:11.5px; color:var(--ink-soft)}

.detblock{margin-top:22px}
.detblock h3{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold);
  font-family:Karla,sans-serif; font-weight:700; margin-bottom:8px;
  padding-bottom:6px; border-bottom:1px solid var(--line);
}
.dtext{margin:0; white-space:pre-wrap}
.dfoot{margin-top:24px; font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums}

/* ---------- Foto groß ---------- */
.lightbox{
  /* eigener modaler Dialog – liegt dadurch über der Detailansicht */
  position:fixed; inset:0; z-index:80; background:rgba(6,6,8,.94);
  width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
  margin:0; padding:0; border:none; border-radius:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.lightbox:not([open]){display:none}
.lightbox::backdrop{background:rgba(6,6,8,.9)}
.lightbox img{max-width:92vw; max-height:82vh; object-fit:contain; border-radius:6px}
.lb-close{
  position:absolute; top:16px; right:16px; z-index:2;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#EDE9E0;
  width:42px; height:42px; border-radius:50%; font-size:18px;
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#EDE9E0;
  width:48px; height:64px; border-radius:12px; font-size:28px; line-height:1;
}
.lb-nav.prev{left:14px} .lb-nav.next{right:14px}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-caption{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:#C9C4B8; font-size:13.5px; background:rgba(0,0,0,.4);
  padding:6px 14px; border-radius:99px; max-width:90vw; text-align:center;
}

/* ---------- Zuschnitt ---------- */
.cropstage{
  position:relative; width:100%; aspect-ratio:4/3; max-height:52vh;
  background:var(--surface2); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; touch-action:none; cursor:grab;
}
.cropstage:active{cursor:grabbing}
.cropstage canvas{display:block; position:absolute; inset:0}
.cropframe{
  position:absolute; pointer-events:none; border:2px solid var(--gold);
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
.croptools{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}
.croptools input[type=range]{flex:1 1 160px; accent-color:var(--gold)}
.croprotate{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.croprotate button{
  background:var(--surface); border:none; color:var(--ink-soft); padding:7px 12px; font-size:15px;
}
.croprotate button + button{border-left:1px solid var(--line)}
.croprotate button:hover{color:var(--gold)}
.cropratios{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.cropratios button{
  background:var(--surface); border:none; color:var(--ink-soft); padding:7px 11px; font-size:13px;
}
.cropratios button + button{border-left:1px solid var(--line)}
.cropratios button.on{background:var(--gold-soft); color:var(--gold); font-weight:700}

/* ---------- Auswertungen ---------- */
.statrow{display:grid; grid-template-columns:110px 1fr auto; gap:12px; align-items:center; margin-bottom:9px}
.s-lbl{font-size:13.5px; color:var(--ink-soft)}
.s-bar{height:10px; background:var(--surface2); border-radius:99px; overflow:hidden}
.s-bar span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), var(--gold));
}
.s-val{font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.spark{width:100%; height:auto; display:block}
.sp-area{fill:color-mix(in srgb, var(--gold) 16%, transparent)}
.sp-line{fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.sp-dot{fill:var(--gold)}
.sparkfoot{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-soft); margin-top:6px; font-variant-numeric:tabular-nums;
}
.sparkfoot .up{color:var(--accent); font-weight:700}
.sparkfoot .down{color:var(--danger); font-weight:700}

/* ---------- Mobil ---------- */
@media(max-width:700px){
  .burger-label{display:none}
  .menu-panel{right:10px; left:10px; width:auto}
  .viewswitch{flex:1 1 100%}
  .viewswitch button{flex:1}
  .listwrap{padding:0 12px; margin-bottom:110px}
  .itemlist{font-size:13.5px}
  .itemlist th,.itemlist td{padding:8px}
  .itemlist .c-date,.itemlist .c-mat .li-sub{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-val{font-size:17px}
  .cropstage{aspect-ratio:1/1; max-height:46vh}
  .lb-nav{width:40px;height:56px;font-size:24px}
  .statrow{grid-template-columns:84px 1fr; row-gap:2px}
  .s-val{grid-column:2; text-align:right}
}

/* ============================================================
   Fassung 1.1.2 – Papierkorb mit Vorschau, Fotosortierung,
   klickbare Spaltenüberschriften
   ============================================================ */

/* ---------- Papierkorb ---------- */
.trashtable td{vertical-align:middle}
.trashtable .c-img{width:56px; padding-right:0}
.trashtable .c-img img{width:46px; height:46px; object-fit:contain; border-radius:8px; display:block; background:var(--surface2)}
.trashtable .c-img .noimg{
  width:46px; height:46px; border-radius:8px; background:var(--surface2); color:var(--gold);
  display:flex; align-items:center; justify-content:center; opacity:.5;
}
.trashtable .c-date{white-space:nowrap; color:var(--ink-soft)}
.trashtable .c-act{white-space:nowrap; text-align:right}
.trashtable .clickrow{cursor:pointer}
.trashtable .clickrow:hover{background:var(--surface2)}
.det-trash{
  font-family:Karla,sans-serif; font-size:12px; font-weight:700; color:var(--danger);
  border:1px solid var(--danger); border-radius:99px; padding:2px 9px;
  vertical-align:middle; margin-left:8px; white-space:nowrap;
}

/* ---------- Fotos umsortieren (Ziehen mit Maus und Finger) ---------- */
.photorow .p{
  cursor:grab;
  /* Waagrechtes Ziehen gehört uns, senkrechtes bleibt Blättern */
  touch-action:pan-y;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.photorow .p.dragging{
  cursor:grabbing; z-index:3; position:relative; transition:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5); outline:2px solid var(--gold); outline-offset:1px;
  opacity:.92;
}
/* Einfügelinie zwischen den Bildern.
   Als ::before an der Kachel war sie unsichtbar: die Kachel schneidet
   mit overflow:hidden alles ab, was über ihren Rand hinausragt.
   Deshalb ein eigenes Element in der Reihe. */
.photorow{position:relative}
.dropline{
  position:absolute; width:4px; margin-left:-2px; border-radius:3px;
  background:var(--gold); box-shadow:0 0 10px 2px color-mix(in srgb, var(--gold) 55%, transparent);
  pointer-events:none; z-index:4;
}
.dropline::before,.dropline::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--gold);
}
.dropline::before{top:-5px}
.dropline::after{bottom:-5px}
/* Während des Sortierens etwas mehr Luft, damit die Linie Platz hat */
/* Der Zwischenraum bleibt beim Sortieren gleich: die Kachelbreite wird
   am Telefon daraus errechnet – ein Sprung mitten im Ziehen wäre fatal. */
.photorow .p img{pointer-events:none}
.photorow{align-items:flex-start}

/* ---------- Sortierbare Spalten ---------- */
.itemlist th.sortable{cursor:pointer; user-select:none}
.itemlist th.sortable:hover{color:var(--ink)}
.itemlist th.sortable.active{color:var(--gold)}
.itemlist th .arr{margin-left:5px; font-size:9px; vertical-align:1px}
.itemlist th.sortable:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}

@media(max-width:700px){
  .trashtable .c-date{display:none}
  .trashtable .c-act{padding-left:0}
  .trashtable .c-act .iconbtn{padding:6px 8px; font-size:12.5px}
}


/* ============================================================
   Fassung 1.2 – Restfrist im Papierkorb, Recherche über das Bild
   ============================================================ */

/* ---------- Papierkorb: Restfrist ---------- */
.trashtable .frist{
  font-size:11.5px; color:var(--ink-soft); margin-top:2px; white-space:nowrap;
}
.trashtable .frist.faellig{color:var(--danger); font-weight:700}

/* ---------- Recherche ---------- */
.research{display:block}
.rgroup{margin-bottom:16px}
.rgroup:last-child{margin-bottom:0}
.rlabel{
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.rprio{
  background:var(--gold-soft); color:var(--gold); border-radius:99px;
  padding:2px 9px; font-size:10.5px; letter-spacing:.03em;
}
.rlinks{display:flex; gap:8px; flex-wrap:wrap}
.rlinks a,.rlinks button{
  font-size:13px; border:1px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:99px; padding:6px 14px; text-decoration:none; white-space:nowrap;
}
.rlinks a:hover,.rlinks button:hover{border-color:var(--gold); color:var(--gold)}
.rlinks .imgsearch{border-color:var(--gold); color:var(--gold); font-weight:700}
.rlinks .imgsearch:hover{background:var(--gold); color:#141410}
.rlinks button:disabled{opacity:.6}
.rnote{font-size:12px; color:var(--ink-soft); margin-top:7px; line-height:1.5}
.rnote b{color:var(--ink)}

@media(max-width:700px){
  .det-photos .strip button{width:64px;height:64px}
  .rlinks a,.rlinks button{font-size:12.5px; padding:6px 12px}
}

/* ============================================================
   Fassung 1.2.2 – Blättern und Wischen im Hauptbild
   ============================================================ */
.det-photos .main{
  /* Waagrechtes Wischen blättert, senkrechtes bleibt Scrollen */
  touch-action:pan-y;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.det-photos .main img{
  transition:transform .18s ease;
  -webkit-user-drag:none; user-drag:none;
}
/* Richtungsgefühl beim Bildwechsel */
@keyframes reinVonRechts{from{transform:translateX(26px); opacity:.4}to{transform:none; opacity:1}}
@keyframes reinVonLinks {from{transform:translateX(-26px); opacity:.4}to{transform:none; opacity:1}}
.det-photos .main img.rein-rechts{animation:reinVonRechts .2s ease}
.det-photos .main img.rein-links {animation:reinVonLinks  .2s ease}

.det-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:52px; border-radius:10px; font-size:24px; line-height:1;
  border:1px solid rgba(255,255,255,.16); background:rgba(10,10,10,.55); color:#EDE9E0;
  opacity:0; transition:opacity .15s ease;
}
.det-photos .main:hover .det-nav{opacity:1}
.det-nav:hover{background:var(--gold); color:#141410; border-color:var(--gold)}
.det-nav.prev{left:8px} .det-nav.next{right:8px}
.det-count{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  background:rgba(10,10,10,.62); color:#EDE9E0; border-radius:99px;
  font-size:11.5px; padding:2px 10px; font-variant-numeric:tabular-nums; z-index:2;
}
/* Ohne Mauszeiger sind die Pfeile dauerhaft sichtbar */
@media (hover: none){
  .det-nav{opacity:1; width:34px; height:60px}
  .det-photos .main .zoomhint{display:none}
}
@media (prefers-reduced-motion: reduce){
  .det-photos .main img.rein-rechts,.det-photos .main img.rein-links{animation:none}
}


/* ============================================================
   Fassung 1.2.3 – Vorschauen zeigen das ganze Bild
   Vorher stand überall object-fit:cover: die Vorschau füllte das
   Quadrat und schnitt dafür die Ränder ab. Bei Schmuck ist aber
   gerade die Form wichtig – deshalb jetzt "contain", das ganze
   Bild ist zu sehen, notfalls mit Rand.
   ============================================================ */
.thumb img,.photorow .p img,.det-photos .strip img{background:var(--surface2)}

/* Fassung im Menü */
.mu-ver{margin-top:6px; font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums}

/* ============================================================
   Fassung 1.2.7 – Ansicht aktualisieren
   ============================================================ */
.refico{display:inline-block; font-size:16px; line-height:1}
#btnRefresh.laeuft .refico{animation:sp 1s linear infinite}
#btnRefresh:disabled{opacity:.6}

/* Zum Aktualisieren ziehen: liegt über dem Kopfbereich und wird beim
   Ziehen heruntergeschoben. Ohne Berührung bleibt es unsichtbar. */
.ptr{
  /* "top" setzt das Skript auf die Unterkante der Kopfzeile, damit die
     Anzeige darunter erscheint und den Titel nicht verdeckt. */
  position:fixed; left:0; right:0; top:0; z-index:20;
  display:flex; justify-content:center; pointer-events:none;
  transform:translateY(-160%); opacity:0;
}
.ptr-in{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:99px;
  padding:7px 16px; margin-top:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  font-size:13px; color:var(--ink-soft); white-space:nowrap;
}
.ptr-ico{display:inline-block; font-size:15px; color:var(--gold); transition:transform .15s ease}
.ptr.bereit .ptr-ico{transform:rotate(180deg)}
.ptr.bereit .ptr-txt::after{content:' – loslassen'}
.ptr.laeuft .ptr-ico{animation:sp 1s linear infinite}
.ptr.laeuft .ptr-txt::after{content:''}

@media(max-width:700px){
  /* Am Telefon zählt jeder Millimeter in der Kopfzeile: nur das Zeichen */
  .ref-label{display:none}
  #btnRefresh{padding:6px 10px}
}
/* Am Rechner gibt es keine Zieh-Geste – dort genügt der Knopf */
@media (hover: hover){
  .ptr{display:none}
}
/* „Stand hh:mm" – rückt ans Ende der Zeile und bleibt zurückhaltend */
.sum-zeit{margin-left:auto; opacity:.75; font-variant-numeric:tabular-nums}
@media(max-width:700px){ .sum-zeit{margin-left:0} }

/* ============================================================
   Fassung 1.3.2 – mehrere Kategorien je Stück
   ============================================================ */
.catpick{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:4px}
.catpick button{
  border:1px solid var(--line); background:var(--surface2); color:var(--ink-soft);
  border-radius:99px; padding:7px 14px; font-size:13.5px; line-height:1.2;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.catpick button:hover{border-color:var(--accent); color:var(--ink)}
.catpick button[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700;
}
/* Die Ziffer zeigt die Reihenfolge – die erste Kategorie führt das Stück an */
.catpick .nr{
  font-size:10.5px; font-weight:700; opacity:.85;
  background:color-mix(in srgb, var(--accent-ink) 22%, transparent);
  border-radius:99px; min-width:15px; height:15px; display:inline-grid; place-items:center;
}
@media(max-width:700px){
  .catpick button{padding:9px 14px; font-size:14px}
}

/* ============================================================
   Fassung 1.3.3 – Kopfzahlen, einklappbare Filter, Zählzeile
   ============================================================ */

/* --- Die drei Kennzahlen oben (früher die Kursleiste) --- */
.kpitop{
  max-width:1200px; margin:0 auto; padding:9px 20px;
  display:flex; gap:28px; flex-wrap:wrap; align-items:baseline;
}
.kpitop .t{display:flex; flex-direction:column; gap:1px; background:none; border:none; padding:0; text-align:left}
.kpitop .l{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft)}
.kpitop .v{font-size:19px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.15}
.kpitop button.t .v{color:var(--gold)}
.kpitop button.t:hover .v{filter:brightness(1.15)}
.kpitop .fein .v{color:var(--gold)}
.kpitop .hinweis{margin-left:auto; align-self:center; font-size:12px; color:var(--ink-soft)}

/* --- Filter zum Aufklappen --- */
#btnFilters .caret{transition:transform .15s ease; font-size:11px; opacity:.7}
#btnFilters[aria-expanded="true"] .caret{transform:rotate(180deg)}
#btnFilters .fcount{
  background:var(--accent); color:var(--accent-ink); border-radius:99px;
  font-size:11px; font-weight:700; padding:1px 7px; margin-left:2px;
}
.filterrow{
  max-width:1200px; margin:10px auto 0; padding:0 20px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.filterrow select{
  padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); flex:0 1 auto;
}

/* --- Zählzeile: links die Zahl, rechts der Umschalter --- */
.summary{
  max-width:1200px; margin:16px auto 0; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.countline{display:flex; align-items:baseline; gap:8px; min-width:0}
.countline .n{font-size:26px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1}
.countline .w{font-size:14px; color:var(--ink-soft)}
.countline .zeit{font-size:12px; color:var(--ink-soft); opacity:.75; margin-left:6px}

@media(max-width:700px){
  /* Als Raster statt als Fließsatz: Bei mehreren Metallen entstehen sonst
     Zeilen mit einer einzelnen Kachel am linken Rand. */
  .kpitop{
    padding:8px 14px; gap:10px 14px;
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .kpitop .v{font-size:16px}
  .kpitop .l{font-size:10px}
  .kpitop .hinweis{display:none}
  .filterrow{padding:0 14px; gap:8px; margin-top:8px}
  .filterrow select{flex:1 1 100%}
  .summary{padding:0 14px; margin-top:12px; flex-wrap:nowrap}
  .countline .n{font-size:22px}
  .countline .zeit{display:none}
  /* Der Umschalter bleibt in derselben Zeile und wird schmal */
  .summary .viewswitch{flex:0 0 auto; width:auto}
  .summary .viewswitch button{padding:7px 11px; font-size:12.5px}
}

/* ============================================================
   Fassung 1.3.4 – Kursverlauf, Feingold im Detail
   ============================================================ */
.chart-h{font-size:16px; margin:26px 0 10px}
.metalpick{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px}
.metalpick button{
  border:1px solid var(--line); background:var(--surface2); color:var(--ink-soft);
  border-radius:99px; padding:6px 14px; font-size:13px;
}
.metalpick button[aria-pressed="true"]{
  background:var(--gold-soft); border-color:var(--gold); color:var(--gold); font-weight:700;
}
.chartbox{
  border:1px solid var(--line); border-radius:12px; background:var(--surface2);
  padding:10px 8px 4px; overflow:hidden;
}
.chartbox svg{display:block; width:100%; height:auto}
.chartbox .grid{stroke:var(--line); stroke-width:1}
.chartbox .lbl{fill:var(--ink-soft); font-size:10px; font-variant-numeric:tabular-nums}
.chartbox .ln{fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
/* Nachgetragene Tage bewusst zurückhaltender – sie sind nicht selbst
   gemessen. Gestrichelt über ein ganzes Jahr sah aus wie ein Fehler,
   deshalb nur dünner und blasser. */
.chartbox .ln.verlauf{stroke-width:1.5; opacity:.55}
.chartbox .fl{fill:var(--gold); opacity:.10}
.chartbox .leer{padding:26px 10px; text-align:center; color:var(--ink-soft); font-size:13px}
.chartlegend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin-top:8px}
.chartlegend i{display:inline-block; width:18px; height:0; border-top:2px solid var(--gold); vertical-align:middle; margin-right:6px}
.chartlegend .blass i{opacity:.55; border-top-width:1.5px}
/* Die Fußzeile der Kursmaske trägt drei Knöpfe – am Telefon darf sie umbrechen */
@media(max-width:700px){
  #dlgPrices .dlg-foot{flex-wrap:wrap; gap:8px}
  #dlgPrices .dlg-foot > span{display:none}
  #dlgPrices #btnFetchPrices{flex:1 1 100%; justify-content:center}
}

/* ============================================================
   Fassung 1.3.5 – Kursfelder nebeneinander
   ============================================================ */
.pricegrid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-bottom:6px}
.pricegrid .field{margin:0; min-width:0}
.pricegrid input{width:100%}
@media(max-width:700px){
  /* Am Telefon zwei je Zeile – vier nebeneinander wären Zahlenbrei */
  .pricegrid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
}

/* Hinweis auf den Papierkorb neben der Stückzahl */
.papierkorb-hinweis{
  font-size:12.5px; margin-left:4px; white-space:nowrap;
  text-decoration:none; border-bottom:1px dotted currentColor;
}
@media(max-width:700px){ .papierkorb-hinweis{font-size:12px; margin-left:2px} }

/* Die Fußzeile der Detailansicht trägt jetzt einen Knopf mehr */
@media(max-width:700px){
  #detFoot{flex-wrap:wrap; gap:8px}
  #detFoot > span{display:none}
  #detFoot .iconbtn,#detFoot .danger-ghost,#detFoot .primary{flex:1 1 auto; justify-content:center}
}

/* Hinweis im Menü, wenn die Datenbank noch ein Update braucht */
.mu-warn{
  margin-top:10px; padding:9px 11px; border-radius:9px; font-size:12.5px; line-height:1.45;
  border:1px solid var(--danger); color:var(--danger);
  background:color-mix(in srgb, var(--danger) 10%, transparent);
}
.mu-warn .hint{color:inherit; opacity:.8}

/* Selbstauskunft zur Kurs-Automatik */
#priceDiag{margin-top:10px; display:flex; flex-direction:column; gap:8px}
#priceDiag .diag{padding:9px 11px; border-radius:9px; line-height:1.45; border:1px solid var(--line)}
#priceDiag .diag code{background:var(--surface2); padding:1px 5px; border-radius:5px;
  overflow-wrap:anywhere; display:inline-block; max-width:100%}
#priceDiag .gut{border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); color:var(--ink-soft)}
#priceDiag .schlecht{border-color:var(--danger); color:var(--danger);
  background:color-mix(in srgb, var(--danger) 8%, transparent)}
#priceDiag .offen{color:var(--ink-soft)}