/* /opt/christianschoch/html/js/klaro-unternehmens-ki.css
   14.09.2026, Job 944: NUR fuer die Bestellseite Unternehmens KI (christianschoch.de/kurs/*).
   Inhaltsgleiche Kopie von klaro-kompass.css, damit eine Aenderung an der einen Strecke
   die andere nicht mitzieht. Wird NACH klaro-custom.css geladen.

   Begruendung aus dem Original:
   Warum: Klaros Default-Theme faerbt den Fliesstext im Modal hell (Dark-Theme-Erbe).
   Auf dem weissen Hintergrund aus klaro-custom.css war der Einwilligungstext faktisch
   unlesbar. Ein Consent-Text, den niemand lesen kann, waere kein informierter Consent.
   Inhaltsgleich mit klaro-finanzierung.css (job-427), wo derselbe Fehler zuerst auffiel.
   Ausserdem: "Auswahl speichern" ist weder Zustimmung noch Ablehnung und wird deshalb
   neutral gezeichnet, nicht als zweiter gefuellter Button neben "Alle akzeptieren".
*/

/* --- Fliesstext im Modal lesbar machen ------------------------------------ */
/* ACHTUNG: Klaro rendert die Beschreibung im .cm-header (nicht im .cm-body). */
#klaro .cookie-modal .cm-modal .cm-header p,
#klaro .cookie-modal .cm-modal .cm-header p span,
#klaro .cookie-modal .cm-modal .cm-header p strong,
#klaro .cookie-modal .cm-modal .cm-body,
#klaro .cookie-modal .cm-modal .cm-body p,
#klaro .cookie-modal .cm-modal .cm-body li,
#klaro .cookie-modal .cm-modal .cm-body span,
#klaro .cookie-modal .cm-modal .cm-body strong {
    color: #3a4a5c !important;
}
#klaro .cookie-modal .cm-modal .cm-body strong,
#klaro .cookie-modal .cm-modal .cm-header p strong {
    color: #042344 !important;
    font-weight: 600 !important;
}
#klaro .cookie-modal .cm-modal .cm-header p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #3a4a5c !important;
}
#klaro .cookie-modal .cm-modal .cm-header p a,
#klaro .cookie-modal .cm-modal .cm-header p a:visited {
    color: #2563EB !important;
    text-decoration: underline !important;
}
#klaro .cookie-modal .cm-modal .cm-body p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 12px !important;
}
#klaro .cookie-modal .cm-modal .cm-body a,
#klaro .cookie-modal .cm-modal .cm-body a:visited {
    color: #2563EB !important;
    text-decoration: underline !important;
}
#klaro .cookie-modal .cm-modal .cm-caret,
#klaro .cookie-modal .cm-modal .cm-caret a,
#klaro .cookie-modal .cm-modal .cm-services .cm-service p,
#klaro .cookie-modal .cm-modal .cm-purpose .cm-list-description {
    color: #6e6e73 !important;
}
#klaro .cookie-modal .cm-modal .cm-list-title,
#klaro .cookie-modal .cm-modal .cm-list-label .cm-list-title {
    color: #042344 !important;
    background: transparent !important;
}
#klaro .cookie-modal .cm-modal .cm-powered-by,
#klaro .cookie-modal .cm-modal .cm-powered-by a {
    color: #9ca3af !important;
    font-size: 11px !important;
}

/* --- Gleichwertige Schaltflaechen ----------------------------------------- */
/* "Auswahl speichern" ist weder Zustimmung noch Ablehnung: neutral, nicht als zweiter
   blauer Primary-Button. Sonst staenden zwei gefuellte Buttons gegen einen Rahmen-Button. */
#klaro .cookie-modal .cm-modal button.cm-btn.cm-btn-accept:not(.cm-btn-accept-all) {
    background: #ffffff !important;
    color: #042344 !important;
    border: 1px solid #d1d5db !important;
    text-decoration: none !important;
    margin-right: 0 !important;
    padding: 10px 20px !important;
}
#klaro .cookie-modal .cm-modal button.cm-btn.cm-btn-accept:not(.cm-btn-accept-all):hover {
    background: #f5f5f7 !important;
    border-color: #9ca3af !important;
}
/* Ablehnen und Akzeptieren: identische Groesse, identische Typo, gleiche Reihe. */
#klaro .cookie-modal .cm-modal .cm-footer .cm-btn {
    min-width: 168px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 22px !important;
    white-space: nowrap !important;
}
#klaro .cookie-modal .cm-modal .cm-footer-buttons,
#klaro .cookie-modal .cm-modal .cm-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* --- Mobile: untereinander, volle Breite, gleiche Groesse ------------------ */
@media (max-width: 640px) {
    #klaro .cookie-modal .cm-modal .cm-footer,
    #klaro .cookie-modal .cm-modal .cm-footer-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #klaro .cookie-modal .cm-modal .cm-footer .cm-btn {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    /* Reihenfolge unveraendert lassen: Ablehnen zuerst, Akzeptieren zuletzt (kein Nudge). */
    #klaro .cookie-modal .cm-modal .cm-powered-by {
        text-align: center !important;
    }
}