/* css/leiste.css · Die Bottom-Leiste mit Aufklapper (R10), gebaut nach den drei Figma-Bühnen
 * „Buttom-Menu" (83:362 unaufgeklappt, 83:370 aufgeklappt Admin, 83:382 aufgeklappt kein Admin),
 * am 02.09.2026 über den Draht gemessen. Entscheidung 48: drei Zustände, rotes Plus verworfen.
 *
 * Leiste 393 × 96, Vanille #f3e8c8, 4 px Herz-Gold innen (Stilregel 6), Überlagerungs-Schatten
 * 0 / −10 / 28 Espresso 40 % nach oben (Stilregel 7). Fünf Symbole aus Symbole/Leiste, in
 * Figma je 60 breit: Person 60 × 76 bei 10 / 10, Ziel-Pfeil 60 × 60 bei 88,25 / 18, Haus
 * 60 × 57 bei 166,5 / 19,5, Zeitung 60 × 54 bei 244,75 / 21, Hamburger 60 × 60 bei 323 / 18.
 * Das Plus: Kreis 60 × 60 bei 167 / −50 mit Radius 30 und 4 px Goldkontur mittig, darin
 * plus-a 50 × 50 bei 172 / −45. Mittig gesetzte Kontur heißt im Browser: Kasten 64 × 64 bei
 * 165 / −52 mit Kontur innen, Radius 32.
 * Der Aufklapper: 80 breit, rechtsbündig, direkt über der Leiste, Vanille, Goldkontur innen,
 * derselbe Schatten, Innenabstand 10, Lücke 10: Ananas 60 × 98, Buch 60 × 52, und nur für
 * Admins das Zahnrad 60 × 60. Höhe ergibt sich: 250 mit Zahnrad, 180 ohne (Figma 83:378, 83:390).
 *
 * Alle Maße in der Einheit --u (ein Pixel bei 393, siehe start.css). Die Leiste hängt fest am
 * unteren Rand; auf iPhones mit Home-Balken wächst sie um die sichere Zone nach unten, die
 * Symbole bleiben oben (Technik, Claude; Tabeas Entscheidung „randlos" vom 01.09.2026).
 * Was unter der Leiste liegt, ist blinder Fleck (DESIGN.md Abschnitt 4, Auslauf).
 * Styling-Datei im Sinne von CLAUDE.md: Claude ändert sie nie ungefragt.
 */
.leiste {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: calc(393 * var(--u));
  height: calc(96 * var(--u) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  background: #f3e8c8;
  border: calc(4 * var(--u)) solid #f0b429;
  box-shadow: 0 calc(-10 * var(--u)) calc(28 * var(--u)) rgba(42, 29, 18, .4);
  z-index: 10;
}
.leiste a, .leiste button {
  position: absolute; display: block; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; font: inherit;
}
.leiste img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Lage der Symbole, gemessen ab der Leisten-Ecke; die 4 px Kontur liegt innen, darum minus 4 */
.leiste .person { left: calc(6 * var(--u)); top: calc(6 * var(--u)); width: calc(60 * var(--u)); height: calc(76 * var(--u)); }
.leiste .ziel   { left: calc(84.25 * var(--u)); top: calc(14 * var(--u)); width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.leiste .haus   { left: calc(162.5 * var(--u)); top: calc(15.5 * var(--u)); width: calc(60 * var(--u)); height: calc(57 * var(--u)); }
.leiste .news   { left: calc(240.75 * var(--u)); top: calc(17 * var(--u)); width: calc(60 * var(--u)); height: calc(54 * var(--u)); }
.leiste .menue  { left: calc(319 * var(--u)); top: calc(14 * var(--u)); width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
/* Das Plus, ragt über die Leiste hinaus */
.leiste .plus {
  left: calc(161 * var(--u)); top: calc(-56 * var(--u)); width: calc(64 * var(--u)); height: calc(64 * var(--u));
  border-radius: 50%;
  background: #f3e8c8;
  border: calc(4 * var(--u)) solid #f0b429;
  box-sizing: border-box;
}
.leiste .plus img { width: calc(50 * var(--u)); height: calc(50 * var(--u)); margin: calc(3 * var(--u)); }
/* Der Aufklapper, öffnet über dem Hamburger */
.leiste .aufklapper {
  position: absolute;
  right: calc(-4 * var(--u)); bottom: calc(96 * var(--u) - 4 * var(--u));
  width: calc(80 * var(--u));
  /* Figmas Innenabstand 10 zählt ab der Rahmenkante und enthält die 4 px Kontur, darum hier 6 */
  display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(6 * var(--u));
  box-sizing: border-box;
  background: #f3e8c8;
  border: calc(4 * var(--u)) solid #f0b429;
  box-shadow: 0 calc(-10 * var(--u)) calc(28 * var(--u)) rgba(42, 29, 18, .4);
}
.leiste .aufklapper[hidden] { display: none; }
.leiste .aufklapper a { position: static; width: calc(60 * var(--u)); }
.leiste .aufklapper .copa { height: calc(98 * var(--u)); }
.leiste .aufklapper .regeln { height: calc(52 * var(--u)); }
.leiste .aufklapper .verwaltung { height: calc(60 * var(--u)); }
/* Das Zahnrad sehen nur Admins (SPEC B9, B10). Die Rolle kommt mit R11; bis dahin zeigt
   ?admin=1 in der Adresse die Admin-Fassung für die Screenshot-Schleife. */
.leiste .aufklapper .admin { display: none; }
body[data-admin] .leiste .aufklapper .admin { display: block; }