/* ============================================================
   ISABELLE MARIA HUBERT — Editorial Design System V3 (hell)
   Weiß · Ink · Neon-Gelb · B/W-Fotografie
   ============================================================ */

:root {
  --paper: #FAF9F5;
  --card: #FFFFFF;
  --tint: #EDE7E2;      /* Beige aus CI #E9E2DE */
  --beige: #E9E2DE;
  --flieder: #D4D9F2;
  --ink: #101015;
  --ink-2: #1C1C24;
  --soft: #363B4E;
  --lav: #D0D4EB;
  --neon: #F8F41A;
  --neon-dim: rgba(239, 254, 30, 0.5);
  --line: rgba(16, 16, 21, 0.12);
  --line-dark: rgba(208, 212, 235, 0.14);
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --sans: 'Jost', 'Futura', -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Kompatibilitäts-Aliase */
:root {
  --black: var(--ink);
  --gold: var(--neon);
  --gold-dark: var(--ink);
  --gold-light: var(--neon);
  --cream: var(--paper);
  --muted: var(--soft);
  --shadow-lg: 0 34px 90px rgba(16, 16, 21, 0.18);
  --shadow-md: 0 18px 50px rgba(16, 16, 21, 0.12);
  --shadow-sm: 0 8px 26px rgba(16, 16, 21, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17.5px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--neon); color: var(--ink); }

/* Feines Grain */
body::after {
  content: ''; position: fixed; inset: -100%; z-index: 2000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.028;
  animation: grain 9s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 10% { transform: translate(-3%,-6%); }
  20% { transform: translate(-8%,3%); } 30% { transform: translate(4%,-9%); }
  40% { transform: translate(-3%,8%); } 50% { transform: translate(-8%,4%); }
  60% { transform: translate(8%,0); } 70% { transform: translate(0,6%); }
  80% { transform: translate(2%,10%); } 90% { transform: translate(-6%,4%); }
}

/* Scroll-Progress */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--neon); z-index: 3000;
  box-shadow: 0 0 12px rgba(239, 254, 30, 0.8);
}

/* ---------- Preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.9s var(--ease-out), visibility 0.9s;
}
#preloader.done { opacity: 0; visibility: hidden; }
#preloader img { width: 240px; opacity: 0; animation: loaderFade 1.3s var(--ease-out) forwards; }
@keyframes loaderFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Announcement-Bar ---------- */
.announce {
  position: relative; z-index: 1001;
  background: var(--ink); color: var(--lav);
  text-align: center; padding: 9px 16px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  display: block;
}
.announce:hover .announce-arrow { transform: translateX(5px); }
.announce-arrow { display: inline-block; transition: transform 0.3s var(--ease-out); margin-left: 8px; color: var(--neon); }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.06; letter-spacing: 0.01em; }
h1 { font-size: clamp(3rem, 7.5vw, 6.4rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.2; }
.serif-i { font-style: italic; }
.gold-text { color: inherit; font-style: italic; position: relative; }

/* Akzentwoerter: auf hellem Grund elegant kursiv, auf dunklem Grund NEON-CAPS */
.gold-text, .marker { font-style: italic; color: inherit; }
.on-dark .gold-text, .section-ink .gold-text, .cta-photo .gold-text, .page-hero-img .gold-text {
  font-style: normal; text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.quote-panel .gold-text {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0; font-size: 1em; vertical-align: 0;
  color: var(--neon); text-shadow: none;
}

.eyebrow {
  font-family: var(--sans); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 16px;
  margin-bottom: 26px;
}
.eyebrow::before { content: ''; width: 44px; height: 2px; background: var(--neon); }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: #3C4157; font-weight: 300; line-height: 1.9; }

/* Dunkle Akzent-Sektionen */
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--lav); }
.on-dark .lead, .on-dark p { color: rgba(208, 212, 235, 0.85); }
.on-dark .eyebrow { color: var(--neon); }

/* ---------- Layout ---------- */
.container { width: min(1240px, 91vw); margin: 0 auto; }
section { position: relative; padding: clamp(90px, 12vh, 150px) 0; }
.section-cream { background: var(--paper); }
.section-white { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tint  { background: var(--tint); }
.section-ink   { background: var(--ink); }
.section-flieder { background: linear-gradient(180deg, #FFFFFF 0%, var(--flieder) 100%); }
section > .container { position: relative; z-index: 2; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 6vw, 100px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.grid-5 .card { padding: 30px 20px; }
.grid-5 .card h3 { font-size: 1.15rem; }
.grid-5 .card p { font-size: 0.85rem; }
@media (max-width: 1024px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .grid-5 { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px) { .grid-5 { grid-template-columns: 1fr; } }

/* ---------- Monogramm-Ornamente ---------- */
.qf-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.qf { position: absolute; will-change: transform; }
.qf img { width: 100%; height: 100%; object-fit: contain; }
.watermark { position: absolute; pointer-events: none; z-index: 0; opacity: 0.32; width: clamp(400px, 46vw, 760px); aspect-ratio: 1383/1600; }
.watermark img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background 0.5s, box-shadow 0.5s, padding 0.4s, border-color 0.5s;
  padding: 20px 0; border-bottom: 1px solid transparent;
  background: rgba(250, 249, 245, 0.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
header.scrolled { background: rgba(250, 249, 245, 0.88); padding: 12px 0; border-bottom-color: var(--line); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; }
.logo img { height: 48px; width: auto; transition: height 0.4s; }
header.scrolled .logo img { height: 38px; }
nav.desktop { display: flex; align-items: center; gap: 34px; }
nav.desktop a {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); position: relative; padding: 4px 0;
}
nav.desktop a::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 3px; width: 100%;
  background: var(--neon); transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
nav.desktop a:hover::after, nav.desktop a.active::after { transform: scaleX(1); transform-origin: left; }
nav.desktop a.btn-gold { color: var(--ink); font-weight: 600; }
nav.desktop a.btn-gold::after { display: none; }

.burger { display: none; flex-direction: column; gap: 7px; cursor: pointer; background: none; border: none; padding: 8px; z-index: 1102; }
.burger span { width: 30px; height: 2px; background: var(--ink); transition: 0.4s var(--ease-out); }
.burger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 1101; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  clip-path: circle(0% at calc(100% - 44px) 40px);
  transition: clip-path 0.7s var(--ease-out); visibility: hidden;
}
.mobile-menu.open { clip-path: circle(150% at calc(100% - 44px) 40px); visibility: visible; }
.mobile-menu a {
  font-family: var(--serif); font-style: italic; font-size: 2.3rem; color: var(--ink); padding: 8px;
  opacity: 0; transform: translateY(24px); transition: 0.5s var(--ease-out);
}
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu a:hover { color: var(--neon); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 40px; border-radius: 0;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  cursor: pointer; border: none; position: relative; overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, color 0.35s, background 0.35s, border-color 0.35s;
  will-change: transform;
}
.btn-gold { background: var(--neon); color: var(--ink); }
.btn-gold:hover { background: var(--ink); color: var(--neon); box-shadow: 0 14px 40px rgba(16,16,21,0.25); transform: translateY(-2px); }
.btn-outline, .btn-outline-dark { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover, .btn-outline-dark:hover { background: var(--ink); color: var(--neon); transform: translateY(-2px); }
.on-dark .btn-outline { color: var(--lav); border-color: rgba(208,212,235,0.5); }
.on-dark .btn-outline:hover { background: var(--neon); color: var(--ink); border-color: var(--neon); }
.btn .arr { transition: transform 0.35s var(--ease-out); }
.btn:hover .arr { transform: translateX(6px); }

/* ---------- Hero ---------- */
.hero {
  min-height: calc(100vh - 110px); display: flex; align-items: center;
  background: var(--paper);
  padding: 70px 0 90px; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; }
.hero-copy h1 { margin: 0 0 30px; }
.hero-copy .lead { max-width: 500px; margin-bottom: 44px; }
.hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* Typewriter */
.type-line { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 26px; display: flex; align-items: center; gap: 16px; }
.type-line::before { content: ''; width: 44px; height: 2px; background: var(--neon); }
.type-line .tw { color: var(--ink); background: var(--neon); padding: 3px 8px; min-width: 20px; display: inline-block; }
.type-line .cursor-blink { animation: blink 0.9s steps(1) infinite; font-weight: 400; }
@keyframes blink { 50% { opacity: 0; } }

.hero-visual { position: relative; }
.hero-visual .frame {
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
  filter: grayscale(1) contrast(1.05);
}
.hero-visual .frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease-out); }
.hero-visual:hover .frame img { transform: scale(1.0); }
.hero-visual::before {
  content: ''; position: absolute; inset: -16px;
  border: 2px solid var(--neon);
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero-badge {
  position: absolute; bottom: 36px; left: -48px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 18px 26px; box-shadow: var(--shadow-sm);
  color: var(--soft); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  animation: floaty 5.5s ease-in-out 1s infinite;
}
.hero-badge strong { display: block; font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--ink); font-weight: 400; letter-spacing: 0; text-transform: none; }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: var(--soft); font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint::after {
  content: ''; width: 2px; height: 48px;
  background: linear-gradient(to bottom, var(--neon), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { text-align: center; padding: 44px 12px; background: var(--paper); transition: background 0.4s; }
.stat:hover { background: var(--card); }
.stat .num { font-family: var(--serif); font-style: italic; font-size: clamp(2.8rem, 5vw, 4.4rem); color: var(--ink); font-weight: 400; line-height: 1; }
.stat:hover .num { color: var(--ink); }
.stat .lbl { margin-top: 14px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--soft); }

/* ---------- Cards ---------- */
.card {
  background: var(--card); padding: 48px 40px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease-out, box-shadow 0.4s;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  transform-style: preserve-3d; will-change: transform;
}
.card:hover { box-shadow: var(--shadow-md); }
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--neon);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out);
}
.card:hover::before { transform: scaleX(1); }
.card .tag {
  align-self: flex-start; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink); background: var(--beige);
  padding: 7px 14px; margin-bottom: 26px;
}
.card .tag.tag-price { background: var(--ink); color: var(--neon); }
.card .tag.tag-free { background: var(--neon); color: var(--ink); }
.card h3 { margin-bottom: 16px; }
.card p { font-size: 1rem; color: var(--soft); flex: 1; }
.card .card-link {
  margin-top: 30px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 10px;
}
.card .card-link .arr { transition: transform 0.35s var(--ease-out); }
.card:hover .card-link .arr { transform: translateX(6px); }
.card-dark { background: var(--ink); border-color: var(--ink); }
.card-dark h3 { color: var(--lav); }
.card-dark p { color: rgba(208,212,235,0.65); }
.card-dark .card-link { color: var(--neon); }

/* ---------- Bilder ---------- */
.img-frame { overflow: hidden; position: relative; box-shadow: var(--shadow-md); filter: grayscale(1) contrast(1.05); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.img-frame:hover img { transform: scale(1.05); }
.img-arch { border-radius: 0; }
.img-offset { position: relative; }
.img-offset::after { content: ''; position: absolute; inset: 0; transform: translate(22px, 22px); border: 2px solid var(--neon); z-index: -1; }

/* ---------- Sektionen mit unscharfem Foto-Hintergrund ---------- */
.section-photo { position: relative; overflow: hidden; }
.section-photo .bg-blur { position: absolute; inset: 0; z-index: 0; }
.section-photo .bg-blur img { width: 100%; height: 100%; object-fit: cover; }
.section-photo .bg-blur::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,249,245,0.38) 0%, rgba(250,249,245,0.2) 50%, rgba(250,249,245,0.38) 100%); }

/* Frosted-Glass-Panel fuer Text auf Foto-Hintergruenden */
.glass {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-sm);
  padding: 40px 42px;
}
.glass-center { max-width: 760px; margin: 0 auto 56px; text-align: center; }

/* ---------- Video-Facade (Standbild + Play) ---------- */
.video-facade { position: absolute; inset: 0; cursor: pointer; z-index: 3; overflow: hidden; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.video-facade:hover img { transform: scale(1.03); }
.video-facade .play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--neon); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(239, 254, 30, 0.5);
  animation: playPulse 2.2s ease-out infinite;
  transition: transform 0.35s var(--ease-out);
}
.video-facade:hover .play-btn { transform: translate(-50%, -50%) scale(1.12); }
.video-facade .play-btn::after { content: ''; margin-left: 7px; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent var(--ink); }
@keyframes playPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 254, 30, 0.55); } 70% { box-shadow: 0 0 0 30px rgba(239, 254, 30, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 254, 30, 0); } }

/* ---------- Hero mit Vollbild-Hintergrund ---------- */
.hero-cover { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; padding: 90px 0; }
.hero-cover .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-cover .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.hero-cover .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12,12,16,0.82) 0%, rgba(12,12,16,0.5) 48%, rgba(12,12,16,0.08) 78%, rgba(12,12,16,0) 100%); }
.hero-cover .container { position: relative; z-index: 2; }
.hero-cover .hero-badge { position: absolute; right: 4vw; bottom: 40px; left: auto; z-index: 3; }

/* Hero linksbuendig (Gesicht rechts frei) */
.hero-left { text-align: left; }
.hero-left .type-line { justify-content: flex-start; }
.hero-left .hero-copy { max-width: 640px; }
.hero-left .hero-copy .lead { margin-left: 0 !important; }
.hero-left .hero-ctas { justify-content: flex-start; }
@media (max-width: 820px) {
  .hero-cover .hero-bg::after { background: linear-gradient(180deg, rgba(12,12,16,0.6) 0%, rgba(12,12,16,0.45) 60%, rgba(12,12,16,0.7) 100%); }
}

/* ---------- Zentrierter Hero ---------- */
.hero-center { text-align: center; }
.hero-center .type-line { justify-content: center; }
.hero-center .hero-copy .lead { margin-left: auto; margin-right: auto; }
.hero-center .hero-ctas { justify-content: center; }
.hero-wide { position: relative; max-width: 1000px; margin: 60px auto 0; }
.hero-wide .frame { overflow: hidden; box-shadow: var(--shadow-lg); border: 8px solid #fff; }
.hero-wide .frame img { width: 100%; display: block; transition: transform 1.4s var(--ease-out); }
.hero-wide:hover .frame img { transform: scale(1.03); }
.hero-wide::before { content: ''; position: absolute; inset: -14px; border: 2px solid var(--neon); z-index: -1; transform: rotate(-1deg); }
.hero-wide .hero-badge { left: auto; right: -20px; bottom: -24px; }

/* Header Social-Icon */
.nav-ig { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1.5px solid var(--ink); border-radius: 50%; transition: 0.35s var(--ease-out); }
.nav-ig svg { width: 16px; height: 16px; fill: var(--ink); transition: fill 0.3s; }
.nav-ig:hover { background: var(--ink); transform: translateY(-2px); }
.nav-ig:hover svg { fill: var(--neon); }
.nav-ig::after { display: none !important; }

/* ---------- Farbige Bilder & Collage ---------- */
.img-color { filter: none !important; }
.img-frame.img-color:hover img { transform: scale(1.04); }
.collage { position: relative; min-height: 560px; }
.collage .c-item {
  position: absolute; overflow: hidden; box-shadow: var(--shadow-md);
  border: 6px solid #fff; background: #fff;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s, z-index 0s;
}
.collage .c-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage .c-1 { width: 62%; aspect-ratio: 3/4; top: 0; left: 0; transform: rotate(-3.5deg); z-index: 1; }
.collage .c-2 { width: 48%; aspect-ratio: 3/4; top: 22%; right: 0; transform: rotate(3deg); z-index: 2; }
.collage .c-3 { width: 40%; aspect-ratio: 1/1; bottom: -4%; left: 12%; transform: rotate(-6deg); z-index: 3; }
.collage .c-item:hover { transform: rotate(0deg) scale(1.04); z-index: 9; box-shadow: var(--shadow-lg); }
.collage .c-badge {
  position: absolute; z-index: 4; top: 8%; right: -14px;
  background: var(--ink); color: var(--lav); padding: 12px 18px;
  font-family: var(--sans); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  transform: rotate(4deg); box-shadow: var(--shadow-sm);
  animation: floaty 5s ease-in-out infinite;
}

/* ---------- Icons ---------- */
.icon-circle {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--ink); color: var(--lav);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: transform 0.5s var(--ease-out), background 0.4s;
}
.icon-circle svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.step:hover .icon-circle, .card:hover .icon-circle { transform: rotate(-8deg) scale(1.1); background: var(--neon); color: var(--ink); }

/* ---------- CTA mit Fotohintergrund ---------- */
.cta-photo { position: relative; overflow: hidden; }
.cta-photo .cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-photo .cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cta-photo .cta-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12,12,16,0.88) 30%, rgba(12,12,16,0.55) 100%); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; position: relative; padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); }
.marquee-track { display: inline-flex; gap: 70px; animation: marquee 32s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee .m-item {
  font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 4vw, 3.4rem);
  color: transparent; -webkit-text-stroke: 1px rgba(16, 16, 21, 0.45);
  display: inline-flex; align-items: center; gap: 70px;
  transition: color 0.4s;
}
.marquee .m-item::after { content: '◆'; font-size: 0.8rem; color: var(--neon); font-style: normal; -webkit-text-stroke: 0; }
.marquee:hover .m-item { color: var(--ink); -webkit-text-stroke: 0; }

/* ---------- Foto-Marquee ---------- */
.photo-marquee { overflow: hidden; padding: 10px 0; }
.photo-track { display: inline-flex; gap: 22px; animation: marquee 55s linear infinite; will-change: transform; }
.photo-marquee:hover .photo-track { animation-play-state: paused; }
.photo-track .ph { height: clamp(260px, 36vh, 400px); flex-shrink: 0; overflow: hidden; box-shadow: var(--shadow-sm); border: 5px solid #fff; }
.photo-track .ph:nth-child(odd) { transform: rotate(-1.2deg); }
.photo-track .ph:nth-child(even) { transform: rotate(1.2deg); }
.photo-track .ph img { height: 100%; width: auto; display: block; transition: transform 0.8s var(--ease-out); }
.photo-track .ph:hover img { transform: scale(1.06); }

/* ---------- Quote (dunkler Akzent) ---------- */
.quote-panel { text-align: center; }
.quote-panel blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.28; color: var(--lav);
  max-width: 980px; margin: 0 auto;
}
.quote-panel blockquote .gold-text { color: var(--neon); background: none; }
.quote-panel cite { display: block; margin-top: 34px; font-family: var(--sans); font-style: normal; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: var(--neon); }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testi { background: var(--card); border: 1px solid var(--line); padding: 44px 36px; box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease-out), box-shadow 0.5s; }
.testi:hover { transform: translateY(-8px) rotate(-0.5deg); box-shadow: var(--shadow-md); }
.testi .stars { color: var(--ink); letter-spacing: 5px; margin-bottom: 20px; font-size: 0.8rem; }
.testi p { font-family: var(--serif); font-style: italic; font-size: 1.28rem; line-height: 1.55; color: var(--ink); }
.testi .who { margin-top: 24px; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--soft); }
.testi .who::before { content: '— '; color: var(--neon); }

/* ---------- Method steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding: 40px 28px 34px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease-out), box-shadow 0.5s; }
.step:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.step::before {
  counter-increment: step; content: '0' counter(step);
  font-family: var(--serif); font-style: italic; font-size: 2.8rem; color: var(--ink);
  display: inline-block; margin-bottom: 16px; line-height: 1;
}
.step h3 { font-size: 1.2rem; margin-bottom: 12px; }
.step p { font-size: 0.95rem; color: var(--soft); }

/* ---------- Media-Embeds ---------- */
.video-wrap {
  position: relative; width: 100%; aspect-ratio: 16/9;
  box-shadow: var(--shadow-lg); background: var(--ink);
  border: 1px solid var(--line);
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-frame { border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--card); }
.ig-wrap { display: flex; justify-content: center; }
.ig-wrap .instagram-media { margin: 0 auto !important; box-shadow: var(--shadow-md) !important; }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; justify-items: center; }
.ig-grid .instagram-media { width: 100% !important; min-width: 0 !important; max-width: 400px !important; box-shadow: var(--shadow-md) !important; border: 1px solid var(--line) !important; }
@media (max-width: 1024px) { .ig-grid { grid-template-columns: 1fr; } .ig-grid .instagram-media { max-width: 480px !important; } }
.spotify-embed { width: 100%; height: 452px; border: 0; border-radius: 14px; box-shadow: var(--shadow-md); }

/* ---------- 3D-Buch ---------- */
.book-scene { perspective: 1400px; display: flex; justify-content: center; }
.book3d {
  position: relative; width: min(300px, 70vw); aspect-ratio: 300/424;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(4deg);
  transition: transform 0.7s var(--ease-out);
  animation: bookFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes bookFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
.book-scene:hover .book3d { transform: rotateY(-8deg) rotateX(2deg); }
.book3d .cover {
  position: absolute; inset: 0; z-index: 2;
  background: var(--ink);
  border-radius: 3px 10px 10px 3px;
  box-shadow: 0 40px 80px rgba(16,16,21,0.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 34px 26px; text-align: center;
  transform: translateZ(18px);
  border-left: 6px solid #050507;
  overflow: hidden;
}
.book3d .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.14) 48%, transparent 60%); background-size: 250% 100%; animation: bookShine 5s ease-in-out infinite; }
@keyframes bookShine { 0%, 60% { background-position: 120% 0; } 100% { background-position: -130% 0; } }
.book3d .cover .b-emblem { width: 64px; opacity: 0.95; }
.book3d .cover .b-over { font-family: var(--sans); font-weight: 600; font-size: 0.55rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--lav); }
.book3d .cover .b-title { font-family: var(--serif); font-style: italic; font-size: 2rem; line-height: 1.1; color: var(--lav); }
.book3d .cover .b-title span { color: var(--neon); }
.book3d .cover .b-author { font-family: var(--sans); font-weight: 600; font-size: 0.55rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--neon); margin-top: 10px; }
.book3d .pages { position: absolute; top: 5px; bottom: 5px; right: -14px; width: 30px; background: repeating-linear-gradient(to right, #fff 0 2px, #E9E6DC 2px 4px); border-radius: 0 8px 8px 0; transform: translateZ(2px); }
.book3d .back { position: absolute; inset: 0; background: #0A0A0D; border-radius: 3px 10px 10px 3px; transform: translateZ(-16px); box-shadow: 0 50px 100px rgba(16,16,21,0.4); }
.book-badge {
  position: absolute; top: 6px; right: 10%; z-index: 20;
  background: var(--neon); color: var(--ink);
  font-family: var(--sans); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 12px 16px; transform: rotate(6deg);
  box-shadow: var(--shadow-sm);
  animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100% { transform: rotate(6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.07); } }
.book-scene { position: relative; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 30px 6px; text-align: left;
  font-family: var(--serif); font-size: 1.45rem; color: var(--ink); font-weight: 400;
  transition: padding-left 0.3s, background-size 0.5s;
}
.faq-q:hover { padding-left: 14px; }
.faq-q .plus { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-q .plus::before, .faq-q .plus::after { content: ''; position: absolute; background: var(--ink); transition: transform 0.4s var(--ease-out); }
.faq-q .plus::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-q .plus::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq-item.open .plus::after { transform: scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.55s var(--ease-out); }
.faq-a p { padding: 0 6px 30px; color: var(--soft); font-size: 1.02rem; max-width: 720px; }
.faq-a a { color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* ---------- Podcast / Plattformen ---------- */
.podcast-cover { overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(-2deg); transition: transform 0.6s var(--ease-out); border: 1px solid var(--line); filter: none; }
.podcast-cover:hover { transform: rotate(0deg) scale(1.02); }
.platforms { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.platform-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1.5px solid var(--ink); color: var(--ink);
  transition: 0.35s var(--ease-out);
}
.platform-btn:hover { background: var(--ink); color: var(--neon); transform: translateY(-3px); }
.platform-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- CTA ---------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 22px; }
.cta-band .lead { max-width: 640px; margin: 0 auto 44px; }

/* ---------- Footer (dunkel) ---------- */
footer { background: var(--ink); color: #E7E9F4; padding: 90px 0 44px; position: relative; overflow: hidden;
  -webkit-font-smoothing: antialiased; }
footer p { color: #C9CDE2; font-size: 1rem; line-height: 1.65; font-weight: 400; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 64px; position: relative; z-index: 2; }
.footer-grid h4 { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--neon); margin-bottom: 22px; }
.footer-grid a { display: block; padding: 7px 0; font-size: 1rem; font-weight: 400; color: #E7E9F4; transition: color 0.3s, transform 0.3s; }
.footer-grid a:hover { color: var(--neon); transform: translateX(4px); }
.footer-logo img { height: 58px; margin-bottom: 24px; }
.footer-bottom { border-top: 1px solid rgba(231,233,244,0.22); padding-top: 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 0.85rem; letter-spacing: 0.04em; color: #B9BED6; position: relative; z-index: 2; }
.footer-bottom a { color: #E7E9F4; }
.footer-bottom a:hover { color: var(--neon); }
footer .qf-layer, footer .mono-watermark { opacity: 0.05; z-index: 1; }
.socials { display: flex; gap: 12px; margin-top: 22px; }
.socials a { width: 42px; height: 42px; border: 1px solid rgba(208,212,235,0.25); display: flex; align-items: center; justify-content: center; transition: 0.35s var(--ease-out); }
.socials a svg { width: 16px; height: 16px; fill: var(--lav); transition: fill 0.3s; }
.socials a:hover { background: var(--neon); border-color: var(--neon); transform: translateY(-4px); }
.socials a:hover svg { fill: var(--ink); }

/* ---------- Page hero ---------- */
.page-hero { padding: 120px 0 100px; background: var(--paper); overflow: hidden; }
.page-hero h1 { max-width: 1000px; }
.page-hero .lead { max-width: 620px; margin-top: 28px; }

/* ---------- Page-Hero mit Foto ---------- */
.page-hero-img { position: relative; min-height: 56vh; display: flex; align-items: flex-end; padding: 160px 0 70px; overflow: hidden; }
.page-hero-img .ph-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-img .ph-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.page-hero-img .ph-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,16,0.45) 0%, rgba(12,12,16,0.25) 45%, rgba(12,12,16,0.78) 100%); }
.page-hero-img .container { position: relative; z-index: 2; }
.page-hero-img h1 { color: #fff; max-width: 1000px; }
.page-hero-img .lead { color: rgba(255,255,255,0.88); max-width: 620px; margin-top: 24px; }
.page-hero-img .eyebrow { color: #fff; }

/* ---------- Reveals ---------- */
[data-reveal] { opacity: 0; transform: translateY(46px); transition: opacity 1s var(--ease-expo), transform 1s var(--ease-expo); transition-delay: var(--d, 0s); will-change: opacity, transform; }
[data-reveal="left"] { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal].in { opacity: 1; transform: none; }

.split-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-words .w > span { display: inline-block; transform: translateY(115%); transition: transform 1s var(--ease-expo); transition-delay: var(--wd, 0s); }
.split-words.in .w > span { transform: translateY(0); }

[data-plx] { will-change: transform; }

/* ---------- Galerie ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery .img-frame:nth-child(2) { transform: translateY(40px); }
.gallery .img-frame { aspect-ratio: 3/4; }

/* ---------- Checkliste ---------- */
.checklist li { display: flex; gap: 16px; padding: 13px 0; font-size: 1.02rem; align-items: flex-start; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: none; }
.checklist li::before { content: '◆'; color: var(--neon); text-shadow: 0 0 1px var(--ink); flex-shrink: 0; margin-top: 3px; font-size: 0.6rem; }
.on-dark .checklist li { color: var(--lav); border-color: var(--line-dark); }

/* ---------- Zeitstrahl ---------- */
.timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 20px 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line); transform: translateX(-50%); }
.timeline .tl-fill { position: absolute; left: 50%; top: 0; width: 2px; height: 0; background: var(--neon); transform: translateX(-50%); box-shadow: 0 0 10px rgba(248,244,26,0.7); transition: height 0.2s linear; }
.tl-item { position: relative; width: 50%; padding: 26px 54px 26px 0; text-align: right; }
.tl-item:nth-child(even) { margin-left: 50%; padding: 26px 0 26px 54px; text-align: left; }
.tl-item::before {
  content: ''; position: absolute; top: 38px; right: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--ink); z-index: 2;
  transition: background 0.4s, transform 0.4s var(--ease-out);
}
.tl-item:nth-child(even)::before { right: auto; left: -9px; }
.tl-item.in::before { background: var(--neon); transform: scale(1.15); }
.tl-item .tl-year { font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--ink); line-height: 1; }
.tl-item h3 { font-family: var(--sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; margin: 10px 0 8px; color: var(--ink); }
.tl-item p { font-size: 0.95rem; color: var(--soft); }
@media (max-width: 720px) {
  .timeline::before, .timeline .tl-fill { left: 12px; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; margin-left: 0; padding: 20px 0 20px 44px; text-align: left; }
  .tl-item::before, .tl-item:nth-child(even)::before { left: 4px; right: auto; }
}

/* ---------- Quiz-Teaser ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 900px; margin: 0 auto 50px; }
.tier { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 30px 16px; text-align: center; transition: transform 0.4s var(--ease-out), box-shadow 0.4s; }
.tier:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--shadow-md); }
.tier .t-emoji { font-size: 2.6rem; line-height: 1; display: block; margin-bottom: 12px; }
.tier .t-name { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink); }
.tier .t-desc { font-size: 0.78rem; color: var(--soft); margin-top: 6px; }
@media (max-width: 720px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Blog ---------- */
.article { max-width: 720px; margin: 0 auto; }
.article p { margin-bottom: 22px; color: #33384C; font-size: 1.05rem; line-height: 1.95; }
.article h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 52px 0 18px; }
.article .a-lead { font-size: 1.2rem; color: var(--soft); font-weight: 300; }
.article blockquote { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.5; color: var(--ink); border-left: 3px solid var(--neon); padding-left: 26px; margin: 40px 0; }
.blog-meta { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--soft); margin-bottom: 18px; }
.blog-card-img { aspect-ratio: 16/10; overflow: hidden; margin: -48px -40px 26px; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.card:hover .blog-card-img img { transform: scale(1.05); }

/* ---------- Kursformat-Box ---------- */
.format-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 900px; margin: 0 auto; }
.format-box > div { background: var(--card); padding: 26px 20px; text-align: center; }
.format-box .f-label { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--soft); margin-bottom: 8px; }
.format-box .f-value { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--ink); }

/* ---------- Legal ---------- */
.legal { max-width: 780px; margin: 0 auto; }
.legal h2 { font-size: 1.6rem; margin: 46px 0 14px; }
.legal p { margin-bottom: 14px; color: var(--soft); }

/* ---------- Back to top ---------- */
#toTop {
  position: fixed; right: 26px; bottom: 26px; z-index: 900;
  width: 52px; height: 52px; border: 1.5px solid var(--ink); background: rgba(250,249,245,0.85); cursor: pointer;
  color: var(--ink); font-size: 1.05rem;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: 0.45s var(--ease-out);
}
#toTop.show { opacity: 1; transform: none; pointer-events: auto; }
#toTop:hover { background: var(--ink); color: var(--neon); }

/* ---------- Custom Cursor ---------- */
@media (pointer: fine) {
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 3001; border-radius: 50%; }
  .cursor-dot { width: 7px; height: 7px; background: var(--ink); transform: translate(-50%, -50%); }
  .cursor-ring { width: 38px; height: 38px; border: 1.5px solid rgba(16, 16, 21, 0.4); transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, border-color 0.3s, background 0.3s; }
  .cursor-ring.hovering { width: 62px; height: 62px; background: rgba(239, 254, 30, 0.3); border-color: var(--ink); }
}

/* ---------- Cookie-Consent ---------- */
#consent {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(140%);
  z-index: 5000; width: min(680px, 94vw);
  background: var(--ink); color: var(--lav);
  padding: 22px 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  transition: transform 0.6s var(--ease-out);
  border: 1px solid rgba(208,212,235,0.15);
}
#consent.show { transform: translateX(-50%) translateY(0); }
#consent p { font-size: 0.82rem; line-height: 1.6; color: rgba(208,212,235,0.85); margin-bottom: 16px; }
#consent p a { color: var(--neon); text-decoration: underline; }
#consent .c-btns { display: flex; gap: 12px; flex-wrap: wrap; }
#consent .c-btns .btn { padding: 12px 22px; font-size: 0.64rem; }
.embed-consent {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--tint); border: 1px dashed rgba(16,16,21,0.3);
  padding: 44px 24px; text-align: center; min-height: 220px;
}
.embed-consent p { font-size: 0.85rem; color: var(--soft); max-width: 420px; }

/* ---------- Kontakt-Sidebar ---------- */
.side-dock {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 950; display: flex; flex-direction: column;
  background: var(--ink); box-shadow: var(--shadow-md);
}
.side-dock a {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  color: var(--lav); position: relative; transition: background 0.3s;
  border-bottom: 1px solid rgba(208,212,235,0.12);
}
.side-dock a:last-child { border-bottom: none; }
.side-dock a svg { width: 20px; height: 20px; fill: currentColor; transition: 0.3s; }
.side-dock a:hover { background: var(--neon); color: var(--ink); }
.side-dock a .dock-tip {
  position: absolute; right: 60px; top: 50%; transform: translateY(-50%) translateX(8px);
  background: var(--ink); color: var(--lav); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: 0.3s var(--ease-out);
}
.side-dock a:hover .dock-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 820px) {
  .side-dock { top: auto; bottom: 88px; right: 14px; transform: none; background: transparent; box-shadow: none; gap: 10px; }
  .side-dock a { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); border: none; box-shadow: var(--shadow-sm); }
  .side-dock a .dock-tip { display: none; }
  #toTop { bottom: 14px; right: 14px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  nav.desktop { display: none; }
  .burger { display: flex; }
  .hero-grid, .grid-2 { grid-template-columns: 1fr; }
  .hero-visual { max-width: 440px; margin: 0 auto; }
  .hero-badge { left: -8px; bottom: 20px; }
  .grid-2 > .order-swap { order: -1; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .img-frame:nth-child(2) { transform: none; }
  .gallery .img-frame { aspect-ratio: 4/3; }
  .book-badge { right: -10px; }
}
@media (max-width: 560px) {
  h1 { font-size: clamp(2rem, 10vw, 2.7rem); overflow-wrap: break-word; hyphens: auto; }
  h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); overflow-wrap: break-word; hyphens: auto; }
  .page-hero-img { min-height: 46vh; padding: 130px 0 50px; }
  .grid-3, .testi-grid, .steps, .stats { grid-template-columns: 1fr; }
  section { padding: 70px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .announce { font-size: 0.58rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  body::after { display: none; }
}

/* ============ LEVEL / PREIS-ARCHITEKTUR (V5) ============ */
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
.level{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid rgba(16,16,21,0.09);
  border-radius:4px;padding:34px 28px 30px;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.level:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(16,16,21,0.13);border-color:rgba(16,16,21,0.2)}
.level-no{font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);
  display:flex;align-items:center;gap:10px;margin-bottom:20px}
.level-no::before{content:"";width:26px;height:1px;background:var(--neon)}
.level h3{font-size:1.55rem;line-height:1.15;margin:0 0 6px}
.level .level-sub{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:20px}
.level-price{font-family:var(--serif);font-size:2.9rem;line-height:1;color:var(--ink);margin:0 0 4px;letter-spacing:-.01em}
.level-price small{font-family:var(--sans);font-size:.63rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);
  display:block;margin-top:13px}
.level-price .lp{position:relative;display:inline-block}
.level-free .level-price .lp{padding:0 10px;margin-left:-10px}
.level-free .level-price .lp::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:14px;background:var(--neon);z-index:-1}
.level-price.lp-sm{font-size:1.95rem;line-height:1.15}
.level-list{list-style:none;padding:0;margin:24px 0 0;flex:1}
.level-list li{position:relative;padding-left:20px;margin-bottom:11px;font-size:.94rem;line-height:1.5;color:var(--soft)}
.level-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--neon);border-radius:50%}
.level .btn{margin-top:26px;width:100%;justify-content:center}
.level-dark{background:var(--ink);border-color:var(--ink)}
.level-dark h3{color:#fff}.level-dark .level-price{color:var(--neon)}
.level-dark .level-no,.level-dark .level-sub,.level-dark .level-list li,.level-dark .level-price small{color:rgba(208,212,235,.7)}
.level-flag{position:absolute;top:-11px;right:20px;background:var(--neon);color:var(--ink);font-family:var(--sans);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:5px 12px;font-weight:600}
.level-dark .level-flag{background:var(--neon)}
@media(max-width:1080px){.level-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.level-grid{grid-template-columns:1fr}.level-price{font-size:2.5rem}}

/* Vergleichstabelle */
.cmp{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.92rem;background:var(--card)}
.cmp th,.cmp td{padding:17px 16px;text-align:left;border-bottom:1px solid rgba(16,16,21,0.08)}
.cmp thead th{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);font-weight:600;
  border-bottom:1px solid rgba(16,16,21,0.18)}
.cmp tbody th{font-family:var(--serif);font-size:1.12rem;font-weight:400;color:var(--ink);width:32%}
.cmp td{color:var(--soft)}
.cmp .cmp-price{font-family:var(--serif);font-size:1.3rem;color:var(--ink);white-space:nowrap}
.cmp .cmp-price.free{background:var(--neon);padding:2px 9px}
.cmp tbody tr:hover{background:rgba(233,226,222,0.35)}
.cmp-wrap{overflow-x:auto;border:1px solid rgba(16,16,21,0.09);border-radius:4px}
@media(max-width:720px){.cmp{min-width:640px}}

/* Verkaufs-CTA-Band für Unterseiten */
.sell-band{background:var(--tint);padding:60px 0}
.sell-inner{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.sell-inner h3{font-size:1.9rem;margin:0 0 6px;max-width:640px}
.sell-inner p{color:var(--soft);margin:0;max-width:600px}
.sell-mini{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.sell-mini a{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  border:1px solid rgba(16,16,21,0.2);padding:9px 15px;text-decoration:none;transition:.3s}
.sell-mini a:hover{background:var(--ink);color:var(--neon);border-color:var(--ink)}

/* Zweit-Button auf Foto-Heros / dunklen Flaechen: weiss & transparent */
.page-hero-img .btn-ghost, .hero-cover .btn-ghost, .section-ink .btn-ghost, .cta-photo .btn-ghost,
.page-hero-img .btn-outline, .hero-cover .btn-outline, .section-ink .btn-outline, .cta-photo .btn-outline,
.section-photo .glass .btn-outline, .cta-band .btn-outline, .cta-band .btn-ghost {
  background: rgba(255,255,255,0.14);
  border: 1px solid #fff;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.page-hero-img .btn-ghost:hover, .hero-cover .btn-ghost:hover, .section-ink .btn-ghost:hover, .cta-photo .btn-ghost:hover,
.page-hero-img .btn-outline:hover, .hero-cover .btn-outline:hover, .section-ink .btn-outline:hover, .cta-photo .btn-outline:hover,
.section-photo .glass .btn-outline:hover, .cta-band .btn-outline:hover, .cta-band .btn-ghost:hover {
  background: #fff; color: var(--ink); border-color: #fff; text-shadow: none;
}
/* helle Sektionen (Papier/Beige) behalten den dunklen Outline-Button */
.section-cream .btn-outline, .section-white .btn-outline, .section-tint .btn-outline,
.section-flieder .btn-outline, .sell-band .btn-outline, .level .btn-outline {
  background: transparent; border: 1px solid rgba(16,16,21,0.25); color: var(--ink);
  backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: none;
}
.section-cream .btn-outline:hover, .section-white .btn-outline:hover, .section-tint .btn-outline:hover,
.section-flieder .btn-outline:hover, .sell-band .btn-outline:hover, .level .btn-outline:hover {
  background: var(--ink); color: var(--neon); border-color: var(--ink);
}

/* Lesbarkeit auf dunklen Sektionen */
.section-ink { color: #E7E9F4; }
.section-ink p, .section-ink .lead, .cta-band p, .cta-band .lead { color: #D3D7E8; }
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: #fff; }
.section-ink .eyebrow, .cta-photo .eyebrow { color: var(--neon); }
.section-ink a:not(.btn) { color: #fff; }

/* ============ V7: HERO — Schrift nie vorm Gesicht ============ */
.page-hero-img .ph-bg img { object-position: 50% 16%; }
/* linke Haelfte (Textzone) leicht weichgezeichnet + abgedunkelt, Gesicht rechts bleibt scharf */
.page-hero-img .ph-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 38%, transparent 66%);
  mask-image: linear-gradient(100deg, #000 0%, #000 38%, transparent 66%);
}
.page-hero-img .ph-bg::after {
  background:
    linear-gradient(100deg, rgba(12,12,16,0.80) 0%, rgba(12,12,16,0.58) 38%, rgba(12,12,16,0.10) 68%, rgba(12,12,16,0.05) 100%),
    linear-gradient(180deg, rgba(12,12,16,0.35) 0%, rgba(12,12,16,0.12) 45%, rgba(12,12,16,0.72) 100%);
  z-index: 1;
}
.hero-cover .hero-bg::after {
  background:
    linear-gradient(100deg, rgba(12,12,16,0.78) 0%, rgba(12,12,16,0.55) 36%, rgba(12,12,16,0.12) 66%, rgba(12,12,16,0.06) 100%),
    linear-gradient(180deg, rgba(12,12,16,0.30) 0%, rgba(12,12,16,0.10) 40%, rgba(12,12,16,0.70) 100%);
}
@media(max-width:820px){
  .page-hero-img .ph-bg::before { -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 60%,transparent 92%); mask-image: linear-gradient(180deg,#000 0%,#000 60%,transparent 92%); }
  .page-hero-img .ph-bg::after { background: linear-gradient(180deg, rgba(12,12,16,0.72) 0%, rgba(12,12,16,0.45) 50%, rgba(12,12,16,0.82) 100%); }
}

/* ============ V7: NAV-DROPDOWN ============ */
.nav-drop { position: relative; }
.nav-drop > a::before { content: ''; position: absolute; left: -14px; right: -14px; top: -14px; bottom: -22px; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 320px; background: var(--card); border: 1px solid rgba(16,16,21,0.10);
  box-shadow: 0 24px 60px rgba(16,16,21,0.16); padding: 12px; border-radius: 4px;
  opacity: 0; visibility: hidden; transition: 0.32s var(--ease-out); z-index: 1200;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop-menu a {
  display: flex !important; align-items: baseline; justify-content: space-between; gap: 14px;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 400; letter-spacing: 0.01em;
  text-transform: none; padding: 11px 14px; border-radius: 3px; transition: background 0.25s, color 0.25s;
}
.nav-drop-menu a::after { display: none; }
.nav-drop-menu a:hover { background: var(--tint); }
.nav-drop-menu .nd-price { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--soft); white-space: nowrap; }
.nav-drop-menu a:hover .nd-price { color: var(--ink); }
.nav-drop-menu .nd-free .nd-price { background: var(--neon); color: var(--ink); padding: 2px 7px; font-weight: 600; }
.nav-drop-menu .nd-sep { height: 1px; background: rgba(16,16,21,0.09); margin: 8px 12px; }
.nav-drop-menu .nd-all { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.68rem; }
@media(max-width:1000px){ .nav-drop-menu { display: none; } }

/* Verfuegbarkeits-Status */
.avail { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin-top: 14px; }
.avail::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3BB273; flex: none; }
.avail.is-full::before { background: #C2452D; }
.avail.is-soon::before { background: var(--neon); border: 1px solid rgba(16,16,21,0.3); }
.level-dark .avail { color: rgba(208,212,235,0.8); }

/* Nachrichten-Screenshot-Wand (Testimonials) */
.msg-wall { columns: 4; column-gap: 18px; }
.msg-wall figure { break-inside: avoid; margin: 0 0 18px; border: 1px solid rgba(16,16,21,0.09);
  border-radius: 6px; overflow: hidden; background: var(--card); box-shadow: 0 8px 26px rgba(16,16,21,0.07); }
.msg-wall img { width: 100%; display: block; }
.msg-wall figcaption { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--soft); padding: 10px 14px; }
@media(max-width:1000px){ .msg-wall { columns: 2; } }
@media(max-width:600px){ .msg-wall { columns: 1; } }

/* ============ V8: SALESPAGE-BAUSTEINE ============ */
/* Angebots-Pakete */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1000px;margin:0 auto;align-items:start}
.offer{position:relative;background:var(--card);border:1px solid rgba(16,16,21,0.1);border-radius:4px;padding:38px 34px 34px}
.offer.is-hero{border:2px solid var(--neon);box-shadow:0 30px 70px rgba(16,16,21,0.12);transform:translateY(-8px)}
.offer .o-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--neon);color:var(--ink);font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:6px 16px;white-space:nowrap}
.offer h3{font-size:1.8rem;margin:0 0 4px}
.offer .o-sub{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:22px}
.offer .o-old{font-family:var(--sans);font-size:.95rem;color:var(--soft);text-decoration:line-through;margin-right:10px}
.offer .o-tag{font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;background:var(--tint);padding:3px 9px;color:var(--soft)}
.offer .o-price{font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--ink);margin:10px 0 6px}
.offer .o-rate{font-family:var(--sans);font-size:.9rem;color:var(--soft);margin-bottom:22px}
.offer .o-rate strong{color:var(--ink);font-weight:500}
.offer ul{list-style:none;padding:0;margin:0 0 26px;border-top:1px solid rgba(16,16,21,0.08);padding-top:22px}
.offer li{position:relative;padding-left:26px;margin-bottom:11px;font-size:.94rem;line-height:1.5;color:var(--soft)}
.offer li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--neon)}
.offer li::after{content:"";position:absolute;left:5px;top:9px;width:4px;height:7px;border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.offer li.o-hl{background:rgba(248,244,26,0.18);padding:10px 12px 10px 36px;margin-left:-12px;margin-right:-12px;color:var(--ink);font-weight:500}
.offer li.o-hl::before{left:12px;top:15px}.offer li.o-hl::after{left:17px;top:18px}
.offer .btn{width:100%;justify-content:center}
.guarantee{max-width:1000px;margin:34px auto 0;display:flex;gap:20px;align-items:flex-start;background:var(--card);border:1px solid rgba(16,16,21,0.1);padding:26px 30px;border-radius:4px}
.guarantee .g-icon{flex:none;width:46px;height:46px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
.guarantee .g-icon svg{width:22px;height:22px;stroke:var(--neon);fill:none;stroke-width:1.8}
.guarantee h4{margin:0 0 6px;font-size:1.2rem}.guarantee p{margin:0;color:var(--soft);font-size:.95rem}
@media(max-width:820px){.offer-grid{grid-template-columns:1fr}.offer.is-hero{transform:none}}

/* Saeulen-Akkordeon */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{background:var(--card);border:1px solid rgba(16,16,21,0.09);border-radius:4px;padding:30px 28px;position:relative;overflow:hidden;cursor:pointer;transition:.4s var(--ease-out)}
.pillar:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(16,16,21,0.1)}
.pillar .p-no{position:absolute;right:16px;top:6px;font-family:var(--serif);font-size:5rem;color:rgba(16,16,21,0.05);line-height:1}
.pillar .p-label{font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}
.pillar h3{font-size:1.4rem;margin:0 0 10px}
.pillar .p-short{color:var(--soft);font-size:.95rem;line-height:1.55}
.pillar .p-more{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-top:18px;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.pillar .p-more::after{content:"+";font-size:1rem;transition:.3s}
.pillar.open .p-more::after{transform:rotate(45deg)}
.pillar .p-long{max-height:0;overflow:hidden;transition:max-height .6s var(--ease-out)}
.pillar.open .p-long{max-height:1200px}
.pillar .p-long p{font-size:.93rem;line-height:1.65;color:var(--soft);margin:14px 0 0}
.pillar .p-long p.p-key{color:var(--ink);font-weight:500}
.pillar .p-long p.p-quote{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--ink);border-left:2px solid var(--neon);padding-left:14px}
@media(max-width:960px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pillars{grid-template-columns:1fr}}

/* 80/20 */
.split8020{display:grid;grid-template-columns:2fr 1fr;gap:18px;max-width:1000px;margin:40px auto 0}
.split8020 > div{padding:38px 34px;border-radius:4px}
.split8020 .s-dark{background:var(--ink);color:#fff}
.split8020 .s-light{background:var(--tint);color:var(--ink)}
.split8020 .s-pct{font-family:var(--serif);font-size:4rem;line-height:1}
.split8020 .s-dark .s-pct{color:var(--neon)}
.split8020 .s-name{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;margin:6px 0 20px;opacity:.8}
.split8020 ul{list-style:none;padding:0;margin:0;columns:2;column-gap:20px}
.split8020 .s-light ul{columns:1}
.split8020 li{padding:6px 0 6px 18px;position:relative;font-size:.95rem}
.split8020 li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:currentColor}
.split8020 .s-dark li::before{background:var(--neon)}
.result-band{max-width:1000px;margin:20px auto 0;background:rgba(248,244,26,0.16);border-left:3px solid var(--neon);padding:20px 26px;font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
@media(max-width:760px){.split8020{grid-template-columns:1fr}.split8020 ul{columns:1}}

/* Skills-Liste */
.skills{max-width:760px}
.skill{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid rgba(16,16,21,0.08)}
.skill .sk-no{font-family:var(--serif);font-size:2.4rem;color:var(--ink);line-height:1;opacity:.35}
.skill h4{margin:0 0 4px;font-size:1.2rem}.skill p{margin:0;color:var(--soft);font-size:.95rem}

/* Video-Testimonials (Click-to-load, Consent) */
.vt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vt{position:relative;aspect-ratio:4/5;background:var(--ink);border-radius:4px;overflow:hidden;cursor:pointer}
.vt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.vt:hover img{transform:scale(1.04)}
.vt .vt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vt .vt-play span{width:72px;height:72px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.vt .vt-play span::after{content:"";border-left:20px solid var(--ink);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.vt .vt-cap{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);color:#fff}
.vt .vt-cap strong{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:400}
.vt .vt-cap small{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.vt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:820px){.vt-grid{grid-template-columns:1fr}.vt{aspect-ratio:16/10}}

/* Pain-Liste */
.pain{list-style:none;padding:0;margin:0;max-width:820px}
.pain li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid rgba(16,16,21,0.08);font-size:1.02rem;line-height:1.55;color:var(--ink)}
.pain li::before{content:"";position:absolute;left:0;top:23px;width:9px;height:9px;border-radius:50%;background:var(--neon);border:1px solid rgba(16,16,21,.3)}

/* Opt-in Formular */
.optin{max-width:560px;margin:0 auto;background:var(--card);border:1px solid rgba(16,16,21,0.1);border-radius:4px;padding:40px 38px;box-shadow:0 26px 60px rgba(16,16,21,0.1)}
.optin h3{font-size:1.9rem;margin:0 0 8px;text-align:center}
.optin p{color:var(--soft);text-align:center;margin:0 0 26px;font-size:.98rem}
.optin label{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin:0 0 6px}
.optin input[type=text],.optin input[type=email]{width:100%;font-family:var(--sans);font-size:1rem;padding:15px 16px;border:1px solid rgba(16,16,21,0.2);border-radius:3px;background:#fff;margin-bottom:16px;outline:none;transition:border .3s}
.optin input:focus{border-color:var(--ink)}
.optin .btn{width:100%;justify-content:center;margin-top:6px}
.optin .o-note{font-size:.78rem;margin:14px 0 0;color:var(--soft)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ============ WORKSHOP-BANNER ============ */
.ws-banner{background:var(--ink);color:#fff;padding:44px 0;position:relative;overflow:hidden}
.ws-banner::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(248,244,26,.22),transparent 65%)}
.ws-inner{display:grid;grid-template-columns:auto 1fr auto;gap:38px;align-items:center;position:relative}
.ws-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:150px;padding:18px 22px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04)}
.ws-date .ws-d{font-family:var(--serif);font-size:4.2rem;line-height:.9;color:var(--neon)}
.ws-date .ws-m{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;margin-top:10px;color:#E7E9F4;white-space:nowrap}
.ws-text h3{color:#fff;font-size:clamp(1.5rem,2.6vw,2.2rem);margin:6px 0 10px;line-height:1.15}
.ws-text p{color:#C9CDE2;margin:0;max-width:640px;font-size:.98rem}
.ws-text .eyebrow{color:var(--neon)}
@media(max-width:900px){.ws-inner{grid-template-columns:1fr;text-align:center}.ws-date{margin:0 auto}.ws-text .eyebrow{justify-content:center}.ws-text p{margin:0 auto}}

/* ============ LESBARKEIT (12.09.) ============ */
.glass, .glass p, .glass .lead, .glass h2, .glass h3 { color: var(--ink); }
.glass { background: rgba(255,255,255,0.9); }
.on-dark .glass .gold-text, .section-photo .glass .gold-text { color: var(--ink); text-transform: none; text-shadow: none; font-style: italic; }
.glass .eyebrow { color: var(--ink); }
/* dunkle Karten / Kaesten: heller Fliesstext */
.card-dark p, .level-dark .level-list li, .split8020 .s-dark li, .split8020 .s-dark .s-name { color: #E7E9F4; }
.card-dark .tag:not([style]) { background: rgba(255,255,255,.12); color: #fff; }
.section-ink .eyebrow, .cta-band .eyebrow { color: var(--neon); }
.section-ink p, .section-ink .lead, .cta-band p { color: #D8DBEA; }
/* Lead-Texte kraeftiger */
.lead { font-weight: 400; }
p { font-weight: 400; }
/* Pain-/Check-Listen und Karten-Text: nicht zu hell */
.pain li, .checklist li, .card p, .pillar .p-short, .pillar .p-long p, .skill p, .level-list li { color: var(--soft); }

/* ============ MOBILE-OPTIMIERUNG (12.09.) ============ */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Mobile-Menü: scrollbar, strukturiert, mit Preisen */
.mobile-menu { justify-content: flex-start; align-items: stretch; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 104px 0 40px; gap: 0; }
.mobile-menu .mm-inner { width: 100%; max-width: 420px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; }
.mobile-menu a { opacity: 0; transform: translateY(18px); transition: 0.45s var(--ease-out); }
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu a.mm-main { font-family: var(--serif); font-style: italic; font-size: 1.85rem; line-height: 1.2; color: var(--ink); padding: 11px 0; border-bottom: 1px solid rgba(16,16,21,0.08); text-align: left; max-width: 100%; word-break: normal; }
.mobile-menu .mm-sub { display: flex; flex-direction: column; padding: 8px 0 12px 14px; border-left: 2px solid var(--neon); margin: 8px 0 4px; }
.mobile-menu .mm-sub a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--sans); font-style: normal; font-size: 0.98rem; font-weight: 400; color: var(--ink); padding: 8px 0; }
.mobile-menu .mm-sub a em { font-style: normal; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.mobile-menu .mm-sub a em.mm-free { background: var(--neon); color: var(--ink); padding: 2px 8px; font-weight: 600; }
.mobile-menu a.mm-cta { margin-top: 26px; justify-content: center; width: 100%; font-size: 0.7rem; }
.mobile-menu .mm-foot { display: flex; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(16,16,21,0.08); }
.mobile-menu .mm-foot a { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.mobile-menu.open .mm-foot a { opacity: 1; }
header { z-index: 1102; }
.burger { position: relative; z-index: 1103; }

@media (max-width: 820px) {
  /* Announce-Bar kompakt, einzeilig */
  .announce { font-size: 0.56rem; letter-spacing: 0.1em; padding: 9px 40px 9px 14px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: center; }
  .announce .announce-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
  /* Typewriter-Zeile mobil ausblenden (kollidiert mit Headline) */
  .type-line { display: none; }
  /* Headlines: kleiner, keine Silbentrennung im Akzentwort */
  .hero-cover h1 { font-size: clamp(2.1rem, 9.4vw, 2.9rem); hyphens: manual; -webkit-hyphens: manual; }
  .page-hero-img h1 { font-size: clamp(2rem, 9vw, 2.8rem); hyphens: manual; -webkit-hyphens: manual; }
  h1 .gold-text { white-space: nowrap; }
  h2 { hyphens: manual; -webkit-hyphens: manual; }
  .hero-cover .lead, .page-hero-img .lead { font-size: 1rem; }
  .hero-ctas, .hero-cover .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn { justify-content: center; }
  .eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; overflow-wrap: anywhere; }
  /* Kontakt-Dock: kompakt unten links, Scroll-Top ausblenden */
  .side-dock { left: 12px; right: auto; bottom: 14px; flex-direction: row; gap: 8px; }
  .side-dock a { width: 40px; height: 40px; }
  .side-dock a svg { width: 17px; height: 17px; }
  #toTop { display: none !important; }
  /* Cookie-Hinweis: passt in den Viewport, liegt über dem Dock */
  #consent { left: 12px; right: 12px; bottom: 12px; width: auto; transform: translateY(140%); padding: 16px 18px; z-index: 6000; }
  #consent.show { transform: none; }
  #consent p { font-size: 0.76rem; margin-bottom: 12px; }
  #consent .c-btns .btn { flex: 1; justify-content: center; padding: 11px 14px; }
  /* Workshop-Banner */
  .ws-banner { padding: 34px 0; }
  .ws-date { min-width: 0; padding: 12px 18px; flex-direction: row; gap: 12px; align-items: baseline; }
  .ws-date .ws-d { font-size: 2.6rem; }
  .ws-date .ws-m { margin: 0; }
  .ws-text h3 { font-size: 1.45rem; }
  /* Level-Karten / Tabellen / Angebote */
  .level { padding: 28px 22px 26px; }
  .level-price { font-size: 2.4rem; }
  .cmp-wrap { margin: 0 -24px; border-left: 0; border-right: 0; border-radius: 0; }
  .format-box > div { padding: 20px 14px; }
  .format-box .f-value { font-size: 1.15rem; }
  .split8020 > div { padding: 28px 22px; }
  .pillar { padding: 26px 22px; }
  .msg-wall { columns: 2; column-gap: 10px; }
  .msg-wall figure { margin-bottom: 10px; }
  .sell-inner { flex-direction: column; align-items: stretch; }
  .sell-inner .btn { justify-content: center; }
  .nav-drop-menu { display: none; }
  /* Sections etwas enger */
  section { padding-top: 64px; padding-bottom: 64px; }
  .container { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 400px) {
  .hero-cover h1 { font-size: 2rem; }
  .page-hero-img h1 { font-size: 1.9rem; }
  .msg-wall { columns: 1; }
}

/* ============ MOBILE HERO: Bild oben, Text darunter (Schrift nie vorm Gesicht) ============ */
@media (max-width: 820px) {
  .hero-cover { display: block; min-height: 0; padding: 0; background: var(--ink); }
  .hero-cover .hero-bg { position: relative; inset: auto; height: 62vh; min-height: 380px; }
  .hero-cover .hero-bg img { object-position: 62% 8%; }
  .hero-cover .hero-bg::after { background: linear-gradient(180deg, rgba(12,12,16,0.15) 0%, rgba(12,12,16,0) 45%, rgba(12,12,16,0.85) 100%); }
  .hero-cover .container { padding-top: 6px; padding-bottom: 34px; margin-top: -70px; }
  .hero-cover .hero-copy { max-width: 100%; }
  .hero-cover h1 { margin-bottom: 18px; }
  .hero-cover .lead { margin: 0 0 24px; }
  .hero-cover .hero-ctas { margin-top: 0 !important; }
  .hero-cover .hero-badge { position: static; display: inline-block; margin: 22px 0 0; }
  .mobile-menu a.mm-cta { font-family: var(--sans); font-style: normal; }
  /* Unterseiten-Heros: Text unten, Bild oben ausgerichtet */
  .page-hero-img { min-height: 0; padding: 150px 0 40px; }
  .page-hero-img .ph-bg img { object-position: 60% 10%; }
}