/* Phone layout: shorter pages without removing content.
   Loaded last on every page (after cd.css and cb.css). */
@media (max-width:600px){
  section{padding:clamp(44px,12vw,56px) 0}
  .hero{padding-bottom:0}
  .loft{padding:0 0 44px}
  section[style*="padding-top"]{padding-top:40px!important;padding-bottom:28px!important}
  h2{font-size:clamp(2rem,9.6vw,2.6rem)}
  .lead{margin-top:14px;font-size:1rem}
  .eyebrow{margin-bottom:14px}
  .sets,.pkgs,.steps,.offers,.story-grid,.places,.pt{margin-top:26px}
  .revhead{margin-top:30px}
  .facts{border-radius:16px}
  .fact{padding:14px 14px}

  /* Swipe rows instead of long stacks: photos, packages, offers, reviews */
  .sets,.pkgs,.offers,.reviews,.steps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);padding:20px var(--gutter) 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:none}
  .sets::-webkit-scrollbar,.pkgs::-webkit-scrollbar,.offers::-webkit-scrollbar,.reviews::-webkit-scrollbar,.steps::-webkit-scrollbar{display:none}
  .sets>*,.pkgs>*,.offers>*,.reviews>*,.steps>*{flex:0 0 82%;min-width:0;scroll-snap-align:start}
  .sets>*{flex-basis:58%}
  .reviews>*{flex-basis:84%}
  .offer.top{order:-1}
  .offer{min-height:0;padding:72px 18px 20px}
  .offer h3{font-size:1.6rem}
  .pkg{padding:22px 18px 18px}
  .pkg .pr{margin:18px 0 14px}
  .pkg .pr b{font-size:2.2rem}
  .pkg a.sticker{margin-top:18px}
  .set .pic{aspect-ratio:3/4}
  .rev{padding:20px}
  .more{margin-top:8px}
  .more div{padding:14px 16px}

  /* Story: the player tells the story, the list next to it repeats it */
  .player{width:min(300px,78vw)}
  .agenda,.story-hint{display:none}
  .story-grid{gap:0}

  .step{padding:20px 18px}
  .step h3{margin:16px 0 12px;font-size:1.25rem}
  .quizgrid{gap:22px}
  .qstage{min-height:520px;padding-top:76px}

  .frame{min-height:0}
  .faqgrid .qbox,.faqgrid .mono{display:none}
  .faqgrid{gap:8px}
  .pt-fold{margin-top:26px}
  .pt-fold .pt:first-of-type{margin-top:6px}

  /* Form: the contact list repeats what the closing block below shows */
  .contact{display:none}
  .ask form{padding:20px}
  .place{padding:20px}
  .place .addr{font-size:1.25rem}
  details summary{padding:16px 0;font-size:1rem}
  details p{padding-bottom:16px}

  /* Price lists: one compact row per item */
  .pt h2,.pt h3{margin-bottom:6px}
  .ptable tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:11px 14px;margin-bottom:7px}
  .ptable tbody th{flex:1 1 55%;padding:0!important;font-size:.95rem}
  .ptable td{display:block;flex:0 0 auto;border:0!important;padding:0!important;text-align:right!important;font-size:.98rem}
  .ptable td::before{content:none}
  .ptable small{font-size:.8rem;margin-top:1px}
  .ptable.two tbody th{flex:1 1 100%}
  .ptable.two td{display:flex;flex:1 1 40%;justify-content:space-between;gap:8px;text-align:left!important;font-size:.95rem}
  .ptable.two td::before{content:attr(data-label);color:var(--muted);font-weight:500;font-size:.78rem}

  .legal-doc{margin-bottom:40px}
  .legal-doc h2{font-size:2rem;margin-bottom:16px}
  .legal-doc p,.legal-doc li{font-size:.95rem}
  footer{padding-bottom:84px}
}

/* Smooth scrolling on phones: no full-screen film grain, no blur layers, no moving background */
@media (max-width:860px){
  body::after{display:none}
  .frame .bg{animation:none;transform:none;filter:none}
  .frame .bg::after{content:"";position:absolute;inset:0;background:rgba(10,10,9,.5)}
  header,.consent-banner,.qcard,.sticker.ghost,.offer .rows div,.offer .lbl,.shot figcaption,.hero .pp,.who-top{-webkit-backdrop-filter:none;backdrop-filter:none}
  header{background:rgba(10,10,9,.97)}
  .rv{transform:none!important;transition-duration:.4s}
  .strip{will-change:transform}
  /* Moving pictures must not carry a filter (repainted on every frame on iPhones); a dark layer does the same job */
  .strip .graded{filter:none}
  .strip .shot::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,10,9,.3);pointer-events:none;transition:opacity .4s}
  .strip .shot:hover::before{opacity:0}
}
@media (max-width:600px){
  /* The bottom bar carries "Anfragen / Anrufen"; the header keeps only logo and menu */
  .nav-r .sticker{display:none}
  .mbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,9,.97);will-change:transform;transform:translate3d(0,110%,0);transition:transform .3s var(--ease)}
  .mbar.show{transform:translate3d(0,0,0)}
}

/* Short phones (iPhone SE): the whole menu fits without scrolling */
@media (max-width:980px) and (max-height:640px){
  #site-menu a{padding:13px 0!important;font-size:1.15rem!important}
}