header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/**
 * ============================================================================
 * CONTAO 5.7 HOMEPAGE DESIGN
 * ============================================================================
 *
 * Datei:
 *     contao-homepage.css
 *
 * Ziel:
 *     Modernes, responsives Homepage-Design für Contao 5.7.
 *
 * Primärfarbe:
 *     #0000ff
 *
 * Hintergrund:
 *     #ffffff
 *
 * Footer:
 *     #dadada
 *
 * ============================================================================
 * INHALTSVERZEICHNIS
 * ============================================================================
 *
 *  01. CSS Custom Properties / Variablen
 *  02. Reset und Grunddefinitionen
 *  03. Typografie
 *  04. Links
 *  05. Layout / Container
 *  06. Header
 *  07. Logo
 *  08. Hauptnavigation
 *  09. Mobile Navigation
 *  10. Hauptinhalt
 *  11. Content-Element Text
 *  12. Text mit Bild
 *  13. Überschriften
 *  14. Buttons
 *  15. Bilder
 *  16. Akkordeon
 *  17. Slider
 *  18. Events / Kalender
 *  19. FAQs
 *  20. Nachrichten / News
 *  21. Fotogalerie
 *  22. Formulare
 *  23. Tabellen
 *  24. Pagination
 *  25. Footer
 *  26. Accessibility
 *  27. Animationen
 *  28. Responsive Design
 *  29. Print Styles
 *
 * ============================================================================
 */


/* ==========================================================================
   01. CSS CUSTOM PROPERTIES
   ========================================================================== */

/*
 * Zentrale Variablen.
 *
 * Der Vorteil:
 * Die komplette Farbwelt kann später an einer einzigen Stelle verändert
 * werden.
 */
:root {
    --color-primary: #0000ff;
    --color-primary-dark: #0000cc;
    --color-primary-light: #3333ff;
    --color-primary-soft: #eef0ff;

    --color-white: #ffffff;
    --color-black: #111111;
    --color-text: #333333;
    --color-text-light: #666666;

    --color-border: #dddddd;
    --color-border-light: #eeeeee;

    --color-footer: #dadada;
    --color-footer-text: #333333;

    --color-success: #16803c;
    --color-error: #c62828;
    --color-warning: #a86400;

    --container-width: 1200px;

    --header-height: 90px;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-xxl: 6rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.10);

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 500ms ease;

    --font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* ==========================================================================
   02. RESET UND GRUNDDEFINITIONEN
   ========================================================================== */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;

    background: var(--color-white);
    color: var(--color-text);

    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    max-width: 100%;
}

figure {
    margin: 0;
}

iframe {
    max-width: 100%;
}


/* ==========================================================================
   03. TYPOGRAFIE
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: var(--space-md);

    color: var(--color-black);

    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

h3 {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.1rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

.lead {
    font-size: 1.2rem;
    color: var(--color-text-light);
}


/* ==========================================================================
   04. LINKS
   ========================================================================== */

a {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

a:focus-visible {
    outline: 3px solid rgba(0, 0, 255, 0.35);
    outline-offset: 3px;
}


/* ==========================================================================
   05. LAYOUT / CONTAINER
   ========================================================================== */

/*
 * Der zentrale Container begrenzt die maximale Seitenbreite.
 *
 * In Contao kann dieser Container beispielsweise durch ein eigenes
 * Layout-/Wrapper-Element oder über das Seitenlayout erzeugt werden.
 */
.container,
.inside {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-left: auto;
    margin-right: auto;
}

/*
 * Für größere Inhaltsbereiche.
 */
.content-wrapper {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-left: auto;
    margin-right: auto;
}

/*
 * Standardmäßiger Abstand zwischen Inhaltsbereichen.
 */
#main > .inside > *,
.mod_article > *,
.ce_text,
.ce_image,
.ce_text_image,
.mod_newslist,
.mod_eventlist,
.mod_faqlist,
.mod_faqpage,
.mod_calendar,
.gallery,
.ce_gallery,
.content-accordion,
.slider-wrapper {
    margin-bottom: var(--space-xl);
}


/* ==========================================================================
   06. HEADER
   ========================================================================== */

/*
 * Erwartete Contao-Struktur:
 *
 * <header id="header">
 *     <div class="inside">
 *         ...
 *     </div>
 * </header>
 */

#header {
    position: relative;
    z-index: 1000;

    background: var(--color-white);

    border-bottom: 1px solid var(--color-border-light);

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

#header > .inside {
    min-height: var(--header-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);
}


/* ==========================================================================
   07. LOGO
   ========================================================================== */

/*
 * Das SVG-Logo kann über das Contao-Bildelement oder direkt über das
 * Template ausgegeben werden.
 *
 * Beispiel:
 *
 * <a class="logo" href="/">
 *     <img src="files/images/logo.svg" alt="Startseite">
 * </a>
 */

.logo {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    color: inherit;
    text-decoration: none;
}

.logo img,
.logo svg {
    display: block;

    width: auto;
    max-width: 220px;
    max-height: 60px;
}

.logo:hover {
    opacity: 0.85;
}


/* ==========================================================================
   08. HAUPTNAVIGATION
   ========================================================================== */

/*
 * Contao Standard-Navigationsmodul:
 *
 * .mod_navigation
 *
 * Die Navigation wird horizontal dargestellt.
 */

.mod_navigation {
    margin-left: auto;
}

.mod_navigation ul {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    list-style: none;
}

.mod_navigation li {
    margin: 0;
    padding: 0;
}

.mod_navigation a,
.mod_navigation strong {
    display: block;

    padding: 0.75rem 1rem;

    color: var(--color-black);
    text-decoration: none;

    font-weight: 600;

    border-radius: var(--radius-sm);

    transition:
        color var(--transition-normal),
        background-color var(--transition-normal);
}

.mod_navigation a:hover,
.mod_navigation a:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.mod_navigation .active,
.mod_navigation .trail > a,
.mod_navigation .trail > strong,
.mod_navigation strong.active {
    color: var(--color-primary);
}

.mod_navigation .submenu {
    position: absolute;

    min-width: 220px;

    display: block;

    padding: 0.5rem;

    background: var(--color-white);

    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-md);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal),
        visibility var(--transition-normal);
}

.mod_navigation li:hover > .submenu,
.mod_navigation li:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mod_navigation .submenu li {
    display: block;
}

.mod_navigation .submenu a {
    width: 100%;
}


/* ==========================================================================
   09. MOBILE NAVIGATION
   ========================================================================== */

/*
 * Der mobile Menü-Button wird per JavaScript erzeugt.
 */
.mobile-nav-toggle {
    display: none;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    background: var(--color-white);

    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);

    color: var(--color-primary);

    cursor: pointer;
}

.mobile-nav-toggle span {
    position: relative;

    display: block;

    width: 22px;
    height: 2px;

    background: currentColor;

    transition: var(--transition-normal);
}

.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
    content: "";

    position: absolute;
    left: 0;

    width: 22px;
    height: 2px;

    background: currentColor;

    transition: var(--transition-normal);
}

.mobile-nav-toggle span::before {
    top: -7px;
}

.mobile-nav-toggle span::after {
    top: 7px;
}

.mobile-nav-toggle.is-open span {
    background: transparent;
}

.mobile-nav-toggle.is-open span::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-nav-toggle.is-open span::after {
    top: 0;
    transform: rotate(-45deg);
}


/* ==========================================================================
   10. HAUPTINHALT
   ========================================================================== */

#main {
    background: var(--color-white);
}

#main > .inside {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.mod_article {
    position: relative;
}

.mod_article + .mod_article {
    padding-top: var(--space-lg);
}


/*
 * Optionaler Hero-Bereich.
 *
 * In Contao kann dem entsprechenden Artikel beispielsweise die Klasse
 * "hero" gegeben werden.
 */
.hero {
    padding: clamp(3rem, 8vw, 7rem) 0;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f5ff 100%
        );
}

.hero h1 {
    max-width: 900px;
    color: var(--color-primary);
}

.hero p {
    max-width: 760px;
}


/* ==========================================================================
   11. CONTENT-ELEMENT TEXT
   ========================================================================== */

.ce_text {
    max-width: 900px;
}

.ce_text > ul,
.ce_text > ol {
    margin-bottom: var(--space-md);
    padding-left: 1.5rem;
}

.ce_text li {
    margin-bottom: 0.4rem;
}

.ce_text blockquote {
    margin: var(--space-lg) 0;

    padding: var(--space-md) var(--space-lg);

    background: var(--color-primary-soft);

    border-left: 5px solid var(--color-primary);

    font-size: 1.15rem;
    font-style: italic;
}


/* ==========================================================================
   12. TEXT MIT BILD
   ========================================================================== */

/*
 * Je nach verwendeter Contao-Version bzw. Template können bei einem
 * Text-Bild-Element unterschiedliche Klassen auftreten.
 *
 * Deshalb werden mehrere sinnvolle Varianten unterstützt.
 */

.ce_text_image,
.text-image {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(2rem, 5vw, 5rem);
}

.ce_text_image figure,
.text-image figure {
    margin: 0;
}

.ce_text_image img,
.text-image img {
    width: 100%;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}

.ce_text_image .image_container,
.text-image .image_container {
    overflow: hidden;

    border-radius: var(--radius-lg);
}


/*
 * Optionale Ausrichtungsklassen.
 */
.ce_text_image.image_left,
.text-image.image-left {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
}

.ce_text_image.image_right,
.text-image.image-right {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
}

.ce_text_image.image_right figure,
.text-image.image-right figure {
    order: 2;
}


/* ==========================================================================
   13. ÜBERSCHRIFTEN
   ========================================================================== */

.ce_headline {
    margin-bottom: var(--space-lg);
}

.ce_headline h1,
.ce_headline h2,
.ce_headline h3 {
    position: relative;
}

.ce_headline h2::after,
.section-title::after {
    content: "";

    display: block;

    width: 60px;
    height: 4px;

    margin-top: 0.75rem;

    background: var(--color-primary);
}


/* ==========================================================================
   14. BUTTONS
   ========================================================================== */

.button,
.btn,
a.button,
input[type="submit"],
input[type="button"],
button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0.7rem 1.4rem;

    background: var(--color-primary);

    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);

    color: var(--color-white);

    font: inherit;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.button:hover,
.btn:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);

    color: var(--color-white);

    transform: translateY(-2px);

    box-shadow: var(--shadow-sm);
}

.button.secondary,
.btn.secondary {
    background: var(--color-white);
    color: var(--color-primary);
}

.button.secondary:hover,
.btn.secondary:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}


/* ==========================================================================
   15. BILDER
   ========================================================================== */

.image_container {
    position: relative;
}

.image_container img {
    border-radius: var(--radius-md);
}

.image_container figcaption {
    margin-top: 0.5rem;

    color: var(--color-text-light);

    font-size: 0.9rem;
}


/* ==========================================================================
   16. AKKORDEON
   ========================================================================== */

/*
 * Contao 5.3+ verwendet für das neue Akkordeon u. a.:
 *
 * .content-accordion
 * .handorgel__header
 * .handorgel__header__button
 *
 * Das CSS gestaltet die Oberfläche, die eigentliche Funktionalität bleibt
 * bei Contao.
 */

.content-accordion {
    width: 100%;

    border-top: 1px solid var(--color-border);
}

.content-accordion .handorgel__header {
    margin: 0;

    border-bottom: 1px solid var(--color-border);
}

.content-accordion .handorgel__header__button {
    position: relative;

    display: block;

    width: 100%;

    padding: 1.25rem 3.5rem 1.25rem 1.25rem;

    background: var(--color-white);

    border: 0;

    color: var(--color-black);

    text-align: left;

    font-size: 1.05rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        color var(--transition-normal),
        background-color var(--transition-normal);
}

.content-accordion .handorgel__header__button::after {
    content: "+";

    position: absolute;
    right: 1.25rem;
    top: 50%;

    transform: translateY(-50%);

    color: var(--color-primary);

    font-size: 1.6rem;
    font-weight: 400;

    transition: transform var(--transition-normal);
}

.content-accordion .handorgel__header__button:hover,
.content-accordion .handorgel__header__button:focus-visible {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.content-accordion .handorgel__header__button[aria-expanded="true"] {
    color: var(--color-primary);
}

.content-accordion
.handorgel__header__button[aria-expanded="true"]::after {
    content: "−";
}

.content-accordion .handorgel__content {
    background: #fafafa;
}

.content-accordion .handorgel__content__inner {
    padding: 1.5rem 1.25rem;
}


/*
 * Legacy-Akkordeon.
 *
 * Diese Regeln unterstützen auch ältere Contao-Markups.
 */
.ce_accordion {
    margin-bottom: var(--space-xl);
}

.ce_accordion .toggler {
    position: relative;

    padding: 1.25rem 3rem 1.25rem 1.25rem;

    background: var(--color-white);

    border: 1px solid var(--color-border);

    color: var(--color-black);

    font-weight: 700;

    cursor: pointer;
}

.ce_accordion .toggler:hover,
.ce_accordion .toggler:focus-visible {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.ce_accordion .accordion {
    padding: 1.25rem;

    border: 1px solid var(--color-border);
    border-top: 0;
}


/* ==========================================================================
   17. SLIDER
   ========================================================================== */

/*
 * Die Contao-Slider-Funktionalität wird nicht ersetzt.
 *
 * Das CSS gestaltet die Slider-Oberfläche. Das Contao-js_slider-Template
 * sollte im Seitenlayout aktiviert bleiben.
 */

.ce_sliderStart,
.ce_sliderStop {
    position: relative;
}

.ce_sliderStart .content-slider,
.ce_sliderStart .slider-wrapper {
    overflow: hidden;

    border-radius: var(--radius-lg);
}

.content-slider > * {
    min-height: 250px;
}

.slider-control {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    margin-top: 1rem;
}

.slider-control a,
.slider-control .slider-menu {
    color: var(--color-primary);
}

.slider-control a {
    padding: 0.5rem 0.8rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    text-decoration: none;
}

.slider-control a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}


/* ==========================================================================
   18. EVENTS / KALENDER
   ========================================================================== */

/*
 * Contao:
 *
 * mod_calendar
 * mod_eventlist
 * mod_eventreader
 * mod_eventmenu
 */

.mod_calendar,
.mod_eventlist,
.mod_eventreader,
.mod_eventmenu {
    width: 100%;
}


/* Event-Liste */

.mod_eventlist .event,
.mod_calendar .event {
    position: relative;

    margin-bottom: var(--space-md);
    padding: var(--space-md);

    background: var(--color-white);

    border: 1px solid var(--color-border);

    border-left: 5px solid var(--color-primary);

    border-radius: var(--radius-md);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.mod_eventlist .event:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.mod_eventlist .event h2,
.mod_eventlist .event h3 {
    margin-bottom: 0.5rem;

    font-size: 1.3rem;
}

.mod_eventlist .date,
.mod_eventlist .time,
.mod_eventreader .date,
.mod_eventreader .time {
    color: var(--color-primary);

    font-size: 0.9rem;
    font-weight: 700;
}


/* Kalender */

.mod_calendar table {
    width: 100%;

    border-collapse: collapse;
}

.mod_calendar th,
.mod_calendar td {
    padding: 0.75rem;

    border: 1px solid var(--color-border);

    text-align: center;
}

.mod_calendar th {
    background: var(--color-primary);
    color: var(--color-white);
}

.mod_calendar .active {
    background: var(--color-primary-soft);
}

.mod_calendar .today {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
}


/* ==========================================================================
   19. FAQ
   ========================================================================== */

/*
 * Contao FAQ:
 *
 * mod_faqlist
 * mod_faqreader
 * mod_faqpage
 */

.mod_faqlist,
.mod_faqreader,
.mod_faqpage {
    width: 100%;
}

.mod_faqlist > ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.mod_faqlist li {
    margin-bottom: 0.5rem;
}

.mod_faqlist li a {
    display: block;

    padding: 1rem 1.25rem;

    background: var(--color-white);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    color: var(--color-black);

    text-decoration: none;

    font-weight: 600;

    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.mod_faqlist li a:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);

    color: var(--color-primary);

    transform: translateX(4px);
}


/*
 * FAQ-Seite.
 */
.mod_faqpage article {
    margin-bottom: var(--space-lg);
}

.mod_faqpage section {
    padding: var(--space-lg);

    background: #fafafa;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    margin-bottom: var(--space-md);
}

.mod_faqpage section h3 {
    color: var(--color-primary);
}


/*
 * FAQ Reader.
 */
.mod_faqreader {
    padding: var(--space-lg);

    background: #fafafa;

    border-radius: var(--radius-md);
}

.mod_faqreader h1,
.mod_faqreader h2 {
    color: var(--color-primary);
}


/* ==========================================================================
   20. NACHRICHTEN / NEWS
   ========================================================================== */

/*
 * Contao:
 *
 * mod_newslist
 * mod_newsreader
 * mod_newsarchive
 * mod_newsmenu
 */

.mod_newslist {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-lg);
}

.mod_newslist .layout_latest,
.mod_newslist .layout_short,
.mod_newslist .news-item {
    overflow: hidden;

    background: var(--color-white);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.mod_newslist .layout_latest:hover,
.mod_newslist .layout_short:hover,
.mod_newslist .news-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.mod_newslist .image_container {
    overflow: hidden;
}

.mod_newslist .image_container img {
    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 0;

    transition: transform var(--transition-slow);
}

.mod_newslist article:hover img {
    transform: scale(1.04);
}

.mod_newslist article > *:not(.image_container),
.mod_newslist .layout_latest > *:not(.image_container),
.mod_newslist .layout_short > *:not(.image_container) {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
}

.mod_newslist h2,
.mod_newslist h3 {
    margin-top: var(--space-md);

    font-size: 1.35rem;
}

.mod_newslist .info {
    color: var(--color-text-light);

    font-size: 0.85rem;
}

.mod_newslist .more {
    padding-bottom: var(--space-md);
}

.mod_newsreader {
    max-width: 900px;
}

.mod_newsreader .image_container {
    margin-bottom: var(--space-lg);
}

.mod_newsreader .image_container img {
    width: 100%;
    border-radius: var(--radius-lg);
}


/* ==========================================================================
   21. FOTOGALERIE
   ========================================================================== */

/*
 * Contao Gallery / ce_gallery
 */

.ce_gallery,
.gallery {
    width: 100%;
}

.ce_gallery ul,
.gallery ul {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 1rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.ce_gallery li,
.gallery li {
    overflow: hidden;

    border-radius: var(--radius-md);

    background: #f5f5f5;
}

.ce_gallery a,
.gallery a {
    display: block;

    overflow: hidden;
}

.ce_gallery img,
.gallery img {
    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 0;

    transition:
        transform var(--transition-slow),
        filter var(--transition-normal);
}

.ce_gallery a:hover img,
.gallery a:hover img {
    transform: scale(1.08);

    filter: brightness(0.9);
}

.ce_gallery .caption,
.gallery .caption {
    padding: 0.75rem;

    font-size: 0.9rem;
}


/* ==========================================================================
   22. FORMULARE
   ========================================================================== */

form {
    max-width: 900px;
}

.formbody {
    display: grid;

    gap: var(--space-md);
}

.widget {
    margin-bottom: var(--space-md);
}

label {
    display: block;

    margin-bottom: 0.4rem;

    color: var(--color-black);

    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
    width: 100%;

    padding: 0.85rem 1rem;

    background: var(--color-white);

    border: 1px solid #bbbbbb;
    border-radius: var(--radius-sm);

    color: var(--color-text);

    font: inherit;

    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

textarea {
    min-height: 160px;

    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;

    border-color: var(--color-primary);

    box-shadow:
        0 0 0 3px rgba(0, 0, 255, 0.12);
}

.error {
    color: var(--color-error);
}

p.error {
    margin-top: 0.3rem;
}


/* ==========================================================================
   23. TABELLEN
   ========================================================================== */

table {
    width: 100%;

    border-collapse: collapse;
}

th,
td {
    padding: 0.8rem;

    border: 1px solid var(--color-border);

    text-align: left;
}

th {
    background: var(--color-primary);

    color: var(--color-white);
}

tr:nth-child(even) td {
    background: #fafafa;
}


/* ==========================================================================
   24. PAGINATION
   ========================================================================== */

.pagination {
    margin-top: var(--space-xl);
}

.pagination ul {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.pagination a,
.pagination strong {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 40px;
    min-height: 40px;

    padding: 0.5rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    text-decoration: none;
}

.pagination strong,
.pagination a:hover {
    background: var(--color-primary);

    border-color: var(--color-primary);

    color: var(--color-white);
}


/* ==========================================================================
   25. FOOTER
   ========================================================================== */

/*
 * Gewünschte Footerfarbe:
 *
 * #dadada
 */

#footer {
    background: var(--color-footer);

    color: var(--color-footer-text);
}

#footer > .inside {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin: 0 auto;

    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

#footer a {
    color: var(--color-black);
}

#footer a:hover {
    color: var(--color-primary);
}

#footer ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

#footer li {
    margin-bottom: 0.35rem;
}

#footer .footer-navigation {
    display: flex;

    flex-wrap: wrap;

    gap: 1rem 2rem;

    margin-bottom: var(--space-lg);
}

.footer-copyright {
    padding-top: var(--space-lg);

    border-top: 1px solid rgba(0, 0, 0, 0.15);

    color: #555555;

    font-size: 0.9rem;
}


/* ==========================================================================
   26. ACCESSIBILITY
   ========================================================================== */

/*
 * Tastaturfokus muss sichtbar bleiben.
 */

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/*
 * Skip-Link für Tastaturnutzer.
 */
.invisible.skip-link {
    position: absolute;

    left: 1rem;
    top: 1rem;

    z-index: 9999;

    padding: 0.75rem 1rem;

    background: var(--color-primary);
    color: var(--color-white);
}

.invisible.skip-link:focus {
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
}


/* ==========================================================================
   27. ANIMATIONEN
   ========================================================================== */

/*
 * Elemente, die durch JavaScript beim Scrollen sichtbar werden.
 *
 * Das JavaScript fügt die Klasse .is-visible hinzu.
 */
.animate-on-scroll {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 700ms ease,
        transform 700ms ease;
}

.animate-on-scroll.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/*
 * Kleine Verzögerungen für Karten.
 */
.animate-delay-1 {
    transition-delay: 100ms;
}

.animate-delay-2 {
    transition-delay: 200ms;
}

.animate-delay-3 {
    transition-delay: 300ms;
}


/* ==========================================================================
   28. RESPONSIVE DESIGN
   ========================================================================== */


/*
 * TABLET
 * --------------------------------------------------------------------------
 */

@media (max-width: 1024px) {

    .mod_newslist {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ce_gallery ul,
    .gallery ul {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/*
 * MOBILE
 * --------------------------------------------------------------------------
 */

@media (max-width: 768px) {

    :root {
        --header-height: 70px;

        --space-xl: 3rem;
        --space-xxl: 4rem;
    }


    .container,
    .inside,
    .content-wrapper,
    #footer > .inside {
        width: min(
            calc(100% - 30px),
            var(--container-width)
        );
    }


    /* ---------------------------------------------------------------
       Header
       --------------------------------------------------------------- */

    #header > .inside {
        min-height: var(--header-height);
    }

    .logo img,
    .logo svg {
        max-width: 170px;
        max-height: 50px;
    }


    /* ---------------------------------------------------------------
       Mobile Navigation
       --------------------------------------------------------------- */

    .mobile-nav-toggle {
        display: inline-flex;
    }

    .mod_navigation {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        display: none;

        padding: 1rem;

        background: var(--color-white);

        border-bottom: 1px solid var(--color-border);

        box-shadow: var(--shadow-md);
    }

    .mod_navigation.is-open {
        display: block;
    }

    .mod_navigation > ul {
        display: block;
    }

    .mod_navigation li {
        display: block;
    }

    .mod_navigation a,
    .mod_navigation strong {
        padding: 0.9rem 1rem;
    }

    .mod_navigation .submenu {
        position: static;

        display: block;

        min-width: 0;

        padding: 0;

        border: 0;
        box-shadow: none;

        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .mod_navigation .submenu a {
        padding-left: 2rem;
    }


    /* ---------------------------------------------------------------
       Text + Bild
       --------------------------------------------------------------- */

    .ce_text_image,
    .text-image {
        grid-template-columns: 1fr;

        gap: var(--space-lg);
    }

    .ce_text_image.image_right figure,
    .text-image.image-right figure {
        order: 0;
    }


    /* ---------------------------------------------------------------
       News
       --------------------------------------------------------------- */

    .mod_newslist {
        grid-template-columns: 1fr;
    }


    /* ---------------------------------------------------------------
       Galerie
       --------------------------------------------------------------- */

    .ce_gallery ul,
    .gallery ul {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.75rem;
    }


    /* ---------------------------------------------------------------
       Kalender
       --------------------------------------------------------------- */

    .mod_calendar {
        overflow-x: auto;
    }

    .mod_calendar table {
        min-width: 600px;
    }

}


/*
 * KLEINE SMARTPHONES
 * --------------------------------------------------------------------------
 */

@media (max-width: 480px) {

    body {
        font-size: 15px;
    }

    .container,
    .inside,
    .content-wrapper,
    #footer > .inside {
        width: calc(100% - 24px);
    }

    h1 {
        font-size: 2.1rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    .ce_gallery ul,
    .gallery ul {
        grid-template-columns: 1fr;
    }

    .pagination ul {
        flex-wrap: wrap;
    }

}


/* ==========================================================================
   29. REDUZIERTE BEWEGUNG
   ========================================================================== */

/*
 * Nutzer, die im Betriebssystem "reduzierte Bewegung" aktiviert haben,
 * sollen keine unnötigen Animationen erhalten.
 *
 * Dies ist besonders wichtig für Barrierefreiheit.
 */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }

}