/* Schreinerei Reinhardt UX 2026
   Rein visuelle und funktionale Ebene. Bestehende Inhalte, URLs, Metadaten,
   strukturierte Daten, Bildpfade und interne Linkziele bleiben unverändert. */

:root{
    --ux-wide:1280px;
    --ux-content:1160px;
    --ux-reading:780px;
    --ux-green:#6f9a40;
    --ux-green-dark:#557a2e;
    --ux-ink:#172018;
    --ux-muted:#626c63;
    --ux-paper:#fbfbf8;
    --ux-soft:#f2f4ee;
    --ux-line:rgba(23,32,24,.11);
    --ux-radius-sm:12px;
    --ux-radius:18px;
    --ux-radius-lg:26px;
    --ux-shadow:0 12px 34px rgba(20,28,20,.07);
}

html{scroll-padding-top:120px}
body{background:var(--ux-paper) !important;color:var(--ux-ink)}
.container{width:min(var(--ux-wide),calc(100% - 48px)) !important}

/* Ruhigere Typografie */
body{font-size:17px;line-height:1.68}
h1,h2,h3,h4,h5,h6{letter-spacing:-.022em !important;text-wrap:balance}
h1{font-size:clamp(2.6rem,4.2vw,4.5rem) !important;line-height:1.02 !important}
h2{font-size:clamp(2rem,3vw,3rem) !important;line-height:1.1 !important}
h3{line-height:1.2 !important}
p{max-width:72ch}
:where(main) p{color:inherit}

/* Tastatur und Bedienbarkeit */
:where(a,button,input,textarea,select,summary):focus-visible{
    outline:3px solid rgba(111,154,64,.48) !important;
    outline-offset:3px !important;
}
:where(button,.btn,.header-cta,input,textarea,select){font:inherit}

/* Header bewusst kompakter und weniger dekorativ */
.site-topbar{background:#172018 !important}
.site-topbar .container{min-height:36px !important;gap:20px !important}
.site-topbar-link{font-size:13px !important;font-weight:650 !important;gap:7px !important}
.site-topbar-icon{width:22px !important;height:22px !important;flex-basis:22px !important;background:transparent !important;border:0 !important;box-shadow:none !important}
.site-header{background:rgba(255,255,252,.96) !important;backdrop-filter:blur(12px) !important;-webkit-backdrop-filter:blur(12px) !important;box-shadow:0 5px 20px rgba(20,28,20,.055) !important;border-bottom:1px solid var(--ux-line) !important}
.header-inner{min-height:82px !important;gap:18px !important}
.site-logo img{max-height:62px !important;width:auto}
.site-nav>ul{gap:18px !important}
.site-nav>ul>li>a{min-height:82px !important;font-size:15px !important;font-weight:650 !important}
.header-cta{min-height:46px !important;padding:0 20px !important;border-radius:12px !important;background:var(--ux-green) !important;box-shadow:none !important;font-weight:750 !important}
.header-cta::before{display:none !important}
.header-cta:hover{background:var(--ux-green-dark) !important;transform:none !important;box-shadow:none !important}
.menu-service-bar{height:44px !important;background:#f4f6f0 !important}
.menu-service-bar .container{min-height:44px !important}
.menu-service-item{min-height:34px !important;padding:0 11px !important;border-radius:10px !important;box-shadow:none !important;background:transparent !important}
.dropdown{border-radius:18px !important;padding:20px !important;box-shadow:0 20px 55px rgba(20,28,20,.13) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.dropdown-grid{gap:16px !important}
.dropdown-grid a{border-radius:9px !important;padding:9px 10px !important}
.dropdown-grid a:hover{transform:none !important;box-shadow:none !important}

/* Buttons: weniger Shop Optik, klarere Hierarchie */
.btn{min-height:50px !important;padding:0 22px !important;border-radius:12px !important;font-weight:700 !important;box-shadow:none !important}
.btn-primary{background:var(--ux-green) !important;box-shadow:none !important}
.btn-primary:hover{background:var(--ux-green-dark) !important;transform:none !important;box-shadow:none !important}
.btn-secondary{box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.btn:hover{transform:none !important}

/* Allgemeine Flächen und Karten beruhigen */
:where(.card,.service-card,.info-card,.process-card,.article-card,.guide-card,.tool-card,.home-premium-quickcard){border-radius:var(--ux-radius) !important;box-shadow:none !important}
:where(.card,.service-card,.info-card,.process-card,.article-card,.guide-card,.tool-card,.home-premium-quickcard):hover{transform:none !important}
.section{padding-top:84px !important;padding-bottom:84px !important}
.section-head{margin-bottom:36px !important}
.section-head p{max-width:760px !important}

/* Startseite: Bild und Handwerk bekommen Vorrang */
.home-premium-hero{min-height:clamp(620px,72vh,760px) !important}
.home-premium-hero-content{max-width:var(--ux-wide);gap:48px !important}
.home-premium-copy{max-width:720px !important}
.home-premium-copy>p{font-size:clamp(1.08rem,1.5vw,1.28rem) !important;line-height:1.6 !important;max-width:650px !important}
.home-premium-actions{gap:12px !important}
.home-premium-trustline{gap:10px 20px !important}
.home-premium-card{border-radius:20px !important;box-shadow:none !important;background:rgba(20,28,20,.64) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important}
.home-premium-quickcards{margin-top:0 !important}
.home-premium-quickcards-box{border-radius:0 0 22px 22px !important;box-shadow:none !important;border:1px solid var(--ux-line) !important;border-top:0 !important}
.home-premium-quickcard{padding:22px 18px !important;border-right:1px solid var(--ux-line) !important;background:#fff !important}
.home-premium-quickcard:last-child{border-right:0 !important}
.home-premium-quickcard:hover{background:#f6f8f2 !important}
.home-reference-card{border-radius:18px !important;box-shadow:none !important}
.home-reference-card:hover{transform:none !important}
.home-reference-card:hover img{transform:scale(1.015) !important}

/* Lange Texte und Ratgeber */
:where(.article-content,.ratgeber-content,.guide-content,.editorial-content,.prose,.content-text){max-width:var(--ux-reading) !important}
:where(.article-content,.ratgeber-content,.guide-content,.editorial-content,.prose,.content-text) p{font-size:1.06rem !important;line-height:1.78 !important}
:where(.article-content,.ratgeber-content,.guide-content,.editorial-content,.prose,.content-text) h2{margin-top:2.2em !important;margin-bottom:.7em !important}
:where(.article-content,.ratgeber-content,.guide-content,.editorial-content,.prose,.content-text) h3{margin-top:1.8em !important;margin-bottom:.6em !important}

/* Tabellen bleiben auf kleinen Geräten nutzbar */
main table{width:100%;border-collapse:collapse}
main :where(.table-wrap,.table-scroll,.responsive-table){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
main th{background:#eef2e9 !important}
main th,main td{padding:13px 15px !important;vertical-align:top}

/* Formulare */
main :where(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:50px;border-radius:10px !important;border:1px solid rgba(23,32,24,.18) !important;background:#fff !important;box-shadow:none !important}
main textarea{min-height:150px}
main :where(input,select,textarea):focus{border-color:var(--ux-green) !important;box-shadow:0 0 0 3px rgba(111,154,64,.12) !important}

/* Footer: ruhiger Abschluss */
.site-footer{padding-top:64px !important;padding-bottom:42px !important}
.footer-grid{gap:42px 30px !important}
.footer-grid p{line-height:1.55 !important}

/* Desktop: weniger schwebende Konkurrenz */
.floating-instagram{display:none !important}
.floating-consulting-trigger{box-shadow:var(--ux-shadow) !important}

/* Neue mobile Aktionsleiste */
.mobile-action-bar{display:none}

@media (max-width:1180px){
    .site-topbar{display:none !important}
    .site-header{position:sticky !important;top:0 !important}
    .header-inner{min-height:76px !important}
    .site-logo img{max-width:min(270px,calc(100vw - 92px)) !important;max-height:58px !important}
    .mobile-nav-toggle{width:48px !important;height:48px !important;border-radius:12px !important;box-shadow:none !important;background:#fff !important}
    .mobile-nav-panel{width:min(94vw,400px) !important;padding:16px 16px 26px !important;background:#fbfcf9 !important}
    .mobile-nav-item{border-radius:12px !important;box-shadow:none !important;border-color:var(--ux-line) !important}
    .mobile-nav-link,.mobile-subtoggle-link{min-height:56px !important;font-size:16px !important}
    .mobile-subtoggle-row{min-height:56px !important;grid-template-columns:minmax(0,1fr) 56px !important}
    .mobile-subtoggle-arrow{width:56px !important;min-height:56px !important}
    .mobile-submenu-group{border-radius:10px !important;background:#f4f7f0 !important}
    .mobile-nav-contact a{border-radius:10px !important;min-height:52px !important;box-shadow:none !important}
    .mobile-nav-cta{border-radius:10px !important;box-shadow:none !important}
}

@media (max-width:768px){
    html{scroll-padding-top:84px}
    body{font-size:16px;padding-bottom:72px}
    .container{width:min(100% - 32px,var(--ux-wide)) !important}
    h1{font-size:clamp(2.15rem,10vw,3.1rem) !important;line-height:1.05 !important}
    h2{font-size:clamp(1.7rem,7vw,2.25rem) !important;line-height:1.12 !important}
    h3{font-size:clamp(1.25rem,5vw,1.55rem) !important}
    .section{padding-top:58px !important;padding-bottom:58px !important}
    .section-head{margin-bottom:26px !important}
    .btn{width:100%;min-height:52px !important}

    .home-premium-hero{min-height:auto !important;padding:0 !important}
    .home-premium-hero-media{position:absolute !important;inset:0 !important}
    .home-premium-hero-content{min-height:600px !important;padding-top:72px !important;padding-bottom:42px !important;align-items:flex-end !important}
    .home-premium-copy{max-width:none !important}
    .home-premium-copy>p{font-size:1.04rem !important;line-height:1.58 !important}
    .home-premium-actions{display:grid !important;grid-template-columns:1fr !important;gap:10px !important}
    .home-premium-trustline{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px 12px !important;margin-top:22px !important}
    .home-premium-card{margin-top:12px !important;padding:20px !important;border-radius:14px !important}
    .home-premium-quickcards-box{border-radius:0 0 14px 14px !important}
    .home-premium-quickcards-grid{display:grid !important;grid-template-columns:1fr 1fr !important}
    .home-premium-quickcard{min-height:118px !important;padding:18px 16px !important;border-right:1px solid var(--ux-line) !important;border-bottom:1px solid var(--ux-line) !important}
    .home-premium-quickcard:nth-child(2n){border-right:0 !important}

    main table{font-size:14px}
    main th,main td{padding:10px 11px !important}

    .floating-consulting,.floating-instagram,.floating-mobile-call{display:none !important}
    .mobile-action-bar{
        display:grid;
        grid-template-columns:.8fr 1.2fr;
        gap:8px;
        position:fixed;
        left:0;right:0;bottom:0;
        z-index:1200;
        padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
        background:rgba(255,255,252,.97);
        border-top:1px solid var(--ux-line);
        box-shadow:0 -8px 28px rgba(20,28,20,.08);
    }
    .mobile-action-bar a{
        display:flex;align-items:center;justify-content:center;
        min-height:48px;padding:0 12px;border-radius:10px;
        font-size:14px;font-weight:750;text-decoration:none;
    }
    .mobile-action-call{border:1px solid rgba(23,32,24,.16);background:#fff;color:var(--ux-ink)}
    .mobile-action-project{background:var(--ux-green);color:#fff}
}

@media (max-width:420px){
    .container{width:calc(100% - 26px) !important}
    .site-logo img{max-width:230px !important}
    .home-premium-hero-content{min-height:570px !important;padding-top:58px !important}
    .home-premium-trustline{grid-template-columns:1fr !important}
    .home-premium-quickcards-grid{grid-template-columns:1fr !important}
    .home-premium-quickcard{border-right:0 !important;min-height:auto !important}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto !important}
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}


/* =========================================================
   UX GLOBAL CTA SYSTEM V1
   Einheitliche Abschluss- und Kontaktbereiche.
   Keine Inhalts-, Link-, SEO- oder Navigationsänderung.
   ========================================================= */

/* Große Abschlussbereiche */
:where(
    .cta-section,
    .final-cta,
    .abschluss-cta,
    .contact-cta,
    .projekt-cta,
    .rg-cta,
    .ww-cta,
    .mm-cta,
    .sr-cta
){
    position:relative !important;
    overflow:hidden !important;
    margin-top:clamp(42px,6vw,78px) !important;
    padding:clamp(34px,5vw,58px) !important;
    border:1px solid rgba(45,62,47,.10) !important;
    border-radius:22px !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(120,158,77,.13), transparent 34%),
        linear-gradient(135deg,#f5f8f1 0%,#ffffff 72%) !important;
    box-shadow:none !important;
}

/* Dunkle vorhandene CTA-Varianten bleiben dunkel, aber ruhiger */
:where(
    .cta-section.dark,
    .final-cta.dark,
    .abschluss-cta.dark,
    .contact-cta.dark,
    .projekt-cta.dark,
    .cta-dark
){
    border-color:rgba(255,255,255,.10) !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(124,177,68,.16), transparent 34%),
        linear-gradient(135deg,#1d2921 0%,#25342a 100%) !important;
}

/* Typografie */
:where(
    .cta-section,
    .final-cta,
    .abschluss-cta,
    .contact-cta,
    .projekt-cta,
    .rg-cta,
    .ww-cta,
    .mm-cta,
    .sr-cta
) :where(h2,h3){
    max-width:780px !important;
    margin-top:0 !important;
    margin-bottom:12px !important;
    line-height:1.12 !important;
    letter-spacing:-.025em !important;
    text-wrap:balance !important;
}

:where(
    .cta-section,
    .final-cta,
    .abschluss-cta,
    .contact-cta,
    .projekt-cta,
    .rg-cta,
    .ww-cta,
    .mm-cta,
    .sr-cta
) p{
    max-width:720px !important;
    margin-bottom:0 !important;
    line-height:1.68 !important;
}

/* CTA-Aktionsgruppen */
:where(
    .cta-actions,
    .final-cta-actions,
    .abschluss-cta-actions,
    .contact-cta-actions,
    .projekt-cta-actions,
    .rg-cta-actions,
    .ww-cta-actions,
    .mm-cta-actions,
    .sr-cta-actions
){
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:11px !important;
    margin-top:24px !important;
}

/* Primärbuttons in Abschlussbereichen: einheitliche Höhe und Ruhe */
:where(
    .cta-actions,
    .final-cta-actions,
    .abschluss-cta-actions,
    .contact-cta-actions,
    .projekt-cta-actions,
    .rg-cta-actions,
    .ww-cta-actions,
    .mm-cta-actions,
    .sr-cta-actions
) :where(.btn,a[class*="btn"]){
    min-height:46px !important;
    border-radius:11px !important;
    padding-inline:18px !important;
    box-shadow:none !important;
}

/* Kleine Kontakt-/Vertrauenszeilen im CTA */
:where(
    .cta-meta,
    .cta-trust,
    .final-cta-meta,
    .abschluss-cta-meta,
    .contact-cta-meta
){
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px 16px !important;
    margin-top:18px !important;
    font-size:.9rem !important;
    opacity:.82 !important;
}

/* Verhindert schmale, kaputte CTA-Spalten */
:where(
    .cta-section,
    .final-cta,
    .abschluss-cta,
    .contact-cta,
    .projekt-cta,
    .rg-cta,
    .ww-cta,
    .mm-cta,
    .sr-cta
) *{
    min-width:0 !important;
    overflow-wrap:break-word !important;
}

/* Smartphone */
@media (max-width:680px){
    :where(
        .cta-section,
        .final-cta,
        .abschluss-cta,
        .contact-cta,
        .projekt-cta,
        .rg-cta,
        .ww-cta,
        .mm-cta,
        .sr-cta
    ){
        margin-top:36px !important;
        padding:26px 20px !important;
        border-radius:18px !important;
    }

    :where(
        .cta-actions,
        .final-cta-actions,
        .abschluss-cta-actions,
        .contact-cta-actions,
        .projekt-cta-actions,
        .rg-cta-actions,
        .ww-cta-actions,
        .mm-cta-actions,
        .sr-cta-actions
    ){
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;
        width:100% !important;
    }

    :where(
        .cta-actions,
        .final-cta-actions,
        .abschluss-cta-actions,
        .contact-cta-actions,
        .projekt-cta-actions,
        .rg-cta-actions,
        .ww-cta-actions,
        .mm-cta-actions,
        .sr-cta-actions
    ) :where(.btn,a[class*="btn"]){
        width:100% !important;
        justify-content:center !important;
    }
}


/* =========================================================
   UX GLOBAL CTA SYSTEM V2 — ABSTÄNDE
   CTA näher an den letzten Inhaltsblock und kompakter vor Footer.
   ========================================================= */

:where(
    .cta-section,
    .final-cta,
    .abschluss-cta,
    .contact-cta,
    .projekt-cta,
    .rg-cta,
    .ww-cta,
    .mm-cta,
    .sr-cta
){
    margin-top:clamp(22px,3.5vw,42px) !important;
    margin-bottom:0 !important;
}

/* Wenn der CTA in einer eigenen Section steckt, deren Außenabstand reduzieren */
section:has(> :where(
    .cta-section,
    .final-cta,
    .abschluss-cta,
    .contact-cta,
    .projekt-cta,
    .rg-cta,
    .ww-cta,
    .mm-cta,
    .sr-cta
)){
    padding-top:clamp(30px,4vw,48px) !important;
    padding-bottom:clamp(34px,4.5vw,52px) !important;
}

/* CTA direkt vor Footer: weniger Luft nach unten */
main > :last-child:has(:where(
    .cta-section,
    .final-cta,
    .abschluss-cta,
    .contact-cta,
    .projekt-cta,
    .rg-cta,
    .ww-cta,
    .mm-cta,
    .sr-cta
)){
    margin-bottom:0 !important;
    padding-bottom:42px !important;
}

/* Desktop: kompakter Abschluss */
@media (min-width:981px){
    :where(
        .cta-section,
        .final-cta,
        .abschluss-cta,
        .contact-cta,
        .projekt-cta,
        .rg-cta,
        .ww-cta,
        .mm-cta,
        .sr-cta
    ){
        margin-top:28px !important;
    }
}

/* Mobile: noch etwas enger */
@media (max-width:680px){
    :where(
        .cta-section,
        .final-cta,
        .abschluss-cta,
        .contact-cta,
        .projekt-cta,
        .rg-cta,
        .ww-cta,
        .mm-cta,
        .sr-cta
    ){
        margin-top:20px !important;
    }

    section:has(> :where(
        .cta-section,
        .final-cta,
        .abschluss-cta,
        .contact-cta,
        .projekt-cta,
        .rg-cta,
        .ww-cta,
        .mm-cta,
        .sr-cta
    )){
        padding-top:26px !important;
        padding-bottom:34px !important;
    }
}


/* =========================================================
   MOBILE UX OPTIMAL V1
   Mobile-first Optimierung, Navigation bewusst NICHT angefasst.
   ========================================================= */
@media (max-width:980px){

  /* 1) Floating Ablenkungen entfernen */
  .floating-consulting,
  .floating-instagram,
  .chatbot-widget{
      display:none !important;
  }

  /* 2) Mobile Seitenrhythmus deutlich kompakter */
  main :where(section,.section){
      scroll-margin-top:84px;
  }

  main :where(section,.section):not(:first-child){
      padding-top:clamp(34px,7vw,52px);
      padding-bottom:clamp(34px,7vw,52px);
  }

  /* 3) Container auf kleinen Screens besser ausnutzen */
  main :where(.container,.wrap,.inner,.content-wrap){
      width:min(100% - 28px,1180px);
      margin-inline:auto;
  }

  /* 4) Große Überschriften ohne aggressive Umbrüche */
  main h1{
      font-size:clamp(2.25rem,10.5vw,3.45rem) !important;
      line-height:1.02 !important;
      letter-spacing:-.04em !important;
      text-wrap:balance;
      overflow-wrap:normal !important;
      word-break:normal !important;
      hyphens:auto;
  }
  main h2{
      font-size:clamp(1.85rem,8vw,2.65rem) !important;
      line-height:1.08 !important;
      letter-spacing:-.03em !important;
      text-wrap:balance;
  }
  main h3{
      line-height:1.18 !important;
      text-wrap:balance;
  }

  /* 5) Lesbarkeit */
  main p,
  main li{
      line-height:1.62;
  }

  /* 6) Desktop-Grids zuverlässig stapeln */
  main :where(
      .grid,
      .cards-grid,
      .card-grid,
      .feature-grid,
      .content-grid,
      .hero-grid,
      .rg-hero-grid,
      .sr-hero-grid,
      .ratgeber-hero-grid
  ){
      grid-template-columns:1fr !important;
  }

  /* 7) Karten kompakter, keine riesigen leeren Flächen */
  main :where(
      .card,
      .feature-card,
      .info-card,
      .service-card,
      .topic-card,
      .link-card
  ){
      min-height:0 !important;
      height:auto !important;
  }

  /* 8) Hero-Medien auf Mobile kontrollieren */
  main :where(
      .hero img,
      [class*="hero"] img
  ){
      max-height:58vh;
      object-fit:cover;
  }

  /* 9) Hero-Info-/Benefitboxen nicht als zweite Bildschirmseite */
  main :where(
      .hero-aside,
      .hero-panel,
      .hero-card,
      .hero-benefits,
      .hero-info
  ){
      max-height:none !important;
      margin-top:18px !important;
  }

  /* 10) Chips/Badges dürfen sauber umbrechen */
  main :where(
      .chips,
      .badges,
      .trust-row,
      .benefits,
      .hero-badges,
      .hero-trust
  ){
      display:flex !important;
      flex-wrap:wrap !important;
      gap:8px !important;
  }

  /* 11) Buttons touchfreundlich und klar */
  main :where(.btn,button,a[class*="btn"]){
      min-height:46px;
  }

  main :where(
      .hero-actions,
      .cta-actions,
      .actions,
      .button-row
  ){
      gap:9px !important;
  }

  /* 12) Bilder verhindern Layoutsprünge/Überbreite */
  main img{
      max-width:100%;
  }

  /* 13) Horizontales Überlaufen unterbinden */
  html,body{
      max-width:100%;
      overflow-x:hidden;
  }
}

@media (max-width:680px){

  /* Mobile: CTA möglichst früh und eindeutig */
  main :where(
      .hero-actions,
      .cta-actions,
      .final-cta-actions,
      .abschluss-cta-actions,
      .contact-cta-actions,
      .projekt-cta-actions
  ){
      display:grid !important;
      grid-template-columns:1fr !important;
      width:100% !important;
  }

  main :where(
      .hero-actions,
      .cta-actions,
      .final-cta-actions,
      .abschluss-cta-actions,
      .contact-cta-actions,
      .projekt-cta-actions
  ) > :where(a,button){
      width:100% !important;
      justify-content:center !important;
  }

  /* Weniger visuelle Masse in Hero und Content */
  main :where(section,.section):not(:first-child){
      padding-top:34px;
      padding-bottom:34px;
  }

  main :where(.card,.feature-card,.info-card,.service-card,.topic-card,.link-card){
      padding:20px !important;
      border-radius:16px !important;
  }

  /* Mobile Bilder eher editorial als riesig */
  main :where([class*="hero"] img){
      max-height:48vh;
  }

  /* CTA-Abschluss näher am Content */
  :where(
      .cta-section,
      .final-cta,
      .abschluss-cta,
      .contact-cta,
      .projekt-cta,
      .rg-cta,
      .ww-cta,
      .mm-cta,
      .sr-cta
  ){
      margin-top:16px !important;
  }
}


/* =========================================================
   MOBILE UX OPTIMAL V2 — HERO ABOVE THE FOLD
   Ziel: primäre Aktion + Nutzen ohne unnötiges Scrollen.
   Mobile Navigation bleibt unangetastet.
   ========================================================= */
@media (max-width:680px){

  /* Hero insgesamt kompakter */
  main :where(.hero,[class*="hero"]){
      min-height:0 !important;
  }

  main :where(
      .home-premium-hero,
      .service-hero,
      .leistung-hero,
      .hero-subpage,
      .mm-hero,
      .ww-hero
  ){
      padding-top:clamp(34px,7vw,48px) !important;
      padding-bottom:30px !important;
  }

  /* Eyebrow nicht unnötig hoch */
  main :where(.eyebrow,[class*="eyebrow"]){
      min-height:28px !important;
      padding:4px 9px !important;
      font-size:.70rem !important;
      line-height:1.25 !important;
  }

  /* Hero-H1 etwas kontrollierter als V1 */
  main :where(.hero,[class*="hero"]) h1{
      font-size:clamp(2.15rem,9.6vw,3.05rem) !important;
      line-height:1.00 !important;
      margin-top:14px !important;
      margin-bottom:14px !important;
  }

  main :where(.hero,[class*="hero"]) p{
      font-size:1rem !important;
      line-height:1.52 !important;
  }

  /* Primäre Hero-Aktionen direkt nach Text */
  main :where(
      .hero-actions,
      .home-premium-actions,
      .service-hero-actions,
      .mm-hero-actions
  ){
      order:3 !important;
      margin-top:20px !important;
      margin-bottom:14px !important;
  }

  /* Trust-Punkte auf Mobile IMMER zweispaltig statt 4 volle Zeilen */
  main :where(
      .trust-row,
      .hero-trust,
      .hero-badges,
      .benefits,
      .chips
  ){
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:7px !important;
      width:100% !important;
      margin-top:14px !important;
  }

  main :where(
      .trust-row,
      .hero-trust,
      .hero-badges,
      .benefits,
      .chips
  ) > *{
      min-width:0 !important;
      width:100% !important;
      min-height:34px !important;
      padding:7px 10px !important;
      font-size:.79rem !important;
      line-height:1.15 !important;
      justify-content:flex-start !important;
  }

  /* Möbelbau/ähnliche Seiten: bestehende einzelne Badges ebenfalls 2-spaltig */
  main :where(
      .hero-features,
      .hero-pills,
      .feature-pills,
      .usp-row,
      .usp-list
  ){
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:7px !important;
      margin-top:14px !important;
  }

  main :where(
      .hero-features,
      .hero-pills,
      .feature-pills,
      .usp-row,
      .usp-list
  ) > *{
      width:100% !important;
      min-width:0 !important;
      min-height:34px !important;
      padding:7px 10px !important;
      font-size:.79rem !important;
      line-height:1.15 !important;
  }

  /* Große Desktop-Hilfekarten im Hero mobil aus dem ersten Sichtbereich nehmen */
  main :where(
      .hero-aside,
      .hero-panel,
      .hero-help,
      .hero-benefit-panel,
      .home-premium-aside
  ){
      display:none !important;
  }

  /* Sticky Conversionbar berücksichtigen */
  body{
      padding-bottom:72px !important;
  }
}

@media (max-width:380px){
  main :where(.hero,[class*="hero"]) h1{
      font-size:clamp(2rem,9.2vw,2.75rem) !important;
  }

  main :where(
      .trust-row,.hero-trust,.hero-badges,.benefits,.chips,
      .hero-features,.hero-pills,.feature-pills,.usp-row,.usp-list
  ){
      gap:6px !important;
  }

  main :where(
      .trust-row,.hero-trust,.hero-badges,.benefits,.chips,
      .hero-features,.hero-pills,.feature-pills,.usp-row,.usp-list
  ) > *{
      font-size:.74rem !important;
      padding-inline:8px !important;
  }
}


/* =========================================================
   MOBILE UX OPTIMAL V3 — STARTSEITE ECHTE HERO-KLASSEN
   Screenshot-Fix: kompakter, CTA früher, sekundäre Elemente reduziert.
   Navigation bleibt unangetastet.
   ========================================================= */
@media (max-width:680px){

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

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

  .home-premium-hero-content{
      min-height:0 !important;
      padding:28px 16px 22px !important;
      align-items:start !important;
  }

  .home-premium-copy{
      width:100% !important;
      max-width:none !important;
      padding:0 !important;
  }

  .home-premium-copy .hero-label,
  .home-premium-copy .eyebrow{
      margin-bottom:12px !important;
      font-size:10px !important;
      min-height:26px !important;
      padding:4px 8px !important;
  }

  .home-premium-copy h1{
      max-width:100% !important;
      margin:0 0 12px !important;
      font-size:clamp(2.18rem,9.2vw,2.85rem) !important;
      line-height:.98 !important;
      letter-spacing:-.045em !important;
  }

  .home-premium-copy > p{
      max-width:100% !important;
      margin:0 0 16px !important;
      font-size:.96rem !important;
      line-height:1.48 !important;
  }

  /* Primäraktion sichtbar, sekundäre Referenz im Hero mobil entfernen:
     Referenzen folgen direkt unter dem Hero ohnehin als eigener Bereich. */
  .home-premium-actions{
      display:block !important;
      width:100% !important;
      margin:16px 0 14px !important;
  }

  .home-premium-actions > :first-child{
      display:flex !important;
      width:100% !important;
      min-height:46px !important;
      justify-content:center !important;
      align-items:center !important;
  }

  .home-premium-actions > :not(:first-child){
      display:none !important;
  }

  /* Trustline: 2 x 2, deutlich flacher */
  .home-premium-trustline{
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:6px !important;
      width:100% !important;
      margin:0 !important;
  }

  .home-premium-trustline > *{
      min-width:0 !important;
      width:100% !important;
      min-height:30px !important;
      padding:6px 8px !important;
      font-size:.72rem !important;
      line-height:1.1 !important;
      white-space:normal !important;
  }

  /* Desktop-Hilfekarte auf Mobile komplett entfernen */
  .home-premium-card{
      display:none !important;
  }

  /* Referenzen-Bereich direkt nach Hero enger anbinden */
  .home-premium-hero + section,
  .home-premium-hero + .section{
      padding-top:30px !important;
  }
}

@media (max-width:380px){
  .home-premium-hero-content{
      padding-inline:14px !important;
  }
  .home-premium-copy h1{
      font-size:2.08rem !important;
  }
  .home-premium-trustline > *{
      font-size:.69rem !important;
      padding-inline:7px !important;
  }
}


/* =========================================================
   MOBILE UX OPTIMAL V4
   Einheitlicher Mobile-Hero für Leistungs-, Wohnwelt- und Ratgeberseiten
   Referenz: kompakte Startseite V3
   Desktop und Mobile-Navigation bleiben unangetastet.
   ========================================================= */
@media (max-width:680px){

  /* Einheitliche Hero-Geometrie */
  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero
  ){
    min-height:0 !important;
    height:auto !important;
    padding-top:28px !important;
    padding-bottom:22px !important;
  }

  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero
  ) :is(.hero-grid,.rg-hero-grid,.sr-hero-grid,.ratgeber-hero-grid){
    min-height:0 !important;
    gap:14px !important;
  }

  /* H1: groß genug für Wertigkeit, aber nicht mehr 5–6 Zeilen hoch */
  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero,
    .rg-hero-grid,
    .sr-hero-grid,
    .ratgeber-hero-grid
  ) h1{
    font-size:clamp(2.05rem,9vw,2.75rem) !important;
    line-height:.99 !important;
    letter-spacing:-.04em !important;
    margin:10px 0 12px !important;
    max-width:100% !important;
  }

  /* Beschreibung kompakt */
  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero,
    .rg-hero-grid,
    .sr-hero-grid,
    .ratgeber-hero-grid
  ) p{
    font-size:.95rem !important;
    line-height:1.46 !important;
    margin-bottom:14px !important;
  }

  /* Hero-Eyebrow */
  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero,
    .rg-hero-grid,
    .sr-hero-grid,
    .ratgeber-hero-grid
  ) :is(.hero-label,.eyebrow){
    min-height:25px !important;
    padding:4px 8px !important;
    font-size:.67rem !important;
    line-height:1.2 !important;
    margin-bottom:10px !important;
  }

  /* Nur EINE primäre Hero-Aktion auf Mobile */
  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero
  ) :is(.hero-actions,.service-hero-actions,.mm-hero-actions){
    display:block !important;
    width:100% !important;
    margin:16px 0 14px !important;
  }

  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero
  ) :is(.hero-actions,.service-hero-actions,.mm-hero-actions) > :first-child{
    display:flex !important;
    width:100% !important;
    min-height:46px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero
  ) :is(.hero-actions,.service-hero-actions,.mm-hero-actions) > :not(:first-child){
    display:none !important;
  }

  /* Desktop-Erklär-/Hilfekarten im Mobile-Hero nicht doppeln */
  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero
  ) :is(.hero-aside,.hero-panel,.hero-help,.hero-benefit-panel,.hero-card,.hero-info){
    display:none !important;
  }

  /* USPs immer 2 x 2 und flach */
  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero
  ) :is(
    .hero-trust,.hero-badges,.hero-benefits,.hero-features,.hero-pills,
    .trust-row,.usp-row,.usp-list,.feature-pills,.benefits,.chips
  ){
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    margin:12px 0 0 !important;
  }

  main :is(
    .leistung-hero,
    .service-hero,
    .hero-subpage,
    .mm-hero,
    .ww-hero
  ) :is(
    .hero-trust,.hero-badges,.hero-benefits,.hero-features,.hero-pills,
    .trust-row,.usp-row,.usp-list,.feature-pills,.benefits,.chips
  ) > *{
    min-width:0 !important;
    width:100% !important;
    min-height:30px !important;
    padding:6px 8px !important;
    font-size:.72rem !important;
    line-height:1.12 !important;
    white-space:normal !important;
  }

  /* Nächster Inhaltsbereich soll sichtbar "anklopfen" */
  main :is(.leistung-hero,.service-hero,.hero-subpage,.mm-hero,.ww-hero) + section{
    padding-top:30px !important;
  }

  /* Ratgeber: kein künstlich hoher Introbereich */
  main :is(.rg-hero-grid,.sr-hero-grid,.ratgeber-hero-grid){
    min-height:0 !important;
    padding-top:28px !important;
    padding-bottom:24px !important;
  }
}

@media (max-width:380px){
  main :is(
    .leistung-hero,.service-hero,.hero-subpage,.mm-hero,.ww-hero,
    .rg-hero-grid,.sr-hero-grid,.ratgeber-hero-grid
  ) h1{
    font-size:2rem !important;
  }
}