*, *::after, *::before {box-sizing: inherit}
* {font: inherit}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
html {box-sizing: border-box}
body {}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,.custom {display:block;}
nav ul {list-style:none;padding: 0;margin: 0;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';}
a {margin:0;padding:0;vertical-align:baseline;background:transparent;}
ins {background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;color:#000; font-style:italic;font-weight:bold;}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
sub,sup,small {font-size: 75%;}
sub,sup {line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
svg {overflow: hidden;}
img{display:block;max-width:100%;height:auto;border:0}

button {
    all: unset;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    text-align: inherit;
    font: inherit;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button::-moz-focus-inner {
    border: 0; /* für Rand bei Firefox */
    padding: 0;
}

button:focus {
    outline: none; /* Entfernt standardmäßig Fokusrahmen */
}

button:focus-visible {
    outline: 2px solid blue; /* holt ihn fürs tab wieder rein*/
}
/* Contao spezifisch  */
@media screen{
    #container,.inside,#left,#right{position:relative;}
    #container{margin-left: auto;margin-right: auto;}
    #footer {clear:both;}
    #main .inside {min-height:1px;}
    .float_left {float:left;}
    .float_right {float:right;}
    .clear, #clear {height:0.1px;font-size:0.1px;line-height:0.1px;clear:both;}
    .custom {display:block;}
    #container:after,.custom:after {content:"";display:table;clear:both;}
}

.sr-only, .invisible {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


:root {

}

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

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

html,
body {
    min-height: 100%;
}

body {
    font-family: 'Satoshi-Variable', Verdana, sans-serif;
    color: var(--basictext);
    background: var(--background);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.3;
    text-rendering: auto;
    -webkit-text-size-adjust: 100%;
}

#wrapper {
    margin: auto 10px;
}

#header {
    height: 50px;
}

#header .inside > script {
    display: none;
}

.basic-grid,
[data-rsts-slide-class="basic-grid"] {
    column-gap: clamp(1rem, 3vw, 3rem);
    align-items: stretch;
}

#header .inside,
#footer .inside {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.footermenu {
    grid-column: 1;
}



#header .inside,
#footer .inside {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

#header .inside > .logo {
    grid-column: 1;
    grid-row: 1;
}

#header .inside > .mod_navigation {
    grid-column: 3;
    grid-row: 1;
}

#header-lang-slot {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}



#footer .inside {
    height: 50px;
    margin: 0 15px;
}

#footer {
    display: block;
    background: #1a1a1a;
}



@media (min-width: 768px) {
    body {
        font-size: clamp(1.1rem, 1.1vw, 1.5rem);
    }

    #wrapper {
        min-height:calc(100vh - 50px)
    }



    #footer .inside {
        margin: 0;
    }
}

@media (min-width: 992px) {
    #wrapper {
        margin: auto 0;
    }

    #header {
        height: 16vh;
        display: flex;
    }

    #footer .inside {
        height: 50px;
        margin: 0 30px;
    }


    #header .inside > .mod_navigation {
        grid-column: 2;
        justify-self: end;
    }

    #footer .inside > .mod_changelanguage {
        grid-column: 3;
        justify-self: end;
    }




}

@media (min-width: 2800px) {

    #wrapper,

    .mod_article {

        max-width: 2500px;
        margin-left: 5vw;
        margin-right: auto;
    }

}






[lang="de"] .mod_changelanguage {display:none}

/*
    .mainmenu,
    .mod_changelanguage {
        grid-column: 3;
    }

 */

@media (prefers-reduced-motion: reduce) {
    .has-js .reveal,
    a {
        transition: none;
        transform: none;
        opacity: 1;
    }
}


/**
* @license
*
* Font Family: Satoshi
* Designed by: Deni Anggara
* URL: https://www.fontshare.com/fonts/satoshi
* © 2026 Indian Type Foundry
*
* Satoshi Light 
* Satoshi LightItalic 
* Satoshi Regular 
* Satoshi Italic 
* Satoshi Medium 
* Satoshi MediumItalic 
* Satoshi Bold 
* Satoshi BoldItalic 
* Satoshi Black 
* Satoshi BlackItalic 
* Satoshi Variable (Variable font)
* Satoshi VariableItalic (Variable font)


* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
@font-face {
    font-family: 'Satoshi-Variable';
    src: url('../../files/app/fonts/Satoshi-Variable.woff2') format('woff2'),
    url('../../files/app/fonts/Satoshi-Variable.woff') format('woff'),
    url('../../files/app/fonts/Satoshi-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
@font-face {
    font-family: 'Satoshi-VariableItalic';
    src: url('../../files/app/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
    url('../../files/app/fonts/Satoshi-VariableItalic.woff') format('woff'),
    url('../../files/app/fonts/Satoshi-VariableItalic.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: italic;
}


/* google-sans-code-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Google Sans Code';
    font-style: normal;
    font-weight: 300;
    src: url('../../files/app/fonts/google-sans-code-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* google-sans-code-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Google Sans Code';
    font-style: normal;
    font-weight: 400;
    src: url('../../files/app/fonts/google-sans-code-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* google-sans-code-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Google Sans Code';
    font-style: normal;
    font-weight: 500;
    src: url('../../files/app/fonts/google-sans-code-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root {
    --nav-color: #383838;
    --nav-active-color: #000;
    --nav-item-line-height: 1.5;
    --nav-mobile-background: #fff;
    --nav-mobile-color: #383838;
    --nav-mobile-active-background: #f2f2f2;
    --nav-mobile-active-color: #f47c00;
    --nav-mobile-active-border-color: #f47c00;
    --nav-mobile-btn-clr: #f47c00;
    --nav-mobile-separator-color: #616161;
    --nav-mobile-padding: 50px 10px 10px;
    --nav-mobile-font-size: 110%;
    --nav-font-size: 100%;
    --nav-mobile-backdrop-height: 50px;
    --nav-submenu-background: #fff;
    --nav-burger-color: #fff;
    --nav-burger-line-color: #383838;
    --skip-background: #000;
    --skip-color: #d3d6da;
    --skip-focus-border-color: #f47c00;
    --nav-font-weight: 400;
}

body.navigation-open {
    overflow: hidden;
    padding-top: 50px;
}

body.navigation-open .nav-burger {
    color: #fff;
    color: var(--nav-burger-color)
}

/* Header beim Öffnen der mobilen Navigation fixieren */
body.navigation-open header {
    position: fixed;
    top: 0;
    left:10px;
    right: 10px;
    z-index: 100;
    background: #fff !important;
}


body.navigation-open header .logo {
    position: relative;
    z-index: 7
}

.nav-wrapper * {
    box-sizing: border-box
}

.navigation-main a, .navigation-main strong {
    line-height: 1.5;
    line-height: var(--nav-item-line-height)
}

.navigation-main .skip-link {
    visibility: hidden
}

.btn-toggle-submenu {
    all: revert;
    background: none !important;
    border: none;
    color: currentcolor !important;
    cursor: pointer;
    height: 44px;
    position: absolute;
    right: 0;
    top: 5px;
    width: 44px;
    z-index: 1
}

.btn-toggle-submenu:after {
    align-items: center;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>') no-repeat 50%;
    content: "";
    display: flex;
    height: 100%;
    justify-content: center;
    transition: transform .3s cubic-bezier(.2, .6, .3, 1.1)
}

.nav-burger {
    align-items: center;
    background: transparent;
    border: none;
    display: flex;
    justify-content: flex-start;
    line-height: 1.5;
    padding: 0;
    position: relative;
    z-index: 7
}

.nav-burger .icon-line {
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .2s ease-in-out;
    z-index: 1
}

.nav-burger .icon-line:before {
    top: -.625rem
}

.nav-burger .icon-line:after {
    bottom: -.625rem
}

.nav-burger .icon-line, .nav-burger .icon-line:after, .nav-burger .icon-line:before {
    background: var(--nav-burger-line-color);
    border-radius: 1px;
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 2.25rem
}

.nav-burger .icon-line:after, .nav-burger .icon-line:before {
    content: "";
    transition: transform .2s ease-in-out, top .2s ease-in-out, bottom .2s ease-in-out;
    z-index: 6
}

.nav-burger.is-active .icon-line {
    background: transparent
}

.nav-burger.is-active .icon-line:before {
    top: 0;
    transform: translateX(-50%) rotate(45deg)
}

.nav-burger.is-active .icon-line:after {
    bottom: 0;
    transform: translateX(-50%) rotate(-45deg)
}

.nav-burger:hover {
    cursor: pointer
}

.nav-burger__inner {
    height: 44px;
    position: relative;
    width: 44px
}


.footermenu a, .footermenu strong /*, .mod_changelanguage a, .mod_changelanguage strong*/{
    color: #ccc;
    display: block;
    font-size: 100%;
    position: relative;
}
.footermenu  a:focus-visible,.footermenu  a:focus{color:#fff;background:#1a1a1a}
.footermenu  a:focus-visible{outline:2px dashed #FFF;outline-offset: 2px}
.footermenu a:hover{color:#fff;}
.footermenu ul /*, .mod_changelanguage ul*/{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0
}


@media (min-width: 992px) {
.mainmenu li.no-desktopnav,.menue__add{display:none;}
}

@media (max-width: 991.8px) {

    .footermenu li.privacy, .footermenu li.imprint{display:none;}
    .nav-wrapper {
        position: relative;
        z-index: 5
    }

    .navigation-main {

        background: var(--nav-mobile-background);
        bottom: 0;
        color: var(--nav-mobile-color);
        font-weight:400;
        font-size: var(--nav-mobile-font-size);
        left: 0;
        line-height: 1.5;
        overflow: hidden auto;
        padding: var(--nav-mobile-padding);
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity .15s ease-in-out, visibility .1s;
        z-index: 6
    }

    .navigation-main.is-active:before {
        backdrop-filter: blur(0) !important;
        bottom: auto;
        content: "";
        display: block;
        height: var(--nav-mobile-backdrop-height);
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1;
        background:#fff
    }

    .navigation-main:not(.is-active) {
        opacity: 0;
        pointer-events: none;
        visibility: hidden
    }

    .navigation-main a, .navigation-main strong {
        color: #1a1a1a;
        display: inline-block;
        padding: 12px 10px 12px 0;
        text-decoration: none !important;
        text-decoration: initial !important;
        width: 100%;
        font-weight:400;
    }

    .navigation-main a.active, .navigation-main strong.active {
        color:#1a1a1a;
        font-weight:500;
    }

    .navigation-main .level_1 ul {
        display: none;
        flex-direction: column
    }

    .navigation-main .level_2 li {
        padding: 0 0 0 20px
    }

    .navigation-main ul {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0
    }

    .navigation-main li, .footermenu li {
        padding: 0;
        position: relative
    }

    .navigation-main li:not(:last-child) {
        border-bottom: 1px solid #a0a0a5;

    }

    .navigation-main li.submenu li:first-child {
        border-top: 1px solid hsla(0, 0%, 100%, .1);
        border-top: 1px solid var(--nav-mobile-separator-color)
    }

    .navigation-main li > .btn-toggle-submenu:after {
        transform: rotateX(180deg) rotate(-90deg)
    }

    .navigation-main li.active {
        background: #fff;

    }

    .navigation-main li.nav-expanded > ul {
        display: flex
    }

    .navigation-main li.nav-expanded > .btn-toggle-submenu:after {
        transform: rotateX(0deg) rotate(-90deg)
    }
    .menue__add{margin-top:2rem;}
    .menue__add *{color:#383838;font-weight:400;color:#383838;padding:0;font-size:100%}
   .menue__add a{border:0;display:inline}



}

@media (min-width: 992px) {

    .mobile-addon{display:none}
    .nav-wrapper {
        align-items: center;
        display: flex
    }

    .navigation-main a {
        text-decoration: none;
        text-decoration: initial
    }


/*
    .navigation-main a:focus-visible {
        color: #000;
        color: var(--nav-active-color)
    }
*/

    .navigation-main ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        list-style: none;
        margin: 0;
        padding: 0
    }


    .navigation-main .level_1 {
        align-items: center;
        column-gap: 1.7rem;
        justify-content: flex-end;
        letter-spacing: 0
    }


    .navigation-main a, .navigation-main strong{
        font-weight:400;
        color: #252525;
        display: block;
        position: relative
    }
    .navigation-main a:hover{color:#ccc}

    .navigation-main .skip-link, .footermenu .skip-link {
        left: 50%;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%);
        visibility: visible;
        clip: revert;
        background: #172b3b;
        background: var(--skip-background);
        color: #d3d6da;
        color: var(--skip-color);
        overflow: hidden;
        text-align: center;
        -webkit-text-decoration: none;
        text-decoration: none;
        top: -100px;
        transition: top .15s ease-in-out;
        z-index: 6
    }

    .navigation-main .skip-link:focus-visible {
        height: auto;
        opacity: 1;
        outline: var(--focusoutline);
        outline-offset: 2px;
        padding: 6px;
        top: 10px;
        width: auto
    }


    .footermenu .skip-link{left:40px;bottom:80px}
    .footermenu .skip-link:focus-visible{top:auto;width:auto;height:auto;opacity:1;    outline: var(--focusoutline);
        outline-offset: 2px;}


    .nav-burger {
        display: none
    }

    .footermenu a, .footermenu strong /*, .mod_changelanguage a, .mod_changelanguage strong*/{

        font-size: clamp(.9rem, 1.1vw, 1rem);

    }


    .navigation-main strong{color: #9ca1a3; }

}



@media (forced-colors) {
    .nav-burger .icon-line, .nav-burger .icon-line:after, .nav-burger .icon-line:before {
        border: 1px solid transparent;
        height: 0
    }

    .nav-burger.is-active .icon-line {
        border: 0
    }

    .nav-burger.is-active .icon-line:after {
        bottom: -1px
    }

    .nav-burger__inner {
        color: currentcolor
    }
}




:root {
    /* Basis-Tokens */
    --refhover: #c5c5c5;
    --focusbg: #000;
    --focuscolor: #fff;
    --basicwidth: 92vw;
    --knallgelb: yellow;
    --focusoutline: 2px dashed black;
    --borderbasic: 40px;
    --schraffur: #ebebec;
    --bg-dark: #1d2629;
    --background: #f7f7f5;
    --dark: #e4dcda;
    --outer: #fff;
    --content-bg: #f4f4f4;
    --basictext: #0f0f0f;
    --wrappermax: 1900px;
    --marginunit: 1rem;


    --text-dark: #363636;     /* dunkler Standardtext */
    --text-on-dark: #f2f2f2; /* helle Schrift auf dunklem Grund */
    --text-muted: #747574;    /* gedämpftes Grau */

    /* Maße */
    --fs-big: 220%;     /* große Schriftgröße */
    --pad-block: 45px;   /* vertikaler Innenabstand Artikel/Content */
    --pad-inline: 30px;   /* horizontaler Innenabstand */
    --gap-block: 10px;    /* vertikaler Abstand  */


    --hero-title: #fff;
    --hero-sub: #fff;
    --hero-rest: #fff;
    --content-text: var(--text-on-dark);
    --content-bg-dark: var(--bg-dark);
    --mobilgrey-bg: #1d2629;    /* mobil-grey Hintergrund */
}




/* ===== Bilder / Figure / Img ===== */
figure {
    position: relative;
    margin: 0;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
    border-style: none;
    user-select: none;
}
.rounded img {
    overflow: hidden;
    border-radius: 40px;
}


.content-image img,
.content-text img {
    border-radius: 4px;
}

.refscreen.content-image img{border-radius:0}

/* ===== figcaption ===== */
figcaption {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    background: rgba(0, 0, 0, .1);
    color: #fff;
    padding: .25rem .5rem;
    border-radius: .25rem;
    font-size: 90%;
}

/* ===== Artikel (.mod_article) ===== */
.mod_article {
    margin: 0 auto;
}
.mod_article:first-of-type {
    margin: 0 auto var(--gap-block) auto;
    padding: 53vw var(--pad-inline) var(--pad-block) var(--pad-inline);
    background: var(--bg-dark);
}
.mod_article.article-grey {
    margin: 0 auto var(--gap-block) auto;
    padding: var(--pad-block) var(--pad-inline);
    background: #f2f2f2;
}


/* ===== Text: a / p / em ===== */
a {
    text-decoration: none;
    transition: color .4s ease;
}
a:focus {
    background: transparent;
    color: #666;
}
a:focus-visible {
    background: var(--focusbg);
    color: var(--focuscolor) !important;
    outline: var(--focusoutline);
    outline-offset: 2px;
}

.logo:focus{color: #f1a10e;}
a:hover {
    color: #666;
}
p {
    margin-bottom:0;
    text-indent: -0.5px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
p + p{margin-top:1.5rem}
p:last-of-type {
    margin-bottom: 0;
}
p strong {
    font-weight: 500;
}
p a,
label a {
    color: var(--text-dark);
    border-bottom: 2px dotted var(--text-dark);
}
em {
    font-style: italic;
}

/* ===== Logo ===== */
.logo {
    grid-column: 1;
    z-index: 900;
    color: #191818;
    font-size: 130%;
    letter-spacing: -1.3px;
    font-weight: 500;
}
.logo:focus-visible span {
    color: #fff;
}

/* ===== Überschriften ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Satoshi-Variable', serif;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 20px;
    text-rendering: geometricPrecision;
}
h2 {
    font-size: 110%;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0;

}
h3, h4 {
    color: #fff;
    font-size: 110%;
    letter-spacing: 0;
    font-weight: 350;
}
.topper {
    color: red;
    font-size: 100%;
}

/* ===== Hero (erster Artikel) ===== */

.mod_article:first-of-type h1,
.mod_article:first-of-type h2 {
    font-size: 135%;
    font-weight: 350;
    line-height: 1.2;
    padding-right: 10vw;
}
.mod_article:first-of-type h1 {
    color: var(--hero-title);
}
.mod_article:first-of-type h2 {
    color: var(--hero-sub);
    letter-spacing: -1px;
    margin-bottom: 0;
    font-weight: 500;
}
.mod_article:first-of-type h1,
.mod_article:first-of-type h3,
.mod_article:first-of-type h4 {
    font-size: 110%;
    letter-spacing: 0;
    margin-bottom: 20px;
    font-weight: 350;
}
.mod_article:first-of-type h3,
.mod_article:first-of-type h4 {
    color: var(--hero-rest);
}
.mod_article.referenzen:first-of-type p {
    color: #fff;
    margin-top: 0;
    font-size: 100%;
    letter-spacing: 0;
    font-weight: 400;
}

.notfound .mod_article:first-of-type{
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:4vw;
    min-height:auto;
    background:transparent;
color:#1a1a1a
}

.notfound .mod_article:first-of-type h1{color:#1a1a1a;font-size:200%;margin:0}

.notfound .mod_article:first-of-type h2{
font-weight:400;
    color:#747574
}

/* ===== Content-Container ===== */
.content {
    padding: var(--pad-block) var(--pad-inline);
    margin-bottom: var(--gap-block);
}
.dark-content,
.swiper {
    background: var(--content-bg-dark);
}

.grey-content {
    background: #e8e8e8;
}
.dark-content p,
.dark-content a {
    color: var(--content-text);
}
.article-grey p {
    color: var(--text-dark);
    font-weight: 400;
}



.content-text ul,
.content-text ol {
    margin: 0 0 1.5rem 1.5rem;
}
.content-text ul li,
.content-text ol li {
    margin: 0 0 1rem 0;
}

/* ===== Icon / Hyperlink ===== */
.icon h3 {
    display: flex;
    align-items: center;
    gap: 4px;
}
.icon h3::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    background: url("../../files/app/svg/plus-color.svg") center / contain no-repeat;
    opacity: 1;
}
.content-hyperlink a {
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4vmin;
}
.content-hyperlink a::before{
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("../../files/app/svg/arrow-right-color.svg") center / contain no-repeat;
    opacity: 1;
}
.content-hyperlink a:hover{
    opacity: .5;
}

.icon {
    padding: 50px var(--pad-inline) 0 var(--pad-inline);
}
.homeslider .content-hyperlink {
    padding: 0 var(--pad-inline) var(--pad-inline) var(--pad-inline);
}





.kontakt-infotext {
    margin-top: 1.5rem;
    margin-bottom: 4rem;
}
.ref-infotext {
    color: #fff;
    margin-top: 1rem;
}
.ref-infotext a {
    color: #fff;
    border-color: #fff;
}
.ref-claim p {

    font-size: 100%;
    line-height: 1.1;
    font-weight: 350;
}
.ref-claim p.big-dark {
    font-weight: 400;
    color: #ffffff;
}

@media (max-width: 991.8px) {
    .hide-on-mobile {
        display: none;
    }
}


/* #########################################################################
   #  DESKTOP  (min-width: 768px)
   ######################################################################### */
@media (min-width: 768px) {

    /* ===== Kontext-Farben umschalten ===== */
    :root {
        --hero-title: var(--text-dark);   /* #363636 */
        --hero-sub: var(--text-muted);    /* #747574 */
        --content-text: #0f0f0f;
        --content-bg-dark: transparent;
        --mobilgrey-bg: transparent;
    }
    /* .home tauscht die Hero-Rollen (Titel <-> Subline) */
    .home {
        --hero-title: var(--text-muted);  /* #747574 */
        --hero-sub: var(--text-dark);     /* #363636 */
    }

    /* ===== Artikel (.mod_article) ===== */
    .mod_article {
        width: var(--basicwidth);
        background: var(--background);
        margin: 0 auto 8vw auto;
        display: flex;
        flex-direction: column;
    }

    .mod_article.referenz-overview{margin: 0 auto 6vw auto;}
    .mod_article:first-of-type {
        min-height: 37vmin;
        padding: 0;
        background: var(--background);
        margin-bottom: 14vmin;
    }

    .mod_article:first-of-type .basic-grid {
        margin-top: auto;
    }
    .mod_article:last-of-type {
        margin-bottom: 8vw;
    }

    /* ===== Header/Footer .inside ===== */
    #header .inside,
    #footer .inside {
        width: var(--basicwidth);
        margin: auto;
    }

    /* ===== Text: p ===== */
    p {
        font-weight: 400;
    }
    p strong {
        font-weight: 600;
    }
    .big p {
        line-height: 1.05;
        letter-spacing: -1px;
        text-rendering: geometricPrecision;
        font-size: var(--fs-big);
        font-weight: 350;
        color: #686970;
    }

    /* ===== Logo ===== */
    .logo {
        font-size: 150%;
    }

    /* ===== Überschriften ===== */
    h1, h2 {
        font-size: var(--fs-big);
        font-weight: 350;
    }
    h1 {
        letter-spacing: -1px;
        margin-bottom: 0;
    }
    h1 span, h2 span {
        display: block;
    }
    h2 {
        color: #222f30;
        letter-spacing: 0;
        margin-bottom: 0;
    }
    h3, h4 {
        font-size: 100%;
        letter-spacing: -0.1px;
    }
    h3 {
        color: #19191b;
        font-weight: 500;
        margin-bottom: .7rem;
    }
    h4 {
        color: #121212;
        font-weight: 450;
    }
    :where(h1, h2, h3, h4, h5, h6) + p {
        margin-top: 1rem;
    }

    /* ===== Text-Helfer ===== */
    .bold, .big h2 {
        font-weight: 450;
    }
    .slim {
        font-weight: 350;
    }
    .dark {
        color: var(--text-dark);
    }
    .grey {
        color: var(--text-muted);
    }
    .big-dark, .big-grey {
        line-height: 1.05;
        letter-spacing: -1px;
        font-size: var(--fs-big);
        font-weight: 300;
    }
    .big-dark {
        font-weight: 350;
        color: var(--bg-dark);
    }
    .big-grey {
        color: var(--text-muted);
    }

    /* ===== Hero (erster Artikel) ===== */
    /* Farben kommen aus den Kontext-Variablen oben.
       Hier nur noch die Desktop-Maße/Gewichte. */
    .mod_article:first-of-type h1,
    .mod_article:first-of-type h2 {
        font-size: var(--fs-big);
        font-weight: 500;
        line-height: 1;
        letter-spacing: -1px;
        margin-bottom: 0;
        padding-right: 0;
    }
    .mod_article:first-of-type h2 {
        font-weight: 350;
    }
    .mod_article.referenzen:first-of-type p {
        color: #0f0f0f;
        font-weight: 400;
    }
    .home .mod_article:first-of-type h1 {
        font-weight: 350;
    }
    .home .mod_article:first-of-type h2 {
        font-weight: 500;
    }

    /* ===== Content-Container ===== */
    .content {
        padding: 0;
        margin-bottom: 1.5rem;
    }
    /* dark/green/grey/swiper: Hintergrund nur mobil.
       dark-content nutzt jetzt --content-bg-dark (-> transparent),
       die übrigen werden hier explizit zurückgesetzt. */

    .grey-content {
        background: transparent;
    }
    .article-grey p {
        color: var(--text-dark);
        font-weight: 400;
    }



    /* ===== Teaser ===== */
    .content-teaser {
        display: flex;
        flex-direction: column;
        background: var(--knallgelb);
        padding: clamp(2rem, 3vw, 2.5rem);
        border-radius: var(--borderbasic);
    }
    .content-teaser h2,
    .content-teaser h3 {
        font-size: 150%;
        margin-bottom: clamp(1vw, 1.5vw, 3rem);
        font-weight: bold;
    }
    .content-teaser p:first-of-type {
        margin-bottom: clamp(1vw, 2vw, 3rem);
    }
    .content-teaser p.url {
        margin-top: auto;
    }
    .content-teaser p a {
        background: #000;
        display: inline-block;
        color: #fff;
        padding: 7px 25px;
        border-radius: 25px;
    }

    /* ===== Referenz-Bilder ===== */
    .refimg-grau {
        background: #fff;

        padding: 0;
    }
    .refimg-weiss {
        background: #fff;
        border-radius:0;
        padding: 0;
    }
    .refimg-transparent {
        background: transparent;
        border-radius: 0;
        padding: 0;
    }
    .refimg-grau.quader {
        padding: 0;
    }
    .refimg-grau.quader.corner {
        padding: 6vw 0 0 6vw;
    }


    .ref-infotext {
        color: #0f0f0f;

    }
    .ref-infotext a {
        color: #0f0f0f;
        border-color: #0f0f0f;
    }

    .homeslider .content-hyperlink {
        padding: 0 ;
    }

    .icon {
        padding: 0;
    }

    /* ===== Diverses ===== */
    .ref-claim p {
        font-size: var(--fs-big);
        font-weight: 300;
    }
    .ref-claim p.big-dark {
        font-weight: 350;
        color: var(--text-dark);
    }

    .refscreen{padding:2vw;}
    .refscreen.schroetgens-1,.refscreen.schroetgens-2,.refscreen.consistiq-1{padding:1.5vw 2vw 2vw;}
    .refscreen.sh-1{padding:2vw 2vw 1.5vw;}
}


/* #########################################################################
   #  DESKTOP  (min-width: 992px)
   ######################################################################### */
@media (min-width: 992px) {

.notfound-group{margin-top:10vw}
    .mod_article:first-of-type {
        min-height: 55vmin;
        margin-bottom: 23vmin;
    }

    .content {
        padding: 0;
        margin-bottom: 0;
    }

    .kontakt-infotext {
        margin-top: 0;
    }
    .ref-infotext {
        margin-top: 0;
    }

    .ref.content-text img,
    .ref.content-rsce-referenz img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .ref.content-text figure,
    .ref.content-rsce-referenz figure {
        display: block;
        height: clamp(220px, 30vw, 800px);
        overflow: hidden;
    }


    .imgcover.content-image {
        overflow: hidden;
        z-index:500;
        height:70vh
    }

    .imgcover.content-image figure,
    .imgcover.content-image picture {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .imgcover.content-image img {
        width: 100%;
        height: 100% ;
        object-fit: contain;
        object-position: right center;
    }


p a:hover{color:var(--text-muted)}

}
@media (max-width: 768px) {

    .refscreen{padding:0 0 10px 0;}

    .mod_article.bildartikel {
        margin: 8vw auto 8vw auto;

    }

    .mod_article.mobil-grey {
        margin: 0 auto var(--gap-block) auto;
        padding: var(--pad-block) var(--pad-inline);
    }
    .mobil-grey {
        background: var(--mobilgrey-bg);
        color: var(--content-text);
    }
    .mobil-grey a {
        color: var(--content-text);
        border-color: var(--content-text);
    }

}
/* ============================================================
   UTILITY CSS
   ============================================================ */



:root {
    --space-unit: clamp(0.25rem, 1vw, 1rem);
}


/* ------------------------------------------------------------
   Display
   ------------------------------------------------------------ */

.d-none  { display: none; }
.d-block { display: block; }
.d-flex  { display: flex; }
.d-grid  { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }


/* ------------------------------------------------------------
   Margin
   ------------------------------------------------------------ */

.m-0  { margin: 0; }
.m-1  { margin: calc(var(--space-unit) * 1); }
.m-2  { margin: calc(var(--space-unit) * 2); }
.m-3  { margin: calc(var(--space-unit) * 3); }
.m-4  { margin: calc(var(--space-unit) * 4); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: calc(var(--space-unit) * 1); }
.mt-2 { margin-top: calc(var(--space-unit) * 2); }
.mt-3 { margin-top: calc(var(--space-unit) * 3); }
.mt-4 { margin-top: calc(var(--space-unit) * 4); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: calc(var(--space-unit) * 1); }
.mr-2 { margin-right: calc(var(--space-unit) * 2); }
.mr-3 { margin-right: calc(var(--space-unit) * 3); }
.mr-4 { margin-right: calc(var(--space-unit) * 4); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: calc(var(--space-unit) * 1); }
.mb-2 { margin-bottom: calc(var(--space-unit) * 2); }
.mb-3 { margin-bottom: calc(var(--space-unit) * 3); }
.mb-4 { margin-bottom: calc(var(--space-unit) * 4); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: calc(var(--space-unit) * 1); }
.ml-2 { margin-left: calc(var(--space-unit) * 2); }
.ml-3 { margin-left: calc(var(--space-unit) * 3); }
.ml-4 { margin-left: calc(var(--space-unit) * 4); }

.mx-0    { margin-left: 0; margin-right: 0; }
.mx-1    { margin-left: calc(var(--space-unit) * 1); margin-right: calc(var(--space-unit) * 1); }
.mx-2    { margin-left: calc(var(--space-unit) * 2); margin-right: calc(var(--space-unit) * 2); }
.mx-3    { margin-left: calc(var(--space-unit) * 3); margin-right: calc(var(--space-unit) * 3); }
.mx-4    { margin-left: calc(var(--space-unit) * 4); margin-right: calc(var(--space-unit) * 4); }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: calc(var(--space-unit) * 1); margin-bottom: calc(var(--space-unit) * 1); }
.my-2 { margin-top: calc(var(--space-unit) * 2); margin-bottom: calc(var(--space-unit) * 2); }
.my-3 { margin-top: calc(var(--space-unit) * 3); margin-bottom: calc(var(--space-unit) * 3); }
.my-4 { margin-top: calc(var(--space-unit) * 4); margin-bottom: calc(var(--space-unit) * 4); }


/* ------------------------------------------------------------
   Padding
   ------------------------------------------------------------ */

.p-0  { padding: 0; }
.p-1  { padding: calc(var(--space-unit) * 1); }
.p-2  { padding: calc(var(--space-unit) * 2); }
.p-3  { padding: calc(var(--space-unit) * 3); }
.p-4  { padding: calc(var(--space-unit) * 4); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: calc(var(--space-unit) * 1); }
.pt-2 { padding-top: calc(var(--space-unit) * 2); }
.pt-3 { padding-top: calc(var(--space-unit) * 3); }
.pt-4 { padding-top: calc(var(--space-unit) * 4); }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: calc(var(--space-unit) * 1); }
.pr-2 { padding-right: calc(var(--space-unit) * 2); }
.pr-3 { padding-right: calc(var(--space-unit) * 3); }
.pr-4 { padding-right: calc(var(--space-unit) * 4); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: calc(var(--space-unit) * 1); }
.pb-2 { padding-bottom: calc(var(--space-unit) * 2); }
.pb-3 { padding-bottom: calc(var(--space-unit) * 3); }
.pb-4 { padding-bottom: calc(var(--space-unit) * 4); }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: calc(var(--space-unit) * 1); }
.pl-2 { padding-left: calc(var(--space-unit) * 2); }
.pl-3 { padding-left: calc(var(--space-unit) * 3); }
.pl-4 { padding-left: calc(var(--space-unit) * 4); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: calc(var(--space-unit) * 1); padding-right: calc(var(--space-unit) * 1); }
.px-2 { padding-left: calc(var(--space-unit) * 2); padding-right: calc(var(--space-unit) * 2); }
.px-3 { padding-left: calc(var(--space-unit) * 3); padding-right: calc(var(--space-unit) * 3); }
.px-4 { padding-left: calc(var(--space-unit) * 4); padding-right: calc(var(--space-unit) * 4); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: calc(var(--space-unit) * 1); padding-bottom: calc(var(--space-unit) * 1); }
.py-2 { padding-top: calc(var(--space-unit) * 2); padding-bottom: calc(var(--space-unit) * 2); }
.py-3 { padding-top: calc(var(--space-unit) * 3); padding-bottom: calc(var(--space-unit) * 3); }
.py-4 { padding-top: calc(var(--space-unit) * 4); padding-bottom: calc(var(--space-unit) * 4); }


/* ------------------------------------------------------------
   Gap (Grid & Flex)
   ------------------------------------------------------------ */

.gap-0 { gap: 0; }
.gap-1 { gap: calc(var(--space-unit) * 1); }
.gap-2 { gap: calc(var(--space-unit) * 2); }
.gap-3 { gap: calc(var(--space-unit) * 3); }
.gap-4 { gap: calc(var(--space-unit) * 4); }


/* ------------------------------------------------------------
   Spalten (Grid)
   col-*  = Basis / Mobile-first (alle Viewports)
   ------------------------------------------------------------ */

[class^="col-"],
[class*=" col-"] {
    min-width: 0;
}

.col-1  { grid-column-end: span 1;  }
.col-2  { grid-column-end: span 2;  }
.col-3  { grid-column-end: span 3;  }
.col-4  { grid-column-end: span 4;  }
.col-5  { grid-column-end: span 5;  }
.col-6  { grid-column-end: span 6;  }
.col-7  { grid-column-end: span 7;  }
.col-8  { grid-column-end: span 8;  }
.col-9  { grid-column-end: span 9;  }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }


/* ------------------------------------------------------------
   Grid Column Start
   ------------------------------------------------------------ */



/* ------------------------------------------------------------
   Flex-Utilities
   ------------------------------------------------------------ */

.flex-row       { flex-direction: row; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }
.items-start    { align-items: start; }
.items-center   { align-items: center; }
.items-end      { align-items: end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* ------------------------------------------------------------
   Horizontale Positionierung (Grid-Item)
   ------------------------------------------------------------ */

.justify-start  { justify-self: start; }
.justify-center { justify-self: center; }
.justify-end    { justify-self: end; }

/* Flexbox */
.flex-left  { margin-right: auto; }
.flex-right { margin-left: auto; }
.flex-center { margin-left: auto; margin-right: auto; }


/* ------------------------------------------------------------
   Vertikale Positionierung (Grid-Item / Flex-Item)
   ------------------------------------------------------------ */

.self-start  { align-self: start; }
.self-center { align-self: center; }
.self-end    { align-self: end; }

/* Flexbox */
.flex-top    { margin-bottom: auto; }
.flex-middle { margin-top: auto; margin-bottom: auto; }
.flex-bottom { margin-top: auto; }


/* ------------------------------------------------------------
   Typografie-Utilities
   ------------------------------------------------------------ */

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-bold   { font-weight: bold; }
.text-normal { font-weight: normal; }
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }

/* ------------------------------------------------------------
   Screenreader
   ------------------------------------------------------------ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* ============================================================
   RESPONSIVE GRID — Breakpoints (min-width / mobile-first)
   ============================================================
   col-*     Basis:      alle Viewports (kein Query)
   col-md-*  Tablet:     ≥ 768px
   col-lg-*  Desktop:    ≥ 1024px
   col-xl-*  Widescreen: ≥ 1280px
   ============================================================ */

/* ------------------------------------------------------------
   Tablet ≥ 768px  →  col-md-*
   ------------------------------------------------------------ */

@media (min-width: 768px) {
    .col-md-1  { grid-column-end: span 1;  }
    .col-md-2  { grid-column-end: span 2;  }
    .col-md-3  { grid-column-end: span 3;  }
    .col-md-4  { grid-column-end: span 4;  }
    .col-md-5  { grid-column-end: span 5;  }
    .col-md-6  { grid-column-end: span 6;  }
    .col-md-7  { grid-column-end: span 7;  }
    .col-md-8  { grid-column-end: span 8;  }
    .col-md-9  { grid-column-end: span 9;  }
    .col-md-10 { grid-column-end: span 10; }
    .col-md-11 { grid-column-end: span 11; }
    .col-md-12 { grid-column-end: span 12; }
}


/* ------------------------------------------------------------
   Desktop ≥ 1024px  →  col-lg-*
   ------------------------------------------------------------ */

@media (min-width: 992px) {
    .col-lg-1  { grid-column-end: span 1;  }
    .col-lg-2  { grid-column-end: span 2;  }
    .col-lg-3  { grid-column-end: span 3;  }
    .col-lg-4  { grid-column-end: span 4;  }
    .col-lg-5  { grid-column-end: span 5;  }
    .col-lg-6  { grid-column-end: span 6;  }
    .col-lg-7  { grid-column-end: span 7;  }
    .col-lg-8  { grid-column-end: span 8;  }
    .col-lg-9  { grid-column-end: span 9;  }
    .col-lg-10 { grid-column-end: span 10; }
    .col-lg-11 { grid-column-end: span 11; }
    .col-lg-12 { grid-column-end: span 12; }

    .start-lg-1  { grid-column-start: 1;  }
    .start-lg-2  { grid-column-start: 2;  }
    .start-lg-3  { grid-column-start: 3;  }
    .start-lg-4  { grid-column-start: 4;  }
    .start-lg-5  { grid-column-start: 5;  }
    .start-lg-6  { grid-column-start: 6;  }
    .start-lg-7  { grid-column-start: 7;  }
    .start-lg-8  { grid-column-start: 8;  }
    .start-lg-9  { grid-column-start: 9;  }
    .start-lg-10 { grid-column-start: 10; }
    .start-lg-11 { grid-column-start: 11; }
    .start-lg-12 { grid-column-start: 12; }
}



/* ------------------------------------------------------------
   Widescreen ≥ 1280px  →  col-xl-*
   ------------------------------------------------------------ */

@media (min-width: 1280px) {
    .col-xl-1  { grid-column-end: span 1;  }
    .col-xl-2  { grid-column-end: span 2;  }
    .col-xl-3  { grid-column-end: span 3;  }
    .col-xl-4  { grid-column-end: span 4;  }
    .col-xl-5  { grid-column-end: span 5;  }
    .col-xl-6  { grid-column-end: span 6;  }
    .col-xl-7  { grid-column-end: span 7;  }
    .col-xl-8  { grid-column-end: span 8;  }
    .col-xl-9  { grid-column-end: span 9;  }
    .col-xl-10 { grid-column-end: span 10; }
    .col-xl-11 { grid-column-end: span 11; }
    .col-xl-12 { grid-column-end: span 12; }

    .start-xl-1  { grid-column-start: 1;  }
    .start-xl-2  { grid-column-start: 2;  }
    .start-xl-3  { grid-column-start: 3;  }
    .start-xl-4  { grid-column-start: 4;  }
    .start-xl-5  { grid-column-start: 5;  }
    .start-xl-6  { grid-column-start: 6;  }
    .start-xl-7  { grid-column-start: 7;  }
    .start-xl-8  { grid-column-start: 8;  }
    .start-xl-9  { grid-column-start: 9;  }
    .start-xl-10 { grid-column-start: 10; }
    .start-xl-11 { grid-column-start: 11; }
    .start-xl-12 { grid-column-start: 12; }
}

/* ------------------------------------------------------------
   Order (Flex & Grid)
   ------------------------------------------------------------ */

.order-first { order: -1; }
.order-0     { order: 0; }
.order-1     { order: 1; }
.order-2     { order: 2; }
.order-3     { order: 3; }
.order-4     { order: 4; }
.order-last  { order: 999; }

@media (min-width: 768px) {
    .order-md-first { order: -1; }
    .order-md-0     { order: 0; }
    .order-md-1     { order: 1; }
    .order-md-2     { order: 2; }
    .order-md-3     { order: 3; }
    .order-md-4     { order: 4; }
    .order-md-last  { order: 999; }
}

@media (min-width: 992px) {
    .order-lg-first { order: -1; }
    .order-lg-0     { order: 0; }
    .order-lg-1     { order: 1; }
    .order-lg-2     { order: 2; }
    .order-lg-3     { order: 3; }
    .order-lg-4     { order: 4; }
    .order-lg-last  { order: 999; }
}

@media (min-width: 1280px) {
    .order-xl-first { order: -1; }
    .order-xl-0     { order: 0; }
    .order-xl-1     { order: 1; }
    .order-xl-2     { order: 2; }
    .order-xl-3     { order: 3; }
    .order-xl-4     { order: 4; }
    .order-xl-last  { order: 999; }
}

/* === TEASER DESKTOP === */
@media (min-width: 992px) {

    .content-rsce-start {
        position: relative;
        overflow: hidden;
    }

    .image_area {
        display: block;
        width: 100%;
    }

    .image_area figure,
    .image_area img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
    }

    .teaser_overlay {
        position: absolute;
        inset: 0;
        background: #ccc;
        opacity: 1;
        z-index: 1;
        pointer-events: none;
    }

    .text_area {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        transform: translateX(-100%);
        z-index: 2;
        display: flex;
        flex-direction: column;
        padding: 4vw;
        color: #fff;
    }

    .text_area .teaser-link {
        margin-top: auto;
    }

    /* Eingerastet-Zustand nach der Animation */
    .content-rsce-start.is-revealed .teaser_overlay {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .content-rsce-start.is-revealed .text_area {
        transform: translateX(0);
        transition: transform 0.3s ease;
    }
}

/* === TEASER MOBIL === */
@media (max-width: 991px) {

    .ce_rsce_start {
        display: flex;
        flex-direction: column;
    }

    .teaser_overlay {
        display: none;
    }

    .image_area {
        aspect-ratio: 1 / 1;
        overflow: hidden;
        order: -1;
    }

    .image_area img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .text_area {
        padding: 1.5rem 0;
    }
}


.teaser-link a{color:#fff;background: rgba(255, 255, 255, 0.05);border:1px solid #fafafa;border-radius:25px;padding:10px 20px;display:inline-flex;width:auto}
.content-rsce-start h2{font-weight:200;line-height:1;font-size:250%}
form .formbody,
form .fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
}

form .formbody > .widget {
    grid-column: 1 / -1;
}

form .formbody > .widget[class~="col-6"] {
    grid-column: span 6;
}

form .formbody > .widget[class~="col-12"] {
    grid-column: 1 / -1;
}

form .formbody > .widget :where(input, select, textarea, label, fieldset, legend) {

    display: block;
}

form .formbody > .widget :where(.col-6, .col-12) {
    width: 100% !important;
    float: none !important;
    grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;
}

form .widget-text label,
form .widget-textarea label,
form .widget-select label,
form .widget-upload label,
form .widget-password label,
form .widget-captcha label {
    font-size: inherit;
    line-height: inherit;
}

form .text,
form .textarea,
form .captcha,
form select {
    line-height: 1.5;
    width: 100%;
    padding: 12px 5px;
    border: 1px solid #fff;

    border-radius: 2px;
    background: #fff;
    transition: border-color ease-in-out .2s;
    color: #363636;
    font-weight: 400;
    margin-bottom: 1rem;
    font-size: 100%;
}

form .text:hover,
form .textarea:hover,
form .captcha:hover,
form select:hover {
    border-color: #f2f2f2;
    box-shadow: none;
    outline: none;
}

form .text:focus-visible,
form .textarea:focus-visible,
form .captcha:focus-visible,
form select:focus-visible {
    border:1px solid #ccc;
    background: #fff;
    box-shadow: none;
    color: #142533;
    font-weight: 400;
    outline: none;
}

form .text.error:valid,
form .textarea.error:valid,
form .captcha.error:valid,
form select.error:valid {
    border-color: #afb8c0;
    background: none;
    font-weight: 400;
    color: #48535b;
}

form .text:disabled,
form .textarea:disabled,
form .captcha:disabled,
form select:disabled {
    border-color: #afb8c0;
    background-color: #dde1e4;
}

form .text.error,
form .textarea.error,
form .captcha.error,
form select.error {
    padding-right: 3rem;
    border-color: #ff7a70;
    background: #fdeeed url("../../files/app/svg/warning.svg") no-repeat calc(100% - 1rem) center;
    color: #a30b00;
}

span.mandatory {
    color: red;
}

form .formbody > fieldset,
form .fields > fieldset {
    margin-inline: 0;
    width: 100%;
}

form legend {
    margin-block-end: .5rem;
}

form fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

form fieldset + fieldset {
    margin-top: 1rem;
}

form .widget-text,
form .widget-textarea,
form .widget-select,
form .widget-upload,
form .widget-password,
form .widget-captcha {
    width: 100%;
}

form .widget-text label .mandatory,
form .widget-textarea label .mandatory,
form .widget-select label .mandatory,
form .widget-upload label .mandatory,
form .widget-password label .mandatory,
form .widget-captcha label .mandatory {
    display: inline-block;
    margin-inline-start: .24rem;
}

form select {
    padding-inline-end: 3.5rem;
    background-image: url("../../files/app/svg/chevron-down.svg");
    background-position: calc(100% - 1rem) center;
    background-repeat: no-repeat;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Checkbox / Radio */

form :is(.checkbox_container, .radio_container) {
    position: relative;
}

form :is(.checkbox_container, .radio_container) span {
    position: relative;
    display: block;
}

form input.checkbox,
form input.radio {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    width: 1.5rem;
    height: 1.5rem;

    margin: 0;
    padding: 0;
    border: 0;

    opacity: 0;
    cursor: pointer;
}

form input.checkbox + label,
form input.radio + label {
    position: relative;
    display: block;
    padding-left: 2rem;
    line-height: 1.4;
    cursor: pointer;
}

form input.checkbox + label::before,
form input.radio + label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 1.5rem;
    height: 1.5rem;

    border: 1px solid #afb8c0;
    background: #fff;

    transition: border-color .2s ease-in-out;
}

form input.checkbox + label::after,
form input.radio + label::after {
    content: "";
    position: absolute;
    top: .4375rem;
    left: calc(.5 * (1.5rem - .625rem));

    width: .625rem;
    height: .625rem;

    background: transparent;
    transition: background-color .2s ease-in-out;
}

form input.radio + label::before,
form input.radio + label::after {
    border-radius: 5rem;
}

form input.checkbox:focus-visible + label::before,
form input.radio:focus-visible + label::before {
    outline: 3px dashed #f57a00;
    outline-offset: 2px;
}

form input.checkbox:hover + label::before,
form input.checkbox:focus + label::before,
form input.radio:hover + label::before,
form input.radio:focus + label::before {
    border-color: #6c7c89;
}

form input.checkbox:hover + label::after,
form input.checkbox:focus + label::after,
form input.radio:hover + label::after,
form input.radio:focus + label::after {
    background-color: #afb8c0;
}

form input.checkbox:checked + label::before,
form input.radio:checked + label::before {
    border: 2px solid #44aa08;
}

form input.checkbox:checked + label::after,
form input.radio:checked + label::after {
    background-color: #25455f;
}

form input.checkbox:checked:hover + label::before,
form input.checkbox:checked:focus + label::before,
form input.radio:checked:hover + label::before,
form input.radio:checked:focus + label::before {
    border-color: #6c7c89;
}

form input.checkbox:checked:hover + label::after,
form input.checkbox:checked:focus + label::after,
form input.radio:checked:hover + label::after,
form input.radio:checked:focus + label::after {
    background-color: #25455f;
}

/* Fehlerausgabe */

form p.error {
    font-size: .875rem;
    line-height: 1.5;
    margin: 0;
    padding: 1rem;
    background: #fff;
    color: #a30b00;
    order: 9;
}

form p.error ~ .widget-submit {
    order: 10;
}

/* Button */

button.submit {
    background: #1a1a1a;
    padding: .6rem 1.4rem;
    border-radius: 30px;
    color: #f2f2f2;
    font-weight: 300;
    margin-top: 1rem;
    cursor: pointer;
}

button.submit:hover {
    background: #333537;
}

/* ALTCHA */

.altcha {
    width: 100%;
}

.altcha-main {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: .75rem;
    align-items: center;
}

.altcha-checkbox {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 0;
}

.altcha-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;

    position: absolute;
    inset: 0;

    width: 1.5rem;
    height: 1.5rem;
    margin: 0;

    border: 1px solid #afb8c0;
    border-radius: 50%;
    background: #fff;

    cursor: pointer;
    outline: none;
    box-shadow: none;
}

.altcha-checkbox input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: .625rem;
    height: .625rem;

    border-radius: 50%;
    background: transparent;

    transform: translate(-50%, -50%);
}

.altcha-checkbox input[type="checkbox"]:focus-visible {
    outline: 3px dashed #f57a00;
    outline-offset: 3px;
}

.altcha[data-state="unverified"] .altcha-checkbox input[type="checkbox"] {
    border-color: #afb8c0;
}

.altcha[data-state="unverified"] .altcha-checkbox input[type="checkbox"]::after {
    background: transparent;
}

.altcha[data-state="verifying"] .altcha-checkbox input[type="checkbox"] {
    border-color: #afb8c0;
}

.altcha[data-state="verifying"] .altcha-checkbox input[type="checkbox"]::after {
    background: #afb8c0;
}

.altcha[data-state="verified"] .altcha-checkbox input[type="checkbox"] {
    border: 2px solid #44aa08;
}

.altcha[data-state="verified"] .altcha-checkbox input[type="checkbox"]::after {
    background: #25455f;
}

.altcha[data-state="error"] .altcha-checkbox input[type="checkbox"] {
    border: 2px solid #ff7a70;
}

.altcha[data-state="error"] .altcha-checkbox input[type="checkbox"]::after {
    background: #a30b00;
}

.altcha-label {
    min-width: 0;
    line-height: 1.4;
    cursor: pointer;
}

/* Mobile */

@media (max-width: 992px) {
    form .formbody {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    form .formbody > .widget {
        grid-column: 1 / -1 !important;
    }
}

.form-confirmation p{color: #d10f0f;font-weight:450;font-size:110%}

@media (max-width: 768px) {

    button.submit{border:1px solid #f2f2f2}
}


.ref-card {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: default;
    margin-bottom: 3vw;
    background: #1d2629;
    color: #f2f2f2;
}
.ref-card:focus-visible{
    background: var(--focusbg);
    color: var(--focuscolor);
    outline: var(--focusoutline);
    outline-offset: 2px;
}

.ref-card__images {
    position: relative;
    margin-bottom: 1rem;
}

.ref-card__hauptbild,
.ref-card__imageover {
    display: block;
}

.ref-card__hauptbild img,
.ref-card__imageover img {
    display: block;
    width: 100%;
    height: auto;
}

.ref-card__imageover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
}



.ref-card__text {
    padding: 15px 30px 30px 30px;
}

.ref-card p strong {
    margin-bottom: 20px;
    display: inline-block;
}

.ref-card a.content-hyperlink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1rem;
    color: #fff;
}

.ref-card a.content-hyperlink::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("../../files/app/svg/arrow-right-white.svg") center / contain no-repeat;
}



@media (min-width: 768px) {
    .ref-card {
        background: transparent;
        color: var(--text-dark);
    }

    .ref-card__text {
        padding: 0 10% 0 0;
    }

    .ref-card p strong {
        margin-bottom: 0;
    }

    .ref-card a.content-hyperlink {
        color: var(--text-dark);
    }

    .ref-card a.content-hyperlink::before {
        background: url("../../files/app/svg/arrow-right.svg") center / contain no-repeat;
    }
}

/* ── Hover-fähige Geräte ─── */

@media (hover: hover) and (pointer: fine) {
    .ref-card__imageover:hover,
    .ref-card__imageover:focus-within {
        opacity: 1;
    }

    .ref-card a.content-hyperlink {
        display: none;
    }
}
.leistungsblock{
    background:var(--bg-dark);
padding:var(--pad-block) var(--pad-inline);
margin: 0 auto var(--gap-block) auto;
color:#f2f2f2}



@media (min-width: 768px) {
    .launch-artikel{margin: 0 auto 12vw auto;}


.leistungsblock{background:#fff; padding:4vw;color: #0f0f0f;;
}
.leistungsblock h2,.launch-artikel h3{
    color: #747574;
    font-size: var(--fs-big);
    font-weight:350;
    margin-bottom:2rem;
}


}

@media (min-width: 1280px) {

    .leistungsblock{padding:3vw;margin-bottom:0;
    }
}
[data-rsts-slide-class="d-grid basic-grid"] {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));

        column-gap: clamp(1rem, 3vw, 2rem);
        align-items: stretch;

}
.swiper-pagination{display:none}
.swiper-horizontal .swiper-button-next,
.swiper-horizontal .swiper-button-prev,
.swiper-horizontal ~.swiper-button-next,
.swiper-horizontal ~.swiper-button-prev{

    margin-left: 0;
    margin-top: auto !important;
    top: auto !important
}

.swiper-button-next,.swiper-button-prev {
    align-items: center;
    bottom:3px;
    color: #1a1a1a !important;
    cursor: pointer;
    display: flex;
    height: 26px !important;
    justify-content: center;
    position: absolute;
    width: 26px !important;
    background: #2b2b2c;
    border-radius:50px;
    z-index: 10;}
.swiper-horizontal .swiper-button-next {right:auto !important;left:40px}
.swiper-button-next svg,.swiper-button-prev svg{
    display: block;
    flex-shrink: 0;
    width:12px !important;
    height:12px !important;
    fill:#fff !important;
}

.swiper-button-next{padding-left:1px;}
.swiper-button-prev{padding-right:2px;}

.swiper-button-next:focus,.swiper-button-next:focus-visible,
.swiper-button-prev:focus,.swiper-button-prev:focus-visible{
    background: var(--focusbg);
    color: var(--focuscolor) !important;
    outline: var(--focusoutline);
    outline-offset: 2px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover{opacity:.7}

/* ===== Media-Slide / Swiper ===== */
.media-slide {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 2px;
}
.media-slide img,
.media-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.swiper p {
    font-size: 100%;
    font-weight: 300;
}
.swiper h3 {
    color: #d6ee6b;
}
.swiper > * {
    color: #fff !important;
}
.swiper .content-hyperlink a {
    color: #d6ee6b !important;
    font-size: 110%;
    margin-bottom: .6rem;
}

.swiper .content-hyperlink a:focus-visible {
    background: var(--focusbg);
    color: var(--focuscolor) !important;
    outline: var(--focusoutline);
    outline-offset: 2px;
}
.swiper {
    margin-bottom: var(--gap-block);
    overflow:visible;
}


@media (min-width: 768px) {
    /* ===== Media-Slide / Swiper ===== */
    .media-slide {
        aspect-ratio: 1355 / 718;
    }

    .swiper p {
        font-weight: 400;
    }

    .swiper h3 {
        margin-top:1rem;
        color: #0f0f0f;
    }

    .swiper > * {
        color: #0f0f0f !important;
    }

    .swiper .content-hyperlink a {
        color: #0f0f0f !important;
        font-size: 100%;
        margin-bottom: 0;
    }

    /* ===== Icon / Hyperlink ===== */
    .icon h3::before {
        background: url("../../files/app/svg/plus.svg") center / contain no-repeat;
    }

    .content-hyperlink a::before {
        background: url("../../files/app/svg/arrow-right.svg") center / contain no-repeat;
    }

    .swiper-button-next,.swiper-button-prev {

        bottom:-30px;}


}

@media (min-width: 992px) {
    .swiper h3 {
        margin-top: 0;

    }

    .swiper-button-next,.swiper-button-prev {

        bottom:3px;}
}

@media (max-width: 768px) {

    .swiper-horizontal .swiper-button-next,.swiper-horizontal .swiper-button-prev{display:none !important;}
}

/* ============================================================
   Language Switcher
   ============================================================ */




#header-lang-slot {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1.5rem;
    z-index:3000
}






.mod_changelanguage {
    position: relative;
    display: inline-block;
}

.lang-switcher {
    position: relative;
}

/* --- Globe Button --- */

.lang-globe {
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-globe__icon {
    display: block;
    width: 20px;
    height: 20px;
    background: url("../../files/app/svg/world.svg") center / contain no-repeat;
    transition: opacity 0.2s ease;
}

.lang-globe:hover .lang-globe__icon,
.lang-globe[aria-expanded="true"] .lang-globe__icon {
    opacity: 0.7;
}

.lang-globe:focus-visible {
    background: var(--focusbg);
    color: var(--focuscolor) !important;
    outline: 2px dashed #fff;
    outline-offset: 2px;
}

/* --- Menu — öffnet nach oben (Footer-Default) --- */

.lang-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    top: auto;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 60px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lang-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.lang-menu li {
    padding: 0;
}

.lang-menu a,
.lang-menu strong {
    display: block;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}

.lang-menu a:hover {
    color: #666;
}

.lang-menu strong {
    opacity: 0.4;
    cursor: default;
}

/* Pfeil zeigt nach unten (Richtung Button im Footer) */
.lang-menu::after {
    content: '';
    position: absolute;
    bottom: -6px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top: 6px solid #fff;
    border-bottom: none;
}

/* --- Menu — öffnet nach unten (Header-Position) --- */

#header-lang-slot .lang-menu {
    top: calc(100% + 12px);
    bottom: auto;
    transform: translateX(-50%) translateY(-6px);
}

#header-lang-slot .lang-menu.is-open {
    transform: translateX(-50%) translateY(0);
}

/* Pfeil zeigt nach oben (Richtung Button im Header) */
#header-lang-slot .lang-menu::after {
    top: -6px;
    bottom: auto;
    border-top: none;
    border-bottom: 6px solid #fff;
    border-top-color: transparent;
}

/* --- Mobil --- */

@media (max-width: 991.8px) {


    .lang-globe__icon {
        background: url("../../files/app/svg/world-dark.svg") center / contain no-repeat;
    }

    .lang-globe,
    .lang-globe__icon {
        width: 25px;
        height: 25px;
    }

    #header-lang-slot .lang-menu {
        top: calc(100% + 22px);
    }

    .lang-menu {
        left: 50%;
        padding:7px;
        z-index: 2000;
    }

    .lang-menu a,
    .lang-menu strong {
        font-size: 1rem;
    }

    .lang-menu::after {
        transform: translateX(-50%);
    }

}
.content-rsce-typo,
.content-rsce-farbtafel {
    background: #4c5359;
    padding: 4rem 30px;
    margin-top: 0;
    color: #fff;
}

.content-rsce-farbtafel ul,
.content-rsce-farbtafel li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-rsce-farbtafel li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: .5rem;
}

.content-rsce-farbtafel li::before {
    content: "";
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--swatch);
    flex-shrink: 0;
}

.content-rsce-typo h4,
.content-rsce-farbtafel h4 {
    font-size: 200%;
    margin-bottom: 30px;
    font-weight: 350;
    color: #fff;
    letter-spacing: -1px;
}

.typo.scheme {
    margin: 0;
    font-size: 2rem;
    line-height: 1;
}

.slim .typo.scheme {
    font-size: 100%;
    line-height: inherit;
}

.rgb {
    display: none;
}

@media (min-width: 768px) {
    .content-rsce-typo,
    .content-rsce-farbtafel {
        background: #fff;
        padding: 3vw;
        margin-bottom: 1rem;
        color: #0f0f0f;
    }

    .content-rsce-typo h4,
    .content-rsce-farbtafel h4 {
        color: #747574;
    }
}
.scroll-top {
    position: fixed;
    right: 15px;
    bottom: 11px;
    z-index: 1000;
    padding-top:2px;

    width: 28px;
    aspect-ratio: 1;
    border-radius: 50%;

    display: flex;
    place-items: center;
    justify-content: center;

    background: rgb(255 255 255 / 70%);
    color: #383838;
    font-weight: bold;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .3s ease, visibility .3s ease;
}

.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.scroll-top:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .scroll-top {
        display: none;
    }
}
.booknav a {
    transition: opacity .15s ease-in-out;
}

.mod_booknav_sibling a:hover {
    opacity: .7;
}

.ref-button-next,
.ref-button-prev {
    position: absolute;
    bottom: 25px;
    left: 80px;
    z-index: 10;

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

    width: 34px;
    height: 34px;

    cursor: pointer;
    color: #1a1a1a;
    background: rgba(237, 237, 237, 0.9);
    border-radius: 50%;
}

.ref-button-prev {
    left: 30px;
}

.ref-button-next svg,
.ref-button-prev svg {
    display: block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    fill: #383838;
}
.mod_booknav_sibling a:focus span,
.mod_booknav_sibling a:focus span,
.mod_booknav_sibling a:focus-visible span,
.mod_booknav_sibling a:focus-visible span{
    background: var(--focusbg);
    color: var(--focuscolor);
    outline: var(--focusoutline);
    outline-offset: 2px;
}

.mod_article.facts {
    padding-bottom: 90px;
}

@media (min-width: 768px) {

    .ref-button-next,
    .ref-button-prev {
        background: rgba(23, 23, 23, 0.9);
    }
    .ref-button-next svg,
    .ref-button-prev svg {
        fill: #f2f2f2;
    }
}
@media (min-width: 992px) {

    .booknav {
        position: relative;
    }
    .mod_article.facts {
        padding-bottom: 0;
    }
    .ref-button-next,
    .ref-button-prev {
        bottom: 0;
        left: auto;
        right: 0;
        width: 26px;
        height: 26px;
        background: rgba(2, 2, 2, 0.9);
    }

    .ref-button-prev {
        right: 35px;
    }


}


.kunden h2,.kunden h2 span {
    display: inline;
    color: var(--text-on-dark);
    font-weight: 300;
}

.kundenliste ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    columns: 1;
    column-gap: 2rem;
}
.kundenliste li {
    font-weight: 400;
    color: #0f0f0f;
    break-inside: avoid;
    margin-top: 1rem;
    margin-bottom: .5rem;
    list-style-type: none;
}
.kundenliste span {
    color: #fff;
}
span.name {
    font-weight: 500;
    display: inline;
}
span.trenner {
    display: none;
}
span.art {
    display: inline;
}
span.bemerkung {
    color: #aeb0b1;
}

@media (min-width: 768px) {

    .kunden h2,.kunden h2 span {
        display: inline;
        color: var(--text-muted);
        font-weight: 300;
    }
    .kunden h2 span {
        color: var(--text-dark);
        font-weight: 400;
    }
    .kundenliste ul {
        margin: 6vw 0 0 0;
        columns: 2;
        column-gap: 2rem;
    }
    .kundenliste li {
        font-weight: 400;
        color: #0f0f0f;
        break-inside: avoid;
        margin:0;
        padding-bottom:.75rem;
    }
    .kundenliste span {
        color: #0f0f0f;
    }
    span.name {
        font-weight: 500;
        display: inline;
    }
    span.trenner {
        display: none;
    }
    span.art {
        display: inline;
    }
    span.bemerkung {
        color: #aeb0b1;
    }
    span.name {
        color: #0f0f0f;
        font-weight:500;
    }

}

.contao-cookiebar{
    right:4vw;
    padding:0;
    bottom:4vh}

.cc-content{background:#fff;
    padding:20px;
}

.cc-inner{
    max-width:430px;
    padding:3px;
    /* border:3px dashed #32ca08;*/
    font-family: 'Google Sans Code', sans-serif;
    font-weight: 300;
    box-shadow: none;
    border-radius:0;
    font-size:16px;
    background: repeating-linear-gradient(
            45deg,
            #A5A5A5FF 0,
            #A5A5A5FF 2px,
            #fff 2px,
            #fff 4px

    );
}


.contao-cookiebar .cc-btn{width:100%;margin-bottom:5px;Border-radius:0;background:#fff;border-color:#666;color:#1a1a1a}
.contao-cookiebar .cc-btn:focus{background:#fff}

.cc-inner p{color: #3c3c3c;line-height:1.3;font-weight:300;letter-spacing:-.7px;
    text-rendering: optimizeLegibility}
.cc-head p strong{font-weight: 500;margin-bottom:10px;display:inline-block}

.cc-info {
    margin-top: 10px;
}
.cc-close{top:10px}
.cc-info a{
   color:#383838
}
.contao-cookiebar .cc-btn.success, .contao-cookiebar .cc-btn.deny{background:#f2f2f2}
.contao-cookiebar .cc-btn.success:hover, .contao-cookiebar .cc-btn.deny:hover{background:#fff}



.contao-cookiebar .cc-inner:focus {
    outline: none;
}


@media (max-width: 767.8px) {
    .contao-cookiebar{
        right:20px;left:20px;
        bottom:10px;}

    .cc-inner{
        max-width:100%;}
}