/*
Theme Name: mtg
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: mtg
*/

:root{--primary-color:#0077b9;--secondary-color:#ffdd00;--third-color:#b40923;--text-color:#000401;--bs-body-font-family: 'Raleway' !important;}
::selection {color: #fff; background-color: var(--primary-color)}
b, strong { font-weight: 700; }
header {padding: 30px 0px;}
#menutoggle {display: none;}
.img-logo {transition: all .5s ease; position: relative; z-index: 2;}
.img-logo:hover {transform: translateY(-10px); opacity: 0.8}
#nav-wrap {background-color: var(--primary-color)}
#logo-wrap {position: relative; padding: 0px 15px;}
#logo-wrap .logo-bg {background-color: #fff; width: 100%; height: 70px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1;-moz-transform: skewX(-10deg);-webkit-transform: skewX(-10deg);-o-transform: skewX(-10deg);-ms-transform: skewX(-10deg);transform: skewX(-10deg);}
#main-menu {display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 100%; gap:15px; list-style: none;}
#main-menu li a{display:block;padding:5px 20px 5px 20px;color:#fff;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:hover, #main-menu li.current-menu-item a, #main-menu li.current-page-ancestor a{background-color: #fff; color: var(--primary-color)}
#start-head {background-position: center center; background-repeat: no-repeat; height: 700px; position: relative; width: 100%; overflow: hidden;background-image: url("assets/img/head-start.jpg")}
.img-head { position: absolute;top: 0;min-width: 110%; height: auto;object-fit: cover;left: -5%;animation: panHero 25s ease-in-out infinite alternate;}
@keyframes panHero { 0% {transform: translateX(0);}100% {transform: translateX(-5%);}}
p {margin-top: -10px;margin-bottom: 36px;font-size: 18px;line-height: 36px;padding-top: 0px; font-weight: 300}
.head-wrap {padding: 25px 50px; background-color: rgba(255,255,255,0.8);-moz-transform: skewX(-10deg);-webkit-transform: skewX(-10deg);-o-transform: skewX(-10deg);-ms-transform: skewX(-10deg);transform: skewX(-10deg); position: absolute; bottom: 250px; right: -20px;}
.head-wrap h1 {position: relative;-moz-transform: skewX(10deg);-webkit-transform: skewX(10deg);-o-transform: skewX(10deg);-ms-transform: skewX(10deg);transform: skewX(10deg); padding-right: 400px; font-size: 60px;}
.head-wrap h1 span:nth-child(1) {display: block; font-weight: 700;}
.head-wrap h1 span:nth-child(2) {border-bottom: 5px solid var(--primary-color);}
.head-wrap h1 span:nth-child(3) {border-bottom: 5px solid var(--secondary-color);}
.head-wrap h1 span:nth-child(4) {border-bottom: 5px solid var(--third-color);}
h2 {font-weight: 700;}
.ansprechpartner h2 {position: relative; font-weight: 700; display: block;margin-bottom: 25px !important;padding-bottom: 10px;}
.ansprechpartner h2:after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:linear-gradient(90deg,var(--primary-color),var(--primary-color),#fff);transform:scaleX(.25);transform-origin:left;opacity:.65;transition:transform .5s ease,opacity .5s ease;border-radius:2px;transform:scaleX(1);}
.ansprechpartner h2 svg, .ansprechpartner h2 i {float: right; padding-left: 25px; color: var(--primary-color)}
.main { padding: 64px 0px; background-color: #fff;}
.main h1, .jl-single-job h1 { font-weight: 700; font-size: 32px; margin-bottom: 32px;}
.mtg-btn {position: relative; color: #000; font-weight: 700; text-decoration: none; padding-left: 20px; transition: all .75s ease;}
.mtg-btn:before {content:"\f0da";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top: -5px;color:var(--primary-color); transition: all .75s ease;}
.mtg-btn:hover {color: var(--third-color)}
.mtg-btn:hover:before{color: var(--secondary-color)}
.card-body .mtg-btn:before {top: 0px;}
.box1 { margin-bottom:15px; background-color: var(--primary-color)}
.box2 { background-color: var(--third-color)}
.box1, .box2 {color: #fff; font-size: 18px; height: 152px; padding: 15px; padding-top: 44px; text-align: center; position: relative;transition: all 0.4s ease;}
.box1 span, .box2 span { font-size: 24px; font-weight: 700; display: block;}
.box1 i,.box2 i{position:absolute;right:0;opacity:.3;font-size:59px;top:47px;animation:pulseIcon 4s ease-in-out infinite}
@keyframes pulseIcon {
0%,100%{transform:scale(1);opacity:.3}
50%{transform:scale(1.1);opacity:.4}
}
.box1:hover,.box2:hover{transform:translateY(-5px);box-shadow:0 8px 20px #0003;transition:all .4s ease;cursor:pointer}
.service-card{position:relative;border:1px solid #0000000f;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 24px #0a263c0f;transform:translateY(0);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;isolation:isolate;opacity:1}
.service-card .card-img-top{height:240px;object-fit:cover;transition:transform .6s ease;will-change:transform}
.service-card:hover,.service-card:focus-within{transform:translateY(-6px);box-shadow:0 14px 32px #0a263c1f;border-color:#0000001a}
.service-card:hover .card-img-top,.service-card:focus-within .card-img-top{transform:scale(1.04)}
.service-card .card-title{position:relative;display:inline-block;letter-spacing:.5px;font-weight:700}
.service-card .card-title::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color),var(--third-color));transform:scaleX(.25);transform-origin:left;opacity:.65;transition:transform .5s ease,opacity .5s ease;border-radius:2px}
.service-card:hover .card-title::after,.service-card:focus-within .card-title::after{transform:scaleX(1);opacity:1}
.service-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,#ffffff40 30%,transparent 60%);transform:translateX(-120%);transition:transform .8s ease;pointer-events:none;z-index:1}
.service-card:hover::after{transform:translateX(120%)}
.service-card .mtg-btn{margin-top:auto;padding-right:10px}
.service-card .mtg-btn:hover{transform:translateX(2px)}
.animate-cards .service-card{animation:cardFadeUp .6s ease forwards}
.animate-cards .col-12:nth-child(1) .service-card{animation-delay:.05s}
.animate-cards .col-12:nth-child(2) .service-card{animation-delay:.15s}
.animate-cards .col-12:nth-child(3) .service-card{animation-delay:.25s}
@keyframes cardFadeUp {
from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce) {
.service-card{animation:none!important;opacity:1!important;transform:none!important}
}
p.card-text{padding-top:30px;margin-top:0}
.card-body{display:flex;flex-direction:column}
.card-body .mtg-btn{margin-top:auto}
.card-body a {color: #000; text-decoration: none; transition: all .75s ease;}
.card-body a:hover {color: var(--primary-color)}
.service-card--side{display:flex;flex-direction:row}
.service-card--side img{width:auto;max-width:50%;object-fit:cover}
.lkw{background-image:url(assets/img/section.lkw.jpg);background-position:center center;background-repeat:no-repeat;background-size:cover;padding:62px;color:#fff}
.lkw h2{color:#fff}
.lkw a {color: #fff; text-decoration:underline; transition: all .75s ease;}
.lkw a:hover { color: var(--secondary-color)}
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}
section.grey-bg {background-color: #f1f0f6; padding: 64px 0px;}
.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;}
.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";}

footer {background-color: #fff; padding: 30px 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-start; align-items: center; gap:15px;}
footer ul li:after {content: '|'; padding: 0px 15px;}
footer ul li:last-child:after {content: none; padding: 0px;}
footer ul li a {text-decoration: none;}
footer ul li a:hover {text-decoration: underline;}
.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;margin:3rem auto;max-width:900px}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;background:var(--bs-secondary);transform:translateX(-50%)}
.timeline-item{position:relative;margin-bottom:3rem}
.timeline-item .card-text {margin-top: 0px; padding-top: 0px;}
.timeline-item:nth-child(odd) .timeline-card{margin-right:auto;margin-left:0}
.timeline-item:nth-child(even) .timeline-card{margin-left:auto;margin-right:0}
.timeline-card{position:relative;width:45%;background:#fff;border:none;box-shadow:0 4px 12px #0000000d;border-radius:10px;padding:1.5rem}
.timeline-icon{position:absolute;top:1rem;left:50%;transform:translateX(-50%);background:var(--primary-color);color:#fff;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 0 0 5px #f8f9fa}
.timeline-date{font-weight:600;color:var(--primary-color);margin-bottom:.5rem}


.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) }}
.wpcf7-list-item-label {display: none;}
.wpcf7-list-item { margin: 0px 20px 0px 0px !important; }
.button {margin: 0px; padding: 6px 32px; border-radius: 8px; border: 0px; color: #fff; background-color: var(--primary-color);}
.button i, .button svg {margin-right: 20px;}
.lkw .button {text-decoration: none; color: #fff; background: none; border: 1px solid #fff; margin-top: 30px; padding: 12px 32px;}

.datenschutz h2 {font-size: 24px; margin-bottom: 30px; font-weight: 700}
.datenschutz h3 {font-size: 18px; margin-bottom: 30px; font-weight: 700}
.datenschutz ul {margin-bottom: 36px;}
.datenschutz li {font-size: 18px;line-height: 36px; padding-top: 0px;font-weight: 300;}

.map-consent__placeholder {background: repeating-linear-gradient(45deg, #f7f7f7, #f7f7f7 10px, #f2f2f2 10px, #f2f2f2 20px);}
/* Hero-Bereich */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem;
  color: #fff;
}

/* animierter Hintergrund */
.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, #1e90ff 0, transparent 50%),
              radial-gradient(circle at 100% 100%, #00b894 0, transparent 50%),
              linear-gradient(135deg, #0b1725, #020616 60%, #041d3d);
  background-size: 200% 200%;
  animation: heroGradient 20s ease-in-out infinite;
  opacity: 0.9;
  z-index: -2;
}

@keyframes heroGradient {
  0%   { background-position: 0% 0%, 100% 100%, 0% 50%; }
  50%  { background-position: 100% 0%, 0% 100%, 100% 50%; }
  100% { background-position: 0% 0%, 100% 100%, 0% 50%; }
}

.hero::after {
  /* leichte Vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 0, rgba(0, 0, 0, 0.6) 70%);
  z-index: -1;
}

.hero-content {
  max-width: 900px;
  text-align: left;
  transform: translateY(20px);
  opacity: 0;
  animation: heroIntro 1.2s ease-out forwards;
}

@keyframes heroIntro {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typo im Hero */
.hero-title {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
}

.hero-subtitle {
  margin-top: 0.75rem;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  opacity: 0.9;
}

/* Stats */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2.5rem 0;
}

.stat {
  min-width: 140px;
}

.stat-number {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.95rem;
  opacity: 0.8;
}

/* CTA */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #00b894, #1e90ff);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.hero-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transform: translateX(-100%);
  opacity: 0;
}

.hero-cta:hover::after {
  animation: ctaShine 0.8s ease-out;
  opacity: 1;
}

@keyframes ctaShine {
  to {
    transform: translateX(120%);
  }
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* gestaffelte Verzögerung bei Cards */
.service-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.8rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.07);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.12);
}

.parallax {
  transform: translateY(0);
  transition: transform 0.1s linear;
  will-change: transform;
}
.nav-link {
  position: relative;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00b894, #1e90ff);
  transition: width 0.25s ease-out;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}



@media (min-width: 1921px) { 
    .container {max-width: 1440px;}
}
@media (max-width: 2449px) { 
    #lkw { left: 360px;}
}
@media (max-width: 1920px) { 
    #lkw { left: 170px;}
}
@media (max-width: 1399px) { 
    /* col-lg */
    #start-head {height: 500px;}
    #main-menu {gap:15px;}
    section.head {height: 680px;}
    #lkw { left: 28px;}
    .head h1, .subhead h1 { font-size: 50px;}
    .white-bg h3 { font-size: 34px;}
    .head-wrap h1 { font-size: 36px;}
    #main-menu {gap: 5px;}
    #main-menu li a {padding: 0px 15px 0px 15px;}
    .head-wrap {bottom: 90px;}
    .img-head { left: -25%; top: -100px;}
    .cardbox2 {width: 100%;}
}
@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;}
    .head-wrap h1 { padding-right: 230px;}
    .lkw .col-md-4, .lkw .col-md-8 {width: 100%}
    .row.mt-5 .cardbox1:last-child {margin: 30px auto 0px auto;}
}
@media (max-width: 991px) { 
    /* col-md */
    .head .col-md-6 {width: 100%;}
    .head-wrap h1 {padding-right: 64px;}
    #start-head {height: 420px;}
    .img-head {left: -47%;top: -134px;}
    #main-menu {display: none;padding: 30px;position: absolute;left: 0;right: 0;height: auto;z-index: 500;text-align: center;background-color: var(--primary-color); top: 80px;}
    #menutoggle {display: block; color: #fff;padding: 5px 20px; text-align: right; font-size: 20px; cursor: pointer;}
    .img-logo { padding-top: 8px;}
    .cardbox1 {width: 100%;}
   
}
@media (max-width: 767px) { 
    /* col-sm */
    #nav-wrap { background-color: #fff;}
    #menutoggle {background-color: var(--primary-color); margin-top: 10px;}
    #main-menu { position: relative; top: 0px;}
    .img-logo {max-width: 50%;}
    .head-wrap h1 {font-size: 24px;}
    #start-head {height: 380px;}
    .img-head {left: -94%;top: -156px;}
    .box2 {margin-bottom: 30px;}
    footer {text-align: center;}
    footer img {max-width: 50% !important;}
    
}
@media (max-width: 575px) { 
    /* col */
    #menutoggle {position: relative; z-index: 500;}
    .head-wrap h1 {padding-right: 19px;}
    .head-wrap {bottom: 35px; right: -45px}
    .service-card--side img { width: 100%; max-width: 100%; }
    .service-card--side {display: block;}
    footer ul { display: block; text-align: center; margin-bottom: 30px;}
    footer ul li:after {content: none; padding: 0px;}
}
@media (max-width: 460px) {
    .img-logo {max-width: 75%;}
    .head-wrap h1 {font-size: 16px;}
    .lkw {padding: 60px 25px;}
    .white-bg h2, section.lkw h2 { font-size: 40px;}
    .img-head {left: -172%;}
}
@media (max-width: 350px) { 

}