/* ===========================================================================
   Jelly-Form für alles, was man antippt (A4, Nachbesserung, Andi, 16.10.2026)

   „Die Elemente bräuchten noch die typische Jelly-Form und können auch
   asymmetrisch sein. Manche Knöpfe sehen gar nicht nach Jelly aus. Die
   einzelnen Fragen können einzelne Jelly-Elemente sein; es fehlt der Glanz.“

   Das Gel selbst (Verlauf, Rand, ungleiche Rundung, Glanz oben links, Licht
   unter dem Finger) steht in szene.css (.jelly, .knopf-primaer) und kommt aus
   den Tokens je Tageszeit (tageszeiten.css: --jelly-*). bausatz/jelly-
   ueberall.js trägt die Klassen ein; hier steht nur, wie groß und wie rund
   jedes Element wird. Die Maße bleiben die der bisherigen Elemente: Das Feld
   im Fluss darf nicht springen (miss-sprung, 0,5 px). Geladen nach allen
   anderen Stylesheets, damit das Gel die alten Linien- und Textformen ablöst.
   =========================================================================== */

/* --- Knöpfe: Zweitknöpfe und Verweise als Gel ------------------------------- */
[data-jelly].jelly.jelly-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
    min-height: 48px; padding: 0 22px; border: 1px solid var(--jelly-rand); border-radius: var(--r-jelly-knopf);
    background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b)); color: var(--feld-text);
    font: 600 16px var(--f-text); text-decoration: none; cursor: pointer;
    box-shadow: inset 0 1.5px 0 var(--jelly-kante), inset 0 -8px 16px -8px var(--jelly-glimm), 0 12px 22px -14px var(--jelly-schatten), 0 2px 5px -3px var(--jelly-schatten);
}
/* Zurück, Überspringen, Detaillierte Aufstellung: dieselbe Form, ein Stück kleiner und ruhiger. */
[data-jelly].jelly.jelly-knopf.fluss-verweis { min-height: 44px; padding: 0 20px; font-weight: 500; }
[data-jelly].jelly.jelly-knopf.fluss-verweis.leise { color: var(--feld-leise); }
.jelly-knopf::before { left: 14px; top: 4px; width: 40%; height: 7px; }
/* Der Pfeil hinter „Detaillierte Aufstellung“ ersetzt das Lichtfeld (::after) dieses einen Knopfes. */
[data-jelly].fluss-verweis.pfeil::after { content: "\2192"; position: static; inset: auto; margin-left: 2px; background: none; opacity: 1; }
[data-jelly].jelly.jelly-knopf:disabled { visibility: hidden; }
/* Reiter der Detailaufstellung: der gewählte trägt die Akzentkante. */
[data-jelly].jelly.step-pill.active { border-color: var(--akzent); }

/* Gefüllte Knöpfe in der Seite und in der Aktionsleiste tragen den Primärknopf des Gels. */
a.knopf.knopf-primaer[data-jelly], .action-btn.knopf-primaer[data-jelly] {
    color: var(--knopf-text); border: 0; border-radius: var(--r-jelly-knopf); text-decoration: none;
    background: radial-gradient(120% 130% at 30% 0%, var(--knopf-a), var(--knopf-b) 70%);
    box-shadow: inset 0 1.5px 0 var(--knopf-kante), inset 0 -8px 16px -8px var(--knopf-tief), 0 14px 26px -14px var(--knopf-schein);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
a.knopf.knopf-primaer[data-jelly] { min-height: 56px; padding: 0 28px; font: 600 17px var(--f-text); }

/* --- Antworten: eine Gelpille je Antwort ------------------------------------ */
.fluss-antworten { height: 44px; margin-bottom: 18px; gap: 8px; align-items: center; border-top: 0; border-bottom: 0; padding: 0 4px; }
[data-jelly].jelly.jelly-chip {
    flex: none; display: inline-flex; align-items: center; height: 44px; min-height: 0; margin: 0; padding: 0 14px;
    border: 1px solid var(--jelly-rand); border-radius: var(--r-jelly-chip);
    background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b)); color: var(--feld-text);
    font: 500 15px var(--f-text); text-decoration: none;
    box-shadow: inset 0 1.5px 0 var(--jelly-kante), inset 0 -6px 10px -6px var(--jelly-glimm), 0 8px 14px -10px var(--jelly-schatten), 0 1px 3px -2px var(--jelly-schatten);
}
[data-jelly].jelly.jelly-chip:last-of-type { border-right: 1px solid var(--jelly-rand); }
[data-jelly].jelly.jelly-chip.uebersprungen { border-style: dashed; color: var(--feld-leise); }
[data-jelly].jelly.jelly-chip:hover { text-decoration: none; }
.jelly-chip::before { left: 12px; top: 4px; width: 38%; height: 7px; }
.jelly-chip sup { color: var(--feld-leise); }

/* --- Auswahl: eine Gelzeile je Möglichkeit ---------------------------------- */
.fluss .fluss-wahl { gap: 10px; }
[data-jelly].jelly.jelly-wahl {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px;
    border: 1px solid var(--jelly-rand); border-bottom-color: var(--jelly-rand); border-radius: var(--r-jelly-chip);
    background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b)); color: var(--feld-text);
    font: 500 16px/1.3 var(--f-text);
    box-shadow: inset 0 1.5px 0 var(--jelly-kante), inset 0 -8px 14px -8px var(--jelly-glimm), 0 10px 18px -12px var(--jelly-schatten), 0 2px 4px -3px var(--jelly-schatten);
}
[data-jelly].jelly.jelly-wahl:has(:checked) { border-color: var(--akzent); box-shadow: inset 0 1.5px 0 var(--jelly-kante), inset 0 0 0 1px var(--akzent), 0 10px 18px -12px var(--jelly-schatten); }
.jelly-wahl::before { left: 12px; top: 4px; width: 34%; height: 8px; }

/* --- Fragen: jede Frage ein eigenes Gelstück -------------------------------- */
.lichtung .fragen-liste { display: grid; gap: 12px; margin-top: 28px; border: 0; padding: 0; }
[data-jelly].jelly.jelly-zeile {
    border: 1px solid var(--jelly-rand); border-top: 1px solid var(--jelly-rand); border-radius: var(--r-jelly-zeile);
    background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b)); color: var(--feld-text);
    box-shadow: inset 0 1.5px 0 var(--jelly-kante), inset 0 -12px 22px -10px var(--jelly-glimm), 0 18px 30px -20px var(--jelly-schatten), 0 3px 7px -4px var(--jelly-schatten);
}
/* Jede zweite Frage ist anders gerundet: gleiches Gel, kein Raster. */
.fragen-liste > .jelly-zeile:nth-child(even) { border-radius: var(--r-jelly-zeile-spiegel); }
/* Oben 14 px Luft: Bricht eine Frage in zwei Zeilen um (Telefon), steht der Text unter dem Glanz und nicht darin. */
.lichtung .fragen-liste .jelly-zeile .aufklapper-kopf { padding: 14px 22px; color: var(--feld-text); }
.lichtung .fragen-liste .jelly-zeile .aufklapper-text p { margin: -4px 22px 18px; color: var(--feld-text); }
.lichtung .fragen-liste .jelly-zeile .aufklapper-text a { color: var(--feld-text); }
.jelly-zeile::before { left: 22px; top: 4px; width: 30%; height: 9px; }

/* Am Telefon steht „Weiter“ mit „Überspringen“ und „Zurück“ in einer Zeile: kleinere Abstände und Ränder. */
@media (max-width: 760px) {
    .fluss .fluss-knoepfe { gap: 8px 10px; }
    [data-jelly].jelly.jelly-knopf.fluss-verweis { padding: 0 12px; font-size: 15px; }
}

/* --- Annahmen: jede ein Gelstück, das wackelt und sich ziehen lässt (Andi, 16.10.2026) --- */
.lichtung .annahmen { gap: 12px 16px; margin-top: 28px; max-width: 760px; }
[data-jelly].jelly.jelly-annahme {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 14px 20px 14px;
    border: 1px solid var(--jelly-rand); border-top: 1px solid var(--jelly-rand); border-radius: var(--r-jelly-zeile);
    background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b)); color: var(--feld-text);
    box-shadow: inset 0 1.5px 0 var(--jelly-kante), inset 0 -10px 18px -10px var(--jelly-glimm), 0 14px 24px -16px var(--jelly-schatten), 0 2px 6px -3px var(--jelly-schatten);
}
.lichtung .annahmen > .jelly-annahme:nth-child(even) { border-radius: var(--r-jelly-zeile-spiegel); }
.lichtung .jelly-annahme dt, .lichtung .jelly-annahme dd { color: var(--feld-text); min-width: 0; }
.lichtung .jelly-annahme dd:not(.annahme-wozu) { white-space: nowrap; }
.lichtung .jelly-annahme dd.annahme-wozu { color: var(--feld-leise); }
.jelly-annahme::before { left: 18px; top: 4px; width: 28%; height: 8px; }
@media (max-width: 760px) {
    .lichtung .annahmen { grid-template-columns: minmax(0, 1fr); }
    /* Vorschau des Exposés: „Zurück“ und „Drucken / PDF“ stehen nebeneinander in der Leiste (Andi, 16.10.2026) */
    .expose-vorschau-knoepfe .action-btn { padding: 0 14px; min-height: 44px; font-size: 15px; white-space: nowrap; }
}