/* Kieler Shanty Kollektiv – Farben von der Karte */
:root {
  --marine: #202e48;
  --tief: #263f70;
  --mittel: #5099c9;
  --hell: #88c7e3;
  --gischt: #b5dcec;
  --ueberschrift: #85b9d3;
  --weiss: #ffffff;

  --schrift-kopf: Rockwell, "Roboto Slab", "Droid Serif", Georgia, serif;
  --schrift-text: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-betont: Verdana, Geneva, "DejaVu Sans", sans-serif;

  --rand: clamp(16px, 6vw, 96px);
  --siegel: clamp(136px, 30vw, 420px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--marine);
  color: var(--weiss);
  font: 400 clamp(1.0625rem, .95rem + .55vw, 1.5rem)/1.45 var(--schrift-text);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gischt);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Bühne: Vorderseite ---------- */

.buehne {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.buehne__text {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 5vh, 64px) var(--rand) 0;
}

/* Der Titel läuft wie auf der Karte links aus dem Bild */
.titel {
  margin: 0 0 clamp(16px, 3vh, 36px) calc(var(--rand) * -1);
  width: min(82vw, 1240px);
}

.anker-satz {
  margin: 0 0 .35em;
  font: 700 clamp(1.125rem, .9rem + 1.5vw, 2.25rem)/1.25 var(--schrift-betont);
  max-width: 26em;
}

.unterzeile {
  margin: 0 0 1.25em;
  color: #e7eef4;
}

.knopf {
  display: inline-block;
  padding: .7em 1.35em;
  border-radius: 999px;
  background: var(--hell);
  color: var(--marine);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s;
}
.knopf:hover { background: var(--gischt); }

.knopf--leise {
  padding: .5em 1.1em;
  background: transparent;
  color: var(--gischt);
  border: 2px solid var(--hell);
  font-size: .85em;
  font-weight: 400;
}
.knopf--leise::after { content: " ↓"; }
.knopf--leise:hover { color: var(--marine); }

/* ---------- Wellen ---------- */

.see {
  position: relative;
  margin-top: clamp(8px, 3vh, 32px);
  /* Luft nach oben: die Dünung hebt die Kämme über den Bildrand */
  padding-top: 5vw;
  overflow: hidden;
}

.see__wellen {
  width: 100%;
  transform-origin: 50% 100%;
  animation: duenung 13s ease-in-out infinite alternate;
}

@keyframes duenung {
  from { transform: scale(1.06) translate3d(-1.6%, 0, 0); }
  to   { transform: scale(1.06) translate3d(1.6%, -1.2%, 0); }
}

/* ---------- Siegel: Originallogo, liegt wie auf der Karte in den Wellen ---------- */

.siegel {
  position: absolute;
  z-index: 3;
  right: clamp(12px, 3.5vw, 64px);
  bottom: clamp(16px, 4.5vw, 72px);
  width: var(--siegel);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Weisser Rand, ohne Unschaerfe */
  box-shadow: 0 0 0 clamp(3px, .45vw, 6px) var(--weiss);
  transform: rotate(15deg);
}

.siegel img { width: 100%; height: 100%; }

/* ---------- Crew: Rückseite ---------- */

.crew {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(56px, 10vw, 136px) var(--rand) clamp(24px, 5vw, 64px);
  max-width: 1400px;
  margin: 0 auto;
  scroll-margin-top: 16px;
}

@media (min-width: 860px) {
  .crew { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

.crew h2 {
  margin: 0 0 .4em;
  color: var(--ueberschrift);
  font: 700 clamp(2rem, 1.2rem + 3.3vw, 4rem)/1.08 var(--schrift-kopf);
  text-wrap: balance;
}

/* Kefa III als Bild: die Schrift gibt es nur auf dem Mac */
.crew h2 img { width: min(100%, 640px); }

.crew__aufruf p { margin: 0 0 1.5em; max-width: 30em; }

.kurs h3 {
  margin: 0 0 .8em;
  font: 700 1.1em/1.2 var(--schrift-kopf);
}

/* Die Liederliste als eingezeichnete Route */
.kurs__route {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.6em;
  background: radial-gradient(circle, var(--mittel) 1.5px, transparent 2px) .36em 0 / 4px 9px repeat-y;
}

.kurs__route li {
  position: relative;
  padding: .28em 0;
}

.kurs__route li::before {
  content: "";
  position: absolute;
  left: -1.6em;
  top: calc(.28em + .72em - .29em);
  width: .58em;
  height: .58em;
  margin-left: .17em;
  border-radius: 50%;
  background: var(--marine);
  border: 2px solid var(--hell);
}

/* ---------- Fuß ---------- */

.fuss { position: relative; overflow: hidden; }
.see--fuss { margin-top: 0; }
.see--fuss .see__wellen { animation-delay: -6s; }

.fuss__zeile {
  position: absolute;
  z-index: 2;
  left: var(--rand);
  right: var(--rand);
  bottom: clamp(10px, 2vw, 28px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .2em 1.5em;
  font-size: clamp(.875rem, .8rem + .35vw, 1.125rem);
  text-shadow: 0 1px 3px rgba(20, 30, 50, .85);
}

.fuss__mail { text-decoration: none; }
.fuss__mail:hover { text-decoration: underline; }
.fuss__recht { display: flex; gap: 1.2em; }

/* ---------- Handy: Wellen breiter als der Schirm, damit sie Höhe behalten ---------- */

@media (max-width: 599px) {
  .buehne { min-height: 90svh; }
  .see { padding-top: 9vw; }
  .see__wellen {
    width: 250%;
    max-width: none;
    margin-left: -75%;
  }
  .fuss__zeile { flex-direction: column; }
}

/* ---------- Laptop: alles Wichtige passt auch in der Höhe in die erste Ansicht ---------- */

@media (min-width: 600px) {
  :root { --siegel: min(30vw, 420px, 44vh); }
  .titel { width: min(82vw, 1240px, 110vh); }
  .buehne .see { margin-top: 0; padding-top: min(5vw, 4vh); }
  .buehne .see__wellen {
    /* Flache Fenster stauchen die Grafik, damit keine Welle abgeschnitten wird */
    height: min(33.1vw, 42vh);
    object-fit: fill;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .see__wellen { animation: none; }
  .see__wellen { transform: none; }
  .knopf { transition: none; }
}

/* ---------- Unterseiten ---------- */

/* Die Welle sitzt auch bei kurzem Text am unteren Rand */
.unterseite {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.unterseite .fuss { margin-top: auto; }

.text-seite {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) var(--rand);
  font-size: 1.0625rem;
}
.text-seite h1 {
  margin: 0 0 .6em;
  color: var(--ueberschrift);
  font: 700 clamp(2rem, 1.4rem + 2vw, 3rem)/1.1 var(--schrift-kopf);
}
.text-seite h2 {
  margin: 1.8em 0 .4em;
  font: 700 1.2rem/1.25 var(--schrift-kopf);
}
.text-seite p, .text-seite ul { margin: 0 0 1em; }
.zurueck { display: inline-block; margin-bottom: 2em; color: var(--gischt); }

/* Muss vor Veröffentlichung ersetzt werden */
.luecke {
  padding: 0 .3em;
  border-radius: 3px;
  background: #ffd84d;
  color: #202e48;
  font-weight: 700;
}