/* 
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);
	--space-5xl: clamp(6.1rem, calc(15.44vw + 1.16rem), 22.78rem);
    --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);*/
	   --text-4xl: clamp(3.24rem, calc(4.01vw + 1.96rem), 7.58rem);
	 --text-5xl: clamp(3.24rem, calc(9.65vw + 0.15rem), 13.67rem);
    --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-2xl: clamp(3.2rem, calc(-2.96vw + 7.35rem), 6.4rem);
    --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);
}

/* Nested Tabs -> Akkordeon bis 1024px */
@media (max-width: 1024px) {
	
	
  /* Titel untereinander statt Reiterleiste */
  .elementor-widget-n-tabs .e-n-tabs-heading {
    display: block;
    gap: 0 !important;
  }
  .elementor-widget-n-tabs .e-n-tab-title {
    display: block;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding: 12px 16px;
    cursor: pointer;
    position: relative;
  }
  /* kleines Plus/Minus rechts */
  .elementor-widget-n-tabs .e-n-tab-title::after {
    content: "+";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
  .elementor-widget-n-tabs .e-n-tab-title.is-active::after {
    content: "–";
  }
/*preise tabs*/	
body button.e-n-tab-title {
    width: 100% !important;
}	
/* */
	
	
  /* Panels standardmäßig zu */
  .elementor-widget-n-tabs .e-n-tabs-content > [role="tabpanel"] {
    display: none !important;
  }
  .elementor-widget-n-tabs .e-n-tabs-content > [role="tabpanel"].is-open {
    display: block !important;
  }
}

 
body {
    font-size:18px;
}
html{
	font-size:62.5%;
}
/* umbruch bei Datenschutz*/
.page-datenschutzerklaerung p, page-datenschutzerklaerung a {
    hyphens: auto;
}
.multiply img {
    mix-blend-mode: multiply;
}


/* Ausgangszustand: transparent */


.elementor-location-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 250ms ease, box-shadow 250ms ease, padding 250ms ease;
}

/* Zustand nach Scroll > 100px */
.elementor-location-header .is-sticky {
  background-color: rgba(255, 255, 255, 1); /* hier deine Wunschfarbe einsetzen */
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.sub-menu {
background: #ffffff !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 100%) !important;
}
.elementor-location-header .is-sticky .sub-menu {
background-color: #ffffff !important;
}

/*mobile menu*/
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {

background: linear-gradient(
  180deg,
   /*rgba(219, 225, 231, .2) 0%,*/
  rgba(255, 255, 255, 1) 10%
) !important;}

nav.elementor-nav-menu--dropdown.elementor-nav-menu__container li a{
 justify-content: center;
}
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    padding-bottom: 10px;
}
/*
.elementor-sticky--active {
    background-color: var(--e-global-color-4956bf0);  
}
*/
/*
.elementor-sticky {
    background-color: var(--e-global-color-4956bf0);
}
*/

/* =========================================
   FIXIERTER ELEMENTOR-HEADER + SLIDE-ANIMATION
   ========================================= */

/*
header.elementor-location-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transform: translateY(0);
  transition: transform 0.45s ease;
  will-change: transform;
}

header.elementor-location-header.header--hidden {
  transform: translateY(-100%);
}

header.elementor-location-header > header {
  position: static !important;
  transform: none !important;
}
*/
/* =========================================
   ABSTAND UNTER DEM HEADER ÜBER CSS-VARIABLE
   ========================================= */
:root {
  --header-h: 0px;
}

main {
  padding-top: var(--header-h);
  transition: padding-top 0.45s ease;
}

/* =========================================
   WORDPRESS ADMINBAR BERÜCKSICHTIGEN
   ========================================= */
body.admin-bar header.elementor-location-header {
  top: 32px !important;
}

@media (max-width: 782px) {
  body.admin-bar header.elementor-location-header {
    top: 46px !important;
  }
}



nav a {
    line-height: 1.2em !important;
}


/*--------------Fonts-------------------*/
.text-weiss {
	color: white;
}

/*----------------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 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;
}
*/


.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;
}

/*sitebar*/
.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: 180px!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);
}
/* */




/*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
  */
}
/*
@media (min-width: 1024px) {
	

	.img-txt-change .elementor-loop-container .e-loop-item:nth-child(odd) .elementor-widget-image{
order:2 !important;
}
}
*/

.glass{
    backdrop-filter: blur(20px);
}