/* vedocs – Designsystem „Glass Typewriter“: Material-3-Formen, Glasflächen, Blau→Violett, Schreibmaschinen-Akzente.
   Liegt nach style.css/ui.css und überschreibt deren Aussehen (Portal, Konsole, Anmeldung, Registrierung). */
:root{
 --blue:#3d6bff;--indigo:#5b4dff;--violet:#8b5cf6;--lilac:#c4b5fd;
 --grad:linear-gradient(135deg,#3d7bff 0%,#6b4dff 55%,#9a5cf6 100%);
 --accent:#4a46f0;--accent2:#6d5bff;--mint:#a9b8ff;--ink:#12123a;--ink2:#1b1a52;
 --text:#171744;--muted:#5f6288;--line:#dcdcf3;--bg:#eceefc;--card:rgba(255,255,255,.66);
 --glass:rgba(255,255,255,.58);--glass-hi:rgba(255,255,255,.82);--glass-brd:rgba(255,255,255,.8);
 --blur:blur(22px) saturate(170%);
 --r:22px;--r-sm:14px;--r-pill:999px;
 --sh1:0 1px 2px rgba(40,40,130,.08),0 10px 28px -14px rgba(70,60,200,.30);
 --sh2:0 2px 4px rgba(40,40,130,.08),0 28px 56px -22px rgba(80,60,220,.45);
 --shadow:var(--sh1);--ring:0 0 0 4px rgba(109,91,255,.22);
 --type:"American Typewriter","Courier Prime","Courier New",ui-monospace,monospace;
 --ease:cubic-bezier(.2,.7,.2,1);--emph:cubic-bezier(.3,0,0,1);
 color:var(--text);
}
html{background:#eceefc}
body{color:var(--text);background:
 radial-gradient(52vw 46vh at 8% -6%,#bfd0ff 0,transparent 62%),
 radial-gradient(46vw 44vh at 104% 2%,#dccbff 0,transparent 62%),
 radial-gradient(60vw 54vh at 60% 112%,#c9dcff 0,transparent 62%),#eceefc;
 background-attachment:fixed}
::selection{background:#8b7dff55}
:focus-visible{outline:3px solid #7d70ff99;outline-offset:2px;border-radius:10px}
h1,h2,h3{color:var(--ink);letter-spacing:-.025em}
h1{font-size:32px;font-weight:760}
.eyebrow,.workspace-label,.nav-sep,.local-badge,.badge,th,.step-number,kbd,.kbd,.console-tag,.sum,.pill-s,.cmdk-group{font-family:var(--type)}
.eyebrow{color:var(--accent);letter-spacing:.16em;font-size:12px;font-weight:700}
.eyebrow::before{content:"› ";opacity:.7}
.eyebrow::after{content:"_";margin-left:2px;animation:caret 1.1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}

/* Marke: Wortmarke mit Schreibmaschinen-Cursor */
.brand{font-weight:800;letter-spacing:-.045em}
.brand-img{border-radius:12px;box-shadow:0 6px 18px -6px rgba(91,77,255,.7)}

/* ---------- Glas-Karten ---------- */
.panel,.notice,.context-card,.paper-wrap,.table-wrap{backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.panel{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);box-shadow:var(--sh1)}
.panel-head{border-bottom:1px solid rgba(120,110,220,.14);background:rgba(255,255,255,.35)}
.panel .panel{box-shadow:none}
.step{border-bottom:1px dashed rgba(110,100,210,.22)}
.step.is-done .step-number{background:var(--grad);color:#fff}
.step-number{border-radius:8px;background:rgba(109,91,255,.12);color:var(--accent);font-weight:700}
.step-title h2{font-size:17px}
.sum{color:var(--muted);font-size:12.5px}
.notice{border-radius:16px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);color:#3a3a78;box-shadow:var(--sh1)}
.notice.warn{background:rgba(255,244,220,.75);border-color:#f0d9a0}
.table-wrap{border-radius:0}
th{background:rgba(110,100,230,.07);color:var(--muted);font-size:11px;letter-spacing:.12em}
td{border-bottom:1px solid rgba(110,100,210,.12)}
tbody tr:hover{background:rgba(120,110,255,.07)}
.badge{background:rgba(109,91,255,.13);color:#3b34c4;border:1px solid rgba(109,91,255,.18);font-size:11.5px;letter-spacing:.04em}
.doc-icon{background:var(--grad);color:#fff;border:0;border-radius:12px;box-shadow:0 8px 16px -8px rgba(91,77,255,.7);font-family:var(--type)}

/* ---------- Seitenleiste: schwebende Glas-Navigation ---------- */
.sidebar{inset:12px auto 12px 12px;width:256px;height:auto;border-radius:28px;color:#d9d7ff;padding:24px 14px 16px;
 background:linear-gradient(170deg,rgba(33,30,105,.94),rgba(58,38,140,.92) 60%,rgba(40,48,150,.92));
 border:1px solid rgba(255,255,255,.16);box-shadow:var(--sh2),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:var(--blur)}
.sidebar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(240px 160px at 0% 0%,rgba(130,160,255,.30),transparent 70%),radial-gradient(220px 200px at 100% 100%,rgba(190,150,255,.26),transparent 70%)}
.sidebar>*{position:relative}
.sidebar .brand{color:#fff;padding:0 8px;font-size:21px}
.workspace-label,.nav-sep{color:#9d9ae0;font-size:10.5px;letter-spacing:.2em;font-weight:700}
.workspace-label{margin:30px 14px 8px}
.nav{position:relative;overflow:hidden;color:#c9c7f5;border-radius:var(--r-pill);padding:12px 16px;margin-bottom:4px;font-weight:600;font-size:14.5px;transition:background .25s var(--emph),color .2s}
.nav:hover{background:rgba(255,255,255,.10);color:#fff}
.nav.active{background:rgba(255,255,255,.20);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px -8px rgba(10,5,60,.6)}
.nav.active::before{display:none}
.nav svg{stroke-width:1.8}
.local-badge{color:#b9b6ff}
.sidebar-bottom p{color:#aeabe6}
.profile{border-top:1px dashed rgba(255,255,255,.2)}
.profile strong{color:#fff}.profile small{color:#aeabe6}
.avatar{background:var(--grad);color:#fff;font-family:var(--type);font-weight:700;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.sidebar .button{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
.sidebar .button:hover{background:rgba(255,255,255,.2)}
.shell{margin-left:284px}
.topbar{height:72px;margin:12px 12px 0 0;border-radius:24px;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:var(--blur);box-shadow:var(--sh1);top:12px;padding:0 26px}
#breadcrumb{color:var(--ink);font-weight:700}
.topbar .slash{color:#a9a8d6}
.cmdk-btn{background:rgba(255,255,255,.7);border:1px solid rgba(110,100,220,.2);border-radius:var(--r-pill);color:var(--muted);padding:9px 12px 9px 16px}
.cmdk-btn:hover{border-color:var(--accent2);box-shadow:var(--ring)}
.cmdk-btn kbd,.kbd{background:rgba(109,91,255,.1);border:1px solid rgba(109,91,255,.2);color:#4a46c8;border-radius:8px}
main{padding:30px 34px 70px 22px}

/* ---------- Buttons (Material: filled / tonal / outlined / text) ---------- */
.button,.btn{position:relative;overflow:hidden;border-radius:var(--r-pill)}
.button{background:rgba(255,255,255,.7);border:1px solid rgba(110,100,220,.28);color:#3730b8;padding:10px 20px;font-weight:650;box-shadow:none;transition:box-shadow .25s,background .2s,transform .2s var(--emph)}
.button:hover{background:rgba(124,110,255,.12);border-color:rgba(110,100,220,.45);box-shadow:var(--sh1)}
.button.small{padding:7px 14px;font-size:13.5px}
.button.primary{background:var(--grad);color:#fff;border:0;box-shadow:0 10px 24px -10px rgba(91,77,255,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.button.primary:hover{background:var(--grad);filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(91,77,255,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.button.primary:disabled{background:#c9c8ea;color:#fff;filter:none;box-shadow:none}
.button.danger{color:#b4234f;border-color:rgba(180,35,79,.3)}.button.danger:hover{background:rgba(180,35,79,.08)}
.button.ghost{border-color:transparent;background:transparent;color:var(--accent)}
.button.ghost:hover{background:rgba(109,91,255,.1)}
.icon-button{border-radius:50%}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:ripple .6s var(--emph) forwards;pointer-events:none}
.button.primary .ripple,.btn-primary .ripple{background:#fff;opacity:.35}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.has-ripple{overflow:hidden}

/* ---------- Eingaben (Material outlined) ---------- */
input,select,textarea{background:rgba(255,255,255,.75);border:1px solid rgba(110,100,220,.28);border-radius:14px;color:var(--text);padding:12px 14px}
input::placeholder,textarea::placeholder{color:#9a9bc4;font-family:var(--type)}
input:focus,select:focus,textarea:focus{border-color:var(--accent2);box-shadow:var(--ring);background:#fff}
.field>span{font-family:var(--type);font-size:12px;letter-spacing:.06em;color:var(--muted);font-weight:700;text-transform:uppercase}
.hint,.small-note,.subtitle{color:var(--muted)}
code{font-family:var(--type);background:rgba(109,91,255,.1);color:#3b34c4;padding:1px 6px;border-radius:6px}

/* Auswahllisten */
.pick-item{border-radius:16px;border:1px solid rgba(110,100,220,.18);background:rgba(255,255,255,.6);transition:background .2s,box-shadow .2s,border-color .2s}
.pick-item:hover{background:rgba(255,255,255,.95);box-shadow:var(--sh1)}
.pick-item.on{background:linear-gradient(135deg,rgba(61,123,255,.14),rgba(139,92,246,.16));border-color:rgba(109,91,255,.5);box-shadow:0 0 0 1px rgba(109,91,255,.25) inset}
.pick-item .dot{background:rgba(109,91,255,.25)}.pick-item.on .dot{background:var(--grad)}
.pill-s{background:rgba(109,91,255,.12);color:#3b34c4;border-radius:var(--r-pill)}

/* ---------- Dokument-„Papier“ & Vorschau: Schreibmaschinen-Optik ---------- */
.paper{background:#fff;border-radius:6px;box-shadow:0 2px 3px rgba(40,40,130,.1),0 30px 50px -26px rgba(60,50,180,.5)}
.preview-area{background:linear-gradient(160deg,rgba(124,140,255,.16),rgba(176,140,255,.16))}
.preview-head{font-family:var(--type)}
.preview-footer{background:rgba(255,255,255,.5);border-top:1px dashed rgba(110,100,210,.25)}
.status-ok{color:#2a4fd0}.status-ok::before{background-color:#4a46f0}
.status-warning{color:#a15a00}
.missing-chips span{font-family:var(--type);border-radius:var(--r-pill)}
.layout-note{font-family:var(--type)}

/* ---------- Startseite im Portal ---------- */
.home-hero{border-radius:28px;color:#fff;border:1px solid rgba(255,255,255,.22);
 background:radial-gradient(420px 260px at 90% 0%,rgba(190,150,255,.55),transparent 70%),radial-gradient(380px 260px at 0% 100%,rgba(70,140,255,.5),transparent 70%),linear-gradient(135deg,#25226e,#4033b8 60%,#5a3fd0);box-shadow:var(--sh2)}
.home-hero h1,.home-hero h2{color:#fff}
.stat,.stat-card,.kpi{border-radius:var(--r)}

/* ---------- Reiter ---------- */
.tabs{border-bottom:1px solid rgba(110,100,210,.18);gap:4px}
.tab{position:relative;overflow:hidden;border-radius:14px 14px 0 0;font-weight:650;color:var(--muted);border-bottom:3px solid transparent}
.tab:hover{background:rgba(109,91,255,.08);color:var(--accent)}
.tab.tab-on{color:var(--accent);border-color:var(--accent2);background:rgba(109,91,255,.07)}

/* ---------- Dialoge, Toast, Befehlspalette ---------- */
dialog{border:1px solid rgba(255,255,255,.8);border-radius:28px;background:rgba(255,255,255,.82);backdrop-filter:var(--blur);box-shadow:0 40px 100px -24px rgba(40,30,140,.65)}
dialog::backdrop{background:rgba(30,24,90,.45);backdrop-filter:blur(8px)}
.dialog-head{border-bottom:1px dashed rgba(110,100,210,.25)}
.dialog-head h2{font-size:20px}
.dialog-foot{background:rgba(236,238,252,.6);border-radius:0 0 28px 28px}
#toast{background:rgba(26,24,84,.92);backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);font-family:var(--type);font-size:14px}
#toast::before{background-color:#7d8cff}
.cmdk{border-radius:26px}
.cmdk-item{border-radius:14px}
.cmdk-item.on{background:linear-gradient(135deg,rgba(61,123,255,.16),rgba(139,92,246,.18))}

/* ---------- Anmeldung / Registrierung ---------- */
.auth,body.signup{background:#0e0c33}
.auth-wrap{background:
 radial-gradient(60vw 60vh at 0% 0%,#3a3fd6 0,transparent 60%),radial-gradient(50vw 60vh at 100% 100%,#8b4fe6 0,transparent 60%),#0e0c33}
.auth-side{background:transparent;color:#e7e5ff}
.auth-side::before{background:#4a5cff;opacity:.5}.auth-side::after{background:#a259ff;opacity:.4}
.auth-side h2{color:#fff}
.auth-side h2 em{background:linear-gradient(100deg,#8fb0ff,#c9a8ff);-webkit-background-clip:text;background-clip:text}
.auth-side ul{color:#cfccff}
.auth-side li::before{background-color:rgba(255,255,255,.14)}
.auth-side small{color:#a8a5e8;font-family:var(--type)}
.auth-pane{background:transparent;padding:28px}
.auth-pane .auth-card,.auth-pane .signup-card{background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.8);border-radius:32px;padding:40px 36px;backdrop-filter:var(--blur);box-shadow:0 40px 90px -30px rgba(10,5,70,.8)}
.auth-card h1,.signup-card h1{font-size:30px}
.auth-pane .panel{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.auth-pane .button.primary.wide{border-radius:var(--r-pill)}
.auth-card h1::after,.signup-card h1::after{content:"_";color:var(--accent2);animation:caret 1.1s steps(2) infinite}
.signup .auth-wrap{min-height:100vh}

/* ---------- Konsole ---------- */
.console-bar{margin:12px;border-radius:24px;border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:var(--blur);box-shadow:var(--sh1);top:12px;height:64px}
.console-tag{background:var(--grad);color:#fff;border-radius:var(--r-pill);padding:3px 10px;font-size:11px;letter-spacing:.1em}
.console-bar .tab{border-radius:var(--r-pill);border-bottom:0}
.console-bar .tab.tab-on{background:rgba(109,91,255,.14)}
.console-main{padding:18px 26px 70px}

/* Responsiv: Navigation wird oben eine Glas-Leiste */
@media(max-width:860px){
 body{padding:0}
 .sidebar{position:static;inset:auto;width:auto;margin:10px;border-radius:24px;padding:14px}
 .shell{margin-left:0}
 .topbar{margin:0 10px;top:8px}
 main{padding:20px 14px 60px}
 .console-bar{margin:8px}
}
@media(prefers-reduced-motion:reduce){.eyebrow::after,.auth-card h1::after,.signup-card h1::after{animation:none}}

/* Startseiten-Banner: helle Buttons auf Violett */
.home-hero .button{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35)}
.home-hero .button:hover{background:rgba(255,255,255,.28)}
.home-hero .button.primary{background:#fff;color:#3730b8;border-color:#fff;box-shadow:0 12px 28px -12px rgba(10,5,70,.7)}
.home-hero .button.primary:hover{filter:none;background:#f1efff}

/* Konsole: Anmeldung als Glas-Karte */
.console .auth-card{background:rgba(255,255,255,.72);border:1px solid var(--glass-brd);border-radius:32px;padding:36px;margin:12vh auto 0;backdrop-filter:var(--blur);box-shadow:var(--sh2)}
.console .auth-card .panel{background:none;border:0;box-shadow:none;backdrop-filter:none}
.auth-pane .auth-card,.auth-pane .signup-card{background:rgba(255,255,255,.97)}
.console-bar .brand{color:var(--ink)}
.console-bar .console-user{color:var(--muted)}
.console-bar .button{color:#3730b8}
@media(max-width:860px){
 .sidebar{flex-direction:column;align-items:stretch;gap:8px}
 .sidebar nav{display:flex;overflow-x:auto;gap:6px;margin:0;scrollbar-width:none}
 .sidebar nav::-webkit-scrollbar{display:none}
 .nav{flex:none;padding:9px 14px;margin:0;white-space:nowrap}
 .nav-sep,.workspace-label,.sidebar-bottom p,.local-badge{display:none}
 .sidebar-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
 .sidebar-bottom .profile{border:0;padding:0;margin:0}
 .sidebar-bottom .logout{width:auto}
}

/* ---------- Fenster aus dem DMS (Schaltfläche an der Akte) ---------- */
.ctx .sidebar,.ctx .topbar{display:none}
.ctx .shell{margin:0}
.ctx main{padding:20px 16px 60px}
.ctx-wrap{max-width:720px;margin:0 auto}
.ctx-head{display:flex;align-items:center;justify-content:space-between;margin:6px 4px 16px}
.ctx-head .brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:20px}
.ctx-link{color:var(--accent);font-weight:650;text-decoration:none}
.ctx-title{padding:26px 28px 6px}
.ctx-title h1{margin:4px 0 6px;font-size:28px}
.ctx-card .step{padding:20px 28px}
.ctx-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;background:rgba(255,255,255,.5);border-top:1px dashed rgba(110,100,210,.25);flex-wrap:wrap}
.ctx-foot #ctx-validation{font-size:14px;font-weight:600}
#ctx-result{padding:0 28px 24px}
#ctx-result .error{margin-top:14px}
.kind-list{display:grid;gap:8px;margin:8px 0 22px}
.storage-title{margin-top:6px}
.action-card{margin-top:22px}