/* --- Rahmen --------------------------------------------------------------- */
.rahmen span {
  position: fixed;
  z-index: 99998;
  background-color: var(--farbe-tinte);
}
.rahmen__links,
.rahmen__rechts { top: 0; width: var(--rahmen); height: 100%; }
.rahmen__links { left: 0; }
.rahmen__rechts { right: 0; }
.rahmen__oben,
.rahmen__unten { left: 0; width: 100%; height: var(--rahmen); }
.rahmen__oben { top: 0; }
.rahmen__unten { bottom: 0; }

/* --- NAV-/HOME-Beschriftung ---------------------------------------------- */
.marke {
  position: fixed;
  top: 5px;
  left: 36px;
  z-index: 99999;
  padding: 0;
  border: 0;
  background: none;
  color: var(--farbe-grau);
  font-family: var(--schrift);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.marke[hidden] { display: none; }
.marke--zurueck { cursor: w-resize; }
@media (hover: hover) {
  .marke--zurueck:hover { color: var(--farbe-weiss); }
}

/* --- Navigation ----------------------------------------------------------- */
.nav {
  position: fixed;
  inset: var(--nav-abstand) auto var(--nav-abstand) var(--nav-abstand);
  z-index: 666;
  display: flex;
  flex-direction: column;
  width: var(--nav-breite);
  background: var(--farbe-tinte);
  color: rgb(255 255 255 / 0);
  transition: width var(--uebergang-lang), color var(--uebergang-kurz);
}
.nav--start {
  width: var(--nav-breite-offen);
  color: rgb(255 255 255 / 1);
}
@media (hover: hover) {
  .nav:hover {
    width: var(--nav-breite-offen);
    color: rgb(255 255 255 / 1);
  }
}

.nav__feld {
  position: relative;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  color: inherit;
  cursor: alias;
  font-family: var(--schrift);
  transition: flex-grow var(--uebergang-lang);
}
.nav__feld--aktiv { flex-grow: 2; }

/* Hover nur auf Geraeten mit echtem Zeiger. Auf Touch bleibt der
   Hover-Zustand nach dem Tippen haengen — ein angetipptes Nav-Feld bliebe
   aufgeklappt, ein angetipptes Werk dunkel, ein Filter markiert. */
@media (hover: hover) {
  .nav__feld:hover { flex-grow: 2; }
}

.nav__feld span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nav__feld--bildarchiv    { background-color: var(--nav-bilder); }
.nav__feld--ausstellungen { background-color: var(--nav-ausstellung); }
.nav__feld--biographie    { background-color: var(--nav-bio); }
.nav__feld--pressearchiv  { background-color: var(--nav-presse); }
.nav__feld--katalog       { background-color: var(--nav-katalog); }
.nav__feld--impressum     { background-color: var(--nav-impressum); }

/* --- Panels --------------------------------------------------------------- */
.panel {
  position: fixed;
  inset: var(--rahmen) var(--rahmen) var(--rahmen) 84px;
  z-index: 100;
  overflow: auto;
  background-color: var(--farbe-papier);
  opacity: 0;
  transition: opacity var(--uebergang-lang);
}
.panel[hidden] { display: none; }
.panel--aktiv { opacity: 1; }

/* --- Burger (nur mobil sichtbar) ------------------------------------------ */
.burger { display: none; }

/* --- Mobil ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .marke { display: none; }

  /* Mobil startet die Navigation geschlossen — wie im Bestand. Das laeuft
     ueber eine Klasse statt ueber das hidden-Attribut, damit der Desktop
     unberuehrt bleibt. */
  .nav {
    inset: var(--nav-abstand);
    display: none;
    width: auto;
    color: rgb(255 255 255 / 1);
  }
  .nav--offen { display: flex; }

  /* Groesse mitwachsend: "AUSSTELLUNGEN" lief bei festen 35px auf einem
     390px breiten Schirm rechts aus dem Feld. Senkrecht mittig, damit die
     Beschriftung unabhaengig von der Feldhoehe sitzt. */
  .nav__feld span {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 28px;
    font-size: clamp(1.25rem, 6.2vw, 2.1875rem);
    transform: translateY(-50%);
  }

  /* Schaltflaechengroesse statt der 150x150 des Bestands. So gross verdeckte
     der Burger auf einem 390px breiten Schirm ueber ein Drittel der Breite,
     schnitt ins Logo und ueberlappte die obere Haelfte des ersten Nav-Feldes
     — wer dort tippte, schloss versehentlich nur das Menue. */
  .burger {
    --burger: 64px;
    --balken: 28px;
    --dicke: 4px;
    --spreizung: 9px;
    position: fixed;
    top: var(--nav-abstand);
    right: var(--nav-abstand);
    z-index: 99999;
    display: block;
    width: var(--burger);
    height: var(--burger);
    padding: 0;
    border: 0;
    background-color: var(--farbe-tinte);
    cursor: pointer;
  }

  .burger span {
    position: absolute;
    left: calc((var(--burger) - var(--balken)) / 2);
    width: var(--balken);
    height: var(--dicke);
    background: var(--farbe-weiss);
    transition: var(--uebergang-kurz) ease-in-out;
  }
  .burger span:nth-child(1) {
    top: calc(50% - var(--spreizung) - var(--dicke) / 2);
  }
  .burger span:nth-child(2),
  .burger span:nth-child(3) { top: calc(50% - var(--dicke) / 2); }
  .burger span:nth-child(4) {
    top: calc(50% + var(--spreizung) - var(--dicke) / 2);
  }

  .burger[aria-expanded="true"] span:nth-child(1),
  .burger[aria-expanded="true"] span:nth-child(4) {
    top: calc(50% - var(--dicke) / 2);
    left: 50%;
    width: 0;
  }
  .burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

  .panel { inset: var(--nav-abstand); }
}