/* Übergangsfassung, erzeugt aus EXT:kp_productpage/Resources/Public/Css/b2b-layout.css (uebergang-export.cjs). */
/* b2b-layout.css – Seitenrahmen der Produktseite: Website-Header (fest oben wie auf der Website) und
   -Footer dunkel, Sektionen mit Signalkante. Gilt nur für body:has(.b2b-uebergang) (Backend-Layout 9). */

body:has(.b2b-uebergang) {
  background: var(--bg);
  color: var(--fg);
  overflow-x: clip;
}
html:has(.b2b-uebergang) {
  scroll-behavior: smooth;
  /* Sprungziele nicht unter den festen Website-Header (100 px) schieben */
  scroll-padding-top: 110px;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.b2b-uebergang) { scroll-behavior: auto; }
}
body:has(.b2b-uebergang) :focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Website-Header: fest oben wie auf der Website, dunkel statt weiß ---------- */
body:has(.b2b-uebergang) #main-header .navbar,
body:has(.b2b-uebergang) #main-header .navbar.with-background {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
body:has(.b2b-uebergang) #main-header .navbar .meta-nav,
body:has(.b2b-uebergang) #main-header .navbar .meta-nav a,
body:has(.b2b-uebergang):not(.menu-opened) #main-header .navbar .meta-nav,
body:has(.b2b-uebergang):not(.menu-opened) #main-header .navbar .meta-nav a,
body:has(.b2b-uebergang) #main-header .navbar .country-menu {
  color: var(--fg-muted);
}
body:has(.b2b-uebergang) #main-header .navbar .meta-nav a:hover,
body:has(.b2b-uebergang) #main-header .navbar .meta-nav a:focus {
  color: var(--fg);
}
body:has(.b2b-uebergang) #main-header .navbar .country-menu,
body:has(.b2b-uebergang) #main-header .navbar .country-menu_dropdown {
  border-color: var(--line-strong);
}
body:has(.b2b-uebergang) #main-header .navbar .country-menu_dropdown {
  background: var(--bg-deep);
}
body:has(.b2b-uebergang) #main-header .navbar .hamburger-inner,
body:has(.b2b-uebergang) #main-header .navbar .hamburger-inner::before,
body:has(.b2b-uebergang) #main-header .navbar .hamburger-inner::after,
body:has(.b2b-uebergang):not(.menu-opened) #main-header .navbar .hamburger-inner,
body:has(.b2b-uebergang):not(.menu-opened) #main-header .navbar .hamburger-inner::before,
body:has(.b2b-uebergang):not(.menu-opened) #main-header .navbar .hamburger-inner::after {
  background-color: var(--fg);
}
/* Aktive Sprache: auf der Website Orange, hier im Akzent – Orange bleibt der Wortmarke vorbehalten. */
body:has(.b2b-uebergang) #main-header .navbar .meta-nav .lang-switch li.active span,
body:has(.b2b-uebergang) #main-header .navbar a[aria-current] {
  color: var(--accent-text);
}
/* Breadcrumb neben dem Logo erscheint wie auf der Website beim Scrollen; hier nur dunkle Farben. */
body:has(.b2b-uebergang) #main-header .breadcrumb,
body:has(.b2b-uebergang) #main-header .breadcrumb a,
body:has(.b2b-uebergang) #main-header .breadcrumb .kiebackpeter-icon {
  color: var(--fg-dim);
}
body:has(.b2b-uebergang) #main-header .breadcrumb a:hover,
body:has(.b2b-uebergang) #main-header .breadcrumb a:focus { color: var(--fg); }
body:has(.b2b-uebergang) #main-header .breadcrumb li:nth-child(1n+2) a::after {
  background: linear-gradient(to right, rgba(3, 14, 42, 0) 0%, var(--bg-deep) 100%);
}

/* Die Sticky-Knöpfe rechts (Kontakt, Standorte) entfallen: die Seite hat einen eigenen Kontaktblock. */
body:has(.b2b-uebergang) .stickyModule { display: none; }

/* ---------- Website-Footer dunkel ---------- */
body:has(.b2b-uebergang) #main-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  color: var(--fg-dim);
}
body:has(.b2b-uebergang) #main-footer a,
body:has(.b2b-uebergang) #main-footer .copyright {
  color: var(--fg-muted);
}
body:has(.b2b-uebergang) #main-footer a:hover { color: var(--fg); }

/* ---------- Hauptbereich und Sektionen ---------- */
body:has(.b2b-uebergang) #content.b2b-main {
  padding-top: 0;
  background: var(--bg);
}
.b2b-main {
  display: block;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.theme-dark .wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
}
.b2b-section {
  position: relative;
  display: flow-root;
  background-color: var(--bg);
  padding-block: var(--s6);
  border-top: 1px solid var(--line);
}
.b2b-section.flush {
  padding-top: 0;
  border-top: 0;
}
.b2b-section.bg-deep { background: var(--bg-deep); }
.b2b-section.bg-hero {
  border-top: 0;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(900px 480px at 85% -10%, var(--accent-glow), transparent 60%),
    linear-gradient(var(--bg-deep), var(--bg) 70%);
}
.b2b-section.bg-predict {
  background: radial-gradient(800px 420px at 10% 0%, var(--ai-glow), transparent 60%), var(--bg-deep);
}
.b2b-section.bg-cta {
  background: linear-gradient(180deg, var(--bg), var(--bg-deep));
  padding-bottom: var(--s5);
}
/* Hell: die Rollen setzt b2b-tokens.css, hier nur Fläche und Schriftfarbe */
.b2b-section.bg-light {
  background: var(--bg);
  color: var(--fg);
  border-top: 0;
}
.b2b-section.bg-deep.flush,
.b2b-section.bg-cta + .b2b-section.flush { padding-top: 0; }

/* Signalkante links */
.b2b-section.rail::before {
  content: "";
  position: absolute;
  left: calc(var(--gut) - var(--rail));
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(var(--accent), transparent 92%);
}
.b2b-section.rail.ai::before { background: linear-gradient(var(--ai), transparent 92%); }
.b2b-section.flush.rail::before { display: none; }
@media (max-width: 720px) {
  .b2b-section.rail::before { display: none; }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* Abstände zwischen Modulen einer Sektion */
.b2b-section .section-head + .b2b-ce,
.b2b-section .b2b-ce + .b2b-ce { margin-top: var(--s4); }
.b2b-section .b2b-ce + .b2b-ce:has(> .items-head) { margin-top: var(--s5); }
/* Stufenleiste der Pakete sitzt näher am Lead, wie in der Referenz */
.b2b-section .section-head + .b2b-ce--packages { margin-top: var(--s3); }
.b2b-section.bg-hero .b2b-ce--kpproduct_items { margin-top: clamp(2.5rem, 5vw, 4rem); }
.split > div > .b2b-ce:first-child { margin-top: 0; }
.split > div > .section-head + .b2b-ce { margin-top: var(--s4); }

/* Standard-Inhaltselemente in dunklen Sektionen (Text, Fußnote, Formular) */
.b2b-main .b2b-section .container,
.b2b-main .b2b-section .row { width: auto; margin: 0; padding: 0; }
.b2b-main .b2b-section section[id^="c"] + section[id^="c"],
.b2b-main .b2b-section .b2b-ce + section[id^="c"] { margin-top: var(--s3); }
.b2b-main .b2b-section .ce-bodytext,
.b2b-main .b2b-section .ce-bodytext p {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 80ch;
}
.b2b-main .b2b-section .ce-bodytext a { color: var(--accent-text); }

/* ---------- Website-Menü (Burger) auf der dunklen Seite: Fläche Experience Blue statt Orange ---------- */
body:has(.b2b-uebergang) .navbar #main-nav::before { background-color: var(--bg-deep); }
body:has(.b2b-uebergang) .navbar #nav-menu-container .nav-menu .nav-menu-item--lev0 a::before { background-color: var(--accent); }
body:has(.b2b-uebergang) .navbar #nav-menu-container .nav-menu .nav-menu-item--lev1 a::before,
body:has(.b2b-uebergang) .navbar #nav-menu-container .nav-menu .nav-menu-item--headline a::before { background-color: var(--accent-glow); }
body:has(.b2b-uebergang) .navbar #nav-menu-container .country-menu .current { border-color: var(--line-strong); }