/* ============================================================================ Tourtagebuch Mobil – Design System Corporate Identity (siehe Anforderung §9) gepaart mit der Struktur aus dem Klickdummy tour_app.html. ============================================================================ */ :root { /* Primärfarben lt. Anforderung */ --primary-dark: #0C447C; --primary: #185FA5; --primary-light: #2E86DE; /* Neutrals – dunkles Design als Default */ --bg: #0F1823; --bg-elevated: #182433; --panel: #1C2A3C; --ink: #EEF2F7; --ink-dim: #9FB0C2; --subtle: #8097AE; --muted: #6B7E92; --line: #2A3B52; --input-bg: rgba(255,255,255,0.05); /* Status lt. Anforderung */ --success: #1A7A3A; --success-bg: #E6F9EE; --danger: #A32D2D; --danger-bg: #FDECEA; --warning: #C77A00; --warning-bg: #FFF4E0; --radius-card: 16px; --radius-pill: 100px; --page-bg: radial-gradient(ellipse at 20% 0%, rgba(24,95,165,0.18) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(46,134,222,0.12) 0%, transparent 55%), #0A111C; } /* Light-Theme (nur Mobil, in Web nicht vorhanden – Anforderung §9) Selektor sowohl auf (neue Variante, applyTheme setzt documentElement.dataset.theme) als auch auf (Rückwärts- kompatibilität für gecachte Versionen). */ [data-theme="light"], html[data-theme="light"], body[data-theme="light"] { --bg: #F5F5F7; --bg-elevated: #FFFFFF; --panel: #FFFFFF; --ink: #1A2432; --ink-dim: #4A5A70; --subtle: #5D6F84; --muted: #7A8A9C; --line: #E0E0E0; --input-bg: #FFFFFF; --page-bg: radial-gradient(ellipse at 20% 0%, rgba(24,95,165,0.08) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(46,134,222,0.08) 0%, transparent 55%), #F5F5F7; } /* ============================================================================ Reset ============================================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* html bekommt EXPLIZIT background-color, damit beim Überscrollen / Bounce auf iOS Safari nicht der System-Hintergrund (Dunkelblau im iOS Dark Mode) durchschlägt. Reicht background nur auf body, mappt iOS den body-Background zwar normal auf den Viewport, aber bei dynamischer Höhe (z.B. fixed footer + scrollbarer form-body) bleiben Bereiche darunter auf System-Farbe. */ html { background-color: var(--bg); } html, body { height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.4; /* background-color ZUERST als Fallback, damit selbst bei Gradient-Problem auf iOS Safari der Hintergrund sicher die Theme-Farbe annimmt. */ background-color: var(--bg); background-image: var(--page-bg); color: var(--ink); transition: background 0.25s; overscroll-behavior: none; } /* .app-shell und .page bekommen ebenfalls explizite background-color, damit zwischen den Schichten (page → form-body → footer-gradient) keine "Lücke" entsteht, durch die System-Default-Farben sichtbar werden. */ .app-shell, .page { background-color: var(--bg); } button { font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* Mindest-Touch-Target: 44x44 (iOS HIG, Anforderung §9) */ button, .icon-btn, .filter-opt, .tour-card { min-height: 44px; } /* ============================================================================ App-Shell: ein voller-Bildschirm-Container, in dem die Seiten gerendert werden ============================================================================ */ .app-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .page { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* ============================================================================ Topbar ============================================================================ */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 8px; } .topbar-greeting { font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 2px; } .topbar-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.05; } .topbar-title em { font-style: normal; color: var(--primary-light); } .topbar-actions { display: flex; gap: 8px; align-items: center; } .icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--input-bg); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; } .icon-btn:hover { background: rgba(46,134,222,0.08); } .icon-btn svg { width: 20px; height: 20px; } /* Connection indicator */ .connection-indicator { width: auto; padding: 0 12px; gap: 6px; font-size: 13px; font-weight: 600; } .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; } body[data-conn="offline"] .conn-dot { background: var(--warning); } body[data-conn="syncing"] .conn-dot { background: var(--primary-light); animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--primary-light); font-size: 15px; font-weight: 500; cursor: pointer; padding: 10px 8px; } .back-btn svg { width: 18px; height: 18px; } /* ============================================================================ Offline-Banner ============================================================================ */ .offline-banner { display: none; align-items: center; gap: 10px; margin: 4px 16px 8px; padding: 10px 14px; background: var(--warning-bg); color: var(--warning); border-radius: 12px; border: 1px solid rgba(199,122,0,0.3); font-size: 13px; font-weight: 500; } .offline-banner svg { width: 18px; height: 18px; flex-shrink: 0; } body[data-conn="offline"] .offline-banner { display: flex; } /* ============================================================================ Login ============================================================================ */ .login-page { padding: 64px 28px 32px; justify-content: space-between; } .brand { margin-top: 24px; } .brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; } .brand-mark { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(12,68,124,0.4); } .brand-mark svg { width: 28px; height: 28px; } .brand-name { display: flex; flex-direction: column; gap: 2px; } .brand-app { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1; } .brand-version { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .brand h1 { font-size: 38px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .brand h1 em { font-style: normal; color: var(--primary-light); } .brand p { font-size: 15px; color: var(--ink-dim); margin-top: 12px; } .login-form { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; } .field { display: flex; flex-direction: column; } .field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 8px; font-weight: 600; } .field input { background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: var(--ink); font-size: 15px; } .field input:focus { outline: none; border-color: var(--primary-light); } .forgot { align-self: flex-end; background: none; border: none; color: var(--primary-light); font-size: 13px; cursor: pointer; padding: 6px 0; } .btn-primary { padding: 16px 20px; border: none; border-radius: 14px; background: var(--primary); color: white; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; } .btn-primary:hover:not(:disabled) { background: var(--primary-dark); } .btn-primary:active:not(:disabled) { transform: scale(0.98); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } /* .btn-secondary: konsolidierte Definition steht weiter unten (~Zeile 1031), damit sie nicht von einer doppelten überschrieben wird. */ .btn-danger { padding: 14px 16px; border: 1px solid var(--danger); border-radius: 12px; background: transparent; color: var(--danger); font-size: 15px; font-weight: 600; cursor: pointer; } .legal-links { display: flex; justify-content: center; gap: 20px; padding: 16px 0; } .legal-links button { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 8px; } .login-error { color: var(--danger); font-size: 13px; padding: 8px 12px; background: var(--danger-bg); border-radius: 8px; margin-top: 4px; } /* ============================================================================ Quick-Stats (Tourübersicht) ============================================================================ */ .quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 20px 16px; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 12px; text-align: center; } .stat-num { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1; margin-bottom: 4px; } .stat-num.primary { color: var(--primary-light); } .stat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } /* ============================================================================ Tour-Liste ============================================================================ */ .tour-list { flex: 1; overflow-y: auto; padding: 8px 16px 120px; display: flex; flex-direction: column; gap: 10px; } .tour-list::-webkit-scrollbar { display: none; } .tour-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; cursor: pointer; transition: transform 0.1s, border-color 0.15s; } .tour-card:active { transform: scale(0.99); } .tour-card.pending { border-left: 3px solid var(--warning); } .tour-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .tour-card-date { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tour-card-title { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .tour-card-chevron svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; } .tour-card-meta { display: flex; gap: 16px; font-size: 13px; color: var(--ink-dim); } .tour-card-meta span { display: inline-flex; align-items: center; gap: 5px; } .tour-card-meta svg { width: 14px; height: 14px; } .pending-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--warning-bg); color: var(--warning); padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; } .pending-badge svg { width: 11px; height: 11px; } .empty-state { text-align: center; padding: 48px 24px; color: var(--muted); font-size: 14px; } /* ============================================================================ FAB – Neue Tour ============================================================================ */ .fab { position: fixed; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: white; border: none; box-shadow: 0 8px 24px rgba(12,68,124,0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50; transition: transform 0.1s; } .fab:active { transform: scale(0.92); } .fab svg { width: 26px; height: 26px; } /* ============================================================================ Filter ============================================================================ */ .filter-body { flex: 1; overflow-y: auto; padding: 8px 20px 120px; } .filter-body::-webkit-scrollbar { display: none; } .filter-section { margin-bottom: 24px; } .filter-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; font-weight: 600; } .filter-opts { display: flex; flex-wrap: wrap; gap: 8px; } .filter-opt { padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--input-bg); color: var(--ink); font-size: 14px; cursor: pointer; transition: all 0.15s; } .filter-opt.selected { background: var(--primary); color: white; border-color: var(--primary); } .filter-empty, .filter-loading { padding: 8px 4px; font-size: 13px; color: var(--muted); font-style: italic; } .filter-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 30%); display: flex; gap: 10px; z-index: 40; } /* ============================================================================ Tour-Formular ============================================================================ */ .form-body { flex: 1; overflow-y: auto; padding: 8px 20px 140px; display: flex; flex-direction: column; gap: 16px; } .form-body::-webkit-scrollbar { display: none; } .form-field { display: flex; flex-direction: column; gap: 6px; /* Wichtig: erlaubt dem flex/grid-Item, kleiner zu werden als die intrinsische Inhaltsbreite. Ohne dies sprengen (iOS-Native) oder lange