/* Google-Fonts-Import entfernt (DSGVO, CLAUDE.md). System-Fallbacks unten in --mono/--display/--body — auf macOS „SF Pro", Windows „Segoe UI", Linux „DejaVu". Bei Bedarf später lokal selfhosten: fonts/JetBrains-Mono.woff2 + Syne + Inter via @font-face. */ /* ============================================================ Control Center — Design-Tokens (Logo-basiert). Werte synchron zu RBK/WBK/MBK. Default jetzt LIGHT-Mode mit Logo-Farben — Dark-Mode bleibt verfügbar via .dark auf . ============================================================ */ :root { /* Brand (Weinzierl-Logo) */ --brand: #1F3D7E; --brand2: #2E64BC; --brand-accent: #3CB4E0; /* Aktion-Buttons (gelb, einheitlich plattform-weit) */ --button-bg: #F5C425; --button-hover: #E0B11A; --button-text: #1F3D7E; /* Surface (Light-Default) */ --bg: #FAFAF6; --surface: #FFFFFF; --card: #FFFFFF; --border: #E2E2DA; --text: #3F4853; --muted: #A0A8B0; /* Status (rot/gelb/grün) */ --green: #22C55E; --red: #EF4444; --amber: #F59E0B; /* Fonts */ --mono: 'JetBrains Mono', monospace; --display: 'Syne', sans-serif; --body: 'Inter', sans-serif; } /* Dark-Theme (Cyberpunk-Look des CC bleibt als Option erhalten) */ html.dark { --bg: #0F1520; --surface: #1E2530; --card: #1E2530; --border: #2A3340; --text: #E2E2DA; --muted: #A0A8B0; --button-text: #0F1520; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family: var(--body); background: var(--bg); color: var(--text); min-height:100vh; } /* ── Login ── */ #login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(99,102,241,0.06) 0%, transparent 60%), var(--bg); } .login-wrap { width:380px; } .login-brand { text-align:center; margin-bottom:2.5rem; } .login-brand h1 { font-family: var(--display); font-size:1.6rem; font-weight:800; background: linear-gradient(135deg, #E2E8F0, #94A3B8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-0.02em; } .login-brand p { font-size:0.8rem; color:var(--muted); margin-top:0.3rem; font-family:var(--mono); } .login-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:2rem; box-shadow: 0 0 0 1px rgba(59,130,246,0.05), 0 25px 50px rgba(0,0,0,0.4); } /* ── Forms ── */ .field { margin-bottom:1rem; } .field label { display:block; font-size:0.7rem; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.4rem; } .field label.cb-row, .cb-row { display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; font-weight:400; text-transform:none; letter-spacing:0; color:var(--text); font-size:0.85rem; margin-bottom:0; } .cb-row input[type="checkbox"] { margin:0; } .field input, .field select { width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text); padding:0.65rem 0.875rem; border-radius:8px; font-size:0.875rem; font-family:var(--body); outline:none; transition:border-color 0.15s; } .field input:focus, .field select:focus { border-color:var(--brand); } /* ── Buttons ── */ .btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 1.2rem; border-radius:8px; border:none; cursor:pointer; font-size:0.8rem; font-weight:600; font-family:var(--body); transition:all 0.15s; } /* Primary: einheitlich Logo-Gelb mit dunkelblauer Schrift */ .btn-primary { background:var(--button-bg); color:var(--button-text); font-weight:700; } .btn-primary:hover { background:var(--button-hover); transform:translateY(-1px); box-shadow:0 4px 12px rgba(245,196,37,0.35); } .btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); } .btn-ghost:hover { border-color:var(--brand); color:var(--brand); } .btn-danger { background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.3); color:var(--red); } .btn-danger:hover { background:rgba(239,68,68,0.25); } .btn-success { background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.3); color:var(--green); } .btn-amber { background:rgba(245,158,11,0.15); border:1px solid rgba(245,158,11,0.3); color:var(--amber); } .btn-sm { padding:0.35rem 0.75rem; font-size:0.75rem; } .btn-full { width:100%; justify-content:center; } .btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; } /* ── Layout ── */ #app { display:none; } .layout { display:flex; min-height:100vh; } /* ── Mobile Hamburger ── */ .topbar-mobile { display: none; position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 1rem; height: 52px; align-items: center; justify-content: space-between; } .hamburger { background: none; border: none; cursor: pointer; padding: 0.4rem; color: var(--text); display: flex; flex-direction: column; gap: 4px; } .hamburger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 25; backdrop-filter: blur(2px); } .sidebar-overlay.open { display: block; } @media (max-width: 768px) { .topbar-mobile { display: flex; } .sidebar { position: fixed; top: 0; left: -260px; bottom: 0; z-index: 30; transition: left 0.25s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.3); } .sidebar.open { left: 0; } .main { margin-left: 0 !important; } .main-inner { padding: 1rem; } .stats { grid-template-columns: repeat(2, 1fr); } .grid2 { grid-template-columns: 1fr; } .table-card { overflow-x: auto; } table { min-width: 600px; } .page-header-row { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr 1fr; } .btn { font-size: 0.75rem; padding: 0.5rem 0.875rem; } } /* ── Sidebar ── */ /* Brand-Sidebar (Logo-Dunkelblau) — synchron mit MBK/WBK/RBK seit Etappe C */ .sidebar { width:240px; flex-shrink:0; background:var(--brand); color:rgba(255,255,255,0.9); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; } .sidebar-header { padding:1.5rem 1.25rem 1rem; border-bottom:1px solid rgba(255,255,255,0.08); } .sidebar-header h1 { font-family:var(--display); font-size:1rem; font-weight:800; color:white; } .sidebar-header p { font-size:0.65rem; color:rgba(255,255,255,0.5); margin-top:0.2rem; font-family:var(--mono); } .sidebar-section { padding:0.75rem 0.75rem 0.25rem; } .sidebar-section-label { font-size:0.6rem; font-weight:600; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.1em; padding:0 0.5rem; margin-bottom:0.4rem; } .nav-item { position:relative; display:flex; align-items:center; gap:0.75rem; padding:0.55rem 0.75rem; border-radius:8px; cursor:pointer; font-size:0.825rem; font-weight:500; transition:all 0.12s; color:rgba(255,255,255,0.75); margin-bottom:0.15rem; text-decoration:none; } .nav-item:hover { background:rgba(255,255,255,0.08); color:white; } .nav-item.active { background:rgba(255,255,255,0.12); color:white; font-weight:600; } .nav-item.active::before { content:''; position:absolute; left:-0.75rem; top:50%; transform:translateY(-50%); width:3px; height:22px; background:var(--button-bg); border-radius:0 2px 2px 0; } .nav-item-icon { font-size:1rem; width:20px; text-align:center; flex-shrink:0; } .nav-item svg { width:15px; height:15px; flex-shrink:0; } .nav-product-header { display:flex; align-items:center; gap:0.6rem; padding:0.4rem 0.75rem 0.2rem; font-size:0.7rem; font-weight:700; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.08em; } .nav-product-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; } .sidebar-footer { margin-top:auto; padding:0.75rem; border-top:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.6); font-size:0.75rem; } /* ── Main ── */ .main { flex:1; overflow-y:auto; } .main-inner { padding:2rem; max-width:1100px; } /* ── Page Header ── */ .page-header { margin-bottom:1.75rem; } .page-header h2 { font-family:var(--display); font-size:1.4rem; font-weight:700; } .page-header p { font-size:0.825rem; color:var(--muted); margin-top:0.3rem; } .page-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; } /* ── Stats ── */ .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; } .stat { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.1rem; position:relative; overflow:hidden; } .stat::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent, linear-gradient(90deg, var(--brand), var(--brand2))); } .stat-label { font-size:0.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.4rem; } .stat-val { font-size:1.6rem; font-weight:700; font-family:var(--mono); line-height:1; } .stat-sub { font-size:0.65rem; color:var(--muted); margin-top:0.3rem; } /* ── Table ── */ .table-card { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; } table { width:100%; border-collapse:collapse; } thead tr { background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border); } th { text-align:left; padding:0.7rem 1rem; font-size:0.65rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; } td { padding:0.8rem 1rem; border-bottom:1px solid rgba(255,255,255,0.03); font-size:0.825rem; vertical-align:middle; } tbody tr:last-child td { border-bottom:none; } tbody tr:hover { background:rgba(255,255,255,0.015); } /* ── Badge ── */ .badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.55rem; border-radius:20px; font-size:0.7rem; font-weight:600; font-family:var(--mono); } .badge-online { background:rgba(16,185,129,0.12); color:var(--green); } .badge-stopped { background:rgba(239,68,68,0.12); color:var(--red); } .badge-unknown { background:rgba(90,112,144,0.12); color:var(--muted); } .badge-main { background:rgba(59,130,246,0.12); color:var(--brand); font-size:0.65rem; } .dot { width:5px; height:5px; border-radius:50%; } .dot-green { background:var(--green); box-shadow:0 0 5px var(--green); } .dot-red { background:var(--red); } .dot-amber { background:var(--amber); } /* ── Modal ── */ .overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.75); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:1rem; overflow-y:auto; /* damit lange Modals scrollbar sind wenn sie höher als Viewport sind */ } .modal { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.75rem; width:100%; max-width:520px; box-shadow:0 30px 60px rgba(0,0,0,0.5); max-height:calc(100vh - 2rem); overflow-y:auto; margin:auto; /* zentriert, aber scrollt mit wenn zu groß */ } .modal h3 { font-family:var(--display); font-size:1.1rem; font-weight:700; margin-bottom:1.25rem; } .modal-footer { display:flex; gap:0.75rem; justify-content:flex-end; margin-top:1.5rem; position:sticky; bottom:-1.75rem; background:var(--card); padding:0.75rem 0 0; border-top:1px solid var(--border); } /* ── Log ── */ .log { background:#000; border:1px solid var(--border); border-radius:8px; padding:1rem; font-family:var(--mono); font-size:0.73rem; color:#7EC8A0; line-height:1.6; max-height:280px; overflow-y:auto; white-space:pre-wrap; } /* ── Alert ── */ .alert { padding:0.7rem 1rem; border-radius:8px; font-size:0.8rem; margin-bottom:1rem; } .alert-error { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.25); color:#FCA5A5; } .alert-success { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.25); color:#6EE7B7; } /* ── Resource bar ── */ .res-bar { height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:0.4rem; } .res-fill { height:100%; border-radius:3px; transition:width 0.5s; } /* ── URL Preview ── */ .url-preview { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:0.6rem 0.875rem; font-family:var(--mono); font-size:0.78rem; color:var(--muted); margin-bottom:1rem; } /* ── Grid ── */ .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } /* ── Tenant-Drawer (slide-in von rechts) ── */ .drawer-overlay { position:fixed; inset:0; z-index:180; background:rgba(0,0,0,0.55); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity 0.18s ease; } .drawer-overlay.open { opacity:1; pointer-events:auto; } .drawer { position:fixed; top:0; right:0; bottom:0; z-index:190; width:min(720px, 100vw); background:var(--card); border-left:1px solid var(--border); box-shadow:-12px 0 40px rgba(0,0,0,0.35); transform:translateX(100%); transition:transform 0.22s ease; display:flex; flex-direction:column; } .drawer.open { transform:translateX(0); } .drawer-head { padding:1.1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:0.75rem; } .drawer-head h3 { font-family:var(--display); font-size:1.05rem; margin:0; flex:1; min-width:0; } .drawer-head .sub { font-size:0.72rem; color:var(--muted); margin-top:0.15rem; } .drawer-tabs { display:flex; gap:0; padding:0 0.5rem; border-bottom:1px solid var(--border); background:var(--bg); overflow-x:auto; } .drawer-tab { padding:0.7rem 1rem; font-size:0.8rem; font-weight:600; color:var(--muted); border:none; background:transparent; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; } .drawer-tab:hover { color:var(--text); } .drawer-tab.active { color:var(--brand); border-bottom-color:var(--brand); } .drawer-tab.danger.active { color:var(--red); border-bottom-color:var(--red); } .drawer-body { flex:1; overflow-y:auto; padding:1.25rem; } .drawer-section { border:1px solid var(--border); border-radius:10px; padding:1rem; margin-bottom:1rem; background:var(--surface); } .drawer-section h4 { font-size:0.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.75rem; } .drawer-close { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.1rem; } .drawer-close:hover { background:var(--bg); } /* ── Modul-Pills (RBK / WBK in Mandanten-Liste) ── */ .mod-pill { display:inline-flex; align-items:center; gap:0.3rem; padding:0.18rem 0.55rem; border-radius:6px; font-size:0.7rem; font-weight:600; font-family:var(--mono); } .mod-pill.rbk { background:rgba(31,61,126,0.12); color:var(--brand); } .mod-pill.wbk { background:rgba(60,180,224,0.14); color:var(--brand-accent); } .mod-pill.muted { background:rgba(160,168,176,0.12); color:var(--muted); } /* Status-Pille klickbar (Restart) */ .badge-clickable { cursor:pointer; } .badge-clickable:hover { filter:brightness(1.15); } /* Action-Cell: Verwalten-Button */ .btn-manage { background:var(--button-bg); color:var(--button-text); border:none; padding:0.4rem 0.85rem; border-radius:7px; font-size:0.78rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:0.3rem; } .btn-manage:hover { background:var(--button-hover); } /* Inline-Field für Drawer-Forms */ .inline-form { display:flex; gap:0.5rem; align-items:flex-end; flex-wrap:wrap; } .inline-form .field { flex:1; min-width:140px; margin:0; } .inline-form .field label { font-size:0.7rem; color:var(--muted); margin-bottom:0.25rem; display:block; } @media (max-width: 768px) { .drawer { width:100vw; } .drawer-tabs { padding:0; } .drawer-tab { padding:0.6rem 0.75rem; font-size:0.75rem; } } /* ── Misc ── */ .hidden { display:none !important; } .flex { display:flex; } .gap-2 { gap:0.5rem; } .gap-3 { gap:0.75rem; } .items-center { align-items:center; } .justify-between { justify-content:space-between; } .text-muted { color:var(--muted); } .text-green { color:var(--green); } .text-red { color:var(--red); } .mono { font-family:var(--mono); } .mb-4 { margin-bottom:1rem; } .mt-4 { margin-top:1rem; } @keyframes spin { to { transform:rotate(360deg); } } .spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.2); border-top-color:white; border-radius:50%; animation:spin 0.6s linear infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } /* ── Mobile-Optimierung Wartungs-Banner ── */ .maintenance-banner { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1.5px solid var(--card); background: rgba(34,197,94,0.06); } @media (max-width: 768px) { .maintenance-banner { flex-direction: column; align-items: flex-start; padding: 0.875rem 1rem; } .maintenance-banner button { width: 100%; } /* Stats kleiner padding */ .stat { padding: 0.875rem; } .stat-val { font-size: 1.5rem !important; } .stat-label { font-size: 0.7rem; } /* Dashboard-Tabellen: kein min-width erzwingen */ .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Page-Header kleiner */ .page-header h2 { font-size: 1.2rem; } .page-header p { font-size: 0.75rem; } /* Main weniger padding */ .main-inner { padding: 0.875rem !important; } /* Buttons touch-friendly (mind. 38px) */ .btn { min-height: 38px; } .btn-sm { min-height: 34px; } /* Forms mobile besser */ .field input, .field select { font-size: 16px; /* iOS zoom-prevention */ } /* Modals mobile */ .modal-content { width: calc(100vw - 2rem) !important; max-width: none !important; } } @media (max-width: 480px) { .main-inner { padding: 0.75rem !important; } .stat-val { font-size: 1.3rem !important; } .stats { gap: 0.5rem; } /* Stats bei kleinen Screens 2x2 und kompakter */ .stat { padding: 0.75rem; } /* Page-Header noch kleiner */ .page-header { margin-bottom: 1.25rem; } /* Tables: noch kleinere Schrift */ table { font-size: 0.75rem; min-width: 0 !important; } table th, table td { padding: 0.5rem 0.4rem !important; } /* Topbar kompakter */ .topbar-mobile { height: 48px; padding: 0 0.75rem; } } /* ============================================================ */ /* MOBILE OVERRIDES - MÜSSEN AM ENDE STEHEN um Specificity Bug zu vermeiden */ /* ============================================================ */ @media (max-width: 768px) { .topbar-mobile { display: flex; } /* Sidebar: fixed + ausgeblendet */ .sidebar { position: fixed !important; top: 0; left: -280px !important; bottom: 0; width: 260px !important; z-index: 30; transition: left 0.25s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.3); height: 100vh !important; } .sidebar.open { left: 0 !important; } /* Main füllt kompletten Screen */ .main { margin-left: 0 !important; width: 100%; } .main-inner { padding: 0.875rem !important; max-width: 100%; } /* Stats: 2 pro Reihe + kompakter */ .stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .stat { padding: 0.875rem; overflow: hidden; } .stat-val { font-size: 1.4rem !important; } .stat-label { font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Grids */ .grid2 { grid-template-columns: 1fr; } /* Tabellen: horizontal scrollen */ .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 540px; font-size: 0.8rem; } /* Page-Header */ .page-header { margin-bottom: 1.25rem; } .page-header h2 { font-size: 1.2rem; } .page-header p { font-size: 0.75rem; } .page-header-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; } /* Wartungs-Banner: vertikal statt horizontal */ .maintenance-banner { flex-direction: column !important; align-items: flex-start !important; padding: 0.875rem 1rem !important; gap: 0.75rem !important; } .maintenance-banner button { width: 100%; } /* Buttons touch-friendly */ .btn { min-height: 38px; } /* Inputs: kein iOS-Zoom */ .field input, .field select, .field textarea { font-size: 16px; } /* Modals passen auf Screen */ .modal-content { width: calc(100vw - 1.5rem) !important; max-width: none !important; margin: 0.75rem !important; } } @media (max-width: 480px) { .stats { gap: 0.5rem; } .stat { padding: 0.7rem; } .stat-val { font-size: 1.2rem !important; } .btn { font-size: 0.78rem; padding: 0.55rem 0.875rem; } .btn-sm { font-size: 0.72rem; padding: 0.4rem 0.7rem; } .topbar-mobile { height: 48px; padding: 0 0.75rem; } table { font-size: 0.72rem; } table th, table td { padding: 0.45rem 0.35rem !important; } .page-header h2 { font-size: 1.1rem; } /* Admin-Tabellen: weniger wichtige Spalten auf Mobile ausblenden */ .hide-sm { display: none !important; } } @media (max-width: 768px) { .hide-md { display: none !important; } } /* ── Paket-Buttons ── */ .pkg-btn { background: var(--surface); border: 1.5px solid var(--border); color: var(--muted); border-radius: 8px; padding: 0.5rem 0.25rem; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.15s; text-align: center; font-family: var(--body); line-height: 1.4; } .pkg-btn small { font-weight: 400; font-size: 0.65rem; } .pkg-btn:hover { border-color: var(--brand); color: var(--text); } .pkg-btn.active { border-color: var(--brand); background: rgba(59,130,246,0.12); color: var(--brand); } /* Footer für Pflicht-Links (Impressum/Datenschutz) — TMG/DSGVO */ .cc-login-footer, .cc-site-footer { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); } .cc-login-footer { margin-top: 1.5rem; } .cc-site-footer { padding: 1.25rem; border-top: 1px solid var(--border); margin-top: auto; } .cc-login-footer a, .cc-site-footer a { color: var(--muted); text-decoration: none; } .cc-login-footer a:hover, .cc-site-footer a:hover { color: var(--brand); text-decoration: underline; }