/* ============================================================
   Elementor-Vertraeglichkeit — nur noch Bauliches
   ------------------------------------------------------------
   Die Gestaltung kommt vollstaendig aus cips-boost.css, der
   angehobenen Fassung des Entwurfs-Stylesheets. Hier stehen nur
   noch Regeln fuer Stellen, an denen Elementors DOM vom Entwurf
   abweicht: zusaetzliche Huellen, aus <li> gewordene <div>,
   fehlende Icon-Felder.

   Wichtig: Nichts hier darf schwerer wiegen als cips-boost.css
   (.elementor .x.x = 0,3,0). Der Container-Ruecksetzer liegt
   deshalb bei 0,2,0 und schlaegt nur Elementors eigene Vorgabe.
   ============================================================ */

/* ---- 1. Elementors Container-Vorgaben zuruecknehmen ----
   Jeder Container bekommt padding:10px und width:100%. Im Entwurf
   sind das schlichte div/ul/li ohne beides. Was der Entwurf an
   Abstaenden will, setzt cips-boost.css danach selbst. */
.elementor .e-con{
  padding: 0;
  width: auto;
  --width: auto;
  --content-width: none;
  --padding-block-start: 0; --padding-block-end: 0;
  --padding-inline-start: 0; --padding-inline-end: 0;
  --margin-block-start: 0; --margin-block-end: 0;
  --margin-inline-start: 0; --margin-inline-end: 0;
  --gap: normal;
}

/* ---- 2. Huellen aus dem Kasten-Baum nehmen ----
   Elementor legt um jedes Widget eine Huelle. Im Entwurf sind die
   Symbol-Spans direkte Flex-Kinder ihrer Karte - mit der Huelle
   dazwischen bleiben sie inline und verlieren Breite und Hoehe.
   display:contents blendet die Huelle aus dem Layout aus, ohne
   das Markup zu aendern. */
.elementor .elementor-widget-html{ display: contents; }

/* ---- 2b. Verlinkter Container ist standardmaessig inline ----
   Ein einfacher <a> ist im Entwurf ein Inline-Element; die Zeilenhoehe
   kommt dann vom umgebenden Listenpunkt. Elementor macht aus jedem
   Container einen Block, wodurch Fusszeilen-Links vier Pixel flacher
   wurden. Gewicht 0,2,1 - unter cips-boost.css, wo .nav-sub a und
   .card ihr display selbst mitbringen. */
.elementor a.e-con{ display: inline; }

/* ---- 2c. Elementors Ueberlagerung auf ::before zuruecknehmen ----
   Jeder Container traegt eine Regel fuer .e-con::before, mit der
   Elementor Farbschleier zeichnet: position:absolute, volle Groesse,
   Rahmen. Sichtbar wird sie nur, wenn ein Schleier gesetzt ist - im
   Entwurf aber steht auf ::before etwa die Schrittnummer der Liste.
   Die erbt dann die absolute Lage, nimmt keinen Platz mehr ein, und
   der Text daneben laeuft ueber die volle Breite. Hier stehen genau
   die Eigenschaften jener Regel wieder auf ihrem Ausgangswert; was
   der Entwurf selbst setzt, wiegt schwerer und bleibt. */
.elementor .e-con::before{
  position: static;
  top: auto; left: auto;
  width: auto; height: auto;
  border-style: none; border-width: 0; border-color: currentColor; border-radius: 0;
  opacity: 1; mix-blend-mode: normal; transition: none;
}

/* ---- 3. Aus <li> und <address> wurde <div> ----
   Elementor laesst als Container-Tag nur div, header, section, article,
   aside, footer, a und button zu. Der Wandler vergibt daher Markierungen
   (.cips-li, .cips-list, .cips-address, .cips-figure, .cips-nav), und
   cips-boost.css bringt zu jeder Regel mit diesen Tags eine zweite
   Fassung mit der Markierung mit. Hier ist deshalb nichts mehr noetig. */

/* ---- 4. Bildwidgets ----
   Das e-image-Widget gibt das Bild ohne eigene Huelle aus; die Groessen
   kommen also aus cips-boost.css. Uebrig bleiben die Stellen, an denen
   der Entwurf ein <figure> oder ein Logo-<span> als Traeger hatte. */
.elementor .intro-figure > *{ display: block; padding: 0; margin: 0; }
.elementor .logo > *,
.elementor .foot-mark > *{ display: block; width: auto; height: auto; padding: 0; margin: 0; }

/* ---- 5. Pfeil im Button ----
   Das e-button-Widget hat kein Icon-Feld. Der Pfeil aus dem Entwurf
   kommt als Maske auf ::after, erbt die Textfarbe und bleibt scharf. */
.elementor .btn::after{
  content: "";
  flex: 0 0 14px; width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1 7h11M8 3l4 4-4 4' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1 7h11M8 3l4 4-4 4' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor .btn:has(svg)::after{ content: none; }

/* ---- 6. Ersatz fuer die Inline-Stile des Entwurfs ----
   Elementor kann kein style-Attribut tragen; der Wandler vergibt
   stattdessen diese Klassen. Werte unveraendert.
   Im Entwurf standen diese Werte im style-Attribut und schlugen damit
   jede Regel. Die Klassen werden deshalb dreifach genannt (0,4,0) und
   liegen so ueber cips-boost.css (0,3,0) - dieselbe Rangfolge wie zuvor. */
.elementor .cips-s1.cips-s1.cips-s1{ margin: 0; }
.elementor .cips-s2.cips-s2.cips-s2{ margin-bottom: 2.2rem; }
.elementor .cips-s3.cips-s3.cips-s3{ margin-top: 1.2rem; font-size: .95rem; max-width: 30ch; }
.elementor .cips-s4.cips-s4.cips-s4{ display: flex; gap: 1.5rem; flex-wrap: wrap; }
.elementor .cips-s5.cips-s5.cips-s5{ margin-top: 1.6rem; }
.elementor .cips-s6.cips-s6.cips-s6{ font-style: normal; font-size: 1.05rem; line-height: 1.7; }
.elementor .cips-s7.cips-s7.cips-s7{ color: var(--accent); font-weight: 600; text-decoration: none; }
.elementor .cips-s8.cips-s8.cips-s8{ color: var(--accent); font-weight: 700; text-decoration: none; }
.elementor .cips-s9.cips-s9.cips-s9{ font-size: 1.05rem; color: var(--text); }

/* ---- 7. Aufklappmenue: Knopf und Untermenue sind keine Geschwister mehr ----
   Der Knopf steckt in Elementors Widget-Huelle, das Untermenue liegt
   daneben. Die Regel des Entwurfs
     .nav-drop-btn[aria-expanded="true"] + .nav-sub
   greift deshalb nicht mehr - aufgeklappt wurde nur noch beim Ueberfahren
   mit der Maus, per Klick und per Tastatur blieb es zu. Dieselbe Bedingung
   ohne Geschwisterbezug, damit sie in beiden Bauformen zieht. */
.elementor .nav-drop:has(.nav-drop-btn[aria-expanded="true"]) .nav-sub{
  opacity: 1; visibility: visible; transform: none;
}
@media (max-width: 940px){
  .elementor .nav-drop:has(.nav-drop-btn[aria-expanded="true"]) .nav-sub{ display: flex; }
}