/* 
Theme Name: Württemberger Medien
Theme URI: https://github.com/elementor/hello-theme/
Description: Württemberger Medien Elementor Child Theme
Author: Württemberger Medien
Author URI: https://w-medien.de/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elemento
r-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
*/
nav, nav #menubar-138 {
	z-index: 9999999 !important;
}

.elementor-widget-video .elementor-wrapper iframe {
	height: 450px !important;
}
.inhaltsbreite {
	max-width: 1600px;
}
.inhaltsbreite-links-Rand {
	max-width: calc( ( ( 100% - 1600px ) / 2 ) + 1600px );
}
/*--------------Business Data-------------------*/

/* Business Data without title */
.business-ohne-titel .b_data_title {
	display: none;
}

/*------------Textmarkierung-------------*/
/*** Markierungsfarbe ändern***/
::-moz-selection {
background-color: #0EA599;
color: #fff;
}
::selection {
background-color: #0EA599;
color: #fff;
}

/*-------------------Navigationsleiste-----------------*/
/*Logo auf Startseite nicht anzeigen*/
.page-id-2 #seitenlogo {
	display: none;
}
/*Navigation auf Startseite weiterhin rechts anzeigen*/
.page-id-2 .elementor-2518 .elementor-element.elementor-element-76ed13b2 {
	justify-content: right;
}
.elementor-2518 .elementor-element.elementor-element-3b50ed1 .wpr-sub-mega-menu {
	background-color: transparent !important;
	border-style: none;
}
/*Zeiger fährt aus beim hovern*/
.elementor .elementor-element.elementor-element > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-title:hover:not(.e-current) {
    border-color: transparent; /* Setzt die Border-Breite auf 0 */
}

.elementor .elementor-element.elementor-element > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-title:not(.e-current) {
	position: relative;
    /*overflow: hidden; /* Verhindert sichtbares Überlaufen des Unterstrichs */
}
.elementor .elementor-element.elementor-element > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-title:not(.e-current)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0; /* Startbreite auf 0 setzen */
    height: 4px; /* Höhe des Unterstrichs */
    background-color: transparent;
    transition: width 0.3s ease-in-out; /* Geschmeidige Animation */
}
.elementor .elementor-element.elementor-element > .elementor-widget-container > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-title:not(.e-current):hover::after {
    width: 100%; /* Beim Hovern auf volle Breite ausdehnen */
	background-color: var(--e-global-color-primary); /* Farbe des Unterstrichs */
}
.elementor-widget-n-menu .e-n-menu-heading .e-n-menu-title:not(:last-child):after {
border-color: transparent !important;
}



/*--------------Fonts------------------*/
.font-tuerkis {
	color: #00BAB0;
}
.font-tuerkisweiss {
	color: #006168;
}
.font-weiss {
	color: white;
}
.font-size-body {
	font-size: 1.1rem;
}

/*-----------Link-----------------*/
.link-weiss a:link,
.link-weiss  a:visited,
.link-weiss a:hover,
.link-weiss a:focus,
.link-weiss a:active {
	color: white;
}

.link-weiss-tuerkis a:link,
.link-weiss-tuerkis  a:visited {
	color: white;
}
.link-weiss-tuerkis a:hover,
.link-weiss-tuerkis a:focus,
.link-weiss-tuerkis a:active {
	color: #0EA599;
}

.link-tuerkis-weiss a:link,
.link-tuerkis-weiss  a:visited {
	color: #0EA599;
}
.link-tuerkis-weiss a:hover,
.link-tuerkis-weiss a:focus,
.link-tuerkis-weiss a:active {
	color: white;
}
.link-grau-weiss a:link,
.link-grau-weiss  a:visited {
	color: #888888;
}
.link-grau-weiss a:hover,
.link-grau-weiss a:focus,
.link-grau-weiss a:active {
	color: white;
}

.link-tuerkis-schwarz a:link,
.link-tuerkis-schwarz  a:visited {
	color: #0EA599;
}
.link-tuerkis-schwarz a:hover,
.link-tuerkis-schwarz a:focus,
.link-tuerkis-schwarz a:active {
	color: black;
}
.link-dunkeltuerkis-schwarz a:link,
.link-dunkeltuerkis-schwarz  a:visited {
	color: #006168;
}
.link-tuerkis-schwarz a:hover,
.link-tuerkis-schwarz a:focus,
.link-tuerkis-schwarz a:active {
	color: black;
}

a {
	text-decoration: none !important;
}

/*-----------Startseite Leistungspunkte------------*/
.leistungen .elementor-cta__bg-overlay {
	background-image: linear-gradient(to bottom,rgba(255,255,255,0),rgba(31,31,31,.6));
}

/*------------Sticky Buttons------------------*/
#iconUp {
	display: none;
	cursor: pointer;
}

#kontakt-fahne-tel, #kontakt-slide-tel,
#kontakt-fahne-mail, #kontakt-slide-mail{
  position: fixed;
  transition: right 0.5s ease-in-out;
}

#kontakt-fahne-tel,
#kontakt-fahne-mail{
  right: 0;
  cursor: pointer;
  /* Add other styling for kontakt-fahne here */
}

#kontakt-slide-tel,
#kontakt-slide-mail {
  right: -350px;
  /* Add other styling for kontakt-slide here */
}
/*--------------SVG--------------*/
.svg-tuerkis circle,
.svg-tuerkis path,
.svg-tuerkis polygon {
	stroke: #0EA599;
}

/*------------Formular-------------*/
div.wpforms-container-full button[type=submit]:not(:hover):not(:active),
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: #006168;
}
	div.wpforms-container-full button[type=submit]:hover,
	div.wpforms-container-full button[type=submit]:active {
		background-color: #006168;
	}

.font-weiss div.wpforms-container-full button[type=submit]:not(:hover):not(:active),
.font-weiss div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: #006168;
}
	.font-weiss div.wpforms-container-full button[type=submit]:hover,
	.font-weiss div.wpforms-container-full button[type=submit]:active {
		background-color: #191919;
	}

.wpforms-required-label {
	color: black !important;
}
.font-weiss input,
.font-weiss textarea,
.font-weiss div.wpforms-container-full input[type=checkbox]:before {
	background-color: #FFFFFF94 !important;
	border-color: white !important;
}
.wpforms-field-required a {
	color: #006168 !important;
}
#altEmail_container label {
	color: black;
}
/*---------------Galerie-----------------*/
header.elementor-slideshow__header {
	background-color: #0EA599 !important;
}
/*--------------Barrierefreiheit-------------*/
/***********************
  ULCO – WPR/Elementor Menü – A11y & Layout
***********************/

body a.brlbs-cmpnt-cb-btn {
	background: #9e2121 !important;
}

/* 1) Grundlayout: Link + Toggle nebeneinander */
.wpr-nav-menu-horizontal .menu-item-has-children {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  position: relative;
  white-space: nowrap; /* kein Zeilenumbruch */
}

/* Der Link soll nicht die ganze Reihe füllen */
.wpr-nav-menu-horizontal .menu-item-has-children > a.wpr-menu-item {
  width: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: .375rem;
}

/* 2) Plugin-eigenes Pfeil-Icon im Link ausblenden (wir nutzen eigenen Toggle) */
.wpr-nav-menu-horizontal .menu-item-has-children > a .wpr-sub-icon {
  display: none !important;
}

/* 3) Neues Toggle-Button Styling (wird per JS hinter den Link gesetzt) */
.wpr-nav-menu-horizontal .submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: #006168;
  cursor: pointer;
  line-height: 1;
}

/* Icon-Grundstil + Rotation bei geöffnetem Zustand */
.wpr-nav-menu-horizontal .submenu-toggle svg {
  transition: transform .2s ease;
	fill:white;
}
.wpr-nav-menu-horizontal .submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* 4) Deutliche Tastatur-Fokus-Ringe (auch für Links) */
.wpr-nav-menu-horizontal a.wpr-menu-item:focus-visible,
.wpr-nav-menu-horizontal .submenu-toggle:focus-visible {
  outline: 2px solid #0EA599;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 5) Mega-Menu: Anzeige, wenn per JS geöffnet (data-open="true") */
.wpr-nav-menu-horizontal .menu-item-has-children[data-open="true"] > .wpr-sub-mega-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Optional: weiches Ein-/Ausblenden, falls das Plugin Opacity nutzt */
.wpr-nav-menu-horizontal .wpr-sub-mega-menu {
  z-index: 9999; /* sicher über anderen Bereichen */
}

/* 6) Hover soll weiterhin funktionieren (Desktop) */
@media (hover: hover) and (pointer: fine) {
  .wpr-nav-menu-horizontal .menu-item-has-children:hover > .wpr-sub-mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* 7) Kollisionen: Manche Themes setzen li/a als Block – hier hart neutralisieren */
.wpr-nav-menu-horizontal li.menu-item,
.wpr-nav-menu-horizontal li.menu-item > a.wpr-menu-item {
  /* verhindert Layout-Sprünge durch Fremdregeln */
  vertical-align: middle;
}

/* 8) Abstand der Hauptpunkte leicht harmonisieren */
.wpr-nav-menu-horizontal .wpr-nav-menu > li.menu-item {
  margin-right: .75rem;
}
.wpr-nav-menu-horizontal .wpr-nav-menu > li.menu-item:last-child {
  margin-right: 0;
}

/* 9) Optional: Stil des geöffneten Hauptlinks (visuelles Feedback) */
.wpr-nav-menu-horizontal .menu-item-has-children[data-open="true"] > a.wpr-menu-item {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* 10) Mobile/Enge Breite: Falls die Leiste umbrechen MUSS, Toggle links neben Text zulassen */
@media (max-width: 900px) {
  .wpr-nav-menu-horizontal .menu-item-has-children {
    gap: .4rem;
  }
  .wpr-nav-menu-horizontal .submenu-toggle {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* 11) Sicherheitsnetz: Manche Skins erzwingen absolute Positionen am Mega-Panel
      – diese Regeln helfen, wenn Panels "wegklicken" */
.wpr-nav-menu-horizontal .wpr-sub-mega-menu {
  pointer-events: none; /* Standard: nur bei Hover/data-open aktivieren */
}
.wpr-nav-menu-horizontal .menu-item-has-children:hover > .wpr-sub-mega-menu,
.wpr-nav-menu-horizontal .menu-item-has-children[data-open="true"] > .wpr-sub-mega-menu {
  pointer-events: auto;
}

/* 12) High-specificity Fallbacks gegen aggressive Theme/Plugin-Regeln */
.wpr-nav-menu-horizontal .menu-item-has-children > a.wpr-menu-item,
.wpr-nav-menu-horizontal .menu-item-has-children .submenu-toggle {
  /* verhindert, dass maximale Breiten o.ä. aus Skins greifen */
  max-width: none !important;
}
/**************
  Fix: Mega-Menu nicht mehr „zentriert am Toggle“,
  sondern korrekt unter dem Menüpunkt und innerhalb des Viewports
**************/

/* Basis: Panel immer direkt unter dem Menüpunkt platzieren */
.wpr-nav-menu-horizontal .menu-item-has-children > .wpr-sub-mega-menu {
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  /* Falls das Plugin vorher opacity/visibility steuert: */
  will-change: transform, left, width;
  max-width: 100vw !important;
  overflow-x: clip; /* verhindert, dass Inhalt rausläuft */
}

/* Wenn „Full Width“ im Plugin aktiv ist, spann das Panel an die Viewport-Kanten.
   margin-left zentriert relativ zum Viewport, egal wo der Menüpunkt steht. */
.wpr-nav-menu-horizontal .wpr-mega-menu-width-full > .wpr-sub-mega-menu {
  width: 1202px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important; /* neutralisiert evtl. frühere Regeln */
}

/* Optional: statt 100vw eine max. Inhaltsbreite erzwingen und nicht aus dem Screen laufen */
:root { --mega-max: 1280px; } /* an euer Layout anpassen */
.wpr-nav-menu-horizontal .wpr-mega-menu-width-full > .wpr-sub-mega-menu .elementor {
  max-width: min(var(--mega-max), 100vw) !important;
  margin-inline: auto !important; /* Inhalt in der Mitte halten */
  padding-inline: clamp(16px, 3vw, 32px) !important;
}

/* Letzter/äußerer Menüpunkt: Panel nach rechts klappen, damit nichts rausfällt */
.wpr-nav-menu-horizontal .wpr-nav-menu > li.menu-item:last-child > .wpr-sub-mega-menu,
.wpr-nav-menu-horizontal .wpr-nav-menu > li.menu-item:nth-last-child(1) > .wpr-sub-mega-menu {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* Sicherheit: Plugin setzt manchmal Inline-left; diese Regel gewinnt trotzdem */
@media (min-width: 1241px) {
	.wpr-nav-menu-horizontal .wpr-sub-mega-menu[style] {
  left: 0 !important;
}
}

/* Kleine Bildschirme: Panel vollflächig & scrollbar, nicht außerhalb */
@media (max-width: 900px) {
  .wpr-nav-menu-horizontal .wpr-sub-mega-menu {
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* 1) Im Mega-Panel wieder normalen Umbruch erlauben */
.wpr-sub-mega-menu,
.wpr-sub-mega-menu .elementor,
.wpr-sub-mega-menu .elementor * {
  white-space: normal !important;
}

/* 2) Sauberes Wort-Wrapping inkl. Silbentrennung */
.wpr-sub-mega-menu p,
.wpr-sub-mega-menu li,
.wpr-sub-mega-menu a,
.wpr-sub-mega-menu span,
.wpr-sub-mega-menu .elementor-widget-text-editor {
  overflow-wrap: anywhere;      /* bricht sehr lange Wörter */
  word-break: normal;
  hyphens: auto;                /* automatische Silbentrennung (Browser/Dict abhängig) */
}

/* 3) Flex-/Tabs-Überlauf verhindern (Nested Tabs in euren Panels) */
.wpr-sub-mega-menu .e-n-tabs,
.wpr-sub-mega-menu .e-n-tabs-heading,
.wpr-sub-mega-menu .e-n-tab-title,
.wpr-sub-mega-menu .e-n-tabs-content {
  min-width: 0;                 /* erlaubt Flex-Shrink samt Umbruch */
  white-space: normal !important;
}

/* 4) Falls Menü-Links im Panel selbst vom Topbar-Stil erwischt wurden */
.wpr-sub-mega-menu .wpr-menu-item {
  white-space: normal !important;
}

/* 5) Optional: Überschriften nicht unnötig in einer Zeile festnageln */
.wpr-sub-mega-menu h1,
.wpr-sub-mega-menu h2,
.wpr-sub-mega-menu h3,
.wpr-sub-mega-menu h4,
.wpr-sub-mega-menu h5,
.wpr-sub-mega-menu h6 {
  white-space: normal !important;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Gut sichtbarer Fokus auf Tab-Titeln im Mega-Panel */
.wpr-sub-mega-menu .e-n-tab-title:focus {
  outline: 2px solid #0EA599;
  outline-offset: 2px;
}

/* Falls das JS eine "offen"-Klasse setzt, zeige das Panel (nur Tastaturfall) */
.menu-item[data-id="227"].wpr-active-menu-item > .wpr-sub-mega-menu,
.menu-item[data-id="227"] .wpr-sub-mega-menu.wpr-submenu-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Sicherheitshalber: Tab-Titel immer fokusierbar */
.wpr-sub-mega-menu .e-n-tabs-heading .e-n-tab-title[tabindex] {
  cursor: pointer;
}
/* 1) Niemals das Mega-Menu abschneiden */
.elementor-location-header,
.wpr-nav-menu-container,
.wpr-mega-menu-container {
  overflow: visible !important;
}

/* 2) Basis: Mega-Menü darf nicht breiter als der Bildschirm werden */
.wpr-nav-menu-horizontal .wpr-mega-menu-width-full > .wpr-sub-mega-menu {
  max-width: none !important;                 /* Elementor/WPR Inline-Style aushebeln */
  width: min(1202px, 100vw - 32px) !important;/* 16px Rand links/rechts */
  z-index: 9999;
}

/* 4) Verhindern, dass ein relativ positionierter Elternknoten das Panel beschneidet */
.wpr-nav-menu-horizontal .wpr-mega-menu-width-full { position: static !important; }

/* 5) Zeilenumbruch im Inhalt sicherstellen (falls WPR/Elementor white-space gesetzt hatte) */
.wpr-sub-mega-menu,
.wpr-sub-mega-menu * {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* === Viewport-zentriert <=1240px – ignoriert Plugin-Offsets (left:-xxxpx) === */
@media (max-width: 1600px) {

  /* Nichts in der Kette darf neue Containing-Blocks/Offsets erzeugen */
  .elementor-location-header,
  .wpr-mega-menu-container,
  .wpr-nav-menu-horizontal,
  .wpr-nav-menu-horizontal .wpr-mega-menu-width-full,
  .wpr-nav-menu-horizontal .menu-item-has-children {
    position: static !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* Panel immer am Viewport ausrichten – NICHT am <li> */
  .wpr-nav-menu-horizontal .wpr-mega-menu-width-full > .wpr-sub-mega-menu,
  .wpr-nav-menu-horizontal .wpr-mega-menu-width-full > .wpr-sub-mega-menu[style*="left"] {
    position: absolute !important;
    /* Breite: nie breiter als Viewport (mit 16px Rand) */
    width: min(1202px, 100vw - 32px) !important;
    max-width: none !important;
    box-sizing: border-box !important;

    /* Horizontal im Viewport zentrieren (unabhängig vom Elternknoten) */
    left: 20vw !important;               /* Viewportmitte als Bezug */
    right: auto !important;
    transform: translateX(-50%) !important;

    /* Vertikal direkt unter dem Menüpunkt */
    top: 100% !important;
    z-index: 9999;
  }

  /* Falls WPR Inline-Styles schreibt, heb sie komplett auf */
  .wpr-nav-menu-horizontal .wpr-sub-mega-menu[style] {
    right: auto !important;
    /* (left regeln wir oben via 50vw) */
  }

  /* Inhalt niemals abschneiden & normal umbrechen */
  .wpr-sub-mega-menu,
  .wpr-sub-mega-menu * {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 1250px) {
	
  /* Panel immer am Viewport ausrichten – NICHT am <li> */
  .wpr-nav-menu-horizontal .wpr-mega-menu-width-full > .wpr-sub-mega-menu,
  .wpr-nav-menu-horizontal .wpr-mega-menu-width-full > .wpr-sub-mega-menu[style*="left"] {
		left: 26vw !important;
	}
}	
@media (max-width: 1150px) {
	
  /* Panel immer am Viewport ausrichten – NICHT am <li> */
  .wpr-nav-menu-horizontal .wpr-mega-menu-width-full > .wpr-sub-mega-menu,
  .wpr-nav-menu-horizontal .wpr-mega-menu-width-full > .wpr-sub-mega-menu[style*="left"] {
    left: 33vw !important;
	}
}