/* ============================================================
   Potenzialkompass — Die Tauchfahrt (v25, 02.09.2026)
   Farbwelt: Creme (Oberfläche) / Nachtblau (Ozean) / Gold (Licht)
   Aufbau dieser Datei: Basis-System → Bausteine → Tauchfahrt-Block
   (ganz unten, überschreibt gezielt ältere Regeln).
   ============================================================ */

:root {
  --cream: #f6efe2;
  --paper: #fbf7ee;
  --sand: #efe5d0;
  --navy: #1e3a5f;
  --navy-deep: #16294a;
  --ink: #2b3a50;
  --ink-soft: #55647c;
  --gold: #b48a2f;
  --gold-soft: #d9bc7a;
  --gold-pale: #ecdfc0;
  /* Lesbare Gold-Töne für Text auf hellem Grund (Kontrast ≥ 4.5:1 bzw. ≥ 3:1) */
  --gold-text: #7f5f1a;
  --gold-deep: #9a7524;
  /* Der Ozean: von der Wasserlinie bis zum tiefsten Punkt */
  --ozean-0: #1e3a5f;
  --ozean-1: #172f52;
  --ozean-2: #10203d;
  --ozean-3: #0a1529;
  --ozean-text: rgba(246, 239, 226, 0.88);
  --ozean-text-soft: rgba(246, 239, 226, 0.72);

  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-script: "Great Vibes", cursive;
  --font-sans: "Nunito Sans", system-ui, -apple-system, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.7;
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 55% 40% at 10% 5%, rgba(212, 175, 110, 0.18), transparent 70%),
    radial-gradient(ellipse 45% 30% at 92% 12%, rgba(30, 58, 95, 0.1), transparent 70%),
    radial-gradient(ellipse 50% 35% at 88% 88%, rgba(212, 175, 110, 0.14), transparent 70%),
    radial-gradient(ellipse 45% 30% at 6% 92%, rgba(30, 58, 95, 0.08), transparent 70%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(1120px, 92%);
  margin-inline: auto;
}

/* ---------- typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--navy);
  line-height: 1.2;
  font-weight: 600;
}

h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
}

h3 {
  font-size: 1.35rem;
}

.script-accent {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--gold);
  font-size: 1.25em;
  line-height: 1;
}

.heading-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

/* ---------- ornaments ---------- */

.gold-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: var(--gold);
  margin: 1.2rem auto 1.6rem;
  font-size: 0.9rem;
}

.gold-divider::before,
.gold-divider::after {
  content: "";
  height: 1px;
  width: 4.5rem;
}

.gold-divider::before {
  background: linear-gradient(to right, transparent, var(--gold-soft));
}

.gold-divider::after {
  background: linear-gradient(to left, transparent, var(--gold-soft));
}

.card-soft {
  background: rgba(251, 247, 238, 0.9);
  border: 1px solid rgba(180, 138, 47, 0.25);
  border-radius: 18px;
  box-shadow: 0 18px 40px -26px rgba(30, 58, 95, 0.35);
}

/* ---------- buttons ---------- */

.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.9rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    background 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--navy);
  color: var(--paper);
  border: 1px solid var(--navy);
  box-shadow: 0 14px 30px -14px rgba(22, 41, 74, 0.55);
}

.btn-primary:hover {
  background: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(22, 41, 74, 0.6);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(180, 138, 47, 0.55);
}

.btn-outline:hover {
  background: rgba(212, 175, 110, 0.15);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* ---------- reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Header / Navigation
   ============================================================ */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: rgba(22, 41, 74, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(217, 188, 122, 0.3);
  transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px -18px rgba(30, 58, 95, 0.35);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.65rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.nav-logo {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(180, 138, 47, 0.45),
    0 0 0 4px rgba(180, 138, 47, 0.12);
  background: var(--paper);
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.nav-brand-name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cream);
  text-transform: uppercase;
}

.nav-brand-name em {
  font-style: normal;
  color: var(--gold-soft);
}

.nav-brand-tagline {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, 0.65);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.nav-links a {
  text-decoration: none;
  color: rgba(246, 239, 226, 0.9);
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  padding-block: 0.3rem;
  white-space: nowrap;
}

.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-links a:not(.nav-cta):hover::after {
  transform: scaleX(1);
}

.nav-cta {
  background: var(--gold);
  color: var(--navy-deep) !important;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.nav-cta:hover {
  background: var(--gold-soft);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--cream);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.hero-headline {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 600;
  margin-bottom: 1.4rem;
}

.hero-headline-accent {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--gold);
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-top: 0.55rem;
  line-height: 1.15;
}

.hero-sub {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero-sub strong {
  color: var(--navy);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-portrait {
  display: flex;
  justify-content: center;
}

.portrait-frame {
  width: min(380px, 80vw);
  aspect-ratio: 1;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(180, 138, 47, 0.4),
    0 0 0 10px rgba(180, 138, 47, 0.1),
    0 30px 70px -25px rgba(30, 58, 95, 0.45);
}

.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Sections (generic)
   ============================================================ */

.section {
  padding-block: clamp(3.5rem, 9vh, 6.5rem);
}

.section-tinted {
  background: rgba(239, 229, 208, 0.5);
  border-block: 1px solid rgba(180, 138, 47, 0.15);
}

.section-head {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2.2rem, 5vh, 3.5rem);
}

.section-intro {
  font-size: 1.1rem;
  color: var(--ink-soft);
}

/* ---------- pillars ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
}

@media (max-width: 1080px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

.pillar {
  perspective: 1200px;
  height: 300px;
  cursor: pointer;
  outline: none;
}

.pillar-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.pillar:focus-visible .pillar-inner,
.pillar.is-flipped .pillar-inner {
  transform: rotateY(180deg);
}

/* Hover-Drehung nur auf Geräten mit echter Maus — auf Touch-Geräten
   bleibt sonst der Hover-Zustand nach dem Antippen "kleben" und die
   Karte lässt sich nicht mehr zurückdrehen */
@media (hover: hover) and (pointer: fine) {
  .pillar:hover .pillar-inner {
    transform: rotateY(180deg);
  }
}

.pillar-front,
.pillar-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.4rem 1.1rem;
}

.pillar-front {
  gap: 1rem;
}

.pillar-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(ellipse 90% 70% at 20% 15%, rgba(212, 175, 110, 0.2), transparent 60%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: rgba(246, 239, 226, 0.92);
  box-shadow: 0 18px 40px -26px rgba(30, 58, 95, 0.5);
  gap: 0.6rem;
}

.pillar-back h4 {
  color: var(--gold-soft);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pillar-back p {
  font-size: 0.86rem;
  line-height: 1.55;
}

.pillar-front {
  gap: 0.55rem;
}

.pillar-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.85;
}

.pillar h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}

.pillar h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: var(--gold-soft);
  margin: 0.65rem auto 0;
}

.pillar-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pillar-hint {
  position: absolute;
  bottom: 0.9rem;
  font-size: 1rem;
  color: var(--gold-soft);
  opacity: 0.8;
}

/* ---------- split sections ---------- */

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.split-reverse .split-text {
  order: 1;
}

.split-reverse .split-image {
  order: 2;
}

.split-text h2 {
  margin-bottom: 1.2rem;
}

.split-text p {
  margin-bottom: 1.1rem;
}

.framed-image {
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(180, 138, 47, 0.35),
    0 0 0 8px rgba(251, 247, 238, 0.9),
    0 0 0 9px rgba(180, 138, 47, 0.25),
    0 34px 70px -30px rgba(30, 58, 95, 0.5);
}

.framed-tall {
  max-height: 620px;
  width: 100%;
  object-fit: cover;
}

/* ---------- offer ---------- */

.offer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 1.2rem;
}

.offer-list {
  list-style: none;
  margin: 1.4rem 0 2rem;
  display: grid;
  gap: 1rem;
}

.offer-list li {
  padding: 1rem 1.2rem 1rem 1.4rem;
  background: rgba(251, 247, 238, 0.85);
  border-left: 3px solid var(--gold-soft);
  border-radius: 0 14px 14px 0;
  color: var(--ink-soft);
  box-shadow: 0 12px 30px -22px rgba(30, 58, 95, 0.35);
}

.offer-step {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
}

/* ---------- story ---------- */

.story-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold);
  border-top: 1px solid rgba(180, 138, 47, 0.25);
  padding-top: 1.2rem;
}

/* ---------- knowledge ---------- */

.knowledge-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 36rem;
  margin-inline: auto;
  gap: 1.4rem;
  align-items: stretch;
}

.freebie-card {
  padding: 2.4rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  background:
    radial-gradient(ellipse 80% 60% at 85% 10%, rgba(30, 58, 95, 0.08), transparent 70%),
    rgba(251, 247, 238, 0.95);
}

.freebie-card h3 {
  font-size: 1.8rem;
}

.freebie-card p {
  color: var(--ink-soft);
}

.badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(43, 58, 80, 0.08);
  border: 1px solid rgba(43, 58, 80, 0.15);
}

.badge-active {
  color: var(--paper);
  background: var(--gold);
  border-color: var(--gold);
}

.coming-soon-stack {
  display: grid;
  gap: 1.4rem;
}

.coming-card {
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.coming-card:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -28px rgba(30, 58, 95, 0.45);
}

.coming-card h4 {
  font-size: 1.2rem;
}

.coming-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- umfrage ---------- */

.survey-card {
  --sv-pad: clamp(2rem, 5vw, 3.2rem);
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--sv-pad);
  overflow: hidden;
}

.survey-screen {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-align: center;
  align-items: center;
}

.survey-screen h3 {
  font-size: 1.6rem;
}

.survey-screen p {
  color: var(--ink-soft);
  max-width: 32rem;
}

.survey-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}

.survey-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(180, 138, 47, 0.15);
  overflow: hidden;
}

.survey-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(to right, var(--gold-soft), var(--gold));
  transition: width 0.35s ease;
}

.survey-progress-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.survey-question {
  max-width: 34rem;
}

.survey-options {
  display: grid;
  gap: 0.8rem;
  width: 100%;
  max-width: 30rem;
}

.survey-option {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(251, 247, 238, 0.9);
  border: 1px solid rgba(180, 138, 47, 0.3);
  border-radius: 14px;
  padding: 0.95rem 1.4rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.survey-option:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 110, 0.14);
  transform: translateY(-2px);
}

.survey-option.is-selected {
  border-color: var(--navy);
  background: rgba(30, 58, 95, 0.08);
}

.survey-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin-top: 0.4rem;
}

.survey-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  max-width: 28rem;
  align-items: center;
}

.survey-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  padding: 0.9rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(180, 138, 47, 0.4);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.survey-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 110, 0.2);
}

.survey-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  text-align: left;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.survey-consent input {
  margin-top: 0.25rem;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.survey-error {
  color: #a63d2f;
  font-size: 0.9rem;
  font-weight: 600;
}

.survey-done-icon {
  font-size: 2.2rem;
  color: var(--gold);
}

/* ---------- vision ---------- */

.vision-quote {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: 1.4rem;
}

.vision-lead {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.vision-list {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.vision-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
}

.vision-list li::before {
  content: "\2726";
  position: absolute;
  left: 0.3rem;
  color: var(--gold);
}

/* ---------- brand statement ---------- */

.brand-statement {
  background:
    radial-gradient(ellipse 70% 90% at 20% 10%, rgba(212, 175, 110, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 90%, rgba(212, 175, 110, 0.1), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding-block: clamp(4rem, 10vh, 6.5rem);
  text-align: center;
}

.brand-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  color: var(--cream);
  max-width: 52rem;
  margin-inline: auto;
  line-height: 1.4;
}

.brand-quote-accent {
  display: block;
  font-family: var(--font-script);
  color: var(--gold-soft);
  font-size: 1.15em;
  margin-top: 0.7rem;
}

/* ---------- contact ---------- */

.contact-card {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem);
  max-width: 44rem;
  margin-inline: auto;
}

.contact-card h2 {
  margin-bottom: 1rem;
}

.contact-card p {
  color: var(--ink-soft);
  max-width: 32rem;
  margin: 0 auto 1.8rem;
}

.contact-actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Momente aus der Praxis ---------- */

.moment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-bottom: 2rem;
}

.moment-card {
  background: rgba(251, 247, 238, 0.9);
  border: 1px solid rgba(180, 138, 47, 0.25);
  border-radius: 18px;
  box-shadow: 0 18px 40px -26px rgba(30, 58, 95, 0.35);
  padding: 1.6rem 1.7rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.moment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -24px rgba(30, 58, 95, 0.45);
}

.moment-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--navy);
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--gold-pale);
}

.moment-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.moment-text strong {
  color: var(--navy);
  font-weight: 700;
}

.moment-heute {
  margin-bottom: 0;
}

.moment-heute strong {
  color: var(--gold);
}

.change-box {
  background: rgba(251, 247, 238, 0.9);
  border: 1px solid rgba(180, 138, 47, 0.25);
  border-left: 3px solid var(--gold);
  border-radius: 0 18px 18px 0;
  padding: 1.5rem 1.9rem;
  max-width: 46rem;
  margin: 0 auto;
}

.change-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 0.7rem;
}

.change-list {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.change-list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.change-list li::before {
  content: "\2726";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .moment-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- DNA-Unterseite ---------- */

.dna-hero {
  padding-top: clamp(7rem, 14vh, 9rem);
}

.dna-headline {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
}

.iceberg-wrap {
  max-width: 40rem;
  margin: 0 auto;
}

.iceberg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.dna-fragen-titel {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 1.3rem;
}

.dna-fragen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: 60rem;
  margin-inline: auto;
}

.dna-frage {
  padding: 1.3rem 1.4rem;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--navy);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dna-frage:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -24px rgba(30, 58, 95, 0.45);
}

.richtung-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.richtung-card {
  padding: 1.4rem 1.3rem;
}

.richtung-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.15rem;
}

.richtung-archetyp {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.richtung-card p:not(.richtung-archetyp) {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.dna-leitsatz {
  text-align: center;
  margin-top: 2.4rem;
}

.dna-leitsatz p {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--navy);
  line-height: 1.4;
}

.dna-leitsatz-accent {
  display: block;
  font-family: var(--font-script);
  color: var(--gold);
  font-size: 1.2em;
}

.expedition-steps {
  list-style: none;
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin: 0 auto 2rem;
}

.expedition-steps li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: rgba(251, 247, 238, 0.9);
  border: 1px solid rgba(180, 138, 47, 0.25);
  border-radius: 18px;
  box-shadow: 0 18px 40px -26px rgba(30, 58, 95, 0.35);
  padding: 1.3rem 1.5rem;
}

.step-nr {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold);
  background: var(--paper);
}

.expedition-steps h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.expedition-steps p {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .dna-fragen {
    grid-template-columns: 1fr;
  }

  .richtung-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .richtung-grid {
    grid-template-columns: 1fr;
  }
}

/* Zertifikats-Siegel in der Über-mich-Sektion */
.story-badge {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.story-badge img {
  width: 86px;
  height: auto;
  flex-shrink: 0;
}

.story-badge span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--navy-deep);
  color: rgba(246, 239, 226, 0.85);
  padding-block: 3.5rem 2.5rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.footer-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(217, 188, 122, 0.55),
    0 0 0 6px rgba(217, 188, 122, 0.12);
  margin-bottom: 1rem;
  background: var(--paper);
}

.footer-name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}

.footer-name em {
  font-style: normal;
  color: var(--gold-soft);
}

.footer-tagline {
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, 0.6);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  justify-content: center;
  padding-block: 1.4rem 1.2rem;
  margin-top: 1.2rem;
  border-top: 1px solid rgba(217, 188, 122, 0.2);
  width: min(640px, 100%);
}

.footer-nav a,
.footer-meta a {
  color: rgba(246, 239, 226, 0.85);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-nav a:hover,
.footer-meta a:hover {
  color: var(--gold-soft);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: rgba(246, 239, 226, 0.6);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .hero-grid,
  .split-grid,
  .knowledge-grid {
    grid-template-columns: 1fr;
  }

  .hero-portrait {
    order: -1;
  }

  .portrait-frame {
    width: min(300px, 70vw);
  }

  .split-reverse .split-image {
    order: 1;
  }

  .split-reverse .split-text {
    order: 2;
  }

  .framed-tall {
    max-height: 480px;
  }

}

@media (max-width: 1120px) {
  .nav-links {
    position: fixed;
    top: 80px;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    background: rgba(22, 41, 74, 0.98);
    border-left: 1px solid rgba(217, 188, 122, 0.25);
    border-bottom: 1px solid rgba(217, 188, 122, 0.25);
    padding: 0.6rem 0;
    width: min(320px, 80vw);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -20px 20px 50px -30px rgba(30, 58, 95, 0.4);
  }

  .nav-links.is-open {
    transform: translateX(0);
  }

  .nav-links a {
    width: 100%;
    text-align: right;
    padding: 0.85rem 1.6rem;
  }

  .nav-cta {
    border-radius: 0;
    margin-top: 0.4rem;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-brand-tagline {
    display: none;
  }
}

/* ---------- kennst du das? ---------- */

.label-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 0 2.2rem;
}

.label-chip {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--gold-pale);
  border-radius: 999px;
  padding: 0.45rem 1.25rem;
}

.problem-body {
  max-width: 46rem;
  margin: 0 auto 2.6rem;
  text-align: center;
}

.problem-body p {
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.7;
}

.problem-body strong {
  color: var(--navy);
}

.question-flip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1.2rem;
  max-width: 54rem;
  margin: 0 auto;
}

.flip-card {
  padding: 1.6rem 1.8rem;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
}

.flip-old {
  background: rgba(43, 58, 80, 0.05);
  border: 1px solid rgba(43, 58, 80, 0.14);
}

.flip-new {
  background: rgba(251, 247, 238, 0.95);
  border: 1px solid rgba(180, 138, 47, 0.4);
  box-shadow: 0 18px 40px -26px rgba(30, 58, 95, 0.35);
}

.flip-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.flip-new .flip-label {
  color: var(--gold);
}

.flip-question {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--ink);
}

.flip-new .flip-question {
  color: var(--navy);
  font-weight: 600;
}

.flip-arrow {
  align-self: center;
  font-size: 1.6rem;
  color: var(--gold);
}

@media (max-width: 700px) {
  .question-flip {
    grid-template-columns: 1fr;
  }

  .flip-arrow {
    transform: rotate(90deg);
  }
}

/* ---------- angebote: weitere wege ---------- */

.offer-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}

@media (max-width: 900px) {
  .offer-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- über mich: mission ---------- */

.mission-grid {
  margin-top: clamp(3rem, 7vw, 4.5rem);
}

/* ---------- kompass-check (umfrage) ---------- */

.sv-anim > * {
  animation: svFade 0.45s ease both;
}

@keyframes svFade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.q-illu {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  color: var(--gold);
  background:
    radial-gradient(circle at 32% 28%, rgba(251, 247, 238, 0.9), transparent 65%),
    radial-gradient(circle at 70% 75%, rgba(30, 58, 95, 0.16), transparent 60%),
    linear-gradient(150deg, rgba(217, 188, 122, 0.35), rgba(30, 58, 95, 0.12));
  box-shadow:
    0 0 0 1px rgba(180, 138, 47, 0.45),
    0 0 0 6px rgba(180, 138, 47, 0.08);
}

.q-illu svg {
  width: 40px;
  height: 40px;
}

.sv-start,
.sv-question,
.sv-result {
  text-align: center;
}

.sv-start h3,
.sv-question h3,
.sv-result h3 {
  font-size: 1.7rem;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.sv-start p {
  max-width: 34rem;
  margin: 0 auto 0.9rem;
  color: var(--ink-soft);
}

.sv-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
  opacity: 0.85;
  max-width: 34rem;
  margin: 0.9rem auto 0;
}

.sv-intuition {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
  margin: 0.2rem auto 0.4rem;
}

.sv-start .btn-primary {
  margin-top: 0.6rem;
}

.sv-progress {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.sv-progress-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(180, 138, 47, 0.18);
  overflow: hidden;
}

.sv-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  transition: width 0.4s ease;
}

.sv-progress-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.sv-szenario {
  max-width: 36rem;
  margin: 0 auto 1.4rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Aquarell-Kopfbild pro Frage */
.sv-hero {
  position: relative;
  margin: 0.4rem calc(-1 * var(--sv-pad)) 1.5rem;
  min-height: 260px;
  overflow: hidden;
  border-top: 1px solid var(--gold-pale);
  border-bottom: 1px solid var(--gold-pale);
}

.sv-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sv-hero-text {
  position: relative;
  padding: 6.2rem var(--sv-pad) 1rem;
  background: linear-gradient(
    180deg,
    rgba(251, 247, 238, 0) 0%,
    rgba(251, 247, 238, 0.55) 42%,
    rgba(251, 247, 238, 0.95) 78%
  );
}

.sv-hero-text h3 {
  margin-bottom: 0.35rem;
}

.sv-hero-text .sv-szenario {
  margin-bottom: 0.2rem;
}

@media (max-width: 700px) {
  .sv-hero {
    min-height: 210px;
  }

  .sv-hero-text {
    padding-top: 4.4rem;
  }
}

.sv-answers {
  display: grid;
  gap: 0.75rem;
  text-align: left;
}

.sv-answer {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  padding: 0.95rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(180, 138, 47, 0.28);
  background: rgba(251, 247, 238, 0.92);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sv-answer:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 30px -22px rgba(30, 58, 95, 0.45);
  transform: translateY(-1px);
}

.sv-answer.is-chosen {
  border-color: var(--gold);
  background: rgba(236, 223, 192, 0.55);
  box-shadow: 0 0 0 1px var(--gold);
}

.sv-letter {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
}

.sv-answer.is-chosen .sv-letter {
  background: var(--gold);
  color: var(--paper);
}

.sv-answer-text {
  font-size: 0.92rem;
  line-height: 1.5;
}

.sv-nav {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.2rem;
}

.sv-back {
  border: none;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.3rem 0.2rem;
}

.sv-back:hover {
  color: var(--navy);
}

.sv-form {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.sv-form input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(180, 138, 47, 0.4);
  background: var(--paper);
  color: var(--ink);
  min-width: min(320px, 100%);
  outline: none;
}

.sv-form input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(180, 138, 47, 0.15);
}

.sv-form input.is-invalid {
  border-color: #b0483f;
  box-shadow: 0 0 0 3px rgba(176, 72, 63, 0.15);
}

.sv-erklaerung {
  max-width: 38rem;
  margin: 0 auto 1.8rem;
  color: var(--ink-soft);
}

.sv-bars {
  display: grid;
  gap: 1.1rem;
  text-align: left;
  max-width: 34rem;
  margin: 0 auto;
}

.sv-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.sv-bar-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy);
}

.sv-bar-name em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.sv-bar-pct {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--gold);
}

.sv-bar-track {
  height: 9px;
  border-radius: 999px;
  background: rgba(43, 58, 80, 0.08);
  overflow: hidden;
}

.sv-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.8s ease;
}

.sv-bar-desc {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

.sv-bar.is-main .sv-bar-name {
  color: var(--gold);
}

.sv-disclaimer {
  max-width: 36rem;
  margin: 2rem auto 0;
  padding: 1.3rem 1.5rem;
  border-radius: 14px;
  background: rgba(251, 247, 238, 0.92);
  border: 1px solid var(--gold-pale);
}

.sv-disclaimer p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.sv-disclaimer strong {
  color: var(--navy);
}

.sv-quote {
  margin-top: 0.8rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--gold);
}

.sv-cta {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

/* ---------- faq ---------- */

.faq-list {
  max-width: 44rem;
  margin: 0 auto;
  display: grid;
  gap: 0.9rem;
}

.faq-item {
  padding: 0;
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--gold);
}

.faq-answer {
  padding: 0 1.5rem 1.25rem;
}

.faq-answer p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
  border-top: 1px solid var(--gold-pale);
  padding-top: 0.9rem;
}

.faq-answer a {
  color: var(--gold);
  font-weight: 600;
}

.faq-more {
  text-align: center;
  margin-top: 1.8rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.faq-more a {
  color: var(--gold);
  font-weight: 700;
}

/* ============================================================
   Feinschliff: Fokus-Ringe, Karten-Hover, Mobile-Details
   ============================================================ */

/* Sichtbarer Fokus für Tastatur-Bedienung (Barrierefreiheit) */
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.nav-links a:focus-visible,
.nav-toggle:focus-visible,
.sv-answer:focus-visible,
.sv-back:focus-visible,
.sv-form input:focus-visible,
.faq-item summary:focus-visible,
.faq-answer a:focus-visible,
.faq-more a:focus-visible,
.footer-nav a:focus-visible,
.footer-meta a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.btn-primary:focus-visible,
.btn-outline:focus-visible,
.sv-answer:focus-visible,
.sv-form input:focus-visible {
  border-radius: 999px;
}

.sv-answer:focus-visible {
  border-radius: 14px;
}

.pillar:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
  border-radius: 18px;
}

/* Karten reagieren dezent auf den Mauszeiger */
.freebie-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.freebie-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(30, 58, 95, 0.5);
}

.faq-item {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:hover {
  border-color: var(--gold-soft);
  box-shadow: 0 18px 38px -28px rgba(30, 58, 95, 0.4);
}

/* Sanftes Aufklappen der FAQ-Antworten */
.faq-answer p {
  animation: faqFade 0.35s ease both;
}

@keyframes faqFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Kontakt-Karte lebt leicht mit */
.contact-card {
  transition: box-shadow 0.25s ease;
}

.contact-card:hover {
  box-shadow: 0 26px 52px -30px rgba(30, 58, 95, 0.5);
}

/* Mobile: Buttons stapeln sich sauber in voller Breite */
@media (max-width: 520px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-outline,
  .sv-cta {
    width: 100%;
  }

  .sv-cta,
  .contact-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sv-form {
    flex-direction: column;
    align-items: stretch;
  }

  .sv-form .btn-primary {
    width: 100%;
  }

  .label-chip {
    font-size: 1rem;
    padding: 0.35rem 0.95rem;
  }

  .flip-question {
    font-size: 1.2rem;
  }
}

/* Sehr schmale Bildschirme: Markenname macht dem Menü-Knopf Platz */
@media (max-width: 480px) {
  .nav-inner {
    gap: 0.75rem;
  }

  .nav-brand-name {
    font-size: 1.02rem;
    letter-spacing: 0.1em;
  }

  .nav-logo {
    width: 40px;
    height: 40px;
  }
}

/* Bewegungs-Reduktion respektieren (Systemeinstellung) */
@media (prefers-reduced-motion: reduce) {
  .sv-anim > *,
  .faq-answer p {
    animation: none;
  }

  .btn-primary,
  .btn-outline,
  .coming-card,
  .freebie-card,
  .sv-answer,
  .pillar-inner {
    transition: none;
  }
}

/* ---------- rechtliche seiten (impressum/datenschutz) ---------- */

.legal-section {
  padding-top: 9rem;
}

.legal-nav {
  position: static;
  transform: none;
  flex-direction: row;
  background: none;
  border: none;
  box-shadow: none;
  width: auto;
  padding: 0;
}

.legal-card {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3rem);
}

.legal-card h3 {
  font-size: 1.25rem;
  color: var(--navy);
  margin: 1.6rem 0 0.5rem;
}

.legal-card h3:first-child {
  margin-top: 0;
}

.legal-card h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: var(--gold-soft);
  margin-top: 0.45rem;
}

.legal-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-card a {
  color: var(--gold);
  font-weight: 600;
}

/* ---------- tiefgang (Unterseite, v17) ---------- */

.tiefgang-hero-bild {
  max-width: 46rem;
  margin: 2.6rem auto 0;
}

.etappe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.etappe-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.etappe-bild {
  height: 10rem;
  background-size: cover;
  background-position: center 40%;
  border-bottom: 1px solid rgba(180, 138, 47, 0.35);
}

.etappe-body {
  padding: 1.5rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.etappe-body h3 {
  font-size: 1.35rem;
  line-height: 1.25;
}

.etappe-frage {
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(180, 138, 47, 0.3);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.tiefgang-mitnehmen {
  max-width: 46rem;
  margin: 2.6rem auto 0;
  text-align: center;
}

.tiefgang-mitnehmen .label-chips {
  margin: 1.4rem 0;
}

.tiefgang-einladung {
  max-width: 40rem;
  margin: 2.2rem auto;
  text-align: center;
  font-size: 1.12rem;
}

.change-box-ehrlich {
  margin-top: 2.4rem;
}

.tiefgang-preis {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--gold-deep, #b48a2f);
  margin: 0.4rem 0 0.2rem;
}

.tiefgang-preis span {
  display: block;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .etappe-grid {
    grid-template-columns: 1fr;
  }
}

.offer-cards-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 56rem;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .offer-cards-2 {
    grid-template-columns: 1fr;
  }
}

/* ---------- formulare: kompass-check + freebie (v18, DSGVO-Umbau) ---------- */

.sv-form-stacked {
  flex-direction: column;
  align-items: stretch;
  max-width: 24rem;
  margin-inline: auto;
}

.sv-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}

.sv-consent input {
  margin-top: 0.25rem;
  accent-color: var(--gold);
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  /* wichtig: hebt die 320px-Mindestbreite der allgemeinen .sv-form-input-Regel auf */
  min-width: 0;
  padding: 0;
}

.sv-consent span {
  flex: 1 1 0;
  min-width: 0;
}

.freebie-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.4rem;
}

.freebie-form input[type="text"],
.freebie-form input[type="email"] {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(180, 138, 47, 0.45);
  background: #fff;
  color: var(--ink);
}

.freebie-form input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.freebie-form input.is-invalid {
  border-color: #b3543f;
  outline: 2px solid rgba(179, 84, 63, 0.4);
}

.fb-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.7rem;
}

.fb-note a {
  color: var(--gold);
}

.fb-error {
  color: #b3543f;
  font-size: 0.88rem;
  margin: 0;
}

.fb-success {
  background: rgba(212, 175, 110, 0.14);
  border: 1px solid rgba(180, 138, 47, 0.35);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
}


/* ---------- ueber mich: kompakter ansatz-block (v19) ---------- */

.ansatz-kompakt {
  max-width: 46rem;
  text-align: center;
  margin-top: 3rem;
}

.ansatz-kompakt .vision-quote {
  margin-bottom: 1.6rem;
}

.ansatz-kompakt .label-chips {
  justify-content: center;
  margin: 1rem 0 1.4rem;
}

.ansatz-hinweis {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.ansatz-hinweis a {
  color: var(--gold);
  font-weight: 600;
}

/* ---------- v20: hero-schnellzugriff + 2er-fragen-raster ---------- */

.hero-links {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.hero-links a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hero-links a:hover {
  text-decoration: underline;
}

.fragen-2er {
  grid-template-columns: repeat(2, 1fr);
  max-width: 46rem;
}

@media (max-width: 700px) {
  .fragen-2er {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v23 — Runde Medaillon-Bilder + Wellen-Übergänge (sitweit)
   ============================================================ */

/* Rundes Bild mit doppeltem Goldring — der neue Standard für Fotos/Aquarelle */
.medaillon-bild {
  width: min(21rem, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(180, 138, 47, 0.75);
  box-shadow:
    0 0 0 8px rgba(251, 247, 238, 0.9),
    0 0 0 9.5px rgba(180, 138, 47, 0.35),
    0 24px 50px -24px rgba(22, 41, 74, 0.55);
  margin-inline: auto;
  display: block;
}

.medaillon-gross {
  width: min(24rem, 82vw);
}

.medaillon-wrap {
  display: flex;
  justify-content: center;
}

figure.medaillon-figur {
  margin: 0;
}

figure.medaillon-figur figcaption {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Wellen-Übergang zwischen Sektionen (hell -> getönt und zurück) */
.welle-uebergang {
  display: block;
  line-height: 0;
}

.welle-uebergang svg {
  width: 100%;
  height: clamp(30px, 5vw, 64px);
  display: block;
}

/* Etappen-Karten (tiefgang.html): rundes Medaillon ragt oben aus der Karte */
.etappe-grid {
  row-gap: 5.2rem;
  margin-top: 4.6rem !important;
}

.etappe-card {
  overflow: visible;
  padding: 0 1.6rem 1.7rem;
}

.etappe-medaillon {
  width: 8.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(180, 138, 47, 0.75);
  box-shadow:
    0 0 0 7px rgba(251, 247, 238, 1),
    0 0 0 8.5px rgba(180, 138, 47, 0.35),
    0 18px 36px -16px rgba(22, 41, 74, 0.5);
  display: block;
  margin: -3.6rem auto 1rem;
  position: relative;
}

.etappe-body {
  padding: 0;
}

/* Sanfte Wellen-Übergänge in/aus getönten Sektionen (Unterseiten) */
.section-tinted.kein-rand-oben { border-top: none; }
.section-tinted.kein-rand-unten { border-bottom: none; }

/* v23-Feinschliff nach Komplett-Audit */

/* Etappen-Untertitel war unter 12px (Lesbarkeit) */
.pillar-tag {
  font-size: 0.76rem;
}

/* Kicker in Kontakt-/Abschlusskarten wieder gold statt grau */
.contact-card .heading-kicker {
  color: var(--gold);
}

/* Rechtliche Seiten: Zurück-Knopf passt auch auf schmale Handys */
.legal-nav .nav-cta {
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
}

@media (max-width: 520px) {
  .legal-nav .nav-cta {
    font-size: 0.76rem;
    padding: 0.42rem 0.8rem;
  }
  .nav-inner:has(.legal-nav) .nav-brand-tagline {
    display: none;
  }
}

/* Preis in der Pilotgruppen-Karte in Gold (wurde von .contact-card p überstimmt) */
.contact-card .tiefgang-preis {
  color: var(--gold);
}

/* ============================================================
   ============================================================
   DIE TAUCHFAHRT — Design-System v25 (02.09.2026)
   Alles ab hier gilt sitweit und überschreibt gezielt Älteres.
   Lesereihenfolge: Grundlagen → Oberfläche → Wasserlinie → Ozean
   → Licht → Auftauchen → Unterseiten-Bänder → Tiefenmesser → Mobil
   ============================================================
   ============================================================ */

/* ---------- Grundlagen: Lesbarkeit & Bedienung ---------- */

/* Gold-Text auf hellem Grund: lesbare Töne statt Dekor-Gold */
.heading-kicker,
.story-note,
.offer-tagline,
.sv-intuition,
.survey-progress-label,
.sv-letter,
.sv-quote,
.faq-answer a,
.faq-more a,
.fb-note a,
.legal-card a,
.ansatz-hinweis a,
.flip-new .flip-label,
.step-nr,
.tf-nachwort a {
  color: var(--gold-text);
}

.script-accent,
.pillar-number,
.tiefgang-preis,
.contact-card .tiefgang-preis,
.dna-leitsatz-accent,
.hero-headline-accent {
  color: var(--gold-deep);
}

.sv-letter {
  border-color: var(--gold-deep);
}

.badge-active {
  background: var(--gold-text);
  border-color: var(--gold-text);
  color: var(--paper);
}

.nav-cta {
  color: var(--navy-deep) !important;
}

/* Sprunglink für Tastatur- und Screenreader-Nutzung */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus-visible {
  top: 1rem;
  outline: 2px solid var(--navy-deep);
  outline-offset: 3px;
}

/* Nur für Screenreader sichtbar (Formular-Labels) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tiefgang-einladung a,
.faq-answer-link {
  color: var(--gold-text);
  font-weight: 600;
}

/* Bedienelemente mindestens 44px hoch (Touch) */
.sv-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
}

@media (min-width: 1121px) {
  .nav-links a:not(.nav-cta) {
    padding-block: 0.5rem;
  }
}

.nav-toggle {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* Aktueller Menüpunkt */
.nav-links a[aria-current="page"]:not(.nav-cta)::after {
  transform: scaleX(1);
}

/* Bilder ohne Layout-Sprung: Platz ist über width/height im HTML reserviert */
img {
  height: auto;
}

/* Sektionen: Abstände als System */
.section {
  padding-block: clamp(3.8rem, 9vh, 6.8rem);
}

.section-head {
  max-width: 44rem;
}

.section-intro {
  font-size: 1.08rem;
  line-height: 1.7;
}

h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.005em;
}

h1 {
  font-weight: 500;
}

h3 {
  font-weight: 600;
}

/* Chip-Gruppen: nie mehr asymmetrisch. 4er = 2×2 auf schmalen Bildschirmen,
   6er = 3×2 bzw. 2×3; immer mittig. */
.label-chips {
  gap: 0.7rem;
}

.label-chip {
  font-size: 1.08rem;
  padding: 0.45rem 1.2rem;
  text-align: center;
  color: var(--ink);
}

@media (max-width: 640px) {
  .label-chips.chips-4,
  .label-chips.chips-6 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 24rem;
    margin-inline: auto;
  }

  .label-chips.chips-4 .label-chip,
  .label-chips.chips-6 .label-chip {
    width: 100%;
    padding-inline: 0.6rem;
    font-size: 1rem;
  }
}

/* Vier Chips immer als 2×2 (auch am Desktop), z. B. die Kompass-Fragen */
.label-chips.chips-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 34rem;
  margin-inline: auto;
}

.label-chips.chips-2x2 .label-chip {
  width: 100%;
}

/* Inline-Icons (SVG statt Emoji) */
.icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.icon-kreis {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(217, 188, 122, 0.55);
  color: var(--gold-soft);
  margin: 0 auto 0.7rem;
}

.icon-kreis .icon {
  width: 1.3rem;
  height: 1.3rem;
}

/* ---------- Die Oberfläche (heller Einstieg) ---------- */

.tf-oberflaeche {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8.5rem 1rem 3rem;
  position: relative;
  overflow: hidden;
}

/* Sonnenlicht von oben, das später unter Wasser weitergeht */
.tf-oberflaeche::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% -5%, rgba(217, 188, 122, 0.28), transparent 70%),
    radial-gradient(ellipse 50% 35% at 12% 90%, rgba(30, 58, 95, 0.09), transparent 70%),
    radial-gradient(ellipse 50% 35% at 88% 92%, rgba(30, 58, 95, 0.09), transparent 70%);
  pointer-events: none;
}

.tf-oberflaeche-inner {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
}

.tf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid rgba(180, 138, 47, 0.5);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  margin-bottom: 1.5rem;
  background: rgba(251, 247, 238, 0.75);
}

.tf-badge .icon {
  color: var(--gold-deep);
}

.tf-oberflaeche h1 {
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
  margin-bottom: 1.2rem;
  line-height: 1.12;
}

.tf-oberflaeche .label-chips {
  justify-content: center;
  margin: 1.2rem auto 1.5rem;
}

.tf-oberflaeche .hero-sub {
  margin-inline: auto;
  max-width: 36rem;
  font-size: 1.12rem;
}

.tf-oberflaeche .hero-actions {
  justify-content: center;
}

.tf-vertrauen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.8rem;
  margin-top: 1.7rem;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.tf-vertrauen .punkt {
  color: var(--gold-deep);
}

.tf-hinweis {
  margin-top: 2.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tf-hinweis .icon {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0.35rem auto 0;
  color: var(--gold-deep);
  animation: tf-sinken 2.2s ease-in-out infinite;
}

@keyframes tf-sinken {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* ---------- Die Wasserlinie (Wellen-Übergänge) ---------- */

/* Abtauchen: heller Grund, dunkle Wellen laufen ein */
.tf-welle {
  display: block;
  line-height: 0;
  background: var(--cream);
  margin-bottom: -1px;
}

.tf-welle svg {
  width: 100%;
  height: clamp(46px, 8vw, 110px);
  display: block;
}

/* Auftauchen aus einem dunklen Band: dunkler Grund, Creme-Welle */
.tf-welle-hoch {
  display: block;
  line-height: 0;
  background: transparent;
  margin-top: -1px;
}

.tf-welle-hoch svg {
  width: 100%;
  height: clamp(40px, 7vw, 96px);
  display: block;
}

.tf-welle-hoch path {
  fill: #0c1a30;
}

/* Bestätigungsseite: Einstiegsband mit Abschlusskarte */
.tf-band-schluss {
  padding-bottom: 4.5rem;
}

.tf-band-schluss .tf-schluss-karte {
  margin-top: 0.4rem;
}

/* ---------- Der Ozean (dunkle Tiefen) ---------- */

.ozean {
  background: linear-gradient(
    180deg,
    var(--ozean-0) 0%,
    var(--ozean-1) 28%,
    var(--ozean-2) 62%,
    var(--ozean-3) 92%,
    #0c1a30 100%
  );
  color: var(--ozean-text);
  position: relative;
}

/* Sonnenlicht, das durch die Wasseroberfläche fällt */
.ozean::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(70vh, 640px);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(217, 188, 122, 0.16), transparent 70%),
    conic-gradient(
      from 180deg at 50% -30%,
      transparent 40%,
      rgba(246, 239, 226, 0.05) 44%,
      transparent 48%,
      rgba(246, 239, 226, 0.04) 52%,
      transparent 56%,
      rgba(246, 239, 226, 0.05) 60%,
      transparent 64%
    );
  pointer-events: none;
}

.ozean h1,
.ozean h2,
.ozean h3 {
  color: var(--cream);
}

.ozean .heading-kicker,
.ozean .script-accent,
.ozean .gold-divider {
  color: var(--gold-soft);
}

.ozean .section-intro,
.ozean .tf-text,
.ozean .tf-text p {
  color: var(--ozean-text);
}

.ozean .section-intro strong,
.ozean .tf-text strong {
  color: var(--cream);
}

.ozean .tf-text em {
  color: var(--gold-soft);
}

/* Helle Karten im Ozean bleiben innen dunkel beschriftet (Lesbarkeit!) */
.ozean .card-soft {
  color: var(--ink);
  background: var(--paper);
}

.ozean .card-soft h3,
.ozean .card-soft h2 {
  color: var(--navy);
}

.ozean .card-soft .heading-kicker {
  color: var(--gold-text);
}

.ozean .card-soft .script-accent {
  color: var(--gold-deep);
}

.ozean .card-soft p {
  color: var(--ink-soft);
}

.ozean .survey-card,
.ozean .freebie-card,
.ozean .contact-card {
  box-shadow:
    0 0 0 1px rgba(217, 188, 122, 0.3),
    0 0 70px rgba(217, 188, 122, 0.1),
    0 40px 90px -40px rgba(0, 0, 0, 0.85);
}

.tiefe {
  padding: clamp(4rem, 9vh, 6.5rem) 0;
  position: relative;
}

/* Tiefenangabe wie auf einem Tauchcomputer */
.tiefen-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(217, 188, 122, 0.9);
  margin-bottom: 1.8rem;
  font-variant-numeric: tabular-nums;
}

.tiefen-tag::before,
.tiefen-tag::after {
  content: "";
  height: 1px;
  width: 3.6rem;
  background: linear-gradient(to right, transparent, rgba(217, 188, 122, 0.6));
}

.tiefen-tag::after {
  background: linear-gradient(to left, transparent, rgba(217, 188, 122, 0.6));
}

.tiefe .section-head {
  text-align: center;
}

/* Alles in der Tiefe ist mittig und gleich breit: Bild, Text, Karten */
.tf-mitte {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.tf-mitte p + p {
  margin-top: 1rem;
}

.tf-bild {
  max-width: 38rem;
  margin: 0 auto 2.2rem;
}

.tf-bild img {
  width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(217, 188, 122, 0.5);
  box-shadow:
    0 0 0 8px rgba(246, 239, 226, 0.05),
    0 30px 70px -30px rgba(0, 0, 0, 0.85);
}

.tf-bild figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ozean-text-soft);
}

.medaillon-wrap {
  margin-bottom: 2rem;
}

/* Runde Medaillons in der Tiefe: Goldring + Lichtschein */
.medaillon-dunkel {
  border: 2px solid rgba(217, 188, 122, 0.85);
  box-shadow:
    0 0 0 8px rgba(10, 21, 41, 0.55),
    0 0 0 9.5px rgba(217, 188, 122, 0.35),
    0 0 40px rgba(217, 188, 122, 0.25),
    0 0 110px rgba(217, 188, 122, 0.12),
    0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

/* Frage-Umkehr in der Tiefe */
.ozean .question-flip {
  margin-top: 2.4rem;
}

.ozean .flip-old {
  background: rgba(246, 239, 226, 0.05);
  border: 1px solid rgba(246, 239, 226, 0.14);
}

.ozean .flip-new {
  background: rgba(246, 239, 226, 0.09);
  border: 1px solid rgba(217, 188, 122, 0.55);
  box-shadow: 0 0 50px rgba(217, 188, 122, 0.08);
}

.ozean .flip-label {
  color: var(--ozean-text-soft);
}

.ozean .flip-new .flip-label {
  color: var(--gold-soft);
}

.ozean .flip-question {
  color: var(--ozean-text);
}

.ozean .flip-new .flip-question {
  color: var(--cream);
}

.ozean .flip-arrow {
  color: var(--gold-soft);
}

/* Glas-Karten (dunkel, leicht durchscheinend) */
.tf-glas {
  background: linear-gradient(160deg, rgba(246, 239, 226, 0.09), rgba(246, 239, 226, 0.035));
  border: 1px solid rgba(217, 188, 122, 0.32);
  border-radius: 18px;
  padding: 1.7rem 1.6rem;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tf-glas:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 188, 122, 0.6);
  box-shadow: 0 0 60px rgba(217, 188, 122, 0.1);
}

.tf-glas h3 {
  color: var(--gold-soft);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.tf-glas p {
  color: var(--ozean-text);
  font-size: 0.95rem;
  line-height: 1.65;
}

.tf-glas .badge {
  color: var(--gold-soft);
  background: rgba(217, 188, 122, 0.1);
  border-color: rgba(217, 188, 122, 0.4);
  margin-bottom: 0.8rem;
}

.tf-drei {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 2.4rem;
}

.tf-zwei {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
  max-width: 52rem;
  margin: 2.4rem auto 0;
}

.tf-merksatz {
  max-width: 38rem;
  margin: 2.8rem auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--cream);
}

.tf-merksatz .gold {
  color: var(--gold-soft);
}

/* Fakten-Zeile (12 Wochen · 6 Etappen · Preis) */
.tf-fakten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.9rem;
  margin-top: 1.4rem;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(217, 188, 122, 0.95);
}

.tf-fakten .punkt {
  color: rgba(246, 239, 226, 0.5);
}

/* Leuchtende DNA am tiefsten Punkt */
.tf-leuchten {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 2.6rem auto 0;
}

.tf-leuchten::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(34rem, 96vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%, rgba(217, 188, 122, 0.24), transparent 58%);
  pointer-events: none;
  animation: tf-pulsieren 6s ease-in-out infinite;
}

@keyframes tf-pulsieren {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

.tf-leuchten img {
  position: relative;
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  width: min(19rem, 72vw);
  border: 2px solid rgba(217, 188, 122, 0.85);
  box-shadow:
    0 0 0 8px rgba(10, 21, 41, 0.55),
    0 0 0 9.5px rgba(217, 188, 122, 0.35),
    0 0 45px rgba(217, 188, 122, 0.4),
    0 0 130px rgba(217, 188, 122, 0.2),
    0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

/* Heller Umriss-Knopf für dunkle Flächen */
.btn-outline-dunkel {
  color: var(--cream);
  border-color: rgba(217, 188, 122, 0.7);
}

.btn-outline-dunkel:hover {
  background: rgba(217, 188, 122, 0.15);
  border-color: var(--gold-soft);
  color: var(--cream);
}

/* Goldener Hauptknopf im Ozean (hebt sich vom Navy ab) */
.ozean .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 14px 34px -14px rgba(217, 188, 122, 0.55);
}

.ozean .btn-primary:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
}

/* Helle Karten im Ozean behalten den Navy-Knopf */
.ozean .card-soft .btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
  box-shadow: 0 14px 30px -14px rgba(22, 41, 74, 0.55);
}

.ozean .card-soft .btn-primary:hover {
  background: var(--navy-deep);
}

/* ---------- Zurück ins Licht ---------- */

.tf-licht {
  height: clamp(220px, 34vh, 340px);
  background: linear-gradient(
    180deg,
    #0c1a30 0%,
    var(--ozean-0) 26%,
    #33517e 46%,
    #7d94b8 66%,
    #c9d2df 84%,
    var(--cream) 100%
  );
  position: relative;
  overflow: hidden;
}

.tf-licht::before {
  content: "";
  position: absolute;
  inset: -45% -25%;
  background: conic-gradient(
    from 180deg at 50% -12%,
    transparent 38%,
    rgba(246, 239, 226, 0.16) 43%,
    transparent 48%,
    rgba(246, 239, 226, 0.12) 53%,
    transparent 58%,
    rgba(246, 239, 226, 0.16) 62%,
    transparent 66%
  );
  pointer-events: none;
}

/* ---------- Auftauchen (heller Abschluss) ---------- */

.tf-auftauchen {
  background: var(--cream);
}

.tf-begleiterin {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.tf-begleiterin .medaillon-bild {
  width: min(15rem, 62vw);
  object-position: center 30%;
  margin-bottom: 1.6rem;
}

.tf-begleiterin-name {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  color: var(--navy);
  line-height: 1.2;
}

.tf-begleiterin-rolle {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0.35rem 0 1.4rem;
}

.tf-begleiterin p.story {
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.75;
}

.tf-begleiterin p.story + p.story {
  margin-top: 1rem;
}

.tf-begleiterin .story-note {
  margin-top: 1.4rem;
  font-size: 1.2rem;
}

.tf-siegel {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.6rem;
  padding: 0.6rem 1.2rem 0.6rem 0.6rem;
  border: 1px solid rgba(180, 138, 47, 0.3);
  border-radius: 999px;
  background: rgba(251, 247, 238, 0.8);
  text-align: left;
}

.tf-siegel img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.tf-siegel span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.35;
}

.tf-ansatz {
  max-width: 44rem;
  margin: 2.6rem auto 0;
  text-align: center;
}

.tf-ansatz .vision-quote {
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}

.tf-ansatz .vision-lead {
  margin-bottom: 0.8rem;
}

.tf-ansatz .label-chips {
  justify-content: center;
  margin: 0 0 1.2rem;
}

.tf-ende-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  align-items: stretch;
  max-width: 60rem;
  margin: 0 auto;
}

.tf-ende-grid .contact-card {
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.4rem 2.2rem;
}

.tf-ende-grid .contact-card h2 {
  font-size: 1.9rem;
}

.tf-ende-grid .freebie-card {
  align-items: stretch;
  text-align: left;
}

.tf-ende-grid .freebie-card .badge {
  align-self: flex-start;
}

.tf-ende-grid .freebie-card h3 {
  font-size: 1.7rem;
}

.tf-nachwort {
  text-align: center;
  margin: 2.2rem auto 0;
  max-width: 40rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.tf-nachwort a {
  font-weight: 600;
}

/* Marken-Statement als Abschlussband vor dem Footer */
.brand-statement {
  background:
    radial-gradient(ellipse 70% 90% at 20% 10%, rgba(217, 188, 122, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 90%, rgba(217, 188, 122, 0.1), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-bottom: 1px solid rgba(217, 188, 122, 0.2);
}

/* ---------- Unterseiten: dunkles Einstiegsband + dunkler Abschluss ---------- */

.tf-band {
  padding: 8.5rem 0 3.6rem;
}

.tf-band .section-head {
  margin-bottom: 2rem;
}

.tf-band h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.12;
}

.tf-band .medaillon-wrap {
  margin: 0.4rem 0 1.6rem;
}

.tf-band .tf-bild {
  margin-bottom: 0.6rem;
}

.tf-schluss {
  padding: 4.5rem 0 5rem;
}

.tf-schluss::before {
  display: none;
}

.tf-schluss-karte {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 3.2rem);
}

.tf-schluss-karte h2 {
  margin-bottom: 0.8rem;
}

.tf-schluss-karte p {
  max-width: 34rem;
  margin: 0 auto 1.6rem;
  font-size: 1rem;
}

.tf-schluss-karte p.tiefgang-preis {
  color: var(--gold-soft);
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 0.2rem auto 0.9rem;
}

.tf-schluss-karte .tiefgang-preis span {
  color: var(--ozean-text-soft);
}

.tf-schluss-karte .heading-kicker {
  color: var(--gold-soft);
}

.tf-schluss-karte .contact-actions {
  margin-top: 0.4rem;
}

/* Unterseiten-Inhalt: helle Sektionen mit Wellen bleiben, aber ohne Ränder */
.section-tinted {
  background: rgba(239, 229, 208, 0.45);
}

/* Etappen-Karten und Fragen-Karten: gleiche Höhe, mittig */
.etappe-card {
  text-align: center;
  align-items: center;
}

.etappe-body {
  align-items: center;
  width: 100%;
}

.etappe-body h3 {
  font-size: 1.3rem;
}

.etappe-frage {
  width: 100%;
}

.dna-frage {
  font-size: 1.1rem;
}

/* Zwei helle Info-Kästen nebeneinander (DNA: Klar gesagt + Was passiert) */
.tf-zwei-hell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  max-width: 60rem;
  margin: 0 auto;
}

.tf-zwei-hell .change-box {
  max-width: none;
  margin: 0;
  height: 100%;
}

/* ---------- Tiefenmesser (nur große Bildschirme) ---------- */

.tiefenmesser {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.tiefenmesser.sichtbar {
  opacity: 1;
}

.tm-wert {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-soft);
  background: rgba(11, 22, 41, 0.6);
  border: 1px solid rgba(217, 188, 122, 0.4);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  min-width: 3.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tm-track {
  width: 3px;
  height: 150px;
  border-radius: 3px;
  background: rgba(246, 239, 226, 0.22);
  overflow: hidden;
  display: block;
}

.tm-fill {
  display: block;
  width: 100%;
  height: 0%;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  transition: height 0.15s linear;
}

/* ---------- 404 ---------- */

.tf-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 1rem 4rem;
  text-align: center;
}

.tf-404 .tf-glas {
  max-width: 34rem;
  padding: 2.6rem 2rem;
}

.tf-404 h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-bottom: 0.8rem;
}

.tf-404 p {
  margin-bottom: 1.6rem;
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  .tf-hinweis .icon,
  .tf-leuchten::before {
    animation: none;
  }

  .tf-glas,
  .tm-fill,
  .tiefenmesser {
    transition: none;
  }
}

/* ---------- Mobil & Tablet ---------- */

@media (max-width: 1100px) {
  .tiefenmesser {
    display: none;
  }
}

@media (max-width: 900px) {
  .tf-drei,
  .tf-ende-grid,
  .tf-zwei-hell {
    grid-template-columns: 1fr;
  }

  .tf-ende-grid {
    max-width: 36rem;
  }
}

@media (max-width: 720px) {
  .tf-zwei {
    grid-template-columns: 1fr;
    max-width: 30rem;
  }

  .tf-oberflaeche {
    min-height: 0;
    padding-top: 7.5rem;
  }
}

@media (max-width: 640px) {
  .tf-vertrauen,
  .tf-fakten {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
  }

  .footer-meta span[aria-hidden]:last-of-type {
    display: none;
  }

  .footer-meta > span:last-child {
    width: 100%;
  }

  .tf-vertrauen .punkt,
  .tf-fakten .punkt {
    display: none;
  }

  .tf-merksatz {
    font-size: 1.22rem;
  }

  .tf-band {
    padding-top: 7.5rem;
  }

  .tiefen-tag {
    letter-spacing: 0.2em;
    gap: 0.6rem;
  }

  .tiefen-tag::before,
  .tiefen-tag::after {
    width: 2rem;
    flex-shrink: 0;
  }
}

/* <picture>-Wrapper verhalten sich wie das Bild selbst (WebP mit JPEG-Fallback) */
picture {
  display: contents;
}

/* ============================================================
   v26 — Feinschliff nach Stevens Rückmeldung (02.09.2026, spät)
   1) Kompass-Check als dunkle Glaskarte (passt in die Tiefe)
   2) Luftblasen zurück (kräftiger, an den Rändern)
   3) Tiefenmesser größer, mit Skala und leuchtendem Punkt
   4) Weniger Hell: Auftauchen kurz, dann Abend im Hafen (dunkel)
   5) Weiche Verläufe statt harter Wellen auf den Unterseiten
   6) Lebendige Oberfläche: Sonnenglitzern + wandernde Lichtstrahlen
   ============================================================ */

/* ---------- 1) Kompass-Check in der Tiefe: dunkle Glaskarte ---------- */
.ozean .survey-card {
  background: linear-gradient(160deg, rgba(246, 239, 226, 0.09), rgba(246, 239, 226, 0.035));
  border: 1px solid rgba(217, 188, 122, 0.42);
  color: var(--ozean-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(217, 188, 122, 0.12),
    0 0 80px rgba(217, 188, 122, 0.1),
    0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

.ozean .survey-card h3,
.ozean .survey-card .sv-hero-text h3 {
  color: var(--cream);
}

.ozean .survey-card p,
.ozean .survey-card .sv-meta,
.ozean .survey-card .sv-szenario {
  color: var(--ozean-text);
}

.ozean .survey-card .sv-meta {
  color: var(--ozean-text-soft);
}

.ozean .survey-card .sv-meta a {
  color: var(--gold-soft);
}

.ozean .survey-card .sv-intuition,
.ozean .survey-card .heading-kicker,
.ozean .survey-card .sv-progress-label {
  color: var(--gold-soft);
}

.ozean .survey-card strong {
  color: var(--cream);
}

.ozean .q-illu {
  color: var(--gold-soft);
  background:
    radial-gradient(circle at 35% 30%, rgba(246, 239, 226, 0.16), transparent 60%),
    radial-gradient(circle at 70% 75%, rgba(217, 188, 122, 0.2), transparent 60%),
    rgba(10, 21, 41, 0.5);
  box-shadow:
    0 0 0 1px rgba(217, 188, 122, 0.55),
    0 0 0 6px rgba(217, 188, 122, 0.1),
    0 0 30px rgba(217, 188, 122, 0.25);
}

.ozean .sv-progress-track {
  background: rgba(246, 239, 226, 0.14);
}

.ozean .sv-hero {
  border-top: 1px solid rgba(217, 188, 122, 0.3);
  border-bottom: 1px solid rgba(217, 188, 122, 0.3);
}

.ozean .sv-hero-text {
  background: linear-gradient(
    180deg,
    rgba(16, 32, 61, 0) 0%,
    rgba(16, 32, 61, 0.55) 40%,
    rgba(16, 32, 61, 0.94) 78%
  );
}

.ozean .sv-answer {
  background: rgba(246, 239, 226, 0.06);
  border: 1px solid rgba(217, 188, 122, 0.35);
  color: var(--cream);
}

.ozean .sv-answer:hover {
  background: rgba(246, 239, 226, 0.12);
  border-color: var(--gold-soft);
  box-shadow: 0 0 30px rgba(217, 188, 122, 0.12);
}

.ozean .sv-answer.is-chosen {
  background: rgba(217, 188, 122, 0.18);
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold-soft);
}

.ozean .sv-letter {
  border-color: var(--gold-soft);
  color: var(--gold-soft);
}

.ozean .sv-answer.is-chosen .sv-letter {
  background: var(--gold-soft);
  color: var(--navy-deep);
}

.ozean .sv-back {
  color: var(--ozean-text-soft);
}

.ozean .sv-back:hover {
  color: var(--cream);
}

.ozean .sv-form input {
  background: rgba(246, 239, 226, 0.08);
  border: 1px solid rgba(217, 188, 122, 0.45);
  color: var(--cream);
}

.ozean .sv-form input::placeholder {
  color: rgba(246, 239, 226, 0.55);
}

.ozean .sv-form input:focus {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(217, 188, 122, 0.2);
}

.ozean .sv-form input.is-invalid {
  border-color: #e39a8b;
  box-shadow: 0 0 0 3px rgba(227, 154, 139, 0.25);
}

.ozean .sv-consent {
  color: var(--ozean-text);
}

.ozean .survey-card .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 14px 34px -14px rgba(217, 188, 122, 0.55);
}

.ozean .survey-card .btn-primary:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
}

.ozean .survey-card .btn-outline {
  color: var(--cream);
  border-color: rgba(217, 188, 122, 0.7);
}

.ozean .survey-card .btn-outline:hover {
  background: rgba(217, 188, 122, 0.15);
  color: var(--cream);
}

/* ---------- 2) Luftblasen (an den Rändern, deutlich sichtbar) ---------- */
.blasen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ozean > .container,
.ozean > .tiefe,
.ozean > .container > * {
  position: relative;
  z-index: 1;
}

.blase {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  border: 1px solid rgba(246, 239, 226, 0.55);
  background:
    radial-gradient(circle at 32% 28%, rgba(246, 239, 226, 0.55), rgba(246, 239, 226, 0.08) 45%, transparent 70%);
  box-shadow: inset -2px -2px 4px rgba(246, 239, 226, 0.15), 0 0 12px rgba(217, 188, 122, 0.12);
  opacity: 0;
  animation: blase-steigt linear infinite;
}


@keyframes blase-steigt {
  0%   { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0; }
  6%   { opacity: 0.85; }
  40%  { transform: translate3d(10px, -40vh, 0) scale(1); }
  70%  { transform: translate3d(-8px, -72vh, 0) scale(1.05); }
  94%  { opacity: 0.6; }
  100% { transform: translate3d(6px, -108vh, 0) scale(1.1); opacity: 0; }
}



/* ---------- 3) Tiefenmesser: größer, mit Skala ---------- */
.tiefenmesser {
  right: 1.6rem;
  gap: 0.8rem;
}

.tm-wert {
  font-size: 0.92rem;
  padding: 0.4rem 0.95rem;
  min-width: 4.8rem;
  background: rgba(11, 22, 41, 0.72);
  border: 1px solid rgba(217, 188, 122, 0.6);
  box-shadow: 0 0 24px rgba(217, 188, 122, 0.18);
}

.tm-track {
  position: relative;
  width: 10px;
  height: 260px;
  border-radius: 6px;
  border: 1px solid rgba(217, 188, 122, 0.45);
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(260px / 6 - 1px),
      rgba(246, 239, 226, 0.35) calc(260px / 6 - 1px),
      rgba(246, 239, 226, 0.35) calc(260px / 6)
    ),
    rgba(246, 239, 226, 0.12);
  overflow: visible;
}

.tm-fill {
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(217, 188, 122, 0.55), var(--gold-soft));
  box-shadow: 0 0 14px rgba(217, 188, 122, 0.35);
  position: relative;
}

.tm-fill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #fff4d6, var(--gold-soft) 55%, var(--gold));
  box-shadow: 0 0 0 3px rgba(11, 22, 41, 0.7), 0 0 18px rgba(217, 188, 122, 0.7);
}

.tm-skala {
  position: absolute;
  right: 18px;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(246, 239, 226, 0.6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tm-skala span {
  line-height: 1;
  transform: translateY(-50%);
}

.tm-skala span:last-child {
  transform: translateY(50%);
}

/* ---------- 4) Weniger Hell: kurzes Auftauchen, dann Abend im Hafen ---------- */
.tf-licht {
  height: clamp(200px, 30vh, 300px);
}

/* Über mich: helle Passage mit weichem Himmel-Verlauf statt reinem Creme */
.tf-auftauchen {
  background: linear-gradient(180deg, rgba(201, 210, 223, 0.35) 0%, rgba(246, 239, 226, 0) 40%);
}

/* Übergang zurück in die Tiefe: weicher Verlauf (Abend) */
.tf-abtauchen {
  height: clamp(160px, 26vh, 260px);
  background: linear-gradient(
    180deg,
    var(--cream) 0%,
    #dfe1e4 22%,
    #9fb0c8 48%,
    #4f6890 72%,
    var(--ozean-0) 100%
  );
  position: relative;
  overflow: hidden;
}

.tf-abtauchen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 110%, rgba(217, 188, 122, 0.18), transparent 70%);
  pointer-events: none;
}

/* Der Hafen: dunkles Abschlussband mit Gratis-Kompass + Kontakt */
.tf-hafen {
  padding: 4rem 0 5rem;
  background: linear-gradient(180deg, var(--ozean-0) 0%, var(--ozean-1) 45%, var(--ozean-2) 100%);
}

.tf-hafen::before {
  display: none;
}

.tf-hafen .tf-ende-grid .tf-glas {
  text-align: left;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.tf-hafen .tf-glas.kontakt-glas {
  text-align: center;
  justify-content: center;
}

.tf-hafen .tf-glas h2 {
  font-size: 1.9rem;
  margin-bottom: 0.2rem;
}

.tf-hafen .tf-glas h3 {
  color: var(--cream);
  font-size: 1.7rem;
  margin: 0;
}

.tf-hafen .tf-glas .badge {
  align-self: flex-start;
  margin-bottom: 0;
}

.tf-hafen .tf-glas .badge-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}

.tf-hafen .tf-glas .heading-kicker {
  color: var(--gold-soft);
  margin-bottom: 0.4rem;
}

.tf-hafen .freebie-form input[type="text"],
.tf-hafen .freebie-form input[type="email"] {
  background: rgba(246, 239, 226, 0.08);
  border: 1px solid rgba(217, 188, 122, 0.45);
  color: var(--cream);
}

.tf-hafen .freebie-form input::placeholder {
  color: rgba(246, 239, 226, 0.55);
}

.tf-hafen .freebie-form input:focus-visible {
  outline-color: var(--gold-soft);
}

.tf-hafen .sv-consent {
  color: var(--ozean-text);
}

.tf-hafen .sv-consent strong {
  color: var(--cream);
}

.tf-hafen .fb-note {
  color: var(--ozean-text-soft);
}

.tf-hafen .fb-note a,
.tf-hafen .tf-nachwort a {
  color: var(--gold-soft);
}

.tf-hafen .fb-error {
  color: #f0b3a6;
}

.tf-hafen .fb-success {
  background: rgba(217, 188, 122, 0.14);
  border-color: rgba(217, 188, 122, 0.45);
  color: var(--cream);
}

.tf-hafen .story-note {
  color: var(--gold-soft);
  border-top-color: rgba(217, 188, 122, 0.3);
}

.tf-hafen .btn-outline {
  color: var(--cream);
  border-color: rgba(217, 188, 122, 0.7);
}

.tf-hafen .btn-outline:hover {
  background: rgba(217, 188, 122, 0.15);
  color: var(--cream);
}

.tf-hafen .tf-nachwort {
  color: var(--ozean-text-soft);
}

.tf-hafen .medaillon-wrap {
  margin-bottom: 1.6rem;
}

.tf-hafen .medaillon-bild {
  width: min(13rem, 56vw);
}

/* Marken-Statement schließt nahtlos an den Hafen an */
.tf-hafen + .brand-statement {
  border-top: 1px solid rgba(217, 188, 122, 0.18);
}

/* ---------- 5) Unterseiten: weiche Verläufe statt harter Wellen ---------- */
.tf-licht-kurz {
  height: clamp(170px, 26vh, 260px);
}

.tf-band {
  padding-bottom: 2.4rem;
}

/* Getönte Sektionen ohne Kanten: sanft ein- und ausblenden */
.section-tinted.weich {
  background: linear-gradient(
    180deg,
    rgba(239, 229, 208, 0) 0%,
    rgba(239, 229, 208, 0.55) 18%,
    rgba(239, 229, 208, 0.55) 82%,
    rgba(239, 229, 208, 0) 100%
  );
  border: none;
}

/* ---------- 6) Lebendige Oberfläche ---------- */
.tf-oberflaeche::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 18% at 30% 70%, rgba(217, 188, 122, 0.16), transparent 70%),
    radial-gradient(ellipse 26% 16% at 72% 62%, rgba(217, 188, 122, 0.12), transparent 70%);
  pointer-events: none;
  animation: tf-glitzern 14s ease-in-out infinite alternate;
}

@keyframes tf-glitzern {
  0%   { transform: translate3d(-2%, 0, 0); opacity: 0.6; }
  100% { transform: translate3d(2%, -1%, 0); opacity: 1; }
}

.ozean::after {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  right: -10%;
  height: min(75vh, 700px);
  background: conic-gradient(
    from 180deg at 50% -35%,
    transparent 41%,
    rgba(246, 239, 226, 0.06) 44%,
    transparent 47%,
    rgba(246, 239, 226, 0.05) 51%,
    transparent 55%,
    rgba(246, 239, 226, 0.06) 59%,
    transparent 63%
  );
  pointer-events: none;
  animation: tf-strahlen 22s ease-in-out infinite alternate;
  z-index: 0;
}

/* Lichtstrahlen und Blasen dürfen nicht über den Rand hinaus (kein horizontaler Überlauf) */
.ozean {
  overflow: hidden;
}

@keyframes tf-strahlen {
  0%   { transform: translate3d(-3%, 0, 0); opacity: 0.7; }
  100% { transform: translate3d(3%, 0, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .blase,
  .tf-oberflaeche::after,
  .ozean::after {
    animation: none;
  }
  .blase {
    display: none;
  }
}

@media (max-width: 900px) {
  .tf-hafen .tf-ende-grid {
    max-width: 36rem;
  }
}

/* Figur mit rundem Medaillon + Bildunterschrift (DNA-Einstieg) */
.tf-figur {
  margin: 0.4rem 0 0.6rem;
  text-align: center;
}

.tf-figur figcaption {
  margin-top: 1.1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ozean-text-soft);
}

/* ============================================================
   v27 — Luftblasen, zweite Fassung (Stevens Wunsch: besser + mehr)
   Aufsteigen über den Wrapper, Schlingern/Atmen über die sichtbare
   Blase (::before). 18 Blasen pro Ozean, Ränder kräftig, Mitte zart.
   ============================================================ */
.blase {
  border: none;
  background: none;
  box-shadow: none;
  opacity: 0;
  animation-name: blase-aufstieg;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.blase::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(246, 239, 226, 0.85);
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0 14%, rgba(255, 255, 255, 0.35) 30%, transparent 48%),
    radial-gradient(circle at 68% 76%, rgba(217, 188, 122, 0.55), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(246, 239, 226, 0.06), rgba(246, 239, 226, 0.16) 90%);
  box-shadow:
    inset -2px -3px 6px rgba(255, 255, 255, 0.35),
    inset 2px 2px 3px rgba(255, 255, 255, 0.45),
    0 0 10px rgba(246, 239, 226, 0.35),
    0 0 22px rgba(217, 188, 122, 0.3);
  animation: blase-schlingern var(--sway, 3.6s) ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
}

@keyframes blase-aufstieg {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  5%   { opacity: var(--op, 0.8); }
  50%  { transform: translate3d(14px, -52vh, 0); }
  92%  { opacity: calc(var(--op, 0.8) * 0.7); }
  100% { transform: translate3d(-10px, -112vh, 0); opacity: 0; }
}

@keyframes blase-schlingern {
  0%   { transform: translate3d(-3px, 0, 0) scale(1, 1); }
  50%  { transform: translate3d(2px, 1px, 0) scale(0.92, 1.08); }
  100% { transform: translate3d(4px, 0, 0) scale(1.06, 0.95); }
}

.blase:nth-child(1) { left: 8.5%; bottom: 16.7%; width: 20px; height: 20px; animation-duration: 29.4s; animation-delay: -20.3s; --sway: 3.8s; --sway-delay: 2.6s; --op: 0.75; }
.blase:nth-child(2) { left: 95.5%; bottom: 8.0%; width: 18px; height: 18px; animation-duration: 25.3s; animation-delay: -20.6s; --sway: 2.8s; --sway-delay: 0.9s; --op: 0.75; }
.blase:nth-child(3) { left: 68.6%; bottom: 65.0%; width: 30px; height: 30px; animation-duration: 25.4s; animation-delay: -15.5s; --sway: 3.6s; --sway-delay: 1.4s; --op: 0.3; filter: blur(0.6px); }
.blase:nth-child(4) { left: 11.6%; bottom: 21.3%; width: 22px; height: 22px; animation-duration: 14.3s; animation-delay: -13.7s; --sway: 2.8s; --sway-delay: 0.6s; --op: 0.75; }
.blase:nth-child(5) { left: 83.5%; bottom: 25.9%; width: 18px; height: 18px; animation-duration: 19.9s; animation-delay: -15.4s; --sway: 3.1s; --sway-delay: 0.7s; --op: 0.75; }
.blase:nth-child(6) { left: 20.3%; bottom: 73.9%; width: 10px; height: 10px; animation-duration: 22.2s; animation-delay: -7.2s; --sway: 5.2s; --sway-delay: 3.0s; --op: 0.3; }
.blase:nth-child(7) { left: 12.5%; bottom: 9.5%; width: 14px; height: 14px; animation-duration: 27.6s; animation-delay: -13.3s; --sway: 2.7s; --sway-delay: 1.7s; --op: 0.75; }
.blase:nth-child(8) { left: 84.7%; bottom: 18.5%; width: 13px; height: 13px; animation-duration: 21.0s; animation-delay: -24.9s; --sway: 4.8s; --sway-delay: 0.0s; --op: 0.9; }
.blase:nth-child(9) { left: 74.6%; bottom: 17.5%; width: 18px; height: 18px; animation-duration: 20.8s; animation-delay: -18.4s; --sway: 3.7s; --sway-delay: 1.7s; --op: 0.3; }
.blase:nth-child(10) { left: 12.0%; bottom: 10.4%; width: 14px; height: 14px; animation-duration: 15.6s; animation-delay: -8.6s; --sway: 5.1s; --sway-delay: 2.3s; --op: 0.75; }
.blase:nth-child(11) { left: 86.8%; bottom: 16.6%; width: 10px; height: 10px; animation-duration: 14.2s; animation-delay: -12.1s; --sway: 3.9s; --sway-delay: 2.0s; --op: 0.9; }
.blase:nth-child(12) { left: 50.5%; bottom: 87.1%; width: 30px; height: 30px; animation-duration: 27.9s; animation-delay: -10.9s; --sway: 3.6s; --sway-delay: 1.2s; --op: 0.3; filter: blur(0.6px); }
.blase:nth-child(13) { left: 1.5%; bottom: 75.2%; width: 22px; height: 22px; animation-duration: 19.5s; animation-delay: -23.0s; --sway: 3.1s; --sway-delay: 1.2s; --op: 0.75; }
.blase:nth-child(14) { left: 92.9%; bottom: 53.7%; width: 10px; height: 10px; animation-duration: 14.8s; animation-delay: -3.8s; --sway: 3.7s; --sway-delay: 0.0s; --op: 0.9; }
.blase:nth-child(15) { left: 69.8%; bottom: 52.9%; width: 16px; height: 16px; animation-duration: 15.3s; animation-delay: -2.3s; --sway: 4.1s; --sway-delay: 0.7s; --op: 0.3; }
.blase:nth-child(16) { left: 7.3%; bottom: 34.0%; width: 18px; height: 18px; animation-duration: 16.3s; animation-delay: -15.3s; --sway: 4.8s; --sway-delay: 0.4s; --op: 0.75; }
.blase:nth-child(17) { left: 92.7%; bottom: 65.1%; width: 13px; height: 13px; animation-duration: 30.4s; animation-delay: -21.3s; --sway: 3.2s; --sway-delay: 0.6s; --op: 0.9; }
.blase:nth-child(18) { left: 76.4%; bottom: 4.2%; width: 12px; height: 12px; animation-duration: 26.4s; animation-delay: -10.1s; --sway: 3.9s; --sway-delay: 0.2s; --op: 0.3; }

@media (max-width: 720px) {
  .blase:nth-child(3n) { display: none; }          /* zarte Mitte am Handy aus */
  .blase:nth-child(n+13) { display: none; }        /* weniger Blasen am Handy */
}

@media (prefers-reduced-motion: reduce) {
  .blase, .blase::before { animation: none; }
  .blase { display: none; }
}

/* Zweiter Blasen-Satz auf der Startseite: gespiegelt und zeitversetzt */
.blasen-b { transform: scaleX(-1); }
.blasen-b .blase { animation-delay: calc(var(--sway-delay, 0s) * -4 - 9s); }

/* ============================================================
   v29 — Tiefenmesser über die ganze Reise + Muschel mit Perle
   Abtauchen (0→30 m) · Auftauchen (30→0 m) · Hafen: Muschel öffnet
   sich, die Perle leuchtet. Am Handy liegt die Muschel im Hafen.
   ============================================================ */
.tiefenmesser {
  gap: 0.7rem;
}

.tm-track {
  height: 230px;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(230px / 6 - 1px),
      rgba(246, 239, 226, 0.35) calc(230px / 6 - 1px),
      rgba(246, 239, 226, 0.35) calc(230px / 6)
    ),
    rgba(246, 239, 226, 0.12);
}

.tm-skala {
  display: none;
}

.tm-wert {
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.tiefenmesser.perle .tm-wert {
  background: rgba(217, 188, 122, 0.95);
  color: var(--navy-deep);
  box-shadow: 0 0 30px rgba(217, 188, 122, 0.55);
}

.tiefenmesser.aufgetaucht .tm-wert {
  border-color: rgba(246, 239, 226, 0.7);
}

/* Muschel (SVG-Goldlinien) */
.tm-muschel {
  display: block;
  width: 52px;
  height: 52px;
  margin-top: -0.2rem;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(217, 188, 122, 0.2));
  transition: transform 0.4s ease, filter 0.6s ease;
}

.tiefenmesser.perle .tm-muschel {
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 0 16px rgba(217, 188, 122, 0.55));
}

.tiefenmesser.perle .tm-muschel:hover {
  transform: scale(1.12);
}

.tm-muschel:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
  border-radius: 50%;
}

.muschel {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.muschel path {
  stroke: var(--gold-soft);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.muschel .rippe {
  fill: none;
  stroke-width: 0.9;
  opacity: 0.75;
}

.muschel .scharnier {
  fill: none;
  stroke-width: 2.2;
}

.muschel .deckel {
  transform-box: view-box;
  transform-origin: 32px 30px;
  transition: transform 1.2s cubic-bezier(0.55, -0.15, 0.3, 1.15);
}



.muschel .perle-kern {
  transform-box: view-box;
  transform-origin: 32px 43px;
  transform: scale(0);
  transition: transform 0.9s 0.55s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.muschel .perle-schein {
  fill: rgba(217, 188, 122, 0.35);
  filter: blur(3px);
}

.muschel .perle {
  stroke: none;
}

.offen .muschel .deckel,
.tiefenmesser.perle .muschel .deckel {
  transform: rotate(-152deg) scale(0.96);
}

.offen .muschel .perle-kern,
.tiefenmesser.perle .muschel .perle-kern {
  transform: scale(1);
}

.offen .muschel .perle-schein,
.tiefenmesser.perle .muschel .perle-schein {
  animation: perle-atmen 3.2s ease-in-out 1.4s infinite alternate;
}

@keyframes perle-atmen {
  from { opacity: 0.55; transform: scale(0.9); transform-origin: 32px 43px; transform-box: view-box; }
  to   { opacity: 1; transform: scale(1.25); transform-origin: 32px 43px; transform-box: view-box; }
}

/* Muschel im Hafen (Handy + Tablet; am Desktop übernimmt der Tiefenmesser) */
.hafen-muschel {
  display: none;
  text-align: center;
  margin: 0 auto 2rem;
}

.hafen-muschel .muschel {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 14px rgba(217, 188, 122, 0.35));
}

.hafen-muschel-text {
  margin-top: 0.6rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ozean-text);
}

.hafen-muschel-text span {
  color: var(--gold-soft);
}

@media (max-width: 1100px) {
  .hafen-muschel {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .muschel .deckel,
  .muschel .perle-kern {
    transition: none;
  }
  .muschel .perle-schein {
    animation: none !important;
  }
}

/* Handy: Blasen zarter, damit sie nicht über den Karten stören */
@media (max-width: 720px) {
  .blasen .blase:nth-child(n) {
    --op: 0.4;
  }
}

/* ============================================================
   v30 — Tiefenmesser steht fest; Muschel + Perle in hochwertig
   ============================================================ */
.tiefenmesser {
  width: 9.5rem;           /* feste Breite: Skala wandert nicht mehr, wenn der Text länger wird */
  align-items: center;
  right: 1rem;
}

.tm-wert {
  white-space: nowrap;
}

.tm-muschel {
  width: 68px;
  height: 68px;
  margin-top: -0.3rem;
}

.hafen-muschel .muschel {
  width: 120px;
  height: 120px;
}

/* Schale */
.muschel .schale-aussen {
  stroke: var(--gold-soft);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.muschel .schale-innen {
  stroke: none;
  opacity: 0.9;
}

.muschel .rippe {
  fill: none;
  stroke: rgba(217, 188, 122, 0.8);
  stroke-width: 0.8;
  opacity: 0.85;
}

.muschel .scharnier {
  fill: #b48a2f;
  stroke: var(--gold-soft);
  stroke-width: 0.8;
}

/* Deckel: klappt am Scharnier nach hinten (Spiegelung + Verkürzung = Perspektive) */
.muschel .deckel {
  transform-box: view-box;
  transform-origin: 50px 46px;
  transform: scaleY(1);
  transition: transform 1.4s cubic-bezier(0.5, 0, 0.2, 1);
}

.muschel .deckel path {
  fill-opacity: 1;
}

.muschel .deckel .rippe {
  stroke: rgba(217, 188, 122, 0.55);
}

.offen .muschel .deckel,
.tiefenmesser.perle .muschel .deckel {
  transform: scaleY(-0.72);
}

/* Perle */
.muschel .perle-kern {
  transform-box: view-box;
  transform-origin: 50px 60px;
  transform: scale(0);
  transition: transform 1s 0.7s cubic-bezier(0.3, 1.45, 0.5, 1);
}

.muschel .perle {
  stroke: rgba(90, 72, 40, 0.55);
  stroke-width: 0.5;
}

.muschel .schale-innen {
  opacity: 0.55;
}

.muschel .perle-schimmer {
  stroke: none;
  mix-blend-mode: screen;
}

.muschel .perle-licht {
  fill: #ffffff;
  opacity: 0.95;
}

.muschel .perle-schatten {
  fill: rgba(5, 12, 26, 0.7);
}

.muschel .perle-glow {
  opacity: 0.8;
}

.offen .muschel .perle-kern,
.tiefenmesser.perle .muschel .perle-kern {
  transform: scale(1);
}

.offen .muschel .perle-glow,
.tiefenmesser.perle .muschel .perle-glow {
  animation: perle-glow 3.4s ease-in-out 1.8s infinite alternate;
  transform-box: view-box;
  transform-origin: 50px 60px;
}

@keyframes perle-glow {
  from { opacity: 0.55; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1.2); }
}

/* alte Perlen-Animation (v29) außer Kraft */
.muschel .perle-schein {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .muschel .perle-glow {
    animation: none !important;
  }
}

/* ============================================================
   v31 — Kompass-Check: Fragenbild frei sichtbar, mittig, mit Luft
   Bild als eigenes, gerahmtes Aquarell; Titel und Szenario darunter
   ============================================================ */
.sv-hero {
  position: relative;
  margin: 1.2rem 0 1.5rem;
  min-height: 0;
  border: none;
  overflow: visible;
}

.sv-hero-img {
  position: static;
  display: block;
  width: 100%;
  height: clamp(220px, 30vw, 320px);
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(217, 188, 122, 0.5);
  box-shadow:
    0 0 0 6px rgba(246, 239, 226, 0.04),
    0 24px 50px -28px rgba(0, 0, 0, 0.85);
}

.sv-hero-text {
  position: static;
  padding: 1.5rem 0 0;
  background: none;
}

.sv-hero-text h3 {
  margin-bottom: 0.45rem;
}

.ozean .sv-hero {
  border: none;
}

.ozean .sv-hero-text {
  background: none;
}

@media (max-width: 700px) {
  .sv-hero {
    min-height: 0;
    margin: 0.8rem 0 1.2rem;
  }

  .sv-hero-img {
    height: clamp(180px, 52vw, 240px);
  }

  .sv-hero-text {
    padding-top: 1.1rem;
  }
}

/* ============================================================
   v32 — Kompass-Check: Aquarell voll sichtbar, blaues Textfeld mittig
   (gleicher Abstand oben und unten zum Bildrand)
   ============================================================ */
.sv-hero {
  position: relative;
  margin: 0.6rem calc(-1 * var(--sv-pad)) 1.5rem;
  min-height: clamp(300px, 34vw, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem var(--sv-pad);
  overflow: hidden;
  border-top: 1px solid rgba(217, 188, 122, 0.3);
  border-bottom: 1px solid rgba(217, 188, 122, 0.3);
}

.sv-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.sv-hero-text,
.ozean .sv-hero-text {
  position: relative;
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.3rem 1.7rem 1.4rem;
  border-radius: 16px;
  background: rgba(14, 28, 54, 0.8);
  border: 1px solid rgba(217, 188, 122, 0.35);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.sv-hero-text h3 {
  margin-bottom: 0.4rem;
}

.sv-hero-text .sv-szenario {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .sv-hero {
    min-height: clamp(280px, 80vw, 340px);
    padding: 2.4rem 1rem;
    margin-bottom: 1.2rem;
  }

  .sv-hero-text {
    padding: 1.1rem 1.2rem;
  }
}

/* ============================================================
   v33 — Kompass-Check: der blaue Film mit der Schrift als
   durchgehendes Band in der Mitte des Aquarells (symmetrisch)
   ============================================================ */
.sv-hero {
  min-height: clamp(320px, 36vw, 400px);
  padding: 2.6rem 0;
}

.sv-hero-text,
.ozean .sv-hero-text {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 1.7rem var(--sv-pad) 1.8rem;
  border-radius: 0;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(
    180deg,
    rgba(16, 32, 61, 0) 0%,
    rgba(16, 32, 61, 0.62) 16%,
    rgba(16, 32, 61, 0.9) 45%,
    rgba(16, 32, 61, 0.9) 55%,
    rgba(16, 32, 61, 0.62) 84%,
    rgba(16, 32, 61, 0) 100%
  );
}

@media (max-width: 700px) {
  .sv-hero {
    min-height: clamp(300px, 86vw, 360px);
    padding: 2rem 0;
  }

  .sv-hero-text {
    padding: 1.3rem var(--sv-pad) 1.4rem;
  }
}

/* ============================================================
   v34 — Kompass-Check: exakt der Film aus Stevens Screenshot
   (oben durchsichtig, unten dunkelblau, Schrift unten im Film),
   nur als Ganzes nach unten gerückt, sodass oben und unten gleich
   viel Aquarell frei bleibt. Sonst nichts verändert.
   ============================================================ */
.sv-hero {
  position: relative;
  margin: 0.4rem calc(-1 * var(--sv-pad)) 1.5rem;
  min-height: 360px;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(217, 188, 122, 0.3);
  border-bottom: 1px solid rgba(217, 188, 122, 0.3);
}

.sv-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.sv-hero-text,
.ozean .sv-hero-text {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 6.2rem var(--sv-pad) 1rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(
    180deg,
    rgba(16, 32, 61, 0) 0%,
    rgba(16, 32, 61, 0.55) 40%,
    rgba(16, 32, 61, 0.94) 78%
  );
}

.sv-hero-text h3 {
  margin-bottom: 0.35rem;
}

.sv-hero-text .sv-szenario {
  margin-bottom: 0.2rem;
}

@media (max-width: 700px) {
  .sv-hero {
    min-height: 370px;
    padding: 0;
  }

  .sv-hero-text {
    padding: 4.4rem var(--sv-pad) 1rem;
  }
}

/* v35 — Kompass-Check: die Unterkante des blauen Films läuft weich aus (wie oben) */
.sv-hero-text,
.ozean .sv-hero-text {
  padding-bottom: 3.6rem;
  background: linear-gradient(
    180deg,
    rgba(16, 32, 61, 0) 0%,
    rgba(16, 32, 61, 0.55) 34%,
    rgba(16, 32, 61, 0.94) 58%,
    rgba(16, 32, 61, 0.94) 74%,
    rgba(16, 32, 61, 0.55) 88%,
    rgba(16, 32, 61, 0) 100%
  );
}

/* v36 — Gründungs-Crew: Preis mit Luft zum Text darunter */
.tf-schluss-karte p.tiefgang-preis {
  margin: 0.8rem auto 1.9rem;
  line-height: 1.15;
}

.tf-schluss-karte .tiefgang-preis span {
  margin-top: 1rem;
  line-height: 1.5;
}

/* ============================================================
   v39 — Weichere Übergänge (Auftauchen, Abtauchen, Wasserlinie,
   dunkle Kanten) + mehr Blasen am Handy
   ============================================================ */

/* ---------- Auftauchen: Licht fällt von der Oberfläche (unten) herein ---------- */
.tf-licht {
  height: clamp(300px, 44vh, 460px);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      #0c1a30 0%,
      #10203b 9%,
      #16294a 18%,
      #213f68 29%,
      #33568a 40%,
      #4f72a3 51%,
      #7392bb 61%,
      #9db3cf 70%,
      #c1cddd 78%,
      #dcdcd9 85%,
      #ede6d8 92%,
      var(--cream) 100%
    );
}

.tf-licht::before {
  content: "";
  position: absolute;
  inset: -10% -25% -30%;
  background: conic-gradient(
    from -34deg at 50% 118%,
    transparent 0%,
    rgba(246, 239, 226, 0.22) 1.6%,
    transparent 3.4%,
    rgba(246, 239, 226, 0.14) 5.2%,
    transparent 7.2%,
    rgba(246, 239, 226, 0.24) 9.0%,
    transparent 10.8%,
    rgba(246, 239, 226, 0.13) 12.6%,
    transparent 14.4%,
    rgba(246, 239, 226, 0.20) 16.4%,
    transparent 18.4%
  );
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 92%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 92%);
  pointer-events: none;
  animation: tf-strahlen 26s ease-in-out infinite alternate;
}

.tf-licht.tf-licht-kurz {
  height: clamp(260px, 38vh, 400px);
}

/* Blasen, die beim Auftauchen im Licht verschwinden */
.blasen-licht .blase {
  animation-name: blase-licht;
  animation-timing-function: ease-out;
}

@keyframes blase-licht {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: var(--op, 0.8); }
  60%  { opacity: calc(var(--op, 0.8) * 0.7); }
  100% { transform: translate3d(10px, -52vh, 0); opacity: 0; }
}

.blasen-licht .blase:nth-child(1) { left: 9%;  bottom: 2%;  width: 14px; height: 14px; animation-duration: 13s;   animation-delay: -4s;  --sway: 3.2s; --op: 0.8; }
.blasen-licht .blase:nth-child(2) { left: 22%; bottom: 8%;  width: 9px;  height: 9px;  animation-duration: 11s;   animation-delay: -9s;  --sway: 4.1s; --op: 0.7; }
.blasen-licht .blase:nth-child(3) { left: 41%; bottom: 4%;  width: 18px; height: 18px; animation-duration: 15s;   animation-delay: -2s;  --sway: 3.6s; --op: 0.55; }
.blasen-licht .blase:nth-child(4) { left: 57%; bottom: 12%; width: 11px; height: 11px; animation-duration: 12s;   animation-delay: -7s;  --sway: 2.9s; --op: 0.7; }
.blasen-licht .blase:nth-child(5) { left: 73%; bottom: 3%;  width: 16px; height: 16px; animation-duration: 14s;   animation-delay: -11s; --sway: 3.9s; --op: 0.8; }
.blasen-licht .blase:nth-child(6) { left: 88%; bottom: 9%;  width: 10px; height: 10px; animation-duration: 12.5s; animation-delay: -5s;  --sway: 4.4s; --op: 0.75; }
.blasen-licht .blase:nth-child(7) { left: 33%; bottom: 16%; width: 8px;  height: 8px;  animation-duration: 10s;   animation-delay: -1s;  --sway: 3.1s; --op: 0.6; }
.blasen-licht .blase:nth-child(8) { left: 66%; bottom: 20%; width: 12px; height: 12px; animation-duration: 13.5s; animation-delay: -6s;  --sway: 3.4s; --op: 0.65; }

/* ---------- Abtauchen: letztes Abendlicht fällt von oben durchs Wasser ---------- */
.tf-abtauchen {
  height: clamp(240px, 36vh, 380px);
  background:
    linear-gradient(
      180deg,
      var(--cream) 0%,
      #efe7d8 7%,
      #ded9d0 15%,
      #c3cad6 24%,
      #a2b4cc 34%,
      #7d95b8 45%,
      #5b77a4 57%,
      #43608e 69%,
      #2f4b78 82%,
      #243f69 92%,
      var(--ozean-0) 100%
    );
}

.tf-abtauchen::before {
  content: "";
  position: absolute;
  inset: -30% -25% -10%;
  background: conic-gradient(
    from 146deg at 50% -18%,
    transparent 0%,
    rgba(246, 239, 226, 0.20) 1.6%,
    transparent 3.4%,
    rgba(246, 239, 226, 0.12) 5.2%,
    transparent 7.2%,
    rgba(246, 239, 226, 0.22) 9.0%,
    transparent 10.8%,
    rgba(246, 239, 226, 0.12) 12.6%,
    transparent 14.4%,
    rgba(246, 239, 226, 0.18) 16.4%,
    transparent 18.4%
  );
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 92%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 92%);
  pointer-events: none;
  animation: tf-strahlen 26s ease-in-out infinite alternate;
}

/* ---------- Wasserlinie: kurzes Flachwasser, dann wird es tiefer ---------- */
.tf-welle + .ozean {
  background:
    linear-gradient(180deg, rgba(122, 160, 205, 0.34) 0%, rgba(122, 160, 205, 0.14) 200px, rgba(122, 160, 205, 0) 420px),
    linear-gradient(
      180deg,
      var(--ozean-0) 0%,
      var(--ozean-1) 28%,
      var(--ozean-2) 62%,
      var(--ozean-3) 92%,
      #0c1a30 100%
    );
}

/* ---------- Dunkle Kanten: Töne laufen ineinander ---------- */
.tf-hafen + .brand-statement {
  border-top: none;
  background:
    radial-gradient(ellipse 70% 90% at 20% 10%, rgba(217, 188, 122, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 90%, rgba(217, 188, 122, 0.1), transparent 60%),
    linear-gradient(180deg, var(--ozean-2) 0%, var(--navy) 55%, var(--navy-deep) 100%);
}

.ozean.tf-schluss {
  background: linear-gradient(180deg, var(--ozean-0) 0%, var(--ozean-1) 38%, var(--ozean-2) 72%, var(--navy-deep) 100%);
}

/* ---------- Handy: alle Blasen an, etwas kräftiger, dritter Satz auf der Startseite ---------- */
.blasen-c { display: none; }

@media (max-width: 720px) {
  .blase:nth-child(3n),
  .blase:nth-child(n+13) { display: block; }
  .blasen .blase:nth-child(n) { --op: 0.55; }
  .blasen-c { display: block; }
  .blasen-c .blase { animation-delay: calc(var(--sway-delay, 0s) * -6 - 17s); }
}

@media (prefers-reduced-motion: reduce) {
  .blase { display: none; }
  .tf-licht::before,
  .tf-abtauchen::before { animation: none; }
}

/* Sonnenglanz an der Oberflächenseite, zum Rand hin ausgeblendet (keine Kante zur Nachbar-Sektion) */
.tf-licht::after,
.tf-abtauchen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tf-licht::after {
  background: radial-gradient(ellipse 72% 62% at 50% 96%, rgba(217, 188, 122, 0.34), transparent 70%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 26%, #000 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 26%, #000 100%);
}

.tf-abtauchen::after {
  background: radial-gradient(ellipse 72% 62% at 50% 4%, rgba(217, 188, 122, 0.34), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
}

/* Über mich: Himmel-Ton beginnt erst unterhalb der Naht, oben reines Creme */
.tf-auftauchen {
  background: linear-gradient(180deg, rgba(201, 210, 223, 0) 0%, rgba(201, 210, 223, 0.3) 14%, rgba(201, 210, 223, 0) 48%);
}

/* Handy: dritter Blasensatz sitzt in der oberen Ozeanhälfte, die Blasen fangen direkt unter der Welle an */
@media (max-width: 720px) {
  .blasen-c .blase:nth-child(1) { left: 14%; bottom: 98.5%; }
  .blasen-c .blase:nth-child(2) { left: 86%; bottom: 96%; }
  .blasen-c .blase:nth-child(3) { left: 30%; bottom: 93.5%; }
  .blasen-c .blase:nth-child(4) { left: 70%; bottom: 91%; }
  .blasen-c .blase:nth-child(5) { left: 8%; bottom: 88.5%; }
  .blasen-c .blase:nth-child(6) { left: 92%; bottom: 86%; }
  .blasen-c .blase:nth-child(7) { left: 46%; bottom: 83.5%; }
  .blasen-c .blase:nth-child(8) { left: 60%; bottom: 81%; }
  .blasen-c .blase:nth-child(9) { left: 20%; bottom: 78.5%; }
  .blasen-c .blase:nth-child(10) { left: 80%; bottom: 76%; }
  .blasen-c .blase:nth-child(11) { left: 38%; bottom: 73.5%; }
  .blasen-c .blase:nth-child(12) { left: 66%; bottom: 71%; }
  .blasen-c .blase:nth-child(13) { left: 10%; bottom: 68.5%; }
  .blasen-c .blase:nth-child(14) { left: 90%; bottom: 66%; }
  .blasen-c .blase:nth-child(15) { left: 26%; bottom: 63.5%; }
  .blasen-c .blase:nth-child(16) { left: 74%; bottom: 61%; }
  .blasen-c .blase:nth-child(17) { left: 52%; bottom: 58.5%; }
  .blasen-c .blase:nth-child(18) { left: 84%; bottom: 56%; }
}

/* ============================================================
   v41 — Seitenende: Uferwelle, Statement in Creme, Footer im
   Blau der Kopfleiste mit Goldlinie
   ============================================================ */

/* Uferwelle: Creme-Welle läuft von unten ins dunkle Hafenwasser (Spiegel zur Wasserlinie oben) */
.tf-welle-ufer {
  background: var(--ozean-2);
  margin-bottom: 0;
  margin-top: -1px;
  position: relative;
  z-index: 1;
}

.tf-welle-ufer svg {
  height: clamp(46px, 8vw, 110px);
}

/* Statement wieder an Land: Creme, Text in Marine, Akzent in Gold */
.tf-welle-ufer + .brand-statement,
.brand-statement-ufer {
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(217, 188, 122, 0.18), transparent 70%),
    var(--cream);
  border-top: none;
  border-bottom: none;
  padding-block: clamp(3.5rem, 9vh, 6rem);
}

.brand-statement-ufer .brand-quote {
  color: var(--navy);
}

.brand-statement-ufer .brand-quote-accent {
  color: var(--gold-deep);
}

/* Footer: Blau der Kopfleiste, Goldlinie oben wie die Kopfleiste unten */
.site-footer {
  background: #16294a;
  border-top: 1px solid rgba(217, 188, 122, 0.3);
}

/* ============================================================
   v42 — Ausbildungsnachweis unter dem Siegel (Über mich)
   ============================================================ */
.tf-siegel-detail {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* ===== v43 (08.09.2026): Ein Wort von Marilena + Eckdaten-Zeile in der Schluss-Karte ===== */
.tf-wort p {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink);
}

.tf-wort .tf-wort-schluss {
  margin-top: 1.6rem;
  font-family: var(--font-serif);
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--navy);
}

.tf-wort .tf-wort-schluss strong {
  color: var(--gold-text);
}

.tf-wort p.tf-wort-sig {
  margin-top: 1.2rem;
  font-family: var(--font-script);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold-deep);
}

.tf-schluss-karte p.tf-fakten-karte {
  margin: 0.2rem auto 1.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: rgba(217, 188, 122, 0.95);
}

.tf-schluss-karte p.tf-fakten-karte {
  flex-direction: column;
  gap: 0.15rem;
}

.tf-schluss-karte p.tf-fakten-karte .punkt {
  display: none;
}


/* ===== v44 (08.09.2026): Lichtbänder am Handy kürzer, H1 auf Rechtsseiten wie Sektionstitel ===== */
@media (max-width: 720px) {
  .tf-licht {
    height: clamp(200px, 30vh, 280px);
  }

  .tf-licht-kurz {
    height: clamp(140px, 20vh, 180px);
  }

  .tf-abtauchen {
    height: clamp(170px, 24vh, 240px);
  }
}

.section-head h1.legal-h1 {
  font-size: clamp(2rem, 4.2vw, 2.7rem);
  line-height: 1.15;
  margin: 0;
}