.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.4em 1em;
  font-size: 0.8em;
  color: #fff;
  background: #777;
  border-radius: 0.3em;
  text-decoration: none;
  transition: background 0.3s ease;
}

.product-button:hover {
  background: #999;
}

/* Press-Animation beim Klicken/Drücken */
.product-button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 .15em .35em rgba(0,0,0,.2);
}



/* //////////////////////////////////////////////////////////////////////////////////////////////// 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;
}

/* Ab 1600px: Buttons weiter nach unten */
@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. */
  }
}