/* ----------------------------------------------------------------
   Daniel Staemmler — Stylesheet
   Übernimmt Schrift, Größen und Menü-Layout 1:1 von der
   bestehenden Fotografie-Seite (main.css): Times New Roman,
   linke Menüspalte, Königsblau (#0000EE) als Akzent.
   ---------------------------------------------------------------- */

:root {
  --color-text: #000000;
  --color-bg: #ffffff;
  --color-accent: #0000ee;   /* Königsblau, exakt wie main.css */
  --color-muted: #999999;

  --font-body: "Times New Roman", Times, serif;

  /* Zeitgenössische Schriftgrößen */
  --font-size-body: 16px;
  --font-size-menu: 16px;
  --font-size-h1: 24px;
  --font-size-h2: 16px;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.55;
}

a {
  text-decoration: none;
  color: var(--color-accent);
}

a:hover,
a:active {
  text-decoration: underline;
}

h1 {
  margin: 0;
  padding-bottom: 18px;
  font-size: var(--font-size-h1);
  font-family: var(--font-body);
  font-weight: normal;
  line-height: 0.9;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: bold;
  font-family: var(--font-body);
  line-height: 0.9;
  margin-top: 28px;
  margin-bottom: 10px;
}

p {
  padding: 0 0 14pt 0;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.55;
}

ul, ol {
  list-style: none;
  font-size: var(--font-size-body);
  line-height: 1.55;
  padding-left: 0;
  margin: 0 0 14pt 0;
}

li {
  margin-bottom: 2px;
}

/* Aufzählungen: kein Absatzabstand zwischen einzelnen Punkten,
   selbst wenn Markdown einen Punkt in ein <p> einpackt */
li p {
  padding: 0;
  margin: 0;
}

/* ---------- Sprach-Umschalter (DE/EN) ---------- */

.lang-toggle {
  display: block;
  margin-top: 20px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
}

.lang-toggle-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 64px;
  height: 26px;
  border: 1px solid var(--color-muted);
  border-radius: 13px;
  overflow: hidden;
}

.lang-toggle-option {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.lang-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 30px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-accent);
  transition: transform 0.2s ease;
}

.lang-toggle.is-en .lang-toggle-knob {
  transform: translateX(32px);
}

.lang-toggle .lang-toggle-option.lang-toggle-de {
  color: #ffffff;
}

.lang-toggle.is-en .lang-toggle-option.lang-toggle-de {
  color: var(--color-muted);
}

.lang-toggle.is-en .lang-toggle-option.lang-toggle-en {
  color: #ffffff;
}

/* ---------- Profilbild auf der Startseite ---------- */

.profile-image {
  display: block;
  max-width: 240px;
  height: auto;
  margin-bottom: 20px;
}

/* ---------- Gesamtrahmen ---------- */

#container {
  margin-left: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  overflow: hidden; /* fängt die float-Spalten ein */
}

/* ---------- Menü: linke Spalte, wie auf der Fotoseite ---------- */

#menu {
  width: 200px;
  float: left;
}

#menu ul {
  list-style: none;
  text-decoration: none;
  margin: 0 0 5px 0;
  padding: 0 10px 0 0;
  font-family: var(--font-body);
  font-size: var(--font-size-menu);
  line-height: 1.5;
}

#menu li {
  margin-bottom: 4px;
}

/* Nur der eigene Link eines aktiven Eintrags wird blau – nicht alle
   Links, die zufällig innerhalb eines li.current verschachtelt sind
   (sonst würde z. B. ein geöffnetes Untermenü komplett blau erscheinen) */
#menu > ul > li.current > a,
#menu .submenu li.current > a {
  color: var(--color-accent);
}

#menu a,
#menu a:visited {
  color: var(--color-muted);
  text-decoration: none;
}

#menu a:hover,
#menu a:active {
  color: var(--color-accent);
}

/* Der Seitentitel ganz oben im Menü: stets in Königsblau, in der
   Größe der Seitenüberschriften (h1, z. B. "Publikationen") */
#menu ul.eins {
  margin-bottom: 18px;
}

#menu ul.eins a,
#menu ul.eins a:visited,
#menu ul.eins a:hover,
#menu ul.eins a:active {
  color: var(--color-accent);
  font-size: var(--font-size-h1);
  line-height: 0.9;
  text-decoration: none;
}

/* Untermenü der Fotoserien: leicht eingerückt, erscheint nur,
   solange "Fotografie" aktiv ist */
#menu .submenu {
  margin: 4px 0 0 0;
  padding: 0 10px 0 14px;
}

#menu .submenu li {
  margin-bottom: 2px;
}

#menu .submenu a {
  font-size: calc(var(--font-size-menu) - 1px);
}

/* ---------- Inhalt: rechte Spalte ---------- */

#content {
  font-size: var(--font-size-body);
  font-family: var(--font-body);
  float: left;
  width: 600px;
  padding-left: 50px;
}

/* Normale Bilder im Fließtext (z. B. Profilbild) auf Spaltenbreite
   begrenzen; die Fotoserien-Galerie und die Diashow bleiben
   davon ausgenommen, da sie ihre Größe selbst steuern. */
#content img {
  max-width: 100%;
  height: auto;
}

#content .gallery-item img {
  max-width: none;
}

#content .content a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-muted);
}

#content .content a:hover {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom-color: var(--color-accent);
}

/* ---------- Diashow auf der Fotografie-Übersicht ----------
   Größe relativ zur Seite (Prozentbreite), Höhe wird per JS passend
   zum Seitenverhältnis des jeweils sichtbaren Bilds gesetzt, damit
   nichts beschnitten wird. */

.slideshow {
  position: relative;
  width: 80%;
  margin-top: 10px;
  overflow: hidden;
}

.slideshow-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.4s ease;
}

.slideshow-slide {
  flex: 0 0 100%;
  display: block;
}

.slideshow-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.slideshow-prev,
.slideshow-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 4px 6px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.slideshow-prev:hover,
.slideshow-next:hover {
  color: var(--color-accent);
}

.slideshow-prev { left: 0; }
.slideshow-next { right: 0; }

/* ---------- Fotoserien-Seiten: Galerie rechts neben dem Menü, intern
   horizontal scrollbar (Navigation bleibt sichtbar) ---------- */

.gallery-page #content {
  width: calc(100% - 200px);
  max-width: none;
  padding-right: 40px;
}

.gallery {
  display: flex;
  align-items: flex-end;
  gap: 120px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 16px;
  padding-right: 120px;
  -webkit-overflow-scrolling: touch;
}

.gallery-item {
  flex: 0 0 auto;
}

.gallery-item img {
  display: block;
  width: auto;
  height: auto;
  max-height: calc(100vh - 260px);
}

/* Horizontal scrollende Serien: statt einer eigenen Scrollleiste
   direkt unter den Bildern übernimmt der Browser das Scrollen der
   gesamten Seite. Der native Scrollbalken sitzt dadurch ganz unten
   am Fenster, und das Menü läuft beim Scrollen mit nach links aus
   dem Bild. Nur auf breiten Bildschirmen aktiv – auf Mobil steht
   das Menü ohnehin über dem Inhalt und die Galerie scrollt intern. */
@media (min-width: 701px) {
  body.gallery-scroll #container {
    overflow: visible;
  }

  body.gallery-scroll #container::after {
    content: "";
    display: table;
    clear: both;
  }

  body.gallery-scroll .gallery {
    overflow: visible;
    padding-bottom: 0;
  }
}

/* ---------- Click-Through-Galerie (x + y = x - x, Pause):
   nur ein Bild sichtbar, Klick auf das Bild zeigt das nächste ---------- */

.clickthrough {
  margin-top: 10px;
}

.clickthrough-slide {
  display: none;
}

.clickthrough-slide.is-active {
  display: block;
  cursor: pointer;
}

.clickthrough-slide img {
  display: block;
  width: auto;
  height: auto;
  max-height: calc(100vh - 260px);
}

/* ---------- Ohne Form: Tumblr-Reproduktion mit festem
   Container, in dem sich die Bilder je nach Format (Hoch-/
   Querformat) nebeneinander oder übereinander anordnen ---------- */

.ohneform-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  max-width: 950px;
  margin-top: 10px;
}

.ohneform-item {
  margin: 0;
}

.ohneform-item img {
  display: block;
  height: 220px;
  width: auto;
  max-width: 100%;
}

/* ---------- Blogliste ---------- */

.post-list {
  list-style: none;
  padding: 0;
  margin: 14pt 0 0 0;
}

.post-list-item {
  display: flex;
  gap: 1rem;
  padding: 6px 0;
}

.post-date {
  color: var(--color-muted);
  min-width: 90px;
  flex-shrink: 0;
}

.post-meta {
  color: var(--color-muted);
  margin-top: -10px;
  margin-bottom: 14pt;
}

/* ---------- Tags unterhalb der Beiträge ---------- */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 4px 12px;
  margin: 4px 0 14pt 0;
  padding: 0;
}

.tag-list li {
  margin-bottom: 0;
}

.tag-list a {
  color: var(--color-muted);
}

.tag-list a:hover {
  color: var(--color-accent);
}

/* ---------- RSS-/Social-Links unterhalb von Beitragsliste und
   einzelnen Beiträgen ---------- */

.blog-links {
  list-style: none;
  display: flex;
  gap: 16px;
  margin-top: 20px;
  padding: 14px 0 0 0;
  border-top: 1px solid var(--color-muted);
}

.blog-links li {
  margin-bottom: 0;
}

.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  color: var(--color-muted);
}

.back-link {
  margin-top: 30px;
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 60px;
  padding-top: 14px;
  border-top: 1px solid var(--color-muted);
  font-size: calc(var(--font-size-body) - 3px);
  color: var(--color-muted);
}

.site-footer-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cc-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-footer a {
  color: var(--color-muted);
}

.site-footer a:hover {
  color: var(--color-accent);
}

.cc-badge {
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
}

.cc-badge:hover {
  color: var(--color-accent);
}

/* ---------- Mobil: Menü über den Inhalt, nicht mehr daneben ---------- */

@media (max-width: 700px) {
  #container {
    margin-left: 20px;
    margin-right: 20px;
  }
  #menu,
  #content {
    float: none;
    width: 100%;
    padding-left: 0;
  }
  #menu {
    margin-bottom: 20px;
  }
  .site-footer {
    flex-wrap: wrap;
  }
  .gallery-page #content {
    width: 100%;
  }
  .slideshow {
    width: 100%;
  }
  .ohneform-grid {
    max-width: 100%;
  }
  .ohneform-item img {
    height: 140px;
  }
}