@font-face {
  font-family: Barlow;
  src: url('../fonts/Barlow/Barlow-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: Barlow;
  src: url('../fonts/Barlow/Barlow-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
        font-family: 'Fira Sans', Arial, sans-serif;
        background-color: #fdfdfd;
        color: #222;
      }

      html {
        font-size: 16px;
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
      }

      h1, h2, h3 {
        font-weight: 600;
      }

      p {
        line-height: 1.6;
        color: #333;
      }

      main {
        padding-top: 104px;
      }

      /* HEADER */
      
      .header-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      
      .logo {
        height: 40px;
        max-width: 100%;
      }

      @media (width <= 768px) {
        .logo {
          margin-top: 0.5rem;
        }
      }

      
      .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
        padding: 1.9rem 0;
      }
      
      
      header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000; /* liegt über allem anderen */
        background-color: #fdfdfd; /* wichtig, damit er nicht durchsichtig ist */
        box-shadow: 0 2px 5px rgb(0 0 0 / 5%); /* optionaler Schatten */
      }
      
      header h1 {
        margin: 0;
      }
      
      nav ul.nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        list-style: none;
        gap: 1rem;
        padding: 0;
        margin: 0;
        position: relative;
      }

      .nav a {
        white-space: nowrap;

      }

      nav ul.nav > li {
        position: relative;
      }

      nav ul.nav a {
        color: grey;
        text-decoration: none;
        padding: 0.5rem;
        display: block;
      }

      nav .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #0056b3;
        list-style: none;
        padding: 0;
        margin: 0;
        min-width: 180px;     
        z-index: 10;
      }

      nav .dropdown-menu li a {
        padding: 0.75rem 1rem;
        color: white;
        white-space: nowrap;
      }

      nav .dropdown:hover .dropdown-menu {
        display: block;
      }

      nav .dropdown-menu li a:hover {
        background-color: #003f80;
      }

      .nav-and-buttons {
        display: flex;
        align-items: center;
        gap: 1rem; /* Abstand zwischen Menü & Buttons */
      }
      
      .shop-buttons {
        display: flex;
        flex-direction: row;
        gap: 0.1rem; /* Abstand zwischen den Buttons */
      }
      
      .shop-button,
      .kunden-button {
        display: inline-block;
        background-color: #0056b3; /* CI Blau */
        color: white;
        padding: 0.75rem 1.5rem;
        font-weight: bold;
        text-decoration: none;
        border: none;
        border-radius: 0;
        transition: background-color 0.3s ease;
      }
      
      .shop-button {
        transform: skew(20deg);
      }
      
      .shop-button span {
        display: inline-block;
        transform: skew(-20deg); /* Text wieder gerade */
      }
      
      .kunden-button {
        transform: skew(20deg); /* Umgedreht! */
      }
      
      .kunden-button span {
        display: inline-block;
        transform: skew(-20deg); /* Text wieder gerade */
      }
      
      .shop-button:hover,
      .kunden-button:hover {
        background-color: #003f80;
      }

      .menu-toggle {
        display: none;
      }

      .show-mobile {
        display: none;
      }


      @media (max-width: 768px) {
        .show-mobile {
          display: block;
        }

        .nav-and-buttons
        .nav
        .show-mobile li a{
          color: #0056b3;   
        }

        .nav-and-buttons {
          flex-direction: column;
          align-items: flex-end;
        }
      
        .shop-buttons {
          flex-direction: column;
          align-items: flex-end;
        }
      }
      
      @media (width <= 768px) {
        .menu-toggle {
          display: block;
          position: relative;
          width: 35px;
          height: 22px;
          cursor: pointer;
          background: none;
          border: none;
          margin-right: 1rem;
          margin-top: 0.5rem;
        }
        
        .menu-toggle span {
          display: block;
          height: 4px;
          background: #0056b3; /* Bihler Blau */
          margin: 4px 0;
          transition: 0.3s ease;
        }
        
        .menu-toggle.open span:nth-child(1) {
          transform: translateY(8px) rotate(45deg);
        }
        
        .menu-toggle.open span:nth-child(2) {
          opacity: 0;
        }
        
        .menu-toggle.open span:nth-child(3) {
          transform: translateY(-8px) rotate(-45deg);
        }
      
        nav ul.nav {
          display: none;
          flex-direction: column;
          background-color: #fdfdfd;
          width: 100%;
          position: absolute;
          top: 100%;
          left: 0;
          box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
          z-index: 999;
        }
      
        nav ul.nav.show {
          display: flex;
        }
      
        nav ul.nav li {
          text-align: center;
          color: #036;
        }
      
        nav .dropdown-menu {
          position: static;
          background-color: #eee;
        }
      
        nav .dropdown-menu li a {
          color: #036;
        }

      
        nav .dropdown:hover .dropdown-menu {
          display: none;
        }
      
        nav .dropdown > a::after {
          font-size: 0.8rem;
          color:#036;
        }

        .shop-buttons {
          display: none;
        }

      }

      /* SARTSEITE HERO SECTION */
      #hero {
        background-image: url("../images/gebaeudeaufnahmen/verwaltung.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 15%; /* oder: 0% 20% */
        min-height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: white;
        text-align: center;
        padding-top: 164px;
      }


      @media (max-width: 768px) {
        #hero {
          height: 300px;
          padding-top: 200px;
          padding-bottom: 2rem;
          margin-top: -5rem;
        }

        .hero-content {
          margin-top: 0;
        }

      
        .hero-content p i{
          display: none;
        }

        .hide-mobile {
          display: none;
        }

      }

      
      .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(0 40 85 / 60%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .hero-content {
        z-index: 2;
        margin-top: -100px; 
      }

      .hero-content h2 {
        font-family: Barlow, sans-serif;
        font-size: 4rem;
        font-weight: 700;
        color: white; /* BIHLER-Blau oder angepasstes CI-Blau */
        text-align: center;
        line-height: 1.2;
        letter-spacing: 0.5px;
        transition: color 0.3s ease, transform 0.3s ease;
        text-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
        margin-bottom: 1rem;
        padding-top: 2rem;
      }

      .hero-content p i{
        font-size: 1.2rem;
        font-weight: 400;
        color: #fffc;
        margin-top: 1rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4;
        text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
      }

      /* STARTSEITE-INTRO */

      .bihler-start-intro {
  padding: 4rem 2rem;
  background-color: #ffffff;
  color: #333;
  font-family: 'Work Sans', sans-serif;
  font-weight: 300; /* oder 400/600 je nach Look */
  font-size: 2.5rem;
}

.bihler-heading {
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 2rem;
  color: #111;
}

.bihler-lead {
  font-size: 1.2rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 1.5rem;
}

.bihler-start-intro p {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 850px;
  margin: 0 auto 1.5rem;
}

.bihler-highlight {
  font-weight: 600;
  color: #0056b3;
}
      
      /* FUHRPARK-BANNNER STARTSEITE */
       
      .fuhrpark-banner {
        width: 100%;
        max-height: 400px; /* Höhe begrenzen */
        overflow: hidden;
        margin: 2rem auto;
        border-top: 4px solid #007bc1;   /* BIHLER-Blau */
        border-bottom: 4px solid #007bc1;
        box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
      }
      
      .fuhrpark-banner img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        transform: translateY(-50px);
      }
      

      @media screen and (width <= 768px) {
        .fuhrpark-banner {
          display: none;
        }
      }      

      /* KACHEL-HERO-SECTION STARTSEITE */

      .info-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 3rem;
      }

      
      .info-box {
        display: block;
        background-color: rgb(255 255 255 / 95%);
        text-decoration: none;
        padding: 1rem;
        width: 150px;
        text-align: center;
        box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
        color: #222;
        transition: background-color 0.3s ease, color 0.3s ease;
      }
      
      .info-box img {
        width: 48px;
        height: 48px;
        margin-bottom: 0.5rem;
      }
      
      .info-box h3 {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
        color: #0078c2;
        transition: color 0.3s ease;
      }
      
      .info-box p {
        font-size: 0.75rem;
        color: #333;
        margin-bottom: 0;
      }
      
      .info-box:hover {
        background-color: #0056b3;
        color: white;
      }
      
      .info-box:hover h3 {
        color: white;
      }
      
      .info-box:hover p {
        color: white;
      }

      @media (width <= 768px) {
        #hero {
          height: auto; /* automatische Höhe statt fixe */
          padding-top: 140px; /* Platz für Header */
          padding-bottom: 4rem;
          display: block;
        }
      
        .hero-overlay {
          position: relative;
          height: auto;
          padding-bottom: 7rem;
          margin-bottom: -4rem;
          margin-top: -8rem;
          
        }
      
        .hero-content {
          margin: 0 auto;
          padding: 1rem;
          text-align: center;
        }

      
        .hero-content p i {
          display: none;
        }
      
        .info-container {
          flex-direction: row;
          align-items: center;
          margin-top: 2rem;
          padding: 0 1rem;
          margin-right: 0rem;
        }

        .info-container
        .info-box
        p {
          display: none;
        }
      
        .info-box {
          width: 100%;
          max-width: 110px;
          height: 100px;
          padding: 1rem;
        }
      }

      .cta-buttons {
        display: none;
      }

      @media (max-width: 768px) {
        .cta-buttons {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 0.8rem;
          margin: 1rem 0;
        }

        .cta-button {
          display: inline-block;
          background-color: #fff;          
          color: #0056b3;                  
          border: 1.5px solid #fff;    
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;   
          text-decoration: none;
          font-weight: bold;
          transition: all 0.3s ease;
          text-align: center;
          min-width: 140px;    
        }
        
      }

      /* MOBILE DIVIDER */

      .mobile-divider {
        display: none;
      }
      
      @media (width <= 768px) {
        .mobile-divider {
          display: block;
          height: 4px;
          width: 80%;
          margin: 2rem auto;
          margin-top: 3rem;
          margin-bottom: 0;
          border-radius: 2px;
          padding: 0;

          /* Farbverlauf im BIHLER-CI-Blau */
          background: linear-gradient(to right, #6eb7ff, #0056b3, #66b0fb);
      
          /* Fade-In Animation */
          opacity: 0;
          animation: fadeInDivider 1s ease-out 0.3s forwards;
        }
      
        @keyframes fadeInDivider {
          from { opacity: 0; transform: translateY(-10px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      }

      /* MENUBLOCK STARTSEITE */

      .menublock {
        scroll-margin-top: 50px;
        padding: 4rem 1rem;
        background-color: #fdfdfd;
      }
      
      .menublock h2 {
        font-size: 2rem;
        color: #0056b3;
        margin-bottom: 2rem;
        text-align: center;
      }

      .menublock ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        margin-top: 2rem;
      }

      .menublock ul li {
        padding: 0;
        margin: 0;
      }

      .menublock ul li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        background-color: #0056b3;
        color: white;
        text-decoration: none;
        padding: 1rem 2rem;
        font-size: 1.1rem;
        font-weight: 600;
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
        min-width: 260px;
        transition: background-color 0.3s, transform 0.2s;
      }

      .menublock ul li a:hover {
        background-color: #003f80;
        transform: translateY(-3px);
      }

      .menublock ul li a::after {
        content: "→";
        font-size: 1.3rem;
        margin-left: auto;
      }

      #kontakt h2 {
        color: #0056b3;
        text-align: center;
        margin-bottom: 2rem;
      }

      @media (width <= 768px) {
        .menublock {
          scroll-margin-top: 14px;
        }
      }

      /* PV-MENU */

      #photovoltaik .licht-divider {
        max-width: 700px;
        margin: 0 auto;
        margin-top: -1rem;
      }

      .pv-header
      .container {
        padding-bottom: 5rem;
        margin-top: -2rem;
      }

      .pv-header
      .container h2 {
        text-align: center;
        color: #0056b3;
        font-size: 2.3rem;
      }

      .pv-text {
        text-align: center;
        font-size: 1.2rem;
        line-height: 1.8rem;  
        margin-top: 2rem;
      }

      .pv-button-anfragen {
        background-color: #0056b3;
        color: white;
        padding: 10px 20px;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 0;
        transition: background-color 0.3s ease;
        display: block;
        margin: 0 auto;
        width: fit-content;
        margin-top: 2.5rem;
        margin-bottom: -2rem;
      }
      
      .pv-button-anfragen:hover {
        background-color: #003f7f;
        transform: scale(1.04);       /* leichte Vergrößerung beim Hover */
      }
      

      .splide .pv-sliderh2 {
        color: #0056b3;
        text-align: center;
        font-size: 2.3rem;
        font-weight: 600;
      }

      /* PV-SERVICE */
      #pv-service {
        scroll-margin-top: 50px;
      }

      .pv-service-section {
        padding: 60px 20px;
        background-color: #f5f7fa;
      }
      
      .service-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
      }
      
      .service-text h2 {
        color: #0056b3;
        font-size: 30px;
        margin-bottom: 20px;
      }
      
      .service-list {
        list-style: none;
        padding: 0;
        font-size: 18px;
        line-height: 1.8;
      }
      
      .service-list li::before {
        content: "✔";
        color: #0056b3;
        margin-right: 10px;
      }
      
      .service-image img {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
      }

      @media (width <= 768px) {
        .service-grid {
          grid-template-columns: 1fr;
          text-align: center;
        }
      
        .service-image img {
          margin-top: 20px;
        }
      }

      /* PV-Kacheln */

      .pv-produktgrid {
        padding: 60px 20px;
        background-color: #f5f7fa;
      }
      
      .pv-grid-headline {
        text-align: center;
        font-size: 34px;
        color: #0056b3;
        background: linear-gradient(90deg, #0056b3, #39f, #0056b3);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shine 3s ease-in-out infinite;
        font-weight: 700;
        display: block;
        margin: 0 auto;
        margin-bottom: 40px;
        width: fit-content;
      }

      @keyframes shine {
        0% {
          background-position: 0% center;
        }

        50% {
          background-position: 100% center;
        }

        100% {
          background-position: 0% center;
        }
      }
      
      .pv-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }

      @media (width <= 600px) {
        .pv-grid {
          grid-template-columns: 1fr;
        }
      }
      
      .pv-kachel1 {
        position: relative;
        background-size: cover;
        background-position: center;
        height: 360px;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
      }

      .pv-kachel2 {
        position: relative;
        background-size: cover;
        background-position: center;
        height: 360px;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
      }

      .pv-kachel3 {
        position: relative;
        background-size: 100%;
        background-position: center;
        height: 360px;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        background-repeat: no-repeat;
      }

      .pv-kachel4 {
        position: relative;
        background-size: cover;
        background-position: center;
        height: 360px;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
      }
      
      .pv-kachel-overlay {
        background: linear-gradient(to top, rgb(0 0 0 / 70%), rgb(0 0 0 / 0%));
        color: white;
        padding: 24px;
        width: 100%;
      }
      
      .pv-kachel-label {
        font-size: 12px;
        letter-spacing: 1px;
        color: #ffd700;
        text-transform: uppercase;
        margin-bottom: 8px;
        display: inline-block;
      }
      
      .pv-kachel1 h3 {
        font-size: 20px;
        margin-bottom: 16px;
      }

      .pv-kachel2 h3 {
        font-size: 20px;
        margin-bottom: 16px;
      }

      .pv-kachel3 h3 {
        font-size: 20px;
        margin-bottom: 16px;
      }

      .pv-kachel4 h3 {
        font-size: 20px;
        margin-bottom: 16px;
      }
      
      .pv-button {
        display: inline-block;
        background-color: #0056b3;
        color: white;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.3s ease;
      }
      
      .pv-button:hover {
        background-color: #003f7f;
      }


      /* PV-Vorteile */

      #pv-vorteile {
        scroll-margin-top: 50px;
      }

      .pv-vorteile-section {
        background-color: #f9f9f9;
        padding: 60px 20px;
      }
      
      .vorteile-liste {
        list-style: none;
        padding: 0;
        margin: 30px 0;
      }
      
      .vorteile-liste li {
        margin-bottom: 12px;
        font-size: 16px;
        line-height: 1.6;
        position: relative;
        padding-left: 24px;
      }
      
      .vorteile-liste li::before {
        content: "✔";
        color: #0056b3;
        font-weight: bold;
        position: absolute;
        left: 0;
      }

      .pv-content-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        align-items: flex-start;
      }
      
      .vorteile-liste {
        flex: 1 1 300px;
      }
      
      .pv-diagram-wrapper {
        flex: 1 1 300px;
        text-align: center;
      }
      
      .pv-diagram-wrapper img {
        width: 100%;
        height: auto;
        max-width: 400px;
      }
      
      .pv-diagram-wrapper h3 {
        margin-bottom: 20px;
        font-size: 20px;
        color: #333;
      }
      
      .pv-diagram-caption {
        margin-top: 10px;
        font-size: 14px;
        color: #666;
      }
    

      /* Section Wrapper */
      .pv-rechner-section {
        padding: 60px 0;
        background-color: #f9f9f9; /* leicht abgesetzt, optional */
        text-align: center;
      }

      /* Headline */
      .pv-rechner-section h2 {
        font-size: 2rem;
        margin-bottom: 10px;
        color: #0056b3; /* CI Blau */
      }

      /* Trennlinie */
      .pv-rechner-section .rechner-divider {
        width: 60px;
        height: 3px;
        background-color: #0056b3; /* CI Blau */
        margin: 0 auto 20px;
      }

/* Textabsatz */
.pv-rechner-section p {
  max-width: 600px;
  margin: 0 auto 30px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

/* Hinweistext */
.pv-rechner-section .pv-rechner-hinweis {
  font-size: 0.9rem;
  color: #666;
  margin-top: 10px;
}

/* Button (nutzt deine bestehende pv-button-Klasse) */
.pv-rechner-section .pv-button {
  display: inline-block;
  background-color: #0056b3;
  color: #fff;
  padding: 12px 25px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.pv-rechner-section .pv-button:hover {
  background-color: #003f80;
}

      #brand-slider {
        margin: 0 auto;
        max-width: 100%;
        background-color: #fff;
        padding: 1rem 0; 
      }
      
      .splide__slide {
        padding: 2rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .splide__slide img {
        height: 100px;           
        width: auto;             
        max-width: 180px;        
        object-fit: contain;     
        transition: transform 0.3s ease;
      }
      
      .splide__slide img:hover {
        transform: scale(1.05);
      }
      
      .splide__arrow {
        background: none !important;    
        border: none !important;        
        box-shadow: none !important;     
        padding: 0.5rem;
        color: #0056b3;                  
        font-size: 1rem;                 
        opacity: 1;                      
      }
      
      .splide__arrow svg {
        fill: #0056b3;                   
        width: 1rem;                   
        height: 1rem;
      }

      .marken-divider{
        width:180px;height:2px;margin:-1rem auto 2.5rem;
        background:#0056b3;border-radius:2px;
      }

      .splide 
      .licht-divider {
        max-width: 700px;
        margin: 0 auto;
      }

      @media (width <= 768px) {
        .splide
        .solid-divider {
          display: none;
        }

        .splide
        .licht-divider {
          display: none;
        }

        .service-image {
          display: none;
        }
      }

        /* PV-Kontakt */

#pv-kontakt {
  scroll-margin-top: 50px;
}

.pv-kontakt-section {
  background-color: #fff;
  padding: 60px 20px;
}


.pv-kontakt-section 
.container
.licht-divider {
  width: 800px;
  margin: 0 auto;
  margin-bottom: 3rem;
  margin-top: 2rem;
}

@media (width <= 768px) {
  .pv-kontakt-section
  .container
  .licht-divider {
    margin: 0 auto;
    width: 200px;
    margin-bottom: 3rem;
    margin-top: 2rem;
  }
}

.pv-kontakt-section
.container
.kontakt-installation h4 {
  text-align: center;
  color: #0056b3;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.kontakt-divider {
  width: 180px;
  height: 2px;
  margin: 0 auto 2.5rem;
  background: #0056b3;
  border-radius: 2px;
}

.pv-kontakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  text-align: center;
}

.pv-kontakt-card {
  background-color: #f5f7fa;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pv-kontakt-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgb(0 0 0 / 10%);
}

.pv-kontakt-card h4 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: #0056b3;
}

.pv-kontakt-card a {
  color: #0056b3;
  text-decoration: none;
  font-weight: 500;
}

.pv-kontakt-card a:hover {
  text-decoration: underline;
}

.pv-kontakt-card p {
  margin: 5px 0;
  font-size: 1rem;
  color: #333;
}

.pv-kontakt-section
.container
.kontakt-installation {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  font-size: 1.2rem;
}


/* BIHLER-VORTEILE */
.bihler-vorteile {
  background-color: #f9f9f9; /* dezent */
  padding: 4rem 1rem;
  text-align: center;
}

.bihler-vorteile h2 {
  color: #0056b3;
  font-size: 2.2rem;
  margin-bottom: 4rem;
}

.vorteile-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  max-width: 1200px;
}

.vorteil-item {
  flex: 1 1 150px;
  max-width: 200px;
}


.vorteil-item p {
  font-size: 1rem;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

.vorteile-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.vorteil-item {
  text-align: center;
}

.connector {
  display: inline-block;
  height: 2px;
  width: 0; /* Startzustand */
  background-color: #0056b3; /* dein CI Blau */
  transition: width 2s ease-out;
  margin: 0 1rem; /* Abstand */
  vertical-align: middle;
  margin-top: 2rem;
}

.connector.show {
  width: 60px; /* oder was du brauchst */
}

@keyframes growLine {
  from { width: 0; }
  to { width: 50px; }
}

.icon {
  stroke: #0056b3; /* Linienfarbe */
  fill: none;      /* Falls gefüllt: fill: #0056b3 */
  width: 60px;
  height: 60px;
}

@media (width <= 768px) {
  .connector {
    display: none;
  }
}

/* ONLINE-SHOP && KUNDE SECTION */

.bihler-action-section {
  background-color: #f5f5f5;
  padding: 3rem 1rem;
}

.action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.action-box {
  background-color: #f0f0f0;
  padding: 2rem;
  flex: 1 1 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  border-left: 6px solid transparent;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

.action-box h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #222;
}

.action-box p {
  color: #555;
  margin: 0;
}

.action-box a {
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  white-space: nowrap;
}

.border-lightblue {
  border-left-color: #cce5ff;
}

.border-blue {
  border-left-color: #0056b3;
}

.btn-lightblue {
  background-color: #cce5ff;
  color: #444444;
  transition: background 0.3s ease;
}

.btn-lightblue:hover {
  background-color: #99ccff;
}

.btn-blue {
  background-color: #0056b3;
  color: #fff;
  transition: background 0.3s ease;
}

.btn-blue:hover {
  background-color: #003f80;
}

/* STARTSEITE-GESCHAEFTSBEREICHE */

.bihler-business-areas {
  padding: 4rem 1rem;
  background-color: #f9f9f9;
}

.section-title-business {
  font-size: 2rem;
  color: #0056b3;
  text-align: center;
  margin-bottom: 3rem;
}

.business-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.business-card {
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  padding: 1.5rem;
  border-left: 6px solid #0056b3;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.business-image {
  flex: 1 1 300px;
  max-width: 300px;
  border-radius: 4px;
  object-fit: cover;
}

.business-content {
  flex: 2 1 400px;
}

.business-content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #222;
}

.business-content p {
  font-size: 1rem;
  color: #444;
  margin-bottom: 1rem;
}

.btn-bereich {
  display: inline-block;
  background-color: #0056b3;
  color: white;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-bereich:hover {
  background-color: #003f80;
}

/* Responsive: Karten untereinander */
@media (max-width: 768px) {
  .business-card {
    flex-direction: column;
    text-align: center;
  }

  .business-image {
    max-width: 100%;
  }
}

/* KARRIERE */
#karriere {
  margin-bottom: -2rem;
}

/* === Allgemein === */
#kontakt {
  padding: 4rem 0;
  background-color: #f9f9f9;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: -2rem;
}

.kontakt-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.kontakt-headline h2 {
  text-align: center;
  font-size: 2.5rem;
  color: #0056b3;
  margin-bottom: 0.5rem;
}

/* === Grid === */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.kontakt-info h3 {
  color: #0056b3;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.kontakt-info p,
.oeffnungszeiten p {
  margin: 0.2rem 0;
  line-height: 1.6;
}

.kontakt-info a {
  text-decoration: none;
  color: #333;
}

.kontakt-info a:hover {
  text-decoration: underline;
}

/* === Karte und Öffnungszeiten === */
.kontakt-map iframe {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.oeffnungszeiten {
  margin-top: 2rem;
}

.oeffnungszeiten h3 {
  color: #0056b3;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.oeffnungszeiten strong {
  display: inline-block;
  margin-top: 0.5rem;
  color: #333;
}

/* === Responsive === */
@media (width <= 992px) {
  .kontakt-grid {
    grid-template-columns: 1fr;
  }

  .oeffnungszeiten {
    margin-top: 2rem;
  }
}

/* KONTAKT-FORMULAR */

      .kontakt-container {
        max-width: 600px;
        margin: 0 auto;
        background: white;
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
      }
  
      .kontakt-container h2 {
        color: #0056b3;
        margin-bottom: 1rem;
      }
  
      .kontakt-container label:not(.datenschutz-label) {
        display: block;
        margin-top: 1rem;
        color: #333;
        margin-left: -0.5rem;
        text-align: left;
      }
  
      .kontakt-container input,
      .kontakt-container textarea {
        width: 100%;
        padding: 0.75rem;
        margin-top: 0.25rem;
        border: 1px solid #ccc;
        border-radius: 0.5rem;
        font-size: 1rem;
        margin-left: -0.7rem;
      }
  
      .kontakt-container textarea {
        min-height: 120px;
        resize: vertical;
      }
  
      .kontakt-container button {
        margin-top: 1.5rem;
        background-color: #0056b3;
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }
  
      .kontakt-container button:hover {
        background-color: #004494;
      }

      #kontakt .licht-divider {
        width: 1000px;
        margin: 2rem auto;
      }

      @media (width <= 768px) {
        #kontakt .licht-divider {
          margin: 0 auto;
          width: 200px;
          margin-bottom: 2rem;
          margin-top: 1rem;
        }
      }

      /* Grundstil für die Nachricht */
#form-message {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  max-width: 100%;
  transition: all 0.3s ease-in-out;
}

/* Erfolgsmeldung */
#form-message.success {
  background-color: #e6f2fb; /* helles Blau */
  color: #0056b3; /* dein CI Blau */
  border: 1px solid #0056b3;
}

/* Fehlermeldung */
#form-message.error {
  background-color: #fdecea; /* hellrot */
  color: #d32f2f; /* kräftiges Rot */
  border: 1px solid #d32f2f;
}

.datenschutz-label {
  display: flex;
  align-items: flex-start; /* oder 'center' */
  gap: 0.5rem; /* Abstand zwischen Checkbox und Text */
  line-height: 1.4;
  text-align: left;
}

.kontakt-container input[type="checkbox"] {
  width: auto;        /* keine 100% Breite! */
  margin-left: 0;     /* kein negativer Margin! */
}

.datenschutz-label span {
  display: inline; /* kein inline-block nötig */
}

.datenschutz-label span a {
  text-decoration: none;
  color: #0056b3;
}

      /* FOOTER */

      .bihler-footer {
        background-color: #111;
        color: #eee;
        font-size: 0.9rem;
        padding: 3rem 1rem 2rem;
      }
      
      .footer-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 2rem;
        border-bottom: 1px solid #333;
        padding-bottom: 2rem;
        margin-bottom: 1.5rem;
      }
      
      .footer-col {
        min-width: 160px;
      }
      
      .footer-col h4 {
        color: #fff;
        margin-bottom: 1rem;
      }
      
      .footer-col ul {
        list-style-type: square;
        padding-left: 1rem;
        color: #0af;
      }
      
      .footer-col ul li {
        margin-bottom: 0.5rem;
      }
      
      .footer-col ul li a {
        color: #aee1ff;
        text-decoration: none;
      }
      
      .footer-col ul li a:hover {
        text-decoration: underline;
      }
      
      .footer-logos img {
        max-height: 60px;
        margin-bottom: 1rem;
        display: block;
      }
      
      .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
        font-size: 0.85rem;
        color: #ccc;
      }
      
      .footer-bottom a {
        color: #aee1ff;
        text-decoration: none;
      }
      
      .footer-bottom a:hover {
        text-decoration: underline;
      }

      /* UNTERNEHMEN.HTML */

      .unternehmen-banner {
        width: 100%;
        display: block;
        margin-bottom: 2rem;
      }

      @media (max-width: 768px) {
        .unternehmen-banner {
          margin-top: -3.4rem;
        }

        .map-area img {
          margin-top: 40px;
        }
      }
      
      .unternehmen-banner img {
        width: 100%;
        height: 350px;
        display: block;
        object-fit: cover;
      }

      .unternehmensblock {
        padding: 4rem 1rem;
        background-color: #fdfdfd;
        margin-top: -80px;
      }
  
      .section-title-blue-unternehmen {
        font-size: 2rem;
        color: #0056b3;
        margin-bottom: 1.5rem;
        text-align: left !important;
      }

      .section-text {
        font-size: 1rem;
        line-height: 1.6;
        color: #555;
        margin-bottom: 1rem;
      }
  
      .section-text.italic {
        font-style: italic;
        color: #666;
      }
  
      .einzugs-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        margin-top: -5rem;
      }
  
      .map-area {
        flex: 1 1 300px;
        max-width: 400px;
      }
  
      .map-area img {
        width: 100%;
        height: auto;
      }
  
      .text-area {
        flex: 2 1 400px;
      }

      /* CHRONIK.HTML */

      .chronik-section {
        padding: 4rem 1rem;
        max-width: 1200px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
        margin-top: -4.5rem;
      }

      @media (max-width: 768px) {
        .chronik-section {
          margin-top: -5.5rem;
        }

        .chronik-slider {
          margin-top: -55px;
        }
      }

      .chronik-section h2 {
        text-align: center;
        font-size: 2rem;
        color: #0056b3;
        margin-bottom: 2rem;
        margin-top: 1.5rem;
        padding-top: 3rem;
      }

      .chronik-entry {
        margin-bottom: 2rem;
      }

      .chronik-entry h3 {
        color: #0078c2;
        font-size: 1.2rem;
        margin-bottom: -1.4rem;
      }

      .chronik-entry p {
        color: #666; 
        margin: 1.7rem 0;
        line-height: 1.6; 
        font-size: 1rem;
      }

      .chronik-image {
        float: left;
        margin: 0 1.5rem 1rem 0;
        width: 120px;
      }

      .chronik-slider {
        width: 100%;
        max-height: 350px;
        overflow: hidden;
        margin-bottom: 0;
      }
      
      .chronik-slider img {
        width: 100%;
        height: 350px;
        object-fit: cover;
        display: block;
      }

      @media (width <= 600px) {
        .chronik-image {
          float: none;
          display: block;
          margin: 0 auto 1rem;
        }

      }

      /* SORTIMENT.HTML */

      .sortiment-section .licht-divider {
        width: 400px;
        margin: 0 auto;
      }

      .sortiment-section h2 {
        text-align: center;
        color: #0056b3;
        font-size: 2rem;
        margin-bottom: 2rem;
      }

      .sortiment-banner img {
        width: 100%;
        height: 350px;
        display: block;
      }

      .sortiment-section p {
        max-width: 1200px;
        margin: 0 auto;
        font-size: 1.10rem;
        line-height: 1.8;
        margin-top: 2rem;
      }
    
      .sortiment-section {
        text-align: center;
        padding: 2rem 1rem;
      }
    
      .kachel-menu {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-top: 2rem;
        padding-bottom: 3rem;
      }
      
      .kachel {
        background-color: #fff;
        color: #0078c2;
        width: 140px;
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-weight: 600;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgb(0 86 179 / 10%);
        transition: all 0.3s ease;
        text-align: center;
        padding: 1rem;
      }
      
      .kachel img {
        width: 40px;
        height: 40px;
        margin-bottom: 0.5rem;
      }
      
      .kachel span {
        font-size: 0.9rem;
      }
      
      .kachel:hover {
        background-color: #0056b3;
        color: white;
        box-shadow: 0 6px 14px rgb(0 86 179 / 30%);
      }
      
      .kachel:hover img {
        filter: brightness(0) invert(1); /* weißer Effekt */
      }

      hr.solid-divider {
        border-top: 3px solid #0056b3;
        width: 60px;
        transition: all 0.3s ease;
        border-radius: 999px;
      }

      hr.solid-divider:hover {
        width: 100px;
      }
    
      .kachel:hover {
        background-color: #003f80;
      }
    
      .sortiment-block {
        scroll-margin-top: 5.5rem;
        padding: 3rem 1rem;
        max-width: 1200px;
        margin: 0 auto;
      }

      @media (max-width: 768px) {
        .sortiment-block {
          scroll-margin-top: 1.1rem;
        }
      }
    
      .sortiment-block h3 {
        color: #0056b3;
        font-size: 2rem;
        margin-bottom: 1rem;
        text-align: center;
      }
    
      .sortiment-block p {
        font-size: 1.1rem;
        text-align: center;
        line-height: 1.8;
      }

      .sortiment-block .service-text {
        padding: 2rem 0;
        font-size: 1.1rem;
        text-align: center;
        line-height: 1.8;
      }

      .sortiment-liste {
        margin: 0 auto;
        max-width: 900px;
      }
      
      .sortiment-liste li {
        color: #666;
        margin-bottom: 0.8rem;
      }

      .sortiment-liste ul {
        margin-top: 2.2rem;
        columns: 2;               
        column-gap: 4rem;         
        list-style-type: square; 
        padding-left: 2rem;
        font-size: 1rem;
        color: #0056b3;
      }

      .sortiment-liste ul li::marker {
        color: #0056b3;
      }

      .splide .sortiment-h2 {
        font-size: 2rem;
        padding-bottom: 0;
      }

      .splide .solid-divider {
        width: 200px;
        margin-top: 0;
        padding-bottom: 0;
      }

      .splide .splide__track {
        padding-top: 2rem;
      }


      .lager-banner {
        margin: 3rem auto;
        max-width: 1200px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
      }
      
      .lager-banner img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
      
      .sortiment-section .allgemein-service {
        max-width: 1200px;
        text-align: center;
        margin: 2rem auto;
        margin-top: 4rem;
        margin-bottom: -2rem;
        font-size: 1.10rem;
        line-height: 1.8;
        letter-spacing: 0.2px;
      }

      .sortiment-section
      .allgemein-service a {
        color: inherit;             /* übernimmt die normale Textfarbe */        /* überschreibt ggf. das <i> */
        cursor: pointer;            /* zeigt beim Hover die Hand */
        transition: color 0.3s ease;
      }

      .sortiment-section
      .allgemein-service a:hover {
        color: #007bc1; 
      }

      .kontakt-installation h4 {
        text-align: center;
        color: #0056b3;
        font-size: 1.5rem;
      }

      .kontakt-installation a {
        color: #0056b3;
        text-decoration: none;
      }

      .kontakt-installation a:hover {
        text-decoration: underline;
      }

      /* SORTIMENT-LICHT */

      .lichtbereich {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem;
      }
      
      .licht-headline {
        text-align: center;
        margin-bottom: 2rem;
      }
      
      .licht-headline h2 {
        color: #0056b3;
        margin-bottom: 1rem;
      }
      
      .licht-content {
        margin: 0 auto;
        max-width: 1000px;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: flex-start;
        margin-bottom: 2rem;
      }

      
      .licht-projekt {
        flex: 1;
        min-width: 400px;
      }
      
      .licht-projekt img {
        width: 100%;
        border-radius: 12px;
      }

      .licht-projekt-slider {
        flex: 1;
        max-width: 550px;
        position: relative;
      }
      
      .licht-projekt-slider img {
        width: 100%;
        border-radius: 12px;
      }
      
      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        color: white;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 2;
        padding: 0 0.5rem;
      }
      
      .arrow.left {
        left: 10px;
      }
      
      .arrow.right {
        right: 10px;
      }
      
      .projekt-beschreibung {
        text-align: center;
        font-style: italic;
        margin-top: 0.5rem;
      }
      
      .licht-liste {
        flex: 1;
        min-width: 400px;
      }
      
      .licht-liste ul {
        padding-left: 1.2rem;
        list-style-type: disc;
        list-style-type: square;
      }

      .licht-liste li::marker {
        color:#0056b3;
      }
      
      .licht-liste li {
        margin-bottom: 0.8rem;
        line-height: 1.8rem;
        color: #666;
      }
      
      .licht-footer {
        margin: 0 auto;
        max-width: 1000px;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: center;
      }
      
      .licht-callout {
        flex: 1;
        min-width: 300px;
      }
      
      .licht-callout p {
        font-size: 1.1rem;
        line-height: 1.6;
      }
      
      .licht-broschuere {
        flex: 1;
        min-width: 100px;
        min-height: 170px;
        align-self: flex-start;
      }

      /* SORTIMENT-LICHT-DIVIDER */

      .licht-divider {
        height: 2px;
        width: 100%;
        margin: 2rem 0;
        background: linear-gradient(
        to right,
        transparent,
        #0056b3,
        transparent
        );
        opacity: 0.8;
      }

      /* SORTIMENT-LICHT-PROSPEKT */
      .led-broschuere-section {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: center;
        justify-content: space-between;
        background-color: #f4f7fb;
        padding: 2rem;
        border-radius: 12px;
        margin-top: 2rem;
        max-width: 800px;
        height: auto;
      }
      
      .led-broschuere-text {
        flex: 2;
        min-width: 260px;
      }
      
      .led-broschuere-text h3 {
        color: #0056b3;
        margin-bottom: 0.5rem;
      }
      
      .led-broschuere-text p {
        margin-bottom: 1rem;
        color: #333;
        line-height: 1.5;
      }
      
      .download-btn {
        display: inline-block;
        background-color: #0056b3;
        color: white;
        padding: 0.75rem 1.25rem;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.3s ease;
      }
      
      .download-btn:hover {
        background-color: #004093;
      }
      
      .led-broschuere-preview {
        flex: 1;
        min-width: 200px;
        max-width: 300px;
      }
      
      .led-broschuere-preview img {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
      }


      /* SORTIMENT-LICHT-KONTAKT */

      .ansprechpartner-section {
        padding: 3rem 1rem;
        background-color: #fff;
        text-align: center;
        margin-top: 3rem;
        max-width: auto;
      }
      
      .ansprechpartner-section h3 {
        font-size: 1.8rem;
        color: #1d1d1f;
        margin-bottom: 2rem;
      }
      
      .ansprechpartner-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 2rem;
        overflow-x: auto;
      }
      
      .ansprechpartner-card {
        flex: 1 1 260px;
        max-width: 280px;
        padding: 1.5rem;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        background-color: #fafafa;
        box-shadow: 0 2px 6px rgb(0 0 0 / 4%);
        transition: box-shadow 0.2s ease;
      }
      
      .ansprechpartner-card:hover {
        box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
      }
      
      .ansprechpartner-card h4 {
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
        color: #0056b3;
      }
      
      .ansprechpartner-card a {
        color: #1a1a1a;
        text-decoration: none;
      }
      
      .ansprechpartner-card a:hover {
        text-decoration: underline;
      }

      .ansprechpartner-card p {
        white-space: nowrap;
      }

      @media (width <= 768px) {
        .ansprechpartner-grid {
          flex-wrap: wrap; /* zurück zu Stapel */
          justify-content: center;
        }
      
        .ansprechpartner-card {
          flex: 1 1 100%;
          max-width: 100%;
        }
      }

      /* SORTIMENT-MARKENBANNER */

      .marken-banner {
        margin: 0 auto;
        padding: 4rem 1rem;
        background-color: #fff;
      }
      
      .marken-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 3rem;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
      }
      
      .marken-grid img {
        max-width: 150px;
        max-height: 80px;
        transition: transform 0.3s ease;
        object-fit: contain;
      }
      
      .marken-grid img:hover {
        transform: scale(1.05);
      }

      /* KONTAKT FÜR SORTIMENT UND SERVICE HTML */

      .geraete-kontakt {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        margin-top: 3rem;
        background-color: #f5f9ff;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
      }

      #antenne .geraete-kontakt {
        max-width: 500px;
        margin: 0 auto;
      }

      .kontakt-box {
        flex: 1 1 300px;
        max-width: 400px;
        background-color: white;
        padding: 1.5rem;
        border-radius: 8px;
        border-left: 4px solid #0056b3;
        box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
      }

      .kontakt-box h4 {
        color: #0056b3;
        margin-bottom: 0.8rem;
      }

      #antenne .kontakt-box h4 {
        text-align: center;
      }

      .kontakt-box p {
        font-size: 1rem;
        color: #333;
        line-height: 1.6;
      }

      .kontakt-box a {
        color: #0056b3;
        text-decoration: none;
      }

      .kontakt-box a:hover {
        text-decoration: underline;
      }
      

      @media (width <= 768px) {
        .marken-grid img {
          max-height: 60px;
        }
      }
      
      /* MOBILFREUNDLICHES CSS FÜR SORTIMENTSSEITE */

      @media (max-width: 768px) {
        .sortiment-banner {
          margin-top: -70px;
        }
      }

      @media (width <= 768px) {
      /* Allgemein */
      .sortiment-section {
        padding: 1.5rem 1rem;
      }

      .sortiment-section h2,
      .sortiment-block h3,
      .splide .sortiment-h2 {
        font-size: 1.5rem;
      }

      .sortiment-section p,
      .sortiment-block p,
      .sortiment-section .allgemein-service,
      .sortiment-block .service-text {
        font-size: 1rem;
        line-height: 1.6;
        padding: 0 0.5rem;
      }

      /* Kachel-Menü */
      .kachel-menu {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
      }

      .kachel {
        width: 100%;
        max-width: 300px;
        height: auto;
        padding: 1rem;
      }

      /* Spalten in Listen auf 1 reduzieren */
      .sortiment-liste ul {
        columns: 1;
        padding-left: 1rem;
        font-size: 1rem;
      }

      /* Markenlogos verkleinern */
      .marken-grid {
        gap: 1.5rem;
      }

      .marken-grid img {
        max-width: 120px;
        max-height: 50px;
      }

      /* Kontaktboxen untereinander */
      .geraete-kontakt {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem;
      }
    
      .kontakt-box {
        width: auto;
        padding: 0 1rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
      }
    
      .kontakt-box h4 {
        font-size: 1.05rem;
        margin-bottom: 0.5rem;
        color: #005baa;
        text-align: center;
        line-height: 1.3;
      }
    
      .kontakt-box p {
        margin: 0.2rem 0;
        font-size: 0.95rem;
        color: #333;
        text-align: center;
        line-height: 1.4;
        word-break: break-word;
      }
    
      .kontakt-box a {
        color: #005baa;
        text-decoration: none;
        word-break: break-word;
      }
    
      .kontakt-box a:hover {
        text-decoration: underline;
      }

      /* Slider-Anpassung */
      .splide__slide img {
        max-height: 50px;
        max-width: 120px;
      }

      .splide .solid-divider {
        width: 100px;
      }

      /* Banner-Bilder */
      .sortiment-banner img,
      .lager-banner img,
      .service-banner img {
        object-fit: cover;
        object-position: center;
        max-height: 200px;
      }

      /* Schriftabstände optimieren */
      .sortiment-section h2,
      .sortiment-block h3 {
       margin-bottom: 1rem;
      }

      .sortiment-section .allgemein-service {
        margin-top: 2rem;
        margin-bottom: 0;
      }
      }

      @media (width <= 768px) {
        .service-banner img {
          max-height: 250px;
        }
      }

      /* STELLENANGEBOTE.HTML */

      .job-section {
        padding: 4rem 1rem;
        background-color: #fdfdfd;
        margin-top: -65px;
      }

      @media (max-width: 768px) {
        .job-section {
          margin-top: -100px;
        }
      }
      
      .job-section .container {
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .section-title-blue {
        color: #0056b3;
        font-size: 2rem;
        margin-bottom: 2rem;
        text-align: center;
      }
      
      .job-card {
        background-color: #f7f9fc;
        border-left: 4px solid #0070d1;
        padding: 2rem;
        border-radius: 8px;
        margin-bottom: 3rem;
      }
      
      .job-card h3 {
        font-size: 1.4rem;
        color: #333;
        margin-bottom: 0.5rem;
      }
      
      .job-card h4 {
        font-size: 1.1rem;
        color: #555;
        margin-bottom: 1rem;
      }
      
      .job-subsection {
        margin-top: 1.5rem;
      }
      
      .job-subsection ul {
        padding-left: 1.5rem;
        margin-top: 0.5rem;
      }
      
      .job-subsection li {
        margin-bottom: 0.4rem;
        line-height: 1.5;
      }
      
      .job-subsection em {
        font-style: italic;
      }
      
      .job-subsection a {
        color: #0056b3;
        text-decoration: none;
      }
      
      .job-subsection a:hover {
        text-decoration: underline;
      }

      /* NEWS.HTML */

      .news-divider {
        border: none;
        border-top: 2px solid #007bc1; /* kräftiges Blau */
        margin: 1.5rem 0; /* Abstand ober- und unterhalb */
      }

      .news-section {
        padding: 4rem 1rem;
        background-color: #f8f9fc;
        margin-top: -70px;
      }

      @media (max-width: 768px) {
        .news-section {
          margin-top: -90px;
        }
      }
      
      .news-section .container {

        max-width: 1200px;
        margin: 0 auto;
      }
      
      .news-title {
        font-size: 2rem;
        color: #0056b3;
        margin-bottom: 2rem;
        text-align: center;
      }

      .news-block .highlight-blue {
        color: #0056b3;
        font-size: 1.1rem;
      }

      .news-block .highlight-grey {
        color: 
        #333
        ;
      }
      
      .news-block {
        padding: 1.5rem;
        margin-bottom: 2rem;
        border-radius: 0;
      }
      
      .news-block h3 {
        margin-top: 0;
        color: #333;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
      }
      
      .news-block p {
        margin-bottom: 0.5rem;
        color: #555;
        line-height: 1.6;
      }
      
      .news-block strong {
        font-weight: 600;
        color: #111;
      }
      
      .news-block em {
        font-style: italic;
        color: #007bc1;
      }
      
      .news-block a {
        color: #007bc1;
        font-weight: 500;
        text-decoration: none;
      }
      
      .news-block a:hover {
        text-decoration: underline;
      }
      
      .news-image-row {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-top: 1.5rem;
      }
      
      .news-image-row img {
        max-width: 150px;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
      }
      
      .news-image-row .text {
        flex: 1;
        color: #444;
      }

      .news-prospekt {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-top: 2rem;
        flex-wrap: wrap;
      }
      
      .news-prospekt img {
        width: 180px;
        height: auto;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
      }
      
      .news-prospekt .prospekt-text {
        flex: 1;
        font-size: 1rem;
        color: #333;
        line-height: 1.6;
      }
      
      .news-prospekt .prospekt-text a {
        color: #0056b3;
        text-decoration: none;
        font-weight: 600;
      }
      
      .news-prospekt .prospekt-text a:hover {
        text-decoration: underline;
      }

      .news-logos img {
        height: 50px;
      }

      .news-logos span a {
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-weight: 600;
        font-size: 1rem;
        color: #666;
        text-decoration: none;
      }
      
      .news-logos span a:hover {
        color: #007bc1;
        text-decoration: underline;
      }
      
      .news-logos {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem;
      }
      
      @media (width <= 768px) {
        .news-image-row {
          flex-direction: column;
          align-items: flex-start;
        }
      
        .news-image-row img {
          width: 100%;
          max-width: 300px;
        }
      }

      /* SCHULUNGEN.HTML */

      .schulungen-section {
        padding: 4rem 1rem;
        background-color: #fff;
        margin-top: -60px;
      }

      @media (max-width: 768px) {
        .schulungen-section {
          margin-top: -100px;
        }
      }
      
      .schulungen-section .container {
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
      }
      
      .section-title-blue {
        font-size: 2rem;
        color: #0056b3;
        margin-bottom: 1rem;
        text-align: center;
      }

      .section-title-blue-mobile {
        display: none;
      }

      .section-title-blue-zubehoer {
        font-size: 2rem;
        color: #0056b3;
        margin-bottom: 1rem;
        text-align: center;
      }

      @media (max-width: 768px) {
      .section-title-blue-zubehoer {
        display: none;
      }

        .section-title-blue-mobile {
        display: block;
        font-size: 2rem;
        color: #0056b3;
        margin-bottom: 1rem;
        text-align: center;
      }
      }
      
      .schulungen-divider {
        border: none;
        border-top: 1px solid #0056b3;
        margin: 2rem 0;
      }
      
      .schulungen-subtext {
        font-size: 1rem;
        color: #666;
        text-align: left;
        line-height: 1.6;
      }
      
      .logos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 2rem;
        place-items: center center;
        margin-top: 2rem;
      }
      
      .logos-grid img {
        max-width: 180px;
        height: auto;
        transition: transform 0.2s ease;
      }
      
      .logos-grid a:hover img {
        transform: scale(1.05);
      }

      .schulungs-termin-box {
        background-color: #f4f8fc;
        padding: 1.5rem;
        margin: 2rem 0;
        border-left: 5px solid #007bc1;
        border-radius: 8px;
        
      }
      
      .schulungstermine-liste {
        list-style-type: none;
        padding-left: 0;
        font-size: 1rem;
      }
      
      .schulungstermine-liste li {
        margin-bottom: 1rem;
      }
      
      .schulungstermine-liste a {
        color: #007bc1;
        text-decoration: underline;
      }
      
      .schulungstermine-liste a:hover {
        color: #005b8c;
      }

      .schulungsliste {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      .schulung {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f7f7f7;
        padding: 1rem 2rem;
      }
      
      .schulung > div {
        margin-right: 2rem;
        color: #555;
      }
      
      .schulung-datum {
        font-weight: bold;
        color: #0056b3; 
      }
      
      .schulung-btn {
        background: #0056b3; 
        color: #fff;
        text-decoration: none;
        padding: 0.75rem 1.5rem;
        clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);
        transition: background 0.3s ease;
      }
      
      .schulung-btn:hover {
        background: #036; /* dunkleres Grün beim Hover */
      }

      .schulung-text a {
        color: #0056b3;
        text-decoration: none;
      }

      .schulung-text {
        width: 800px;
        margin: 0 auto;
        margin-top: 2rem;
        margin-bottom: 5rem;
      }
      
      @media (width <= 768px) {
        .schulung {
          flex-direction: column;
          align-items: flex-start;
        }

        .schulung > div {
          margin: 0.25rem 0;
        }

        .schulung-btn {
          margin-top: 1rem;
        }

        .schulung-text {
          width: auto;
        }
      }

      /* PHOTOVOLTAIKMODULE */

      .highlight-blue {
        color: #0056b3;
        font-weight: 600;
      }

      .pv-intro-text {
        max-width: 800px;
        margin: 0 auto 20px;
        font-size: 1.1rem;
        line-height: 1.6;
        color: #333;
        text-align: center;
      }
      
      .pv-intro-list {
        list-style: none;
        padding: 0;
        margin: 0 auto 20px;
        max-width: 600px;
        text-align: center;
      }
      
      .pv-intro-list li {
        position: relative;
        margin-bottom: 10px;
        font-size: 1.05rem;
      }
      
      .pv-intro-list li::before {
        content: "✔";
        color: #0056b3;
        font-weight: bold;
        position: relative;
      }

      .modul-banner {
        width: 100%;
        height: auto;
        margin-bottom: 2rem;
        display: block;
        object-fit: cover;
      }
      

      .modul-content {
        margin-top: -20px;
      }

      @media (max-width: 768px) {
        .modul-content {
          margin-top: 0px;
        }

        .modul-hero
        .modul-banner {
          margin-top: -60px;
          padding-bottom: 15px;
        }

        .pv-header
        .container {
          margin-top: 10px;
        }

      }

      .modul-content .container .licht-divider {
        max-width: 600px;
        margin: 0 auto;
        margin-bottom: 2rem;
        margin-top: 1.5rem;
      }
      
      .pv-marken-section {
  background-color: #ffffff; /* Weißer Hintergrund */
  padding: 1rem 0;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.marken-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  flex-wrap: wrap;
  margin-bottom: 0rem;
  margin-top: 0rem;
}

.marken-logos-wechselrichter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  flex-wrap: wrap;
  margin-bottom: 0rem;
  margin-top: 0rem;
  padding: 1.5rem 0;
}

.marken-logos-wechselrichter img {
  height: auto;
  max-width: 160px;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.marken-logos-wechselrichter img:hover {
  transform: scale(1.08);
}

.marken-logos-zubehoer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  flex-wrap: wrap;
  margin-bottom: 0rem;
  margin-top: 0rem;
  padding: 1.5rem 0;
}

.marken-logos-zubehoer img {
  height: auto;
  max-width: 190px;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.marken-logos-zubehoer img:hover {
  transform: scale(1.08);
}

.marken-logos img {
  height: 200px; /* Logos deutlich größer */
  max-width: 300px;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
}


.marken-logos img:hover {
  transform: scale(1.08);
}

.marken-logos
.logo-byd img {
  height: 90px;
  max-width: 200px;
}

.marken-logos-wechselrichter
.logo-sma img {
  height: auto;
  max-width: 100px;
}

.pv-katalog-anfrage {
  margin-top: 2rem;
}

.pv-katalog-anfrage p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #333;
}

.pv-button-anfragen-module {
  display: inline-block;
  background-color: #0056b3;
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.pv-button-anfragen-module:hover {
  background-color: #003f80;
}

.pv-katalog-anfrage
.container {
  padding-bottom: 3rem;
}

      /* VERGUETUNGEN.HTML */

      .eeg-verguetung {
        padding: 2rem 1rem;
        background-color: #f8f9fc;
      }
      
      .eeg-verguetung .container {
        max-width: 1000px;
        margin: 0 auto;
      }
      
      .eeg-verguetung table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
        margin-bottom: 2rem;
      }
      
      .eeg-verguetung th,
      .eeg-verguetung td {
        border: 1px solid #707070;
        padding: 0.5rem 0.75rem;
        text-align: left;
      }
      
      .eeg-verguetung thead th {
        background-color: #e8f1f9;
        font-weight: bold;
      }
      
      .eeg-verguetung .eeg-hinweis {
        font-size: 0.85rem;
        color: #555;
        line-height: 1.6;
      }

      .eeg-hinweis {
        font-style: italic;
        color: #555;
        margin-top: -1.5rem;    /* Abstand zur oberen Tabelle */
        margin-bottom: 3rem; /* Abstand zur unteren Tabelle */
        line-height: 1.5;
        font-size: 0.95rem;
      }

      /* DATENSCHUTZ.HTML */

      .legal-section {
        padding: 4rem 1rem;
        background-color: #fdfdfd;
        color: #333;
        font-family: 'Fira Sans', sans-serif;
        line-height: 1.8;
        margin-top: -80px;
      }

      @media (max-width: 768px) {
        .legal-section {
          margin-top: -100px;
        }
      }
      
      .legal-section .container {
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .legal-section h1 {
        color: #0066b2;
        font-size: 2rem;
        margin-bottom: 1.5rem;
      }
      
      .legal-section h2 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
        color: #005999;
      }
      
      .legal-section h3 {
        font-weight: 600;
        margin-top: 1.8rem;
        font-size: 1.1rem;
      }
      
      .legal-section p {
        margin-bottom: 1.2rem;
      }
      
      .legal-section ul {
        margin-left: 1.5rem;
      }
      
      .legal-section ul li {
        margin-bottom: 0.8rem;
      }

      .legal-section h3 {
        margin-bottom: -1rem;
      }

      .indent {
        margin-left: 2rem;
      }

      /* IMPRESSUM.HTML */

      .impressum-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 3rem 1rem;
        padding-top: 240px;
        font-family: 'Fira Sans', sans-serif;
        color: #333;
        line-height: 1.6;
        background-color: #fff;
        margin-top: -110px;
      }

      @media (max-width: 768px) {
        .impressum-container {
          margin-top: -170px;
        }
      }
      
      .impressum-container h1 {
        color: #0066b3;
        font-size: 2rem;
        margin-bottom: 1.5rem;
        font-weight: 700;
      }
      
      .impressum-container strong {
        font-weight: 600;
      }
      
      .impressum-container .abschnitt {
        margin-bottom: 2rem;
      }
      
      .impressum-container .eingerueckt {
        margin-left: 1.5rem;
        font-size: 0.95rem;
        color: #444;
      }
      
      .impressum-container a {
        color: #0066b3;
        text-decoration: none;
      }
      
      .impressum-container a:hover {
        text-decoration: underline;
      }
      
      .impressum-container hr {
        border: none;
        border-top: 1px solid #bbb;
        margin: 3rem 0 2rem;
      }

      /* Responsive Anpassung für Mobilgeräte */
      @media (width <= 768px) {
        .subbar-flex {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
      }

      .shop-button {
        align-self: flex-start;
      }
      }

      @media (width <= 768px) {
        .info-box {
          flex: 1 1 100%;  /* Boxen untereinander statt nebeneinander */
          margin-bottom: 1rem;
        }
      
        .hero-content h2 {
          font-size: 2.1rem;
        }
      
        .brand-slider img {
          height: 70px;
        }
      
        .unsere-marken h2 {
          font-size: 2rem;
        }
      
        .container {
          padding: 0 1rem; /* weniger Außenabstand auf kleineren Geräten */
        }
        
        .bihler-business-areas {
          display: none;
        }
      }

@media (max-width: 768px) {
  .marken-logos-wechselrichter {
    flex-direction: column;
    gap: 2.5rem;
  }

  .marken-logos-wechselrichter a img {
    height: 60px;
    max-width: 70%;
  }
}

@media (max-width: 768px) {
  .marken-logos {
    flex-direction: column;
    gap: 2.5rem;
  }

  .marken-logos a img {
    height: 60px;
    max-width: 70%;
  }
}

@media (max-width: 768px) {
  .marken-logos-zubehoer {
    flex-direction: column;
    gap: 2.5rem;
  }

  .marken-logos-zubehoer a img {
    height: 60px;
    max-width: 70%;
  }
}