/*
	Theme Name: meineTabelle
	Version: 1.0.0
	Author: OHP
*/

@charset "utf-8";
/* =======================================================================
   GLOBAL RESET & BASE STYLES
   ======================================================================= */

.grecaptcha-badge { 
    visibility: hidden !important;
}

*	{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* universeller Reset für Abstände */
}
body, html	{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    height: 100%;
    width: 100%;
    color: #626262;
    background: #FFFFFF;
    hyphens: none; /* automatische Silbentrennung deaktivieren */
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
}
body {overflow-x: hidden;}

a {
    color: #626262;
    text-decoration: none;
}
main a {
    color: #347C13;
    text-decoration: none;
	font-weight: bold;
}
a:hover {
    color: #347C13 !important;
    text-decoration: underline;
}
a:focus-visible {
  outline: 2px solid black;
  outline-offset: 2px;
}


.siteWrapper {max-width: 1200px; margin: 0 auto; width: 90%;} /* zentrierter Wrapper */

img {max-width: 100%;max-height: 100%;height: auto;}
/*---------------------------------------------------------------*/

/* =======================================================================
   FLEXBOX-HILFSKLASSEN
   ======================================================================= */
/* flex-styles */
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; /* modern Flexbox */
}
.flexRow {
    -webkit-flex-direction: row;
    flex-direction: row; /* horizontale Ausrichtung */
}
.flexColumn {
    -webkit-flex-direction: column;
    flex-direction: column; /* vertikale Ausrichtung */
}
.justifyBetween {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flexEnd {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.flexStart {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.flexCenterContent {
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.flexTop {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.flexBottom {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.noWrap {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
}
.wrap {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

  .img-referenzen {
    display: flex;
    align-items: center;
    justify-content: space-between;
	padding-top: 20px;
  }

  .img-referenzen img {
    height: 60px;
    object-fit: contain; /* Behält das Seitenverhältnis der Bilder */
  }

/*---------------------------------------------------------------*/

/* =======================================================================
   SEITENKOPF
   ======================================================================= */
/* header-styles */
header.header {
    padding: 40px 20%;
    position: fixed; /* am oberen Rand fixiert */
    left: 0;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 1000;
}
.header__nav-wrapper {
    position: relative;
    z-index: 9;
    background-color: transparent;
}
.logo {min-width: 230px;  width: 250px;}
.menu {
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}
.menu li {
    padding: 0 25px;
    position: relative;
}
.menu li a {
    font-size: 1.33rem;
    white-space: nowrap;
}
.menu .button {
    padding: 0 !important;
}
.menu .button a {
    display: block;
    padding: 12px 40px;
}

header nav li.current_page_item > a,
header nav li.current-menu-ancestor > a,
header nav li.current-menu-parent > a {
    color: #347C13;
}
.hamburger, .mobile-menu {
    display:none; /* wird erst im Mobile‑Layout sichtbar */
}
header nav.mobileNav li.current_page_item > ul.sub-menu,
header nav.mobileNav li.current_page_ancestor > ul.sub-menu,
header nav.mobileNav li.current_page_ancestor.menu-item-has-children > ul.sub-menu {
    display: block;
}
/*---------------------------------------------------------------*/

/* =======================================================================
   TYPOGRAFIE & HAUPTINHALT
   ======================================================================= */
/* main-styles */

main section article {
    padding: 60px 0 100px;
    margin: 0 auto;
}
h1, h2, h3 {
    line-height: 1.2;
}

main .h1, main .h2 {
    color: #347C13;
    font-weight: 700;
    font-size: 2.5rem;
    margin: 1.5rem 0 0 0;
}

main .h3 {
    color: #626262;
    font-weight: 400;
    font-size: 1.8rem;
    margin: 0.25rem 0 2rem;
}
main .h2, main p {
    text-align: center;
}

main h1, main h2 {
    color: #347C13;
    font-weight: 700;
    font-size: 2.5rem;
    margin: 1.5rem 0 0 0;
}

main h3 {
    color: #626262;
    font-weight: 400;
    font-size: 1.8rem;
    margin: 0.25rem 0 2rem;
}
main h2, main p {
    text-align: center;
}
main h2.h3 { /* um text-align: center von den nun korrekterweise verwendeten h2 (aber als h3 formatiert) zu resetten */
	text-align: unset;
}
main section article.nav_breadcrumb {padding: 40px 0 20px;}
.breadcrumb a {border-bottom: 1px solid #626262;}
.breadcrumb a:hover {border-bottom: 1px solid #347C13;}
.breadcrumb .current-page {color: #347C13;}

.mTmeine {
    font-style: italic;
    font-weight: 700;
    color: #88d951;
}
.mTTabelle {
    font-weight: 700;
    color: #808080;
}

section.hero {
    margin-top: 90px;
    max-height: calc(72vh - 90px);
    overflow: hidden;
	position: relative;
}
.bx-prev:focus {
    background: url('https://meine-tabelle.de/wp-content/uploads/2022/01/arrow-type-1.png') no-repeat 15px 0 !important;
}
#heroPic img,
section.hero.heroslider img {
    width: 100%;
    height: calc(92vh - 90px);
    display: block;
    object-fit: cover;
}
section.hero.heroslider {
    margin-top: 90px;
   /* margin-bottom: -20px */
}

#start {height: 0;position: relative;top: -100px;}

section.hero .heroHeadLine {
    z-index: 300;
    position: absolute;
    bottom: 0px;
    width: 100%;
    color: #fff;
    font-size: 2.5rem;
    /* height: 187px; */
    padding: 35px 35px 95px;
    background: #2f812f85;
}
section.hero .heroHeadLine div {
    margin: 0 auto;
    width: 90%;
	/* max-width: 800px; */
	text-align: center
}
section.hero .scroll-down {
    height: 60px;
    width: 80px;
    margin: 0px 0 0 -40px;
    line-height: 60px;
    position: absolute;
    left: 49.85%;
    bottom: 30px;
    color: #FFF;
    text-align: center;
    font-size: 50px;
    z-index: 999;
    text-decoration: none;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
    animation: move_down 2s ease-in-out infinite; /* sanfter Bounce */
	cursor: pointer;

}
section.hero .scroll-down:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
	font-size: 50px;
    content: "\2B9B";
}
@keyframes move_down {
	0% {
		transform: translate(0, -20px);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}

	100% {
		transform: translate(0, 20px);
		opacity: 0;
	}
}
@media (max-width: 700px) {
	section.hero .scroll-down {font-size: 35px;bottom: 10px;}
	section.hero .scroll-down:before {width: 25px; content: url("https://meine-tabelle.de/wp-content/uploads/2022/01/arrow_down.png");}
	section.hero .heroHeadLine {font-size: 1.75rem;padding: 20px 15px 80px;}
	section.hero .heroHeadLine div {width: 95%;}
}


.holderClass {
    line-height: 0;
    opacity: 1;
    padding: 16px;
    position: fixed;
    transition: all .5s ease;
    z-index: 999998;
	left: 5px;
}
#mailContact {bottom: 66px;}
#telContact {bottom: 125px;}
#telContact:hover:before {
    content: "040 / 6082 1728";
    position: absolute;
    min-width: 128px;
    background-color: #fff;
    height: 24px;
    padding: 5px;
    line-height: 15px;
    left: 38px;
    top: 19px;
    color: #347C13;
    z-index: -1;
    white-space: nowrap;
}
.holderClass svg {width: 47px !important; cursor: pointer;}

/* Start Call to Action Add On von HE 22.10.2024 */

.cta-ansprechpartner {border-top: 1px solid #999999; border-bottom: 1px solid #999999; background-color: #E7F3E3; padding: 20px 0;}
.cta-ansprechpartner h3 {
    margin: 10px 0 0 !important;
}
.cta-ansprechpartner img {
    width: 20%;
    min-width: 150px;
    margin: 0 20px 0 0;
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 10px;
    line-height: 1.42857143;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    vertical-align: middle;
}
/* Ändere die Hintergrundfarbe der Inputs

.cta-ansprechpartner .kontaktform .formwrapper input,
.kontaktform textarea {
    width: 50%;
    background: #E7EEE3;
    border: 1px solid #626262;
    padding: 2px 10px 5px;
}
.cta-ansprechpartner .kontaktform input[type=checkbox]{
	background: #E7EEE3;
}

*/

/* Ende Call to Action Add On von HE 22.10.2024 */

/*---------------------------------------------------------------*/

/* =======================================================================
   STARTSEITEN-ELEMENTE
   ======================================================================= */
/* home-styles */

section.intro article {padding: 60px 0 100px; }
section.leistungen {background-color: #E7F3E3;}
section.leistungen h1 {text-align: center;}
.leistung {width: 30%;}
.leistung, .banner {cursor: pointer;}
.kopf-leistung, .titel-leistung, .detail-leistung, .mehr-leistung {
    text-align: center;
}
.kopf-leistung {
    padding: 80px 0 15px;
    height: 190px;
}
.titel-leistung {
    background-color: #4c4d4d;
    color: #ffffff;
    padding: 15px 0;
    font-size: 1.5rem;
}
.detail-leistung {
    padding: 25px 30px;
}
.detail-leistung p {
    margin-bottom: 10px;
}
.detail-leistung hr {
    border: none;
    height: 2px;
    background-color: #676c66;
    margin: 10px 0;
}
.mehr-leistung {
    padding: 15px 0;
    background-color: #347C13;
    font-size: 1.2rem;
    color: #ffffff;
}
.mehr-leistung a, .leistungslink {
    font-size: 1.2rem;
    color: #ffffff;
}
.mehr-leistung a:hover,.leistungslink:hover {
    color: #ffffff !important;
}
.banner {width: 30%;}
.banner .kopf {padding-top: 55px;}
.banner img {width: 100%; display: block;}
.banner .inhalt {
    padding: 25px 20px;
    background: #EFEFEF url(../img/bluemelein.png) no-repeat center bottom; /* dekoratives Muster */
    text-align: center;
}
.banner .inhalt h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.banner .inhalt p {padding: 0 20px;}
section.referenzen h1, .kundenstimmen h1 {text-align: center;}
.referenz-slider {margin-top: 60px;}
.kundenstimmen {background: #efefef}

section.kundenstimmen article {text-align: center;}
/* section.kundenstimmen .beitrag {display: none;} */
section.kundenstimmen p {margin-bottom: 20px; text-align: left;}
section.kundenstimmen h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 50px;
}
.columns {
    columns:2;
    column-rule-style:none;
    column-rule-width: 2px;
    column-gap: 60px;
    text-align: left;

}
.columns p {
    hyphens:auto;
    orphans:3;
    widows: 3;
}

.bullets {
    display: inline-block;
    margin: 20px auto;
}
.bullet {
    display: inline-block;
    margin: 0 5px;
    width: 16px;
    height: 16px;
    background-color: #616161;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.referenzRow {
    margin-top: 50px;
}
.referenzRow div {
    width: 25%;
    margin-bottom: 20px;
}
.referenzRow p {
    text-align: left;
    padding-right: 20px;
}

/*---------------------------------------------------------------*/

/* =======================================================================
   KOMPONENTE: HOVER-BILDER
   ======================================================================= */
/* hover-pics*/
.bild.hoverpics {position: relative;}
.bild.hoverpics .grundbild {
    position: relative;
    display: block;
    width: 100%;
    height:  auto;
    z-index: 1;
}
.bild.hoverpics .singlebild {
    position: absolute;
    transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    z-index: 10;
    -webkit-transition: .7s ease-in-out;
    -moz-transition: .7s ease-in-out;
    -o-transition: .7s ease-in-out;
    -ms-transition: .7s ease-in-out;
    transition: .7s ease-in-out;
    cursor: pointer;
}

.bild.hoverpics.digital .singlebild:nth-of-type(1) {top: 7%; left: 0%; width: 15%;}
.bild.hoverpics.digital .singlebild:nth-of-type(2) {top: 5%; left: 20%; width: 13%;}
.bild.hoverpics.digital .singlebild:nth-of-type(3) {top: 2%; left: 37%; width: 14%;}
.bild.hoverpics.digital .singlebild:nth-of-type(4) {top: 8%; left: 59%; width: 17%;}
.bild.hoverpics.digital .singlebild:nth-of-type(5) {top: 1.7%; right: 0%; width: 15%;}
.bild.hoverpics.digital .singlebild:nth-of-type(6) {bottom: 0; left: 10%; width: 80%;}
.bild.hoverpics.digital .singlebild:nth-of-type(7) {top: 34%; left: 5.2%; width: 18.1%;}
.bild.hoverpics.digital .singlebild:nth-of-type(8) {top: 34%; left: 28.3%; width: 28%;}
.bild.hoverpics.digital .singlebild:nth-of-type(9) {top: 34%; left: 63.7%; width: 12%;}
.bild.hoverpics.digital .singlebild:nth-of-type(10) {top: 44.5%; right: 1%; width: 12%;}

.bild.hoverpics.business .singlebild:nth-of-type(1) {top: 0.5%; left: 41.5%; width: 14%;}
.bild.hoverpics.business .singlebild:nth-of-type(2) {top: 14.5%; left: 64.1%; width: 14%;}
.bild.hoverpics.business .singlebild:nth-of-type(3) {top: 40.5%; left: 75.3%; width: 14%;}
.bild.hoverpics.business .singlebild:nth-of-type(4) {top: 65.5%; left: 65%; width: 14%;}
.bild.hoverpics.business .singlebild:nth-of-type(5) {top: 76.6%; left: 41.5%; width: 14%;}
.bild.hoverpics.business .singlebild:nth-of-type(6) {top: 66.7%; left: 18.7%; width: 14%;}
.bild.hoverpics.business .singlebild:nth-of-type(7) {top: 40.5%; left: 7.7%; width: 14%;}
.bild.hoverpics.business .singlebild:nth-of-type(8) {top: 13.7%; left: 19%; width: 14%;}
.bild.hoverpics.business .singlebild:nth-of-type(9) {top: 36.4%; left: 32%; width: 34%;}

.bild.hoverpics.jetzt_digital .singlebild:nth-of-type(1) {top: 11.5%; left: 1.5%; width: 22.5%;}
.bild.hoverpics.jetzt_digital .singlebild:nth-of-type(2) {top: 11.5%; left: 32.2%; width: 24%;}
.bild.hoverpics.jetzt_digital .singlebild:nth-of-type(3) {top: 11.5%; left: 64.3%; width: 32.5%;}
.bild.hoverpics.jetzt_digital .singlebild:nth-of-type(4) {top: 66%; left: 64.3%; width: 22.2%;}
.bild.hoverpics.jetzt_digital .singlebild:nth-of-type(5) {top: 63%; left: 1.5%; width: 19%;}

.bild.hoverpics.support {width: 70%; margin: 0 auto;}
.bild.hoverpics.support .singlebild:nth-of-type(1) {top: 0%; left: 7.5%; width: 15.8%;}
.bild.hoverpics.support .singlebild:nth-of-type(2) {top: 0%; left: 36%; width: 22%;}
.bild.hoverpics.support .singlebild:nth-of-type(3) {top: 11%; left: 66.5%; width: 18.5%;}
.bild.hoverpics.support .singlebild:nth-of-type(4) {top: 56.2%; left: 52.8%; width: 17%;}


.bild.hoverpics .singlebild.alone {top: 0; left: 0; width: 100%;}

.bild.hoverpics .singlebild:hover,
.bild.hoverpics .singlebild.setAnimation {
    transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
}

/*---------------------------------------------------------------*/

/* =======================================================================
   GENERELLES LAYOUT & NEBENINHALT
   ======================================================================= */
/* general-site-styles */
section.sideContent article {padding: 0px 0 100px;}
.sideNav {margin:25px 0 0 35px; background-color: #efefef; position: sticky; top: 120px;}
.sideNav .related {list-style: none;}
.sideNav .related a {font-size: 1.3rem; white-space: nowrap; color: #626262;}
.sideNav .related li {padding: 0 25px 5px;}

.sideNav .related li:before {
    content: "›";
    font-size: 1.9rem;
    font-weight: 700;
    color: #347C13;
    margin-right: 10px;
}
.contentBlock p {text-align: left; margin-bottom: 12px; }
.contentBlock ul {
    list-style-type: none;
    margin: 0 0 20px 20px;
}
.contentBlock ul li {
    position: relative;
    margin-bottom: .5rem;
}
.contentBlock ul li:before {
    content: "›";
    font-size: 1.6rem;
    font-weight: 700;
    color: #347C13;
    margin-left: -20px;
    position: absolute;
    top: -.65rem;
}
.contentBlock .bx-viewport ul {
    margin: 0 0 20px 0;
}

/* ul ul und ol ul add on HE vom 19.12.2025 */

/* 1. Grund-Abstände für alle Listen glätten */
.contentBlock ol, 
.contentBlock ul {
    margin: 0 0 1.5rem 20px !important;
    padding: 0 !important;
}

/* 2. Listenelemente (Punkte) vereinheitlichen */
.contentBlock li {
    line-height: 1.6 !important; /* Etwas mehr Luft für bessere Lesbarkeit */
    margin-bottom: 8px !important;
    position: relative;
}

/* 3. Den grünen Pfeil (Icon) exakt auf Texthöhe bringen */
.contentBlock ul li:before {
    content: "›";
    font-size: 1.6rem;
    font-weight: 700;
    color: #347C13;
    position: absolute;
    left: -20px;
    /* WICHTIG: top auf 0 oder leicht ins Minus, damit es zum Text passt */
    top: -4px; 
    line-height: 1;
}

/* 4. Spezial-Fix für dein Bild: Unterliste direkt unter Hauptpunkt */
/* Das entfernt den extra Puffer, der den Text von Punkt 3 wegdrückt */
.contentBlock li > ul {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    margin-left: 20px !important;
}

/* Ende ul ul add on HE vom 19.12.2025 */

/* ol Add on HE 23.10.2025 */

.contentBlock ol {
    list-style-type: decimal; 
    margin: 0 0 20px 20px;
    counter-reset: item; /* Zähler initialisieren */
}

.contentBlock ol li {
    position: relative;
    margin-bottom: .5rem;
}

.contentBlock .bx-viewport ol {
    margin: 0 0 20px 0;
}

/* Gezielte Korrektur für verschachtelte Listen (Unterpunkte) [WEITERES ADD ON VOM 19.12.2025] */
.contentBlock ol ol {
    margin-top: 0.5rem;    /* Abstand zum Text direkt darüber */
    margin-bottom: 0.5rem; /* Abstand nach der Unterliste */
}

.contentBlock ol ol li {
    margin-bottom: 0.25rem; /* Kleinerer Abstand zwischen Unterpunkten für bessere Optik */
    line-height: 1.4;       /* Einheitlicher Zeilenabstand */
}

/* Verhindert, dass der letzte Unterpunkt den Abstand zum nächsten Hauptpunkt verdoppelt */
.contentBlock ol ol li:last-child {
    margin-bottom: 0;
}


/* Ende ol Add on HE 23.10.2025 */


.wp1s-slider-wrapper {
    padding: 20px 0;
}
.article h3 {
    margin: 50px 0 5px 0;
}
.article:first-of-type h3 {
    margin: 0 0 20px;
}
.contentBlock > h3 {
    margin: 0.25rem 0 5px 0;
}
.videoWrapper {margin: 20px 0;}
#video img {
    width: 100%;
    height: auto;
}

/*---------------------------------------------------------------*/

/* =======================================================================
   UNTERSEITEN-STILE
   ======================================================================= */
/* undersite-styles */

.activeSubSite {
    background-color: #347C13;
}
.sideNav li.activeSubSite:before {color: #ffffff;}
.sideNav .activeSubSite a, .sideNav .activeSubSite a:hover {color: #ffffff !important;}
.zoom-img {
    margin: 0 20px 15px 0;
    flex-basis: 40%;
    background-image: url("../img/Visualisierung_Zoom_Deutschland_Klick-1.png");
    background-size: cover;
    background-position: center;
}
.zoom-img + div {flex-basis: 60%}

.sideBild > div:first-of-type {margin: 0 20px 15px 0; }

.sideBild .bild {
    flex-basis: 40%;
    height: auto;
    text-align: center;
}
.sideBild .text {flex-basis: 60%}

.Datenmodell-img {
    margin: 0 0 15px 20px;
    flex-basis: 40%;
    background-image: url("../img/Datenmodell_Ausschnitt.png");
    background-size: cover;
    background-position: center;
    position: relative;
    margin-bottom: 30px;
}
.Datenmodell{flex-basis: 60%}
.Datenmodell-img span {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.anfrage {background-color: #E7F3E3; padding: 20px 21px 10px;margin-top:35px;}
.anfragebutton, .anfragebutton:hover {background-color: #347C13; color:#ffffff !important; padding: 10px 20px;}

.expertentipp > div {flex-basis: 50%;}
.expertentipp > div.tipp {
    flex-basis: 45%;
    padding: 15px 20px;
    background-color: #E7F3E3;
    margin: 15px 0 25px;
}

.smallPic {
    width: 50%;
    min-width:250px;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.ansprechpartner:first-of-type {margin-top: 20px;}
.ansprechpartner {border-top: 1px solid #999999; padding: 20px 0;}
.ansprechpartner img {
    width: 20%;
    min-width: 150px;
    margin: 0 20px 0 0;
    -webkit-box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    vertical-align: middle;
}
.ansprechpartner .bezeichnungteamseite {
    font-size: 1.3rem;
}
.ansprechpartner h3 {
    margin: 10px 0 0;
}

img#legal {height: auto;}

.kontakt {margin-bottom: 1rem;}
.kontakt .key {width: 8rem;}
.kontakt .daten {width: 25rem;}

.wp1s-slider-wrapper {
    margin: 0 auto 0 0;
}

.leistungsnavi h2 {text-align: center;}
.leistungsnavi .leistung {width: 24%;}
/*---------------------------------------------------------------*/

/* =======================================================================
   KONTAKTFORMULAR
   ======================================================================= */
/* Kontakt-Formular */

.kontaktform .formwrapper {
    margin: 20px 0 0;
}
.kontaktform .formwrapper div {
    width: 50%;
}
.kontaktform .formwrapper input,
.kontaktform textarea {
    width: 50%;
    background: transparent;
    border: 1px solid #626262;
    padding: 5px 10px 5px;
}
.kontaktform textarea {
    margin: 20px 0 0;
}
.kontaktform .upload {
    margin: 20px 0 10px;
}

.kontaktform ::placeholder {
    color: #626262;
    font-size: 1rem;
}
.kontaktform .formfooter p, .kontaktform .formfooter a {
    font-size: 0.85rem;
}
.kontaktform .wpcf7-list-item {
    margin: 0;
}
.kontaktform input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #626262;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-right: 12px;
}
.kontaktform input[type=checkbox]:checked {
    background: gray;
    background-image: url(../img/haekchen.svg);
}
.kontaktform .wpcf7-acceptance label {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.kontaktform .wpcf7-acceptance:last-of-type label {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}
.kontaktform input[type=submit] {
    background-color: #347C13;
    color: #ffffff;
    padding: 5px 40px;
    border: none;
    font-size: 1.2rem;
    margin-top: 20px;
}
.wpcf7 form .wpcf7-response-output {
    margin: 2em 0 1em;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}
/*---------------------------------------------------------------*/

/* =======================================================================
   SEITENFUSS
   ======================================================================= */
/* footer-styles */

footer {
    background-color: #4c4d4d;
    color: #ffffff;
    font-size: 1.33rem;
}

footer .wrapper {
    width: 80%;
    padding: 40px 5% 80px;
    margin: 0 auto;
}
footer a {
    color: #ffffff;
}
footer h2 {
    font-size: 2.9rem;
    color: silver; /* Testanker */
    text-align: center;
    padding: 20px 0 40px;
}
footer .kontakt-block div {
    width: 33%;
    padding-right: 35px;
}
footer .formwrapper {
    margin: 40px 0 20px;
}
footer .formwrapper div {
    width: 33%;
}
footer .formwrapper input,
footer textarea {
    width: 100%;
    background: transparent;
    border: 1px solid #888888;
    padding: 2px 10px 5px;
}
footer textarea {
    margin-bottom: 20px;
}
footer ::placeholder {
    color: #ffffff;
    font-size: 1rem;
}
footer .formfooter p, footer .formfooter a {
    font-size: 0.85rem;
}
footer .wpcf7-list-item {
    margin: 0;
}
span.wpcf7-list-item-label {
    margin-top: 2px;
}

footer input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #888888;
    width: 20px;
    height: 20px;
    margin-right: 12px;
}
footer input[type=checkbox]:checked {
    background: gray;
    background-image: url(../img/haekchen.svg);
}
footer .wpcf7-acceptance label {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
footer .sendButton {
    text-align: right;
}
footer input[type=submit] {
    background-color: #347C13;
    color: #ffffff;
    padding: 5px 40px;
    border: none;
    font-size: 1.2rem;
    display: block;
}
.wpcf7 form .wpcf7-response-output {
    margin: 2em 0 1em;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}
.copyright {
    background-color: #ffffff;
}
.copyright .wrapper {
    width: 80%;
    padding: 40px 5%;
    margin: 0 auto;
}
.copyright .footer-menu {
    list-style-type: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.copyright li {
    padding: 0 0 0 40px;
    position: relative;
}
.copyright li a {
    font-size: 0.9rem;
    color: #626262;
    white-space: nowrap;
}


/* =======================================================================
   SLICK SLIDER
   ======================================================================= */
/* slider styles */

.referenz-slider {
    margin: 0px 20px;
}

.referenz-slider img {
    max-height: 100px;
    max-width:  100%;
	
	display: flex;
    align-items: center;   /* vertikal zentrieren */
 /*   justify-content: center; /* optional: auch horizontal zentrieren */
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Abstand zwischen den Slides */
.referenz-slider .slick-slide {
    margin: 0 15px; /* Links und rechts je 15px Abstand */
}

/* Damit Slick die Margins nicht "abschneidet" */
.referenz-slider .slick-list {
    margin: 0 -15px; 
}

.referenz-slider.slick-initialized .slick-slide {
    display: flex !important;       /* überschreibt Slicks display:block */
    align-items: center;
    justify-content: center;
}



.wp1s-caption-wrapper .wp1s-caption-content {
    color: black!important;
	display: none;
}
.wp1s-caption-wrapper .wp1s-caption-title {
    color: black!important;
	display: none;
}

.wp1s-slider-wrapper ul li:before {display: none;}

footer .copyright span.borlabs-cookie-open-dialog-preferences {display: none;}

/* =======================================================================
   RESPONSIVE MEDIENABFRAGEN
   ======================================================================= */
@media (max-width: 1350px) {
    .logo {min-width: 200px; width: 200px;}
    header.header {padding: 30px 8%;}
    section.hero {margin-top: 90px;}
    .menu li a {font-size: 1.25rem;}
    footer .wrapper {width: 90%; padding: 40px 8%;}
}
@media (max-width: 1200px) {
    footer .kontakt-block {font-size:1.1rem}
    .copyright .wrapper {padding: 25px 5%;}
    .wp1s-slider-wrapper {
        width: auto !important;
    }
}
@media (max-width: 1050px) {
    .titel-leistung {font-size: 1.15rem;}
}

@media (max-width: 1024px) {
    .logo {min-width: 180px; width: 180px;}
    header.header {padding: 30px 6%;}
    .menu li a {font-size: 1.15rem;}
    footer .kontakt-block {
        -webkit-flex-direction: column;
        flex-direction: column;
        font-size:1.3rem;
    }
    footer .kontakt-block div {
        margin: 10px 0;
        width: 100%;
    }
    .menu li {
        padding: 0px 20px;
        position: relative;
    }
}

@media (max-width: 768px) { /* Mobile Breakpoint */
    footer .wrapper {width: 90%; padding: 40px 0;}
    .logo {min-width: 250px; width: 250px;}
    .hamburger {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: 24px;
        margin-left: auto;
    }
    .hamburger-span {
        display: block;
        width: 22px;
        height: 2px;
        background-color: #347C13;
        margin-bottom: 6px;
        transition: 0.2s;
    }
    .header .nav {
        justify-content: flex-start;
        padding-top: 20vh;
    }
    .header .nav {
        position: fixed;
        top: 91px;
        left: -150%;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: flex-start;
        justify-content: flex-start;
        background-color: #ffffff;
        z-index: -1;
        padding: 20px 8% 33%;
        transition: 0.2s;
        overflow-y: scroll;
    }
    .menu, .sideNav {display:none;}
    .mobile-menu {
        display:block;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
        width: 95%;
    }
    .mobile-menu li {padding: 5px 0 0 20px; position: relative;}
    .mobile-menu li ul {list-style: none; display: none;}
    .mobile-menu li.menu-item-has-children:after {
        content: "❯";
        font-size: 1.4rem;
        font-weight: 700;
        color: #347C13;
        margin-left: -20px;
        position: absolute;
        top: 0rem;
        right: 0;
    }
    .mobile-menu li.current_page_item.menu-item-has-children:after,
    .mobile-menu li.current-page-parent.menu-item-has-children:after,
    .mobile-menu li.current-menu-ancestor.menu-item-has-children:after  {
        transform: rotate(90deg);
    }
    .mobile-menu li a {
        font-size: 1.2rem;
        width: 100%;
        height: 100%;
        display: block;
    }
    .show-menu .header .nav {left: 0;}
    .show-menu .hamburger-span:nth-child(1) {transform: rotate(45deg); margin-bottom: -4px;}
    .show-menu .hamburger-span:nth-child(2) {width: 0;}
    .show-menu .hamburger-span:nth-child(3) {transform: rotate(-45deg); margin-top: -6px;}
    .show-menu .hamburger {height: 15px;}
    footer .kontakt-block {font-size:1.2rem}
    footer .formwrapper {-webkit-flex-direction: column; flex-direction: column; margin: 10px 0;}
    footer .formwrapper div {width: 100%; margin: 10px 0;}
    .formfooter {-webkit-flex-direction: column; flex-direction: column; }
    footer .sendButton {margin: 20px 0}
	
    footer h2 {font-size: 2.2rem; padding: 10px 0 25px;}
    main h1, main h2 {font-size: 1.8rem; line-height: 1.1; margin: 1rem 0 0.5rem;}
    main h3 {font-size: 1.3rem; line-height: 1.1;}
    .article h3 {margin: 40px 0 15px;}
	
    footer .h2 {font-size: 2.2rem; padding: 10px 0 25px;}
    main .h1, main .h2 {font-size: 1.8rem; line-height: 1.1; margin: 1rem 0 0.5rem;}
    main .h3 {font-size: 1.3rem; line-height: 1.1;}
    .article .h3 {margin: 40px 0 15px;}
	
    main section article.nav_breadcrumb {padding: 30px 0 20px;}
    section.sideContent article {padding: 0px 0 40px;}

    .anfrage, .picText, .expertentipp, .sideBild {-webkit-flex-direction: column; flex-direction: column;}
    .anfrage p:last-child {margin: 15px 0;}
    .picText .zoom-img, .picText .Datenmodell-img {width: 100%; min-height: 30vh;}
    .picText .Datenmodell-img {margin: 5px 0 35px;}
    .sideBild .bild, .picText div {flex-basis: 100%;}
    .bild.hoverpics .singlebild.alone {position: relative;}
    #legal {margin-top: 20px;}
    .smallPic {width: 100%; min-width: 100%; max-width: 100%;}


    #heroPic img {
        width: 150%;
        max-width: 150%;
        transform: translateX(-25%);
    }
    section.hero {overflow: hidden;margin-top: 98px;}
    .bx-wrapper img {
        width: 100%;
        max-width: 100%;
        left: -25%;
    }
    section.hero .wp1s-slider-wrapper {
        padding: 0;
    }

    .leistungen .flexcontainer {
        -webkit-flex-direction: column;
        flex-direction: column;
        margin-top: 0;
    }
    .leistung {width: 100%; margin-bottom: 15px;}
    .kopf-leistung {padding: 40px 0 15px; height: 140px;}
    .banner {width: 100%;margin-top: 15px;}

    .leistungsnavi .flexcontainer {
        -webkit-flex-direction: row;
        flex-direction: row;
    }
    .leistungsnavi .leistung {width: 48%;}
    .referenzRow  {
        -webkit-flex-direction: column;
        flex-direction: column;
        margin-top: 25px;
    }

    .referenzRow div {width: 100%;}

    section.kundenstimmen h3 {font-size: 1.3rem; margin-top: 25px;}
    .columns {columns: 1;}
    .columns p {text-align: left;}

    .ansprechpartner {
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: flex-start;
        align-content: flex-start;
        -webkit-align-items: flex-start;
        -ms-flex-align: flex-start;
        align-items: flex-start;
        padding: 20px 0 10px;
    }
    .ansprechpartner h3 {margin: 0;}
    .ansprechpartner img {min-width: 160px;}

    .banner .inhalt {padding: 25px 20px 140px;}

    .kontaktform .formwrapper input, .kontaktform textarea {width: 100%;}
	#BorlabsCookieWidget {display: none;}
	footer .copyright .wrapper {
      display: flex;
	  justify-content: flex-end;
	  padding: 25px 0;
		width: 90%;
   }
	footer .menu li a {
    font-size: 1rem;
  }
   footer .copyright span.borlabs-cookie-open-dialog-preferences {display: inline;}
   footer .copyright span.borlabs-cookie-open-dialog-preferences a {
     font-size: 1rem;
     color: #626262;
     white-space: nowrap;
     margin-left: 25px;
   }
	.holderClass {left: 0;}
	#mailContact {bottom: 50px;}
	#telContact {bottom: 110px;}
	.holderClass svg {width: 32px !important;}
	.holderHide {
        opacity: 0;
        pointer-events: none;
        transform: translateY(25px);
    }
}
@media (max-width: 620px) {
    .kontakt .key {width: 90%;}
    .kontakt .daten {width: 90%;}
	footer .footer-menu li {padding: 0px 5px;}
	footer .footer-menu li a {font-size: 1rem !important;}
	footer .copyright span.borlabs-cookie-open-dialog-preferences a {margin-left: 5px; font-size: 1rem}
}
@media (max-width: 500px) {
  .ansprechpartner.flexRow {
      -webkit-flex-direction: column;
      flex-direction: column;
  }
  footer .copyright .wrapper {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
	footer .copyright span {text-align: right;}
}
@media (max-width: 450px) {
    .logo {min-width: 200px; width: 200px;}

    .leistungsnavi .flexcontainer {
        -webkit-flex-direction: column;
        flex-direction: column;
        margin-top: 0;
    }
    .leistungsnavi .leistung {width: 100%;}
}
#touchsurface {
    overflow: hidden;
    position: relative;
    left: 0;
    transition: left linear .5s;
    -webkit-transition: left linear .5s;
    -moz-transition: left linear .5s;
    -ms-transition: left linear .5s;
    -o-transition: left linear .5s;
}
.beitrag.inner {
    float: left;
    list-style: none;
    position: relative;
}

.touchslideWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.header-menu .sub-menu{
    display: none;
    position: absolute;
    left: -15px;
    margin: 0;
    padding: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #f0ecf2;
    margin-top: 0px;
    z-index: 99;
    padding-bottom: 5px;
}

.header-menu .sub-menu .sub-menu{
    right: 0px;
    transform: translateX(100%) translateY(-34px);
}

.header-menu .sub-menu li{
    display: block;
    padding: 5px 15px;
    margin: 0;
    min-width: 200px;
}
.header-menu  .sub-menu li a{
    color: #303132;
    transition: 0.3s all;
    padding: 2px 0;
    font-size: 14px;
}

.read_more_ctr{
    position: relative;
    overflow: hidden;
}

.more_ctr{
    display: none;
}

.read_more_active{
    height: unset!important;
}

.read_more_active:after{
    display: none;
    height: unset;
}

.read_more_btn{
    cursor: pointer;
    margin: 0;
    font-weight: bold;
    padding-top: 0px;
}

.read_more_btn:hover{
    text-decoration: underline;
}

/* neuer shortcode spoiler HE 19 12 2025 */

.custom-spoiler-wrapper {
    display: inline;
}

.spoiler-btn {
    display: inline;
    background: none;
    border: none;
    /*color: inherit;*/
	color: #347C13;
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: inherit;
    text-decoration: none;
}

.spoiler-btn:hover {
    text-decoration: underline;
	color: #347C13 !important;
}

.spoiler-content {
    /* Optional: Eine leichte farbliche Nuance für den eingeblendeten Text */
    border-bottom: 1px dotted #ccc;
}

/* ende shortcode spoiler */



   #wpcf7-f1241-o1 input,
   #wpcf7-f1416-o1 input[type=email] {
        width: 100%;
        background: transparent;
        border: 1px solid #888888;
        padding: 7px 10px;
    }
    #wpcf7-f1241-o1 input[type=submit], 
	#wpcf7-f1416-o1 input[type=submit] {
        background-color: #347C13;
        color: #ffffff;
        padding: 5px 40px;
        border: none;
        font-size: 1.2rem;
        display: inline-block;
        margin-top: 15px;
        width: unset;
    }
.sideNav ul.children {list-style: none;}

.workshop_container {
    display: flex; 
    padding: 20px 5px; 
    justify-content: space-between; 
    margin-bottom: 18px;
}
.workshop {
    width: 48%; 
    background-color: #f0f0f0; 
    padding: 15px; 
    border-radius: 10px;
}
.experten_container {
	display: flex; 
	margin-top: 20px; 
	justify-content: space-between; 
	padding: 10px 10px 0; 
}
.experte {
	display: flex; 
    width: 48%; 
	align-items: center;
	text-align: left;
}
@media (max-width: 800px) {
.workshop, .experte {width: 100%;margin-bottom: 25px;}
.workshop_container, .experten_container {
    flex-wrap: wrap; 
}
}
/* Zeitstrahl */
/* #time {display: flex;justify-content: flex-end;margin: 50px 0 150px}
    #left {
        border-right: 3px solid #347C13;
        width: 50%;
        display: flex;
        align-items: flex-end;
        flex-direction: column;
    }
    #right {width: 50%;} 
    #time h3 {
        font-size: 2rem;
        color: #347C13;
        margin-top: 0;
    }
    #left h3 , #left h3 + div {text-align: right;}
    #right > div, #left > div  {
        position: relative;
        padding: 0 50px;
        width: 100%;
        transform: translateY(1000px);
        opacity: 0;
        transition: transform 1s linear, opacity 2s linear;
    }
    #time span {
        background: #347C13;
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
    #time span + p {display: none;}
    #right span  {left: -11px;top: .5rem;}
    #left span  {right: -11px;top: .5rem;} */
    
    #time {display: flex; justify-content: flex-start; margin: 50px 0}
    #left {
        border-right: 3px solid #347C13;
        width: 50%;
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        position: relative;
    }
    #right {width: 50%; position: relative;} 
    #time h3 {
        font-size: 2rem;
        color: #347C13;
        margin-top: 0;
		margin-bottom: 5px;
    }
    #left h3 , #left h3 + div {text-align: right;}
    #right > div, #left > div  {
        position: absolute;
        top: 0;
        padding: 0 50px;
        width: 100%;
        transform: translateY(1000px);
        opacity: 0;
        transition: transform 1s linear, opacity 2s linear;
    }
    #time span {
        background: #347C13;
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
    #time span + p {display: none;}
    #right span  {left: -11px;top: .5rem;}
    #left span  {right: -11px;top: .5rem;}

@media (max-width: 500px) {
	#time {display: block;position: relative;}
	#left {
	border-right: none;
	border-left: 3px solid #347C13;
	width: 100%;
	position: absolute;
	}
	#right {width: 100%;position: absolute;}
   #right > div, #left > div {
	padding: 0 20px;
	width: 100%;
	}
	#left span {
	left: -11px;
	right: auto;
	}
	#left h3, #left h3 + div {text-align: left;}
	
}