/* ================================================================
   Self-hosted fonts (assets/fonts/) — no external requests
   ================================================================ */
@font-face {
  font-family: "Marcellus";
  src: url("fonts/Marcellus-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ================================================================
   FELIX MUNDI — Maison stylesheet
   Palette: Porcelain & Ink, one jade accent
   Type: Marcellus (display) · EB Garamond (body) · Inter (utility)
   ================================================================ */

:root {
  --porcelain: #FBFAF8;
  --paper: #F3F1EC;
  --ink: #121110;
  --graphite: #5A564F;
  --hairline: rgba(18, 17, 16, 0.14);
  --jade: #1F4A38;
  --measure: 34rem;
  --wide: 68rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  background: var(--porcelain);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  animation: pageIn 0.9s ease both;
}
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 3px;
}
img { max-width: 100%; display: block; }

/* ---------- utility type ---------- */
.label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
}
.label--jade { color: var(--jade); }

/* ---------- header ---------- */
.site-header {
  border-bottom: 1px solid var(--hairline);
  padding: 1.5rem 2rem 1.3rem;
}
.site-header__inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.wordmark {
  font-family: "Marcellus", serif;
  font-size: 1.35rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.nav { display: flex; gap: 1.8rem; }
.nav--left { justify-content: flex-start; }
.nav--right { justify-content: flex-end; }
.nav a {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--jade);
}

@media (max-width: 720px) {
  .site-header__inner { grid-template-columns: 1fr; justify-items: center; row-gap: 1rem; }
  .nav { flex-wrap: wrap; justify-content: center; gap: 1.1rem 1.4rem; }
}

/* ---------- sections ---------- */
.section { padding: 7rem 2rem; }
.section--tint { background: var(--paper); }
.section--rule { border-top: 1px solid var(--hairline); }
.section__inner { max-width: var(--wide); margin: 0 auto; }
.section__inner--narrow { max-width: var(--measure); margin: 0 auto; }
.centered { text-align: center; }

.display {
  font-family: "Marcellus", serif;
  font-weight: 400;
  letter-spacing: 0.06em;
}
h2.display { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.25; }

.question {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.28;
  max-width: 22ch;
  margin: 2.2rem auto 0;
}
.lede { color: var(--graphite); font-size: 1.2rem; max-width: 44ch; margin: 2rem auto 0; }

/* ---------- hero ---------- */
.hero { padding: 9rem 2rem 8rem; text-align: center; }
.hero__invite { margin-top: 2rem; }
.hero__ctas { margin-top: 2.4rem; display: flex; gap: 2.4rem; justify-content: center; flex-wrap: wrap; }

.cta {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink);
  transition: color .25s ease, border-color .25s ease;
}
.cta--quiet { color: var(--graphite); border-bottom-color: var(--hairline); }
.cta:hover, .cta--quiet:hover { color: var(--jade); border-bottom-color: var(--jade); }

/* ---------- seal ---------- */
.seal { width: 54px; height: 54px; margin: 0 auto; opacity: 0.92; }
.seal--footer { width: 44px; height: 44px; }

/* ---------- two rooms ---------- */
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3.5rem; }
.room { border-top: 1px solid var(--ink); padding-top: 1.6rem; }
.room h3 { font-family: "Marcellus", serif; font-weight: 400; font-size: 1.35rem; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
.room p { color: var(--graphite); font-size: 1.05rem; }
.room .cta { display: inline-block; margin-top: 1.4rem; }
@media (max-width: 720px) { .rooms { grid-template-columns: 1fr; gap: 2.6rem; } }

/* ---------- collection ---------- */
.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; margin-top: 3.5rem; }
.work { text-align: center; }
.work__frame {
  border: 1px solid var(--hairline);
  background: #fff;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
}
.work__frame span {
  font-style: italic;
  color: var(--graphite);
  font-size: 0.98rem;
  max-width: 18ch;
}
.work__no {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: 1.1rem;
}
@media (max-width: 860px) { .works { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .works { grid-template-columns: 1fr; max-width: 20rem; margin-left: auto; margin-right: auto; } }

/* ---------- definition rows (briefing) ---------- */
.rows { margin-top: 3rem; border-top: 1px solid var(--hairline); }
.row {
  display: grid;
  grid-template-columns: 8rem 10rem 1fr;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.row__time { font-family: "Inter", system-ui, sans-serif; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--jade); }
.row__name { font-family: "Marcellus", serif; font-size: 1.15rem; letter-spacing: 0.05em; }
.row__desc { color: var(--graphite); font-size: 1.02rem; }
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ---------- join paths ---------- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4rem 4rem; margin-top: 3.5rem; }
.path { border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.path h3 { font-family: "Marcellus", serif; font-weight: 400; font-size: 1.3rem; letter-spacing: 0.08em; }
.path p { color: var(--graphite); font-size: 1.02rem; margin-top: 0.8rem; }
.path .cta { display: inline-block; margin-top: 1.3rem; }
@media (max-width: 720px) { .paths { grid-template-columns: 1fr; } }

/* ---------- prose ---------- */
.prose p + p { margin-top: 1.3rem; }
.prose .em { font-style: italic; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 5rem 2rem 3rem;
  text-align: center;
}
.site-footer .wordmark { font-size: 1rem; margin-top: 1.6rem; }
.site-footer__question {
  font-style: italic;
  color: var(--graphite);
  font-size: 1rem;
  margin-top: 1rem;
}
.site-footer__nav { margin-top: 2.4rem; display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; }
.site-footer__nav a {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
}
.site-footer__nav a:hover { color: var(--jade); }
.site-footer__legal {
  margin-top: 2.6rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--graphite);
}

/* ---------- collection: artwork cards & detail ---------- */
.work--link { display: block; }
.work--link:hover .work__title { color: var(--jade); }
.work__frame--art { padding: 7%; }
.work__frame--art img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; }
.work__title {
  font-family: "Marcellus", serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
  transition: color .25s ease;
}
.work__artist { font-style: italic; color: var(--graphite); font-size: 0.95rem; margin-top: 0.15rem; }

.artwork__stage {
  max-width: var(--wide);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--hairline);
  padding: clamp(1.2rem, 4vw, 3.5rem);
  display: flex;
  justify-content: center;
}
.artwork__stage img { max-width: 100%; max-height: 74vh; object-fit: contain; }
.artwork__artist { font-style: italic; color: var(--graphite); font-size: 1.15rem; margin-top: 0.7rem; }
.artwork__excerpt {
  margin-top: 2.6rem;
  border-left: 1px solid var(--jade);
  padding-left: 1.6rem;
}
.artwork__meta {
  margin-top: 3.4rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  padding-top: 1.8rem;
}
.artwork__meta p { color: var(--graphite); font-size: 0.98rem; margin-top: 0.5rem; }
@media (max-width: 720px) { .artwork__meta { grid-template-columns: 1fr; } }

/* ---------- collection: works with content ---------- */
.work__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.work__frame--filled { padding: 8%; }
a.work { display: block; }
a.work:hover .work__frame { border-color: var(--jade); }
.work__title {
  font-family: "Marcellus", serif;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}
.work__artist {
  font-style: italic;
  color: var(--graphite);
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

/* ---------- work detail page ---------- */
.artwork { padding: 5rem 2rem 3rem; }
.artwork__inner { max-width: 56rem; margin: 0 auto; }
.artwork__stage {
  border: 1px solid var(--hairline);
  background: #fff;
  padding: clamp(1.2rem, 4vw, 3rem);
}
.artwork__stage img { width: 100%; height: auto; }
.artwork__meta { margin-top: 2.6rem; text-align: center; }
.artwork__no {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jade);
}
.artwork__title {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.06em;
  margin-top: 0.8rem;
}
.artwork__artist { font-style: italic; color: var(--graphite); font-size: 1.1rem; margin-top: 0.5rem; }
.artwork__facts {
  margin-top: 1.2rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
}
.artwork__desc { max-width: var(--measure); margin: 3rem auto 0; color: var(--ink); }
.artwork__desc p + p { margin-top: 1.2rem; }
.artwork__back { text-align: center; margin-top: 3.4rem; }

/* ---------- legal pages (privacy, imprint) ---------- */
.legal h2{font-family:"Marcellus",serif;font-weight:400;font-size:1.3rem;letter-spacing:.04em;margin:2.6rem 0 .8rem;color:var(--ink)}
.legal h3{font-family:"Inter",system-ui,sans-serif;font-size:.9rem;font-weight:500;letter-spacing:.02em;margin:1.8rem 0 .5rem;color:var(--ink)}
.legal h4{font-family:"Inter",system-ui,sans-serif;font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin:1.3rem 0 .4rem}
.legal p{margin-top:.7rem}
.legal ul{margin:.7rem 0 .7rem 1.2rem}
.legal li{margin-top:.3rem}
.legal a{color:var(--jade);border-bottom:1px solid var(--hairline)}
.legal a:hover{border-color:var(--jade)}
.legal{font-size:1rem;line-height:1.6}

/* ================================================================
   Zweisprachiger Rahmen — ergänzt 2026-08-16
   Sprachumschalter, Skip-Link und Kanalzeile im Fuß.
   ================================================================ */

/* Skip-Link: für Tastatur- und Screenreader-Nutzung. Unsichtbar, bis er
   den Fokus bekommt — dann sitzt er oben links über allem.

   ACHTUNG: Das Verstecken (position/left) steht zusätzlich als kurzer
   <style>-Block im Kopf jeder Seite — erzeugt von _source/build.py. Grund:
   Fehlt diese Datei, ist sie blockiert oder liegt veraltet im Cache, stünde
   der Link sonst sichtbar oben links. Hier geht es nur noch um sein Aussehen,
   sobald er den Fokus hat. Beide Stellen müssen zusammenpassen. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--porcelain);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 1.4rem;
}
.skip-link:focus {
  left: 0;
}

/* Sprachumschalter. Steht als letztes Element der rechten Navigation,
   optisch durch eine Haarlinie abgesetzt — er gehört nicht zu den
   Inhaltsseiten, sondern wechselt die Fassung. */
.nav__lang {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jade);
  padding-bottom: 2px;
  padding-left: 1.8rem;
  margin-left: -0.6rem;
  border-bottom: 1px solid transparent;
  border-left: 1px solid var(--hairline);
  transition: color .25s ease, border-bottom-color .25s ease;
}
.nav__lang:hover {
  color: var(--ink);
  border-bottom-color: var(--jade);
}
@media (max-width: 720px) {
  .nav__lang { padding-left: 0; margin-left: 0; border-left: 0; }
}

/* Das Siegel liegt jetzt als eigene Datei vor (assets/seal.svg) und wird
   als <img> eingebunden — statt in jeder Seite als 7 KB Inline-SVG. */
img.seal { object-fit: contain; }

/* Korrektur zum Bestand: .artwork__meta war zweimal definiert. Die zweite
   Definition setzte text-align auf zentriert, ließ aber das zweispaltige
   Raster der ersten stehen — Nummer und Künstlerin standen dadurch links,
   Titel und Faktenzeile rechts, ohne erkennbare Beziehung. Eine Spalte,
   zentriert, wie es die zweite Definition offenbar meinte. */
.artwork__meta {
  grid-template-columns: 1fr;
  gap: 0;
}