/* PEXOR Designsystem — Apple-inspiriert, eigenständig. Dark default + Light. */
:root{
  --bg:#0B0B0D; --bg2:#141417; --card:#19191D; --card2:#1F1F24;
  --text:#F5F5F7; --text2:#A1A1AA; --border:#2A2A30;
  --accent:#5B9DFF; --accent-ink:#0B0B0D; --accent-soft:rgba(91,157,255,.14);
  --danger:#FF6B6B; --ok:#3DDC84; --warn:#FFB020;
  --radius:14px; --radius-s:9px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --max:1120px;
}
[data-theme="light"]{
  --bg:#F5F5F7; --bg2:#FFFFFF; --card:#FFFFFF; --card2:#F0F0F4;
  --text:#111114; --text2:#5B5B63; --border:#E2E2E8;
  --accent:#0B63E5; --accent-ink:#FFFFFF; --accent-soft:rgba(11,99,229,.10);
  --shadow:0 12px 32px rgba(20,20,40,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-align:left;
}
::selection{background:var(--accent); color:var(--accent-ink)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-ink); padding:.6rem 1rem; z-index:200; border-radius:0 0 8px 0}
.skip:focus{left:0}
.wrap{max-width:var(--max); margin:0 auto; padding:0 1.25rem}
/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; gap:1rem; height:64px}
.brand{font-weight:800; letter-spacing:.22em; font-size:1.05rem; color:var(--text)}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.nav-links{display:flex; gap:1.1rem; margin-left:1rem; align-items:center}
.nav-links a{color:var(--text2); font-size:.95rem}
.nav-links a.active,.nav-links a:hover{color:var(--text); text-decoration:none}
.nav-spacer{flex:1}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid var(--border);
  background:var(--card); color:var(--text); border-radius:999px; padding:.62rem 1.25rem; font-weight:600; font-size:.95rem; cursor:pointer; transition:transform .15s ease,border-color .15s,background .15s}
.btn:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent}
.btn-danger{border-color:var(--danger); color:var(--danger)}
.btn-small{padding:.4rem .9rem; font-size:.85rem}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.icon-btn{background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:.45rem .6rem; cursor:pointer}
.burger{display:none}
/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:5.5rem 0 4rem; text-align:center}
.hero-orb{position:absolute; inset:-20% -10% auto; height:560px; pointer-events:none;
  background:radial-gradient(600px 300px at 50% 30%, rgba(91,157,255,.22), transparent 70%),
             radial-gradient(500px 260px at 70% 60%, rgba(139,124,255,.14), transparent 70%),
             radial-gradient(420px 240px at 30% 55%, rgba(91,157,255,.10), transparent 70%);
  filter:saturate(1.1)}
.hero-glass{position:relative; display:flex; gap:2rem; justify-content:center; margin:2.5rem auto 0; flex-wrap:wrap}
.glass-card{width:150px; height:150px; border-radius:22px; border:1px solid var(--border);
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  backdrop-filter:blur(10px); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-size:2.4rem}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 1rem}
.hero p.sub{color:var(--text2); font-size:1.12rem; max-width:620px; margin:0 auto 1.8rem}
.hero-cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.eyebrow{display:inline-block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text2);
  border:1px solid var(--border); border-radius:999px; padding:.32rem .9rem; margin-bottom:1.1rem; background:var(--bg2)}
/* ---------- Sections ---------- */
.section{padding:3.5rem 0}
.section h2{font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.01em; margin:0 0 .6rem; text-align:center}
.section p.lead{color:var(--text2); text-align:center; max-width:640px; margin:0 auto 2rem}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .5rem; font-size:1.05rem}
.card p{color:var(--text2); font-size:.94rem; margin:0}
.card .icon{font-size:1.6rem}
.mod-card{display:flex; flex-direction:column; gap:.5rem}
.mod-card .status{font-size:.78rem; color:var(--text2)}
.badge{display:inline-block; font-size:.72rem; border:1px solid var(--border); border-radius:999px; padding:.15rem .6rem; color:var(--text2)}
.badge.ok{color:var(--ok); border-color:var(--ok)}
.badge.warn{color:var(--warn); border-color:var(--warn)}
.badge.info{color:var(--accent); border-color:var(--accent)}
/* Dashboard mockup */
.mock{background:var(--bg2); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.mock-bar{display:flex; gap:.4rem; padding:.7rem 1rem; border-bottom:1px solid var(--border)}
.dot{width:11px; height:11px; border-radius:50%; background:var(--border)}
.mock-body{display:grid; grid-template-columns:200px 1fr; min-height:300px}
.mock-side{border-right:1px solid var(--border); padding:1rem; display:flex; flex-direction:column; gap:.5rem}
.mock-side div{background:var(--card); border:1px solid var(--border); border-radius:8px; padding:.5rem .7rem; font-size:.8rem; color:var(--text2)}
.mock-main{padding:1rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; align-content:start}
.mock-tile{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.9rem; min-height:96px}
.mock-tile b{display:block; font-size:.85rem}
.mock-tile span{font-size:.75rem; color:var(--text2)}
/* ---------- Forms ---------- */
.form{max-width:480px; margin:0 auto}
.field{margin-bottom:1rem}
.field label{display:block; font-size:.88rem; font-weight:600; margin-bottom:.35rem}
.field input,.field textarea,.field select{width:100%; background:var(--bg2); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-s); padding:.7rem .85rem; font-size:.95rem; font-family:inherit}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent); outline:none}
.hint{font-size:.82rem; color:var(--text2)}
.error{font-size:.85rem; color:var(--danger); margin-top:.3rem}
.check{display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--text2)}
.check input{margin-top:.3rem}
.auth-shell{max-width:520px; margin:2rem auto}
.pw-meter{height:6px; border-radius:99px; background:var(--border); margin-top:.4rem; overflow:hidden}
.pw-meter i{display:block; height:100%; width:0; background:var(--danger); transition:width .2s}
.demo-box{border:1px dashed var(--warn); border-radius:var(--radius-s); padding:.9rem 1rem; background:rgba(255,176,32,.06); font-size:.88rem; margin:1rem 0}
.demo-box code{user-select:all}
/* ---------- App layout ---------- */
.app{display:grid; grid-template-columns:230px 1fr; gap:1.2rem; align-items:start}
.side{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem; position:sticky; top:80px}
.side a{display:block; padding:.55rem .7rem; border-radius:9px; color:var(--text2); font-size:.93rem}
.side a.active,.side a:hover{background:var(--card); color:var(--text); text-decoration:none}
.panel{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; min-width:0}
.panel h2{margin-top:0}
.table-wrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th,.tbl td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--border); vertical-align:top}
.tbl th{color:var(--text2); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em}
.toolbar{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem}
.toolbar input,.toolbar select{background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:9px; padding:.55rem .7rem}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.2rem}
.kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem}
.kpi b{font-size:1.5rem; display:block}
.kpi span{color:var(--text2); font-size:.82rem}
/* ---------- Footer / misc ---------- */
.site-footer{border-top:1px solid var(--border); margin-top:4rem; padding:2.2rem 0; color:var(--text2); font-size:.9rem}
.foot-grid{display:flex; gap:2rem; flex-wrap:wrap; justify-content:space-between}
.foot-grid a{color:var(--text2); display:block; margin:.25rem 0}
.toast-wrap{position:fixed; bottom:1rem; right:1rem; display:flex; flex-direction:column; gap:.5rem; z-index:120}
.toast{background:var(--card2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:.7rem 1rem; box-shadow:var(--shadow); font-size:.9rem; max-width:320px}
.toast.err{border-left-color:var(--danger)}
.cookie{position:fixed; bottom:1rem; left:1rem; right:1rem; max-width:560px; margin:0 auto; background:var(--card2);
  border:1px solid var(--border); border-radius:14px; padding:1rem 1.2rem; box-shadow:var(--shadow); z-index:110}
.cookie-btns{display:flex; gap:.5rem; margin-top:.7rem; flex-wrap:wrap}
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:130; padding:1rem}
.modal{background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:1.5rem; max-width:560px; width:100%; max-height:88vh; overflow:auto}
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
/* responsive */
@media (max-width:900px){
  .grid3,.grid2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .app{grid-template-columns:1fr}
  .side{position:static}
  .mock-body{grid-template-columns:1fr}
  .mock-side{flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--border)}
  .nav-links{display:none; position:absolute; top:64px; left:0; right:0; background:var(--bg2); border-bottom:1px solid var(--border);
    flex-direction:column; align-items:stretch; padding:1rem; margin:0}
  .nav-links.open{display:flex}
  .burger{display:inline-flex}
}
/* ---------- PEXOR Modul-/Lizenzsystem ---------- */
.side-label{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text2); margin:.9rem .7rem .3rem}
.side-label:first-child{margin-top:0}
.pill{display:inline-block; min-width:1.4em; text-align:center; font-size:.72rem; font-weight:700; background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:.1rem .45rem}
.grant-row{display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:.45rem 0; border-bottom:1px dashed var(--border)}
.grant-row input{font-family:inherit}
.folder-chips{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.chip{border:1px solid var(--border); background:var(--card); color:var(--text2); border-radius:999px; padding:.3rem .8rem; cursor:pointer; font-size:.82rem}
.chip.on{background:var(--accent-soft); border-color:var(--accent); color:var(--text)}
.quota{height:8px; border-radius:99px; background:var(--border); overflow:hidden; margin:.4rem 0}
.quota i{display:block; height:100%; background:var(--accent); transition:width .3s}
.empty{text-align:center; color:var(--text2); padding:1.6rem 1rem}
.empty::before{content:"◌"; display:block; font-size:1.6rem; margin-bottom:.4rem}
.keybox{font-family:monospace; font-size:1.05rem; letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}

/* ---------- PEXOR Landing — Startseite (Logo + animierter Hintergrund) ---------- */
.px-landing{position:relative;min-height:100vh;min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;
  background:#050508;color:#F5F5F7;overflow:clip}
.px-landing #pxBg{position:absolute;inset:0;width:100%;height:100%;display:block}
.px-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(0,0,0,.58) 100%)}
.px-grain{position:absolute;inset:0;pointer-events:none;opacity:.08;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.55'/></svg>")}
.px-center{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1rem 1.25rem 2rem}
.px-logo-wrap{position:relative;display:inline-block;animation:pxIn 1.4s cubic-bezier(.2,.7,.2,1) both}
.px-halo{position:absolute;inset:-22% -14%;pointer-events:none;filter:blur(34px);
  background:radial-gradient(50% 50% at 50% 50%, rgba(64,120,255,.38), rgba(0,229,255,.12) 55%, transparent 75%);
  animation:pxBreathe 5.5s ease-in-out infinite}
.px-logo{position:relative;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-size:clamp(3.2rem,12vw,5.8rem);color:#fff;user-select:none;
  filter:drop-shadow(0 0 30px rgba(80,140,255,.32)) drop-shadow(0 8px 32px rgba(0,0,0,.65))}
.px-dot{color:#2456FF}
.px-tag{margin:1.15rem 0 0;font-size:clamp(.8rem,2.2vw,1rem);font-weight:400;letter-spacing:.14em;
  color:rgba(255,255,255,.62);text-shadow:0 1px 12px rgba(0,0,0,.8);
  animation:pxIn 1.4s .3s cubic-bezier(.2,.7,.2,1) both}
.px-cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2.1rem;
  animation:pxIn 1.4s .45s cubic-bezier(.2,.7,.2,1) both}
.px-cta .btn{font-size:.95rem;padding:.7rem 1.6rem}
.px-glow{box-shadow:0 0 0 1px rgba(120,170,255,.5), 0 6px 34px rgba(64,120,255,.45)}
.px-glow:hover{box-shadow:0 0 0 1px rgba(140,190,255,.8), 0 6px 44px rgba(64,120,255,.65)}
.px-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#F5F5F7}
.px-ghost:hover{border-color:rgba(255,255,255,.45)}
.px-reg{margin:1.1rem 0 0;font-size:.86rem;color:rgba(245,245,247,.55);
  animation:pxIn 1.4s .6s cubic-bezier(.2,.7,.2,1) both}
.px-back{background:transparent;border-color:transparent;color:rgba(255,255,255,.55)}
.px-back:hover{border-color:rgba(255,255,255,.3);color:#fff}
.px-reg a{color:#9DC2FF}
.px-foot{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;
  padding:1rem 1rem 1.2rem;font-size:.75rem;letter-spacing:.04em;color:rgba(255,255,255,.38)}
/* ---------- Landing-Popups (fest dunkel, unabhängig vom Theme) ---------- */
.px-modal-bg{background:rgba(2,3,6,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.px-modal{position:relative;overflow:hidden;background:linear-gradient(168deg,rgba(26,30,42,.96),rgba(9,10,15,.98));
  border:1px solid rgba(255,255,255,.11);color:#F5F5F7;border-radius:20px;
  box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 70px rgba(46,107,255,.10),inset 0 1px 0 rgba(255,255,255,.07);
  animation:pxPop .38s cubic-bezier(.2,.9,.3,1.15) both}
.px-modal::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,#5B9DFF,transparent)}
.px-modal::after{content:"";position:absolute;top:-120px;left:50%;width:280px;height:200px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(64,120,255,.20),transparent 70%);pointer-events:none}
.px-mbrand{position:relative;z-index:1;font-weight:800;letter-spacing:.24em;font-size:.72rem;color:rgba(255,255,255,.45);margin:0 0 .9rem}
.px-mbrand span{color:#5B9DFF}
.px-modal h2{position:relative;z-index:1;margin:.2rem 2rem .3rem 0;font-size:1.4rem;text-align:left;letter-spacing:-.01em}
.px-mhint{position:relative;z-index:1;color:rgba(245,245,247,.6);font-size:.88rem;margin:0 0 1.1rem}
.px-modal .field{position:relative;z-index:1;margin-bottom:.9rem}
.px-modal .field label{color:rgba(245,245,247,.85);font-size:.82rem}
.px-modal .field input{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  color:#F5F5F7;border-radius:12px;padding:.8rem .95rem;transition:border-color .15s,box-shadow .15s,background .15s}
.px-modal .field input::placeholder{color:rgba(245,245,247,.3)}
.px-modal .field input:focus{border-color:#5B9DFF;background:rgba(91,157,255,.06);
  box-shadow:0 0 0 3px rgba(91,157,255,.18);outline:none}
.px-modal .check{color:rgba(245,245,247,.65)}
.px-modal .check a,.px-mfoot a{color:#9DC2FF}
.px-modal .hint{color:rgba(245,245,247,.55)}
.px-modal .demo-box{position:relative;z-index:1;color:#F5F5F7}
.px-modal .btn-primary{background:linear-gradient(135deg,#2E6BFF,#00B8FF);border:none;color:#fff;
  box-shadow:0 8px 28px rgba(46,107,255,.4);transition:transform .15s,box-shadow .15s,filter .15s}
.px-modal .btn-primary:hover:not([disabled]){transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:0 10px 34px rgba(46,107,255,.55)}
.px-err{position:relative;z-index:1;background:rgba(255,107,107,.10);border:1px solid rgba(255,107,107,.45);color:#FF9D9D;
  border-radius:12px;padding:.65rem .85rem;font-size:.86rem;margin:0 0 1rem}
.px-mfoot{position:relative;z-index:1;text-align:center;font-size:.85rem;margin:.8rem 0 0}
.px-linkbtn{background:none;border:0;padding:0;font:inherit;color:#9DC2FF;cursor:pointer}
.px-linkbtn:hover{text-decoration:underline}
.px-code{text-align:center;font-size:1.25rem!important;letter-spacing:.4em!important;font-weight:700;
  padding:.8rem .5rem .8rem 1rem!important}
.px-x{position:absolute;top:.55rem;right:.75rem;background:none;border:none;color:rgba(255,255,255,.45);
  font-size:1.5rem;line-height:1;cursor:pointer;padding:.2rem .4rem;z-index:2}
.px-x:hover{color:#fff}
@keyframes pxPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pxIn{from{opacity:0;transform:translateY(20px) scale(.97);filter:blur(10px)}
  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes pxBreathe{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@media (max-width:560px){
  .px-tag{letter-spacing:.1em}
}