/* ==========================================================================
   Aussehen einzelner Elemente
   ==========================================================================
   Gewaehlt in der Backstage unter Websites → Seiten & Texte → "Aussehen"
   (Content\ElementLooks). Geladen nach festival.css auf allen Festival-
   und Vereinsseiten (setup.typoscript, "Festivalseiten — gemeinsame
   Designschicht").

   Bausteine aus dem Theme speichern die Wahl in tt_content.layout; der
   Rahmen um das Element schreibt sie als .frame-layout-N. Die Zahlen
   stehen in ElementLooks::GROUPS und duerfen sich nie aendern. Plugins
   (Galerie, Infos & FAQ) setzen eigene Klassen aus settings.design.

   Alles haengt an den Tokens aus festival.css (--fest-*): Markenfarbe,
   lesbare Farbe darauf, Flaechen, Linien, Plakatschrift. Dunkles Thema
   (html[data-bs-theme="dark"]) dreht die Tokens selbst um - hier steht
   nur, wo eine Flaeche bewusst gegen das Thema steht (Markenflaeche,
   "Nacht"-Kopf).
   ========================================================================== */


/* --------------------------------------------------------------------------
   Gemeinsame Bausteine der Gestaltungen
   -------------------------------------------------------------------------- */

/* Markenflaeche: Hintergrund in der Hauptfarbe, Schrift in der dazu
   errechneten lesbaren Farbe. Alles darin, was das Theme fest einfaerbt
   (Verlaufsschrift, .text-dark, .text-primary, .lead), folgt der Schrift. */
.festival-theme .look-brand-surface,
.festival-theme .frame-type-ddfthiel_blockcta14.frame-layout-2 .bg-gray-900,
.festival-theme .frame-type-ddfthiel_blockctax2.frame-layout-2 .position-relative.z-1,
.festival-theme .frame-type-ddfthiel_blockfact1.frame-layout-2 section,
.festival-theme .frame-type-ddfthiel_blocklocationx1.frame-layout-2 section {
    --bs-body-color: var(--fest-on-primary);
    --bs-heading-color: var(--fest-on-primary);
    --bs-emphasis-color: var(--fest-on-primary);
    --bs-secondary-color: var(--fest-on-primary);
    background: var(--fest-primary) !important;
    color: var(--fest-on-primary);
    color-scheme: normal;
}

.festival-theme :is(
    .frame-type-ddfthiel_blockcta14.frame-layout-2 .bg-gray-900,
    .frame-type-ddfthiel_blockctax2.frame-layout-2 .position-relative.z-1,
    .frame-type-ddfthiel_blockfact1.frame-layout-2 section
) :is(h1, h2, h3, h4, p, small, span, li, .lead, .text-dark, .text-primary, .gradient-text) {
    color: var(--fest-on-primary) !important;
    background: none;
    -webkit-text-fill-color: currentColor;
}

/* Knoepfe auf der Markenflaeche: umgekehrt, sonst Primaerknopf auf
   Primaerflaeche. */
.festival-theme :is(
    .frame-type-ddfthiel_blockcta14.frame-layout-2 .bg-gray-900,
    .frame-type-ddfthiel_blockctax2.frame-layout-2 .position-relative.z-1
) .btn {
    --bs-btn-color: var(--fest-primary);
    --bs-btn-bg: var(--fest-on-primary);
    --bs-btn-border-color: var(--fest-on-primary);
    --bs-btn-hover-color: var(--fest-primary);
    --bs-btn-hover-bg: var(--fest-on-primary);
    --bs-btn-hover-border-color: var(--fest-on-primary);
    background: var(--fest-on-primary);
    color: var(--fest-primary) !important;
    border-color: var(--fest-on-primary);
}

.festival-theme :is(
    .frame-type-ddfthiel_blockcta14.frame-layout-2 .bg-gray-900,
    .frame-type-ddfthiel_blockctax2.frame-layout-2 .position-relative.z-1
) .btn[class*="btn-outline-"] {
    background: transparent;
    color: var(--fest-on-primary) !important;
}

/* Plakatschrift fuer Ueberschriften der "Plakat"-Gestaltungen. */
.festival-theme :is(
    .frame-type-ddfthiel_blockcta14.frame-layout-3,
    .frame-type-ddfthiel_blockcta4.frame-layout-3,
    .frame-type-ddfthiel_blockctax2.frame-layout-3
) :is(h2, h3) {
    font-family: var(--fest-font-display);
    font-size: clamp(2.75rem, 1.6rem + 6vw, 6.5rem) !important;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-wrap: balance;
}


/* --------------------------------------------------------------------------
   Aufruf mit Knoepfen (block-cta-14) - 1 Umrandet, 2 Markenfarbe, 3 Plakat
   -------------------------------------------------------------------------- */

/* 1 Umrandet: die dunkle Flaeche wird zur Seitenflaeche mit Markenrahmen. */
.festival-theme .frame-type-ddfthiel_blockcta14.frame-layout-1 .bg-gray-900,
.festival-theme .frame-type-ddfthiel_blockcta4.frame-layout-1 .bg-pattern {
    --bs-body-color: var(--fest-ink);
    --bs-heading-color: var(--fest-ink);
    --bs-emphasis-color: var(--fest-ink);
    background: var(--fest-flaeche) !important;
    color: var(--fest-ink);
    border: 3px solid var(--fest-primary);
    border-radius: var(--fest-radius) !important;
    color-scheme: light;
}

html[data-bs-theme="dark"] .festival-theme .frame-type-ddfthiel_blockcta14.frame-layout-1 .bg-gray-900,
html[data-bs-theme="dark"] .festival-theme .frame-type-ddfthiel_blockcta4.frame-layout-1 .bg-pattern {
    color-scheme: dark;
}

.festival-theme :is(
    .frame-type-ddfthiel_blockcta14.frame-layout-1 .bg-gray-900,
    .frame-type-ddfthiel_blockcta4.frame-layout-1 .bg-pattern
) :is(h2, h3, p, small, .lead, .text-white-stable) {
    color: var(--fest-ink) !important;
}

.festival-theme :is(
    .frame-type-ddfthiel_blockcta14.frame-layout-1 .bg-gray-900,
    .frame-type-ddfthiel_blockcta4.frame-layout-1 .bg-pattern
) .gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--fest-primary-ink) !important;
}

/* Die Theme-Knoepfe drehen im dunklen Band auf Weiss - auf der hellen
   Flaeche wieder die Markenfarbe. */
.festival-theme :is(
    .frame-type-ddfthiel_blockcta14.frame-layout-1 .bg-gray-900,
    .frame-type-ddfthiel_blockcta4.frame-layout-1 .bg-pattern
) [class*="btn-outline-"] {
    --bs-btn-color: var(--fest-primary-ink);
    --bs-btn-border-color: var(--fest-primary-ink);
    --bs-btn-hover-color: var(--fest-on-primary);
    --bs-btn-hover-bg: var(--fest-primary);
    --bs-btn-hover-border-color: var(--fest-primary);
    color: var(--fest-primary-ink) !important;
    border-color: var(--fest-primary-ink) !important;
}

.festival-theme .frame-type-ddfthiel_blockcta4.frame-layout-1 .bg-pattern::before,
.festival-theme .frame-type-ddfthiel_blockcta4.frame-layout-1 .bg-pattern::after {
    display: none;
}

/* 3 Plakat: Band bleibt, die Ueberschrift wird riesig, der Text ruhiger. */
.festival-theme .frame-type-ddfthiel_blockcta14.frame-layout-3 .bg-gray-900 {
    background: var(--fest-dunkel) !important;
}

.festival-theme .frame-type-ddfthiel_blockcta14.frame-layout-3 .gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: #fff;
}

.festival-theme .frame-type-ddfthiel_blockcta14.frame-layout-3 .gradient-text::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 0.45rem;
    margin: 1.25rem auto 0;
    background: var(--fest-primary);
    border-radius: 2px;
}


/* --------------------------------------------------------------------------
   Farbiger Aufruf (block-cta-4) - 1 Umrandet (oben), 3 Plakat
   -------------------------------------------------------------------------- */

.festival-theme .frame-type-ddfthiel_blockcta4.frame-layout-3 .bg-pattern {
    padding-block: clamp(3rem, 8vw, 6rem) !important;
}

/* --------------------------------------------------------------------------
   Text mit Knopf (block-cta-x2) - 2 Markenfarbe, 3 Plakat
   -------------------------------------------------------------------------- */

.festival-theme .frame-type-ddfthiel_blockctax2.frame-layout-2 .position-relative.z-1 {
    border-radius: var(--fest-radius);
}

.festival-theme .frame-type-ddfthiel_blockctax2.frame-layout-3 h2 {
    text-align: center;
}


/* --------------------------------------------------------------------------
   Zahlen & Fakten (block-fact-1) - 1 Grosse Zahlen, 2 Markenfarbe
   -------------------------------------------------------------------------- */

.festival-theme .frame-type-ddfthiel_blockfact1:is(.frame-layout-1, .frame-layout-2) .counter,
.festival-theme .frame-type-ddfthiel_blockfact1:is(.frame-layout-1, .frame-layout-2) h2.mb-0 {
    font-family: var(--fest-font-display);
    font-size: clamp(3rem, 2rem + 5vw, 6rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.festival-theme .frame-type-ddfthiel_blockfact1:is(.frame-layout-1, .frame-layout-2) .fs-2 {
    font-family: var(--fest-font-display);
    font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem) !important;
    color: inherit !important;
}

.festival-theme .frame-type-ddfthiel_blockfact1:is(.frame-layout-1, .frame-layout-2) small.d-block {
    font-size: var(--fest-step-0);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* 1: Zahlen in der Marken-Textfarbe, zwischen den Spalten eine Linie. */
.festival-theme .frame-type-ddfthiel_blockfact1.frame-layout-1 .counter,
.festival-theme .frame-type-ddfthiel_blockfact1.frame-layout-1 h2.mb-0 {
    color: var(--fest-primary-ink);
}

@media (min-width: 768px) {
    .festival-theme .frame-type-ddfthiel_blockfact1.frame-layout-1 .col-md-3 + .col-md-3 {
        border-left: 2px solid var(--fest-linie);
    }
}

/* 2: ganze Sektion als Markenflaeche (s. oben), mit Luft. */
.festival-theme .frame-type-ddfthiel_blockfact1.frame-layout-2 section {
    padding-block: clamp(3rem, 7vw, 5rem) !important;
}


/* --------------------------------------------------------------------------
   Kacheln (block-feature-8) - 1 Karten, 2 Mittig
   -------------------------------------------------------------------------- */

.festival-theme .frame-type-ddfthiel_blockfeature8.frame-layout-1 .row.g-3 > [class*="col-"] > .d-flex {
    height: 100%;
    padding: 1.25rem;
    background: var(--fest-flaeche);
    border: 1px solid var(--fest-linie);
    border-top: 4px solid var(--fest-primary);
    border-radius: var(--fest-radius);
    box-shadow: var(--fest-schatten);
}

@media (min-width: 992px) {
    .festival-theme .frame-type-ddfthiel_blockfeature8.frame-layout-2 .row.g-3 > [class*="col-"] {
        flex: 0 0 auto;
        width: 33.3333%;
    }
}

.festival-theme .frame-type-ddfthiel_blockfeature8.frame-layout-2 .row.g-3 > [class*="col-"] > .d-flex {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem;
}

.festival-theme .frame-type-ddfthiel_blockfeature8.frame-layout-2 .rounded-circle {
    margin: 0 !important;
    width: 4rem;
    height: 4rem;
    background: color-mix(in srgb, var(--fest-primary) 14%, transparent) !important;
}


/* --------------------------------------------------------------------------
   Highlights (block-feature-14) - 1 Ruhig, 2 Umrandet
   -------------------------------------------------------------------------- */

.festival-theme .frame-type-ddfthiel_blockfeature14.frame-layout-1 .card {
    background: color-mix(in srgb, var(--fest-primary) 12%, var(--fest-flaeche)) !important;
}

.festival-theme .frame-type-ddfthiel_blockfeature14:is(.frame-layout-1, .frame-layout-2) .card :is(i, p) {
    color: var(--fest-ink) !important;
}

.festival-theme .frame-type-ddfthiel_blockfeature14:is(.frame-layout-1, .frame-layout-2) .card i {
    color: var(--fest-primary-ink) !important;
}

.festival-theme .frame-type-ddfthiel_blockfeature14.frame-layout-2 .card {
    background: var(--fest-flaeche) !important;
    border: 1px solid var(--fest-linie) !important;
    border-left: 5px solid var(--fest-primary) !important;
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   Text (block-image-x1, block-about-3, textmedia, text) - 1 Kasten,
   2 Akzentbalken
   -------------------------------------------------------------------------- */

.festival-theme :is(
    .frame-type-ddfthiel_blockimagex1,
    .frame-type-ddfthiel_blockabout3
).frame-layout-1 .tab-content,
.festival-theme :is(.frame-type-textmedia, .frame-type-text).frame-layout-1 {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--fest-flaeche-leise);
    border: 1px solid var(--fest-linie);
    border-radius: var(--fest-radius);
}

.festival-theme :is(.frame-type-textmedia, .frame-type-text):is(.frame-layout-1, .frame-layout-2) {
    max-width: min(var(--fest-mass, 68ch) + 6rem, calc(100% - 2rem));
    margin-inline: auto;
}

.festival-theme :is(
    .frame-type-ddfthiel_blockimagex1,
    .frame-type-ddfthiel_blockabout3
).frame-layout-2 .tab-content,
.festival-theme :is(.frame-type-textmedia, .frame-type-text).frame-layout-2 {
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
    background: color-mix(in srgb, var(--fest-primary) 7%, var(--fest-flaeche));
    border-left: 6px solid var(--fest-primary);
    border-radius: 0 var(--fest-radius) var(--fest-radius) 0;
}

.festival-theme :is(
    .frame-type-ddfthiel_blockimagex1,
    .frame-type-ddfthiel_blockabout3
).frame-layout-2 h2 {
    color: var(--fest-primary-ink);
}

/* Kasten und Balken: .pt-2 des Themes ist !important; der Kasten bekommt
   eine Lesebreite, der Text darin die ganze Breite des Kastens. */
.festival-theme :is(
    .frame-type-ddfthiel_blockimagex1,
    .frame-type-ddfthiel_blockabout3
):is(.frame-layout-1, .frame-layout-2) .tab-content {
    padding-top: clamp(1.25rem, 3vw, 2.5rem) !important;
}

.festival-theme .frame-type-ddfthiel_blockimagex1:is(.frame-layout-1, .frame-layout-2) .tab-content {
    max-width: 62rem;
    margin-inline: auto;
}

.festival-theme .frame-type-ddfthiel_blockimagex1:is(.frame-layout-1, .frame-layout-2) .col-lg-10 {
    width: 100%;
}

.festival-theme .frame-type-ddfthiel_blockimagex1:is(.frame-layout-1, .frame-layout-2) .mx-4 {
    margin-inline: 0 !important;
}

/* Im Akzentbalken steht die Ueberschrift linksbuendig am Balken. */
.festival-theme .frame-type-ddfthiel_blockimagex1.frame-layout-2 :is(h2, .lead) {
    text-align: left !important;
}


/* --------------------------------------------------------------------------
   Orte & Adressen (block-location-x1) - 1 Umrandet, 2 Markenfarbe
   -------------------------------------------------------------------------- */

.festival-theme .frame-type-ddfthiel_blocklocationx1:is(.frame-layout-1, .frame-layout-2) .bg-white {
    background: var(--fest-flaeche) !important;
    color: var(--fest-ink);
    box-shadow: none !important;
}

.festival-theme .frame-type-ddfthiel_blocklocationx1.frame-layout-1 .bg-white {
    border: 1px solid var(--fest-linie);
    border-top: 5px solid var(--fest-primary);
}

.festival-theme .frame-type-ddfthiel_blocklocationx1.frame-layout-1 .text-primary {
    color: var(--fest-primary-ink) !important;
}

.festival-theme .frame-type-ddfthiel_blocklocationx1.frame-layout-2 section {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) !important;
}

.festival-theme .frame-type-ddfthiel_blocklocationx1.frame-layout-2 section > .container > .tab-content > .row > .col-12 h2 {
    color: var(--fest-on-primary);
}

/* Die Karten selbst bleiben hell (bzw. dunkel im dunklen Thema) - nur
   die Flaeche dahinter ist Marke. */
.festival-theme .frame-type-ddfthiel_blocklocationx1.frame-layout-2 .bg-white {
    --bs-body-color: var(--fest-ink);
    --bs-heading-color: var(--fest-ink);
}

.festival-theme .frame-type-ddfthiel_blocklocationx1.frame-layout-2 .bg-white .text-primary {
    color: var(--fest-primary-ink) !important;
}


/* --------------------------------------------------------------------------
   Grosses Banner (block-hero-5) - 1 Markenfarbe, 2 Nacht
   -------------------------------------------------------------------------- */

/* Ohne Hintergrundbild startet jarallax nicht und setzt kein
   position: relative - die Abdunklung (position-absolute) legte sich dann
   ueber die ganze Seite. */
.festival-theme .frame-type-ddfthiel_blockhero5 .hero-agency {
    position: relative;
    overflow: hidden;
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-1 .bg-dark.bg-opacity-50 {
    background: color-mix(in srgb, var(--fest-primary) 86%, transparent) !important;
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-1 :is(.text-white, h1, small, .lead) {
    color: var(--fest-on-primary) !important;
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-1 .btn-primary {
    --bs-btn-color: var(--fest-primary);
    --bs-btn-bg: var(--fest-on-primary);
    --bs-btn-border-color: var(--fest-on-primary);
    --bs-btn-hover-color: var(--fest-primary);
    --bs-btn-hover-bg: var(--fest-on-primary);
    background: var(--fest-on-primary);
    color: var(--fest-primary);
    border-color: var(--fest-on-primary);
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-1 .btn-outline-primary {
    border-color: var(--fest-on-primary) !important;
    color: var(--fest-on-primary) !important;
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-2 .hero-agency {
    background: var(--fest-dunkel);
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-2 .bg-dark.bg-opacity-50 {
    background: linear-gradient(180deg, rgba(10, 12, 16, 0.78), rgba(10, 12, 16, 0.94)) !important;
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-2 :is(.text-white, h1, .lead) {
    color: #fff !important;
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-2 h1 {
    font-family: var(--fest-font-display);
    font-size: clamp(3rem, 1.5rem + 8vw, 8rem) !important;
    line-height: 0.92;
    text-transform: uppercase;
    text-wrap: balance;
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-2 .btn-outline-primary {
    border-color: #fff !important;
    color: #fff !important;
}

.festival-theme .frame-type-ddfthiel_blockhero5.frame-layout-2 small {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--fest-primary);
    color: var(--fest-on-primary);
    border-radius: 3px;
}


/* --------------------------------------------------------------------------
   Fragen & Antworten - Baustein block-faq-3 (frame-layout-1..3) und
   Plugin Infos & FAQ (.faq-look-*)

   Grundlage ist die helle Fassung aus festival.css ("FAQ (Content Block
   block-faq-3)"). Karten, Zwei Spalten und Nummeriert zeigen alle
   Antworten offen; die Klapp-Knoepfe nimmt ElementLooks.js beim
   Baustein heraus, das Plugin rendert sie gar nicht erst.
   -------------------------------------------------------------------------- */

/* Offen: Antworten immer sichtbar, Ueberschrift und Liste uebereinander
   ueber die volle Breite. */
.festival-theme :is(
    .frame-type-ddfthiel_blockfaq3:is(.frame-layout-1, .frame-layout-2, .frame-layout-3),
    .faq-look-cards, .faq-look-columns, .faq-look-numbered
) .collapse {
    display: block !important;
    height: auto !important;
}

.festival-theme :is(
    .frame-type-ddfthiel_blockfaq3:is(.frame-layout-1, .frame-layout-2, .frame-layout-3),
    .faq-look-cards, .faq-look-columns, .faq-look-numbered
) .chevron-arrow {
    display: none;
}

.festival-theme :is(
    .frame-type-ddfthiel_blockfaq3:is(.frame-layout-1, .frame-layout-2, .frame-layout-3),
    .faq-look-cards, .faq-look-columns, .faq-look-numbered
) .row > :is(.col-lg-5, .col-lg-7) {
    flex: 0 0 auto;
    width: 100%;
}

.festival-theme :is(
    .frame-type-ddfthiel_blockfaq3:is(.frame-layout-1, .frame-layout-2, .frame-layout-3),
    .faq-look-cards, .faq-look-columns, .faq-look-numbered
) .col-lg-5 > div {
    margin-right: 0 !important;
    text-align: center !important;
}

.festival-theme :is(
    .frame-type-ddfthiel_blockfaq3:is(.frame-layout-1, .frame-layout-2, .frame-layout-3),
    .faq-look-cards, .faq-look-columns, .faq-look-numbered
) .accordion :is(h2, h3) {
    color: var(--fest-ink);
}

/* Karten: Raster, jede Frage eine Karte mit Markenkante oben. */
.festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-1, .faq-look-cards) .accordion {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}

.festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-1, .faq-look-cards) .accordion > .border {
    margin: 0 !important;
    padding: 1.25rem !important;
    border: 1px solid var(--fest-linie) !important;
    border-top: 5px solid var(--fest-primary) !important;
    border-radius: var(--fest-radius) !important;
    box-shadow: var(--fest-schatten);
}

/* Zwei Spalten: wie ein Lexikon, ohne Kaesten, mit feinen Linien. */
.festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-2, .faq-look-columns) .accordion {
    column-gap: 3rem;
}

@media (min-width: 768px) {
    .festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-2, .faq-look-columns) .accordion {
        columns: 2;
    }
}

.festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-2, .faq-look-columns) .accordion > .border {
    break-inside: avoid;
    margin: 0 0 1.5rem !important;
    padding: 0 0 1.25rem !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fest-linie) !important;
    border-radius: 0 !important;
}

.festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-2, .faq-look-columns) .accordion :is(h2, h3) {
    color: var(--fest-primary-ink);
}

.festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-2, .faq-look-columns) .accordion .mt-3 {
    margin-top: 0.5rem !important;
}

/* Nummeriert: grosse Ziffern in der Plakatschrift links neben jeder Frage. */
.festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-3, .faq-look-numbered) .accordion {
    counter-reset: faq;
    max-width: 52rem;
    margin-inline: auto;
}

.festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-3, .faq-look-numbered) .accordion > .border {
    counter-increment: faq;
    position: relative;
    margin: 0 0 1rem !important;
    padding: 0.25rem 0 1.25rem 5rem !important;
    min-height: 4.5rem;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fest-linie) !important;
    border-radius: 0 !important;
}

.festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-3, .faq-look-numbered) .accordion > .border::before {
    content: counter(faq, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    font-family: var(--fest-font-display);
    font-size: 3.25rem;
    line-height: 1;
    color: var(--fest-primary-ink);
}

@media (max-width: 575.98px) {
    .festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-3, .faq-look-numbered) .accordion > .border {
        padding-left: 3.5rem !important;
    }

    .festival-theme :is(.frame-type-ddfthiel_blockfaq3.frame-layout-3, .faq-look-numbered) .accordion > .border::before {
        width: 3rem;
        font-size: 2.4rem;
    }
}


/* --------------------------------------------------------------------------
   Galerie (Plugin, settings.design) - Raster und Streifen
   Mauerwerk bleibt in festival.css (Abschnitt 10) mit Masonry.
   -------------------------------------------------------------------------- */

/* Raster: gleich grosse quadratische Kacheln, Bild fuellt die Kachel. */
.gallery-look-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding-inline: 0.5rem;
}

@media (min-width: 768px) {
    .gallery-look-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        padding-inline: 0.75rem;
    }
}

@media (min-width: 1200px) {
    .gallery-look-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gallery-look .gallery-item {
    width: auto;
    margin: 0;
}

.gallery-look-grid .gallery-image-wrapper,
.gallery-look-grid .gallery-image-wrapper > a {
    height: 100%;
}

.gallery-look-grid .gallery-image-wrapper {
    aspect-ratio: 1;
}

.gallery-look .gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Streifen: grosse Fotos nebeneinander, wischen mit Einrasten. Hoehe fest,
   Breite aus dem Bildformat. */
.gallery-look-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    padding: 0 1rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--fest-primary) transparent;
}

.gallery-look-strip .gallery-item {
    flex: none;
    scroll-snap-align: start;
}

.gallery-look-strip .gallery-image-wrapper,
.gallery-look-strip .gallery-image-wrapper > a {
    height: clamp(16rem, 55vh, 34rem);
}

.gallery-look-strip .gallery-image {
    width: auto;
    max-width: 85vw;
}

.gallery-look-strip:focus-visible {
    outline: 3px solid var(--fest-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .gallery-look-strip {
        scroll-behavior: auto;
    }
}


/* --------------------------------------------------------------------------
   Korrekturen an den Standardgestaltungen der Theme-Bausteine
   -------------------------------------------------------------------------- */

/* Highlights (block-feature-14), "Bunt": die Kacheltexte stehen in
   .text-{farbe}-emphasis. Im dunklen Thema ist das fuer die Markenfarbe
   die dunkle Fassung - dunkle Schrift auf fast schwarzer Kachel; im
   hellen Thema standen manche Farben (success, info) zu blass auf ihrer
   Toenung. Die Kachel traegt ihre Farbe als Toenung, die Schrift folgt
   der Seite. */
.festival-theme .frame-type-ddfthiel_blockfeature14 .card :is(h3, p) {
    color: var(--fest-ink) !important;
}

html[data-bs-theme="dark"] .festival-theme .frame-type-ddfthiel_blockfeature14.frame-layout-0 .card.bg-primary {
    background: color-mix(in srgb, var(--fest-primary) 30%, var(--fest-flaeche)) !important;
}

/* Farbiger Aufruf (block-cta-4): der Knopf (btn-outline-light) wurde im
   dunklen Thema dunkel auf der Farbflaeche. Auf der Markenflaeche steht
   er in der dazu lesbaren Farbe, auf allen anderen Flaechen weiss. Nicht
   fuer "Umrandet" (helle Flaeche, eigene Regel oben). */
.festival-theme .frame-type-ddfthiel_blockcta4:not(.frame-layout-1) .bg-pattern .btn {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--fest-ink);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    color: var(--bs-btn-color) !important;
    border-color: var(--bs-btn-border-color) !important;
}

.festival-theme .frame-type-ddfthiel_blockcta4:not(.frame-layout-1) .bg-pattern.bg-primary .btn {
    --bs-btn-color: var(--fest-on-primary);
    --bs-btn-border-color: var(--fest-on-primary);
    --bs-btn-hover-color: var(--fest-primary);
    --bs-btn-hover-bg: var(--fest-on-primary);
    --bs-btn-hover-border-color: var(--fest-on-primary);
}

.festival-theme .frame-type-ddfthiel_blockcta4:not(.frame-layout-1) .bg-pattern .btn:is(:hover, :focus-visible) {
    color: var(--bs-btn-hover-color) !important;
}

/* Kacheln (block-feature-8): ohne gewaehltes Symbol blieb ein leerer
   Kreis stehen - dann ganz weg. */
.festival-theme .frame-type-ddfthiel_blockfeature8 .rounded-circle:not(:has(i)) {
    display: none !important;
}


/* --------------------------------------------------------------------------
   Trenner unter Elementen ("Trenner darunter", tt_content.tx_clubs_divider)

   Das <hr class="frame-divider"> rendert der DropIn-Platzhalter am Ende des
   Elements (Resources/Private/Extensions/fluid_styled_content/Partials/
   DropIn/After/All.fluid.html). Die Art kommt aus dem Brandset als
   data-dd-divider am <html> (Brand::applyDividerToHtml); ohne Brandset
   und bei "Linie" eine feine Linie in --fest-linie. Dieselben Regeln
   zeichnen die Vorschau im Brandset (.brand-divider-preview).
   -------------------------------------------------------------------------- */

/* Abstand oben und unten gleich: der Rhythmus aus festival.css
   (Abschnitt 5) gibt jedem Rahmen oben und unten --fest-space-m. Hier
   faellt der untere weg, der Trenner haelt ihn als Abstand nach oben -
   unten folgt der obere Rand des naechsten Rahmens. */
html:not([data-dd-divider="none"]) .festival-theme > .frame:has(> .frame-divider) {
    padding-bottom: 0;
}

:is(.festival-theme, .brand-divider-preview) .frame-divider {
    --divider-color: var(--fest-primary);
    display: block;
    width: calc(100% - 2rem);
    height: 1px;
    margin: var(--fest-space-m, 2.5rem) auto 0;
    padding: 0;
    border: 0;
    opacity: 1;
    color: inherit;
    background: var(--fest-linie, rgba(20, 24, 31, 0.12));
}

/* So breit wie die Inhalte (Bootstrap-.container abzueglich Rand). */
@media (min-width: 576px) { .festival-theme .frame-divider { max-width: calc(540px - 1.5rem); } }
@media (min-width: 768px) { .festival-theme .frame-divider { max-width: calc(720px - 1.5rem); } }
@media (min-width: 992px) { .festival-theme .frame-divider { max-width: calc(960px - 1.5rem); } }
@media (min-width: 1200px) { .festival-theme .frame-divider { max-width: calc(1140px - 1.5rem); } }
@media (min-width: 1400px) { .festival-theme .frame-divider { max-width: calc(1320px - 1.5rem); } }

/* Im dunklen Thema ist die Markenfarbe als Flaeche oft zu dunkel - der
   Trenner nimmt dort die helle Marken-Textfarbe. */
html[data-bs-theme="dark"] .festival-theme .frame-divider {
    --divider-color: var(--fest-primary-ink);
}

[data-dd-divider="bold"] .frame-divider {
    height: 6px;
    border-radius: 3px;
    background: var(--divider-color);
}

[data-dd-divider="dashed"] .frame-divider {
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--divider-color) 0 18px, transparent 18px 30px);
}

[data-dd-divider="dots"] .frame-divider {
    height: 8px;
    background: radial-gradient(circle, var(--divider-color) 3px, transparent 3.5px) 0 50% / 16px 8px repeat-x;
}

[data-dd-divider="zigzag"] .frame-divider,
[data-dd-divider="wave"] .frame-divider {
    height: 12px;
    background: var(--divider-color);
    -webkit-mask: var(--divider-mask) 0 0 / 24px 12px repeat-x;
    mask: var(--divider-mask) 0 0 / 24px 12px repeat-x;
}

[data-dd-divider="zigzag"] .frame-divider {
    --divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 10 6 2 12 10 18 2 24 10' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E");
}

[data-dd-divider="wave"] .frame-divider {
    --divider-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6Q6 0 12 6T24 6' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E");
}

/* Absperrband: schraege Streifen in Haupt- und Zweitfarbe. */
[data-dd-divider="tape"] .frame-divider {
    height: 14px;
    border-radius: 2px;
    background: repeating-linear-gradient(-45deg, var(--fest-primary) 0 12px, var(--fest-secondary, #1d1a24) 12px 24px);
}

/* Eigenes Bild: waagerecht gekachelt, hoechstens 40 px hoch. */
[data-dd-divider="image"] .frame-divider {
    height: clamp(20px, 3vw, 40px);
    background: var(--brand-divider-image) center / auto 100% repeat-x;
}

[data-dd-divider="none"] .frame-divider {
    display: none;
}

/* Vorschau im Brandset (Partials/Brandset/Preview.html): Farben aus den
   Variablen der Vorschau statt aus festival.css. */
.brand-divider-preview {
    --fest-primary: var(--p, #e3480f);
    --fest-secondary: var(--s, #1d1a24);
    --fest-linie: color-mix(in srgb, var(--tx, #141414) 18%, transparent);
    padding-top: 0.25rem;
}

.brand-divider-preview .frame-divider {
    width: 100%;
    margin: 0.75rem 0 0.25rem;
}

/* Absperrband im Dunkeln: die Zweitfarbe ist oft selbst dunkel - dann
   Streifen in der hellen Markenfarbe auf dem Seitengrund. */
html[data-bs-theme="dark"] [data-dd-divider="tape"] .frame-divider {
    background: repeating-linear-gradient(-45deg, var(--divider-color) 0 12px, transparent 12px 24px);
}