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%}
/*
 * root.css – zentrale Gestaltung der gesamten Seite und aller WAB-Plugins
 * ==========================================================================
 *
 * Eingebunden im Seitenlayout „Layout Standard“ unter „Externe Stylesheets“.
 * Alle Einstellungen stehen als Variablen im ersten :root-Block. Wer hier einen Wert ändert,
 * ändert ihn überall: Fließtext, Überschriften, Buttons, Slider, Boxen, Bild & Text, Seitentrenner, Header, Footer …
 *
 * Für ein neues Projekt genügt es meist, die Farben, die Schriften (inkl. @font-face) und die Schriftgrößen anzupassen.
 *
 * Nicht hier, sondern im Backend unter Layout → Seitenlayout → „Breakpoints und Inhaltsbreite“ eingestellt
 * (weil Media Queries keine Variablen können): Breakpoints, Inhaltsbreiten (--wab-container …), Seitenrand (--wab-gutter)
 * und die Abschnittsabstände S–XL (--wab-space-s … --wab-space-xl).
 */

:root {
    /* ======================================================================
       1. Farben
       Zu jeder Farbe gehört eine Textfarbe (-text), die auf dieser Farbe gut lesbar ist.
       ====================================================================== */

    /* Primärfarbe – Grün aus dem Logo (files/content/images/logo.svg), Farbton 142° */
    --wab-color-primary: #126831;
    --wab-color-primary-text: #ffffff;

    /* Sekundärfarbe – helleres Grün aus derselben Familie */
    --wab-color-secondary: #4f9d69;
    --wab-color-secondary-text: #ffffff;

    /* Komplementärfarbe – gegenüber der Primärfarbe im Farbkreis (142° + 180° = 322°) */
    --wab-color-complementary: #6b1d4e;
    --wab-color-complementary-text: #ffffff;

    /* Hell – für ruhige Hintergründe */
    --wab-color-light: #f4f7f5;
    --wab-color-light-text: #1f2a24;

    /* Dunkel – für Fußbereiche und kontrastreiche Abschnitte */
    --wab-color-dark: #126831;
    --wab-color-dark-text: #ffffff;

    /* Grundfarben der Seite */
    --wab-color-text: #1f2a24;          /* Fließtext */
    --wab-color-heading: inherit;       /* Überschriften (inherit = wie der Text) */
    --wab-color-background: #ffffff;    /* Seitenhintergrund */
    --wab-color-link: var(--wab-color-primary);
    --wab-color-link-hover: var(--wab-color-dark);
    --wab-color-border: #dfe5e1;        /* Linien, Rahmen */

    /* Topbar (Leiste über der Navigation, Topbar-Modul, Hintergrundfarbe „Topbarfarbe (root.css)“) */
    --wab-color-topbar: var(--wab-color-primary);           /* Hintergrund */
    --wab-color-topbar-text: var(--wab-color-primary-text); /* Text und Icons */

    /* Navigation (Header-Modul, Hintergrundfarbe „Navigationsfarbe (root.css)“) – gilt auch für das mobile Menü */
    --wab-color-nav: #ffffff;                       /* Hintergrund */
    --wab-color-nav-text: var(--wab-color-dark);    /* Menüpunkte */
    --wab-color-nav-accent: var(--wab-color-primary); /* aktive Seite, Unterstreichung, Hover */

    /* Footer (Footer-Modul, Hintergrundfarbe „Footerfarbe (root.css)“) */
    --wab-color-footer: var(--wab-color-dark);           /* Hintergrund */
    --wab-color-footer-text: var(--wab-color-dark-text); /* Text */
    --wab-color-footer-accent: var(--wab-color-secondary); /* Striche unter Überschriften, Icons, Pfeile, Hover */

    /* ======================================================================
       2. Schriften
       Die Dateien liegen lokal unter files/content/fonts/ (kein Abruf bei Google → DSGVO-konform).
       Austausch: neue .woff2-Dateien ablegen, @font-face unten anpassen, die beiden Namen hier ändern.
       ====================================================================== */

    --wab-font-main: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --wab-font-accent: 'Merienda', 'Segoe Print', 'Comic Sans MS', cursive;

    --wab-font-weight-normal: 400;
    --wab-font-weight-bold: 700;
    --wab-font-accent-weight: 600;      /* Stärke der Akzentschrift (Überschriften h1/h2) */
    --wab-font-accent-spacing: .06em;   /* Buchstabenabstand der Akzentschrift */

    /* ======================================================================
       3. Schriftgrößen – dynamisch
       Die Schrift wächst mit der Fensterbreite von „min“ (Smartphone, 360 px) bis „max“ und bleibt dann stehen.
       --wab-font-fluid: Wachstum pro Pixel Fensterbreite (0 = feste Größe, 0.004 = wächst um 4 px je 1000 px)
       ====================================================================== */

    --wab-font-size-min: 1.0625rem;     /* 17 px – Fließtext auf Smartphones */
    --wab-font-size-max: 1.25rem;       /* 20 px – Fließtext höchstens (große Bildschirme) */
    --wab-font-fluid: .003;

    --wab-font-size-small: .875em;      /* kleine Texte (relativ zum Fließtext) */
    --wab-line-height: 1.6;             /* Zeilenabstand Fließtext */

    /* Überschriften: jeweils kleinste und größte Größe, dazwischen wachsen sie mit */
    --wab-h1-min: 2rem;      --wab-h1-max: 3.5rem;
    --wab-h2-min: 1.625rem;  --wab-h2-max: 2.5rem;
    --wab-h3-min: 1.375rem;  --wab-h3-max: 1.75rem;
    --wab-h4-min: 1.1875rem; --wab-h4-max: 1.375rem;
    --wab-h5-min: 1.0625rem; --wab-h5-max: 1.125rem;
    --wab-h6-min: 1rem;      --wab-h6-max: 1rem;
    --wab-heading-fluid: .012;          /* Wachstum der Überschriften (wie --wab-font-fluid) */
    --wab-heading-line-height: 1.2;

    /* ======================================================================
       4. Abstände im Text
       ====================================================================== */

    --wab-paragraph-gap: 1em;           /* Abstand über und unter Absätzen und Listen */
    --wab-heading-gap-top: 1.5em;       /* Abstand über Überschriften im Fließtext */
    --wab-heading-gap-bottom: .5em;     /* Abstand unter Überschriften */

    /* ======================================================================
       5. Formen, Schatten, Bewegung
       ====================================================================== */

    --wab-radius-button: 999px;         /* Buttons (999px = Pillenform, 4px = leicht abgerundet) */
    --wab-radius-box: 6px;              /* Textboxen in Slider und Seitentrenner */
    --wab-radius-card: 8px;             /* Boxen-Karten */
    --wab-radius-image: 16px;           /* Bilder bei „Bild & Text“ */

    --wab-shadow: 0 10px 30px rgba(0, 0, 0, .08);

    --wab-speed: .35s;                  /* Dauer von Übergängen (Hover, Header) */
    --wab-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   Ab hier wird nur noch berechnet und angewendet – Einstellungen bitte oben ändern.
   ========================================================================== */

/* Schriftdateien (Pfade relativ zu dieser Datei) */

/* Hauptschrift: Atkinson Hyperlegible Next – vom Braille Institute für Menschen mit Sehschwäche entwickelt,
   eindeutige Buchstabenformen (I/l/1, O/0, b/d). Variable Schrift, Stärken 200–800. */
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../../files/content/fonts/atkinson-hyperlegible-next.woff2') format('woff2');
}

@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('../../files/content/fonts/atkinson-hyperlegible-next-italic.woff2') format('woff2');
}

/* Akzentschrift: Merienda – leicht geschwungen, bleibt aber gut lesbar. Variable Schrift, Stärken 300–900. */
@font-face {
    font-family: 'Merienda';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../../files/content/fonts/merienda.woff2') format('woff2');
}

/* Dynamische Größen: clamp(kleinste, mitwachsend ab 360 px Fensterbreite, größte) */
:root {
    --wab-font-size-base: clamp(var(--wab-font-size-min), calc(var(--wab-font-size-min) + (100vw - 360px) * var(--wab-font-fluid)), var(--wab-font-size-max));

    --wab-h1-size: clamp(var(--wab-h1-min), calc(var(--wab-h1-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h1-max));
    --wab-h2-size: clamp(var(--wab-h2-min), calc(var(--wab-h2-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h2-max));
    --wab-h3-size: clamp(var(--wab-h3-min), calc(var(--wab-h3-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h3-max));
    --wab-h4-size: clamp(var(--wab-h4-min), calc(var(--wab-h4-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h4-max));
    --wab-h5-size: clamp(var(--wab-h5-min), calc(var(--wab-h5-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h5-max));
    --wab-h6-size: clamp(var(--wab-h6-min), calc(var(--wab-h6-min) + (100vw - 360px) * var(--wab-heading-fluid)), var(--wab-h6-max));
}

/*
 * Grundgestaltung. :where() hat keine Spezifität – jede Regel eines Plugins oder Elements gewinnt,
 * die Werte hier sind nur die Vorgabe für alles, was nichts Eigenes festlegt.
 * Ausnahme body: normale Spezifität, damit das Contao-Grund-CSS (body { font-size: 100.01% }) nicht gewinnt.
 */
body {
    margin: 0;
    background: var(--wab-color-background);
    color: var(--wab-color-text);
    font-family: var(--wab-font-main);
    font-size: var(--wab-font-size-base);
    font-weight: var(--wab-font-weight-normal);
    line-height: var(--wab-line-height);
}

:where(h1, h2, h3, h4, h5, h6) {
    margin: var(--wab-heading-gap-top) 0 var(--wab-heading-gap-bottom);
    color: var(--wab-color-heading);
    font-weight: var(--wab-font-weight-bold);
    line-height: var(--wab-heading-line-height);
}

:where(h1) { font-size: var(--wab-h1-size); }
:where(h2) { font-size: var(--wab-h2-size); }
:where(h3) { font-size: var(--wab-h3-size); }
:where(h4) { font-size: var(--wab-h4-size); }
:where(h5) { font-size: var(--wab-h5-size); }
:where(h6) { font-size: var(--wab-h6-size); }

/* Akzentschrift: automatisch für h1 und h2, sonst per CSS-Klasse „wab-font-accent“ (z. B. im Feld „CSS-Klasse“ eines Elements) */
:where(h1, h2),
.wab-font-accent {
    font-family: var(--wab-font-accent);
    font-weight: var(--wab-font-accent-weight);
    letter-spacing: var(--wab-font-accent-spacing);
}

/* Kein Abstand über dem ersten Element eines Inhaltselements – den Abstand regelt der Abschnitt (Artikel) */
:where([class^="content-"], .rte) > :first-child {
    margin-top: 0;
}

:where(p, ul, ol, dl, blockquote) {
    margin-block: var(--wab-paragraph-gap);
}

:where(small) {
    font-size: var(--wab-font-size-small);
}

:where(a) {
    color: var(--wab-color-link);
    text-underline-offset: .15em;
    transition: color var(--wab-speed) var(--wab-ease);
}

:where(a:hover, a:focus-visible) {
    color: var(--wab-color-link-hover);
}

:where(hr) {
    border: 0;
    border-top: 1px solid var(--wab-color-border);
}