/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Datatype:wght@100..900&family=Lilita+One&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Saira:ital,wght@0,100..900;1,100..900&display=swap');


/* Settings whole Website */
* {
    box-sizing: border-box;
    margin:0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
  font-family: "Saira", sans-serif;
  color: rgb(68, 68, 68);
}

.pool_logo_link {
    position: fixed;
    top: 10px;
    left: calc(4% + 10px);
    display: block;
    z-index: 999;
}

.pool_logo {
    max-width: 15%;
    width: 15%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.about {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 33.33%;
    left: 98%;
    transform: translate(-50%, -50%);
    font-size: 16pt;
    writing-mode: sideways-lr;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    color: rgb(68, 68, 68);
    text-shadow: none;
}

.impressum {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 66.66%;
    left: 98%;
    transform: translate(-50%, -50%);
    font-size: 16pt;
    writing-mode: sideways-lr;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    color: rgb(68, 68, 68);
    text-shadow: none;
}

.adresse {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 2%;
    transform: translate(-50%, -50%);
    font-size: 16pt;
    writing-mode: sideways-lr;
    color: inherit;
    text-decoration: none;
}

.about:hover,
.impressum:hover {
    color: rgb(130, 130, 130);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/*----------------------------------
Header
----------------------------------*/
header {
    padding:0 4%;
}

.hero-title {
    position: absolute;
    display: flex;
    padding-left: 24px;
    bottom: 24px;
    font-size: 48px;
    writing-mode: sideways-lr;
}

.intro_img {
    width: 100%;
    height: 100vh;
    display: block;
    margin-bottom: 5px;
    object-fit: cover;
    object-position: center;
}

.lines_wrapper {
    display: flex;
    justify-content: space-between;
}

.lines_item {
    height: 100px;
    width: 2px;
    background-color: black;
}

.lines_item:nth-child(even) {
    height: 75px;
}

/*----------------------------------
Main
----------------------------------*/
main {
    padding: 0 4%;
}

/* --------- Box 1 --------- */
.box1_img {
    width:100%;
    height: 100vh;
    display: block;
    padding-top: 80px;
    object-fit: cover;
    object-position: center;
}

.box1_wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box1 {
    width: 150px;
    height: 50px;
    margin-top: 650px;
    background-color: rgb(216, 216, 216);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13pt;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-shadow: none;
}

/* --------- Box 2 --------- */
.box2_img {
    width:100%;
    height: 100vh;
    display: block;
    padding-top: 40px;
    object-fit: cover;
    object-position: center;
}

.box2_wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box2 {
    width: 150px;
    height: 50px;
    margin-top: 650px;
    background-color: rgb(216, 216, 216);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13pt;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-shadow: none;
}

/* --------- Box 3 --------- */
.box3_img {
    width:100%;
    height: 100vh;
    display: block;
    padding-top: 40px;
    object-fit: cover;
    object-position: center;
}

.box3_wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box3 {
    width: 150px;
    height: 50px;
    margin-top: 650px;
    background-color: rgb(216, 216, 216);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13pt;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgb(176, 176, 176);
    transition: background-color 0.2s ease, color 0.2s ease;
    text-shadow: none;
}

/* --------- Box 4 --------- */
.box4_img {
    width:100%;
    height: 100vh;
    display: block;
    padding-top: 40px;
    border-color: rgb(233, 1, 1);
    object-fit: cover;
    object-position: center;
}

.box4_wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box4 {
    width: 150px;
    height: 50px;
    margin-top: 650px;
    background-color: rgb(216, 216, 216);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13pt;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-shadow: none;
}

.box1:hover,
.box2:hover,
.box3:hover,
.box4:hover {
    background-color: rgb(190, 190, 190);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/*----------------------------------
Footer
----------------------------------*/
footer {
    padding: 0 4%;
}

.footerbox_wrapper {
    position: relative;
    margin-top: 80px;
}
.footerbox_wrapper_sticky {
    position: fixed;
    left: 4%;
    right: 4%;
    bottom: 0;
    margin-top: 0;
}

.footerbox {
    width: 100%;
    height: 150px;
    background-color: rgb(0, 0, 0);
    display:flex;
}

.pool_bottom_link {
    position: absolute;
    width: 20%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: block;
}

.pool_bottom {
    width: 100%;
    height: auto;
    display: block;
}



/*----------------------------------
Unterseiten
----------------------------------*/

/* Allgemeine Eisntellung für Headerbilder */

.header_unterseiten {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    padding-bottom: 40px;
}

/*----------------------------------
 about.html
 ----------------------------------*/
.about_menu {
    padding-top: 20%;
    font-size: 32px;
}

.about_menu p {
    line-height: calc(1em + 30px);
}

/*----------------------------------
campus_galerie.html
----------------------------------*/
.campus_gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 40px;
    padding-top: 80px;
    
}

.campus_gallery_item {
    overflow: hidden;
}

.campus_gallery_item--landscape {
    aspect-ratio: 3 / 2;
}

.campus_gallery_item--medium {
    aspect-ratio: 4 / 3;
}

.campus_gallery_item--portrait {
    aspect-ratio: 3 / 4;
}

.campus_gallery_item--squareish {
    aspect-ratio: 5 / 4;
}

.campus_gallery_image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/*----------------------------------
projektdaten.html
----------------------------------*/
.projektdaten_layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.projektdaten_media_column {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 80px;
    padding-bottom: 40px;
}

.projektdaten_media_image {
    width: 100%;
    height: auto;
    display: block;
}

.projektdaten_text_column {
    width: 50%;
    padding-top: 80px;
    padding-bottom: 40px;
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

.projektdaten_text_column h1 {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 16px;
}

.projektdaten_text_column p {
    font-size: 13pt;
    line-height: 1.4;
    margin-bottom: 16px;
}

/* Impressum.html */
.impressum_text {
    padding-top: 10%;
    font-size: 14px;
    text-align: left;
    max-width: 50%;
}

.impressum_text h1 {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 16px;
}

.impressum_text p {
    line-height: 1.4;
    width: 100%;
    margin: 0;
}

/* wettbewerb.html */
.wettbewerb_text {
    padding-top: 40px;
    font-size: 14px;
    text-align: left;
    max-width: 50%;
}

.wettbewerb_text h1 {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 16px;
}

.wettbewerb_text p {
    line-height: 1.4;
    width: 100%;
    margin: 0;
}


@media (max-width: 752px) {
    .projektdaten_media_column {
        position: sticky;
        top: 20px;
        z-index: 1;
    }

    .projektdaten_text_column {
        position: static;
    }
}