:root {
    --water: #1a3a4a;
    --water-mid: #1f4e64;
    --water-light: #2d7a9a;
    --foam: #c8e8f0;
    --sand: #e8dcc8;
    --sand-dark: #b8a888;
    --white: #f8f6f2;
    --ink: #1a1a18;
    --ink-mid: #3a3a36;
    --ink-light: #888880;
    --accent: #d4622a;
    --accent-light: #e8916a;
    --success: #2a7a4a;

    /* The chrome, stated once. Subtracting only the nav left a full-height block 16px past
       the fold, with the footer clipped. */
    --nav-h: 64px;
    --footer-h: 80px;
    --page-h: calc(100vh - var(--nav-h) - var(--footer-h));
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* The UA rule for [hidden] is display:none, which any author display wins against — and
   .btn-primary sets inline-block, so hidden silently did nothing to a button. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--white);
    color: var(--ink);
    overflow-x: hidden;
    /* A column so the footer can be pushed to the bottom: a view shorter than the viewport
       would otherwise leave it across the middle of the page. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* NAV */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--water);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px; height: 64px;
}
.nav-logo {
    font-family: 'Playfair Display', serif;
    font-size: 18px; color: var(--foam);
    letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; cursor: pointer;
}
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
    color: var(--foam); text-decoration: none;
    font-size: 13px; font-weight: 400;
    letter-spacing: 0.06em; text-transform: uppercase;
    opacity: 0.7; transition: opacity 0.2s; cursor: pointer;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.active { opacity: 1; border-bottom: 1px solid rgba(200,232,240,0.5); padding-bottom: 2px; }

/* The admin counterpart of .nav-links: the same row, holding who is signed in rather than
   where to go. The name is the display name, so it reads as a person and not as a login. */
.nav-session { display: flex; align-items: center; gap: 20px; }
.nav-user { color: var(--foam); opacity: 0.7; font-size: 13px; letter-spacing: 0.04em; }
/* Its own padding, because .btn-ghost's 14px would overflow the 64px bar. */
.nav-btn {
    background: transparent; color: #fff;
    border: 1px solid var(--foam);
    padding: 7px 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s;
}
.nav-btn:hover { background: rgba(200,232,240,0.14); }

/* Every document but the landing one: clears the fixed nav, and takes the space the
   footer does not so .section's auto margins can centre in it. */
.page { margin-top: var(--nav-h); flex: 1; display: flex; flex-direction: column; }
/* The state on screen takes the slack, so the section inside it can centre. Hidden ones
   stay hidden: [hidden] carries !important. */
.state { flex: 1; display: flex; flex-direction: column; }

/* HERO */
.hero {
    background: var(--water);
    /* Fills whatever the column leaves; the fixed nav overlays it, sharing its colour. */
    flex: 1;
    min-height: 0;
    padding-top: 0;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.wave-bg {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.04;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 28px, var(--foam) 28px, var(--foam) 29px);
    pointer-events: none;
}
.hero-text {
    padding: 80px 60px 80px 80px;
    display: flex; flex-direction: column; justify-content: center;
    position: relative; z-index: 2;
}
.hero-eyebrow {
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--foam); opacity: 0.5; margin-bottom: 20px;
}
.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(38px, 4vw, 56px);
    font-weight: 400; color: var(--white);
    line-height: 1.1; margin-bottom: 24px;
}
.hero h1 em { font-style: italic; color: var(--foam); }
.hero-sub {
    font-size: 16px; color: var(--foam); opacity: 0.65;
    font-weight: 300; max-width: 380px; line-height: 1.7;
    margin-bottom: 40px;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary {
    background: var(--accent); color: white; border: none;
    padding: 14px 32px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s; text-decoration: none;
    display: inline-block;
}
.btn-primary:hover { background: var(--accent-light); }
.btn-primary:disabled { background: var(--sand-dark); color: var(--white); cursor: default; }
.btn-primary:disabled:hover { background: var(--sand-dark); }
.btn-ghost {
    background: transparent; color: var(--foam);
    border: 1px solid rgba(200,232,240,0.35);
    padding: 14px 32px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 400;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: all 0.2s; text-decoration: none;
    display: inline-block;
}
.btn-ghost:hover { border-color: var(--foam); color: white; }

/* Features panel — right side of hero */
.hero-features {
    display: flex; flex-direction: column; justify-content: center;
    gap: 32px; padding: 60px;
    background: var(--white);
    border-left: 1px solid var(--sand);
    position: relative; z-index: 2;
}
.hero-feature-item { display: flex; flex-direction: column; gap: 5px; }
.hero-feature-icon { font-size: 20px; margin-bottom: 4px; }
.hero-feature-title {
    font-family: 'Playfair Display', serif;
    font-size: 16px; color: var(--water);
}
.hero-feature-desc { font-size: 13px; color: var(--ink-light); line-height: 1.6; }

/* FEATURES */
.features {
    background: var(--sand);
    padding: 48px 80px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 40px; border-bottom: 1px solid var(--sand-dark);
}
.feature-icon { font-size: 22px; margin-bottom: 10px; }
.feature-title {
    font-family: 'Playfair Display', serif;
    font-size: 16px; color: var(--water); margin-bottom: 6px;
}
.feature-desc { font-size: 13px; color: var(--ink-light); line-height: 1.6; }

/* PRICING */
/* auto on the block axis, as .section: centred when the view has slack. */
.pricing-section { padding: 80px; background: var(--white); margin: auto; width: 100%; }
.pricing-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 32px; font-weight: 400; color: var(--water); margin-bottom: 8px;
}
.pricing-sub { color: var(--ink-light); font-size: 14px; margin-bottom: 40px; }
.pricing-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pricing-table thead tr { border-bottom: 2px solid var(--water); }
.pricing-table th {
    text-align: left; padding: 12px 20px;
    font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--water); font-weight: 500;
}
.pricing-table td { padding: 16px 20px; border-bottom: 1px solid var(--sand); color: var(--ink-mid); }
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table tr:hover td { background: #f4f0e8; }
.pricing-table td:first-child { font-weight: 500; color: var(--ink); }
.pricing-table td.price { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--water); }
.pricing-note { margin-top: 20px; font-size: 12px; color: var(--ink-light); font-style: italic; line-height: 1.7; }

/* SECTION (booking) */
/* width:100% with auto margins: centred both ways. Without the width, an auto side
   margin stops a flex item stretching and the berth grid collapses to two columns. */
.section { max-width: 1100px; width: 100%; margin: auto; padding: 60px 40px; }
/* Both clear the fixed nav. Willkommen deliberately does not: the nav shares the hero's
   colour and overlays it. */
#view-hafen,
#view-availability { margin-top: var(--nav-h); }
.section-header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 36px; border-bottom: 1px solid var(--sand); padding-bottom: 20px;
}
.section-title { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 400; color: var(--water); }
.date-nav { display: flex; align-items: center; gap: 16px; }
.date-nav input { font-size: 14px; color: var(--ink-mid); font-weight: 500; }
.date-btn {
    width: 32px; height: 32px; border: 1px solid var(--sand-dark);
    background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-mid); font-size: 16px; transition: all 0.15s; border-radius: 2px;
}
.date-btn:hover { background: var(--water); color: white; border-color: var(--water); }
/* The range pickers sit on the light section, where the dark panel's input styling is unreadable. */
.date-nav .form-group { gap: 4px; }
.date-nav label { color: var(--ink-light); opacity: 1; }
.date-nav input { background: var(--white); border-color: var(--sand-dark); }
/* The form shows the chosen range and offers no control over it: the pickers above do that. */
.chosen-date { color: var(--white); font-size: 14px; padding: 12px 0; }

/* BERTH GRID */
.berth-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px; margin-bottom: 40px;
}
.berth-card {
    border: 1px solid var(--sand); background: var(--white);
    padding: 20px 18px; cursor: pointer; transition: all 0.2s; position: relative;
}
.berth-card:hover:not(.occupied) {
    border-color: var(--water-light);
    box-shadow: 0 4px 20px rgba(26,58,74,0.1); transform: translateY(-2px);
}
.berth-card.occupied { background: #f4f2ee; cursor: not-allowed; }
.berth-card.selected { border-color: var(--water); border-width: 2px; background: #eef6fa; box-shadow: 0 4px 20px rgba(26,58,74,0.12); }
.berth-number { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 400; color: var(--water); line-height: 1; margin-bottom: 6px; }
.berth-card.occupied .berth-number { color: var(--ink-light); }
.berth-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 10px; }
.berth-meta { font-size: 12px; color: var(--ink-light); line-height: 1.7; }
.berth-status {
    position: absolute; top: 14px; right: 14px;
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; font-weight: 500;
}
.status-free { background: #e8f5ee; color: var(--success); }
.status-taken { background: #f0eeea; color: var(--ink-light); }

/* BOOKING FORM */
.booking-panel { background: var(--water); padding: 40px; color: var(--foam); }
.booking-panel h2 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400; color: var(--white); margin-bottom: 6px; }
.price-preview { font-size: 13px; color: var(--foam); opacity: 0.6; margin-bottom: 28px; font-style: italic; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foam); opacity: 0.6; }
input, select {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(200,232,240,0.2);
    color: var(--white); padding: 12px 14px;
    font-family: 'DM Sans', sans-serif; font-size: 14px;
    outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none;
}
input:focus, select:focus { border-color: var(--foam); }
input::placeholder { color: rgba(200,232,240,0.3); }
select option { background: var(--water); }
.vessel-note { font-size: 11px; color: var(--foam); opacity: 0.45; margin-top: 3px; font-style: italic; }
.privacy-note { font-size: 11px; color: var(--foam); opacity: 0.4; margin-top: 16px; line-height: 1.6; }
/* A refused booking, inside the dark booking panel. */
.booking-error {
    margin-top: 16px; padding: 12px 16px;
    background: rgba(212,98,42,0.15);
    border: 1px solid var(--accent-light);
    color: var(--accent-light);
    font-size: 13px; line-height: 1.6;
}

/* CONFIRMATION */
.confirmation { text-align: center; padding: 60px 40px; max-width: 560px; margin: 0 auto; }
.confirmation-icon {
    width: 64px; height: 64px; background: var(--success); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 28px; color: white; font-size: 28px;
}
.confirmation h2 { font-family: 'Playfair Display', serif; font-size: 32px; color: var(--water); margin-bottom: 16px; }
.confirmation p { color: var(--ink-mid); font-size: 15px; line-height: 1.7; margin-bottom: 12px; }
.confirmation-detail { background: #eef6fa; border: 1px solid var(--foam); padding: 20px 28px; margin: 28px 0; text-align: left; }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--foam); font-size: 14px; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--ink-light); }
.detail-value { font-weight: 500; color: var(--water); }
.notice { background: #fff8f4; border: 1px solid #f0c8a8; padding: 16px 20px; font-size: 13px; color: var(--accent); line-height: 1.6; text-align: left; }
.notice strong { display: block; margin-bottom: 4px; }

/* FOOTER */
/* auto, not 0: the flex column above pushes it to the bottom when the page is short. */
footer { background: var(--water); color: var(--foam); padding: 32px 80px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; margin-top: auto; flex: none; }
footer a { color: var(--foam); opacity: 0.6; text-decoration: none; }
footer a:hover { opacity: 1; }



.view { display: none; }
/* Takes the space the footer does not, so a full-height hero and a short page
   both end flush with the viewport instead of 16px past it. */
.view.active { display: flex; flex-direction: column; flex: 1; }

#view-landing {
    margin-top: 64px;
}
#section-preise { overflow-y: auto; }

/* HAFEN SECTION */
.hafen-section {
    display: grid; grid-template-columns: 1fr 1fr;
    height: 100%;
}
.hafen-text {
    padding: 80px;
    background: var(--white);
    display: flex; flex-direction: column; justify-content: center;
}
.hafen-details { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.hafen-detail-row {
    display: flex; align-items: flex-start; gap: 14px;
    font-size: 14px; color: var(--ink-mid);
}
.hafen-detail-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.hafen-detail-row strong { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 2px; }

/* Features panel — right column on hafen page */
.hafen-features {
    background: var(--sand);
    padding: 80px 60px;
    display: flex; flex-direction: column; justify-content: center; gap: 36px;
    border-left: 1px solid var(--sand-dark);
}
.hafen-feature-item { display: flex; flex-direction: column; gap: 6px; }
.hafen-feature-icon { font-size: 22px; margin-bottom: 4px; }
.hafen-feature-title { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--water); }
.hafen-feature-desc { font-size: 13px; color: var(--ink-light); line-height: 1.6; }

.hafen-map-large { position: relative; }
.hafen-map-large #map { width: 100%; height: var(--page-h); }

@media (max-width: 860px) {
    .hafen-section { grid-template-columns: 1fr; }
    .hafen-text { padding: 40px 24px; }
    .hafen-features { padding: 40px 24px; border-left: none; border-top: 1px solid var(--sand-dark); }
    .hafen-map-large { grid-column: 1; }
    .hafen-map-large #map { height: 300px; }
}

/* ADMIN CALENDAR — one month, seven wide, one line per dock in every day. */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--sand-dark);
    border: 1px solid var(--sand-dark);
}
.cal-head {
    background: var(--water); color: var(--foam);
    padding: 10px 12px;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.cal-head-short { display: none; }
.cal-day { background: var(--white); padding: 8px 10px 10px; }
.cal-weekend { background: #faf8f4; }
.cal-outside { background: #f1efea; }
.cal-today { box-shadow: inset 0 0 0 2px var(--water); }
.cal-date {
    font-family: 'Playfair Display', serif;
    font-size: 26px; line-height: 1; color: var(--water);
    margin-bottom: 8px;
}
.cal-line {
    display: flex; gap: 6px; align-items: baseline;
    font-size: 11px; line-height: 1.55;
    border-top: 1px solid #efece5;
}
.cal-dock { color: var(--ink-light); min-width: 24px; flex-shrink: 0; }
.cal-guest {
    color: var(--ink); font-weight: 500; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-guest:hover { text-decoration: underline; }
.cal-free { color: var(--ink-light); cursor: pointer; }
.cal-maintenance { color: var(--accent); font-weight: 400; font-style: italic; }
@media (max-width: 1100px) {
    .cal-head-long { display: none; }
    .cal-head-short { display: inline; }
    .cal-day { padding: 6px; }
    .cal-date { font-size: 20px; }
}