/*
theme name: Deutsche Monteurzimmer
theme uri: https://er-dmz.de
description:  Deutsche Monteurzimmer
version: 4.0
author: klaus oppermann
author uri: https://www.klausoppermann.de/
*/

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root {
  --body-bg: #fff;

  --weiss: #fff; /* weiss */
  --hell: #EAEEF2;  /* hell */
  --medium: #307DB8;   /* medium */
  --dunkel: #1c496b;    /* dunkel */
  --schwarz: #000; /* schwarz */

  --vibrant: #d5242e; /* + */
  --on-vibrant: #fff;    /* weiss */
  --vibrant-hov: #d5242e; /* + */
  --on-vibrant-hov: #fff;  /*  weiss */

  --warning: #d5242e;   /* rot */
  --success: #ADB01C;  /* gruen */
  --hallo: #98D518;

  --trans-dunkel--1: rgba(0,0,0,0.05);
  --trans-dunkel-1: rgba(0,0,0,0.1);
  --trans-dunkel-2: rgba(0,0,0,0.2);
  --trans-dunkel-3: rgba(0,0,0,0.3);
  --trans-dunkel-4: rgba(0,0,0,0.4);
  --trans-dunkel-6: rgba(0,0,0,0.6);
  --trans-dunkel-8: rgba(0,0,0,0.8);
  --trans-dunkel-9: rgba(0,0,0,0.9);
  --trans-hell-1: rgba(255,255,255,0.1);
  --trans-hell-2: rgba(255,255,255,0.2);
  --trans-hell-4: rgba(255,255,255,0.4);
  --trans-hell-6: rgba(255,255,255,0.6);
  --trans-hell-8: rgba(255,255,255,0.8);

/* @link https://utopia.fyi/type/calculator */

  --step--1: clamp(0.83rem, calc(0.74rem + 0.48vw), 1.11rem);
  --step-0: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
  --step-1: clamp(1.20rem, calc(1.13rem + 0.36vw), 1.41rem);
  --step-2: clamp(1.44rem, calc(1.39rem + 0.25vw), 1.58rem);
  --step-3: clamp(1.73rem, calc(1.71rem + 0.09vw), 1.78rem);
  --step-4: clamp(2.00rem, calc(2.10rem + -0.12vw), 2.07rem);
  --step-5: clamp(2.25rem, calc(2.57rem + -0.41vw), 2.49rem);
  --step-6: clamp(2.53rem, calc(3.14rem + -0.79vw), 2.99rem);


  --but-pad: 0.7em 1.3em;
  --min: 32ch;
  --gap: 3.5rem;

  --mwidth: 68rem;
  --bigwidth: 90rem;
  --biggerwidth: 100rem;
  --fullwidth: 120rem;

  --font-text: Roboto,Arial, Verdana, Helvetica,sans-serif ;
  --font-headlines: Roboto,Arial, Verdana, Helvetica,sans-serif;
  --font-secondary: Roboto,Arial, Verdana, Helvetica,sans-serif

 }

/* Reset */

*, *::before, *::after {box-sizing: inherit;}
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,hr,iframe,img,ins,kbd,label,legend,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{border:0;color:inherit;font:inherit;list-style:none;margin:0;padding:0;outline-color:transparent;text-decoration:none;vertical-align:baseline}
label,select,input[type=checkbox],input[type=radio],input[type=button],input[type=submit]{cursor:pointer}
article, aside, figcaption, figure, footer, header, hgroup, nav, section, time{display:block;}

/* Allgemein */

html{background:var(--dunkel);font-size:100%;scroll-behavior: smooth; scroll-padding-top:100px;box-sizing:border-box;}
body{background:var(--body-bg);color:var(--schwarz);
font-family:var(--font-text);font-size:var(--step-0);font-weight:400;line-height:1.6;
margin:0;padding:0;text-align:center;position:relative;overflow-x: hidden;overflow-y:scroll;}
body.noslide, body.archive, body.blog{}

a,a:hover,a:focus{color:var(--dunkel);text-decoration:underline;}
a:hover,a:focus{color:var(--vibrant);text-decoration:none}
a.break{word-break: break-all; overflow-wrap: break-word;hyphens:auto;}
a[href$=".pdf"]{background:var(--vibrant);color:var(--weiss);padding:0 5px;text-decoration:none;-webkit-box-decoration-break: clone;box-decoration-break: clone;}
a.icon-mobile{text-decoration:none;cursor:text;}

address{margin:15px 0;font-style:normal}

blockquote{background:var(--medium);border:1px solid var(--medium);border-radius:0.5em;color:var(--weiss);display:grid;place-items:center;font-size:var(--step-0);margin:3em auto;padding:2.5em;position: relative;}
blockquote h2, blockquote h3{color:var(--weiss);margin:10px auto;padding:0;text-align:center;}
blockquote p,blockquote strong{color:var(--weiss);margin-inline:auto;}

button{outline-color:transparent;}
code{font-family:'courier new', serif;font-style:normal;}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--schwarz);font-family:var(--font-headlines);font-weight:700;line-height:1.3;margin:1.5em auto 1em auto;text-align:center;text-wrap: balance}

h1,.h1{font-size:var(--step-5);line-height:1.1;margin:1em auto;max-width:var(--bigwidth);font-weight:700;max-width:30ch}
h1 b,h1 strong{display:inline-block;font-size:var(--step-5);font-style:normal;}
h1 span,h1 i,h1 span,h1 em{display:block;font-size:var(--step-2);margin:0.5em auto 0 auto;font-style:normal;}

h2,.h2{font-size:var(--step-4);line-height:1.1;max-width:35ch}
h3,.h3{font-size:var(--step-3);max-width:45ch}
h4,.h4{font-size:var(--step-2);}
h5,.h5{font-size:var(--step-2);}
h6,.h6{font-size:var(--step-1);}

h4,.h4,h5,.h5,h6,.h6{margin-inline:auto;max-width:70ch;}

h1 a,h2 a,h3 a,h4 a,h5 a,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover{text-decoration:none}

.single-referenzen h1{font-size:var(--step-2);font-weight:400;letter-spacing:1px;text-transform:uppercase;}
.single-referenzen h2.first{margin-top:50px;}

hr{background:var(--trans-hell-4);border:none;color:transparent;clear:both;display:block;height:0;margin:25px 0;padding:1px 0 0 0;}
hr.abstand{background:transparent;margin:35px 0;}

img,picture{display:block;width:auto;max-width:100%;height:auto;}

p{margin:1.5em 0;}
p.frame{margin:0;}
p:empty{margin:0;padding:0;}

p a,ul li a,ol li a{position:relative}

p.absatzz{clear:both;display: flow-root;margin:1.5em 0;position:relative;padding-left:45px}
p.absatzz::before {color: rgba(0,0,0,0.1);content: attr(data-first_letter);display: block;font-family:var(--font-headlines);font-size:var(--step-6);font-style:italic;font-weight:700;line-height: 1;position: absolute;inset:-25px 0 0 -20px;}

p.init:first-letter{initial-letter: 3 3;font-family:var(--font-headlines);font-size:var(--step-6);font-style:italic;font-weight:700;line-height: 1;margin-right: 1rem;}

ol {display:block; margin:25px 0; padding:0; counter-reset: list-number; position:relative;}
ol li{ display:block;margin:0;padding:12px 25px 12px 60px; position:relative;}
ol li:before { counter-increment: list-number; content: counter(list-number); margin-inline:auto;width:35px;height:35px;display:flex;align-items: center;justify-content: center; font-size:var(--step-1);font-weight:700;background-color:var(--vibrant);border-radius:50%; color:var(--on-vibrant);position:absolute;left:10px;top:20%;line-height:1;}

ul{margin:25px;}
ul li,ul.postinfos li {list-style-type: square;}
ul li{padding:5px;position:relative;}
ul ul,ul ul ul{margin:0 15px}
ul ul li,ul ul ul li{background-image:none;padding:5px;}

ul.cols, p.cols, div.cols{columns:30ch 3;gap: 2em;break-inside:avoid;}
ul.cols li{break-inside:avoid;padding:0.5rem}

small{font-size:var(--step--1);line-height:1.4}
cite, em{font-style:italic}
pre{margin:15px 0;overflow:auto;}
pre a{font-weight:400;}
strong{font-family:var(--font-secondary);font-weight:500;}
sup,sub{font-size:var(--step--1);height: 0;line-height:1;vertical-align:baseline;position: relative;}
sup{top: -0.35rem;}
sub{bottom: -0.25rem;}
small{font-size:var(--step--1);font-style:italic}

table{margin:50px auto;border-collapse:collapse;width:100%;outline:1px solid var(--trans-dunkel-2);}
tr{background:var(--trans-dunkel--1);display:table-row;}
tr:nth-child(even){background:var(--trans-hell-1);}
th, td{color:var(--schwarz);display: table-cell;text-align: left;padding:0.5em;}
th{background:var(--dunkel);color:var(--weiss);display: none;font-weight: 700;}
td{display:block;}
td:before { content: attr(data-cell)": "; font-weight: 700; width: 6.5em; display: inline-block;}

.dunkel table th,.dunkel table td{color:var(--weiss);}
.dunkel table th{background:var(--trans-dunkel-4)}

@media screen and (min-width: 40rem) {
th,td{display: table-cell;}
td::before {display:none;}
}



/*  Sonstiges   */

a.post-edit-link{background:var(--warning);color:var(--weiss);display:inline-block;margin:0;padding:10px 25px;position:fixed;bottom:1rem;left:1rem;border-radius:5px;z-index:9999}

.clear{clear:both;display:block;margin-inline:auto;padding:25px 0;}
.clearer{clear:both;display:block;margin-inline:auto;padding:1px 0;}
.group:after,#nav:after,#wrapper:after {content: "";display: table;clear: both;margin:0;padding:0;line-height:0;}
.mail{display:inline-block;}

.shadow{box-shadow: 0px 0px 5px rgba(0,0,0,0.3);transition: box-shadow 0.3s}
.shadow:hover{box-shadow: 0px 0px 5px rgba(0,0,0,0.1);}
.big-shadow{box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5),-5px -5px 10px 0px rgba(0, 0, 0, 0.08),0 8px 10px -5px rgba(0, 0, 0, 0.1);transition: box-shadow 0.3s}
.big-shadow:hover{box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5),0 0 5px 0px rgba(0, 0, 0, 0.05),0 5px 5px -5px rgba(0, 0, 0, 0.05);}

.shadow-glow{box-shadow: 1px 1px 35px 8px rgba(255,255,255,0.7);transition: box-shadow 0.3s}
.shadow-glow:hover{box-shadow: 1px 1px 35px 8px rgba(255,255,255,0.4);}

.drop-shadow{filter: drop-shadow(-2px 5px 5px rgba(0, 0, 0, 0.5));transition: filter 0.3s}
.drop-shadow:hover{filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));}

.stroke{font-family: Helvetica, Verdana, sans-serif;font-size:4rem;text-transform:uppercase;font-weight:700;letter-spacing:2px;-webkit-text-fill-color: transparent;-webkit-text-stroke-width:2px;-webkit-text-stroke-color: var(--weiss);}

.buntertext, section.module h2.buntertext, section.module.dunkel h2.buntertext{font-size:var(--step-6);font-weight:800;letter-spacing:4px;background-image: var(--gradient); -webkit-background-clip: text; background-clip: text; color:transparent; background-size:100%;}

.hyphens{hyphens: auto;}

.aligncenter.vcard span{text-align:left;background:var(--hell);}

.line-up{display: flex;flex-direction: column; padding: 1rem;justify-content: space-between;height:100%;}

.ko-logos{display: flex;flex-wrap: wrap;gap:3.5em;align-items: center;justify-content: center;margin:0 auto;}
.ko-logos a{flex: 0 1 115px;}
.ko-logos a img{filter:grayscale(100%);transition: filter 2s;max-height:85px;margin:0 auto;}
.ko-logos a:hover img{filter:grayscale(0);transition: filter 0.3s}


.tooltipp {color:var(--hell);margin:0 auto;position: relative;display:inline-block;vertical-align:middle;}
.tooltipp .tooltipptext {visibility: hidden;width: 250px;background-color:var(--vibrant);color:var(--hell);text-align: center;border-radius: 6px;font-size:0.85em;line-height:1.4;padding:7px;position: absolute;z-index: 1; bottom: 125%;left: 50%;margin-left: -125px;opacity: 0;  transition: opacity 0.3s;}
.tooltipp:hover .tooltipptext {visibility: visible;opacity: 1;}
.tooltipp::before{font-size:var(--step-2);}

#searchform{line-height:1;margin:25px auto;padding:0;position:relative;text-align:center;display:flex;max-width:600px;}
#searchform input{border-color:var(--dunkel);border-radius: 100vh;caret-color:var(--vibrant);margin:0 auto;padding:0.8rem;flex-grow: 1;}
#searchform button {background:var(--vibrant);border:2px solid var(--vibrant);color:var(--on-vibrant);cursor:pointer;font-size:var(--step-2);margin:0 0 0 5px;padding:0;border-radius:50%;aspect-ratio:1 / 1;width:50px;transition: all 0.3s;}
#searchform button:hover{background:transparent;}
#searchform button::before{color:var(--on-vibrant);margin:0;}
#searchform button:hover::before{color:var(--weiss);background:transparent;}

#backtotop{background:var(--dunkel);color:var(--weiss);cursor:pointer;font-size:var(--step-2);height:50px;width:50px;position:fixed;bottom:1rem;right:1rem;z-index:999;display:flex;align-items: center;justify-content: center;box-shadow:2px 2px 5px var(--trans-dunkel-4);mix-blend-mode: difference;visibility: hidden;opacity:0;transition: all 0.3s;}
#backtotop:hover{}
#backtotop::before{margin:0;line-height:100%;}
#backtotop span{display:none}
.scrolled #backtotop{visibility:visible;opacity:1;}

/* Header */

#wrapheader{background:var(--weiss);display:block;position:sticky;top:0;left:0;text-align:left;width:100%;z-index:800;}
#header{display:flex;align-items:center;justify-content:space-between;height:80px;margin-inline:auto;padding:0 10px;position:relative;max-width:var(--bigwidth);}

#header .logo{max-height:80px;text-align:left;}
#header .logo img{max-height:80px;max-width:260px;padding:5px 0;}
#header .logo a,#header .logo a:hover{color:var(--dunkel);}
#header .logo a:hover{filter:grayscale(100%);}
#header .logo .titel{font-size:var(--step-1);font-weight:700;letter-spacing:2px;margin:0;padding:0;line-height:1.25;}
#header .logo .beschreibung{color:var(--dunkel);display:none;font-size:var(--step-1);font-weight:700;margin:5px 0;padding:0;}

#fixbox {display:none;background:var(--dunkel);position:relative;margin:0;padding:10px 0 0 0;text-align:center;z-index:850;}
#fixbox .fixboxinner{background:var(--vibrant);color:var(--weiss);border-radius:50%;font-size:var(--step--1);display:grid;place-items:center;line-height:1.6;aspect-ratio:1;margin:0 auto;width:180px;}
#fixbox .phone.notfall2 {margin: 0 auto;padding:0;text-align:center;}
#fixbox .phone.notfall2 a{color:var(--weiss);font-weight:700;}

#fixbox .phone.notfall2 .text1,#fixbox .phone.notfall2 .text2{display:block;font-size:var(--step--1);margin:0 auto;}
#fixbox .phone.notfall2 .text1{display:block;font-size:var(--step-1);font-weight:700;line-height:100%}
#fixbox .phone.notfall2 .text2{font-size:var(--step--1);}
#fixbox .phone.notfall2 .text{font-size:var(--step--1);}


/* Navigation */

@media all and (max-width: 67.999rem){

/* Copyright (c) 2023 von Ahmad Emran (https://codepen.io/ahmadbassamran/pen/VQwPGr) */
.ko-menu{background:0 0;border:0;width:35px;height:27px;margin:10px;position:relative;cursor:pointer;display:inline-block}
.ko-menu span{background-color:var(--dunkel);position:absolute;border-radius:3px;transition:.3s cubic-bezier(.8, .5, .2, 1.4)}
.ko-menu span:first-child{width:100%;height:3px;display:block;top:0;left:0}
.ko-menu span:nth-child(2){width:100%;height:3px;display:block;top:12px;left:0}
.ko-menu span:nth-child(3){width:100%;height:3px;display:block;bottom:0;left:0}
.ko-menu.open{transform:rotate(-90deg)}
.ko-menu.open span:first-child{left:3px;top:12px;width:30px;transition:.3s cubic-bezier(.8, .5, .2, 1.4);transform:rotate(90deg);transition-delay:150ms}
.ko-menu.open span:nth-child(2){left:2px;top:20px;width:20px;transition:.3s cubic-bezier(.8, .5, .2, 1.4);transform:rotate(45deg);transition-delay:50ms}
.ko-menu.open span:nth-child(3){left:14px;top:20px;width:20px;transition:.3s cubic-bezier(.8, .5, .2, 1.4);transform:rotate(-45deg);transition-delay:0.1s}

nav#konavigation,nav#konavigation.open{font-size:var(--step--1);margin:0;position:fixed;top:0;left:100vw;height:100%;width:70%;max-width:400px;z-index: 9999;transition:.5s ease-in-out;isolation:isolate; background-color: rgba(18, 114, 185, 0.9);-webkit-backdrop-filter: invert(100%);backdrop-filter: invert(100%);}
nav#konavigation.open{left: 0;box-shadow:5px 0 0 var(--trans-dunkel-2);}

.nav__container {position: absolute;inset:0;padding:25px 15px;overflow-y: auto;-webkit-overflow-scrolling: touch; scrollbar-color: var(--hell) var(--dunkel); scrollbar-width: thin; }
.nav__container::-webkit-scrollbar {width: 10px;}
.nav__container::-webkit-scrollbar-track {background: var(--dunkel);}
.nav__container::-webkit-scrollbar-thumb {background: var(--hell);border:1px solid var(--dunkel);border-radius:3rem}

nav#konavigation ul,nav li{background:transparent;display:block;margin:0;padding:0;text-align:left;width:auto;}
nav#konavigation ul a,
nav#konavigation ul a:hover,
nav#konavigation ul a:focus{background:transparent;color:var(--weiss);display:inline-block;font-family:var(--font-secondary);font-weight:500;margin:0;padding:15px 10px;position:relative;text-decoration:none;}

nav li::before{color:var(--weiss);}

nav#konavigation ul a:hover,
nav#konavigation ul a:focus,
nav#konavigation.open a[aria-current="page"],
nav#konavigation ul ul a:hover,
nav#konavigation ul ul a[aria-current="page"] {color:var(--weiss);background:var(--trans-dunkel-2);}

nav#konavigation ul a:not([href]),
nav#konavigation ul a:hover:not([href]){cursor:text;}
nav#konavigation li.menu-item-has-children > a:after{font-size:var(--step-0);text-decoration:none;margin:0 0 0 10px;}
nav#konavigation li.menu-item-has-children li a:after{content:'';margin:0;padding:0;width:0;}
nav#konavigation li.current_page_ancestor a:after{color:var(--weiss);}

}
@media all and (min-width:68rem){
.ko-menu {display:none}

nav#konavigation,nav#konavigation.open{border:none;display:block;font-size:var(--step--1);height:auto;margin:0;overflow:visible;position:relative;text-align:center;width:auto;z-index:900;box-shadow:none;}
nav#konavigation ul{display:inline-block;margin-inline:auto;text-align:left;vertical-align:middle;z-index:901;}
nav#konavigation ul li{display:inline-block;padding:10px;position:relative;}

nav#konavigation a,
nav#konavigation a:hover,
nav#konavigation a:focus{color:var(--dunkel);border-bottom:2px solid transparent;font-family:var(--font-secondary);font-weight:500;letter-spacing:0.5px;margin:0 0.6em 0 0;padding:5px;text-decoration:none;text-transform:uppercase;position:relative;}
nav#konavigation a[aria-current="page"]{color:var(--medium);border-color:var(--medium);}

.home nav#konavigation a[aria-current="page"],.blog nav#konavigation a[aria-current="page"]{color:var(--dunkel);background:transparent;border-color:transparent;}

nav#konavigation li.kontakt{padding-right:0;}
nav#konavigation li.kontakt > a,
nav#konavigation li.kontakt > a:hover,
nav#konavigation li.kontakt > a:focus{background:transparent;color:var(--dunkel);border:1px solid var(--vibrant) !important;border-radius:3px;margin:0;padding:0.7em;transition:background 0.3s ease-in-out,color 0.3s ease-in-out,border-color 0.3s ease-in-out;;}
nav#konavigation li.kontakt > a:hover,
nav#konavigation li.kontakt > a:focus{background:var(--vibrant);color:var(--on-vibrant);}



nav#konavigation a::before{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--medium);transform:scaleX(0); transform-origin:center;transition: transform 250ms ease-in;}
nav#konavigation a:hover:not(li.kontakt > a)::before,
nav#konavigation a:focus:not(li.kontakt > a)::before{transform:scaleX(1);transform-origin:center;}


nav#konavigation ul.sub-menu{background:var(--weiss);border-radius:9px;color:var(--dunkel);height:auto;top:100%;left: -100vw;opacity:0;margin:0;padding:5px;position:absolute;width:400px;transition:opacity .6s ease-in-out}
nav#konavigation li:hover > ul.sub-menu,
nav#konavigation li:active > ul.sub-menu,
nav#konavigation li:focus > ul.sub-menu{left:0;opacity:1;box-shadow: 0px 0px 5px rgba(0,0,0,0.3);}

nav#konavigation ul.sub-menu ul{border:none;margin:0;padding:10px;}
nav#konavigation ul.sub-menu li{border:none;display:block;padding:0;width:auto;}
nav#konavigation ul.sub-menu a{display:block;font-family:400;font-size:var(--step--1);margin:0;padding:10px 15px;border:none;}
nav#konavigation ul.sub-menu a:hover,
nav#konavigation ul.sub-menu a:focus{background-color:var(--hell);}
nav#konavigation ul.sub-menu a[aria-current="page"]{text-decoration:underline;}
nav#konavigation ul.sub-menu a::before{display:none;}

nav#konavigation li.menu-item-has-children > a:after{font-size:var(--step--2);text-decoration:none;margin:0 0 0 10px;}


}

ul.sprungmarken {clear:both;display:block;margin:25px auto;text-align:center;}
ul.sprungmarken li {display:inline-block;padding:0;text-align:center;}
ul.sprungmarken li:before {display:none;}
ul.sprungmarken li a,ul.sprungmarken li a:hover{background:var(--weiss);border:1px solid var(--medium);color:var(--medium);display:block;font-weight:500;margin:5px;padding:5px 8px;position: relative;text-decoration:none;transition: all 0.5s;}
ul.sprungmarken li a:hover{background:var(--medium);color:var(--weiss);}

/*  Main   */

#wrapper{display:block;margin-inline:auto;text-align:left;overflow:hidden;padding:25px;position:relative;max-width:var(--mwidth);}
.page-template-page-parallax-php #wrapper,
.post-template-page-parallax-php #wrapper,
.post-template-single-parallax-php #wrapper{padding:0;max-width:100%}
.blog #wrapper,
.search #wrapper,
.archive #wrapper,
.page-template-page-objekte #wrapper{max-width:var(--bigwidth);}

#wrapper ul.maximal{max-width:70ch;margin:50px auto;}
#wrapper ul.maximal > li{margin:0 25px;}
#wrapper ol:not(.commentlist){max-width:70ch;}
#wrapper p:not(.cols, .myref-excerpt, .datum,.contact-form p, .txt, .bildsplit p, .mehrwertboxtext p){margin-inline:auto;max-width:70ch;}
#wrapper p:has( > img) {max-width:100% !important;}

/*  Pagenavi   */

.wp-pagenavi {clear:both;display:block;margin:15px 0;padding:15px 0;text-align:center;}
.wp-pagenavi a,.wp-pagenavi a:hover,.wp-pagenavi span {background:var(--hell);color:var(--dunkel);display:inline-block;margin:5px;padding:5px 15px;text-align:center;border-radius:5px;transition:background 0.3s ease-in-out,color 0.3s ease-in-out;}
.wp-pagenavi a:hover,.wp-pagenavi span.current {background:var(--hell);color:var(--dunkel);}
.wp-pagenavi a:hover{background:var(--vibrant);color:var(--on-vibrant);}
.wp-pagenavi span.current {background:var(--dunkel);color:var(--weiss);}
.wp-pagenavi span.pages {padding:5px 10px;}

/*  Footer   */

#footer {display:block;background:var(--dunkel);color:var(--trans-hell-8);clear:both;font-size:var(--step--1);margin-inline:auto;position:relative;text-align:center;box-shadow:inset 0 10px 150px var(--trans-dunkel-4);}
#footer .inner {background:transparent;color:var(--weiss);line-height:1.7;margin-inline:auto;padding:50px 25px;text-align:left;max-width:var(--bigwidth);display: flex; flex-wrap: wrap; justify-content: center;gap:var(--gap);}
#footer .inner > *{flex:0 1 27ch;}
#footer .inner:empty{padding:0;}

#footer a,#footer strong{color:inherit;}
#footer a:hover{color:var(--weiss);}

#footer ul{margin:25px auto;}
#footer ul li{display:block;margin:0;padding:0;text-align:left;}
#footer ul li a{border:none;color:inherit;display:block;padding:8px 5px;z-index:1}
#footer ul li a:hover,#footer ul li a[aria-current="page"]{color:var(--weiss);text-decoration:underline;text-decoration-skip:ink;text-decoration-skip-ink: auto;}

#footer ul li a::after{content:'';position:absolute;inset:0;background:var(--trans-dunkel-2);transform:scaleX(0); transform-origin:right;transition: transform 250ms ease-in;z-index:-1}
#footer ul li a:hover::after{transform:scaleX(1);transform-origin:left;}

#footer p{margin:25px auto;font-size:var(--step--1);line-height:1.9;}
#footer p a,#footer ul li a{text-decoration:none;position:relative;}
#footer strong{font-weight:700;}
#footer h3, #footer h3 a,#footer h4, #footer h4 a{color:var(--trans-hell-8);font-size:var(--step-1);font-weight:700;text-align:left;margin-left:5px;}
#footer img{margin:40px auto;}

/* #footer-sidebar3{background:var(--trans-dunkel-2);border-radius:1rem;} */

#footer .fullbox{clear:both;display:block;line-height:1.7;float:none;padding:0;width:100%;}
#footer .fullbox .fullboxinner {background:transparent;color:var(--weiss);display:block;margin-inline:auto;padding:25px 25px 65px 25px;text-align:center;max-width:var(--biggerwidth);}
#footer .fullbox ul{margin:50px auto;}
#footer .fullbox ul li{border:none;display:inline-block;padding:10px 15px;vertical-align:middle}


#footer .fullbox ul li a{display:inline-block;padding:0;vertical-align:middle;}

#footer .footerbox{display:block;margin:0 auto;text-align:center;}
#footer .phone, #footer .email{display:block;margin:0}
#footer .phone a,#footer .telefon a{text-decoration:none;}
#footer .email a,#footer .url a{font-size:var(--step--1);}
#footer .phone::before,#footer .email::before{margin-left:0;}

#footer .phone.notfall a{color:var(--weiss);font-size:var(--step-0);}



/* Kontakt  */

#footer address.vcard {display:block;line-height:1.95rem;margin:0 auto;padding:0;overflow:hidden;position:relative;text-align:left;width:auto;}

#footer address.vcard .innervcard{display:inline-block;margin:0 auto;padding:0 0 0 5px;vertical-align:top;}
#footer address.vcard span{display:block;padding:8px 0;text-align:left;}
#footer address.vcard span.plz,
#footer address.vcard span.ort{display:inline-block;text-align:left;vertical-align:top;}
#footer address.vcard span.telefon{}
#footer address.vcard .adr{text-align:left;}
#footer address.vcard img{border-radius:50%;display:block;margin:0 auto 10px auto;text-align:center;}

#footer .phone{display:inline-block;vertical-align:middle;}
#footer .adress{display:inline-block;padding:0 10px;vertical-align:middle;}

/* Videos */

video {margin-inline:auto;max-width:100%;height:auto;text-align:center;}
.video-wrapper{background:transparent;border:none;margin-inline:auto;width:100%;max-width:100%}
#wrapper .video-wrapper{margin:25px auto;}
#wrapper .full .video-wrapper{margin-inline:auto;}
.video-container{background:transparent;position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video-container iframe,
.video-container object,
.video-container embed{background:transparent;margin-inline:auto;padding:0;position:absolute;top:0;left:0;width:100%;height:100%;}

/* Map */

.my-frame,iframe.map-frame{border:none;padding:0;text-align:center;min-height:600px;height:100%;width:100%;}

/* align */

img.alignleft,.alignleft,
img.alignright,.alignright,
img.aligncenter, .aligncenter,
img.alignnone,.alignnone{display:block;float:none;text-align:center;margin:25px auto}
img.center{text-align:center;margin:5px auto}

img.kreis.alignleft{float:left;border-radius:50%;height:250px;width:250px;shape-outside: circle(50%);margin:1rem 2rem 1rem 0}
img.kreis.alignright{float:right;border-radius:50%;height:250px;width:250px;shape-outside: circle(50%);margin:1rem 0 1rem 2rem}

.beitragsbild{display:block;margin:50px auto;}
.beitragsbild img{margin:0 auto;text-align:center;}

/* wp-caption  */

.wp-caption{height:auto;margin:50px auto;padding:0;position:relative;text-align:center;width:auto;max-width:100%;}
.wp-caption img{display:block;margin-inline:auto;padding:0;text-align:center;}
.wp-caption p{background:var(--hell);display:block;font-style:italic;margin:5px auto;padding:0.5em;text-align:center;}
.hell .wp-caption p{background:var(--trans-dunkel-1);}

/* News / Blogartikel */

ul.news{color:var(--dunkel);display:block;margin-inline:auto;padding:0;}
ul.news li{background:var(--trans-hell-8);display:block;list-style:none;margin:75px auto;padding:0;position:relative;text-align:center;}
ul.news li:before{content:'';display:none;}
ul.news .text{padding:1rem 1.2rem;}
ul.news .text h2,ul.news .text h3{border:none;margin:10px 0;font-size:var(--step-1);font-weight:700;text-align:left;}
ul.news .text p{font-size:var(--step-0);margin:10px 0;text-align:left;}
ul.news  p.datum{}
ul.news a{color:inherit;display:block;text-decoration:none;margin:0;padding:0;transition: color 0.5s;height:100%;}
ul.news a:hover h2,ul.news a:hover h3{color:var(--dunkel);}
ul.news .more,
.cats .more,
article.post .more{color:inherit;display:block;margin:0;padding:0;position:relative;text-align:right;text-decoration:underline;text-decoration-skip:ink;text-decoration-skip-ink: auto;}

ul.news li .thumbnail{display:block;float:none;height:auto;margin-inline:auto;padding:0;overflow:hidden;position:relative;text-align:center;width:100%;}
ul.news li img{display:block;margin:0 auto;text-align:center;transition: scale 0.3s;object-fit:cover;width:100%;}
ul.news li:hover img{scale:1.1;}

ul.news.grid{display:block}
ul.news.grid li{margin:0;padding:0}
ul.news.grid li .thumbnail{position:relative;left:auto;top:auto;width:auto;max-width:100%;}
ul.news.grid li img{margin:0 auto;text-align:center;}
ul.news.grid li .text{}
ul.news.grid li .text h2,ul.news.grid li .text h3,ul.news.grid li .text p{margin-inline:auto;}
ul.news.grid li .text p.datum{position:absolute;bottom:0.6rem;left:1.2rem;padding:0;}
ul.news.grid li .text p.datum span{background:var(--hell);display:inline-block;padding:5px;vertical-align:middle;}
ul.news.grid .comments{border-left:10px solid var(--weiss);}


ul.news.grid2 h3{font-size:var(--step-0);padding:5px 1.2rem;}

ul.news.objekte{}
ul.news.objekte li{text-align:left;}
ul.news.objekte li .excerpt{padding:1em;}

ul.vergleiche{margin:50px auto;}
ul.vergleiche li{border-radius:0.5rem;display: flex; flex-flow: column nowrap;background:var(--hell);list-style:none;padding:0;}
ul.vergleiche li div{margin:0;padding:1rem 1.5rem;}
ul.vergleiche li h3{background:var(--dunkel);color:var(--weiss);border-radius:1rem 1rem 0 0;margin:0;padding:1rem;}
ul.vergleiche li .preis{font-size:var(--step-2);font-weight:700;text-align:center;}
ul.vergleiche li a.button {background:var(--vibrant-hov);color:var(--on-vibrant-hov);border-color:var(--vibrant-hov);margin-top:auto;padding:0.5rem 1rem;}
ul.vergleiche li a.button:hover {background:var(--vibrant);color:var(--on-vibrant);border-color:var(--vibrant);}
ul.vergleiche li span{border-bottom:1px dotted var(--dunkel);display:block;padding:10px;}
ul.vergleiche li ul{display:inline-block;margin:0 auto;width:90%}
ul.vergleiche li ul li{border-bottom:1px dotted var(--dunkel);border-radius:0;display:block;padding:10px;text-align:left;}

/* News / Blogartikel II */

article.post{background:var(--trans-hell-8);border:none;color:var(--dunkel);display:block;margin:25px auto;padding:0;position:relative;vertical-align:middle;max-width:800px;}
article.post:hover{background:var(--weiss);}
article.post a {color:inherit;display:block;text-decoration:none;}
article.post h2,article.post h3{font-size:var(--step-1);font-weight:700;margin:15px 0;}
article.post p{margin:15px 0;}
article.post .text{padding:0 25px;}
article.post p.datum span{display:inline-block;vertical-align:middle;}
article.post p.datum span.comments{padding-left:10px;}

article.post .thumbnailbox{background:transparent;margin-inline:auto;position:relative;overflow:hidden;}
article.post .thumbnailbox img{display:block;margin-inline:auto;transition: scale 0.5s;}
article.post:not(.rund) .thumbnailbox:hover img{scale:1.1;}
article.post.rund .thumbnailbox:hover img{filter:grayscale(100%);}
article.post.rund .thumbnailbox,article.post.rund .thumbnailbox img{border-radius:50%;}
article.post .thumbnailbox{background-position: 50% 50%; background-repeat: no-repeat;background-size: 100% auto;display:block;margin:0 auto 15px auto;padding:0;overflow:hidden;max-width:100%;transition: transform 0.5s;}

article.post .postbody{position:relative;}
article.post .postmeta{clear:both;display:block;font-size:var(--step-0);padding:10px 0}
article.post .postmetadata a,article.post .postmeta a{color:#000;display:inline;margin:0;padding:0;width:auto;}
article.post .postinfo span{margin-right:10px;}
article.post .entrybody p{margin:10px 0;}

article.mypost{color:var(--dunkel);margin:0 auto;padding:1rem;}
article.mypost a{color:inherit;list-style:none;}
article.mypost h2,article.mypost h3,article.mypost p{margin:10px 0;}
article.mypost p.postinfos{}

/* Referenzen */

article.myref{margin:75px auto;padding:0;position:relative;}
article.myref a {color:var(--dunkel);display:block;text-decoration:none;}
article.myref h2,article.myref h3{font-weight:400;margin:15px 0;}
article.myref h2{font-size:var(--step-1);}
article.myref h3{font-size:var(--step-2);font-weight:700;}

article.myref p{margin:15px 0;padding:0;}

article.myref .date{display:block;line-height:100%;margin:0;padding:5px 0;position:relative;}
article.myref .date span{display:inline-block;vertical-align:middle;margin:0 15px 0 0}

article.myref .mythumbnail{background:transparent;margin:0 15px;position:relative;overflow:hidden;}
article.myref .mythumbnail img,article.myref .mythumbnail:hover img{display:block;margin:0 auto;}

article.myref .mytext{background:rgba(255,255,255,0.9);margin:15px;padding:1rem;position:relative;}
article.myref .mytext:hover{background:rgba(255,255,255,0.95);}
article.myref .mytext:hover b{background:rgba(0,0,0,0.4);}

ul.referenzen{clear:both;margin:50px auto;padding:0;text-align:center;width:100%;}

ul.referenzen li{background:transparent;display:block;list-style:none;margin:0 auto;overflow:hidden;padding:0;position:relative;text-align:center;width:100%;max-width:720px;}
ul.referenzen li:before{content:'';display:none;}
ul.referenzen a{color:var(--weiss);display:block;text-decoration:none;margin:0;padding:0;overflow:hidden;width:100%;}
ul.referenzen a::before{background:transparent;content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;}
ul.referenzen li .imgwrap{display:block;float:none;margin:0 auto;padding:0;overflow:hidden;position:relative;text-align:center;width:100%;}
ul.referenzen li img{display:block;margin:0 auto;text-align:center;object-fit:cover;width:100%}
ul.referenzen li a:hover img{}

ul.referenzen li .auszug{display:grid;align-items: end;align-content: end;position:absolute;inset:0;}
ul.referenzen li h3,
ul.referenzen li h4{background:rgba(0, 69, 131,0.8);color:var(--hell);font-size:var(--step-0);font-weight:700;margin:-0.1px 0 0 0;padding:0.7em 0.8em;transition:all 0.3s ease-in-out;-webkit-backdrop-filter: invert(100%);backdrop-filter: invert(100%);}
ul.referenzen li h3{font-weight:700;width:100%}
ul.referenzen li h4{font-weight:400;width:100%}

ul.referenzen li h4{opacity:0; scale:0.9;position:absolute;bottom:0;z-index:-1}
ul.referenzen li a:hover h4{opacity:1; scale:1;z-index:10}

@media(hover:hover) {}

/* Grids */

ul.vergleiche,
ul.referenzen,
ul.news.grid,
.postwrap {
  margin:2.5em 0;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

ul.news.grid.grid2{
  --min: 24ch;
  --gap: 3rem;
}

/*   */

.mythumbnails{display:block;margin:50px auto;position:relative;}

.mobile-screenshot{max-width:240px;}
.mobile-screenshot.links{-webkit-transform: rotate(-3deg);transform: rotate(-3deg);float:left;margin:0.5rem 3rem 0.5rem 0;}
.mobile-screenshot.rechts{-webkit-transform: rotate(3deg);transform: rotate(3deg);float:right;margin:0.5rem 0 0.5rem 3rem;}

.leistung{background:var(--hell);display:inline-block;margin:10px 15px 10px 0;padding:3px 10px;position:relative;vertical-align:middle;}
.leistungen{background:var(--hell);display:block;margin:50px auto;padding:15px;}
.inner-post-nav{background:var(--hell);color:var(--dunkel);display:block;margin:50px auto;padding:15px;}
.inner-post-nav > *{display:block;padding:10px 0;}
.inner-post-nav a{color:var(--schwarz);}
.inner-post-nav > .next{text-align:right;}

/* Segmente / Parallax */

section.module {background:var(--weiss);color:var(--schwarz);clear:both;display:block;margin:0;padding:0;position:relative;width:100%;}
section.module article.wrap-inner-section {display:block;margin-inline:auto;padding:3em 1.5em;position:relative;max-width:var(--mwidth);}

section.module.center,section.module.center h2 {text-align:center;}
section.module h1{margin-top:0em;}
section.module h2:first-of-type:not(.innertextsplits h2, .mehrwertboxtext h2) {margin:0.5em auto;}
section.module img{display:block;margin-inline:auto;}

section.module.parallax {background-color:var(--dunkel);background-position: 50% 0; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;min-height:600px;display:grid;place-items:center;}
section.module.parallax article.wrap-inner-section{display:grid;place-items:center;max-width:100%;position:absolute; inset:0;padding:0}
section.module.parallax article.wrap-inner-section div.ptxt{background:var(--trans-dunkel-2);display:block;margin:0 1em;padding:1.5em;max-width:1280px;border-radius:1rem;}
section.module.parallax h1,section.module.parallax h3{color:var(--weiss);font-weight:700;letter-spacing:2px;margin:10px 0;text-align: center;text-transform: uppercase;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);}
section.module.parallax h2 {color:var(--weiss);font-size:var(--step-6);font-weight:700;letter-spacing:4px;margin:15px 0;}
section.module.parallax a:not(a.button),section.module.parallax strong{color:var(--weiss)}
section.module.parallax p{color:var(--weiss);margin:10px auto;text-align:center;}

section.module.parallax.overlay {isolation:isolate}
section.module.parallax.overlay article.wrap-inner-section{position:absolute; inset:0;padding:0}
section.module.parallax.overlay article.wrap-inner-section::after{content:"";background-color:var(--dunkel);position:absolute;inset:0;z-index:-1;mix-blend-mode: multiply;}

.page-template-page-parallax-php h1:not(.wrapsplits .innertextsplits h1),
.post-template-single-parallax-php h1:not(.wrapsplits .innertextsplits h1) {margin:50px auto;padding:0 2rem;text-align:center;}
.page-template-page-parallax-php section.module h1:not(.wrapsplits .innertextsplits h1),
.post-template-single-parallax-php section.module h1:not(.wrapsplits .innertextsplits h1) {margin:25px auto;padding:0;}

section.module.big article.wrap-inner-section{max-width:var(--bigwidth);}

section.module.bigger article.wrap-inner-section{max-width:var(--biggerwidth);}

section.module.full article.wrap-inner-section{padding:0;max-width:100%}
section#aktuelles article.wrap-inner-section{padding:1px 0;}
section.module.full article.wrap-inner-section ul.galerie{margin-inline:auto;}
section.module.full article.wrap-inner-section ul.galerie li a{margin:0;}

section.module.hell{background:var(--hell);}
section.module.hell ul.referenzen li h2,
section.module.hell ul.referenzen li h3{background:var(--hell);color:var(--dunkel);}

section.module.medium{background:var(--medium);color:var(--weiss);}
section.module.medium article.post,
section.module.medium ul.news li{background:var(--trans-dunkel-2);}
section.module.medium h1,
section.module.medium h2,
section.module.medium h3,
section.module.medium h4,
section.module.medium b,
section.module.medium strong{background:transparent;color:inherit;}
section.module.medium ul.news li,
section.module.medium article.post h2,
section.module.medium article.post h3{border-color: var(--medium);color:var(--weiss) }
section.module.medium ul.news li a,
section.module.medium a:not(a.button){color:var(--weiss)}
section.module.medium ul.news li a:hover h3,
section.module.medium article.post a:hover h3{color:var(--vibrant)}
section.module.medium blockquote{background:var(--trans-dunkel-2)}
section.module.medium ul.vergleiche li{background:var(--trans-dunkel-2);}
section.module.medium div.wpcf7 label,
section.module.medium div.wpcf7 strong{color:var(--weiss)}

section.module.dunkel{background:var(--dunkel);color:var(--weiss);}
section.module.dunkel article.post,
section.module.dunkel ul.news li{background:var(--trans-dunkel-2);}
section.module.dunkel h1,
section.module.dunkel h2,
section.module.dunkel h3,
section.module.dunkel h4,
section.module.dunkel b,
section.module.dunkel strong{background:transparent;color:inherit;}
section.module.dunkel ul.news li,
section.module.dunkel article.post h2,
section.module.dunkel article.post h3{border-color: var(--dunkel);color:var(--weiss) }
section.module.dunkel ul.news li a,
section.module.dunkel a:not(a.button){color:var(--weiss)}
section.module.dunkel ul.news li a:hover h3,
section.module.dunkel article.post a:hover h3{color:var(--vibrant)}
section.module.dunkel blockquote{background:var(--trans-dunkel-2)}
section.module.dunkel ul.vergleiche li{background:var(--trans-dunkel-2);}
section.module.dunkel div.wpcf7 label,
section.module.dunkel div.wpcf7 strong{color:var(--weiss)}



/*  Wrapsplits */

section.back article{isolation:isolate;position:relative;}
section.back article .backy{background-position: 50% 0; background-repeat: no-repeat;background-size: cover;opacity:0.1;filter:grayscale(100%);position:absolute;inset:0;z-index:-1}

.wrapsplits {display:block;margin-inline:auto;padding:0;position:relative;text-align:center;max-width:var(--mwidth);}
.big .wrapsplits {max-width:var(--bigwidth);}
.bigger .wrapsplits {max-width:var(--biggerwidth);}
.full .wrapsplits {max-width:100%;}
.wrapsplits .splits{display:block;padding:1em;position:relative;text-align:center;}

.wrapsplits .splits.bild .innerbildsplits{background-color:transparent;background-position: 50% 50%; background-repeat: no-repeat;background-size: cover;margin-inline:auto;aspect-ratio:4.5/3;width:100%;max-width:100%;}


.wrapsplits .splits.bild h2{color:var(--weiss);margin:25px auto;text-align:center;font-weight:700;}
.wrapsplits .innertextsplits{display:block;margin-inline:auto;padding:0;max-width:70ch;text-align:left;}
.wrapsplits .innertextsplits h1,.wrapsplits .innertextsplits h2,.wrapsplits .innertextsplits  h3{margin:1em 0;font-weight:700;text-align:left;}
.wrapsplits .innertextsplits p{margin: 1.5em 0;}
.wrapsplits .innertextsplits ul{}

.grafik .wrapsplits .splits.bild{min-height:1px;padding-top:2em;}

.grafik.rund .wrapsplits .splits.bild .innerbildsplits {border-radius:50%;aspect-ratio:1;}
.grafik.rund .wrapsplits .splits.bild img.portrait{border-radius:50%;object-fit:cover;}

.bildsplit article.wrap-inner-section{isolation:isolate;position:relative;}
.bildsplit .iicon{background-position: 50% 100%; background-repeat: no-repeat;background-size:67% auto;opacity:0.1;position:absolute;inset:0;z-index:-1}
.bildsplit.klein .iicon{background-size:50% auto;}
.bildsplit.klein h2{font-size:var(--step-2);}
.bildsplit h4,.bildsplit .h4{font-size:var(--step-0);text-align:left;margin:2em 0 1em 0;max-width:150ch;}
.bildsplit p{hyphens:auto;margin:1em 0;}
.bildsplit img.portrait{aspect-ratio:1;border-radius:50%;display:block;margin:1em auto;object-fit:cover;width:100%;shape-outside: circle(50%);}


/* Kommentare */

#comments h3{margin:50px auto;}
#comments h3 em{color:var(--dunkel);font-size:var(--step-1);}

.commentsblock{border:none;margin:50px 0;padding:0;hyphens:auto;}
.commentsblock form{border:none;margin:0;}
.commentsblock fieldset{border:none;margin:0;padding:0}
.commentsblock label,.commentsblock select,.commentsblock input[type=checkbox],.commentsblock input[type=radio],.commentsblock input[type=button],.commentsblock input[type=submit]{cursor:pointer}
.commentsblock label{clear:left;display:block;font-weight:400;margin:0;padding:0}
.commentsblock input,.commentsblock textarea,.commentsblock input:hover,.commentsblock textarea:hover,.commentsblock select{background:var(--trans-dunkel--1);border:1px solid var(--weiss);color:var(--dunkel);margin:10px 0;padding:10px;width:100%;border-radius:3px;}
.commentsblock input{caret-color:var(--vibrant);}
.commentsblock input:hover,.commentsblock textarea:hover{background:var(--weiss);border:1px solid var(--dunkel);}
.commentsblock input[type=checkbox],.commentsblock input[type=radio]{background:transparent;border:none;color:var(--dunkel);display:inline-block;margin:0 0.2em 0 0;width:1.0em}
.commentsblock textarea{overflow:auto}

ol.commentlist {color:var(--dunkel);margin:0;}
ol.commentlist li.comment{margin:25px 0;padding:0 0 0 60px;z-index:10;}
ol.commentlist li.comment ul{padding:0;}
ol.commentlist li.comment ul ul{padding:0;}
ol.commentlist li:before {position:absolute;left:0;top:28px;}
ol.commentlist li li:before {background-color:var(--hell);color:var(--dunkel);left:-60px;top:25px;}
ol.commentlist li.comment > .innercomment{background:var(--trans-dunkel--1);border-radius:1rem;padding:25px;position:relative;}
ol.commentlist li.comment > .innercomment::after {content: '';position: absolute;display: block;width: 0;z-index: 1;
    border-style: solid; border-color: transparent var(--trans-dunkel--1); border-width: 20px 20px 20px 0; top: 45px; left: -20px; margin-top: -20px;}
ol.commentlist li.comment div.vcard cite.fn { font-style:normal; }
ol.commentlist li.comment div.comment-meta {font-size:var(--step--1);text-align:center;}
ol.commentlist li.comment div.comment-meta a {  }
ol.commentlist li.comment p { margin:25px 0; }
ol.commentlist li.comment div.reply {text-align:center;}
ol.commentlist li.comment ul.children {list-style:none; margin:1rem 0;}
ol.commentlist li.comment ul.children li {list-style:none;padding:0;}
ol.commentlist li.comment ul.children li.depth-2 {padding:0; }
ol.commentlist li.comment ul.children li.depth-3 {  }
ol.commentlist li.comment ul.children li.depth-4 {  }
ol.commentlist li.comment.author-admin,
ol.commentlist li.comment.bypostauthor > .innercomment {background:var(--hell);z-index:-1}
ol.commentlist li.comment.bypostauthor > .innercomment::after {border-color: transparent var(--hell);}
ol.commentlist li.pingback > .innercomment{background:#ddd;padding:25px;}

/*  Formulare */

div.wpcf7 form{border:none;margin:35px auto;padding:0;text-align:left;position:relative;}
div.wpcf7 fieldset{border:none;color:#000;clear:both;margin:0;padding:0}
div.wpcf7 label{font-weight:400;margin:0;padding:0}
div.wpcf7 input,div.wpcf7 textarea,div.wpcf7 select{background:var(--hell);border:1px solid var(--trans-dunkel-3);color:var(--schwarz);margin:5px 0 10px 0;padding:0.8rem;width:100%;box-sizing:border-box;box-shadow:0 0 1px #666;}
.hell div.wpcf7 input,.hell div.wpcf7 textarea,.hell div.wpcf7 select{background:var(--weiss);}
div.wpcf7 input{caret-color:var(--vibrant);}
div.wpcf7 select{max-width:400px;}
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.wpcf7-not-valid,
select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.wpcf7-not-valid{border-color:var(--warning) !important;}
.wpcf7-not-valid-tip{display:inline-block;margin:-20px 0 5px 0;}

div.wpcf7 textarea{height:250px;overflow:auto}
div.wpcf7 .upload input{background:var(--weiss);color:var(--dunkel);margin:5px 5px 0 0;padding:5px;width:70%;}
div.wpcf7 input:hover,div.wpcf7 textarea:hover,div.wpcf7 select:hover{background:var(--weiss);color:var(--dunkel);box-shadow:none;}
div.wpcf7 input[type=checkbox],div.wpcf7 input[type=radio]{background:transparent;border:none;color:var(--dunkel);margin:0 5px 0 10px;padding:0;width:1.0rem;}
div.wpcf7 input::placeholder { color: var(--trans-dunkel-3); opacity:1;font-size:var(--step--1); }
div.wpcf7 input:-ms-input-placeholder { color: var(--trans-dunkel-3);font-size:var(--step--1); }
div.wpcf7 input::-ms-input-placeholder { color: var(--trans-dunkel-3);font-size:var(--step--1); }

div.wpcf7{display:block;margin:0;}
span.wpcf7-list-item {margin:0;}
div.wpcf7 p{margin:15px 0 5px 0;}

.wpcf7 form .wpcf7-response-output{vertical-align:middle;}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
    color: var(--weiss) !important;
    background: var(--warning) !important;
    border: none !important;
    padding:25px !important;
}
.wpcf7 form.sent .wpcf7-response-output {background: var(--success) !important;color: var(--weiss) !important; }



div.wpcf7 input[type=submit],
.commentsblock input[type=submit],
.commentsblock button[type=submit],.commentsblock input:hover[type=submit],.commentsblock button:hover[type=submit]{background:var(--vibrant);border:1px solid var(--vibrant);color:var(--on-vibrant);clear:both;display:block;font-size:var(--step-0);font-weight:700;letter-spacing:3px;margin:25px 0;padding:var(--but-pad);text-align:center;text-decoration:none;width:auto;border-radius:0.5rem;transition:all 0.3s ease-in-out;}
div.wpcf7 input[type=submit]:hover,
.commentsblock input:hover[type=submit],
.commentsblock button:hover[type=submit]{background:var(--vibrant-hov);border:1px solid var(--vibrant-hov);color:var(--on-vibrant-hov);scale:1.1;}

/* Demo-Kontaktform */

.contact-form {
         display:grid;
         gap:1em;
         }

div.wpcf7 .contact-form p,
div.wpcf7 .contact-form input,
div.wpcf7 .contact-form textarea,
div.wpcf7 .contact-form select{margin:0;}

p.form-group {
         display:grid;
         gap:0.5em;
         }

p.form-group-full-width {
          grid-column: 1 / -1;
         }

@media (min-width: 35em) {

         .contact-form {
          grid-template-columns: 1fr 1fr;
         }

}

#simple-contact-form-wrap{}

#simple-contact-form form { }
#simple-contact-form .scf-row {display:block;margin:0;padding:10px;}
#simple-contact-form .scf-row input {background:var(--weiss);border:1px solid var(--trans-dunkel-2);caret-color:var(--vibrant);color:var(--dunkel);margin:0;padding:0.8rem;width:100%;box-sizing:border-box;box-shadow:2px 2px 5px rgba(0,0,0,0.1);}
#simple-contact-form .scf-row label {font-weight:400;margin:0;padding:0}
#simple-contact-form .scf-row textarea#scf_message {border:1px solid var(--trans-dunkel-2);display:block;height:200px;padding:0.8rem;width:100%;overflow:auto;box-shadow:2px 2px 5px rgba(0,0,0,0.1);}

#simple-contact-form .scf-row input:hover,
#simple-contact-form .scf-row textarea#scf_message:hover{box-shadow:0 0 5px rgba(0,0,0,0.1);}

div.scf-submit input#scf-button{background:var(--vibrant);border:1px solid var(--vibrant);color:var(--on-vibrant);clear:both;display:inline-block;font-size:var(--step-0);font-weight:700;letter-spacing:3px;margin:25px 0;padding:var(--but-pad);text-align:center;text-decoration:none;width:auto;border-radius:1rem;transition:all 0.3s ease-in-out;}
div.scf-submit input#scf-button:hover{background:var(--vibrant-hov);border:1px solid var(--vibrant-hov);color:var(--on-vibrant-hov);scale:1.1;}

#scf_success pre { white-space: pre-wrap; }
p.scf_error, p.scf_spam { color: var(--warning); }
p.scf_success { color: var(--success) }
.scf-website3dhhsy3 { display: none; }




/* ************* */
/* Shortcode-CSS */
/* ************* */

a.button {background:var(--vibrant);border:1px solid var(--vibrant);color:var(--on-vibrant);display:inline-block;font-family:var(--font-secondary);font-weight:700;letter-spacing:2px;margin:20px auto;padding:var(--but-pad);position:relative;text-align:center;text-decoration:none;transition:scale .9s;border-radius:0.5rem;vertical-align:middle;}
a.button::after{content:'';margin:0 0 0 8px;font-size:var(--step-0);text-decoration:none;transition:transform 0.3s;}
a.button:hover{scale:1.05;transition:scale 0.3s;}
a.button:hover::after{transform: translateX(5px);}
a.button.center,#topsegment a.button{display:block;max-width:36ch}

.dunkel a.button {background:var(--medium);border:1px solid var(--medium);color:var(--weiss);}


.phone.notfall{background:var(--vibrant);border:1px solid var(--vibrant);color:var(--on-vibrant);display:inline-block;font-family:var(--font-secondary);font-size:var(--step-0);font-weight:700;margin:20px auto;padding:var(--but-pad);position:relative;text-align:center;text-decoration:none;transition:scale .9s;border-radius:0.5rem;vertical-align:middle;}
.phone.notfall:hover{scale:1.05;transition:scale 0.3s;}
.phone.notfall a{color:var(--weiss);display:block;font-size:var(--step-1);}
.phone.notfall .text{display:block;}

.share{clear:both;display:block;margin:15px auto;text-align:center;width:100%;}
.share a,.share a:hover {background:transparent;color:var(--hell);border-radius:50%;display:inline-block;font-size:2rem;line-height:100%;margin:5px 15px 5px 0;padding:5px;text-align:center;text-decoration:none;transition:transform .3s, color .3s, background .3s;}
.share a:hover,#footer .share a:hover{color:var(--vibrant)}
.share a span,.share a:hover span{display:none;}
.share a::before,.share a:hover::before{margin:0;padding:0;}

#footer .share a,#footer .share a:hover {display:inline-block;}

.h-review{background:var(--trans-hell-8);color:var(--dunkel);border-radius:1rem;display:block;text-align:center;margin:50px auto;padding:1.5em;position:relative;display:grid;place-items:center;}
.h-review h3{margin:10px auto;text-align:center;}
.h-review p{margin:10px auto;}
.h-review span{color:var(--vibrant);font-size:var(--step-3);}
.h-review img{border-radius:50%;display:block;margin:0 auto 10px auto;text-align:center;height:110px;width:110px;}

.symbol{display:block;margin:0 auto;text-align:center;font-size:var(--step-3)}
.symbol.inline{display:inline-block;vertical-align:middle;}
.symbol.links,.symbol.left{float:left;margin:0 25px 0 0;}
.symbol.rechts,.symbol.right{float:right;margin:0 0 0 25px;}
.symbol.size-1:before{font-size:var(--step-1)}
.symbol.size-2:before{font-size:var(--step-2)}
.symbol.size-3:before{font-size:var(--step-3)}
.symbol.size-4:before{font-size:var(--step-4)}
.symbol.size-5:before{font-size:var(--step-5)}
.symbol.size-6:before{font-size:var(--step-6)}

.gsymbole{margin:50px auto;text-align:center;  display: grid;  grid-gap: var(--gap);  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));}
.gsymbole .gsymbole-tab{background:rgba(255,255,255,0.5);border:none;display:block;height:auto;margin:25px auto;padding:25px;width:100%;transition: all 0.3s;}
.gsymbole .gsymbole-tab:hover{box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);}
.gsymbole .gsymbole-tab a{color:var(--dunkel);display:block;height:100%;text-decoration:none;}
.gsymbole .gsymbole-tab a:hover h3{color:var(--dunkel);}
.gsymbole .gsymbole-tab h3{line-height:1.25;margin:10px auto;text-align:center;}
.gsymbole .gsymbole-tab p{margin:0 auto;text-align:left;}
.gsymbole .gsymbole-tab p:empty{margin:0}
.gsymbole .gsymbole-tab .bild, .symbol .bild,
.gsymbole .gsymbole-tab.hell .bild, .symbol.hell .bild{background:var(--vibrant);border:15px solid var(--vibrant);margin:0 auto;text-align:center;height:100px;width:100px;border-radius:50%;transition: scale 0.3s;}
.gsymbole .gsymbole-tab.dunkel .bild, .symbol.dunkel .bild{background:var(--dunkel);border:15px solid var(--dunkel);}

.gsymbole .gsymbole-tab .symbol::before,
.gsymbole .gsymbole-tab.hell .symbol::before{background:var(--vibrant);border:15px solid var(--vibrant);color:#fff;margin:10px auto;padding:5px;text-align:center;height:100px;width:100px;border-radius:50%;transition: scale 0.3s;}

.gsymbole .gsymbole-tab .bild:hover,
.gsymbole .gsymbole-tab .symbol:hover::before,
.symbol .bild:hover{scale:1.05;}

.mehrwertbox{clear:both;display:block;margin:50px auto;position:relative;text-align:center;}
.mehrwertbox .mehrwert{display:inline-block;font-size:var(--step-1);margin:8px;vertical-align:middle;}
.mehrwertbox a{background:var(--trans-dunkel-1);color:var(--schwarz);display:grid;place-items:center;line-height:1;padding:5px 10px;text-decoration:none;aspect-ratio:1;transition: color 0.3s;}
.mehrwertbox a:hover{color:var(--dunkel);}
.mehrwertbox span{display:none}

#content .gsymbole .gsymbole-tab.medium .bild{background:var(--medium);border-color:var(--medium);}
#content .gsymbole .gsymbole-tab a:hover .bild{animation: pulse-red 2s infinite;}

aside.kundenstimmenwrapper {margin:50px auto;padding:1rem;display:grid;grid-gap:3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28ch), 1fr));}
aside.kundenstimmenwrapper > *{display: flex;flex-direction: column;margin:0 auto; padding:1.5em;justify-content: space-between;height:100%;font-size:var(--step--1);}
aside.kundenstimmenwrapper p.e-content,aside.kundenstimmenwrapper p em{text-align:left;font-size:var(--step--1);}

/* FAQ - Boxen mit ausklappbaren Inhalten */

.accordion {background-color: var(--hell); color: var(--dunkel);cursor: pointer;border-radius:1rem;margin:5px 0;padding:1rem 1.5rem; width: 100%;border: none; text-align: left; outline-color: transparent;font-size:var(--step-1);transition: 0.5s;display:flex;align-items:center;justify-content:space-between;}
.active, .accordion:hover {background-color: var(--vibrant);color: var(--hell);}
.accordion::after {content: '\002B';color:var(--dunkel);font-weight: bold;transition:rotate 0.5s;}
.accordion:hover::after {color: var(--hell);}
.active::after {color: var(--hell);transform:rotate(45deg)}
.panel {max-height: 0;overflow: hidden;transition: max-height 0.5s ease-out;}
.panel .innerpanel{background-color: var(--hell);border-radius:1rem;color:var(--dunkel);display:block;margin:1rem;padding:2rem;}

.klickmichan a,.klickmichan a:hover{background:var(--vibrant);color:var(--on-vibrant);border:1px solid var(--vibrant);display:block;font-size:var(--step-0);font-weight:700;height:160px;width:160px;line-height:1.25;text-align:center;margin:50px auto;padding:15px;position:relative;transition:all 0.5s ease;border-radius:50%;transform: scale(1);animation: pulse-grau 2s infinite;display: flex;justify-content: center;align-items: center;}
.klickmichan a:hover{background:var(--vibrant-hov);border-color:var(--vibrant-hov);color:var(--on-vibrant-hov);animation: pulse-grau 2s infinite;}
.klickmichan a::before{display:block;margin:0 auto;font-size:var(--step-3);}

@keyframes pulse-grau {0% {transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);}
                      70% {transform: scale(1); box-shadow: 0 0 0 10px rgba(0,0,0, 0);}
                      100% {transform: scale(1);box-shadow: 0 0 0 0 rgba(0,0,0, 0);}
                      }

@media screen and (min-width: 60rem) {
.klickmichan{margin:0;padding:15px;position:fixed;right:10px;top:25%;z-index:5000}
}

/*  Effekte */

.loader{border: 10px solid var(--vibrant);display:grid;place-items:center;margin:25px auto;height:150px;width:150px; border-radius:50%;border-bottom:10px solid var(--hell);animation: spin linear 3s infinite;transform-origin: center;}
@keyframes spin {
  0% { rotate:0; }
  100% { rotate: 360deg; }
}

.rundlich{border-radius:50%;animation: kontraste linear 10s infinite;transform-origin: center;filter: grayscale(0);overflow:hidden;}
@keyframes kontraste{
0%, 100% {}
50% {}
}

/* https://bennettfeely.com/clippy/ */
.clip-rombus{clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}
.clip-pfeil-links,.clip-pfeil-rechts{clip-path: polygon(0% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%);}  /* Pfeil nach unten fuer Mobile */
.clip-up{clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0 100%);}
.clip-kreis{clip-path: circle(50% at 50% 50%);}
.clip-stern{clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
.clip-parallelogram-r{clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);}
.clip-parallelogram-l{clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);}
.clip-polygon{clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);}


.clippara{animation: clippara 6s infinite;transition: animation 0.3s;}
@keyframes clippara{
0%, 100% {clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%)}
50% {clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%)}
}


.coloranimation{background-image: var(--gradient);background-size:500%; animation: coloranimation 5s infinite alternate}

.text-mit-bg{font-size:var(--step-6);font-weight:800;letter-spacing:4px;
 background-image: var(--gradient); -webkit-background-clip: text; background-clip: text; color:transparent; background-size:300%;
 animation: coloranimation 5s infinite alternate; position:relative; z-index:1;
}
@keyframes coloranimation{
0% {background-position: left top;}
100% {background-position: right bottom;}
}

.wraptextbox{display:flex;flex-wrap:wrap;gap:var(--gap);margin:50px auto;}
.wraptextbox > *{flex:1 1 var(--max);}
.textbox{border:1px solid #ddd;display:block;height:100%;width:100%;margin-inline:auto;padding:1rem 1.5rem;overflow:hidden;position:relative;isolation:isolate;}

.textbox img {display:block;margin:0;position: absolute;left: 0; top: 0; width: 100%; height: 100%; object-fit:cover;z-index:-1;}
.textbox.backdrop::before{content:'';position:absolute;inset:0;background:blue;mix-blend-mode:multiply;}

.textbox2{display:grid;grid-gap:3em;grid-template-columns:2fr 1fr;place-items:center;}
.textbox2 > *{}

ul.fortschritte{background:var(--dunkel);color:var(--weiss);margin:50px auto;padding:0;}
ul.fortschritte li{display:block;list-style:none;margin:0;padding:15px;position:relative;width:100%;height:500px;min-height:50vh;z-index:1;display:grid;place-items:center;}
ul.fortschritte li::before{content:'';position:absolute;top:0;left:0;bottom:0;width:10px;transform:scaleY(0); transform-origin:bottom;transition: transform 1s ease-in;z-index:10}
ul.fortschritte li::after{content:'';position:absolute;top:0;left:0;bottom:0;width:10px;background:var(--trans-hell-2);z-index:9;}
ul.fortschritte li.go::before,.nojs ul.fortschritte li::before{background:var(--vibrant);transform:scaleY(1);transform-origin:top;transition-delay: 2s;}

/* Texte auf 2 / 4 Zeilen begrenzen */

ul.news li h2,
article.post h2,
.mytext h3{display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow:hidden;}
ul.news li p.txt,
article.post p.txt,
.mytext p:not(.date,.myref-excerpt){display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient: vertical;overflow:hidden;}

.wrap-bilder-effekte{background-color:transparent;border-radius:9px;display:block;height:0;margin:50px auto;padding:0 0 56.5% 0;overflow:hidden;position:relative;}

.wrap-bilder-effekte > .bilder-effekte{background-position:bottom center;background-size:cover; background-attachment:fixed;height:100%;width:100%;position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;}

.wrap-bilder-effekte.go > .bilder-effekte.effekt1,.nojs .wrap-bilder-effekte > .bilder-effekte.effekt1 {-webkit-animation: koslices1 0.5s ease-in-out forwards; animation: koslices1 0.5s ease-in-out forwards;}
.wrap-bilder-effekte.go > .bilder-effekte.effekt2,.nojs .wrap-bilder-effekte > .bilder-effekte.effekt2 {-webkit-animation: koslices2 0.5s ease-in-out forwards; animation: koslices2 0.5s ease-in-out forwards;}
.wrap-bilder-effekte.go > .bilder-effekte.effekt3,.nojs .wrap-bilder-effekte > .bilder-effekte.effekt3 {-webkit-animation: koslices3 0.5s ease-in-out forwards; animation: koslices3 0.5s ease-in-out forwards;}
.wrap-bilder-effekte.go > .bilder-effekte.effekt4,.nojs .wrap-bilder-effekte > .bilder-effekte.effekt4 {-webkit-animation: koslices4 0.5s ease-in-out forwards; animation: koslices4 0.5s ease-in-out forwards;}
.wrap-bilder-effekte.go > .bilder-effekte.effekt5,.nojs .wrap-bilder-effekte > .bilder-effekte.effekt5 {-webkit-animation: koslices5 0.5s ease-in-out forwards; animation: koslices5 0.5s ease-in-out forwards;}

@-webkit-keyframes koslices1{
0%  {opacity:0;transform:translate(0, -100%);}
100%{opacity:1;transform:translate(0, 0);}
}
@keyframes koslices1{
0%  {opacity:0;transform:translate(0, -100%);}
100%{opacity:1;transform:translate(0, 0);}
}

@-webkit-keyframes koslices2{
0%  {opacity:0;transform:scale(0) rotate(25deg);}
100%{opacity:1;transform:scale(1) rotate(0deg);}
}
@keyframes koslices2{
0%  {opacity:0;transform:scale(0) rotate(25deg);}
100%{opacity:1;transform:scale(1) rotate(0deg);}
}

@-webkit-keyframes koslices3{
0%  {opacity:0;transform:translate(0, -100%) scale(0) rotate(-35deg);}
100%{opacity:1;transform:translate(0, 0) scale(1) rotate(0deg);}
}
@keyframes koslices3{
0%  {opacity:0;transform:translate(0, -100%) scale(0) rotate(-35deg);}
100%{opacity:1;transform:translate(0, 0) scale(1) rotate(0deg);}
}

@-webkit-keyframes koslices4{
0%  {opacity:0;filter: blur(10px);}
100%{opacity:1;filter: blur(0);}
}
@keyframes koslices4{
0%  {opacity:0;filter: blur(10px);}
100%{opacity:1;filter: blur(0);}
}

@-webkit-keyframes koslices5{
0%  {opacity:0;transform:scale(0) rotate(45deg) translate(0, -100%);}
100%{opacity:1;transform:scale(1) rotate(0deg) translate(0, 0);}
}
@keyframes koslices5{
0%  {opacity:0;transform:scale(0) rotate(45deg) translate(0, -100%);}
100%{opacity:1;transform:scale(1) rotate(0deg) translate(0, 0);}
}

.slideup{animation: sslideUp 0.9s ease both}

@-webkit-keyframes sslideUp{0%{opacity:0,transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}
@keyframes sslideUp{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}

.slidedown{animation: sslideDown 0.9s ease 0.3s both}

@-webkit-keyframes sslideDown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}
@keyframes sslideDown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}



@media screen and (min-width: 40rem) {

/* News */

ul.news:not(.grid) li{clear:both;margin:75px auto;padding:1rem 2rem;position:relative;max-width:var(--mwidth);}
ul.news:not(.grid) li a{display:flex;gap:2rem;align-items: center;padding:0;}
ul.news:not(.grid) li .thumbnail{flex-shrink: 0; width:280px;height:auto;margin:0;padding:0;border-radius:5px;}
ul.news:not(.grid) li .text{flex-grow: 1;}
ul.news:not(.grid) li h2,
ul.news:not(.grid) li h3{margin:10px 0;}
ul.news:not(.grid) li .thumbnail img{margin:0;}

.inner-post-nav{display:flex;align-items:center;justify-content:space-between;gap:25px;}

}

@media screen and (min-width: 50rem) {

ul.news:not(.grid) li .thumbnail{width:400px;}
ol.commentlist li.comment ul{padding:0 0 0 2rem;}
#footer ul li{text-align:left;}


.bildsplit.klein article {min-height:525px;}

.bildsplit img.portrait{width:50%;}
.bildsplit.klein img.portrait{width:33%;}

.bildsplit.links img.portrait{float:left;margin:2em 2em 1em 0}
.bildsplit.rechts img.portrait{float:right;margin:2em 0 1em 2em}
.bildsplit.rechts.klein img.portrait,.bildsplit.links.klein img.portrait{margin-top:0}

.bildsplit.links .iicon{background-position: 95% 100%; background-size:33% auto;}
.bildsplit.rechts .iicon{background-position: 5% 100%; background-size:33% auto;}

/* .animated.go */

.animated{}

.zoomfadein{opacity:0; scale:0.9;transition: opacity 0.5s linear, scale 0.5s ease-in-out;}
.zoomfadein.go, .nojs .zoomfadein{opacity:1; scale:1;}

.upfadein{opacity:0;transform: translateY(100px);transition: opacity 0.5s linear, transform 0.5s ease-in-out;}
.upfadein.go, .nojs .upfadein{opacity:1;transform: translateY(0);}

.push{opacity:0;transform: translateX(-5rem);transition: opacity 0.5s linear, transform 0.5s ease-in-out;}
.push.go,.nojs .push{opacity:1;transform: translateX(0);}

.textbox{scale:0.9;transition:scale 0.3s ease-in-out;}
.textbox.go,.nojs .textbox{scale:1.0;}

/*
   animation-name: scale-up-center;
   animation-duration: 1s;
   animation-timing-function: linear;
   animation-delay: 0s;
   animation-iteration-count: 0;
   animation-direction: normal;
   animation-fill-mode: none;

   shorthand
   animation: scale-up-center 1s linear 0s 0 normal none;

   Animation-name  Duration Timing-function Delay Iteration-count Fill-mode
*/

.fadeInLeft{fadeInLeft 1s cubic-bezier(0.68, 0, 0.265, 1) 0s 0 both none;}

@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-30px, 0, 0);transform:translate3d(-30px, 0, 0);}
to{opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-30px, 0, 0);transform:translate3d(-30px, 0, 0);}
to{opacity:1;-webkit-transform:none;transform:none;}
}

}

@media all and (min-width: 62.5rem){

body.noslide, body.archive, body.blog{}

#wrapheader{background:var(--trans-hell-8);}
#header{height:110px;padding:0 25px;}

#header .logo{max-height:100px;max-width:300px;margin:0;padding:0;position:relative;top:auto;left:auto;}
#header .logo img{max-height:100px;max-width:300px;}

#fixbox {display:block;background:transparent;position:fixed;right:10px;top:80px;}


/*  Wrapsplits */

.wrapsplits {display:grid;grid-template-columns:50% 50%;padding:0 25px;}
.wrapsplits.rechts {grid-template-columns:50% 50%;}
#topsegment .wrapsplits{}

.wrapsplits .splits{display:flex;align-items: center;justify-content: center;}

.wrapsplits .splits,
.grafik .wrapsplits .innertextsplits,
.grafik .wrapsplits .splits.bild{padding:0;}

.wrapsplits.links .innertextsplits{padding:1.0em 0 1.0em 1.5em;}
.wrapsplits.rechts .innertextsplits{padding:1.0em 1.5em 1.0em 0;}

.wrapsplits.rechts .splits.bild{order:2}
.wrapsplits.rechts .splits.text{order:1;}



/* Referenzen */


article.myref{margin:100px auto;padding:0;}
article.myref .mythumbnail{transform: perspective(3000px) rotateY(15deg);transition:transform 0.5s ease-in-out;}
article.myref:hover .mythumbnail{transform: perspective(3000px) rotateY(0deg);}

article.myref a {display: flex;align-items: center;}
article.myref a >*{flex:1}
article.myref .date{position:absolute;left:15px;bottom:25px;}
article.myref .mytext{padding:1.5rem;}

.clip-pfeil-links{clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 50%);}
.clip-pfeil-rechts{clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);}

img.alignleft,.alignleft{float:left;margin:10px 50px 10px 0}
img.alignright,.alignright{float:right;margin:10px 0 10px 50px}
img.alignnone,.alignnone{display:block;float:none;text-align:left;margin:25px 0}

#topsegment a.button{margin:35px 0 10px 0;}

section.module.dunkel.verlauf{background:radial-gradient(circle at 66% 50%, rgba(255, 255, 255, 1) 0%, rgba(98, 128, 184, 1) 0%, rgba(0, 54, 103, 1) 50%, rgba(0, 54, 103, 1) 100%);}
section.module.dunkel.verlauf2{background-image:linear-gradient(to right, var(--dunkel), rgba(0, 69, 131, 0.6));}

}




@media all and (min-width: 90rem){

article.myref{margin:100px auto 200px auto;}
article.myref .mythumbnail{transform: perspective(3000px) rotateY(20deg) translateX(75px);}
article.myref:hover .mythumbnail{transform: perspective(3000px) rotateY(0deg)  translateX(75px);}
article.myref .mytext{transform: translateX(-75px);padding:4rem 2rem;}


.wrapsplits.links,
.wrapsplits.rechts{padding:1.5em;}

.wrapsplits.links .innertextsplits{padding:2.5em 0 2.5em 2.5em;}
.wrapsplits.rechts .innertextsplits{padding:2.5em 2.5em 2.5em 0;}

}


/* Slider */

.slider-wrapper{display:block;position:relative;overflow-anchor: none;}
.slider-wrapper a{text-decoration:none;}

ul.thumbs,ul.slides,
ul.thumbs > li,ul.slides > li{list-style:none;margin:0;padding:0;position:relative;overflow:hidden;}
ul.thumbs {display:flex;gap:0.5rem;margin:0.5rem 0;}
ul.thumbs > li{flex:1;aspect-ratio:16/9;}
ul.thumbs > li a img{transition:scale 250ms ease-in-out;object-fit:cover;height:100%;width:100%;}
ul.thumbs > li a:hover img{scale:1.05}

ul.slides {width:100%;aspect-ratio:16/9;background-size:cover;background-repeat:no-repeat;background-position:50% 50%;}
ul.slides > li.image{background-size:cover;background-repeat:no-repeat;background-position:50% 50%;position:absolute;inset:0;aspect-ratio:16/9;width:100%; transform: scale(0,1); transition: transform 0.9s ease-in-out;  transform-origin:left;}
ul.slides > li.image:target{transform: scale(1,1);transform-origin:right; }

ul.slides > li .arrows{font-size:var(--step-5);color:var(--weiss);position:absolute;top:40%;z-index:99;}
ul.slides > li .arrows.arrow-left{left:0}
ul.slides > li .arrows.arrow-right{right:0}

/* Re-Slider */

section.carousel {background:var(--dunkel);display:block;margin:0 auto;position: relative;text-align:center;}
.carousel__inner {display:block;margin:0 auto;position: relative;text-align:center;aspect-ratio:16 / 9;max-width:1920px;max-height:100vh;}
ul.carousel__viewport {margin:0;padding:0;position: absolute;inset:0;display: flex; overflow-x: scroll;  counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory;}
ul.carousel__viewport::-webkit-scrollbar {display: none;}
ul.carousel__viewport{-ms-overflow-style: none;  /* IE and Edge */   scrollbar-width: none;  /* Firefox */ }
li.carousel__slide {list-style:none;margin:0;padding:0;position: relative; flex: 0 0 100%; width: 100%;}

.carousel__prev,.carousel__next{backdrop-filter:blur(2px);background:var(--trans-dunkel-2);color:var(--weiss);cursor:pointer;font-size:var(--step-5);margin:0;padding:0;position:absolute;top:45%;text-decoration:none;transition: color 0.3s ease-in-out, background 0.5s ease-in-out;}
.carousel__prev:hover,.carousel__next:hover{background:var(--trans-hell-8);color:var(--schwarz);}
.carousel__prev{left:0;border-radius:0 1rem 1rem 0;}
.carousel__next{right:0;border-radius:1rem 0 0 1rem;}

.carousel__texte{background:var(--trans-hell-8);color:var(--dunkel);position:relative;padding:1em;z-index:500}
.carousel__texte:empty{background:transparent;}
.carousel__texte h1,.carousel__texte h2,.carousel__texte h3,.carousel__texte p{margin:10px 0;text-align:left;}
.carousel__texte h1,.carousel__texte h2,.carousel__texte h3{font-size:var(--step-2);font-weight:700;}

@media all and (min-width: 55rem){

.carousel__texte{position:absolute;bottom:10%;left:1rem;max-width:65ch;padding:1em;z-index:500}

}
@media all and (min-width: 90rem){

.carousel__texte{bottom:15%;left:1rem;}

}

/* Bildvergleich vorher / nachher */


.img-vergleich-container { display: grid;margin:50px auto;aspect-ratio:16 / 9;position: relative;overflow:hidden;}
.img-vergleich-container img {grid-area: 1 / 1;width:100%;object-fit:cover;opacity:1;transition:opacity 2500ms ease-in-out;}
.img-vergleich-container img#vorher {opacity:1}
.img-vergleich-container img#nachher{opacity:0}
.img-vergleich-container img#vorher:target,
.img-vergleich-container img#nachher:target {opacity:1}

.img-vergleich-container a.btn{background:var(--trans-hell-8);color:var(--schwarz);display:inline-block;padding:0.5em 1em;position:absolute;bottom:0;text-decoration:none;transition:all 300ms ease-in-out;z-index:100}
.img-vergleich-container a.btn.vorher{left:0;}
.img-vergleich-container a.btn.nachher{right:0;}
.img-vergleich-container a.btn:hover,.img-vergleich-container a.btn:focus{background:var(--trans-hell-4);color:var(--weiss);}



/* Tab-Slider mit Bildern
Inspiriert durch https://www.mediaevent.de/tutorial/css-tabs.html */

nav.tabthumbs {display:grid;grid-gap:1px;grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));border-top:1px solid transparent;}
nav.tabthumbs > *{aspect-ratio:16/9;}

.tabbed figure {display: block;clear: both;margin:0;}

.tabbed > input,
.tabbed figure > div { display: none;}

.tabbed figure > div,
.tabbed figure > div > img {aspect-ratio:16/9;width: 100%;}

#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3,
#tab4:checked ~ figure .tab4,
#tab5:checked ~ figure .tab5,
#tab6:checked ~ figure .tab6 {display:block;}

#tab1:checked ~ nav label[for="tab1"],
#tab2:checked ~ nav label[for="tab2"],
#tab3:checked ~ nav label[for="tab3"],
#tab4:checked ~ nav label[for="tab4"],
#tab5:checked ~ nav label[for="tab5"],
#tab6:checked ~ nav label[for="tab6"] {opacity:0.8}

.ko-animate-fading{animation:fading 0.9s}
@keyframes fading{
0%{opacity:0;transform:scaleY(0);transition: transform 250ms ease-in;}
100%{opacity:1;transform:scaleY(1);}
}

/* Bildergalerie */

.wrapgallery-wrapper{display:block;margin:50px 0}
.gallery-wrapper {display:flex;flex-direction:row;flex-wrap:wrap;gap:1.5rem;justify-content:center;align-items:center;margin:50px auto;padding:1rem;}
.gallery-wrapper a {transition:all 0.3s ease-in-out}
.gallery-wrapper a img {height:12rem;width:18rem;object-fit:cover;transition:scale 250ms ease-in-out;vertical-align:bottom;}
.gallery-wrapper.rund a img {height:18rem;border-radius:50%;}

.gallery-wrapper a img:hover{scale:1.05}
.gallery-wrapper:hover > :not(:hover) {filter:grayscale(100%);opacity:0.8}

.gallery-lightboxes .image-lightbox{position:fixed;inset:0;background:var(--trans-dunkel-9);opacity:0;visibility:hidden;padding:1rem;}
.gallery-lightboxes .image-lightbox:target{opacity:1;visibility:visible;z-index:99998}

.gallery-lightboxes .image-lightbox .image-lightbox-wrapper{opacity:0;margin:0;padding:1rem;position:absolute;inset: 0;display:flex;align-items:center;justify-content:center;}
.gallery-lightboxes .image-lightbox:target .image-lightbox-wrapper{opacity:1;}

.gallery-lightboxes .image-lightbox .image-lightbox-wrapper img{border:2px solid #fff;margin:0 auto;max-height:70vh;border-radius:1rem;}

.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close{background:transparent;height:3rem;width:3rem;text-decoration:none;position:absolute;right:1rem;top:1rem;z-index:99999}

.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close::before,
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close::after{content:'';background:var(--weiss);border-radius:2px;height:3px;width:2rem;position:absolute;transform: rotate(45deg);top:1.5rem;}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close::after{transform: rotate(-45deg)}


.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrows{position:absolute;top:47%;background:transparent;color:var(--weiss);font-size:2.5rem;text-decoration:none;}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrow-left{left:15px}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrow-right{right:15px;}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrows::before{cursor:pointer;}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrow-left::before{}
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrow-right::before{}



/* Vorher-Nachher */

aside.wrap-ba{display:grid;width: 100%;aspect-ratio:16/9;overflow: hidden;margin:50px auto; }

aside.wrap-ba > * {grid-column: 1/2;grid-row:1/2;}
aside.wrap-ba img {aspect-ratio:16/9;object-fit:cover;}

aside.wrap-ba #left-side {transform: translateX( -90%);transition: transform 2s;}
aside.wrap-ba:hover #left-side {transform: translateX(0)}

@keyframes translate-left-in-out {
        0%   { transform:translateX(0); }
        100% { transform:translateX(0); }
}


/* BigSlider */

.rslides{background:transparent;height:auto;list-style:none;overflow:hidden;margin:0 auto;padding:0;text-align:center;width:100%;}
.rslides .slide{background:transparent;margin:0;padding:0;position:absolute;display:none;height:100%;width:100%;left:0;top:0;text-align:center;}
.rslides img, .wrapbslider img{display:block;margin:0 auto;text-align:center;height:100%;width:100%;object-fit:cover;}
.rslides.tn img{float:none !important;}
.rslides .slide:first-child{position:relative;display:block;}
.rslides .slide span{background:#fff;display:block;height:100%;width:100%;text-align:center;}

ul.rslides_tabs{display:block;margin:5px 0;padding:0;text-align:right;text-shadow:none;z-index:999;position:absolute;bottom:0;width:100%}
ul.rslides_tabs li{background:transparent;display:inline-block;margin:0;padding:0;list-style:none;padding:0;}
ul.rslides_tabs li a,ul.rslides_tabs li a:hover{background:#000;border:1px solid #000;color:#000;display:block;line-height:1em;margin:0 5px;padding:5px 8px;text-decoration:none;-webkit-border-radius:50%;border-radius:50%;}
ul.rslides_tabs li.rslides_here a,ul.rslides_tabs a:hover{background:#fff;border:1px solid #fff;color:#fff}
ul.rslides_tabs li a:hover{background:#fff;border-color:#fff;color:#fff}

.rslides_nav{z-index:999;}
.rslides_nav.prev,.rslides_nav.next{color:#fff;color:rgba(255,255,255,0.5);cursor:pointer;display:block;font-size:2.4em;margin:0;padding:0;position:absolute;top:45%;vertical-align:middle;z-index:100;}
.rslides_nav.prev{left:0;border-radius:0 9px 9px 0;}
.rslides_nav.next{right:0;border-radius:9px 0 0 9px;}
.rslides_nav.next:before,.rslides_nav.prev:before{margin:0;padding:0;vertical-align:middle;}

ul.rslider,ul.rslider li{list-style:none;margin:0;padding:0;overflow:hidden;width:100%}
.mega ul.rslider,.mega ul.rslider li{aspect-ratio:16/9;}



.wrapbslider{background:var(--medium);clear:both;margin:0;padding:0;position:relative;text-align:center;width:100%;}
.wrapbslider.mega{}

.wrapbslider.mega ul.rslides{}
.wrapbslider ul.rslides li{margin:0 auto;overflow:hidden;width:100%;}

.wrapbslider .elemente{background:rgba(0,0,0, 0.3);color:var(--weiss);display:block;height:auto;margin:0 auto;padding:15px;z-index:99;width:100%;max-width:1920px;}
.wrapbslider .elemente:empty{background:transparent;}

.wrapbslider .elemente .img{margin:0 auto;text-align:center;}
.wrapbslider .elemente .img img{height:auto;width:auto;max-height:100%;max-width:100%;}

.wrapbslider .elemente .text{color:var(--weiss);display:block;font-weight:400;line-height:1.2;margin:0 auto;padding:0;position: relative;text-align:center;width:auto;max-width:100%;}
.wrapbslider .elemente .text.eins,.wrapbslider .elemente .text.eins h1{font-size:var(--step-3);font-family:var(--font-headlines);font-weight:700;line-height:1.1;margin:0 auto;text-wrap: balance;}
.wrapbslider .elemente .text.zwei{font-size:var(--step-1);margin:10px auto;}

.wrapbslider .elemente .text.eins:empty,
.wrapbslider .elemente .text.eins:empty h1,
.wrapbslider .elemente .text.zwei:empty{line-height:0;margin:0;}

.wrapbslider .elemente.big .text{color:#fff;font-weight:700;margin:0 auto;padding:0;text-align: center;}
.wrapbslider .elemente.big .text.eins,.wrapbslider .elemente.big .text.eins h1,.wrapbslider .elemente.big .text.zwei{color:#fff;display:block;}
.wrapbslider .elemente.big .text.eins,.wrapbslider .elemente.big .text.eins h1 {font-size:var(--step-4);font-weight:700;line-height:1.1;margin:0 auto 15px auto;}
.wrapbslider .elemente.big .text.zwei {font-size:var(--step-1);font-weight:400;margin:15px auto 0 auto;}


@media screen and (min-width: 800px) {


.wrapbslider .elemente {position:absolute;bottom: 25px;  left: 25px;max-width:40%; }
.wrapbslider.mega .elemente {bottom: 50px;}
.wrapbslider .elemente.big .text.eins,.wrapbslider .elemente.big .text.eins h1 {line-height:1;padding:0 25px}

}