/* ============================================================ vault-theme.css — Vault Design System "Candy Apple" Retro-modern (50er–70er Automotive), hell + dunkel, 2 Dichtestufen. Signatur: #E8452D Einbinden: als ERSTES Stylesheet, danach app-eigene Regeln. Die alten Token-Namen (--bg, --accent, --panel, --tx, --text-primary …) sind bewusst mit-definiert, damit bestehende Apps ohne Umschreiben die neue Palette bekommen. Umschalter: ============================================================ */ /* ---- Schriften ------------------------------------------------- Archivo, Instrument Sans, DM Mono (Google Fonts, OFL) liegen selbst gehostet in /fonts/ — kein externer Request, funktioniert offline und im Flugmodus. Subsets latin / latin-ext / vietnamesisch, erzeugt aus der Google-Fonts-CSS. Fehlt eine Datei, greift automatisch der System-Fallback aus den Stacks weiter unten. */ @font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/Archivo-400900-viet.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/Archivo-400900-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/Archivo-400900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/DMMono-400-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/DMMono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/DMMono-500-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/DMMono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/fonts/InstrumentSans-400700-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/fonts/InstrumentSans-400700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{ /* Flächen */ --bg:#F2ECE1; --surface:#FFFCF6; --sunken:#EDE5D8; --sunken2:#F8F3EA; --bd:#E5DACA; --bd-soft:#F3EBDF; --field-bd:#C7BCAB; /* Schrift */ --ink:#1B1613; --ink2:#5A5049; --mut:#8E8377; --mut2:#9C9083; /* Signatur + Status --signal ist EINSTELLBAR: vault-accent.js überschreibt die vier Signal-Token (und --on-signal) als Inline-Stil auf , sobald eine eigene Farbe gewählt wurde. Die Werte hier sind die Vorgabe „Candy Apple" und gelten, solange nichts umgestellt ist. --signal-rgb ist dasselbe Rot als „r,g,b" — für die Stellen, an denen eine eigene Deckkraft gebraucht wird: rgba(var(--signal-rgb),.14). --on-signal ist die Schrift AUF der Signalfarbe; sie kippt auf Dunkel, sobald Weiß auf der gewählten Farbe unlesbar würde. */ --signal:#E8452D; --signal-deep:#C4331D; --signal-soft:rgba(232,69,45,.10); --signal-rgb:232,69,45; --on-signal:#FFF9F2; /* Gefüllte Fläche, auf der die Schrift WEISS bleiben soll — so weit nachgedunkelt, dass 4,5:1 stehen. Für Flächen, die nicht auf die Schriftumkehr von --on-signal umstellen dürfen (VaultShare-Gästeseite). */ --signal-solid:#B45530; --signal-solid-hover:#9E4523; --ok:#2E7D53; --warn:#C98A16; --danger:#C0281B; /* Material — flach, kein Farbverlauf */ --chrome:#FFFCF6; --grain:repeating-linear-gradient(0deg,rgba(27,22,19,.022) 0 1px,transparent 1px 3px); --shadow:rgba(27,22,19,.05); --shadow-card:0 1px 2px rgba(27,22,19,.05); --shadow-lift:0 6px 18px rgba(27,22,19,.10); --shadow-modal:0 14px 40px rgba(27,22,19,.20); --inset-hi:inset 0 1px 0 rgba(255,255,255,.7); /* Form */ --r-card:14px; --r-field:10px; --r-pill:999px; --pad-card:14px; --gap:10px; --fs-body:13.5px; --fs-title:13.5px; --ctl-h:38px; /* Typo-Stacks */ --font-display:'Archivo','Archivo Expanded','Helvetica Neue',Helvetica,Arial,sans-serif; --font-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* --- Alt-Token (Kompatibilität mit den bestehenden Apps) --- */ --bg-sec:var(--sunken); --card:var(--surface); --panel:var(--surface); --panel2:var(--sunken); --bd-light:var(--bd-soft); --accent:var(--signal); --acc:var(--signal); --accent-hover:var(--signal-deep); --accent-soft:var(--signal-soft); --tx:var(--ink); --text-primary:var(--ink); --text-secondary:var(--ink2); --text-muted:var(--mut); --bg-primary:var(--bg); --bg-secondary:var(--sunken); --bg-card:var(--surface); --border:var(--bd); --border-light:var(--bd-soft); --red:var(--danger); --shadow-hover:rgba(27,22,19,.10); --shadow-lift-legacy:var(--shadow-lift); color-scheme:light; } [data-theme="dark"]{ --bg:#151210; --surface:#1F1A17; --sunken:#1A1512; --sunken2:#251E1A; --bd:#332B25; --bd-soft:#2A2320; --field-bd:#43382F; --ink:#F6F0E7; --ink2:#BCB1A4; --mut:#8A8076; --mut2:#7A7167; --signal:#E8452D; --signal-deep:#F2694F; --signal-soft:rgba(232,69,45,.16); --signal-rgb:232,69,45; --on-signal:#FFF9F2; --signal-solid:#B45530; --signal-solid-hover:#C4684A; --ok:#4FA97A; --warn:#DBA83A; --danger:#E8452D; --chrome:#251E1A; --grain:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px); --shadow:rgba(0,0,0,.4); --shadow-card:0 1px 2px rgba(0,0,0,.3); --shadow-lift:0 6px 18px rgba(0,0,0,.45); --shadow-modal:0 14px 40px rgba(0,0,0,.55); --inset-hi:inset 0 1px 0 rgba(255,255,255,.05); color-scheme:dark; } [data-density="compact"]{ --pad-card:10px; --gap:7px; --fs-body:12.5px; --fs-title:12.5px; --ctl-h:34px; --r-card:11px; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} body{ margin:0;font-family:var(--font-ui);font-size:var(--fs-body);color:var(--ink); background-color:var(--bg);background-image:var(--grain); -webkit-font-smoothing:antialiased;transition:background-color .2s,color .2s; } a{color:var(--signal-deep);text-decoration:none} a:hover{color:var(--signal)} ::selection{background:var(--signal);color:var(--on-signal)} :focus-visible{outline:2px solid var(--signal);outline-offset:2px} /* Display-Typo: Kühlergrill-Wortmarke */ h1,h2,h3,.display{font-family:var(--font-display);font-stretch:118%;font-weight:800; text-transform:uppercase;letter-spacing:-.01em;line-height:1;margin:0} h1{font-size:22px} h2{font-size:15px;letter-spacing:.02em} h3{font-size:13px;letter-spacing:.02em} .top h1 .dot,h1 .dot{color:var(--signal)} .stripe{display:flex;gap:3px;align-items:center} .stripe i{display:block;height:3px;background:var(--signal)} .stripe i:first-child{width:34px} .stripe i+i{width:14px} .mono,.num{font-family:var(--font-mono);font-weight:500} .label{font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--mut)} /* --- Fließtext-Bereiche: .v-prose ------------------------------------------ Die Wortmarken-Typografie oben gilt für die OBERFLÄCHE. Wo Nutzer-Inhalte gerendert werden (Markdown aus dem Vault, E-Mail-Text, Notizvorschau), sind Überschriften ganze Sätze — und „keine Versalien für Sätze" ist Grundregel 01. Solche Container bekommen .v-prose (oder mappen ihren eigenen Selektor auf dieselben Werte). Referenz: .v-doc benutzt es bereits. */ .v-prose h1,.v-prose h2,.v-prose h3,.v-prose h4,.v-prose h5,.v-prose h6{ font-family:var(--font-ui);font-stretch:normal;text-transform:none; letter-spacing:-.01em;line-height:1.3} /* Steuerelemente */ button,input,select,textarea{font-family:inherit} .btn-ghost,.btn,.btn-primary{display:inline-flex;align-items:center;gap:7px;height:var(--ctl-h);padding:0 15px; border-radius:var(--r-pill);border:1px solid var(--bd);background:var(--chrome);color:var(--ink2); font-weight:600;font-size:12.5px;cursor:pointer;flex:none;white-space:nowrap} .btn svg,.btn-ghost svg,.btn-primary svg{width:15px;height:15px;flex:none} .btn-ghost:hover,.btn:hover{color:var(--ink);border-color:var(--field-bd)} .btn-primary{border:0;background:var(--signal);color:var(--on-signal);font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} .btn-primary:hover{background:var(--signal-deep);color:var(--on-signal)} .icon-btn{width:var(--ctl-h);height:var(--ctl-h);display:inline-flex;align-items:center;justify-content:center; padding:0;flex:none;border-radius:var(--r-pill);border:1px solid var(--bd);background:var(--chrome); color:var(--ink2);cursor:pointer} .icon-btn:hover{color:var(--ink);border-color:var(--field-bd)} .icon-btn svg{width:17px;height:17px} .theme-toggle .icon-sun{display:none} [data-theme="dark"] .theme-toggle .icon-moon{display:none} [data-theme="dark"] .theme-toggle .icon-sun{display:block} #syncBadge{font-family:var(--font-mono)!important;font-size:10px!important;letter-spacing:.08em; text-transform:uppercase;font-weight:500!important} input[type=text],input[type=search],input[type=password],select,textarea{ height:var(--ctl-h);padding:0 13px;border-radius:var(--r-field);border:1px solid var(--field-bd); background:var(--surface);color:var(--ink);font-size:13px;outline:none;box-shadow:inset 0 1px 2px var(--shadow)} textarea{height:auto;padding:10px 13px} input:focus,select:focus,textarea:focus{border-color:var(--signal)} input::placeholder{color:var(--mut2)} /* Suchfeld */ .search{position:relative;margin-bottom:14px} .search input{width:100%;height:42px;padding-left:42px;border-radius:var(--r-pill);border-color:var(--bd)} .search .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--mut);display:flex} .search .ic svg{width:15px;height:15px} /* Segmentierter Schalter */ .seg{display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--sunken);border:1px solid var(--bd)} .seg button{border:0;background:transparent;color:var(--mut);cursor:pointer;white-space:nowrap; height:calc(var(--ctl-h) - 8px);padding:0 13px;border-radius:var(--r-pill); font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase} .seg button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)} /* Sektionslabel mit Haarlinie */ .sec{display:flex;align-items:center;gap:9px;margin:22px 0 11px; font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--mut)} .sec::after{content:"";flex:1;height:1px;background:var(--bd)} /* Chips / Badges */ .badge{font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--mut);background:var(--sunken);border-radius:4px;padding:2px 7px} .badge.signal{color:var(--signal-deep);background:var(--signal-soft)} /* Banner / Hinweise */ .banner{background:var(--signal-soft);border:1px solid var(--signal);color:var(--signal-deep); border-radius:12px;padding:12px 14px;font-size:12.5px;margin-bottom:18px} .banner a{color:var(--signal-deep);text-decoration:underline;font-weight:600;cursor:pointer} .empty{color:var(--mut);font-size:13.5px;padding:34px 4px;text-align:center} .edit-hint{display:none;font-size:12px;line-height:1.55;color:var(--ink2);background:var(--sunken2); border:1px dashed var(--bd);border-radius:12px;padding:11px 13px;margin-bottom:14px} .editing-mode .edit-hint{display:block} /* Modal */ .modal-overlay{position:fixed;inset:0;background:rgba(27,22,19,.55);display:none;align-items:flex-start; justify-content:center;padding:max(24px,env(safe-area-inset-top)) 16px 40px;z-index:100;overflow-y:auto} .modal-overlay.open{display:flex} [data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.68)} .modal{background:var(--surface);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--shadow-modal); width:100%;max-width:480px;margin-top:4vh;animation:modalIn .16s ease} @keyframes modalIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .modal-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--bd-soft); position:sticky;top:0;background:var(--surface);border-radius:16px 16px 0 0} .modal-head h2{flex:1;font-size:14px} .modal-close{width:28px;height:28px;border:0;border-radius:8px;background:var(--sunken);color:var(--mut); font-size:18px;line-height:1;cursor:pointer} .modal-close:hover{background:var(--sunken2);color:var(--ink)} .cfg-body{padding:16px 18px 20px} .cfg-body label{display:block;margin-bottom:7px;font-family:var(--font-mono);font-weight:500;font-size:9.5px; letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} .cfg-body input{width:100%} /* Blanke Buttons im Modalkörper sind Primäraktionen — egal wie tief verschachtelt. Ausgenommen wird nach Komponenten-Zugehörigkeit, nicht nach Baumtiefe. .vs-ac-s1 = eine Farbkachel des Farbwählers: sie trägt ihre Farbe im Punkt und muss neutral bleiben, sonst stünden dort zehn ausgefüllte Primärknöpfe. */ .cfg-body button:not(.seg *):not(.v-switch):not(.v-check):not(.btn):not(.btn-ghost):not(.btn-primary):not(.icon-btn):not(.modal-close):not(.neutral):not(.vs-ac-s1){ margin-top:10px;height:var(--ctl-h);padding:0 16px;border:0;border-radius:var(--r-pill); background:var(--signal);color:var(--on-signal);font-size:12.5px;font-weight:700;cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} .cfg-body button:not(.seg *):not(.v-switch):not(.v-check):not(.btn):not(.btn-ghost):not(.btn-primary):not(.icon-btn):not(.modal-close):not(.neutral):not(.vs-ac-s1):hover{background:var(--signal-deep)} .cfg-body button.neutral{margin-top:10px;height:var(--ctl-h);padding:0 16px;border:1px solid var(--bd); border-radius:var(--r-pill);background:var(--chrome);color:var(--ink2);font-size:12.5px;font-weight:600; cursor:pointer;box-shadow:none} .cfg-body button.neutral:hover{color:var(--ink);border-color:var(--field-bd)} .cfg-body .ok{color:var(--ok);font-size:12px;margin-left:10px;font-family:var(--font-mono)} .cfg-body .cfg-sep{border:0;border-top:1px solid var(--bd-soft);margin:18px 0} .cfg-body .note{color:var(--mut);font-size:11.5px;line-height:1.5;margin-top:9px} .cfg-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} /* ===================== Launcher (body.hub) ===================== */ .hub{padding:max(22px,env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))} .hub .wrap{max-width:820px;margin:0 auto} .hub .top{display:flex;align-items:center;gap:8px;margin-bottom:6px} .hub .top h1{margin-right:2px} .hub .top .stripe{margin-right:auto} .hub .viewbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px} .hub .viewbar .segs{display:flex;gap:8px;flex-wrap:wrap} .hub .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:var(--gap)} [data-density="compact"] .hub .grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))} .hub a.card{display:flex;flex-direction:column;gap:8px;padding:var(--pad-card);border-radius:var(--r-card); background:var(--surface);border:1px solid var(--bd);color:var(--ink); box-shadow:var(--inset-hi),var(--shadow-card);transition:transform .12s,border-color .12s,box-shadow .12s} .hub a.card:hover{border-color:var(--signal);transform:translateY(-1px);box-shadow:var(--shadow-lift)} .hub a.card:active{transform:translateY(0)} .hub a.card .icon{width:30px;height:30px;border-radius:var(--r-pill);background:var(--signal-soft); color:var(--signal-deep);display:flex;align-items:center;justify-content:center} .hub a.card .icon svg{width:17px;height:17px} .hub a.card .t{font-weight:600;font-size:var(--fs-title);line-height:1.25} .hub a.card .g{font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--mut2)} [data-density="compact"] .hub a.card .g{display:none} /* Kompakt-Ansicht: Gruppenkarten mit Chips */ .hub .cg{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-card); margin-bottom:10px;box-shadow:var(--inset-hi),var(--shadow-card)} .hub .cg-head{display:flex;align-items:center;gap:9px;padding:12px 14px;cursor:pointer;user-select:none;-webkit-user-select:none} .hub .cg-head .chev{color:var(--mut);font-size:10px;width:12px;text-align:center;transition:transform .15s} .hub .cg.closed .cg-head .chev{transform:rotate(-90deg)} .hub .cg-title{flex:1;min-width:0;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hub .cg-count{flex:none;font-family:var(--font-mono);font-weight:500;font-size:10.5px;color:var(--mut); background:var(--sunken);border:1px solid var(--bd);border-radius:var(--r-pill);padding:1px 9px} .hub .cg-act{display:none;gap:4px;flex:none} .hub.editing-mode .cg-act{display:inline-flex} .hub .cg-act button{min-width:28px;height:28px;padding:0 7px;border:1px solid var(--bd);background:var(--chrome); color:var(--ink2);border-radius:8px;cursor:pointer;font-family:var(--font-mono);font-size:10px; letter-spacing:.06em;text-transform:uppercase} .hub .cg-act button:hover{color:var(--ink);border-color:var(--field-bd)} .hub .cg-act button.gdel:hover{color:var(--danger);border-color:var(--danger)} .hub .cg-body{display:flex;flex-wrap:wrap;gap:8px;padding:2px 14px 14px;min-height:20px} .hub .cg.closed .cg-body{display:none} .hub .cg.ghidden{border-style:dashed;opacity:.6} .hub .cg.ghidden .cg-title{text-decoration:line-through} .hub a.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:var(--r-pill); border:1px solid var(--bd);background:var(--sunken2);color:var(--ink);font-size:12.5px;font-weight:600; line-height:1.2;max-width:100%} .hub a.chip:hover{border-color:var(--signal);color:var(--ink)} .hub a.chip .ci{flex:none;display:flex;color:var(--signal-deep)} .hub a.chip .ci svg{width:15px;height:15px} .hub a.chip .cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hub a.chip .chip-btn{display:none;align-items:center;justify-content:center;width:21px;height:21px; margin:-2px -5px -2px 2px;padding:0;border:0;border-radius:50%;background:var(--sunken);color:var(--mut); cursor:pointer;flex:none} .hub a.chip .chip-btn svg{width:11px;height:11px} .hub.editing-mode a.chip{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .hub.editing-mode a.chip .chip-btn{display:inline-flex} .hub a.chip .chip-hide:hover{background:var(--danger);color:#FFF9F2} .hub a.chip .chip-pin:hover{background:var(--ok);color:#FFF9F2} .hub a.chip .chip-pin.on{background:var(--signal-soft);color:var(--signal-deep)} .hub a.chip.drag-src{opacity:.35;border-style:dashed} .chip-ghost{position:fixed;left:0;top:0;z-index:999;pointer-events:none;opacity:.94;box-shadow:var(--shadow-lift)} .hub .cg.hiddengrp{border-style:dashed;background:transparent;box-shadow:none} .hub .cg.hiddengrp .cg-head{cursor:default} .hub .cg.hiddengrp a.chip{opacity:.6;cursor:pointer;touch-action:auto} .hub .cg.hiddengrp a.chip:hover{opacity:1;border-color:var(--ok)} .hub .addgrp{display:none;gap:8px;align-items:center;border:1px dashed var(--bd);border-radius:var(--r-card); padding:10px 14px;margin-bottom:12px} .hub.editing-mode .addgrp{display:flex} .hub .addgrp input{flex:1;min-width:0} .hub .addgrp button{height:var(--ctl-h);padding:0 15px;border:0;border-radius:var(--r-pill);background:var(--signal); color:var(--on-signal);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} #editBtn.on{border-color:var(--signal);color:var(--signal-deep)} @media (max-width:520px){ .hub .top{flex-wrap:wrap} .hub .top .stripe{order:9;flex-basis:100%;margin:2px 0 0} .hub .grid{grid-template-columns:repeat(2,1fr)} } /* ============================================================ KOMPONENTEN-EBENE — Bausteine für alle Vault-Apps. Klassen sind mit v- geprefixt und kollidieren nicht mit bestehendem App-CSS. Referenz-Umsetzung: vault-master.html ============================================================ */ /* --- App-Rahmen: Sidebar + Inhalt (Desktop) --- */ .v-app{display:flex;min-height:100vh} .v-side{box-sizing:border-box;width:212px;flex:none;padding:18px 14px;background:var(--sunken); border-right:1px solid var(--bd);display:flex;flex-direction:column;gap:4px} .v-side .label{margin:14px 0 6px} .v-side .label:first-of-type{margin-top:4px} .v-nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-field); color:var(--ink2);font-size:12.5px;font-weight:500;cursor:pointer;text-decoration:none} .v-nav-item svg{width:15px;height:15px;flex:none} .v-nav-item .n{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;color:var(--mut)} .v-nav-item:hover{background:var(--sunken2);color:var(--ink)} .v-nav-item.active{background:var(--signal);color:var(--on-signal);font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} .v-nav-item.active .n{color:var(--on-signal);opacity:.85} .v-main{flex:1;min-width:0;padding:20px 24px 28px} .v-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;row-gap:10px;margin-bottom:16px} .v-head .v-title{min-width:0;flex:1 1 auto} .v-head .v-title h1{font-size:22px} .v-head .sub{font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--mut2);margin-top:5px} .v-head .spacer{flex:1 1 0;min-width:0} /* --- Karte / Panel --- */ .v-card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-card); padding:var(--pad-card);box-shadow:var(--shadow-card)} .v-card.flat{box-shadow:none} .v-hr{border:0;border-top:1px solid var(--bd-soft);margin:16px 0} /* --- Statuspunkt --- */ .v-dot{width:6px;height:6px;border-radius:50%;background:var(--mut);flex:none;display:inline-block} .v-dot.ok{background:var(--ok)} .v-dot.warn{background:var(--warn)} .v-dot.bad{background:var(--danger)} .v-dot.signal{background:var(--signal)} .v-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:500; font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)} .v-status.ok{color:var(--ok)} .v-status.warn{color:var(--warn)} .v-status.bad{color:var(--danger)} /* --- Schalter --- */ .v-switch{width:44px;height:26px;flex:none;border:0;padding:3px;border-radius:var(--r-pill); background:var(--bd);display:flex;align-items:center;cursor:pointer;box-shadow:inset 0 1px 2px var(--shadow)} .v-switch i{width:20px;height:20px;border-radius:50%;background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.18);transition:transform .14s} .v-switch[aria-checked="true"]{background:var(--signal)} .v-switch[aria-checked="true"] i{transform:translateX(18px)} /* --- Runder Check (Tasks) --- */ .v-check{width:22px;height:22px;flex:none;border:2px solid var(--field-bd);border-radius:50%; background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center} .v-check svg{width:0;height:0} .v-check:hover{border-color:var(--signal)} .v-check[aria-checked="true"]{background:var(--ok);border-color:var(--ok)} .v-check[aria-checked="true"] svg{width:13px;height:13px;stroke:var(--surface);stroke-width:2.8} [data-density="compact"] .v-check{width:18px;height:18px} [data-density="compact"] .v-check[aria-checked="true"] svg{width:11px;height:11px} /* --- Task-Zeile / Task-Karte --- */ .v-task{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--bd); border-radius:var(--r-card);padding:var(--pad-card);box-shadow:var(--shadow-card)} .v-task.due{border-left:3px solid var(--signal)} .v-task .tt{font-weight:600;font-size:var(--fs-title);line-height:1.35;color:var(--ink)} .v-task .td{font-size:12px;line-height:1.45;color:var(--ink2);margin-top:5px} .v-task .tm{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .v-task.done .tt{color:var(--mut);text-decoration:line-through;font-weight:500} .v-task.done .td{display:none} [data-density="compact"] .v-task{border-radius:0;border-width:0 0 1px 0;box-shadow:none;background:transparent; align-items:center;padding:7px 2px;gap:8px} [data-density="compact"] .v-task .td{display:none} [data-density="compact"] .v-task .tm{margin:0 0 0 auto} /* --- Board --- */ .v-board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:6px} .v-col{box-sizing:border-box;width:270px;flex:none;background:var(--sunken);border:1px solid var(--bd); border-radius:var(--r-card);padding:11px;display:flex;flex-direction:column;gap:8px} .v-col-head{display:flex;align-items:center;gap:8px;margin-bottom:2px} .v-col-head .k{width:9px;height:9px;border-radius:2px;background:var(--mut);flex:none} .v-col-head .t{font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink2)} .v-col-head .c{margin-left:auto;font-family:var(--font-mono);font-weight:500;font-size:10.5px;color:var(--mut); background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-pill);padding:1px 9px} .v-add{padding:9px;border:1px dashed var(--field-bd);border-radius:var(--r-field);background:transparent; color:var(--mut2);cursor:pointer;font-family:var(--font-mono);font-weight:500;font-size:11px; letter-spacing:.08em;text-transform:uppercase} .v-add:hover{border-color:var(--signal);color:var(--signal-deep)} /* --- Tabelle --- */ .v-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--bd); border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card)} .v-table thead th{text-align:left;padding:10px 16px;background:var(--sunken2);border-bottom:1px solid var(--bd); font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} .v-table td{padding:12px 16px;border-bottom:1px solid var(--bd-soft);font-size:13px;color:var(--ink)} .v-table tbody tr:last-child td{border-bottom:0} .v-table tbody tr:hover td{background:var(--sunken2)} .v-table .num,.v-table th.num{text-align:right;font-family:var(--font-mono);font-weight:500} .v-table .date{font-family:var(--font-mono);font-weight:500;font-size:11.5px;color:var(--mut)} .v-table .name{font-weight:600} .v-table tfoot td{padding:12px 16px;background:var(--sunken2);border-top:1px solid var(--bd); font-family:var(--font-mono);font-weight:500} [data-density="compact"] .v-table td{padding:7px 12px} [data-density="compact"] .v-table thead th{padding:7px 12px} /* --- Instrument (Rundanzeige) --- */ .v-gauge{--val:0;--col:var(--signal);width:118px;height:118px;border-radius:50%;flex:none; background:conic-gradient(var(--col) 0 calc(var(--val) * 1%),var(--sunken) calc(var(--val) * 1%) 100%); display:flex;align-items:center;justify-content:center} .v-gauge > span{width:88px;height:88px;border-radius:50%;background:var(--surface);display:flex; flex-direction:column;align-items:center;justify-content:center;text-align:center} .v-gauge .g-v{font-family:var(--font-mono);font-weight:500;font-size:27px;line-height:1;color:var(--ink)} .v-gauge .g-v small{font-size:14px;color:var(--mut2)} .v-gauge .g-l{font-family:var(--font-mono);font-weight:500;font-size:8.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--mut2);margin-top:3px} .v-metric{display:flex;flex-direction:column;align-items:center;gap:10px} .v-metric .cap{font-family:var(--font-mono);font-weight:500;font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--mut)} .v-big{font-family:var(--font-mono);font-weight:500;font-size:30px;line-height:1;color:var(--ink)} .v-big small{font-size:15px;color:var(--mut)} .v-bars{display:flex;align-items:flex-end;gap:5px;height:64px} .v-bars i{flex:1;background:var(--bd);border-radius:2px;display:block} .v-bars i.on{background:var(--signal)} .v-streak{display:grid;grid-template-columns:repeat(14,1fr);gap:4px} .v-streak i{height:26px;border-radius:4px;background:var(--sunken);display:block} .v-streak i.on{background:var(--signal)} .v-streak i.half{background:var(--signal-soft)} .v-prog{height:5px;border-radius:3px;background:var(--sunken);overflow:hidden} .v-prog i{display:block;height:100%;background:var(--signal)} /* --- Editor / Notiz --- */ .v-doc{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r-card); padding:20px 22px;box-shadow:var(--shadow-card);max-width:72ch} .v-doc p{margin:9px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink2);text-wrap:pretty} .v-doc h2{margin-top:0} .v-doc mark{background:rgba(201,138,22,.16);color:inherit;padding:1px 4px;border-radius:3px} [data-theme="dark"] .v-doc mark{background:rgba(219,168,58,.2)} .v-quote{margin-top:14px;padding:12px 14px;border-left:3px solid var(--signal);background:var(--sunken2); border-radius:0 var(--r-field) var(--r-field) 0;font-size:13px;line-height:1.6;color:var(--ink2);font-style:italic} .v-wikilink{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-pill); border:1px solid var(--bd);background:var(--sunken);color:var(--ink2);font-size:11.5px;font-weight:500} .v-wikilink svg{width:13px;height:13px;color:var(--signal-deep)} .v-wikilink:hover{border-color:var(--signal);color:var(--ink)} .v-tick{display:flex;gap:10px;align-items:center;padding:3px 0;font-size:13px;color:var(--ink)} .v-tick i{width:16px;height:16px;flex:none;border:1.7px solid var(--field-bd);border-radius:4px;display:block} .v-tick.on{color:var(--mut);text-decoration:line-through} .v-tick.on i{background:var(--ok);border-color:var(--ok)} /* --- Login --- */ .v-login{max-width:420px;margin:0 auto;background:var(--surface);border:1px solid var(--bd); border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-lift)} .v-login-top{position:relative;overflow:hidden;background:var(--signal);padding:32px 30px 28px;color:var(--on-signal)} .v-login-top .grille{position:absolute;left:0;right:0;bottom:0;height:104px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 3px,transparent 3px 9px)} .v-login-top h1{position:relative;font-size:40px;font-weight:900;font-stretch:122%;letter-spacing:-.02em;color:var(--on-signal)} .v-login-top h1 .dot{color:var(--ink)} [data-theme="dark"] .v-login-top h1 .dot{color:#151210} .v-login-top .stripe{position:relative;margin-top:12px} .v-login-top .stripe i{height:4px;background:var(--on-signal)} .v-login-top .stripe i:first-child{width:52px} .v-login-top .stripe i+i{width:20px} .v-login-top .sub{position:relative;margin-top:14px;font-family:var(--font-mono);font-weight:500;font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--on-signal);opacity:.82} .v-login-body{padding:24px 30px 28px} .v-login-body .btn-primary{width:100%;justify-content:center;height:46px;border-radius:12px;font-size:14px} /* --- Mobile Bottom-Nav --- */ .v-tabbar{display:flex;gap:4px;padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:var(--sunken);border-top:1px solid var(--bd)} .v-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0; border:0;border-radius:var(--r-field);background:transparent;color:var(--mut);cursor:pointer} .v-tab svg{width:19px;height:19px} .v-tab span{font-family:var(--font-mono);font-weight:600;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase} .v-tab.active{background:var(--signal-soft);color:var(--signal-deep)} /* Hit-Targets: mobil nie unter 44 px */ @media (max-width:520px){ .v-app{flex-direction:column} .v-side{width:100%;border-right:0;border-bottom:1px solid var(--bd)} .v-main{padding:16px} .btn,.btn-ghost,.btn-primary,.icon-btn{min-height:44px} .v-check{width:26px;height:26px} .v-col{width:100%} }