/* ============================================================
   EK HTML Browser – Gestaltung nach EK Planner (Entwurf 5b)
   Tokens unverändert aus planner/EK-Planner.html übernommen.
   Terrakotta ist für AKTION reserviert (Primärknopf, aktiver Menüpunkt)
   und für WARNUNG – nicht für Dekoration.
   ============================================================ */
:root{
  color-scheme: light;
  --shell-bg:#dedcd7; --shell-fg:#1a1815; --shell-muted:#6e6a63; --shell-dim:#7d7973;
  --shell-hover:#cfccc5; --shell-field:#eceae5; --shell-border:#c4c0b8; --shell-badge:#7a5f44;

  --card-bg:#f4f1ec; --card-inset:#e9e5dd; --card-fg:#191713; --card-muted:#8c877e; --card-dim:#6f6a62;
  --card-line:#e4e0d8; --card-hover:#efebe3; --card-chip:#e4ded3; --card-track:#ddd8ce;
  --card-pastel-bg:#e3ddec; --card-pastel-fg:#1c1830; --card-pastel-muted:#4c476b;

  --action:#c2723f; --action-hover:#ab6337; --action-fg:#17100a;
  --warn-bar:#b96a3c; --warn-bg:#eee2d6; --warn-fg:#8a5227;
  --ok-bg:#dfeee4; --ok-fg:#276b41; --ok-bar:#2e9e5b;
  --err-bg:#f6dfdc; --err-fg:#a52f2f;
  --neutral-bg:#e4ded3; --neutral-fg:#5f5a52;
  --stage-grad:linear-gradient(105deg,#2a211b 0%,#3b2d23 42%,#6d5442 72%,#c99a6d 100%);
  --stage-fg:#f4f1ec; --stage-fg-2:rgba(244,241,236,.72); --stage-fg-3:rgba(244,241,236,.62);

  --r-pill:999px; --r-card:18px; --r-inset:14px; --r-tile:10px; --r-nav:8px;

  --font-sans:'Inter','Inter Variable',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --font-mono:ui-monospace,'SF Mono',Consolas,Menlo,monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --shell-bg:#232322; --shell-fg:#f4f1ec; --shell-muted:#a8a39a; --shell-dim:#77736c;
  --shell-hover:#333332; --shell-field:#2c2c2b; --shell-border:#434341; --shell-badge:#c9b8a4;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{min-height:100%;}
body{font-family:var(--font-sans); background:var(--shell-bg); color:var(--shell-fg); font-size:14px;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;}
a{color:inherit;}
button,input,select,textarea{font:inherit; color:inherit;}
.hidden{display:none !important;}
.mono{font-family:var(--font-mono);}
.muted{color:var(--card-muted);}
.nowrap{white-space:nowrap;}

/* ---------- Wortzeichen ---------- */
.brand{display:inline-flex; flex-direction:column; line-height:.86; font-weight:800; font-size:19px;
  letter-spacing:-.2px; text-decoration:none; color:var(--shell-fg);}
.brand span:last-child{color:var(--shell-muted);}

/* ---------- Knöpfe, Chips, Felder ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--card-line);
  background:var(--card-inset); color:var(--card-fg); border-radius:var(--r-pill); padding:8px 14px; font-size:12.5px;
  font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; line-height:1.2;}
.btn:hover{background:var(--card-chip); border-color:var(--card-track);}
.btn.pri{background:var(--action); border-color:var(--action); color:var(--action-fg);}
.btn.pri:hover{background:var(--action-hover); border-color:var(--action-hover);}
.btn.sm{padding:3px 9px; font-size:11px; min-height:23px;}
.btn.gefahr{background:var(--err-fg); border-color:var(--err-fg); color:#fff;}
.btn.gefahr:hover{background:#8e2626; border-color:#8e2626;}
.btn.ghost{background:transparent; border-color:transparent;}
.btn.ghost:hover{background:var(--card-hover);}
.btn.danger{color:var(--err-fg);}
.btn.danger:hover{background:var(--err-bg); border-color:#e6b9b3;}
.btn:disabled{opacity:.5; cursor:default;}
.btn.icon{padding:6px; width:30px; height:30px;}
.btn svg{width:15px; height:15px; flex:0 0 auto;}
/* Knöpfe direkt auf der Hülle (Kopfleiste, Viewer-Leiste) – in Karten und Popovern gilt die Kartenfarbe */
:is(.topbar, .kd-top, .vbar) .btn{color:var(--shell-fg); border-color:var(--shell-border); background:transparent;}
:is(.topbar, .kd-top, .vbar) .btn:hover{background:var(--shell-hover);}
:is(.topbar, .kd-top, .vbar) .btn.pri{color:var(--action-fg); background:var(--action); border-color:var(--action);}

.chip{display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-pill); padding:4px 10px;
  font-size:11px; font-weight:600; line-height:13px; background:var(--neutral-bg); color:var(--neutral-fg); white-space:nowrap;}
.chip.ok{background:var(--ok-bg); color:var(--ok-fg);}
.chip.warn{background:var(--warn-bg); color:var(--warn-fg);}
.chip.err{background:var(--err-bg); color:var(--err-fg);}
.chip.neu{background:var(--action); color:var(--action-fg);}
.chip.pastel{background:var(--card-pastel-bg); color:var(--card-pastel-fg);}
.badge{font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--shell-badge); border:1px solid var(--shell-border); border-radius:var(--r-pill); padding:5px 9px; white-space:nowrap;}

.field{display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--card-muted); font-weight:600;}
.field.pflicht > span::after{content:' *'; color:var(--action);}
.field input.fehlt{border-color:var(--err-fg); background:var(--err-bg);}
.inp, .field input, .field select, .field textarea{width:100%; background:var(--card-inset); border:1px solid var(--card-line);
  border-radius:var(--r-nav); padding:8px 9px; font-size:12.5px; color:var(--card-fg); font-weight:400; outline:none; min-height:33px;}
.inp:focus, .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--action); background:#fbfaf7;}
.field textarea{min-height:70px; resize:vertical;}
.check{display:inline-flex; align-items:center; gap:8px; font-size:13px; cursor:pointer;}
.check input{width:16px; height:16px; accent-color:var(--action);}

/* ---------- Karten ---------- */
.card{background:var(--card-bg); color:var(--card-fg); border-radius:var(--r-card); padding:18px;}
.card-h{display:flex; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.card-h h2{font-size:15px; font-weight:600;}
.card-h .sub{font-size:11.5px; color:var(--card-muted);}
.card-h .right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.inset{background:var(--card-inset); border-radius:var(--r-inset); padding:14px 16px;}
.linkact{font-weight:700; font-size:13px; text-decoration:none; color:var(--card-fg);}
.linkact:hover{color:var(--action-hover);}

/* ---------- Bühne (Kopfbereich wie Planner-Dashboard) ---------- */
.stage{background:var(--stage-grad); color:var(--stage-fg); border-radius:var(--r-card); padding:28px 30px 24px;
  position:relative; overflow:hidden; display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.stage h1{font-size:44px; line-height:1.02; font-weight:800; letter-spacing:-1px;}
.stage h1 em{display:block; font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-.5px;}
.stage .lead{margin-top:12px; color:var(--stage-fg-2); font-size:14px;}
.stage .kpis{display:flex; gap:34px; margin-top:22px; flex-wrap:wrap;}
.stage .kpi b{display:block; font-size:28px; font-weight:800; letter-spacing:-.5px;}
.stage .kpi span{font-size:12.5px; color:var(--stage-fg-2);}
.stage .kpi.warn b{color:#e5b48d;}
.stage .clock{margin-left:auto; text-align:right;}
.stage .clock b{display:block; font-size:54px; font-weight:300; letter-spacing:-1px; line-height:1;}
.stage .clock span{font-size:12px; color:var(--stage-fg-3);}

/* ---------- Tabellen ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:13px;}
.tbl th{text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--card-muted);
  padding:6px 7px; border-bottom:1px solid var(--card-line); white-space:nowrap;}
.tbl td{padding:8px 7px; border-bottom:1px solid var(--card-line); vertical-align:middle;}
.tbl tr.klick{cursor:pointer;}
.tbl tr.frisch td{animation:frisch 2.4s ease-out;}
@keyframes frisch{0%,35%{background:var(--warn-bg);} 100%{background:transparent;}}
.tbl tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover td{background:var(--card-hover);}
.tbl .num{text-align:right; white-space:nowrap;}
.tbl .t1{font-weight:500; font-size:13.5px;}
.tbl .t2{font-size:12px; color:var(--card-muted); margin-top:2px;}
.tbl .acts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap;}
.tbl-wrap{overflow-x:auto; margin:0 -7px;}
.tbl-wrap .tbl{min-width:640px;}
.bar{height:6px; border-radius:6px; background:var(--card-track); overflow:hidden; min-width:60px;}
.bar i{display:block; height:100%; background:var(--ok-bar); border-radius:6px;}
.leer{padding:28px 10px; text-align:center; color:var(--card-muted); font-size:13px;}

/* ---------- Meldungen ---------- */
.flash{border-radius:var(--r-inset); padding:11px 16px; font-size:13px; font-weight:600; display:flex; gap:10px; align-items:center;}
.flash.ok{background:var(--ok-bg); color:var(--ok-fg);}
.flash.err{background:var(--err-bg); color:var(--err-fg);}
.flash.warn{background:var(--warn-bg); color:var(--warn-fg);}
.flash .x{margin-left:auto; cursor:pointer; opacity:.6; border:0; background:none; font-size:16px;}

/* ============================================================
   Login
   ============================================================ */
.login{min-height:100vh; display:grid; grid-template-columns:1.15fr minmax(360px, .85fr); gap:14px; padding:14px;}
.login .stage{align-items:stretch; flex-direction:column; justify-content:space-between; padding:34px 36px;}
.login .stage .brand{color:var(--stage-fg);}
.login .stage .brand span:last-child{color:var(--stage-fg-3);}
.login .stage h1{font-size:58px;}
.login .stage .foot{font-size:12px; color:var(--stage-fg-3); display:flex; gap:16px; flex-wrap:wrap;}
.login .stage .foot a{color:var(--stage-fg-2); text-decoration:none;}
.login .panel{display:flex; align-items:center; justify-content:center;}
.login .card{width:100%; max-width:420px; padding:30px 30px 26px;}
.login .card h2{font-size:22px; font-weight:800; letter-spacing:-.3px;}
.login .card p.sub{color:var(--card-muted); font-size:13px; margin:6px 0 22px;}
.login form{display:flex; flex-direction:column; gap:14px;}
.login .btn.pri{padding:11px 16px; font-size:14px; margin-top:4px;}
.login .pwwrap{position:relative;}
.login .pwwrap button{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none;
  cursor:pointer; color:var(--card-muted); padding:6px; border-radius:8px;}
.login .pwwrap button:hover{color:var(--card-fg);}
.login .hint{font-size:12px; color:var(--card-muted); margin-top:16px; line-height:1.5;}
@media (max-width:820px){
  .login{grid-template-columns:1fr;}
  .login .stage{min-height:auto; gap:26px;}
  .login .stage h1{font-size:40px;}
}

/* ============================================================
   Kundenansicht
   ============================================================ */
.kd{max-width:1480px; margin:0 auto; padding:14px 22px 30px; display:flex; flex-direction:column; gap:14px;}
.kd-top{display:flex; align-items:center; gap:14px; min-height:40px; font-size:12.5px; color:var(--shell-dim);}
.kd-top .crumb b{color:var(--shell-fg); font-weight:600;}
.kd-top .right{margin-left:auto; display:flex; align-items:center; gap:8px;}
.kd-top .user{display:flex; align-items:center; gap:8px; color:var(--shell-fg); font-weight:600;}
.av{width:28px; height:28px; border-radius:50%; background:var(--shell-field); display:grid; place-items:center;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--shell-fg); flex:0 0 auto;}
.card .av{background:var(--card-chip); color:var(--card-fg);}
.vorschau-band{background:var(--card-pastel-bg); color:var(--card-pastel-fg); border-radius:var(--r-inset);
  padding:10px 16px; font-size:13px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

.werkzeug{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.werkzeug .suche{position:relative; flex:0 1 300px; min-width:180px;}
.card-h .right.werkzeug{flex-wrap:nowrap;}
@media (max-width:760px){ .card-h .right.werkzeug{flex-wrap:wrap; margin-left:0; width:100%;} .werkzeug .suche{flex:1 1 100%;} }
.werkzeug .suche svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--card-muted);}
.werkzeug .suche input{padding-left:34px;}
.seg{display:inline-flex; background:var(--card-chip); border-radius:var(--r-pill); padding:3px;}
.seg button{border:0; background:none; padding:5px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; cursor:pointer; color:var(--card-dim);}
.seg button.on{background:var(--card-bg); color:var(--card-fg);}

.gruppe-h{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--card-muted);
  margin:18px 2px 10px; display:flex; gap:8px; align-items:center;}
.gruppe-h:first-child{margin-top:4px;}
.gruppe-h::after{content:''; flex:1; height:1px; background:var(--card-line);}
.kacheln{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px;}
.kachel{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--card-fg);
  border-radius:var(--r-inset); padding:8px 8px 12px; transition:background .12s;}
.kachel:hover{background:var(--card-hover);}
.kachel:focus-visible{outline:2px solid var(--action); outline-offset:2px;}
.kachel .bild{aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:var(--card-inset); position:relative;}
.kachel .bild img{width:100%; height:100%; object-fit:cover; display:block;}
.kachel .bild .ph{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:14px 16px;
  background:var(--stage-grad); color:var(--stage-fg);}
.kachel .bild .ph .typ{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--stage-fg-3);}
.kachel .bild .ph .nm{font-family:var(--font-serif); font-style:italic; font-size:22px; line-height:1.1;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow-wrap:anywhere;}
.kachel .bild .chip{position:absolute; top:10px; left:10px;}
.kachel .bild .auf{position:absolute; right:10px; bottom:10px; background:rgba(23,16,10,.62); color:#f4f1ec; border-radius:var(--r-pill);
  font-size:12px; font-weight:700; padding:5px 11px; opacity:0; transform:translateY(4px); transition:.15s;}
.kachel:hover .auf, .kachel:focus-visible .auf{opacity:1; transform:none;}
.kachel .ti{font-weight:700; font-size:14.5px; padding:0 4px; overflow-wrap:anywhere;}
.kachel .me{font-size:12px; color:var(--card-muted); padding:0 4px; margin-top:-6px;}
.liste .kacheln{grid-template-columns:1fr; gap:2px;}
.liste .kachel{flex-direction:row; align-items:center; padding:6px 8px;}
.liste .kachel .bild{width:96px; flex:0 0 auto; border-radius:8px;}
.liste .kachel .bild .ph{padding:6px 8px;} .liste .kachel .bild .ph .nm{font-size:12px;} .liste .kachel .bild .ph .typ{display:none;}
.liste .kachel .bild .chip, .liste .kachel .bild .auf{display:none;}
.liste .kachel .ti{flex:1;}
.liste .kachel .me{margin:0; white-space:nowrap;}

/* ---------- Viewer ---------- */
body.viewer{display:flex; flex-direction:column; height:100vh; overflow:hidden;}
.vbar{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--shell-bg); font-size:13px;}
.vbar .ti{font-weight:700; color:var(--shell-fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.vbar .sub{color:var(--shell-dim); font-size:12px; white-space:nowrap;}
.vbar .right{margin-left:auto; display:flex; gap:6px; align-items:center;}
.vframe{flex:1 1 auto; min-height:0; margin:0 10px 10px; border-radius:14px; overflow:hidden; background:#fff; position:relative;}
.vframe iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff;}
body.viewer.voll .vbar{display:none;} body.viewer.voll .vframe{margin:0; border-radius:0;}

/* ============================================================
   Backend (Hülle mit Seitenleiste wie Planner)
   ============================================================ */
.app{display:flex; min-height:100vh;}
.rail{flex:0 0 200px; padding:22px 14px 14px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh;}
.rail .brand{margin:0 0 26px 11px;}
.rail nav{display:flex; flex-direction:column; gap:2px;}
.rail nav a{display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:var(--r-nav); text-decoration:none;
  color:var(--shell-fg); font-size:13px;}
.rail nav a:hover{background:var(--shell-hover);}
.rail nav a.on{background:var(--action); color:var(--action-fg); font-weight:600;}
.rail nav a .n{margin-left:auto; font-size:11px; font-family:var(--font-mono); color:var(--shell-muted);}
.rail nav a.on .n{color:var(--action-fg);}
.rail .unten{margin-top:auto; display:flex; flex-direction:column; gap:6px;}
.rail .lnk{display:flex; align-items:center; gap:8px; padding:6px 11px; font-size:13px; color:var(--shell-dim); background:none; border:0;
  cursor:pointer; text-decoration:none; border-radius:var(--r-nav); text-align:left;}
.rail .lnk:hover{color:var(--shell-fg); background:var(--shell-hover);}
.rail .railuser{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:var(--r-inset); background:var(--shell-field);}
.rail .railuser b{display:block; font-size:12.5px;}
.rail .railuser small{display:block; font-size:11px; color:var(--shell-dim);}
.main{flex:1; min-width:0; padding:14px 22px 30px 8px; display:flex; flex-direction:column; gap:14px;}
.topbar{display:flex; align-items:center; gap:14px; min-height:34px; font-size:12.5px; color:var(--shell-dim); flex-wrap:wrap;}
.topbar .crumb b{color:var(--shell-fg); font-weight:600;}
.topbar .crumb a{text-decoration:none;} .topbar .crumb a:hover{color:var(--shell-fg);}
.topbar .right{margin-left:auto; display:flex; gap:8px; align-items:center;}
.grid{display:grid; gap:14px;}
.g2{grid-template-columns:repeat(2, minmax(0,1fr));}
.g3{grid-template-columns:repeat(3, minmax(0,1fr));}
.g4{grid-template-columns:repeat(4, minmax(0,1fr));}
.g-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
.kpi-card .k{font-size:12px; color:var(--card-muted); font-weight:600;}
.kpi-card b{display:block; font-size:30px; font-weight:800; letter-spacing:-.6px; margin-top:4px;}
.kpi-card .d{font-size:12px; color:var(--card-muted); margin-top:2px;}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--card-line); margin:-4px -20px 16px; padding:0 14px;}
.tabs a{padding:9px 12px; text-decoration:none; font-size:13.5px; font-weight:600; color:var(--card-dim); border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabs a.on{color:var(--card-fg); border-bottom-color:var(--action);}
.tabs a .n{font-family:var(--font-mono); font-size:11px; color:var(--card-muted); margin-left:4px;}
.formrow{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); align-items:end;}
.chart{width:100%; height:180px; display:block;}
.chart rect.b{fill:var(--card-track);} .chart rect.b.v{fill:var(--action);}
.chart rect.b:hover{fill:var(--action-hover);}
.chart text{font-size:10px; fill:var(--card-muted); font-family:var(--font-sans);}
.chart line{stroke:var(--card-line);}
.pw-einmal{font-family:var(--font-mono); font-size:15px; font-weight:700; letter-spacing:.04em; background:var(--card-bg);
  border-radius:var(--r-tile); padding:8px 12px; user-select:all;}
.drop{border:1.5px dashed var(--card-track); border-radius:var(--r-inset); padding:22px; text-align:center; color:var(--card-dim);
  transition:.12s; background:var(--card-inset);}
.drop.over{border-color:var(--action); background:var(--warn-bg);}
.drop b{color:var(--card-fg);}
.drop .opts{display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; align-items:center;}
.up-list{display:flex; flex-direction:column; gap:6px; margin-top:12px;}
.up-item{display:grid; grid-template-columns:minmax(0,1fr) 160px 90px; gap:10px; align-items:center; font-size:12.5px;}
.up-item .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.up-item .st{text-align:right; color:var(--card-muted);}
.up-item.ok .st{color:var(--ok-fg); font-weight:700;} .up-item.err .st{color:var(--err-fg); font-weight:700;}
.up-item.ok .bar i{background:var(--ok-bar);} .up-item .bar i{background:var(--action); transition:width .15s;}
.thumb-s{width:64px; aspect-ratio:16/10; border-radius:6px; background:var(--card-inset); overflow:hidden; flex:0 0 auto;}
.thumb-s img{width:100%; height:100%; object-fit:cover; display:block;}
.cell-f{display:flex; gap:12px; align-items:center;}
.modalwrap{position:fixed; inset:0; background:rgba(20,16,12,.38); backdrop-filter:blur(6px); display:flex; align-items:center;
  justify-content:center; z-index:100; padding:16px;}
.modal{width:100%; max-width:480px; background:var(--card-bg); color:var(--card-fg); border-radius:var(--r-card); padding:22px;
  display:flex; flex-direction:column; gap:14px; max-height:92vh; overflow:auto;}
.modal h3{font-size:17px;}
.modal .acts{display:flex; justify-content:flex-end; gap:8px; margin-top:4px;}
details.more summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--card-dim); list-style:none;}
details.more summary::-webkit-details-marker{display:none;}
.kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; font-size:13px;}
.kv dt{color:var(--card-muted);} .kv dd{font-weight:600; word-break:break-all;}

@media (max-width:1100px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr));} .g-21,.g3{grid-template-columns:minmax(0,1fr);} }
.grid > *{min-width:0;}
.seg{flex:0 0 auto;} .seg button, .seg .btn{white-space:nowrap;}
.seg.wrap{flex-wrap:wrap; flex:0 1 auto;}
.inset .field input, .inset .field select, .inset .field textarea, .inset .inp{background:var(--card-bg);}
.inset .field input:focus{background:#fbfaf7;}
@media (max-width:860px){
  .app{flex-direction:column;}
  .rail{position:static; height:auto; flex:none; flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px 16px; gap:8px;}
  .rail .brand{margin:0 10px 0 0;}
  .rail nav{flex-direction:row; flex-wrap:wrap;}
  .rail .unten{margin:0 0 0 auto; flex-direction:row;}
  .rail .railuser{display:none;}
  .main{padding:8px 16px 24px;}
  .g2{grid-template-columns:minmax(0,1fr);}
  .chart text{display:none;}
  .kd{padding:10px 16px 24px;}
  .stage h1{font-size:34px;} .stage .clock{display:none;}
}
.kv .chip{white-space:normal;}
@media (max-width:600px){
  .kd-top .crumb{display:none;}
  .kacheln{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px;}
  .kachel .bild .ph .nm{font-size:17px;}
  .kd-top .user .nowrap{display:none;}
}

/* ============================================================
   Planner-Bausteine: Popover, Rückfrage, Toast, „kopiert"
   ============================================================ */
.pop{position:fixed; z-index:520; width:330px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow:auto;
  background:var(--card-bg); color:var(--card-fg); border:1px solid var(--card-line); border-radius:var(--r-card);
  box-shadow:0 10px 30px rgba(11,11,11,.18); padding:14px; font-size:13px;}
.pop h3{font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:4px;}
.pop .meta{font-size:12px; color:var(--card-muted); line-height:1.5; margin-bottom:12px; word-break:break-word;}
.pop p{font-size:13px; color:var(--card-dim); line-height:1.55; margin:6px 0 14px; word-break:break-word;}
.pop form{display:flex; flex-direction:column; gap:10px;}
.pop .zeile{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.pop .acts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; margin-top:4px;}
.pop .acts .links{margin-right:auto; display:flex; gap:6px;}
.pop hr{border:0; border-top:1px solid var(--card-line); margin:12px -14px;}
.pop .menue{display:flex; flex-direction:column; margin:-6px -8px;}
.pop .menue button{display:flex; align-items:center; gap:10px; text-align:left; border:0; background:none; padding:7px 10px; border-radius:var(--r-nav);
  font-size:13px; cursor:pointer; color:var(--card-fg);}
.pop .menue button:hover, .pop .menue button:focus-visible{background:var(--card-hover); outline:none;}
.pop .menue button.warn{color:var(--err-fg);}
.pop .menue kbd{margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--card-muted);}
.pop .menue .sep{height:1px; background:var(--card-line); margin:4px 6px;}
.pop.frage{width:320px;}
.pop .zugang-daten{background:var(--ok-bg); color:var(--ok-fg); border-radius:var(--r-inset); padding:10px 12px; margin:0 0 10px;}
.pw-zeile{display:flex; gap:6px; align-items:center;}
.pw-zeile input{font-family:var(--font-mono); letter-spacing:.03em;}
.pw-zeile .btn{flex:0 0 auto;}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:6000; display:flex; align-items:center; gap:14px;
  background:rgba(26,26,25,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.12);
  color:#f5f1ee; font-size:12.5px; font-weight:600; padding:10px 18px; border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.28);
  max-width:calc(100vw - 32px);}
.toast.err{background:rgba(120,30,30,.94);}
.toast button{border:0; background:none; color:#e5b48d; font:inherit; font-weight:700; cursor:pointer; padding:0; white-space:nowrap;}
.toast button:hover{color:#fff;}
.toast kbd{font-family:var(--font-mono); font-size:10px; opacity:.7; margin-left:4px; font-weight:500;}
.kopiert{position:fixed; z-index:7000; pointer-events:none; font-size:11px; font-weight:600; letter-spacing:.2px; color:var(--action-fg);
  background:var(--action); border-radius:6px; padding:3px 9px; box-shadow:0 4px 14px rgba(0,0,0,.22); animation:kopf 1.1s ease forwards;}
@keyframes kopf{0%{opacity:0; transform:translateY(4px)} 15%{opacity:1; transform:none} 80%{opacity:1} 100%{opacity:0; transform:translateY(-4px)}}
/* Ergebnis direkt in der Tabelle: Zugangsdaten unter der neuen Zeile */
.tbl tr.ergebnis td{background:var(--ok-bg); color:var(--ok-fg); border-bottom:1px solid var(--card-line);}
.ergebnis-box{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px;}
.ergebnis-box .pw-einmal{background:var(--card-bg); font-size:13.5px; padding:5px 10px;}
.ergebnis-box .zu{margin-left:auto;}
/* Kopfzeile einer Detailseite: kompakt statt Bühne */
.kopf{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px;}
.kopf h1{font-size:20px; font-weight:700; letter-spacing:-.2px;}
.kopf .kz{display:flex; gap:18px; margin-left:auto; font-size:12px; color:var(--card-muted); align-items:baseline; flex-wrap:wrap;}
.kopf .kz b{font-size:17px; color:var(--card-fg); font-weight:700; margin-right:4px;}
.kopf .pfad{font-family:var(--font-mono); font-size:11px; color:var(--card-muted);}
/* Zeile zum Anlegen oben in der Tabelle (Planner: Projektliste) */
.anlegen{display:grid; gap:8px; align-items:end; background:var(--card-inset); border-radius:var(--r-inset); padding:10px 12px; margin-bottom:10px;}
.anlegen .field input{background:var(--card-bg);}
.anlegen .hinweis{grid-column:1/-1; font-size:11px; color:var(--card-dim);}
.anlegen.zg{grid-template-columns:repeat(2, minmax(0,1fr));}
.anlegen.zg .voll{grid-column:1/-1;}
.anlegen .btn.pri{height:33px;}
@media (max-width:860px){ .pop{width:calc(100vw - 24px);} }
/* Schalter statt Häkchen (Sichtbar) */
.schalter{position:relative; display:inline-block; width:34px; height:20px; cursor:pointer; vertical-align:middle;}
.schalter input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:1; width:100%; height:100%;}
.schalter span{position:absolute; inset:0; border-radius:20px; background:var(--card-track); transition:.15s; pointer-events:none;}
.schalter span::after{content:''; position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.2);}
.schalter input:checked + span{background:var(--ok-bar);}
.schalter input:checked + span::after{left:17px;}
.schalter input:focus-visible + span{outline:2px solid var(--action); outline-offset:2px;}
.tbl tr.aus td:first-child{opacity:.55;}
.tbl tr.gruppe-z td{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--card-muted); padding:14px 7px 5px; background:none !important; border-bottom:1px solid var(--card-line);}
.drop-z{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--card-dim); border:1.5px dashed var(--card-track);
  border-radius:var(--r-inset); padding:9px 12px; margin-bottom:10px;}
.drop-z svg{width:14px; height:14px; vertical-align:-2px;}
.drop-z .inp{width:auto; min-height:26px; padding:3px 8px; font-size:12px;}
[data-drop].over .drop-z{border-color:var(--action); background:var(--warn-bg);}
[data-drop].over{outline:2px dashed var(--action); outline-offset:-6px;}
/* Gerade gelöscht: Platzhalter an der Stelle der Zeile, mit Rückweg */
.tbl tr.weg td{background:var(--card-inset); color:var(--card-dim); font-size:12.5px; padding:6px 7px;}
.tbl tr.weg td > span{margin-right:10px;}
.tbl tr.weg td{animation:wegzeile 7s forwards;}
@keyframes wegzeile{0%,85%{opacity:1} 100%{opacity:.35}}
/* Karten und Popover bleiben auch im Dunkelmodus hell – ihre Bedienelemente ebenso */
.card, .pop, .modal{color-scheme:light;}

/* Lesbarkeit: Nebeninfos auf der Hülle und in Kundenkacheln eine Stufe kräftiger als im Planner-Standard */
.rail .lnk, .rail .railuser small, .topbar, .kd-top, .rail nav a .n{color:var(--shell-muted);}
.topbar .crumb b, .kd-top .crumb b{color:var(--shell-fg);}
:root[data-theme="dark"] .rail .lnk, :root[data-theme="dark"] .rail .railuser small, :root[data-theme="dark"] .topbar, :root[data-theme="dark"] .kd-top, :root[data-theme="dark"] .rail nav a .n{color:var(--shell-muted);}
.kachel .me, .gruppe-h{color:var(--card-dim);}
.seg button{color:var(--neutral-fg);}
.badge{color:var(--shell-badge);}
.rail nav a.on .n{color:var(--action-fg) !important;}
.anlegen .field, .inset .field, .drop-z .muted{color:var(--card-dim);}
/* Aktionen und Filter links unter der Überschrift – kurzer Weg von der Navigation (links) */
.werkbank{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:-2px 0 12px;}
.werkbank .filter{width:240px; max-width:100%;}
/* Mini-Vorschau: die Seite selbst, in 4-facher Breite gerendert und auf ¼ verkleinert */
.kachel .bild iframe.mini, .thumb-s iframe.mini{position:absolute; left:0; top:0; border:0; pointer-events:none; background:#fff;
  width:400%; height:400%; transform:scale(.25); transform-origin:0 0;}
.thumb-s{position:relative;}
.thumb-s iframe.mini.klein, .liste .kachel .bild iframe.mini{width:1000%; height:1000%; transform:scale(.1);}
.kachel .bild{isolation:isolate;}
.kachel .bild::after{content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(25,23,19,.08); pointer-events:none;}
/* ============================================================
   Kopfbereich – Varianten (Klickdummy: Umschalter „Kopf" oben)
   ============================================================ */
.kopf-wahl{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--shell-muted); margin-left:6px;}
.kopf-wahl .inp{width:auto; min-height:26px; padding:3px 8px; font-size:12px; background:var(--shell-field); color:var(--shell-fg); border-color:var(--shell-border);}
/* Hell & ruhig: ohne Fläche, Inhalt steht im Vordergrund */
.stage.kopf-hell{background:var(--card-bg); color:var(--card-fg);}
.stage.kopf-hell h1 em, .stage.kopf-hell .kpi span, .stage.kopf-hell .clock span, .stage.kopf-hell .lead{color:var(--card-dim);}
.stage.kopf-hell .kpi.warn b{color:var(--action);}
.stage.kopf-hell .clock b{color:var(--card-fg);}
.login .stage.kopf-hell .brand, .login .stage.kopf-hell .foot a{color:var(--card-fg);}
.login .stage.kopf-hell .brand span:last-child, .login .stage.kopf-hell .foot{color:var(--card-muted);}
.login .stage.kopf-hell .badge{color:var(--card-dim) !important; border-color:var(--card-track) !important;}
/* EK Schwarz/Orange: Wortzeichen-Farben aus der CI (Schwarz + FF3B0B) */
.stage.kopf-ek{background:radial-gradient(900px 520px at 100% 0%, rgba(255,59,11,.34), transparent 60%), radial-gradient(600px 400px at 0% 120%, rgba(255,59,11,.14), transparent 60%), #131313;}
.stage.kopf-ek::before{content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:#ff3b0b;}
.stage.kopf-ek h1 em{color:#ff8566;}
.stage.kopf-ek .kpi.warn b{color:#ff8566;}
/* Kundenfarbe: je Kunde im Backend hinterlegt */
.stage.kopf-kunde{background:linear-gradient(105deg, color-mix(in srgb, var(--kf) 35%, #111) 0%, color-mix(in srgb, var(--kf) 70%, #111) 55%, var(--kf) 100%);}
.stage.kopf-kunde .kpi.warn b{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.5);}
/* Neuester Inhalt: der Kopf führt direkt zum zuletzt Geänderten */
.stage.kopf-neu{background:var(--card-bg); color:var(--card-fg); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:28px; align-items:center; padding:24px 26px;}
.stage.kopf-neu h1{font-size:38px;}
.stage.kopf-neu h1 em{color:var(--card-dim);}
.stage.kopf-neu .neu-zeile{margin:16px 0 14px; font-size:15px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.stage.kopf-neu .neu-zeile .muted{color:var(--card-dim);}
.stage.kopf-neu .kpis{margin-top:20px;}
.stage.kopf-neu .kpi span{color:var(--card-dim);} .stage.kopf-neu .kpi.warn b{color:var(--action);}
.stage.kopf-neu .neu-bild{position:relative; display:block; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(25,23,19,.08);}
.stage.kopf-neu .neu-bild img{width:100%; height:100%; object-fit:cover;}
.stage.kopf-neu .neu-bild iframe.mini{position:absolute; left:0; top:0; border:0; pointer-events:none; width:200%; height:200%; transform:scale(.5); transform-origin:0 0; background:#fff;}
.stage.kopf-neu .neu-bild:hover{box-shadow:0 0 0 2px var(--action);}
@media (max-width:860px){ .stage.kopf-neu{grid-template-columns:1fr;} .kopf-wahl{display:none;} }
.kachel .bild .chip{top:auto; bottom:10px; left:10px; z-index:1;}