/* ------------------------------------------------------------------
   Einwilligungsdialog + Platzhalter blockierter Dienste
   Optik im Duktus des Originals: Futura, #a1358a, Rahmen statt Flächen.
   ------------------------------------------------------------------ */

.ou-consent { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000;
    display: flex; align-items: flex-start; justify-content: center; padding: 20px; box-sizing: border-box;
    overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ou-consent[hidden] { display: none; }

.ou-consent__backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(51, 51, 51, .75); }

/* margin:auto statt align-items:center — ein Dialog, der höher als der Viewport ist,
   wird so oben bündig statt an beiden Enden abgeschnitten (iOS: 100vh ist dort größer
   als der sichtbare Bereich, deshalb zusätzlich dvh). */
.ou-consent__dialog { position: relative; background: #fff; color: #333333; max-width: 720px;
    width: 100%; margin: auto; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    overflow-y: auto; padding: 40px 40px 30px; box-sizing: border-box;
    box-shadow: 0 0 30px rgba(0, 0, 0, .4); }

.ou-consent__title { font-family: 'FuturaLTPro-Medium'; font-weight: 500; letter-spacing: 0.125em;
    font-size: 25px; line-height: 34px; color: #a1358a; margin: 0 0 20px; outline: none; }

.ou-consent__intro { font-family: 'FuturaLTPro-Medium'; font-weight: 500; font-size: 16px;
    line-height: 26px; }
.ou-consent__intro p { margin: 0 0 14px; font-size: 16px; line-height: 26px; }
.ou-consent__intro p:last-child { margin-bottom: 0; }
.ou-consent__intro a { color: #a1358a; text-decoration: underline; }

/* Diensteauswahl (Ebene 2) */
.ou-consent__services { margin-top: 24px; border-top: 1px solid #c8c6c6; }
.ou-consent__settings-intro { font-size: 16px; line-height: 26px; margin: 16px 0 0; }
.ou-consent__service { padding: 16px 0; border-bottom: 1px solid #e4e0dd; }
.ou-consent__service-head { display: flex; align-items: center; gap: 10px; cursor: pointer;
    font-family: 'FuturaLTPro-Medium'; font-weight: 500; letter-spacing: 0.125em; font-size: 16px;
    color: #a1358a; }
.ou-consent__service-head input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; cursor: pointer; }
.ou-consent__service-head input:disabled { cursor: default; }
.ou-consent__service-desc { font-size: 15px; line-height: 24px; margin: 8px 0 0; }
.ou-consent__service-meta { font-size: 13px; line-height: 20px; color: #6b6b6b; margin: 6px 0 0; }
.ou-consent__service-meta a { color: #6b6b6b; text-decoration: underline; }

/* Schaltflächen — Zustimmen und Ablehnen bewusst identisch gestaltet */
.ou-consent__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ou-consent__btn { flex: 1 1 200px; min-width: 200px; padding: 9px 20px; background: transparent;
    border: 2px solid #a1358a; color: #a1358a; font-family: 'FuturaLTPro-Medium'; font-weight: 500;
    font-size: 16px; letter-spacing: 0.125em; text-transform: uppercase; text-align: center;
    cursor: pointer; transition: all .3s ease-in-out; }
.ou-consent__btn:hover { background: #a1358a; color: #fff; }
.ou-consent__btn[hidden] { display: none; }

.ou-consent__links { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 0; font-size: 14px; }
.ou-consent__links a { color: #333333; text-decoration: underline; }

.ou-consent-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px;
    color: #333333; text-decoration: underline; cursor: pointer; }
.ou-consent-linkbtn[hidden] { display: none; }

.ou-consent__close { position: absolute; top: 8px; right: 12px; background: none; border: 0;
    font-size: 28px; line-height: 1; color: #a1358a; cursor: pointer; padding: 4px 8px; }

body.ou-consent-open { overflow: hidden; }

/* ------------------------------------------------------------------
   Platzhalter für blockierte Dienste (Karte, Video)
   ------------------------------------------------------------------ */

.ou-consent-placeholder { display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 220px; max-width: 100%; padding: 24px; background: #e4e0dd;
    border: 1px solid #c8c6c6; box-sizing: border-box; }
.ou-consent-placeholder__inner { max-width: 560px; text-align: center; }
.ou-consent-placeholder__text { font-family: 'FuturaLTPro-Medium'; font-weight: 500; font-size: 16px;
    line-height: 26px; color: #333333; margin: 0 0 18px; }
.ou-consent-placeholder__btn { display: inline-block; min-width: 270px; padding: 7px 20px;
    background: transparent; border: 2px solid #a1358a; color: #a1358a; font-size: 16px;
    text-transform: uppercase; cursor: pointer; transition: all .3s ease-in-out; }
.ou-consent-placeholder__btn:hover { background: #a1358a; color: #fff; }
.ou-consent-placeholder__meta { font-size: 13px; line-height: 20px; color: #6b6b6b; margin: 16px 0 0; }
.ou-consent-placeholder__meta a, .ou-consent-placeholder__meta .ou-consent-linkbtn {
    font-size: 13px; color: #6b6b6b; }
.ou-consent-placeholder.is-loading .ou-consent-placeholder__text { margin: 0; }

/* Videoplatzhalter: Breite/Höhe kommen als inline-style aus dem iframe */
.ou-consent-placeholder--embed { min-height: 0; }

/* Hinweis im Kommentarformular (reCAPTCHA erst beim Absenden) — weiß, damit er sich
   vom beigen Formularkasten abhebt */
.ou-consent-inline { margin: 0 0 20px; padding: 18px 20px; background: #fff;
    border: 2px solid #a1358a; }
.ou-consent-inline[hidden] { display: none; }
.ou-consent-inline p { font-size: 15px; line-height: 24px; margin: 0 0 14px; }
.ou-consent-inline .ou-consent-placeholder__btn { min-width: 0; }

/* ------------------------------------------------------------------
   Fehlermeldung im Kommentarformular (Fehlerfarbe wie style2.css: #cc0000)
   ------------------------------------------------------------------ */

.ou-form-error { margin: 0 0 20px; padding: 18px 20px; background: #fff;
    border: 2px solid #cc0000; }
.ou-form-error p { font-size: 15px; line-height: 24px; margin: 0; color: #cc0000; }

/* ------------------------------------------------------------------
   Fokus sichtbar halten (das Theme unterdrückt outline an vielen Stellen)
   ------------------------------------------------------------------ */

.ou-consent button:focus-visible, .ou-consent a:focus-visible, .ou-consent input:focus-visible,
.ou-consent-placeholder button:focus-visible, .ou-consent-inline button:focus-visible {
    outline: 2px solid #a1358a; outline-offset: 2px; }

/* ------------------------------------------------------------------
   Kontrastmodus (vgl. style3.css)
   ------------------------------------------------------------------ */

body.contrast-0 .ou-consent__title, body.contrast-0 .ou-consent__service-head,
body.contrast-0 .ou-consent__btn, body.contrast-0 .ou-consent__close,
body.contrast-0 .ou-consent-placeholder__btn, body.contrast-0 .ou-consent__intro a { color: #000; }
body.contrast-0 .ou-consent__btn, body.contrast-0 .ou-consent-placeholder__btn { border-color: #000; }
body.contrast-0 .ou-consent__btn:hover, body.contrast-0 .ou-consent-placeholder__btn:hover {
    background: #000; color: #fff; }
body.contrast-0 .ou-consent__dialog, body.contrast-0 .ou-consent-placeholder,
body.contrast-0 .ou-consent-inline { background: #fff; color: #000; }
body.contrast-0 .ou-consent-inline { border-color: #000; }
body.contrast-0 .ou-form-error { background: #fff; border-color: #000; }
body.contrast-0 .ou-form-error p { color: #000; }
body.contrast-0 .ou-consent__service-meta, body.contrast-0 .ou-consent__service-meta a,
body.contrast-0 .ou-consent-placeholder__meta, body.contrast-0 .ou-consent-placeholder__meta a,
body.contrast-0 .ou-consent-placeholder__meta .ou-consent-linkbtn,
body.contrast-0 .ou-consent-linkbtn, body.contrast-0 .ou-consent__links a { color: #000; }
body.contrast-0 .ou-consent button:focus-visible, body.contrast-0 .ou-consent a:focus-visible,
body.contrast-0 .ou-consent-placeholder button:focus-visible { outline-color: #000; }

/* ------------------------------------------------------------------
   Responsive (Breakpoints wie responsive.css)
   ------------------------------------------------------------------ */

@media only screen and (max-width: 1000px) {
    .ou-consent { padding: 10px; padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(10px, env(safe-area-inset-bottom)); }
    .ou-consent__dialog { padding: 30px 25px 25px; max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px); }
    .ou-consent__title { font-size: 22px; line-height: 30px; padding-right: 30px; }
}

@media only screen and (max-width: 500px) {
    /* flex-basis 200px würde in der Spaltenrichtung zur HÖHE — deshalb auto */
    .ou-consent__actions { flex-direction: column; gap: 10px; }
    .ou-consent__btn { flex: 0 0 auto; min-width: 0; width: 100%; }
    .ou-consent-placeholder { padding: 18px; }
    .ou-consent-placeholder__btn { min-width: 0; width: 100%; }
    .ou-consent__links { gap: 12px; }
}