/*!
 * WAB Layout – Abschnitte (Artikel): Inhaltsbreite, Abstände, Mindesthöhe, Hintergrund.
 * Breakpoints, Breiten und Abstände kommen als Variablen aus dem Seitenlayout (assets/css/wab-layout-*.css),
 * die Farben aus der globalen root.css (--wab-color-*).
 */

/* Fallback-Farben – :where() hat keine Spezifität, jede root.css gewinnt unabhängig von der Reihenfolge */
:where(:root) {
    --wab-color-primary: #1d6b3a;
    --wab-color-primary-text: #fff;
    --wab-color-secondary: #4f9d69;
    --wab-color-secondary-text: #fff;
    --wab-color-complementary: #6b1d4e;
    --wab-color-complementary-text: #fff;
    --wab-color-light: #f4f7f5;
    --wab-color-light-text: #1f2a24;
    --wab-color-dark: #1f2a24;
    --wab-color-dark-text: #fff;
}

.wab-section {
    position: relative;
    box-sizing: border-box;
}

/* Inhaltsbreite: Hintergrund bleibt volle Breite, der Inhalt wird per Innenabstand zentriert */
.wab-section--container { --wab-max: var(--wab-container, 1200px); }
.wab-section--wide { --wab-max: var(--wab-container-wide, 1600px); }
.wab-section--narrow { --wab-max: var(--wab-container-narrow, 800px); }

.wab-section--container,
.wab-section--wide,
.wab-section--narrow {
    padding-inline: max(var(--wab-gutter, 16px), calc((100% - var(--wab-max)) / 2));
}

.wab-section--full {
    padding-inline: 0;
}

/* Abstände oben/unten (Werte je Breakpoint aus dem Seitenlayout) */
.wab-space-top-s { padding-top: var(--wab-space-s, 16px); }
.wab-space-top-m { padding-top: var(--wab-space-m, 32px); }
.wab-space-top-l { padding-top: var(--wab-space-l, 48px); }
.wab-space-top-xl { padding-top: var(--wab-space-xl, 72px); }
.wab-space-bottom-s { padding-bottom: var(--wab-space-s, 16px); }
.wab-space-bottom-m { padding-bottom: var(--wab-space-m, 32px); }
.wab-space-bottom-l { padding-bottom: var(--wab-space-l, 48px); }
.wab-space-bottom-xl { padding-bottom: var(--wab-space-xl, 72px); }

/* Mindesthöhe und senkrechte Ausrichtung */
.wab-min-h-50 { min-height: 50vh; min-height: 50svh; }
.wab-min-h-75 { min-height: 75vh; min-height: 75svh; }
.wab-min-h-100 { min-height: 100vh; min-height: 100svh; }

.wab-valign-top,
.wab-valign-center,
.wab-valign-bottom {
    display: flex;
    flex-direction: column;
}

.wab-valign-center { justify-content: center; }
.wab-valign-bottom { justify-content: flex-end; }

/* Textfarbe */
.wab-section--text {
    color: var(--wab-section-text);
}

.wab-section--text :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

/* ------------------------------------------------------------------ */
/* Hintergrund                                                         */
/* ------------------------------------------------------------------ */

/*
 * Der Hintergrund geht immer über die volle Bildschirmbreite – auch wenn das Layout eine feste Breite hat
 * oder der Artikel in einer schmaleren Spalte steht. Farbe, Bild und Überlagerung sind eigene Ebenen,
 * die links und rechts bis zum Fensterrand überstehen (--wab-bleed-*). Der Inhalt bleibt, wo er ist.
 * Ohne Skript gilt die Formel für zentrierte Spalten, das Skript misst den genauen Abstand zum Fensterrand.
 */
.wab-section.wab-section--bg-color,
.wab-section.wab-section--bg-image {
    --wab-bleed-left: calc(50% - 50vw);
    --wab-bleed-right: calc(50% - 50vw);
    isolation: isolate;
    /* Contao setzt .block { overflow: hidden } zum Einfangen von Floats – das würde den Hintergrund abschneiden */
    overflow: visible;
}

/* flow-root fängt Floats ein, ohne abzuschneiden (min-height/flex-Abschnitte sind ohnehin Flex-Container) */
.wab-section.wab-section--bg-color:not(.wab-valign-top, .wab-valign-center, .wab-valign-bottom),
.wab-section.wab-section--bg-image:not(.wab-valign-top, .wab-valign-center, .wab-valign-bottom) {
    display: flow-root;
}

/* Die überstehenden Ebenen dürfen keinen waagerechten Scrollbalken erzeugen */
body:has(.wab-section--bg-color, .wab-section--bg-image) {
    overflow-x: clip;
}

.wab-section--bg-color::before,
.wab-section--bg-image::before,
.wab-section--overlay::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--wab-bleed-left);
    right: var(--wab-bleed-right);
    pointer-events: none;
}

.wab-section--bg-color::before,
.wab-section--bg-image::before {
    z-index: -2;
    background-color: var(--wab-bg-color, transparent);
}

.wab-section--bg-image::before {
    background-image: var(--wab-bg-image);
    background-position: var(--wab-bg-position, center);
    background-size: var(--wab-bg-size, cover);
    background-repeat: var(--wab-bg-repeat, no-repeat);
}

.wab-section--overlay::after {
    z-index: -1;
    background: var(--wab-overlay);
    opacity: var(--wab-overlay-opacity, .5);
}

/*
 * Fixed: Das Bild steht fest im Fenster, der Abschnitt schneidet es zu.
 * clip-path statt background-attachment:fixed – funktioniert auch auf iPhone/iPad.
 */
.wab-section--fixed,
.wab-section--parallax {
    clip-path: inset(0 var(--wab-bleed-right) 0 var(--wab-bleed-left));
}

.wab-section--fixed::before {
    position: fixed;
    inset: 0;
}

/* Parallax: Bildebene ist höher als der Abschnitt und wird per Skript langsamer verschoben */

.wab-section--parallax::before {
    top: calc(var(--wab-parallax-extra, 0px) * -1);
    bottom: calc(var(--wab-parallax-extra, 0px) * -1);
    transform: translate3d(0, var(--wab-parallax-y, 0px), 0);
    will-change: transform;
}

/* ------------------------------------------------------------------ */
/* Öffnungszeiten aus dem Unternehmens-Plugin ({{company::opening_hours}} → dl.company-opening-hours) */
/* Grunddarstellung im Inhalt; Footer & Co. dürfen sie spezifischer überschreiben. */
/* ------------------------------------------------------------------ */

.company-opening-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 0;
    max-width: 26rem;
    margin: 0 0 1em;
}

.company-opening-hours dt {
    padding-right: 1.5rem;
    font-weight: 600;
}

.company-opening-hours dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.company-opening-hours dt:not(:first-of-type),
.company-opening-hours dt:not(:first-of-type) + dd {
    padding-top: .5rem;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

/* ------------------------------------------------------------------ */
/* Formulare aus dem Contao-Formulargenerator                          */
/* Inhaltselement „Formular“ mit der CSS-Klasse „wab-form“. Felder mit der Klasse „wab-form-half“ */
/* stehen ab Tablet nebeneinander, alle anderen über die volle Breite. */
/* ------------------------------------------------------------------ */

.wab-form .formbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
}

.wab-form .widget {
    grid-column: 1 / -1;
    margin: 0;
}

.wab-form .widget.wab-form-half {
    grid-column: auto;
}

@media (max-width: 767px) {
    .wab-form .widget.wab-form-half {
        grid-column: 1 / -1;
    }
}

.wab-form .widget > label,
.wab-form legend {
    display: block;
    margin-bottom: .35em;
    padding: 0;
    font-weight: 600;
}

.wab-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.wab-form label span.mandatory,
.wab-form legend span.mandatory {
    margin-left: .15em;
    color: var(--wab-color-primary, #126831);
}

.wab-form :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), select, textarea) {
    box-sizing: border-box;
    width: 100%;
    padding: .7em .9em;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 6px;
    background: #fff;
    color: var(--wab-color-text, #1f2a24);
    font: inherit;
}

.wab-form textarea {
    min-height: 10em;
    resize: vertical;
}

.wab-form :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--wab-color-primary, #126831);
    outline-offset: 1px;
    border-color: var(--wab-color-primary, #126831);
}

/* Checkboxen: große Klickfläche, Text neben dem Kästchen */
.wab-form .checkbox_container > span {
    display: flex;
    gap: .6em;
    align-items: flex-start;
}

.wab-form input[type="checkbox"] {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    margin: .2em 0 0;
    accent-color: var(--wab-color-primary, #126831);
}

.wab-form .checkbox_container label {
    font-weight: 400;
}

/* Sicherheitsfrage: Feld schmal, Frage daneben */
.wab-form .widget-captcha {
    display: flex;
    flex-wrap: wrap;
    gap: .35em 1em;
    align-items: center;
}

.wab-form .widget-captcha > label {
    flex-basis: 100%;
}

.wab-form .widget-captcha input.captcha {
    width: 5em;
}

.wab-form .widget-submit {
    margin-top: .5em;
}

.wab-form button.submit,
.wab-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.75rem;
    border: 2px solid var(--wab-color-primary, #126831);
    border-radius: var(--wab-radius-button, 999px);
    background: var(--wab-color-primary, #126831);
    color: var(--wab-color-primary-text, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}

.wab-form button.submit:hover,
.wab-form button.submit:focus-visible {
    background: color-mix(in srgb, var(--wab-color-primary, #126831) 85%, #000);
}

/* Fehlermeldungen und Bestätigung */
.wab-form p.error {
    grid-column: 1 / -1;
    margin: .3em 0 0;
    color: #b42318;
    font-weight: 600;
}

.wab-form .widget.error :is(input, select, textarea) {
    border-color: #b42318;
}

.wab-form .form-confirmation {
    margin-bottom: 1.5em;
    padding: 1.25em 1.5em;
    border-left: 4px solid var(--wab-color-primary, #126831);
    border-radius: 6px;
    background: #fff;
}

.wab-form .invisible {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}