/* ============================================================================
   CookieConsent – CI-Anpassungen für AcapellArt
   ----------------------------------------------------------------------------
   Die Bibliothek vanilla-cookieconsent v3.1.0 liefert eigene CSS-Variablen,
   die wir hier an die bestehende CI (Coral/Navy, DM Sans, warme Hintergründe,
   moderne Rundungen) anpassen. Es wird KEINE eigene Consent-Komponente
   gebaut – wir überschreiben ausschließlich Variablen + wenige Details.
   ========================================================================== */

/* Consent-Modal & Preferences-Modal teilen sich denselben Variablen-Scope (#cc-main). */
#cc-main {
    /* Typografie an die Seitentypografie anlehnen. */
    --cc-font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Etwas weichere Rundungen wie auf der Landingpage. */
    --cc-modal-border-radius: 18px;
    --cc-btn-border-radius: 999px;

    /* Etwas mehr Luft am Rand. */
    --cc-modal-margin: clamp(0.75rem, 2vw, 1.25rem);

    /* Etwas langsamere, ruhigere Modal-Animation. */
    --cc-modal-transition-duration: 0.25s;

    /* CI: warmer Hintergrund statt reinem Weiß. */
    --cc-bg: #fff4ed;

    /* CI: Navy als Haupttext. */
    --cc-primary-color: #1d3557;

    /* Etwas weicher als die Default-Sekundärfarbe. */
    --cc-secondary-color: #5b6b7e;

    /* CI: Coral als prominenter Akzeptieren-Button. */
    --cc-btn-primary-bg: #FE6B37;
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: #FE6B37;
    --cc-btn-primary-hover-bg: #d6541f;
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: #d6541f;

    /* Sekundärer Button: warm, gut lesbar, klar abgegrenzt. */
    --cc-btn-secondary-bg: #ffffff;
    --cc-btn-secondary-color: #1d3557;
    --cc-btn-secondary-border-color: #f0d3ba;
    --cc-btn-secondary-hover-bg: #fbd6b8;
    --cc-btn-secondary-hover-color: #142a47;
    --cc-btn-secondary-hover-border-color: #f0d3ba;

    /* Toggle: Coral wenn an, dezent-grau wenn aus. */
    --cc-toggle-on-bg: #FE6B37;
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-bg: #5b6b7e;
    --cc-toggle-off-knob-bg: #ffffff;

    /* Notwendig-Toggle (readOnly): warm-grau, sichtbar als "immer an". */
    --cc-toggle-readonly-bg: #f0d3ba;
    --cc-toggle-readonly-knob-bg: #ffffff;

    /* Trennlinien / Sektoren-Borders an CI anlehnen. */
    --cc-separator-border-color: rgba(240, 211, 186, 0.55);
    --cc-section-category-border: #f0d3ba;
    --cc-cookie-category-block-bg: #ffffff;
    --cc-cookie-category-block-border: rgba(240, 211, 186, 0.55);
    --cc-cookie-category-block-hover-bg: #fff4ed;
    --cc-cookie-category-block-hover-border: #f0d3ba;
    --cc-cookie-category-expanded-block-hover-bg: #fbd6b8;

    /* Footer im Modal. */
    --cc-footer-bg: #fbd6b8;
    --cc-footer-color: #1d3557;
    --cc-footer-border-color: rgba(240, 211, 186, 0.55);

    /* Linkfarbe im Beschreibungstext (Datenschutz/Impressum). */
    --cc-link-color: #d6541f;
}

/* Etwas mehr Padding und Lesbarkeit im Modal-Body. */
#cc-main .cm__body,
#cc-main .pm__body {
    padding: 1.25rem 1.5rem 1.5rem;
}

#cc-main .cm__desc {
    line-height: 1.55;
}

/* Akzeptieren-Button (primär) optisch hervorheben.
   Die Bibliothek stylt ihn je nach Layout/equalWeightButtons unterschiedlich –
   hier sorgen wir für ein einheitliches, hochwertiges Erscheinungsbild. */
#cc-main .cm__btn--primary,
#cc-main .pm__btn--primary {
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(29, 53, 87, 0.08);
}

/* Sekundäre Buttons (Einstellungen, Nur notwendige) klar abgegrenzt. */
#cc-main .cm__btn--secondary,
#cc-main .pm__btn--secondary {
    font-weight: 600;
}

/* Footer-Links innerhalb des Consent-Modals kleiner und unaufdringlich. */
#cc-main .cm__footer,
#cc-main .cm__footer a,
#cc-main .pm__footer,
#cc-main .pm__footer a {
    font-size: 0.85rem;
}

/* Modal-Container soll das bestehende Skip-Link (z-index 1000) nicht überdecken,
   falls die Bibliothek ihren Root woanders anhängt. */
#cc-main {
    z-index: 1100;
}

/* ============================================================================
   Consent-Modal: zentriertes Dialogbox-Layout (Layout: 'box' + 'middle center').
   Die Library bringt für .cm--box eine Default-Breite von 24rem (~384px) mit.
   Für AcapellArt soll das Modal auf Desktop als kompakter, gut lesbarer
   Dialog wirken (max ~720px), ohne dabei ein Fullscreen-Overlay zu werden.
   ========================================================================== */
#cc-main .cm--box {
    max-width: 720px;
}

/* Auf Mobile: fast die volle verfügbare Breite nutzen, mit Sicherheits-Abstand. */
@media (max-width: 767.98px) {
    #cc-main .cm--box {
        max-width: calc(100vw - 2 * var(--cc-modal-margin));
    }
}

/* Etwas mehr Innenabstand im Body, damit der Dialog nicht „klamm" wirkt. */
#cc-main .cm--box .cm__body {
    padding: 1.5rem 1.75rem 1.75rem;
}

/* Titel und Beschreibung: leicht größer für bessere Hierarchie/Lesbarkeit. */
#cc-main .cm--box .cm__title {
    font-size: 1.25em;
}

#cc-main .cm--box .cm__desc {
    font-size: 0.95em;
    line-height: 1.55;
}

/* Buttons (jede Größe): konsistente Mindesthöhe für gute Klickbarkeit. */
#cc-main .cm--box .cm__btn {
    min-height: 48px;
}

/* Mobile: Buttons stacked und gut tippbar. */
@media (max-width: 479.98px) {
    #cc-main .cm__btn,
    #cc-main .pm__btn {
        min-height: 48px;
    }
}