:root {
      --primary: #181818;
      --secondary: #eee;
      --accent: #fff;
      --navbar-height: 74px;
      --logo-size-w: 120px;
      --logo-size-h: 60px;
      --footer-bg: #161616;
      --footer-border: #222;
      --card-gap: 2vw;
      --card-maxwidth: 370px;
      --card-img-height: 190px;
      --btn-main: #fff;
      --btn-main-hover: #232323;
      --btn-txt: #111;
    }
    * { box-sizing: border-box; margin:0; padding:0; }
    html, body {
      overflow-x: hidden; 
      font-family: "Montserrat", Arial, sans-serif;
      background: var(--primary);
      color: var(--secondary);
      min-height: 100vh;
      scroll-behavior: smooth;
    }
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: var(--navbar-height);
      background: rgba(10, 10, 10, 0.97);
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 998;
      box-shadow: 0 2px 8px rgba(0,0,0,0.11);
      padding: 0 4vw;
    }
    .nav-logo-wrap {
      display: flex; align-items: center;
    }
    .nav-logo {
      height: var(--logo-size-h);
      width: var(--logo-size-w);
      object-fit: contain;
      border-radius: 6px;
    }
    .navbar-links {
      display: flex; align-items: center;
    }
    .navbar-links ul {
      list-style: none;
      display: flex;
      gap: 2.2rem;
      align-items: center;
      margin: 0;
    }
    nav a {
      color: var(--secondary);
      text-decoration: none;
      padding: 0 2px;
      font-weight: 500;
      letter-spacing: 1px;
      transition: color .2s;
      font-size: 1.01rem;
      cursor: pointer;
    }
    nav a:hover {
      color: rgb(90, 90, 90);
    }
   
    .hamburger { display: none; flex-direction: column; justify-content: center; cursor: pointer; width: 36px; height: 36px; z-index: 1001; margin-right: 2vw; }
    .hamburger span { height: 4px; width: 31px; background: #fff; margin: 5px 0; border-radius: 3px; display: block; transition: all 0.32s; }
    @media (max-width: 750px) {
      .navbar-links ul {
        position: fixed;
        top: 0; right: -100vw;
        width: 100vw; height: 100vh;
        background: #191919;
        flex-direction: column; gap: 3rem;
        align-items: center;
        justify-content: center;
        padding: var(--navbar-height) 0 0 0;
        box-shadow: 0 2px 23px #000;
        transition: right 0.33s ease;
        z-index: 1000;
        font-size: 1.8rem;
      }
      .navbar-links ul.active { right: 0; }
      .hamburger { display: flex; }
      .navbar-links ul li a { padding: 0 12px; }
    }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 7px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }
    @media (max-width: 750px) {
      nav { padding: 0 2vw; }
      .nav-logo { height: 65px; width: 95px; }
    }
    .hero { position: relative; width: 100vw; height: 100vh; min-height: 400px; overflow: hidden; background: #111; z-index: 1; display: flex; align-items: center; justify-content: center; }
    .slider-container { width: 100vw; height: 100vh; position: relative; z-index: 1; }
    .slider-img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center 70%; /* 0% = ganz oben, 100% = ganz unten */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 1;
    transition: opacity 1.1s cubic-bezier(.63,0,.21,1),
                transform 1.1s cubic-bezier(.63,0,.21,1);
    will-change: opacity, transform;
    transform: scale(1);
}

    .slider-img.fadeout { opacity: 0; transform: scale(1.07); }
    .slider-img.fadein { opacity: 1; transform: scale(1); }
    .slider-overlay {
      position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;
      background: linear-gradient(rgba(4,4,4,0.86), rgba(4,4,4,0.57));
      z-index: 2; pointer-events: none;
    }
    .hero-content {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3; text-align: center;
      width: 92vw; max-width: 545px;
      padding: 38px 36px 20px 36px;
      border-radius: 18px;
      color: var(--accent);
      display: flex; flex-direction: column; align-items: center;
    }
    .hero-content h1 { font-size: 2.7rem; font-weight: 800; margin-bottom: 22px; color: var(--accent); letter-spacing: 2px; line-height:1.2; }
    .hero-content p { font-size: 1.19rem; margin-bottom: 28px; color: var(--secondary); line-height:1.5; }
    .cta-btn-row { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 2vw; flex-wrap: wrap; }
    .cta-btn {
      background: var(--btn-main); color: var(--btn-txt);
      border: none; padding: 1em 2em; font-weight: bold; border-radius: 32px;
      font-size: 1.09rem; cursor: pointer;
      transition: background .18s, color .3s;
      box-shadow: 0 2px 18px rgba(22,22,22,0.12); text-decoration: none;
      margin-bottom: 0; min-width: 140px; text-align: center;
    }
    .cta-btn:hover { background: var(--btn-main-hover); color: #fff; }
    @media (max-width: 700px) {
      .hero-content { display: none; }
    }
    @media (max-width: 450px) {
      .hero-content { display: none;}
    }
    main { padding-top: var(--navbar-height);}
    section.leistungen-section { background: #181818; padding: 8vw 1vw 7vw 1vw; display: flex; flex-direction: column; align-items: center; min-height: 330px;}
    .leistungen-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--card-gap); width: 100%; margin-top: 35px; margin-bottom: 18px; }
    .card {
      background: #222; color: #fff; border-radius: 18px; overflow: hidden;
      max-width: var(--card-maxwidth); min-width: 210px; width: 92vw; box-shadow: 0 6px 42px rgba(0,0,0,0.19);
      display: flex; flex-direction: column; align-items: center; border: 1.5px solid #282828; margin: 12px 16px;
    }
    .card-img {
      width: 100%;
      object-fit: cover;
      height: var(--card-img-height);
      min-height: 165px;
      transition: height 0.3s;
    }
    .card-title { font-size: 1.19rem; font-weight: bold; margin: 14px 0 7px 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .card-btn { margin: 16px 0 17px 0; background: #fff; color: #222; border: none; padding: 0.8em 2em; border-radius: 28px; font-size: 1rem; cursor: pointer; box-shadow:0 2px 12px rgba(22,22,22,0.09); font-weight: 600; text-decoration: none;}
    .card-btn:hover { background: #222; color: #fff; }
    @media (max-width: 900px) {
      .card-img { height: 165px; min-height: 150px; }
    }
    @media (max-width: 700px) {
      .leistungen-grid { gap: 8vw; }
      .card { max-width: 99vw; min-width: 89vw; margin: 10px 3vw;}
      .card-img { height: 179px; min-height: 140px; }
      .card-title { font-size: 1rem; }
      .card-btn { font-size: 0.92rem; }
    }
    @media (max-width: 450px) {
      .card { max-width: 99vw; min-width: 95vw; margin: 13px 2vw; }
      .card-img { height: 133px; min-height: 110px; }
      .card-title { font-size: 0.94rem; }
      .card-btn { font-size: 0.85rem; }
    }
    section.ueberuns-section { background: #141414; padding: 8vw 2vw 8vw 2vw; display: flex; flex-direction: column; align-items: center;}
    .ueberuns-flexbox { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 54px; max-width: 1200px; width: 100vw; margin: 0 auto; padding: 2vw 2vw; background: linear-gradient(94deg,#181818 56%,#232323 99%); border-radius: 22px; box-shadow: 0 6px 38px rgba(0,0,0,0.13);}
    .ueberuns-content { flex: 2 1 330px; max-width: 510px; text-align: left; font-size: 1.15rem; color: #fff; padding: 18px 14px;}
    .ueberuns-title { font-size: 2.1rem; letter-spacing: 2px; margin-bottom: 18px; color: #eee;}
    .ueberuns-text { margin-bottom: 6px; line-height: 1.6; font-size: 1.1rem; color: #ccc;}
    .ueberuns-highlight { margin-top: 15px; font-size: 1.06rem; color: #acacac; font-style: italic; text-align: left;}
    .team-image { flex: 1 1 151px; width: 350px; height: 430px; border-radius: 23px; object-fit: cover; box-shadow: 0 4px 28px rgba(0,0,0,0.19); border: 3px solid #fff; background: #222;}
    @media (max-width: 1000px) { .ueberuns-flexbox { flex-direction: column; gap: 29px; padding: 10vw 2vw;} .team-image { width: 99vw; height: 55vw; max-width: 480px; max-height: 340px;} .ueberuns-content { max-width: 99vw;} }
    @media (max-width: 600px) { .ueberuns-flexbox { padding: 18px 3vw;} .team-image { width: 90vw; height: 40vw;} .ueberuns-title { font-size: 1.12rem;} .ueberuns-text { font-size: 0.95rem;}}
    @media (max-width: 800px) {
      section.feature-section {
        flex-wrap: wrap;
        gap: 40px;
        padding: 7vw 1vw 7vw 1vw;
      }
      .feature-card { width: 88vw; max-width: 99vw; min-width: unset;}
      .feature-img { height: 140px; max-width: 100%;}
      .feature-desc { font-size: 0.97rem;}
    }
    @media (max-width: 500px) {
      .feature-img { height: 85px; }
      .feature-card {font-size: 0.98rem; }
    }
    @media (max-width: 350px) {
      .feature-img { height: 60px; }
      section.feature-section { padding: 7vw 0vw 8vw 0vw; }
    }
   
    footer {
      background: var(--footer-bg); color: #dadada;
      padding: 40px 6vw 18px 6vw;
      width: 100vw; border-top: 1.7px solid var(--footer-border);
      display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
      align-items: flex-start; font-weight: 400;
    }
    .footer-grid {
      display: flex; width: 100%; justify-content: center;
      gap: 52px; flex-wrap: wrap;
      max-width: 1250px; margin: 0 auto 33px auto;
    }
    .footer-col {
      flex: 1 1 170px;
      min-width: 160px; max-width: 230px;
      padding-bottom: 11px;
      display: flex; flex-direction: column; align-items: flex-start;
    }
    .footer-col h3 {
      margin-bottom: 8px; margin-top: 0;
      font-size: 1.05rem; color: #fff; letter-spacing: 1.1px;
      font-weight: bold;
    }
    .footer-col address, .footer-col a, .footer-col div, .footer-col p {
      font-size: 0.99rem; color: #bbb; font-style: normal; text-decoration: none; margin-bottom: 3px;
      line-height: 1.6;
      background: none;
      border: none;
      padding: 0;
      display: block;
      word-break: break-all;
    }
    .footer-col a {
      color: #bbb;
      text-decoration: none;
      transition: color 0.16s;
      cursor: pointer;
    }
    .footer-col a:hover {
      color: #fff;
      text-decoration: underline;
    }
    .footer-bar {
      width: 100%; display: flex; margin: 0 auto 0 auto; justify-content: center; align-items: center;
    }
    .footer-bar hr {
      width: 66vw; max-width: 400px; border: none;
      border-top: 1.3px solid #353535; margin: 0 auto;
    }
    .footer-copyright {
      width: 100%;
      padding-top: 17px; padding-bottom: 3px;
      text-align: center;
      color: #bdbdbd;
      font-size: 0.96rem;
      font-weight: 500;
      letter-spacing: 0.6px;
      user-select: none;
    }
    @media (max-width: 900px) {
      .footer-grid { gap: 19px; }
      .footer-col { flex-basis: 41%; min-width: 130px; }
    }
    @media (max-width: 600px) {
      footer { padding: 23px 6vw 13px 6vw;}
      .footer-grid { flex-direction: column; gap: 0; }
      .footer-col {max-width: unset; min-width: unset; padding-bottom: 21px;}
    }
    ::selection { background: #fff; color: #181818; }

    @media (max-width: 700px) {
  .slider-overlay {
    background: linear-gradient(rgba(20,20,20,0.52), rgba(20,20,20,0.21));
  }
}

@media (min-width: 1200px) {
  .slider-img,
  .slider-img.fadeout,
  .slider-img.fadein {
    object-position: center 0% 50%; /* 0% = oben, 100% = unten */
  }
  
}

@media (min-width: 1200px) {
  .slider-container {
    background-position: center 0% 50%;
  }
}

@media (min-width: 1200px) {
  .slider-img,
  .slider-img.fadeout,
  .slider-img.fadein {
    object-position: center 70%;
  }
}