/* ==========================================================================
   Nürnberg Punk Fest — Marke.

   Aussehen und Layout stehen in festival.css (wird vom dd_clubs-Set vor
   dieser Datei geladen). Hier steht nur, was diese Site unterscheidet.
   ========================================================================== */

:root {
    /* ========= PRIMARY ========= */

    --bs-primary: #2dbfaa;
    --bs-primary-rgb: 45, 191, 170;

    --bs-primary-bg-subtle: #d5f2ee;
    --bs-primary-border-subtle: #abe5dd;
    --bs-primary-text-emphasis: #124c44;

    /* Schwarz auf der Basisflaeche ergibt 9,14:1, auf der Emphasis-Flaeche 9,80:1. */
    --klaro-primary-contrast: #000000;
    --klaro-primary-emphasis-contrast: #ffffff;
    --klaro-primary-hover-contrast: #ffffff;

    /* ========= SECONDARY ========= */

    --bs-secondary: #f2e354;
    --bs-secondary-rgb: 242, 227, 84;

    --bs-secondary-bg-subtle: #fcf9dd;
    --bs-secondary-border-subtle: #faf4bb;
    --bs-secondary-text-emphasis: #615b22;

    /* Schwarz auf der Basisflaeche ergibt 15,89:1, auf der Emphasis-Flaeche 6,94:1. */
    --klaro-secondary-contrast: #000000;
    --klaro-secondary-emphasis-contrast: #ffffff;
    --klaro-secondary-hover-contrast: #ffffff;
}

/* Diese Site liefert die Wortmarke als breite Bilddatei ohne eigenen
   Rand — begrenzt wird deshalb ueber die Breite, nicht ueber die Hoehe. */
.navbar-logo-wrapper img {
    max-width: min(60vw, 300px);
}

/* Das Logo in Inhaltselement c133 steht auf hellem Grund und darf nicht
   invertiert werden. */
#c133 .logo-light {
    display: none !important;
}

#c133 .logo-dark {
    display: block !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ohne Stoerer-Bild setzt festival.css das Datum auf eine Pille im
   Verlauf Tuerkis-Gelb. Auf den Fotos dieser Site wirkte das wie ein
   Fremdkoerper. Das Datum steht hier frei, weiss auf dem dunklen Verlauf
   am unteren Bildrand (.swiper-container::after). */
.divide-cloud-inside--plain .cloud-text {
    background: none;
    box-shadow: none;
    padding: 0;
}

.divide-cloud-inside--plain .cloud-text h1 {
    color: #fff !important;
    font-size: clamp(1.4rem, 0.6rem + 3.4vw, 3rem) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}