/* Max-Pechstein-Datenbank — schlichtes, ruhiges Archiv-Layout
   VOLLSTÄNDIGE Datei (Stand Runde 13): Basis + Liste/Sortierung + Thumbnails +
   Autovervollständigung + Lightbox + Merkliste + Dossier. */
:root{
  --bg:#f6f5f2; --karte:#fff; --text:#1c1b19; --muted:#6b6660;
  --linie:#e3e0da; --akzent:#7a1f1f; --akzent-h:#5c1616;
  --ok:#1f6b3a; --warn:#9a6b00; --fehler:#9a1f1f;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text)}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.muted{color:var(--muted)}

/* ---- Grundgeruest: Seitenleiste + Hauptbereich ---- */
body.app{display:flex;min-height:100vh}
.brand{font-weight:700;color:var(--text)}

.sidebar{width:232px;flex:0 0 232px;background:#fff;border-right:1px solid var(--linie);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand{display:block;padding:1rem 1.1rem .8rem;font-size:1.02rem;line-height:1.3;
  border-bottom:1px solid var(--linie)}
.sidebar nav{display:flex;flex-direction:column;padding:.6rem 0;flex:1}
.sidebar nav a{display:flex;align-items:center;gap:.55rem;padding:.42rem 1.1rem;
  color:var(--text);font-size:.93rem;border-left:3px solid transparent}
.sidebar nav a:hover{background:#faf7f5;text-decoration:none}
.sidebar nav a.aktiv{background:#f7efec;border-left-color:var(--akzent);
  color:var(--akzent);font-weight:600}
.nav-icon{width:1.1rem;text-align:center;color:var(--muted);font-size:.85rem;flex:0 0 auto}
.sidebar nav a.aktiv .nav-icon{color:var(--akzent)}
.nav-gruppe{padding:.9rem 1.1rem .25rem;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.sidebar-fuss{border-top:1px solid var(--linie);padding:.8rem 1.1rem;font-size:.85rem;
  display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.sidebar-fuss .user{color:var(--muted);line-height:1.3}

.hauptbereich{flex:1;min-width:0;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1100px;margin:1.4rem auto;padding:0 1.2rem;flex:1}
.foot{max-width:1100px;margin:2rem auto 0;padding:1rem 1.2rem;color:var(--muted);
  font-size:.85rem;border-top:1px solid var(--linie);width:100%}
body.nackt{display:block}

/* Mobil: Seitenleiste einklappbar */
.mobilkopf{display:none}
.sidebar-schatten{display:none}
@media (max-width:820px){
  body.app{display:block}
  .mobilkopf{display:flex;align-items:center;gap:.7rem;background:#fff;
    border-bottom:1px solid var(--linie);padding:.55rem .9rem;
    position:sticky;top:0;z-index:60}
  .menu-knopf{background:none;border:1px solid var(--linie);color:var(--text);
    font-size:1.15rem;padding:.25rem .6rem;border-radius:6px}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:80;height:100vh;
    transform:translateX(-100%);transition:transform .18s ease}
  .sidebar.offen{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .sidebar-schatten.offen{display:block;position:fixed;inset:0;z-index:70;
    background:rgba(20,18,16,.35)}
}

h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.1rem;margin:1.4rem 0 .5rem}

/* Filter */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.filter input,.filter select,.edit input,.edit select,.edit textarea,.login input{
  padding:.45rem .6rem;border:1px solid var(--linie);border-radius:6px;background:#fff;font:inherit}
.filter input[type=search]{flex:1;min-width:220px}
button{background:var(--akzent);color:#fff;border:0;border-radius:6px;
  padding:.5rem .9rem;font:inherit;cursor:pointer}
button:hover{background:var(--akzent-h)}
.reset{align-self:center;color:var(--muted);font-size:.9rem}

/* Liste */
table.liste{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linie);
  border-radius:8px;overflow:hidden}
.liste th,.liste td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--linie);
  font-size:.93rem;vertical-align:top}
.liste th{background:#faf9f7;font-weight:600;color:var(--muted)}
.liste tbody tr{cursor:pointer}
.liste tbody tr:hover{background:#faf7f5}

.pager{display:flex;gap:1rem;align-items:center;justify-content:center;margin:1.2rem 0}

/* Sortierbare Spaltenkoepfe */
.sortlink{color:var(--muted);text-decoration:none;display:inline-block}
.sortlink:hover{color:var(--text)}
.sortlink.aktiv{color:var(--akzent);font-weight:700}

/* Merkliste-Stern in der Liste */
.th-merk{width:34px}
.td-merk{width:34px;text-align:center;padding:.2rem}
.merk-stern{background:none;border:0;cursor:pointer;font-size:1rem;line-height:1;
  color:#cfc9c1;padding:.18rem .34rem;border-radius:6px;transition:all .12s}
.merk-stern:hover{color:#c9a23a;background:#faf2df}
.merk-stern.aktiv{color:#fff;background:#e0a920;box-shadow:0 1px 3px rgba(180,130,10,.35)}
.merk-stern.aktiv:hover{background:#c9941a;color:#fff}
.merk-nav{display:inline-flex;align-items:center;gap:.3rem}
.merk-zahl{background:var(--akzent);color:#fff;border-radius:999px;
  font-size:.72rem;padding:.05rem .42rem;line-height:1.4}

/* Merklisten-Seite */
.merk-aktionen{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1.2rem}
.merk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.merk-karte{position:relative;margin:0;background:#fff;border:1px solid var(--linie);
  border-radius:8px;padding:.5rem}
.merk-karte img{width:100%;height:170px;object-fit:contain;background:#faf9f7;border-radius:4px}
.merk-karte .kein-bild{height:170px}
.merk-karte figcaption{margin-top:.4rem;font-size:.85rem;line-height:1.35}
.merk-entfernen{position:absolute;top:.4rem;right:.4rem;margin:0}
.merk-entfernen button{background:rgba(122,31,31,.9);color:#fff;border:0;border-radius:50%;
  width:24px;height:24px;cursor:pointer;font-size:.9rem;line-height:1}
.merk-entfernen button:hover{background:var(--akzent-h)}

/* Vorschau-Thumbnail in der Liste */
.th-bild{width:64px}
.td-bild{width:64px;padding:.25rem .4rem}
.td-bild img{width:54px;height:54px;object-fit:cover;border-radius:4px;
  background:#faf9f7;border:1px solid var(--linie);display:block}
.kein-thumb{display:inline-block;width:54px;text-align:center;color:var(--linie)}

/* Suchfeld + Autovervollstaendigung */
.suchfeld{position:relative;flex:1;min-width:240px}
.suchfeld input[type=search]{width:100%}
.vorschlaege{display:none;position:absolute;z-index:30;left:0;right:0;top:100%;
  background:#fff;border:1px solid var(--linie);border-radius:0 0 8px 8px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);max-height:340px;overflow:auto}
.v-item{padding:.45rem .6rem;cursor:pointer;border-bottom:1px solid var(--linie);
  display:flex;gap:.5rem;align-items:baseline}
.v-item:last-child{border-bottom:0}
.v-item:hover,.v-item.hover{background:#faf2ef}
.v-id{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;color:var(--muted)}
.v-titel{flex:1}
.v-jahr{color:var(--muted);font-size:.85rem}

/* Lightbox / Bild-Vollansicht */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.92);
  display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lb-bild{max-width:92vw;max-height:88vh;object-fit:contain;
  box-shadow:0 4px 40px rgba(0,0,0,.5);background:#fff}
.lb-zu,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.12);color:#fff;
  border:0;cursor:pointer;font-size:2rem;line-height:1;border-radius:8px;padding:.3rem .7rem}
.lb-zu:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28)}
.lb-zu{top:1rem;right:1rem;font-size:2.4rem}
.lb-prev{left:1.5rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.5rem;top:50%;transform:translateY(-50%)}
.lb-titel{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;
  color:#f3f0ec;font-size:.95rem;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.galerie img.zoombar{cursor:zoom-in}

/* Badges Echtheit */
.badge{display:inline-block;padding:.08rem .5rem;border-radius:999px;font-size:.78rem;
  background:#eee;color:#444;white-space:nowrap}
.b-originalgesichert{background:#e3f1e8;color:var(--ok)}
.b-flschungnachgewiesen{background:#f6e0e0;color:var(--fehler)}
.b-zweifelhaftinprfung,.b-zweifelhaft{background:#f6efda;color:var(--warn)}
.b-zuschreibung{background:#eef0f6;color:#3a4a7a}
.b-warn{background:#f6efda;color:var(--warn)}

/* Werk-Detail */
.zurueck{margin:.2rem 0 .6rem}
.werk-kopf{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;
  border-bottom:1px solid var(--linie);padding-bottom:.7rem;margin-bottom:1rem}
.werk-kopf h1{margin:0;flex:1;min-width:240px}
.ids{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:0}
.btn{display:inline-block;background:var(--akzent);color:#fff;padding:.4rem .8rem;border-radius:6px}
.btn:hover{background:var(--akzent-h);text-decoration:none}

.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:.7rem;margin:1rem 0}
.galerie figure{margin:0;background:#fff;border:1px solid var(--linie);border-radius:8px;
  padding:.35rem;text-align:center}
.galerie img{width:100%;height:120px;object-fit:contain;background:#faf9f7}
.kein-bild{height:150px;display:flex;flex-direction:column;justify-content:center;
  align-items:center;color:var(--muted);font-size:.8rem;background:#faf9f7;border-radius:4px}
.galerie figcaption{font-size:.78rem;color:var(--muted);margin-top:.3rem}
.galerie .pdf-link{display:inline-block;margin-top:.25rem;font-size:.78rem;color:var(--akzent)}
.galerie .pdf-link:hover{text-decoration:underline}

.felder{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.4rem 1.4rem;margin:0}
.feld{display:flex;gap:.6rem;padding:.25rem 0;border-bottom:1px dotted var(--linie)}
.feld dt{min-width:110px;color:var(--muted);font-size:.85rem;margin:0}
.feld dd{margin:0;flex:1}
.block{margin-top:1.2rem}
.block p{background:#fff;border:1px solid var(--linie);border-radius:8px;padding:.7rem .9rem;margin:0}
.prov{margin:0;padding-left:1.2rem}
.prov li{margin:.2rem 0}
.hinweis{margin-top:1.2rem;color:var(--warn);font-size:.9rem}

/* Formulare */
.card.login{max-width:380px;margin:3rem auto;background:#fff;border:1px solid var(--linie);
  border-radius:10px;padding:1.6rem}
.login label,.edit label{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.7rem;font-size:.9rem;color:var(--muted)}
.login input,.edit input,.edit textarea,.edit select{color:var(--text)}
.edit .row{display:flex;gap:1rem;flex-wrap:wrap}
.edit .row label{flex:1;min-width:120px}
.edit label.chk{flex-direction:row;align-items:center;gap:.4rem}
.edit textarea{width:100%;font:inherit}
.actions{display:flex;gap:1rem;align-items:center;margin-top:1rem}
.ok{color:var(--ok)} .error{color:var(--fehler)}

/* Benutzerverwaltung */
.card{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:1.2rem;margin-bottom:1.4rem}
.inline{display:inline-flex;gap:.3rem;align-items:center;margin:0}
.aktionen{display:flex;flex-wrap:wrap;gap:.5rem}
.aktionen input,.aktionen select{padding:.3rem .4rem;border:1px solid var(--linie);border-radius:5px}
button.danger{background:#8a2020}
button.danger:hover{background:#6e1717}
table.liste form.inline button{padding:.3rem .6rem;font-size:.85rem}

/* Bild-Import */
.import-modus{border:1px solid var(--linie);border-radius:8px;padding:.9rem 1rem;margin:.6rem 0}
.import-modus .radio{flex-direction:row;align-items:center;gap:.4rem;color:var(--text);font-weight:600}
.import-modus .suchfeld{margin:.4rem 0 .2rem}

/* Echtheitsdossier */
.dossier-block .dossier{background:#fff;border:1px solid var(--linie);border-left:4px solid var(--akzent);
  border-radius:8px;padding:.7rem .9rem;margin-bottom:.6rem}
.dossier-block .dossier p{margin:.2rem 0}
.dossier-block .dossier .badge{margin-right:.4rem}

/* Blättern im Werk-Detail (voriges/nächstes) + Zurück zur Liste */
.werk-nav{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.werk-nav p{margin:.4rem 0}
.blaettern a,.blaettern .muted{margin:0 .35rem}
.blaettern a{text-decoration:none}

/* CSV-Export-Link in der Filterleiste */
.filter a.csv{margin-left:auto}

/* Leihgaben */
.leih-block .leihgabe{background:#fff;border:1px solid var(--linie);border-left:4px solid #2c5f8a;
  border-radius:8px;padding:.7rem .9rem;margin-bottom:.6rem}
.leih-block .leihgabe p{margin:.2rem 0}
.leih-block .leihgabe .badge{margin-right:.4rem}
.b-angefragt{background:#f6efda;color:var(--warn)}
.b-zugesagt{background:#e0ecf6;color:#2c5f8a}
.b-luft{background:#e3f1e8;color:var(--ok)}          /* "läuft" */
.b-zurckgegeben{background:#eceae6;color:#555}       /* "zurückgegeben" */
.b-abgesagt{background:#f6e0e0;color:var(--fehler)}

/* ---- Dashboard ---- */
.dash-suche{margin:0 0 1.2rem}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:.8rem;margin-bottom:1.4rem}
.kachel{display:flex;flex-direction:column;gap:.15rem;background:#fff;
  border:1px solid var(--linie);border-radius:10px;padding:.9rem 1rem;color:var(--text)}
a.kachel:hover{text-decoration:none;border-color:var(--akzent);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.k-zahl{font-size:1.7rem;font-weight:700;line-height:1.1}
.k-label{color:var(--muted);font-size:.85rem;line-height:1.3}
.kachel.k-warn{border-left:4px solid var(--warn)}
.kachel.k-warn .k-zahl{color:var(--warn)}
.dash-echt .badges{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 0}
.dash-hilfe{margin:0}
.dash-zuletzt h2{margin-top:0}

/* ---- Werk-Kacheln (Galerie-Ansicht der Werkliste + Dashboard) ---- */
.werk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.werk-kachel{position:relative;display:flex;flex-direction:column;gap:.2rem;background:#fff;
  border:1px solid var(--linie);border-radius:10px;padding:.5rem;color:var(--text);font-size:.85rem}
.werk-kachel:hover{text-decoration:none;border-color:var(--akzent);box-shadow:0 2px 10px rgba(0,0,0,.07)}
.werk-kachel img{width:100%;height:170px;object-fit:contain;background:#faf9f7;border-radius:6px}
.werk-kachel .kein-bild{height:170px}
.werk-kachel .wk-titel{font-weight:600;line-height:1.3;margin-top:.25rem}
.werk-kachel .wk-stern{position:absolute;top:.55rem;right:.55rem;z-index:2}
.werk-kachel-link{display:flex;flex-direction:column;gap:.2rem;color:var(--text)}
.werk-kachel-link:hover{text-decoration:none}

/* Ansicht-Umschalter Liste/Galerie */
.ansicht-toggle{display:inline-flex;border:1px solid var(--linie);border-radius:6px;overflow:hidden;align-self:center}
.ansicht-toggle a{padding:.32rem .7rem;font-size:.85rem;color:var(--muted);background:#fff}
.ansicht-toggle a:hover{text-decoration:none;color:var(--text)}
.ansicht-toggle a.aktiv{background:var(--akzent);color:#fff}

/* ---- Hilfe ---- */
.hilfe-liste{display:flex;flex-direction:column;gap:.7rem;max-width:820px}
.hilfe-karte{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:.2rem .9rem}
.hilfe-karte summary{cursor:pointer;font-weight:600;padding:.65rem 0;list-style-position:inside}
.hilfe-karte ul{margin:.2rem 0 .8rem;padding-left:1.4rem}
.hilfe-karte li{margin:.3rem 0}
.h-zeit{float:right;color:var(--muted);font-weight:400;font-size:.8rem;
  background:#faf9f7;border:1px solid var(--linie);border-radius:999px;padding:.05rem .5rem}

/* ---- GND-Suche (personen.php) ---- */
.gnd-treffer{background:#fff;border:1px solid var(--linie);border-radius:8px;
  padding:.4rem .6rem;margin:-.3rem 0 .8rem}
.gnd-item{padding:.4rem .3rem;border-bottom:1px solid var(--linie);cursor:pointer}
.gnd-item:last-of-type{border-bottom:0}
.gnd-item:hover{background:#faf2ef}
.gnd-fuss{margin:.4rem .2rem .2rem;font-size:.8rem}

/* ---- KI-Karteikarten-Erfassung ---- */
.ki-vergleich{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linie);border-radius:8px;overflow:hidden}
.ki-vergleich th,.ki-vergleich td{border-bottom:1px solid var(--linie);padding:.5rem .7rem;
  text-align:left;vertical-align:top;font-size:.9rem}
.ki-vergleich th{background:#faf9f7;color:var(--muted);font-weight:600}
.ki-vergleich td.feldname{white-space:nowrap;color:var(--muted)}
.ki-vergleich textarea,.ki-vergleich input[type=text]{width:100%;font:inherit;
  padding:.35rem .5rem;border:1px solid var(--linie);border-radius:6px}
.ki-vergleich .alt{color:var(--muted);font-size:.85rem}
.ki-unsicher{outline:2px solid var(--warn);outline-offset:1px}
.ki-kopf{display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1rem}
.ki-kopf img{max-width:420px;width:100%;border:1px solid var(--linie);border-radius:8px;background:#fff;cursor:zoom-in}
.ki-hinweis{background:#fdf6e6;border:1px solid #ecd9a8;border-radius:8px;padding:.6rem .9rem;
  font-size:.88rem;margin:.8rem 0}
.galerie .ki-link{display:inline-block;margin-top:.25rem;font-size:.78rem;color:var(--akzent)}

/* ---- Auktionen ---- */
.b-verkauft{background:#e3f1e8;color:var(--ok)}
.b-nichtverkauft{background:#eceae6;color:#555}
.b-nichtmitgeteilt{background:#eceae6;color:#888}
.b-exakt{background:#e3f1e8;color:var(--ok)}
.b-wahrscheinlich{background:#e0ecf6;color:#2c5f8a}
.b-manuell{background:#e0ecf6;color:#2c5f8a}
.b-unklar{background:#f6efda;color:var(--warn)}
.b-kein,.b-keinbestand{background:#eceae6;color:#888}
.zuordnen{margin-top:.25rem}
.zuordnen input{font-size:.8rem;padding:.2rem .35rem;border:1px solid var(--linie);border-radius:5px}
.zuordnen button{padding:.2rem .5rem;font-size:.8rem}
.auktions-tabelle td,.auktions-tabelle th{font-size:.88rem}

/* ---- Archiv-Design und barrierefreie Interaktion (Runde 14) ---- */
:root{
  --bg:#f2ede3; --karte:#fffdf8; --text:#211f1b; --muted:#6f685e;
  --linie:#d9d0c2; --akzent:#a6422a; --akzent-h:#7f2f1f;
  --tinte:#243746; --papier:#faf6ed; --fokus:#1672b8;
  --schatten:0 14px 40px rgba(55,42,25,.08);
}
body{font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;background:
  radial-gradient(circle at 85% 0,rgba(166,66,42,.07),transparent 30rem),var(--bg)}
h1,h2,h3,.brand,.wk-titel{font-family:Iowan Old Style,Baskerville,"Times New Roman",serif;letter-spacing:-.012em}
h1{font-size:clamp(1.75rem,3vw,2.45rem);line-height:1.12;font-weight:600}
h2{font-size:1.35rem}
.sidebar{width:250px;flex-basis:250px;background:#f9f4ea;border-color:#cfc4b4}
.sidebar .brand{font-size:1.18rem;padding:1.3rem 1.2rem;color:var(--tinte)}
.sidebar nav a{padding:.5rem 1.15rem;border-left-width:4px}
.sidebar nav a.aktiv{background:#eee1d2;color:#843320}
.nav-icon{width:1.25rem;height:1.25rem;display:inline-flex;align-items:center;justify-content:center}
.icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.16em;flex:none}
.wrap{max-width:1240px;margin:2rem auto;padding:0 clamp(1rem,3vw,2.4rem)}
.card,.werk-kachel,.merk-karte,table.liste{background:var(--karte);border-color:var(--linie);box-shadow:0 2px 12px rgba(55,42,25,.035)}
.werk-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem}
.werk-kachel img,.werk-kachel .kein-bild{height:260px;background:#eee9df}
.galerie{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.galerie img{height:min(52vh,480px);background:#eee9df}

button,.btn{border-radius:4px;font-weight:600;letter-spacing:.01em}
button.secondary,.btn.secondary{background:transparent;color:var(--akzent);border:1px solid var(--akzent)}
button.ghost,.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--linie)}
button.ghost:hover,.btn.ghost:hover{background:#eee6da}
input,select,textarea{accent-color:var(--akzent)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,
[tabindex]:focus-visible,.galerie img.zoombar:focus-visible{
  outline:3px solid var(--fokus)!important;outline-offset:3px!important;box-shadow:0 0 0 5px #fff!important
}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.status-chip{display:inline-flex;align-items:center;gap:.32rem;border:1px solid currentColor;border-radius:999px;padding:.15rem .55rem;font-size:.78rem;line-height:1.35;background:#f3f0e9;color:#504a42;white-space:nowrap}
.status-chip .icon{width:.9rem;height:.9rem}
.status-chip[class*="erhalten"],.status-chip[class*="gesichert"],.status-chip[class*="erledigt"]{color:#23623b;background:#edf6ef}
.status-chip[class*="verschollen"],.status-chip[class*="zerst"],.status-chip[class*="f-lschung"],.status-chip[class*="kritisch"]{color:#8f261d;background:#fbebE7}

.feldkopf{display:flex;align-items:center;gap:.3rem}
.feldhilfe-knopf{background:transparent;color:var(--muted);padding:.1rem;border-radius:50%;line-height:1}
.feldhilfe-knopf:hover{background:#eee5d8;color:var(--text)}
.feldhilfe{display:block;margin:.25rem 0 .45rem;padding:.5rem .65rem;background:#f0e9dc;border-left:3px solid var(--akzent);border-radius:2px;color:#514a40;font-size:.84rem;line-height:1.45}
.feldhilfe[hidden]{display:none}

.werk-picker{position:relative;margin-bottom:.85rem}
.werk-picker>label{display:block;margin-bottom:.25rem;color:var(--muted);font-size:.9rem}
.combobox-wrap{position:relative}
.werk-suche{width:100%;padding:.65rem .75rem;border:1px solid var(--linie);border-radius:5px;background:#fff;font:inherit}
.werk-vorschlaege{display:block;top:calc(100% + 2px);max-height:390px;border-radius:5px;overflow:auto}
.werk-vorschlaege[hidden]{display:none}
.werk-option{width:100%;display:flex;align-items:center;gap:.7rem;padding:.5rem;text-align:left;background:#fff;color:var(--text);border:0;border-bottom:1px solid var(--linie);border-radius:0;font-weight:400}
.werk-option:hover,.werk-option[aria-selected="true"]{background:#f2e7dc;color:var(--text)}
.werk-option img,.werk-option-bild{width:54px;height:54px;object-fit:cover;background:#e6dfd3;border-radius:3px;flex:0 0 54px}
.werk-option strong,.werk-option small,.werk-auswahl strong,.werk-auswahl small{display:block}
.werk-option small,.werk-auswahl small{color:var(--muted);font-size:.78rem;margin-top:.1rem}
.werk-auswahl{display:flex;align-items:center;gap:.7rem;margin-top:.45rem;padding:.5rem;background:#f6f0e6;border:1px solid var(--linie);border-radius:5px}
.werk-auswahl[hidden]{display:none}
.werk-auswahl img{width:64px;height:64px;object-fit:cover;background:#e5ded2}

.form-section{background:var(--karte);border:1px solid var(--linie);border-radius:8px;padding:clamp(1rem,2.3vw,1.6rem);margin:1rem 0;box-shadow:var(--schatten)}
.form-section>h2{margin-top:0;padding-bottom:.6rem;border-bottom:1px solid var(--linie)}
.autosave-leiste{position:sticky;top:.6rem;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#2d3e49;color:#fff;padding:.65rem .85rem;border-radius:5px;box-shadow:0 8px 25px rgba(20,30,35,.18)}
.autosave-leiste .muted{color:#e1e7e9}
.konflikt{border:1px solid #b53b2f;border-left:5px solid #b53b2f;background:#fff2ed;border-radius:5px;padding:.8rem 1rem;color:#682017}
.entwurf-hinweis{border-left:5px solid #b27a20;background:#fff8e8;padding:.8rem 1rem;border-radius:5px}

.schritte{display:flex;align-items:flex-start;margin:1rem 0 1.5rem;padding:0;list-style:none;counter-reset:step}
.schritte li{position:relative;flex:1;text-align:center;color:var(--muted);font-size:.82rem}
.schritte li::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:2rem;height:2rem;margin:0 auto .35rem;border:2px solid var(--linie);border-radius:50%;background:var(--bg);font-weight:700}
.schritte li:not(:last-child)::after{content:"";position:absolute;z-index:-1;top:1rem;left:50%;width:100%;border-top:2px solid var(--linie)}
.schritte li.aktiv,.schritte li.fertig{color:var(--text);font-weight:600}
.schritte li.aktiv::before{border-color:var(--akzent);background:var(--akzent);color:#fff}
.schritte li.fertig::before{content:"✓";border-color:#276541;background:#276541;color:#fff}
.schritte li.fertig::after{border-color:#276541}

.aufgaben-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:.85rem}
.aufgabe{background:var(--karte);border:1px solid var(--linie);border-left:5px solid #7b8490;border-radius:6px;padding:.9rem}
.aufgabe.prio-hoch{border-left-color:#b37618}.aufgabe.prio-kritisch{border-left-color:#a52c24}
.aufgabe h3{margin:.1rem 0 .35rem}.aufgabe p{margin:.3rem 0}
.trainings-banner{display:flex;gap:.8rem;align-items:flex-start;background:#193f53;color:#fff;border-radius:8px;padding:1rem 1.2rem;margin-bottom:1.2rem}
.trainings-banner .icon{width:1.6rem;height:1.6rem}
.training-card .training-bild{height:190px;background:linear-gradient(135deg,#d1b58d,#9d4b36 52%,#173f55);border-radius:5px;margin-bottom:.8rem}
.preview-aenderung{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(110px,1fr) auto minmax(110px,1fr);align-items:center;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--linie)}
.preview-aenderung .neu{font-weight:700;color:#712b1c}

@media(max-width:720px){
  .werk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .werk-kachel img,.werk-kachel .kein-bild{height:180px}
  .liste-wrap{overflow-x:auto;margin-inline:-1rem;padding-inline:1rem}
  .schritte li{font-size:.7rem}
  .preview-aenderung{grid-template-columns:1fr}.preview-aenderung .icon{transform:rotate(90deg)}
}

/* ---- Bildzuordnung: verschieben / loesen (Werkseite) ---- */
.bild-aktion{margin-top:.35rem;font-size:.78rem;text-align:left;position:relative}
.bild-aktion summary{cursor:pointer;color:var(--akzent);list-style:none;display:flex;
  align-items:center;gap:.25rem;justify-content:center}
.bild-aktion summary::-webkit-details-marker{display:none}
.bild-aktion[open]{z-index:20}
.bild-aktion .werk-picker,.bild-aktion form{margin:.4rem 0}
.bild-aktion form{background:#faf9f7;border:1px solid var(--linie);border-radius:6px;padding:.4rem}
.bild-aktion button{font-size:.78rem;padding:.25rem .5rem;width:100%}
.bild-aktion input[type=search]{font-size:.78rem}
.bild-aktion label{font-size:.72rem;color:var(--muted)}

/* ---- Bilder ergaenzen per Drag-and-drop ---- */
.bild-drop{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.4rem 0 1rem;
  padding:.7rem .9rem;border:2px dashed var(--linie);border-radius:8px;background:#fff;
  font-size:.86rem}
.bild-drop label{display:flex;align-items:center;gap:.4rem;cursor:pointer;font-weight:600}
.bild-drop input[type=file]{font-size:.8rem}
.bild-drop.drueber{border-color:var(--akzent);background:#faf3f1}

/* ---- Freie Medien ---- */
.medienliste{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.6rem}
.medienzeile{display:flex;gap:.9rem;align-items:flex-start;background:#fff;
  border:1px solid var(--linie);border-radius:8px;padding:.6rem}
.medienzeile img{width:120px;height:120px;object-fit:contain;background:#faf9f7;flex:0 0 120px}
.medienzeile .kein-bild{width:120px;height:120px;flex:0 0 120px}
.medieninfo{flex:1;min-width:160px;font-size:.86rem}
.medienform{flex:0 0 320px;max-width:100%}
.medienform button{margin-top:.4rem}
@media (max-width:700px){.medienzeile{flex-wrap:wrap}.medienform{flex:1 1 100%}}
