/* ── Reset & Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success: #16a34a;
    --danger: #dc2626;
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --radius: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* ── Navbar ───────────────────────────────────────────────────────── */
.navbar {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0.75rem 2rem;
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
}
.nav-links { display: flex; gap: 0.5rem; }
.nav-link {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    transition: background 0.2s;
}
.nav-link:hover, .nav-link.active {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* ── Container ────────────────────────────────────────────────────── */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

h1 { font-size: 1.75rem; margin-bottom: 0.25rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 1rem; color: var(--primary-dark); }
h3 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.subtitle { color: var(--text-muted); margin-bottom: 1.5rem; }

/* ── Stats Grid ───────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}
.stat-card.highlight {
    border-color: var(--success);
    background: #f0fdf4;
}
.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}
.stat-card.highlight .stat-value { color: var(--success); }
.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* ── Filter Bar ───────────────────────────────────────────────────── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.filter-label { font-weight: 600; font-size: 0.9rem; }
.filter-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    background: white;
}

/* ── Tables ────────────────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.data-table th {
    background: var(--primary);
    color: white;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.data-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.data-table tr:hover td { background: #f1f5f9; }
.data-table .price { font-weight: 600; white-space: nowrap; }
.data-table a { color: var(--primary); }

/* ── Calendar Grid ────────────────────────────────────────────────── */
.calendar-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.calendar-month h3 { color: var(--primary-dark); }
.calendar-weeks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 0.5rem;
}
.calendar-week {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    text-align: center;
}
.calendar-week:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.cw-dates { font-size: 0.8rem; color: var(--text-muted); }
.cw-price { font-size: 1.15rem; font-weight: 700; margin: 0.25rem 0; }
.cw-range { font-size: 0.75rem; color: var(--text-muted); }
.cw-offers { font-size: 0.75rem; color: var(--text-muted); }

/* ── Charts ────────────────────────────────────────────────────────── */
.chart-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    position: relative;
    height: 400px;
}
.chart-container canvas { max-height: 100%; }

/* ── Forms ─────────────────────────────────────────────────────────── */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn:hover { background: var(--primary-dark); }
.btn-small { padding: 0.3rem 0.8rem; font-size: 0.8rem; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
/* Links styled as buttons keep their white label (browsers default <a> to blue) */
a.btn, a.btn:visited, a.btn:hover { color: white; text-decoration: none; }

/* ── Checkboxes ────────────────────────────────────────────────────── */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cb-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    background: white;
}
.cb-label:has(input:checked) {
    background: #eff6ff;
    border-color: var(--primary);
}
.cb-label input { accent-color: var(--primary); }

/* ── Messages ──────────────────────────────────────────────────────── */
.msg { padding: 0.5rem; border-radius: var(--radius); margin-top: 0.5rem; font-size: 0.9rem; }
.msg.success { background: #f0fdf4; color: var(--success); }
.msg.error { background: #fef2f2; color: var(--danger); }

/* ── Results Grid (Search) ─────────────────────────────────────────── */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.listing-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.15s, box-shadow 0.15s;
}
.listing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.lc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.lc-name { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.lc-marina-link { color: var(--primary); text-decoration: none; }
.lc-marina-link:hover { text-decoration: underline; }
.nv { color: var(--text-muted); font-style: italic; font-weight: 500; }

.dual-price { display: flex; flex-direction: column; gap: 0.15rem; }
.dual-price-line { display: flex; align-items: center; gap: 0.35rem; justify-content: flex-end; }
.dual-price-line .lo { font-weight: 700; font-size: 1rem; }
.dual-price-line .hi { font-weight: 500; font-size: 0.82rem; color: var(--text-muted); }
a.s-plat { text-decoration: none; }
a.s-plat:hover { opacity: 0.85; }
.extras-paren { color: var(--text-muted); font-weight: 500; font-size: 0.78rem; white-space: nowrap; }
.fav-charter { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.fav-charter a { color: var(--primary); text-decoration: none; }
.fav-charter a:hover { text-decoration: underline; }
.fav-charter .lc-stars { color: #f59e0b; font-weight: 600; }

.search-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    animation: search-pulse 1.4s ease-in-out infinite;
}
.search-loading-dots span {
    display: inline-block;
    animation: search-dot 1.4s infinite ease-in-out both;
}
.search-loading-dots span:nth-child(1) { animation-delay: 0s; }
.search-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.search-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes search-dot {
    0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-3px); }
}
@keyframes search-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

.cm-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e3a8a;
    color: #fff;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.cm-toast.show { opacity: 1; }
.lc-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s;
}
a.lc-badge:hover { background: #dbeafe; }
.lc-details {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.lc-week {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.lc-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}
.lc-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.fav-star {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: #cbd5e1;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    transition: color 0.15s, transform 0.15s;
}
.fav-star:hover { color: #f59e0b; transform: scale(1.15); }
.fav-star.saved { color: #f59e0b; }
.fav-star.saving { color: #94a3b8; }
.fav-star:disabled { cursor: default; }
.lc-avail {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius);
    font-weight: 600;
}
.lc-avail-available { background: #f0fdf4; color: var(--success); }
.lc-avail-booked { background: #fef2f2; color: var(--danger); }
.lc-avail-on_request { background: #fffbeb; color: #d97706; }
.lc-link {
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.lc-link:hover { text-decoration: underline; }

/* ── Button variants ──────────────────────────────────────────────── */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.btn-outline:hover { background: #eff6ff; }
a.btn-outline, a.btn-outline:visited, a.btn-outline:hover { color: var(--primary); text-decoration: none; }

.search-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.search-btns .btn {
    flex: 1 1 0;
    min-width: max-content;   /* nie schmäler als der Text */
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    white-space: nowrap;
}
.btn-boataround { background: #1e3a8a; color: #fff; }
.btn-pitter { background: #0d9488; color: #fff; }   /* Pitter — Teal */
.btn-pitter:hover { background: #0f766e; }
.btn-boataround:hover { background: #1e40af; }
.btn-marenauta { background: #60a5fa; color: #fff; }
.btn-marenauta:hover { background: #3b82f6; }

/* ── Search bar (Boataround-Stil) ──────────────────────────────────── */
.searchbar {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 0.75rem;
    align-items: stretch;
}
.searchbar > .field {
    position: relative;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.searchbar .field-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}
.searchbar .chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.searchbar .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #dbeafe;
    color: #1e3a8a;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.85rem;
    font-weight: 500;
}
.searchbar .chip .x {
    cursor: pointer;
    opacity: 0.6;
    font-weight: 700;
    padding: 0 0.15rem;
}
.searchbar .chip .x:hover { opacity: 1; }
.searchbar input.bare,
.searchbar select.bare,
.searchbar button.bare {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.95rem;
    color: var(--text);
    flex: 1;
    min-width: 80px;
    padding: 0;
}
.searchbar button.bare {
    text-align: left;
    cursor: pointer;
}
.searchbar .suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-height: 280px;
    overflow-y: auto;
    z-index: 20;
}
.searchbar .suggestion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
}
.searchbar .suggestion:hover { background: #f3f4f6; }
.searchbar .suggestion .s-name { font-weight: 500; }
.searchbar .suggestion .s-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: capitalize;
}
.searchbar .date-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 0.75rem;
    display: flex;
    gap: 0.75rem;
    z-index: 20;
}
.searchbar .date-popover label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: var(--text-muted);
    gap: 0.25rem;
}
.searchbar .date-popover input[type=date] {
    padding: 0.4rem 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
}
@media (max-width: 768px) {
    .searchbar { grid-template-columns: 1fr; }
    .searchbar .date-popover { left: 0; right: 0; }
}

/* ── Result filters sidebar ────────────────────────────────────────── */
.results-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}
.filters-col {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    position: sticky;
    top: 4.5rem;                                    /* unter der fixen Nav */
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;                   /* Wheel bleibt drin */
}
.filters-col h3 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 0.4rem;
}
.filter-group { margin-bottom: 1.1rem; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group label.row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    padding: 0.15rem 0;
    font-size: 0.88rem;
    cursor: pointer;
}
.filter-group label.row .count {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.filter-group label.row input { margin-right: 0.4rem; }
.filter-group .range-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.filter-group .range-row input {
    width: 80px;
    padding: 0.35rem 0.45rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.85rem;
}
.filter-group .range-row .sep { color: var(--text-muted); }
.filter-reset {
    color: var(--primary);
    background: none;
    border: 0;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}
@media (max-width: 768px) {
    .results-layout { grid-template-columns: 1fr; }
    .filters-col { position: static; }
}

/* ── Auth + Flash + Settings ───────────────────────────────────────── */
.auth-card {
    max-width: 420px;
    margin: 2rem auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.auth-card h1 { margin-top: 0; }
.flash {
    margin: 0.5rem 0 1rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    font-size: 0.92rem;
}
.flash-info  { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.flash-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Photos + ratings in cards + tables ────────────────────────────── */
.lc-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: #f3f4f6;
}
.cmp-thumb {
    width: 88px; height: 66px; object-fit: cover;
    border-radius: 6px;
    background: #f3f4f6;
}
.lc-stars { color: #f59e0b; font-size: 0.85rem; white-space: nowrap; }
.lc-stars small { color: var(--text-muted); }
.lc-charter {
    font-size: 0.83rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.lc-charter a { color: #2563eb; text-decoration: none; }
.lc-charter a:hover { text-decoration: underline; }

/* ── Results header (sort) ─────────────────────────────────────────── */
.results-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.sort-control {
    font-size: 0.88rem;
    color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.sort-control select {
    padding: 0.3rem 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    font-size: 0.88rem;
}

/* Marina map link inside filter sidebar */
.filter-group .map-link {
    margin-left: 0.35rem;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.15s;
}
.filter-group .map-link:hover { opacity: 1; transform: scale(1.15); }
.filter-group .map-link svg { display: block; }

/* ── Saved searches ────────────────────────────────────────────────── */
.saved-searches {
    display: flex; align-items: center; gap: 0.65rem;
    flex-wrap: wrap;
    margin: -0.5rem 0 1.5rem;
    padding: 0.65rem 0.85rem;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 0.88rem;
}
.saved-searches .saved-label {
    color: var(--text-muted);
    font-weight: 500;
}
.saved-searches #savedChips {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.saved-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0.3rem 0.55rem 0.3rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.saved-chip:hover { border-color: #2563eb; background: #eff6ff; }
.saved-chip .s-text { color: #1e3a8a; }
.saved-chip .x {
    color: #94a3b8; cursor: pointer; padding: 0 0.2rem;
    border-radius: 50%; font-weight: 600;
}
.saved-chip .x:hover { color: #dc2626; background: #fee2e2; }
.s-plat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    margin-right: 0.25rem;
    color: #fff;
    vertical-align: middle;
}
.s-plat-ba { background: #1e3a8a; }
.s-plat-mn { background: #60a5fa; }
.s-plat-pt { background: #0d9488; }

/* ── Dual-range slider ─────────────────────────────────────────────── */
.dual-slider { padding: 0.1rem 0.1rem 0.4rem; }
.dual-values {
    display: flex; justify-content: space-between;
    font-size: 0.82rem; color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.dual-track {
    position: relative; height: 26px;
}
.dual-track::before {
    content: ''; position: absolute;
    left: 0; right: 0; top: 11px; height: 4px;
    background: #e5e7eb; border-radius: 2px;
}
.dual-fill {
    position: absolute; top: 11px; height: 4px;
    background: #2563eb; border-radius: 2px;
    pointer-events: none;
}
.dual-track input[type=range] {
    position: absolute; top: 0; left: 0; width: 100%;
    height: 26px; margin: 0; padding: 0;
    background: transparent; -webkit-appearance: none;
    pointer-events: none;
}
.dual-track input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid #2563eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    cursor: pointer; pointer-events: auto;
}
.dual-track input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid #2563eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    cursor: pointer; pointer-events: auto;
}

/* ── CAPTCHA banner ────────────────────────────────────────────────── */
.captcha-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 1.25rem;
    margin: 1rem 0;
    max-width: 700px;
}
.captcha-banner p { margin: 0.5rem 0; }
.captcha-banner .btn { margin-right: 0.5rem; }

/* ── Per-favorite alert threshold inputs ───────────────────────────── */
.alert-thresh { vertical-align: middle; }
.alert-thresh input {
    width: 70px; padding: 0.25rem 0.4rem;
    border: 1px solid #e5e7eb; border-radius: 4px;
    font-size: 0.8rem;
}

/* Favorites table tweaks */
.col-boat { min-width: 200px; max-width: 240px; }
.cmp-table {
    font-size: 0.88rem;
    width: auto;
    margin-left: 0;
    margin-right: auto;
    overflow: visible;                /* sonst bricht sticky thead */
    border-collapse: separate;        /* collapse blockiert sticky-Borders */
    border-spacing: 0;
}
/* Header beim Scrollen fixieren — Hintergrund muss am th hängen, nicht am thead */
.cmp-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--primary);       /* Header-Blau auch im Sticky-Zustand */
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.cmp-table thead th .hdr-popover { z-index: 10; }
.cmp-table th, .cmp-table td { padding: 0.45rem 0.75rem; }
.cmp-table th { white-space: nowrap; }
.btn-x {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: #fff;
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    padding: 0;
}
.btn-x:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

/* Trend-Indikator unter dem X */
.fav-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;            /* drückt den Punkt nach unten in das weiße Feld */
    padding-bottom: 4px;
}
.trend-dot {
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 50%;
    cursor: help;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.trend-dot-up   { background: #dc2626; }   /* rot: gestiegen */
.trend-dot-down { background: #16a34a; }   /* grün: gefallen */
.trend-dot-flat { background: #cbd5e1; }   /* grau: gleich oder kein Vergleich */

/* Intro / Start-Seite */
.intro-page { max-width: 980px; }
.intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.intro-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.intro-card h2 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.15rem; color: var(--primary); }
.intro-card p { margin-bottom: 1rem; line-height: 1.55; }
.intro-card .btn { display: inline-block; }

/* Sparkline-/Chart-Zelle */
.spark-cell, .chart-cell { padding: 0.25rem 0.4rem; }
.spark-cell svg, .chart-cell svg { display: block; }
.chart-cell { min-width: 330px; }

/* Preisband-Spalte (Google-Flights-Style) */
.price-band-col, .price-band-cell { min-width: 230px; max-width: 250px; }
.price-band-cell { padding: 0.5rem 0.75rem 0.4rem; vertical-align: top; }
.price-band-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.price-bubble-row { position: relative; height: 32px; }   /* eigene Zeile nur für die Bubble */
.price-band-wrap .price-band-svg { display: block; margin-top: 8px; }
.price-bubble {
    position: absolute;
    top: 0;
    width: 140px;
    text-align: center;
    background: #eff6ff;
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    pointer-events: none;
}
.price-bubble strong { font-weight: 700; }
.price-bubble .price-cat { font-size: 0.7rem; opacity: 0.75; font-weight: 500; margin-top: 1px; }
/* Kleines Dreieck unter der Bubble, zeigt nach unten auf den Marker */
.price-bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #eff6ff;
    filter: drop-shadow(0 1px 0 #c7d2fe);
}
.spark-link { display: inline-block; line-height: 0; padding: 2px; border-radius: 4px; cursor: pointer; }
.spark-link:hover { background: #eff6ff; outline: 1px solid var(--primary); }

/* Schmäle Zeitraum-Spalte mit zweizeiligem Datum */
.cmp-table th.hdr-filter[data-filter="week"] { min-width: 90px; max-width: 110px; }
.cmp-table td.week-cell {
    min-width: 80px; max-width: 110px;
    text-align: center; line-height: 1.25;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Chart-Button (📈) — analog .btn-x, neutraler */
.btn-chart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
    width: 22px; height: 22px;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1;
    font-size: 0.95rem;
    margin-right: 4px;
}
.btn-chart:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Chart-Detailseite */
.chart-page { max-width: 980px; }
.chart-meta {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
    align-items: baseline; margin: 0.5rem 0 1rem;
    color: var(--text-muted); font-size: 0.95rem;
}
.chart-meta strong { color: var(--text); }
.chart-canvas-wrap {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    height: 420px;
}

/* Refresh-Button im Lade-Zustand */
.btn.is-loading {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 50%, var(--primary) 100%);
    background-size: 200% 100%;
    animation: btn-loading-shimmer 1.4s linear infinite;
    cursor: progress;
    opacity: 1;
}
.btn.is-loading .hourglass { display: inline-block; animation: btn-loading-spin 1.2s ease-in-out infinite; }
@keyframes btn-loading-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes btn-loading-spin {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}
.fav-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; white-space: nowrap; }
/* Boot-Name als Direkt-Link */
.boat-link { color: var(--primary); text-decoration: none; }
.boat-link:hover { text-decoration: underline; }

/* ── Vergleichs-Tabelle: Sortier-Header + Marina-Popover ──────────── */
.cmp-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}
/* Hover-Tint darf das Blau NICHT durch Weiss-mit-Alpha ersetzen;
   eine leicht dunklere Variante des Primary haelt den Text lesbar. */
.cmp-table th.sortable:hover { background-color: var(--primary-dark); }
.cmp-table th .sort-arrow {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.85;
    min-width: 0.8em;
}
.cmp-table th.sorted-asc, .cmp-table th.sorted-desc {
    background-color: var(--primary-dark);
}

.cmp-table .hdr-filter {
    position: relative;
    overflow: visible;
}
.cmp-table .hdr-filter-btn {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 0.3rem;
    margin-left: 0.25rem;
    border-radius: 4px;
}
.cmp-table .hdr-filter-btn:hover { background: rgba(255,255,255,0.15); }
.cmp-table .hdr-filter-badge {
    margin-left: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fef3c7;
}
.cmp-table .hdr-popover {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    margin-top: 0.25rem;
    background: white;
    color: var(--text);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    padding: 0.65rem;
    min-width: 240px;
    max-height: 50vh;
    overflow-y: auto;
    text-transform: none;
    font-weight: normal;
    font-size: 0.85rem;
}
.cmp-table .hdr-popover .popover-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #f1f5f9;
}
.cmp-table .hdr-popover .link-btn {
    background: transparent;
    border: 0;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
}
.cmp-table .hdr-popover .link-btn:hover { text-decoration: underline; }
.cmp-table .hdr-popover .cb-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.1rem;
    cursor: pointer;
}
.cmp-table .hdr-popover .cb-row:hover { background: #f8fafc; border-radius: 4px; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 0.5rem; padding: 0.75rem 1rem; }
    .container { padding: 1rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .calendar-weeks { grid-template-columns: repeat(2, 1fr); }
    .chart-container { height: 300px; }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid #e5e7eb;
    margin-top: 3rem;
    padding: 1.25rem 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.site-footer a { color: var(--primary); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-sep { margin: 0 0.5rem; opacity: 0.4; }
.footer-note { display: inline-block; margin-left: 0.5rem; opacity: 0.75; }
@media (max-width: 640px) {
    .footer-note { display: block; margin-left: 0; margin-top: 0.5rem; }
}

/* ── Legal-Seiten (Impressum / Datenschutz) ─────────────────────────── */
.legal-page { max-width: 760px; line-height: 1.6; }
.legal-page h1 { margin-bottom: 1.25rem; }
.legal-page h2 { margin-top: 1.75rem; margin-bottom: 0.5rem;
                 font-size: 1.1rem; color: var(--primary-dark); }
.legal-page ul { margin: 0.5rem 0 0.5rem 1.5rem; }
.legal-page p { margin: 0.5rem 0; }

/* ── Disclaimer-Box auf der Intro-Seite ─────────────────────────────── */
.disclaimer-box {
    margin: 1.25rem 0 2rem;
    padding: 1rem 1.25rem;
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #713f12;
}
.disclaimer-box strong { color: #854d0e; }

/* ── Hard-Reload-Button (schwebt unten rechts auf jeder Seite) ──────── */
.hard-reload-btn {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    z-index: 99;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.hard-reload-btn:hover {
    background: #eff6ff;
    transform: rotate(60deg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.hard-reload-btn.spinning {
    animation: hardreload-spin 0.8s linear infinite;
    cursor: progress;
}
@keyframes hardreload-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Build-Datum in der Navbar ──────────────────────────────────────── */
.nav-build {
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    padding: 0.4rem 0;
    margin-left: auto;
    margin-right: 0;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}
@media (max-width: 768px) { .nav-build { display: none; } }

/* ── Spende-Button + Modal ──────────────────────────────────────────── */
.nav-donate {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: white;
    border: none;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 0.5rem;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.3);
    transition: transform 0.1s, box-shadow 0.15s;
}
.nav-donate:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.45);
}
.nav-donate:active { transform: translateY(0); }

.donate-modal {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.65);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.donate-card {
    background: white;
    border-radius: 16px;
    max-width: 540px;
    width: 100%;
    padding: 2rem 2rem 1.5rem;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    max-height: 90vh;
    overflow-y: auto;
}
.donate-card h2 {
    margin: 0 0 0.75rem;
    color: #e11d48;
    font-size: 1.5rem;
}
.donate-close {
    position: absolute;
    top: 0.75rem; right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}
.donate-close:hover { background: #f1f5f9; color: #0f172a; }
.donate-intro {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}
.donate-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.donate-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0.5rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: #0f172a;
    transition: all 0.12s;
    background: #fafbfc;
}
.donate-tier:hover {
    border-color: #e11d48;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(225, 29, 72, 0.15);
}
.donate-tier-featured {
    border-color: #e11d48;
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    position: relative;
}
.donate-tier-featured::after {
    content: "★ am häufigsten";
    position: absolute;
    top: -8px; right: 6px;
    background: #e11d48;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.donate-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e11d48;
}
.donate-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.2rem;
    text-align: center;
}
.donate-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem;
    background: #f8fafc;
    border-radius: 10px;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.donate-custom label {
    font-size: 0.85rem;
    color: #475569;
}
.donate-custom input {
    width: 90px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
}
.donate-foot {
    color: #94a3b8;
    font-size: 0.75rem;
    margin: 0;
    text-align: center;
}
@media (max-width: 480px) {
    .donate-tiers { grid-template-columns: 1fr; }
    .donate-card { padding: 1.25rem 1rem; }
}

/* ── Favoriten-Header Action-Buttons (Refresh + URL-Toggle) ──────────── */
.header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Favorit per URL hinzufügen (auf /favorites) ─────────────────────── */
.add-from-url {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.add-from-url-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}
.add-from-url-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.add-from-url-row .form-input { flex: 1; min-width: 250px; }
.add-from-url-msg {
    font-size: 0.85rem;
    margin-top: 0.4rem;
    min-height: 1.1em;
    color: var(--text-muted);
}
.add-from-url-msg.ok   { color: var(--success); }
.add-from-url-msg.err  { color: var(--danger); }
.add-from-url-msg.info { color: var(--primary); }
.add-from-url-msg.warn { color: #b45309; font-weight: 500; }