@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/quicksand-v36-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/quicksand-v36-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
* {
    margin: 0;
    padding: 0;
}
body {
    background-image: linear-gradient(to bottom right, #f5f3f1, rgb(255 255 255) 50%);
    font-family: 'Quicksand', sans-serif;
}
.index_container {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-wrap: nowrap;
}
.index_left_col, .index_right_col {
    position: relative;
    flex-basis: 50%;
}
.logo {
    width: 35%;
    margin-top: 5%;
    margin-left: 8%;
    display: block;
}
.index_left_content {
    position: absolute;
    max-width: 100%;
    top: 50%;
    left: 8%;
    right: 8%;
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);                /* damit wird dieser Bereich vertikal genau zentriert */
}
.index_left_content h1 {
    font-size: clamp(1.6rem, 2.3vw, 2.7rem);
}
.index_left_content h2 {
    font-size: clamp(1.4rem, 2.12vw, 2.5rem);
}
.index_left_content a {
    max-width: 45%;
    margin: 3em auto 0;
    padding: 0.6em 2em;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-image: linear-gradient(to right, var(--main-brand-color), var(--accent-color));
    color: var(--secondary-text-color);
    font-size: clamp(1rem, 1.2vw, 1.8rem);          /* wie h3 */
    text-decoration: none;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 150ms ease-in, opacity 150ms ease-in;
}
.index_left_content a:hover {
    opacity: 0.6;
    transform: scale(0.98);
}
.index_left_content a:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 4px;
}
#idIndexBtn img {
    width: 18%;
}
.index_right_col {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to top right, #00235b, var(--accent-color));
}  
.img_slider {
    position: relative;
    width: 93%;
    margin: 0 auto;
    padding-top: 2%;
    border-radius: 10px;
    overflow: hidden;
}
.img_slider img {
    width: 100%;
    display: block;
    border-radius: 10px;
    scale: 1;
    transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out;
}
.index_img_controlls {
    width: 100%;
    margin: -5% 0 2% 0;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 2%;
    z-index: 1;
}
 .index_img_controlls button {
    background: none;
    font-size: clamp(1.4rem, 1.8vw, 2.4rem);        /* wie h1 */
    color: var(--secondary-text-color);
    border: none;
    cursor: pointer;
    transition: transform 150ms ease;
}
.index_img_controlls button:hover {
    transform: scale(1.2);
}
.index_img_controlls button:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}
.index_vertical_line {
    width: 3px;
    background-color: var(--secondary-text-color);
    color: var(--secondary-text-color);
    z-index: 2;
}
.grid_container {
    width: 90%;
    height: auto;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 3fr 3fr;
    grid-template-rows: 1fr 3fr 2fr;
    grid-template-areas:
    "h3_sprechzeit h3_sprechzeit h3_kontakt"
    "sprechzeit_zeit sprechzeit_zeit kontaktdaten"
    "schliesszeit schliesszeit schliesszeit";
}
#idH3Sprechzeit {
    display: flex;
    align-items: center;
    /* font-size: 1.2vw; */
    color: var(--primary-color);
    grid-area: h3_sprechzeit;
}
#idH3Kontaktdaten {
    display: flex;
    align-items: center;
    /* font-size: 1.2vw; */
    color: var(--primary-color);
    grid-area: h3_kontakt;
}
.grid_container h4 {
    /* font-size: 1vw; */
    color: var(--primary-color);
}
.grid_container p {
    margin-bottom: 0.6vh;
    /* font-size: 1vw; */
    color: var(--secondary-text-color);
}
.sprechzeiten_liste {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-area: sprechzeit_zeit;
}
.sprechzeit_zeile {
    display: contents;          /* Erlaubt dt und dd, sich im Grid des Elternelements zu positionieren */
    /* display: flex; */
}
.sprechzeiten_liste dt, .sprechzeiten_liste dd {
    font-size: clamp(0.95rem, 1vw, 1.4rem);
    color: var(--secondary-text-color);
    margin-bottom: 0.6vh;
}
.index_geschlossen {
    width: 100%;
    grid-area: schliesszeit;
}
.kontakt_container {
    margin: 0;
    grid-area: kontaktdaten;
}
.kontakt_container p {
    color: var(--secondary-text-color);
    /* font-size: 1vw; */
}
.kontakt_container p a {
    text-decoration: none;
    /* font-size: 1vw; */
    color: var(--secondary-text-color);
    transition: color 150ms ease-in;
}
.kontakt_container p a:hover {
    color: var(--primary-color);
}
.fon,
.fax,
.mail {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}
svg {
    width: clamp(0.95rem, 1vw, 1.4rem);
    height: auto;
    /* width: 1vw;
    height: 2vh; */
    fill: var(--secondary-text-color);
}

@media (prefers-reduced-motion: reduce) {
    .index_left_content a { transition: none; }
    .index_img_controlls button { transition: none; }
    .img_slider img { transition: none; }
}

@media (min-width: 2000px) {
    .grid_container {
        margin: -2% auto 0 auto;
    }
}

@media (max-width: 1279px) {
    .grid_container h4 {
        font-size: clamp(1rem, 1.1vw, 1.8rem);
    }
    .grid_container p,
    .sprechzeiten_liste dt,
    .sprechzeiten_liste dd {
        font-size: clamp(0.8rem, 0.8vw, 1.1rem);
    }
    .index_left_content a {
        max-width: 50%;
        font-size: clamp(0.9rem, 1vw, 1.4rem);       
    }
}
@media (max-width: 1080px) {
    .index_left_content h1 {
        font-size: clamp(1.2rem, 1.5vw, 2.2rem);
    }
    .index_left_content h2 {
        font-size: clamp(1.1rem, 1.4vw, 2.1rem);
    }
    .index_left_content a {
        max-width: 50%;
        font-size: clamp(0.9rem, 1vw, 1.4rem);       
    }
    #idIndexBtn img {
        width: 15%;
    }
    .grid_container {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr 3fr 2fr 1fr 4fr;
        grid-template-areas:
        "h3_sprechzeit h3_sprechzeit"
        "sprechzeit_zeit sprechzeit_zeit"
        "schliesszeit schliesszeit"
        "h3_kontakt h3_kontakt"
        "kontaktdaten kontaktdaten";
    }
    #idH3Sprechzeit,
    #idH3Kontaktdaten {
        font-size: clamp(1rem, 1.2vw, 2rem);
    }
    .grid_container h4 {
        font-size: clamp(1rem, 1.1vw, 1.8rem);
    }
    .grid_container p {
        font-size: clamp(0.8rem, 0.8vw, 1.1rem);
    }
    .sprechzeiten_liste dt,
    .sprechzeiten_liste dd {
        font-size: clamp(0.8rem, 0.8vw, 1.1rem);
        margin-bottom: 0.6vh;
    }
}
@media (max-width: 799px) {
    .index_left_content a {
        max-width: 70%;
    }
}
@media (max-width: 600px) {
    body {
        background-image: linear-gradient(to bottom right, #f5f3f1, rgb(255 255 255) 50%);
    }
    .index_container {
        height: 100vh;
        flex-direction: column;
    }
    .index_left_col {
        flex: 1;                    /*flex: 1 -> dadruch wird der verfügbareverfügbare Platz ausgefüllt (untere div = min-height, diese obere div den Test bis zu 100vh)*/
    }
    .logo {
        width: 50%;
        margin: 4% 0 0 6%;
    }
    .index_left_content {
        position: relative;
        width: 85%;
        top: 40%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .index_left_content h1 {
        font-size: clamp(1.5rem, 3.9vw, 3.1rem);
    }
    .index_left_content h2 {
        font-size: clamp(1.38rem, 3.6vw, 2.7rem);
    }
    #idIndexBtn {
        width: 70%;
        margin-top: 1em;
        margin-bottom: 1em;
        font-size: clamp(1.1rem, 2.4vw, 2rem);
    }
    .index_right_col {
        max-height: min-content;
        background-image: linear-gradient(to top right, #00235b, var(--accent-color));
    }
    .img_slider {
        width: 85%;
        padding-top: 1%;
    }
    .img_slider img {
        border-radius: 6px;
    }
    .index_img_controlls {
        margin: -7% 0 0 0;
    }
    .index_img_controlls button {
        font-size: clamp(1.4rem, 4vw, 2rem);
    }
    .grid_container {
        width: 85%;
        margin: 1em auto 0;
        grid-template-columns: 2fr 4fr 4fr;
        grid-template-rows: 1fr 3fr 2fr;
        grid-template-areas:
        "h3_sprechzeit h3_sprechzeit h3_kontakt"
        "sprechzeit_zeit sprechzeit_zeit kontaktdaten"
        "schliesszeit schliesszeit schliesszeit";
    }
    .grid_container p,
    .kontakt_container p,
    .kontakt_container p a,
    .sprechzeiten_liste dt,
    .sprechzeiten_liste dd {
        font-size: clamp(0.6rem, 2vw, 0.6rem);
    }
    svg {
        width: clamp(0.6rem, 2vw, 1rem);
    }
}
@media (max-width: 480px) {
    .index_left_content h1 {
        font-size: clamp(1rem, 4.5vw, 3rem);
    }
    .index_left_content h2 {
        font-size: clamp(0.93rem, 4.14vw, 2.5rem);
    }
    .grid_container {
        margin: 0.5em auto 0;
    }
    .grid_container p,
    .kontakt_container p,
    .kontakt_container p a,
    .sprechzeiten_liste dt,
    .sprechzeiten_liste dd {
        font-size: clamp(0.6rem, 2vw, 0.6rem);
    }
    svg {
        width: clamp(0.6rem, 2vw, 1rem);
    }
}