/*
 * Rechner-Karten am Handy (KIN-119, BMI-Rechner KIN-126): public/assets/js/rechner-karten.js.
 *
 * Doppelt abgesichert, damit Desktop und Browser ohne JavaScript nichts davon
 * sehen: Jede Regel gilt nur unter 700 px UND nur, wenn das Skript die Klasse
 * gesetzt hat (html.rk-handy vor dem ersten Bild, form.rk-aktiv sobald die
 * Karten stehen). Ausgeblendet wird mit display: none – entfernt wird nichts.
 *
 * Farben nur aus der Lila-Skala (Variablen aus site.css, Hexwert als Ersatz),
 * keine Ampel. Auf 320 × 568 (iPhone SE) passt jede Karte samt „Weiter“ unter
 * den klebenden Kopf: Messfelder zwei nebeneinander, keine Kästen in Kästen.
 * Datumsfelder: die iOS-Regel aus site.css (appearance: none, min-width: 0)
 * bleibt unangetastet.
 */
@media (max-width: 699.98px) {
    /* Vor dem ersten Bild: Hinweise des Kopfs weg, Formular unsichtbar, bis die Karten stehen –
       so springt beim Laden nichts. Steht nach 4 s keine Karte, nimmt _karten-kopf.php rk-handy weg. */
    html.rk-handy [data-rk-ausblenden] { display: none !important; }
    html.rk-handy form[data-rechner-karten]:not(.rk-aktiv) { visibility: hidden; }

    form.rk-aktiv *, form.rk-aktiv *::before, form.rk-aktiv *::after { box-sizing: border-box; }
    form.rk-aktiv .rk-weg { display: none !important; }
    form.rk-aktiv .rk-huelle { margin: 0 !important; padding: 0 !important; border: 0 !important;
                               background: none !important; box-shadow: none !important; }
    form.rk-aktiv .rk-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
                           overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

    /* Kopf der Karte: „Schritt x von y“ und die Frage */
    form.rk-aktiv .rk-kopf { margin: 0 0 14px; outline: none; }
    form.rk-aktiv .rk-zaehler { margin: 0 0 4px; font-size: .82rem; font-weight: 700; letter-spacing: .02em;
                                color: var(--lila, #8e4baf); }
    form.rk-aktiv .rk-frage,
    form.rk-aktiv .rk-titel { margin: 0 0 10px; font-size: 1.2rem; font-weight: 800; line-height: 1.25;
                              color: var(--lila-dunkel, #6f3a8c); }
    form.rk-aktiv .rk-frage { margin: 0; }
    form.rk-aktiv legend.rk-titel { padding: 0; }

    /* Geburtsdatum mit „Zu früh geboren?“ – kompakt, damit auch der Regler passt */
    form.rk-aktiv .pz-geburt { max-width: none; margin-bottom: 14px; }
    form.rk-aktiv .pz-alter { margin-top: 8px; padding: 8px 12px; font-size: .9rem; }
    form.rk-aktiv .pz-frueh-wahl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    form.rk-aktiv .pz-frueh-wahl span { display: block; height: 100%; padding: 8px 10px; text-align: center; font-size: .92rem; }
    form.rk-aktiv .pz-frueh-regler { margin-top: 10px; padding: 10px 12px; }
    form.rk-aktiv .pz-frueh-regler label { margin-bottom: 4px; font-size: .92rem; }
    /* Erklärsatz und Skala: die Woche steht im Regler-Text, „korrigiert …“ in der Altersangabe darüber */
    form.rk-aktiv .pz-frueh-regler [data-korrektur], form.rk-aktiv .pz-regler-skala { display: none; }

    /* Messkarte: Datum und Gewicht, Größe und Kopfumfang je zwei nebeneinander */
    form.rk-aktiv .measure-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; }
    form.rk-aktiv .measure-row > .form-row { display: block; grid-row: auto; min-width: 0; margin: 0; }
    /* In früheren Messungen sind die Beschriftungen sonst nur für Screenreader da */
    form.rk-aktiv .measure-row label.sr-only { position: static; width: auto; height: auto; margin: 0 0 6px;
                                               overflow: visible; clip: auto; white-space: normal; }
    form.rk-aktiv .measure-row label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
                                       font-size: .85rem; font-weight: 700; color: var(--lila-dunkel, #6f3a8c); }
    form.rk-aktiv .measure-row input { width: 100%; min-width: 0; }

    /*
     * BMI-Rechner (KIN-126, bmi.php): dasselbe Formular wie am Desktop, nur anders gesetzt.
     * Geschlecht als zwei große Knöpfe (wie .pz-wahl, aber ohne Bildchen), Messkarte mit
     * dem Datum über Gewicht und Größe nebeneinander – so ist sie nicht höher als die
     * Messkarte des Perzentilenrechners und passt auf 320 × 568. Nur form.bmi-form.
     */
    form.rk-aktiv.bmi-form .form-row { margin-bottom: 12px; }
    form.rk-aktiv.bmi-form .form-row label { margin-bottom: 4px; font-size: .9rem; font-weight: 700;
                                             color: var(--lila-dunkel, #6f3a8c); }
    form.rk-aktiv.bmi-form .bmi-werte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
    form.rk-aktiv.bmi-form .bmi-werte > .form-row { min-width: 0; margin-bottom: 0; }
    form.rk-aktiv.bmi-form .bmi-werte input { width: 100%; min-width: 0; }
    form.rk-aktiv.bmi-form .bmi-geschlecht { margin-bottom: 0; }
    form.rk-aktiv.bmi-form .bmi-geschlecht .radio-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    form.rk-aktiv.bmi-form .bmi-geschlecht .radio-group label {
        display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; margin: 0;
        padding: 10px 12px; border: 1px solid var(--lila-linie, #ddc9e7); border-radius: 12px; background: #fff;
        font-size: 1.05rem; font-weight: 700; color: var(--lila-dunkel, #6f3a8c); cursor: pointer; }
    /* Gewählte Taste: Klasse ist-gewaehlt aus rechner-karten.js (iOS-Safari vor 15.4 kennt
       :has nicht) und :has als zweiter Weg. Bewusst zwei Regeln – in einer Liste würde ein
       unbekanntes :has() die ganze Regel ungültig machen. */
    form.rk-aktiv.bmi-form .bmi-geschlecht .radio-group label.ist-gewaehlt {
        border-color: var(--lila, #8e4baf); background: var(--lila-flaeche, #f3ecf8);
        box-shadow: inset 0 0 0 1px var(--lila, #8e4baf); }
    form.rk-aktiv.bmi-form .bmi-geschlecht .radio-group label:has(input:checked) {
        border-color: var(--lila, #8e4baf); background: var(--lila-flaeche, #f3ecf8);
        box-shadow: inset 0 0 0 1px var(--lila, #8e4baf); }

    /* „Frühere Messung dazu“: ein Link, groß genug zum Antippen */
    form.rk-aktiv .rk-mehr { margin: 10px 0 0; }
    form.rk-aktiv .rk-mehr-knopf { min-height: 44px; padding: 8px 0; border: 0; background: none; cursor: pointer;
                                   font: inherit; font-weight: 700; color: var(--lila-dunkel, #6f3a8c);
                                   text-decoration: underline; text-underline-offset: 3px; }

    /* Zurück und Weiter */
    form.rk-aktiv .rk-nav { display: flex; gap: 10px; margin-top: 16px; }
    form.rk-aktiv .rk-nav .btn { min-height: 48px; padding: 12px 16px; font-size: 1.02rem; text-align: center; }
    form.rk-aktiv .rk-weiter { flex: 1 1 auto; }
    form.rk-aktiv .rk-zurueck { flex: 0 0 auto; }

    /* Nach dem Rechnen: das Formular als schmale Leiste über dem Ergebnis */
    form.rk-aktiv .rk-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
    form.rk-aktiv .rk-leiste p { margin: 0; font-weight: 600; color: var(--lila-tief, #4a2a63); }

    form.rk-aktiv .rk-kopf[hidden], form.rk-aktiv .rk-nav[hidden], form.rk-aktiv .rk-mehr[hidden],
    form.rk-aktiv .rk-leiste[hidden], form.rk-aktiv .rk-frage[hidden], form.rk-aktiv .rk-nav [hidden] { display: none; }

    /* Ergebniskarten oben im Ergebnis (_result.php, Container [data-rk-ergebnis]) */
    .rk-ergebnis { margin: 4px 0 18px; }
    .rk-ergebnis .ek { margin-top: 0; }
    /* „Kurven ansehen“ als großer Knopf über die volle Breite (26.10.2026, statt Link und Bild-Knopf) */
    .rk-ergebnis-weiter { margin: 14px 0 0; }
    .rk-ergebnis-weiter .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; box-sizing: border-box; }
    .rk-ergebnis-weiter .btn::after { content: ' ↓'; white-space: pre; }

    /*
     * Speicher-Frage nach den Ergebniskarten (KIN-124, _speicherfrage.php, nur Abgemeldete).
     * Jede der beiden Karten passt auf 320 × 568 unter den klebenden Kopf: die Formularkarte
     * ohne eigene Überschrift (die erste Beschriftung ist die Frage), Felder kompakt, aber
     * mit 16 px Schrift – darunter zoomt Safari beim Antippen und die Seite scrollt seitlich.
     */
    .rk-speichern { margin: 0 0 18px; }
    .rk-speichern *, .rk-speichern *::before, .rk-speichern *::after { box-sizing: border-box; }
    .rk-speichern [hidden] { display: none !important; }
    .rk-sf-frage { padding: 14px; border: 1px solid var(--lila-linie, #ddc9e7); border-radius: 12px;
                   background: var(--lila-flaeche, #f3ecf8); }
    .rk-sf-titel { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; line-height: 1.25;
                   color: var(--lila-dunkel, #6f3a8c); }
    .rk-sf-text { margin: 0 0 12px; font-size: .95rem; line-height: 1.4; color: var(--lila-tief, #4a2a63); }
    .rk-sf-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .rk-sf-knoepfe .btn, .rk-sf-senden { min-height: 48px; padding: 12px 10px; font-size: 1.02rem; text-align: center; }

    /* Nach „Nein, danke“: nur noch ein kleiner Link, groß genug zum Antippen */
    .rk-sf-link { margin: 0; }
    .rk-sf-link-knopf { min-height: 44px; padding: 8px 0; border: 0; background: none; cursor: pointer;
                        font: inherit; font-weight: 700; color: var(--lila-dunkel, #6f3a8c);
                        text-decoration: underline; text-underline-offset: 3px; }

    /* Formularkarte */
    .rk-sf-form { margin: 0; padding: 12px; border: 1px solid var(--lila-linie, #ddc9e7); border-radius: 12px; background: #fff; }
    .rk-sf-form .form-row { margin: 0 0 10px; }
    .rk-sf-form .form-row label { margin-bottom: 4px; font-size: .9rem; font-weight: 700; color: var(--lila-dunkel, #6f3a8c); }
    .rk-sf-form .form-row input { width: 100%; min-width: 0; padding: 9px 12px; font-size: 16px; line-height: 1.25; }
    .rk-sf-pw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
    .rk-sf-pw-kopf label { margin-bottom: 0 !important; }
    .rk-sf-pw-kopf .optional { font-weight: 400; }
    .rk-sf-pw-kopf .pw-toggle { flex: 0 0 auto; min-height: 30px; margin: 0; padding: 2px 10px; font-size: .82rem; }
    .rk-sf-form .field-error { margin-top: 2px; font-size: .85rem; }
    .rk-sf-senden { display: block; width: 100%; margin-top: 4px; }
    .rk-sf-senden[aria-disabled="true"] { opacity: .7; }
    .rk-sf-fuss { margin: 8px 0 0; font-size: .88rem; color: var(--lila-tief, #4a2a63); }
    .rk-sf-fuss a { color: var(--lila-dunkel, #6f3a8c); font-weight: 700; }

    /* Steht die Speicher-Frage, ist der Hinweis „Kostenlos registrieren“ darunter doppelt */
    html.rk-handy .rk-speichern:not([hidden]) ~ .save-hint { display: none; }
}

/* Über 700 px nie sichtbar, auch wenn ein Zustand vom Drehen übrig wäre */
@media (min-width: 700px) {
    .rk-kopf, .rk-nav, .rk-mehr, .rk-leiste, .rk-speichern { display: none !important; }
}

/* Sprungziel „Kurven ansehen“: nicht unter dem klebenden Kopf verschwinden */
#kurven { scroll-margin-top: var(--sprungabstand, 90px); }