html, body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-family: Georgia, serif;
}

body {
  padding: 20px;
  box-sizing: border-box;
}


/* =========================
   index.html intro
   ========================= */

.intro {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.intro p {
  max-width: 680px;
  text-align: center;
  margin: 0;
}

.intro-bild {
  width: 180px;
  max-width: 45vw;
  height: auto;
  margin-bottom: 24px;
}


/* =========================
   Seiten
   ========================= */

.prosa {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.6;
}

.prosa p {
  margin-bottom: 1.2em;
  white-space: pre-wrap;
}


/* =========================
   Inhaltsverzeichnis
   ========================= */

.toc {
  background: #f9f9f9;
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 20px;
}


/* =========================
   Navbar
   ========================= */

.navbar {
  position: relative;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  width: 100%;
  box-sizing: border-box;

  padding: 15px 0;
  margin: 0 0 40px 0;

  background: white;
  border-bottom: none;
}

.navbar-button {
  display: inline-block;
  box-sizing: border-box;

  padding: 7px 13px;

  border: 1px solid #000;
  border-radius: 0;

  background: transparent;
  color: #000;

  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;

  cursor: pointer;
}

.navbar-button:hover {
  background: #f2f2f2;
}

.navbar-button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}


/* Navbar auf Smartphones */

@media (max-width: 600px) {

  body {
    padding: 12px;
  }

  .navbar {
    gap: 7px;
    margin: 0 0 30px 0;
    padding: 10px 0;
  }

  .navbar-button {
    padding: 6px 10px;
    font-size: 13px;
  }

  .prosa {
    padding: 10px;
  }
}


/* =========================
   Navbar Dropdown
   ========================= */

.navbar-dropdown {
  position: relative;
}

.navbar-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 140px;

  background: #fff;
  border: 1px solid #000;

  z-index: 1000;
}

.navbar-dropdown-content a {
  display: block;
  padding: 8px 10px;

  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.navbar-dropdown-content a:hover {
  background: #eee;
}

.navbar-dropdown-content.show {
  display: block;
}


/* =========================
   Video
   ========================= */

.video-container {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;

  margin: 30px auto;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================
   Blog / Archiv
   ========================= */

.idios-blog {
  margin-top: 70px;
  max-width: 900px;
}

.idios-entry {
  margin-bottom: 70px;
}

.idios-entry-meta {
  display: flex;
  justify-content: flex-end;
  gap: 30px;

  margin-bottom: 8px;

  font-size: 1rem;
}

.idios-entry-box {
  border: 4px solid #4d6f57;
  padding: 22px;
}

.seitenbild,
.idios-entry-box img {
  display: block;

  max-width: 100%;
  max-height: 70vh;

  width: auto;
  height: auto;

  margin: 20px auto 0 auto;
}


/* =========================
   Rahmenfarben
   ========================= */

.a .idios-entry-box { border-color:#4d6f57; }   /* dunkles Grün */
.b .idios-entry-box { border-color:#466d9e; }   /* Stahlblau */
.c .idios-entry-box { border-color:#8a3f4d; }   /* Bordeaux */
.d .idios-entry-box { border-color:#9d8a45; }   /* Ocker */
.e .idios-entry-box { border-color:#26706f; }   /* Petrol */
.f .idios-entry-box { border-color:#666666; }   /* Grau */

.g .idios-entry-box { border-color:#ff1493; }   /* Pink */
.h .idios-entry-box { border-color:#ff6a00; }   /* Orange */
.i .idios-entry-box { border-color:#ffd400; }   /* Gelb */
.j .idios-entry-box { border-color:#0057ff; }   /* Knallblau */
.k .idios-entry-box { border-color:#39ff14; }   /* Neongrün */
.l .idios-entry-box { border-color:#8f00ff; }   /* Violett */

.m .idios-entry-box { border-color:#ff0033; }   /* Rot */
.n .idios-entry-box { border-color:#00d4ff; }   /* Cyan */
.o .idios-entry-box { border-color:#00b894; }   /* Türkis */
.p .idios-entry-box { border-color:#c0392b; }   /* Ziegelrot */
.q .idios-entry-box { border-color:#6c5ce7; }   /* Lila */
.r .idios-entry-box { border-color:#e17055; }   /* Koralle */

.s .idios-entry-box { border-color:#2d3436; }   /* Anthrazit */
.t .idios-entry-box { border-color:#b8860b; }   /* Goldbraun */
.u .idios-entry-box { border-color:#7f8c8d; }   /* Schiefer */
.v .idios-entry-box { border-color:#d81b60; }   /* Magenta */
.w .idios-entry-box { border-color:#1abc9c; }   /* Aquamarin */
.x .idios-entry-box { border-color:#e67e22; }   /* Mandarine */

.y .idios-entry-box { border-color:#9b59b6; }   /* Lavendel */
.z .idios-entry-box { border-color:#2ecc71; }   /* Smaragd */