/*
Theme Name: claas
Theme URI: https://www.intermedia-werbeagentur.de
Author: Intermedia Peters GmbH | Werbeagentur
Author URI: https://www.intermedia-werbeagentur.de
Description: WordPress-Theme mit lokalem Bootstrap 5.3.7 und Font Awesome 6.7.2
Version: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: claas
*/

:root{--primary-color:#234c9c;--secondary-color:#0a263c;--text-color:#000401;--bs-body-font-family: 'Raleway' !important;}
::selection {color: #fff; background-color: var(--primary-color)}
header {padding: 30px 0px;}
#menutoggle {display: none;}
.img-logo {transition: all .5s ease;}
.img-logo:hover {transform: translateY(-10px); opacity: 0.8}
#main-menu {display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 100%; gap:30px; list-style: none;}
#main-menu li a{display:block;padding:10px 15px 10px 30px;color:var(--text-color);transition:all .3s ease;text-decoration:none;font-family:'Squada One';font-style:normal;font-weight:400;font-size:22px;position:relative;overflow:hidden}
#main-menu li a::before{content:'';position:absolute;width:10px;height:20px;left:-20px;top:50%;background-color:var(--primary-color);transform:skewX(-15deg) translateY(-50%);transition:left .4s ease}
#main-menu li a:hover{color:var(--primary-color)}
#main-menu li a:hover::before{left:0}
#main-menu li.current-menu-item a:before{content:'';position:absolute;width:10px;height:20px;left:0;top:50%;background-color:var(--primary-color);transform:skewX(-15deg) translateY(-50%);transition:left .4s ease}
section.head {background-image: url("assets/img/header.jpg"); background-position: center center; background-repeat: no-repeat; height: 800px; position: relative; width: 100%; overflow: hidden;}
section.subhead {background-image: url("assets/img/header.jpg"); background-position: center center; background-repeat: no-repeat; height: auto; padding: 96px 0px; position: relative; width: 100%; overflow: hidden;}
.head img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;animation-fill-mode:forwards}
#europe{z-index:1;animation:fadeInEurope 1.5s ease forwards,zoomWiggle 20s ease-in-out 4s forwards}
#lines{z-index:2;animation:fadeInLines 1.5s ease forwards;animation-delay:1.5s}
#lkw {z-index:3;animation:fadeInLKW 1.5s ease forwards;animation-delay:2s; position: absolute; left: 620px;}
.head .container{position:relative;z-index:4;opacity:0;animation:fadeInText 1.5s ease forwards;animation-delay:3s;color:#fff;height:100%;font-size:18px;line-height:40px}
.head .row{display:flex;justify-content:center;height:100%}
.head h1, .subhead h1{color:#fff;font-family:'Squada One';font-size:60px}
.subhead .container {position:relative;z-index:4;opacity:0;animation:fadeInText 1.5s ease forwards;animation-delay:0s;color:#fff;height:100%;font-size:18px;line-height:40px}
.btn-outline-white {color: #fff; border: 1px solid #fff; border-radius: 8px; padding: 20px 30px; transition: all .5s ease; text-decoration: none;}
.btn-outline-white:hover {background: rgba(0,0,0,0.5)}
.btn-arrow {padding-left: 70px; position: relative;}
.btn-arrow:before {font-family:"Font Awesome 6 Free";font-weight:900; content: "\f178"; left: 20px;top: 12px; position: absolute;transition: all .5s ease;}
.btn-arrow:hover:before {transform: translateX(10px)}
.white-bg {padding: 64px 0px;opacity:0;animation:fadeInText 1.5s ease forwards;animation-delay:0s;}
.white-bg h2, section.lkw h2 {color:var(--secondary-color);font-family:'Squada One';font-style:normal;font-weight:400;font-size:50px;}
.white-bg h3 {color:var(--secondary-color);font-family:'Squada One';font-style:normal;font-weight:400;font-size:40px;}
section.lkw h2 {color: #fff;}
.white-bg p, section.lkw p {line-height: 40px; font-size: 18px;}
ul.leistungen {margin: 0px; padding: 0px; list-style: none;}
ul.leistungen li {line-height: 30px; position: relative;padding-left: 70px; margin-bottom: 30px; font-size: 18px;}
ul.leistungen li:before {position: absolute; left: 0px; top: 15px;font-family:"Font Awesome 6 Free";font-weight:900; color: var(--primary-color); font-size: 36px; }
ul.leistungen li:nth-child(1):before {content: "\f494";}
ul.leistungen li:nth-child(2):before {content: "\f7a2";}
ul.leistungen li:nth-child(3):before {content: "\f48b";}
section.lkw { padding: 64px 0px; background-color: #1c1813; background-image: url("assets/img/lkw-bg.jpg"); background-position: center center; background-repeat: no-repeat; color: #fff;}
footer {background-color: #eaeaea; padding: 64px 0px; color: var(--text-color);}
footer a {color: var(--text-color); transition:all  .75s ease;}
footer a:hover {color: var(--primary-color)}
footer ul {margin: 0px; padding: 0px; list-style: none; display: flex; justify-content: flex-end; align-items: center; gap:15px;}
.link-arrow{text-decoration:none;position:relative;padding-right:22px;transition:color .25s ease;color:var(--secondary-color)}
.link-arrow::after{content:"\f178";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:0;top:50%;transform:translateY(-50%);transition:transform .25s ease}
.link-arrow:hover{color:var(--primary-color)}
.link-arrow:hover::after{transform:translate(4px,-50%)}
.service-card,.sector-card,.cta-box{background:#fff;border:1px solid #0000000f;border-radius:12px;padding:24px;box-shadow:0 10px 24px #0a263c0f;transition:transform .25s ease,box-shadow .25s ease;height:100%}
.service-card:hover,.sector-card:hover,.cta-box:hover{box-shadow:0 14px 30px #0a263c1a}
.service-card .icon{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:#234c9c14;margin-bottom:14px}
.service-card .icon i{font-size:22px;color:var(--primary-color)}
ul.bullet{margin:14px 0 0;padding:0;list-style:none}
ul.bullet li{position:relative;padding-left:28px;line-height:28px;margin-bottom:8px}
ul.bullet li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:3px;color:var(--primary-color);font-size:14px}
.feature-list{list-style:none;margin:16px 0 0;padding:0}
.feature-list li{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.feature-list i{color:var(--primary-color)}
.kpi-wrap{display:flex;gap:16px;flex-wrap:wrap}
.kpi{flex:1 1 140px;min-width:140px;background:#fff;border:1px solid #0000000f;border-radius:12px;text-align:center;padding:16px 12px;box-shadow:0 10px 24px #0a263c0d}
.kpi-number{font-family:'Squada One';font-size:32px;color:var(--primary-color);line-height:1}
.kpi-label{font-size:14px;opacity:.8}
ul.benefits{margin:18px 0 0;padding:0;list-style:none}
ul.benefits li{display:flex;align-items:center;gap:10px;margin-bottom:10px}
ul.benefits i{color:#fff}
.express-badge{display:flex;gap:14px;align-items:center;background:#ffffff14;border:1px solid #ffffff26;border-radius:12px;padding:16px}
.express-badge i{font-size:28px}
.express-badge strong{color:#fff}
.process{counter-reset:step;list-style:none;margin:0;padding:0}
.process li{display:flex;align-items:center;gap:12px;margin-bottom:12px;background:#fff;border:1px solid #0000000f;border-radius:10px;padding:10px 12px}
.process li span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#234c9c14;color:var(--primary-color);font-family:'Squada One';font-size:16px}
.sector-card h3{font-size:28px;color:var(--secondary-color);font-family:'Squada One'}
.btn-primary {background-color: var(--primary-color); border-color:var(--primary-color); }
.btn-outline-primary {color: var(--primary-color); border-color:var(--primary-color); }
.btn-outline-primary:hover, .btn-outline-primary:focus {background-color: var(--primary-color); border-color:var(--primary-color);}
.timeline{position:relative;list-style:none;margin:0 auto 24px;padding:8px 0;max-width:880px}
.timeline::before{content:"";position:absolute;left:34px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--primary-color),var(--secondary-color));opacity:.25}
.timeline .milestone{position:relative;margin:0 0 28px;padding-left:96px;opacity:0;transform:translateY(16px);animation:tlFadeUp .6s ease forwards}
.timeline .milestone:nth-child(1){animation-delay:.05s}
.timeline .milestone:nth-child(2){animation-delay:.12s}
.timeline .milestone:nth-child(3){animation-delay:.19s}
.timeline .milestone:nth-child(4){animation-delay:.26s}
.timeline .milestone:last-child{margin-bottom:0}
.timeline .dot{position:absolute;left:25px;top:6px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--primary-color);box-shadow:0 0 0 6px #234c9c14}
.timeline .date{display:inline-block;font-family:'Squada One';font-size:22px;line-height:1;color:var(--primary-color);background:#fff;border:1px solid #234c9c33;border-radius:8px;padding:8px 12px;transform:translateY(-2px);transition:transform .25s ease,box-shadow .25s ease}
.timeline .content{margin:8px 0 0;font-size:18px;line-height:30px;color:var(--text-color)}
.timeline .milestone:hover .date,.timeline .milestone:focus-within .date{transform:translateY(-4px);box-shadow:0 6px 18px #0a263c1f}
.subhead--overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0a263c8c,#0a263c59)}
.contact-card{background:#fff;border:1px solid #0000000f;border-radius:16px;padding:24px;box-shadow:0 10px 24px #0a263c14;height:100%;transition:transform .25s ease,box-shadow .25s ease;opacity:0;animation:fadeInText .7s ease forwards; position: relative;}
.contact-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px #0a263c26}
.contact-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.contact-name{margin:0;font-size:28px;line-height:1;color:var(--secondary-color);font-family:'Squada One'}
.contact-photo{ position: absolute; top: 24px; right: 24px;}
.contact-photo img{width:175px;height:175px;border-radius:50%;object-fit:cover;display:block;border:3px solid #fff;box-shadow:0 6px 14px #0a263c1a}
.contact-list{margin:8px 0 0;padding:0;display:grid;grid-template-columns:auto 1fr;row-gap:8px;column-gap:10px}
.contact-list dt{width:24px;text-align:center;opacity:.8}
.contact-list dd{margin:0;line-height:28px}
.contact-list a{color:var(--text-color);text-decoration:none;border-bottom:1px dashed transparent}
.contact-list a:hover{color:var(--primary-color);border-bottom-color:currentColor}
.contact-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.bg-primary-subtle{background:#234c9c14!important}
.text-primary-emphasis{color:var(--primary-color)!important}
.bg-secondary-subtle{background:#0a263c12!important}
.text-secondary-emphasis{color:var(--secondary-color)!important}
.map-consent{text-align:center}
.map-frame iframe{border:0;border-radius:12px;width:100%;height:380px}
.map-fade-in{animation:mapFade .4s ease both}
@keyframes mapFade {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.map-placeholder{position:relative;width:100%;height:380px;border-radius:12px;border:1px solid #00000014;box-shadow:0 10px 24px #0a263c14;overflow:hidden;margin:0 auto 12px;background:linear-gradient(0deg,#0000000a 1px,transparent 1px),linear-gradient(90deg,#0000000a 1px,transparent 1px),linear-gradient(180deg,#f8fafc,#eef2f7);background-size:24px 24px,24px 24px,100% 100%;background-position:0 0,0 0,0 0}
.map-placeholder::before,.map-placeholder::after{content:"\f3c5";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;color:var(--primary-color);opacity:.18;font-size:64px;transform:translate(-50%,-50%)}
.map-placeholder::before{left:35%;top:42%}
.map-placeholder::after{left:68%;top:62%;font-size:52px;opacity:.12}
.map-placeholder .map-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fffc;backdrop-filter:blur(2px);border:1px dashed #234c9c55;border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.4}
.btn-map{display:inline-flex;align-items:center;gap:10px;background:var(--primary-color);color:#fff;border:1px solid var(--primary-color);border-radius:10px;padding:14px 18px 14px 48px;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;text-decoration:none;position:relative}
.btn-map::before{content:"\f279";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.btn-map:hover{background:#1e4287;box-shadow:0 8px 22px #0a263c33;transform:translateY(-1px)}
.btn-map:active{transform:translateY(0) scale(.99)}
.btn-map:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #234c9c55}
.btn-map[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}
.map-note{font-size:12px;opacity:.8;margin:8px 0 0}
@media (prefers-reduced-motion: reduce){.map-fade-in{ animation:none }.btn-map{ transition:none }}
@keyframes fadeInEurope {0%{opacity:0;transform:translate(-50%,20%) scale(1.05)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes zoomWiggle {0%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}50%{transform:translate(-50%,-50%) scale(1.6) rotate(6deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}}
@keyframes fadeInLines {0%{opacity:0;transform:translate(-50%,20%) scale(1.05)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fadeInLKW {0%{opacity:0;transform:translate(-50%,20%) scale(1.2)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fadeInText {0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes tlFadeUp{to{ opacity: 1; transform: translateY(0) }}

@media (max-width: 2449px) { 
    #lkw { left: 360px;}
}
@media (max-width: 1920px) { 
    #lkw { left: 170px;}
}
@media (max-width: 1399px) { 
    /* col-lg */
    #main-menu {gap:15px;}
    section.head {height: 680px;}
    #lkw { left: 28px;}
    .head h1, .subhead h1 { font-size: 50px;}
    .white-bg h3 { font-size: 34px;}
}
@media (max-width: 1199px) { 
    /* col-lg */
    #main-menu { gap:5px;}
    #main-menu li a { font-size: 18px;}
    .head h1, .subhead h1 {font-size: 40px;}
    #lkw {left: -75px;}
    .white-bg h3 {font-size: 27px;}
    .white-bg p, section.lkw p { font-size: 16px; line-height: 35px;}
}
@media (max-width: 991px) { 
    /* col-md */
    .head .col-md-6 {width: 100%;}
}
@media (max-width: 767px) { 
    /* col-sm */
}
@media (max-width: 575px) { 
    /* col */
}
@media (max-width: 460px) {

}
@media (max-width: 350px) { 

}