/* ==========================================================================
   LDE Control-Plane Mockup — gemeinsame Optik
   sharedforces.cloud/lde · reines statisches HTML/CSS (file://-tauglich)
   Designsprache = ICM/Luke-CI der Schwesterprojekte (LCS, ICM8):
   dunkles 3-Flächen-System, Cyan als Interaktions-Marker, Luke-Orange als
   Persona-/Brand-Akzent, App-Blau für Aktionen, ruhige Status-Farben.
   System-Fonts, keine externen Ressourcen.
   ========================================================================== */
:root{
  color-scheme:dark;

  /* ── Flächen (tonale Hierarchie: Sidebar tiefer als Inhalt, Karten darüber) */
  --bg:#0b0b0d;          /* App-/Inhalts-Grund */
  --bg-deep:#06070d;     /* Sidebar — sehr tief */
  --surface:#141416;     /* Topnav/Leisten */
  --card:#1b1b1e;        /* Karten/Kacheln (= surface-2) */
  --surface-3:#232327;   /* erhöht / Hover-Fläche */
  --modal:#141419;

  /* ── Text */
  --ink:#e8eaf0;
  --ink2:#9aa0ad;        /* muted */
  --ink3:#6b7280;        /* dim */

  /* ── Linien */
  --sep:#232331;                       /* dezente Border */
  --line-soft:rgba(255,255,255,.06);
  --row-hover:rgba(255,255,255,.05);

  /* 🟠 LUKE · Persona / Brand */
  --luke:#f97316; --luke-strong:#fb923c; --luke-soft:#fdba74;

  /* 🔵 App-Blau · Aktion */
  --blue:#3b82f6; --bluedk:#2563eb; --blue-bright:#60a5fa;
  --bluebg:rgba(59,130,246,.14);

  /* 🟦 Cyan · Marker (Aktiv/Fokus) */
  --accent:#22d3ee; --accent-strong:#67e8f9;
  --accentbg:rgba(34,211,238,.12);

  /* Status-Farben (ICM8) */
  --green:#22c55e; --greenbg:rgba(34,197,94,.14);
  --amber:#f59e0b; --amberbg:rgba(245,158,11,.15);
  --red:#f43f5e;   --redbg:rgba(244,63,94,.15);
  --violet:#a78bfa; --violetbg:rgba(167,139,250,.16);

  /* Radien */
  --radius:14px; --radius-sm:10px; --radius-card:12px;

  /* Schatten (dunkel: tiefer Wurf + feine helle Oberkante) */
  --shadow:0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  --shadow-lg:0 24px 60px -12px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06);

  /* Nav-Aktiv-Markierung (Cyan-Reiter, LCS/LukeBau-Style) */
  --nav-active-bg:linear-gradient(90deg, rgba(34,211,238,.14), rgba(34,211,238,.04));
  --nav-active-border:rgba(34,211,238,.22);
  --nav-active-edge:#22d3ee;

  --maxw:1180px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,"SF Pro Text","Segoe UI Variable","Segoe UI",system-ui,Roboto,sans-serif;
  background:
    radial-gradient(60% 42% at 100% 0%, rgba(59,130,246,.06), transparent 60%),
    radial-gradient(46% 34% at 0% 100%, rgba(249,115,22,.045), transparent 62%),
    var(--bg);
  color:var(--ink); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue-bright);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--ink);}
button{font-family:inherit;}

/* Dünne, dunkle Scrollbars (wie die Schwesterprojekte) */
*{scrollbar-width:thin;scrollbar-color:rgba(120,120,130,.35) transparent;}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:rgba(120,120,130,.30);border-radius:8px;border:2px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:rgba(150,150,160,.45);background-clip:padding-box;}

/* ---- Mockup-Banner (dezent, dunkle CI, schmale amber-Linie) -------------- */
.mockbar{
  background:var(--surface); color:var(--ink2);
  font-size:11.5px; text-align:center; padding:5px 14px; letter-spacing:.2px;
  border-bottom:1px solid rgba(245,158,11,.35);
  box-shadow:inset 0 2px 0 rgba(245,158,11,.55);
}
.mockbar b{color:var(--amber);font-weight:700;}
.mockbar .dot{opacity:.45;margin:0 8px;}

/* ---- Globale Mockup-Navigation ------------------------------------------- */
.topnav{
  display:flex; align-items:center; gap:14px; padding:0 20px; height:56px;
  background:rgba(20,20,22,.82); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--sep); position:sticky; top:0; z-index:30;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--ink);}
.brand:hover{text-decoration:none;}
.logo{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(160deg,var(--luke-strong),var(--luke));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex:none;
  box-shadow:0 2px 10px rgba(249,115,22,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand small{display:block;font-size:11px;color:var(--ink2);font-weight:500;margin-top:-2px;}
.topnav .sp{flex:1;}
.topnav .navlinks{display:flex;gap:4px;}
.topnav .navlinks a{
  color:var(--ink2);font-size:13px;font-weight:500;padding:7px 13px;border-radius:9px;
  border:1px solid transparent;
}
.topnav .navlinks a:hover{background:var(--row-hover);text-decoration:none;color:var(--ink);}
.topnav .navlinks a.on{
  background:var(--nav-active-bg);color:var(--accent-strong);
  border-color:var(--nav-active-border);font-weight:600;
}

/* ---- Layout: Dashboard mit Sidebar --------------------------------------- */
.shell{display:flex;min-height:calc(100vh - 56px - 27px);}
.side{
  width:230px;flex:none;
  background:linear-gradient(90deg, var(--bg-deep) 0%, #08090f 60%, #05060b 100%);
  border-right:1px solid var(--sep);
  padding:16px 12px;display:flex;flex-direction:column;gap:2px;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.03);
}
.side .grp{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;
  letter-spacing:.6px;margin:14px 10px 6px;}
.side .item{
  position:relative;
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  cursor:pointer;color:#cbd5e1;font-size:13.5px;font-weight:500;
  border:1px solid transparent;
}
.side .item:hover{background:var(--row-hover);color:var(--ink);}
.side .item.on{
  background:var(--nav-active-bg);color:var(--accent-strong);font-weight:600;
  border-color:var(--nav-active-border);
}
.side .item.on::before{
  content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:var(--nav-active-edge);box-shadow:0 0 10px rgba(34,211,238,.6);
}
.side .item .ic{font-size:16px;width:20px;text-align:center;}
.side .item .badge{margin-left:auto;font-size:11px;background:var(--redbg);color:var(--red);
  border-radius:20px;padding:1px 7px;font-weight:700;}
.side .foot{margin-top:auto;font-size:11.5px;color:var(--ink3);padding:12px 10px 0;line-height:1.5;
  border-top:1px solid var(--sep);margin-top:auto;}
.side .foot b{color:var(--green);}

.content{flex:1;min-width:0;padding:24px 30px 60px;max-width:1000px;}
.pagehead{margin-bottom:20px;}
.pagehead h1{font-size:22px;letter-spacing:-.3px;}
.pagehead p{margin:5px 0 0;color:var(--ink2);font-size:13.5px;max-width:640px;}

/* ---- Cards / Kacheln ----------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--sep);border-radius:var(--radius);
  box-shadow:var(--shadow);}
.card.pad{padding:18px 20px;}
.grid{display:grid;gap:16px;}
.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.kpi{
  background:linear-gradient(180deg, rgba(27,27,30,.7), rgba(18,18,20,.7));
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
}
.kpi .lbl{font-size:12px;color:var(--ink2);font-weight:500;display:flex;align-items:center;gap:7px;}
.kpi .val{font-size:26px;font-weight:700;letter-spacing:-.5px;margin-top:6px;line-height:1;color:var(--ink);}
.kpi .val small{font-size:15px;font-weight:600;color:var(--ink2);}
.kpi .val b{color:var(--ink);}
.kpi .sub{font-size:12px;margin-top:7px;color:var(--ink2);}
.kpi .sub.up{color:var(--green);}
.kpi .sub.down{color:var(--red);}
.kpi .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;
  border:1px solid var(--line-soft);}

.sectitle{font-size:13px;font-weight:700;color:var(--ink2);text-transform:uppercase;
  letter-spacing:.5px;margin:26px 0 12px;}

/* ---- Tabelle (dicht, feine Zeilen-Bordern, Row-Hover) -------------------- */
.tablewrap{background:var(--card);border:1px solid var(--sep);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead th{text-align:left;font-size:11.5px;font-weight:700;color:var(--ink2);text-transform:uppercase;
  letter-spacing:.4px;padding:11px 16px;border-bottom:1px solid var(--sep);
  background:rgba(255,255,255,.02);}
tbody td{padding:12px 16px;border-bottom:1px solid var(--sep);vertical-align:middle;color:var(--ink);}
tbody tr:last-child td{border-bottom:none;}
tbody tr.click{cursor:pointer;}
tbody tr.click:hover{background:var(--row-hover);}
td .firm{font-weight:600;color:var(--ink);}
td .muted,.muted{color:var(--ink2);}
td .muted{font-size:12.5px;}
.mono{font-family:"SF Mono",ui-monospace,"Cascadia Code",Consolas,monospace;font-size:12.5px;}

/* ---- Status-Pills -------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  border-radius:20px;padding:3px 10px;white-space:nowrap;border:1px solid transparent;}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill.ok{background:var(--greenbg);color:#4ade80;border-color:rgba(34,197,94,.28);}
.pill.warn{background:var(--amberbg);color:#fbbf24;border-color:rgba(245,158,11,.30);}
.pill.bad{background:var(--redbg);color:#fb7185;border-color:rgba(244,63,94,.30);}
.pill.info{background:var(--bluebg);color:var(--blue-bright);border-color:rgba(59,130,246,.28);}
.pill.plain::before{display:none;}
.pill.violet{background:var(--violetbg);color:#c4b5fd;border-color:rgba(167,139,250,.30);}

/* ---- Verbrauchs-Balken (blau normal · amber knapp · rot erschöpft) ------- */
.bar{height:7px;border-radius:20px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px;min-width:90px;}
.bar > i{display:block;height:100%;border-radius:20px;background:var(--blue);}
.bar.warn > i{background:var(--amber);}
.bar.bad > i{background:var(--red);}
.usg{font-size:12.5px;white-space:nowrap;color:var(--ink);}
.usg b{font-weight:600;}
.usg.muted{color:var(--ink2);}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--sep);
  background:var(--surface-3);color:var(--ink);border-radius:10px;padding:8px 14px;font-size:13px;
  font-weight:600;cursor:pointer;transition:.12s;}
.btn:hover{background:#2b2b30;border-color:#33333c;}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 2px 12px rgba(37,99,235,.35);}
.btn.primary:hover{background:var(--blue-bright);border-color:var(--blue-bright);}
.btn.danger{color:#fb7185;border-color:rgba(244,63,94,.4);background:transparent;}
.btn.danger:hover{background:var(--redbg);border-color:rgba(244,63,94,.6);}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent);}
.btn.ghost:hover{background:var(--accentbg);}
.btn.sm{padding:6px 11px;font-size:12.5px;}
.btn.lg{padding:12px 22px;font-size:15px;}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;}

/* ---- Formulare (dunkle Felder, heller Text) ------------------------------ */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px;}
.field .hint{font-size:11.5px;color:var(--ink3);margin-top:5px;}
input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%;border:1px solid var(--sep);border-radius:10px;padding:10px 12px;font-size:14px;
  font-family:inherit;color:var(--ink);background:#0e0e11;}
input::placeholder,textarea::placeholder{color:var(--ink3);}
select{color:var(--ink);}
select option{background:var(--card);color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accentbg);}
.radios{display:grid;gap:10px;}
.radio{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--sep);border-radius:12px;
  padding:12px 14px;cursor:pointer;background:#0e0e11;transition:.12s;}
.radio:hover{border-color:rgba(34,211,238,.4);}
.radio.on{border-color:var(--accent);background:var(--accentbg);}
.radio input{margin-top:3px;accent-color:var(--accent);}
.radio .rt{font-weight:600;color:var(--ink);}
.radio .rd{font-size:12.5px;color:var(--ink2);margin-top:2px;}
.radio .rp{margin-left:auto;font-weight:700;font-size:15px;white-space:nowrap;color:var(--ink);}

/* ---- Modal / Dialog ------------------------------------------------------ */
.overlay{position:fixed;inset:0;background:rgba(4,5,10,.62);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.overlay.show{display:flex;}
.modal{background:var(--modal);border:1px solid var(--sep);border-radius:16px;max-width:460px;width:100%;
  box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .16s ease;}
@keyframes pop{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal .mh{padding:20px 22px 0;display:flex;gap:14px;align-items:flex-start;}
.modal .mh .mi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:19px;flex:none;border:1px solid var(--line-soft);}
.modal .mh h3{font-size:16px;}
.modal .mb{padding:12px 22px 4px;color:var(--ink2);font-size:13.5px;line-height:1.55;}
.modal .mb b{color:var(--ink);}
.modal .mb .code{background:#08080b;border:1px solid var(--sep);border-radius:8px;padding:9px 12px;
  margin:10px 0;font-family:"SF Mono",ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--accent-strong);}
.modal .mf{padding:16px 22px 20px;display:flex;justify-content:flex-end;gap:10px;}

/* ---- Detail-Ansicht ------------------------------------------------------ */
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:13px;
  font-weight:600;cursor:pointer;margin-bottom:14px;}
.backlink:hover{color:var(--accent-strong);}
.deth{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.avatar{width:46px;height:46px;border-radius:12px;
  background:var(--accentbg);color:var(--accent-strong);border:1px solid rgba(34,211,238,.25);
  display:grid;place-items:center;font-weight:700;font-size:18px;flex:none;}
.detgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start;}
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px;}
.dl dt{color:var(--ink2);white-space:nowrap;}
.dl dd{margin:0;text-align:right;font-weight:500;color:var(--ink);}

/* ---- Remote-Config Tier-Editor ------------------------------------------- */
.tier{border:1px solid var(--sep);border-radius:12px;padding:16px 18px;margin-bottom:14px;background:var(--card);}
.tier.off{opacity:.5;}
.tier .th{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.tier .th .tname{font-weight:700;font-size:15px;color:var(--ink);}
.tier .th .toggle{margin-left:auto;}
.tier .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.switch{position:relative;display:inline-block;width:42px;height:24px;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:#3a3a42;border-radius:24px;transition:.18s;cursor:pointer;}
.slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;
  border-radius:50%;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.switch input:checked + .slider{background:var(--green);}
.switch input:checked + .slider::before{transform:translateX(18px);}

/* ---- Diverses ------------------------------------------------------------ */
.note{background:var(--bluebg);border:1px solid rgba(59,130,246,.28);border-radius:12px;padding:12px 14px;
  font-size:12.5px;color:#bcd3f7;display:flex;gap:10px;align-items:flex-start;}
.note b{color:var(--ink);}
.note.amber{background:var(--amberbg);border-color:rgba(245,158,11,.30);color:#f3d19a;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#26262b;color:#fff;border:1px solid var(--sep);padding:12px 20px;border-radius:12px;
  font-size:13.5px;font-weight:500;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:.25s;z-index:200;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.tag{display:inline-block;background:var(--surface-3);color:var(--ink2);border-radius:7px;padding:2px 8px;
  font-size:11.5px;font-weight:600;}

/* ---- Marketing / Produktseite -------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.hero{
  padding:72px 0 60px;text-align:center;position:relative;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(249,115,22,.10), transparent 62%),
    radial-gradient(60% 60% at 80% 20%, rgba(34,211,238,.08), transparent 60%);
}
.hero .eyebrow{display:inline-block;background:var(--accentbg);color:var(--accent-strong);
  border:1px solid rgba(34,211,238,.28);font-size:12.5px;
  font-weight:600;padding:5px 14px;border-radius:20px;margin-bottom:22px;}
.hero h1{font-size:44px;letter-spacing:-1px;line-height:1.1;max-width:640px;margin:0 auto;color:var(--ink);}
.hero .claim{
  background:linear-gradient(90deg, var(--luke-strong), var(--luke-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{font-size:17px;color:var(--ink2);max-width:560px;margin:20px auto 30px;line-height:1.55;}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hero .os{font-size:12px;color:var(--ink3);margin-top:14px;}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px 0 60px;}
.feat .f{background:var(--card);border:1px solid var(--sep);border-radius:16px;padding:26px 24px;
  box-shadow:var(--shadow);}
.feat .f .fi{width:46px;height:46px;border-radius:12px;background:var(--accentbg);
  border:1px solid rgba(34,211,238,.22);display:grid;
  place-items:center;font-size:22px;margin-bottom:14px;}
.feat .f h3{font-size:17px;margin-bottom:8px;}
.feat .f p{color:var(--ink2);font-size:13.5px;line-height:1.55;margin:0;}
.feat .f b{color:var(--ink);}
.section{padding:0 0 60px;}
.section h2{font-size:26px;letter-spacing:-.4px;text-align:center;margin-bottom:8px;}
.section .sub{text-align:center;color:var(--ink2);margin-bottom:30px;}
.changelog{max-width:640px;margin:0 auto;}
.cl{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--sep);}
.cl:last-child{border-bottom:none;}
.cl .v{font-weight:700;color:var(--accent);font-size:13px;white-space:nowrap;width:56px;flex:none;}
.cl .t{font-size:13.5px;color:var(--ink);line-height:1.5;}
.footer{border-top:1px solid var(--sep);padding:30px 0;text-align:center;color:var(--ink3);
  font-size:12.5px;background:var(--surface);}
.footer a{color:var(--ink2);}

@media (max-width:820px){
  .side{display:none;}
  .detgrid{grid-template-columns:1fr;}
  .feat{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
  .content{padding:18px;}
}

/* iOS zoomt beim Fokussieren auf Felder mit font-size < 16px → auf kleinen
   Screens mind. 16px erzwingen. */
@media (max-width:640px){
  input,select,textarea{font-size:16px;}
}