@charset "UTF-8";
/*
Theme Name: Tiskens Steuerungs- und Antriebstechnik
Theme URI: http://www.tiskens.de/
Author: SIGN+DESIGN Werbeagentur
Author URI: https://www.signunddesign.com/
Description: Wozu lange um den „heißen Brei“ reden: Unser Ziel ist Ihr Erfolg! Denn nur erfolgreiche Kunden sind auf Dauer glückliche Kunden. Und um Sie glücklich zu machen, richten wir unsere Energie auf Ihren stimmigen Auftritt und die Entwicklung zielführender Kommunikationsmaßnahmen. Werbung darf bei uns Spaß machen und ist trotzdem niemals Selbstzweck. Was zählt ist Ihr Erfolg! Die Früchte unserer Bemühungen: treue, langjährige Kunden und zahlreiche Weiterempfehlungen – mit ein Grund dafür, dass viele unserer Kunden aus dem Bereich Immobilien stammen. Und hier liegt auch seit über 20 Jahren ein Schwerpunkt unserer Arbeit.
Version: 2.2
*/

/*Global Reset*/

body,html,h1,h2,h3,h4,h5,h6,p,ul,ol,li{padding:0;margin:0;}
body,html{overflow: unset!important;width:100%;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

/* ########## Fonts ++ WICHTIG font-display: swap; ++ ########## */


/* ########## Variables ########## */

* {
    --font-family: "Open Sans", sans-serif;
    --transition: .45s ease;
    --wrp-width: 1240px;
    --font-size: 18px;
    --line-height: calc(var(--font-size) * 1.6);
    --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    --border-radius: 15px;
    --primary-color: #F49E01;
    --secondary-color: #B1C800;
    --text-color: #3D3C3F;
    --headline-color: #888;
}

/* ########## Globals ########## */
body.nav-open {overflow: hidden !important;}

html {scroll-behavior: smooth;}
body {font-size: var(--font-size); font-family: var(--font-family), sans-serif; line-height: var(--line-height); color: var(--text-color);}
img {-ms-interpolation-mode:bicubic; vertical-align: bottom;}
svg {width: 100%; height: 100%;}
hr {border:none;height:1px;background:#ddd; margin:0;}

.wrp {max-width: var(--wrp-width); width: 90%; margin: 0 auto; position:relative; box-sizing:border-box;}

/* Margins */

.mb {margin-bottom: 100px;}
.mb50 {margin-bottom: 50px;}

@media (max-width: 500px) {
    .mb {margin-bottom: 50px;}
    .mb50 {margin-bottom: 25px;}
    .wrp {width:100%;}
}

/* Page Build */

main.withsidebar .page-build {display: grid; grid-template-columns: 65% 25%; align-items: flex-start; justify-content: space-between; max-width: var(--wrp-width); width: 90%; margin: 0 auto;}
main.withsidebar .content .wrp {width: 100%;}

@media (max-width: 1024px) {
    main.withsidebar .page-build {grid-template-columns: 100%;}
    main.withsidebar .page-build .sidebar {display: none;}
}

/* Typo Styles */

h1{margin:0 0 30px 0;font-size:38px;line-height:52px;font-weight:700;max-width: 700px;}
h2{margin:0;font-size:32px;line-height:42px;font-weight:300;text-transform:uppercase;color:var(--headline-color);}
h3{margin:0 0 30px 0;font-size:38px;line-height:52px;font-weight:700;max-width: 700px;}
h4{margin:0 0 10px 0;font-size:20px;font-weight:700;}

a {text-decoration: none; outline:none !important; color: var(--text-color); transition: var(--transition);}
a:hover {color: var(--secondary-color); transition: var(--transition);}

.btn {padding: 12px 16px; background: var(--primary-color); display: inline-block;}

p {margin-bottom: var(--line-height);}
p:last-child {margin-bottom: 0;}
address {font-style: normal; color: var(--text-color);}
address a {display: block;}
ol, ul {margin-bottom: var(--line-height);}
li {margin-left: 20px;}
ul {list-style-type: none;}


.flyout {position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:10}
.home .flyout {position:fixed;top:auto;bottom:50px;transform:none;}
.flyout a {position:absolute;width:100%;height:100%;z-index:10;}
.flyout svg {width:40px;height:40px;}
.flyout .mail{position:relative;text-align:center;display:grid;justify-items: center;align-items: center;background:var(--primary-color);box-sizing: border-box;width:100px;height:100px;margin-bottom:10px;transition: var(--transition);}
.flyout .telefon{position:relative;text-align:center;display:grid;justify-items: center;align-items: center;background:var(--primary-color);box-sizing: border-box;width:100px;height:100px;transition: var(--transition);}

.flyout .mail:hover,.flyout .telefon:hover {background:var(--secondary-color);transition: var(--transition);}

/* ########## Mainnav ########## */

#mainnav ul.mainnav.smart {display:none;}
#mainnav {display: block; transform: translate(0);}
#mainnav ul.mainnav.desktop li {font-family:"din-1451-lt-pro", sans-serif;text-transform:uppercase;list-style-type: none; font-size: 20px; margin-left: 40px;}
#mainnav ul.mainnav.desktop li:first-child {margin-left:0;}
#mainnav ul.mainnav.desktop li a{display:block; color: var(--text-color); transition: var(--transition); padding: 40px 0;}
.scrolled #mainnav ul.mainnav.desktop li a{display:block; color: var(--text-color); transition: var(--transition); padding: 27px 0;}
#mainnav ul.mainnav.desktop li.menu-item-type-custom a{display:block; color: #fff; transition: var(--transition); padding: 5px 40px;box-sizing:border-box;background:var(--secondary-color);border-radius:20px}
#mainnav ul.mainnav.desktop li.menu-item-type-custom a:hover{color: #fff;background:var(--primary-color);transition: var(--transition);}
#mainnav ul.mainnav.desktop li a:hover, #mainnav ul.mainnav.desktop li.current-menu-item a{color: var(--primary-color); transition: var(--transition);}
#mainnav ul.mainnav.desktop li.current-page-ancestor a{color: var(--primary-color); transition: var(--transition);}

/* Submenu */

@media (min-width: 1025px){

    #mainnav ul.mainnav.desktop {display: flex; align-items: center; margin: 0;}
    html.scrolled #mainnav ul.mainnav li a {padding: 15px 0; transition: var(--transition);}

    #mainnav ul.mainnav li.menu-item-has-children {position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {position: absolute; top: 115px; left: 0; display: block; height: auto; max-height: 0; overflow: hidden;}
    .scrolled #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {top: 89px;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {width:350px; height: 100%;box-sizing:border-box;transition: 0.8s ease; background: rgba(255,255,255, 0.9); margin: 0 0 5px 0;}
    #mainnav ul.mainnav li.menu-item-has-children:hover > ul.sub-menu {max-height: 674px; padding: 0; overflow: visible; margin-top: -6px;}

    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover {background: var(--primary-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:hover a {color: #fff;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {font-size:18px;color:var(--text-color);padding: 10px;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.current-menu-item a {color: #fff;background:var(--primary-color);transition: var(--transition);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li:last-child {margin-bottom: 0;}

    /* Zweite Ebene */

    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu {position: absolute; left: 100%; top: 6px; overflow: hidden;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover ul.sub-menu {overflow: visible;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li {background: #f5f5f5;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li a {color: var(--text-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li:hover a {color: var(--primary-color);}

    /* Desktop ausblenden */

    #mainnav .head,
    #mainnav address.contact,
    #mainnav ul.mainnav li.back {display: none;}
}

@media (max-width: 4500px) {


    /* Offcanvas */

    #mainnav-smart ul.mainnav.smart {display:block;}
    #mainnav-smart {position: fixed; top: 0; right: 0; bottom: 0; background: rgba(254,252,250, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: 100%; max-width: 850px; transform: translateX(100%); transition: var(--transition); box-shadow: var(--box-shadow); z-index: 88;}
    #mainnav-smart.active {transform: translateX(0); transition: var(--transition);}
    #mainnav-smart .head {display: grid;grid-template-columns: auto auto 55px; align-items: center; padding: 20px 20px 20px 0; box-sizing: border-box; box-shadow: 0 0 8px rgba(0,0,0,0.05);}
    #mainnav-smart .head p {margin: 0; font-size: 25px; color: var(--text-color);}
    #mainnav-smart .head .buttons {display: flex; justify-content: center;justify-self: end;}

    #mainnav-smart .head .buttons a {width: 50px; height: 50px; border-radius: 2px; background: var(--primary-color); margin-left: 5px; display: flex; align-items: center; justify-content: space-around; }
    #mainnav-smart .head .buttons a:first-child {margin-left: 0;}
    #mainnav-smart .head .buttons a svg {width: 25px; height: 25px;}
    #mainnav-smart .head .buttons a svg g path {stroke: #fff}

    /* Submenu */

    #mainnav-smart ul.mainnav.smart {display: block;}
    #mainnav-smart ul.mainnav li {padding: 0; box-sizing: border-box; margin:0; border-bottom: 1px solid rgba(255,255,255, 0.5);background: none;list-style-type: none;}
    #mainnav-smart ul.mainnav li:hover {padding: 0; box-sizing: border-box; margin:0; background:none;list-style-type: none;}
    #mainnav-smart ul.mainnav li.current-menu-item a{background:var(--primary-color);list-style-type: none;}
    #mainnav-smart ul.mainnav li.current_page_ancestor a {background:var(--primary-color);}
    #mainnav-smart ul.mainnav li.menu-item-1117 {background: var(--secondary-color);font-weight: 700;color: #fff;list-style-type: none;position: absolute;top: 20px;right: 200px;text-align: center;border-radius: 30px;}
    #mainnav-smart ul.mainnav li a {padding: 13px 45px 13px 5%;display: block;text-transform: uppercase;font-size:18px;}
    #mainnav-smart ul.mainnav li:hover a {color:var(--text-color);}
    #mainnav-smart ul.mainnav li.current-menu-item a {color:#fff}
    #mainnav-smart ul.mainnav li.current_page_ancestor a {color:#fff;}
    #mainnav-smart ul.mainnav li.menu-item-1117 a {text-align:center;padding:8px 30px;color:#fff;}
    #mainnav-smart .opensubnav {cursor: pointer; width: 49px; height: 52px; position: absolute; right: 0; background:none; display: block; z-index: 100; box-sizing: border-box;}
    #mainnav-smart .opensubnav.active {background: var(--primary-color);}
    #mainnav-smart .opensubnav:after  {content: ''; transform: rotate(-45deg) translate(-50%, -50%); border: solid var(--text-color); border-width: 0 4px 4px 0; display: inline-block; padding: 3px; left: 50%; top:42%; position: absolute; transition: var(--transition);}
    #mainnav-smart .opensubnav.active:after  {content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg);  border: solid #fff; border-width: 0 4px 4px 0; left: 19px; top:18px; transition: var(--transition);}
    #mainnav-smart ul.mainnav li.current-menu-item .opensubnav:after {content: ''; transform: rotate(-45deg) translate(-50%, -50%); border: solid #fff; border-width: 0 4px 4px 0; display: inline-block; padding: 3px; left: 50%; top:42%; position: absolute; transition: var(--transition);}
    #mainnav-smart ul.mainnav li.current-menu-item .opensubnav.active:after  {content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg);  border: solid #fff; border-width: 0 4px 4px 0; left: 19px; top:18px; transition: var(--transition);}
    #mainnav-smart ul.mainnav li.current-page-ancestor .opensubnav:after {content: ''; transform: rotate(-45deg) translate(-50%, -50%); border: solid #fff; border-width: 0 4px 4px 0; display: inline-block; padding: 3px; left: 50%; top:42%; position: absolute; transition: var(--transition);}
    #mainnav-smart ul.mainnav li.current-page-ancestor .opensubnav.active:after  {content: ''; transform: rotate(45deg); -webkit-transform: rotate(45deg);  border: solid #fff; border-width: 0 4px 4px 0; left: 19px; top:18px; transition: var(--transition);}
    #mainnav-smart address.contact {padding: 5%; box-sizing: border-box; display: block;}

    /* Offcanvas Sub Layer 1 */

    #mainnav-smart li.menu-item-has-children ul.sub-menu {display: none; transition: var(--transition); margin-bottom: 0;}
    #mainnav-smart li.menu-item-has-children.active ul.sub-menu {display: block;margin-left: 5%;margin-bottom:30px}
    #mainnav-smart li.menu-item-has-children.active ul.sub-menu li {border-bottom:0;font-size:16px;}
    #mainnav-smart li.menu-item-has-children.active ul.sub-menu li a {color:var(--text-color);font-size:15px;background:none;padding: 0;margin:10px 0}
    #mainnav-smart li.menu-item-has-children.active ul.sub-menu li:hover a {background:none;}
    #mainnav-smart li.menu-item-has-children.active ul.sub-menu li.current-menu-item {background:none;}
    #mainnav-smart li.menu-item-has-children.active ul.sub-menu li.current-menu-item a {background:none;color:var(--primary-color);}
    #mainnav-smart li.menu-item-has-children.active ul.sub-menu li ul.sub-menu li a {padding-left: 10%;}

    /* Offcanvas Sub Layer 2 */

    #mainnav-smart li.menu-item-has-children ul.sub-menu li.menu-item-has-children .opensubnav {background: #f5f5f5;}
    #mainnav-smart li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children ul.sub-menu {display: none; transition: var(--transition);}
    #mainnav-smart li.menu-item-has-children.active ul.sub-menu li.menu-item-has-children.active ul.sub-menu {display: block; transition: var(--transition);}

    #mainnav-smart ul.offcanvas-menu li.back a:before {display: none;}

    /* Mainnav Toggle */

    .mainnav-toggle {border-radius: 2px; display: block!important; position: relative; z-index: 10;width: 50px;height: 50px;background: var(--primary-color);box-shadow:none; transition: var(--transition);}
    .mainnav-toggle.off {border-radius: 2px; display: block!important; position: fixed; z-index: 10; top: 50px; right: 30px;transform: translateY(-50%);width: 40px;height: 40px;background:none;transition: var(--transition);}
    .scrolled .mainnav-toggle.off {top: 40px;transition: var(--transition);}
    .mainnav-toggle.off.active {display:none!important}
    .mainnav-toggle .btn-mainnav-toggle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 35px;cursor: pointer;}
    .mainnav-toggle .btn-mainnav-toggle span {display: block;width: 100%;border-radius: 4px;height: 2px;background: var(--text-color);transition: all .3s;position: relative;}
    .mainnav-toggle.active .btn-mainnav-toggle span {display: block;width: 100%;border-radius: 4px;height: 2px;background: #fff;transition: all .3s;position: relative;}
    .mainnav-toggle .btn-mainnav-toggle span + span {margin-top: 7px;}
    .mainnav-toggle .btn-mainnav-toggle.active span + span {margin-top: 13px;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(1) {animation: ease .7s top forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(1) {animation: ease .7s top-2 forwards;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(2) {animation: ease .7s scaled forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(2) {animation: ease .7s scaled-2 forwards;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(3) {animation: ease .7s bottom forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(3) {animation: ease .7s bottom-2 forwards;}

    @keyframes top { 0% {top: 0; transform: rotate(0);} 50% {top: 15px;transform: rotate(0);} 100% {top: 15px;transform: rotate(45deg);} }
    @keyframes top-2 { 0% {top: 15px;transform: rotate(45deg);} 50% {top: 15px;transform: rotate(0deg);} 100% {top: 0;transform: rotate(0deg);} }
    @keyframes bottom { 0% {bottom: 0;transform: rotate(0);} 50% {bottom: 15px;transform: rotate(0);} 100% {bottom: 15px;transform: rotate(135deg);} }
    @keyframes bottom-2 { 0% {bottom: 15px;transform: rotate(135deg);} 50% {bottom: 15px;transform: rotate(0);} 100% {bottom: 0;transform: rotate(0);} }
    @keyframes scaled { 50% {transform: scale(0);} 100% {transform: scale(0);} }
    @keyframes scaled-2 { 0% {transform: scale(0);} 50% {transform: scale(0);} 100% {transform: scale(1);} }

    #mainnav-overlay {position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.2); backdrop-filter: blur(7px); opacity: 0; z-index: -5; transition: var(--transition); visibility: hidden;}
    #mainnav-overlay.active {opacity: 1; z-index: 1; visibility: visible; transition: var(--transition);}
}

/* ########## Header ########## */

header {position: fixed; top: 0; width: 100%; z-index: 11; padding:0; box-sizing: border-box; background: #fff; box-shadow: var(--box-shadow);}
header .header-grid {display: grid; grid-template-columns: 225px auto; grid-template-rows: auto; justify-items: start; align-items: center; justify-content: space-between;transition: var(--transition)}
.scrolled header .header-grid {display: grid; grid-template-columns: 150px auto; transition: var(--transition)}
header .header-grid .logo {width: 100%;}
header .header-grid .logo img {width: 100%;height:auto;max-height:inherit!important}
header .header-grid .logo a {display: flex; align-items: center;}
header .header-grid .mainnav-toggle {display: none;justify-self: end;}

/* Kopfbereich Startseite / Unterseite  */

.stage {aspect-ratio: 2/1; width: 100%; position: relative; margin-top: 100px;background:#000;}
.home .stage.mb {margin-bottom:0;}
.stage .stage-content {color:#fff;font-size:38px;line-height:52px;font-weight:700;max-width:850px;margin-top:20px}
.stage .stage-content p{display:block;margin:0;}
.stage .stage-content strong {display:block;margin:0;color:#fff;font-size:43px;line-height:60px;font-weight:300;text-transform: uppercase}
.stage .stage-content .btn {margin-top:30px;margin-right:10px;padding: 4px 40px;background: var(--primary-color);display: inline-block;border:1px solid var(--primary-color);color:#fff;font-size:18px;font-weight:700;text-align:center;border-radius:40px; transition: var(--transition);}
.stage .stage-content .btn-border {margin-top:30px;padding: 4px 40px;background: none;display: inline-block;border:1px solid var(--primary-color);color:#fff;font-size:18px;font-weight:700;text-align:center;border-radius:40px; transition: var(--transition);}

.stage .stage-content .btn:hover {background: var(--secondary-color);border:1px solid var(--secondary-color); transition: var(--transition);}
.stage .stage-content .btn-border:hover {background: var(--secondary-color);border:1px solid var(--secondary-color); transition: var(--transition);}

.stage .wrp {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}
.stage img {width: 100%; height: 100%; object-fit: cover; object-position: center;opacity:0.3}
.stage video {width:100%; height: 100%; object-fit: cover; object-position: center;opacity:0.3}
.stage.subpage {aspect-ratio: 3/.9; width: 100%; position: relative;}

.stage .platine {position:absolute;right:330px;top:-40px;max-width:345px}
.stage .liste {position:absolute;right:0;top:0;}
.stage .liste ul{margin:0;list-style-type: none}
.stage .liste ul li {margin:0;color:#fff;font-size:20px;line-height:44px;font-weight:700;text-transform: uppercase}
.stage .liste ul li a{color:#fff;transition: var(--transition);}
.stage .liste ul li a:hover{color:var(--secondary-color);transition: var(--transition);}

/* Trust Bar */
.trustbar {background:#fff;border-bottom:1px solid #e8e8e8;padding:28px 0;margin-bottom:50px;}
.trustbar .wrp {display:flex;align-items:center;justify-content:space-between;gap:20px;}
.trustbar-item {display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;flex:1;}
.trustbar-item svg {color:var(--primary-color);flex-shrink:0;width:26px;height:26px;}
.trustbar-highlight {font-size:20px;font-weight:700;color:#3D3C3F;line-height:1.1;}
.trustbar-label {font-size:13px;color:#888;font-weight:400;line-height:1.3;white-space:nowrap;}
.trustbar-divider {width:1px;height:50px;background:#e0e0e0;flex-shrink:0;}

.introblock {}
.introblock h2 {display:block;margin:0;color:#fff;font-size:43px;line-height:60px;font-weight:300;text-transform: uppercase}
.introblock h3 {color:#fff;font-size:38px;line-height:52px;font-weight:700;max-width:850px;margin:0 0 20px 0}
.introblock .btn {margin-top:30px;margin-right:10px;padding: 13px 40px;background: var(--primary-color);display: inline-block;border:1px solid var(--primary-color);color:#fff;font-size:18px;font-weight:700;text-align:center;border-radius:40px; transition: var(--transition);}
.introblock .btn-border {margin-top:30px;padding: 13px 40px;background: none;display: inline-block;border:1px solid var(--primary-color);color:#fff;font-size:18px;font-weight:700;text-align:center;border-radius:40px; transition: var(--transition);}
.introblock .btn:hover {background: var(--secondary-color);border:1px solid var(--secondary-color); transition: var(--transition);}
.introblock .btn-border:hover {background: var(--secondary-color);border:1px solid var(--secondary-color); transition: var(--transition);}

/* ########## Content ########## */

/* Text */

.text.multiple-col .wrp {columns: 2 350px; column-gap: 4em;}
.text.align-center {text-align: center;}
.text h2:after {content:"";display:inline-block;background:url(assets/icon-dots.svg) right top no-repeat;background-size:45px;width:45px;height:12px;vertical-align: middle;margin-left:20px;}
/* Vorschlag A – ul: Akzentliste */
.text ul {list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; flex-direction: column; gap: .5rem;}
.text ul li {margin: 0; padding: .65rem 1rem; border-left: 3px solid var(--primary-color); background: rgba(244,158,1,0.07); border-radius: 0 3px 3px 0; line-height: 1.6; transition: background .2s;}
.text ul li:hover {background: rgba(244,158,1,0.13);}
.text ul li strong {color: var(--primary-color);}

/* Vorschlag B – ol: Grid-Kacheln mit Nummerierung */
.text ol {list-style: none; padding: 0; margin: 0 0 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; counter-reset: ol-counter;}
.text ol li {counter-increment: ol-counter; display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem; margin-left: 0; background: rgba(244, 158, 1, 0.07); border: 1px solid #e8e8e8; border-top: 2px solid var(--primary-color); border-radius: 3px; line-height: var(--line-height); color: var(--text-color);}
.text ol li::before {content: counter(ol-counter, decimal-leading-zero); flex-shrink: 0; font-family: var(--font-family), sans-serif; font-size: var(--font-size); font-weight: 700; color: var(--primary-color); line-height: var(--line-height);}
.text ol li strong {color: var(--primary-color);}


.textbild-startseite .wrp {display:grid;grid-template-columns: 60% auto;gap:0;align-items: center;}
.textbild-startseite .wrp .bild img {width:100%;height:100%;object-fit: cover;max-height:630px;}
.textbild-startseite .wrp .arrow svg{width:36px;height:36px;}
.textbild-startseite .wrp .text {font-size:22px;line-height:38px;font-weight:600;position:absolute;background:rgba(255,255,255, 0.9);padding:40px;max-width:600px;justify-self: end;}
.textbild-startseite .wrp .arrow{position: absolute;bottom: 10%;right: 33%;}
.textbild-startseite .wrp .text h2{margin:0;font-size:28px;line-height:38px;font-weight:300;color:var(--headline-color);text-transform:uppercase;}
.textbild-startseite .wrp .text h2:after {display:none;}

/* Text Bild */
.home.page .textbild.erstbild {margin-bottom:50px;}
.page .textbild.mb.erstbild {margin-bottom:100px;}
.page .textbild.erstbild {margin-bottom:50px;}
.home.page .textbild.mb.ersttext {margin-bottom:100px;}
.page .textbild.mb.ersttext {margin-bottom:50px;}
.textbild .wrp {display: grid; align-items: center; justify-content: space-between; box-sizing: border-box; background: #fff;}
.textbild .text {border-radius: 5px 0 0 5px; box-sizing: border-box;}
.textbild .bild {width: 100%; height: 100%;}
.textbild .bild img {width: 100%; height: 100%; object-fit: cover;}
.textbild .wrp .arrow svg {width: 36px;height: 36px;margin-top: 40px;}
.textbild .wrp .text h2{margin:0;font-size:28px;line-height:38px;font-weight:300;color:var(--headline-color);text-transform:uppercase;}
.textbild .wrp .text h2:after {display:none;}
.home.page .textbild .wrp .text {font-size:28px;line-height:40px;font-weight:600;}
.page .textbild .wrp .text {font-size:28px;line-height:40px;font-weight:600;}




@media (max-width: 768px) {
    .textbild .text {order: 1!important;}
    .textbild .bild {order: 2!important;}
    .textbild .wrp {grid-template-columns: 100%!important; gap: 20px;}
}

/* Ansprechpartner */
.ansprechpartner {position:relative;margin-top:40px;}
.ansprechpartner .wrp {display:grid;grid-template-columns: 1fr 1fr; gap: 30px;}
.ansprechpartner .wrp .box {display:grid;grid-template-columns: 230px 1fr; gap: 25px; align-items: end; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden;}
.ansprechpartner .wrp .box .bild {width:230px;height:230px;overflow:hidden;}
.ansprechpartner .wrp .box .bild img {width:100%;height:100%;object-fit:cover;object-position: top;}
.ansprechpartner .wrp .box .content {box-sizing: border-box; padding: 15px 15px 10px 0;}
.ansprechpartner .wrp .box .content::before {content: 'Ansprechpartner'; display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-color); opacity: 0.35; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--primary-color);}
.ansprechpartner .wrp .box .content h2{text-transform:none;font-size:20px;font-weight:400;line-height:30px;margin:10px 0 0 0;padding-left:28px;color:var(--text-color);background:url(assets/platine-icon.svg) left center no-repeat;background-size:20px}
.ansprechpartner .wrp .box .content h3{font-size:16px;font-weight:300;line-height:26px;margin:0;color:var(--headline-color)}
.ansprechpartner .wrp .box .content .con-mail{font-size:15px;font-weight:500;color:var(--primary-color);}

.sidebar .ansprechpartner {position:relative;margin-top:0;}
.sidebar .wrp {display:block;width:100%;margin:0;padding:0;}
.sidebar .wrp .box {display:block;margin-bottom:30px;box-shadow:none;}
.sidebar .wrp .box .bild {width:100%;height:350px;max-height:350px;overflow:hidden;}
.sidebar .wrp .box .bild img {width:100%;height:350px;max-height:350px;object-fit:cover;object-position:top;}
.sidebar .wrp .box .content {padding:10px 0 0 0;border-top:none;}
.sidebar .wrp .box .content h2{text-transform:none;font-size:23px;font-weight:400;line-height:32px;margin:10px 0 0 0;padding-left:32px;color:var(--text-color);background:url(assets/platine-icon.svg) left center no-repeat;background-size:22px}
.sidebar .wrp .box .content h3{font-size:18px;font-weight:300;line-height:28px;margin:0;color:var(--headline-color)}
.sidebar h4{font-size:22px;font-weight:300;margin:0 0 15px 0;text-transform: uppercase}

/* Sidebar Kontakt */
.sidebar-contact {background: #fff;overflow: hidden;}
.sidebar-contact .contact {display: block; padding: 20px 22px; font-style: normal; font-size: 18px; line-height: 1.8; color: var(--text-color);background: #f8f8f8;}
.sidebar-contact .contact .company {font-weight: 700;}
.sidebar-contact .contact a {display: block; text-decoration: none;font-weight: 500; transition: color var(--transition);}
.sidebar-contact .contact a:first-of-type {margin-top: 6px;}
.sidebar-contact .contact a:hover {color: var(--text-color);}

/* Kundenlogos */

.kundenlogos .logos-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; list-style: none; margin: 0; padding: 0; align-items: stretch;}
.kundenlogos .logos-grid li {margin: 0; display: flex; align-items: center; justify-content: center; padding: 30px; background: #f8f8f8; box-sizing: border-box;}
.kundenlogos .logos-grid li a {display: flex; align-items: center; justify-content: center; width: 100%; transition: opacity var(--transition);}
.kundenlogos .logos-grid li a:hover {opacity: 0.7;}
.kundenlogos .logos-grid .logo-img {width: 100%; height: auto; max-height: 120px; object-fit: contain; display: block;}

@media (max-width: 640px) {
    .kundenlogos .logos-grid {grid-template-columns: repeat(2, 1fr); gap: 15px;}
    .kundenlogos .logos-grid li {padding: 20px;}
}

[data-wpr-lazyrender].teasercards {
    content-visibility: visible;
}
[data-wpr-lazyrender].ansprechpartner {
    content-visibility: visible;
}

/* Teasercards */

.teasercards .cards.no-carousel {display: grid; grid-column-gap: 20px; grid-row-gap: 20px; margin: 0;}
.teasercards .cards.no-carousel li {list-style-type: none; margin: 0;}
.teasercards .splide ul.cards {display: flex; grid-column-gap: unset;}

.teasercard-item {display: block; transition: transform 0.4s ease, box-shadow 0.4s ease;}
.teasercard-item:hover {transform: translateY(-5px) !important;}

.teasercard-item .img-wrp {width: 100%; aspect-ratio: 2/1.5; display: block;}
.teasercard-item .img-wrp img {width: 100%; height: 100%; object-fit: cover;}

.teasercard-item .teasercard-content {display: block; margin-top: 10px;}

.home.page .teasercard-item .teasercard-content h3 {font-size:28px;font-weight:400;margin:0;}
.page .teasercard-item .teasercard-content h3 {font-size:24px;font-weight:400;margin:0;}
.home.page .teasercard-item .teasercard-content .arrow {display: inline-block;width:22px;height:22px;margin-right:10px;}
.page .teasercard-item .teasercard-content .arrow {display: inline-block;width:20px;height:20px;margin-right:7px;}
.teasercard-item .teasercard-content svg path {transition: var(--transition);}
.teasercard-item:hover .teasercard-content svg path {fill:var(--secondary-color)!important;transition: var(--transition);}
.teasercard-item .teasercard-content .arrow {transition: transform 0.35s ease;}
.teasercard-item:hover .teasercard-content .arrow {transform: translateX(5px);}

.splide__arrows {position:absolute;right:100px;top:-60px}
.splide__arrow--next {right:0!important}
.splide__arrow--prev {
    left: -130px!important;
}
.splide__arrow {background: none!important;}
.splide__arrow svg {
    fill: #000;
    height: 35px!important;
    width: 35px!important;
}

.wrp.slider-r {
    width: calc(100vw - ((100vw - 1240px) / 2));
    margin-left: calc((100vw - 1240px) / 2);
    max-width:inherit;
}
@media (max-width: 1350px) {
    .wrp.slider-r {
        width: calc(100vw - ((100vw - 1100px) / 2));
        margin-left: calc((100vw - 1100px) / 2);
    }
    .home.page .teasercard-item .teasercard-content h3 {font-size: 22px;font-weight: 400;}
    .home.page .teasercard-item .teasercard-content .arrow {width: 20px;height: 20px;margin-right:5px;}
}

@media (max-width: 1024px) {
    .wrp.slider-r {
        width: 100vw;
        margin-left: 0;
    }

}

@media (max-width: 1024px) {
    .teasercards .cards.no-carousel {grid-template-columns: repeat(2, 1fr)!important;}
}

@media (max-width: 500px) {
    .teasercards .cards.no-carousel {grid-template-columns: 100% !important;}
}

/* Image */

.image img {display:block; width:100%; height:auto;}

.bildtrenner {width:100%; aspect-ratio: 4/0.8; overflow: hidden; position: relative;background:#000;}
.bildtrenner li a{color:#fff;transition: var(--transition);}
.bildtrenner li a:hover{color:var(--secondary-color);transition: var(--transition);}
.bildtrenner.basic {aspect-ratio: 4/0.4;}
.bildtrenner img {width:100%; height: 100%; object-fit: cover; object-position: center;opacity:0.3}
.bildtrenner .wrp {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}
.bildtrenner .wrp .stage-content h2 {color:#fff;font-size:32px;line-height:42px;font-weight:300;margin:0;}
.bildtrenner .wrp .stage-content h3 {color:#fff;font-size:38px;line-height:52px;font-weight:700;margin:0 0 30px 0;}
.bildtrenner.basic .wrp .stage-content h3 {max-width:inherit;margin:0;}
.bildtrenner .wrp .stage-content .btn {margin-top:0;margin-right:10px;padding: 13px 40px;background: var(--primary-color);display: inline-block;border:1px solid var(--primary-color);color:#fff;font-size:18px;font-weight:700;text-align:center;border-radius:40px; transition: var(--transition);}
.bildtrenner .wrp .stage-content .btn:hover {background: var(--secondary-color);border:1px solid var(--secondary-color); transition: var(--transition);}
.bildtrenner .wrp .stage-content .btn .arrow-w {width:13px;height:13px;margin-left:20px;transition: var(--transition);transform: scale(1)}
.bildtrenner .wrp .stage-content .btn:hover .arrow-w {transition: var(--transition);transform: scale(1.4)}
.bildtrenner .wrp .platine {
    position: absolute;
    right: 500px;
    top: -40px;
    max-width: 345px;
}
.bildtrenner .wrp .liste {
    position: absolute;
    right: 0;
    top: 0;
    width:530px;
}
.bildtrenner .wrp .liste ul {
    margin: 0;
    list-style-type: none;
}
.bildtrenner .wrp .liste ul li {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 44px;
    font-weight: 700;
    text-transform: uppercase;
}
/* Galerie */

.gallery .glightbox-gallery:not(.masonry) {display: grid; gap: 20px; margin-bottom: 0;}
.gallery .glightbox-gallery li {list-style-type: none; margin: 0 0 25px 0; border-radius: 5px;overflow: hidden; aspect-ratio: 1;}
.gallery .glightbox-gallery:not(.masonry) li {margin: 0;}
.gallery .glightbox-gallery li a {position: relative; display: block; overflow: hidden; height: 100%;}
.gallery .glightbox-gallery li a .overlay {width: 100%; position: absolute; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: var(--secondary-color); opacity: 0; transition: var(--transition);}
.gallery .glightbox-gallery li a:hover .overlay {opacity: 0.6; transition: var(--transition);}
.gallery .glightbox-gallery li a .overlay .icon-wrp {position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; transform: translate(-50%, -50%);}
.gallery .glightbox-gallery li a .overlay .icon-wrp svg {width: 100%; height: 100%; transform: scale(0); transition: var(--transition);}
.gallery .glightbox-gallery li a .overlay .icon-wrp svg path {fill: #fff;}
.gallery .glightbox-gallery li a:hover .overlay .icon-wrp svg { transform: scale(1); transition: var(--transition);}
.gallery .glightbox-gallery li img {width: 100%; height: 100%; object-fit: cover;}
.gallery .glightbox-gallery.masonry {gap: 25px; columns: 4; margin: 0 auto;}

.gallery .video-gallery-grid {display: grid; grid-column-gap: 50px; grid-row-gap: 50px;}
.gallery .video-gallery-grid .video-gallery-item {height: 220px; width: 100%; display: block; position: relative; overflow: hidden;}
.gallery .video-gallery-grid .video-gallery-item .overlay {width: 100%; position: absolute; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: var(--secondary-color); opacity: 0; transition: var(--transition); z-index: 4;}
.gallery .video-gallery-grid .video-gallery-item:hover .overlay {opacity: 0.6; transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp {position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; transform: translate(-50%, -50%);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg {width: 100%; height: 100%; transform: scale(0); transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg path {fill: #fff!important;}
.gallery .video-gallery-grid .video-gallery-item:hover .overlay .icon-wrp svg { transform: scale(1); transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item img {height: 100%; width: 100%; object-fit: cover; object-position: center; transform: scale(1.2);}


@media (max-width: 1024px) {
    .gallery .glightbox-gallery {grid-template-columns: repeat(4, 1fr)!important;}
    .gallery .video-gallery-grid {grid-template-columns: repeat(2, 1fr)!important;}
    .gallery .filterrow {display: grid; grid-template-columns: 100%; gap: 25px;}
    .gallery .filterrow #filter {flex-wrap: wrap;}
    #mainnav {
        display: none;
        transform: translate(0);
    }
}

@media (max-width: 550px) {
    .gallery .video-gallery-grid {grid-template-columns: 100%!important;}
    .gallery .glightbox-gallery {grid-template-columns: repeat(2, 1fr)!important;}
}


/* oEmbed */

.embed .respo-video{position: relative;height: 0;overflow: hidden;}
.embed .respo-video iframe {position: absolute; top: 0; left: 0; width: 100%;	height: 100%;}
.embed .respo-video ._brlbs-cb-youtube {margin-bottom: -56.25%;}

/* Accordion */

.accordion .item-accordion-head {cursor: pointer; position: relative; background: #f2f2f2; font-size:20px;margin-bottom:0; padding:20px 40px 20px 20px; border:0;font-weight:700;color:var(--text-color);transition: background-color 0.3s ease, color 0.3s ease;}
.accordion .active .item-accordion-head {background-color:var(--primary-color);color:#fff;}
.accordion .item-accordion-btn {width: 26px; height: 26px;float: right; margin: 0; cursor: pointer; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.accordion .item-accordion-btn:before {content: '+'; color:var(--text-color); position: absolute; width: 26px; height: 26px; text-align: center; line-height: 20px; font-size: 28px;transition: transform 0.3s ease;}
.accordion .item-accordion {margin-bottom: 5px; }
.accordion .item-accordion.hidden .item-accordion-btn:before {content: '+'; line-height: 20px;}
.accordion .item-accordion.active .item-accordion-btn:before {content: '-'; line-height: 22px;color:#fff}
.accordion .item-accordion.hidden.active .item-accordion-btn:before {content: '-'; line-height: 22px;color:#fff;}
.accordion .item-accordion.hidden .item-accordion-content {max-height:0;overflow:hidden;padding:0 40px;background:#f2f2f2;transition: max-height 0.4s ease, padding 0.4s ease;}
.accordion .item-accordion.hidden.active .item-accordion-content {max-height:2000px;padding:40px;margin-bottom:10px;}
.accordion .item-accordion.hidden .item-accordion-content:after {display:block;width: 0;height: 0;border-right: 100px solid #037CA9;border-top: 50px solid transparent;border-bottom: 50px solid transparent;}
.accordion .item-accordion.hidden .item-accordion-content ul {list-style-type: none}
.accordion .item-accordion.hidden .item-accordion-content ul li{margin:0;background:url(assets/square.svg) left center no-repeat;background-size:7px;padding-left:17px;}
/* ########## Blog + Sidebar ########## */

main.withsidebar .content .blog-grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 50px; grid-row-gap: 50px;}
main.withsidebar .content .blog-grid .post {width: 100%;}
main.withsidebar .content .blog-grid .post img {width: 100%; height: auto; object-fit: cover;}

article.singlepost .post-image {}
article.singlepost .post-image img {width: 100%; height: auto; object-fit: cover;}

/* Sidebar */

main.withsidebar .sidebar {width: 100%; position: -webkit-sticky; position: sticky; top: 150px;box-sizing: border-box;margin-bottom:100px}


@media (max-width: 1024px) {
    main.withsidebar .page-build .sidebar {display: none;}
}

@media (max-width: 768px) {
    main.withsidebar .content .blog-grid {grid-template-columns: repeat(2, 1fr);}
}

div.wpforms-container-full .wpforms-form .wpforms-submit-spinner {display:none!important}
div.wpforms-container-full.custom .wpforms-form input[type=text] {height:auto;padding:15px;}
div.wpforms-container-full.custom .wpforms-form input[type=tel] {height:auto;padding:15px;}
div.wpforms-container-full.custom .wpforms-form input[type=email] {height:auto;padding:15px;}
div.wpforms-container-full.custom .wpforms-form textarea {height:auto;padding:15px;}

div.wpforms-container-full.custom .wpforms-form input[type=submit], div.wpforms-container-full.custom .wpforms-form button[type=submit], div.wpforms-container-full.custom .wpforms-form .wpforms-page-button
{background-color: var(--primary-color);border:0; padding:13px 40px;color:#fff;font-weight:700;margin:30px 0 0 0}
div.wpforms-container-full.custom .wpforms-form input[type=submit]:hover, div.wpforms-container-full.custom .wpforms-form button[type=submit].hover, div.wpforms-container-full.custom .wpforms-form .wpforms-page-button:hover
{background-color: var(--secondary-color);border:0; padding:13px 40px;color:#fff;font-weight:700;margin:30px 0 0 0}
/* Downloads Block */
.downloads h2 {margin-bottom: 30px;}
.downloads-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px;}
.downloads-item {display: flex; align-items: center; gap: 20px; padding: 18px 24px; background: #fff; border: 1px solid #e8e8e8; border-left: 4px solid var(--primary-color); border-radius: 0 4px 4px 0; transition: var(--transition);}
.downloads-item:hover {border-left-color: var(--secondary-color); box-shadow: 0 2px 12px rgba(0,0,0,0.07);}
.downloads-icon {position: relative; flex-shrink: 0; color: var(--primary-color); line-height: 0;}
.downloads-ext {position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 700; color: #fff; background: var(--primary-color); padding: 1px 4px; border-radius: 2px; white-space: nowrap; line-height: 1.4;}
.downloads-meta {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.downloads-name {font-size: 16px; font-weight: 700; color: #3D3C3F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.downloads-desc {font-size: 13px; color: #888; line-height: 1.4;}
.downloads-size {font-size: 12px; color: #aaa;}
.downloads-btn {flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 22px; background: var(--primary-color); color: #fff; font-size: 14px; font-weight: 700; border-radius: 40px; text-decoration: none; white-space: nowrap; transition: var(--transition);}
.downloads-btn:hover {background: var(--secondary-color); color: #fff;}
@media (max-width: 600px) {
    .downloads-item {flex-wrap: wrap; gap: 12px;}
    .downloads-meta {flex-basis: calc(100% - 60px);}
    .downloads-btn {width: 100%; justify-content: center;}
    .downloads-name {white-space: normal;}
}

/* ########## Footer #######s### */

footer {position:relative;background:url(https://tiskens.de/wp-content/uploads/2026/03/energie-3.jpg) right bottom no-repeat;background-size:cover;padding:50px 0}
footer:after {content:"";display:block;width:100%;height:100%;background:rgba(0,0,0, 0.7);position:absolute;z-index:1;top:0;}
footer .wrp {position:relative;z-index:2;display:grid;grid-template-columns: 55% auto;gap:110px;align-items: center}
footer .wrp .claim{font-size:38px;font-weight:700;line-height:52px;color:#fff;}
footer .wrp .claim strong{font-size:32px;font-weight:300;line-height:43px;color:#fff;text-transform:uppercase}
footer .wrp .partnergrid{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:10px;}
footer .wrp .partnergrid .partnerbox img{width:100%;height:auto;}
footer .wrp .headline{font-size:32px;font-weight:300;line-height:43px;color:#fff;text-transform:uppercase;margin-bottom:15px;}

footer .boxen-wrp {width:90%;position:relative;z-index:10;max-width:1240px;display:grid;grid-template-columns: 1fr 1fr 1fr;gap:20px;margin:50px auto -90px auto;}
footer .boxen-wrp .box {position:relative;background:#F2F2F2;padding:30px;box-sizing: border-box;font-size:22px;font-weight:700;}
footer .boxen-wrp .box strong {font-size:18px;font-weight:300;text-transform:uppercase;}
footer .boxen-wrp .box svg {width:15px;height:15px;position:absolute;right:30px;bottom:30px;}
footer .boxen-wrp .box a {position:absolute;width:100%;height:100%;z-index:1;left:0;top:0;}
/* Bottom */

.bottom {padding:60px 0 20px 0;font-size:14px;}
.bottom .wrp {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.bottom .wrp ul{margin:0;list-style-type: none}
.bottom .wrp ul li{margin:0;display:inline-block;}
.bottom .wrp ul li:after{content:"-";display:inline-block;margin-left:5px;}
.bottom .wrp ul li:nth-child(5):after{display:none;}

/* 404 */

.error404 .stage {display: none;}
.pageerror {padding: 250px 0 100px 0; text-align: center;}

@media (max-width: 1920px) {
    .bildtrenner {aspect-ratio: 4 / 1;min-height: 450px;}
}
@media (max-width: 1240px) {
    .flyout .mail,.flyout .telefon {width:80px;height:80px;}
    #mainnav {margin-right:50px;}
    .stage .stage-content {font-size: 28px;line-height: 42px;max-width: 810px;}
    .stage .stage-content strong {font-size: 33px;line-height: 50px;}
    .introblock h3 {font-size: 28px;line-height: 42px;max-width: 810px;}
    .introblock h2{font-size: 33px;line-height: 50px;}
    .stage .liste {right:80px;}
    .stage .liste ul li {font-size: 16px;line-height: 38px;}
    .stage .platine {right:340px;}
    .textbild-startseite .wrp {grid-template-columns: 53% auto;}
    .textbild-startseite .wrp .arrow {right: 40%;}
    .bildtrenner .wrp .stage-content h2 {font-size: 28px;line-height: 40px;}
    .bildtrenner .wrp .stage-content h3{font-size: 28px;line-height: 40px;max-width: 570px;}
    .bildtrenner .wrp .liste ul li {font-size: 16px;line-height: 38px;}
    .text ul li {padding: .55rem .9rem;}
    .text ol {grid-template-columns: 1fr;}
    .splide__pagination__page {background: #f2f2f2!important;transform: scale(1)!important;height: 11px!important;margin: 5px!important;opacity: 1!important;width: 11px!important;}
    .splide__pagination__page.is-active { background: var(--primary-color)!important;transform: scale(1)!important}
}
@media (max-width: 1200px) {
    footer .wrp .claim {
        font-size: 33px;
        line-height:43px;
    }
    footer .wrp .claim strong {
        font-size: 28px;
        line-height: 38px;
    }
}
@media (max-width: 1100px) {
    .ansprechpartner .wrp .box .content h2 {font-size: 18px;}
    .ansprechpartner .wrp .box {
        display: block;
        gap: 0;
    }
    .ansprechpartner .wrp .box .bild {
        width: auto;
        height: 370px;
    }

    .ansprechpartner .wrp .box .content {
        box-sizing: border-box;
        padding: 15px;
    }
}
@media (max-width: 1024px) {
    .textbild-startseite .wrp .text {max-width: inherit;font-size: 18px;line-height: 33px;position: relative;}
    .textbild-startseite .wrp {grid-template-columns: 40% auto;}
    h1 {font-size: 34px;line-height: 48px;}
    h2 {font-size: 28px;line-height: 38px;}
    h3 {font-size: 30px;line-height: 44px;}
    .textbild-startseite .wrp .text h2 {font-size: 26px;line-height: 36px;}
    .textbild-startseite .wrp .arrow {right: 50%;bottom:0;}
    header .header-grid .logo {padding: 10px 0;}
    .wrp.slider-r {width: calc(100vw - ((100vw - 940px) / 2));margin-left: calc((100vw - 940px) / 2);}
    .bildtrenner .wrp .liste {position: absolute;right: 0;top: 0;width:100%;max-width: 420px;}
    .bildtrenner .wrp .platine {position: absolute;right: 43%;top: -60px;max-width: 310px;}
    footer .wrp .claim strong {font-size: 28px;line-height: 38px;}
    footer .wrp .claim {font-size: 32px;line-height: 46px;}
    footer .wrp .headline  {font-size: 28px;line-height: 38px;}
    footer .boxen-wrp .box {padding: 20px;font-size: 18px;}
    footer .boxen-wrp .box strong {font-size:14px;}
    /* Footer: Gap und Grid für Tablet-Bereich optimieren */
    footer .wrp {gap: 60px;}
    footer .boxen-wrp {grid-template-columns: 1fr 1fr;}
    footer .boxen-wrp .box:nth-child(3) {display: none;}
    /* Hamburger: an wrp-Rand ausrichten statt fixem Viewport-Abstand */
    .mainnav-toggle.off {right: 5%;}
    .scrolled .mainnav-toggle.off {right: 5%;}
    .textbild .wrp .text h2 {font-size: 26px;line-height: 36px;}
    .home.page .textbild .wrp .text {font-size: 24px;line-height: 36px;}
    .page .textbild .wrp .text {font-size: 24px;line-height: 36px;}
}
@media (max-width: 980px) {
    footer .wrp .partnergrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}
@media (max-width: 820px) {
    h1 {font-size: 30px;line-height: 44px;max-width:600px;}
    h3 {font-size: 30px;line-height: 44px;max-width:600px;}
    h2 {font-size: 24px;line-height: 34px;}
    .home.page .splide__list .teasercard-item .teasercard-content h3 {font-size:18px;}
    .home.page .teasercard-item .teasercard-content .arrow {width: 13px;height: 13px;margin-right: 0;}
    .textbild-startseite .wrp .text h2 {font-size: 22px;line-height: 32px;}
    .stage .liste {display:none;}
    .stage .platine {display:none;}
    .textbild-startseite .wrp {align-items:start}
    .textbild-startseite .wrp .text {padding:0 20px}
    .textbild-startseite .wrp .arrow {right: 70px;bottom: -20px;}
    .wrp.slider-r {width: calc(100vw - ((100vw - 750px) / 2));margin-left: calc((100vw - 750px) / 2);}
    .home.page .textbild .wrp .text {font-size: 20px;line-height: 32px;}
    .page .textbild .wrp .text {font-size: 20px;line-height: 32px;}
    .textbild .wrp .text h2 {font-size: 22px;line-height: 32px;}
    .bildtrenner {min-height:300px;}
    .bildtrenner .wrp .liste {display:none;}
    .bildtrenner .wrp .platine {display:none;}
    .bildtrenner .wrp .stage-content {text-align:center}
    .bildtrenner .wrp .stage-content h3 {max-width:inherit;}
    footer .wrp .claim strong {font-size: 24px;line-height: 34px;}
    footer .wrp .claim {font-size: 28px;line-height: 42px;}
    footer .wrp {grid-template-columns: 49% auto; gap: 40px;}
    footer .boxen-wrp {grid-template-columns: 1fr 1fr;}
    footer .boxen-wrp .box:nth-child(3) {display:none;}
    .flyout {position: fixed;right: 0;z-index: 10;top:50%;transform:translateY(-50%);bottom:auto;}
    /* Auf der Startseite: Flyout bleibt rechts, nicht absolute */
    .home .flyout {position: fixed;top:50%;bottom:auto;transform:translateY(-50%);}
    footer .wrp .partnergrid {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}
    footer .wrp .headline {font-size: 24px;line-height: 34px;}
}
@media (max-width: 768px) {
    /* ── Trust Bar ──────────────────────────────────────────────── */
    .trustbar .wrp {flex-wrap:wrap;justify-content:center;gap:16px;}
    .trustbar-item {flex:0 0 calc(33% - 16px);}
    .trustbar-divider {display:none;}
    .trustbar-label {white-space:normal;}

    /* ── stage.subpage: mehr Luft für Headline + Intro-Text ───── */
    .stage.subpage {aspect-ratio: 3/1.3; min-height: 230px;}

    /* ── Footer-Boxen (Beratung/Planung) zwischen 640–768px ───── */
    footer .boxen-wrp {display: none;}

    /* ── Mobile Contact Bar ──────────────────────────────────────
       DIN-Typografie + Ikonen-Leiste im technischen Stil.
       display:flex !important überschreibt display:grid der Basis.
    ─────────────────────────────────────────────────────────── */
    /* Startseite: .home .flyout (820px) überschreiben – sonst hängt es mittig */
    .flyout,
    .home .flyout {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        top: auto; transform: none;
        width: 100%;
        z-index: 100;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
        border-top: 2px solid var(--primary-color);
    }
    .flyout .mail,
    .flyout .telefon {
        display: flex !important;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 50px;
        margin-bottom: 0;
        border-radius: 0;
    }
    .flyout .mail {
        background: var(--text-color);
        border-right: 1px solid rgba(255,255,255,0.15);
    }
    .flyout .telefon {
        background: var(--primary-color);
    }
    /* Icons ausblenden – img und ggf. inline-svg (Plugin-Konvertierung) */
    .flyout .mail img,
    .flyout .telefon img,
    .flyout .mail svg,
    .flyout .telefon svg {display: none !important; visibility: hidden !important;}
    /* DIN-Labels – technisch, präzise, dem Unternehmen entsprechend */
    .flyout .mail::after {
        content: 'E-MAIL SCHREIBEN';
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.8px;
        font-family: "din-1451-lt-pro", sans-serif;
        pointer-events: none;
    }
    .flyout .telefon::after {
        content: 'JETZT ANRUFEN';
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.8px;
        font-family: "din-1451-lt-pro", sans-serif;
        pointer-events: none;
    }
    /* Seiteninhalt nicht von der Bar überdecken */
    .bottom {padding-bottom: 70px !important;}
    /* ── Ende Mobile Contact Bar ─────────────────────────────── */

    .textbild .bild {order: 1 !important;max-height:300px;}
    .textbild .text {order: 2 !important;}
    .wrp.slider-r {width: 90%;margin: 0 auto;}
    .teasercard-item .img-wrp{aspect-ratio: 3 / 1;}
    .splide__arrows {display:none;}
    .introblock .btn,.introblock .btn-border {font-size:16px;}
    .accordion .item-accordion.hidden.active .item-accordion-content {padding:20px;}
    .home.page .splide__list .teasercard-item .teasercard-content h3 {font-size:20px;}
    .home.page .teasercard-item .teasercard-content .arrow {width: 13px;height: 13px;margin-right: 0;}
    .home.page .teasercard-item .teasercard-content h3 {
        font-size: 20px;
        font-weight: 400;
    }
    .page .teasercard-item .teasercard-content h3 {
        font-size: 20px;
    }.page .teasercard-item .teasercard-content .arrow {
         display: inline-block;
         width: 13px;
         height: 13px;
         margin-right: 0;
     }
    .ansprechpartner .wrp .box .content h2 {font-size: 22px;padding-left: 28px;background-size: 20px;}

}
@media (max-width: 640px) {
    header .header-grid {grid-template-columns: 140px auto;}
    .stage {margin-top: 70px;aspect-ratio: 2 / 1.5;}
    .stage.subpage {aspect-ratio: 2 / 1.5;}
    .mainnav-toggle.off {top:35px; right: 5%;}
    main.withsidebar .page-build {width:100%;}
    .scrolled header .header-grid {grid-template-columns: 100px auto;}
    .scrolled .mainnav-toggle.off {top: 31px; right: 5%; transition: var(--transition);}
    .stage .stage-content strong {font-size: 24px;line-height: 46px;}
    .stage .stage-content {font-size: 22px;line-height: 36px;max-width: inherit;}
    .introblock h3 {font-size: 22px;line-height: 36px;max-width: inherit;}
    .introblock h2{font-size: 24px;line-height: 46px;}
    .introblock .btn, .introblock .btn-border {font-size: 14px;padding: 8px 15px;margin-top: 10px;}
    h2 {font-size: 20px;line-height: 32px;}
    .bildtrenner .wrp .stage-content h3 {font-size: 22px;line-height: 32px;}
    h1 {font-size: 24px;line-height: 36px;max-width: inherit;}
    h3 ,.bildtrenner .wrp .stage-content h2{font-size: 24px;line-height: 36px;max-width: inherit;}
    .textbild-startseite .wrp {grid-template-columns: 100%;}
    .textbild-startseite .wrp .text {padding: 20px 0;}
    .textbild-startseite .wrp .bild {aspect-ratio: 3 / 1.3;}
    .textbild-startseite .wrp .bild img{width:100%;height:100%;object-fit:cover;object-position: left -80px}
    .textbild-startseite .wrp .arrow {position:relative;right:inherit;bottom:inherit;}
    footer .wrp {grid-template-columns: 100%;gap:50px;}
    footer .wrp .partnergrid {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;}
    footer .boxen-wrp {display:none;}
    .teasercards .cards.no-carousel {grid-template-columns:100%!important}
    .teasercard-item .img-wrp{aspect-ratio: 3 / 1;}
    .textbild .bild {aspect-ratio: 3 / 1;}
    .bottom {padding: 20px 0 20px 0;font-size: 13px;text-align:center;}
    .bottom .wrp {display:block;}
    .ansprechpartner .wrp .box .content h2 {font-size:22px;background-size: 18px;padding-left: 25px;}
    .ansprechpartner .wrp .box .content h3 {font-size: 16px;line-height: 30px;}
    .ansprechpartner .wrp .box .content .con-mail {font-size: 16px;}
    .textbild .wrp .text h2 {font-size: 20px;line-height: 30px;}
    footer .wrp .claim strong {font-size: 24px;line-height: 34px;}
    footer .wrp .headline {font-size: 22px;line-height: 32px;}
    footer .wrp .claim {font-size: 26px;line-height: 38px;}
    .stage .stage-content {margin:0;}
    .stage .stage-content .btn {font-size:14px;padding: 8px 15px;margin-top: 10px;}
    .stage .stage-content .btn-border{font-size:14px;padding: 8px 15px;margin-top: 20px;}
    .text h2:after {background-size: 35px;width: 35px;height: 12px;margin-left:10px;}
}
@media (max-width: 639px) {
    .ansprechpartner .wrp {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .ansprechpartner .wrp .box .bild {
        width: auto;
        height: 400px;
    }
}
@media (max-width: 480px) {
    .ansprechpartner .wrp .box .bild {
        width: auto;
        height: 370px;
    }
}

/* =====================================================
   ZUSÄTZLICHE OPTIMIERUNGEN - Version 2.2
   ===================================================== */

/* Accessibility Verbesserungen */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    display:none;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

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

/* Breadcrumb Navigation */
.breadcrumb {
    padding: 15px 0;
    font-size: 14px;
    color: #666;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.breadcrumb a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.breadcrumb .separator {
    margin: 0 8px;
    color: #999;
}

.breadcrumb [aria-current="page"] {
    color: var(--primary-color);
    font-weight: 500;
}

/* Post Navigation */
.post-navigation {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e5e5e5;
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    display: flex;
    flex-direction: column;
}

.post-navigation .nav-next {
    text-align: right;
}

.post-navigation a {
    text-decoration: none;
    color: var(--text-color);
    transition: color 0.3s;
}

.post-navigation a:hover {
    color: var(--primary-color);
}

.post-navigation .nav-subtitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 5px;
}

.post-navigation .nav-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .post-navigation .nav-links {
        grid-template-columns: 1fr;
    }

    .post-navigation .nav-next {
        text-align: left;
    }
}

/* Entry Meta / Footer */
.entry-meta {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.entry-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.post-categories,
.post-tags {
    margin-bottom: 10px;
}

.post-categories span,
.post-tags span {
    font-weight: 600;
    margin-right: 10px;
}

.post-categories a,
.post-tags a {
    display: inline-block;
    padding: 4px 12px;
    background: #f5f5f5;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 3px;
    font-size: 13px;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: all 0.3s;
}

.post-categories a:hover,
.post-tags a:hover {
    background: var(--primary-color);
    color: #fff;
}

/* 404 Error Page */
.error-404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.error-404 .content {
    max-width: 600px;
    padding: 40px 20px;
}

.error-404 .error-icon {
    color: var(--primary-color);
    margin-bottom: 30px;
}

.error-404 h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.error-404 .error-code {
    font-size: 18px;
    color: #999;
    margin-bottom: 20px;
}

.error-404 .error-message {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.error-404 .error-actions {
    margin-bottom: 40px;
}

.error-404 .search-hint {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #666;
}

.error-404 .helpful-links {
    text-align: left;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 8px;
}

.error-404 .helpful-links h2 {
    font-size: 18px;
    margin-bottom: 15px;
}

.error-404 .helpful-links ul {
    list-style: none;
}

.error-404 .helpful-links li {
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e5;
}

.error-404 .helpful-links li:last-child {
    border-bottom: none;
}

.error-404 .helpful-links a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}

.error-404 .helpful-links a:hover {
    color: var(--primary-color);
}

/* Accordion Verbesserungen */
.item-accordion-head {
    cursor: pointer;
    user-select: none;
}


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

picture img {
    display: block;
}

/* Scroll Behavior - Header bleibt sichtbar */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print Styles */
@media print {
    header,
    footer,
    .flyout,
    .sidebar,
    .post-navigation,
    .breadcrumb {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }

    .stage {
        min-height: auto;
        margin-top: 0;
    }

    .stage img,
    .stage video {
        display: none;
    }
}