/* b2b-uebergang.css – Produktseite ohne Extension, bis zum Relaunch.
   Die Seite ist eine normale Seite der Website (Layout „Default“). Die Produktseite steht in zwei
   Elementen „Reines HTML“ (.b2b-uebergang), dazwischen das Formular als EXT:form-Element.
   Hier steht, was auf der echten Produktseite Seitentemplate und Body-Klasse leisten.
   Die Regeln für Header, Footer und Formular kommen aus den umgeschriebenen b2b-layout.css und
   b2b-components.css; diese Datei ergänzt Rahmen, Logo und Lage des Formulars. */

/* ---------- Volle Breite: aus dem .container der Seitenvorlage ausbrechen ---------- */
.b2b-uebergang {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
body:has(.b2b-uebergang) {
  background: var(--bg);
  color: var(--fg);
  overflow-x: clip;
}
body:has(.b2b-uebergang) #content {
  padding-top: 0;
  padding-bottom: 0;
  background: var(--bg);
}
/* Kontaktband „Kontakt/Service“ über dem Footer entfällt wie auf der Produktseite: sie hat einen eigenen Kontaktblock. */
body:has(.b2b-uebergang) #sub-footer { display: none; }

/* ---------- Logo: Negativfassung mit orangefarbener Linie wie auf der Produktseite ----------
   Das Bild der Website behält Größe und Alternativtext und wird nur unsichtbar. Der Link muss ein
   Block sein: Die Website gibt dem Bild 100 % Breite, in einem schrumpfenden Link fiele es auf 101 px. */
body:has(.b2b-uebergang) #main-header > .navbar > .logo-container a {
  display: block;
  background: url("../Images/kp-logo-neg-orange.svg") left center / contain no-repeat;
}
body:has(.b2b-uebergang) #main-header > .navbar > .logo-container img { opacity: 0; }

/* ---------- „Jetzt starten“: Kopf links, Direktkontakt rechts, das Formular folgt auf derselben Fläche ---------- */
.theme-dark .b2b-section.b2b-form-follows { padding-bottom: var(--s4); }
/* Die Signalkante läuft über Sektion und Formular weiter und verblasst erst am Ende des Formulars. */
.theme-dark .b2b-section.b2b-form-follows.rail::before {
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 45%, transparent));
}

/* ---------- Formular-Element: Sandfläche in voller Breite, Formular als Karte in der Breite der Sektionen ----------
   Gilt für das Formular (.formWrapper) und nach dem Absenden für die Bestätigung, die EXT:form ohne .formWrapper
   in ein <div id="Formular-ID"> stellt. Schrift wie .b2b-main: beide stehen außerhalb der Schnipsel und erbten
   sonst die Größe der Website (ALTCHA rechnet in em). */
body:has(.b2b-uebergang .b2b-section) .formWrapper,
body:has(.b2b-uebergang .b2b-section) :has(> .form-confirmation-text) {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0 var(--gut) var(--s6);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body:has(.b2b-uebergang .b2b-section) .formWrapper::before,
body:has(.b2b-uebergang .b2b-section) :has(> .form-confirmation-text)::before {
  content: "";
  position: absolute;
  left: calc(var(--gut) - var(--rail));
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent), transparent 92%);
}
@media (max-width: 720px) {
  body:has(.b2b-uebergang .b2b-section) :is(.formWrapper, :has(> .form-confirmation-text))::before { display: none; }
}
/* Grundtypografie wie unter .theme-dark (b2b-components.css). Auf der Produktseite trägt der body .theme-dark,
   hier nur der Inhalt; ohne diese Regeln setzt „.contentContainer p“ der Website z. B. den ALTCHA-Fuß auf 18 px. */
body:has(.b2b-uebergang .b2b-section) :is(.formWrapper, :has(> .form-confirmation-text)) :is(p, ul, ol) { margin-block: 0; font-size: inherit; line-height: inherit; }
body:has(.b2b-uebergang .b2b-section) :is(.formWrapper, :has(> .form-confirmation-text)) a { color: inherit; }
body:has(.b2b-uebergang .b2b-section) :is(.formWrapper, :has(> .form-confirmation-text)) a:hover { text-decoration: none; }
/* Formular und Bestätigung in der Flucht der Sektionen. Die Regel für form braucht das Element im Selektor:
   b2b-components.css setzt „… .formWrapper form { max-width: none; margin: 0 }“ mit gleicher Spezifität. */
body:has(.b2b-uebergang .b2b-section) :is(.formWrapper, :has(> .form-confirmation-text)) > *,
body:has(.b2b-uebergang .b2b-section) .formWrapper > form {
  max-width: calc(var(--max) - 2 * var(--gut));
  margin-inline: auto;
}
/* Ab 720 px zwei Spalten: kurze Felder nebeneinander, Text, Einwilligung, Spamschutz und Knopf über die volle Breite.
   Das greift für jedes Formular aus dem Formular-Modul, auch ohne Rasterzeilen. */
@media (min-width: 720px) {
  body:has(.b2b-uebergang .b2b-section) .formWrapper form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.4rem;
  }
  body:has(.b2b-uebergang .b2b-section) .formWrapper form > * { grid-column: 1 / -1; }
  body:has(.b2b-uebergang .b2b-section) .formWrapper form > :is(.form-element-text, .form-element-email, .form-element-telephone, .form-element-url, .form-element-number, .form-element-select):not(:has(altcha-widget)) {
    grid-column: auto;
  }
}