/* ==========================================================================
   HAFENSCHNACK , Cinematic Site Styles
   Fonts: self-hosted (DSGVO). Cinzel = Display, Inter = Body, Pirata One = Akzent
   ========================================================================== */

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Pirata One";
  src: url("../fonts/pirata-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ocean-950: #04090f;
  --ocean-900: #060f1a;
  --ocean-850: #081524;
  --ocean-800: #0a1a2b;
  --ocean-700: #10263c;
  --line: #1b3247;
  --line-soft: #142838;
  --ink: #eef4f9;
  --muted: #93a9bd;
  --teal: #35c2c9;
  --teal-deep: #1f8a8c;
  --teal-dim: #1d7d84;
  --gold: #d8a657;
  --gold-soft: #e8c987;
  --parchment: #f2e8d5;
  --sand: #f4ede1;
  --sand-card: #fffdf8;
  --ink-light: #13202b;
  --muted-light: #4a5764;
  --line-light: #e3e8ec;
  --display: "Cinzel", serif;
  --body: "Inter", system-ui, sans-serif;
  --pirate: "Pirata One", cursive;
  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--body);
  background: var(--ocean-950);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--ocean-950); }

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* ------- Film grain + vignette ------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-5%,-8%); }
  30% { transform: translate(3%,-4%); }
  50% { transform: translate(-7%,5%); }
  70% { transform: translate(6%,3%); }
  90% { transform: translate(-3%,7%); }
}

/* ------- Scroll progress ------- */
.progress-bar {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal), var(--gold));
  z-index: 10000;
}

/* ------- Preloader ------- */
.preloader {
  position: fixed; inset: 0;
  background: var(--ocean-950);
  z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
}
.preloader .pre-anchor { width: 64px; height: 64px; }
.preloader img.pre-anchor { width: 104px; height: auto; filter: drop-shadow(0 8px 30px rgba(0,0,0,0.5)); }
.preloader .pre-title {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.35em;
  font-size: clamp(16px, 3vw, 26px);
  color: var(--parchment);
  text-transform: uppercase;
}
.preloader .pre-sub {
  font-size: 12px; letter-spacing: 0.4em;
  color: var(--muted); text-transform: uppercase;
}

/* ------- Navigation ------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex; align-items: center;
  z-index: 8000;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(4, 9, 15, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.nav-inner {
  width: min(1240px, 92vw);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.nav-logo svg { width: 34px; height: 34px; }
.nav-logo img.nav-logo-img { height: 42px; width: auto; display: block; }
@media (max-width: 900px) { .nav-logo img.nav-logo-img { height: 36px; } }
.nav-logo .t {
  font-family: var(--display);
  font-weight: 800; font-size: 15px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(232, 201, 135, 0.55);
  white-space: nowrap;
}
.nav-logo .t em { font-style: normal; color: var(--gold); }
@media (max-width: 900px) {
  .nav-logo .t { font-size: 12.5px; letter-spacing: 0.12em; }
}
.nav-links { display: flex; gap: 26px; align-items: center; list-style: none; }
.nav-links a {
  text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--gold-soft); }
.nav-cta {
  text-decoration: none;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ocean-950) !important;
  background: linear-gradient(120deg, var(--gold), var(--gold-soft));
  padding: 10px 18px; border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 0 0 rgba(232, 184, 75, 0);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(232, 184, 75, 0.35); }
.burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; position: relative; z-index: 8600;
}
.burger span {
  display: block; height: 2px; width: 24px;
  margin: 5px auto; background: var(--parchment);
  transition: transform 0.3s, opacity 0.3s;
}
.mobile-menu {
  position: fixed; inset: 0;
  background: rgba(4, 9, 15, 0.97);
  z-index: 8500;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--display); font-size: 22px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--parchment); text-decoration: none;
}
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------- Layout utils ------- */
.container { width: min(1240px, 92vw); margin: 0 auto; }
.section { padding: clamp(90px, 12vw, 160px) 0; position: relative; }
.eyebrow {
  font-family: var(--pirate);
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--teal);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.h-display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  color: var(--parchment);
  font-size: clamp(30px, 4.6vw, 58px);
  text-wrap: balance;
}
.h-display .gold { color: var(--gold); }
.section-head { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head p.sub {
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 17.5px);
  max-width: 62ch;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-weight: 700; font-size: 15px; letter-spacing: 0.03em;
  padding: 16px 30px; border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer; border: 0;
}
.btn-gold {
  color: var(--ocean-950);
  background: linear-gradient(120deg, var(--gold), var(--gold-soft));
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(232, 184, 75, 0.35); }
.btn-ghost {
  color: var(--parchment);
  background: transparent;
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-3px); }

/* ------- HERO ------- */
.hero {
  min-height: 100svh;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: calc(var(--nav-h) + 28px) 24px 90px;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, #0e2438 0%, transparent 60%),
    var(--ocean-950);
}
.letterbox {
  position: absolute; left: 0; right: 0;
  height: 12vh; background: #000;
  z-index: 500;
}
.letterbox.top { top: 0; transform-origin: top; }
.letterbox.bottom { bottom: 0; transform-origin: bottom; }

.stars {
  position: absolute; inset: 0 0 30% 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 12%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 56% 28%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 8%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 18%, rgba(255,255,255,0.75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 6%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 16%, rgba(255,255,255,0.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 34%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 80% 32%, rgba(255,255,255,0.55) 50%, transparent 51%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }

/* Logo-Sonne (früher der Mond): leuchtend, Sonnenaufgang.
   GSAP steuert transform/opacity von .moon (Intro + Parallax),
   deshalb hier nur filter-Glühen; Halo/Strahlen auf Kind-Elementen. */
.moon {
  position: absolute; top: 9%; right: 10%;
  width: clamp(94px, 10.5vw, 148px); height: clamp(94px, 10.5vw, 148px);
  display: grid; place-items: center;
  border-radius: 50%;
  animation: sun-pulse 5.5s ease-in-out infinite;
}
.moon::before {  /* warmer Sonnen-Halo */
  content: ""; position: absolute; inset: -42%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,224,150,0.60) 0%, rgba(244,182,92,0.30) 34%, rgba(232,140,60,0.10) 55%, transparent 72%);
  animation: sun-glow 5.5s ease-in-out infinite;
}
.moon .sun-rays {  /* langsam rotierende Sonnenstrahlen */
  position: absolute; inset: -60%; z-index: -2; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255,208,120,0.20) 0deg 2.5deg, transparent 2.5deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 56%, transparent 80%);
          mask: radial-gradient(circle, transparent 42%, #000 56%, transparent 80%);
  animation: sun-spin 44s linear infinite;
}
.moon .sun-logo-img {
  width: 88%; height: 88%; object-fit: contain;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,0.45)) brightness(1.08) saturate(1.05);
}
@keyframes sun-pulse {
  0%,100% { filter: drop-shadow(0 0 26px rgba(244,190,110,0.55)); }
  50%     { filter: drop-shadow(0 0 50px rgba(255,205,120,0.85)); }
}
@keyframes sun-glow {
  0%,100% { opacity: 0.75; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.10); }
}
@keyframes sun-spin { to { transform: rotate(360deg); } }
@media (max-width: 680px) {
  .moon { width: 72px; height: 72px; top: 7%; right: 6%; }
}

.hero-waves {
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 46%;
  pointer-events: none;
}
.hero-waves svg {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}

.hero-content {
  position: relative; z-index: 400;
  text-align: center;
  padding: 0 6vw;
  max-width: 1100px;
}
.hero-eyebrow {
  font-family: var(--pirate);
  color: var(--teal);
  font-size: clamp(16px, 2vw, 22px);
  margin-bottom: 18px;
}
.hero-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 4.8vw, 62px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--parchment);
  text-transform: uppercase;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-title .word { display: inline-block; white-space: nowrap; }
.hero-title .char { display: inline-block; }
.hero-title .gold { color: var(--gold); }
.hero-sub {
  margin: 28px auto 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 19px);
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-ctas {
  margin-top: 40px;
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.hero-scroll {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hero-scroll .wheel {
  width: 22px; height: 36px;
  border: 1.5px solid var(--muted);
  border-radius: 12px;
  position: relative;
}
.hero-scroll .wheel::after {
  content: "";
  position: absolute; top: 6px; left: 50%;
  width: 3px; height: 7px; border-radius: 3px;
  background: var(--gold);
  transform: translateX(-50%);
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* ------- Marquee ------- */
.marquee {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--ocean-900);
  overflow: hidden;
  padding: 18px 0;
  position: relative; z-index: 10;
}
.marquee-track {
  display: flex; gap: 48px;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  display: flex; align-items: center; gap: 48px;
}
.marquee span i { font-style: normal; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------- Intro / Stats ------- */
.intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.intro-copy p {
  color: var(--muted);
  font-size: clamp(15px, 1.45vw, 17.5px);
  margin-top: 18px;
}
.intro-copy p strong { color: var(--ink); font-weight: 600; }
.intro-figure {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.intro-figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.intro-figure .cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 40px 20px 14px;
  font-size: 11.5px; color: rgba(242, 232, 213, 0.75);
  background: linear-gradient(transparent, rgba(4,9,15,0.9));
}
.stats {
  margin-top: clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  overflow: hidden;
}
.stat {
  background: var(--ocean-900);
  padding: clamp(26px, 3.4vw, 44px) 20px;
  text-align: center;
}
.stat .num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 56px);
  color: var(--gold);
  line-height: 1;
}
.stat .num .suffix { font-size: 0.6em; }
.stat .lbl {
  margin-top: 10px;
  font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

/* ------- Heldenreise (pinned) ------- */
.journey { background: var(--ocean-900); }
.journey-stage {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.journey-panels {
  position: relative;
  width: 100%;
}
.journey-panel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 8vw;
  opacity: 0;
}
.journey-panel.active-first { opacity: 1; }
.journey-panel .stage-num {
  font-family: var(--pirate);
  font-size: clamp(60px, 12vw, 150px);
  color: rgba(53, 194, 201, 0.12);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -78%);
  pointer-events: none;
  white-space: nowrap;
}
.journey-panel .icon { font-size: clamp(40px, 6vw, 72px); margin-bottom: 18px; }
.journey-panel h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 60px);
  color: var(--parchment);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.journey-panel p {
  margin: 22px auto 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18.5px);
}
.journey-progress {
  position: absolute; left: 50%; bottom: 48px;
  transform: translateX(-50%);
  display: flex; gap: 10px;
}
.journey-progress i {
  width: 34px; height: 3px; border-radius: 3px;
  background: var(--line);
  overflow: hidden; position: relative;
}
.journey-progress i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s;
}
.journey-progress i.done::after { transform: scaleX(1); }

/* ------- Services (Waffenkammer) ------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  position: relative;
  background: linear-gradient(160deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: clamp(26px, 2.6vw, 38px);
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(53,194,201,0.08), transparent 45%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: rgba(53,194,201,0.4); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.card:hover::before { opacity: 1; }
.card .icon {
  font-size: 30px;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(53, 194, 201, 0.08);
  border: 1px solid rgba(53, 194, 201, 0.25);
  border-radius: 14px;
  margin-bottom: 20px;
}
.card h3 {
  font-family: var(--display);
  font-weight: 700; font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--parchment);
  margin-bottom: 12px;
}
.card p { color: var(--muted); font-size: 14.5px; }
.card .link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--teal); text-decoration: none;
}
.card .link:hover { color: var(--gold); }

/* ------- KI-Kaperfahrt Feature ------- */
.kaperfahrt {
  background:
    linear-gradient(rgba(4, 9, 15, 0.88), rgba(4, 9, 15, 0.94)),
    url("../img/kapitaen.jpg") center 30% / cover no-repeat fixed;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.kf-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.kf-usps { margin-top: 30px; display: grid; gap: 14px; }
.kf-usp {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(8, 21, 36, 0.72);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 18px;
  backdrop-filter: blur(4px);
}
.kf-usp .tick { color: var(--gold); font-weight: 800; margin-top: 1px; }
.kf-usp span { color: var(--ink); font-size: 14.5px; }
.kf-usp span em { color: var(--muted); font-style: normal; }
.price-card {
  position: sticky; top: 100px;
  background: linear-gradient(170deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid rgba(232, 184, 75, 0.35);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 42px);
  box-shadow: 0 40px 100px rgba(0,0,0,0.55);
}
.price-card .tag {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ocean-950);
  background: var(--gold);
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.price-card h3 {
  font-family: var(--display); font-weight: 800;
  font-size: 26px; color: var(--parchment);
  letter-spacing: 0.04em;
}
.price-card .price {
  font-family: var(--display);
  font-weight: 900; font-size: clamp(44px, 5vw, 64px);
  color: var(--gold);
  margin: 18px 0 4px;
}
.price-card .price small { font-size: 0.35em; color: var(--muted); font-weight: 500; letter-spacing: 0.05em; }
.price-card ul { list-style: none; margin: 22px 0 26px; display: grid; gap: 10px; }
.price-card li { display: flex; gap: 10px; font-size: 14px; color: var(--muted); }
.price-card li::before { content: "⚓"; font-size: 12px; margin-top: 2px; }
.price-card .note { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; }

/* ------- Module ticker ------- */
.modules { margin-top: clamp(50px, 7vw, 80px); }
.modules h3 {
  font-family: var(--display); color: var(--parchment);
  font-size: 22px; letter-spacing: 0.06em; margin-bottom: 24px;
}
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  counter-reset: mod;
}
.module {
  counter-increment: mod;
  display: flex; gap: 14px; align-items: baseline;
  background: rgba(8, 21, 36, 0.72);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px; color: var(--ink);
  backdrop-filter: blur(4px);
}
.module::before {
  content: counter(mod, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 700; color: var(--teal);
  font-size: 15px;
}

/* ------- Hafenmeister (Kurse & Preise) ------- */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.course {
  position: relative;
  background: linear-gradient(160deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: clamp(26px, 2.6vw, 36px);
  display: flex; flex-direction: column;
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.course:hover { transform: translateY(-6px); border-color: rgba(232, 184, 75, 0.45); }
.course.featured { border-color: rgba(232, 184, 75, 0.5); }
.course.featured::after {
  content: "Flaggschiff";
  position: absolute; top: 16px; right: 16px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocean-950); background: var(--gold);
  padding: 5px 10px; border-radius: 999px;
}
.course .icon { font-size: 26px; margin-bottom: 14px; }
.course h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 19px; letter-spacing: 0.04em; color: var(--parchment);
}
.course .cprice {
  font-family: var(--display); font-weight: 800;
  font-size: 30px; color: var(--gold);
  margin: 10px 0 12px;
}
.course .cprice small { font-size: 0.45em; color: var(--muted); font-weight: 500; }
.course p { color: var(--muted); font-size: 14px; flex: 1; }
.course .link {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--teal);
  text-decoration: none;
}
.course .link:hover { color: var(--gold); }

/* ------- KI-Rechner ------- */
.rechner { background: var(--ocean-900); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.rechner-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: start;
}
.slider-row { margin-bottom: 26px; }
.slider-row .top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.slider-row label { font-weight: 600; font-size: 15px; color: var(--ink); }
.slider-row label small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.slider-row output {
  font-family: var(--display); font-weight: 700;
  color: var(--gold); font-size: 18px; white-space: nowrap;
}
input[type="range"] {
  width: 100%; appearance: none; -webkit-appearance: none;
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--teal) var(--fill, 50%), var(--line) var(--fill, 50%));
  outline: none; cursor: pointer;
  margin-top: 10px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--ocean-950);
  box-shadow: 0 0 0 2px var(--gold);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--ocean-950);
  box-shadow: 0 0 0 2px var(--gold); cursor: grab;
}
.rechner-result {
  position: sticky; top: 100px;
  background: linear-gradient(170deg, var(--ocean-800), var(--ocean-950));
  border: 1px solid rgba(53, 194, 201, 0.35);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 40px);
  text-align: center;
}
.rechner-result h3 {
  font-family: var(--pirate); color: var(--teal);
  font-size: 22px; margin-bottom: 24px;
}
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.res {
  background: rgba(4, 9, 15, 0.5);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 12px;
}
.res .v {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px); color: var(--gold);
  line-height: 1.1;
}
.res .l { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.res.big { grid-column: 1 / -1; padding: 24px 12px; border-color: rgba(232,184,75,0.4); }
.res.big .v { font-size: clamp(36px, 4vw, 52px); }
.rechner-result .disclaimer { margin-top: 18px; font-size: 11.5px; color: var(--muted); }

/* ------- Hanse / DACH ------- */
.hanse {
  background: linear-gradient(rgba(4, 9, 15, 0.9), rgba(4, 9, 15, 0.97)), var(--ocean-950);
}
.ports {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.port {
  background: rgba(8, 21, 36, 0.75);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 20px;
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.port:hover { transform: translateY(-4px); border-color: rgba(53,194,201,0.45); }
.port .icon { font-size: 22px; }
.port h4 {
  font-family: var(--display); font-weight: 700;
  color: var(--parchment); font-size: 17px;
  margin: 10px 0 6px; letter-spacing: 0.04em;
}
.port p { font-size: 12.5px; color: var(--muted); }
.dach-note {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: rgba(6, 14, 24, 0.94);
  border: 1px dashed rgba(232, 184, 75, 0.55);
  border-radius: 16px;
  padding: 22px 26px;
}
.dach-note .flags { font-size: 22px; letter-spacing: 6px; }
/* Kontrast/Barrierefreiheit: helle Schrift auf dunkler Box IMMER erzwingen,
   auch in hellen (section-sand) Sektionen (dort mutet .section-sand p sonst). */
.dach-note p,
.section-sand .dach-note p,
.section .dach-note p { color: var(--ink); font-size: 15px; line-height: 1.66; }
.dach-note p strong,
.section-sand .dach-note p strong { color: var(--gold-soft); }

/* ------- Pains ------- */
.pains-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pain {
  background: linear-gradient(160deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 26px 22px;
}
.pain .icon { font-size: 26px; margin-bottom: 14px; }
.pain h4 {
  font-family: var(--display); font-weight: 700;
  font-size: 16.5px; color: var(--parchment);
  letter-spacing: 0.03em; margin-bottom: 10px;
}
.pain p { font-size: 13.5px; color: var(--muted); }

/* ------- Crew ------- */
.crew-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mate {
  background: linear-gradient(160deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.mate:hover { transform: translateY(-6px); border-color: rgba(232,184,75,0.4); }
.mate .avatar {
  width: 74px; height: 74px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  background: rgba(53, 194, 201, 0.08);
  border: 1px solid rgba(53, 194, 201, 0.3);
}
.mate h4 {
  font-family: var(--display); font-weight: 700;
  color: var(--parchment); font-size: 17px; letter-spacing: 0.03em;
}
.mate .role {
  font-family: var(--pirate);
  color: var(--teal); font-size: 16px; margin: 4px 0 10px;
}
.mate p { font-size: 13px; color: var(--muted); }

/* ------- Logbuch (Testimonials) ------- */
.logbuch { background: var(--ocean-900); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote {
  position: relative;
  background: linear-gradient(165deg, rgba(242, 232, 213, 0.04), transparent);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 34px 28px 28px;
}
.quote::before {
  content: "„";
  position: absolute; top: -6px; left: 18px;
  font-family: var(--pirate);
  font-size: 70px; color: var(--gold);
  opacity: 0.9; line-height: 1;
}
.quote p { font-size: 15px; color: var(--ink); font-style: italic; }
.quote .who {
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 13.5px; font-weight: 600;
}
.quote .who .stars5 { color: var(--gold); letter-spacing: 2px; font-size: 12px; }
.wix-badge {
  margin-top: 40px;
  display: flex; justify-content: center;
}
.wix-badge a {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  text-decoration: none;
  color: var(--muted); font-size: 13.5px; font-weight: 600;
  transition: border-color 0.3s, color 0.3s;
}
.wix-badge a:hover { border-color: var(--gold); color: var(--gold-soft); }
.wix-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* ------- FAQ ------- */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line-soft);
}
.faq-q {
  width: 100%;
  background: none; border: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 4px;
  cursor: pointer;
  text-align: left;
  color: var(--parchment);
  font-family: var(--display);
  font-weight: 700; font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: 0.02em;
  transition: color 0.25s;
}
.faq-q:hover { color: var(--gold-soft); }
.faq-q .ind {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--teal);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.faq-item.open .faq-q .ind { transform: rotate(45deg); border-color: var(--gold); color: var(--gold); }
.section-sand .faq-q .ind { color: var(--teal-deep); border-color: rgba(19, 32, 43, 0.25); }
.faq-a {
  overflow: hidden;
  height: 0;
}
.faq-a p {
  padding: 0 4px 26px;
  color: var(--muted); font-size: 15px;
  max-width: 68ch;
}

/* ------- Kontakt / Enterhaken ------- */
.contact {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.contact .compass {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 90vw); height: min(680px, 90vw);
  opacity: 0.05;
  pointer-events: none;
}
.contact-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.contact .h-display { font-size: clamp(34px, 5.4vw, 68px); }
.contact p.sub { margin: 22px auto 0; color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); max-width: 56ch; }
.contact-ctas { margin-top: 42px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.contact-meta {
  margin-top: 36px;
  display: flex; gap: 12px 34px; justify-content: center; flex-wrap: wrap;
  color: var(--muted); font-size: 14.5px;
}
.contact-meta a { color: var(--teal); text-decoration: none; }
.contact-meta a:hover { color: var(--gold); }

/* ------- Footer ------- */
footer {
  border-top: 1px solid var(--line-soft);
  background: var(--ocean-900);
  padding: 56px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-brand .t {
  font-family: var(--display); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--parchment); font-size: 16px;
}
.footer-brand p { margin-top: 12px; color: var(--muted); font-size: 13.5px; max-width: 40ch; }
.footer-col h5 {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: var(--muted); text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: var(--teal); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: 12.5px;
}
.footer-bottom .waves-mini { color: var(--teal-dim); letter-spacing: 4px; }

/* ------- Legal pages ------- */
.legal { padding: calc(var(--nav-h) + 60px) 0 100px; }
.legal .container { max-width: 800px; }
.legal h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.5vw, 48px);
  color: var(--parchment); margin-bottom: 34px;
}
.legal h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 21px; color: var(--gold-soft);
  margin: 38px 0 12px;
}
.legal p, .legal li { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.legal ul { padding-left: 20px; }
.legal strong { color: var(--ink); }
.legal a { color: var(--teal); }

/* ------- Reveal helpers ------- */
[data-reveal] { opacity: 0; }
.no-js [data-reveal] { opacity: 1; }

/* ------- Responsive ------- */
@media (max-width: 1024px) {
  .cards-grid, .courses-grid, .quotes, .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .ports, .pains-grid, .crew-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .intro-grid, .kf-grid, .rechner-grid { grid-template-columns: 1fr; }
  .price-card, .rechner-result { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .cards-grid, .courses-grid, .quotes, .modules-grid, .ports, .pains-grid, .crew-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .letterbox { height: 8vh; }
  .footer-grid { grid-template-columns: 1fr; }
  .kaperfahrt { background-attachment: scroll; }
  .hanse { background-attachment: scroll; }
}

/* ------- Reduced motion ------- */
@media (prefers-reduced-motion: reduce) {
  .grain, .stars, .hero-scroll .wheel::after { animation: none; }
  .marquee-track { animation-duration: 120s; }
  [data-reveal] { opacity: 1; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   ERWEITERUNG: Landingpage-System (Briefing 01_Build_Spezifikation)
   ========================================================================== */

/* ------- Sand-Sektionen (helle Bühne) ------- */
.section-sand {
  background: var(--sand);
  color: var(--ink-light);
  --teal-deep: #145659;
}
.section-sand .eyebrow { color: var(--teal-deep); }
.section-sand .h-display { color: var(--ink-light); }
.section-sand .h-display .gold { color: #8a6015; }
.section-sand .section-head p.sub,
.section-sand p { color: var(--muted-light); }
.section-sand .card,
.section-sand .course,
.section-sand .pain,
.section-sand .mate {
  background: var(--sand-card);
  border-color: var(--line-light);
  box-shadow: 0 10px 30px rgba(13, 43, 69, 0.08);
}
.section-sand .card h3, .section-sand .course h3,
.section-sand .pain h4, .section-sand .mate h4 { color: var(--ink-light); }
.section-sand .card p, .section-sand .course p,
.section-sand .pain p, .section-sand .mate p { color: var(--muted-light); }
.section-sand .card .link, .section-sand .course .link { color: var(--teal-deep); }
.section-sand .card .link:hover, .section-sand .course .link:hover { color: #b8862f; }
.section-sand .card .icon {
  background: rgba(31, 138, 140, 0.08);
  border-color: rgba(31, 138, 140, 0.25);
}
.section-sand .btn-ghost { color: var(--ink-light); border-color: rgba(19, 32, 43, 0.25); }
.section-sand .btn-ghost:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
.section-sand .faq-item { border-bottom-color: var(--line-light); }
.section-sand .faq-q { color: var(--ink-light); }
.section-sand .faq-q:hover { color: var(--teal-deep); }
.section-sand .faq-a p { color: var(--muted-light); }
.section-sand .course .cprice { color: #8a6015; }
.section-sand .eyebrow.accent-eyebrow { color: var(--teal-deep); }

/* Lesbarkeit: .prose-Bloecke erben sonst Dunkel-Sektion-Farben (zu hell auf Creme).
   In hellen (section-sand) Sektionen dunkel/kontraststark einfaerben. */
.section-sand .prose p,
.section-sand .prose li { color: var(--muted-light); }
.section-sand .prose h2,
.section-sand .prose h3 { color: #8a6015; }
.section-sand .prose strong { color: var(--ink-light); }
.section-sand .prose a { color: var(--teal-deep); }
.section-sand .prose a:hover { color: #8a6015; }

/* ------- Nav Dropdowns ------- */
.nav-links > li { position: relative; }
.nav-links .dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 8px);
  min-width: 240px;
  background: rgba(6, 15, 26, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 10px;
  list-style: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.nav-links li:hover > .dropdown,
.nav-links li:focus-within > .dropdown {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}
.nav-links .dropdown a {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  white-space: nowrap;
}
.nav-links .dropdown a:hover { background: rgba(53, 194, 201, 0.08); color: var(--gold-soft); }
.nav-links .dropdown .dd-head {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); padding: 10px 14px 4px;
}
.nav-links > li > a .caret { font-size: 9px; margin-left: 4px; opacity: 0.7; }
.dropdown-cols { display: grid; grid-template-columns: 1fr 1fr; }

/* ------- Breadcrumbs ------- */
.breadcrumbs {
  padding: calc(var(--nav-h) + 24px) 0 0;
  font-size: 13px; color: var(--muted);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumbs li + li::before { content: "›"; margin-right: 8px; color: var(--line); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--teal); }
.breadcrumbs [aria-current] { color: var(--gold-soft); }

/* ------- Subpage-Hero (kompakt) ------- */
.page-hero {
  position: relative;
  padding: 60px 0 clamp(70px, 9vw, 110px);
  background:
    radial-gradient(ellipse 90% 70% at 50% -20%, #0e2438 0%, transparent 65%),
    var(--ocean-950);
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 2; max-width: 900px; }
.page-hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.12;
  color: var(--parchment);
  text-wrap: balance;
}
.page-hero h1 .gold { color: var(--gold); }
.page-hero .lead {
  margin-top: 20px;
  font-size: clamp(15.5px, 1.6vw, 18.5px);
  color: var(--muted);
  max-width: 62ch;
}
.page-hero .facts {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
  background: rgba(8, 21, 36, 0.7);
  border-left: 3px solid var(--teal);
  padding: 14px 18px;
  border-radius: 0 12px 12px 0;
  max-width: 70ch;
}
.page-hero .hero-ctas { justify-content: flex-start; margin-top: 30px; }
.page-hero .page-waves {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 90px;
  pointer-events: none;
}

/* ------- Wertetreppe ------- */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
.ladder-step {
  background: linear-gradient(160deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 42px 34px;
  position: relative;
  display: flex; flex-direction: column;
  min-height: 440px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.ladder-step:hover { transform: translateY(-5px); border-color: rgba(216, 166, 87, 0.45); }
.ladder-step a { margin-top: auto; padding-top: 14px; }
.ladder-step .step-num {
  font-family: var(--pirate); color: var(--teal); font-size: 23px;
}
.ladder-step h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
  color: var(--parchment); font-size: 23px; margin: 14px 0 8px;
}
.ladder-step .lprice {
  font-family: var(--display); font-weight: 800;
  color: var(--gold); font-size: 40px; margin-bottom: 12px;
}
.ladder-step p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.ladder-step a { color: var(--teal); font-size: 15px; font-weight: 700; text-decoration: none; }
.ladder-step a:hover { color: var(--gold); }

/* ------- Städte-Marquee & Chips ------- */
.cities-marquee span i { color: var(--teal); }
.city-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.city-chips a {
  text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink);
  background: var(--ocean-800);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 9px 16px;
  transition: border-color 0.25s, color 0.25s, transform 0.25s;
}
.city-chips a:hover { border-color: var(--gold); color: var(--gold-soft); transform: translateY(-2px); }

/* ------- Ablauf / Schritte ------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.steps .step {
  counter-increment: step;
  background: linear-gradient(160deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 26px 22px;
  position: relative;
}
.steps .step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-weight: 800;
  font-size: 30px; color: var(--teal);
  display: block; margin-bottom: 12px;
}
.steps .step h4 { font-family: var(--display); color: var(--parchment); font-size: 16.5px; letter-spacing: 0.03em; margin-bottom: 8px; }
.steps .step p { font-size: 13.5px; color: var(--muted); }

/* ------- Checkliste (Was du bekommst) ------- */
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; list-style: none; }
.check-list li {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(8, 21, 36, 0.72);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  padding: 16px 18px;
  font-size: 14.5px; color: var(--ink);
}
.check-list li::before { content: "✔"; color: var(--gold); font-weight: 800; }
.check-list li strong { color: var(--parchment); }
.check-list li em { color: var(--muted); font-style: normal; }

/* ------- Kontakt-Formular ------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--parchment); margin-bottom: 7px; letter-spacing: 0.03em;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: rgba(8, 21, 36, 0.8);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(53, 194, 201, 0.15);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: 12.5px; color: var(--muted); }
.form-note a { color: var(--teal); }
.form-success {
  background: rgba(53, 194, 201, 0.1);
  border: 1px solid var(--teal);
  border-radius: 13px;
  padding: 18px 20px;
  color: var(--ink);
  font-size: 15px;
}
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ------- Artikel / Logbuch ------- */
.article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.article-card {
  display: block; text-decoration: none;
  background: linear-gradient(160deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 30px 28px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.article-card:hover { transform: translateY(-5px); border-color: rgba(216, 166, 87, 0.45); }
.article-card .cat {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
}
.article-card h3 {
  font-family: var(--display); font-weight: 700;
  color: var(--parchment); font-size: 20px;
  margin: 12px 0 10px; line-height: 1.3;
}
.article-card p { color: var(--muted); font-size: 14px; }
.article-card .meta { margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 {
  font-family: var(--display); font-weight: 700;
  color: var(--parchment); font-size: clamp(22px, 2.6vw, 30px);
  margin: 44px 0 16px; letter-spacing: 0.02em;
}
.prose h3 {
  font-family: var(--display); font-weight: 700;
  color: var(--gold-soft); font-size: 19px; margin: 32px 0 12px;
}
.prose p, .prose li { color: var(--muted); font-size: 16px; line-height: 1.75; margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 18px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--teal); }
.prose a:hover { color: var(--gold); }
.prose blockquote {
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 20px;
  margin: 24px 0;
  font-style: italic;
  color: var(--ink);
}
.article-head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); }
.article-head .meta { color: var(--muted); font-size: 13.5px; margin-top: 16px; }

/* ------- CTA-Sektion (Teal-Verlauf, Briefing) ------- */
.cta-band {
  background: linear-gradient(135deg, #146568, #0f5f66 55%, var(--ocean-800));
  border-top: 1px solid rgba(53, 194, 201, 0.3);
  border-bottom: 1px solid rgba(53, 194, 201, 0.3);
}
.cta-band .h-display { color: #fff; }
.cta-band .sub { color: rgba(255, 255, 255, 0.85); }

/* ------- Responsive Ergänzungen ------- */
@media (max-width: 1024px) {
  .ladder, .steps { grid-template-columns: repeat(2, 1fr); }
  .steps.three { grid-template-columns: repeat(2, 1fr); }
  .article-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .ladder, .steps, .steps.three, .check-list, .form-grid { grid-template-columns: 1fr; }
  .ladder-step { min-height: 0 !important; }
  .mobile-menu { overflow-y: auto; justify-content: flex-start; padding: 100px 0 40px; gap: 18px; }
  .mobile-menu .mm-group {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold); font-family: var(--body); font-weight: 700;
    margin-top: 10px;
  }
  .mobile-menu a { font-size: 17px; }
}

/* ------- Video-Layer (Hero-Hintergrund + Kurs-Einblicke) ------- */
.hero-video-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-video-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.9);
}
.hero-video-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(14,36,56,0.35) 0%, transparent 60%),
    linear-gradient(rgba(4,9,15,0.55), rgba(4,9,15,0.35) 45%, rgba(4,9,15,0.82));
}
.hero .stars, .hero .moon { z-index: 1; }
.hero .hero-waves { z-index: 2; }
.hero .hero-content, .hero .hero-scroll { z-index: 400; }
.page-hero .hero-video-bg video { filter: brightness(0.38) saturate(0.85); }
.page-hero .hero-video-bg::after {
  background: linear-gradient(rgba(4,9,15,0.6), rgba(4,9,15,0.88));
}

.video-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.video-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  aspect-ratio: 16 / 9;
  background: var(--ocean-900);
}
.video-tile video { width: 100%; height: 100%; object-fit: cover; }
.video-tile .vt-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 10px;
  font-size: 12.5px; font-weight: 600; color: var(--parchment);
  background: linear-gradient(transparent, rgba(4,9,15,0.85));
}
@media (max-width: 900px) { .video-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .video-strip { grid-template-columns: 1fr; } }

/* ==========================================================================
   CINEMATIC UPGRADE (02.07.2026): Hover, Tiefe, Glanz, Bewegung
   Wirkt site-weit über das gemeinsame Stylesheet. Respektiert reduced-motion.
   ========================================================================== */

/* ---- Weichere, filmische Übergänge auf allen Karten ---- */
.card, .course, .pain, .mate, .port, .ladder-step, .article-card, .quote, .steps .step {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease, box-shadow 0.5s ease, background 0.4s ease;
  will-change: transform;
}

/* ---- Sheen: Lichtstreif wandert bei Hover über die Karte ---- */
.card, .course, .article-card, .price-card { position: relative; overflow: hidden; }
.card::after, .course::after, .article-card::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s ease;
  pointer-events: none; z-index: 3;
}
.card:hover::after, .course:hover::after, .article-card:hover::after { left: 130%; }

/* ---- Stärkere Hebung + Goldkante bei Hover ---- */
.card:hover, .course:hover, .article-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(216,166,87,0.35);
}
.pain:hover, .port:hover, .mate:hover, .ladder-step:hover, .steps .step:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 55px rgba(0,0,0,0.4);
}

/* ---- Karten-Icons: Micro-Bewegung ---- */
.card .icon, .course .icon, .pain .icon, .port .icon {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s, border-color 0.4s;
}
.card:hover .icon, .course:hover .icon {
  transform: translateY(-4px) rotate(-6deg) scale(1.08);
  border-color: rgba(216,166,87,0.6);
}
.pain:hover .icon, .port:hover .icon { transform: scale(1.15) rotate(5deg); }
.mate:hover .avatar { transform: scale(1.08); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }

/* ---- Buttons: Gold-Lichtsweep + kräftigeres Heben ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  transform: translateX(-130%); transition: transform 0.6s ease;
}
.btn-gold:hover::before { transform: translateX(130%); }
.btn-gold:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 44px rgba(232,184,75,0.45); }
.btn-ghost:hover { box-shadow: 0 12px 34px rgba(53,194,201,0.22); }
.btn:active { transform: translateY(-1px) scale(0.99); }

/* ---- Nav-Links: animierte Unterstreichung ---- */
.nav-links > li > a:not(.nav-cta) { position: relative; }
.nav-links > li > a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.nav-links > li:hover > a:not(.nav-cta)::after { transform: scaleX(1); transform-origin: left; }

/* ---- Karten-Links & .link: Pfeil wandert ---- */
.card .link, .course .link, .link { transition: color 0.25s, gap 0.3s; }
.card:hover .link, .course:hover .link { gap: 12px; }

/* ---- Bilder: sanfter Zoom im Rahmen ---- */
.intro-figure { overflow: hidden; }
.intro-figure img { transition: transform 0.8s cubic-bezier(0.16,1,0.3,1), filter 0.6s; }
.intro-figure:hover img { transform: scale(1.06); filter: saturate(1) contrast(1.08); }

/* ---- Aurora: dezent bewegtes Farbleuchten in dunklen Sektionen ---- */
.section:not(.section-sand)::before,
.hanse::before, .rechner::before, .logbuch::before, .journey::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(40% 55% at 15% 20%, rgba(53,194,201,0.06), transparent 70%),
    radial-gradient(45% 50% at 85% 80%, rgba(216,166,87,0.05), transparent 70%);
  animation: aurora 16s ease-in-out infinite alternate;
}
.section > .container { position: relative; z-index: 1; }
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0.4; }
  50%  { transform: translate3d(2%,-1.5%,0) scale(1.08); opacity: 0.6; }
  100% { transform: translate3d(-2%,1.5%,0) scale(1.05); opacity: 0.45; }
}

/* ---- Preis-/Featured-Karten: sanftes Pulsieren des Goldrahmens ---- */
.price-card { animation: cardglow 4.5s ease-in-out infinite; }
@keyframes cardglow {
  0%,100% { box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(216,166,87,0.35); }
  50%     { box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 0 34px rgba(216,166,87,0.28); }
}
.course.featured { position: relative; }
.course.featured::before {
  content: ""; position: absolute; inset: -1px; border-radius: 18px; z-index: 0;
  background: linear-gradient(130deg, rgba(216,166,87,0.5), transparent 40%, transparent 60%, rgba(53,194,201,0.4));
  opacity: 0; transition: opacity 0.5s;
}
.course.featured:hover::before { opacity: 1; }

/* ---- Chips: Hover mit Füllung ---- */
.city-chips a { position: relative; overflow: hidden; z-index: 1; }
.city-chips a::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, rgba(53,194,201,0.16), rgba(216,166,87,0.14));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.city-chips a:hover::before { transform: scaleX(1); }

/* ---- 3D-Tilt-Setup (JS steuert --rx/--ry) ---- */
[data-tilt] { transform-style: preserve-3d; }
[data-tilt].tilting {
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-10px) scale(1.015);
  transition: transform 0.12s ease-out;
}

/* ---- Scroll-Reveal-Varianten (JS setzt data-reveal-Attribut) ---- */
[data-reveal="scale"] { opacity: 0; }
[data-reveal="left"], [data-reveal="right"] { opacity: 0; }

/* ---- Hero-Video: sanfte Ken-Burns-Bewegung ---- */
.hero-video-bg video, .page-hero .hero-video-bg video {
  animation: kenburns 28s ease-in-out infinite alternate;
}
@keyframes kenburns {
  0%   { transform: scale(1.05) translate(0,0); }
  100% { transform: scale(1.16) translate(-1.5%, -1%); }
}

/* ---- Video-Strip (Kurs-Einblicke) ---- */
.video-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.video-tile {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-soft); aspect-ratio: 16/10; background: var(--ocean-900);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), border-color 0.4s, box-shadow 0.5s;
}
.video-tile:hover { transform: translateY(-8px) scale(1.02); border-color: rgba(216,166,87,0.5); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.video-tile video, .video-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.video-tile:hover img { transform: scale(1.06); }
.video-tile .vt-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px; font-size: 12.5px; font-weight: 600; color: var(--parchment);
  background: linear-gradient(transparent, rgba(4,9,15,0.9));
}
@media (max-width: 900px) { .video-strip { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .video-strip { grid-template-columns: 1fr; } }

/* ---- Sticky Mobile-CTA-Leiste ---- */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 7000;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(4,9,15,0.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(110%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.mobile-cta-bar.show { transform: translateY(0); }
.mobile-cta-bar a {
  flex: 1; text-align: center; text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 13px 10px; border-radius: 999px;
}
.mobile-cta-bar .c-call { color: var(--parchment); border: 1px solid var(--line); }
.mobile-cta-bar .c-cta { color: var(--ocean-950); background: linear-gradient(120deg, var(--gold), var(--gold-soft)); }
@media (max-width: 680px) { .mobile-cta-bar { display: flex; } body { padding-bottom: 4px; } footer { padding-bottom: 120px; } }

/* ---- Fokus-Sichtbarkeit (A11y) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}

/* ---- Scroll-Down-Cue stärker ---- */
.hero-scroll { animation: floatcue 2.4s ease-in-out infinite; }
@keyframes floatcue { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }

/* ---- Reduced Motion: alle neuen Bewegungen aus ---- */
@media (prefers-reduced-motion: reduce) {
  .card::after, .course::after, .article-card::after, .btn-gold::before { display: none; }
  .price-card, .hero-video-bg video, .page-hero .hero-video-bg video,
  .section::before, .hanse::before, .rechner::before, .logbuch::before, .journey::before,
  .hero-scroll { animation: none; }
  .moon, .moon::before, .moon .sun-rays { animation: none; }
  [data-tilt].tilting { transform: none; }
}

/* ==========================================================================
   COOKIE-CONSENT (self-hosted, DSGVO). Wird von consent.js injiziert.
   ========================================================================== */
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11000;
  background: rgba(6,15,26,0.97); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -18px 50px rgba(0,0,0,0.5);
  transform: translateY(110%); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.cc-banner.show { transform: translateY(0); }
.cc-banner-inner {
  width: min(1240px, 94vw); margin: 0 auto; padding: 20px 0;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.cc-banner-text { flex: 1 1 420px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.cc-banner-text strong { color: var(--ink); }
.cc-banner-text a { color: var(--teal); }
.cc-banner-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.cc-btn {
  font-family: var(--body); font-weight: 700; font-size: 13.5px; letter-spacing: 0.02em;
  padding: 12px 20px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.cc-btn.cc-gold { color: var(--ocean-950); background: linear-gradient(120deg, var(--gold), var(--gold-soft)); }
.cc-btn.cc-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(216,166,87,0.4); }
.cc-btn.cc-ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.cc-btn.cc-ghost:hover { border-color: var(--teal); color: var(--teal); }

.cc-overlay {
  position: fixed; inset: 0; z-index: 11001;
  background: rgba(4,9,15,0.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity 0.3s ease;
}
.cc-overlay.show { opacity: 1; }
.cc-modal {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(170deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  transform: translateY(16px) scale(0.98); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.cc-overlay.show .cc-modal { transform: none; }
.cc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cc-modal-head h2 { font-family: var(--display); font-size: 22px; color: var(--parchment); font-weight: 800; letter-spacing: 0.03em; }
.cc-close { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 6px; line-height: 1; transition: color 0.2s; }
.cc-close:hover { color: var(--gold); }
.cc-modal-intro { color: var(--muted); font-size: 14px; margin: 12px 0 20px; }
.cc-rows { display: grid; gap: 12px; }
.cc-row { background: rgba(8,21,36,0.6); border: 1px solid var(--line-soft); border-radius: 13px; padding: 16px 18px; }
.cc-row-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cc-row-title { font-weight: 700; font-size: 15px; color: var(--parchment); }
.cc-row-desc { color: var(--muted); font-size: 12.8px; margin-top: 8px; line-height: 1.55; }
.cc-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.cc-switch input { opacity: 0; width: 0; height: 0; }
.cc-slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: var(--line); transition: background 0.25s;
}
.cc-slider::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.25s;
}
.cc-switch input:checked + .cc-slider { background: var(--teal-deep); }
.cc-switch input:checked + .cc-slider::before { transform: translateX(20px); }
.cc-switch input:disabled + .cc-slider { background: var(--teal-dim); opacity: 0.65; cursor: not-allowed; }
.cc-modal-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.cc-modal-btns .cc-btn { flex: 1; text-align: center; min-width: 130px; }

.cc-reopen {
  position: fixed; left: 16px; bottom: 16px; z-index: 10500;
  font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--muted);
  background: rgba(6,15,26,0.9); border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 9px 14px; cursor: pointer; backdrop-filter: blur(8px);
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.cc-reopen:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }

@media (max-width: 680px) {
  .cc-banner-inner { padding: 16px 0; gap: 14px; }
  .cc-banner-btns { width: 100%; }
  .cc-banner-btns .cc-btn { flex: 1; text-align: center; }
  .cc-reopen { left: 10px; bottom: 74px; font-size: 11px; padding: 8px 12px; } /* ueber der Mobile-CTA-Leiste */
}
@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-overlay, .cc-modal, .cc-slider, .cc-slider::before { transition: none; }
}

/* ==========================================================================
   ARTWORK-UPGRADE (03.07.2026): Scroll-Stacking-Karten, Marker, Bildband
   Inspiriert von der alten hafenschnack.com (Karten die sich ineinanderschieben,
   warme Bildwelt). Passt zur Premium-Navy/Gold-Marke.
   ========================================================================== */

/* ---- Marker-Hervorhebung von Keywords (goldener Textmarker) ---- */
.mark {
  position: relative; white-space: nowrap; padding: 0 0.12em;
  color: var(--ocean-950); font-weight: inherit; z-index: 0;
}
.mark::before {
  content: ""; position: absolute; left: -0.04em; right: -0.04em; top: 8%; bottom: 6%;
  z-index: -1; border-radius: 4px;
  background: linear-gradient(105deg, var(--gold), var(--gold-soft));
  transform: skewX(-4deg) scaleX(var(--mk, 1)); transform-origin: left center;
  box-shadow: 0 4px 16px rgba(216,166,87,0.35);
}
.section:not(.section-sand) .mark, .cta-band .mark, .page-hero .mark { color: var(--ocean-950); }
[data-reveal] .mark::before { transform: skewX(-4deg) scaleX(0); transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.25s; }
[data-reveal].is-in .mark::before, .is-in .mark::before { transform: skewX(-4deg) scaleX(1); }

/* ---- Scroll-Stacking-Karten (schieben sich beim Scrollen ineinander) ---- */
.stack-showcase { position: relative; }
.stack { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
.stack-card {
  position: sticky;
  top: calc(var(--nav-h) + 26px + var(--i, 0) * 16px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 3.5vw, 52px);
  align-items: center;
  background: linear-gradient(155deg, var(--ocean-800), var(--ocean-900));
  border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(24px, 3vw, 44px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  overflow: hidden;
  will-change: transform;
}
.stack-card.alt { grid-template-columns: 0.95fr 1.05fr; }
.stack-card.alt .stack-media { order: 2; }
.stack-card.alt .stack-body { order: 1; }
.stack-media {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16/11; box-shadow: 0 18px 44px rgba(0,0,0,0.4);
}
.stack-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.stack-card:hover .stack-media img { transform: scale(1.09); }
.stack-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(4,9,15,0.25), transparent 55%);
}
.stack-num {
  font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 46px);
  color: var(--gold); line-height: 1; margin-bottom: 12px;
}
.stack-body h3 {
  font-family: var(--display); font-weight: 800; letter-spacing: 0.02em;
  font-size: clamp(22px, 2.8vw, 34px); color: var(--parchment); line-height: 1.12; margin-bottom: 14px;
}
.stack-body p { color: var(--muted); font-size: clamp(14.5px, 1.4vw, 16.5px); line-height: 1.65; }
.stack-body .stack-price {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 16px;
  font-family: var(--display); font-weight: 800; color: var(--gold); font-size: 22px;
}
.stack-body .stack-price s { color: var(--muted); font-size: 0.62em; font-weight: 500; }
.stack-body .link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; color: var(--teal); text-decoration: none; }
.stack-body .link:hover { color: var(--gold); gap: 12px; }
@media (max-width: 820px) {
  .stack-card, .stack-card.alt { grid-template-columns: 1fr; position: relative; top: auto; }
  .stack-card.alt .stack-media, .stack-card.alt .stack-body { order: initial; }
  .stack-media { aspect-ratio: 16/9; }
}

/* ---- Warmes Vollbild-Bildband (full-bleed, mit Text darüber) ---- */
.image-band {
  position: relative; min-height: clamp(340px, 46vw, 520px);
  display: flex; align-items: center;
  background-size: cover; background-position: center; background-attachment: fixed;
  overflow: hidden; isolation: isolate;
}
.image-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(4,9,15,0.86) 0%, rgba(4,9,15,0.55) 45%, rgba(4,9,15,0.25) 100%);
}
.image-band .container { position: relative; z-index: 1; max-width: 760px; }
.image-band .eyebrow { color: var(--gold-soft); }
.image-band h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.12; text-wrap: balance; }
.image-band p { color: rgba(255,255,255,0.9); font-size: clamp(15px, 1.5vw, 18px); margin-top: 16px; max-width: 56ch; }
.image-band .hero-ctas { margin-top: 28px; justify-content: flex-start; }
@media (max-width: 680px) { .image-band { background-attachment: scroll; } }

/* ---- Playful Akzent: goldener Sonnenstern (SVG-frei, CSS) ---- */
.accent-star {
  position: absolute; width: 54px; height: 54px; pointer-events: none; opacity: 0.85;
  background:
    conic-gradient(from 0deg, transparent 0 8deg, var(--gold) 8deg 10deg, transparent 10deg 30deg,
      var(--gold) 30deg 32deg, transparent 32deg 52deg, var(--gold) 52deg 54deg, transparent 54deg 74deg,
      var(--gold) 74deg 76deg, transparent 76deg 96deg, var(--gold) 96deg 98deg, transparent 98deg 118deg,
      var(--gold) 118deg 120deg, transparent 120deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 34%, #000 46%, transparent 50%);
          mask: radial-gradient(circle, transparent 30%, #000 34%, #000 46%, transparent 50%);
  animation: sun-spin 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .stack-media img, [data-reveal] .mark::before { transition: none; }
  .accent-star { animation: none; }
  .image-band { background-attachment: scroll; }
}

/* ==========================================================================
   DESIGN-BAUKASTEN (03.07.2026): Pro-Seite-Akzentfarben + nautische WOW-Module
   Jede Landingpage setzt eine body-Klasse (page-seo, page-website, page-ki,
   page-social, page-ads, page-shop) und erhaelt eigene Akzentfarbe + Motiv.
   Alle Module respektieren prefers-reduced-motion.
   ========================================================================== */

/* ---- Akzent-Token: Standard = Teal, pro Seite ueberschrieben ---- */
:root { --accent: var(--teal); --accent-soft: #7fe3e8; --accent-deep: var(--teal-deep); --accent-glow: rgba(53,194,201,0.35); }
body.page-seo     { --accent:#3ad6b0; --accent-soft:#8ff0d8; --accent-deep:#1f9e82; --accent-glow:rgba(58,214,176,0.34); }
body.page-website { --accent:#5b9dd9; --accent-soft:#a7cdf0; --accent-deep:#2f6ba8; --accent-glow:rgba(91,157,217,0.34); }
body.page-ki      { --accent:#a06bff; --accent-soft:#cbb0ff; --accent-deep:#6f3fd0; --accent-glow:rgba(160,107,255,0.36); }
body.page-social  { --accent:#ff6b8a; --accent-soft:#ffb0c0; --accent-deep:#d63f63; --accent-glow:rgba(255,107,138,0.34); }
body.page-ads     { --accent:#ff8a3d; --accent-soft:#ffc399; --accent-deep:#d1631c; --accent-glow:rgba(255,138,61,0.34); }
body.page-shop    { --accent:#2ecc8f; --accent-soft:#8ee8c2; --accent-deep:#1a9e69; --accent-glow:rgba(46,204,143,0.34); }

/* Akzent-Helfer: nutzen die per-Seite Farbe statt Teal */
.accent { color: var(--accent); }
.accent-band { background: linear-gradient(120deg, var(--accent-deep), var(--accent)); }
.btn-accent {
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px;
  font-weight:800; letter-spacing:.02em; text-decoration:none; border:0; cursor:pointer;
  color:var(--ocean-950); background:linear-gradient(120deg,var(--accent-soft),var(--accent));
  box-shadow:0 10px 30px var(--accent-glow); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.btn-accent:hover { transform:translateY(-3px); box-shadow:0 16px 44px var(--accent-glow); }
.eyebrow.accent-eyebrow { color:var(--accent-soft); }
.eyebrow.accent-eyebrow::before { background:var(--accent); }

/* Akzent-Marker (statt Gold-Marker), fuer Seiten mit eigener Farbwelt */
.mark.mark-accent::before { background:linear-gradient(105deg,var(--accent-deep),var(--accent)); box-shadow:0 4px 16px var(--accent-glow); }

/* ---- Kompass-Rose (SVG, dreht langsam), fuer KI-Kurs / Heldenreise ---- */
.compass { position:relative; width:clamp(160px,22vw,260px); aspect-ratio:1; margin:0 auto; }
.compass svg { width:100%; height:100%; display:block; filter:drop-shadow(0 8px 30px var(--accent-glow)); }
.compass .cmp-ring { animation:cmp-spin 60s linear infinite; transform-origin:50% 50%; }
.compass .cmp-needle { animation:cmp-sway 6s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes cmp-spin { to { transform:rotate(360deg); } }
@keyframes cmp-sway { 0%,100%{transform:rotate(-7deg);} 50%{transform:rotate(9deg);} }

/* ---- Tau/Seil-Trenner (gedrehtes Seil als Sektions-Divider) ---- */
.rope-divider { height:14px; width:100%; border:0; margin:0;
  background:
    repeating-linear-gradient(45deg, var(--gold) 0 7px, var(--gold-soft) 7px 14px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  opacity:.7; border-radius:999px;
}

/* ---- Wellen-Animation (SVG-Layer, sanft driftend) ---- */
.wave-anim { position:absolute; left:0; right:0; width:100%; line-height:0; pointer-events:none; }
.wave-anim.top { top:0; transform:rotate(180deg); }
.wave-anim.bottom { bottom:0; }
.wave-anim svg { width:200%; height:clamp(50px,7vw,110px); display:block; }
.wave-anim .wp { animation:wave-drift 14s linear infinite; }
.wave-anim .wp.slow { animation-duration:22s; opacity:.5; }
@keyframes wave-drift { to { transform:translateX(-50%); } }

/* ---- Split-Reveal (zwei Haelften fahren auseinander und geben Inhalt frei) ---- */
.split-reveal { position:relative; overflow:hidden; }
.split-reveal::before, .split-reveal::after {
  content:""; position:absolute; left:0; right:0; z-index:3; background:var(--ocean-950);
  transition:transform 1s cubic-bezier(.77,0,.18,1); pointer-events:none;
}
.split-reveal::before { top:0; height:50%; }
.split-reveal::after  { bottom:0; height:50%; }
.split-reveal.is-in::before { transform:translateY(-100%); }
.split-reveal.is-in::after  { transform:translateY(100%); }

/* ---- Zahlen-Ticker (grosse animierte Kennzahl mit Akzent-Glow) ---- */
.ticker { display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,60px); }
.ticker .tk { text-align:center; }
.ticker .tk b {
  display:block; font-family:var(--display); font-weight:800; line-height:1;
  font-size:clamp(38px,6vw,74px);
  background:linear-gradient(120deg,var(--accent-soft),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px var(--accent-glow);
}
.ticker .tk span { display:block; margin-top:8px; color:var(--muted); font-size:14px; letter-spacing:.04em; text-transform:uppercase; }

/* ---- Vorher-Nachher-Slider (reiner CSS/JS-Wipe, fuer SEO-Ranking) ---- */
.ba-slider { position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.45); user-select:none; }
.ba-slider img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-slider .ba-after { clip-path:inset(0 0 0 var(--ba,50%)); }
.ba-slider .ba-handle { position:absolute; top:0; bottom:0; left:var(--ba,50%); width:2px; background:var(--accent); box-shadow:0 0 20px var(--accent-glow); z-index:2; }
.ba-slider .ba-handle::after { content:"⇄"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--ocean-950); display:grid; place-items:center; font-size:18px; font-weight:900; box-shadow:0 6px 18px var(--accent-glow); }
.ba-slider input[type=range] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:3; margin:0; }
.ba-slider .ba-tag { position:absolute; bottom:12px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; z-index:2; background:rgba(4,9,15,.7); }
.ba-slider .ba-tag.l { left:12px; color:var(--muted); }
.ba-slider .ba-tag.r { right:12px; color:var(--accent-soft); }

/* ---- Kapitel-Stepper (nummerierte Etappen mit Verbindungslinie) ---- */
.stepper { position:relative; display:grid; gap:clamp(22px,3vw,40px); }
.stepper::before { content:""; position:absolute; left:26px; top:20px; bottom:20px; width:2px;
  background:linear-gradient(var(--accent),transparent); opacity:.5; }
.stepper .step { position:relative; display:grid; grid-template-columns:54px 1fr; gap:20px; align-items:start; }
.stepper .step .step-dot { width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:22px; color:var(--ocean-950);
  background:linear-gradient(140deg,var(--accent-soft),var(--accent)); box-shadow:0 8px 24px var(--accent-glow); z-index:1; }
.stepper .step h3 { font-family:var(--display); font-weight:800; color:var(--parchment); font-size:clamp(18px,2.2vw,24px); margin-bottom:6px; }
.stepper .step p { color:var(--muted); font-size:15px; line-height:1.6; }

/* ---- Radar-Sweep (fuer Google Ads: rotierender Suchstrahl) ---- */
.radar { position:relative; width:clamp(180px,24vw,300px); aspect-ratio:1; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle, transparent 0 34%, var(--accent-glow) 34% 35%, transparent 35% 64%, var(--accent-glow) 64% 65%, transparent 65%);
  border:1px solid var(--line); overflow:hidden; }
.radar::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, var(--accent) 0deg, transparent 55deg);
  -webkit-mask:radial-gradient(circle, transparent 0 6%, #000 6%); mask:radial-gradient(circle, transparent 0 6%, #000 6%);
  opacity:.55; animation:radar-spin 4s linear infinite; }
.radar .blip { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--accent-soft); box-shadow:0 0 12px var(--accent); animation:blip 4s ease-in-out infinite; }
@keyframes radar-spin { to { transform:rotate(360deg); } }
@keyframes blip { 0%,20%{opacity:0;transform:scale(.4);} 30%{opacity:1;transform:scale(1);} 60%,100%{opacity:0;transform:scale(.4);} }

/* ---- Produkt-/Regal-Karten-Stapel (Onlineshop) ---- */
.shelf { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
.shelf .prod { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(160deg,var(--ocean-800),var(--ocean-900)); transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.shelf .prod:hover { transform:translateY(-8px); box-shadow:0 22px 50px var(--accent-glow); }
.shelf .prod .prod-media { aspect-ratio:4/5; overflow:hidden; }
.shelf .prod .prod-media img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.shelf .prod:hover .prod-media img { transform:scale(1.07); }
.shelf .prod .prod-body { padding:14px 16px; }
.shelf .prod .prod-body b { display:block; color:var(--parchment); font-weight:700; }
.shelf .prod .prod-body span { color:var(--accent-soft); font-weight:800; }
.shelf .prod .prod-cart { position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%;
  background:var(--accent); color:var(--ocean-950); display:grid; place-items:center; font-size:18px;
  opacity:0; transform:translateY(-6px); transition:.35s; box-shadow:0 6px 18px var(--accent-glow); }
.shelf .prod:hover .prod-cart { opacity:1; transform:translateY(0); }

/* ---- Blueprint-Raster (Wix-Agentur: Bauplan-Linien hinter Hero) ---- */
.blueprint { position:absolute; inset:0; z-index:-1; opacity:.14; pointer-events:none;
  background-image:linear-gradient(var(--accent) 1px, transparent 1px), linear-gradient(90deg, var(--accent) 1px, transparent 1px);
  background-size:44px 44px; -webkit-mask:radial-gradient(ellipse at 30% 20%, #000, transparent 72%); mask:radial-gradient(ellipse at 30% 20%, #000, transparent 72%); }

/* ---- Feed-Marquee (Social: laufendes Kachel-Band) ---- */
.feed-marquee { display:flex; gap:16px; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.feed-marquee .feed-track { display:flex; gap:16px; animation:feed-run 32s linear infinite; }
.feed-marquee .feed-tile { flex:0 0 auto; width:190px; aspect-ratio:4/5; border-radius:16px; overflow:hidden; border:1px solid var(--line); position:relative; }
.feed-marquee .feed-tile img { width:100%; height:100%; object-fit:cover; }
.feed-marquee:hover .feed-track { animation-play-state:paused; }
@keyframes feed-run { to { transform:translateX(-50%); } }

/* ---- Akzent-Aurora (per-Seite gefaerbter Lichtschleier hinter Hero) ---- */
.accent-aurora { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.accent-aurora::before, .accent-aurora::after { content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.accent-aurora::before { width:52vw; height:52vw; top:-16vw; left:-10vw; background:radial-gradient(circle, var(--accent-glow), transparent 70%); animation:aurora-a 18s ease-in-out infinite alternate; }
.accent-aurora::after  { width:44vw; height:44vw; bottom:-16vw; right:-8vw; background:radial-gradient(circle, var(--accent-glow), transparent 70%); animation:aurora-b 22s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform:translate(6vw,4vw) scale(1.12); } }
@keyframes aurora-b { to { transform:translate(-5vw,-3vw) scale(1.15); } }

@media (max-width:820px){
  .stepper .step { grid-template-columns:44px 1fr; }
  .stepper .step .step-dot { width:44px; height:44px; font-size:18px; }
  .stepper::before { left:21px; }
}
@media (prefers-reduced-motion: reduce){
  .compass .cmp-ring, .compass .cmp-needle, .wave-anim .wp, .radar::before, .radar .blip,
  .feed-marquee .feed-track, .accent-aurora::before, .accent-aurora::after { animation:none; }
  .split-reveal::before, .split-reveal::after { display:none; }
}

/* ==========================================================================
   WERFT-STORY (03.07.2026): Vom Wrack zur Yacht, 4 Seedance-Clips als Scroll-Reise
   ========================================================================== */
.voyage { background: linear-gradient(180deg, var(--ocean-950), var(--ocean-900)); }
.voyage-steps { display:grid; gap:clamp(30px,4.5vw,68px); margin-top:clamp(30px,4vw,54px); }
.voyage-step { display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(24px,3.5vw,52px); align-items:center; }
.voyage-step:nth-child(even) .voyage-media { order:2; }
.voyage-media {
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/9;
  box-shadow:0 26px 64px rgba(0,0,0,0.55); border:1px solid var(--line);
}
.voyage-media video { width:100%; height:100%; object-fit:cover; display:block; }
.voyage-media::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(4,9,15,0.35), transparent 55%); pointer-events:none; }
.voyage-num {
  position:absolute; top:12px; left:18px; z-index:1;
  font-family:var(--display); font-weight:800; font-size:clamp(28px,3.4vw,46px);
  color:var(--gold); text-shadow:0 2px 14px rgba(0,0,0,0.7);
}
.voyage-body h3 { font-family:var(--display); font-weight:800; color:var(--parchment); font-size:clamp(21px,2.6vw,32px); line-height:1.15; margin-bottom:12px; }
.voyage-body p { color:var(--muted); font-size:clamp(15px,1.5vw,17px); line-height:1.66; }
.voyage-body .voyage-tag { display:inline-block; margin-bottom:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:700; }
@media (max-width:820px){
  .voyage-step, .voyage-step:nth-child(even) .voyage-media { grid-template-columns:1fr; order:initial; }
}

/* Yacht-Video als Hintergrund im finalen CTA */
.cta-band.contact { position:relative; overflow:hidden; isolation:isolate; }
.cta-video-bg { position:absolute; inset:0; z-index:-1; }
.cta-video-bg video { width:100%; height:100%; object-fit:cover; display:block; }
.cta-video-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,12,20,0.80), rgba(4,9,15,0.90)); }

/* ===================== Standort-Seiten: Stadtbild, Story, Testen-Sie-uns ===================== */
/* Cinematisches Stadt-Bild direkt unter dem Hero (Higgsfield) */
.city-visual { position: relative; margin-top: clamp(30px, 4.5vw, 52px); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(4,12,22,0.5); border: 1px solid var(--line-soft); }
.city-visual img { display: block; width: 100%; height: clamp(280px, 44vw, 540px); object-fit: cover; transform: scale(1.01); }
.city-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,15,26,0.10) 35%, rgba(6,15,26,0.78) 100%); }
.city-visual .cv-cap { position: absolute; z-index: 2; left: clamp(20px,4vw,42px); right: clamp(20px,4vw,42px); bottom: clamp(18px,3vw,32px); color: #fff; }
.city-visual .cv-cap .k { font-family: var(--display); font-weight: 700; font-size: clamp(21px,3vw,33px); letter-spacing: 0.04em; line-height: 1.15; }
.city-visual .cv-cap .k em { color: var(--gold-soft); font-style: normal; }
.city-visual .cv-cap .s { color: #dbe8f1; font-size: 14.5px; margin-top: 8px; max-width: 660px; line-height: 1.55; }

/* Stadt-Story: Bild + Text zweispaltig */
.city-story { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(24px,4vw,50px); align-items: center; }
.city-story.flip { grid-template-columns: 1.08fr 0.92fr; }
.city-story.flip .cs-media { order: 2; }
.city-story .cs-media { border-radius: 18px; overflow: hidden; box-shadow: 0 22px 54px rgba(4,12,22,0.42); border: 1px solid var(--line-soft); align-self: stretch; }
.city-story .cs-media img { width: 100%; height: 100%; object-fit: cover; min-height: clamp(260px, 34vw, 420px); display: block; }
.city-story .cs-body h3 { font-family: var(--display); color: var(--parchment); font-size: clamp(19px,2.3vw,25px); margin-bottom: 12px; }
.section-sand .city-story .cs-body h3 { color: var(--ink-light); }
@media (max-width: 820px) { .city-story, .city-story.flip { grid-template-columns: 1fr; } .city-story.flip .cs-media { order: 0; } }

/* Testen Sie uns: Kostenvorteil-Kacheln */
.testus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(24px,3.5vw,36px); }
.testus .tu { background: rgba(6,14,24,0.94); border: 1px solid var(--line-soft); border-left: 3px solid var(--gold-soft); border-radius: 14px; padding: 20px 22px; }
.testus .tu .n { font-family: var(--display); color: var(--gold-soft); font-size: clamp(20px,2.4vw,26px); letter-spacing: 0.02em; }
.testus .tu h4 { font-family: var(--display); color: var(--parchment); font-size: 15.5px; margin: 8px 0 6px; }
.testus .tu p { color: var(--ink); font-size: 13.5px; line-height: 1.6; }
.testus-cta { margin-top: clamp(22px,3vw,32px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.testus-cta .claim { font-family: var(--display); color: var(--gold-soft); font-size: 16px; letter-spacing: 0.03em; }
.section-sand .testus-cta .claim { color: #8a6015; }
@media (max-width: 820px) { .testus { grid-template-columns: 1fr; } }

/* ===================== Startseite: Gratis-Buch-Band ===================== */
.book-band { background: linear-gradient(160deg, var(--ocean-900), #04121f); position: relative; overflow: hidden; }
.book-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.book-cover { perspective: 1100px; position: relative; }
/* Warmer Glow hinter dem Cover, damit es sich vom dunklen Band abhebt */
.book-cover::before { content: ""; position: absolute; left: 50%; top: 50%; width: 78%; height: 82%;
  transform: translate(-50%, -46%); border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(232,201,135,0.30), rgba(232,201,135,0.10) 45%, transparent 70%);
  filter: blur(26px); pointer-events: none; }
.book-cover img { position: relative; z-index: 1; width: 100%; max-width: 372px; border-radius: 9px; display: block; margin: 0 auto;
  box-shadow: 0 46px 92px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,201,135,0.5), 0 0 46px rgba(232,201,135,0.22);
  transform: rotateY(-13deg) rotateX(3deg); transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.book-cover:hover img { transform: rotateY(-4deg) rotateX(1deg) translateY(-8px); }
.book-copy .badge-free { display:inline-block; margin-top:14px; font-family: var(--display); color: var(--gold-soft); font-size: 14px; letter-spacing: 0.04em; border:1px dashed rgba(232,201,135,0.5); border-radius: 999px; padding: 6px 16px; }
@media (max-width: 820px) { .book-grid { grid-template-columns: 1fr; text-align: center; } .book-cover img { transform: none; max-width: 240px; } .book-copy .hero-ctas { justify-content: center; } }

/* ===================== Startseite Kennzahlen: kompakter + Gold-Akzent ===================== */
.gold-hairline { height: 2px; width: min(240px, 62%); margin: 0 auto clamp(20px, 3vw, 32px); border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 20px rgba(232,201,135,0.5); opacity: 0.9; }
.stats.stats-gold { margin-top: clamp(14px, 2vw, 26px); box-shadow: 0 0 60px rgba(232,201,135,0.07); }
.stats-gold .num { text-shadow: 0 0 26px rgba(232,201,135,0.28); }
.stats-gold .stat { transition: background 0.3s; }
.stats-gold .stat:hover { background: rgba(232,201,135,0.05); }