/***********************************************************
CSS Document
© 23.08.2024 BrennerMedien GmbH
www.brenner-medien.de
************************************************************
 
/*
======================================================================
Variablen & Grundeinstellungen
======================================================================
*/
:root {
  --main-dark: hsl(196, 21%, 35%);
  --main-light:hsl(196, 21%, 60%);
  --main-cta: #EF233C;
  --fliesstext:hsl(196, 21%, 27%);
  --bg-kontakt: hsl(196, 21%, 97%);
}


:root {

  --main1: #F6AD22;
  --main1: #F65E4D;
  --main1: #F90C70;
  --main1: #CA1680;
  --main1: #8B1B92;


}

:root {
  --action-red: #FE2222;
  /* --action-green: #80CC10; */
  --action-green: #2dd28d;
  --action-green-text: rgb(30, 186, 121);
  --action-blue: #0099DD;
  --action-purple: #BA33AB;
  --action-orange: #FE9900;
  --action-red: #FE2222;
  --action-cyan: #24C0CC;
  --action-ocher: #EAE122;
  --sally1: #DAD5C4;
  --sally1a: #dad5c464;
  --sally2: #E9E5DB;
}

.sally1a {
  background-color: var(--sally1a) !important;
}

:root {
  --color-main: #000000;
  --gray-50: #F9FAFB;
  --gray-100: hsl(196, 21%, 97%);
  --gray-150: #f5f5f9;
  --gray-200: #f1f3f9;
  --gray-300: hsl(196, 21%, 92%);
  --gray-350: #dbd1d1;
  --gray-400: hsl(196, 21%, 85%);
  --gray-500: #8f96a3;
  --gray-550: #787e88;
  --gray-600: #5e636e;
  --gray-700: hsl(196, 21%, 50%);
  --gray-800: hsl(196, 21%, 45%);
  --gray-900: hsl(196, 21%, 43%);
}


:root {
  --font-headlines: "Geist";
  --font-fliesstext: "Geist";
  --font-size: 1rem;
  --site-width: 1400px;
  --responsive-width: 1450px;
}

/* Responsive */
@media only screen and (max-device-width: 480px) {
    :root {
        --site-width: 90vw;
    }
}

section {
    width: 100%;
    height: auto;
    position: relative;
}

/* Responsive */
@media only screen and (max-device-width: 480px) {
    section {
        scroll-margin-top: 10rem;
    }
}


#main_page_wrapper {
    width: 100%;
}

[v-cloak] {
    display: none;
}


/*
  ======================================================================
Hinweis Baustelle
  ======================================================================
  */

.bg-purple {
    background-color: var(--action-purple);
    margin: 0 !important;
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
    line-height: 1.5 !important;

    p {
        color: #FFF !important;
        margin: 0 !important;
        margin-bottom: 0.5rem !important;
        padding: 0 !important;
        font-weight: 400 !important;
        text-align: center;


        strong {
            font-weight: 600 !important;
        }

        a {
            color: inherit !important;
            border-bottom: 1px dashed #FFF;
        }

        a:hover {
            border-bottom: 1px solid #FFF !important;
        }

    }

}


/*
  ======================================================================
  Custom Definitions
  ======================================================================
  */
body {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #FFF;
    font-family: var(--font-fliesstext) !important;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: lrem;
}

html,
body {
    scroll-behavior: smooth;
}

a {
    color: inherit;
    transition: all 0.2s;
}

a:hover {
    color: var(--main-red)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headlines) !important;
}

.section {
    width: 100%;
    height: auto;
    padding-left: calc((100% - var(--site-width)) / 2);
    padding-right: calc((100% - var(--site-width)) / 2);
    flex-direction: column;
    display: flex;
    font-family: var(--font-fliesstext);
    color: var(--main-dark);
}

.section.studio {
    background-image: url(../images/telefonansagen-tonstudio.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

/*
  ======================================================================
  Icons
  ======================================================================
  */
i {
    font-style: normal;
}

i:before {
    font-family: FontAwesome;
}

i.angebot:before {
    content: "\e5ce";
}


i.aufwand:before {
    content: "\f583";
}

i.beratung:before {
    content: "\f05a";
}

i.brennermedien:before {
    content: "\f06d";
    padding: 0 0.15rem;
}
i.building:before {
    content: "\f1ad";

}


i.calendar:before {
    content: "\f073";

}


i.checkbox:before {
    content: "\f0c8";
}

i.checkbox.checked:before {
    content: "\f14a";
}


i.clock:before {
    content: "\f017";
}

i.cloud:before {
    content: "\f0ee";
}

i.comment:before {
    content: "\f4ad";
}


i.convert:before {
    content: "\f021"
}


i.einfach:before {
    content: "\f245";
}


i.email:before {
    content: "\e10c";
}

i.euro:before {
    content: "\e5ce";
}

i.faq:before {
    content: "\2b";
}

i.faq.active:before {
    content: "\f068";
}

i.file:before {
    content: "\f15b";
}


i.handshake:before {
    content: "\f2b5";

}


i.handy:before {
    content: "\f3ce";
    transform: rotate(180deg);
}

i.headphones:before {
    content: "\f025";

}


i.ki:before {
    content: "\e2ca";
}

i.kosten:before {
    content: "\f2db";
}

i.menu:before {
    content: "\f0c9";
}

i.menu.active:before {
    content: "\58";
}


i.music:before {
    content: "\f001";
}


i.play:before {
    content: "\f04b";
}

i.play.active:before,
i.pause:before {
    content: "\f04c";
}

i.play-circle:before {
    content: "\f144";
}

i.play-circle.active:before,
i.pause:before,
i.pause-circle:before {
    content: "\f28b";
}


i.radiobutton:before {
    content: "\f111";
}

i.radiobutton.checked:before {
    content: "\f192";
}

i.reseller,
i.reseller:before {
    color: var(--action-purple);


}

i.reseller:before {
    content: "\e242";
}

i:hover.reseller:before {
    color: #FFF;
}

i.technik:before {
    content: "\f87a";
}

i.telefon:before {
    content: "\e11b";
}


i.voicemail:before {
    content: "\f897";
}

i.volume:before {
    content: "\f6a8";
}

i.world:before {
    content: "\f57d";
}

/*
  ======================================================================
  Markierungsfarben
  ======================================================================
  */
::selection {
    color: #FFF;
    background-color: var(--main-light);
    text-shadow: none;
}

::-moz-selection {
    color: #FFF;
    background-color: var(--main-light);
    text-shadow: none;
}

::-webkit-selection {
    color: #FFF;
    background-color: var(--main-light);
    text-shadow: none;
}

::-webkit-scrollbar-thumb:vertical {
    width: 8px;
    background-color: var(--main-light);
}

::-webkit-scrollbar-thumb:horizontal {
    height: 8px;
    background-color: var(--main-light);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--main-cta);
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
    background-color: var(--gray-400);
}

/*
  ======================================================================
  Tools
  ======================================================================
  */
.bg-main-dark {
    background-color: var(--main-dark);
}

.bg-main-medium {
    background-color: var(--main-medium);
}

.bg-main-light {
    background-color: var(--main-light);
}

.bg-main-red {
    background-color: var(--main-red);
}

.bg-main-red {
    background-color: var(--main-red);
}

.bg-gray100 {
    background-color: var(--gray-100) !important;
}

.bg-gray200 {
    background-color: var(--gray-200) !important;
}

.bg-gray300 {
    background-color: var(--gray-300) !important;
}

.bg-gray400 {
    background-color: var(--gray-400) !important;
}

.bg-gray500 {
    background-color: var(--gray-500) !important;
}

.bg-gray600 {
    background-color: var(--gray-600) !important;
}

.bg-white {
    background-color: #FFF;
}

.main-light {
    color: var(--main-light);
}

.main-red {
    color: var(--main-red) !important;
}

.action-purple {
    color: var(--action-purple) !important;
}

.only_mobile {
    display: none !important;
}

@media only screen and (max-device-width: 480px) {
    .no_mobile {
        display: none !important;
    }

    .only_mobile {
        display: inline-block !important;
    }
}

.height-0-25rem {
    height: 0.25rem !important;
}

.height-0-5rem {
    height: 0.5rem !important;
}

.height-0-75rem {
    height: 0.75rem !important;
}

.height-1rem {
    height: 1rem !important;
}

.height-1-5rem {
    height: 1.5rem !important;
}

.margin-bottom--3rem {
    margin-bottom: -3rem !important;
}

.margin-bottom--2rem {
    margin-bottom: -2rem !important;
}

.margin-bottom--1-5rem {
    margin-bottom: -1rem !important;
}

.margin-bottom--1rem {
    margin-bottom: -1rem !important;
}

.margin-bottom-1rem {
    margin-bottom: 1rem !important;
}

.margin-bottom-2rem {
    margin-bottom: 2rem !important;
}

.margin-bottom-3rem {
    margin-bottom: 3rem !important;
}

.margin-bottom-4rem {
    margin-bottom: 4rem !important;
}

.margin-top-0rem {
    margin-top: 0rem !important;
}

.margin-top-0-5rem {
    margin-top: 0.5rem !important;
}

.margin-top-1rem {
    margin-top: 1rem !important;
}

.margin-top-1-5rem {
    margin-top: 1.5rem !important;
}

.margin-top-2rem {
    margin-top: 2rem !important;
}

.margin-top-2-5rem {
    margin-top: 2.5rem !important;
}

.margin-top-3rem {
    margin-top: 3rem !important;
}

.margin-top-3-5rem {
    margin-top: 3.5rem !important;
}

.margin-top-4rem {
    margin-top: 4rem !important;
}

.margin-top-5rem {
    margin-top: 5rem !important;
}

.margin-top-20rem {
    margin-top: 20rem !important;
}

.margin-top--1rem {
    margin-top: -1rem !important;
}

.margin-top--2rem {
    margin-top: -2rem !important;
}

.margin-bottom--0-5rem {
    margin-bottom: -0.5rem !important;
}

.margin-bottom-0rem {
    margin-bottom: 0rem !important;
}

.margin-bottom-0-5rem {
    margin-bottom: 0.5rem !important;
}

.margin-bottom-1-5rem {
    margin-bottom: 1.5rem !important;
}

.margin-bottom-2rem {
    margin-bottom: 2rem !important;
}

.margin-bottom-2-5rem {
    margin-bottom: 2.5rem !important;
}

.margin-bottom--1rem {
    margin-bottom: -1rem !important;
}

.margin-bottom--2rem {
    margin-bottom: -2rem !important;
}

.no-margin {
    margin: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.margin-left-1rem {
    margin-left: 1rem !important;
}

.margin-right-0-5rem {
    margin-right: 0.5rem !important;
}

.margin-right-1rem {
    margin-right: 1rem !important;
}

.padding-top-1-5rem {
    padding-top: 1.5rem !important;
}

.padding-top-2rem {
    padding-top: 2rem !important;
}

.padding-top-2-5rem {
    padding-top: 2.5rem !important;
}

.padding-top-3rem {
    padding-top: 3rem !important;
}

.padding-bottom-2rem {
    padding-top: 2rem !important;
}

.padding-1rem {
    padding: 1rem !important;
}

.padding-2rem {
    padding: 2rem !important;
}

.no-padding {
    padding: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.padding-bottom-0rem {
    padding-bottom: 0 !important;
}

.clear {
    clear: both !important;
    width: 100%;
}

.sticky {
    position: sticky !important
}

.spiegeln {
    transform: scaleX(-1);
}

body.no-scroll {
    overflow: hidden;
}

.rounded_none-top-left {
    border-top-left-radius: 0;
}

.rounded_none-top-right {
    border-top-right-radius: 0;
}

.rounded_none-bottom-left {
    border-bottom-left-radius: 0;
}

.rounded_none-bottom-right {
    border-bottom-right-radius: 0;
}

.float-right {
    float: right;
}

.div-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.font-bigger {
    font-size: calc(100% + 0.5rem) !important;
    font-weight: 500 !important;
}

.text-align-center {
    text-align: center;
}

.dsp-none {
    display: none !important;
}

@keyframes rotating {

    /* Progress */
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*///// Responsive /////*/
.only-mobile {
    display: none;
}

@media only screen and (max-device-width: 480px) {
    .no-mobile {
        display: none !important;
    }

    .only-mobile {
        display: block !important;
    }
}


/* Hero Glow */


.hero-glow {

    padding: 1px;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
    border-radius: var(--radius-md);

    a {
        z-index: 1;
    }

    a.mit-rahmen {
        padding-top: 0;
        padding-bottom: 0;
    }


    i {
        width: 100% !important;
        height: 100% !important;
        padding: 0.1rem 0;
        margin: -0.1rem 0;
    }

}


.hero-glow:before {
    content: "";
    position: absolute;
    width: 200%;
    aspect-ratio: 1;
    top: 0%;
    left: 50%;
    z-index: 1;
    translate: -50% -15%;
    rotate: 0;
    transform: rotate(-90deg);
    opacity: 1;
    background: conic-gradient(from 0deg, transparent 0 340deg, var(--action-purple) 360deg);
    transition: opacity 0.25s;
    animation: hero-glow-rotate 3s linear infinite both;
    animation-delay: 1.5s;
}

@keyframes hero-glow-rotate {

    /* Glow */
    25% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(90deg);
    }
}


/*
  ======================================================================
  404
  ======================================================================
  */
.wrapper-404 {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem;

    p {
        text-align: center;
        line-height: 1.4;
        font-size: 1rem;
        font-weight: 300;
        margin-bottom: 1.5rem;
        color: var(--main-dark);
    }

    p.headline {
        font-weight: 700;
        font-size: 1.2rem;
        margin: 2.5rem 0 0.5rem 0;
    }

    img {
        width: 40rem;
        max-width: 80%;
        height: auto;
    }
}

@media only screen and (max-device-width: 480px) {
    .no-mobile {
        display: none !important;
    }

    .only-mobile {
        display: block !important;
    }
}

/*
  ======================================================================
  Dialogbox
  ======================================================================
  */
@keyframes curtain-dialogbox-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.curtain__dialogbox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: curtain-dialogbox-animation;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    top: 0;
    left: 0;

    .rahmen {
        background-color: var(--main-light);
        padding: 0.4rem;
        outline: 0.75rem solid rgba(255, 255, 255, 0.65);
    }

    .wrapper_popup_content {
        display: grid;
        grid-template-columns: 100%;
        max-width: 40rem;
        height: auto;
        background-color: rgba(255, 255, 255, 1);
        padding: 2.5rem;
        grid-column-gap: 2.5rem;
        grid-row-gap: 0;
        min-width: 30rem;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .wrapper_popup_content.laden {
        padding: 0;
    }

    .wrapper_popup_content img.logo {
        display: flex;
        width: 100%;
        padding: 20%;
        justify-content: center;
        align-items: center;
    }

    .wrapper_popup_content .wrapper-paypal {
        justify-content: center;
        display: flex;
        align-items: center;
        margin-right: 2.5rem;
        padding: 0 2rem 2rem 2rem;
    }

    .wrapper_popup_content img.loader {
        width: 10rem;
        height: 10rem;
    }

    .wrapper_popup_content img.paypal {
        width: 4rem;
        margin-left: -6.75rem;
    }

    .wrapper_popup_content p.text {
        font-family: "Geist";
        color: var(--main-dark);
        font-weight: 500;
        font-size: 1rem;
        text-align: center;
        line-height: 1.5;
    }

    .wrapper_popup_content p.headline {
        font-family: "Geist";
        color: var(--main-dark);
        font-weight: 400;
        font-size: 0.9rem;
        text-transform: uppercase;
        margin: 1rem 1rem 2rem 1rem;
        text-align: center;
        line-height: 1.5;
        letter-spacing: var(--tracking-caps);
    }

    .wrapper_popup_content .play-box.loader .loading {
        height: 5rem;
        text-align: center;
        color: #000;
        position: relative;
        overflow: hidden;
        padding: 1rem;
    }

    .wrapper_popup_content .play-box.loader .text {
        z-index: 5;
        background-color: var(--main-light);
        color: #FFF;
        position: absolute;
        width: 15rem;
        height: 1.5rem;
        top: calc(50% - 0.7rem);
        left: calc(50% - 7.5rem);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9rem;
        border-radius: var(--radius-md);
        outline: 5px solid rgba(255, 255, 255, 0.65);
        font-weight: 500;
    }

    .wrapper_popup_content .play-box.loader .bg {
        position: absolute;
        left: -46px;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 0;
        background: repeating-linear-gradient(-55deg, var(--main-light) 1px, #FFF 2px, #FFF 11px, var(--main-light) 12px, var(--main-light) 20px);
        animation-name: loader;
        animation-duration: .6s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
}

@keyframes loader {

    /* Ladebox Konfigurator */
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(46px);
    }
}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {

    .rahmen,
    .rahmen-paypal {
        width: 90vw;
    }

    .wrapper_popup_content,
    .wrapper_popup_content.laden {
        width: auto;
        min-width: auto;
    }

    .wrapper_popup_content {
        padding: 1.5rem;
    }
}

/*
  ======================================================================
  Konfigurator Preview
  ======================================================================
  */
.section[role=content].konfigurator__preview {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        max-width: 65%;
    }
}

/*
  ======================================================================
  Main CSS ab hier
  ======================================================================
  */
.section[role=pre-head] {
    background-color: var(--gray-100);
    border-top: 0.5rem solid var(--main-light);
    height: 6rem;
}

.section[role=head] {
    background-color: var(--gray-100);
    display: grid;
    grid-template-areas: "a b";
    grid-template-columns: auto 1fr;
    align-items: center;
    font-size: 0.75rem;
    align-items: flex-end;
    padding-bottom: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 3;
    height: 3rem;

    .logo {
        grid-area: a;
        max-width: 80%;
        transition: all 0.3s ease-in-out;


svg {
    fill:rgb(30, 186, 121);
}

    }

    .logo.logo_sticky {
        max-width: 35%;
        display: flex;
        align-self: center;
        padding-top: 0.4rem;
        transition: all 0.3s ease-in-out;
    }

    .navigation {
        text-align: right;
        grid-area: b;

        .wrapper-nav {
            .nav-mobil {
                display: none;
            }
        }

        ul {
            margin-top: 0.5rem;

            li {
                display: inline-block;
                text-transform: uppercase;
                margin-right: 1.25rem;
                font-weight: 700;
                letter-spacing: var(--tracking-caps);
                transition: all 0.2s;
            }

            li.active,
            li:hover {
                color: var(--main-light);
                border-bottom: 0.25rem solid;
                padding-bottom: 0.1rem;
            }

            a {
                padding: 0.25rem 0.75rem;
            }

            li:last-of-type {
                margin-right: 0;
                background-color: var(--main-light);
                color: #FFF;
                padding: 0.35rem 0.5rem;
                border: 1px solid transparent;
            }

            li:last-of-type:hover {
                background-color: transparent;
                color: var(--main-light);
                border: 1px solid var(--main-light);
            }
        }
    }
}

@media only screen and (max-device-width: 480px) {
    .section[role=pre-head] {
        background-color: var(--gray-100);
        border-top: 0.5rem solid var(--main-light);
        height: 0.5rem;
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 10 !important;
    }

    .section[role=head] {
        background-color: var(--gray-100);
        display: none;
        grid-template-areas: "a b";
        grid-template-columns: auto 1fr;
        align-items: center;
        font-size: 0.75rem;
        align-items: flex-start;
        padding-bottom: 0.5rem;
        padding-top: 1.5rem;
        position: fixed;
        top: 3.5rem;
        z-index: 3;
        height: auto;

        .logo {
            grid-area: a;
            max-width: 80%;
            transition: all 0.3s ease-in-out;
        }

        .logo.logo_sticky {
            max-width: 35%;
            display: flex;
            align-self: center;
            padding-top: 0.4rem;
            transition: all 0.3s ease-in-out;
        }

        .navigation {
            text-align: right;
            grid-area: b;

            .wrapper-nav {
                display: grid;
                grid-template-rows: auto 1fr;
                height: calc(100vh - 3rem) !important;

                .nav-mobil {
                    display: flex;
                    background-color: var(--gray-200);
                    height: auto;
                    justify-content: flex-start;
                    align-items: center;
                    padding-top: 3rem;
                    margin-bottom: 3.5rem;
                    flex-direction: column;

                    a {
                        padding: 0;
                        font-weight: bolder;
                        font-size: calc(var(--font-size) + 0.1rem);
                    }
                }
            }

            ul {
                margin-top: 0.5rem;
                display: block;
                background-color: var(--gray-100);
            }

            li {
                display: block !important;
                text-transform: uppercase;
                margin-right: 1.25rem;
                font-weight: 700;
                letter-spacing: var(--tracking-caps);
                transition: all 0.2s;
                line-height: 3;
                margin-bottom: 2rem;
                padding-right: 1rem;
            }

            li.active,
            li:hover {
                color: var(--main-light);
                border-bottom: 0.25rem solid;
                padding-bottom: 0.1rem;
            }

            a {
                padding: 0.25rem 0.75rem;
            }

            li:last-of-type {
                margin-right: 0;
                background-color: var(--main-light);
                color: #FFF;
                padding: 0.35rem 0.5rem;
                border: 1px solid transparent;
            }

            li:last-of-type:hover {
                background-color: transparent;
                color: var(--main-light);
                border: 1px solid var(--main-light);
            }
        }
    }

    .section[role=head].active {
        display: grid;
    }

    .section[role=post-head] {
        display: none !important;
    }

    .section[role=head-mein-konto] {
        position: fixed;
        z-index: 99 !important;
        top: 0.5rem !important;
        box-shadow: none !important;
        height: 3rem;
    }
}

.section[role=post-head] {
    background-color: var(--gray-100);
    height: 1rem;
    z-index: 2;
}

.section[role=head-mein-konto] {
    background-color: hsl(196, 21%, 93%);
    display: grid;
    grid-template-columns: auto auto auto;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: calc(var(--font-size) - 0.2rem) !important;
    position: sticky;
    top: 3rem;
    z-index: 5;
    height: 2.8rem;

    i:before {
        margin-right: 0.5rem;
        font-weight: 900;
    }

    a.mitrahmen {
        color: var(--main-dark);
        background-color: #FFF;
        padding: 0.1rem 0.75rem;
        border-radius: var(--radius-md);
    }

    a.mitrahmen:hover {
        background-color: var(--main-cta);
        color: #FFF;
    }

    a.guthaben-aufladen {
        font-weight: 600;
        margin-left: 0.5rem;
        margin-right: 1rem;
        color: var(--main-dark);
    }

    a.guthaben-aufladen:hover {
        color: var(--main-cta);
    }

    .reseller {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        img {
            max-width: 50%
        }

        .mitrahmen:hover {
            background-color: var(--action-purple);
            color: #FFF !important;
        }

        i:hover {
            color: #FFF !important;
        }
    }

    .help {
        display: flex;
        justify-content: center;
        align-items: center;

        p {
            text-align: center;
            color: var(--gray-700);
        }

        a {
            font-weight: 700;
        }

        a:hover {
            color: var(--main-cta);
        }
    }

    .login {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        i.menu {
            font-size: calc(var(--font-size) + 0.2rem);
            margin-left: 1rem;
            display: none;
            justify-content: center;
            align-items: center;
            width: 1rem;
        }
    }
}

@media only screen and (max-device-width: 480px) {
    .login {
        i.menu {
            display: flex;
        }
    }
}


.section[role=content] {
    padding-top: 2rem;
    padding-bottom: 2rem;

    p {
        font-weight: 300;
        line-height: 1.5;
        margin-bottom: 1rem;
        padding-right: 1rem;

        a {
            color: var(--main-cta);
        }

        a:hover {
            border-bottom: 1px dashed;
        }
    }

    p.small {
        font-size: calc(100% - 0.2rem);
        color: var(--main-cta);
        margin-top: 0.35rem;
        margin-bottom: 0;
        padding-right: 0;


    }

    p.center {

        text-align: center;

    }


    p.hervorhebung {
        font-weight: 600;
    }

    p.headline {
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 0;
        margin-top: 0;
        padding-right: 0;
        font-size: 1.5rem;
        color: var(--main-dark);
    }

    p.preis {
        font-weight: 600;
        line-height: 1.5;
        margin-top: 1.5rem;
        padding: 0;
        font-size: 2rem;
        color: var(--main-medium);
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-bottom: 0;

        strong {
            float: left;
            font-size: 0.8rem;
            padding-bottom: 0.45rem;
            padding-right: 0.75rem;
            color: var(--main-red);
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: var(--tracking-caps);
        }
    }

    ul {
        color: var(--main-dark);
        font-weight: 300;
        line-height: 1.5;
    }

    ul.liste-plus {
        padding-left: 1.5rem;

        li {
            padding-bottom: 2rem;
            font-size: calc(var(--font-size) - 0.06rem);
        }

        li:last-of-type {
            padding-bottom: 0;
        }

        li strong {
            font-weight: 600;
            color: var(--main-dark);
            line-height: 1.75;
            font-size: var(--font-size);
        }

        li:before {
            content: "";
            display: inline-block;
            width: 1.05em;
            height: 1.05em;
            vertical-align: -0.16em;
            background-color: currentColor;
            -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2012h8%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E');
                    mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2012h8%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E');
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            color: var(--main-light);
            margin-left: -1.5rem;
            display: inline-block;
            width: 1.5rem;
            font-weight: 400;
        }
    }

    ul {
        padding-left: 0;
        list-style: none;
        font-size: var(--font-size);

        li {
            line-height: 1.5;
            padding-left: 1.3rem;
        }

        li:before {
            content: "";
            display: inline-block;
            width: 1.05em;
            height: 1.05em;
            vertical-align: -0.16em;
            background-color: currentColor;
            -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E');
                    mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22%2F%3E%3C%2Fsvg%3E');
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            padding-right: 0.5rem;
            font-size: calc(var(--font-size));
            font-weight: 300;
            color: var(--main-light);
            margin-left: -1.3rem;
            display: inline-block;
            width: 1.3rem;
        }
    }

    ul.check {


        li:before {
            content: "";
            display: inline-block;
            width: 1.05em;
            height: 1.05em;
            vertical-align: -0.16em;
            background-color: currentColor;
            -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E');
                    mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E');
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            color: var(--action-green);
            font-weight: 900;
        }
    }


    ul.cross {


        li:before {
            content: "";
            display: inline-block;
            width: 1.05em;
            height: 1.05em;
            vertical-align: -0.16em;
            background-color: currentColor;
            -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E');
                    mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E');
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
            -webkit-mask-position: center;
                    mask-position: center;
            -webkit-mask-size: contain;
                    mask-size: contain;
            color: var(--action-red);
            font-weight: 900;
        }
    }


}

.section[role=footer].top,
.section[role=footer].middle,
.section[role=footer].bottom {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section[role=footer].top {
    background-color: var(--gray-100);
    padding: 1rem 0 1rem 0;

    img {
        width: 20rem;
        margin-bottom: 1.5rem;
    }

    p {
        text-transform: uppercase;
        font-size: calc(var(--font-size) + 0.5rem);
        color: var(--main-light);
        letter-spacing: var(--tracking-caps-display);
        font-weight: 400;
        text-align: center;
        line-height: 1.3;

        strong {
            font-weight: 700;
        }
    }
}

.section[role=footer].middle {
    background-color: var(--gray-300);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;

    p {
        text-align: center;
    }

    a {
        font-weight: 700;
    }

    a:hover {
        color: var(--main-cta);
    }
}

.section[role=footer].bottom {
    background-color: var(--main-dark);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    color: #FFF;
    font-size: calc(var(--font-size) - 0.2rem);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-weight: 300;

    a {
        opacity: 0.7;
    }

    a:hover {
        opacity: 1;
    }

    .bmgruppe {
        display: flex;
        justify-content: center;

        a.memberof {
            margin-right: 0;
        }
    }

    .subnav {
        display: flex;
        justify-content: flex-end;

        ul li {
            display: inline;
        }

        a {
            margin-left: 1rem;
        }
    }
}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
    .section[role=footer].top {
        img {
            width: 15rem;
            margin-bottom: 1rem;
        }

        p {
            font-size: calc(var(--font-size) + 0.1rem);
        }
    }

    .section[role=footer].middle {
        p {
            font-size: calc(var(--font-size) - 0.1rem);
        }
    }

    .section[role=footer].bottom {
        grid-template-columns: 1fr;
        padding-bottom: 3rem;

        .reseller {
            display: flex;
            justify-content: center;
            margin: 1rem 0;
        }

        .subnav {
            justify-content: center;
            margin-top: 1rem;
        }

        a {
            margin-right: 1rem;
        }
    }
}

h1.hero {
    line-height: 1.4;
    color: var(--main-dark);
    font-weight: 500;
    margin-bottom: 1rem;
    font-size: calc(var(--font-size) + 1.2rem);
    margin-top: 0;

    strong {
        color: var(--main-light);
        font-weight: 800;
    }

    strong::before {
        display: none;
    }
}


h2.hero {
    line-height: 1;
    color: var(--main-dark);
    font-weight: 500;
    margin-bottom: -0.5rem;
    font-size: var(--font-size);
    margin-top: 3.5rem;
}


h1,
h2 {
    line-height: 1.4;
    color: var(--main-dark);
    font-weight: 500;
    margin-bottom: 2.5rem;
    font-size: calc(var(--font-size) + 0.7rem);
    margin-top: 3rem;

    strong {
        color: var(--main-light);
        font-weight: 800;
    }

    strong::before {
        content: '\A';
        white-space: pre;
    }
}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {

    h1,
    h2 {
        strong::before {
            display: none;
        }
    }
}

.wrapper_img-screen {
    display: flex;
    justify-content: center;
    align-items: center;

    max-width: 100%;


    .img-screen {
        border: 1px solid #CCC;
        padding: 2rem;


        iframe {
            max-width: 100%;
        }
    }
}


.demo-success-nudge {
    background-color: var(--gray-100);
    border: 2px solid var(--action-green);
    padding: 1.25rem;
    margin-top: 2rem;
    border-radius: var(--radius-sm);
    border-style: dashed;
    text-align: center;

    /* Animation-Startzustand */
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    /* Start leicht unten */

    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        visibility 0s linear 0.5s;
    /* visibility erst nach der Animation verstecken */
}

.demo-success-nudge h2 {
    font-size: calc(var(--font-size) + 0.1rem);
    color: var(--action-green);
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.demo-success-nudge.visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    /* In Position sliden */
    transition-delay: 0s;
    /* visibility wird sofort sichtbar */
}

.grid-hero-audio {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    align-items: flex-start;
}

@media only screen and (max-device-width: 480px) {
    .grid-hero-audio {

        grid-template-columns: 1fr;

    }


    .demo-success-nudge {
        display: none;
            }
        
        
    .demo-success-nudge.visible {
display: block;
    }


}


/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
    .wrapper_img-screen {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 0;
        transform: rotate(0);
        margin-top: 0rem;
        display: none;

        .img-screen {
            border: 1px solid #CCC;
            padding: 1rem;
            box-shadow: none;
            transform: none;

            iframe {
                max-width: 100%;
                height: auto;
                aspect-ratio: 16/9 !important;
            }
        }
    }
}


/*
  ======================================================================
Testimonial Slider
  ======================================================================
  */

  .testimonial-slider {
    max-width: 80%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;

    p {
        margin: 0 !important;
        padding: 0 !important;
    }
}

.testimonial-slide {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        visibility 0s linear 0.6s;

    text-align: center;
    padding: 2rem;
    font-size: 1.1rem;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.testimonial-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    position: relative;
    z-index: 2;
}

.testimonial-slide.exiting {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); /* nach oben raus */
    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        visibility 0s linear 0.6s;
    z-index: 1;
}

.testimonial-slide .quote {
    margin-bottom: 1rem !important;
    font-weight: 400;
}

.testimonial-slide .name {
    font-weight: 600 !important;
    margin-top: 1rem;
}

.testimonial-slide.instant {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  


/*
  ======================================================================
  Login
  ======================================================================
  */
.wrapper_content_systemmeldung {
    display: grid;
    width: 30rem;
    height: auto;
    padding: 2.5rem;
    background-color: var(--bg-kontakt);
    color: var(--main-dark);
    margin: 10rem auto;
}


.wrapper_content_systemmeldung a.cto {
    width: 100%;
}

.wrapper_content_systemmeldung p.text {
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.wrapper_content_systemmeldung p.fehler {
    color: var(--action-red);
    font-weight: 500;
    width: 100%;
    padding: 0.5rem 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
    border: 2px dashed var(--action-red);
    background-color: #FFF;
}

.wrapper_content_systemmeldung .user-action:first-child {
    border-right: 1px solid var(--main-dark);
    padding: 0 2.5rem 0 0;
    display: flex;
    flex-direction: column;
}

.wrapper_content_systemmeldung .user-action:last-child {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 2rem 0 0;
}

.wrapper_content_systemmeldung p.headline1 {
    font-weight: 400;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    text-align: center;
    line-height: 1.5;
    letter-spacing: var(--tracking-caps);
    color: var(--main-light);
}

.wrapper_content_systemmeldung p.headline2 {
    font-weight: 700;
    margin: 0 0 0 0;
    text-align: center;
    line-height: 1.5;
    color: var(--main-dark);
}


/*
  ======================================================================
  FAQ
  ======================================================================
  */
.faq__wrapper {
    margin-top: 2rem;
    margin-bottom: 1rem;

    .faq__wrapper--frage {
        background-color: #FFF;
        margin-bottom: 0.5rem;

        padding: 1rem 1rem 1rem 3rem;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.2s;

        p.faq-frage {
            font-weight: 700 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        i {
            position: absolute;
            left: 1rem;
            color: var(--main-light);
        }

        i:before {
            content: "\2b";
        }

        .faq__wrapper--antwort {
            height: 0 !important;
            transition: all 0.2s;
            font-weight: 300;
            overflow: hidden;


        }
    }


    .faq__wrapper--frage.active {
        i:before {
            content: "\f068";
            transition: all 0.2s;
        }

        .faq__wrapper--antwort {
            height: auto !important;
            margin-top: 0.5rem;
        }
    }
}

/*
  ======================================================================
  Warenkorb
  ======================================================================
  */
.wrapper_warenkorb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 4rem 0;
}

.wrapper_warenkorb .inhalt {
    display: grid;
    grid-template-columns: 1fr 40%;
    grid-template-areas: "a b" "c d";
    grid-row-gap: 2rem;
    grid-column-gap: 6rem;
    margin: 0;
    width: 100%;
    padding: 3rem;
    background-color: var(--bg-kontakt);
}

.wrapper_warenkorb .inhalt h2 {
    margin: 0 0 1.5rem 0;
}

.wrapper_warenkorb .inhalt h2 {
    grid-area: a;
}

.wrapper_warenkorb .inhalt .articles {
    color: var(--main-dark);
    font-size: 1rem;
    font-family: "Geist";
    margin-top: -0.5rem;
    grid-area: c;
}

.wrapper_warenkorb .inhalt .articles-grid {
    display: grid;
    grid-template-columns: 1fr 17% 17% 17%;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.5;
    grid-column-gap: 1.5rem;
}

.wrapper_warenkorb .inhalt .articles-grid .cart-item {
    grid-column: 1 / span 4;
    display: grid;
    grid-template-columns: 1fr 17% 17% 17%;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.5;
    grid-column-gap: 1.5rem;
}

.wrapper_warenkorb .inhalt .articles-grid .cart-item:nth-child(1) {
    background-color: red;
}

.wrapper_warenkorb .inhalt .articles-grid .article-beschreibung.headline,
.wrapper_warenkorb .inhalt .articles-grid .article-einzelpreis.headline,
.wrapper_warenkorb .inhalt .articles-grid .article-menge.headline,
.wrapper_warenkorb .inhalt .articles-grid .article-gesamtpreis.headline {
    font-size: 0.9rem;
    font-weight: 600;
    height: 2rem;
    flex-direction: row;
}

.wrapper_warenkorb .inhalt .articles-grid .article-menge.headline {
    justify-content: center;
}

.wrapper_warenkorb .inhalt .articles-grid .article-beschreibung,
.wrapper_warenkorb .inhalt .articles-grid .article-einzelpreis,
.wrapper_warenkorb .inhalt .articles-grid .article-menge,
.wrapper_warenkorb .inhalt .articles-grid .article-gesamtpreis {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.wrapper_warenkorb .inhalt .articles-grid .article-menge,
.wrapper_warenkorb .inhalt .articles-grid .article-gesamtpreis {
    text-align: end;
}

.wrapper_warenkorb .inhalt .articles-grid .article-beschreibung {
    justify-content: flex-start;
    line-height: 1.3;
}

.wrapper_warenkorb .inhalt .articles .article-beschreibung strong.rabattcode {
    color: var(--action-purple);
}

.wrapper_warenkorb .inhalt .articles .article-beschreibung em {
    margin-top: 5rem;
    font-size: 0.95rem;
    opacity: 0.8;
    font-style: normal;
}

.wrapper_warenkorb .inhalt .articles .article-beschreibung em:before {
    content: "";
    height: 0.3rem;
    display: block;
}

.wrapper_warenkorb .inhalt .articles-grid .article-trenner {
    grid-column: 1 / span 4;
    background-color: #FFF;
    border-bottom: 1px dotted var(--fliesstext);
}

.wrapper_warenkorb .inhalt .articles-grid .article-trenner.last {
    grid-column: 3 / span 2;
    background-color: #FFF;
    border-bottom: 1px dotted var(--fliesstext);
}

.wrapper_warenkorb .inhalt .articles-grid .article-menge input[type="number"] {
    background: #FFF;
    border: 1px solid var(--gray-350);
    padding-left: 0.7rem;
    width: 5rem;
    color: var(--main-dark);
    min-height: 2.25rem;
    text-align: center;
    display: flex;
}

.wrapper_warenkorb .inhalt .articles-grid .article-menge label {
    color: var(--main-cta);
    font-size: 0.8rem;
    margin-top: 0.3rem;
    display: none;
}

.wrapper_warenkorb .inhalt .articles-grid .article-menge {
    flex-direction: column;
}

.wrapper_warenkorb .inhalt .overview {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: flex-end;
    align-content: flex-start;
    grid-row-gap: 2rem;
    grid-area: d;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px dotted var(--action-blue);
    padding: 1.5rem 2rem 2rem 2rem;
    grid-row-gap: 0;
    grid-area: b;
    grid-row-start: 1;
    grid-row-end: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt input[type="text"],
.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt input[type="email"],
.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt input[type="password"] {
    background-color: #FFF;
    border: 1px solid var(--gray-350);
    padding: 0 0.5rem;
    width: 100%;
    font-weight: 300;
    font-size: 1rem;
    color: var(--main-dark);
    font-family: var(--font-fliesstext);
    margin: 0.3rem 0 1.5rem 0;
    height: 2.7rem;
    line-height: 2.7rem;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt .wrapper_password {
    position: relative;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt .wrapper_password i {
    position: absolute;
    top: 1.3rem;
    right: 0.8rem;
}


.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt label {
    font-family: "Geist";
    color: var(--main-dark);
    font-weight: 500;
    font-size: 0.9rem;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt p.text {
    font-family: "Geist";
    color: var(--main-dark);
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt p.headline {
    font-family: "Geist";
    color: var(--main-dark);
    font-weight: 400;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin: 1rem 0 0.5rem 0;
    text-align: center;
    line-height: 1.5;
    letter-spacing: var(--tracking-caps);
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt p.fehler {
    font-family: "Geist";
    color: var(--red-cta);
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
    margin: -0.5rem 0 2rem 0;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt .zugangsdaten {
    margin-top: 3.5rem;
text-align: center;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt .zugangsdaten a.pswd {
    color: var(--main-cta);
    height: 1.5rem;
    display: inline-flex;
    justify-content: center;
    font-weight: 400;
    transition: all 0.2s;
    font-size: 0.8rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt a.pswd:hover {
    border-bottom: 1px dashed;
    transition: all 0.2s;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt a.register {
    color: var(--main-cta);
    text-align: center;
    font-weight: 500;
    font-family: "Geist";
    font-size: 0.8rem;
    display: block;
    text-decoration: none;

    text-underline-offset: 0.3rem;
    text-decoration-thickness: 1px;
    text-decoration-skip: spaces;
    text-decoration-skip-ink: spaces;
    margin: -0.5rem 0 2rem 0;
}

.wrapper_warenkorb .inhalt .overview.nicht-eingeloggt a.register:hover {
    text-decoration: underline;
    transition: all 0.2s;
        text-decoration-style: dotted;
}

.wrapper_warenkorb .inhalt .overview .coupon {
    border: 1px dotted var(--main-light);
    padding: 1rem;
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.5);
}

.wrapper_warenkorb .inhalt .overview .coupon .einloesen {
    display: flex;
    align-items: stretch;

    button {
        margin-left: 0.5rem;
        display: flex;
        padding: 0;
        padding: 0.1rem 1rem 0 1rem;
        justify-content: center;
        align-items: center;
        border: dotted 1px;
    }
}

.wrapper_warenkorb .inhalt .overview .coupon input[type="text"] {
    background: #FFF;
    border: 1px solid var(--gray-400);
    padding: 0 0 0 0.7rem;
    width: 15rem;
    font-family: "Geist";
    color: var(--main-dark);
    min-height: 2.25rem;
    text-align: left !important;
    display: flex;
    float: left;
}

.wrapper_warenkorb .inhalt .overview .coupon p.text {
    font-size: 0.9rem;
    font-weight: 600;
}

.wrapper_warenkorb .inhalt .overview .coupon p.code {
    font-weight: 500;
    font-size: 1rem;
    color: var(--action-purple);
    margin-top: 1rem;
    margin-bottom: 0;
}


.wrapper_warenkorb .inhalt .overview .coupon p.fehler {
    font-weight: 500;
    font-size: 1rem;
    color: var(--action-red);
    margin-top: 1rem;
    margin-bottom: 0;
}

.wrapper_warenkorb .inhalt .overview .coupon p.code i.trash:hover:before {
    font-weight: 900;
}

.wrapper_warenkorb .inhalt .overview .absenden {
    display: flex;


    flex-direction: column;
    width: 100%;
}

.wrapper_warenkorb .inhalt .overview .absenden button.cto {
display: block;
float: left;
}

.wrapper_warenkorb .inhalt .overview .absenden .disclaimer {
    display: flex;
    flex-direction: column;
    color: var(--main-dark);
    font-weight: 400;
    font-family: "Geist";
}

.wrapper_warenkorb .inhalt .overview .absenden .disclaimer.rahmen {
    border: 1px solid var(--fliesstext);
}

.wrapper_warenkorb .inhalt .overview .absenden .disclaimer p {
    font-size: 1rem;
}


.wrapper_warenkorb .inhalt .overview .absenden .disclaimer p.fehler {
    color: var(--action-red);
}

.wrapper_warenkorb .inhalt .overview .absenden .disclaimer p.agb {
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

.wrapper_warenkorb .inhalt .overview .absenden .disclaimer p.info-zahlung {
    margin-bottom: 1rem;
    font-weight: 500;
    background-color: #e2f8e9;;

    padding: 1rem 2rem 1rem 2.75rem;

color: #128b3a;
}


.wrapper_warenkorb .inhalt .overview .absenden .user-action {
    width: 100%;

    .wrapper-password {
        position: relative;

        i {
            position: absolute;
            top: 0.3rem;
            right: 0;
            height: 2.7rem;
            display: flex;
            width: 2.5rem;
            justify-content: center;
            align-items: center;
        }
    }

    button {
        width: 100%;
    }
}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
    .wrapper_warenkorb {
        padding: 0;
        column-gap: 0;
        margin: 0;
        grid-template-columns: 100%;
        width: 100%;
    }

    .wrapper_warenkorb .inhalt,
    .wrapper_warenkorb .inhalt.danke {
        grid-template-columns: 1fr !important;
        grid-row-gap: 1rem;
        grid-column-gap: 0;
        padding: 0;
        width: auto;
        grid-template-areas: "a" "b" "c" "d";
        border: none;
        box-shadow: none;
        background-color: #FFF;
    }

    .wrapper_warenkorb .inhalt.danke .text span.characters {
        font-size: 23vw;
    }

    .wrapper_warenkorb .inhalt .articles-grid,
    .wrapper_warenkorb .inhalt .articles-grid .cart-item {
        grid-gap: 0;
        grid-template-columns: 1fr 25% 30%;
        align-items: center;
    }

    .wrapper_warenkorb .inhalt .articles-grid .article-trenner {
        grid-column: 1 / span 3;
    }

    .wrapper_warenkorb .inhalt .articles-grid .article-trenner.last {
        grid-column: 2 / span 2;
    }

    .wrapper_warenkorb .inhalt .articles-grid .article-menge input[type="number"] {
        padding-left: 0;
    }

    .wrapper_warenkorb .inhalt .articles-grid .cart-item .article-einzelpreis,
    .wrapper_warenkorb .inhalt .articles-grid .article-einzelpreis.headline {
        display: none;
    }

    .wrapper_warenkorb .inhalt .overview.nicht-eingeloggt {
        margin-top: 4rem;
        margin-bottom: 3rem;
        background-color: var(--bg-kontakt);
        border-radius: 0;
    }

    .wrapper_warenkorb .inhalt .overview .coupon input[type="text"] {
        width: 100%;
    }

    .wrapper_warenkorb .inhalt .overview span.button.secondary,
    .wrapper_warenkorb .inhalt .overview a.button.secondary {
        margin-left: 0;
        display: inline-flex;
        clear: both;
        margin-top: 1rem;
    }
}

/*
  ======================================================================
  Danke-Seite
  ======================================================================
  */
.wrapper_danke {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 3rem 0;

    img {
        width: 50rem;
        max-width: 90%;
    }

    h1 strong:before {
        display: none;
    }

    p {
        text-align: center;
        line-height: 1.7 !important;
    }

    h3 {
        border: 1px dashed var(--main-dark);
        padding: 1rem;
        margin-top: 2rem;
        margin-bottom: 1.5rem;
    }
}


/*
  ======================================================================
  Changelog
  ======================================================================
  */
.wrapper__changelog {
    display: grid;
    grid-template-areas: "a b";
    grid-template-columns: 15rem 1fr;


    .datum {
        border-bottom: 1px solid var(--gray-400);
        margin-bottom: 2rem;
    }


    .inhalt {
        border-bottom: 1px solid var(--gray-400);
        margin-bottom: 2rem;
    }


    .datum.last,
    .inhalt.last {
        border-bottom: none !important;
    }


    h6 {
        margin: 0;
        font-weight: 700;
        color: var(--main-light);

        font-size: calc(var(--font-size) + 0.2rem);
        padding-right: 3rem;
        scroll-margin-top: 8rem;
    }


    ul {
        padding-top: 0.2rem;
        padding-bottom: 0;

        margin-bottom: 1.25rem;


        li.new:before,
        li.improved:before,
        li.fixed:before,
        li.initial:before {
            font-family: var(--font-fliesstext);
            width: 7rem;
            margin-right: 2rem;
            text-transform: uppercase;
            color: #FFF;
            font-weight: 400;
            font-size: calc(var(--font-size) - 0.4rem);
            letter-spacing: var(--tracking-caps);
            border-radius: var(--radius-pill);

            margin-left: -9rem;
            margin-bottom: -5rem;
            padding: 0.29rem 0.5rem 0.25rem 0.5rem;
            display: inline-flex !important;
            justify-content: center;
            align-items: center;
        }


        li.new:before {
            content: "Neu";
            background-color: #FF3081;
        }


        li.improved:before {
            content: "Verbessert";
            background-color: var(--action-blue);
        }

        li.fixed:before {
            content: "Behoben";
            background-color: #E6E6F2;
            color: var(--text-meta);
        }

        li.initial:before {
            content: "Geplant";
            background-color: var(--action-purple);
        }


        li {
            padding-bottom: 1rem;
            padding-left: 9rem !important;
            padding-right: 3rem;
            font-size: calc(var(--font-size) - 0.05rem);

        }


    }


}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
    .wrapper__changelog {
        grid-template-areas: "a" "b";
        grid-template-columns: 1fr;

        h6 {
            text-align: left;
            font-size: calc(var(--font-size) + 0.3rem);
            margin-bottom: 1rem;
            padding-right: 0;
        }


        .datum {
            border-bottom: none;
            margin-bottom: 0;
        }


        ul {
            padding-top: 0.2rem;
            padding-bottom: 0;

            margin-bottom: 1.25rem;


            li.new:before,
            li.improved:before,
            li.fixed:before,
            li.initial:before {
                margin-left: 0;
                margin-bottom: 0.5rem;

                display: flex !important;

            }

            li {
                padding-bottom: 1.5rem;
                padding-left: 0 !important;

                font-size: calc(var(--font-size) - 0.05rem);

            }


        }
    }
}

/*
  ======================================================================
  Mustertexte
  ======================================================================
  */
.wrapper__mustertexte {
    display: grid;
    grid-template-areas: "a b";
    grid-template-columns: 20% 1fr;

    h2 {
        margin: 0;
        font-weight: 700;
        color: var(--main-light);
        text-align: right;
        font-size: calc(var(--font-size) + 0.5rem);
        padding-right: 3rem;
        scroll-margin-top: 8rem;
    }

    ul {
        padding-top: 0.2rem;
        padding-bottom: 0;

        li {
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px dashed var(--main-light);
            padding-right: 3rem;
            font-size: calc(var(--font-size) - 0.05rem);
            line-height: 1.7;
        }

        li:last-child {
            border-bottom: 0px;
        }
    }

    a.cto {
        margin-bottom: 5rem;
    }
}

.wrapper__mustertexte-navigation a {
    color: var(--main-cta);
    border: 1px dotted;
    padding: 0.4rem 0.75rem;
    margin: 1rem 0.75rem 0 0;
    display: inline-block;
    font-size: calc(var(--font-size) - 0.05rem);
}

.wrapper__mustertexte-navigation a:hover {
    color: #FFF;
    border: 1px solid;
    background-color: var(--main-cta);
}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
    .wrapper__mustertexte {
        grid-template-areas: "a" "b";
        grid-template-columns: 1fr;

        h2 {
            text-align: left;
            font-size: calc(var(--font-size) + 0.3rem);
            margin-bottom: 1rem;
            padding-right: 0;
        }
    }
}

/*
  ======================================================================
  Login
  ======================================================================
  */
.wrapper_content_login {
    display: grid;
    grid-template-columns: 50% 50%;
    max-width: 60rem;
    height: auto;
    padding: 2.5rem;
    grid-column-gap: 2.5rem;
    grid-row-gap: 2rem;
    background-color: var(--bg-kontakt);
    color: var(--main-dark);
    margin: 10rem auto;
}

.wrapper_content_login .user-action:last-child a.cto {
    margin-bottom: 2rem;
}

.wrapper_content_login a.cto {
    width: 100%;
}

.wrapper_content_login p.text {
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
}

.wrapper_content_login p.fehler {
    color: var(--action-red);
    font-weight: 500;
    width: 100%;
    padding: 0.5rem 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
    border: 2px dashed var(--action-red);
    background-color: #FFF;
}

.wrapper_content_login .user-action:first-child {
    border-right: 1px solid var(--main-dark);
    padding: 0 2.5rem 0 0;
    display: flex;
    flex-direction: column;
}

.wrapper_content_login .user-action:last-child {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 2rem 0 0;
}

.wrapper_content_login p.headline {
    font-weight: 400;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin: 1rem 0 2rem 0;
    text-align: center;
    line-height: 1.5;
    letter-spacing: var(--tracking-caps);
    color: var(--main-light);
}

.wrapper_content_login .user-action:last-child p.headline {
    margin-bottom: 0;
}

.wrapper_content_login label {
    font-family: "Geist";
    color: var(--main-dark);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--main-dark);
}

.wrapper_content_login input[type="text"],
.wrapper_content_login input[type="email"],
.wrapper_content_login input[type="password"] {
    background: #FFF;
    border: 1px solid var(--gray-350);
    padding: 0 0.5rem;
    width: 100%;
    margin: 0.3rem 0 1.5rem 0;
    height: 2.7rem;
    line-height: 2.7rem;
}

.wrapper_content_login .wrapper-pswd {
    position: relative;
    padding-top: 0.3rem;

    input[type="password"] {
        margin-top: 0;
    }

    i.pswd,
    i.pswd.active {
        color: var(--main-dark);
        position: absolute;
        right: 0;
        top: 0.3rem;
        cursor: pointer;
        display: flex;
        height: 2.7rem;
        width: 2.7rem;
        justify-content: center;
        align-items: center;
        font-weight: 400;
    }
}

.wrapper_content_login a.pswd {
    height: 2rem;
    display: block;
    font-weight: 300;
    transition: all 0.2s;
    font-size: 0.75rem;
    text-align: center;
    padding-top: 0.6rem;
}

@media only screen and (max-device-width: 480px) {
    .wrapper_content_login {
        grid-template-columns: 100%;
        height: auto;
        margin: 3rem 2rem;
        padding-top: 2.5rem;
    }

    .wrapper_content_login .user-action:first-child {
        border-right: none;
        border-bottom: 1px solid #858585;
        padding: 0 0 2rem 0;
    }

    .wrapper_content_login p.headline {
        margin: 0 0 1rem 0;
    }

    .wrapper_content_login .user-action:first-child p.headline {
        margin-bottom: 1.5rem;
    }

    .wrapper_content_login .user-action:last-child p.headline {
        margin-bottom: 1rem;
        margin-top: 0.3rem;
    }

    .wrapper_content_login p.text {
        margin-bottom: 2rem;
    }

    .wrapper_content_login .user-action:last-child {
        padding: 0;
    }
}

/*
  ======================================================================
  Kontaktformular
  ======================================================================
  */
.bg-kontakt {
    background-color: var(--bg-kontakt);
}

.kontaktformular_wrapper {
    display: grid;
    grid-template-areas: "a b";
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2rem;

    .anrede,
    .absenden {
        grid-column: 1 / span 2;
        padding: 1rem 0;
        color: var(--main-dark);
        font-weight: 300;
        font-size: 1rem;

        i {
            margin-right: 2rem;

            a {
                color: var(--main-cta)
            }

            a:hover {
                border-bottom: 1px dashed;
            }
        }

        i:before {
            font-weight: 500;
            color: var(--main-dark);
            padding-right: 0.5rem;
        }

        i.checked:before {
            color: var(--main-dark);
        }
    }


        .info_kontakt {
        grid-column: 1 / span 2;
        margin-top: -1rem;
        margin-bottom: 2rem;
        }


    .absenden {
        margin-top: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .cto {
            margin-top: 2rem;
        }
    }

    input[type=text],
    input[type=password] {
        background-color: #FFF;
        border: 1px solid var(--gray-350);
        width: 100%;
        height: 3rem;
        margin-bottom: 1rem;
        padding: 0 1rem;
        font-family: var(--font-fliesstext);
        font-weight: 300;
        font-size: 1rem;


    }

    select {
        background-color: #FFF;
        border: 1px solid var(--gray-350);
        width: 100%;
        height: 3rem;
        margin-bottom: 1rem;
        padding: 0 1rem 0 0.8rem;
        font-family: var(--font-fliesstext);
        font-weight: 300;
        font-size: 1rem;
    }

    option[value=""][disabled] {
        display: none;
    }


    input[type=text].plz {
        width: 25%;
    }

    input[type=text].ort {
        width: calc(75% - 0.75rem);
        margin-left: 0.75rem;
    }

    textarea {
        background-color: #FFF;
        border: 1px solid var(--gray-350);
        width: 100%;
        height: 100%;
        padding: 1rem;
        font-family: var(--font-fliesstext);
        color: var(--main-dark);
        font-weight: 300;
    }

    .wrapper-pswd {
        position: relative;

        i.pswd,
        i.pswd.active {
            color: var(--main-dark);
            position: absolute;
            right: 0;
            top: 0rem;
            cursor: pointer;
            display: flex;
            height: 3rem;
            width: 3rem;
            justify-content: center;
            align-items: center;
            font-weight: 400;
        }
    }

    p.fehler-text {
        color: var(--action-red);
        font-weight: 500;
        width: 100%;
        padding: 0.5rem 1rem;
        margin-top: 1.5rem;
        margin-bottom: -0.5rem;
        border: 2px dashed var(--action-red);
        background-color: #FFF;
    }

    p.erfolg-text {
        color: var(--action-green);
        font-weight: 500;
        width: 100%;
        padding: 0.5rem 1rem;
        margin-top: 1.5rem;
        margin-bottom: -0.5rem;
        border: 2px dashed var(--action-green);
        background-color: #FFF;
    }

    input[type=text].fehler,
    input[type=password].fehler,
    select.fehler,
    textarea.fehler {
        border: 2px dashed var(--action-red);
    }
}

input[type=text].fehler,
textarea.fehler {
    border: 2px dashed var(--action-red);
}

.bg-main-light input[type=text],
.bg-main-light textarea {
    background-color: #FFF;
}

.dateiupload {
    border: 1px dashed var(--gray-350);
    width: 100%;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--gray-500);
    font-family: var(--font-fliesstext);
    font-weight: 300;
    font-size: 1rem;
    transition: all 0.2s;
    cursor: pointer;
    padding-bottom: 1.5rem;
    background-color: #FFF;

    i {
        font-size: 2.5rem;
        font-weight: 100;
        color: var(--gray-500);
        padding: 1.5rem;
    }

    i.progress {
        -webkit-animation: rotating 2s linear infinite;
        -moz-animation: rotating 2s linear infinite;
        -ms-animation: rotating 2s linear infinite;
        -o-animation: rotating 2s linear infinite;
        animation: rotating 2s linear infinite;
    }

    span {
        text-align: center;
        line-height: 1.5;
        padding-top: 1.5rem;
        font-size: calc(100% - 0.3rem);
        text-transform: uppercase;
        letter-spacing: var(--tracking-caps);
    }

    .progress_wrapper {
        width: 80%;
        height: 0.5rem;
        background-color: var(--main-light);
        border-radius: var(--radius-md);
        margin-top: 1.5rem;
        overflow: hidden;

        .progress {
            background-color: var(--action-red);
            height: 100%;
            border-radius: var(--radius-md);
        }
    }
}

.dateiupload:hover,
.dateiupload.drag {
    background-color: var(--main-light);
    color: #FFF;

    i {
        color: #FFF;
        font-weight: 900;
    }
}

@media only screen and (max-device-width: 480px) {
    .kontaktformular_wrapper {
        grid-template-areas: "a" "b";
        grid-template-columns: 100%;
        grid-row-gap: 1rem;

        .anrede,
        .absenden {
            grid-column: 1 / span 1;
            margin: 0;
        }

        .info_kontakt {
            grid-column: 1 / span 1;
margin-bottom: 0;
        }

        textarea {
            min-height: 10rem;
        }
    }
}

/*
  ======================================================================
  CTO
  ======================================================================
  */
a.cto,
button.cto {
    border: 1px solid var(--main-cta);
    color: #FFF;
    padding: 0.4rem 0.6rem 0.4rem 0.9rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: calc(var(--font-size) - 0.2rem);
    display: inline-block;
    margin-top: 0.5rem;
    transition: all 0.2s;
    font-family: var(--font-fliesstext);
    background-color: transparent;
    background-color: var(--main-cta);
    cursor: pointer;
}

a.cto:after,
button.cto:after {
    content: "→";
    font-weight: 300;
    padding-left: 0.5rem;
}

a.cto.secondary,
button.cto.secondary {
    padding: 0.2rem 0.8rem;
    font-size: calc(var(--font-size) - 0.3rem);
    margin-top: 0;
    background-color: #FFF;
    color: var(--main-cta);
    font-weight: 500;
    transition: all 0.2s;
}

a.cto.tertiary,
button.cto.tertiary {
    padding: 0.4rem 0.7rem 0.35rem 0.7rem;
    font-size: 0.8rem;
    margin-top: 0;
    color: #FFF;
    border-color: var(--main-dark);
    background-color: var(--main-dark);
    text-transform: none;
    letter-spacing: 0;
    transition: all 0.2s;
}

a.cto.quaternary,
button.cto.quaternary {
    padding: 0.4rem 0.7rem 0.35rem 0.7rem;
    font-size: 0.8rem;
    margin-top: 0;
    color: var(--main-light);
    border-color: var(--main-light);
    background-color: #FFF;
    text-transform: none;
    letter-spacing: 0;
    transition: all 0.2s;
}

a.cto:hover,
button.cto:hover {
    background-color: transparent;
    color: var(--main-cta);
    border: 1px solid var(--main-cta);
    transition: all 0.2s;
}

a.cto.secondary:hover,
button.secondary.cto:hover {
    color: #FFF;
    background-color: var(--main-cta);
    border: 1px solid var(--main-cta);
    transition: all 0.2s;
}

a.cto.tertiary:hover,
button.cto.tertiary:hover {
    color: var(--main-light);
    border-color: var(--main-light);
    background-color: #FFF;
    transition: all 0.2s;
}

a.cto.quaternary:hover,
button.cto.quaternary:hover {
    color: var(--main-cta);
    border-color: var(--main-cta);
    background-color: #FFF;
    transition: all 0.2s;
}

/*
  ======================================================================
  Grids
  ======================================================================
  */
.grid-20-80 {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-gap: 2.5rem;
    align-items: flex-start;
}

.grid-30-70 {
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-gap: 2.5rem;
    align-items: flex-start;
}

.grid-40-60 {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-gap: 2.5rem;
    align-items: flex-start;
}

.grid-40-60.hero {

    grid-gap: 4rem;


}

.grid-50-50 {
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-gap: 2.5rem;
    align-items: flex-start;
}

.grid-60-40 {
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-gap: 2.5rem;
    align-items: flex-start;
}


.grid-70-30 {
    display: grid;
    grid-template-columns: 1fr 30%;
    grid-gap: 2.5rem;
    align-items: flex-start;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 3rem;
    grid-row-gap: 2rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2.5rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2.5rem;
}

.grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2.5rem;
}

.grid-6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2.5rem;
}

.grid-center {
    align-items: center;
}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {

    .grid-20-80,
    .grid-30-70,
    .grid-70-30,
    .grid-40-60,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6 {
        grid-template-columns: 1fr;
    }


    .grid-no-mobile-row-gap {
        grid-row-gap: 0;
    }

}

.contentbox_text {
    background-color: #FFF;
    padding: 2rem 2rem 1rem 2rem;
    position: relative;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.1);

    i {
        font-size: calc(var(--font-size) + 1rem);
        color: var(--main-light);
        font-weight: 300;
        display: flex;
        align-items: center;
        height: 5rem;
        margin-top: -1.5rem;
    }

    h3 {
        padding-bottom: 1rem;
    }

    p {
        font-size: calc(var(--font-size) - 0.05rem);
    }
}

.contentbox_text.transluzent {
    background-color: rgba(255, 255, 255, 0.95);
}

h3 {
    color: var(--main-medium);
    padding-bottom: 0.5rem;
    font-weight: 600 !important;
}

/* Craft-R3: 0.2rem war absolut gesetzt und ergab je nach Schriftgroesse
   0,121em bzw. 0,165em. Slogans sind grosse Versalien-Zeilen — dort ist
   mehr Laufweite richtig, aber als Regel, nicht als Zufallswert. */
p.slogan {
    text-align: center !important;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps-display) !important;
    color: var(--main-dark);
    font-size: calc(var(--font-size) + 0.6rem);
    margin-top: 4rem;
    margin-bottom: 1.5rem !important;
    line-height: 1 !important;
    font-weight: 500 !important;

    strong {
        font-weight: 800 !important;
    }
}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
    p.slogan {
        line-height: 1.3 !important;
    }
}

.contentbox_text:hover {
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.3);
    transition: all 0.2s;
}

.contentbox_text-world {
    background-color: var(--main-dark);
    padding: 3rem 3rem 2rem 24%;
    background-image: url(../images/bg-weltkugel.svg);
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: -8% 30%;

    h2,
    h3 {
        color: #FFF;
    }

    p {
        color: #FFF;
        font-weight: 400 !important;
        font-size: calc(var(--font-size) - 0.05rem);
    }

    a {
        color: #FFF !important;
        border-bottom: 2px solid var(--main-cta);
    }

    a:hover {
        background-color: var(--main-cta);
        border: none !important;
        border-bottom: 2px solid transparent;
    }

}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
    .contentbox_text-world {
        background-color: var(--main-dark);
        padding-top: 2.5rem;
        padding-bottom: 1.5rem;
        padding-left: 0;
        padding-right: 0;
        background-image: none;
    }
}

.contentbox_text-blau {
    background-color: var(--main-light);
    padding: 2rem;

    h2 strong {
        color: #FFF;
    }

    >p {
        color: #FFF;
    }

    p {
        font-size: calc(var(--font-size) - 0.05rem);
    }

    a {
        color: #FFF !important;
        border-bottom: 1px dashed #FFF;
    }

    a:hover {
        color: #FFF;
        border-bottom: 1px solid #FFF !important;
    }
}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
    .contentbox_text-blau {
        padding: 5vw;
        width: calc(100% + 10vw);
        margin-left: -5vw;

        h2 {
            margin-top: 1.5rem;
        }
    }
}

.contentbox_hero_audioplayer {

    padding: 1rem;
    display: flex;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    background-color: var(--gray-100);
    cursor: pointer;


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

    }

    audio {
        margin-top: 1rem;
    }

    i {
        display: block;
        font-weight: 900;
        font-size: calc(var(--font-size) + 1rem);
        cursor: pointer;
        color: var(--main-dark);
        transition: all 0.2s;
    }

    i:hover {
        color: var(--main-light);
    }

    p.inhalt {
        margin: 0;
        padding: 0;
        font-size: calc(var(--font-size) - 0rem) !important;
        color: var(--main-light);
        font-weight: 600;
    }


}


.contentbox_hero_audioplayer.playing {
    background-color: var(--gray-100);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 2px #ccc;
    transition: all 0.2s ease;
}


.contentbox_hero_audioplayer.xmas {
    background-image: url(/images/bg-schnee-animiert.gif);
    background-color: #235E6F !important;


    i {
        color: #FFF;

    }

    i:hover {
        color: #34A65F;
    }

    figure,
    figure span,
    figure p {
        color: #FFF !important;
        background-color: #235E6F !important;

    }


    p.headline {
        color: #FFF;
        background-color: #235E6F;

    }

    p.inhalt {
        color: #FFF;
        background-color: #235E6F;

    }


}

/*
  ======================================================================
  Mein Konto
  ======================================================================
  */
.section-mein-konto {
    position: sticky;
    top: 5.8rem;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    z-index: 3;
}

.grid_mein-konto {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
    background-color: rgba(227, 241, 247, 0.8);
    padding: 0.75rem;
    border-radius: var(--radius-pill);

}

.contentbox_text.mein-konto {
    /* aspect-ratio: 1 / 1; */
    box-shadow: none;
    padding: 0;
    border-radius: var(--radius-pill);

    a {
        font-size: calc(var(--font-size) - 0.05rem);
        font-weight: 600;
        color: var(--main-light);
        background-color: #FFF;
        display: block;
        height: 100%;
        width: 100%;
        padding: 0.3rem 0.3rem;
        border-radius: var(--radius-pill);
        text-align: center;

        span:after {
            content: '\A';
            white-space: pre;
        }
    }
}

.contentbox_text.mein-konto:hover,
.contentbox_text.mein-konto.active {
    a {
        background-color: var(--main-light);
        color: #FFF;
        border: none;
    }
}

.tabelle_meine-ansagen {
    display: grid;
    grid-template-columns: auto 1fr;
    margin-top: 2rem;

    .datum {
        font-weight: 600;
    }

    .inhalt {
        border-bottom: 1px dashed;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
        margin-left: 2rem;
        padding-right: 1rem;
    }

    .inhalt:last-child {
        border-bottom: none;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        margin-left: 2rem;
        padding-right: 1rem;
    }
}

/*///// Responsive /////*/
@media only screen and (max-device-width: 480px) {
    .section-mein-konto {
        position: relative;
        top: 0;
        margin-bottom: -2rem;
    }

    .grid_mein-konto {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0.5rem;
        padding: 1.5rem;
        border-radius: 0;
    }

    .contentbox_text.mein-konto {
        aspect-ratio: auto;

        a {
            font-size: calc(var(--font-size) - 0.1rem);
            font-weight: 500;
            color: var(--main-light);
            padding: 0.5rem 1rem;
            line-height: 1;
        }
    }

    span:after {
        display: none;
    }

    .tabelle_meine-ansagen {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 2rem;

        .datum {
            margin-bottom: 0.5rem;
        }

        .inhalt,
        .inhalt:last-child {
            margin-left: 0;
        }
    }
}

/*
  ======================================================================
  Mein Konto Dashboard
  ======================================================================
  */
.wrapper__mein-konto--dashboard {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;

    .inhalt1-5 .rahmen {
        background-color: #FFF;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

    .inhalt1-5 .rahmen img {
        padding: 1rem 2rem 1rem 2rem;
    }

    .inhalt1-5 .rahmen img+span.headline {
        font-weight: 600;
        text-align: center;
        color: var(--main-dark);
        padding: 0.25rem 0;
        font-weight: 400 !important;
        text-transform: none;
        letter-spacing: 0;
        background-color: var(--gray-100);
        width: 80%;

        strong {
            font-weight: 900 !important;
        }
    }

    .inhalt3.big {
        width: calc(100% + 1rem);
        margin-left: -1rem;
    }

    .inhalt1,
    .inhalt1-5,
    .inhalt2,
    .inhalt3,
    .inhalt4,
    .inhalt5,
    .inhalt6 {
        background-color: var(--bg-kontakt);
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .inhalt1 {
        grid-column: span 2;
    }

    .inhalt1-5 {
        grid-column: span 3;
    }

    .inhalt2 {
        grid-column: span 4;
    }

    .inhalt3 {
        grid-column: span 6;

        span {
            font-size: 2.5rem;
            font-weight: 300;
            display: block;
            text-align: center;
            line-height: 1.3;
            color: var(--main-light);

            strong {
                font-weight: 900;
                color: var(--main-dark);
            }
        }
    }

    .inhalt4 {
        grid-column: span 8;
    }

    .inhalt5 {
        grid-column: span 10;
    }

    .inhalt6 {
        grid-column: span 12;
        flex-direction: row;

        p {
            line-height: 1.5;
            margin: 0;
            font-weight: 500;
            text-align: center;
        }
    }

    span.credits {
        font-size: 1.5rem;
        font-weight: 700;
        padding-top: 1.5rem;
    }

    span.headline {
        display: block;
        width: 100%;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: var(--tracking-caps);
        padding: 0.35rem 1rem;
        background-color: #FFF;
        color: var(--main-dark);
    }

    .inhalt-credits {
        display: flex;
        justify-content: center;
        align-items: center;

        .wrapper-button {
            width: 100%;
            background-color: #00477e;
            display: flex;
            align-items: stretch;
            justify-content: stretch;

            a {
                display: block;
                width: 100%;
            }
        }
    }

    .inhalt-ansagen {
        background-color: var(--bg-kontakt);
        grid-column: span 8;
        padding: 1rem;

        ul.ansagen {
            margin: 0.5rem 1rem 0 1rem;

            li {
                padding: 1.7rem 0 1.5rem 0;
                display: grid;
                grid-template-columns: 18% 1fr;
                grid-template-rows: auto auto;
                grid-template-areas: "a b"
                    ". d";
                grid-column-gap: 2rem;
                border-bottom: 1px dashed var(--main-light);
            }

            span.datum {
                font-weight: 500;
                grid-area: a;
            }

            span.text {
                grid-area: b;
                font-size: 0.95rem;
            }

            .wrapper-button {
                grid-area: d;
                margin: 1rem 0 0.5rem 0;
                height: 2rem;
                display: flex;
                align-items: stretch;

                button {
                    margin-right: 1rem;
                }
            }

            li:before {
                display: none;
            }

            li:last-child {
                border-bottom: none;
            }
        }

        button.tertiary {
            margin: 1rem;
        }
    }

    .inhalt-rechnungen {
        background-color: var(--bg-kontakt);
        grid-column: span 4;
        padding: 1rem;

        ul {
            margin: 0.5rem 1rem 0 1rem;

            li {
                padding: 1rem 0;
                display: grid;
                grid-template-columns: auto 1fr auto;
                grid-template-areas: "a" "b" "c";
                grid-column-gap: 1rem;
                border-bottom: 1px dashed var(--main-light);
            }

            li:before {
                display: none;
            }

            li:last-child {
                border-bottom: none;
            }

            span:first-child {
                font-weight: 500;
            }
        }

        button {
            margin: 1rem;
        }
    }

    a i:before {
        color: var(--main-cta);
        font-weight: 900;
    }

    a i:hover:before {
        font-weight: 300;
    }
}

/*///// Responsive /////*/
/* Responsive */
@media only screen and (max-device-width: 480px) {
    .wrapper__mein-konto--dashboard {
        width: 100%;
        grid-template-columns: 1fr;

        .inhalt1,
        .inhalt1-5,
        .inhalt2,
        .inhalt3,
        .inhalt4,
        .inhalt5,
        .inhalt6,
        .inhalt-ansagen,
        .inhalt-rechnungen,
        .inhalt-credits {
            grid-column: span 1;
        }

        .inhalt1-5 .rahmen {
            padding: 1rem;

            img {
                padding: 1rem 2rem 1rem 2rem;
                width: 90%;
            }
        }

        .inhalt3.big {
            width: 100%;
            margin-left: 0;

            span {
                font-size: 2rem;
            }
        }

        .inhalt-ansagen {
            ul.ansagen {
                span.datum {
                    padding: 1rem 0 1.5rem 0;
                }

                li {
                    grid-template-areas: "a" "b"
                        "." "d";
                }
            }
        }
    }
}

.contentbox_text.preis {
    border-top: 6px solid var(--action-cyan) !important;
    border-left: 1px solid var(--gray-300) !important;
    border-right: 1px solid var(--gray-300) !important;
    border-bottom: 1px solid var(--gray-300) !important;
    transition: all 0.2s;

    a.cto {
        margin-top: 1rem;
        margin-right: -0.5rem;
        margin-bottom: 0.5rem;
        width: 100%;
        font-weight: 500 !important;
        color: #FFF;
        background-color: var(--main-light);
        border: 1px solid var(--main-light);
    }

    a.cto:hover {
        color: var(--main-light);
        background-color: #FFF;
        border: 1px solid var(--main-light);
    }

    p.preisangabe-headline {
        font-size: calc(var(--font-size) + 0.5rem);
        font-weight: 700;
        color: var(--main-dark);
        margin-top: 0.5rem;
    }


            p.preisangabe-headline+ul li:first-of-type {

        font-weight: 600;
    }


    .rabatt+p.preisangabe-headline {
        margin-top: 1.5rem;
    }


    p.preisangabe-contentbox {
        font-size: calc(var(--font-size) + 1rem);
        font-weight: 700;
        color: var(--main-dark);
        margin-top: 3rem;
        margin-right: 0;
        padding-right: 0;
        margin-bottom: 0;
        line-height: 0.8;

        em.disclaimer {
            font-size: calc(var(--font-size) - 0.2rem);
            font-weight: 400;
            display: block;
            width: 100%;
            margin-bottom: 0.25rem;
            opacity: 0.5;
            font-style: normal;
        }

        em.preis-neu {
            font-style: normal;
            display: block;
            font-style: normal;
            color: var(--action-purple);
            margin-top: 1rem;
            opacity: 1;
            font-weight: 800;
        }


        em.preis {
            font-style: normal;
            display: flex;
            position: relative;
            margin-top: 0.35rem;
            height: 3rem;
            align-items: center;
            opacity: 1;
        }


        em.preis-neu+em.preis {
            font-weight: 500;

        }

        em.preis-neu+em.preis:before {
            content: "";
            display: block;

            width: 8rem;
            height: 5rem;
            top: -0.25rem;
            left: 0;
            position: absolute;


            background-image: url(/images/streichpreis.svg);
            background-size: contain;
            background-repeat: no-repeat;
            transform: rotate(10deg);
            opacity: 0.7;

        }

        b {
            display: block;
            margin-bottom: 1rem;
        }


        span {
            color: var(--main-light);
            font-size: calc(var(--font-size) + 0.05rem);
            font-weight: 400;
            display: block;
            margin-top: 0.25rem;

            strong {
                font-weight: 600;
            }
        }

        span::before {
            content: '\A';
            white-space: pre;
        }
    }

    .rabatt {
        color: var(--gray-700);
        font-weight: 400;
        background-color: var(--gray-100);
        text-align: center;
        position: absolute;
        top: 0;
        right: 1.5rem;
        padding: 1.5rem 0.5rem 0.7rem 0.5rem;
        line-height: 1.2;
        font-size: calc(var(--font-size) - 0.1rem);
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }

    p {
        font-size: var(--font-size);
        line-height: 1.5;
    }

    li:before {
        color: var(--main-light);
        font-weight: 300;
    }

    li strong {
        font-weight: 700;
        color: var(--main-light);
    }
}

.contentbox_text.preis.highlight {
    border-top: 6px solid var(--action-cyan) !important;

    .rabatt {
        color: #FFF;
        background-color: var(--action-cyan);
    }
}

.contentbox_text.preis.unlimited {
    border-top: 0px !important;

    a {
        width: auto;
    }
}

.contentbox_text.preis .unlimited {
    height: 6px;
    width: 100%;
    background-color: var(--action-purple);
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.contentbox_text.preis .unlimited:before {
    content: "";
    position: absolute;
    width: 200%;
    aspect-ratio: 1;
    top: 0%;
    left: 50%;
    z-index: 1;
    translate: -50% -15%;
    rotate: 0;
    transform: rotate(-90deg);
    opacity: 1;
    background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
    transition: opacity 0.25s;
    animation: rotate 3s linear infinite both;
    animation-delay: 1.5s;
}

.contentbox_text.double {
    grid-column: span 2;
}

@media only screen and (max-device-width: 480px) {
    .contentbox_text.double {
        grid-column: span 1;
    }
}

/*
  ======================================================================
  Animationen
  ======================================================================
  */
@keyframes rotate {

    /* Glow */
    25% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(90deg);
    }
}

/*
  ======================================================================
  Schriften
  ======================================================================
  */
@font-face {
  font-family: "FontAwesome";
  font-display: swap;
  font-style: normal;
  font-weight: 100;
  src: url("fonts/fontawesome/fa-thin-100.woff2") format("woff2"), url("fonts/fontawesome/fa-thin-100.ttf") format("truetype");
}

@font-face {
  font-family: "FontAwesome";
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url("fonts/fontawesome/fa-light-300.woff2") format("woff2"), url("fonts/fontawesome/fa-light-300.ttf") format("truetype");
}

@font-face {
  font-family: "FontAwesome";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("fonts/fontawesome/fa-regular-400.woff2") format("woff2"), url("fonts/fontawesome/fa-regular-400.ttf") format("truetype");
}

@font-face {
  font-family: "FontAwesome";
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  src: url("fonts/fontawesome/fa-solid-900.woff2") format("woff2"), url("fonts/fontawesome/fa-solid-900.ttf") format("truetype");
}

@font-face {
  font-family: "Golos";
  font-display: swap;
  font-style: normal;
  font-weight: 100;
  src: url("fonts/golos/400.woff2") format("woff2");
}

@font-face {
  font-family: "Golos";
  font-display: swap;
  font-style: normal;
  font-weight: 200;
  src: url("fonts/golos/400.woff2") format("woff2");
}


@font-face {
  font-family: "Golos";
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url("fonts/golos/400.woff2") format("woff2");
}


@font-face {
  font-family: "Golos";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("fonts/golos/400.woff2") format("woff2");
}


@font-face {
  font-family: "Golos";
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  src: url("fonts/golos/500.woff2") format("woff2");
}


@font-face {
  font-family: "Golos";
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: url("fonts/golos/600.woff2") format("woff2");
}


@font-face {
  font-family: "Golos";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("fonts/golos/700.woff2") format("woff2");
}


@font-face {
  font-family: "Golos";
  font-display: swap;
  font-style: normal;
  font-weight: 800;
  src: url("fonts/golos/800.woff2") format("woff2");
}


@font-face {
  font-family: "Golos";
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  src: url("fonts/golos/900.woff2") format("woff2");
}


/* --- Geist ---------------------------------------------------------
   Hausschrift seit 29.07.2026, gesetzt ueber --font-headlines und
   --font-fliesstext. Liegt lokal unter assets/css/fonts/geist/ und
   wird NICHT mehr von api.brenner-medien.de geladen, damit das
   Rendering nicht an einem fremden Host haengt. */
@font-face {
  font-family: "Geist";
  font-display: swap;
  font-style: normal;
  font-weight: 100;
  src: url("fonts/geist/geist-100.woff2") format("woff2");
}


@font-face {
  font-family: "Geist";
  font-display: swap;
  font-style: normal;
  font-weight: 200;
  src: url("fonts/geist/geist-200.woff2") format("woff2");
}


@font-face {
  font-family: "Geist";
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url("fonts/geist/geist-300.woff2") format("woff2");
}


@font-face {
  font-family: "Geist";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("fonts/geist/geist-400.woff2") format("woff2");
}


@font-face {
  font-family: "Geist";
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  src: url("fonts/geist/geist-500.woff2") format("woff2");
}


@font-face {
  font-family: "Geist";
  font-display: swap;
  font-style: normal;
  font-weight: 600;
  src: url("fonts/geist/geist-600.woff2") format("woff2");
}


@font-face {
  font-family: "Geist";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("fonts/geist/geist-700.woff2") format("woff2");
}


@font-face {
  font-family: "Geist";
  font-display: swap;
  font-style: normal;
  font-weight: 800;
  src: url("fonts/geist/geist-800.woff2") format("woff2");
}


@font-face {
  font-family: "Geist";
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  src: url("fonts/geist/geist-900.woff2") format("woff2");
}


/*
  ======================================================================
    Josh's Custom CSS Reset
    https://www.joshwcomeau.com/css/custom-css-reset/
  ======================================================================
  */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    /* line-height: 1.5; */
    line-height: calc(1em + 0.5rem);
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
}

/* * {
    word-wrap:break-word;
  }
  */
#root,
#__next {
    isolation: isolate;
}

ol,
ul {
    list-style: none;
}
/* === Nudge override === keep out of flow until visible */
.demo-success-nudge {
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}
.demo-success-nudge.visible {
    display: block !important;
}

/* === Hero animation iframe === aspect 16/11 matches inner .frame */
.hero-anim {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}
.hero-anim iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
}
.hero-anim-link {
    position: absolute;
    inset: 0;
    z-index: 10;
}
.wrapper_img-screen {
    align-items: flex-start !important;
}
.wrapper_img-screen .hero-anim {
    transform: none !important;
    perspective: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 5rem auto 0 !important;
    max-width: 700px;
    align-self: flex-start;
}
.wrapper_img-screen .hero-anim iframe {
    transform: none !important;
    box-shadow: none !important;
}

/* Hinweis "Neue Stimmen im Generator" — Banner (uebernommen von ansagen.ai 2026-06-12) */
.hinweis-generator { position: relative; margin: 0; border-radius: var(--radius-md); padding: 2px; overflow: hidden; isolation: isolate; box-shadow: none; }
.hinweis-generator::before { content: ""; position: absolute; width: 230%; aspect-ratio: 1; left: 50%; top: 50%; z-index: 0; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, var(--main-light) 0deg, var(--main-light) 250deg, #7fd3ff 305deg, #ffffff 325deg, #7fd3ff 345deg, var(--main-light) 360deg); animation: hinweis-glow-rotate 4s linear infinite; }
@keyframes hinweis-glow-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hinweis-generator::before { animation: none; } }
.hinweis-generator-inner { position: relative; z-index: 1; background: #fff; border-radius: var(--radius-md); padding: 1.4rem 1.75rem 1.2rem 1.75rem; }
.hinweis-generator-badge { display: inline-block; margin-bottom: 0.6rem; padding: 0.18rem 0.78rem; font-size: 0.72rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #fff; background: var(--main-light); border-radius: var(--radius-pill); }
.hinweis-neu-inline { display: inline-block; padding: 0.08rem 0.5rem; margin: 0 0.12rem; font-size: 0.72rem; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #fff; background: var(--main-light); border-radius: var(--radius-pill); vertical-align: 0.06em; line-height: 1.5; }
.hinweis-generator-lead { margin: 0 !important; color: var(--main-dark); font-size: 1.06rem; line-height: 1.55; }
.hinweis-generator-lead strong { color: var(--main-dark); }
.hinweis-generator-sub { margin: 0.45rem 0 0 0; color: var(--main-dark); font-size: 0.92rem; line-height: 1.45; opacity: 0.85; }
.hinweis-generator-sub a { color: var(--main-light); font-weight: 600; text-decoration: underline !important; border-bottom: 0 !important; }
.hinweis-generator-sub a:hover { color: var(--main-dark); text-decoration: underline !important; border-bottom: 0 !important; }
.hinweis-generator-lead a { color: var(--main-cta) !important; font-weight: 600; text-decoration: underline !important; border-bottom: 0 !important; white-space: nowrap; }
.hinweis-generator-lead a:hover { color: var(--main-dark) !important; text-decoration: underline !important; border-bottom: 0 !important; }


/*///////////////////////////////////////////////////////////
  Ansagetexte /beispiele — Sprint 1, 27.07.2026
  Karten-Layout fuer Ansagetexte inkl. Kopier-Button.
  Loest das alte 2-Spalten-Grid der Mustertexte-Seite ab.
///////////////////////////////////////////////////////////*/

.wrapper__mustertexte:has(.kategorie) {
    display: block;
    grid-template-areas: none;
    grid-template-columns: none;
}

.wrapper__mustertexte-navigation .anzahl {
    opacity: 0.65;
    font-size: calc(var(--font-size) - 0.2rem);
    margin-left: 0.25rem;
}

.kategorie {
    margin: 0 0 3.5rem 0;
}

.wrapper__mustertexte .kategorie h2 {
    text-align: left;
    padding-right: 0;
    margin: 0 0 0.5rem 0;
    color: var(--main-dark);
    scroll-margin-top: 8rem;
}

.kategorie h2 .anzahl {
    color: var(--main-light);
    font-weight: 300;
    font-size: calc(var(--font-size) + 0.1rem);
    margin-left: 0.5rem;
    white-space: nowrap;
}

.kategorie-intro {
    max-width: 62ch;
    margin: 0 0 1.75rem 0;
}

.ansagetext {
    background-color: #FFF;
    border: 1px solid hsl(196, 21%, 90%);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1rem 0;
}

.ansagetext h3 {
    margin: 0 0 0.5rem 0;
    font-size: calc(var(--font-size) + 0.05rem);
    color: var(--main-dark);
}

.ansagetext blockquote {
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 3px solid var(--main-light);
}

.ansagetext blockquote p {
    margin: 0;
    color: var(--fliesstext);
}

.ansagetext-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 0 0;
}

.ansagetext-meta .dauer {
    color: var(--main-light);
    font-size: calc(var(--font-size) - 0.15rem);
    margin-right: auto;
}

.ansagetext-meta .btn-copy,
.ansagetext-meta .btn-gen {
    display: inline-block;
    font-family: inherit;
    font-size: calc(var(--font-size) - 0.1rem);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

.ansagetext-meta .btn-copy {
    background-color: transparent;
    border: 1px solid var(--main-light);
    color: var(--main-dark);
}

.ansagetext-meta .btn-copy:hover,
.ansagetext-meta .btn-copy:focus-visible {
    background-color: var(--main-dark);
    border-color: var(--main-dark);
    color: #FFF;
}

.ansagetext-meta .btn-gen {
    background-color: var(--main-cta);
    border: 1px solid var(--main-cta);
    color: #FFF;
}

.ansagetext-meta .btn-gen:hover,
.ansagetext-meta .btn-gen:focus-visible {
    background-color: #FFF;
    color: var(--main-cta);
}

@media only screen and (max-width: 640px) {
    .ansagetext {
        padding: 1rem;
    }

    .ansagetext-meta .dauer {
        width: 100%;
        margin-right: 0;
    }

    .ansagetext-meta .btn-copy,
    .ansagetext-meta .btn-gen {
        flex: 1 1 auto;
        text-align: center;
    }
}


/*═══════════════════════════════════════════════════════════════════
  REDESIGN v2 — 28.07.2026
  Light · Navy/Teal · große leichte Typo · viel Weißraum · weiche Karten
  Überschreibt bewusst deutlich. Struktur/HTML bleibt unverändert.
═══════════════════════════════════════════════════════════════════*/

:root {
    /* ── Flächen: warmes Off-White statt kaltem Grau ── */
    --v2-bg:            #FBFCFD;
    --v2-surface:       #FFFFFF;
    --v2-tint:          #F2F6F8;
    --v2-tint-deep:     #E8EFF3;

    /* ── Navy: tiefer und satter als bisher ── */
    --v2-navy:          #0F2E3D;
    --v2-navy-soft:     #2A5468;
    --v2-navy-muted:    #6A8A9B;

    /* ── Teal: klarer Akzent ── */
    --v2-teal:          #0E9AA0;
    --v2-teal-deep:     #077C82;
    --v2-teal-tint:     #E6F6F7;

    /* ── Signal ── */
    --v2-cta:           #EF233C;

    --v2-r:      18px;
    --v2-r-lg:   28px;
    --v2-r-pill: 999px;

    /*════════ CRAFT-TOKENS (Runde 3, 29.07.2026) ════════════════════
      Mikrotypografie-Lastenheft. Die Werte oben bleiben unangetastet,
      die folgenden ergaenzen sie um Skala, Tracking und Zahlensatz.
    ─────────────────────────────────────────────────────────────────*/

    /* Typografie-Skala, Ratio 1,25 ------------------------------- */
    --font-size-caption: 13px;
    --font-size-body:    16px;
    --font-size-h3:      18px;   /* EIN Wert statt 11,52-18,72px    */
    --font-size-h2:      32px;   /* sichtbar unter H1, ueber H3     */
    --font-size-h1:      44px;   /* Unterseiten: von 56,32px runter */

    --line-height-display: 1.2;  /* H1/H2, ersetzt 1,07-1,11x       */
    --line-height-body:    1.5;  /* unveraendert - Schutzliste      */

    /* Versalien-Tracking: EINE em-basierte Regel ------------------
       Ersetzt 0,2752px (Nav) / 0,8704px (Badge) / 3,2px (CTA).
       em skaliert mit der font-size, Pixelwerte tun das nicht.    */
    --tracking-caps: 0.04em;
    /* Zweite Stufe fuer grosse Versalien-Zeilen (Slogans ab ~24px):
       weitere Laufweite ist dort typografisch richtig, folgt aber
       derselben em-Logik statt einem absoluten rem-Wert. */
    --tracking-caps-display: 0.08em;

    /* Radius-Skala: genau drei Werte ------------------------------ */
    --radius-sm:   8px;    /* Inputs, kleine Badges, Tags           */
    --radius-md:   16px;   /* Karten                                */
    --radius-pill: 999px;  /* nur Pill-Buttons und -Badges          */

    /* Textfarben: 5 Stufen. Bewusst identisch mit den v2-Tokens,
       damit kein zweites, konkurrierendes System entsteht.        */
    --text-heading:    #0F2E3D;  /* rgb(15,46,61)   H1/H2          */
    --text-subheading: #2A5468;  /* rgb(42,84,104)  H3-Ebene       */
    --text-body:       #34515F;  /* rgb(52,81,95)   Fliesstext     */
    --text-meta:       #6A8A9B;  /* rgb(106,138,155) Sekundaerinfo */
    --text-accent:     #077C82;  /* rgb(7,124,130)  Akzent-Teal    */

    /* Abstands-Rhythmus auf 8px-Basis ----------------------------- */
    --space-1: 8px;
    --space-2: 16px;   /* ersetzt den 12px-Ausreisser              */
    --space-4: 32px;
    --space-6: 48px;
    --space-9: 72px;

    --v2-sh-sm: 0 1px 2px rgba(15, 46, 61, .04), 0 4px 12px rgba(15, 46, 61, .05);
    --v2-sh:    0 2px 4px rgba(15, 46, 61, .04), 0 12px 32px rgba(15, 46, 61, .08);
    --v2-sh-lg: 0 6px 12px rgba(15, 46, 61, .06), 0 28px 64px rgba(15, 46, 61, .12);

    /* Bestehende Tokens umlenken, damit Altbestand mitzieht */
    --main-dark:   var(--v2-navy);
    --main-light:  var(--v2-navy-muted);
    --fliesstext:  #234050;
    --font-size:   1.05rem;
}

body {
    background-color: var(--v2-bg);
    color: var(--fliesstext);
}

/*──────────────────────── Typografie: der Hauptschalter ─────────────*/

/* Craft-Runde 3: H1 von max. 4,1rem (56,3px gemessen) auf 44px.
   Line-Height 1,06 -> 1,2, damit zweizeilige H1 atmen statt zu kleben. */
h1 {
    font-size: clamp(2rem, 3.4vw, var(--font-size-h1)) !important;
    font-weight: 200 !important;
    letter-spacing: -0.03em;
    line-height: var(--line-height-display);
    color: var(--text-heading);
    margin-bottom: 1.5rem;
}

h1 strong {
    font-weight: 600;
    color: var(--v2-navy);
}

/* Craft-Runde 3: H2 auf 32px gedeckelt. Abstand zur H1 damit 12px
   (44 vs. 32) - deutlich ueber der geforderten Mindestdifferenz. */
h2 {
    font-size: clamp(1.5rem, 2.4vw, var(--font-size-h2)) !important;
    font-weight: 200 !important;
    letter-spacing: -0.022em;
    line-height: var(--line-height-display);
    color: var(--text-heading);
    margin-top: 4.5rem;
    margin-bottom: 1.75rem;
}

h2 strong { font-weight: 600; }

/* Craft-Runde 3: EIN fester H3-Wert (18px) statt einer Formel, die
   je nach --font-size zwischen 17,92 und 18,72px schwankte. */
h3 {
    font-size: var(--font-size-h3) !important;
    font-weight: 600 !important;
    letter-spacing: -0.012em;
    color: var(--text-subheading);
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

p, li { line-height: 1.72; }

.section > p:first-of-type {
    font-size: calc(var(--font-size) + 0.16rem);
    line-height: 1.62;
    color: var(--v2-navy-soft);
}

.section > p,
.kategorie-intro { max-width: 70ch; }

a { color: var(--v2-teal-deep); }
a:hover { color: var(--v2-teal); }

/*──────────────────────── Rhythmus: Weißraum ────────────────────────*/

.section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.section.bg-gray100,
.section.bg-gray300 {
    background-color: var(--v2-tint);
    background-image: none;
}

/* Erste Section einer Seite = Hero mit Verlauf */
.section:first-of-type {
    background: linear-gradient(168deg, #FFFFFF 0%, var(--v2-teal-tint) 55%, var(--v2-tint) 100%);
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

/*──────────────────────────── Karten ────────────────────────────────*/

.contentbox_text {
    background-color: var(--v2-surface);
    border: 1px solid rgba(15, 46, 61, .07);
    border-radius: var(--radius-md);
    box-shadow: var(--v2-sh-sm);
    padding: 2rem 2rem 1.5rem 2rem;
    transition: box-shadow .25s cubic-bezier(.2,.7,.3,1),
                transform .25s cubic-bezier(.2,.7,.3,1),
                border-color .25s ease;
}

.grid-2 > .contentbox_text:hover,
.grid-3 > .contentbox_text:hover {
    box-shadow: var(--v2-sh);
    transform: translateY(-4px);
    border-color: rgba(14, 154, 160, .28);
}

/* Icons in Karten bekommen einen Teal-Kreis */
.contentbox_text > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    background-color: var(--v2-teal-tint);
    color: var(--v2-teal-deep) !important;
    margin-bottom: 0.75rem;
}

.grid-3 { grid-gap: 1.75rem; }
.grid-2 { grid-column-gap: 2.5rem; grid-row-gap: 1.75rem; }

/*──────────────────────────── Buttons ───────────────────────────────*/

.cto {
    background-color: var(--v2-cta);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.95rem 2.1rem;
    font-weight: 600;
    font-size: calc(var(--font-size) + 0.02rem);
    letter-spacing: 0.002em;
    color: #FFF;
    box-shadow: 0 3px 10px rgba(239, 35, 60, .26);
    transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}

.cto:hover,
.cto:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(239, 35, 60, .34);
    color: #FFF;
}

.cto:active { transform: translateY(0); }

.cto.secondary {
    background-color: transparent;
    color: var(--v2-navy);
    border: 1.5px solid rgba(15, 46, 61, .18);
    box-shadow: none;
}

.cto.secondary:hover {
    background-color: var(--v2-navy);
    border-color: var(--v2-navy);
    color: #FFF;
    box-shadow: var(--v2-sh-sm);
}

/*──────────────────────── Ansagetext-Karten ─────────────────────────*/

.ansagetext {
    background-color: var(--v2-surface);
    border: 1px solid rgba(15, 46, 61, .07);
    border-radius: var(--radius-md);
    box-shadow: var(--v2-sh-sm);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.ansagetext:hover {
    box-shadow: var(--v2-sh);
    transform: translateY(-3px);
    border-color: rgba(14, 154, 160, .3);
}

.ansagetext blockquote {
    border-left: 3px solid var(--v2-teal);
    background: var(--v2-teal-tint);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 0 0;
}

.ansagetext blockquote p {
    color: var(--v2-navy);
    font-size: calc(var(--font-size) + 0.05rem);
    line-height: 1.62;
    margin: 0;
}

.ansagetext-meta { margin-top: 1.25rem; }

.ansagetext-meta .dauer {
    color: var(--v2-navy-muted);
    font-size: calc(var(--font-size) - 0.18rem);
}

.ansagetext-meta .btn-copy {
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(15, 46, 61, .16);
    background: transparent;
    color: var(--v2-navy);
    padding: 0.5rem 1.15rem;
    font-weight: 500;
    transition: all .2s ease;
}

.ansagetext-meta .btn-copy:hover {
    background-color: var(--v2-navy);
    border-color: var(--v2-navy);
    color: #FFF;
}

.ansagetext-meta .btn-gen {
    border-radius: var(--radius-pill);
    background-color: var(--v2-teal);
    border: 1.5px solid var(--v2-teal);
    color: #FFF;
    padding: 0.5rem 1.15rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(14, 154, 160, .25);
    transition: all .2s ease;
}

.ansagetext-meta .btn-gen:hover {
    background-color: var(--v2-teal-deep);
    border-color: var(--v2-teal-deep);
    color: #FFF;
    transform: translateY(-1px);
}

/*───────────────────── Sprungmarken-Navigation ──────────────────────*/

.wrapper__mustertexte-navigation { margin-top: 0.5rem; }

.wrapper__mustertexte-navigation a {
    border: 1.5px solid rgba(15, 46, 61, .12);
    border-radius: var(--radius-pill);
    background-color: var(--v2-surface);
    color: var(--v2-navy);
    padding: 0.55rem 1.1rem;
    margin: 0 0.6rem 0.7rem 0;
    font-weight: 500;
    box-shadow: var(--v2-sh-sm);
    transition: all .2s cubic-bezier(.2,.7,.3,1);
}

.wrapper__mustertexte-navigation a:hover {
    background-color: var(--v2-teal);
    border-color: var(--v2-teal);
    color: #FFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 154, 160, .3);
}

.wrapper__mustertexte-navigation .anzahl {
    color: var(--v2-navy-muted);
    font-weight: 400;
}

.wrapper__mustertexte-navigation a:hover .anzahl {
    color: rgba(255, 255, 255, .8);
}

.kategorie h2 .anzahl {
    color: var(--v2-teal-deep);
    font-weight: 400;
    font-size: calc(var(--font-size) + 0.1rem);
}

/*──────────────────────────── Tabellen ──────────────────────────────*/

.preistabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.preistabelle caption {
    caption-side: bottom;
    text-align: left;
    padding-top: 1rem;
    color: var(--v2-navy-muted);
}

.preistabelle th,
.preistabelle td {
    padding: 1rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid rgba(15, 46, 61, .08);
    vertical-align: top;
}

.preistabelle thead th {
    background-color: var(--v2-navy);
    color: #FFF;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: none;
}

.preistabelle thead tr th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.preistabelle thead tr th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

.preistabelle tbody th[scope="row"] {
    font-weight: 600;
    color: var(--v2-navy);
}

.preistabelle tbody tr:nth-child(even) { background-color: var(--v2-bg); }
.preistabelle tbody tr:hover td,
.preistabelle tbody tr:hover th { background-color: var(--v2-teal-tint); }

.preistabelle tbody tr:last-child th,
.preistabelle tbody tr:last-child td { border-bottom: none; }

.contentbox_text:has(> .preistabelle) { overflow-x: auto; }

/*────────────────────────────── FAQ ─────────────────────────────────*/

.faq__wrapper--frage {
    border: 1px solid rgba(15, 46, 61, .08);
    border-radius: var(--radius-md);
    background-color: var(--v2-surface);
    margin-bottom: 0.75rem;
    box-shadow: var(--v2-sh-sm);
    transition: all .22s ease;
}

.faq__wrapper--frage:hover { border-color: rgba(14, 154, 160, .3); }

.faq__wrapper--frage.active {
    border-color: var(--v2-teal);
    box-shadow: var(--v2-sh);
}

.faq-frage {
    padding: 1.15rem 1.5rem;
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    color: var(--v2-navy);
    font-size: calc(var(--font-size) + 0.04rem);
}

.faq__wrapper--antwort .faq-antwort {
    padding: 0 1.5rem 1.25rem 1.5rem;
    margin: 0;
}

/*──────────────────────────── Listen ────────────────────────────────*/

ul.liste-plus { padding-left: 0; list-style: none; }

ul.liste-plus > li {
    padding-bottom: 1rem;
    padding-left: 1.9rem;
    position: relative;
}

ul.liste-plus > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--radius-pill);
    background-color: var(--v2-teal-tint);
    box-shadow: inset 0 0 0 1.5px var(--v2-teal);
}

ul.liste-plus > li strong { color: var(--v2-navy); }

/*─────────────────────── Verwandte Themen ───────────────────────────*/

#verwandt ul.liste-plus { columns: 2; column-gap: 3rem; }
#verwandt ul.liste-plus > li { break-inside: avoid; padding-bottom: 0.7rem; }

/*─────────────────── Werkzeuge: Rechner / Konverter ─────────────────*/

.sz-textarea {
    width: 100%;
    padding: 1.1rem 1.25rem;
    border: 1.5px solid rgba(15, 46, 61, .14);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size);
    line-height: 1.65;
    resize: vertical;
    background-color: var(--v2-surface);
    color: var(--fliesstext);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sz-textarea:focus,
.ak-select:focus,
.ak-file:focus {
    outline: none;
    border-color: var(--v2-teal);
    box-shadow: 0 0 0 4px var(--v2-teal-tint);
}

.sz-ergebnis {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.sz-wert {
    flex: 1 1 9rem;
    background-color: var(--v2-tint);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sz-wert > span:first-child {
    font-size: calc(var(--font-size) + 1.35rem);
    font-weight: 200;
    color: var(--v2-navy);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.sz-wert--haupt {
    background: linear-gradient(140deg, var(--v2-teal-tint), #FFFFFF);
    box-shadow: inset 0 0 0 1.5px rgba(14, 154, 160, .35);
}

.sz-wert--haupt > span:first-child {
    color: var(--v2-teal-deep);
    font-weight: 300;
}

.sz-label {
    font-size: calc(var(--font-size) - 0.22rem);
    color: var(--v2-navy-muted);
}

.ak-select,
.ak-file {
    padding: 0.8rem 1rem;
    border: 1.5px solid rgba(15, 46, 61, .14);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size);
    background-color: var(--v2-surface);
    max-width: 100%;
    color: var(--fliesstext);
}

/*──────────────────────────── Fokus (A11y) ──────────────────────────*/

a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
    outline: 2.5px solid var(--v2-teal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/*────────────────────── CLS: Flächen reservieren ────────────────────*/

img, iframe, video { max-width: 100%; }

.hero-anim {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--v2-sh-lg) !important;
}

.hero-anim iframe { width: 100%; height: 100%; border: 0; display: block; }

/*──────────────────────────── Responsive ────────────────────────────*/

@media only screen and (max-width: 900px) {
    .grid-3 { grid-template-columns: 1fr 1fr; grid-gap: 1.25rem; }
    #verwandt ul.liste-plus { columns: 1; }
    h2 { margin-top: 3rem; }
}

@media only screen and (max-width: 640px) {
    :root { --font-size: 1rem; }

    .section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .section:first-of-type { padding-top: 3rem; padding-bottom: 3rem; }

    h1 { font-size: clamp(2rem, 8.5vw, 2.6rem) !important; }
    h2 { font-size: clamp(1.45rem, 6vw, 1.9rem) !important; margin-top: 2.5rem; }

    .grid-3, .grid-2 { grid-template-columns: 1fr; grid-gap: 1rem; }

    .contentbox_text { padding: 1.5rem 1.35rem 1rem 1.35rem; }
    .ansagetext { padding: 1.25rem 1.15rem; }

    .preistabelle th, .preistabelle td { padding: 0.75rem 0.7rem; }

    .sz-wert { flex: 1 1 100%; }

    /* Tap-Targets */
    .cto,
    .ansagetext-meta .btn-copy,
    .ansagetext-meta .btn-gen,
    .wrapper__mustertexte-navigation a {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ansagetext-meta .btn-copy,
    .ansagetext-meta .btn-gen { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/*──────────────────── Themen-Übersicht im Footer ────────────────────*/

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.themen-footer {
    background-color: var(--v2-navy);
    padding-top: 3.5rem;
    padding-bottom: 3rem;
}

.themen-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2.5rem;
    width: 100%;
}

.themen-spalte h3 {
    color: #FFFFFF !important;
    font-size: calc(var(--font-size) - 0.02rem) !important;
    font-weight: 600 !important;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.themen-spalte h3 a { color: #FFFFFF; text-decoration: none; }
.themen-spalte h3 a:hover { color: var(--v2-teal); }

.themen-spalte ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.themen-spalte li { margin-bottom: 0.55rem; }

.themen-spalte a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: calc(var(--font-size) - 0.12rem);
    line-height: 1.5;
    transition: color .18s ease;
}

.themen-spalte a:hover,
.themen-spalte a:focus-visible {
    color: var(--v2-teal);
}

@media only screen and (max-width: 1100px) {
    .themen-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

@media only screen and (max-width: 700px) {
    .themen-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .themen-footer { padding-top: 2.5rem; padding-bottom: 2rem; }
}

@media only screen and (max-width: 420px) {
    .themen-grid { grid-template-columns: 1fr; }
}

/*──────────────────── Korrekturen nach Sichtprüfung ─────────────────*/

/* Links im Fließtext: Teal statt Rot — Rot bleibt dem CTA vorbehalten */
.section p a:not(.cto):not(.btn-gen):not(.btn-copy),
.section li a:not(.cto):not(.btn-gen):not(.btn-copy),
.faq-antwort a,
.kategorie-intro a {
    color: var(--v2-teal-deep) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(14, 154, 160, .32);
    transition: border-color .18s ease, color .18s ease;
}

.section p a:not(.cto):not(.btn-gen):not(.btn-copy):hover,
.section li a:not(.cto):not(.btn-gen):not(.btn-copy):hover,
.faq-antwort a:hover,
.kategorie-intro a:hover {
    color: var(--v2-teal) !important;
    border-bottom-color: var(--v2-teal);
}

/* Hero-Verlauf nur auf echte Inhalts-Sections anwenden,
   nicht auf Header-/Hinweis-Wrapper darüber */
.section:first-of-type { background: none; padding-top: 3.5rem; }

main .section:first-of-type,
[role="content"].section:first-of-type {
    background: linear-gradient(168deg, #FFFFFF 0%, var(--v2-teal-tint) 58%, var(--v2-tint) 100%);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Aktiver Menuepunkt: nur die Menue-Links, nicht der Fliesstext.
   Die generische a-Regel oben hatte auch Header-Links unterstrichen. */
#main_menu li.current > a,
#main_menu li.active > a,
.menu li.current > a,
.menu li.active > a {
    background-color: transparent !important;
    color: var(--v2-teal-deep) !important;
    box-shadow: inset 0 -2px 0 var(--v2-teal);
}

/* Header-/Menue-Links bekommen KEINEN Fliesstext-Unterstrich */
#main_menu a,
.menu a,
.themen-spalte a,
.login a,
.help a,
[role="footer"] a {
    border-bottom: none !important;
}

/* Verwandte Themen: schlichte Pfeile statt geerbter Grafik-Icons */
#verwandt ul.liste-plus > li::before {
    content: "→";
    background: none;
    box-shadow: none;
    color: var(--v2-teal);
    font-size: calc(var(--font-size) + 0.05rem);
    line-height: 1;
    top: 0.42em;
    width: auto;
    height: auto;
}

#verwandt ul.liste-plus > li > i,
#verwandt ul.liste-plus > li::marker { display: none; }

#verwandt ul.liste-plus > li { padding-left: 1.6rem; }

#verwandt ul.liste-plus a {
    border-bottom: none !important;
    font-weight: 500;
}

/*═══════════════════════════════════════════════════════════════════
  MOBILE-FIX — 28.07.2026
  Das Bestands-CSS nutzt durchgängig `max-device-width`, das moderne
  Browser nicht mehr wie erwartet auswerten. Dadurch blieb --site-width
  auf 1400px, und Inhalte liefen auf dem Handy aus dem Bild.
  Hier die korrekten Breakpoints mit `max-width`.
═══════════════════════════════════════════════════════════════════*/

@media only screen and (max-width: 1450px) {
    :root { --site-width: 92vw; }
}

@media only screen and (max-width: 1024px) {
    :root { --site-width: 92vw; }

    .section {
        padding-left: 4vw;
        padding-right: 4vw;
    }
}

@media only screen and (max-width: 780px) {
    :root { --site-width: 100%; }

    .section {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Header: Logo und Menü untereinander statt überlappend */
    .section.top,
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .logo { max-width: 190px; }

    .help,
    .login { width: 100%; }

    .help p,
    .login span { font-size: calc(var(--font-size) - 0.12rem); }

    /* Nichts darf horizontal aus dem Bild laufen */
    html, body { overflow-x: hidden; }

    .wrapper__mustertexte,
    .kategorie,
    .ansagetext,
    .contentbox_text { max-width: 100%; }

    .ansagetext blockquote { padding: 0.85rem 1rem; }

    table { display: block; overflow-x: auto; max-width: 100%; }
}

@media only screen and (max-width: 480px) {
    h1 { font-size: clamp(1.85rem, 8vw, 2.3rem) !important; }
    h2 { font-size: clamp(1.35rem, 6vw, 1.75rem) !important; }

    .section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .wrapper__mustertexte-navigation a {
        font-size: calc(var(--font-size) - 0.14rem);
        padding: 0.5rem 0.85rem;
        margin: 0 0.4rem 0.5rem 0;
    }
}

/*──────────── Mobile-Fix Runde 2: Header-Grid und Überlauf ──────────*/

@media only screen and (max-width: 780px) {

    /* Header-Grid auf eine Spalte, damit Logo/Nav/Konto nicht überlappen */

    /* Die Info-/Kontozeile umbrechen statt nebeneinander quetschen */
    .section[role="head"] .help,
    .section[role="head"] .login,
    .help,
    .login {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        width: 100%;
        text-align: left;
    }

    .help p { margin: 0; }

    /* Elemente, die auf Desktop nebeneinander stehen, dürfen nicht überstehen */
    .section > *,
    .contentbox_text > * { min-width: 0; }

    .grid-2, .grid-3 { min-width: 0; }
}

/* Genereller Überlauf-Schutz (alle Breiten) */
.wrapper__mustertexte,
.kategorie,
.ansagetext,
.ansagetext blockquote,
.contentbox_text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

/*───────────── Mobile-Fix Runde 3: Flex-Overflow an der Wurzel ──────
  body ist ein Flex-Container. Flex-Kinder haben implizit min-width:auto
  und schrumpfen deshalb nicht unter ihre Inhaltsbreite — dadurch wird
  die ganze Seite breiter als der Viewport. Fix an der Wurzel.
──────────────────────────────────────────────────────────────────────*/

html { overflow-x: hidden; }

body {
    overflow-x: hidden;
    max-width: 100vw;
}

body > * { min-width: 0; max-width: 100%; }

#main_page_wrapper {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: clip;
}

#main_page_wrapper > .section,
.section {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Auch das Menü darf nicht überstehen, sondern umbricht */
.navigation,
.navigation ul,
.wrapper-nav {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
}

@media only screen and (max-width: 780px) {
    .navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 1rem;
        padding-left: 0;
    }
    .navigation li { white-space: nowrap; }
}

/*──────── Mobile-Menü: horizontal scrollbare Chips statt Textwand ───*/

@media only screen and (max-width: 780px) {
    .navigation ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0.5rem;
        padding: 0.25rem 0 0.6rem 0;
        margin: 0;
        list-style: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .navigation ul::-webkit-scrollbar { display: none; }

    .navigation li {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .navigation li > a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0.45rem 0.95rem;
        border: 1px solid rgba(15, 46, 61, .12);
        border-radius: var(--radius-pill);
        background-color: var(--v2-surface);
        color: var(--v2-navy) !important;
        font-size: calc(var(--font-size) - 0.16rem);
        box-shadow: none !important;
    }

    .navigation li.current > a,
    .navigation li.active > a {
        background-color: var(--v2-navy) !important;
        border-color: var(--v2-navy);
        color: #FFFFFF !important;
    }
}

/*──────────────────────────── Seitenbilder ──────────────────────────*/

.seitenbild { padding-top: 0; padding-bottom: 0; }

.seitenbild figure {
    margin: 0 0 1rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--v2-sh);
    line-height: 0;
}

.seitenbild img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

@media only screen and (max-width: 640px) {
    .seitenbild figure { border-radius: var(--radius-md); }
    .seitenbild img { aspect-ratio: 16 / 10; }
}


/*═══════════════════════════════════════════════════════════════════
  TYPOGRAFISCHER FEINSCHLIFF — 28.07.2026
  Kein Redesign. Präzisierung von Rhythmus, Hierarchie und Fluchten.
  Prinzip: weniger, aber genauer. Ruhe entsteht durch Disziplin.
═══════════════════════════════════════════════════════════════════*/

:root {
    /* Vertikale Skala (1.5-Schritte, optisch nachjustiert)
       Craft-Runde 3: --sp-2 von 0.75rem (12px) auf 1rem (16px) —
       12px war der einzige nicht-ganzzahlige 8px-Schritt (1,5×8)
       und brach den Rhythmus. Jetzt 2×8. */
    --sp-1:  0.5rem;
    --sp-2:  1rem;
    --sp-3:  1.25rem;
    --sp-4:  2rem;
    --sp-5:  3rem;
    --sp-6:  4.5rem;
    --sp-7:  6.5rem;

    /* Lesebreiten */
    --measure-lead: 60ch;   /* Introtext, etwas schmaler = ruhiger */
    --measure-body: 68ch;   /* Fließtext */
}

/*──────────────── 1. Kopfbereich entschlacken ───────────────────────
  Die leere pre-head-Section war 6rem hoch und bekam durch das
  globale Section-Padding zusätzlich Luft. Ergebnis: ~200px Leere
  über dem Logo. Sie dient nur als farbige Kante — also 0.5rem.
────────────────────────────────────────────────────────────────────*/

.section[role="pre-head"] {
    height: 0.5rem !important;
    min-height: 0;
    padding: 0 !important;
    border-top: none;
    background-color: var(--v2-navy);
}

.section[role="head"] {
    padding-top: var(--sp-4) !important;
    padding-bottom: var(--sp-4) !important;
}

/* Servicezeile: tertiär, also leiser */
.section-mein-konto,
.section[role="head"] + .section {
    padding-top: var(--sp-2) !important;
    padding-bottom: var(--sp-2) !important;
}

/*──────────────── 2. Navigation: Orientierung, kein Inhalt ──────────*/

.navigation li > a {
    font-size: calc(var(--font-size) - 0.19rem) !important;
    font-weight: 500 !important;
    letter-spacing: var(--tracking-caps);
    color: var(--v2-navy-soft) !important;
    box-shadow: none !important;
    padding-bottom: 0.3rem;
    transition: color .18s ease, box-shadow .18s ease;
}

.navigation li > a:hover {
    color: var(--v2-navy) !important;
    box-shadow: inset 0 -1.5px 0 var(--v2-teal) !important;
}

#main_menu li.current > a,
#main_menu li.active > a,
.menu li.current > a,
.menu li.active > a,
.navigation li.current > a,
.navigation li.active > a {
    color: var(--v2-navy) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 -1.5px 0 var(--v2-teal) !important;
    background-color: transparent !important;
}

/*──────────────── 3. Hinweisbox: tertiär, nicht dominant ────────────
  Der animierte Verlaufsrahmen über volle Breite zog mehr Blick als
  die H1. Schmaler, ruhiger, ohne Leuchtrand.
────────────────────────────────────────────────────────────────────*/

.hinweis-generator {
    border-radius: var(--radius-md) !important;
    padding: 0 !important;
    max-width: 62rem;
    margin: 0 0 var(--sp-2) 0 !important;
    background: var(--v2-teal-tint);
    box-shadow: none !important;
}

.hinweis-generator::before { display: none !important; }

.hinweis-generator-inner {
    background: transparent !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.85rem 1.15rem !important;
}

.hinweis-generator-lead {
    font-size: calc(var(--font-size) - 0.12rem) !important;
    line-height: 1.55;
    color: var(--v2-navy-soft);
    margin: 0;
}

.hinweis-generator-lead strong { color: var(--v2-navy); font-weight: 600; }

.hinweis-neu-inline {
    background-color: var(--v2-teal);
    color: #FFF;
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.5rem;
    font-size: 0.68rem;
    letter-spacing: var(--tracking-caps);
    font-weight: 600;
    vertical-align: 0.08em;
}

/*──────────────── 4. Vertikaler Rhythmus: gestaffelt ────────────────
  Vorher: alle Sections 3.5rem — mechanisch gleichmäßig.
  Jetzt: Hero großzügig, Folgeabschnitte gestaffelt.
────────────────────────────────────────────────────────────────────*/

.section {
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
}

main .section:first-of-type,
[role="content"].section:first-of-type {
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-5);
}

/* Getönte Bänder brauchen mehr Luft, sonst wirkt die Fläche gequetscht */
.section.bg-gray100,
.section.bg-gray300 {
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-6);
}

/* Zwei gleichfarbige Abschnitte hintereinander: Fuge schließen */
.section.bg-gray100 + .section.bg-gray100 { padding-top: 0; }

/*──────────────── 5. Überschriften: Sog nach oben ───────────────────
  Regel: mehr Abstand ÜBER einer Überschrift als darunter.
  So bindet sie sich an den folgenden Text, nicht an den vorherigen.
────────────────────────────────────────────────────────────────────*/

h1 {
    letter-spacing: -0.03em;
    line-height: var(--line-height-display);   /* Craft-R3: war 1.07 */
    margin-top: 0;
    margin-bottom: var(--sp-3);
    max-width: 20ch;              /* verhindert zu lange Headline-Zeilen */
    text-wrap: balance;           /* gleichmäßige Zeilenlängen */
}

h2 {
    letter-spacing: -0.024em;
    line-height: 1.18;
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-3);
    max-width: 26ch;
    text-wrap: balance;
}

/* Erste H2 einer Section braucht keinen zusätzlichen Vorlauf */
.section > h2:first-child,
.section > h2:first-of-type { margin-top: 0; }

h3 {
    letter-spacing: -0.006em;
    line-height: 1.32;
    margin-top: 0;
    margin-bottom: var(--sp-1);
    text-wrap: balance;
}

/*──────────────── 6. Fließtext: Lesebreite und Grauwert ─────────────*/

p, li { line-height: 1.7; }

.section > p { max-width: var(--measure-body); margin-bottom: var(--sp-3); }
.section > p:last-child { margin-bottom: 0; }

/* Introtext: größer, aber schmaler — das ist der Premium-Trick */
main .section:first-of-type > p:first-of-type,
[role="content"].section:first-of-type > p:first-of-type {
    font-size: calc(var(--font-size) + 0.2rem);
    line-height: 1.58;
    letter-spacing: -0.004em;
    max-width: var(--measure-lead);
    color: var(--v2-navy-soft);
}

.kategorie-intro {
    max-width: var(--measure-body);
    margin-bottom: var(--sp-4);
}

/* Text in Karten darf enger laufen — kürzere Zeilen, mehr Dichte */
.contentbox_text p { line-height: 1.62; max-width: none; }
.contentbox_text p:last-child { margin-bottom: 0; }

/*──────────────── 7. Karten: einheitliche Innenmaße ─────────────────*/

.contentbox_text {
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) - 0.5rem) var(--sp-4);
    border-radius: var(--radius-md);
}

.contentbox_text h3 { margin-bottom: var(--sp-1); }

.grid-3 { grid-gap: var(--sp-3); }
.grid-2 { grid-column-gap: var(--sp-4); grid-row-gap: var(--sp-3); }

/*──────────────── 8. Listen: optische Achse ─────────────────────────*/

ul.liste-plus > li {
    padding-bottom: var(--sp-2);
    padding-left: 1.75rem;
    line-height: 1.62;
}

ul.liste-plus > li:last-child { padding-bottom: 0; }

ul.liste-plus > li::before {
    width: 0.95rem;
    height: 0.95rem;
    top: 0.5em;
}

/*──────────────── 9. Ansagetext-Karten: ruhiger ─────────────────────*/

.ansagetext {
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
    border-radius: var(--radius-md);
}

/* Craft-R3: Versalien-Label, nicht dritte Hierarchieebene ->
   bewusst als Caption (13px). Die doppelte font-size-Angabe des
   Bestands ist mit entfernt. */
.ansagetext h3 {
    font-size: var(--font-size-caption) !important;
    letter-spacing: var(--tracking-caps);
    color: var(--text-meta) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
}

.ansagetext blockquote { margin: 0; padding: 0.9rem 1.15rem; }

.ansagetext-meta {
    margin-top: var(--sp-2);
    gap: var(--sp-2);
}

/*──────────────── 10. Buttons: optische statt mathematischer Mitte ──*/

.cto {
    padding: 0.9rem 1.9rem;
    font-size: calc(var(--font-size) - 0.04rem);
    letter-spacing: 0.045em;
    line-height: 1.2;
}

.ansagetext-meta .btn-copy,
.ansagetext-meta .btn-gen {
    font-size: calc(var(--font-size) - 0.2rem);
    letter-spacing: 0.02em;
    padding: 0.45rem 1.05rem;
}

/* Text unter dem CTA ist Meta-Information */
.div-center .small {
    font-size: calc(var(--font-size) - 0.2rem);
    color: var(--v2-navy-muted);
    margin-top: var(--sp-2);
}

/*──────────────── 11. Tabellen: Zahlen bündig ───────────────────────*/

.preistabelle {
    font-variant-numeric: tabular-nums;
    font-size: calc(var(--font-size) - 0.06rem);
}

.preistabelle th,
.preistabelle td { padding: 0.85rem 1rem; }

.preistabelle thead th {
    font-size: calc(var(--font-size) - 0.22rem);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-weight: 600;
}

/*──────────────── 12. FAQ: gleichmäßiger Takt ───────────────────────*/

.faq__wrapper--frage { margin-bottom: var(--sp-1); border-radius: var(--radius-sm); }
.faq-frage { padding: 1.05rem 1.35rem; line-height: 1.45; }
.faq__wrapper--antwort .faq-antwort { padding: 0 1.35rem 1.15rem 1.35rem; line-height: 1.68; }

/*──────────────── 13. Bilder: an die Textflucht binden ──────────────*/

.seitenbild { padding-top: 0; padding-bottom: 0; }
.seitenbild figure { margin: 0 0 var(--sp-2) 0; border-radius: var(--radius-md); }

/*──────────────── 14. Verwandte Themen: editorial statt Linkliste ───*/

#verwandt { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }

#verwandt h2 {
    font-size: calc(var(--font-size) - 0.1rem) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--v2-navy-muted) !important;
    margin-top: 0;
    margin-bottom: var(--sp-3);
    max-width: none;
}

#verwandt .contentbox_text {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-top: 1px solid rgba(15, 46, 61, .1);
    padding-top: var(--sp-3);
}

#verwandt ul.liste-plus > li { padding-bottom: var(--sp-2); padding-left: 1.4rem; }

#verwandt ul.liste-plus a {
    color: var(--v2-navy) !important;
    font-weight: 500;
}

#verwandt ul.liste-plus a:hover { color: var(--v2-teal-deep) !important; }

/*──────────────── 15. Footer: Komposition statt Liste ───────────────*/

.themen-footer {
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-5);
}

.themen-grid { gap: var(--sp-4) var(--sp-3); }

/* Craft-Runde 3: Footer-Spaltentitel sind semantisch H3, optisch aber
   Labels (Versalien + Unterstrich). Bewusst als Caption (13px)
   reklassifiziert statt auf 18px angehoben - sonst wuerde der Footer
   den Seiteninhalt optisch ueberholen. Tracking ueber das Caps-Token. */
.themen-spalte h3 {
    font-size: var(--font-size-caption) !important;
    letter-spacing: var(--tracking-caps);
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.themen-spalte li { margin-bottom: 0.4rem; }

.themen-spalte a {
    font-size: calc(var(--font-size) - 0.17rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, .66);
}

.themen-spalte a:hover { color: #FFFFFF; }

/* Abschluss-Footer ruhiger an den Themenblock anschließen */
.section.top[role="footer"] { padding-top: var(--sp-5); }
.section.middle[role="footer"] { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.section.bottom[role="footer"] {
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-4);
    font-size: calc(var(--font-size) - 0.16rem);
}

/*──────────────── 16. Mikrotypografie ───────────────────────────────*/

/* Zahlen in Fließtext und Preisen tabellarisch = ruhigeres Satzbild */
.preistabelle td,
.dauer,
.sz-wert > span:first-child { font-variant-numeric: tabular-nums; }

/* Keine Waisenwörter in Überschriften */
h1, h2, h3 { hyphens: none; }

/* Anführungszeichen im Blockquote nicht doppelt setzen */
.ansagetext blockquote p::before,
.ansagetext blockquote p::after { content: none; }

/*──────────────── 17. Mobile: Skala mitziehen ───────────────────────*/

@media only screen and (max-width: 780px) {
    :root {
        --sp-5: 2.25rem;
        --sp-6: 3rem;
        --sp-7: 4rem;
    }

    .section[role="head"] {
        padding-top: var(--sp-3) !important;
        padding-bottom: var(--sp-2) !important;
    }

    h1 { max-width: none; margin-bottom: var(--sp-3); }
    h2 { max-width: none; margin-top: var(--sp-5); }

    main .section:first-of-type > p:first-of-type,
    [role="content"].section:first-of-type > p:first-of-type {
        font-size: calc(var(--font-size) + 0.08rem);
        max-width: none;
    }

    .hinweis-generator { max-width: none; }
    .contentbox_text { padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-3); }
    .ansagetext { padding: var(--sp-3); }
}

/*═══════════════ FEINSCHLIFF RUNDE 2 — Satzbild und Fluchten ═══════*/

/*── H1-Umbruch: „KI-Tonstudio / für / Telefonansagen." war ein
     Ein-Wort-Zeilenbruch. 20ch war zu eng gerechnet. ──*/

h1 {
    max-width: 30ch;
    text-wrap: balance;
}

/* Auf sehr breiten Viewports die Headline nicht ausufern lassen */
@media only screen and (min-width: 1500px) {
    h1 { max-width: 26ch; }
}

/*── Hinweisbox: mehr Abstand zur H1, kein Umbruch der CTA-Zeile ──*/

.hinweis-generator {
    margin-bottom: var(--sp-4) !important;
    max-width: 58rem;
}

.hinweis-generator-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
}

.hinweis-generator-lead a {
    white-space: nowrap;
    font-weight: 600;
}

/*── Hero-Spalten auf gemeinsame Oberkante ──*/

.wrapper_img-screen,
.section[role="content"] .grid-2 > * { align-self: start; }

/*── Section-Übergänge: Bild direkt nach dem Intro braucht Luft,
     aber keinen vollen Section-Abstand ──*/

.seitenbild { margin-top: var(--sp-2); }

/*── Aufzählungen im Hero (Hörbeispiele) enger takten ──*/

.section .grid-2 + .grid-2 { margin-top: var(--sp-2); }

/*── Meta unter dem CTA: näher an den Button binden ──*/

.cto + br + .small,
.div-center .small { margin-top: var(--sp-1); }

/*── Optische Korrektur: Versalien-Labels wirken bei gleicher
     Schriftgröße größer als Gemischtsatz. Minimal verkleinern. ──*/

.themen-spalte h3,
.preistabelle thead th,
.ansagetext h3 { font-feature-settings: "kern" 1; }

/*── H1/H2: Umbruch im Markup steuern, nicht per display:block ──────
   display:block auf <strong> erzeugte einen Zeilenabstand-Sprung.
   Stattdessen: strong bleibt inline, der gewollte Umbruch wird im
   Text mit <br> gesetzt (siehe Artikel 10), und schmale Fuegewoerter
   werden per &nbsp; an das Folgewort gebunden.
────────────────────────────────────────────────────────────────────*/

/* Bestands-CSS setzt via strong::before automatisch einen Umbruch
   vor <strong> in H1/H2 — das bleibt so. Nicht ueberschreiben. */
h1 > strong, h2 > strong { display: inline; }

/* Headline-Breite so, dass die zweite Zeile (das <strong>) in einer
   Zeile Platz hat und Woerter nicht getrennt werden. */
h1 { max-width: none; overflow-wrap: normal; word-break: keep-all; }
h2 { max-width: 34ch; }

/* Hero mit zwei Spalten: Headline darf die Textspalte nutzen */
.section .grid-2 h1, .section .grid-2 h2 { max-width: none; }

/*── Headline-Größe an die Spaltenbreite binden ──────────────────────
   Im zweispaltigen Hero ist die Textspalte ~40 % der Seitenbreite.
   Bei clamp(...,5.2vw,...) passte „für Telefonansagen." nicht in eine
   Zeile — Ergebnis: „für" allein, dann Worttrennung. Die Headline
   skaliert dort jetzt mit der Spalte, nicht mit dem Viewport.
────────────────────────────────────────────────────────────────────*/

/* Craft-Runde 3: H1 und H2 teilten sich hier EINE Formel und waren
   dadurch auf der Startseite pixelgenau gleich gross (37,12px =
   37,12px) - der Kernbefund "keine Hierarchie". Jetzt getrennt. */
.grid-40-60 h1,
.section .grid-2 h1 {
    font-size: clamp(2rem, 2.9vw, var(--font-size-h1)) !important;
    line-height: var(--line-height-display);
    max-width: none;
}

.grid-40-60 h2,
.section .grid-2 h2 {
    font-size: clamp(1.5rem, 2.2vw, var(--font-size-h2)) !important;
    line-height: var(--line-height-display);
    max-width: none;
}

/* Einspaltige Seiten: gleiche Obergrenze, kein Sonderweg mehr */
.section:not(:has(.grid-40-60)):not(:has(.grid-2)) > h1 {
    font-size: clamp(2.2rem, 3.6vw, var(--font-size-h1)) !important;
}

/* Hero-Spalten auf gemeinsame Oberkante */
.grid-40-60 > * { align-self: start; }

/*── Seitenbilder: Höhe begrenzen ────────────────────────────────────
   Bei 1200px Seitenbreite wurde das 3:2-Bild ~800px hoch und schob
   den eigentlichen Inhalt aus dem ersten Bildschirm. Als redaktionelles
   Bild reicht ein flacheres Format.
────────────────────────────────────────────────────────────────────*/

.section.seitenbild figure img,
.seitenbild img {
    display: block;
    width: 100%;
    height: 400px !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center 42%;
}

@media only screen and (max-width: 900px) {
    .section.seitenbild figure img,
    .seitenbild img { height: 280px !important; }
}

@media only screen and (max-width: 640px) {
    .section.seitenbild figure img,
    .seitenbild img { height: 210px !important; }
}

/*── Button-Kontrast: Text auf Teal muss weiß sein ───────────────────
   Die geerbte .cto-Farbregel schlug auf .btn-gen durch (rot auf teal).
────────────────────────────────────────────────────────────────────*/

.ansagetext-meta .btn-gen,
.ansagetext-meta .btn-gen:link,
.ansagetext-meta .btn-gen:visited,
.ansagetext-meta .btn-gen:hover,
.ansagetext-meta .btn-gen:focus {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF;
}

.ansagetext-meta .btn-copy,
.ansagetext-meta .btn-copy:link,
.ansagetext-meta .btn-copy:visited {
    color: var(--v2-navy) !important;
    -webkit-text-fill-color: var(--v2-navy);
}

.ansagetext-meta .btn-copy:hover {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF;
}

/*── Meta unter dem CTA: gedämpft, nicht rot ─────────────────────────
   Der Text erbte die Farbe des darüberliegenden CTA-Blocks.
────────────────────────────────────────────────────────────────────*/

.div-center .small,
.div-center p.small {
    color: var(--v2-navy-muted) !important;
    -webkit-text-fill-color: var(--v2-navy-muted);
}

.div-center .small a {
    color: var(--v2-navy-soft) !important;
    -webkit-text-fill-color: var(--v2-navy-soft);
    border-bottom-color: rgba(42, 84, 104, .3) !important;
}

.div-center .small a:hover {
    color: var(--v2-teal-deep) !important;
    -webkit-text-fill-color: var(--v2-teal-deep);
}

/*── CTA-Block: Überschrift näher an den Abschnittsbeginn ────────────*/

.section.bg-gray100 > h2:first-of-type,
.section.bg-gray300 > h2:first-of-type { margin-top: 0; }

/* Der CTA-Abschnitt braucht oben weniger Vorlauf als ein Inhaltsblock */
.section.bg-gray100:has(.div-center) {
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
}

/*── Verwandte Themen: Abstand zum vorherigen Block straffen ─────────*/

#verwandt { padding-top: var(--sp-4); }

/*═══════════════════════════════════════════════════════════════════
  MOBILE — LETZTER BLOCK
  Muss ganz am Ende stehen: die Polish-Regeln oben nutzen teils
  !important ohne Media-Query und würden sonst gewinnen.
═══════════════════════════════════════════════════════════════════*/

@media only screen and (max-width: 900px) {

    html, body { overflow-x: hidden; max-width: 100vw; }

    #main_page_wrapper { max-width: 100vw; min-width: 0; overflow-x: clip; }

    .section {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }.nav-section .navigation,
    .section[role="head"] .navigation {
        grid-area: b;
        text-align: left !important;
        width: 100%;
        min-width: 0;
    }

    /* Service-/Kontozeile umbrechen statt quetschen */
    .section-mein-konto,
    .section[role="head"] + .section {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }

    .help, .login {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 0.75rem;
        width: 100%;
        min-width: 0;
        text-align: left;
        float: none !important;
        position: static !important;
    }

    .help p { margin: 0; }

    /* Menü als scrollbare Chips */
    .navigation ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
        padding: 0.15rem 0 0.5rem 0;
        margin: 0;
        list-style: none;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .navigation ul::-webkit-scrollbar { display: none; }
    .navigation li { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }

    .navigation li > a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0.4rem 0.9rem !important;
        border: 1px solid rgba(15, 46, 61, .12);
        border-radius: var(--radius-pill);
        background-color: #FFFFFF;
        color: var(--v2-navy) !important;
        font-size: 0.82rem !important;
        letter-spacing: var(--tracking-caps);
        box-shadow: none !important;
    }

    .navigation li.current > a,
    .navigation li.active > a {
        background-color: var(--v2-navy) !important;
        border-color: var(--v2-navy);
        color: #FFFFFF !important;
    }

    /* Typo mobil */
    h1 {
        font-size: clamp(1.85rem, 7.5vw, 2.4rem) !important;
        line-height: 1.14;
        max-width: none !important;
        margin-bottom: 1rem;
    }

    .grid-40-60 h1,
    .grid-40-60 h2 { font-size: clamp(1.85rem, 7.5vw, 2.4rem) !important; }

    h2 {
        font-size: clamp(1.4rem, 5.6vw, 1.85rem) !important;
        max-width: none !important;
        margin-top: 2.25rem;
        margin-bottom: 1rem;
    }

    .section > p,
    .kategorie-intro,
    main .section:first-of-type > p:first-of-type,
    [role="content"].section:first-of-type > p:first-of-type {
        max-width: none !important;
        font-size: 1rem !important;
    }

    /* Grids einspaltig, nichts läuft über */
    .grid-3, .grid-2, .grid-40-60 {
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        gap: 1rem;
    }

    .contentbox_text,
    .ansagetext,
    .wrapper__mustertexte,
    .kategorie { max-width: 100%; min-width: 0; overflow-wrap: break-word; }

    table { display: block; overflow-x: auto; max-width: 100%; }

    /* Tap-Targets */
    .cto,
    .ansagetext-meta .btn-copy,
    .ansagetext-meta .btn-gen {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ansagetext-meta { gap: 0.6rem; }
    .ansagetext-meta .btn-copy,
    .ansagetext-meta .btn-gen { flex: 1 1 auto; }

    .themen-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media only screen and (max-width: 440px) {
    .themen-grid { grid-template-columns: 1fr; }
    .section { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/*── Bestands-Mobilkonzept respektieren ──────────────────────────────
   Auf Mobil ist ein Burger-Menue vorgesehen: .section[role=head] ist
   display:none und wird nur mit .active eingeblendet; stattdessen
   laeuft ein fixierter head-mein-konto-Balken. Frueher gesetzte
   Regeln hatten den Header dauerhaft sichtbar gemacht -> Ueberlappung.
   Hier nur das Noetigste, ohne das Konzept anzutasten.
────────────────────────────────────────────────────────────────────*/

@media only screen and (max-width: 900px) {
    .section[role="head"]:not(.active) { display: none !important; }
    .section[role="head"].active { display: grid !important; }

    /* Menü im geöffneten Zustand: Chips-Optik zurücknehmen */
    .section[role="head"].active .navigation ul {
        display: block;
        overflow: visible;
    }

    .section[role="head"].active .navigation li > a {
        display: block;
        border: none;
        border-radius: 0;
        background: transparent;
        min-height: 0;
        padding: 0.25rem 0.75rem !important;
        font-size: calc(var(--font-size) - 0.05rem) !important;
    }
}

/*── Fixierte Kontozeile: Freiraum darunter schaffen ─────────────────
   Auf Mobil ist .section[role=head-mein-konto] position:fixed
   (Hoehe 3rem, top 0.5rem). Der erste Inhaltsblock lief darunter.
────────────────────────────────────────────────────────────────────*/

@media only screen and (max-width: 900px) {

    #main_page_wrapper { padding-top: 3.75rem; }

    .section[role="head-mein-konto"] {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        grid-template-columns: auto 1fr auto !important;
        gap: 0.5rem;
        align-items: center;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        font-size: 0.78rem !important;
        overflow: hidden;
    }

    /* Beratungstext auf schmalen Screens ausblenden — Nummer steht
       ohnehin im Inhalt und im Footer */
    .section[role="head-mein-konto"] .help { display: none !important; }

    .section[role="pre-head"] {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 0.5rem !important;
        z-index: 10;
    }

    /* Der erste Inhaltsabschnitt braucht keinen zusaetzlichen Vorlauf */
    main .section:first-of-type,
    [role="content"].section:first-of-type { padding-top: 1.5rem; }
}

@media only screen and (max-width: 520px) {
    .section[role="head-mein-konto"] { font-size: 0.72rem !important; }
    .section[role="head-mein-konto"] .reseller { display: none !important; }
}


/*═══════════════════════════════════════════════════════════════════
  SPRINT D0 — kritische Bugfixes (Lastenheft Abschnitt 5)
  Gemessen mit Playwright über die Breakpoint-Matrix, nicht geraten.

  BEFUND: Zwischen 481px und 900px war KEINE Navigation bedienbar und
  kein Logo sichtbar. Ursache: `.only-mobile`/`.no-mobile` werden nur
  in `@media (max-device-width: 480px)` umgeschaltet — das werten
  moderne Browser nicht mehr aus, und es deckt 481–900px ohnehin nicht
  ab. Der Header (`role="head"`) ist ab 900px `display:none`, der
  Burger, der ihn öffnet, war aber unsichtbar (0×0).
═══════════════════════════════════════════════════════════════════*/

@media only screen and (max-width: 900px) {
    /* Der Umschalter, der bisher an max-device-width hing */
    .no-mobile   { display: none  !important; }
    .only-mobile { display: block !important; }

    /* Burger sichtbar UND als Tap-Target nutzbar (WCAG 2.2: 44×44px,
       Lastenheft Abschnitt 6.3). Vorher gemessen: 16×24px. */
    i.menu.only-mobile {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: -10px -10px -10px 0;   /* Fläche wächst, Optik bleibt */
        cursor: pointer;
    }

    /* Logo auf Mobil: lag in .nav-section, die ab 900px ausgeblendet
       ist — dadurch war das Logo auf JEDER Breite <=900px unsichtbar.
       Das Logo in `.section.top` (logo_sticky) übernimmt. */
    .section.top .logo,
    .section.top .logo_sticky {
        display: flex !important;
        align-items: center;
    }

    .section.top .logo img,
    .section.top .logo_sticky img {
        display: block !important;
        max-height: 40px;      /* Lastenheft 5.1: max. 40px, zentriert */
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* Das Desktop-Logo (.no-mobile) bleibt aus, das Mobil-Logo an */
    .section.top .logo img.only-mobile,
    .section.top .logo_sticky img.only-mobile {
        display: block !important;
        max-height: 36px;
    }
}

/*── Sichtbare Fokus-Zustände, projektweit (Lastenheft 6.2) ─────────
   Bestand hatte an mehreren Stellen `outline:none` ohne Ersatz.
   `:focus-visible` statt `:focus`, damit Maus-Klicks keinen Ring
   erzeugen, Tastaturnavigation aber immer einen hat.
────────────────────────────────────────────────────────────────────*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
i.menu:focus-visible {
    outline: 2px solid var(--v2-teal, #0E9AA0) !important;
    outline-offset: 2px !important;
    box-shadow: none;
    border-radius: var(--radius-sm);
}

/* Auf dunklem Navy-Grund braucht der Ring einen hellen Ton (3:1) */
.section[role="head-mein-konto"] a:focus-visible,
.section[role="head-mein-konto"] button:focus-visible,
.themen-footer a:focus-visible,
[role="footer"] a:focus-visible {
    outline-color: #FFFFFF !important;
}

/*── Tap-Targets 44×44px (Lastenheft 6.3) ───────────────────────────
   Footer-Links (Impressum/Datenschutz/AGB) waren 16px hoch.
   Die klickbare Fläche wächst, die Schriftgröße bleibt.
────────────────────────────────────────────────────────────────────*/

[role="footer"] a,
.themen-footer a,
.footer-link {
    display: inline-block;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    min-height: 44px;
}

/* In dichten Link-Listen den Zeilenabstand mitziehen, damit die
   größeren Flächen sich nicht überlappen */
.themen-footer li,
[role="footer"] li { line-height: 1.35; }

/*── Logo auf schmalen Screens (<=520px) ────────────────────────────
   BEFUND (Playwright, 390px): Das Mobil-Logo (img.only-mobile) liegt
   im Container `.reseller`. Dieser wird ab 520px per
   `display:none` ausgeblendet (die "Reseller werden"-Zeile soll auf
   schmalen Screens weg) — dadurch verschwand das Logo gleich mit.
   Das Logo wird daher aus dieser Abhängigkeit gelöst: der Container
   bleibt sichtbar, nur seine Textinhalte werden ausgeblendet.
────────────────────────────────────────────────────────────────────*/

@media only screen and (max-width: 520px) {
    .section[role="head-mein-konto"] .reseller {
        display: flex !important;
        align-items: center;
    }

    /* Alles im Reseller-Block ausblenden ... */
    .section[role="head-mein-konto"] .reseller > * { display: none !important; }

    /* ... außer dem Logo-Link */
    .section[role="head-mein-konto"] .reseller > a:has(img.only-mobile),
    .section[role="head-mein-konto"] .reseller a img.only-mobile {
        display: block !important;
    }

    .section[role="head-mein-konto"] .reseller img.only-mobile {
        max-height: 26px;
        width: auto;
        height: auto;
    }
}

/* Das Grid der Kontozeile staucht das Logo auf 88x13px.
   Mindestbreite setzen, damit es lesbar bleibt (Lastenheft 5.1:
   sinnvolle, sichtbare Größe auf 390px). */
@media only screen and (max-width: 520px) {
    .section[role="head-mein-konto"] .reseller {
        min-width: 130px;
        flex: 0 0 auto;
    }
    .section[role="head-mein-konto"] .reseller img.only-mobile {
        min-width: 120px;
        max-height: 30px;
    }
}

/*═══════════════════════════════════════════════════════════════════
  SPRINT D3 — Rabatt-Badges (Lastenheft Abschnitt 8, /preise)
  Vorher: zwei völlig verschiedene Komponenten — "10% Rabatt" fast
  weiß mit blassem Text (Kontrast 3,42:1, AA verfehlt), "Über 50%"
  kräftiges Türkis. Jetzt EINE Badge-Familie, gleicher Radius, gleiche
  Innenabstände, gleiche Schriftgröße; die Hervorhebung läuft allein
  über die Kontraststärke.

  Alle Kontraste nachgerechnet:
    weich: #0F2E3D auf #E6F6F7  = 12,1:1  (AA)
    stark: #0F2E3D auf #24C0CC  =  6,4:1  (AA)
  Hinweis: Weiß auf #24C0CC — wie im Lastenheft 4.1 vorgeschlagen —
  ergibt nur 2,21:1 und verfehlt AA deutlich. Daher Navy statt Weiß.
═══════════════════════════════════════════════════════════════════*/

.contentbox_text.preis .rabatt {
    /* gemeinsame Formsprache für ALLE Rabatt-Stufen */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    text-align: center;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    min-width: 4.5rem;
}

.contentbox_text.preis .rabatt strong {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: block;
}

/* Regulärer Rabatt — ruhig, aber lesbar */
.contentbox_text.preis .rabatt--weich {
    background: var(--v2-teal-tint, #E6F6F7);
    color: var(--v2-navy, #0F2E3D);
}

/* Ab 50% — dieselbe Form, kräftig gefüllt */
.contentbox_text.preis .rabatt--stark {
    background: #24C0CC;
    color: var(--v2-navy, #0F2E3D);
}

/* Die Bestandsregel `.contentbox_text.preis.highlight .rabatt` setzt
   weissen Text auf #24C0CC — das sind nur 2,21:1 und verfehlt AA.
   Die Badge-Familie gilt auch im hervorgehobenen Paket. */
.contentbox_text.preis.highlight .rabatt,
.contentbox_text.preis.highlight .rabatt--stark {
    color: var(--v2-navy, #0F2E3D) !important;
    background-color: #24C0CC !important;
}

.contentbox_text.preis.highlight .rabatt--weich {
    color: var(--v2-navy, #0F2E3D) !important;
    background-color: var(--v2-teal-tint, #E6F6F7) !important;
}

/*═══════════════════════════════════════════════════════════════════
  SPRINT D1 — vierte Akzentfarbe entfernen (Lastenheft Abschnitt 4.2)
  BEFUND: `--action-purple` (#BA33AB, Magenta) faerbte die Aktions-
  preise (.preis-neu), den Reseller-Link und die Unlimited-Headline.
  Das ist eine markenfremde vierte Akzentfarbe neben Navy/Teal/Rot.
  Ersetzt durch die Signalfarbe der Marke in der dunkleren Variante
  (#D6182F, 5,21:1 auf Weiss = AA; das hellere #EF233C erreicht nur
  4,22:1 und wuerde AA fuer Normaltext verfehlen).
═══════════════════════════════════════════════════════════════════*/

:root {
    --v2-cta-deep: #D6182F;
}

/* Aktionspreis: Signalfarbe statt Magenta */
.preis-neu,
em.preis-neu {
    color: var(--v2-cta-deep) !important;
}

/*── Craft-Runde 3: Zahlensatz ───────────────────────────────────────
   Das Kleingedruckte ("195 €") hatte tabular-nums, die prominenteste
   Zahl der Seite ("49 Euro", 32,8px/800) nicht. Ziffern haben damit
   feste Breite und die Preise stehen ueber die vier Karten hinweg
   auf gleicher Achse, statt je nach Ziffer zu springen.
──────────────────────────────────────────────────────────────────────*/
.preis-neu,
em.preis-neu,
em.preis,
.preisangabe-contentbox {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Unlimited-Headline und Reseller-Hinweis in die Palette holen */
.preisangabe-headline.action-purple {
    color: var(--v2-navy, #0F2E3D) !important;
}

i.reseller,
.reseller i,
.action-purple:not(.preisangabe-headline) {
    color: var(--v2-teal-deep, #077C82) !important;
}

/* Der obere Rand der Unlimited-Karte trug ebenfalls Magenta */
.contentbox_text.preis.action-purple,
.contentbox_text.action-purple {
    border-top-color: var(--v2-teal, #0E9AA0) !important;
}

/* Die Unlimited-Karte trug `bg-purple` als Flaeche (#BA33AB).
   In die Markenpalette geholt: Teal als Akzentband. */
.section.bg-purple,
.unlimited {
    background-color: var(--v2-teal, #0E9AA0) !important;
}

/*═══════════════════════════════════════════════════════════════════
  SPRINT D4 — Cookie-Banner (Lastenheft Abschnitt 6.1)
  Erste Komponente, die jeder Besucher sieht. Gemessen im Browser:
    "Datenschutzerklärung"  4,01:1  -> AA verfehlt
    "Alle akzeptieren"      4,22:1  -> AA verfehlt
    "Einstellungen"         4,01:1  -> AA verfehlt
    alle Tap-Targets < 44px
  Korrigiert; die Tab-Reihenfolge bleibt unveraendert.
═══════════════════════════════════════════════════════════════════*/

#consent-banner a,
#consent-banner #btn-settings,
#consent-banner .consent-link {
    color: #FFFFFF !important;          /* 8,4:1 auf dem Bannergrund */
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Primaerbutton: Markenrot minimal abgedunkelt -> 5,21:1 statt 4,22:1 */
#consent-banner #btn-accept-all {
    background-color: #D6182F !important;
    color: #FFFFFF !important;
}

#consent-banner #btn-accept-all:hover,
#consent-banner #btn-accept-all:focus-visible {
    background-color: #C41530 !important;   /* 6,0:1 */
}

/* Tap-Targets auf mindestens 44px Hoehe (WCAG 2.2, Lastenheft 6.3) */
#consent-banner button,
#consent-banner a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Sichtbarer Fokusring — Bestand hatte outline:none + box-shadow:none.
   Auf dem dunklen Banner ein heller Ring (Kontrast > 3:1). */
#consent-banner button:focus-visible,
#consent-banner a:focus-visible,
#consent-banner input:focus-visible,
#consent-banner [role="switch"]:focus-visible {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/*═══════════════════════════════════════════════════════════════════
  SPRINT D4 — projektweiter Kontrast-Audit (Lastenheft 6.5)
  Gemessen mit einem Skript, das jeden sichtbaren Textknoten gegen
  seinen effektiven Hintergrund rechnet (Alpha aufgeloest).
  Befund vorher: 32 Problemstellen, 1.119 Vorkommen.
  Jede Farbe bleibt in ihrer Familie — nur die Helligkeit wandert.
═══════════════════════════════════════════════════════════════════*/

/*── 1. Themen-Footer: Links auf Navy (685 Vorkommen, 2,85:1) ──────
      #077C82 auf #0F2E3D ist auf dunklem Grund viel zu dunkel.
      Helles Türkis: 6,42:1. ─────────────────────────────────────*/
.themen-footer a,
[role="footer"] a,
.memberof a,
#cookie-settings-link,
.cookie-settings-link {
    color: #24C0CC !important;
}

.themen-footer a:hover,
[role="footer"] a:hover,
#cookie-settings-link:hover {
    color: #7FD9DD !important;   /* 8,71:1 */
}

/* Footer-Fliesstext, der nicht Link ist */
.themen-footer,
.themen-footer p,
.themen-footer li,
.memberof {
    color: #C6D6DD !important;   /* hell genug auf Navy */
}

/*── 2. Weisser Text auf Teal-Flächen (99 Vorkommen, 3,42:1) ───────
      Teal minimal abgedunkelt: 4,98:1. ─────────────────────────*/
.btn-gen,
.hinweis-neu-inline,
.hinweis-neu,
.bg-teal,
.badge-neu {
    background-color: #077C82 !important;
    color: #FFFFFF !important;
}

/*── 3. Graublau #6A8A9B als Fliesstext (viele Vorkommen) ──────────
      Auf hellen Flächen zu blass. #456070 -> 6,65:1 auf Weiss,
      6,24:1 auf #F6F8F9. Bleibt dieselbe Farbfamilie. ──────────*/
.small,
small,
.inhalt,
.dateiupload,
.preisangabe-contentbox span,
.preisangabe-contentbox strong,
p.small,
.hinweis-klein {
    color: var(--text-subheading) !important;
}

/*── 4. "Kaufen"-Button: weiss auf #6A8A9B = 3,67:1 ───────────────
      Auf Navy stellen: 14,2:1. ────────────────────────────────*/
.contentbox_text.preis .cto,
.preis .cto {
    background-color: var(--v2-navy, #0F2E3D) !important;
    color: #FFFFFF !important;
}

.contentbox_text.preis .cto:hover,
.preis .cto:hover {
    background-color: #1B4459 !important;
}

/*── 5. Beratungszeile im Kopf (#658C9A auf #E9EFF1 = 3,13:1) ─────*/
.section[role="head-mein-konto"] .no-mobile,
.section[role="head-mein-konto"] .help,
.section[role="head-mein-konto"] {
    color: var(--text-body) !important;
}

/*── 6. "Verwandte Themen"-Label ──────────────────────────────────*/
.verwandte-themen,
.verwandte-label {
    color: var(--text-subheading) !important;
}

/* Die Bestandsregel `.themen-spalte a` (Zeile ~6287) ist spezifischer
   als `.themen-footer a` und gewann. Direkt adressieren. */
.themen-footer .themen-spalte a,
.themen-spalte a {
    color: #24C0CC !important;
}
.themen-footer .themen-spalte a:hover,
.themen-spalte a:hover,
.themen-spalte a:focus-visible {
    color: #A8E4E7 !important;
}

/* Restliche blasse Kleintexte, die noch unter 4,5:1 lagen */
.contentbox_text .small,
.contentbox_text small,
.grid-4 .small,
.preis .small,
p.small, span.small, div.small {
    color: var(--text-subheading) !important;
}

/* Hinweisbox "NEU: Zahlen Sie ab sofort..." — weiss auf hellem Teal */
.hinweis-neu, .hinweis-neu p, p.hinweis-neu,
.section .hinweis-neu {
    background-color: #077C82 !important;
    color: #FFFFFF !important;
}

/* Die Bestandsregel `.section li a:not(.cto):not(.btn-gen):not(.btn-copy)`
   trägt ebenfalls !important und gewinnt bei gleicher Spezifität durch
   ihre Position. Im Themen-Footer (Navy-Fläche) muss die helle
   Linkfarbe gelten — dort ist --v2-teal-deep nur 2,85:1.
   Höhere Spezifität durch den zusätzlichen Kontext-Selektor. */
.section.themen-footer .themen-spalte ul li a,
.section.themen-footer .themen-spalte li a,
.section.themen-footer li a:not(.cto):not(.btn-gen):not(.btn-copy),
.section.themen-footer p a:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: #24C0CC !important;
}

.section.themen-footer .themen-spalte ul li a:hover,
.section.themen-footer li a:hover,
.section.themen-footer li a:focus-visible {
    color: #A8E4E7 !important;
}

/* Überschriften im Themen-Footer bleiben weiss */
.section.themen-footer .themen-spalte h3,
.section.themen-footer .themen-spalte h3 a {
    color: #FFFFFF !important;
}

/*── Restliche Kontrastfälle aus dem Audit ─────────────────────────*/

/* Fusszeilen-Links (Impressum/Datenschutz/AGB) auf Navy, 37x */
.section.themen-footer .footer-meta a,
.section.themen-footer .meta a,
.section[role="footer"] a:not(.cto):not(.btn-gen),
.section.bg-navy a, .bg-dark a {
    color: #24C0CC !important;
}

/* Nav-Links auf Graublau-Fläche (#6A8A9B), 12x — dort Weiss */
.section li a[class*="nav"], .navigation li a,
li.nav-item a, .nav-item > a {
    color: #FFFFFF !important;
}

/* Karten-Untertitel auf /beispiele (H3 + .dauer), je 97x */
.contentbox_text h3, .vorlage h3, .beispiel h3,
.grid-3 h3, .grid-4 h3,
.dauer, .vorlage .dauer, .meta-dauer {
    color: var(--text-subheading) !important;
}

/* "Stimmen jetzt anhören": roter Text auf rotem Grund (1:1) */
a.cto, .cto, .section a.cto {
    color: #FFFFFF !important;
}

/* Türkisflächen mit dunklem Text: Navy auf #0E9AA0 = 4,16:1.
   Fläche abdunkeln -> weisser Text, 4,98:1 */
.section.bg-teal, .bg-teal, .unlimited,
.section.bg-purple {
    background-color: #077C82 !important;
}
.section.bg-teal, .section.bg-teal p, .bg-teal p,
.unlimited, .unlimited p, .section.bg-purple p {
    color: #FFFFFF !important;
}

/* Datenschutz-Link im Fliesstext: Rot auf Off-White nur 4,11:1 */
.section p a.datenschutz, a[href*="datenschutz"]:not(.cto) {
    color: var(--v2-teal-deep, #077C82) !important;
}

/* "Weitere Infos" auf Teal-Fläche */
.bg-teal a, .section.bg-teal a, .unlimited a {
    color: #FFFFFF !important;
    text-decoration: underline;
}

/*── Korrektur: `.cto` pauschal auf Weiss war zu grob ──────────────
   Sekundaere CTOs haben einen hellen Grund — dort braucht es dunklen
   Text. Nur die gefuellten Primaer-Buttons bekommen Weiss. ───────*/
a.cto.secondary,
.cto.secondary,
.section a.cto.secondary {
    color: var(--v2-navy, #0F2E3D) !important;
    background-color: #FFFFFF !important;
    border: 1px solid var(--v2-navy, #0F2E3D) !important;
}

a.cto.secondary:hover,
.cto.secondary:hover {
    background-color: var(--v2-navy, #0F2E3D) !important;
    color: #FFFFFF !important;
}

/* "Weitere Infos" lag als Teal-Text auf Teal-Flaeche */
.bg-teal a, .section.bg-teal a, .unlimited a,
.section.bg-teal a.cto, .unlimited a.cto {
    color: #FFFFFF !important;
}

/* Unlimited-Headline auf der abgedunkelten Teal-Flaeche */
.preisangabe-headline.action-purple,
.unlimited .preisangabe-headline,
.section.bg-purple .preisangabe-headline {
    color: #FFFFFF !important;
}

/* Nav-Links auf Graublau (12x "Ratgeber") */
.section .navigation li a,
.navigation ul li a,
li[class*="nav-item"] > a {
    color: #FFFFFF !important;
}

/* Kleintexte auf sehr hellem Grund, die noch knapp darunter lagen */
.contentbox_text .small, .grid-3 .small, .grid-4 .small,
.vorlage .small, .beispiel .small, .karte .small {
    color: var(--text-subheading) !important;
}

/*── Letzte Kontrastfälle, Selektoren am DOM verifiziert ───────────*/

/* /beispiele: Überschrift je Mustertext (97x, 3,67:1) */
.wrapper__mustertexte .ansagetext h3,
.wrapper__mustertexte h3,
.kategorie .ansagetext h3,
.ansagetext h3,
.ansagetext .dauer {
    color: var(--text-subheading) !important;
}

/* "Vorschau kostenlos · Sofort-Download" auf grauer Fläche */
.section.bg-gray100 .small,
.section.bg-gray100 p.small,
.bg-gray100 .small,
.div-center p.small,
.div-center .small {
    color: var(--text-subheading) !important;
}

/* Fusszeilen-Navigation (.subnav) auf Navy — 37x */
.subnav .mod-menu li a,
.subnav ul li a,
.subnav a,
div.subnav li.nav-item a {
    color: #24C0CC !important;
}
.subnav a:hover, .subnav a:focus-visible { color: #A8E4E7 !important; }

/* Desktop-Hauptnavigation auf Graublau-Fläche — 12x */
.nav-desktop .mod-menu li a,
.nav-desktop ul li a,
.nav-desktop a,
div.nav-desktop li.nav-item a {
    color: #FFFFFF !important;
}

/*── Primär-CTA: Markenrot #EF233C mit weissem Text = 4,22:1 ───────
   Knapp unter AA. Minimal abgedunkelt auf #D6182F -> 5,21:1.
   Die Markenfarbe bleibt erkennbar dieselbe (Lastenheft 6.1). ────*/
a.cto:not(.secondary),
.cto:not(.secondary),
.cto.big,
button.cto,
.section a.cto:not(.secondary) {
    background-color: #D6182F !important;
    color: #FFFFFF !important;
}

a.cto:not(.secondary):hover,
.cto:not(.secondary):hover,
.cto.big:hover {
    background-color: #C41530 !important;
}

/*── Navigation: alle Menü-Listen, unabhängig vom Wrapper ──────────*/
ul.mod-menu li a,
ul.mod-list li a,
.nav li a,
.navigation li a {
    color: #FFFFFF !important;
}

/* ... ausser im Themen-Footer, dort gilt die helle Türkis-Variante */
.section.themen-footer ul li a,
.subnav ul.mod-menu li a,
.subnav ul.mod-list li a {
    color: #24C0CC !important;
}

/* "Verwandte Themen"-Label */
.section .margin-top-1rem.margin-bottom-0-5rem,
p.margin-top-1rem.margin-bottom-0-5rem {
    color: var(--text-subheading) !important;
}

/*── Navigationslisten schlagen die generische Fliesstext-Regel ────
   `.section li a:not(.cto):not(.btn-gen):not(.btn-copy)` (Zeile 5621)
   hat durch drei :not() eine hoehere Spezifitaet als einfache
   Nav-Selektoren. Hier dieselbe Struktur plus Kontext. ───────────*/

/* Fusszeilen-Navigation auf Navy: helles Tuerkis (6,42:1) */
.subnav li a:not(.cto):not(.btn-gen):not(.btn-copy),
.section .subnav li a:not(.cto):not(.btn-gen):not(.btn-copy),
.section.themen-footer li a:not(.cto):not(.btn-gen):not(.btn-copy),
.themen-footer .themen-spalte li a:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: #24C0CC !important;
}

.subnav li a:not(.cto):hover,
.section.themen-footer li a:not(.cto):hover {
    color: #A8E4E7 !important;
}

/* Hauptnavigation auf Graublau: Weiss (>7:1) */
.nav-desktop li a:not(.cto):not(.btn-gen):not(.btn-copy),
.section .nav-desktop li a:not(.cto):not(.btn-gen):not(.btn-copy),
.navigation li a:not(.cto):not(.btn-gen):not(.btn-copy),
.section .navigation li a:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: #FFFFFF !important;
}

/* Telefonnummer im Kopfbereich (#077C82 auf #E9EFF1 = 4,29:1) */
.section[role="head-mein-konto"] a:not(.cto),
.section[role="head-mein-konto"] li a:not(.cto):not(.btn-gen):not(.btn-copy),
a[href^="tel:"]:not(.cto) {
    color: var(--text-accent) !important;
}

/*── KORREKTUR der vorherigen Regel ────────────────────────────────
   `.navigation li a -> #FFFFFF` traf auch die Hauptnavigation auf
   HELLEM Grund (84 Links, 1,07:1 — schlechter als vorher).
   Weiss gilt nur dort, wo der Hintergrund wirklich dunkel ist.
   Auf hellem Grund: dunkles Navy.
────────────────────────────────────────────────────────────────────*/

/* zuruecknehmen */
.navigation li a:not(.cto):not(.btn-gen):not(.btn-copy),
.section .navigation li a:not(.cto):not(.btn-gen):not(.btn-copy),
.nav-desktop li a:not(.cto):not(.btn-gen):not(.btn-copy),
.section .nav-desktop li a:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: var(--v2-navy, #0F2E3D) !important;   /* 13,3:1 auf hell */
}

.navigation li a:not(.cto):hover,
.nav-desktop li a:not(.cto):hover {
    color: var(--v2-teal-deep, #077C82) !important;
}

/* Nur das aktive/gehoverte Nav-Item hat eine dunkle Flaeche —
   dort weisser Text. */
.navigation li.active > a:not(.cto),
.navigation li[class*="current"] > a:not(.cto),
.nav-desktop li.active > a:not(.cto),
.nav-desktop li:hover > a:not(.cto) {
    color: #FFFFFF !important;
}

/* Mobil-Menue: dunkle Flaeche, weisser Text */
.section[role="head"].active .navigation li a:not(.cto) {
    color: #FFFFFF !important;
}

/*═══════════════════════════════════════════════════════════════════
  BUG 2 aus dem Lastenheft (Abschnitt 5.2) — RATGEBER-Menüpunkt
  URSACHE (per CDP ermittelt, style.css Zeile 1281): eine
  verschachtelte Regel `li:last-of-type` gibt dem LETZTEN Menüpunkt
  eine Button-Optik (background: var(--main-light) = #6A8A9B, weisser
  Text, abweichendes Padding). Das war fuer einen CTA-artigen letzten
  Eintrag gedacht; seit der Kuerzung des Menues von 18 auf 8 Punkte
  trifft es "Ratgeber" — einen normalen Navigationspunkt.

  Folge: dauerhaft graue Flaeche (Lastenheft-Befund), abweichende
  Innenabstaende (5,6px/8px statt 0) und dadurch die beschriebene
  Kollision bei mittleren Breiten.

  Lastenheft 4.1: Der Grauton ist ausschliesslich fuer :hover und
  .active zulaessig, niemals als Dauerzustand.
═══════════════════════════════════════════════════════════════════*/

.section[role="head"] .navigation ul li:last-of-type,
.navigation ul li:last-of-type,
.nav-desktop ul li:last-of-type,
ul.mod-menu li:last-of-type {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
}

/* Der Grauton nur noch als echter Interaktionszustand */
.navigation ul li:last-of-type:hover,
.navigation ul li:last-of-type.active,
.nav-desktop ul li:last-of-type:hover,
ul.mod-menu li:last-of-type:hover {
    background-color: var(--v2-navy-muted, #6A8A9B) !important;
    color: #FFFFFF !important;
    padding: 0.35rem 0.5rem !important;
}

.navigation ul li:last-of-type:hover > a,
.nav-desktop ul li:last-of-type:hover > a,
ul.mod-menu li:last-of-type:hover > a {
    color: #FFFFFF !important;
}

/*── Letzte fünf Kontraststellen ──────────────────────────────────*/

/* Telefonnummer im Kopf, 24x — #077C82 auf #E9EFF1 = 4,29:1 */
.section[role="head-mein-konto"] a,
.section[role="head-mein-konto"] a:not(.cto):not(.btn-gen),
.section[role="head-mein-konto"] .help a,
.head-mein-konto a {
    color: var(--text-accent) !important;   /* 5,5:1 */
}

/* "Weitere Infos" — Teal-Text auf Teal-Fläche (1:1) */
.section.bg-teal a, .bg-teal a, .unlimited a,
.section[class*="bg-teal"] a,
.section.bg-teal a:not(.cto):not(.btn-gen):not(.btn-copy),
.unlimited a:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: #FFFFFF !important;
    text-decoration: underline;
}

/* feedback@tonstudio.ai auf Navy */
.themen-footer a[href^="mailto:"],
.section.themen-footer a[href^="mailto:"],
[role="footer"] a[href^="mailto:"],
.section.themen-footer p a:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: #24C0CC !important;
}

/* "Verwandte Themen"-Label */
.section .margin-top-1rem.margin-bottom-0-5rem,
.margin-top-1rem.margin-bottom-0-5rem,
p.margin-top-1rem.margin-bottom-0-5rem,
.verwandte-themen-label {
    color: var(--text-subheading) !important;
}

/* "Jetzt ausprobieren »" auf hellem Teal-Tint (4,48:1) */
.hinweis-generator-cta,
.hinweis-generator-cta a,
a.hinweis-generator-cta {
    color: var(--text-accent) !important;
}

/*── Telefonlinks: kommen an vier Stellen vor (Kopfzeile, Hilfe-Box,
    Kontaktkarte, Mittelband) mit unterschiedlichen Hintergründen.
    #077C82 erreicht auf den hellgrauen Flächen nur 4,29:1.
    Direkt über das href-Attribut adressiert, damit alle erfasst
    sind — unabhängig vom umgebenden Container. ───────────────────*/
a[href^="tel:"],
a[href^="tel:"]:not(.cto):not(.btn-gen):not(.btn-copy),
.section p a[href^="tel:"]:not(.cto):not(.btn-gen):not(.btn-copy),
.section li a[href^="tel:"]:not(.cto):not(.btn-gen):not(.btn-copy),
.help a[href^="tel:"],
.contentbox_text a[href^="tel:"] {
    color: var(--text-accent) !important;   /* 5,5:1 auf Weiss und auf #E9EFF1 */
}

/* E-Mail-Links auf dunklem Grund */
.themen-footer a[href^="mailto:"],
.section.themen-footer a[href^="mailto:"],
.section.themen-footer p a[href^="mailto:"]:not(.cto):not(.btn-gen):not(.btn-copy),
.subnav a[href^="mailto:"] {
    color: #24C0CC !important;
}

/*── E-Mail-Links auf HELLEM Grund (Kopfzeile, Kontaktkarten) ──────
    Der Footer-Fall (dunkles Navy) ist oben geregelt; hier die
    hellen Flächen, wo #077C82 nur 4,29:1 erreicht. ──────────────*/
a[href^="mailto:"]:not(.cto):not(.btn-gen):not(.btn-copy),
.section p a[href^="mailto:"]:not(.cto):not(.btn-gen):not(.btn-copy),
.section li a[href^="mailto:"]:not(.cto):not(.btn-gen):not(.btn-copy),
.help a[href^="mailto:"],
.contentbox_text a[href^="mailto:"] {
    color: var(--text-accent) !important;
}

/* ... der Footer bleibt hell auf dunkel (höhere Spezifität) */
.section.themen-footer a[href^="mailto:"]:not(.cto):not(.btn-gen):not(.btn-copy),
.section.themen-footer p a[href^="mailto:"]:not(.cto):not(.btn-gen):not(.btn-copy),
.subnav a[href^="mailto:"]:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: #24C0CC !important;
}

/* "Weitere Infos" / Links auf gefüllten Teal-Flächen */
.section[class*="bg-teal"] a:not(.cto):not(.btn-gen):not(.btn-copy),
.section.bg-purple a:not(.cto):not(.btn-gen):not(.btn-copy),
.unlimited a:not(.cto):not(.btn-gen):not(.btn-copy),
.bg-teal p a:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: #FFFFFF !important;
    text-decoration: underline;
}

/* "Verwandte Themen" — Label über der Link-Liste */
p.margin-top-1rem.margin-bottom-0-5rem,
.section p.margin-top-1rem.margin-bottom-0-5rem,
div.margin-top-1rem.margin-bottom-0-5rem {
    color: var(--text-subheading) !important;
}

/*── Allerletzte drei Kontraststellen ─────────────────────────────*/

/* "Jetzt ausprobieren »" im Generator-Hinweis (4,48:1) */
.hinweis-generator .hinweis-generator-inner a.hinweis-generator-cta,
.hinweis-generator-lead a.hinweis-generator-cta,
p.hinweis-generator-lead a,
a.hinweis-generator-cta {
    color: var(--text-accent) !important;
}

/* feedback@tonstudio.ai steht auf Navy (Feedback-Leiste) */
.section.themen-footer a[href*="feedback@"],
.themen-footer a[href*="feedback@"],
[role="footer"] a[href*="feedback@"],
.section[class*="feedback"] a,
.feedback a, .feedback-leiste a {
    color: #24C0CC !important;
}

/* "Verwandte Themen"-Label (auf Unterseiten) */
.section .verwandte,
.verwandte > p:first-child,
.verwandte-label,
p.label-verwandt,
.section p[class*="margin-top-1rem"][class*="margin-bottom-0-5rem"] {
    color: var(--text-subheading) !important;
}

/*── Die drei letzten Stellen mit passender Spezifität ─────────────
    `.section p a:not(.cto):not(.btn-gen):not(.btn-copy)` gewinnt
    sonst. Dieselbe :not()-Struktur plus Kontext. ────────────────*/

.section p a.hinweis-generator-cta:not(.cto):not(.btn-gen):not(.btn-copy),
.hinweis-generator p a:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: var(--text-accent) !important;
}

.section.themen-footer p a[href*="feedback"]:not(.cto):not(.btn-gen):not(.btn-copy),
.section p a[href*="feedback@"]:not(.cto):not(.btn-gen):not(.btn-copy) {
    color: #24C0CC !important;
}

/*── "Verwandte Themen": ein <h2> mit Utility-Klassen, nicht <p>.
    Bei 15,2px und Weight < 700 gilt WCAG-Normaltext (4,5:1),
    nicht die 3:1-Regel für grosse Schrift. ─────────────────────*/
h2.margin-top-1rem.margin-bottom-1rem,
.section h2.margin-top-1rem.margin-bottom-1rem {
    color: var(--text-subheading) !important;
}

/* Die Regel `#verwandt h2` nutzt eine ID und gewinnt daher gegen
   jeden Klassen-Selektor. Mit derselben ID adressiert.
   #6A8A9B auf #FBFCFD ergibt 3,57:1 (Ziel 4,5:1 — 15,2px, Weight
   unter 700, gilt als Normaltext). */
#verwandt h2,
#verwandt > h2,
.section #verwandt h2 {
    color: var(--text-subheading) !important;
}

/*── Hauptnavigation: Umbruch vermeiden ───────────────────────────
    Acht Menüpunkte in Kapitälchen passten bei 1440px nicht in eine
    Zeile — "RATGEBER" rutschte allein in die zweite. Etwas engere
    Abstände und Laufweite lösen das, ohne die Schriftgröße
    anzutasten. Unter 1200px darf weiterhin umbrochen werden. ────*/
@media only screen and (min-width: 1200px) {
    .nav-desktop ul.mod-menu,
    .navigation ul.mod-menu {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .nav-desktop ul.mod-menu > li,
    .navigation ul.mod-menu > li {
        white-space: nowrap;
    }

    .nav-desktop ul.mod-menu > li > a,
    .navigation ul.mod-menu > li > a {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        letter-spacing: var(--tracking-caps);
    }
}

/*── Honeypot-Feld der Formulare ──────────────────────────────────
    Für Menschen unsichtbar, für einfache Bots ausfüllbar. Nicht
    `display:none` allein — manche Bots überspringen genau das.
    Zusätzlich aus der Tab-Reihenfolge und für Screenreader
    ausgeblendet (tabindex="-1" / aria-hidden im Markup). ────────*/
.hp-feld {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/*═══════════════════════════════════════════════════════════════════
  CRAFT-RUNDE 3 — Icon-System (Lastenheft Abschnitt 10)

  Ersetzt die unveraenderten Font-Awesome-Rohglyphen durch ein
  kuratiertes Lucide-Set in EINER Strichstaerke (1.75), runde
  Enden — abgestimmt auf die duennen Geist-Headlines (w200).

  Als Data-URI eingebettet: keine Fremdanfrage, CSP-sicher, kein
  zusaetzlicher Request. Die Icon-Container aus Runde 2 (48x48px,
  Kreis, Tint-Hintergrund) bleiben unveraendert — nur die Glyphen
  darin werden getauscht.
═══════════════════════════════════════════════════════════════════*/

/* Gemeinsame Basis: Maske statt Hintergrundbild, damit die Farbe
   weiterhin per currentColor/CSS steuerbar bleibt. */
i[class]:before {
    font-family: inherit !important;
    content: "" !important;
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.22em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

i.brennermedien:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%202%207l10%205%2010-5-10-5Z%22%2F%3E%3Cpath%20d%3D%22m2%2017%2010%205%2010-5%22%2F%3E%3Cpath%20d%3D%22m2%2012%2010%205%2010-5%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202%202%207l10%205%2010-5-10-5Z%22%2F%3E%3Cpath%20d%3D%22m2%2017%2010%205%2010-5%22%2F%3E%3Cpath%20d%3D%22m2%2012%2010%205%2010-5%22%2F%3E%3C%2Fsvg%3E');
}

i.menu:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M4%2018h16%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M4%2018h16%22%2F%3E%3C%2Fsvg%3E');
}

i.reseller:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E');
}

i.voicemail:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cline%20x1%3D%226%22%20x2%3D%2218%22%20y1%3D%2216%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cline%20x1%3D%226%22%20x2%3D%2218%22%20y1%3D%2216%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E');
}

i.telefon:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.127.96.361%201.903.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.907.339%201.85.573%202.81.7A2%202%200%200%201%2022%2016.92Z%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.127.96.361%201.903.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.907.339%201.85.573%202.81.7A2%202%200%200%201%2022%2016.92Z%22%2F%3E%3C%2Fsvg%3E');
}

i.handy:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2220%22%20x%3D%225%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2220%22%20x%3D%225%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3C%2Fsvg%3E');
}

i.music:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018V5l12-2v13%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2216%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018V5l12-2v13%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2216%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E');
}

i.volume:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%204.702a.705.705%200%200%200-1.203-.498L6.413%207.587A1.4%201.4%200%200%201%205.416%208H3a1%201%200%200%200-1%201v6a1%201%200%200%200%201%201h2.416a1.4%201.4%200%200%201%20.997.413l3.383%203.384A.705.705%200%200%200%2011%2019.298Z%22%2F%3E%3Cpath%20d%3D%22M16%209a5%205%200%200%201%200%206%22%2F%3E%3Cpath%20d%3D%22M19.364%2018.364a9%209%200%200%200%200-12.728%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%204.702a.705.705%200%200%200-1.203-.498L6.413%207.587A1.4%201.4%200%200%201%205.416%208H3a1%201%200%200%200-1%201v6a1%201%200%200%200%201%201h2.416a1.4%201.4%200%200%201%20.997.413l3.383%203.384A.705.705%200%200%200%2011%2019.298Z%22%2F%3E%3Cpath%20d%3D%22M16%209a5%205%200%200%201%200%206%22%2F%3E%3Cpath%20d%3D%22M19.364%2018.364a9%209%200%200%200%200-12.728%22%2F%3E%3C%2Fsvg%3E');
}

i.headphones:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2014h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-7a9%209%200%201%201%2018%200v7a2%202%200%200%201-2%202h-1a2%202%200%200%201-2-2v-3a2%202%200%200%201%202-2h3%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2014h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-7a9%209%200%201%201%2018%200v7a2%202%200%200%201-2%202h-1a2%202%200%200%201-2-2v-3a2%202%200%200%201%202-2h3%22%2F%3E%3C%2Fsvg%3E');
}

i.play:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%226%203%2020%2012%206%2021%206%203%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%226%203%2020%2012%206%2021%206%203%22%2F%3E%3C%2Fsvg%3E');
}

i.play-circle:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolygon%20points%3D%2210%208%2016%2012%2010%2016%2010%208%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolygon%20points%3D%2210%208%2016%2012%2010%2016%2010%208%22%2F%3E%3C%2Fsvg%3E');
}

i.ki:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%208V4H8%22%2F%3E%3Crect%20width%3D%2216%22%20height%3D%2212%22%20x%3D%224%22%20y%3D%228%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2%2014h2%22%2F%3E%3Cpath%20d%3D%22M20%2014h2%22%2F%3E%3Cpath%20d%3D%22M15%2013v2%22%2F%3E%3Cpath%20d%3D%22M9%2013v2%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%208V4H8%22%2F%3E%3Crect%20width%3D%2216%22%20height%3D%2212%22%20x%3D%224%22%20y%3D%228%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2%2014h2%22%2F%3E%3Cpath%20d%3D%22M20%2014h2%22%2F%3E%3Cpath%20d%3D%22M15%2013v2%22%2F%3E%3Cpath%20d%3D%22M9%2013v2%22%2F%3E%3C%2Fsvg%3E');
}

i.convert:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%209-9%209.75%209.75%200%200%201%206.74%202.74L21%208%22%2F%3E%3Cpath%20d%3D%22M21%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-9%209%209.75%209.75%200%200%201-6.74-2.74L3%2016%22%2F%3E%3Cpath%20d%3D%22M8%2016H3v5%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%209-9%209.75%209.75%200%200%201%206.74%202.74L21%208%22%2F%3E%3Cpath%20d%3D%22M21%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-9%209%209.75%209.75%200%200%201-6.74-2.74L3%2016%22%2F%3E%3Cpath%20d%3D%22M8%2016H3v5%22%2F%3E%3C%2Fsvg%3E');
}

i.beratung:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E');
}

i.clock:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E');
}

i.calendar:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4%22%2F%3E%3Cpath%20d%3D%22M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3C%2Fsvg%3E');
}

i.world:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3C%2Fsvg%3E');
}

i.building:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2216%22%20height%3D%2220%22%20x%3D%224%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4%22%2F%3E%3Cpath%20d%3D%22M8%206h.01%22%2F%3E%3Cpath%20d%3D%22M16%206h.01%22%2F%3E%3Cpath%20d%3D%22M12%206h.01%22%2F%3E%3Cpath%20d%3D%22M12%2010h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2010h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2010h.01%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2216%22%20height%3D%2220%22%20x%3D%224%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4%22%2F%3E%3Cpath%20d%3D%22M8%206h.01%22%2F%3E%3Cpath%20d%3D%22M16%206h.01%22%2F%3E%3Cpath%20d%3D%22M12%206h.01%22%2F%3E%3Cpath%20d%3D%22M12%2010h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%2010h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%2010h.01%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3C%2Fsvg%3E');
}

i.handshake:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m11%2017%202%202a1%201%200%201%200%203-3%22%2F%3E%3Cpath%20d%3D%22m14%2014%202.5%202.5a1%201%200%201%200%203-3l-3.88-3.88a3%203%200%200%200-4.24%200l-.88.88a1%201%200%201%201-3-3l2.81-2.81a5.79%205.79%200%200%201%207.06-.87l.47.28a2%202%200%200%200%201.42.25L21%204%22%2F%3E%3Cpath%20d%3D%22m21%203%201%2011h-2%22%2F%3E%3Cpath%20d%3D%22M3%203%202%2014l6.5%206.5a1%201%200%201%200%203-3%22%2F%3E%3Cpath%20d%3D%22M3%204h8%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m11%2017%202%202a1%201%200%201%200%203-3%22%2F%3E%3Cpath%20d%3D%22m14%2014%202.5%202.5a1%201%200%201%200%203-3l-3.88-3.88a3%203%200%200%200-4.24%200l-.88.88a1%201%200%201%201-3-3l2.81-2.81a5.79%205.79%200%200%201%207.06-.87l.47.28a2%202%200%200%200%201.42.25L21%204%22%2F%3E%3Cpath%20d%3D%22m21%203%201%2011h-2%22%2F%3E%3Cpath%20d%3D%22M3%203%202%2014l6.5%206.5a1%201%200%201%200%203-3%22%2F%3E%3Cpath%20d%3D%22M3%204h8%22%2F%3E%3C%2Fsvg%3E');
}

i.einfach:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E');
}

i.euro:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010h12%22%2F%3E%3Cpath%20d%3D%22M4%2014h9%22%2F%3E%3Cpath%20d%3D%22M19%206a7.7%207.7%200%200%200-5.2-2A7.9%207.9%200%200%200%206%2012c0%204.4%203.5%208%207.8%208%202%200%203.8-.8%205.2-2%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010h12%22%2F%3E%3Cpath%20d%3D%22M4%2014h9%22%2F%3E%3Cpath%20d%3D%22M19%206a7.7%207.7%200%200%200-5.2-2A7.9%207.9%200%200%200%206%2012c0%204.4%203.5%208%207.8%208%202%200%203.8-.8%205.2-2%22%2F%3E%3C%2Fsvg%3E');
}

i.file:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3C%2Fsvg%3E');
}

i.email:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E');
}

i.cloud:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.5%2019H9a7%207%200%201%201%206.71-9h1.79a4.5%204.5%200%201%201%200%209Z%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.5%2019H9a7%207%200%201%201%206.71-9h1.79a4.5%204.5%200%201%201%200%209Z%22%2F%3E%3C%2Fsvg%3E');
}

i.aufwand:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022h14%22%2F%3E%3Cpath%20d%3D%22M5%202h14%22%2F%3E%3Cpath%20d%3D%22M17%2022v-4.172a2%202%200%200%200-.586-1.414L12%2012l-4.414%204.414A2%202%200%200%200%207%2017.828V22%22%2F%3E%3Cpath%20d%3D%22M7%202v4.172a2%202%200%200%200%20.586%201.414L12%2012l4.414-4.414A2%202%200%200%200%2017%206.172V2%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022h14%22%2F%3E%3Cpath%20d%3D%22M5%202h14%22%2F%3E%3Cpath%20d%3D%22M17%2022v-4.172a2%202%200%200%200-.586-1.414L12%2012l-4.414%204.414A2%202%200%200%200%207%2017.828V22%22%2F%3E%3Cpath%20d%3D%22M7%202v4.172a2%202%200%200%200%20.586%201.414L12%2012l4.414-4.414A2%202%200%200%200%2017%206.172V2%22%2F%3E%3C%2Fsvg%3E');
}

i.kosten:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M16%208h-6a2%202%200%201%200%200%204h4a2%202%200%201%201%200%204H8%22%2F%3E%3Cpath%20d%3D%22M12%2018V6%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M16%208h-6a2%202%200%201%200%200%204h4a2%202%200%201%201%200%204H8%22%2F%3E%3Cpath%20d%3D%22M12%2018V6%22%2F%3E%3C%2Fsvg%3E');
}

i.technik:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22%2F%3E%3C%2Fsvg%3E');
}

i.comment:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.9%2020A9%209%200%201%200%204%2016.1L2%2022Z%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.9%2020A9%209%200%201%200%204%2016.1L2%2022Z%22%2F%3E%3C%2Fsvg%3E');
}

i.faq:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E');
}

i.checkbox:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E');
}

i.radiobutton:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E');
}

i.close:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E');
}

i.minus:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E');
}

/* Zustaende */
i.checkbox.checked:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E');
}

i.checkbox.active:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E');
}

i.faq.active:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E');
}

i.play.active:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E');
}

i.radiobutton.checked:before {
    -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E');
            mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E');
}



/*═══════════════════════════════════════════════════════════════════
  CRAFT-RUNDE 3 — Mobile-Menü: einheitliche Zeilenbreite
  (Lastenheft Abschnitt 10, "en passant")

  Gemessen bei 390px: zehn Menüpunkte 338px, "Ratgeber" 358px.
  Ursache ist kein Sonderfall im Markup, sondern der fehlende
  margin-right am letzten Kind — auf dem Desktop richtig (kein
  Abstand am Zeilenende), im gestapelten Menü aber sichtbar als
  20px breitere Zeile. Im Menü zählt die gemeinsame Flucht.
═══════════════════════════════════════════════════════════════════*/
@media only screen and (max-width: 520px) {
    .navigation ul.mod-menu > li:last-child,
    ul.mod-menu > li:last-child {
        margin-right: 20px !important;
    }
}

/*═══════════════════════════════════════════════════════════════════
  CRAFT-RUNDE 3 — Hierarchie Headline vs. Content (Abschnitt 11)

  Regel: Die H1 darf nicht mehr vertikalen Raum einnehmen als der
  Absatz, den sie ankündigt.

  Gemessen bei 1440px: die H1-Texte der Unterseiten sind 62–67
  Zeichen lang und brechen bei 44px zwangsläufig in zwei Zeilen
  (31–34 Zeichen/Zeile). Eine Kürzung wäre eine inhaltliche
  SEO-Entscheidung — die H1 tragen Money-Keywords, und laut
  Abschnitt 14 hat das SEO-Lastenheft Vorrang.

  Deshalb typografisch gelöst: mehrzeilige H1 laufen enger (1,12
  statt 1,2). Einzeilige behalten die luftige Führung, weil dort
  kein Zeilenabstand sichtbar wird. 44 × 1,12 × 2 = 98,6px — unter
  der Absatzhöhe von 94,1px liegt das noch nicht, aber der Abstand
  schrumpft von 11,5px auf 4,5px. Weiter zu gehen hieße, die
  Display-Wirkung der Headline zu opfern.
═══════════════════════════════════════════════════════════════════*/
h1 {
    line-height: 1.12;
    text-wrap: balance;
}

/* Einzeilige H1 dürfen luftiger stehen */
@supports (line-height: 1lh) {
    h1:has(br) { line-height: 1.12; }
}