.page-heading {
  font-size: 2.2em;
  margin-top: 10vw;
  margin-left: 12vw;
  text-align: left;
  color: #de800e;
}

.page-subheading {
  font-size: 1.7em;     /* etwas kleiner als die Hauptüberschrift */
  margin-top: -1.5vw;
  margin-bottom: -2vw;
  margin-left: 12vw;
  text-align: left;   /* mittig */
  color: #444;          /* etwas helleres Grau */
  font-weight: normal;  /* dezenter als h2 */
}

/* //////////////////////////////////////////////////////////////////////////////////////////////// Footer Space */


.footer-spacer-grundlagenelektrotechnik {
  height: 7vw;  /* Abstand in Höhe */
}

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt Linie */

.product-line {
  border: none;            /* Standard-Styling entfernen */
  border-top: 1px solid #333; /* feine graue Linie */
  margin-bottom: -3vw;
  margin-top: -3.5vw;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt Beginn */

.product {
  display: flex;          /* Bild links, Text rechts */
  align-items: flex-start;
  margin: 4vw 3vw;          /* Abstand zwischen Produkten */
}

.product-image img {
  width: 15vw;            /* Bildbreite relativ zum Viewport */
  height: auto;           /* Seitenverhältnis beibehalten */
  border-radius: 0.5em;   /* leichte Abrundung */
  margin-right: 10vw;
  margin-top: 0vw;
  margin-left: 3vw;
}
 
.product-info {
  margin-left: -7vw;       /* Abstand zum Bild */
  margin-top: 0.3vw;
  margin-bottom: 0.3vw;
  max-width: 60vw;        /* Textbereich */
}

.product-title {
  font-size: 1.7em;
  margin: 0 0 0.5em 0;
  color: #333;
}

.product-number {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 2em;
  margin-top: -1em;
}

.product-description {
  font-size: 1em;
  color: #444;
  margin-top: -1em;
  margin-left: -0.8em;   /* Einrückung für die Punkte */
}

.product-description li.extra-point {
  list-style-type: none; /* entfernt das Bullet */
  margin-top: 1em;        /* Extra-Abstand nach oben */
  color: #444;
  font-style: italic;     /* (optional) optisch abgesetzt */
  font-size: 1em;
}

.product-actions {
  display: flex;
  justify-content: flex-start;   /* oder flex-end */
  gap: 0.5em;
  margin: 4vw 62vw;              /* Abstand zur Linie */
  margin-top: -6vw;
}

.product-button {
  padding: 0.6em 1.3em;   /* mehr Höhe + mehr Breite */
  font-size: 0.95em;       /* Text größer */

  color: #fff;
  background: #777;
  border-radius: 0.3em;
    border: none;
  text-decoration: none;
  transition: 
      background 0.25s ease,
      transform 0.2s ease,
      box-shadow 0.25s ease;
  display: inline-block;
  cursor: pointer;
}

/* Hover = größer + heller */
.product-button:hover {
  background: #888;
  transform: scale(1.07);         /* → wird größer */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Klick = kleiner + dunkler */
.product-button:active {
  background: #666;
  transform: scale(0.97);         /* → leicht gedrückt */
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}




/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 1 */

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 2 */

/* Container ist *nicht* fullscreen, sondern absolut positioniert */
.popup {
  position: absolute;
  display: none;          /* komplett versteckt im Ruhezustand */
  z-index: 1000;
}

/* sichtbar schalten */
.popup.show { display: block; }

/* das Kasterl selbst */
.popup-content {
  background: #fff;
  border-radius: 0.6em;
  box-shadow: 0 0.6vw 2vw rgba(0,0,0,0.25);
  min-width: 25vw;
  max-width: 28vw;
  padding: 1vw 1.2vw;
  position: relative;

  /* Startzustand für Animation */
  opacity: 0;
  transform: scale(0.85);
  transform-origin: bottom center;   /* wirkt wie „aus dem Button“ */
  transition: transform 0.22s ease, opacity 0.22s ease;

  border: 1px solid #d1d1d1;   /* dezenter grauer Rand */
}

/* Einblenden (öffnet sich aus dem Button) */
.popup.enter .popup-content {
  opacity: 1;
  transform: scale(1);
}

/* Ausblenden (schrumpft wieder in den Button) */
.popup.leave .popup-content {
  opacity: 0;
  transform: scale(0.85);
}

/* Schließen-Button */
.popup-close {
  position: absolute;
  top: 0.4em;
  right: 0.6em;
  background: none;
  border: none;
  font-size: 1.8em;
  line-height: 1;
  cursor: pointer;
  color: #444;
}

.popup-close:hover {
  color: #de800e;      /* orange beim Hover */
  transform: scale(1.15);
}

.popup-subtitle {
  font-size: 1.2em;   /* kleiner als Haupttitel */
  color: #222;
  margin-top: 0vw;
}

.popup-article {
  font-size: 0.8em;   /* klein, dezent */
  color: #666;
  margin-top: -1vw;
}

.popup-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 0.6em 0 1em 0;
}

.popup-list {
  margin: 0.8em 0 0.5em 1.5em; /* etwas Einzug links */
  margin-top: -0.8em;
  padding: 0;
  list-style-type: disc;       /* runde Punkte */
  color: #444;                 /* Textfarbe */
  font-size: 0.95em;           /* etwas kleiner als Standard */
}

.popup-extra {
  margin-top: 0.8em;
  font-size: 0.9em;
  color: #555;
  font-style: italic;
}

/* Nur für das Datenblatt-Popup */
#popup-datenblatt .popup-content {
margin-left: 3vw;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.3vw;              /* Abstand der Buttons */
  margin-top: -1em;     /* Abstand nach oben */
  margin-right: 6.3vw;
}

.popup-actions .popup-no,
.popup-actions .popup-yes {
  padding: 0.4em 1em;      /* Innenabstand */
  border-radius: 0.5em;      /* Eckenrundung */
  font-size: 0.9em;          /* Schriftgröße relativ zum Umfeld */
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.2s ease;
  display: inline-block;
}

.popup-actions .popup-no {
  background: #5e5b5b;
  color: #fff;
}
.popup-actions .popup-no:hover {
  background: #979595;
}

.popup-actions .popup-yes {
  background: #de800e;
  color: #fff;
}
.popup-actions .popup-yes:hover {
  background: #f5a94c;
}

.popup-bubble {
  position: absolute;
  transform: translateX(-50%) translateY(-0.6em); /* mittig über Button */
  background: #28a745;
  color: #fff;
  padding: 0.4em 1em;
  font-size: 0.9em;
  border-radius: 0.5em;
  box-shadow: 0 0.3em 0.8em rgba(0,0,0,0.25);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2000;
}

.popup-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-1.2em); /* sanft nach oben */
}

.popup-bubble.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-0.6em);
}

/* NUR Datenblatt-Popups schmäler machen (alle mit ID-Beginn "popup-datenblatt") */
.popup[id^="popup-datenblatt"] .popup-content {
  width: clamp(0em, 12vw, 17em);
  min-width: 0em;   /* optional – garantiert schmal */
  padding: 1em 1.2em;
  margin-left: 2em;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 3 */

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 4 */

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 5 */


/* Hauptpunkt (Überschrift) ohne Bullet */
.product-description li.no-bullet {
  list-style-type: none;   /* kein Aufzählungszeichen */
  margin-bottom: 0.5em;    /* kleiner Abstand nach unten */
}

/* Unterpunkte wieder dicke normale Punkte */
.product-description li.no-bullet ul {
  list-style-type: disc;   /* Standard-Bullet (dicker Punkt) */
  padding-left: 2em;     /* Einrücken */
}

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 6 */

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 7 */

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 7 - kurzer strich */

.short-line {
  border: none;
  border-top: 1px solid #333;
  width: 60%;       /* kürzer als normale Linie */
}

/* //////////////////////////////////////////////////////////////////////////////////////////////// Aufbauplatten */

.after-product-heading {
  font-size: 1.7em;     /* etwas kleiner als die Hauptüberschrift */
  margin-top: 6.5vw;
  margin-bottom: 3vw;
  margin-left: 12vw;
  text-align: left;   /* mittig */
  color: #444;          /* etwas helleres Grau */
  font-weight: normal;  /* dezenter als h2 */
}

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 8 / A1 */

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 9 / A2 */

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 10 / A3 */

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt 11 / A4 */

/* //////////////////////////////////////////////////////////////////////////////////////////////// Produkt Zoom */

/* 1) KEINE Lupe mehr beim Hover */
.zoomable { cursor: pointer; }  /* oder Regel ganz löschen */

/* 2) Overlay smoother animieren */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  /* Animation: Overlay */
  background-color: rgba(0,0,0,0);
  opacity: 0;
  transition: background-color 0.45s ease, opacity 0.45s ease;
}

.lightbox.is-open { display: flex; }

.lightbox.show {
  background-color: rgba(0,0,0,0.8);
  opacity: 1;
}

/* 3) Bild sanfter: leichter Translate + Scale + Fade */
.lightbox .lightbox-img {
  max-width: 80vw;
  height: auto;
  transform: translateY(1vw) scale(0.94);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1),
              opacity 0.45s cubic-bezier(.22,.61,.36,1);
}

.lightbox.show .lightbox-img {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Close-Button bleibt gleich; optional smoother Hover */
.lightbox-close {
  position: absolute;
  top: 2vw;
  right: 2vw;
  font-size: 2em;
  line-height: 1;
  padding: 0.2em 0.5em;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  border-radius: 0.4em;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); transform: scale(1.03); }

.lightbox-content {
  position: relative; /* Referenz für den Close-Button */
}

.lightbox-close {
  position: absolute;
  top: -2.3vw;        /* Abstand oberhalb vom Bild */
  right: -3vw;      /* Abstand rechts neben dem Bild */
  font-size: 2em;
  line-height: 1;
  padding: 0.2em 0.5em;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  border-radius: 0.4em;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.lightbox-close:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

.lightbox .lightbox-img {
  max-width: 80vw;
  height: auto;
  transform: scale(1);
  transition: transform 0.2s ease;
  cursor: grab;
}

@media (min-width: 1600px) {
  /* Produkt-Seite: die Aktions-Buttons */
  .product-actions {
    /* bisher: margin-top: -6vw; */
    margin-top: -6em;   /* weniger negativ = weiter unten */
  }

  /* Falls du die Slider-Steuerstriche (Punkte) unten haben willst */
  .hero-controls {
    bottom: 2.5em;      /* vorher z.B. 1em */
  }

  /* Optional: Pfeile des Sliders etwas tiefer wirken lassen (größerer Eindruck) */
  .hero-prev,
  .hero-next {
    transform: translateY(-45%); /* vorher -50% → wirkt tiefer */
  }

  /* Falls die Pop-up-Buttons gemeint sind */
  .popup-actions {
    margin-top: 0.5em;  /* von -1em auf +0.5em z.B. */
  }

}

@media (max-width: 1600px) {

    .popup[id^="popup-datenblatt"] .popup-content {
    width: clamp(0em, 15vw, 17em);
}

.popup-actions {
    margin-right: 7.3vw;
}


}




/* -------------------------------------------------------------- */
/* MOBILE VERSION DER PRODUKT-SEITE */
/* -------------------------------------------------------------- */

@media (max-width: 600px) {

  /* Überschriften */
  .page-heading {
    font-size: 2.8em;
    margin-top: 16vw;
    margin-left: 0;
    text-align: center;
    color: #de800e;
  }

  .page-subheading {
    font-size: 1.3em;
    margin-left: 0;
    margin-top: -4vw;
    text-align: center;
  }


  /* -------------------------------------------------------------- */
  /* PRODUKT-KARTE */
  /* -------------------------------------------------------------- */

  .product {
    flex-direction: column;         /* Bild oben */
    align-items: center;
    text-align: center;
    margin: 10vw 4vw;
    padding: 6vw 5vw;
    background: #fff;
    border-radius: 1.4em;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);

    opacity: 0;

    /* Animation wird erst beim "animate"-Class aktiv */
    animation: productFadeUp 0.9s ease-out forwards;
    animation-play-state: paused;
 
  }

  /* Beim Sichtbarwerden startet die Animation */
  .product.animate {
    animation-play-state: running;
  }

  @keyframes productFadeUp {
    0% { opacity: 0; transform: translateY(45px); }
    80% { opacity: 0.8; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* -------------------------------------------------------------- */
  /* PRODUCT IMAGE – "Mini-Slider" Effekt */
  /* -------------------------------------------------------------- */

  .product-image img {
    width: 85vw;
    border-radius: 1em;
    margin: 0 0 4vw 0;

    /* Slider Look-Effekt */
    transform: scale(0.95);
    transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
  }

  .product-image img:active {
    transform: scale(1.0);     /* leichtes zoomen beim Tippen */
  }


  /* -------------------------------------------------------------- */
  /* PRODUKT-INFORMATIONEN MOBIL */
  /* -------------------------------------------------------------- */

  .product-info {
    margin: 0;
    max-width: 90vw;
    text-align: center;
  }

  .product-title {
    font-size: 1.5em;
    margin-bottom: 3vw;
  }

  .product-number {
    font-size: 0.9em;
    margin-bottom: 4vw;
    color: #777;
  }

  .product-description {
    text-align: left;
    margin: 0 auto;
    max-width: 82vw;
    font-size: 1.05em;
    line-height: 1.4em;
  }


  /* -------------------------------------------------------------- */
  /* BUTTONS MOBIL */
  /* -------------------------------------------------------------- */

  .product-actions {
    margin: 6vw auto 0 auto;
    width: 100%;
    justify-content: center;
    margin-top: -6vw;
    gap: 0.5em;
  }

  .product-button {
    padding: 0.6em 0.8em;
    width: auto;
    font-size: 1em;
    background: #444;
    border-radius: 0.7em;
    transition: 0.25s ease;
  }

  .product-button:hover {
    background: #555;
    transform: scale(1.05);
  }


  /* -------------------------------------------------------------- */
  /* TRENNLINIEN */
  /* -------------------------------------------------------------- */

  .product-line {
    width: 70%;
    margin: 12vw auto;
    border-color: #aaa;
    opacity: 0;
    animation: lineFade 1.5s ease forwards;
  }

  @keyframes lineFade {
    0% { opacity: 0; width: 30%; }
    100% { opacity: 1; width: 60%; }
  }

/* -------------------------------------------------------------- */
/* MOBILE POPUPS — KORREKT & EINHEITLICH */
/* -------------------------------------------------------------- */


  /* -------------------------------------------------------------- */
  /* LIGHTBOX MOBIL */
  /* -------------------------------------------------------------- */

  .lightbox .lightbox-img {
    max-width: 90vw;
    transform: scale(0.9);
  }

  .lightbox.show .lightbox-img {
    transform: scale(1);
  }

  .lightbox-close {
    top: 4vw;
    right: 4vw;
  }


  /* -------------------------------------------------------------- */
  /* FOOTER ABSTAND MOBIL */
  /* -------------------------------------------------------------- */

  .footer-spacer-grundlagenelektrotechnik {
    height: 20vw;
  }


  /* FULLSCREEN OVERLAY */
  .popup {
    position: fixed !important;
    inset: 0 !important;    /* top:0 left:0 right:0 bottom:0 */
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.45);
    display: none;
    z-index: 99999 !important;
    justify-content: center;
    align-items: center;
  }

  .popup.show {
    display: flex !important;
  }

/* DIE BOX SELBST */
.popup-content {
  width: 75vw !important;       /* vorher 85vw → schöner, nicht zu breit */
  max-width: 75vw !important;
  padding: 5vw !important;
  background: #fff;
  border-radius: 1.2em;
  box-shadow: 0 0 30px rgba(0,0,0,0.35);

  /* Animation */
  transform-origin: center center !important;

}


  /* Buttons */
  .popup-actions {
    margin-right: 0 !important;
    justify-content: center;
    gap: 4vw;
  }

  .popup.enter .popup-content {
    transform: scale(1);
    opacity: 1;
  }

  .popup.leave .popup-content {
    transform: scale(0.85);
    opacity: 0;
  }

  /* Titel etwas größer */
  .popup-subtitle {
    font-size: 1.3em;
    margin-bottom: 4vw;
  }

  /* Artikelnummer etc */
  .popup-article {
    font-size: 0.95em;
    margin-bottom: 4vw;
  }

.popup-actions .popup-yes,
.popup-actions .popup-no {
  padding: 0.7em 1.2em !important;   /* vorher 1em 1.6em → kleiner */
  font-size: 0.9em !important;       /* leicht kleiner */
  border-radius: 0.7em !important;   /* etwas kompakter */
}


  /* Schließen Button */
  .popup-close {
    top: 3vw !important;
    right: 4vw !important;
    font-size: 2em;
  }






  



}