/* UI/CRO V4 - durchgaengige Seitenbreite 1440px auf ALLEN Seiten (2026-09-29)
   Nur geladen, wenn der Bereich "Seitenbreite (alle Seiten)" im Admin (/admin/ui_v4.php)
   aktiv ist (body.ui-v4-layout, s. index.php + de/head.php). Header, Footer, Inhalt,
   Kategorien, Konto, Blog und Checkout nutzen dieselbe Breite wie die V4-Bereiche -
   kein Springen der Header-Breite mehr beim Navigieren. Nur Breiten, keine Inhalte. */

body.ui-v4-layout { --content-v4: 1440px; }

body.ui-v4-layout .page-width { width: min(var(--content-v4), calc(100% - 48px)); }
/* Alte Content-Seiten (newhome.css deckelt .container auf 1180px) */
body.ui-v4-layout.nh-home-active .container {
  width: min(var(--content-v4), calc(100% - 48px)) !important;
  max-width: min(var(--content-v4), calc(100% - 48px)) !important;
}
/* Unterseiten: Header/Footer-.page-width liegt IN dem 1440px-Container - volle Containerbreite,
   damit Header, Inhalt und Footer auf derselben Kante stehen wie auf der Startseite. */
body.ui-v4-layout:not(.nh-home-page) .container .page-width { width: 100%; }
/* Ausnahme: fixierte Sticky-Leiste der Produktseite (_pdp_v4_sticky.php) liegt technisch im
   Container, bezieht sich aber auf den Viewport - dort normale Seitenbreite. */
body.ui-v4-layout:not(.nh-home-page) .container .v4-sticky-cta .page-width { width: min(var(--content-v4), calc(100% - 48px)); }
/* Unterseiten: Footer liegt im Container - wie auf der Startseite randlos weiss ueber die volle
   Breite (Hintergrund per box-shadow, Trennlinie per border-image-outset; clip-path verhindert
   horizontale Ueberbreite), Inhalt bleibt auf der gemeinsamen Kante. */
body.ui-v4-layout:not(.nh-home-page) .container .footer {
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
  border-image: linear-gradient(var(--line, #dfe4e8), var(--line, #dfe4e8)) 1 / 1px 0 0 0 / 0 100vmax;
  /* Immer etwas Luft zwischen letztem Inhaltsblock und Footer (egal welches Seiten-Template) */
  margin-top: 40px;
}
@media (max-width: 680px) {
  body.ui-v4-layout:not(.nh-home-page) .container .footer { margin-top: 24px; }
}
/* Unterseiten Desktop: grauer Header + weisse Navigationsleiste wie auf der Startseite ueber die
   volle Breite. Per Pseudo-Element (box-shadow/border-image-outset = keine Ueberbreite), damit
   clip-path nicht die Dropdown-Menues der Navigation abschneidet. */
/* Grauer Header auf allen Breiten (auch mobil) randlos */
body.ui-v4-layout:not(.nh-home-page) .container .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: inset(0 -100vmax);
  box-shadow: 0 0 0 100vmax #f5f6f6;
}
/* Weisse Menueleiste nur Desktop (mobil ist .main-nav ein Aufklappmenue) */
@media (min-width: 981px) {
  body.ui-v4-layout:not(.nh-home-page) .container .main-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    clip-path: inset(0 -100vmax);
  }
  body.ui-v4-layout:not(.nh-home-page) .container .main-nav { position: relative; z-index: 19; }
  body.ui-v4-layout:not(.nh-home-page) .container .main-nav::before {
    top: -1px;
    bottom: -1px;
    box-shadow: 0 0 0 100vmax #fff;
    border-top: 1px solid var(--line, #dfe4e8);
    border-bottom: 1px solid var(--line, #dfe4e8);
    border-image: linear-gradient(var(--line, #dfe4e8), var(--line, #dfe4e8)) 1 / 1px 0 / 0 100vmax;
    clip-path: inset(0 -100vmax -1px);
  }
}
/* Checkout (inkl. Warenkorbseite): neuer Header, aber reduziert - ohne Suche, Aktionen und Menue
   (weniger Ablenkung im Bestellprozess, wie bisher). index.php setzt .v4-checkout-header. */
body.ui-v4-layout .v4-checkout-header .search,
body.ui-v4-layout .v4-checkout-header .utility-actions,
body.ui-v4-layout .v4-checkout-header .menu-toggle { display: none !important; }
body.ui-v4-layout .v4-checkout-header .utility-bar { justify-content: flex-start; }
/* Leiste "Weiter einkaufen / Sicheres Bestellen" (checkout/v2/_reduced_nav.php) wie die
   Navigationsleiste: weiss, randlos ueber die volle Breite, gleiche Hoehe und Schrift. */
body.ui-v4-layout .checkout-reduced-nav-v2 {
  position: relative;
  z-index: 19;
  min-height: 48px;
  padding: 0;
  border-bottom: 0;
  background: #fff;
}
body.ui-v4-layout .checkout-reduced-nav-v2::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 0 0 100vmax #fff;
  border-top: 1px solid var(--line, #dfe4e8);
  border-bottom: 1px solid var(--line, #dfe4e8);
  border-image: linear-gradient(var(--line, #dfe4e8), var(--line, #dfe4e8)) 1 / 1px 0 / 0 100vmax;
  clip-path: inset(0 -100vmax -1px);
}
body.ui-v4-layout .checkout-reduced-nav-v2-back {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .03em;
}
body.ui-v4-layout .checkout-reduced-nav-v2-trust { font-size: 12px; color: var(--muted, #5e6976); }
@media (max-width: 680px) {
  body.ui-v4-layout .checkout-reduced-nav-v2 { padding: 0 2px; }
}
/* Schatten unter der Navigation ueberall weg (auf Unterseiten reichte er nur bis zur Containerkante);
   die Trennlinie bleibt - damit sieht die Leiste auf allen Seiten gleich aus. */
body.ui-v4-layout .main-nav { box-shadow: none; }
/* Startseite: #main bleibt ungedeckelt, .page-width begrenzt je Sektion (wie newhome.css) */
body.ui-v4-layout.nh-home-page .container { width: 100% !important; max-width: 100% !important; }
/* Blog (de/blog/_blog_css.php) */
body.ui-v4-layout .blog-inner { max-width: var(--content-v4); }

/* ── Mobil (bis 680px): volle Bildschirmbreite, kein grauer Seitenrand (Nutzerwunsch 2026-09-30).
   Weisse Flaechen laufen von Kante zu Kante (keine Rundung/Seitenrahmen/Schatten), zwischen den
   Abschnitten bleibt ein schmaler grauer Abstand als Trenner; Texte einheitlich 16px vom Rand. ── */
@media (max-width: 680px) {
  body.ui-v4-layout { --v4-gutter: 16px; }
  /* html-Praefix: schlaegt die mobilen Breitenregeln der Bereichs-Stylesheets (home/pdp/cart/service),
     die nach diesem Stylesheet geladen werden */
  html body.ui-v4-layout .page-width,
  html body.ui-v4-layout:not(.nh-home-page) .container .page-width,
  html body.ui-v4-layout:not(.nh-home-page) .container .v4-sticky-cta .page-width,
  html body.ui-v4-layout section[aria-labelledby="faq-title"] { width: 100%; }
  html body.ui-v4-layout.nh-home-active .container,
  html body.ui-v4-layout.nh-home-page .container { width: 100% !important; max-width: 100% !important; }

  /* Leisten ohne eigene Innenabstaende: Kopf, Fuss, Trust-Leiste, Hero-Text, Sticky-Leiste */
  body.ui-v4-layout .utility-bar,
  body.ui-v4-layout .brand-row,
  body.ui-v4-layout .footer .page-width,
  body.ui-v4-layout .v4-trust,
  body.ui-v4-layout .v4-hero-inner,
  body.ui-v4-layout .v4-sticky-inner,
  body.ui-v4-layout .newsletter-inner,
  body.ui-v4-layout .checkout-reduced-nav-v2 { padding-left: var(--v4-gutter); padding-right: var(--v4-gutter); }
  body.ui-v4-layout .v4-cat-hero-inner { width: 100%; padding-left: var(--v4-gutter); padding-right: var(--v4-gutter); }

  /* Weisse Karten/Boxen randlos */
  body.ui-v4-layout .section,
  body.ui-v4-layout .ma-container,
  body.ui-v4-layout .feature-card,
  body.ui-v4-layout .v4-insider,
  body.ui-v4-layout .breadcrumb-section,
  body.ui-v4-layout .v4-cat-hero--plain {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }
  body.ui-v4-layout .section { margin-top: 8px; padding-left: var(--v4-gutter); padding-right: var(--v4-gutter); }
  body.ui-v4-layout .feature-grid { gap: 8px; margin-top: 8px; }
  body.ui-v4-layout .v4-insider { margin: 8px 0 0; }
  body.ui-v4-layout .ma-container { margin-left: 0 !important; margin-right: 0 !important; }
  body.ui-v4-layout .breadcrumb-section { padding-left: var(--v4-gutter) !important; padding-right: var(--v4-gutter) !important; }
  body.ui-v4-layout .breadcrumb-section .ma-container { padding: 0 !important; }

  /* Produktseite: Galerie bis an den Rand, Buybox ohne zweite Karte */
  body.ui-v4-layout .pdp-v2-page { padding: 0 0 32px !important; }
  body.ui-v4-layout .pdp-v2-wrap { gap: 0; }
  body.ui-v4-layout .pdp-v2-buybox {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px var(--v4-gutter) 8px !important;
  }
  body.ui-v4-layout .pdp-v2-section,
  body.ui-v4-layout .pdp-v2-description,
  body.ui-v4-layout .pdp-v2-faq,
  body.ui-v4-layout .pdp-v2-ratings {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-left: var(--v4-gutter) !important;
    padding-right: var(--v4-gutter) !important;
  }

  /* Service-/Landingpages und Blog: Innenabstand einheitlich */
  body.ui-v4-layout .einstieg-inner,
  body.ui-v4-layout .blog-inner { padding-left: var(--v4-gutter); padding-right: var(--v4-gutter); }
}