/* =====================================================================
   Bridge: Contao-Frontend ↔ Design
   Wird NACH den Design-Stylesheets geladen (kann also überschreiben).
   ===================================================================== */

/* Inhaltsbereich: Contao rendert Artikel/Inhaltselemente in <main id="main">.
   Bilder responsiv halten. */
#main img { height: auto; }

/* Standard-Contao-Inhaltselemente bekommen sinnvolle vertikale Abstände,
   solange noch keine eigenen Design-Elemente gesetzt sind. */
#main .ce_text,
#main .ce_headline,
#main .ce_html { margin-inline: auto; }

/* Falls später ein Contao-Navigationsmodul in .main-nav eingesetzt wird:
   Modul-/Listen-Wrapper auflösen, damit die Flex-Navigation des Designs greift. */
.main-nav .mod_navigation { display: contents; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: contents; }

/* Contao nutzt .invisible für Screenreader-Texte (z.B. „Pflichtfeld …",
   „Navigation überspringen"). Ohne Framework-CSS ist die Klasse undefiniert →
   global als sr-only definieren. */
.invisible { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Vereins-Logo im Header/Footer (statt Kürzel-Kachel) ---- */
.brand__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand__logo img { height: 42px; width: auto; max-width: 200px; display: block; }
.site-footer .brand__logo img { height: 38px; }

/* ---- Hero: echtes Bild statt Platzhalter ---- */
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; }

/* ---- CTA-Band (club_cta) ---- */
.cta-band { background: var(--color-primary); color: #fff; border-radius: var(--radius-xl); padding: clamp(32px, 5vw, 64px); position: relative; overflow: hidden; }
.cta-band > * { position: relative; max-width: 54ch; }
.cta-band h1, .cta-band h2, .cta-band h3 { color: #fff; }
.cta-band__eyebrow { color: color-mix(in srgb, var(--color-accent) 80%, white); }
.cta-band__eyebrow::before { background: color-mix(in srgb, var(--color-accent) 80%, white); }
.cta-band__text { color: rgba(255, 255, 255, .85); font-size: var(--fs-lead); margin: var(--space-3) 0 var(--space-5); }
.cta-band .btn--secondary { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .4); color: #fff; }
.cta-band .btn--secondary:hover { background: rgba(255, 255, 255, .18); border-color: #fff; color: #fff; }

/* ---- Sponsoren-Überschrift ---- */
.sponsors__caption { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-bold); margin-bottom: var(--space-5); }

/* ---- Kader: Foto/Platzhalter füllt den 3:4-Rahmen ---- */
.member__foto .ph { position: absolute; inset: 0; height: 100%; border-radius: 0; border: 0; }
.member__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Vorstand: rundes Personen-Foto ---- */
.person .person-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Vorstand-Teaser: 2-spaltig (Text + Karten), mobil gestapelt ---- */
.vorstand-teaser__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-6); align-items: center; }
@media (max-width: 760px) { .vorstand-teaser__grid { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---- Formulare (Formulargenerator → Design) ---- */
.ce_form, .content-form { max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--gutter); padding-block: var(--section-y); }
.ce_form form, .content-form form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 36px); box-shadow: var(--shadow-sm); }
.field.error .input, .field.error .textarea, .field.error .select { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error-soft) 30%, white); }
.field .req { color: var(--color-error); }
.field .hint { font-size: var(--fs-caption); color: var(--color-text-subtle); }
.formbody { display: flex; flex-direction: column; gap: 0; }
.widget-submit { margin-top: var(--space-2); }
.confirmation { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-success-soft); color: #1d5e34; font-weight: var(--fw-medium); }

/* Fieldsets als Abschnitte (mehrstufiger Antrag) */
.ce_form fieldset:not(.option-cards), .content-form fieldset:not(.option-cards) { border: 0; padding: 0; margin: var(--space-6) 0 var(--space-4); }
.ce_form fieldset:not(.option-cards):first-of-type, .content-form fieldset:not(.option-cards):first-of-type { margin-top: 0; }
.ce_form fieldset:not(.option-cards) > legend, .content-form fieldset:not(.option-cards) > legend { width: 100%; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-h4); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }

/* Option-Cards (Radio → Auswahlboxen) */
.option-cards { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.option-cards__legend { font-weight: var(--fw-semibold); font-size: var(--fs-sm); border: 0; padding: 0; margin-bottom: var(--space-2); font-family: var(--font-body); }
.option-cards__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 520px) { .option-cards__grid { grid-template-columns: 1fr; } }
.option-card input[type="radio"] { margin-top: 2px; flex: 0 0 auto; }