/* =============================================================================
   quellcoder mozgiel wabeko – Frontend Styles
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Klaro – Farben
   Primär:    #004282
   Sekundär:  #359d54
   ----------------------------------------------------------------------------- */

.klaro {
    /* CSS Custom Properties (Klaro v0.7+) */
    --klaro-green-200:          #004282; /* Primär  – Buttons, aktiver Toggle */
    --klaro-green-100:          #359d54; /* Sekundär – Links, Akzente          */
    --klaro-dark:               #004282;
    --klaro-border-radius:      4px;
    --klaro-font-size:          inherit;

    --title-font-family: 'mortise', inherit;
    --font-family: tt-commons-pro, inherit;
    /* Schriften von der Website erben */
    font-family: inherit !important;
    font-size:   inherit !important;
    line-height: inherit !important;
    --dark1: white;
}

/* Buttons: Primärfarbe */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-info,
.klaro .cookie-notice .cn-ok .cm-btn {
    background-color: #359d54 !important;
    border-color:     #359d54 !important;
}

/* Buttons: Sekundärfarbe / Decline *
 */
.klaro .cm-btn-accept {
    background-color: #004282 !important;
    border-color:     #004282 !important;
}

.klaro .cm-btn.cm-btn-decline {
    background-color: #666 !important;
    border-color:     #666 !important;
}

.klaro .cm-btn.cm-btn-danger.cn-decline {
    background-color: #666 !important;
    border-color:     #666 !important;
}
/* Toggle aktiv */
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input.required + .cm-list-label .slider {
    background-color: #004282 !important;
}

/* Links */
.klaro a,
.klaro a:link,
.klaro a:visited {
    color: #004282 !important;
}

/* -----------------------------------------------------------------------------
   Klaro – Typografie
   Headlines: mortise   (wird von der Site geladen)
   Copy:      tt-commons-pro (wird von der Site geladen)
   ----------------------------------------------------------------------------- */

/* Headlines */
.klaro .cm-modal .cm-header h1,
.klaro .cm-modal .cm-header h2,
.klaro .cm-modal .cm-header h3,
.klaro .cookie-notice .cn-title,
.klaro h1, .klaro h2, .klaro h3 {
    font-family: 'mortise', serif !important;
    font-weight: 700;
}

/* Fließtext */
.klaro p,
.klaro .cm-body,
.klaro .cn-body,
.klaro .cm-list-description,
.klaro .context-notice,
.klaro .cm-modal .cm-footer,
.klaro .cookie-notice {
    font-family: 'tt-commons-pro', sans-serif !important;
}

/* =============================================================================
   Floating Privacy Button
   ============================================================================= */

.klaro-privacy-btn {
    position:         fixed;
    bottom:           1.5rem;
    left:             1.5rem;
    z-index:          9999;

    display:          flex;
    align-items:      center;
    justify-content:  center;

    width:            3rem;
    height:           3rem;
    padding:          0;
    border:           none;
    border-radius:    50%;
    cursor:           pointer;

    background-color: #004282;
    color:            #ffffff;
    box-shadow:       0 2px 8px rgba(0, 0, 0, .25);

    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.klaro-privacy-btn:hover,
.klaro-privacy-btn:focus-visible {
    background-color: #005baf;
    transform:        scale(1.08);
    box-shadow:       0 4px 14px rgba(0, 0, 0, .3);
    outline:          2px solid #ffffff;
    outline-offset:   2px;
}

.klaro-privacy-btn svg {
    width:  1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}

/* =============================================================================
   Consent Video – Klaro Contextual Consent Platzhalter
   Füllt den gesamten Video-Bereich aus, zentrierter Inhalt (max. 800px)
   ============================================================================= */

/* Context Notice: volle Fläche, zentriert, gebrandeter Hintergrund */
.bd-consent-video__inner .klaro .context-notice {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1.75rem;
    padding:         2rem 1.5rem;
    margin:          0;
    border:          none;
    border-radius:   0;
    box-shadow:      none;
    text-align:      center;

    /* Primärblau + subtiles Dot-Pattern */
    background-color: #004282;
    background-image: radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1px),
                      radial-gradient(ellipse at 10% 90%, rgba(53,157,84,.18) 0%, transparent 55%),
                      radial-gradient(ellipse at 90% 10%, rgba(53,157,84,.12) 0%, transparent 45%);
    background-size:  28px 28px, 100% 100%, 100% 100%;

    color: #ffffff;
}

/* Innerer Textblock: max. 800px */
.bd-consent-video__inner .klaro .context-notice-body {
    max-width:   800px;
    width:       100%;
    margin:      0 auto;
}

.bd-consent-video__inner .klaro .context-notice-body p {
    font-family: 'tt-commons-pro', sans-serif;
    font-size:   1.15rem;
    line-height: 1.6;
    color:       rgba(255, 255, 255, .9);
    margin:      0;
}

/* Schriftzug "YouTube" / "Vimeo" über dem Text */
.bd-consent-video__inner .klaro .context-notice-body strong {
    display:     block;
    font-family: 'mortise', serif;
    font-size:   1.5rem;
    font-weight: 700;
    color:       #ffffff;
    margin-bottom: .5rem;
}

/* Button-Bereich */
.bd-consent-video__inner .klaro .cn-ok,
.bd-consent-video__inner .klaro .cm-buttons {
    display:         flex;
    gap:             .75rem;
    flex-wrap:       wrap;
    justify-content: center;
}

/* Basis-Reset für beide Buttons */
.bd-consent-video__inner .klaro .cn-ok .cm-btn,
.bd-consent-video__inner .klaro .cm-buttons .cm-btn {
    padding:         .6rem 1.75rem;
    border-radius:   4px;
    font-family:     'tt-commons-pro', sans-serif;
    font-size:       1rem;
    font-weight:     600;
    border:          2px solid transparent;
    cursor:          pointer;
    transition:      background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.bd-consent-video__inner .klaro .cn-ok .cm-btn:hover,
.bd-consent-video__inner .klaro .cm-buttons .cm-btn:hover {
    transform: translateY(-1px);
}

/* "Ja"/"Einmal laden" im Context Consent komplett ausblenden */
.klaro .context-notice .cn-ok .cm-btn.cm-btn-accept,
.klaro .context-notice .cm-buttons .cm-btn.cm-btn-success {
    display: none !important;
}

/* "Immer laden" – Sekundärgrün */
.klaro .context-notice .cn-ok .cm-btn.cm-btn-accept-always,
.klaro .context-notice .cm-buttons .cm-btn.cm-btn-success-var {
    background-color: #359d54 !important;
    color:            #ffffff !important;
    border-color:     #359d54 !important;
}

.klaro .context-notice .cn-ok .cm-btn.cm-btn-accept-always:hover,
.klaro .context-notice .cm-buttons .cm-btn.cm-btn-success-var:hover {
    background-color: #2d8747 !important;
    border-color:     #2d8747 !important;
}