/* ===========================================================================
 * Delicieux Package – Standardwerte des Themes
 *
 * Diese Datei enthält ausschließlich CSS Custom Properties. Sie wird vor
 * delicieux.css geladen; der ThemeProcessor überschreibt die Werte anschließend
 * mit den Angaben aus den Site Settings. Dadurch bleibt die Seite auch dann
 * vollständig gestaltet, wenn keine Einstellungen gepflegt wurden.
 * ======================================================================== */

:root {
    /* ------------------------------------------------------------- Farben */
    --dl-primary: #63C85D;
    --dl-primary-rgb: 99, 200, 93;
    --dl-dark: #1E1E1E;
    --dl-dark-rgb: 30, 30, 30;
    /* Navigationsleiste; ohne eigene Einstellung wie die Dunkelfarbe */
    --dl-navbar-bg: var(--dl-dark);
    /* Schrift in der Leiste; der ThemeProcessor wählt sie nach Kontrast. */
    --dl-navbar-fg: #fff;
    --dl-navbar-fg-rgb: 255, 255, 255;
    --dl-text: #2F2E2F;
    --dl-text-rgb: 47, 46, 47;
    --dl-gallery: #D30F22;
    --dl-gallery-rgb: 211, 15, 34;

    /* Abgeleitete Farben. color-mix wird von allen aktuellen Browsern
       unterstützt; ältere fallen auf die Ausgangsfarbe zurück. */
    --dl-primary-dark: color-mix(in srgb, var(--dl-primary) 72%, #000);
    --dl-primary-light: color-mix(in srgb, var(--dl-primary) 78%, #fff);
    --dl-footer-bg: color-mix(in srgb, var(--dl-dark) 92%, #000);
    --dl-muted: rgba(var(--dl-text-rgb), .62);
    --dl-border: rgba(var(--dl-text-rgb), .23);

    /* ---------------------------------------------------------- Typografie */
    --dl-font-body: 'Heebo', Helvetica, Arial, sans-serif;
    --dl-font-heading: 'Nunito', Helvetica, Arial, sans-serif;
    /* Schreibschrift: Markenname und Zwischenüberschriften */
    --dl-font-script: 'Pacifico', cursive;
    /* Schauschrift: die große Überschrift im Startbild */
    --dl-font-display: 'Playball', cursive;

    /* ------------------------------------------------------------- Formen */
    --dl-radius: 3px;
    --dl-heading-border: 8px;

    /* -------------------------------------------------------- Seitenkopf */
    /* svh beruecksichtigt die ein- und ausfahrende Adressleiste mobiler Browser. */
    --dl-hero-height: 100svh;
    --dl-hero-image: none;
    --dl-hero-overlay: rgba(var(--dl-dark-rgb), .25);
    --dl-logo-height: 80px;

    /* --------------------------------------------------- Sektionsbänder */
    --dl-band-overlay: rgba(var(--dl-dark-rgb), .35);
    --dl-band-height: 350px;
    --dl-band-height-lg: 570px;

    /* -------------------------------------------------------- Navigation */
    /* Höhe des Logo-Bereichs; main.js misst die tatsächliche Höhe nach. */
    --dl-navbar-height: 120px;
    /* Schriftgröße der Menüpunkte */
    --dl-nav-font-size: 15px;
}

@media (min-width: 992px) {
    :root {
        --dl-band-height: var(--dl-band-height-lg);
    }
}