/* ============================================================ NOA App – Styles Modular Phone-First Design – basiert auf bestehendem Entwurf ============================================================ */ :root { /* Farben aus dem bestehenden Design */ --turquoise: #00a9b4; --turquoise-dark: #008d98; --turquoise-deep: #006d76; --turquoise-soft: #cdebee; --blue: #103f7c; --blue-deep: #0a2c5a; --blue-soft: #eaf8fc; --bg-soft: #f3fbfd; --orange: #f5a33b; --orange-soft: #ffd58a; --red: #e53e3e; --red-deep: #b71c1c; --green: #16a34a; --green-soft: #dcfce7; --amber: #d97706; --amber-soft: #fff7e6; --text: #103f7c; --text-strong: #0a2c5a; /* == --blue-deep (Marken-Navy); Primär-Textfarbe, im Dark hell */ --muted: #5a7aac; --line: #cfe9ee; --line-soft: #e7f3f6; --white: #ffffff; --shadow: 0 12px 30px rgba(16,63,124,.10); --shadow-lg: 0 22px 50px rgba(16,63,124,.16); --radius: 18px; --radius-sm: 12px; --radius-lg: 24px; /* Semantische Surface-Tokens (Dark-Mode-fähig). Die App nutzt bislang überwiegend hartes #fff für Karten/Flächen; diese Tokens erlauben die Umschaltung. Werte werden unten in :root[data-theme="dark"] überschrieben. */ --surface: #ffffff; /* Karten / Panels / Bottom-Sheet */ --surface-2: #f7fbfd; /* leicht abgesetzte Fläche */ --border: var(--line); /* Trennlinien */ --app-bg-grad: linear-gradient(180deg, #eaf8fc 0%, #ffffff 100%); /* Body-Verlauf */ --danger-tint: #fff0f0; /* Lösch-/Danger-Flächen (Kontakt-Löschen, Danger-Pills) */ --danger-tint-border: #ffcdcd; --glass: rgba(255,255,255,.95); /* transluzente Header/Tabbar-Fläche */ --red-text: #e53e3e; /* == --red, aber als Danger-ICON/-TEXT (im Dark aufgehellt) */ --red-deep-text: #b71c1c; /* == --red-deep, als Text (im Dark aufgehellt) */ } /* ============================================================ DARK MODE — aktiviert via (index.html Anti-FOUC). Nur Token-Overrides + gezielte Flächen-/Text-Korrekturen; Marken-Türkis/ Orange bleiben als Akzente erhalten. Weiterer Feinschliff (hartes #fff in einzelnen Komponenten) folgt weiter unten im „DARK MODE · Flächen"-Block. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* Text bewusst KEIN reines Weiß (Blendungsvermeidung), Ziel ~10–13:1. --blue/--blue-deep bleiben Marken-Navy (NICHT umgefärbt) → Hintergründe/ Gradienten/Icons korrekt; Lesetext läuft über --text/--text-strong. */ --text: #c1cee1; --text-strong: #d8e2ef; --muted: #8fa1bc; --blue-soft: #1b333f; --bg-soft: #18212c; --line: rgba(120,205,218,.20); --line-soft: rgba(120,205,218,.12); --white: #1c2734; /* Karten-/Panel-Fläche */ --turquoise-soft: #123039; --turquoise-deep: #22c1cd; /* Akzent-Text auf dunklem Grund */ --green-soft: #14321f; --amber-soft: #33260f; --surface: #1c2734; --surface-2: #232f3d; --border: rgba(120,205,218,.15); --app-bg-grad: linear-gradient(180deg, #161f2a 0%, #141b24 100%); --danger-tint: #3a1c1e; /* dunkler Rot-Tint statt #fff0f0 */ --danger-tint-border: #5a2e32; --glass: rgba(20,29,41,.9); /* dunkle transluzente Header/Tabbar */ --red-text: #f47174; /* aufgehelltes Danger-Rot (Icon/Text auf Dunkel) */ --red-deep-text: #f0898c; --shadow: 0 12px 30px rgba(0,0,0,.5); --shadow-lg: 0 22px 50px rgba(0,0,0,.6); } /* ============================================================ Reset & Basics ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { font-family: 'Manrope', 'Segoe UI', 'SF Pro Text', system-ui, -apple-system, Arial, sans-serif; color: var(--text); background: var(--app-bg-grad); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Kein Body-Scroll - die App-Box scrollt intern. So bleibt die Bottom-Bar auch dann sichtbar, wenn iOS-Adressleiste, Tastatur oder ein zu kleines Browser-Fenster (Desktop) sonst den Body scrollen ließen. */ overflow: hidden; overscroll-behavior: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } /* font-size >= 16px verhindert iOS-Auto-Zoom beim Fokussieren */ input, select, textarea { font-family: inherit; font-size: 16px; color: var(--text); } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; } /* ============================================================ Phone-Frame Shell - Mobile: full-width - Desktop: zentriert mit Phone-Frame-Look ============================================================ */ .app { width: 100%; max-width: 430px; height: 100vh; /* Fallback */ height: 100dvh; /* Moderne Browser */ height: var(--app-vh, 100dvh); /* JS-gemessen für iOS-Adressleiste */ margin: 0 auto; background: var(--surface); position: relative; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 30px 80px rgba(16,63,124,.18); overflow: hidden; } /* Tablet/Desktop: Phone-Frame zentriert mit Schatten + abgerundeten Ecken. Wichtig: body bleibt overflow:hidden, App-Höhe ist hart auf Viewport begrenzt, damit die Bottom-Bar (position:absolute in der App) nie aus dem Sichtfeld scrollt. */ @media (min-width: 520px) { body { display: flex; align-items: center; justify-content: center; height: 100vh; padding: 24px 0; } .app { height: 100%; /* füllt body-content vertikal */ max-height: 860px; /* aber max Phone-Frame-Höhe */ border-radius: 36px; overflow: hidden; } } /* Tablet (Portrait): App etwas größer für mehr Inhalt */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .app { max-width: 480px; max-height: 880px; } } /* Mobile-Querformat: App full-width, kompakteres Greeting, niedrigere Map */ @media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) { .app { max-width: 100%; height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh); border-radius: 0; } .tabbar { max-width: 100%; margin: 0; } .greet-row { margin-bottom: 12px; } .greet-name { font-size: 1.1rem !important; } .greet-hi { font-size: .8rem !important; } .device-hero { padding: 14px; margin-bottom: 12px; } .device-hero .dh-emoji, .device-hero .dh-emoji.has-photo { width: 48px; height: 48px; font-size: 1.4rem; } .device-hero .dh-name { font-size: 1.1rem; } .map-canvas.home-map { height: 160px; } .auth-logo, .welcome-logo { height: 60px !important; margin-bottom: 12px !important; } .auth-title { font-size: 1.4rem !important; } } /* ============================================================ App Header ============================================================ */ .app-header { position: sticky; top: 0; z-index: 30; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 14px 18px; display: flex; align-items: center; gap: 12px; min-height: 64px; } .app-header.transparent { background: transparent; border-bottom: 0; position: absolute; top: 0; left: 0; right: 0; } .app-header .back-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); display: grid; place-items: center; font-size: 1.2rem; } .app-header .header-title { flex: 1; font-weight: 900; font-size: 1.05rem; color: var(--text-strong); letter-spacing: -.01em; text-align: center; } .app-header .header-title.left { text-align: left; } .app-header .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.02em; font-size: 1.25rem; color: var(--text-strong); } .app-header .brand .pin { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); color: #fff; display: grid; place-items: center; font-size: .95rem; font-weight: 900; box-shadow: 0 6px 14px rgba(0,169,180,.35); } .app-header .spacer { flex: 1; } .header-logo { height: 30px; width: auto; display: block; flex-shrink: 0; } .welcome-logo { height: 80px; width: auto; display: block; margin-bottom: 22px; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; color: var(--text); font-size: 1.1rem; border: 1px solid var(--line); position: relative; } .icon-btn .badge { position: absolute; top: -4px; right: -4px; background: var(--orange); color: #fff; font-size: .65rem; font-weight: 900; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; } /* ============================================================ Main / Views ============================================================ */ .main { flex: 1; padding: 18px 18px 110px; overflow-y: auto; /* Nur vertikal scrollen: overflow-y:auto würde overflow-x sonst auf 'auto' hochstufen (CSS-Spec) -> horizontaler Scroll bei zu breitem Inhalt (z. B. Kontakte). Explizit hidden = kein H-Scroll, Inhalt bleibt im Rahmen. */ overflow-x: hidden; -webkit-overflow-scrolling: touch; } .main.no-tabbar { padding-bottom: 24px; } .main.full-bleed { padding: 0 0 110px; } .view { animation: fadeUp .3s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ Typography ============================================================ */ .h-eyebrow { font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise-deep); margin-bottom: 6px; } .h-title { font-size: 1.7rem; font-weight: 900; color: var(--text-strong); letter-spacing: -.025em; line-height: 1.1; margin-bottom: 8px; } .h-sub { color: var(--muted); font-size: .95rem; margin-bottom: 22px; line-height: 1.4; } .section-title { display: flex; align-items: center; justify-content: space-between; margin: 22px 4px 10px; } .section-title h3 { font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise-deep); } .section-title a, .section-title button { color: var(--text); font-weight: 800; font-size: .85rem; } /* ============================================================ Cards ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px; } .card.tight { padding: 14px; } .card.flat { box-shadow: none; } /* ============================================================ Greeting ============================================================ */ .greet-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #cdebee, #9ed7df); color: var(--turquoise-deep); font-weight: 900; display: grid; place-items: center; font-size: 1.3rem; border: 2px solid #fff; box-shadow: 0 6px 14px rgba(16,63,124,.18); flex-shrink: 0; } .avatar.lg { width: 96px; height: 96px; font-size: 2.2rem; } .avatar.avatar-mini { width: 30px; height: 30px; font-size: .92rem; box-shadow: none; border-width: 0; } .avatar.has-photo { background: var(--bg-soft); background-size: cover; background-position: center; color: transparent; } /* Avatar-Edit (Profilbild hochladen) */ .avatar-edit-wrap { position: relative; display: inline-block; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .avatar-edit-wrap:active { transform: scale(.98); } .avatar-edit-badge { position: absolute; bottom: -2px; right: -2px; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); color: #fff; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,169,180,.32); } /* Foto-Bereich für Geräte-Edit */ .photo-edit { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; gap: 10px; } .photo-preview { position: relative; width: 110px; height: 110px; border-radius: 24px; background: var(--bg-soft); background-size: cover; background-position: center; display: grid; place-items: center; font-size: 2.4rem; color: var(--turquoise-deep); border: 2px dashed var(--line); cursor: pointer; transition: .15s; flex-shrink: 0; overflow: hidden; } .photo-preview.has-photo { border-style: solid; border-color: var(--line); font-size: 0; } .photo-preview:active { transform: scale(.98); } .photo-preview .photo-edit-badge { position: absolute; bottom: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); color: #fff; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,169,180,.32); font-size: 1rem; } /* Foto in Device-Card und Hero (überschreibt emoji-Hintergrund) */ .device-emoji.has-photo { background-size: cover !important; background-position: center !important; color: transparent; box-shadow: 0 8px 16px rgba(16,63,124,.18); } .device-hero .dh-emoji.has-photo { background-size: cover !important; background-position: center !important; color: transparent; border: 2px solid rgba(255,255,255,.35); } .greet-text .greet-hi { color: var(--muted); font-size: .9rem; font-weight: 700; } .greet-text .greet-name { color: var(--text-strong); font-weight: 900; font-size: 1.4rem; letter-spacing: -.02em; } .greet-row .greet-hi { color: var(--muted); font-size: .9rem; font-weight: 700; } .greet-row .greet-name { color: var(--text-strong); font-weight: 900; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.15; } /* ============================================================ Device Card ============================================================ */ .device-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--surface), var(--bg-soft)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); transition: transform .15s ease; width: 100%; text-align: left; } .device-card:active { transform: scale(.98); } .device-emoji { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); display: grid; place-items: center; font-size: 1.7rem; color: #fff; box-shadow: 0 8px 16px rgba(0,169,180,.32); flex-shrink: 0; } .device-emoji.watch { background: linear-gradient(135deg, #6c5ce7, #4834d4); box-shadow: 0 8px 16px rgba(76,52,212,.32); } .device-emoji.sensor { background: linear-gradient(135deg, var(--orange), #e8941e); box-shadow: 0 8px 16px rgba(245,163,59,.32); } .device-emoji.other { background: linear-gradient(135deg, #5a7aac, var(--blue)); box-shadow: 0 8px 16px rgba(16,63,124,.32); } .device-info { flex: 1; min-width: 0; } .device-info .name { font-weight: 900; color: var(--text-strong); font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .device-info .meta { color: var(--muted); font-size: .82rem; font-weight: 600; margin-top: 2px; } .device-info .pill { display: inline-flex; align-items: center; gap: 5px; background: var(--green-soft); color: #15803d; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 900; margin-top: 7px; text-transform: uppercase; letter-spacing: .05em; } .device-info .pill.warn { background: var(--amber-soft); color: var(--amber); } .device-info .pill.danger { background: var(--danger-tint); color: var(--red-text); } .device-info .pill.muted { background: var(--bg-soft); color: var(--muted); } .device-card .chev { color: var(--muted); font-size: 1.3rem; flex-shrink: 0; } /* ============================================================ Empty State ============================================================ */ .empty { text-align: center; padding: 36px 18px; background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius); } .empty .ic { width: 72px; height: 72px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; font-size: 2rem; color: var(--turquoise-deep); margin: 0 auto 14px; } .empty h3 { font-size: 1.05rem; font-weight: 900; color: var(--text-strong); margin-bottom: 6px; } .empty p { color: var(--muted); font-size: .9rem; margin-bottom: 16px; max-width: 280px; margin-left: auto; margin-right: auto; } /* ============================================================ Status Tiles (Device Detail) ============================================================ */ .status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 6px; } .status-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; box-shadow: 0 6px 14px rgba(16,63,124,.06); } .status-tile .st-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .status-tile .st-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-soft); color: var(--turquoise-deep); display: grid; place-items: center; font-size: 1rem; } .status-tile .st-status { font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; } .dot.green { background: var(--green); } .dot.amber { background: var(--orange); } .dot.red { background: var(--red); } .status-tile .st-label { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .status-tile .st-value { color: var(--text-strong); font-weight: 900; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.2; } /* ============================================================ Quick Actions Grid ============================================================ */ .quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; } .quick { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(16,63,124,.05); transition: .15s; text-align: center; } .quick:active { transform: scale(.96); } .quick .qicon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); color: #fff; display: grid; place-items: center; font-size: 1.2rem; } .quick.alarm .qicon { background: linear-gradient(135deg, #ff6b6b, var(--red)); } .quick.danger .qicon { background: linear-gradient(135deg, #ff6b6b, var(--red)); } .quick.orange .qicon { background: linear-gradient(135deg, var(--orange), #e8941e); } .quick.purple .qicon { background: linear-gradient(135deg, #6c5ce7, #4834d4); } .quick .qlabel { font-size: .76rem; font-weight: 800; color: var(--text-strong); line-height: 1.2; } /* ============================================================ List Items ============================================================ */ /* minmax(0,1fr) statt impliziter auto-Spalte: ohne das wächst der Grid-Track auf die min-content-Breite der nowrap-Texte (.li-name/.li-meta) und schiebt Order-Buttons + Checkboxen hinter die overflow-x-Kante von .main (Mobile- Bug Live-Anrufe-Liste, 2026-06-12). */ .list { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } .list-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 10px rgba(16,63,124,.05); } .list-item .li-num { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); color: #fff; font-weight: 900; display: grid; place-items: center; flex-shrink: 0; font-size: .95rem; } .list-item.sms-item .li-num { background: linear-gradient(135deg, var(--orange), #e8941e); } .list-item .li-info { flex: 1; min-width: 0; } .list-item .li-name { font-weight: 900; color: var(--text-strong); font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-item .li-meta { color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-item .li-actions { display: flex; gap: 6px; flex-shrink: 0; } .li-actions .iconbtn { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-soft); color: var(--text); display: grid; place-items: center; font-size: 1rem; border: 1px solid var(--line); } .li-actions .iconbtn.danger { background: var(--danger-tint); color: var(--red-text); border-color: var(--danger-tint-border); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 18px; border-radius: 14px; font-weight: 900; font-size: .98rem; letter-spacing: .02em; transition: .15s; width: 100%; min-height: 56px; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); color: #fff; box-shadow: 0 10px 22px rgba(0,169,180,.32); } .btn-secondary { background: var(--surface); color: var(--text); border: 2px solid var(--line); } .btn-orange { background: linear-gradient(135deg, var(--orange), #e8941e); color: #fff; box-shadow: 0 10px 22px rgba(245,163,59,.32); } .btn-danger { background: linear-gradient(135deg, #ff6b6b, var(--red)); color: #fff; box-shadow: 0 10px 22px rgba(229,62,62,.3); } .btn-ghost { background: transparent; color: var(--text); font-weight: 800; } .btn-row { display: flex; gap: 10px; } .btn-row .btn { width: auto; flex: 1; } .btn:disabled { opacity: .5; pointer-events: none; } .btn-sticky-bottom { position: sticky; bottom: 84px; margin: 18px -2px 0; } /* ============================================================ Bottom Tabbar ============================================================ */ .tabbar { /* Mobile: am Viewport festgenagelt - bleibt beim Scrollen sichtbar, auch wenn Body/Adressleiste/Tastatur scrollen würden. */ position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin-left: auto; margin-right: auto; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 30; } @media (min-width: 520px) { /* Desktop / Tablet im Phone-Frame: in der App-Box statt am Viewport-Rand */ .tabbar { position: absolute; max-width: 100%; margin-left: 0; margin-right: 0; } } .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .01em; border-radius: 10px; text-transform: uppercase; position: relative; min-width: 0; } .tab .ticon { font-size: 1.2rem; line-height: 1; } .tab .ticon svg { width: 22px; height: 22px; } .tab span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tab.active { color: var(--turquoise-deep); } .tab.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--turquoise); } /* ============================================================ Forms ============================================================ */ .field { margin-bottom: 14px; } .field label { display: block; font-size: .78rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--turquoise-deep); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-size: 1rem; color: var(--text-strong); font-weight: 600; outline: none; transition: .15s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(0,169,180,.15); } .field textarea { min-height: 100px; resize: vertical; font-family: inherit; } .field .hint { font-size: .8rem; color: var(--muted); margin-top: 6px; line-height: 1.4; } .field-error { color: var(--red-text); font-size: .85rem; margin-top: 6px; font-weight: 700; } /* Toggle */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; } .toggle-row .toggle-text { flex: 1; padding-right: 12px; } .toggle-row .toggle-text .t { font-weight: 900; color: var(--text-strong); font-size: .98rem; } .toggle-row .toggle-text .d { color: var(--muted); font-size: .82rem; margin-top: 2px; line-height: 1.3; } .toggle { position: relative; width: 50px; height: 30px; background: var(--line); border-radius: 999px; transition: .2s; flex-shrink: 0; cursor: pointer; } .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: .2s; } .toggle.on { background: var(--turquoise); } .toggle.on::after { transform: translateX(20px); } /* Select Card (Radio-style) */ .select-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; transition: .15s; width: 100%; text-align: left; } .select-card:active { transform: scale(.98); } .select-card.selected { border-color: var(--turquoise); background: var(--bg-soft); box-shadow: 0 8px 18px rgba(0,169,180,.18); } .select-card .sc-icon { width: 56px; height: 56px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); color: #fff; display: grid; place-items: center; font-size: 1.6rem; flex-shrink: 0; box-shadow: 0 8px 16px rgba(0,169,180,.28); } .select-card .sc-icon.watch { background: linear-gradient(135deg, #6c5ce7, #4834d4); } .select-card .sc-icon.sensor { background: linear-gradient(135deg, var(--orange), #e8941e); } .select-card .sc-icon.other { background: linear-gradient(135deg, #5a7aac, var(--blue)); } .select-card .sc-info { flex: 1; min-width: 0; } .select-card .sc-title { font-weight: 900; color: var(--text-strong); font-size: 1.05rem; } .select-card .sc-desc { color: var(--muted); font-size: .85rem; margin-top: 2px; line-height: 1.3; } /* ============================================================ Sheet (Bottom Modal) ============================================================ */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(10,44,90,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: flex-end; justify-content: center; z-index: 60; animation: bdFade .25s ease; } .sheet-backdrop.open { display: flex; } @keyframes bdFade { from { opacity: 0; } to { opacity: 1; } } .sheet { background: var(--surface); width: 100%; max-width: 430px; border-radius: 24px 24px 0 0; padding: 18px 18px calc(28px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 40px rgba(0,0,0,.18); animation: sheetSlide .3s cubic-bezier(.2,.9,.3,1.2); max-height: 90vh; overflow-y: auto; } @keyframes sheetSlide { from { transform: translateY(100%); } to { transform: translateY(0); } } .sheet .grabber { width: 48px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; } .sheet h3 { color: var(--text-strong); font-size: 1.25rem; letter-spacing: -.02em; font-weight: 900; margin-bottom: 6px; } .sheet p.desc { color: var(--muted); font-size: .92rem; margin-bottom: 16px; } /* ============================================================ Toasts ============================================================ */ .toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--blue-deep); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 800; font-size: .9rem; box-shadow: 0 12px 30px rgba(0,0,0,.25); z-index: 100; animation: toastSlide .3s ease; max-width: 90%; text-align: center; } .toast.success { background: var(--green); } .toast.error { background: var(--red); } .toast.warn { background: var(--orange); color: #fff; } @keyframes toastSlide { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ============================================================ Welcome / Auth ============================================================ */ .auth-wrap { min-height: calc(100vh - 0px); display: flex; flex-direction: column; padding: 32px 22px calc(22px + env(safe-area-inset-bottom)); } @media (min-width: 520px) { .auth-wrap { min-height: 800px; } } .auth-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 0 24px; } .auth-logo { width: 96px; height: 96px; border-radius: 28px; background: linear-gradient(135deg, var(--turquoise), var(--blue)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 2.2rem; letter-spacing: -.04em; box-shadow: 0 18px 40px rgba(0,169,180,.42); margin-bottom: 22px; position: relative; } .auth-logo::after { content: ""; position: absolute; bottom: -6px; right: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); border: 4px solid #fff; } .auth-title { font-size: 1.8rem; font-weight: 900; color: var(--text-strong); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 8px; } .auth-sub { color: var(--muted); font-size: 1rem; max-width: 320px; } .auth-actions { display: grid; gap: 12px; } .auth-foot { margin-top: 16px; text-align: center; font-size: .9rem; color: var(--muted); } .auth-foot button { color: var(--turquoise-deep); font-weight: 900; } /* ============================================================ Steps (Add Device Wizard) ============================================================ */ .steps-bar { display: flex; gap: 6px; padding: 16px 18px 0; } .step-pill { flex: 1; height: 4px; border-radius: 2px; background: var(--line); } .step-pill.active { background: var(--turquoise); } /* ============================================================ Banner / Hero on Device Detail ============================================================ */ .device-hero { background: linear-gradient(160deg, var(--turquoise) 0%, var(--blue) 100%); color: #fff; border-radius: 24px; padding: 22px 18px; box-shadow: var(--shadow-lg); margin-bottom: 18px; position: relative; overflow: hidden; } .device-hero::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); } .device-hero .dh-row { display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; } .device-hero .dh-emoji { width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 1.9rem; flex-shrink: 0; } .device-hero .dh-name { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; } .device-hero .dh-meta { font-size: .88rem; opacity: .9; margin-top: 3px; } .device-hero .dh-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.2); padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; margin-top: 10px; position: relative; z-index: 2; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #7CFFB5; box-shadow: 0 0 0 0 rgba(124,255,181,.7); animation: livePulse 1.5s infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(124,255,181,.7); } 70% { box-shadow: 0 0 0 8px rgba(124,255,181,0); } 100% { box-shadow: 0 0 0 0 rgba(124,255,181,0); } } /* ============================================================ Chips / Pills ============================================================ */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; } .pill.green { background: var(--green-soft); color: #15803d; } .pill.amber { background: var(--amber-soft); color: var(--amber); } .pill.red { background: var(--danger-tint); color: var(--red-text); } .pill.blue { background: var(--blue-soft); color: var(--text); } .pill.muted { background: var(--bg-soft); color: var(--muted); } /* ============================================================ Profile/Settings rows ============================================================ */ .row-link { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; width: 100%; text-align: left; } .row-link:active { background: var(--bg-soft); } .row-link .rl-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-soft); color: var(--turquoise-deep); display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; } .row-link .rl-ic.danger { background: var(--danger-tint); color: var(--red-text); } .row-link .rl-info { flex: 1; min-width: 0; } .row-link .rl-title { font-weight: 900; color: var(--text-strong); font-size: .98rem; } .row-link .rl-meta { color: var(--muted); font-size: .82rem; margin-top: 2px; } .row-link .chev { color: var(--muted); } /* ============================================================ SOS Live Overlay (Test Alarm) ============================================================ */ .sos-live { position: fixed; inset: 0; background: linear-gradient(160deg, #b71c1c 0%, #7a0e0e 100%); color: #fff; z-index: 200; display: none; flex-direction: column; padding: 30px 20px calc(30px + env(safe-area-inset-bottom)); overflow-y: auto; } .sos-live.open { display: flex; } .sos-live::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.15), transparent 60%); pointer-events: none; } .sos-live .live-tag { background: var(--surface); color: var(--red-deep-text); padding: 6px 14px; border-radius: 999px; font-weight: 900; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-bottom: 18px; position: relative; } .sos-live .live-tag .ld { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: livePulse 1s infinite; } .sos-live h2 { font-size: 1.8rem; font-weight: 900; letter-spacing: -.02em; margin-bottom: 6px; position: relative; } .sos-live .stamp { opacity: .85; font-size: .95rem; margin-bottom: 22px; position: relative; } .sos-live .step-list { display: grid; gap: 10px; position: relative; margin-bottom: 22px; } .sos-live .step { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); padding: 12px 14px; transition: .3s; } .sos-live .step.done { background: rgba(124,255,181,.15); border-color: rgba(124,255,181,.4); } .sos-live .step.active { background: rgba(255,255,255,.22); border-color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); } .sos-live .step .stnum { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 900; font-size: .9rem; flex-shrink: 0; } .sos-live .step.done .stnum { background: #7CFFB5; color: #0a4023; } .sos-live .step.active .stnum { background: var(--surface); color: var(--red-deep-text); animation: livePulse 1s infinite; } .sos-live .step .sttitle { font-weight: 900; font-size: .95rem; } .sos-live .step .stdesc { font-size: .8rem; opacity: .8; } .sos-live-actions { margin-top: auto; display: grid; gap: 10px; position: relative; } .sos-live .end-btn { background: var(--surface); color: var(--red-deep-text); padding: 16px; border-radius: 14px; font-weight: 900; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; width: 100%; min-height: 56px; } /* ============================================================ Summary Rows (Wizard Step 5) ============================================================ */ .summary-row { display: flex; padding: 6px 0; gap: 14px; align-items: flex-start; } .summary-row .summary-label { font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--turquoise-deep); flex-shrink: 0; min-width: 110px; padding-top: 2px; } .summary-row .summary-value { flex: 1; color: var(--text-strong); font-weight: 700; font-size: 1rem; line-height: 1.4; } .summary-divider { height: 1px; background: var(--line-soft); margin: 4px 0; } /* ============================================================ Drag-Reorder Helper ============================================================ */ .reorder-hint { text-align: center; color: var(--muted); font-size: .82rem; margin: 10px 0 14px; } .list-item.reorder { gap: 10px; } .list-item .order-actions { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; flex-shrink: 0; } .list-item .order-btn { width: 30px; height: 22px; border-radius: 8px; background: var(--bg-soft); color: var(--text); border: 1px solid var(--line); display: grid; place-items: center; font-size: .85rem; } .list-item .order-btn:disabled { opacity: .35; pointer-events: none; } /* Zonen-Radius-Slider: verschiebbarer Punkt auf duenner schwarzer Linie */ input[type="range"].range-line { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; } input[type="range"].range-line::-webkit-slider-runnable-track { height: 1px; background: #111; border-radius: 1px; } input[type="range"].range-line::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid #111; margin-top: -10.5px; box-shadow: 0 1px 4px rgba(0,0,0,.3); } input[type="range"].range-line::-moz-range-track { height: 1px; background: #111; border-radius: 1px; } input[type="range"].range-line::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid #111; box-shadow: 0 1px 4px rgba(0,0,0,.3); } /* ============================================================ Loader / Splash ============================================================ */ #splash { position: fixed; inset: 0; background: linear-gradient(160deg, var(--turquoise), var(--blue)); display: grid; place-items: center; z-index: 999; animation: splashFade .6s .8s forwards; } #splash .sp-logo-card { background: var(--surface); padding: 28px 36px; border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.25); animation: splashPop .5s ease; } #splash .sp-logo-img { width: 180px; height: auto; display: block; } @keyframes splashPop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes splashFade { to { opacity: 0; visibility: hidden; } } /* ============================================================ Live-Karte auf Geräte-Karte (Startseite) ============================================================ */ .live-map { position: relative; height: 140px; width: 100%; border-radius: 14px; overflow: hidden; margin-top: 12px; background: var(--bg-soft); border: 1px solid var(--line); cursor: pointer; } .live-map img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); } .live-map .map-marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); width: 36px; height: 36px; background: radial-gradient(circle at 35% 30%, #ff6b6b, var(--red) 60%, var(--red-deep)); border: 3px solid #fff; border-radius: 50% 50% 50% 0; rotate: -45deg; box-shadow: 0 6px 14px rgba(229,62,62,.45); display: grid; place-items: center; z-index: 2; } .live-map .map-marker::before { content: ""; width: 10px; height: 10px; background: var(--surface); border-radius: 50%; rotate: 45deg; } .live-map .map-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: rgba(229,62,62,.25); animation: mapPulse 2s ease-out infinite; pointer-events: none; z-index: 1; } @keyframes mapPulse { 0% { transform: translate(-50%, -50%) scale(.4); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } } .live-map .map-label { position: absolute; bottom: 8px; left: 8px; right: 8px; background: rgba(255,255,255,.95); padding: 6px 10px; border-radius: 10px; font-size: .8rem; font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 10px rgba(0,0,0,.08); } .live-map .map-label .map-mode { background: var(--bg-soft); color: var(--turquoise-deep); padding: 2px 8px; border-radius: 999px; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 900; flex-shrink: 0; } .live-map.no-loc { display: grid; place-items: center; text-align: center; color: var(--muted); background: var(--bg-soft); } .live-map.no-loc .map-empty { font-weight: 700; font-size: .9rem; padding: 14px; } /* Vollbild-Karte auf Standort-Detail-Seite */ .map-canvas { width: 100%; height: 360px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 14px; /* Wichtig: eigener Stacking-Context. Leaflet-Controls haben intern z-index: 1000 und würden sonst die Tabbar (z-index: 30) und den Header überdecken. */ isolation: isolate; position: relative; z-index: 0; } /* Doppelt-gesichert auch direkt am Leaflet-Root, falls .map-canvas irgendwann ohne unsere Klasse genutzt würde. */ .leaflet-container { isolation: isolate; z-index: 0 !important; } /* Kompakte Karte auf Startseite */ .map-canvas.home-map { height: 240px; margin-bottom: 0; } @media (min-width: 520px) { .map-canvas.home-map { height: 260px; } } /* Leaflet-Marker: weißer Hintergrund/Border vom DivIcon entfernen */ .leaflet-div-icon.noa-marker-wrap { background: transparent !important; border: 0 !important; } .noa-marker-wrap .noa-marker { width: 40px; height: 40px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ff6b6b, var(--red) 60%, var(--red-deep)); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 8px 18px rgba(229,62,62,.55); } /* Leaflet-Popup im NOA-Stil */ .leaflet-popup-content-wrapper { border-radius: 14px !important; box-shadow: 0 12px 30px rgba(16,63,124,.18) !important; } .leaflet-popup-content { margin: 12px 14px !important; font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif !important; } .noa-marker { width: 40px; height: 40px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ff6b6b, var(--red) 60%, var(--red-deep)); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 8px 18px rgba(229,62,62,.55); } /* Pin-Farbe nach Standort-Alter (Homescreen-Karte, 2026-06-11): Default = rot (Standort 5 Min oder älter bzw. unbekannt), --fresh = grün (< 5 Min). */ .noa-marker-wrap .noa-marker--fresh, .noa-marker--fresh { background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a 60%, #14532d); box-shadow: 0 8px 18px rgba(21,128,61,.55); } /* ============================================================ Geräte-Card mit Karte (groß, Dashboard) ============================================================ */ .device-card-big { background: linear-gradient(135deg, var(--surface), var(--bg-soft)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); transition: transform .15s ease; cursor: pointer; text-align: left; width: 100%; display: block; font: inherit; color: inherit; } .device-card-big:active { transform: scale(.99); } .device-card-big .card-head { display: flex; align-items: center; gap: 14px; } .device-card-big .card-head .device-info { flex: 1; min-width: 0; } .device-card-big .card-head .name { font-weight: 900; color: var(--text-strong); font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .device-card-big .card-head .meta { color: var(--muted); font-size: .82rem; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .device-card-big .card-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } /* ============================================================ Forms / Multi-Select für Kontakte ============================================================ */ .contact-pick { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: .15s; width: 100%; text-align: left; } .contact-pick:active { transform: scale(.99); } .contact-pick.selected { border-color: var(--turquoise); background: var(--bg-soft); } .contact-pick .cp-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex-shrink: 0; color: transparent; transition: .15s; } .contact-pick.selected .cp-check { background: var(--turquoise); border-color: var(--turquoise); color: #fff; } .contact-pick .cp-check svg { width: 16px; height: 16px; stroke-width: 3; } .contact-pick .cp-info { flex: 1; min-width: 0; } .contact-pick .cp-name { font-weight: 900; color: var(--text-strong); font-size: .98rem; } .contact-pick .cp-meta { color: var(--muted); font-size: .82rem; font-weight: 600; } .contact-pick.disabled { opacity: .4; cursor: not-allowed; } /* ============================================================ Deaktivierte Optionen (No-Movement-Alert) ============================================================ */ .option-disabled { position: relative; opacity: .6; } .option-disabled .toggle { pointer-events: none; } .tag-locked { display: inline-flex; align-items: center; gap: 5px; background: var(--amber-soft); color: var(--amber); padding: 4px 10px; border-radius: 999px; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin-left: 8px; } /* ============================================================ Ortungsmodus-Karte ============================================================ */ .location-mode-card { background: linear-gradient(135deg, var(--bg-soft), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .location-mode-card .lm-info { flex: 1; min-width: 0; } .location-mode-card .lm-mode { font-weight: 900; color: var(--text-strong); font-size: .98rem; } .location-mode-card .lm-battery { color: var(--turquoise-deep); font-weight: 800; font-size: .82rem; margin-top: 2px; } .location-mode-card .lm-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 6px 14px rgba(0,169,180,.32); } /* ============================================================ Info-Button + Sheet ============================================================ */ .info-btn { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-soft); color: var(--turquoise-deep); display: inline-grid; place-items: center; font-size: .8rem; font-weight: 900; border: 1px solid var(--line); margin-left: 6px; cursor: pointer; vertical-align: middle; } /* ============================================================ Refer / Share Card ============================================================ */ .refer-hero { background: linear-gradient(160deg, var(--turquoise) 0%, var(--blue) 100%); color: #fff; border-radius: 24px; padding: 28px 22px; text-align: center; box-shadow: var(--shadow-lg); margin-bottom: 18px; position: relative; overflow: hidden; } .refer-hero::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); } .refer-hero .gift-emoji { font-size: 3rem; margin-bottom: 8px; position: relative; } .refer-hero .refer-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; margin-bottom: 8px; position: relative; } .refer-hero .refer-sub { opacity: .92; font-size: .95rem; line-height: 1.4; position: relative; } .refer-code { background: var(--surface); border: 2px dashed var(--turquoise); border-radius: 16px; padding: 14px; text-align: center; margin-bottom: 14px; } .refer-code .rc-label { font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise-deep); margin-bottom: 4px; } .refer-code .rc-value { font-size: 1.3rem; font-weight: 900; color: var(--text-strong); letter-spacing: .12em; font-family: monospace; } /* ============================================================ Sprach-Picker (Flaggen) - auf Welcome/Login/Register-Screens ============================================================ */ .lang-switch { display: inline-flex; gap: 4px; background: rgba(255,255,255,.7); padding: 4px; border-radius: 999px; border: 1px solid var(--line); box-shadow: 0 4px 10px rgba(16,63,124,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lang-flag { width: 38px; height: 38px; min-width: 38px; border-radius: 999px; display: grid; place-items: center; font-size: 1.25rem; cursor: pointer; transition: all .15s ease; opacity: .55; background: transparent; border: 0; padding: 0; position: relative; } .lang-flag:hover { opacity: .8; } .lang-flag:active { transform: scale(.94); } .lang-flag.active { background: var(--surface); opacity: 1; box-shadow: 0 2px 8px rgba(16,63,124,.18), inset 0 0 0 2px var(--turquoise); } .lang-flag span { line-height: 1; } /* Position auf Welcome-Screen (kein Header) */ .lang-top { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 5; } @media (min-width: 520px) { .lang-top { top: 20px; right: 20px; } } /* ============================================================ Inline-Sprachauswahl (Flaggen) ============================================================ */ .lang-picker { display: inline-flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lang-flag { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; line-height: 1; border: 2px solid transparent; background: transparent; cursor: pointer; transition: .15s; } .lang-flag:active { transform: scale(.94); } .lang-flag.active { border-color: var(--turquoise); background: var(--surface); box-shadow: 0 4px 10px rgba(0,169,180,.25); } .lang-top { position: absolute; top: 14px; right: 14px; z-index: 5; } @media (min-width: 520px) { .lang-top { top: 18px; right: 18px; } } .lang-picker-slot { display: inline-flex; } /* ============================================================ Checkbox-Zeile (AGB-Akzeptanz) ============================================================ */ .checkbox-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 4px; cursor: pointer; user-select: none; margin-bottom: 12px; } .checkbox-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; flex-shrink: 0; margin: 1px 0 0 0; border: 2px solid var(--turquoise); border-radius: 7px; background: var(--surface); cursor: pointer; position: relative; transition: background .15s ease, border-color .15s ease; } .checkbox-row input[type="checkbox"]:checked { background: var(--turquoise); border-color: var(--turquoise); } .checkbox-row input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); } .checkbox-row input[type="checkbox"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--turquoise) 35%, transparent); outline-offset: 2px; } .checkbox-row .checkbox-text { font-size: .92rem; color: var(--text-strong); line-height: 1.4; } .checkbox-row .checkbox-text label { cursor: pointer; } .inline-link { color: var(--turquoise-deep); font-weight: 800; text-decoration: underline; background: none; border: 0; padding: 0; font-size: inherit; cursor: pointer; } /* Eskalations-Häkchen: klares Kästchen, Haken nur sichtbar wenn aktiviert. */ input.esc-cb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex-shrink: 0; margin: 0; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; position: relative; transition: background .15s ease, border-color .15s ease; } input.esc-cb:checked { background: var(--turquoise); border-color: var(--turquoise); } input.esc-cb:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); } input.esc-cb:disabled { opacity: .4; cursor: not-allowed; } /* Kanal-/Auswahl-Zeile: zeigt den Aktiv-Zustand klar (Checkbox = .esc-cb). :has() hebt die ganze Zeile bei aktivem Häkchen hervor; ohne :has-Support bleibt die .esc-cb selbst der klare Indikator. */ .toggle-row.chan-row { cursor: pointer; } .toggle-row.chan-row:has(input.esc-cb:checked) { border-color: var(--turquoise); background: #f0fbfc; } .toggle-row.option-locked { opacity: .65; } .toggle-row.option-locked .esc-cb { cursor: not-allowed; } .lock-tag { display: inline-block; font-size: .66rem; font-weight: 800; color: var(--orange-deep, #c77700); background: var(--orange-soft, #fff3e0); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; text-transform: none; letter-spacing: 0; } /* Gerätefoto-Button im Geräte-Detail-Hero (tippen → Kamera/Galerie). */ .dh-visual-btn { position: relative; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; line-height: 0; border-radius: 16px; } .dh-visual-btn:active { transform: scale(.97); } .dh-photo-badge { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--turquoise); color: #fff; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,169,180,.35); } .dh-photo-badge svg { width: 14px; height: 14px; } /* ============================================================ Passwort-Komplexität ============================================================ */ .pwd-strength { margin-top: 8px; } .pwd-strength-bar { width: 100%; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; } .pwd-strength-bar span { display: block; height: 100%; transition: width .25s, background .25s; } .pwd-strength.weak .pwd-strength-bar span { width: 33%; background: var(--red); } .pwd-strength.medium .pwd-strength-bar span { width: 66%; background: var(--orange); } .pwd-strength.strong .pwd-strength-bar span { width: 100%; background: var(--green); } .pwd-strength-label { font-size: .78rem; color: var(--muted); margin-top: 4px; font-weight: 700; } .pwd-strength.weak .pwd-strength-label strong { color: var(--red-text); } .pwd-strength.medium .pwd-strength-label strong { color: var(--orange); } .pwd-strength.strong .pwd-strength-label strong { color: var(--green); } /* ============================================================ Code-Karte "verified" (Bestätigungscode-Schritt) ============================================================ */ .card.verified { border-color: var(--green); background: var(--green-soft); } /* ============================================================ Visually Hidden ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================ Busy-Overlay (API-Requests) ============================================================ */ .busy-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.45); backdrop-filter: blur(1px); } .busy-spinner { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(0,0,0,.15); border-top-color: var(--blue-deep, #1b3a5b); animation: noaspin .8s linear infinite; } @keyframes noaspin { to { transform: rotate(360deg); } } /* ============================================================ Sicherheitszentrale-Fallback (feste, nicht editierbare Zeile) + Zusatzoptionen-Karten (Add-ons im Abo) ============================================================ */ /* Fallback-Zeile: dezent abgesetzt, nicht klickbar. Reuses .list-item. */ .list-item.fallback-row { background: var(--bg-soft); border-style: dashed; box-shadow: none; cursor: default; align-items: flex-start; } .list-item.fallback-row .li-num { background: linear-gradient(135deg, var(--blue-deep), #163a6b); color: #fff; } /* Name + Untertitel dürfen umbrechen (Fallback-Texte sind länger als Kontaktnamen). */ .list-item.fallback-row .li-name { white-space: normal; } .list-item.fallback-row .li-meta { white-space: normal; line-height: 1.35; } .list-item.fallback-row .fallback-mark { display: grid; place-items: center; width: 100%; height: 100%; } .list-item.fallback-row.locked { opacity: .62; } .list-item.fallback-row.locked .li-num { background: var(--line); color: var(--muted); } .fallback-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--turquoise-soft); color: var(--turquoise-deep); font-size: .68rem; font-weight: 900; letter-spacing: .02em; } .fallback-cta { width: auto; min-height: 0; padding: 9px 14px; font-size: .82rem; } /* Add-on-Karten in der Abo-/Zahlungsansicht. Reuses .card. */ .addon-list { display: grid; gap: 12px; } .addon-card { padding: 16px; } .addon-card.booked { border-color: var(--turquoise); background: var(--bg-soft); } .addon-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .addon-title { font-weight: 900; color: var(--text-strong); font-size: 1rem; } .addon-price { color: var(--turquoise-deep); font-weight: 800; font-size: .86rem; white-space: nowrap; } .addon-desc { color: var(--muted); font-size: .86rem; line-height: 1.4; margin: 6px 0 12px; } .addon-cancel { color: var(--red-text); font-weight: 800; font-size: .86rem; text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; } /* Kleine Button-Variante (zum Dazubuchen in Listen/Karten). */ .btn.btn-sm { width: auto; min-height: 0; padding: 10px 16px; font-size: .86rem; } /* ============================================================ my.noa.life — Desktop-Sidebar (Grundstyling) Default display:none — Sichtbarkeit schaltet der Desktop-Block. ============================================================ */ .noa-sidebar { position: fixed; top: 0; left: 0; width: var(--noa-sidebar-w, 264px); height: 100vh; display: none; flex-direction: column; padding: 20px 16px; background: var(--surface); border-right: 1px solid var(--line); z-index: 40; } .noa-sidebar .nsb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; } .noa-sidebar .nsb-logo { height: 34px; width: auto; } .noa-sidebar .nsb-wordmark { font-weight: 900; font-size: 1.05rem; color: var(--text-strong); letter-spacing: -.01em; } .noa-sidebar .nsb-nav { display: flex; flex-direction: column; gap: 4px; } .noa-sidebar .nsb-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; width: 100%; text-align: left; color: var(--muted); font-weight: 800; font-size: .95rem; } .noa-sidebar .nsb-item .nsb-ic { display: inline-flex; } .noa-sidebar .nsb-item .nsb-ic svg { width: 22px; height: 22px; } .noa-sidebar .nsb-item:hover { background: var(--bg-soft); color: var(--text); } .noa-sidebar .nsb-item.active { background: var(--turquoise-soft); color: var(--turquoise-deep); } .noa-sidebar .nsb-account { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; border-radius: 12px; width: 100%; border: 1px solid var(--line); } .noa-sidebar .nsb-account:hover { background: var(--bg-soft); } .noa-sidebar .nsb-acc-info { display: flex; flex-direction: column; line-height: 1.2; text-align: left; min-width: 0; } .noa-sidebar .nsb-acc-name { font-weight: 800; color: var(--text-strong); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .noa-sidebar .nsb-acc-link { font-size: .75rem; color: var(--muted); } .noa-sidebar .nsb-logout { margin-top: 8px; padding: 9px 12px; border-radius: 10px; width: 100%; text-align: left; color: var(--red-text); font-weight: 800; font-size: .85rem; } .noa-sidebar .nsb-logout:hover { background: var(--danger-tint); } /* ============================================================ my.noa.life — Desktop-„Website"-Chrome Greift NUR ab 1024px UND nur eingeloggt (html:not(.is-guest)). Ausgeloggt (.is-guest) bleibt die zentrierte Phone-Frame-Auth-Ansicht aus dem 520px-Block erhalten. Mobile/PWA bleibt komplett unberührt. ============================================================ */ @media (min-width: 1024px) { html:not(.is-guest) { height: auto; } html:not(.is-guest) body { display: block; height: auto; overflow: visible; padding: 0; background: var(--bg-soft); } html:not(.is-guest) #noa-sidebar { display: flex; } html:not(.is-guest) .app { margin-left: var(--noa-sidebar-w, 264px); max-width: none; width: auto; height: auto; min-height: 100vh; max-height: none; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; } html:not(.is-guest) .main, html:not(.is-guest) .main.no-tabbar, html:not(.is-guest) .main.full-bleed { flex: none; height: auto; overflow: visible; max-width: 1080px; margin: 0; padding: 26px 36px 64px; } html:not(.is-guest) .tabbar { display: none !important; } /* Per-View-Header → schlanke Website-Kopfzeile */ html:not(.is-guest) .app-header { position: sticky; top: 0; padding: 16px 36px; min-height: 60px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Marken-Logo in der View-Kopfzeile entfällt (Sidebar trägt die Marke) */ html:not(.is-guest) .app-header .header-logo { display: none; } /* Sticky-Bottom-Buttons brauchen am Desktop keinen Tabbar-Abstand (keine Tabbar) */ html:not(.is-guest) .btn-sticky-bottom { position: static; margin-top: 18px; } } /* ============================================================ my.noa.life — Dashboard-Desktop-Extras Default versteckt; nur ab 1024px (eingeloggt) sichtbar. ============================================================ */ .dash-desktop { display: none; } @media (min-width: 1024px) { html:not(.is-guest) .dash-desktop { display: block; margin: 4px 0 24px; } html:not(.is-guest) .dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; } html:not(.is-guest) .dash-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; } html:not(.is-guest) .dash-tile .dt-val { font-size: 1.7rem; font-weight: 900; color: var(--text-strong); line-height: 1.1; } html:not(.is-guest) .dash-tile .dt-lab { font-size: .82rem; color: var(--muted); font-weight: 700; } html:not(.is-guest) .dash-quick { display: flex; gap: 12px; flex-wrap: wrap; } html:not(.is-guest) .dash-quick .btn { width: auto; } /* Geräteliste wird am Desktop zum Grid */ html:not(.is-guest) .view-dashboard .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } /* Karten-Eigenabstand raus, sonst doppelter Abstand zum Grid-gap */ html:not(.is-guest) .view-dashboard .list .device-card { margin-bottom: 0; } } /* Kontaktzeilen: kein Horizontal-Ueberlauf am Handy. Hinweis: Der eigentliche Fix ist grid-template-columns: minmax(0,1fr) auf .list (s. o.) — die fruehere overflow-wrap-Regel hier war wirkungslos (white-space:nowrap verhindert Umbrueche ohnehin) und ist entfernt. */ .list-item .li-info { min-width: 0; } .list-item .li-badges { overflow: hidden; } .pill { max-width: 100%; } /* ============================================================ Update-Banner (UpdateManager): Browser-Reload + Store-Update. Der Store-Banner (native App) traegt zusaetzlich .nub-close. (Die frueheren PWA-Install-Banner-Styles sind entfernt — die App wird offiziell ueber Play Store / App Store verteilt.) ============================================================ */ .noa-update-bar { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: var(--blue-deep); color: #fff; padding: 12px 14px 12px 18px; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.28); z-index: 200; max-width: 92%; width: max-content; animation: toastSlide .3s ease; } .noa-update-bar .nub-text { font-weight: 800; font-size: .9rem; line-height: 1.25; } .noa-update-bar .nub-btn { flex: none; border: 0; cursor: pointer; background: var(--surface); color: var(--text-strong); font-weight: 900; font-size: .88rem; padding: 9px 16px; border-radius: 999px; } .noa-update-bar .nub-close { flex: none; border: 0; cursor: pointer; background: transparent; color: rgba(255, 255, 255, .8); font-size: 1.3rem; line-height: 1; padding: 2px 6px; } /* ============================================================ "Was ist neu?" – Changelog-Popup (nach Update). Nicht schliessbar per Aussenklick; nur der OK-Button beendet es. ============================================================ */ .noa-cl-backdrop { position: fixed; inset: 0; z-index: 210; background: rgba(10, 44, 90, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; animation: bdFade .25s ease; } .noa-cl-sheet { background: var(--surface); width: 100%; max-width: 430px; border-radius: 24px 24px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 40px rgba(0, 0, 0, .18); animation: sheetSlide .3s cubic-bezier(.2, .9, .3, 1.2); max-height: 85vh; display: flex; flex-direction: column; } .noa-cl-sheet h3 { color: var(--text-strong); font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; margin-bottom: 12px; } .noa-cl-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; padding: 0 2px; } .noa-cl-group { margin-bottom: 16px; } .noa-cl-group:last-child { margin-bottom: 4px; } .noa-cl-ver { font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--turquoise-deep); margin-bottom: 8px; } .noa-cl-list { margin: 0; padding-left: 18px; color: var(--text-strong); font-size: .95rem; } .noa-cl-list li { margin: 0 0 8px; line-height: 1.5; } .noa-cl-ok { margin-top: 14px; flex: none; } /* ============================================================ Ortungs-Einwilligung (Feature 1): Unterschriftenfeld, Switch, Segmented Control. ============================================================ */ .sig-wrap { border: 2px dashed var(--line); border-radius: var(--radius-sm, 12px); background: var(--surface); padding: 4px; } .sig-canvas { display: block; width: 100%; height: 180px; touch-action: none; /* verhindert Scroll beim Zeichnen */ border-radius: 8px; background: var(--surface); cursor: crosshair; } .seg-btn { color: var(--muted); transition: background .15s, color .15s; } .seg-btn.on { background: var(--surface); color: var(--text-strong); box-shadow: 0 2px 6px rgba(0,0,0,.08); } .select-card.is-disabled { cursor: default; } /* ============================================================ Onboarding – Einrichtungs-Checkliste (Dashboard) Warnhinweis + Fortschritt + abhakbare Schritte; die Karte verschwindet automatisch, sobald alles erledigt ist. Basis-Chrome kommt von .card.tight – hier nur Abweichungen. ============================================================ */ .ob-card { display: block; padding-bottom: 4px; margin: 2px 0 18px; } .ob-warn { display: flex; gap: 10px; align-items: flex-start; background: var(--amber-soft); border: 1px solid var(--orange-soft); color: #7c4a03; border-radius: var(--radius-sm); padding: 10px 12px; font-size: .84rem; line-height: 1.45; margin-bottom: 14px; } .ob-warn strong { font-weight: 800; } .ob-warn-ic { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: var(--amber); } .ob-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 8px; } .ob-head h3 { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--turquoise-deep); } .ob-count { color: var(--muted); font-size: .78rem; font-weight: 700; white-space: nowrap; } .ob-bar { height: 8px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line-soft); overflow: hidden; margin: 0 2px 4px; } .ob-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)); transition: width .3s ease; } .ob-list { display: flex; flex-direction: column; } .ob-step { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); } .ob-step:last-child { border-bottom: 0; } button.ob-step:active { background: var(--bg-soft); } .ob-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: var(--muted); border: 1.5px solid var(--line); background: var(--white); } .ob-step.done .ob-mark { background: var(--green); border-color: var(--green); color: #fff; } .ob-step.done .ob-mark svg { width: 14px; height: 14px; } .ob-texts { min-width: 0; flex: 1; display: flex; flex-direction: column; } .ob-t { font-weight: 800; font-size: .9rem; color: var(--text); } .ob-step.done .ob-t { color: var(--muted); } .ob-d { font-size: .78rem; color: var(--muted); line-height: 1.35; } .ob-step.done .ob-d { display: none; } .ob-step .pill { flex: 0 0 auto; } .ob-step .chev { color: var(--muted); flex: 0 0 auto; display: inline-flex; } .ob-lock { color: var(--muted); opacity: .6; flex: 0 0 auto; display: inline-flex; } button.ob-step:focus-visible { outline: 3px solid color-mix(in srgb, var(--turquoise) 35%, transparent); outline-offset: -3px; border-radius: 10px; } /* ===== DARK MODE · styles.css (auto-generated aus CSS-Audit, gezielte Flächen/Text-Korrekturen) ===== */ [data-theme="dark"] .toast{background:#16303e} [data-theme="dark"] .noa-update-bar{background:#16303e} [data-theme="dark"] .noa-update-bar .nub-btn{background:var(--surface);color:var(--text)} [data-theme="dark"] .list-item.fallback-row .li-num{background:linear-gradient(135deg,#16303e,#0e2233)} [data-theme="dark"] .live-map .map-label{color:#0a2540} [data-theme="dark"] .seg-btn.on{background:var(--surface-2);color:var(--text)} [data-theme="dark"] .app{background:var(--surface)} [data-theme="dark"] .app-header{background:rgba(20,31,43,.96)} [data-theme="dark"] .card{background:var(--surface)} [data-theme="dark"] .device-card{background:linear-gradient(135deg,var(--surface),var(--surface-2))} [data-theme="dark"] .empty{background:var(--surface)} [data-theme="dark"] .status-tile{background:var(--surface)} [data-theme="dark"] .quick{background:var(--surface)} [data-theme="dark"] .list-item{background:var(--surface)} [data-theme="dark"] .btn-secondary{background:var(--surface)} [data-theme="dark"] .tabbar{background:rgba(20,31,43,.97)} [data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:var(--surface)} [data-theme="dark"] .toggle-row{background:var(--surface)} [data-theme="dark"] .select-card{background:var(--surface)} [data-theme="dark"] .sheet{background:var(--surface)} [data-theme="dark"] .row-link{background:var(--surface)} [data-theme="dark"] .contact-pick{background:var(--surface)} [data-theme="dark"] .location-mode-card{background:linear-gradient(135deg,var(--surface-2),var(--surface))} [data-theme="dark"] .refer-code{background:var(--surface)} [data-theme="dark"] .checkbox-row input[type="checkbox"]{background:var(--surface)} [data-theme="dark"] input.esc-cb{background:var(--surface)} [data-theme="dark"] .busy-overlay{background:rgba(0,0,0,.45)} [data-theme="dark"] .noa-sidebar{background:var(--surface)} [data-theme="dark"] html:not(.is-guest) .app-header{background:rgba(20,31,43,.92)} [data-theme="dark"] html:not(.is-guest) .dash-tile{background:var(--surface)} [data-theme="dark"] .noa-cl-sheet{background:var(--surface)} [data-theme="dark"] input[type="range"].range-line::-webkit-slider-runnable-track,[data-theme="dark"] input[type="range"].range-line::-moz-range-track{background:var(--line)} /* Welcome-Screen-Sprachumschalter (Dark) — vom Audit übersehen (weiße Pille auf dunklem App-Grund). */ [data-theme="dark"] .lang-switch { background: rgba(20,31,43,.7); border-color: var(--line); } [data-theme="dark"] .lang-flag.active { background: var(--surface-2); box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 0 0 2px var(--turquoise); }