@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-wght-normal.woff2') format('woff2'); }

:root {
    --deep: #0e2630;      /* Abendwasser */
    --dusk: #1d3d48;      /* Dämmerung */
    --mist: #dfe8ea;      /* Morgendunst */
    --foam: #f8f7f3;      /* Gischt */
    --gold: #c8a46c;      /* Abendlicht – Marke */
    --gold-ink: #8a6a3b;  /* Gold auf hellem Grund */
    --ink: #13232a;
    --muted: #5d6c72;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--foam); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Logo – wie bisher, neuer Name */
.logo { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: #fff; }
.logo svg { width: 42px; height: 42px; color: var(--gold); flex: none; }
.logo b { display: block; font: 500 1.7rem/1 var(--serif); letter-spacing: .16em; }
.logo small { display: block; margin-top: .35rem; font-size: .62rem; letter-spacing: .42em; opacity: .75; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; color: #fff; overflow: hidden; isolation: isolate; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgb(14 38 48 / .55) 0%, rgb(14 38 48 / .1) 32%, rgb(14 38 48 / .35) 58%, var(--deep) 100%); }
.hero header { padding-block: 1.75rem; }
.hero__body { align-self: end; padding-bottom: clamp(2.5rem, 7vh, 5rem); }
.hero h1 { margin: 0; max-width: 13ch; font: 500 clamp(3.2rem, 9vw, 7.5rem)/.92 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.hero p.lead { margin: 1.4rem 0 0; max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgb(255 255 255 / .86); }
.hero__season { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.season { font: italic 500 1.5rem/1.2 var(--serif); color: var(--gold); }
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.4rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .55); color: #fff; text-decoration: none; font-weight: 500; font-size: .95rem; transition: background .2s, border-color .2s; }
.btn:hover { background: rgb(255 255 255 / .12); border-color: #fff; }
.hero__scroll { justify-self: center; padding-bottom: 1.2rem; color: rgb(255 255 255 / .6); }
.hero__scroll svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: no-preference) {
    .rise { opacity: 0; transform: translateY(14px); animation: rise 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
    .rise:nth-child(2) { animation-delay: .25s; }
    .rise:nth-child(3) { animation-delay: .5s; }
    @keyframes rise { to { opacity: 1; transform: none; } }
}

/* Der Tag auf dem Wasser – Zeitleiste 08–21 Uhr */
.day { background: var(--deep); color: #fff; padding: clamp(4rem, 10vw, 7rem) 0 clamp(4.5rem, 10vw, 7rem); }
.day h2, .boat h2, .notify h2 { margin: 0; font: 500 clamp(2.2rem, 4.6vw, 3.4rem)/1.05 var(--serif); text-wrap: balance; }
.day .intro { margin: 1rem 0 0; max-width: 36rem; color: rgb(255 255 255 / .75); }
.sky { position: relative; margin-top: 3.5rem; height: 12px; border-radius: 999px;
    background: linear-gradient(90deg, #a8c6cf 0%, #d7e3dc 18%, #f2e3b8 45%, #f0c27d 72%, #e08a5b 86%, #6b4f6e 100%); }
.hours { position: relative; height: 1.2rem; margin-top: .6rem; font-size: .78rem; color: rgb(255 255 255 / .5); font-variant-numeric: tabular-nums; }
.hours span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.hours span:first-child { transform: none; } .hours span:last-child { transform: translateX(-100%); }
.slots { position: relative; margin-top: 2.2rem; display: grid; grid-template-columns: repeat(13, 1fr); row-gap: 1.4rem; }
.slot { border-top: 2px solid var(--c); padding-top: .9rem; padding-right: 1rem; }
.slot h3 { margin: 0; font: 500 1.65rem/1.1 var(--serif); }
.slot time { display: block; margin-top: .2rem; font-size: .8rem; color: rgb(255 255 255 / .55); font-variant-numeric: tabular-nums; }
.slot p { margin: .55rem 0 0; font-size: .95rem; color: rgb(255 255 255 / .78); max-width: 30ch; }
/* Positionen auf der Zeitachse 08:00–21:00 (eine Spalte pro Stunde) */
.slot--morgen { grid-column: 2 / span 4; grid-row: 1; --c: #d7e3dc; }
.slot--nachmittag { grid-column: 7 / span 4; grid-row: 1; --c: #f0c27d; }
.slot--sunset { grid-column: 11 / span 3; grid-row: 1; --c: #e08a5b; }
.slot--ganztag { grid-column: 2 / span 9; grid-row: 2; --c: var(--gold); }
@media (max-width: 760px) {
    .slots { grid-template-columns: 1fr; }
    .slot--morgen, .slot--nachmittag, .slot--sunset, .slot--ganztag { grid-column: 1; grid-row: auto; }
    .hours span.minor { visibility: hidden; }
}

/* Boot */
.boat { padding: clamp(4rem, 10vw, 7rem) 0; }
.boat .grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1.1fr 1fr; align-items: center; }
.boat figure { margin: 0; }
.boat img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 60%; border-radius: 4px 120px 4px 4px; }
.boat figcaption { margin-top: .6rem; font-size: .8rem; color: var(--muted); }
.boat p { color: #3b4a50; max-width: 34rem; }
.features { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; }
.features li { display: flex; gap: .6rem; align-items: baseline; }
.features li::before { content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); transform: translateY(-.1rem); }
.where { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid #e3e1da; color: var(--muted); font-size: .95rem; }
.where strong { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .boat .grid { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; } }

/* Benachrichtigen */
.notify { background: var(--dusk); color: #fff; padding: clamp(4rem, 9vw, 6rem) 0; }
.notify .grid { display: grid; gap: 2rem 4rem; grid-template-columns: 1fr 1fr; align-items: end; }
.notify p { color: rgb(255 255 255 / .75); max-width: 30rem; margin: 1rem 0 0; }
.form { display: flex; gap: .6rem; flex-wrap: wrap; }
.form input[type=email] { flex: 1 1 15rem; min-width: 0; padding: .95rem 1.1rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .06); color: #fff; font: inherit; }
.form input[type=email]::placeholder { color: rgb(255 255 255 / .5); }
.form button { padding: .95rem 1.5rem; border-radius: 999px; border: 0; background: var(--gold); color: var(--deep); font: 600 .95rem var(--sans); cursor: pointer; }
.form button:hover { background: #d6b47e; }
.form .hp { position: absolute; left: -10000px; }
.consent { flex-basis: 100%; margin: .4rem 0 0; font-size: .8rem; color: rgb(255 255 255 / .6); }
.consent a { color: rgb(255 255 255 / .8); }
.msg { flex-basis: 100%; margin: .2rem 0 0; font-size: .95rem; min-height: 1.5em; }
.msg.ok { color: #b9e0c5; } .msg.err { color: #ffc2b4; }
@media (max-width: 860px) { .notify .grid { grid-template-columns: 1fr; } }

/* Footer */
footer.site { background: var(--deep); color: rgb(255 255 255 / .6); font-size: .875rem; padding: 2.5rem 0; }
footer.site .row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
footer.site nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
footer.site a { text-decoration: none; } footer.site a:hover { color: #fff; }
.credit { display: inline-flex; align-items: center; gap: .55rem; }
.credit img { height: 24px; width: auto; }
.credit .heart { color: #e25563; }

/* Rechtstexte */
.legal-head { background: var(--deep); padding: 1.6rem 0; }
.legal { padding: 3.5rem 0 5rem; }
.legal .wrap { max-width: 720px; }
.legal h1 { font: 500 2.8rem/1.1 var(--serif); margin: 0 0 1.5rem; }
.legal h2 { font: 500 1.6rem/1.2 var(--serif); margin: 2.2rem 0 .5rem; }
.legal p, .legal li { color: #3b4a50; }
.todo { background: #fff3cd; padding: 0 .3em; border-radius: 3px; }