/* youbooth — BELEBEN, die zugehoerigen Regeln.

   Hier steht ausschliesslich, was das Bedienen moeglich macht. Kein Ton,
   kein Mass, keine Schrift — die bringt die Vorlage mit.

   Die Vorlage oeffnet `.ybpanel` ueber `:hover` und `:focus-within`.
   `:focus-within` kann nie greifen, weil ein Element mit
   `visibility:hidden` keinen Fokus annimmt; gemessen an `/` blieben zehn
   Ziele ohne Maus unerreichbar. `beleben.js` schaltet stattdessen die
   Klasse `on`, die die Vorlage fuer den Ausloeser schon kennt. Diese
   Regel gibt ihr dieselbe Wirkung fuers Panel wie der Hover. */

.ybmore.yb-auf .ybpanel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Escape muss auch dann schliessen, wenn der Fokus noch im Menue steht.
   Die Vorlage haelt es ueber `:focus-within` offen — gemessen: nach
   Escape war die Klasse `on` weg, das Panel aber weiter sichtbar, weil
   der Ausloeser den Fokus behielt. Gleiche Spezifitaet reicht nicht - der <style>-Block der Vorlage steht
   im Dokument HINTER dieser Datei. `[class]` hebt um eins an, ohne
   !important:
   diese Regel gewinnt. */
.ybmore.yb-zu[class] .ybpanel {
  opacity: 0;
  visibility: hidden;
}

/* WARUM NICHT `on`: die Vorlagen markieren damit den AKTIVEN Menuepunkt.
   `Rechner.dc.html` traegt `class="ybmore on"`, weil die Seite unter
   "Verdienstrechner" im Menue steht. Wer `on` als "aufgeklappt" liest,
   laesst das Panel auf vier Seiten offen stehen — gemessen. */

/* Die Kopfleiste der Vorlagen setzt `padding:0 48px` bei content-box.
   Damit ist sie 1536 px breit, wo das Fenster 1440 hat — gemessen als
   13 px Ueberlauf auf 43 von 43 Seiten, sichtbar am rechts
   angeschnittenen Knopf "14 Tage testen".

   border-box aendert kein Mass, das jemand gesetzt hat: das Polster
   zaehlt jetzt in die Breite hinein, statt sie zu vergroessern. */
.ybnav,
.ybnav *,
.ybfoot,
.ybfoot * { box-sizing: border-box; }

/* Das Aufklappmenue: die Vorlage setzt `.ybpanel{position:absolute}`,
   wirksam war aber `relative`. Dadurch nahm das verborgene Panel seine
   volle Breite im Fluss ein — gemessen 520 px — und schob den Ausloeser
   "Mehr" in eine Luecke, in der er nicht mehr zu sehen war.

   Diese Regel stellt den Zustand her, den die Vorlage meint. */
.ybnav .ybmore { position: relative; }
.ybnav .ybmore > .ybpanel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(520px, calc(100vw - 32px));
}

/* Die Breite richtet sich nach dem Inhalt, nicht nach einer festen Zahl:
   die Vorlage setzt 520 px fuer zehn Eintraege, die neuen Gruppen haben
   drei bis vier. Und ein Panel am rechten Ende der Leiste darf nicht
   ueber den Fensterrand ragen. */
.ybnav .ybmore > .ybpanel {
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
}
/* Die letzten beiden Gruppen klappen nach links auf, damit sie im Bild
   bleiben. */
.ybnav .ybmore:nth-last-of-type(-n+3) > .ybpanel {
  left: auto;
  right: 0;
  transform: none;
}