/* =====================================================================
   Das Menue der Seite -- Fassung N31 aus probe-navigation.html
   Michael 25.09.2026: "Wir bauen N31 als Menue ein. Bring es zum Leben
   mit Emil Kowalski, mach es spektakulaer."

   Der Kopf der Tafel sitzt Pixel fuer Pixel auf dem Kopf der Seite: das X
   steht dort, wo der Hamburger stand, die Wortmarke bleibt an ihrem Platz
   und in ihrer Groesse. Gemessen am echten Kopf (25.09.2026):
     1440/810  Kopfhoehe 110, Knopf 40x33 bei x=40, Mitte y=55,
               Wortmarke 30 px, Sperrung .42em, Polster 40/0/22
     390       Kopfhoehe  88, Knopf bei x=20, Mitte y=44, Marke 21 px

   MOTION (Emil Kowalski, animations.dev):
     - nur transform, opacity, filter und clip-path, also GPU
     - Eintritt ease-out cubic-bezier(.23,1,.32,1), Austritt kuerzer
     - Uebergaenge statt Keyframes, damit ein Klick mitten in der
       Bewegung sofort umkehrt und nicht erst zu Ende laeuft
     - gestaffelt, 60 ms je Zeile: das liest sich als Reihenfolge
     - nichts startet bei scale(0) -- alles kommt aus 8 px und Unschaerfe
     - prefers-reduced-motion schaltet auf eine reine Blende um
   ===================================================================== */
:root { --me-aus: cubic-bezier(.23,1,.32,1); }

.menue {
  /* padding: 0 ist noetig -- kopf.css gibt .menue 64/40 mit, und das kam
     hier oben drauf: das X sass dadurch bei y=119 statt 55 und bei x=80
     statt 40 (gemessen 25.09.2026 an der eingebauten Fassung). */
  position: fixed; inset: 0; z-index: 60; padding: 0;
  background: #EFECE6; color: #3D3733;
  display: flex; flex-direction: column;
  visibility: hidden; pointer-events: none;
}
/* display:flex MUSS auch hier stehen. kopf.css hat .menue.offen{display:block},
   und das ist spezifischer als .menue{display:flex} -- die Tafel war
   geoeffnet dadurch ein Block, flex:1 am Satz wirkte nicht, und der Inhalt
   endete nach 675 px in einem 1180 px hohen Fenster (gemessen 25.09.2026). */
.menue.offen { visibility: visible; pointer-events: auto; display: flex; }

/* Der Vorhang: die Flaeche wischt von oben herein, statt zu blenden.
   clip-path laeuft auf der GPU und laesst sich jederzeit umkehren. */
.menue::before {
  content: ""; position: absolute; inset: 0; background: #EFECE6;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 620ms var(--me-aus);
}
.menue.offen::before { clip-path: inset(0 0 0 0); }

.menue > * { position: relative; z-index: 1; }

/* ---------- Kopf der Tafel ---------- */
.me-kopf {
  position: relative; z-index: 2;
  flex: 0 0 auto; height: 110px; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--rand); max-width: var(--breite); width: 100%; margin: 0 auto;
}
.me-x {
  justify-self: start; width: 40px; height: 33px; position: relative;
  border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 0;
}
.me-x span {
  position: absolute; left: 6px; top: 16px; width: 28px; height: 1px; background: #3D3733;
  transition: transform 260ms var(--me-aus);
}
.me-x span:nth-child(1) { transform: rotate(45deg); }
.me-x span:nth-child(2) { transform: rotate(-45deg); }
.me-x:hover span:nth-child(1) { transform: rotate(45deg) scaleX(1.12); }
.me-x:hover span:nth-child(2) { transform: rotate(-45deg) scaleX(1.12); }
.me-x:active { transform: scale(.97); }
.me-x:focus-visible { outline: 2px solid #3D3733; outline-offset: 4px; }
.me-marke {
  font-family: Oswald, system-ui, sans-serif; font-weight: 300;
  font-size: 30px; letter-spacing: .42em; text-indent: .42em;
  text-transform: uppercase; text-decoration: none; color: #3D3733;
  padding: 40px 0 22px; line-height: 1;
}
.me-sprache {
  justify-self: end; margin: 0;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: #6E6862;
}
.me-sprache a { color: #3D3733; text-decoration: none; }
.me-sprache .aus, .me-sprache a.aus { color: #A9A299; }

/* ---------- Satz ---------- */
/* Der Satz liegt ueber die GANZE Tafel und zentriert sich darin -- nicht
   im Rest zwischen Kopf und Fuss. Mit flex:1 sass die Mitte 32 px zu tief,
   weil der Kopf 110 und der Fuss nur 44 px hoch ist (gemessen 25.09.2026:
   Mitte 622 in einem 1180 px hohen Fenster, richtig waeren 590).
   Das Polster ist oben wie unten so hoch wie der Kopf: dadurch liegt die
   Mitte exakt auf der Fenstermitte, und der Satz kann nie unter den Kopf
   oder in den Fuss laufen. */
.me-satz {
  /* min(110px, 12vh): bei einem flachen Fenster (1280x700) war der Satz
     hoeher als der Raum zwischen den beiden 110-px-Polstern und wurde nach
     unten gedrueckt -- die Mitte lag 16 px zu tief. Mit 12vh schrumpft das
     Polster mit der Hoehe mit. */
  position: absolute; inset: 0; padding: min(110px, 12vh) var(--rand);
  display: grid; place-items: center; z-index: 1;
}
.me-liste {
  /* width: max-content, nicht 100%: sonst ist die Zeile so breit wie der
     Satzspiegel, und das seitliche Fach haengt an deren Kante statt an der
     des Wortes -- bei 1600 px lagen so alle fuenf Punkte ausserhalb. */
  list-style: none; margin: 0 auto; padding: 0;
  width: max-content; max-width: 100%;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: baseline;
}
.me-liste li { display: contents; }
.me-liste li.hat-unter {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
  align-items: baseline; position: relative;
}
.me-liste a, .me-kopfknopf { display: contents; color: #3D3733; text-decoration: none; }
.me-kopfknopf { border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; font: inherit; }

.me-liste a > span, .me-kopfknopf > span {
  font-family: "Cormorant Garamond", 'Cormorant Ersatz',Georgia, serif; font-weight: 300;
  /* min(4.4vw, 9vh) statt nur vw: sechs Zeilen mal 1.16em muessen in die
     Hoehe passen, sonst laeuft der Satz bei einem flachen Fenster unten
     heraus. Der kleinere der beiden Werte gewinnt. */
  /* Michael 25.09.2026: "Mach die Schrift 20 % heller" und "etwas weniger
     Zeilenabstand". 20 Prozent heller heisst 20 Prozent des Weges zum
     Grund, nicht 20 Prozent Deckkraft: #3D3733 auf #EFECE6 ergibt
     #615B57, Kontrast 5,67:1 -- noch ueber der Schwelle 4,5.
     Zeilenabstand 1,16 -> 1,04 em. */
  font-size: clamp(26px, min(4.4vw, 9vh), 64px); line-height: 1.04em;
  text-transform: uppercase; letter-spacing: .04em; color: #615B57;
  opacity: 0; transform: translate3d(0,14px,0); filter: blur(6px);
  transition: opacity 520ms var(--me-aus), transform 560ms var(--me-aus),
              filter 560ms var(--me-aus), color 240ms ease;
  transition-delay: calc(var(--i) * 60ms + 160ms);
}
.menue.offen .me-liste a > span,
.menue.offen .me-kopfknopf > span { opacity: 1; transform: none; filter: blur(0); }
/* Beim Schliessen kurz und ohne Staffelung -- ein Austritt darf nicht
   so lange dauern wie ein Eintritt. */
.menue:not(.offen) .me-liste a > span,
.menue:not(.offen) .me-kopfknopf > span {
  transition-duration: 200ms; transition-delay: 0ms;
}

.me-li    { grid-column: 1; justify-self: end;   padding-right: .28em; position: relative; }
.me-strich{ grid-column: 2; justify-self: center; }
.me-re    { grid-column: 3; justify-self: start; padding-left: .28em; position: relative; }
.me-voll  { grid-column: 1 / -1; justify-self: center; position: relative; }

.me-nr {
  position: absolute; right: 100%; bottom: .12em; margin-right: 34px;
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: 11px; letter-spacing: .12em; text-indent: 0;
  text-transform: none; color: #A9A299; white-space: nowrap;
  transition: color 240ms ease;
}
.me-liste:hover a > span, .me-liste:hover .me-kopfknopf > span { color: #A9A299; }
.me-liste a:hover > span, .me-liste a:focus-visible > span,
.me-kopfknopf:hover > span, .me-kopfknopf:focus-visible > span { color: #3D3733; }
/* Der geoeffnete Punkt bleibt dunkel, auch wenn der Zeiger weiterwandert.
   Vorher trat er mit allen anderen zurueck, sobald die Maus die Liste
   verliess -- man sah dann nicht mehr, WOZU das offene Fach gehoert.
   Die Regel steht nach den Hover-Regeln, damit sie gewinnt. */
.me-liste .me-kopfknopf[aria-expanded="true"] > span,
.me-liste:hover .me-kopfknopf[aria-expanded="true"] > span { color: #3D3733; }
.me-liste .me-kopfknopf[aria-expanded="true"] .me-plus i { background: #3D3733; }
.me-liste a:focus-visible > span, .me-kopfknopf:focus-visible > span { outline: 2px solid #3D3733; outline-offset: 6px; }

/* ---------- das Plus ---------- */
.me-plus {
  position: absolute; left: 100%; top: 50%; margin-left: 26px;
  width: 34px; height: 34px; transform: translateY(-50%);
}
.me-plus i {
  position: absolute; left: 0; top: 16px; width: 34px; height: 1px; background: #8A857D;
  transition: transform 420ms var(--me-aus), background 240ms ease;
}
.me-plus i:last-child { transform: rotate(90deg); }
.me-kopfknopf[aria-expanded="true"] .me-plus i:last-child { transform: rotate(0deg); }
.me-kopfknopf:hover .me-plus i { background: #3D3733; }
.me-plus::after {           /* Antippflaeche 44 px, unsichtbar */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%,-50%);
}

/* ---------- Faecher ---------- */
.me-fach {
  grid-column: 1 / -1; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--me-aus);
}
.me-fach.auf { grid-template-rows: 1fr; }
.me-fachinnen { overflow: hidden; min-height: 0; }
.me-fach ul { list-style: none; margin: 0; padding: 0; }
.me-fach li { display: list-item; opacity: 0; transform: translate3d(0,8px,0);
  transition: opacity 200ms ease, transform 200ms ease; }
.me-fach.auf li {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--me-aus), transform 420ms var(--me-aus);
  transition-delay: calc(var(--j) * 45ms);
}
.me-fach a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; text-decoration: none; color: #6E6862;
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .18em; text-transform: uppercase;
  transition: color 220ms ease;
}
.me-fach a:hover, .me-fach a:focus-visible { color: #3D3733; }

/* Desktop: die Faecher haengen seitlich an einer Haarlinie */
@media (min-width: 1440px) {
  .me-fach {
    position: absolute; top: 50%; width: 260px;
    grid-template-rows: 1fr; opacity: 0; pointer-events: none;
    transition: opacity 380ms var(--me-aus), transform 520ms var(--me-aus);
  }
  .me-fach[data-seite="rechts"] { left: calc(100% + 76px); transform: translate(-14px,-50%); }
  .me-fach[data-seite="links"]  { right: calc(100% + 76px); transform: translate(14px,-50%); }
  .me-fach.auf { opacity: 1; pointer-events: auto; transform: translate(0,-50%); }
  .me-fach[data-seite="rechts"] ul { padding-left: 26px; border-left: 1px solid #D5CEC1; }
  .me-fach[data-seite="links"]  ul { padding-right: 26px; border-right: 1px solid #D5CEC1; }
  .me-fach[data-seite="rechts"] a { justify-content: flex-start; }
  .me-fach[data-seite="links"]  a { justify-content: flex-end; }
  .me-fach a { min-height: 40px; }
}
/* Tablet: waagrecht -- gemessen 52 px statt 220 px Hoehe */
@media (min-width: 761px) and (max-width: 1439px) {
  .me-fach ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 28px; padding: 10px 0 2px; }
  .me-fach a { min-height: 40px; }
}

/* ---------- Fuss ---------- */
.me-fuss {
  /* margin: auto auto 0 -- oben auto schiebt den Fuss ans untere Ende,
     seitlich auto zentriert ihn. Vorher stand margin-top:auto VOR einem
     margin:0 auto, und die Kurzform hat es wieder auf 0 gesetzt: der Fuss
     sass dadurch direkt unter dem Kopf bei y=110 (gemessen 25.09.2026). */
  position: relative; z-index: 2;
  flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: baseline; gap: 20px; padding: 0 var(--rand) 26px;
  max-width: var(--breite); width: 100%; margin: auto auto 0;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: #6E6862;
  opacity: 0; transition: opacity 520ms var(--me-aus) 420ms;
}
.menue.offen .me-fuss { opacity: 1; }
.me-fuss p { margin: 0; }
.me-fuss p:last-child { justify-self: end; }
.me-fuss a { color: inherit; text-decoration: none; }
.me-fuss a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .me-kopf { height: 88px; }
  .me-satz { padding: min(88px, 11vh) var(--rand); }
  .me-marke { font-size: 21px; padding: 28px 0 14px; }
  .me-liste a > span, .me-kopfknopf > span { font-size: clamp(20px, min(7vw, 5.2vh), 32px); line-height: 1.1em; }
  .me-nr { display: none; }
  .me-plus { left: 100%; margin-left: 6px; width: 26px; height: 26px; }
  .me-plus i { width: 26px; top: 12px; }
  .me-fach ul { padding: 8px 0 10px; }
  .me-fach.auf ul { border-top: 1px solid #DCD5C8; border-bottom: 1px solid #DCD5C8; margin: 6px 0 8px; }
  .me-fach a { min-height: 44px; font-size: 13px; }
  .me-fuss { grid-template-columns: 1fr; gap: 4px; text-align: center; padding-bottom: 18px; }
  .me-fuss p:last-child { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .menue::before { transition: none; clip-path: none !important; }
  .me-liste a > span, .me-kopfknopf > span, .me-fach, .me-fach li, .me-fuss {
    transition: opacity 180ms ease !important;
    transform: none !important; filter: none !important; transition-delay: 0ms !important;
  }
}