/* ==========================================================================
   Villa Restaurant Soemmerda - Mega-Menue
   ==========================================================================
   Was diese Datei macht
   Sie gestaltet den Seitenkopf .vr-kopf, die Mega-Panels .vr-panel (Desktop
   ab 1024 Pixel) und den Drawer .vr-drawer (darunter). Das Markup steht in
   templates/_navigation.html, die Inhalte in data/navigation.yml, das
   Verhalten in assets/js/megamenu.js.

   Die Idee
   Das Menue ist ein Fotoalbum mit Eriks Handschrift. Rechts im Panel liegt
   ein Abzug mit weissem Rand, leicht gekippt, mit einer Notiz in Caveat auf
   dem Rand. Dahinter schaut die Ecke des naechsten Abzugs hervor. Beim
   Ueberfahren der Eintraege wechselt das Foto. Alles andere ist ruhig und
   diszipliniert.

   Woran man sich hier halten muss
   1. Nur Werte aus tokens.css, Praefix --vr-. Keine neue Farbe erfinden.
   2. Kein backdrop-filter auf der klebenden Leiste. Das bremst das Scrollen
      auf dem Handy nachweislich. Deckende Farbe statt Milchglas.
   3. Keine fremde Domain, kein @import, keine Schrift von einem anderen
      Server. Fraunces, Lora und Caveat liegen lokal in fonts.css.
   4. Im Album wird nichts animiert. Der Ken-Burns-Zoom ist am 03.09.2026
      mit Befund A10 herausgeflogen, samt will-change auf elf Ebenen. Wer
      ihn zurueckholt, liest dort zuerst nach, warum er weg ist.
   5. Jedes Rasterkind bekommt min-width 0, jede Grid-Spalte minmax(0, ...).
      Ohne das rechnet Safari aspect-ratio gegen die Spaltenbreite zurueck
      und schaukelt sie auf, gemessen bis ueber 30000 Pixel. Im Album steht
      seit Befund A8 gar kein aspect-ratio mehr, und genau deshalb kann es
      dort auch nichts mehr aufschaukeln.

   Fallen aus den Nachbardateien, die hier abgefangen werden
   - base.css faerbt jedes a burgund und unterstreicht es, auch a:visited.
     a:visited ist 0-2-0 und schlaegt eine einzelne Klasse. Deshalb steht
     bei jedem Menuelink der :visited-Zwilling mit dabei.
   - base.css gibt ul und ol padding-left 1.5em und li margin-bottom 8px.
     Der Reset nav ul greift nur im nav. Die Panels stehen ausserhalb des
     nav, dort muss die Liste selbst zurueckgesetzt werden.
   - base.css setzt img und picture auf height auto. Im Album braucht das
     Bild height 100 Prozent, also mit Klasse davor schreiben.
   - Das Attribut hidden verliert gegen eine Klassenregel mit display.
     Deshalb steht .vr-panel[hidden] ausdruecklich da.
   - hero-video.css verkleinert unter 768 Pixel header .btn mit !important.
     Das ist gewollt und wird hier nicht zurueckgedreht.

   Gemessen am 02.09.2026 mit mess/kontrast.mjs und am 03.09.2026 mit
   fix/kontrast.mjs, nicht geschaetzt

   WAS AM 03.09.2026 AUS DER PRUEFUNG KAM
   Zwanzig Befunde, davon achtzehn in dieser Datei und im Markup behoben.
   Jede Aenderung traegt im Kommentar ihre Nummer und ihren Messwert:
   A1 Umbruchreserve bei 200 Prozent Schrift (Abschnitte 1, 3, 6, 7)
   A3 Glut-Linie haengt am Link, weil das Panel in den Listenpunkt zog
   A5 Kopf deckend statt 0,97
   A6 Pfeil 8 Pixel am eigenen Wort, 24 zum naechsten
   A7 Titel und Text 6 statt 2 Pixel auseinander
   A8 kein aspect-ratio mehr im Album
   A9 der Abzug mit weissem Rand, ganz statt halb
   A10 Ken Burns raus
   A11 Ortslinks burgund mit Goldlinie
   A12 Eyebrow eine Spur dunkler, 5,26 statt 4,44 zu 1
   A13 die Notiz sitzt auf dem Rand, 10,70 zu 1 statt 3,21
   A14 Gruppen im Drawer weiter auseinander als ihre Unterpunkte
   A15 Kachel 108 mal 72, Bilder erst beim Oeffnen
   A16 Oeffnungszeiten im Drawer in Lora
   A17 der aktive Punkt ist auch burgund beschriftet
   A18 der Brief steht rechts, neben dem Knopf
   A19 Fokusring nach innen, damit er nicht oben abgeschnitten wird
   A20 Burgerrahmen sichtbar, 4,26 statt 1,73 zu 1

   ABWEICHUNG von der Bauvorlage, begruendet: ueberall dort, wo die
   Bauvorlage --vr-gold fuer eine kleine Zustandsanzeige nennt, steht hier
   --vr-gold-tief. Gemessen ergibt --vr-gold auf Creme nur 2,60 zu 1 und
   verfehlt die 3 zu 1, die WCAG 1.4.11 fuer eine Zustandsanzeige verlangt.
   --vr-gold-tief ergibt 4,26 zu 1. Es ist derselbe Goldton, nur die tiefere
   Stufe aus demselben Tokensatz, also keine neue Farbe. Auf einer 2 Pixel
   hohen Linie sieht man den Unterschied kaum, im Kontrast schon.
   Betroffen: Glut-Linie im Ruhezustand, Brieflinie, Goldpunkt bei
   aria-current, Pfeil im Panel, Unterstrich der Ortslinks.

   OFFENER PUNKT fuer Dirk, hier nur oertlich behoben:
   Der Eyebrow --vr-gold-tief auf --vr-papier ergibt 4,44 zu 1 und verfehlt
   die 4,5 zu 1 fuer kleinen Text um 0,06. Im Menue ist der Wert mit Befund
   A12 aufgehoben (Abschnitt 9). Der Token selbst trifft aber genauso die
   bestehenden .card__eyebrow der ganzen Seite, und dort steht der Fehler
   weiter. Repariert gehoert das in tokens.css, sonst stehen zwei Wahrheiten
   nebeneinander. tokens.css ist fuer diese Sitzung tabu.
   Ebenfalls gemessen: der goldene Fokusring aus base.css ergibt auf Creme
   2,60 zu 1. Deshalb ist der Fokusring im Menue burgund, siehe Abschnitt 15.
   ========================================================================== */


/* ==========================================================================
   1. Die Kopfzeile
   --------------------------------------------------------------------------
   Klebt oben, deckende Creme statt Milchglas. Feste Hoehe ueber min-height
   auf der Zeile, damit beim Scrollen nichts springt und der CLS bei 0
   bleibt. .ist-gescrollt legt nur einen Schatten dazu, der Kopf schrumpft
   nicht. Ein schrumpfender Kopf verschiebt bei jedem Scrollen den ganzen
   Inhalt darunter.
   ========================================================================== */

.vr-kopf {
  position: sticky;
  top: 0;
  z-index: var(--vr-z-sticky);
  /* BEFUND A5: hier stand rgba(248,242,228,0.97). Auf /kontakt las man
     gescrollt hinter "Feiern" und "Pension" die Handschrift der Briefseite
     mit. 0,97 klingt nach nichts und ist doch ein Fenster. Jetzt deckend. */
  background: var(--vr-creme);
  border-bottom: 1px solid var(--vr-linie-soft);
  transition: box-shadow var(--vr-trans-base);
}

.vr-kopf.ist-gescrollt {
  box-shadow: var(--vr-shadow-md);
}

/* BEFUND A1, erster von zwei Teilen: Umbruchreserve.
   Bei Wurzelschrift 32 Pixel (200 Prozent, WCAG 1.4.4) ragte "Brief an
   Erik" bei 1280 um 74 Pixel und bei 1024 um 212 Pixel aus dem Fenster,
   bei 390 die Aktionen um 9 Pixel. reveal.css setzt overflow-x: clip auf
   html und body, man kann also nicht hinscrollen: der Inhalt war weg.
   Mit flex-wrap faellt stattdessen um, was nicht mehr in eine Zeile passt.
   min-height statt height, damit die Zeile wachsen darf.
   row-gap haelt die umgebrochenen Reihen auseinander. */
.vr-kopf__zeile {
  /* Drei Spalten statt einer Reihe, auf Dirks Ansage vom 03.09.2026.
     Vorher lief die Zeile als flex, und die Navigation begann direkt
     hinter dem Logo. Gemessen bei 1440: das Wort Restaurant stand bei
     271, die Mitte zwischen Logo und Knopf liegt aber bei 675. Das Menue
     klebte also 400 Pixel zu weit links und die rechte Haelfte war leer.
     Mit auto / 1fr / auto bekommt die Navigation den ganzen Raum
     zwischen Logo und Knopf und zentriert sich darin selbst. Die beiden
     Aussenspalten sind unterschiedlich breit, deshalb ist es die Mitte
     des Zwischenraums und nicht die des Fensters. Genau das hat Dirk
     verlangt: mittig zwischen Logo links und Knopf rechts. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--vr-space-2xs) var(--vr-space-md);
  min-height: 64px;
}


/* ==========================================================================
   2. Marke und Logo
   --------------------------------------------------------------------------
   Das Logo traegt width- und height-Attribute im Markup. Deshalb wird nur
   die Hoehe gesetzt und die Breite auf auto gestellt, sonst verzerrt es.
   flex none, damit die Marke der Nav keinen Platz wegnimmt und umgekehrt.
   ========================================================================== */

/* min-height 44, weil das Logo selbst nur 40 Pixel hoch ist. Ohne diese
   Zeile ist der Weg zur Startseite ein Klickziel von 119 mal 40 und
   verfehlt die 44 Pixel. Gemessen am 02.09.2026. */
.vr-kopf__marke {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  text-decoration: none;
  line-height: 0;
}

.vr-kopf__logo {
  display: block;
  line-height: 0;
}

.vr-kopf__logo img {
  height: 40px;
  width: auto;
  display: block;
}


/* ==========================================================================
   3. Die Hauptnavigation
   --------------------------------------------------------------------------
   Die Liste steht direkt nach dem Logo, nicht mittig. Mittig ausgerichtet
   wandert sie bei jeder Breite an eine andere Stelle und wirkt unruhig.
   Die Punkte sind so hoch wie der Kopf. Das gibt eine grosse Klickflaeche
   und ist gleichzeitig die Grundlage fuer die Glut-Linie, die genau auf
   der unteren Kante des Kopfes sitzen muss.
   ========================================================================== */

.vr-nav {
  min-width: 0;
  align-self: stretch;
  display: flex;
  justify-content: center;
}

/* flex-wrap gehoert zu Befund A1: bei 200 Prozent Schrift bricht die
   Liste um, statt aus dem Fenster zu laufen. */
.vr-nav__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ⚠️ HIER KEIN position: relative.
   BEFUND A3: das Panel liegt jetzt IM Listenpunkt, damit die Tabreihen-
   folge stimmt (vorher sieben Tabstopps zwischen Knopf und Inhalt, WCAG
   2.4.3, jetzt einer). Ein positionierter Listenpunkt waere sein Bezugs-
   rahmen, und das Panel waere nur so breit wie das Wort darueber. Der
   Bezug muss .vr-kopf bleiben, der ist als sticky schon positioniert.
   Die Glut-Linie haengt deshalb jetzt am Link, siehe Abschnitt 4.

   BEFUND A6: 8 Pixel rechts. Zusammen mit dem 28 Pixel breiten Knopf und
   den 8 Pixel Innenabstand der Links ergibt das 8 Pixel vom Pfeil zum
   eigenen Wort und 24 zum naechsten. Vorher waren es 22 und 22, der Pfeil
   gehoerte damit zu keinem Wort und die Zeile las sich wie zehn Punkte. */
.vr-nav__punkt {
  display: flex;
  align-items: center;
  margin: 0 var(--vr-space-2xs) 0 0;   /* base.css gibt jedem li 8px unten */
}

.vr-nav__link,
.vr-nav__link:visited {
  position: relative;         /* Bezug fuer die Glut-Linie, siehe A3 */
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--vr-space-2xs);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-base);
  font-weight: var(--vr-fw-medium);
  letter-spacing: 0.01em;
  color: var(--vr-anthrazit);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--vr-trans-fast);
}

/* Beim Punkt mit Panel faellt der rechte Innenabstand weg. Der Pfeil
   rueckt damit an sein Wort (Befund A6). */
.vr-nav__punkt--panel .vr-nav__link {
  padding-right: 0;
}

/* BEFUND A17: der aktive Punkt trug nur einen Strich 30 Pixel unter dem
   Wort, die Beschriftung blieb anthrazit wie alle anderen. Jetzt burgund,
   gemessen 10,2 zu 1 auf Creme. */
.vr-nav__link:hover,
.vr-nav__punkt.ist-aktiv .vr-nav__link,
.vr-nav__punkt.ist-offen .vr-nav__link {
  color: var(--vr-burgund);
}

/* Der Aufklapp-Knopf.
   ABWEICHUNG von der allgemeinen 44x44-Zeile der Abnahme, mit Absicht:
   die Bauvorlage schreibt fuer diesen Knopf ausdruecklich 32 Pixel Breite
   vor. Gerechnet, nicht geraten: bei 1024 Pixel Breite bleiben nach Logo,
   CTA und Abstaenden knapp 700 Pixel fuer sechs Menuepunkte. Mit 44 Pixel
   breiten Knoepfen bricht die Zeile um. Der Knopf ist eine Bequemlichkeit,
   das eigentliche Ziel ist der Link daneben, und der ist 64 Pixel hoch und
   deutlich breiter als 44. 28 mal 44 erfuellt WCAG 2.2 AA (24 mal 24).
   BEFUND A6: 28 statt 32 Pixel. Der Pfeil ist 12 Pixel breit und sitzt
   mittig, es bleiben also 8 Pixel je Seite. Zusammen mit padding-right 0
   am Link steht der Pfeil 8 Pixel von seinem Wort und 24 vom naechsten. */
.vr-nav__auf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--vr-text-muted);
  cursor: pointer;
  transition: color var(--vr-trans-fast);
}

.vr-nav__auf:hover {
  color: var(--vr-burgund);
}

.vr-nav__pfeil {
  display: block;
  transition: transform var(--vr-trans-base);
}

.vr-nav__auf[aria-expanded="true"] {
  color: var(--vr-burgund);
}

.vr-nav__auf[aria-expanded="true"] .vr-nav__pfeil {
  transform: rotate(180deg);
}


/* ==========================================================================
   4. Die Glut-Linie
   --------------------------------------------------------------------------
   2 Pixel unten am Kopf unter dem aktiven Punkt. Sie liegt bei bottom -1px
   und ist 2 Pixel hoch, sitzt also genau auf der 1-Pixel-Trennlinie des
   Kopfes statt darueber oder darunter.
   Sie faehrt ueber scaleX auf, nicht ueber width. transform laeuft auf der
   Grafikkarte, width erzwingt bei jedem Bild ein neues Layout.
   Aktiv ist sie Gold, beim geoeffneten Panel Glut mit weichem Schein.

   WARUM SIE JETZT AM LINK HAENGT UND NICHT MEHR AM LISTENPUNKT
   Befund A3 verlangt das Panel im eigenen Listenpunkt. Ein positionierter
   Listenpunkt waere dann der Bezugsrahmen des Panels und wuerde es auf
   Wortbreite schrumpfen. Der Link traegt das position: relative jetzt
   allein, das Panel ist kein Kind des Links.
   Der Link ist so hoch wie die Kopfzeile (align-self: stretch), bottom
   -1px trifft die Trennlinie also weiterhin genau.
   Die Insets sind der Innenabstand des Links: die Linie steht damit exakt
   unter dem Wort und nicht mehr unter Wort samt Pfeil.
   ========================================================================== */

.vr-nav__link::after {
  content: "";
  position: absolute;
  left: var(--vr-space-2xs);
  right: var(--vr-space-2xs);
  bottom: -1px;
  height: 2px;
  background: var(--vr-gold-tief);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--vr-trans-base),
              background var(--vr-trans-base),
              box-shadow var(--vr-trans-base);
  pointer-events: none;
}

/* Beim Punkt mit Panel ist der rechte Innenabstand 0, siehe Befund A6. */
.vr-nav__punkt--panel .vr-nav__link::after {
  right: 0;
}

.vr-nav__punkt.ist-aktiv .vr-nav__link::after {
  transform: scaleX(1);
}

.vr-nav__punkt.ist-offen .vr-nav__link::after {
  transform: scaleX(1);
  background: var(--vr-glut);
  box-shadow: 0 0 10px rgba(217, 83, 30, 0.55);   /* --vr-glut mit Alpha */
}


/* ==========================================================================
   5. Brief an Erik
   --------------------------------------------------------------------------
   Der einzige handgeschriebene Punkt im Kopf. Keine Drehung: gedreht sieht
   er neben den anderen Punkten wie ein Fehler aus, nicht wie eine Geste.
   Die Goldlinie beim Ueberfahren ist ein eigener Balken statt einer
   Unterstreichung, damit sie exakt sitzt und nicht durch die Unterlaengen
   von g und E laeuft.
   ========================================================================== */

/* BEFUND A18: zwischen der Liste und dem Knopf standen bei 1440 und 1280
   gemessen 176 Pixel Leere, der Brief stand verwaist mittendrin. margin-
   left: auto schiebt ihn ans rechte Ende der Navigation, direkt neben den
   Knopf. Dort liest er sich als die leise Alternative zum lauten "Tisch
   sichern", und dafuer lohnt sich die Handschrift.
   Der Abstand nach rechts faellt weg, sonst steht er nicht neben dem
   Knopf, sondern acht Pixel daneben. */
/* Der Brief steht in der Reihe, nicht abseits. Ansage Dirk 03.09.2026:
   "Brief an Erik muss den gleichen Abstand haben wie zwischen Restaurant
   und dem Punkt Feiern". Vorher schob ihn margin-left: auto ans rechte
   Ende der Navigation, wodurch bei 1440 eine Luecke von 176 Pixeln
   entstand und er wie ein zweiter Knopf neben dem Knopf wirkte. Jetzt
   traegt er denselben Innenabstand wie jeder andere Punkt. Die
   Handschrift allein hebt ihn genug hervor, dafuer braucht es keine
   Luecke. */
.vr-nav__punkt--brief {
  margin-left: 0;
  margin-right: 0;
}

.vr-nav__brief,
.vr-nav__brief:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--vr-space-xs);
  font-family: var(--vr-font-hand);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vr-burgund);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--vr-trans-fast);
}

.vr-nav__brief::after {
  content: "";
  position: absolute;
  left: var(--vr-space-xs);
  right: var(--vr-space-xs);
  bottom: 18px;
  height: 1px;
  background: var(--vr-gold-tief);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--vr-trans-fast);
}

.vr-nav__brief:hover {
  color: var(--vr-burgund-tief);
}

.vr-nav__brief:hover::after,
.vr-nav__brief[aria-current]::after {
  transform: scaleX(1);
}


/* ==========================================================================
   6. Aktionen rechts: Knopf und Burger
   --------------------------------------------------------------------------
   Der CTA ist der vorhandene .btn.btn--primary aus components.css. Hier
   wird er nur auf 44 Pixel Mindesthoehe gebracht und der Innenabstand
   oben und unten verkleinert, damit der zweizeilige Text .btn-2l nicht
   nach 66 Pixeln aussieht wie im Hero.
   ========================================================================== */

/* flex-wrap und flex-shrink gehoeren zu Befund A1: bei 200 Prozent Schrift
   duerfen Knopf und Burger untereinander rutschen, statt aus dem Fenster
   zu laufen. min-width: 0 erlaubt dem Knopf, schmaler als sein Text zu
   werden, sonst nuetzt der Umbruch nichts. */
.vr-kopf__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--vr-space-2xs);
  min-width: 0;
}

.vr-kopf__cta {
  min-height: 44px;
  padding-block: 6px;
  min-width: 0;
  /* Zwei Zeilen statt einer, gemessen am 03.09.2026.
     Der Knopf traegt auf /pension "Zimmer reservieren" und war einzeilig
     208 Pixel breit, gegen 140 auf allen anderen Seiten. Zusammen mit der
     Umbruchreserve aus Befund A1 sprang er dadurch bei 1024 und bei 320 in
     eine zweite Zeile, und der Kopf wuchs von 65 auf 97 beziehungsweise von
     57 auf 93 Pixel. Mit Umbruch bleibt er so breit wie der zweizeilige
     Knopf "Tisch sichern / Lokal anfragen" daneben, und beide sind gleich
     hoch. Die Breite ist in em gesetzt, damit sie bei vergroesserter
     Browserschrift mitwaechst statt zu ueberlaufen. */
  white-space: normal;
  max-width: 9.5em;
  line-height: 1.2;
  text-align: center;
}

.vr-kopf__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  /* BEFUND A20: --vr-linie ergibt auf Creme gemessen 1,73 zu 1, der
     Rahmen war praktisch unsichtbar und das Symbol trug die Erkennbarkeit
     allein. --vr-gold-tief ergibt 4,26 zu 1 und liegt ueber den 3 zu 1,
     die WCAG 1.4.11 fuer den Rand eines Bedienelements verlangt. Halb
     sichtbar gibt es nicht: entweder er ist da oder er ist weg. */
  border: 1px solid var(--vr-gold-tief);
  border-radius: var(--vr-radius-sm);
  background: transparent;
  color: var(--vr-anthrazit);
  cursor: pointer;
  transition: background var(--vr-trans-fast),
              border-color var(--vr-trans-fast);
}

.vr-kopf__burger:hover {
  background: var(--vr-creme-tief);
  border-color: var(--vr-burgund);
}


/* ==========================================================================
   7. Die zwei Ansichten trennen
   --------------------------------------------------------------------------
   Das ist die EINZIGE Stelle, an der hier display none fuer eine Breite
   steht, und sie ist Absicht: unter 1024 Pixel bedient der Drawer die
   ganze Navigation, darueber die Leiste mit den Panels. Es geht kein
   Inhalt verloren, er steht nur woanders. Ueberall sonst waere ein
   Wegblenden Funktionsverlust.
   ========================================================================== */

/* BEFUND A1, zweiter von zwei Teilen: die Schwelle steht in em statt in
   Pixeln. 64em sind bei der Vorgabeschrift des Browsers dieselben 1024
   Pixel wie vorher. Stellt der Besucher die Schrift seines Browsers auf
   200 Prozent, wandert die Schwelle auf 2048 Pixel mit, und die
   Navigation faellt von selbst in den Drawer, statt aus dem Fenster zu
   laufen.
   ⚠️ Gemessen am 02.09.2026: em in einer Media Query rechnet immer gegen
   die Vorgabeschrift des Browsers, NIE gegen ein font-size, das per CSS
   oder per Skript auf html gesetzt wird. Wer mit
   document.documentElement.style.fontSize = '32px' prueft, sieht die
   Schwelle deshalb nicht wandern. Genau dafuer gibt es den ersten Teil,
   die Umbruchreserve in den Abschnitten 1, 3 und 6. Beide Teile zusammen
   halten den Kopf in beiden Faellen im Fenster.
   ⚠️ megamenu.js kennt weiterhin 1024 Pixel (matchMedia, tabu). Zwischen
   den beiden Schwellen liegt nur der Fall "Browserschrift vergroessert
   UND Fenster wird in der Breite gezogen". Dann schliesst das Skript den
   Drawer etwas frueher, als das CSS ihn ausblendet. Kein Inhalt geht
   verloren, der Burger oeffnet ihn sofort wieder. */
@media (max-width: 63.999em) {
  .vr-nav   { display: none; }
  .vr-panel { display: none; }
}

@media (min-width: 64em) {
  .vr-kopf__burger { display: none; }
  .vr-drawer       { display: none; }
}


/* ==========================================================================
   8. Das Panel, Grundgeruest
   --------------------------------------------------------------------------
   Liegt absolut unter dem Kopf und ist so breit wie der Bildschirm. Der
   Kopf ist sticky und damit selbst ein positioniertes Element, top 100
   Prozent bezieht sich also auf ihn.

   hidden gewinnt. Das JS nimmt zuerst hidden weg und setzt erst im
   naechsten Bild .ist-offen. Ohne diesen Zwischenschritt gibt es keinen
   Startzustand zum Hinueberblenden und das Panel erscheint hart.
   ========================================================================== */

/* Das Panel ist eine Karte, die unter dem Kopf hervorkommt, kein Balken
   ueber die ganze Fensterbreite mehr. Ansage Dirk 03.09.2026: "nicht
   ueber die ganze Seite legen, sondern nur einen Teil zeigen" und
   zugleich "etwas breiter machen als Logo links und Knopf rechts".

   Beides zusammen ergibt die Breite: 1060 Pixel sind breiter als der
   Zwischenraum zwischen Logo und Knopf (gemessen 810 bei 1440) und
   deutlich schmaler als das Fenster. Auf schmalen Fenstern greift
   calc(100vw - 96px), damit links und rechts immer Luft bleibt und man
   sieht, dass etwas darunter liegt.

   ⚠️ transform traegt hier ZWEI Aufgaben: die waagerechte Zentrierung
   und die Einblendbewegung. Sie muessen in einer einzigen Angabe stehen,
   sonst loescht die zweite die erste. Deshalb steht translateX(-50%) in
   beiden Zustaenden, im geschlossenen wie im offenen. */
.vr-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(1060px, calc(100vw - 96px));
  background: var(--vr-papier);
  border: 1px solid var(--vr-linie-soft);
  border-radius: var(--vr-radius-lg);
  box-shadow: var(--vr-shadow-xl);
  opacity: 0;
  transform: translateX(-50%) translateY(-10px) scale(0.985);
  transform-origin: top center;
  transition: opacity var(--vr-trans-base),
              transform var(--vr-trans-slow);
}

/* Muss ausdruecklich dastehen. Die Regel darueber setzt kein display,
   aber sobald irgendwo eine Klassenregel mit display dazukommt, verliert
   das Attribut hidden. Die Falle vom 02.09.2026 in gutschein.css. */
.vr-panel[hidden] {
  display: none;
}

.vr-panel.ist-offen {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Zwei Spalten, immer mit minmax(0, ...). Ohne die 0 als Untergrenze
   nimmt eine Spalte die Groesse ihres Inhalts als Minimum, und das Album
   mit aspect-ratio schaukelt sich in Safari auf. */
/* Die Karte bringt ihren eigenen Rand mit. Der .container darin setzt
   zwar weiterhin seine Innenabstaende, aber seine max-width greift nicht
   mehr, weil die Karte selbst schmaler ist. Deshalb steht der seitliche
   Abstand hier und nicht im container. */
.vr-panel__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--vr-space-xl);
  padding: var(--vr-space-lg) var(--vr-space-md);
  max-width: none;
}

.vr-panel__spalte {
  min-width: 0;
}


/* ==========================================================================
   9. Panel, linke Spalte
   ========================================================================== */

/* BEFUND A12: --vr-gold-tief (#8E6E2E) auf --vr-papier (#FBF7EE) ergibt
   gemessen 4,44 zu 1. WCAG 1.4.3 verlangt fuer 12 Pixel 4,5 zu 1. Es
   fehlten 0,06.
   Groesser hilft nicht: gross im Sinne der Regel ist erst 24 Pixel, und
   ein 24 Pixel grosser Eyebrow waere so laut wie die Eintragstitel.
   Also eine Spur dunkler. KEINE neue Farbe: der Wert wird aus zwei
   vorhandenen Tokens gemischt, demselben Gold und demselben Anthrazit.
   88 zu 12 ergibt #80632A und gemessen 5,26 zu 1, also Reserve statt
   Punktlandung. Die erste Zeile bleibt als Rueckfall fuer Browser ohne
   color-mix stehen, dort gilt weiter der alte Wert.
   ⚠️ OFFEN fuer Dirk: derselbe Token trifft auch .card__eyebrow der
   ganzen Seite. Repariert gehoert das in tokens.css, nicht hier, sonst
   stehen zwei Wahrheiten nebeneinander. tokens.css ist tabu. */
.vr-panel__eyebrow {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-xs);
  font-weight: var(--vr-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--vr-tracking-widest);
  color: var(--vr-gold-tief);
  color: color-mix(in srgb, var(--vr-gold-tief) 88%, var(--vr-anthrazit));
  margin: 0 0 var(--vr-space-sm);
}

/* auto-fit statt einer festen Zahl: vier Eintraege ergeben zwei Spalten,
   zwei Eintraege ebenfalls zwei, und wenn die Spalte einmal schmal wird,
   faellt die Liste von selbst auf eine Spalte zurueck. */
.vr-panel__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--vr-space-2xs) var(--vr-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vr-panel__zelle {
  min-width: 0;
  margin: 0;
}

/* Der Eintrag ist einmal ein a und einmal ein button. Damit beide gleich
   aussehen, werden hier alle Knopf-Vorgaben zurueckgesetzt. */
.vr-panel__eintrag,
.vr-panel__eintrag:visited {
  display: grid;
  align-content: center;
  /* BEFUND A7: hier standen 2 Pixel. Bei 26 Pixel Zeilenhoehe des Titels
     beruehrte die Unterlaenge von "Haus" fast die Oberlaenge von "Saal".
     6 Pixel trennen die beiden Zeilen, ohne den Eintrag auseinander zu
     reissen. */
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: var(--vr-space-xs) var(--vr-space-sm);
  border: 0;
  border-radius: var(--vr-radius-md);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--vr-trans-fast);
}

.vr-panel__titel {
  position: relative;
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-lg);
  font-weight: var(--vr-fw-medium);
  line-height: var(--vr-leading-snug);
  color: var(--vr-anthrazit);
  transition: color var(--vr-trans-fast);
}

/* hyphens none, weil base.css jedem Absatz hyphens auto gibt. In einer
   schmalen Menuespalte trennt das dann "Dezemberter-mine" mitten im Wort.
   In einem Menue liest niemand Fliesstext, dort stoert die Trennung mehr
   als sie nutzt. footer.css macht es aus demselben Grund genauso. */
.vr-panel__text {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  line-height: var(--vr-leading-normal);
  color: var(--vr-text-muted);
  -webkit-hyphens: none;
  hyphens: none;
}

/* Der Pfeil kommt erst beim Ueberfahren. Er faehrt aus dem Titel heraus,
   nicht in ihn hinein, sonst springt die Zeile. Deshalb sitzt er absolut
   und nimmt keinen Platz im Textfluss. */
.vr-panel__titel::after {
  content: "\2192";
  position: absolute;
  margin-left: 8px;
  color: var(--vr-gold-tief);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--vr-trans-fast),
              transform var(--vr-trans-fast);
}

.vr-panel__eintrag:hover,
.vr-panel__eintrag:focus-visible,
.vr-panel__eintrag.ist-vorschau {
  background: var(--vr-creme-tief);
}

.vr-panel__eintrag:hover .vr-panel__titel,
.vr-panel__eintrag:focus-visible .vr-panel__titel,
.vr-panel__eintrag.ist-vorschau .vr-panel__titel {
  color: var(--vr-burgund);
}

.vr-panel__eintrag:hover .vr-panel__titel::after,
.vr-panel__eintrag:focus-visible .vr-panel__titel::after,
.vr-panel__eintrag.ist-vorschau .vr-panel__titel::after {
  opacity: 1;
  transform: translateX(0);
}

/* Die Seite, auf der man gerade steht: Titel burgund, davor ein
   Goldpunkt. Der Punkt haengt links ausserhalb des Textes, damit die
   Titel aller Eintraege auf derselben Linie beginnen. */
.vr-panel__eintrag[aria-current="page"] .vr-panel__titel {
  color: var(--vr-burgund);
}

.vr-panel__eintrag[aria-current="page"] .vr-panel__titel::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: var(--vr-radius-full);
  background: var(--vr-gold-tief);
}


/* Die Orte aus der Region. Eine Reihe Fliesstextlinks, deshalb hier
   ausdruecklich kleiner als 44 Pixel erlaubt, aber nie unter 24. */

.vr-panel__region {
  margin-top: var(--vr-space-md);
}

.vr-panel__orte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-space-2xs) var(--vr-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vr-panel__orte li {
  margin: 0;
}

/* BEFUND A11: "Erfurt, Weimar, Apolda" standen in --vr-text-secondary
   (#2C2520) ohne Unterstreichung, also in genau derselben Farbe und
   Staerke wie der Fliesstext zwei Zeilen darunter. Nichts daran sagte,
   dass man daraufklicken kann.
   Jetzt burgund mit einer feinen Goldlinie schon im Ruhezustand. Burgund
   auf Papier ist gemessen 10,0 zu 1, die Linie macht die Absicht auch
   ohne Farbe erkennbar (WCAG 1.4.1, nicht allein ueber Farbe). */
.vr-panel__ort,
.vr-panel__ort:visited {
  display: inline-block;
  padding: 6px 0;
  min-height: 32px;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  color: var(--vr-burgund);
  text-decoration: underline;
  text-decoration-color: var(--vr-gold-tief);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--vr-trans-fast),
              text-decoration-color var(--vr-trans-fast);
}

.vr-panel__ort:hover {
  color: var(--vr-burgund-tief);
  text-decoration-color: currentColor;
}

/* Der Ort, auf dem man gerade steht. Befund A4: auf den zehn Ortsseiten
   gab es vorher gar kein aria-current. */
.vr-panel__ort[aria-current="page"] {
  font-weight: var(--vr-fw-medium);
  text-decoration-color: currentColor;
}


/* Der Fuss des Panels: eine Tatsache oder die Zeiten links, der Knopf
   rechts. Bricht bei schmaler Spalte sauber um. */

.vr-panel__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vr-space-md);
  margin-top: var(--vr-space-lg);
  padding-top: var(--vr-space-md);
  border-top: 1px solid var(--vr-linie-soft);
}

.vr-panel__fakt,
.vr-panel__zeiten {
  margin: 0;
  min-width: 0;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  line-height: var(--vr-leading-normal);
  color: var(--vr-text-secondary);
}

.vr-panel__zeit {
  display: inline-block;
}

.vr-panel__zeit strong {
  font-weight: var(--vr-fw-medium);
}

/* Der Trenner zwischen zwei Zeiten. Als ::before am zweiten Element,
   damit hinter der letzten Zeit keiner steht. */
.vr-panel__zeit + .vr-panel__zeit::before {
  content: "\00B7";
  margin: 0 8px;
  color: var(--vr-gold-tief);
}

.vr-panel__cta {
  flex: none;
  min-height: 44px;
  padding: 8px var(--vr-space-md);
  font-size: var(--vr-text-sm);
}


/* ==========================================================================
   10. Das Album
   --------------------------------------------------------------------------
   ENTSCHIEDEN AM 02.09.2026, BEFUND A9: ganz statt halb.
   Vorher war nur die Bildunterschrift um 1,2 Grad gedreht, und zwar auf
   einem achsentreuen Rechteck mit 8 Pixel Radius. Eine schiefe Zeile auf
   einem geraden Kasten liest sich als Fehler, nicht als Album. Halb geht
   nicht, also ganz: jedes Foto ist jetzt ein Abzug mit weissem Rand, das
   ganze Blatt ist leicht gekippt, es wirft einen weichen Schatten, und
   dahinter schaut die Ecke des naechsten Abzugs hervor.
   Warum ganz und nicht gar nicht: das Haus ist ein armenischer
   Familienbetrieb, Erik steht selbst am Grill. Ein Stapel Abzuege auf dem
   Tisch ist das Bild dafuer. Ein weiteres gerades Rechteck waere es nicht.

   Die Notiz in Eriks Handschrift steht jetzt AUF dem weissen Rand unter
   dem Foto, dort wo sie in einem Album steht, und nicht mehr im Foto.
   Das loest zugleich Befund A13: ueber elf Fotos gemessen fiel sie im
   schlechtesten Fall ("Mit Granatapfelkernen") auf 3,21 zu 1, mit einer
   Reserve von 0,21 bei einer duennen Schrift. Ein helleres Foto haette
   das gekippt. Auf dem Rand ist der Wert vom Motiv unabhaengig:
   --vr-burgund auf --vr-papier, gemessen 10,0 zu 1, elf von elf gleich.

   BEFUND A10, Ken Burns ist raus. Nach 2 Sekunden stand die Ebene bei
   scale(1,0133), das sind 6 Pixel auf 467 Breite. Die vollen 6 Prozent
   kamen nach 9 Sekunden, so lange haelt niemand ein Menue offen. Dafuer
   trugen elf Ebenen dauerhaft will-change: transform. Das ist das
   Accessoire, das vor dem Spiegel abgelegt wird.

   BEFUND A8, kein aspect-ratio mehr. Alle Panels waren 447 Pixel hoch,
   weil das Album mit 4 zu 3 bei 467 Breite 350 Pixel erzwang. Beim
   Pension-Panel endete der Inhalt links bei y=321, die Spalte lief bis
   463: 142 Pixel Leere. Jetzt bestimmt der Inhalt die Hoehe und der Abzug
   fuellt sie.
   ⚠️ Genau das ist auch die Safari-Falle: aspect-ratio in einer
   Rasterzelle, die gleichzeitig gestreckt wird, schaukelt sich auf. Wo es
   kein aspect-ratio gibt, kann sich nichts aufschaukeln. min-width: 0
   bleibt trotzdem stehen, Guertel und Hosentraeger.
   ========================================================================== */

/* Die Flaeche, auf der die Abzuege liegen. Kein overflow: hidden mehr,
   sonst schnitte sie die gekippten Ecken ab. */
.vr-panel__album {
  position: relative;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 280px;
}

/* Die Ecke des naechsten Abzugs im Stapel. Ein leeres Blatt Papier,
   staerker gekippt als das obere, deshalb schaut es an den Ecken hervor.
   Es steht als ::before vor allen Fotos in der Malreihenfolge und liegt
   damit hinter ihnen. */
.vr-panel__album::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: var(--vr-radius-xs);
  background: var(--vr-papier);
  box-shadow: var(--vr-shadow-md);
  transform: rotate(2.4deg);
  transform-origin: center;
}

/* Ein Abzug. Oben das Foto, unten der weisse Rand mit der Notiz.
   inset 14px laesst der Drehung Platz: bei 1,1 Grad wandert eine Ecke
   eines 460 mal 330 grossen Blattes rund 4,4 Pixel, beim Blatt darunter
   mit 2,4 Grad rund 9,6. 14 Pixel decken beides.
   Gewechselt wird ueber opacity, nicht ueber display, damit es weich
   uebergeht. */
/* Der Abzug wird gezogen, nicht geschaltet. Ansage Dirk 03.09.2026:
   "schoen animiert, ohne dass es so hart springt wie aktuell".

   Vorher wechselte nur die Deckkraft, zwei Fotos lagen 400 Millisekunden
   uebereinander und es sah nach Ueberblendung im Diaprojektor aus.
   Jetzt kommt der neue Abzug von rechts hereingeschoben und leicht
   aufgerichtet, waehrend der alte nach links weggeht und staerker
   kippt. Das ist die Bewegung, die entsteht, wenn man auf dem Tisch
   einen Abzug vom Stapel zieht und den vorherigen beiseiteschiebt.

   Drei Zustaende, deshalb drei Regeln: wartend (rechts, gekippt),
   aktiv (mittig, ruhig), gehend (links, staerker gekippt). Die Klasse
   geht setzt megamenu.js und nimmt sie nach der Dauer wieder weg.

   Gedreht und verschoben wird der Abzug selbst, nicht das Foto darin.
   Damit bleibt die Regel eingehalten, dass in Animationen weder
   z-index noch filter vorkommen. */
.vr-panel__foto {
  position: absolute;
  inset: 14px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--vr-space-2xs);
  margin: 0;
  padding: 10px;
  border-radius: var(--vr-radius-xs);
  background: var(--vr-papier);
  box-shadow: var(--vr-shadow-lg);
  transform-origin: 50% 60%;
  transform: rotate(2.2deg) translateX(34px) scale(0.97);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.vr-panel__foto.ist-aktiv {
  opacity: 1;
  transform: rotate(-1.1deg) translateX(0) scale(1);
}

.vr-panel__foto.geht {
  opacity: 0;
  transform: rotate(-4deg) translateX(-30px) scale(0.97);
}

/* Die Bildflaeche im Abzug. Sie haelt das Foto in ihrem Rahmen, deshalb
   hier das overflow: hidden. Der Hintergrund ist das, was man sieht,
   solange das Foto noch laedt.
   ⚠️ min-height: 0 ist Pflicht. Ohne das nimmt eine Rasterzeile die
   Groesse ihres Inhalts als Untergrenze, und das Bild schiebt den Abzug
   auseinander. */
.vr-panel__ebene {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--vr-radius-xs);
  background: var(--vr-creme-tief);
}

.vr-panel__ebene picture,
.vr-panel__ebene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Die Notiz auf dem Rand des Abzugs, in Eriks Handschrift.
   Kein Verlauf, kein Textschatten und keine eigene Drehung mehr: das
   ganze Blatt ist gekippt, die Zeile liegt gerade darauf. Genau das war
   Befund A9.
   ⚠️ Eine Zeile, nicht zwei. Alle Abzuege eines Panels liegen uebereinander
   und muessen gleich hoch sein, sonst springt die Bildflaeche beim
   Wechseln. Eine zu lange Notiz wird deshalb still gekuerzt. Gemessen am
   03.09.2026 bei 1024, 1180, 1280 und 1440 Pixel: keine der elf Notizen
   wird gekuerzt. Wer eine neue schreibt, misst dort nach. Das Album traegt
   aria-hidden, die Notiz ist Schmuck und kein Inhalt, der verloren geht. */
.vr-panel__notiz {
  margin: 0;
  padding: 0 2px;
  font-family: var(--vr-font-hand);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--vr-burgund);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==========================================================================
   11. Panel, engere Bildschirme
   --------------------------------------------------------------------------
   Zwischen 1024 und 1180 Pixel wird die linke Spalte sonst zu schmal fuer
   zwei Eintragsspalten. Deshalb dort gleich breite Haelften und ein
   kleinerer Abstand.
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1180px) {
  .vr-panel__raster {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--vr-space-xl);
  }

  /* Die Sonderregel fuer das Album stand frueher hier. Sie gilt seit
     Befund A8 fuer jede Breite und steht jetzt in Abschnitt 10. */
}


/* ==========================================================================
   12. Die Kopfzeile enger schnueren
   --------------------------------------------------------------------------
   Gerechnet, nicht geraten. Bei 1024 Pixel stehen nach Abzug der beiden
   Containerraender 976 Pixel zur Verfuegung. Darin muessen Logo, fuenf
   Menuepunkte, der Brief und der Knopf nebeneinander stehen, ohne
   umzubrechen. Mit den Werten fuer breite Bildschirme reicht das nicht.
   Deshalb hier: schmalerer Containerrand, engere Abstaende, kleineres
   Logo, kleinerer Brief. Gemessen wird bei 1024, 1280 und 1440.
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1279px) {
  .vr-kopf__zeile {
    padding-inline: var(--vr-space-md);
    gap: var(--vr-space-2xs);
  }

  .vr-kopf__logo img { height: 36px; }

  /* Innenabstand und Knopfbreite bleiben wie oben, sonst verrutscht das
     Verhaeltnis 8 zu 24 aus Befund A6. Gespart wird am Logo und am
     Brief. */
  .vr-nav__brief { font-size: 1.375rem; }

  .vr-nav__brief::after { bottom: 20px; }
}

/* Die engste Stufe. Seit dem 03.09.2026 stehen sieben Punkte in der Zeile
   statt sechs, weil die Kueche einen eigenen bekommen hat. Gemessen bei
   1024 Pixeln blieben danach nur noch 16 Pixel Luft zwischen Navigation
   und Knopf. Das reicht nicht: ein etwas laengeres Wort, eine andere
   Schriftfassung oder ein Browser, der Lora minimal breiter setzt, und die
   Zeile bricht um.

   Hier wird deshalb am Innenabstand der Punkte gespart, nicht an der
   Schriftgroesse. Vier Pixel je Seite mal sieben Punkte ergeben 56 Pixel,
   damit stehen wieder rund 70 zur Verfuegung. Die Klickflaeche bleibt
   ueber die volle Kopfhoehe von 64 Pixeln erhalten, die Punkte ruecken nur
   naeher zusammen. Ab 1181 Pixeln gilt wieder der normale Abstand, dort
   sind ueber 150 Pixel frei. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .vr-nav__link,
  .vr-nav__link:visited,
  .vr-nav__brief,
  .vr-nav__brief:visited {
    padding-inline: var(--vr-space-3xs);
  }

  /* Seit dem 03.09.2026 stehen ACHT Punkte in der Zeile, weil Start
     zurueckgekommen ist. Gemessen bei 1024 Pixeln: die Punkte brauchen 687
     Pixel, zwischen Logo und Knopf sind 729 frei, und mit den Luecken
     dazwischen bricht die Zeile um. Der Kopf wird dann 67 statt 65 hoch
     und das Menue steht zweizeilig.

     Gespart wird an der Schrift, nicht am Wortlaut: "Das Haus" zu "Haus"
     zu kuerzen waere schneller gegangen, aber der Punkt heisst so, wie er
     heisst. Ein Pixel weniger Schriftgroesse spart rund sechs Prozent
     Breite, das sind hier etwa vierzig Pixel. Die Klickflaeche bleibt die
     volle Kopfhoehe von 64 Pixeln.

     Ab 1181 Pixeln gilt wieder die normale Groesse, dort sind ueber 140
     Pixel frei. */
  .vr-nav__link,
  .vr-nav__link:visited {
    font-size: 0.875rem;
  }

  /* Der Brief traegt Caveat, die laeuft breiter als Lora. Bei acht Punkten
     ist er mit 107 Pixeln der breiteste Einzelposten. Gemessen am
     03.09.2026 bei 1024: ohne diese Zeile brach die Reihe um und der Kopf
     wurde 67 statt 65 Pixel hoch. */
  .vr-nav__brief,
  .vr-nav__brief:visited {
    font-size: 1.25rem;
  }

  .vr-nav__brief::after {
    left: var(--vr-space-3xs);
    right: var(--vr-space-3xs);
  }
}


/* ==========================================================================
   13. Der Drawer, unter 1024 Pixel
   --------------------------------------------------------------------------
   Faehrt von rechts herein. visibility wird mitgeschaltet, damit der
   geschlossene Drawer nicht per Tabulator erreichbar bleibt. Der Umschalt-
   zeitpunkt der visibility haengt an der Verzoegerung: beim Oeffnen sofort,
   beim Schliessen erst nach der Fahrt.

   Die Fahrkurve ist dieselbe wie beim alten Menue, damit sich die Seite
   nicht an zwei Stellen unterschiedlich anfuehlt.
   ========================================================================== */

.vr-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--vr-z-modal);
  background: var(--vr-creme);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  /* BEFUND A15, zweiter Teil: der geschlossene Drawer steht nur eine
     Fensterbreite weit rechts. Das liegt innerhalb der Vorladezone des
     Browsers, deshalb lud jedes Handy die fuenf Kacheln mit, bevor
     jemand das Menue antippte: gemessen 162,4 KB.
     content-visibility: hidden nimmt den Inhalt aus dem Rendern, und
     damit laedt der Browser auch die Bilder darin nicht mehr im Voraus.
     Kennt ein Browser die Eigenschaft nicht, bleibt alles wie vorher, es
     geht nichts kaputt.
     ⚠️ Nicht display: none nehmen. Das wuerde die Fahrt von rechts
     verschlucken und den Fokus im falschen Moment ins Leere setzen. */
  content-visibility: hidden;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 320ms;
}

.vr-drawer[aria-hidden="false"] {
  visibility: visible;
  content-visibility: visible;
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0s;
}

body.vr-drawer-offen {
  overflow: hidden;
}

/* 100dvh statt 100vh: auf dem iPhone rechnet vh mit eingeklappter
   Adresszeile und schiebt den Fuss unter den Bildschirmrand.
   Die Zeile darueber ist der Rueckfall fuer aeltere Browser.
   env(safe-area-inset-bottom) allein reicht nicht, sonst klebt der Knopf
   auf Geraeten ohne Aussparung direkt an der Kante. */
.vr-drawer__innen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--vr-space-sm) var(--vr-space-md)
           calc(var(--vr-space-md) + env(safe-area-inset-bottom, 0px));
}

.vr-drawer__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  flex: none;
}

/* min-height 44 aus demselben Grund wie im Kopf: das Logo ist nur
   34 Pixel hoch, das Klickziel waere sonst zu klein. */
.vr-drawer__marke {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  line-height: 0;
}

.vr-drawer__logo {
  display: block;
  line-height: 0;
}

.vr-drawer__logo img {
  height: 34px;
  width: auto;
  display: block;
}

.vr-drawer__zu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  /* Gleicher Rahmen wie am Burger, siehe Befund A20. */
  border: 1px solid var(--vr-gold-tief);
  border-radius: var(--vr-radius-sm);
  background: transparent;
  color: var(--vr-anthrazit);
  cursor: pointer;
}

.vr-drawer__nav {
  flex: none;
}

/* ==========================================================================
   Der Drawer, Neuaufbau am 03.09.2026
   --------------------------------------------------------------------------
   Dirks Ansage, woertlich zusammengefasst: die Ueberschrift soll mit der
   Oberkante des Fotos abschliessen, statt Links steht eine kurze
   Beschreibung von hoechstens zwei Zeilen, jeder Punkt ist gleich gross,
   der Leerraum unter den Fotos wird kleiner, und alles muss ohne Scrollen
   auf ein Telefon passen.

   Vorher: acht Gruppen mit unterschiedlich vielen Unterlinks, Abstaende von
   32 Pixeln dazwischen, Gesamthoehe 1202 Pixel bei einem Fenster von 844.
   Man musste ueber ein Drittel scrollen, um "Brief an Erik" zu sehen.

   Jetzt: eine Zeile je Punkt, alle gleich hoch, ein durchgehender Abstand.
   Gerechnet fuer ein iPhone mit 844 Pixeln: Kopf 56, acht Zeilen zu 76 mit
   je 6 Pixeln Abstand ergeben 650, Fuss rund 110. Zusammen 816.

   Die Unterpunkte sind bewusst raus. Sie waren der Grund fuer die
   ungleichen Hoehen, sie brachen auf schmalen Geraeten unschoen um, und ein
   Menue muss nicht jede Seite auflisten. Es muss den Weg zeigen.
   ========================================================================== */

.vr-drawer__liste {
  display: flex;
  flex-direction: column;
  /* Klein und ueberall gleich. Der Abstand trennt die Zeilen, er soll sie
     nicht auseinanderziehen: die Fotos tun das Trennen schon. */
  gap: var(--vr-space-2xs);
  margin: var(--vr-space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.vr-drawer__gruppe {
  margin: 0;
  min-width: 0;
}

/* align-items: flex-start statt center. Das ist der Kern von Dirks
   Wunsch: die Ueberschrift beginnt oben, buendig mit der Oberkante des
   Fotos, statt in der Mitte daneben zu schweben. */
.vr-drawer__haupt,
.vr-drawer__haupt:visited {
  display: flex;
  align-items: flex-start;
  gap: var(--vr-space-sm);
  min-height: 72px;
  padding: 2px 0;
  text-decoration: none;
  color: inherit;
}

.vr-drawer__bild {
  flex: none;
  width: 88px;
  /* 88 zu 66 ist 4 zu 3, das Verhaeltnis der Quellfotos. Ein quadratischer
     Ausschnitt schnitt vorher bei jedem Foto die Haelfte weg. */
  height: 66px;
  overflow: hidden;
  border-radius: var(--vr-radius-sm);
  background: var(--vr-creme-tief);
  line-height: 0;
}

.vr-drawer__bild picture,
.vr-drawer__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Die Textspalte. min-width 0 ist Pflicht, sonst weigert sich ein
   Flex-Kind zu schrumpfen und die lange Beschreibung schiebt die Zeile
   ueber den Rand. */
.vr-drawer__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* Buendig mit der Fotooberkante. Fraunces sitzt in seiner Zeilenbox
     etwas tief, zwei Pixel nach oben gleichen das aus. Gemessen, nicht
     geschaetzt: ohne die Korrektur stand die Oberkante der Versalien vier
     Pixel unter der Fotokante. */
  margin-top: -2px;
}

.vr-drawer__titel {
  font-family: var(--vr-font-display);
  /* Deutlich kleiner als vorher (dort bis 2rem). Mit Beschreibung
     darunter braucht die Ueberschrift keine Groesse mehr, um zu fuehren:
     das macht jetzt der Kontrast zwischen Fraunces und Lora. */
  font-size: 1.375rem;
  font-weight: var(--vr-fw-regular);
  line-height: 1.15;
  color: var(--vr-anthrazit);
}

.vr-drawer__kurz {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  line-height: 1.35;
  color: var(--vr-text-secondary);
  /* Hoechstens zwei Zeilen. Laenger gesetzte Texte werden abgeschnitten,
     statt die Zeile hoeher zu machen: gleiche Hoehe je Punkt ist wichtiger
     als der letzte Halbsatz. Wer hier drei Zeilen braucht, kuerzt in
     navigation.yml. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vr-drawer__gruppe.ist-aktiv .vr-drawer__titel,
.vr-drawer__haupt[aria-current] .vr-drawer__titel {
  color: var(--vr-burgund);
}

.vr-drawer__titel--brief {
  font-family: var(--vr-font-hand);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--vr-burgund);
}

/* Der Brief hat kein Foto. Damit sein Text trotzdem in der Spalte der
   anderen beginnt, bekommt er den Platz des Bildes als Einzug. Sonst
   spraenge er nach links aus der Reihe. */
.vr-drawer__gruppe--brief .vr-drawer__haupt {
  min-height: 56px;
  padding-left: calc(88px + var(--vr-space-sm));
  margin-top: var(--vr-space-2xs);
  padding-top: var(--vr-space-2xs);
  border-top: 1px solid var(--vr-linie-soft);
}

/* margin-top auto schiebt den Fuss an das untere Ende, auch wenn die
   Liste kurz ist. */
.vr-drawer__fuss {
  margin-top: auto;
  padding-top: var(--vr-space-lg);
  border-top: 1px solid var(--vr-linie-soft);
}

/* BEFUND A16: hier stand "Samstag 17:00 bis 23:00 Uhr" in Caveat und
   burgund. Zahlen sind Fakten und gehoeren in Lora. Es war ausserdem die
   dritte Handschrift auf einem Bildschirm, und damit war die Signatur
   keine Signatur mehr. Uebrig bleiben zwei: der Brief und die Notiz auf
   dem Abzug. */
.vr-drawer__zeiten {
  margin: 0 0 var(--vr-space-sm);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  line-height: var(--vr-leading-normal);
  color: var(--vr-text-secondary);
}

.vr-drawer__zeiten span {
  display: block;
}

.vr-drawer__zeiten strong {
  font-weight: var(--vr-fw-medium);
}

.vr-drawer__cta {
  width: 100%;
  min-height: 52px;
}

/* Tablet: zwei Spalten. Ab 768 Pixel ist genug Breite fuer Foto und
   Beschreibung nebeneinander, ohne dass die zwei Zeilen zu Woerterschlangen
   werden. */
@media (min-width: 768px) and (max-width: 1023px) {
  .vr-drawer__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vr-space-lg) var(--vr-space-xl);
  }

  /* Der Brief laeuft ueber beide Spalten. Gemessen bei 768 Pixel: als
     normale Zelle landete er rechts neben Anfahrt, ohne Foto, und wirkte
     dort wie ein vergessener Eintrag. Ueber die ganze Breite steht er
     unter der Liste wie eine Unterschrift, und genau das ist er. */
  .vr-drawer__gruppe--brief {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   14. Schmale Bildschirme
   --------------------------------------------------------------------------
   Kopfhoehe 56 statt 64, Logo 34 statt 40. Der Knopf bleibt sichtbar,
   hero-video.css macht ihn unter 768 Pixel ohnehin kompakter. Gemessen
   wird bei 320, 375 und 390 Pixel: nichts darf aus dem Rahmen laufen.
   Kein overflow-x hidden auf html oder body, das wuerde den Ueberlauf nur
   verstecken statt ihn zu beheben, und die Messung blind machen.
   ========================================================================== */

@media (max-width: 767px) {
  .vr-kopf__zeile {
    min-height: 56px;
    gap: var(--vr-space-2xs);
  }

  .vr-kopf__logo img { height: 34px; }

  .vr-kopf__aktionen { gap: var(--vr-space-2xs); }
}

/* Ganz schmal, ab hier zaehlt jeder Pixel. Der Text im Knopf bleibt
   stehen, er ist Inhalt und wird nicht gekuerzt. Stattdessen wird der
   Abstand kleiner. */
/* Der Abstand zwischen Knopf und Burger bleibt hier bei 8 Pixeln, er wird
   NICHT mitverkleinert. Gemessen bei 320 Pixel: mit 4 Pixeln standen die
   beiden 4 auseinander und wirkten wie ein Element, waehrend vor dem Knopf
   durch margin-left auto 12 Pixel uebrig blieben. Ungleiche Luecken sehen
   nach Versehen aus. Mit 8 verteilt sich der Rest gleichmaessig, und es
   passt weiterhin: 272 Pixel Innenbreite minus Logo 101, Knopf 111 und
   Burger 44 lassen genau 16 Pixel fuer zwei Luecken. */
@media (max-width: 400px) {
  .vr-kopf__zeile { gap: var(--vr-space-3xs); }
  /* Auf /pension heisst der Knopf "Zimmer reservieren" und ist damit
     laenger als das "Tisch sichern" der anderen Seiten. Gemessen bei
     320 Pixel: 24 Rand, 101 Logo, 4, 129 Knopf, 4, 44 Burger und 24 Rand
     ergeben 330 und damit 10 zu viel, der Knopf sprang in eine zweite
     Zeile und der Kopf wuchs von 57 auf 93. Mit 8em bricht der laengere
     Text auf zwei Zeilen um und bleibt in der Reihe. Der kuerzere Text
     der anderen Seiten passt weiterhin in eine Zeile, dort aendert sich
     nichts. */
  .vr-kopf__cta { padding-inline: var(--vr-space-2xs); max-width: 8em; }
}


/* ==========================================================================
   15. Fokus
   --------------------------------------------------------------------------
   base.css setzt einen goldenen Ring. Gold auf Creme ergibt gemessen nur
   2,9 zu 1 und reicht als Fokusanzeige nicht. Im Menue wird deshalb
   burgund genommen: 10,2 zu 1 auf Creme.
   Der Abstand von 2 Pixeln laesst zwischen Ring und Knopf einen Streifen
   Hintergrund stehen. So bleibt der Ring auch auf dem burgundfarbenen
   Knopf sichtbar.
   ========================================================================== */

.vr-kopf a:focus-visible,
.vr-kopf button:focus-visible,
.vr-drawer a:focus-visible,
.vr-drawer button:focus-visible {
  outline: 2px solid var(--vr-burgund);
  outline-offset: 2px;
  border-radius: var(--vr-radius-sm);
}

/* BEFUND A19: der Nav-Link ist so hoch wie die Kopfzeile, 64 auf 64
   Pixel. Mit outline-offset 2 lief der Ring von -4 bis 68, und die
   oberen 4 Pixel lagen beim Stand ganz oben ausserhalb des Fensters.
   Ein negativer Versatz zeichnet den Ring nach innen: er liegt jetzt von
   0 bis 62 und ist vollstaendig sichtbar. Den Link kuerzen ginge auch,
   dann verrutschte aber die Glut-Linie, die an seiner Unterkante haengt.
   Gilt nur fuer den Nav-Link, alle anderen behalten den Ring aussen. */
.vr-kopf .vr-nav__link:focus-visible {
  outline-offset: -2px;
}

/* Die Regel darueber setzt border-radius auf 4 Pixel, der Panel-Eintrag
   hat aber 8. Ohne diese Zeile springen seine Ecken beim Fokussieren von
   8 auf 4. Drei Klassen schlagen zwei Klassen plus Typ, deshalb steht der
   Kopf hier davor. Gemessen am 02.09.2026, der Ring kam mit 4 Pixeln
   Rundung um einen 8 Pixel gerundeten Kasten. */
.vr-kopf .vr-panel__eintrag:focus-visible {
  border-radius: var(--vr-radius-md);
}


/* ==========================================================================
   16. Weniger Bewegung
   --------------------------------------------------------------------------
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt hier
   gar keine. tokens.css setzt die Dauern bereits auf 0, aber Ken Burns
   und die Drawerfahrt tragen eigene Zeiten und muessen einzeln aus.
   Die Fotos wechseln dann hart, das ist gewollt.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .vr-kopf,
  .vr-nav__link,
  .vr-nav__link::after,
  .vr-nav__brief,
  .vr-nav__brief::after,
  .vr-nav__auf,
  .vr-nav__pfeil,
  .vr-panel,
  .vr-panel__eintrag,
  .vr-panel__titel,
  .vr-panel__titel::after,
  .vr-panel__foto,
  .vr-panel__ort,
  .vr-kopf__burger,
  .vr-drawer {
    transition: none !important;
  }

  /* Der Ken-Burns-Zoom stand hier frueher als Ausnahme. Er ist seit
     Befund A10 ganz raus, samt will-change auf elf Ebenen. Die leichte
     Drehung der Abzuege bleibt: sie bewegt sich nicht, sie steht nur
     schief, und darum faellt sie nicht unter reduzierte Bewegung. */
}


/* ==========================================================================
   MEGAMENUE-04092026. Dirks Durchgang vom 04.09.2026.
   ========================================================================== */

/* EINS: der Umbruch bei "Taufe und Schuleinfuehrung".
   Gemessen: 262 Pixel noetig, 233 vorhanden, es fehlten 29. Alle anderen
   Eintraege standen einzeilig, dieser als einziger zweizeilig, und das
   zog die ganze Zeile auseinander. */
.vr-panel__titel {
  white-space: nowrap;
}

.vr-panel__eintrag {
  min-width: 262px;
}

/* Auf schmalen Fenstern darf er wieder umbrechen, dort ist Platz das
   knappere Gut als eine gerade Zeile. */
@media (max-width: 1100px) {
  .vr-panel__titel { white-space: normal; }
  .vr-panel__eintrag { min-width: 0; }
}

/* ZWEI: weiche Uebergaenge im ganzen Menue.
   Die Eintraege wechselten in 0,15 Sekunden und nur den Hintergrund.
   Das ist ein Umspringen, kein Uebergang. Dieselbe Kurve wie bei den
   Knoepfen, damit sich die Seite ueberall gleich anfuehlt. */
.vr-panel__eintrag,
.vr-panel__eintrag .vr-panel__titel,
.vr-panel__eintrag .vr-panel__text,
.vr-panel__ort,
.vr-nav__link,
.vr-nav__auf,
.vr-nav__brief {
  transition:
    background-color 0.28s cubic-bezier(0.32, 0.72, 0.31, 1),
    color 0.28s cubic-bezier(0.32, 0.72, 0.31, 1),
    border-color 0.28s cubic-bezier(0.32, 0.72, 0.31, 1),
    transform 0.28s cubic-bezier(0.32, 0.72, 0.31, 1);
}

/* Das Vorschaubild rechts sprang beim Wechsel des Eintrags um. Ein
   weiches Ueberblenden macht aus dem Sprung eine Bewegung. */
.vr-panel__foto,
.vr-panel__bild,
.vr-panel__vorschau img {
  transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0.31, 1);
}

/* Die Ortsnamen im Anfahrtspanel heben sich beim Ueberfahren leicht an,
   wie die Bewertungskarten. Dasselbe Verhalten an allen Stellen, an
   denen etwas anklickbar ist. */
.vr-panel__ort:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .vr-panel__eintrag,
  .vr-panel__eintrag .vr-panel__titel,
  .vr-panel__eintrag .vr-panel__text,
  .vr-panel__ort,
  .vr-nav__link, .vr-nav__auf, .vr-nav__brief,
  .vr-panel__foto, .vr-panel__bild {
    transition-duration: 0.01ms;
  }
  .vr-panel__ort:hover { transform: none; }
}