/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
    --schriftakzentfarbe: rgb(122,20,20);
    --schriftlinkfarbe: rgb(75,70,65); 
    --akzentfarbe: rgb(132,64,64);
    --hintergrundfarbe: rgb(236,235,224);
    --baumfarbe: rgb(198,195,175);
    --rahmenfarbe: rgb(95,85,75); /* rgb(62,57,53);*/
    --rahmenhintergrundfarbe: rgba(246,245,234,.8);
    
    --headingschrift: Kalam, cursive; 
    --textschrift: Sarabun, sans-serif;
    font-size: 16px;
}

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

*:focus-visible{
    outline-color: var(--akzentfarbe);
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    font-size: 1rem;
    font-family: var(--textschrift);
}

body {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: -webkit-max-content 1fr -webkit-min-content;
    -ms-grid-rows: max-content 1fr min-content;
    grid-template-rows: -webkit-max-content 1fr -webkit-min-content;
    grid-template-rows: max-content 1fr min-content;
    min-height: 700px;
    
}

body > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    
}

body > *:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    
}

body > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    
}

a, a:visited {
    color: var(--schriftlinkfarbe);
}

a:focus, a:active, a:hover {
    color: var(--akzentfarbe);
}

.color-link, .color-link:visited {
    text-decoration:  none;
    color: var(--schriftakzentfarbe);
}

.color-link:focus, .color-link:active, .color-link:hover{
    color: var(--schriftlinkfarbe);
    text-decoration: underline;
}


/* ALLGEMEIN -------------------------------------------------*/

h1, h2, h3, h4, h5 {
    color: var(--schriftakzentfarbe);
    font-family: var(--headingschrift);
}

noscript {
    position: absolute;
}



/* HEADER + NAV -----------------------------------------------*/

#page-top {
    background-color: var(--hintergrundfarbe);
    border-bottom: 4px solid var(--akzentfarbe);
    padding: .3em .5em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    min-height: 40px;
}

.burger {
    float: left;
    width: 45px;
    height: 45px;
    margin: 5px;
}

#top-left {
    margin-left: 0;
    margin-bottom: 5px;
    width: 100%;
}

#page-top h1 {
    margin: 0 .5em 0 60px;
    text-align: center;
}

.menu-ul {   /* umfasst top-nav und .contact-data Elemente*/
    font-family: var(--headingschrift);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}


h1 .color-link:focus, h1 .color-link:active, h1 .color-link:hover{
    text-decoration: none;
}

.menu-ul li {
    list-style: none;
    display: inline-block;
    margin: 0 .5rem;
}

#top-nav {
    width: 100%;
    background-color: var(--hintergrundfarbe);
    font-size: 1.5rem;
    display: block;
    position: relative;
    z-index: 100;
    left: 0;
}

#top-nav li {
    display: block;
    width: 96%;
    margin: .4em auto;
    border: 3px solid var(--akzentfarbe);
    border-radius: 3px;
    -webkit-box-shadow: 0 0 5px inset var(--akzentfarbe);
            box-shadow: 0 0 5px inset var(--akzentfarbe);
    background-color: rgba(255,255,255,0.7);
    text-align: center;
}

#top-nav li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: .5em .3em;
    font-weight: 600;
}

#top-nav li:focus, #top-nav li:hover, #top-nav li:active  {
    -webkit-box-shadow: 3px 3px 7px var(--akzentfarbe) inset, -3px -3px 7px var(--akzentfarbe) inset;
    box-shadow: 3px 3px 7px var(--akzentfarbe) inset, -3px -3px 7px var(--akzentfarbe) inset;
}

.contact-data {
    font-size: .8em;
}

.contact-data li {
    margin: 0 .5rem;
}

/*  Media Queries header + nav ----------------------------  */
@media screen AND (min-width:800px) {
    #page-top {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    }
    
    #top-left {
        width: auto;
        margin: 0;
    }
    
    #top-right {
        justify-self: flex-end;
    }
    
    #page-top h1 {
        text-align: left;
        margin: 0 .5rem;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }
    
    .burger {
        display: none;
    }
    
    #top-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        position: relative !important;
        left: auto !important;
        font-size: 1.4rem;
    }
    
    #top-nav li {
        display: inline-block;
        width: auto;
        border: 0;
        padding: 0 0.1rem;
        margin: 0.4rem 0.4rem;
        -webkit-box-shadow: 0 3px 2px -2px var(--akzentfarbe);
                box-shadow: 0 3px 2px -2px var(--akzentfarbe);
        background-color: rgba(255,255,255,0);
        line-height: 1.2rem;
    }
    
    #top-nav li a {
        display: inline;
        width: auto;
        height: auto;
        padding: 0;
        font-weight: normal;
    }
    
    #top-nav li:focus, #top-nav li:hover, #top-nav li:active  {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .contact-data {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        margin-right: 0;
        margin-left: auto;
    }
    .contact-data li {
        display: block;
    }
}

@media screen AND (min-width:1501px) {
    #page-top {
        padding: .4em 2rem;
    }
    #top-nav {
        font-size: 1.6rem;
        margin-top: .4em;
        margin-bottom: .3em;
    }
}


/* INHALT  -----------------------------------------------------*/

main {
    height: auto;
    padding: .5rem 3vw;
}

article {
    width: 100%;
    padding: .8em;
    display: block;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
}

article>* {
    margin: .5em 0;
}

article h2 {
    font-size: 2.4em;
    min-width: 99%;
    text-align: center;
}

article p{
   margin: 0.3em 0;
}

.baum {
    width: 100%;
    max-width: min(96vw, 600px);
    height: calc(90vh - 140px);
    max-height: 780px;
    min-height: 365px;
    margin: auto;
    background-image: url(pics/branch-l.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 60%;
    position: relative;
    font-family: var(--headingschrift);
    font-size: 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.menu-baum {
    background-image: url(pics/tree-h.svg);
    background-size: contain;
}

@media screen and (orientation: landscape) {
    .menu-baum {
        background-size: 100%;
    }
}

.reverse-all-sizes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}


.rahmen {
    position: absolute;
    display: inline-block;
    padding: 2vw 1.5vw 1.5vw 1.5vw;
    font-size: max(1.2rem, .9vw);
    line-height: 120%;
    font-weight: 700;
    color: var(--schriftakzentfarbe);
    border: 4px solid var(--rahmenfarbe);
    background-color: var(--rahmenhintergrundfarbe);
    text-decoration: none;
    max-width: 40vw;
    text-align: center;
    border-radius: 2%;
     -webkit-box-shadow: 5px 5px 7px var(--baumfarbe) inset, -5px -5px 7px var(--baumfarbe) inset;
    box-shadow: 5px 5px 7px var(--baumfarbe) inset, -5px -5px 7px var(--baumfarbe) inset;
}

.rahmen::before {
    content: '\2303';
    color: var(--rahmenfarbe);
    position: absolute;
    top: calc(1vw - max(1.2rem, .9vw) + 5px); /* 0 - schrifthöhe - (rahmendicke+1)*/
    left: calc(50% - .3em);  
}

.rahmen:visited {
    color: var(--schriftakzentfarbe);
}

.rahmen:hover, .rahmen:focus, .rahmen:active {
    -webkit-animation: wackeln 1s 1;
            animation: wackeln 1s 1;
    -webkit-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
     -webkit-box-shadow: 2px 2px 6px var(--rahmenfarbe) inset, -2px -2px 6px var(--rahmenfarbe) inset;
            box-shadow: 2px 2px 6px var(--rahmenfarbe) inset, -2px -2px 6px var(--rahmenfarbe) inset;
    background-color: rgba(246,245,234,.7);
    /*font-size: max(1.5rem, 1.1vw); is schlecht mit Aufhänger, daher Schatten eingefügt*/
}

@-webkit-keyframes wackeln {
  0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-webkit-transform:rotate(-5deg);transform:rotate(-5deg);}
  50% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}
  75% {-webkit-transform:rotate(-5deg);transform:rotate(-5deg);}
  100% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}

@keyframes wackeln {
  0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  25% {-webkit-transform:rotate(-5deg);transform:rotate(-5deg);}
  50% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}
  75% {-webkit-transform:rotate(-5deg);transform:rotate(-5deg);}
  100% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}

#rahmen1 {
    top: 18%;
    left: 25%;
}

#rahmen2 {
    top: 35%;
    left: 5%;
}

#rahmen3 {
    top: 36%;
    left: 64%;
}

#rahmen4 {
    top: 53%;
    left: 28%;
}

#rahmen5 {
    top: 70%;
    left: 35%%;
}

#rahmen6 {
    top: 22%;
    left: 62%;
}


/* ABOUT ME SEITE ------------*/

#aboutme-pic {
    max-height: 60vh;
}

#aboutme-pic img {
    max-width: 55vw;
}

#unterschrift {
    width: 100px;
    height: auto;
    display: block;
    margin: 1.6em auto 0.8em auto;
}


/* Seiten über Footer-Links erreichbar -------*/

.footer-stuff-page {
    display: block;
    background-image: url(pics/branch-light.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*Impressum, Datenschutz s. ganz unten */

/* Große Bild/Web-Ansicht --------------------------------------*/


.bildanzeige, .webanzeige {
    max-width: 98%;
    max-height: 80%;
    min-width: auto /* 50% */;
    min-height: auto /* 20% */;
    border: 5px solid var(--akzentfarbe);
    background: var(--rahmenhintergrundfarbe);
    padding: 5px;
    border-radius: 1%;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: relative;
    z-index: 50;
}

.bildanzeige-sub {
    max-width: 98%;
    text-align: center;
    color: var(--schriftlinkfarbe);
    font-size: 1.2rem;
    padding-top: 0.8rem;
    line-height: 1.4rem;
}

.anzeige-zahl {
    display: inline-block;
}

#moveleft, #moveright {
    font-weight: bold;
    font-size: 1.5em;
    cursor: pointer;
}

#moveleft {
    padding-right: 1.5em;
}

#moveright {
    padding-left: 1.5em;
}

.webanzeige {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    max-height:100%;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    overflow-y: auto;
    padding: 8px;
    font-size: 1rem;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.webanzeige>* {
    margin: .4em auto;
}

#webanzeige-screenie1, #webanzeige-screenie2 {
    min-width: 5em;
    min-height: 5em;
    max-width: 70vw;
    max-height: 30vh;
    -webkit-box-shadow: 0 0 4px var(--rahmenfarbe);
            box-shadow: 0 0 4px var(--rahmenfarbe);
}

#webanzeige-titel {
    font-size: 1.3em;
}

#webanzeige-text, #webanzeige-link {
    font-family: var(--textschrift);
}

#webanzeige-link::after{
    content: '\00a0\276F\276F';
}

#webanzeige-link {
    margin: 1.2em 0.5em auto 0.4em;
    -ms-flex-item-align: end;
        align-self: flex-end;
    line-height: 44px;
    font-weight: 700;
}



/* Vorschauleiste ------------------*/

#bildleiste {
    background-color: var(--rahmenhintergrundfarbe);
    width: 94%;
    height: 115px;
    padding: 5px 10px;
    -webkit-box-shadow: 0 0 5px inset var(--baumfarbe);
            box-shadow: 0 0 5px inset var(--baumfarbe);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow-x: scroll;
    margin-top: 1.2em;
}

#bildleiste img {
    display: block;
    width: auto;
    height: auto;
    max-width: 80px;
    max-height: 80px;
    margin: 2px;
    border: 2px solid white;
    cursor: pointer;
}

.mini-preview {
    height: 98%;
    min-width: 100px;
    max-width: 135px;
    background-color: white;
    -webkit-box-shadow: 0 0 4px inset var(--akzentfarbe);
            box-shadow: 0 0 4px inset var(--akzentfarbe);
    padding: 4px;
    margin: 2px 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    overflow: hidden;
    cursor: pointer;
}

.mini-preview img {
    min-height: 1em;
    -webkit-box-shadow: 0 0 3px var(--baumfarbe);
            box-shadow: 0 0 3px var(--baumfarbe);
}

.mini-preview h3 {
    font-size: 1rem;
    text-align: center;
}

#identifier {
    display: none;
    width: 0px;
    height: 0px;
    opacity: 0;
}


/* MEDIA QUERIES Main Content -------------------------------------------*/

@media screen AND (min-width:800px) {
    main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    }
    
    .row-reverse, .reverse-all-sizes {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
    }
    
    article {
        display: inline-block;
        width: 35%;
    }
    
    .aboutme-article {
        width: 50%;
    }
    
    article h2 {
        text-align: left;
    }

    .baum {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: 60%;
        height: 100%;
        max-height: 80vh;
        max-width: 840px;
        font-size: 1.4rem;
        background-size: 100%;
        -ms-flex-item-align: start;
            -ms-grid-row-align: start;
            align-self: start;
    }
    
    .menu-baum {
        background-image: url(pics/tree-b-l.svg);
        background-size: max(100%, 65vh);
        background-position: right 55%; 
    }
    
    
    .bildanzeige, .webanzeige {
        max-width: 90%;
        max-height: 70vh;
    }
    
    .anzeige-zahl {
        max-width: 90%;
    }
    
    .rahmen {
        padding: .7vw;
        font-size: max(1.5rem, 1.1vw);
        line-height: normal;
    }
    
    .rahmen::before {
        top: calc(0px - max(1.4rem, 1vw) + 5px);
    }
    
    #rahmen1 {
        top: 22%;
        left: 12%;
    }

    #rahmen2 {
        top: 38%;
        left: 6%;
    }


    #rahmen3 {
        top: 42%;
        left: 48%;
    }


    #rahmen4 {
        top: 44%;
        left: 26%;
    }
    
    #rahmen5 {
        top: 60%;
        left: 15%;
    }
    
     #rahmen6 {
        top: 27%;
        left: 44%;
    }
    
     #aboutme-pic {
        margin: 4em auto;
        -ms-flex-item-align: start;
            align-self: flex-start;
        position: sticky;
        top: 3.2em;
        width: 45%;
    }
    
    #aboutme-pic img {
        margin-top: 1.4em;
        max-height: 360px;
    }
    
    #bildleiste {
        height: 195px;
    }
    
    .webanzeige {
        -ms-flex-pack: distribute;
            justify-content: space-around;
    }
    
    #webanzeige-screenie-div {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }
    
    #webanzeige-screenie1, #webanzeige-screenie2 {
        max-width: 26vw;
        max-height: 27vh;
        vertical-align: text-top;
    }

    .mini-preview {
        height: 80%;
    }
    
    .mini-preview h3 {
        font-size: 1.1rem;
        text-align: center;
    }
    
}

@media screen AND (min-width:800px) AND (orientation: portrait) { 
    article {
        width: 90%;
    }
    .baum {
        background-size: contain /*auto min(70%, 700px)*/;
        background-position: center /* right 60% */;
        width: 90%;
        max-width: 800px;
        min-height: 500px;
        max-height: 700px;
    }
    
    main {
        height: max-content;
        min-height: 100%;
        align-content: space-evenly;
    }

}

@media screen AND (min-width:800px) AND (max-height:500px) { 
    .baum {
        max-height: 500px;
        min-height: 400px;
    }

}

@media screen AND (min-width:1501px) {
    main {
     padding: .5rem 10vw;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
    }
}



/* FOOTER  -----------------------------------------------------*/

footer {
    clear: both;
    height: auto;
    min-height: 45px;
    background-color: var(--hintergrundfarbe);
    border-top: 4px solid var(--akzentfarbe);
    padding: .3em .5em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: .9em;
}

/* .menu-ul s. allgemein */




/* Scrollbar */

/** scrollbar **************/
/* firefox */
body {
    scrollbar-color: var(--schriftakzentfarbe) var(--hintergrundfarbe);
    scrollbar-width: 12px;
    scrollbar-height: 12px;
}

/* scrollbar - HowTo: https://www.w3schools.com **/
/* width */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
/* Track */
::-webkit-scrollbar-track {
    background: var(--hintergrundfarbe);
    -webkit-box-shadow: inset 0 0 5px var(--baumfarbe);
            box-shadow: inset 0 0 5px var(--baumfarbe); 
}
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px var(--akzentfarbe);
            box-shadow: inset 0 0 5px var(--akzentfarbe);
    background: var(--baumfarbe); 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 0 0 5px var(--rahmenfarbe);
            box-shadow: inset 0 0 5px var(--rahmenfarbe);
    background: var(--akzentfarbe);
}


/*  DATENSCHUTZ UND IMPRESSUM */

#datenschutz, #impressum, #kontakt { 
    display: block;
    width: 95%;
    padding: max(8vw, 5px);
    margin: auto;
}

#impressum, #kontakt {
    width: min(95%, 700px);
}

#datenschutz ol, #datenschutz ul, #impressum ol, #impressum ul {
    list-style-position: inside;
}

#datenschutz h2 {
    font-size: 1.5em;
}