/* ============================================================
   Mudenbach-Archiv - YouTube Zwei-Klick-Loesung
   Version: v1 - 2026-08-30

   Der Platzhalter laedt NICHTS von Google - kein Vorschaubild,
   kein Skript. Erst der Klick des Besuchers stellt die Verbindung
   her. Damit fliesst ohne Einwilligung keine IP-Adresse ab.
   ============================================================ */

.yt-schutz {
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 12px 0;
  background: #1c2b16;
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
  font-family: Verdana, sans-serif;
}

/* Der Klickbereich - fuellt die Videoflaeche */
.yt-schutz-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 180px;
  padding: 24px 16px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.yt-schutz-start:hover  { background: rgba(255,255,255,.06); }
.yt-schutz-start:focus-visible { outline: 3px solid #8fd14f; outline-offset: -3px; }

/* Play-Dreieck, rein per CSS - kein externes Bild */
.yt-schutz-play {
  display: block;
  width: 62px; height: 44px;
  background: #c00;
  border-radius: 10px;
  position: relative;
}
.yt-schutz-play::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.yt-schutz-start:hover .yt-schutz-play { background: #e00; }

.yt-schutz-titel  { font-size: 15px; font-weight: 600; }

.yt-schutz-hinweis {
  margin: 0;
  padding: 10px 14px;
  background: rgba(0,0,0,.35);
  font-size: 12px;
  line-height: 1.5;
}
.yt-schutz-hinweis a { color: #9fe06a; }

/* Nach dem Klick eingesetztes echtes Video */
.yt-schutz-geladen {
  display: block;
  width: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .yt-schutz { max-width: 100%; margin: 10px 0; }
  .yt-schutz-start { min-height: 150px; }
  .yt-schutz-hinweis { font-size: 12px; }
}