:root {
    --maxlayoutwidth: 90%;
}

@property --cta1 {
    syntax: '<color>';
    initial-value: #ff0000;
    inherits: false;
}

@property --cta2 {
    syntax: '<color>';
    initial-value: #721414;
    inherits: false;
}

html {
    font-size: 16px;
    font-size: clamp(16px, calc(0.5em + 2.5vmin), 32px);
}

body {
    background-color: #eb6e6e;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    line-height: 1.2;
    hyphens: auto;
}

h1,
h2 {
    hyphens: none;
}

.mainpage {
    margin-top: 3rem;
    width: 100%;
    background-image: linear-gradient(90deg, #eb6e6e 0%, rgb(255, 255, 255) 50%, rgb(235, 110, 110) 100%);
    background-repeat: no-repeat;
}

.bestpage {
    margin-top: 3rem;
    width: 100%;
    background-image: linear-gradient(90deg, #eb6e6e 0%, rgb(255, 255, 255) 50%, rgb(235, 110, 110) 100%);
    background-repeat: no-repeat;
    padding-top: 1rem;
}

.sectionmenu {
    width: 100%;
    height: 50px;
    background-color: #fed9d9;
}

.navigation {
    margin: 0 auto;
    width: 100%;
    border: 0 solid red;
    height: 3rem;
    border-bottom: 2px solid red;
    background-color: #ffebec;
    position: fixed;
    box-shadow: 0 0.1rem 0.3rem 0.1rem rgba(214, 118, 118, 0.4);
    top: 0;
}

.footerlogo {
    grid-area: logo;
    width: 80%;
    max-width: 170px;
}

.navlogoimg {
    grid-area: logo;
    height: 2rem;
}

.navcontactbutton {
    background-color: #ff0000;
    border-radius: 1rem;
    width: 5rem;
    height: 1.5rem;
    text-align: center;
    color: #ffffff;
    font-size: 1rem;
    vertical-align: middle;
    background: linear-gradient(var(--cta1), var(--cta2));
    border: 1px solid #292929;
    transition: --cta1 0.5s, --cta2 2s;
    hyphens: none;
    word-break: keep-all;
    white-space: nowrap;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .navcontactbutton:hover {
        background-color: #0000ff;
        border: 1px solid #11113a;
        --cta1: #0000ff;
        --cta2: #11113a;
    }

.cta-button {
    background-color: #ff0000;
    color: #ffffff;
    padding: 0.2em 0.8em;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 4px 4px 15px 5px rgba(0, 0, 0, 0.2);
    background: linear-gradient(var(--cta1), var(--cta2));
    border: 1px solid #292929;
    flex-shrink: 0;
    flex-grow: 0;
    transition: --cta1 0.5s, --cta2 2s;
    hyphens: none;
    word-break: keep-all;
    white-space: nowrap;
}

    .cta-button:hover {
        background-color: #0000ff;
        border: 2px solid #11113a;
        box-shadow: 4px 4px 15px 5px rgba(0, 0, 0, 0.22);
        --cta1: #0000ff;
        --cta2: #11113a;
    }

.navcontact {
    text-align: right;
    grid-area: contact;
    margin-left: 1rem;
}

.navmenu {
    width: 100%;
    display: flex;
    vertical-align: middle;
    flex-direction: row;
    align-items: center;
    grid-area: menu;
    justify-content: flex-end;
}

.imglogin {
    height: 3rem;
    vertical-align: middle;
}

.logintxt {
    font-size: 1.5rem;
    height: 3rem;
    vertical-align: middle;
}

.menuentry {
    font-size: 0.8rem;
    height: 3rem;
    vertical-align: middle;
    text-decoration: none;
    color: #911010;
}

.navgrid {
    display: grid;
    grid-template-columns: 12rem auto;
    grid-template-rows: 3rem;
    grid-template-areas: 'logo menu';
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--maxlayoutwidth);
    height: 3rem;
    max-height: 3rem;
}

.navlogo {
    height: 3rem;
    display: flex;
    vertical-align: middle;
    align-items: center;
    margin-left: 1rem;
    text-decoration: none;
}

.hero {
    display: block;
    width: 100%;
    height: calc(100vmin - 3rem);
    max-width: var(--maxlayoutwidth);
    margin-left: auto;
    margin-right: auto;
}

.herogrid {
    display: grid;
    width: 100%;
    height: 100%;
    max-height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.5rem auto 0.5rem;
    gap: 0.5rem;
    grid-template-areas: '. .' 'title heroimage' '. .';
    background-color: rgba(255, 255, 255, 0.4);
}

.heroimage {
    display: block;
    width: 100%;
    height: 100%;
}

.herotitle {
    width: 100%;
    grid-area: title;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pretitle {
    text-align: center;
    font-size: 0.8rem;
    padding: 0 0.5rem;
}

.title {
    font-size: 1.5rem;
    text-align: center;
    color: #ff0000;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    padding: 0 0.5rem;
}

.posttitle {
    font-size: 0.8rem;
    font-style: normal;
    font-family: 'Kalam', cursive;
    text-align: center;
    padding: 0 0.5rem;
}

.brands {
    display: flex;
    flex-direction: row;
    background-color: rgba(255, 255, 255, 0);
    width: 100%;
    column-gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    box-sizing: border-box;
    border-bottom: 1px solid #ffb6b6;
    border-top: 1px solid #ffb6b6;
    max-width: var(--maxlayoutwidth);
    margin: 1rem auto 0;
}

.brandcol {
    flex-grow: 1;
    flex-shrink: 1;
    width: 20%;
    text-align: center;
    display: flex;
    align-items: center;
    padding: 0;
    cursor: default;
}

.heroaction {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}

.herobutton {
    display: inline-flex;
    height: 2rem;
    background-color: #ff0000;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    padding: 0.2em 0.8em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 4px 4px 15px 5px rgba(0, 0, 0, 0.2);
    background: linear-gradient(var(--cta1), var(--cta2));
    border: 1px solid #292929;
    border-radius: 3rem;
    transition: --cta1 0.5s, --cta2 2s;
    hyphens: none;
    word-break: keep-all;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
}

    .herobutton:hover {
        background-color: #0000ff;
        border: 1px solid #11113a;
        box-shadow: 4px 4px 15px 5px rgba(0, 0, 0, 0.22);
        --cta1: #0000ff;
        --cta2: #11113a;
    }

.footergrid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    color: #b6b6b6;
    max-width: var(--maxlayoutwidth);
}

.footerend {
    margin-top: 1.5rem;
    text-align: center;
    color: #a4a4a4;
    margin-bottom: 0;
    font-size: 0.75ren;
}

.footer {
    background-color: #1f1f1f;
    margin-bottom: 0;
    padding-bottom: 2rem;
    width: 100%;
    margin-top: 0;
}

.footertitle {
    font-family: 'Roboto Slab', serif;
    font-size: 1.5rem;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}

.footerright {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.footercenter {
    border-left: 0.0625rem solid rgba(150, 0, 4, 0.25);
    border-right: 0.0625rem solid rgba(150, 0, 4, 0.25);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footerleft {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.footertitle {
    color: #ff1a00;
    font-family: 'Roboto Slab', serif
    font-weight: bold;
}

.impressumaddr {
    color: #a4a4a4;
    line-height: 1.5;
}

.footerinfolist {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding-left: 0;
    list-style-type: none;
    margin-top: 0;
}

.footerlink {
    color: #a4a4a4;
    text-decoration: none;
    display: block;
    line-height: 1.5;
}

    .footerlink:hover {
        text-decoration: underline;
        color: #d2d2d2;
    }

.solutions {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--maxlayoutwidth);
}

.solutionstitlebox {
    grid-area: 1 / 1 / 2 / 6;
    padding-top: 4rem;
}

.solutionstitle {
    font-size: 1.6rem;
    text-align: center;
    margin-top: 0;
}

.solutionsgrid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
    margin-top: 2rem;
    gap: 1rem;
    grid-template-areas: 'Bild1' 'Text1' 'Bild2' 'Text2' 'Bild3' 'Text3' 'Bild4' 'Text4' 'Bild5' 'Text5' 'Bild6' 'Text6';
}

.solutionspic1 {
    grid-area: Bild1;
}

.solutionspic2 {
    grid-area: Bild2;
}

.solutionspic3 {
    grid-area: Bild3;
}

.solutionspic4 {
    grid-area: Bild4;
}

.solutionspic5 {
    grid-area: Bild5;
}

.solutionspic6 {
    grid-area: Bild6;
}

.solutiontext1 {
    grid-area: Text1;
}

.solutiontext2 {
    grid-area: Text2;
}

.solutiontext3 {
    grid-area: Text3;
}

.solutiontext4 {
    grid-area: Text4;
}

.solutiontext5 {
    grid-area: Text5;
}

.solutiontext6 {
    grid-area: Text6;
}

.solution1 {
    display: block;
}

.solutiontext {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: justify;
}

.solutiontitle {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

.topics {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    max-width: var(--maxlayoutwidth);
    margin-top: 0;
}

.topicleft {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    padding-top: 3rem;
    grid-template-areas: 'Bild' 'Text';
}

.topicright {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    padding-top: 3rem;
    grid-template-areas: 'Bild' 'Text';
}

.topicimgright {
    width: 100%;
    height: 100%;
    grid-area: Bild;
}

.topicimgleft {
    width: 100%;
    height: 100%;
    grid-area: Bild;
}

.topictextleft {
    grid-area: Text;
}

.topictextright {
    grid-area: Text;
}

.topicstitle {
    font-size: 1.6rem;
    margin-top: 0;
    text-align: center;
}

.topicssubtitle {
    text-align: center;
    font-size: 0.8rem;
    margin-top: 0;
    margin-bottom: 0;
}

.topictitle {
    font-size: 1.4rem;
}

.topictext {
    font-size: 0.8rem;
    margin-top: 1rem;
    font-weight: normal;
    margin-bottom: 0;
}

.contact {
    padding-top: 4rem;
}

.contactbox {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border-radius: 3rem;
    border: 1px solid #ff0000;
    padding: 1.5rem 3rem;
    box-sizing: border-box;
    margin-top: 0;
    max-width: var(--maxlayoutwidth);
}

.loginbox {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border-radius: 3rem;
    border: 1px solid #ff0000;
    padding: 1.5rem 3rem;
    box-sizing: border-box;
    margin-top: 0;
    max-width: 30rem;
}

.orderbox {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border-radius: 3rem;
    border: 1px solid #ff0000;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
    margin-top: 0;
}

.contactsubtitle {
    font-size: 1rem;
    text-align: center;
}

.ordersubtitle {
    font-size: 0.8rem;
    text-align: center;
}

.contacttitle {
    text-align: center;
    font-size: 1.6rem;
}

.ordertitle {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 0;
}

.loginform {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    width: 100%;
}

.orderform {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    width: 100%;
}

.contactform {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    width: 100%;
}

.loginbtn {
    display: block;
    background-color: #ff0000;
    font-size: 1rem;
    color: #fdfdfd;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 2rem;
    border-radius: 1.2rem;
    cursor: pointer;
    background: linear-gradient(var(--cta1), var(--cta2));
    transition: --cta1 0.5s, --cta2 2s;
    hyphens: none;
    word-break: keep-all;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}

    .loginbtn:hover {
        background-color: #0000ff;
        border: 2px solid #11113a;
        --cta1: #0000ff;
        --cta2: #11113a;
    }

.orderbtn {
    display: block;
    background-color: #ff0000;
    font-size: 1rem;
    color: #fdfdfd;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 2rem;
    border-radius: 1.2rem;
    cursor: pointer;
    background: linear-gradient(var(--cta1), var(--cta2));
    transition: --cta1 0.5s, --cta2 2s;
    hyphens: none;
    word-break: keep-all;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}

    .orderbtn:hover {
        background-color: #0000ff;
        border: 2px solid #11113a;
        --cta1: #0000ff;
        --cta2: #11113a;
    }

.validation-message {
    display: block;
    font-size: 0.6rem;
    color: var(--primary4);
}

.contactsend {
    display: block;
    background-color: #ff0000;
    margin-top: 1rem;
    font-size: 1rem;
    margin-left: auto;
    color: #fdfdfd;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 2rem;
    border-radius: 1.2rem;
    cursor: pointer;
    background: linear-gradient(var(--cta1), var(--cta2));
    transition: --cta1 0.5s, --cta2 2s;
    hyphens: none;
    word-break: keep-all;
    white-space: nowrap;
}

    .contactsend:hover {
        background-color: #0000ff;
        border: 2px solid #11113a;
        --cta1: #0000ff;
        --cta2: #11113a;
    }

.login {
    padding-top: 4rem;
}

.loginbox {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border-radius: 3rem;
    border: 1px solid #ff0000;
    padding: 1.5rem 3rem;
    box-sizing: border-box;
    margin-top: 0;
    max-width: 30rem;
}

.loginform {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
    width: 100%;
}

.loginbtn {
    display: block;
    background-color: #ff0000;
    font-size: 1rem;
    color: #fdfdfd;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 2rem;
    border-radius: 1.2rem;
    cursor: pointer;
    background: linear-gradient(var(--cta1), var(--cta2));
    transition: --cta1 0.5s, --cta2 2s;
    hyphens: none;
    word-break: keep-all;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}

    .loginbtn:hover {
        background-color: #0000ff;
        border: 2px solid #11113a;
        --cta1: #0000ff;
        --cta2: #11113a;
    }


.endspace {
    width: 100%;
    height: 6rem;
}

.formdisclaimer {
    text-align: justify;
    margin-top: 2rem;
    font-size: 0.8rem;
}

.contactlabel {
    display: block;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
}

.orderlabel {
    display: block;
    font-size: 0.8rem;
    width: 100%;
    vertical-align: baseline;
}

.proof {
    display: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--maxlayoutwidth);
    margin-top: 2rem;
}

.prooftitle {
    text-align: center;
    font-size: 1.6rem;
}

.proofsubtitle {
    font-size: 1rem;
    text-align: justify;
}

.proofgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 2rem;
}

.proofcell {
    display: block;
    width: 100%;
    height: 100%;
}

.proofimg {
    display: block;
}

.impressumaddr {
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 0;
}

.aboutus {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--maxlayoutwidth);
}

.impressum {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    max-width: var(--maxlayoutwidth);
}

.datenschutzsection {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    max-width: var(--maxlayoutwidth);
    hyphens: none;
}

.agbsection {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    max-width: var(--maxlayoutwidth);
    hyphens: none;
}

    .agbsection div {
        font-size: 0.8rem;
        line-height: 1.25;
        margin-bottom: 0.8rem;
    }

.kundenbereich {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
}

.ordersection {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    grid-area: Step;
}

.orderdetails {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    grid-area: Step;
    max-width: var(--maxlayoutwidth);
}

.orderoverview {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    grid-area: Overview;
}

.clientnotice {
    display: block;
    width: 100%;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 6rem;
    resize: both;
    box-sizing: border-box;
    overflow: auto;
}

.offers {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--maxlayoutwidth);
}

.aboutustitle {
    text-align: center;
    font-size: 1.6rem;
    padding-top: 4rem;
}

.aboutussubtitle {
    font-size: 1rem;
    text-align: center;
}

.topicstitlebox {
    padding-top: 4rem;
}

.company {
    font-size: 1.5rem;
    font-weight: 400;
    color: #ff0000;
    text-transform: lowercase;
    font-style: normal;
    font-family: 'Kalam', cursive;
    margin-left: 1rem;
    text-align: center;
    text-decoration: none;
}

.imgfullwidth {
    width: 100%;
}

.fullwidthheight {
    width: 100%;
}

.naventry {
    display: none;
}

.heroimgbox {
    width: 100%;
    height: 100%;
    grid-area: heroimage;
    background-image: url('../img/heroimg.jpg');
    background-size: cover;
    background-position: center center;
}

.offergrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 'offer1 offer2' 'offer3 offer4' 'offer5 offer6';
    width: 100%;
    gap: 1rem;
}

.offerbox {
    border: 1px solid #000000;
    border-radius: 3rem;
    background-color: #ffffff;
    padding: 0.8rem;
    width: 100%;
}

.offertitle {
    text-align: center;
    hyphens: auto;
}

.offerbtnbox {
    text-align: center;
    width: 100%;
    margin-bottom: 1rem;
}

.offerbtn {
    border-width: 1px;
    border-style: solid;
    border-radius: 1rem;
    padding: 0.2rem 2rem;
}

.offerdetails {
    list-style-type: circle;
    hyphens: auto;
}

.offerdetail {
    font-size: 0.8rem;
}

.orderofferdetails {
    hyphens: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
}

.angebotdetail {
    display: block;
    font-size: 0.8rem;
}

label.angebotdetail {
    margin-bottom: 0.8rem;
}

.offerprice {
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-bottom: 1rem;
}

.offersubtitle {
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 1rem;
}

.offer1 {
    grid-area: offer1;
}

.offer2 {
    grid-area: offer2;
}

.offer3 {
    grid-area: offer3;
}

.offer4 {
    grid-area: offer4;
}

.offer5 {
    grid-area: offer5;
}

.offer6 {
    grid-area: offer6;
}


.inputrequired {
    color: #ff0000;
    font-weight: bold;
}

.impressumtitle {
    text-align: center;
    font-size: 1.6rem;
}

.title {
    text-align: center;
    font-size: 1.6rem;
}

.impressumtext {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
}

.kundenbereichtext {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.2;
}

.datenschutzsection p {
    font-size: 0.8rem;
}

.datenschutzsection a {
    color: #6c0000;
    text-decoration: none;
}

    .datenschutzsection a:hover {
        color: #d70000;
        text-decoration: underline;
    }

.datenschutzsection li {
    font-size: 0.8rem;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

.einzug {
    padding-left: 1.6rem;
}

.imgshadow {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.solutionsubtitle {
    text-align: center;
    font-size: 1rem;
}

.kontaktinput {
    display: block;
    width: 100%;
    font-size: 1rem;
    box-sizing: border-box;
}

.kontakttextarea {
    display: block;
    width: 100%;
    font-size: 1rem;
    line-height: 1.25;
    height: 11rem;
}

.onecol {
    width: 100%;
}

.multicol {
    width: 100%;
    display: flex;
    gap: 1rem;
    align-content: space-between;
}

.col6 {
    width: 6rem;
    flex-grow: 0;
    flex-shrink: 0;
}

.col100 {
    width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
}

.filemanagergrid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 6rem 1rem;
    grid-template-rows: auto;
    grid-template-areas: 'Dateiname Dateigroesse Aktion';
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.filename {
    font-size: 0.8rem;
    padding-left: 0.5rem;
}

.filesize {
    font-size: 0.8rem;
    text-align: right;
}

.fileaction {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: transparent;
}

    .fileaction:hover {
        background-color: #ffd4d4;
    }

.fileicon {
    width: 100%;
    height: 100%;
}

.fileerror {
    font-size: 0.8rem;
    color: red;
}

.ordercheckbox {
    box-sizing: border-box;
    width: 1rem;
    height: 0.7rem;
    vertical-align: text-top;
}

.angebotdetail div {
    font-weight: normal;
}

.progressgrid {
}

.progressnumber {
    font-size: 0.75rem;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    border-radius: 100%;
    border: 2px solid #ff6c70;
    width: 1rem;
    height: 1rem;
    color: #ff6c70;
    font-weight: 700;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
}

.progressname {
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
}

.progresstitle {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.progressstep1 {
    display: flex;
    align-items: center;
}

.progressstep2 {
    display: flex;
    align-items: center;
}

.progressstep3 {
    display: flex;
    align-items: center;
}

.progressstep4 {
    display: flex;
    align-items: center;
}

.progressstep5 {
    display: flex;
    align-items: center;
}

.progressstep6 {
    display: flex;
    align-items: center;
}

.progressstep {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.2rem;
    color: #000000;
}

    .progressstep:hover {
        background-image: linear-gradient(to right, rgb(255, 217, 217) 20%, rgb(255, 255, 255) 69%);
        border-radius: 1rem;
        background-color: #ffd9d9;
        color: #ff0007;
    }

.progressstepactive {
    display: flex;
    align-items: center;
    padding: 0.2rem;
    background-image: linear-gradient(to right, #ffe8e8 20%, rgb(255, 255, 255) 69%);
    border-radius: 1rem;
    background-color: #ffd9d9;
    color: #ff0007;
}

.progressstepdisabled {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.2rem;
    color: #666666;
}

.progressnumberdisabled {
    font-size: 0.75rem;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    border-radius: 100%;
    border: 2px solid #fdafb1;
    width: 1rem;
    height: 1rem;
    color: #fdafb1;
    font-weight: 700;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
}

.progressgrid {
    padding-left: 0.75rem;
}

.bestdetailgrid {
    display: grid;
    grid-template-columns: 2.4rem 1fr 3.75rem;
    grid-template-rows: auto;
    gap: 0.4rem;
    grid-template-areas: 'Menge Detail Preis';
    font-size: 0.75rem;
    line-height: 1rem;
    padding-bottom: 0.2rem;
}

.bestsumgrid {
    display: grid;
    grid-template-columns: 2.4rem 1fr 3.75rem;
    grid-template-rows: 1rem;
    gap: 0.4rem;
    grid-template-areas: 'Menge Detail Preis';
    font-size: 0.75rem;
    line-height: 1rem;
    border-top-width: 1px;
    border-top-style: solid;
    padding-top: 0.2rem;
}

.bestcolright {
    text-align: right;
}

.besthinweis {
    font-size: 0.625rem;
    margin-top: 0.8rem;
}

.ordergrid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-auto-rows: auto;
    column-gap: 1rem;
    grid-template-areas: 'Overview' 'Step';
    width: 100%;
    max-width: var(--maxlayoutwidth);
    margin-left: auto;
    margin-right: auto;
    row-gap: 1rem;
}

.offerdetailcb {
    height: 0.8rem;
    width: 0.8rem;
}

.offerfootnote {
    font-size: 0.625rem;
    font-style: italic;
}

.offerinputnumber {
    text-align: right;
    font-size: 1rem;
    font-weight: bold;
    width: 2rem;
}

.offerinputnumberbig {
    text-align: right;
    font-size: 1rem;
    font-weight: bold;
    width: 5rem;
}

.loginor {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.loginerror {
    font-size: 0.8rem;
    text-align: center;
    color: #ff0000;
}

.ordertextred {
    color: var(--primary3);
}

.bestref {
    text-decoration: none;
    color: var(--primary4);
}

    .bestref:hover {
        color: var(--primary3);
    }


@media (min-width:768px) {
    :root {
        --maxlayoutwidth: calc(100% - 10vmin);
    }

    .solutionsgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        width: 100%;
        margin-top: 2rem;
        gap: 1rem;
        grid-template-areas: 'Bild1 Bild2' 'Text1 Text2' 'Bild3 Bild4' 'Text3 Text4' 'Bild5 Bild6' 'Text5 Text6';
    }
}

@media (min-width:1024px) {
    .herogrid {
        grid-template-rows: 1rem auto 1rem;
        gap: 1rem;
    }

    .herotitle {
        padding: 0 1rem;
    }

    .pretitle {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .posttitle {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .herbutton {
        font-size: 1rem;
        padding: 0.2em 1em;
        border: 2px solid #292929;
        border-radius: 3rem;
    }

    .herobutton:hover {
        border: 2px solid #11113a;
    }

    .cta-button {
        padding: 0.2rem 1rem;
        font-size: 1rem;
        border-radius: 1rem;
        border: 2px solid #292929;
    }

    .title {
        font-size: 1.8rem;
    }

    .topicleft {
        display: grid;
        grid-template-columns: 3fr 4fr;
        grid-template-rows: auto;
        gap: 1rem;
        padding-top: 3rem;
        grid-template-areas: 'Bild Text';
    }

    .topicright {
        display: grid;
        grid-template-columns: 4fr 3fr;
        grid-template-rows: auto;
        gap: 1rem;
        padding-top: 3rem;
        grid-template-areas: 'Text Bild';
    }

    .topictitle {
        margin-top: 0;
    }

    .topictextleft {
        grid-area: Text;
        text-align: right;
    }

    .topictextright {
        grid-area: Text;
        text-align: left;
    }

    .solutionsgrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        width: 100%;
        margin-top: 2rem;
        gap: 1rem;
        grid-template-areas: 'Bild1 Bild2 Bild3' 'Text1 Text2 Text3' 'Bild4 Bild5 Bild6' 'Text4 Text5 Text6';
    }

    .offergrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 'offer1 offer2 offer3' 'offer4 offer5 offer6';
        width: 100%;
        gap: 1rem;
    }

    .contactform {
        display: grid;
        box-sizing: border-box;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 1rem;
        width: 100%;
    }
}

@media (min-width:1280px) {
    :root {
        --maxlayoutwidth: calc(100% - 20vmin);
    }

    .naventry {
        display: block;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        height: 2.8rem;
        padding-top: 0.8rem;
        box-sizing: border-box;
        text-decoration: none;
        color: #911010;
    }

        .naventry:hover {
            background-color: rgba(255, 151, 151, 0.1);
            color: #d70000;
        }

            .naventry:hover > span {
                color: #d70000;
            }

    .menuentry {
        font-size: 16px;
    }

    .topicleft {
        display: grid;
        grid-template-columns: 4fr 3fr;
        grid-template-rows: auto;
        gap: 2rem;
        padding-top: 3rem;
        grid-template-areas: 'Bild Text';
    }

    .topicright {
        display: grid;
        grid-template-columns: 3fr 4fr;
        grid-template-rows: auto;
        gap: 2rem;
        padding-top: 3rem;
        grid-template-areas: 'Text Bild';
    }

    .ordergrid {
        display: grid;
        grid-template-columns: 5fr 20rem;
        grid-template-rows: auto;
        grid-auto-rows: auto;
        column-gap: 1rem;
        grid-template-areas: 'Step Overview';
        width: 100%;
        max-width: var(--maxlayoutwidth);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width:1920px) {
    :root {
        --maxlayoutwidth: 1720px;
    }

    .menuentry {
        font-size: 1rem;
    }
}
