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

  
  1.  Global

      1.1 General
      1.2 Typography
      1.3 Fields
      1.4 Buttons
      1.5 Icons
      1.6 Loader
      1.7 Content styles

  2.  Header 

      2.1 Brand
      2.2 Vertical Panel
      2.3 Navbar Desctop
      2.4 Navbar Desctop Affix
      2.5 Navbar Mobile
      2.6 Navbar Mobile Affix
      

  3.  Main

      3.1 Slider

  4.  About

      4.1 Services
      4.1 Object map

  5.  Projects

      5.1 Project Carousel
      5.2 Magnific popup
      5.3 Project Details

  6.  Experience
  7.  Clients
  8   Blog

      8.1 Blog Details
      8.2 Widgets
      8.3 Widget Recent Post

  9.  Contacts  
  10. Footer
  11. Responsive styles

      11.1 Min width: 768px
      11.2 Min width 992px
      11.3 Min width 1200px 
      11.4 Max height 480px

    
    
/*-------------------------------------------------------------------------------
  1. Global
-------------------------------------------------------------------------------*/



/* 1.1 General */



@import url('bootstrap.min.css');
@import url('font-awesome.min.css');
@import url('animate.css');
@import url('hover.css');
@import url('magnific-popup.css');
@import url('owl.carousel.css');
@import url('owl.transitions.css');


html{
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}

body{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  color: rgba(255,255,255,0.85);
  background-color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  background-color: #000;
}

::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #ffb344;
}

::selection{
  background-color:#ffb344;
  color:#fff;
}

-webkit-::selection{
    background-color:#ffb344;
    color:#fff;
}

::-moz-selection{
    background-color:#ffb344;
    color:#fff;
}



/* 1.2 Typography */

/* Moderne, einheitliche Schriftarten - Inter für Fließtext, Space Grotesk für Überschriften */

h1,
.h1{ 
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-weight: 400;
  font-size: 52px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

h2,
.h2{ 
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

h3,
.h3{
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  color:#fff;
  letter-spacing: 0;
}

h4,
.h4{
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  color:#fff;
  letter-spacing: 0;
  text-transform: none;
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a{
  color:inherit;
}

h1 a:hover,
.h1 a:hover,
h2 a:hover,
.h2 a:hover,
h3 a:hover,
.h3 a:hover,
h4 a:hover,
.h4 a:hover{
  text-decoration: none;
}

p{
  margin-bottom: 1.5em;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
}

b, strong{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
}

ul{
  list-style: none;
  padding-left: 0;
}

a {
  color:#ffb344;
  -webkit-transition: color .3s ease-out;
       -o-transition: color .3s ease-out;
          transition: color .3s ease-out;
}

a:hover,
a:focus {
  color:#ffb344;
  outline: none;
}

a:focus{
  text-decoration: none;
}



/* 1.3 Fields */



.form-control,
textarea.form-control{
  font-size: 1em;
  height: 3.625em;
  border-radius: 0.75em;
  padding-left: 22px;
  color: #fff;
  background-color: #323232;
  border: 1px solid #323232;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -webkit-transition: all .15s;
  -o-transition: all .15s;
  transition: all .15s;
}

textarea.form-control{
  height: 7.9em;
  padding-top: 1.1em;
  resize: none;
}

.form-control:focus{
  border-color: #ffb344;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #fff;
}

.form-control::-webkit-input-placeholder {
  color: #fff;
}

.form-control.error{
  border-color:#ffb344;
}

.form-group{
  margin-bottom: 10px;
}

.wobble-error{
  -webkit-animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
           animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
}

label.error{
  display: none!important;
}



/* 1.4 Buttons */

.button-div {
  margin-top: 45px;
}
@media (max-width: 500px) {
  .button-div {
    margin-top: 20px;
  }
}

.btn{
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  position: relative;
  display: inline-block;
  border: 1px solid rgba(255, 179, 68, 0.3);
  border-radius: 0;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 400;
  color: #ffb344 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(255, 179, 68, 0.08);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 10px rgba(255, 179, 68, 0.3), 0 0 20px rgba(255, 179, 68, 0.1);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 179, 68, 0.4);
  overflow: hidden;
  animation: pulseGlowBtn 2s ease-in-out infinite;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 179, 68, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn:hover,
.btn:focus{
  color: #fff !important;
  transform: translateY(-3px);
  border-color: rgba(255, 179, 68, 0.6);
  background: rgba(255, 179, 68, 0.15);
  box-shadow: 0 4px 20px rgba(255, 179, 68, 0.4), 0 0 30px rgba(255, 179, 68, 0.2);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 179, 68, 0.7);
  animation: none;
  outline: none;
}

.btn:hover::before,
.btn:focus::before {
  left: 100%;
}

@keyframes pulseGlowBtn {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(255, 179, 68, 0.3), 0 0 20px rgba(255, 179, 68, 0.1);
  }
  50% {
    box-shadow: 0 4px 20px rgba(255, 179, 68, 0.5), 0 0 30px rgba(255, 179, 68, 0.3);
  }
}

/* Button hover bereits oben definiert */

.btn .icon-next{
  position: relative;
  top:-0.1em;
  margin-left: 0.6em;
  vertical-align: middle;
}

.btn-gray{
  background: rgba(50, 50, 50, 0.08);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff !important;
}

.btn-gray:hover{
  background: rgba(255, 179, 68, 0.15);
  border-color: rgba(255, 179, 68, 0.6);
  color: #fff !important;
}

.btn-shadow-1{
  box-shadow: 0 2px 10px rgba(255, 179, 68, 0.3), 0 0 20px rgba(255, 179, 68, 0.1);
}

.btn-shadow-2{
  box-shadow: 0 2px 10px rgba(255, 179, 68, 0.3), 0 0 20px rgba(255, 179, 68, 0.1);
}



/* 1.5 Icons */



.icon-next{
  display: inline-block;
  width:0.94em;
  height: 0.75em;
  background:url(../img/img-icon/next.png) 0 0 no-repeat;
  background-size:0.94em 0.75em;
}



/* 1.6 Loader */



.loader{
  position: fixed;
  overflow: hidden;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:#272727;
  color:#fff;
  text-align: center;
}

.loader-brand{
  position: absolute;
  left:0;
  width: 100%;
  top:50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
       -o-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}

.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffb344;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}



/* 1.7 Content styles */



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

.text-primary{
  color:#ffb344;
}

.page-lines{
  position: absolute;
  z-index: -1;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
}

.page-lines .col-line{
  padding: 0;
}

.page-lines .line{
  position: absolute;
  left: 0;
  width: 1px;
  height: 50000px;
  background-color:rgba(255,255,255,0.08);
}

.page-lines .col-line:last-child .line:last-child{
  left: auto;
  right: 0;
}

.row-base{
  margin-top: -3em;
}

.col-base{
  margin-top: 3em;
}

.section{
  position: relative;
  margin-bottom: 0;
  padding: 0 20px;
}

.section:first-of-type {
  margin-top: 0;
}

/* FAQ und About Sections ohne margin-bottom */
.section.faq,
.section.about,
.faq.section,
.about.section,
.faq-enhanced,
.faq-enhanced.section {
  margin-bottom: 0;
}

.section-header{
  position: relative;
}

.section-title{
  text-align: center;
  margin: 0 0 24px 0;
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-weight: 400;
  font-size: 40px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  color: #fff;
}

.fade-title-left,
.fade-title-right{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 10.8em;
  line-height: 1;
  color: #fff;
  position: absolute;
  left: 0;
  top:0.03em;
  opacity: 0.03;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.fade-title-right{
  left:100%;
}

.section-content{
  margin-top: 60px;
}



/*-------------------------------------------------------------------------------
  2. Header
-------------------------------------------------------------------------------*/



.header-inner .vertical-panel-content{
  bottom:auto;
  top:12.2vmin;
}



/* 2.1 Brand */



.brand-panel{
  position: absolute;
  z-index: 4;
  left: 0;
  top:0;
  width: 32vmin;
  height: 33vmin;
  padding: 4.8vmin 2em 4.8vmin;
  background-color: #2b2b2b;
  text-align: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.brand{
  display: inline-block;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size:4vmin;
  line-height: 1;
  color: #fff;
}

.brand-panel .brand-logo,
.footer .brand-logo {
  display: inline-block !important;
}

.brand:hover,
.brand:focus{
  color: #fff;
  text-decoration: none;
}

.brand-name{
  position: absolute;
  z-index: -1;
  bottom: -0.4em;
  right:-0.38em;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 8.75em;
  line-height: 1;
  opacity: 0.04;
  color: #fff;
}

.slide-number{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin-top: 8vmin;
}

.slide-number .current-number{
  font-size: 8vmin;
  letter-spacing: 0.1em;
  line-height: 1;
}

.slide-number sup{
  display: inline-block;
  position: relative;
  top:-3px;
  font-size: 2vmin;
  letter-spacing: 0.1em;
  color: #5e5e5e;
  vertical-align: top;
  margin-left: 0.46em;
}

.slide-number sup .delimiter{
  display: inline-block;
  margin-right: 0.4em;
}

.header-phone{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.32em;
  position: fixed;
  z-index: 102;
  color: #ffb344;
  right: 130px; /* Rechts neben dem Hamburger-Menü (70px + 60px Abstand) */
  top: 53px; /* Vertikal zentriert mit Hamburger (40px + (70px/2) - (line-height/2)) */
  line-height: 1.5;
  padding: 0;
}

@media (max-width: 991px) {
  .header-phone{
    display: none;
  }
}



/* 2.2 Vertical Panel */



.vertical-panel,
.vertical-panel-content{
  position: absolute;
  width: 19.735vmin;
  left: 0;
  bottom: 0;
  text-align: center;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.vertical-panel{
  z-index: 3;
  height: 10000px;
  background-color: #2b2b2b;
}

.vertical-panel-content{
  z-index: 4;
}

.vertical-panel-info{
  margin-bottom: 3.5vmin;
}

.vertical-panel-info .line{
  height: 5vmin;
  width: 1px;
  margin:15px auto 0;
  background-color:#646464;
}

.vertical-panel-title{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1em;
  color: #fff;
  position: relative;
  left: -6px;
  margin:0 auto;
  width: 1px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
   -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

@media (max-height: 850px){
  .vertical-panel-title{
    display: none;
  }
}

.social-list{
  margin-bottom: 3.5vmin;
}

.social-list li{
  margin-top: 3.8vmin;
}

.social-list .fa{
  font-size: 2.4vmin;
  color: #606060;
}

.social-list .fa:hover{
  color:#ffb344;
  text-decoration: none;
}



/* 2.3 Navbar Desctop */



/* Hamburger Menu Toggle - Modernes dreistrich-Icon wird zu X */
.hamburger-menu-toggle {
  position: fixed !important;
  top: 40px !important;
  right: 40px !important;
  z-index: 10000 !important;
  width: 70px;
  pointer-events: auto !important;
  cursor: pointer !important;
  height: 70px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding: 0;
  transition: all 0.3s ease;
  visibility: visible !important;
  opacity: 1 !important;
}

.hamburger-line {
  height: 4px;
  background-color: #ffb344;
  border-radius: 3px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  transform-origin: center;
  position: relative;
  margin-left: auto; /* Stellt sicher, dass alle Linien rechts ausgerichtet sind */
}

/* Obere Linie - Standard, rechts ausgerichtet */
.hamburger-line:nth-child(1) {
  width: 48px;
  margin-top: 0;
}

/* Mittlere Linie - Standard, rechts ausgerichtet */
.hamburger-line:nth-child(2) {
  width: 48px;
  margin-top: 9px;
}

/* Untere Linie - Kleiner, rechts ausgerichtet */
.hamburger-line:nth-child(3) {
  width: 32px; /* Kleiner als die anderen, aber rechts ausgerichtet */
  margin-top: 9px;
}

.hamburger-menu-toggle:hover .hamburger-line {
  background-color: #ffb344;
  box-shadow: 0 0 12px rgba(255, 179, 68, 0.6);
}

.hamburger-menu-toggle:hover .hamburger-line:nth-child(3) {
  width: 38px; /* Wird beim Hover etwas länger */
  transition: width 0.3s ease;
}

/* Animation zu X - Verbessertes perfektes Kreuz */
.hamburger-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg);
  background-color: #ffb344;
  width: 48px;
  margin-top: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -24px;
  margin-top: -2px;
}

/* Mittlere Linie wird unsichtbar */
.hamburger-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scale(0);
  margin-top: 0;
}

/* Untere Linie rotiert nach oben - perfektes X */
.hamburger-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg);
  background-color: #ffb344;
  width: 48px;
  margin-top: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -24px;
  margin-top: -2px;
}

@media (max-width: 991px) {
  .hamburger-menu-toggle {
    display: flex !important;
    position: fixed !important;
    top: 40px !important;
    right: 40px !important;
    z-index: 10000 !important;
    width: 50px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    height: 50px !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* DES.de Style Navigation */
.navbar-desctop-des {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none; /* Standardmäßig komplett ausgeblendet */
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-desctop-des.active {
  display: flex; /* Nur wenn aktiv, anzeigen */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Body lock when menu is open */
/* Verhindere automatisches Scrollen nach oben auf Mobile */
  @media (max-width: 991px) {
    html {
      scroll-behavior: smooth !important; /* Smooth scrolling auch auf Mobile für bessere UX */
      -webkit-overflow-scrolling: touch !important;
      /* GPU-Beschleunigung für flüssigeres Scrollen */
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    
    body {
      /* GPU-Beschleunigung */
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      /* Optimierung für flüssigeres Scrollen */
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch !important;
    }
    
    /* Scroll-Performance für Sections optimieren */
    .projects.section,
    .services-section {
      contain: layout style paint;
      will-change: auto;
    }
    
    .projects.section *,
    .services-section * {
      will-change: auto;
    }
  
}

body.menu-open,
html.menu-open {
  overflow: hidden !important;
  height: 100%;
}

body.menu-open .header-drone-container,
html.menu-open .header-drone-container {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 991px) {
  .navbar-mobile {
    display: flex !important;
    z-index: 1003 !important;
    position: fixed !important;
  }
  
  /* Desktop Header Elemente auf Mobile ausblenden */
  .header-home .brand-panel,
  .header-home .header-phone,
  .header-home .vertical-panel,
  .header-home .vertical-panel-content {
    display: none !important;
  }
  
  /* Brand Panel und Vertical Panel sollten nicht fixed sein, nur in Hero-Section */
  .brand-panel,
  .vertical-panel,
  .vertical-panel-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
  
  /* Alle Hamburger-Menüs standardmäßig ausblenden */
  .hamburger-menu-toggle {
    display: none !important;
  }
  
  /* Hamburger-Icon im header-home auf Mobile ausblenden */
  .header-home .hamburger-menu-toggle {
    display: none !important;
  }
  
  /* Nur das Hamburger-Menü in navbar-mobile anzeigen */
  .navbar-mobile .hamburger-menu-toggle {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    z-index: 1002 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  
  /* Hamburger-Menü Button klickbar machen */
  .navbar-mobile .hamburger-menu-toggle,
  .navbar-mobile .hamburger-menu-toggle * {
    pointer-events: auto !important;
  }
  
  /* Mobile Menu Layout Anpassungen */
  .navbar-desctop-des {
    background: rgba(10, 10, 10, 0.98) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1001 !important;
  }
  
  .navbar-desctop-des.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Alle Menüelemente klickbar machen - nur wenn Menü aktiv ist */
  .navbar-desctop-des.active .nav-menu-center,
  .navbar-desctop-des.active .nav-menu-vertical,
  .navbar-desctop-des.active .nav-item,
  .navbar-desctop-des.active .nav-item-large,
  .navbar-desctop-des.active .nav-item a,
  .navbar-desctop-des.active .nav-item-large a,
  .navbar-desctop-des.active .nav-submenu,
  .navbar-desctop-des.active .nav-submenu li a,
  .navbar-desctop-des.active .nav-vertical-left,
  .navbar-desctop-des.active .nav-vertical-left a,
  .navbar-desctop-des.active .nav-language-center,
  .navbar-desctop-des.active .nav-social-bottom-right,
  .navbar-desctop-des.active .nav-social-bottom-right a {
    pointer-events: auto !important;
  }
  
  /* Section Abstände auf Mobile gleichmäßig 120px */
  .section {
    margin-bottom: 0 !important;
    padding: 0 8px !important;
  }
  
  /* Erste Section sollte kein Top-Margin haben */
  .section:first-of-type {
    margin-top: 0 !important;
  }
  
  /* FAQ und About Sections ohne margin-bottom auf Mobile */
  .section.faq,
  .section.about,
  .faq.section,
  .about.section,
  .faq-enhanced,
  .faq-enhanced.section {
    margin-bottom: 0 !important;
  }
  
  /* Hauptnavigation links */
  .nav-menu-center {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    text-align: left !important;
    z-index: 1004 !important;
    display: none !important; /* Standardmäßig ausgeblendet */
    pointer-events: none !important;
  }
  
  .navbar-desctop-des.active .nav-menu-center {
    display: flex !important; /* Nur wenn Menü aktiv, anzeigen */
    pointer-events: auto !important;
  }
  
  .nav-menu-vertical {
    align-items: flex-start !important;
    gap: 24px !important;
    pointer-events: none !important; /* Standardmäßig nicht klickbar */
  }
  
  .navbar-desctop-des.active .nav-menu-vertical {
    pointer-events: auto !important;
  }
  
  .nav-item-large,
  .nav-item {
    font-size: 18px !important;
    text-align: left !important;
  }
  
  .nav-item-large a {
    font-size: 22px !important;
  }
  
  .nav-item a {
    font-size: 18px !important;
  }
  
  .nav-item-large a,
  .nav-item a {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  
  /* Abstand für Untermenü auf Mobile anpassen */
  .nav-item.has-submenu {
    margin-bottom: 0 !important;
    position: relative;
  }
  
  /* Dropdown-Pfeil für Mobile-Menü Items mit Submenü */
  .nav-item.has-submenu > a::after {
    content: '▼';
    display: inline-block;
    margin-left: 8px;
    font-size: 0.7em;
    color: #ffb344;
    transition: transform 0.3s ease;
    vertical-align: middle;
  }
  
  .nav-item.has-submenu.active > a::after {
    transform: rotate(180deg);
  }
  
  .nav-item.has-submenu .nav-submenu {
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Auf Mobile: immer sichtbar wenn aktiv */
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
    display: block !important;
    flex-direction: column !important;
    visibility: hidden !important;
  }
  
  /* Hover auf Mobile deaktivieren - nur Click funktioniert */
  .nav-item.has-submenu:hover .nav-submenu {
    margin-top: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* Nur wenn das Untermenü sichtbar ist, Margin hinzufügen */
  .nav-item.has-submenu.active .nav-submenu {
    margin-top: 12px !important;
    max-height: 500px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    flex-direction: column !important;
    padding-left: 16px !important;
  }
  
  .nav-item.has-submenu.active .nav-submenu li {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Submenü Links auf Mobile besser sichtbar */
  .nav-submenu li a {
    display: block !important;
    padding: 8px 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(255, 179, 68, 0.6) !important;
  }
  
  .nav-submenu li a:hover {
    color: #ffb344 !important;
    -webkit-text-stroke: 1px #ffb344 !important;
  }
  
  /* Vertikale Texte rechts */
  .nav-vertical-left {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transform-origin: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-end !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  
  .navbar-desctop-des.active .nav-vertical-left a,
  .navbar-desctop-des.active .nav-vertical-left .vertical-text {
    pointer-events: auto !important;
  }
  
  .vertical-text {
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    transform: rotate(180deg) !important;
  }
  
  /* Copyright ausblenden auf Mobile */
  .nav-vertical-left .vertical-text:last-child {
    display: none !important;
  }
  
  /* Sprache Selector unten links */
  .nav-language-center {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    font-size: 14px !important;
    transform: translateX(0) !important;
  }
  
  /* Social Media Icons unten rechts */
  .nav-social-bottom-right {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
  }
  
  .nav-social-bottom-right .social-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
  
  /* Logo oben rechts ausblenden auf Mobile */
  .nav-logo-top-right {
    display: none !important;
  }
  
  /* === MOBILE: Elemente ausblenden === */
  .project-list-enhanced {
    display: none !important;
  }
  
  img[src="img/bg/380x370.jpg"],
  img.img-responsive[src="img/bg/380x370.jpg"] {
    display: none !important;
  }
  
  .experience.section {
    display: none !important;
  }
  
  /* === MOBILE: FAQ List Padding === */
  .faq-list {
    padding: 0 !important;
  }
}

/* Logo oben rechts - wird im aufgeklappten Zustand ausgeblendet */
.nav-logo-top-right {
  position: absolute;
  top: 40px;
  right: 40px;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.navbar-desctop-des.active .nav-logo-top-right {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.brand-des {
  font-family: 'Trasandina', 'Inter', sans-serif;
  font-size: 1.2em;
  color: #ffb344; /* Koralle */
  text-decoration: none;
  display: none !important;
  align-items: center;
  gap: 8px;
}

.brand-des .text-primary {
  color: #ffb344;
}

/* Zentrales vertikales Menü */
.nav-menu-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: left;
  visibility: visible;
  box-sizing: border-box;
  display: none; /* Standardmäßig ausgeblendet */
  flex-direction: column;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 42px;
}

/* Nur wenn Menü aktiv ist, anzeigen und klickbar machen */
.navbar-desctop-des.active .nav-menu-center {
  display: flex;
  pointer-events: auto;
}

.nav-menu-vertical {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  --primary-color: #ffb344;
  --background-dark: #272727;
  --background-card: #323232;
  --text-light: rgba(255, 255, 255, 0.5);
  --text-white: #fff;
  --border-color: #323232;
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.5);
  font-family: Trasandina, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-light);
  visibility: visible;
  pointer-events: none; /* Standardmäßig nicht klickbar */
  text-align: left;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 42px;
}

/* Nur wenn Menü aktiv ist, klickbar machen */
.navbar-desctop-des.active .nav-menu-vertical {
  pointer-events: auto;
}

.nav-item,
.nav-item-large {
  position: relative;
}

.nav-item a,
.nav-item-large a {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  --primary-color: #ffb344;
  --background-dark: #272727;
  --background-card: #323232;
  --text-light: rgba(255, 255, 255, 0.5);
  --text-white: #fff;
  --border-color: #323232;
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.5);
  line-height: 1.5;
  visibility: visible !important;
  pointer-events: auto;
  text-align: left;
  list-style: none;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  background-color: transparent;
  font-family: 'neueMachina', 'Neue Machina', monospace;
  font-size: 2.6em;
  font-weight: 400;
  display: block;
  position: relative;
  text-decoration: none;
  color: transparent !important;
  letter-spacing: 0.04em !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 1px rgba(255, 179, 68, 0.45) !important;
  transition: color 0.35s, -webkit-text-stroke 0.35s, transform 0.35s !important;
}

.nav-item-large a {
  font-size: 2.4em;
}

/* Hover-Effekt: Menüpunkte füllen sich mit Farbe */
.nav-item a:hover,
.nav-item-large a:hover {
  -webkit-text-stroke: 1px #ffb344;
  color: #ffb344; /* Füllung mit Koralle */
  text-shadow: 0 0 20px rgba(255, 179, 68, 0.4);
  transform: scale(1.05);
}

/* Aktives Item in Koralle */
.nav-item.active a {
  color: #ffb344; /* solides Koralle */
  -webkit-text-stroke: 0;
  font-weight: 400;
  text-shadow: 0 0 20px rgba(255, 179, 68, 0.5);
}

/* Untermenü für Leistungsportfolio */
.nav-item.has-submenu {
  position: relative;
}

.nav-submenu {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Desktop: Hover-Effekte für Submenü */
@media (min-width: 992px) {
  /* Dropdown-Pfeil für Desktop-Menü Items mit Submenü */
  .nav-item.has-submenu > a::after {
    content: '▼';
    display: inline-block;
    margin-left: 8px;
    font-size: 0.7em;
    color: #ffb344;
    transition: transform 0.3s ease;
    vertical-align: middle;
  }
  
  .nav-item.has-submenu:hover > a::after,
  .nav-item.has-submenu.active > a::after {
    transform: rotate(180deg);
  }
  
  /* Desktop: Submenü öffnet sich beim Hover ODER wenn active Klasse gesetzt ist */
  .nav-item.has-submenu:hover .nav-submenu,
  .nav-item.has-submenu.active .nav-submenu {
    opacity: 1;
    max-height: 500px;
  }
  
  .nav-item.has-submenu:hover > a ~ .nav-submenu,
  .nav-item.has-submenu.active > a ~ .nav-submenu {
    opacity: 1;
    max-height: 500px;
  }
  
  /* Wenn active, bleibt Submenü auch ohne Hover sichtbar */
  .nav-item.has-submenu.active .nav-submenu {
    opacity: 1 !important;
    max-height: 500px !important;
    visibility: visible !important;
  }
}

.nav-item.has-submenu.active > a {
  color: rgba(255, 179, 68, 0.6);
}

.nav-submenu li a {
  font-size: 1.4em !important;
  text-align: left !important;
  -webkit-text-stroke: 1px rgba(255, 179, 68, 0.6);
  color: transparent;
  transition: all 0.3s ease;
}

/* Mobile: Schriftgröße für Submenu-Links */
@media (max-width: 991px) {
  .nav-submenu li a {
    font-size: 16px !important;
  }
}

.nav-submenu li a:hover {
  -webkit-text-stroke: 1px #ffb344;
  color: #ffb344; /* Füllung mit Koralle */
  text-shadow: 0 0 15px rgba(255, 179, 68, 0.4);
  transform: scale(1.03);
}

/* Vertikale Texte links */
.nav-vertical-left {
  position: absolute;
  left: 40px;
  bottom: 40px;
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  align-items: flex-start;
  pointer-events: none; /* Standardmäßig nicht klickbar */
}

/* Nur wenn Menü aktiv ist, klickbar machen */
.navbar-desctop-des.active .nav-vertical-left {
  pointer-events: auto;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: 'Trasandina', 'Inter', sans-serif;
  font-size: 0.75em;
  color: #ffb344;
  letter-spacing: 0.1em;
}

.vertical-text a {
  color: #ffb344;
  text-decoration: none;
  transition: color 0.3s ease;
}

.vertical-text a:hover {
  color: #ffb344;
  opacity: 0.8;
}

/* Sprache Selector unten mittig */
.nav-language-center {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Trasandina', 'Inter', sans-serif;
  font-size: 0.85em;
  color: #ffb344;
  pointer-events: auto;
}

.lang-active {
  color: #ffb344;
}

.lang-separator {
  color: rgba(255, 179, 68, 0.5);
  margin: 0 4px;
}

.lang-inactive {
  color: rgba(255, 179, 68, 0.5);
}

/* Social Media Icons unten rechts */
.nav-social-bottom-right {
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: flex;
  gap: 20px;
  pointer-events: auto;
}

.social-icon {
  width: 36px;
  height: 36px;
  border: 1px solid #ffb344;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Trasandina', 'Inter', sans-serif;
  font-size: 0.75em;
  color: #ffb344;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-icon:hover {
  border-color: #ffb344;
  color: #ffb344;
  background-color: rgba(255, 179, 68, 0.1);
}

/* Alte Navbar ausblenden wenn neue aktiv ist */
.navbar-desctop{
  display: none;
  position: absolute;
  z-index: 2;
  top:0;
  left:0;
  width: 100%;
  padding:5.9vmin 0 0;
}

.navbar-desctop .brand{
  display: none;
  position: relative;
  top:-0.22em;
  font-size: 1.6em;
}

.navbar-desctop-menu{
  float: right;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 0.81em;
  letter-spacing: 0.05em;
  text-transform: none;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar-desctop-menu li{
  position: relative;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}

.navbar-desctop-menu li a {
  display: block;
  text-decoration: none;
  color: rgba(255,255,255,0.9);
  padding: 0;
  line-height: 1.5;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-desctop-menu li a:hover,
.navbar-desctop-menu .active > a{
  color: #ffb344;
}

.navbar-desctop-menu  > li{
  float: left;
  margin-left: 5.1em;
  display: flex;
  align-items: center;
}

.navbar-desctop-menu > li > a{
  color: #fff;
  background-color: transparent;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.navbar-desctop-menu li ul{
  position: absolute;
  z-index: 10;
  left: 100%;
  top:60%;
  visibility: hidden;
  min-width: 200px;
  opacity: 0;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  background:rgba(50, 50, 50, 0.95);
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.navbar-desctop-menu > li > ul{
  left: -20px;
  margin-top: 0;
}

.navbar-desctop-menu li:hover > ul{
  top:0;
  visibility: visible;
  opacity: 1;
}

.navbar-desctop-menu > li:hover > ul{
  top:100%;
}

.navbar-desctop-menu li li{
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.navbar-desctop-menu li li:last-child{
  border-bottom: 0;
}

.navbar-desctop-menu li li a{
  color: #fff;
  padding: 12px 20px 10px;
}



/* 2.4 Navbar Desctop Affix */



.navbar-desctop.affix{
  position: fixed;
  z-index: 5;
  top:0;
  background-color: rgba(39, 39, 39, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 20px 0;
  box-shadow: 0 2px 24px rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.navbar-desctop.affix.affix-top{
  padding-top:2.2em;
}

.navbar-desctop.affix .brand{
  display: inline-block;
}

.navbar-desctop.affix .navbar-desctop-menu li a{
  color: #fff;
}

.navbar-desctop.affix .navbar-desctop-menu li > a:hover,
.navbar-desctop.affix .navbar-desctop-menu .active > a{
  color:#ffb344;
}



/* 2.5 Navbar Mobile */



.navbar-mobile{
  position: absolute;
  z-index: 2;
  left: 0;
  top:0;
  width: 100%;
  padding:6vmin 0;
}

.navbar-mobile .brand{
  display: flex !important;
  margin-left: 15px;
  font-size: 1.6em;
}

.navbar-collapse{
  border:0;
  background-color: rgba(50, 50, 50, 0.95);
  -webkit-box-shadow:none;
  box-shadow:none;
}

@media (max-height: 320px ){
  .navbar-collapse{
    max-height: 240px;
  }
}

.navbar-toggle{
  padding: 0;
  margin-top:0;
  margin-bottom: 0;
  border-radius: 0;
  border:0;
}

.navbar-toggle .icon-bar{
  background-color:#fff;
  height: 2px;
  width: 30px; 
}

.navbar-toggle .icon-bar + .icon-bar{
  margin-top:5px;
}

.navbar-toggle.collapsed .icon-bar{
  background-color: #fff;
}

.navbar-nav-mobile{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 0.9em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding-top: 1.2em;
  margin-bottom: 0;
}

.navbar-nav-mobile li{
  position: relative;
  border-top:1px solid rgba(255,255,255,0.1);
}

.navbar-nav-mobile li a{
  display: block;
  padding: 1em 1em;
  color: #fff;
  text-decoration: none;
}

.navbar-nav-mobile > .current > a{
  color: #ffb344;
}

.navbar-nav-mobile li a .fa-angle-down{
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.navbar-nav-mobile > .current > a .fa-angle-down{
  top:-0.2em;
  left:-0.3em;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.navbar-nav-mobile > .active > a,
.navbar-nav-mobile > .active > a:hover{
  background-color: #ffb344;
  color: #fff;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.navbar-nav-mobile ul{
  display: none;
}

.navbar-nav-mobile li a:hover,
.navbar-nav-mobile li .active > a{
  color: #ffb344;
}



/* 2.6 Navbar Mobile Affix */



.navbar-mobile.affix{
  position: fixed;
  z-index: 5;
  background-color:rgba(50, 50, 50, 0.95);
  box-shadow: 0 0 35px rgba(0,0,0,0.1);
  padding: 1.2em 0;
}

.navbar-mobile.affix .brand{
  display: inline-block;
}

.navbar-mobile.affix .navbar-toggle .icon-bar{
  background-color:#ffb344;
}



/*-------------------------------------------------------------------------------
  3. Main
-------------------------------------------------------------------------------*/



/* Scroll Indicator für Iframe */
.scroll-down-indicator {
  position: absolute;
  bottom: 20%;
  right: 40px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 179, 68, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 179, 68, 0.3);
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.scroll-down-indicator:hover {
  background: rgba(255, 179, 68, 0.2);
  border-color: rgba(255, 179, 68, 0.6);
  transform: translateY(5px);
  box-shadow: 0 4px 20px rgba(255, 179, 68, 0.3);
}

.scroll-down-indicator svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.scroll-down-indicator:hover svg {
  transform: translateY(3px);
}

@media (max-width: 991px) {
  .scroll-down-indicator {
    bottom: 100px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
  
  .scroll-down-indicator svg {
    width: 20px;
    height: 20px;
  }
}

.main{
  position: relative;
  overflow: visible;
  min-height: 100vh;
  height: 100vh;
}

/* Auf Mobile: height: 100vh entfernen, damit man scrollen kann */
@media (max-width: 991px) {
  .main {
    height: auto !important;
    min-height: auto !important;
    overflow-y: auto !important;
    touch-action: pan-y; /* Erlaube vertikales Scrollen, aber Touch-Events an Iframe weitergeben */
  }
  
  /* Auf index.html: Iframe-Bereich kann scrollen */
  body.home-page .main {
    height: auto !important;
    min-height: 100vh !important;
  }
  
  /* Stelle sicher, dass html und body scrollen können */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    max-height: none !important;
  }
  
  /* Stelle sicher, dass Iframe Touch-Events empfangen kann - wie natives Spiel */
  .main iframe,
  .main .frame {
    touch-action: none !important; /* Alle Touch-Events gehen direkt an Iframe, keine Seiten-Interaktion */
    pointer-events: auto !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Verhindere Seiten-Scrollen komplett auf Mobile wenn Iframe aktiv */
  body.home-page .main {
    overflow: hidden !important;
  }
}

/* Scroll Indicator für Iframe */

.scroll-down-indicator {
  position: absolute;
  bottom: 20%;
  right: 40px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 179, 68, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 179, 68, 0.3);
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.scroll-down-indicator:hover {
  background: rgba(255, 179, 68, 0.2);
  border-color: rgba(255, 179, 68, 0.6);
  transform: translateY(5px);
  box-shadow: 0 4px 20px rgba(255, 179, 68, 0.3);
}

.scroll-down-indicator svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.scroll-down-indicator:hover svg {
  transform: translateY(3px);
}

@media (max-width: 991px) {
  .scroll-down-indicator {
    bottom: 100px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
  
  .scroll-down-indicator svg {
    width: 20px;
    height: 20px;
  }
}

.main{
  position: relative;
  overflow: visible;
  min-height: 100vh;
  height: 100vh;
}

/* Auf Mobile: height: 100vh entfernen, damit man scrollen kann */
@media (max-width: 991px) {
  .main {
    height: auto !important;
    min-height: auto !important;
    overflow-y: auto !important;
    touch-action: pan-y; /* Erlaube vertikales Scrollen, aber Touch-Events an Iframe weitergeben */
  }
  
  /* Auf index.html: Iframe-Bereich kann scrollen */
  body.home-page .main {
    height: auto !important;
    min-height: 100vh !important;
  }
  
  /* Stelle sicher, dass html und body scrollen können */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    max-height: none !important;
  }
  
  /* Stelle sicher, dass Iframe Touch-Events empfangen kann - wie natives Spiel */
  .main iframe,
  .main .frame {
    touch-action: none !important; /* Alle Touch-Events gehen direkt an Iframe, keine Seiten-Interaktion */
    pointer-events: auto !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Verhindere Seiten-Scrollen komplett auf Mobile wenn Iframe aktiv */
  body.home-page .main {
    overflow: hidden !important;
  }
}

/* Desktop: Iframe Styles */
.main iframe,
.main .frame {
  width: 100%;
  height: 100vh;
  min-height: 700px;
  border: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: none; /* Verhindere Seiten-Scrollen, alle Touch-Events gehen direkt an Iframe */
  overflow: hidden;
}


.main-inner{
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 33.7vmin 0 33.7vmin;
}


.main-inner .page-lines{
  z-index: 1;
}

.main-inner:after{
  content:'';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top:0;
  background: -webkit-linear-gradient(bottom,  rgba(39,39,39,1) 0%,rgba(39,39,39,0.95) 26%,rgba(39,39,39,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to top,  rgba(39,39,39,1) 0%,rgba(39,39,39,0.95) 26%,rgba(39,39,39,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  pointer-events: none; /* Erlaube Klicks durch das Overlay zum Iframe */
}

.main-projects,
.main-contacts{
  padding: 34.2vmin 0 34vmin;
}

.main-project{
  padding: 33.7vmin 0 11vmin;
  background-size: cover;
  background-position: center 0;
}

.main-header{
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  padding-left: 0;
  max-width: 817px;
  margin: 0 auto;
  padding-top: 150px;
  padding-bottom: 100px;
  pointer-events: none;
}

.main-header h1,
.main-header p {
  pointer-events: auto;
}

.main-header h1{
  color: #fff;
  margin: 0 0 32px 0;
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 64px;
  line-height: 1.2;
  text-align: center;
}

.main-header-subtitle {
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}



/* 3.1 Slider */



.rev_slider{
  color: #fff;
  min-height: 420px;
}

.rev_slider .btn{
  -webkit-transition: background-color .3s ease-out!important;
          transition: background-color .3s ease-out!important;
}

.tp-caption{
  padding: 0 20px;
  text-align: right;
}

.arrow-left,
.arrow-right{
  position: absolute;
  z-index: 4;
  bottom: 4vh;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.arrow-left{
  left: 22vmin;
}

.arrow-right{
  right: 15px;
  margin-left: 6em !important;
}

.arrow-left:after,
.arrow-right:before{
  content:'';
  display: inline-block;
  vertical-align: middle;
  background-color: transparent;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 500;
  color: #fff;
}

.arrow-left:after{
  content:'Zurück ';
}

.arrow-right:before{
  content:' Weiter';
}

.arrow-left:before,
.arrow-right:after{
  content:'';
  display: inline-block;
  vertical-align: middle;
  width:1.3em;
  height: 1em;
  opacity: 0.25;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.arrow-left:hover:before,
.arrow-right:hover:after{
  opacity: 1;
}

.arrow-left:before{
  background: url(../img/img-icon/prev.png) 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-right: 0.82em;
}

.arrow-right:after{
  background: url(../img/img-icon/next.png) 0 0 no-repeat;
  background-size: 1.3em 1em;
  margin-left: 0.72em;
}

.slide-title{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.slide-subtitle{
  font-size: 18px;
  line-height: 1.7;
}



/* ------------------------------------------------------------------------------- */
/*  4. About
/* ------------------------------------------------------------------------------- */



.bg-about{
  background: url(../img/bg/über-uns.webp) 50% 0 no-repeat;
  background-size: cover;
}

.entry-title{
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-weight: 400;
  font-size: 3.6em;
  margin:0 0 1em;
  letter-spacing: 0.1em;
}

.entry-text{
  font-size: 1em;
  line-height: 1.65;
}

.about .fade-title-left{
  top:1em;
}

.col-about-title{
  margin-top: 0;
  margin-bottom:1.1em; 
}

.col-about-info p:last-child{
  margin-bottom: 0; 
}

.col-about-img{
  position: relative;
}

.col-about-img img{
  display: block;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}



/* 4.1 Services */



.row-services{
  margin-left: -4.1em;
  margin-right: -4.1em;
}

.col-service{
  padding: 0 4.1em;
}

/* Nur für projects.html - weniger padding */
.projects .col-service{
  padding: 0 5px;
}

/* Für index.html Services (Leistungsportfolio) - mehr padding */
.services-section .col-service{
  padding: 0 1.5em;
}

.service-item{
  margin-bottom: 32px; 
  padding: 32px;
  background-color: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-item:hover{
  background-color: rgba(255,255,255,0.05);
  border-color: rgba(255, 179, 68, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.service-item:last-child{
  margin-bottom: 0;
}

/* Erste drei Service-Items kleiner - nur für About Section (Experten für Statik und Tragwerksplanung) */
.about .col-about-spec .service-item:nth-child(1),
.about .col-about-spec .service-item:nth-child(2),
.about .col-about-spec .service-item:nth-child(3) {
  padding: 24px;
  margin-bottom: 24px;
}

.about .col-about-spec .service-item:nth-child(1) h4,
.about .col-about-spec .service-item:nth-child(2) h4,
.about .col-about-spec .service-item:nth-child(3) h4 {
  font-size: 20px;
  margin-top: 18px;
  margin-bottom: 12px;
}

.about .col-about-spec .service-item:nth-child(1) p,
.about .col-about-spec .service-item:nth-child(2) p,
.about .col-about-spec .service-item:nth-child(3) p {
  font-size: 14px;
  line-height: 1.5;
}

.about .col-about-spec .service-item:nth-child(1) img,
.about .col-about-spec .service-item:nth-child(2) img,
.about .col-about-spec .service-item:nth-child(3) img {
  width: 40px;
  height: auto;
}

.service-item h4{
  margin-top: 24px;
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 1.3;
}

.services .service-item h4{
  margin-top: 1.25em;
}

.service-item p:last-child{
  margin-bottom: 0;
}


/* 4.2 Object Map */



.objects{
  position: relative;
}

.object-label{
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #ffb344;
  box-shadow:0  0  70px 8px rgba(255, 179, 68, 0.75);
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.object-label:hover{
  box-shadow:none;
}

.popover.top{
  margin-top: -20px;
}

.object-info{
  position: absolute;
  display: none;
  z-index: 1;
  left: 50%;
  bottom: 40px;
  width: 12.4em;
  margin-left: -6.2em;
  padding: 1.1em 1.3em 3em;
  border:0;
  background-color: rgba(0,0,0,0.3);
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow:none;
}

.object-info.in{
  display: block;
}

.object-info:before{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top: 14px solid rgba(0,0,0,0.3);
}

.object-title{
  font-size: 1em;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-weight: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:#ffb344;
  padding: 0 0 1em;
  border-bottom:1px solid rgba(249,249,249,0.2);
  margin: 0 0 .5em;
}

.object-content{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 0.75em;
  line-height: 2.6;
  color: #fff;
  padding: 0;
}

.popover.top>.arrow{
  border-top-color: transparent;
}

.popover.top>.arrow:after{
  border-top-color:rgba(0,0,0,0.6);
}




/* ------------------------------------------------------------------------------- */
/*  5. Projects
/* ------------------------------------------------------------------------------- */



.bg-projects{
  position: relative;
  background:url(../img/bg/leistungsportfolio-statikbüro24.webp) 50% 0 no-repeat;
  background-size: cover;
}

.project{
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.project:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transform: translateY(-4px);
}

.project figure{
  position: relative;
}

.project figure img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.project figure:after{
  content:'';
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  opacity: 0.8;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project.project-light figure:after{
  opacity: 0.4;
}
    
.project figcaption{
  position: absolute;
  z-index: 1;
  left: 0;
  top:0;
  right:0;
  bottom:0;
  margin: 3.2em 0.6em;
}

.project-title{
  position: relative;
  top:0;
  left:0;
  margin:0;
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-weight: 400;
  font-size: 1.56em;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: none;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project-category{
  position: absolute;
  left: 0;
  bottom: 0;
  margin:0 0 -0.8em;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.2em;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.project-zoom{
  position: absolute;
  left: 50%;
  top:50%;
  width: 9em;
  height: 9em;
  margin:-4.5em;
  border-radius: 50%;
  background-color: rgba(255, 179, 68, 0.84);
  overflow: hidden;
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform:scale(0.5);
  -o-transform:scale(0.5);
  transform:scale(0.5);
  -webkit-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}

.project-zoom:after{
  content: '';
  position: absolute;
  left: 50%;
  top:50%;
  width: 2.625em;
  height:2.625em;
  background:url(../img/img-icon/zoom.png) 0 0 no-repeat;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.project figure:hover:after{
  opacity: 0;
}

.project figure:hover img{
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

.project figure:hover .project-title{
  top:30px;
  opacity: 0;
}

.project figure:hover .project-category{
  opacity: 0;
  letter-spacing: 2em;
}

.project figure:hover .project-zoom{
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);
}

.service-in-projects {
  padding-right: 5px !important;
  padding-left: 5px !important;
  height: 490px;
}

.hello {
  height: 490px;
}

/* Desktop: .hello auf 400px setzen */
@media (min-width: 992px) {
  .hello {
    height: 400px;
  }
  
  .service-in-projects {
    height: 400px;
  }
}

/* Mobile: .hello auf auto setzen, damit Text vollständig sichtbar ist */
@media (max-width: 991px) {
  .hello {
    height: auto;
    min-height: auto;
  }
  
  .service-in-projects {
    height: auto;
    min-height: auto;
  }
}


/* 5.1 Carousel */



.owl-prev,
.owl-next{
  position: absolute;
  top:50%;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:1em;
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 500;
  color: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0.7;
}

.owl-prev:hover,
.owl-next:hover{
  opacity: 1;
}

.owl-prev{
  left: 0.8em;
  padding-left: 35px;
  background:url(../img/img-icon/prev.png) left 50% no-repeat;
  background-size: 1.3em 1em;
  
}

.owl-next{
  left: auto;
  right: 0.8em;
  padding-right: 35px;
  background:url(../img/img-icon/next.png) right 50% no-repeat;
  background-size: 1.3em 1em;
}



/* 5.2 Magnific popup */



.mfp-figure{
  box-shadow: none;
}

.mfp-iframe-scaler{
  overflow: visible;
}

.mfp-image-holder .mfp-close, 
.mfp-iframe-holder .mfp-close{
  padding: 0;
  margin-top: -10px;
  font-family: inherit;
  font-size: 40px;
  font-weight: 300;
  line-height: 0;
}

img.mfp-img{
  min-height: 460px;
}


.mfp-title{
  padding-right: 40px;
  font-size:1.2em;
  line-height: 1.2;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
}

.mfp-counter{
  top:5px;
}

.mfp-bg{
  background-color: #141414;
}

.mfp-arrow-left:before, .mfp-arrow-left .mfp-b{
  display: none;
}

.mfp-arrow-right:before, .mfp-arrow-right .mfp-b{
  display: none;
}

.mfp-wrap .mfp-content {
  -webkit-perspective: 1300px;
          perspective: 1300px
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform:scale(0) rotateY(60deg);
  -o-transform:scale(0) rotateY(60deg);
  transform:scale(0) rotateY(60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
       -o-transition: .5s;
          transition: .5s;
}

.mfp-wrap .mfp-figure,
.mfp-wrap .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transition: .3s ease-in-out;
       -o-transition: .3s ease-in-out;
          transition: .3s ease-in-out;
  -webkit-transform: rotateY(-60deg);
      -ms-transform: rotateY(-60deg);
       -o-transform: rotateY(-60deg);
          transform: rotateY(-60deg);
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: .5s;
       -o-transition: .5s;
          transition: .5s;
}

.mfp-wrap.mfp-ready .mfp-figure,
.mfp-wrap.mfp-ready .mfp-iframe-scaler {
  opacity: 1;
  -webkit-transform:rotateX(0);
      -ms-transform:rotateX(0);
       -o-transform:rotateX(0);
          transform:rotateX(0);
}

.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-wrap.mfp-removing .mfp-figure ,
.mfp-wrap.mfp-removing .mfp-iframe-scaler {
  opacity: 0;
  -webkit-transform: rotateX(-60deg);
      -ms-transform: rotateX(-60deg);
       -o-transform: rotateX(-60deg);
          transform: rotateX(-60deg);
  
}

.mfp-zoom-out-cur, 
.mfp-zoom-out-cur 
.mfp-image-holder .mfp-close{
  cursor:url(../img/zoom-out.cur), zoom-out;
}

.mfp-removing.mfp-bg {
  opacity: 0;
}



/* 5.3 Project Details */



.project-title-info{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 2vmin;
  text-transform: none;
  letter-spacing: 0.02em;
  margin-top: 2.2em;
  margin-left: -1.8em;
}

.project-title-info .project-info-item{
  display: inline-block;
  margin-left: 1.8em;
}

.project-details-item{
  position: relative;
}

.project-details-img{
  position: relative;
  padding: 0;
}

.project-details-info{
  background-color: #ffb344;
  padding: 4.8em 3.1em 4.8em;
  color:#fff;
}

.project-details-title{
  position: relative;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.9em;
  line-height: 1.5;
  text-transform: none;
  color: #fff;
  margin: 0 0 0.7em;
}

.project-details-title:before{
  content: '';
  position: absolute;
  bottom: -0.35em;
  width: 10em;
  border-top: 1px solid #ededed;
  left: -4.4em;
  width: 5.5em;
}

.project-details-descr{
  font-size: 1.1em;
  line-height: 1.62;
}

.project-details-descr p:last-child{
  margin-bottom: 0;
}

.project-details-item:nth-child(even) .project-details-info{
  right:0;
  left: auto;
  top:13%;
  background-color: #212121;
}



/* ------------------------------------------------------------------------------- */
/*  6. Experience
/* ------------------------------------------------------------------------------- */



.experience{
  text-align: center;
}

.text-parallax {
  background: no-repeat 0 0;
  display: inline-block;
}

.text-parallax-content{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 21.8em;
  line-height: 1;
  overflow: hidden;
  margin-bottom: 0;
  background: #272727;
  color:#fff;
  mix-blend-mode: darken;
  -ms-mix-blend-mode:darken;
}

.experience-info{
  position: relative;
  top: -0.75em;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.5625em;
  line-height: 1.45;
  letter-spacing: 0.01em;
  display: inline-block;
  text-align: left;
  margin:0 0 0 0.5em;
}



/* ------------------------------------------------------------------------------- */
/*  7. Clients
/* ------------------------------------------------------------------------------- */



.clients{
  text-align: center;
}

/* Elfsight Google Reviews Widget Styles */
.clients .section-content {
  margin-top: 60px;
  min-height: 400px; /* Mindesthöhe für Widget */
  width: 100%;
  display: block;
}

/* Elfsight App Container */
.elfsight-app-ead9122e-f2bf-4770-8f37-ee1a083c4c4d {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-height: 400px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Stelle sicher, dass iframes innerhalb des Widgets sichtbar sind */
.elfsight-app-ead9122e-f2bf-4770-8f37-ee1a083c4c4d iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-height: 400px !important;
  border: none !important;
}

.clients-list{
  margin:-3.8em -1.95em 0;
}

.clients-list .client{
  display: inline-block;
  vertical-align: middle;
  padding: 3.8em 1.95em 0;
  margin:0;
}

.clients-list .client img{
  opacity: 0.3;
  display: block;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.clients-list .client a:hover img{
  opacity: 1;
}



/* ------------------------------------------------------------------------------- */
/*  8. Blog
/* ------------------------------------------------------------------------------- */



.bg-blog{
  background: url(../img/bg/blog.jpg) 50% 0 no-repeat;
  background-size: cover;
}

.blog{
  position: relative;
  margin-bottom: 3em;
  margin-right: 1px;
  background-color: #373737;
  box-shadow:0 1px 15px rgba(0,0,0,0.08);
}

.blog:last-child{
  margin-bottom: 0;
}

.blog-thumbnail{
  position: static;
}

.blog-thumbnail-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 5px;
  padding: 0;
  border-radius: 0.25em 0 0 0.25em;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 0;
}

.blog-thumbnail-img img{
  border-radius: 0.25em 0.25em 0 0;
}

.blog-info{
  padding: 3.3em 3em;
}

.blog-info .blog-tags a{
  background-color: #434343;
}

.blog-tags{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  margin-top:-0.8em;
}

.blog-tags a{
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.77em 1.1em 0.77em;
  border-radius: 2em;
  background-color: #333333;
  text-transform: uppercase;
  color:#6f6f6f;
  margin-top: 0.8em;
  margin:0.8em 0.7em 0 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.blog-tags a:hover{
  background-color:#ffb344;
  text-decoration: none;
  color: #fff;
}

.blog-title{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.333;
  margin: 1.8em 0 0.8em;
  letter-spacing: 0.01em;
}

.blog-info p{
  margin-bottom: 0;
  color:#fff;
}

.blog-meta{
  font-size: 0.88em;
  color:#b4b4b4;
  overflow: hidden;
}

.blog-meta .author{
  color: #686868;
  float: left;
}

.blog-meta .author a{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  color:#686868;
}

.blog-meta .author a:hover{
  text-decoration: none;
  color:#ffb344;
}

.blog-meta .time{
  float: right;
  color:#686868;
}

.blog-info .blog-meta{
  border-top:1px solid #474747;
  margin-top: 1.7em;
  padding-top: 1.7em;
}

.read-more{
  display: inline-block;
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 0.88em;
  letter-spacing: 0.05em;
  text-transform: none;
  padding-right: 2em;
  background:url(../img/img-icon/read-more.png) right 50% no-repeat;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.read-more:hover{
  text-decoration: none;
  background-position: 95% 50%;
}

.blog-info .read-more{
  margin-top: 2.8em;
}



/* 8.1 Blog Details */



.blog-details{
  margin-bottom:8.3em;
}

.col-secondary{
  margin-top: 7.1em;
}

.post-header{
  margin-bottom: 5em;
}

.post-header h3{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 2.2em;
  line-height: 1.43;
  margin:0 0 0 0;
}

.post-header .blog-meta{
  margin-top: 2.45em;
}

.post-thumbnail{
  margin-bottom: 2.5em;
}

.post-thumbnail img{
  width: 100%;
  border-radius: 0.25em;
}

.post .blog-tags{
  margin-top: 5.4em;
}



/* 8.2 Widgets */



.widget{
  margin-bottom: 3.65em;
}

.widget-title{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.3em;
  text-transform: none;
  text-align: center;
  margin: 0 0 2.25em 0;
}



/* 8.3 Widget Recent Post */



.recent-post{
  margin-bottom: 1.7em;
  overflow: hidden;
}

.recent-post:last-child{
  margin-bottom: 0;
}

.recent-post-thumbnail{
  width: 9.32em;
  float: left;
}

.recent-post-thumbnail img{
  border-radius: 0.25em;
  max-width: 100%;
}

.recent-post-body{
  padding-left: 11.2em;
}

.recent-post-title{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0.01em;
  margin:0;
  position: relative;
}

.recent-post-time{
  font-size: 0.88em;
  color:#b4b4b4;
  margin-top: 0.9em;
}



/* ------------------------------------------------------------------------------- */
/*  9. Contacts
/* ------------------------------------------------------------------------------- */



.bg-contacts{
  background: url(../img/bg/kontakt-architekturbüro.webp) 50% 0 no-repeat;
  background-size: cover;
}

.contacts .fade-title-right{
  left: 90%;
}

.row-field{
  margin-left: -5px;
  margin-right:-5px;
}

.col-field{
  padding: 0 5px;
}

.col-message{
  display: none;
  margin-top: 20px;
}

.col-address{
  font-size: 1em;
  line-height: 2.1;
  margin-top: 2em;
}

.col-address h4{
  margin-bottom: 1em;
}

.form-submit{
  margin-top: 1.2em;
}

.success-message{
  display: none;
}

.error-message{
  display: none;
}

.success-message .fa{
  margin-right: 7px;
  font-size: 1.5em;
}

.contact-details{
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  z-index: 1;
}

.contact-enhanced {
  position: relative;
  z-index: 100 !important;
  margin-top: 0;
}

.col-map{
  height: 35em;
}

.gmap{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  padding: 0;
  height: 100%;
}

.map-info{
  padding: 1.2em;
}
.map-title{
  margin-bottom: 2em;
}

.map-title h3{
  margin:0;
}

.map-address-row{
  margin-top: 1em;
}

.map-address-row .fa{
  float: left;
  margin: 0.35em 0.6em 0 0;
  width: 1.1em;
  text-align: center;
  color: #ffb344;
  font-size: 1.2em;
}

.map-address-row  .text{
  display: block;
  overflow: hidden;
  font-size: 1.15em;
}

.contact-info{
  color:#fff;
  padding:0;
  background: transparent;
  position: relative;
  z-index: 2;
}

.contact-info-content{
  padding: 5.5em 5.6em;
  background-color:rgba(255, 179, 68, 0.75);
}

.contact-info-title{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 80px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:#fff;
  opacity: 0.1;
  position: absolute;
  top:100%;
  left: 100%;
  margin-top: -0.5em;
  margin-left: -2.3em;
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg);
   -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.contact-row{
  position: relative;
  z-index: 1;
  margin-bottom: 2.3em;
}

.contact-row:last-child{
  margin-bottom: 0;
}

.contact-row h4{
  margin:0 0 0.8em;
  color:#fff;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.15em;
  line-height: 1.5;
}

.contact-row .fa{
  float: left;
  width: 1.1em;
  margin-top: -0.15em;
  padding: 1px;
  text-align: center;
  font-size: 1.3em;
  line-height: 1.25;
}

.contact-body{
  padding-left: 2.6em;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-size: 1em;
}

.contact-content{
  font-size: 1em;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.phone-row{
  font-size: 1em;
  letter-spacing: 0.2em;
  margin-top: 0.5em;
  line-height: 1.8;
}



/* ------------------------------------------------------------------------------- */
/*  10. Footer
/* ------------------------------------------------------------------------------- */



.footer{
  text-align: center;
  margin: 120px 0 0;
  padding: 60px 0 2em;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  border-top: 1px solid rgba(255,255,255,0.1);
  background-color: #000;
  position: relative;
}

/* Stelle sicher, dass alles unter dem Footer schwarz ist */
.page-lines {
  background-color: #000;
}

.layout {
  background-color: #000;
}

.footer .brand{
  margin-top: -0.45em;
  font-size: 3.4em;
}

/* Footer Links Design */
.footer-links-wrapper{
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  align-items: flex-end;
}

.footer-copyright{
  margin: 0;
  font-size: 1em;
  color: var(--text-light);
  opacity: 0.7;
}

.footer-links{
  display: flex;
  align-items: center;
  gap: 0.8em;
}

.footer-link{
  color: var(--text-light);
  text-decoration: none;
  opacity: 0.7;
  transition: all 0.3s ease;
  font-size: 1em;
}

.footer-link:hover{
  opacity: 1;
  color: var(--primary-color);
}

.footer-separator{
  color: var(--text-light);
  opacity: 0.3;
}

.author-link{
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #d0d0d0;
}

.author-link:hover{
  text-decoration: none;
}



/* ------------------------------------------------------------------------------- */
/*  11. Responsive styles
/* ------------------------------------------------------------------------------- */



/* 11.1 Min width 768px */



@media (min-width: 768px){



  html{
    font-size: 100%;
  }
  
  /* Responsive Schriftgrößen angepasst */
  h1, .h1 {
    font-size: 52px;
  }
  
  h2, .h2 {
    font-size: 40px;
  }
  
  h3, .h3 {
    font-size: 24px;
  }
  
  h4, .h4 {
    font-size: 24px;
  }



  /* Slider */



  .arrow-left{
    top: 43.5vmin;
    bottom: auto;
  }

  .arrow-right{
    left: 28vmin;
    right: auto;
    margin-left: 5em;
    top: 43.5vmin;
    bottom: auto;
  }



  /* About */



  .entry{
    padding: 0 7.5em;
  }

  .col-about-spec{
    padding: 0 4.4em;
  }



  /* Project Carousel */



  .owl-prev{
    left: 3.6em
  }

  .owl-next{
    right:3.6em;
  }



  /* Projects Deatails */



  .project-details{
    margin-top: 7.1em;
  }


  .project-details-item{
    margin-bottom: 7.1em;
  }

 .project-details-info{
    position: absolute;
    z-index: 1;
    left: 0;
    top:13%;
    bottom: 13%;
    width: 55%;
  }

  .project-details-item:nth-child(odd) .project-details-img{
    padding-left: 15px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img{
    padding-right:15px;
    padding-left: 15px;
  }

}



/* 11.2 Min width 992px */



@media (min-width: 992px){



  html{
    font-size: 100%;
  }



  /* Content styles */



  .text-center-md{
    text-align: center;
  }

  .text-right-md{
    text-align: right;
  }

  .text-left-md{
    text-align: left;
  }



  /* Navbar Mobile */


  .navbar-mobile{
    position: absolute;
    left: -50000px;
    top: -50000px;
  }



  /* About */



  .col-about-img{
    padding-left: 0;
    left: -5px;
  }

  .col-about-img img{
    max-width: calc(100% + 5px);
  }



  /* Project Details */



  .project-details-item:nth-child(odd) .project-details-img{
    padding-left: 5px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img{
    padding-right:5px;
    padding-left: 15px;
  }



  /* Blog Details */


  
  .col-primary{
    padding-right: 2.2em;
  }

  .col-secondary{
    margin-top: 10.62em;
    margin-left: -5px;
    padding:0 10px 0 0;
  }



  /* Contacts */


  .row-field{
    margin-left: -15px;
  }

  .col-map{
    position:static;
    height: 100%;
  }
}


/* 11.3 Min width 1200px */



@media (min-width: 1200px){


   html{
    font-size: 100%;
  }



   /* Header */



  .main-header{
    padding-left: 0;
    text-align: center !important;
    padding-top: 150px;
    padding-bottom: 60px;
    max-width: 100%;
  }
  
  .main-header h1 {
    text-align: center !important;
    margin-right: 0 !important;
    font-size: 42px !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.02em !important;
  }
  
  .main-header-subtitle {
    text-align: center !important;
    margin-top: 1rem;
    font-size: 18px !important;
    padding: 0 20px;
  }



  /* Project Details */


  .project-details-info{
    width: 44%;
  }

}



/* 11.4 Max height 480px  */



  @media (max-height: 480px){



  /* Slider */



  .arrow-left{
    top: 43.5vmin;
    bottom: auto;
  }

  .arrow-right{
    left: 28vmin;
    right:auto;
    margin-left: 5em;
    top: 43.5vmin;
    bottom: auto;
  }
}

/* ===============================================
   MOBILE OPTIMIERUNG - Partner/Client Section
   Kompaktes Grid-Layout mit mehr Spalten
   =============================================== */

@media (max-width: 991px) {
  
  /* Section Title kleiner auf Mobile/Tablet */
  .section-title {
    font-size: 28px !important;
  }
  
  .clients {
    padding: 2rem 0;
  }
  
  .clients-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 1rem 0.5rem !important;
    list-style: none !important;
  }
  
  .clients-list .client {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem !important;
    margin: 0 !important;
    background: #323232;
    border-radius: 10px;
    transition: all 0.3s ease;
    min-height: 80px;
    vertical-align: top !important;
  }
  
  .clients-list .client:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: #3a3a3a;
  }
  
  .clients-list .client a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .clients-list .client img {
    width: 70px !important;
    max-width: 100% !important;
    height: auto !important;
    opacity: 0.5;
    transition: all 0.3s ease;
    border-radius: 8px;
    display: block !important;
  }
  
  .clients-list .client:hover img,
  .clients-list .client a:hover img {
    opacity: 1;
    transform: scale(1.05);
  }
  
}

@media (max-width: 480px) {
  
  /* Mobile Schriftgrößen wie auf DES.de */
  h1, .h1 {
    font-size: 38px !important;
  }
  
  h2, .h2, .section-title {
    font-size: 27px !important;
  }
  
  h3, .h3 {
    font-size: 24px !important;
  }
  
  h4, .h4 {
    font-size: 20px !important;
  }
  
  body, p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  
  .clients-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0.75rem 0.25rem !important;
  }
  
  .clients-list .client {
    padding: 0.5rem !important;
    min-height: 70px;
  }
  
  .clients-list .client img {
    width: 60px !important;
  }
  
}

@media (min-width: 481px) and (max-width: 768px) {
  
  .clients-list {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
  }
  
  .clients-list .client img {
    width: 75px !important;
  }
  
}

@media (min-width: 769px) and (max-width: 991px) {
  
  .clients-list {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.2rem !important;
  }
  
  .clients-list .client img {
    width: 85px !important;
  }
  
}

/* ===============================================
   MOBILE OPTIMIERUNG - Row-Base Row
   Korrekte Darstellung der Row-Base Row auf Mobile
   =============================================== */

@media (max-width: 991px) {
  
  .row-base.row {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }
  
  .row-base.row::before,
  .row-base.row::after {
    content: none !important;
    display: none !important;
  }
  
  .row-base .col-base {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 2rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    float: none !important;
  }
  
  .row-base .col-base:first-child {
    margin-top: 0 !important;
  }
  
  .row-base .col-base:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Clearfix auf Mobile entfernen */
  .row-base .clearfix {
    display: none !important;
  }
  
  /* Section Content Row-Base Optimierung */
  .section-content .row-base.row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  
  .section-content .row-base.row > [class*="col-"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    margin-top: 0 !important;
  }
  
  .section-content .row-base.row > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }
  
  /* About Section Row-Base - kompaktere Abstände */
  .about .row-base.row {
    flex-direction: column;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .about .row-base.row .col-base {
    margin-bottom: 2.5rem !important;
  }
  
  .about .row-base.row .col-base:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Contact Section Row-Base - kompaktere Abstände */
  .contact-enhanced .row-base.row {
    flex-direction: column;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .contact-enhanced .row-base.row .col-base {
    margin-bottom: 2rem !important;
  }
  
  .contact-enhanced .row-base.row .col-base:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Footer Row-Base */
  .footer .row-base.row {
    flex-direction: column;
    gap: 0 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
  }
  
  .footer .row-base.row .col-base {
    margin-bottom: 1.5rem !important;
  }
  
  .footer .row-base.row .col-base:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Alle Col-Base innerhalb Row-Base - einheitliche Abstände */
  .row-base .col-base {
    margin-bottom: 2rem !important;
  }
  
  .row-base .col-base:last-child {
    margin-bottom: 0 !important;
  }
  
}

@media (max-width: 480px) {
  
  .row-base .col-base {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .section-content .row-base.row > [class*="col-"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .about .row-base.row .col-base {
    margin-bottom: 2rem !important;
  }
  
  .contact-enhanced .row-base.row .col-base {
    margin-bottom: 1.5rem !important;
  }
  
}

/* ===============================================
   MOBILE OPTIMIERUNG - Projects Section
   Zentrierung der Projekt-Elemente auf Mobile
   =============================================== */

@media (max-width: 991px) {
  
  .projects-carousel {
    margin: 0 auto;
    text-align: center;
  }
  
  .projects-carousel .owl-stage-outer {
    margin: 0 auto;
  }
  
  .projects-carousel .owl-stage {
    display: flex;
    align-items: center;
  }
  
  .projects-carousel .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .project,
  .project.project-light {
    margin: 0 auto !important;
    text-align: center;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .project figure {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  
  .project figure img {
    width: 100%;
    margin: 0 auto;
    display: block;
  }
  
  .project figcaption {
    text-align: center !important;
    margin: 2rem 1rem !important;
    left: 0 !important;
    right: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .project-title {
    text-align: center !important;
    left: auto !important;
    position: relative !important;
    width: 100%;
    margin: 0 auto;
  }
  
  .project-category {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 1rem 0 0 0 !important;
    text-align: center;
    letter-spacing: 0.2em !important;
  }
  
  .project-zoom {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(0.5) !important;
  }
  
  .project figure:hover .project-zoom {
    transform: translate(-50%, -50%) scale(1) !important;
  }
  
}

/* ===============================================
   MOBILE OPTIMIERUNG - Experience/Text-Parallax Section
   Sichtbarkeit des Parallax-Contents auf Mobile sicherstellen
   =============================================== */

@media (max-width: 991px) {
  
  .experience {
    padding: 3rem 0;
    text-align: center;
    position: relative;
    overflow: visible;
  }
  
  .text-parallax {
    display: block !important;
    width: 100% !important;
    text-align: center;
    position: relative;
    overflow: visible;
    background-size: cover;
    background-position: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .text-parallax-content {
    font-size: 8rem !important;
    line-height: 1 !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    color: #fff !important;
    mix-blend-mode: normal !important;
    -ms-mix-blend-mode: normal !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 1;
    display: block;
    opacity: 0.3;
    font-weight: 700;
  }
  
  .experience-info {
    position: relative !important;
    top: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    display: block !important;
    text-align: center !important;
    margin: 1rem 0 0 0 !important;
    z-index: 2;
    color: #fff;
  }
  
}

@media (max-width: 480px) {
  
  .text-parallax {
    min-height: 150px;
  }
  
  .text-parallax-content {
    font-size: 6rem !important;
    opacity: 0.4;
  }
  
  .experience-info {
    font-size: 1.1rem !important;
  }
  
}

@media (min-width: 481px) and (max-width: 768px) {
  
  .text-parallax-content {
    font-size: 7rem !important;
  }
  
  .experience-info {
    font-size: 1.15rem !important;
  }
  
}

/* ===============================================
   MOBILE OPTIMIERUNG - Service Section
   Einheitliche, nicht zu hohe Service-Kästchen
   =============================================== */

@media (max-width: 991px) {
  
  /* Service Section - Einheitliche Höhen und Layout */
  .services-section .service-item {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 2rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
    background: #323232;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .services-section .service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  }
  
  .services-section .service-item img {
    max-width: 60px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 1.5rem !important;
    display: block !important;
  }
  
  .services-section .service-item h4 {
    min-height: auto !important;
    height: auto !important;
    font-size: 1.2rem !important;
    margin: 0 0 1rem 0 !important;
    line-height: 1.3 !important;
    display: block !important;
    text-align: center !important;
  }
  
  .services-section .service-item p {
    flex-grow: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    text-align: left !important;
  }
  
  .services-section .service-item .btn {
    width: 100% !important;
    margin-top: 1rem !important;
    padding: 1rem 2rem !important;
    font-size: 0.85rem !important;
    display: block !important;
  }
  
  /* Alle Service-Container einheitlich */
  .services-section .col-service {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 1.5rem;
    float: none !important;
  }
  
  .services-section .col-service:last-child {
    margin-bottom: 0;
  }
  
  .services-section .row-special {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .services-section .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    width: 100%;
    display: grid;
  }
  
  .services-section .row-services {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
  }
  
  /* Alle Unterschiede entfernen */
  .services-section .breite,
  .services-section .position,
  .services-section .abstand {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }
  
  .services-section .col-base.col-service {
    margin-top: 0 !important;
  }
  
  /* Center Content Fix */
  .services-section .center-content {
    display: block !important;
    justify-content: normal !important;
  }
  
}

@media (max-width: 480px) {
  
  .services-section .service-item {
    padding: 1.5rem 1rem !important;
  }
  
  .services-section .service-item h4 {
    font-size: 1.1rem !important;
  }
  
  .services-section .service-item p {
    font-size: 0.9rem !important;
  }
  
  .services-section .service-item img {
    max-width: 50px !important;
  }
  
}

/* Tablet Optimierung (481px - 768px) */
@media (min-width: 481px) and (max-width: 991px) {
  
  .services-section .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem;
  }
  
  .services-section .col-service {
    width: 50% !important;
    float: left;
    padding: 0 0.75rem !important;
  }
  
  .services-section .service-item {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
}




/* Hero Main und Iframe Styles */
.hero-main {
  position: relative;
  overflow: visible;
  min-height: 100vh;
  height: 100vh;
}

/* Auf Mobile: height: 100vh entfernen, damit man scrollen kann */
@media (max-width: 991px) {
  .hero-main {
    height: auto !important;
    min-height: auto !important;
    overflow-y: auto !important;
  }
  
  /* Auf index.html: Iframe-Bereich kann scrollen */
  body.home-page .hero-main {
    height: auto !important;
    min-height: 100vh !important;
  }
  
  /* Stelle sicher, dass html und body scrollen können */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Desktop: Iframe Styles */
.hero-iframe {
  width: 100%;
  height: 100vh;
  min-height: 700px;
  border: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
/* ===============================================
   STATIKBÜRO24 - ENHANCED DESIGN STYLES
   Basierend auf dem bestehenden Template-Design
   =============================================== */

/* Bestehende Farbpalette beibehalten */
:root {
  --primary-color: #ffb344;        /* Bestehende Primary-Farbe */
  --background-dark: #272727;      /* Bestehende Hintergrundfarbe */
  --background-card: #323232;     /* Bestehende Kartenfarbe */
  --text-light: rgba(255,255,255,0.5);  /* Bestehende Textfarbe */
  --text-white: #fff;              /* Weiße Textfarbe */
  --border-color: #323232;         /* Bestehende Borderfarbe */
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* Enhanced Typography - Trasandina wie auf DES.de */
body {
  font-family: 'Trasandina', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-light);
  background-color: var(--background-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 1rem;
  letter-spacing: 0;
  color: var(--text-white);
}

/* Enhanced Hero Section - bestehende Struktur beibehalten */
.hero-enhanced {
  position: relative;
  min-height: 100vh;
  background: var(--background-dark);
  overflow: hidden;
}

.hero-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,179,68,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.5;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 120px 0;
  text-align: center;
  color: var(--text-white);
}

.hero-title {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  opacity: 0.8;
  animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-cta {
  animation: fadeInUp 1s ease-out 0.6s both;
}

/* Floating Elements Animation - mit bestehenden Farben */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.floating-element {
  position: absolute;
  background: rgba(255, 179, 68, 0.1);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(1) {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-element:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.floating-element:nth-child(3) {
  width: 60px;
  height: 60px;
  bottom: 30%;
  left: 20%;
  animation-delay: 4s;
}

/* Enhanced Service Cards - bestehende Farben verwenden */
.service-card-enhanced {
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  min-height: auto;
  height: auto;
}

.service-card-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-color);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.service-card-enhanced:hover::before {
  transform: scaleX(1);
}

.service-card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  border-color: rgba(255, 179, 68, 0.3);
  background: rgba(255,255,255,0.05);
}

.service-icon-enhanced {
  width: 80px;
  height: 80px;
  background: var(--primary-color);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.service-card-enhanced:hover .service-icon-enhanced {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 25px rgba(255, 179, 68, 0.3);
}

.service-icon-enhanced img {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}

.service-title-enhanced {
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--text-white);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.service-description-enhanced {
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 1em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 991px) {
  .service-title-enhanced {
    font-size: 1.2rem !important;
  }
  
  .service-description-enhanced {
    font-size: 0.85rem !important;
  }
}

.service-link-enhanced {
  display: inline-flex;
  align-items: center;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.service-link-enhanced:hover {
  color: var(--text-white);
  transform: translateX(5px);
}

.service-link-enhanced::after {
  content: '→';
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.service-link-enhanced:hover::after {
  transform: translateX(3px);
}

/* Enhanced FAQ Section - bestehende Farben */
.faq-enhanced {
  background: var(--background-dark);
  padding: 5rem 0;
}

.faq-item-enhanced {
  background: var(--background-card);
  border-radius: 10px;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.faq-item-enhanced:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.faq-question-enhanced {
  padding: 1.5rem 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-white);
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.faq-question-enhanced::after {
  content: '+';
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--primary-color);
  transition: all 0.3s ease;
}

.faq-question-enhanced.active::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-question-enhanced:hover {
  background: rgba(255, 179, 68, 0.1);
}

.faq-answer-enhanced {
  padding: 0 2rem 1.5rem;
  color: var(--text-light);
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.faq-answer-enhanced.active {
  max-height: 200px;
  padding: 0 2rem 1.5rem;
}

/* Enhanced Contact Section - bestehende Farben */
.contact-enhanced {
  background: none !important;
  color: var(--text-white);
  padding: 5rem 0;
  position: relative;
  overflow: visible !important;
  z-index: 100 !important;
  margin-top: 0;
  clear: both;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.contact-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,179,68,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
  opacity: 0.5;
  z-index: 1;
}

.contact-enhanced .container {
  position: relative;
  z-index: 2;
}

.contact-form-enhanced {
  background: rgba(20, 20, 20, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 3rem;
  border: 1px solid rgba(255, 179, 68, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 
              0 0 30px rgba(255, 179, 68, 0.1),
              inset 0 0 30px rgba(255, 179, 68, 0.03) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 3;
}

.form-group-enhanced {
  margin-bottom: 1.5rem;
}

.form-control-enhanced {
  background: rgba(20, 20, 20, 0.9) !important;
  border: 1px solid rgba(255, 179, 68, 0.2) !important;
  border-radius: 0.75em;
  padding: 1.1em 1.375em;
  color: #fff;
  font-size: 1em;
  font-family: 'Trasandina', 'Inter', sans-serif;
  transition: all 0.15s;
}

.form-control-enhanced::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-control-enhanced:focus {
  border-color: rgba(255, 179, 68, 0.6) !important;
  background-color: rgba(20, 20, 20, 0.95) !important;
  outline: 0;
  box-shadow: 
    0 0 10px rgba(255, 179, 68, 0.3),
    inset 0 0 10px rgba(255, 179, 68, 0.1) !important;
}

.btn-enhanced {
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffb344 !important;
  border: 1px solid rgba(255, 179, 68, 0.3);
  background: rgba(255, 179, 68, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 0;
  padding: 8px 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 179, 68, 0.4);
  box-shadow: 0 2px 10px rgba(255, 179, 68, 0.3), 0 0 20px rgba(255, 179, 68, 0.1);
  animation: pulseGlowEnhanced 2s ease-in-out infinite;
  text-decoration: none;
  display: inline-block;
}

.btn-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 179, 68, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn-enhanced:hover::before {
  left: 100%;
}

.btn-enhanced:hover {
  color: #fff !important;
  transform: translateY(-3px);
  border-color: rgba(255, 179, 68, 0.6);
  background: rgba(255, 179, 68, 0.15);
  box-shadow: 0 4px 20px rgba(255, 179, 68, 0.4), 0 0 30px rgba(255, 179, 68, 0.2);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 179, 68, 0.7);
  animation: none;
}

@keyframes pulseGlowEnhanced {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(255, 179, 68, 0.3), 0 0 20px rgba(255, 179, 68, 0.1);
  }
  50% {
    box-shadow: 0 4px 20px rgba(255, 179, 68, 0.5), 0 0 30px rgba(255, 179, 68, 0.3);
  }
}

/* Enhanced Section Headers - bestehende Struktur */
.section-header-enhanced {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title-enhanced {
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-size: 40px;
  font-weight: 400;
  margin-bottom: 2rem;
  position: relative;
  color: var(--text-white);
  letter-spacing: 0;
}

.section-title-enhanced::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--primary-color);
  border-radius: 2px;
}

.section-subtitle-enhanced {
  font-size: 1em;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Enhanced Statistics - bestehende Farben */
.stats-enhanced {
  background: var(--background-card);
  padding: 4rem 0;
}

.stat-item-enhanced {
  text-align: center;
  padding: 2rem;
}

.stat-number-enhanced {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
  display: block;
  margin-bottom: 0.5rem;
}

.stat-label-enhanced {
  font-size: 1.1rem;
  color: var(--text-light);
  font-weight: 500;
}

/* Enhanced Testimonials - bestehende Farben */
.testimonials-enhanced {
  padding: 5rem 0;
  background: var(--background-dark);
}

.testimonial-card-enhanced {
  background: var(--background-card);
  border-radius: 15px;
  padding: 2.5rem;
  box-shadow: var(--shadow-medium);
  text-align: center;
  position: relative;
  margin: 1rem;
  border: 1px solid var(--border-color);
}

.testimonial-card-enhanced::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4rem;
  color: var(--primary-color);
  opacity: 0.3;
}

.testimonial-text-enhanced {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-white);
  margin-bottom: 2rem;
  font-style: italic;
}

.testimonial-author-enhanced {
  font-weight: 600;
  color: var(--primary-color);
}

/* Enhanced Animations - bestehende Struktur beibehalten */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scroll Animations */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.scroll-animate.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
  }
  
  .section-title-enhanced {
    font-size: 1.75em;
  }
  
  .service-card-enhanced {
    padding: 2rem;
  }
  
  .contact-form-enhanced {
    padding: 2rem;
  }
  
  .stat-number-enhanced {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .service-card-enhanced {
    padding: 1.5rem;
  }
  
  .contact-form-enhanced {
    padding: 1.5rem;
  }
}

/* Enhanced Loading Animation - bestehende Farben */
.loader-enhanced {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.loader-enhanced.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loader-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 179, 68, 0.3);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Bestehende Scrollbar beibehalten */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 179, 68, 0.8);
}

/* Bestehende Selection beibehalten */
::selection {
  background: var(--primary-color);
  color: var(--text-white);
}

::-moz-selection {
  background: var(--primary-color);
  color: var(--text-white);
}

/* Enhanced Project List */
.project-list-enhanced {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}

.project-list-enhanced li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.8em;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1em;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.project-list-enhanced li:before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-size: 1.5em;
  line-height: 0.8;
  font-weight: bold;
}

.project-list-enhanced li:hover {
  color: #fff;
  transform: translateX(5px);
}

/* ===============================================
   MOBILE OPTIMIERUNG - Umfassende Mobile Styles
   Nur für max-width 991px (kleiner als Desktop)
   Desktop bleibt unverändert
   =============================================== */

@media (max-width: 991px) {
  
  /* === 1. MOBILE NAVIGATION === */
  
  .navbar-mobile {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(43, 43, 43, 0.98) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    padding: 1rem 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  .navbar-mobile .brand {
    display: flex !important;
    align-items: center !important;
    font-size: 1.2rem !important;
    margin-left: 1rem !important;
    margin-right: auto !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    order: -1 !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }
  
  .navbar-mobile .brand img {
    width: 80px !important;
    height: auto;
    display: block;
  }
  
  .navbar-mobile-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-right: 1rem !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    order: 1 !important;
  }
  
  .navbar-mobile-phone-btn {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    flex: 0 0 auto;
  }
  
  .navbar-toggle {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    padding: 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  
  .navbar-toggle .icon-bar {
    display: block !important;
    width: 28px !important;
    height: 3px !important;
    background: #ffb344 !important;
    margin: 0 !important;
    margin-top: 7px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .navbar-toggle .icon-bar:first-child {
    margin-top: 0 !important;
  }
  
  .phone-btn-label {
    position: relative;
    font-family: 'neueMachina', 'Neue Machina', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #ffb344 !important;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1 !important;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 179, 68, 0.4);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    padding: 8px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 179, 68, 0.3);
    background: rgba(255, 179, 68, 0.08);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    animation: pulseGlowPhone 2s ease-in-out infinite;
    border-radius: 0;
  }
  
  .phone-btn-label .fa-phone {
    font-size: 18px;
  }
  
  .phone-btn-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 179, 68, 0.3), transparent);
    transition: left 0.6s ease;
  }
  
  .navbar-mobile-phone-btn:hover .phone-btn-label {
    color: #fff !important;
    transform: translateY(-2px);
    border-color: rgba(255, 179, 68, 0.6);
    background: rgba(255, 179, 68, 0.15);
    box-shadow: 0 4px 20px rgba(255, 179, 68, 0.4), 0 0 30px rgba(255, 179, 68, 0.2);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 179, 68, 0.7);
    animation: none;
  }
  
  .navbar-mobile-phone-btn:hover .phone-btn-label::before {
    left: 100%;
  }
  
  @keyframes pulseGlowPhone {
    0%, 100% {
      box-shadow: 0 2px 10px rgba(255, 179, 68, 0.3), 0 0 20px rgba(255, 179, 68, 0.1);
    }
    50% {
      box-shadow: 0 4px 20px rgba(255, 179, 68, 0.5), 0 0 30px rgba(255, 179, 68, 0.3);
    }
  }
  
  .navbar-toggle {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    padding: 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1001;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  
  .navbar-toggle .icon-bar {
    display: block !important;
    width: 28px !important;
    height: 3px !important;
    background: #ffb344 !important;
    margin: 0 !important;
    transition: all 0.3s ease;
    border-radius: 2px;
  }
  
  .navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
  }
  
  .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
    opacity: 0;
  }
  
  .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }
  
  .navbar-collapse {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: rgba(43, 43, 43, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    padding: 1rem 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .navbar-collapse.in,
  .navbar-collapse.show {
    transform: translateX(0);
  }
  
  .navbar-nav-mobile {
    padding: 0;
    margin: 0;
  }
  
  .navbar-nav-mobile li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .navbar-nav-mobile li a {
    padding: 1.2rem 1.5rem;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
  }
  
  .navbar-nav-mobile li a:hover,
  .navbar-nav-mobile .active > a {
    background: rgba(255, 179, 68, 0.1);
    color: var(--primary-color) !important;
    padding-left: 2rem;
  }
  
  .navbar-nav-mobile li ul {
    background: rgba(50, 50, 50, 0.8);
    padding-left: 0;
  }
  
  .navbar-nav-mobile li ul li a {
    padding-left: 2.5rem;
    font-size: 0.9rem;
  }
  
  /* === 2. HEADER & BRAND PANEL === */
  
  .header-home,
  .header-inner {
    position: relative;
  }
  
  .brand-panel {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 1rem !important;
    text-align: center;
    background: transparent;
  }
  
  .brand-panel .brand img {
    width: 100px !important;
    height: auto;
  }
  
  .brand-name {
    display: none;
  }
  
  .header-phone {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    text-align: center;
    padding: 0.5rem 0;
    font-size: 14px !important;
    letter-spacing: 0.15em !important;
  }
  
  .vertical-panel,
  .vertical-panel-content {
    display: none !important;
  }
  
  .slide-number {
    display: none;
  }
  
  /* === 3. MAIN CONTENT & IFRAME === */
  
  .main {
    min-height: 50vh !important;
    padding-top: 80px;
  }
  
  .main iframe {
    height: 400px !important;
    width: 100% !important;
  }
  
  /* === 4. TYPOGRAPHY === */
  
  h1, .h1 {
    font-size: 2rem !important;
    line-height: 1.3;
    letter-spacing: 0.1em !important;
  }
  
  h2, .h2, .section-title {
    font-size: 1.5rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.3;
    margin-bottom: 1.5rem;
  }
  
  h3, .h3 {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }
  
  h4, .h4 {
    font-size: 1.1rem !important;
    line-height: 1.4;
  }
  
  .fade-title-left,
  .fade-title-right {
    font-size: 4rem !important;
    opacity: 0.02 !important;
  }
  
  /* === 5. SECTIONS & CONTAINERS === */
  
  .section {
    margin-bottom: 3rem !important;
    padding: 2rem 0.5rem;
  }
  
  .section-header {
    margin-bottom: 2rem;
  }
  
  .section-content {
    margin-top: 2rem !important;
  }
  
  .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  /* === 6. ABOUT SECTION === */
  
  .about .section {
    margin-top: 2rem;
  }
  
  .col-about-title {
    margin-bottom: 1.5rem;
  }
  
  .col-about-title h3 {
    font-size: 1.5rem;
  }
  
  .col-about-info {
    margin-bottom: 2rem;
  }
  
  .col-about-info p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1rem;
  }
  
  .col-about-img {
    margin-top: 2rem;
    padding: 0;
  }
  
  .col-about-img img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }
  
  .service-item {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--background-card);
    border-radius: 12px;
    transition: all 0.3s ease;
  }
  
  .service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  }
  
  .service-item img {
    max-width: 60px;
    margin: 0 auto 1rem;
    display: block;
  }
  
  .service-item h4 {
    font-size: 1.1rem;
    margin: 1rem 0;
    min-height: auto !important;
  }
  
  .service-item p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  /* === 7. SERVICES SECTION === */
  
  .services-section {
    padding: 2rem 0;
  }
  
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  
  .row-services {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .col-service {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 2rem;
  }
  
  .services-section .col-service {
    padding: 0 !important;
  }
  
  .service-item {
    width: 100%;
    padding: 2rem 1.5rem;
  }
  
  .service-item h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  
  .service-item p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    text-align: left;
  }
  
  .service-item .btn {
    width: 100%;
    text-align: center;
    padding: 1rem 2rem;
    font-size: 0.85rem;
  }
  
  .abstand {
    padding-top: 0 !important;
  }
  
  .row-special {
    margin-top: 0 !important;
  }
  
  /* === 8. PROJECTS SECTION === */
  
  .projects-carousel {
    margin: 0 -1rem;
  }
  
  .project {
    margin-bottom: 1rem;
  }
  
  .project figcaption {
    margin: 2rem 1rem;
  }
  
  .project-title {
    font-size: 1.3rem !important;
    line-height: 1.4;
  }
  
  .project-category {
    font-size: 0.85rem !important;
  }
  
  .owl-prev,
  .owl-next {
    font-size: 0.8rem;
    opacity: 0.9;
  }
  
  .owl-prev {
    left: 0.5rem;
    padding-left: 25px;
  }
  
  .owl-next {
    right: 0.5rem;
    padding-right: 25px;
  }
  
  /* === 9. EXPERIENCE SECTION === */
  
  .experience {
    padding: 3rem 0;
    text-align: center;
  }
  
  .text-parallax-content {
    font-size: 8rem !important;
  }
  
  .experience-info {
    font-size: 1.2rem !important;
    line-height: 1.4;
    position: relative;
    top: auto;
    margin-top: 1rem;
  }
  
  /* === 10. CLIENTS SECTION === */
  
  .clients {
    padding: 2rem 0;
  }
  
  .clients-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 0 !important;
    padding: 0 1rem;
  }
  
  .clients-list .client {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem !important;
    background: var(--background-card);
    border-radius: 12px;
    transition: all 0.3s ease;
  }
  
  .clients-list .client:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
  
  .clients-list .client a img {
    width: 80px !important;
    height: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease;
  }
  
  .clients-list .client:hover a img {
    opacity: 1;
  }
  
  /* === 11. FAQ SECTION === */
  
  .faq {
    padding: 2rem 0;
  }
  
  .faq-list {
    padding: 0 !important;
  }
  
  /* === 12. VERBERGE ELEMENTE AUF MOBIL === */
  
  .project-list-enhanced {
    display: none !important;
  }
  
  img[src="img/bg/380x370.jpg"],
  img.img-responsive[src="img/bg/380x370.jpg"] {
    display: none !important;
  }
  
  .experience.section {
    display: none !important;
  }
  
  .faq-item-enhanced {
    margin-bottom: 1rem;
    border-radius: 12px;
  }
  
  .faq-question-enhanced {
    padding: 1.2rem 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.5;
  }
  
  .faq-question-enhanced::after {
    right: 1.5rem !important;
    font-size: 1.3rem !important;
  }
  
  .faq-answer-enhanced {
    padding: 0 1.5rem 1.2rem !important;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  .faq-answer-enhanced.active {
    max-height: 500px !important;
    padding: 0 1.5rem 1.2rem !important;
  }
  
  /* === 12. CONTACT SECTION === */
  
  .contact-enhanced {
    padding: 3rem 0 !important;
  }
  
  .section-header-enhanced {
    margin-bottom: 2rem;
    padding: 0 0.5rem;
  }
  
  .section-title-enhanced {
    font-size: 1.75rem !important;
    line-height: 1.3;
    margin-bottom: 1rem;
  }
  
  .section-subtitle-enhanced {
    font-size: 0.95rem;
    padding: 0 1rem;
    padding-top: 1rem;
  }
  
  .col-address {
    margin-bottom: 2rem;
    padding: 0 1rem;
    order: 2;
  }
  
  .col-address h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    display: none;
  }
  
  .col-base.col-md-8 {
    order: 1;
  }
  
  .col-address p {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 0.8rem;
  }
  
  .contact-form-enhanced {
    padding: 1.5rem !important;
    margin: 0 1rem;
  }
  
  .form-control-enhanced {
    width: 100%;
    padding: 1rem !important;
    font-size: 0.95rem !important;
    margin-bottom: 1rem;
  }
  
  .col-field {
    padding: 0 !important;
    margin-bottom: 1rem;
  }
  
  .form-submit {
    text-align: center !important;
    margin-top: 1.5rem;
  }
  
  .btn-enhanced {
    width: 100%;
    padding: 1.2rem 2rem !important;
    font-size: 1rem !important;
  }
  
  /* === 13. FOOTER === */
  
  .footer {
    padding: 2rem 1rem;
    margin: 2rem 0 1rem !important;
  }
  
  .footer .brand {
    font-size: 2rem !important;
    margin-bottom: 1.5rem;
    display: block;
    text-align: center;
  }
  
  .footer .row {
    flex-direction: column;
    text-align: center !important;
  }
  
  .footer .col-base {
    margin-bottom: 1.5rem;
  }
  
  .footer .col-base:last-child {
    margin-bottom: 0;
  }
  
  .footer-links-wrapper {
    align-items: center !important;
    gap: 0.5rem;
  }
  
  .footer-copyright {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }
  
  .footer-links {
    justify-content: center;
  }
  
  .footer-link {
    font-size: 0.85rem;
  }
  
  .author-link {
    font-size: 0.85rem;
  }
  
  .text-left-md,
  .text-right-md,
  .text-center-md {
    text-align: center !important;
  }
  
  /* === 14. BUTTONS === */
  
  .btn {
    padding: 1rem 2rem !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.1em !important;
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .btn:last-child {
    margin-bottom: 0;
  }
  
  .btn-shadow-2 {
    width: 100%;
  }
  
  /* === 15. GRID & LAYOUT === */
  
  .row-base {
    margin-top: 0 !important;
  }
  
  .col-base {
    margin-top: 1.5rem !important;
    padding: 0 0.5rem;
  }
  
  .col-sm-6,
  .col-md-4,
  .col-md-8,
  .col-md-12 {
    width: 100% !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  /* === 16. PAGE LINES (verstecken auf Mobile) === */
  
  .page-lines {
    display: none;
  }
  
  /* === 17. UTILITY CLASSES === */
  
  .visible-md,
  .visible-lg {
    display: none !important;
  }
  
  .visible-sm,
  .visible-xs {
    display: block !important;
  }
  
  /* === 18. IMPROVED TOUCH TARGETS === */
  
  a,
  button,
  .btn,
  .navbar-toggle,
  .faq-question-enhanced {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* === 19. BETTER SPACING === */
  
  .section-content .row-base {
    margin-left: 0;
    margin-right: 0;
  }
  
  .section-content .row-base > [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* === 20. IMPROVED IMAGES === */
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  .img-responsive {
    width: 100%;
    height: auto;
  }
  
}

/* === EXTRA SMALL DEVICES (max-width: 480px) === */

@media (max-width: 480px) {
  
  .navbar-mobile .brand {
    font-size: 1.2rem !important;
  }
  
  h1, .h1 {
    font-size: 1.75rem !important;
  }
  
  h2, .h2, .section-title {
    font-size: 1.4rem !important;
  }
  
  .section {
    padding: 1.5rem 0.5rem;
  }
  
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .service-item {
    padding: 1.5rem 1rem;
  }
  
  .contact-form-enhanced {
    padding: 1rem !important;
  }
  
  .clients-list {
    grid-template-columns: 1fr !important;
  }
  
  .clients-list .client a img {
    width: 100px !important;
  }
  
  .main iframe {
    height: 400px !important;
    width: 100% !important;
  }
  
  .text-parallax-content {
    font-size: 6rem !important;
  }
  
  .experience-info {
    font-size: 1.1rem !important;
  }
  
  .contact-enhanced .row-base.row .col-base {
    margin-bottom: 1.5rem !important;
    margin-top: 1.5rem !important;
  }
  
  .section-content .row-base.row > [class*="col-"] {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-bottom: 1.5rem !important;
  }
  
}

/* === TABLET OPTIMIERUNG (max-width: 768px bis 991px) === */

@media (min-width: 481px) and (max-width: 991px) {
  
  .clients-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .col-service {
    width: 50% !important;
    float: left;
    padding: 0 0.75rem !important;
  }
  
  .service-item {
    height: 100%;
  }
  
  .navbar-mobile .brand {
    font-size: 1.3rem !important;
  }
  
}

/* === ZUSÄTZLICHE MOBILE VERBESSERUNGEN === */

@media (max-width: 991px) {
  
  /* Verhindere smooth scrolling auf Mobile, um automatisches Scrollen zu vermeiden */
  html {
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Verhindere horizontales Scrollen */
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Content Wrapper Anpassung */
  .content {
    padding-top: 70px;
  }
  
  /* Header Home Anpassung */
  .header-home {
    min-height: auto;
  }
  
  /* Navigation Toggle Fix für Bootstrap */
  .navbar-toggle.collapsed {
    border: none;
  }
  
  .navbar-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
  
  /* Verbesserte List Styles */
  .project-list-enhanced li {
    padding-left: 1.2em;
    font-size: 0.95rem;
  }
  
  /* Text Parallax Optimierung */
  .text-parallax {
    display: block;
    width: 100%;
    text-align: center;
  }
  
  /* Section Title Zentrierung */
  .section-title {
    text-align: center !important;
    margin-left: 0 !important;
  }
  
  /* Verbesserte Formular-Spalten auf Mobile */
  .row-field .col-field {
    width: 100%;
    margin-bottom: 1rem;
  }
  
  /* Contact Section Layout */
  .contact-enhanced .row-base.row {
    display: flex;
    flex-direction: column;
  }
  
  .contact-enhanced .col-address,
  .contact-enhanced .col-base {
    width: 100%;
    text-align: center;
  }
  
  .contact-enhanced .col-address {
    order: 2;
  }
  
  .contact-enhanced .col-base.col-md-8 {
    order: 1;
  }
  
  /* Footer Spacing */
  .footer .row-base {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  /* Hide Desktop-specific Elements */
  .visible-md,
  .visible-lg {
    display: none !important;
  }
  
  /* Iframe Responsive Fix - wie natives Spiel */
  .main iframe {
    height: 400px !important;
    width: 100% !important;
    touch-action: none !important; /* Alle Touch-Events direkt an Iframe */
    pointer-events: auto !important;
    overflow: hidden !important;
  }
  
  /* Project Carousel Mobile */
  .projects-carousel .owl-item {
    padding: 0 0.5rem;
  }
  
  /* Better Image Display */
  .col-about-img,
  .project figure img {
    border-radius: 12px;
    overflow: hidden;
  }
  
  /* Service Icons Mobile */
  .service-item img[src*="icon"] {
    width: 50px !important;
    height: auto;
    margin-bottom: 1rem;
  }
  
  /* Button Spacing */
  .btn,
  .btn-enhanced {
    margin-bottom: 1rem;
  }
  
  /* Last button no margin */
  .btn:last-child,
  .btn-enhanced:last-child {
    margin-bottom: 0;
  }
  
  /* Section Padding Mobile */
  .section {
    scroll-margin-top: 80px;
  }
  
  /* FAQ Mobile Interaction */
  .faq-question-enhanced:active {
    background: rgba(255, 179, 68, 0.15);
  }
  
  /* Touch Feedback */
  .service-item:active,
  .project:active {
    transform: scale(0.98);
  }
  
  /* Better Focus States for Accessibility */
  .navbar-toggle:focus-visible,
  .faq-question-enhanced:focus-visible,
  .btn:focus-visible,
  .btn-enhanced:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }
  
}

/* === LANDSCAPE ORIENTATION OPTIMIERUNG === */

@media (max-width: 991px) and (orientation: landscape) {
  
  .main iframe {
    height: 400px !important;
    width: 100% !important;
    touch-action: none !important; /* Alle Touch-Events direkt an Iframe */
    pointer-events: auto !important;
    overflow: hidden !important;
  }
  
  .navbar-collapse {
    max-height: calc(100vh - 60px);
  }
  
  .section {
    padding: 2rem 1rem;
  }
  
}

/* === HIGH DPI DISPLAYS === */

@media (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2) {
  
  .navbar-toggle .icon-bar {
    height: 2.5px;
  }
  
  .btn,
  .btn-enhanced {
    border-width: 0.5px;
  }
  
}/* ===============================================
   DES.de Design-Inspiration
   Moderne Layout- und Design-Verbesserungen
   =============================================== */

/* Container mit Max-Width wie moderne Websites */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Verbesserte Abstände zwischen Sections */
.section {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 992px) {
  .section {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* Moderne Card-Struktur */
.card-modern {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-modern:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 179, 68, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Verbesserte Grid-Strukturen */
.grid-modern {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .grid-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (min-width: 992px) {
  .grid-modern {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Verbesserte Focus States für Accessibility */
*:focus-visible {
  outline: 2px solid #ffb344;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Modernere Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 179, 68, 0.5);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 179, 68, 0.7);
}

/* ===============================================
   LIQUID GLASS / GLASSMORPHISM DESIGN
   Moderne glasige Design-Effekte im DES.de Stil
   =============================================== */

/* Liquid Glass Basis-Effekt */
.liquid-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Verbesserte Navigation mit Glass-Effekt */
.navbar-desctop.affix {
  background: rgba(39, 39, 39, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* Service Cards mit subtilem Liquid Glass */
.service-item {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

/* Subtiler Shine-Effekt nur bei Hover */
.service-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.08), 
    transparent
  );
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.service-item:hover::before {
  left: 100%;
}

/* Glass-Effekt verbessert den bestehenden Hover, überschreibt nicht komplett */
.service-item:hover {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Sicherstellen dass Content über Shine ist */
.service-item > * {
  position: relative;
  z-index: 2;
}

/* Project Cards - nur Border-Radius verbessern, kein Glass auf Overlay */
/* Glass-Effekt nur auf den Projekt-Container selbst */
.project {
  border-radius: 12px;
}

/* Keine Glass-Effekte auf figure::before - bestehende Overlays beibehalten */
/* figcaption Overlay beibehalten ohne Glass */

/* Brand Panel mit subtilem Glass-Effekt */
.brand-panel {
  background: rgba(43, 43, 43, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* FAQ Items mit subtilem Glass */
.faq-item-enhanced {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.faq-item-enhanced:hover {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Contact Section mit Glass-Effekt */
.contact-enhanced {
  position: relative;
}

.contact-enhanced::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 30% 50%,
    rgba(255, 179, 68, 0.1) 0%,
    transparent 50%
  ),
  radial-gradient(
    circle at 70% 80%,
    rgba(255, 179, 68, 0.08) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
}

.contact-enhanced > * {
  position: relative;
  z-index: 1;
}

/* Blog Cards mit subtilem Glass */
.blog {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.blog:hover {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Client/Partner Cards mit subtilem Glass - nur wenn Grid-Style aktiv */
@media (max-width: 991px) {
  .clients-list .client {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .clients-list .client:hover {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

/* Mobile Navigation mit Glass */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(43, 43, 43, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .navbar-mobile.affix {
    background: rgba(39, 39, 39, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

/* Footer - kein Glass-Effekt, bestehende Styles beibehalten */

/* Section Header mit subtilem Glow */
.section-header {
  position: relative;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 179, 68, 0.5),
    transparent
  );
  filter: blur(3px);
  opacity: 0.8;
}

/* Floating Glass Elements Animation */
@keyframes float-glass {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
    opacity: 0.5;
  }
}

.glass-float {
  animation: float-glass 6s ease-in-out infinite;
}

/* Hero Section - keine Überschreibung, bestehende Gradient-Overlays beibehalten */
/* main-inner::before wird nicht überschrieben, um bestehende Styles zu erhalten */

/* Vertical Panel mit subtilem Glass */
.vertical-panel {
  background: rgba(43, 43, 43, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Slide Number - kein Glass, bleibt wie es ist */

/* Header Phone - kein Glass, bleibt wie es ist */

/* Project Details - keine Glass-Überschreibung, bestehende Styles beibehalten */

/* Contact Info Card - keine Glass-Überschreibung, bestehende Styles beibehalten */

/* Map Info - keine Glass-Überschreibung, bestehende Styles beibehalten */

/* Object Info - keine Glass-Überschreibung, bestehende Styles beibehalten */

/* Blog Tags - keine Glass-Effekte, bestehende Styles beibehalten */

/* Responsive Glass Adjustments */
@media (max-width: 768px) {
  .liquid-glass,
  .service-item,
  .faq-item-enhanced {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  /* Reduzierte Blur auf Mobile für Performance */
  .navbar-desctop.affix,
  .brand-panel,
  .vertical-panel {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  /* Mobile Glass-Effekte optimiert */
  .service-item,
  .faq-item-enhanced,
  .blog {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Neue Machina Font Definition */
/* Separates CSS-File um Konflikte zu vermeiden */

@font-face {
  font-family: 'neueMachina';
  src: url('../fonts/PP Neue Machina - Free for Personal Use/PPNeueMachina-PlainRegular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===============================================
   FUTURISTISCHES DESIGN - DES.de INSPIRATION
   Dunkler Hintergrund, Neon-Orange Akzente
   =============================================== */

/* Sehr dunkler Hintergrund wie DES.de mit subtilen vertikalen Linien */
body {
  background-color: #0a0a0a !important;
  background-image: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255, 179, 68, 0.015) 2px,
      rgba(255, 179, 68, 0.015) 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 179, 68, 0.01) 2px,
      rgba(255, 179, 68, 0.01) 4px
    ) !important;
  background-size: 200px 200px, 100px 100px !important;
  position: relative;
}

/* Subtile vertikale Gradient-Linien im Hintergrund (wie DES.de) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(
      90deg,
      rgba(255, 179, 68, 0.02) 0px,
      rgba(255, 179, 68, 0.02) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(
      180deg,
      rgba(5, 5, 5, 0.3) 0%,
      transparent 20%,
      transparent 80%,
      rgba(5, 5, 5, 0.3) 100%
    ) !important;
  background-size: 4px 100%, 100% 100% !important;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* Crosshair-Element im Hintergrund (wie DES.de) */
body::after {
  content: '';
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 179, 68, 0.2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

body::after::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: rgba(255, 179, 68, 0.3);
  transform: translate(-50%, -50%);
}

body::after::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 20px;
  background: rgba(255, 179, 68, 0.3);
  transform: translate(-50%, -50%);
}

/* Layout Container über Grid */
.layout,
.content,
.main {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Subtile Hintergrund-Textur für Main-Bereiche */
.main {
  background: 
    linear-gradient(180deg, rgba(5, 5, 5, 0.2) 0%, transparent 50%, rgba(5, 5, 5, 0.2) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 179, 68, 0.01) 0px,
      rgba(255, 179, 68, 0.01) 1px,
      transparent 1px,
      transparent 2px
    ) !important;
  background-size: 100% 100%, 3px 100% !important;
}

/* Neon-Orange Glow-Effekte für wichtige Elemente */
.text-primary {
  color: #ffb344 !important;
  text-shadow: 0 0 10px rgba(255, 179, 68, 0.5), 0 0 20px rgba(255, 179, 68, 0.3);
}

/* Logo mit Neon-Glow */
.brand-des,
.brand {
  text-shadow: 0 0 15px rgba(255, 179, 68, 0.6), 0 0 30px rgba(255, 179, 68, 0.4);
}

/* Buttons mit Neon-Orange Glow */
.btn,
.btn-enhanced,
.alle-projekte-label {
  background: rgba(255, 179, 68, 0.1) !important;
  border: 1px solid rgba(255, 179, 68, 0.4) !important;
  box-shadow: 
    0 0 10px rgba(255, 179, 68, 0.3),
    0 0 20px rgba(255, 179, 68, 0.2),
    inset 0 0 10px rgba(255, 179, 68, 0.1) !important;
  color: #ffb344 !important;
}

.btn:hover,
.btn-enhanced:hover,
.alle-projekte-label:hover {
  background: rgba(255, 179, 68, 0.2) !important;
  border-color: rgba(255, 179, 68, 0.7) !important;
  box-shadow: 
    0 0 20px rgba(255, 179, 68, 0.5),
    0 0 40px rgba(255, 179, 68, 0.3),
    inset 0 0 15px rgba(255, 179, 68, 0.2) !important;
  text-shadow: 0 0 15px rgba(255, 179, 68, 0.8) !important;
}

/* Scroll-to-Top Button (falls vorhanden) */
.scroll-to-top,
.scroll-up-button {
  background: #ffb344 !important;
  box-shadow: 0 0 20px rgba(255, 179, 68, 0.6) !important;
}

/* Jobs Button (wie im Footer von DES.de) */
.jobs-button,
[class*="jobs"],
[class*="bewerb"] {
  background: #ffb344 !important;
  color: #0a0a0a !important;
  box-shadow: 0 0 20px rgba(255, 179, 68, 0.6) !important;
}

/* Navigation Outline-Stil – Anlehnung an DES-Menü */
.nav-item a,
.nav-item-large a {
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(255, 179, 68, 0.45) !important;
  letter-spacing: 0.04em !important;
  text-shadow: none !important;
  filter: none !important;
  transition: color 0.35s ease, -webkit-text-stroke 0.35s ease, transform 0.35s ease !important;
}

.nav-item a:hover,
.nav-item-large a:hover {
  color: rgba(255, 179, 68, 0.95) !important;
  -webkit-text-stroke: 1px #ffb344 !important;
  text-shadow: 0 8px 25px rgba(255, 179, 68, 0.28) !important;
  transform: scale(1.04) !important;
}

.nav-item.active a,
.nav-item-large.active a {
  color: rgba(255, 179, 68, 0.95) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 8px 25px rgba(255, 179, 68, 0.28) !important;
}

.nav-submenu li a {
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(255, 179, 68, 0.35) !important;
  letter-spacing: 0.2em !important;
  text-shadow: none !important;
}

.nav-submenu li a:hover {
  color: rgba(255, 179, 68, 0.95) !important;
  -webkit-text-stroke: 1px #ffb344 !important;
}

/* Vertikale Texte links mit subtilerem Glow */
.nav-vertical-left .vertical-text,
.nav-vertical-left .vertical-text a {
  color: #ffb344 !important;
  text-shadow: 
    0 0 8px rgba(255, 179, 68, 0.4),
    0 0 15px rgba(255, 179, 68, 0.2) !important;
  transition: all 0.3s ease !important;
}

.nav-vertical-left .vertical-text a:hover {
  color: #ffb344 !important;
  text-shadow: 
    0 0 12px rgba(255, 179, 68, 0.6),
    0 0 25px rgba(255, 179, 68, 0.4) !important;
}

/* Sprache Selector mit Glow */
.nav-language-center {
  color: #ffb344 !important;
  text-shadow: 
    0 0 8px rgba(255, 179, 68, 0.4),
    0 0 15px rgba(255, 179, 68, 0.2) !important;
}

.nav-language-center .lang-active {
  color: #ffb344 !important;
  text-shadow: 
    0 0 10px rgba(255, 179, 68, 0.5),
    0 0 20px rgba(255, 179, 68, 0.3) !important;
}

/* Social Media Icons mit Glow */
.nav-social-bottom-right .social-icon {
  color: #ffb344 !important;
  text-shadow: 
    0 0 8px rgba(255, 179, 68, 0.4),
    0 0 15px rgba(255, 179, 68, 0.2) !important;
  transition: all 0.3s ease !important;
}

.nav-social-bottom-right .social-icon:hover {
  color: #ffb344 !important;
  text-shadow: 
    0 0 12px rgba(255, 179, 68, 0.6),
    0 0 25px rgba(255, 179, 68, 0.4) !important;
  transform: scale(1.1) !important;
}

/* Hamburger Menu mit Neon-Orange */
.hamburger-line {
  background-color: #ffb344 !important;
  box-shadow: 0 0 8px rgba(255, 179, 68, 0.5) !important;
}

.hamburger-menu-toggle:hover .hamburger-line {
  box-shadow: 0 0 12px rgba(255, 179, 68, 0.8) !important;
}

/* Section Headers mit subtilen Neon-Akzenten */
.section-title {
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffb344, transparent);
  box-shadow: 0 0 10px rgba(255, 179, 68, 0.5);
}

/* Cards mit subtilen Neon-Borders */
.service-item,
.card-modern {
  background: rgba(20, 20, 20, 0.8) !important;
  border: 1px solid rgba(255, 179, 68, 0.1) !important;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(255, 179, 68, 0.02) !important;
}

.service-item:hover,
.card-modern:hover {
  border-color: rgba(255, 179, 68, 0.4) !important;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 179, 68, 0.2),
    inset 0 0 30px rgba(255, 179, 68, 0.05) !important;
}

/* Footer mit Neon-Akzenten */
.footer {
  background: rgba(10, 10, 10, 0.95) !important;
  border-top: 1px solid rgba(255, 179, 68, 0.2) !important;
}

.footer-link:hover {
  color: #ffb344 !important;
  text-shadow: 0 0 10px rgba(255, 179, 68, 0.5) !important;
}

/* Form Inputs mit Neon-Borders - einheitlicher dunkler Hintergrund wie Rest der Seite */
.form-control-enhanced,
.form-control,
input.form-control-enhanced,
textarea.form-control-enhanced {
  background: rgba(20, 20, 20, 0.9) !important;
  border: 1px solid rgba(255, 179, 68, 0.2) !important;
  color: #fff !important;
}

.form-control-enhanced:focus,
.form-control:focus,
input.form-control-enhanced:focus,
textarea.form-control-enhanced:focus {
  background: rgba(20, 20, 20, 0.95) !important;
  border-color: rgba(255, 179, 68, 0.6) !important;
  box-shadow: 
    0 0 10px rgba(255, 179, 68, 0.3),
    inset 0 0 10px rgba(255, 179, 68, 0.1) !important;
  outline: none !important;
}

/* Scroll Indicator mit Neon */
.scroll-down-indicator {
  background: rgba(255, 179, 68, 0.1) !important;
  border: 1px solid rgba(255, 179, 68, 0.4) !important;
  box-shadow: 0 0 15px rgba(255, 179, 68, 0.4) !important;
}

.scroll-down-indicator:hover {
  background: rgba(255, 179, 68, 0.2) !important;
  box-shadow: 0 0 25px rgba(255, 179, 68, 0.6) !important;
}

/* Projekt Cards mit Neon-Effekten */
.project {
  border: 1px solid rgba(255, 179, 68, 0.1) !important;
}

.project:hover {
  border-color: rgba(255, 179, 68, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 179, 68, 0.2) !important;
}

/* Partner/Client Logos mit subtilen Neon-Borders */
.clients-list .client {
  border: 1px solid rgba(255, 179, 68, 0.1) !important;
  background: rgba(20, 20, 20, 0.8) !important;
  padding: 2em 1.95em !important;
}

.clients-list .client:hover {
  border-color: rgba(255, 179, 68, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 179, 68, 0.2) !important;
}

/* Header mit dunklerem Hintergrund */
.header-home,
.header-inner {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Header Overlay über Iframe - nur wenn innerhalb von main */
.main .hero-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  pointer-events: none !important;
  background: transparent !important;
}

.main .hero-header > * {
  pointer-events: auto !important;
}

/* Header außerhalb von main - nur in Hero-Section sichtbar */
.header-home {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 100 !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* Auf Mobile: height entfernen, damit es nicht die Scrollleiste beeinflusst */
@media (max-width: 991px) {
  .header-home {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

.header-home > * {
  pointer-events: auto !important;
}

/* Hamburger-Icon, Nummer und Drohne immer sichtbar (fixed) */
.header-home .hamburger-menu-toggle {
  position: fixed !important;
  top: 40px !important;
  right: 40px !important;
  z-index: 10000 !important;
}

.header-home .brand-panel .slide-number {
  position: fixed !important;
  top: calc(40.7vmin + 20px) !important;
  left: 0 !important;
  z-index: 10000 !important;
  margin-top: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  width: 39.47vmin !important;
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.header-home .header-drone-container {
  position: fixed !important;
  z-index: 9999 !important;
}

/* Brand Panel und Vertical Panel nur in Hero-Section sichtbar, nicht beim Scrollen */
/* Brand Panel bleibt oben links */
.header-home .brand-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* Vertical Panel bleibt links */
.header-home .vertical-panel {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
}

/* Vertical Panel Content bleibt links */
.header-home .vertical-panel-content {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
}

/* Brand Panel und Vertical Panel nur in ersten 100vh sichtbar - beim Scrollen ausblenden */
@media (min-width: 992px) {
  .header-home {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }
  
  /* Brand Panel und Vertical Panel nur innerhalb der ersten 100vh sichtbar */
  .header-home .brand-panel,
  .header-home .vertical-panel,
  .header-home .vertical-panel-content {
    position: absolute !important;
    left: 0 !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }
  
  /* Nummer aus brand-panel herausnehmen und fixed positionieren */
  .header-home .brand-panel .slide-number {
    position: fixed !important;
    top: calc(40.7vmin + 20px) !important;
    left: 0 !important;
    z-index: 10000 !important;
    margin-top: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: 39.47vmin !important;
    text-align: center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Brand Panel und Vertical Panel auf Mobile ausblenden */
@media (max-width: 991px) {
  .header-home .brand-panel,
  .header-home .vertical-panel,
  .header-home .vertical-panel-content,
  .header-home .header-phone {
    display: none !important;
  }
  
  /* Hamburger-Icon im header-home auf Mobile ausblenden */
  .header-home .hamburger-menu-toggle {
    display: none !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
  }
  
  /* Nur das Hamburger-Icon in navbar-mobile anzeigen */
  .navbar-mobile .hamburger-menu-toggle {
    display: flex !important;
  }
  
  /* Mobile Header im modernen Design */
  .navbar-mobile {
    background: 
      /* Subtiler radialer Gradient */
      radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 179, 68, 0.06) 0%,
        rgba(255, 179, 68, 0.03) 20%,
        transparent 50%
      ),
      /* Dunkler Basis-Hintergrund */
      rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 179, 68, 0.2) !important;
    box-shadow: 
      0 2px 20px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(255, 179, 68, 0.1) inset !important;
  }
  
  /* Logo im Mobile Header mit Glow */
  .navbar-mobile .brand img {
    filter: drop-shadow(0 0 8px rgba(255, 179, 68, 0.4)) !important;
    transition: all 0.3s ease !important;
  }
  
  .navbar-mobile .brand:hover img {
    filter: drop-shadow(0 0 12px rgba(255, 179, 68, 0.6)) !important;
    transform: scale(1.05) !important;
  }
  
  
  /* Mobile Menu (navbar-collapse) im modernen Design */
  .navbar-collapse {
    background: 
      /* Subtiler radialer Gradient */
      radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 179, 68, 0.08) 0%,
        rgba(255, 179, 68, 0.04) 20%,
        transparent 50%
      ),
      /* Dunkler Basis-Hintergrund */
      rgba(10, 10, 10, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 179, 68, 0.2) !important;
    box-shadow: 
      0 5px 30px rgba(0, 0, 0, 0.6),
      0 0 40px rgba(255, 179, 68, 0.1) inset !important;
  }
  
  /* Mobile Menu Items im modernen Design */
  .navbar-nav-mobile li {
    border-top: 1px solid rgba(255, 179, 68, 0.1) !important;
  }
  
  .navbar-nav-mobile li a {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
  }
  
  .navbar-nav-mobile li a:hover,
  .navbar-nav-mobile .active > a {
    background: rgba(255, 179, 68, 0.1) !important;
    color: #ffb344 !important;
    text-shadow: 0 0 5px rgba(255, 179, 68, 0.3) !important;
    padding-left: 2rem !important;
  }
  
  .navbar-nav-mobile > .current > a {
    color: #ffb344 !important;
    text-shadow: 0 0 5px rgba(255, 179, 68, 0.3) !important;
  }
  
  /* Mobile Header beim Scrollen (affix) im modernen Design */
  .navbar-mobile.affix,
  .navbar-mobile.animated.slideInDown.affix {
    background: 
      /* Subtiler radialer Gradient */
      radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 179, 68, 0.08) 0%,
        rgba(255, 179, 68, 0.04) 20%,
        transparent 50%
      ),
      /* Dunkler Basis-Hintergrund */
      rgba(10, 10, 10, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 179, 68, 0.3) !important;
    box-shadow: 
      0 4px 30px rgba(0, 0, 0, 0.6),
      0 0 40px rgba(255, 179, 68, 0.15) inset !important;
    background-color: transparent !important;
  }
  
  .navbar-mobile.affix .brand img,
  .navbar-mobile.animated.slideInDown.affix .brand img {
    filter: drop-shadow(0 0 10px rgba(255, 179, 68, 0.5)) !important;
  }
  
  .navbar-mobile.affix .brand:hover img,
  .navbar-mobile.animated.slideInDown.affix .brand:hover img {
    filter: drop-shadow(0 0 15px rgba(255, 179, 68, 0.7)) !important;
    transform: scale(1.05) !important;
  }
}



/* Brand Panel - Individuelles Design */
.header-home .brand-panel,
.hero-header .brand-panel {
  background: rgba(10, 10, 10, 0.85) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 179, 68, 0.2);
  border-radius: 0 0 20px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 
              0 0 30px rgba(255, 179, 68, 0.1) inset,
              0 0 20px rgba(255, 179, 68, 0.05);
  padding: 3vmin 2em 4vmin !important;
  transition: all 0.3s ease;
}

.header-home .brand-panel:hover,
.hero-header .brand-panel:hover {
  border-color: rgba(255, 179, 68, 0.4);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6), 
              0 0 40px rgba(255, 179, 68, 0.15) inset,
              0 0 30px rgba(255, 179, 68, 0.1);
}

.header-home .brand-panel .brand img,
.hero-header .brand-panel .brand img {
  filter: drop-shadow(0 0 10px rgba(255, 179, 68, 0.5));
  transition: all 0.3s ease;
}

.header-home .brand-panel .brand:hover img,
.hero-header .brand-panel .brand:hover img {
  filter: drop-shadow(0 0 15px rgba(255, 179, 68, 0.8));
  transform: scale(1.05);
}

.header-home .brand-panel .slide-number,
.hero-header .brand-panel .slide-number {
  margin-top: 2vmin;
}

/* Slide-number sichtbar machen wenn fixed */
.header-home .brand-panel .slide-number {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.header-home .brand-panel .slide-number .current-number,
.hero-header .brand-panel .slide-number .current-number {
  color: #ffb344 !important;
  text-shadow: 0 0 10px rgba(255, 179, 68, 0.6);
}

/* Header Phone mit Neon-Orange Glow */
.header-home .header-phone,
.hero-header .header-phone {
  color: #ffb344 !important;
  text-shadow: 0 0 10px rgba(255, 179, 68, 0.5), 0 0 20px rgba(255, 179, 68, 0.3) !important;
}

/* Vertical Panel - Individuelles Design */
.header-home .vertical-panel,
.hero-header .vertical-panel {
  background: linear-gradient(180deg, 
    rgba(10, 10, 10, 0.9) 0%, 
    rgba(10, 10, 10, 0.7) 50%,
    rgba(10, 10, 10, 0.9) 100%) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-right: 1px solid rgba(255, 179, 68, 0.2);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3),
              inset -1px 0 10px rgba(255, 179, 68, 0.05);
}

.header-home .vertical-panel-content,
.hero-header .vertical-panel-content {
  padding: 2vmin 0;
}

.header-home .vertical-panel-content .vertical-panel-info,
.hero-header .vertical-panel-content .vertical-panel-info {
  padding: 1.5vmin 0;
  border-bottom: 1px solid rgba(255, 179, 68, 0.1);
  margin-bottom: 2vmin;
}

.header-home .vertical-panel-content .vertical-panel-info .line,
.hero-header .vertical-panel-content .vertical-panel-info .line {
  background-color: rgba(255, 179, 68, 0.3) !important;
  box-shadow: 0 0 5px rgba(255, 179, 68, 0.3);
}

/* Brand Name mit Neon-Orange */
.header-home .brand-name,
.hero-header .brand-name {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255, 179, 68, 0.4) !important;
}

/* Social List Icons mit Neon-Orange */
.header-home .social-list a,
.hero-header .social-list a {
  color: #ffb344 !important;
  text-shadow: 0 0 10px rgba(255, 179, 68, 0.5) !important;
}

.header-home .social-list a:hover,
.hero-header .social-list a:hover {
  color: #fff !important;
  text-shadow: 0 0 15px rgba(255, 179, 68, 0.8) !important;
}

/* Vertical Panel Title */
.header-home .vertical-panel-title,
.hero-header .vertical-panel-title {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255, 179, 68, 0.4) !important;
}

/* Navigation Overlay mit dunklerem Hintergrund - standardmäßig VERSTECKT */
.navbar-desctop-des {
  background: 
    /* Subtiler radialer Gradient von Mitte-rechts (wie DES.de) */
    radial-gradient(
      ellipse at 70% 50%,
      rgba(255, 179, 68, 0.08) 0%,
      rgba(255, 179, 68, 0.04) 20%,
      rgba(255, 179, 68, 0.02) 40%,
      transparent 70%
    ),
    /* Dunkler Basis-Hintergrund */
    linear-gradient(180deg, rgba(5, 5, 5, 0.98) 0%, rgba(10, 10, 10, 0.98) 50%, rgba(5, 5, 5, 0.98) 100%),
    /* Subtile vertikale Linien */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 1px,
      rgba(255, 179, 68, 0.02) 1px,
      rgba(255, 179, 68, 0.02) 2px
    ) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: flex !important; /* Display bleibt flex, aber unsichtbar */
  pointer-events: none !important;
  box-shadow: 
    inset 0 0 100px rgba(255, 179, 68, 0.05),
    0 0 200px rgba(0, 0, 0, 0.8) !important;
}

.navbar-desctop-des.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Drone im Header - HORIZONTAL ZENTRIERT, oben im Container */
.header-drone-container {
  position: fixed !important;
  left: 50% !important;
  top: 55px !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  right: auto !important;
  pointer-events: auto !important;
}

/* Sicherstellen, dass Drohne IMMER sichtbar ist, auch wenn sie innerhalb der hero-header ist */
.header-home .header-drone-container,
.hero-header .header-drone-container {
  pointer-events: auto !important;
  z-index: 9999 !important;
  position: fixed !important;
}

.header-drone-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-decoration: none;
}

.header-drone-fly-label {
  font-family: 'neueMachina', 'Neue Machina', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(255, 179, 68, 0.7) !important;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(255, 179, 68, 0.3);
  padding: 8px 16px;
  border: 1px solid rgba(255, 179, 68, 0.2);
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;
}

.header-sketchfab-embed-wrapper {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden !important;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(255, 179, 68, 0.4));
  transition: all 0.3s ease;
}

.header-drone-button:hover .header-sketchfab-embed-wrapper {
  filter: drop-shadow(0 0 30px rgba(255, 179, 68, 0.7));
  transform: scale(1.1);
}

.header-sketchfab-embed-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
  background: transparent;
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.header-sketchfab-embed-wrapper iframe::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.header-drone-button:hover .header-drone-fly-label {
  color: rgba(255, 179, 68, 0.9) !important;
  text-shadow: 0 0 8px rgba(255, 179, 68, 0.5);
  border-color: rgba(255, 179, 68, 0.4);
  background: rgba(10, 10, 10, 0.8);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3),
              0 0 10px rgba(255, 179, 68, 0.1);
}

@media (max-width: 991px) {
  .header-drone-container {
    display: none;
  }
  
  /* Brand Panel auf Mobile anpassen */
  .hero-header .brand-panel {
    width: 100% !important;
    border-radius: 0 !important;
    padding: 2rem 1rem !important;
  }
  
  /* Vertical Panel auf Mobile anpassen */
  .hero-header .vertical-panel-content {
    display: none !important;
  }
  
  /* Hamburger-Icon im header-home auf Mobile ausblenden */
  .header-home .hamburger-menu-toggle {
    display: none !important;
  }
  
  /* Nur das Hamburger-Icon in navbar-mobile anzeigen */
  .navbar-mobile .hamburger-menu-toggle {
    display: flex !important;
  }
}

/* Subtile vertikale Linien wie auf DES.de */
.page-lines .line {
  background-color: rgba(255, 179, 68, 0.05) !important;
}

/* Text mit besserer Lesbarkeit auf dunklem Hintergrund */
p,
.entry-text {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Überschriften mit subtilen Neon-Akzenten */
h1, h2, h3, h4, h5, h6 {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Links mit Neon-Orange */
a {
  color: #ffb344 !important;
  text-shadow: 0 0 5px rgba(255, 179, 68, 0.3);
  transition: all 0.3s ease;
}

a:hover {
  color: #ffb344 !important;
  text-shadow: 0 0 10px rgba(255, 179, 68, 0.6), 0 0 20px rgba(255, 179, 68, 0.4);
}

/* Mobile Optimierungen */
@media (max-width: 991px) {
  body::after {
    display: none;
  }
  
  .section-title::after {
    width: 40px;
  }
  
  
  /* Experience Section auf Mobile - Die "6" in Orange */
  .text-parallax-content {
    color: #ffb344 !important;
    text-shadow: 
      0 0 15px rgba(255, 179, 68, 0.6),
      0 0 30px rgba(255, 179, 68, 0.4),
      0 0 45px rgba(255, 179, 68, 0.2) !important;
    mix-blend-mode: normal !important;
    -ms-mix-blend-mode: normal !important;
    opacity: 0.4 !important;
    background: transparent !important;
  }
  
  @media (max-width: 480px) {
    .text-parallax-content {
      color: #ffb344 !important;
      opacity: 0.5 !important;
    }
  }
  
  @media (min-width: 481px) and (max-width: 768px) {
    .text-parallax-content {
      color: #ffb344 !important;
      opacity: 0.45 !important;
    }
  }
}

/* Zusätzliche futuristische Effekte */
@keyframes neonPulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 179, 68, 0.5), 0 0 20px rgba(255, 179, 68, 0.3);
  }
  50% {
    opacity: 0.8;
    text-shadow: 0 0 15px rgba(255, 179, 68, 0.7), 0 0 30px rgba(255, 179, 68, 0.5);
  }
}

.text-primary {
  animation: neonPulse 3s ease-in-out infinite;
}

/* Subtile Animation für Grid-Linien */
@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

body::before {
  animation: gridMove 20s linear infinite;
}

/* FAQ Section mit Neon-Orange */
.faq-item-enhanced {
  background: rgba(20, 20, 20, 0.8) !important;
  border: 1px solid rgba(255, 179, 68, 0.1) !important;
  border-radius: 12px !important;
  margin-bottom: 1rem !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(255, 179, 68, 0.02) !important;
}

.faq-item-enhanced:hover {
  border-color: rgba(255, 179, 68, 0.3) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 179, 68, 0.15), inset 0 0 20px rgba(255, 179, 68, 0.03) !important;
}

.faq-question-enhanced {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
}

.faq-question-enhanced::after {
  color: #ffb344 !important;
  text-shadow: 0 0 8px rgba(255, 179, 68, 0.5) !important;
}

.faq-question-enhanced:hover {
  color: #ffb344 !important;
  text-shadow: 0 0 10px rgba(255, 179, 68, 0.4) !important;
}

.faq-answer-enhanced {
  color: rgba(255, 255, 255, 0.85) !important;
}

.faq-answer-enhanced p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Kontaktformular-Hintergrund mit Neon-Orange - einheitlicher dunkler Hintergrund */
.contact-form-enhanced {
  background: rgba(20, 20, 20, 0.95) !important;
  border: 1px solid rgba(255, 179, 68, 0.2) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 179, 68, 0.1),
    inset 0 0 30px rgba(255, 179, 68, 0.03) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Kontaktformular-Layout ordentlicher gestalten */
.contact-form-enhanced .row-field {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.contact-form-enhanced .col-field {
  padding: 0 10px;
  margin-bottom: 1.5rem;
}

.contact-form-enhanced .form-group-enhanced {
  margin-bottom: 0;
}

.contact-form-enhanced .form-control-enhanced {
  width: 100%;
  box-sizing: border-box;
}

.contact-form-enhanced .form-submit {
  margin-top: 1.5rem;
}

.contact-form-enhanced:hover {
  border-color: rgba(255, 179, 68, 0.4) !important;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 179, 68, 0.2),
    inset 0 0 40px rgba(255, 179, 68, 0.05) !important;
}

/* Experience Section - Die "6" mit Neon-Orange */
.text-parallax-content {
  color: #ffb344 !important;
  text-shadow: 
    0 0 20px rgba(255, 179, 68, 0.6),
    0 0 40px rgba(255, 179, 68, 0.4),
    0 0 60px rgba(255, 179, 68, 0.2) !important;
  mix-blend-mode: normal !important;
  opacity: 0.4 !important;
}

.experience-info {
  color: #fff !important;
}

.experience-info .text-primary {
  color: #ffb344 !important;
  text-shadow: 
    0 0 15px rgba(255, 179, 68, 0.6),
    0 0 30px rgba(255, 179, 68, 0.4) !important;
}

/* Navigation sicherstellen - Menü bleibt sichtbar */
/* Entfernt - Menü soll standardmäßig versteckt sein */

/* Hamburger Menu Button bleibt sichtbar und immer klickbar */
.hamburger-menu-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 10000 !important;
  position: fixed !important;
  top: 40px !important;
  right: 40px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Hero Content Styles */
.main-hero-header,
.main-projekte-header {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 0;
}

/* Auf Mobile: height: 100vh entfernen, damit man scrollen kann */
@media (max-width: 991px) {
  .main-hero-header,
  .main-projekte-header {
    min-height: 100vh;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }
}

.hero-title,
.projekte-hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 20px rgba(255, 179, 68, 0.3);
  line-height: 1.2;
}

.hero-title .text-primary,
.projekte-hero-title .text-primary {
  color: #ffb344 !important;
  text-shadow: 
    0 0 20px rgba(255, 179, 68, 0.6),
    0 0 40px rgba(255, 179, 68, 0.4);
}

.hero-subtitle,
.projekte-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.8) !important;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 991px) {
  .main-hero-header,
  .main-projekte-header {
    min-height: 100vh;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 0 1rem;
    overflow: hidden !important;
  }
  
  .hero-title,
  .projekte-hero-title {
    font-size: clamp(2rem, 6vw, 3rem);
    margin-bottom: 1rem;
  }
  
  .hero-subtitle,
  .projekte-hero-subtitle {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    padding: 0;
  }
  
}

/* ============================================
   Performance-Optimierungen & Slide-in-Animationen
   ============================================ */

/* Performance-Optimierungen */
* {
  /* GPU-Beschleunigung für bessere Performance */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lazy Loading für Bilder - wird durch HTML-Attribut unterstützt */
/* Vorsichtig: content-visibility nur für Bilder außerhalb Viewport */
img[loading="lazy"] {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

/* Will-change für animierte Elemente - nur wenn nötig */
.animate-on-scroll,
.slide-in-left,
.slide-in-right,
.slide-in-up,
.fade-in {
  will-change: transform, opacity;
}

/* Nach Animation: will-change entfernen für bessere Performance */
.animate-on-scroll.animated,
.slide-in-left.animated,
.slide-in-right.animated,
.slide-in-up.animated,
.fade-in.animated {
  will-change: auto;
}

/* ============================================
   Slide-in Animationen von links
   ============================================ */

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Basis-Klassen für Slide-in-Animationen */
.slide-in-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animierte Zustände */
.slide-in-left.animated,
.slide-in-right.animated,
.slide-in-up.animated {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.fade-in.animated {
  opacity: 1;
}

/* Verzögerungen für gestaffelte Animationen */
.slide-in-left.delay-1 { transition-delay: 0.1s; }
.slide-in-left.delay-2 { transition-delay: 0.2s; }
.slide-in-left.delay-3 { transition-delay: 0.3s; }
.slide-in-left.delay-4 { transition-delay: 0.4s; }
.slide-in-left.delay-5 { transition-delay: 0.5s; }

.slide-in-right.delay-1 { transition-delay: 0.1s; }
.slide-in-right.delay-2 { transition-delay: 0.2s; }
.slide-in-right.delay-3 { transition-delay: 0.3s; }
.slide-in-right.delay-4 { transition-delay: 0.4s; }
.slide-in-right.delay-5 { transition-delay: 0.5s; }

.slide-in-up.delay-1 { transition-delay: 0.1s; }
.slide-in-up.delay-2 { transition-delay: 0.2s; }
.slide-in-up.delay-3 { transition-delay: 0.3s; }
.slide-in-up.delay-4 { transition-delay: 0.4s; }
.slide-in-up.delay-5 { transition-delay: 0.5s; }

.fade-in.delay-1 { transition-delay: 0.1s; }
.fade-in.delay-2 { transition-delay: 0.2s; }
.fade-in.delay-3 { transition-delay: 0.3s; }
.fade-in.delay-4 { transition-delay: 0.4s; }
.fade-in.delay-5 { transition-delay: 0.5s; }

/* ============================================
   Spezifische Animationen für verschiedene Elemente
   ============================================ */

/* Service-Items */
.service-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
}

/* Projekt-Cards */
.project {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* FAQ-Items */
.faq-item-enhanced {
  transition: transform 0.3s ease;
}

.faq-item-enhanced:hover {
  transform: translateX(5px);
}

/* Buttons */
.btn,
.btn-enhanced,
.alle-projekte-button {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover,
.btn-enhanced:hover,
.alle-projekte-button:hover {
  transform: translateY(-2px);
}

/* Partner/Client Logos */
.client {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.client:hover {
  transform: scale(1.05);
}

/* ============================================
   Mobile Performance-Optimierungen
   ============================================ */

@media (max-width: 991px) {
  /* DEAKTIVIERE ALLE ANIMATIONEN AUF MOBILE - KEINE NERVIGEN EFFEKTE */
  .slide-in-left,
  .slide-in-right,
  .slide-in-up,
  .slide-in-left.animated,
  .slide-in-right.animated,
  .slide-in-up.animated,
  .fade-in,
  .fade-in.animated,
  .animate-on-scroll,
  .animate-on-scroll.animated,
  .service-item.slide-in-left,
  .service-item.slide-in-right,
  .service-item.slide-in-up,
  .service-item.fade-in,
  .scroll-animate,
  .scroll-animate.animate,
  /* WOW.js Animationen deaktivieren */
  .wow,
  .wow.animated,
  .fadeInUp,
  .fadeInUp.animated,
  .fadeInDown,
  .fadeInLeft,
  .fadeInRight,
  .slideInUp,
  .slideInDown,
  .slideInLeft,
  .slideInRight,
  .swing,
  .bounceIn,
  .zoomIn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    visibility: visible !important;
  }
  
  /* Spezifisch für services-section: Keine Animationen auf Mobile */
  .services-section .col-service,
  .services-section .col-service.wow,
  .services-section .col-service.fadeInUp,
  .services-section .col-service.slide-in-left,
  .services-section .col-service.slide-in-right,
  .services-section .col-service.slide-in-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    visibility: visible !important;
  }
  
  /* Reduziere will-change auf Mobile */
  .animate-on-scroll,
  .slide-in-left,
  .slide-in-right,
  .slide-in-up,
  .fade-in {
    will-change: auto;
  }
  
  /* Einfachere Animationen für Touch-Geräte */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Reduziere komplexe Transforms auf Mobile */
  .service-item:hover,
  .project:hover {
    transform: none;
  }
}

/* ============================================
   Reduced Motion Support (Accessibility)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .slide-in-left,
  .slide-in-right,
  .slide-in-up,
  .fade-in {
    transition: none;
    opacity: 1;
    transform: none;
  }
  
  .slide-in-left.animated,
  .slide-in-right.animated,
  .slide-in-up.animated,
  .fade-in.animated {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   Performance: Containment für bessere Rendering-Performance
   ============================================ */

.section {
  contain: layout style paint;
}

.service-item,
.project,
.faq-item-enhanced {
  contain: layout style;
}

/* ============================================
   Optimierte Scroll-Performance
   ============================================ */

html {
  scroll-behavior: smooth;
  /* GPU-Beschleunigung für flüssigeres Scrollen */
  -webkit-overflow-scrolling: touch;
  /* Optimierung für iOS */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body {
  /* GPU-Beschleunigung */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Verhindere Layout-Shifts während des Scrollens */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Smooth scrolling */
  -webkit-overflow-scrolling: touch;
}

/* Hauptcontainer für bessere Scroll-Performance */
/* Reduziert: GPU-Beschleunigung nur wo wirklich nötig */
.section {
  /* GPU-Beschleunigung nur für Sections */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Verhindere Repaints */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   Lazy Loading Optimierungen
   ============================================ */

iframe[loading="lazy"] {
  content-visibility: auto;
}

img[loading="lazy"] {
  content-visibility: auto;
  background: none;
}

/* ============================================
   Container für gestaffelte Animationen
   ============================================ */

.animate-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.animate-stagger > *:nth-child(2) { transition-delay: 0.2s; }
.animate-stagger > *:nth-child(3) { transition-delay: 0.3s; }
.animate-stagger > *:nth-child(4) { transition-delay: 0.4s; }
.animate-stagger > *:nth-child(5) { transition-delay: 0.5s; }
.animate-stagger > *:nth-child(6) { transition-delay: 0.6s; }
.animate-stagger > *:nth-child(7) { transition-delay: 0.7s; }
.animate-stagger > *:nth-child(8) { transition-delay: 0.8s; }
.animate-stagger > *:nth-child(9) { transition-delay: 0.9s; }
.animate-stagger > *:nth-child(10) { transition-delay: 1.0s; }