:root {
  color-scheme: light dark;
  /* Grundfarben */
  --color-primary: grey;
  --color-secondary: darkgrey;
  --color-accent: #204960;
  --color-scrollbar: darkgrey;

  /* Section-Farben */
  --color-bg-odd: #fffbf0;
  --color-bg-even: white;
  --color-text: black;
}
html, body {
  margin: 0;
  padding: 0; 
  position: relative;
  font-family: sans-serif;
}

@font-face {
    font-family: 'Victor';
    src: url('../fonts/Victor.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media (prefers-reduced-motion: no-preference){
  html {
    scroll-snap-type: y mandatory; 
    scroll-behavior: smooth;
  }

  section{
    scroll-snap-align: start;
  }
}

@media screen {
  html {
    scrollbar-color: var(--color-primary) var(--color-secondary);
    scrollbar-width: auto;
  }
  html::-webkit-scrollbar { width: 14px;}
  html::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 14px;
    border: 3px solid var(--color-secondary);
  }
  html::-webkit-scrollbar-track { background: var(--color-secondary); }

  html::scroll-button(*) {
    color: var(--color-primary);
    background: var(--color-secondary);
    border: thin solid var(--color-accent);
    border-radius: .3em;
    font-size: 1.5em;
    width: 1.7em;
    aspect-ratio: 1;
    position: fixed;
    right: 1vw;
  }
  html::scroll-button(*):hover {
    color: var(--color-secondary);
    background: var(--color-primary);
  }
  html::scroll-button(*):disabled {
    color: light-dark(#CCC,#555);
    background: light-dark(#DDD,#333);
    border-color: light-dark(#CCC,#555);
  }
  html::scroll-button(down) {
    content: "▼";
    bottom: calc(50% - 1em);
  }

  #backToTop { /* muss für Safari separat definiert werden */
    color: var(--color-primary);
    background: var(--color-secondary);
    border: thin solid var(--color-accent);
    border-radius: .3em;
    font-size: 1.5em;
    width: 1.7em;
    aspect-ratio: 1;
    position: fixed;
    right: 1vw;
    bottom: 1vw;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }
  #backToTop.visible {
    opacity: 1;
    pointer-events: auto;
  }
  #backToTop.visible:hover {
    background: var(--color-primary);
    color: var(--color-secondary);
  }
  
  section {
    min-height: 100vh;
  }
}

section { padding: 1em; }

a { color: darkblue;}
a:visited { color: var(--color-secondary); }

img { max-width: 100%; }

.main_img {
  float: center;
  margin-inline-start: 1em;
  /*width: 30em;
  max-width: 100%;
  animation: linear reveal both;
  animation-timeline: view();
  animation-range: entry 100% cover 50%;*/
}

.logo {
  float: right;
  margin-inline-start: 1em;
  width: 15em;
  max-width: 40%;
  animation: linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

@keyframes reveal {
  from { opacity: 0; clip-path: inset(45% 20% 45% 20%); }
  to   { opacity: 1; clip-path: inset(0); }
}

.clear { clear: right; }

h1, h2, h3 {
	font-family: 'Victor',sans-serif;
	text-align: center;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  background: transparent;
}

#navigation {
  display: flex;
  flex-direction: row;
  gap: 0.4em;
  max-width: 40em;
  margin: 0 auto;
  padding: 1em;
}

#navigation li { list-style: none; }

#navigation li a,
#navigation li a:link,
#navigation li a:visited {
  display: block;
  margin: 0 0.4em 0.5em 0;
  padding: 0.1em 0.5em;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  line-height: 180%;
  color: var(--color-accent);
  background: var(--color-secondary);
  border: thin solid var(--color-accent);
  border-radius: .5em;
}

#navigation li a:hover,
#navigation li a:focus,
#navigation li a:active {
  color: var(--color-secondary);
  background: var(--color-accent);
}

#navigation li a[aria-current="location"] { position: relative; }

#navigation li a[aria-current="location"]::after {
  content: "";
  position: absolute;
  bottom: -0.3em;
  left: 10%;
  width: 90%;
  height: 0.3em;
  background-color: var(--color-primary);
}

section > * {
  max-width: 40em;
  margin: 0.5em auto;  
}

section h1 {
  font-size: 3em;
  text-align: center;
  line-height: 2rem;
  margin-top: 5rem;
}

section h2 {
  font-size: 2em;
  text-align: center;
  line-height: 2,5rem;
  margin-top: 2rem;
}

section h3 {
  font-size: 1.5em;
  text-align: justify;
  line-height: 2rem;
  margin-top: 2rem;
}

/* Section-Farben */
#part_1 { background: var(--color-bg-even); color: var(--color-text);}
#part_2 { background: var(--color-bg-even); color: var(--color-text);}
#part_3 { background: var(--color-bg-even); color: var(--color-text);}
#part_4 { background: var(--color-bg-even); color: var(--color-text);}
#part_5 { background: var(--color-bg-even); color: var(--color-text);}

/* Wide windows */
@media screen and (width > 37em) {
  section{ padding: 1em; }
  section h2 { font-size: 3em; }
  section p { text-align: justify; }
  #navigation { gap: 1em; }
  #navigation li a,
  #navigation li a:link,
  #navigation li a:visited { padding: 0.1em 1em; }
}

@media print {
  nav, #backToTop { display: none; }
  html::scroll-button(*) { display: none; }
  * { color: black !important; background: none !important; }
  section { break-inside: avoid; }
  @page { margin: 10pt 20pt 30pt 60pt; }
}