/* culisse.de 2026 – gemeinsames Stylesheet
   Alle Schriften liegen lokal in assets/fonts. Es wird kein externer Server angefragt. */

@font-face { font-family: "Great Vibes"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/gv.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/js-300.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/js-400.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/js-600.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/js-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/ar-900.woff2") format("woff2"); }

:root {
  --ink: #f2f2f0;
  --ink-soft: rgba(242, 242, 240, 0.82);
  --dark: #121212;
  --fill: 0.22;              /* Deckkraft der Kreise */
  --dim: 0.40;               /* Grund-Abdunklung des Hintergrunds */
  --blur: 6px;               /* Stärke der Unschärfe */
  --blur-dark: 0.75;         /* Helligkeit bei Unschärfe (0.75 = 25 % dunkler) */
  --size-main: 56px;         /* Kreisgröße Hauptnavigation */
  --size: var(--size-main);
  --gap: 14px;
  --edge: 22px;
  --dur: 0.9s;               /* Einflug-Dauer */
  --stagger: 0.08s;          /* Versatz zwischen den Kreisen */
  --ease: cubic-bezier(0.25, 0.8, 0.35, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #141414;
  color: var(--ink);
  font-family: "Josefin Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; min-height: 100dvh; overflow: hidden; }

a { color: var(--ink); text-decoration: none; }
a:hover, a:focus-visible { color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Hintergrund ---------- */
.bg {
  position: fixed;
  inset: -20px;
  z-index: 0;
  overflow: hidden;
  background: #141414 center / cover no-repeat;
}
.bg video, .bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(0) brightness(1);
  transition: filter 0.5s ease, opacity 1.2s ease;
}
/* Unschärfe an: weichgezeichnet und 25 % dunkler */
body.is-blurred .bg video,
body.is-blurred .bg img { filter: blur(var(--blur)) brightness(var(--blur-dark)); }

.dim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0) 45%, rgba(0,0,0,0.35)),
    rgba(10, 14, 18, var(--dim));
  pointer-events: none;
}

/* ---------- Kopf: zentriert im oberen Drittel ---------- */
.head {
  position: fixed;
  z-index: 2;
  left: 24px;
  right: 24px;
  top: 0;
  height: 36vh;
  height: 36dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  animation: fade 0.6s ease-out both;
}
.logo {
  margin: 0;
  font-family: "Great Vibes", "Snell Roundhand", cursive;
  font-weight: 400;
  font-size: clamp(56px, 17vw, 104px);
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.logo a { color: inherit; }
.line {
  display: block;
  width: min(220px, 56vw);
  height: 1px;
  margin: 14px auto 16px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 18%, #fff 82%, rgba(255,255,255,0));
}
.sub {
  margin: 0;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- Inhalt unter dem Kopf ---------- */
.content {
  position: fixed;
  z-index: 2;
  top: calc(36vh + 40px);
  top: calc(36dvh + 40px);
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  animation: fade 0.6s 0.1s ease-out both;
}
.person { display: flex; flex-direction: column; gap: 4px; }
.person strong, .person .name { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0.4px; }
.person span { font-size: 13px; font-weight: 300; color: var(--ink-soft); letter-spacing: 0.4px; }
.intro { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); letter-spacing: 0.3px; }
.contact { display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 300; margin: 0; padding: 0; list-style: none; }
.contact a { border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 2px; }
.contact a:hover, .contact a:focus-visible { border-bottom-color: #fff; }

/* ---------- Große Jahreszahl ---------- */
.year {
  position: fixed;
  z-index: 2;
  top: 36vh;
  top: 36dvh;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px calc(var(--size-main) * 3 + var(--gap) * 2 + var(--edge) + 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.year__num {
  margin: 0;
  font-size: clamp(64px, 18vw, 200px);
  font-family: "Archivo", "Josefin Sans", sans-serif;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  animation: pop 0.5s ease-out both;
}
.year__num--word { font-size: clamp(52px, 14vw, 160px); letter-spacing: 0; }
.year__extra { pointer-events: auto; }
/* FUERTE-Intro: Schriftzug mit weitem Abstand */
.year--intro .year__num { letter-spacing: 0.08em; font-size: clamp(44px, 13vw, 170px); }
/* Unschärfe aus: Bild klar, Zahl halbtransparent */
body:not(.is-blurred) .year { opacity: 0.5; }

/* ---------- Kreis-Navigation ---------- */
.nav {
  position: fixed;
  z-index: 4;
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav--left { left: var(--edge); align-items: flex-start; }
.nav--right { right: var(--edge); align-items: flex-end; }

.nav__item { display: flex; align-items: center; }
.nav--left .nav__item { animation: in-left var(--dur) var(--ease) both; }
.nav--right .nav__item { animation: in-right var(--dur) var(--ease) both; }

/* Kreis und Label bilden zusammen eine Tippfläche */
.nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.nav--right .nav__link { flex-direction: row-reverse; }
.nav__link:hover, .nav__link:focus-visible { color: var(--ink); }

.circle {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(242, 242, 240, 0.6);
  background: rgba(242, 242, 240, var(--fill));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.circle svg { width: 22px; height: 22px; }
.nav__link:hover .circle { transform: scale(1.05); }

.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  border: 1px solid rgba(242, 242, 240, 0.6);
  background: rgba(242, 242, 240, var(--fill));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

/* aktive Seite / aktives Jahr */
.nav__link[aria-current="page"] .circle { background: var(--ink); color: var(--dark); }
.circle--year { font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }

/* Tropfen: leer = Unschärfe ausschalten, gefüllt = einschalten */
.drop { fill: none; }
body:not(.is-blurred) .drop { fill: currentColor; }

/* ---------- Zweite Ebene (Jahre) ---------- */
/* Handy: als Reihe mittig über der Hauptnavigation */
.nav--sub {
  --size: 42px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  flex-direction: row;
  gap: 7px;
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px) + 2 * var(--size-main) + var(--gap) + 18px);
}
.nav--sub .nav__item { animation: in-up var(--dur) var(--ease) both; }
.nav--sub .circle svg { width: 19px; height: 19px; }
.nav--sub .circle--year { font-size: 11px; }

/* Einflug-Reihenfolge Handy: links von oben nach unten, rechts von unten nach oben */
.nav--left .nav__item:nth-child(1) { animation-delay: 0.15s; }
.nav--left .nav__item:nth-child(2) { animation-delay: calc(0.15s + 1 * var(--stagger)); }
.nav--right .nav__item:nth-child(1) { animation-delay: calc(0.15s + 1 * var(--stagger)); }
.nav--right .nav__item:nth-child(2) { animation-delay: calc(0.15s + 0 * var(--stagger)); }
.nav--sub .nav__item:nth-child(1) { animation-delay: calc(0.15s + 2 * var(--stagger)); }
.nav--sub .nav__item:nth-child(2) { animation-delay: calc(0.15s + 3 * var(--stagger)); }
.nav--sub .nav__item:nth-child(3) { animation-delay: calc(0.15s + 4 * var(--stagger)); }
.nav--sub .nav__item:nth-child(4) { animation-delay: calc(0.15s + 5 * var(--stagger)); }
.nav--sub .nav__item:nth-child(5) { animation-delay: calc(0.15s + 6 * var(--stagger)); }
.nav--sub .nav__item:nth-child(6) { animation-delay: calc(0.15s + 7 * var(--stagger)); }
.nav--sub .nav__item:nth-child(7) { animation-delay: calc(0.15s + 8 * var(--stagger)); }

/* Fotostrecke: Bilder überblenden */
.bg--slides img { opacity: 0; }
.bg--slides img.is-active { opacity: 1; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@keyframes in-left  { 0% { transform: translateX(-140px); opacity: 0; } 65% { transform: translateX(4px); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes in-right { 0% { transform: translateX(160px);  opacity: 0; } 65% { transform: translateX(-4px); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes in-up    { 0% { transform: translateY(160px); opacity: 0; } 65% { transform: translateY(-4px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* Niedrige Bildschirme: Kreise etwas kleiner, damit alles passt */
/* Blur aus: Jahresreihe tritt auf allen Geräten auf 20 % zurück */
.nav--sub { transition: opacity 0.4s ease; }
body:not(.is-blurred) .nav--sub { opacity: 0.2; }
body:not(.is-blurred) .nav--sub:hover,
body:not(.is-blurred) .nav--sub:focus-within { opacity: 1; }

@media (max-height: 760px) {
  :root { --size-main: 48px; --gap: 10px; }
  .circle svg { width: 20px; height: 20px; }
  .circle--year { font-size: 12px; }
}
@media (max-height: 640px) {
  :root { --size-main: 44px; --gap: 8px; }
  .head { height: 32vh; }
  .content { top: calc(32vh + 28px); }
  .year { top: 32vh; }
}

/* ---------- Tablet und Desktop ----------
   Hauptnavigation als Reihe unten mittig, Kreise kommen von unten.
   Zweite Ebene (Jahre) als Reihe darüber, Kreise 10 % größer. */
@media (min-width: 744px) {
  :root { --edge: 32px; --gap-x: 26px; --item-w: 84px; }

  .nav { flex-direction: row; gap: var(--gap-x); align-items: flex-start; }
  .nav--left  { left: auto; right: calc(50% + var(--gap-x) / 2); }
  .nav--right { right: auto; left: calc(50% + var(--gap-x) / 2); }

  .nav__item { width: var(--item-w); justify-content: center; }
  .nav__link,
  .nav--right .nav__link { flex-direction: column; gap: 8px; }

  .nav--sub {
    --size: calc(var(--size-main) * 1.1);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px) + var(--size-main) + 8px + 26px + 30px);
    gap: 18px;
  }
  .nav--sub .nav__item { width: auto; }

  /* Blur aus: Jahresleiste tritt auf 20 % Deckkraft zurück, bei Maus/Fokus wieder voll */
  .circle--year { font-size: 14px; }

  .nav--left .nav__item,
  .nav--right .nav__item,
  .nav--sub .nav__item { animation-name: in-up; }

  /* Reihenfolge von links nach rechts: Home, Blur, Fuerte, Kontakt, dann die Jahre */
  .nav--left .nav__item:nth-child(1)  { animation-delay: 0.15s; }
  .nav--left .nav__item:nth-child(2)  { animation-delay: calc(0.15s + 1 * var(--stagger)); }
  .nav--right .nav__item:nth-child(1) { animation-delay: calc(0.15s + 2 * var(--stagger)); }
  .nav--right .nav__item:nth-child(2) { animation-delay: calc(0.15s + 3 * var(--stagger)); }
  .nav--sub .nav__item:nth-child(1) { animation-delay: calc(0.15s + 4 * var(--stagger)); }
  .nav--sub .nav__item:nth-child(2) { animation-delay: calc(0.15s + 5 * var(--stagger)); }
  .nav--sub .nav__item:nth-child(3) { animation-delay: calc(0.15s + 6 * var(--stagger)); }
  .nav--sub .nav__item:nth-child(4) { animation-delay: calc(0.15s + 7 * var(--stagger)); }
  .nav--sub .nav__item:nth-child(5) { animation-delay: calc(0.15s + 8 * var(--stagger)); }
  .nav--sub .nav__item:nth-child(6) { animation-delay: calc(0.15s + 9 * var(--stagger)); }
  .nav--sub .nav__item:nth-child(7) { animation-delay: calc(0.15s + 10 * var(--stagger)); }

  /* große Jahreszahl über der Navigation mittig */
  .year { padding: 0 24px calc(var(--edge) + 2 * var(--size-main) + 120px); }

  .sub { font-size: 13px; letter-spacing: 6px; }
  .person strong, .person .name { font-size: 19px; }
  .contact { font-size: 16px; }
  .intro { font-size: 16px; }
}

/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Blur-Zustand beim Seitenwechsel ohne Animation übernehmen */
.no-anim, .no-anim * { transition: none !important; }