/*
Theme Name: Maler Schortens 2026
Theme URI: https://maler-schortens.de/
Description: Malerbetrieb in Schortens
Version: 1.00
Author: Klaus Oppermann
Author URI: https://www.klausoppermann.de
Text Domain: maler-schortens
*/

/* montserrat-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v25-latin-regular.woff2') format('woff2'),
       url('fonts/montserrat-v25-latin-regular.woff') format('woff');
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v25-latin-700.woff2') format('woff2'),
       url('fonts/montserrat-v25-latin-700.woff') format('woff');
}

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/lato-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Lato Light'), local('Lato-Light'),
       url('fonts/lato-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v15-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('fonts/lato-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v15-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
       url('fonts/lato-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v15-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

/* https://mycolor.space/?hex=%23003667&sub=1 */

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

  --weiss: #fff; /* weiss */
  --hell: #EBEEEE;  /* hellgrau */
  --medium: #465bb0;   /* blau */
  --dunkel: #113988;    /* dunkelblau */
  --dunkel-grau: #111;
  --schwarz: #000; /* schwarz */

  --vibrant: #b74809; /* rot  */
  --on-vibrant: #fff;    /* weiss */
  --vibrant-hov: #b74809; /* rot */
  --on-vibrant-hov: #fff;  /*  weiss */
  
  

  --warning: #b74809;   /* rot */
  --success: #007a52;  /* gruen */
  --hallo: #fa86c9; /* pink */

  --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-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-7: rgba(255,255,255,0.7);
  --trans-hell-8: rgba(255,255,255,0.8);
  --trans-hell-9: rgba(255,255,255,0.9);

/* @link https://utopia.fyi/type/calculator?c=320,16,1.067,1240,18,1.2,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--2: clamp(0.78rem, calc(0.91rem + -0.17vw), 0.88rem);
  --step--1: clamp(1rem, calc(0.95rem + 0.1vw), 1rem);
  --step-0: clamp(1rem, calc(0.96rem + 0.30vw), 1.05rem);
  --step-1: clamp(1.07rem, calc(0.97rem + 0.49vw), 1.3rem);
  --step-2: clamp(1.14rem, calc(0.97rem + 0.84vw), 1.4rem);
  --step-3: clamp(1.22rem, calc(0.96rem + 1.27vw), 1.6rem);
  --step-4: clamp(1.30rem, calc(0.94rem + 1.80vw), 2.0rem);
  --step-5: clamp(1.38rem, calc(0.89rem + 2.46vw), 2.3rem);
  --step-6: clamp(1.48rem, calc(0.82rem + 3.28vw), 3.0rem);

  --but-pad: 1em 1.5em;
  --min: 28ch;
  --gap: 1.5rem;

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

  --bhintergrund: linear-gradient(
                  25deg,
                  var(--medium),
                  var(--weiss),
                  var(--medium)
                );
  --drehung: -2deg;

  --gradient: linear-gradient(
                  -45deg,
                  var(--hallo),
                  var(--vibrant),
                  var(--dunkel)
                );
                
  --font-text: 'Montserrat',Arial, Verdana, Helvetica,sans-serif ;
  --font-headlines: 'Lato',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:125px;box-sizing:border-box;}
body{background:var(--body-bg);color:var(--dunkel-grau);
font-family:var(--font-text);font-size:var(--step-0);font-weight:400;line-height:1.7;
margin:0;padding:0;text-align:center;position:relative;overflow-x: hidden;overflow-y:scroll;}

a,a:hover,a:focus{color:var(--dunkel);text-decoration:underline;}
a:hover,a:focus{color:var(--medium);text-decoration:none}
a.break{word-break: break-all; overflow-wrap: break-word;hyphens:auto;}
a[href$=".pdf"]{display:flex;align-items:center;justify-content:space-between;background:var(--medium);color:var(--weiss);font-size:var(--step-0);font-weight:700;margin:1.5rem auto 4.5rem auto;padding:8px;text-decoration:none;-webkit-box-decoration-break: clone;box-decoration-break: clone;transition:color 0.5s, background 0.5s;}
a[href$=".pdf"]:hover{color:var(--hell);background:var(--dunkel);}
a[href$=".pdf"]::after{font-size:var(--step-5)}
a.icon-mobile{text-decoration:none;cursor:text;}

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

/* blockquote{background:var(--hell);border:1px solid var(--vibrant);border-radius:1vw;display:grid;place-items:center;font-size:var(--step-0);margin:3em auto;padding:2.5em;position: relative;isolation:isolate;}
blockquote h2, blockquote h3{margin:10px auto;padding:0;text-align:center;}
blockquote p{margin-inline:auto;} */

figure.quote{background:var(--hell);border:1px solid var(--hell);border-radius:0.2em;color:var(--dunkel);display:grid;place-items:center;font-family:var(--font-headlines);font-size:var(--step-1);margin:3rem auto;opacity:0;padding:2.5rem 1.5rem;position: relative;scale:0.8;transition:transform 0.5s, opacity 0.5s;max-width:var(--mwidth);}
figure.quote figcaption{color:var(--dunkel);font-size:var(--step--1);font-style:italic;margin:10px auto;}
figure.quote.go,.nojs figure.quote{opacity:1;scale:1;transition:scale 0.9s, opacity 0.9s;}
blockquote{}
blockquote.go{}
blockquote h2, blockquote h3{color:var(--dunkel);font-size:var(--step-3);margin:10px auto;padding:0;text-align:center;}
blockquote p,blockquote strong{color:var(--dunkel);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(--dunkel);font-family:var(--font-headlines);font-weight:400;line-height:1.3;margin:1.5em auto 1em auto;text-align:center;text-wrap: balance;hyphens: auto;  hyphenate-limit-chars: auto 3 4;}

h1,.h1{font-size:var(--step-5);letter-spacing:1px;margin:1.5em auto;max-width:var(--bigwidth);font-weight:700}
h1 b{display:inline-block;font-size:var(--step-5);letter-spacing:1px;font-style:normal;}
h1 span{display:block;font-size:var(--step-2);margin:0.5em auto 0 auto;}

h2,.h2{font-size:var(--step-4)}
h3,.h3{font-size:var(--step-3)}
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(--dunkel);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;hyphens: auto; hyphenate-limit-chars: auto 3 4;text-wrap: pretty;}
p.frame{margin:0;}
p:empty{margin:0;padding:0;}

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



ol {display: block;
   list-style-type: decimal;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
   padding-left: 40px;
}
ol li{ list-style-type: decimal;margin:0;padding:12px 25px; position:relative;}

ul{margin:25px;}
ul li,ul.postinfos li {list-style-type: square;}
ul li{font-weight:400;padding:5px;position:relative;}
ul ul,ul ul ul{margin:0 2.5rem;}
ul ul li,ul ul ul li{background-image:none;font-weight:400;list-style-type: circle;padding:5px;}

ul.bold li{font-weight:700;}
ul.bold ul li,ul.bold ul ul li{font-weight:400;}

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

ul p:first-child, 
ol p:first-child{margin:0;}

#content li, #footer li{hyphens: auto; hyphenate-limit-chars: auto 3 4;text-wrap: pretty;}

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{color:var(--dunkel);font-weight:700;}
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;}
#wrapper .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:var(--dunkel);}
#searchform button::before{color:var(--on-vibrant);margin:0;}
#searchform button:hover::before{color:var(--weiss);}

#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;padding:30px 0 0 0;text-align:left;width:100%;z-index:800;box-shadow:0 3px 5px var(--trans-dunkel-4);}
#header{display:flex;align-items:center;justify-content:space-between;height:90px;margin-inline:auto;padding:0 25px;position:relative;max-width:var(--biggerwidth);}

#header .logo{max-height:70px;text-align:left;}
#header .logo img{max-height:70px;max-width:200px;padding:5px;}
#header .logo a,#header .logo a:hover{color:var(--dunkel);}
#header .logo a:hover{filter:grayscale(100%);}
#header .logo .titel{font-size:var(--step-2);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;}

#headerbox{background:var(--dunkel);display:block;height:auto;margin:0 auto;padding:3px 10px;position:absolute;top:0;left:0;text-align:center;width:100%;}
#headerbox .innerheaderbox{color:var(--weiss);font-size:var(--step-0);margin:0 auto;padding:0 25px;max-width:var(--biggerwidth);}
#headerbox .innerheaderbox a{color:var(--weiss);}

#headerbox .phone{background:transparent;font-size:var(--step-0);line-height:100%;margin:0;padding:0;}
#headerbox .phone a,#headerbox .phone a:hover{background-color:transparent;color:var(--weiss);cursor:pointer;}
#headerbox .phone a:before{color:var(--weiss);}


/* 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-0);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: var(--dunkel);}
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:block;font-weight:400;margin:0;padding:5px 10px;position:relative;text-decoration:none;}

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

nav#konavigation ul.sub-menu{margin-left:15px;}

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

nav#konavigation,nav#konavigation.open{border:none;display:block;font-size:var(--step-0);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;margin:0 0.5rem 0 0;padding:5px;text-decoration:none;position:relative;}
nav#konavigation a[aria-current="page"],
nav#konavigation a[aria-current="page"]:hover{color:var(--dunkel);border-color:var(--dunkel);}

nav#konavigation a::before{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--weiss);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(--hell);border-radius:5px;color:var(--dunkel);height:auto;top:100%;left: -100vw;opacity:0;margin:0;padding:5px;position:absolute;width:300px;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{background:var(--hell);left:0;opacity:1;box-shadow: 0px 0px 5px rgba(0,0,0,0.3);}

nav#konavigation ul.sub-menu ul{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;margin:0;padding:5px 10px;border:none;border-radius:5px;transition:background .3s;}
nav#konavigation ul.sub-menu a:hover,
nav#konavigation ul.sub-menu a:focus{background-color:var(--trans-dunkel--1);}
nav#konavigation ul.sub-menu a[aria-current="page"]{text-decoration:underline;}
nav#konavigation ul.sub-menu a::before{display:none;}

nav#konavigation ul.sub-menu ul{background:var(--hell);top:0;margin-left:280px;}

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

}

/*  Main   */

#wrapper{display:block;margin-inline:auto;text-align:left;overflow:hidden;padding:0;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{max-width:var(--bigwidth);}

#wrapper ul, ul.maximal{max-width:70ch;margin:1.5rem auto;}
#wrapper ul li, ul.maximal > li{margin:0 25px;}
ol:not(.commentlist){max-width:70ch;margin:1.5rem auto;}
#wrapper p:not(.cols, .myref-excerpt, .datum,.contact-form p,.image-lightbox-wrapper p, p.txt){margin-inline:auto;max-width:70ch;}

/*  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;margin-inline:auto;position:relative;text-align:center;box-shadow:inset 0 10px 5px var(--trans-dunkel-2);}
#footer .inner {background:transparent;color:var(--weiss);line-height:1.7;margin-inline:auto;padding:25px;text-align:left;max-width:var(--biggerwidth);display: flex; flex-wrap: wrap; justify-content: center;gap:var(--gap);}
#footer .inner > *{flex:0 1 35ch;}

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

#footer ul{margin:1rem auto;font-size:var(--step--1)}
#footer ul li{display:block;margin:0;padding:0;text-align:left;}
#footer ul li a{border:none;color:inherit;display:block;padding:8px 0;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:1rem 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:2rem auto 1rem auto;}

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

#footer .fullbox{clear:both;display:block;font-size:var(--step-0);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;text-align:center;max-width:var(--bigwidth);}
#footer .fullbox ul,#footer .fullbox p{margin:1.5rem auto;}
#footer .fullbox ul li{border:none;display:inline;}
#footer .fullbox ul li+li::before{content:'|';display:inline-block;margin:0 5px 0 0;vertical-align:middle;}
#footer .fullbox ul li a{display:inline-block;padding:5px 10px;vertical-align:middle;}

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

#footer .fullbox.formularbox .fullboxinner {padding:25px;display:grid;grid-gap:3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));}
#footer .fullbox.formularbox p{margin:10px 0;text-align:left;}
#footer div.wpcf7 form{background:transparent;border:none;border-radius:0;margin:0 auto;padding:0;text-align:left;position:relative;}
#footer div.wpcf7 form h2, #footer div.wpcf7 form h3{text-align:left;}
#footer div.wpcf7 input[type=submit]{margin:25px 0 0 0;}
#footer div.wpcf7 textarea{height:120px;}
#footer .tooltipp {margin:0;display:block;text-align:left;}
#footer .tooltipp .tooltipptext {width: 290px;text-align:left;left:0;margin-left: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:15px auto;padding:1rem;text-align:center;}

/* News / Blogartikel */

ul.news, #wrapper ul.news{color:var(--dunkel-grau);display:block;margin-inline:auto;padding:0;max-width:var(--fullwidth);}
ul.news li, #wrapper ul.news li{background:var(--trans-hell-8);display:block;list-style:none;margin:50px 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{padding-bottom:3.2em}
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;background:var(--hell);padding:3px 5px;}

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

ul.split,#wrapper ul.split{margin:2.5rem auto;max-width:var(--fullwidth);}
ul.split li,#wrapper ul.split li{background:var(--weiss);clear:both;margin:3rem auto;padding:0;position:relative;list-style:none;}
ul.split li a{padding:0;text-decoration:none;}
ul.split li h2,
ul.split li h3{font-weight:700; margin:10px 0;}
ul.split li .thumbnail{display:block;margin:0 auto;padding:0;position:relative;width:100%;aspect-ratio:16/9;}
ul.split li .thumbnail img{display:block;object-fit:cover;width:100%;height:100%}
ul.split li .txt{padding:0.5rem 1.5rem;}


.lesetipp .anzeige{display:block;font-size:0.9em;margin:0 0 10px 0;padding:0;line-height:100%;text-align:left;}
.lesetipp h2{font-size:1.3em;margin:0;padding:0;text-align:left;max-width:100%}
.lesetipp p{margin:1rem 0;line-height:1.4em;}
.lesetipp a{color:var(--schwarz);text-decoration:none;display: flex;flex-wrap: wrap;gap:1rem;align-items: center;transition: filter 2s;}
.lesetipp a:hover{filter:grayscale(100%);transition: filter 0.3s;}
.lesetipp a > *{flex-grow: 1;flex-shrink: 1;flex-basis: 280px;}
.lesetipp a .anzeigen{color:var(--dunkel);text-decoration:underline;}

.lesetipp .thumby{display:block;margin:1em auto;padding:0;position:relative;width:100%;aspect-ratio:16/9;}
.lesetipp .thumby img{display:block;object-fit:cover;width:100%;height:100%}


/* News / Blogartikel II */

article.post{background:var(--trans-hell-8);border:none;color:var(--dunkel-grau);display:block;margin:35px auto;padding:25px;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 0 25px 0;}

article.post .thumbnailbox{background:transparent;margin-inline:auto;position:relative;overflow:hidden;border-radius:1rem;}
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: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-grau);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}


ul.childpages{color:var(--dunkel);display:block;margin-inline:auto;padding:0;max-width:var(--fullidth);}
#wrapper ul.childpages{max-width:var(--fullidth);}
ul.childpages li{background:var(hell);border: 1px solid var(--medium);box-shadow:5px 5px 15px 5px rgba(0,0,0,.15);display:block;list-style:none;margin:3.5rem auto;padding:0.5em 1.5rem;position:relative;text-align:center;transition:transform 1s, opacity 2s, box-shadow 1s;transform: translateY(100px);opacity:0;aspect-ratio:auto;width:100%;}
ul.childpages li.go,
.nojs ul.childpages li {transform: translateY(0);opacity:1;}
ul.childpages li:hover{box-shadow:none;}

ul.childpages .text{background:transparent;padding:0;position:relative;bottom:auto;left:auto;right:auto;}
ul.childpages a:hover .text{}

ul.childpages h2,
ul.childpages h3,
ul.childpages h4{color: var(--dunkel);font-size:var(--step-2);font-weight:700;margin:0 0 0.5rem 0;padding:0;text-align:left;transition: color 1s;max-width:100%}

ul.childpages a{color:var(--dunkel);display:block;text-decoration:none;margin:0;padding:0;transition: color 0.4s;height:100%;}
ul.childpages a:hover,
ul.childpages a:hover h2,
ul.childpages a:hover h3,
ul.childpages a:hover h4{color:var(--vibrant);transition: color 0.4s;}

ul.childpages p.txt{display:block; font-size:var(--step-0);hyphens:auto;line-height:1.5;margin: 0.5rem 0;padding:0;text-align:left;text-wrap: pretty;max-width:auto;}
ul.childpages a:hover .txt {}

ul.childpages a.thumby{display:block;margin:1em auto;padding:0;position:relative;width:100%;aspect-ratio:6/4;border-radius:5px;}
ul.childpages a img{display:block;margin:0 auto;text-align:center;object-fit:cover;height:100%;width:100%;border-radius:5px;}
ul.childpages a:hover img{}


ul.block{margin-inline:auto;width:100%;}
ul.block > li{background:var(--trans-hell-8);display:block;list-style:none;padding:1.0rem;border:1px solid var(--trans-dunkel-1);box-shadow:5px 5px 15px 5px rgba(0,0,0,.15);transform: translateY(100px);opacity:0;transition:transform 1s, opacity 2s, box-shadow 1s;}
ul.block > li.go, .nojs ul.block > li {transform: translateY(0);opacity:1;}
ul.block > li:hover{box-shadow:none}
ul.block li:before{content:'';display:none;}
ul.block h2{font-size:var(--step-1);font-weight:700;margin:0 0 0.5rem 0;}

@media(hover:hover) {}

/* Grids */

ul.block,#wrapper ul.block,
ul.vergleiche,#wrapper ul.vergleiche,
ul.referenzen,#wrapper ul.referenzen,
ul.news.grid,#wrapper ul.news.grid,
.postwrap,#wrapper .postwrap{
  margin:5em 0;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
  max-width:max-width:var(--fullwidth);;
}
ul.block.big{
  --min: 35ch;
  --gap: 1.5rem;
}

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(--dunkel-grau);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 h2:first-of-type:not(.innertextsplits 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-4);display:block;margin:0 1em;padding:1.5em;max-width:1280px;border-radius:1rem;}
section.module.parallax article.wrap-inner-section div.ptxt:empty{background:transparent;}
section.module.parallax h1,section.module.parallax h3{color:var(--weiss);font-weight:400;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:800;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 25px 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 .bhintergrund-dreiecke,
section.module.hell .bhintergrund-kugel {--spike-color: var(--hell);}
section.module.hell ul.referenzen li h2,
section.module.hell ul.referenzen li h3{background:var(--hell);color:var(--dunkel);}
section.module.hell figure.quote{background:var(--trans-hell-8);}

section.module.medium{background:var(--medium);color:var(--weiss);}
section.module.medium h1,
section.module.medium h2,
section.module.medium h3,
section.module.medium strong{background:transparent;color:inherit;}
section.module.medium a:not(a.button){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 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(--dunkler);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 .bhintergrund-dreiecke,
section.module.dunkel .bhintergrund-kugel {--spike-color: var(--dunkler);}
section.module.dunkel blockquote{background:var(--trans-dunkel-2)}
section.module.dunkel ul.vergleiche li{background:var(--trans-dunkel-2);}

/* section.module.dunkel a.button{background-color:var(--hell);border-color:var(--hell);color:var(--dunkel);} */

section.module.dunkel.verlauf{background:linear-gradient(179deg, rgba(255, 255, 255, 1) 0%, rgba(98, 128, 184, 1) 0%, rgba(0, 54, 103, 1) 64%, rgba(0, 54, 103, 1) 100%);}
section.module.dunkel.verlauf2{background-color:var(--medium);background-image:linear-gradient(rgba(0, 69, 131, 0.5),var(--dunkler));}

/*  Wrapsplits */

.wrapsplits {display:block;margin-inline:auto;padding:1.5rem;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 1.5em;position:relative;}
.wrapsplits .splits.bild{background-color:transparent;background-position: 50% 50%; background-repeat: no-repeat;background-size: cover;border-radius:5px;margin-inline:auto;text-align:center;min-height:300px;max-width:800px;width:100%;isolation:isolate}
.wrapsplits.overlay .splits.bild::after{content:"";background-color:var(--medium);position:absolute;inset:0;z-index:-1;opacity:0.5;mix-blend-mode: lighten;}
.full .wrapsplits .splits.bild{max-width:100%;}

.wrapsplits .splits img{border-radius:1rem;}

.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:0 0 1rem 0;font-weight:400;text-align:left;}
.wrapsplits .innertextsplits p{margin: 1.0rem 0;}
.wrapsplits .innertextsplits ul,.wrapsplits .innertextsplits ul.maximal{margin:1.0rem 0}

.grafik .wrapsplits .splits.bild{min-height:1px;padding-top:2em;}
.grafik.rund .wrapsplits .splits.bild img{clip-path: circle(50% at 50% 50%);max-width:400px;}

/* 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-grau);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-grau);display:inline-block;margin:0 0.2em 0 0;width:1.0em}
.commentsblock textarea{overflow:auto}

ol.commentlist {color:var(--dunkel-grau);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{background:var(--trans-dunkel--1);border:none;border-radius:1rem;margin:35px auto;padding:1rem;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(--weiss);border:1px solid var(--trans-dunkel--1);color:var(--dunkel);margin:5px 0 10px 0;padding:0.8rem;width:100%;box-sizing:border-box;box-shadow:0 0 1px #666;}
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:200px;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-4); opacity:1;font-size:var(--step-1); }
div.wpcf7 input:-ms-input-placeholder { color: var(--trans-dunkel-4);font-size:var(--step-1); }
div.wpcf7 input::-ms-input-placeholder { color: var(--trans-dunkel-4);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:1rem;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;}


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

a.button {background:var(--vibrant);border:1px solid var(--vibrant);color:var(--on-vibrant);display:inline-block;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:1rem;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}

.share{clear:both;display:block;margin:15px auto;text-align:left;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{background:var(--weiss);color:var(--dunkel)}
.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;}

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(--dunkel); color: var(--hell);cursor: pointer;border-radius:0.5rem;margin:5px 0;padding:1rem 2.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(--medium);color: var(--weiss);}
.accordion::after {content: '\002B';color:var(--hell);font-weight: bold;transition:transform 0.5s;}
.accordion:hover::after {color: var(--weiss);}
.active::after {color: var(--weiss);transform:rotate(45deg)}
.panel {max-height: 0;overflow: hidden;transition: max-height 0.5s ease-out;}
.panel .innerpanel{background-color: var(--trans-dunkel--1);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;}
}

.farbstreifen{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;margin:0;padding:0;}
.farbstreifen > *{flex:1;display:block;padding:10px 0;list-style:none;text-align:center;}
.farbstreifen :nth-child(1){background:var(--hell);color:var(--dunkel)}
.farbstreifen :nth-child(2){background:var(--weiss);}
.farbstreifen :nth-child(3){background:var(--dunkel);color:var(--weiss)}
.farbstreifen :nth-child(4){background:var(--vibrant);color:var(--weiss)}
.farbstreifen :nth-child(5){background:var(--schwarz);color:var(--weiss)}

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


.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{background-color:var(--hell);flex-shrink: 0; width:280px;height:auto;margin:0;padding:0;border-radius:0;}
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{display:block;margin:0;objext-fit:cover;height:100%;width:100%;}

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

ul.childpages{}

ul.childpages li{
display: flex;
flex-wrap: nowrap;
align-items: center;
gap:2rem;}

ul.childpages li > a.thumby{
flex-shrink: 0;
flex-basis: 330px;
}

ul.childpages li > .text{
flex-grow: 1;
}

ul.split{}
ul.split li, #wrapper ul.split li{margin:3rem auto;padding:0;}
ul.split li a{display:grid;gap:2rem;grid-template-columns:1fr 1fr;align-items: center;padding:0;}
ul.split li .txt{}
ul.split li:nth-child(even) .thumbnail{order:2}
ul.split li:nth-child(even) .txt{order:1;}
ul.split li:nth-child(odd) .thumbnail{order:1}
ul.split li:nth-child(odd) .txt{order:2;}

/* .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){

#header{height:100px;padding:0 25px;}

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




/*  Wrapsplits */

.wrapsplits {display:grid;grid-template-columns:1fr 1fr;padding:2.5rem 1.5rem;}
#topsegment .wrapsplits{padding:2em 0;}

.wrapsplits .splits{min-height:400px;}
.wrapsplits .splits.bild{margin:inherit;padding:0 1.5rem;}
.grafik .wrapsplits .innertextsplits{padding:0;}
.grafik .wrapsplits .splits.bild{padding-top:0;}

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

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

.wrapsplits .splits.bild img:not(.clip, .zoom-in-left img, .zoom-in-right img) {
  transform: perspective(3000px) rotateY(0);
  transition: transform 1s ease 0s;}

.wrapsplits.rechts .splits.bild:hover img:not(.clip, .zoom-in-left img, .zoom-in-right img) {
    transform: perspective(3000px) rotateY(-15deg);
  }
.wrapsplits.links .splits.bild:hover img:not(.clip, .zoom-in-left img, .zoom-in-right img) {
    transform: perspective(3000px) rotateY(15deg);
  }

/* 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 .splits.bild,.wrapsplits .splits.text{padding:0;}
.wrapsplits.links .innertextsplits{padding:1.5em 0 1.5em 4em;}
.wrapsplits.rechts .innertextsplits{padding:1.5em 4em 1.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(--medium);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 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{background:var(--trans-hell-8);color:var(--dunkel);position:absolute;bottom:10%;left:1rem;max-width:65ch;padding:1em;z-index:500}

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

.carousel__texte{background:var(--trans-hell-8);color:var(--dunkel);position:absolute;bottom:15%;left:1rem;max-width:65ch;padding:1em;z-index:500}

}

/* 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;border-radius:5px;transition:scale 250ms ease-in-out;vertical-align:bottom;}
.gallery-wrapper a img:hover{scale:1.05}
.gallery-wrapper:hover > :not(:hover) {filter:blur(2px);opacity:0.5}

.gallery-lightboxes .image-lightbox{position:fixed;top:0;left:0;width:100%;height:100%;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 p{display:block;background:var(--trans-hell-2);color:#fff;margin:10px auto;padding:5px 10px;text-align:center;max-width:50ch;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{}

/* Flimmerkiste */

.bildschirm {background-color:#000;border-radius:1rem;border:2px solid var(--dunkel-grau);
  display:grid;place-items:center; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden;
  margin:50px auto;position: relative;
  z-index: 10;}

.bildschirm > .bildschirm-image {
  animation: bildschirm-image 60s linear infinite;
  border-radius:1rem;
  position: absolute; inset:0;
  background-size: 200%; background-position: 0% 0%; opacity: 0.8;
  z-index: 1;
}

@keyframes bildschirm-image {
  0% {background-position: 50% 50%;background-size: 100%;  }
  20% {background-position: 25% 25%;background-size: 200%;  }
/* -- 2 -- */
  20.0001% {background-position: 25% 85%;background-size: 250%;  }
  40% { background-position: 100% 50%;background-size: 200%;    }
/* -- 3 -- */
  40.0001% { background-position: 80% 40%;background-size: 100%;  }
  60% {    background-position: 85% 35%;background-size: 200%;   }
/* -- 4 -- */
  60.0001% { background-position: 0% 0%;background-size: 300%;  }
  80% { background-position: 15% 5%;background-size: 250%;    }
/* -- 5 -- */
  80.0001% { background-position: 80% 10%;background-size: 200%;}
  100% {background-position: 50% 15%; background-size: 100%;}
}

.bildschirm-overlay {
  animation: bildschirm-overlay 22s infinite linear;
  background: linear-gradient(rgb(0 0 0 / 0.15),rgb(150 150 150 / 0.15) 3px,transparent 3px, transparent 9px);
  background-size: 100% 9px;height:100%;width:100%;position: absolute;left: 0;top:0;z-index: 2;
  box-shadow:inset 0 0 20px #000;}

@keyframes bildschirm-overlay {
  from {background-position: 0% 0%;}
  to {background-position: 0% -100%;}
}

.bildschirm-inhalt{color:var(--weiss);font-size:var(--step-5);font-weight:700;z-index:100;text-transform:uppercase;padding:0.5rem 1rem;
text-shadow: 0px 0px 10px rgba(255,255,255,0.7);}

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

/*  Slider  */

.wrapslider{background:var(--dunkel);clear:both;margin:0;padding:0;overflow:hidden;position:relative;width:100%;max-width:100%;}

.slider,ul.rslider{margin:0;overflow:hidden;padding:0;position:relative;width:100%;}

.wrapslider .sliderbox{background:var(--dunkel);color:var(--weiss);display:inline-block;margin:0 auto;padding:10px;position:relative;text-align:center;width:auto;max-width:100%;}
.wrapslider .sliderbox .tbtitel{color:var(--weiss);font-size:var(--step-4);font-weight:700;letter-spacing:2px;line-height:1.25em;margin:10px auto;text-align:center;text-transform:uppercase;}
.wrapslider .sliderbox p,.wrapslider .sliderbox .tbtext, #content .wrapslider .sliderbox p{color:var(--weiss);font-size:var(--step-1);font-weight:700;line-height:1.25em;margin:10px auto 15px auto;padding:0;}

.wrapslider .sliderbox .button,
.wrapslider .sliderbox .kontaktbutton{display:block;margin:15px auto 10px auto;}

.wrapslider .sliderbox .kontaktbutton a,.wrapslider .sliderbox .kontaktbutton a:hover{background:var(--vibrant);border:1px solid var(-trans-hell-4);color:var(--weiss);display:inline-block;font-size:var(--step-2);line-height:1.25rem;margin:0;padding:12px 50px;text-decoration:none;border-radius:5px;-webkit-transition: all 0.3s;transition: all 0.3s;}
.wrapslider .sliderbox .kontaktbutton a:hover{background:var(--medium);color:var(--weiss);}
#nojs .wrapslider .sliderbox{display:none}

.rslides{background:transparent;height:auto;list-style:none;overflow:hidden;margin:0;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{display:block;margin:0 auto;text-align:center;max-height:1080px;}
.rslides.tn img{float:none !important;}
.rslides .slide:first-child{position:relative;display:block;}
.rslides .slide span{background:var(--weiss);display:block;height:100%;width:100%;text-align:center;}

#nojs .wrapslider .rslider li.slide{display:none;}
#nojs .wrapslider .rslider li.slide:first-child{display:block;}

ul.rslides_tabs,#content 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,#content 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,#content ul.rslides_tabs li a,#content ul.rslides_tabs li a:hover{background:var(--schwarz);border:1px solid var(--schwarz);color:var(--schwarz);display:block;line-height:1.25;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,#content ul.rslides_tabs li.rslides_here a,#content ul.rslides_tabs a:hover{background:var(--weiss);border:1px solid var(--weiss);color:var(--weiss)}
ul.rslides_tabs li a:hover,#content ul.rslides_tabs li a:hover{background:var(--weiss);border-color:var(--weiss);color:var(--weiss)}

.rslides_nav,#content .rslides_nav{z-index:999;}
.rslides_nav.prev,.rslides_nav.next,#content .rslides_nav.prev,#content .rslides_nav.next{background:var(--trans-dunkel-4);color:var(--weiss);cursor:pointer;display:block;font-size:2.0rem;margin:0;padding:5px;position:absolute;top:45%;text-decoration:none;vertical-align:middle;z-index:100;}
.rslides_nav.prev,#content .rslides_nav.prev{left:0;border-radius:0 5px 5px 0;}
.rslides_nav.next,#content .rslides_nav.next{right:0;border-radius:5px 0 0 5px;}
.rslides_nav.next:after,.rslides_nav.prev:before{margin:0;padding:0 0 0 10px;vertical-align:middle;}
.rslides_nav.prev:before{padding:0 5px 0 5px;}

#content .rslides_nav.prev,#content .rslides_nav.next{font-size:1.6em;}

.rslides_nav.prev span,.rslides_nav.next span{position: absolute; top: -9999px; left: -9999px; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(100%); border: 0 !important;}


#content .wrapslider{margin:25px auto;}
#content section.module .wrapslider{margin:0 auto;}
#content ul.rslides li:before{display:none;}
#content .wrapslider ul{margin:0;}
#content .wrapslider ul li{list-style:none;padding:0}
#content .wrapslider .sliderbox h1,
#content .wrapslider .sliderbox h2{font-size:1.3em;}
#content .wrapslider .sliderbox p{font-size:1.0em;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);}

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

.wrapslider .sliderbox{background:transparent;display:inline-block;position:absolute;bottom:0;left: 50%; transform: translateX(-50%);width:100%;max-width:1280px;z-index:99;}
.wrapslider .sliderbox .tbtitel,
.wrapslider .sliderbox .tbtext{background:var(--trans-hell-7);border-radius:9px;color:var(--schwarz);padding:5px 10px}
.wrapslider .sliderbox p {color:var(--schwarz)}
.wrapslider .sliderbox .tbtitel{}
.wrapslider .sliderbox .tbtext{}

}