/* VTFM onepager design — custom styles ported 1:1 from volks-static (2026-07-19) */
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Roboto', sans-serif;
    padding-top: 11.5rem; /* fixed nav + banner height */
}
.animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
}
.tab-button.active-tab {
    border-color: #cb1734;
    color: #cb1734;
    font-weight: 600;
}
.programm-slideshow-container[title] {
    cursor: help;
}
.status-badge {
    display: inline-block;
    padding: 0.5rem 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 0.25rem;
    margin: 0.5rem 0.5rem 0.5rem 0rem;
}
.status-badge-success {
    background-color: #34d399;
    color: white;
}
.status-badge-error {
    background-color: #f87171;
    color: white;
}
/* corporate red overrides (Tailwind red -> VTFM red) */
[class*="bg-red-600"],
[class*="hover:bg-red-600"]:hover {
    background-color: #d4203c !important;
}
[class*="bg-red-700"],
[class*="hover:bg-red-700"]:hover {
    background-color: #d4203c !important;
}
[class*="text-red-600"],
[class*="hover:text-red-600"]:hover {
    color: #cb1734 !important;
}
[class*="text-red-700"],
[class*="hover:text-red-700"]:hover {
    color: #cb1734 !important;
}
[class*="border-red-600"] {
    border-color: #cb1734 !important;
}
.group:hover [class*="group-hover:text-red-600"] {
    color: #cb1734 !important;
}
/* sponsor page helpers */
.placeholder-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    color: #9ca3af;
    font-size: 0.875rem;
    text-align: center;
    padding: 0.5rem;
}
/* fixed banner slot (CEs from Home colPos 1) */
.vtfm-banner {
    position: fixed;
    left: 0;
    right: 0;
    top: 12rem;
    z-index: 40;
    color: #fff;
    padding: 0.5rem 0;
    text-align: center;
    font-size: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.vtfm-banner--blue { background-color: rgb(66, 87, 117); }
.vtfm-banner--red  { background-color: #cb1734; }
.vtfm-banner a { color: #fff; text-decoration: underline; }

/* day headings (standard header CEs inside programme tabs) */
[data-vtfm-tabs] .frame-type-header h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

/* ============================================================
   Fidelity pass (2026-07-19): replicate static styling for RTE
   output and TYPO3 frame structure. Frames themselves are
   transparent; spacing/typography is scoped below.
   ============================================================ */

/* --- RTE output: restore list bullets (Tailwind preflight removes them) --- */
.vtfm-rte ul {
    list-style: disc;
    list-style-position: inside;
    margin-top: 0.25rem;
}
.vtfm-rte ul > li { margin-bottom: 0.25rem; }
.vtfm-rte a { color: #cb1734; }
.vtfm-rte a:hover { text-decoration: underline; }

/* programme/kurs descriptions: paragraph rhythm like the static markup */
.vtfm-prog-desc > * + *, .vtfm-kurs-desc > * + * { margin-top: 0.5rem; }
.vtfm-kurs-desc > :first-child { margin-top: 0.5rem; }
.vtfm-kurs-desc p strong, .vtfm-prog-desc p strong { font-weight: 600; }

/* wide slideshow-text (Prämierung/Festival): centered on mobile, lists like static */
.vtfm-st-wide { text-align: center; }
@media (min-width: 768px) { .vtfm-st-wide { text-align: left; } }
.vtfm-st-wide > * + * { margin-top: 1rem; }
.vtfm-st-wide h3 {
    font-size: 1.5rem; line-height: 2rem; font-weight: 600;
    color: #1f2937; margin-bottom: 1rem; text-align: center;
}
@media (min-width: 768px) { .vtfm-st-wide h3 { text-align: left; } }
.vtfm-st-wide ul { margin-top: 0.5rem; margin-bottom: 1rem; }
.vtfm-st-wide ul > li { margin-bottom: 0.25rem; }

/* --- Tab panels: day groups (static: h3 day heading + space-y-4 entries, space-y-8 days) --- */
.vtfm-tabpanel > * + * { margin-top: 1rem; }              /* entries within a day: space-y-4 */
.vtfm-tabpanel .frame-type-header h3 {
    font-size: 1.5rem; line-height: 2rem; font-weight: 600;
    color: #1f2937; margin-bottom: 0.75rem; padding-bottom: 0.5rem;
}
.vtfm-tabpanel > .frame-type-header:first-child h3 {       /* first day: border below */
    border-bottom: 1px solid #e5e7eb;
}
.vtfm-tabpanel > * + .frame-type-header {                  /* later days: gap + border above */
    margin-top: 1.5rem;
}
.vtfm-tabpanel > * + .frame-type-header h3 {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
    border-bottom: 0;
}

/* Kurse info block (text CE at top of the Kurse tab) */
.vtfm-tabpanel .frame-type-text { color: #374151; margin-bottom: 1.5rem; }
.vtfm-tabpanel .frame-type-text h3 {
    font-size: 1.25rem; line-height: 1.75rem; font-weight: 600;
    color: #1f2937; margin-bottom: 0.5rem;
}
.vtfm-tabpanel .frame-type-text p { margin-top: 0.75rem; }
.vtfm-tabpanel .frame-type-text ul { list-style: disc inside; }
.vtfm-tabpanel .frame-type-text a { color: #cb1734; }
.vtfm-tabpanel .frame-type-text a:hover { color: #d4203c; }

/* --- Standard pages: headings and text (Sponsoren, Medien, legal) --- */
.frame-type-header h2, h2.vtfm-page-title {
    font-size: 1.875rem; line-height: 2.25rem; font-weight: 700;
    text-align: center; color: #cb1734; margin-bottom: 2rem;
}
.vtfm-content .frame-type-header h2 {                         /* card pages: left-aligned red h1-style */
    text-align: left; margin-bottom: 1.5rem;
}
.vtfm-content .frame-type-text h3 {
    font-size: 1.25rem; line-height: 1.75rem; font-weight: 600;
    color: #374151; margin-top: 1.5rem; margin-bottom: 0.5rem;
}
.vtfm-content .frame-type-text h4 { font-weight: 600; color: #374151; margin-top: 1rem; margin-bottom: 0.5rem; }
.vtfm-content .frame-type-text p { margin-bottom: 1rem; }
.vtfm-content .frame-type-text ul { list-style: disc; list-style-position: inside; margin-bottom: 1rem; }
.vtfm-content .frame-type-text ul > li { margin-bottom: 0.5rem; }
.vtfm-content .frame-type-text a { color: #cb1734; }
.vtfm-content .frame-type-text a:hover { color: #d4203c; text-decoration: underline; }
.vtfm-content .frame-type-image { margin-bottom: 2rem; }

/* Medien galleries: simple 3-col grid with captions */
/* bootstrap_package gallery markup (.gallery-row > .gallery-item-size-N), rendered
   without the bootstrap CSS on Vtfm pages — grid layout supplied here instead */
.vtfm-content .gallery-row { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .vtfm-content .gallery-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vtfm-content .gallery-row:has(.gallery-item-size-4) { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; } }
.vtfm-content .gallery-item img { width: 100%; height: auto; border-radius: 0.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
/* 4-column photo walls (Bildmaterial): uniform 3:2 tiles, full image opens via the lightbox link */
.vtfm-content .gallery-item-size-4 img { aspect-ratio: 3 / 2; object-fit: cover; }
.vtfm-content .gallery-item figcaption { font-size: 0.875rem; color: #4b5563; margin-top: 0.25rem; }

/* Über-uns text tab (Trägerverein) */
[data-vtfm-tabs] .frame-type-text h3 {
    font-size: 1.5rem; line-height: 2rem; font-weight: 600;
    color: #1f2937; margin-bottom: 1rem;
}
[data-vtfm-tabs] .frame-type-text .vtfm-traeger h3 + h3 { border-top: 1px solid #d1d5db; padding-top: 1rem; }

/* News elements (addition, styled to match the design language) */
.news-list-view .article { padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); margin-bottom: 1rem; background: #fff; }
.news-list-view .article .element-header h3 a, .news-list-view .article .element-header h2 a { color: #cb1734; font-size: 1.25rem; font-weight: 600; }
.news-list-view .news-list-date { color: #6b7280; font-size: 0.875rem; }
.news-list-view .teaser-text { color: #374151; margin-top: 0.5rem; }
.news-list-view .more, .news-single .news-backlink { color: #cb1734; }
.news-single .article .element-header h1, .news-single .article .element-header h2 { font-size: 1.875rem; font-weight: 700; color: #cb1734; margin-bottom: 1rem; }
.news-single .news-txt { color: #374151; }
.news-single .news-txt a { color: #cb1734; text-decoration: underline; }

/* card pages: h1 page title (left, red) and centered red section h2s (Medien) */
.vtfm-content .frame-type-header h1 {
    font-size: 1.875rem; line-height: 2.25rem; font-weight: 700;
    color: #cb1734; margin-bottom: 1.5rem; text-align: left;
}
.vtfm-content .frame-type-header h2 {
    font-size: 1.875rem; line-height: 2.25rem; font-weight: 700;
    color: #cb1734; margin-top: 3rem; margin-bottom: 1.5rem; text-align: center;
}

/* sponsor logos: neutralize the width/height attributes emitted by f:image
   (static markup has none — the h-28/h-16 class must define the box) */
.vtfm-sponsor-item img { width: auto; max-width: 100%; }

/* card pages: headers of text CEs + centered press captions (static medien styling) */
.vtfm-content header h2 {
    font-size: 1.875rem; line-height: 2.25rem; font-weight: 700;
    color: #cb1734; margin-top: 3rem; margin-bottom: 1.5rem; text-align: center;
}
.vtfm-content header h3 {
    font-size: 1.25rem; line-height: 1.75rem; font-weight: 600;
    color: #374151; margin-top: 1.5rem; margin-bottom: 0.5rem;
}
.vtfm-content .caption { text-align: center; font-size: 0.95rem; color: #374151; margin: 0.35rem 0; }
.vtfm-content .caption a { color: #cb1734; }
.vtfm-content .caption a:hover { text-decoration: underline; }


/* buttons inside RTE/text content: don't let the red link color override white button text */
.vtfm-rte a[class*="bg-red-"],
.vtfm-tabpanel .frame-type-text a[class*="bg-red-"],
[data-vtfm-tabs] .frame-type-text a[class*="bg-red-"],
.vtfm-content .frame-type-text a[class*="bg-red-"] {
    color: #fff;
}

/* powermail forms under the Vtfm theme: Tailwind preflight strips input chrome
   and the old bootstrap .form-control styling is gone — restore usable fields */
.vtfm-content .powermail_form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.vtfm-content .powermail_form textarea,
.vtfm-content .powermail_form select {
    width: 100%;
    max-width: 36rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    font-size: 1rem;
}
.vtfm-content .powermail_form input:focus,
.vtfm-content .powermail_form textarea:focus,
.vtfm-content .powermail_form select:focus {
    outline: 2px solid #cb1734;
    outline-offset: 0;
}
.vtfm-content .powermail_form input[type="checkbox"],
.vtfm-content .powermail_form input[type="radio"] {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    accent-color: #cb1734;
}
.vtfm-content .powermail_form .powermail_label { font-weight: 600; }
.vtfm-content .powermail_form .powermail_fieldwrap { margin-top: 1rem; }
.vtfm-content .powermail_form input[type="submit"],
.vtfm-content .powermail_form button[type="submit"] {
    display: inline-block;
    background-color: #d4203c;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1.5rem;
}
.vtfm-content .powermail_form input[type="submit"]:hover,
.vtfm-content .powermail_form button[type="submit"]:hover { background-color: #cb1734; }

/* ============================================================
   Powermail forms — usability/layout pass (2026-07-19)
   ============================================================ */

/* Checkboxes/radios: powermail's Basic.css sets appearance:none and leaves
   the unchecked state invisible — force native controls in festival red */
.vtfm-content .powermail_form input[type="checkbox"],
.vtfm-content .powermail_form input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    min-width: 1.1rem;
    accent-color: #cb1734;
    margin: 0.15rem 0.5rem 0 0;
    border: 1px solid #9ca3af;
}
.vtfm-content .powermail_form .form-check {
    display: flex;
    align-items: flex-start;
    margin: 0.4rem 0;
}
.vtfm-content .powermail_form .form-check label { font-weight: 400; cursor: pointer; }
/* option lists without per-option wrapper (input+label pairs): one option per line */
.vtfm-content .powermail_form .checkbox input.form-check-input,
.vtfm-content .powermail_form .radio input.form-check-input {
    display: inline-block;
    vertical-align: top;
    margin-top: 0.25rem;
}
.vtfm-content .powermail_form .checkbox label.form-check-label,
.vtfm-content .powermail_form .radio label.form-check-label {
    display: inline-block;
    width: calc(100% - 2.2rem);
    vertical-align: top;
    font-weight: 400;
    cursor: pointer;
    margin-bottom: 0.35rem;
}
.vtfm-content .powermail_form .checkbox,
.vtfm-content .powermail_form .radio { margin-top: 0.4rem; }

/* section titles inside forms (legend markup, also used in html fields) */
.vtfm-content .powermail_form legend.powermail_legend,
.vtfm-content .powermail_form .powermail_fieldwrap_type_html legend {
    display: block;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 1.5rem 0 0.25rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.35rem;
    width: 100%;
}
.vtfm-content .powermail_form fieldset.powermail_fieldset { margin-top: 1.5rem; }
.vtfm-content .powermail_form .powermail_fieldwrap_type_html { margin-top: 1.25rem; color: #374151; }
.vtfm-content .powermail_form .powermail_fieldwrap_type_text {
    margin-top: 1.5rem;
    color: #1f2937;
    font-size: 1.15rem;
    font-weight: 600;
}
.vtfm-content .powermail_form label.control-label,
.vtfm-content .powermail_form label.powermail_label { width: 100%; display: block; }
.vtfm-content .powermail_form > h3 { display: none; }
.vtfm-content .powermail_form .powermail_fieldwrap a { color: #cb1734; text-decoration: underline; }
.vtfm-content .powermail_form .powermail_fieldwrap a:hover { color: #a11229; }
/* powermail_cond toggles this class only — display rule used to come from the
   removed legacy powermail.css */
.powermail-cond-hidden { display: none !important; }

/* ---- Anmeldung form (powermail_form_8): two-column desktop layout ----
   Row 1: Kontaktperson 1 | Kontaktperson 2
   Fieldset "Theatergruppe": left = Gruppe..prof. Schauspieler, right = Stück..Aufführungsdaten
   From "Auftritt in Meiringen" on: full width. Mobile stays single column. */
@media (min-width: 768px) {
    .powermail_form_8 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2.5rem;
    }
    .powermail_form_8 > * { grid-column: 1 / -1; }
    .powermail_form_8 > fieldset.powermail_fieldset_14 { grid-column: 1; grid-row: 1; }
    .powermail_form_8 > fieldset.powermail_fieldset_15 { grid-column: 2; grid-row: 1; }

    .powermail_form_8 .powermail_fieldset_13 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2.5rem;
    }
    .powermail_form_8 .powermail_fieldset_13 > * { grid-column: 1 / -1; }
    /* the legend is NOT a grid item (browsers pull it onto the fieldset border), so
       the explicit rows start at 1 — auto-placed markers/fields then flow below */
    /* left column: Gruppe bis prof. Schauspieler:innen */
    .powermail_form_8 .powermail_fieldwrap_namegruppe { grid-column: 1; grid-row: 1; }
    .powermail_form_8 .powermail_fieldwrap_vereinsort { grid-column: 1; grid-row: 2; }
    .powermail_form_8 .powermail_fieldwrap_website { grid-column: 1; grid-row: 3; }
    .powermail_form_8 .powermail_fieldwrap_ensemblegroesse { grid-column: 1; grid-row: 4; }
    .powermail_form_8 .powermail_fieldwrap_wirhabeneineodermehrereprofessionelleschauspielerinneninderproduktion { grid-column: 1; grid-row: 5; }
    /* right column: Stück bis Aufführungsdaten */
    .powermail_form_8 .powermail_fieldwrap_namedestheaterstuecks { grid-column: 2; grid-row: 1; }
    .powermail_form_8 .powermail_fieldwrap_autor { grid-column: 2; grid-row: 2; }
    .powermail_form_8 .powermail_fieldwrap_regie { grid-column: 2; grid-row: 3; }
    .powermail_form_8 .powermail_fieldwrap_verlag { grid-column: 2; grid-row: 4; }
    .powermail_form_8 .powermail_fieldwrap_auffuehrungsdaten { grid-column: 2; grid-row: 5; }
    /* fields fill their column width */
    .powermail_form_8 .powermail_fieldset_13 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    .powermail_form_8 .powermail_fieldset_13 textarea,
    .powermail_form_8 fieldset.powermail_fieldset_14 input,
    .powermail_form_8 fieldset.powermail_fieldset_15 input {
        max-width: 100%;
    }
}