/* =========================================================================
   CharterLog — App-Layer Styles
   ---
   Gemeinsame Design-Tokens + Layout fuer alle /app/* Seiten (Dashboard,
   Trips, Trip-Detail, Trip-Anlegen). Bewusst getrennt von content.css
   (Legal-Pages) und von den inline-Styles der Katalog-Seiten, damit
   App-spezifische Anpassungen hier isoliert bleiben.
   ========================================================================= */

:root {
  --cl-bg:        #f1f5fa;
  --cl-surface:   #ffffff;
  --cl-surface-2: #f8fafc;
  --cl-border:    #e2e8f0;
  --cl-text:      #0b1220;
  --cl-muted:     #64748b;
  --cl-accent:    #2563eb;
  --cl-accent-dk: #1d4ed8;
  --cl-accent-lt: #dbeafe;
  --cl-good:      #059669;
  --cl-warn:      #d97706;
  --cl-danger:    #dc2626;
  --cl-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.04);
  --cl-shadow-md: 0 4px 14px rgba(15,23,42,.08);
  --cl-radius:    10px;
  --cl-radius-lg: 14px;
  /* v54: Crew-Level / Erfahrungsrang */
  --cl-rank-navy: #071E3A;
  --cl-rank-gold: #D9B24C;
}

/* =========================================================================
   v54 — Crew-Level / Erfahrungsrang Chip + Card
   Public-bucket "rank-badges" liefert die SVGs. Bei 404/Empty wird der
   Fallback (Initialen-Kreis in Gold-on-Navy) gezeigt.
   ========================================================================= */
.cl-rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--cl-rank-navy);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--cl-rank-navy) 80%, #000);
  box-shadow: var(--cl-shadow-sm);
  user-select: none;
}
.cl-rank-chip .cl-rank-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cl-rank-gold);
  color: var(--cl-rank-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex: 0 0 auto;
  overflow: hidden;
}
.cl-rank-chip .cl-rank-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cl-rank-chip .cl-rank-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cl-rank-chip .cl-rank-trips {
  font-size: 11px;
  opacity: 0.75;
  font-weight: 400;
  margin-left: 4px;
}
.cl-rank-chip.is-loading { opacity: 0.5; }

.cl-rank-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--cl-shadow-sm);
}
.cl-rank-card .cl-rank-card-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cl-rank-gold);
  color: var(--cl-rank-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
  border: 2px solid var(--cl-rank-navy);
  overflow: hidden;
}
.cl-rank-card .cl-rank-card-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cl-rank-card .cl-rank-card-body { flex: 1 1 auto; min-width: 0; }
.cl-rank-card .cl-rank-card-eyebrow {
  font-size: 11px;
  color: var(--cl-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 2px;
}
.cl-rank-card .cl-rank-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cl-rank-navy);
  margin: 0;
}
.cl-rank-card .cl-rank-card-sub {
  font-size: 13px;
  color: var(--cl-muted);
  margin: 4px 0 0;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--cl-bg);
  color: var(--cl-text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cl-accent); text-decoration: none; }
a:hover { color: var(--cl-accent-dk); }
h1 { font-size: 24px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 10px; letter-spacing: .02em;
     color: var(--cl-text); }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }

#app-root {
  display: flex; flex-direction: column;
  min-height: 100vh;
}

/* ── Header ────────────────────────────────────────────────────────── */
.cl-app-header {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px;
  background: var(--cl-surface);
  border-bottom: 1px solid var(--cl-border);
  position: sticky; top: 0; z-index: 50;
}
.cl-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--cl-text) !important;
  font-weight: 700;
}
.cl-brand-logo { height: 28px; width: auto; display: block; }
.cl-brand-text b { color: var(--cl-accent); font-weight: 700; }

.cl-app-nav {
  display: flex; gap: 4px;
  flex: 1;
  margin-left: 24px;
}
.cl-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--cl-radius);
  color: var(--cl-muted);
  font-size: 14px;
  font-weight: 500;
}
.cl-nav-link:hover { background: var(--cl-surface-2); color: var(--cl-text); }
.cl-nav-link.active {
  background: var(--cl-accent-lt);
  color: var(--cl-accent-dk);
  font-weight: 600;
}
.cl-nav-link.disabled {
  color: #cbd5e1; cursor: not-allowed; pointer-events: none;
}
.cl-nav-badge {
  background: var(--cl-accent-lt); color: var(--cl-accent-dk);
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.cl-nav-link.disabled .cl-nav-badge {
  background: #e2e8f0; color: var(--cl-muted);
}

/* ── User-Menu ─────────────────────────────────────────────────────── */
.cl-user-menu { position: relative; }
.cl-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--cl-border);
  background: var(--cl-surface);
  border-radius: 999px;
  cursor: pointer;
  color: var(--cl-text);
  font-family: inherit; font-size: 13px;
}
.cl-user-btn:hover { border-color: var(--cl-accent); }
.cl-user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--cl-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
}
.cl-user-email {
  max-width: 180px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-user-caret { color: var(--cl-muted); }
.cl-user-drop {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow-md);
  padding: 6px;
}
.cl-user-drop.open { display: block; }
.cl-user-drop a, .cl-user-drop button {
  display: block; width: 100%;
  padding: 8px 12px;
  text-align: left;
  font-family: inherit; font-size: 13px;
  background: transparent; border: 0;
  color: var(--cl-text);
  border-radius: 6px;
  cursor: pointer;
}
.cl-user-drop a:hover, .cl-user-drop button:hover { background: var(--cl-surface-2); }
.cl-user-drop button { color: var(--cl-danger); }

@media (max-width: 720px) {
  .cl-app-header { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .cl-brand-text { display: none; }
  .cl-app-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto;
                border-top: 1px solid var(--cl-border); padding-top: 6px;
                margin: 6px -14px 0; padding-left: 14px; padding-right: 14px; }
  .cl-nav-link { flex-shrink: 0; }
  .cl-user-email { max-width: 130px; font-size: 12px; }
}

/* ── Main + Footer ─────────────────────────────────────────────────── */
.cl-app-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
}
.cl-app-footer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 20px 24px;
  color: var(--cl-muted); font-size: 12px;
  border-top: 1px solid var(--cl-border);
  background: var(--cl-surface);
}
.cl-app-footer a { color: var(--cl-muted); }
.cl-app-footer a:hover { color: var(--cl-accent); }
.cl-app-footer .sep { opacity: .5; }

/* ── Loading / Error / Toast ──────────────────────────────────────── */
.cl-loading {
  padding: 60px 20px; text-align: center; color: var(--cl-muted);
}
.cl-error {
  background: #fef2f2; border: 1px solid #fecaca;
  color: #991b1b; padding: 14px 18px;
  border-radius: var(--cl-radius);
  font-size: 14px;
}
.cl-empty {
  text-align: center; padding: 50px 20px;
  color: var(--cl-muted);
  background: var(--cl-surface);
  border: 1px dashed var(--cl-border);
  border-radius: var(--cl-radius);
}
.cl-toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px;
  background: var(--cl-text); color: #fff;
  font-size: 13px; font-weight: 500;
  box-shadow: var(--cl-shadow-md);
  z-index: 100;
  transition: opacity .3s ease;
}
.cl-toast.fade { opacity: 0; }
.cl-toast.success { background: var(--cl-good); }
.cl-toast.error { background: var(--cl-danger); }

/* ── Cards / Surfaces ─────────────────────────────────────────────── */
.cl-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  padding: 20px 22px;
  box-shadow: var(--cl-shadow-sm);
}
.cl-card + .cl-card { margin-top: 16px; }
.cl-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.cl-card-head h2 { margin: 0; }
.cl-card-sub { color: var(--cl-muted); font-size: 13px; }

/* ── Grid Helpers ──────────────────────────────────────────────────── */
.cl-grid-2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.cl-grid-3 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.cl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: var(--cl-radius);
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  color: var(--cl-text);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s ease;
}
.cl-btn:hover { border-color: var(--cl-accent); color: var(--cl-accent); }
.cl-btn-primary {
  background: var(--cl-accent); border-color: var(--cl-accent);
  color: #fff;
}
.cl-btn-primary:hover { background: var(--cl-accent-dk); border-color: var(--cl-accent-dk); color: #fff; }
.cl-btn-ghost { background: transparent; border-color: transparent; color: var(--cl-muted); }
.cl-btn-ghost:hover { background: var(--cl-surface-2); color: var(--cl-text); }
.cl-btn-danger { color: var(--cl-danger); border-color: #fecaca; }
.cl-btn-danger:hover { background: #fef2f2; border-color: var(--cl-danger); }
.cl-btn-lg { padding: 11px 20px; font-size: 14px; }
.cl-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Forms ─────────────────────────────────────────────────────────── */
.cl-form-field { margin-bottom: 14px; }
.cl-form-field label {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--cl-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px;
}
.cl-form-field input[type="text"],
.cl-form-field input[type="date"],
.cl-form-field input[type="number"],
.cl-form-field input[type="email"],
.cl-form-field input[type="tel"],
.cl-form-field input[type="url"],
.cl-form-field input[type="password"],
.cl-form-field input[type="search"],
.cl-form-field textarea,
.cl-form-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  background: var(--cl-surface);
  color: var(--cl-text);
  font-family: inherit; font-size: 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* Phase 5C-3l: Validierungsstatus fuer email/tel-Felder. */
.cl-form-field input.cl-input-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
.cl-form-field .cl-field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #b91c1c;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}
/* Phase 5C-3l: Soft Typo-Hint (Email-Domain-Vorschlag, blockt nicht). */
.cl-form-field .cl-field-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #92400e;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}
.cl-form-field .cl-field-hint a.cl-hint-apply {
  color: #b45309;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}
.cl-form-field .cl-field-hint a.cl-hint-apply:hover { color: #78350f; }
.cl-form-field input:focus,
.cl-form-field textarea:focus,
.cl-form-field select:focus {
  outline: none;
  border-color: var(--cl-accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.cl-form-field textarea { min-height: 90px; resize: vertical; }
.cl-form-field .hint {
  font-size: 12px; color: var(--cl-muted);
  margin-top: 4px; text-transform: none; letter-spacing: normal; font-weight: normal;
}
.cl-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 520px) { .cl-form-row { grid-template-columns: 1fr; } }
.cl-form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px;
}

/* ── Tabs (Trip-Detail) ────────────────────────────────────────────── */
.cl-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--cl-border);
  margin-bottom: 20px;
}
.cl-tab {
  padding: 10px 18px;
  background: transparent; border: 0;
  color: var(--cl-muted);
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cl-tab:hover { color: var(--cl-text); }
.cl-tab.active {
  color: var(--cl-accent);
  border-bottom-color: var(--cl-accent);
  font-weight: 600;
}
.cl-tab[disabled] { opacity: .55; cursor: not-allowed; }
.cl-tab-badge {
  background: var(--cl-surface-2); color: var(--cl-muted);
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  margin-left: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── Status-Chips ──────────────────────────────────────────────────── */
.cl-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--cl-surface-2);
  color: var(--cl-muted);
  border: 1px solid var(--cl-border);
}
.cl-status.upcoming { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.cl-status.active   { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.cl-status.past     { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.cl-status.draft    { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* ── Trip-Cards (Dashboard / Trips-Liste) ─────────────────────────── */
.cl-trip-card {
  display: block;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.cl-trip-card:hover {
  border-color: var(--cl-accent);
  transform: translateY(-2px);
  box-shadow: var(--cl-shadow-md);
  color: inherit;
}
.cl-trip-card h3 { margin: 0 0 6px; font-size: 16px; }
.cl-trip-card .meta { color: var(--cl-muted); font-size: 13px; margin-bottom: 10px; }
.cl-trip-card .foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.cl-trip-card .days-left { font-size: 12px; color: var(--cl-muted); }
.cl-trip-card .days-left.soon { color: var(--cl-warn); font-weight: 600; }
.cl-trip-card .days-left.now  { color: var(--cl-good); font-weight: 600; }

/* Trip-Card mit Thumbnail (v44 cover_image_path). Layout:
   <a.has-thumb><div.thumb/><div.body>...</div></a>     */
.cl-trip-card.has-thumb {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 14px;
}
.cl-trip-card .trip-card-thumb {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  background: #e5e7eb center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: visible;       /* Badge darf über den Thumb-Rand ragen */
  position: relative;
}
/* "Neue Fotos"-Badge oben rechts auf dem Thumb. Nur sichtbar, wenn JS
   data-new-photos > 0 setzt. Klein, gut lesbar, kontrastreich. */
.cl-trip-card .trip-card-thumb .new-photos-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--cl-accent, #2563eb);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.45);
  display: none;
  align-items: center;
  gap: 3px;
  line-height: 1;
  white-space: nowrap;
  border: 2px solid #fff;
  z-index: 2;
  animation: trip-card-new-pulse 2.4s ease-in-out infinite;
}
.cl-trip-card .trip-card-thumb[data-new-photos]:not([data-new-photos="0"]) .new-photos-badge {
  display: inline-flex;
}
@keyframes trip-card-new-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-trip-card .trip-card-thumb .new-photos-badge { animation: none; }
}
.cl-trip-card .trip-card-thumb-fallback {
  font-size: 28px;
  opacity: 0.4;
  line-height: 1;
}
/* v57: Landesflagge als Fallback — groesser, voll opak, kein blur. */
.cl-trip-card .trip-card-thumb-fallback.is-flag {
  font-size: 56px;
  opacity: 1;
}
.cl-trip-card .trip-card-thumb:not([data-empty]) .trip-card-thumb-fallback,
.cl-trip-card .trip-card-thumb[style*="background-image"] .trip-card-thumb-fallback {
  display: none;
}
.cl-trip-card .trip-card-body {
  min-width: 0;
}

/* Cover-Bild oberhalb der Eckdaten-KV-Liste im Trip-Detail. */
.trip-eckdaten-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #e5e7eb center/cover no-repeat;
  margin: 4px 0 14px;
}

/* Yacht-Grundriss-Tab. */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.layout-tile {
  position: relative;
  background: #f3f4f6;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  /* Höhe passt sich dem Bild an (Aspect-Ratio des Bildes) — kein Beschnitt
     nach Rotate (portrait ok), keine leeren Flächen bei landscape. */
}
.layout-tile img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.layout-tile-del,
.layout-tile-rot {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.layout-tile-del { top: 6px; right: 6px; opacity: 0; }
.layout-tile-rot {
  bottom: 6px; left: 6px;
  padding: 0 8px;
  width: auto; min-width: 26px;
  font-size: 12px;
  opacity: 0.9;   /* immer sichtbar — der Button ist der einzige Weg zu drehen */
}
.layout-tile:hover .layout-tile-del { opacity: 1; }
.layout-tile:hover .layout-tile-rot { opacity: 1; }
.layout-uploader { background: #f9fafb; }

/* v169: Kabinen-Tab mit Grundriss-Vorschau links */
.cabins-with-plan {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 20px;
  /* stretch: Grid-Row-Hoehe = Belegungspanels; Preview-Cell zieht mit */
  align-items: stretch;
}
.cabins-plan-preview {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  /* Bild + Caption vertikal mittig innerhalb der gestretchten Cell */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.cabins-plan-preview:empty { display: none; }
.cabins-plan-preview img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.cabins-plan-caption {
  padding: 6px 10px;
  font-size: 11px;
  color: #6b7280;
  border-top: 1px solid #f1f5f9;
  text-align: center;
}
.cabins-panel-content { min-width: 0; /* verhindert grid-overflow */ }
@media (max-width: 720px) {
  .cabins-with-plan {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cabins-plan-preview { position: static; max-width: 300px; margin: 0 auto; }
}

/* ── Termin-Abstimmung (v47) ────────────────────────────────────── */
.voting-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.voting-table th, .voting-table td {
  border: 1px solid #e5e7eb; padding: 6px 8px;
  text-align: center; vertical-align: middle;
}
.voting-table thead th { background: #f9fafb; font-weight: 600; }
.voting-table .voting-row-name { font-weight: 500; background: #f9fafb; min-width: 140px; }
.voting-table .voting-slot-winner { background: #dcfce7; color: #166534; }
.voting-cell { white-space: nowrap; }
.voting-vote {
  display: inline-block; min-width: 28px; padding: 4px 6px; margin: 0 1px;
  border: 1px solid #d1d5db; border-radius: 4px; background: #fff;
  cursor: pointer; font-size: 13px; line-height: 1; user-select: none;
}
.voting-vote:hover { background: #f3f4f6; }
.voting-vote.is-active.yes   { background: #dcfce7; border-color: #16a34a; color: #166534; font-weight: 600; }
.voting-vote.is-active.maybe { background: #fef3c7; border-color: #d97706; color: #92400e; font-weight: 600; }
.voting-vote.is-active.no    { background: #fee2e2; border-color: #dc2626; color: #991b1b; font-weight: 600; }
.voting-vote-display.yes   { color: #166534; }
.voting-vote-display.maybe { color: #92400e; }
.voting-vote-display.no    { color: #991b1b; }
.voting-summary { font-size: 11px; }
/* Vote-Buttons in eigener Box, damit die Sterne ordentlich darunter passen. */
.voting-vote-buttons { display: inline-flex; gap: 1px; }
/* Stern-Komponente unter Yes/Maybe-Vote: 1=Standard "kann", 2=bevorzugt, 3=Wunsch. */
.voting-priority-stars {
  display: flex; gap: 1px; justify-content: center;
  margin-top: 3px;
}
.voting-star {
  display: inline-block; padding: 1px 3px; border: 0; background: transparent;
  cursor: pointer; font-size: 14px; line-height: 1; color: #d1d5db;
  user-select: none; transition: color 0.1s;
}
.voting-star:hover { color: #9ca3af; }
.voting-star.is-active { color: #f59e0b; }
/* Read-only-Anzeige der Sterne (für andere User + Sum-Row) */
.voting-priority-stars-ro {
  display: inline-block; color: #f59e0b; font-size: 11px;
  vertical-align: baseline; letter-spacing: -1px;
}
/* Skipper-Notiz-Button neben Interessenten-Namen (nur Owner sichtbar) */
.voting-proxy-note-btn {
  display: inline-block; padding: 1px 4px; margin-left: 4px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 13px; line-height: 1; opacity: 0.55;
}
.voting-proxy-note-btn:hover { opacity: 1; }
.voting-proxy-note-btn.has-note { opacity: 1; }

.voting-finalize-bar {
  margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;
}
.voting-deadline {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #e0e7ff; color: #1e3a8a; font-size: 12px; font-weight: 500;
}
.voting-deadline.soon     { background: #fef3c7; color: #92400e; }
.voting-deadline.expired  { background: #fee2e2; color: #991b1b; }

/* ── Hero-Panel (Dashboard) ────────────────────────────────────────── */
.cl-hero {
  background: linear-gradient(135deg, var(--cl-accent), var(--cl-accent-dk));
  color: #fff;
  border-radius: var(--cl-radius-lg);
  padding: 28px 30px;
  margin-bottom: 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cl-hero h1 { color: #fff; font-size: 22px; margin: 0 0 4px; }
.cl-hero p { color: rgba(255,255,255,.85); font-size: 14px; margin: 0; }
.cl-hero .cl-btn-primary {
  background: #fff; color: var(--cl-accent);
  border-color: #fff;
}
.cl-hero .cl-btn-primary:hover { background: #f1f5fa; color: var(--cl-accent-dk); border-color: #f1f5fa; }

/* ── Stats-Row ─────────────────────────────────────────────────────── */
.cl-stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.cl-stat {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  padding: 16px 18px;
}
.cl-stat .label { font-size: 12px; color: var(--cl-muted); text-transform: uppercase; letter-spacing: .05em; }
.cl-stat .value { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ── Data-Grid (key/value pairs im Trip-Detail) ───────────────────── */
.cl-kv {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
.cl-kv dt { color: var(--cl-muted); font-weight: 500; }
.cl-kv dd { margin: 0; color: var(--cl-text); word-break: break-word; }
@media (max-width: 480px) {
  .cl-kv { grid-template-columns: 1fr; }
  .cl-kv dt { margin-top: 8px; font-size: 12px; }
}

/* ── Logbook-Table (sailing_legs) ─────────────────────────────────── */
.cl-log-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.cl-log-table th, .cl-log-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--cl-border);
}
.cl-log-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cl-muted); font-weight: 600;
  background: var(--cl-surface-2);
}
.cl-log-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cl-log-table tr:last-child td { border-bottom: 0; }
.cl-log-total {
  display: flex; gap: 24px; justify-content: flex-end;
  padding: 12px 0 0;
  font-size: 13px; color: var(--cl-muted);
  border-top: 1px solid var(--cl-border);
  margin-top: 6px;
}
.cl-log-total b { color: var(--cl-text); font-variant-numeric: tabular-nums; }

/* ── Page-Head ─────────────────────────────────────────────────────── */
.cl-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.cl-back-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--cl-muted); font-size: 13px;
  margin-bottom: 10px;
}
.cl-back-link:hover { color: var(--cl-accent); }

/* ── Cabin-Grid (Schiffsposition als 2D-Layout) ──────────────────── */
.cabin-grid-wrap {
  margin: 12px auto; max-width: 480px;
  display: flex; flex-direction: column; gap: 4px;
}
.cabin-grid-axis-top, .cabin-grid-axis-bottom {
  text-align: center; font-size: 11px; color: #6b7280;
  font-weight: 600; padding: 4px;
}
.cabin-grid-axis-side {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #9ca3af; padding: 0 8px;
}
.cabin-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  border: 2px solid #d1d5db; border-radius: 16px 16px 8px 8px;
  padding: 8px; background: #f9fafb;
}
.cabin-grid-cell { min-height: 60px; }
.cabin-grid-full { grid-row: span 3; }
.cabin-grid-empty {
  height: 100%; min-height: 60px;
  display: flex; align-items: center; justify-content: center;
  color: #d1d5db; font-size: 16px;
  border: 1px dashed #e5e7eb; border-radius: 6px;
}
.cabin-grid-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 6px 8px; font-size: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.cabin-grid-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.cabin-grid-edit {
  background: none; border: 0; cursor: pointer; padding: 0 2px;
  font-size: 12px; opacity: 0.6;
}
.cabin-grid-edit:hover { opacity: 1; }
.cabin-grid-add {
  font-size: 11px !important; padding: 2px 8px !important;
  margin-top: 4px;
}

/* Komfort-Score-Pille pro Kabine (v124) — neutraler Indikator, kein Tier */
.cabin-comfort {
  display: inline-block; padding: 1px 6px;
  background: #fef3c7; color: #92400e;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  margin-right: 4px;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION-PANEL — Phase-1+ Tab-Container im nautischen Stil
   (additiv zu .cl-card, NICHT ersetzend — wird gezielt in einzelnen
   Tabs verwendet die das neue Design tragen)
   =================================================================== */
.cl-section-panel {
  background: #fdfaf4;
  border: 1px solid #f1ece2;
  border-left: 3px solid #D9B24C;
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.cl-section-panel > .cl-card-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1ece2;
}
.cl-section-panel > .cl-card-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 600;
  color: #1d3557;
  letter-spacing: 0.005em;
  margin: 0;
}
.cl-section-panel > .cl-card-head h3 {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1d3557;
  font-weight: 700;
  margin: 0;
}
.cl-section-panel .cl-card-sub {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}
/* h3-Inline-Titel innerhalb von section-panels (z.B. Briefing-Cards,
   Checkin-Groups): kleine Tracked-Caps in Navy. */
.cl-section-panel h3.tab-panel-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1d3557;
  font-weight: 700;
  margin: 0 0 8px;
}
/* Heading-Strip mit Akzentlinie unter dem H2 ohne Border — wenn cl-card-head
   nicht das gewünschte Format liefert (Fall: einfache Tab-Heads). */
.tab-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1ece2;
}
.tab-panel-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 600;
  color: #1d3557;
  margin: 0;
  letter-spacing: 0.005em;
}
.tab-panel-head .cl-card-sub {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   TRIP-ÜBERSICHT: Hero · Notizen · Yacht-Catalog
   Cohesive mit Eckdaten-Modal (navy #1d3557 + gold #D9B24C + sand #fdfaf4)
   =================================================================== */
.trip-hero {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
.trip-hero-band {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.trip-hero-photo {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, #c7d4e3 0%, #94a3b8 60%, #475569 100%)
    center/cover no-repeat;
}
.trip-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,53,87,0) 50%, rgba(29,53,87,0.55) 100%);
  pointer-events: none;
}
.trip-hero-status {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 6px; align-items: center;
  z-index: 2;
}
.trip-status-pill {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #1d3557;
  backdrop-filter: blur(4px);
}
.trip-status-pill.option { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.trip-status-pill.confirmed { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.trip-status-pill.expired { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
.trip-hero-edit {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.05);
  color: #1d3557;
  font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.trip-hero-edit:hover { background: #fff; }
.trip-hero-title-block {
  position: absolute; left: 22px; bottom: 18px; right: 22px;
  color: #fff; z-index: 2;
}
.trip-hero-flag {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.trip-hero-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px; font-weight: 600;
  letter-spacing: 0.005em; line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  margin: 0;
}
.trip-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 3px solid #D9B24C;
  background: #fdfaf4;
}
.trip-stat { padding: 14px 18px; border-right: 1px solid #f1ece2; }
.trip-stat:last-child { border-right: 0; }
.trip-stat-label {
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #1d3557;
  font-weight: 700; margin-bottom: 4px;
}
.trip-stat-value {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 16px; font-weight: 600;
  color: #1a2233; letter-spacing: 0.02em;
}
.trip-stat-sub {
  font-size: 11px; color: #94a3b8;
  margin-top: 2px; font-style: italic;
}
.trip-stat-countdown { color: #1d3557; font-weight: 700; }
.trip-hero-details {
  display: flex; flex-wrap: wrap;
  gap: 14px 28px;
  padding: 14px 22px;
  border-top: 1px solid #f1f5f9;
  align-items: flex-start;
}
.trip-detail-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trip-detail-label {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #94a3b8;
  font-weight: 600;
}
.trip-detail-value { font-size: 13px; color: #1a2233; }
.trip-detail-value.mono { font-family: 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.trip-detail-value a { color: #1d3557; font-weight: 500; }

/* Notizen-Card im Logbuch-Quote-Stil */
.trip-notes-card {
  background: #fdfaf4;
  border: 1px solid #f1ece2;
  border-left: 3px solid #D9B24C;
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 14px;
  position: relative;
}
.trip-notes-card::before {
  content: "\201C";
  position: absolute;
  top: -4px; left: 14px;
  font-family: Georgia, serif;
  font-size: 56px; line-height: 1;
  color: #D9B24C; opacity: 0.45;
}
.trip-notes-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-left: 36px;
}
.trip-notes-head h2 {
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #1d3557;
  margin: 0; font-weight: 700;
}
.trip-notes-body {
  font-family: Georgia, serif;
  color: #1a2233; line-height: 1.6;
  padding-left: 36px; font-size: 14.5px;
  white-space: pre-wrap;
}
.trip-notes-empty { color: #94a3b8; font-style: italic; padding-left: 36px; }

/* Yacht-Katalog-Querverlinkung */
.yacht-catalog-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
  display: flex; gap: 14px; align-items: center;
}
.yacht-catalog-img {
  width: 120px; height: 80px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, #e8eef4 0%, #cbd5e1 60%, #94a3b8 100%)
    center/cover no-repeat;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.yacht-catalog-info { flex: 1; min-width: 0; }
.yacht-catalog-title {
  font-family: Georgia, serif;
  font-size: 16px; font-weight: 600;
  color: #1d3557;
}
.yacht-catalog-meta { color: #64748b; font-size: 13px; margin-top: 2px; }
.yacht-catalog-clid {
  color: #94a3b8; font-size: 11px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  margin-top: 4px; letter-spacing: 0.05em;
}