/* ==========================================================================
   Wasted! Openair — Marke.

   Aussehen und Layout stehen in festival.css (wird vom ddlm_clubs-Set vor
   dieser Datei geladen). Hier steht nur, was diese Site von den anderen
   unterscheidet. Frueher lagen hier zusaetzlich 380 Zeilen, die wortgleich
   auch in NBGPunkfest.css und Weinturm.css standen.
   ========================================================================== */

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

    --bs-primary: #0aa8b0;
    --bs-primary-rgb: 10, 168, 176;

    --bs-primary-bg-subtle: #ceeeef;
    --bs-primary-border-subtle: #9ddcdf;
    --bs-primary-text-emphasis: #044346;

    /* Schwarz auf der Basisflaeche ergibt 7,24:1, auf der Emphasis-Flaeche 11,07:1. */
    --klaro-primary-contrast: #000000;
    --klaro-primary-emphasis-contrast: #ffffff;
    --klaro-primary-hover-contrast: #ffffff;

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

    --bs-secondary: #e74f0c;
    --bs-secondary-rgb: 231, 79, 12;

    --bs-secondary-bg-subtle: #fadcce;
    --bs-secondary-border-subtle: #f5b99e;
    --bs-secondary-text-emphasis: #5c2005;

    /* Schwarz auf der Basisflaeche ergibt 5,52:1, auf der Emphasis-Flaeche 12,62:1. */
    --klaro-secondary-contrast: #000000;
    --klaro-secondary-emphasis-contrast: #ffffff;
    --klaro-secondary-hover-contrast: #ffffff;
}

/* Der Stoerer im Hero ist gelb — die Datumszeile darauf bleibt weiss mit
   dem Schlagschatten aus festival.css. */
.divide-cloud-inside .cloud-text h1 {
    color: #fff !important;
}

/* Die Buehne dieser Site endet bei der halben Fensterhoehe — so stand es
   hier vor der Zusammenfuehrung (.swiper-container { height: 50vh }).
   Der gemeinsame Deckel in festival.css liegt bei 78vh; das passt den
   anderen Festivals, hier schob es alles andere unter den Falz.
   Nur ab 992px, damit die Buehne auf dem Telefon hochkant bleibt. */
@media (min-width: 992px) {
    .swiper-container {
        max-height: 50vh;
    }
}

/* Die Wortmarke ist weiss auf dem lila Hintergrundbild der Leiste und
   darf deshalb etwas groesser stehen als der gemeinsame Standard. */
@media (min-width: 992px) {
    .navbar-logo-wrapper img {
        max-height: 76px;
    }
}

/* ==========================================================================
   Punk-Schicht — Kopierladen statt Hochglanz.

   Das Gemeinsame in festival.css ist bewusst neutral, damit es jedem
   Festival passt. Wasted ist Stoner-Punk am Baggersee: hier darf es
   nach Flyer aussehen. Die Mittel sind wenige und ziehen sich durch -
   harte Kanten, versetzte Schatten ohne Weichzeichner, Plakatschrift in
   Versalien, gerissene Raender. Kein Effekt kostet Lesbarkeit: die
   Farben kommen aus dem Farbvertrag oben (Tuerkis mit Schwarz 7,24:1,
   Orange mit Schwarz 5,52:1), und die Schrift im Fliesstext bleibt die
   Leseschrift.

   Nur in dieser Datei, weil nur diese Site sie laedt - die anderen
   Festivals bleiben, wie sie sind.
   ========================================================================== */

:root {
    /* Farbe des harten Schattens. Auf hellem Grund Schwarz, auf dunklem
       Grund das Orange - Schwarz auf Schwarz waere keiner. */
    --wasted-schlag: #111;
    --wasted-versatz: 4px;
}

html[data-bs-theme="dark"],
.festival-theme [data-bs-theme="dark"] {
    --wasted-schlag: var(--bs-secondary);
}

::selection {
    background: var(--bs-secondary);
    color: #000;
}

/* --- Kopfleiste ---------------------------------------------------------
   Die Menuepunkte standen fett in der Leseschrift mit weichem Schatten.
   Jetzt in der Plakatschrift wie die Ueberschriften, mit hartem Versatz
   statt Schein - das haelt auch auf dem unruhigen Kopfbild. Statt der
   duennen Linie beim Zeigen ein orangener Pinselstrich, derselbe
   Duktus wie der Stoerer im Hero. */
@media (min-width: 992px) {
    .navbar .navbar-nav .gradient-text {
        font-family: var(--fest-font-display);
        font-weight: 400 !important;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
        padding-inline: 0.15em;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 11 C30 4 60 15 95 8 S160 3 198 9 L197 15 C160 11 120 18 80 14 S25 17 3 16 Z' fill='%23e74f0c'/%3E%3C/svg%3E");
        background-position: 0 88%;
        background-size: 0% 0.42em;
    }

    .navbar .navbar-nav .gradient-text:hover,
    .navbar .navbar-nav .gradient-text:focus-visible,
    .navbar .navbar-nav .nav-item.active > .gradient-text,
    .navbar .navbar-nav .nav-item.active > div > .gradient-text {
        background-size: 100% 0.42em;
    }
}

/* --- Ueberschriften -----------------------------------------------------
   Plakatschrift in Versalien mit einem orangenen Fehldruck dahinter,
   wie ein verrutschter zweiter Farbdurchgang am Kopierer. */
/* Das Datum im Stoerer bleibt aussen vor: es steht selbst auf Orange
   und hat seinen eigenen Schatten aus festival.css. */
.festival-theme .frame :is(h1, h2, .h1, .h2):not(.cloud-text *) {
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-shadow: 0.06em 0.06em 0 color-mix(in srgb, var(--bs-secondary) 85%, transparent);
}

/* --- Knoepfe ------------------------------------------------------------
   Aufkleber statt Pille: eckig, schwarzer Rand, harter Schatten. Beim
   Zeigen hebt er sich an, beim Druecken sitzt er flach auf - man sieht,
   dass etwas passiert, ohne dass es wackelt. */
.festival-theme .btn-primary,
.festival-theme .btn-secondary {
    --bs-btn-border-radius: 2px;
    --bs-btn-border-color: #111;
    --bs-btn-hover-border-color: #111;
    --bs-btn-active-border-color: #111;
    border: 3px solid #111;
    font-family: var(--fest-font-display);
    font-weight: 400;
    font-size: var(--fest-step-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: var(--wasted-versatz) var(--wasted-versatz) 0 var(--wasted-schlag);
    transition: transform var(--fest-tempo) ease,
                box-shadow var(--fest-tempo) ease;
}

.festival-theme .btn-primary:hover,
.festival-theme .btn-primary:focus-visible,
.festival-theme .btn-secondary:hover,
.festival-theme .btn-secondary:focus-visible {
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--wasted-versatz) + 2px) calc(var(--wasted-versatz) + 2px) 0 var(--wasted-schlag);
}

.festival-theme .btn-primary:active,
.festival-theme .btn-secondary:active {
    transform: translate(var(--wasted-versatz), var(--wasted-versatz));
    box-shadow: 0 0 0 var(--wasted-schlag);
}

@media (prefers-reduced-motion: reduce) {
    .festival-theme .btn-primary,
    .festival-theme .btn-secondary {
        transition: none;
    }
}

/* --- CTA-Baender --------------------------------------------------------
   Gerissene Kante oben und unten statt runder Ecken - wie aus einem
   Plakat gerissen. Die Kante ist fest berechnet, nicht zufaellig pro
   Aufruf, damit nichts beim Laden springt. */
.festival-theme .frame-type-ddfthiel_blockctax1 .jarallax {
    border-radius: 0;
    clip-path: polygon(0% 6px, 3.57% 3px, 7.14% 9px, 10.71% 1px, 14.29% 0px, 17.86% 0px, 21.43% 4px, 25% 0px, 28.57% 6px, 32.14% 4px, 35.71% 0px, 39.29% 4px, 42.86% 3px, 46.43% 0px, 50% 0px, 53.57% 9px, 57.14% 9px, 60.71% 0px, 64.29% 3px, 67.86% 0px, 71.43% 4px, 75% 9px, 78.57% 0px, 82.14% 4px, 85.71% 0px, 89.29% 3px, 92.86% 1px, 96.43% 1px, 100% 4px, 100% 100%, 96.43% calc(100% - 4px), 92.86% calc(100% - 4px), 89.29% calc(100% - 9px), 85.71% 100%, 82.14% calc(100% - 3px), 78.57% 100%, 75% calc(100% - 4px), 71.43% calc(100% - 3px), 67.86% calc(100% - 6px), 64.29% calc(100% - 9px), 60.71% calc(100% - 3px), 57.14% calc(100% - 4px), 53.57% 100%, 50% calc(100% - 4px), 46.43% calc(100% - 6px), 42.86% calc(100% - 4px), 39.29% calc(100% - 1px), 35.71% calc(100% - 3px), 32.14% 100%, 28.57% calc(100% - 4px), 25% calc(100% - 4px), 21.43% calc(100% - 1px), 17.86% calc(100% - 3px), 14.29% calc(100% - 6px), 10.71% 100%, 7.14% calc(100% - 4px), 3.57% calc(100% - 1px), 0% 100%);
}

/* Auf dem Band ist der Hintergrund dunkel: der Knopf bekommt dort das
   Orange als Schatten, und der orangene Fehldruck der Ueberschrift
   bleibt - auf Weiss wird er zum Schwarz nicht gebraucht. */
/* Auf dem Band: der Knopf wechselt ins Orange, damit er sich vom
   tuerkis eingefaerbten Foto abhebt (Schwarz auf Orange 5,52:1), und
   wirft einen tuerkisen Schatten - drei Farben wie im Siebdruck. */
.festival-theme .frame-type-ddfthiel_blockctax1 .jarallax {
    --wasted-schlag: var(--bs-primary);
}

.festival-theme .frame-type-ddfthiel_blockctax1 .jarallax .btn-primary {
    --bs-btn-color: var(--fest-on-secondary);
    --bs-btn-bg: var(--fest-secondary);
    --bs-btn-hover-color: var(--fest-on-secondary);
    --bs-btn-hover-bg: var(--fest-secondary);
    --bs-btn-active-color: var(--fest-on-secondary);
    --bs-btn-active-bg: var(--fest-secondary);
    background: var(--fest-secondary);
    color: var(--fest-on-secondary);
}

/* --- Galerie ------------------------------------------------------------
   Abzuege an der Pinnwand: weisser Rand, harter Schatten, jeder ein
   wenig schief. Beim Zeigen richtet sich das Bild auf. Die Drehung
   haengt an der Position (nth-child), damit sie bei jedem Laden gleich
   ist. Die Galerie setzt ihre Kacheln absolut - die Drehung verschiebt
   also nichts im Raster. */
.festival-theme .gallery-image-wrapper {
    border-radius: 2px;
    border: 5px solid #fff;
    box-shadow: var(--wasted-versatz) var(--wasted-versatz) 0 var(--wasted-schlag);
    transform: rotate(var(--wasted-dreh, 0deg));
    transition: transform var(--fest-tempo) ease, box-shadow var(--fest-tempo) ease;
}

.festival-theme .gallery-item:nth-child(4n + 1) .gallery-image-wrapper { --wasted-dreh: -1.2deg; }
.festival-theme .gallery-item:nth-child(4n + 2) .gallery-image-wrapper { --wasted-dreh: 0.8deg; }
.festival-theme .gallery-item:nth-child(4n + 3) .gallery-image-wrapper { --wasted-dreh: -0.5deg; }
.festival-theme .gallery-item:nth-child(4n + 4) .gallery-image-wrapper { --wasted-dreh: 1.4deg; }

.festival-theme .gallery-image-wrapper:hover,
.festival-theme .gallery-image-wrapper:focus-within {
    --wasted-dreh: 0deg;
    box-shadow: calc(var(--wasted-versatz) + 3px) calc(var(--wasted-versatz) + 3px) 0 var(--bs-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .festival-theme .gallery-image-wrapper {
        transition: none;
    }
}

/* --- Platzhalter fuer Video und Karte -----------------------------------
   Solange niemand YouTube oder Google Maps freigegeben hat, stand hier
   eine 700 px hohe hellgraue Flaeche - das groesste Element der
   Startseite war ein leerer Kasten. Jetzt eine dunkle Buehne mit
   Absperrband oben und unten: man sieht, dass hier etwas kommt, und
   die Frage steht weiss auf Schwarz (19:1). */
.festival-theme .klaro .context-notice {
    background-color: #111 !important;
    background-image:
        repeating-linear-gradient(-45deg, var(--bs-secondary) 0 14px, #111 14px 28px),
        repeating-linear-gradient(-45deg, var(--bs-secondary) 0 14px, #111 14px 28px) !important;
    background-size: 100% 10px, 100% 10px !important;
    background-position: top left, bottom left !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
}

.festival-theme .klaro .context-notice p {
    color: #fff !important;
    font-family: var(--fest-font-display);
    font-size: var(--fest-step-2);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.festival-theme .klaro .context-notice .cm-btn {
    font-family: var(--fest-font-display);
    font-weight: 400;
    font-size: var(--fest-step-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 3px solid #fff !important;
    border-radius: 2px !important;
    box-shadow: var(--wasted-versatz) var(--wasted-versatz) 0 var(--bs-primary);
}

/* Die Buehne fuellt ihren Rahmen ganz aus. Vorher sass der Hinweis mit
   12 px Luft im hellen Rahmen des Videos, und unter der Karte blieb ein
   heller Streifen stehen, weil der Rahmen hoeher ist als der Hinweis. */
.festival-theme .video-wrapper,
.festival-theme .google-maps-wrapper {
    border-radius: 0;
    border: 0;
    background: #111;
}

.festival-theme .google-maps-wrapper > div,
.festival-theme .video-wrapper > div,
.festival-theme .klaro.cm-as-context-notice {
    height: 100%;
    padding: 0;
}

.festival-theme .klaro .context-notice {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fest-space-s);
}

/* Solange das Video nicht geladen ist, gibt es kein 16:9 zu halten.
   Im festen Seitenverhaeltnis schnitt der Rahmen auf dem Telefon die
   beiden Knoepfe ab - man konnte das Video gar nicht erst freigeben.
   Ohne Video waechst der Rahmen mit dem Hinweis, mit einer
   Mindesthoehe, damit die Stelle auf dem Desktop nicht zum Strich wird. */
.festival-theme .video-wrapper:has(> .klaro.cm-as-context-notice)::before,
.festival-theme .video-wrapper:has(> div > .klaro.cm-as-context-notice)::before {
    display: none;
}

.festival-theme .video-wrapper:has(.klaro.cm-as-context-notice) {
    min-height: clamp(260px, 36vw, 520px);
    display: flex;
}

.festival-theme .video-wrapper:has(.klaro.cm-as-context-notice) > * {
    position: relative;
    flex: 1;
}

.festival-theme .video-wrapper .klaro .context-notice {
    padding-block: var(--fest-space-l) !important;
}

/* --------------------------------------------------------------------------
   Footer: die Seeufer-Silhouette (See_2027_Online.svg) als Buehne.

   festival.css legt das Footerbild als abgedunkelte Flaeche hinter den
   Inhalt. Bei dieser Grafik hiess das: Baeume dunkel auf dunkel, der See
   unter einem Verlauf braun statt orange, das Gras unten abgeschnitten -
   und unter 1400 px war sie ganz weg (d-xxl-block im Template).

   Die Grafik hat einen freien Himmel und endet unten in dunklem Gras. Sie
   steht deshalb jetzt als eigenes Band ueber dem Inhalt: der Himmel ist
   die Seitenflaeche, das Gras laeuft in den dunklen Fuss ueber.
   -------------------------------------------------------------------------- */

/* Der Fuss in der Grasfarbe der Grafik - sonst stuende eine Kante, wo
   das Bild aufhoert. Ueber die Variable ziehen Meta-Leiste und
   Copyright-Band mit. */
footer {
    --fest-dunkel: #1d191c;
}

/* Der Himmel der Grafik ist durchsichtig und soll die Seitenflaeche
   zeigen, in beiden Themen. Dunkel ist deshalb nicht der ganze Fuss,
   sondern nur die Inhaltsebene unter dem Bild - und die untere Haelfte
   des Fusses: mobil haelt er dort Platz fuer die feste Leiste frei
   (festival.css), der stand sonst weiss unter dem dunklen Fuss. */
footer {
    background: linear-gradient(var(--fest-dunkel), var(--fest-dunkel)) bottom / 100% 50% no-repeat;
}

footer > .position-relative:has(> div:first-child img[src]:not([src=""])) {
    background: transparent;
}

footer > .position-relative > div:first-child:has(img[src]:not([src=""])) + .position-absolute {
    background: var(--fest-dunkel);
}

footer > .position-relative > div:first-child:has(img[src]:not([src=""])) {
    position: relative;
    inset: auto;
}

/* Kein Verlauf darueber: die Schrift steht nicht mehr auf dem Motiv. */
footer > .position-relative > div:first-child::after {
    content: none;
}

footer > .position-relative > div:first-child .d-none.d-xxl-block {
    display: block !important;
}

/* Schmale Bildschirme: nicht einfach mitschrumpfen (bei 390 px waeren es
   gut 110 px Hoehe), sondern seitlich beschneiden. Verankert unten, damit
   Gras und Steg immer bleiben. */
footer > .position-relative > div:first-child img {
    display: block;
    height: clamp(150px, 28.6vw, 520px);
    object-position: center bottom;
}

footer .footer-logo-invert img {
    max-height: clamp(96px, 12vw, 170px);
    width: auto;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
}

/* Unter dem Logo stand mb-5 plus Innenabstand - ein Loch zwischen Szene
   und Rechtslinks. */
footer .row.align-items-start.mb-5 {
    margin-bottom: 0 !important;
}

/* Das Gras endet schon dunkel - voller Abstand darunter liess das Logo
   von der Szene abreissen. */
footer > .position-relative > div:first-child:has(img[src]:not([src=""])) + .position-absolute .pt-md-7 {
    padding-top: var(--fest-space-s) !important;
}