/* ═══════════════════════════════════════════════════════════════════
 * Crew-Companion · App-CSS · Brand-Konform formstube + Plasma-Violet
 * ═══════════════════════════════════════════════════════════════════
 * Module-Akzent: Plasma-Violet #7C3AED · für ALLE Crew-Pages
 * Mona Sans (wdth 125) · Inter · Geist Mono · Hex-Pattern 1:1
 */

/* ─── Fonts (self-hosted · Self-Hosting-First EISERN) ──────────── */
@font-face {
  font-family: 'Mona Sans';
  src: url('/assets/fonts/MonaSansVF.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* ─── Brand-Tokens ─────────────────────────────────────────────── */
:root {
  --ink:        #0A0A0C;
  --paper:      #F0F0F0;
  --stone:      #888888;
  --mist:       #BBBBBB;
  --charcoal:   #15151A;
  --line:       rgba(255,255,255,0.08);

  --accent:     #7C3AED;     /* Plasma-Violet · Crew-Modul */
  --accent-text: #B696F5;
  --accent-soft: rgba(124,58,237,0.10);
  --accent-line: rgba(124,58,237,0.28);

  --warn:       #FFB13C;
  --danger:     #FF6B6B;
  --good:       #4ADE80;

  --margin:     20px;
  --safe-top:   env(safe-area-inset-top, 0);
  --safe-bot:   env(safe-area-inset-bottom, 0);
  --tab-h:      72px;
}

@media (min-width: 720px) {
  :root { --margin: 32px; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* 2026-06-03: app-bar ist jetzt position:fixed (vorher sticky · iOS-Sprung-Bug) →
     body MUSS um die Header-Hoehe (safe-top + 60px Header) nach unten, sonst klebt
     der Hero unter dem Header. Wert auch im @supports-Block unten gespiegelt. */
  padding-top: calc(var(--safe-top) + 60px);
  padding-bottom: calc(var(--tab-h) + var(--safe-bot));
}

a { color: var(--accent-text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent); }
a:active { opacity: 0.8; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ─── Typo-Helpers ─────────────────────────────────────────────── */
.display, h1, h2, h3 {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

.eyebrow.accent { color: var(--accent-text); }

.mono { font-family: 'Geist Mono', monospace; }

/* ─── Hex-Helper · DEPRECATED · nur Fallback ────────────────────
 * Wir nutzen jetzt SVG-Inline (partials/icons.php) statt clip-path
 * weil iOS Safari clip-path + aspect-ratio manchmal als Karo rendert.
 * Diese Klasse bleibt als Fallback für Legacy-Spots. */
.hex {
  aspect-ratio: 1 / 1;
  width: 24px;
  height: 24px;
  clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Top-Bar (App-Header) ─────────────────────────────────────── */
.app-bar {
  /* iOS-PWA-Fix 2026-06-03 (Marc-Report „Header nicht fixiert, springt"):
     position:fixed statt sticky. sticky+top:0 wanderte auf iOS-Standalone wegen
     safe-area-inset beim Scroll (anderer Start- vs. Scroll-End-Punkt) — exakt der
     Bug, den die Controlling-PWA schon hatte. fixed zwingt den Header IMMER bei y=0;
     der body kompensiert die Header-Hoehe via padding-top. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* W4-Fix: Safe-Area-Inset im Header-Padding (Notch-Bereich vom Header-BG
     gefüllt, Inhalt darunter) statt am body → Header startet bündig oben. */
  padding: calc(14px + var(--safe-top)) var(--margin) 12px;
  background: rgba(10,10,12,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.app-bar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-decoration: none;
}
.app-bar-logo-svg {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.app-bar-logo-svg svg { display: block; }
.app-bar-actions { display: flex; align-items: center; gap: 6px; }
.app-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.app-bar-btn:hover, .app-bar-btn:active { color: var(--accent-text); }

/* ─── Hero · Plasma-Violet ─────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 36px var(--margin) 28px;
  background: radial-gradient(ellipse at 80% 20%, rgba(124,58,237,0.14), transparent 65%);
}
.hero-mega {
  position: absolute;
  top: 0;
  right: -4vw;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: clamp(80px, 24vw, 220px);
  line-height: 0.85;
  color: rgba(124,58,237,0.05);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.hero-inner { position: relative; z-index: 1; }
.hero-eyebrow { margin-bottom: 12px; display: inline-flex; align-items: center; gap: 10px; }
.hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.hero-greeting {
  font-size: clamp(34px, 8vw, 56px);
  margin: 4px 0 12px;
}
.hero-greeting .name { color: var(--accent); }
.hero-greeting .dot { color: var(--stone); }
.hero-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  color: var(--mist);
  letter-spacing: 0.04em;
}

/* ─── KPI-Strip ─────────────────────────────────────────────── */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 24px;
}
@media (min-width: 540px) {
  .kpi-strip { grid-template-columns: repeat(4, 1fr); }
}
.kpi-cell {
  padding: 20px 16px 18px;
  background: var(--ink);
  position: relative;
}
.kpi-cell .label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.kpi-cell .val {
  display: block;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: 2rem;
  line-height: 1;
  color: var(--paper);
  letter-spacing: -0.02em;
}
.kpi-cell .val.is-accent { color: var(--accent-text); }
.kpi-cell .val.is-warn { color: var(--warn); }
.kpi-cell .sub {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 0.62rem;
  color: var(--stone);
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ─── Section + Cards ─────────────────────────────────────────── */
.section {
  padding: 32px var(--margin);
  border-bottom: 1px solid var(--line);
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.section h2 {
  font-size: clamp(22px, 5vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section h2 .dot { color: var(--accent); }
.section-link {
  font-family: 'Geist Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Event-Card (Booking) */
.event-card {
  display: block;
  padding: 18px 16px;
  background: rgba(124,58,237,0.04);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  margin-bottom: 10px;
  color: inherit;
  transition: transform .15s, background .15s, border-color .15s;
}
.event-card:hover, .event-card:active {
  background: rgba(124,58,237,0.10);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.event-card .e-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.event-card .e-date {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 120;
  font-size: 1.5rem;
  color: var(--accent-text);
  line-height: 1;
}
.event-card .e-time {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  color: var(--stone);
}
.event-card .e-title {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--paper);
  line-height: 1.25;
  margin-bottom: 6px;
}
.event-card .e-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 10px;
}
.event-card .e-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(255,255,255,0.05);
  border-radius: 99px;
  font-family: 'Geist Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--mist);
}
.badge.is-accent { background: var(--accent-soft); color: var(--accent-text); }
.badge.is-warn { background: rgba(255,177,60,0.12); color: var(--warn); }
.badge.is-today {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* Form-Pages (Login / Profile) */
.form-card {
  padding: 28px var(--margin);
  max-width: 480px;
  margin: 0 auto;
}
.form-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  min-height: 48px;
  transition: border-color .15s, background .15s;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(124,58,237,0.04);
}
.form-label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  min-height: 48px;
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
  width: 100%;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover, .btn-primary:active {
  background: #6a2cd6;
  color: #fff;
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-ghost {
  background: transparent;
  color: var(--mist);
  padding: 10px 16px;
  min-height: 40px;
  font-size: 0.7rem;
  width: auto;
}

/* Flash */
.flash {
  padding: 14px 16px;
  border-radius: 10px;
  margin: 14px 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  border: 1px solid;
}
.flash--success { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.25); color: var(--good); }
.flash--error { background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.25); color: var(--danger); }
.flash--info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }

/* Empty */
.empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--stone);
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Tab-Bar (iOS-Style Bottom-Nav · Mobile-First) */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* EISERN · 5 Tabs · NIE mehrzeilig */
  background: rgba(15,15,18,0.95);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bot);
  overflow: hidden; /* Failsafe gegen Wrap */
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--tab-h);
  padding: 10px 4px 8px; /* enger horizontal · 6→4 */
  font-family: 'Geist Mono', monospace;
  font-size: 0.55rem; /* leicht kleiner · 0.58→0.55 für 5 Tabs */
  letter-spacing: 0.06em; /* engerer Letter-Spacing */
  text-transform: uppercase;
  color: var(--stone);
  text-decoration: none;
  min-width: 0; /* erlaubt Shrink */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tab-item .ti-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--stone);
  position: relative;            /* Anker für Unread-Badge (NACHT-26) */
}
.tab-item .ti-icon svg { display: block; }

/* Unread-Badge auf dem Chat-Tab (NACHT-26) */
.tab-item .ti-badge {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(2px);
  min-width: 17px; height: 17px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #7C3AED); color: #fff;
  font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 0.6rem; line-height: 1;
  border-radius: 99px;
  border: 2px solid var(--bg, #0A0A0C);
  box-shadow: 0 0 8px rgba(124,58,237,0.5);
}
.tab-item .ti-badge[hidden] { display: none; }
.tab-item.is-active {
  color: var(--accent-text);
}
.tab-item.is-active .ti-icon {
  color: var(--accent);
}

/* Install-Banner */
.install-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--tab-h) + var(--safe-bot) + 12px);
  z-index: 60;
  display: none;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(124,58,237,0.08));
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.install-banner.show { display: flex; }
.install-banner .ib-text { flex: 1; font-size: 0.88rem; }
.install-banner .ib-text strong { color: var(--accent-text); }
.install-banner .ib-close {
  width: 32px; height: 32px;
  color: var(--mist);
  font-size: 1.2rem;
}

/* Profil-Page */
.profile-grid {
  display: grid;
  gap: 12px;
}
.profile-row {
  padding: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.profile-row .label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 6px;
}
.profile-row .val {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  color: var(--paper);
  font-size: 1.05rem;
}

/* Schnellaktionen · iOS-Style Quick-Action-Tiles (Flex-Row · refined 2026-06-01) */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
.qa-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 14px;
  background: rgba(124,58,237,0.05);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.qa-card:hover { border-color: var(--accent); background: rgba(124,58,237,0.09); }
.qa-card:active { background: rgba(124,58,237,0.14); transform: scale(0.985); }
.qa-card .qa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--accent);
}
.qa-card .qa-icon svg { display: block; }
.qa-card .qa-label {
  flex: 1;
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--paper);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

/* Mobile · auf sehr schmalen Screens 1-Col */
@media (max-width: 360px) {
  .quick-actions { grid-template-columns: 1fr; }
}

/* Safe-Area-Fix für iOS-Standalone */
@supports (padding: max(0px)) {
  body {
    /* 2026-06-03: + 60px fuer den fixed App-Header (sonst verdeckt er den Hero) */
    padding-top: calc(max(var(--safe-top), 0px) + 60px);
  }
  .tab-bar { padding-bottom: max(var(--safe-bot), 12px); }
}