/* ============================================================================
   schnuppern.css - die Abfrage zum Schnuppertraining
   (app/bausteine/schnuppern.php, assets/js/schnuppern.js).
   Ein <dialog> ueber der Seite. Felder in der Optik des Online-
   Mitgliedsantrags (antrag.css, .antrag-feld), Farben und Masse aus
   bbc08.css - daher hell und dunkel gleich. Knoepfe sind .btn und tragen
   deren Rundung (--r-lg).
   Ab 641px ein Fenster in der Mitte, bis 640px volle Breite, oben buendig:
   dort geht beim Tippen die Tastatur von unten auf.
   ========================================================================= */

/* Die Seite dahinter rollt nicht mit (Klasse aus schnuppern.js). Der Rand
   rechts ersetzt eine Bildlaufleiste, die Platz einnahm - nicht
   scrollbar-gutter: das verkleinerte auch vw und liesse die Seite dahinter
   springen. */
html.schnuppern-offen { overflow: hidden; padding-right: var(--schnuppern-rinne, 0px); }
/* Der Rand kommt und geht ohne Uebergang. Bei reduzierter Bewegung gibt
   bbc08.css jedem Element .01ms Uebergang fuer alles - ein Bild lang stand
   die Seite dann ohne Rand da, und nach dem Schliessen war sie bis zu 21px
   verrutscht (gemessen bei 641 und 1366 mit Bildlaufleiste). */
html { transition-property: none; }

.schnuppern { width: min(560px, calc(100% - 2 * var(--s8))); max-width: none;
              max-height: calc(100% - 2 * var(--s8)); margin: auto; padding: 0;
              overflow: auto; overscroll-behavior: contain;
              border: 1px solid var(--border-default); border-radius: var(--r-lg);
              background: var(--surface-1); color: var(--fg-1); box-shadow: var(--sh-md); }
.schnuppern::backdrop { background: rgba(5, 5, 5, .6); }
.schnuppern__form { display: grid; gap: var(--s6); padding: var(--s7); }
/* Titel als Kopfzeile wie die Teile des Antrags, die Linie trennt ihn vom
   Inhalt. */
.schnuppern__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
                    padding-bottom: var(--s5); border-bottom: 1px solid var(--border-subtle); }
.schnuppern__titel { min-width: 0; font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700;
                     font-size: var(--p-t-h3); text-transform: uppercase; line-height: 1.1; color: var(--fg-1); }
/* Die Mitte der Versalhoehe des Titels steht auf der Mitte des
   Schliessen-Knopfs (Designvorgabe 01.10.2026): text-box schneidet den
   Titel auf Versalhoehe bis Grundlinie, align-items: center im Kopf mittet
   dann genau die Versalien. Vorher lag der Titel 1-2px zu hoch. */
.schnuppern__titel { text-box: trim-both cap alphabetic; }
.schnuppern__zu { flex: none; width: 44px; height: 44px; min-height: 0; padding: 0; margin: -6px -6px -6px 0; }
.schnuppern__zu svg { display: block; width: 20px; height: 20px; }
.schnuppern-feld { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.schnuppern-feld label { font-size: var(--t-sm); font-weight: 600; color: var(--fg-1); }
.schnuppern-feld input,
.schnuppern-feld textarea { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 0 var(--s4);
                            border: 1px solid var(--border-strong); border-radius: var(--r-md);
                            background: var(--surface-1); color: var(--fg-1); font: inherit; }
.schnuppern-feld textarea { display: block; min-height: 8em; padding: var(--s3) var(--s4);
                            line-height: var(--lh-body); resize: vertical; }
.schnuppern-feld input:focus-visible,
.schnuppern-feld textarea:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; box-shadow: none; }
.schnuppern-feld [aria-invalid="true"] { border-color: var(--danger); }
.schnuppern-fehler { font-size: var(--t-xs); font-weight: 600; color: var(--danger); }
.schnuppern-fehler[hidden] { display: none; }
.schnuppern .btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; box-shadow: none; }
.schnuppern__fuss { display: flex; justify-content: flex-start; }

@media (max-width: 640px) {
  .schnuppern { width: 100%; max-height: 100%; margin: 0 0 auto;
                border-width: 0 0 1px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .schnuppern__form { padding-top: max(var(--s7), env(safe-area-inset-top)); }
}
@media (max-width: 480px) {
  .schnuppern__form { padding: var(--s5); padding-top: max(var(--s5), env(safe-area-inset-top)); }
}