/* =====================================================================
   MFC-Noris Flugbuch — Mobile-first Stylesheet
   Basiert auf MFC-Design-Palette (Navy + Orange)
   ===================================================================== */

:root {
  /* MFC-Palette — synchron zur Website (theme-next) */
  --blue:         #1e4d8c;   /* = --tn-navy */
  --blue-deep:    #153a6b;   /* = --tn-navy-deep */
  --blue-darker:  #0d2347;   /* = --tn-navy-darker (für Header-Verlauf) */
  --blue-light:   #3b7bc8;   /* eigene sekundäre Hierarchie (Toast-info, Links) */
  --orange:       #ff8c42;   /* = --tn-orange */
  --orange-deep:  #e86d1f;   /* = --tn-orange-deep */
  --green:        #5a9a6a;
  --red:          #c0392b;   /* warmes Brick-Rot, harmoniert mit Navy/Orange */
  --red-deep:     #962b1f;
  --yellow:       #f5a524;

  --bg:          #f4f7fb;
  --card:        #ffffff;
  --border:      #dde6f0;
  --text:        #1a2332;
  --text-muted:  #5a6373;
  --shadow:      0 2px 8px rgba(20, 50, 90, 0.08);
  --shadow-md:   0 4px 16px rgba(20, 50, 90, 0.14);

  --radius:      12px;
  --radius-sm:   8px;
  --radius-pill: 999px;

  --bottom-nav-h: 56px;
  --bottom-nav-margin: 12px;
  --fab-bar-h:    64px;
  --topbar-h:     56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* HTML-`hidden`-Attribut hat Vorrang vor display-Regeln (sonst zeigen flex/grid-Container fälschlicherweise) */
[hidden] { display: none !important; }

html, body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Verhindert dass beim Pull-to-Refresh / Overscroll der weisse Bereich durchscheint */
  overscroll-behavior-y: none;
}
html { background: var(--bg); }
/* Cockpit-Theme: html in dunkler Farbe damit Overscroll nicht weiss leuchtet */
html:has(body.theme-cockpit) { background: #0e131a; }

button { font-family: inherit; font-size: 1rem; cursor: pointer; }
a { color: var(--blue-light); text-decoration: none; }

h1, h2, h3 { font-family: 'Roboto', sans-serif; font-weight: 700; color: var(--text); }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; }
.muted { color: var(--text-muted); font-size: 0.9rem; }

.material-icons { font-size: 1.25em; vertical-align: middle; }

/* ========== LOGIN ========== */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
}
.login-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 32px 24px;
  width: 100%;
  max-width: 380px;
}
.login-brand { text-align: center; margin-bottom: 24px; }
.login-logo {
  font-size: 56px !important;
  color: var(--blue);
  display: inline-block;
  margin-bottom: 8px;
}
.login-brand h1 { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 1.8rem; color: var(--blue); }
.login-brand p { color: var(--text-muted); font-size: 0.95rem; margin-top: 4px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-foot { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 24px; }
.login-error {
  background: #fee;
  color: #c00;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.9rem;
  border-left: 4px solid var(--red);
}
.qr-status { text-align: center; padding: 20px 0; }
.qr-status .material-icons { font-size: 48px !important; color: var(--blue-light); display: block; margin: 0 auto 12px; }
.qr-status .spin { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== FORM ========== */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 0.9rem; font-weight: 600; color: var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
  color: var(--text);
  width: 100%;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 77, 140, 0.12);
}

.pw-wrap { position: relative; }
.pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: none; border: none; padding: 8px;
  color: var(--text-muted);
}

/* ========== BUTTONS ========== */
.btn-primary,
.btn-outline,
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--radius-sm);
  font-weight: 600; border: 2px solid transparent;
  transition: transform 0.06s ease, background 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}
.btn-primary {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-primary:disabled { background: #aac0d8; border-color: #aac0d8; cursor: not-allowed; }
.btn-primary.loading { opacity: 0.7; }

.btn-outline {
  background: transparent; color: var(--blue); border-color: var(--blue);
}
.btn-outline:hover { background: rgba(30,77,140,0.06); }
.btn-outline:disabled { color: #aac0d8; border-color: #aac0d8; cursor: not-allowed; }

.btn-danger { background: var(--red); color: #fff; }

.btn-block { width: 100%; }
.btn-cta { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-cta:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

/* Modifier — nur Farben überschreiben, Layout bleibt von .btn-primary */
.btn-primary.btn-checkin {
  background: linear-gradient(135deg, #6db579 0%, #4a8159 100%);
  border-color: #4a8159;
}
.btn-primary.btn-checkin:hover {
  background: linear-gradient(135deg, #5fa56b 0%, #3d6c4a 100%);
  border-color: #3d6c4a;
}
.btn-primary.btn-checkout {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  border-color: var(--red-deep);
}
.btn-primary.btn-checkout:hover {
  background: linear-gradient(135deg, #a82828 0%, #7d1e15 100%);
  border-color: #7d1e15;
}

.icon-btn {
  background: none; border: none; padding: 8px;
  color: var(--text-muted); border-radius: var(--radius-sm);
}
.icon-btn:hover { background: rgba(0,0,0,0.04); color: var(--text); }

/* ========== APP LAYOUT ========== */
/* Persönlicher Hintergrund (Bild/Video) — Body-Hintergrund wird transparent */
.user-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.user-bg video {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: cover;
}
.user-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(244, 247, 251, var(--user-bg-dim, 0.55));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.has-user-bg { background: transparent; }
body.has-user-bg .app-main { position: relative; z-index: 1; }
/* .app-topbar ist bereits fixed (z-index 80) — bleibt oben unabhängig vom User-Background */
/* Im Cockpit-Theme deaktivieren — eigener Look */
body.theme-cockpit .user-bg { display: none !important; }

.app-body {
  min-height: 100vh;
  background: var(--bg);
  /* Topbar entfernt — App-Main übernimmt Safe-Area-Padding selbst */
  padding-top: 0;
  padding-bottom: 0;
}

/* Standard-only Elemente (im Cockpit-Theme ausgeblendet) */
.standard-only { display: block; }
body.theme-cockpit .standard-only { display: none !important; }

/* Check-in/Check-out Karten-Aktion (Standard-Theme) */
.card-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Topbar — auf einzelnes Account-Icon oben rechts reduziert (kein Hintergrund) */
.app-topbar {
  position: fixed; z-index: 80;
  top: env(safe-area-inset-top);
  left: 0; right: 0;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 12px;
  background: transparent;
  pointer-events: none;
}
.app-topbar > * { pointer-events: auto; }
.topbar-account {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0.5px solid rgba(255, 255, 255, 0.7);
  display: flex; align-items: center; justify-content: center;
}
.topbar-account .material-icons { color: #0D2A4A; }

/* User-Menu-Dropdown */
.user-menu {
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top) + 18px);
  right: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 50, 90, 0.22);
  z-index: 90;
  min-width: 220px;
  overflow: hidden;
  animation: usermenu-pop 0.14s ease;
}
@keyframes usermenu-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-menu-name {
  padding: 10px 14px;
  background: #f4f7fb;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 700; font-size: 0.95rem;
}
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none; border: none;
  color: var(--text);
  font-size: 0.92rem; font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.user-menu-item:hover { background: #f4f7fb; }
.user-menu-item.user-menu-danger { color: var(--red); border-top: 1px solid var(--border); }
.user-menu-item.user-menu-danger:hover { background: #fff0f0; }
.user-chip {
  background: rgba(255,255,255,0.15);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem; font-weight: 600;
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-topbar .icon-btn { color: var(--text-muted); }
.app-topbar .icon-btn:hover { background: rgba(30, 77, 140, 0.08); color: var(--blue); }

.app-main {
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(72px + env(safe-area-inset-bottom));
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.page { display: flex; flex-direction: column; gap: 16px; }
.page[hidden] { display: none; }

.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0;
}

/* ========== CARDS ========== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--border);
}
.card-head { display: flex; align-items: center; gap: 8px; }
.card-head .material-icons { color: var(--blue); }
.card-actions { display: flex; flex-direction: column; gap: 8px; }
.card-wetter {
  background: linear-gradient(135deg, #fff8d6 0%, #ffd84d 45%, #ff9800 100%);
  color: #4a2e00;
  border: none;
  box-shadow: 0 4px 16px rgba(255, 152, 0, 0.25);
}
.card-wetter h2,
.card-wetter .material-icons { color: #4a2e00; }
.card-wetter .muted { color: #6b4500; opacity: 0.85; }
.card-wetter .skeleton-row { background: rgba(74, 46, 0, 0.12); }

.wetter-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.wetter-temp-row { display: flex; align-items: center; gap: 10px; }
.wetter-temp-icon { font-size: 44px !important; color: #4a2e00; }
.wetter-temp { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.wetter-meta { display: flex; flex-direction: column; gap: 4px; font-size: 0.95rem; }
.wetter-row { display: flex; align-items: center; gap: 6px; }

.skeleton-row { height: 60px; background: rgba(255,255,255,0.18); border-radius: var(--radius-sm); }

/* ========== STATUS-BANNER ========== */
.status-banner {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.status-banner.warn  { background: #fff3e0; color: #e86d1f; border-left: 4px solid var(--orange); }
.status-banner.info  { background: #e3f2fd; color: var(--blue); border-left: 4px solid var(--blue); }
.status-banner.error { background: #fee; color: var(--red); border-left: 4px solid var(--red); }

/* ========== INFO-STACK (innerhalb der Wetter-Karte) ========== */
.wetter-info {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 46, 0, 0.18);
}
.wetter-info:empty { display: none; }
.info-row {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.92rem;
}
.info-row .material-icons { font-size: 18px; }
.info-row.row-hoehe { color: #4a2e00; }
.info-row.row-flugleiter { color: #b71c1c; }
.info-row.row-error { color: #b71c1c; }
.info-row .info-meta { color: rgba(74, 46, 0, 0.7); font-weight: 400; font-size: 0.82rem; margin-left: auto; }

/* ========== CHECKIN-LIST ========== */
.checkin-list { display: flex; flex-direction: column; gap: 8px; }
.checkin-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: #f8fafc; border: 1px solid var(--border);
}
.farb-dot {
  display: inline-block;
  width: 16px; height: 16px; border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25);
  vertical-align: middle;
}
.farb-dot.rot    { background: #d32f2f; }
.farb-dot.gelb   { background: #fbc02d; }
.farb-dot.gruen  { background: #388e3c; }

/* Aktuell aktive Piloten (Liste auf der Startseite) */
.aktiv-list { display: flex; flex-direction: column; gap: 8px; }
.aktiv-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--radius-sm);
  background: #f8fafc; border: 1px solid var(--border);
  font-size: 0.95rem;
}
.aktiv-item .pilot-name { font-weight: 600; }
.aktiv-item .modell-info { color: var(--text-muted); font-size: 0.85rem; }
.aktiv-item-grouped {
  display: block;
  padding: 10px 12px;
}
.aktiv-item-mine {
  background: linear-gradient(135deg, #eef5ff 0%, #d9e8fa 100%);
  border-color: #b9d2ee;
  box-shadow: 0 2px 8px rgba(30, 77, 140, 0.10);
}
.aktiv-item-mine .pilot-name::before {
  content: 'Du';
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill);
  margin-right: 8px;
  vertical-align: middle;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.aktiv-pilot-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.aktiv-modelle {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 30px;
  border-left: 2px solid var(--border);
  margin-left: 11px;
  padding-top: 4px;
  padding-bottom: 2px;
}
.aktiv-modell {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 0.88rem;
}
/* Kompakter Verbrenner-Flug-Toggle als Pille */
.flug-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1.5px solid var(--orange);
  background: #fff8f0;
  color: var(--orange-deep);
  border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.flug-pill .material-icons { font-size: 14px !important; }
.flug-pill:hover { background: #ffe8d0; }
.flug-pill:disabled { opacity: 0.5; cursor: not-allowed; }
.flug-pill-live {
  background: var(--orange);
  border-color: var(--orange-deep);
  color: #fff;
  animation: flug-pulse-bg 1.6s ease-in-out infinite;
}
.flug-pill-live:hover { background: var(--orange-deep); }
.flug-pill-live .pulse-dot {
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: pulse 1.4s ease infinite;
}
@keyframes flug-pulse-bg {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,140,66,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(255,140,66,0); }
}
@media (prefers-reduced-motion: reduce) {
  .flug-pill-live, .flug-pill-live .pulse-dot { animation: none; }
}
.gast-badge {
  background: var(--orange); color: #fff; font-size: 0.7rem;
  padding: 2px 6px; border-radius: var(--radius-pill); font-weight: 600;
}

/* ========== FLUGLEITER ========== */
.flugleiter-box .fl-empty { color: var(--text-muted); }
.flugleiter-box .fl-active { color: var(--green); font-weight: 600; }
.fl-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

/* ========== HANGAR ========== */
.hangar-list { display: flex; flex-direction: column; gap: 12px; }
.hangar-item {
  display: flex; gap: 12px; align-items: center;
  background: var(--card); padding: 12px;
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.hangar-foto {
  width: 64px; height: 64px; border-radius: var(--radius-sm);
  object-fit: cover; background: #eef2f7;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}

/* ========== MENU-LIST (Mehr-Page) ========== */
.menu-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.menu-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--border);
  cursor: pointer;
}
.menu-item .material-icons { color: var(--blue); font-size: 28px !important; }
.menu-item div { flex: 1; }
.menu-item div strong { display: block; }
.menu-item div small { color: var(--text-muted); font-size: 0.85rem; }
.menu-item .chevron { color: var(--text-muted); font-size: 24px !important; }

/* Sektions-Label zwischen Funktionen und Konto-Bereich */
.menu-section-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 4px 0;
  margin-top: 4px;
}

/* Danger-Variante (Abmelden) */
.menu-item-danger .material-icons:first-child { color: var(--red); }
.menu-item-danger div strong { color: var(--red); }

/* FAB-Bar entfernt — Check-in/out sind jetzt im Karten-Layout der Startseite. */

/* ========== BOTTOM-NAV (in den Hintergrund eingepasst) ========== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg);
  border-top: 0.5px solid var(--border);
  display: flex;
  z-index: 70;
}
.nav-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: none; border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  padding: 8px 0 6px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.nav-tab .ti       { font-size: 22px; line-height: 1; }
.nav-tab .nav-label { line-height: 1; }
.nav-tab .nav-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: transparent;
  margin-top: 2px;
  transition: background 0.15s ease;
}
.nav-tab:hover           { color: var(--text); }
.nav-tab.active          { color: var(--text); }
.nav-tab.active .nav-dot { background: var(--blue); }

/* ========== TOAST ========== */
.toast {
  position: fixed; left: 16px; right: 16px;
  top: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px);
  background: var(--text); color: #fff;
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(20, 50, 90, 0.22);
  z-index: 250;
  text-align: center;
  animation: toast-slide-down 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes toast-slide-down {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.toast.success { background: var(--green); }
.toast.error   { background: var(--red); }
.toast.info    { background: var(--blue); }
@media (min-width: 720px) {
  .toast { left: 50%; right: auto; transform: translateX(-50%); max-width: 480px; min-width: 280px; }
  @keyframes toast-slide-down {
    from { transform: translate(-50%, -16px); opacity: 0; }
    to   { transform: translate(-50%, 0);     opacity: 1; }
  }
}

/* ========== SHEET / MODAL ========== */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 50, 90, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: sheet-fade 0.18s ease;
}
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  background: var(--card);
  border-radius: 18px 18px 0 0;
  width: 100%; max-width: 720px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  animation: sheet-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grip {
  width: 44px; height: 4px; background: #cdd6e1;
  border-radius: 2px; margin: 8px auto 0;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.sheet-head h2 { font-size: 1.1rem; }
.sheet-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}
.sheet-actions {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 8px;
  position: sticky; bottom: 0;
  background: var(--card);
  margin: 0 -16px -16px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

/* Desktop: Sheet zentriert als Modal */
@media (min-width: 720px) {
  .sheet-overlay { align-items: center; padding: 24px; }
  .sheet { border-radius: var(--radius); max-height: 86vh; max-width: 560px; }
  .sheet-grip { display: none; }
}

/* ========== CHECKBOX-LISTE (Check-in/out) ========== */
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #f8fafc; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.check-row:hover { background: #eef4fb; }
.check-row.selected { border-color: var(--blue); background: #e8f1fa; }
.check-row input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border: 2px solid var(--blue);
  border-radius: 5px;
  background: #fff;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.check-row input[type=checkbox]:checked {
  background: var(--blue);
}
.check-row input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 7px; top: 2px;
  width: 6px; height: 12px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.check-row .ck-info { flex: 1; min-width: 0; }
.check-row .ck-name { font-weight: 600; }
.check-row .ck-meta { color: var(--text-muted); font-size: 0.85rem; }
.check-row .ck-thumb {
  width: 44px; height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef2f7;
}
.check-row .ck-thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.check-row .ck-thumb-placeholder .material-icons { font-size: 22px !important; }

/* ========== HANGAR-ITEM ========== */
.hangar-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.hangar-row { display: flex; align-items: center; gap: 12px; }
.hangar-foto-wrap {
  width: 72px; height: 72px; border-radius: var(--radius-sm);
  overflow: hidden; background: #eef2f7; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.hangar-foto-wrap img { width: 100%; height: 100%; object-fit: cover; }
.hangar-info { flex: 1; min-width: 0; }
.hangar-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.hangar-meta { color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }
.hangar-actions { display: flex; gap: 6px; }
.hangar-inactive { opacity: 0.5; }
.hangar-pill {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.7rem; font-weight: 600; background: #e3f2fd; color: var(--blue);
}
.hangar-pill.inactive { background: #f0f0f0; color: var(--text-muted); }

/* ========== FLUG-TOGGLE (Verbrenner) ========== */
.flug-toggle {
  margin-top: 8px; padding: 10px;
  background: #fff8f0; border: 1.5px solid #ffd9b3;
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 8px;
}
.flug-toggle .flug-state {
  display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-muted);
}
.flug-toggle .flug-state.live { color: var(--orange-deep); font-weight: 600; }
.flug-toggle .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orange-deep); animation: pulse 1.4s ease infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; transform: scale(1.4); } }
.flug-toggle button { min-height: 38px; padding: 8px 12px; font-size: 0.9rem; }

/* ========== HF-Anleitung (Höhenfreigabe Checkliste) ========== */
.hf-anleitung {
  background: #fff8ec;
  border: 1px solid rgba(255, 140, 66, 0.3);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.88rem;
}
.hf-anleitung-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  color: var(--orange-deep);
  font-weight: 700;
}
.hf-anleitung-head .material-icons { font-size: 20px !important; }
.hf-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hf-steps li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 8px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid rgba(255, 140, 66, 0.18);
}
.hf-steps input[type=checkbox] {
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin: 1px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}
.hf-steps label { line-height: 1.4; cursor: pointer; flex: 1; }
.hf-steps label code { background: #fff3e0; padding: 1px 6px; border-radius: 3px; font-weight: 700; color: var(--orange-deep); }
.hf-tel {
  display: inline-block; margin-left: 6px;
  background: var(--orange);
  color: #fff !important;
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}
.hf-tel-big {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff !important;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  box-shadow: 0 3px 10px rgba(232, 109, 31, 0.35);
}
.hf-hinweis {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding: 6px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.hf-hinweis .material-icons { font-size: 16px !important; color: var(--blue-light); }

/* Checklist-Status in der Listen-Ansicht */
.hf-cl-summary {
  display: flex; gap: 6px; margin-top: 6px;
  flex-wrap: wrap;
}
.hf-cl-dot {
  display: inline-flex; align-items: center; gap: 3px;
  background: #f0f0f0; color: #888;
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600;
}
.hf-cl-dot.done { background: #e8f5e9; color: #2e7d32; }
.hf-cl-dot .material-icons { font-size: 12px !important; }

/* ========== HELPER ========== */
.version-foot { text-align: center; color: var(--text-muted); font-size: 0.75rem; padding: 16px 0; }
.empty-state { text-align: center; padding: 40px 16px; color: var(--text-muted); }
.empty-state .material-icons { font-size: 56px !important; color: #c2cfe0; display: block; margin: 0 auto 12px; }

/* ========== DESKTOP-Anpassung (>720px) — bleibt mobile-style aber zentriert ========== */
@media (min-width: 720px) {
  .app-main { padding: 24px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* Bottom-Nav bleibt full-width über alle Breiten — fügt sich besser in den Hintergrund ein */
}

/* =====================================================================
   STARTSEITE — REDESIGN (Standard-Theme)
   Tageszeit-adaptive Wetter-Karte, Höhen-Badge, Check-in-Row, Pilot-Liste
   ===================================================================== */

.ti { font-size: 1em; line-height: 1; vertical-align: middle; }

/* ---------- Sky-Karte (Wetter mit Sonnen-/Mondbogen + optionalem Events-Strip) ---------- */
.sky-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(to bottom, #2196F3 0%, #64B5F6 50%, #BBDEFB 100%);
  transition: background 1.5s ease;
}
.sky-svg-wrap {
  position: relative;
  height: 160px;
  overflow: hidden;
}
.sky-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sky-greeting {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 30, 80, 0.35);
  z-index: 2;
}
.sky-greeting .ti { font-size: 18px; }
.sky-card[data-sky="night"] .sky-greeting { color: #E8EAF6; }

.wetter-glass {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
}
.wetter-glass .skeleton-row { width: 100%; height: 32px; background: rgba(20, 50, 90, 0.08); }
.wg-left  { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wg-icon  { font-size: 28px !important; color: #0D2A4A; flex-shrink: 0; }
.wg-temp  { font-size: 22px; font-weight: 500; color: #0D2A4A; line-height: 1; }
.wg-cond  { font-size: 11px; color: #1A3F66; line-height: 1.2; margin-top: 2px; }
.wg-right { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: #1A3F66; }
.wg-row   { display: flex; align-items: center; gap: 5px; }
.wg-row .ti { font-size: 15px; color: #0D2A4A; }
.wg-sun-row { gap: 4px; }
.wg-sun-row .ti:not(:first-child) { margin-left: 6px; }

/* Sky-Themes (Hintergrund-Gradient) */
.sky-card[data-sky="dawn"]      { background: linear-gradient(to bottom, #FF8A65 0%, #FFB47A 50%, #FFE0B2 100%); }
.sky-card[data-sky="morning"]   { background: linear-gradient(to bottom, #4FC3F7 0%, #81D4FA 50%, #B3E5FC 100%); }
.sky-card[data-sky="noon"]      { background: linear-gradient(to bottom, #2196F3 0%, #64B5F6 50%, #BBDEFB 100%); }
.sky-card[data-sky="afternoon"] { background: linear-gradient(to bottom, #42A5F5 0%, #90CAF9 50%, #FFE082 100%); }
.sky-card[data-sky="dusk"]      { background: linear-gradient(to bottom, #5E35B1 0%, #BA68C8 50%, #FF7043 100%); }
.sky-card[data-sky="night"]     { background: linear-gradient(to bottom, #0D1442 0%, #1A237E 50%, #283593 100%); }

/* Sonne — Position via JS, Bewegung weich animiert */
.sky-sun       { transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.5s ease; }
.sun-body, .sun-glow { transition: fill 1.5s ease; }
.sun-rays line { transition: stroke 1.5s ease; }
.sun-rays      { transition: opacity 1.5s ease; transform-box: fill-box; transform-origin: 50% 50%; animation: sunRayRotate 80s linear infinite; }
.sun-body      { animation: sunPulse 4s ease-in-out infinite; }

@keyframes sunRayRotate { to { transform: rotate(360deg); } }
@keyframes sunPulse {
  0%, 100% { r: 20; }
  50%      { r: 21; }
}

/* Sonnen-Farben pro Tagesphase */
.sky-card[data-sky="dawn"]      .sun-body { fill: #FF7043; } .sky-card[data-sky="dawn"]      .sun-glow { fill: #FF8A65; } .sky-card[data-sky="dawn"]      .sun-rays line { stroke: #FF7043; }
.sky-card[data-sky="morning"]   .sun-body { fill: #FFC107; } .sky-card[data-sky="morning"]   .sun-glow { fill: #FFEB3B; } .sky-card[data-sky="morning"]   .sun-rays line { stroke: #FFC107; }
.sky-card[data-sky="noon"]      .sun-body { fill: #FFEB3B; } .sky-card[data-sky="noon"]      .sun-glow { fill: #FFF59D; } .sky-card[data-sky="noon"]      .sun-rays line { stroke: #FFEB3B; }
.sky-card[data-sky="afternoon"] .sun-body { fill: #FFA726; } .sky-card[data-sky="afternoon"] .sun-glow { fill: #FFB74D; } .sky-card[data-sky="afternoon"] .sun-rays line { stroke: #FFA726; }
.sky-card[data-sky="dusk"]      .sun-body { fill: #FF5722; } .sky-card[data-sky="dusk"]      .sun-glow { fill: #FF7043; } .sky-card[data-sky="dusk"]      .sun-rays line { stroke: #FF5722; }

/* Sonne tief = gedämpfte Strahlen */
.sky-card[data-sky="dawn"] .sun-rays,
.sky-card[data-sky="dusk"] .sun-rays { opacity: 0.3; }
.sky-card[data-sky="morning"] .sun-rays,
.sky-card[data-sky="noon"]    .sun-rays,
.sky-card[data-sky="afternoon"] .sun-rays { opacity: 1; }

/* Bei Nacht: Sonne weg, Mond + Sterne sichtbar */
.sky-card[data-sky="night"] .sky-sun   { opacity: 0; }
.sky-moon  { opacity: 0; transition: opacity 1.5s ease; }
.sky-stars { opacity: 0; transition: opacity 1.5s ease; }
.sky-card[data-sky="night"] .sky-moon  { opacity: 1; }
.sky-card[data-sky="night"] .sky-stars { opacity: 1; }

/* Sterne-Funkeln */
.star { fill: #fff; }
.s1 { animation: twinkle 2.4s ease-in-out infinite; }
.s2 { animation: twinkle 3.1s ease-in-out infinite 0.4s; }
.s3 { animation: twinkle 2.0s ease-in-out infinite 0.8s; }
.s4 { animation: twinkle 2.7s ease-in-out infinite 0.2s; }
.s5 { animation: twinkle 3.2s ease-in-out infinite 1.1s; }
.s6 { animation: twinkle 2.3s ease-in-out infinite 0.6s; }
.s7 { animation: twinkle 2.9s ease-in-out infinite 1.4s; }
.s8 { animation: twinkle 2.6s ease-in-out infinite 0.3s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* Wolken — langsame horizontale Drift, bei Nacht nahezu unsichtbar */
.cloud   { transform-box: fill-box; }
.cloud-a { animation: cloudDrift 80s linear infinite; }
.cloud-b { animation: cloudDrift 60s linear infinite -25s; }
@keyframes cloudDrift {
  0%   { transform: translateX(-120px); }
  100% { transform: translateX(480px); }
}
.sky-card[data-sky="night"] .cloud { opacity: 0.15 !important; }

/* ---------- Veranstaltungs-Strip (permanent, auf Sky-Gradient unter dem Sky-Wrap) ---------- */
.sky-events {
  margin: 0 10px 10px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.sky-events[hidden] { display: none; }
.sky-events-list {
  list-style: none;
  padding: 4px 12px;
  margin: 0;
  display: flex; flex-direction: column;
}
.sky-events-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: #0D2A4A;
  border-top: 0.5px solid rgba(13, 42, 74, 0.12);
  cursor: pointer;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sky-events-list li:first-child { border-top: none; }
.sky-events-list li:hover,
.sky-events-list li:focus-visible {
  background: rgba(13, 42, 74, 0.05);
  outline: none;
}
.sky-events-list .se-cal { font-size: 14px; color: #1A3F66; flex-shrink: 0; }

/* Veranstaltungs-Detail-Sheet */
.ev-detail { display: flex; flex-direction: column; gap: 12px; }
.ev-detail .ev-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.95rem; color: var(--text);
}
.ev-detail .ev-row .material-icons { color: var(--blue); font-size: 22px !important; flex-shrink: 0; }
.ev-detail .ev-row strong { display: block; font-weight: 500; }
.ev-detail .ev-row small { display: block; font-size: 0.8rem; margin-top: 2px; }
.ev-desc {
  background: var(--bg);
  padding: 12px; border-radius: 8px;
  font-size: 0.92rem; line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ev-actions { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.ev-actions .btn-block { width: 100%; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: 0.5px solid transparent; }
.ev-actions .btn-block .ti { font-size: 18px; }
.ev-status {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem; font-weight: 500;
  text-align: center;
}
.ev-status-ok     { background: #DBEDC0; color: #173404; }
.ev-status-wait   { background: #FFF4E5; color: #6B3A0F; }
.ev-status-cancel { background: #FCE8E6; color: #5C0A05; }
.se-date     { font-weight: 500; flex-shrink: 0; min-width: 56px; color: #0D2A4A; }
.se-titel    {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #1A3F66;
}
.se-distance {
  font-size: 11px; color: #1A3F66; flex-shrink: 0;
}

/* Sehr nahe Veranstaltung (< 24h) — blinkend */
.sky-events-list li.is-imminent .se-distance,
.sky-events-head.is-imminent     .se-summary .se-titel {
  color: var(--orange-deep);
  font-weight: 500;
  animation: skyEventBlink 1.6s ease-in-out infinite;
}
.sky-events-head.is-imminent .se-cal { color: var(--orange-deep); }
@keyframes skyEventBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
/* Innerhalb 1–3 Tage — sanfter Akzent, kein Blinken */
.sky-events-list li.is-soon .se-distance { color: var(--orange-deep); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .sky-events-list li.is-imminent .se-distance,
  .sky-events-head.is-imminent .se-summary .se-titel {
    animation: none;
  }
}

/* ---------- Höhenfreigabe-Badge ---------- */
.hoehen-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #EAF3DE;
  border: 0.5px solid #C0DD97;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.hoehen-badge .hb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hoehen-badge .hb-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #C0DD97;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.hoehen-badge .hb-icon .ti { font-size: 18px; color: #173404; transition: color 0.3s ease; }
.hoehen-badge .hb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hoehen-badge .hb-label { font-size: 11px; font-weight: 500; color: #3B6D11; transition: color 0.3s ease; }
.hoehen-badge .hb-value { font-size: 18px; font-weight: 500; color: #173404; transition: color 0.3s ease; }
.hoehen-badge .hb-pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: #97C459;
  color: #173404;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}
.hoehen-badge .hb-pill[hidden] { display: none; }
.hoehen-badge[data-state="personal"] .hb-pill {
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: 0.2px;
}

/* Default-Höhe (300m) — ruhiges Grün */
.hoehen-badge[data-state="default"]   { background: #EAF3DE; border-color: #C0DD97; }

/* Persönliche Freigabe — pulsierendes Grün, etwas kräftiger */
.hoehen-badge[data-state="personal"] {
  background: #DBEDC0;
  border-color: #97C459;
  animation: hoehenPulse 2s ease-in-out infinite;
}
.hoehen-badge[data-state="personal"] .hb-icon  { background: #97C459; }
.hoehen-badge[data-state="personal"] .hb-pill  { background: #5A9A33; color: #fff; }
@keyframes hoehenPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(90, 154, 51, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(90, 154, 51, 0);   }
}

/* Gesperrt — rot */
.hoehen-badge[data-state="gesperrt"] {
  background: #FCE8E6;
  border-color: #E8A4A0;
}
.hoehen-badge[data-state="gesperrt"] .hb-icon  { background: #E8A4A0; }
.hoehen-badge[data-state="gesperrt"] .hb-icon .ti { color: #5C0A05; }
.hoehen-badge[data-state="gesperrt"] .hb-label { color: #8C2A22; }
.hoehen-badge[data-state="gesperrt"] .hb-value { color: #5C0A05; }
.hoehen-badge[data-state="gesperrt"] .hb-pill  { background: #C53C2E; color: #fff; }

/* ---------- Flugleiterbetrieb-Zeile ---------- */
.flugleiter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #FFF4E5;
  border: 0.5px solid #F5C99B;
  font-size: 12px;
  color: #6B3A0F;
}
.flugleiter-row .ti { font-size: 16px; color: #B5651D; }
.flugleiter-row .fl-label { font-weight: 500; }
.flugleiter-row .fl-meta  { color: #8C5A2A; margin-left: auto; font-weight: 400; }

/* ---------- Check-in / Check-out (Standard-Theme) ---------- */
.checkin-row {
  display: flex;
  gap: 8px;
}
.checkin-row > button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 0.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.checkin-row > button .ti { font-size: 18px; }
.btn-checkin-primary {
  flex: 2;
  background: #1D9E75;
  color: #fff;
}
.btn-checkin-primary:hover:not(:disabled)   { background: #178962; }
.btn-checkin-primary:disabled                { opacity: 0.4; cursor: not-allowed; }
.btn-checkout-secondary {
  flex: 1;
  background: #fff;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-checkout-secondary:hover:not(:disabled) { background: #f4f7fb; color: var(--text); }
.btn-checkout-secondary:disabled              { opacity: 0.45; cursor: not-allowed; }
/* Wenn eingecheckt: Check-out wird primary, Check-in tritt zurück */
.checkin-row.is-checkedin .btn-checkin-primary {
  flex: 1;
  background: #fff;
  color: var(--text-muted);
  border-color: var(--border);
}
.checkin-row.is-checkedin .btn-checkout-secondary {
  flex: 2;
  background: #1D9E75;
  color: #fff;
  border-color: transparent;
}
.checkin-row.is-checkedin .btn-checkout-secondary:hover { background: #178962; }

/* ---------- Aktuell-auf-dem-Platz-Karte ---------- */
.aktiv-card {
  background: #fff;
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.aktiv-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.aktiv-head-left  { display: flex; align-items: center; gap: 8px; }
.aktiv-head-left .ti { font-size: 18px; color: var(--blue); }
.aktiv-head-left h2  { font-size: 14px; font-weight: 500; color: var(--text); margin: 0; }
.aktiv-head-right { display: flex; align-items: center; gap: 6px; }
.counter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 0.5px solid transparent;
}
.counter-pill .ti { font-size: 12px; }
.counter-verbr { background: #FAEEDA; color: #633806; border-color: #F0D5A8; }
.counter-total { background: #E3F2FD; color: #0D47A1; border-color: #BBDEFB; }

/* Pilot-Einträge (neue Variante) */
.aktiv-list { display: flex; flex-direction: column; }
.aktiv-list .muted { padding: 8px 0; }
.pilot-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}
.pilot-row:last-child { border-bottom: none; }
.pilot-row.is-mine { background: linear-gradient(90deg, rgba(29,158,117,0.06), transparent 60%); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }

.pilot-avatar-wrap { position: relative; flex-shrink: 0; }
.pilot-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.3px;
}
.pilot-avatar.av-purple { background: #CECBF6; color: #3C3489; }
.pilot-avatar.av-teal   { background: #9FE1CB; color: #085041; }
.pilot-avatar.av-amber  { background: #FAC775; color: #633806; }
.pilot-avatar.av-gast   { background: #F0D5A8; color: #6B3A0F; }
.verbr-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #EF9F27;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
}
.verbr-dot .ti { font-size: 9px; color: #fff; }

.pilot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pilot-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pilot-name     { font-size: 13px; font-weight: 500; color: var(--text); }
.pilot-name-row .gast-pill,
.pilot-name-row .verbr-pill,
.pilot-name-row .mine-pill {
  font-size: 9px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.pilot-name-row .verbr-pill { background: #FAEEDA; color: #633806; }
.pilot-name-row .gast-pill  { background: #E3F2FD; color: #0D47A1; }
.pilot-name-row .mine-pill  { background: #1D9E75; color: #fff; }

.pilot-models { display: flex; flex-direction: column; gap: 2px; }
.pilot-model-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.pilot-model-row .ti { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.pilot-model-row .pm-name { color: var(--text); font-weight: 500; }
.pilot-model-row .flug-pill {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10px;
  border-width: 0.5px;
}
.pilot-model-row .flug-pill .material-icons,
.pilot-model-row .flug-pill .ti { font-size: 12px !important; }

.pilot-time { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.pilot-time .pt-label { font-size: 10px; color: var(--text-muted); line-height: 1; }
.pilot-time .pt-value { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1; }

/* Bei Cockpit-Theme: alte Wetter-Karte aktiv, neue Sky-Karte aus
   (.standard-only / .cockpit-only-Schalter im JS bzw. globalen CSS) */

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sun-rays,
  .sun-body,
  .cloud-a, .cloud-b,
  .star,
  .hoehen-badge[data-state="personal"] {
    animation: none !important;
  }
  .sky-sun, .sky-card { transition: none; }
}

/* ---------- Cockpit-Theme: Bottom-Nav + Account-Icon ---------- */
/* Reset alter Pill-Topbar-Styles, da Topbar jetzt transparent ist */
body.theme-cockpit .app-topbar {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
body.theme-cockpit .topbar-account {
  background: rgba(20, 28, 40, 0.6) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}
body.theme-cockpit .topbar-account .material-icons { color: var(--ck-led-amber); }

body.theme-cockpit .bottom-nav {
  background: var(--ck-bg);
  border-top-color: var(--ck-rim);
}
/* Cockpit-Tab-Reset (alte .tab-item-Regeln neutralisieren) */
body.theme-cockpit .nav-tab.tab-item,
body.theme-cockpit .nav-tab.tab-item.active {
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}
body.theme-cockpit .nav-tab          { color: rgba(255,255,255,0.45); }
body.theme-cockpit .nav-tab:hover    { color: rgba(255,255,255,0.85); }
body.theme-cockpit .nav-tab.active   { color: var(--ck-led-amber); }
body.theme-cockpit .nav-tab.active .nav-dot { background: var(--ck-led-amber); }