/* Luvwerft Jolle 14. Seitenstil. Die Engine-Klassen bleiben unangetastet;
   hier stehen Marke, Seebühnen, Steg und Riss. Ein Radius für alles: 3px. */
:root {
  --sc-canvas:     #12302E;
  --sc-surface:    #183B38;
  --sc-ink:        #EEF0E8;
  --sc-ink-soft:   #B2C6BF;
  --sc-accent:     #E0613F;
  --sc-accent-ink: #1A0F0B;
  --sc-font-display: "Zilla Slab", Georgia, serif;
  --sc-font-text:    "Kumbh Sans", system-ui, sans-serif;
  --sc-font-mono:    "Kumbh Sans", system-ui, sans-serif;
  --sc-shadow-color: 172 45% 5%;
  --tuch: #ECEDE6;          /* Segeltuch, die helle Gegenstelle */
  --tuch-ink: #15302E;
  --tuch-soft: #3E5853;
  --akzent-hell: #B4452A;   /* derselbe Rotton für den hellen Grund */
  --holz: #D8C39E;
  --holz-dunkel: #B59B70;
  --holz-ink: #111714;
  --r: 3px;
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #2E5450 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--r); }
input, select { caret-color: var(--sc-accent); }
a { text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
}
.sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.62; letter-spacing: .006em; }
.vorzeile {
  font: 600 var(--sc-t-sm)/1.2 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase;
  color: var(--akzent-hell); margin: 0;
}

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  height: 68px; padding: 0 var(--sc-gutter);
  background: linear-gradient(color-mix(in oklab, var(--sc-canvas) 78%, transparent), transparent);
  pointer-events: none;
}
.kopf a, .kopf button { pointer-events: auto; }
.wortmarke {
  font: italic 600 25px/1 var(--sc-font-display); letter-spacing: -.01em;
  color: var(--sc-ink); text-decoration: none;
}
.kopf__rechts { display: flex; align-items: center; gap: 22px; }
.kopf__link {
  color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-sm);
  text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-accent) 75%, transparent);
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.kursknopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px;
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text); color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-canvas) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); border-radius: var(--r);
  cursor: pointer; transition: border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.kursknopf svg { width: 26px; height: 26px; }
.kursknopf circle { fill: var(--sc-accent); }
.kursknopf:active { transform: translateY(1px); }
.kursknopf[aria-expanded="true"] { border-color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) {
  .kursknopf:hover { border-color: var(--sc-accent); }
  .kopf__link:hover { text-decoration-color: var(--sc-accent); }
}

/* ---------- Kurskarte ---------- */
.karte {
  position: fixed; z-index: calc(var(--sc-z-chrome) + 1);
  top: 72px; right: var(--sc-gutter); width: min(340px, calc(100vw - 2 * var(--sc-gutter)));
}
.karte[hidden] { display: none; }
.karte__blatt {
  position: relative; overflow: hidden;
  background: var(--tuch); color: var(--tuch-ink); border-radius: var(--r);
  padding: 16px 18px 14px;
  box-shadow: 0 18px 40px -12px hsl(var(--sc-shadow-color) / .7), 0 2px 6px hsl(var(--sc-shadow-color) / .4);
  animation: karte-auf 220ms var(--sc-ease-out);
}
.karte__blatt::before { /* Kartengitter im Papier */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgb(21 48 46 / .06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgb(21 48 46 / .06) 0 1px, transparent 1px 28px);
}
@keyframes karte-auf { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.karte__titel {
  position: relative; display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 6px; font: italic 600 1.25rem/1.2 var(--sc-font-display);
}
.karte__titel span { font: 500 .8rem/1 var(--sc-font-text); color: var(--tuch-soft); }
.karte__feld { position: relative; aspect-ratio: 300 / 380; }
.karte__see { position: absolute; inset: 0; width: 100%; height: 100%; }
.karte__marken a {
  position: absolute; translate: 0 -50%; white-space: nowrap;
  font: 600 .92rem/1 var(--sc-font-text); color: var(--tuch-ink); text-decoration: none;
  padding: 7px 8px; border-radius: var(--r);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.karte__marken a.ist-hier { color: var(--akzent-hell); }
@media (hover: hover) and (pointer: fine) { .karte__marken a:hover { background: rgb(21 48 46 / .08); } }
.karte__fuss { position: relative; margin: 6px 0 0; font-size: .84rem; line-height: 1.45; color: var(--tuch-soft); }

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border-radius: var(--r);
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: transform 130ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent);
}
.knopf--voll::before { /* feines Segeltuch-Gewebe, über das ein Lichtstreif läuft */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .34) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(45deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 5px);
  animation: streif 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
@media (hover: hover) and (pointer: fine) { .knopf--voll:hover { background: #EA7351; } }

/* ---------- Seebühnen ---------- */
.see { background: var(--sc-canvas); }
.see__wasser { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wind {
  position: absolute; z-index: 5; top: 84px; right: var(--sc-gutter);
  display: flex; align-items: center; gap: 8px;
  font: 600 .82rem/1 var(--sc-font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.wind svg { width: 14px; height: 24px; fill: none; stroke: var(--sc-ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Der Steg: Planken quer, Holzmaserung, zwei Poller. */
.steg {
  position: absolute; z-index: 4;
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--planke, 34px) - 3px), rgb(40 30 18 / .55) calc(var(--planke, 34px) - 3px) var(--planke, 34px)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 11px, rgb(60 40 20 / .06) 11px 13px, transparent 13px 23px),
    linear-gradient(90deg, var(--holz-dunkel), var(--holz) 12%, var(--holz) 88%, var(--holz-dunkel));
  box-shadow: 14px 16px 0 -4px rgb(6 22 20 / .45), inset 0 1px 0 rgb(255 255 255 / .25);
}
.steg__poller {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5d5d55, #262622 70%);
  box-shadow: 2px 3px 0 rgb(6 22 20 / .45);
  left: -8px;
}
.steg__poller:nth-of-type(1) { top: 9%; }
.steg__poller:nth-of-type(2) { top: 42%; }
.steg--held { right: calc(var(--sc-gutter) + 6vw); top: 50%; bottom: -2px; width: 92px; }

/* ---------- Ablegen ---------- */
.held {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); bottom: clamp(3rem, 11vh, 7rem);
  width: min(44rem, 52vw);
}
.held__titel { font-size: clamp(2.7rem, 1.4rem + 4.3vw, 5.6rem); max-width: 13ch; }
.held__sub { margin-top: var(--sc-5); max-width: 34ch; }
.held .knopf { margin-top: var(--sc-6); }

/* ---------- Werkhalle (hell) ---------- */
.werft {
  background: var(--tuch); color: var(--tuch-ink);
  padding-block: clamp(3rem, 6vw, 6rem) clamp(5rem, 11vw, 10rem);
  position: relative; overflow: hidden;
}
.werft .sc-body { color: var(--tuch-soft); }
.werft__raster {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.5rem);
  align-items: start;
}
.werft__text { grid-column: 1 / span 5; padding-top: clamp(1rem, 6vw, 6rem); gap: var(--sc-5); display: grid; }
.werft__titel { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.9rem); color: var(--tuch-ink); margin: 0; }
.werft__bild { margin: 0; }
.werft__bild img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.werft__bild--gross {
  grid-column: 7 / span 6; grid-row: 1 / span 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 9vw)); /* Unterkante unter 45 Grad abgeschrägt wäre zu steil, hier ein flacher Schlag */
}
.werft__bild--klein {
  grid-column: 2 / span 4; grid-row: 2; margin-top: clamp(2rem, 5vw, 4rem);
  position: relative; z-index: 2;
}
.werft__bild--klein img { box-shadow: 18px 22px 40px -18px rgb(21 48 46 / .45); }
.werft__bild figcaption { margin-top: 12px; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--tuch-soft); max-width: 36ch; }

/* ---------- Kreuzen ---------- */
.kreuz__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: clamp(7rem, 22vh, 12rem);
  width: min(30rem, 32vw); display: grid;
}
.kreuz__text > * { grid-area: 1 / 1; }
.kreuz__titel { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.8rem); margin: 0; }
.kreuz__text .sc-body { margin-top: var(--sc-4); max-width: 34ch; }
.kursschild {
  position: absolute; z-index: 5; left: var(--sc-gutter); bottom: clamp(1.5rem, 6vh, 3.5rem); margin: 0;
  display: flex; gap: 12px; align-items: baseline;
  font: 500 .95rem/1 var(--sc-font-text); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums;
}
.kursschild b { font: italic 600 1.15rem/1 var(--sc-font-display); color: var(--sc-ink); }

/* ---------- Der Riss ---------- */
.riss { padding-block: clamp(5rem, 10vw, 9rem); position: relative; --zug: 1; }
.riss::before { /* Zeichenraster, nach außen ausgeblendet */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgb(238 240 232 / .045) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgb(238 240 232 / .045) 0 1px, transparent 1px 32px);
  mask-image: radial-gradient(70% 60% at 40% 40%, #000, transparent);
}
.riss__raster {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.5rem); row-gap: clamp(2rem, 4vw, 3.5rem);
}
.riss__kopf { grid-column: 1 / span 9; }
.riss__titel { font-size: clamp(2.2rem, 1.3rem + 3vw, 4.4rem); margin: 0; max-width: 18ch; }
.riss__zeichnung { grid-column: 1 / span 7; margin: 0; }
.riss__zeichnung svg { width: 100%; height: auto; display: block; overflow: visible; }
.zug path, .zug circle, .mass path {
  fill: none; stroke: var(--sc-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--zug));
}
.zug--duenn path, path.zug--duenn { stroke-width: .9; stroke: var(--sc-ink-soft); }
.zug--strich { stroke-dasharray: .02 .015 !important; stroke-dashoffset: 0 !important; opacity: var(--zug); }
.mass path { stroke: var(--sc-accent); stroke-width: 1.2; }
.mass text { fill: var(--sc-accent); font: 600 15px var(--sc-font-text); text-anchor: middle; opacity: var(--zug); font-variant-numeric: tabular-nums; }
.mass text:last-of-type { text-anchor: start; }
.daten { grid-column: 8 / span 5; align-self: center; margin: 0; display: grid; gap: 0; }
.daten div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--sc-hairline); }
.daten div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.daten dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.daten dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.riss__foto { grid-column: 2 / span 11; margin: 0; }
.riss__rahmen {
  overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 7;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}
.riss__rahmen img { display: block; width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.riss__foto figcaption { margin: 14px 0 0 7%; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 44ch; }

/* ---------- Anlegen ---------- */
.anlegen__kopf {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: clamp(6.5rem, 18vh, 10rem); width: min(32rem, 36vw);
}
.anlegen__titel { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5rem); margin: 0; }
.anlegen__kopf .sc-body { margin-top: var(--sc-5); max-width: 32ch; }
.steg--anlegen {
  right: var(--sc-gutter); top: 13%; bottom: -2px; width: min(390px, 31vw);
  --planke: 46px; padding: 30px 26px 0 30px;
}
.planken { display: grid; gap: 14px; color: var(--holz-ink); }
.planke { display: grid; gap: 6px; }
.planke label { font: 700 .86rem/1.2 var(--sc-font-text); letter-spacing: .02em; color: var(--holz-ink); }
.planke input, .planke select {
  width: 100%; min-height: 46px; padding: 0 12px; border-radius: var(--r);
  font: 500 1rem var(--sc-font-text); color: var(--holz-ink);
  background: rgb(250 246 236 / .92); border: 1.5px solid #6E5A3C;
  transition: border-color 140ms var(--sc-ease-out);
}
.planke input:focus, .planke select:focus { border-color: var(--holz-ink); outline: 2px solid var(--akzent-hell); outline-offset: 1px; }
.planke__fehler { color: #8E2E16; font-weight: 600; font-size: .84rem; }
.planke--knopf { margin-top: 6px; }
.planke--knopf .knopf { width: 100%; }
.planken__hinweis { margin: 4px 0 0; font-size: .82rem; line-height: 1.45; color: var(--holz-ink); }
.fuss {
  position: absolute; z-index: 5; left: var(--sc-gutter); bottom: 18px;
  font-size: .8rem; color: var(--sc-ink-soft); max-width: 46ch;
}

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .kopf { height: 60px; }
  .wortmarke { font-size: 22px; }
  .kopf__link { display: none; }
  .wind { top: auto; bottom: 18px; right: var(--sc-gutter); }
  .see--held .wind { bottom: auto; top: 72px; }

  .steg--held { left: 0; right: 0; top: auto; bottom: -2px; width: auto; height: 46%; }
  .steg .steg__poller { left: auto; top: -8px; }
  .steg .steg__poller:nth-of-type(1) { left: 22%; }
  .steg .steg__poller:nth-of-type(2) { left: 72%; }
  .held { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: 22px; color: var(--holz-ink); }
  .held .held__titel { color: var(--holz-ink); font-size: clamp(2rem, 1.2rem + 4.6vw, 2.7rem); }
  .held .held__sub { color: var(--holz-ink); font-size: 1.02rem; margin-top: var(--sc-3); }
  .held .knopf { margin-top: var(--sc-4); }

  .werft__text, .werft__bild--gross, .werft__bild--klein { grid-column: 1 / -1; grid-row: auto; }
  .werft__text { padding-top: 0; margin-bottom: var(--sc-6); }
  .werft__bild--gross { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 16vw)); }
  .werft__bild--klein { width: 72%; margin: -18vw 0 0 auto; }

  .kreuz__text { top: 74px; right: var(--sc-gutter); width: auto; }
  .kreuz__titel { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.4rem); }
  .kreuz__text .sc-body { font-size: 1rem; margin-top: var(--sc-2); }
  .see--kreuz::after { /* Band hinter dem Text, Geschwister der Copy */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 3; pointer-events: none;
    background: linear-gradient(var(--sc-canvas) 55%, transparent);
  }
  .kursschild { left: var(--sc-gutter); bottom: 22px; }

  .riss__kopf, .riss__zeichnung, .daten, .riss__foto { grid-column: 1 / -1; }
  .riss__rahmen { aspect-ratio: 4 / 3; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }

  .anlegen__kopf { top: 70px; right: var(--sc-gutter); width: auto; }
  .anlegen__titel { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .anlegen__kopf .sc-body { font-size: .98rem; margin-top: var(--sc-2); }
  .steg--anlegen { left: 0; right: 0; top: auto; width: auto; padding: 18px var(--sc-gutter) 64px; --planke: 40px; }
  .planken { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .planke--knopf, .planke--monat { grid-column: 1 / -1; }
  .planke input, .planke select { min-height: 42px; }
  .planken__hinweis { font-size: .76rem; }
  .fuss { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 10px; font-size: .7rem; line-height: 1.4; color: var(--holz-ink); z-index: 6; background: var(--holz); padding: 4px 8px; border-radius: var(--r); }
  .see--anlegen .wind { display: none; }
  .wind span { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .planke--monat { display: none; }
  .anlegen__kopf .sc-body { display: none; }
  .held .held__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf--voll::before { animation: none; }
  .karte__blatt { animation: none; }
}