/*!
Theme Name: Offizin-Pay
Theme URI: https://www.noweda-apothekenberatung.de
Author: NOWEDA ApothekenBeratung GmbH
Author URI: https://www.noweda-apothekenberatung.de
Description: Design- und Entwicklungstheme für die Offizin-Pay.de
Version: 1.0.0
License: Not for redistribution
Text Domain: offpay
*/

*,
*::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(--color-1);
}
	
h2 {
    font-size: var(--h2-font-size);
    line-height:var(--h2-line-height);
    font-weight: 800; margin-top: 0;
    color: var(--color-2);
}

h3 {
    font-size: var(--h3-font-size);
    line-height:var(--h3-line-height);
    font-weight: 700;
    color: var(--color-1);
}

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

.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; font-size:1rem;  }
nav.main-navigation > ul > li {  margin-right: 12px; 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); }

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

.wp-block-separator { border: .6px dotted lightgray; }

#chart1 { display: flex; flex-wrap: wrap; gap: 1rem; }
.chart-container { --p1: 0; --p2: 0; --p3: 0; }
svg.chart { width: 100%; height: 100%; overflow: visible;}
.bg-ring { fill: none; stroke: rgba(0,21,53,0.05); stroke-width: 14; }
.center-text { font-size: 1.25rem; fill: #2c3e50; text-anchor: middle; dominant-baseline: middle; }
.legend-text { font-size: 0.7rem; fill: text-anchor: middle; dominant-baseline: middle; }
.legend-text.b1 { fill: var(--color-1); }
.legend-text.b2 { fill: var(--color-2); }
.legend-text.b3 { fill: var(--color-3); }
.ring { fill: none; stroke-width: 14; stroke-linecap: round; transform-origin: 50% 50%; transform: rotate(-90deg); transition: stroke-dashoffset 1s ease-out; }
.ring1 { stroke: var(--color-1); stroke-dasharray: 565.49; stroke-dashoffset: 565.49; transition-delay: 0s; }
.ring2 { stroke: var(--color-2); stroke-dasharray: 464.96; stroke-dashoffset: 464.96; transition-delay: 0.2s; }
.ring3 { stroke: var(--color-3); stroke-dasharray: 364.42; stroke-dashoffset: 364.42; transition-delay: 0.4s; }
.chart-container.active .ring1 { stroke-dashoffset: calc(565.49 * (1 - var(--p1) / 100)); }
.chart-container.active .ring2 { stroke-dashoffset: calc(464.96 * (1 - var(--p2) / 100));}
.chart-container.active .ring3 { stroke-dashoffset: calc(364.42 * (1 - var(--p3) / 100));}

div.chart-legend {
	display: flex;
	margin: 1rem 0 1rem 0;
}

div.chart-center { text-align:left;}

@media screen and (max-width: 768px) {
	div.chart-legend {
		flex-direction: column;
		align-items: flex-start;
	}
}

.chart-legend-item {
 display: flex;
 align-items: left;
 margin-right:1rem;
}

div.legend { width:auto; flex-direction:column !important;justify-content: left !important; }

div.chart-legend .bullet1 {
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	margin-right: 0.7rem;
	margin-top: 0.2rem;
	background-color: var(--color-3);
}
div.chart-legend .bullet2 {
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background-color: var(--color-1);
	margin-right: 0.7rem;
	margin-top: 0.2rem;
}
div.chart-legend .bullet3 {
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background-color: var(--color-2);
	margin-right: 0.7rem;
	margin-top: 0.2rem;
}


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

    .contactbox { 
        color: color-mix(in srgb, var(--color-1) 40%, white 60%); 
    }

    .contactbox a, .contactbox a:link, .contactbox a:visited, .contactbox a:active { 
        color: #ffffff; 
        text-underline-offset: .15rem; 
	    text-decoration-thickness: 1px; 
    }

    .product-card-container {
      display: flex;  
      gap: 2rem;
    }

    .product-card {
      flex: 1 1 50%;
      margin: 0 0 2rem;
      background-color: #ffffff;
      padding: 2rem 2rem;
      box-sizing: border-box;
    }

@media (max-width: 980px) {
      .product-card-container { flex-direction: column; }
      .product-card { flex: 1 1 100%; }
    }

 @media only screen and (max-width: 1000px) {
      .product-card-container { column-count: 1; }
      .product-card { margin-bottom: 2rem; }
    }

    .product-card p { color: var(--text-color); }
    .product-card h3 { color: var(--color-2) !important; font-size: 1.9rem !important; margin-top: 0.5rem !important; }
    .product-card h4 { color: color-mix(in srgb, var(--color-1) 60%, white 40%) !important; font-size: 1.25rem !important; font-weight:300 !important; margin-bottom: 0px !important; margin-top: 1.75rem !important; }
    .product-card p.copy { color: color-mix(in srgb, var(--color-1) 60%, white 40%) !important; font-size: 0.9rem; }
    p.copy { color: color-mix(in srgb, var(--color-1) 60%, white 40%); font-size: 0.9rem; }
	p.copy2 { color: color-mix(in srgb, var(--color-3) 100%, white 40%); font-size: 0.9rem; }


  .donut-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      gap: 20px;
    }
    .donut-container {
      position: relative;
      width: 280px;
      height: 280px;
    }
    .donut-svg {
      transform: rotate(-90deg);
      width: 100%;
      height: 100%;
    }
    .donut-bg {
      fill: none;
      stroke: #e0e0e0;
      stroke-width: 20;
    }
    .donut-circle {
      fill: none;
      stroke-linecap: round;
      transition: stroke-dashoffset 1s ease;
    }
    .chart-center {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: none;
    }
    .chart-center .year {
      font-size: 1.8em;
      font-weight: 400;
    }
    .chart-center .legend {
      margin-top: 6px;
      font-size: 0.9em;
      display: flex;
      justify-content: center;
      gap: 1px;
      flex-wrap: wrap;
    }
    .legend-item {
      display: inline-flex;
      align-items: center;
      margin: -3px 0;
    }
    .legend-color {
      display: inline-block;
      width: .9rem;
      height: .9rem;
      border-radius: 50%;
      margin-right: 0.5rem;
    }

@media (max-width: 1380px) {
	.donut-container { max-width: calc(100% / 4); height: auto; }
	.donut-wrapper { justify-content: left; padding: 0; gap:0;  }
}
@media (max-width: 1000px) {
	.donut-wrapper { justify-content: left; padding: 0; gap:0; }
	.donut-container { max-width: 280px; height: auto; }
	.donut-wrapper { max-width:580px; }
}
@media (max-width: 768px) {
	.donut-wrapper { justify-content: center; padding: 0; gap:0; max-width: 600px; max-width:100%; margin: 0 2rem; }
	.donut-container { flex: 0 0 calc(50%); max-width: 280px; height: auto; }
	.chart-center .year { font-size: 1.6em; font-weight: 400; }
	.chart-center .legend { margin-top: 0; font-size: 0.8em; gap: 0; }
	.legend-item { display: inline-flex; align-items: center; }
}


	.infobox { 
		margin-top: 1rem;	
	  	background-color: #F0F4F8;
      	font-weight: 600;
      	padding: 16px 24px 16px 18px;
	  	border-left: 3px solid var(--color-3);
		max-width:84%;
	}


    .pricing-table, .product-card-table {
      width: 100%;
	  max-width: 40rem;
      border-collapse: collapse;
    }

	.product-card-table { margin-top: 3rem;}
	
    .pricing-table .section-header td, .product-card-table .section-header td  {
      background-color: #F0F4F8;
      font-weight: 600;
      font-size: 1rem;
      padding: 12px 16px;
      border-bottom: 1px solid #E2E8F0;
    }

    .pricing-table .data-row td, .product-card-table .data-row td {
      padding: 12px 16px;
      border-bottom: 1px solid #E2E8F0;
      vertical-align: top;
    }

	.product-card-table .data-row td {
	  border-top: 1px solid #E2E8F0;
	}

    .pricing-table .amount, .product-card-table .amount {
      width: 4rem;
      white-space: nowrap;
	  text-align: right;
    }

	.product-card-table .amount {
      font-weight: 600;
    }

    .pricing-table .description, .product-card-table .description {
      padding-left: 8px;
      line-height: 1.4;
    }

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

	
.wp-block-gallery { 
	width:inherit;
	flex-wrap: wrap;
	display: flex;
	gap:10px;
 }


 .wp-block-gallery > .wp-block-image { 
	flex-grow: 0;
	flex-shrink: 0;
	background-color: #ffffff;
	border-radius: var(--border-radius);
 }


 .wp-block-gallery.payment-icons > .wp-block-image { 
	flex-grow: 0;
	flex-shrink: 0;
	background-color: rgba(255,255,255,0);
	border-radius: 0;
 }

 .wp-block-gallery.payment-icons { 
	gap:20px;
	max-width:70%;
	margin: 0 auto;
 }




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

p { font-size: 1.1rem; line-height: 1.5rem; margin: 0 0 .75rem 0; }

p.has-small-font-size { font-size: .8rem; line-height: 1.1rem; margin: 0 0 .4rem 0; }
p.has-medium-font-size { font-size: 1.3rem; line-height: 1.5rem; margin: 0 0 .6rem 0; }
p.has-large-font-size { font-size: 1.7rem; line-height: 1.9rem; margin: 0 0 .75rem 0; }
p.has-x-large-font-size { font-size: 2.0rem; line-height: 2.2rem; margin: 0 0 .9rem 0; }


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;
	border-radius: .5rem;
	text-decoration: none;
	background-color: var(--color-3);
	color: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.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;
	color: #ffffff;
	-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;
}

@media (max-width: 600px) {
  div.payment-provider > figure.wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-gap: 0.5em !important;
  }
  div.payment-provider > figure.wp-block-gallery > figure.wp-block-image:not(#individual-image) {
        width: 100%;
        height: auto;
    }

figure.wp-block-gallery.payment-icons {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: .8rem;
    padding:0 2rem;
}

figure.wp-block-gallery.payment-icons > figure.wp-block-image:not(#individual-image) {
     width: 100%;
     height: auto;
	border-radius:0px;
}
}
	


#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)
}


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




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

.mobilemenu-icon {
	position: relative;
	cursor: pointer;
	width: 32px;
	height: 26px;
	margin-top:4px;
	z-index: 1001;
	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: 1000;
}
.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;
}






/*
-----------------------------
XXXX
----------------------------- 
*/

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

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

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

    .double-offset {
        padding-right:4rem;
        padding-left:4rem;
    }

    .triple-offset {
        padding-right:8rem;
        padding-left:8rem;
    }

    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;
		margin-left:-2rem;
        transform: translateY(-120%);
    }

.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:490px;
    }

    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; 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( 'offpay_layout_content_width', 0 ) ); ?>px) / 2) + <?php echo esc_html( get_theme_mod( 'offpay_layout_offset', 0 ) ); ?>rem) 0 calc(((100vw - <?php echo esc_attr( get_theme_mod( 'offpay_layout_content_width', 0 ) ); ?>px) / 2) + <?php echo esc_html( get_theme_mod( 'offpay_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%; }
        .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: 1rem; }
        .logo img { width: 180px !important; height: auto; display: block; }
        div.headerbox-container { transform: translateY(-100%); padding-right:0; }
		div.headerbox { width:100%; border-radius: 0; padding: 1.6rem 2rem 2rem 2rem; z-index: 200; height: auto; }
        .smallgap {
		margin-bottom:0rem;
	    }

    html { font-size: 14px; }
    h1 { font-size: 2rem; line-height: 1.2; }
}