/* Zwei-Klick-Einbindung externer Medien (A-1) — HEPRO statische Kopie.
   Nutzt die Template-Buttonklassen, damit die Optik dem Original folgt. */
.hepro-embed {
  position: relative;
  background: #e9e9e9 url('/templates/mc_default/images/apple-touch-icon-72x72-precomposed.png') no-repeat 16px 16px;
  background-size: 36px 36px;
  border: 1px solid #d0d0d0;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* Maps-Platzhalter spiegelt exakt die Original-Regeln fuer `.map iframe`
   (styles.css: Basis 350px, ab 768px 350px, ab 992px 500px), damit kein
   Hoehenversatz zum Original entsteht. */
.hepro-embed--maps { aspect-ratio: auto; height: 350px; display: flex; margin-bottom: 0; }
@media (min-width: 768px) { .hepro-embed--maps { height: 350px; } }
@media (min-width: 992px) { .hepro-embed--maps { height: 500px; } }
.hepro-embed__hinweis {
  max-width: 34em;
  padding: 1em 1.5em;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background: rgba(255, 255, 255, .92); /* lesbar auch ueber Vorschaubild */
}
.hepro-embed__hinweis strong { display: block; margin-bottom: .4em; font-size: 16px; }
.hepro-embed__hinweis .btn { margin-top: .8em; cursor: pointer; }
.hepro-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Video-Platzhalter spiegelt die Original-Regel `.video iframe` (styles.css):
   absolut im responsiven .video-Container. */
.video .hepro-embed {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto; z-index: 10;
}

/* Eigenes Mini-Modal fuer die Video-Links der Produktuebersicht */
.hepro-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, .75);
  display: flex; align-items: center; justify-content: center;
}
.hepro-modal__inhalt {
  position: relative; width: min(95vw, 1100px); aspect-ratio: 16 / 9; background: #000;
}
.hepro-modal__inhalt iframe { width: 100%; height: 100%; border: 0; }
.hepro-modal__inhalt .hepro-embed { position: absolute; inset: 0; height: 100%; }
.hepro-modal__schliessen {
  position: absolute; top: -38px; right: 0;
  background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}

/* Zusatz auf der Platzhalterflaeche: Hinweis auf die dauerhafte Auswahl in der
   Consent-Karte (Vorgabe 2026-08-26). Bewusst kleiner und ruhiger als der
   Haupttext — er ist eine Nebeninformation, keine zweite Aufforderung. */
.hepro-embed__dauerhaft {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.85;
}

/* ==========================================================================
   KARTE: BEDIENBAR ERST NACH EINEM KLICK  (A-20, Beschluss 2026-08-31)
   ==========================================================================

   AUSGANGSLAGE, GEMESSEN: Im Stilblatt des ORIGINALS steht in Zeile 8402
       .map iframe { pointer-events: none; }
   Die Karte ist damit auch auf www.hepro-gmbh.de nicht anklickbar. Der
   Auftraggeber hat das auf der laufenden Website nachgeprueft und bestaetigt.

   WARUM DAS IM ORIGINAL SO IST (Vermutung, nicht belegt): pointer-events:none
   auf einer Karte ist der verbreitete Griff gegen das Scroll-Kapern -- wer mit
   dem Mausrad ueber die Seite blaettert, zoomt sonst die Karte statt
   weiterzulesen.

   ENTSCHEIDUNG DES AUFTRAGGEBERS: Variante (c). "Das ist die Loesung, die
   beides kann -- kein Scroll-Kapern beim Blaettern, aber bedienbar wenn jemand
   es will. Wir sind hier besser als das Original, das ist gewollt."

   ZUR SPEZIFITAET: `.hepro-embed--maps iframe` und die Originalregel
   `.map iframe` sind gleich stark (eine Klasse + ein Typ). Bei Gleichstand
   entscheidet die Reihenfolge, und zweiklick.css steht an Position 10, das
   Original an Position 7 -- wir gewinnen. Die FREIGABE-Regel unten ist
   zusaetzlich um ein Attribut staerker, damit sie auch nach einer Umsortierung
   der Stilblaetter noch greift. */

.hepro-embed--maps iframe {
  pointer-events: none;
}

/* Freigegeben: ein Attribut mehr, also staerker als jede Sperre oben. */
.hepro-embed--maps[data-karte-frei="1"] iframe {
  pointer-events: auto;
}

/* Die Freigabeflaeche liegt UEBER dem iframe und faengt den ersten Klick.
   Ein echter <button>, kein <div>: so ist die Karte auch mit der Tastatur
   freizugeben und wird von Vorlesegeraeten angekuendigt. */
.hepro-karte-frei {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* 36px, nicht 14px: Am unteren Rand der Karte laeuft die Zuschreibung von
   * Google ("Kartendaten (c) ... GeoBasis-DE/BKG", Nutzungsbedingungen). Die
   * muss sichtbar bleiben -- Google verlangt das in seinen Bedingungen. Bei
   * 14px lag der Hinweis darauf (gesehen in berichte/karte/1-gesperrt.png). */
  padding: 0 0 36px;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Der Hinweis selbst: klein, unten mittig, nicht im Weg. */
.hepro-karte-frei span {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .92);
  color: #333;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  text-align: center;
}

.hepro-karte-frei:hover span,
.hepro-karte-frei:focus-visible span {
  background: #fff;
  color: #000;
}

.hepro-karte-frei:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: -3px;
}

/* Ist die Karte freigegeben, verschwindet die Flaeche vollstaendig --
   nicht nur unsichtbar, sondern aus dem Weg (sonst faengt sie weiter Klicks
   und die Freigabe waere wirkungslos). */
.hepro-embed--maps[data-karte-frei="1"] .hepro-karte-frei {
  display: none;
}