/* =========================================================
   Roto Landing – Livarea · DARK MODE
   Myriad Pro · quadratische Buttons (Livarea-CI)
   ========================================================= */

/* ---------- Myriad Pro (selbst-gehostet, von livarea.de) ---------- */
@font-face { font-family:"Myriad Pro"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../assets/fonts/MyriadPro-Light.woff2") format("woff2"); }
@font-face { font-family:"Myriad Pro"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../assets/fonts/MyriadPro-Regular.woff2") format("woff2"); }
/* ascent/descent normalisiert: Myriad-Versalien (Buttons/Eyebrows) sitzen sonst je nach
   Engine bis zu 8,7% zu hoch (hhea 750/250, capHeight 674 -> Mitte bei asc 92,4%/desc 25%) */
@font-face { font-family:"Myriad Pro"; font-weight:600; font-style:normal; font-display:swap;
  ascent-override:92.4%; descent-override:25%; line-gap-override:0%;
  src:url("../assets/fonts/MyriadPro-Semibold.woff2") format("woff2"); }
@font-face { font-family:"Myriad Pro"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../assets/fonts/MyriadPro-Bold.woff2") format("woff2"); }

:root {
  --bg:        #000000;   /* Apple true black */
  --bg-2:      #0a0a0a;   /* leicht abgesetzte Sektion */
  --bg-3:      #141416;   /* Karten */
  --fg:        #f5f5f7;   /* heller Text */
  --fg-soft:   #86868b;   /* Apple secondary text */
  --line:      rgba(255,255,255,.09);
  --gold:      #aeaeb2;   /* KEIN Gold mehr — neutraler, dezenter Akzent */
  --gold-dim:  #d2d2d7;
  --maxw:      1280px;
  --ease:      cubic-bezier(.28,.11,.32,1);
  --font:      "Myriad Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
:root { color-scheme:dark; }
::selection { background:#f5f5f7; color:#000; }
:focus-visible { outline:2px solid #f5f5f7; outline-offset:3px; }
a, button { -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font); font-weight:300;
  background:var(--bg); color:var(--fg);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }

.eyebrow { font-size:clamp(.7rem,1.4vw,.8rem); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:1.1em; }
.eyebrow--center { text-align:left; } /* Marco: linksbündig über die ganze Seite */
.section__title { font-size:clamp(2rem,1.2rem + 2.2vw,3.6rem); font-weight:300; letter-spacing:-.012em; line-height:1.16; text-align:left; }

/* ===================== TRUST-BAR ===================== */
.trustbar { position:relative; height:38px; background:#000; overflow:hidden; }
.trustbar__item { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0 16px; font-size:.73rem; letter-spacing:.04em; color:var(--fg-soft);
  opacity:0; transform:translateY(7px); transition:opacity .55s var(--ease), transform .55s var(--ease); pointer-events:none; }
.trustbar__item.is-on { opacity:1; transform:none; }
.trustbar .star { color:#fff; letter-spacing:.12em; font-style:normal; font-size:.7rem; }

/* ===================== NAV ===================== */
.topbar { position:fixed; top:0; left:0; right:0; z-index:100; transition:transform .5s var(--ease); }
.topbar.is-hidden { transform:translateY(-105%); }
.nav { position:relative; display:flex; align-items:center; justify-content:center; padding:14px clamp(20px,5vw,48px);
  transition:background .4s var(--ease), backdrop-filter .4s; border-bottom:1px solid transparent; }
/* Konfigurieren-CTA: erst NACH dem ersten Scrollen sichtbar (Marco: oben am Anfang nicht zeigen) */
.nav__cta { position:absolute; right:clamp(16px,4vw,48px); top:50%; transform:translateY(-50%);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--ease), background .3s, color .3s, visibility 0s .4s; }
.nav__cta::after { content:""; position:absolute; inset:-11px; } /* Touch-Ziel >=44px */
.nav__cta:hover { transform:translateY(-50%); } /* .btn-Hover-Verschiebung neutralisieren */
.topbar.is-scrolled .nav__cta { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .4s var(--ease), background .3s, color .3s; }
.nav__logo-link { display:inline-flex; }
.nav__logo { height:27px; width:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
/* Marco 05.07.: keine Milchglas-Bar hinter dem Logo beim Scrollen — Logo steht frei */
.topbar.is-scrolled .nav { border-bottom-color:transparent; padding-top:11px; padding-bottom:11px; }

/* ===================== BUTTONS (quadratisch!) ===================== */
.btn { display:inline-flex; align-items:center; justify-content:center; border-radius:0;
  font-family:var(--font); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  line-height:1; padding:.95em 1.9em; /* Versal-Zentrierung via ascent-override im @font-face */
  transition:transform .25s var(--ease), background .3s, color .3s, border-color .3s; white-space:nowrap; }
@media (hover:hover) and (pointer:fine){ .btn:hover { transform:translateY(-2px); } }
.btn:active { transform:translateY(0) scale(.97); }
.btn--primary { background:var(--fg); color:#0a0a0b; }
.btn--primary:hover { background:#fff; }
.btn--ghost { background:transparent; color:var(--fg); border:1px solid rgba(255,255,255,.45); }
.btn--ghost:hover { border-color:var(--fg); background:rgba(255,255,255,.06); }
.btn--gold { background:var(--gold); color:#0a0a0b; }
.btn--gold:hover { background:var(--gold-dim); }
.btn--sm { padding:.7em 1.3em; font-size:.74rem; }
.btn--lg { padding:1.1em 2.4em; font-size:.9rem; }

/* ===================== HERO (Scroll-Scrub Drehung) ===================== */
.hero { position:relative; height:100svh; min-height:560px; overflow:hidden; }
.hero__sticky { position:relative; height:100%; overflow:hidden; display:flex; align-items:flex-end; }
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__overlay { position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 32%, rgba(0,0,0,.42) 60%, rgba(0,0,0,.85) 78%, #000 90%, #000 100%); }
.hero__content { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:clamp(20px,5vw,48px); padding-bottom:clamp(78px,15vh,150px); will-change:opacity,transform; }
/* Desktop: Hero-Text in den linken goldenen Schnitt ruecken (nicht fast mittig) */
@media (min-width:1025px){ .hero__content{ margin-inline:0; max-width:none; padding-left:clamp(48px,14vw,380px); } }
.hero__title { font-size:clamp(2.6rem,8vw,6rem); font-weight:300; letter-spacing:-.02em; line-height:1; }
.hero__sub { font-size:clamp(1.1rem,2.6vw,1.7rem); font-weight:300; color:rgba(255,255,255,.86); margin-top:.4em; }
.hero__cta { display:flex; gap:14px; margin-top:2em; flex-wrap:wrap; }
.hero__hint { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6);
  appearance:none; background:none; border:0; font-family:inherit; cursor:pointer;
  padding:12px 18px; min-height:44px; transition:color .3s; }
@media (hover:hover) and (pointer:fine) { .hero__hint:hover { color:rgba(255,255,255,.95); } }
.hero__hint:active { color:rgba(255,255,255,.95); }

/* ===================== BEKANNT AUS (Presse) ===================== */
.press { background:var(--bg); padding:clamp(32px,5vh,54px) 0; border-bottom:1px solid var(--line); }
.press__label { text-align:center; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:1.5em; }
.press__logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(26px,6vw,68px); }
.press__name { font-family:Georgia,"Times New Roman",serif; color:#c9c9ce; font-size:clamp(1.05rem,2.4vw,1.55rem);
  letter-spacing:.01em; font-weight:400; font-style:italic; opacity:.6; transition:opacity .3s; white-space:nowrap; }
.press__name:hover { opacity:.95; }
.press__logos img { height:clamp(22px,4vw,30px); width:auto; opacity:.7; filter:brightness(0) invert(1); transition:opacity .3s; }
.press__logos img:hover { opacity:1; }

/* ===================== PROBLEM (Diamond 1) ===================== */
.problem { background:var(--bg); padding:clamp(90px,16vh,190px) 0; text-align:center; }
.problem__lead { font-size:clamp(1.8rem,5vw,3.4rem); font-weight:300; letter-spacing:-.01em; line-height:1.1; max-width:14ch; margin:0 auto; }
.problem__lead em { font-style:normal; color:var(--gold); }
.problem__sub { max-width:620px; margin:1.5em auto 0; color:var(--fg-soft); font-size:clamp(1.02rem,2vw,1.25rem); }
.problem__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,28px); margin-top:3.5em; text-align:left; }
.problem__item { background:var(--bg-2); border:1px solid var(--line); padding:clamp(22px,3vw,34px); }
.problem__item h3 { font-weight:600; font-size:1.1rem; margin-bottom:.5em; }
.problem__item p { color:var(--fg-soft); font-size:.98rem; }

/* ===================== SOLUTION-INTRO ===================== */
.solution { background:var(--bg-2); padding:clamp(80px,14vh,170px) 0; text-align:center; border-block:1px solid var(--line); }
.solution__title { font-size:clamp(2rem,5.5vw,3.8rem); font-weight:300; letter-spacing:-.02em; line-height:1.08; }
.solution__title strong { font-weight:600; }
.solution__body { max-width:600px; margin:1.4em auto 0; color:var(--fg-soft); font-size:clamp(1.05rem,2vw,1.3rem); }

/* ===================== FEATURES ===================== */
.feature { display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(24px,5vw,80px); padding:clamp(70px,12vh,140px) clamp(20px,5vw,64px); max-width:1400px; margin-inline:auto; }
.feature--alt { background:var(--bg-2); }
.feature--reverse .feature__media { order:2; }
.feature__media { position:relative; overflow:hidden; line-height:0; }
.feature__media video, .feature__media img { width:100%; height:auto; max-height:84vh; object-fit:contain; display:block; margin-inline:auto; }
.feature__text { max-width:520px; }
.feature__title { font-size:clamp(2.1rem,5vw,3.7rem); font-weight:300; letter-spacing:-.025em; line-height:1.05; margin-bottom:.5em; }
.feature__title strong { font-weight:600; }
.feature__body { font-size:clamp(1rem,1.8vw,1.18rem); color:var(--fg-soft); }
.feature__note { display:inline-block; margin-top:1.4em; font-size:.82rem; color:var(--gold); letter-spacing:.04em; }
/* Technische Explosionszeichnung auf heller Karte (weisser Bild-Hintergrund verschmilzt via multiply) */
.feature__media--spec { background:#f1ede6; border-radius:16px; padding:clamp(22px,4vw,54px); }
.feature__media--spec img { mix-blend-mode:multiply; max-height:74vh; }

/* ===================== FARB-GENERATOR ===================== */
.colors { padding:clamp(90px,14vh,180px) 0; text-align:center; background:var(--bg); }
.colors__stage { position:relative; max-width:900px; margin:2.5em auto 0; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); }
.colors__img { width:100%; height:100%; object-fit:cover; transition:opacity .35s var(--ease); }
.colors__label { position:absolute; left:24px; bottom:20px; font-size:1.1rem; font-weight:600; letter-spacing:.02em;
  background:rgba(0,0,0,.45); padding:.3em .8em; backdrop-filter:blur(6px); }
.colors__swatches { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:2em; }
.farbe-btn { display:flex; align-items:center; gap:.6em; background:transparent; color:var(--fg-soft); cursor:pointer;
  border:1px solid var(--line); border-radius:0; padding:.6em 1em; font-family:var(--font); font-size:.9rem; letter-spacing:.02em;
  transition:border-color .25s, color .25s; }
.farbe-btn:hover { color:var(--fg); }
.farbe-btn.is-active { border-color:var(--gold); color:var(--fg); }
.farbe-btn .dot { width:18px; height:18px; border:1px solid rgba(255,255,255,.25); }
.colors__hint { margin-top:1.6em; color:var(--fg-soft); font-size:.95rem; }

/* ===================== GRÖSSEN / SLIM ===================== */
.sizes { padding:clamp(80px,13vh,170px) 0; background:var(--bg-2); border-block:1px solid var(--line); }
.sizes__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,28px); margin-top:3em; }
.size-card { background:var(--bg-3); border:1px solid var(--line); padding:clamp(26px,3.5vw,40px); display:flex; flex-direction:column; gap:.6em; }
.size-card h3 { font-weight:600; font-size:1.25rem; }
.size-card .size-num { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:300; color:var(--gold); letter-spacing:-.01em; }
.size-card p { color:var(--fg-soft); font-size:.95rem; }
.size-card--slim { border-color:var(--gold); }
.size-card a { margin-top:auto; align-self:flex-start; }
.section__title--left { text-align:left; }
/* Größen-Visualisierung */
.sizes__viz { margin:clamp(2em,5vh,3.6em) auto 0; max-width:1080px; border-radius:14px; overflow:hidden; background:var(--bg-3); border:1px solid var(--line); }
.sizes__viz img { width:100%; height:auto; display:block; }

/* ===================== ROTO SLIM ===================== */
.slim { background:var(--bg); padding:clamp(70px,12vh,150px) 0; border-block:1px solid var(--line); }
.slim__wrap { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(28px,5vw,72px); }
.slim__lead { color:var(--fg-soft); font-size:clamp(1.05rem,1.8vw,1.22rem); line-height:1.6; margin:1em 0 1.8em; max-width:48ch; }
.slim__lead strong { color:var(--fg); font-weight:600; }
.slim__media { position:relative; justify-self:center; width:min(80vw,360px); aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:var(--bg-3); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.slim__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* ===================== NACHHALTIGKEIT (Natur) ===================== */
.nature { position:relative; overflow:hidden; padding:clamp(80px,14vh,180px) 0; background:#0c1611; }
.nature__bg { position:absolute; inset:0; z-index:0; background:url(../assets/img/roto/nature-bg.jpg) center/cover no-repeat; opacity:.5; }
.nature::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,18,13,.82) 0%, rgba(8,18,13,.58) 45%, rgba(8,18,13,.92) 100%); }
.nature__inner { position:relative; z-index:2; }
.nature .eyebrow { color:#9fbba2; }
.nature__lead { color:rgba(236,246,239,.85); font-size:clamp(1.05rem,1.9vw,1.28rem); line-height:1.65; max-width:66ch; margin:1.2em 0 0; }
.nature__row { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,30px); margin-top:clamp(2.4em,5vh,3.6em); }
.nature__card { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/4; border:1px solid rgba(255,255,255,.13); }
.nature__card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.nature__card:hover img { transform:scale(1.04); }
.nature__card figcaption { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(16px,2vw,26px);
  background:linear-gradient(180deg, transparent, rgba(6,14,10,.94)); display:flex; flex-direction:column; gap:.3em; }
.nature__card figcaption strong { font-size:clamp(1.05rem,1.6vw,1.32rem); font-weight:600; color:#fff; }
.nature__card figcaption span { font-size:.86rem; color:rgba(225,238,228,.8); line-height:1.4; }

/* ===================== SPECS ===================== */
.specs { padding:clamp(80px,12vh,160px) 0; background:var(--bg); }
.specs__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:3em;
  background:var(--line); border:1px solid var(--line); }
.spec { background:var(--bg); padding:clamp(26px,4vw,44px) 20px; text-align:center; display:flex; flex-direction:column; gap:.35em; }
.spec__val { font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:300; letter-spacing:-.01em; }
.spec__key { font-size:.88rem; color:var(--fg-soft); letter-spacing:.02em; }

/* ===================== REVIEWS ===================== */
.reviews { padding:clamp(90px,14vh,180px) 0; background:var(--bg-2); border-top:1px solid var(--line); text-align:left; }
.reviews__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,28px); margin-top:3em; text-align:left; }
.review { background:var(--bg-3); border:1px solid var(--line); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; }
.review__stars { color:var(--gold); letter-spacing:.15em; margin-bottom:1em; }
.review__text { color:var(--fg); font-size:1.02rem; line-height:1.6; }
.review__name { margin-top:1.2em; color:var(--fg-soft); font-size:.92rem; font-weight:600; }
.review__photo { width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:1.2em; border:1px solid var(--line); }

/* ===================== BENEFITS ===================== */
.benefits { padding:clamp(50px,8vh,90px) 0; background:var(--bg); border-top:1px solid var(--line); }
.benefits__grid { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(24px,5vw,70px); text-align:center; }
.benefit { display:flex; flex-direction:column; gap:.4em; max-width:200px; }
.benefit__ic { font-size:1.6rem; }
.benefit strong { font-weight:600; }
.benefit span { color:var(--fg-soft); font-size:.9rem; }

/* ===================== CTA ===================== */
.cta { position:relative; min-height:80svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.cta__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cta__overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,11,.6), rgba(10,10,11,.78)); }
.cta__content { position:relative; z-index:2; padding:clamp(20px,5vw,48px); }
.cta__title { font-size:clamp(2rem,5.5vw,3.8rem); font-weight:300; letter-spacing:-.02em; line-height:1.06; }
.cta__sub { font-size:clamp(1.05rem,2vw,1.3rem); color:rgba(255,255,255,.85); margin:1em auto 2em; max-width:560px; }

/* ===================== FOOTER ===================== */
.footer { background:#000; color:var(--fg-soft); padding:42px 0 34px; border-top:1px solid var(--line); }
.footer__inner { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer__logo { height:20px; }
.footer__nav { display:flex; flex-wrap:wrap; gap:6px clamp(14px,2vw,26px); }
.footer__nav a { font-size:.84rem; letter-spacing:.03em; color:rgba(245,245,247,.72); text-decoration:none;
  transition:color .3s var(--ease); }
.footer__nav a:hover { color:#fff; }
.footer__legal { display:flex; align-items:baseline; justify-content:space-between; gap:10px 24px; flex-wrap:wrap;
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.10); }
.footer__claim { font-size:.82rem; color:rgba(245,245,247,.62); }
.footer__tax { font-size:.76rem; color:rgba(245,245,247,.62); }
.footer__tax a { color:rgba(245,245,247,.78); text-decoration:underline; text-underline-offset:2px; }

/* ===================== REVEAL ===================== */
.reveal { opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
  .feature { grid-template-columns:1fr; padding-block:clamp(48px,8vh,78px); gap:26px; }
  .feature--reverse .feature__media { order:0; }
  .feature__media video, .feature__media img { max-height:64svh; }
  .feature__text { max-width:none; margin-inline:auto; text-align:left; }
  .problem__grid, .sizes__grid, .reviews__grid { grid-template-columns:1fr; }
  .slim__wrap { grid-template-columns:1fr; }
  .slim__media { width:min(78vw,320px); }
  .section__title--left { text-align:left; }
  /* Nachhaltigkeit mobil: Karten UNTEREINANDER statt horizontalem Scroller.
     Der horizontale Scroll-Container hat auf Touch-Geraeten das vertikale Scrollen der Seite
     abgefangen (Marco 27.07.2026, mehrfach). Kein Scroll-Container = kein Abfangen. */
  .nature__row { display:grid; grid-auto-flow:row; grid-template-columns:1fr; grid-auto-columns:auto;
    overflow:visible; scroll-snap-type:none; touch-action:auto;
    margin-inline:0; padding-inline:0; gap:14px; }
  .nature__card { scroll-snap-align:none; aspect-ratio:16/10; }
  .specs__grid { grid-template-columns:repeat(2,1fr); }
  .footer__inner { flex-direction:column; text-align:center; }
  .footer__nav { justify-content:center; }
  .footer__legal { flex-direction:column; align-items:center; text-align:center; }
  .hero__title { font-size:clamp(2.5rem,11vw,3.8rem); }
  .hero__sub { font-size:clamp(1.05rem,4.5vw,1.4rem); }
  .nav__cta { padding:.5em .9em; font-size:.68rem; letter-spacing:.1em; right:14px; } /* mobil: kompakt neben dem Logo */
  .nav__inner { padding:13px 20px; }
  .nav__logo { height:23px; }
  .trustbar__item { font-size:.66rem; letter-spacing:.02em; }
}
@media (max-width:480px){
  .specs__grid { grid-template-columns:1fr; }
  .hero__cta { flex-direction:column; align-items:stretch; }
}
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .trustbar__item { transform:none; transition:opacity .55s var(--ease); }
}