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

:root {
  --cream:        #FDFAF5;
  --cream-dark:   #F5EDD9;
  --gold:         #B8965A;
  --gold-light:   #D4AE78;
  --gold-pale:    #EDE0C4;
  --forest:       #1E4040;
  --forest-mid:   #2A5454;
  --charcoal:     #2C2826;
  --charcoal-mid: #4A453F;
  --warm-gray:    #8C857C;
  --serif: 'Jost', sans-serif;
  --sans:  'DM Sans', sans-serif;
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h: 68px;     /* Höhe der fixen Navigation */
  --sec-y: 150px;    /* Innenabstand oben/unten jeder Sektion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: auto; }
html, body { overflow-x: clip; }   /* nichts darf die Seite seitlich verbreitern (clip statt hidden: sticky bleibt intakt) */
/* Lenis (Smooth Scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.7;
}

/* ── UTILS ── */
h3, h4, h5, h6 { font-weight: 400; }
.label {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 400;
  display: flex; align-items: center; gap: 14px;
}
.label::before { content:''; width:32px; height:1px; background:var(--gold); flex-shrink:0; }
.h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 3.5vw, 50px);
  font-weight: 400; line-height: 1.15;
  color: var(--charcoal); letter-spacing: -0.02em;
}
.h2 em { font-style: normal; font-weight: 400; color: var(--gold); }

/* ── NAV — chiaro ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  background: rgba(253,250,245,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(184,150,90,0.15);
  transition: box-shadow 0.3s;
}
.nav-wrap {
  max-width: 1400px; margin: 0 auto;
  height: 68px; padding: 0 48px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-right {
  display: flex; align-items: center; gap: 20px; justify-content: flex-end;
}
.nav-logo {
  text-decoration: none;
  display: flex; align-items: center;
  flex-shrink: 0;
}
.nav-logo img { height: 40px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; justify-content: center; }
.nav-links a {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal-mid); text-decoration: none;
  transition: color 0.25s; position: relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 0.25s;
}
.nav-links a:hover { color: var(--charcoal); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-tel {
  font-family: 'Inter', sans-serif; font-style: normal;
  color: var(--charcoal-mid); font-size: 14px; text-decoration: none;
  font-weight: 400; letter-spacing: 0.01em;
  transition: color 0.25s;
}
.nav-tel:hover { color: var(--gold); }
.nav-book {
  background: var(--forest); color: #fff;
  padding: 10px 22px; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; border-radius: 1px;
  transition: background 0.25s;
}
.nav-book:hover { background: var(--forest-mid); }

/* ── HAMBURGER + MOBILE MENU ── */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.nav-toggle span {
  display: block; width: 26px; height: 1.5px; background: var(--charcoal);
  transition: transform 0.45s var(--ease-out), width 0.3s var(--ease);
}
.nav-toggle span:last-child { width: 18px; margin-left: 8px; }
.menu-open .nav-toggle span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .nav-toggle span:last-child  { width: 26px; margin-left: 0; transform: translateY(-4.25px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 190;          /* unter der Navigation: Logo und X bleiben sichtbar */
  background: var(--cream);
  padding: calc(var(--nav-h) + 48px) 24px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-out), visibility 0s 0.7s;
}
.menu-open .mobile-menu {
  clip-path: inset(0 0 0 0); visibility: visible;
  transition: clip-path 0.7s var(--ease-out), visibility 0s;
}
.menu-open, .menu-open body { overflow: hidden; }
.mm-links { list-style: none; }
.mm-links li { overflow: hidden; border-bottom: 1px solid rgba(184,150,90,0.18); }
.mm-links a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0;
  font-family: var(--serif); font-size: clamp(34px, 9vw, 52px); font-weight: 400;
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--charcoal); text-decoration: none;
  transform: translateY(105%);
  transition: transform 0.8s var(--ease-out), color 0.25s;
}
.mm-links a:active, .mm-links a:hover { color: var(--gold); }
.mm-num { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; color: var(--gold); }
.menu-open .mm-links a { transform: none; }
.menu-open .mm-links li:nth-child(1) a { transition-delay: 0.18s; }
.menu-open .mm-links li:nth-child(2) a { transition-delay: 0.25s; }
.menu-open .mm-links li:nth-child(3) a { transition-delay: 0.32s; }
.menu-open .mm-links li:nth-child(4) a { transition-delay: 0.39s; }
.mm-foot {
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.menu-open .mm-foot { opacity: 1; transform: none; transition-delay: 0.45s; }
.mm-tel {
  font-size: 22px; color: var(--charcoal); text-decoration: none; letter-spacing: 0.01em;
}
.mm-tel::before { content: 'Ruft uns an'; display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.mm-book { justify-content: center; padding: 18px 34px; }

/* ── HERO — chiaro, split ── */
.hero {
  min-height: 100vh; min-height: 100svh;
  padding-top: var(--nav-h);
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  /* linker Rand bündig mit dem Header-Container (max 1400px, 48px Innenabstand) */
  padding: 80px 60px 80px max(48px, calc((100vw - 1400px) / 2 + 48px));
  background: var(--cream);
}
.hero-eyebrow {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
  animation: fadeUp 0.8s 0.3s var(--ease) both; font-weight: 400;
}
.hero-eyebrow::before {
  content:''; width:32px; height:1px; background:var(--gold);
  transform-origin:left; animation: lineGrow 0.9s 0.5s var(--ease) both;
}
.hero-h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400; line-height: 1.1;
  color: var(--charcoal); margin-bottom: 28px;
  letter-spacing: -0.02em;
}
.hero-h1 .line { display:block; overflow:hidden; padding-bottom:0.12em; margin-bottom:-0.12em; }
.hero-h1 .line > span { display:block; animation: lineUp 1s var(--ease) both; }
.hero-h1 .line:nth-child(1) > span { animation-delay: 0.45s; }
.hero-h1 .line:nth-child(2) > span { animation-delay: 0.6s; }
.hero-h1 em { font-style: normal; font-weight: 400; color: var(--gold); }
.hero-sub {
  font-size: 17px; color: var(--charcoal-mid);
  font-weight: 400; line-height: 1.85;
  max-width: 400px; margin-bottom: 44px;
  animation: fadeUp 0.9s 0.85s var(--ease) both;
}
.hero-ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  animation: fadeUp 0.9s 1s var(--ease) both;
}
.btn-forest {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--forest); color: #fff;
  padding: 15px 34px; font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; border-radius: 1px;
  transition: background 0.25s;
}
.btn-forest:hover { background: var(--forest-mid); }
.btn-ghost-dark {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--charcoal-mid); color: var(--charcoal);
  padding: 14px 32px; font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; border-radius: 1px; background: transparent;
  transition: border-color 0.25s, color 0.25s;
}
.btn-ghost-dark:hover { border-color: var(--forest); color: var(--forest); }
.hero-trust {
  margin-top: 52px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  animation: fadeUp 0.9s 1.15s var(--ease) both;
}
.trust-stars { color: var(--gold); font-size: 16px; letter-spacing: 2px; animation: starsIn 1s 1.5s var(--ease) both; }
.trust-text { font-size: 14px; color: var(--charcoal-mid); }
.trust-text strong { color: var(--charcoal); font-weight: 500; }

.hero-right {
  position: relative; overflow: hidden;
  background: var(--gold-pale);
  animation: clipIn 1.5s 0.1s var(--ease) both;
}
.hero-right video {
  position: absolute; inset: 0;      /* das Hochformat-Video bestimmt nicht die Höhe der Hero */
  width: 100%; height: 100%; object-fit: cover;
  object-position: center center;
  display: block;
  scale: 1.12;                       /* Reserve für den Parallax (translate via JS) */
  transition: transform 0.8s var(--ease);
  animation: kenBurns 2.2s var(--ease) backwards;
  will-change: translate;
}
.hero-right:hover video { transform: scale(1.03); }

/* ── STRIP — Endlos-Loop ── */
.strip {
  padding: var(--sec-y) 0;
  overflow: hidden;
}
.strip + section .wer-section { padding-top: 0; }   /* Strip sitzt mittig: 150px oben wie unten */
.strip-track { display:flex; width:max-content; height:52px; align-items:center; }
.strip-group {
  display:flex; align-items:center; flex-shrink:0;
  animation: marquee 38s linear infinite;
}
.strip-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal-mid); white-space: nowrap; padding: 0 28px;
  font-weight: 400;
}
.strip-item span { color: var(--gold); }
.strip-sep { color: rgba(184,150,90,0.5); font-size: 16px; flex-shrink:0; }

/* ── WER WIR SIND ── */
.wer-section {
  padding: var(--sec-y) 80px;
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: center;
}
.wer-img-wrap { position: relative; }
.wer-img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  background: var(--gold-pale);
}
.img-reveal .wer-img {
  clip-path: inset(100% 0 0 0); transform: scale(1.18);
  transition: clip-path 1.3s var(--ease), transform 1.8s var(--ease);
}
.img-reveal.visible .wer-img { clip-path: inset(0); transform: scale(1); }
.wer-badge {
  position: absolute; top: -20px; right: -20px;
  width: 110px; height: 110px; background: var(--gold); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(184,150,90,0.35);
  transform: scale(0); transition: transform 0.9s 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.img-reveal.visible .wer-badge { transform: scale(1); }
.wer-badge::before {
  content:''; position:absolute; inset:-9px; border-radius:50%;
  border:1px dashed var(--gold); animation: spin 24s linear infinite;
}
.wer-badge strong { font-family:var(--sans); font-size:28px; font-weight:400; color:#fff; line-height:1; }
.wer-badge > span { font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.8); margin-top:4px; font-family:var(--sans); }
.wer-content { padding: 0; }
.wer-content .label { margin-bottom: 24px; }
.wer-content .h2 { margin-bottom: 32px; }
.wer-text {
  font-size: 17px; color: var(--charcoal-mid); line-height: 1.9;
  font-weight: 400; margin-bottom: 16px;
}
.wer-text strong { color: var(--charcoal); font-weight: 500; }
.wer-values {
  margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px;
}
.wer-val { display:flex; align-items:center; gap:16px; }
.wer-icon {
  width:52px; height:52px; flex-shrink:0; border-radius:50%;
  background: var(--gold-pale); color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  transition: background 0.35s, color 0.35s, transform 0.35s var(--ease);
}
.wer-icon .ph { width:26px; height:26px; }
.wer-val.visible .wer-icon { animation: iconPop 0.8s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.wer-val:hover .wer-icon { background: var(--gold); color:#fff; transform: translateY(-3px) rotate(-6deg); }
.wer-val h4 { font-family:var(--sans); font-size:19px; font-weight:400; color:var(--charcoal); margin-bottom:0; line-height:1.3; letter-spacing:-0.01em; }

/* ── PRODOTTI ── */
.prodotti-section {
  padding: var(--sec-y) 80px;
  background: #fff;
}
.prodotti-header {
  text-align: center; max-width: 540px; margin: 0 auto 56px;
}
.prodotti-header .label { justify-content:center; margin-bottom:20px; }
.prodotti-header .label::before { display:none; }
.prodotti-grid {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.prod-card { display:block; text-decoration:none; }
.prod-media {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4; background: var(--gold-pale);
}
.prod-media img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 1s var(--ease);
}
.prod-card:hover .prod-media img { transform: scale(1.07); }
[data-inner] { scale: 1.18; will-change: translate; }   /* Reserve für den Bild-Parallax */
.prod-cat {
  margin-top: 22px;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold);
}
.prod-name {
  font-family:var(--sans); font-size:24px; font-weight:400;
  color:var(--charcoal); letter-spacing:-0.01em; margin-top:6px;
}
.prod-name span {                 /* Unterstrich wächst beim Hover von links */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.5s var(--ease);
}
.prod-card:hover .prod-name span { background-size: 100% 1px; }

/* ── VIDEO ── */
.video-section { padding: 0; text-align: center; background: #fff; }   /* unten bündig: das Video stößt direkt an die Steps */
.video-sticky { display: flex; flex-direction: column; }
.video-head { max-width: 1200px; margin: 0 auto 56px; padding: 0 80px; }
.video-section .label { justify-content:center; margin-bottom:20px; }
.video-section .label::before { display:none; }
.video-section .h2 { margin-bottom: 0; }
.video-wrap {
  position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: var(--charcoal); cursor: pointer;
  transform-origin: center center;
}
.video-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.video-wrap::after {              /* Schleier, damit der Play-Button lesbar bleibt */
  content:''; position:absolute; inset:0; background: rgba(28,24,22,0.3);
  transition: background 0.4s;
}
.video-wrap:hover::after { background: rgba(28,24,22,0.18); }
.video-wrap.is-playing::after, .video-wrap.is-playing .video-play { display:none; }
.video-play { position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.play-circle {
  position: relative;
  width:92px; height:92px; border-radius:50%;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center;
  transition: background 0.3s, border-color 0.3s;
}
.play-circle::before {
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.5);
  animation: playPulse 2.8s var(--ease) infinite;
}
.video-wrap:hover .play-circle { background:var(--gold); border-color:var(--gold); }
.play-circle svg { width:24px; height:24px; fill:#fff; margin-left:5px; }

/* Desktop: Bühne mit Scrollweg — das Bild bleibt stehen und wächst auf volle Breite */
@media (min-width:1101px) and (min-height:620px) {
  .video-stage { height: 185vh; }
  .video-sticky {
    position: sticky; top: calc(var(--nav-h) + 32px);
    height: calc(100vh - var(--nav-h) - 32px);
    flex-direction: row; align-items: flex-end;   /* in voller Größe liegt das Bild unten bündig */
  }
  .video-head {          /* liegt über der Bühne und blendet aus, während das Bild wächst */
    position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 3;
    opacity: calc(1 - var(--vp, 0) * 1.9);
    transform: translateY(calc(var(--vp, 0) * -50px));
  }
  .video-wrap {
    aspect-ratio: auto;
    height: calc(100% - 39px);        /* 39px Luft oben, unten bündig */
    transform: scale(0.32);
    transform-origin: center top;      /* wächst von der Oberkante unter der Überschrift nach unten */
    will-change: transform;
  }
}

/* ── SO EINFACH ── */
.process-section {
  padding: var(--sec-y) 80px;
  background: var(--cream);
  text-align: left;
}
.process-header { max-width:1200px; margin:0 auto 64px; padding:0; }
.process-header .label { margin-bottom:20px; }
.process-header .h2 { }
.process-steps {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: rgba(184,150,90,0.15);
}
/* Fortschrittslinie: wird beim Scrollen von links nach rechts gefüllt (main.js) */
.process-line {
  position:absolute; top:-1px; left:0; height:3px; width:0; z-index:3;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  pointer-events:none;
}
.step {
  position: relative;
  background: #fff; padding: 44px 32px;
}
.process-steps .step {
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), background 0.6s;
}
.step::before {                       /* Marker auf der Linie */
  content:''; position:absolute; top:-6px; left:32px; z-index:4;
  width:11px; height:11px; border-radius:50%;
  background: #fff; border:1.5px solid var(--gold-pale);
  transition: background 0.4s, border-color 0.4s, transform 0.4s var(--ease), box-shadow 0.4s;
}
.step.active::before {
  background: var(--gold); border-color: var(--gold);
  transform: scale(1.3); box-shadow: 0 0 0 5px rgba(184,150,90,0.18);
}
.step:hover { background: var(--cream-dark); }
.step-num {
  font-family:var(--serif); font-size:56px; font-weight:300;
  color:var(--gold-pale); line-height:1;
  display:block; margin-bottom:20px;
  transition: color 0.6s, transform 0.6s var(--ease);
}
.step.active .step-num { color: var(--gold); transform: translateY(-4px); }
.step-title { font-family:var(--sans); font-size:20px; font-weight:400; color:var(--charcoal); margin-bottom:12px; letter-spacing:-0.01em; transition: color 0.5s; }
.step.active .step-title { color: var(--forest); }
.step-text { font-size:15px; color:var(--charcoal-mid); line-height:1.7; font-weight:400; }

.process-runway { display: none; }
/* Desktop: der Block bleibt stehen (sticky), der Scrollweg darunter blendet die Steps nacheinander ein (main.js).
   Der Block ist nur so hoch wie sein Inhalt — so entsteht unten kein toter Raum. */
@media (min-width:1101px) and (min-height:620px) {
  .process-pin { position: sticky; top: var(--pin-top, 140px); }
  .process-runway { display: block; height: 170vh; }
  .process-steps { background: transparent; }
  .process-steps .step { opacity:0; transform: translateY(40px); }
  .process-steps .step.active { opacity:1; transform:none; }
  .process-line { transition: width 0.12s linear; }
}

/* ── TESTIMONIALS ── */
.testi-section {
  padding: var(--sec-y) 80px;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--forest);
}
.testi-bg { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.testi-bg img { width:100%; height:100%; object-fit:cover; display:block; scale:1.35; }
.testi-section::before {          /* dunkler Schleier, damit die Schrift trägt */
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(135deg, rgba(30,64,64,0.84) 0%, rgba(22,50,50,0.78) 50%, rgba(16,34,34,0.88) 100%);
}
.testi-head .label { color: var(--gold-light); }
.testi-head .h2 { color:#fff; }
.testi-head .h2 em { color: var(--gold-light); }
.testi-head { text-align:center; max-width:480px; margin:0 auto 56px; }
.testi-head .label { justify-content:center; margin-bottom:20px; }
.testi-head .label::before { display:none; }
.testi-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi-card {
  background:#fff; padding:36px 32px;
  border-bottom:3px solid transparent;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  transition: border-color 0.3s, transform 0.3s;
}
.testi-card:hover { border-color:var(--gold); transform:translateY(-4px); }
.testi-stars { color:var(--gold); font-size:16px; letter-spacing:3px; margin-bottom:20px; }
.testi-q {
  font-family:var(--sans); font-style:normal;
  font-size:18px; color:var(--charcoal); line-height:1.7;
  font-weight:400; margin-bottom:28px; padding-left:20px; position:relative;
}
.testi-q::before {
  content:'\201C'; position:absolute; left:-4px; top:-8px;
  font-size:60px; color:var(--gold-pale); line-height:1; font-style:normal;
}
.testi-author { display:flex; align-items:center; gap:14px; }
.testi-av {
  width:42px; height:42px; border-radius:50%; background:var(--cream-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:17px; color:var(--gold); flex-shrink:0;
}
.testi-name { font-size:16px; font-weight:500; color:var(--charcoal); }
.testi-when { font-size:14px; color:var(--charcoal-mid); }

/* ── INSTAGRAM ── */
.insta-section { padding: var(--sec-y) 0 0; }
.insta-head {
  max-width:1300px; margin:0 auto 32px; padding:0 80px;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.insta-head .h2 { font-size:36px; }
.insta-follow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--warm-gray); text-decoration:none;
  border-bottom:1px solid var(--gold-pale); padding-bottom:2px;
  transition: color 0.25s, border-color 0.25s;
}
.insta-follow:hover { color:var(--forest); border-color:var(--forest); }
.insta-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:3px; }
.insta-cell {
  aspect-ratio:1; overflow:hidden; position:relative;
  background:var(--gold-pale); cursor:pointer;
}
.insta-cell img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s var(--ease), opacity 0.4s; }
.insta-cell:hover img { transform:scale(1.07); opacity:0.72; }
.insta-over {
  position:absolute; inset:0; opacity:0; transition:opacity 0.3s;
  background:rgba(30,64,64,0.4);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px;
}
.insta-cell:hover .insta-over { opacity:1; }

/* ── CTA BANNER ── */
.cta-section {
  padding: var(--sec-y) 80px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  max-width: 1300px; margin: 0 auto;
}
.cta-left .label { margin-bottom:24px; }
.cta-left .h2 { margin-bottom:40px; }
.cta-left > p { font-size:17px; color:var(--charcoal-mid); font-weight:400; line-height:1.85; margin-bottom:36px; }
.cta-info { display:flex; flex-direction:column; gap:14px; }
.cta-row { display:flex; align-items:flex-start; gap:14px; }
.cta-icon { color:var(--gold); font-size:18px; margin-top:2px; flex-shrink:0; }
.cta-row strong { display:block; font-size:15px; font-weight:500; color:var(--charcoal); }
.cta-row span { font-size:14px; color:var(--charcoal-mid); font-weight:400; }
/* Termin-Karte weiß */
.cta-card {
  background: #fff;
  box-shadow: 0 30px 70px rgba(44,40,38,0.08);
  padding:52px 44px;
  position:relative; overflow:hidden;
}
.cta-card h3 { font-family:var(--sans); font-size:26px; font-weight:400; color:var(--charcoal); margin-bottom:14px; line-height:1.2; letter-spacing:-0.01em; }
.cta-card > p { font-size:15px; color:var(--charcoal-mid); line-height:1.75; margin-bottom:32px; font-weight:400; }
.cta-btns { display:flex; flex-direction:column; gap:12px; }
.btn-gold-solid {
  display:block; text-align:center;
  background:var(--gold); color:#fff;
  padding:15px 32px; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; text-decoration:none; border-radius:1px;
  transition:background 0.25s;
}
.btn-gold-solid:hover { background:var(--gold-light); }
.btn-line-light {
  display:block; text-align:center;
  background:var(--cream); color:var(--charcoal);
  border:1px solid var(--cream);
  padding:14px 32px; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; text-decoration:none; border-radius:1px; font-weight:500;
  transition:background 0.25s, color 0.25s;
}
.btn-line-light:hover { background:var(--gold-pale); border-color:var(--gold-pale); color:var(--charcoal); }
.cta-card .btn-line-light { background: transparent; border-color: rgba(44,40,38,0.25); }
.cta-card .btn-line-light:hover { background: var(--cream); border-color: var(--charcoal); }
.cta-mini {
  margin-top:28px; padding-top:24px;
  border-top:1px solid rgba(44,40,38,0.1);
}
.cta-mini-stars { color:var(--gold); font-size:15px; letter-spacing:2px; margin-bottom:10px; }
.cta-mini-q { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--charcoal-mid); line-height:1.6; }

/* ── FOOTER — verde scuro ── */
footer {
  background: var(--forest);
  padding: 100px 80px 36px;
  border-top: 1px solid rgba(184,150,90,0.15);
}
.footer-main {
  max-width:1300px; margin:0 auto 72px;
  /* Logo links · zwei Linkspalten und Kontakt bündig am rechten Rand */
  display:grid; grid-template-columns: 1fr auto auto auto; gap:60px 96px; align-items:start;
}
.footer-brand { display:block; }
.footer-brand img { width:100%; max-width:360px; height:auto; display:block; }
.footer-col .footer-col-title { margin-bottom:18px; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:10px; }
.footer-col a { font-size:15px; color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.25s; }
.footer-col a:hover { color:#fff; }
.footer-contact .footer-col-title { margin-bottom:10px; }
.footer-contact .footer-addr { margin-bottom:28px; }
.footer-addr { font-size:17px; color:rgba(255,255,255,0.8); line-height:1.7; font-style:normal; font-weight:400; }
.footer-col-title { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-light); font-weight:500; }
.footer-tel { font-size:17px; color:rgba(255,255,255,0.8); text-decoration:none; transition:color 0.25s; }
.footer-tel:hover { color:#fff; }
.footer-bottom {
  max-width:1300px; margin:0 auto;
  padding-top:24px; border-top:1px solid rgba(255,255,255,0.06);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-copy { font-size:13px; color:rgba(255,255,255,0.4); }
.footer-credit { color: var(--gold); text-decoration:none; transition: color 0.25s; }
.footer-credit:hover { color: var(--gold-light); }
.footer-social { display:flex; flex-wrap:wrap; gap:12px 24px; }
.footer-social a { font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); text-decoration:none; transition:color 0.25s; font-weight:400; }
.footer-social a:hover { color:var(--gold-light); }

/* ── ANIMATIONS ── */
@keyframes lineUp   { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes clipIn   { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes kenBurns { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes starsIn  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes playPulse { 0% { transform: scale(1); opacity: 0.75; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes iconPop  { from { transform: scale(0) rotate(-40deg); opacity:0; } to { transform: scale(1) rotate(0); opacity:1; } }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
.h2.lines .line { display:block; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.14em; }
.h2.lines .line > span { display:block; transform: translateY(110%); transition: transform 1.05s var(--ease); }
.h2.lines.visible .line > span { transform: none; }

.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible {
  opacity: 1; transform: translateY(0);
}
.prodotti-grid .prod-card.reveal {
  opacity: 0; transform: translateY(110px);
  transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out);
}
.prodotti-grid .prod-card.reveal.visible { opacity: 1; transform: none; }
/* Desktop: die Sektion bleibt stehen, die Karten steigen beim Scrollen nacheinander auf (main.js) */
.prodotti-runway { display: none; }
@media (min-width:1101px) and (min-height:820px) {
  .prodotti-pin { position: sticky; top: var(--pin-top, 100px); }
  .prodotti-runway { display: block; height: 170vh; }
  .prodotti-grid .prod-card.reveal { opacity: 0; transition: none; will-change: transform, opacity; }
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }

/* ── RESPONSIVE ── */
@media (max-width:1100px) {
  .nav-wrap { grid-template-columns: 1fr auto; }
  .nav-links, .nav-right { display: none; }
  .nav-toggle { display: flex; }
  .footer-main { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-right { height:480px; }
  .wer-section { grid-template-columns:minmax(0,1fr); gap:60px; padding:var(--sec-y) 40px; }
  .cta-section { grid-template-columns:1fr; padding:var(--sec-y) 40px; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .process-line { display:none; }
  .step::before { top:0; left:0; border-radius:0 0 4px 0; width:36px; height:3px; border:0; background:var(--gold-pale); }
  .step.active::before { transform:none; box-shadow:none; }
  .prodotti-grid { grid-template-columns:repeat(2,1fr); }
  .prodotti-section { padding-left:40px; padding-right:40px; }
  .testi-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  :root { --sec-y: 80px; }
  .wer-values { grid-template-columns:1fr; gap:18px; }
  .wer-badge { right:-8px; }
  .nav-links { display:none; }
  .nav-logo img { height: 26px; }
  .nav-book { padding:9px 14px; font-size:10px; letter-spacing:0.08em; }
  .nav-right { gap:12px; }
  .nav-wrap { padding:0 24px; }
  .hero-left { padding:60px 24px 48px; }
  .strip-item { padding:0 16px; font-size:11px; }
  .wer-section, .process-section, .testi-section, .insta-section, .cta-section, footer { padding-left:24px; padding-right:24px; }
  .video-head { padding:0 24px; }
  .insta-head { padding:0 24px; flex-direction:column; align-items:flex-start; gap:12px; }
  .prodotti-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .prodotti-section { padding-left:24px; padding-right:24px; }
  .prod-name { font-size:20px; }
  .process-steps { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .insta-grid { grid-template-columns:repeat(3,1fr); }
  .footer-main { gap:40px 24px; margin-bottom:48px; }
  .footer-brand img { max-width:260px; }
  .footer-contact { grid-column:1 / -1; }
  footer { padding:64px 24px 28px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .reveal, .img-reveal .wer-img, .img-reveal .wer-badge { opacity:1; transform:none; clip-path:none; }
  .prodotti-grid .prod-card.reveal { opacity:1; transform:none; }
  .h2.lines .line > span { transform:none; }
}