/* Allgemeine Stile */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}

/* Header */
#header {
    background: #fff; /* Weißer Hintergrund */
    color: #555; /* Graue Schrift */
    padding: 0.5vw 0vw 2.3vw 16.5vw; /*oben, rechts, unten, links*/
    display: flex; /* Flexbox für Layout */
    justify-content: space-between; /* Elemente verteilen */
    align-items: center; /* Vertikale Zentrierung */
    font-family: Helvetica, Arial, sans-serif; /* Schriftart */
    position: fixed;
    z-index: 1002;
    top: 0vw;
    left: 0vw;
    right: 0vw;
}

#header .logo {
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikale Zentrierung von Logo und Text */
    gap: 0vw; /* Abstand zwischen Logo und Text */
}

#header .logo h1 {
    margin: 0;
    font-size: 1.5em; /* Schriftgröße für den Titel */
    line-height: 2.3; /* Reduziert den Zeilenabstand */
}

.logo-img {
    width: 7vw; /* Breite des Logos */
    height: auto; /* Höhe proportional zur Breite */
}

#header nav {
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    display: flex; /* Flexbox aktivieren */
    justify-content: flex-start; /* Navigation weiter nach links ausrichten */
    align-items: center; /* Zentriert die Navigation vertikal */
    margin-left: 5.5vw; /* Zusätzlicher Abstand vom Logo */
}

#header nav ul {
    list-style: none; /* Entfernt Aufzählungszeichen */
    margin: 0;
    padding: 0;
    display: flex; /* Flexbox für Navigation */
    gap: 2vw; /* Abstand zwischen Links */
}

#header nav ul li a {
    color: #555; /* Weißer Text für Links */
    text-decoration: none; /* Entfernt Unterstreichung */
    font-weight: bold; /* Fettschrift */
}

.subtext {
    font-size: 0.7.3vw; /* Kleinere Schriftgröße */
    color: #de800e; /* Dezente Farbe */
    margin-top: -0.15vw; /* Abstand nach oben reduzieren */
    line-height: 0.5vw; /* Reduziert den Zeilenabstand */
    font-weight: normal; /* Normalgewicht für den Text */
    font-family: Helvetica, Arial, sans-serif; /* Gleiche Schriftart wie der Header */
      font-style: italic; /* 🔸 macht den Text kursiv */

}

/* Header Button */
.header-button {
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: #fff; /* Weißer Text */
    background: #777; /* Grauer Hintergrund, immer sichtbar */
    padding: 0.5vw 0.8vw; /* Innenabstand für den Button */
    border-radius: 0.5em; /* Weniger abgerundete Ecken */
    font-size: 0.9em; /* Schriftgröße */
    transition: background 0.3s ease; /* Animation für Hover-Effekt */
    display: inline-block; /* Stellt sicher, dass der Button korrekt angezeigt wird */
    border: none; /* Entfernt Standardrahmen */
    position: absolute;
    right: 16vw; /* Abstand vom rechten Rand des Headers */
}

.header-button:hover {
    background: #999; /* Hellerer Hintergrund beim Hover */
}

.header-button:active {
    transform: scale(0.95); /* Leicht kleiner beim Drücken */
}
/* Hauptinhalt */
main {
    padding: 0vw;
}

section {
    margin-bottom: 2.5vw;
}

section h2 {
    color: #0078d7;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 0vw;
  text-decoration: none;
  color: inherit;
}

.logo-link .subtext {
  font-style: italic;
}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////  Hero Section */
/* Hero Section */
#hero-section {
    margin-top: 9.3vw;
    position: relative;
    text-align: center;
    width: 100%;
    margin-left: calc(-50vw + 50%);
}

.hero-container {
    position: relative;
    width: 100.4%;
    height: 37vw;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0vw;
    left: 0vw;
    right: 0vw;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* nur das erste Bild anpassen */
.hero-slide:first-child .hero-image {
  object-position: center 30%; /* x = Mitte, y = 30% nach unten verschoben */
}

/* Hero Text Container */
.hero-text-container {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    background-color: #555;
    color: white;
    padding: 1.5vw;
    border-radius: 0.5em;
    max-width: 35vw;
    padding-top: 0.5vw;
    padding-bottom: 2vw;
    z-index: 1;
    opacity: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Mehr erfahren Button */
.more-info-btn {
    position: relative;
    bottom: -1vw; /* Abstand vom unteren Rand */
    left: 0vw; /* Abstand vom linken Rand */
    padding: 0.7vw 0.6vw; /* Innenabstand für den Button */
    background-color: #ff8800; /* Orange Hintergrund */
    color: white; /* Weiße Schrift */
    border: none; /* Entfernt den Rahmen */
    border-radius: 0.5em; /* Abgerundete Ecken */
    font-size: 0.8vw; /* Schriftgröße */
    cursor: pointer; /* Zeigt einen Zeiger, wenn man mit der Maus darüber fährt */
    transition: background-color 0.3s ease; /* Sanfter Übergang beim Hover */
    z-index: 2; /* Damit der Button über dem Text liegt */
     text-decoration: none;
}

.more-info-btn:hover {
    background-color: #af6005; /* Dunkleres Orange bei Hover */
}

.hero-pneumatik .more-info-btn {
    margin-top: -5.5vw; /* Reduziert zusätzlichen oberen Abstand */
}

.more-info-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 .15em .35em rgba(0,0,0,.2);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////// Steuerstriche (Buttons) */
/* Steuerbuttons im Textcontainer */
.hero-controls {
    position: absolute;
    bottom: 1em;              /* vorher 10 → jetzt relativ zur Schriftgröße */
    left: 50%;                /* Zentriert */
    transform: translateX(-50%);
    display: flex;
    gap: 1em;                 /* Abstand zwischen Buttons, vorher 1x */
    z-index: 2;
}

.control-button {
    width: 1.5vw;               /* vorher 30 → jetzt an Bildschirmbreite angepasst */
    height: 0.35em;            /* vorher 5 → jetzt relativ zur Schriftgröße */
    background-color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.control-button:hover {
    background-color: #ff8800;
}

.control-button.active {
    background-color: #ff8800;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////// Bilder Pfeile */

.hero-prev,
.hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2vw;       /* Größe der Pfeile */
  color: #555;          /* graue Farbe */
  background: none;     /* kein Hintergrund */
  border: none;
  cursor: pointer;
  z-index: 5;
  padding: 0;           /* kein zusätzlicher Abstand */
}

.hero-prev {
  left: 1vw;   /* Abstand vom linken Rand */
}

.hero-next {
  right: 1vw;  /* Abstand vom rechten Rand */
}

/* Hover-Farbe orange */
.hero-prev:hover,
.hero-next:hover {
  color: #ff8800;
    font-size: 2.1vw; 
}

.hero-prev:active,
.hero-next:active {
  transform: translateY(-50%) scale(0.9); /* kleiner beim Klick */
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////Text Styles */
.hero-text-container h3 {
    margin-top: 0.3em;
    margin-bottom: 0.5em;
    white-space: pre-line;
    font-size: clamp(1.2em, 1.7vw, 1.8em); /* min, dynamisch, max */

}

.hero-text-container p {
    margin: 0;
    font-size: 1em;            /* vorher  */
    line-height: 1.6;
    white-space: pre-line;
}

.hero-button {
    display: inline-block;
    margin-top: 1em;           /* vorher 1rm */
    padding: 0.5em 1em;        /* vorher 0.5em 1re */
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    border: 0.15em solid #fff; /* vorher 
    border-radius: 0.3em;      /* vorher */
    font-size: 1em;            /* vorher 1rm */
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-button:hover {
    background-color: #666;
    transform: scale(1.05);
}

  
  /*////////////////////////////////////////////////////////////////////////////////////////////////////////// Über uns Section */
/* --- ABOUT SECTION --- */
#about-section {
  background-color: #f9f9f9;
  padding: 2vw 10vw;
  color: #333;
  line-height: 1.6;
  text-align: center; /* Alles zentrieren */
}

#about-section h3 {
  text-align: center;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #333;
}

.orange-text {
  color: #555;
  display: block;
  margin-bottom: -1.5vw; /* 🔸 mehr Abstand nach unten */
}

.subtitle {
  color: #555;
  display: block;
  font-size: 0.9em;
}
/* === Fenster für den Transform-Slider (kein Scrollbar) === */
.about-slider {
  position: relative;
  overflow-x: hidden;   /* statt scroll */
  overflow-y: hidden;
  width: 100%;
  margin: 2em 0 1em;
  padding: 0.3em 0;
  touch-action: pan-y;  /* Seite darf vertikal scrollen */
}

/* .about-scroll wird NICHT gebraucht – ganzen Block entfernen */

/* === Band mit Karten (ein Track, bewegt per translate3d) === */
.about-track {
  display: inline-flex;        /* Breite = Summe der Karten */
  align-items: stretch;
  will-change: transform;
  cursor: grab;                /* fürs Drag-Feedback */
}
.about-track.is-dragging { cursor: grabbing; }

/* === Karten (Bubbles) === */
.about-bubble {
  flex: 0 0 clamp(15em, 28vw, 22.5em);
  background: #fff;
  border: 0.15vw solid #ff8800;
  border-radius: 1vw;
  padding: 2em;
  margin-right: 2em;           /* Abstand zwischen Karten */
  box-shadow: 0 1vw 0.8em rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 0;

  /* stabilere Schrift */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.about-bubble:last-child { margin-right: 0; }

/* Hover: leichtes „Anheben“ */
.about-bubble:hover {
  transform: translateY(-0.25em);
  box-shadow: 0 0.5em 1.125em rgba(0,0,0,0.12);
  z-index: 1;
}

/* Beim Drag: Hover-Translate ausschalten (Shadow bleibt) */
.about-track.is-dragging .about-bubble:hover {
  transform: none;
  box-shadow: 0 0.5em 1.125em rgba(0,0,0,0.12);
}

/* Während Drag keine Textauswahl */
.about-track.is-dragging .about-bubble,
.about-track.is-dragging .about-bubble * {
  user-select: none;
}

/* Bewegungsreduktion (optional; hier hat sie keinen Effekt auf transform) */
@media (prefers-reduced-motion: reduce) {
  /* kein auto-Scrolling hier; Autoplay steuerst du im JS */
}


/* --- Abschlusszitat --- */
.about-divider {
  margin: 3em auto;
  width: 40%;
  border: none;
  border-top: 1px solid #ccc;
}

.about-quote {
  text-align: center;
  font-size: 1.3rem;
  color: #ff8800;
  font-weight: 400;
  margin-top: 2em;
}


/*///////////////////////////////////////////////////////////////////////////////////////////////////////////  Page Title */
.page-title {
    text-align: left; /* Text linksbündig */
    font-size: 0.55vw; /* Kleinere Schriftgröße */
    color: #555; /* Textfarbe */
    font-weight: normal; /* Kein Fettdruck */
    font-family: Arial, Helvetica, sans-serif; /* Schriftart */
    position: fixed; 
    margin-top: 8.85vw;
    margin-left: 1.8vw; 
}

.page-title-link {
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: inherit; /* Übernimmt die Textfarbe der Umgebung */
}

.header-divider {
    position: fixed;
    top: 6.6vw; /* exakt unter deinem fixierten Header */
    left: 51vw;
    transform: translateX(-50%); /* exakt horizontal zentrieren */
    width: 0vw; /* Startbreite für die Animation */
    height: 0.008vw;
    border: none;
    border-top: 0vw solid #555;
    background: #555; /* Optional, für saubere Darstellung */
    z-index: -1; 
    animation: expandLine 1s ease-out forwards;
}

@keyframes expandLine {
    0% {
        width: 0; /* Anfangszustand: keine Breite */
    }
    100% {
        width: 75%; /* Endzustand: volle Breite */
    }
}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// Cookie Banner */
.cookie-banner {
    position: fixed;
    top: 50%; /* Zentriert vertikal */
    left: 50%; /* Zentriert horizontal */
    transform: translate(-50%, -50%); /* Perfekte Zentrierung */
    width: 700px; /* Breite des Banners */
    max-height: 80vh; /* Maximale Höhe, damit es nicht den gesamten Bildschirm einnimmt */
    overflow-y: auto; /* Scrollbar, falls der Text zu lang ist */
    background-color: #333; /* Dunkler Hintergrund */
    color: #fff; /* Weißer Text */
    padding: 1.5rem; /* Innenabstand */
    text-align: left; /* Text linksbündig */
    z-index: 1000; /* Überlagert andere Inhalte */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für ein modernes Design */
    border-radius: 10px; /* Abgerundete Ecken */
    display: block; /* Stellt sicher, dass das Banner sichtbar ist */
}

.cookie-banner h3 {
    margin-top: 0;
    font-size: 1.2rem; /* Größere Schriftgröße für den Titel */
    color: #ff8800; /* Orangefarbener Titel */
}

.cookie-banner p {
    margin: 1rem 0; /* Abstand zwischen den Absätzen */
    font-size: 0.9rem; /* Schriftgröße */
    line-height: 1.5; /* Bessere Lesbarkeit */
}

.cookie-icon {
    position: absolute;
    top: 10px; /* Abstand vom oberen Rand */
    right: 10px; /* Abstand vom rechten Rand */
    width: 80px; /* Breite des Icons */
    height: auto; /* Höhe proportional zur Breite */
}

.cookie-divider {
    border: none; /* Entfernt Standardrahmen */
    border-top: 1px solid #555; /* Dezenter grauer Strich */
    margin: 1rem 0; /* Abstand um den Strich */
}

.cookie-button {
    margin: 0.5rem; /* Abstand zwischen den Buttons */
    padding: 0.5rem 1rem;
    background-color: #de800e; /* Orangefarbener Hintergrund */
    color: #fff; /* Weißer Text */
    border: none;
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer;
    font-size: 0.9rem;
}

.cookie-button:hover {
    background-color: #de800e; /* Etwas dunklerer Orange-Ton beim Hover */
}


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
/* === DROPDOWN NAVIGATION (komplett) ===
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Container des Dropdowns */
.dropdown {
  position: relative;
  /* wichtig, damit nichts abgeschnitten wird */
  overflow: visible;
}

/* Trigger-Button (falls du Hover-Styles willst, ergänz hier) */
.dropdown-button {
  text-decoration: none;
  font-weight: bold;
  color: #555;
  cursor: pointer;
}

/* Menübox */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: -18vw;                  /* deine Ausrichtung */
  min-width: 60vw;              /* deine Breite */
  background: #555;
  border: 0;
  border-radius: .5em;
  box-shadow: 0 4vw 6vw rgba(0,0,0,.1);
  z-index: 2000;

  /* Layout */
  display: flex;
  flex-wrap: wrap;

  /* Sichtbarkeit (per Klick über .active) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;

  /* langes Menü: scrollbar statt Abschneiden */
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: visible;
}

/* Dropdown sichtbar, wenn .active am Container hängt */
.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Flex-Spacer: sorgt unabhängig vom Content für „Bodenluft“ */
.dropdown-menu::after {
  content: "";
  display: block;
  flex: 0 0 100%;               /* neue Zeile über volle Breite */
  pointer-events: none;
}

/* Spalten-Elemente */
.dropdown-menu li {
  width: 30%;                    /* 3 Spalten */
  margin: 0;
  padding-left: 3vw;             /* leichter Innenabstand statt margin-left auf Items */
  padding-top: 1.5vw;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Überschriften je Spalte */
.dropdown-menu .section-heading {
  display: block;
  margin: 0 0 .8vw 0;            /* Luft unter der Überschrift */
  padding: 0;
  font-weight: bold;
  font-size: 1.2vw;
  color: #de800e !important;
  text-align: left;
  cursor: pointer;
}

/* Produktlisten-Container */
.product-list {
  display: block;
  margin: 0;
  padding: 0;
}

/* Produktlinks */
.dropdown-menu .product-list a {
  display: block;
  position: relative;
  margin: .4vw 0;                /* vertikaler Abstand */
  padding-left: 1.2vw;           /* Platz für Pfeil */
  color: #fff !important;
  text-decoration: none;
  font-size: 0.9rem;             /* lesbarer als 0.7vw */
}

/* Pfeil vor Produktlinks */
.product-list a::before {
  content: "→";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 0.8vw;
  color: #de800e;
}

/* Beschreibung ausblenden (falls vorhanden) */
.dropdown-menu .section-description { display: none; }

/* Hover-Effekt (optional dezent) */
.product-list a:hover { background: transparent; }

/* --- Problematische alte Offsets sicher neutralisieren --- */
.dropdown-menu .section-heading,
.dropdown-menu .product-list a,
.product-list a {
  margin-left: 0 !important;     /* alte 3vw links neutralisieren */
  left: 0 !important;
  top: 0 !important;
}

.product-list a:hover {
  padding-left: 1.5vw;         /* sanft nach rechts rücken */
}



  /* /////////////////////////////////////////////////////////////////////////////////////////////////////////// === WUSSTEN SIE SCHON? SECTION === */

#didyouknow-section {
    padding: 1.5vw 0vw;
    background-color: #ffffff;
}

.didyouknow-container {    
    margin-left: 10vw;          /* Stattdessen linksbündig mit Abstand */
    text-align: center;
    margin-top: -2vw;
}

#didyouknow-section h2 {
    font-size: 3em;
    color: #555555;
    margin-bottom: 0vw;
    margin-right: 11vw;
}

#didyouknow-section p {
    font-size: 1.1em;
    line-height: 2;
    color: #333;
    margin-left: 19vw;
    max-width: 40vw;
    text-align: center;
}

html {
  scroll-behavior: smooth;
}

.btn-mehr {
  display: inline-block;
  padding: 0.5vw 0.6vw;
  font-size: 0.8vw;         /* Schriftgröße skaliert mit Breite */
  background-color: #ff8800;
  color: #fff;
  text-decoration: none;
  border-radius: 0.5vw;     /* abgerundet in VW */
  font-weight: 500;
  transition: background-color 0.3s ease;
  margin-right: 11.5vw;
  margin-top: 1vw;
}

.btn-mehr:hover {
  background-color: #af6005;
}

.btn-mehr:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 .15em .35em rgba(0,0,0,.2);
}

#didyouknow-section {
  position: relative;
  overflow: visible;
}

.footer-email-link {
  color: inherit;             /* übernimmt die Textfarbe vom umgebenden Text */
  text-decoration: none;      /* entfernt Unterstreichung */
  cursor: pointer;            /* zeigt Klickbarkeit an */
}

.footer-email-link:hover {
  color: inherit;             /* keine Farbänderung beim Hover */
  text-decoration: none;      /* bleibt ohne Unterstrich */
}


  /* /////////////////////////////////////////////////////////////////////////////////////////////////////////// === MEDIA === */