/* 
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
*/
/*
:root { 
 --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.54rem), 0.49rem);
    --space-3xs: clamp(0.66rem, calc(0.04vw + 0.63rem), 0.7rem);
    --space-2xs: clamp(0.82rem, calc(0.17vw + 0.74rem), 0.99rem);
    --space-xs: clamp(1.02rem, calc(0.37vw + 0.85rem), 1.4rem);
    --space-s: clamp(1.28rem, calc(0.69vw + 0.95rem), 1.98rem);
    --space-m: clamp(1.6rem, calc(1.17vw + 1.04rem), 2.8rem);
    --space-l: clamp(2rem, calc(1.92vw + 1.08rem), 3.96rem);
    --space-xl: clamp(2.5rem, calc(3.03vw + 1.05rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(4.69vw + 0.88rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(7.13vw + 0.5rem), 11.19rem);
    --space-4xl: clamp(4.88rem, calc(10.71vw + -0.24rem), 15.83rem);
    --text-xs: clamp(1.42rem, calc(-0.03vw + 1.44rem), 1.39rem);
    --text-s: clamp(1.6rem, calc(0.07vw + 1.57rem), 1.67rem);
    --text-m: clamp(1.8rem, calc(0.2vw + 1.71rem), 2rem);
    --text-l: clamp(2.02rem, calc(0.37vw + 1.85rem), 2.4rem);
    --text-xl: clamp(2.28rem, calc(0.59vw + 2rem), 2.88rem);
    --text-2xl: clamp(2.56rem, calc(0.87vw + 2.15rem), 3.46rem);
    --text-3xl: clamp(2.88rem, calc(1.24vw + 2.29rem), 4.15rem);
    --text-4xl: clamp(3.24rem, calc(1.7vw + 2.43rem), 4.98rem);
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.6rem, calc(-0.2vw + 0.89rem), 0.8rem);
    --radius-m: clamp(1rem, calc(-0.2vw + 1.29rem), 1.2rem);
    --radius-l: clamp(1.6rem, calc(-0.39vw + 2.19rem), 2rem);
    --radius-xl: clamp(2.6rem, calc(-0.59vw + 3.48rem), 3.2rem);
    --radius-full: 999rem;
	  --shadow-primary: hsla(0, 0%, 0%, 0.15);
    --shadow-xs: 0 1px 2px var(--shadow-primary);
    --shadow-s: 0 1.5px 3px var(--shadow-primary);
    --shadow-m: 0 2px 6px var(--shadow-primary);
    --shadow-l: 0 3px 12px var(--shadow-primary);
    --shadow-xl: 0 6px 48px var(--shadow-primary);
}
*/
:root{
	/* --space-4xs: clamp(0.59rem, calc(-0.25vw + 0.67rem), 0.32rem);
    --space-3xs: clamp(0.74rem, calc(-0.27vw + 0.82rem), 0.45rem);
    --space-2xs: clamp(0.92rem, calc(-0.26vw + 1.01rem), 0.64rem);
    --space-xs: clamp(1.15rem, calc(-0.23vw + 1.23rem), 0.9rem);
    --space-s: clamp(1.44rem, calc(-0.15vw + 1.49rem), 1.27rem);
    --space-m: clamp(1.8rem, calc(0vw + 1.8rem), 1.8rem);
    --space-l: clamp(2.25rem, calc(0.27vw + 2.16rem), 2.54rem);
    --space-xl: clamp(2.81rem, calc(0.73vw + 2.58rem), 3.6rem);
    --space-2xl: clamp(3.52rem, calc(1.46vw + 3.05rem), 5.09rem);
    --space-3xl: clamp(4.4rem, calc(2.59vw + 3.56rem), 7.2rem);
    --space-4xl: clamp(5.49rem, calc(4.33vw + 4.11rem), 10.18rem);
*/
 --space-4xs: clamp(0.66rem, calc(-0.14vw + 0.72rem), 0.53rem);
    --space-3xs: clamp(0.82rem, calc(-0.07vw + 0.86rem), 0.75rem);
    --space-2xs: clamp(1.02rem, calc(0.04vw + 1.01rem), 1.06rem);
    --space-xs: clamp(1.28rem, calc(0.24vw + 1.17rem), 1.5rem);
    --space-s: clamp(1.6rem, calc(0.57vw + 1.33rem), 2.12rem);
    --space-m: clamp(2rem, calc(1.08vw + 1.48rem), 3rem);
    --space-l: clamp(2.5rem, calc(1.89vw + 1.6rem), 4.24rem);
    --space-xl: clamp(3.13rem, calc(3.12vw + 1.64rem), 6rem);
    --space-2xl: clamp(3.91rem, calc(4.96vw + 1.53rem), 8.48rem);
    --space-3xl: clamp(4.88rem, calc(7.71vw + 1.2rem), 11.99rem);
    --space-4xl: clamp(6.1rem, calc(11.77vw + 0.48rem), 16.96rem);
    --text-xs: clamp(1.42rem, calc(-0.29vw + 1.56rem), 1.15rem);
    --text-s: clamp(1.6rem, calc(-0.17vw + 1.68rem), 1.44rem);
    --text-m: clamp(1.8rem, calc(0vw + 1.8rem), 1.8rem);
    --text-l: clamp(2.02rem, calc(0.24vw + 1.91rem), 2.25rem);
    --text-xl: clamp(2.28rem, calc(0.58vw + 2rem), 2.81rem);
    --text-2xl: clamp(2.56rem, calc(1.03vw + 2.07rem), 3.52rem);
    --text-3xl: clamp(2.88rem, calc(1.64vw + 2.1rem), 4.4rem);
    --text-4xl: clamp(3.24rem, calc(2.44vw + 2.08rem), 5.49rem);
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem);
    --radius-m: clamp(1rem, calc(-0.19vw + 1.26rem), 1.2rem);
    --radius-l: clamp(1.6rem, calc(-0.37vw + 2.12rem), 2rem);
    --radius-xl: clamp(2.6rem, calc(-0.56vw + 3.38rem), 3.2rem);
    --radius-full: 999rem;
	--max-width:1170px;
}

button.brlbs-cmpnt-btn.brlbs-cmpnt-font-semibold.brlbs-cmpnt-btn-preferences {
background-color:var(--e-global-color-accent);
color:#000;
font-size:18px;    
}
.elementor-element.e-con-full:not(.full100) {
    max-width:var(--max-width);
	/* margin: 0 auto;*/
}
body header.e-con-boxed >div {
    max-width:var(--max-width) !important;
    width: 100% !important;
   /* 
	padding-left: var(--space-m) !important;
    padding-right: var(--space-m) !important;
*/
}
/*
h2.elementor-heading-title span, h1.elementor-heading-title span, span.accent {
    color: var(--e-global-color-accent) !important;
}
*/
/*
.elementor-element.e-con-boxed {
    max-width: 750px;
    margin: 0 auto;
}
 */
/*news*/
.e-loop-nothing-found-message {
    display: none;
}

/* */
body {
    font-size:20px;
}
html{
	font-size:62.5%;
}
/* umbruch bei Datenschutz*/
.page-datenschutzerklaerung p, page-datenschutzerklaerung a {
    hyphens: auto;
}
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    transition: transform 0.6s ease-in-out; 
    z-index: 9 !important;
}

/*Blog*/
/*
body.single-post p, body.single-post ul li, body.single-post ol li {
    text-align: left !important;
}
*/
/*job blog*/
body hr.wp-block-separator.has-alpha-channel-opacity {
    border-top: solid 1px !important;
    margin: 20px 0;
}

/*blog download*/
a.wp-block-file__button.wp-element-button {
    background-color: var(--e-global-color-accent);
    font-size:18px;
	    border-radius: 5px !important;
}
a.wp-block-file__button.wp-element-button:hover {
    color: var(--e-global-color-accent);
    font-size:18px;
	background-color:#6A7870;
}


.wp-block-file {
    margin-top:30px;
    column-gap: 20px;
    display: flex;
    align-items: center;
    margin-left:56px;
}

.wp-block-file a:first-child {
    font-size: var(--text-l);
    position:relative;
}

.wp-block-file a:first-child:before {
    content: '';
    width: 48px;
    height: 48px;
    background-image: url('/wp-content/uploads/pdf-icon.svg');
    position: absolute;
    left: -54px;
    background-size: contain;
    background-repeat: no-repeat;
    top:-10px;
}
/* */
/*wir suchen dich button animation*/


@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}





/*-----------Header-----------------*/

.header {
  position: fixed;
  background-color: white;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 0.4s ease-in-out;
}

.hide-header {
  transform: translateY(-100%);
}
main#content {
    padding-top: 90px;
}
/*hero*/
.hero {
    min-height: 69vh;
    max-height: 800px;
padding-bottom: 10vh;
}

/*--------------Fonts-------------------*/
.text-weiss {
	color: white;
}
p bold, span bold, a bold{
	font-weight:400;
}
/*----------------Links-------------------*/
.link-weiss a:link,
.link-weiss a:visited {
	color: white;
}
.link-weiss a:hover,
.link-weiss a:focus,
.link-weiss a:active {
	color: white;
}
/*-----------------Tabelle-----------------*/
table {
    font-size: unset !important;
}

table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th,
table tbody tr:hover>td, table tbody tr:hover>th {
	background-color: transparent;
}
table td {
	border: none;
	line-height: 0;
	padding-left: 0px;
	padding-right: 0px;
}
table tr:nth-child(odd) td {
	padding-bottom: 10px;
}
table tr:nth-child(even) td {
	padding-bottom: 20px !important;
}

tbody {
    display: flex;
    flex-direction: column;
}

td:first-child {
    width: 100px;
}
table {
    margin-bottom: 0;
}
/* */
.hero-img img, .img-fw img, .img-fw .elementor-widget-image, .img-fw-img img  {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    object-fit: cover;
    height: 100%;
	min-height:300px !important;
	z-index: 1;
}

main a {
    hyphens: auto !important;
    word-break: break-word;
}
.mc-filter{
filter: invert(24%) sepia(96%) saturate(678%) hue-rotate(123deg) brightness(97%) contrast(101%);
}
/*navigation*/
nav .menu-item a, nav .sub-menu a {
padding-left:0 !important;
padding-right:0px !important;
display: inline-block !important;
}
 /*menu with submenu*/
nav .menu-item-has-children a {
    padding-right: 20px !important;
}
nav .menu-item a:after, nav .sub-menu a:after {
height:1px !important;
width:0px !important;
}
.elementor-item-active:after {
min-width: 100%;
    height: 1px !important;
}
nav .sub-menu a:after {
content:'';
display: block;
    position: absolute;
    transition: .3s;
    transition-timing-function: cubic-bezier(.58,.3,.005,1);
	 background-color: var(--e-global-color-secondary);
	bottom:10px;
}

   
nav .menu-item a:hover::after, nav .sub-menu a:hover::after {
  width:100% !important;
  transform-origin: left;
}


.elementor-nav-menu .sub-arrow {
    right: 0 !important;
    position: absolute !important;
    top: 40% !important;
}
/*sube-menu*/
nav .menu-item-has-children .sub-menu a {
    padding-right: 0px !important;
}

nav .menu-item-has-children .sub-menu li {
    padding-left: 15px !important;
    padding-right:20px;
}
.sub-menu{
margin-left:-20px !important
}

/*custome code*/
/*leistungen katgorien leiste*/
.box1 .img-holder {
    max-height: 180px;
	overflow:hidden;
}
.box1 .img-holder:hover::before {
    background-color: var(--e-global-color-1d2aadd);
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    display:inline-block;
    z-index: 1;
}
.box1 .img-holder svg {
    opacity:0;
}
.box1 .img-holder:hover svg {
    z-index: 1;
    opacity:100;
}

.box1 .img-holder:before, .box1 .img-holder svg{
    transition:all ease 1s;
}
/* 1. Elternelement als Bezugspunkt für absolute Positionierung */
.img-holder {
  position: relative;
}

/* 2. Das Icon-Widget (Elementor setzt schon `position:absolute`) 
      soll die volle Fläche einnehmen */
.img-holder .elementor-widget-icon.elementor-absolute {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 3. Der Link selbst wird zum Flex-Container und füllt den Widget-Bereich */
.img-holder .elementor-widget-icon .elementor-icon {
  display: flex;               /* macht block-level und Flex-Container */
  width: 100%;                 
  height: 100%;
  justify-content: center;     /* zentriert dein SVG horizontal */
  align-items: center;         /* zentriert dein SVG vertikal */
}


a.elementor-icon {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
}
/* */

.filter-accent svg{
/*filter: invert(82%) sepia(12%) saturate(2591%) hue-rotate(71deg) brightness(118%) contrast(96%);*/
	filter: brightness(0) saturate(100%) invert(71%) sepia(91%) saturate(382%) hue-rotate(73deg) brightness(108%) contrast(96%);
}
.mc-icon svg{
/*filter: invert(82%) sepia(12%) saturate(2591%) hue-rotate(71deg) brightness(118%) contrast(96%);*/
	filter: brightness(0) saturate(100%) invert(71%) sepia(91%) saturate(382%) hue-rotate(73deg) brightness(108%) contrast(96%);
}

/* */

/*sitebar*/
.elementor-element.sitebar-info {
    margin-right: -460px !important;
}
.sitebar-info a {
    color: #fff !important;
}
.sitebar-info a, .sitebar-info >div  {
    transition: all ease 0.4s !important;
    right:0;
    
}
.sitebar-info >div:hover {
    right: 326px!important;
    
}
.sitebar-info >div.s:hover, .sitebar-info a.s:hover {
    right: 130px!important;
}
.sitebar-info >div:hover, .sitebar-info a:hover {
    right: 200px!important;
}
.sitebar-info >div.m:hover, .sitebar-info a.m:hover {
    right: 280px!important;
}
.sitebar-info >div.l:hover, .sitebar-info a.l:hover  {
    right: 320px!important;
}
.sitebar-info .elementor-widget-text-editor  {
    color: var(--e-global-color-690b9d9);
}
/* */


/*breadcrubm eigenes icon*/

/* 1) Blendet das eingebaute “»” aus */
.rank-math-breadcrumb .separator {
  visibility: hidden;
  position: relative;
padding-right: 10px;
}

/* 2) Nutzt ein Inline-Icon via pseudo-Element */
.rank-math-breadcrumb .separator::after {
	content: url('/wp-content/uploads/arrow_right.svg');
	display: inline-block;
	width: 0.8em;
    height: 0.8em;
    margin: -0.1em 0.2em 0em;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
visibility: visible;
}



/*fade up animation*/
/* 1. Keyframes nur für Y-Achse */
@keyframes fadeInUp {
  0% {
    transform: translate3d(0, 20px, 0);
  }
  to {
    transform: translateZ(0);
  }
}

/* 2. Grundzustand: schon leicht nach unten verschoben */
.animate_fadeInUp {
  /* Damit sie vor der Aktivierung bereits um 20px nach unten rutschen */
  transform: translate3d(0, 20px, 0);
}

/* 3. Wenn die JS-Logik die aktive Klasse setzt, läuft die Animation */
.animate_fadeInUp.animate__active {
  animation: fadeInUp 0.8s ease-in forwards;
  /* 
    0.8s = Dauer der Animation (kannst du anpassen)
    ease-in = langsamer Start, dann Beschleunigung
    forwards = Element bleibt nach der Animation in Endposition
  */
}
input:not([type="checkbox"]), .wpforms-field-email {
  width: 100% !important;
    min-width: 100%;
}


.wpforms-field {
    min-width: 100% !important;
    width:100%;
}
.wpforms-container .wpforms-field.wpforms-one-half {
    margin-left: 0 !important;
}

/*Barreire freiheit*/

.sticky-buttons-mobile span.elementor-button-text {
    position:absolute;
    left:-9999px;
}
.bg-dark {
    background-color: #000 !important;
}
.invert-text-color p, .invert-text-color span, .invert-text-color .elementor-heading-title, .w-filter p, .w-filter .elementor-heading-title, .invert-color {
    filter: invert(1) !important;
}
main a {
    text-decoration: underline !important;
    color: var(--e-global-color-b5f8cd1);
}

main a.elementor-button,
.hero a {
    text-decoration: none !important;
 color: var(--e-global-color-b5f8cd1);
}

.img-holder .elementor-widget-icon .elementor-icon {
    display: flex;
    width: 100%;
    justify-content: center;
    position: absolute;
    height: 100% !important;
    min-height: 290px;
    top: -32% !important;
}
/* schwarze farbe zu dem hellem grün - normal für Scrrenreader schwarz optisch grün */

span.accent, h1 span {
color:#000; !important;
/*filter: invert(69%) sepia(26%) saturate(799%) hue-rotate(73deg) brightness(99%) contrast(100%) !important;*/
filter: brightness(0) saturate(100%) invert(71%) sepia(91%) saturate(382%) hue-rotate(73deg) brightness(108%) contrast(96%);
}

.wpforms-page-indicator-page-progress {
background-color:var(--e-global-color-text) !important;
}

@media (max-width: 1024px) {
	
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    text-align: center;
    padding-bottom: var(--space-m);
}
}

@media (max-width: 768px) {
body .wp-block-file {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 100%;
    margin-left: 0;
}
}


/*Barreire freiheit*/
/* visuell versteckt, aber für Screenreader lesbar */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

a.wp-block-file__button.wp-element-button {
    color: #000000 !important;
}

footer a:hover span.elementor-icon-list-text, main a:hover {
    color: var(--e-global-color-af70af0) !important;
}