/* ══════════════════════════════════════════════════════════════════════════
   jgFrage – DIE RUECKFRAGE DES PROJEKTS (21.09.2026)

   Ansage des Betreibers am Bild eines Systemdialogs: „Dieses ‚Capcom…‘ muss das weg."
   `confirm()` stellt seinem Text die HERKUNFT voran (lokal „capcom.ddev.site", live
   „jetzt.golf") und beschriftet die Knoepfe selbst mit „OK" und „Abbrechen". Auf die Frage
   „Die Runde wird abgebrochen – fortfahren?" lautet die Antwort dann „OK" statt „Ja".

   ⚠️ DIESE DATEI IST SELBSTTRAGEND, UND DAS IST DER GANZE PUNKT.
   Der Dialog stand vorher nur auf `runde.html` und benutzte deren `.block-*`- und
   `.knopf-*`-Regeln. Die stehen in `runde.css` – eine Klasse aus einem Stylesheet, das die
   Seite nicht laedt, ist aber Browser-Standard und kein Stil (Fallstrick aus `CLAUDE.md`).
   Auf `konto.html` und `turniere.html` waere der Dialog damit ein weisser Kasten mit grauen
   Systemknoepfen gewesen. Deshalb bringt er seine Optik selbst mit; die Werte sind 1:1 aus
   `runde.css` uebernommen, damit er auf `runde.html` genauso aussieht wie bisher.

   ⚠️ EIGENE KLASSEN (`jg-frage-*`), KEINE GEBORGTEN. Eine Liste mit Knoepfen bekommt eigene
   Klassen – dieselbe Regel wie im Styleguide. Geborgte Namen kollidierten hier zusaetzlich
   mit `runde.css`, das auf derselben Seite geladen wird.

   Gilt fuer Frontend UND Backend: EINE Quelle in `webapp/`, `Claude/frage.css` ist ein
   Symlink darauf – dasselbe Muster wie `handicap.js`, `markenfuss.js` und `format.js`.
   ══════════════════════════════════════════════════════════════════════════ */

.jg-frage-huelle {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* ⚠️ `100dvh` STATT `100vh`: `100vh` meint den GROSSEN Viewport – dann liegt die
     Safari-Leiste ueber dem untersten Knopf, und das ist hier ausgerechnet die Antwort.
     Pflicht bei jedem Dialog des Projekts (Punkt 3 der Kurzliste in `CLAUDE.md`). */
  height: 100dvh;
  background: rgba(21, 33, 28, .45);
}

/* ⚠️ `hidden` BRAUCHT EINE EIGENE ZEILE – die Huelle traegt `display: flex`, und eine
   `display`-Regel schlaegt das Attribut. Ohne sie stuende der Dialog dauerhaft offen,
   waehrend jeder DOM-Test „versteckt" meldet (Punkt 7 der Kurzliste). */
.jg-frage-huelle[hidden] { display: none; }

.jg-frage-kasten {
  width: 100%;
  max-width: 420px;
  padding: 14px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.jg-frage-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--jg-muted, #5c6b64);
}

.jg-frage-zu {
  min-width: 44px;
  min-height: 44px;
  color: var(--jg-muted, #5c6b64);
  background: none;
  border: 0;
  cursor: pointer;
}
.jg-frage-zu svg { width: 20px; height: 20px; }

.jg-frage-text {
  /* ⚠️ `pre-line` IST PFLICHT, KEIN FEINSCHLIFF. Mehrere Fragen im Backend trennen ihren
     Text mit `\n\n` in Absätze – `confirm()` hat die respektiert, `textContent` in HTML
     nicht: Ohne diese Zeile liefen „Das lässt sich nicht rückgängig machen." und der Satz
     davor zu einer Bleiwüste zusammen, und zwar ausgerechnet bei den gefährlichsten
     Rückfragen (endgültig löschen). `pre-line` behält die Umläufe und faltet den
     übrigen Leerraum wie gewohnt. */
  white-space: pre-line;
  margin: 4px 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--jg-ink, #15211c);
}

/* „Ja" und „Nein" teilen sich die Zeile zu gleichen Teilen: zwei gleichwertige Antworten auf
   dieselbe Frage. */
.jg-frage-wahl {
  display: flex;
  gap: 8px;
}
.jg-frage-wahl button { flex: 1 1 0; min-width: 0; }

/* ⚠️ DIE KNOPF-OPTIK STEHT HIER UND NICHT IN `runde.css`. Die Werte sind von dort
   uebernommen (`.knopf-haupt` / `.knopf-leise`), damit der Dialog ueberall gleich aussieht –
   auch auf Seiten, die `runde.css` gar nicht laden.

   ⚠️ `color` GEHOERT AUSDRUECKLICH DAZU: Ein `<button>` erbt die Textfarbe NICHT, und
   iOS-Safari malt ihn sonst in seinem Systemblau, waehrend Chrome schwarz nimmt. Derselbe
   Fallstrick wie an den Aufklapp-Beschriftungen (27.08.2026). */
.jg-frage-ja,
.jg-frage-nein,
.jg-frage-weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  border-radius: 10px;
  cursor: pointer;
}

.jg-frage-ja {
  min-height: 48px;
  padding: 12px 20px;
  font-size: 16px;
  color: #fff;
  background: var(--jg-green, #0f6e56);
  border: 1px solid var(--jg-green, #0f6e56);
}

.jg-frage-nein,
.jg-frage-weg {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--jg-green, #0f6e56);
  background: none;
  border: 1px solid var(--jg-line, #e4eae7);
}

/* ⚠️ OHNE DIESE ZEILE BLEIBT DER KNOPF STEHEN (21.09.2026). `jgHinweis` blendet „Nein" per
   `hidden` aus – aber das Attribut setzt nur die Regel des Browsers (`display: none`), und die
   verliert gegen das `display: inline-flex` oben. Im Bild gemessen: Der Hinweis hatte zwei
   Knoepfe, „Schliessen" und ein wirkungsloses „Nein". Fuer `.jg-frage-weg` steht dieselbe Zeile
   seit jeher weiter unten; sie fehlte nur hier. (Fallstrick aus `CLAUDE.md`: „`hidden` verliert
   gegen eigene `display`-Regeln“ – und deshalb wird Sichtbarkeit im BILD geprueft, nie am
   Attribut.) */
.jg-frage-nein[hidden] { display: none; }

/* „Abbrechen" darunter und ueber die volle Breite – es ist keine dritte Antwort, sondern der
   Ausstieg aus der Frage. Nur die Loch-Frage auf `runde.html` braucht ihn. */
.jg-frage-weg {
  width: 100%;
  margin-top: 8px;
}
.jg-frage-weg[hidden] { display: none; }

/* Ab Tablet steht der Kasten mittig statt am unteren Rand – wie jeder Dialog des Projekts. */
@media (min-width: 520px) {
  .jg-frage-huelle { align-items: center; }
  .jg-frage-kasten { border-radius: 16px; }
}