/*
theme name: Sachverständigenbüro Fangmann
theme uri: https://sachverstaendiger-fangmann.de/
description: Begutachtung von Terrassenüberdachungen und Gartenzimmern
version: 4.0
author: klaus oppermann
author uri: https://www.klausoppermann.de/
*/

/* https://gwfh.mranftl.com/fonts  */

/* roboto-300 - 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: 300;
  src: url('fonts/roboto-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

/* cinzel-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: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/cinzel-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cinzel-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: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/cinzel-v23-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-jp-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: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/noto-sans-jp-v52-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-jp-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: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/noto-sans-jp-v52-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



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

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

  --weiss: #fff; /* weiss */
  --hell: #fbf9f4;  /* hell */
  --medium: #ede9e0;   /* medium */
  --dunkel: #0e2a23;    /* dunkel */
  --dunkel-grau: #111;
  --schwarz: #000; /* schwarz */

  --vibrant: #C2410C; /* orange */
  --on-vibrant: #fff;    /* weiss */
  --vibrant-hov: #C2410C; /* orange */
  --on-vibrant-hov: #fff;  /*  weiss */

  --warning: #a23b00;   /* rot */
  --success: #497b00;  /* gruen */

  --trans-dunkel--2: rgba(0,0,0,0.03);
  --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-5: rgba(0,0,0,0.5);
  --trans-dunkel-6: rgba(0,0,0,0.6);
  --trans-dunkel-7: rgba(0,0,0,0.7);
  --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.05);
  --trans-hell-1: rgba(255,255,255,0.1);
  --trans-hell-2: rgba(255,255,255,0.2);
  --trans-hell-3: rgba(255,255,255,0.3);
  --trans-hell-4: rgba(255,255,255,0.4);
  --trans-hell-5: rgba(255,255,255,0.5);
  --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.94rem, calc(0.75rem + 0.11vw), 0.75rem);
  --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
  --step-0: clamp(1.00rem, calc(0.96rem + 0.22vw), 1.13rem);
  --step-1: clamp(1.07rem, calc(1.00rem + 0.35vw), 1.27rem);
  --step-2: clamp(1.10rem, calc(1.04rem + 0.50vw), 1.42rem);
  --step-3: clamp(1.15rem, calc(1.08rem + 0.67vw), 1.60rem);
  --step-4: clamp(1.2rem, calc(1.12rem + 0.88vw), 1.80rem);
  --step-5: clamp(1.25rem, calc(1.16rem + 1.0vw), 2.03rem);
  --step-6: clamp(1.3rem, calc(1.20rem + 1.40vw), 2.6rem);

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

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

}

/* 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(--dunkel-grau);
font-family:'Roboto',Arial, Verdana, Helvetica,sans-serif;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;transition: color 0.5s;}
a:hover,a:focus{color:var(--schwarz);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}

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:'Noto Sans JP',Arial, Verdana, Helvetica,sans-serif;font-weight:700;line-height:1.3;margin:1.5em auto 1em auto;text-align:center;text-wrap: balance;-webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;}

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

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;}
p.frame{margin:0;}
p:empty{margin:0;padding:0;}

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

ol {}
ol li{ }


/* Container-Styling für die OL-Liste */
ol.custom-ablauf-liste {
    list-style: none; /* Deaktiviert die Standardnummerierung */
    counter-reset: ablauf-counter; /* Initialisiert den Zähler */
    padding-left: 0;
    margin-bottom: 1.5rem;
    margin-top:1.5rem;
}

/* Einzelner Listenpunkt */
ol.custom-ablauf-liste li.custom-ablauf-item {
    counter-increment: ablauf-counter; /* Erhöht den Zähler pro Element */
    position: relative;
    padding-left: 3em; /* Platz für die eigene Nummer */
    padding-bottom: 1.5rem;
    border-bottom:1px solid var(--vibrant);
}

ol.custom-ablauf-liste .custom-ablauf-text{
    color:var(--medium);
}

/* Die eigene Nummerierung: Kursiv und in Kontrastfarbe */
ol.custom-ablauf-liste li.custom-ablauf-item::before {
    content: counter(ablauf-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-style: italic; /* Kursiv */
    font-weight: bold;
    font-size: 1.4em;
    line-height: 1.2;
    color: var(--vibrant); /* Hier deine Kontrastfarbe eintragen */
}

.dunkel ol.custom-ablauf-liste li.custom-ablauf-item::before {
   color: var(--weiss);
}

/* Styling für die H3-Headline */
h3.custom-ablauf-titel {
    margin: 0 0 0.4em 0;
    font-size: 1.2em;
    text-align:left;
}

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}
ul.big{font-size:var(--step-3);lmax-width:80ch;}
ul.big li{list-style:none;}

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

.mail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block; /* Wichtig, damit overflow/text-overflow bei <a> oder <span> Elementen greift */
  max-width: 100%;       /* Verhindert das Hinausragen aus dem Eltern-Container */
}

.mail .icon-mail {
    display: inline-flex;
    align-items: center;
    gap: 0.4em; /* Abstand zwischen Icon und Text */
    text-decoration: none;
}

.mail .email-icon {
    width: 1.1em;
    height: 1.1em;
    font-size:1.5rem;
    vertical-align: middle;
}

/* Grundlegende Button-Formatierung */
.mail.is-cta-button {
    display: inline-block;
    margin: 5px 0;
}

.mail.is-cta-button a,
div.mail.is-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
    margin:1.5rem 0;
    padding: 10px 20px;
    background-color: var(--vibrant); /* Button-Farbe (anpassen) */
    color: var(--weiss) !important; /* Textfarbe */
    text-decoration: none;
    border-radius: 9px;
    font-weight: bold;
    transition: background-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;
}



/* Hover- & Focus-Effekt für den Link-Button */
.mail.is-cta-button a:hover,
.mail.is-cta-button a:focus {
    background-color: var(--vibrant-hov); /* Dunklere Farbe beim Drüberfahren */
    color: var(--schwarz);
    text-decoration: none;
    opacity:0.9;
}

/* Icon-Ausrichtung im Button */
.mail.is-cta-button .email-icon {
    font-size: 1.2em;
    vertical-align: middle;
}

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

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

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

#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(--hell);display:block;position:sticky;top:0;left: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;margin-inline:auto;padding:5px 25px;position:relative;max-width:var(--bigwidth);}

#header .logo{max-height:60px;text-align:left;overflow:hidden;}
#header .logo.bild img{max-height:60px;max-width:260px;padding:5px;}
#header .logo a,#header .logo a:hover{color:var(--dunkel);text-decoration:none;}
#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);font-size:var(--step-0);font-weight:700;margin:5px 0;padding:0;line-height:1.25;display:none;}

#headerbox {background:var(--dunkel); color:var(--weiss);display:block;text-align:center;z-index:801;}
.headerbox-inner{display:block;position:relative;margin:0 auto;padding:5px 0;max-width:var(--bigwidth);}
#headerbox .phone{display:inline-block;margin:0 15px}
#headerbox .mail{margin:0 15px}
#headerbox .phone a, #headerbox .mail a{color:var(--weiss);}

.phone a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em; /* Abstand zwischen Icon und Text */
    text-decoration: none;
    transition: background-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;}
}

.phone .phone-icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
}

.phone .text {font-weight:400;}
.phone .phone-icon {font-size:1.5rem;}

/* Grunddesign für den CTA-Button */
.phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin:1.5rem 0;
    padding: 0.6em 1.2em;
    background-color: var(--vibrant); /* Hauptfarbe */
    color: var(--weiss) !important;
    text-decoration: none;
    border-radius: 9px;
    font-weight: 600;
    transition: background-color 0.4s ease, color 0.4s ease, opacity 0.4s ease;}

.phone-btn:hover {
    background-color: var(--vibrant-hov); /* Hover-Farbe */
    color: #var(--weiss) !important;
    text-decoration: none;
    opacity:0.9;
}

.phone-btn:active {
    transform: translateY(1px);
}

.phone-btn .phone-icon {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

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

nav#konavigation ul a:hover,
nav#konavigation ul a:focus,
nav#konavigation ul ul a:hover {color:var(--weiss);background:var(--trans-dunkel-2);}

nav#konavigation.open a[aria-current="page"],
nav#konavigation ul ul a[aria-current="page"] {}

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-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.8rem 0 0;padding:5px;text-decoration:none;position:relative;}

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

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:var(--vibrant);color:var(--weiss);border:1px solid var(--vibrant);margin:0;padding:0.8rem 1.5rem;transition: background 0.3s, color 0.3s;}
nav#konavigation li.kontakt > a:hover,
nav#konavigation li.kontakt > a:focus,
nav#konavigation li.kontakt > a[aria-current="page"]{background:transparent;color:var(--dunkel)}

nav#konavigation a::before{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--dunkel);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;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--1);text-decoration:none;margin:0 0 0 10px;}

}

/*  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{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, .teaserboxx-text,section.module.parallax p){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;font-size:var(--step-1);margin-inline:auto;position:relative;text-align:center;}
#footer .inner {background:transparent;color:var(--weiss);line-height:1.7;margin-inline:auto;padding:25px;text-align:left;max-width:var(--bigwidth);display: flex; flex-wrap: wrap;align-items: center; justify-content: center;gap:var(--gap);}
#footer .inner > *{flex:0 1 25ch;}

#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;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-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 25px 65px 25px;text-align:center;max-width:var(--bigwidth);}
#footer .fullbox ul{margin:50px 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:center;}
#footer .phone, #footer .email{display:block;margin:10px 25px}
#footer .email a,#footer .url a{}
#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{color:var(--dunkel-grau);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{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;}

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


@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(--trans-hell-9);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: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,.zweiboxen-item h2) {margin:1.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: 60vh;display: flex;align-items: center;justify-content: flex-start;overflow: hidden;}
section.module.parallax article.wrap-inner-section{display: flex;align-items: center;justify-content: flex-start;width: 100%;}


section.module.parallax .wrap-inner-section .ptxt {
    text-align: left; 
    color: var(--weiss); 
    max-width:var(--mwidth);
    margin:0;}

section.module.parallax h1{color:var(--weiss);font-size:var(--step-4);font-weight:400;line-height:1.4;margin:0 0 1.0rem 0;text-align: left;}
section.module.parallax h1 b{color:var(--weiss);font-size:var(--step-5);font-weight:800;margin:0;text-transform: uppercase;}
section.module.parallax a:not(a.button),section.module.parallax strong{color:var(--weiss)}
section.module.parallax p{color:var(--weiss);margin:1.0rem 0;text-align:left;}

section.module.parallax.overlay {isolation:isolate}
section.module.parallax.overlay::after{content:"";background-color:var(--trans-dunkel-5);position:absolute;inset:0;z-index:-1;}


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(--schwarz);}
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{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(--schwarz) }
section.module.medium ul.news li a,
section.module.medium a:not(a.button){color:var(--schwarz)}
section.module.medium ul.news li a:hover h3,
section.module.medium article.post a:hover h3{color:var(--vibrant)}
section.module.medium ul.vergleiche li{background:var(--trans-dunkel-2);}

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{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, .quote-source a){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 ul.vergleiche li{background:var(--trans-dunkel-2);}

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

/*  Wrapsplits */


.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:1rem 1.5rem;position:relative;text-align:center;}
.wrapsplits .splits.bild{background-color:transparent;background-position: 50% 50%; background-repeat: no-repeat;background-size: cover;margin-inline:auto;min-height:200px;max-width:100%x;width:100%;}
.full .wrapsplits .splits.bild{max-width:100%;}
.wrapsplits .innerbildsplits span{display:block;margin:0 auto;max-width:560px;}
.innerbildsplits {
  position: relative;
  display: inline-block;
}

.innerbildsplits .ki-badge {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}

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

.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(--medium);border:none;border-radius:0;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-4);color:var(--schwarz);margin:5px 0 10px 0;padding:0.8rem;width:100%;box-sizing:border-box;}
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);border-color:var(--trans-dunkel-6);color:var(--schwarz);}
div.wpcf7 input[type=checkbox],div.wpcf7 input[type=radio]{background:transparent;border:none;color:var(--schwarz);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:0.5em;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 */
/* ************* */

/* Container für die Boxen */
.teaserboxen-wrapper {
  display: grid;
  /* Automatische Spalten: Mindestens 280px breit, maximal gleichmäßig verteilt */
  /* Bei schmalen Displays schrumpft es auf 100% Breite */
  grid-template-columns: repeat(auto-fit, minmax(clamp(100% / 3 - 2rem, 280px, 100%), 1fr));
  gap: 2rem;
  width: 100%;
  margin-bottom: 2rem;
}

/* Einzelne Teaserbox */
.teaserbox-item {
  display: flex;
  flex-direction: column;
  background-color: var(--weiss);
  border:1px solid var(--trans-dunkel-1);
  border-radius: 8px;
  position:relative;
}

/* Bildanpassung */
.teaserbox-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Content-Bereich */
.teaserbox-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

h3.teaserbox-title {
  font-size:var(--step-2);
  margin:0 0 1rem 0;
  text-align:left;
}

.teaserbox-link-wrapper{ 
   background:transparent;
   border-top:1px solid var(--trans-dunkel-2);
   display:block;
   line-height:1.8;
   padding:5px 1.5rem;
   position: absolute;
   bottom:0;
   left:0;
   right:0;
}

.teaserbox-content p{
  margin:0 0 2rem 0;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
}

/* Container für die Flexbox-Ausrichtung */
        .teaserboxx-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
            width: 100%;
        }
        
        /* Box-Styling: Automatische Skalierung für 1 bis 2 Boxen pro Zeile ohne Breakpoints */
        .teaserboxx-item {
            flex: 1 1 320px; /* Nimmt mind. 300px ein; wächst gleichmäßig und bricht automatisch um */
            box-sizing: border-box;
            padding: 1.0rem;
            border: 1px solid var(--trans-dunkel-1);
            border-radius: 8px;
            background-color: var(--weiss);
        }
        
        .dunkel .teaserboxx-item {
            background-color: var(--trans-hell-1);
            
        }

        h3.teaserboxx-title, .innertextsplits h3.teaserboxx-title{
            margin-top: 0;
            margin-bottom: 5px;
            text-align:left;
            font-size:var(--step-1);
        }

        p.teaserboxx-text, .innertextsplits p.teaserboxx-text{
            font-size:var(--step--1);
            margin: 0;
            text-align:left;
            -webkit-hyphens: auto; 
            hyphens: auto; 
            hyphenate-limit-chars: 6 3 3;


        }
        
.zweiboxen-grid {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            width: 100%;
            margin: 1.5rem 0;
        }
.zweiboxen-grid.center {
        justify-content: center;
        justify-items: center;
        text-align: center;
      }
      .zweiboxen-grid.center > * {
        margin-left: auto;
        margin-right: auto;
      }
.zweiboxen-grid.maximal {
        max-width: var(--mwidth);
        margin: 1.5rem auto;
     }     
        .zweiboxen-item {
            flex: 1 1 360px; /* Bricht automatisch untereinander um, wenn weniger als 300px Platz ist */
            box-sizing: border-box;
            padding: 1rem;
        }
        
        .zweiboxen-item h2{text-align:left;}
        
.zweiboxen-grid.center .mail.is-cta-button,
.zweiboxen-grid.center .phone-btn {margin:0 auto;} 

/* Modernes Blockquote Design */
.modern-quote {
    position: relative;
    margin: 2.5rem 0;
    padding: 2.5rem 1.5rem 2.5rem 5rem;
    background:var(--trans-dunkel-4);
    border-left: 5px solid var(--vibrant);
    border-radius: 0 12px 12px 0;
    color: var(--vibrant);
    font-family: Georgia, Times, 'times new roman', serif;
}

/* Großes Anführungszeichen im Hintergrund */
.modern-quote::before {
    content: "“";
    position: absolute;
    top: -0.2rem;
    left: 0.8rem;
    font-size: 8rem;
    line-height: 1;
    color: var(--vibrant);
    opacity: 0.8;
    font-family: Georgia, Times, 'times new roman', serif;
    pointer-events: none;
}

.modern-quote blockquote {
    margin: 0;
    padding: 0;
    border: none;
}

.modern-quote blockquote p {
    margin: 0 0 0.75rem 0;
    font-size: var(--step-6);
    line-height: 1.6;
    color: var(--vibrant);
    font-style: italic;
}

.dunkel .modern-quote blockquote p {
    color: var(--weiss);
}

.modern-quote blockquote p:last-child {
    margin-bottom: 0;
}

/* Autor & Quellen-Angabe */
.modern-quote .quote-caption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--medium);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modern-quote .quote-author {
    font-weight: 600;
}

.modern-quote .quote-author::before {
    content: "— ";
}

.modern-quote .quote-source {
    font-style: normal;
}

.modern-quote .quote-source::before {
    content: "• ";
    margin-right: 0.2rem;
}

.modern-quote .quote-source a {
    color: var(--medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.modern-quote .quote-source a:hover {
    color: var(--vibrant-hov);
}



/* VARIATION 2: Zentriert & Elegant (typ="zentriert") */
.modern-quote.zentriert {
    border-left: none;
    border-top: 5px solid var(--quote-border-color);
    border-radius: 12px;
    text-align: center;
}

.modern-quote.zentriert::before {
    display: none;
}

.modern-quote.zentriert .quote-caption {
    justify-content: center;
}

.sprungmarken-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.sprungmarken-wrapper .sprungmarke {
    /* Maximal 3 nebeneinander (unter Berücksichtigung des Gap) */
    flex: 1 1 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
    box-sizing: border-box;
}

.sprungmarken-wrapper .sprungmarke a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-decoration: none;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
    height: 100%;
}

.sprungmarken-wrapper .sprungmarke a:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.sprungmarken-wrapper .sprungmarke-icon {
    max-width: 64px;
    height: auto;
    margin-bottom: 12px;
}

.sprungmarken-wrapper h3 {
    margin: 0;
    font-size: 1.1rem;
}

/* Responsive: 1 Spalte auf mobilen Geräten */
@media (max-width: 768px) {
    .sprungmarken-wrapper .sprungmarke {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


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:0.5em;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(--trans-dunkel-1);border:1px solid var(--weiss);color:var(--weiss);}



.group.share {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.group.share a,, #footer .group.share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    background:transparent;
    text-decoration: none;
    transition:transform .3s, color .3s, background .3s;
}

.group.share a:hover, #footer .group.share a:hover {
    color:var(--vibrant);
}

.group.share .social-icon {
    width: 1.8em;
    height: 1.8em;
}

/* Versteckt den Text visuell, bleibt für Screenreader lesbar */
.group.share .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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


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

.headerbox-inner > div{display:flex;align-items:center;justify-content:space-between;}

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

#header .logo .beschreibung{display:block;}

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

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

.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{padding:0 25px;}

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



/*  Wrapsplits */

.wrapsplits {display:grid;grid-template-columns:60% 40%;padding:2.5rem 1.5rem;}
.wrapsplits.links{grid-template-columns:40% 60%;}
#topsegment .wrapsplits{padding:2em 0;}

.wrapsplits .splits{min-height:300px;display:flex;align-items: center;}
.wrapsplits .splits.bild{margin:inherit;padding:0 25px;}
.grafik .wrapsplits .innertextsplits{padding:0;}
.grafik .wrapsplits .splits.bild{padding-top:0;}

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

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





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

}

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

#header{padding:0}


.wrapsplits .splits.bild,.wrapsplits .splits.text{padding:0;}
.wrapsplits.links .innertextsplits{padding:1.5rem 0 1.5rem 2.5rem;}
.wrapsplits.rechts .innertextsplits{padding:1.5rem 2.5rem 1.5rem 0;}

}

/* Bildergalerie */

/* Haupt-Wrapper & Galerie-Grid */
.wrapgallery-wrapper {
  display: block;
  margin: 50px 0;
}

.gallery-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  padding: 1rem;
}

.gallery-wrapper a {
  transition: all 0.3s ease-in-out;
}

/* Bild-Layout Standard (Querformat) */
.gallery-wrapper a img {
  height: 12rem;
  width: 18rem;
  object-fit: cover;
  border-radius: 1rem;
  transition: transform 250ms ease-in-out;
  vertical-align: bottom;
  border: 1px solid var(--trans-dunkel-2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Variante: Hochkant (typ="hochkant") */
.wrapgallery-wrapper.hochkant .gallery-wrapper a img {
  height: 18rem;
  width: 12rem;
}

/* Hover-Effekte */
.gallery-wrapper a img:hover {
  transform: scale(1.05);
}

/* Unschärfe/Transparenz NUR anwenden, wenn aktuell ein BILD gehovert wird */
.gallery-wrapper:has(.gallery-thumb-item:hover) .gallery-thumb-item:not(:hover) {
  filter: blur(2px);
  opacity: 0.5;
  transition: all 0.3s ease-in-out;
}

/* Container-Positionierung für Thumbnails */
.gallery-thumb-item {
  position: relative;
  display: inline-block;
  border-radius: 1rem;
  overflow: hidden; /* Schneidet die Badge an den abgerundeten Bildecken sauber ab */
}

/* Container-Positionierung für Lightbox-Bilder */
.lightbox-image-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Dezentes KI-Label unten rechts */
.ki-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(15, 23, 42, 0.75); /* Dunkler, leicht transparenter Hintergrund */
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none; /* Klicks gehen durch auf den Link dahinter */
  backdrop-filter: blur(2px); /* Subtiler Unschärfe-Effekt dahinter */
  z-index: 2;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Lightbox Container */
.gallery-lightboxes .image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--trans-dunkel-9, rgba(0, 0, 0, 0.85));
  opacity: 0;
  visibility: hidden;
  padding: 1rem;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.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;
  transition: opacity 0.3s ease;
}

.gallery-lightboxes .image-lightbox:target .image-lightbox-wrapper {
  opacity: 1;
}

/* Lightbox Bild (Responsiv geschützt) */
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper img {
  border: 2px solid #fff;
  margin: 0 auto;
  max-height: 80vh;
  max-width: 85vw; /* Verhindert Überlappen auf Mobilgeräten */
  object-fit: contain;
  border-radius: 1rem;
}

/* Schließen-Button (Zentriert & klickbar) */
.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;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close::before {
  transform: rotate(45deg);
}

.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.close::after {
  transform: rotate(-45deg);
}

/* Navigation Pfeile */
.gallery-lightboxes .image-lightbox .image-lightbox-wrapper a.arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Exakte vertikale Zentrierung */
  background: transparent;
  color: var(--weiss, #fff);
  font-size: 2.5rem;
  text-decoration: none;
  padding: 0.5rem;
}

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