/* Multitool Arbeit – Gestaltung
   Farben als Tokens; Dunkelmodus folgt Windows, außer in den Einstellungen fest gewählt. */
:root{
  --bg:#f3f5f9; --panel:#ffffff; --panel-2:#f8f9fc; --ink:#152033; --muted:#5f6b80; --faint:#8a94a6;
  --line:#e3e7ef; --line-strong:#cfd5e1;
  --brand:#1b4b8f; --brand-ink:#ffffff; --brand-soft:#e8eef8; --brand-2:#c9cee4;
  --good:#1f7a52; --good-soft:#e3f4ec; --warn:#94600a; --warn-soft:#fdf2dc; --bad:#b0362f; --bad-soft:#fbe8e6;
  --radius:12px; --radius-s:8px;
  --shadow:0 1px 2px rgba(16,30,60,.05),0 6px 24px rgba(16,30,60,.06);
  --focus:0 0 0 3px rgba(27,75,143,.22);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10141b; --panel:#171c25; --panel-2:#1c222c; --ink:#e6e9ef; --muted:#9ba5b6; --faint:#6f7a8c;
    --line:#262d39; --line-strong:#323b4a;
    --brand:#7aa5e6; --brand-ink:#0d1626; --brand-soft:#1c2a40; --brand-2:#33405a;
    --good:#6fcf9f; --good-soft:#163227; --warn:#e8b562; --warn-soft:#352a17; --bad:#f08b83; --bad-soft:#3a1f1d;
    --shadow:none; --focus:0 0 0 3px rgba(122,165,230,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10141b; --panel:#171c25; --panel-2:#1c222c; --ink:#e6e9ef; --muted:#9ba5b6; --faint:#6f7a8c;
  --line:#262d39; --line-strong:#323b4a;
  --brand:#7aa5e6; --brand-ink:#0d1626; --brand-soft:#1c2a40; --brand-2:#33405a;
  --good:#6fcf9f; --good-soft:#163227; --warn:#e8b562; --warn-soft:#352a17; --bad:#f08b83; --bad-soft:#3a1f1d;
  --shadow:none; --focus:0 0 0 3px rgba(122,165,230,.3);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Grundaufbau ---------- */
.shell{display:grid;grid-template-columns:252px 1fr;height:100vh}
.sidebar{display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);padding:18px 14px;overflow-y:auto}
.brand{display:block;padding:6px 10px 18px}
.brand img{display:block;width:100%;max-width:168px;height:auto;border-radius:6px;background:#fff;padding:4px}
.nav-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:var(--radius-s);color:var(--muted);font-weight:500;border:0;background:none;cursor:pointer;text-align:left;transition:background .12s,color .12s}
.nav-item:hover{background:var(--panel-2);color:var(--ink)}
.nav-item.active{background:var(--brand-soft);color:var(--brand)}
.nav-item .tag{margin-left:auto}
/* Werkzeug mit Unterreitern: Kopfzeile + ausklappbare Liste */
.nav-group .chev{margin-left:auto;width:16px;height:16px;transition:transform .15s;opacity:.7}
.nav-group.open .chev{transform:rotate(90deg)}
.nav-sub{display:none;flex-direction:column;gap:1px;margin:2px 0 6px 19px;padding-left:10px;border-left:1px solid var(--line)}
.nav-group.open .nav-sub{display:flex}
.nav-sub .nav-item{padding:6px 10px;font-size:13.5px}
.nav-sub .nav-item svg.i{width:16px;height:16px}
.nav-sep{height:1px;background:var(--line);margin:4px 10px}
/* Reiter eines Werkzeugs nur, solange man darin ist (app.js navGroup) */
.nav-tabs{display:none;flex-direction:column;gap:1px;margin:1px 0 4px 17px;padding-left:8px;border-left:1px solid var(--line)}
.nav-tool.open .nav-tabs{display:flex}
.nav-sub .nav-tabs .nav-item{padding:5px 10px;font-size:13px}
.nav-item.current{color:var(--ink);font-weight:600}
.sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
/* Aktives Event (js/event.js) */
.event-box{margin:6px 0 4px}
.event-box .nav-label{padding-top:4px}
.event-box select{font-size:13px;padding:6px 9px;font-weight:500}
.event-box:not(.leer) select{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.konto-status{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--faint);white-space:nowrap}
.konto-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.konto-status.an{color:var(--good)}.konto-status.an::before{background:var(--good)}
.konto-status.demo{color:var(--warn)}.konto-status.demo::before{background:var(--warn)}
.version{font-size:11px;color:var(--faint);padding:8px 10px 0}
.version a{color:inherit}
.version a:hover{color:var(--brand);text-decoration:underline}

main{display:flex;flex-direction:column;min-width:0;overflow-y:auto}
.topbar > div:first-child{min-width:0}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:26px 36px 18px;position:sticky;top:0;z-index:4;background:linear-gradient(var(--bg) 82%,transparent)}
.crumb{font-size:12px;color:var(--faint);font-weight:500;min-height:18px}
h1{margin:0;font-size:24px;font-weight:650;letter-spacing:-.02em}
.subtitle{margin:4px 0 0;color:var(--muted);font-size:13.5px;max-width:760px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subtitle:empty{display:none}
.topbar-actions{display:flex;gap:8px}
.view{padding:6px 36px 48px;max-width:1280px;width:100%}

/* ---------- Bausteine ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:20px 22px}
.muted{color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap}
.tag.ready{background:var(--good-soft);color:var(--good)}
.tag.planned{background:var(--panel-2);color:var(--faint);border:1px solid var(--line)}
.tag.dirty{background:var(--warn-soft);color:var(--warn)}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--panel);padding:8px 15px;border-radius:var(--radius-s);cursor:pointer;font-weight:500;transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--muted)}
.btn:focus-visible,.nav-item:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn.ghost:hover{background:var(--panel-2);color:var(--ink)}
.btn.icon{padding:6px;border-color:transparent;background:none;color:var(--faint)}
.btn.icon:hover{color:var(--bad);background:var(--bad-soft)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- Startseite ---------- */
.section-title{font-size:13px;font-weight:600;color:var(--muted);margin:26px 0 12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:10px;padding:20px;transition:transform .14s,border-color .14s,box-shadow .14s;cursor:pointer}
.tile:hover{transform:translateY(-2px);border-color:var(--brand-2)}
.tile-head{display:flex;align-items:center;justify-content:space-between}
.tile-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.tile-icon svg.i{width:22px;height:22px}
.tile h3{margin:4px 0 0;font-size:15.5px;font-weight:600}
.tile p{margin:0;color:var(--muted);font-size:13.5px}
/* Startseite: Werkzeuge kurz (Symbol + Name) */
.tiles.kurz{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tile-k{display:flex;align-items:center;gap:12px;padding:10px 14px;font-weight:550;transition:border-color .12s,background .12s}
.tile-k:hover{border-color:var(--brand-2);background:var(--panel-2)}
.tile-k .tile-icon{width:34px;height:34px;border-radius:9px}
.tile-k .tile-icon svg.i{width:18px;height:18px}

/* ---------- Platzhalter ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:64px 24px}
.empty .tile-icon{width:58px;height:58px;border-radius:14px}
.empty .tile-icon svg.i{width:28px;height:28px}
.empty h2{margin:6px 0 0;font-size:19px}
.empty p{margin:0;max-width:520px;color:var(--muted)}

/* ---------- Einstellungen ---------- */
.settings{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start}
.settings-nav{position:sticky;top:96px;padding:8px}
.settings-suche{margin-bottom:6px}
.settings-nav .nav-item.leer{opacity:.4}
.settings-treffer{font-size:13px;color:var(--muted);padding:2px 4px}
.settings-nav .nav-item .dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--warn)}
.settings-body{display:flex;flex-direction:column;gap:18px;min-width:0}
.settings-section{scroll-margin-top:100px}
.settings-section > header{padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.settings-section h2{margin:0;font-size:16px;font-weight:600}
.settings-section > header p{margin:2px 0 0;color:var(--muted);font-size:13px}
.field{display:grid;grid-template-columns:220px 1fr;gap:6px 22px;padding:16px 22px;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:0}
.field.wide{grid-template-columns:1fr}
.field > label{font-weight:500;padding-top:8px}
.field .help{grid-column:2;font-size:12.5px;color:var(--faint);margin-top:-2px}
.field.wide .help{grid-column:1}
.field .changed{color:var(--warn);font-size:11.5px;font-weight:600;margin-left:6px}
.input,select.input,textarea.input{width:100%;padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--radius-s);background:var(--panel)}
textarea.input{resize:vertical;line-height:1.45}
.input:hover{border-color:var(--faint)}
.input.num{max-width:140px}
.with-btn{display:flex;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid var(--line-strong);border-radius:var(--radius-s);min-height:42px;background:var(--panel)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:99px;background:var(--brand-soft);color:var(--brand);font-weight:500;font-size:13px}
.chip button{border:0;background:none;color:inherit;cursor:pointer;opacity:.6;padding:0 4px;font-size:15px;line-height:1}
.chip button:hover{opacity:1}
.chips input{flex:1;min-width:150px;border:0;background:none;padding:3px 6px;outline:none}
.tbl-wrap{border:1px solid var(--line-strong);border-radius:var(--radius-s);overflow:hidden}
table.edit{width:100%;border-collapse:collapse}
table.edit th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--panel-2);padding:8px 10px;border-bottom:1px solid var(--line)}
table.edit td{padding:3px 4px;border-bottom:1px solid var(--line)}
table.edit tr:last-child td{border-bottom:0}
table.edit td input{width:100%;border:1px solid transparent;background:none;padding:6px 7px;border-radius:6px}
table.edit td input:hover{border-color:var(--line-strong)}
table.edit td input:focus{border-color:var(--brand);background:var(--panel);outline:none}
table.edit td.num input{text-align:right}
table.edit td.act{width:36px;text-align:center}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--panel-2);border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}
.savebar{position:sticky;bottom:16px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 12px 20px;margin-top:4px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 8px 30px rgba(16,30,60,.14);transform:translateY(12px);opacity:0;pointer-events:none;transition:.18s}
.savebar.show{transform:none;opacity:1;pointer-events:auto}
.savebar .actions{display:flex;gap:8px}
.file-hint{font-size:12px;color:var(--faint);padding:2px 4px}
.file-hint code{font-family:"Cascadia Mono",Consolas,monospace;font-size:11.5px}

/* ---------- Meldungen ---------- */
.toasts{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:8px;z-index:20}
.toast{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:10px;background:var(--ink);color:var(--bg);box-shadow:0 8px 30px rgba(0,0,0,.2);font-weight:500;animation:pop .2s ease-out}
.toast.error{background:var(--bad);color:#fff}
@keyframes pop{from{transform:translateY(8px);opacity:0}}

@media (max-width:1100px){
  .settings{grid-template-columns:1fr}
  .settings-nav{position:static;display:flex;flex-wrap:wrap}
  .settings-nav .nav-item{width:auto}
  .field{grid-template-columns:1fr}
  .field .help{grid-column:1}
}
/* Neuigkeiten (views/neuigkeiten.js) */
.neu-version{color:var(--muted);margin:0 0 14px}
.neu-tag{margin-bottom:14px}
.neu-tag h2{font-size:15px;margin:0 0 8px}
.neu-tag ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;line-height:1.45}

/* ---------- Gemeinsame Bausteine (api.js: hilfe, klappe, menue, dateiWahl, ergebnis) ---------- */
.hilfe{display:inline-flex;vertical-align:middle;margin-left:6px;color:var(--faint);cursor:help;border-radius:50%}
.hilfe svg.i{width:15px;height:15px}
.hilfe:hover,.hilfe:focus-visible{color:var(--brand);outline:none}
.klappe{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--panel)}
.klappe > summary{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;list-style:none;font-weight:550;user-select:none}
.klappe > summary::-webkit-details-marker{display:none}
.klappe > summary::before{content:"";width:7px;height:7px;flex:none;border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint);transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.klappe[open] > summary::before{transform:rotate(45deg)}
.klappe > summary:hover{color:var(--brand)}
.klappe-info{margin-left:auto;font-weight:400;font-size:12.5px;color:var(--muted);text-align:right}
.klappe-body{padding:4px 12px 12px}
.menue{position:relative;display:inline-flex}
.menue-knopf{padding:7px 9px}
.menue-liste{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:210px;padding:5px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-s);box-shadow:0 8px 30px rgba(16,30,60,.16);flex-direction:column}
.menue.open .menue-liste{display:flex}
.menue-punkt{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;font-size:13.5px;border:0;background:none;border-radius:6px;cursor:pointer;text-align:left;white-space:nowrap}
.menue-punkt:hover{background:var(--panel-2)}
.menue-punkt svg.i{width:16px;height:16px;color:var(--muted)}
.menue-punkt.gefahr{color:var(--bad)}
.menue-punkt[disabled]{opacity:.45;pointer-events:none}
.menue-sep{height:1px;background:var(--line);margin:4px 6px}
.datei-wahl{display:flex;flex-direction:column;gap:8px}
.datei-drop{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-s);background:var(--panel-2);transition:border-color .12s,background .12s}
.datei-drop.over{border-color:var(--brand);background:var(--brand-soft)}
.datei-hinweis{color:var(--faint);font-size:13px}
.datei-gewaehlt{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:var(--radius-s)}
.datei-gewaehlt[hidden]{display:none}
.datei-gewaehlt svg.i{width:16px;height:16px;color:var(--muted)}
.datei-name{font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.datei-info{color:var(--muted);font-size:12.5px;margin-right:auto}
.ergebnis{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px 8px 12px;border-radius:var(--radius-s);background:var(--good-soft)}
.ergebnis-ok{display:inline-flex;color:var(--good)}
.ergebnis-name{font-weight:600;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ergebnis .btn{padding:5px 11px;font-size:13px}
.nav-sublabel{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:8px 10px 2px}
/* Hinweise beim Einlesen (api.js hinweise): (!) mit Anzahl, Liste als Aufklapper */
.hinweise{position:relative;display:inline-flex;vertical-align:middle}
.hinweise[hidden]{display:none}
.hinweise-knopf{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 7px;border-radius:99px;border:1px solid transparent;font-weight:650;font-size:13px;cursor:pointer;background:var(--warn-soft);color:var(--warn)}
.hinweise-knopf svg.i{width:17px;height:17px;stroke-width:2.1}
.hinweise-knopf:hover{border-color:currentColor}
.hinweise.fehler .hinweise-knopf{background:var(--bad-soft);color:var(--bad)}
.hinweise.info .hinweise-knopf{background:var(--brand-soft);color:var(--brand)}
.hinweise-liste{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(460px,80vw);max-height:60vh;overflow-y:auto;padding:4px 0 8px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-s);box-shadow:0 8px 30px rgba(16,30,60,.16);text-align:left;font-weight:400}
.hinweise.open .hinweise-liste{display:block}
.hinweise-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:13.5px}
.hinweise-kopf span{color:var(--muted);font-size:12.5px;white-space:nowrap}
.hinweise-gruppe{padding:6px 14px 0}
.hinweise-quelle{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:4px 0 2px}
.hinweise-gruppe ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.hinweise-gruppe li{position:relative;padding-left:15px;font-size:13px;line-height:1.45}
.hinweise-gruppe li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--warn)}
.hinweise-gruppe li.fehler::before{background:var(--bad)}
.hinweise-gruppe li.info::before{background:var(--brand)}
.hinweise-zeile{color:var(--muted);margin-right:6px;font-variant-numeric:tabular-nums}