:root {
    --light-rgb: 223, 246, 208; /* verwenden wie: rgba(var(--light-rgb),0.95) */
    --light-hex: #dff6d0;
    --dark-rgb: 47, 67, 15;
    --dark-hex: #2f430f;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* background-image: url('../resources/Hintergrund-gross-komprimiert.jpg');
    background-attachment:fixed ;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: top; */
    scroll-behavior: smooth;
    background-color: var(--dark-hex);

}

/* Apple auf iOS: nix background-attachment fixed. Also zurechtpfuschen. */
#background-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;

}
/* Hintergrundbild ist 4:3, also width bzw. height abhängig von aspect ratio setzen*/
@media screen and (max-aspect-ratio: 4/3) {
    #background-image > img {
        height: 100%;
    }
}
@media screen and (min-aspect-ratio: 4/3) {
    #background-image > img {
        width: 100%;
    }
}


/* start header */

header{
    background: rgba(223,246,208,0.5);
    font-size: 2rem;
    font-weight: bold;
    padding: 20px 20px 15px 15px;
    border-bottom: 5px solid #2f430f;
}
header>br { display: none;}
header>#vertbar {display: inline;}
@media screen and (max-width: 600px) {
    header {padding: 10px;}
    header>br {display: inline;}
    header>#vertbar {display: none;}
    header {font-size: calc(1rem + 3vw);}
    header>#tagline {font-size:6vw; font-weight: 600;}
}
@media screen and (min-width: 500px) and (max-width: 600px) {
    header>#tagline {font-size: calc(1rem + 3vw);}
}

/* end header */


/* general styling */

body {
    font-family: Georgia, "Bitstream Charter" serif;
    font-size: 1rem; 
}

@media screen and (max-width: 768px){ 
    body {
        margin: 0;
        padding: 0;
    }
    .short-portrait {
        padding: 15px 0;
    }
    h2 {
    padding: 10px 20px 10px 15px;
    }
    .go-to-portrait {
        display: none;
    }
}
@media screen and (min-width: 768px){ 
    body {
        margin: 0 17vw 0 17vw;
        padding: 0;
    }
    .short-portrait {
        padding: 15px 15px;
    }
    h2 {
    padding: 10px 20px 10px 0px;
    }
}

h4 {
    padding-bottom: .2rem;
}


h2 {
    background: rgba(223,246,208,0.9);
}

a {
    color: #2f430f;
}




/* First section */

section#start {
    background: rgba(223,246,208,0.85);
    display: grid;
    /* Hier kein Padding, bringt die Karte durcheinander */
}
#Baraton {
    grid-area: Baraton;
}
#Frankreichkarte-container {
    grid-area: Frankreichkarte-container;
    padding: 20px 10px;
}

.quote {
    font-size: 1.2rem;
}
.quote-text {
    font-style: italic;
    padding-bottom: 1.3rem;
}
.quote-text, .quote-author {
    padding-left: 20px;
}





/* short-portrait sections */
.grid {
    display: grid;
}
.short-portrait {
    background: rgba(223,246,208,0.95);
}

.short-portrait-image {
    grid-area: short-portrait-image;
}
.short-portrait-image img {
    max-width: 100%;
    max-height: 100%;
}
.short-portrait-text {
    grid-area: short-portrait-text;
    padding: 10px 15px 10px 15px;
}

.go-to-portrait {
    grid-area: portrait-link;
    padding-left: 15px;
}

.go-to-portrait .arrow-right {
    border: solid #2f430f;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
    margin-left: 5px;
}

.short-portrait:last-child{
    padding-bottom: 10px;
}


/* furhter sections */
    #about-me {
        padding: 0 15px;
    }

@media screen and (max-width: 768px) {
    #about-me h2 {
        padding-left: 0;
    }
}

#about-me {
    border-top: 5px solid var(--dark-hex);
    background-color: rgba(var(--light-rgb),0.95);
}


#about-me .grid{
    padding: 10px 0;
    column-gap: 20px;
}
#impressum {    grid-area: impressum;}
#urheber-karte {grid-area: urheber-karte;}
#ueber-mich {grid-area: ueber-mich;}
#contact-form {
    grid-area: contact-form;
    padding-bottom: 10px;
}
#contact-form textarea {
    width: 100%;
    background-color: rgba(var(--light-rgb),0.85);
}
#contact-form #danke {
    display: none;
}
#about-me .left {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "ueber-mich"
    "contact-form"
    "urheber-karte";
}

@media screen and (max-width: 400px) {
    section#start{
        padding-bottom: 0;
        grid-template-areas:
        "Frankreichkarte-container"
        "Baraton";
    }
    #Frankreichkarte-container {
        min-height: 33vh;
    }
    #Baraton {
        padding: 0 10px 20px 10px;
    }
    
}

@media screen and (min-width: 400px) {
    section#start {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "Baraton Frankreichkarte-container";
        height: 50vh;
    }
    #Baraton {
        padding: 20% 10px 20px 10px;
    }
    
}

@media  screen and (max-width: 768px) {
    section {
        padding-bottom: 15px;
    }
    .short-portrait .grid {
        grid-template-areas:
        "short-portrait-image"
        "short-portrait-text"
        "portrait-link";
    }
    .short-portrait-image img {
        padding: 0 0;
    }
    .weiterlesen {
        display: inline-block;
    }
}

@media  screen and (min-width: 768px) {
    
    .short-portrait .grid {
        grid-template-columns: 5fr 8fr;
        grid-template-areas:
        "short-portrait-image short-portrait-text"
        "short-portrait-image portrait-link";
    }
    #about-me .grid {
        grid-template-columns: 5fr 2fr;
        grid-template-areas: 
        "short-portrait-text short-portrait-image"
        ". short-portrait-image";
    }
    .weiterlesen {
        display: none;
    }
}