/* Feuerwehr-Abenteuer: Bausteine. Alle Bedienelemente mindestens 44 px hoch (--wt-tap). */
[data-theme="light"][data-skin="adventure"] body { background: var(--wt-paper); font-size: 1.0625rem; line-height: 1.55; }
[data-theme="light"][data-skin="adventure"] .ambient { display: none; }
[data-theme="light"][data-skin="adventure"] :focus-visible { outline: 3px solid var(--wt-blue); outline-offset: 3px; box-shadow: 0 0 0 6px var(--wt-yellow); }

.wt-card { background: var(--wt-white); color: var(--wt-ink); border: 3px solid var(--color-border); border-radius: var(--wt-radius); padding: 1.25rem; box-shadow: var(--shadow-card); }

.wt-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--wt-tap); padding: .5rem 1.5rem; border: 0; border-radius: 999px; background: var(--wt-red); color: var(--wt-white); font: 800 1.0625rem/1.2 var(--font-sans); cursor: pointer; box-shadow: 0 .25rem 0 var(--wt-red-dark); transition: transform .1s; }
.wt-button:hover { background: var(--wt-red-dark); }
.wt-button:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 var(--wt-red-dark); }
.wt-button--blue { background: var(--wt-blue); box-shadow: 0 .25rem 0 #08437f; }
.wt-button--yellow { background: var(--wt-yellow); color: var(--wt-ink); box-shadow: 0 .25rem 0 #b98a00; }

.wt-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .875rem .25rem .25rem; border-radius: 999px; background: var(--wt-blue-soft); color: var(--wt-ink); font-weight: 800; }
.wt-badge img, .wt-badge svg { width: 2.25rem; height: 2.25rem; }
.wt-badge--locked { filter: grayscale(1); opacity: .75; }

/* Weg Bronze -> Silber -> Gold */
.wt-path { display: flex; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.wt-path > li { display: flex; align-items: center; gap: .5rem; font-weight: 800; }
.wt-path > li + li::before { content: ""; width: 2rem; height: .5rem; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--wt-ink-soft) 0 .5rem, transparent .5rem .9rem); }


.hero__mascot { display: block; width: 7.5rem; height: auto; margin-bottom: .5rem; }
@media (max-width: 30rem) { .hero__mascot { width: 5.5rem; } }
/* Kopfzeile bis 64rem: Schalter umbrechen statt aus dem Bild zu laufen (Marke "Wissenstest" ist länger als im Refresher). */
@media (max-width: 64rem) {
  [data-theme="light"][data-skin="adventure"] .app-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; height: auto; min-height: 3.75rem; padding-block: .5rem; }
  [data-theme="light"][data-skin="adventure"] .header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; min-width: 0; max-width: 100%; }
  [data-theme="light"][data-skin="adventure"] .header-status { position: static; flex-basis: 100%; order: 3; width: auto; min-height: 2rem; padding: .125rem .75rem; border-radius: 999px; background: var(--wt-blue-soft); color: var(--wt-ink); }
}

/* Mein Weg: Abzeichen je Kapitel und Stufenweg */
.path-chapter__status { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; }
.path-chapter:not(.is-done) .path-chapter__status img { filter: grayscale(1); opacity: .55; }
[data-theme="light"][data-skin="adventure"] .wt-path { margin: 1rem 0 1.5rem; }
[data-theme="light"][data-skin="adventure"] .wt-badge { font-size: 1.125rem; padding-right: 1.125rem; border: 3px solid var(--color-border); background: var(--wt-white); }

/* Gruppenübersicht (Administration): aufklappbare Gruppe mit Mitgliedern */
.role-admin-row--group { display: block; }
.group-detail > summary { display: grid; gap: .15rem; min-height: 2.75rem; cursor: pointer; }
.group-detail > summary strong, .group-detail > summary span { display: block; }
.group-members { margin: .75rem 0 .25rem; padding: 0; list-style: none; display: grid; gap: .4rem; }
.group-members li { display: flex; flex-wrap: wrap; gap: .25rem .75rem; justify-content: space-between; padding: .5rem .75rem; border-radius: var(--radius-md, 1rem); background: rgba(0, 0, 0, .04); }

/* QR-Beitritt (Jugendleitung): Antragszeile, Startpasswort */
.join-review-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; width: 100%; }
.join-review-form > div { flex: 1 1 12rem; }
.join-review-form .field { flex: 1 1 10rem; margin: 0; }
.join-password { margin-block: 1rem; overflow-wrap: anywhere; }
.join-password code { font-size: 1.15em; font-weight: 700; letter-spacing: 0.08em; }
.join-review-form > div strong, .join-review-form > div span { display: block; }
.registration-qr .field { width: 100%; max-width: 32rem; }
.registration-qr .field input { width: 100%; }

/* Panel der Jugendleitung: Auswahl, Sammelaktionen, Filter, Protokoll */
.youth-select { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.youth-select input { width: 1.5rem; height: 1.5rem; accent-color: var(--color-info); }
.youth-bulk { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-block: 1rem; padding: 1rem; border-radius: 1.25rem; background: var(--color-surface-elevated); color: var(--color-text); border: 2px solid var(--color-border); }
.youth-bulk .field { margin: 0; }
.youth-filter { margin: 0; min-width: 12rem; }
.youth-log li { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.youth-log li span { color: var(--wt-ink); }
.youth-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.youth-row > div:not(.youth-row-actions) { flex: 1 1 14rem; min-width: 0; }
.youth-row > div strong, .youth-row > div span { display: block; }
.youth-row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.youth-select input { margin: 0; }
.role-admin-list { margin: 0; padding: 0; list-style: none; }
.group-delete-hint { align-self: center; color: var(--color-text-muted); font-size: .85rem; }
.form-grid > .form-actions { align-self: end; align-items: flex-end; }
.form-actions > .button:not(.button--small) { min-height: 52px; }
#youth-group-form, #youth-leader-form { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }