/* Zwei-Klick-Platzhalter fuer YouTube und Google Maps (12.10.2026, Datenschutz).
   Vor dem Klick: Vorschaubild bzw. Adresse vom eigenen Server, keine Anfrage an Google.
   Farben aus dem Elementor-Kit: primary #3F635B, accent #DB504A. */

/* Der Platzhalter liegt ueber dem 16:9-Rahmen, nicht in ihm: im Fluss zaehlte sein Inhalt zur
   Mindesthoehe des aspect-ratio-Rahmens (+1,34 px je Karte am iPhone, gemessen 12.10.2026) */
[data-widget_type="zweiklick.default"] .elementor-wrapper { position: relative; }
.elementor-widget-video .zk {
  position: absolute; inset: 0; display: block;
  overflow: hidden; background: #111; line-height: normal;
}
.zk-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.zk-titel {
  position: absolute; left: 0; right: 0; top: 0; padding: 10px 12px 22px;
  color: #fff; font: 500 14px/1.3 "Work Sans", sans-serif;
  background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* die ganze Flaeche ist der Abspielknopf */
.zk-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.zk-knopf {
  width: 64px; height: 64px; border-radius: 50%; background: #DB504A;  /* wie der runde Knopf im Kopfbereich */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center; transition: background-color .2s;
}
.zk-knopf::before {
  content: ""; margin-left: 5px; border-style: solid;
  border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff;
}
.zk-play:hover .zk-knopf, .zk-play:focus-visible .zk-knopf { background: #3F635B; }
.zk-play:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.zk-hinweis {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px;
  color: #fff; font: 400 12px/1.3 "Work Sans", sans-serif;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.zk-hinweis a { color: #fff; text-decoration: underline; pointer-events: auto; }

/* Karte: gleiche Hoehe wie das iframe (Elementor-CSS: 323px bei allen vier Karten) */
.zk-karte {
  height: 323px; box-sizing: border-box; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #EEF2F0; color: #1f1f1f; text-align: center; line-height: 1.45;
  font-family: "Work Sans", sans-serif;
}
.zk-karte p { margin: 0; }
.zk-ort { font-size: 17px; }
.zk-ort strong { font-weight: 600; }
.zk-laden {
  display: inline-block; padding: 13px 26px; border-radius: 3px;
  background: #3F635B; color: #fff !important; text-decoration: none !important;
  font: 600 14px/1.2 "Montserrat", sans-serif; transition: background-color .2s;
}
.zk-laden:hover, .zk-laden:focus-visible { background: #DB504A; }
.zk-hinweis-karte { font-size: 13px; color: #4a4a4a; max-width: 34em; }
.zk-hinweis-karte a { color: inherit; text-decoration: underline; }

/* Hintergrundvideo der Startseite (eigene MP4): deckt den Abschnitt schon vor Elementors Groessenrechnung */
.elementor-element-6ce00c6 .elementor-background-video-hosted { width: 100%; height: 100%; }