/* =========================
   FONTS
========================= */

/* Friedrich */
@font-face {
  font-family: "Friedrich 1941";
  src: url("/assets/fonts/friedrich-1941.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Friedrich 1941";
  src: url("/assets/fonts/Friedrich1941-Italic.ttf") format("truetype");
  font-style: italic;
}

/* Cormorant Garamond */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-SemiBold.ttf") format("truetype");
  font-weight: 600;

}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Italic.ttf") format("truetype");
  font-style: italic;
}
/* =========================
   MONOMAKH – SLAVISCHE SCHRIFTEN
========================= */

/* Church Slavonic (CU) */
@font-face {
  font-family: "Monomakh CS Unicode 2025";
  src: url("/assets/fonts/MonomakhCSUnicode2025.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Old Church Slavonic (OCU) */
@font-face {
  font-family: "Monomakh OCS Unicode";
  src: url("/assets/fonts/MonomakhOCSUnicode.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* Gentium Plus – Sonderzeichen / IPA */
@font-face {
  font-family: "Gentium Plus";
  src: url("/assets/fonts/GentiumPlus-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Gentium Plus";
  src: url("/assets/fonts/GentiumPlus-Italic.ttf") format("truetype");
  font-style: italic;
}

/* Noto Sans TC – Chinesisch */
@font-face {
  font-family: "Noto Sans TC";
  src: url("/assets/fonts/NotoSansTC-Regular.ttf") format("truetype");
}

/* Noto Serif JP – Japanisch */
@font-face {
  font-family: "Noto Serif JP";
  src: url("/assets/fonts/NotoSerifJP-Regular.ttf") format("truetype");
}

/* Pilsen Plakat */
@font-face {
  font-family: "Pilsen Plakat";
  src: url("/assets/fonts/Pilsen Plakat.ttf") format("truetype");
}
/* =========================
   CALIBRI – SANS SERIF
========================= */

@font-face {
  font-family: "Calibri";
  src: url("/assets/fonts/calibri.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Calibri";
  src: url("/assets/fonts/calibrii.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Calibri";
  src: url("/assets/fonts/calibrib.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Calibri";
  src: url("/assets/fonts/calibrili.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =========================
   RESET (MINIMAL & SAUBER)
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* =========================
   BODY / LAYOUT
========================= */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  font-family: "Friedrich 1941", serif;
  background: #fff;
}

/* =========================
   MAIN (drückt Footer nach unten)
========================= */
.site-main {
  flex: 1 0 auto;
  padding-bottom: 160px;
}

/* =========================
   HEADER
========================= */
.site-header {
  text-align: center;
  padding-top: 30px;
}

.header-image {
  width: 700px;
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* =========================
   FOOTER
========================= */
.site-footer {
  padding-bottom: 60px;
  text-align: center;
  color: #111;
}

.footer-logo img {
  width: 80px;
  margin-bottom: 20px;
}

.footer-instagram img {
  width: 50px;
  margin-bottom: 26px;
}

.footer-links {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.footer-links a {
  color: #111;
  text-decoration: none;
}

.footer-copy {
  font-family: "Pilsen Plakat", serif;
  font-size: 15px;
  letter-spacing: 0.1em;
}

/* =========================
   WORK PAGE
========================= */

.work-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 40px 0;
  text-align: center;
}

/* Großes Werkbild */
.work-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 40px;
}

/* Titel */
.work-title {
  font-family: "CormorantGaramond-SemiBold", serif;
  font-size: 34px;
  margin-bottom: 12px;
}

/* Werkdaten */
.work-meta {
  font-family: "CormorantGaramond-Regular", serif;
  font-size: 18px;
  line-height: 1.6;
}

/* =========================
   TYPOGRAFISCHE ZUWEISUNGEN
========================= */

/* Werk-Titel (lateinisch) */
.work-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
}

/* Ikonen – Originaltitel */
.title-original {
  font-family: "Monomakh CS 2025", serif;
}

/* Ikonen – Übersetzung */
.title-de {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
}

/* Sonderzeichen / IPA */
.special-script {
  font-family: "Gentium Plus", serif;
}

/* Footer Links */
.footer-links {
  font-family: "Cormorant Garamond", serif;
}

/* Footer Copyright */
.footer-copy {
  font-family: "Pilsen Plakat", serif;
}


/* =========================
   WERKSEITE – FEINSCHLIFF
========================= */

/* Bild kleiner und ruhiger */
.work-image {
  max-width: 820px;      /* ← HIER steuerst du die Größe */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 50px auto;
}

/* Titelblock */
.work-title {
  text-align: center;
  margin-bottom: 30px;
}

/* Kyrillischer Titel – NICHT fett */
.work-title .title-original {
  font-family: "Monomakh CS Unicode 2025", serif;
  font-weight: 400;     /* ← kein Bold */
  font-size: 40px;
  margin-bottom: 6px;
}

/* Transliteration */
.work-title .title-translit {
  font-family: "Gentium Plus", serif;
  font-size: 34px;
  font-weight: 500;
  margin-bottom: 10px;
}

/* Lateinische Titel (de, en, fr, it, ru, uk in lateinischer Schrift) */
.work-title .title-de,
.work-title .title-en,
.work-title .title-fr,
.work-title .title-it,
.work-title .title-ru,
.work-title .title-uk {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;      /* ← HIER: Bold */
  font-size: 34px;
}

/* Metadaten */
.work-meta {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;        /* ← Medium */
  font-size: 28px;         /* ← größer */
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-bottom: 120px;
}
/* =========================
   CHRONOLOGISCH GRID – FIX
========================= */



.work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}

/* Quadrat erzwingen */
.thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* 🔥 DAS ist der Schlüssel */
  overflow: hidden;
}
.thumb a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.thumb img {
  pointer-events: none;
}


/* Beide Bilder füllen exakt das Quadrat */
.thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* schneidet sauber */
  display: block;
}

/* Hover */
.img-color {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.thumb:hover .img-color {
  opacity: 1;
}


.werk {
  text-align: center;
  padding: 4rem 2rem 6rem;
}

.bild img {
  max-width: 60vw;
  max-height: 70vh;
  height: auto;
}

.titel {
  font-size: 32px;
  font-weight: bold;
}

.translit {
  font-size: 24px;
  margin-top: 1rem;
}

.metadaten {
  font-size: 22px;
  margin-top: 2rem;
}

.werknotiz {
  margin-top: 3rem;
  font-size: 20px;
}

/* =====================
   TRANSLITERATION – HART GETRENNT
===================== */

#translit-wrapper {
  display: block;
  margin-top: 1.5rem;
  text-align: center;
}

/* „Transliteration:“ → Metadaten */
#translit-label {
  font-family: "GentiumPlus";
  font-size: 26px;
  font-weight: 400;
}

/* eigentliche Transliteration → Titel */
#translit-text {
  display: inline-block;
  font-family: "GentiumPlus";
  font-size: 40px;
  font-weight: 700;
  margin-left: 0.5rem;
}

/* =========================================================
   ADDON: Slavische Schriften (CU / OCU)
   Diese Datei verändert KEIN bestehendes CSS.
   Sie ergänzt ausschließlich fehlende Font-Zuweisungen.
========================================================= */

/* Sprachklassen – werden aus werke.json gesetzt */
.cu {
  font-family: "Monomakh CS Unicode 2025", serif;
  font-weight: 400;
}

.ocu {
  font-family: "Monomakh OCS Unicode", serif;
  font-weight: 400;
}
/* ======================================
   GEMEINSAMES RASTER – ÜBERSICHTSSEITEN
   (ikonen, russland, ukraine, tr, usw.)
====================================== */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;              /* 🔥 gleiche Abstände wie Malerei */
  padding: 32px;          /* 🔥 Randabstand */
  box-sizing: border-box;
}

/* Kachel */
.thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Bilder */
.thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover */
.thumb img.hover {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.thumb:hover img.hover {
  opacity: 1;
}

/* ======================================
   KONZEPTE – TYPOGRAFIE & LAYOUT
====================================== */

.konzepte {
  max-width: 1100px;          /* ⬅ breiter, ruhiger */
  margin: 6rem auto;         /* ⬅ zentriert */
  padding: 0 2rem;

  font-family: "Cormorant Garamond", serif;
  font-weight: 500;          /* Medium */
  font-size: 24px;           /* ⬅ deutlich größer */
  line-height: 1.75;

  text-align: justify;       /* ⬅ Blocksatz */
  hyphens: auto;             /* ⬅ saubere Worttrennung */
}

.konzepte h1,
.konzepte h2,
.konzepte h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 900;          /* ⬅ fetter als vorher */
  text-align: center;

  margin-top: 5rem;
  margin-bottom: 2.5rem;
  letter-spacing: 0.06em;    /* ⬅ unterstützt die Wucht */
}

.konzepte h1 {
  font-size: 46px;
}

.konzepte h2 {
  font-size: 34px;
}

.konzepte h3 {
  font-size: 28px;
}

/* Absätze */
.konzepte p {
  margin-bottom: 2.2rem;     /* ⬅ ruhiger Textfluss */
}

/* Kursiv / Hervorhebung */
.konzepte em {
  font-style: italic;
}

.konzepte strong {
  font-weight: 700;
}
/* ======================================
   HINTERGRUND ABDÄMPFEN – KONZEPTE
====================================== */

.konzepte::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.65); /* ⬅ „Tuchstärke“ */
  z-index: -1;
}

/* ======================================
   ABSTRAKT – GRID NICHT RIESIG
====================================== */

.page-abstrakt .work-grid {
  max-width: 800px;   /* begrenzt die Gesamtbreite */
  margin: 0 auto;
  gap: 24px;           /* Abstand zwischen Kacheln */
}

/* =========================
   BIOGRAFIE – TYPO & RUHE
   ========================= */

.page-bio main {
  max-width: 900px;
  margin: 0 auto 10rem auto;
  text-align: left;
  font-family: "Friedrich 1941", serif;
}

/* Haupttitel */
.page-bio h1 {
  font-size: 3.2rem;
  margin-bottom: 4rem;
  font-weight: normal;
}

/* Abschnittstitel */
.page-bio h2 {
  font-size: 2.1rem;
  margin-top: 6rem;
  margin-bottom: 2rem;
  font-weight: normal;
}

.page-bio main p,
.page-bio main li {
  font-size: 1.6rem;
  line-height: 2.4;
}

/* Listen neutralisieren */
.page-bio .bio-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Jahreszahlen */
.page-bio .jahr {
  display: block;
  font-size: 1.3rem;
  opacity: 0.6;
  margin-bottom: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.page-bio .bio-block {
  margin-bottom: 12rem;

}
main {
  margin-bottom: 12rem;
}
/* =========================
   BIO – PORTRÄT
   ========================= */

.bio-portrait {
  max-width: 800px;
  margin: 0 auto 6rem auto;
}

.bio-portrait img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   BIO / AUSSTELLUNGEN – ERZWUNGENER RHYTHMUS
   ========================= */

body.page-bio main.site-main.bio section.bio-block {
  margin-bottom: 12rem;
}

body.page-bio main.site-main.bio ul.bio-list li {
  margin-bottom: 3.2rem;
}

body.page-bio main.site-main.bio ul.bio-list li span.jahr {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

/* PANEL */
.konzepte-panel {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: 8px;

  font-family: "Friedrich 1941", serif;
}

/* LINKS */
.konzepte-panel a {
  font-size: 22px;
  letter-spacing: 0.12em;
  line-height: 1.4;

  padding: 2px 0;
  text-decoration: none;
  color: #000;

  white-space: nowrap;
}

/* =========================
   HEADER → MAIN ABSTAND REDUZIEREN
========================= */

/* Navigation rückt näher an Header */
.main-nav {
  margin-top: 12px;   /* vorher deutlich größer */
}

/* Kontaktbereich näher an Navigation */
.contact-split {
  padding-top: 60px;  /* vorher ~120px */
}
/* =========================
   KONTAKT – 50 / 50 LAYOUT
========================= */

.contact-split {
  display: flex;
  justify-content: center;
  padding: 40px 60px;
}

.contact-split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 🔥 gleich groß */
  gap: 80px;
  max-width: 1600px;
  width: 100%;
  align-items: stretch;
}

/* LINKES BILD */
.contact-image {
  display: flex;
}

.contact-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* RECHTER KASTEN */
.contact-box {
  border: 1px solid #000;
  padding: 64px 64px 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

/* FORMULAR */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-form textarea {
  min-height: 320px; /* 🔥 großes Schreibfeld */
}

/* BUTTONS UNTEN */
.contact-actions {
  margin-top: 32px;
}

.contact-actions button {
  padding: 14px 36px;
  border: 1px solid #000;
  background: transparent;
  cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .contact-split-inner {
    grid-template-columns: 1fr;
    gap: 80px;
  }
}
/* =========================
   KONTAKT – TYPO FIX
========================= */

.contact-split,
.contact-split * {
  font-family: "Friedrich 1941", serif;
}

/* =========================
   BILD
========================= */

.biographie-bild img {
  width: 100%;
  max-width: 420px; /* Bild bewusst kleiner */
  height: auto;
  display: block;
  filter: grayscale(100%);
}

/* =========================
   TEXT & TYPOGRAFIE
========================= */

.biographie-text {
  font-family: "Friedrich 1941", serif;
  font-size: 18px;
  line-height: 2.1;          /* viel Zeilenluft */
  letter-spacing: 0.04em;
}

/* =========================
   ÜBERSCHRIFTEN
========================= */

.biographie-text h1 {
  font-size: 42px;
  letter-spacing: 0.05em;
  margin-top: 0;
  margin-bottom: 90px; /* viel Raum darunter */
}

.biographie-text h2 {
  font-size: 26px;
  letter-spacing: 0.08em;
  margin-top: 120px;   /* viel Raum darüber */
  margin-bottom: 50px; /* klarer Schnitt nach unten */
}

/* =========================
   ABSÄTZE
========================= */

.biographie-text p {
  margin-bottom: 80px; /* ruhiger Rhythmus */
}

/* =========================
   JAHRESZAHLEN
========================= */

.biographie-text .jahr {
  display: block;
  font-size: 20px;
  color: #9c9c9c;      /* grau */
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {
  .biographie {
    padding: 60px 30px;
  }

  .biographie-wrapper {
    grid-template-columns: 1fr;
  }

  .biographie-bild img {
    max-width: 100%;
  }
}

/* =========================
   BIOGRAPHIE LAYOUT
========================= */

.page-biographie {
  background: transparent;
}

.biographie {
  padding: 80px 60px 80px 140px; /* links extra Abstand vom Bildschirmrand */
}

.biographie-wrapper {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* Bild kleiner, Text größer */
  gap: 80px;
  align-items: start;
}
html body.page-biographie .biographie-text h3 {
  color: #767676;
}

/* =========================
   BILD
========================= */

.biographie-bild img {
  width: 100%;
  max-width: 600px; /* Bild bewusst kleiner */
  height: auto;
  display: block;
  filter: grayscale(100%);
}

/* =========================
   TEXT & TYPOGRAFIE
========================= */

.biographie-text {
  font-family: "Friedrich 1941", serif;
  font-size: 24px;
  line-height: 2.1;          /* viel Zeilenluft */
  letter-spacing: 0.04em;
}

/* =========================
   ÜBERSCHRIFTEN
========================= */

.biographie-text h1 {
  font-size: 42px;
  letter-spacing: 0.05em;
  margin-top: 0;
  margin-bottom: 90px; /* viel Raum darunter */
}

.biographie-text h2 {
  font-size: 26px;
  letter-spacing: 0.08em;
  margin-top: 120px;   /* viel Raum darüber */
  margin-bottom: 50px; /* klarer Schnitt nach unten */
}

/* =========================
   ABSÄTZE
========================= */

.biographie-text p {
  margin-bottom: 80px; /* ruhiger Rhythmus */
}

/* =========================
   JAHRESZAHLEN
========================= */

.biographie-text .jahr {
  display: block;
  font-size: 20px;
  color: #9c9c9c;      /* grau */
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {
  .biographie {
    padding: 60px 30px;
  }

  .biographie-wrapper {
    grid-template-columns: 1fr;
  }

  .biographie-bild img {
    max-width: 100%;
  }
}

/* =========================
   FLIESSTEXT – IKONEN
========================= */

.konzepte,
.konzepte p {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.75;

  text-align: justify;
  hyphens: auto;
}
/* =========================
   SERIFENLOS + KURSIV – ERZWUNGEN
========================= */

.konzepte span.sans {
  font-family: "Calibri", Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95em;
  letter-spacing: 0.04em;
}
.page-abstrakt .work-grid {
  max-width: 800px;
  margin: 0 auto;
  gap: 24px;
}


/* =========================================================
   MEIN DEUTSCHLAND – EIGENE, SAUBERE REGELN
========================================================= */

body.page-deutschland .work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 700px));
  justify-content: center;

  gap: 24px;
  padding: 24px;
}

body.page-deutschland .thumb {
  aspect-ratio: auto;
  overflow: visible;
}

body.page-deutschland .thumb img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

body.page-deutschland .thumb img.hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

body.page-deutschland .thumb:hover img.hover {
  opacity: 1;
}


/* =========================
   MALEREI CHRONOLOGISCH - JAHRTRENNER
========================= */

.jahr-trenner {
  grid-column: 1 / -1;        /* 🔥 über volle Breite */
  margin: 4rem 0 2rem;

  text-align: center;
  font-family: "Friedrich 1941", serif;
  font-size: 2rem;
  letter-spacing: 0.18em;

  opacity: 0.45;
  pointer-events: none;
}

/* =========================
   NAVIGATION – GRUNDLAGE
========================= */

.main-nav {
  margin-top: 12px;
  text-align: center;
}

.nav-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  font-family: "Friedrich 1941", serif;
  font-size: 24px;
  letter-spacing: 0.12em;
  padding-bottom: 12px;
}

/* Farben pro Menüpunkt */
.nav-item { --ink: #000; }
.nav-item:nth-child(1) { --ink: #c20064; } /* Malerei */
.nav-item:nth-child(2) { --ink: #ff9000; }
.nav-item:nth-child(3) { --ink: #fff000; }
.nav-item:nth-child(4) { --ink: #00d65b; } /* Konzepte */
.nav-item:nth-child(5) { --ink: #1f83ff; }
.nav-item:nth-child(6) { --ink: #7200ff; }

/* =========================
   HAUPTMENÜ LINKS
========================= */

.nav-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: #000;
  overflow: hidden;
}

/* Wellen-Hover */
.nav-item > a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateY(100%);
  background: var(--ink);
}

.nav-item > a::after {
  content: "";
  position: absolute;
  left: -50%;
  width: 200%;
  height: 42px;
  background: var(--ink);
  bottom: -42px;
  opacity: 0;
}

.nav-item:hover > a::before {
  animation: fillUp 0.9s ease-out forwards;
}

.nav-item:hover > a::after {
  animation: waveRise 0.9s linear forwards;
}

@keyframes fillUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes waveRise {
  0%   { bottom: -42px; opacity: 1; }
  80%  { bottom: calc(100% - 30px); opacity: 1; }
  100% { bottom: 100%; opacity: 0; }
}

.nav-item > a span {
  position: relative;
  z-index: 2;
}


/* =========================
   DROPDOWN INHALT
========================= */

.flow-list {
  list-style: none;
  margin: 0;
  padding: 36px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.flow-list a {
  font-family: "Friedrich 1941", serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Text erscheint gestaffelt */
.nav-item.has-flow:hover .flow-list a {
  opacity: 1;
}

.nav-item.has-flow:hover .flow-list li:nth-child(1) a {
  transition-delay: 0.3s;
}
.nav-item.has-flow:hover .flow-list li:nth-child(2) a {
  transition-delay: 0.6s;
}
.nav-item.has-flow:hover .flow-list li:nth-child(3) a {
  transition-delay: 0.9s;
}
/* =========================
   MALEREI – THEMEN (SOFORT-FIX)
========================= */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  padding: 32px;
}

.category-item {
  position: relative;   /* 🔥 absolut entscheidend */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
}

.category-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-item img.hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-item:hover img.hover {
  opacity: 1;
}

/* ===== NUR EINBLENDEN, NICHTS ANFASSEN ===== */

.nav-item.has-flow:hover .flow-list li {
  animation: fadeInItem 240ms ease-out forwards;
}

.nav-item.has-flow:hover .flow-list li:nth-child(1) { animation-delay: 0ms; }
.nav-item.has-flow:hover .flow-list li:nth-child(2) { animation-delay: 120ms; }
.nav-item.has-flow:hover .flow-list li:nth-child(3) { animation-delay: 240ms; }

@keyframes fadeInItem {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   DROPDOWN – AUSFAHREN + MAIN NACH UNTEN SCHIEBEN
   HOVER BLEIBT, STRUKTUR BLEIBT
========================================================= */

/* Flow ist IM Layout, aber eingefahren */
.nav-item.has-flow .flow {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease;
}

/* Beim Hover fährt das Dropdown aus */
.nav-item.has-flow:hover .flow {
  max-height: 500px; /* ausreichend für alle Einträge */
}

/* Liste */
.nav-item.has-flow .flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  perspective: 1000px;
}

/* KÄSTEN */
.nav-item.has-flow .flow-list li {
  background: #666;
  min-width: 220px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform-origin: top center;
  transform: rotateX(-90deg);
}

/* Text */
.nav-item.has-flow .flow-list li a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 0.08em;
}

/* Hover auf Kasten */
.nav-item.has-flow .flow-list li:hover {
  background: #606060;
}

/* STYLE-2 Animation der Items */
.nav-item.has-flow:hover .flow-list li {
  animation: dropdown-style2 300ms ease-in-out forwards;
}

/* Staffelung */
.nav-item.has-flow:hover .flow-list li:nth-child(1) { animation-delay: 80ms; }
.nav-item.has-flow:hover .flow-list li:nth-child(2) { animation-delay: 200ms; }
.nav-item.has-flow:hover .flow-list li:nth-child(3) { animation-delay: 320ms; }

/* Keyframes */
@keyframes dropdown-style2 {
  from {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
/* =========================================================
   DROPDOWN – KÄSTEN = FARBE & FORM DES MENÜS
   (MALEREI / KONZEPTE)
========================================================= */

.nav-item.has-flow .flow-list li {
  background: var(--ink);        /* 🔥 gleiche Farbe wie Menüpunkt */
  min-width: 220px;
  height: 48px;

  border-radius: 999px;          /* 🔥 gleiche Pillenform */

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform-origin: top center;
  transform: rotateX(-90deg);
}

/* Text */
.nav-item.has-flow .flow-list li a {
  color: #000;                   /* wie Menütext */
  font-size: 18px;
  letter-spacing: 0.08em;
  text-decoration: none;
}

/* Hover – minimal dunkler, ruhig */
.nav-item.has-flow .flow-list li:hover {
  filter: brightness(0.9);
}
/* =========================================================
   DROPDOWN – MENÜ BLEIBT STABIL
   HEADER SCHIEBT MAIN (RICHTIG)
========================================================= */

/* Header ist der Push-Container */
.site-header {
  position: relative;
  transition: padding-bottom 350ms ease;
}

/* Wenn EIN Dropdown offen ist → Header wird höher */
.site-header:has(.nav-item.has-flow:hover) {
  padding-bottom: 180px; /* Höhe des Dropdowns */
}

/* Dropdown selbst darf NICHT das Menü beeinflussen */
.nav-item.has-flow .flow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}

/* Menüabstände bleiben IMMER gleich */
.nav-list {
  align-items: center;
}

/* Dropdown-Boxen: Breite begrenzen + Text sauber umbrechen */
.nav-item.has-flow .flow-list li {
  max-width: 260px;
  padding: 10px 22px;
  height: auto;
  text-align: center;
}

/* Text: NIE abschneiden */
.nav-item.has-flow .flow-list li a,
.nav-item.has-flow .flow-list li span {
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.3;
}
/* =========================================================
   DROPDOWN – GARANTIERTES PUSHEN DES MAIN
   HEADER WÄCHST BEI HOVER
========================================================= */

/* Header ist normaler Block im Layout */
.site-header {
  position: relative;
  margin-bottom: 0;
  transition: margin-bottom 300ms ease;
}

/* Sobald EIN Dropdown offen ist → Header schiebt Main */
.site-header:has(.nav-item.has-flow:hover) {
  margin-bottom: 180px; /* Höhe des Dropdowns */
}

/* Dropdown selbst bleibt optisch am Menü */
.nav-item.has-flow .flow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}

/* Menü-Geometrie bleibt stabil */
.nav-list {
  align-items: center;
}

/* Dropdown-Items: Text darf umbrechen */
.nav-item.has-flow .flow-list li {
  max-width: 260px;
  padding: 10px 22px;
  height: auto;
}

.nav-item.has-flow .flow-list li a,
.nav-item.has-flow .flow-list li span {
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.3;
}

/* =========================================
   DROPDOWN – EINZIGER PUSH (STABIL)
========================================= */

.site-header {
  position: relative;
  margin-bottom: 0;
  transition: margin-bottom 300ms ease;
}

/* EIN Dropdown offen → kontrollierter Push */
.site-header:has(.nav-item.has-flow:hover) {
  margin-bottom: 40px; /* HIER einstellen */
}

/* Dropdown selbst IMMER aus dem Flow */
.nav-item.has-flow {
  position: relative;
}

.nav-item.has-flow .flow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  z-index: 200;
}


/* =========================================
   BILDNAVIGATION
========================================= */
body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.werk {
  padding: 4rem;
}

/* Bildcontainer */
.bild-frame {
  position: relative;
  display: inline-block;
}

/* Bild */
#werkbild {
  max-width: 70vw;
  max-height: 70vh;
  display: block;
}

/* Klickzonen */
.bild-frame::before,
.bild-frame::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  cursor: pointer;
  z-index: 10;
}

.bild-frame::before {
  left: 0;
}

.bild-frame::after {
  right: 0;
}

/* DEBUG – zum Testen aktivieren */
/*
.bild-frame::before { background: rgba(255,0,0,0.15); }
.bild-frame::after  { background: rgba(0,0,255,0.15); }
*/



/* =========================
   BIO – OPTISCHE ACHSE
========================= */

.biographie-text {
  text-align: left;
}

/* Eintrag: Jahr | Text */
.bio-entry {
  display: grid;
  grid-template-columns: 10ch 1fr;  /* stabile Achse für Jahreszahlen */
  column-gap: 6px;                 /* 🔥 enger Abstand Jahr ↔ Text */
  margin-bottom: 72px;              /* ruhiger, aber nicht zu luftig */
  align-items: start;
}

/* Jahreszahlen */
.bio-entry .jahr {
  font-size: 26px;                  /* 🔥 deutlich größer */
  letter-spacing: 0.22em;
  color: #8a8a8a;
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;                 /* ❗ nicht mehr gequetscht */
  white-space: nowrap;
}

/* Text */
.bio-content p {
  margin: 0;
  font-size: 24px;
  line-height: 2.05;
  letter-spacing: 0.04em;
}

/* =========================
   BIOGRAPHIE – BILD GROSS
========================= */

.biographie-bild {
  display: flex;
  justify-content: flex-end;   /* Bild an die rechte Kante der Spalte */
  padding-left: 48px;          /* 🔥 HIER: Bild weiter nach rechts schieben */
}

.biographie-bild img {
  width: 100%;
  max-width: 720px;            /* Bildgröße bleibt exakt gleich */
  height: auto;
  display: block;
  filter: grayscale(100%);
}

/* =========================
        HOVER
========================= */

.thumb {
  position: relative;
  cursor: pointer;
}

/* Hover-Bild liegt oben, bleibt sichtbar */
.thumb img.hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;      /* 🔑 WICHTIG */
}

/* Hover sichtbar */
.thumb:hover img.hover {
  opacity: 1;
}

/* Basisbild */
.thumb img:not(.hover) {
  display: block;
}

/* =========================
        IMPRESSUM
========================= */
/* =========================
   IMPRESSUM – ZWEI SPALTEN
========================= */

.impressum-wrapper {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* Bild | Text */
  gap: 80px;

  max-width: 1200px;
  margin: 120px auto 0;
  padding: 0 60px;
  align-items: start;
}

/* Bild links */
.impressum-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 1400px;
  margin: 120px auto 0;
}

.impressum-bild {
  justify-content: center;
}

.impressum-bild img {
  width: 80%;
  max-width: none;
}

/* Text rechts */
.impressum-content {
  text-align: left;
  font-family: "Friedrich 1941", serif;
}

/* Mobile: untereinander */
@media (max-width: 900px) {
  .impressum-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .impressum-bild {
    justify-content: center;
  }
}
#background {
  position: fixed;
  inset: 0;
  z-index: -1;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 🌌 Globaler Hintergrund */

/* 🌌 Globaler Seitenhintergrund */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: var(--bg-image); /* ← hier kommt das Zufallsbild rein */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: brightness(0.9);
}