/* ============================================================
   SCHREINEREI REINHARDT — MOBILE UX MASTER
   Authoritative mobile layer. Loaded LAST.
   Goal: one consistent mobile hero system across the whole site.
   Desktop remains untouched.
   ============================================================ */

@media (max-width:980px){

  /* HEADER: logo + hamburger stay fixed in the viewport */
  .site-header,
  .site-header.header-compact{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:5000 !important;
    transform:none !important;
    margin:0 !important;
  }

  .site-header .header-inner,
  .site-header.header-compact .header-inner{
    min-height:72px !important;
  }

  .site-header .site-logo img,
  .site-header.header-compact .site-logo img{
    max-width:220px !important;
  }

  body{
    padding-top:72px !important;
    padding-bottom:72px !important;
    overflow-x:hidden !important;
  }

  .header-spacer,
  .site-header-spacer,
  .sticky-header-spacer{
    display:none !important;
    height:0 !important;
  }

  /* Project adviser / side-floating UI stays out of mobile */
  .floating-consulting,
  .floating-instagram,
  .chatbot-widget{
    display:none !important;
  }
}

@media (max-width:680px){

  /* =========================================================
     A) ALL STANDARD SERVICE / PLANNER / REFERENCE HEROES
     ========================================================= */

  .leistungen-hero{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#182019 !important;
  }

  .leistungen-hero .leistungen-hero-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .leistungen-hero .leistungen-hero-media img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center 42% !important;
    transform:none !important;
    filter:saturate(.95) contrast(1.02) !important;
  }

  .leistungen-hero .leistungen-hero-overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:
      linear-gradient(180deg,
        rgba(8,12,9,.16) 0%,
        rgba(8,12,9,.28) 28%,
        rgba(8,12,9,.64) 68%,
        rgba(8,12,9,.88) 100%) !important;
  }

  .leistungen-hero .leistungen-hero-content{
    position:absolute !important;
    z-index:2 !important;
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    display:block !important;
    width:auto !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  .leistungen-hero .leistungen-hero-copy{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .leistungen-hero .hero-label{
    order:1 !important;
    align-self:flex-start !important;
    width:auto !important;
    max-width:94% !important;
    min-height:0 !important;
    margin:0 0 7px !important;
    padding:4px 8px !important;
    font-size:8px !important;
    line-height:1.1 !important;
    letter-spacing:.055em !important;
    white-space:normal !important;
  }

  .leistungen-hero .leistungen-hero-copy h1{
    order:2 !important;
    width:100% !important;
    max-width:360px !important;
    margin:0 0 8px !important;
    padding:0 !important;
    font-size:32px !important;
    line-height:.97 !important;
    letter-spacing:-.038em !important;
    text-wrap:balance !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .leistungen-hero .leistungen-hero-copy > p{
    order:3 !important;
    width:100% !important;
    max-width:360px !important;
    margin:0 0 11px !important;
    padding:0 !important;
    font-size:12.5px !important;
    line-height:1.42 !important;
  }

  /* SEO helper text must never take layout space */
  .leistungen-hero .seo-hidden{
    display:none !important;
  }

  /* Primary CTA comes before trust points, regardless of old page CSS */
  .leistungen-hero .leistungen-hero-actions{
    order:4 !important;
    display:block !important;
    width:100% !important;
    margin:0 0 8px !important;
    padding:0 !important;
  }

  .leistungen-hero .leistungen-hero-actions > a:first-child{
    display:flex !important;
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 14px !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  .leistungen-hero .leistungen-hero-actions > a:nth-child(n+2){
    display:none !important;
  }

  /* All known trust systems become a flat 2-column confirmation row */
  .leistungen-hero :is(
    .hero-trustline,
    .moebel-hero-points,
    .fenster-hero-trust,
    .haustuer-trustline,
    .kuechen-premium-trust,
    .tueren-hero-trust,
    .mm-trustline
  ){
    order:5 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .leistungen-hero :is(
    .hero-trustline,
    .moebel-hero-points,
    .fenster-hero-trust,
    .haustuer-trustline,
    .kuechen-premium-trust,
    .tueren-hero-trust,
    .mm-trustline
  ) > *{
    width:100% !important;
    min-width:0 !important;
    min-height:26px !important;
    margin:0 !important;
    padding:5px 7px !important;
    font-size:10px !important;
    line-height:1.08 !important;
    white-space:normal !important;
    justify-content:flex-start !important;
    background:rgba(255,255,255,.10) !important;
    box-shadow:none !important;
  }

  /* Desktop information cards are not a second mobile hero stage */
  .leistungen-hero :is(
    .leistungen-hero-card,
    .moebel-hero-card-premium,
    .kuechen-premium-helpbox
  ){
    display:none !important;
  }

  /* Brand card is important on desktop/content, but too expensive above the fold */
  .page-leistung-detail .mass-moebel-brand{
    display:none !important;
  }

  /* =========================================================
     B) LEISTUNGEN OVERVIEW
     ========================================================= */

  .start-premium-hero{
    position:relative !important;
    width:100% !important;
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .start-premium-hero-media{
    position:absolute !important;
    inset:0 !important;
    height:100% !important;
  }

  .start-premium-hero-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 42% !important;
    transform:none !important;
  }

  .start-premium-hero-overlay{
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(180deg,rgba(8,12,9,.16),rgba(8,12,9,.30) 30%,rgba(8,12,9,.68) 72%,rgba(8,12,9,.88)) !important;
  }

  .start-premium-hero-content{
    position:absolute !important;
    z-index:2 !important;
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    display:block !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .start-premium-copy{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
  }

  .start-premium-copy .hero-label{order:1 !important;margin:0 0 7px !important;font-size:8px !important;padding:4px 8px !important}
  .start-premium-copy h1{order:2 !important;margin:0 0 8px !important;font-size:32px !important;line-height:.97 !important;letter-spacing:-.038em !important}
  .start-premium-copy > p{order:3 !important;margin:0 0 11px !important;font-size:12.5px !important;line-height:1.42 !important}
  .start-premium-actions{order:4 !important;display:block !important;margin:0 0 8px !important}
  .start-premium-actions > a:first-child{display:flex !important;width:100% !important;height:42px !important;align-items:center !important;justify-content:center !important}
  .start-premium-actions > a:nth-child(n+2){display:none !important}
  .start-premium-trustline{order:5 !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:5px !important;margin:0 !important}
  .start-premium-trustline > *{min-height:26px !important;padding:5px 7px !important;font-size:10px !important;line-height:1.08 !important}
  .start-premium-card{display:none !important}

  /* =========================================================
     C) WOHNWELTEN OVERVIEW
     ========================================================= */

  .page-wohnwelten .wohnwelten-hero{
    position:relative !important;
    width:100% !important;
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .page-wohnwelten .wohnwelten-hero-media{
    position:absolute !important;
    inset:0 !important;
    height:100% !important;
  }

  .page-wohnwelten .wohnwelten-hero-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 42% !important;
  }

  .page-wohnwelten .wohnwelten-hero-overlay{
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(180deg,rgba(8,12,9,.16),rgba(8,12,9,.30) 30%,rgba(8,12,9,.68) 72%,rgba(8,12,9,.88)) !important;
  }

  .page-wohnwelten .wohnwelten-hero-content{
    position:absolute !important;
    z-index:2 !important;
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    display:block !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .page-wohnwelten .wohnwelten-hero-copy{
    display:flex !important;
    flex-direction:column !important;
  }

  .page-wohnwelten .hero-label{order:1 !important;margin:0 0 7px !important;font-size:8px !important;padding:4px 8px !important}
  .page-wohnwelten .wohnwelten-hero h1{order:2 !important;margin:0 0 8px !important;font-size:32px !important;line-height:.97 !important;letter-spacing:-.038em !important}
  .page-wohnwelten .wohnwelten-hero-copy > p{order:3 !important;margin:0 0 11px !important;font-size:12.5px !important;line-height:1.42 !important}
  .page-wohnwelten .wohnwelten-actions{order:4 !important;display:block !important;margin:0 0 8px !important}
  .page-wohnwelten .wohnwelten-actions > a:first-child{display:flex !important;width:100% !important;height:42px !important;align-items:center !important;justify-content:center !important}
  .page-wohnwelten .wohnwelten-actions > a:nth-child(n+2){display:none !important}
  .page-wohnwelten .wohnwelten-trustline{order:5 !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:5px !important;margin:0 !important}
  .page-wohnwelten .wohnwelten-trustline > *{min-height:26px !important;padding:5px 7px !important;font-size:10px !important;line-height:1.08 !important}
  .page-wohnwelten .wohnwelten-hero-card{display:none !important}

  /* =========================================================
     D) HOME HERO — keep the already approved visual ratio
     ========================================================= */

  .home .home-premium-hero{
    min-height:0 !important;
    height:auto !important;
  }

  /* =========================================================
     E) ÜBER UNS ONLY — legal pages also use hero-editorial,
        so scope this explicitly to body.ueber-uns
     ========================================================= */

  body.ueber-uns .hero-editorial{
    position:relative !important;
    width:100% !important;
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  body.ueber-uns .hero-editorial-media{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }

  body.ueber-uns .hero-editorial-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 42% !important;
  }

  body.ueber-uns .hero-editorial-overlay{
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(180deg,rgba(8,12,9,.16),rgba(8,12,9,.30) 30%,rgba(8,12,9,.68) 72%,rgba(8,12,9,.88)) !important;
  }

  body.ueber-uns .hero-editorial-content{
    position:absolute !important;
    z-index:2 !important;
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.ueber-uns .hero-editorial-copy{
    display:flex !important;
    flex-direction:column !important;
  }

  body.ueber-uns .hero-editorial .hero-label{order:1 !important;margin:0 0 7px !important;font-size:8px !important;padding:4px 8px !important}
  body.ueber-uns .hero-editorial h1{order:2 !important;margin:0 0 8px !important;font-size:32px !important;line-height:.97 !important;letter-spacing:-.038em !important}
  body.ueber-uns .hero-editorial-copy > p{order:3 !important;margin:0 0 11px !important;font-size:12.5px !important;line-height:1.42 !important}
  body.ueber-uns .hero-editorial-actions{order:4 !important;display:block !important;margin:0 !important}
  body.ueber-uns .hero-editorial-actions > a:first-child{display:flex !important;width:100% !important;height:42px !important;align-items:center !important;justify-content:center !important}
  body.ueber-uns .hero-editorial-actions > a:nth-child(n+2){display:none !important}
  body.ueber-uns .hero-editorial-note{display:none !important}

  /* =========================================================
     F) TRANSITIONS / FOLLOW-UP CONTENT
     ========================================================= */

  .leistungen-hero + section,
  .start-premium-hero + section,
  .page-wohnwelten .wohnwelten-hero + section,
  body.ueber-uns .hero-editorial + section{
    margin-top:0 !important;
    border-top:0 !important;
  }

  .leistungen-hero + section::before,
  .start-premium-hero + section::before,
  .page-wohnwelten .wohnwelten-hero + section::before,
  body.ueber-uns .hero-editorial + section::before{
    display:none !important;
    content:none !important;
  }
}

@media (max-width:380px){
  .leistungen-hero,
  .start-premium-hero,
  .page-wohnwelten .wohnwelten-hero,
  body.ueber-uns .hero-editorial{
    height:382px !important;
    min-height:382px !important;
    max-height:382px !important;
  }

  .leistungen-hero .leistungen-hero-content,
  .start-premium-hero-content,
  .page-wohnwelten .wohnwelten-hero-content,
  body.ueber-uns .hero-editorial-content{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
  }

  .leistungen-hero .leistungen-hero-copy h1,
  .start-premium-copy h1,
  .page-wohnwelten .wohnwelten-hero h1,
  body.ueber-uns .hero-editorial h1{
    font-size:30px !important;
  }
}


/* Mobile navigation v2 — one accordion level only */
@media (max-width:980px){
  .mobile-nav-panel .mobile-submenu-flat{
    padding:8px 12px 12px !important;
  }
  .mobile-nav-panel .mobile-submenu-flat > a{
    display:flex !important;
    align-items:center !important;
    min-height:42px !important;
    padding:9px 10px !important;
    font-size:15px!important; /* +1px vs previous submenu */
    line-height:1.3!important;
    font-weight:500 !important;
    border-radius:9px !important;
  }
  .mobile-nav-panel .mobile-submenu-flat > a + a{
    margin-top:1px !important;
  }
}


/* Mobile nav typography fix — only submenu text */
@media (max-width:980px){
  .mobile-nav-panel .mobile-submenu-flat > a{
    font-size:15px !important;
    line-height:1.3 !important;
  }
}