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

:root {
    --white: #ffffff;
    --black:#000000;
    --blau: #04378b;
    --braviablau: #0074bb;
    --backgroundColor:#2e3235;
    --tab-hover: #cccccc;
} 

.tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.tabs [id*='-tab-content-'] {
    display: none;
}

.tabs input[type='checkbox'],
.tabs input[type='radio'] {
    display: none;
}
.tabs label {
    flex: 1;
    padding: 1rem 2rem;
	margin-right: 0.4rem;
    color: var(--white);
    border-left-width: 0;
    background-color: var(--backgroundColor);
    cursor: pointer;
    font-weight: bold;
}
.tabs label:hover,
.tabbs label:focus-visible {
    color: var(--tab-hover);
}

.tabs label:nth-child(2) {
    border-left-width: 1px;
}

.tabs input:checked + label {
    color: var(--black);
    background-color: var(--white);
    font-size: 1.8rem;
    font-weight: 600;
    
}


.tabs-content label {
    border: 0;
}

.tabs-minimal label {
    flex: none;
    padding: 10px;
}

.content {
    display: none;
    width: 100%;
    padding: 15px;
    background: #eee;
}

#tab-1:checked ~ #content-1,    /* Bravia 599-636 */
#tab-2:checked ~ #content-2,
#tab-3:checked ~ #content-3,
#tab-4:checked ~ #content-4,
#tab-5:checked ~ #content-5,    /* Toronto Toscana */
#tab-6:checked ~ #content-6,
#tab-7:checked ~ #content-7,
#tab-8:checked ~ #content-8,
#tab-9:checked ~ #content-9,    /*t60 */
#tab-10:checked ~ #content-10,
#tab-11:checked ~ #content-11,
#tab-13:checked ~ #content-12,
#tab-13:checked ~ #content-13,  /* c60 */
#tab-14:checked ~ #content-14,
#tab-15:checked ~ #content-15,
#tab-16:checked ~ #content-16,
#tab-17:checked ~ #content-17, /* 74GC */
#tab-18:checked ~ #content-18,
#tab-19:checked ~ #content-19,
#tab-20:checked ~ #content-20,
#tab-21:checked ~ #content-21,  /* 69GC */
#tab-22:checked ~ #content-22,
#tab-23:checked ~ #content-23,
#tab-24:checked ~ #content-24,
#tab-25:checked ~ #content-25,  /* man 680 */
#tab-26:checked ~ #content-26,
#tab-27:checked ~ #content-27,
#tab-28:checked ~ #content-28,
#tab-29:checked ~ #content-29,  /* louisiana */
#tab-30:checked ~ #content-30,
#tab-31:checked ~ #content-31,
#tab-32:checked ~ #content-32 {
    display: block;
    height: auto;
}


.tabs button {
    background-color: white;
    color: black;
    font-size: 1.2rem;
    padding: 1rem 2rem;
    border: 1px solid black;
    margin-top: 1.4rem;
    cursor: pointer;
}
.tabs button:hover,
.tabs button:focus-visible {
    border: 1px solid var(--braviablau);
    color: var(--braviablau);
}



/* ############################################################# */

 
.fa-mobile-phone,
.fa-phone {
    color: white;
}

.small {
    font-weight: lighter;
    color: #cccccc;
}
.text-light {
    font-weight: 100;
}

.uppertext {
    text-transform: uppercase;
}
.bg-blue {
    background-color: var(--braviablau);
    padding: 1rem;
    width: auto;
    column-count: 2;
    column-gap: 24px;
    line-height: 1.6rem;
    width: 60%;
}
.bg-blue ul {list-style-type: none; line-height: 2.2rem;}
.bg-blue .fa-check-square-o {
  padding-right: 8px;
  color: white;
}
@media (max-width:650px){
    .bg-blue {
        width: 100%;
        column-count: 1;
    }
}
@media (max-width:1050px){
    .bg-blue {width: 100%;}
}
.text-white {
    color: white;
}
.tab-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 4rem;
}
@media (max-width:650px){
    .tab-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
.foto-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    gap: 2rem;
}
.kontakt {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 4rem;
}
.kontakt h4 {
    line-height: 2.2rem;
    margin-top: 1.4rem;
}
@media (max-width:650px){
    .kontakt {
        grid-template-columns: 1fr;
        gap: 0rem;
    }
}

@media (max-width: 950px) {
    .tabs .tab,
    .tabs label {
        order: initial;
    }
    .tabs label {
        width: 100%;
        margin-right: 0;
        margin-top: 0.2rem;
    }
    .foto-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 560px) {
    .bg-red {
        width: 100%;
    }
   .tab-container {
        grid-template-columns: repeat(1, 1fr); 
        gap: 1rem;       
    } 
    /* .tabs input[type="radio"]:checked + label {
        margin-left: -14px;
    } */
    .foto-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* label:after {
    content:" ▼";
    color: var(--white);
    font-size: 10px;
    padding-left: 5px;
}

label:hover::after,
label:focus-visible::after,
label:visited::after {
    content:"";
    visibility:hidden;
    color: var(--black);
    text-decoration: none;
   
} */

/* input:checked ~ #tabone {
    opacity: 1;
} */