/* ============================================================ VINTEGO Qualitätsmanagement Helper — visuelles Theme Modern, neutral, mit Grün nur als dezenter Marken-Akzent. Unterstützt automatischen Dark Mode (prefers-color-scheme). Basiert auf Bootstrap 5 (siehe ). Alle IDs/Klassen, die assets/app.js per JS erzeugt oder anspricht, bleiben unverändert. ============================================================ */ :root{ color-scheme: light dark; /* --- Neutrale Oberflächen (Light) --- */ --ink: #1c1e21; --ink-soft: #666b73; --paper: #f7f7f8; --panel: #ffffff; --line: #e5e6e9; --line-soft: #edeef0; --shadow-sm: 0 1px 2px rgba(20,20,22,.05); --shadow: 0 10px 28px -10px rgba(20,20,22,.16); /* --- Vintego-Grün: nur als Akzent, nicht als Fläche --- */ --accent: #8bbf55; /* Fläche: Buttons/Badges */ --accent-hover: #79ab46; /* Hover auf Akzentflächen */ --accent-text: #4f7a2c; /* Grüner Text auf hellem Grund (Links etc.) */ --accent-soft: #eef4e6; /* Sehr dezente Tönung für Fokus/Badges */ --accent-contrast: #16240c; /* Text auf grüner Fläche */ --danger-bg: #fbe9e9; --danger-text: #b23b3b; /* --- Chrome: Topnav & Sidebar folgen jetzt dem Light/Dark-Theme --- */ --chrome-bg-1: #ffffff; --chrome-bg-2: #f2f2f3; --chrome-text: #1c1e21; --chrome-text-soft: #666b73; --chrome-hover: rgba(0,0,0,.05); --chrome-line: rgba(0,0,0,.08); --mono: "IBM Plex Mono","SFMono-Regular",Consolas,monospace; --sans: "IBM Plex Sans","Segoe UI",Arial,sans-serif; --radius: .75rem; --radius-sm: .5rem; } @media (prefers-color-scheme: dark){ :root{ --ink: #e8e9eb; --ink-soft: #9a9ea6; --paper: #101113; --panel: #1b1c1f; --line: #2b2d31; --line-soft: #26282c; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 12px 28px -10px rgba(0,0,0,.55); --accent: #8bbf55; --accent-hover: #9dcd6b; --accent-text: #a7d97b; --accent-soft: rgba(139,191,85,.14); --accent-contrast: #12200a; --danger-bg: rgba(214,100,100,.16); --danger-text: #e59a9a; /* --- Chrome im Dark Mode wieder dunkel --- */ --chrome-bg-1: #1b1c1f; --chrome-bg-2: #101113; --chrome-text: #eceded; --chrome-text-soft: #9a9ea6; --chrome-hover: rgba(255,255,255,.07); --chrome-line: rgba(255,255,255,.09); } } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:var(--sans); background:var(--paper); color:var(--ink); } /* Bootstrap arbeitet intern mit eigenen CSS-Variablen (--bs-body-color, --bs-table-color, --bs-btn-color, ...), die unabhängig von unserem Theme sind und sonst weiterhin dunklen Text liefern würden, auch wenn der Hintergrund im Dark Mode dunkel ist. Hier auf unsere Variablen umbiegen, damit wirklich überall die richtige Textfarbe verwendet wird. */ :root, [data-bs-theme]{ --bs-body-color: var(--ink); --bs-body-bg: var(--paper); --bs-border-color: var(--line); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--ink-soft); --bs-tertiary-bg: var(--panel); --bs-table-color: var(--ink); --bs-table-bg: transparent; --bs-table-border-color: var(--line-soft); --bs-btn-color: var(--ink); --bs-btn-bg: var(--panel); --bs-btn-border-color: var(--line); } .form-control,.form-select{ color:var(--ink); background-color:var(--panel); border-color:var(--line); } .form-control:focus,.form-select:focus{ color:var(--ink); background-color:var(--panel); } .table,.table>:not(caption)>*>*{color:var(--ink);} /* ---------- Topnav ---------- */ .topnav{ display:flex;align-items:center;justify-content:space-between; height:64px;padding:0 24px; background:linear-gradient(180deg, var(--chrome-bg-1) 0%, var(--chrome-bg-2) 100%); box-shadow:0 2px 14px rgba(0,0,0,.18); position:sticky;top:0;z-index:20; } .topnav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;} .topnav-brand img{height:30px;width:auto;display:block;} .topnav-title{color:var(--chrome-text);font-size:13.5px;font-weight:600;letter-spacing:.01em;} .topnav-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap;} .topnav-who{font-size:12.5px;color:var(--chrome-text);display:flex;align-items:center;} .topnav-who .who{font-weight:600;} .topnav-who .sep{color:var(--chrome-text-soft);margin:0 6px;} .topnav-who .role-badge{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--chrome-text-soft);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:20px;font-weight:600;border:1px solid var(--chrome-line);} .topnav-links{display:flex;align-items:center;gap:2px;} .topnav-links a{ color:var(--chrome-text-soft);text-decoration:none;font-size:13px;font-weight:500;padding:7px 12px;border-radius:20px; transition:background .15s ease, color .15s ease; } .topnav-links a:hover{background:var(--chrome-hover);color:var(--chrome-text);} .topnav-links a.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600;} /* ---------- App-Shell (Sidebar + Main, unterhalb der Topnav) ---------- */ .app-shell{display:flex;min-height:calc(100vh - 64px);} .hoooonk-wordart { display: inline-block; font-family: "Comic Sans MS", "Trebuchet MS", cursive; font-size: 14px; font-weight: 700; line-height: 1; color: var(--accent); letter-spacing: 1px; opacity: 0.68; transform: rotate(-6deg) scaleX(1.08); text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 rgba(0, 0, 0, 0.08); user-select: none; pointer-events: none; animation: hoooonkWiggle 5s ease-in-out infinite; } @keyframes hoooonkWiggle { 0%, 100% { transform: rotate(-6deg) translateY(0); opacity: 0.65; } 45% { transform: rotate(-6deg) translateY(0); opacity: 0.65; } 48% { transform: rotate(-8deg) translateY(-1px); opacity: 0.78; } 52% { transform: rotate(-3deg) translateY(0); opacity: 0.82; } 56% { transform: rotate(-6deg) translateY(0); opacity: 0.68; } } /* ---------- Sidebar ---------- */ #sidebar{ width:272px; flex:0 0 272px; background:linear-gradient(180deg, var(--chrome-bg-1) 0%, var(--chrome-bg-2) 100%); color:var(--chrome-text); padding:22px 16px; position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto; box-shadow: 2px 0 16px rgba(0,0,0,.14); } .nav-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--chrome-text-soft);margin:14px 0 8px;padding:0 8px;} .nav-btn{ display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent; border:none;border-left:3px solid transparent;color:var(--chrome-text-soft);padding:9px 10px;border-radius:var(--radius-sm);font-size:13.5px;cursor:pointer; margin-bottom:1px;font-family:var(--sans);transition:background .15s ease, color .15s ease; } .nav-btn .ic{font-size:16px;width:20px;text-align:center;} .nav-btn:hover{background:var(--chrome-hover);color:var(--chrome-text);} .nav-btn.active{background:var(--accent-soft);color:var(--accent-text);font-weight:600;border-left-color:var(--accent);} #sidebar-footer{margin-top:24px;padding-top:14px;border-top:1px solid var(--chrome-line);font-size:11px;color:var(--chrome-text-soft);line-height:1.6;} /* ---------- Main ---------- */ #main{flex:1;padding:36px 44px 80px;max-width:960px;} #topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px;gap:20px;flex-wrap:wrap;} #topbar .titles h2{margin:0 0 4px;font-size:24px;letter-spacing:-.01em;font-weight:650;color:var(--ink);} #topbar .titles p{margin:0;color:var(--ink-soft);font-size:13.5px;} .btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;} button.action{ font-family:var(--sans);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:var(--radius-sm); border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; } button.action:hover{border-color:var(--ink-soft);box-shadow:var(--shadow);transform:translateY(-1px);} button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);} button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);} button.action:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;} button.action i{margin-right:5px;} #btn-check-warranty{margin-top:2px;} /* Code-Leiste: aktueller Code + Code-Eingabe zum Laden */ .code-bar{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin-bottom:18px; box-shadow: var(--shadow-sm); } .code-bar .current-code{font-size:13.5px;color:var(--ink-soft);} .code-bar .current-code .code-value{ font-family:var(--mono); font-weight:700; letter-spacing:.06em; background:var(--accent-soft); color:var(--accent-text); padding:4px 12px; border-radius:20px; margin-left:6px; } .code-bar .load-group{display:flex; gap:8px; align-items:center; margin-left:auto;} .code-bar .load-group input{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; width:130px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; font-size:14px; background:var(--panel); color:var(--ink); } .code-bar .load-group input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);} .status-msg{font-size:12.5px;margin-top:2px;font-weight:600;min-height:1em;} .status-msg.ok{color:var(--accent-text);} .status-msg.err{color:var(--danger-text);} .meta-bar{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px; background:var(--panel); border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:26px; box-shadow: var(--shadow-sm); } .meta-bar label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);display:block;margin-bottom:5px;font-weight:600;} .meta-bar input{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;font-family:var(--sans);font-size:13.5px;background:var(--paper);color:var(--ink);} .meta-bar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--panel);} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-sm);} .card h3{margin:0 0 16px;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:10px;font-weight:700;} .field{margin-bottom:14px;} .field:last-child{margin-bottom:0;} .field label{display:block;font-size:13.5px;margin-bottom:5px;color:var(--ink);font-weight:500;} .field input[type=text],.field input[type=date],.field textarea{ width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;font-family:var(--sans); font-size:14px;background:var(--panel);color:var(--ink);transition:border-color .15s ease, box-shadow .15s ease; } .field textarea{min-height:70px;resize:vertical;} .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .check-row{display:flex;align-items:center;gap:9px;padding:8px 4px;border-radius:var(--radius-sm);border-bottom:1px dashed var(--line-soft);font-size:14px;transition:background .12s ease;} .check-row:hover{background:var(--paper);} .check-row:last-child{border-bottom:none;} .check-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto;} .check-row label{flex:1;cursor:pointer;} .checktext-row{display:flex;align-items:center;gap:9px;padding:8px 4px;border-bottom:1px dashed var(--line-soft);flex-wrap:wrap;border-radius:var(--radius-sm);transition:background .12s ease;} .checktext-row:hover{background:var(--paper);} .checktext-row:last-child{border-bottom:none;} .checktext-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);} .checktext-row .ct-label{font-size:14px;min-width:150px;} .checktext-row input[type=text]{flex:1;min-width:160px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 9px;font-size:13.5px;font-family:var(--sans);background:var(--panel);color:var(--ink);} .checktext-row input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .radio-group,.checkbox-group{display:flex;flex-wrap:wrap;gap:10px 20px;} .radio-group label,.checkbox-group label{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;} .radio-group input,.checkbox-group input{accent-color:var(--accent);width:16px;height:16px;} .hint{font-size:12.5px;color:var(--ink-soft);margin-top:14px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:11px 14px;} /* Garantiestatus-Karte */ .warranty-result{margin-top:12px;} .warranty-result .p-row{display:flex;gap:8px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed var(--line-soft);} .warranty-result .p-row:last-child{border-bottom:none;} .warranty-result .p-lab{font-weight:600;min-width:150px;color:var(--ink-soft);} .warranty-status{font-weight:700;padding:3px 11px;border-radius:20px;font-size:12px;} .warranty-status.ok{background:var(--accent-soft);color:var(--accent-text);} .warranty-status.err{background:var(--danger-bg);color:var(--danger-text);} .hint-inline{font-size:13px;color:var(--ink-soft);margin:0;} .hint-inline.err{color:var(--danger-text);} #print-area{display:none;} /* ---------- Print (bleibt bewusst hell/papierfarben) ---------- */ @media print{ body *{visibility:hidden;} #print-area, #print-area *{visibility:visible;} #print-area{display:block;position:absolute;top:0;left:0;width:100%;padding:0;font-family:var(--sans);color:#000;background:#fff;} @page{size: A4 portrait; margin: 16mm 14mm;} .p-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px;gap:12px;} .p-header h1{font-size:19px;margin:0;} .p-header .p-meta{font-size:11px;text-align:right;color:#333;} .p-code{ float:right; text-align:center; margin:0 0 6px 14px; clear:none; border:2px solid #000; border-radius:8px; padding:8px 14px; } .p-code .p-code-label{font-size:8px;color:#555;text-transform:uppercase;letter-spacing:.05em;} .p-code .p-code-value{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:.12em;} .p-code img{width:88px;height:88px;display:block;margin:6px auto 0;} .p-section{margin-bottom:14px; break-inside:avoid;} .p-section h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #999;padding-bottom:4px;margin:0 0 7px;} .p-row{font-size:12.5px;padding:3px 0;display:flex;gap:6px;} .p-row .p-box{font-family:var(--mono);} .p-row .p-lab{flex:0 0 auto;} .p-row .p-val{border-bottom:1px dotted #888;flex:1;padding-left:4px;min-height:14px;} .p-footer{margin-top:18px;padding-top:8px;border-top:1px solid #999;font-size:10.5px;color:#444;} } /* ---------- Responsive ---------- */ @media (max-width: 900px){ .topnav{flex-wrap:wrap;height:auto;padding:12px 18px;gap:10px;position:static;} .topnav-right{width:100%;justify-content:space-between;} .app-shell{flex-direction:column;min-height:auto;} #sidebar{width:100%;flex:0 0 auto;height:auto;position:relative;top:0;} #main{max-width:100%;padding:24px 20px 60px;} .meta-bar{grid-template-columns:1fr;} } /* ============================================================ Sekundäre Seiten (Übersicht / Geräte-Suche): volle Breite. ============================================================ */ .page-wrap{padding:36px 44px 60px;max-width:1300px;margin:0 auto;} .page-wrap h1{font-size:22px;margin:0 0 6px;font-weight:650;color:var(--ink);} .page-wrap .backlink{ font-size:13px;margin-bottom:20px;display:inline-flex;align-items:center;gap:6px; color:var(--ink-soft);text-decoration:none;font-weight:600; } .page-wrap .backlink:hover{color:var(--accent-text);} .page-wrap p.sub{color:var(--ink-soft);font-size:13.5px;margin-top:0;margin-bottom:22px;} .page-wrap p.sub a{color:var(--accent-text);font-weight:600;text-decoration:none;} .page-wrap p.sub a:hover{text-decoration:underline;} .filter-card{ background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:18px 18px 14px;margin-bottom:20px;box-shadow:var(--shadow-sm); } .filter-card label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700;display:block;margin-bottom:4px;} .filter-card .form-control,.filter-card .form-select{ border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13.5px; background:var(--paper);color:var(--ink); } .filter-card .form-control:focus,.filter-card .form-select:focus{ border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--panel);color:var(--ink); } .filter-card .btn-search{ background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);font-weight:600; border-radius:var(--radius-sm); } .filter-card .btn-search:hover{background:var(--accent-hover);border-color:var(--accent-hover);} .filter-card .btn-reset-filter{ border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink-soft);font-weight:600; } .filter-card .btn-reset-filter:hover{border-color:var(--ink-soft);color:var(--ink);} .result-count{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;} .data-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm);} .data-card table{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink);} .data-card th,.data-card td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink);} .data-card th{color:var(--ink-soft);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line);} .data-card tbody tr:hover td{background:var(--paper);} .data-card .empty{color:var(--ink-soft);font-size:13.5px;padding:20px 0;} .data-card .muted{color:var(--ink-soft);opacity:.75;} .code-badge{ font-family:var(--mono);font-weight:700;letter-spacing:.05em; background:var(--accent-soft);color:var(--accent-text);padding:3px 10px;border-radius:20px;text-decoration:none; } .code-badge:hover{background:var(--accent);color:var(--accent-contrast);} .form-badge{font-size:11px;font-weight:600;background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);padding:3px 10px;border-radius:20px;white-space:nowrap;}