/* ============================================================
   ELEMENTOR-BRÜCKE

   Das Design kommt aus css/app.css (Tailwind der React-Fassung, alle
   Hilfsklassen mit !important, weil Elementors Regeln ausserhalb der
   Tailwind-Ebenen liegen und sonst immer gewinnen würden). Diese Datei
   nimmt Elementors eigene Hüllen und Vorgaben aus dem Weg, damit die
   Klassen an Containern und Widgets so wirken wie im Original.

   Der Anker #jh (am <body>) hebt die Regeln über Elementors
   Per-Element-CSS (0,3,0). Übernommen von der elisabit.de-Brücke.
   ============================================================ */

/* 1. Hüllen aus dem Layout nehmen: .e-con > .e-con-inner > .elementor-element
      > .elementor-widget-container. display: contents macht die Kinder zu
      direkten Grid-/Flex-Kindern wie im React-Markup. */
.eb-unwrap > .e-con-inner,
.eb-unwrap > .elementor-element > .elementor-widget-container,
.eb-unwrap > .e-con-inner > .elementor-element > .elementor-widget-container,
.eb-unwrap-self > .elementor-widget-container {
  display: contents;
}

.eb-plain > .elementor-widget-html.eb-unwrap-self,
.eb-plain > .elementor-widget-text-editor.eb-unwrap-self,
.eb-plain > .elementor-widget-video.eb-unwrap-self {
  display: contents;
}

/* 2. Elementors Container-Variablen neutralisieren; Tailwind bestimmt das Layout. */
.eb-plain {
  --display: block;
  --content-width: 100%;
  --container-max-width: none;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --flex-wrap: nowrap;
  display: block;
}

#jh .eb-plain {
  --flex-direction: row;
  flex-direction: row;
  --align-self: auto;
  align-self: auto;
  --flex-grow: 0;
  --flex-shrink: 1;
  --flex-wrap: nowrap;
  flex-wrap: nowrap;
  /* Nicht center wie bei elisabit: seit Chrome 123 gilt align-content auch
     fuer Block-Container und schob Inhalte in hohen Grid-Zellen nach unten. */
  --align-content: normal;
  align-content: normal;
  --width: auto;
}

#jh .eb-plain,
#jh .eb-unwrap-self {
  min-width: auto;
}

.eb-plain .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

.eb-plain .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* 3. Typografie: Elementor-Kit und Widget-Vorgaben geben die Kontrolle an die
      Klassen der Vorlage zurück. */
.eb-plain .elementor-heading-title,
.eb-unwrap-self .elementor-heading-title,
.eb-plain .elementor-widget-text-editor,
.eb-plain .elementor-widget-text-editor > .elementor-widget-container,
.eb-plain .elementor-widget-html,
.eb-plain .elementor-widget-html > .elementor-widget-container {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}

/* 4. Bilder: Elementor rahmt <img> in <figure> und setzt eigene Maße;
      die Klassen am <img> (inc/elementor.php) zählen. */
.eb-plain .elementor-widget-image,
.eb-plain .elementor-widget-image figure,
.eb-plain .elementor-widget-image .elementor-image {
  display: contents;
}

#jh .eb-plain .elementor-widget-image img {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 5. Was die Vorlage über das Tag selbst bekam (h1–h5 fett, ohne
      Laufweite), geht durch das inherit oben verloren, wenn die Hülle keine
      eigene Klasse dafür trägt. */
.eb-plain .elementor-widget-heading:not([class*="font-light"], [class*="font-normal"], [class*="font-medium"], [class*="font-semibold"], [class*="font-black"]) :is(h1, h2, h3, h4, h5).elementor-heading-title {
  font-weight: 700;
}
.eb-plain .elementor-widget-heading:not([class*="tracking-"], [class*="h-display"]) :is(h1, h2, h3, h4, h5).elementor-heading-title {
  letter-spacing: 0;
}

/* 6. Kästen mit festem Seitenverhältnis (aspect-*) und mx-auto schrumpfen als
      Grid-Kind auf ihren Inhalt. Im Original gab das Bild seine Eigengröße
      vor; ein Elementor-Bild in einer display:contents-Hülle tut das nicht,
      der Kasten fiel auf 0 px (Christian auf /team). */
#jh .eb-plain[class*="aspect-"]:has(> .elementor-widget-image) {
  width: 100%;
}

/* 7. In space-y- und space-x-Containern trägt jedes Kind den Abstand als
      Margin. Eine Hülle mit display: contents hat keine Margin – dort bleibt
      sie ein Block (Abstand fehlte auf /impressum). */
#jh .eb-plain:is([class*="space-y-"], [class*="space-x-"]) > :is(.elementor-widget-html, .elementor-widget-text-editor).eb-unwrap-self {
  display: block;
}