/*!
Theme Name: NOWEDA ETW
Theme URI: https://www.noweda-apothekenberatung.de
Author: NOWEDA ApothekenBeratung GmbH
Author URI: https://www.noweda-apothekenberatung.de
Description: NOWEDA Design- und Entwicklungstheme for Wordpress
Version: 1.0.0
License: Not for redistribution
Text Domain: NOWEDA-ETW


*,
*::before,
*::after {
    box-sizing: content-box;
}
*/

/*
-----------------------------
Hausschrift: Lexend Deca
----------------------------- 
*/

/* Lexend Deca Light */
@font-face {
	font-display: swap;
	font-family: 'Lexend Deca';
	font-style: normal;
	font-weight: 200;
	src: url('assets/fonts/lexend-deca-v21-latin-200.woff2') format('woff2'),
		 url('assets/fonts/lexend-deca-v21-latin-200.ttf') format('truetype');
  }

  /* Lexend Deca Medium */
  @font-face {
	  font-display: swap;
	  font-family: 'Lexend Deca';
	  font-style: normal;
	  font-weight: 300;
	  src: url('assets/fonts/lexend-deca-v21-latin-300.woff2') format('woff2'),
		   url('assets/fonts/lexend-deca-v21-latin-300.ttf') format('truetype');
	}

  /* Lexend Deca Normal */
  @font-face {
	font-display: swap;
	font-family: 'Lexend Deca';
	font-style: normal;
	font-weight: 500;
	src: url('assets/fonts/lexend-deca-v21-latin-500.woff2') format('woff2'),
		 url('assets/fonts/lexend-deca-v21-latin-500.ttf') format('truetype');
  }
  
  /* Lexend Deca Bold */
  @font-face {
	  font-display: swap;
	  font-family: 'Lexend Deca';
	  font-style: normal;
	  font-weight: 700;
	  src: url('assets/fonts/lexend-deca-v21-latin-700.woff2') format('woff2'),
		   url('assets/fonts/lexend-deca-v21-latin-700.ttf') format('truetype');
	}
  
  /* Lexend Deca ExtraBold */
  @font-face {
	  font-display: swap;
	  font-family: 'Lexend Deca';
	  font-style: normal;
	  font-weight: 800;
	  src: url('assets/fonts/lexend-deca-v21-latin-800.woff2') format('woff2'),
		   url('assets/fonts/lexend-deca-v21-latin-800.ttf') format('truetype');
	}


/*
-----------------------------
Basislayout
----------------------------- 
*/

html {
    font-size: var(--html-1rem);
}

body {
    font-family: Lexend Deca, sans-serif;
    font-weight: 300;
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    color: var(--text-color);
	background-color: #ffffff;
}

b, strong { 
	font-weight: 500; 
}

h1, h2, h3, h4 { font-family: Lexend Deca, sans-serif; }

h1 {
    font-size: var(--h1-font-size);
    line-height:var(--h1-line-height);
    font-weight: 800; margin-top: 0;
    color: var(--h1-font-color);
    margin-bottom:2.4rem;
}
	
h2 {
    font-size: var(--h2-font-size);
    line-height:var(--h2-line-height);
    font-weight: 800; margin-top: 0;
    color: var(--h2-font-color);
}

h3 {
    font-size: var(--h3-font-size);
    line-height:var(--h3-line-height);
    font-weight: 700;
    color: var(--h3-font-color);
    margin-top:2.8rem;
}

h4 {
    font-size: var(--h4-font-size);
    line-height:var(--h4-line-height);
    font-weight: 700; margin: 0 0 1rem 0;
    color: var(--h4-font-color);
}

article { overflow: hidden; }

.head {
	font-family: Lexend Deca, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 .7rem 0;
}

.logo { margin-right:1.8rem; transform:translateY( var(--logo-vertical-correction) ); }
.logo img { width: var(--logo-width); height: auto; display: block;}

.notop { margin-top:-6rem; }
.nobot { margin-bottom:0px; }


.navigation {
	position: relative;
	width: 100%;
	display: flex;
	gap:2rem;
	margin-left:1rem;
}

nav.main-navigation > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height:44px;  }
nav.main-navigation > ul > li {  margin-right: 1.4rem; padding-top: var(--nav-vertical-correction); }
nav.main-navigation > ul > li:last-child {  margin-right: 0; }
nav.main-navigation > ul > li a { color: var(--text-color); text-decoration: none; display: inline-block; }
nav.main-navigation > ul > li a:hover { text-decoration: none; color: var(--color-3); }
nav.main-navigation > ul > li a.is-active{ font-weight:600; }


.footer-navigation .menu {
    list-style: none;
    margin: 0;
    padding: 0;
	height:44px;
}

footer a, footer a:link, footer a:visited, footer a:active { 
	color: var(--color-1);
	text-decoration: underline;
	text-underline-offset: .15rem; 
	text-decoration-thickness: 1px; 
}
footer a:hover { 
	color: var(--color-1-70p);
}



/*
-----------------------------
Herotext
----------------------------- 
*/

#herotext-stage {
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center; 
  text-align:center;
  gap:.6em;
  padding:8vh 6vw;
  background: linear-gradient(162deg,rgba(255, 255, 255, 1) 5%, rgba(227, 227, 227, 1) 53%);
}

.herotext-line {
  font-size:clamp(1.6rem,5.2vw,64px);
  line-height:1.16;
  font-weight:700;
  color:#111;
  white-space:normal;
}

.herotext-line + .herotext-line { color:var(--color-3) }

.herotext-word {
  display:inline-block;
  margin-right:0.25em;
  opacity:0;
  transform:translateY(.6em);
  transition:opacity .25s ease, transform .25s ease;
}

.herotext-word.show {
  opacity:1;
   transform:translateY(0);
}

.herotext-line .herotext-word:last-child {
  margin-right:0;
}

#herotext-2 { margin-top:3rem; }

@media screen and (max-width: 768px) {
	#herotext-stage { min-height:100vh; padding:2rem; }
  .herotext-line { font-size:3.2rem; line-height:1.16; }
}




  .contentblock.color3 p, .contactbox p { color: #ffffff; }
  .contentblock.color3 h2 { color: #ffffff; }
  .contactbox h2 { color: #ffffff; margin-bottom:1.5rem; }
  .contentblock.color3 h3, .contactbox h3, .contactbox h4 { color: color-mix(in srgb, var(--color-1) 40%, white 60%); }

	.smallgap {
		margin-bottom:-1.8rem;
	}
  .pl-container {
  position: relative;
  height: 500px; /* Beispielhöhe */
  overflow: hidden;
}

.pl-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  transition: transform 0.1s;
}

	

  :root {
    --gallery-gap: 1rem;
  }

.wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gallery-gap);
}

.wp-block-gallery > .wp-block-image {
  margin: 0;
  flex: 0 0 calc((100% - 2 * var(--gallery-gap)) / 3) !important;
}

@media (max-width: 1024px) {
  .wp-block-gallery > .wp-block-image {
     flex: 0 0 calc((100% - 1 * var(--gallery-gap)) / 2) !important;
  }
}

/*
@media (max-width: 600px) {
  .wp-block-gallery > .wp-block-image {
    flex-basis: 100%  !important;
  }
}
*/

.wp-block-gallery.is-layout-flex img {
  display: block;
  width: 100%;
  height: auto;
}

.wp-block-gallery.is-cropped img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contentblock .wp-block-columns.galery {
  gap: var(--gallery-gap) !important;
}

.wp-block-columns.galery > .wp-block-column {
  margin: 0;
  /* flex: 0 0 calc((100% - 2 * var(--gallery-gap)) / 4) !important; */
}

@media (max-width: 1024px) {
  .wp-block-columns.galery > .wp-block-column {
     flex: 0 0 calc((100% - 1 * var(--gallery-gap)) / 3) !important;
  }
}





.wp-block-gallery .wp-block-image {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius:var(--border-radius);
}

.wp-block-gallery .wp-block-image figcaption {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0,0,0,0.6) !important;
  background-image: none !important;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none !important;
  z-index: 1;
}

.wp-block-gallery .wp-block-image.titlebox figcaption {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(0,0,0,0.0) !important;
  background-image: none !important;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none !important;
  z-index: 1;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before { 
  content: none !important;
  background: none !important;
  pointer-events: none !important;
  z-index: 0;
}

.wp-block-gallery .wp-block-image figcaption::before,
.wp-block-gallery .wp-block-image figcaption::after {
  content: none !important;
  background: none !important;
  pointer-events: none !important;
  z-index: 0;
}

.wp-block-gallery .wp-block-image:hover figcaption,
.wp-block-gallery .wp-block-image:focus-within figcaption {
  opacity: 1;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  color: #fff;
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 700;
}

.wp-block-gallery.has-nested-images figure.wp-block-image.titlebox figcaption {
  color: var(--color-3);
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 700;
  text-shadow: none;
}

wp-element-caption::before,
wp-element-caption::after {
  content: none !important;
  background: none !important;
  pointer-events: none !important;
}

wp-element-caption:hover,
wp-element-caption:focus-within {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { font-size: 1.4rem; line-height: 1.2; }
.wp-block-gallery.has-nested-images figure.wp-block-image.titlebox figcaption { font-size: 1.4rem; line-height: 1.2; }
}


.infobox {
  background-color: #ffffff; padding: 1.4rem 2rem; border-radius:var(--border-radius);
 }


/*
-----------------------------
Apobox
----------------------------- 
*/

.apobox { display:flex; align-items:flex-start; gap:1.6rem; background:#fafafa; border:1px solid #fff; border-radius:.8rem; padding:1.8rem; margin-bottom:1.6rem; }
.apobox-icon { display: flex; justify-content: center; align-items: center; flex:0 0 auto; width:68px; height:68px; border-radius:50%; background:var(--color-3); }
.apobox-icon img { filter:brightness(0) invert(1); max-width:65%; max-height:65%; }
.apobox-body { min-width:0; max-width: 88%; }

.apobox h2, .apobox h3 { margin-top: .5rem; }


@media (max-width: 768px) {
  .apobox { flex-direction: column; justify-content: center; }
  .apobox-body { max-width: 100%; }
}




.contentblock .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
}

.wp-block-columns.smallgap { 
	gap: 1rem; }

.wp-block-columns.small_margin { 
	margin-bottom:0; }

.flexcol10 { flex: 1 1 10% !important; }
.flexcol15 { flex: 1 1 15% !important; }
.flexcol20 { flex: 1 1 20% !important; }
.flexcol25 { flex: 1 1 25% !important; }
.flexcol30 { flex: 1 1 30% !important; }
.flexcol35 { flex: 1 1 35% !important; }
.flexcol40 { flex: 1 1 40% !important; }
.flexcol45 { flex: 1 1 45% !important; }
.flexcol50 { flex: 1 1 50% !important; }
.flexcol55 { flex: 1 1 55% !important; }
.flexcol60 { flex: 1 1 60% !important; }
.flexcol65 { flex: 1 1 65% !important; }
.flexcol70 { flex: 1 1 70% !important; }
.flexcol75 { flex: 1 1 75% !important; }
.flexcol80 { flex: 1 1 80% !important; }
.flexcol85 { flex: 1 1 85% !important; }
.flexcol90 { flex: 1 1 90% !important; }

.wp-block-column {
	margin-bottom: 3rem;
}

div#breadcrumbs {
	font-size: .8rem;
	margin: 3rem 0 3rem 0;
}

div#breadcrumbs > span > span > a:link, div#breadcrumbs > span > span > a:visited {
	color: #202020;
	text-decoration: none;
}

.wp-block-media-text>.wp-block-media-text__content {
	padding: 0 1.4rem 0 1.8rem !important;
}

.bcseperator {
	font-size: .65rem;
	margin-left: .2rem;
	margin-right: -.3rem;
}

figure.wp-block-video > video {
	border-radius: 1.2rem;
}

.wp-block-video > div#image-overlay > img {
	-webkit-filter: brightness(1.1);
	filter: brightness(1.1);
}

video.video {
	max-width: inherit;
	border-radius: 1.2rem;
}

ul.wp-block-list {
	list-style: none;
	margin-top:1.2rem;
}

ul.dah-pack-list {
	list-style-position: outside;
	padding-inline-start: 1.3rem;
}

ul.wp-block-list > li, 
ul.wp-block-list > li.link {
	margin-top:.2rem;
}

ul.wp-block-list.doubleline > li, 
ul.wp-block-list.doubleline > li.link {
	margin-top:.5rem;
}

ul.wp-block-list > li::before { 
	background-image: url('assets/images/check.svg');
	background-size: 1.2rem 1.2rem;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block;
	position:relative;
	width: 1.2rem; 
	height: 1.2rem;
	margin-right:.8rem;
	top:.2rem;
	margin-left:-2rem;
	content:"";
}

ul.wp-block-list > li.link::before { 
	background-image: url('assets/images/pfeil.svg');
	background-size: 1.2rem 1.2rem;
	background-repeat: no-repeat;
	background-position: center;
	width: 1.2rem; 
	height: 1.2rem;
	margin-right:.8rem;
	top:.2rem;
	margin-left:-2rem;
	content:"";
}


.related {
	display: flex;
	position: relative;
	width: 90%;
	height: auto;
	aspect-ratio: auto 4/3;
	text-align: center;
}
.related img {
	position: absolute; bottom: 0;
	max-height:100%;
	width: auto;
}

.related.box {
	border-radius: 1.2rem;
	background-color: #f3f9fa;
}
.related.box img {
	padding: 3rem 2rem 2rem 2rem;
	max-height:100%;
	width: auto;
}

.related img:hover {
	transform: scale(1.05);
	transition: all 0.4s;
}


.wp-block-post-featured-image {
	width: calc(100% + 8rem);
	height: auto;
	border-radius: 1.2rem;
	left:-4rem;
}



.blowup {
	position: relative;
	width: calc(100% + 8rem) !important;
	height: auto !important;
	left:-4rem !important;
}



@media only screen and (min-width: 1200px) {      
	.blowup-on-big-screen {
		position: relative;
		width: calc(100% + 8rem) !important;
		height: auto !important;
		left:-4rem !important;
	}
}

figure.compose.picture1 img { width:88%; } 
figure.compose.picture2 img { width:72%; } 
figure.compose.picture1 { z-index:20; }
figure.compose.picture2 { margin-top:-30%; z-index:10; }

.t10 { margin-top:-10% !important; }
.t15 { margin-top:-15% !important; }
.t20 { margin-top:-20% !important; }
.t25 { margin-top:-25% !important; }
.t30 { margin-top:-30% !important; }
.t35 { margin-top:-35% !important; }
.t40 { margin-top:-40% !important; }
.t45 { margin-top:-45% !important; }
.t50 { margin-top:-50% !important; }
.t55 { margin-top:-55% !important; }
.t60 { margin-top:-60% !important; }
.t65 { margin-top:-65% !important; }
.t70 { margin-top:-70% !important; }

figure.compose.left { text-align: left; } 
figure.compose.right { text-align: right; }

.w70 > img { width:70% !important; } 
.w65 > img { width:65% !important; } 
.w60 > img { width:60% !important; } 
.w55 > img { width:55% !important; } 
.w50 > img { width:50% !important; } 
.w45 > img { width:45% !important; } 
.w40 > img { width:40% !important; } 
.w35 > img { width:35% !important; } 
.w25 > img { width:25% !important; } 

.pl { padding-left:10%; }

.neu { 
	position:absolute; 
	bottom:-.4rem; 
	right:-1rem;
	text-align:right;
	height: auto;
	z-index:500;
}

img.neu { 
	width: 5rem;
}


/*
-----------------------------
Links
----------------------------- 
*/

a, a:link, a:visited, a:active { 
	color: var(--color-3); 
	text-decoration: underline;
	text-underline-offset: .15rem; 
	text-decoration-thickness: 1px; 
}
a:hover { 
	color: var(--color-1); 
}

/*
-----------------------------
Schaltflächen
----------------------------- 
*/

button, a.cta, .wp-block-button > a { 
	all: unset;
	display: inline-block;
	font-size: .9rem;
	font-weight: 500;
	padding: .8em 1.8rem .7rem 1.8rem;
	white-space: nowrap;
	text-decoration: none;
	background-color: var(--color-3);
  border: 1px solid var(--color-3);
	color: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  margin-right: .5rem;
}

button.secondary, a.cta.secondary, .wp-block-button.secondary > a { 
	padding: .8em 1.8rem .7rem 1.8rem;
	background-color: #ffffff;
	color: var(--color-3);
  border: 1px solid var(--color-3);
}

.btn-shape-square button,
.btn-shape-square a.cta,
.btn-shape-square .wp-block-button > a { border-radius: 0 !important; }

.btn-shape-rounded button,
.btn-shape-rounded a.cta,
.btn-shape-rounded .wp-block-button > a { border-radius: .5rem !important; }

.btn-shape-pill button,
.btn-shape-pill a.cta,
.btn-shape-pill .wp-block-button > a { border-radius: 9999px !important; }

.sub-nav .cta.small { 
	font-size: .8rem;
	font-weight: 500;
	padding: .65em 1.6rem .45rem 1.6rem;
	background-color: var(--color-3);
	color: #ffffff;
}


button.light, .wp-block-button.light > a { 
	background-color: #e8edf7;
	color: var(--color-3);
}

.sub-nav .cta { 
	margin-left:1.4rem;
}

.wp-block-button > a { 
	margin-top: .75rem;
}

button:hover, .sub-nav .cta:hover, .wp-block-button > a:hover, a.cta:hover { 
	cursor: pointer;
	-webkit-filter: brightness(1.1);
	filter: brightness(1.1);
	transform: scale(1.025);
	transition: all 0.2s;
}

button.light:hover, .wp-block-button.light > a:hover { 
	color: var(--color-3);
	-webkit-filter: brightness(.9);
	filter: brightness(.9);
}

.wp-block-buttons .wp-block-button__link {
    width:auto !important;
}


#scrollToTopBtn {
  position: fixed;
  display: flex;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  padding-top:10px;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: rgba(64, 64, 64, 0.6);
  color:#ffffff;
  border: none;
  border-radius: 50%;
  font-size: 1.6rem;
  cursor: pointer;
  display: none;
  z-index: 1000;
  transition: opacity 0.3s ease-in-out;
}

#scrollToTopBtn:hover {
  background-color: rgba(64, 64, 64, 0.8)
}





a.download:link, a.download:visited, a.download:active { 
	color: var(--text-color); 
	text-decoration: none;
	text-underline-offset: .15rem; 
	text-decoration-thickness: 1px;
  font-size: 1rem; 
	font-weight: 300;
	display: inline-block;
	margin-bottom: 0.15rem;
  margin-left:1.4rem;
}
a.download:hover { 
  text-decoration: underline;
	color: var(--color-3); 
}

a.download::before { 
	background-image: url('assets/images/download.svg');
    background-size: 1.1rem 1.1rem;
	background-repeat: no-repeat;
	background-position: center;
    display: inline-block;
	position:relative;
    width: 1.1rem; 
    height: 1.1rem;
	margin-right:.3rem;
	top:.15rem;
	margin-left:-1.4rem;
    content:"";
}



/*
-----------------------------
Formulare
----------------------------- 
*/

form > h3 {
    margin-top: 2em;
}

form > div.subline {
    margin-top: -1em;
    margin-bottom: 1.4em;
}

.error-message-global {
	width:auto;
    color: rgb(235, 52, 52);
    margin: 1em 0;
    display: none;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}
.error-message-global.shake { 
	animation: shake 0.3s ease; }

.form-group { 
	position: relative; 
	margin-bottom: 1.5em; 
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="search"],
input[type="number"],
select {
    width: 100%;
    padding: 1.2em 0.5em 0.5em 0.5em;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: white;
}

input.w400 { max-width:400px; }

input[type="date"] { max-width:120px; font-size: .9rem; }
input[type="search"] { max-width:180px; font-size: .9rem; }
input[type="number"] { max-width:60px; font-size: .9rem; }

form.filters > label { font-size: .9rem; }

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M0 0l5 6 5-6z' fill='%23666'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: 0.65em auto;
    padding-right: 2em;
}

input:focus,
select:focus {
    outline: none;
    border-color: #666;
}

.form-group label {
    position: absolute;
    top: 0.85em;
    left: 0.5em;
    pointer-events: none;
    transition: all 0.2s ease;
    background: white;
    padding: 0 0.25em;
    color: #666;
}


input:focus + label,
input:not(:placeholder-shown) + label,
select:focus + label,
select:valid + label {
    top: -0.5em;
    left: 0.4em;
    font-size: 0.8em;
    color: #333;
}

.form-group select:not(.has-value):not(:focus) + label {
  top: 50%;
  transform: translateY(-50%);
  left: 0.75rem;
  font-size: 1em !important;
  color: #666 !important;
}

.form-group select.has-value + label,
.form-group select:focus + label {
  top: -0.5em;
  left: 0.4em;
  font-size: 0.8em;
  color: #333;
}

.form-row {
    display: flex;
    gap: 1em;
}

.plz-group { flex: 0 0 calc((100% - 1em) * 0.3); }
.ort-group { flex: 0 0 calc((100% - 1em) * 0.7); }

.error-input { border: 2px solid red !important; }

.field-error {
    font-size: 0.9em;
    margin-top: 0.25em;
    display: block;
}

.warning-icon {
	height:0.8em;
    display: inline-block;
    color: #f0ad4e;
    margin-right: 0.35em;
	margin-top:-0.2em;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 1.5em;
	font-size:1.1rem;
}
    
.checkbox-group input[type="checkbox"] {
    margin-right: 0.5em;
    transform: scale(1.2);
}

input[type="checkbox"] {
	all: unset;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-left: 0.2rem;
	vertical-align: middle;
	cursor: pointer;
	box-sizing: border-box;
	border: 1px solid #ccc;
    border-radius: 4px;
	background-color: white;
	position: relative;
	transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  
  input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0.35em;
	width: 0.25em;
	height: 0.5em;
	border: solid white;
	border-width: 0 0.2em 0.2em 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.2s ease;
  }
  
  input[type="checkbox"]:checked {
	background-color: #a3d6de;
	border-color: #a3d6de;
  }
  
  input[type="checkbox"]:checked::after { opacity: 1; }
  input[type="checkbox"]:hover { border-color: #333; }
  input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 2px #333; }
  
  input[type="checkbox"]:disabled {
	background-color: #eee;
	border-color: #ccc;
	cursor: not-allowed;
  }
  
  input[type="checkbox"]:disabled::after { border-color: #ccc; }



/*
-----------------------------
Bestellliste
----------------------------- 
*/  

table { border-collapse:collapse; width:100%; }
th,td { border:1px solid #ddd; padding:.5rem; text-align:left; font-size: .9rem; }
th { background:#f8f8f8; }
.filters {d isplay:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0; }
input[type=date],input[type=search],input[type=number] { padding:.4rem; }
.actions { margin:1rem 0 display:flex; gap:1rem; }
.pagination { display:flex; gap:.25rem; align-items:center; margin:1rem 0; }
.pagination a,.pagination span { padding:.3rem .5rem; border:1px solid #ddd; border-radius:4px; text-decoration:none; }
.pagination .current{ background:#eee; font-weight:600; }
th a { display:block; text-decoration:none; color:inherit; }
th a .arrow { opacity:.5; margin-left:.25rem;}


/*
-----------------------------
Slider
----------------------------- 
*/


.slide.is-active { position: relative; opacity: 1; z-index: 1; }
.slide img { display: block; max-width: 100%; height: auto; border-radius:var(--border-radius); }

.dots {
  display: flex; gap: .2rem; justify-content: center; align-items: center;
  padding: 1.2rem 0;
}

.dot:focus-visible { outline: 2px solid #333; outline-offset: 2px; }

#slider .dot {
  width: 10px;  
  height: 10px; 
  border-radius: 50%;
  border: none;
  background-color: #ccc;
  margin: 0 4px;
  padding: 0; 
  cursor: pointer;
  display: inline-block;
}

#slider .dot.is-active {
  background-color: #333;
}


#slider {
  position: relative;
  overflow: hidden; 
}

#slider .slides-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 0.5s ease;
}

#slider .slide {
  flex: 0 0 100%;
  width: 100%;
}


/*
-----------------------------
Mobile Navigation
----------------------------- 
*/

.mobilemenu-icon {
	position: relative;
	cursor: pointer;
	width: 32px;
	height: 26px;
	margin-top:4px;
	z-index: 2002;
	margin: auto 2rem auto auto;
}

.mobilemenu-icon div {
	width: 100%;
	height: 2px;
	background-color: var(--color-3);
	position: absolute;
	transition: all 0.3s ease;
}

.mobilemenu-icon div:nth-child(1) { top: 0; }
.mobilemenu-icon div:nth-child(2) { top: 8px; }
.mobilemenu-icon div:nth-child(3) { top: 16px; }
.mobilemenu-icon.open div:nth-child(1) {
	transform: rotate(45deg);
	top: 8px; }
.mobilemenu-icon.open div:nth-child(2) { opacity: 0; }
.mobilemenu-icon.open div:nth-child(3) {
	transform: rotate(-45deg);
	top: 8px; }

.mobilemenu {
	position: fixed;
	display: flex;
	justify-content: left;
	align-items: start;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100%;
	background-color: var(--color-2);
	transition: right 0.5s ease;
	z-index: 2000;
}
.mobilemenu_inner {
	padding: 2.6rem 2.6rem 2.6rem 2.6rem;
}
.mobilemenu.show {
	right: 0;
}

ul.mobilenav { 
        list-style: none; 
        margin: 0;
        padding: 0;
		font-size:1.6rem;
		color:#ffffff;
}

ul.mobilenav a, ul.mobilenav a:link, ul.mobilenav a:visited, ul.mobilenav a:active { color:#ffffff; text-decoration:none; }
ul.mobilenav a:hover { color: var(--color-3); }




.mmlogo {
	width:220px;
	margin-bottom:40px;
}

.mobilemenu ul.menu, .mobilemenu_subnav .mobilemenu ul.menu {
	display: block;
	list-style: none;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 0;
}

.mobilemenu_subnav .menu-subnavigation-container {
	padding: 1rem 0 2rem 0;
}

.mobilemenu_subnav {
	margin-top:5rem;
}

.mobilemenu ul.menu > li {
	font-size: 1.5rem;
	line-height: 1.7rem;
	margin-top: .8rem;
	margin-bottom: .8rem;
}

.mobilemenu_subnav > .menu-subnavigation-container > ul.menu > li {
	font-size: 1.1rem;
	line-height: 1.2rem;
	margin-top: .6rem;
	margin-bottom: .6rem;
}

.mobilemenu ul.menu > li > a, 
.mobilemenu ul.menu > a:link {
	color:#202020;
	text-decoration: none;
}

.mobilemenu_subnav > .menu-subnavigation-container > ul.menu > li > a, 
.mobilemenu_subnav > .menu-subnavigation-container > ul.menu > li > a:link {
	color: #004f9f;
	text-decoration: none;
}

.mobilemenu_subnav > .menu-subnavigation-container a.cta, 
.mobilemenu_subnav > .menu-subnavigation-container a:link.cta {
	color:#ffffff;
}








header.header { 
        height:12rem;
        display: flex;
        justify-content: center; 
        align-items: flex-end;
        margin:0;
        transition: height 0.3s ease;
        background-color: #ffffff;
        padding-bottom:1.6rem;
        box-sizing: border-box;
    }

    header.header.sticky {
        height: var(--sticky-header-height);
        z-index: 1000;
    }

    header.header.sticky.glass {
        background: rgba(255,255,255,0.85);
        backdrop-filter: saturate(180%) blur(8px);
        -webkit-backdrop-filter: saturate(180%) blur(8px);
        border-bottom:1px solid #e5e7eb;
    }

    header .head {
        font-weight: 700;
        color: var(--color-2);
        font-size: 1rem;
    }

    footer .head, footer h4 {
        font-weight: 700;
        color: var(--color-2);
        font-size: 1rem;
    }

    .product-card-table span.tipp {
        display: inline-block;
        width: auto;
        text-align: center;
        font-size: 1.125rem;
        font-weight: 400;
        background-color: var(--color-2);
        color: #ffffff;
        border-radius: 0.25rem;
        padding: 0.15rem 0.8rem;
        margin-left: 0.8rem;
    }

      @media (max-width: 768px) {
        .product-card-table span.tipp {
            padding: 0.10rem 0.25rem 0.05rem 0.25rem;
            font-size: 0.8rem;
            margin-left: 0.4rem;
            margin-top:-2px;
        }
    }

    body { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0; }
    
    .content_inner { 
        margin:0 var(--offset) 0 var(--offset); 
    }

    .rounded, figure.rounded img, .wp-block-image img, .product-card { border-radius: var( --border-radius); }

    div.headerbox-container {
        position:absolute;
        z-index: 200;
        transform: translateY(-120%);
    }

    .double-offset { padding-right:4rem; padding-left:4rem; }
    .triple-offset { padding-right:8rem; padding-left:8rem; }
    .fit-to-border { padding:0 !important; margin:0 !important; }
     @media only screen and (max-width: 768px) {  
      .fit-to-border-on-mobile { padding:0 !important; margin:0 !important; }       
    }

.blurout {
  transition: filter 0.2s ease-out;
  will-change: filter;
}

    footer { font-size:1rem; flex-wrap: wrap; padding-top: 3rem; padding-bottom:6rem; gap:2rem; width:100%; }
    footer > div { flex: 0 0 20%; min-width: 180px; }
    footer > div.fill-col { flex: 1 1 auto; min-width: 0; text-align: right; }

    ul.footernav { 
        list-style: none; 
        margin: 0;
        padding: 0;
     }

    @media (max-width: 768px) {
        footer > div { width: 100%; min-width: auto; }
        footer > div.fill-col { text-align: left; }
    }
    

div.headerbox {
        background-color: var(--color-box);
        border-radius: var(--border-radius);
        padding: 1rem 2rem;
        max-width:660px;
    }

    div.contactbox {
        background-color:  var(--color-box);
        border-radius: var(--border-radius);
        padding: 1.6rem 2rem 2rem 2rem;
        z-index: 200;
        margin-top:-14rem;
    }

    div.contactbox.mobile {
        background-color: var(--color2);
        border-radius: 0;
        padding: 1.6rem 2rem 2rem 2rem;
        margin:0;
    }


    div.headerbox h1  { color:#ffffff; text-transform: uppercase; margin-bottom:0.4rem; }


    .contentblock-full {
        position: relative;
        left: 50%;
        width: 100vw;
        margin-left: -50vw; 
        padding: 0 calc(((100vw - <?php echo esc_attr( get_theme_mod( 'netw_layout_content_width', 0 ) ); ?>px) / 2) + <?php echo esc_html( get_theme_mod( 'netw_layout_offset', 0 ) ); ?>rem) 0 calc(((100vw - <?php echo esc_attr( get_theme_mod( 'netw_layout_content_width', 0 ) ); ?>px) / 2) + <?php echo esc_html( get_theme_mod( 'netw_layout_offset', 0 ) ); ?>rem);    
        border-radius: 0rem;
    }

    .contentblock.color1, .contentblock-full.color1 { background-color: var(--color-bg); }
    .contentblock.color2, .contentblock-full.color2 { background-color: #ededee; }
    .contentblock.color3, .contentblock-full.color3 { background-color: var(--color-2); }
    .contentblock.color4, .contentblock-full.color4 { background-color: color-mix(in srgb, var(--color-1) 17%, white 83%); }
    .contentblock.offset, .contentblock-full.offset { position: relative; height:300px; margin-top:-200px; z-index: 1; max-width: 100%; }

    .contentblock.mood1 { 
        background-image: url(https://beta2.offizin-pay.de/wp-content/uploads/noweda-19_mod.webp); 
        background-size: cover; 
        background-position: center center; 
        background-repeat: no-repeat; 
        color: #ffffff; 
    }

    .contentblock.mood1 background-image { 
        -webkit-filter: blur(2px);
        filter: blur(4px);
    }



/*
-----------------------------
Responsives Design 
----------------------------- 
*/

@media only screen and (max-width: 1200px) { 
	html { font-size: 15px; }
	.not-on-midsizes { display:none !important; }
}

@media only screen and (max-width: 1100px) { 
	.sub-nav .cta { display: none; }
}

@media only screen and (max-width: 768px) {         
	.nom, .not-on-mobile { display:none !important; } 
	h1 { font-size: 2.2rem; line-height:2.2rem; }
	h2 { font-size: 1.8rem; line-height:1.8rem; }
	.blowup-on-mobile { 
		position: relative;
		width: calc(100% + 4rem) !important;
		height: auto !important;
		left:-2rem !important;
		border-radius: 0px !important;
	}
	.blowup-on-mobile > img, .blowup-on-mobile > div {
		border-radius: 0px !important;
	}
	.product-card { 
		position: relative;
		width: calc(100% + 2rem) !important;
		height: auto !important;
		left:-1rem !important;
		}
	
	.notop-on-mobile { margin-top: -2rem !important; }
	.notop-on-mobile3 { margin-top: -3rem !important; }
	.no-border-radius, .no-border-radius > img, .no-border-radius > div { border-radius: 0px !important; }

	div#vk-kalkulator {
		position: relative;
		width: calc(100%) !important;
		height: auto !important;
		border-radius: 0px !important;
		left:-2rem !important;
	}

}



@media only screen and (min-width: 769px) {         
	.only-on-mobile, .on-mobile { display:none !important; } 
}

@media (max-width: 980px) {
  .wp-block-columns {
    margin: 0 auto;
  }

  .wp-block-column {
    flex: 0 0 auto; 
    box-sizing: border-box;
    margin-bottom: 1.5rem;
  }

  .wp-block-columns.alignwide,
  .wp-block-columns.alignfull {
    margin-left: 0;
    margin-right: 0;
    gap: 0;
  }
  .wp-block-gallery.payment-icons { 
	gap:20px;
	max-width:100%;
 	}
	.wp-block-gallery.payment-icons {
	flex-grow: 1;
	flex-shrink: 1;
	width: auto;
	}
}

@media only screen and (max-width: 768px) {
  .nom, .not-on-mobile { display:none !important; } 
  main, header, footer { max-width: 100%; }
  footer { padding:2rem !important; }
  .contentblock, .contentblock.double-offset { padding: 0 2rem; margin-top: 0;}
  .mobile-offset { padding: 0 2rem; }
  .wp-block-columns { padding: 0; }
  div.featured_image { border-radius: 0; }
  .navigation .not-on-mobile { display: none; }
  .navigation .on-mobile { display: block; } 
  header, footer { padding:0 0 0 1rem; }
  header.header { height: 90px; transition: top 0.3s ease-in-out; }
  header.header.sticky { height: 90px; transition: top 0.3s ease-in-out; }
  .logo { margin-right:0; margin-left: 0rem; }
  .logo img { max-height: 40px !important; display: block; }
  div.headerbox-container { transform: translateY(-100%); }
  div.contactbox { border-radius: 0; padding: 1.6rem 2rem 2rem 2rem; z-index: 200; margin-top:-100%; height: auto; }
  .smallgap { margin-bottom:0rem; }
  html { font-size: 14px; }
  h1 { font-size: 2.6rem; line-height: 1.2; }
}

/*
-----------------------------
Header Share Icons
----------------------------- 
*/

.header-actions { display:flex; align-items:center; gap:1rem; }
.header-share { list-style:none; margin:0; padding:0; display:flex; gap:.6rem; }
img.share-icon { width: 24px; height: 24px; margin: auto auto auto auto; cursor: pointer; }
img.share-icon:hover { cursor: pointer; transform: scale(1.2); transition: all 0.2s; }


/*
-----------------------------
Akkordeon
----------------------------- 
*/

.accordion { border-top: 1px solid #d0d7de; }
.accordion-item { border-bottom: 1px solid #d0d7de; }
.accordion-item h3 { margin: 0; }

.accordion-item button {
  all: unset; display: block; width: 100%; cursor: pointer;
  padding: 1rem; font-weight: 700; font-size: 1.1rem;
  color: #6b7280; transition: color .25s ease;
}
.accordion-item button:hover { color: #000; }
.accordion-item.open > h3 > button { color: #000; }
.accordion-item button:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

.accordion-item .content {
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(0.4, 0, 0.2, 1), padding .5s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 1rem; color: #1f2937; max-width: 920px;
}
.accordion-item .content > p { margin: 0 0 1rem; }

.accordion-item.open .content { max-height: 700px; padding: 0 1rem 1rem; }

:target { scroll-margin-top: var(--header-height); }

@media (prefers-reduced-motion: reduce) {
  .accordion-item .content { transition: none; }
}


:root { --header-height: 80px; }

.accordion { border-top: 1px solid #d0d7de; }
.accordion-item { border-bottom: 1px solid #d0d7de; scroll-margin-top: var(--header-height); padding-top: 1rem; }
.accordion-item > h3 { margin: .8 rem 0 .8rem 0; }

.accordion-item button {
  all: unset; display: block; width: 100%; cursor: pointer;
  padding: 1rem; font-weight: 700; font-size: 1.6rem;
  color: #9fa2a9; transition: color .25s ease; margin-bottom:1rem;
}
.accordion-item button:hover { color: #000; }
.accordion-item.open > h3 > button { color: #000; }
.accordion-item button:focus-visible {  }

.accordion-item .content {
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(0.4, 0, 0.2, 1), padding .5s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 1rem;
}
.accordion-item .content > p { margin: 0 0 1rem; }

.accordion-item.open .content { max-height: 700px; padding: 0 1rem 1rem; }

:target { scroll-margin-top: var(--header-height); }

@media (prefers-reduced-motion: reduce) {
  .accordion-item .content { transition: none; }
}





/* Basis-Zustand */
.animated {
  opacity: 0;
  transform: translateY(140px);
  transition: opacity 0.2s ease-out, transform 0.4s ease-out;
}

/* Aktivierter Zustand */
.animated.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Verzögerung */
.delay0 { transition-delay: 0s; }
.delay100 { transition-delay: 0.1s; }
.delay200 { transition-delay: 0.2s; }
.delay300 { transition-delay: 0.3s; }
.delay400 { transition-delay: 0.4s; }
.delay500 { transition-delay: 0.5s; }
.delay600 { transition-delay: 0.6s; }
.delay700 { transition-delay: 0.7s; }
.delay800 { transition-delay: 0.8s; }
.delay900 { transition-delay: 0.9s; }
.delay1000 { transition-delay: 1s; }


@media (max-width: 768px) {
  .animated {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}