:root{
  --bg:#F3F3F1; --bg-raised:#FFFFFF; --bg-sunken:#F0EFEC;
  --ink:#15171E; --ink-soft:#43454F; --muted:#767A86;
  --border:#E4E3DD; --border-strong:#D2D0C6;
  --accent:#E2231B; --accent-strong:#B81913; --accent-soft:#FCE7E5;
  --success:#1A8F54; --success-soft:#E4F5EB;
  --warning:#9A630B; --warning-soft:#FBEEDA;
  --critical:#C23A2C; --critical-soft:#FCE7E3;
  --radius-sm:9px; --radius:14px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(21,23,30,.05);
  --shadow:0 2px 8px rgba(21,23,30,.06),0 1px 2px rgba(21,23,30,.05);
  --shadow-lg:0 16px 40px -8px rgba(21,23,30,.18),0 4px 10px -4px rgba(21,23,30,.08);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15161B; --bg-raised:#1E2027; --bg-sunken:#17181D;
    --ink:#EDEDEF; --ink-soft:#C7C8CF; --muted:#8B8E99;
    --border:#2C2E36; --border-strong:#3A3D47;
    --accent:#FF5048; --accent-strong:#FF6E67; --accent-soft:#3A1C1C;
    --success:#3FC884; --success-soft:#133325;
    --warning:#E3A53D; --warning-soft:#3A2D12;
    --critical:#FF6B5B; --critical-soft:#3A1D1A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 2px 10px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
    --shadow-lg:0 20px 48px -10px rgba(0,0,0,.55),0 6px 14px -6px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased}
a{color:var(--accent-strong); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:23px; font-weight:700; margin:0 0 4px; letter-spacing:-.015em}
h2{font-size:15.5px; font-weight:700; margin:0; letter-spacing:-.005em}

/* ---------------------------------------------------------------- Kopfzeile */
.top{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:20px; padding:13px 24px;
  background:color-mix(in srgb, var(--bg-raised) 88%, transparent); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border); flex-wrap:wrap}
.marke{display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); font-size:15.5px; letter-spacing:-.01em}
.marke-icon{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
  background:linear-gradient(145deg,var(--accent),var(--accent-strong)); color:#fff; font-size:13px; font-style:normal}
.pfad{display:flex; gap:8px; align-items:center; color:var(--muted); flex:1; flex-wrap:wrap; font-size:13.5px}
.pfad a{color:var(--ink-soft)} .pfad a:hover{color:var(--accent)}
.nutzer{color:var(--muted); font-size:13px; display:flex; align-items:center; gap:8px}
.nutzer a{color:var(--ink-soft); font-weight:600}
.nutzer a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- Layout */
.wrap{max-width:1280px; margin:0 auto; padding:28px 20px 72px}
.titelzeile{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; flex-wrap:wrap}

/* ---------------------------------------------------------------- Tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px}
.tab-btn{font:inherit; font-size:13.5px; font-weight:600; background:none; border:none; border-bottom:2px solid transparent;
  padding:10px 4px; margin-bottom:-1px; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:8px;
  transition:color .15s var(--ease),border-color .15s var(--ease)}
.tab-btn + .tab-btn{margin-left:18px}
.tab-btn:hover{color:var(--ink)}
.tab-btn[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.tab-zahl{font-size:11.5px; font-weight:700; padding:1px 7px; border-radius:20px; background:var(--bg-sunken); color:var(--muted)}
.tab-btn[aria-selected="true"] .tab-zahl{background:var(--accent-soft); color:var(--accent-strong)}
.karte{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); margin-bottom:20px}
.karten-kopf{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap}
.werkzeuge{display:flex; gap:8px; align-items:center; flex-wrap:wrap; position:relative}
.leer{padding:40px 16px; text-align:center; color:var(--muted)}
.leise{color:var(--muted)} .klein{font-size:12px} .stark{font-weight:600; color:var(--ink)}
.mono{font-family:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace; font-size:12.5px}

/* ---------------------------------------------------------------- Buttons & Formulare */
button,.knopf{font:inherit; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg-raised);
  color:var(--ink-soft); cursor:pointer; text-decoration:none; list-style:none;
  transition:border-color .15s var(--ease),color .15s var(--ease),background-color .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease)}
button:hover,.knopf:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
button:active,.knopf:active{transform:translateY(1px)}
.knopf.klein{padding:5px 10px; font-size:12px}
.primaer{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(226,35,27,.25)}
.primaer:hover{background:var(--accent-strong); border-color:var(--accent-strong); color:#fff; box-shadow:0 4px 12px rgba(226,35,27,.3)}
button:disabled{opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important}
.link-gefahr{border:none; background:none; color:var(--critical); padding:4px 0; text-decoration:underline; font-weight:600}
.link-gefahr:hover{color:var(--accent-strong)}
.gefahr{max-width:640px; margin:-8px 0 20px}
.knoepfe{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px}
.formular .knoepfe{margin:4px 0 0}

input,textarea,select{font:inherit; width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-sunken); color:var(--ink); transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
input:disabled{color:var(--muted); cursor:default}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
button:focus-visible,.knopf:focus-visible,a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
input[type=checkbox],input[type=radio]{width:auto}
input[type=search]{width:220px}
.werkzeuge select{width:auto}
.formular{max-width:640px; padding:22px 24px; display:grid; gap:14px}
.formular label{display:grid; gap:5px; font-weight:600; font-size:13px; color:var(--ink-soft)}
label.zeile{display:flex !important; gap:8px; align-items:center; font-weight:400}
.logo-vorschau{max-height:48px; max-width:200px; object-fit:contain; border-radius:6px}

.meldung{padding:11px 15px; border-radius:var(--radius-sm); margin-bottom:16px; background:var(--success-soft); color:var(--success); font-weight:600}
.meldung.fehler{background:var(--critical-soft); color:var(--critical)}
.meldung code{font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:12px; background:rgba(127,127,127,.18); padding:1px 5px; border-radius:4px}
.code-anzeige{font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:21px; font-weight:700; letter-spacing:.2em}

/* ---------------------------------------------------------------- Kennzahlen */
.kennzahlen{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px}
.kz{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px 15px; display:grid; gap:4px;
  position:relative; overflow:hidden}
.kz::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--border-strong)}
.kz span{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.kz b{font-size:27px; letter-spacing:-.02em}
.kz.success::before{background:var(--success)} .kz.warning::before{background:var(--warning)} .kz.critical::before{background:var(--critical)}

/* ---------------------------------------------------------------- Tabellen */
.tabelle-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;
  padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap}
td{padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background-color .1s var(--ease)}
tbody tr:hover{background:var(--bg-sunken)}
.zahl{text-align:right}
tr.inaktiv td{opacity:.5}
td.link a{text-decoration:none; font-size:12.5px; font-weight:600; white-space:nowrap}
td.werkzeuge{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap}
.fehlt{color:var(--critical); font-weight:600; font-size:12px}

/* ---------------------------------------------------------------- Chips */
.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap}
.chip .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.success{background:var(--success-soft); color:var(--success)}
.chip.warning{background:var(--warning-soft); color:var(--warning)}
.chip.critical{background:var(--critical-soft); color:var(--critical)}
.chip.neutral{background:var(--bg-sunken); color:var(--muted)}
.pruef-hinweis{font-size:11.5px; color:var(--warning); margin-top:3px; cursor:help}
.sicherheitshinweise{margin-top:5px}
.sicherheitshinweise summary{list-style:none; font-size:11.5px; font-weight:700; color:var(--critical); cursor:pointer; white-space:nowrap}
.sicherheitshinweise summary::-webkit-details-marker{display:none}
.sicherheitshinweise summary::before{content:"▸ "}
.sicherheitshinweise[open] summary::before{content:"▾ "}
.hinweise-panel{margin-top:6px; padding:10px 12px; background:var(--critical-soft); border-radius:var(--radius-sm); max-width:360px; white-space:normal}
.hinweise-panel ul{margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-soft)}
.hinweise-panel li{margin-bottom:4px}
.hinweise-panel li:last-child{margin-bottom:0}
.claude-status{font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px}
.claude-status.ok{background:var(--success-soft); color:var(--success)}
.claude-status.aus{background:var(--critical-soft); color:var(--critical)}

/* ---------------------------------------------------------------- Dropdown-Panels (Import, Passwort …) */
details.dropdown{position:relative}
details.dropdown summary{list-style:none}
details.dropdown summary::-webkit-details-marker{display:none}
details.dropdown summary::after{content:"▾"; margin-left:6px; font-size:10px; opacity:.7}
details.dropdown[open] summary{border-color:var(--accent); color:var(--accent)}
details.dropdown form{position:absolute; right:0; top:calc(100% + 8px); z-index:5; width:min(360px,90vw);
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow-lg); display:grid; gap:10px; font-size:13px; animation:einblenden .12s var(--ease)}
details.dropdown p{margin:0; color:var(--ink-soft)}
@keyframes einblenden{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}

form.inline{display:inline}

/* ---------------------------------------------------------------- Live-Log */
#lauf{display:flex; gap:12px; align-items:center}
.log{margin:0; padding:16px 18px; max-height:65vh; overflow:auto; font:12.5px/1.6 ui-monospace,"SF Mono",Consolas,monospace;
  background:#1A1C22; color:#E4E4E0; border-radius:0 0 var(--radius) var(--radius); white-space:pre-wrap; word-break:break-word}

/* ---------------------------------------------------------------- Anmeldung */
.login-seite{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(700px 500px at 110% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
    var(--bg)}
.login-karte{width:100%; max-width:380px; padding:32px 30px; display:grid; gap:16px;
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg)}
.login-marke{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.01em; justify-content:center}
.login-marke .marke-icon{width:32px; height:32px; border-radius:9px; font-size:15px}
.login-unter{margin:-10px 0 4px; text-align:center; color:var(--muted); font-size:12.5px}
.login-karte label{display:grid; gap:5px; font-weight:600; font-size:13px; color:var(--ink-soft)}
.login-knopf{width:100%; justify-content:center; padding:10px 14px; font-size:13.5px}

@media (max-width:760px){
  .kennzahlen{grid-template-columns:repeat(2,1fr)}
  .top{padding:10px 16px}
  input[type=search]{width:100%}
  details.dropdown form{right:auto; left:0}
}