/* Shared refinements for the existing Contao theme. */
:root {
    --brand: #b51242;
    --brand-dark: #8d1034;
    --ink: #33383d;
    --muted: #5d6268;
    --line: #e5dfe1;
    --surface: #faf6f7;
    --content-width: 1024px;
    --gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body {
    border-top-color: var(--brand);
    color: var(--ink);
    font-size: 18px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}
::selection { background: #f4d6df; color: #531127; }
input, textarea, select { caret-color: var(--brand); }
a { color: var(--brand); text-underline-offset: .18em; }
a:hover { color: var(--brand-dark); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--brand-dark);
    outline-offset: 4px;
}
.skip-to-content {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 2147483647;
    padding: 10px 18px;
    background: #fff;
    color: var(--brand-dark);
    transform: translateY(-180%);
    font-weight: 600;
}
.skip-to-content:focus { transform: translateY(0); }

/* One fluid container replaces the old fixed-width article grid. */
#wrapper { width: 100%; margin: 0; }
#header .inside, #teaser .inside, #main > .inside, #footer .inside {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
#main > .inside { margin-bottom: 0; padding-bottom: 64px; overflow: visible; }
#main .mod_article { width: 100%; float: none; margin-inline: 0; display: flow-root; overflow: visible; }
#main .mod_article > [class], #teaser .mod_article > [class] { margin-inline: 0; }
#main .mod_article [class^="layout_"] > *,
#main .mod_article [class*=" layout_"] > * { margin-inline: 0; }
#main .mod_article + .mod_article { margin-top: 40px; }
#main .ce_text, #main .ce_form, #main .layout_latest, #main .layout_full { overflow-wrap: anywhere; overflow: visible; }
#main .ce_text, #main .mod_newsreader, #main .mod_newslist {
    max-width: 74ch;
}
#main .mod_newslist, #main .mod_newsreader { margin-inline: auto; }
#main .ce_text p, #main .teaser p, #main .layout_full p { line-height: inherit; margin-bottom: 1em; }
.startseite #main .ce_text p { margin-bottom: 10px; }
#main .ce_text p:last-child, #main .teaser p:last-child { margin-bottom: 0; }
#main .ce_text span[style*="font-size"],
#main .ce_text span[style*="font-family"],
#main .teaser span[style*="font-size"] { font-size: inherit !important; font-family: inherit !important; }
#main span[style*="color: #808080"], #main span[style*="color: #777777"] { color: inherit !important; }
#main strong, #main b { color: var(--brand); font-weight: 600; }
#main :where(.ce_text a, .teaser a, .layout_full a) { text-decoration: underline; }
#main .layout_latest h2 a { text-decoration: none; }
#main ul, #main ol { margin-block: 16px 28px; padding-left: 1.35em; }
#main li { margin: 0 0 .65em; padding-left: .2em; }
#main li::marker { color: var(--brand); }
#main li p { margin-bottom: .5em; }
.startseite #main .ce_text.list li { margin-bottom: 4px; line-height: 1.5; }
.startseite #main .ce_text.list li:last-child { margin-bottom: 0; }
.startseite #main .ce_text.list li p { margin-block: 0; }
#main img { max-width: 100%; height: auto; }
#main iframe, #main video { max-width: 100%; }
#main table { max-width: 100%; border-collapse: collapse; }
#main td, #main th { padding: 10px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
#main .image_container { margin-block: 24px; }
#main .image_container.float_left { margin: 0 24px 16px 0; }
#main .image_container.float_right { margin: 0 0 16px 24px; }
#main .caption, #main .info, #main .size { color: var(--muted); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    line-height: 1.25;
    text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 3.5vw, 2.75rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); }
h3 { font-size: 1.3rem; }
h4, h5, h6 { font-size: 1.05rem; font-weight: 600; }
#main h2, #main h3, #main h4, #main h5 { margin-block: 1.5em .6em; }
#main .ce_text > :first-child, #main .layout_latest > h2,
#main .layout_full > h2 { margin-top: 0; }

/* Keep the familiar header, with more reliable alignment on desktop. */
@media (min-width: 901px) {
    #header { padding-block: 24px; }
    #header .inside { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    #header h1 { flex-shrink: 0; }
    #header .mod_navigation { float: none; margin: 0; overflow: visible; }
    #header .level_1 { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
    #header .level_1 li { padding: 0; margin: 0; }
    #header .level_1 li > a, #header .level_1 li > strong {
        display: block; padding: 10px 11px; color: var(--muted); font-size: 16px; white-space: nowrap;
    }
    #header .level_1 li > .active, #header .level_1 a:hover { color: var(--brand); background: var(--surface); border-radius: 4px; }
}

/* Page introductions and readable editorial sections. */
#teaser { background: var(--surface); border-bottom-color: var(--line); margin-bottom: 48px; }
#teaser .inside { padding-block: 44px; }
#teaser h1 { margin-block: 0 12px; }
#teaser h1 strong { color: var(--brand); }
#teaser h3 { max-width: 60ch; color: var(--muted); font-size: 21px; line-height: 1.5; margin: 0; }
.startseite #teaser { background: #f9f9f9; }
.startseite #teaser .inside { padding-block: 0; }
.startseite #teaser img { width: 100%; height: auto; }
#main .highlight {
    max-width: none;
    border: 0;
    border-radius: 6px;
    background: var(--surface);
    padding: 28px 32px;
}
#main .highlight h2 { margin: 0 0 10px; }
#main .highlight p { max-width: 74ch; }
#main .headline-seperator {
    background: none;
    margin-block: 40px 20px;
    padding-bottom: 0;
    border: 0;
}
#main .headline-seperator h1 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--brand); padding: 0; background: none; }
#main .headline-seperator h1 + h1 { margin-top: 12px; }
#main .headline-seperator p { display: none; }
.layout_latest { padding-block: 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.layout_latest:last-child { margin-bottom: 0; }
.layout_latest h2 { font-size: 25px; line-height: 1.3; margin-bottom: 14px; }
.layout_latest .teaser { margin-bottom: 18px; }
.layout_latest .image_container { background: none; padding-bottom: 0; }
.more a, .back a, a.more_red, .ce_form button.submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 20px;
    border: 1px solid var(--brand);
    border-radius: 4px;
    background: var(--brand);
    color: #fff;
    font: 600 17px/1.4 'Source Sans Pro', sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.more a:hover, .back a:hover, a.more_red:hover, .ce_form button.submit:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.back { margin-top: 32px; }
.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface); padding: 16px; }
.pagination ul, .pagination p { float: none; margin: 0 !important; }
.pagination li { display: inline-block; }
.pagination a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
#main .mod_eventlist { float: none; width: 100%; max-width: 74ch; margin-inline: auto; }
#main .event { border: 0; border-bottom: 1px solid var(--line); padding: 0 0 36px; margin-bottom: 40px; }
#main .event .info { background: var(--surface); color: var(--brand-dark); padding: 8px 14px; border-radius: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
#main .event .location { background: var(--surface); padding: 18px 20px; margin-top: 24px; }

/* Contact information and the CMS form share a responsive two-column layout. */
#main .site-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; }
.site-contact-layout > .ce_text, .site-contact-layout > .ce_form { width: auto !important; float: none; min-width: 0; margin: 0; }
.site-contact-layout .ce_text h5 { margin-top: 28px; }
.ce_form .formbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ce_form .formbody > .widget { grid-column: 1 / -1; min-width: 0; width: auto; margin: 0; float: none; }
.ce_form .formbody > .form_name, .ce_form .formbody > .form_email { grid-column: auto; }
.ce_form .widget > label { display: block; margin-bottom: 7px; color: var(--ink); font-weight: 600; font-size: 17px; }
.ce_form input.text, .ce_form textarea, .ce_form select {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #9b8e93;
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    line-height: 1.5;
    float: none;
}
.ce_form input::placeholder, .ce_form textarea::placeholder { color: #68636a; opacity: 1; }
.ce_form textarea { min-height: 180px; resize: vertical; }
.ce_form input:hover, .ce_form textarea:hover { border-color: var(--brand); }
.ce_form fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.ce_form .checkbox_container > span { display: flex; align-items: flex-start; gap: 12px; }
.ce_form .checkbox { width: 22px; height: 22px; flex: 0 0 22px; margin: 4px 0 0; accent-color: var(--brand); cursor: pointer; }
.ce_form .checkbox_container label { font-size: 16px; line-height: 1.6; cursor: pointer; }
.ce_form .widget-explanation { font-size: 15px; color: var(--muted); }
.ce_form .error { color: #a11932; font-weight: 600; margin-bottom: 8px; }
.ce_form .error.text, .ce_form .error.textarea { border-color: #a11932; background: #fff7f8; font-weight: 400; }
.ce_form button:disabled { opacity: .6; cursor: wait; }

#footer { width: 100%; background: var(--surface); color: var(--muted); font-size: 16px; }
#footer .inside { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-block: 32px; }
#footer .ce_text { float: none; width: auto; margin: 0; min-width: 0; overflow-wrap: anywhere; }
#footer .grid9 { flex: 1; max-width: 65ch; text-align: right; }
#footer p { line-height: 1.7; margin-bottom: 8px; }
#footer a { display: inline-block; text-decoration: underline; padding-block: 9px; }

/* Native button, readable text and no overlapping close control on phones. */
.cookiebar { background: var(--brand-dark); font-size: 16px; line-height: 1.5; box-shadow: 0 -4px 20px rgb(83 17 39 / 12%); padding: 18px max(24px, calc((100vw - 960px) / 2)) 18px; }
.cookiebar.open { display: flex; align-items: center; gap: 24px; }
.cookiebar-close { position: static; flex: 0 0 auto; transform: none; -webkit-transform: none; min-height: 44px; padding: 10px 18px; border: 1px solid #fff; background: #fff; color: var(--brand-dark); font: 600 16px/1.4 'Source Sans Pro', sans-serif; }
.cookiebar-close:hover { background: #f7e4ea; }
.cookiebar a { color: #fff; text-decoration: underline; }
.cookiebar :focus-visible { outline-color: #fff; }

@media (max-width: 900px) {
    :root { --gutter: 24px; }
    #header .inside { padding-inline: 16px; }
    #teaser .inside { padding-block: 32px; }
    .startseite #teaser .inside { padding-inline: 0; }
    #main > .inside { padding-bottom: 48px; }
    #main .site-contact-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
    #footer .inside { display: block; }
    #footer .ce_text, #footer .grid9 { text-align: left !important; max-width: none; }
}
@media (max-width: 640px) {
    :root { --gutter: 20px; }
    body { font-size: 17px; }
    #teaser { margin-bottom: 32px; }
    #teaser h3 { font-size: 19px; }
    #main .highlight { padding: 22px; }
    #main .mod_article + .mod_article { margin-top: 32px; }
    .layout_latest h2 { font-size: 23px; }
    #main .headline-seperator { margin-top: 32px; }
    #main .image_container.float_left, #main .image_container.float_right { float: none; margin: 20px 0; }
    #main .site-contact-layout { display: block; }
    .site-contact-layout > .ce_form { margin-top: 36px; }
    .ce_form .formbody { grid-template-columns: minmax(0, 1fr); }
    .ce_form .formbody > .form_name, .ce_form .formbody > .form_email { grid-column: 1; }
    .ce_form button.submit { width: 100%; }
    .cookiebar.open { display: block; }
    .cookiebar { padding: 16px 20px max(16px, env(safe-area-inset-bottom)); font-size: 15px; }
    .cookiebar-close { display: block; margin-top: 12px; width: 100%; }
    #main .event .info { font-size: 16px; }
}
@media print {
    #header, #footer, .cookiebar, .skip-to-content, .more, .back { display: none !important; }
    body { padding: 0 !important; border: 0; color: #000; font-size: 12pt; }
    #teaser { background: none; margin-bottom: 24px; }
    #main > .inside, #teaser .inside { max-width: none; padding: 0; }
    #main .event, #main .highlight { break-inside: avoid; }
}