/* ══════════════════════════════════════════════════════════════════════════
   DAS APP-MENUE UND WAS `entwurf-basis.js` SONST BAUT (27.08.2026)

   ⚠️ WARUM DIESE DATEI GETRENNT VON `entwurf-basis.css` STEHT – der Grund ist
   ein Bedienfehler, den der Betreiber sofort gefunden hat: Die Leiste lag in
   der Basis, die Basis nur auf den vier umgestellten Seiten. Wer unten auf
   „Konto“ tippte, landete auf `konto-mein.html` – und dort war die Leiste
   WEG. Man tippt ins App-Menue und das App-Menue verschwindet; das ist die
   haeufigste Bewegung ueberhaupt.

   Der Schnitt loest das ohne Nebenwirkung:
     `app-menue.css` + `entwurf-basis.js` = die NAVIGATION – auf JEDER Seite.
     `entwurf-basis.css`                  = die BAUFORM – nur wo abgenommen.

   Damit traegt auch `runde.html` die Leiste, ohne die Bauform zu bekommen,
   zu der noch ein Befund offen ist („Probleme mit der Tabelle aus deiner
   Liste & Freunden“).

   ⚠️ WAS HIER STEHT, GEHOERT ZU DEM, WAS DAS SKRIPT BAUT – nichts anderes.
   Wer eine Regel fuer die Bauform sucht, sucht in `entwurf-basis.css`.

   NICHT eingebunden: `impressum.html` und `datenschutz.html`. Sie werden vom
   Build in BEIDE Buendel gespiegelt, auch ins Backend – dort gibt es die
   oeffentliche Leiste nicht, und ein Verweis auf eine fehlende Datei waere
   ein 404 im Backend. Beides sind Endstationen ueber den Fuss, kein App-Weg.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fuss und Marke ───────────────────────────────────────────────────────
   Auf dem Telefon traegt das App-Menue unten die Navigation; ein zweiter
   Fussblock darueber waere Ballast auf dem knappsten Bildschirm. Am Rechner
   bleibt beides – dort gibt es die Leiste nicht, und der Markenfuss ist der
   einzige Ort mit Telefon und E-Mail des Betreibers.

   ⚠️ STEHT HIER, NICHT IN DER BAUFORM: Der Fuss verschwindet nur, WEIL die
   Leiste da ist. Beides muss zusammen kommen und zusammen gehen – sonst hat
   eine Seite auf dem Telefon gar keine Navigation mehr. */
@media (max-width: 767px) {
  .markenfuss { display: none; }
  .sitefoot { display: none; }
}

/* „In meiner Naehe“ steht im Aufklapper der Suche – volle Zeile wie eine
   Option, aber gruen, damit es als AKTION erkennbar bleibt. */
.cselect-list .jg-nah-in-liste {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--jg-line, #e4eae7);
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--jg-green, #0f6e56);
  text-align: left;
  cursor: pointer;
}
.cselect-list .jg-nah-in-liste:hover { background: var(--jg-hover, #eef2f0); }
.cselect-list .jg-nah-in-liste svg { width: 16px; height: 16px; flex: none; }

/* Die Rechts-Eintraege im Konto-Menue etwas abgesetzt: Sie gehoeren nicht zum
   Konto, sondern zur Seite – eine duenne Linie sagt das ohne ein Wort. */
.jg-konto-eintrag.jg-recht:first-of-type {
  border-top: 1px solid var(--jg-line, #e4eae7);
  margin-top: 4px;
  padding-top: 10px;
}

/* ── 7. Das App-Menue am unteren Rand (nur Telefon) ───────────────────────
   Die Ziele SPIEGELT `entwurf-basis.js` aus dem Kopfmenue – dort steckt die
   Slug-Ermittlung und die Unterscheidung live/lokal. Ein zweites Regelwerk
   liefe beim ersten neuen Pfad auseinander. */
@media (max-width: 767px) {
  .jg-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--jg-card, #fff);
    border-top: 1px solid var(--jg-line, #e4eae7);

    /* ⚠️ PFLICHT, NICHT FEINSCHLIFF: Auf jedem iPhone ohne Home-Knopf liegt
       der Home-Indikator ueber der Seite. Ohne diese Zeile sitzt die unterste
       Beschriftung darunter und die Flaeche laesst sich nicht zuverlaessig
       antippen. Dieselbe Familie wie `100dvh` bei Dialogen. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .jg-menue-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 6px;
    min-height: 52px;
    text-decoration: none;
    color: var(--jg-muted, #5c6b64);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
  }
  .jg-menue-tab svg { width: 23px; height: 23px; }
  .jg-menue-tab:hover { color: var(--jg-ink, #15211c); }
  .jg-menue-tab.aktiv { color: var(--jg-green, #0f6e56); font-weight: 600; }
  .jg-menue-tab:focus-visible {
    outline: 2px solid var(--jg-green, #0f6e56);
    outline-offset: -2px;
  }

  /* ⚠️ DER SEITE UNTEN PLATZ MACHEN. Eine fixierte Leiste liegt UEBER dem
     Inhalt – ohne diesen Abstand ist die letzte Zeile dauerhaft verdeckt,
     und zwar genau die, die man beim Scrollen erreichen will. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 768px) {
  .jg-tabbar { display: none; }
}

/* ⚠️ WARUM DIE EINTRAEGE `jg-menue-tab` HEISSEN UND NICHT `jg-tab` (27.08.2026)
   ═══════════════════════════════════════════════════════════════════════════
   Sie hiessen `jg-tab` – und `.jg-tab` ist im Projekt seit Langem die Klasse
   der TABELLEN (`kopfmenue.css`: „EINE Fassung fuer alle Tabellen der
   oeffentlichen Seiten“). Die Leiste setzt `display: flex` unter 768 px, und
   damit wurde JEDE dieser Tabellen auf dem Telefon zu einem Flex-Container:
   `thead` schrumpfte auf Inhaltsbreite und stand als schmaler gruener Balken
   mitten in der Tabelle, waehrend die Spalten darunter ihre eigene Breite
   behielten. Gemessen auf `runde.html`: Tabelle `display: flex`, `thead`
   190…329 px, die Zeilen darunter 57…462 px.

   Der Betreiber hat es an der Mitspieler-Auswahl gesehen („namewoher? die
   tabelle ist kaputt“) – die Ursache lag aber nicht dort, sondern in dieser
   Datei, und sie traf jede Tabelle jeder Seite, die sie laedt.

   Genau davor warnt die Projektregel „Gleiche CSS-Klasse an zwei Stellen“ und
   „erst greppen, dann benennen“. Ich habe beim Benennen nicht gegreppt.
   ═══════════════════════════════════════════════════════════════════════════ */