@charset "utf-8";

/* readex-pro - latin */
@font-face {
    font-display: swap;
    font-family: 'Readex';
    font-style: normal;
    font-weight: 160 700;
    src: url('../fonts/ReadexPro-VariableFont-HEXP.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*
====================================================================================================
Variablen
====================================================================================================
*/
/* .bg-* Container resetten die Farb-Zuordnungen,
damit sich die Farben bei Schachtelung von .bg-* Containern korrekt verhalten */
html, [class^="bg-"], [class*=" bg-"] {
    /* Farb-Zuordnung */
    --color-txt: #000;
    --bgcolor-default: #fff;

    /* -adapt-: Farbe ist primär das was dransteht, passt sich aber an (wird weiß), wenn sie der Hintergrundfarbe (gesetzt durch .bg-*) entspricht */
    --color-adapt-main: var(--color-main);
    --color-adapt-main-2: var(--color-main-2);
    --color-adapt-green: var(--color-green);
    --color-adapt-green-2: var(--color-green-2);
    --color-adapt-yellow: var(--color-yellow);
    --color-adapt-yellow-2: var(--color-yellow-2);
    --color-adapt-blue: var(--color-blue);
    --color-adapt-blue-2: var(--color-blue-2);
    /* -if-: Farbe ist primär das was dransteht, passt sich aber an, wenn die Bedingung erfüllt ist */
    --color-adapt-white--main-if-bg-main: #fff;
    --color-adapt-white--green-if-bg-green: #fff;
    --color-adapt-white--yellow-if-bg-yellow: #fff;
    --color-adapt-white--blue-if-bg-blue: #fff;
    --color-adapt-white--light-if-bg-white: var(--color-light);
    /* -equals-: Farbe entspricht immer der Hintergrundfarbe (gesetzt durch .bg-*) */
    --color-equals-bg: var(--bgcolor-default);

    --color-link: var(--color-adapt-main);
    --color-link-hover: var(--color-adapt-main-2);
    --color-social-link-hover: var(--color-link-hover);

    --color-btn: #fff;
    --bgcolor-btn: var(--color-adapt-main);
    --color-btn-hover: var(--color-btn);
    --bgcolor-btn-hover: var(--color-adapt-main-2);
    --color-btn-inact: var(--color-btn);
    --bgcolor-btn-inact: hsl(0, 0%, 71%); /* #b4b4b4 */
    --color-btn-act: var(--color-btn);
    --bgcolor-btn-act: var(--color-adapt-main-2);

    --color-btn-outline: var(--color-adapt-main);
    --color-btn-outline-hover: var(--color-adapt-main-2);
    --bordercolor-btn-outline: currentColor;
    --color-btn-nobg: var(--color-adapt-main);
    --color-btn-nobg-hover: var(--color-adapt-main-2);

    --color-input: #000;
    --bgcolor-input: var(--color-lightest);
    --color-icon: currentcolor;

    --border-input: 0;
}


html {
    /* Farben */
    --color-main: rgb(140, 40, 48); /* #8C2830 */
    --color-main-2: rgb(170, 70, 78);
    --color-dark: hsl(0, 0%, 41%); /* #686868 */
    --color-mid: hsl(0, 0%, 61%); /* #9D9D9C */
    --color-light: hsl(0, 0%, 85%);
    --color-lightest: hsl(0, 0%, 92%);

    --color-green: rgb(91, 110, 52); /* #5B6E34 */
    --color-green-2: rgb(121, 140, 82);
    --color-yellow: rgb(192, 182, 67); /* #C0B643 */
    --color-yellow-2: rgb(222, 212, 97);
    --color-blue: rgb(85, 133, 153); /* #558599 */
    --color-blue-2: rgb(115, 163, 183);

    --color-alert: hsl(0, 72%, 64%); /* #E55F5F */
    --color-warning: hsl(35, 100%, 59%); /* #FFA72F */;

    /* Social Farben */
    --color-social-facebook: #3b5998;
    --color-social-facebook-2: #4273c8; /* von Shariff */
    --color-social-twitter: #00acee;
    --color-social-twitter-2: #32bbf5; /* von Shariff */
    --color-social-instagram: violet;
    --color-social-instagram-2: violet;
    --color-social-youtube: #c4302b;
    --color-social-youtube-2: #c4302b;
    --color-social-xing: #126567;
    --color-social-xing-2: #126567;
    --color-social-linkedin: #0e76a8;
    --color-social-linkedin-2: #0e76a8;
    /* Social Farben zum Zuordnen zu color oder bg eines Social-Links/Buttons */
    --color-social: #000;
    --color-social-2: #000;

    /* transparente Farbversionen */
    --color-main-trans: hsla(0, 0%, 100%, 0.5);
    --color-dark-trans: hsla(0, 0%, 41%, 0.5);
    --color-mid-trans: hsla(0, 0%, 51%, 0.5);
    --color-light-trans: hsla(0, 0%, 85%, 0.5);
    --color-white-trans: hsla(0, 0%, 100%, 0.5);
    --color-black-trans: hsla(0, 0%, 0%, 0.5);

    /* Farb-Zuordnung */
    --color-menu0-act: var(--color-light);


    /* Schriftgrößen etc. */
    --ffamily-arial: Arial, Helvetica, sans-serif;
    --ffamily-readex: Readex, Arial, Helvetica, sans-serif;
    --ffamily: var(--ffamily-readex);

    --fsize: 2rem;
    --fsize-h1: var(--fsize-h2);
    --fsize-h2: 4.8rem;
    --fsize-h3: 2.8rem;
    --fsize-h4: 2.4rem;
    --fsize-h5: 2.2rem;
    --fsize-h6: 2rem;

    --fsize-xxl: 9.6rem;
    --fsize-xl: 6.4rem;
    --fsize-l: 5.6rem;
    --fsize-sm: 1.6rem;
    --fsize-btn: 2.4rem;
    --fsize-shariff: var(--fsize-sm);
    --fsize-menu0: var(--fsize);
    --fsize-menu0sub: var(--fsize-h5);
    --fsize-breadcrumbs: var(--fsize-sm);
    --fsize-icon: 125%;

    --fweight-light: 300;
    --fweight-medium: 370;
    --fweight-semibold: 470;
    --fweight-black: 700;
    --fweight-btn: var(--fweight-semibold);


    /* Größen / Abstände */
    --gap-sm: 1.5rem;
    --gap-sm-neg: calc(0px - var(--gap-sm));
    --gap-std: 3rem;
    --gap-std-neg: calc(0px - var(--gap-std));
    --gap-dbl: 6rem;
    --gap-dbl-neg: calc(0px - var(--gap-dbl));
    --gap-big: 12rem;
    --gap-big-neg: calc(0px - var(--gap-big));

    --gap-grid: 0.625vw;
    --gap-grid-neg: calc(0px - var(--gap-grid));

    --vgap-txt: 1.5rem;
    --vgap-txt-sm: 0.75rem;
    --vgap-rowover: var(--gap-big);
    --vgap-rowover-neg: calc(0px - var(--vgap-rowover));
    --vgap-rowover-neg-conditional: var(--vgap-rowover-neg);
    --hgap-windowtocontent: calc(var(--width-fullbreakout) / 2 - 50%);
    --hgap-windowtocontent-neg: calc(0px - var(--hgap-windowtocontent));
    --vgap-li-em: 0.5;
    --hgap-li-em: 2;
    --hgap-rowindented: var(--wgrid-1);
    --hgap-rowextended: calc(var(--wgrid-1) * -1);
    --hgap-fullto12: calc((var(--width-fullbreakout) - var(--wgrid-12)) / 2);
    --hgap-fullto12andgridgap: calc(var(--hgap-fullto12) + var(--gap-grid));

    --vgap-header-t: 3.5rem;
    --vgap-header-b: 5rem;
    --vgap-logo-t: -1rem;
    --hgap-logo-l: -11%;


    --wgrid-1: 7.43vw;
    --wgrid-8: calc(8 * var(--wgrid-1) + 2 * var(--gap-grid));
    --wgrid-10: calc(10 * var(--wgrid-1) + 2 * var(--gap-grid));
    --wgrid-12: calc(12 * var(--wgrid-1) + 2 * var(--gap-grid));
    --width-fullbreakout: 100vw;
    --width-contentarea: var(--wgrid-10);
    --width-1: 8.3333%;
    --width-2: 16.6667%;
    --width-3: 25%;
    --width-4: 33.3333%;
    --width-5: 41.6667%;
    --width-6: 50%;
    --width-8: 66.6667%;
    --width-9: 75%;

    --width-max-column-em: 30;

    --width-logo: min(30.3rem, 40.7vw);
    --height-logo: calc(var(--width-logo) * 0.3467);
    --width-slider-pagination-dot: 0.8rem;

    --height-icon: 1.2em;
    --height-input: 4.8rem;
    --height-topslider: max(100vh, 35vw, 60rem);
    --height-topslider: max(100svh, 35vw, 60rem);

    --width-slider-arrow: 3rem;

    --height-header: calc(var(--vgap-header-t) + var(--vgap-logo-t) + var(--height-logo) + var(--vgap-header-b));


    /* Sonstige */
    --transition-bgarea: 2s;

    --shadow-input: 0;
    --border-btn-width: max(0.4rem, 3px);
    --border-btn: var(--border-btn-width) solid transparent;

    --p-a-menu0: 0.1rem 1.6rem;
    --p-a-menu0sub: var(--p-a-menu0);

    /* Mode bzgl. Responsive-Menü allgemein festlegen?
    --mode: mobile;
    --mode: desktop;
    */
}
@media (max-width: 1200px) {
    html {
        --fsize-xxl: 5.6rem;
        --fsize-xl: 4.6rem;
        --fsize-l: 4.1rem;
        --fsize-h2: 3.6rem;
        --fsize-h3: 2.6rem;
    }
    /* problematisch, wenn es Überlappungen zwischen #main und #footer oder #header gibt;
    ansonsten aber sinnvoll, da ohne ggf. horizontales Scrolling vorkommt
    (va. beobachtet bei seiteninternen Links).
    Geht hier aber nicht, da #main erst bei 500px vollbreit wird.
    #main {
        overflow: hidden;
    }
    */
}
/*
@media (max-width: 1000px) {
    html {
        --gap-big: var(--gap-std);
    }
}
*/
@media (max-width: 750px) {
    html {
        --width-contentarea: var(--wgrid-12);
        --hgap-rowindented: 0px;
        --hgap-rowextended: 0px;

        --hgap-logo-l: -5%;
    }
}
@media (max-width: 600px) {
    html {
        --fsize-xxl: 4.2rem;
        --fsize-xl: 3.8rem;
        --fsize-l: 3.4rem;
        --fsize-h2: 2.8rem;
        --fsize-h3: 2.5rem;
    }
}
@media (max-width: 450px) {
    html {
        --fsize-xxl: 3.7rem;
        --fsize-xl: 3.4rem;
        --fsize-l: 3.1rem;
    }
}

.has-sm-topslider {
    --height-topslider: max(50vh, 28vw, 40rem);
}

/* Für Link passende Social-Farbe zuordnen */
[href*="facebook."] {
    --color-social: var(--color-social-facebook);
    --color-social-2: var(--color-social-facebook-2);
}
[href*="twitter."] {
    --color-social: var(--color-social-twitter);
    --color-social-2: var(--color-social-twitter-2);
}
[href*="instagram."] {
    --color-social: var(--color-social-instagram);
    --color-social-2: var(--color-social-instagram-2);
}
[href*="youtube."] {
    --color-social: var(--color-social-youtube);
    --color-social-2: var(--color-social-youtube-2);
}
[href*="xing."] {
    --color-social: var(--color-social-xing);
    --color-social-2: var(--color-social-xing-2);
}
[href*="linkedin."] {
    --color-social: var(--color-social-linkedin);
    --color-social-2: var(--color-social-linkedin-2);
}


/*
====================================================================================================
Reset Style
====================================================================================================
- der Übersichtlichkeit halber entsprechend dem alten Meyer-Reset
*/
* {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    font-style: inherit;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: inherit;
    vertical-align: baseline;
    border: 0;
    background: transparent;
}
.mainmenu-ready, .mainmenu-ready * {
    scroll-behavior: smooth;
}
main {
    display: block;
}
:not(:focus-visible) {
    outline: none;
}


/*
====================================================================================================
Grundeinstellungen
====================================================================================================
*/
html {
    font-size: calc(6px + 0.28vw);
    overflow-x: hidden;
    min-width: 320px;
    height: 100%;
    background: var(--bgcolor-default);
}
body {
    font: var(--fsize)/1.5 var(--ffamily);
    position: relative;
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
    color: var(--color-txt);
    font-weight: var(--fweight-light);
    font-variation-settings: "HEXP" 0;
}
h1, h2, h3, legend {
    margin-bottom: var(--gap-std);
}
p, table, dl, ul, ol, blockquote, form {
    margin-bottom: var(--vgap-txt);
}
h4, h5, h6 {
    margin-bottom: var(--vgap-txt-sm);
}
h1, h2, h3, h4, legend {
    font-weight: var(--fweight-medium);
}

b, strong, h5, h6, dt, th, caption {
    font-weight: var(--fweight-semibold);
}
em, i, q, blockquote {
    font-style: italic;
}

ul {
    list-style: square outside;
}
ol {
    list-style: decimal outside;
}
li {
    margin-bottom: calc(var(--vgap-li-em) * 1em);
    margin-left: calc(var(--hgap-li-em) * 1em);
}

h1, .h1 {
    font-size: var(--fsize-h1);
}
h2, .h2 {
    font-size: var(--fsize-h2);
}
h3, .h3, .ce-headline > p, legend {
    font-size: var(--fsize-h3);
}
h4, .h4 {
    font-size: var(--fsize-h4);
}
h5 {
    font-size: var(--fsize-h5);
}
h6 {
    font-size: var(--fsize-h6);
}
.f-xxl {
    line-height: 1.1;
}
h1, h2, .f-xl  {
    line-height: 1.2;
}
h3, h4, .ce-headline > p, legend {
    line-height: 1.3;
}
h4 {
    line-height: 1.4;
}
.ce-headline > * {
    margin-bottom: 0;
}

.p {
    font-size: var(--fsize);
}

.f-xxl {
    font-size: var(--fsize-xxl);
}
.f-xl {
    font-size: var(--fsize-xl);
}
.f-l {
    font-size: var(--fsize-l);
}
.f-sm {
    font-size: var(--fsize-sm);
}

.box :is(h3, h4) {
    hyphens: auto;
}

/* Bilder und Medien */
object, embed, video, iframe, audio {
    display: block;
    max-width: 100%;
    margin: 0 auto var(--vgap-txt);
}
iframe {
    width: 100%;
}
video {
    background: #000;
}
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
/* Spezialstile für ausgerichtete Bilder */
img.l, img.r {
    margin: 0.7rem 1.5rem;
}
p img.l, p img.r {
    max-width: 40%;
}
/* Elemente mit hidden-Attribut sollten immer ausgeblendet sein. */
[hidden] {
    display: none !important;
}

/* Links u. Text-button */
a:link, a:visited, .no-btn {
    color: var(--color-link);
}
a:hover, .no-btn:hover {
    color: var(--color-link-hover);
}

/* Seltener verwendete Elemente */
hr {
    clear: both;
    margin-bottom: var(--gap-dbl);
    padding-bottom: var(--gap-dbl);
    border-bottom: 2px solid;
}

dt {
    float: left;
    clear: both;
    width: 19rem;
    max-width: calc(52% - 1rem);
    margin-right: 1rem;
}
dd {
    float: right;
    width: calc(100% - 20rem);
    min-width: 48%;
}

sup, sub {
    font-size: 0.8em;
    position: relative;
    bottom: 0.4em;
}
sub {
    top: 0.25em;
    bottom: auto;
}

/*
Tabellen
==================================================
- per Default "unsichtbare" Tabelle ohne Borders
*/
table {
    width: 100%;
    border-collapse: collapse;
}
td, th {
    padding: 0.3rem 1rem 0.3rem 0;
    vertical-align: top;
    border: 0;
}
td[style] {
    padding: 0.3rem 1rem 0.3rem 0 !important;
    border: 0 !important;
}
thead th {
    color: var(--color-mid);
    font-size: var(--fsize-sm);
}
table p {
    margin: 0;
}
table p:not(:last-child) {
    margin-bottom: 0.75rem;
}

/* Für Tabellen mit Linien unter jeder Zeile */
.daten tr * + td {
    vertical-align: bottom;
}
.daten td, .daten th {
    border-bottom: 1px solid var(--color-adapt-main);
}
.daten td[style] {
    border-bottom: 1px solid var(--color-adapt-main) !important;
}

/* sortable Tables */
.sortable thead th {
    cursor: pointer;
}
th .icn-sort {
    display: none;
    margin-bottom: -0.1em;
    margin-left: 0.3em;
    transition: 0.3s;
    --color-icon: var(--color-adapt-main);
    --height-icon: 1.6em;
}
.sortable thead th .icn-sort {
    display: inline-block;
    transform: translateY(0.2em);
}
.sortable [aria-sort=ascending] .icn-sort {
    transform: rotate(180deg);
}

    /* Wrap, um breitere tables auf kleinen Screens horizontal zu scrollen */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/*
Formulare
==================================================
*/
form {
    clear: both;
    font-size: var(--fsize-sm);
}
fieldset {
    float: left;
    width: 100%;
}
fieldset:not(:last-of-type) {
    margin-bottom: var(--vgap-txt);
}

input, select, textarea {
    display: block;
    width: 100%;
    height: var(--height-input);
    padding: 0.2em 1em;
    color: var(--color-input);
    border: var(--border-input);
    border-width: 0 0 1px;
    border-radius: 2.3rem;
    background-color: var(--bgcolor-input);
    box-shadow: var(--shadow-input);
}
input {
    line-height: 1;
}
textarea {
    border-width: 1px;
    height: 10em;
    resize: vertical;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}
/* radio und checkbox */
input[type="checkbox"], input[type="radio"] {
    float: left;
    width: 1em;
    height: 1em;
    accent-color: var(--color-adapt-main);
    margin: 0.3em 0.5em 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
input[type="radio"] {
    border-radius: 50%;
}
input[type="file"] {
    padding-top: 0.7em;
}

label {
    display: block;
    margin: 0 0 0.5rem;
}
label[for] {
    cursor: pointer;
}
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.22 7.61' fill='black'%3E%3Cpath d='M6.61 7.61a1 1 0 0 1-.7-.3L.28 1.72A1 1 0 0 1 1.71.29l4.9 4.9L11.5.3a1 1 0 0 1 1.41 1.42L7.31 7.3a1 1 0 0 1-.7.3Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 2rem) center;
    background-size: 1.2rem;
}

/* Placeholder-Text heller */
::placeholder {
    color: inherit;
    opacity: 0.6;
}

/* Fix: Safari-Style entfernen (benötigt gesetzten border-radius); -webkit- scheint noch nötig für iOs */
input[type=submit], input[type=search] {
    -webkit-appearance: none;
    appearance: none;
}

/*
Formulare: Spezialregeln
==================================================
*/
form div {
    position: relative;
}
form > div, fieldset > div {
    float: left;
    clear: both;
    width: 100%;
}
form > div:not(:last-child), fieldset > div:not(:last-child) {
    margin-bottom: 2rem;
}
form p {
    float: left;
    width: 100%;
    margin-top: 0.5em;
}
form h2 + p, form h2 + div p, form p + div p {
    margin-top: 0;
}

.nolabel > h2, .nolabel > div > h2, .nolabel > h3, .nolabel > div > h3, .nolabel > legend, .nolabel > div > legend, .nolabel > label {
    display: none;
}

input + img {
    margin-top: 1rem;
}
/* Typo3: Powermail-Validierung */
.powermail-errors-list {
    margin: 0 !important;
}


/* Spezialstyling für del als Spamschutz:
im Typo3 geben wir E-Mail-Adressen aus Spamschutz-Gründen so aus:
name<del>@</del>domain.de */
del.schutz {
    text-decoration: none;
}


/*
====================================================================================================
Hauptbereiche
====================================================================================================
*/
#header {
    z-index: 100;
    font-size: var(--fsize-sm);
}
#main {
    position: relative;
    padding-bottom: var(--gap-std);
}
#footer {
    clear: both;
}


/*
====================================================================================================
Responsive Gridsystem
====================================================================================================
- basiert lose auf Bootstrap
- .row für subere Trennung von Zeilen, .col(-*) für Spalten
- 12er-Grid: .col-4 ist (auf Desktop) 4 von 12 Spalten breit = 33%
- .row-12 legt die "Standard-Inhaltsspalte" fest
*/
.col, [class^="col-"], [class*=" col-"], .box {
    position: relative;
    float: left;
    clear: none;
    width: 100%;
    min-height: 1px;
    margin-right: 0;
    margin-left: 0;
    padding: 0 var(--gap-grid);
    list-style: none;
}
.col-1 {
    width: 50%;
}
/* Etwas größere Handys */
@media (min-width: 351px) {
    .col-1 {
        width: var(--width-3);
    }
    .col-2 {
        width: var(--width-6);
    }
}
/* Tablets */
@media (min-width: 551px) and (max-width: 950px) {
    .col-1 {
        width: var(--width-2);
    }
    .col-2 {
        width: var(--width-4);
    }
    .col-3, .col-4 {
        width: var(--width-6);
    }
    .col-3:first-child:nth-last-child(2), :first-child + .col-3:last-child,
    .col-4:first-child:nth-last-child(2):not(.std-sizing), :first-child + .col-4:last-child:not(.std-sizing) {
        width: 100%;
    }
    .col-6 .col-2, .col-4 .col-2, .col-3 .col-2 {
        width: var(--width-2);
    }
    .col-6 .col-3, .col-4 .col-3, .col-3 .col-3 {
        width: var(--width-3);
    }
    .col-6 .col-4, .col-4 .col-4, .col-3 .col-4 {
        width: var(--width-4);
    }
    .col-9 .col-6, .col-8 .col-6, .col-6 .col-6, .col-4 .col-6, .col-3 .col-6 {
        width: var(--width-6);
    }
}
/* Endgröße (Desktops) */
@media (min-width: 951px) {
    .col-1 {
        width: var(--width-1);
    }
    .col-2 {
        width: var(--width-2);
    }
    .col-3 {
        width: var(--width-3);
    }
    .col-4 {
        width: var(--width-4);
    }
    .col-6 {
        width: var(--width-6);
    }
    .col-8 {
        width: var(--width-8);
    }
    .col-9 {
        width: var(--width-9);
    }
}

.row {
    display: block;
    clear: both;
    width: 100%;
    margin: 0 auto;
}
/* 10-Grid */
.row-10 {
    width: var(--width-contentarea);
}
.row-12 {
    width: var(--wgrid-12);
}
/* 8-Grid */
.row-indented {
    padding-right: var(--hgap-rowindented);
    padding-left: var(--hgap-rowindented);
}
.row-indented.row-over {
    padding-right: calc(var(--hgap-rowindented) + var(--hgap-windowtocontent));
    padding-left: calc(var(--hgap-rowindented) + var(--hgap-windowtocontent));
}
/* 12-Grid */
.row-extended {
    margin-right: var(--hgap-rowextended);
    margin-left: var(--hgap-rowextended);
    width: auto;
}
.row-extended.row-over {
    padding-right: calc(var(--hgap-rowextended) + var(--hgap-windowtocontent));
    padding-left: calc(var(--hgap-rowextended) + var(--hgap-windowtocontent));
}
/* Clearfix */
.row:not(.flex-grid):after, form:after, dl:after {
    line-height: 0;
    display: table;
    clear: both;
    content: '';
}

/*
Vollbreite Zeilen
==================================================
- zum Ausbrechen aus der Standard-Inhaltsspalte
- .row-over gibt der ganze Zeile einen Hintergrund, Inhalt bleibt bündig mit der Standard-Inhaltsspalte
- .row-fullscreen
*/
.row-over {
    width: var(--width-fullbreakout);
    margin: var(--vgap-rowover) var(--hgap-windowtocontent-neg);
    padding: var(--vgap-rowover) var(--hgap-windowtocontent);
    background: no-repeat 50% top;
    background-size: cover;
}
.row-fullscreen {
    width: var(--width-fullbreakout);
    margin-right: var(--hgap-windowtocontent-neg);
    margin-left: var(--hgap-windowtocontent-neg);
}
.row[style*=background-image]:not(.row-over) {
    background: no-repeat 50%;
    background-size: contain;
}
.ce-headline {
    padding-top: var(--vgap-rowover);
    padding-bottom: var(--vgap-rowover);
}

/*
Spezialinteraktionen: Abstände mit .row-over etc.
==================================================
*/
.row-over + .ce-headline, .ce-headline + .ce-headline, .ce-headline + div > .ce-headline:first-child,
.row-over > *:first-child {
    padding-top: 0;
}
.ce-headline + .row-over, #main > .row-over:first-child {
    margin-top: 0;
}
.row-over + .row-over, .row-over + .row > * > .row-over:first-child {
    margin-top: var(--vgap-rowover-neg);
}
#main > .row-over:last-child {
    margin-bottom: 0;
}

/*
Box: Grundklasse für Teaser etc.
==================================================
- entspricht quasi .card
*/
.box {
    margin-bottom: var(--gap-std);
}
.box-link a, a.box-link {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}
.box-link a {
    min-height: 100%;
}

.box-link img {
    transition: 0.8s;
}
.box-link .wrap-img {
    overflow: hidden;
}
.box-link a:hover .wrap-img img, a.box-link:hover .wrap-img img {
    transform: scale(1.08);
}

/*
Flex-Unterstützung
==================================================
*/
.flex-grid {
    display: flex;
    flex-flow: row wrap;
}
.flex-grid > * {
    flex: 0 1 auto;
}
.flex-col.flex-col {
    display: flex;
    flex-direction: column;
}

/*
Hintergründe
==================================================
- oft mit .row-over
- setzen
*/
[class^="bg-"], [class*=" bg-"] {
    color: var(--color-txt);
}
.bg-dark, .bg-maincolor, .bg-green, .bg-yellow, .bg-blue {
    --color-txt: #fff;
    --color-adapt-main: #fff;
    --color-adapt-main-2: var(--color-light);
    --color-adapt-green: #fff;
    --color-adapt-green-2: var(--color-light);
    --color-adapt-yellow: #fff;
    --color-adapt-yellow-2: var(--color-light);
    --color-adapt-blue: #fff;
    --color-adapt-blue-2: var(--color-light);
    --color-adapt-white--light-if-bg-white: #fff;
    --color-btn: var(--color-equals-bg);
    background-color: var(--color-equals-bg);
}
.bg-light, .bg-default, .bg-adapt-white--light {
    background-color: var(--color-equals-bg);
}
.bg-dark {
    --color-equals-bg: var(--color-dark);
}
.bg-light {
    --color-equals-bg: var(--color-light);
    --color-adapt-white--light-if-bg-white: #fff;
}
.bg-default {
    --color-equals-bg: var(--bgcolor-default);
}
.bg-green, a[href*=fileadmin].bg-maincolor, a[href*=fileadmin] .bg-maincolor {
    --color-equals-bg: var(--color-green);
    --color-adapt-white--green-if-bg-green: var(--color-green);
}
.bg-yellow {
    --color-equals-bg: var(--color-yellow);
    --color-adapt-white--yellow-if-bg-yellow: var(--color-yellow);
}
.bg-blue {
    --color-equals-bg: var(--color-blue);
    --color-adapt-white--blue-if-bg-blue: var(--color-blue);
}
.bg-maincolor {
    --color-equals-bg: var(--color-main);
    --color-adapt-white--main-if-bg-main: var(--color-main);
}
.bg-adapt-white--light {
    --color-equals-bg: var(--color-adapt-white--light-if-bg-white);
}

.anim-bodybg {
    transition: var(--transition-bgarea);
}
.anim-bodybg:not(.on-stage) {
    opacity: 0.1;
}

/*
====================================================================================================
SVG-Icons
====================================================================================================
SVG-Code wird direkt ins HTML geschrieben. Siehe templates/private/_ts_setup/00_svg_icons.typoscript
*/
.svg-icon {
    display: inline-block;
    width: var(--height-icon);
    height: var(--height-icon);
    vertical-align: text-bottom;
    color: var(--color-icon);
    flex-shrink: 0;
}

:is(p, h1, h2, h3, h4, h5, h6) > .svg-icon {
    width: auto;
}

/*
====================================================================================================
Buttons
====================================================================================================
Allgemeine Klassen für Links, submits und spans, die wie Buttons aussehen sollen.
Einfach .btns an einen wrap vergeben, der mehrere Links enthält (z.B. pagebrowser),
oder .btn auf einen einzelnen Link, submit oder anderes Element.

.inact: Button ist inaktiv und kann nicht gedrückt werden (z.B. "Seite zurück" auf erster Seite im pagebrowser); alternativ einfach <span> statt <a>
.cur: Button ist momentan gedrückt (z.B. aktuelle Seite im pagebrowser)
*/
button {
    cursor: pointer;
}
.btns {
    clear: both;
    overflow: hidden;
}
.btns li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}
.btn, .btns a, a.btn, .btns span, input[type="submit"], a .btn {
    font-size: var(--fsize-btn);
    font-weight: var(--fweight-btn);
    line-height: 1;
    display: inline-flex;
    float: left;
    align-items: center;
    justify-content: center;
    min-width: var(--height-input);
    min-height: var(--height-input);
    margin: 0 0.5em 1.5rem 0;
    padding: 0.2em 0.6em;
    cursor: pointer;
    transition: 0.2s ease-out;
    text-align: left;
    text-decoration: none;
    color: var(--color-btn);
    border: var(--border-btn);
    background: var(--bgcolor-btn);
    gap: 0.75rem;
    border-radius: 1em;
}

/* :hover, .inact, .cur */
.btns a:hover, .btn:hover, input[type="submit"]:hover, a:hover .btn {
    color: var(--color-btn-hover);
    background-color: var(--bgcolor-btn-hover);
}
.btns a.inact, .btns .inact a, .btns span {
    pointer-events: none;
    color: var(--color-btn-inact);
    background-color: var(--bgcolor-btn-inact);
}
.btns a.cur, .btns span.cur, .btns .cur a, .btns .cur span, .btns a.current {
    pointer-events: none;
    color: var(--color-btn-act);
    background-color: var(--bgcolor-btn-act);
}

/* Outline-Buttons */
html .btn-outline {
    border-color: var(--bordercolor-btn-outline);
    --color-btn: var(--color-btn-outline);
    --color-btn-hover: var(--color-btn-outline-hover) !important;
    --bgcolor-btn: transparent;
    --bgcolor-btn-hover: transparent !important;
}
/* Buttons ohne Hintergrund oder Outline */
html .btn-nobg {
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
    /*min-height: 0;*/
    --color-btn: var(--color-btn-nobg);
    --color-btn-hover: var(--color-btn-nobg-hover) !important;
    --color-btn-inact: var(--bgcolor-btn-inact) !important;
    --color-btn-act: var(--color-btn-nobg);
    background-color: transparent !important;
}

/* andersfarbige Buttons */
.btns-dark a, .btn-dark {
    --color-btn: #fff;
    --bgcolor-btn: var(--color-dark);
    --color-btn-hover: #fff;
    --bgcolor-btn-hover: #000;
}

/* Button-Spezialfälle */
p .btn {
    float: none;
}
p .btn:last-child {
    margin-right: 0;
}
td > .btn:only-child {
    margin: 0;
}
.btn.r {
    margin-right: 0;
    margin-left: 1rem;
}
input.btn, input[type="submit"] {
    clear: both;
    width: auto;
    box-shadow: none;
}


/*
Pagebrowser
==================================================
*/
.pagebrowser {
    --fsize-btn: var(--fsize);
}
.pagebrowser li > span, .pagebrowser li > a {
    margin: 0 1px;
    padding-right: 0.3em;
    padding-left: 0.3em;
}
.pagebrowser li:first-child > * {
    margin-left: 0;
}
.pagebrowser li:last-child > * {
    margin-right: 0;
}
.pagebrowser .prev {
    margin-right: 1rem;
}
.pagebrowser .next {
    margin-left: 1rem;
}
.pagebrowser li:not(.cur) a {
    font-weight: inherit;
    text-decoration: underline;
}


/*
Filter etc.
==================================================
*/
.filter-header {
    justify-content: space-between;
    align-items: flex-end;
}
.box-filter {
    border: solid var(--color-adapt-main);
    border-width: 2px 0;
}
.filter-categories {
    gap: 1em 3em;
    --color-link: var(--color-mid);
}
.fake-checkbox {
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    border-radius: 3px;
}
.fake-checkbox svg {
    margin: auto;
}
.filter-categories a {
    text-decoration: none;
    gap: 0.75em;
}


/*
Shariff-artige Teilen-Buttons
==================================================
*/
a.lookalike-shariff {
    font-size: var(--fsize-shariff);
    justify-content: left;
    width: 11.4em;
    min-width: 6.4em;
    max-width: 30%;
    min-height: 2.5em;
    padding: 0 0.7em 0 0;
    text-align: left;
    gap: 0;
    --color-btn: #fff;
    --bgcolor-btn: var(--color-social);
    --bgcolor-btn-hover: var(--color-social-2);
}
.lookalike-shariff > span:first-child {
    float: left;
}
.lookalike-shariff > span:first-child:before {
    font-size: 1.57em;
    line-height: 1.6em;
    width: 1.6em;
    height: 1.6em;
    margin: 0;
}
.lookalike-shariff > .share_text {
    line-height: 2.5em;
    padding-left: 0.22em;
}

@media screen and (max-width: 500px) {
    .lookalike-shariff > .share_text {
        display: none;
    }
    .btn.lookalike-shariff {
        width: 2.5em;
        min-width: 2.5em;
    }
}

.wrap-backlink a {
    text-decoration: none;
}
.wrap-backlink a svg {
    transform: scaleX(-1)
}

/*
Overlay für Text auf Bild
==================================================
*/
.overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--gap-sm) var(--gap-std);
    background: rgba(255, 255, 255, 0.85);
}
.overlay.bg-gradient {
    --gradient-dir: to top;
    --color1-gradient: var(--color-equals-bg);
    --gradient-step1: 0;
    --color2-gradient: transparent;
    background: linear-gradient(var(--gradient-dir), var(--color1-gradient) var(--gradient-step1), var(--color2-gradient));
}
.overlay.bg-dark {
    --color1-gradient: rgba(0,0,0,0.5);
}

/*
====================================================================================================
Menüs allgemein
====================================================================================================
li.act = ist in Rootline (= aktueller Bereich)
li.cur = ist genau aktuelle Seite
*/
.menu, .menu ul {
    float: left;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.menu li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.menu a {
    text-decoration: none;
}
.cur > a {
    cursor: default;
}

/*
Breadcrumbs
==================================================
*/
.menu-breadcrumbs {
    font-size: var(--fsize-breadcrumbs);
}
.menu-breadcrumbs svg {
    margin: auto 0.4rem;
}
.menu-breadcrumbs :not(.cur) > a {
    text-decoration: underline;
}


/*
Hauptmenü -- Allgemein (Standard)
==================================================
*/
.menu-0 {
    font-size: var(--fsize-menu0);
    --fsize-btn: 1em;
}
.menu-0 a {
    padding: var(--p-a-menu0);
    flex: 1 1 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-0 li li a {
    padding: var(--p-a-menu0sub);
}
.menu-0 li:hover > a, .menu-0 li.act > a {
    color: var(--color-menu0-act);
}
.menu-0 li ul {
    font-size: var(--fsize-menu0sub);
    overflow: hidden;
    order: 9;
    display: block;
}


/*
Hauptmenü -- Modus bestimmen
==================================================
das Menu-js-Script prüft, ob --mode = desktop oder = mobile ist. (ohne Anführungszeichen!)
Falls ja, richtet es sich danach und prüft nicht mehr, ob das Desktop-Menü passen würde.

html-Klassen setzen:
- "mode-desktop mode-mobile": in beiden festen Bereichen wird das jeweilige Menü direkt richtig angezeigt, im Neutralbereich initial kein Menü
- "mode-desktop": im Mobilbereich wird initial kein Menü angezeigt, ansonsten initial Desktop (kann im Neutralbereich aber noch wechseln)
- "mode-mobile": im Desktopbereich wird initial kein Menü angezeigt, ansonsten initial Mobil (kann im Neutralbereich aber noch wechseln)
- weder noch: initial wird gar kein Menü angezeigt (daher nicht zu empfehlen)

Konfigurations-Beispiele:
1) Ausgewogener Modus:
--> "mode-desktop mode-mobile"; Fest-Bereiche so legen, dass sie sicher passen. Vorsicht vor allem bei der Desktop-Festbreite.
2) Modus per CSS fest vorgeben (kein Neutralbereich):
--> "mode-desktop mode-mobile"; Festbreiten nur 1px auseinanderlegen, sowie Mindest- bzw. Höchstbreite auf den jew. Fest-Wert setzen.
3) Alter Modus (initial immer Desktop, per JS ggf. Wechsel zu Mobil)
--> "mode-desktop"; --mode gar nicht setzen; Festbreiten etc. so niedrig/hoch setzen, dass sie alle immer gelten.
4) Rein Mobil (immer Mobil, kein Wechsel zu Desktop)
--> "mode-mobile"; --mode: mobile; Mobil-Festbreite so hoch setzen, dass sie immer gilt.

Initial kein Menü anzeigen?
Bei den Modi 1 u. 3 die Bereiche wo initial nichts angezeigt wird zu eliminieren ist mit CSS möglich, aber zu aufwändig.
Zur Not ginge es aber mit JS, indem in der head.js basierend auf --mode und Screenbreite eine Klasse gesetzt wird (Minimaler Performance-Nachteil).
Initial nichts zu zeigen ist aber besser als ein Wechsel, daher sollte es reichen, bei ausgewogenem Modus den Neutralbereich möglichst eng zu setzen.
*/
html {
    --display-mobile: none;
    --display-desktop: none;
    --display-mobile-flex: var(--display-mobile);
    --display-desktop-flex: var(--display-desktop);
    --display-if-mainmenu-open: none;
    --display-if-mainmenu-closed: block;
}

.mainmenu-open {
    --display-if-mainmenu-open: block;
    --display-if-mainmenu-closed: none;
}

.show-if-mode-mobile,
.mainmenu-open .show-if-mode-mobile-menu-open {
    display: var(--display-mobile);
}
.show-if-mode-desktop {
    display: var(--display-desktop);
}


/*
Header -- Desktop (Standard)
==================================================
*/
@media (min-width: 1600px) /* [Menu: Desktop-Fest] */ {
    html {
        --mode: desktop;
    }
    .mode-desktop {
        --display-desktop: block;
        --display-desktop-flex: flex;
    }
}

@media (min-width: 600px) /* [Menu: Desktop-Mindestbreite] */ {
    .mode-desktop:not(.mode-mobile) {
        --display-desktop: block;
        --display-desktop-flex: flex;
    }
}


/*
Header -- Mobile (Standard)
==================================================
*/
@media (max-width: 599px) /* [Menu: Mobil-Fest] */ {
    html {
        --mode: mobile;
    }
    .mode-mobile {
        --display-mobile: block;
        --display-mobile-flex: flex;
    }
}

@media (max-width: 1599px) /* [Menu: Mobile-Höchstbreite] */ {
    .mode-mobile:not(.mode-desktop) {
        --display-mobile: block;
        --display-mobile-flex: flex;
    }
    .mode-mobile:not(.mode-desktop) form.show-if-mode-mobile-menu-open {
        width: 100%;
    }
}




/*
Hauptmenü -- immer "Mobil"
==================================================
*/
html {
    --p-a-menu0: 0.1rem 0;
    --p-a-menu0sub: var(--p-a-menu0);
}

.menu-0 {
    width: 100%;
    transition: 0.4s;
    flex-flow: column nowrap;
    opacity: 0;
    pointer-events: none;
    max-height: calc(100vh - var(--height-header) + 4rem);
    max-height: calc(100dvh - var(--height-header) + 4rem);
    overflow: auto;
}
.menu-0 a:hover {
    background: rgba(0, 0, 0, 0.06);
}
.menu-0 .btn {
    display: none;
}

.menu-0-single {
    font-size: var(--fsize-h5);
}

.menu-0-blocks > li > :is(a, span)  {
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: bold;
}
.menu.menu-0-blocks > li {
    margin-bottom: var(--gap-std);
}

/* Mobil-Menü: Spaltenbreiten */
.menu-0-single > li, .menu-0-blocks > li, .menu-info {
    width: 25%;
}
.menu-social {
    width: 75%;
}
@media (max-width: 950px) {
    .menu-0-single > li, .menu-0-blocks > li, .menu-info, .menu-social {
        width: 50%;
    }
}
.menu-0-blocks ul, .menu-0 .menu-top, .menu-info li {
    min-width: 100%;
}

.responsive-menu-area > .menu-top svg {
    --height-icon: 2.2em;
    margin-top: -0.3em;
}

/* Desktop/Mobil Sichtbarkeit */
.responsive-menu-area > .menu-top > li, .menu-lang {
    display: var(--display-desktop-flex);
}
.menu-0 .menu-top, .menu-0 .menu-lang {
    display: var(--display-mobile-flex);
}
.menu-top > li:last-child {
    display: none;
}
.responsive-menu-area > .menu-top > li:last-child {
    display: flex;
}

.menu-0 .menu-social {
    gap: 3rem;
    --height-icon: 3rem;
}

/* Top-Menü im Mobil-Modus */
.menu-0 .menu-top {
    --height-icon: 1.5em;
    margin: var(--gap-std) -1em;
}
.menu-0 .menu-top a {
    text-decoration: none;
}
@media (max-width: 450px) {
    .menu-0 .menu-top li {
        width: 100%;
    }
}

.menu-0 .menu-lang {
    margin-left: -0.3em;
}

.menu-0 li, .menu-0 .has-submenu > :first-child {
    margin-bottom: 0.75rem;
}

.menu-top a {
    padding: 0 1em;
    text-decoration: underline;
}
.menu-lang {
    margin: 0 2em;
}
.menu-lang a {
    padding: 0 0.3em;
}
.menu-lang .act {
    font-weight: var(--fweight-semibold);
}
.menu-lang li:not(.act) a {
    text-decoration: underline;
}
.menu-info {
    font-size: var(--fsize-sm);
}


/*
Burger-Button / Submenü-Buttons
==================================================
*/
.responsive-menu-btn {
    margin: 0 -1rem 0 1rem;
    --height-icon: 3.5em;
}

.menu-0 .btn {
    margin: 0;
    padding: 0 1.5rem;
    min-height: 0;
}

.responsive-menu-btn svg, .menu-0 .btn svg {
    transition: 0.4s;
    display: block;
}
.menu-0 .is-open > .btn svg {
    transform: rotate(180deg);
}
.responsive-menu-btn svg {
    display: var(--display-if-mainmenu-closed);
}
.responsive-menu-btn svg+svg {
    display: var(--display-if-mainmenu-open);
}


/*
====================================================================================================
HEADER, FOOTER, ASIDE: spezifische Module / Anpassungen
====================================================================================================
*/
.logo, #footer img[src*=logo] {
    margin: 0 auto 0 0;
    width: var(--width-logo);
    transform: translate(var(--hgap-logo-l), var(--vgap-logo-t));
}
.logo img {
    display: block;
    width: 100%;
}
#header .logo {
    --l: 25%;
    --r: 100%;
    clip-path: polygon(var(--l) 0, var(--r) 0, var(--r) 100%, var(--l) 100%);
}
#header .wrap-menu-0 .logo {
    --l: 0;
    --r: 25%;
}

/*
Footer
==================================================
*/
#footer {
    --vgap-logo-t: -50%;
}
#footer .row-over:first-child {
    margin-top: 0;
}
#footer .row-over:last-child {
    margin-bottom: 0;
}

#footer img[src*=logo] {
    margin-bottom: calc(var(--height-logo) / -3);
}

#footer .ce-menu li {
    margin: 0;
    list-style: none;
}

#footer .col-3:first-child {
    font-size: var(--fsize-sm);
}

#footer .colsizes-3-3-3-3 * + .col-3 a {
    text-decoration: none;
    --color-link: var(--color-txt);
    font-size: var(--fsize-h3);
}

#footer .colsizes-3-6-3 > * + * {
    width: 100%;
}
@media (min-width: 951px) {
    #footer .colsizes-3-6-3 > * + * {
        width: var(--width-4);
    }

    #footer .colsizes-3-6-3 > .col-6 {
        width: var(--width-5);
    }
}

.ce-menu-icons {
    gap: 3rem;
    --height-icon: 2.4rem;
}

/*
Header als Overlay auf Content
==================================================
*/
.header-content {
    --vgap-header-top: 3.5rem;
    position: absolute;
    padding-top: var(--vgap-header-top);
    width: 100%;
}
body:not(.layout--header-overlay) #header {
    height: var(--height-header);
}
.mainmenu-open .header-content {
    height: 100vh;
    background: var(--color-main);
    position: fixed;
}
.mainmenu-open .menu-0 {
    transition: 0.4s;
    opacity: 1;
    pointer-events: initial;
}

#header, #header * {
    transition: 0.3s;
}

.wrap-menu-0 {
    pointer-events: none;
    padding-top: var(--vgap-header-top);
    position: fixed;
    height: var(--height-header);
    top: 0;
    left: 0;
    right: 0;
    --bgcolor-header: transparent;
    background: var(--bgcolor-header) linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) no-repeat 50% 0;
}
.wrap-menu-0 .logo, .wrap-menu-0 button {
    pointer-events: initial;
}
.responsive-menu-area > :not(.wrap-menu-0) {
    z-index: 1;
}


/*
====================================================================================================
MAIN: Module / Inhalte
====================================================================================================
*/

/*
Bilder/Medien-Blöcke
==================================================
- .wrap-all-media geht um mehrere zusammengehörige Medien (z.B. Medien-Block eines Artikels)
- .wrap-media und spezifisch .wrap-img etc. gehören um jedes einzelne Medium inkl. Caption
- letzteres ggf. auch für einzelne Medien in Teasern etc.
*/
.wrap-all-media.l {
    padding-left: 0;
}
.wrap-all-media.r {
    padding-right: 0;
}
@media (max-width: 950px) {
    .wrap-all-media.col-6 {
        padding-right: 0;
        padding-left: 0;
    }
}
@media (max-width: 550px) {
    .wrap-all-media.col-3 {
        padding-right: 0;
        padding-left: 0;
    }
}

.wrap-media video, .wrap-video video,
.wrap-media audio, .wrap-audio audio,
.wrap-all-media img, .wrap-img img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.wrap-img, .wrap-video, .wrap-media {
    position: relative;
    margin-bottom: var(--vgap-txt);
}

.wrap-img a, .wrap-media a {
    display: block;
}

.caption {
    font-size: 0.8em;
    clear: both;
    margin: 0.75rem 0 0;
}

/*
Partner-Logos
==================================================
*/
.partner-logos .splide__pagination {
    justify-content: center;
}
.partner-logos img {
    aspect-ratio: 1.5;
    object-fit: contain;
}

/*
Lightbox-Bilder mit Icon
==================================================
*/
.lightbox {
    --size-icn: min(3rem, 15%);
    --gap-icn: min(2rem, 5%);
    position: relative;
}
.lightbox:after {
    content:'';
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 37 40' fill='%23fff'%3E%3Cpath d='M18.5,11.5C8.3,11.5,0,19.8,0,30s8.3,18.5,18.5,18.5,18.5-8.3,18.5-18.5S28.7,11.5,18.5,11.5ZM18.5,45.5c-8.55,0-15.5-6.95-15.5-15.5s6.95-15.5,15.5-15.5,15.5,6.95,15.5,15.5-6.95,15.5-15.5,15.5Z'/%3E%3Cpolygon points='17.3 25.16 21.33 25.16 13.66 32.83 13.66 28.8 10.66 28.8 10.66 37.84 19.7 37.84 19.7 34.84 15.89 34.84 23.34 27.39 23.34 31.2 26.34 31.2 26.34 22.16 17.3 22.16 17.3 25.16'/%3E%3C/svg%3E") no-repeat;
    position: absolute;
    top: var(--gap-icn);
    right: var(--gap-icn);
    width: var(--size-icn);
    height: var(--size-icn);
}

/*
Format beibehalten
==================================================
- va. für video-iFrames, z.B. Youtube
- 56.25% entspricht 16:9
*/
.keep-ratio {
    position: relative;
    padding-top: 56.25%;
}
.keep-ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.ar-1 {
    aspect-ratio: 1;
}
.ar-2 {
    aspect-ratio: 2;
}
.ar-16-9 {
    aspect-ratio: 16/9;
}

iframe[src*="clipmyhorse.tv"] {
    height: auto;
    aspect-ratio: 16/9;
}

/*
Linkblock / Downloads-Liste
==================================================
*/
.link-block li {
    break-inside: avoid-column;
}
.link-block a {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    gap: 0 0.5em;
    padding-bottom: var(--gap-std);
}

.link-block-2col {
    column-width: 13em;
    column-gap: 13%;
}

.ce-menu-list .link-block {
    --color-link: var(--color-txt);
    --color-icon: var(--color-adapt-main);
    --height-icon: 2.1em;
    font-weight: var(--fweight-semibold);
    line-height: 1.2;
}
.ce-menu-list .link-block svg {
    margin: -0.5em 0;
}

.link-block .icn-download {
    --height-icon: 2.6em;
    margin: -0.5em 0;
}
.ce-uploads .link-block {
    max-width: 38em;
}
.ce-uploads .link-block a {
    flex-wrap: wrap;
}
.ce-uploads .link-block p {
    width: 100%;
}


/*
Teaser
==================================================
*/
.ce-teaser .flex-grid {
    display: flex;
    flex-wrap: nowrap;
}
.ce-teaser-h > a > * {
    flex: 1 0 50%;
}
.ce-teaser-h img {
    min-height: 100%;
}
.ce-teaser h4 {
    margin-bottom: 1em;
}
.ce-teaser .icn {
    --height-icon: 9rem;
}
.ce-teaser .flex-col > :last-child {
    margin-top: auto;
}
.row-fullscreen .ce-teaser-h {
    padding: 0;
}
.row-fullscreen .ce-teaser-h .h3, .row-extended .ce-teaser-h .h3  {
    --fsize-h3: var(--fsize-xxl);
    line-height: 1.1;
    margin-bottom: 0.3em;
}
.ce-teaser .wrap-txt {
    flex-grow: 1;
}
.ce-teaser .icn {
    margin-bottom: -1rem;
}

.ce-teaser-txt-img-h .wrap-img {
    order: 2;
}
@media (min-width: 951px) {
    .box-txt-img-h :is(.wrap-media, img), .box-txt-img-h .wrap-media > a {
        height: 100%;
    }
    .box-txt-img-h :is(.wrap-media, .wrap-all-media) {
        order: 2;
    }
}
.box-fame strong {
    color: var(--color-mid);
}

.grid-masonry {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.grid-masonry > * {
    width: 100%;
}
@media (min-width: 551px) {
    .grid-masonry {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-masonry > .col-6 {
        grid-column: span 2;
        grid-row: span 2;
    }
    .grid-masonry > .col {
        grid-column: span 2;
        grid-row: span 1;
    }
}
@media (min-width: 951px) {
    .grid-masonry {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-masonry > .col {
        grid-column: span 4;
        grid-row: span 2;
    }
}

/* Bugfix - zerschießt sonst bei 3, 10, 17 News-Einträgen das Grid (Chrome) */
.grid-masonry > .col-6:first-child:nth-last-child(3), .grid-masonry > .col + .col-6:nth-last-child(3) {
    grid-column: span 1;
    grid-row: span 1;
    --fsize-h2: var(--fsize-h3);
    --fsize: var(--fsize-sm);
}

/*
News
==================================================
*/
@media (min-width: 551px) {
    .grid-masonry .overlay {
        min-height: 20rem;
        justify-content: flex-end;
    }
}


/*
Ticker
==================================================
*/
.box-ticker {
    padding-top: 10rem;
    margin-top: 23rem;
    position: relative;
}
.box-ticker .splide__slide {
    white-space: nowrap;
}
.box-ticker p {
    display: inline-block;
    padding-left: var(--gap-std);
}
.box-ticker p:after {
    content: '+++';
    padding-left: var(--gap-std);
}
.box-ticker .icn-main {
    position: absolute;
    left: 50%;
    top: -22.4rem;
    transform: translateX(-50%);
    --height-icon: 28rem;
}
.box-ticker + .wrap-more {
    margin-top: var(--gap-dbl-neg);
}

/*
Adressen / Ansprechpartner
==================================================
*/
.box-address img {
    border-radius: 50%;
}
.box-address a[href^="tel:"] {
    text-decoration: none;
}
.box-address, .box-address > a {
    gap: var(--gap-sm) var(--gap-dbl);
    flex-wrap: nowrap;
}
.box-address .wrap-img {
    width: 20rem;
    flex-shrink: 0;
}
@media (max-width: 450px) {
    .box-address, .box-address > a {
        flex-direction: column;
    }
}


/*
Events
==================================================
*/
.event-calendar .box-filter {
    border-top: 0;
}
.event-calendar .nav-event-month {
    gap: 0.5em;
}
.event-calendar .nav-event-month svg {
    transform: scale(0.7);
}

.event-calendar th {
    display: none;
}
.event-calendar td {
    padding: 0;
}
.event-calendar__day-other-month {
    opacity: 0.5;
}

.btn-biground.btn-biground {
    --height-input: min(7.3rem, 11vw);
    border-radius: 50%;
    aspect-ratio: 1;
    border-width: max(0.6rem, 6px);
    font-weight: var(--fweight-medium);
    font-size: min( var(--fsize-btn), 3.5vw);
    padding: 0;
}
tr:not(:last-child) .btn-biground {
    margin-bottom: 12.7% !important;
}
.btn-biground:not(.btn-outline) {
    pointer-events: none;
}
.btn-biground.btn-outline {
    font-weight: var(--fweight-black);
}
.event-calendar .btn-biground.cur {
    --fsize-btn: 3.5rem;
}

.btn-green {
    --color-btn-outline: var(--color-green);
}
.btn-yellow {
    --color-btn-outline: var(--color-yellow);
}
.btn-blue {
    --color-btn-outline: var(--color-blue);
}

.btn-outline:is(.btn-maincolor, .btn-blue, .btn-yellow, .btn-green) {
    --color-second: var(--color-btn-outline);
    border-right-color: var(--color-second);
    border-bottom-color: var(--color-second);
}
.btn-maincolor:is(.btn-green, .btn-yellow, .btn-blue) {
    --color-second: var(--color-main);
}
.btn-green:is(.btn-yellow, .btn-blue) {
    --color-second: var(--color-green);
}
.btn-yellow:is(.btn-blue) {
    --color-second: var(--color-yellow);
}

.event-calendar :is(.bg-maincolor, .bg-blue, .bg-yellow, .bg-green) {
    --color-second: transparent;
    background-image: linear-gradient(315deg, var(--color-second), transparent);
}
.bg-maincolor:is(.bg-green, .bg-yellow, .bg-blue) {
    --color-second: var(--color-main);
}
.bg-green:is(.bg-yellow, .bg-blue) {
    --color-second: var(--color-green);
}
.bg-yellow:is(.bg-blue) {
    --color-second: var(--color-yellow);
}

.event-calendar .has-arrow:after {
    content: '';
    position: absolute;
    border: 2.2rem solid transparent;
    pointer-events: none;
    transition: var(--transition-bgarea);
}
.event-calendar .scroll-auto-v {
    height: 100%;
}
@media (min-width: 951px) {
    .event-calendar .has-arrow:after {
        border-left-color: var(--color-equals-bg);
        top: 50%;
        transform: translateY(-50%);
        left: 0;
    }
    .event-calendar .scroll-auto-v > * {
        position: absolute;
        min-height: 100%;
    }
}
@media (max-width: 950px) {
    .event-calendar .has-arrow:after {
        border-top-color: var(--color-equals-bg);
        top: 0;
        transform: translateX(-50%);
        left: 50%;
    }
    .event-calendar .scroll-auto-v {
        margin-top: var(--gap-std);
    }
}

.event-calendar .box {
    flex: 1 0 auto;
}

.event-calendar .info {
    display: block;
}

.table-responsive + .pagebrowser {
    margin-top: -6.5rem;
}

/*
Slider: Splide
==================================================
*/
.splide {
    visibility: visible;
    --color-ui: var(--color-adapt-main);
}
.splide__list {
    display: flex !important;
    width: 100%;
}
.splide__track {
    min-width: 100%;
}

.splide__arrows {
    position: absolute;
    width: 10rem;
    bottom: var(--gap-dbl);
    right: 0;
    margin-bottom: 0.5rem;
}
.splide:not(.is-initialized) .splide__arrows {
    visibility: hidden;
}

.splide__arrow {
    position: absolute;
    z-index: 9;
    bottom: 50%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--width-slider-arrow);
    height: var(--width-slider-arrow);
    margin: 0 calc(var(--hgap-windowtocontent-neg) / 2);
    transition: 0.5s;
}
.col .splide__arrow, [class^="col-"] .splide__arrow, [class*=" col-"] .splide__arrow {
    margin: 0;
}
.splide__arrow--next {
    right: 0;
    left: auto;
}
.splide__arrow svg {
    width: auto;
    height: 100%;
    fill: var(--color-ui);
}

.splide__pagination {
    margin-left: var(--gap-grid);
    justify-content: flex-start;
    margin-bottom: var(--gap-dbl);
}
.splide__arrows + .splide__pagination {
    margin-right: 12rem;
}
.splide__pagination button {
    --width-slider-pagination: 4rem;
    width: var(--width-slider-pagination);
    height: var(--width-slider-pagination);
    background-color: var(--color-ui);
    border-radius: 50%;
    padding: calc(var(--width-slider-pagination) / 2 - var(--border-btn-width) - var(--width-slider-pagination-dot) / 2);
    background-clip: content-box;
    border: var(--border-btn-width) solid transparent;
}
.splide__pagination button.is-active {
    border-color:  var(--color-ui);
}

.all-slides-visible .splide__arrows,
.all-slides-visible .splide__slide--clone,
.all-slides-visible .splide__pagination,
.splide__pagination li:only-child {
    display: none;
}
.splide__arrow[disabled] {
    opacity: 0.5;
}
.all-slides-visible .splide__list {
    transform: none !important;
}

/*
Top-Slider
==================================================
*/
.no-touch-support .top-slider {
    pointer-events: none;
}
.top-slider .wrap-txt, .splide__arrows {
    pointer-events: all;
}
.top-slider .splide__slide {
    min-height: var(--height-topslider);
    display: flex;
    flex-direction: var(--flex-dir-topslider-overlay);
}
.top-slider .wrap-media {
    margin-bottom: 0;
    min-height: 45vh;
    position: relative;
    width: 100%;
}
.top-slider .wrap-media * {
    height: 100%;
    position: absolute;
}
.top-slider .overlay {
    --gradient-dir: var(--gradient-dir-topslider);
    --gradient-step1: var(--gradient-step1-topslider);
    position: relative;
    top: 0;
    width: var(--width-topslider-overlay);
    /* max-width ist Bugfix für Firefox */
    max-width: var(--width-topslider-overlay);
    padding: var(--vgap-topslider-overlay-t) var(--hgap-fullto12andgridgap) 8rem;
    order: var(--order-topslider-overlay);
    flex: 1 0 auto;
    z-index: 1;
    margin-top: var(--vgap-topslider-gradient);
    margin-right: var(--hgap-topslider-gradient);
    pointer-events: none;
}
.top-slider .overlay * {
    pointer-events: all;
}
/* vertikal zentrierter Overlay-Inhalt, nur erster p steht ganz oben */
.top-slider .overlay p:first-child {
    order: -1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.top-slider .overlay:before, .top-slider .overlay:after {
    display: block;
    content: '';
    margin-bottom: auto;
}

html {
    --flex-dir-topslider-overlay: row;
    --width-topslider-overlay: min(50%, 60rem);
    --gradient-dir-topslider: to right;
    --gradient-step1-topslider: calc(100% + var(--gap-topslider-gradient));
    --order-topslider-overlay: -1;
    --vgap-topslider-overlay-t: var(--height-header);
    --gap-topslider-gradient: -20rem;
    --hgap-topslider-gradient: var(--gap-topslider-gradient);
    --vgap-topslider-gradient: 0;
}
@media (max-width: 850px) {
    html {
        --width-topslider-overlay: 100%;
        --gradient-dir-topslider: to top;
        --order-topslider-overlay: 1;
        --flex-dir-topslider-overlay: column;
        --vgap-topslider-overlay-t: calc(var(--gap-topslider-gradient) * -1 + 2rem);
        --gap-topslider-gradient: -5rem;
        --hgap-topslider-gradient: 0;
        --vgap-topslider-gradient: var(--gap-topslider-gradient);
    }
    .top-slider .wrap-media {
        max-height: 55vh;
    }
}

.top-slider {
    --color-ui: #fff;
    --width-slider-arrow: 4.5rem;
    --width-slider-pagination-dot: 1rem;
}
.top-slider .splide__arrows {
    position: absolute;
    bottom: var(--gap-std);
    width: 10rem;
    right: calc(var(--hgap-fullto12andgridgap) - var(--gap-sm));
    margin-bottom: 0;
}
.top-slider .splide__pagination {
    position: absolute;
    bottom: var(--gap-std);
    margin-bottom: 0;
    margin-left:var(--hgap-fullto12andgridgap);
}

/*
Impressionen
==================================================
*/
.gallery-impressions .splide__track {
    overflow: visible;
}
.gallery-impressions .splide__slide > :first-child {
    transition: 0.5s;
    transform-origin: 0 100%;
}
.gallery-impressions .splide__slide:not(.is-active):not(.is-next):not(.is-prev) > :first-child {
    transform: scale(0.75);
}
@media (max-width: 950px) {
    .gallery-impressions .splide__slide:not(.is-active) > :first-child {
        transform: scale(0.75);
    }
}


/*
Scroll Down Button
==================================================
*/
.link-scroll {
    position: absolute;
    --color-link: #fff;
    --color-link-hover: var(--color-light);
    --height-icon: 3em;
    text-decoration: none;
    letter-spacing: 0.1em;
    font-weight: var(--fweight-medium);
}
.link-scroll svg {
    display: block;
}


/*
Input + Submit in einer Zeile
==================================================
- z.B. für kleine Such-Felder im Header oä.
*/
.form-submit-over-input {
    position: relative;
}
.form-submit-over-input input:not([type=submit]) {
    padding-right: 8rem;
}
.form-submit-over-input *[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    margin: 0;
}


/*
Akkordeon
==================================================
- siehe eigenes Script in basic.js
*/
.btn.accordion-label, .accordion-label > button {
    display: inline-flex;
    justify-content: flex-start;
    width: 100%;
    font-size: inherit;
}
.accordion-label .icn {
    margin-right: 3rem;
    margin-top: 0.05rem;
    --height-icon: 6rem;
}
.accordion-big > .accordion-label .icn {
    margin-top: 0.2em;
}
.accordion.act .accordion-label .icn-inact, .accordion:not(.act) .accordion-label .icn-act {
    display: none;
}
.accordion-label {
    font-size: var(--fsize-h2);
}

.accordion-big .accordion-label {
    font-size: var(--fsize-xl);
    --color-link: var(--color-txt);
    --color-icon: var(--color-adapt-main);
}
.accordion-big:not(.bg-nonwhite) {
    border-bottom: 1px solid var(--color-adapt-main);
}
.accordion-big .accordion-label {
    margin-top:var(--gap-std);
}
.accordion-big .accordion-content {
    padding-bottom: 4rem;
}

.accordion-sm .accordion-content {
    margin-bottom: var(--gap-dbl);
}

.accordion-label .wrap-icons {
    display: flex;
}
@media (min-width: 751px) {
    .accordion-big:not(.row-indented) > .accordion-label .wrap-icons {
        min-width: var(--hgap-rowindented);
    }
}

/*
Animiertes Highlight
==================================================
*/
p.f-xxl {
    color: var(--color-adapt-main);
    font-weight: var(--fweight-medium);
    margin-bottom: var(--gap-big);
}
.hilite {
    --color-hilite: var(--color-adapt-main);
    --color-font-normal: var(--color-adapt-main);
    --color-font-hilite: var(--color-equals-bg);
    font-weight: inherit;
}
.hilite, .hilite span {
    background: linear-gradient(to right, transparent 50%, var(--color-hilite) 50%);
    background-size: 200.2%;
    background-position: 0;
    transition: 0.5s 0.5s;
    padding: 0 1rem;
    margin: 0 -1rem;
}
.hilite span {
    background-image: linear-gradient(to right, var(--color-font-normal) 50%, var(--color-font-hilite) 50%);
    background-clip: text;
    color: transparent;
}
.hilite.was-animated, .hilite.was-animated span {
    background-position: -100%;
}
.hilite-green {
    --color-hilite: var(--color-adapt-green);
}
.hilite-yellow {
    --color-hilite: var(--color-adapt-yellow);
}
.hilite-blue {
    --color-hilite: var(--color-adapt-blue);
}


/*
Parallax
==================================================
- siehe eigenes Script in basic.js
*/
.parallax-container {
    --parallax-fr: 0;
    --parallax-fr2: 0;
    overflow: hidden;
}


/*
Google-Map / Openstreetmap
==================================================
*/
.map {
    position: relative;
    overflow: hidden;
    height: 40rem;
    max-height: 80vh;
    z-index: 0;
}


/*
Suche
==================================================
*/
.result-list-item .hit {
    font-weight: 500;
    font-style: italic;
}


/*
Podigee iFrames
==================================================
*/
iframe.podigee[height="700"] {
    height: 450px;
}


/*
====================================================================================================
Utility-Klassen
====================================================================================================
*/
body .no-list, .no-list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}
body .negate-grid-padding {
    margin-right: var(--gap-grid-neg);
    margin-left: var(--gap-grid-neg);
    padding: 0;
}

.round, .round-img img {
    border-radius: 50%;
}

.clickable {
    pointer-events: all !important;
}

/* Bei .bg-* vermeiden, dass das Element selbst den bg bekommt,
damit ihn z.B. stattdessen ein ::before bekommt
und sich trotzdem alle Inhalte entsprechend der Bg-Farbe verhalten */
body .bg-none {
    background: 0;
}

/*Zwei mögliche Lösungen, um das Überschneiden von Listen-Punkten mit links daneben floatenden Elementen zu verhindern: */
/*ul, ol { display:table; border-collapse:collapse; }*/
/*li.listenpunkt-fix, .listenpunkt-fix li {list-style-position:inside;}*/

/*
Ausblenden
==================================================
*/
body .hidden {
    display: none;
}
body .visibility-hidden {
    visibility: hidden;
}
body .visually-hidden {
    position: absolute;
    top: auto;
    left: -200vw;
    overflow: hidden;
    width: 1px;
    height: 1px;
}
/* doch anzeigen, falls im Focus - z.B. für Accessibilty-Inhalts-Link ganz oben */
body .visually-hidden:focus {
    z-index: 2000;
    top: 0;
    left: 0.5rem;
    width: auto;
    height: auto;
}

/*
Ausrichtung links / rechts / unten
==================================================
*/
body .l {
    right: auto;
    left: 0;
    float: left;
    margin-left: 0;
}
body .r {
    right: 0;
    left: auto;
    float: right;
    margin-right: 0;
}
body .b {
    top: auto;
    bottom: 0;
    margin-bottom: 0;
}

/* object-fit Bilder etc. nicht zentriert ausrichten */
.focus-left {
    object-position: left;
}
.focus-top {
    object-position: top;
}
.focus-right {
    object-position: right;
}
.focus-bottom {
    object-position: bottom;
}
.focus-left.focus-top {
    object-position: left top;
}
.focus-left.focus-bottom {
    object-position: left bottom;
}
.focus-right.focus-top {
    object-position: right top;
}
.focus-right.focus-bottom {
    object-position: right bottom;
}


/*
Zentrierung
==================================================
*/
body .center-self {
    float: none;
    margin-right: auto;
    margin-left: auto;
}
.flex-center {
    display: flex !important;
    align-items: center;
    flex-flow: row wrap;
    justify-content: center;
}
.flex-center-v {
    display: flex !important;
    align-items: center;
}
.flex-center-h {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: center;
}
.flex-distribute-h {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: space-between;
}
.flex-fill {
    flex: 1 0 1px
}

/*
Text-Ausrichtung
==================================================
- ggf. mit Text-Editor-Klassen abstimmen
*/
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}

/*
Scroll
==================================================
*/
.scroll-auto-v {
    overflow-y: auto;
}

/*
Abstände
==================================================
*/
.p-0, .p-h-0, .p-l-0 {
    padding-left: 0 !important;
}
.p-0, .p-h-0, .p-r-0 {
    padding-right: 0 !important;
}
.p-0, .p-v-0, .p-t-0 {
    padding-top: 0 !important;
}
.p-0, .p-v-0, .p-b-0 {
    padding-bottom: 0 !important;
}

.p-sm, .p-h-sm, .p-l-sm {
    padding-left: var(--gap-sm) !important;
}
.p-sm, .p-h-sm, .p-r-sm {
    padding-right: var(--gap-sm) !important;
}
.p-sm, .p-v-sm, .p-t-sm {
    padding-top: var(--gap-sm) !important;
}
.p-sm, .p-v-sm, .p-b-sm {
    padding-bottom: var(--gap-sm) !important;
}

.p-std, .p-h-std, .p-l-std {
    padding-left: var(--gap-std) !important;
}
.p-std, .p-h-std, .p-r-std {
    padding-right: var(--gap-std) !important;
}
.p-std, .p-v-std, .p-t-std {
    padding-top: var(--gap-std) !important;
}
.p-std, .p-v-std, .p-b-std {
    padding-bottom: var(--gap-std) !important;
}

.p-dbl, .p-h-dbl, .p-l-dbl {
    padding-left: var(--gap-dbl) !important;
}
.p-dbl, .p-h-dbl, .p-r-dbl {
    padding-right: var(--gap-dbl) !important;
}
.p-dbl, .p-v-dbl, .p-t-dbl {
    padding-top: var(--gap-dbl) !important;
}
.p-dbl, .p-v-dbl, .p-b-dbl {
    padding-bottom: var(--gap-dbl) !important;
}

.p-big, .p-h-big, .p-l-big {
    padding-left: var(--gap-big) !important;
}
.p-big, .p-h-big, .p-r-big {
    padding-right: var(--gap-big) !important;
}
.p-big, .p-v-big, .p-t-big {
    padding-top: var(--gap-big) !important;
}
.p-big, .p-v-big, .p-b-big {
    padding-bottom: var(--gap-big) !important;
}

.m-0, .m-h-0, .m-l-0 {
    margin-left: 0 !important;
}
.m-0, .m-h-0, .m-r-0 {
    margin-right: 0 !important;
}
.m-0, .m-v-0, .m-t-0 {
    margin-top: 0 !important;
}
.m-0, .m-v-0, .m-b-0 {
    margin-bottom: 0 !important;
}

.m-sm, .m-h-sm, .m-l-sm {
    margin-left: var(--gap-sm) !important;
}
.m-sm, .m-h-sm, .m-r-sm {
    margin-right: var(--gap-sm) !important;
}
.m-sm, .m-v-sm, .m-t-sm {
    margin-top: var(--gap-sm) !important;
}
.m-sm, .m-v-sm, .m-b-sm {
    margin-bottom: var(--gap-sm) !important;
}

.m-std, .m-h-std, .m-l-std {
    margin-left: var(--gap-std) !important;
}
.m-std, .m-h-std, .m-r-std {
    margin-right: var(--gap-std) !important;
}
.m-std, .m-v-std, .m-t-std {
    margin-top: var(--gap-std) !important;
}
.m-std, .m-v-std, .m-b-std {
    margin-bottom: var(--gap-std) !important;
}

.m-dbl, .m-h-dbl, .m-l-dbl {
    margin-left: var(--gap-dbl) !important;
}
.m-dbl, .m-h-dbl, .m-r-dbl {
    margin-right: var(--gap-dbl) !important;
}
.m-dbl, .m-v-dbl, .m-t-dbl {
    margin-top: var(--gap-dbl) !important;
}
.m-dbl, .m-v-dbl, .m-b-dbl {
    margin-bottom: var(--gap-dbl) !important;
}

.m-big, .m-h-big, .m-l-big {
    margin-left: var(--gap-big) !important;
}
.m-big, .m-h-big, .m-r-big {
    margin-right: var(--gap-big) !important;
}
.m-big, .m-v-big, .m-t-big {
    margin-top: var(--gap-big) !important;
}
.m-big, .m-v-big, .m-b-big {
    margin-bottom: var(--gap-big) !important;
}


/*
Farben
==================================================
*/
.color-adapt-main {
    color: var(--color-adapt-main);
}