/* grundlegende Festlegungen:                */
/* Farbe, Schrift, Abstände, Ausrichtung     */
/* Festlegungen für HTML-Struktur            */

html {
  /* Variablen für Farbschema */
  --hintergrund: light-dark(#e9e7da, #1a1910);
  --text: light-dark(#3e0600, #ffe999);
  --colh2: light-dark(#206600,#d2e802);
  --colh3: light-dark(#384600,#809e00);
  --link: light-dark(#2d007b, #7e37ff);
  --visit: light-dark(#87459e, #a463bb);
  --colfooter: light-dark(#678797, #678797);
  --figcaptext: light-dark(#ffffff, #000000);
  --figcapback: light-dark(#00000070, #ffffff90);
  --wichtig: light-dark(#a70909,#c63220);
  --postit: light-dark(#ffffaa,#5a5e0f);
  --postitgradient: light-dark(#ffffd0,#4e5200);
  --postitborder: light-dark(#cccccc, #080808);
  --postitshadow: light-dark(#0000004c, #000000);
  
  color-scheme: light dark;
  color: var(--text);
  background-color: var(--hintergrund);  
}

a:link {
  color: var(--link);
}

a:visited {
  color: var(--visit);
}

body {  
  font-size: 1em;  
  line-height: 1.25;  
  font-family: 'Comfortaa', cursive;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

header {
/* top right bottom left*/
  padding: 0 0 0.25em 0;
  margin: 0;
  text-align: center;
}

footer {
  color: var(--colfooter);
  background-color: var(--hintergrund);
  font-size: 90%;
  margin: 0.2lh 0 0 0;
}

nav {
  /* top right bottom left*/
  margin: 0em;
  border: 0;
  padding: 0em;
}

nav  li {
  list-style: none;
}

nav a {
  text-decoration: none;
}

nav a:focus,
nav a:hover,
nav a:active {
  text-decoration: underline;
}
nav div {
  margin: 0 1em 0 1em;
  padding: 0;
  font-size: 80%;
  color: var(--colh2);
}

main {
  margin: 1em;
  padding: 0;
}

article {
  margin: 0 0 1lh 0;
  padding: 0;
}

section {
  margin: 0.75lh 0 0.75lh 0;
  padding: 0;
}

section.bild {
  margin: 0.75lh 0 0.75lh 0;
  padding: 0;
}

p {
  margin: 0 0.25em 0.5lh 0.25em;
  text-align: justify;
}

p.date {
  font-size: 0.75em;
  text-align: right;
  line-height: 0em;
  padding: 0;
}

figure {
  margin: 0 0.25em 0.5lh 0.25em;
}

figure img {
  object-fit: cover;
}

figcaption {
  padding: 0 0.25em 0 0.25em;
  line-height: 1.0lh;
  color: var(--figcaptext);
  background-color: var(--figcapback);
  font-size: 80%;
}

aside {
  background-color: var(--postit);
  background-image: linear-gradient(155deg, var(--postit) 0%, var(--postitgradient) 100%);
  text-align: left;
  margin: 0em 1em 0em 1em;
  border: 1px solid var(--postitborder);
  box-shadow: 0px 2px 4px var(--postitshadow);
}

div {
  margin: 0;
  padding: 0;
}

#zentriert {
  text-align: center;
}

#klein {
  font-size: 60%;
}

h1{font-size:200%;}h2{font-size:170%;}h3{font-size:120%;}
h2{color: var(--colh2);}h3{color: var(--colh3);}
h1,h2{margin:0.7lh 0 0.4lh 0;}h3{margin:0.5lh 0 0.2lh 0}h4,h5,h6{margin: 0;}
h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}
article > h1,h2,h3,h4,h5,h6 {text-align: left;}
section > h1,h2,h3,h4,h5,h6 {text-align: left;}
strong {color: var(--wichtig);}

/* grundlegende Festlegungen:                */
/* Layout                                    */
/* Größen, Anordnung                         */
/* Smartphone/ kleiner Bildschirm Hochformat */

body {
  max-width: 60em;
}

header {
  width: 100% ;
  max-height: 7em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

header > img {
  max-width: 50%;
  max-height: 7em;
}

footer {
  width: 100%;
  max-height: 1.5em;
  position: fixed;
  bottom: 0;
}

nav > ul {
  display: flex;
  flex-direction: column;
}

nav  li {
  list-style: none;
  text-decoration: none;
  flex: 1;
}

section.bild {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: space-between;
  justify-items: left;
  align-items: normal;
  align-content: space-between;
}

section.bild:nth-of-type(odd) {
  grid-template-areas: "titel"
                       "text"
                       "bild";
}

section.bild:nth-of-type(even) {
  grid-template-areas: "titel"
                       "bild"
                       "text";
}

section.bild h* {
  grid-area: titel;
}

section.bild p {
  grid-area: text;
}

section.bild figure {
  grid-area: bild;
}

section.gartenjahr {
    display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: space-between;
  justify-items: left;
  align-items: normal;
  align-content: space-between;
}

section.gartenjahr p {
  grid-row: 2;
  grid-column: 1/-1;
}
section.gartenjahr figure img {
  aspect-ratio: 4/3;
}

figure {
  position: relative;
}

figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

figure > figcaption {
  caption-side:bottom;
  translate: 0 -1.25lh;
}

aside {
  position: relative;
}

[title="Seitenanfang"] {
  position: fixed;
  bottom: 0.1em;
  right: 1em;
  height: 1.0lh;
}

section > h1,h2,h3,h4,h5,h6 {grid-column: 1 / -1; grid-row: 1;}

/* Übergänge und Animationen                 */

@keyframes scaling {
  0%{transform: translate(-40%) scale(0);}
  100%{transform: translate(0%) scale(1);}
}

.mein-element {
  opacity: 0%;
  transition: opacity 1s ease-in-out;
}


h2.visible {
  opacity: 1;
  animation: scaling 1s steps(50);
}

.visible {
  opacity: 1;
}

figure.mein-pic {
  opacity: 0;
  /*transition: opacity 2s ease-in-out;*/
  translate: 0 15px;
  transition: translate 0.5s ease-out 0.5s, opacity 2s ease-in-out;
}

section.gartenjahr figure img.mein-pic {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

figure.visible {
  opacity: 1;
  translate: 0 0;
}

section.gartenjahr figure img.visible {
  opacity: 1;
}

/* Anpassung an Bildschirmgrößen             */
/* media-queries                             */

@media (min-width: 35em) {
  section.bild {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  section.bild:nth-of-type(odd) {
    grid-template-areas: "titel titel"
                         "text bild";
  }

  section.bild:nth-of-type(even) {
    grid-template-areas: "titel titel"
                         "bild text";
  }

  section.gartenjahr {
    display: grid;
  grid-template-columns: repeat(2, 1fr);
  }

  nav div {
    font-size: 90%;
  }

  aside {
    position: absolute;
    top: 4em;
    right: 1em;
    width: 12em;
    /* height: 12em; */
    aspect-ratio: 1 / 1;
    border-bottom-right-radius: 3em 5px;
    transform: rotate(3deg);
  }
}

@media (min-width: 45em) {
  h1{font-size:300%;}h2{font-size:200%;}h3{font-size:150%;}

  nav > ul {
    flex-direction: row;
  }
  section.bild {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  section.bild:nth-of-type(odd) {
    grid-template-areas: "titel titel titel"
                         "text text bild";
  }

  section.bild:nth-of-type(even) {
    grid-template-areas: "titel titel titel"
                         "bild text text";
  }
  
    section.gartenjahr {
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  }

  aside {
    top: 10em;
  }
}

@media (min-width: 60em) {
  section.bild {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  section.bild:nth-of-type(odd) {
    grid-template-areas: "titel titel titel titel titel"
                         "text text text bild bild";
  }

  section.bild:nth-of-type(even) {
    grid-template-areas: "titel titel titel titel titel"
                         "bild bild text text text";
  }

  aside {
    width: calc((100% - 60em) / 2 - 3em);
    min-width: 12em;
    max-width: 20em;
    right: calc(((100% - 60em) / 2 - ((100% - 60em) / 2 - 3em)) / 2);
    aspect-ratio: 1 / 1;
  }
}