/* ============================================================================
   Daytrippin — Layout und Ansichten
   Anwendungsrahmen, Anmeldung, Onboarding, Startseite, Karten, Detailseiten,
   Chat.
   ============================================================================ */

/* ============================================================================
   ANMELDUNG
   ============================================================================ */

.auth-screen { min-height: 100vh; display: flex; }

.auth-brand {
  flex: 1.1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-12);
  color: #fff;
  /* Verlauf aus den drei Logo-Toenen: dunkle Kontur -> Flaechenblau -> hell. */
  background: linear-gradient(155deg,
    #142B54 0%,
    var(--brand-700) 30%,
    var(--brand-500) 70%,
    #3D6BB8 100%);
}

/* Das rote Logo-Segment als weicher Schein — der einzige Ort, an dem das Rot
   flaechig auftaucht. Sehr niedrig deckend, sonst kippt die Flaeche ins
   Violette. */
.auth-brand::before {
  content: "";
  position: absolute;
  left: -100px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(221, 27, 35, 0.42) 0%, rgba(221, 27, 35, 0) 70%);
  pointer-events: none;
}

/* Angedeutetes Sechseck, das die Logo-Form aufgreift. */
.auth-brand::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -160px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  pointer-events: none;
}

.auth-wordmark {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
}

.auth-wordmark img { width: 34px; height: 34px; }

.auth-headline {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  max-width: 22ch;
}

.auth-sub {
  position: relative;
  z-index: 1;
  margin-top: var(--space-4);
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.82);
}

.auth-foot-note {
  position: relative;
  z-index: 1;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
}

.auth-form-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

.auth-form { width: 100%; max-width: 380px; }
.auth-form h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.auth-form .lead { color: var(--text-soft); font-size: var(--text-sm); margin-bottom: var(--space-6); }

.auth-mobile-logo { display: none; }

.divider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--text-faint);
  font-size: var(--text-xs);
}
.divider-row::before,
.divider-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-google {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-weight: var(--weight-semi);
  color: var(--text);
}
.btn-google:hover { border-color: var(--border-strong); background: var(--surface-muted); }

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}

.auth-bottom {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-soft);
}

@media (max-width: 880px) {
  .auth-brand { display: none; }
  .auth-form-wrap { padding: var(--space-6) var(--space-5); align-items: flex-start; padding-top: var(--space-12); }
  .auth-mobile-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semi);
  }
  .auth-mobile-logo img { width: 36px; height: 36px; }
}

/* ============================================================================
   ONBOARDING
   ============================================================================ */

.onboard-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.onboard-card {
  width: 100%;
  max-width: 540px;
  padding: var(--space-8);
}

.onboard-card h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin: var(--space-6) 0 var(--space-2);
}
.onboard-card .lead { color: var(--text-soft); margin-bottom: var(--space-6); }

.onboard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.step-dots { font-size: var(--text-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .onboard-screen { padding: 0; align-items: stretch; }
  .onboard-card {
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-6) var(--space-5) var(--space-12);
  }
}

/* ============================================================================
   ANWENDUNGSRAHMEN
   ============================================================================ */

.app-screen { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: var(--z-nav);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
}
.sidebar-logo img { width: 30px; height: 30px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-weight: var(--weight-semi);
  font-size: var(--text-base);
  width: 100%;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { background: var(--surface-muted); color: var(--text); }

.nav-item.is-active {
  background: var(--brand-100);
  color: var(--brand-700);
}

.sidebar-foot { margin-top: auto; }

/* Rollenumschalter: Teilnehmen / Organisieren */
.role-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--space-3);
  background: var(--surface-muted);
  border-radius: var(--radius-full);
}
.role-toggle button {
  flex: 1;
  padding: var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-soft);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.role-toggle button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  width: 100%;
  text-align: left;
}
.sidebar-user:hover { background: var(--surface-muted); }
.sidebar-user .name { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.sidebar-user .sub  { font-size: var(--text-xs); color: var(--text-faint); }

/* --- Hauptspalte ---------------------------------------------------------- */

.main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--topbar-h);
  padding: 0 var(--space-8);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.search-box {
  flex: 1;
  /* Ohne min-width: 0 schrumpft das Feld nicht unter die Breite des
     Platzhaltertexts, und auf 375 px schob es den "+"-Knopf aus dem Bild. */
  min-width: 0;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.search-box:focus-within {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: var(--text-base);
  color: var(--text);
}
.search-box svg { width: 16px; height: 16px; color: var(--text-faint); flex-shrink: 0; }

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.view {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8);
}

@media (max-width: 1000px) {
  .topbar { padding: 0 var(--space-4); }
  .view { padding: var(--space-5) var(--space-4); }
}

/* --- Untere Navigation (mobil) -------------------------------------------- */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-row {
  display: flex;
  justify-content: space-around;
  height: var(--bottomnav-h);
}

.bottom-nav .nav-item {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: var(--space-1);
  border-radius: 0;
  font-size: 10px;
  font-weight: var(--weight-semi);
  text-align: center;
  position: relative;
}
.bottom-nav .nav-item:hover { background: none; }
.bottom-nav .nav-item.is-active { background: none; color: var(--brand-500); }

.bottom-nav .count-badge {
  position: absolute;
  top: 2px;
  right: 50%;
  margin-right: -22px;
  margin-left: 0;
}

@media (max-width: 880px) {
  .sidebar { display: none; }
  .bottom-nav { display: block; }
  .app-screen { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
}

/* ============================================================================
   STARTSEITE
   ============================================================================ */

.hero-greet {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-1);
}
.hero-sub { color: var(--text-soft); margin-bottom: var(--space-6); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-4);
}
.section-head h2 { font-size: var(--text-lg); }

/* Waagerechte Kartenreihe, die am Rand der Ansicht ausbricht — so ist
   sichtbar, dass rechts noch mehr kommt. */
.h-scroll {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-8) var(--space-3);
  margin: 0 calc(var(--space-8) * -1);
}
@media (max-width: 1000px) {
  .h-scroll { padding-left: var(--space-4); padding-right: var(--space-4); margin: 0 calc(var(--space-4) * -1); }
}

/* ============================================================================
   EVENTKARTE
   ============================================================================ */

.event-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.h-scroll .event-card { min-width: 280px; max-width: 280px; flex-shrink: 0; }

.event-card .banner {
  height: 108px;
  position: relative;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.event-card .body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.event-card h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }

.event-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-soft);
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}

.event-tags {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: auto;
}

/* Passungswert auf dem Banner. Halbtransparentes Weiss statt Markenfarbe:
   der Verlauf darunter ist bei jedem Event anders, eine feste Farbe kaeme
   mal gut und mal gar nicht. */
.fit-pill {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.94);
  color: #16171B;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
}

.fit-pill-lg {
  top: auto;
  bottom: var(--space-4);
  right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
}

/* Wenige Plaetze frei — der einzige Ort, an dem Warnfarbe auf einer Karte
   erscheint. */
.spots-left {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--warning);
}
.spots-none { color: var(--danger); }

/* ============================================================================
   PERSONENKARTE
   ============================================================================ */

.person-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.person-card-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.person-card .name { font-weight: var(--weight-bold); font-size: var(--text-md); }
.person-card .loc  { color: var(--text-faint); font-size: var(--text-xs); }

.person-tags {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin: var(--space-3) 0;
}

.person-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.person-card-actions .btn { flex: 1; }

/* Kleine Karte fuer die Match-Reihe auf der Startseite */
.match-mini {
  min-width: 168px;
  max-width: 168px;
  flex-shrink: 0;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.match-mini .avatar { margin: 0 auto var(--space-3); }
.match-mini .name { font-weight: var(--weight-bold); font-size: var(--text-sm); margin-top: var(--space-1); }
.match-mini .loc  { color: var(--text-faint); font-size: var(--text-xs); }

.dating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent-100);
  color: var(--accent-600);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* Kachel-Symbole (20.09.2026): rosa Herz = Dating an, blaues Flugzeug = sucht
   Reisebegleitung. Ohne Text — die Bedeutung steht im title und fuer
   Screenreader in .sr-only. */
.card-flags {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.card-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
}
.card-flag.flag-dating { background: var(--flag-dating-tint); color: var(--flag-dating); }
.card-flag.flag-buddy  { background: var(--flag-buddy-tint);  color: var(--flag-buddy); }

/* ============================================================================
   GRUPPENKARTE
   ============================================================================ */

.group-card {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
}
.group-card .body { flex: 1; min-width: 0; }
.group-card .name { font-weight: var(--weight-bold); font-size: var(--text-md); }
.group-card .meta { color: var(--text-faint); font-size: var(--text-xs); margin-top: var(--space-1); }

/* ============================================================================
   DETAILSEITEN
   ============================================================================ */

.detail-header {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.detail-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
}
.detail-header .loc { color: var(--text-soft); margin-top: var(--space-1); }
.detail-header .bio {
  margin-top: var(--space-3);
  max-width: 56ch;
  color: var(--text-soft);
  line-height: var(--leading-snug);
}

.detail-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-left: auto;
}

@media (max-width: 640px) {
  .detail-actions { margin-left: 0; width: 100%; }
  .detail-actions .btn { flex: 1; }
}

.event-banner {
  height: 200px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-6);
  background-size: cover;
  background-position: center;
}

.info-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-soft);
  margin-bottom: var(--space-3);
}
.info-line svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-faint); }

.stat-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-6) 0;
}

.stat-box {
  flex: 1;
  min-width: 130px;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.stat-box .num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}
.stat-box .lab { color: var(--text-soft); font-size: var(--text-xs); margin-top: var(--space-1); }

.match-explain {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}
.match-explain .headline {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.match-explain .headline .big {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semi);
  color: var(--brand-500);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.common-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

/* ============================================================================
   CHAT
   ============================================================================ */

.chat-wrap {
  display: flex;
  flex-direction: column;
  /* Die Hoehe wird ausgerechnet statt auf 100% gesetzt: sonst waechst der
     Verlauf ueber den Bildschirm hinaus und das Eingabefeld wandert nach
     unten weg.

     --chat-h setzt messages.js nach dem Aufbau auf den tatsaechlich freien
     Platz (gemessen ab der Oberkante des Chatfensters). Die Rechnung hier ist
     nur der Wert bis dahin — und fuer den Fall, dass JS nicht laeuft.
     100dvh statt 100vh, weil auf dem Handy die ein- und ausfahrende
     Adressleiste sonst nicht mitgerechnet wird. */
  height: var(--chat-h, calc(100dvh - var(--topbar-h) - var(--space-16)));
  max-height: 760px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Auf dem Handy steht ueber dem Chat zusaetzlich der Zurueck-Knopf und unten
   die feste Navigationsleiste. Ohne diese Abzuege rutschte das Eingabefeld
   darunter und war nicht mehr erreichbar — sichtbar wurde das erst, sobald
   eine Nachricht im Verlauf stand. */
@media (max-width: 880px) {
  .chat-wrap {
    height: var(--chat-h, calc(100dvh - var(--topbar-h) - var(--bottomnav-h)
                               - env(safe-area-inset-bottom)
                               - var(--space-16) - var(--space-6)));
    max-height: none;
  }
}

.chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Verhindert, dass beim Scrollen am Ende die ganze Seite mitzieht. */
  overscroll-behavior: contain;
}

.bubble {
  max-width: min(72%, 46ch);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  overflow-wrap: break-word;
  animation: bubbleIn var(--dur-base) var(--ease-out);
}

/* Die abgeflachte Ecke zeigt zur sendenden Seite — damit ist ohne Farbe
   erkennbar, wer geschrieben hat. */
.bubble-mine {
  align-self: flex-end;
  background: var(--brand-500);
  color: var(--text-on-brand);
  border-bottom-right-radius: var(--radius-xs);
}

.bubble-their {
  align-self: flex-start;
  background: var(--surface-muted);
  color: var(--text);
  border-bottom-left-radius: var(--radius-xs);
}

.bubble-time {
  font-size: 10px;
  opacity: 0.65;
  margin-top: var(--space-1);
  display: block;
  font-variant-numeric: tabular-nums;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-input {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-input textarea {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.chat-input textarea:focus {
  outline: none;
  border-color: var(--brand-400);
}

.conv-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  width: 100%;
  text-align: left;
}
.conv-item:last-child { border-bottom: none; }
.conv-item:hover { background: var(--surface-muted); }
.conv-item .name { font-weight: var(--weight-semi); }
.conv-item .preview {
  color: var(--text-faint);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item.is-unread .name { font-weight: var(--weight-bold); }
.conv-item.is-unread .preview { color: var(--text); font-weight: var(--weight-medium); }

/* ============================================================================
   BENACHRICHTIGUNGEN
   ============================================================================ */

.notif-row {
  border-bottom: 1px solid var(--border);
}
.notif-row:last-child { border-bottom: none; }

.notif-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) 0;
  width: 100%;
  text-align: left;
}

/* "Keine Einladungen mehr von X": unter dem Text, eingerueckt wie der Text. */
/* Nebenaktion unter der Mitteilung: stummschalten, Route anzeigen. Eingerueckt
   auf die Textspalte, damit sie nicht unter dem Bild klebt. */
.notif-mute,
.notif-extra {
  margin: calc(var(--space-2) * -1) 0 var(--space-3) calc(8px + 36px + var(--space-3) * 2 - var(--space-3));
  color: var(--text-soft);
  white-space: normal;
  text-align: left;
}

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-500);
  flex-shrink: 0;
  margin-top: 7px;
}
.notif-item.is-read .notif-dot { background: var(--border); }
.notif-item.is-read .notif-text { color: var(--text-soft); }

.notif-time { color: var(--text-faint); font-size: var(--text-xs); margin-top: var(--space-1); }

/* ============================================================================
   RECHTSSEITEN
   ============================================================================ */

.legal-page { max-width: var(--reading-max); }
.legal-page h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.legal-page p  { margin-bottom: var(--space-4); color: var(--text-soft); }
.legal-page ul { margin: 0 0 var(--space-4) var(--space-5); color: var(--text-soft); }
.legal-page li { margin-bottom: var(--space-2); }

/* ============================================================================
   TRIPS
   ============================================================================ */

.trip-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.h-scroll .trip-card { min-width: 280px; max-width: 280px; flex-shrink: 0; }

.trip-card .banner {
  height: 96px;
  position: relative;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.trip-card .body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.trip-card h3 { font-size: var(--text-md); }

/* Flagge unten links auf dem Farbverlauf. Unter Windows erscheinen statt
   der Flagge zwei Buchstaben — deshalb ein heller Hintergrund, auf dem beides
   lesbar ist. */
.trip-flag {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.94);
  color: #16171B;
  font-size: 1.35rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  box-shadow: var(--shadow-sm);
}

.trip-pill {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.94);
  color: #1A396F;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.trip-pill-success { color: #1F7A54; }
.trip-pill-muted   { color: #5C5F6B; }

.trip-country {
  color: var(--text-faint);
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
}

.trip-owner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
}

.trip-hero {
  height: 180px;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  position: relative;
  margin-bottom: var(--space-6);
}
.trip-hero .trip-flag { left: var(--space-4); bottom: var(--space-4); min-width: 48px; height: 48px; font-size: 1.8rem; }

/* Wuensche an die Begleitung und aehnliche Kennzahlen */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.fact {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.fact .lab { color: var(--text-faint); font-size: var(--text-xs); }
.fact .val { font-weight: var(--weight-semi); font-size: var(--text-sm); margin-top: 2px; }

/* ============================================================================
   PERSONEN: Aktivitaet, Verifiziert, naechster Trip
   ============================================================================ */

.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }

.activity-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}
.activity-online { background: var(--success); }
.activity-recent { background: var(--brand-200); }

.verified-mark { color: var(--brand-500); display: inline-flex; vertical-align: -2px; }

.next-trip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--brand-050);
  color: var(--brand-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-align: left;
}
.next-trip:hover { background: var(--brand-100); }

/* ============================================================================
   SCHNELLFILTER UND FILTER-DIALOG
   ============================================================================ */

/* Eine Reihe Chips, die auf dem Telefon seitlich scrollt statt umzubrechen —
   so bleibt die Liste darunter im Blick. */
.chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .chip-select { white-space: nowrap; flex-shrink: 0; }
.chip-row-label {
  align-self: center;
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  margin-right: var(--space-1);
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  margin-bottom: var(--space-4);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  min-height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text-soft);
}
.segmented button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--brand-500);
  color: var(--text-on-brand);
  font-size: 11px;
  font-weight: var(--weight-bold);
}

.sheet-section {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.sheet-section:last-of-type { border-bottom: 0; }
.sheet-section > h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}
.sheet-section .field { margin-bottom: var(--space-3); }
.range-row { display: flex; gap: var(--space-3); align-items: center; }
.range-row > * { flex: 1; min-width: 0; }

/* Auswahl beim "+"-Knopf */
.create-choice {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
}
.create-choice:hover { border-color: var(--brand-300); background: var(--brand-050); }
.create-choice .ico {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brand-100);
  color: var(--brand-600);
}
.create-choice .sub { color: var(--text-faint); font-size: var(--text-xs); margin-top: 2px; }

/* Schnellaktionen auf der Startseite */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* Entfernbare Chips (Wunschlaender) */
.chip-removable { padding-right: var(--space-1); gap: var(--space-1); }
.chip-removable button {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.chip-removable button:hover { background: var(--brand-200); }

/* ============================================================================
   EINSTELLUNGEN — MITTEILUNGS-ZENTRALE (Push / E-Mail je Art)
   ============================================================================ */

.notif-matrix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: var(--space-4);
  align-items: stretch;
}
.notif-matrix .nm-head {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-weight: var(--weight-semi);
  text-align: center;
  padding-bottom: var(--space-2);
}
.notif-matrix .nm-label,
.notif-matrix .nm-cell {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.notif-matrix .nm-cell { display: flex; align-items: center; justify-content: center; color: var(--text-faint); }
.notif-matrix .lab { font-weight: var(--weight-semi); font-size: var(--text-base); }
.notif-matrix .sub { color: var(--text-faint); font-size: var(--text-xs); margin: var(--space-1) 0 0; }
.quiet-hours { align-items: center; }
.quiet-hours select { width: auto; min-width: 7.5rem; }