/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

body {
  overflow-x: hidden;
}

/* Language Dropdown - Desktop */
#language-dropdown {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 30px;
  right: -30px;
  min-width: 240px;
  width: 240px;
  border-radius: 0px 0px 10px 10px;
  background: #FEFEFE;
  border: 1px solid #22222210;
  transition: all 0.2s ease;
  transform: translateY(10px);
  z-index: 999;
  pointer-events: none;
  padding: 5px;
  overflow: hidden;
  gap: 0 !important;
  row-gap: 0 !important;
}

#language-dropdown.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;   /* FIX: Hover/Klick erst dadurch möglich */
}

/* --- Language dropdown: Karten-Zeilen (1:1 zum Design) --- */
#language-dropdown > .e-child {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
}

/* Hover-Band wie im Design (leichtes Teal) */
#language-dropdown > .e-child:hover {
  background: #F2FAFA;
}

/* Flagge – gefüllter grauer Kreis (1:1 zum Design), Flagge zentriert */
#language-dropdown .elementor-widget-icon {
  width: auto !important;
}
#language-dropdown .elementor-widget-icon .elementor-icon {
  width: 28px !important;
  height: 28px !important;
  background: #f0f2f3 !important;
  border: none !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
#language-dropdown .elementor-widget-icon .elementor-icon svg {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  overflow: hidden;
}

/* Sprachname – groß & fett (Satoshi 700, 22px) wie im Design */
#language-dropdown .elementor-widget-heading .elementor-heading-title {
  font-family: "Satoshi 700", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  color: #101923 !important;
}

/* Sprachkürzel (DE/FR/EN) per CSS ergänzt — an DOM-Reihenfolge gebunden */
#language-dropdown .elementor-widget-heading .elementor-heading-title::after {
  display: block;
  font-family: "Menlo", monospace;
  font-weight: 400;
  font-size: 12px;
  color: #9aa4a6;
  margin-top: 1px;
}
#language-dropdown > .e-child:nth-child(1) .elementor-heading-title::after { content: "DE"; }
#language-dropdown > .e-child:nth-child(2) .elementor-heading-title::after { content: "FR"; }
#language-dropdown > .e-child:nth-child(3) .elementor-heading-title::after { content: "EN"; }

/* Französisch ans Ende der Liste (nur visuell, DOM-Reihenfolge bleibt) */
#language-dropdown > .e-child:nth-child(2) { order: 1; }

/* Teal-Punkt an der aktiven Sprache: standardmäßig Deutsch (1. Zeile);
   für andere Sprache Klasse "current-lang" an die Zeile geben */
#language-dropdown > .e-child.current-lang::after,
#language-dropdown > .e-child:first-child:not(.current-lang-off)::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #009BA5;
}

#language-trigger {
  cursor: pointer;
}

/* Icons-Zentrieren */

.elementor-widget-icon .elementor-icon-wrapper,
.elementor-widget-icon .elementor-icon {
  line-height: 0 !important;
}

/* HEADER - SEARCH BOX Desktop */
#search,
#search-close {
  display: flex;
  justify-content: center;
  cursor: pointer;
  z-index: 101;
}

#search-close {
  display: none;
}

/* Fallback: Container-ID hat versehentlich einen Punkt ("searchbox.").
   Solange die ID im Editor nicht korrigiert ist, greifen die Toggle-Regeln
   zusaetzlich per Attribut-Selektor. */
#searchbox,
[id="searchbox."] {
  /* Position ABSOLUT innerhalb header */
  position: absolute;
  left: 0;
  /* Animation - Vorhang: die Leiste klappt von oben nach unten auf. Die
     untere Kante der Maske laeuft synchron mit dem Inhalt nach unten
     (siehe --vse-search-push weiter unten). Der Inhalt der Leiste faehrt
     dabei minimal mit, damit das Aufklappen nicht starr wirkt. */
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  /* Schliessen: alles im selben Takt, damit die Leiste sichtbar nach oben
     zuklappt statt vorher wegzublenden. */
  transition:
    clip-path 380ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 380ms;
}

#searchbox > .e-con-inner,
[id="searchbox."] > .e-con-inner {
  transform: translateY(-8px);
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

.search-box-desktop {
  max-width: 510px !important;
}

#searchbox.visible,
[id="searchbox."].visible {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  /* Hinweis: solange die Maske aktiv ist, wuerde sie die Live-Ergebnisliste
     abschneiden, die unter der Leiste ausklappt. Nach dem Aufklappen setzt
     script.js deshalb die Klasse "entfaltet" (siehe unten). */
  /* Oeffnen: Inhalt sofort da, das Aufklappen uebernimmt die Maske. */
  transition:
    clip-path 380ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 140ms linear,
    visibility 380ms;
}

#searchbox.visible > .e-con-inner,
[id="searchbox."].visible > .e-con-inner {
  transform: translateY(0);
}

/* Aufklappen fertig: Maske weg, damit die Ergebnisliste sichtbar bleibt */
#searchbox.visible.entfaltet,
[id="searchbox."].visible.entfaltet {
  clip-path: none;
}

/* Weniger Bewegung: nur ein-/ausblenden */
@media (prefers-reduced-motion: reduce) {
  #searchbox,
  [id="searchbox."] {
    clip-path: none;
    transition: opacity 200ms ease, visibility 200ms;
  }
  #searchbox > .e-con-inner,
  [id="searchbox."] > .e-con-inner {
    transform: none;
    transition: none;
  }
}

/* Geoeffnete Suche schiebt den Seiteninhalt nach unten, statt ihn zu
   ueberdecken: Die Kopfzeile waechst um genau den Betrag, um den das
   Suchfeld unter sie hinausragt. --vse-search-push wird beim Oeffnen
   per JS gesetzt und beim Schliessen wieder auf 0 zurueckgesetzt. */
header.elementor-location-header {
  padding-bottom: var(--vse-search-push, 0px);
  transition: padding-bottom 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   NAVIGATION STICKY  (Kundenliste Punkt "Navigation sticky", 03.09.2026)
   --------------------------------------------------------------------------
   Ziel: NUR die dunkle Navi-Leiste bleibt beim Scrollen oben stehen. Die
   weisse Top-Leiste (Downloads / Karriere / Sprache / Suche) scrollt weg.

   WARUM HIER UND NICHT IM ELEMENTOR:
   Die dunkle Leiste ist der Container d6d4d14 in der Kopfzeilen-Vorlage
   (Post-ID 11696). Sie steht im Editor auf "Position: Absolut" mit
   "Versatz oben: 60px" und haengt am Elternteil #6cbbd73 (position:relative).
   Elementors Bewegungseffekt "Sticky" legt beim Andocken einen unsichtbaren
   Platzhalter-Klon in den Fluss, damit der Inhalt nicht springt. Bei einem
   absolut positionierten Container gibt es aber keinen Platz zu reservieren
   und keine Position im Fluss, aus der ein Umschaltpunkt berechnet werden
   kann -> Elementor schaltet sofort um und der Klon wird sichtbar
   (doppeltes Menue). Natives CSS-Sticky braucht beides nicht.

   WARUM DER NEGATIVE WERT:
   Der Header klebt erst, wenn seine Oberkante 82px ueber den Fensterrand
   gewandert ist. Danach sitzt die dunkle Leiste mit 30px Luft zum
   Fensterrand, die Top-Leiste ist nach oben aus dem Bild.
   Rechnung: 52px Top-Leiste + 60px Versatz = 112px von der Header-Oberkante
   bis zur Oberkante der Leiste (gemessen bei 1440px Fensterbreite).
   Gewuenschter Abstand oben 30px  ->  112 - 30 = 82.
   Ab 1024px ist die Top-Leiste ausgeblendet (elementor-hidden-tablet) und
   die Leiste sitzt bereits buendig oben. Dort bleibt der Offset 0, sonst
   wuerde sie schon bei Scroll 0 um 30px nach unten rutschen.

   WENN SICH ETWAS AENDERT:
   Wird der Versatz der Leiste oder die Hoehe der Top-Leiste im Editor
   geaendert, muss der Wert -112px mit angepasst werden.

   Siehe auch die Regel direkt darueber: --vse-search-push laesst den Header
   wachsen, wenn die Suche aufklappt. Das funktioniert mit sticky weiter,
   weil sticky-Elemente im Fluss bleiben.
   ========================================================================== */
header.elementor-location-header {
  position: sticky;
  top: -82px;
  z-index: 1000;
}

@media (max-width: 1024px) {
  header.elementor-location-header {
    top: 0;
  }
}

/* HEADER - SEARCH BOX Mobile */

#search-mobile,
#search-close-mobile {
  cursor: pointer;
  z-index: 101;
}

#search-close-mobile {
  display: none;
}

/* Overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  /* gleiche Dauer/Kurve wie die Suchleiste, damit beides im Takt ausblendet */
  transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 99;
}

.search-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Search Box */
#searchbox-mobile {
  position: absolute;
  top: 79px;
  left: 0;
  width: calc(100% - 40px);
  max-width: 1280px;
  margin: 0 20px;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.18, 0.88, 0.32, 1.28);
  z-index: 100;
}

#searchbox-mobile.visible {
  max-height: 100px;
  opacity: 1;
  visibility: visible;
  padding: 20px;
}

/* main-offcanvas-menu */

/* entfern border von submenu */

#main-offcanvas-menu .sub-menu,
#main-offcanvas-menu .sub-menu li {
  border: none !important;
}

/* Style submenu links */

#main-offcanvas-menu .sub-menu li a {
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.32px;
}

/* indikator */

#main-offcanvas-menu li.menu-item-has-children>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#main-offcanvas-menu .elementor-nav-menu--dropdown .menu-item-has-children>a[aria-expanded="true"] .sub-arrow {
  transform: rotate(90deg);
}

/* Mobile-Menü: alle Einträge mit Dropdown (Haupt- UND Untermenü) –
   Pfeil-Icon rechts anlegen */
.elementor-nav-menu--dropdown a.has-submenu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Off-Canvas-Menü (Mobil + Tablet): Pfeil-Icon rechts ausrichten.
   Greift auf allen Ebenen, da das Dropdown-Nav nur <= Tablet gerendert wird. */
.main-offcanvas-menu .elementor-nav-menu--dropdown li.menu-item-has-children > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
Desktop große, diese probe menu steht in impressum seite  
==========================================================================  */

/* UL - Flex layout horizontal */
.mega-menu-container ul.elementor-nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;   /* gleiche Spaltenhoehe -> durchgehende Trennlinien */
  gap: 0 !important;                 /* Abstand kommt aus dem Spalten-Padding (symmetrisch um die Linie) */
}

/* ==========================================================================
   2. (COLUMNS) - jedes Top-Level-Item ist eine Spalte
   ========================================================================== */

.mega-menu-container ul.elementor-nav-menu>li {
  display: flex !important;
  flex-direction: column !important;
}

/* Vertikale Trennlinien zwischen den Spalten (16px Luft je Seite, keine Linie nach der letzten) */
.mega-menu-container ul.elementor-nav-menu>li {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.mega-menu-container ul.elementor-nav-menu>li:first-child {
  padding-left: 0 !important;
}
.mega-menu-container ul.elementor-nav-menu>li:last-child {
  padding-right: 0 !important;
}
.mega-menu-container ul.elementor-nav-menu>li:not(:last-child) {
  border-right: 1px solid #e5e9ea !important;
}
/* Trennlinien über die volle Container-Höhe: vertikales Padding vom Nav-Widget
   in die Spalten verlagern, damit border-right der li von oben bis unten reicht */
.mega-menu-container .elementor-widget-nav-menu {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.mega-menu-container .elementor-nav-menu--main,
.mega-menu-container ul.elementor-nav-menu {
  height: 100% !important;
}
.mega-menu-container ul.elementor-nav-menu>li {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
/* Titel nicht mitwachsen lassen: Elementor setzt flex-grow:1 -> bei gleicher
   Spaltenhoehe zieht sonst der Titel kurzer Spalten die Leerhoehe in sich auf
   (grosser Abstand Titel<->Unterpunkte). flex-grow:0 haelt den Titel bei 24px. */
.mega-menu-container ul.elementor-nav-menu>li>a.elementor-item,
.mega-menu-container ul.elementor-nav-menu>li>span.elementor-item {
  flex-grow: 0 !important;
}

/* ==========================================================================
   3. PARENT TITLES
   ========================================================================== */

.mega-menu-container ul.elementor-nav-menu>li>a.elementor-item {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #080F0F !important;
  margin-bottom: 20px !important;
  padding: 0px 0px 0px 30px !important;            /* BEHALTEN: 10px Abstand Icon↔Text */
  justify-content: flex-start !important;          /* BEHALTEN: Text direkt neben Icon (fixt großen Abstand bei "Security") */
  white-space: normal !important;
  word-wrap: break-word !important;
  height: auto !important;
  border-radius: 4px !important;
}

/* Fix: Erste Spalte bekommt gleichen margin-inline-start wie die anderen */
.mega-menu-container .elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:first-child>a.elementor-item {
  margin-inline-start: 5px !important;
}

/* Parent Title Hover (wiederhergestellt — Überschriften sind klickbar) */
.mega-menu-container ul.elementor-nav-menu>li>a.elementor-item:hover {
  background-color: #F2FAFA;
  box-shadow: -3px 0 0 8px #F2FAFA;
  border-radius: 4px !important;
  transition: all 0.3s ease;
}

/* Versteckte Titel (automatisch per PHP) */
.mega-menu-container li.vse-hidden-title>a.elementor-item,
.mega-menu-container li.vse-hidden-title>span.elementor-item {
  display: none !important;
}

/* Menü-Option "Unterstreichen": Trennlinie unter dem Punkt (Klasse vse-underline aus functions.php).
   Wo die Linie haengt, steht in den beiden Regeln darunter - am Link selbst darf sie nicht sitzen,
   sonst laeuft die Hover-Box (box-shadow mit 8px Spread) darueber hinaus.
   align-items: center haelt den 20px hohen Text in der 24px hohen Zeile (Elementor setzt
   min-height: 24px) mittig. So deckt er sich mit dem Icon, das per background-position-y
   bei 2px sitzt, und die Hover-Box bekommt oben und unten gleich viel Luft. */
.mega-menu-container ul.elementor-nav-menu>li.vse-underline>a.elementor-item,
.mega-menu-container .elementor-nav-menu--main ul.sub-menu li.vse-underline>a.elementor-sub-item {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  background-position-y: 2px !important;
}

/* Titel-Ebene: Linie sitzt als border-top an der Unterpunkt-Liste, nicht am Link.
   Am <li> kann sie nicht haengen - dessen padding-bottom (24px) ist der untere
   Spaltenabstand. Die Abstaende bleiben in Summe unveraendert:
   10px Titel<->Linie (margin-bottom des Links), 20px Linie<->erster Unterpunkt
   (padding-top der Liste). Die Hover-Box reicht 8px unter den Link, endet also
   2px vor der Linie. */
.mega-menu-container ul.elementor-nav-menu>li.vse-underline>a.elementor-item {
  margin-bottom: 10px !important;
}

.mega-menu-container ul.elementor-nav-menu>li.vse-underline>ul.sub-menu {
  border-top: 1px solid #e5e9ea !important;
  padding-top: 20px !important;
}

/* Unterpunkte: Linie und Abstand liegen am <li>, nicht am Link. Die Hover-Box
   ist ein box-shadow mit 8px Spread um den Link - laege die Linie am Link,
   wuerde die Box zwangslaeufig darueber hinauslaufen. Am <li> bleiben 10px
   Abstand, die Box endet also 2px vor der Linie. */
.mega-menu-container .elementor-nav-menu--main ul.sub-menu li.vse-underline {
  border-bottom: 1px solid #e5e9ea !important;
  padding-bottom: 10px !important;
}
/* Spalten mit unterstrichenen Unterpunkten: kleinerer Abstand zwischen den Punkten
   (das padding-bottom der Linie vergroessert ihn sonst gegenueber anderen Spalten). */
.mega-menu-container ul.elementor-nav-menu>li>ul.sub-menu:has(> li.vse-underline) {
  gap: 12px !important;
  row-gap: 12px !important;
}

/* ==========================================================================
   4. SUBMENUS
   ========================================================================== */

.mega-menu-container ul.elementor-nav-menu>li>ul.sub-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px;
  width: 100% !important;
}

/* Submenu links */
.mega-menu-container .elementor-nav-menu--main ul.sub-menu li a.elementor-sub-item {
  font-family: Satoshi;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: #080F0F !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 30px !important;          /* BEHALTEN: 10px Abstand Icon↔Text */
  margin: 0 !important;
  display: flex !important;
  width: 100% !important;                 /* Unterpunkte über die volle Spaltenbreite */
  height: auto !important;
  border-radius: 4px !important;
}

/* BEHALTEN: einheitliche Icon-Größe für ALLE Mega-Menü-Punkte (Titel + Unterpunkte) */
.mega-menu-container ul.elementor-nav-menu a.elementor-item,
.mega-menu-container ul.elementor-nav-menu a.elementor-sub-item {
  background-size: 20px 20px !important;
  background-repeat: no-repeat !important;
}

/* Mega-Menu Hover-Effekt: Hintergrund-Box (Original wiederhergestellt) */
.mega-menu-container .elementor-nav-menu--main ul.sub-menu li a.elementor-sub-item:hover {
  background-color: #F2FAFA;
  box-shadow: 0 0 0 8px #F2FAFA;
  border-radius: 4px !important;
  transition: all 0.3s ease;
}

/* Kein Clipping: auch Eltern-Container ueber mega-menu-container */
.mega-menu-container,
.mega-menu-container .elementor-widget-nav-menu,
.mega-menu-container .elementor-nav-menu--main,
.mega-menu-container .elementor-nav-menu--main .elementor-nav-menu,
.mega-menu-container .elementor-nav-menu--main .elementor-nav-menu > li,
.mega-menu-container .elementor-nav-menu--main ul.sub-menu {
  overflow: visible !important;
}

/* Icons werden per Inline-Style über die Mediathek gesetzt (siehe functions.php) */

/* ==========================================================================
   11. FIXES & OVERRIDES
   ========================================================================== */

/* Submenus ohne pos absolut */
.mega-menu-container ul.sub-menu {
  position: static !important;
}

/* Reset default list styling */
.mega-menu-container ul,
.mega-menu-container li {
  margin: 0 !important;
  padding-left: 0 !important;
}

/* ==========================================================================
 end fur menu dropdown
 ========================================================================== */

/* Navigation Arrows - Default State */
.elementor-swiper-button,
.elementor-swiper-button-prev,
.elementor-swiper-button-next {
  width: 43px !important;
  height: 43px !important;
  min-width: 43px !important;
  min-height: 43px !important;
  border: 2px solid rgba(34, 34, 34, 0.6) !important;
  border-radius: 9999px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  overflow: visible !important;
}

/* Pseudo-element für hover background */
.elementor-swiper-button::before,
.elementor-swiper-button-prev::before,
.elementor-swiper-button-next::before {
  content: '' !important;
  position: absolute !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  transition: background 0.2s ease !important;
  z-index: -1 !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Hover State */

.elementor-swiper-button:hover::before,
.elementor-swiper-button-prev:hover::before,
.elementor-swiper-button-next:hover::before {
  background: #E3000B !important;
}

/* Arrow color on hover (SVG stroke) */
.elementor-swiper-button:hover svg,
.elementor-swiper-button-prev:hover svg,
.elementor-swiper-button-next:hover svg,
.elementor-swiper-button:hover svg path,
.elementor-swiper-button-prev:hover svg path,
.elementor-swiper-button-next:hover svg path {
  stroke: #FFFFFF !important;
}

/* Outline-Pfeile: Elementor-Fill unterdrücken. Sonst füllt
   fill:var(--arrow-normal-color) die offenen Konturen und der Pfeil
   wirkt "gebrochen"/uneben. Die Farbe kommt bei diesen Icons über stroke. */
.elementor-swiper-button svg,
.elementor-swiper-button-prev svg,
.elementor-swiper-button-next svg,
.elementor-swiper-button svg path,
.elementor-swiper-button-prev svg path,
.elementor-swiper-button-next svg path {
  fill: none !important;
}

/* Light arrows for carousels on dark sections: white arrow + light border.
   Add the class "arrows-light" to the widget. Hover behaviour unchanged. */
.arrows-light .elementor-swiper-button,
.arrows-light .elementor-swiper-button-prev,
.arrows-light .elementor-swiper-button-next {
  border-color: rgba(255, 255, 255, 0.6) !important;
}
.arrows-light .elementor-swiper-button svg,
.arrows-light .elementor-swiper-button-prev svg,
.arrows-light .elementor-swiper-button-next svg,
.arrows-light .elementor-swiper-button svg path,
.arrows-light .elementor-swiper-button-prev svg path,
.arrows-light .elementor-swiper-button-next svg path {
  stroke: #FFFFFF !important;
}

/* Desktop only (>1024px): larger red hover circle (54px instead of 42px) */
@media (min-width: 1025px) {
  .elementor-swiper-button::before,
  .elementor-swiper-button-prev::before,
  .elementor-swiper-button-next::before {
    width: 54px !important;
    height: 54px !important;
  }
}

/* Larger arrows on phone + tablet (<=1024px): 40px instead of 32px */
@media (max-width: 1024px) {
  .elementor-swiper-button,
  .elementor-swiper-button-prev,
  .elementor-swiper-button-next {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

.elementor-button-icon svg {
  fill: #00000000 !important;
}

/* ==========================================================================
  Elementor Buttons - VSE Figma variants (button_type dropdown driven)
  Dropdown-Werte (functions.php): m-circle (Standard), m-nocircle, m-invert,
  s-circle, s-invert, text-dark, text-white, text-red, glass, m-grey.

  Groesse und Pfeil-Kreis kommen aus Variablen, damit sich M und S nur in
  vier Werten unterscheiden statt in eigenen Regelbloecken. Dadurch laesst
  sich die Groesse auch per Media Query umschalten (siehe unten: ab Tablet
  abwaerts fallen alle M-Varianten auf die S-Masse zurueck).

  Freistehende Pfeile (m-nocircle, text-*) sind eine Maske und uebernehmen
  ihre Farbe aus --vse-btn-pfeil bzw. currentColor - kein eingebackenes SVG,
  die Farbe ist also im Stil-Tab von Elementor steuerbar. Der Pfeil im Kreis
  bleibt ein background-image, weil dort Kreisfarbe und Pfeilfarbe
  unterschiedlich sind.
========================================================================== */

.elementor-button-m-circle .elementor-button,
.elementor-button-m-nocircle .elementor-button,
.elementor-button-m-invert .elementor-button,
.elementor-button-s-circle .elementor-button,
.elementor-button-s-invert .elementor-button,
.elementor-button-text-dark .elementor-button,
.elementor-button-text-white .elementor-button,
.elementor-button-text-red .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.elementor-button-m-circle .elementor-button-content-wrapper,
.elementor-button-m-nocircle .elementor-button-content-wrapper,
.elementor-button-m-invert .elementor-button-content-wrapper,
.elementor-button-s-circle .elementor-button-content-wrapper,
.elementor-button-s-invert .elementor-button-content-wrapper,
.elementor-button-text-dark .elementor-button-content-wrapper,
.elementor-button-text-white .elementor-button-content-wrapper,
.elementor-button-text-red .elementor-button-content-wrapper,
.elementor-button-m-circle .elementor-button-text,
.elementor-button-m-nocircle .elementor-button-text,
.elementor-button-m-invert .elementor-button-text,
.elementor-button-s-circle .elementor-button-text,
.elementor-button-s-invert .elementor-button-text,
.elementor-button-text-dark .elementor-button-text,
.elementor-button-text-white .elementor-button-text,
.elementor-button-text-red .elementor-button-text {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.elementor-button-m-circle .elementor-button-text::after,
.elementor-button-m-nocircle .elementor-button-text::after,
.elementor-button-m-invert .elementor-button-text::after,
.elementor-button-s-circle .elementor-button-text::after,
.elementor-button-s-invert .elementor-button-text::after,
.elementor-button-text-dark .elementor-button-text::after,
.elementor-button-text-white .elementor-button-text::after,
.elementor-button-text-red .elementor-button-text::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Groessen-Achse: nur diese vier Werte trennen M von S. */

.elementor-button-m-circle,
.elementor-button-m-nocircle,
.elementor-button-m-invert {
  --vse-btn-hoehe: 48px;
  --vse-btn-polster: 28px;
  --vse-btn-kreis: 36px;
  --vse-btn-pfeil-groesse: 16px;
}

.elementor-button-s-circle,
.elementor-button-s-invert {
  --vse-btn-hoehe: 40px;
  --vse-btn-polster: 24px;
  --vse-btn-kreis: 28px;
  --vse-btn-pfeil-groesse: 14px;
}

/* Auf Telefon und Tablet ist die M-Variante zu wuchtig - dort wie S. */
@media (max-width: 1024px) {
  .elementor-button-m-circle,
  .elementor-button-m-nocircle,
  .elementor-button-m-invert {
    --vse-btn-hoehe: 40px;
    --vse-btn-polster: 24px;
    --vse-btn-kreis: 28px;
    --vse-btn-pfeil-groesse: 14px;
  }
}

.elementor-button-m-circle .elementor-button,
.elementor-button-m-nocircle .elementor-button,
.elementor-button-m-invert .elementor-button,
.elementor-button-s-circle .elementor-button,
.elementor-button-s-invert .elementor-button {
  height: var(--vse-btn-hoehe);
  padding: 0 var(--vse-btn-polster);
}

.elementor-button-m-circle .elementor-button,
.elementor-button-m-invert .elementor-button,
.elementor-button-s-circle .elementor-button,
.elementor-button-s-invert .elementor-button {
  padding-right: 6px;
}

.elementor-button-m-circle .elementor-button-text::after,
.elementor-button-m-invert .elementor-button-text::after,
.elementor-button-s-circle .elementor-button-text::after,
.elementor-button-s-invert .elementor-button-text::after {
  width: var(--vse-btn-kreis);
  height: var(--vse-btn-kreis);
  border-radius: 9999px;
  background-size: var(--vse-btn-pfeil-groesse) var(--vse-btn-pfeil-groesse);
}

/* Red family: bg red -> dark, white text */

.elementor-button-m-circle .elementor-button,
.elementor-button-s-circle .elementor-button,
.elementor-button-m-nocircle .elementor-button {
  background-color: #E3000B;
  color: #F8F9FA;
}

.elementor-button-m-circle .elementor-button:hover,
.elementor-button-s-circle .elementor-button:hover,
.elementor-button-m-nocircle .elementor-button:hover {
  background-color: #222222;
}

.elementor-button-m-circle .elementor-button-text::after,
.elementor-button-s-circle .elementor-button-text::after {
  background-color: #F8F9FA;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23E3000B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Freistehender Pfeil, Farbe per Variable (siehe Masken-Regel weiter unten). */
.elementor-button-m-nocircle .elementor-button:hover {
  --vse-btn-pfeil: #E3000B;
}

/* Invert family: white bg, text dark -> teal */

.elementor-button-m-invert .elementor-button,
.elementor-button-s-invert .elementor-button {
  background-color: #F8F9FA;
  color: #222222;
}

.elementor-button-m-invert .elementor-button:hover,
.elementor-button-s-invert .elementor-button:hover {
  color: #009BA5;
}

.elementor-button-m-invert .elementor-button-text::after,
.elementor-button-s-invert .elementor-button-text::after {
  background-color: #009BA5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23F8F9FA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.elementor-button-m-invert .elementor-button:hover .elementor-button-text::after,
.elementor-button-s-invert .elementor-button:hover .elementor-button-text::after {
  background-color: #222222;
}


/* Text-link buttons: transparent, bare arrow (no circle) */

.elementor-button-text-dark .elementor-button,
.elementor-button-text-white .elementor-button,
.elementor-button-text-red .elementor-button {
  background-color: transparent;
  color: #222222;
  padding: 0;
  height: auto;
  border-radius: 0;
  font-size: inherit;
  line-height: inherit;
}

.elementor-button-text-dark .elementor-button-text::after,
.elementor-button-text-white .elementor-button-text::after,
.elementor-button-text-red .elementor-button-text::after {
  background-color: transparent;
  border-radius: 0;
  width: 1.1em;
  height: 1.1em;
  background-size: contain;
}

.elementor-button-text-dark .elementor-button:hover,
.elementor-button-text-white .elementor-button:hover,
.elementor-button-text-red .elementor-button:hover {
  background-color: transparent;
}

/* text-dark: dunkler Text mit dunklem Pfeil (currentColor). Beim Hover geht der
   Text auf Petrol, der Pfeil auf Rot - deshalb wird --vse-btn-pfeil erst im
   Hover gesetzt und loest sich im Ruhezustand auf currentColor auf. */
.elementor-button-text-dark .elementor-button:hover {
  color: #009BA5;
  --vse-btn-pfeil: #E3000B;
}

/* text-white: heller Text mit hellem Pfeil (currentColor) fuer dunkle Flaechen.
   Beim Hover bleibt der Text hell, nur der Pfeil wird rot. */
.elementor-button-text-white .elementor-button {
  color: #F8F9FA;
}

.elementor-button-text-white .elementor-button:hover {
  --vse-btn-pfeil: #E3000B;
}

/* text-red: dunkler Text mit rotem Pfeil. Beim Hover wechselt nur der Text auf
   Petrol, der Pfeil bleibt rot - darum eine eigene Pfeilfarbe statt
   currentColor, die im Hover nicht ueberschrieben wird. */
.elementor-button-text-red .elementor-button {
  --vse-btn-pfeil: #E3000B;
}

.elementor-button-text-red .elementor-button:hover {
  color: #009BA5;
}

/* Freistehende Pfeile als Maske: die Flaeche wird eingefaerbt, die Form kommt
   aus dem SVG. Standard ist currentColor, der Pfeil folgt also der im
   Stil-Tab gewaehlten Textfarbe; --vse-btn-pfeil setzt ihn abweichend. */
.elementor-button-m-nocircle .elementor-button-text::after,
.elementor-button-text-dark .elementor-button-text::after,
.elementor-button-text-white .elementor-button-text::after,
.elementor-button-text-red .elementor-button-text::after {
  background-image: none;
  background-color: var(--vse-btn-pfeil, currentColor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Full-width: Elementor "Justify" alignment stretches the button */

.elementor-button-m-circle.elementor-align-justify .elementor-button,
.elementor-button-m-nocircle.elementor-align-justify .elementor-button,
.elementor-button-m-invert.elementor-align-justify .elementor-button,
.elementor-button-s-circle.elementor-align-justify .elementor-button,
.elementor-button-s-invert.elementor-align-justify .elementor-button,
.elementor-button-text-dark.elementor-align-justify .elementor-button,
.elementor-button-text-white.elementor-align-justify .elementor-button,
.elementor-button-text-red.elementor-align-justify .elementor-button {
  width: 100%;
  justify-content: center;
}

/* Glass button (button_type "glass"): translucent white bg, white text,
   no arrow. Standalone variant (not part of the circle/arrow matrix). */

.elementor-button-glass .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: 9999px;
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.elementor-button-glass .elementor-button-text {
  color: #ffffff;
}

.elementor-button-glass .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.elementor-button-glass.elementor-align-justify .elementor-button {
  width: 100%;
}


/* Button-M-grey (button_type "m-grey"): pill with thin grey outline,
   transparent bg, grey text (border & text same grey), no arrow. Beim Hover
   wechseln Rahmen und Text gemeinsam auf Petrol. Standalone variant. */

.elementor-button-m-grey .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 9999px;
  border: 1.5px solid #a2a3a4;
  font-family: "Satoshi", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #a2a3a4;
  background-color: transparent;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.elementor-button-m-grey .elementor-button-text {
  color: #a2a3a4;
}

.elementor-button-m-grey .elementor-button:hover {
  border-color: #009BA5;
  color: #009BA5;
}

.elementor-button-m-grey .elementor-button:hover .elementor-button-text {
  color: #009BA5;
}

.elementor-button-m-grey.elementor-align-justify .elementor-button {
  width: 100%;
}

/* -------------------------
 Call BTN
------------------------- */

.call-button svg {
  height: 23px;
  width: 23px;
}

.call-button span {
  align-items: center;
}

.call-button:hover svg path {
  fill: #101923;
}

/* akkordeon downloads- title und symbol */
.akkordeon-downloads .e-n-accordion-item>.e-n-accordion-item-title {
  display: flex;
  justify-content: space-between;
}

/* akkordeon downloads- rotation effekt  */
.akkordeon-downloads .e-n-accordion-item-title-icon .e-opened {
  display: none !important;
}

.akkordeon-downloads .e-n-accordion-item-title-icon .e-closed {
  display: flex !important;
  transition: transform 0.3s ease;
}

.akkordeon-downloads .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-closed {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .call-button span {
    gap: 10px !important;
  }
}

@media (max-width: 768px) {
  .call-button svg {
    width: 20px;
    height: 20px;
  }
}

/* icon-list*/
@media (max-width: 768px) {
  .icon_list .elementor-icon-list-items {
    flex-direction: column !important;
    gap: 15px !important;
    align-items: start !important;
  }
}

/* tabs */
.custom_tabs .e-n-tabs-heading {
  background-color: white;
  width: fit-content;
  margin: 0 auto;
  border-radius: 100px;
  border: 2px solid white;
}

@media (max-width: 768px) {
  .e-n-tabs-heading {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    max-width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    box-sizing: border-box;
  }

  .e-n-tabs-heading::-webkit-scrollbar {
    display: none;
  }

  .e-n-tabs-heading {
    scrollbar-width: none;
  }
}

/* karusell */

/* Nur Desktop (>1024px) – auf Handy/Tablet kein Slide-Padding */
@media (min-width: 1025px) {
  .carousel-abstand .swiper-slide {
    padding: 10px !important;
  }
}

/* carousel-abstand: auf Handy/Tablet (<=1024px) keinen Pfeil-Hover
   (kein roter Kreis, keine Farbänderung – Touch löst sonst Sticky-Hover aus) */
@media (max-width: 1024px) {
  .carousel-abstand .elementor-swiper-button:hover::before,
  .carousel-abstand .elementor-swiper-button-prev:hover::before,
  .carousel-abstand .elementor-swiper-button-next:hover::before {
    background: transparent !important;
  }
  .carousel-abstand .elementor-swiper-button:hover svg,
  .carousel-abstand .elementor-swiper-button-prev:hover svg,
  .carousel-abstand .elementor-swiper-button-next:hover svg,
  .carousel-abstand .elementor-swiper-button:hover svg path,
  .carousel-abstand .elementor-swiper-button-prev:hover svg path,
  .carousel-abstand .elementor-swiper-button-next:hover svg path {
    stroke: #222222 !important;
  }
}

@media (min-width: 1025px) {
  .slider .swiper {
    overflow: visible;
  }

  .slider .swiper {
    clip-path: inset(0 -200% 0 0);
  }
}

/*----- Scale hover -----*/
.transform:hover {
  transform: scale(1.02) !important;
  transition: transform 0.3s ease !important;
}

/* entfern hover in mobile */
@media (max-width: 767px) {
  .transform:hover {
    transform: none !important;
  }
}

.carousel-abstand-events .swiper-slide {
  padding: 15px 0px !important;

}

/* FAQ */
.custom_faq .e-n-accordion-item>.e-n-accordion-item-title>.e-n-accordion-item-title-icon {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 90px !important;
  display: flex !important;
  align-items: center !important;
  z-index: 3;
}

@media (max-width: 1024px) {
  .custom_faq .e-n-accordion-item>.e-n-accordion-item-title>.e-n-accordion-item-title-icon {
    width: 60px !important;
  }
}

@media (max-width: 767px) {
  .custom_faq .e-n-accordion-item>.e-n-accordion-item-title>.e-n-accordion-item-title-icon {
    width: 60px !important;
  }
}

.custom_faq .e-n-accordion-item-title {
  display: flex;
  align-items: stretch;
}

.custom_faq .e-n-accordion-item-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  background: #101923 !important;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

.custom_faq details[open] .e-n-accordion-item-title-icon {
  background: #FDFD00 !important;
}

@media (max-width: 767px) {
  .custom_faq .e-n-accordion-item-title-text {
    width: 85% !important;
  }
}

/* Download */
.download_datei:hover svg path {
  fill: #101923;
  stroke: #101923;
}

.download_datei:hover svg path[fill="#101923"] {
  fill: #FDFD00;
}

.akkordeon-downloads .elementor-widget-theme-post-title .elementor-heading-title {
  text-transform: uppercase;
}

/* Links generell: Textfarbe erben */
.elementor-widget-text-editor a,
.elementor-widget-heading a,
.elementor-widget-form a {
  color: inherit;
}

/* Hauptmenü Hover + Active Effekt */
.elementor-element-d981732 .e-n-menu-title:hover .e-n-menu-title-text,
.elementor-element-d981732 .e-n-menu-title:hover .e-n-menu-title-container,
.elementor-element-d981732 .e-n-menu-item.e-current .e-n-menu-title-text,
.elementor-element-d981732 .e-n-menu-item.e-current .e-n-menu-title-container {
  color: #CBEAEC !important;
  transition: color 0.3s ease;
}


/* Magazin Pgination */
.custom_magazin .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: #ffffff;
  border: 1px solid #6b6b6b;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  color: #4d4d4d;
  font-weight: 500;
  font-size: 16px;
}

.custom_magazin .page-numbers:hover {
  background-color: #f2f2f2;
  border-color: #101923;
  color: #101923;
}

.custom_magazin .page-numbers.current {
  background-color: #159AA6;
  border-color: #159AA6;
  color: #ffffff;
}

.custom_magazin .page-numbers.prev,
.custom_magazin .page-numbers.next {
  font-size: 0;
}

.custom_magazin .page-numbers.prev::before,
.custom_magazin .page-numbers.next::before {
  content: "";
  width: 13px;
  height: 13px;
  display: inline-block;
}

/* Linker Pfeil */
.custom_magazin .page-numbers.prev::before {
  -webkit-mask: url('assets/image/navigation-arrow-left.svg') no-repeat center;
  mask: url('assets/image/navigation-arrow-left.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #4d4d4d;
}

.custom_magazin .page-numbers.prev:hover::before {
  background-color: #101923;
}

/* Rechter Pfeil */
.custom_magazin .page-numbers.next::before {
  -webkit-mask: url('assets/image/navigation-arrow-right.svg') no-repeat center;
  mask: url('assets/image/navigation-arrow-right.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #4d4d4d;
}

.custom_magazin .page-numbers.next:hover::before {
  background-color: #101923;
}

/* Pfeil-Buttons Tablet & Mobile */
@media (max-width: 1024px) {
  .custom_magazin .page-numbers {
    width: 40px;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
  }

}

@media (max-width: 768px) {
  .custom_magazin .page-numbers {
    width: 35px;
    height: 35px;
    font-size: 14px;
    font-weight: 700;
  }

}

/* 3-zeiliger Text */
.custom_magazin .elementor-widget-theme-post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Featured-Beitrag (linke Loop-Grid-Spalte) auf die volle Hoehe der
   zweispaltigen Beitraege rechts strecken. Klasse .magazin-featured-fill
   am Loop-Grid-Widget des Featured-Beitrags setzen. */
.magazin-featured-fill .elementor-loop-container {
  height: 100%;
  grid-auto-rows: 1fr;
}
.magazin-featured-fill .e-loop-item > .elementor-element.e-con {
  height: 100%;
}
.magazin-featured-fill .e-loop-item > .elementor-element.e-con > .e-con-inner {
  height: 100%;
}
.magazin-featured-fill .elementor-widget-theme-post-featured-image {
  height: 100%;
}
.magazin-featured-fill .elementor-widget-theme-post-featured-image img {
  height: 100%;
  object-fit: cover;
}

/* Kategorie tags */
.tags .elementor-icon-list-item {
  padding: 6px 12px;
  border-radius: 100px;
  background: #009BA520;
}

.tags .elementor-icon-list-items {
  gap: 12px;
}

.tags .elementor-icon-list-icon + .elementor-icon-list-text {
  padding-inline-start: 0px !important;
}

.tags .elementor-inline-item:hover {
  background-color: #CBEAEC;
}

/* Tabelle */
.custom-table .table-container {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #E7ECEE;
  box-shadow: 0 18px 50px rgba(16, 25, 35, 0.07);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.custom-table table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: 0px !important;
  min-width: 600px;
  table-layout: auto;
}

.custom-table thead {
  background: #101923;
}

.custom-table table td,
.custom-table table th {
  vertical-align: middle;
}

.custom-table th,
.custom-table td {
  padding: 28px 34px !important;
  font-family: Satoshi !important;
  font-size: 16px !important;
  text-align: center;
  border: none !important;
}

.custom-table th {
  color: #fff;
  font-weight: 700;
  font-size: 17px !important;
}

.custom-table th:first-child,
.custom-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.custom-table tbody td {
  background-color: #fff !important;
  color: #5A6B72;
}

.custom-table tbody td:first-child {
  color: #1A2027;
}

/* Senkrechte Trennlinien zwischen den Spalten (nur Body) */
.custom-table tbody td + td {
  border-left: 1px solid #ECEFF1 !important;
}

/* Waagerechte Trennlinien zwischen den Zeilen */
.custom-table tbody tr + tr td {
  border-top: 1px solid #ECEFF1 !important;
}

.custom-table tbody tr:hover td {
  background-color: #FAFCFC !important;
}

/* Haken (teal, wie im Design)
   03.09.2026: Maske lag auf der ALTEN Domain (vse.ima.vc/.../2026/01/grau_check.svg).
   CSS-Masken unterliegen der Same-Origin-Regel - Chrome verwirft eine Maske von
   einer fremden Domain OHNE Fehlermeldung, die Haken waren dadurch auf 5 Seiten
   unsichtbar (managed-firewall 47, vserver 12, sd-wan 11, ddos-schutz 9,
   bundels 3 = 82 Haken). Jetzt die SVG dieser Installation, und bewusst als
   WURZEL-RELATIVER Pfad statt absoluter URL: so bleibt sie auch nach einem
   Domainwechsel (z.B. auf vsenet.de) same-origin und bricht nicht erneut. */
.custom-table .check {
  display: inline-block;
  width: 23px;
  height: 20px;
  background-color: #009BA5;
  -webkit-mask: url('/wp-content/uploads/2026/07/check.svg') no-repeat center;
  mask: url('/wp-content/uploads/2026/07/check.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
}

.custom-table .note {
  display: inline-block;
  color: #5A6B72;
  font-size: 15px;
  font-family: Satoshi !important;
  font-weight: 400;
  padding-left: 10px;
}

@media (max-width: 600px) {
  .custom-table .table-container {
    border-radius: 18px;
  }

  .custom-table th,
  .custom-table td {
    padding: 16px 14px !important;
    font-size: 13px !important;
  }

  .custom-table th {
    font-size: 14px !important;
  }

  .custom-table .check {
    width: 16px;
    height: 14px;
  }

  .custom-table .note {
    font-size: 11px !important;
  }

  .custom-table th:first-child,
  .custom-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 180px;
  }

  .custom-table thead th:first-child {
    background: #101923;
  }

  .custom-table tbody td:first-child {
    background: #fff;
  }

  .custom-table th:not(:first-child),
  .custom-table td:not(:first-child) {
    min-width: 120px;
  }
}

/* leistungen-box tags */
.custom_terms .elementor-post-info__terms-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px;
  color: transparent;
}

.custom_terms .elementor-post-info__terms-list-item {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 10px 20px;
  word-break: auto-phrase;
}

.custom_terms .elementor-post-info__terms-list span {
  color: #fff !important;
}

/* smaller tag padding on phone: 3px top/bottom, 12px left/right */
@media (max-width: 767px) {
  .custom_terms .elementor-post-info__terms-list-item {
    padding: 3px 12px;
  }
}

/* klasse fuer einen block mit flex-grow */
.custom-flex-grow .e-con.e-flex {
  flex-grow: 1 !important;
  /* nimmt verfuegbaren platz ein */
}

/* KONTAKTFORMULAR */
/* Dropdown-Pfeil (Select) -> teal Chevron */
.custom_contactform .select-caret-down-wrapper {
  inset-inline-end: 16px;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('assets/image/select-caret.svg');
}
 .custom_contactform .elementor-field-textual.elementor-size-lg {
    padding: 12px 24px !important;
  }

.custom_contactform .select-caret-down-wrapper svg {
  display: none;
}

/* Custom Checkbox (Acceptance) - teal Quadrat + teal Haken */
.custom-checkbox input[type="checkbox"].elementor-acceptance-field {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  flex-shrink: 0;
  position: relative;
  top: 5px;
  vertical-align: top;
  width: 17px !important;
  height: 17px !important;
  margin-right: 10px !important;
  border: 2px solid #009BA5 !important;
  border-radius: 0px !important;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"].elementor-acceptance-field:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23009BA5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E");
}

.post-tags {
  display: none;
}

li.e-n-menu-item:has(#menu-branchen) {
  position: relative;
}

li.e-n-menu-item:has(#menu-branchen) .e-n-menu-content {
  top: 24px !important;
  left: -45px !important;
  right: unset;
}

/* Branchen Menu: Hover-Effekt gleich wie Produkte & Loesungen */
li.e-n-menu-item:has(#menu-branchen) .elementor-nav-menu li a.elementor-item {
  border-radius: 4px !important;
}

li.e-n-menu-item:has(#menu-branchen) .elementor-nav-menu li a.elementor-item:hover {
  background-color: #F2FAFA;
  box-shadow: -3px 0 0 8px #F2FAFA;
  border-radius: 4px !important;
  transition: all 0.3s ease;
}

/* Gradient glow background (dark + teal/red glows) */
.bg-gradient-glow {
  position: relative;
  overflow: hidden;
  background-color: #0b1016;
  isolation: isolate;
}
/* Glow-Layer auf ::before – so lässt sich die Deckkraft animieren,
   ohne den Inhalt zu beeinflussen. Intensität = Original. */
.bg-gradient-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(90% 35% at 50% 0%,
      rgba(0, 155, 165, 0.35) 0%,
      rgba(0, 155, 165, 0.10) 35%,
      transparent 65%),
    radial-gradient(60% 55% at 0% 100%,
      rgba(0, 155, 165, 0.55) 0%,
      rgba(0, 155, 165, 0.18) 30%,
      transparent 60%),
    radial-gradient(65% 55% at 100% 100%,
      rgba(227, 0, 11, 0.40) 0%,
      rgba(227, 0, 11, 0.12) 32%,
      transparent 62%);
  background-repeat: no-repeat;
  will-change: transform, opacity;
  animation: bgGlowPulse 11s ease-in-out infinite;
}
.bg-gradient-glow > * {
  position: relative;
  z-index: 1;
}
/* Bewegung + Abdunkeln/Auftauchen der Glows */
@keyframes bgGlowPulse {
  0%, 100% { opacity: 1;  transform: translate(0, 0) scale(1); }
  50%      { opacity: .5; transform: translate(2%, -2%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-gradient-glow::before { animation: none; }
}

/* Leistung cards: dark hover state — add class "leistung-hover" to any card */
.leistung-hover {
  transition: background 0.5s ease, border-color 0.5s ease;
}

.leistung-hover .elementor-heading-title {
  transition: color 0.5s ease;
}

.leistung-hover:hover {
  background-image: url("/wp-content/uploads/2026/07/card-background-dark-gradient.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: transparent !important;
  --e-global-color-v4-primarydark: #F8F9FA;
  --e-global-color-a699fc2: #F8F9FA99;
  --e-global-color-56dc2e6: #F8F9FA99;
}

/* Override Hello Elementor reset default link color (#c36 / hover #336) */
a {
  color: inherit;
}

a:hover,
a:active {
  color: inherit;
}

/* Lesezeit-Badge: Uhr-Icon nur anzeigen, wenn [lesezeit] einen Wert liefert.
   Farbe + Typografie kommen aus dem Elementor-Heading-Widget (Style-Tab);
   das Icon erbt die Farbe (currentColor) und skaliert mit der Schriftgroesse (em). */
.lesezeit .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Text vertikal zentrieren + Leerraum unten entfernen (auf Meta-Mittellinie) */
.lesezeit {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 0 !important;
}
.lesezeit .elementor-heading-title::before {
  content: "";
  width: 1.3em;
  height: 1.3em;
  flex: 0 0 1.3em;
  background-color: currentColor;
  -webkit-mask: url('/wp-content/uploads/2026/07/clock.svg') no-repeat center / contain;
  mask: url('/wp-content/uploads/2026/07/clock.svg') no-repeat center / contain;
}
/* Kein Lesezeit-Wert -> ganzes Element (inkl. Icon) ausblenden */
.lesezeit:has(.elementor-heading-title:empty) { display: none !important; }
.lesezeit .elementor-heading-title:empty::before { display: none; }

/* Mobil: statt Uhr-Icon einen Aufzählungspunkt vor der Lesezeit */
@media (max-width: 767px) {
  .lesezeit .elementor-heading-title::before {
    content: "\2022";
    width: auto;
    height: auto;
    flex: 0 0 auto;
    -webkit-mask: none;
    mask: none;
    background-color: transparent;
    color: currentColor;
    line-height: 1;
  }
}

/* Gradient-Textfüllung (dunkles -> helles Türkis, diagonal) */
.gradient-text,
.gradient-text .elementor-heading-title,
.gradient-text .elementor-widget-container {
  background: linear-gradient(45deg, #06373B 0%, #0B565C 45%, #13A6B1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

/* ---------------------------------------------------------------
 Silbentrennung: lange Wörter am richtigen Silbenpunkt umbrechen,
 statt über den Container hinauszulaufen. Greift nur, wenn ein
 Wort sonst überliefe (lang="de" ist am <html> gesetzt -> DE-Trennung).
 :where() = Spezifität 0 -> überschreibt keine bewussten Styles.
 Hinweis: wirkt NICHT bei white-space:nowrap oder fixer Breite +
 overflow:hidden ohne Umbruch -> solche Fälle einzeln lösen.
--------------------------------------------------------------- */
/* vorerst deaktiviert (2026-07-13)
:where(
  h1, h2, h3, h4, h5, h6,
  p, li, dd, dt, figcaption, blockquote,
  .elementor-heading-title,
  .elementor-widget-text-editor,
  .elementor-image-box-title, .elementor-image-box-description,
  .elementor-icon-box-title, .elementor-icon-box-description,
  .menu-item a, .elementor-item
) {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
*/

/* ==========================================================================
   Event-Datum (Shortcode [event_datum]) – Tag gross/teal, Monat klein/grau
   ========================================================================== */
.event-datum {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Satoshi", sans-serif;
  line-height: 1;
}
.event-datum__tag {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: #009BA5;
}
.event-datum__monat {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #22222266;              /* #222222 @ 40 % */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Search Live Results (Loop Item 13732) — 1:1 zum Design
   Zeilen-Klasse .vse-search-row wird vom Container nicht ausgegeben
   (Elementor-Eigenheit), daher Zeile über .e-search-results-list .e-loop-item.
   Lupen-Icon trägt die Custom-Klasse .vse-search-ico.
   ========================================================================== */

/* Ergebnisliste: enge Zeilen statt grossem Grid-Abstand */
.e-search-results-list {
  gap: 0 !important;
}

/* Zeile (Loop-Item-Wrapper) */
.e-search-results-list .e-loop-item {
  border-bottom: 1px solid #ececec;
  transition: background-color 0.15s ease;
}
.e-search-results-list .e-loop-item:last-child {
  border-bottom: none;
}

/* Hover / aktive Zeile: helles Teal-Band */
.e-search-results-list .e-loop-item:hover {
  background-color: #e3f5f6;
  border-bottom-color: transparent;
}

/* Titel-Link ohne Unterstrich */
.e-search-results-list .e-loop-item a,
.e-search-results-list .e-loop-item .elementor-heading-title a {
  text-decoration: none !important;
}

/* Lupen-Kreis wird beim Hover teal, Icon weiss */
.e-search-results-list .e-loop-item:hover .vse-search-ico .elementor-icon {
  background-color: #159AA6 !important;
  color: #ffffff !important;
}
.e-search-results-list .e-loop-item:hover .vse-search-ico .elementor-icon svg {
  fill: #ffffff !important;
}

/* "Seite/Artikel/Event →" an den rechten Rand druecken
   (Container-Justify aus dem REST-Write wird nicht neu generiert,
   daher hier per margin-left:auto erzwungen) */
.e-search-results-list .elementor-element-vse8rgt {
  margin-left: auto !important;
}

/* Pfeil wird beim Hover teal
   (Custom-Klasse .vse-search-arrow rendert wegen Element-Cache evtl. nicht,
   daher robust ueber die Rechts-Spalte .elementor-element-vse8rgt) */
.e-search-results-list .e-loop-item:hover .elementor-element-vse8rgt .elementor-icon,
.e-search-results-list .e-loop-item:hover .elementor-element-vse8rgt .elementor-icon svg {
  color: #159AA6 !important;
  fill: #159AA6 !important;
}

/* Ergebnis-Zaehler ueber der Live-Suche ("N Ergebnisse fuer …") */
.vse-search-count {
  font-size: 13px;
  color: #8a9092;
  padding: 12px 12px 8px;
  line-height: 1.3;
}

/* Solange keine Ergebnisse da sind (vor der Suche): keine Rahmen/Abstaende,
   damit kein leerer Kasten unter dem Suchfeld sichtbar ist. */
.e-search-results-container:not(:has(.e-loop-item)) {
  padding: 0 !important;
  border: none !important;
}

/* Telefon + Tablet (Mobil-Suche aktiv <=1024px):
   - Eingabefeld immer weiss
   - bei vorhandenen Ergebnissen keine abgerundeten Ecken an Suchfeld + Panel */
@media (max-width: 1024px) {
  #searchbox .e-search-input,
  [id="searchbox."] .e-search-input {
    background-color: #ffffff !important;
  }

  #searchbox:has(.e-loop-item) .e-search-input,
  [id="searchbox."]:has(.e-loop-item) .e-search-input,
  #searchbox:has(.e-loop-item) .e-search-results-container,
  [id="searchbox."]:has(.e-loop-item) .e-search-results-container {
    border-radius: 0 !important;
  }
}

/* Ergebnis-Panel vor die Kopfzeile (schwarze Navi) legen: eigener
   Stacking-Context ueber dem gesamten Header. */
#searchbox,
[id="searchbox."] {
  z-index: 100000 !important;
}

/* Ergebnisliste NICHT ueber die ganze Seite: ~5 Zeilen sichtbar,
   Rest per Innen-Scroll (Zeilenhoehe ~62px). Zaehler bleibt oben stehen. */
.e-search-results-list {
  max-height: 330px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.e-search-results-list::-webkit-scrollbar {
  width: 8px;
}
.e-search-results-list::-webkit-scrollbar-thumb {
  background: rgba(34, 34, 34, 0.2);
  border-radius: 8px;
}

/* "esc zum Schließen"-Hinweis neben dem Schliessen-Kreuz (#search-close) */
#search-close {
  align-items: center;
  gap: 10px;
  /* Abstand rechts vom Rand: 30px Desktop, 10px Telefon + Tablet */
  padding-right: 30px;
  /* Kreuz + Hinweis sitzen in der Kopfzeile, das Suchfeld ist aber um
     --vse-search-push hoeher. Ohne Ausgleich stuenden sie um die Haelfte
     dieses Betrags zu hoch - deshalb mittig zur Suchleiste nachfuehren. */
  transform: translateY(calc(var(--vse-search-push, 0px) / 2));
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
  /* ueber dem hochgezogenen #searchbox (z-index 100000), damit das Kreuz
     bei geoeffneter Suche immer sichtbar bleibt */
  position: relative;
  z-index: 100001;
}
@media (max-width: 1024px) {
  #search-close {
    padding-right: 10px;
  }
}
.vse-esc-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7274;
  white-space: nowrap;
}
.vse-esc-key {
  border: 1px solid rgba(34, 34, 34, 0.25);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-family: "Menlo", monospace;
  line-height: 1;
  color: #6b7274;
}

/* ================= DOWNLOADS - Kategorie / Dokument-Karten ================= */

/* Laufende Nummer 01, 02, 03 ... automatisch pro Loop-Item */
/* Nummer = echtes Heading-Widget (.download-card__num), per JS befuellt */
.download-card__num,
.download-card__num .elementor-heading-title {
  font-family: "Satoshi 700", sans-serif;
  font-size: 48px;
  line-height: 1;
  color: #E7ECEE;
}

/* Meta-Zeile "PDF . 310 KB" */
.download-card__meta { color: #8a9698; font-size: 13px; }

/* Zaehler "N Dokumente" im Accordion-Kopf */
.download-count { color: #8a9698; font-size: 13px; font-weight: 400; }

/* "N Dokumente" als Unterzeile unter dem Kategorie-Titel */
.download-accordion .e-n-accordion-item-title-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.download-accordion .download-count { display: block; }

/* Karten-Layout */

.download-card__num { margin-bottom: 4px; }
.download-card__meta .elementor-shortcode::before { content: "PDF \00B7"; margin-right: 6px; }
.download-card__meta .elementor-shortcode { display: inline; white-space: nowrap; }

/* Kategorie-Icon im Accordion-Kopf */
.download-accordion .e-n-accordion-item-title { display: flex !important; align-items: center; justify-content: flex-start !important; }
.download-accordion .e-n-accordion-item-title-icon { margin-left: auto; }
.download-accordion .e-n-accordion-item-title .download-cat-icon {
  width: 48px; height: 48px; flex-shrink: 0; margin-right: 14px;
  border-radius: 50%; background: #22222210;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .25s ease;
}
.download-accordion .download-cat-icon img {
  width: 22px; height: 22px; object-fit: contain;
  transition: filter .25s ease;
}
/* Quelle im Content ausblenden, bis JS sie in den Kopf holt */
.download-accordion .e-con .download-cat-icon { display: none; }
/* Hover / geoeffnet: Kreis teal, Glyph weiss */
.download-accordion .e-n-accordion-item-title:hover .download-cat-icon,
.download-accordion .e-n-accordion-item[open] .download-cat-icon,
.download-accordion .e-n-accordion-item-title[aria-expanded="true"] .download-cat-icon {
  background: #009BA5;
}
.download-accordion .e-n-accordion-item-title:hover .download-cat-icon img,
.download-accordion .e-n-accordion-item[open] .download-cat-icon img,
.download-accordion .e-n-accordion-item-title[aria-expanded="true"] .download-cat-icon img {
  filter: brightness(0) invert(1);
}

/* "N Dokumente" bei Hover/geoeffnet: hell #F8F9FA 80% */
.download-accordion .e-n-accordion-item-title:hover .download-count,
.download-accordion .e-n-accordion-item[open] .download-count,
.download-accordion .e-n-accordion-item-title[aria-expanded="true"] .download-count {
  color: #F8F9FACC;
}


/* Aktiver (geoeffneter) Tab: unten eckig (nahtloser Uebergang zum Inhalt) */
.download-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title,
.download-accordion .e-n-accordion-item-title[aria-expanded="true"] {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


/* Icon-List-Links bei Hover teal (Klasse "kontakt-links" aufs Widget) */
.kontakt-links .elementor-icon-list-item a:hover,
.kontakt-links .elementor-icon-list-item a:hover .elementor-icon-list-text {
  color: #009BA5 !important;
}

/* ==========================================================================
   Suchergebnisse – Loop-Grid trägt die Custom-Klasse "search-result-list"
   ========================================================================== */
/* Pfeil wird teal, wenn man über die ganze verlinkte Zeile fährt */
.search-result-list a:hover svg {
  color: #009BA5 !important;
  fill: #009BA5 !important;
}

/* letztes sichtbares Ergebnis: keine Trennlinie unten */
.search-result-list .e-loop-item:last-child > a {
  border-bottom-width: 0 !important;
}

/* ===== Animierter Glow-Hintergrund =====
   Klasse "glow-bg" auf eine (dunkle) Sektion legen. Zwei Leuchten
   (rot + türkis) bewegen sich und blenden abwechselnd auf/ab. */
.glow-bg {
  position: relative;
  overflow: hidden;
  background-color: #0a0b0d;
  isolation: isolate;
}
.glow-bg::before,
.glow-bg::after {
  content: "";
  position: absolute;
  width: 55vw;
  max-width: 680px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}
/* blau-türkises Leuchten – links */
.glow-bg::before {
  background: radial-gradient(circle, rgba(0, 170, 205, .5), rgba(0, 170, 205, 0) 70%);
  top: -18%;
  left: -8%;
  animation: glowRed 14s ease-in-out infinite;
}
/* rotes Leuchten – rechts */
.glow-bg::after {
  background: radial-gradient(circle, rgba(227, 0, 11, .55), rgba(227, 0, 11, 0) 70%);
  bottom: -22%;
  right: -6%;
  animation: glowCyan 14s ease-in-out infinite;
}
.glow-bg > * {
  position: relative;
  z-index: 1;
}
@keyframes glowRed {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .2; }
  50%      { transform: translate(22%, 18%) scale(1.35); opacity: .85; }
}
@keyframes glowCyan {
  0%, 100% { transform: translate(0, 0) scale(1.3); opacity: .85; }
  50%      { transform: translate(-22%, -16%) scale(1); opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  .glow-bg::before,
  .glow-bg::after { animation: none; }
}
/* Nur Desktop: ab Tablet abwaerts entfallen die beiden Leuchten. Zwei Flaechen
   mit blur(90px) und Dauer-Animation kosten auf kleinen Geraeten Rechenzeit,
   bringen bei der schmalen Spalte aber kaum Wirkung. Der dunkle Grund
   (#0a0b0d) BLEIBT - der Text in diesen Sektionen ist weiss und waere sonst
   nicht mehr lesbar. */
@media (max-width: 1024px) {
  .glow-bg::before,
  .glow-bg::after {
    display: none;
  }
}
/* Magazin: Zustand waehrend des Nachladens der Beitragsliste */
.elementor-widget-loop-grid.laedt {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* ==========================================================================
   Nummerierte Liste mit Kreis-Zahlen
   Klasse "zahlen-liste" wahlweise auf die Liste selbst ODER auf einen
   umgebenden Container setzen - dann werden alle Listen darin erfasst.
   Farben kommen aus der Elementor-Palette und ziehen bei einem
   Palettenwechsel automatisch mit.
   ========================================================================== */
ol.zahlen-liste,
ul.zahlen-liste,
.zahlen-liste ol,
.zahlen-liste ul {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: zahlen-liste;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

ol.zahlen-liste > li,
ul.zahlen-liste > li,
.zahlen-liste ol > li,
.zahlen-liste ul > li {
  counter-increment: zahlen-liste;
  position: relative;
  padding-left: 45px;
  color: var(--e-global-color-56dc2e6, #22222299);
}

ol.zahlen-liste > li::before,
ul.zahlen-liste > li::before,
.zahlen-liste ol > li::before,
.zahlen-liste ul > li::before {
  content: counter(zahlen-liste);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--e-global-color-primary, #009BA5);
  color: var(--e-global-color-f7e7439, #FEFEFE);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* Fetter Auftakt vor dem Doppelpunkt in voller Textfarbe */
.zahlen-liste li strong,
.zahlen-liste li b {
  color: var(--e-global-color-4349349, #222222);
  font-weight: 700;
}

@media (max-width: 767px) {
  ol.zahlen-liste > li,
  ul.zahlen-liste > li,
  .zahlen-liste ol > li,
  .zahlen-liste ul > li {
    padding-left: 42px;
  }

  ol.zahlen-liste > li::before,
  ul.zahlen-liste > li::before,
  .zahlen-liste ol > li::before,
  .zahlen-liste ul > li::before {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
}

/* ============================================================
   Video-Karten (CPT "video", Loop Grid auf der Modul-Seite)
   ============================================================ */

.video-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  /* Kartenformat wie in der statischen Vorgaengerversion: 312 x 635 */
  aspect-ratio: 312 / 635;
}

/* Poster und Video fuellen die Karte unabhaengig von den Bildmassen.
   Elementor gibt dem Wrapper das 9:16-Verhaeltnis des Widgets mit - in der
   Karte muss er stattdessen exakt die Kartenflaeche einnehmen, sonst laeuft
   er seitlich ueber und das Video wird beschnitten. */
.video-card > .elementor-widget-video,
.video-card .e-hosted-video,
.video-card .elementor-custom-embed-image-overlay {
  height: 100%;
}

.video-card .elementor-wrapper {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.video-card .elementor-custom-embed-image-overlay img,
.video-card .elementor-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Verlauf oben fuer das Badge, unten fuer Titel und Laufzeit */
.video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.35) 22%,
      rgba(0, 0, 0, 0) 50%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0) 25%);
  pointer-events: none;
  z-index: 1;
}

.video-card__dauer {
  color: rgba(255, 255, 255, 0.75);
  font-family: "Satoshi", sans-serif;
  font-size: 14px;
  line-height: 1;
}

/* Elementor entfernt das Overlay beim Start der Wiedergabe. Solange es fehlt,
   laeuft das Video - dann stoeren Verlauf, Kategorie, Laufzeit und Titel. */
.video-card:not(:has(.elementor-custom-embed-image-overlay))::after,
.video-card:not(:has(.elementor-custom-embed-image-overlay)) .elementor-widget-post-info,
.video-card:not(:has(.elementor-custom-embed-image-overlay)) .video-card__dauer,
.video-card:not(:has(.elementor-custom-embed-image-overlay)) .video-card__titel {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}


.video-card .elementor-custom-embed-play {
  transition: transform 0.25s ease;
}

.video-card:hover .elementor-custom-embed-play {
  transform: translate(-50%, -50%) scale(1.08);
}

@media (max-width: 767px) {
  /* Auf dem Handy darf die Karte hoechstens 336px hoch werden - schmalere
     Displays bleiben darunter und behalten das Seitenverhaeltnis. */
  .video-card {
    max-height: 336px;
  }

  .video-card__dauer {
    font-size: 12px;
  }
}

/* ============================================================
   Anrisstext in Karten auf zwei Zeilen begrenzen.
   Die Auslassungspunkte setzt der Browser selbst ans Zeilenende.
   Klasse im Elementor-Widget unter Erweitert → CSS-Klassen setzen.
   ============================================================ */

.karte-anriss {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   Keyvisual: ab Desktop ohne Hintergrund und in der Hoehe begrenzt.
   Klasse im Elementor-Widget unter Erweitert → CSS-Klassen setzen.
   ============================================================ */

@media (min-width: 1025px) {
  .keyvisual {
    background: none !important;
    max-height: 1036px;
  }
}

/* ============================================================
   Beitrags-Aktionen: PDF, Teilen
   ============================================================ */

.pdf-button,
.share-btn {
  cursor: pointer;
}

/* --- Status message (share action) ------------------------------------- */
.merken-hinweis {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 99999;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 11px 18px;
  border-radius: 8px;
  background: #080F0F;
  color: #ffffff;
  font-family: "Satoshi", sans-serif;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.merken-hinweis.sichtbar {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Druckausgabe - Grundlage fuer "Als PDF speichern"
   ============================================================ */

@media print {
  /* Alles ausblenden, was nicht zum Artikel gehoert */
  [data-elementor-type="header"],
  [data-elementor-type="footer"],
  [data-elementor-type="popup"],
  .elementor-widget-off-canvas,
  .elementor-widget-search,
  .elementor-widget-wpml-language-switcher,
  .elementor-location-header,
  .elementor-location-footer,
  .zurueck-link,
  .pdf-button,
  .share-btn,
  .merken-hinweis,
  .elementor-widget-share-buttons,
  #wpadminbar {
    display: none !important;
  }

  /* Farben: Hintergruende werden nicht gedruckt, darum Text auf Schwarz */
  body,
  .elementor-heading-title,
  .elementor-widget-container,
  p, li, td, th, h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
    background: transparent !important;
  }

  /* Volle Breite, keine Innenabstaende aus dem Layout */
  .e-con,
  .e-con-inner,
  .elementor-widget-container {
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Bilder nicht ueber den Rand und nicht ueber zwei Seiten */
  img {
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
  }

  figure, table, blockquote, .elementor-widget-image {
    break-inside: avoid;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  /* Akkordeon-Inhalte sichtbar machen. Das "open" setzt script.js beim
     beforeprint-Ereignis, hier nur die Optik. */
  .e-n-accordion-item > *:not(summary) {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .e-n-accordion-item-title-icon {
    display: none !important;
  }

  /* Druckkopf mit Quelle - nur auf Papier sichtbar */
  .elementor-location-single::before {
    content: "vsenet.de";
    display: block;
    margin-bottom: 10mm;
    padding-bottom: 3mm;
    border-bottom: 1px solid #000000;
    font-size: 10pt;
  }

  @page {
    margin: 18mm 15mm;
  }
}


/* ===== foto-background =====
   Foto-Layer aus einem Image-Widget, das die volle Hoehe UND Breite des
   Containers einnimmt (Klasse "foto-background" auf das Widget legen,
   Position im Widget auf Absolut stellen).
   inset:0 statt nur top/left: Elementor setzt am absolut positionierten Widget
   nur top und left, der Widget-Kasten ist dadurch so hoch wie das Bild und nicht
   wie der Container.
   height:100% !important: das Hoehe-Feld im Image-Widget schreibt eine feste
   Pixel-Hoehe je Breakpoint ueber den Element-ID-Selektor - hoehere Spezifitaet.
   Sauberer ist es, das Hoehe-Feld im Widget zu leeren; dann kann das !important
   entfallen. Der Container braucht position:relative (bei .e-con Standard) und
   eine Hoehe aus Inhalt oder Min-Hoehe - ein absoluter Layer erzeugt keine. */
.foto-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.foto-background img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* Portiert von artelis 1:1 (2026-08-05). Die Design-Werte stammen aus den
   #language-dropdown-Regeln oben in dieser Datei - die sind auf beiden Sites
   identisch, daher passt der Block unveraendert.
   Voraussetzung in WPML > Sprachen > Sprachumschalter-Optionen:
   Stil = Liste (nicht Dropdown) und Sprachnamen = in der eigenen Sprache.
   Der .e-off-canvas__content-Teil greift nur bei einem Off-Canvas-Widget. */
/* =========================================================
   WPML language switcher — visual match of the hand-built
   #language-dropdown card above.

   Scoped to .elementor-widget-wpml-language-switcher and the
   stable .wpml-ls-* classes only (no elementor-element-XXXX
   IDs), so it survives moving the header into a Theme Builder
   template.

   All design values (240px card, #FEFEFE, radius 0 0 10 10,
   5px card padding, 28px flag circle on #f0f2f3, 8px/12px row
   padding, 12px gap, Satoshi 700 16px #101923, Menlo 12px
   #9aa4a6, 6px teal dot #009BA5, hover #F2FAFA) are taken 1:1
   from the #language-dropdown rules above. Only addition: a
   soft drop shadow, because the WPML card floats over page
   content instead of hanging off the header bar.

   Works with two WPML switcher styles
   (WPML > Languages > Language switcher options >
    "Custom language switchers" > "Language switcher style"):

   a) "Vertical list" / "Horizontal list" — REQUIRED for the
      target design. WPML renders all three languages, so the
      card shows three rows plus the teal dot on the active
      language. Opened by hover / keyboard focus on the round
      flag trigger.
   b) "Dropdown" (WPML default) — WPML deliberately omits the
      current language from the sub menu, so the card can only
      ever show the two other languages and there is no row to
      put the teal dot on. Styled here so it does not look
      broken, but it is not the target design.
   ========================================================= */

/* --- 1. let the card escape the widget box --- */
.elementor-widget-wpml-language-switcher,
.elementor-widget-wpml-language-switcher > .elementor-widget-container,
.elementor-widget-wpml-language-switcher .wpml-elementor-ls,
.elementor-widget-wpml-language-switcher .wpml-ls {
  overflow: visible !important;
}
.elementor-widget-wpml-language-switcher .wpml-elementor-ls {
  line-height: 0; /* kills the inline-block gap under the trigger */
}

/* --- 2. rows (shared by every switcher style) --- */
.elementor-widget-wpml-language-switcher .wpml-ls ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0 !important;
  list-style: none;
}
.elementor-widget-wpml-language-switcher .wpml-ls li {
  padding: 0;
  margin: 0;
  list-style: none;
}
/* Visual order Deutsch / Englisch / Französisch, independent of
   the WPML "Order of languages" setting. */
.elementor-widget-wpml-language-switcher .wpml-ls-item-de { order: 1; }
.elementor-widget-wpml-language-switcher .wpml-ls-item-en { order: 2; }
.elementor-widget-wpml-language-switcher .wpml-ls-item-fr { order: 3; }

.elementor-widget-wpml-language-switcher .wpml-ls a {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.elementor-widget-wpml-language-switcher .wpml-ls a:hover,
.elementor-widget-wpml-language-switcher .wpml-ls a:focus {
  background: #F2FAFA;
}

/* --- 3. round flag in a filled grey circle ---
   WPML's own rectangular flag image is hidden and the flag is
   painted on the link instead. The three SVGs of the old icon
   widgets (media IDs 70/71/72) are inlined as 28px PNGs, so the
   artwork is identical — including the US flag for English —
   without pulling their ~1 MB source files. */
.elementor-widget-wpml-language-switcher .wpml-ls-flag {
  display: none !important;
}
.elementor-widget-wpml-language-switcher .wpml-ls a::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #f0f2f3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.elementor-widget-wpml-language-switcher .wpml-ls-item-de > a::before {
  background-image: url("data:image/png;base64,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");
}
.elementor-widget-wpml-language-switcher .wpml-ls-item-en > a::before {
  background-image: url("data:image/png;base64,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");
}
.elementor-widget-wpml-language-switcher .wpml-ls-item-fr > a::before {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAHKADAAQAAAABAAAAHAAAAABkvfSiAAAC52lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOklwdGM0eG1wRXh0PSJodHRwOi8vaXB0Yy5vcmcvc3RkL0lwdGM0eG1wRXh0LzIwMDgtMDItMjkvIj4KICAgICAgICAgPHBob3Rvc2hvcDpDcmVkaXQ+TWFkZSB3aXRoIEdvb2dsZSBBSTwvcGhvdG9zaG9wOkNyZWRpdD4KICAgICAgICAgPElwdGM0eG1wRXh0OkRpZ2l0YWxTb3VyY2VUeXBlPmh0dHA6Ly9jdi5pcHRjLm9yZy9uZXdzY29kZXMvZGlnaXRhbHNvdXJjZXR5cGUvdHJhaW5lZEFsZ29yaXRobWljTWVkaWE8L0lwdGM0eG1wRXh0OkRpZ2l0YWxTb3VyY2VUeXBlPgogICAgICAgICA8SXB0YzR4bXBFeHQ6RGlnaXRhbFNvdXJjZUZpbGVUeXBlPmh0dHA6Ly9jdi5pcHRjLm9yZy9uZXdzY29kZXMvZGlnaXRhbHNvdXJjZXR5cGUvdHJhaW5lZEFsZ29yaXRobWljTWVkaWE8L0lwdGM0eG1wRXh0OkRpZ2l0YWxTb3VyY2VGaWxlVHlwZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cp6mSPIAAAQ3SURBVEgNdZZfiFdFFMdn5s7v3ru0G9tDbQ+mUIhQy2ogLC4IsRU+/B7W6qGHiMiVMHVJoQwK1IR6yIhSXIpapIfIF7GSfUkkyVw0iszFf4T9wYJ1exBdc+/93bl3+p6ZO3Pv7/ez+V3uPXPmnM85c+7M/C4vtGa42hvn3CryPC+KAvc0TaGJoigIAiEE7tZA38mXF7rgrER4cpKqL76+GIZ6/ePL0lQhpg1DCM5EGPFvv4syFTfX8SjyXj6M6FCh+833v6999tCGrdM/XZiXASJSs2ZG4joQrYuXFra9fv35jenM6W5CGxSl2L3vVHPDlz+em2dxI5TlHDvdNBOyEcRxce7CzU2v3Jr8pKMIFbQo9MSe42+9N6Mww9CVjHidFS+rhTlEodB88YMDN9/Zq4vCx66gew7MTE79zHpCzNcPOwncGppEJGc0gos4Tj/7/NbHU96rhB479cfb+86wngZl4UjkSoa+77ilgh5QaVQ6im9Pfpqc/oHMGROYxGKS7Xj3pFL0jq3W39v76BHEhjIydQrcBOcq+/f9/RorD8sD/keO/Xr27ByL7vBaXG7tUTiyY1iJwFkDRONhqH6ZXTx+AlkKlObg4fNMVMX1AAguU/ekMSAZNxl7Ae/IrGCefDUNoPhrbuHM7Dxr1NKspVcTa1zCUrN3GtBIHck2stnzau6amL38z8L1hKqJWLCiyxqTW41E3bLRtqou4qFHKqFv3FBXrojf/l5g2IfW29uSN6ErPGlcs5laF0t37jzP1Z9X5cHDl1lDGG83q3INkKFzdDj7NKHsfCBSfdGsadhQR46KnCpskge4i/F/mfrjAB72AhbGFAmH2PgzK1hLlfP00ctxG6WLTKNVcj4VomctOdaUDy65m+HggMIU3FvYjdDFI5axqagUAu62BYFc+oAYWnFv3z0xK2jIjXQ8vYfTuz1lHWjYSkXB+/sbyx8SS+7vGx66j2V59x51jK6niYLtJGwm2KXIHnKm5ODDwcAANi1/8elHylD1nEx964qKDX/a4PR6YUBkPEjS8VgTQNqdTz25fNWqAdbKKzeSPBBe7c2SzAoEzlA4a2XBysF49DFYYwa6J5Z7d6yV0mwq726YjueedhQ9ZwuRDir8pOzdvhVnK/Itz5EnRpa9OTHMFt3acmiXrc3NoZGded+oIw1oXSRJz8sbozXD1q86nHZuWbN5/FGWZGYllFSHQRfuLgRyM9UkI/yvgfjCc72bxksfTL+SBN+/c3T3qyMoA9XX8AzGsbwpBLOq8laKU/WubVv63niN1w5Pu+tLcyyFXRMj01PrV68cYKnKVPVfVgdSxirTaSKHBvs/+rB380t4V3UDjg+QDhWG8TFx6OglfEyMjS6FDI21sX92Ior4iZNRK4ua6yDXcZBhQ9AOrUdAUErhm6f+2SOlpM8eWiumQva4qCEA/Q9N4bixlmCUpQAAAABJRU5ErkJggg==");
}

/* --- 4. label column: bold German name + small grey code ---
   WPML renders "English(Englisch)" via nested spans, which is
   unusable for this layout, so its text is collapsed and both
   lines are set per language. Needs WPML's "Language name in
   native language" to stay switched on — that span is the host
   of the two lines. */
.elementor-widget-wpml-language-switcher .wpml-ls .wpml-ls-native {
  display: block;
  margin: 0;
  font-size: 0;
  line-height: 0;
}
.elementor-widget-wpml-language-switcher .wpml-ls .wpml-ls-display,
.elementor-widget-wpml-language-switcher .wpml-ls .wpml-ls-bracket {
  display: none;
}
.elementor-widget-wpml-language-switcher .wpml-ls .wpml-ls-native::before {
  display: block;
  font-family: "Satoshi 700", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
  color: #101923;
}
.elementor-widget-wpml-language-switcher .wpml-ls .wpml-ls-native::after {
  display: block;
  margin-top: 1px;
  font-family: "Menlo", monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #9aa4a6;
}
.elementor-widget-wpml-language-switcher .wpml-ls-item-de > a .wpml-ls-native::before { content: "Deutsch"; }
.elementor-widget-wpml-language-switcher .wpml-ls-item-de > a .wpml-ls-native::after  { content: "DE"; }
.elementor-widget-wpml-language-switcher .wpml-ls-item-en > a .wpml-ls-native::before { content: "Englisch"; }
.elementor-widget-wpml-language-switcher .wpml-ls-item-en > a .wpml-ls-native::after  { content: "EN"; }
.elementor-widget-wpml-language-switcher .wpml-ls-item-fr > a .wpml-ls-native::before { content: "Französisch"; }
.elementor-widget-wpml-language-switcher .wpml-ls-item-fr > a .wpml-ls-native::after  { content: "FR"; }

/* --- 5. teal dot on the active language --- */
.elementor-widget-wpml-language-switcher .wpml-ls-current-language > a::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #009BA5;
}

/* =========================================================
   6. "Vertical list" / "Horizontal list" — the target design
   ========================================================= */
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal {
  display: block;
  position: relative;
  width: 28px;
  max-width: none;
  padding: 0;
  border: 0;
}
/* trigger: round flag of the current language */
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical::before,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  cursor: pointer;
}
.elementor-widget-wpml-language-switcher .wpml-ls:has(.wpml-ls-item-de.wpml-ls-current-language)::before {
  background-image: url("data:image/png;base64,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");
}
.elementor-widget-wpml-language-switcher .wpml-ls:has(.wpml-ls-item-en.wpml-ls-current-language)::before {
  background-image: url("data:image/png;base64,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");
}
.elementor-widget-wpml-language-switcher .wpml-ls:has(.wpml-ls-item-fr.wpml-ls-current-language)::before {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAHKADAAQAAAABAAAAHAAAAABkvfSiAAAC52lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOklwdGM0eG1wRXh0PSJodHRwOi8vaXB0Yy5vcmcvc3RkL0lwdGM0eG1wRXh0LzIwMDgtMDItMjkvIj4KICAgICAgICAgPHBob3Rvc2hvcDpDcmVkaXQ+TWFkZSB3aXRoIEdvb2dsZSBBSTwvcGhvdG9zaG9wOkNyZWRpdD4KICAgICAgICAgPElwdGM0eG1wRXh0OkRpZ2l0YWxTb3VyY2VUeXBlPmh0dHA6Ly9jdi5pcHRjLm9yZy9uZXdzY29kZXMvZGlnaXRhbHNvdXJjZXR5cGUvdHJhaW5lZEFsZ29yaXRobWljTWVkaWE8L0lwdGM0eG1wRXh0OkRpZ2l0YWxTb3VyY2VUeXBlPgogICAgICAgICA8SXB0YzR4bXBFeHQ6RGlnaXRhbFNvdXJjZUZpbGVUeXBlPmh0dHA6Ly9jdi5pcHRjLm9yZy9uZXdzY29kZXMvZGlnaXRhbHNvdXJjZXR5cGUvdHJhaW5lZEFsZ29yaXRobWljTWVkaWE8L0lwdGM0eG1wRXh0OkRpZ2l0YWxTb3VyY2VGaWxlVHlwZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cp6mSPIAAAQ3SURBVEgNdZZfiFdFFMdn5s7v3ru0G9tDbQ+mUIhQy2ogLC4IsRU+/B7W6qGHiMiVMHVJoQwK1IR6yIhSXIpapIfIF7GSfUkkyVw0iszFf4T9wYJ1exBdc+/93bl3+p6ZO3Pv7/ez+V3uPXPmnM85c+7M/C4vtGa42hvn3CryPC+KAvc0TaGJoigIAiEE7tZA38mXF7rgrER4cpKqL76+GIZ6/ePL0lQhpg1DCM5EGPFvv4syFTfX8SjyXj6M6FCh+833v6999tCGrdM/XZiXASJSs2ZG4joQrYuXFra9fv35jenM6W5CGxSl2L3vVHPDlz+em2dxI5TlHDvdNBOyEcRxce7CzU2v3Jr8pKMIFbQo9MSe42+9N6Mww9CVjHidFS+rhTlEodB88YMDN9/Zq4vCx66gew7MTE79zHpCzNcPOwncGppEJGc0gos4Tj/7/NbHU96rhB479cfb+86wngZl4UjkSoa+77ilgh5QaVQ6im9Pfpqc/oHMGROYxGKS7Xj3pFL0jq3W39v76BHEhjIydQrcBOcq+/f9/RorD8sD/keO/Xr27ByL7vBaXG7tUTiyY1iJwFkDRONhqH6ZXTx+AlkKlObg4fNMVMX1AAguU/ekMSAZNxl7Ae/IrGCefDUNoPhrbuHM7Dxr1NKspVcTa1zCUrN3GtBIHck2stnzau6amL38z8L1hKqJWLCiyxqTW41E3bLRtqou4qFHKqFv3FBXrojf/l5g2IfW29uSN6ErPGlcs5laF0t37jzP1Z9X5cHDl1lDGG83q3INkKFzdDj7NKHsfCBSfdGsadhQR46KnCpskge4i/F/mfrjAB72AhbGFAmH2PgzK1hLlfP00ctxG6WLTKNVcj4VomctOdaUDy65m+HggMIU3FvYjdDFI5axqagUAu62BYFc+oAYWnFv3z0xK2jIjXQ8vYfTuz1lHWjYSkXB+/sbyx8SS+7vGx66j2V59x51jK6niYLtJGwm2KXIHnKm5ODDwcAANi1/8elHylD1nEx964qKDX/a4PR6YUBkPEjS8VgTQNqdTz25fNWqAdbKKzeSPBBe7c2SzAoEzlA4a2XBysF49DFYYwa6J5Z7d6yV0mwq726YjueedhQ9ZwuRDir8pOzdvhVnK/Itz5EnRpa9OTHMFt3acmiXrc3NoZGded+oIw1oXSRJz8sbozXD1q86nHZuWbN5/FGWZGYllFSHQRfuLgRyM9UkI/yvgfjCc72bxksfTL+SBN+/c3T3qyMoA9XX8AzGsbwpBLOq8laKU/WubVv63niN1w5Pu+tLcyyFXRMj01PrV68cYKnKVPVfVgdSxirTaSKHBvs/+rB380t4V3UDjg+QDhWG8TFx6OglfEyMjS6FDI21sX92Ior4iZNRK4ua6yDXcZBhQ9AOrUdAUErhm6f+2SOlpM8eWiumQva4qCEA/Q9N4bixlmCUpQAAAABJRU5ErkJggg==");
}
/* The card. Its 28px transparent top padding is the gap to the
   trigger AND the hover bridge, so the pointer can travel down
   without the card closing. The visible card chrome therefore
   sits on ::before, inset by that padding. */
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical > ul,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal > ul {
  position: absolute;
  top: 12px;
  right: -20px;
  width: 240px;
  padding: 33px 5px 5px;   /* 28px hover bridge + 5px inner top, matching the sides */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 999;
}
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical > ul::before,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal > ul::before {
  content: "";
  position: absolute;
  inset: 28px 0 0 0;
  border-radius: 0 0 10px 10px;
  background: #FEFEFE;
  box-shadow: 0 10px 30px rgba(16, 25, 35, 0.10);
  z-index: -1;
}
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical:hover > ul,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical:focus-within > ul,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal:hover > ul,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal:focus-within > ul {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================================================
   7. "Dropdown" style (WPML default) — fallback look
   ========================================================= */
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown {
  width: auto;
  max-width: none;
}
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown > ul {
  position: relative;
}
/* toggle = trigger: round flag only, no label, no caret, no dot */
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-item-toggle {
  width: 28px;
  padding: 0;
  border-radius: 50%; /* round hover highlight instead of a rounded square */
}
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-item-toggle .wpml-ls-native,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-item-toggle::after {
  display: none;
}
/* sub menu = the card, same padding/chrome trick as above */
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
  top: 100%;
  left: auto;
  right: -20px;
  width: 240px;
  padding: 33px 5px 5px;   /* 28px hover bridge + 5px inner top, matching the sides */
  border: 0;
  z-index: 999;
}
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu::before {
  content: "";
  position: absolute;
  inset: 28px 0 0 0;
  border-radius: 0 0 10px 10px;
  background: #FEFEFE;
  box-shadow: 0 10px 30px rgba(16, 25, 35, 0.10);
  z-index: -1;
}

/* =========================================================
   8. Tablet & phone (Elementor nav-menu burger breakpoint):
   flat row list inside the opened mobile menu instead of an
   overlay card.
   ========================================================= */
@media (max-width: 1024px) {
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical,
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal,
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-item-toggle {
    width: 100%;
  }
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical::before,
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal::before,
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical > ul::before,
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal > ul::before,
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu::before {
    display: none;
  }
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical > ul,
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal > ul,
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
    position: static;
    visibility: visible;
    width: 100%;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* in the burger menu the current language is a row as well */
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-item-toggle {
    padding: 8px 12px;
  }
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-item-toggle .wpml-ls-native {
    display: block;
  }
  .elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language > a::after {
    display: block;
  }
}

/* WPML ships its own stylesheet for the list templates
   (templates/language-switchers/legacy-list-horizontal/style.min.css). With the
   widget pointed at the footer slot, that file adds spacing and centring meant
   for a real footer switcher, which shifts the card layout above. Reset only
   those declarations; the extra class raises specificity past WPML's. */
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical.wpml-ls-statics-footer {
  margin: 0;
  padding: 0;
  border: 0;
  clear: none;
}
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer > ul,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-list-vertical.wpml-ls-statics-footer > ul {
  text-align: left;
}
.elementor-widget-wpml-language-switcher .wpml-ls .wpml-ls-flag + span {
  margin-left: 0;
}

/* =========================================================
   Off-canvas menu (the mobile/tablet menu widget)
   Panel background is #F8F9FA, menu text #101923. The switcher inside the
   panel renders the same legacy-list-horizontal markup as the header one, so
   the card styling above has to be undone here: flat centred row of flags,
   no trigger, no labels, ring instead of the dot on the active language.
   Scoped to .e-off-canvas__content rather than a breakpoint, so it holds
   regardless of when the panel is opened.
   ========================================================= */
.e-off-canvas__content .elementor-widget-nav-menu .elementor-item {
  border-bottom: 1px solid #00000014;
}

.e-off-canvas__content .elementor-widget-wpml-language-switcher .wpml-ls {
  width: auto;
}
.e-off-canvas__content .elementor-widget-wpml-language-switcher .wpml-ls::before,
.e-off-canvas__content .elementor-widget-wpml-language-switcher .wpml-ls > ul::before {
  display: none;
}
.e-off-canvas__content .elementor-widget-wpml-language-switcher .wpml-ls > ul {
  position: static;
  flex-direction: row;
  justify-content: center;
  gap: 18px;
  width: auto;
  padding: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.e-off-canvas__content .elementor-widget-wpml-language-switcher .wpml-ls-item > a {
  width: auto;
  padding: 0;
  background: none;
}
.e-off-canvas__content .elementor-widget-wpml-language-switcher .wpml-ls-native {
  display: none;
}
.e-off-canvas__content .elementor-widget-wpml-language-switcher .wpml-ls-item > a::before {
  margin: 0;
  width: 18px;
  height: 18px;
  background-color: transparent;
  background-size: 18px 18px;
}
.e-off-canvas__content .elementor-widget-wpml-language-switcher .wpml-ls-current-language > a::before {
  outline: 2px solid #009BA5;
  outline-offset: 2px;
}
.e-off-canvas__content .elementor-widget-wpml-language-switcher .wpml-ls-current-language > a::after {
  display: none;
}


/* Kontaktformular cegecom: gesperrter Zweig (Entweder-oder-Logik in script.js) */
.elementor-field-group.is-gesperrt {
  opacity: .45;
}
.elementor-field-group.is-gesperrt input,
.elementor-field-group.is-gesperrt select {
  cursor: not-allowed;
}
.ima-feldfehler {
  display: block;
  width: 100%;
  margin-top: 4px;
  /* Markenrot; auf dem dunklen Formularhintergrund (#222) nur 3,3:1 Kontrast -
     bei Lesbarkeitsproblemen auf #FF5A5A wechseln (5,3:1). */
  color: #E3000B;
  font-size: 13px;
  line-height: 1.3;
}

/* ==========================================================================
   LOOP-CAROUSEL: HOVER WIRD NICHT MEHR ABGESCHNITTEN
   (Kundenliste "Weitere Produkte: Hover schneidet Ecken ab", 03.09.2026)
   --------------------------------------------------------------------------
   Swiper setzt auf dem Slider-Container overflow:hidden. Der Hover-Effekt der
   Karten (Schatten / leichte Vergroesserung) ragt dadurch ueber die Kante und
   wird an allen vier Seiten beschnitten. 5px Innenabstand geben ihm Luft.

   ACHTUNG, FALLE: Elementor benutzt auf demselben Element padding-inline-*
   fuer den Rand-Offset der angeschnittenen naechsten Karte (Klassen
   offset-left / offset-right / offset-both, Wert aus --swiper-offset-size,
   auf manchen Seiten 80px bzw. 100px). Ein pauschales "padding: 5px" wuerde
   diesen Offset ueberschreiben und die Karussells sichtbar veraendern.
   Deshalb werden die drei Offset-Varianten unten explizit wieder ergaenzt:
   Offset + 5px.

   Gilt fuer ALLE Loop-Carousels der Website, nicht nur "Weitere Produkte" -
   das Abschneiden ist ueberall dasselbe Problem.
   ========================================================================== */
/* Elementors Default fuer --swiper-offset-size ist die einheitenlose Zahl 0.
   In calc() ist "0 + 5px" ungueltiges CSS; bei var() faellt die Eigenschaft
   dann nicht auf die Basis-Regel zurueck, sondern auf den Startwert 0 - der
   Hover wuerde also doch abgeschnitten. Deshalb hier auf 0px normalisieren.
   Die pro Widget gesetzten Werte (z.B. 80px) stehen auf 3 Klassen und
   gewinnen weiterhin ueber die hoehere Spezifitaet. */
.elementor-widget-loop-carousel {
  --swiper-offset-size: 0px;
}

.elementor-widget-loop-carousel .elementor-loop-container.swiper {
  padding: 5px;
}

.elementor-widget-loop-carousel .elementor-loop-container.swiper.offset-left,
.elementor-widget-loop-carousel .elementor-loop-container.swiper.offset-both {
  padding-inline-start: calc(var(--swiper-offset-size, 0px) + 5px);
}

.elementor-widget-loop-carousel .elementor-loop-container.swiper.offset-right,
.elementor-widget-loop-carousel .elementor-loop-container.swiper.offset-both {
  padding-inline-end: calc(var(--swiper-offset-size, 0px) + 5px);
}

/* ==========================================================================
   PRICING-KARTEN: BEIM HOVER UNTEN LAENGER  (Klasse "pricing-card")
   (Kundenliste "Pricing ... ist der Hovereffekt", 03.09.2026)
   --------------------------------------------------------------------------
   ANWENDEN: Im Elementor auf dem Karten-Container unter
   Erweitert -> CSS-Klassen den Namen  pricing-card  eintragen (ohne Punkt).

   ARBEITSTEILUNG:
   - Der SCHATTEN steht im Elementor (Stil -> Rand -> Box-Schatten):
     Normal 0/4/6/0 bei #000000 6%, Hover 0/26/52/0 bei #000000 25%
     (entspricht Figma "Waehlen Sie Ihre Loesung"). Bitte dort pflegen.
   - Hier steht nur das Wachsen nach unten, weil Elementor dafuer keinen
     Regler hat: Hoehe und Innenabstand liegen unter "Layout", und Layout
     hat keinen Hover-Reiter.

   WIE ES FUNKTIONIERT:
   Die Karten sind Flex-Kinder und werden von ihrer Zeile auf eine gemeinsame
   Hoehe GESTRECKT (gemessen: Eltern 1056x483, beide Karten 518x483, eigene
   Inhaltshoehen 403 bzw. 483). Zusaetzlicher Innenabstand allein macht sie
   deshalb nicht hoeher - die Zeile haelt die Hoehe fest. Der negative untere
   Aussenabstand laesst den Rahmen 40px aus der Streckung hinauswachsen, der
   groessere Innenabstand haelt den Inhalt dabei oben an seinem Platz. So
   wandert nur die Unterkante, oben/links/rechts bleiben stehen.

   Die calc()-Werte rechnen mit dem Abstand, den die Karte selbst hat
   (Elementor setzt --padding-bottom je Breakpoint: 48 / 30 / 20px), statt
   mit einer festen Zahl. Dadurch passt die Regel auf jede Karte.

   Die transition nennt box-shadow und die Elementor-Standardwerte mit,
   weil eine eigene transition-Angabe Elementors Uebergang sonst ersetzt
   und der Schatten hart umschalten wuerde.

   Nur Geraete mit echter Maus: auf Touch bleibt ein :hover nach dem
   Antippen sonst haengen.

   Zusaetzlich min-width: 1025px (Sergei, 08.09.2026): der Effekt soll
   ab Tablet abwaerts komplett weg sein - auch mit Maus. Chrome DevTools
   "Mobile (no touch)" meldet hover:hover und pointer:fine als TRUE,
   ohne die Breitenbedingung wuchs die Karte dort weiter um 40px.
   1025px ist die Gegenprobe zu Elementors Tablet-Breakpoint 1024px.
   Die Schwester-Regel weiter unten schaltet den SCHATTEN ab.
   ========================================================================== */
.pricing-card {
  transition:
    padding-block-end .3s ease,
    margin-block-end .3s ease,
    box-shadow .3s ease,
    background .3s,
    border .3s,
    border-radius .3s;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .pricing-card:hover {
    margin-block-end:  calc(var(--margin-bottom,  0px) - 40px);
    padding-block-end: calc(var(--padding-bottom, 48px) + 40px);
  }
}

/* --------------------------------------------------------------
   PRICING-KARTEN: HOVER AUF TOUCH ABSCHALTEN
   (Kundenwunsch Sergei, 08.09.2026 - "Hovereffekt weg in Handy
   und Tablet")

   Das Wachsen nach unten (Regel direkt oben) ist schon auf
   Maus-Geraete begrenzt. Der SCHATTEN kommt dagegen aus Elementor
   und wird OHNE Media-Query geschrieben - Elementors
   Box-Schatten-Regler ist nicht responsive, pro Breakpoint
   abschalten geht dort also nicht.
   Geprueft an post-7042.css: Innenabstand und Eckenradius stehen
   3x (Desktop / Tablet / Mobil), der Hover-Schatten nur 1x und
   ausserhalb jeder Media-Query.

   Diese Regel setzt den Hover-Schatten auf Touch auf den
   NORMAL-Wert zurueck. Projektweit gemessen: alle 19 Karten mit
   der Klasse pricing-card haben identische Werte -
   normal 0 4px 6px rgba(0,0,0,.063), hover 0 26px 52px rgba(0,0,0,.25).
   ACHTUNG: wird der Normal-Schatten in Elementor geaendert, muss
   der Wert hier mitgeaendert werden.

   Warum DREI Bedingungen (ODER-verknuepft):
   - max-width: 1024px  = Elementors Tablet-Breakpoint und darunter.
     Das ist die Bedingung, die wirklich zaehlt: sie greift auch,
     wenn man mit der MAUS auf ein schmales Fenster geht - und nur
     so ist der Effekt in den DevTools ueberhaupt pruefbar.
     Chrome DevTools "Mobile (no touch)" behaelt die Maus, dort sind
     hover:none und pointer:coarse beide false.
   - hover: none / pointer: coarse = echte Touch-Geraete, unabhaengig
     von der Breite. Faengt ein Tablet im Querformat ab, das breiter
     als 1024px meldet.
   Elementor-Breakpoints hier: 1024px (Tablet), 767px (Mobil) -
   geprueft in post-6755.css.

   Drei Klassen -> gleiche Spezifitaet wie Elementor
   (.elementor-7042 .elementor-element.elementor-element-XXX:hover),
   und style.css laedt nach allen post-*.css. Kein !important.
   -------------------------------------------------------------- */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .elementor .elementor-element.pricing-card:hover {
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.06274509803921569);
  }
}


/* =============================================================
   FLIESSTEXT-LINKS IM FAQ HERVORHEBEN
   Liste: "Haeufige Fragen: Link Telefonnummer nicht hervorgehoben"
          (Phone NGN / sip-telefonie, callcenter-services, internet)

   Ursache: hello-elementor/reset.css setzt a{text-decoration:none},
   und oben in dieser Datei setzen Zeile 1263 (.elementor-widget-text-editor a)
   sowie Zeile 1732 (a) jeweils color:inherit. Ein Inline-Link im
   Fliesstext war dadurch optisch identisch zum umgebenden Text
   (gemessen: color rgb(51,51,51), text-decoration none, weight 400).

   Warum die Textfarbe geerbt bleibt: das FAQ liegt je nach Seite auf
   hellem (internet, #F8F9FA) ODER dunklem Grund (sip-telefonie und
   callcenter-services haben das Hintergrundbild cta-hintergrund.webp).
   Keine einzelne Textfarbe erreicht auf beiden 4,5:1 - deshalb markiert
   nur die Unterstreichung in Markenfarbe den Link, der Text behaelt
   seine kontrastsichere Farbe.

   Buttons sind ausgenommen: die tel:-Buttons ("Beratungs-Hotline")
   sind ebenfalls a[href^="tel:"], haben aber ihr eigenes Styling.
   ============================================================= */
.e-n-accordion-item .elementor-widget-text-editor a:not(.elementor-button) {
  text-decoration: underline;
  text-decoration-color: #009BA5;   /* --e-global-color-primary */
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: text-decoration-color .2s ease;
}

.e-n-accordion-item .elementor-widget-text-editor a:not(.elementor-button):hover,
.e-n-accordion-item .elementor-widget-text-editor a:not(.elementor-button):focus-visible {
  text-decoration-color: #005F69;   /* --e-global-color-secondary */
}


/* =============================================================
   LOOP-KARUSSELL: ABSTAND ZWISCHEN DEN PFEILEN
   Liste: "die 2 Pfeile sind so nebeneinander"

   Ursache: der rote Hover-Kreis ist das ::before des Buttons und auf
   Desktop 54px gross (siehe Regel bei @media (min-width:1025px) weiter
   oben), der Button selbst nur 43px. Das sind 5,5px Ueberstand pro
   Seite. Elementor stand auf --arrow-next-right-position:-45px, damit
   betrug die Luecke zwischen den beiden Buttons nur 2px - der Kreis lag
   beim Hovern auf dem Nachbarpfeil. -55px ergibt 12px Luecke.

   Nur >=1025px: unterhalb 1024px ist der Kreis 42px bei 40px Button
   (1px Ueberstand) und die Luecke schon 8px - dort ist nichts zu
   korrigieren. Ohne die Media-Query wuerde diese Regel den Tablet-Wert
   (-48px) mit ueberschreiben und die Pfeile dort unnoetig auseinander-
   ziehen.

   Warum .arrows-light als Haken: alle 24 betroffenen Karussells tragen
   diese Klasse bereits (sie macht die Pfeile auf dunklen Abschnitten
   weiss, s. Regel bei .arrows-light weiter oben). Die 5 Karussells mit
   abweichendem Pfeil-Layout (--arrow-next-right-position:265px, auf
   home, geschaeftskunden, oeffentlicher-sektor, versorger und /master/)
   haben sie NICHT und bleiben unberuehrt. Ebenso die 5 mit
   .carousel-abstand, die schon auf -55px stehen.

   Spezifitaet: Elementor selektiert mit 3 Klassen
   (.elementor-<post> .elementor-element.elementor-element-<id>),
   dieser Selektor ebenfalls mit 3 - bei Gleichstand gewinnt die spaeter
   geladene Datei, und style.css laedt nach allen post-*.css. Deshalb
   kein !important; der Editor kann den Wert weiterhin uebersteuern.
   ============================================================= */
@media (min-width: 1025px) {
  .elementor .elementor-element.arrows-light {
    --arrow-next-right-position: -55px;
  }
}


/* =============================================================
   3 USPs ZENTRIEREN — Versorger + Oeffentlicher Sektor
   Liste: "3 USPs zentrieren"

   Das USP-Band (Icon + Titel + Zeile Text, dreimal) liegt im
   Container e49bcd5. Dessen innere Zeile stand auf
   justify-content:normal, also linksbuendig. Gemessen bei 1440px:
   die drei Kacheln sind je 330px breit und sitzen bei x=60, 410 und
   760 - die Gruppe reicht von 60 bis 1090, ihre Mitte liegt bei 575
   statt bei 720. Das Band stand also 145px zu weit links.

   Die ID e49bcd5 kommt auf allen drei Branchenseiten vor (dieselbe
   Sektion wurde kopiert). Die Kundin hat nur Versorger und
   Oeffentlichen Sektor genannt, deshalb sind die Regeln mit der
   Seiten-Klasse qualifiziert. Geschaeftskunden hat denselben Versatz -
   falls das auch zentriert werden soll, .elementor-15948 ergaenzen.
   ============================================================= */
.elementor-17132 .elementor-element.elementor-element-e49bcd5,
.elementor-17138 .elementor-element.elementor-element-e49bcd5 {
  --justify-content: center;
}


/* =============================================================
   SECURITY: TEXT IN 2 SPALTEN OBEN BUENDIG
   Liste: "Text 2 Spalten oben buendig ausrichten"

   Die beiden Spalten 190f2bbc und 392cb1e8 in der Zeile 4f537a0e
   sind gleich hoch (319px) und beginnen beide bei derselben
   Oberkante. Ihr Inhalt stand aber auf justify-content:center, also
   vertikal mittig - und weil die Textmengen unterschiedlich lang
   sind, begann der Text in der linken Spalte 59px, in der rechten
   72px unter der Spaltenoberkante. Das sind die 13px Versatz, die
   man sieht. flex-start setzt beide Texte an die Oberkante.
   ============================================================= */
.elementor-9238 .elementor-element.elementor-element-190f2bbc,
.elementor-9238 .elementor-element.elementor-element-392cb1e8 {
  --justify-content: flex-start;
}


/* Der Punkt "3 Schritte: Pille zu Headline Abstand zu gross" stand hier
   zuerst als CSS-Regel fuer zwei Seiten. Er ist jetzt in den Elementor-Daten
   umgesetzt - unterer Aussenabstand der Pille, auf allen betroffenen Seiten.
   Deshalb ist die Regel hier bewusst entfernt: sonst wuerde der Abstand auf
   internet und ki-voicebot doppelt korrigiert. */


/* =============================================================
   SUCHE: FOKUS-RAHMEN ENTFERNT
   Liste: "Weisse Border bei der Suche weg"

   Ursache war nicht die Suche selbst, sondern eine globale Regel in
   reset.css des Eltern-Themes hello-elementor:

     input:focus-visible, button:focus-visible, ... {
       box-shadow: 0 0 0 4px #fff;
       outline: 2px solid #000;
       outline-offset: 2px;
     }

   Bei Textfeldern greift :focus-visible auch beim Mausklick. Der
   Rahmen wird 2px AUSSERHALB gezeichnet und ragt damit ueber den
   hellen Suchstreifen (#F8F9FA) hinaus in die Flaeche darunter.
   Das war der Kasten, den man beim Hineinklicken gesehen hat.

   ACHTUNG - bewusste Abweichung von der Barrierefreiheit:
   Auf Kundenwunsch (Sergei, 06.09.2026) ist die Fokus-Anzeige hier
   ersatzlos entfernt. Damit ist im Suchfeld nicht mehr erkennbar, wo
   der Tastaturfokus steht -> WCAG 2.4.7 "Focus Visible" ist fuer
   dieses Element nicht erfuellt (BFSG-relevant).

   Angeboten und abgelehnt wurden:
     - Rahmen in Markenfarbe #009BA5, buendig nach innen (3,2:1)
     - Rahmen nur bei Tastaturbedienung, unsichtbar bei Mausklick

   Rueckweg: die drei Zeilen unten durch
     outline: 2px solid #009BA5; outline-offset: -2px;
   ersetzen. Voriger Dateistand:
   style.css.bak-20260906-before-suche-fokus

   Gilt bewusst NUR fuer die Suche. Die globale Regel bleibt
   unberuehrt, auf dunklen Flaechen ist der weisse Schein dort
   richtig. Der zweite Selektor faengt den Tippfehler in der
   CSS-ID ("searchbox.") ab.
   ============================================================= */
#searchbox .e-search-input:focus,
#searchbox .e-search-input:focus-visible,
#searchbox .e-search-submit:focus,
#searchbox .e-search-submit:focus-visible,
[id="searchbox."] .e-search-input:focus,
[id="searchbox."] .e-search-input:focus-visible,
[id="searchbox."] .e-search-submit:focus,
[id="searchbox."] .e-search-submit:focus-visible {
  box-shadow: none;
  outline: none;
}

/* ---------------------------------------------------------------
   Bogen-Trenner "How it Works" (Medien-ID 13089, Original 203x26 px)
   Stand 07.09.2026

   Problem: Auf den drei Seiten mit VIER Schritten - internet-telefonie
   (9303), it-infrastruktur-netzwerk (7432), security (9238) - steht am
   Bild-Widget in Elementor "Breite 61-62 %" bei fester "Hoehe 28 px".
   Der Kasten ist damit 133x28, das Bild aber 203x26. Ohne object-fit
   quetscht der Browser das Bild in den Kasten (Standardwert "fill"),
   der Bogen wird 1,65x zu hoch und sichtbar staerker gewoelbt als auf
   den uebrigen Seiten. Gemessen: 133x28 statt 133x17.

   Fix: contain haelt das Seitenverhaeltnis. Alle 55 Bogen-Bilder auf
   25 Seiten tragen dieselben Klassen, deshalb genuegt eine Regel - sie
   greift auch, wenn der Block auf eine neue Seite kopiert wird.
   Auf den 22 Seiten mit DREI Schritten (Breite 100 %, Kasten 196x25)
   ist die Regel praktisch wirkungslos: 195,2 statt 196 px, 0,8 px.

   Kein !important noetig. Elementor selektiert mit drei Klassen
   (.elementor-9303 .elementor-element.elementor-element-XXX img), diese
   Regel ebenfalls, und style.css laedt nach allen post-*.css.

   Wenn ein Bogen jemals verzerrt aussieht: hier zuerst schauen.
   --------------------------------------------------------------- */
img.attachment-medium.size-medium.wp-image-13089 {
  object-fit: contain;
}


/* =============================================================
   TELEFONNUMMERN UND E-MAIL-ADRESSEN IM FLIESSTEXT UNTERSTREICHEN
   Liste: "Nummern in Text, Boxen und FAQs unterstreichen,
           aber nicht die in Buttons"

   Erweitert den Look, den es bisher nur im FAQ-Akkordeon gab
   (Block "FLIESSTEXT-LINKS IM FAQ HERVORHEBEN" weiter oben), auf
   Fliesstext und Kontaktboxen der ganzen Site.

   Betroffen sind laut Auswertung der _elementor_data (Stand
   14.09.2026): 40 tel:/mailto:-Links in text-editor-Widgets
   ausserhalb des FAQ (Impressum, Datenschutz, Datenschutzhinweise
   mobile Apps, Barrierefreiheit, Kontakt, rund 25 News-Beitraege)
   sowie 6 tel:-Links in der icon-list-Kontaktbox auf /privatkunden/.
   Die 6 tel:-Links, die im FAQ liegen, deckt bereits die aeltere
   Regel ab; deren Werte sind hier absichtlich identisch, damit beide
   Stellen gleich aussehen.

   Buttons sind ausgenommen: die 98 tel:-Hotline-Buttons auf 31
   Seiten sind ebenfalls a[href^="tel:"], tragen aber .elementor-button
   und haben ihr eigenes Styling. Fliesstext-Links sind im Markup
   nacktes <a> ohne Klasse, die Trennung ist dadurch eindeutig.

   Ueberschriften sind eingeschlossen: die Nummer auf /kontakt/ liegt
   in einem heading-Widget. Sie bekommt dieselbe Unterstreichung, aber
   ohne font-weight-Angabe - Ueberschriften stehen auf 600/700, ein
   erzwungenes 500 wuerde sie duenner machen.

   Warum nur die Unterstreichung faerbt und nicht der Text: die Boxen
   liegen je nach Seite auf hellem und auf dunklem Grund. Keine
   einzelne Textfarbe erreicht auf beiden 4,5:1 - dieselbe Begruendung
   wie bei der FAQ-Regel.
   ============================================================= */
.elementor-widget-text-editor a[href^="tel:"]:not(.elementor-button),
.elementor-widget-text-editor a[href^="mailto:"]:not(.elementor-button),
.elementor-widget-icon-list a[href^="tel:"]:not(.elementor-button),
.elementor-widget-icon-list a[href^="mailto:"]:not(.elementor-button) {
  text-decoration: underline;
  text-decoration-color: #009BA5;   /* --e-global-color-primary */
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: text-decoration-color .2s ease;
}

.elementor-widget-text-editor a[href^="tel:"]:not(.elementor-button):hover,
.elementor-widget-text-editor a[href^="tel:"]:not(.elementor-button):focus-visible,
.elementor-widget-text-editor a[href^="mailto:"]:not(.elementor-button):hover,
.elementor-widget-text-editor a[href^="mailto:"]:not(.elementor-button):focus-visible,
.elementor-widget-icon-list a[href^="tel:"]:not(.elementor-button):hover,
.elementor-widget-icon-list a[href^="tel:"]:not(.elementor-button):focus-visible,
.elementor-widget-icon-list a[href^="mailto:"]:not(.elementor-button):hover,
.elementor-widget-icon-list a[href^="mailto:"]:not(.elementor-button):focus-visible {
  text-decoration-color: #005F69;   /* --e-global-color-secondary */
}

.elementor-widget-heading a[href^="tel:"]:not(.elementor-button),
.elementor-widget-heading a[href^="mailto:"]:not(.elementor-button) {
  text-decoration: underline;
  text-decoration-color: #009BA5;   /* --e-global-color-primary */
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}

.elementor-widget-heading a[href^="tel:"]:not(.elementor-button):hover,
.elementor-widget-heading a[href^="tel:"]:not(.elementor-button):focus-visible,
.elementor-widget-heading a[href^="mailto:"]:not(.elementor-button):hover,
.elementor-widget-heading a[href^="mailto:"]:not(.elementor-button):focus-visible {
  text-decoration-color: #005F69;   /* --e-global-color-secondary */
}


/* =============================================================
   PRICING-PILLE "EMPFOHLEN" MITTIG  (Klasse "pricing-badge")
   (Kundenliste "Pillen bei Pricing manchmal nicht mittig")
   -------------------------------------------------------------
   ANWENDEN: Im Elementor auf dem Pillen-Widget unter
   Erweitert -> CSS-Klassen den Namen  pricing-badge  eintragen
   (ohne Punkt). Unter Erweitert -> Position bleibt "Standard",
   die Positionierung steht komplett hier.

   WARUM NICHT IM ELEMENTOR:
   Elementors Positions-Regler kennt nur EINEN Versatz und schreibt
   ihn nach left. Damit wandert die LINKE KANTE der Pille, nicht
   ihre Mitte. Projektweit standen deshalb zwei Behelfswerte drin:
     left: 50%                      (rechenzentrum)
     left: calc((100% - 100px) / 2) (internet, ddos-schutz, bundles)
   Der erste schiebt die Pille immer um ihre halbe Breite nach
   rechts. Der zweite rechnet mit einer festen Pillenbreite von
   100px und stimmt nur, solange der Text genau so breit ist -
   daher "manchmal nicht mittig".

   WIE ES FUNKTIONIERT:
   left und right beide auf 0 spannen die Pille ueber die volle
   Kartenbreite auf. width: fit-content schrumpft sie wieder auf
   ihren Text und laesst dabei Platz auf beiden Seiten uebrig,
   den margin-inline: auto gleichmaessig verteilt. Das ist von der
   Textbreite unabhaengig und braucht kein transform.
   Bezugsrahmen ist die Karte selbst: Elementor-Container (.e-con)
   bringen position: relative bereits mit.

   Drei Klassen -> gleiche Spezifitaet wie Elementors eigene Regel
   (.elementor-XXXX .elementor-element.elementor-element-YYY),
   und style.css laedt nach allen post-*.css. Kein !important.

   min-width: 1025px ist die Gegenprobe zu Elementors
   Tablet-Breakpoint 1024px: ab Tablet abwaerts soll die Pille
   normal im Fluss stehen. Das erledigte vorher ein
   "position: static !important" im Eigenen CSS des Widgets,
   das dort jetzt entfaellt.
   ============================================================= */
@media (min-width: 1025px) {
  .elementor .elementor-element.pricing-badge {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
  }
}

/* "Weitere Produkte"-Slider: Pfeile nur auf Tablet und Handy zeigen.
   Das Loop-Carousel kennt fuer den Schalter "arrows" keine Breakpoint-Varianten,
   deshalb laeuft das Ausblenden auf Desktop hier ueber die Klasse
   "arrows-nur-mobil" am Widget. Breakpoint 1025px wie im Rest der Datei. */
@media (min-width: 1025px) {
  .arrows-nur-mobil .elementor-swiper-button,
  .arrows-nur-mobil .elementor-swiper-button-prev,
  .arrows-nur-mobil .elementor-swiper-button-next {
    display: none !important;
  }
}

/* =============================================================
   KI-KENNZEICHNUNG AUF KEYVISUALS
   (Klassen "ki-label-hell" und "ki-label-dunkel", Nick, 21.09.2026)
   -------------------------------------------------------------
   ANWENDEN: Im Elementor auf dem BILD-Widget des Keyvisuals unter
   Erweitert -> CSS-Klassen EINE der beiden Klassen eintragen
   (ohne Punkt), je nachdem wie hell das Motiv an der Stelle unten
   rechts ist:

     ki-label-hell    weisses Label  -> fuer DUNKLE Motive
     ki-label-dunkel  schwarzes Label -> fuer HELLE Motive

   Die beiden sind gleichrangig, es wird also nie beides zusammen
   eingetragen.

   WIE ES FUNKTIONIERT:
   Elementor gibt dem Widget-Wrapper ohnehin schon position: relative
   mit, und das Bild fuellt den Wrapper exakt aus (gemessen 720x1036
   auf Desktop; im Widget stehen Breite und Hoehe auf 100 % mit
   object-fit: cover). Das ::after sitzt deshalb pixelgenau im Bild,
   ohne dass am Aufbau der Sektion irgendetwas geaendert werden muss.
   Genau darum ist es ein ::after und kein zweites Bild-Widget.

   DIE BEIDEN GRAFIKEN liegen in der Mediathek:
   hell   = Anhang 18713, weisse Flaeche, schwarzes "KI"
   dunkel = Anhang 18715, schwarze Flaeche, weisses "KI"
   Beide sind 92x92px und zu 50 % deckend, wirken also wie Milchglas.

   Gemessen am 21.09.2026 an genau der Bildstelle, an der das Label
   sitzt: 19 der 20 Leistungs-Keyvisuals sind sehr dunkel
   (Luminanz 0 bis 31 von 255) und tragen deshalb ki-label-hell.
   ki-label-dunkel steht fuer spaetere helle Motive bereit und ist
   im Moment nirgends im Einsatz. Das 20. Keyvisual (Customer
   Service Solutions) ist ein echtes Stockfoto und traegt bewusst
   KEIN Label.

   POSITION unten rechts: oben rechts scheidet aus, dort ueberdeckt
   die mitlaufende Kopfzeile mit dem VSE-NET-Logo die Ecke.
   24px Abstand haelt das Label von der abgerundeten Bildecke frei
   (Radius unten rechts 50px auf Desktop, 24px ab Tablet).

   KANTENLAENGE 25px auf Kundenwunsch. Die Grafik ist 92px gross und
   wird per background-size: contain heruntergerechnet, bleibt also
   auch auf Retina scharf.

   pointer-events: none, damit das Label einen Klick auf das Bild
   nicht abfaengt.
   ============================================================= */
.ki-label-hell,
.ki-label-dunkel {
  position: relative;
}

.ki-label-hell::after,
.ki-label-dunkel::after {
  content: "";
  position: absolute;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  inline-size: 25px;
  block-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}

.ki-label-hell::after {
  background-image: url('/wp-content/uploads/2026/03/ki-label-hell.png');
}

.ki-label-dunkel::after {
  background-image: url('/wp-content/uploads/2026/09/ki-label-dunkel.png');
}

/* =============================================================
   KI-KENNZEICHNUNG UEBER DIE MEDIATHEK  (Klasse "ist-ki-bild")
   (Nick, 23.09.2026)
   -------------------------------------------------------------
   ANWENDEN: Gar nicht im Elementor. Mediathek -> Bild anklicken ->
   Haekchen "Mit KI erstellt". Den Rest macht der Filter in
   functions.php, der solchen Bildern die Klasse ist-ki-bild ans
   <img> haengt. Dort steht auch, warum das der richtige Weg fuer
   Beitragsbilder ist.

   WARUM :has():
   Ein ::after laesst sich nicht an ein <img> haengen, ersetzte
   Elemente haben keine Pseudoelemente. Die Regel greift deshalb auf
   den umgebenden Elementor-Widget-Rahmen zu, sobald darin ein
   gekennzeichnetes Bild steckt.

   WAS DAMIT ERFASST IST:
   .elementor-widget-image deckt beides ab. Elementor haengt diese
   Klasse auch an das Beitragsbild-Widget:
     class="... elementor-widget-theme-post-featured-image
                elementor-widget-image"
   Ein Selektor genuegt also fuer Beitragsbilder in allen 12
   Loop-Vorlagen UND fuer normale Bild-Widgets im Fliesstext.

   DIE AUSNAHME am Ende der ersten Zeile:
   Die 19 Keyvisuals holen ihr Label schon ueber ki-label-hell am
   Widget. Wuerde jemand dort zusaetzlich das Haekchen setzen, saessen
   zwei Labels uebereinander. :not() nimmt diese Widgets heraus, die
   Widget-Klasse gewinnt.

   RANDABSTAND 16px statt der 24px bei den Keyvisuals: die Loop-Karten
   sind mit rund 390x260px deutlich kleiner als ein Keyvisual, dort
   wirken 24px zu weit hineingerueckt. Kantenlaenge bleibt bei 25px.
   ============================================================= */
.elementor-widget-image:has(img.ist-ki-bild):not(.ki-label-hell):not(.ki-label-dunkel) {
  position: relative;
}

.elementor-widget-image:has(img.ist-ki-bild):not(.ki-label-hell):not(.ki-label-dunkel)::after {
  content: "";
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: 16px;
  inline-size: 25px;
  block-size: 25px;
  background: url('/wp-content/uploads/2026/03/ki-label-hell.png') no-repeat center / contain;
  pointer-events: none;
  z-index: 2;
}

/* Desktop: both label variants sit 20px further in from the bottom right corner. */
@media (min-width: 1025px) {
  .ki-label-hell::after,
  .ki-label-dunkel::after {
    inset-block-end: 44px;
    inset-inline-end: 44px;
  }

  .elementor-widget-image:has(img.ist-ki-bild):not(.ki-label-hell):not(.ki-label-dunkel)::after {
    inset-block-end: 36px;
    inset-inline-end: 36px;
  }
}

/* HELLES MOTIV:
   Geht das weisse Label auf dem Bild unter, traegt man am Bild-Widget
   zusaetzlich die Klasse ki-label-dunkel ein. Dann greift der Block
   "KI-KENNZEICHNUNG AUF KEYVISUALS" weiter oben und uebernimmt die
   Darstellung komplett, mit der schwarzen Grafik. Einziger Unterschied:
   dort sind es 24px Randabstand statt 16px. Hier ist deshalb bewusst
   keine eigene Regel noetig.

   FALLBACK OHNE :has():
   Browser ohne :has()-Unterstuetzung zeigen kein Label. Das betrifft
   Stand 09/2026 nur noch sehr alte Browser (vor Chrome 105, Safari 15.4,
   Firefox 121). Wer das nicht in Kauf nehmen will, muesste den Weg ueber
   eine Widget-Klasse gehen wie bei den Keyvisuals.
   ============================================================= */

/* =============================================================
   USERCENTRICS-EMBED AUF DER DATENSCHUTZSEITE  (Nick, 25.09.2026)
   -------------------------------------------------------------
   WO: Seite 8370 /datenschutz/, HTML-Widget 7894060
       <div class="uc-embed uc-embed-styled" uc-show-toggle="true"
            uc-embedding-type="category" uc-styling="true" uc-data="all">
       Usercentrics befuellt das Element zur Laufzeit.

   WARUM DIESER BLOCK:
   Usercentrics liefert mit uc-styling="true" eine eigene, neutrale
   Gestaltung mit. Zwei Dinge aus dem Theme haben sich trotzdem
   durchgesetzt und das Embed anders aussehen lassen als auf
   vsenet.de:

   1. Die Dienstnamen sind <button>-Elemente. reset.css faerbt
      JEDEN Button im Projekt pink:
        [type="button"], button { color: rgb(204,51,102); }
      Dadurch stand die komplette Diensteliste in Pink statt in
      Textfarbe. Der Rahmen aus derselben Regel wird von
      Usercentrics schon selbst weggeraeumt, nur die Farbe blieb.

   2. Die Zwischenueberschriften sind <h2>/<h3>/<h4>. Sie haben die
      globale Elementor-Typografie geerbt:
        .elementor-kit-7 h2 -> "Satoshi 700", 46px
      Auf vsenet.de sind es 38px in normaler Staerke. Deshalb wirkte
      die Liste hier viel lauter.

   DIE WERTE stammen aus einer Messung auf vsenet.de/datenschutz/:
     h2 38px / h3 24px / h4 15px, alle Gewicht 400, Zeilenhoehe 1.2
     Listentext 18px, Zeilenhoehe 1.6

   BEWUSSTER UNTERSCHIED ZU vsenet.de:
   Dort laeuft das Embed in Arial, weil das die Theme-Schrift ist.
   Hier bleibt es bei Satoshi, der Hausschrift des Relaunchs - sonst
   saehe der Block auf der eigenen Seite wie ein Fremdkoerper aus.
   Wichtig dabei: fuer die Ueberschriften ausdruecklich "Satoshi"
   setzen, nicht "Satoshi 700". Letzteres ist eine eigene Familie,
   die nur den fetten Schnitt enthaelt; ein font-weight: 400 darauf
   bliebe wirkungslos.

   Soll es doch exakt wie vsenet.de aussehen, genuegt es, in der
   ersten Regel Satoshi gegen Arial zu tauschen.
   ============================================================= */
.uc-embed .uc-embed-list-headline,
.uc-embed .uc-embed-list-headline-description {
  font-family: Satoshi, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: #333;
}

.uc-embed h2.uc-embed-list-headline {
  font-size: 38px;
}

.uc-embed h3.uc-embed-list-headline {
  font-size: 24px;
}

.uc-embed h4.uc-embed-list-headline-description {
  font-size: 15px;
}

.uc-embed .uc-embed-container {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
}

/* Nur die Textschalter einfaerben. Die Ein/Aus-Schalter
   (.uc-embed-toggle-button) bleiben unangetastet, ihr Aussehen
   kommt von Usercentrics und stimmt bereits mit vsenet.de ueberein. */
.uc-embed .uc-embed-collapsed-button,
.uc-embed .uc-embed-collapsed-link {
  color: #333;
  font-size: 18px;
}

/* -------------------------------------------------------------
   USERCENTRICS-EMBED: UEBERLAUF AUF SCHMALEN BILDSCHIRMEN
   (Nachtrag zum Block darueber, 25.09.2026)

   PROBLEM: Auf dem Handy war die Seite 541px breit statt 390px,
   es liess sich also seitlich wegschieben. Der Ueberlauf kam
   komplett aus dem Embed.

   ZWEI URSACHEN, beide aus dem Usercentrics-Markup:

   1. .uc-embed-container ist ein Grid. Grid-Elemente haben von
      sich aus min-width: auto und schrumpfen deshalb nicht unter
      ihre Inhaltsbreite. Die Spalte war 521px breit, obwohl der
      Container nur 350px hat. minmax(0, 1fr) und min-width: 0
      erlauben das Schrumpfen.

   2. Die Dienstnamen stehen auf white-space: nowrap. Lange Namen
      wie "Usercentrics Consent Management Platform" konnten nicht
      umbrechen und haben allein 434px gebraucht.

   Beides gilt bewusst auf allen Breiten, nicht nur per Media Query:
   Umbrechen duerfen schadet auf dem Desktop nicht, dort passen die
   Namen ohnehin in eine Zeile.
   ------------------------------------------------------------- */
.uc-embed .uc-embed-container {
  grid-template-columns: minmax(0, 1fr);
}

.uc-embed .uc-embed-container > *,
.uc-embed .uc-embed-list-item,
.uc-embed .uc-embed-collapsed-button {
  min-width: 0;
}

.uc-embed .uc-embed-collapsed-button-content {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}