/* Ergaenzungen zum OP2-CSS (assets/op-3.css, op-1.css): alles, was der Nachbau
   anders macht als WordPress - mobiles Menue ohne JavaScript-Bibliothek,
   Video-Box statt Vimeo-iframe, eigener Hoerproben-Player statt Wonderplugin. */

/* Bilder tragen jetzt width/height (gegen Layoutsprünge beim Laden); damit sie
   wie live mit der Spalte skalieren, muss die Hoehe mitgehen. */
img { height: auto; }
/* <picture> (WebP + Original) darf das Layout nicht veraendern: OP2 setzt
   width:100% am Bild, und 100 % eines Inline-Wrappers waeren 0. */
picture { display: contents; }
/* Bilder "volle Breite" in OP2-Bildboxen: Breite fest auf die Box, damit ein noch
   nicht geladenes Bild (loading=lazy) seinen Platz schon hat (kein Layoutsprung).
   Live war das Bild ohnehin so breit wie die Box (max-width:100 %, Bild groesser). */
.image-caption img.full-width { width: 100%; }

/* --- Menue: Liste auf breiten Bildschirmen, natives Dropdown darunter (wie das
   OP2-Dropdown "dk-select", das live per JavaScript entstand) --- */
.mobil-menue { display: none; }
@media (max-width: 767px) {
  #navigation-below { display: none !important; }
  .mobil-menue {
    display: block; width: 300px; max-width: 100%; margin: 15px 0;
    padding: 0 2.5em 0 .75em; height: 34px; line-height: 34px;
    font: 700 14px/34px Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333;
    background-color: rgba(255,255,255,.8);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23999'/%3E%3C/svg%3E"),
      linear-gradient(#999, #999);
    background-repeat: no-repeat, no-repeat;
    background-position: right 12px center, right 34px top;
    background-size: 10px 6px, 1px 100%;
    border: 1px solid #ccc; border-radius: .4em; -webkit-appearance: none; appearance: none; cursor: pointer;
    box-shadow: inset 0 0 0 1.5em rgba(0,0,0,0);
  }
  .mobil-menue::after { content: ""; }
}

/* --- Video (verschluesselte Haeppchen ueber CloudFront) --- */
.video-box { position: relative; width: 100%; }
.video-box video { display: block; width: 100%; height: auto; background: #000; }
/* Abspielknopf ueber dem Standbild, in der Anmutung des Vimeo-Players (dunkles
   Rechteck, weisses Dreieck); verschwindet beim ersten Start (video-hls.js) */
.video-start {
  position: absolute; left: 50%; top: 50%; width: 65px; height: 40px; margin: -20px 0 0 -32px;
  padding: 0; border: 0; border-radius: 5px; background: rgba(0,0,0,.75); cursor: pointer;
}
.video-start::after {
  content: ""; position: absolute; left: 26px; top: 11px; border-style: solid;
  border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff;
}
.video-start:hover { background: rgb(0,173,239); }
.video-box.laeuft .video-start { display: none; }

/* --- Hoerproben-Player (Nachbau des Wonderplugin-Lightbox-Skins, 300 x 300) --- */
.hoerproben {
  position: relative; width: 300px; height: 300px; margin: 0 auto; overflow: hidden;
  background: linear-gradient(#f4f4f4, #e6e6e6); border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center;
}
.hoerproben-cover { display: block; width: 300px; height: 170px; object-fit: cover; object-position: top; }
.hoerproben-fortschritt { position: relative; height: 4px; background: #d0d0d0; cursor: pointer; }
.hoerproben-balken { height: 100%; width: 0; background: #6fc94a; }
.hoerproben-titel { height: 52px; padding: 12px 14px 0; font-size: 15px; line-height: 21px; color: #444; overflow: hidden; }
.hoerproben-knoepfe { margin-top: 6px; }
.hoerproben-knoepfe button {
  width: 36px; height: 36px; margin: 0 6px; padding: 0; border: 1px solid #bbb; border-radius: 50%;
  background: linear-gradient(#fff, #e2e2e2); color: #555; font-size: 12px; line-height: 34px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); vertical-align: middle;
}
.hoerproben-knoepfe .hoerproben-play { width: 40px; height: 40px; font-size: 14px; line-height: 38px; }
.hoerproben-knoepfe button:hover { background: linear-gradient(#fff, #d5d5d5); }
.hoerproben-zaehler { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: #888; }
.hoerproben audio { display: none; }


/* Amazon-Partnerlinks auf der FAQ, Kennzeichnung wie bei silent-subliminals.de
   (Tim, 19.09.2026; gesetzt von werkzeug/konvertiere.py) */
.op-text-block a.partnerlink::after{content:"\00a0*";font-weight:700}
.op-text-block p.partnerlink-hinweis{font-size:13px;line-height:1.5;color:#555;border-top:1px solid #ddd;padding-top:10px;margin-top:20px}
.op-text-block p.partnerlink-hinweis--oben{border-top:0;border-bottom:1px solid #ddd;padding:0 0 8px;margin:0 0 14px}

/* --- H1 statt der ersten OP2-H2 (SEO-Paket, Tim, 19.09.2026; gesetzt von werkzeug/konvertiere.py) ---
   OP2 gibt h1 46px/14px, h2 35px/10px, h3 28px/8px (Schriftgroesse/Abstand unten); die Inline-
   Groessen der Headline-Elemente bleiben am Tag. Die Typ-3-Seiten (html.lf-3a) verkleinern h2 und
   h3 mobil per !important in ihren Seitenstyles, das zieht hier fuer die H1 nach. op-nest: das
   leere aeussere h2 der kaputten Verschachtelung (<h2><h3>..</h3></h2>) fiel weg, sein Abstand
   von 10px bleibt. op-h5: die <h5> vor der H1 auf /support/ ist jetzt ein <p> in der alten Optik. */
h1.op-h2 { font-size: 35px; margin-bottom: 10px; }
h1.op-h3 { font-size: 28px; margin-bottom: 8px; }
h1.op-nest { margin-top: 10px; }
.op-text-block p.op-h5 { font-size: 17px !important; line-height: 1.3em; margin: 0 0 4px; color: #181818; font-weight: 700; }
@media only screen and (max-width: 759px) {
  html.lf-3a h1.op-h2 { font-size: 30px !important; line-height: 36px !important; }
  html.lf-3a h1.op-h3 { font-size: 18px !important; line-height: 24px !important; }
}
@media only screen and (max-width: 479px) {
  html.lf-3a h1.op-h2 { font-size: 25px !important; line-height: 31px !important; }
  html.lf-3a h1.op-h3 { font-size: 19px !important; line-height: 24px !important; }
}