/* =========================================================
   VISOLINO Relaunch 2026 — Gate 3 · MOBILE
   Desktop-Gestaltung ist freigegeben (LOCKED).
   Diese Datei greift ausschließlich unterhalb von 1101 px (Menü)
   bzw. 821 px (Mobile-Komposition). Außerhalb der Media Queries
   steht nur, was auf Desktop unsichtbar bleibt (display:none).
   ========================================================= */

.nav-panel-foot{display:none}
.nav-menu-ico{display:none}

/* ---------------------------------------------------------
   MENÜ — Fullscreen-Panel auf Schwarz (Tablet + Mobile)
   --------------------------------------------------------- */
@media (max-width:1100px){
  .nav-menu{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 0 0 14px;margin-right:-2px}
  .nav-menu-ico{display:block;position:relative;width:22px;height:12px}
  .nav-menu-ico i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
  .nav-menu-ico i:first-child{top:0}
  .nav-menu-ico i:last-child{top:10px}
  .nav.menu-open .nav-menu-ico i:first-child{top:5px;transform:rotate(45deg)}
  .nav.menu-open .nav-menu-ico i:last-child{top:5px;transform:rotate(-45deg)}

  .nav-links.open{display:flex;position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:flex-start;gap:0;
    padding:calc(var(--nav-h) + clamp(16px,4vh,40px)) var(--pad) calc(24px + env(safe-area-inset-bottom));
    background:var(--black);color:var(--paper);overflow-y:auto;overscroll-behavior:contain;counter-reset:mnav}
  .nav-links.open > a{display:flex;align-items:baseline;gap:16px;padding:clamp(8px,1.4vh,14px) 0;border-top:1px solid var(--line-dark);
    font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);
    font-size:clamp(40px,11vw,68px);letter-spacing:0;line-height:1;counter-increment:mnav}
  .nav-links.open > a:last-of-type{border-bottom:1px solid var(--line-dark)}
  .nav-links.open > a::before{content:counter(mnav,decimal-leading-zero);font-family:var(--mono);font-stretch:100%;font-weight:400;
    font-size:12px;letter-spacing:.04em;color:var(--orange);min-width:2.2em;transform:translateY(-.3em)}
  .nav-links.open > a::after{display:none}
  .nav-links.open > a:hover,.nav-links.open > a:focus-visible{color:var(--orange)}

  .nav-links.open .nav-panel-foot{display:flex;flex-direction:column;gap:22px;margin-top:auto;padding-top:32px}
  .nav-panel-lang{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;letter-spacing:.12em}
  .nav-panel-lang a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;opacity:.6}
  .nav-panel-lang a.on{opacity:1;color:var(--orange)}
  .nav-panel-lang span{opacity:.4}
  .nav-panel-cta{justify-content:space-between;width:100%;height:60px;background:var(--orange);color:var(--ink)}

  .nav.menu-open{color:#fff}
  .nav.menu-open .btn-nav{visibility:hidden}
  html.menu-lock,html.menu-lock body{overflow:hidden}
}

/* ---------------------------------------------------------
   MOBILE-KOMPOSITION (≤ 820 px) · Haupt-Review 390 px
   --------------------------------------------------------- */
@media (max-width:820px){

  /* Section Labels 02–08 */
  .kicker{font-size:clamp(15px,3.8vw,16px)}

  /* Navigation */
  .nav-logo{height:26px}
  .nav-menu{font-size:13px}

  /* HERO — jede Szene einzeln gecroppt (Werte aus Frame-Analyse 0,3 / 1,5 / 2,5 / 4,0 s).
     Nebeneffekt: die AI-Plakette links oben im Video liegt bei allen drei Szenen außerhalb des Bildausschnitts. */
  .hero-video[data-scene="web"]{object-position:50% 50%}      /* dediziertes 9:16-Video (hero-web-mobile) */
  .hero-video[data-scene="brand"]{object-position:50% 50%}    /* dediziertes 9:16-Video (hero-brand-mobile): mittig, kein Zusatz-Crop */
  .hero-video[data-scene="content"]{object-position:50% 50%}  /* dediziertes 9:16-Video (hero-content-mobile) */

  .chapters{gap:14px;margin-bottom:14px}
  .chapter{padding:13px 0 2px;font-size:11.5px}
  .hero-pause{width:44px;height:44px;margin-left:auto;margin-right:-12px;opacity:.85}
  .hero-top{padding-top:calc(var(--nav-h) + 4px)}
  .scene-hl{font-size:clamp(34px,10.2vw,60px);line-height:.9}

  .hero-bottom{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .claim{font-size:clamp(26px,7.4vw,40px);line-height:.94;margin-bottom:10px}
  .hero-sub{font-size:15px;line-height:1.42;margin-bottom:18px;max-width:30ch}
  .hero-cta{flex-direction:column;align-items:flex-start;gap:4px}
  .hero-cta .btn-solid{justify-content:space-between;width:100%;height:56px}
  /* Zweit-CTA als ruhiger Textlink: ein klarer Hauptweg, mehr Luft fürs Motiv */
  .hero-cta .btn-line{height:44px;padding:0;border:0;gap:10px;background:none!important;color:var(--hero-ink)!important;
    text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}

  /* S02 PROJEKTE — Liste ohne Hover, Andres mit mehr Gewicht */
  .pj-row{column-gap:14px;padding:22px 0}
  .pj-row--lead{padding:26px 0 24px}
  .pj-name{font-size:clamp(34px,9.4vw,52px)}
  .pj-row--lead .pj-name{font-size:clamp(42px,12vw,66px)}
  .pj-no{padding-top:.35em}
  .pj-act{position:relative}
  .pj-act::after{content:"";position:absolute;inset:-14px -10px}
  .pj.is-hover .pj-row:not(.is-on) .pj-name{opacity:1}

  /* S03 LEISTUNGEN — drei vollflächige Farbbänder, alles sofort sichtbar */
  .pillars{gap:0;margin:0 calc(var(--pad) * -1)}
  .pillar{min-height:0;padding:30px var(--pad) 26px;grid-template-rows:auto auto auto auto auto}
  .p-no{margin-bottom:18px}
  .p-word{font-size:clamp(72px,21vw,120px);line-height:.8}
  .p-line{min-height:0;margin-top:18px;max-width:30ch;font-size:17px}
  .p-list{font-size:14px;line-height:1.5;margin-top:14px}
  .p-more{min-height:44px;padding-top:12px;margin-top:18px}

  /* S04 PREISE — Pakete untereinander, Linienlogik bleibt */
  .plan{padding:34px 0 36px}
  .plan-price{margin-top:14px}
  .plan-price .num{font-size:clamp(58px,17vw,92px)}
  .plan-desc{margin-top:16px}
  .plan-list{margin-top:20px}
  .btn-plan{margin-top:24px;width:100%;justify-content:space-between}
  .care-list{grid-template-columns:1fr}
  .care-name h3{font-size:clamp(40px,11vw,60px)}

  /* S05 BRAND — Markenblatt als großes Bild direkt nach dem Intro, Liste ohne Hover */
  .brand-grid{display:flex;flex-direction:column;align-items:stretch}
  .brand-copy{display:contents}
  .brand-intro{order:1}
  .board{order:2;margin:36px 0 8px}
  .brand-list{order:3}
  .btn-brand{order:4;align-self:flex-start}
  .brand-list .bl{font-size:clamp(26px,7.6vw,40px);padding:13px 0}
  .brand-list .bl:hover,.brand-list .bl.is-on{color:inherit;padding-left:0}
  .board.is-hl .tile{opacity:1}
  .tile{min-height:132px}
  .t-farbe{min-height:260px}
  .aa{font-size:clamp(80px,24vw,120px)}
  .t-claim .display{font-size:clamp(24px,7vw,34px)}

  /* S06 CONTENT — Hochformatfilm als Mittelpunkt, vollflächig rot */
  .content-grid{display:flex;flex-direction:column;align-items:flex-start}
  .content-copy{display:contents}
  .content-copy > .kicker{order:1}
  .s06-hl{order:2;margin-bottom:24px}
  .content-intro{order:3}
  .reel{order:4;align-self:stretch;margin:36px calc(var(--pad) * -1) 8px;padding:32px var(--pad) 26px}
  .reel-frame{width:min(100%,400px)}
  .reel-toggle{width:44px;height:44px;right:10px;bottom:10px}
  .content-list{order:5}
  .content-note{order:6}
  .btn-content{order:7}
  .content-list li{font-size:clamp(24px,6.8vw,34px);padding:13px 0}

  /* S08 STUDIO — Ablauf kompakt: Nummer links, Text rechts */
  .steps{row-gap:0}
  .steps li{display:grid;grid-template-columns:clamp(64px,19vw,96px) 1fr;column-gap:14px;padding:20px 0 24px}
  .s-no{grid-row:1 / span 2;font-size:clamp(48px,14vw,72px)}
  .steps h3{margin:4px 0 6px}
  .faq summary{min-height:60px;padding:16px 0}

  /* S09 + FOOTER */
  .s09-hl{font-size:clamp(64px,19vw,120px)!important}
  .s09-sub{font-size:clamp(26px,7vw,40px)}
  .s09-cta{gap:22px}
  .s09-cta .text-link{min-height:44px}
  .foot-top{padding-top:44px}
  .foot-cols{row-gap:32px}
  .foot-cols a{padding:11px 0}
  .foot-lang{padding:0}
  .foot-lang a{display:inline-block;padding:12px 10px}
  .foot-lang a:first-child{padding-left:0}
  .nav-logo::after,.foot-logo::after{content:"";position:absolute;inset:-10px -8px}
  .foot-logo{position:relative}
  .foot-claim{font-size:clamp(46px,13vw,92px);line-height:.9;margin-top:56px;-webkit-text-stroke-width:1.2px}
}

/* Panel-Fuß: Basis-Linkstile der Navigation neutralisieren */
@media (max-width:1100px){
  .nav-links.open .nav-panel-foot a{font-family:var(--text);font-stretch:100%;font-weight:650;font-size:14px;letter-spacing:.12em;
    line-height:1;text-transform:uppercase;padding:0}
  .nav-links.open .nav-panel-foot a::after{display:none}
  .nav-links.open .nav-panel-foot .nav-panel-cta{padding:0 22px;font-size:15px}
}

/* Übergang 561–820 px: Haupt-CTA nicht über die volle Tablet-Breite ziehen */
@media (min-width:561px) and (max-width:820px){
  .hero-cta .btn-solid{width:auto;min-width:340px}
}