/* =============================================================================
   site-databula.css — Site-spezifische Styles für databula.de
   Wird über cms.site.css_file = 'site-databula.css' geladen.
   ========================================================================== */

/* ── Markenton aus dem Logo (public/img/databula-logo.svg) ──────────────────
   Signet: Himmelblau und Rosé, Schnittfläche Violett; Schriftzug als Verlauf
   Blau → Violett → Rosé. Violett trägt Buttons, Links und aktive Navigation,
   Himmelblau und Rosé bleiben Akzente.
   WCAG AA (06.10.2026): #fff/#6d28d9 7.10, #6d28d9/#f9f9ff 6.77,
   #1e1b4b/#a78bfa 5.87, #c4b5fd/#121212 10.15. */

/* WICHTIG: Jedes :root-Token MUSS im [data-theme="dark"]-Block gespiegelt
   werden — die Site-Datei lädt zuletzt, ein nur-:root-Token würde sonst
   per Source-Order auch den Dark-Basiswert aus base.css überschreiben. */
:root {
    --btn-primary-bg:    #6d28d9;
    --btn-primary-hover: #5b21b6;
    --btn-primary-text:  #ffffff;
    --link-color:        #6d28d9;
    --link-hover:        #5b21b6;
    --accent:            #7c3aed;
    --primary:           #6d28d9;
    --primary-container: #5b21b6;
    --on-primary-container: #f5f3ff;
    --brand-tint:        109, 40, 217;
    --brand-sky:         #0369a1;
    --brand-rose:        #be123c;
    --brand-gradient:    linear-gradient(90deg, #0284c7 0%, #6d28d9 50%, #e11d48 100%);
}

[data-theme="dark"] {
    --btn-primary-bg:    #a78bfa;
    --btn-primary-hover: #c4b5fd;
    --btn-primary-text:  #1e1b4b;
    --link-color:        #c4b5fd;
    --link-hover:        #ddd6fe;
    --accent:            #a78bfa;
    --primary:           #a78bfa;
    --primary-container: #4c1d95;
    --on-primary-container: #ede9fe;
    --brand-tint:        167, 139, 250;
    --brand-sky:         #38bdf8;
    --brand-rose:        #fb7185;
    --brand-gradient:    linear-gradient(90deg, #38bdf8 0%, #a855f7 50%, #fb7185 100%);
}

/* ── Logo im Kopf ─────────────────────────────────────────────────────────── */

.site-header-brand img {
    display: block;
    height: 36px;
    width: auto;
}

/* Hell/dunkel nach gewähltem Theme, nicht nur nach System-Einstellung */
.site-header-brand .brand-logo--dark { display: none; }
[data-theme="dark"] .site-header-brand .brand-logo--light { display: none; }
[data-theme="dark"] .site-header-brand .brand-logo--dark { display: block; }

/* Markenstreifen unter dem Kopf — der Verlauf des Schriftzugs */
.site-header {
    border-bottom: 3px solid transparent;
    border-image: var(--brand-gradient) 1 / 3px;
}

@media (max-width: 768px) {
    .site-header-brand img {
        height: 28px;
    }
}