/* video-consent.css — DSGVO-konforme YouTube-Einbindung
 *
 * Gehoert zu javascript/video-consent.js und
 * override/templates/node/view/full/cjw_video.tpl (Klasse jac_video).
 *
 * GRUNDSATZ: Vor der Einwilligung geht KEIN Request an Google — auch nicht
 * fuer das Vorschaubild. Deshalb ist der Platzhalter entweder ein Bild aus
 * dem CMS (Feld poster) oder eine reine CSS-Flaeche. Ein Thumbnail von
 * img.youtube.com waere schon eine Datenuebermittlung; genau daran leidet
 * die Vorlage in ezp25-acva.
 *
 * 16:9 ueber padding-bottom und nicht ueber aspect-ratio, weil das
 * pagelayout dieses Designs noch IE-Conditionals traegt.
 *
 * Farben aus stylesheets/less: @color-orange #ef7f00,
 * @color-dark-bluegray #3a4347, @color-medium-gray #989fa3.
 */

.video-consent {
    position: relative;
    width: 100%;
    margin: 0 0 15px;
    background-color: #3a4347;
    overflow: hidden;
}

/* Haelt das 16:9-Verhaeltnis, ohne feste Hoehe. */
.video-consent:before {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.video-consent__flaeche,
.video-consent__frame,
.video-consent__hinweis {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* ---------------------------------------------------- Platzhalter (vor Klick) */

.video-consent__flaeche {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #3a4347;
    cursor: pointer;
    text-align: center;
}

.video-consent__poster {
    width: 100%;
    height: 100%;
    /* object-fit wird von alten Browsern ignoriert, dann skaliert das Bild
       ueber die Breite — akzeptabel, weil der Poster 16:9 sein soll. */
    object-fit: cover;
    display: block;
}

/* Play-Knopf: reines CSS, damit keine zusaetzliche Bilddatei noetig ist
   (dieses Design hat kein Play-Icon und kein FontAwesome). */
.video-consent__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
    border-radius: 50%;
    background-color: #ef7f00;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.video-consent__play:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: -14px 0 0 -8px;
    border-style: solid;
    border-width: 14px 0 14px 22px;
    border-color: transparent transparent transparent #ffffff;
}

.video-consent__flaeche:hover .video-consent__play,
.video-consent__flaeche:focus .video-consent__play {
    background-color: #f9b200;
}

.video-consent__flaeche:focus {
    outline: 3px solid #f9b200;
    outline-offset: -3px;
}

/* Sichtbarer Hinweis auf dem Platzhalter, damit niemand ueberrascht wird. */
.video-consent__marke {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 8px 12px;
    background-color: rgba(58, 67, 71, 0.85);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
}

/* ------------------------------------------------- Einwilligung (nach Klick) */

.video-consent__hinweis {
    display: none;
    padding: 20px;
    background-color: rgba(58, 67, 71, 0.96);
    color: #ffffff;
    overflow-y: auto;
    text-align: left;
}

.video-consent.is-fragend .video-consent__hinweis {
    display: block;
}

.video-consent__hinweis p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
}

.video-consent__hinweis a {
    color: #f9b200;
    text-decoration: underline;
}

.video-consent__knopf {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 9px 16px;
    border: 0;
    background-color: #989fa3;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.video-consent__knopf:hover,
.video-consent__knopf:focus {
    background-color: #ffffff;
    color: #3a4347;
}

.video-consent__knopf--ja {
    background-color: #ef7f00;
}

.video-consent__knopf--ja:hover,
.video-consent__knopf--ja:focus {
    background-color: #f9b200;
    color: #ffffff;
}

/* --------------------------------------------------------------- Der Player */

.video-consent__frame {
    display: none;
}

.video-consent.is-geladen .video-consent__frame {
    display: block;
}

.video-consent.is-geladen .video-consent__flaeche,
.video-consent.is-geladen .video-consent__hinweis {
    display: none;
}

.video-consent__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ------------------------------------------------------ Ohne JavaScript */

.video-consent__ohne-js {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 12px;
    background-color: rgba(58, 67, 71, 0.9);
    color: #ffffff;
    font-size: 14px;
}

.video-consent__ohne-js a {
    color: #f9b200;
}

/* ------------------------------------------- Einpassung in die Startseite
 *
 * Auf der Startseite wechseln sich die in start_parts verknuepften Objekte ab
 * (cjw_article_start.tpl). Zwischen ihnen setzt das Template KEINEN Trenner —
 * die gepunkteten <hr class="small dotted"> gibt es nur in der News-Liste.
 * Folge: das "weiter lesen" des vorhergehenden Artikels klebte am
 * Video-Titel und sah aus wie dessen Ueberschrift.
 *
 * Der Trenner steht deshalb hier und nicht im Template: so aendert sich das
 * Layout NUR fuer das Video und nicht fuer alle Startseiten-Elemente.
 *
 * Stil aus der Site uebernommen, nicht erfunden:
 * hr.dotted -> border-style dotted, border-color #3a4347 (= @color-dark-bluegray)
 * hr.small  -> margin 1em 0
 *
 * NICHT in master.css eintragen: die wird aus stylesheets/less/ gebaut und
 * ein Build wuerde die Aenderung verwerfen.
 */

/* NUR Abstand, KEINE eigene Linie.
 * Gemessen am 2026-09-01: die Redaktion setzt <hr class="small dotted"> selbst
 * in den Artikeltext (2 davon im Artikel-Block der Startseite). Ein zusaetzlicher
 * border-top hier klemmte das "weiter lesen" des Vorgaengers zwischen zwei
 * Linien ein. Der Abstand allein trennt genug und respektiert die
 * redaktionellen Trenner. */
.content-view-line.jac_video {
    margin-top: 1.5em;
}

/* Luft zwischen Player und Beschreibungstext. */
.content-view-line.jac_video .video-consent,
.content-view-full.jac_video .video-consent {
    margin-bottom: 1.2em;
}

.content-view-line.jac_video .attribute-short_description {
    margin-bottom: 1em;
}

/* Ueberschrift wie eine h2 im Artikeltext: fett und dunkel.
 *
 * Die Vorlage im Artikel ist <h2><b>Titel</b></h2> — ohne Link, deshalb greift
 * dort die master.css-Regel "h2 a { font-weight: normal }" nicht. Der
 * Video-Teaser behaelt seinen Link zur Vollansicht (nuetzlich) und holt das
 * Fett hier zurueck. Farbe kommt weiter aus h2 a (#3a4347), damit der Link
 * nicht als Link auffaellt.
 *
 * KEIN h2.highlight (oranger Balken): am 2026-09-01 am Bild verworfen.
 */

.content-view-line.jac_video h2 a {
    font-weight: bold;
}