@charset "utf-8";
/* CSS Document */



/* ====================================================================================================================================
                ----- BODY -----
    ==================================================================================================================================== */

/* Seiteninhalte */

/* Level 2 - Die Modell-Menüs */

.set-card-Container {
    display: flex;
    flex-flow: row wrap;
    width: 1200px;
    justify-content: center;
    margin: 0px auto 75px auto;}

div.set-card {
    position: relative;
    flex: none;
    width: 180px;
    height: 421px;
    text-align: center;
    padding: 0px;
    margin: 10px 25px 50px 25px;
    border: 1px solid black;
box-sizing: content-box;}
div.set-card-picture-frame {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 176px;
    height: 250px;
    overflow: hidden;
    transition-duration: 0.5s;}
img.set-card-picture {position: relative; box-sizing: border-box;}

.set-card:focus .set-card-picture-frame, .set-card:hover .set-card-picture-frame, .set-card:active .set-card-picture-frame {transform: scale(122%); top: -10px;}
.set-card:focus .set-card-description, .set-card:hover .set-card-description, .set-card:active .set-card-description {display: block;}

section.set-card-category {
    position: absolute;
    top: 110px;
    left: 0px;
    width: 180px;
    height: 290px;
    text-align: center;
    color: dimgray;
    padding-top: 160px;
    background: none;}

.set-card h3 {font-size: 1.5em; margin-bottom: 7px;}
.set-card h4 {color: rgba(80,80,80,1.00);}
.set-card h5 {font-size: 1em;}

.set-card li {
    list-style: disc;
    text-align: left;
    font-size: 1em;
    margin-left: 15px;}

.set-card-description {
    display: none;
    position: relative;
    top: 255px;
    left: -35px;
    width: 250px;
    padding: 15px 25px 25px 25px;
    margin: 0px;
    background: rgb(253,251,255);
    box-shadow: 2px 2px 2px 1px dimgray;
    z-index: 50;}


#set-card-picture-1 {
    height: 100%;
    top: 0px;
    left: -85px;
    filter: brightness(1.2) contrast(1.1) saturate(1.2) ;}
#set-card-picture-2 {
    height: 100%;
    top: 0px;
    left: -50px;}
#set-card-picture-3 {
    height: 100%;
    top: 0px;
    left: -110px;}
#set-card-picture-4 {
    height: 100%;
    top: 0px;
    left: 0px;}
#set-card-picture-5 {
    height: 100%;
    top: 0px;
    left: -40px;}
#set-card-picture-6 {
    height: 100%;
    top: 0px;
    left: -40px;}
#set-card-picture-7 {
    height: 100%;
    top: 0px;
    left: 0px;}
#set-card-picture-8 {
    height: 100%;
    top: 0px;
    left: -50px;}
#set-card-picture-9 {
    height: 100%;
    top: 0px;
    left: -40px;}



/* Level 2 - Die Preis-Tabelle */

#Preise {
    margin: 0px auto;
    width: 96%;
    max-width: 850px;
}

table {
    width: 100%;
    margin: 0px;
    border-collapse: separate;
    border-spacing: 0px 15px;
}

th {
    border-bottom: 2px solid rgb(169,169,169);
    padding: 10px 20px 10px 40px;
    text-align: left;
    font-family: museo-sans-rounded;
    font-size: 1.1em;
    font-weight: 500;
    color: rgb(13,0,130);
}

td {
    border-bottom: 1px solid rgb(169,169,169);
    padding: 0px 20px 7px 15px;
    line-height: 1.1em;
    font-variant-ligatures: common-ligatures;
    font-variant-numeric: lining-nums;
}

.table-right {text-align: right; padding-left: 30px;}





/* ====================================================================================================================================
                ----- Seitenkopf- und Fußteil - Media-Queries und Responsiv-Design -----
    ==================================================================================================================================== */

/* BREAKPOINTS AND RESPONSIVE-DESIGN */


/* Die Ausrichtung der oberen Seiteninhalte und ein paar Formatierungen */

@media (max-width: 2000px) {h2 {font-size: 2.2em;} }

@media (max-width: 1500px) {h2 {font-size: 2.0em;} }

@media (max-width: 1400px) {.set-card-Container {width: 90%; max-width: 700px;} }

@media (max-width: 1200px) {h2 {font-size: 1.8em;} }

@media (max-width: 800px) {h2 {font-size: 1.7em;} }

@media (max-width: 550px) {
    
    h2 {font-size: 1.5em;}
    .set-card-Container {width: 96%;}
}
    
@media (max-width: 550px) and (min-width: 380px) {
    
    div.set-card {
        width: 150px;
        height: 371px;
        margin: 10px 12px 35px 12px;}
    
    div.set-card-picture-frame {
        left: 2px;
        width: 146px;
        height: 205px;}
    
    section.set-card-category {
        top: 110px;
        left: 0px;
        width: 150px;
        height: 240px;
        padding-top: 115px;}
    
    .set-card h3 {font-size: 1.4em; margin-bottom: 7px;}
    .set-card h4 {font-size: 1.1em; color: rgba(80,80,80,1.00);}
    .set-card h5 {font-size: 0.85em;}

.set-card p, .set-card li {
    font-size: 17px;
    margin-left: 10px;}
    
    .set-card-description {top: 205px; width: 220px;}
    #description-1, #description-3, #description-5, #description-7 {left: -15px;}
    #description-2, #description-4, #description-6, #description-8 {left: -55px;}
    #description-9 {left: -48px;}
    
    .set-card:focus .set-card-picture-frame, .set-card:hover .set-card-picture-frame, .set-card:active .set-card-picture-frame {transform: scale(111%);}
}

@media (max-width: 380px) {
    
    .set-card-Container {width: 100%;}
    
    th {
        border-bottom: 2px solid rgb(169,169,169);
        padding: 10px 10px 10px 10px;
        text-align: left;
        font-family: museo-sans-rounded;
        font-size: 1.0em;
        font-weight: 500;
        color: rgb(13,0,130);}

    td {
        border-bottom: 1px solid rgb(169,169,169);
        padding: 0px 10px 7px 10px;
        font-size: 0.95em;
        line-height: 1.1em;
        font-variant-ligatures: common-ligatures;
        font-variant-numeric: lining-nums;}
}